/* ============================================================
   SENGVILAY FURNITURE GROUP — Design System
   Xanh navy · Vàng thương hiệu · Nền trắng
   (giữ nguyên mọi tên class cũ để worker/template không phải đổi)
   ============================================================ */

:root{
  /* ── màu thương hiệu ── */
  --navy:       #0d2a63;
  --navy-2:     #0a2050;
  --navy-3:     #071737;
  --navy-lite:  #1e4fa3;
  --brand:      #f5b81c;
  --brand-2:    #ffcc3d;
  --brand-soft: #fff7e2;

  /* ── nền (map tên cũ sang hệ sáng) ── */
  --ink:        #ffffff;
  --ink-1:      #f5f7fb;
  --ink-2:      #eef2f8;
  --panel:      #ffffff;
  --panel-2:    #f7f9fc;
  --line:       #e2e8f2;
  --line-soft:  #edf1f7;

  /* ── nhấn (tên cũ "gold" = navy nhấn trên nền trắng) ── */
  --gold:       #1e4fa3;
  --gold-lite:  #0d2a63;
  --gold-deep:  #b8860b;
  --gold-grad:  linear-gradient(96deg,#f5b81c 0%,#ffd764 48%,#f5b81c 100%);

  /* ── nút chính (tên cũ "red" = vàng thương hiệu) ── */
  --red:        #f5b81c;
  --red-lite:   #d99b00;
  --red-deep:   #c98f00;
  --red-grad:   linear-gradient(96deg,#f5b81c,#ffcc3d);

  /* ── chữ ── */
  --tx:         #16233c;
  --tx-soft:    #4c5c78;
  --tx-dim:     #7b8aa3;

  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-pill: 999px;
  --shadow:      0 14px 40px -18px rgba(13,42,99,.28);
  --shadow-soft: 0 4px 18px -8px rgba(13,42,99,.18);
  --shadow-gold: 0 0 0 1px rgba(245,184,28,.55), 0 14px 34px -18px rgba(13,42,99,.3);

  --wrap: 1240px;
  --head-h: 74px;
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--ink); color:var(--tx);
  font-family:var(--f-body); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.no-scroll{ overflow:hidden }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.16; margin:0; letter-spacing:.2px }
.wrap{ width:min(100% - 28px, var(--wrap)); margin-inline:auto }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* nền phim của bộ cũ — tắt hẳn ở hệ sáng */
.grain, .glow-top{ display:none }

/* ---------- nút ---------- */
.btn{
  --bg:var(--red-grad); position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; padding:12px 24px; border-radius:var(--r-sm); font-weight:700; font-size:13.5px;
  letter-spacing:.5px; color:var(--navy); background:var(--bg); overflow:hidden; isolation:isolate;
  text-transform:uppercase;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
  box-shadow:0 8px 20px -12px rgba(245,184,28,.9);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 26px -12px rgba(245,184,28,1) }
.btn-red{ --bg:var(--red-grad); color:var(--navy) }
.btn-ghost{
  background:transparent; color:var(--navy); border:1.5px solid var(--navy); box-shadow:none;
}
.btn-ghost:hover{ background:var(--navy); color:#fff }
.btn-lg{ padding:15px 30px; font-size:14px }
.btn-block{ width:100% }

/* ---------- header ---------- */
.hd{
  position:sticky; top:0; z-index:900; background:var(--navy);
  box-shadow:0 2px 14px -6px rgba(7,23,55,.5);
}
.hd.solid{ background:var(--navy) }
.hd-top{ display:none }

.hd-bar{ display:flex; align-items:center; gap:18px; height:var(--head-h) }
.logo{ display:flex; align-items:center; gap:11px; flex:none }
img.logo-mark{ height:40px; width:auto }
.logo-tx{ display:none }
.ft .logo-tx{ display:none }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto }
.nav a, .nav button{
  position:relative; padding:9px 12px; font-size:12.5px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:#dbe4f6; border-radius:var(--r-sm); transition:color .25s;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.nav a:hover, .nav button:hover, .nav a.on{ color:var(--brand) }
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
}
.nav a:hover::after, .nav a.on::after{ transform:scaleX(1) }

.hd-act{ display:flex; align-items:center; gap:10px; flex:none; margin-left:8px }
.hd-tel{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:14px; white-space:nowrap }
.hd-tel i{
  width:34px; height:34px; border-radius:50%; background:var(--brand); color:var(--navy);
  display:grid; place-items:center; flex:none;
}
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); color:#dbe4f6; transition:all .25s var(--ease);
}
.icon-btn:hover{ color:var(--navy); border-color:var(--brand); background:var(--brand) }
.icon-btn .cnt{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--navy); font-size:11px; font-weight:800; display:grid; place-items:center;
}
.burger{ display:none }

