*{box-sizing:border-box;}
body{margin:0; font-family:'Be Vietnam Pro', sans-serif; color:var(--vc-text); background:#fff; line-height:1.6;}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
.container{max-width:var(--vc-container); margin:0 auto; padding:0 16px;}
h1,h2,h3{font-weight:600; margin:0 0 12px;}

/* Buttons */
.vc-btn{display:inline-block; padding:11px 22px; border-radius:8px; font-size:14px; font-weight:600; transition:.2s;}
.vc-btn-primary{background:var(--vc-red); color:#fff;}
.vc-btn-primary:hover{background:var(--vc-red-dark);}
.vc-btn-outline{background:transparent; border:1.5px solid var(--vc-green); color:var(--vc-green);}
.vc-btn-outline:hover{background:var(--vc-green); color:#fff;}
.vc-btn-sm{padding:7px 14px; font-size:13px; display:block; text-align:center;}

/* Topbar */
.vc-topbar{background:var(--vc-green-dark); color:#fff; font-size:13px;}
.vc-topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:7px 16px; gap:12px;}
.vc-topbar-inner a{color:#fff;}
.vc-topbar-tagline{opacity:.85; display:none;}
@media(min-width:768px){.vc-topbar-tagline{display:inline;}}

/* Header */
.vc-header{background:var(--vc-cream); border-bottom:1px solid var(--vc-border); position:sticky; top:0; z-index:50;}
.vc-header-inner{display:flex; align-items:center; gap:20px; padding:14px 16px;}
.vc-logo-text{font-size:24px; font-weight:700;}
.vc-logo-text .red{color:var(--vc-red);}
.vc-logo-text .green{color:var(--vc-green);}
.vc-search{flex:1; display:none; max-width:420px; border:1px solid var(--vc-border); border-radius:8px; overflow:hidden; background:#fff;}
.vc-search input{border:0; padding:9px 12px; flex:1; width:100%; outline:none; font-size:14px;}
.vc-search button{border:0; background:var(--vc-green); color:#fff; padding:0 16px; cursor:pointer;}
@media(min-width:768px){.vc-search{display:flex;}}
.vc-header-actions{display:flex; align-items:center; gap:16px; margin-left:auto;}
.vc-cart-link{font-size:14px; font-weight:600; color:var(--vc-green-dark); display:flex; align-items:center; gap:6px;}
.vc-cart-count{background:var(--vc-red); color:#fff; font-size:11px; padding:1px 7px; border-radius:10px;}
.vc-menu-toggle{background:none; border:0; font-size:22px; cursor:pointer; display:block;}
@media(min-width:900px){.vc-menu-toggle{display:none;}}

.vc-nav{background:var(--vc-green-dark); display:none;}
@media(min-width:900px){.vc-nav{display:block;}}
.vc-nav-menu{display:flex; gap:4px;}
.vc-nav-menu li a{display:block; padding:13px 16px; color:#fff; font-size:14px; font-weight:500;}
.vc-nav-menu li a:hover{background:var(--vc-green);}
body.vc-menu-open .vc-nav{display:block;}
body.vc-menu-open .vc-nav-menu{flex-direction:column;}

/* Announcement ticker bar */
.vc-announce-bar{background:var(--vc-green-pale-2); border-bottom:1px solid var(--vc-border); overflow:hidden;}
.vc-announce-inner{display:flex; align-items:center; gap:14px; padding:8px 16px; overflow:hidden;}
.vc-announce-label{background:var(--vc-red); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; flex-shrink:0; white-space:nowrap;}
.vc-ticker{flex:1; overflow:hidden;}
.vc-ticker-track{display:flex; gap:40px; width:max-content; animation:vc-marquee 26s linear infinite;}
.vc-ticker-track a{font-size:13px; color:var(--vc-green-dark); white-space:nowrap; font-weight:500;}
.vc-ticker-track a:hover{color:var(--vc-red);}
.vc-ticker:hover .vc-ticker-track{animation-play-state:paused;}
@keyframes vc-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.vc-ticker-track{animation:none;}}

/* Banner slider */
.vc-banner{position:relative; overflow:hidden; background:var(--vc-green-pale);}
.vc-banner-placeholder{padding:60px 0; text-align:center; background:linear-gradient(180deg,var(--vc-green-pale) 0%, var(--vc-green-pale-2) 100%);}
.vc-banner-slider{position:relative; height:280px;}
@media(min-width:768px){.vc-banner-slider{height:440px;}}
.vc-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .6s ease; display:flex; align-items:center;}
.vc-slide.is-active{opacity:1; position:relative;}
.vc-slide-content{background:rgba(251,250,246,.88); padding:24px 28px; border-radius:12px; max-width:460px;}
.vc-slide-content h2{color:var(--vc-green-dark); font-size:24px; margin-bottom:8px;}
@media(min-width:768px){.vc-slide-content h2{font-size:32px;}}
.vc-slide-content p{color:var(--vc-text-muted); margin:0 0 16px; font-size:15px;}
.vc-banner-dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px;}
.vc-dot{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.6); cursor:pointer;}
.vc-dot.is-active{background:var(--vc-red);}
.vc-banner-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:0; width:38px; height:38px; border-radius:50%; font-size:20px; cursor:pointer; color:var(--vc-green-dark);}
.vc-banner-prev{left:14px;} .vc-banner-next{right:14px;}

/* Sections */
.vc-section{padding:44px 0;}
.vc-section-alt{background:var(--vc-green-pale-2);}
.vc-section-title{font-size:22px; color:var(--vc-green-dark); border-left:4px solid var(--vc-red); padding-left:12px; margin-bottom:24px; display:block;}
.vc-section-title-link{transition:.2s; text-decoration:none;}
.vc-section-title-link:hover{color:var(--vc-red);}
.vc-section-title-link::after{content:'→'; margin-left:10px; font-size:16px; opacity:.6;}
.vc-section-more{text-align:center; margin-top:24px;}

/* "Xem thêm" reveal items */
.vc-more-item{opacity:0; transform:translateY(16px); max-height:0; overflow:hidden; pointer-events:none; transition:opacity .5s ease, transform .5s ease, max-height .5s ease;}
.vc-more-item.is-visible{opacity:1; transform:translateY(0); max-height:900px; pointer-events:auto;}

/* Category grid */
.vc-cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media(min-width:768px){.vc-cat-grid{grid-template-columns:repeat(4,1fr);}}
.vc-cat-card{background:#fff; border:1px solid var(--vc-border); border-radius:var(--vc-radius); overflow:hidden; text-align:center; transition:.2s;}
.vc-cat-card:hover{border-color:var(--vc-green); box-shadow:0 6px 18px rgba(30,123,52,.1);}
.vc-cat-img{display:block; height:120px; background-size:cover; background-position:center; background-color:var(--vc-green-pale);}
.vc-cat-name{display:block; padding:12px; font-weight:600; font-size:14px; color:var(--vc-green-dark);}

/* Product grid (also matches WooCommerce core .products) */
.vc-product-grid, ul.products{display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:18px; list-style:none; padding:0; margin:0 !important;}
@media(min-width:768px){.vc-product-grid, ul.products{grid-template-columns:repeat(4,1fr) !important;}}
.vc-product-card, ul.products li.product{background:#fff; border:1px solid var(--vc-border); border-radius:var(--vc-radius); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; position:relative; margin:0 !important; float:none !important; width:auto !important; display:flex !important; flex-direction:column !important; height:100%;}
.vc-product-card:hover, ul.products li.product:hover{box-shadow:0 10px 26px rgba(31,42,29,.12); transform:translateY(-3px);}

/* Khung ảnh vuông đều, luôn full khung, không méo */
.vc-product-thumb, ul.products li.product a.woocommerce-LoopProduct-link, ul.products li.product > a:first-child{
    display:block; position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--vc-green-pale-2);
}
.vc-product-thumb img, ul.products li.product a.woocommerce-LoopProduct-link img, ul.products li.product > a:first-child img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; transition:transform .4s ease;
}
.vc-product-card:hover .vc-product-thumb img, ul.products li.product:hover img{transform:scale(1.07);}

.vc-product-body{padding:12px 14px 14px; display:flex; flex-direction:column; flex:1;}
.vc-product-name, ul.products li.product .woocommerce-loop-product__title{display:block; font-size:14px; font-weight:600; margin:0 0 6px; color:var(--vc-text); min-height:38px; line-height:1.35;}
.vc-product-price, ul.products li.product .price{color:var(--vc-red); font-weight:700; font-size:15px; display:block; margin-bottom:10px; margin-top:auto;}
.vc-product-price del, ul.products li.product .price del{color:var(--vc-text-muted); font-weight:400; opacity:.8; margin-right:6px;}
.vc-product-price ins, ul.products li.product .price ins{text-decoration:none;}
ul.products li.product .button{display:block; text-align:center; border:1.5px solid var(--vc-green); color:var(--vc-green); border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; background:transparent; margin-top:10px;}
ul.products li.product .button:hover{background:var(--vc-green); color:#fff;}

/* Nhãn giảm giá - gọn, một dòng, đặt góc phải để không đụng badge trái */
.onsale, ul.products li.product .onsale{
    position:absolute !important; top:8px; right:8px; left:auto; background:var(--vc-red); color:#fff;
    font-size:11px; padding:4px 10px; border-radius:20px; font-weight:600; white-space:nowrap;
    line-height:1.4; min-height:0; z-index:6; margin:0;
}

/* Badge "siêu chịu nhiệt" kiểu ngôi sao trên bao bì */
.vc-badge-hot{
    position:absolute; top:6px; left:6px; width:60px; height:60px; z-index:6;
    background:#F4C430; color:var(--vc-red-dark); font-size:9.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.15; padding:6px;
    clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform:rotate(-10deg);
}
.vc-badge-hot--single{position:static; display:inline-flex; transform:rotate(0); width:auto; height:auto; border-radius:20px; clip-path:none; padding:5px 12px; margin-bottom:10px; font-size:12px;}

/* Badge nhãn/tag thường */
.vc-badge-tag{position:absolute; top:8px; left:8px; z-index:6; background:var(--vc-green); color:#fff; font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px;}
.vc-badge-tag--single{position:static; display:inline-block; margin-bottom:10px;}

/* Single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--vc-green-dark);}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--vc-red);}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{background:var(--vc-green); color:#fff; border-radius:8px; border:0;}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--vc-green-dark);}

/* Đồng bộ màu cho các thành phần WooCommerce còn lại */
.woocommerce .star-rating span::before{color:#F2B705;}
.woocommerce p.stock.in-stock{color:var(--vc-green); font-weight:600;}
.woocommerce p.stock.out-of-stock{color:var(--vc-red); font-weight:600;}
.woocommerce div.product form.cart .quantity input.qty{border:1px solid var(--vc-border); border-radius:8px; height:42px; text-align:center; width:64px;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-color:var(--vc-border); background:var(--vc-green-pale-2);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff; border-bottom-color:#fff;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--vc-red);}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{color:var(--vc-green-dark); border-color:var(--vc-border);}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--vc-green); color:#fff;}
.lien-he-price{color:var(--vc-red); font-weight:700;}

/* ============================================================
   KHỐI ƯU TIÊN CAO - đè các CSS cũ (Flatsome / UX Builder / plugin
   khác) có thể vẫn còn tải song song trên site, khiến nút/khung
   sản phẩm hiện sai màu, sai hình (ví dụ nút tím, nhãn hình elip).
   Luôn đặt CUỐI FILE để thắng thứ tự nạp CSS.
   ============================================================ */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce a.added_to_cart, ul.products li.product .button{
    background:var(--vc-green) !important; color:#fff !important; border:0 !important;
    border-radius:8px !important; box-shadow:none !important; text-shadow:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover{
    background:var(--vc-green-dark) !important;
}
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale, .onsale{
    all:unset !important;
    position:absolute !important; top:8px !important; right:8px !important; left:auto !important;
    background:var(--vc-red) !important; color:#fff !important; font-size:11px !important;
    padding:4px 10px !important; border-radius:20px !important; font-weight:600 !important;
    white-space:nowrap !important; line-height:1.4 !important; z-index:6 !important;
    font-family:'Be Vietnam Pro', sans-serif !important; display:inline-block !important;
}
ul.products li.product{
    background:#fff !important; border:1px solid var(--vc-border) !important; border-radius:var(--vc-radius) !important;
    box-shadow:none !important; text-align:left !important; display:flex !important; flex-direction:column !important;
}
ul.products li.product a.woocommerce-LoopProduct-link, ul.products li.product > a:first-child{
    aspect-ratio:1/1 !important; background:var(--vc-green-pale-2) !important;
}
ul.products li.product img{ object-fit:cover !important; border-radius:0 !important; }
ul.products li.product .price{ color:var(--vc-red) !important; }
ul.products li.product .price del{ color:var(--vc-text-muted) !important; }
.vc-product-thumb img, ul.products li.product img, .vc-cat-img, .vc-post-thumb, .vc-slide{transition:opacity .45s ease, transform .4s ease;}
.vc-product-thumb img, ul.products li.product img{opacity:0; animation:vc-img-fallback .01s 1.2s forwards;}
.vc-product-thumb img.is-loaded, ul.products li.product img.is-loaded{opacity:1;}
@keyframes vc-img-fallback{to{opacity:1;}}

/* Breadcrumb */
.vc-breadcrumb{padding:14px 16px; font-size:13px; color:var(--vc-text-muted);}
.vc-breadcrumb a{color:var(--vc-green-dark);}
.vc-breadcrumb .sep{margin:0 6px; opacity:.5;}

/* Blog / posts */
.vc-post-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:640px){.vc-post-grid{grid-template-columns:repeat(3,1fr);}}
.vc-post-grid-archive{grid-template-columns:repeat(2,1fr);}
@media(min-width:768px){.vc-post-grid-archive{grid-template-columns:repeat(3,1fr);}}
.vc-post-card{background:#fff; border:1px solid var(--vc-border); border-radius:var(--vc-radius); overflow:hidden; display:block; transition:.2s;}
.vc-post-card:hover{box-shadow:0 8px 20px rgba(31,42,29,.08);}
.vc-post-thumb{display:block; height:160px; background-size:cover; background-position:center; background-color:var(--vc-green-pale);}
.vc-post-date{display:block; font-size:12px; color:var(--vc-text-muted); padding:12px 14px 0;}
.vc-post-title{display:block; padding:6px 14px 14px; font-weight:600; font-size:15px; color:var(--vc-text);}
.vc-post-card-wide{display:flex; gap:16px; align-items:stretch; margin-bottom:20px;}
.vc-post-card-wide .vc-post-thumb{width:220px; flex-shrink:0; height:auto;}

.vc-page-wrap{display:grid; grid-template-columns:1fr; gap:32px; padding:32px 16px;}
@media(min-width:900px){.vc-page-wrap{grid-template-columns:2.4fr 1fr;}}
.vc-page-wrap-full{grid-template-columns:1fr;}
.vc-archive-title{color:var(--vc-green-dark); border-left:4px solid var(--vc-red); padding-left:12px;}
.vc-single-post h1{font-size:26px; color:var(--vc-green-dark);}
.vc-post-meta{color:var(--vc-text-muted); font-size:13px; margin-bottom:16px;}
.vc-single-thumb{margin-bottom:20px; border-radius:var(--vc-radius); overflow:hidden;}
.vc-content{font-size:15px;}
.vc-content h2, .vc-content h3{color:var(--vc-green-dark);}

.vc-sidebar .vc-widget{background:var(--vc-green-pale-2); border-radius:var(--vc-radius); padding:16px; margin-bottom:16px;}
.vc-widget-title{font-size:15px; color:var(--vc-green-dark); border-bottom:2px solid var(--vc-red); display:inline-block; padding-bottom:4px;}
.vc-widget-list li{padding:6px 0; border-bottom:1px dashed var(--vc-border); font-size:14px;}

/* Footer */
.vc-footer{background:var(--vc-green-dark); color:#e7f0e3; margin-top:20px;}
.vc-footer-grid{display:grid; grid-template-columns:1fr; gap:24px; padding:40px 16px;}
@media(min-width:768px){.vc-footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}}
.vc-footer-col h3{color:#fff; font-size:15px; margin-bottom:12px;}
.vc-footer-col p{font-size:13px; opacity:.85; line-height:1.7;}
.vc-footer-menu li{margin-bottom:8px; font-size:13px;}
.vc-footer-menu a:hover{color:var(--vc-red);}
.vc-footer-social{display:inline-block; background:rgba(255,255,255,.1); padding:8px 14px; border-radius:6px; font-size:13px;}
.vc-footer-bottom{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:14px 0; font-size:12px; opacity:.75;}

/* Floating buttons */
.vc-float{position:fixed; right:18px; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.2); z-index:60;}
.vc-float-phone{bottom:20px; background:var(--vc-red); font-size:20px;}

/* Mobile bottom nav (menu ghim chân trang trên di động) */
.vc-mobile-nav{display:none;}
@media(max-width:899px){
    .vc-mobile-nav{
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
        background:#fff; border-top:1px solid var(--vc-border);
        box-shadow:0 -4px 16px rgba(31,42,29,.08);
        padding-bottom:env(safe-area-inset-bottom, 0);
    }
    .vc-mobile-nav a{
        flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; padding:8px 2px 7px; font-size:10.5px; color:var(--vc-text-muted); position:relative;
    }
    .vc-mobile-nav a.is-active{color:var(--vc-green);}
    .vc-mobile-nav-ic{font-size:19px; position:relative; line-height:1;}
    .vc-mobile-nav-cart .vc-mobile-nav-ic em{
        position:absolute; top:-8px; right:-12px; background:var(--vc-red); color:#fff; font-style:normal;
        font-size:10px; font-weight:700; min-width:15px; height:15px; border-radius:8px; display:flex;
        align-items:center; justify-content:center; padding:0 3px;
    }
    /* Nút Zalo nổi bật ở giữa, tách khỏi thanh */
    .vc-mobile-nav-zalo{margin-top:-18px;}
    .vc-mobile-nav-zalo .vc-mobile-nav-ic{
        background:#0068ff; color:#fff; width:44px; height:44px; border-radius:50%;
        display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
        box-shadow:0 4px 12px rgba(0,104,255,.4); border:3px solid #fff;
    }
    .vc-mobile-nav-zalo span:last-child{color:#0068ff; font-weight:600; margin-top:1px;}
    body{padding-bottom:58px;}
    .vc-float-phone{bottom:76px;}
}