/* =====================================================================
   SUNVIE · Tech-Luxury Architecture
   Dark tech: Obsidian #0A0D12 · Titanium #111622 · Slate #172236
   Accent: Cyan #38BDF8 (laser CNC) · Gold #D4AF37 · CTA Crimson #E31E24→#B81217
   Light showroom: Alabaster #F5F4F0 · Studio gray #ECEEF2
   ===================================================================== */
:root{
  --obsidian:#0A0D12;--titanium:#111622;--slate:#172236;--slate-2:#1E2B42;
  --cyan:#38BDF8;--gold:#D4AF37;--red:#E31E24;--red-d:#B81217;--navy:#264A8A;
  --alabaster:#F5F4F0;--studio:#ECEEF2;--ink:#14181F;--muted:#5F6B7C;--line:#E0E4EA;--card:#FFFFFF;
  --d-text:#E6EBF2;--d-muted:#93A1B5;--d-line:rgba(148,170,200,.16);
  --ok:#14804A;--warn:#9A5B00;--zalo:#0068FF;--r:16px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --tech:'Space Grotesk','Be Vietnam Pro',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--alabaster);line-height:1.6;-webkit-text-size-adjust:100%;overflow-x:hidden}
body.intro-active{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--navy)}
button{font-family:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px}
.hidden{display:none!important}
.muted{color:var(--muted)}.tiny{font-size:12.5px}.center{text-align:center}.red{color:var(--red)}
.okc{color:var(--ok)}.badc{color:var(--red)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:999px;padding:10px 20px;font:600 15px/1.2 var(--font);cursor:pointer;text-decoration:none;transition:background .2s,box-shadow .2s,transform .12s,border-color .2s;text-align:center;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn.sm{padding:7px 14px;font-size:13.5px}.btn.lg{padding:14px 26px;font-size:16px}.btn.block{display:flex;width:100%;white-space:normal}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff;box-shadow:0 8px 24px -8px rgba(227,30,36,.7)}
.btn-red:hover{box-shadow:0 10px 30px -6px rgba(227,30,36,.85)}
.btn-navy{background:var(--slate);color:#fff}.btn-navy:hover{background:var(--slate-2)}
.btn-ghost{background:#fff;color:var(--slate);border-color:#C9D2DE}.btn-ghost:hover{border-color:var(--slate)}
.btn-glass{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}.btn-glass:hover{background:rgba(255,255,255,.12)}
.btn-line{background:transparent;color:var(--d-text);border-color:rgba(255,255,255,.22)}.btn-line:hover{border-color:var(--cyan);color:#fff}
.btn-replay{background:transparent;color:var(--gold);border-color:rgba(212,175,55,.45);font-family:var(--tech);letter-spacing:.04em}.btn-replay:hover{background:rgba(212,175,55,.1)}
.btn-zalo{background:var(--zalo);color:#fff}.btn-zalo:hover{background:#0054cc}
.link{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-size:13.5px;padding:2px}

/* ---------- Intro ---------- */
.intro-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:transparent}
.intro-overlay.done{display:none}
.intro-curtain{position:absolute;left:0;right:0;height:50.2%;background:radial-gradient(120% 140% at 50% 100%,#152035 0%,#0A0D12 60%);z-index:1;transition:transform 1s cubic-bezier(.77,0,.18,1)}
.intro-curtain-top{top:0;border-bottom:1px solid rgba(56,189,248,.28)}
.intro-curtain-bottom{bottom:0;background:radial-gradient(120% 140% at 50% 0%,#152035 0%,#0A0D12 60%);border-top:1px solid rgba(212,175,55,.28)}
.intro-overlay.opening .intro-curtain-top{transform:translateY(-101%)}
.intro-overlay.opening .intro-curtain-bottom{transform:translateY(101%)}
.intro-overlay.opening .intro-center,.intro-overlay.opening .intro-canvas,.intro-overlay.opening .intro-scanline,.intro-overlay.opening .intro-skip{opacity:0;transform:scale(1.05);transition:opacity .4s ease,transform .6s ease}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.intro-scanline{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--gold) 70%,transparent);box-shadow:0 0 24px 2px rgba(56,189,248,.6);animation:scan 2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{transform:translateY(8vh);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(92vh);opacity:0}}
.intro-center{position:relative;z-index:4;width:min(680px,90vw);text-align:center;padding:24px}
.intro-hud{display:flex;justify-content:space-between;font-family:var(--tech);font-size:12px;letter-spacing:.22em;color:var(--cyan);margin-bottom:10px}
#introPct{font-variant-numeric:tabular-nums;color:#fff}
.intro-logo-svg{width:100%;height:auto;overflow:visible}
.sv-stroke{font-family:var(--tech);font-size:96px;font-weight:600;letter-spacing:.06em;fill:rgba(255,255,255,0);stroke:url(#svMetal);stroke-width:1.6px;stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.6s cubic-bezier(.3,.8,.2,1) forwards}
@keyframes draw{70%{stroke-dashoffset:0;fill:rgba(255,255,255,.08)}100%{stroke-dashoffset:0;fill:#fff;filter:drop-shadow(0 0 18px rgba(56,189,248,.45))}}
.sv-bars rect{fill:var(--red);filter:drop-shadow(0 0 10px rgba(227,30,36,.75));transform-box:fill-box;transform-origin:left;transform:scaleX(0);animation:bar .5s var(--ease) forwards}
.sv-bars rect:nth-child(1){animation-delay:.9s}.sv-bars rect:nth-child(2){animation-delay:1s}.sv-bars rect:nth-child(3){animation-delay:1.1s}.sv-bars rect:nth-child(4){animation-delay:1.2s}.sv-bars rect:nth-child(5){animation-delay:1.3s}
@keyframes bar{to{transform:scaleX(1)}}
.sv-rule{stroke:rgba(212,175,55,.75);stroke-width:1.2;stroke-dasharray:470;stroke-dashoffset:470;animation:rule 1s 1s var(--ease) forwards}
@keyframes rule{to{stroke-dashoffset:0}}
.sv-sub{font-family:var(--tech);font-size:13px;letter-spacing:.26em;fill:#C7D2E2;opacity:0;animation:fade .6s 1.25s forwards}
@keyframes fade{to{opacity:1}}
.intro-bar{height:2px;background:rgba(255,255,255,.08);margin:20px auto 12px;overflow:hidden;border-radius:2px}
.intro-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:scaleX(0);transform-origin:left}
.intro-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-family:var(--tech);font-size:11px;letter-spacing:.2em;color:#7F8DA3}
.intro-skip{position:absolute;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:5;background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 18px;font:600 12px var(--tech);letter-spacing:.14em;cursor:pointer;backdrop-filter:blur(6px)}
.intro-skip:hover{border-color:var(--cyan);color:var(--cyan)}
body.intro-reveal .hero-text,body.intro-reveal .hero-visual{transition-delay:.35s}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(10,13,18,.72);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--d-line);transition:background .3s}
.topbar.scrolled{background:rgba(10,13,18,.92)}
.topbar-in{display:flex;align-items:center;gap:20px;height:64px}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:22px;margin-left:10px;flex:1}
.nav a{color:var(--d-muted);text-decoration:none;font-weight:500;font-size:14px;position:relative;padding:4px 0}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cyan);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover:after{transform:scaleX(1)}
.topbar-cta{display:flex;gap:8px;align-items:center}

/* ---------- Dark sections ---------- */
.dark{background:radial-gradient(1200px 600px at 80% -10%,rgba(38,74,138,.35),transparent 60%),linear-gradient(180deg,var(--obsidian),var(--titanium));color:var(--d-text)}
.dark .muted,.dark p{color:var(--d-muted)}
.dark h2,.dark h3{color:#fff}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.kicker:before{content:"";width:22px;height:1px;background:currentColor}
.dark .kicker{color:var(--gold)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 0}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 60% 30%,#000 30%,transparent 75%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding-bottom:56px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--tech);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
h1{font-size:clamp(30px,4.3vw,52px);line-height:1.12;margin:0 0 16px;font-weight:800;letter-spacing:-.02em;color:#fff}
h1 em{font-style:normal;background:linear-gradient(90deg,#fff,var(--cyan) 40%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:16.5px;color:#B6C2D3;margin:0 0 22px;max-width:560px}
.hero .lead b{color:#fff;font-weight:600}
.badges{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.badges li{border:1px solid var(--d-line);background:rgba(255,255,255,.03);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;line-height:1.3;position:relative;overflow:hidden}
.badges li:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--cyan),var(--gold))}
.badges b{color:#fff;font-size:14.5px}.badges span{font-size:12.5px;color:var(--d-muted)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.hero-frame{position:relative;border-radius:22px;padding:8px;background:linear-gradient(140deg,rgba(56,189,248,.35),rgba(255,255,255,.04) 40%,rgba(212,175,55,.35));box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.hero-frame img{border-radius:16px;width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover}
.img-note{position:absolute;right:16px;top:16px;background:rgba(10,13,18,.6);color:#D5DEEA;font-size:11px;padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.float-card{position:absolute;background:rgba(17,22,34,.78);backdrop-filter:blur(12px);border:1px solid var(--d-line);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;line-height:1.3;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transform:translateZ(40px)}
.float-card b{color:#fff;font-size:15px}.float-card small{color:var(--d-muted);font-size:12px}
.fc-kicker{font-family:var(--tech);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.fc-top{left:-18px;top:28px}.fc-bot{right:-14px;bottom:-18px}.fc-bot .fc-kicker{color:var(--gold)}
.marquee{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.02);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:0;animation:marq 38s linear infinite;padding:14px 0}
.marquee-track span{font-family:var(--tech);font-size:13px;letter-spacing:.18em;color:#C7D2E2;padding:0 26px;position:relative}
.marquee-track span:after{content:"✦";position:absolute;right:-6px;color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.sec{padding:76px 0;position:relative}
.light{background:var(--alabaster)}
.studio{background:var(--studio)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 34px}
.sec-head h2,.cta h2,.eng-copy h2{font-size:clamp(25px,3.2vw,38px);line-height:1.18;margin:0 0 10px;font-weight:800;letter-spacing:-.015em;color:var(--slate)}
.dark .sec-head h2,.dark .eng-copy h2,.cta h2{color:#fff}
.eng-copy h2 em{font-style:normal;color:var(--cyan)}
.sec-head p{margin:0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(20,24,31,.04),0 10px 30px -18px rgba(20,24,31,.25)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Combo ---------- */
.combo{overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.combo:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(20,24,31,.45)}
.combo-img{position:relative;overflow:hidden}.combo-img img{width:100%;height:260px;object-fit:cover;transition:transform .8s var(--ease)}
.combo:hover .combo-img img{transform:scale(1.05)}
.tag{position:absolute;left:14px;top:14px;background:var(--obsidian);color:var(--gold);font:600 12px var(--tech);letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.len{position:absolute;right:14px;top:14px;background:rgba(10,13,18,.8);color:#fff;font:600 13px var(--tech);padding:5px 12px;border-radius:999px}
.ai-note{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);background:rgba(255,255,255,.85);color:#3B4553;font-size:11px;padding:3px 9px;border-radius:999px}
.combo-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:4px;flex:1}
.combo h3{margin:0;font-size:22px;color:var(--slate)}
.price{font:700 34px/1.15 var(--tech);color:var(--red);letter-spacing:-.01em}
.lbl-sm{font:600 11.5px var(--tech);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:10px}
.ticks,.crosses{list-style:none;padding:0;margin:4px 0}.ticks li,.crosses li{padding-left:24px;position:relative;font-size:14.5px;margin:4px 0}
.ticks li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.crosses li:before{content:"✕";position:absolute;left:2px;color:var(--warn);font-weight:800}
.terms-line{font-size:13px;color:var(--slate);background:var(--studio);border-radius:10px;padding:8px 12px;margin:12px 0 14px}
.combo .btn{margin-top:auto}

/* ---------- Studio / Designer ---------- */
.designer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start;padding-bottom:70px}
.preview-col{position:sticky;top:76px}
.preview{padding:14px}
.pv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:10px;flex-wrap:wrap;color:var(--slate)}
.preview svg{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;background:#f5f7f9;max-height:62vh}
.plan-wrap{margin-top:10px}.plan-wrap svg{max-height:280px}
.plan-mobile{display:none}.plan-mobile svg{width:100%;height:auto;max-height:260px;border:1px solid var(--line);border-radius:10px}
.pv-mtotal{display:none}
.pv-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 6px}
.pv-sum div{background:var(--obsidian);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;line-height:1.3}
.pv-sum span{font:500 11px var(--tech);letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted)}.pv-sum b{font:600 15px var(--tech);color:#fff}.pv-sum b.red{color:#FF5A5F}
.step-card{padding:20px;margin-bottom:16px}
h3.step{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:17px;color:var(--slate);line-height:1.25}
h3.step>span{flex:none;width:32px;height:32px;border-radius:10px;background:var(--obsidian);color:var(--gold);display:grid;place-items:center;font:700 14px var(--tech)}
h3.step small{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.lbl{font-weight:700;font-size:14px;margin:16px 0 6px;color:var(--slate)}.lbl small{font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.chips.grid2c{display:grid;grid-template-columns:repeat(2,1fr)}
.chips.col{flex-direction:column;align-items:stretch}
.chip{border:1px solid #D5DCE6;background:#fff;border-radius:12px;padding:10px 12px;font:600 14px/1.3 var(--font);cursor:pointer;text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:2px;transition:border-color .2s,box-shadow .2s,background .2s}
.chip small{font-weight:400;font-size:12.5px;color:var(--muted)}
.chip:hover{border-color:#9FB0C6}
.chip.on{border-color:var(--obsidian);background:var(--obsidian);color:#fff;box-shadow:0 8px 20px -10px rgba(10,13,18,.6)}
.chip.on small{color:var(--gold)}
.note{font-size:13.5px;color:var(--slate);background:var(--studio);border-radius:10px;padding:9px 12px;margin:4px 0 0}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{border:1px solid #D5DCE6;background:#fff;border-radius:12px;padding:5px 10px 5px 5px;display:flex;align-items:center;gap:8px;cursor:pointer;font:500 13px var(--font);color:var(--ink)}
.sw i{width:28px;height:28px;border-radius:8px;background:var(--c);border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 6px 10px rgba(255,255,255,.25)}
.sw.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.run{border:1px dashed #C9D2DE;border-radius:14px;padding:12px;margin-top:12px;background:#FAFBFC}
.run-head{display:flex;justify-content:space-between;gap:8px;color:var(--slate);flex-wrap:wrap}.run-head span{font-family:var(--tech)}
.wall{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}.wall input{margin-top:3px}
input,select,textarea{font:500 15px var(--font);border:1px solid #CBD4E0;border-radius:10px;padding:9px 11px;width:100%;background:#fff;color:var(--ink);min-height:42px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(56,189,248,.45);border-color:var(--cyan)}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--red);flex:none;margin:2px 0 0}
.diff{font-size:13px;margin:6px 0 0;font-weight:600}.diff.bad{color:var(--red)}.diff.mid{color:var(--warn)}.diff.ok{color:var(--ok)}
.mods{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mods li{display:grid;grid-template-columns:1fr 106px 96px 64px;gap:8px;align-items:center;background:#F1F4F8;border-radius:10px;padding:6px 8px 6px 12px}
.mods li.empty{display:block;color:var(--muted);font-size:13.5px;text-align:center}
.mname{font-weight:600;font-size:14px}.mw{font-size:14px;color:var(--muted);font-family:var(--tech)}
.mods select{padding:6px 8px;min-height:34px;font-size:14px}
.up{font-size:13px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.mv{display:flex;gap:4px;justify-content:flex-end}.mv button{border:0;background:#E1E7EF;color:var(--slate);border-radius:8px;width:28px;height:28px;font-size:15px;cursor:pointer}
.mv button:disabled{opacity:.35;cursor:default}.mv .x{background:#FDE8E9;color:var(--red);font-size:18px}
.addbox{margin-top:14px;border-top:1px solid var(--line);padding-top:2px}
.addgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.addchip{border:1px dashed #9FB0C6;background:#fff;border-radius:12px;padding:9px 8px;cursor:pointer;font:inherit;color:var(--slate);display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;transition:background .15s,border-color .15s}
.addchip b{font-size:13px;line-height:1.25}.addchip small{font:600 12px var(--tech);color:var(--muted)}
.addchip:hover,.addchip:active{background:var(--navy-l, #EAF0FB);border-color:var(--slate);border-style:solid}
.runsel{margin-bottom:8px}
.lock{width:28px;height:28px;display:grid;place-items:center;font-size:13px;opacity:.6}
.row3{display:flex;gap:8px;align-items:center}.row3 select{flex:1}.row3 .btn{flex:none}
.quick{margin-top:10px;font-size:13px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.row2 label{font-size:13px;color:var(--muted)}
details.budget{margin-top:14px;border:1px solid rgba(212,175,55,.45);background:linear-gradient(180deg,#FFFBEF,#fff);border-radius:12px;padding:0 14px}
details.budget summary{color:#7A5A00;font-weight:600;padding:12px 0;cursor:pointer}
.reco{margin:12px 0 14px;display:flex;flex-direction:column;gap:8px}
.ro{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.ro.best{border:1.5px solid var(--red);background:#FFF6F6;box-shadow:0 10px 24px -16px rgba(227,30,36,.6)}.ro.dim{opacity:.7}
.ro-l{min-width:0}
.rp{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.rp>b{font:700 15.5px var(--tech);color:var(--slate)}
.badge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:2px 8px;vertical-align:middle;white-space:nowrap}
.counters{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.counter{display:flex;justify-content:space-between;align-items:center;background:#F1F4F8;border-radius:10px;padding:7px 12px;gap:10px}
.counter.off{opacity:.45}
.counter span{display:flex;flex-direction:column;font-size:14px;font-weight:600}.counter small{font-weight:400;color:var(--muted);font-size:12.5px}
.counter div{display:flex;align-items:center;gap:10px;flex:none}.counter b{min-width:18px;text-align:center;font-family:var(--tech)}
.counter button{width:34px;height:34px;border-radius:50%;border:1px solid var(--slate);background:#fff;color:var(--slate);font-size:18px;cursor:pointer;line-height:1}
.counter button:hover{background:var(--obsidian);color:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:10px;cursor:pointer}
.alert{background:#FFF0F0;color:#A4161A;border:1px solid #F4C1C3;border-radius:12px;padding:10px 12px;font-size:14px;margin:0}

/* ---------- Tech section ---------- */
.eng-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.eng-visual{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--d-line);transition:transform .25s ease-out;box-shadow:0 40px 80px -40px rgba(56,189,248,.35)}
.eng-visual img{width:100%;aspect-ratio:1376/768;object-fit:cover}
.layers{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(17,22,34,.6),rgba(10,13,18,.95))}
.layers li{font-size:13.5px;color:#D5DEEA;display:flex;gap:10px;align-items:center}
.layers b{font:600 12px var(--tech);color:var(--cyan);border:1px solid rgba(56,189,248,.4);border-radius:6px;padding:1px 6px}
.eng-lead{font-size:16px;margin:0 0 18px}
.eng-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eng-item{display:flex;gap:12px;padding:14px;border:1px solid var(--d-line);border-radius:14px;background:rgba(255,255,255,.025)}
.eng-item h3{font-size:15px;margin:0 0 4px;line-height:1.3}.eng-item p{margin:0;font-size:13.5px}
.ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:700 13px var(--tech);color:var(--gold);background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.3)}
.compare{margin-top:40px;padding:22px;border-radius:18px}
.glass{background:rgba(255,255,255,.035);border:1px solid var(--d-line);backdrop-filter:blur(10px)}
.compare-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.compare-head h3{margin:0}
.pill{font:500 12px var(--tech);letter-spacing:.04em;color:var(--gold);border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:4px 12px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:11px 12px;text-align:left;vertical-align:top}
.cmp th{font:600 13px var(--tech);letter-spacing:.06em;color:var(--d-muted);border-bottom:1px solid var(--d-line)}
.cmp td{border-bottom:1px solid var(--d-line);color:#C7D2E2}
.cmp td:first-child{font-weight:600;color:#fff;white-space:nowrap}
.cmp .hl{background:rgba(56,189,248,.06);color:#fff}.cmp th.hl{color:var(--cyan)}

/* ---------- Bento showroom ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:12px}
.b-item{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#D9DEE5}
.b-xl{grid-column:span 2;grid-row:span 2}.b-tall{grid-row:span 2}.b-wide{grid-column:span 2}
.b-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.b-item:hover img{transform:scale(1.07)}
.b-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(10,13,18,.85));display:flex;flex-direction:column;gap:2px;transform:translateY(10px);opacity:.92;transition:transform .5s var(--ease),opacity .5s}
.b-item:hover figcaption{transform:none;opacity:1}
.b-item figcaption span{font:600 10.5px var(--tech);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.b-item figcaption b{font-size:14.5px;line-height:1.3}

/* ---------- Steps ---------- */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:0;margin:0}
.steps li{counter-increment:s;border:1px solid var(--d-line);background:rgba(255,255,255,.03);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px;position:relative}
.steps li:before{content:"0" counter(s);font:700 26px var(--tech);color:transparent;-webkit-text-stroke:1px var(--cyan)}
.steps b{color:#fff}.steps span{font-size:13.5px;color:var(--d-muted)}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px;margin-bottom:10px;transition:box-shadow .2s}
.faq details[open]{box-shadow:0 12px 30px -20px rgba(20,24,31,.4)}
.faq summary{cursor:pointer;font-weight:600;padding:15px 0;color:var(--slate);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 22px/1 var(--tech);color:var(--red);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:#3E4856}
.cta{text-align:center}.cta p{margin:0 0 20px}.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--obsidian);color:var(--d-muted);padding:40px 0 110px;font-size:14px;border-top:1px solid var(--d-line)}
.footer a{color:#fff}.footer b{color:#E6EBF2}.footer p{margin:0}
.foot-in{display:grid;grid-template-columns:1.4fr 1.2fr 1fr;gap:30px}
.foot-logo{height:42px;width:auto;margin-bottom:14px}
.copy{border-top:1px solid var(--d-line);margin-top:24px;padding-top:14px;font-size:12.5px;color:#6E7C91}

/* ---------- Floating contacts ---------- */
.floating{position:fixed;right:16px;bottom:104px;z-index:40;display:flex;flex-direction:column;gap:10px}
.fl{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.fl-call{background:linear-gradient(135deg,var(--red),var(--red-d));animation:ring 2.4s infinite}.fl-zalo{background:var(--zalo)}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(227,30,36,.45)}50%{box-shadow:0 0 0 10px rgba(227,30,36,0)}}

/* ---------- AI Chat ---------- */
.ai-fab{position:fixed;left:16px;bottom:104px;z-index:45;display:flex;align-items:center;gap:8px;border:1px solid rgba(56,189,248,.45);background:rgba(10,13,18,.88);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:10px 16px 10px 10px;font:600 14px var(--font);cursor:pointer;box-shadow:0 14px 34px -12px rgba(56,189,248,.55)}
.ai-fab-ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),#2563EB);color:#fff}
.ai-fab:hover{border-color:var(--cyan)}
.ai-panel{position:fixed;left:16px;bottom:104px;z-index:80;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 190px));display:flex;flex-direction:column;background:rgba(14,18,28,.94);backdrop-filter:blur(18px);border:1px solid rgba(56,189,248,.28);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.75);color:var(--d-text);overflow:hidden;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--d-line);background:linear-gradient(90deg,rgba(56,189,248,.12),rgba(212,175,55,.08))}
.ai-head-info{display:flex;align-items:center;gap:10px}.ai-head-info b{display:block;font-size:14.5px;color:#fff}.ai-head-info small{font-size:11.5px;color:var(--d-muted)}
.ai-dot{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 10px #22C55E}
.ai-close{background:none;border:0;color:var(--d-muted);font-size:26px;cursor:pointer;width:36px;height:36px}
.ai-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ai-msg{display:flex}.ai-msg.user{justify-content:flex-end}
.ai-bubble{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;background:rgba(255,255,255,.06);border:1px solid var(--d-line)}
.ai-msg.user .ai-bubble{background:linear-gradient(135deg,#1D4ED8,#2563EB);border-color:transparent;color:#fff}
.ai-bubble a{color:var(--cyan)}.ai-bubble b{color:#fff}.ai-red{color:#FF6B70!important}.ai-warn{color:#FBBF24}
.typing .ai-bubble{display:flex;gap:4px;padding:12px 14px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--d-muted);animation:blink 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.ai-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--d-line);scrollbar-width:none}
.ai-qbtn{flex:none;background:rgba(56,189,248,.08);color:#CFE8F7;border:1px solid rgba(56,189,248,.3);border-radius:999px;padding:6px 11px;font:500 12.5px var(--font);cursor:pointer;white-space:nowrap}
.ai-qbtn:hover{background:rgba(56,189,248,.18)}
.ai-form{display:flex;gap:8px;padding:10px 12px}
.ai-form input{background:rgba(255,255,255,.06);border-color:var(--d-line);color:#fff;min-height:40px}
.ai-form input::placeholder{color:#7F8DA3}
.ai-form button{flex:none;width:42px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff;font-size:16px;cursor:pointer}
.ai-foot{font-size:12px;color:var(--d-muted);padding:0 14px 12px}.ai-foot a{color:var(--cyan)}

/* ---------- Price bar (dark) ---------- */
.pricebar{transition:transform .35s var(--ease)}
body:not(.pb-show) .pricebar{transform:translateY(110%)}
.pricebar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:transparent;border:0;box-shadow:none;pointer-events:none;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.pricebar .pb-in{justify-content:flex-end;gap:10px}
.pricebar .pb-in>*{pointer-events:auto}
.pricebar .pb-cta{box-shadow:0 10px 26px -8px rgba(227,30,36,.75)}
.pb-ico{box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.pricebar .pb-call{background:var(--obsidian)}
.pb-in{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pb-l{min-width:0}.pb-l .muted{color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pricebar .okc{color:#4ADE80}
.pb-total{font:700 25px/1.15 var(--tech);color:#fff;letter-spacing:-.01em}
.pb-name,.pb-sub{font-size:12.5px;color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-r{display:flex;align-items:center;gap:8px;flex:none}
.pb-cta{padding:14px 26px;font-size:16px}.sm-only{display:none}
.pb-ico{display:none;width:42px;height:42px;border-radius:50%;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.06);cursor:pointer;text-decoration:none;flex:none}
.pb-ai{background:linear-gradient(135deg,var(--cyan),#2563EB);border:0}
/* Bước 4 – phân khúc thiết bị */
.segs{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.seg{border:1px solid #D5DCE6;background:#fff;border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.seg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.seg-top b{font-size:14.5px}.seg-top em{margin-left:auto;font:600 14px var(--tech);font-style:normal;color:var(--slate)}
.seg small{font-size:12.5px;color:var(--muted)}
.seg-tag{font-style:normal;font-size:11px;background:#E8F7EE;color:var(--ok);border-radius:999px;padding:2px 8px}
.seg.on{border-color:var(--obsidian);background:var(--obsidian);color:#fff}.seg.on small{color:#B6C2D3}.seg.on em{color:var(--gold)}
details.more{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:0 12px}
details.more summary{cursor:pointer;font-weight:600;padding:11px 0;color:var(--slate)}
.q-advice{margin:10px 0;padding:10px 14px;border:1px solid #BFE8CF;background:#F1FBF5;border-radius:8px;font-size:12.5px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(5,8,12,.75);backdrop-filter:blur(6px);z-index:120;display:grid;place-items:center;padding:16px;overflow:auto}
.modal-box{background:#fff;border-radius:20px;padding:26px;max-width:450px;width:100%;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:pop .3s var(--ease)}
.modal-box h3{margin:0 0 6px;color:var(--slate);font-size:21px}.modal-box>p{margin:0 0 6px;font-size:14px}
.modal-box label{display:block;margin:10px 0;font-size:13.5px;font-weight:600}.modal-box input,.modal-box select,.modal-box textarea{margin-top:4px}
.modal-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:30px;cursor:pointer;color:var(--muted);width:40px;height:40px}
.err{color:var(--red);font-size:13.5px;min-height:18px;margin:4px 0}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);background:var(--obsidian);color:#fff;padding:10px 18px;border-radius:12px;z-index:300;font-size:14px;max-width:92vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4);border:1px solid rgba(56,189,248,.3)}

/* ---------- Quote page ---------- */
.quote-wrap{position:fixed;inset:0;background:#DDE2E9;z-index:200;overflow:auto;padding:16px 12px 40px;-webkit-overflow-scrolling:touch}
.q-actions{max-width:880px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:8px}
.q-actions .btn-ghost{background:#fff}
.fb-hint{flex-basis:100%;font-size:13px;color:#4A5563;background:#fff;border-radius:10px;padding:8px 12px}
.fb-hint.strong{background:#FFF6E5;color:#7A4A00;border:1px solid #F3DFB5}
.thanks{flex-basis:100%;font-size:14px;background:#EAFAF0;color:#14633A;border:1px solid #BFE8CF;border-radius:10px;padding:8px 12px}
.q-page{max-width:880px;margin:0 auto;background:#fff;padding:34px 38px;box-shadow:0 8px 30px rgba(0,0,0,.15);font-size:13.5px;line-height:1.5;border-top:6px solid var(--navy);color:#1D2430}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:3px solid var(--navy);padding-bottom:12px}
.q-logo img{height:62px;width:auto}
.q-co{text-align:right;font-size:11.5px;color:#333;line-height:1.5}.q-co b{color:var(--navy);font-size:12.5px}
.q-title{text-align:center;color:var(--navy);font-size:21px;margin:18px 0 12px;letter-spacing:.02em}
.q-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#F3F6FB;padding:12px 14px;border-radius:8px}
.q-summary{margin:12px 0;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;display:flex;flex-direction:column;gap:2px}
.q-svg svg{width:100%;height:auto;border:1px solid var(--line);margin-bottom:8px;border-radius:6px}
.q-plan{max-width:60%;margin:0 auto}
.q-table{margin:10px 0}.q-table th{background:var(--navy);color:#fff;font-size:12.5px;padding:8px}.q-table td{font-size:12.5px;padding:7px 8px;border-bottom:1px solid var(--line)}
.q-table .grp td{background:#EAF0FB;font-weight:700;color:var(--navy)}.q-table .c{text-align:center;white-space:nowrap}.q-table .r{text-align:right;white-space:nowrap}
.code{font-size:11px;color:#777}
.q-table .sub td{font-weight:700}
.q-table .tot td{background:#FFF3F3;color:var(--red);font-weight:800;font-size:14.5px}.q-table .disc td{color:var(--ok);font-weight:600}
.q-table .dep td{color:var(--navy);font-weight:600}
.q-terms ul{margin:4px 0 0;padding-left:18px}.q-terms li{margin:2px 0}
.q-bank{margin:12px 0;padding:10px 14px;background:#F3F6FB;border-radius:8px;border:1px dashed #B9C6DA}
.q-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:center;margin-top:20px;min-height:120px}
.q-note{color:var(--warn);font-size:12.5px;margin:4px 0}
.q-foot{text-align:center;font-size:11px;color:#8A94A0;border-top:1px solid var(--line);padding-top:8px;margin:14px 0 0}
body.quote-open{overflow:hidden}
body.quote-open .ai-fab,body.quote-open .ai-panel{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){.nav{gap:16px}.nav a{font-size:13.5px}}
@media (max-width:980px){
  .hero-in,.designer,.grid2,.eng-grid{grid-template-columns:1fr}
  .hero-in{gap:36px}
  .eng-cards{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .b-tall{grid-row:span 1}
  .nav{display:none}.topbar-in{justify-content:space-between}
  .preview-col{position:sticky;top:64px;z-index:5}
  .preview{padding:8px;border-radius:0 0 16px 16px}
  .preview svg{max-height:30vh}
  .preview .pv-head,.preview>p.tiny,.preview .pv-sum,.preview .plan-wrap{display:none}
  .plan-mobile{display:block;margin-top:12px}
  .fc-top{left:10px}.fc-bot{right:10px}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .sec{padding:40px 0}
  .sec-head{margin-bottom:22px}.sec-head h2,.eng-copy h2,.cta h2{font-size:23px}.sec-head p{font-size:14px}
  .kicker{font-size:11px;letter-spacing:.14em;margin-bottom:6px}
  .hide-sm{display:none}
  .btn-replay{padding:6px 10px}
  .brand img{height:30px}
  .topbar-cta{gap:6px}
  .topbar-in{height:56px}
  .hero{padding-top:18px}
  .hero-in{padding-bottom:26px;gap:18px}
  .eyebrow{font-size:10.5px;letter-spacing:.12em;margin-bottom:8px}
  h1{font-size:27px;line-height:1.18;margin-bottom:10px}
  .hero .lead{font-size:14.5px;line-height:1.5;margin-bottom:14px}
  .badges{gap:6px;margin-bottom:14px}.badges li{padding:6px 9px}.badges b{font-size:12.5px}.badges span{display:none}
  .hero-btns{display:grid;grid-template-columns:1.1fr 1fr;gap:8px}
  .hero-btns .btn.lg{padding:12px 10px;font-size:14px;white-space:normal}
  .hero-frame{padding:5px;border-radius:16px}.hero-frame img{border-radius:12px}
  .marquee-track{padding:10px 0}.marquee-track span{font-size:11px;padding:0 18px}
  .combo-img img{height:200px}.combo-body{padding:16px}.price{font-size:28px}.ticks li,.crosses li{font-size:13.5px;margin:2px 0}
  .step-card{padding:16px}.lbl{margin:12px 0 6px}
  .eng-item{padding:12px}.eng-lead{font-size:14.5px}
  .faq summary{padding:12px 0;font-size:14.5px}
  .float-card{padding:8px 10px}.float-card b{font-size:13px}.float-card small{display:none}
  .fc-top{top:14px}.fc-bot{bottom:-14px}
  .eng-cards,.steps,.foot-in{grid-template-columns:1fr}
  .compare{padding:16px}
  .cmp td:first-child{white-space:normal}
  .bento{grid-auto-rows:150px;gap:8px}
  .b-xl{grid-column:span 2;grid-row:span 2}
  .b-item figcaption{padding:28px 10px 8px}.b-item figcaption b{font-size:12.5px}
  .chips.grid3{grid-template-columns:repeat(3,1fr)}.chips.grid3 .chip{padding:8px}
  .chips.grid2c{grid-template-columns:1fr}
  .mods li{grid-template-columns:1fr auto;grid-template-areas:"n c" "w u";row-gap:6px}
  .mods li .mname{grid-area:n}.mods li select,.mods li .mw{grid-area:w}.mods li .up{grid-area:u;justify-content:flex-end}.mods li .mv{grid-area:c}
  .row3{flex-wrap:wrap}.row3 select{flex:1 1 40%}
  .addgrid{grid-template-columns:repeat(2,1fr)}
  .ro{flex-direction:column;align-items:stretch}.rp{text-align:left;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .q-page{padding:18px 14px}.q-head{flex-direction:column;align-items:flex-start}.q-co{text-align:left}.q-meta{grid-template-columns:1fr}.q-plan{max-width:100%}
  /* Điện thoại: bỏ nút nổi che nội dung – Gọi & Hỏi AI nằm gọn trong thanh giá */
  .floating,.ai-fab{display:none!important}
  input,select,textarea{font-size:16px} /* tránh iPhone tự phóng to khi chạm ô nhập */
  .preview-col{top:56px}
  .q-table{table-layout:fixed}.q-table th:nth-child(1),.q-table td:nth-child(1){width:26px}.q-table th:nth-child(3),.q-table td:nth-child(3){width:58px}
  .q-table th:nth-child(4),.q-table td:nth-child(4){display:none}
  .q-table td,.q-table th{font-size:11.5px;padding:6px 4px;word-break:break-word}.q-table .r{white-space:normal}
  .q-table tr.sub td[colspan],.q-table tr.disc td[colspan],.q-table tr.tot td[colspan],.q-table tr.dep td[colspan]{text-align:right}
  .q-actions .btn{flex:1 1 45%}
  .pb-ico{display:grid}
  .pricebar{padding:8px 0 calc(10px + env(safe-area-inset-bottom))}
  .pv-mtotal{display:flex;align-items:baseline;gap:8px;padding:6px 6px 0;color:var(--slate)}.pv-mtotal span{font-size:12px;color:var(--muted)}.pv-mtotal b{font:700 17px var(--tech);color:var(--red)}.pv-mtotal small{font-size:11px;color:var(--ok)}
  .pb-in{gap:8px}
  .pb-name{display:none}.pb-sub{font-size:11px}
  .pb-total{font-size:19px}
  .pb-cta{padding:11px 16px;font-size:14.5px}.lg-only{display:none}.sm-only{display:inline}
  .ai-panel{left:8px;right:8px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom));height:calc(100dvh - 150px)}
  .footer{padding-bottom:90px}
  .toast{bottom:84px}
  .intro-hud{font-size:10px;letter-spacing:.14em}
}
@media print{
  html,body{background:#fff}
  body.quote-open>*:not(#quote){display:none!important}
  .quote-wrap{position:static;background:#fff;padding:0;overflow:visible;display:block!important}
  .no-print{display:none!important}
  @page{size:A4;margin:8mm 9mm}
  .q-page{box-shadow:none;max-width:none;padding:0;border-top:0;font-size:10.5px;line-height:1.38}
  .q-head{padding-bottom:6px}.q-logo img{height:44px}.q-co{font-size:9.5px}
  .q-title{font-size:16px;margin:8px 0 6px}
  .q-meta{padding:6px 10px;gap:10px}.q-summary{margin:6px 0;padding:6px 10px}
  .q-svg{display:flex;gap:6px;align-items:flex-start}.q-svg svg{max-height:44mm;width:auto;max-width:100%;margin:0 auto 4px}
  .q-plan{max-width:38%}.q-plan svg{max-height:44mm}
  .q-table{margin:6px 0}.q-table td,.q-table th{font-size:9.8px;padding:3px 5px}.q-table .tot td{font-size:11.5px}.code{font-size:9px}
  .q-advice{margin:6px 0;padding:6px 10px;font-size:10px}.q-note{font-size:9.8px;margin:2px 0}
  .q-terms ul{columns:2;column-gap:16px;margin-top:2px}.q-terms li{font-size:9.6px;margin:1px 0;break-inside:avoid}
  .q-bank{margin:6px 0;padding:6px 10px;display:inline-block;width:55%;vertical-align:top}.q-sign{display:inline-grid;width:43%;margin:6px 0 0 1.5%;vertical-align:top;min-height:64px;font-size:9.8px}.q-foot{margin-top:6px;padding-top:4px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr,.q-svg,.q-sign,.q-bank,.q-terms{break-inside:avoid}
  tr.grp{break-after:avoid}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}