/* mega menu danh mục */
.mega{
  position:absolute; left:0; right:0; top:100%; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .3s var(--ease); background:#fff; border-bottom:3px solid var(--brand); box-shadow:var(--shadow);
}
.mega.open{ opacity:1; visibility:visible; transform:translateY(0) }
.mega-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px 22px; padding:22px 0 26px }
.mega-grid a{
  padding:9px 12px; font-size:13.5px; color:var(--tx-soft); border-radius:var(--r-sm);
  border-left:2px solid transparent; transition:all .24s;
}
.mega-grid a:hover{ color:var(--navy); background:var(--ink-1); border-left-color:var(--brand) }

/* drawer mobile */
.mnav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,340px); z-index:960; background:#fff;
  transform:translateX(100%); transition:transform .45s var(--ease-out);
  overflow-y:auto; padding:20px 20px 40px; box-shadow:-20px 0 50px -30px rgba(7,23,55,.6);
}
.mnav.open{ transform:none }
.mnav .logo-tx{ display:block; font-size:14px; font-weight:800; color:var(--navy); letter-spacing:.6px }
.mnav .logo-tx b{ display:block; font-size:14px }
.mnav .logo-tx i{ display:none }
.mnav .icon-btn{ border-color:var(--line); color:var(--tx-soft) }
.mnav h4{ font-size:11px; letter-spacing:2px; color:var(--navy); text-transform:uppercase; margin:22px 0 6px }
.mnav a{ display:block; padding:11px 4px; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--tx-soft) }
.mnav a:hover{ color:var(--navy) }

/* ---------- nút liên hệ nổi bên phải ---------- */
.fabs{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:880;
  display:flex; flex-direction:column; gap:8px;
}
.fabs a{
  width:62px; padding:9px 4px 8px; border-radius:var(--r-sm); text-align:center; color:#fff;
  font-size:8.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; line-height:1.25;
  box-shadow:0 8px 22px -10px rgba(7,23,55,.6); transition:transform .25s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.fabs a:hover{ transform:translateX(-3px) }
.fabs a svg{ display:block }
.fabs .f-call{ background:var(--brand); color:var(--navy) }
.fabs .f-wa{ background:#25d366 }
.fabs .f-ms{ background:#0084ff }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:clamp(430px,62vh,600px); display:grid; align-items:center;
  overflow:hidden; isolation:isolate; background:var(--navy-3);
}
.hero-bg{ position:absolute; inset:0; z-index:-2 }
.hero-bg i{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transform:scale(1.06); transition:opacity 1.1s var(--ease), transform 7s linear;
}
.hero-bg i.on{ opacity:1; transform:scale(1.13) }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(6,17,42,.9) 0%, rgba(6,17,42,.72) 34%, rgba(6,17,42,.3) 62%, rgba(6,17,42,.12) 100%);
}
.bars{ display:none }

.hero-in{ position:relative; z-index:3; padding:64px 0 76px; max-width:640px }
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:3.4px;
  text-transform:uppercase; color:var(--brand); margin-bottom:16px; font-weight:700;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--brand) }
.hero h1{
  font-size:clamp(30px,5.2vw,60px); line-height:1.05; letter-spacing:.5px;
  text-transform:uppercase; color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.hero h1 em{ font-style:normal; color:var(--brand); display:inline-block }
.hero p{ color:rgba(255,255,255,.88); font-size:clamp(14px,1.35vw,16.5px); max-width:520px; margin:18px 0 28px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero .btn-ghost{ border-color:rgba(255,255,255,.8); color:#fff }
.hero .btn-ghost:hover{ background:#fff; color:var(--navy) }
.hero .hero-stats{ display:none }
.hero-stats{ display:flex; gap:24px; flex-wrap:wrap }
.hero-stats div b{ display:block; font-size:24px; font-weight:800; color:var(--navy) }
.hero-stats div span{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--tx-dim) }
.scroll-cue{ display:none }

.hero-dots{
  position:absolute; left:0; right:0; bottom:22px; z-index:4;
  display:flex; justify-content:center; gap:9px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.42); padding:0;
  transition:all .3s var(--ease);
}
.hero-dots button.on{ background:var(--brand); width:22px; border-radius:5px }

/* ---------- dải con số ---------- */
.statbar{ position:relative; z-index:6; margin-top:-46px }
.statbar .box{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(6,1fr);
  overflow:hidden;
}
.statbar .s{
  display:flex; align-items:center; gap:12px; padding:22px 16px; position:relative;
}
.statbar .s + .s::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line);
}
.statbar .s svg{ color:var(--navy); flex:none }
.statbar .s b{ display:block; font-size:19px; font-weight:800; color:var(--navy); line-height:1.15; letter-spacing:.2px }
.statbar .s b sup{ font-size:11px; top:-.5em }
.statbar .s span{ display:block; font-size:9.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--tx-dim); font-weight:600; line-height:1.4 }

