/* ============================================================
   VIECARE 2026 — Brand SKIN (áp dụng TOÀN SITE)
   Header 2 tầng + footer xanh + font/màu thương hiệu.
   KHÔNG dùng reset *{} để không phá layout Flatsome/WooCommerce.
   ============================================================ */
:root{
  --vc-green:#02A552; --vc-green-d:#017C3C; --vc-green-ink:#0A3B28;
  --vc-purple:#6E2C91; --vc-magenta:#C21B6B; --vc-cream:#F4FAF6;
  --vc-ink:#241F2B; --vc-muted:#6C6577; --vc-line:#EBE6DC;
  --vc-f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Ẩn header/footer Flatsome gốc (site dùng .vc-header / .vc-footer) ---------- */
body.vc-site #header,
body.vc-site .header-wrapper,
body.vc-site #masthead,
body.vc-site .header-main,
body.vc-site .header-bottom,
body.vc-site .header-top,
body.vc-site .header-bg-container,
body.vc-site #footer,
body.vc-site .footer-wrapper,
body.vc-site .absolute-footer,
body.vc-site .footer-inner,
body.vc-site #wrapper > .header-wrapper,
body.vc-site .back-to-top-label{display:none!important}
/* Flatsome sticky header placeholder */
body.vc-site .stuck,
body.vc-site #top-bar,
body.vc-site .top-divider{display:none!important}

/* Main content dưới header VIECARE */
body.vc-site .vc-main{min-height:40vh;display:block}
body.vc-site:not(.vc-home){background:var(--vc-cream)}
body.vc-site:not(.vc-home) #wrapper,
body.vc-site:not(.vc-home) #main,
body.vc-site:not(.vc-home) .page-wrapper{background:transparent}
body.vc-site:not(.vc-home) .page-title-inner,
body.vc-site:not(.vc-home) .shop-page-title{
  font-family:var(--vc-f)!important;
}
body.vc-site:not(.vc-home) .page-title-bg,
body.vc-site:not(.vc-home) .page-header-bg-image{background-color:#E8F6EE!important}
body.vc-site:not(.vc-home) h1.page-title,
body.vc-site:not(.vc-home) .shop-page-title h1{color:var(--vc-green-ink)!important;font-weight:800}

/* ---------- Brand font + màu chữ chủ đạo (đè Flatsome/Kirki) ---------- */
body,button,input,select,textarea,.button{font-family:var(--vc-f)!important}
h1,h2,h3,h4,h5,.heading-font,.is-title{font-family:var(--vc-f)!important}
/* primary color của Flatsome -> xanh VIECARE */
.button.primary,.button.is-outline.primary:hover{background-color:var(--vc-green)!important;border-color:var(--vc-green)!important;color:#fff!important;border-radius:999px!important}
.button.primary:hover{background-color:var(--vc-green-d)!important;border-color:var(--vc-green-d)!important}
.button.is-outline.primary{color:var(--vc-green-d)!important;border-color:var(--vc-green)!important;border-radius:999px!important}
.button:not(.is-outline):not(.is-link){border-radius:999px}
a{color:var(--vc-green-d)}
.nav > li.active > a,.nav > li.current > a{color:var(--vc-green-d)}
.price ins,.price .amount,.woocommerce-Price-amount{color:var(--vc-green-d)}
.badge-inner{background-color:var(--vc-magenta)}

/* ---------- HEADER 2 tầng (dùng chung mọi trang) ---------- */
.vc-header{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 3px 14px -10px rgba(74,29,99,.3);font-family:var(--vc-f)}
.vc-header *{box-sizing:border-box}
.vc-header a{text-decoration:none;color:var(--vc-ink)}
.vc-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.vc-htop{border-bottom:1px solid var(--vc-line)}
.vc-htop>.vc-wrap{display:flex;align-items:center;gap:18px;min-height:76px}
.vc-brand{display:flex;align-items:center;flex:0 0 auto}
.vc-brand img{height:56px;width:auto;display:block}
.vc-search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--vc-cream);
  border:1.5px solid var(--vc-line);border-radius:999px;padding:0 5px 0 18px;height:48px}
.vc-search:focus-within{border-color:var(--vc-green);background:#fff;box-shadow:0 0 0 4px rgba(2,165,82,.1)}
.vc-search svg{color:var(--vc-muted);flex:0 0 auto}
.vc-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;font-size:.98rem;color:var(--vc-ink)}
.vc-search button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:var(--vc-green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vc-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.vc-ico{position:relative;width:44px;height:44px;border-radius:50%;background:#F0E6F6;color:var(--vc-purple);display:flex;align-items:center;justify-content:center}
.vc-ico:hover{background:#e6d5f0}
.vc-ico .cc{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--vc-magenta);color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.vc-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;padding:11px 18px;border-radius:999px;background:var(--vc-green);color:#fff!important;box-shadow:0 12px 22px -14px rgba(2,165,82,.9);white-space:nowrap}
.vc-cta:hover{background:var(--vc-green-d)}
.vc-burger{display:none;width:46px;height:46px;border:1.5px solid var(--vc-line);border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.vc-burger b{width:20px;height:2.5px;background:var(--vc-green-ink);border-radius:2px;display:block}
.vc-hnav{border-top:1px solid var(--vc-line)}
.vc-hnav>.vc-wrap{display:flex;align-items:center;min-height:50px}
.vc-menu{display:flex;gap:2px;flex:1;justify-content:space-between;list-style:none;margin:0;padding:0}
.vc-menu a{font-weight:600;font-size:.95rem;padding:9px 15px;border-radius:999px;transition:.15s;white-space:nowrap}
.vc-menu a:hover{background:#F0E6F6;color:var(--vc-purple)}
.vc-menu a.on{background:var(--vc-green);color:#fff}
.vc-menu a.hot{color:var(--vc-magenta);font-weight:700}
@media(max-width:1120px){.vc-hotline{display:none!important}}
@media(max-width:900px){
  .vc-htop>.vc-wrap{flex-wrap:wrap;min-height:0;padding:12px 20px;gap:10px}
  .vc-brand{order:1}.vc-burger{display:flex}.vc-tools{order:2}
  .vc-search{order:5;flex:1 1 100%;max-width:none;height:46px}
  .vc-hnav>.vc-wrap{min-height:0;padding:0 20px}
  .vc-menu{display:none;flex-direction:column;width:100%;padding:8px 0;gap:4px}
  .vc-menu.open{display:flex}
  .vc-menu a{padding:12px 14px;border-radius:12px}
}

/* ---------- FOOTER xanh (dùng chung mọi trang) ---------- */
.vc-footer{background:var(--vc-green);color:rgba(255,255,255,.9);margin-top:60px;font-family:var(--vc-f)}
.vc-footer *{box-sizing:border-box}
.vc-footer .vc-wrap{padding:52px 24px 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.vc-footer h4{color:#fff;font-size:1.02rem;margin:0 0 14px}
.vc-footer a{display:block;color:rgba(255,255,255,.88);padding:4px 0;font-size:.93rem;text-decoration:none}
.vc-footer a:hover{color:#ffe08a}
.vc-footer p{font-size:.93rem;max-width:34ch;margin:0}
.vc-flogo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vc-flogo img{height:44px;background:#fff;border-radius:10px;padding:5px}
.vc-flogo b{color:#fff;font-weight:900;font-size:1.3rem}
.vc-fbottom{border-top:1px solid rgba(255,255,255,.22);text-align:center;padding:16px;font-size:.84rem;color:rgba(255,255,255,.72)}
@media(max-width:900px){.vc-footer .vc-wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vc-footer .vc-wrap{grid-template-columns:1fr}}

/* ---------- Skin nhẹ cho SHOP (product card WooCommerce) ---------- */
.woocommerce ul.products li.product .price{color:var(--vc-green-d);font-weight:800}
.woocommerce span.onsale{background:var(--vc-magenta);border-radius:999px}
.woocommerce ul.products li.product .button,.woocommerce .single_add_to_cart_button{border-radius:999px!important}
.woocommerce .woocommerce-message,.woocommerce-info{border-top-color:var(--vc-green)!important}