/*

Theme Name: Flatsome Child

Description: This is a child theme for Flatsome Theme

Author: UX Themes

Template: flatsome

Version: 3.0

*/



/*************** ADD CUSTOM CSS HERE.   ***************/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



:root{

	--cl-y: #8DC24F;

	--fs-title: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);

}



body{

    font-family: "Raleway", sans-serif;

}



p:last-of-type{

    margin-bottom: 0;

}



.row-inner-full > .col > .col-inner{

	height: 100%;

}



.row-slider .flickity-slider > .col{

	padding-bottom: 0 !important;

}



.button.is-outline{

    border-width: 1px;

    line-height: 2.5em;

}



.button span{

    line-height: normal;

}



.button.secondary{

    color: #0e3a2f;

}



.svg-clip-path {

    width: 0;

    height: 0;

    position: absolute;

    top: 0;

    left: 0;

    pointer-events: none;

    opacity: 0;

}



.rounded-6{

    border-radius: 6px;

    overflow: hidden;

}



.justify-content-between{

        justify-content: space-between;

    }



.wpcf7-form{

    margin-bottom: 0;

}



.wpcf7 .wpcf7-spinner{

    display: none;

}



.wpcf7 .wpcf7-not-valid-tip{

    position: absolute;

    margin-top: -1rem;

    font-size: 0.75rem;

    z-index: 1;

}



.social-icons a{

    width: 2rem;

    height: 2rem;

    min-width: unset !important;

    min-height: unset;

    display: inline-flex !important;

    justify-content: center;

    align-items: center;

    margin: 0;

    border: 1px solid #fff !important;

    padding: 0 !important;

    line-height: normal;

    font-size: 14px;

}



.social-icons a i{

    top: unset;

}



.social-icons a.is-outline{

    color: #fff;



}





.header-nav.header-nav-main .menu-item a{

    text-transform: uppercase;

}





.header-search-lightbox{

    .button{

        padding: 0.5rem;

        background-color: rgba(254, 105, 26, 20%);

        color: #000 !important;

    }

}



#search-lightbox{

    font-size: 1rem;

}



.searchform-wrapper .flex-col{

    padding: 0 !important;

}



.searchform-wrapper.form-flat .flex-col:last-of-type{

    margin-left: -2.5rem;

}



.searchform-wrapper input[type=search]{

    height: unset;

    padding: 0.5rem 1rem;

}



.searchform-wrapper button[type="submit"]{

    margin: 0;

    padding: 0;

}





/*===*/

.banner-page{

    height: 25rem;

    background-color: transparent;

}



.banner-page .bg-fill{

    background-position: center bottom;

}



.banner-page .title-banner-page{

    margin: 0;

    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);

    font-weight: 700;

    line-height: normal;

}



.rank-math-breadcrumb p{

    margin-top: 0.25rem;

}





/**/

.main-title h2{

    margin-bottom: 1.5rem;

    font-size: var(--fs-title);

}



.box-main-title h3{

    margin-bottom: 0;

}



.box-main-title h2{

    margin-bottom: 0.325rem;

    font-weight: 500;

    font-size: var(--fs-title);

}



/*===*/

.icon-box-commit h3{

    margin-bottom: 0;

}





/*===*/

.box-product-home .box-image img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.box-product-home .box-text{

    padding: 0;

}



.box-product-home .box-text .title{

    padding: 0.5rem;

    text-align: center;

    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);

    color: var(--primary-color);

}



.box-product-home .box-price{

    display: flex;

}



.box-product-home .box-price .price{

    flex: 1;

    padding: 0.75rem;

    background-color: var(--primary-color);

    text-align: center;

    font-size: 1rem;

    font-weight: 600;

    color: #78faae;

}



.box-product-home .box-price .price.label-1{

    background-color: #0e3a2f;

}





.table-price table{

    margin-bottom: 0;

}



.table-price table td{

    padding: 0.5rem;

    border: 1px solid rgba(0, 0, 0, 0.3);

}



.item-list-price .is-divider{

    background-color: transparent !important;

    border-top: 1px dashed rgba(0, 0, 0, 0.3);

}









/*===*/