/* trang con: banner nhỏ */
.pgh{ position:relative; padding:46px 0 44px; overflow:hidden; isolation:isolate; background:var(--navy) }
.pgh::before{
  content:""; position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.28;
}
.pgh::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(96deg,rgba(10,32,80,.94),rgba(10,32,80,.7)) }
.pgh h1{ font-size:clamp(24px,3.6vw,40px); color:#fff; text-transform:uppercase }
.crumb{ font-size:12.5px; color:rgba(255,255,255,.7); margin-bottom:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.crumb a:hover{ color:var(--brand) }
.crumb i{ font-style:normal; color:rgba(255,255,255,.45) }

/* ---------- tiêu đề mục ---------- */
.sec{ padding:52px 0; position:relative }
.sec-hd{ position:relative; text-align:center; margin-bottom:28px }
.sec-hd h2{
  font-size:clamp(20px,2.6vw,27px); text-transform:uppercase; color:var(--navy); letter-spacing:.6px;
}
.sec-hd h2 span{ background:none; -webkit-text-fill-color:currentColor; color:var(--navy) }
.sec-hd h2::after{
  content:""; display:block; width:52px; height:3px; border-radius:2px; background:var(--brand); margin:11px auto 0;
}
.sec-hd .k{ font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--tx-dim); font-weight:700; margin-bottom:7px; display:block }
.sec-hd .more{
  position:absolute; right:0; bottom:6px; font-size:12px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--navy); display:inline-flex; gap:7px; align-items:center;
  white-space:nowrap; transition:gap .28s var(--ease);
}
.sec-hd .more:hover{ gap:12px; color:var(--red-lite) }
.sec-hd form{ display:none }
.rule{ display:none }

/* ---------- lưới / hàng cuộn sản phẩm ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:18px }
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(206px,1fr); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none }
.rail > *{ scroll-snap-align:start }
.rail-wrap{ position:relative }
.rail-nav{
  position:absolute; top:calc(50% - 30px); width:40px; height:40px; border-radius:50%; z-index:5;
  background:#fff; border:1px solid var(--line); color:var(--navy); display:grid; place-items:center;
  box-shadow:var(--shadow-soft); transition:all .25s; opacity:0;
}
.rail-wrap:hover .rail-nav{ opacity:1 }
.rail-nav:hover{ background:var(--brand); border-color:var(--brand) }
.rail-nav.p{ left:-12px } .rail-nav.n{ right:-12px }

/* thẻ sản phẩm */
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow) }
.card-th{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2) }
.card-th i{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .7s var(--ease-out);
}
.card:hover .card-th i{ transform:scale(1.06) }
.badge{
  position:absolute; top:9px; left:9px; z-index:2; padding:4px 10px; border-radius:var(--r-sm);
  background:var(--brand); color:var(--navy); font-size:11px; font-weight:800; letter-spacing:.3px;
}
.quick{
  position:absolute; right:9px; bottom:9px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--navy); display:grid; place-items:center;
  opacity:0; transform:translateY(6px); transition:all .3s var(--ease);
}
.card:hover .quick{ opacity:1; transform:none }
.quick:hover{ background:var(--brand); border-color:var(--brand) }
.card-bd{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1 }
.card-nm{
  font-size:13px; font-weight:700; line-height:1.38; color:var(--navy); text-transform:uppercase; letter-spacing:.2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px;
}
.card:hover .card-nm{ color:var(--navy-lite) }
.card-sub{
  font-size:11.5px; color:var(--tx-dim); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card-pr{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; margin-top:auto; padding-top:8px }
.card-pr .pp{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0 }
.pr-now{ font-size:16px; font-weight:800; color:var(--navy) }
.pr-old{ font-size:12px; color:var(--tx-dim); text-decoration:line-through }
.pr-ask{ font-size:13px; color:var(--red-lite); font-weight:700 }
.add{
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; flex:none;
  display:grid; place-items:center; transition:all .25s var(--ease);
}
.add:hover{ background:var(--brand); color:var(--navy); transform:scale(1.06) }
.card-bt{ display:none }

/* ---------- lưới danh mục ---------- */
.cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:14px }
.cat{
  position:relative; padding:20px 12px 16px; border-radius:var(--r); text-align:center; overflow:hidden;
  background:#fff; border:1px solid var(--line); transition:all .3s var(--ease);
  font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:11px; min-height:118px;
}
.cat:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow) }
.cat em{ font-style:normal; font-size:24px; line-height:1; color:var(--navy) }
.cat em svg{ display:block }
.cat:hover em{ color:var(--red-lite) }
.cat span{ line-height:1.4 }

