/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*=========== MENU CSS ===============
    Default css

	1_. HEADER
	2_. HOMEPAGE
	3_. PRODUCT CATE
	4_. PRODUCT
	5_. BLOG & CATEGORY

	99.___ CTA BUTTON ___

============================CSS*/

/* Default */

    body{
        outline: none !important
    }
    
    input:focus{
        outline: none !important;
    }
    
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 7px;
    }
    
    #advance-title{
        
    }
    
    #advance-title:before {
        content: "";
        display: table;
        width: 57px;
        height: 15px;
        border: 5px solid #FFD34D;
        border-width: 5px 5px 0px;
        position: absolute;
        margin: 0px auto;
        left: 0;
        right: 0;
        top: 0;
    }
    
    
    /*======== 1_. HEADER ========*/
    #header-flags div ul{
        margin: 0;
        list-style-type: none;
    }
    
    #header-flags div ul li{
        display: inline;
        padding: 5px;
    }    
    
    #header-flags ul li a img{
        height: 40px !important;
        width: 40px !important;
    }    
    
    #header_nvl ul li ul li a{
        min-width: 250px;
    }
    
    
    @media (max-width: 1200px) {
        #header-flags{
            text-align: right;
        }
        
        #menu_mobile{
            display: contents;
        }
        
        #menu_mobile:after{
            content:'Menu';
            color:white;
            padding:5px;
    	}
    }
    
    #menu_header .elementor-widget-container .bdt-navbar-wrapper nav ul li a:before{
    	margin: 0px 15px !important;
    	height: 1px !important;
    	width: 40px !important;
    }

/* End 1_. HEADER */




/*======== 2_. HOMEPAGE ========*/

    #btn-grad{
    	background-image: linear-gradient(to left, #00ABE7 0%, #084063 50%, #00ABE7 50%, #084063  100%);
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 220% auto;
        color: white;            
        border-radius: 5px;
        background-position: right center;
    }
    
    #btn-grad:hover {
        background-position: left center; 
        color: #fff;
        text-decoration: none;
    }
    
    .bdt-navigation-prev, .bdt-navigation-next{
        background: #fed34d;
        color: white;
        width: 40px;
        height: 40px;
        padding-right: 2px;
        padding: 6px;
        border-radius: 2px;
    }
    
    .bdt-slideshow-content-wrapper{
        background-image: linear-gradient(to right,#fed34d, #fed34d 20%, #00000000 20%);
        padding: 80px 40px 80px 60px;
    }
    
    .bdt-slideshow-pre-title::before{
        content:"___";
        color: #084063;
    }
    
    #about_image{
        position: relative;
    }
    
    #years {
        width: 315px;
        background: #FFD34D;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: bottom left;
        bottom: 0;
        left: 30px;
        color: red !important;
    }

/* End 2_. HOMEPAGE */


