:root{
    /* độ “tràn” rộng hơn so với section và độ cong, auto theo viewport */
    --bleed: clamp(40px, 10vw, 200px);   /* bù 2 bên (tương tự +10%) */
    --rise:  clamp(80px, 16vw, 100px);   /* độ lồi của đường cong */
    --hero-h: 120vh; /* đổi thành 140vh khi cần, hoặc đặt theo breakpoint */
}
body {
   /* max-width: 1920px;*/
    font-family: Tahoma;
}
.overflow-h{overflow: hidden;}
.container, body {
    margin-right: auto;
    margin-left: auto;
}
a{
    text-decoration: none;
}
a:hover{text-decoration: none;}
.container-full {
    padding: 0 55px;
    width: 100%;
    max-width: 100%;
}
ul li{list-style: none;}
.home .main-container{padding-top:100px;}
.menu-content-header{display: flex;justify-content: space-between;align-items: center;}
@media (max-width: 991px) {
    .menu-content-header{justify-content: center;}
}
@media (max-width: 576px) {
    .menu-content-header{justify-content: space-between;}
}
header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    z-index: 99;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    background-color: #fff;
    width: 100%;
    height: 100px;
}
header .menu-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    position: relative;
    flex: 1;
    justify-content: flex-end;
    z-index: 2;
    display: flex;
    align-items: center;

}
@media (max-width: 991px) {
    header .menu-right {
        flex: unset;

    }
    header .harmburger-menu {

        top: 24px;

    }
}
#main-menu .navbar-nav > li:hover .dropdown-menu {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    visibility: visible;
    display: block;
}
#main-menu .dropdown-menu {
    min-width: 250px;
    border: none;
    left: auto;
    padding: 0;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
    -webkit-transform: translate(0,40px);
    -moz-transform: translate(0,40px);
    -o-transform: translate(0,40px);
    -ms-transform: translate(0,40px);
    transform: translate(0,40px);

    opacity: 0;
    background: #eeeeee;
    border-radius: 0px;
    color: #fff;
}
#main-menu .dropdown-menu li{

}
#main-menu .dropdown-menu a{
    color:#585858;
    text-decoration: none;
    padding: 15px 10px;
    display: block;
}
#main-menu .dropdown-menu a:hover{
    color:#fff;
    background: #3b6d6a;
}
#main-menu .navbar-nav .nav-link {
    color: #656565;

}
#main-menu .nav-item{
    position: relative;
    padding: 10px 45px;
}

#main-menu>ul>li>a {
    -webkit-transition: color .4s cubic-bezier(.58,.3,.005,1);
    -o-transition: color .4s cubic-bezier(.58,.3,.005,1);
    position: relative;
    transition: color .4s cubic-bezier(.58,.3,.005,1);
    color: #333;
    font-size: 1rem;
    font-weight: 500;
}

.dropdown-menu{
    top: 88%;
}
.content-lang{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content-lang a{line-height: 12px;}
.banner-home .swiper img {
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-home .swiper-slide {
    height: auto;
}
.banner-home .img, .banner-home .img a, .banner-home .swiper-slide .box-banner {
    width: 100%;
    height: 100%;
}
/****** mobile menu ****/
header .harmburger-menu {
    display: none;
    cursor: pointer;
    padding: 5px 7px;
    position: absolute;
    border-radius: 5px;
    background: #006850;
    top: 11px;
    left: 6px;
}
header .harmburger-menu__item {
    width: 20px;
    height: 2px;
    background-color: #ffffff;
    margin: 4px 0;
    transition: all 0.4s;
    position: relative;
}
header  .harmburger-menu__item:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: all 0.4s;
}
header  .harmburger-menu.active .harmburger-menu__item:first-child, header  .harmburger-menu.active .harmburger-menu__item:last-child {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=${opperc})";
    filter: "alpha(opacity=${opperc})";
}
header  .harmburger-menu.active .harmburger-menu__item:nth-child(2)::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}
header  .harmburger-menu.active .harmburger-menu__item:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

header .header-container {
    position: relative;
}
header  .header-nav-container {
    border-top: 1px solid transparent;
    border-bottom: 1px #cec49e solid;
    position: relative;
    z-index: 100;
}
header .header-nav{
    background: #fff;
}
header .header-nav-container{display: none;}

@media (max-width: 1199px) {
    header .header-container .header-nav-container .header-nav-inner .header-nav ul.nav .nav-item .nav-link {
        font-size: 14px;
    }
}
.icon-search:before {
    content: '\f002';
    font-family: 'Font Awesome 6 Pro';
}
header .header-container .header-nav-container .header-nav-inner .header-nav .nav-search-form .nav-search-container .input-search {
    height: 100%;
    width: 100%;
    padding: 0 40px 1px 54px;
    border: 1px solid #9395a3;
    border-radius: 3px;
    height: 40px;
    line-height: 1.42857143;
    box-shadow: none;
    transition: all 0.2s ease-in-out 0s;
}
header .header-container .header-nav-container .header-nav-inner .header-nav .nav-search-form .nav-search-container .k-btn.btn-search:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    height: 20px;
    margin-top: -10px;
    width: 1px;
    background: #999;
}
header .header-container .header-nav-container .header-nav-inner .header-nav .nav-search-form .nav-search-container .k-btn {
    position: absolute;
    height: 40px;
    width: 40px;
    text-align: center;
    border: none;
    outline: none !important;
    background-color: transparent;
    top: 0;
    color: #999;
}
header .header-container .header-nav-container .header-nav-inner .header-nav .nav-search-form .nav-search-container .k-btn.btn-search {
    left: 0;
    width: 45px;
}
header .header-container .header-nav-container .header-nav-inner .header-nav .nav-search-form .nav-search-container {
    position: relative;
    margin-bottom: 10px;
}
header .header-container .header-nav-container .header-nav-inner .header-nav ul.nav .nav-item .dropdown-content .dropdown-item a {
    width: 100%;
    padding: 2px 0px;
    float: left;
    color: #666;
    text-transform: capitalize;
    white-space: nowrap;
    transition: all 0.2s ease-in-out 0s;
    display: block;

}
header .header-container .header-nav-container .header-nav-inner .header-nav ul.nav .nav-item .dropdown-content .dropdown-item:before {
    content: '';
    background: radial-gradient(circle, #c9c9c9, #fff);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
}

header .header-container .header-nav-container .header-nav-inner .header-nav ul.nav .nav-item .dropdown-content .dropdown-item {
    position: relative;
    list-style: none;
    float: left;
    width: 100%;
    display: block;
    margin-left: 10px;
}

header .menu-right .navbar-nav>li>a {
    -webkit-transition: color .4s cubic-bezier(.58,.3,.005,1);
    -o-transition: color .4s cubic-bezier(.58,.3,.005,1);
    position: relative;
    transition: color .4s cubic-bezier(.58,.3,.005,1);
    color: #333;
    font-size: 1rem;
    font-weight: 500;
}
header .menu-right  .navbar-nav>li>a:hover:after {
    transform: scale3d(1,1,1);
    transition: transform .4s cubic-bezier(.58,.3,.005,1);
    transform-origin: 0 50%;
}
header .menu-right  .navbar-nav>li>a:after {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    position: absolute;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    background-color: #3e6d6a;
    width: 100%;
    height: 2px;
    content: "";
}

header .menu-right .navbar-nav>li.active>a:after {
    -webkit-transform: scaleX(1);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.58,.3,.005,1);
    -o-transition: transform .4s cubic-bezier(.58,.3,.005,1);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: -webkit-transform .4s cubic-bezier(.58,.3,.005,1);
    transition: transform .4s cubic-bezier(.58,.3,.005,1);
    transition: transform .4s cubic-bezier(.58,.3,.005,1),-webkit-transform .4s cubic-bezier(.58,.3,.005,1);
}
/**************/
.title-home-page{
    padding: 30px 0;
    text-align: center;
}
.title-home-page span{
    font-weight: bold;
    font-size: 20px;
    color:#ffb900;
    padding-bottom: 5px;
    border-bottom: 1px solid #3c6c60;
    text-transform: uppercase;
}
.product-hot{
    padding: 20px 0;
}
.text-product-hot{
    text-align: center;
    padding:15px 0;
}
.text-product-hot a{
    text-decoration: none;
    color: #3c6d6a;
    font-weight: bold;
}
.slogan{
    margin:20px 0;
    color:#fff;
    text-align: center;
    background: #3c6d6a;
}
.content-slogan{
    padding:60px 140px;
}
.content-slogan .title-slogan{
    margin-bottom: 20px;
    font-size: 40px;
}
.content-slogan .content-slogan-text{
    font-size: 20px;
    text-align: left;
    line-height: 35px;
}
.partner {
    padding:20px 0;
}
.content-partner{
    padding:80px 0px;
}
/*** footer ***/
footer {
    background-color: #fef4ed;
    padding: 3.25rem 0;
}
.copyright-text{background: #fef4ed;border-top: 1px solid #dfdfdf;}
footer .box-footer {

    padding-top: 10px;
    height: 100%;
}
footer .title-footer {
    margin-bottom: 0.625rem;
    color: #111;
    font-weight: 700;
}
footer .list-footer {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
footer .list-footer li a {
    -webkit-transition: color .4s cubic-bezier(.58,.3,.005,1);
    -o-transition: color .4s cubic-bezier(.58,.3,.005,1);
    position: relative;
    transition: color .4s cubic-bezier(.58,.3,.005,1);
    font-size: .875rem;
    text-decoration: none;
    color: inherit;
    text-decoration: none;
}
footer .list-footer li a:hover:after {
    -webkit-transform: scaleX(1);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.58,.3,.005,1);
    -o-transition: transform .4s cubic-bezier(.58,.3,.005,1);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: -webkit-transform .4s cubic-bezier(.58,.3,.005,1);
    transition: transform .4s cubic-bezier(.58,.3,.005,1);
    transition: transform .4s cubic-bezier(.58,.3,.005,1),-webkit-transform .4s cubic-bezier(.58,.3,.005,1);
}
footer .list-footer li a:after {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    position: absolute;
    bottom: -4px;
    left: 0;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    background-color: #3c6d6a;
    width: 100%;
    height: 2px;
    content: "";
}
.footer-copy-right {
    border-top: 1px solid #3b6d6a;
    background-color: #fff;
    height: 62px;
    font-size: .875rem;
}
footer .list-footer li{padding:5px 0px;}

footer .list-social li a {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    justify-content: center;
    transition: all .3s ease-in-out;
    border-radius: 50%;
    background-color: #3b6d6a;
    width: 38px;
    height: 38px;
}
footer .list-social {
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
footer .list-social li{
    list-style: none;
}
footer .list-social, footer .list-social li a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}
footer .subscribefrm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
footer .subscribefrm button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    outline: none;
    border: 0;
    border-radius: 10px;
    background-color: #3b6d6a;
    padding-left: 15px;
    width: 90px;
    height: 40px;
    font-size: 0;
}

footer .subscribefrm input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    flex: 1;
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    padding-left: 20px;
    width: 100%;
    height: 40px;
    color: #999;
    font-size: .875rem;
}

footer .subscribefrm button:before {
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    content: "Gửi";
}
body.en-us footer .subscribefrm button:before {
    content: "Send";
}
footer .subscribefrm button:after {
    display: inline-block;
    margin-left: 1.125rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAAAwklEQVQ4T7WUSwoCMRBEX4EH0Au40Ou6kBnwcwU9ia48hngEXbQ0GIwaJ5MxNmQTyGuqutIyswPQADtJNyqUzMwenDOwAdaSLr+wY2jgXIE9sJB0GgJPQWPOcYg1OWhoUGRNX2iRNaXQ2BpPTZtKjUPHwByYJc4UGGWG9WGNuh6YmQMdnGrod5Po/TM1f4Aua8nfAqvwaX4Z1NcMl0KDb40khyarL9Qn/CKxaxY5aLVvGiS2kjzgxfW++npLzMmvvqTvUqF6cexugUoAAAAASUVORK5CYII=);
    width: 21px;
    height: 18px;
    content: "";
}
footer .footer-address li p {
    font-size: .875rem;
    line-height: 1.3;
}
footer .footer-address li .icon {
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.05);
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -ms-flex-negative: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-right: 1.0625rem;
    box-shadow: 0 0 20px rgba(0,0,0,.05);
    border-radius: 50%;
    background-color: #fff;
    width: 30px;
    height: 30px;
}
footer .footer-address li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
}
footer .footer-address {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.wrap-search-main {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transition: visibility .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);
    -o-transition: transform .6s cubic-bezier(.215,.61,.355,1),visibility .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1);
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(0);
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    transition: visibility .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);
    transition: transform .6s cubic-bezier(.215,.61,.355,1),visibility .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1);
    transition: transform .6s cubic-bezier(.215,.61,.355,1),visibility .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);
    will-change: transform;
    background-color: #3b6d6a;
    padding: 0.9375rem 2.1875rem;
    width: 100%;
}
.wrap-search-main.active {
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    visibility: visible;
    opacity: 1;
}
.wrap-search-main input {
    outline: none;
    border: 0;
    background-color: transparent;
    width: 100%;
    color: #fff;
    font-size: 1.5625rem;
    font-weight: 600;
}
.wrap-search-main button {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 2.1875rem;
    transform: translateY(-50%);
    outline: none;
    border: 0;
    background: transparent;
}
.wrap-search-main input::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}
header .menu-right .search {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    cursor: pointer;

    width: 27px;
    height: 27px;
    user-select: none;
}
header .menu-right .search i {
    -webkit-transition: all .3s cubic-bezier(.215,.61,.355,1);
    -o-transition: all .3s cubic-bezier(.215,.61,.355,1);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .3s cubic-bezier(.215,.61,.355,1);
}
header .menu-right .search i:first-child {
    -webkit-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
}
header .menu-right .search.active i:first-child {
    -webkit-transform: translate(-50%,-50%) scale(0);
    -ms-transform: translate(-50%,-50%) scale(0);
    transform: translate(-50%,-50%) scale(0);
}
header .menu-right .search i:nth-child(2) {
    -webkit-transform: translate(-50%,-50%) scale(0);
    -ms-transform: translate(-50%,-50%) scale(0);
    transform: translate(-50%,-50%) scale(0);
}
header .menu-right .search.active i:nth-child(2) {
    -webkit-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
}
/***************** product ***********/
#page-banner .banner__pages {
    position: relative;
    overflow: hidden;
}
#page-banner .banner__pages .breadcrumb {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    background: transparent;
}
#page-banner .banner__pages .breadcrumb li {
    position: relative;
}
#page-banner .banner__pages .breadcrumb li>* {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}
#page-banner .banner__pages {
    position: relative;
    overflow: hidden;
}
#page-banner .banner__pages .text-banner {
    -webkit-animation: aniLeft .8s ease-out .8s both;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    animation: aniLeft .8s ease-out .8s both;
    padding: 0 3.4375rem 3.5625rem;
    color: #fff;
    font-weight: 700;
}

#page-banner .banner__pages .breadcrumb li+li:before {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: -20px;
    margin: 0 5px;
    color: #fff;
    font-family: Material Icons;
    font-size: 1rem;
    content: "\f054";
    font-family: 'Font Awesome 6 Pro';
    font-size: 12px;
}
#page-banner .banner__pages .breadcrumb li+li {
    margin-left: 1.3125rem;
}
#page-banner .banner__pages:before {
    inset: 0;
    position: absolute;
    z-index: 2;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(19.15%,transparent),to(rgba(0,0,0,.8)));
    background: -o-linear-gradient(top,transparent 19.15%,rgba(0,0,0,.8) 100%);
    background: linear-gradient(180deg,transparent 19.15%,rgba(0,0,0,.8));
    content: "";
}
#page-banner{
    width: 100%;
}
.product-category{
   /*  width: 240px; */

}
.product-category .title-cate{
    color:  #3b6d6a;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 20px;
}
.menu-cate{
    background: #3b6d6a;
    padding:10px 20px;
   /*  width: 240px */;
}
.menu-cate ul{
    padding-left: 0px;
}
.menu-cate ul li{
    padding:5px 0;
}
.menu-cate a{
    color:#fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}
.menu-cate .sub-cate{

}
.menu-cate .sub-cate a{
    font-weight: normal;
    font-size: 16px;
}
.page-product{
    padding:40px 0;
}
.product-info{
    display: flex;
    align-items: start;
}
.title-quote span:before {
    -webkit-transform: translateX(40px) translateY(-30px);
    -ms-transform: translateX(40px) translateY(-30px);
    position: absolute;
    top: 0;
    right: 100%;
    transform: translateX(40px) translateY(-30px);
    color: var(--green);
    font-family: Font Awesome\ 5 Pro;
    font-size: 2.375rem;
    font-weight: 900;
    content: "\f10d";
}
.title-quote {
    position: relative;
    margin: 5.25rem auto 3.75rem;
    max-width: 1300px;
    text-align: center;
    padding:30px
}
.product-short-info{
    flex-grow: 1;
}
.title-quote:after {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e0e0e0;
    width: 258px;
    height: 3px;
    content: "";
}
.page-product-list .wrap-item-video .content-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.title-line {
    position: relative;
    padding-left: 13px;
    color: #133e35;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}
.title-line:before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: var(--green);
    width: 4px;
    height: 25px;
    content: "";
}
.wrap-item-video .content-left .desc {
    margin-top: 1.25rem;
}
.wrap-item-video .content-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.wrap-item-video .video {
    display: block;
    position: relative;
    padding-top: 63.63636%;
    height: 0;
    overflow: hidden;
}
.wrap-item-video .video iframe, .wrap-item-video .video img,  .wrap-item-video .video video {
    -o-object-fit: contain;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wrap-item-video .video .play-button {
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    width: 86px;
    height: 60px;
}

.wrap-item-video .content-left .desc ul {
    padding-left: 35px;
}
.wrap-item-video .content-left .desc ul li {
    font-size: 1.125rem;
    list-style: disc;
}
.item-product-main {
    position: relative;
    margin-bottom: 6.25rem;
}
.item-product-main:before {
    -webkit-transform: matrix(1,.1,-.01,1,0,0);
    -ms-transform: matrix(1,.1,-.01,1,0,0);
    position: absolute;
    bottom: -25px;
    left: 0;
    transform: matrix(1,.1,-.01,1,0,0);
    border-radius: 30px;
    background-color: #00a75c;
    width: 100%;
    height: 121px;
    content: "";
}
.item-product-main:hover .content  h3{
    transform: scale(1.1) translateY(-10px);
}
.item-product-main:hover .zoom-img  img{
    transform: scale(1.1) ;
}

.item-product-main .img {
    -webkit-box-shadow: 8px 8px 25px rgba(0,0,0,.15);
    box-shadow: 8px 8px 25px rgba(0,0,0,.15);
    border-radius: 30px;
}
.zoom-img {
    overflow: hidden;
}
.item-product-main .content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 2.1875rem;
    width: 100%;
    text-align: center;
}
.item-product-main .content h3 {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    margin-bottom: 1.25rem;
    color: #133e35;
    font-size: 1.25rem;
    font-weight: 700;
}
@media (min-width: 1280px){
    .item-product-main .content h3 {
        margin-bottom: 1.25rem;
        font-size: 1.5rem;
    }
}
.item-product-main .img a iframe, .item-product-main .img a img, .item-product-main .img a video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item-product-main .img a {
    display: block;
    position: relative;
    padding-top: 97.16814%;
    height: 0;
    overflow: hidden;
}
.item-product-main .content a{
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}
.item-product-main .content h3 a{
    color: inherit;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}
.item-product-main:hover .content a span {
    color: #3c6d6a;
    text-decoration: underline;
}
.item-application .img a {
    display: block;
    position: relative;
    padding-top: 52.73973%;
    height: 0;
    overflow: hidden;
}
.item-application {
    position: relative;
}
.item-application .img a {
    display: block;
    position: relative;
    padding-top: 52.73973%;
    height: 0;
    overflow: hidden;
}
.item-application .img a:before {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .6;
    z-index: 2;
    mix-blend-mode: normal;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));
    background: -o-linear-gradient(top,transparent 0,rgba(0,0,0,.8) 100%);
    background: linear-gradient(180deg,transparent,rgba(0,0,0,.8));
    width: 100%;
    height: 121px;
    content: "";
}
.item-application .img a iframe, .item-application .img a img, .item-application .img a video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item-application .title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    padding: 1.5rem;
    width: 100%;
    pointer-events: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}
.item-application:hover  img{
    transform: scale(1.1) ;
}
.product-detail.section-1 {
    padding-bottom: 50px;
}
.main-section {
    padding: 35px 0;
}
.product-detail.section-1 .product-img {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}
.product-detail.section-1 .product-img a iframe, .product-detail.section-1 .product-img a img, .product-detail.section-1 .product-img a video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail.section-1 .product-img a {
    display: block;
    position: relative;
    padding-top: 68.25397%;
    height: 0;
    overflow: hidden;
}
.product-detail.section-1 .product-content {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    padding-right: 8.5vw;
    padding-left: 2.0625rem;
}
.product-detail.section-1 .product-content .title-product-main {
    margin-bottom: 10px;
    color: #133e35;
    font-size: 2.25rem;
    font-weight: 700;
}
.product-detail.section-1 .product-content .product-tab .content ul {
    padding-left: 2.0625rem;
}
.product-detail.section-1 .product-content .product-tab .content ul li {
    color: #111;
    font-size: 1.125rem;
    list-style: disc;
}
.product-detail.section-1 .product-content .product-tab .title-line {
    margin-bottom: 1.125rem;
    font-size: 1.75rem;
    line-height: 1;
}
.product-detail.section-1 .product-content .product-tab+.product-tab {
    margin-top: 1.75rem;
}
.btn.btn-download {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    border: 2px solid var(--green);
    border-radius: 5px;
    background-color: #fff;
    padding: 0 0.625rem;
    min-width: 174px;
    height: 40px;
    color: #333;
    font-size: 1.25rem;
    font-weight: 500;
}
.btn.btn-download:hover{
    background-color: var(--green);
    color: white;
}
.btn.btn-download i {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    margin-left: 15px;
    color: var(--green);
    font-size: 22px;
}
.btn.btn-download:hover i {
    color: #fff;
}
.swiper-button-disabled {
    opacity: .4!important;
}
.btn.btn-sw-1.btn-prev:before {
    color: var(--green);
    font-family: "Font Awesome 6 Pro";
    content: "\f053";
}
.btn.btn-sw-1.btn-next:before {
    color: var(--green);
    font-family:  "Font Awesome 6 Pro";
    content: "\f054";
}
.btn.btn-sw-1 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 30px;
    font-size: 2.375rem;
}
.tt-list .left {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.tt-list .left:before {
    position: absolute;
    z-index: 3;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.5)));
    background: -o-linear-gradient(top,transparent 0,rgba(0,0,0,.5) 100%);
    background: linear-gradient(180deg,transparent,rgba(0,0,0,.5));
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: "";
}
.tt-list .left .box-img {
    width: 100%;
    height: 100%;
}
.tt-list .left .box-img a {
    display: block;
    width: 100%;
    height: 100%;
}
.tt-list .left .box-img a img {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-list .left .box-text {
    position: absolute;
    bottom: 10%;
    left: 0;
    z-index: 4;
    padding: 0 5%;
}
.tt-list .left .title {
    -webkit-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    display: block;
    transition: color .3s ease-in-out;
    margin-top: 10px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.625rem;
    text-decoration: none;
}
.tt-list .left .desc {
    -o-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: 15px;
    overflow: hidden;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6875rem;
    text-overflow: ellipsis;
}
.tt-list .right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    gap: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tt-list .right .item {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    height: calc(33.33333% - 13px);
}
.tt-list .right .box-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 42.18223%;
    flex: 0 0 42.18223%;
    max-width: 42.18223%;
    overflow: hidden;
}
.tt-list .right .box-img a {
    display: block;
    width: 100%;
    height: 100%;
}
.tt-list .right .box-img a img {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-list .right .box-text {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 53.76828%;
    flex: 0 0 53.76828%;
    padding-top: 10px;
    padding-bottom: 25px;
    max-width: 53.76828%;
}
.tt-list .right .title {
    -webkit-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -o-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    transition: color .3s ease-in-out;
    margin-top: 10px;
    overflow: hidden;
    color: #111;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-overflow: ellipsis;
    text-decoration: none;
}
.tt-list .right .desc {
    -o-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    color: #111;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6875rem;
    text-overflow: ellipsis;
}
.tt-list .bottom {
    margin-top: 40px;
}
.tt-list .bottom .box-img {
    display: block;
    position: relative;
    padding-top: 48.28179%;
    height: 0;
    overflow: hidden;
}
.tt-list .bottom .box-img a img {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}
.tt-list .bottom .box-text {
    margin-top: 30px;
}
.tt-list .bottom .title {
    -webkit-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -o-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    transition: color .3s ease-in-out;
    margin-top: 10px;
    overflow: hidden;
    color: #111;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-overflow: ellipsis;
    text-decoration: none;
}
.tt-list .bottom .item {
    margin-bottom: 1.875rem;
}
.tt-list .bottom .box-img iframe, .tt-list .bottom .box-img img, .tt-list .bottom .box-img video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-list .box-img:hover   img{
    transform: scale(1.1) ;
}
.page-lien-he .box-list-address {
    position: relative;
    padding: 3rem 0 3rem 2.5rem;
}
.title-20 {
    font-size: 1.25rem;
    font-weight: 700;
}
.page-lien-he .box-list-address .wrap-scroll-address {
    padding-right: 1.5625rem;
    height: 100%;
    max-height: 675px;
    overflow: auto;
}
.page-lien-he .box-list-address .item-address {
    border-bottom: 1px solid rgba(0,0,0,.2);
    padding: 0.625rem 0;
}
.page-lien-he .box-list-address .item-address .title-address {
    margin-bottom: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
}
.page-lien-he .box-list-address .item-address table tr td:first-child {
    font-weight: 700;
    white-space: nowrap;
}
.page-lien-he .box-form-contact {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 3.75rem 1.875rem;
    height: 100%;
}
.wrap-form .form-row .form-group {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    padding: 0 10px;
}
.wrap-form .form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -10px;
}
.page-lien-he .box-form-contact .wrap-form .form-group {
    margin-bottom: 1.25rem;
}
.page-lien-he .box-form-contact .wrap-form input[type=text] {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #fff;
    padding-left: 1.875rem;
    width: 100%;
    height: 50px;
}
.page-lien-he .box-form-contact .wrap-form .form-group {
    margin-bottom: 1.25rem;
}
.page-lien-he .box-form-contact .wrap-form textarea {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 1.875rem;
    width: 100%;
    height: 215px;
}
.page-lien-he .box-form-contact .wrap-form .frm-btn {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    display: inline-block;
    position: relative;
    transition: all .3s ease-in-out;
    border-radius: 10px;
}
.page-lien-he .box-form-contact .wrap-form .frm-btn input {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    outline: none;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: #3c6d6a;
    padding-right: 2.5rem;
    width: 153px;
    height: 40px;
    color: #fff;
    font-size: .875rem;
}
.wrap-form{width: 100%}
.banner-home .img a img {
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-home  .img, .banner-home .img a, .banner-home .swiper-slide .box-banner {
    width: 100%;
    height: 100%;
}
.banner-home .swiper-pagination {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute!important;
    bottom: 50px!important;
    align-items: center;
    justify-content: center;
    opacity: 1!important;
}
.banner-home .swiper-pagination .swiper-pagination-bullet {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    opacity: 1!important;
    transition: all .3s ease-in-out;
    margin: 0 0.625rem!important;
    background-color: #fff;
    width: 14px;
    height: 14px;
}
.banner-home .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #3b6d6a;
}
.product-hot .box-banner a {
    display: block;
    position: relative;
    padding-top: 97.16814%;
    height: 0;
    overflow: hidden;
}