.blog-wrapper.blog-archive{

    padding-top: 50px;

}







/*=== Footer*/

.row-footer:after{

    content: none;

}



.col-footer h3{

    margin-bottom: 1.5rem;

    padding-bottom: 0.5rem;

    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);

    border-bottom: 1px solid var(--primary-color);

}



.col-footer p{

    margin-bottom: 0.75rem;

}



.list-label-user ul li{

    display: inline-block;

    padding: 0.25rem 1rem;

    background-color: var(--primary-color);

    border-radius: 50rem;

}



.list-info-footer ul{

    margin-bottom: 0;

}



.list-info-footer ul li{

    display: flex;

    align-items: baseline;

    gap: 0.5rem;

    margin-left: 0;

}





.col-footer .ux-menu .ux-menu-link + .ux-menu-link{

    margin-top: 0.5rem !important;

}



.col-footer .ux-menu .ux-menu-link__link{

    flex: unset;

    min-height: unset;

    padding: 0;

    transition: all .3s ease-in-out;

}



.col-footer .ux-menu .ux-menu-link__link:hover{

    transform: translateX(0.5rem);

    color: var(--cl-y) !important;

}



.social-icons.social-footer{

    display: flex;

    justify-content: center;

    gap: 0.25rem;

}



.social-icons.social-footer a{

    margin: 0;

    padding: 0.25rem;

    height: unset;

    min-width: unset;

    min-height: unset;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 0;

    color: var(--cl-y);

    font-size: 1rem;

}



.social-footer a i{

    top: 0;

    line-height: normal;

    font-size: 1rem;

}



.icon-envelop:before{

    content: "\f0e0";

    font-family: "Font Awesome 6 Pro";

}



.absolute-footer{

    display: none;

}



.menu-footer-bottom{

    flex-direction: row;

    gap: 1.5rem;

}



.menu-footer-bottom .ux-menu-link__link{

    min-height: unset;

    padding: 0;

}



.menu-footer-bottom .ux-menu-link__link:hover{

    color: var(--cl-y) !important;

}





.back-to-top{

    width: 2.75rem;

    height: 2.75rem;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.25rem;

    font-weight: 700;

}





/*==== Page Contact*/

.icon-box-contact{

    display: flex;

    align-items: center;

}



.icon-box-contact img{

    padding-top: 0;

}



.title-contact + .divider{

    background-image: repeating-linear-gradient(-45deg, #0a6850 0, #0a6850 1px, transparent 0, transparent 50%);

    background-size: 8px 8px;

    background-color: #ffffff;

}



.box-map{

    height: 100%;

}



.box-map iframe{

    width: 100%;

    height: 100%;

}



.form-contact .form-control{

    height: unset;

    background-color: #FFFFFF;

    padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem) 1rem;

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 0.5rem;

    box-shadow: none !important;

    color: #000;

}



.form-contact .form-control::placeholder{

    color: rgba(0, 0, 0, 0.5);

}



.form-contact textarea.form-control{

    height: 6rem;

}



.form-contact input[type=submit]{

}











.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button{

    margin-top: 0;

}





/*===*/

.box.box-blog-post .is-divider{

    display: none;

}



.box.box-overlay .box-text{

    background-image: linear-gradient(180deg, #3E3E3E00 0%, #000000 100%);

}



.box.box-blog-post .from_the_blog_excerpt{

    line-height: normal;

}





/*=== Trang Thủ tục*/

.icon-box-procedure{

    height: 100%;

    padding: 2rem;

    border-radius: 1rem;

    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);

    transition: all .3s ease-in-out;

}



.icon-box-procedure .icon-box-text h3{

    margin-bottom: 2rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px dashed var(--primary-color);

}



.icon-box-procedure:hover{

    transform: translateY(-0.5rem);

}





/*===*/
.product-small.box .box-image img{
    height: 100%;
    object-fit: contain;
}

.product-small.box .box-text{
    padding: 0.75rem 0 0;    
}


.product-small.box .product-title{

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--primary-color);

}



.product-small.box .product-title a{

    color: inherit;

}





/*===*/

.product-main{

    padding-bottom: 20px;

}



