@charset "utf-8";

/*global style*/
html{margin-top:0 !important;height: 100%;width:100%;box-sizing: border-box;}
ul,li,p,span,em,i,div,img,h1,h2,h3,h4,h5,h6,a,input,textarea,body{padding:0px;margin:0px;border:none;}
body{font:16px "Zalando Sans Expanded", "Arial";font-weight:normal;color:#454545;width:100%;height: 100%;background-color:#fff;margin:0;box-sizing: border-box;overflow-x:hidden;}
body {display: flex;flex-direction: column;}
.main-content {flex: 1;}

/* body::-webkit-scrollbar{width:4px;height:4px;background-color:#faece5;}
body::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:#6f1e05;} */
table{border-collapse:collapse;}
em,i{font-style:normal;}
a{color:#333;text-decoration:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
ul,li{list-style:none;}
img{vertical-align:top;}
hr{display:none;}
figure{margin:0;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important;}
input{font-family: "Zalando Sans Expanded", Arial, sans-serif;outline:none;vertical-align:middle;}
input::placeholder {font-family: "Zalando Sans Expanded", Arial, sans-serif;}
/* input[type='number']{-moz-appearance:textfield;} */
input[type="submit"],button{cursor:pointer;}
textarea{font-family: "Zalando Sans Expanded", Arial, sans-serif;vertical-align:top;resize:none;outline:none;overflow:hidden;}
textarea::placeholder {font-family: "Zalando Sans Expanded", Arial, sans-serif;}

p{font-size:16px;line-height:1.2;}
h1{font-size:64px;line-height:1.2;font-weight:normal;}
h2{font-size:48px;line-height:1.2;font-weight:normal;}
h3{font-size:36px;line-height:1.2;font-weight:normal;}
h4{font-size:18px;line-height:1.2;font-weight:normal;}

.w-100{width: 100%;}
.pt-100{padding: 50px 0 0 0;}
.w-main{margin:0 auto;box-sizing:border-box;}
.flex{display: flex;}
.flex-center{display: flex;justify-content: center;}
.flex-between{display: flex;justify-content: space-between;}

.zoom-effect {transition: transform 0.3s ease;}
.zoom-effect:hover {transform: scale(1.05);}

.bg-zoom {background-size: 100%;background-position: center;background-repeat: no-repeat;transition: background-size 1s ease;}
.bg-zoom:hover {background-size: 110%;}

.clip-img {transform: translateY(-5vw);transform-origin: center center;transition: transform 1.5s ease-out, opacity 1.5s ease-out;opacity: 0;}
.clip-img.show {transform: translateY(0);opacity: 1;}

.fade-in {opacity: 0;transform: translateY(5vw);transition: opacity 2s ease-out, transform 2s ease-out;}
.fade-in.show {opacity: 1;transform: translateY(0);}

.start-animation {animation: slideIn 2s forwards;}
.reveal {display: block;transform: translateY(-200px);opacity: 0;animation: slideIn 2s forwards;visibility: hidden;}
.reveal:nth-child(1) {animation-delay: 0s;}
.reveal:nth-child(2) {animation-delay: 1s;}
.reveal:nth-child(3) {animation-delay: 2s;}
@keyframes slideIn {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 原地旋转动画 */
.rotate {animation: rotate 2s linear infinite;transform-origin: center center;}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.circle {width: 70%;height: 70%;margin: 0 auto;position: absolute;top: 15%;left: 50%;transform: translateX(-50%);}
.circle svg {display: block;overflow: visible;animation: spin 10s linear infinite;}
.circle path {fill: none;}
.circle text {font-size: 9px;fill: white;letter-spacing: 1px;}

@keyframes spin {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(-1turn);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}


.shine-btn{position: relative;display: inline-block;overflow: hidden;cursor: pointer;}
.shine-link {position: relative;display: inline-block;overflow: hidden;cursor: pointer;}

/* 闪光条 */
.shine-link::before {content: "";position: absolute;top: -50%;left: -75%;width: 50%;height: 200%;transform: rotate(25deg);background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 100%
);filter: blur(1px);opacity: 0;pointer-events: none;}
.shine-link:hover::before {
    animation: shine-move 0.7s ease forwards;
}
@keyframes shine-move {
    0% {
        transform: translateX(0) rotate(25deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateX(300%) rotate(25deg);
        opacity: 0;
    }
}

/* 基础样式 */
.underline-left {
    position: relative;
    /* color: #333; */
    text-decoration: none;
    padding-bottom: 4px;
}

/* 下划线伪元素 */
.underline-left::after {
    content: "";
    position: absolute;
    left: 0;              /* 下划线从左边开始 */
    bottom: 0;
    height: 1px;          /* 下划线厚度 */
    width: 100%;          /* 最终宽度为整个a标签宽度 */
    background-color: #565656;
    /* 初始状态：缩放为0，从左边开始 */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s ease; /* 控制动画 */
}

/* 鼠标悬停时：下划线从左到右展开 */
.underline-left:hover::after {
    transform: scaleX(1);
}

/*header*/
#top-header{position:inherit;left:0;top:0;width:100%;padding:0;box-sizing:border-box;z-index:9999;transition: top 0.3s ease;background: #ffffff;}
#top-header.fixed{top: 0;position:fixed;transform: translateY(-100%);animation: slideDown 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);}
/* #top-header.unfixed {animation: slideUp 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;} */
/* #top-header .header_bg{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#7c9296;box-sizing:border-box;z-index:-1;opacity: 0.5;} */
#top-header .header_box{height: 90px;margin:0 auto;align-items: center;max-width: 1550px;width: 90%;display: flex;justify-content: flex-end;box-sizing: border-box;}

.header_left {flex: 1;position: relative;height: 100%;}
#top-header .top-logo{height:120px;width: 310px;background: #91b210;box-sizing: border-box;position: absolute;top: 0;left: 0;z-index: 100;}
#top-header .top-logo a{color: #fff;font-weight: bold;line-height: 1;padding: 15px 30px;font-size: 30px;display: block;}

#top-header .nav{display: inline-block;margin-right: 50px;height: 100%;}
#top-header .nav .menubtn{display: none;}
#top-header .nav ul{display:flex;gap:20px;height:100%;}
#top-header .nav ul li{height:100%;font-size:16px;box-sizing:border-box;display: flex;align-items: center;}
#top-header .nav ul li a.nav-a {color:#454545;box-sizing:border-box;padding: 5px 12px;border-radius: 25px;position: relative;}
/* #top-header  .nav ul li a.underline-anim::after {content: "";position: absolute;left: 50%;bottom: 0;height: 2px;width: 100%;background-color: #454545;transform: translateX(-50%) scaleX(0);transform-origin: center center;transition: transform 0.6s ease;}
#top-header  .nav ul li.open .underline-anim::after {transform: translateX(-50%) scaleX(1);} */
#top-header .nav ul li:hover a.nav-a{background-color: #91b210;color: #ffffff;}
#top-header .nav ul li.active a.nav-a {background-color: #91b210;color: #ffffff;}

#top-header .nav ul li .nav-submenu{
    position: absolute;top: 90px;left: 0;width: 100vw;background: #fff;z-index: 99;box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    /* opacity: 0; */
    /* transform: translateY(10px); */
    overflow: hidden;
    max-height: 0;
    transition: all 0.5s ease-out;
}
#top-header .nav ul li:hover .nav-submenu{
    visibility: visible;
    /* opacity: 1; */
    /* transform: translateY(0); */
    max-height: 300px;
}
#top-header .nav ul li .nav-submenu .nav-submenu-row{width: 100%;display: flex;justify-content: center;align-items: center;gap: 20px;flex-wrap: wrap;padding: 20px 0}
#top-header .nav ul li .nav-submenu .nav-submenu-col{text-align: center;font-size: 13.78px;font-weight: 300;min-width: 176px;line-height: 1.5;}
#top-header .nav ul li .nav-submenu .nav-submenu-col .nav-submenu-col-image{display: block;}
#top-header .nav ul li .nav-submenu .nav-submenu-col .nav-submenu-col-title{margin-top: 10px;}
#top-header .nav ul li .nav-submenu .nav-shop-all {background: #91b210;line-height: 1.5;}
#top-header .nav ul li .nav-submenu .nav-shop-all a{color: #fff;display: block;padding: 3px 0;text-align: center;font-size: 20px;font-weight: 600;}

/* 箭头*/
#top-header .nav ul li .arrow {display: inline-block; margin-left: 12px;width: 8px;height: 8px;border-right: 2px solid #FFF;border-bottom: 2px solid #FFF;
    transform: rotate(-135deg) translateY(-2px);
    transform-origin: center center;
    transition: transform 0.5s ease;
    vertical-align: middle;
}
#top-header .nav ul li.open .arrow {transform: rotate(45deg) translateY(-4px);}