/* ---------- dải "vì sao chọn" ---------- */
.usp{ background:var(--navy); border-radius:var(--r); overflow:hidden; padding:0 6px 10px; border:0 }
.usp-grid, .usp > .wrap{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); gap:0; width:auto;
}
.usp .u{ background:none; padding:20px 10px; text-align:center; position:relative }
.usp .u + .u::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:rgba(255,255,255,.16);
}
.usp .u em{ font-style:normal; font-size:26px; display:block; margin-bottom:10px; color:var(--brand) }
.usp .u em svg{ margin-inline:auto }
.usp .u b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff; line-height:1.45 }
.usp .u span{ display:block; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.72); line-height:1.45 }
.usp-hd{ text-align:center; padding:26px 16px 4px }
.usp-hd h2{ font-size:clamp(18px,2.3vw,23px); color:#fff; text-transform:uppercase; letter-spacing:.7px }
.usp-hd h2::after{ content:""; display:block; width:48px; height:3px; border-radius:2px; background:var(--brand); margin:10px auto 0 }

/* ---------- dự án tiêu biểu ---------- */
.projs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.proj{
  position:relative; display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;
  background:var(--ink-2); box-shadow:var(--shadow-soft);
}
.proj i{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s var(--ease-out) }
.proj:hover i{ transform:scale(1.07) }
.proj::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(6,17,42,.15) 55%,rgba(6,17,42,.88) 100%);
}
.proj div{ position:absolute; left:0; right:0; bottom:0; padding:16px 16px 15px; z-index:2 }
.proj b{ display:block; font-size:13.5px; font-weight:800; text-transform:uppercase; color:#fff; letter-spacing:.4px; line-height:1.3 }
.proj span{ display:block; font-size:11.5px; color:rgba(255,255,255,.78); margin-top:3px }

/* ---------- tin tức ---------- */
.lead{ max-width:760px; margin:0 auto 30px; text-align:center; color:var(--tx-soft); font-size:15px }
.pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,376px)); gap:22px; justify-content:center }
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.pcard:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow) }
.pcard-th{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ink-2) }
.pcard-th i{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s var(--ease-out) }
.pcard:hover .pcard-th i{ transform:scale(1.06) }
.pcard-bd{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:8px; flex:1 }
.pcard-dt{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--tx-dim); font-weight:600 }
.pcard-nm{
  font-size:15.5px; font-weight:800; line-height:1.4; color:var(--navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard:hover .pcard-nm{ color:var(--navy-lite) }
.pcard-bd p{
  font-size:13.5px; color:var(--tx-soft); line-height:1.65; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard-mr{
  margin-top:auto; padding-top:6px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--navy); display:inline-flex; align-items:center; gap:7px; transition:gap .28s var(--ease);
}
.pcard-mr:hover{ gap:12px; color:var(--red-lite) }
.pmini{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); align-items:center }
.pmini:last-child{ border-bottom:0 }
.pmini i{ width:62px; height:50px; flex:none; border-radius:var(--r-sm); background-size:cover; background-position:center; background-color:var(--ink-2) }
.pmini b{ display:block; font-size:13px; font-weight:700; line-height:1.4; color:var(--navy) }
.pmini em{ font-style:normal; font-size:11px; color:var(--tx-dim) }
.pmini:hover b{ color:var(--navy-lite) }

/* ---------- hệ thống đại lý ---------- */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.area{
  display:flex; align-items:center; gap:12px; padding:18px 18px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line); color:var(--navy); transition:all .3s var(--ease);
}
.area:hover{ border-color:var(--brand); box-shadow:var(--shadow-soft) }
.area b{ font-size:13.5px; font-weight:700 }
.bens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px }
.ben{
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r);
  background:var(--ink-1); border:1px solid var(--line-soft); color:var(--navy);
}
.ben svg{ flex:none; color:var(--navy) }
.ben span{ font-size:13.5px; font-weight:600; line-height:1.5; color:var(--tx) }

