/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.2
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.home .ux-not-home{display: none;}
.page-right-sidebar .col-divided{border-right: none;}
.tax-product_cat .term-description{display: none!important;}
.ux-col-about>.col-inner{box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);}
.ux-box-product-cate .box-category{background: #D2F2FD;}
.ux-box-product-cate .box-category h5{position: relative; min-height: 40px; font-size: 16px;}
.custom-ux-cat-desc{min-height: 75px;}
.ux-box-product-cate .box-text{padding: 0px 20px 20px!important;}
.ux-link-product-cate{color: #CC0001; font-size: 14px; position: relative; padding-left: 30px;}
.ux-link-product-cate::before{content: ""; display: block; position: absolute; width: 25px; height: 10px; background: #CC0001; top: 5px; left: 0px;}
.ux-why-box-col{flex-basis: 22%; max-width: 22%;}
.ux-why-box-col .col-inner{box-shadow: 1px 1px 15px #f2f2f2; border-radius: 25px; overflow: hidden; padding: 25px 20px 10px; background: #fff;}
.ux-why-box-col h4{color: #CC0001; font-weight: bold; padding: 10px 0px 20px 0px; font-size: 20px; position: relative;}
.ux-why-box-col h4::after{content: ""; width: 30px; height: 6px; background: #CC0001; position: absolute; bottom: 10px; left: 0px;}
.ux-s-why{margin-top: 45px; padding-top: 75px!important;}
/*
* SINGLE PRODUCT
*/
.product-short-description{border: 1px solid #0343A7; border-radius: 10px; padding: 15px 20px 0px 20px; margin-bottom: 25px; font-size: 14px; position: relative; margin-top: 30px;}
.product-short-description::before{content: "Thông tin sản phẩm"; position: absolute; top: -13px; left: 15px; background: #0343A7; color: #fff; border-radius:12px; padding: 0px 15px;}
.product-short-description ul{margin-bottom: 10px;}
.product-short-description ul li{margin-bottom: 5px;}
.ux-after-buy {border: 1px solid #CC0001; border-radius: 10px; padding: 10px 20px 0px 20px;}
.ux-after-buy span{color: #CC0001;}
.ux-after-buy p{margin-bottom: 10px!important;}
.single-product .price-wrapper{display: none;}
/*
* FOOTER
*/
.ux-footer{padding-top: 75px!important;}
.absolute-footer{padding: 5px!important;}
.footer-primary{padding-top: 15px;}
.ux-footer a{color: #ffdda3;}
/*
* PRODUCT
*/
.col-inner .product-small {box-shadow: 5px 5px 10px #ccc; border-radius: 5px; overflow: hidden; padding: 15px 15px 0px;}
.col-inner .product-small .box-text{padding: 20px 0px;}
.col-inner .product-small .box-text .category{color: #fff; background: #0343A7; padding: 5px 12px 3px; border-radius: 13px; float: left; margin-bottom: 10px; font-size: 10px; text-transform: math-auto;}
.col-inner .product-small .box-text .category::after{content: ""; clear: both;}
.col-inner .product-small .box-text .product-title a{font-size: 18px; line-height: 24px; min-height: 75px;}
.col-inner .product-small .box-text .price-wrapper{text-align: center; border: 1px solid #ffdda3; padding: 5px; border-radius: 3px; margin-top: 15px;  color: #CC0001;}
/*
* CONTACT FORM
*/
.ux-contact-f7{box-shadow: 5px 5px 30px #ccc; padding: 30px; border-radius: 10px;}
.ux-contact-f7 h2{color: #CC0001; text-align: center;}
.ux-contact-f7 input[type=submit]{width: 100%; border-radius: 5px; height: 60px;}
.ux-contact-f7 input[type=text], .ux-contact-f7 select, .ux-contact-f7 input[type="tel"]{box-shadow: none; background: #f2f2f2; border-radius: 5px; border: none; min-height: 45px;}
.ux-contact-f7 textarea{box-shadow: none; background: #f2f2f2; border-radius: 5px; border: none; min-height: 90px;}
/* ICON CONTACT*/
#button-contact-vr {
    position: fixed;
    bottom: 150px;
    right: 0;
    z-index: 99999
}

#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px
}

#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block
}

.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #0080f7;
    background-color: rgba(0,128,247,0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite
}

.phone-vr-img-circle {
    background-color: #0080f7;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out
}

.phone-vr-img-circle a {
    display: block;
    line-height: 37px
}

.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%)
}

#zalo-vr .phone-vr-circle-fill {
    background: rgb(17,143,253);
    background-size: contain;
    box-shadow: 0 0 0 0 #2c9fd8;
    background-color: rgb(79 103 254);
    border: 0
}

#zalo-vr .phone-vr-img-circle {
    background: transparent
}

#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2c9fd8;
    background-color: rgb(44 159 216 / 74%)
}

#zalo-vr .phone-vr-img-circle {
    background: #2c9fd8
}
/* shopee */
#shopee-vr .phone-vr-circle-fill {
    background: #ea501f;
    background-size: contain;
    box-shadow: 0 0 0 0 #ea501f;
    background-color: #ea501f;
    border: 0
}

#shopee-vr .phone-vr-img-circle {
    background: transparent
}

#shopee-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #ea501f;
    background-color: rgb(234 80 31 / 74%)
}

#shopee-vr .phone-vr-img-circle {
    background: #ea501f
}
@-webkit-keyframes phone-vr-circle-fill {
    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 zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.ux-why-box-col{flex-basis: 100%;max-width: 100%;}
.ux-why-box-col .box-image{display: none;}

}