.product-hot .box-banner img{
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-hot .box-banner {
    border-radius: 10px;
    border: 1px solid #3fbfc0;
    overflow: hidden;
}
.product-hot .box-banner:hover img{
    transform: scale(1.1);
}
.title-about-page{
    font-size: 30px;
    font-weight: bold;
    color:#3c6d6a;
}
.title-about-page span{

    color:#ffba00;
}
.about-home p{
    line-height: 30px;
}
.scrollToTop {
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    background: #1a9c94;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    position: fixed;
    bottom: 94px;
    right: 30px;
    display: none;
    z-index: 999999;
}
.scrollToTop:hover{
    color:#fff;
    background: #ffb900;
}
.scrollToTop .fa-stack {
    display: inline-block;
    height: 30px;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 30px;
}
.page{
    padding-top:100px;
    overflow: hidden;
}
.fancybox__container {
    -webkit-box-sizing: border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-tap-highlight-color: transparent;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    --carousel-button-width: 48px;
    --carousel-button-height: 48px;
    --carousel-button-svg-width: 24px;
    --carousel-button-svg-height: 24px;
    --carousel-button-svg-stroke-width: 2.5;
    --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    transform-origin: top left;
    z-index: 1050;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
    overflow: hidden;
    color: var(--fancybox-color,#fff);
    direction: ltr
}

.fancybox__container *,.fancybox__container :after,.fancybox__container :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.fancybox__container :focus {
    outline: none
}
.content-single-page{
    padding:30px 0;
}
.wrap-form .frm-btn button {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: all .3s ease-in-out;
    outline: none;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: #3c6d6a;
    padding-right: 2.5rem;
    width: 153px;
    height: 40px;
    color: #fff;
    font-size: .875rem;
}
.wrap-form .frm-btn button:after {
    display: inline-block;
    margin-left: 1.125rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAAAwklEQVQ4T7WUSwoCMRBEX4EH0Au40Ou6kBnwcwU9ia48hngEXbQ0GIwaJ5MxNmQTyGuqutIyswPQADtJNyqUzMwenDOwAdaSLr+wY2jgXIE9sJB0GgJPQWPOcYg1OWhoUGRNX2iRNaXQ2BpPTZtKjUPHwByYJc4UGGWG9WGNuh6YmQMdnGrod5Po/TM1f4Aua8nfAqvwaX4Z1NcMl0KDb40khyarL9Qn/CKxaxY5aLVvGiS2kjzgxfW++npLzMmvvqTvUqF6cexugUoAAAAASUVORK5CYII=);
    width: 21px;
    height: 18px;
    content: "";
    position: absolute;
}
.breadcrumb a{text-decoration: none;}
/******* about ****************/
.about-1 .title-about {
    position: relative;
    margin: 0 auto;
    max-width: 1080px;
    font-size: 1.625rem;
    font-weight: 600;
}
.about-1 .title-about:before {
    -webkit-transform: translate(-47px,-27px);
    -ms-transform: translate(-47px,-27px);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-47px,-27px);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAnCAYAAACrDdDdAAAD3klEQVRoQ+1XXWgcVRT+zt1YpEGa7sxu0CaZ2UQys0Rri5Q+FAQh4g8KgiAiglURqtTiW/2pKK0KrYKIKKKooA/ioxQREUWQ/vjzUITtzgTdnc1T051NU1Ba4+49Mkkak2ayd+7EsKXsfb3f993znXvO/SGkHFOF0VuEFGNENAiSQ2AaAOMGEIaY+M1c1X8jpbSSdqZ/a+81G2d3MfMISGyBhAXiaP0BBvrMmtdPgCSl0gKAAQqt4nYi3MHghwnYuhqXwV/kAv+hpNpJcOfsbX2SLowz030AHgRw7eo8WTSDCS+RuWlr9G5J4i0ATpJAGKjmAm84CVaFOT8wlp3tab5EoGcAZFT4uXmiR81q+dO25hojNw1yq/khgDsTiS4BCTHbl61UzuvyLuGjSpm2io8z8WEAhpYO4V2z6u1d1VxoO08BFPVNr5bwAliwvCdbm/g6DTdKqpTNz4mxKw0foJ/NoLwz1lxou28D2JdOeJ5FwMtG4B3U1Tg7MnajaLV+ApDV5S7B/20YvdetMNewi88yOOqvNQ0ifGVUvXt1RKL+ava0fmFgzf3KgncsM1e3nNuJ6Lv5xK95TBmBdz0BnESJAdGw3G9AGE+CV2P46UUTM0M3b26Kf8oA+tXEeAQBFQDfMtExKcSJ/B+l35NqhQXnAJgOJcXH4C6C+Bgkfc/gExdbf51cNBdaxc9A/EhK8aMs+GCu4v+ahl8vOA4xlRIf9csXqTPhCG/MvJ8vlf5cOjVnLhwY3YIeUdMWZzQJtMeolT9KY+oSp2G5HzDhyRQaxyUyD+SD0pk47ry5gvsaGC/oihPzE0bN/1iXtxQ/PTy8ScoNZwFs0NTxZG9mx+W7tXLnbGcSoEE9cfrSDMr363FWohu28xiDdBPEgnhbtur/1m59qg+5t5KAdq9IZLbng9KptZoLLfcoCFpXBpAssRQW3L1gvKMXJM+Ygb9ZjxOPDm13BsAmLS3CPrPqKWOm0HY/AbBbR5zAPxqBf5sOJw57rlC0WsyBto4U4+bk6eg+bjsicycB7FQBL5s/zsCL7Ti5wPtBpdmwnbsYpP3+ZGAPAH81fSnlZP/kRCUyNwUgrwpEd94M1N+phcf5e7raajwfMQN/f2RO/k/PrWVrJjJXKL4K5rYVoDYSh+DDZuA/F5lL9PbTXSSROdt9HcDzutpq/H871zlzVvEQiA+og9VFXAHm6rb7SvTv0w1djb8CynIdzS0eKB0ry645dQ3GILo9lyptc6QkV8E6lmXn77l1NHdVHyjdnUvddB3uuW5ZdncuLgMdLsvugdIty25ZxmRgHV8oV3XPzZn7F/PV8MnTHOvyAAAAAElFTkSuQmCC);
    width: 55px;
    height: 39px;
    content: "";
}
.main-section {
    padding: 35px 0;
}
@media (min-width: 1280px){
    .about-1 {
        padding: 4.375rem 0 3.125rem;
    }
}

@media (min-width: 1440px){
    .about-1 {
        padding: 5rem 0;
    }
}

@media (min-width: 1200px){
    .main-section {
        padding: 80px 0;
    }
}

@media (min-width: 1024px){
    .main-section {
        padding: 50px 0;
    }

}
.about-2 {
    background-position: 0 100%!important;
    background-repeat: no-repeat;
    background-size: 43%!important;
}
@media (min-width: 1440px){
    .about-2 {
        padding-top: 9.375rem;
    }
}
@media (min-width: 1280px){
    .about-2 {
        padding: 3.75rem;
    }
}
/******* about ****************/
.about-1 .title-about {
    position: relative;
    margin: 0 auto;
    max-width: 1080px;
    font-size: 1.625rem;
    font-weight: 600;
}
.about-1 .title-about:before {
    -webkit-transform: translate(-65px,-27px);
    -ms-transform: translate(-65px,-27px);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-65px,-27px);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAnCAYAAACrDdDdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTJENjM2M0E0N0E4MTFFRUE1MkE5MzkxMzE1QkI4ODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTJENjM2M0I0N0E4MTFFRUE1MkE5MzkxMzE1QkI4ODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MkQ2MzYzODQ3QTgxMUVFQTUyQTkzOTEzMTVCQjg4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MkQ2MzYzOTQ3QTgxMUVFQTUyQTkzOTEzMTVCQjg4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps+P4zwAAAJaSURBVHja7JdPSBRRHMdnNs2gg2mIoKZYkiyBIroLaoKCEh68GBQK0cFDteIieBAEYfGooigoHqqreFRBjKgELT10iAJdPHjoFHTxsIcO2fb9wRtZhmXmvd/MuLm9H3xwYd7v9+Y77/fnabaPxAymNYJ74BaoBlWgQvyeBTNGcHYdtIM7oBLUiP2JG6B8b3HpT4FCQBM0gR4wCBoc1jYHIIheuhv0gUfgmsPauyApK64XzIN6yfVRH0WVgkkwAq4o7J8MuSyilNsGWwrCyGpBsUdRlClD4BiMKgg7/7hO4l6AI/CA+XJtHoTRR90FL8FNhn/ESdwCWBaFy7UI068OfBENg93s7seHC7OJoxSI+1ArUWZ9vRF/vVgRCbSL6wJzPjWCFlE3skbvsgZu+7R/JLNbloBVxRey2wl4Cz6CfZBW8J0QrZ5rv8S+78XeB5niFmn4MQNvginwmelPnTjB9P0JpsEKBncq84Eljqb8ACPwb/AcvPKYQmOKrd6yT+AhRP3I9tASF2MGfwZeexRG8/Apwy9JY8p+WvYiJnvCCL7ugzCyfnBV0Ydq+TFIuXWoZjE0VS1h+GP9DJ8N8FWm/bYygp+KQeuHdTB83snOFs4N/ptPwmqYd9BDmUXUUMKM4NR8Ol3W7EjECTM/Cl3RzugHrlnZnn9HozkpEDd4zqX4g8StXua/B46tuDynuTdOaVlm5M4qA4qbtmrOzKG4UEBxzSCDy9rZZfxyuRaX/hfEGfmclkY+p6UWp2vuPzo5U6elPjldczotdVrqk9MNRaelPrkLt78CDABpZFrlI+Q5IQAAAABJRU5ErkJggg==');
    width: 55px;
    height: 39px;
    content: "";
}
.main-section {
    padding: 35px 0;
}
@media (min-width: 1280px){
    .about-1 {
        padding: 4.375rem 0 3.125rem;
    }
}

@media (min-width: 1440px){
    .about-1 {
        padding: 5rem 0;
    }
}

@media (min-width: 1200px){
    .main-section {
        padding: 80px 0;
    }
}

@media (min-width: 1024px){
    .main-section {
        padding: 50px 0;
    }

}
.about-2 {
    background-position: 0 100%!important;
    background-repeat: no-repeat;
    background-size: 43%!important;
}
@media (min-width: 1440px){
    .about-2 {
        padding-top: 9.375rem;
    }
}
@media (min-width: 1280px){
    .about-2 {
        padding: 3.75rem;
    }
}
.about-2 .item-about-2 {
    margin-bottom: 8.4375rem;
    max-width: 65%;
}
.about-2 .item-about-2 .title, .about-2 .item-about-2 .title .icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.about-2 .item-about-2 p {
    margin-top: 5px;
    color: #222;
    font-size: 1.5rem;
    line-height: 1.2;
}
.about-2 .item-about-2 .title .icon {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 20px;
    background-color: #e41e26;
    width: 36px;
    height: 36px;
}
@media (max-width: 1279.98px){
    .about-2 .item-about-2 {
        margin-bottom: 5rem;
        max-width: 100%;
    }
}

@media (max-width: 575.98px){
    .about-2 .item-about-2 p {
        font-size: 1.3rem;
    }
    .about-2 .item-about-2 {
        margin-bottom: 1.875rem;
    }
    .about-1 .title-about:before {
        -webkit-transform: none;
        -ms-transform: none;
        position: static;
        transform: none;
        background-size: 100% 100%;
        max-width: 30px;
        height: 25px;
    }
    .about-1 .title-about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        gap: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 95%;
        font-size: 1.4rem;
    }

}
@media (min-width: 1280px){
    .about-3 {
        padding-bottom: 0;
    }
}
.title-36 {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 700;
}
.mb-30 {
    margin-bottom: 1.875rem;
}
.title-36.black {
    color: #000;
}
.about-3 .wrap-slide .item-about-3 {
    position: relative;
}

.about-3 .wrap-slide .item-about-3:before {
    inset: 0;
    position: absolute;
    z-index: 2;
    background-color: rgba(235,34,39,.75);
    content: "";
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n-1) .item-about-3:before {
    background-color: rgb(246 182 32 / 83%);
}
.about-3 .wrap-slide .item-about-3 .img {
    display: block;
    position: relative;
    padding-top: 162.91667%;
    height: 0;
    overflow: hidden;
}
.about-3 .wrap-slide .item-about-3 .img iframe, .about-3 .wrap-slide .item-about-3 .img img, .about-3 .wrap-slide .item-about-3 .img video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-3 .wrap-slide .item-about-3 .content {
    position: absolute;
    top: 24%;
    z-index: 3;
    padding: 0 3.125rem;
    width: 100%;
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n-1) .item-about-3 .content {
    color: #fff;
}
.item-about-3:hover.zoom-img  img{
    transform: scale(1.1) ;
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n) .item-about-3:before {
    background-color: hsla(0,0%,100%,.65);
}
.about-3 .wrap-slide .item-about-3 .content h3 {
    margin-bottom: 1.875rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}
@media (min-width: 1280px){
    .about-4 {
        padding-top: 4.0625rem;
        padding-bottom: 2.5rem;
    }
}
.about-4 .item-about-4 {
    margin-bottom: 1.875rem;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n-1) {
        padding-left: 1.875rem;
    }
}

.about-4 .item-about-4 .box-content-left {
    -webkit-box-shadow: 4px 4px 18px rgba(0,0,0,.15);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 4px 4px 18px rgba(0,0,0,.15);
    background-color: #fff;
    padding: 3.125rem 0.625rem 3.125rem 1.875rem;
    height: 100%;
}
.about-4 .item-about-4 .box-content-left .title {
    border-left: 5px solid #3b6d6a;
    padding: 15px 0 15px 18px;
    color: #333;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}
.about-4 .item-about-4 .box-content-left .desc {
    margin-top: 1.5625rem;
    padding-right: 1.875rem;
    height: 100%;
    max-height: 300px;
    overflow: auto;
    color: #333;
    font-size: 1.125rem;
    text-align: justify;
}
.about-4 .item-about-4 .box-img-right {
    height: 100%;
}
.about-4 .item-about-4 .box-img-right a {
    display: block;
    width: 100%;
    height: 100%;
}
.about-4 .item-about-4 .box-img-right a img {
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 580px;
    object-fit: cover;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) {
        padding-right: 1.875rem;
    }
}
.about-4 .item-about-4 .row [class*=col] {
    padding-right: 0;
    padding-left: 0;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) .box-content-left {
        margin-left: 30px;
    }
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) .row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}
.wrap-item-about-4{overflow: hidden;}

ul.li-num {
    padding: 0;
    margin: 0;
}
ul.li-num li {
    position: relative;
    padding: 5px 0 5px 40px;
    margin: 0;
    list-style: none;
    line-height: 1.8;
}
ul.li-num i.num, ul.li-num em.num {
    position: absolute;
    top: 3px;
    left: 0;
    background: #5C5C5C;
    border: 2px solid #fff;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 29px;
    text-align: center;
    color: #fff;
    display: inline-block;
}
.h-title {
    color: #1e1f21;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 24px;
}
.h-title::after {
    content: '';
    display: block;
    width: 35px;
    height: 6px;
    background: #ffb900;
    border-radius: 3px;
    margin: 10px auto 0;
}
.wrap-page{    padding: 30px 0;}
.title-landing-page-h3 {
    color: #f1b92c;
    font-size: 40px;
}




.os-img {
    border-radius: 50%;
    border-top: 2px dashed #ffcc00;
    border-right: 2px dashed #ffcc00;
    border-left: 2px dashed #3c6d6a;
    border-bottom: 2px dashed #3c6d6a;
    padding: 10px;
    animation: spin 50s infinite linear;
}
.os-img img {
    animation: spin 50s infinite reverse linear;
    width: 100%;
    border-radius: 50%;
}

@keyframes spin {
    100% {
        transform: rotate(1turn);
    }
}
.name-user-os {
    font-weight: bold;
    color: #ecb92f;
    font-size: 20px;
}
.short-user-os {
    font-size: 16px;
    font-weight: bold;
}

.member-list {
    width: 100%;
    display: block;
    margin: auto;
    padding: 10px 0;
}

.member-list:before {
    width: 1px;
    height: 100%;
    top: 0;
    position: absolute;
    content:"";
}

.item-member-about {
    position: relative;
    width: 50%;
    display: inline-block;
    text-align: right;
    padding-right: 30px;
}

.item-member-about:before {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #3b6d6a;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    z-index: 4;
    content:"";
}
.member-list{position: relative;}
.achievement-about, .item-history.active, .item-history.active:before, .member-list:before, .nav-history li.active a {
    background-color: #3b6d6a;
}
.item-history:after, .member-list:before, .slider-history .slide-buttons:before {
    left: 50%;
    content: " ";
}
.member-list li {
    min-height: 192px;
    margin-bottom: 75px;
}

.member-list li:nth-child(2n),.member-list.right li {
    text-align: right;
}

.member-list li:nth-child(2n) .item-member-about,.member-list.right .item-member-about {
    text-align: left;
    padding-right: 0;
    padding-left: 30px;
}

.item-member-about img {
    height: 180px;
    position: absolute;
    top: 50%;
    margin-top: -90px;
    right: -192px;
}

.achievement-about, .item-achievement {
    position: relative;
    display: block;
    height: auto;
}

.member-list li:nth-child(2n) .item-member-about img, .member-list.right .item-member-about img {
    left: -192px;
    right: auto;
}

.member-list li:nth-child(2n) .item-member-about:before,.member-list.right .item-member-about:before {
    right: auto;
    left: -10px;
}

.item-member-about h3 {
    color: #f6ba42;
}
@media screen and (max-width: 540px) {
    .member-list li {
        margin-bottom: 30px;
    }

    .item-member-about {
        width: 100%;
        text-align: left !important;
        background: #eee;
        padding: 20px !important;
        max-width: 330px;
    }

    .item-member-about:before {
        left: 50% !important;
        right: auto !important;
        top: 0;
        margin: -10px 0 0 -10px;
    }
    .item-member-about img {
        position: relative;
        height: auto;
        width: 100%;
        max-width: 190px;
        display: block;
        transform: none;
        margin: 0 auto 15px;
        left: auto !important;
        right: auto !important;
        top: auto;
    }
    .item-member-about h3 {
        font-size: 15px;
    }
    .member-list li {
        text-align: center !important;
    }

}
@media screen and (max-width: 1100px){
    .member-list {
        height: auto;
        width: 100%;
        margin: auto;
        overflow: hidden;
    }
}




.tit_rib {
    min-height: 30px;
    font-size: 18px;
    padding-bottom: 10px;
}
.tit_rib {
    min-height: 30px;
    font-size: 18px;
    padding-bottom: 10px;
}
.tit_rib span {
    float: left;
    width: 100%;
    background: #3b6d6a;
    padding: 0 15px;
    color: #FFF;
    min-height: 30px;
    line-height: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}
.top_advisory {

    padding: 40px 0;
}
/* .btn_download */
.btn_download {
    display: block;
    line-height: 18px;
    padding: 15px 20px;
    background: #f4f4f4;
    color: #9b9b9b;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
}
.btn_download .fa {
    float: right;
}
.btn_download:hover {
    background: #f7ba23;
    color: #FFF;
    text-decoration: none;
}
.title_bar {
    padding: 20px 0;
    background: #f7ba23;
}
.title_bar .tit {
    color: #FFF;
    font-size: 30px;
    font-weight: 300;

    text-transform: uppercase;
    margin-bottom: 0;
}

@media (max-width: 540px){
    .title_bar .tit {
        font-size: 18px;
    }
}

.advisory_bottom_desc {
    font-size: 24px;
    position: relative;

}
.bg_dark {
    background: #535355;
    color: #FFF;
}
.element_from_bottom {

    padding-left: 0px;

    position: relative;
}
.bottom_desc .the_content {
    line-height: 1.6em;
    font-size: 22px;

}
.advisory_bottom_desc .the_content {
    padding-left: 260px;
    position: relative;
    font-size: 24px;
}
.advisory_bottom_desc .the_content:before {
    position: absolute;
    left: 230px;
    width: 1px;
    height: 100%;
    background: #FFF;
    content: '';
    top: 0;
}
.bg_dark span, .bg_dark strong {
    color: #eb8123;
}
.static_num {
    font-size: 80px;
    position: absolute;
    width: 200px;
    top: 50%;
    left: 0;
    text-align: right;
    -webkit-transform: translate(0,-50%) scale(1);
    transform: translate(0,-50%) scale(1);
}
.bottom_desc {
    padding: 40px 0;
}
@media screen and (max-width: 1023px){
    .advisory_bottom_desc .the_content {
        padding-left: 0;
        font-size: 20px;
        text-align: center;
    }

    .static_num {
        width: 100%;
        text-align: center;
        position: static;
        margin: 20px auto;

    }
    .advisory_bottom_desc .the_content:before {
        display: none;
    }
}
.static_num b{
    font-size:22px;padding-top:15px;color:#fff;text-align:center;letter-spacing:4px;font-weight:bold;
}
.content-single-page.page-content img {
    width: auto;
    max-width: 100%;
}
.swiper-container {overflow: hidden;position: relative;}