/* ---------- dải CTA ---------- */
.cta{ position:relative; overflow:hidden; isolation:isolate; padding:72px 0; text-align:center; background:var(--navy) }
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.3;
}
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,32,80,.92),rgba(7,23,55,.94)) }
.cta .kicker{ color:var(--brand) }
.cta h2{ font-size:clamp(24px,3.6vw,40px); margin-bottom:14px; color:#fff; text-transform:uppercase }
.cta h2 span{ color:var(--brand) }
.cta p{ color:rgba(255,255,255,.82); max-width:560px; margin:0 auto 26px }
.cta .btn-ghost{ border-color:rgba(255,255,255,.75); color:#fff }
.cta .btn-ghost:hover{ background:#fff; color:var(--navy) }

/* ---------- footer ---------- */
.ft{ background:var(--navy); color:rgba(255,255,255,.76); padding:48px 0 0; margin-top:52px }
.ft-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1.2fr 1.2fr; gap:32px; padding-bottom:38px }
.ft h5{ font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:#fff; margin:0 0 16px; font-weight:800 }
.ft p, .ft li{ font-size:13px; color:rgba(255,255,255,.7); line-height:1.8 }
.ft p b{ color:#fff }
.ft ul{ list-style:none; margin:0; padding:0 }
.ft li a:hover{ color:var(--brand) }
.ft a.tel-lite{ color:var(--brand); font-weight:700 }
.ft .logo{ margin-bottom:14px }
.ft .soc{ display:flex; gap:9px; margin-top:16px }
.ft .soc a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.12); transition:all .25s;
}
.ft .soc a:hover{ transform:translateY(-2px) }
.ft .soc a.s-fb{ background:#1877f2 } .ft .soc a.s-yt{ background:#ff0000 }
.ft .soc a.s-tk{ background:#111 } .ft .soc a.s-wa{ background:#25d366 }
.ft-ct{ display:grid; gap:11px }
.ft-ct div{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.6 }
.ft-ct svg{ flex:none; margin-top:3px; color:var(--brand) }
.nl p{ margin:0 0 12px }
.nl form{ display:flex; border-radius:var(--r-sm); overflow:hidden; background:#fff }
.nl input{ flex:1; min-width:0; border:0; padding:11px 13px; font-size:13px; color:var(--tx); background:#fff }
.nl input:focus{ outline:0 }
.nl button{
  background:var(--brand); color:var(--navy); font-size:12px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; padding:0 16px; white-space:nowrap;
}
.nl button:hover{ background:var(--brand-2) }
.ft-bt{ border-top:1px solid rgba(255,255,255,.13); padding:16px 0 22px; font-size:12px; color:rgba(255,255,255,.6) }
.ft-bt .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap }

/* ---------- lớp phủ & popup ---------- */
.ov{
  position:fixed; inset:0; z-index:980; background:rgba(7,23,55,.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.ov.open{ opacity:1; visibility:visible }

.modal{
  position:fixed; z-index:990; left:50%; top:50%; width:min(94vw,860px); max-height:90svh; overflow:auto;
  transform:translate(-50%,-46%) scale(.96); opacity:0; visibility:hidden;
  transition:transform .4s var(--ease-out), opacity .3s, visibility .3s;
  background:#fff; border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(7,23,55,.55);
}
.modal.open{ transform:translate(-50%,-50%) scale(1); opacity:1; visibility:visible }
.modal-x{
  position:absolute; top:12px; right:12px; z-index:4; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--tx-soft); display:grid; place-items:center; transition:all .25s;
}
.modal-x:hover{ color:#fff; background:var(--navy); border-color:var(--navy) }

/* popup xem nhanh sản phẩm */
.qv{ display:grid; grid-template-columns:.95fr 1fr; gap:0 }
.qv-img{ position:relative; background:var(--ink-2); aspect-ratio:1/1; overflow:hidden; border-radius:var(--r-lg) 0 0 var(--r-lg) }
.qv-img i{ position:absolute; inset:0; background-size:cover; background-position:center }
.qv-bd{ padding:30px 30px 26px; display:flex; flex-direction:column; gap:12px }
.qv-bd h3{ font-size:23px; line-height:1.26; color:var(--navy); text-transform:uppercase }
.qv-cat{ font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--tx-dim); font-weight:700 }
.qv-pr{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.qv-pr .now{ font-size:28px; color:var(--navy); font-weight:800 }
.qv-pr .old{ color:var(--tx-dim); text-decoration:line-through }
.qv-pr .off{ background:var(--brand); color:var(--navy); font-size:12px; font-weight:800; padding:3px 10px; border-radius:var(--r-sm) }
.qv-bd p{ font-size:13.5px; color:var(--tx-soft); margin:0 }
.qv-act{ display:flex; gap:10px; margin-top:auto; flex-wrap:wrap }

/* bộ đếm số lượng */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; flex:none }
.qty button{ width:40px; height:44px; color:var(--navy); font-size:18px; transition:background .2s }
.qty button:hover{ background:var(--ink-1) }
.qty input{ width:46px; height:44px; text-align:center; background:none; border:0; font-weight:700; color:var(--tx) }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* popup khuyến mãi */
.promo{ width:min(94vw,720px); text-align:center }
.promo-in{ padding:46px 40px 40px; position:relative }
.promo em{ font-style:normal; font-size:40px; display:block; margin-bottom:10px }
.promo h3{ font-size:clamp(23px,3.4vw,34px); margin-bottom:12px; color:var(--navy); text-transform:uppercase }
.promo h3 span{ color:var(--red-lite) }
.promo p{ color:var(--tx-soft); max-width:440px; margin:0 auto 20px; font-size:14px }
.promo-code{
  display:inline-flex; align-items:center; gap:12px; padding:11px 18px; border-radius:var(--r-sm);
  border:1px dashed var(--brand); background:var(--brand-soft); margin-bottom:22px;
  font-size:20px; font-weight:800; letter-spacing:2.5px; color:var(--navy);
}
.promo small{ display:block; margin-top:14px; color:var(--tx-dim); font-size:12px }

/* ---------- giỏ hàng trượt ---------- */
.cart{
  position:fixed; inset:0 0 0 auto; width:min(94vw,420px); z-index:985; background:#fff;
  transform:translateX(102%); transition:transform .45s var(--ease-out);
  display:flex; flex-direction:column; box-shadow:-24px 0 60px -34px rgba(7,23,55,.6);
}
.cart.open{ transform:none }
.cart-hd{ padding:20px 20px 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between }
.cart-hd h3{ font-size:18px; color:var(--navy); text-transform:uppercase }
.cart-hd .icon-btn{ border-color:var(--line); color:var(--tx-soft) }
.cart-bd{ flex:1; overflow-y:auto; padding:14px 20px }
.cart-it{ display:grid; grid-template-columns:64px 1fr auto; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-soft); align-items:center }
.cart-it i{ display:block; width:64px; height:64px; border-radius:var(--r-sm); background-size:cover; background-position:center; background-color:var(--ink-2) }
.cart-it b{ display:block; font-size:13px; font-weight:700; line-height:1.4; color:var(--navy) }
.cart-it .p{ color:var(--navy); font-size:13.5px; font-weight:800; margin-top:4px }
.cart-it .rm{ color:var(--tx-dim); font-size:12px } .cart-it .rm:hover{ color:#d5202b }
.cart-mini{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); margin-top:6px }
.cart-mini button{ width:26px; height:26px; color:var(--navy); font-size:14px } .cart-mini span{ width:26px; text-align:center; font-size:12.5px; font-weight:700 }
.cart-ft{ padding:18px 20px 24px; border-top:1px solid var(--line); background:var(--ink-1) }
.cart-sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px }
.cart-sum b{ font-size:23px; color:var(--navy); font-weight:800 }
.cart-empty{ text-align:center; padding:56px 20px; color:var(--tx-dim) }
.cart-empty em{ font-style:normal; font-size:40px; display:block; margin-bottom:12px; opacity:.55 }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:995;
  background:var(--navy); border-radius:var(--r-sm); padding:12px 22px; font-size:13.5px; font-weight:600; color:#fff;
  box-shadow:var(--shadow); transition:transform .4s var(--ease-out); display:flex; align-items:center; gap:10px;
}
.toast.show{ transform:translate(-50%,0) }

/* ---------- trang danh mục ---------- */
.cat-lay{ display:grid; grid-template-columns:238px 1fr; gap:30px; align-items:start }
.side{ position:sticky; top:calc(var(--head-h) + 14px) }
.side h5{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--navy); margin:0 0 12px; font-weight:800 }
.side a{ display:block; padding:9px 12px; font-size:13.5px; color:var(--tx-soft); border-radius:var(--r-sm); border-left:2px solid transparent; transition:all .24s }
.side a:hover{ background:var(--ink-1); color:var(--navy); border-left-color:var(--brand) }
.side a.on{ background:var(--brand-soft); color:var(--navy); border-left-color:var(--brand); font-weight:700 }
.tools{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap }
.tools .n{ font-size:13px; color:var(--tx-dim) }
select.sel{
  background:#fff; border:1px solid var(--line); color:var(--tx); padding:9px 13px;
  border-radius:var(--r-sm); font-size:13px; cursor:pointer;
}

/* ---------- trang sản phẩm ---------- */
.pd{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
.pd-img{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; border:1px solid var(--line); background:var(--ink-2) }
.pd-img i{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s var(--ease-out) }
.pd-img:hover i{ transform:scale(1.06) }
.pd-bd h1{ font-size:clamp(22px,3.2vw,34px); margin-bottom:12px; color:var(--navy); text-transform:uppercase }
.pd-pr{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:16px 0 }
.pd-pr .now{ font-size:34px; color:var(--navy); font-weight:800 }
.pd-pr .old{ color:var(--tx-dim); text-decoration:line-through; font-size:17px }
.pd-act{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 }
.pd-meta{ border-top:1px solid var(--line); margin-top:24px; padding-top:20px; display:grid; gap:11px; font-size:13.5px; color:var(--tx-soft) }
.pd-meta div{ display:flex; gap:12px } .pd-meta b{ color:var(--navy); min-width:120px; font-weight:700 }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin:44px 0 22px; flex-wrap:wrap }
.tabs button{ padding:12px 18px; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--tx-dim); border-bottom:2px solid transparent; transition:all .25s }
.tabs button.on{ color:var(--navy); border-bottom-color:var(--brand) }
.tab-p{ display:none; color:var(--tx-soft); font-size:14.5px; max-width:840px } .tab-p.on{ display:block; animation:fade .4s var(--ease) }
@keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.tab-p ul{ padding-left:20px } .tab-p li{ margin-bottom:8px }

/* ---------- form ---------- */
.fld{ margin-bottom:15px }
.fld label{ display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--tx-dim); margin-bottom:6px; font-weight:600 }
.fld input, .fld textarea, .fld select{
  width:100%; padding:12px 14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); transition:border-color .25s, box-shadow .25s; font-size:14px;
}
.fld input:focus, .fld textarea:focus, .fld select:focus{ outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(13,42,99,.08) }
.fld textarea{ min-height:118px; resize:vertical }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow-soft) }
.panel h5{ color:var(--navy) !important }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px }

