/*
Theme Name: Vườn Nắng
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* =========================================================
   REVIEW AUTO RUN + AVATAR
   ========================================================= */

.vcx-review-section{
    position:relative;
    overflow:hidden;
    background:#fff !important;
}

.vcx-review-section .row{
    max-width:1180px;
}

.vcx-review-section .section-title{
    border:0 !important;
}

.vcx-review-section .section-title-main{
    position:relative;
    border:0 !important;
    padding-bottom:14px !important;
    color:#1f5c38 !important;
    font-weight:700;
}

.vcx-review-section .section-title-main:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:60px;
    height:3px;
    transform:translateX(-50%);
    background:#2f8a4b;
    border-radius:10px;
}

/* vùng chạy */
.vcx-review-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:8px 0 20px;
}

/* fade 2 bên */
.vcx-review-marquee:before,
.vcx-review-marquee:after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:70px;
    z-index:3;
    pointer-events:none;
}

.vcx-review-marquee:before{
    left:0;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%);
}

.vcx-review-marquee:after{
    right:0;
    background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%);
}

/* track auto chạy */
.vcx-review-track{
    display:flex;
    align-items:stretch;
    gap:20px;

    width:max-content;

    animation:vcxReviewAuto 34s linear infinite;
    will-change:transform;
}

/* auto chạy liên tục */
@keyframes vcxReviewAuto{
    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

/* hover thì vẫn tiếp tục chạy */
.vcx-review-marquee:hover .vcx-review-track{
    animation-play-state:running;
}

/* card */
.vcx-review-card{
    flex:0 0 340px;

    display:flex;
    flex-direction:column;

    min-height:230px;

    padding:24px;

    background:#fff;

    border:1px solid #dfe9e2;
    border-radius:16px;

    box-shadow:
        0 5px 14px rgba(31,92,56,.035),
        0 12px 28px rgba(31,92,56,.055);
}

/* stars */
.vcx-review-stars{
    margin-bottom:13px;

    color:#f0b400;

    font-size:16px;
    letter-spacing:2px;
}

/* text */
.vcx-review-text{
    flex:1;

    margin:0 0 20px !important;

    color:#56635b !important;

    font-size:14px;
    line-height:1.75;

    font-style:italic;
}

/* user */
.vcx-review-user{
    display:flex;
    align-items:center;
    gap:12px;
}

/* avatar wrapper */
.vcx-review-avatar-img{
    flex:0 0 48px;

    width:48px;
    height:48px;

    overflow:hidden;

    border-radius:50%;

    border:2px solid #e0ede4;

    background:#eef6f0;
}

/* Flatsome image wrapper */
.vcx-review-avatar-img .img{
    width:48px !important;
    height:48px !important;

    margin:0 !important;
}

.vcx-review-avatar-img .img-inner{
    width:48px !important;
    height:48px !important;

    overflow:hidden;

    border-radius:50%;
}

.vcx-review-avatar-img img{
    display:block;

    width:48px !important;
    height:48px !important;

    object-fit:cover;
    object-position:center;

    border-radius:50%;
}

/* name */
.vcx-review-user strong{
    display:block;

    margin-bottom:2px;

    color:#1f5c38;

    font-size:14px;
    font-weight:700;
}

/* subtitle */
.vcx-review-user span{
    display:block;

    color:#829087;

    font-size:12px;
    line-height:1.4;
}

/* TABLET */
@media(max-width:849px){

    .vcx-review-card{
        flex-basis:310px;
    }

    .vcx-review-track{
        gap:16px;
        animation-duration:30s;
    }

    .vcx-review-marquee:before,
    .vcx-review-marquee:after{
        width:40px;
    }
}

/* MOBILE */
@media(max-width:549px){

    .vcx-review-section{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }

    .vcx-review-card{
        flex-basis:280px;
        min-height:215px;

        padding:20px;
    }

    .vcx-review-track{
        gap:14px;
        animation-duration:26s;
    }

    .vcx-review-text{
        font-size:13.5px;
        line-height:1.7;
    }

    .vcx-review-avatar-img,
    .vcx-review-avatar-img .img,
    .vcx-review-avatar-img .img-inner,
    .vcx-review-avatar-img img{
        width:44px !important;
        height:44px !important;
    }

    .vcx-review-avatar-img{
        flex-basis:44px;
    }

    .vcx-review-marquee:before,
    .vcx-review-marquee:after{
        width:22px;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* Hero trang Giới thiệu */
#section_1817820160{
    position:relative !important;
    overflow:hidden !important;
    padding:105px 24px 95px !important;
    background:linear-gradient(120deg,#0d4c30 0%,#176b43 58%,#2c8b5c 100%) !important;
}
#section_1817820160:before{
    content:'VỀ VUA CÂY XANH';
    display:block;
    margin:0 auto 18px;
    color:#d9f7e5;
    font-size:13px;
    font-weight:900;
    letter-spacing:.18em;
    text-align:center;
}
#section_1817820160:after{
    content:'';
    position:absolute;
    width:360px;
    height:360px;
    right:-120px;
    top:-150px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.03);
    pointer-events:none;
}
#section_1817820160 .section-content{position:relative;z-index:1;}
#section_1817820160 .section-title-main{
    color:#fff !important;
    font-size:clamp(32px,4.5vw,60px) !important;
    line-height:1.08 !important;
    letter-spacing:-.04em !important;
    text-shadow:0 3px 18px rgba(0,0,0,.18);
}
#section_1817820160 .section-title b{background:rgba(217,247,229,.65) !important;}
#section_1817820160 p{
    max-width:820px !important;
    color:rgba(255,255,255,.88) !important;
    font-size:18px !important;
    line-height:1.8 !important;
}
#section_1817820160 p strong{color:#fff !important;}
@media(max-width:549px){
    #section_1817820160{padding:72px 18px 65px !important;}
    #section_1817820160 .section-title-main{font-size:31px !important;}
    #section_1817820160 p{font-size:16px !important;line-height:1.7 !important;}
}