.swiper-container  img.fullscreen {
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-controls,.counter-controls,.template-actions{display: none;}
/********************
shipping block
********************/
.shipping-template { transition: all 0.3s ease; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); position: relative; }
        .shipping-template .card-title { font-size: 1.5rem; position: relative; padding-bottom: 0.75rem; margin-bottom: 1rem; display: inline-block; }
        
        .title-underline {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #dc3545;
            display: block;
        }
        .shipping-template .corner-triangle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 80px 80px;
            border-color: transparent transparent #dc3545 transparent;
        }
        .shipping-template .corner-triangle i {
            position: absolute;
            bottom: -65px;
            right: -65px;
            font-size: 20px;
            color: #fff;
        }
        .shipping-template .btn-read-more {
            color: #dc3545;
            padding: 0;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }
        .shipping-template .btn-read-more i {
            margin-left: 0.5rem;
            transition: transform 0.3s;
        }
        .shipping-template .btn-read-more:hover i {
            transform: translateX(5px);
        }
        .shipping-template { transition: all 0.3s ease; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); position: relative; }


        .shipping-template .template-remove {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            border-radius: 50%;
            border: none;
            padding: 0;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .shipping-template .template-remove span {
            color: #fff;
            font-size: 20px;
            line-height: 1;
            margin-top: -2px;
        }
    
        .shipping-template:hover .template-remove {
            opacity: 1;
        }
    .corner-triangle {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 80px 80px;
        border-color: transparent transparent #dc3545 transparent;
    }
    .corner-triangle::after {
        content: "\f067";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        bottom: -65px;
        right: 16px;
        font-size: 16px;
        color: #fff;
    }
    .shipping-template .btn-read-more svg{ 
        margin-left: 10px;
        margin-top: 5px;
        width: 12px;
    }
    .shipping-template .template-actions {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        display: flex;
        gap: 10px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .shipping-template:hover .template-actions {
        opacity: 1;
    }
    .shipping-template .template-edit {
        width: 30px;
        height: 30px;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        right: 49px;
        top: 10px;
        color: #fff;
    }
    .shipping-template .template-edit i {
        color: #fff;
        font-size: 16px;
    }

/* Swiper Slider Dialog Styles */
.cke_dialog .slider-container {
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cke_dialog .slider-images {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cke_dialog .slider-images li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cke_dialog .slider-images img {
    max-width: 100px;
    height: auto;
    margin-right: 15px;
}

.cke_dialog .image-controls {
    margin-left: auto;
    display: flex;
    gap: 5px;
}

.cke_dialog .image-controls button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
}

.cke_dialog .image-controls .move-up,
.cke_dialog .image-controls .move-down {
    color: #666;
}

.cke_dialog .image-controls .slider-remove {
    color: #ff0000;
}

.cke_dialog .image-controls button:hover {
    background: #f0f0f0;
}
.swiper-container{overflow: hidden;}
.swiper-container {
    position: relative;
}
.swiper-controls {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 5px;
}

.swiper-edit-btn, .swiper-delete-btn {
    display: inline-block;
    margin: 0 5px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
.swiper-edit-btn:hover, .swiper-delete-btn:hover {
    color: #ffcc00;
}
.slider-images {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    max-height: 200px;
    overflow-y: auto;
}

.slider-images li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ddd;
}

.slider-images img {
    max-width: 100px;
    margin-right: 10px;
}

.image-controls {
    margin-left: auto;
}

.image-controls span {
    cursor: pointer;
    padding: 5px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.image-controls span:hover {
    background: #f0f0f0;
}

.slider-remove {
    color: red;
}

/*****************************
bg block
*****************************/
.block-bg {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.block-content {
    color: white;
    z-index: 1;
}

.block-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.block-subtitle {
    font-size: 24px;
    margin-bottom: 30px;
    color: #ffd700;
}

.block-button {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.block-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}



.block-edit, .block-remove {
    display: inline-block;
    background: rgba(255,255,255,0.8);
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 3px;
}
.counter-template {
    position: relative;
    width: 250px;
    margin: 20px;
    text-align: center;
}

.icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 2;
}

.counter-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.counter-icon img {
    width: 40px;
    height: 40px;
}

.counter-box {
    position: relative;
    margin-top: -40px;
    padding: 50px 20px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.counter-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.counter-text {
    font-size: 16px;
    color: #666;
}

.counter-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
}

.counter-edit, .counter-remove {
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
    color: #666;
}

.title-product-controls {display: none;}
.footer-address ul{padding-left: 0;}
.footer-address {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 .footer-address li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
}
.footer-address li .icon {
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.05);
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -ms-flex-negative: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-right: 1.0625rem;
    box-shadow: 0 0 20px rgba(0,0,0,.05);
    border-radius: 50%;
    background-color: #fff;
    width: 30px;
    height: 30px;
}
.title-about-page{
    font-size: 30px;
    font-weight: bold;
    color:#3c6d6a;
}
.title-about-page span{

    color:#ffba00;
}
.slogan{
    margin:20px 0;
    color:#fff;
    text-align: center;
    background: #3c6d6a;
}
.content-slogan{
    padding:60px 140px;
}
.content-slogan .title-slogan{
    margin-bottom: 20px;
    font-size: 40px;
}
.content-slogan .content-slogan-text{
    font-size: 20px;
    text-align: left;
    line-height: 35px;
}
@media (max-width: 576px){

    .content-slogan{
        padding: 20px 15px
    }
    .title-slogan{font-size: 20px;}
    .content-slogan .title-slogan {
        margin-bottom: 15px;
        font-size: 30px;
    }
    .content-slogan .content-slogan-text {
        font-size: 16px;
        text-align: left;
        line-height: 24px;
    }
}
.title-home-page{
    padding: 30px 0;
    text-align: center;
}
.title-home-page span{
    font-weight: bold;
    font-size: 20px;
    color:#ffb900;
    padding-bottom: 5px;
    border-bottom: 1px solid #3c6c60;
    text-transform: uppercase;
}
/******* about ****************/
.about-1 .title-about {
    position: relative;
    margin: 0 auto;
    max-width: 1080px;
    font-size: 1.625rem;
    font-weight: 600;
}
.about-1 .title-about:before {
    -webkit-transform: translate(-65px,-27px);
    -ms-transform: translate(-65px,-27px);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-65px,-27px);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAnCAYAAACrDdDdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTJENjM2M0E0N0E4MTFFRUE1MkE5MzkxMzE1QkI4ODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTJENjM2M0I0N0E4MTFFRUE1MkE5MzkxMzE1QkI4ODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MkQ2MzYzODQ3QTgxMUVFQTUyQTkzOTEzMTVCQjg4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MkQ2MzYzOTQ3QTgxMUVFQTUyQTkzOTEzMTVCQjg4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps+P4zwAAAJaSURBVHja7JdPSBRRHMdnNs2gg2mIoKZYkiyBIroLaoKCEh68GBQK0cFDteIieBAEYfGooigoHqqreFRBjKgELT10iAJdPHjoFHTxsIcO2fb9wRtZhmXmvd/MuLm9H3xwYd7v9+Y77/fnabaPxAymNYJ74BaoBlWgQvyeBTNGcHYdtIM7oBLUiP2JG6B8b3HpT4FCQBM0gR4wCBoc1jYHIIheuhv0gUfgmsPauyApK64XzIN6yfVRH0WVgkkwAq4o7J8MuSyilNsGWwrCyGpBsUdRlClD4BiMKgg7/7hO4l6AI/CA+XJtHoTRR90FL8FNhn/ESdwCWBaFy7UI068OfBENg93s7seHC7OJoxSI+1ArUWZ9vRF/vVgRCbSL6wJzPjWCFlE3skbvsgZu+7R/JLNbloBVxRey2wl4Cz6CfZBW8J0QrZ5rv8S+78XeB5niFmn4MQNvginwmelPnTjB9P0JpsEKBncq84Eljqb8ACPwb/AcvPKYQmOKrd6yT+AhRP3I9tASF2MGfwZeexRG8/Apwy9JY8p+WvYiJnvCCL7ugzCyfnBV0Ydq+TFIuXWoZjE0VS1h+GP9DJ8N8FWm/bYygp+KQeuHdTB83snOFs4N/ptPwmqYd9BDmUXUUMKM4NR8Ol3W7EjECTM/Cl3RzugHrlnZnn9HozkpEDd4zqX4g8StXua/B46tuDynuTdOaVlm5M4qA4qbtmrOzKG4UEBxzSCDy9rZZfxyuRaX/hfEGfmclkY+p6UWp2vuPzo5U6elPjldczotdVrqk9MNRaelPrkLt78CDABpZFrlI+Q5IQAAAABJRU5ErkJggg==');
    width: 55px;
    height: 39px;
    content: "";
}
.main-section {
    padding: 35px 0;
}
@media (min-width: 1280px){
    .about-1 {
        padding: 4.375rem 0 3.125rem;
    }
}

@media (min-width: 1440px){
    .about-1 {
        padding: 5rem 0;
    }
}

@media (min-width: 1200px){
    .main-section {
        padding: 80px 0;
    }
}

@media (min-width: 1024px){
    .main-section {
        padding: 50px 0;
    }

}
.about-2 {
    background-position: 0 100%!important;
    background-repeat: no-repeat;
    background-size: 43%!important;
}
@media (min-width: 1440px){
    .about-2 {
        padding-top: 9.375rem;
    }
}
@media (min-width: 1280px){
    .about-2 {
        padding: 3.75rem;
    }
}
.about-2 .item-about-2 {
    margin-bottom: 8.4375rem;
    max-width: 65%;
}
.about-2 .item-about-2 .title, .about-2 .item-about-2 .title .icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.about-2 .item-about-2 p {
    margin-top: 5px;
    color: #222;
    font-size: 1.5rem;
    line-height: 1.2;
}
.about-2 .item-about-2 .title .icon {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 20px;
    background-color: #e41e26;
    width: 36px;
    height: 36px;
}
@media (max-width: 1279.98px){
    .about-2 .item-about-2 {
        margin-bottom: 5rem;
        max-width: 100%;
    }
}

@media (max-width: 575.98px){
    .about-2 .item-about-2 p {
        font-size: 1.3rem;
    }
    .about-2 .item-about-2 {
        margin-bottom: 1.875rem;
    }
    .about-1 .title-about:before {
        -webkit-transform: none;
        -ms-transform: none;
        position: static;
        transform: none;
        background-size: 100% 100%;
        max-width: 30px;
        height: 25px;
    }
    .about-1 .title-about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        gap: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 95%;
        font-size: 1.4rem;
    }

}
@media (min-width: 1280px){
    .about-3 {
        padding-bottom: 0;
    }
}
.title-36 {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 700;
}
.mb-30 {
    margin-bottom: 1.875rem;
}
.title-36.black {
    color: #000;
}
.about-3 .wrap-slide .item-about-3 {
    position: relative;
}

.about-3 .wrap-slide .item-about-3:before {
    inset: 0;
    position: absolute;
    z-index: 2;
    background-color: rgba(235,34,39,.75);
    content: "";
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n-1) .item-about-3:before {
    background-color: rgb(246 182 32 / 83%);
}
.about-3 .wrap-slide .item-about-3 .img {
    display: block;
    position: relative;
    padding-top: 162.91667%;
    height: 0;
    overflow: hidden;
}
.about-3 .wrap-slide .item-about-3 .img iframe, .about-3 .wrap-slide .item-about-3 .img img, .about-3 .wrap-slide .item-about-3 .img video {
    -o-object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: .3s ease-in-out all;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-3 .wrap-slide .item-about-3 .content {
    position: absolute;
    top: 24%;
    z-index: 3;
    padding: 0 3.125rem;
    width: 100%;
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n-1) .item-about-3 .content {
    color: #fff;
}
.item-about-3:hover.zoom-img  img{
    transform: scale(1.1) ;
}
.about-3 .wrap-slide .swiper-slide:nth-child(2n) .item-about-3:before {
    background-color: hsla(0,0%,100%,.65);
}
.about-3 .wrap-slide .item-about-3 .content h3 {
    margin-bottom: 1.875rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}
@media (min-width: 1280px){
    .about-4 {
        padding-top: 4.0625rem;
        padding-bottom: 2.5rem;
    }
}
.about-4 .item-about-4 {
    margin-bottom: 1.875rem;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n-1) {
        padding-left: 1.875rem;
    }
}

.about-4 .item-about-4 .box-content-left {
    -webkit-box-shadow: 4px 4px 18px rgba(0,0,0,.15);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 4px 4px 18px rgba(0,0,0,.15);
    background-color: #fff;
    padding: 3.125rem 0.625rem 3.125rem 1.875rem;
    height: 100%;
}
.about-4 .item-about-4 .box-content-left .title {
    border-left: 5px solid #3b6d6a;
    padding: 15px 0 15px 18px;
    color: #333;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}
.about-4 .item-about-4 .box-content-left .desc {
    margin-top: 1.5625rem;
    padding-right: 1.875rem;
    height: 100%;
    max-height: 300px;
    overflow: auto;
    color: #333;
    font-size: 1.125rem;
    text-align: justify;
}
.about-4 .item-about-4 .box-img-right {
    height: 100%;
}
.about-4 .item-about-4 .box-img-right a {
    display: block;
    width: 100%;
    height: 100%;
}
.about-4 .item-about-4 .box-img-right a img {
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 580px;
    object-fit: cover;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) {
        padding-right: 1.875rem;
    }
}
.about-4 .item-about-4 .row [class*=col] {
    padding-right: 0;
    padding-left: 0;
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) .box-content-left {
        margin-left: 30px;
    }
}
@media (min-width: 1024px){
    .about-4 .item-about-4:nth-child(2n) .row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}


.member-list {
    width: 100%;
    display: block;
    margin: auto;
    padding: 10px 0;
}

.member-list:before {
    width: 1px;
    height: 100%;
    top: 0;
    position: absolute;
    content:"";
}

.item-member-about {
    position: relative;
    width: 50%;
    display: inline-block;
    text-align: right;
    padding-right: 30px;
}

.item-member-about:before {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #3b6d6a;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    z-index: 4;
    content:"";
}
.member-list{position: relative;}
.achievement-about, .item-history.active, .item-history.active:before, .member-list:before, .nav-history li.active a {
    background-color: #3b6d6a;
}
.item-history:after, .member-list:before, .slider-history .slide-buttons:before {
    left: 50%;
    content: " ";
}
.member-list li {
    min-height: 192px;
    margin-bottom: 75px;
}

.member-list li:nth-child(2n),.member-list.right li {
    text-align: right;
}

.member-list li:nth-child(2n) .item-member-about,.member-list.right .item-member-about {
    text-align: left;
    padding-right: 0;
    padding-left: 30px;
}

.item-member-about img {
    height: 180px;
    position: absolute;
    top: 50%;
    margin-top: -90px;
    right: -192px;
}

.achievement-about, .item-achievement {
    position: relative;
    display: block;
    height: auto;
}

.member-list li:nth-child(2n) .item-member-about img, .member-list.right .item-member-about img {
    left: -192px;
    right: auto;
}

.member-list li:nth-child(2n) .item-member-about:before,.member-list.right .item-member-about:before {
    right: auto;
    left: -10px;
}

.item-member-about h3 {
    color: #f6ba42;
}
/* Ẩn biểu tượng "add" ban đầu */
.add-button {
    display: none;
}

/* Hiển thị biểu tượng "add" khi hover lên .item-member-about */
.item-member-about:hover .add-button {
    display: inline-block;
    cursor: pointer;
}

.tit_rib {
    min-height: 30px;
    font-size: 18px;
    padding-bottom: 10px;
}
.tit_rib span {
    float: left;
    width: 100%;
    background: #3b6d6a;
    padding: 0 15px;
    color: #FFF;
    min-height: 30px;
    line-height: 30px;
   
    font-weight: normal;
}
.top_advisory {

    padding: 40px 0;
}
/* .btn_download */
.btn_download {
    display: block;
    line-height: 18px;
    padding: 15px 20px;
    background: #f4f4f4;
    color: #9b9b9b;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
}
.btn_download .fa {
    float: right;
}
.btn_download:hover {
    background: #f7ba23;
    color: #FFF;
    text-decoration: none;
}
.title_bar {
    padding: 20px 0;
    background: #f7ba23;
}
.title_bar .tit {
    color: #FFF;
    font-size: 30px;
    font-weight: 300;

    text-transform: uppercase;
    margin-bottom: 0;
}

@media (max-width: 540px){
    .title_bar .tit {
        font-size: 18px;
    }
}