/* bảng giỏ hàng */
.tbl{ width:100%; border-collapse:collapse; font-size:14px }
.tbl th{ text-align:left; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--tx-dim); padding:0 12px 13px; font-weight:700 }
.tbl td{ padding:15px 12px; border-top:1px solid var(--line-soft); vertical-align:middle }
.tbl .th{ width:70px; height:70px; border-radius:var(--r-sm); background-size:cover; background-position:center; background-color:var(--ink-2) }

/* nội dung văn bản */
.prose{ max-width:820px; color:var(--tx-soft); font-size:15px }
.prose h2{ font-size:22px; color:var(--navy); margin:32px 0 12px; text-transform:uppercase }
.prose h3{ font-size:17px; color:var(--navy); margin:24px 0 9px }
.prose p{ margin:0 0 13px } .prose ul{ padding-left:20px; margin:0 0 15px } .prose li{ margin-bottom:7px }
.prose b{ color:var(--navy) }

/* chi nhánh */
.branch{ padding:13px 0; border-bottom:1px solid var(--line-soft) }
.branch:last-child{ border-bottom:0 }
.branch b{ display:block; color:var(--navy); font-size:13.5px; margin-bottom:4px }
.branch span{ display:block; font-size:13px; color:var(--tx-soft); line-height:1.6 }
.branch a{ color:var(--navy-lite); font-size:12.5px }

