/* ===================================================================
   NEXVA brand site — premium tech vibe (v2)
   Brand: deep space blue + electric cyan + neon orange
   =================================================================== */
/* fonts via <link> in HTML */

:root{
  /* Core palette */
  --ink:#00213d;            /* deepest bg */
  --ink2:#0B1226;           /* dark card */
  --ink3:#101A36;           /* dark elevated */
  --card:#131F3D;
  --line:rgba(120,180,255,.12);
  --line2:rgba(120,180,255,.22);

  /* Brand */
  --blue:#2D8CFF;
  --blue-d:#0B63B6;
  --blue-deep:#063A75;
  --cyan:#22E5FF;
  --cyan-soft:#7CF0FF;
  --orange:#FF6B1A;
  --orange-d:#E04F08;
  --orange-glow:#FF9446;

  /* Light theme text */
  --txt:#0B1226;
  --txt2:#2A3650;
  --soft:#5A6B85;
  --bg:#FFFFFF;
  --bg2:#F1F6FC;
  --bg3:#E6EFFA;
  --good:#16C784;

  /* Gradients */
  --grad-blue:linear-gradient(135deg,#22E5FF 0%,#2D8CFF 50%,#063A75 100%);
  --grad-blue-soft:linear-gradient(135deg,#2D8CFF,#0B63B6);
  --grad-org:linear-gradient(135deg,#FFB066 0%,#FF6B1A 50%,#E04F08 100%);
  --grad-mix:linear-gradient(135deg,#22E5FF 0%,#2D8CFF 35%,#FF6B1A 100%);
  --grad-mesh:radial-gradient(1200px 600px at 80% 10%,rgba(45,140,255,.45),transparent 60%),
              radial-gradient(900px 500px at 20% 90%,rgba(255,107,26,.28),transparent 60%),
              radial-gradient(700px 500px at 50% 40%,rgba(34,229,255,.18),transparent 70%);

  /* Glow shadows */
  --glow-blue:0 0 30px rgba(45,140,255,.45),0 0 60px rgba(34,229,255,.25);
  --glow-org:0 14px 36px rgba(255,107,26,.42),0 0 0 1px rgba(255,180,120,.18) inset;
  --sh-card:0 24px 60px -20px rgba(11,99,182,.20),0 4px 14px rgba(11,18,38,.06);
  --sh-dark:0 30px 80px rgba(0,0,0,.55);
}

/* ===== Reset / base ===== */
*{box-sizing:border-box}
*::selection{background:var(--cyan);color:var(--ink)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--txt);line-height:1.65;background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .15s}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

h1,h2,h3,h4{line-height:1.12;margin:0 0 .45em;font-weight:800;letter-spacing:-.018em}
h1{font-weight:900;letter-spacing:-.025em}
h2{font-size:clamp(26px,3.8vw,42px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 .9em}
.sec{padding:72px 0;position:relative}
.center{text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(34,229,255,.10),rgba(45,140,255,.08));
  border:1px solid rgba(45,140,255,.22);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:15px;padding:14px 26px;border-radius:12px;
  border:0;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),filter .18s,box-shadow .25s;
  text-transform:none;letter-spacing:.005em;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .55s;
}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-org{background:var(--grad-org);color:#fff;box-shadow:var(--glow-org)}
.btn-org:hover{box-shadow:0 18px 44px rgba(255,107,26,.55),0 0 0 1px rgba(255,200,140,.30) inset;filter:brightness(1.06)}
.btn-blue{background:var(--grad-blue-soft);color:#fff;box-shadow:0 12px 28px rgba(45,140,255,.40)}
.btn-blue:hover{box-shadow:0 16px 40px rgba(45,140,255,.55);filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--cyan);color:var(--cyan)}
.btn-line{background:#fff;color:var(--blue-d);border:2px solid var(--blue);box-shadow:0 6px 18px rgba(45,140,255,.18)}
.btn-line:hover{background:var(--blue);color:#fff}

/* ===== Header ===== */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,15,.78);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .25s;
}
.nav{display:flex;align-items:center;gap:18px;height:68px;color:#fff}
.nav img{height:32px;filter:drop-shadow(0 0 8px rgba(34,229,255,.4))}
.nav .menu{display:flex;gap:4px;margin-left:14px}
.nav .menu a{
  color:#cfdef2;font-weight:600;font-size:14.5px;
  padding:8px 14px;border-radius:8px;position:relative;
  transition:color .18s,background .18s;
}
.nav .menu a:hover{color:#fff;background:rgba(34,229,255,.10)}
.nav .menu a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--grad-mix);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.nav .menu a:hover::after{transform:scaleX(1)}
.nav .sp{flex:1}
.nav .ic{
  color:#cfdef2;cursor:pointer;font-size:20px;position:relative;
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(34,229,255,.08);border:1px solid var(--line);
  transition:background .18s,border-color .18s;
}
.nav .ic:hover{background:rgba(34,229,255,.18);border-color:var(--cyan);color:#fff}
.nav .cartn{
  position:absolute;top:-6px;right:-6px;
  background:var(--grad-org);color:#fff;font-size:10.5px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;
  box-shadow:0 4px 10px rgba(255,107,26,.5);
}
.burger{display:none;color:#fff;font-size:24px;cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center}
@media(max-width:880px){
  .nav .menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--ink);flex-direction:column;padding:14px 22px;border-bottom:1px solid var(--line);gap:2px}
  .nav .menu.open{display:flex}
  .burger{display:flex}
}

/* ===== Hero ===== */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;background:var(--grad-mesh);
  animation:meshFloat 18s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(34,229,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,229,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
}
@keyframes meshFloat{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-2%,1%,0) scale(1.04)}
}
.hero .grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  padding:80px 0 90px;
}
.hero h1{
  font-size:clamp(32px,5.2vw,56px);font-weight:900;
  background:linear-gradient(180deg,#fff 0%,#cfe9ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 span{
  background:var(--grad-mix);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero .lead{font-size:clamp(16px,1.6vw,19px);color:#b6c8de;max-width:38ch;margin:.4em 0 1.8em;line-height:1.65}
.hero .img{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid rgba(34,229,255,.20);
  box-shadow:var(--sh-dark),0 0 80px -20px rgba(34,229,255,.35);
  transform-style:preserve-3d;
}
.hero .img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,229,255,.10),transparent 40%,rgba(255,107,26,.12));
  mix-blend-mode:overlay;
}
.hero .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.hero .img:hover img{transform:scale(1.04)}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:#dfeaf7;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line2);
  padding:8px 14px;border-radius:999px;
  backdrop-filter:blur(6px);
  transition:transform .15s,border-color .15s;
}
.badge:hover{transform:translateY(-2px);border-color:var(--cyan)}
.badge b{color:var(--cyan);font-weight:800}

@media(max-width:880px){
  .hero .grid{grid-template-columns:1fr;padding:48px 0 60px;gap:30px}
  .hero .img{order:-1;max-height:340px}
}

/* ===== USP cards ===== */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:920px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards4{grid-template-columns:1fr}}
.ucard{
  background:#fff;border:1px solid #e5edf7;border-radius:18px;padding:26px 22px;
  box-shadow:var(--sh-card);position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.ucard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-mix);transform:scaleX(.3);transform-origin:left;transition:transform .4s;
}
.ucard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(11,99,182,.30);border-color:rgba(45,140,255,.32)}
.ucard:hover::before{transform:scaleX(1)}
.ucard .ic{
  width:52px;height:52px;border-radius:14px;
  background:var(--grad-blue);
  display:grid;place-items:center;font-size:24px;margin-bottom:16px;
  box-shadow:0 10px 22px rgba(45,140,255,.35);
  position:relative;
}
.ucard .ic::after{
  content:"";position:absolute;inset:-2px;border-radius:16px;
  background:var(--grad-mix);opacity:0;transition:opacity .25s;z-index:-1;filter:blur(8px);
}
.ucard:hover .ic::after{opacity:.7}
.ucard h3{font-size:17px;margin-bottom:.4em;color:var(--ink)}
.ucard p{color:var(--soft);font-size:14.5px;margin:0;line-height:1.6}

