/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;font-size:16px;font-weight:400;line-height:1.5;color:#345;background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:all .3s}
a:hover{color:#3e6807}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:700;color:#4c503d}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.site-header__top{display:block}
@media(max-width:992px){.site-header__top{display:none}}
.site-header__inner{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
.header-left{display:flex;align-items:center;gap:30px}
.header-logo img{height:50px}
.v2-header-menu-top ul{display:flex;gap:30px}
.v2-header-menu-top a{font-size:14px;font-weight:600;color:#363C05;text-transform:uppercase;letter-spacing:.5px}
.v2-header-menu-top a:hover{color:#3e6807}
.header-right{display:flex;align-items:center;gap:20px}
.header-search form{display:flex;align-items:center;background:#f6f6f6;border-radius:25px;padding:5px 15px}
.header-search input{border:none;background:transparent;padding:8px 10px;font-size:14px;width:200px;outline:none}
.header-search button{background:none;border:none;cursor:pointer;color:#363C05;font-size:16px}
.header-actions{display:flex;align-items:center;gap:20px}
.header-actions a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#363C05}
.header-actions i{font-size:20px}
.header-actions__cart{position:relative}
.cart-count{background:#3e6807;color:#fff;font-size:10px;padding:2px 6px;border-radius:50%;position:absolute;top:-5px;right:-5px}

/* Mobile Header */
.wrapper-header-mobile-top{display:none}
@media(max-width:992px){.wrapper-header-mobile-top{display:block}}
.header-mobile-inner{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
.header-mobile-left,.header-mobile-right{display:flex;align-items:center;gap:15px}
.header-mobile-left button,.header-mobile-right a{background:none;border:none;font-size:20px;color:#363C05;cursor:pointer}
.header-mobile-logo img{height:40px}
.header-mobile-cart{position:relative}

/* Mobile Bottom Menu */
.menuBottom{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:1000;padding:8px 0 env(safe-area-inset-bottom)}
@media(max-width:767px){.menuBottom{display:flex;justify-content:space-around;align-items:center}}
.menuBottom-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#999;text-decoration:none;transition:color .3s}
.menuBottom-item i{font-size:18px}
.menuBottom-item.active,.menuBottom-item:hover{color:#3e6807}
@media(max-width:767px){body{padding-bottom:60px}}

/* Hero Banner */
.home-banner{padding:20px 0}
.home-banner__slide{position:relative;overflow:hidden}
.banner-slide{display:none}
.banner-slide:first-child{display:block}
.banner-slide img{width:100%;border-radius:10px}

/* Feature Products */
.wrapper-feature-products-v2{padding:60px 0;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}
.feature-products-content{display:flex;align-items:center;gap:40px}
.feature-products-title{flex:1}
.feature-products-title h2{font-size:3rem;color:#363C05;margin-bottom:15px}
.feature-products-title p{font-size:16px;color:#666}
.feature-products-images{display:flex;gap:20px;flex:2}
.feature-products-box{flex:1;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:transform .3s}
.feature-products-box:hover{transform:translateY(-10px)}
.feature-products-box img{width:100%;height:250px;object-fit:cover}
@media(max-width:768px){.feature-products-content{flex-direction:column}.feature-products-images{flex-wrap:wrap}.feature-products-box{flex:1 1 calc(50% - 10px)}}

/* Prize */
.wrapper-prize-v2{padding:60px 0;background:#f6f6f6}
.prize-content{text-align:center}
.prize-content h3{font-size:2rem;color:#363C05;margin-bottom:40px}
.prize-slider{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
.prize-item{width:120px;opacity:.7;transition:opacity .3s}
.prize-item:hover{opacity:1}

/* Raw Materials */
.wrapper-raw-materials-v2{padding:80px 0}
.raw-materials-content{display:flex;align-items:center;gap:60px}
.raw-materials-left{flex:1}
.raw-materials-left img{width:100%;border-radius:20px}
.raw-materials-right{flex:1}
.raw-materials-slider{display:flex;flex-direction:column;gap:30px}
.raw-material-item{display:flex;align-items:center;gap:20px;padding:20px;background:#f8f9fa;border-radius:15px;transition:all .3s}
.raw-material-item:hover{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.raw-material-img{width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0}
.raw-material-img img{width:100%;height:100%;object-fit:cover}
.raw-material-info h4{font-size:18px;color:#363C05;margin-bottom:5px}
.raw-material-info p{font-size:14px;color:#666}
@media(max-width:768px){.raw-materials-content{flex-direction:column}}

/* Product Tabs & Cards (real comem.vn style) */
.v2-list-product{padding:60px 0}
.v2-list-product__head{display:flex;justify-content:center;margin-bottom:30px}
.v2-list-product__tabs{display:flex;gap:20px}
.v2-tab{padding:12px 30px;border:2px solid #363C05;background:transparent;color:#363C05;font-size:14px;font-weight:600;border-radius:25px;cursor:pointer;transition:all .3s;font-family:inherit}
.v2-tab:hover,.v2-tab.active{background:#363C05;color:#fff}
.v2-list-product__body{display:none}
.v2-list-product__body.active{display:block}
.v2-button-more{text-align:right;margin-bottom:20px}
.v2-button-more a{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:#363C05}
.v2-button-more a:hover{color:#3e6807}
.v2-button-more a i{font-size:12px;transition:transform .3s}
.v2-button-more a:hover i{transform:translateX(3px)}

.product-box{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:992px){.product-box{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.product-box{grid-template-columns:repeat(2,1fr)}}

.product-box_item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:all .3s;position:relative}
.product-box_item:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.12)}

.product-box_item__image{display:block;position:relative;padding:15px;background:#f8f9fa;text-align:center;overflow:hidden}
.product-box_item__image img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;transition:transform .4s}
.product-box_item:hover .product-box_item__image img{transform:scale(1.05)}

.product-box_item__image__tags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2}
.product-box_item__image__tags div{padding:3px 10px;border-radius:3px;font-size:11px;font-weight:600;color:#fff}
.tag-new{background:#3e6807}
.tag-sale{background:#e74c3c;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:600;color:#fff}
.product-box_item__image__tags-sale{position:absolute;top:10px;right:10px;z-index:2}

.product-box_item__content{padding:12px 15px}
.product-box_item__content h3{font-size:14px;font-weight:600;margin-bottom:8px;line-height:1.4}
.product-box_item__content h3 a{color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-box_item__content h3 a:hover{color:#3e6807}

.product-box_item__content__price{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.price-now{font-size:16px;font-weight:700;color:#3e6807}
.price-now sup{font-size:12px}
.price-old{font-size:13px;color:#999;text-decoration:line-through}
.price-old sup{font-size:11px}

.box-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.box-rating_star{display:flex;gap:1px}
.box-rating_star_on{color:#f4c150;font-size:12px}
.box-rating_text{font-size:12px;color:#999;white-space:nowrap}

/* Community */
.community-activities-v2{padding:60px 0;background:#f8f9fa}
.section-title{text-align:center;font-size:2.4rem;color:#363C05;margin-bottom:40px}
.community-activities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.community-activity-item{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.05);transition:all .3s}
.community-activity-item:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0,0,0,.1)}
.community-activity-item a{display:block}
.activity-image{height:200px;overflow:hidden}
.activity-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.community-activity-item:hover .activity-image img{transform:scale(1.05)}
.activity-info{padding:20px}
.activity-info h4{font-size:16px;color:#363C05;margin-bottom:8px}
.activity-info p{font-size:14px;color:#666;line-height:1.6}
@media(max-width:768px){.community-activities-grid{grid-template-columns:1fr}}

/* Featured Grid */
.section-list-feature-products{padding:60px 0}
.featured-products-grid{display:grid;grid-template-columns:1fr 2fr;gap:15px}
.featured-product-large{border-radius:15px;overflow:hidden}
.featured-product-large img{width:100%;height:100%;object-fit:cover}
.featured-products-small{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.featured-product-item{border-radius:15px;overflow:hidden}
.featured-product-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.featured-product-item:hover img{transform:scale(1.05)}
@media(max-width:768px){.featured-products-grid{grid-template-columns:1fr}.featured-products-small{grid-template-columns:repeat(2,1fr)}}

/* Brand Story */
.wrapper-story-brand{padding:80px 0;background:#f6f6f6}
.story-brand-content{display:flex;align-items:center;gap:60px}
.story-brand-image{flex:1}
.story-brand-image img{width:100%;border-radius:20px}
.story-brand-text{flex:1}
.story-brand-text h3{font-size:2.4rem;color:#363C05;margin-bottom:20px}
.story-brand-text p{font-size:15px;color:#666;line-height:1.8;margin-bottom:15px}
.btn-more{display:inline-block;padding:12px 30px;background:#363C05;color:#fff;border-radius:25px;font-size:14px;font-weight:600;transition:all .3s}
.btn-more:hover{background:#3e6807;color:#fff;transform:translateY(-3px)}
@media(max-width:768px){.story-brand-content{flex-direction:column}}

/* Blog */
.wrapper-v2-home-blogs{padding:60px 0}
.blog-slider{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.blog-item{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.05);transition:all .3s}
.blog-item:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.blog-item a{display:block}
.blog-image{height:180px;overflow:hidden}
.blog-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.blog-item:hover .blog-image img{transform:scale(1.05)}
.blog-info{padding:15px}
.blog-info h4{font-size:14px;color:#333;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-date{font-size:12px;color:#999}
@media(max-width:992px){.blog-slider{grid-template-columns:repeat(2,1fr)}}
@media(max-width:577px){.blog-slider{grid-template-columns:1fr}}

/* Footer */
.wrapper-v2-site-footer{background:#2d2d2d;color:#fff;padding:60px 0 0}
.footer-content{display:grid;grid-template-columns:1.5fr 2fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo img{height:60px;margin-bottom:15px}
.footer-slogan{font-size:14px;color:#aaa;margin-bottom:20px}
.footer-newsletter p{font-size:14px;margin-bottom:10px}
.footer-newsletter form{display:flex}
.footer-newsletter input{flex:1;padding:10px 15px;border:none;border-radius:25px 0 0 25px;font-size:14px;font-family:inherit}
.footer-newsletter button{padding:10px 20px;background:#3e6807;color:#fff;border:none;border-radius:0 25px 25px 0;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;transition:background .3s}
.footer-newsletter button:hover{background:#4a7d0a}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-column h4{font-size:16px;margin-bottom:20px;color:#fff}
.footer-column ul li{margin-bottom:10px}
.footer-column ul li a{font-size:14px;color:#aaa;transition:color .3s}
.footer-column ul li a:hover{color:#3e6807}
.footer-contact h4{font-size:16px;margin-bottom:20px;color:#fff}
.contact-item{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:14px;color:#aaa}
.contact-item i{font-size:16px;color:#3e6807}
.footer-social{display:flex;gap:15px;margin-top:20px}
.footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:all .3s}
.footer-social a:hover{background:#3e6807;transform:translateY(-3px)}
.footer-bottom{padding:20px 0;font-size:13px;color:#aaa;text-align:center}
@media(max-width:992px){.footer-content{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:577px){.footer-links{grid-template-columns:1fr}}

/* Go to Top */
.go-to-top{position:fixed;bottom:80px;right:20px;width:45px;height:45px;background:#3e6807;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;display:none;align-items:center;justify-content:center;z-index:999;transition:all .3s;box-shadow:0 5px 15px rgba(62,104,7,.4)}
.go-to-top:hover{background:#4a7d0a;transform:translateY(-3px)}
.go-to-top.show{display:flex}
@media(max-width:767px){.go-to-top{bottom:80px}}