/*======== 3_. PRODUCT CATE ========*/
    #pro_loop_title{
    	text-align:center;
    }
    
    .accordion {
    	margin: auto;
    	width: 100%;
    }
    .accordion input {
    	display: none;
    }
    .box {
    	position: relative;
    	background: white;
        height: 64px;
        transition: all .15s ease-in-out;
    }
    .box::before {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        box-shadow: 0 0 0 #e5e5e5, 0 0 0px rgb(0 0 0 / 12%), 0 0px 1px rgb(0 0 0 / 24%);
    }
    
    .box-title {
    	width: calc(100% - 40px);
    	height: 64px;
    	line-height: 64px;
    	padding: 0 20px;
    	display: inline-block;
    	cursor: pointer;
    	-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
    }
    
    .box-title h2{
        font-size: 20px !important;
    }
    
    .box-content {
    	width: calc(100% - 40px);
        padding: 30px 20px;
        font-size: 1em;
        color: rgb(0 171 231);
        display: none;
        text-align: justify;
    }
    .box-close {
    	position: absolute;
    	height: 64px;
    	width: 100%;
    	top: 0;
    	left: 0;
    	cursor: pointer;
    	display: none;
    }
    input:checked + .box {
    	height: auto;
    	margin: 16px 0;
        box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 0px 8px #00000003;
    }
    input:checked + .box .box-title {
    	border-bottom: 1px solid rgba(0,0,0,.18);
    }
    input:checked + .box .box-content,
    input:checked + .box .box-close {
    	display: inline-block;
    }
    .arrows section .box-title {
    	padding-left: 44px;
    	width: calc(100% - 64px);
    }
    .arrows section .box-title:before {
    	position: absolute;
    	display: block;
    	content: '\203a';
    	font-size: 18pt;
    	left: 20px;
    	top: -2px;
    	transition: transform .15s ease-in-out;
    	color:#00abe7;
    }
    input:checked + section.box .box-title:before {
    	transform: rotate(90deg);
    }
    
    
    .box-title h2 {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: inherit;
        font-weight: 400;
        text-transform: uppercase;
        color:#00abe7;
    }
    
    .jet-active-filter__label::before{
        content: " _" ;
    }
    
    .jet-active-filter__val{
        background: white;
        padding: 3px 10px 4px 10px;
        border-radius: 2px;
    }
    
    #chk_features .jet-checkboxes-list{
        display: flex;
    }
    
    #chk_features .jet-checkboxes-list-wrapper{
        width: 90%;
    }
    
    #chk_features .jet-filter-items-moreless{
        padding-top: 0px;
    }
    
    #feature-filter .jet-checkboxes-list__button:before{
        content:'+';
        font-size:10px;
        color:white;
        border-radius: 5px;
        background: #ffd34d;
        padding: 1px 7px 0px 7px;
        margin-right: 5px;
    }
    
    #feature-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__button:before{
        background: #00abe7;
        transition: 0.5s;
    }
    
    
    #feature-filter .jet-checkboxes-list__input:checked~ .jet-checkboxes-list__button:before{
        display: none;
    }
    
    #cate-description h2, #cate-description span,#cate-description a{
        font-size: 18px;
    }
    
    #cate-description .elementor-tab-content{
        text-align: justify;
    }
/* End 3_. PRODUCT CATE */




/*======== 4_.PRODUCTS DETAIL========*/

/*----Pro Short Description----*/

    .shortdes-container {
      width: 100%;	
      display: grid;
      grid-template-columns: 30% auto;
      border: 1px dotted #58B6E7;
      border-radius: 5px;
      padding: 10px;
      color: #58B6E7;
    	
    }
    
    .shortdes-container .heading{
    	font-weight:600;
    }
    
    .shortdes-container .content:before{
    	content: ': ';
    }
    
    .shortdes-container .grid-item {
      font-size: 17px;
      padding: 3px;
    }
    
    #pro-pvc-usage-tag-detail a img{
        max-width: 50px;
        padding: 3px;
    }
    
    #pro-pvc-usage-tag-detail a img:hover{
        transform: scale(1.1);
        transition: 0.3s;
        filter: brightness(1.2);
    }
    
    
    .container_ft_sidebar{
        width: 100%;
    }
    .container_ft_sidebar .grid-container {
      display: grid;
      grid-template-columns: 33% 33% 33% ;
    
    }
    .container_ft_sidebar .grid-item {
      font-size: 20px;
      text-align: center;
      padding: 10px;
    }
    
    .container_ft_sidebar .grid-item img{
        width: 25px;
    }
    .container_ft_sidebar .des_item{
        font-family: Arial;
        font-size: 12px;
    }

/*----Tool Tip----*/
    [data-c-tooltip]:hover:before,
    [data-c-tooltip]:hover:after,
    [data-c-tooltip]:focus:before,
    [data-c-tooltip]:focus:after{
      -webkit-transform: translateY(-33px) !important;
      -moz-transform: translateY(-33px) !important;
      transform: translateY(-33px) !important;
    }

/*Price*/
    #pro-price bdi,#pro-price .text-price {
        font-size: 30px;
        color: #ff8100;
        font-weight: 700;
    }
    
    #pro-price .text-price{
        font-size: 20px;
    }