/* ===== Products grid ===== */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:920px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pgrid{grid-template-columns:1fr}}
.pcard{
  background:#fff;border:1px solid #e5edf7;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-card);position:relative;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -18px rgba(11,99,182,.30);border-color:rgba(45,140,255,.32)}
.pcard .ph{
  aspect-ratio:1;background:#00213d center/cover;position:relative;overflow:hidden;
}
.pcard .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(5,8,15,.45));
  opacity:0;transition:opacity .3s;
}
.pcard:hover .ph::after{opacity:1}
.pcard .body{padding:18px;display:flex;flex-direction:column;flex:1;gap:4px}
.pcard h3{font-size:16.5px;margin:0 0 4px;color:var(--ink)}
.pcard .vol{font-size:12.5px;color:var(--soft);font-family:'JetBrains Mono',monospace}
.pcard .price{
  font-size:22px;font-weight:900;margin:8px 0 14px;
  background:var(--grad-org);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pcard .btn{width:100%;margin-top:auto}
.pcard.soon{opacity:.92}
.pcard.soon .ph::before{
  content:"Sắp ra mắt";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(5,8,15,.72),rgba(11,18,38,.78));
  color:#fff;display:grid;place-items:center;
  font-weight:800;letter-spacing:.08em;font-size:14px;z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.tagbest{
  position:absolute;top:12px;left:12px;
  background:var(--grad-org);color:#fff;font-size:11px;font-weight:800;
  padding:5px 12px;border-radius:999px;z-index:3;
  text-transform:uppercase;letter-spacing:.08em;
  box-shadow:0 6px 14px rgba(255,107,26,.45);
}

/* ===== Dark sections ===== */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.dark::before{
  content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.6;pointer-events:none;
}
.dark > *{position:relative;z-index:2}
.dark h2{color:#fff}
.dark .muted{color:#9eb3ca}
.dark .eyebrow{
  color:var(--cyan);
  background:linear-gradient(135deg,rgba(34,229,255,.16),rgba(45,140,255,.10));
  border-color:rgba(34,229,255,.35);
}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
@media(max-width:820px){.twocol{grid-template-columns:1fr}}
.block{
  background:linear-gradient(180deg,var(--ink2),var(--ink3));
  border:1px solid var(--line2);border-radius:18px;padding:28px 26px;
  position:relative;overflow:hidden;
  transition:transform .25s,border-color .25s;
}
.block::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.6;
}
.block:hover{transform:translateY(-4px);border-color:rgba(34,229,255,.4)}
.block h3{color:var(--cyan);font-size:18px;margin-bottom:.5em}
.block p{color:#c8d8eb;font-size:14.5px;margin:0;line-height:1.65}

/* ===== Helpers ===== */
.lead-sub{text-align:center;color:var(--soft);max-width:62ch;margin:8px auto 6px;font-size:15.5px}
.note-soft{font-size:12.5px;color:var(--soft)}
.placeholder{
  border:1.5px dashed rgba(45,140,255,.32);border-radius:18px;
  padding:36px 24px;text-align:center;color:var(--soft);
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  font-size:14.5px;
}

/* ===== Footer ===== */
footer.site{
  background:var(--ink);color:#9eb3ca;padding:56px 0 28px;font-size:14px;
  position:relative;overflow:hidden;border-top:1px solid var(--line);
}
footer.site::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){footer.site .cols{grid-template-columns:1fr}}
footer.site img{height:32px;margin-bottom:14px;filter:drop-shadow(0 0 8px rgba(34,229,255,.3))}
footer.site a{color:#cfe3f5;transition:color .15s}
footer.site a:hover{color:var(--cyan)}
footer.site h4{color:#fff;font-size:14px;margin:0 0 14px;font-weight:700;letter-spacing:.02em}
footer.site .soc{display:flex;gap:10px;margin-top:14px}
footer.site .soc a{
  width:38px;height:38px;border-radius:11px;
  background:rgba(34,229,255,.08);border:1px solid var(--line);
  display:grid;place-items:center;transition:all .2s;
}
footer.site .soc a:hover{background:var(--grad-blue-soft);border-color:transparent;transform:translateY(-2px)}
.legalbar{
  border-top:1px solid var(--line);margin-top:30px;padding-top:18px;
  font-size:12.5px;color:#6b7e93;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ===== Cart drawer ===== */
.cart-mask{
  position:fixed;inset:0;background:rgba(5,8,15,.65);backdrop-filter:blur(4px);
  z-index:70;display:none;opacity:0;transition:opacity .25s;
}
.cart-mask.open{display:block;opacity:1}
.cart{
  position:fixed;top:0;right:-440px;width:400px;max-width:94vw;height:100%;
  background:#fff;z-index:71;
  transition:right .3s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(5,8,15,.45);
}
.cart.open{right:0}
.cart .ch{
  padding:20px 22px;border-bottom:1px solid #eef2f7;
  display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:17px;
  background:linear-gradient(180deg,var(--bg2),#fff);
}
.cart .items{flex:1;overflow:auto;padding:14px 22px}
.cart .it{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #f0f4fa}
.cart .it .qn{display:flex;align-items:center;gap:8px}
.cart .it button{
  width:28px;height:28px;border:1.5px solid #d8e2ee;background:#fff;
  border-radius:8px;cursor:pointer;font-weight:800;transition:all .15s;
}
.cart .it button:hover{border-color:var(--blue);background:#eef6ff;color:var(--blue-d)}
.cart .foot{padding:20px 22px;border-top:1px solid #eef2f7;background:var(--bg2)}
.cart .tot{display:flex;justify-content:space-between;font-weight:800;font-size:19px;margin-bottom:14px;color:var(--ink)}
.cart .tot span:last-child{
  background:var(--grad-org);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:22px;
}
.field{margin-bottom:12px}
.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--txt2)}
.field input,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid #d8e2ee;border-radius:10px;
  font:inherit;font-size:14.5px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
  background:#fff;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(45,140,255,.14);
}
.okmsg{
  display:none;background:linear-gradient(135deg,#e7faf0,#d4f5e2);
  border:1px solid #a8e6c0;color:#15683b;
  border-radius:11px;padding:14px;font-weight:600;margin-top:12px;
}

/* ===== Floating contact buttons ===== */
.float{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:12px}
.float a{
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.30);
  transition:transform .2s,box-shadow .2s;
  position:relative;
}
.float a:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 36px rgba(0,0,0,.40)}
.float a::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;
  opacity:0;animation:pulseRing 2.2s ease-out infinite;
}
.float .zalo{background:linear-gradient(135deg,#3b9eff,#0068FF)}
.float .mess{background:linear-gradient(135deg,#3b8aff,#0866FF)}
.float .call{background:linear-gradient(135deg,#22d684,#16b35a)}
@keyframes pulseRing{
  0%{opacity:.7;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}

/* ===== Product detail (san-pham page) ===== */
.pd{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;padding:40px 0}
@media(max-width:880px){.pd{grid-template-columns:1fr;gap:24px;padding:28px 0}}
.gallery .main{
  border:1px solid #e5edf7;border-radius:20px;overflow:hidden;
  aspect-ratio:1;background:#00213d center/cover;
  box-shadow:var(--sh-card);
}
.gallery .thumbs{display:flex;gap:12px;margin-top:14px}
.gallery .thumbs div{
  width:70px;height:70px;border-radius:12px;
  border:2px solid transparent;background:#00213d center/cover;cursor:pointer;
  transition:transform .15s,border-color .15s;
}
.gallery .thumbs div:hover{transform:translateY(-2px)}
.gallery .thumbs div.on{border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,140,255,.18)}

.pd .price{
  font-size:34px;font-weight:900;
  background:var(--grad-org);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.opt{display:flex;gap:12px;margin:14px 0}
.opt button{
  flex:1;padding:14px 16px;border:2px solid #d8e2ee;background:#fff;
  border-radius:13px;font:inherit;font-weight:700;cursor:pointer;text-align:left;
  transition:all .18s;
}
.opt button:hover{border-color:var(--blue);background:#f4faff}
.opt button.on{
  border-color:var(--blue);
  background:linear-gradient(135deg,#eaf3fb,#dceeff);
  box-shadow:0 0 0 4px rgba(45,140,255,.12);
}
.opt .u{font-size:12.5px;color:var(--soft);font-weight:500;margin-top:3px;font-family:'JetBrains Mono',monospace}
.qty{
  display:flex;align-items:center;border:1.5px solid #d8e2ee;
  border-radius:11px;width:fit-content;overflow:hidden;background:#fff;
}
.qty button{width:44px;height:44px;border:0;background:#f3f6fb;font-size:18px;font-weight:800;cursor:pointer;transition:background .15s}
.qty button:hover{background:var(--bg3)}
.qty input{width:54px;text-align:center;border:0;font:inherit;font-size:16px;font-weight:700;background:#fff}

.uspmini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.uspmini div{
  font-size:13.5px;color:var(--txt2);display:flex;gap:10px;align-items:center;
  padding:10px 14px;background:var(--bg2);border-radius:10px;border:1px solid var(--bg3);
}

.tabs{display:flex;gap:4px;border-bottom:1px solid #e5edf7;margin-top:36px;flex-wrap:wrap}
.tabs button{
  padding:12px 18px;border:0;background:none;font:inherit;font-weight:700;
  color:var(--soft);cursor:pointer;border-bottom:3px solid transparent;
  transition:color .18s,border-color .18s;
}
.tabs button:hover{color:var(--blue-d)}
.tabs button.on{color:var(--blue-d);border-color:var(--orange)}
.tabpane{display:none;padding:24px 0;max-width:780px}
.tabpane.on{display:block;animation:fadeIn .3s ease-out}
.tabpane h4{margin:18px 0 6px;color:var(--ink);font-size:16px}
.tabpane p,.tabpane li{color:var(--txt2);font-size:14.5px}
.spec{width:100%;border-collapse:collapse}
.spec td{padding:11px 6px;border-bottom:1px solid #eef2f7;font-size:14.5px}
.spec td:first-child{color:var(--soft);width:42%;font-weight:600}
.spec td:last-child{color:var(--ink);font-weight:600}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Scroll reveal (added via JS) ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* ===== Page title hero (used by inner pages) ===== */
.pagehero{
  background:var(--ink);color:#fff;padding:60px 0 40px;
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
}
.pagehero::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.55}
.pagehero > .wrap{position:relative;z-index:2}
.pagehero h1{
  font-size:clamp(28px,4vw,42px);margin-bottom:.3em;
  background:linear-gradient(180deg,#fff,#cfe9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pagehero p{color:#b6c8de;font-size:16px;max-width:60ch;margin:0}

/* ===== Policy / article body ===== */
.article{max-width:820px;margin:0 auto;padding:48px 0;font-size:15.5px;line-height:1.8}
.article h2{font-size:24px;margin-top:1.4em}
.article h3{font-size:18px;margin-top:1.2em;color:var(--blue-d)}
.article p{color:var(--txt2)}
.article ul,.article ol{padding-left:22px;color:var(--txt2)}
.article li{margin-bottom:6px}
.article a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Video demo ===== */
.video-row{
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  max-width:1000px;margin:0 auto;
}
@media(max-width:780px){
  .video-row{grid-template-columns:1fr;gap:22px;max-width:420px}
}
.video-wrap{
  border-radius:20px;overflow:hidden;background:#00213d;position:relative;
  box-shadow:0 30px 70px -20px rgba(11,99,182,.30),0 0 0 1px var(--bg3);
  aspect-ratio:16/9;width:100%;
}
.video-wrap.portrait{
  aspect-ratio:9/16;width:320px;max-width:100%;justify-self:center;
}
@media(max-width:780px){.video-wrap.portrait{width:280px}}
.video-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(34,229,255,.06),transparent 40%,rgba(255,107,26,.06));
  mix-blend-mode:overlay;
}
.video-demo{width:100%;height:100%;display:block;object-fit:contain;background:#00213d}
.video-demo:focus{outline:2px solid var(--cyan);outline-offset:3px}

.video-side h3{font-size:24px;margin-bottom:.6em;color:var(--ink)}
.video-side .muted-soft{color:var(--soft);font-size:15.5px;margin-bottom:1.2em}
.vbullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.vbullets li{
  background:var(--bg2);border:1px solid var(--bg3);border-radius:10px;
  padding:11px 14px;font-size:14.5px;color:var(--txt2);
  position:relative;padding-left:36px;
}
.vbullets li::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--grad-blue);
  box-shadow:0 0 0 3px rgba(45,140,255,.18);
}
.vbullets li b{color:var(--ink);font-weight:700}

/* Gallery video tile (product page) */
.gallery .thumbs div.vid{
  position:relative;background:#00213d center/cover;background-image:url('img/demo_poster.webp');
}
.gallery .thumbs div.vid::after{
  content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* Video modal */
.vmodal{
  position:fixed;inset:0;background:rgba(5,8,15,.85);backdrop-filter:blur(8px);
  z-index:80;display:none;align-items:center;justify-content:center;padding:20px;
}
.vmodal.open{display:flex}
.vmodal .box{position:relative;max-width:960px;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.vmodal video{width:100%;height:100%;display:block}
.vmodal .close{
  position:absolute;top:-12px;right:-12px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:0;font-size:20px;cursor:pointer;font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .15s;
}
.vmodal .close:hover{transform:scale(1.1)}
/* ===================================================================
   NEXVA v3 — global tweaks (Bach brief 17/06/2026)
   - Giảm hiệu ứng hover
   - Tiêu đề section to rõ
   - Header navy underlay + searchbar + cart cam
   - Bỏ button mờ nhạt
   - Responsive guards mobile-first
   =================================================================== */

/* ===== 0. Tiêu đề section to & rõ ===== */
.sec h2{
  font-size:clamp(30px,4.4vw,46px)!important;
  font-weight:900;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink);
}
.dark h2{color:#fff!important}
.sec .eyebrow{font-size:12px;margin-bottom:14px}

/* ===== 1. Giảm hover (giật lag ở thiết bị yếu) ===== */
.ucard{transition:transform .18s,border-color .18s}
.ucard:hover{transform:none;box-shadow:var(--sh-card);border-color:rgba(45,140,255,.32)}
.ucard:hover::before{transform:scaleX(1)}
.ucard:hover .ic::after{opacity:0}
.pcard{transition:border-color .18s,box-shadow .18s}
.pcard:hover{transform:none;box-shadow:0 16px 32px -16px rgba(11,99,182,.22);border-color:rgba(45,140,255,.32)}
.pcard:hover .ph::after{opacity:0}
.block{transition:border-color .18s}
.block:hover{transform:none;border-color:rgba(34,229,255,.4)}
.hero .img:hover img{transform:none}
.badge:hover{transform:none}
.btn:hover{transform:none}
.btn::after{display:none}
.btn-org:hover{filter:brightness(1.04);box-shadow:var(--glow-org)}
.btn-blue:hover{filter:brightness(1.05);box-shadow:0 12px 28px rgba(45,140,255,.40)}
.btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);color:#fff}
.btn-line:hover{filter:brightness(.98)}
/* tắt mesh float animation cho mượt */
.hero::before,.dark::before{animation:none!important}

/* ===== 2. Bỏ button mờ nhạt (disabled) ===== */
.btn:disabled,.btn.disabled{display:none!important}
.pcard.soon .btn{display:none!important}
.pcard.soon{opacity:1}
.pcard.soon .ph::before{
  background:linear-gradient(135deg,rgba(0,33,61,.55),rgba(0,33,61,.72));
  font-size:13px;
}

/* ===== 3. Header — navy underlay + searchbar + cart cam ===== */
header.site{
  background:#00213d!important;          /* solid navy đậm */
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{gap:14px}
.nav img{filter:none}                      /* bỏ glow lệch tone logo gradient */
.logo-link{display:flex;align-items:center}
.nav .menu a{color:#dbe7f5;font-size:14px}
.nav .menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav .menu a::after{display:none}          /* bỏ underline animation */

/* searchbar */
.searchbar{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:0 12px;height:40px;
  width:280px;max-width:100%;
  transition:border-color .18s,background .18s;
}
.searchbar:focus-within{border-color:var(--cyan);background:rgba(255,255,255,.12)}
.searchbar-ic{color:#9fb5cc;flex-shrink:0}
.searchbar input{
  border:0;background:transparent;color:#fff;
  font:inherit;font-size:14px;width:100%;outline:none;
}
.searchbar input::placeholder{color:#7d92aa}

/* cart icon cam */
.ic-cart svg{stroke:#fff!important;color:#fff!important}
.ic-cart{
  width:42px;height:42px;border-radius:11px;
  background:#D8451A;border:0;color:#fff;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px rgba(216,69,26,.45);
  transition:filter .18s;position:relative;
  padding:0;
}
.ic-cart:hover{filter:brightness(1.08)}
.ic-cart .cartn{
  position:absolute;top:-4px;right:-4px;
  background:#fff;color:#E04F08;font-size:10.5px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ===== 4. Hero/banner overrides ===== */
.hero h1{
  font-size:clamp(34px,5.6vw,60px)!important;
}
.hero h1 .org{
  background:var(--grad-org)!important;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{color:#cfddef;max-width:48ch;font-size:clamp(15px,1.5vw,17px)}
.hero-img-stack{
  display:grid;gap:16px;
  grid-template-columns:1fr 1fr;
  position:relative;z-index:2;
}
.hero-img-stack .img{
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(34,229,255,.18);
  box-shadow:var(--sh-dark);
  aspect-ratio:3/4;
  background:#00213d;
}
.hero-img-stack .img.wide{
  grid-column:1/-1;aspect-ratio:16/8;
}
.hero-img-stack img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:880px){
  .hero-img-stack{grid-template-columns:1fr 1fr}
  .hero-img-stack .img{aspect-ratio:3/4}
}

/* ===== 5. USP card icon — nền xanh, icon trắng đơn giản ===== */
.ucard .ic{
  background:var(--grad-blue-soft);
  font-size:0;                              /* ẩn emoji cũ nếu còn */
  color:#fff;
}
.ucard .ic svg{width:26px;height:26px;display:block}
.ucard h3{font-size:18px;font-weight:800}
.ucard p{font-size:14.5px;line-height:1.65}

/* ===== 6. NEXCARE Formula — vân nền hi-tech + căn đều ===== */
.formula-section{position:relative;overflow:hidden}
.formula-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(34,229,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,229,255,.04) 1px,transparent 1px),
    radial-gradient(circle at 20% 30%,rgba(45,140,255,.10),transparent 50%),
    radial-gradient(circle at 80% 70%,rgba(255,107,26,.08),transparent 50%);
  background-size:40px 40px,40px 40px,100% 100%,100% 100%;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 40%,transparent 90%);
}
.formula-section .twocol{gap:28px}
.formula-section .block{padding:30px 28px;text-align:justify}
.formula-section .block h3{
  text-align:center;font-size:20px;
  background:var(--grad-mix);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.formula-section .lead-sub{max-width:72ch;font-size:16px}

/* ===== 7. Lab/Kiểm nhiệm section ===== */
.lab-section{background:linear-gradient(180deg,var(--bg2),#fff)}
.lab-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  margin-top:30px;
}
@media(max-width:880px){.lab-grid{grid-template-columns:1fr;gap:24px}}
.lab-text p{
  font-size:15.5px;color:var(--txt2);line-height:1.75;text-align:justify;
  margin-bottom:1em;
}
.lab-visual{
  border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#00213d,#0a3a66);
  aspect-ratio:4/3;
  display:grid;place-items:center;
  position:relative;
  box-shadow:var(--sh-card);
}
.lab-visual::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(34,229,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,229,255,.08) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 90%);
}
.lab-visual .lab-img{
  width:65%;max-width:280px;position:relative;z-index:2;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));
}
.lab-badges{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px;
}
@media(max-width:520px){.lab-badges{grid-template-columns:1fr}}
.lab-badge{
  background:#fff;border:1px solid #e5edf7;border-radius:12px;
  padding:14px 16px;font-size:13.5px;color:var(--txt2);
  display:flex;gap:10px;align-items:center;
  box-shadow:0 4px 10px rgba(11,99,182,.06);
}
.lab-badge b{color:var(--ink);font-weight:800;font-size:14px}
.lab-badge .dot{
  width:10px;height:10px;border-radius:50%;background:var(--good);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(22,199,132,.18);
}

/* ===== 8. Mobile guards ===== */
@media(max-width:880px){
  .searchbar{display:none}                  /* search bar ẩn mobile, có thể bật lại nếu cần */
  .nav{gap:8px;height:60px}
  .nav img{height:28px}
}
@media(max-width:520px){
  .sec{padding:48px 0}
  .sec h2{font-size:clamp(26px,7vw,34px)!important}
  .hero h1{font-size:clamp(28px,8vw,40px)!important}
  .hero-img-stack{gap:10px}
}

/* ===== 9. Product card SKU placeholder (hue rotate cho ảo giác màu khác) ===== */
.pcard.variant-orange .ph{filter:hue-rotate(-90deg) saturate(1.2)}
.pcard.variant-purple .ph{filter:hue-rotate(80deg)}
.pcard.variant-green  .ph{filter:hue-rotate(180deg) saturate(.9)}

/* Cart icon — squircle cam đậm (Bach 17/06 18:33) */
.ic-cart{
  width:46px!important;height:46px!important;
  border-radius:14px!important;
  background:#D8451A!important;
  background:linear-gradient(180deg,#E85A24,#C13A12)!important;
  box-shadow:0 6px 14px rgba(216,69,26,.45),inset 0 1px 0 rgba(255,255,255,.18)!important;
  border:0!important;
}
.ic-cart svg{width:24px!important;height:24px!important;stroke:#fff!important;color:#fff!important;stroke-width:2.2!important}
.ic-cart .cartn{
  background:#fff!important;color:#D8451A!important;
  min-width:20px!important;height:20px!important;border-radius:10px!important;
  font-size:11px!important;
  top:-6px!important;right:-6px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.3)!important;
}

/* Fix .org gradient text vỡ thành khối cam (Bach 17/06 18:37) */
.hero h1 .org{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#E85A24!important;
  display:inline!important;
}

/* Hero image stack — chai làm ảnh chính, kính phụ */
.hero-img-stack{
  grid-template-columns:1.4fr 1fr!important;
  grid-template-rows:auto auto;
  gap:14px!important;
}
.hero-img-stack .img-main{
  grid-row:1/3;
  aspect-ratio:3/4!important;
  background:linear-gradient(180deg,#0a3a66,#00213d);
}
.hero-img-stack .img-main img{object-fit:contain!important;padding:18px}
.hero-img-stack .img-side{
  aspect-ratio:4/3!important;
}
.hero-img-stack .img-side img{object-fit:cover!important}
.hero-img-stack .img.wide{display:none!important}  /* tắt layout cũ */
@media(max-width:880px){
  .hero-img-stack{grid-template-columns:1.3fr 1fr!important}
}
@media(max-width:520px){
  .hero-img-stack{grid-template-columns:1fr!important;grid-template-rows:auto}
  .hero-img-stack .img-main{grid-row:auto;aspect-ratio:4/5!important}
}

/* Hero H1 nhẹ lại (Bach 17/06 18:39) */
.hero h1{font-weight:800!important;letter-spacing:-.015em!important}

/* Sản phẩm sắp ra mắt — nền navy + blur ảnh + button hover (Bach 17/06 18:44) */
.pcard.soon .ph{
  background-color:#0a3a66!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  filter:none!important;
  position:relative;
}
.pcard.soon.variant-orange .ph,
.pcard.soon.variant-purple .ph,
.pcard.soon.variant-green .ph{filter:none!important}  /* tắt hue-rotate cũ */
.pcard.soon .ph img,
.pcard.soon .ph{
  /* blur ảnh: dùng inner img */
}
.pcard.soon .ph::before{
  /* tắt overlay text 'Sắp ra mắt' cũ */
  display:none!important;
}

/* Bach 05/08 18:32 — Sản phẩm sắp ra mắt: chai NEXVA vẫn LỘ RÕ silhouette nhưng mờ + overlay vừa */
.pcard.soon .ph{
  filter:none!important;
  background-size:cover!important;       /* fill khung để chai lộ ra rõ hơn */
  background-position:center 30%!important;  /* căn chai ra giữa-trên */
}
.pcard.soon .ph::before{
  display:block!important;
  content:""!important;                  /* bỏ text 'Sắp ra mắt' overlay — chỉ giữ hiệu ứng */
  background:linear-gradient(135deg,rgba(0,10,25,.45),rgba(5,15,35,.55))!important;  /* mờ vừa, chai lộ rõ */
  backdrop-filter:blur(4px) saturate(.85)!important;  /* blur nhẹ */
  -webkit-backdrop-filter:blur(4px) saturate(.85)!important;
}
.pcard.soon .ph::after{display:none!important}  /* Bach 06/08 08:19 — bỏ lớp overlay thừa */
/* Khôi phục button trong .soon */
.pcard.soon .btn{display:flex!important;margin-top:auto}
.pcard.soon .btn-soon{
  background:linear-gradient(135deg,#2D8CFF,#0B63B6);
  color:#fff;width:100%;
  box-shadow:0 8px 18px rgba(45,140,255,.32);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.pcard.soon .btn-soon:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(45,140,255,.48);
  filter:brightness(1.08);
}

/* Formula block — heading cam + text căn giữa (Bach 17/06 18:47) */
.formula-section .block h3{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#FF7A30!important;
  text-align:center;
}
.formula-section .block p{text-align:center!important}

/* News section (Bach 17/06 18:54) */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:920px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.news-grid{grid-template-columns:1fr}}
.news-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #e5edf7;border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:0 6px 16px -8px rgba(11,99,182,.18);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px -12px rgba(11,99,182,.28);
  border-color:rgba(45,140,255,.32);
}
.news-thumb{
  aspect-ratio:16/10;
  background-size:cover;background-position:center;
  position:relative;
}
.news-cat{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.95);color:var(--blue-d);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.news-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-date{font-size:12px;color:var(--soft);font-family:'JetBrains Mono',monospace}
.news-card h3{
  font-size:15.5px;font-weight:700;line-height:1.45;color:var(--ink);
  margin:0;
}

/* Force 4 cột news desktop only */@media(min-width:769px){
.news-grid{grid-template-columns:repeat(4,1fr)!important;gap:14px!important}
.news-card h3{font-size:14.5px}
}


/* Product page (Bach 17/06 19:02) */
.uspmini div{
  background:var(--bg2)!important;border:1px solid var(--bg3)!important;
  padding:10px 14px!important;border-radius:10px!important;
  font-size:13.5px!important;color:var(--txt2)!important;
  display:flex!important;gap:10px!important;align-items:center!important;
}
.uspmini .usp-ic{
  width:30px;height:30px;border-radius:8px;
  background:var(--grad-blue-soft);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.uspmini b{color:var(--ink);font-weight:700}

/* Product gallery — padding chai cách mép (Bach 17/06 19:05) */
.gallery .main{
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-origin:content-box!important;
  padding:32px!important;
  background-color:#eef4fb!important;
}
.gallery .thumbs div{
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-origin:content-box!important;
  padding:6px!important;
  background-color:#eef4fb!important;
}

/* Giảm độ nổi của USP mini trên trang SP (Bach 17/06 19:08) */
.uspmini div{
  background:#f7faff!important;
  border:1px solid #ecf2fa!important;
  color:#6b7e93!important;
  font-size:12.5px!important;
  padding:8px 12px!important;
  font-weight:500!important;
}
.uspmini b{color:#4a5b73!important;font-weight:600!important}
.uspmini .usp-ic{
  width:24px!important;height:24px!important;
  background:#dfeaf7!important;
  color:#6b8aab!important;
  border-radius:6px!important;
}
.uspmini .usp-ic svg{width:14px!important;height:14px!important}

/* ===================================================================
   MOBILE OPTIMIZATION v1 (Bach 17/06 19:13)
   - Áp dụng cho điện thoại <768px và <520px
   - Tăng padding lề (tránh dính mép)
   - Giảm cỡ chữ tiêu đề cho dễ nhìn tổng thể
   - Tăng spacing dọc giữa section
   - Card padding hợp lý hơn
   =================================================================== */

@media(max-width:768px){
  /* Wrap padding lớn hơn cho thoáng */
  .wrap{padding:0 18px!important}

  /* Section spacing */
  .sec{padding:42px 0!important}

  /* Tiêu đề H2 vừa phải, không quá to */
  .sec h2{
    font-size:clamp(22px,6vw,28px)!important;
    line-height:1.2!important;
    letter-spacing:-.01em!important;
  }
  .center .eyebrow{font-size:11px!important;margin-bottom:10px!important}

  /* Hero H1 nhỏ lại cho cân */
  .hero h1{
    font-size:clamp(26px,7.5vw,34px)!important;
    line-height:1.18!important;
  }
  .hero .lead{
    font-size:14.5px!important;line-height:1.6!important;
    margin:.6em 0 1.4em!important;
  }
  .hero .grid{padding:36px 0 44px!important;gap:24px!important}
  .hero .badges{margin-top:18px!important;gap:6px!important}
  .hero .badges .badge{font-size:11.5px!important;padding:6px 10px!important}

  /* Hero buttons full width nhưng cách nhau */
  .hero .grid .btn{flex:1;min-width:0;justify-content:center}

  /* Header gọn lại */
  .nav{height:56px!important;gap:6px!important;padding:0!important}
  .nav img{height:24px!important}
  .nav .menu a{font-size:14px;padding:10px 14px}
  .ic-cart{width:40px!important;height:40px!important;border-radius:11px!important}
  .ic-cart svg{width:20px!important;height:20px!important}
  .burger{font-size:22px;width:36px;height:36px}

  /* USP card 4 -> 2 col, giảm padding */
  .cards4{gap:12px!important}
  .ucard{padding:20px 18px!important;border-radius:14px!important}
  .ucard h3{font-size:15.5px!important;margin-bottom:.3em!important}
  .ucard p{font-size:13.5px!important;line-height:1.55!important}
  .ucard .ic{width:42px!important;height:42px!important;border-radius:11px!important;margin-bottom:12px!important}
  .ucard .ic svg{width:22px;height:22px}

  /* Product grid card */
  .pgrid{gap:14px!important}
  .pcard{border-radius:14px!important}
  .pcard .body{padding:14px!important;gap:2px!important}
  .pcard h3{font-size:14.5px!important;line-height:1.3!important}
  .pcard .price{font-size:18px!important;margin:6px 0 10px!important}
  .pcard .btn{padding:10px 14px!important;font-size:13.5px!important}

  /* Formula section */
  .formula-section .block{padding:22px 20px!important;border-radius:14px!important}
  .formula-section .block h3{font-size:16.5px!important}
  .formula-section .block p{font-size:13.5px!important;line-height:1.6!important;text-align:left!important}
  .formula-section .twocol{gap:14px!important;margin-top:22px!important}
  .formula-section .lead-sub{font-size:14px!important;line-height:1.6!important;padding:0 4px}

  /* Lab section */
  .lab-section .lab-grid{gap:22px!important;margin-top:22px!important}
  .lab-section .lab-text p{font-size:14px!important;line-height:1.65!important;text-align:left!important}
  .lab-section .lab-badges{gap:8px!important;margin-top:16px!important}
  .lab-section .lab-badge{padding:10px 12px!important;font-size:12.5px!important;gap:8px!important}
  .lab-section .lab-badge b{font-size:13px!important}
  .lab-visual{aspect-ratio:5/4!important}
  .lab-visual .lab-img{width:55%!important;max-width:200px!important}

  /* News */
  .news-grid{gap:10px!important}
  .news-body{padding:14px 14px 16px!important}
  .news-card h3{font-size:13.5px!important;line-height:1.4!important}
  .news-date{font-size:11px!important}
  .news-cat{font-size:10px!important;padding:3px 8px!important}

  /* Hero image stack: giữ chai chính nhưng nhỏ hơn */
  .hero-img-stack{gap:10px!important}
  .hero-img-stack .img-main{aspect-ratio:1!important}
  .hero-img-stack .img-main img{padding:14px!important}
  .hero-img-stack .img-side{aspect-ratio:1!important}

  /* Footer */
  footer.site{padding:40px 0 22px!important;font-size:13px!important}
  footer.site .cols{gap:24px!important}
  footer.site h4{font-size:13.5px!important;margin-bottom:10px!important}
  .legalbar{font-size:11.5px!important;margin-top:22px!important;padding-top:14px!important}
  .float a{width:46px!important;height:46px!important;font-size:11px!important}
  .float{right:12px!important;bottom:12px!important;gap:10px!important}

  /* Product detail page */
  .pd{padding:24px 0!important;gap:20px!important}
  .gallery .main{padding:24px!important;border-radius:14px!important}
  .gallery .thumbs{gap:8px!important;margin-top:10px!important}
  .gallery .thumbs div{width:56px!important;height:56px!important;padding:5px!important;border-radius:9px!important}
  .pd h1{font-size:21px!important;line-height:1.25!important}
  .pd .price{font-size:24px!important}
  .opt button{padding:11px 13px!important;font-size:14px!important}
  .qty button{width:38px!important;height:38px!important}
  .uspmini{grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:14px!important}
  .tabs{margin-top:24px!important}
  .tabs button{padding:10px 14px!important;font-size:13.5px!important}
  .tabpane{padding:16px 0!important}
  .tabpane p,.tabpane li{font-size:13.5px!important}
  .spec td{padding:9px 4px!important;font-size:13px!important}
}

/* ===== Cực hẹp <420px (iPhone SE) ===== */
@media(max-width:420px){
  .wrap{padding:0 14px!important}
  .sec{padding:36px 0!important}
  .sec h2{font-size:21px!important}
  .hero h1{font-size:26px!important}
  .hero .lead{font-size:14px!important}
  .cards4{grid-template-columns:1fr!important}
  .news-grid{grid-template-columns:1fr!important}
  .news-thumb{aspect-ratio:16/8!important}
  .hero .grid .btn{font-size:14px!important;padding:12px 18px!important}
}

/* ===================================================================
   MOBILE v2 — shrink hero, 2-col USP, carousel sản phẩm + tin tức
   (Bach 17/06 19:22 — iPhone 11 feedback)
   =================================================================== */

@media(max-width:768px){
  /* USP 4 cards: 2 cột thay vì 1 (gọn hẳn) */
  .cards4{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .ucard{padding:16px 14px!important}
  .ucard h3{font-size:14px!important;line-height:1.25!important;margin-bottom:.25em!important}
  .ucard p{font-size:12.5px!important;line-height:1.5!important}
  .ucard .ic{width:36px!important;height:36px!important;margin-bottom:10px!important;border-radius:9px!important}
  .ucard .ic svg{width:18px!important;height:18px!important}

  /* Hero: chai chính nhỏ lại, bỏ 2 ảnh phụ (mobile chỉ giữ 1) */
  .hero-img-stack{
    display:block!important;
    max-width:260px!important;
    margin:0 auto!important;
  }
  .hero-img-stack .img-side{display:none!important}
  .hero-img-stack .img-main{
    aspect-ratio:1!important;
    border-radius:18px!important;
  }
  .hero-img-stack .img-main img{padding:10px!important}
  .hero .grid{padding:28px 0 32px!important;gap:18px!important}

  /* === CAROUSEL chung === */
  .pgrid,.news-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 18px 14px!important;
    margin:0 -18px!important;
    gap:12px!important;
    scroll-padding:18px;
  }
  .pgrid::-webkit-scrollbar,.news-grid::-webkit-scrollbar{display:none}
  .pgrid > *,.news-grid > *{
    flex:0 0 78%;
    max-width:280px;
    scroll-snap-align:start;
  }
  /* Hint scroll: card cuối có khoảng peek */
  .pgrid::after,.news-grid::after{
    content:"";flex:0 0 6px;
  }
}

@media(max-width:420px){
  /* Mobile cực hẹp giữ carousel (không về 1 cột stack) */
  .cards4{grid-template-columns:repeat(2,1fr)!important}
  .news-grid > *,.pgrid > *{flex-basis:82%!important}
}

/* Float buttons mobile — nhỏ hơn, không che carousel (Bach 17/06 19:30) */
@media(max-width:768px){
  .float{
    flex-direction:row!important;
    right:50%!important;
    transform:translateX(50%);
    bottom:10px!important;
    gap:10px!important;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    padding:6px 10px;border-radius:999px;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    border:1px solid rgba(0,33,61,.08);
  }
  .float a{
    width:36px!important;height:36px!important;
    font-size:10.5px!important;
    box-shadow:none!important;
  }
  .float a::before{display:none}
}

/* ===================================================================
   MOBILE v3 — refinements (Bach 17/06 19:36)
   - Giảm font toàn trang mobile
   - Hero: eyebrow → ảnh chai → tiêu đề → mô tả → button (căn giữa)
   - Tiêu đề 'đậm đặc' xuống dòng riêng
   - Product card: ảnh nhỏ + có khoảng cách
   - Lab badges: 2x2
   - Lab visual đẩy lên trên, dưới tiêu đề
   =================================================================== */

@media(max-width:768px){
  /* Giảm font base */
  body{font-size:14.5px!important}
  .sec h2{font-size:clamp(20px,5.4vw,25px)!important}
  .center .eyebrow{font-size:10.5px!important;letter-spacing:.18em!important;padding:4px 10px!important}

  /* ===== Hero: căn giữa, ảnh ở giữa eyebrow & H1 ===== */
  .hero .wrap.grid{
    display:flex!important;
    flex-direction:column!important;
    text-align:center;
    align-items:center;
    padding:24px 0 32px!important;
    gap:14px!important;
  }
  .hero .grid > div:first-child{
    display:contents;  /* unwrap để re-order children */
  }
  .hero .eyebrow{order:1;align-self:center}
  .hero-img-stack{order:2;max-width:200px!important;width:60%;margin:0 auto!important}
  .hero-img-stack .img-main{aspect-ratio:1!important;border-radius:14px!important}
  .hero-img-stack .img-main img{padding:8px!important}
  .hero h1{order:3;font-size:22px!important;line-height:1.2!important;margin:6px 0 0!important}
  .hero h1 .org{display:block!important}   /* xuống dòng 'đậm đặc' */
  .hero .lead{
    order:4;font-size:13.5px!important;line-height:1.55!important;
    max-width:100%!important;margin:6px 14px 10px!important;text-align:center;
    color:#cfddef;
  }
  .hero .grid > div:first-child > div:nth-child(4){
    /* div chứa buttons */
    order:5;display:flex!important;gap:10px!important;justify-content:center;
    flex-wrap:wrap;padding:0 8px;
  }
  .hero .badges{
    order:6;justify-content:center;
    margin-top:10px!important;gap:5px!important;padding:0 8px;
  }
  .hero .badges .badge{font-size:10.5px!important;padding:5px 8px!important}
  /* Thu button hero */
  .hero .btn{padding:10px 16px!important;font-size:13px!important;border-radius:10px!important}

  /* ===== Product carousel: ảnh nhỏ + padding ===== */
  .pcard .ph{
    aspect-ratio:1!important;
    background-size:60%!important;   /* chai nhỏ lại, có khoảng trắng */
    background-position:center!important;
    background-color:#f1f6fc!important;
  }
  .pcard.soon .ph{background-size:60%!important}
  .pcard{border-radius:12px!important}
  .pcard .body{padding:12px!important}
  .pcard h3{font-size:13.5px!important}
  .pcard .vol{font-size:11.5px!important}
  .pcard .price{font-size:17px!important;margin:4px 0 8px!important}

  /* ===== Lab section ===== */
  /* Visual đẩy lên trên (sau tiêu đề) */
  .lab-section .lab-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
  }
  .lab-section .lab-visual{order:1;aspect-ratio:5/3!important;max-width:280px;margin:0 auto;width:100%}
  .lab-section .lab-visual .lab-img{width:50%!important;max-width:160px!important}
  .lab-section .lab-text{order:2}
  /* 4 badges 2x2 */
  .lab-section .lab-badges{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .lab-section .lab-badge{padding:10px 10px!important;font-size:11.5px!important}
  .lab-section .lab-badge b{font-size:12px!important}
  .lab-text p{font-size:13.5px!important}

  /* USP card font giảm nữa */
  .ucard h3{font-size:13px!important}
  .ucard p{font-size:11.5px!important;line-height:1.5!important}

  /* News card */
  .news-card h3{font-size:12.5px!important}
  .news-date{font-size:10.5px!important}

  /* Formula */
  .formula-section .lead-sub{font-size:13px!important}
  .formula-section .block h3{font-size:15px!important}
  .formula-section .block p{font-size:13px!important;line-height:1.55!important}
}

/* Mobile: bỏ carousel sản phẩm → 2x2 grid (Bach 17/06 19:44) */
@media(max-width:768px){
  .pgrid{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
    padding:0!important;margin:0!important;
    overflow:visible!important;
  }
  .pgrid > *{
    flex:none!important;
    max-width:none!important;
    width:100%!important;
  }
  .pgrid::after{display:none}
  /* Chai nhỏ hơn để fit card hẹp */
  .pcard .ph{
    background-size:55%!important;
    aspect-ratio:1!important;
  }
  .pcard.soon .ph{background-size:55%!important}
  .pcard h3{font-size:12.5px!important;line-height:1.3!important}
  .pcard .price{font-size:15.5px!important}
  .pcard .vol{font-size:11px!important}
  .pcard .btn{padding:9px 8px!important;font-size:12.5px!important}
  .pcard .body{padding:10px!important}
  .tagbest{font-size:9.5px!important;padding:3px 8px!important;top:8px!important;left:8px!important}
  /* News giữ carousel vì hợp hơn (titles dài) */
}

/* Button xem tất cả tin tức — nhẹ (Bach 17/06 19:54) */
.btn-news-more{
  background:transparent;
  color:var(--blue-d);
  border:1.5px solid #d8e2ee;
  font-weight:600;
  font-size:13.5px;
  padding:10px 22px;
  border-radius:10px;
  box-shadow:none;
}
.btn-news-more:hover{
  border-color:var(--blue);
  background:#f4faff;
  color:var(--blue-d);
}

/* Hero buttons mobile — ép 1 dòng (Bach 17/06 19:54) */
@media(max-width:768px){
  .hero .btn{
    white-space:nowrap!important;
    padding:10px 14px!important;
    font-size:12.5px!important;
    flex:0 1 auto!important;
    min-width:0!important;
  }
}

/* Product card .ph mobile — chai hiện đủ, không crop (Bach 17/06 19:55) */
@media(max-width:768px){
  .pcard .ph,
  .pcard.soon .ph{
    background-size:contain!important;   /* contain = nguyên chai, ko crop */
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-color:#f1f6fc!important;
    padding:14px!important;
    background-origin:content-box!important;
    aspect-ratio:1!important;
  }
}

/* ===================================================================
   Hero v4 — ảnh nền carwash + overlay xanh/cam (Bach 18/06 17:50)
   =================================================================== */
.hero{
  background:
    linear-gradient(135deg,
      rgba(0,33,61,.82) 0%,
      rgba(11,99,182,.55) 35%,
      rgba(0,33,61,.70) 65%,
      rgba(216,69,26,.42) 100%
    ),
    url('img/hero-bg-carwash.webp') center/cover no-repeat!important;
}
/* Tắt vân nền grid + mesh */
.hero::before,
.hero::after{display:none!important}

/* Hero overlay tối hơn (Bach 18/06 18:01) */
.hero{
  background:
    linear-gradient(135deg,
      rgba(0,15,30,.92) 0%,
      rgba(0,33,61,.86) 40%,
      rgba(0,20,45,.88) 65%,
      rgba(216,69,26,.55) 100%
    ),
    url('img/hero-bg-carwash.webp') center/cover no-repeat!important;
}

/* Hero single image — vuông, áp dụng desktop+mobile (Bach 18/06 18:03) */
.hero-single{
  aspect-ratio:1!important;
  width:100%;max-width:480px;margin:0 auto;
  display:block;
}
.hero-single img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
/* Tắt rule cũ stack */
.hero-img-stack{display:none!important}
@media(max-width:768px){
  .hero-single{max-width:260px}
}

/* Hero single — to hơn + glow đằng sau (Bach 18/06 18:08) */
.hero-single{
  max-width:620px!important;
  position:relative;
}
.hero-single::before{
  content:"";position:absolute;
  inset:-8% -8% -8% -8%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,170,90,.55) 0%, rgba(255,107,26,.32) 25%, transparent 55%),
    radial-gradient(circle at 50% 60%, rgba(45,180,255,.35) 0%, transparent 50%);
  filter:blur(35px);
  z-index:0;
  animation:heroGlow 6s ease-in-out infinite alternate;
}
.hero-single img{position:relative;z-index:1}
@keyframes heroGlow{
  0%{opacity:.75;transform:scale(.96)}
  100%{opacity:1;transform:scale(1.04)}
}
@media(max-width:768px){
  .hero-single{max-width:320px!important}
  .hero-single::before{filter:blur(22px)}
}

/* Hero glow MẠNH (Bach 18/06 18:09) */
.hero-single::before{
  inset:-20%!important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,140,40,.95) 0%, rgba(255,90,20,.65) 18%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(34,180,255,.85) 0%, rgba(45,140,255,.45) 22%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,200,80,.6) 0%, transparent 35%)!important;
  filter:blur(45px)!important;
}
.hero-single::after{
  content:"";position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,150,50,.35), transparent 70%);
  filter:blur(15px);
  z-index:0;
  pointer-events:none;
}
.hero-single img{
  filter:drop-shadow(0 0 30px rgba(255,107,26,.6)) drop-shadow(0 0 60px rgba(45,140,255,.4));
}
@media(max-width:768px){
  .hero-single::before{filter:blur(28px)!important;inset:-15%!important}
  .hero-single img{filter:drop-shadow(0 0 18px rgba(255,107,26,.6))}
}

/* Hero glow -30% (Bach 18/06 18:11) */
.hero-single::before{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,140,40,.65) 0%, rgba(255,90,20,.45) 18%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(34,180,255,.58) 0%, rgba(45,140,255,.30) 22%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,200,80,.40) 0%, transparent 35%)!important;
}
.hero-single::after{
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,150,50,.22), transparent 70%)!important;
}
.hero-single img{
  filter:drop-shadow(0 0 22px rgba(255,107,26,.42)) drop-shadow(0 0 45px rgba(45,140,255,.28))!important;
}
@media(max-width:768px){
  .hero-single img{filter:drop-shadow(0 0 14px rgba(255,107,26,.42))!important}
}

/* Lab visual — ảnh thật full bleed (Bach 18/06 18:12) */
.lab-visual.lab-photo{
  background:none!important;
  aspect-ratio:4/3!important;
  padding:0!important;
  display:block!important;
  position:relative;
}
.lab-visual.lab-photo::before{display:none!important}
.lab-visual.lab-photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border-radius:20px;
}

/* Formula section — ảnh nền dashboard tech + overlay giống hero (Bach 18/06 18:17) */
.formula-section{
  background:
    linear-gradient(135deg,
      rgba(0,15,30,.92) 0%,
      rgba(0,33,61,.86) 40%,
      rgba(0,20,45,.88) 65%,
      rgba(216,69,26,.55) 100%
    ),
    url('img/formula-bg.webp') center/cover no-repeat!important;
}
/* Tắt vân grid cũ của formula */
.formula-section::after{display:none!important}

/* Cart icon -15% toàn trang (Bach 24/06 18:02) */
.ic-cart{
  width:39px!important;height:39px!important;
  border-radius:12px!important;
}
.ic-cart svg{width:20px!important;height:20px!important}
.ic-cart .cartn{min-width:17px!important;height:17px!important;font-size:10px!important}
@media(max-width:768px){
  .ic-cart{width:34px!important;height:34px!important;border-radius:10px!important}
  .ic-cart svg{width:17px!important;height:17px!important}
}

/* Float mobile — dọc bên phải, không che (Bach 24/06 18:05) */
@media(max-width:768px){
  .float{
    flex-direction:column!important;
    right:12px!important;
    left:auto!important;
    bottom:90px!important;          /* gần đáy nhưng cách đáy 90px */
    transform:none!important;
    background:transparent!important;
    backdrop-filter:none!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    gap:10px!important;
  }
  .float a{
    width:42px!important;height:42px!important;
    font-size:11px!important;
    box-shadow:0 6px 14px rgba(0,0,0,.25)!important;
  }
}

/* ===================================================================
   Fix horizontal overflow mobile (Bach 24/06 18:08)
   - Trang xê dịch trái phải khi vuốt là do 1 element vượt viewport
   =================================================================== */
html,body{
  overflow-x:hidden!important;
  max-width:100vw!important;
  width:100%!important;
  position:relative;
}
body{overflow-y:auto}

/* Containers có element âm hoặc transform → cô lập overflow */
.hero,
.formula-section,
.partner-hero,
.lab-section,
.sec{overflow-x:clip}

/* Carousel margin âm chỉ áp dụng trong wrap, đảm bảo wrap chặn overflow */
.wrap{overflow-x:hidden}

/* Hero single glow ::before inset âm dễ gây tràn */
.hero-single{overflow:hidden;border-radius:18px}

/* Float button đã sửa về bên phải; xoá fallback transform sót */
@media(max-width:768px){
  .float{transform:none!important;left:auto!important}
}

/* Hình ảnh không vô tình đẩy width > 100% */
img,svg,video{max-width:100%;height:auto}

/* Footer tránh bị tràn do soc icons */
footer.site{overflow:hidden}

/* Product tabs mobile: 3 tab cùng 1 dòng (Bach 24/06 18:14) */
@media(max-width:768px){
  .tabs{
    gap:2px!important;
    flex-wrap:nowrap!important;
    justify-content:space-between!important;
  }
  .tabs button{
    padding:10px 6px!important;
    font-size:13px!important;
    flex:1;
    text-align:center;
    white-space:nowrap;
  }
}
@media(max-width:380px){
  .tabs button{font-size:12px!important;padding:9px 4px!important}
}

/* ===================================================================
   Scroll fix + Font hierarchy (Bach 03/07 19:48)
   =================================================================== */

/* --- Fix reveal animation ép scroll mượt --- */
/* Chỉ opacity, không transform (transform tạo lag scroll trên mobile) */
.reveal{
  opacity:0;
  transform:none!important;
  transition:opacity .5s ease-out;
  will-change:opacity;
}
.reveal.in{opacity:1}

/* Reset content-visibility cho các section — browser tự skip render off-screen */
.sec{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* Mobile: disable reveal luôn (mượt hẳn) */
@media(max-width:768px){
  .reveal{opacity:1!important;transition:none!important}
  html{scroll-behavior:auto}  /* smooth scroll tự nhiên hơn native */
}

/* Body scroll behavior */
body{
  overscroll-behavior-y:none;  /* chặn rubber-band gây khung ảo */
  -webkit-overflow-scrolling:touch;
}


/* ===================================================================
   FONT HIERARCHY — chuẩn hoá toàn site
   =================================================================== */

/* Font stack universal */
body,button,input,textarea,select,
header.site,footer.site,
.sec,.tabs,.pcard,.ucard,.block,
.nav,.wrap,main{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* Typographic scale (desktop) */
h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
h2{font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.015em}
h3{font-size:20px;font-weight:700;line-height:1.3}
h4{font-size:17px;font-weight:700;line-height:1.35}
h5{font-size:15px;font-weight:700}
h6{font-size:14px;font-weight:600}
body,p,li,td,label,input,textarea,button{font-size:15.5px;line-height:1.65}
small,.small,.upd,.legalbar,.note-soft{font-size:13px;line-height:1.5}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.22em}

/* Tablet */
@media(max-width:1024px){
  h1{font-size:32px}
  h2{font-size:26px}
  h3{font-size:18px}
  body,p,li{font-size:15px}
}

/* Mobile */
@media(max-width:768px){
  h1{font-size:24px;letter-spacing:-.01em}
  h2{font-size:21px}
  h3{font-size:16.5px}
  h4{font-size:15px}
  body,p,li,td,label,input,textarea,button{font-size:14.5px;line-height:1.6}
  small,.small,.upd,.legalbar,.note-soft{font-size:12px}
  .eyebrow{font-size:10.5px;letter-spacing:.18em}
}

/* Mobile nhỏ */
@media(max-width:380px){
  h1{font-size:22px}
  h2{font-size:19px}
  body,p,li{font-size:14px}
}

/* Header/Footer inherit thay vì tự set */
header.site .nav,
footer.site .cols,
footer.site .legalbar{
  font-family:inherit;
}

/* HOTFIX 05/07 09:20 — bỏ content-visibility gây kẹt scroll desktop */
.sec{
  content-visibility:visible!important;
  contain-intrinsic-size:auto!important;
  contain:none!important;
}
body{overscroll-behavior-y:auto!important}
html{scroll-behavior:auto}

/* Kill JetBrains Mono (05/07 - lỗi dấu VN) → Be Vietnam Pro */
.eyebrow,
.pcard .vol,
.opt .u,
.news-date{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Arial,sans-serif!important;
}