.advisory_bottom_desc {
    font-size: 24px;
    position: relative;

}
.bg_dark {
    background: #535355;
    color: #FFF;
}
.element_from_bottom {

    padding-left: 0px;

    position: relative;
}
.bottom_desc .the_content {
    line-height: 1.6em;
    font-size: 22px;
    font-family: 'Roboto', sans-serif;
}
.advisory_bottom_desc .the_content {
    padding-left: 260px;
    position: relative;
    font-size: 24px;
}
.advisory_bottom_desc .the_content:before {
    position: absolute;
    left: 230px;
    width: 1px;
    height: 100%;
    background: #FFF;
    content: '';
    top: 0;
}
.bg_dark span, .bg_dark strong {
    color: #eb8123;
}
.static_num {
    font-size: 80px;
    position: absolute;
    width: 200px;
    top: 50%;
    left: 0;
    text-align: right;
    -webkit-transform: translate(0,-50%) scale(1);
    transform: translate(0,-50%) scale(1);
}
.bottom_desc {
    padding: 40px 0;
}
@media screen and (max-width: 1023px){
    .advisory_bottom_desc .the_content {
        padding-left: 0;
        font-size: 20px;
        text-align: center;
    }

    .static_num {
        width: 100%;
        text-align: center;
        position: static;
        margin: 20px auto;

    }
    .advisory_bottom_desc .the_content:before {
        display: none;
    }
}
.static_num b{
    font-size:22px;padding-top:15px;color:#fff;text-align:center;letter-spacing:4px;font-weight:bold;
}
/********************
shipping block
********************/
.shipping-template { transition: all 0.3s ease; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); position: relative; }
        .shipping-template .card-title { font-size: 1.5rem; position: relative; padding-bottom: 0.75rem; margin-bottom: 1rem; display: inline-block; }
        
        .title-underline {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #dc3545;
            display: block;
        }
        .shipping-template .corner-triangle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 80px 80px;
            border-color: transparent transparent #dc3545 transparent;
        }
        .shipping-template .corner-triangle i {
            position: absolute;
            bottom: -65px;
            right: -65px;
            font-size: 20px;
            color: #fff;
        }
        .shipping-template .btn-read-more {
            color: #dc3545;
            padding: 0;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }
        .shipping-template .btn-read-more i {
            margin-left: 0.5rem;
            transition: transform 0.3s;
        }
        .shipping-template .btn-read-more:hover i {
            transform: translateX(5px);
        }
        .shipping-template { transition: all 0.3s ease; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); position: relative; }


        .shipping-template .template-remove {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            border-radius: 50%;
            border: none;
            padding: 0;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .shipping-template .template-remove span {
            color: #fff;
            font-size: 20px;
            line-height: 1;
            margin-top: -2px;
        }
    
        .shipping-template:hover .template-remove {
            opacity: 1;
        }
    .corner-triangle {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 80px 80px;
        border-color: transparent transparent #dc3545 transparent;
    }
    .corner-triangle::after {
        content: "\f067";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        bottom: -65px;
        right: 16px;
        font-size: 16px;
        color: #fff;
    }
    .shipping-template .btn-read-more svg{ 
        margin-left: 10px;
        margin-top: 5px;
    }
    .shipping-template .template-actions {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        display: flex;
        gap: 10px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .shipping-template:hover .template-actions {
        opacity: 1;
    }
    .shipping-template .template-edit {
        width: 30px;
        height: 30px;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        right: 49px;
        top: 10px;
        color: #fff;
    }
    .shipping-template .template-edit i {
        color: #fff;
        font-size: 16px;
    }

/* Swiper Slider Dialog Styles */
.cke_dialog .slider-container {
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cke_dialog .slider-images {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cke_dialog .slider-images li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cke_dialog .slider-images img {
    max-width: 100px;
    height: auto;
    margin-right: 15px;
}

.cke_dialog .image-controls {
    margin-left: auto;
    display: flex;
    gap: 5px;
}

.cke_dialog .image-controls button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
}

.cke_dialog .image-controls .move-up,
.cke_dialog .image-controls .move-down {
    color: #666;
}

.cke_dialog .image-controls .slider-remove {
    color: #ff0000;
}

.cke_dialog .image-controls button:hover {
    background: #f0f0f0;
}
.swiper-container{overflow: hidden;}
.swiper-container {
    position: relative;
}

.swiper-edit-btn, .swiper-delete-btn {
    display: inline-block;
    margin: 0 5px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
.swiper-edit-btn:hover, .swiper-delete-btn:hover {
    color: #ffcc00;
}
.slider-images {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    max-height: 200px;
    overflow-y: auto;
}

.slider-images li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ddd;
}

.slider-images img {
    max-width: 100px;
    margin-right: 10px;
}

.image-controls {
    margin-left: auto;
}

.image-controls span {
    cursor: pointer;
    padding: 5px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.image-controls span:hover {
    background: #f0f0f0;
}

.slider-remove {
    color: red;
}

/*****************************
bg block
*****************************/
.block-bg {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.block-content {
    color: white;
    z-index: 1;
}

.block-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.block-subtitle {
    font-size: 24px;
    margin-bottom: 30px;
    color: #ffd700;
}

.block-button {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.block-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}



.block-edit, .block-remove {
    display: inline-block;
    background: rgba(255,255,255,0.8);
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 3px;
}
.counter-template {
    position: relative;
   
    margin: 20px;
    text-align: center;
}

.icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 2;
}

.counter-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.counter-icon img {
    width: 40px;
    height: 40px;
}

.counter-box {
    position: relative;
    margin-top: -40px;
    padding: 50px 20px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.counter-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.counter-text {
    font-size: 16px;
    color: #666;
}

.counter-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
}

.counter-edit, .counter-remove {
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
    color: #666;
}

.title-product-template {
    position: relative;
    
}

.title-product-template .banner-section {
    background-color: #f8f9fa;
    padding: 40px 0;
    position: relative;
}

.title-product-template .container-full {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.title-product-template .banner-content {
    display: flex;
    flex-wrap: wrap;
    
    justify-content: space-between;
}

.title-product-template .banner-text {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 30px;
}

.title-product-template .banner-text h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.title-product-template .banner-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 0;
}

.title-product-template .banner-stats {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-wrap: wrap;
}

.title-product-template .stat-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
    
}

.title-product-template .stat-item h2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.title-product-template .stat-item p {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
}

.title-product-template .title-product-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 5px;
}

.title-product-template .title-product-edit,
.title-product-template .title-product-remove {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
}

.title-product-template .title-product-edit:hover,
.title-product-template .title-product-remove:hover {
    color: #e30613;
}

@media (max-width: 991px) {
    .title-product-template .banner-text,
    .title-product-template .banner-stats {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .title-product-template .banner-text {
        margin-bottom: 30px;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .title-product-template .stat-item {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 10px;
    }
    
    .title-product-template .stat-item h2 {
        font-size: 20px;
    }
    
    .title-product-template .banner-text h1 {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .title-product-template .stat-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Products Section */
.products-section {
    padding: 50px 0;
}

.section-title {
    text-align: left;
    margin-bottom: 40px;
    color: #2d5c5c;
    font-size: 24px;
    text-transform: uppercase;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    background-color: #f5f0e5;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding:10px
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-header {
    padding: 15px;
}

.product-header h3 {
    font-size: 18px;
    color: #8b6e4e;
    margin-bottom: 5px;
}

.product-header p {
    font-size: 14px;
    color: #666;
}

.product-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.view-more {
    display: block;
    text-align: right;
    padding: 10px 15px;
    color: #2d5c5c;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s ease;
}

.view-more:hover {
    color: #1a3636;
}

.view-more i {
    margin-left: 5px;
}

/* Banner Section for Products Page */
.banner-section {
    background-color: #2d5c5c;
    color: white;
    padding: 50px 0;
    margin-bottom: 30px;
}

.banner-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.banner-text {
    flex: 1;
    min-width: 300px;
    padding-right: 30px;
}

.banner-text h1 {
    font-size: 36px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.banner-stats {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    min-width: 300px;
}

.stat-item {
    flex: 1 0 50%;
   
}

.stat-item h2 {
    font-size: 24px;
    margin-bottom: 5px;
    color: #fff;
}

/* Products Section */
.products-section {
    padding: 50px 0;
}

.section-title {
    text-align: left;
    margin-bottom: 40px;
    color: #2d5c5c;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    background-color: #f5f0e5;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-header {
    padding: 15px;
}

.product-header h3 {
    font-size: 18px;
    color: #3b6d6a;
    margin-bottom: 5px;
    font-weight: bold;
}

.product-header p {
    font-size: 14px;
    color: #666;
}

.product-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}



/* Product Detail Page */
.product-detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.product-detail-image {
    flex: 0 0 40%;
    max-width: 40%;
}

.product-detail-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-detail-info {
    flex: 0 0 55%;
    max-width: 55%;
}

.product-detail-title {
    font-size: 28px;
    color: #3b6d6a;
    margin-bottom: 15px;
    font-weight: bold;
}

.product-detail-description {
    margin-bottom: 20px;
    line-height: 1.6;
}

.product-detail-specs {
    margin-top: 30px;
}

.product-detail-specs h3 {
    font-size: 20px;
    color: #3b6d6a;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}

.product-detail-specs h3:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    height: 20px;
    width: 4px;
    background-color: #3b6d6a;
}

.product-detail-specs ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.product-detail-specs ul li {
    margin-bottom: 8px;
}

/* Related Products */
.related-products {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.related-products h2 {
    font-size: 24px;
    color: #3b6d6a;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}

.related-products h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #3b6d6a;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .banner-text h1 {
        font-size: 30px;
    }
    
    .stat-item h2 {
        font-size: 20px;
    }
    
    .product-detail-image,
    .product-detail-info {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .product-detail-image {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
    }
    
    .banner-text {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .stat-item {
        flex: 1 0 100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .section-title {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .banner-text h1 {
        font-size: 24px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .product-card {
        max-width: 320px;
        margin: 0 auto 20px;
    }
}

/* Custom Styles for Plastic Products */
.plastic-category-nav {
    background-color: #3b6d6a;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.plastic-category-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.plastic-category-nav ul li a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.plastic-category-nav ul li a:hover,
.plastic-category-nav ul li.active a {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Product Features Section */
.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.feature-item {
    flex: 1 0 calc(33.333% - 20px);
    min-width: 250px;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 40px;
    color: #3b6d6a;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 18px;
    color: #3b6d6a;
    margin-bottom: 10px;
    font-weight: bold;
}

.feature-description {
    font-size: 14px;
    color: #666;
}

/* Call to Action Section */
.cta-section {
    background-color: #3b6d6a;
    color: white;
    padding: 60px 0;
    text-align: center;
    margin: 60px 0;
}

.cta-title {
    font-size: 32px;
    margin-bottom: 20px;
}

.cta-description {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 30px;
}

.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #fff;
    color: #3b6d6a;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #f5f0e5;
    color: #3b6d6a;
}
.product-section {
    padding: 20px 0 50px 0;
   
}
.section-title {
    color: #2b6db6;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
    padding-left: 15px;
}
.product-card {
    background-color: #f5f0e5;
    border: none;
    margin-bottom: 0;
    padding: 10px;
    border: 1px solid #fff; /* Thêm viền trắng xung quanh */
    height: 100%;
    transition: all 0.3s ease;
}
.product-card:hover {
    background-color: #e8f5e9; /* Đổi màu nền thành xanh lá nhạt khi hover */
}
.product-header {
    padding: 15px 15px 5px;
}
.product-header h3 {
    font-size: 18px;
    color: #8b6e4e;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}
.product-header p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}
.product-content-block {
    display: flex;
    align-items: baseline;
    padding: 10px 15px 20px;
}
.product-image {
    flex: 1 0 auto; /* flex-grow: 1, flex-shrink: 0, flex-basis: auto */

    overflow: hidden;
    border-radius: 50%;
}
.view-more {
    display: flex;
    align-items: center;
    color: #2b6db6;
    text-decoration: none;
    font-size: 14px;
    flex: 0 1 auto; /* flex-grow: 0, flex-shrink: 1, flex-basis: auto */
    white-space: nowrap;
    transition: color 0.3s ease;
}
.view-more:hover {
    color: #1a3636;
}
.view-more i {
    margin-left: 5px;
    width: 16px;
    height: 16px;
    border: 1px solid #2b6db6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.view-more:hover i {
    background-color: #2b6db6;
    color: #fff;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
.col-md-3, .col-sm-6, .col-6 {
    padding-right: 0;
    padding-left: 0;
}

/* Banner Section Styles */
.banner-section {
    background-color: #2d5c5c;
    color: white;
    padding: 50px 0;
    margin-bottom: 0;
}
.banner-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.banner-text {
    flex: 1;
    min-width: 300px;
    padding-right: 30px;
}
.banner-text h1 {
    font-size: 36px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
.banner-stats {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    min-width: 300px;
}

.stat-item h2 {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 1199px) {
    .product-image {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 991px) {
    .product-content-block {
        flex-direction: column;
        align-items: flex-start;
    }
    .product-image {
        margin-bottom: 15px;
        margin-right: 0;
    }
    .view-more {
        margin-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .banner-text h1 {
        font-size: 28px;
    }
    .stat-item {
        flex: 1 0 100%;
        margin-bottom: 20px;
    }
    .section-title {
        font-size: 20px;
    }
    .product-header h3 {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .banner-section {
        padding: 30px 0;
    }
    .banner-text {
        padding-right: 0;
        margin-bottom: 20px;
    }
    .product-image {
        width: auto;
        height: auto;
    }
}
.product-label a{font-size: 12px;color: #fff;padding-bottom: 20px;}
.product-label {padding-bottom: 30px;}

.slider .slick-slide img {
	display: inline-block;
}
.slider > div {

	display:block; width:100%; padding: 10px 0;

	text-align: center;
	border:1px solid #e8e8e8;
}

/* Navigation */
.slider-nav { text-align: center; margin-bottom: 30px;}
.slider-nav > div {
	/*display:inline-block;*/
	/*width:80px; */margin: 0 5px; padding: 3px 0;
	text-align: center; font-size:2em;
	background: #fff; cursor: pointer;
	margin-top: 10px;
}
.slick-slide img {
	display: inline-block;
    max-width: 100%;
    height: auto;
}
.banner_pages .breadcrumb {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    background: transparent;
}
 .banner_pages .breadcrumb li {
    position: relative;
    margin-left: 1.3125rem;
}


.banner_pages .breadcrumb li>* {
    color: #323030;
    font-size: 1rem;
    font-weight: 400;
}
.banner_pages .breadcrumb li+li:before {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: -20px;
    margin: 0 5px;
    color: #323030;
    font-family: Material Icons;
    font-size: 1rem;
    content: "\f054";
    font-family: 'Font Awesome 6 Pro';
    font-size: 12px;
}

.owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next {
	background: #f5f5f5;
	width: 24px;
	height: 24px;
	color: #ccc;
	text-align: center;
	line-height: 24px;
}
.ttl-title-style h3{
    padding: 15px 0;
    color: #3c6d6a;
    font-weight: bold;
}
.content-pd-other{
    background: #ebe8e3;
    padding: 40px 0;
}
/* Dropdown submenu styles */
.dropdown-submenu {
    position: relative;
    padding: inherit;
  }
  
  .dropdown-submenu > a {
    display: block;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
  }
  
  .dropdown-submenu > a:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
  }
  
  .submenu-dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    
  }
  
  .dropdown-submenu:hover > .submenu-dropdown {
    display: block;
  }
  
  /* Ensure the main dropdown stays open when hovering submenu */
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
  
  .dropdown-menu .dropdown-submenu:hover > a {
    background-color: #f8f9fa;
  }
  .menu-icon-small {width: 80px;}
  .dropdown-toggle{white-space: inherit;}
  .nav-item {text-align: center;}
  .nomral-layout-blog .item{
    padding: 15px;
    border: 1px solid #d9d9d9;
    margin-bottom: 15px;
  }
  .nomral-layout-blog .box-text {
    padding:10px 0;
  }
  .nomral-layout-blog .box-text .title{
    font-size: 16px;
    color: #3c6d6a;
    font-weight: bold;
  }
  .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination > li {
    display: inline;
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #3c6d6a;
    border-color: #3c6d6a;
}
.container-margin-full {
    margin: 0 55px;
}
@media only screen and (max-width: 767px) {
    @media (max-width: 576px) {
        .container-margin-full {
            margin: 0 15px;
        }
        .title-quote {
           margin:0;
            padding: 10px;
        }
    }
}
.blog-short-info {padding: 40px 20px;}
.template-actions,.block-controls,.title-controls{display: none;}
.shipping-template:hover .template-actions {
    opacity: 0;
}
/* Card Template Styles */


.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.card-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-text {
    font-size: 16px;
}

.card-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
}



.card-remove {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    background-color: #ff5555;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}
/* Card Template Styles */
.card-template {
    position: relative;
    display: inline-block;
    
    padding: 20px;
    margin: 10px;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    background-color: #ffffff;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.card-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-text {
    font-size: 16px;
}

.card-controls {
    position: absolute;
    top: 5px;
    right: 5px;
}

.card-remove {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    background-color: #ff5555;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}
/********** new ************************/
.banner-home{position: relative}
.cloud-content {
    background: url(/upload/images/cloud2.png) center / cover repeat-x;
    height: 400px;
    width: 100%;
    position: absolute;
    bottom: -235px;
    z-index: 6;
}
/* SECTION TRÀ */
#tea-section {
    position: relative;
    width: 100%;
    height: calc(var(--hero-h) + var(--rise));
    overflow: hidden;
    padding-top: 200px;
    text-align: center;
    padding-bottom: calc(var(--rise) + 24px);
}
@media (max-width: 576px){
    #tea-section {

        padding-top: 120px;

    }
}
#tea-section .bg-video {
    position: absolute;
    top:0; left:0;
   /* width:100%; height:100%;*/
    left: 50%;
    width: 120%;
    height: 110%;
    transform: translateX(-50%);
    object-fit:cover;
    z-index:1;
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
}
#tea-section .overlay {
    position:absolute;
    top:0; left:50%;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    z-index:2;
    width: 120%;
    height: 110%;
    transform: translateX(-50%);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none; /* Cho phép click xuyên qua overlay */
}
#tea-section .content {
    position:relative;
    z-index:3;
    width:100%; height:100%;
}

/* 2 LY TRUNG TÂM */
.central-cups {
    position: absolute;
    top: 28%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 200px;
}
.central-cups img {
    position:absolute;
    width: 100%;

}


/* 5 CARD XUNG QUANH */
.item {
    position:absolute;
    width:200px;

    transform:translateY(20px);
}
.item1 { top:20%; left:5%; }
.item2 { top:20%; right:18%; }
.item3 { bottom:28%; left:10%; }
.item4 { bottom:28%; right:24%; }
.item5 { bottom:50px; left:40%; transform:translate(-50%, -20px); }

/* CARD CUSTOM */

.img-wrap {
    position: absolute;
    padding: 8px;
    background: #FFC107;
    border-radius: 8px;
    left: 44%;
    top: -121px;
    z-index: 1;
}
.img-wrap img {
    display:block;
    width: 200px;
    border-radius:4px;
}
.bubble-text {
    background: #E0F2E9;
    color: #0B6E4F;
    border-radius: 50px;
    padding: 80px 30px 20px 30px;
    position: relative;
    width: 400px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;

}
@media (max-width: 576px){
    .bubble-text {
        width: auto;
    }
    #tea-section .overlay {
        top:14px;
        pointer-events: none; /* Cho phép click xuyên qua overlay */
    }
    #tea-section .bg-video{
        top:14px;
    }
}

/* KEYFRAMES */
@keyframes scaleIn {
    to { opacity:1; transform:scale(1); }
}
@keyframes fadeInUp {
    to { opacity:1; transform:translateY(0); }
}

/* KHI IN-VIEW */
#tea-section.in-view .central-cups .cup1 {
    animation: scaleIn 0.6s ease-out forwards;
    animation-delay: 0.3s;
}
#tea-section.in-view .central-cups .cup2 {
    animation: scaleIn 0.6s ease-out forwards;
    animation-delay: 0.6s;
}
#tea-section.in-view .item1 { animation: fadeInUp 0.5s ease-out forwards; animation-delay: 0.8s; }
#tea-section.in-view .item2 { animation: fadeInUp 0.5s ease-out forwards; animation-delay: 1.0s; }
#tea-section.in-view .item3 { animation: fadeInUp 0.5s ease-out forwards; animation-delay: 1.2s; }
#tea-section.in-view .item4 { animation: fadeInUp 0.5s ease-out forwards; animation-delay: 1.4s; }
#tea-section.in-view .item5 { animation: fadeInUp 0.5s ease-out forwards; animation-delay: 1.6s; }
.video-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none; /* để không chặn click */
}
.video-bg iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* tỉ lệ 16:9 để cover full */
    width: 177.78vh;  /* = 100vh * 16/9 */
    height: 100vh;
}
.title-bg-video {
    position: relative;
    display: inline-block;
    background: #fff1d1;       /* màu nền vàng nhạt */
    border-radius: 30px;       /* bo góc */
    padding: 20px 40px;        /* khoảng trong: trên/dưới 20px, trái/phải 40px */
    box-sizing: border-box;
    overflow: visible;
    border: 10px solid #ffd668;
}


.img-title-starwberry,
.img-title-organe {
    position: absolute;
        /* kéo hơi cao để lơ lửng */
}

.img-title-starwberry {
    left: -28px;
    width: 60px;
    top: -47px;
}

.img-title-starwberry img {
    right: -30px;
    width: 60px;
    top: -29px;
    width: 100%;

}
.img-title-organe {
    right: -26px;
    top: -34px;
    width: 60px;          /* điều chỉnh theo ảnh thật */
}

.title-bg-video-1 {
    font-size: 24px;
    font-weight: 700;
    color: #00543C;            /* xanh đậm giống mockup */
    line-height: 1.2;
}

.title-bg-video-2 {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-top: 5px;
    line-height: 1.4;
}
/* ---- 1. Keyframes ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ---- 2. Ban đầu ẩn và chuẩn bị transform ---- */
.img-title-starwberry,
.img-title-organe {
    opacity: 1;
    transform: translateY(20px);

}

/* chỉnh trái/hai và phải như trước */
.img-title-starwberry { left: -10px; }
.img-title-organe   { right: -10px; }

/* ---- 3. Khi vào viewport: fadeInUp rồi bounce ---- */
.img-title-starwberry.visible,
.img-title-organe.visible {
    /* chạy 2 animation: fadeInUp 0.6s, sau đó bounce infinite */
    animation:
            fadeInUp 0.6s ease-out forwards,
            bounce    2s   ease-in-out 0.6s infinite;
}
.nkv-corner-drink{
    animation:
            fadeInUp 0.6s ease-out forwards,
            bounce    2s   ease-in-out 0.6s infinite;
}
/* Luôn căn giữa title */
.title-bg-video {
    display: inline-block;   /* để margin auto hoặc text-align center có hiệu lực */
    position: relative;
    margin: 0 auto;          /* căn giữa ngang */
}
@media (max-width: 576px){
    .title-bg-video {
        margin: 0px 15px;
    }
    .title-bg-video-2 {
        font-size: 13px;

    }
    .title-bg-video-1 {
        font-size: 20px;
    }
}

/* 1. Tablet trở xuống (<=1365px): ẩn ly trà sữa */
@media (max-width: 1165px) {
    .central-cups {
        display: none;
    }
    .item1 ,
    .item2 ,
    .item3 ,
    .item4 ,
    .item5 { bottom:unset; left:unset; top: unset;right: unset}
    .img-wrap {
        left: 50%;
        transform: translateX(-50%);
        top: -42px;

    }
    #tea-section{height: unset;}
    .item-card {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top:100px;
    }
    .item-card .item {
        position: relative !important;  /* override absolute */
        transform: none !important;
        opacity: 1 !important;
        width: calc(50% - 20px);        /* 2 items mỗi hàng */
        margin: 10px;
        display: flex;
        align-items: center;
        height: 300px;
        justify-content: center;
    }
}

/* 2. Tablet (768px – 1365px): 2 hàng các item */
@media (min-width: 768px) and (max-width: 1365px) {



}

/* 3. Mobile (<768px): 1 cột dọc */
@media (max-width: 767px) {
    .bubble-text{width: auto; padding: 40px 30px 20px 30px;font-size: 14px}
    .img-wrap img {

        width: 150px;

    }
    .img-wrap {

        top: -50px;
    }
    .item-card .item {
        height: 220px;
    }
}
@media (max-width: 500px) {
    .bubble-text{ padding: 20px 20px 20px 20px;font-size: 11px}
    .img-wrap img {

        width: 120px;

    }
    .img-wrap {

        top: -29px;
    }

    .central-cups {
       display: unset;
        position: unset;
    }
    .central-cups img {
        position: unset;
        width: 64%;
        margin-top: 20px;
    }
    .item-card {
        padding-top: 36px;
    }
    .item.item5{
        width: 60%;
    }
    .item5 .img-wrap {
        top: -50px;
    }
    .item5 .img-wrap img {
        width: 150px;
    }
}

/***** section 2 *****************/
.subtitle { background: #f9b233; color: #000; padding: 6px 12px; border-radius: 20px; font-size: 18px; }
.title-section  h1 {
    font-size: 40px;
    color: #034f4f;
    font-weight: bold;
    text-transform: uppercase;
    /* outline stroke effect */
    text-shadow: 0px 0px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 1px 0 #fff, 1px 1px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
@media (max-width: 767px) {
    .title-section  h1 {
        font-size: 20px;
    }
    .title-sub{font-size: 18px}
}
@media (max-width: 500px) {

    .subtitle{font-size: 12px}
}
.timeline .item-timeline  {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 22px;
}
.item-timeline:last-child {
    margin-bottom: 0;
}
.item-timeline.item-left {
    justify-content: flex-start;
}
.item-timeline.item-right {
    justify-content: flex-end;
}
.item-timeline .box {
    position: relative;
    background: #fff;
    border: 2px solid #53968f;
    border-radius: 50px;
    padding: 10px;
}
.item-timeline .inner {

    background: #a8dcc6;

    border-radius: 50px;
    padding: 20px;
}
.item-timeline .inner h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color:#005b0c;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.item-timeline.item-right .inner h3 {

    color: #005b0c;

}
.item-timeline .inner p {
    margin: 0;
    font-size: 14px;
    text-align: center;
    color: #131212;
    font-weight: 500;
}
/* Connector from bottom of each box */
.item-timeline.item-left .box::after {
    content: '';
    position: absolute;
    top: 100% ;
    left: calc(100% - 141px);
    width: 101px;
    height: 25px;
    background: #2d8c7f;
    clip-path: polygon(26% 0%, 101% 0%, 80% 100%, 0% 100%);
}
.item-timeline.item-right .box::after {
    content: '';
    position: absolute;
    top: 100% ;
    right: calc(100% - 177px);
    width: 100px;
    height: 28px;
    background: #2d8c7f;
    clip-path: polygon(0 0, 80% 0%, 100% 100%, 20% 100%);
}
.item-timeline:last-child .box::after {
    content: none;
}
/* Circle collage */


.circle-bg {
    position: absolute;
    top: -107px;
    left: -114px;
    width: 165%;
    height: 165%;
    object-fit: cover;

}

.rotator { position: absolute; inset: 0; animation: spin 20s linear infinite; }
.rotator .photo { position: absolute; width: 80px; height: 80px; object-fit: cover; border-radius: 50%; }
/* Orbit animation for images */
.circle-wrapper { position: relative; width: 400px; height: 400px; margin: auto; }
@media (min-width: 992px) and (max-width: 1190px) {
    .circle-wrapper {
        margin-right: 40px;
    }
}


.circle-wrapper .photo {
    position: absolute;
    top: 50%; left: 50%;
    width: 150px; height: 150px;           /* tăng kích thước gấp đôi */
    margin: -55px 0 0 -55px;            /* căn giữa với kích thước mới */
    border-radius: 8px;
    object-fit: cover;
    animation: orbit 40s linear infinite; /* chậm lại gấp đôi */
}
@keyframes orbit {
    from { transform: rotate(0deg) translate(200px) rotate(0deg); }
    to   { transform: rotate(360deg) translate(200px) rotate(-360deg); }
}
@media (max-width:1199px) {
    .circle-wrapper {
        margin: -80px 0 0 -80px;
    }
    .circle-bg {
        top: -90px;
        left: -95px;
        width: 165%;
        height: 165%;
   }
    .circle-wrapper {
        margin-left: 40px;

        width: 300px;
        height: 300px;

    }
    .circle-wrapper .photo { width: 120px; height: 120px; }
    @keyframes orbit { from { transform: rotate(0deg) translate(130px) rotate(0deg); } to { transform: rotate(360deg) translate(130px) rotate(-360deg); } }
}

@media (max-width: 991px) {
    .circle-wrapper {

        margin-top: 134px;
    }
}


@media (max-width: 576px) {
    .circle-wrapper {
        width: 220px;
        height: 220px;
        margin-left: 65px;
    }

    .circle-bg {
        top: -89px;
        left: -115px;

    }
    .circle-wrapper {
        width: 250px;
        height: 250px;
    }

    .circle-wrapper .photo {

        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -61px 0 0 -83px;

    }
}
.bg-timeline{

    position: relative;
}
/* Blender animation */
.blender {
    width: 100px;
    position: absolute;
    top: 186px;
    left: 50%;
    transform: translateX(-50%);
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}


/* Section 2 */
section.bg-timeline{
    position: relative;
    background: transparent;        /* không cần nền ở cha */
    z-index: 2;                      /* nổi hơn section phía trên */
    overflow: visible;               /* cho phép ::before tràn lên trên */
    padding-bottom: 150px;

}
.bg-timeline-sub{

    position: absolute;
    /* căn GIỮA theo tâm, không còn -96px cứng */
    left: 50%;
    transform: translateX(-50%);

    /* kéo lên để tạo phần lồi */
    top: calc(var(--rise) * -1);

    /* rộng hơn theo biến bleed (tự co giãn) */
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));

    /* nền của bạn */
    background: url('/upload/images/bg-timeline.jpg') center / cover no-repeat;

    /* chỉ bo MÉP DƯỚI của ::before để tạo đường cong ở mép TRÊN của section */
    border-bottom-left-radius: 100% var(--rise);
    border-bottom-right-radius: 100% var(--rise);
    border-top-left-radius: 100% 180px;

    border-top-right-radius: 100% 180px;
    /* bỏ 2 dòng dưới nếu không muốn bo trên */
    /* border-top-left-radius: 100% var(--rise);
       border-top-right-radius: 100% var(--rise); */

    pointer-events: none;
}
/* NỀN + CONG CHỈ Ở TRÊN, đặt hết ở ::before */

/* section.bg-timeline::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: calc(var(--rise) * -1);

   
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));

    background: url('/upload/images/bg-timeline.jpg') center / cover no-repeat;

  
    border-bottom-left-radius: 100% var(--rise);
    border-bottom-right-radius: 100% var(--rise);
    border-top-left-radius: 100% 180px;

    border-top-right-radius: 100% 180px;
   

    pointer-events: none;
    z-index: 1;
} */

/* nội dung nằm trên pseudo-element */
section.bg-timeline > .container{
    position: relative;
    z-index: 1;
}
/* Nội dung nằm trên nền ::before */
section.bg-timeline > .container{
    position: relative;
    z-index: 1;
}
/* Section wrapper */
/*.lecturer-hero{ position:relative; overflow:hidden; }*/

/* Title badge */
.title-badge{
    display:inline-block;
    background: #0c6a3d;
    color:#fff;
    padding:.6rem 1.25rem;
    border-radius:.65rem;
    font-weight:700;
    letter-spacing:.5px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* Glass content card with orange accent */
.glass-card{
    position:relative;
    background: rgba(255,255,255,.7);
    border-radius:.8rem;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(2px);
}
.glass-card:before{
    content:"";
    position:absolute; inset:0;
    border-radius:.8rem;
    background: linear-gradient(90deg, rgba(255,255,255,.0) 0, rgba(255,255,255,.08) 60%, rgba(255,255,255,.0) 100%);
    pointer-events:none;
}
.left-accent{
    position:absolute; left:1rem; top:1rem; bottom:1rem;
    width:8px; border-radius:8px;
    background: linear-gradient(180deg, #ffa94d, var(--orange));
    box-shadow:0 0 0 3px rgba(246,140,31,.15);
}
.glass-card p{ margin-bottom:.65rem; color:#2f3a3a }

/* Right side: photo with orange blob */
.photo-wrap{ position:relative; }

/* Orange blob behind the person */
.blob{
    position:absolute; right:0; top:50%; transform:translateY(-48%);
    width:78%; max-width:420px; height:auto; z-index:1; opacity:1;
    filter: drop-shadow(0 20px 25px rgba(0,0,0,.18));
}

/* Person/photo */
.person{
    position:relative; z-index:2; max-width:420px; width:86%;
    filter: drop-shadow(0 25px 30px rgba(0,0,0,.25));
}

/* Name badge */
.name-badge{
    position:absolute; z-index:3; left:8%; bottom:-12px;
    background: var(--green);
    border-radius:.9rem;
    padding:.7rem 1.25rem;
    color:#fff; font-weight:800; font-size:1.25rem; letter-spacing:.5px;
    box-shadow:0 10px 24px rgba(0,0,0,.2);
    white-space:nowrap;
}

/* Utilities for spacing on mobile */
@media (max-width: 991.98px){
    .name-badge{ left:0; font-size:1.05rem; }
    .title-badge{ font-size:1rem; }
    .photo-wrap{ margin-top:2rem; text-align:center; }
    .blob{ left:50%; transform:translate(-50%, -50%); width:86%; }
    .person{ width:80%; }
}

/***************** section lecture *****************/
/* ====== Stack on scroll ====== */
/* ===== Stack on scroll (chỉ active khi có class .stack-active) ===== */
/*.lecturer-hero{
    --sticky-top: 12vh; --card-w: 980px; --layer-gap: 28px;

}
.lecturer-hero, .lecturer-hero .container, .content-lecturer { overflow: visible; }
.lecturer-hero{
    padding-top: 100px;
    padding-bottom: calc(var(--rise) + 100px);
}
@media (max-width: 767px){
    .lecturer-hero{

        padding-bottom: 100px;
    }
}
.content-lecturer{
    position: relative;
    !* chiều cao sẽ do JS set để đủ không gian cuộn *!
}

!* Trạng thái mặc định: chưa sticky *!

.content-lecturer .img-lecturer{ position: sticky; top: var(--sticky-top); display:flex; }
.content-lecturer .img-lecturer img{
    width: 100%;        !* full bề rộng phần tử chứa *!
    max-width: none;    !* bỏ giới hạn *!
    height: auto;       !* giữ tỉ lệ *!
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(0,0,0,.28);
}

!* Xếp lớp nhẹ lúc ban đầu cho giống ảnh bạn gửi *!
.content-lecturer .img-lecturer:nth-child(1) img{ transform: translateY(calc(var(--layer-gap) * 2)); }
.content-lecturer .img-lecturer:nth-child(2) img{ transform: translateY(var(--layer-gap)); }
.content-lecturer .img-lecturer:nth-child(3) img{ transform: translateY(0); }

!* Khi section được kích hoạt *!
.content-lecturer.stack-active .img-lecturer{
    position: -webkit-sticky; !* Safari *!
    position: sticky;
    top: var(--sticky-top);
}

!* z-index để ảnh sau đè ảnh trước *!
!*.content-lecturer .img-lecturer:nth-child(1){ z-index:1; }
.content-lecturer .img-lecturer:nth-child(2){ z-index:2; }
.content-lecturer .img-lecturer:nth-child(3){ z-index:3; }*!
!* ====== Màu & nền tổng ====== *!
.quality-section{
    --green:#1d6a49;
    --orange:#ff8b0a;
    --peach:#fff3e9;
}

}*/
/* ================== LECTURER STACK ================== */
.lecturer-hero{
    /* các biến dùng cho JS và màu sắc */
    --sticky-top: 12vh;        /* vị trí sticky của card */
    --layer-gap: 28px;         /* khoảng chênh ban đầu giữa các card */
    --card-w: 1080px;          /* max-width của card */
    --green:#1d6a49;
    --orange:#ff8b0a;
}

.lecturer-hero,
.lecturer-hero .container,
.content-lecturer{ overflow: visible; }

.lecturer-hero{ padding: 100px 0; }
@media (max-width: 767px){
    .lecturer-hero{ padding-bottom: 20px ;  padding-top: 50px; }
}
/* vùng chứa stack */
.content-lecturer{ position: relative; }

/* khi được JS gắn .stack-active thì các card sticky */
.content-lecturer.stack-active .stack-card{
    position: sticky;
    top: var(--sticky-top);
}

/* ===== Card cơ bản ===== */
.stack-card{
    width: 80%;
    margin-inline: auto;
    border-radius: 20px;
    padding: clamp(18px, 2.4vw, 28px);
    background: url("/upload/images/bg-giang-vien.jpg") center/cover no-repeat;
    box-shadow: 0 22px 48px rgba(0,0,0,.18);
    transform: translateY(0) scale(0.985);           /* JS sẽ cập nhật khi cuộn */
    transition: transform .2s ease-out;
}

/* ===== 2 cột desktop: chữ 2/3 – hình 1/3 ===== */
.stack-card .cols{
    display: grid;
    grid-template-columns: 1fr 1fr;                  /* chữ 2 phần, hình 1 phần */
    grid-template-areas: "text image";
    gap: clamp(16px, 2.6vw, 36px);
    align-items: center;
}
.text-col{ grid-area: text; }
.image-col{ grid-area: image; }

/* Card đảo (hình trái – chữ phải) nhưng tỷ lệ vẫn 1/3 : 2/3 */
.stack-card.reverse .cols{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image text";
}

/* ===== Ảnh ===== */
.image-col img{
    width: 100%;
    height: auto;                 /* nếu muốn cắt theo chiều cao: height: 100%; object-fit: cover; */
    display: block;

    object-fit: cover;
}

/* ===== Chữ, tiêu đề nền xanh, khung mờ + vạch đứng ===== */
.title-badge{
    display:inline-block;
    background: var(--green);
    color:#fff;
    font-weight:800;
    letter-spacing:.3px;
    padding:.5rem .9rem;
    border-radius:.6rem;
    margin-bottom:14px;
}

.card-heading{
    margin: 0 0 8px;
    font-weight: 800;
    color:#133e2d;
}

.text-box{ position: relative; }

.text-box__inner{
    position: relative;
    background: rgba(255,255,255,.72);  /* nền trong suốt */
    backdrop-filter: blur(4px);
    border-radius: 14px;
    padding: 18px 18px 18px 28px;       /* chừa chỗ cho vạch */
    line-height: 1.6;
    color:#2a2a2a;
    font-size: 18px;
    text-align: justify;
}

/* vạch đứng cao theo khối chữ */
.text-box__inner::before{
    content:"";
    position:absolute;
    left:12px; top:14px; bottom:14px;
    width:4px; background: var(--orange);
    border-radius: 2px;
}

/* ===== Mobile: tắt sticky & về 1 cột (hình trên – chữ dưới) ===== */
@media (max-width: 767.98px){
    .content-lecturer{ height: auto !important; }     /* để JS khỏi giữ chiều cao */
    .content-lecturer.stack-active .stack-card{ position: static; }
    .stack-card{ margin-bottom: 22px; transform: none !important;width: 90%;}

    .stack-card .cols,
    .stack-card.reverse .cols{
        grid-template-columns: 1fr;
        grid-template-areas:
      "image"
      "text";
        gap: 14px;
    }
}
@media (max-width: 450px){

    .stack-card{/* background: none;*/box-shadow: none;width: 95%;}
    .text-box__inner{padding: 0;background: none;}
    .col.text-col{padding:0;}
    .text-box__inner::before{content: none;}

}


/**!* Tiêu đề + badge *!**/
 .quality-title{
     font-weight:800; letter-spacing:.5px; color:var(--green);
 }
.quality-badge {
    display: inline-block;
    background: #ffd08a;
    color: #185c3e;
    font-weight: 700;
    padding: .45rem .9rem;
    border-radius: .6rem;
}
/* ---------- Khung video kiểu giấy + băng keo ---------- */
.paper-frame{
    position:relative; max-width:520px;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
    margin-left: .25rem;
}
.video-frame{
    position:relative; background:#ddd center/cover no-repeat;
    aspect-ratio: 16/9; /* nếu cần hỗ trợ rộng hơn: dùng padding-top trick */
    border-radius: 12px;
    border: 6px solid #ffe9c7;
    outline: 3px dashed #263d35;
    outline-offset: -14px;
    overflow:hidden;
    cursor:pointer;
}
.play-btn{
    position:absolute; inset:0; margin:auto; width:72px; height:72px;
    border:0; background:transparent; display:grid; place-items:center;
}
.play-btn:focus{ outline: none; }
.paper-frame .tape{
    position:absolute; width:120px; height:34px; background:#ffe6a3;
    opacity:.95; filter: drop-shadow(0 3px 3px rgba(0,0,0,.1));
}
.paper-frame .tape-1{ left:-16px; top:-18px; transform:rotate(-12deg); }
.paper-frame .tape-2{ right:-18px; bottom:-14px; transform:rotate(10deg); }

/* ---------- Grid chỉ số (4 ô) ---------- */
.metrics-grid{ --radius:32px; --border:2px; --pad:26px; }

.metric-card .card-inner{
    position:relative;
    min-height: 220px;
    border: var(--border) solid var(--green);
    border-radius: var(--radius);
    background: var(--peach);
    padding: var(--pad);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    transition: background .35s ease, color .35s ease, transform .25s ease;
    background-position:center; background-size: cover; background-repeat:no-repeat;
}
.metric-card:hover .card-inner{
    background-image: var(--hover-bg);           /* lấy từ inline style */
    color:#0f2d21;
    transform: translateY(-2px);
}
.metric-card .card-inner:after{                /* phủ nền mờ để chữ nổi khi hover */
    content:\"\"; position:absolute; inset:0; border-radius: var(--radius);
    background: transparent; transition: background .35s ease;
}
.metric-card:hover .card-inner:after{
    background: rgba(255,255,255,.65);
}

.metric-icon{ width:56px; height:56px; margin-bottom:.75rem; }
.metric-title{ font-weight:700; color:#223a33; }
.metric-value{ margin-top:.25rem; font-weight:800; font-size:2rem; color:var(--orange); }

/* mobile spacing */
@media (max-width: 575.98px){
    .metric-card .card-inner{ min-height: 180px; }
}
.paper-frame{ position:relative; max-width:520px; filter:drop-shadow(0 14px 28px rgba(0,0,0,.18)); }
.video-frame{
    position:relative;
    /* Tạo tỷ lệ 16:9 – dùng cả 2 cách để hỗ trợ trình duyệt cũ */
    aspect-ratio: 16 / 9;
    padding-top: 56.25%;
    background:#000;             /* nền đen sau khi iframe load */
    border-radius:12px;
    border:6px solid #ffe9c7;
    outline:3px dashed #263d35;
    outline-offset:-14px;
    overflow:hidden;
}
.video-frame iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
}

/* ===== Khung giấy + video ===== */
.paper-frame{
    --tape-w: 120px;
    --tape-h: 34px;

    position: relative;
    max-width: 560px;                 /* chỉnh tùy layout */
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
    margin: 0;
}

.video-frame{
    position: relative;
    aspect-ratio: 16 / 9;             /* fallback: dùng padding-top:56.25% nếu cần */
    background:#000;
    border-radius: 12px;
    border: 6px solid #ffe9c7;
    outline: 3px dashed #263d35;
    outline-offset: -14px;
    overflow: hidden;
}
.video-frame iframe{
    position:absolute; inset:0;
    width:100%; height:100%; border:0;
}

/* ===== 4 miếng tape ===== */
.tape{
    position:absolute;
    width: var(--tape-w);
    height: var(--tape-h);
    background: #ffe6a3;
    opacity:.96;
    box-shadow: 0 4px 6px rgba(0,0,0,.12);
    border-radius: 6px;
    pointer-events:none;
    /* vân giấy nhẹ */
    background-image:
            repeating-linear-gradient( 90deg, rgba(255,255,255,.18) 0, rgba(255,255,255,.18) 6px, transparent 6px, transparent 12px);
    mix-blend-mode: multiply;
}
/* mép răng cưa nhẹ ở 2 đầu */
.tape::before, .tape::after{
    content:"";
    position:absolute; top:0; bottom:0; width:14px;
    background: inherit;
    filter: brightness(.98);
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
    opacity:.9;
}
.tape::before{ left:-6px; transform: rotate(-2deg); }
.tape::after { right:-6px; transform: rotate(2deg); }

/* vị trí 4 góc */
.tape-tl{ left:-16px; top:-18px; transform: rotate(-12deg); }
.tape-tr{ right:-18px; top:-16px; transform: rotate(12deg); }
.tape-bl{ left:-14px; bottom:-16px; transform: rotate(8deg); }
.tape-br{ right:-16px; bottom:-20px; transform: rotate(-10deg); }

/* responsive một chút */
@media (max-width: 575.98px){
    .paper-frame{ max-width: 100%; }
    .paper-frame{ --tape-w: 92px; --tape-h: 28px; }
}

/* Vùng video nằm đúng “ô trắng” của khung */
/*
.frame-video .video-slot{
    position: absolute;
    !* các khoảng cách vào trong – CHỈNH theo ảnh khung của bạn *!
    !* Bạn có thể tinh chỉnh các % này để khớp tuyệt đối *!
    inset: var(--inset-top, 9%) var(--inset-right, 10%) var(--inset-bottom, 22%) var(--inset-left, 12%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.frame-video iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
*/
/* palette */
.quality-section{ --green:#1e6a49; --peach:#fff4ea; --orange:#ff8b0a; }

/* Hàng card dùng BS, chỉ tinh chỉnh vertical rhythm nhẹ */
.stats-row > [class*="col-"] { /* đảm bảo không bị “dày” */
    display: flex;               /* để pill cao bằng nhau khi text lệch dòng */
}
.stats-row .stat-pill { width: 100%; margin:0 65px;}

/* Pill */
.stat-pill{
    position: relative;
    border-radius: 80px;
    border: 2px solid var(--green);
    background: #fef8f0;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    isolation: isolate;                 /* lớp hover nằm dưới nội dung */
}

/* Lớp nền mặc định + lớp ảnh hover */
.stat-pill::before{
    content:""; position:absolute; inset:0; z-index:0; background: var(--peach);
}
.stat-pill::after{
    content:""; position:absolute; inset:0; z-index:0;
    background-image: var(--hover-bg);
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.04);
    transition: opacity .35s ease, transform .35s ease;
}
.stat-pill:hover::after{ opacity:1; transform: scale(1.02); }

/* scrim cho chữ/icon nổi khi hover có ảnh */
.stat-body::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: transparent; transition: background .35s ease;
}
.stat-pill:hover .stat-body::before{ background: rgba(255,255,255,.7); }

/* Nội dung */
.stat-body{
    position: relative; z-index:1;
    min-height: 210px;              /* mảnh hơn */
    padding: 20px 20px 22px;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    text-align:center; width:100%;
}
.stat-title{ font-size:14px; font-weight:700; color:#223a33; padding-top: 30px;height: 77px;overflow: hidden;}
.stat-icon{ width:100px; height:100px; margin:6px 0 8px; object-fit:contain; }
.stat-value{ font-weight:800; font-size:3rem; color:var(--orange); }

/* Mobile: 1 cột, spacing dọc nhẹ */
/*@media (max-width: 575.98px){
    .stat-body{ min-height: 185px; padding: 18px; }
    .stat-icon{ width:48px; height:48px; }
    .stat-value{ font-size:1.7rem; }
}*/
/* 1) Cho ảnh hiện rõ 100% khi hover */
.stat-pill:hover .stat-body::before{
    background: transparent !important;   /* bỏ scrim */

}
.stat-pill:hover .stat-icon{visibility: hidden;}
/* 2) (Tuỳ chọn) bỏ luôn nền peach phía dưới khi hover để khỏi “lót” thêm một lớp */
.stat-pill:hover::before{
    background: transparent !important;
}

/* 3) (Tuỳ chọn) đừng giảm độ rõ của ảnh khi hover */
.stat-pill::after{ opacity: 0; transform: none; }
.stat-pill:hover::after{ opacity: 1; transform: none; /* hoặc scale(1.005) rất nhẹ */ }


@media (max-width: 1439px){
    .stats-row .stat-pill {
        margin: 0 30px;
    }
}
@media (max-width: 1199px){
    .stats-row .stat-pill {
        margin: 0 20px;
    }
}
@media (max-width: 991px){
    .stats-row .stat-pill {
        margin: 0 65px;
    }
}
@media (max-width: 768px){
    .stats-row .stat-pill {
        margin: 0 30px;
    }
}
@media (max-width: 576px){
    .stats-row .stat-pill {
        margin: 0 10px;
    }
}

/* Section 2 */
.section-4 {
    position: relative;
    background: transparent;
    z-index: 2;
    overflow: visible;
    padding-top: 200px;
    margin-bottom: 200px;
}
@media (max-width: 767px){
    .section-4 {
        padding-top: 100px;
    }
}
.section-4-bg{
    position: absolute;
    /* căn GIỮA theo tâm, không còn -96px cứng */
    left: 50%;
    transform: translateX(-50%);

    /* kéo lên để tạo phần lồi */
    top: 0;
    bottom: 0;
    /* rộng hơn theo biến bleed (tự co giãn) */
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));

    /* nền của bạn */
    background: url('/upload/images/bg-section5.jpg') center / cover no-repeat;

    /* chỉ bo MÉP DƯỚI của ::before để tạo đường cong ở mép TRÊN của section */
    border-bottom-left-radius: 100% var(--rise);
    border-bottom-right-radius: 100% var(--rise);
    border-top-left-radius: 100% var(--rise);

    border-top-right-radius: 100% var(--rise);

    /* bỏ 2 dòng dưới nếu không muốn bo trên */
    /* border-top-left-radius: 100% var(--rise);
       border-top-right-radius: 100% var(--rise); */

    pointer-events: none;
}
/* NỀN + CONG CHỈ Ở TRÊN, đặt hết ở ::before */

/* .section-4::before{
    content: "";
    position: absolute;
    
    left: 50%;
    transform: translateX(-50%);

   
    top: 0;
    bottom: 0;
    
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));

  
    background: url('/upload/images/bg-section5.jpg') center / cover no-repeat;

   
    border-bottom-left-radius: 100% var(--rise);
    border-bottom-right-radius: 100% var(--rise);
    border-top-left-radius: 100% var(--rise);

    border-top-right-radius: 100% var(--rise);

    pointer-events: none;

} */
/********************

********************/
:root{
    --mint:#BFE8D0;
    --green:#236908;
    --green-dark:#0f7b53;
    --orange:#f39c12;
    --gap:32px;
    --card-w:320px;
    --curve-h: 140px;   /* độ cao “đường cong” */
    --bleed:  220px;    /* thò ra 2 bên để không hở viền */
}

.courses-section{
    position: relative;
    background: var(--mint);
    padding: 80px 16px 180px;
   /* overflow: hidden;*/
    margin-top: calc(-100px - var(--rise));
    padding-top: calc(200px + var(--rise));;
}

.courses-section-bg{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top: 100%;                              /* nằm ngay dưới mép đáy */
    width: calc(100% + var(--bleed));       /* rộng hơn để không lộ góc */
    height: var(--curve-h);                 /* chiều cao cong */
    background: #BFE8D0;                    /* cùng màu với section */
    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    pointer-events:none;
    z-index: 1;                     
}

/* .courses-section::after{
    content:"";
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top: 100%;                             
    width: calc(100% + var(--bleed));       
    height: var(--curve-h);                 
    background: #BFE8D0;                    
    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    pointer-events:none;
    z-index: 1;                             
} */
@media (max-width: 767px){

    .courses-section{
        padding-bottom: 30px;
        padding-top: 100px ;
    }
    .courses-section::after {
        height: 65px;

    }
}

/* Tiêu đề + mô tả */
.title-wrap{
    text-align:center;
    margin-bottom: 28px;
    position: relative;
}
.title-pill{
    display:inline-block;
    background: var(--green);
    color:#fff; padding:12px 28px;
    border-radius:10px;
    font-weight:800; letter-spacing:.6px;
    font-size: clamp(18px, 3vw, 28px); text-transform: uppercase;
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
.subtitle-pill{
    max-width: 850px;
    margin:40px auto 40px;
    text-align: justify;
    color:#1b3a2f; font-size: clamp(14px,1.8vw,16px); line-height:1.6;
}

/* Trang trí nổi 2 bên */
.decor{
    position: absolute; width: 140px; pointer-events:none; z-index:1;
    animation: floatY 4.5s ease-in-out infinite;
}
.decor-blender{ left: 40px; top: 40px; transform: rotate(-12deg); animation-delay: -.8s; }
.decor-strawberry{ right: 40px; top: 60px; animation-delay: -2s; }
@keyframes floatY{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(-14px)} }

/* Tabs */
.tabs{ display:flex; justify-content:center; gap:14px; margin:4px 0 32px; flex-wrap:wrap; }
.tab-btn{
    appearance:none; border:none; cursor:pointer;
    padding:10px 18px; min-width: 180px;
    border-radius:999px; font-weight:700;
    transition: transform .15s ease, box-shadow .15s ease, background .2s;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    background:#e6f6ee; color: var(--green-dark); border:2px solid var(--green);
}
.tab-btn.is-active{ background: var(--orange); color:#fff; border-color: var(--orange); }
.tab-btn:hover{ transform: translateY(-1px); }

/* Panels + Grid */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.grid{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--gap); align-items:stretch; justify-items:center;
}
@media (max-width: 1024px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

/* Card sp */
.course-card{
   width:100%; max-width: var(--card-w);
    /* background:#fff; border-radius:16px; padding:12px 12px 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
    border: 4px solid #e5f5ea;*/
    transition: transform .2s ease, box-shadow .2s ease;
}
.course-card:hover{ transform: translateY(-4px); box-shadow:0 20px 56px rgba(0,0,0,.15); }
.course-card img{ width:100%; height:auto; display:block; border-radius:8px; }

/* bo cong đáy section */
.waves{
    position:absolute; left:0; right:0; bottom:0; height:200px; z-index:1; pointer-events:none;
}
.waves svg{ display:block; width:100%; height:100%; }
@media (max-width: 576px){
    .courses-section {

        margin-top: calc(-192px - var(--rise));
        padding-top: calc(100px + var(--rise));
    }

    .hidden-sm{display: none;}
}
@media (max-width: 1439px){
    .decor-blender{left: -20px;}
    .decor-strawberry{right: -20px;}
}
@media (max-width: 1199px){
    .decor-blender{top: -70px;}
    .decor-strawberry{top: -70px;}
}
@media (max-width: 991px){
    .decor-blender{display: none}
    .decor-strawberry{display: none}
}

:root{
    /* màu + layout (đặt prefix để khỏi đụng) */
    --nkv-green:#0e7b54;
    --nkv-mint:#a8dcc6;

    /* Vùng “màn hình” bên trong khung (theo % kích thước ảnh khung) */
    --nkv-screen-top: 26%;
    --nkv-screen-left: 24%;
    --nkv-screen-width: 53%;
    --nkv-screen-height: 51%;
}

/* Section */
.nkv-video-hero{background: url(/upload/images/bg-section5.jpg) center / cover no-repeat; padding:280px 16px 200px; position:relative; overflow:hidden}
@media (max-width:767px){
    .nkv-video-hero{padding:140px 16px 150px; }
}
.nkv-container{max-width:1000px; margin:0 auto; position:relative}

/* Title */
.nkv-title{
    text-align:center; color:#fff; margin:0 0 28px;
    font-weight:800; line-height:1.25; letter-spacing:.4px;
    font-size:clamp(22px,3.5vw,40px); text-transform:uppercase;
    text-shadow:
            0 2px 0 rgba(0,0,0,.18),      /* viền sát chữ */
            0 6px 12px rgba(0,0,0,.28),   /* bóng mềm chính */
            0 18px 32px rgba(0,0,0,.20);  /* bóng xa để nổi khối */
}
@media (max-width:640px){
    .nkv-title{
        text-shadow:
                0 1px 0 rgba(0,0,0,.18),
                0 4px 10px rgba(0,0,0,.25);
    }
}
/* Stage (khung + màn hình) */
.nkv-stage{position:relative; width:min(1050px,100%); margin:0 auto;}
.nkv-frame{display:block; width:100%; height:auto}
.nkv-screenBtn{
    position:absolute;
    top:var(--nkv-screen-top); left:var(--nkv-screen-left);
    width:var(--nkv-screen-width); height:var(--nkv-screen-height);
    display:block; padding:0; border:0; background:transparent; cursor:pointer;
    border-radius:16px; overflow:hidden; box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.nkv-screenBtn:hover img{ transform:scale(1.01) }
#nkv-screenImg{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease }

/* Thumbbar (bo tròn giống demo) */
.nkv-thumbbar{
    margin:0px auto 0; padding:14px;
    background:#ffe7bf; border:15px solid #f3b05e;
    border-radius:999px; display:flex; align-items:center; gap:10px;
    width:min(840px, 100%); box-shadow:0 14px 36px rgba(0,0,0,.15);
}
.nkv-nav{
    width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
    background:#1aa36f; color:#fff; display:grid; place-items:center; flex:0 0 auto;
    transition:transform .15s ease, filter .15s ease; user-select:none;
}
.nkv-nav:hover{ transform: translateY(-2px); filter:brightness(1.05) }
.nkv-nav[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }

.nkv-thumbs{
    display:flex; gap:20px; overflow:auto hidden; scroll-behavior:smooth;
    flex:1 1 auto; padding:4px; scroll-snap-type:x proximity;
}
.nkv-thumb{
    flex:0 0 150px; height:86px; border-radius:12px; overflow:hidden; padding:0; border:0; cursor:pointer;
    background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); scroll-snap-align:center;
    outline: 3px solid transparent; transition: outline-color .15s ease, transform .15s ease;
}
.nkv-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.nkv-thumb:hover{ transform: translateY(-2px) }
.nkv-thumb.is-active{ outline-color:#1aa36f }

/* Modal */
.nkv-yt-modal[hidden]{ display:none }
.nkv-yt-modal{ position:fixed; inset:0; z-index:999 }
.nkv-yt-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6) }
.nkv-yt-dialog{
    position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
    width:min(960px, 92vw); background:#000; border-radius:12px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.nkv-yt-close{
    position:absolute; right:8px; top:4px; z-index:2;
    width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; font-size:28px; line-height:1;
    background:#fff; color:#000; opacity:.9
}
.nkv-yt-embed{ position:relative; padding-top:56.25%; } /* 16:9 */
.nkv-yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Mobile fine-tune (nếu khung khác tỉ lệ) */
@media (max-width:640px){

    .nkv-thumb{ flex-basis: 130px; height:78px; }

}
@media (max-width:450px){

    .nkv-nav{
        display: none;
    }
    .nkv-thumb {
        flex-basis: auto;
        height: 40px;
    }
    .nkv-thumbbar{padding:10px}
    .nkv-thumbs{gap: 12px;}
}
.nkv-badge-wrap{ text-align:center; margin: 6px 0 24px; }
.nkv-pill{
    display:inline-block;
    background:#f3a64d;           /* cam */
    color:#151515;
    font-weight:800;
    letter-spacing:.4px;
    padding:10px 18px;
    border-radius:10px;           /* bo vuông nhẹ như mock */
    box-shadow:
            0 2px 0 rgba(0,0,0,.18),
            0 8px 18px rgba(0,0,0,.18);
    text-transform:uppercase;
    font-size: clamp(13px, 1.5vw, 16px);
}

/* máy sinh tố nổi lên xuống */
.nkv-float{
    position:absolute; z-index:4; pointer-events:none;
    animation: nkvFloatY 4.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.nkv-float-blender{
    width: clamp(90px, 12vw, 110px);
    right:70px;
    top: 170px;
}
@media (max-width:959px){
    .nkv-float-blender {
        right: 7%;
        top: 150px;
        width: 96px;
    }
}
@media (max-width:859px){
    .nkv-float-blender {
        right: 7%;
        top: 30%;
        width: 96px;
    }
}
@media (max-width:640px){
    .nkv-float-blender {
        right: 7%;
        top: 30%;
        width: 60px;
    }
}
@keyframes nkvFloatY{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-14px); }
}

/* ly trà sữa góc dưới trái */
.nkv-corner-drink{
    position:absolute; z-index:3; pointer-events:none;
    left: clamp(8px, 3vw, 36px);
    bottom: 0px;                            /* hơi tràn xuống để tự nhiên */
    width: clamp(120px, 18vw, 270px);

}

/* tránh che UI trên màn nhỏ */
@media (max-width:640px){

    .nkv-corner-drink{ width: 150px; left: 8px; bottom: -6px; }
}

/*****************
***************/
:root{
    --nkv-bg:#e8f4ef;
    --nkv-green:#0e7b54;
    --nkv-orange:#f3a64d;
}

.nkv-students{ background: #a8dcc6; padding: 200px 16px 200px; position: relative; }


.nkv-students::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #a8dcc6;
}
@media (max-width:767px){

    .nkv-students {
        padding: 30px 16px 100px;

    }
    .nkv-students::before {
        height: 86px;
        top: -56px;

    }
}
/*.nkv-students:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-bottom-left-radius: 100% 180px;
    border-bottom-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #e6f1ec;
}*/
.none-peu.nkv-students::before,.none-peu.nkv-students::after {content: unset;}
.nkv-container{ max-width: 1180px; margin: 0 auto; }

/* Title (tận dụng style cũ + đổ bóng) */
.nkv-title{
    text-align:center; margin:0 0 10px; color:#fff;
    font-weight:900; text-transform:uppercase; letter-spacing:.8px;
    font-size: clamp(22px, 3.2vw, 36px);
}
.nkv-title--shadow{
    text-shadow:
            0 2px 0 rgba(0,0,0,.14),
            0 6px 12px rgba(0,0,0,.18),
            0 18px 32px rgba(0,0,0,.12);
}
.nkv-badge-wrap{ text-align:center; margin-bottom: 60px; margin-top: 20px; }
.nkv-pill{
    display:inline-block; background: var(--nkv-orange); color:#0c0c0c;
    font-weight:800; padding:8px 16px; border-radius:10px; font-size:13px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* === Slider trung tâm === */
.nkv-homes-slide-pd{ position:relative; }
/* Container của swiper cần relative để định vị mũi tên theo nó */
.nkv-swiper-center{ position: relative; overflow: visible; padding: 8px 0 16px; }

.nkv-card{
    width: 100%; height: 100%; border-radius: 14px; overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    background:#fff;
}
.nkv-card img{ width:100%; height:100%; display:block; object-fit:cover; }

/* Kích thước slide: chính ở giữa lớn nhất, hai bên nhỏ dần nhờ scale */
.nkv-swiper-center .swiper-slide{
    width: clamp(220px, 28vw, 340px);        /* base width, auto width giúp center đẹp */
    aspect-ratio: 3/4;
    transform-origin: center bottom;
    /* scale theo khoảng cách tới center (được JS set vào --nkv-dist) */
    transform: scale(clamp(.72, calc(1 - var(--nkv-dist, 0) * .12), 1));
    opacity: clamp(.45, calc(1 - var(--nkv-dist, 0) * .18), 1);
    transition: transform .35s ease, opacity .35s ease, filter .35s ease;
    filter: blur(calc(var(--nkv-dist, 0) * 0.2px));
}

/* slide active nổi bật hơn 1 chút */
.nkv-swiper-center .swiper-slide.swiper-slide-active{
    box-shadow: 0 28px 60px rgba(0,0,0,.22);
}

/* Nút mũi tên đặt trên ảnh trung tâm */
.nkv-prev{ left: 8%; }           /* đặt “trên ảnh” – điều chỉnh % nếu ảnh hẹp hơn */
.nkv-next{ right: 8%; }
.nkv-arrow{
    position:absolute; z-index:20;
    width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
    display:grid; place-items:center;
    background:#fff; color:#0f8a5f;
    box-shadow:0 10px 26px rgba(0,0,0,.22);
    pointer-events:auto;

    /* KHÔNG set transform từ JS nữa; luôn căn giữa bằng CSS */
    --nkv-arrow-scale: 1;
    transform: translate(-50%, -50%) scale(var(--nkv-arrow-scale));
    transition: transform .15s ease, filter .15s ease;
}
.nkv-arrow:hover{
    --nkv-arrow-scale: 1.03;
    filter: brightness(1.03);
}
.nkv-arrow[disabled]{ opacity:.5; cursor:not-allowed; --nkv-arrow-scale: 1; }

@media (max-width:640px){
    .nkv-arrow{ width:42px; height:42px; }
}

/******************

****************
 */
/* ===== Scroll review – giữ nguyên class gốc, scope theo .ss-homes-rate ===== */
.ss-homes-rate { padding-top: 100px ; }
@media (max-width:767px){
    .ss-homes-rate { padding-top: 50px ; }
}

.ss-homes-rate .homes-rate-scroll { position: relative; }
.ss-homes-rate .homes-rate-scroll-box{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* mỗi cột là 1 “khung” có overflow hidden */
.ss-homes-rate .homes-rate-scroll-wrap{
    position: relative;
    height: 560px;              /* chỉnh cao theo bố cục bạn muốn */
    overflow: hidden;
}

/* bên trong wrap, mình sẽ bọc lại bằng .marquee để chạy vô hạn */
.ss-homes-rate .marquee{
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* mặc định chạy lên; thời gian set động bằng style="--dur:s" */
    animation: rvwScrollUp var(--dur, 28s) linear infinite;
}
/* hover vào CỘT nào thì cột đó dừng chạy */
.ss-homes-rate .homes-rate-scroll-wrap:hover .marquee{
    animation-play-state: paused;
}

@keyframes rvwScrollUp{
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* vì đã nhân đôi nội dung */
}

/* Card ảnh */
.ss-homes-rate .homes-rate-scroll-item .img{
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.ss-homes-rate .homes-rate-scroll-item .img-inner{ display:block; }
.ss-homes-rate .homes-rate-scroll-item img{
    display:block; width:100%; height:auto; object-fit:cover;
}

/* Responsive */
@media (max-width: 1024px){
   /* .ss-homes-rate .homes-rate-scroll-box{ grid-template-columns: repeat(3,1fr); }*/
}
@media (max-width: 768px){
    /*.ss-homes-rate .homes-rate-scroll-box{ grid-template-columns: repeat(2,1fr); }*/
    .ss-homes-rate .homes-rate-scroll-wrap{ height: 480px; }
}
@media (max-width: 520px){
    /*.ss-homes-rate .homes-rate-scroll-box{ grid-template-columns: 1fr; }*/
    .ss-homes-rate .homes-rate-scroll-wrap{ height: 420px; }

}
.homes-rate-scroll {
    background-color: #D9D9D9;
    -webkit-box-shadow: inset 10px 10px 40px rgba(0, 0, 0, 0.25);
    box-shadow: inset 10px 10px 40px rgba(0, 0, 0, 0.25);
    height: calc(991 / 1728 * 100vw);
    overflow: hidden;
    --gap: 2.4rem;
}
/* bạn đã có */
.homes-rate-scroll{
    background-color:#D9D9D9;
    -webkit-box-shadow: inset 10px 10px 40px rgba(0,0,0,.25);
    box-shadow: inset 10px 10px 40px rgba(0,0,0,.25);
    height: calc(991 / 1728 * 100vw);
    overflow: hidden;
    --gap: 2.4rem;      /* khoảng cách giữa các ảnh */
}

/* cao đúng bằng container, ẩn phần tràn */
.homes-rate-scroll .homes-rate-scroll-wrap{
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* track nội dung để chạy (được JS bọc vào) */
.homes-rate-scroll .marquee{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    will-change: transform;
    animation: rateAutoY var(--dur, 30s) linear infinite;
}
/* hover cột nào => cột đó dừng */
.homes-rate-scroll .homes-rate-scroll-wrap:hover .marquee{
    animation-play-state: paused;
}

/* keyframes: chạy hết 50% vì ta nhân đôi nội dung để loop */
@keyframes rateAutoY{
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@media (max-width: 520px){

    .homes-rate-scroll .marquee {gap: 8px;}
}
/* thẻ ảnh */
.homes-rate-scroll .homes-rate-scroll-item .img{
    background:#fff; border-radius:10px; overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.homes-rate-scroll .homes-rate-scroll-item .img-inner{ display:block; }
.homes-rate-scroll .homes-rate-scroll-item img{
    display:block; width:100%; height:auto; object-fit:cover;
}
.ss-homes-rate .title-sub{font-size: 22px;margin:40px 0;}
@media (max-width: 767px){
    .join-community{
        background: #fff;
        padding: 46px 16px 23px;


    }
    .ss-homes-rate .title-sub{font-size: 14px;text-align: justify;    margin: 0px 0 40px 0;}
}
/********************


********************
 */
/* =========== JOIN COMMUNITY (prefix join-) =========== */
:root{
    --join-bg: #faefe4;         /* nền kem như ảnh */
    --join-green: #1a7e5b;      /* màu tiêu đề */
    --join-gap: 18px;
}

.join-community{
    background: #fff;
    padding: 72px 16px 80px;
}
@media (max-width: 767px){
    .join-community{
        background: #fff;
        padding: 46px 16px 23px;


    }
}
.join-container{ max-width: 1100px; margin: 0 auto; }

/* Title + sub */
.join-title{
    margin: 0 0 10px; text-align: center;
    font-weight: 900; text-transform: uppercase; letter-spacing: .8px;
    font-size: clamp(24px, 3.6vw, 44px);
    color: var(--join-green);
    text-shadow:
            0 2px 0 rgba(255,255,255,.9),
            0 8px 16px rgba(0,0,0,.18);
}
.join-sub{
    margin: 0 auto 26px; text-align: center; max-width: 860px;
    color: #3b4a52; opacity: .9; line-height: 1.6;
    font-size: clamp(13px, 2vw, 18px);
    text-align: justify;
}

/* Grid */
.join-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--join-gap);
}
@media (max-width: 1024px){ .join-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){
    .join-grid{ grid-template-columns: 1fr; }

}

/* Card */
.join-card{
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px;
    align-items: start; text-decoration: none;
    background: var(--join-bg); border: 1px solid #eef1f4;
    border-radius: 14px; padding: 16px 18px;
    /*box-shadow: 0 16px 36px rgba(0,0,0,.08);*/
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.join-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(0,0,0,.14);
    border-color: #e2e8ef;
}

/* Icon tròn */
.join-icon{
    width: 44px; height: 44px; border-radius: 999px;
    display: grid; place-items: center; font-size: 22px; font-weight: 700;
    background: #eef6ff; color: #2171c1; /* mặc định */
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}
.join-card--purple .join-icon{ background:#f2eaff; color:#6c3cb0; }
.join-card--green  .join-icon{ background:#e9fbf4; color:#187a57; }
.join-card--yellow .join-icon{ background:#fff6da; color:#b07b00; }

/* Content */
.join-card-title{
    margin:0; font-size: clamp(16px, 1.8vw, 20px);
    color:#1d2b34; font-weight: 800;
}
.join-card-desc{
    grid-column: 1 / -1; margin: 2px 0 0;
    color:#4a5c65; font-size: 14px; line-height: 1.6;
}
/***********************
*********************
 */
/* ===== Gallery (gal-) ===== */
/* ===== Gallery (gal-) ===== */
:root{
    --gal-bg:#a8dcc6;
    --gal-gap:12px;
    --gal-row:150px; /* chiều cao một "hàng nhỏ" – chỉnh để cân tỉ lệ */
}

.gal-wrap{ background:var(--gal-bg);     padding: 250px 16px 200px;position: relative; }
.gal-container{ max-width:1180px; margin:0 auto; }

.gal-title{
    margin:0 0 6px; text-align:center; color:#0e7b54;
    font-weight:900; text-transform:uppercase; letter-spacing:.6px;
    font-size:clamp(22px,3.2vw,36px);
}
.gal-sub{ margin:0 0 18px; text-align:center; opacity:.9; font-size:clamp(14px,1.8vw,16px); }

/* GRID 4 cột; dùng dense để tự “nhét kín” khi có item span */
.gal-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows: var(--gal-row);
    grid-auto-flow: dense;
    gap:var(--gal-gap);
}

/* thẻ ảnh */
.gal-card{
    border-radius:10px; overflow:hidden;
   /* box-shadow:0 10px 26px rgba(0,0,0,.12);*/
}
figure.gal-card {
    margin: 0 0 0;
}
.gal-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* span helper */
.gal-r2{ grid-row: span 2; }      /* cao 2 hàng nhỏ */
.gal-c2{ grid-column: span 2; }   /* rộng 2 cột */

/* 5000 là PNG/WEBP trong suốt – để contain cho đúng brush */
.gal-5000 img{ object-fit:contain; background:transparent; }

/* Responsive */

@media (max-width:720px){
   /* .gal-grid{ grid-template-columns:repeat(2,1fr); }*/
    /*.gal-c2{ grid-column: span 2; } */ /* vẫn nối 2 cột khi còn ≥2 cột */
}
@media (max-width:480px){
    /*.gal-grid{ grid-template-columns:1fr; }*/
    /*.gal-c2{ grid-column:auto; }   */  /* về 1 cột trên mobile */
    .gal-grid{    grid-auto-rows: 75px;}
}
.gal-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    pointer-events: none;
    z-index: 1;
    background: #fff;

}
@media (max-width:767px){
    .gal-wrap {
        padding: 120px 16px 120px;
        position: relative;
    }
    .gal-wrap::before {
        height: 65px;

    }
}
/*.gal-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    pointer-events: none;
    z-index: 1;
    background: var(--gal-bg);

}*/

/********************

******************
 */
/* ===== 7 LÝ DO NÊN CHỌN (why-) ===== */
:root{
    --why-bg:#f6faf6;
    --why-green:#167a57;
    --why-deep:#0c5e43;
    --why-bubble:#1b8a63;
    --why-accent:#f09a2a;
}

.why-section{
    background:var(--why-bg);
    padding:72px 16px;
    position: relative;
    padding: min(4rem, 1vh) 1rem;
    display: grid;
    place-items: center;
}
.why-section-bg{
    position: absolute;
    inset: 0;
    width: calc(100% + var(--bleed));
    height: calc(100% + 100px);

    background: url(/upload/images/bg-why.jpg) center / cover no-repeat;
    left: 50%;
    top: -53px;
    transform: translateX(-50%);
    pointer-events: none;

    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    border-top-left-radius: 100% var(--curve-h);
    border-top-right-radius: 100% var(--curve-h);
}
/* .why-section::before {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(100% + var(--bleed));
    height: calc(100% + 100px);

    background: url(/upload/images/bg-why.jpg) center / cover no-repeat;
    left: 50%;
    top: -53px;
    transform: translateX(-50%);
    pointer-events: none;

    border-bottom-left-radius: 100% var(--curve-h);
    border-bottom-right-radius: 100% var(--curve-h);
    border-top-left-radius: 100% var(--curve-h);
    border-top-right-radius: 100% var(--curve-h);
} */
:root{
    --n: 7;                                /* số vòng tròn */
    --circle-size: clamp(90px, 12vw, 145px);
    --green: #2f8f6b;
    --green-2: #3da27d;
    --bg: #f6fbf8;
    --shadow: 0 8px 24px rgba(5, 29, 22, .12);
}



/* khung vuông để tính toán vị trí (responsive) */
.orbit{
    position:relative;
    width:min(100%, 980px);
    aspect-ratio: 1 / 0.8;
}

/* Ellipse trung tâm (chỉ là miếng nền + text/logo) */
.ellipse{position:absolute; inset:0; display:grid; place-items:center}
.ellipse-inner{
    width: clamp(320px, 46vw, 450px);
    aspect-ratio: 2.2 / 1;
    background: radial-gradient(120% 100% at 50% 50%, #dff4eb 0 60%, #cfeee3 100%);
    border-radius: 100%;
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    text-align: center;

}
.ellipse h2{
    margin:0 0 .25rem;
    font-size:clamp(1.3rem,3.2vw,2rem);
    color: #034f4f;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.brand img{    width: 100%;
    height: auto;
    object-fit: contain;}
.tagline{font-size:clamp(.8rem,1.8vw,.95rem);opacity:.7;margin-top:.15rem}

/* 7 vòng tròn */
.item_why{
    position:absolute; left:50%; top:50%;
    /* JS sẽ set --dx/--dy là vectơ từ tâm -> vị trí đích */
    transform: translate(var(--dx,0), var(--dy,0));
    will-change: transform;
    animation: fly-out .9s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--delay, 0ms);

}

.circle_why{
    width:var(--circle-size); height:var(--circle-size);
    border-radius:50%;
    background: radial-gradient(120% 120% at 30% 20%, var(--green-2), var(--green));
    color:#fff; box-shadow: var(--shadow);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.4rem; text-align:center; padding:.75rem;
}
.icon_why{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;background:rgba(255,255,255,.16)}
@media (max-width:1190px){
    .icon_why{
        width:35px;height:35px;
    }
}
.icon_why img{
    width: 100%;
}
.label{font-size:clamp(.75rem,1.6vw,.9rem);line-height:1.2}

/* hiệu ứng xuất hiện: từ tâm -> vị trí elip */
@keyframes fly-out{
    from{ transform: translate(0,0); opacity:0; filter:blur(2px) }
    to  { transform: translate(var(--dx), var(--dy)); opacity:1; filter:blur(0) }
}

@media (prefers-reduced-motion: reduce){ .item{ animation:none } }
/* === Hover FX cho vòng tròn === */
.circle_why{
    position: relative;
    cursor: pointer;
    transform: rotateX(var(--tiltY,0deg)) rotateY(var(--tiltX,0deg)) scale(var(--scale,1));
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s, filter .25s;
    will-change: transform, box-shadow;
    outline: none;
}

/* đổ bóng + phóng to khi hover */
.item_why:hover .circle{
    --scale: 1.08;
    box-shadow: 0 18px 40px rgba(47,143,107,.38);
}

/* halo mỏng quanh viền */
.circle_why::before{
    content:"";
    position:absolute; inset:-4px; border-radius:50%;
    border:2px solid rgba(255,255,255,.55);
    opacity:0; transform:scale(.92);
    transition: opacity .28s, transform .28s;
    pointer-events:none;
}
.item_why:hover .circle_why::before{ opacity:1; transform:scale(1.08) }

/* glow theo vị trí chuột */
.circle_why::after{
    content:"";
    position:absolute; inset:-2px; border-radius:50%;
    pointer-events:none;
    background:
            radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),
            rgba(255,255,255,.38), transparent 60%);
    opacity:0; transition: opacity .2s;
    mix-blend-mode: screen;           /* tạo glow mềm */
}
.item_why:hover .circle_why::after{ opacity:1 }

/* icon nhích nhẹ lên khi hover */
.circle_why .icon{ transition: transform .25s }
.item_why:hover .icon{ transform: translateY(-3px) }

/* hỗ trợ keyboard */
.circle_why:focus-visible{
    box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(47,143,107,.35);
}

/* tôn trọng reduce motion */
@media (prefers-reduced-motion: reduce){
    .circle_why, .circle_why::before, .circle_why::after{ transition:none }
}

/* Nền mờ họa tiết nhẹ (tuỳ chọn) */


/* Responsive: dưới 680px chuyển thành lưới */
@media (max-width:680px){
    .why-container{ min-height: auto; }
    .why-badge{ position:relative; left:auto; top:auto; transform:none; margin:0 auto 18px; }
    .why-orbit{ height:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .why-item{ position:static; transform:none; width:auto; }
    .why-item .why-label{ background:transparent; color:#1d2b34; box-shadow:none; }
    .why-item .why-icon{ width:74px; height:74px; }
    .why-item .why-icon::after{ inset:12px; }
    .brand img {
        width: 60%;
        height: auto;
        object-fit: contain;
    }
    .ellipse h2 {

        font-size: clamp(1rem, 3.2vw, 2rem);
    }
    .ellipse-inner {
        width: clamp(240px, 46vw, 450px);
    }
}
@media (max-width:530px){
    .ellipse-inner {

        background: none;
        box-shadow: none;


    }
}
/* chỉnh elip cho quỹ đạo */
.why-orbit{
    /* bán kính & tỉ lệ dẹt của elip */
    --R: clamp(180px, 28vw, 150px);
    --ellipseY: .72;         /* < 1 => dẹt theo trục dọc; >1 => kéo dài dọc */
    --ellipseYInv: 1.3889;   /* = 1 / .72  (fallback an toàn) */

    position: relative;
    height: clamp(460px, 60vw, 560px);
    list-style: none; margin: 0; padding: 0;

    /* 👉 làm elip bằng cách “ép” trục Y của cả vòng */
    transform: scaleY(var(--ellipseY));
    transform-origin: 50% 50%;
}

/* đặt từng bubble lên elip & unscale để nó vẫn tròn */
.why-item{
    position: absolute; left: 50%; top: 50%;
    transform:
            rotate(calc(var(--i) * 1turn / 7))
            translate(var(--R))
            rotate(calc(var(--i) * -1turn / 7))
                /* 👉 kéo ngược lại để icon & label không bị méo */
            scaleY(var(--ellipseYInv));
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center; width: clamp(130px, 18vw, 160px);
}

/* hover: tịnh tiến nhẹ theo elip và vẫn unscale ngược */
.why-item:hover{
    transform:
            rotate(calc(var(--i) * 1turn / 7))
            translate(calc(var(--R) + 6px))
            rotate(calc(var(--i) * -1turn / 7))
            scaleY(var(--ellipseYInv));
}
@media (max-width: 380px){
    .icon_why {
        width: 30px;
        height: 30px;
    }
}

/***************
*************
 */
/* ===== FAQ (prefix faq-) ===== */
:root{
    --faq-mint:#a8dcc6;
    --faq-title:#0e7b54;
    --faq-card:#f2f4f7;
    --faq-border:#e5e9ef;
    --faq-deep:#1e2a2f;
}

.faq-section{ background:var(--faq-mint); padding:200px 16px 200px; }
@media (max-width: 767px){ .faq-section{ padding: 96px 16px 60px;} }
.faq-container{ max-width:1180px; margin:0 auto; }

.faq-title{
    margin:0 0 24px; text-align:center; color:var(--faq-title);
    font-weight:900; text-transform:uppercase; letter-spacing:.8px;
    font-size: clamp(22px, 3.2vw, 40px);
    text-shadow:0 2px 0 rgba(255,255,255,.9), 0 10px 18px rgba(0,0,0,.12);
}

.faq-grid{
    display:grid; grid-template-columns: 1fr 1.3fr; gap:32px; align-items:start;
}
@media (max-width: 900px){ .faq-grid{ grid-template-columns: 1fr; } }

/* Media stack */
.faq-media{ position:relative; min-height: 340px; text-align: center; }
.faq-photo{
     border-radius:10px;
    width: clamp(260px, 42vw, 420px); height: auto; object-fit: cover;
}
.faq-photo--back{ left:0; top:0; }
.faq-photo--front{ left:70px; bottom:0; width: clamp(220px, 34vw, 360px); }
.faq-badge{
    position:absolute; left:110px; top:50%; transform:translateY(-50%);
    width:120px; height:120px; border-radius:50%;
    background:#fff; display:grid; place-items:center; text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.faq-badge-nk{
    display:block; font-weight:900; color:#fff; font-size:34px; line-height:1;
    -webkit-text-stroke: 10px #2f7d67; text-shadow:0 2px 0 #2f7d67;
}
.faq-badge-text{ display:block; font-weight:800; color:#2b3d33; font-size:12px; margin-top:-10px; }

/* Accordion */
.faq-accordion{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--faq-card); border-radius:8px; overflow:hidden; border:1px solid var(--faq-border);     padding: 15px 15px;}

.faq-head{
    all:unset; display:grid; grid-template-columns: 1fr auto; align-items:center;
    width:100%; cursor:pointer; color:#27343a; font-weight:700;

}

.faq-head:hover{ background:#eef3f7; }
.faq-ico{
    width:24px; height:24px; position:absolute; display:inline-block; right: -3px; position: relative;
}
.faq-ico::before, .faq-ico::after{
    content:""; position:absolute; top:50%; left:50%; background:#2e3a41; border-radius:2px;
    transform:translate(-50%,-50%);
}
.faq-ico::before{ width:14px; height:2px; }
.faq-ico::after{ width:2px; height:14px; transition: opacity .2s ease, transform .2s ease; }
.faq-ico[aria-expanded="true"]::after { opacity:0; transform:translate(-50%,-50%) scaleY(0); }

.faq-body{ padding:0 18px 16px; color:#36464f; line-height:1.6; }

/* Open/close animation (max-height) */
.faq-body[hidden]{ display:block; max-height:0; padding-bottom:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; }
.faq-body--open{ max-height:400px; transition:max-height .32s ease, padding .32s ease; }

/* Mobile tweaks */
@media (max-width:600px){
    .faq-media{ min-height:260px; }
    .faq-badge{ left:70px; width:100px; height:100px; }
    .faq-badge-nk{ font-size:28px; -webkit-text-stroke:8px #2f7d67; }
}
/* ===== BẢN TIN (prefix bn-) ===== */
:root{
    --bn-green:#0e7b54;
    --bn-text:#14333a;
    --bn-muted:#6a7a80;
    --bn-pill:#ffb64b;
    --bn-gap:18px;
}

.bn-section{ background:#fff; padding:200px 16px 200px; }
@media (max-width: 767px){
    .bn-section {
        padding: 50px 16px 50px;
        min-height: 220px;
    }
}
.bn-container{ max-width:1180px; margin:0 auto; }

/* header */
.bn-head{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-bottom:16px; }
.bn-title{
    font-size: 40px;
    color: #034f4f;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
@media (max-width: 769px){
    .bn-title {
        font-size: 18px;
    }
    .bn-all{
        font-size: 14px;
    }
}
.bn-all{
    display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px;
    background:#fff; color:#28353a; text-decoration:none;
    border-radius:999px; padding:10px 14px; font-weight:800;
    box-shadow:0 8px 20px rgba(0,0,0,.10); border:2px solid var(--bn-pill);
    transition: 0.2s;
}
.bn-all:hover{

    background: #0d6c28;
    color: #fff;
    border: 2px solid #0d6c28;
}
.bn-all-dot{ width:10px; height:10px; border-radius:999px; background:var(--bn-pill); display:inline-block; }

/* layout grid */
.bn-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:var(--bn-gap); }
@media (max-width: 980px){ .bn-grid{ grid-template-columns:1fr; } }

/* feature card trái */
.bn-card{ display:block; text-decoration:none; color:inherit;
     overflow:hidden; }
.bn-thumb{ overflow:hidden; border-radius:12px; background:#eef2f4; }
.bn-thumb--feature{ aspect-ratio: 16 / 11; }
.bn-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bn-card:hover .bn-thumb img{ transform:scale(1.03); transition:transform .25s ease; }

.bn-time{ display:block; color:var(--bn-muted); font-size:13px; margin:12px 16px 6px; }
.bn-card-title{ margin:0 16px 8px; font-size:clamp(16px,2.1vw,20px); line-height:1.35; color:var(--bn-text); font-weight:900; }
.bn-card-title:hover{ color: #0b4d3f; }
.bn-excerpt{ margin:0 16px 18px; color:#2f3e44; opacity:.95; line-height:1.6; font-size:14px; }

/* list phải (3 item, ảnh TRƯỚC) */
.bn-list{ display:flex; flex-direction:column; gap:14px; }

.bn-item{

    overflow:hidden;
}
.bn-itemLink{
    display:grid; grid-template-columns: auto 1fr; gap:12px; align-items:center;
    padding-bottom:15px; text-decoration:none; color:inherit;
}
.bn-thumb--sm{
    width:140px; aspect-ratio:16/11; border-radius:10px; overflow:hidden; background:#eef2f4;
}
.bn-thumb--sm img{ width:100%; height:100%; object-fit:cover; display:block; }
.bn-item:hover .bn-thumb--sm img{ transform:scale(1.03); transition:transform .25s ease; }

.bn-itemText .bn-time{ margin:0 0 6px; color:var(--bn-muted); font-size:13px; }
.bn-itemTitle{ margin:0 0 6px; font-size:16px; line-height:1.35; font-weight:900; color:var(--bn-text); }
.bn-itemDesc{ margin:0; font-size:14px; color:#3f4e54; line-height:1.5; }

/* responsive */
@media (max-width:640px){
    .bn-itemLink{ grid-template-columns:1fr; }
    .bn-thumb--sm{ width:100%; }
}
/* ===================== OVERRIDES: phóng to thumbnail bên phải ===================== */

/* Tăng cột ảnh: dùng cột đầu min 200px, max 260px (tự co theo không gian) */
.bn-list .bn-itemLink{
    grid-template-columns: minmax(200px, 260px) 1fr; /* ảnh to hơn */
    gap: 16px;

}

/* Ảnh chiếm toàn bộ cột trái, tỉ lệ hơi ngang cho giống demo */
.bn-list .bn-thumb--sm{
    width: 100%;             /* theo cột grid */
    aspect-ratio: none;;    /* cao hơn (đỡ dẹt) */
    border-radius: 12px;
    background: none;;
}
.bn-list .bn-item {
    display: grid;
}
.bn-itemText{margin-left: 15px;}
/* Tinh chỉnh chữ để cân với thumbnail lớn */
.bn-list .bn-itemTitle{ font-size: 17px; line-height: 1.35; }
.bn-list .bn-itemTitle:hover{ color:#0b4d3f; }

.bn-list .bn-itemDesc{  font-size: 14px; }

/* Tablet nhỏ vẫn giữ 2 cột; khi rất hẹp mới xếp dọc */
@media (max-width: 760px){
    .bn-list .bn-itemLink{ grid-template-columns: 1fr; }
    .bn-list .bn-thumb--sm{ width: 100%; }
    .bn-list{margin-bottom: 100px;}
}
/****************************
********************
 */
/* ========= SECTION LAYOUT ========= */
.enr-wrap{
    background:#d3e9e6;
    padding:200px 16px 200px;
    position: relative;
}
@media (max-width: 767px){
    .enr-wrap {

        padding: 100px 16px 100px;

    }


}
.enr-container{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap:32px; align-items:start;
}
@media (max-width: 768px){
    .enr-container{ grid-template-columns: 1fr; }


}

/* ========= LEFT ========= */
.enr-left{
    position:relative;
}

/* strawberry nhảy nhẹ */
.enr-berry{
    position: absolute;
    left: -72px;
    top: -82px;
    width: 124px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
    animation: enrFloat 3s ease-in-out infinite;
}
@keyframes enrFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.enr-card{
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    padding: 25px 25px;
    max-width: 480px;
    position: relative;
}
.enr-title{
    margin:0 0 8px; color:#0e7b54; font-weight:900;
    font-size: clamp(20px,3vw,28px); line-height:1.25;
}
.enr-sub{ margin:0 0 10px; font-weight:800; color:#2b3438;margin-top:30px; }

/* Khung form có border */
.enr-formBox{
    border:2px solid #f4e2cf;             /* border giống hình */
    border-radius:14px; padding:14px; background:#fff;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.02);
}
.enr-desc{ margin:0 0 12px; color:#909090; }

/* form controls */
.enr-form{ display:flex; flex-direction:column; gap:12px; }
.enr-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:560px){ .enr-row{ grid-template-columns:1fr; } }
.enr-field{ display:flex; flex-direction:column; gap:6px; }
.enr-field > span{ font-weight:700; font-size:13px; color:#2e3a41; }

.enr-field input,
.enr-field select{
    height:46px; border-radius:10px; border:1.6px solid #f0e3d2;
    padding:0 12px; background:#fff; font:inherit; color:#1f2c31; outline:0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.03);
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    width: 100%;
}
.enr-field input::placeholder{ color:#96a4aa; }
.enr-field input:hover, .enr-field select:hover{ border-color:#ecd6bd; }
.enr-field input:focus, .enr-field select:focus{
    border-color:#ffb660;
    box-shadow:0 0 0 3px rgba(255,182,96,.25), inset 0 -2px 0 rgba(0,0,0,.03);
}

/* select arrow */
.enr-select{ position:relative; }
.enr-select::after{
    content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
    border-right:2px solid #8a8f93; border-bottom:2px solid #8a8f93;
    transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.enr-select select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:34px; }

/* button */
.enr-btn{
    display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px;
    width:max-content; margin-top:6px;
    background:linear-gradient(180deg,#ffb660 0%,#ff9e2e 100%);
    color:#1c2b2f; font-weight:900; border:0; border-radius:999px; padding:12px 18px;
    box-shadow:0 12px 26px rgba(255,166,64,.35); cursor:pointer;
}
.enr-btn:hover{ filter:brightness(1.03); }
.enr-btn:active{ transform:translateY(1px); }
.enr-btn-dot{ width:10px; height:10px; border-radius:50%; background:#fff; display:inline-block; }

/* ========= RIGHT ========= */
.enr-note{
    background:#ffccaa; border-radius:26px; padding:24px 28px;
    box-shadow:0 16px 36px rgba(0,0,0,.12); position:relative; overflow:hidden;
}
/* viền chấm dotted bo tròn, bên trong một chút */
.enr-note-dot{
    position:absolute; inset:14px; border-radius:20px; pointer-events:none;
    /* dùng outline để chấm tròn đều, bám radius */
    outline:4px dotted #fff; outline-offset:-8px;
    content:"";
}
.enr-list{ margin:0; padding:0; list-style:none; color:#2b2b2b; }
.enr-list li{ margin:10px 0; padding-left:22px; position:relative; line-height:1.6; }
.enr-list li::before{
    content:"•"; position:absolute; left:4px; top:0; color:#fff; font-size:18px; line-height:1.1;
}

/* 3 cups */
.enr-cups{ position:relative; height:224px; margin-top:10px; }
.enr-cup{ position:absolute;  max-width:520px; filter: drop-shadow(0 18px 22px rgba(0,0,0,.2)); }
.enr-cup--l{ left:0;bottom: -159px;  }

@media (max-width:980px){
    .enr-cups{ height:190px; }
    .enr-cup{
        width:36%;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
    }

}
@media (max-width:560px){
    .enr-cup{
        width:80%;

    }
}
/* ===== CTA pill xanh có viền cam + logo tròn (enr-) ===== */
:root{
    --enr-green:#197653;
    --enr-green-dark:#155f43;
    --enr-orange:#f9a53a;
}

.enr-cta{
    all:unset;
    display:inline-block;
    cursor:pointer;
    /* “viền” cam quanh pill */

    padding:4px;                 /* độ dày viền cam */
    border-radius:9999px;

}
.enr-cta__inner{
    display:flex; align-items:center; gap:12px;
    background:#197653;
    color:#fff;
    border-radius:9999px;
    padding:12px 18px 12px 12px; /* chừa chỗ cho logo */
    transition: 0.5s;

}
.enr-cta__inner:hover {

    background: #f9a53a;
}
.slider-bnt .enr-cta__inner:hover {

    background: #20bf0a;
}
.enr-cta__logo{
    width:36px; height:36px; border-radius:50%;
    background:#fff; display:grid; place-items:center;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);
    flex:0 0 36px;
}
.enr-cta__logo img{
    width:74%; height:74%; object-fit:contain; display:block;
}
.enr-cta__text{
    font-weight:900; letter-spacing:.2px; white-space:nowrap;
}
.enr-cta__text a{color: #fff;}

/* Hover/active/focus */
.enr-cta:hover .enr-cta__inner{ filter:brightness(1.03); }
.enr-cta:active{ transform:translateY(1px); }
.enr-cta:focus-visible{ outline:3px solid rgba(249,165,58,.45); outline-offset:3px; }

/* Mobile: chữ không tràn */
@media (max-width:420px){
    .enr-cta__text{ font-size:14px; }
    .enr-cta__logo{ width:32px; height:32px; }
}
.enr-right{
    margin-left: 100px;
}
@media (max-width: 1290px){
    .enr-left{
        display: flex;
        justify-content: center;
    }
    .enr-right {
        margin-left: 0px;
    }
}
.enr-note {

    max-width: 600px;
    margin: auto;
}
.enr-wrap-bg{
     position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 100%;
    height: calc(100% + var(--rise));
    background: url(/upload/images/bg-form.jpg) bottom/cover no-repeat;
}
/* .enr-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 100%;
    height: calc(100% + var(--rise));
    background: url(/upload/images/bg-form.jpg) bottom/cover no-repeat;

} */

:root{ --rise_side:.85s; --float_side:4s; }
/* KHUNG BANNER */
.hero{
    position:relative;
    height:min(82vh,820px); min-height:560px; max-height:900px;
    background:url("/upload/images/bgslider.jpg") center top/cover no-repeat; /* nền bầu trời */
    overflow:visible;
    z-index: 1;
}

/* ===== LAYER LÁ (canvas) – TRÊN nền bầu trời, DƯỚI nền cam & nội dung ===== */
#leaf-scene{
    position:absolute; inset:0; pointer-events:none; z-index:2;
}
#leaf-canvas{ width:100%; height:100%; display:block; }


/* Vệt nền cam (ở giữa) */
.bg-splash{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none ;bottom: -143px;}
.bg-splash-content{
     content:""; width:min(1100px,88vw); aspect-ratio:1000/700;
    background:url("/upload/images/slide-bg2.png") center/contain no-repeat;
    filter:drop-shadow(0 6px 20px rgba(255,140,0,.25));
    transform:translateY(40px); opacity:0;
    animation:rise var(--rise_side) .1s ease-out forwards;
}
/* .bg-splash-content{
    content:""; width:min(1100px,88vw); aspect-ratio:1000/700;
    background:url("/upload/images/slide-bg2.png") center/contain no-repeat;
    filter:drop-shadow(0 6px 20px rgba(255,140,0,.25));
    transform:translateY(40px); opacity:0;
    animation:rise var(--rise_side) .1s ease-out forwards;
} */

/* Hai người (trên vệt cam) */
.person{ position:absolute; bottom:-8px; z-index:4; width:min(330px,34vw);
    transform:translateY(80px); opacity:0; filter:drop-shadow(0 10px 22px rgba(0,0,0,.22));
    opacity: 1;
    transform: translateY(0px);
}
.person.left{ left:15vw;  animation:rise var(--rise_side) .35s ease-out forwards }
.person.right{ right:15vw; animation:rise var(--rise_side) .45s ease-out forwards; }

/* 3 ly (trên nội dung) */
.cups{
    position: absolute;
    left: 50%;
    bottom: -60px;
    translate: -50% 0;
    width: min(555px, 78vw);
    z-index: 6;
    transform: translateY(50px);
    opacity: 0;
    animation: rise var(--rise_side) .7s ease-out forwards;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .18));

}
@media  (max-width: 767px) {
    .enr-wrap::before{height: 100%;}
}
@media (max-width:450px) {
    .person{
        opacity: 1;
        transform: translateY(0px);
    }
    .person.left{ animation: none }
    .person.right{ animation:none }
    .cups{
        animation:none;
        transform: translateY(0px);
        opacity: 1
    }
}
/* Text + nút (giữa) */
.center{ position:absolute; inset:0; display:grid; place-items:center; z-index:5; pointer-events:none;    top: -278px; }
.stack{ display:grid; gap:16px; justify-items:center }
.textslide{ width:min(640px,80vw); transform:translateY(40px); opacity:0; animation:rise var(--rise_side) .25s ease-out forwards }
.blender-slide{
    opacity:0;
    position: absolute;
    left: -27px;
    animation:rise 0.4s 1s ease-out forwards, floatY 2s 1s ease-in-out infinite alternate;
}
.apple-green{
    opacity:0;
    position: absolute;
    right: 0;
    bottom: 25px;
    animation:rise var(--rise_side) 1s ease-out forwards, floatY 1.5s 1s ease-in-out infinite alternate;
}
.img-text-slide{position: relative;}
.headline{ font-weight:800; text-transform:uppercase; color:#5a2c00; text-align:center;
    transform:translateY(40px); opacity:0; animation:rise var(--rise_side) .55s ease-out forwards }
.cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; pointer-events:auto;
    transform:translateY(40px); opacity:0; animation:rise var(--rise_side) .8s ease-out forwards }
.btn{ background:#0ea5e9; color:#fff; font-weight:700; border:none; border-radius:999px; padding:12px 18px;
    box-shadow:0 8px 24px rgba(14,165,233,.3); cursor:pointer }
.btn.secondary{ background:#10b981 }

/* Trái cây lơ lửng */
.fruit{ position:absolute; z-index:7; opacity:0; transform:translateY(40px);
    animation:rise var(--rise_side) 1s ease-out forwards, floatY var(--float_side) 1s ease-in-out infinite alternate;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.15)); pointer-events:none }
.fruit.orange{     left: 27vw;
    top: 31%;
    width: min(75px, 18vw);
}
.fruit.cherry{
    right: 23vw;
    top: 28%;
    width: min(157px, 22vw);
    animation-delay: 1.15s, 1.15s;
}

/* Keyframes chung */
@keyframes rise{ from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes floatY{ from{transform:translateY(0)} to{transform:translateY(-12px)} }

/* Tôn trọng Reduce Motion */
@media (prefers-reduced-motion:reduce){
    #leaf-scene, #bird-container{ display:none }
    .fruit{ animation:rise .01s ease-out forwards !important }
}

@media (min-width: 1280px) and (max-width: 1440px) {
    .fruit.orange {
        left: 10%;
    }
    .fruit.cherry {
        right: 7%;

    }

    .bg-splash-content {
        width: min(800px, 88vw);
    }
    .textslide {
        width: min(340px, 80vw);

    }
    .headline {
        width: 300px;
    }
    .cups {
        width: min(455px, 78vw);
    }
    .blender-slide{
        width: 70px;
        left: -19px;
    }
    .apple-green{
        width: 50px;
        bottom: 12px;
        animation: rise var(--rise_side) 1s ease-out forwards, floatY 2.5s 1s ease-in-out infinite alternate;
    }
}
@media (max-width:1279px) {
    .cups {

        width: min(502px, 78vw);

    }
    .person.left {
        left: 9vw;

    }
    .person.right {
        right: 9vw;

    }
    .fruit.orange {
        left: 9vw;
        top: 21%;
        width: min(55px, 18vw);
    }
    .fruit.cherry {
        right: 4vw;
        top: 24%;
        width: min(100px, 22vw);

    }


    .person.left {
        left: 3vw;

    }
    .person.right {
        right: 2vw;

    }
    .bg-splash-content {

        width: min(800px, 88vw);

    }
    .textslide {
        width: min(400px, 80vw);

    }
    .blender-slide{
        width: 70px;
        left: -19px;
    }
    .apple-green{
        width: 50px;
        bottom: 12px;
        animation: rise var(--rise_side) 1s ease-out forwards, floatY 2.5s 1s ease-in-out infinite alternate;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {

    .fruit.orange {

        width: min(40px, 18vw);
    }
    .fruit.cherry {

        width: min(80px, 22vw);
    }
    .bg-splash {

        bottom: -48px;
    }
    .textslide {
        width: min(361px, 80vw);

    }
    .cups {
        width: min(423px, 78vw);
    }
    .person.left {
        width: 238px;
    }
    .person.right {
        width: 238px;
    }

}
@media (max-width:767px){
    .textslide {
        width: min(640px, 60vw);

    }
    .person.right {
        right: 6vw;

    }
    .cups {
        bottom: -68px;
        width: min(433px, 78vw);

    }
    .person.left {
        left: 9vw;
    }
    .fruit.orange {
        left: 6vw;
        top: 32%;
        width: min(55px, 18vw);

    }
    .fruit.cherry {
        right: 2vw;
        top: 30%;
        width: min(127px, 22vw);
        animation-delay: 1.15s, 1.15s;
    }
    .center {
        position: absolute;
        inset: 0;
        display: unset;
        place-items: unset;
        z-index: 5;
        pointer-events: none;
        top: 32px;
    }
    .bg-splash {
        bottom: -242px;
        width: min(800px, 70vw);
    }

}
@media (min-width: 541px) and (max-width: 760px) {
    .enr-cta__text {
        font-weight: 900;
        font-size: 12px;
    }
    .enr-cta__logo img {
        width: 15px;
        height: 20px;

    }
    .enr-cta__inner {
        gap: 12px;
        padding: 8px 10px 8px 7px;

    }
    .textslide {
        width: min(500px, 42vw);

    }
    .headline {
        width: 350px;
    }
    .cups {
        bottom: -50px;
        width: min(375px, 78vw);
    }
    .cups {
        bottom: -51px;
        width: min(359px, 78vw);
    }
    .apple-green{

        bottom: 0px;
        right:-20px;
    }
    .blender-slide{
        left: -27px;
    }

}
@media (max-width:540px){
    .hero {
        min-height: 442px;
        height: min(50vh, 820px);

    }
    .bg-splash {
        bottom: -114px;
        left: 12px;

    }
    .headline{width: 200px}
    .person { bottom: 40px;}
    .person.left {
        left: 10vw;

    }
    .person.right {
        right: 4vw;
    }
    .fruit.orange {
        left: 9vw;
        top: 34%;
        width: min(75px, 9vw);
        display: none;
    }
    .fruit.cherry {
        right: 2vw;
        top: 34%;
        width: min(157px, 16vw);
        animation-delay: 1.15s, 1.15s;
        display: none;
    }
    .center {
        top: -177px;
    }
    .textslide {
        width: min(640px, 80vw);

    }
    .apple-green{

        bottom: 0px;
        right:-15px;
    }
    .slider-bnt .enr-cta__inner {
        gap: 8px;
        padding: 5px 10px 5px 5px;

    }
    .slider-bnt .enr-cta__logo {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }
    .slider-bnt .enr-cta__logo img {
        width: 15px;
        height: 15px;

    }
    .slider-bnt .enr-cta__text {
        font-size: 10px;
    }

    .cups {
        bottom: 0;
        width: min(555px, 57vw);
    }
    .cloud-content {

        height: 212px;
        width: 100%;
        bottom: -117px;

    }
}
@media (max-width:540px){
    .textslide {
        width: min(640px, 71vw)
    }
    .center {
        top: 20px;
        display: unset;
        place-items: unset;
    }
    .stack {
        gap: 0;

    }
    .headline {
        width: 380px;
    }
    .person {
        width: min(330px, 30vw);
    }
    .cups {
        bottom: 0;
        width: min(555px, 56vw);
    }

    .bg-splash-content {
        width: min(800px, 105vw)

    }
}
@media (max-width:440px){
    .person {
        width: min(330px, 44vw);
    }
    .person.left {
        left: 3vw;
    }
    .person.right {
        right: 2vw;
    }
}
@media (max-width:380px){
    .person {
        width: min(330px, 41vw);
    }
    .fruit.orange {
       display: none;
    }
    .fruit.cherry {
        display: none;
    }
}

/*************************
        About
 *************************/
.bg-about{
    background: url(/upload/images/about/bg-about.jpg) center top / cover no-repeat;
    overflow: visible;
    padding: 100px 0;
    padding-bottom: calc(var(--rise) - 24px);
}
@media (max-width:500px) {
    .bg-about{

        padding-top:50px;

    }

}
.title-1{
    font-size: 30px;
    color: #034f4f;
    font-weight: bold;

    margin-bottom: 10px;
}

.title-2{
    font-size: 60px;
    color: #034f4f;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.btn-action {
    display: flex;
    align-items: center;

    width: fit-content;
    text-align: center;
    cursor: pointer;
    border-radius: 100rem;
    font-weight: 600;
    transition: 0.2s ease;

    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    overflow: hidden;
    position: relative;
    background: transparent;
    gap: 1rem;
    color: white;
    font-size: 1.6rem;

    background-color: white;
    -webkit-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    white-space: nowrap;
}
.btn-action .txt {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    height: 100%;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    gap: 1rem;
    color: #007043;;
    line-height: 1;
    font-size: 14px;
}
.btn-action .txt-inner {
    padding-right: 2rem;
    transition: 0.4s;
}
.btn-action:hover .txt-inner {
    z-index: 1;
    color: #fff;
}
.btn-action img {

    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.btn-action:hover img {
    transform: rotate(360deg);
    z-index: 1;
}

.btn-action::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    background-color: #F08B36;
}

.btn-action:hover::after {
    transform-origin: top right;
    transform: scaleY(1);
}
.trio-img{
    position: absolute;
    width: 35%;
    bottom :-46px;
    left: 50%;
    transform: translate(-50%);
}

.ice-cube{
    position: absolute;
    bottom:46px;
    animation: rise 0.5s 1s ease-out forwards, floatY 2s 1s ease-in-out infinite alternate;
}
.model-wrap{
    text-align: right;
}
.wapper-button{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    align-items: center;
}
@media (max-width:991px) {
    .ice-cube {

        bottom: -250px;
        width: 100px;
    }
    .model-wrap{text-align: center}
    .model-img{
        width: 60%;
    }
    .trio-img{display: none;}
    .title-2{font-size: 40px;}
}
@media (max-width:500px) {
    .ice-cube {

        width: 50px;
    }

}
/***************
section timeline
 */
.nkfb-eyebrow{
   /* letter-spacing:.08em;text-transform:uppercase;font-weight:800;opacity:.9;font-family: Tahoma;*/
    text-align: center;
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: clamp(22px, 3.2vw, 36px);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .25);
}
.nkfb-badge{background:#e9f5ef;color:#0f5143;font-weight:800;font-size:1.1rem;border-radius:.5rem;padding:.5rem 1rem;font-family: Tahoma;}

.nkfb-timeline-wrap{position:relative;padding:0 0 4rem 0; z-index: 1;}
.nkfb-bg{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:4px;background:#f6a528}
.nkfb-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--rise) * -1);
  width: calc(100% + var(--bleed));
  height: calc(100% + var(--rise));
  background: url("/upload/images/bg-section5.jpg") center/cover no-repeat;

  border-top-left-radius: 100% 180px;
  border-top-right-radius: 100% 180px;
  pointer-events: none;
  z-index: -1;
}
.nkfb-timeline{position:relative}
.nkfb-timeline:before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:4px;background:#f6a528}
.nkfb-item{position:relative;margin-bottom:4rem}
.nkfb-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:999px;background:#f6a528;border:4px solid #ffe6c2;z-index:2}

.nkfb-card{background:#fff;color:#1d1f1e;border-radius:.75rem;box-shadow:0 15px 35px rgba(0,0,0,.18);padding:1.25rem;position:relative}
.nkfb-img{max-width:360px;border-radius:.5rem;}
.nkfb-timeline .row > .col-lg-6.order-lg-1 .nkfb-card{margin-right:56px}
.nkfb-timeline .row > .col-lg-6.order-lg-2 .nkfb-card {
    margin-left: 56px;
}
.nkfb-timeline .row > .col-lg-6.order-lg-2 .nkfb-card:before{
    content:""; position:absolute; top:50%; left:-60px; width:60px; height:3px; background:#f6a528; transform:translateY(-50%); z-index:1;

}
.nkfb-timeline .row > .col-lg-6.order-lg-1 .nkfb-card:before{
    content:""; position:absolute; top:50%; right:-60px; width:60px; height:3px; background:#f6a528; transform:translateY(-50%); z-index:1;

}
@media (max-width: 991px){
    .nkfb-timeline .row > .col-lg-6.order-lg-2 .nkfb-card {
        margin-left: 0px;
    }
    .nkfb-timeline .row > .col-lg-6.order-lg-2 .nkfb-card:before {
        content: none;

    }
    .nkfb-timeline .row > .col-lg-6.order-lg-1 .nkfb-card {
        margin-right: 0px;
    }
    .nkfb-timeline .row > .col-lg-6.order-lg-1 .nkfb-card:before {
        content: none;

    }
}



@media (max-width: 539.98px){

    .nkfb-timeline:before{left:28px;transform:none}
    .nkfb-dot{left:28px;transform:translateY(-50%)}
    .nkfb-timeline .row > .col-lg-6.order-lg-2 .nkfb-card{margin-left:64px;margin-top:.5rem}
    .nkfb-timeline .row > .col-lg-6.order-lg-1 .nkfb-card {
        margin-left:64px;margin-top:.5rem
    }
    .nkfb-img{padding-left:64px;margin-bottom:1rem;max-width: 100%;}
    .nkfb-card:before{display:none}
}
.text-timeline-1{
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
}

@media (max-width: 539.98px){

    .text-timeline-1 {
        font-size: 14px;

        background: #d3eadd;
        border-radius: 10px;
        padding: 5px 10px;
        color: #005725;
        line-height: 21px;
    }
}
.nkfb-card::after{
    content:"";
    position:absolute;
    inset:0;                   /* cùng kích thước với card */
    border-radius:inherit;
    background:#fdb602;  /* nền vàng */
    transform:translate(6px, 6px); /* đẩy xuống-phải */
    z-index:-1;                /* nằm dưới card */
    pointer-events:none;
    /* tùy chọn: bóng nhẹ cho lớp vàng */
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.08));
}
.nkfb-eyebrow{
   /* font-size:2rem;
    font-weight:800;
    text-transform:uppercase;
    color:#016950;
    -webkit-text-stroke: 1.1px #fff;
    letter-spacing: .08em;
    margin-bottom: 1.25rem;*/
}

.nkfb-badge {
    background: #e9f5ef;
    color: #0f5143;
    font-weight: 800;
    font-size: 1.5rem;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 50px;
}

/* .nkfb-timeline-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--rise) * -1);
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));
   background: url("/upload/images/bg-section5.jpg") center/ cover no-repeat;

    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: -1;

} */
/*********************
SECTION 2 ABOUT

 */
.fnb{
    position: relative;
    padding:80px 0;
    background: #d9edea;
}
.bg-warpper-about-section-3{
    background: url("/upload/images/about/bg-section-3.jpg") center/ cover no-repeat;

}
.fnb-bg {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #d9edea;
}
/* .fnb::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #d9edea;
} */

/* ----- Title ----- */
.fnb-title{
    letter-spacing:.5px;
    font-weight:700;
    text-transform:uppercase;
    color:#206f5c;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
@media (max-width: 767px){
    .fnb-title {

        font-size: 18px;
        padding: 10px;
    }
    .fnb {

        padding: 15px 0;

    }
    .fnb::before {

        height: 85px;

    }
}

/* ===== BOX STYLE giống demo ===== */
.fnb-box{
    position: relative;
    background: #2f8a72;
    border-radius: 14px;
    padding: 40px 44px 36px;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
    overflow: visible;
    margin: 0 auto;
    width: 500px;
}
/* viền trắng ở bên trong */
.fnb-box::after{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 3px solid #fff;
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 1199px){
    .fnb-box{

        margin: unset;
        width: unset;
    }
}
/* Label màu cam nằm giữa đè lên cạnh trên */
.fnb-label{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    background:#fbd1a2;
    color:#1b5e4e;
    font-weight:800;
    padding:8px 26px;
    border-radius:28px;
    font-size:20px;
    box-shadow:0 6px 14px rgba(0,0,0,.06);
    white-space:nowrap;
    z-index:2;
}

/* vùng chữ + icon quote */
.fnb-body{
    position:relative;
    z-index:2; /* nằm trên viền trắng */
    font-size:18px;
    line-height:1.6;
    text-align: justify;
}
.fnb-body::before,
.fnb-body::after{
    content:"";
    position:absolute;
    width:34px; height:34px;
    background:url("/upload/images/double-quote.jpg") center/contain no-repeat;
    opacity:1;
}
.fnb-body::before{ /* mở ngoặc trên-trái */
    top:-6px; left:-6px;
    transform:rotate(180deg);
}
.fnb-body::after{ /* đóng ngoặc dưới-phải */
    bottom:-6px; right:-6px;
}

/* ----- Khung ảnh “vệt sơn” ----- */
.fnb-img-frame{
    position:relative;
    display:inline-block;
    transform:rotate(-6deg);
    margin-bottom: 15px;
}

.fnb-img{
    position:relative;
    z-index:1;
    width:100%; max-width:460px;


    display:block;
}

/* ----- Layout spacing ----- */
.fnb-row{ margin-bottom:60px; }

/* ----- Responsive: hình trước – chữ sau ----- */
@media (max-width: 991.98px){
    .fnb-img-col{ margin-bottom:18px; }
    .fnb-img-frame{ transform:rotate(-3deg); }
    .fnb-body{ font-size:16.5px; }
}


/*******************

Gird
 */
.ab-csvc-wrap{
    --gap: 18px;            /* khoảng cách giữa ô */
    --radius: 14px;         /* bo góc */
    --container-pad: 16px;  /* padding 2 bên container */
    background:#fff3ea; padding:90px 0 150px;
    position: relative;
    box-sizing:border-box;
}
.ab-csvc-bg {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fef4ed;
}
/* .ab-csvc-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fef4ed;
} */
@media (max-width: 767px){
    .ab-csvc-wrap {
        padding: 12px 0 150px;
    }
    .ab-csvc-wrap::before {
        height: 65px;
    }
}
.ab-csvc-wrap *, .ab-csvc-wrap *::before, .ab-csvc-wrap *::after{ box-sizing:inherit; }

.ab-csvc-wrap .csvc-container{
    max-width:1100px; margin:0 auto; padding:0 var(--container-pad);
}
.ab-csvc-wrap .csvc-title{
    text-align:center; margin:0 0 22px; font-size:28px; font-weight:800;
    color:#0f6447; text-transform:uppercase; letter-spacing:.5px;
}

/* ====== GRID 4×4 (luôn 4 cột trên mọi kích thước) ====== */
.ab-csvc-wrap .csvc-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    /* Chiều cao 1 hàng co giãn theo viewport, tối đa 210px */
    grid-auto-rows: min(210px, calc((100vw - (2*var(--container-pad)) - 3*var(--gap)) / 4));
    gap: var(--gap);
    margin-top: 50px;
}
.ab-csvc-wrap .csvc-item{
    display:block; overflow:hidden; border-radius:var(--radius);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
    transition:transform .2s, box-shadow .2s; background:#f6f6f6;
}
.ab-csvc-wrap .csvc-item:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.12); }
.ab-csvc-wrap .csvc-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Vị trí/ghép ô theo mô tả ---- */
.ab-csvc-wrap .r2c1{ grid-column:1; grid-row:2; }                               /* Hàng 2 - cột 1 */
.ab-csvc-wrap .r2c2_span2x2{ grid-column:2 / span 2; grid-row:2 / span 2; }     /* gộp 2×2 (ô 2-3, hàng 2-3) */
.ab-csvc-wrap .r2c4_span3r{ grid-column:4; grid-row:2 / span 3; }               /* cột 4 cao 3 hàng (2→4) */
.ab-csvc-wrap .r3c1{ grid-column:1; grid-row:3; }                               /* Hàng 3 - cột 1 */
.ab-csvc-wrap .r4c1{ grid-column:1; grid-row:4; }                               /* Hàng 4 - cột 1 */
.ab-csvc-wrap .r4c2{ grid-column:2; grid-row:4; }                               /* Hàng 4 - cột 2 */
.ab-csvc-wrap .r4c3{ grid-column:3; grid-row:4; }                               /* Hàng 4 - cột 3 */

/* Giảm gap & thu nhỏ title chút ở màn nhỏ, nhưng vẫn giữ 4 cột */
@media (max-width: 480px){
    .ab-csvc-wrap{ --gap: 10px; --container-pad: 12px; }
    .ab-csvc-wrap .csvc-title{ font-size:24px; }
}
/* ====== scoped styles ====== */
.lp-moments{
    --gap: 14px;
    --radius: 10px;
    --row-h: clamp(90px, 11vw, 150px);
    background:#fff;
    padding:36px 0 0px;
    position: relative;
}
.lp-moments-bg {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff;
}
/* .lp-moments::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff;
} */

.lp-container{ padding:45px 0px;
    overflow: hidden;}

@media (max-width: 767px){

    .lp-container {
        padding: 5px 0px;

    }
    .lp-moments {

        padding: 0px 0 0px;

    }
    .lp-moments::before {
        height: 65px;


    }
    .lp-moments-bg {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -65px;
        width: calc(100% + 100px);
        height: 65px;
        border-top-left-radius: 100% 140px;
        border-top-right-radius: 100% 140px;
        pointer-events: none;
        z-index: 1;
        background: #fff;
    }
    .ab-csvc-bg {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -50px;
        width: calc(100% + 100px);
        height: 65px;
        border-top-left-radius: 100% 140px;
        border-top-right-radius: 100% 140px;
        pointer-events: none;
        z-index: 1;
        background: #fef4ed;
    }
}

.lp-title{
    letter-spacing: .5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #206f5c;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.lp-row{ overflow:hidden; margin-bottom:var(--gap); }
.lp-track{
    display:flex; gap:var(--gap);
    animation:lp-marquee var(--speed,38s) linear infinite;
    will-change:transform;
}
.lp-row--rev .lp-track{ animation-direction:reverse; }
.lp-row:hover .lp-track{ animation-play-state:paused; }

.lp-card{
    flex:0 0 auto; display:block;
    height:var(--row-h); width:calc(var(--row-h) * 1.6);
     overflow:hidden;
    box-shadow:0 6px 16px rgba(0,0,0,.08); background:#f3f3f3;
}
.lp-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.lp-card:hover img{ transform:scale(1.04); }

@keyframes lp-marquee{
    from{ transform:translateX(0); }
    to  { transform:translateX(-50%); }
}
/********************************
    Teach

 */
.nk-section{
    position: relative;
    background: #e7f3f0 url("/upload/images/teach/bg-teach.jpg") center / cover no-repeat;
    overflow: hidden;
    padding: 100px 0 50px 0;
}


/* Left col */
.nk-left{position:relative;min-height:560px;padding:3rem 0;}
.nk-tag{font-weight:700;letter-spacing:.06em;color:#2a5f46;font-size:1.05rem;margin-bottom:.25rem;}
.nk-title{font-weight:800;color:#104e2f;line-height:1.15;font-size:2.2rem;margin:0;}
.nk-sub{color:#274d3c;margin-top:.75rem;opacity:.9; font-size: 18px;}
.nk-cups{position:absolute;left:7%;bottom:-75px;width:clamp(240px,55%,430px);pointer-events:none;user-select:none;}

/* Right col */
.nk-right{position:relative;min-height:620px;}
.nk-khoa-wrap{bottom:0;width:min(52vw,520px);min-width:260px;}
.nk-khoa{width:100%;display:block;height:auto;}

/* Blender (đặt ngoài container) */
.nk-blender-wrap{
    position: absolute;
    right: -102px;
    top: 31%;
    width: min(18vw, 180px);
    transform: rotate(18deg);
    transform-origin: center;
    z-index: 3;
    pointer-events: none;
}
.nk-blender-wrap img{width:100%;display:block;height:auto;}

/* Floating animations */
@keyframes nkFloatA{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes nkFloatB{0%{transform:translateY(0) }50%{transform:translateY(-8px) }100%{transform:translateY(0) }}

.nk-float-2{animation:nkFloatB 2.2s ease-in-out infinite;will-change:transform;}
@media (max-width:1690px){
    .nk-blender-wrap {
        right: -8%;
        top: 0;

    }
}
@media (max-width:1199px){
    .nk-blender-wrap {

        width: min(18vw, 90px);

    }
}
/* Responsive */
@media (max-width:991.98px){
    .nk-right{min-height:560px}
    .nk-khoa-wrap{right:2%;width:min(62vw,520px)}
    .nk-blender-wrap{right:-6px;top:42%;width:150px}
    .nk-title{font-size:2rem}
    .nk-cups{display: none}
    .nk-left,.nk-righ {

         min-height: unset;

    }
}
@media (max-width:767.98px){
    .nk-row{min-height:auto}

    .nk-title{font-size:1.8rem}
    .nk-sub{font-size:.95rem}
    .nk-cups{left:10%;width:min(86%,420px)}
    .nk-right{margin-top:1rem}
    .nk-khoa-wrap{right:8%;width:min(90vw,440px)}
    .nk-blender-wrap{right:0px;top:0;width:100px}
    .nk-section {

        padding: 20px 0 50px 0;
    }
    .nk-right{min-height: unset;}
    .nk-khoa{width:78%;}
    .nk-left{
        padding: 1rem 0;
    }
}


/**********************
 teach seation 2
 */
.nk2-section{
    position: relative;
    background: #fff;
    margin-bottom: 150px;
    padding: 150px 0;
}
.nk2-frame{position:relative;padding:24px 0;}
.nk2-section-bg{
   content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff; 
}
/* .nk2-section::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -65px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff;
} */
.nk2-photo{max-width:360px;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.08));}
.nk2-right{position:relative;padding:8px 8px 8px 0;}
.nk2-right::before{
    content:"";position:absolute;inset:-8px -12px -8px -12px;
    /*background-image:radial-gradient(#cfe7dd 1px,transparent 1.5px);*/
    background-size:14px 14px;opacity:.45;border-radius:12px;z-index:0;
}
.nk2-right>*{position:relative;z-index:1;}
.nk2-title{font-weight:800;color:#0f4f34;letter-spacing:.02em;margin-bottom:.5rem;font-size:2rem;}
.nk2-lead{font-weight:600;color:#1f6a4b;margin-bottom:1rem;}

@media (max-width:991.98px){
    .nk2-section{padding:56px 0}
    .nk2-title{font-size:1.9rem}
}
@media (max-width:767.98px){
    .nk2-section{padding:48px 0}
    .nk2-photo{max-width:300px}
    .nk2-title{font-size:1.6rem}
    .nk2-right::before{inset:-6px -8px -6px -8px}
    .nk2-right{font-size: 14px;}
    .nk2-section{

        margin-bottom: 84px;

    }
}
/* ============ SECTION 3 (nk3-) ============ */
.nk3-section{
    position:relative;
    padding:64px 0 150px;
   /* background:#e9f3ef url('/upload/images/teach/bg-teach-4.jpg') center/cover no-repeat;*/


}
.nk3-section-bg{
     content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--rise) * -1);
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));
    background:#e9f3ef url('/upload/images/teach/bg-teach-4.jpg') center/cover no-repeat;
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: -1;
}
/* .nk3-section::before {

 
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--rise) * -1);
    width: calc(100% + var(--bleed));
    height: calc(100% + var(--rise));
    background:#e9f3ef url('/upload/images/teach/bg-teach-4.jpg') center/cover no-repeat;
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: -1;
} */
/* Dâu bay lên xuống nhẹ */
.nk3-strawberry{
    position:absolute;          /* bay độc lập ra ngoài grid */
    left:22px;
    top:22px;
    width:70px;
    z-index:2;
    pointer-events:none;
}
@keyframes nk3Float { 0%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } 100%{ transform:translateY(0) } }
.nk3-float{ animation:nk3Float 2.8s ease-in-out infinite; will-change:transform; }

/* Head */
.nk3-head{ max-width:980px; margin:0 auto 28px; }
.nk3-title{
    color:#1a6b4a;
    font-weight:800;
    letter-spacing:.02em;
    margin-bottom:.5rem;
}
.nk3-badge{
    display:inline-block;
    background:#f28c2a;
    color:#fff;
    padding:.2em .5em;
    border-radius:.4rem;
    margin-left:.25rem;
    white-space:nowrap;
}
.nk3-intro{
    color: #232323;
    opacity: .9;
    font-size: 1.2rem;
    margin-top: 30px;
    text-align: justify;
}

/* Khung 2 đường kẻ dọc trái/phải như demo */
.nk3-frame{ position:relative; padding:40px 0; }



/* Ảnh & khối chữ */

.nk3-block-title{
    font-size: 1.4rem;
    font-weight: bold;
    color: #1e6b4c;
    letter-spacing: .02em;
    margin-bottom: .75rem;
    text-transform: uppercase;
}

/* Dòng gạch + mô tả bên phải gạch */
/* NK3: thanh dọc cao = chiều cao khối mô tả */
.nk3-hrtext{
    position: relative;
    padding-left: 22px;   /* chừa chỗ cho thanh dọc */
}

.nk3-hrtext::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;            /* => cao bằng .nk3-hrtext */
    width: 6px;           /* độ dày thanh */
    background: #f28c2a;  /* màu cam */
    border-radius: 3px;
}

.nk3-hrtext p{ margin: 0; color:#274d3c; text-align: justify;}

/* mobile tinh chỉnh mỏng hơn một chút */
@media (max-width: 767.98px){
    .nk3-hrtext{ padding-left: 16px; }
    .nk3-hrtext::before{ width: 4px; border-radius: 2px; }
    .nk3-intro{font-size: 14px;}
    .nk3-hrtext p{ font-size: 14px;}
}


/* Khoảng cách giữa các hàng */
.nk3-row{ margin-top:18px; }

/* Responsive */
@media (max-width:991.98px){
    .nk3-strawberry{ left:14px; top:14px; width:60px; }
}
@media (max-width:767.98px){
    .nk3-section{ padding:48px 0 156px; }
    .nk3-strawberry{ width:50px; }
    .nk3-badge{ display:block; margin:.35rem auto 0;font-size: 25px }
    .nk3-frame::before{ left:0 } .nk3-frame::after{ right:0 }
    .nk3-hrtext::before{ flex-basis:56px; }
    .nk3-strawberry{  top:-67px;  }
}
/* ===================== SECTION 4 (nk4-) ===================== */
.nk4-section{
    background:#fef4ed;
    padding:64px 0 250px;
    position: relative;
}
.nk4-section-bg{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -120px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fef4ed;
}

/* .nk4-section::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -120px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fef4ed;
} */
.nk4-title{
    color:#1e6b4c;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-bottom:28px;
    text-shadow:0 2px 0 rgba(0,0,0,.08);
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 80px;
}

/* Card trắng chứa văn bản */
.nk4-card{
    position:relative;
    background:#fff;
    border-radius:12px;
    padding:24px 24px 22px;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
    overflow:hidden;
    font-size: 18px;
    text-align: justify;
}

.nk4-card::after{ /* nền chấm nhẹ như demo */
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(#e6ebef 1px,transparent 1.6px);
    background-size:14px 14px;
    opacity:.22; pointer-events:none;
}

/* Câu quote đầu khối */
.nk4-quote{
    font-weight:700;
    color:#2b5f49;
    margin-bottom:1rem;
}

/* Danh sách */
.nk4-list{ padding-left:1.1rem; margin-bottom:0; }
.nk4-list li + li{ margin-top:.5rem; }
.nk4-list strong{ color:#1e6b4c; }

/* Ảnh bên phải */
.nk4-about{ max-width:520px; width:100%; height:auto; }

/* Responsive */
@media (max-width: 991.98px){
    .nk4-section{ padding:56px 0 180px; }
    .nk4-about{ max-width:480px; }
}
@media (max-width: 767.98px){
    .nk4-title{ font-size:1.4rem; margin-bottom: 30px;}
    .nk4-card{ padding:18px; }
    .nk4-about{ max-width:420px; }
    .nk4-section{ padding-top:20px; }
    .nk4-section::before {
        height: 80px;
        top: -80px
    }
    .nk4-card{font-size: 14px;}
}
/* ============ SECTION 5 (nk5-) ============ */
.nk5-section{ padding:56px 0 64px; background:#fff;position: relative; }
.nk5-section-bg{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -120px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff;
}
/* .nk5-section::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -120px;
    width: calc(100% + var(--bleed));
    height: var(--curve-h);
    border-top-left-radius: 100% 180px;
    border-top-right-radius: 100% 180px;
    pointer-events: none;
    z-index: 1;
    background: #fff;
} */
.nk5-head{ margin-bottom:80px; }
.nk5-title{
    color:#1e6b4c; font-weight:800; letter-spacing:.02em; text-transform:uppercase; margin-bottom:8px;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.nk5-pill{
    display:inline-block; background:#f29a3a; color:#fff; font-weight:700;
    padding:.35rem .75rem; border-radius:10px; font-size:.95rem;
}

/* Masonry gallery (trong .eventgall) */
/* NK5 Grid 4×3 */
.nk5-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows: 220px;         /* chiều cao cơ bản cho mỗi ô */
    grid-gap:18px;
}
.nk5-item{
    display:block;
    height:100%;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .25s ease;
}
.nk5-item:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.nk5-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Đặt vị trí & span theo yêu cầu */
.nk5-g1{ grid-column:1; grid-row:1; }
.nk5-g2{ grid-column:2; grid-row:1; }
.nk5-g3{ grid-column:3; grid-row:1 / span 2; } /* r1c3 nối xuống r2 */
.nk5-g4{ grid-column:4; grid-row:1; }

.nk5-g5{ grid-column:1 / span 2; grid-row:2; } /* r2 ô đầu nối 2 ô */
.nk5-g6{ grid-column:4; grid-row:2; }

.nk5-g7{ grid-column:1; grid-row:3; }
.nk5-g8{ grid-column:2; grid-row:3; }
.nk5-g9{ grid-column:3 / span 2; grid-row:3; } /* r3 c3-4 nối nhau */

/* Responsive: về 2 cột, bỏ span để xếp tuần tự */
@media (max-width: 991.98px){
    .nk5-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
        grid-gap: 18px;
    }
    /* reset span cho các ô khác */
    .nk5-grid .nk5-item{ grid-column: auto; grid-row: auto; }

    /* ô cuối cùng span 2 cột */
    .nk5-grid .nk5-g9{ grid-column: 1 / -1; } /* hoặc: 1 / span 2 */
}

@media (max-width: 700px){
    .nk5-section-bg {
        top: -90px;
        height: 90px;
    }
    .nk5-title{
        font-size: 16px;
    }
    .nk5-pill{
        font-size: 12px;
    }
}
@media (max-width: 575.98px){
    .nk5-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
    .nk5-section{padding-top: 20px;}
    .nk5-section::before {
        top: -80px;
        height: 80px;

    }
}


/* ============ STYLES (nk6-) ============ */
.nk6-section{
    position:relative;
    padding:150px 0 100px;
    background:#fff url('/upload/images/student/bg-student.jpg') center/cover no-repeat;
    overflow:hidden;
}
.nk6-title{
    color:#1e6b4c;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-bottom:50px;
    font-size: 18px;
}
.nk6-left .nk6-name{
    font-weight:800;
    color:#ef7f2f;
    font-size:1.8rem;
    margin-bottom:.25rem;
}
.nk6-left .nk6-meta{ color:#667b70; font-weight:600; }

.nk6-figure{ position:relative; text-align:center; }
.nk6-arch{
    position:absolute;
    left:50%; transform:translateX(-50%);
    bottom:6px;
    width:min(76%, 360px);
    height: min(58vw, 400px);
    max-height:400px;
    background:#fef4ed;
    border-radius: 220px 220px 24px 24px / 220px 220px 24px 24px; /* vòm cong */
    opacity:.95;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.08));
}
.nk6-photo{
    position:relative;
    z-index:2;
    width:min(80%, 380px);
    height:auto;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.14));
}

.nk6-bullets{ list-style:disc inside; margin:0; padding:0; }
.nk6-bullets li{ color:#1f4f3a; margin:.35rem 0; }

/* thumbs bar */
.nk6-thumbs-wrap{
    display:flex; align-items:center; justify-content:center;
     gap:12px;
}
/* Div bọc: chịu trách nhiệm bo góc + padding + cắt tràn */
.nk6-rail{
    max-width: 880px;
    width: 100%;
    background: #fff;
    border-radius: 14px;

    padding: 20px 20px;
    overflow: hidden;
    border: 5px solid #fef4ed;
}

/* Scroller thật: KHÔNG padding */
.nk6-thumbs{
    display:flex;
    gap:12px;
    align-items:center;
    overflow-x:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;

    /* để snap/scrollIntoView dừng đúng, chừa ra đúng bằng padding của .nk6-rail */
    scroll-padding-inline:16px;
}
.nk6-thumbs::-webkit-scrollbar{ display:none; }

/* Thumb (giữ như bạn đã chỉnh) */
.nk6-thumb{
    flex:0 0 265px;
    aspect-ratio:3/2;
    height:auto;
    background:#edf3f0;
    border-radius:12px;
    overflow:hidden;
    border:none; outline:none;
    appearance:none; -webkit-appearance:none;
    padding:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    scroll-snap-align:start;
}
.nk6-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }



.nk6-nav{
    width:40px; height:40px; border-radius:50%;
    border:0; color:#fff; font-weight:800;
    background:linear-gradient(180deg,#f39a3a,#ef7f2f);
    box-shadow:0 8px 18px rgba(239,127,47,.35);
}
.nk6-nav:disabled{ opacity:.5; cursor:not-allowed; }
.nk6-left{ text-align:center; margin-bottom:10px; }
/* responsive */
@media (max-width: 1439px){
    .nk6-arch {

        height: min(58vw, 310px);
    }
}

@media (max-width: 1199px){
    .nk6-title {
        font-size: 18px;
        margin-bottom: 0px;
    }

    .nk6-nav {
        height: 35px;
    }
}

@media (max-width: 991.98px){
    .nk6-photo{ width:min(86%, 360px); }
    .nk6-arch{ width:min(84%, 360px); }
}
@media (max-width: 767.98px){
    .nk6-section{ padding:48px 0 56px; }

    .nk6-left .nk6-name{ font-size:1.5rem; }
    .nk6-bullets{ margin-top:8px; text-align:left;
        margin-bottom: 14px; }
    .nk6-thumb{ flex-basis:180px; height:110px; }
}
/* thanh thumb: ẩn scrollbar, cho kéo bằng chuột */
.nk6-thumbs{
    overflow-x: auto;
    -ms-overflow-style: none;     /* IE/Edge cũ */
    scrollbar-width: none;        /* Firefox */
    cursor: grab;
    user-select: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
.nk6-thumbs::-webkit-scrollbar{ display: none; }  /* WebKit */

.nk6-thumbs.is-grabbing { cursor: grabbing; }
/* Ảnh trung tâm: cross-fade mượt */
.nk6-figure{ position: relative; }
.nk6-photo{
    transition: opacity 1.35s ease, transform 1.35s ease;
}
.nk6-photo{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

/* Ảnh tạm chồng lên để fade-in */
.nk6-ghost{
    position:absolute;
    left:50%; transform:translateX(-50%);
    bottom:0;
    width:min(80%, 380px);        /* khớp .nk6-photo */
    height:auto;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.14));
    opacity:0;
    transition: opacity .4s ease, transform .4s ease;
    z-index:3;
}
.nk6-ghost.in{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* Chữ trái & phải: fade/slide nhẹ */
.nk6-stage .nk6-left,
.nk6-stage #nk6Bullets{
    transition: opacity .25s ease, transform .25s ease;
}
.nk6-stage.nk6-swapping .nk6-left,
.nk6-stage.nk6-swapping #nk6Bullets{
    opacity:0;
    transform: translateY(8px);
}

/* ============ PAGE (nk7-) ============ */
:root{
    --nk7-green:#1e6b4c;
    --nk7-orange:#f29a3a;
    --nk7-muted:#6b7e74;
    --nk7-radius:14px;
}

.nk7-page{ padding:40px 0 60px; }
.nk7-title{
    font-weight:800; color:var(--nk7-green);
    letter-spacing:.02em; text-transform:uppercase;
    margin:50px 0; text-align:center;
}

/* Tabs bar (cuộn ngang + scrollbar đẹp) */
.nk7-tabbar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color: rgba(0,0,0,.25) transparent;
    margin-bottom:38px;
}
.nk7-tabbar::-webkit-scrollbar{ height:8px; }
.nk7-tabbar::-webkit-scrollbar-track{
    background:transparent; border-radius:999px;
}
.nk7-tabbar::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.25); border-radius:999px;
}

.nk7-pills{
    white-space:nowrap; padding:4px 2px; display:flex; flex-wrap:nowrap;
    gap:.5rem;
}
.nk7-pills .nav-link{
    border:1px solid #e7ecea; color:#264c3c; font-weight:700;
    border-radius:999px; padding:.38rem .75rem;
    background:#fff;
}
.nk7-pills .nav-link:hover{ background:#f7faf9; }
.nk7-pills .nav-link.active{
    background:var(--nk7-orange); color:#fff; border-color:var(--nk7-orange);
    box-shadow:0 6px 18px rgba(242,154,58,.35);
}

/* GRID cards */
.nk7-card{
    height:100%;
    display:flex; flex-direction:column;
    border-radius:var(--nk7-radius);
    overflow:hidden; background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.nk7-thumb{
    position:relative; overflow:hidden;
    aspect-ratio: 16 / 10; /* giúp đồng nhất chiều cao ảnh */
    background:#f1f4f3;
}
.nk7-thumb img{
    position:absolute; inset:0; margin:auto;
    width:100%; height:100%; object-fit:cover; display:block;
    transform: translateX(0);
    transition: transform .25s ease;
}
.nk7-card:hover .nk7-thumb img{
    transform: translateX(-4px) scale(1.02);
}

.nk7-meta{ padding:12px 14px 16px; }
.nk7-date{
    font-size:.85rem; color:var(--nk7-muted); margin-bottom:6px;
    display:block;
}
.nk7-card-title{
    font-size:1.02rem; font-weight:800; color:#263a32; margin-bottom:6px;
    line-height:1.25;
}
.nk7-card-title a{ color:inherit; text-decoration:none; }
.nk7-card-title a:hover{ color:var(--nk7-green); }

.nk7-excerpt{
    color:#3c544a; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Pagination */
.nk7-pagination .page-link{
    border:none; margin:0 .15rem; border-radius:8px; min-width:34px; text-align:center;
    color:#3a5248; box-shadow:0 2px 8px rgba(0,0,0,.06); background:#fff;
}
.nk7-pagination .page-item.active .page-link{
    background:var(--nk7-orange); color:#fff; box-shadow:0 6px 18px rgba(242,154,58,.35);
}
.nk7-pagination .page-link:hover{ background:#f4f7f6; color:#1f4637; }
.nk7-pagination .page-item.disabled .page-link{ opacity:.45; }

/* Responsive tweaks */
@media (max-width: 991.98px){
    .nk7-thumb{ aspect-ratio: 16 / 9; }
}
@media (max-width: 767.98px){
    .nk7-page{ padding:28px 0 44px; }
    .nk7-title{font-size: 30px;}
}

/* =========== CORE =========== */
:root{
    --nkc-green:#0f7a5e;
    --nkc-green-2:#117a64;
    --nkc-orange:#f6a23a;
    --nkc-deep: #145e4a;
}
body{ color:#243b34;}
/* float */
@keyframes nkcFloat {0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.nkc-float    {animation:nkcFloat 4.8s ease-in-out infinite; will-change:transform;}
.nkc-float-s  {animation:nkcFloat 5.8s ease-in-out infinite;}
/* btn */
.nkc-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#ffb04c,#f19423); color:#fff; font-weight:800;
    border:0; border-radius:10px; padding:.8rem 1.1rem; box-shadow:0 14px 26px rgba(241,148,35,.35);
}
.nkc-btn:hover{color:#fff; filter:saturate(1.05) brightness(1.02);}

/* =========== SECTION 1: HERO CONTACT =========== */
.nkc-hero{
    position:relative; overflow:hidden; padding:160px 0 0px;
    background:#0a6d57 url('/upload/images/contact/bg-contact.jpg') center/cover no-repeat;
    color:#fff;
}
.nkc-hero-bg{
 content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 120%;
    height: 120px;
    background: url(../images/border.png) center / cover no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* 
.nkc-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 120%;
    height: 120px;
    background: url(/upload/images/border.png) center / cover no-repeat;
    pointer-events: none;
    z-index: 2;
} */

.nkc-hero .container{position:relative; z-index:2;}
/* trái: model */
.nkc-model-wrap{ position:relative; max-width:520px; margin-top: 80px; }

.nkc-model{
    display:block; width:100%; height:auto;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.25));
}
/* máy xay bay */
.nkc-blender{
    position: absolute;
    right: -35px;
    top: 103px;
    width: 120px;
    pointer-events: none;
}
/* ly trà bay ở góc màn hình */
.nkc-tea{
    position: absolute;
    left: 30px;
    top: -188px;
    width: 217px;
    z-index: 2;
    pointer-events: none;
}
/* FORM (style tương tự lypham) */
.nkc-form{
    background:#fff; color:#213a32; border-radius:18px;
    padding:40px 40px; box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.nkc-form h3{color:var(--nkc-deep); font-weight:800; margin-bottom:10px;}
.nkc-form small{color:#6a8076; display:block; margin-bottom:20px;}
.nkc-form .form-group{margin-bottom:.85rem;padding-bottom: 10px;}
.nkc-form .form-control{
    height:44px; border-radius:10px; border:1px solid #e5ece9; box-shadow:none;
}
.nkc-form textarea.form-control{height:96px; resize:vertical;}
.nkc-form .form-control:focus{
    border-color:#cfe5de; box-shadow:0 0 0 0.25rem rgba(17,122,100,.10);
}
/* card elevation effect */
.nkc-card-pad{
    background-color: #fffdfb;
    padding: 24px;
    border: 2px solid #ffe1c5;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 110px;
}

/* =========== SECTION 2: SOCIAL / INFO =========== */
.nkc-social{ background:#f6f9f8; padding:110px 0 80px; position:relative; }
.nkc-phone{
    padding:12px;

}
.nkc-phone img{ display:block; width:100%; border-radius:22px; }
.nkc-social-title{ color:var(--nkc-deep); font-weight:800; text-transform:uppercase; }
.nkc-list .item-contact{ display:flex; margin-bottom:16px; }
.nkc-badge{
    background:#ffefe0; color:#d06900; font-weight:800; padding:.15rem .5rem; border-radius:8px;
    margin-left:.35rem; font-size:.85rem;
}
.nkc-list .item-contact h5{ color:var(--nkc-green-2); font-weight:800; margin-bottom:4px; }
.nkc-list .item-contact p{ margin:0; color:#415a51; }

/* =========== Responsive =========== */
@media (max-width:991.98px){
    .nkc-hero{ padding:42px 0 96px; }
    .nkc-tea{ width:130px; left:10px; }
    .nkc-blender{ width:95px; right:-6px; }
}
@media (max-width:767.98px){
    .nkc-hero{ padding:36px 0 92px; }
/*    .nkc-hero::after{ height:90px; bottom:-42px; }*/
    .nkc-model-wrap{ max-width:420px;margin:0 auto; }
    .nkc-tea{ width:120px; left:8px; bottom:-34px; }
}

.lbl-form-page{
    font-weight: bold;
}
.red-star{color: red;}

/* Tiêu đề khối liên hệ ở cột trái */
.nkc-lead{
    margin-left: 4px;
    margin-bottom: 12px;
}
.nkc-cta-pill{
    display:inline-block;
    background:#fff;
    color:#10795f;
    font-weight:800;
    border-radius:12px;
    padding:.38rem .7rem .32rem;
    box-shadow:0 10px 20px rgba(0,0,0,.15), 0 2px 0 rgba(0,0,0,.05) inset;
}
.nkc-cta-sub{
    margin-top:6px;
    color:#f39a3a;                /* cam */
    font-weight:700;
    letter-spacing:.2px;
    font-size: 28px;
}

/* căn chỉnh trên mobile: đặt giữa trên model cho gọn */
@media (max-width: 767.98px){
    .nkc-lead{
        text-align:center;
        margin-left:0;
    }
    .nkc-cta-sub{

        font-size: 24px;
    }

}

.form-contact{padding-left: 8.333333%;}
@media (max-width: 1199px){
    .form-contact{padding-left:25px;}
    .nkc-model-wrap{margin: 0 auto;}
}

.form-organ {
    position: absolute;
    right: 0;
    top: -41px;
    width: 80px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
    animation: enrFloat 3s ease-in-out infinite;
}

@media (max-width:767px) {
    .title-1 {
        font-size: 26px;

    }
    .title-2 {
        font-size: 30px;

    }
    .lead {
        font-size: 14px;
        line-height: 24px;
        font-weight: 300;
        text-align: justify;
    }
    .title-sub-img-gal{
        font-size: 13px;
        text-align: center;
    }
    .nkv-container{
        padding-top: 30px;
    }
}
@media (max-width:500px) {
    .form-contact {
        padding-left: 15px;
        padding-right: 15px;
    }
    .nkc-form {
        /* background: #fff; */

        /* padding: 40px 40px; */
        /* box-shadow: 0 20px 40px rgba(0, 0, 0, .18); */
        background: none;
        padding: 0;
        box-shadow: none;
    }
    .form-organ{width: 50px;}
}

@media (max-width: 540px) {
    .about .slider-bnt .enr-cta__inner {
        gap: 8px;
        padding: 10px 15px 10px 10px;
    }
    .about .slider-bnt .enr-cta__text {
        font-size: 14px;
    }
    .about .slider-bnt .enr-cta__logo {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }
    .about .slider-bnt .enr-cta__logo img {
        width: 18px;
        height: 18px;
    }
    .padding-none-mb{padding:0;}
    .menu-right{padding-left: 58px;}
    
}
.section-about-edit-btn,.nk6-edit,.bg-div-editor-edit-btn,.bg-div-editor-edit-btn,.nkv-slider-edit-btn{display: none;}
.edit-button,.ss-homes-rate-edit-btn,.social-section-edit-btn,.section4-edit-btn,.why-section-edit-btn,.section-video-edit-btn{display: none;}