.product-custom-price{

    margin-top: 1rem;

    margin-bottom: 1rem;

    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);

    font-weight: 600;

    text-align: center;

}



.product-custom-price span.amount{

    color: #e3342f;

}



.list-variable-product table th,

.list-variable-product table td{

    padding: 0.75rem 1rem;

    border: 1px solid rgba(0, 0, 0, 0.1);



}



.list-variable-product table th{

    background-color: var(--primary-color);

    color: #fff;

}



.woocommerce-product-gallery__image{

    height: clamp(18.75rem, 17.5rem + 6.25vw, 25rem);

}



.woocommerce-product-gallery__image img,

.product-thumbnails img{

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.product-thumbnails .col a{

    display: block;

    height: clamp(5rem, 4.5rem + 2.5vw, 7.5rem);

}



.product-info .product-info-inner{

    padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);

    border: 2px dashed var(--primary-color);

    border-radius: 0.75rem;

}



.product-info .woocommerce-breadcrumb{

    display: none;

}





.wrapper-button-product-contact{

    display: flex;

}



.wrapper-button-product-contact .button{

    margin-bottom: 0;

    padding: 0.25rem 1rem;

}



.wrapper-button-product-contact .button-zalo i:before{

    content: "";

    display: block;

    width: 1.5rem;

    height: 1.5rem;

    background-image: url('/wp-content/uploads/2025/10/zalo.png');

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

}





.product-section{

    border-top: 0;

}



.product-section:not(.related-products-wrapper) .row .col{

    flex-basis: 100%;

    max-width: 100%;

}



.product-section .row .col.large-2 h5{

    display: inline-block;

    width: auto;

    margin-top: 0;

    margin-bottom: 0;

    padding: 0.75rem;

    background-color: var(--primary-color);

    color: #fff;

    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

}



.product-section .entry-content{

    border-top: 2px solid #e3342f;

}







/*button contact*/

.button-contact-fixed{

    position: fixed;

    bottom: 8%;

    right: 0.25rem;

    z-index: 30;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.25rem;

}



.box-ring {

    width: clamp(4rem, 3.8rem + 1vw, 5rem);

    height: clamp(4rem, 3.8rem + 1vw, 5rem);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: visibility .5s;

    position: relative;

}



.box-ring-outline {

    position: absolute;

    width: clamp(4rem, 3.8rem + 1vw, 5rem);

    height: clamp(4rem, 3.8rem + 1vw, 5rem);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    transform-origin: 0 0;

    border: 2px solid rgba(30, 30, 30, 0.5);

    background-color: transparent;

    border-radius: 50%;

    opacity: .5;

    transition: all .5s;

    animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;

}



.box-ring-inline {

    position: absolute;

    left: 50%;

    top: 50%;

    width: clamp(3rem, 2.8rem + 1vw, 4rem);

    height: clamp(3rem, 2.8rem + 1vw, 4rem);

    transform: translate(-50%, -50%);

    transform-origin: 0 0;

    border: 2px solid transparent;

    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.5);

    transition: all .5s;

    animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;

}



.box-ring-image{

    width: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);

    height: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);

    padding: 6px;

    border: 2px solid transparent;

    border-radius: 50%;

    background-color: #000;

    opacity: 1;

    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

}



.box-ring-image img{

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.box-ring-label{

	position: absolute;

	right: 2rem;

	height: 2.25rem;

	z-index: -1;

	padding: 0.25rem 3rem 0.25rem 1rem;

	border-radius: 50rem;

	white-space: nowrap;

	color: #fff;

	display: flex;

	align-items: center;

}



@keyframes coccoc-alo-circle-anim {

    0% {

        transform: rotate(0) scale(.5) skew(1deg) translate(-50%, -50%);

        opacity: .1

    }

    30% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

        opacity: .5

    }

    100% {

        transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);

        opacity: .1

    }

}



@keyframes coccoc-alo-circle-fill-anim {

    0% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

    }

    50% {

        transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);

    }

    100% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

    }

}



@keyframes coccoc-alo-circle-img-anim {

    0% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        transform: rotate(0) scale(1) skew(1deg)

    }

}