/*Menu Overview*/
    #ProductDetail_ENG{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    
        

/*End Menu Overview*/

/*Overviews*/
    .overview-container {
      display: grid;
      grid-template-columns: 50% auto;
      padding: 10px;
      column-gap: 50px;
    }
    
    .overview-container-100 {
      width:100%;
      padding: 10px;
      font-size: 15px;
    }
    
    .overview-container-100 h3 {
        padding-bottom: 15px;
    }
    
    .overview-item {
      display: grid;
      grid-template-columns: 35% auto;  
      padding: 3px;
      text-align: left;
      font-size: 14px;
      color:#565656;
      padding-left:10px;
      background: #f6fdffa6;
      border-radius:5px;
    }
    
    .overview-item:first-child, .overview-item:nth-child(2) {
      padding-top:10px;
    }
    
    .overview-item:last-child, .overview-item:nth-last-child(2) {
      padding-bottom:10px;
    }
    
    .overview-item .title{
        color:#363636;
        font-weight:600;
    }
    
    .overview-item .title::before{
        content:'-';
    }
    
    .overview-item .content::before{
        content:':';
    }
    
    .packaginggalary{
        display:grid;
        grid-template-columns: 50% auto;
    }
    
    #pro-content h2{
        margin: 10px 0px;
    }
    
    #pro-content h3{
        margin: 10px 0 0 0;
        font-size: 17px;
    }
    
    #pro-content hr{
        border-top: 1px dashed #c5c5c5;
    }
    
    @media all and (max-width: 750px) {
        .overview-container {
          display: grid;
          grid-template-columns: 100%;
          padding: 10px 0 10px 0;
        }
        
        .overview-item {
          display: grid;
          grid-template-columns: 40% auto;  
        }
    }
    
    /*Video Detail Resposive*/
    .video-container {
      position: relative;
      padding-bottom: 56.25%;
    }
    
    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
/*End Overviews*/    
    

    
    

/* End 4_.PRODUCTS DETAIL */

























/*============================
    99.___ CTA BUTTON ___
============================CSS*/
/*Change position*/
.cta-livechat {
    margin: auto;
    position: fixed;
    bottom: 110px;
    right: 55px;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 26px;
    z-index: 9999
}

.livechat-item,
.cta-livechat-open-button {
    background: #fed34d;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    color: #FFFFFF;
    text-align: center;
    line-height: 55px;
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}


.cta-livechat-open {
    display: none;
}

/*Animation Circle*/
.circle {
    position: absolute;
    top: -5px;
    left: -5px;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2.5px;
    animation: spin 10s linear infinite;
}

.border-circle {
    border: 2.5px dashed #fed34d;
    box-sizing: content-box !important;
}

@keyframes spin {
    100% {
        transform: rotateZ(360deg);
    }
}

.livechat-item:hover {
    filter: brightness(1.2);
}
.livechat-item:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.livechat-item:nth-child(4) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.livechat-item:nth-child(5) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.livechat-item:nth-child(6) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}

.cta-livechat-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(-20px, 70px, 0px);
    transform: scale(1.1, 1.1) translate3d(-20px, 70px, 0px);
    cursor: pointer;
}
.cta-livechat-open-button:hover {
    -webkit-transform: scale(0.9, 0.9) translate3d(-30px, 80px, 0px);
    transform: scale(0.9, 0.9) translate3d(-30px, 80px, 0px);
}
.livechat-item-1 {
    background-color: #28a7e8;
}
.livechat-item-2 {
    background-color: #70CC72;
}
.livechat-item-3 {
    background-color: #2962ff;
}
.livechat-item-4 {
    background-color: #C49CDE;
}
.livechat-item-5 {
    background-color: #fed34d;
}
.livechat-item:nth-child(3), .livechat-item:nth-child(4), .livechat-item:nth-child(5), .livechat-item:nth-child(6), .livechat-item:nth-child(7){
    visibility: hidden; 
    opacity: 0;
}