/* Hero Giới thiệu - dùng class ổn định của UX Builder */
.vcx-intro{position:relative !important;overflow:hidden !important;padding:105px 24px 95px !important;background:linear-gradient(120deg,#0d4c30,#176b43 58%,#2c8b5c) !important;}
.vcx-intro:before{content:'VỀ VUA CÂY XANH';display:block;margin:0 auto 18px;color:#d9f7e5;font-size:13px;font-weight:900;letter-spacing:.18em;text-align:center;}
.vcx-intro .section-content{position:relative;z-index:1;}
.vcx-intro .section-title-main{color:#fff !important;font-size:clamp(32px,4.5vw,60px) !important;line-height:1.08 !important;letter-spacing:-.04em !important;text-shadow:0 3px 18px rgba(0,0,0,.18);}
.vcx-intro .section-title b{background:rgba(217,247,229,.65) !important;}
.vcx-intro p{max-width:820px !important;color:rgba(255,255,255,.9) !important;font-size:18px !important;line-height:1.8 !important;}
.vcx-intro p strong{color:#fff !important;}
@media(max-width:549px){.vcx-intro{padding:72px 18px 65px !important;}.vcx-intro .section-title-main{font-size:31px !important;}.vcx-intro p{font-size:16px !important;}}


/* Hero Giới thiệu - bắt đúng section hiện tại */
#section_973648000{position:relative!important;overflow:hidden!important;padding:105px 24px 95px!important;background:linear-gradient(120deg,#0d4c30,#176b43 58%,#2c8b5c)!important;}
#section_973648000:before{content:'VỀ VUA CÂY XANH';display:block;margin:0 auto 18px;color:#d9f7e5;font-size:13px;font-weight:900;letter-spacing:.18em;text-align:center;}
#section_973648000 .section-title-main{color:#fff!important;font-size:clamp(32px,4.5vw,60px)!important;line-height:1.08!important;text-shadow:0 3px 18px rgba(0,0,0,.18);}
#section_973648000 p{max-width:820px!important;color:rgba(255,255,255,.9)!important;font-size:18px!important;line-height:1.8!important;}
#section_973648000 p strong{color:#fff!important;}
@media(max-width:549px){#section_973648000{padding:72px 18px 65px!important;}#section_973648000 .section-title-main{font-size:31px!important;}#section_973648000 p{font-size:16px!important;}}


/* Hero Giới thiệu - selector ổn định theo vị trí */
#main>.section:first-child{position:relative!important;overflow:hidden!important;padding:105px 24px 95px!important;background:linear-gradient(120deg,#0d4c30,#176b43 58%,#2c8b5c)!important;}
#main>.section:first-child:before{content:'VỀ VUA CÂY XANH';display:block;margin:0 auto 18px;color:#d9f7e5;font-size:13px;font-weight:900;letter-spacing:.18em;text-align:center;}
#main>.section:first-child .section-title-main{color:#fff!important;font-size:clamp(32px,4.5vw,60px)!important;line-height:1.08!important;text-shadow:0 3px 18px rgba(0,0,0,.18);}
#main>.section:first-child p{max-width:820px!important;color:rgba(255,255,255,.9)!important;font-size:18px!important;line-height:1.8!important;}
#main>.section:first-child p strong{color:#fff!important;}
@media(max-width:549px){#main>.section:first-child{padding:72px 18px 65px!important;}#main>.section:first-child .section-title-main{font-size:31px!important;}#main>.section:first-child p{font-size:16px!important;}}