/* ---------- reveal khi cuộn ---------- */
[data-rv]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
[data-rv].in{ opacity:1; transform:none }

/* ---------- thanh dưới cho mobile ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:900; display:none;
  background:var(--navy); padding:7px 0 max(7px, env(safe-area-inset-bottom));
}
.tabbar div{ display:grid; grid-template-columns:repeat(4,1fr) }
.tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:rgba(255,255,255,.72); padding:5px 0; position:relative }
.tabbar a.on{ color:var(--brand) }
.tabbar .cnt{ position:absolute; top:0; right:calc(50% - 20px); min-width:17px; height:17px; border-radius:var(--r-pill); background:var(--brand); color:var(--navy); font-size:10px; display:grid; place-items:center; font-weight:800 }

/* ---------- chọn ngôn ngữ (đè bản trong template) ---------- */
.langsw>button{ border-color:rgba(255,255,255,.28) !important; color:#dbe4f6 !important; height:34px !important; border-radius:var(--r-sm) !important }
.langsw:hover>button{ border-color:var(--brand) !important; color:var(--brand) !important }
.langsw-menu{ background:#fff !important; border-color:var(--line) !important; border-radius:var(--r) !important }
.langsw-menu a{ color:var(--tx-soft) !important }
.langsw-menu a:hover{ background:var(--ink-1) !important; color:var(--navy) !important }
.langsw-menu a.on{ color:var(--navy) !important }
.mnav .langsw>button{ display:none }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .statbar .box{ grid-template-columns:repeat(3,1fr) }
  .statbar .s:nth-child(3n+1)::before{ display:none }
  .ft-grid{ grid-template-columns:1.4fr 1fr 1fr; row-gap:26px }
  .projs{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:1320px){
  .nav a, .nav button{ padding:9px 8px; font-size:11.5px; letter-spacing:.3px }
  .hd-tel span{ font-size:13px }
}
@media (max-width:1150px){
  .nav{ display:none } .burger{ display:grid }
}
@media (max-width:1000px){
  .nav{ display:none } .burger{ display:grid }
  .hd-tel span{ display:none }
  .pd{ grid-template-columns:1fr; gap:24px }
  .cat-lay{ grid-template-columns:1fr } .side{ position:static }
  .side-box{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none } .side-box::-webkit-scrollbar{display:none}
  .side-box a{ white-space:nowrap; border:1px solid var(--line); border-left-width:1px; border-radius:var(--r-pill) }
  .qv{ grid-template-columns:1fr } .qv-img{ border-radius:var(--r-lg) var(--r-lg) 0 0; aspect-ratio:16/10 }
  .qv-bd{ padding:22px }
  .tabbar{ display:block } body{ padding-bottom:66px }
  .fabs{ display:none }
  /* các trang con dựng lưới 2 cột bằng style gắn thẳng → gộp về 1 cột */
  .sec > .wrap[style*="grid-template-columns"]{ grid-template-columns:1fr !important }
}
@media (max-width:720px){
  :root{ --head-h:62px }
  .hero-in{ padding:44px 0 60px }
  .statbar{ margin-top:-26px }
  .statbar .box{ grid-template-columns:repeat(2,1fr) }
  .statbar .s::before{ display:none !important }
  .statbar .s{ padding:16px 12px; gap:10px }
  .statbar .s b{ font-size:16.5px }
  .usp-grid, .usp > .wrap{ grid-template-columns:repeat(2,1fr) }
  .usp .u::before{ display:none !important }
  .usp .u{ padding:16px 8px }
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px }
  .rail{ grid-auto-columns:minmax(162px,1fr); gap:12px }
  .sec{ padding:38px 0 }
  .sec-hd .more{ position:static; margin-top:12px; display:inline-flex }
  .projs{ grid-template-columns:repeat(2,1fr); gap:12px }
  .ft-grid{ grid-template-columns:1fr; gap:26px }
  .two{ grid-template-columns:1fr }
  .card-nm{ font-size:12px; min-height:33px } .pr-now{ font-size:14.5px }
  .card-sub{ display:none }
  .promo-in{ padding:36px 22px 30px }
  .cats{ grid-template-columns:repeat(3,1fr) }
  .tbl thead{ display:none }
  .tbl td{ display:block; border:0; padding:6px 0 } .tbl tr{ display:block; border-top:1px solid var(--line-soft); padding:14px 0 }
}
@media (max-width:420px){
  .cats{ grid-template-columns:repeat(2,1fr) }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  [data-rv]{ opacity:1; transform:none }
}