/* ====== WHEN CHECKED =======*/
.cta-livechat-open:checked + .cta-livechat-open-button .line-1,
.cta-livechat-open:checked + .cta-livechat-open-button .line-3 {
    width: 25px;
    height: 3px;
    background: #fed34d;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
    -webkit-transition: -webkit-transform 200ms;
    transition: -webkit-transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, -webkit-transform 200ms;
}

.cta-livechat-open:checked + .cta-livechat-open-button .line-1 {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
}

.cta-livechat-open:checked + .cta-livechat-open-button .line-3 {
    -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
    transform: translate3d(0, 0, 0) rotate(-45deg);
}


/*Animation Circle*/
.cta-livechat-open:checked + .cta-livechat-open-button .circle {
    animation: spin 3s linear infinite;
}

.cta-livechat-open:checked + .cta-livechat-open-button .border-circle {
    border: 2.5px dashed white;
}


.cta-livechat-open:checked + .cta-livechat-open-button .text {
    display: none;
}

.cta-livechat-open:checked + .cta-livechat-open-button {
    background: red;
}



.cta-livechat-open:checked + .cta-livechat-open-button {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    background: white;
    
}

.cta-livechat-open:checked ~ .livechat-item {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}


/*=== Xuất hiện trước sau==== */
.cta-livechat-open:checked ~ .livechat-item:nth-child(3) {
   
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0px, -85px, 0);
    transform: translate3d(0px, -85px, 0);
    visibility: visible;
    opacity: 1;
}
.cta-livechat-open:checked ~ .livechat-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(-80px, -40px, 0);
    transform: translate3d(-80px, -40px, 0);
   visibility: visible;
    opacity: 1;
}
.cta-livechat-open:checked ~ .livechat-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(-80px, 40px, 0);
    transform: translate3d(-80px, 40px, 0);
    visibility: visible;
    opacity: 1;
   
}
.cta-livechat-open:checked ~ .livechat-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0px, 85px, 0);
    transform: translate3d(0px, 85px, 0);
     visibility: visible;
     opacity: 1;
}
.cta-livechat-open:checked ~ .livechat-item:nth-child(7) {
    visibility: visible;
    opacity: 1;
    transition: opacity 1.5s;
}


@media all and (max-width: 999px) {
    .cta-livechat-open-button {
        z-index: 2;
        -webkit-transform: scale(1.1, 1.1) translate3d(0px, 90px, 0px);
        transform: scale(1.1, 1.1) translate3d(0px, 90px, 0px);
        cursor: pointer;
    }
    
    .cta-livechat-open-button:hover {
        -webkit-transform: scale(0.9, 0.9) translate3d(0px, 90px, 0px);
        transform: scale(0.9, 0.9) translate3d(0px, 90px, 0px);
    }

    .cta-livechat-open:checked ~ .livechat-item:nth-child(7) {
        visibility: visible;
        opacity: 1;
        transition: opacity 1.5s;
    }
}


/*Call*/
.phonering-alo-phone.phonering-alo-static {
    opacity:.6
}

.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {
    opacity:1
}

.phonering-alo-ph-circle {
    width:160px;
    height:160px;
    bottom: 0px;
    left:0px;
    position:fixed;
    background-color:transparent;
    border-radius:100% !important;
    border:2px solid rgba(30,30,30,0.4);
    border:2px solid #bfebfc 9;
    opacity:.1;
    -webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    z-index: 99;
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
    border-color:#75eb50 ;
    border-color:#baf5a7;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color: #FFD34D;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
    border-color:#ccc;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
    border-color:#75eb50 ;
    opacity:.5
}

.phonering-alo-ph-circle-fill {
    z-index: 99;
    width:100px;
    height:100px;
    bottom: 30px;
    left:30px;
    position:fixed;
    background-color: #000;
    border-radius:100% !important;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    opacity:0!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
    background-color:#00aff2 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    background-color:#baf5a7 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
    background-color:rgb(255 239 43 / 50%);
    background-color:#ffef2b80 9
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(204,204,204,0.5);
    background-color:#ccc 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    opacity:.75!important
}