#top-header .header_right{display: flex;align-items: center;gap:20px;}
.search-container{display: flex;align-items: center;width: 120px;}
.search-input{flex:1;border:none;border-radius:20px;background-color:#91b210;padding: 4px 30px 4px 12px;font-size:14px;outline:none;width:90px;color: #ffffff;}
.search-btn{border: none;background: none;cursor: pointer;padding: 5px;margin-left: -30px;color: #ffffff;font-size: 18px;}
.header_cart_user{display: flex;gap:10px;}
.header_cart_user a{font-size: 20px;color: #454545;}

#top-header .menubtn{width:25px;height:20px;margin:0;display: none;opacity: 0.7;}
#top-header .menubtn span{display:flex;justify-content:space-between;width:100%;height:3px;margin-bottom:5px;border-radius:4px;overflow:hidden;transform-origin:9.5% 50%;transition:all .3s;}
#top-header .menubtn span:before{content:"";display:block;width:4px;height:3px;border-radius:5px;background-color:#454545;}
#top-header .menubtn span:after{content:"";display:block;width:18px;height:3px;border-radius:5px;background-color:#454545;}

#top-header.fixed .header_box{height: clamp(60px, 5vw, 90px);}
#top-header.fixed .top-logo{height:clamp(60px, 5vw, 90px);width: 280px;}
#top-header.fixed .top-logo a{padding: 10px 40px;font-size: 22px;}


#top-header.action .nav ul li a{color:#FFF;}
#top-header.action .menubtn{opacity: 1;}
#top-header.action .menubtn span{width:110%;background-color:#454545;}
#top-header.action .menubtn span:before{background-color:#454545;}
#top-header.action .menubtn span:after{background-color:#454545;}
#top-header.action .menubtn .b1{transform:rotate(45deg);}
#top-header.action .menubtn .b2{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
#top-header.action .menubtn .b3{transform:rotate(-45deg);}

/** inner page */
#top-header.header-inner{box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);}
#top-header.header-inner .top-logo{height:90px;width: 280px;}
#top-header.header-inner .top-logo a{padding: 10px 40px;font-size: 22px;}

/* HOME PAGE */
/* Banner */
.banner-section {position: relative;}
.banner-section .swiper {width: 100%;height: 100%;}

.banner-section .swiper-slide {text-align: center;font-size: 18px;background: #444;display: flex;justify-content: center;align-items: center;}
.banner-section .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}

.banner-progress {position: absolute;right: 10%;bottom: 10%;z-index: 9;display: flex;align-items: center;gap: 12px;}
.banner-progress span{font-size: 22.5px;color: #FFFFFF;}
.banner-progress .segmented-progress {display: flex;width: 350px;height: 3px;border-bottom: 1px solid #FFFFFF;}
.banner-progress .progress-segment {flex: 1;height: 100%;position: relative;}
.banner-progress .segment-fill {height: 200%;width: 0%;background-color: #FFFFFF;transition: width 0.1s linear;}
.banner-progress .progress-segment.active .segment-fill {background-color: #FFFFFF;height: 200%;}


.banner-section .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-weight: bold; */
    color: #FFFFFF;
}
.banner-section .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: #FFFFFF;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.bannerSwiper .swiper-button-next, .bannerSwiper .swiper-button-prev {color:#91b210 !important;opacity: 0 !important;}
.bannerSwiper .swiper-pagination-bullet-active {background: #91b210 !important;opacity: 0 !important;}
.bannerSwiper .swiper-button-disabled {opacity: 0 !important;}
.bannerSwiper:hover .swiper-button-next, .bannerSwiper:hover .swiper-button-prev {opacity: 1 !important;}
.bannerSwiper:hover .swiper-button-disabled {opacity: 0.5 !important;}



.who-we-are{width: 100%;background: url(../images/who-bg.webp) repeat-x bottom;padding: 0 0 150px 0;}
.who {display: flex;justify-content: space-between;width:1560px;margin:clamp(30px, 5vw, 100px) auto;box-sizing:border-box;gap: 10px;}
/* .who-img {max-width: 50%;} */
.who-img img {width: 100%;max-width: 400px;}
.who-txt {width: 55%;}
.who-txt p{font-size: clamp(12px, 1.4vw, 20px);font-weight: 300;line-height: 1.4;}
.who-txt .who-btn{margin-top: 20px;text-align: right;}
.who-txt .who-btn a{font-size: 18px;font-weight: 300;padding: 8px 15px;background: #91b210;color: #FFFFFF;border-radius: 25px;}
.who-num {width:1650px;margin:clamp(30px, 5vw, 100px) auto 0 auto;text-align: right;max-width: 100%;}
.who-num img {width: 100%;}

.why-choose-us {width: 100%;background: #0086cf;display: flex;padding: 158px 0 68px 0;gap: 10px;}
.why-choose-left {width: 688px;display: flex;justify-content: space-between;flex-direction: column;padding: 0 0 100px 0;background: url(../images/why-choose-bg.webp) no-repeat left bottom;}
.why-choose-left .why-choose-img {text-align: center;}
.why-choose-left .why-choose-img img {max-width: 90%;}
.why-choose-left .why-choose-txt{text-align: left;padding-left: 210px;color: #FFFFFF;}
.why-choose-left .why-choose-txt h3{font-size: 41px;font-weight: 500;}
.why-choose-left .why-choose-txt p{font-size: 20px;font-weight: 300;margin-top: 10px;}

.why-choose-right {flex: 1;overflow: hidden;position: relative;padding: 0 0 100px 0;}
.why-choose-right .swiper {width: 1963px;height: 100%;}
.why-choose-right .swiper-slide {height: 100%;text-align: center;}
.why-choose-item{position: relative;width: 100%;height: 100%;}
.why-choose-item .text{position: absolute;bottom: 0;left: 0;color: #FFFFFF;text-align: left;padding: 6% 8%;}
.why-choose-item .text h3{font-size: 31.34px;font-weight: bold;}
.why-choose-item .text p{font-size: 20.5px;font-weight: 300;}
/* .why-choose-next{font-size: 50px;color: red;text-align: left;} */
.why-choose-page {text-align: left;position: absolute;left: 0;bottom: 20px;max-width: 1028px;width: 95%;display: flex;justify-content: space-between;align-items: center;}
.why-choose-page-left {display: flex;gap: 40px;align-items: center;}
.why-choose-page-number {font-size: 25px;color: #fff;white-space: nowrap;}
.why-choose-page-number .current {font-size: 36px;}
.why-choose-page-right {display: flex;gap: 28px;font-size: 42px;color: #fff;}
.why-choose-prev, .why-choose-next {display: inline-block;}
.why-choose-prev span, .why-choose-next span {cursor: pointer;background: #0096d3;color: #FFFFFF;font-size: 48px;padding: 5px 0;line-height: 0.9;}
.why-choose-prev span:hover, .why-choose-next span:hover {color: #88b01c;}

.cert-section {background: #91b210;}
.cert-box {width: 1600px;padding: 100px 0;position: relative;}
.cert-box .certSwiper .swiper-slide {text-align: center;transition: transform 0.2s ease, box-shadow 0.1s ease;transform: scale(0.8);z-index: 10;}
.cert-box .certSwiper .swiper-slide.is-third {transform: scale(1);}
.cert-box .cert-box .swiper-slide img {width: 100%;}
.cert-prev {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;margin-left: -150px;}
.cert-next {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;margin-left: 150px;}
.cert-prev span, .cert-next span {font-size: 64px;color: #c3d57c;cursor: pointer;}
.cert-prev span:hover, .cert-next span:hover {color: #FFFFFF;}





.category-section {background-color: #e4e4e4;position: relative;}
.category-box {width: 1500px;max-width: 100%;margin: 0 auto;padding: clamp(20px, 9vw, 178px) 0;display: flex;flex-wrap: wrap;position: relative;z-index: 3;}
.category-box .category-item {width: 33.3%;position: relative;overflow: hidden;}
.category-box .category-item img {width: 100%;}
.category-item-bg {
    background-color: #91b210;
    width: 109%;
    height: 44%;
    position: absolute;
    bottom: -24%;
    left: -9%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transform: rotate(-13deg);
    transform-origin: center;
    display: inline-block;
}
.category-item-bg.bg2 {background-color: #007fc8;}
.category-item-txt {position: absolute;bottom: 6px;left: 0;text-align: right;padding-right: 5%;width: 100%;box-sizing: border-box;}
.category-item-txt a {color: #FFFFFF;font-size: 32px;font-weight: bold;}
.category-item-txt a.small {font-size: 24px;line-height: 1.0;}
.category-bg-txt {z-index: 1;width: 1500px;max-width: 100%;margin: 0 auto;position: absolute;transform:translate(-50%, -50%);left: 50%;top:0;background-color: #111111;height: 0px;}
.category-bg-txt span {
    color: #f3f3f3;
    font-size: clamp(20px, 6vw, 111px);
    font-weight: 800;
    line-height: 0.8;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: 0%;
    top: -90px;
    right: -58%;
    z-index: 1;
}

.product-box {width: 1500px;padding: clamp(20px, 9vw, 152px) 0;}
.product-title {font-size: 59.26px;font-weight: 600;line-height: 0.9;margin-bottom: 15px;}
.product-nav {border-top: 2px solid #454545;border-bottom: 2px solid #454545;display: flex;justify-content: space-between;align-items: center;}
.product-nav ul {display: flex;gap: 0px;}
.product-nav ul li {font-size: 17.5px;padding: 12px 30px;cursor: pointer;transition: all 0.3s ease;}
.product-nav ul li:hover {background-color: #e7e7e7;}
.product-nav ul li.active {background-color: #99b25c;color: #FFFFFF;}
.product-all {padding: 0 5px 0 0;}
.product-all a {font-weight: 300;transition: all 0.3s ease;}
.product-all a:hover {color: #99b25c;}
.product-list {display: flex;gap: 3%;flex-wrap: wrap;display: none;animation: fadeIn 0.6s ease-in-out;}
.product-list.active {display: flex;}
.product-list .product-item {margin-top: 45px;width: 22.75%;position: relative;}
.product-list .product-item img {width: 100%;max-width: 339px;}
.product-list .product-item-info {position: absolute;bottom: 10%;left: 0;width: 100%;text-align: center;}
.product-list .product-item-title {font-size: 17.5px;font-weight: 600;}
.product-list .product-item-pack {font-size: 15px;color: #737373;font-weight: 300;margin-top: 3px;}
.product-list .product-item-view {display: flex;justify-content: center;margin-top: 8px;}
.product-list .product-item-view a {background-color: #91b210;border-radius: 25px;padding: 8px 26px;font-size: 18.5px;font-weight: 300;color: #FFFFFF;}


.service-section {text-align: center;position: relative;padding: 10px 0;}
.service-title {font-size: clamp(20px, 5vw, 50px);font-weight: 600;color: #454545;position: absolute;top: 0px;width: 100%;text-align: center;}
.service-section img{max-width: 90%;}


.corporate-section {padding: clamp(20px, 6vw, 100px) 0 0 0;}
.corporate-box {width: 1500px;padding: clamp(18px, 2.5vw, 52px) 0;background-color: #91b210;display: flex;justify-content: space-between;align-items: center;}
.corporate-box .corporate-title {background: #007fc8;font-weight: bold;line-height: 1;color: #FFFFFF;text-align: center;
    font-size: clamp(18px, 2.5vw, 51px);
    padding: clamp(12px, 1.3vw, 26px) clamp(18px, 2.5vw, 55px);
    margin-left: clamp(-18px, -2.5vw, -50px);
}
.corporate-txt {padding: 26px 38px 0 38px;color: #FFFFFF;font-weight: 300;font-size: clamp(14px, 1vw, 17.5px);}
.corporate-txt .arrow{margin-top: 21px;}
.corporate-right {display: flex;justify-content: space-between;gap: 34px;padding: 0 50px;width: 783px;max-width: 60%;}
.corporate-item {width: 33.3%;}
.corporate-item img {max-width: 100%;}
.corporate-item .line {border-bottom: 1px solid #007fc8;margin-top: 12px;}
.corporate-item .line span {width: 28px;height: 11px;display: block;background: #007fc8;line-height: 0.5;}
.corporate-item .txt{font-size: 17.5px;font-weight: bold;color: #FFFFFF;margin-top: 10px;}


.contact-section {background: url("../images/contact-bg.webp") no-repeat center;background-size: cover;margin-top: clamp(20px, 10vw, 175px);}
.contact-box {width: 1500px;display: flex;justify-content: space-between;align-items: center;padding: 87px 0 78px 0;gap: 20px;}
.contact-box .contact-left {color: #FFFFFF;display: flex;flex-direction: column;gap: 40px;}
.contact-box .contact-left .contact-title {font-size: 60px;font-weight: bold;}
.contact-box .contact-left .contact-txt {font-size: 26px;font-weight: 500;}
.contact-box .contact-left .contact-info {font-weight: 200;font-size: 14px;}
.contact-box .contact-right .index-form {flex: 1;flex-direction: column;max-width: 100%;width: 634px;}
.contact-box .contact-right .index-form .form-item{display: flex;justify-content: space-between;gap: 20px;margin-top: 20px;}
.contact-box .contact-right .index-form .form-item input{flex: 1;padding: 15px 15px;border: none;outline: none;box-sizing: border-box;border-radius: 5px;font-size: 17px;}
.contact-box .contact-right .index-form .form-item textarea{height: 140px;border: none;border-radius: 5px;box-sizing: border-box;padding: 10px;width: 100%;font-size: 17px;}
.contact-box .contact-right .index-form .form-item input::placeholder,.index-form .form-item textarea::placeholder {color: #bcbaba;font-weight: 300;font-size: 17px;opacity: 1;}
.contact-box .contact-right .index-form .form-checkbox{margin-top: 10px;}
.contact-box .contact-right .index-form .form-btn{text-align: right;margin-top: 20px;}
.contact-box .contact-right .index-form .form-btn button{border: 0;background: #91b210;border-radius: 5px;padding: 5px 31px;color: #ffffff;font-size: 20px;font-weight: 300;}


footer{margin-top: 0px;background: #0086cf;color: #FFFFFF;}
footer h3{color: #FFFFFF;font-weight: 600;}
footer a{color: #FFFFFF;}
footer a:hover{opacity: 0.7;}
footer .footer-box{width: 1500px;padding: 72px 0;box-sizing:border-box;}
footer .footer-nav{display: flex;justify-content: space-between;width: 100%;gap: 10px;}
footer .footer-nav-item{color: #FFFFFF;font-size: 17.5px;font-weight: 300;}
footer .footer-nav-item.nav-w1{width: 37.5%;}
footer .footer-nav-item.nav-w2{width: 22.5%;}
footer .footer-nav-item.nav-w4{flex: 1;text-align: right;}
footer .footer-nav-item h3{font-size: 27.5px;font-weight: bold;padding-bottom: 8px;}
footer .footer-nav-item h3.line{border-bottom: 1px solid #FFFFFF;}
footer .footer-nav-item h3.quik-contact{max-width: 374px;}
footer .footer-nav-item h3.help{max-width: 169px;}
footer .footer-nav-item h3.company{max-width: 225px;}
footer .footer-nav-item p{font-size: 17.5px;margin-top: 15px;}
footer .footer-nav-item p span{font-size: 17.5px;margin-right: 12px;}
footer .footer-nav-item p.phone {font-size: 15px;}
footer .footer-nav-item p.address {font-size: 16px;}
footer .footer-nav-item ul li{margin-top: 12px;font-size: 17.5px;font-weight: 300;}
footer .footer-social{display: flex;align-items: center;gap:10px;margin-top: 5px;justify-content: flex-end;}
footer .footer-social a span{font-size: 22px;}
footer .footer-company {border-top: 1px solid #FFFFFF;padding: 10px 0 68px 0;text-align: center;font-size: 12.5px;font-weight: 200;}



.login-box {padding: 0;display: flex;margin: 0 auto;}
.login-left {flex: 1;height: 958px;box-sizing: border-box;background: url(../images/login-bg.webp) no-repeat center right;text-align: right;}
.login-form {margin: 280px 166px 0 0;width: 362px;text-align: left;float: right;}
.login-form h2 {font-size: 46px;font-weight: bold;color: #FFFFFF;line-height: 1.3;}
.login-form p {font-size: 16px;font-weight: 300;color: #FFFFFF;padding: 15px 0 10px 0;background: url(../images/arrow-1.webp) no-repeat top left;}
/* .login-form .input-item{border: 1px solid #565656;border-radius: 25px;padding: 8px 15px;margin-top: 20px;} */
.login-form .input-item input{font-size: 16px;font-weight: 300;border-radius: 25px;padding: 15px 25px;margin-top: 21px;width: 100%;box-sizing: border-box;}
.login-form .btn-item{display: flex;align-items: center;flex-direction: column;margin: 20px 0;}
.login-form .btn-item button{background: #349af7;border: none;border-radius: 25px;padding: 10px 20px;color: #fff;font-size: 16px;cursor: pointer;font-weight: bold;box-sizing: border-box;height: 48px;width: 100%;
    background: url("../images/login-btn-bg.webp") no-repeat;
}
.login-form .btn-item .forgot{font-size: 12px;text-decoration: underline;color: #454545;margin-top: 10px;}
.register-right {flex: 1;text-align: left;}
.register-right .login-form {margin: 280px 0 0 166px;float: left;}
.register-right .login-form h2 {color: #454545;}
.register-right .login-form p {color: #454545;background: url(../images/arrow-2.webp) no-repeat top left;}
.register-right .login-form .input-item input {border: 1px solid #454545;}

.top-inner {display: flex;align-items: center;justify-content: center;}
.top-inner h1 {font-size: clamp(24px, 10vw, 58.67px);font-weight: 900;border-bottom: 7px solid #91b210;color: #FFFFFF;text-align: center;padding: 0 10px;}
.contact-top {background: url("../images/contact-top.webp") no-repeat center #4c3229;height: 320px;}
.contact-list {width: 990px;max-width: 90%;display: flex;justify-content: space-between;margin-top: 76px;}
.contact-list .contac-item {flex: 1;text-align: center;}
.contact-list .contac-item.about-map {width: 340px;flex:none;}
.contact-list .contac-item img {max-width: 100%;}
.contact-list .contac-item p {font-size: 20.2px;color: #949494;font-weight: 300;margin-top: 44px;}
.contact-list .contac-item p a {font-size: 20.2px;color: #949494;font-weight: 300;}

.contact-form-box {width: 808px;max-width: 100%;background: #91b210;padding: 40px 44px;box-sizing: border-box;margin: 50px auto;}
.contact-form-title {color: #FFFFFF;text-align: center;}
.contact-form-title h2 {font-size: 40px;font-weight: 600;font-style: normal;}
.contact-form-title p {font-size: 18.67px;font-weight: 300;}
.contact-form-box .contact-form {flex: 1;flex-direction: column;max-width: 100%;width: 100%;}
.contact-form-box .contact-form .form-item{display: flex;justify-content: space-between;gap: 23px;margin-top: 27px;}
.contact-form-box .contact-form .form-item input{flex: 1;padding: 18px 15px;border: 2px solid #e3e3e3;outline: none;box-sizing: border-box;font-size: 17px;background: #91b210;color: #FFFFFF;font-size: 20px;}
.contact-form-box .contact-form .form-item textarea{height: 140px;border: 2px solid #e3e3e3;box-sizing: border-box;padding: 10px;width: 100%;font-size: 17px;background: #91b210;color: #FFFFFF;font-size: 20px;}
.contact-form-box .contact-form .form-item input::placeholder,.contact-form .form-item textarea::placeholder {color: #c0d28e;font-weight: 300;font-size: 24px;opacity: 1;}
.contact-form-box .contact-form .form-checkbox{margin-top: 10px;}
.contact-form-box .contact-form .form-btn{text-align: right;margin-top: 27px;width: 100%;}
.contact-form-box .contact-form .form-btn button{width: 100%;border: 0;background: url("../images/contact-btn-bg.webp") no-repeat center;border-radius: 25px;padding: 10px 0 15px 0;color: #91b210;font-size: 37.33px;font-weight: 600;background-size: contain;}

.faqs-top {background: url("../images/faqs-top.webp") no-repeat center;height: 217px;margin: 84px auto 0 auto;width: 1500px;max-width: 100%;}
.faqs-section {width: 1500px;background: #f2f2f2;padding: 0 38px 48px 38px;margin: 60px auto;border-radius: 25px;box-sizing: border-box;}
.faqs-section .faqs-item{padding: 30px 0;border-bottom: 1px solid #565656;}
.faqs-section h2{cursor: pointer;font-size: 24.63px;font-weight: 900;display: flex;justify-content: space-between;align-items: center;}
.faqs-section h2 span{font-size: 33.33px;transform: rotate(0deg);transition: transform 0.5s ease;font-weight: normal;}
.faqs-section h2 span.active{transform: rotate(-45deg);transition: transform 0.5s ease;}
.faqs-section .answer{display: block;font-size: 21.33px;font-weight: 300;padding: 10px 0;}

.about-top {background: url("../images/about-top.webp") no-repeat center;height: 217px;margin: 84px auto 0 auto;width: 1500px;max-width: 100%;}
.about-content {width: 1500px;}
.about-content p {font-size: 16px;font-weight: 300;margin: 37px 0;line-height: 2;color: #727272;}
.about-items {width: 1500px;display: flex;justify-content: space-around;align-items: end;gap: 2vw;margin-top: 30px;}
.about-items .about-item {position: relative;padding: 10px;}
.about-items .about-item img {max-width: 100%;border-radius: 50%;}
.about-items .about-item .about-item-info {position: absolute;top: 31%;width: 100%;text-align: center;color: #FFFFFF;}
.about-items .about-item .about-item-info .info-big {font-size: 44.9px;font-weight: 800;line-height: 1;}
.about-items .about-item .about-item-info .info-mid {font-size: 24.95px;font-weight: 800;line-height: 1;}
.about-items .about-item .about-item-info .info-small {font-size: 18.82px;margin-top: 3px;line-height: 1;}
.about-items .about-item .autoplay-progress {position: absolute;right: 0;bottom: 0;z-index: 10;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;transform: scaleX(-1);}
.about-items .about-item .autoplay-progress svg {position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;stroke-width: 1px;stroke: #91b210;fill: none;
    stroke-dasharray: 144.6;stroke-dashoffset: 144.6;transform: rotate(0deg);transition: stroke-dashoffset 3s linear;
}
.about-items .about-item .autoplay-progress.show svg {stroke-dashoffset: 73;}
.about-items .about-item .autoplay-progress.autoplay-top {transform: scaleX(1);}
.about-items .about-item .autoplay-progress.autoplay-top svg {transform: rotate(180deg);}


.about-items2 {width: 1500px;display: flex;justify-content: space-around;align-items: end;gap: 2vw;margin-top: 30px;}
.about-items2 .about-item {position: relative;}
.about-items2 .about-item .about-item-img {width: 300px;height: 300px;border-radius: 50%;background: #007fc8;}


.about-service-section {text-align: center;position: relative;padding: 100px 0 50px 0;background: #91b210;margin: 75px auto;}
.about-service-title {font-size: clamp(20px, 3.5vw, 55px);font-weight: 600;color: #FFFFFF;position: absolute;top: 92px;width: 100%;text-align: center;line-height: 1.0;}
.about-service-section img{max-width: 90%;}

.about-world {background: url("../images/about-world-bg.webp") no-repeat center center;width: 100%;background-size:cover;margin: 75px auto;padding: 100px 0;}
.about-world-box {width: 1500px;display: flex;justify-content: space-between;align-items: center;gap: 20px;}
.about-world .about-left {max-width: 50%;font-size: 21.25px;padding: 58px 35px;font-weight: 300;color: #FFFFFF;background: #90b110;box-sizing: border-box;line-height: 1.5;
    box-shadow:
        0 0 10px #a1be1c,
        0 0 20px #a1be1c,
        0 0 30px #a1be1c,
        0 0 40px #a1be1c;
}
.about-world .about-right {flex: 1;text-align: right;}
.about-world .about-right img {max-width: 100%;}

.about-world-two {background: url("../images/about-world-bg2.webp") no-repeat center center #91b210;width: 100%;margin: 75px auto;padding-top: 65px;}
.about-world-box-two {width: 1500px;text-align: center;color: #FFFFFF;}
.about-world-box-two .about-world-title {font-size: 45px;font-weight: 900;position: relative;display: inline-block;padding: 5px 10px;}
.about-world-box-two .about-world-title::after {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 5px;background-color: #0086cf;border-radius: 5px;}
.about-world-box-two p {font-size: 20px;font-weight: 300;margin-top: 25px;line-height: 2;}
.about-world-bottom {background: #0086cf;height: 42px;position: relative;margin-top: 60px;}
.about-world-bottom span{width: 120px;height: 60px;background: #0086cf;margin: 0 auto;display: block;border-radius: 60px 60px 0 0;
    position: absolute;transform: translate(-50%, -50%);left: 50%;top: 10%;    
}


.about-vision {margin-top: 0px;margin-bottom: 0px;}
.about-vision-box {border-radius: 25px;padding: 75px 67px 75px 88px;width: 1500px;margin: 100px auto;display: flex;justify-content: space-between;
    background: url("../images/about-vision-bg.webp") no-repeat left bottom;background-color: #e3e3e3;
}
.about-vision-left {padding: 105px 0 0 0;}
.about-vision-box .txt1 img {max-width: 100%;}
.about-vision-box .txt2 {font-size: 56.25px;font-weight: 600;margin-top: 49px;}
.about-vision-box .txt3 {position: relative;padding-left: 20px;}
.about-vision-box .txt3 p{font-size: 26.25px;}
.about-vision-box .txt3::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 6px;height: 85%;background-color: #91b210;border-radius: 5px;}
.about-vision-right {max-width: 60%;}
.about-vision-right img{max-width: 100%;}

/** page **/
.page-box{padding: 0 0 clamp(20px, 5vw, 100px) 0;max-width: 1500px;}
.page-box h1{margin: 28px 0;line-height: 1.5;font-weight: bold;font-size: 48px;}
.page-box h2{margin: 28px 0;line-height: 1.5;font-weight: bold;font-size: 36px;}
.page-box p{margin: 28px 0;line-height: 1.5;}

/** single-box  **/
.single-box{padding: 0 0 clamp(20px, 5vw, 100px) 0;max-width: 1500px;}
.single-box h1{margin: 28px 0;line-height: 1.5;font-weight: 600;font-size: 48px;}
.single-box h2{margin: 28px 0;line-height: 1.5;font-weight: 600;font-size: 36px;}
.single-box p{margin: 28px 0;line-height: 1.5;}

/** product details **/
.product-inner{display: flex;justify-content: space-between;padding-top: 60px;width: 1500px;gap: 50px;}
.product-inner-left {flex: 1;width: 50%;}
.product-inner-title {width: 100%;}
.product-inner-category {font-size: 14.25px;font-weight: 300;text-transform: uppercase;}
.product-inner-title h1{font-size: 26.67px;color: #454545;font-weight: bold;padding: 15px 0;line-height: 1.0;}
.product-inner-rating{font-size: 16px;display: inline-flex;margin-bottom: 15px;font-weight: 300;}
.product-inner-rating .rating{min-width: 130px;margin-right: 10px;}

.product-inner-gallery {display: flex;width: 100%;margin: 0 auto;gap: 15px;flex-direction: row-reverse;}
.thumbs-container .thumbs-prev,.thumbs-container .thumbs-next {width: 100%;background: #91b210;text-align: center;color: #ffffff;cursor: pointer;padding: 2px 0;}
.thumbs-container .swiper-button-disabled {opacity: 0.3;}
.product-inner-gallery .thumbs {width: 75px;height: 522px;}
.product-inner-gallery .thumbs .swiper-slide {height: auto;border-radius: 8px;opacity: 0.5;cursor: pointer;border: 2px solid #FFF;transition: 0.3s;}
.product-inner-gallery .thumbs .swiper-slide img{border-radius: 0;}
.product-inner-gallery .thumbs .swiper-slide-thumb-active {opacity: 1;}
.product-inner-gallery .thumbs img {width: 100%;object-fit: cover;display: block;}
.product-inner-gallery .main-gallery {flex: 1;border-radius: 10px;overflow: hidden;}
.product-inner-gallery .main-gallery .swiper-slide img {width: 100%;border-radius: 5%;}


.product-inner-info{flex: 1;padding: 40px 40px 24px 40px;border: 1px solid #454545;border-radius: 25px;}
.product-prices {display: flex;flex-wrap: wrap;gap: 30px;border-bottom: 1px solid #454545;padding: 0 0 15px 0;}
.product-prices-item {text-align: left;}
.product-prices-item .qty {font-size: 13.33px;font-weight: 300;}
.product-prices-item .price {font-size: 24px;font-weight: bold;}
.product-prices-item.active .qty {font-weight: normal;}
.product-prices-item.active .price {color: #91b210;}
.product-inner-desc{font-size: 17.12px;color: #454545;font-weight: 600;padding: 15px 0 0px 0;}
.product-inner-desc-content{font-size: 13.33px;color: #454545;font-weight: 300;padding: 8px 0 0 0;}
.product-inner-label {font-size: 17.12px;color: #454545;font-weight: 600;padding: 15px 0 0px 0;}
.product-inner-num{padding: 8px 0 0 0;display: flex;align-items: center;}
.product-inner-num .num-button{width: 36px;height: 30px;line-height: 30px;text-align: center;font-size: 20px;cursor: pointer;font-weight: 300;border: 1px solid #454545;}
.product-inner-num .num-button.num-dec {border-radius: 15px 0 0 15px;}
.product-inner-num .num-button.num-add {border-radius: 0 15px 15px 0;}
.product-inner-num .num-button:hover{background-color: #91b210;color: #fff;}
.product-inner-num input {width: 90px;height: 30px;border: none;text-align: center;font-size: 17.33px;font-weight: 300;border-top: 1px solid #454545;border-bottom: 1px solid #454545;}
.product-inner-type{padding: 8px 0;display: flex;font-size: 14px;color: #565656;flex-wrap: wrap;gap: 10px}
.product-inner-type .type-label{margin: 0;font-size: 24px;line-height: 1.0}
.product-inner-type .type-item{padding: 8px 20px;margin: 0;border: 1px solid #565656;border-radius: 15px;text-align: center;cursor: pointer;}
.product-inner-type .type-item.active{background: #91b210;color: #fff;border: 1px solid #91b210;}
.product-inner-type .type-item:hover{background: #91b210;color: #fff;border: 1px solid #91b210;}
.product-inner-price{color: #565656;font-size: 24px;}
.product-inner-cart{margin: 20px 0 0 0;display: flex;gap: 14px;border-bottom: 1px solid #454545;padding: 0 0 15px 0;}
.product-inner-cart .x9-product-button {border: 1px solid #454545;border-radius: 25px;text-align: center;padding: 12px 30px;font-size: 19.64px;cursor: pointer;font-weight: bold;}
.product-inner-cart .x9-product-button:hover {background-color: #91b210;border: 1px solid #91b210;color: #fff;}
.product-inner-cart .x9-product-button.x9-chat-button {background-color: #91b210;border: 1px solid #91b210;color: #fff;}
.product-info-policy {display: flex;gap: 10px;margin-top: 20px;}
.product-info-policy h3 {font-size: 17.12px;color: #454545;font-weight: 600;}
.product-info-policy p {font-size: 13.33px;color: #454545;font-weight: 300;}
.product-info-policy .policy-left span {font-size: 20px;}

.product-details-nav-box {margin-top: 50px;background: #91b210;width: 100%;padding: 30px 0;}
.product-details-nav {width: 1500px;}
.product-details-nav ul {display: flex;gap: 0;color: #FFFFFF;}
.product-details-nav ul li {font-size: 22px;cursor: pointer;transition: all 0.2s ease;padding: 5px 30px;border-radius: 25px;font-weight: 500;}
.product-details-nav ul li:hover {border-bottom: 0px solid #91b210;}
.product-details-nav ul li.active {border-bottom: 0px solid #91b210;background-color: #FFFFFF;color: #91b210;}
.product-details-box {width: 1500px;margin: 20px auto;}
/* .product-details-tabs {} */
.product-details-tab {display: none;padding: 20px 0;}
.product-details-tab.active {display: block;}
.product-details-tab img {max-width: 100%;}

.x9-spec-block{margin-bottom:24px;max-width: 900px;}
.x9-spec-title{font-size:26.67px;font-weight:bold;margin:0;padding:5px 0;}
.x9-spec-grid{border:2px solid #bfbfbf;font-size:13.33px;font-weight: 300;}
.x9-spec-row{display:grid;grid-template-columns: 1.2fr 1.8fr 1.2fr 1.8fr;}
.x9-spec-row > div{padding:8px 16px;border-bottom:2px solid #bfbfbf;}
.x9-spec-row:last-child > div{border-bottom:none;}
.x9-spec-row .label{background:#f2f2f2;font-weight:bold;}

.x9-spec-lead{border:2px solid #bfbfbf;font-size:13.33px;font-weight: 300;display: flex;}
.x9-spec-lead .x9-lead-row{flex: 1;}
.x9-spec-lead .x9-lead-row > div{padding:8px 16px;border-bottom:2px solid #bfbfbf;}
.x9-spec-lead .x9-lead-row > div:last-child{border-bottom:none;}
.x9-spec-lead .x9-lead-row.head{background:#f2f2f2;font-weight:bold;}



.product-content{width: 100%;}
.product-fda{position: relative;width: 100%;background-color: #98af5c;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;margin-top: 50px;z-index: 199;}
.product-fda-box{display: flex;justify-content: space-between;padding: 50px 0;}
.product-fda-box h3{color: #FFF;font-size: 50px;font-weight: 600;line-height: 1.1;}
.product-fda-box .product-fda-img{display: flex;gap: 10px;width: 50%;justify-content: space-around;}
.product-fda-box .product-fda-img img{height: 117px;}

.product-content1{position: relative;display: flex;background-color: #b8cd98;margin-top: -50px;align-items: center;}
.product-content1 .img{width: 50%;}
.product-content1 .img img{width: 100%;}
.product-content1 .text{padding: 0 0 0 5%;width: 45%;}
.product-content1 h3{color: #FFF;font-size: 40px;font-weight: 500;line-height: 1.1;}
.product-content1 p{color: #FFF;font-size: 26px;margin-top: 54px;font-weight: 300;}

.product-content2{display: flex;background-color: #b8cd98;align-items: center;background-size: cover;flex-direction: row-reverse;}
.product-content2 .img{width: 50%;}
.product-content2 .img img{width: 100%;}
.product-content2 .text{padding: 0 5% 0 0;width: 45%;text-align: right;}
.product-content2 h3{color: #FFF;font-size: 40px;font-weight: 500;line-height: 1.1;}
.product-content2 p{color: #FFF;font-size: 26px;margin-top: 54px;font-weight: 300;}
.product-content3{background: url(../images/product_content_4.webp) no-repeat center;background-size: cover;text-align: center;width: 100%;padding: 10vw 0;position: relative;}
.product-content3 img{max-width: 90%;}
.product-content3 p{font-size: 47px;font-weight: 500;color: #ffffff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.product-content3 p.p2{top: 75%;}
.product-content3-2{width: 100%;;position: relative;text-align: center;}
.product-content3-2 img{width: 100%;}
.product-content3-2 p{font-size: 47px;font-weight: 500;color: #ffffff;position: absolute;top: 70%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.product-content4{background-color: #ebe8e3;text-align: left;position: relative;}
.product-content4 .img1{margin-left: 0;}
.product-content4 .img2{position: absolute;top: 50%;left: 70%;transform: translate(-50%, -50%);width: 45%;}
.product-content5{background-color: #c1cbb0;text-align: left;position: relative;border: 2vw solid #FFF;box-sizing: border-box;}
.product-content5 .img1{margin-left: 5%;}
.product-content5 .img2{position: absolute;top: 50%;left: 60%;transform: translate(-50%, -50%);width: 45%;}
.product-content6{background-color: #aec5b1;position: relative;box-sizing: border-box;text-align: right;}
.product-content6 .img1{margin-right: 0;max-width: 100%;}
.product-content6 .img2{position: absolute;top: 50%;left: 30%;transform: translate(-50%, -50%);width: 50%;max-width: 960px;}

.product-related{width: 1500px;padding: 86px 0;}
.product-related-title{text-align: left;font-size: 26.67px;font-weight: bold;border-bottom: 7px solid #91b210;display: inline-block;margin-bottom: -2px;padding-bottom: 8px;}
.product-related-box{display: flex;gap: 3.5%;border-top: 2px solid #7f7f7f;}
.product-related-box .product-related-item{margin: 44px 0 0 0;max-width: 20%;}
.product-related-box .product-related-img img{width: 100%;max-width: 380px;}
.product-related-box h3{font-size: 16.67px;font-weight: 500;padding-top: 10px;}
.product-related-box p{font-size: 16.67px;padding: 10px 0;font-weight: 300;border-bottom: 1px solid #565656;}
.product-related-box .product-related-bottom{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;}
.product-related-box .product-related-bottom .product-related-price{font-size: 16.67px;font-weight: 300;}

.product-reviews{width: 100%;background: #ffffff;padding: 0;}
.product-reviews h2{text-align: center;color: #565656;font-size: 54px;margin: 0 0 36px 0;font-weight: 500;}

/* rate section */
.review-section {display: flex;flex-wrap: wrap;gap: 30px;margin-bottom: 20px;}
.stats-container {width: 780px;padding: 25px 0;display: flex;justify-content: space-between;max-width: 100%;align-items: center;gap: 20px;}
.average-rating {text-align: center;display: flex;align-items: center;justify-content: center;gap: 2%;}
.average-score {font-size: 45.65px;font-weight: 600;line-height: 1;}
.total-reviews {color: #9d9d9d;font-size: 13.33px;font-weight: 300;margin-top: 5px;white-space: nowrap;}
.total-star{text-align: left;font-size: 24px;color: #91b210;}
.rating-distribution {width: 340px;max-width: 50%;background: #f7f7f7;border-radius: 15px;padding: 12px 15px;box-sizing: border-box;}
.rating-item {display: flex;align-items: center;margin-top: 7px;}
.rating-label {width: 142px;font-size: 12px;font-weight: 200;box-sizing: border-box;}
.rating-stars {width: 37px;font-size: 16.67px;display:flex;justify-content: space-between;align-items: center;}
.rating-stars span{color: #91b210;}
.progress-container {flex: 1;height: 3px;background: #b7b7b7;border-radius: 5px;overflow: hidden;}
.progress-bar {height: 100%;background: #91b210;border-radius: 5px;}
.rating-percent {width: 30px;text-align: right;font-size: 12px;}

/* rate form */
.rating-form {flex: 0.8;min-width: 240px;padding: 50px 25px;display: flex;flex-direction: column;align-items: center;position: relative;}
.rating-form::before,.rating-form::after {content: "";position: absolute;top: 15%;bottom: 15%;right: 0;width: 1px;background: #565656;}
.rating-form::before {left: 0;}
.rating-form::after {right: 0;}
.rating-form h3 {font-size: 30px;font-weight: 500;}
.x9-star-rating {display: flex;margin: 15px 0;flex-direction: row-reverse;gap: 5px;}
.x9-star-rating input {display: none;}
.x9-star-rating label {font-size: 3.5rem;color: #ccc;cursor: pointer;transition: all 0.2s;}
.x9-star-rating input:checked ~ label,
.x9-star-rating label:hover,
.x9-star-rating label:hover ~ label {color: #8fb15a;}
.product-inner-rating .rating {min-width: unset !important;}
.rating-text {font-size: 1.2rem;margin-bottom: 20px;font-weight: 500;}

/* message form */
.red{color: #ff3a64;}
.write-review {flex: 1;border-radius: 10px;padding: 25px 0;box-sizing: border-box;}
.form-group-2{display: flex;gap: 15px;}
.form-group {margin-bottom: 15px;flex: 1;}
.from-email{flex: 2;}
.form-group label {display: block;margin-bottom: 8px;font-weight: 300;font-size: 16.67px;}
.form-control {padding: 10px 15px;border: 1px solid #565656;border-radius: 10px;font-family: inherit;transition: border 0.2s;box-sizing: border-box;}
.form-control:focus {outline: none;border-color: #000000;}
textarea.form-control {min-height: 50px;resize: vertical;width: 100%;}
.checkbox-group {display: flex;align-items: flex-start;margin-bottom: 20px;}
.checkbox-group input {margin-right: 5px;}
.rate-form-btn{text-align: right;}
.submit-btn {font-size: 20px;background: #91b210;color: white;border: none;padding: 13px 35px;font-weight: 500;cursor: pointer;transition: all 0.2s;line-height: 1.0;border-radius: 10px;}
.submit-btn:hover {transform: translateY(-2px);opacity: 0.9;}
.saveInfo{font-size: 12px;font-weight: 300;}

/* rate list */
.reviews-container {border-radius: 10px;}
.reviews-container .review-card {display: flex;gap: 20px;padding: 30px 0;border-top: 1px solid #616161;}
.reviews-container .review-card:last-child {border-bottom: 1px solid #616161;}
.reviews-container .user-avatar {width: 40px !important;height: 40px !important;object-fit: cover;border-radius: 50%;}
.reviews-container .user-info {flex: 1;}
.reviews-container .user-top {display: flex;justify-content: space-between;}
.reviews-container .user-name {font-weight: 500;margin-bottom: 5px;font-size: 14.67px;}
.reviews-container .user-meta {font-size: 0.8rem;color: #6c757d;margin-bottom: 8px;}
.reviews-container .review-stars {color: #8fb15a;margin-bottom: 8px;}
.reviews-container .review-meta {display: flex;justify-content: space-between;align-items: center;font-size: 0.8rem;color: #6c757d;}
.reviews-container .review-date{font-size: 12px;font-weight: 300;}

.helpful-buttons {display: flex;gap: 10px;}
.helpful-btn {background: none;border: 1px solid #dee2e6;padding: 3px 10px;border-radius: 15px;cursor: pointer;transition: all 0.2s;}
.helpful-btn:hover {background: #e9ecef;}

/* search product */
.product-search{width: 100%;background: #f0f0f0;padding: 50px 0;}
.product-search h2{text-align: left;color: #565656;font-size: 24px;font-weight: 400;max-width: 1500px;margin: 20px auto 0 auto;max-width: 90%;}
.product-search h2 span {color: #91b210;}
.product-search-box{display: flex;gap: 4%;max-width: 1500px;max-width: 90%;margin: 0 auto;flex-wrap: wrap;}
.product-search-box .product-search-item{margin: 3vw 0 0 0;width: 22%;}
.product-search-box .product-search-img img{width: 100%;border-radius: 40px;}
.product-search-box h3{font-size: 20px;font-weight: 500;padding-top: 10px;}
.product-search-box p{font-size: 16px;padding: 10px 0;font-weight: 300;border-bottom: 1px solid #565656;}
.product-search-box .product-search-bottom{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;}
.product-search-box .product-search-bottom .product-search-price{font-size: 14px;font-weight: bold;color: #91b210;}
.no-results{text-align: center;font-size: 20px;font-weight: 500;padding: 50px 0;}


.product-empty-info {text-align: center;font-size: 36px;font-weight: 500;padding: 5vw 0;}

/* NEWS */
.news-top {background: url("../images/news-top.webp") no-repeat center;height: 217px;margin: 84px auto 0 auto;width: 1500px;max-width: 100%;}
.news-list{display: flex;gap: 4%;flex-wrap: wrap;margin-top: 5vw;}
.news-list .news-item{width: 48%;margin-bottom: 2%;display: flex;flex-direction: column;}
.news-list .news-item .news-item-info {border-bottom: 1px solid #bfbfbf;padding-bottom: 20px;flex: 1;}
.news-list .news-item .news-img{display: flex;align-items: center;padding: 10px 0;}
.news-list .news-item .news-img img{width: 100%}
.news-list .news-item .news-date{font-size: 14px;color: #565656;margin-top: 8px;display: none;}
.news-list .news-item .news-type{font-size: 12px;color: #565656;margin-top: 8px;font-weight: 300;}
.news-list .news-item h3{font-size: 21.33px;line-height: 1.2;padding: 5px 0;font-weight: 300;}
.news-list .news-item .news-excerpt{font-size: 14.67px;font-weight: 300;}
.news-list .news-item a.read-more{transition: all .1s linear;font-size: 10px;margin-top: 5px;font-weight: 200;}
.news-list .news-item a:hover{color: #8fb15a;}

/* my account */
.x9-my-account{width: 100%;background:#eeeeee;}
.my-account-box{padding: 2vw 0 5vw 0;width: 1500px;}
.my-account-box h2{line-height: 1.5;}
.my-account-box p{line-height: 1.5;}
.my-account-top{padding: 20px 0;font-size: 19px;}
.my-login-box{padding: 5vw 0;width: 1500px;}

.x9-dashboard .dashboard-top{display: flex;gap: 10px;justify-content: space-between;align-items: flex-end;border-bottom: 1px solid #c5c9bb;padding-bottom: 18px;flex-wrap: wrap;}
.x9-dashboard .dashboard-avatar{display: flex;gap: 20px;align-items: flex-end;}
.x9-dashboard .dashboard-img img{border-radius: 50%;border: 3px solid #b6cd7a;}
.x9-dashboard .dashboard-name{font-size: clamp(16px, 8vw, 34px);font-weight: 600;}
.x9-dashboard .dashboard-email,.dashboard-birthday,.dashboard-phone{font-size: clamp(12px, 4vw, 18px);}
.x9-dashboard .dashboard-edit-profile a{font-size: clamp(12px, 4vw, 19px);font-weight: 500;color: #ffffff;background: #b6cd7a;padding: 3px 15px;border-radius: 12px;}
.x9-dashboard .dashboard-body{display: flex;gap: 1.3%;flex-wrap: wrap;margin-top: 20px;}
.x9-dashboard .dashboard-item{width: 24%;}
.x9-dashboard .dashboard-item img{width: 100%;}


.x9-MyCoupons h2{line-height: 1;font-size: 34px;font-weight: 600;}
.coupon-tabs{display: flex;gap: 7px;margin-top: 15px;}
.coupon-tabs .tab-btn{background: #ffffff;border-radius: 11px;border: 1px solid #565656;font-size: 18px;font-weight: 500;padding: 3px 15px;color: #565656;}
.coupon-tabs .tab-btn.active{background: #b6cd7a;color: #ffffff;border: 1px solid #b6cd7a;}
.coupon-content{border-top: 1px solid #d2d2d2;margin-top: 10px;padding: 18px 0;}
.tab-content{display: none;}
.tab-content.active {display: block}
.coupon-list {display: flex;flex-wrap: wrap;gap: 40px;}
.coupon-item {display: flex;}
.coupon-item .counpon-item-left {width: 203px;height: 119px;box-sizing: border-box;background: linear-gradient(135deg, #cae67f, #b6cd7a);border-top: 1px solid #b6cd7a;border-left: 1px solid #b6cd7a;border-radius: 20px;}
.coupon-item .coupon-amount{font-size: 18px;color: #ffffff;display: flex;align-items: center;justify-content: center;gap: 3px;margin-top: 12px;}
.coupon-item .coupon-amount h3{font-size: 53px;line-height: 0.9;font-family: "Impact", sans-serif;}
.coupon-item .coupon-amount .coupon-amount-per {font-size: 24px;font-weight: 600;line-height: 1;}
.coupon-item .coupon-amount .coupon-amount-off {font-size: 20px;font-weight: 600;line-height: 1;}
.coupon-item .coupon-valid {font-size: 14px;color: #ffffff;text-align: center;}
.coupon-item .coupon-copy {display: flex;align-items: center;width: 100%;justify-content: center;margin-top: 5px;}
.coupon-item .coupon-copy input{width: 90px;background: #ffffff;border-radius: 20px 0 0 20px;padding: 3px 5px 3px 10px;box-sizing: border-box;font-size: 13px;font-weight: 300;color: #565656;}
.coupon-item .coupon-copy .copy-btn{border-radius: 0 20px 20px 0;border: 0;background: #ff4f85;padding: 3px 8px;font-size: 13px;color: #ffffff;font-weight: 500;}
.coupon-item .counpon-item-right {width: 50px;height: 119px;box-sizing: border-box;background: #b6cd7a;border-radius: 20px;border-left: 1px dashed #FFFFFF;}
.coupon-item .counpon-item-right span {display: inline-block;transform: rotate(90deg);transform-origin: 6px 15px;font-size: 12px;color: #FFFFFF;margin: 0 0 0 10px;}

/* .x9-my-order-detail{} */
.x9-my-order-detail h2{font-size: 30px;font-weight: 600;display: flex;align-items: center;gap: 5px;}
.order-summary{display: flex;gap: clamp(5px, 1vw, 20px);border-bottom: 1px solid #d2d2d2;padding-bottom: 10px;flex-wrap: wrap;}
.order-summary p {font-size: clamp(12px, 4vw, 15px);}
.order-summary p span{background: #b6cd7a;color: #ffffff;padding: 2px 11px;border-radius: 10px;font-weight: 500;font-size: clamp(12px, 4vw, 16px);}
.order-items {width: 100%;margin-top: 10px;}
.order-items th{border-bottom: 1px solid #d2d2d2;font-size: clamp(14px, 1.5vw, 24px);font-weight: 500;padding: 10px 0 20px 0;}
.order-items td{border-bottom: 1px solid #d2d2d2;padding: 20px 0;font-size: clamp(12px, 3.5vw, 22px);font-weight: 500;}
.order-product-item{display: flex;gap: clamp(10px, 1vw, 20px);font-size: clamp(12px, 2vw, 16px);}
.order-product-item img{width: clamp(60px, 7.5vw, 122px);border-radius: 15px;}
.order-product-item h3{font-size: clamp(14px, 1.5vw, 24px);font-weight: 500;}
.order-product-item p{font-size: clamp(12px, 0.5vw, 16px);margin-top: 5px;}
.order-totals {padding: clamp(10px, 4vw, 40px) 0;}
.order-totals p{display: flex;justify-content: flex-end;gap: 10px;}
.order-totals p strong{font-size: clamp(12px, 3.5vw, 19px);font-weight: normal;}
.order-totals p span{font-size: clamp(12px, 3.5vw, 18px);display: inline-block;width: clamp(150px, 50vw, 180px);text-align: right;}
.order-totals p.order-total-amount{margin-top: clamp(10px, 3vw, 20px);}
.order-totals p.order-total-amount strong{font-weight: 600;}
.order-totals p.order-total-amount span{font-weight: 600;}
.order-addresses h3{font-size: clamp(10px, 5vw, 24px);font-weight: 600;padding: clamp(10px, 3vw, 20px) 0;border-bottom: 1px solid #d2d2d2;border-top: 1px solid #d2d2d2;}
.address-txt{padding: clamp(10px, 3vw, 20px) 0;line-height: 1.5;font-weight: 300;font-size: clamp(12px, 3.5vw, 18px)}
.order-actions{display: flex;justify-content: space-between;margin-top: 10px;}

/* .my-address-top {} */
.my-address-top h2{font-size: 30px;font-weight: 600;}
.my-address-top p{font-size: 14px;border-bottom: 1px solid #d2d2d2;padding-bottom: 5px;}
.my-address-top h3{font-size: 24px;font-weight: 600;}
.woocommerce-Address{margin-top: 30px;}
.woocommerce-Address-title{padding: 0 0 5px 0;}
/*.woocommerce-Address-title{display: flex;align-items: center;justify-content: space-between;}*/
.avatarPreview{width: 150px;height: 150px;border-radius:50%;border:1px solid #ddd;margin-bottom:8px;}

/** woocommerce */
.woocommerce .star-rating{color: #91b210 !important;}
.woocommerce .star-rating {float: unset !important;}
.woocommerce span.stars {position: relative;height: 1em;width: 1em;text-indent: -999em;display: inline-block;text-decoration: none;}
.woocommerce span.stars::before {display: block;position: absolute;top: 0;left: 0;width: 1em;height: 1em;line-height: 1;font-family: WooCommerce;content: "\e020";content: "\e020"/"";text-indent: 0}
div.woocommerce header {position: relative;}

.woocommerce-MyAccount-navigation{width: 395px;max-width: 25%;background-color: #FFFFFF;min-height: 600px;border-radius: 25px;padding: 22px 0;box-sizing: border-box;}
.woocommerce-MyAccount-navigation ul{padding: 30px 0;}
.woocommerce-MyAccount-navigation ul li{padding: 13px 0  13px 60px;cursor: pointer;font-size: 20px;display: flex;align-items: center;gap: 5px;}
.woocommerce-MyAccount-navigation ul li img{width: 23px;height: 23px;}
.woocommerce-MyAccount-navigation ul li.is-active{background-color: #b6cd7a;color: #ffffff;}
.woocommerce-MyAccount-navigation ul li.is-active a{color: #ffffff;}
.woocommerce-MyAccount-content{flex: 1;min-height: 600px;background: #ffffff;border-radius: 25px;border: 1px solid #FFFFFF;width: 73% !important;box-sizing: border-box;padding: 40px;}

.woocommerce-MyAccount-content.home{background: linear-gradient(to bottom,#e7efd4 0%,#ffffff 50%,#ffffff 50%,#ffffff 100%);}

.woocommerce-info {border-top-color: #8fb15a !important;}
.woocommerce-info::before {color: #8fb15a !important;}

.my-account-box .woocommerce .col2-set .col-1, .my-account-box .woocommerce-page .col2-set .col-1 {float: unset !important;width: 100% !important;}
.my-account-box .woocommerce .col2-set .col-2, .my-account-box .woocommerce-page .col2-set .col-2 {float: unset !important;width: 100% !important;}
.woocommerce-Address-title .edit{padding: 5px 10px;color: #ffffff;background: #8fb15a;border-radius: 5px;}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
    color: #FFFFFF !important;
    background-color: #8fb15a !important;
    margin: 5px 0 0 0;
}
.x9-login,.x9-register{background: #ffffff;min-height: 250px;}
.x9-login .input-text,.x9-register .input-text{border-radius: 25px !important;}

/** avatar upload */
.x9-avatar-upload {position: relative;display: inline-block;cursor: pointer;}
.x9-avatar-label {display: inline-block;position: relative;border-radius: 50%;overflow: hidden;width: 100px;height: 100px;border: 3px solid #b6cd7a;transition: all 0.3s ease;}
.x9-avatar-label:hover {border-color: #999;}
.x9-avatar-label img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;display: block;}
.x9-avatar-overlay {position: absolute;bottom: 0;width: 100%;background: rgba(0,0,0,0.6);color: #fff;text-align: center;font-size: 12px;padding: 6px 0;opacity: 0;transition: opacity 0.3s;}
.x9-avatar-label:hover .x9-avatar-overlay {opacity: 1;}
.x9-avatar-modal {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0,0,0,0.5);display: none;justify-content: center; align-items: center;z-index: 9999;}
.x9-avatar-modal-content {background: #fff;padding: 20px;border-radius: 12px;max-width: 800px;width: 100%;text-align: center;}
.x9-avatar-modal .cropper-wrapper img {max-width: 100%;}
.x9-avatar-modal .modal-actions {margin-top: 15px;display: flex;justify-content: space-between;}
.x9-avatar-modal .modal-actions button{border: none;background: #8fb15a;color: #ffffff;padding: 5px 15px;border-radius: 8px;font-size: 16px;}
.x9-avatar-modal .modal-actions button.cancelCrop{background: #fff;color: #565656;border: 1px solid #cbc1c1;}
.x9-avatar-modal .modal-actions button.cancelCrop:hover{background: #ddd;color: #000;}



/* notification css */
.notifications {position: fixed;top: 0;right: 0;z-index: 99999;width: 570px;}
.notification {background-color: white;border: 1px solid #797979;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);padding: 0;margin-bottom: 15px;transform: translateY(-100%);opacity: 0;transition: transform 0.3s, opacity 0.3s;overflow: hidden;}
.notification.show {transform: translateY(0);opacity: 1;}
.notification.hide {transform: translateY(-100%);opacity: 0;}
.notification-header {padding: 15px 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #797979;}
.notification-title {font-size: 18px;font-weight: 500;}
.notification-close {background: none;border: none;font-size: 32px;cursor: pointer;padding: 0;margin: 0;}
.notification-body {padding: 15px;width: 100%;box-sizing: border-box;}

.sanitex-loading {position: relative;color: transparent;pointer-events: none;background-color: #ccc;}
.sanitex-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin360 0.8s linear infinite;
}
@keyframes spin360 {
    to { transform: rotate(360deg); }
}


/** product */
.sanitex-cart-content {width: 100%;}
.sanitex-cart-product {display: flex;gap: 10px;border-bottom: 1px solid #797979;padding: 10px 0;}
.sanitex-cart-product-img {width: 100px;}
.sanitex-cart-product-img img{width: 100px;}
.sanitex-cart-product-info {flex: 1;}
.sanitex-cart-product-info p {font-size: 16px;font-weight: 500;}
.sanitex-cart-product-info .type {font-size: 13.33px;margin-top: 5px;font-weight: 300;}
.sanitex-cart-product-info .price {font-size: 13.33px;margin-top: 5px;font-weight: 300;}
.sanitex-cart-view {text-align: center;width: 100%;border: 1px solid #000000;padding: 20px 0;margin-top: 30px;font-size: 20.61px;font-weight: bold;}
.sanitex-cart-continue {text-align: center;font-size: 14px;font-weight: 300;text-decoration: underline;margin-top: 5px;cursor: pointer;}



/** product cat */
.product-cat-banner{background: #ffff;position: relative;}
.product-cat-banner-left img {width: 59.5%;}
.product-cat-banner-right{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.product-cat-banner-right-box{width: 90%;max-width: 1500px;text-align: right;margin: 0 auto;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.product-cat-banner-txt {text-align: right;width: 36%;margin: auto 0 auto auto;}
.product-cat-banner-right-box h1{font-size: 45px;color: #4f684f;font-weight: bold;}
.product-cat-banner-right-box p{font-size: 14px;color: #4f684f;font-weight: 300;width: 100%;}
.product-cat-banner-r-top {height: 100px;}

.product-cat-title {width: 90%;max-width: 1500px;margin: 54px auto;background: #a7c140;display: flex;justify-content: space-between;align-items: center;}
.product-cat-title-txt {font-size: 17px;font-weight: 500;padding: 15px 30px;color: #ffffff;text-transform: uppercase;}
.triangle-down::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 25px;
    vertical-align: middle;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #91b210;
}

.sanitex-product-list {width: 1500px;display: flex;gap: 3.75%;flex-wrap: wrap;}
.sanitex-product-item {width: 17%;text-align: center;margin-bottom: 50px;}
.product-card__title {font-size: 15px;font-weight: 600;margin-top: 20px;}
.product-card__var {font-size: 12px;font-weight: 300;margin-top: 5px;}
.product-card__price {font-size: 14px;font-weight: bold;color: #91b210;margin-top: 5px;}
.no-products-data {text-align: center;font-size: 20px;font-weight: 600;padding: 50px 0;}



.wc-block-cart__submit-container {background: #91b210;}
.wc-block-cart__submit-container a {color: #FFFFFF;}
.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {background: #91b210;border: none;color: #ffffff;font-size: 16px;font-weight: bold;}

.pagination-wrapper {width: 100%;padding: 50px 0;}
.pagination-wrapper .page-numbers {width: 100%;display: flex;align-items: center;justify-content: center;gap: 20px;}
.pagination-wrapper .page-numbers li a {border: 1px solid #cbc1c1;padding: 5px;}
.pagination-wrapper .page-numbers li a:hover {background: #91b210;color: #FFFFFF;}
.pagination-wrapper .page-numbers li span {padding: 5px;}






.message-overlay {z-index: 1000;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;}
.message-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;border-radius: 12px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: none;z-index: 1001;width: 500px;max-width: 90vw;animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
    from {opacity: 0;transform: translate(-50%, -60%);}
    to {opacity: 1;transform: translate(-50%, -50%);}
}
.message-modal-content {overflow: hidden;}
.message-modal-header {display: flex;justify-content: space-between;align-items: center;padding: 20px 24px;border-bottom: 1px solid #eee;background: #91b210;color: white;}
.message-modal-header h3 {margin: 0;font-size: 18px;font-weight: bold;}
.message-close {font-size: 24px;cursor: pointer;transition: opacity 0.3s ease;}
.message-close:hover {opacity: 0.7;}
.message-modal-body {padding: 24px;}
.message-form-group {margin-bottom: 20px;}
.message-form-group label {display: block;margin-bottom: 6px;font-weight: 500;color: #454545;}
.message-form-group input,
.message-form-group textarea {width: 100%;padding: 10px 12px;border: 2px solid #e1e5e9;border-radius: 6px;font-size: 14px;transition: border-color 0.3s ease;box-sizing: border-box;}
.message-form-group input:focus,
.message-form-group textarea:focus {outline: none;border-color: #91b210;box-shadow: 0 0 0 3px rgba(2, 238, 22, 0.1);}
.message-modal-footer {display: flex;justify-content: flex-end;gap: 12px;margin-top: 24px;padding: 0 0 24px 0;}
.message-btn-cancel,
.message-btn-submit {padding: 10px 20px;border: none;border-radius: 6px;cursor: pointer;font-size: 16px;transition: all 0.3s ease;}
.message-btn-cancel {background-color: #f8f9fa;color: #666;border: 1px solid #ddd;}
.message-btn-cancel:hover {background-color: #e9ecef;}
.message-btn-submit {background: #91b210;color: white;}
.message-btn-submit:hover {transform: translateY(-1px);}
.x9-modal-message {display:none;text-align: left;padding: 10px 0;flex: 1;font-size: 14px;opacity: 0.9;}
/* 新增成功提示样式 */
.x9-success-message {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: #91b210;
    color: white;
    padding: 15px 30px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1002;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}
.x9-success-message.show {
    display: block;
    opacity: 1;
}


/* product video */
.video-slide {
    position: relative;
    width: 100%;
    /* max-width: 800px; */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
}

.video-slide video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* play 1 */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 10;
}
.play-overlay:hover {background: rgba(0, 0, 0, 0.85);transform: translate(-50%, -50%) scale(1.08);}
.play-icon {width: 36px;height: 36px;fill: white;}

/* paly 2 */
.play-overlay2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 10;
}
.play-overlay2:hover {background: rgba(0, 0, 0, 0.6);/* transform: translate(-50%, -50%) scale(1.01); */}
.play-icon2 {width: 15px;height: 15px;fill: white;}

.video-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.video-wrap iframe {
  width: 100%;
  height: 100%;
}


.x9-yt{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#111;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
}
.x9-yt__thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0 !important;
}
.x9-yt__play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
}
.x9-yt__play:before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-35%,-50%);
  width:0; height:0;
  border-left:18px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}
.x9-yt iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}