.phonering-alo-ph-img-circle {
    z-index: 99;
    width:60px;
    height:60px;
    bottom: 50px;
    left:50px;
    position:fixed;
    background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;
    border-radius:100% !important;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    z-index: 100;
}
    
    .phonering-alo-ph-img-circle-tel {
        bottom: 56px;
        left: 80px;
        position: fixed;
        background: #fffab1;
        padding: 3px 25px;
        border-radius: 50px;
        z-index: 99;
        border: 1px solid #ffd34d5c;
    }
    
    .phonering-alo-ph-img-circle-tel span {
        font-size: 25px;
        text-transform: uppercase;
        font-weight: 600;
        color: #0bafe8;
        padding-left: 20px;
        letter-spacing: 1px;
        font-family: roboto;
    }

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
    background-color:#00aff2
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
    background-color: #ffc000;
    background-color: #ffc000 9;
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color:#FFD34D;
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
    background-color:#ccc
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
    background-color:#75eb50
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
        -webkit-opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        -webkit-opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        -webkit-opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}

@keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}

@keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}

@media all and (max-width: 999px) {
    #phonering-alo-phoneIcon{
        display:none;
    }   
}
/* END Xuất hiện trước sau*/
/*======= END ENCTA BUTTON =======CSS*/










/*==========================
        Product Loop 
==========================CSS*/
#pro-img-loop{
    position: relative;
}

#pro-pvc-usage-tag{
    position: absolute;
    max-width: 45px;
    padding: 3px;
    top: 0;
    left: 0
}

#pro-loop-title {
    padding-top: 5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#pro-img-loop #img-back{
    z-index:1;
    position: absolute;
    top: 0;
    left: 0
}

#pro-img-loop #img-font{
    position: relative;
    top: 0;
    left: 0
}

#pro-img-loop #img-font:hover{
    opacity: 0;
    transition: 0.5s;
}



     




/*============================
    1.___ PRODUCT CATEGORY ___
============================CSS*/


/*====== Responsive Youtube  =========*/
/*Reponsive Youtube*/
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }/* End custom CSS */



/*ToolTip*/
[data-c-tooltip] {
  position: relative;
  cursor: pointer;
}
/* Base styles for the entire c-tooltip */
[data-c-tooltip]:before,
[data-c-tooltip]:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}
/* Show the entire c-tooltip on hover and focus */
[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* Base styles for the c-tooltip's directional arrow */
[data-c-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}
/* Base styles for the c-tooltip's content area */
[data-c-tooltip]:after {
  z-index: 1000;
    padding: 5px;
    width: 120px;
    background-color: #000;
    background-color: rgb(0 171 231);
    color: #fff;
    content: attr(data-c-tooltip);
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    border-radius: 2px;
}
/* Directions */
/* Top (default) */
[data-c-tooltip]:before,
[data-c-tooltip]:after {
  bottom: 100%;
  left: 50%;
}
[data-c-tooltip]:before{
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #00abe7;
}
/* Horizontally align top/bottom c-tooltips */
[data-c-tooltip]:after {
  margin-left: -60px;
}
[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after{
  -webkit-transform: translateY(-19px);
  -moz-transform: translateY(-19px);
  transform: translateY(-19px);
}

/*============================
    5_. BLOG & CATEGORY
============================CSS*/
#Blog-Title-2Post{align-content}

#noidungchinh{
	text-align: justify !important;
}

#table0fcontent .bdt-table-of-content-header{
	padding:10px !important;
	background:#0bafe8;
}

#table0fcontent .bdt-table-of-content{
	padding-bottom:30px;
}

#table0fcontent .bdt-table-of-content-header h4{
	margin-bottom:0px !important;
}

#table0fcontent ul li, #table0fcontent ul li ul li{
	padding-left: 20px;
}
#table0fcontent ul li ul li{
	padding-left: 40px;
}