@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-400-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-600-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-700-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro'; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/be-vietnam-pro-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope'; font-style:normal; font-weight:600 800; font-display:swap; src:url(/assets/fonts/manrope-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope'; font-style:normal; font-weight:600 800; font-display:swap; src:url(/assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --panel-indigo: #141E33;
  --panel-indigo-2: #1E2C4A;
  --cell-blue: #2D4C7A;
  --cell-line: rgba(255,255,255,.10);
  --sun-copper: #E07B2B;
  --sun-copper-ink: #A04F17;
  --sun-glow: #F4A94C;
  --clay: #B5542F;
  --moss: #3E9D5B;
  --moss-ink: #2F7A45;
  --moss-soft: #E7F3EC;
  --daylight: #FAF8F4;
  --daylight-2: #F1ECE4;
  --ink: #111A2B;
  --mist: #5A6B82;
  --line: #E4DDD1;
  --white: #FFFFFF;
  --font-display: 'Manrope', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-data: 'Manrope', 'Be Vietnam Pro', system-ui, sans-serif;
  --shell: 1200px;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: clamp(1rem, 2.4vw, 1.75rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --pad: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .35s;
  --t-med: .5s;
  --shadow-sm: 0 1px 2px rgba(20,30,51,.06), 0 4px 16px rgba(20,30,51,.05);
  --shadow-md: 0 10px 30px rgba(20,30,51,.10);
  --shadow-lg: 0 24px 60px rgba(20,30,51,.16);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--daylight)}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--daylight);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a[href^="tel:"]{white-space:nowrap}
ul,ol{list-style:none; padding:0}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--sun-copper); outline-offset:3px; border-radius:4px}
.skip-link{position:absolute; left:16px; top:-60px; z-index:200; padding:.7rem 1.1rem; border-radius:10px; background:var(--panel-indigo); color:#fff; font-weight:600; transition:top .3s cubic-bezier(.4,0,.2,1)}
.skip-link:focus{top:12px}
[id]{scroll-margin-top:84px}
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.12; font-weight:700; letter-spacing:-.015em; text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
h2{letter-spacing:-.025em}
h2{font-size:clamp(1.7rem, 3.6vw, 2.7rem)}
h3{font-size:clamp(1.15rem, 2vw, 1.4rem); font-weight:600}
.eyebrow{
  font-family:var(--font-data); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sun-copper-ink);
  margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--sun-copper)}
.eyebrow-light{color:var(--sun-glow)}
.eyebrow-light::before{background:var(--sun-glow)}
.lead{font-size:1.08rem; color:#33415A}
.section{padding-block:var(--section-y) calc(var(--section-y) * 1.08)}
.section-head{max-width:720px; margin-bottom:clamp(2rem,4vw,3rem)}
.section-intro{color:var(--mist); margin-top:.9rem; font-size:1.05rem; max-width:62ch}
.btn{
  --h:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--h); padding:0 1.35rem; border:none; border-radius:999px;
  font-weight:600; font-size:.98rem; line-height:1; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985); transition-duration:.12s}
.btn-lg{--h:56px; padding:0 1.9rem; font-size:1.05rem}
.btn-block{width:100%}
.btn-sun{
  background:linear-gradient(135deg, var(--sun-glow), var(--sun-copper));
  color:#2A1605; box-shadow:0 8px 22px rgba(224,123,43,.32);
}
.btn-sun:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(224,123,43,.42)}
.btn-ghost-light{
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.btn-zalo{background:#0068FF; color:#fff; box-shadow:0 8px 20px rgba(0,104,255,.24)}
.btn-zalo:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,104,255,.32)}
.btn svg{flex-shrink:0}
.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-weight:600; color:var(--sun-copper-ink); font-size:.95rem;
  transition:gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.link-arrow:hover{gap:.75rem; color:var(--clay)}
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--daylight);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; gap:1.25rem; height:70px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.2rem; letter-spacing:.02em}
.brand-mark{display:grid; place-items:center; flex-shrink:0}
.brand-mark svg{display:block; height:46px; width:auto}
.brand-text{display:flex; flex-direction:column; font-weight:800; line-height:1; white-space:nowrap}
.brand-line1{font-size:.74rem; letter-spacing:.235em; margin-right:-.235em; color:var(--panel-indigo)}
.brand-line2{font-size:1.1rem; letter-spacing:.04em; color:var(--moss-ink); margin-top:.28rem}
.brand--light .brand-line1{color:#fff}
.brand--light .brand-line2{color:#6CC48A}
.brand--light .lg-pv{fill:#7FA3D6}
.brand--light .lg-house{fill:#fff}
.nav{display:flex; gap:.35rem; margin-left:auto}
.nav a:not(.btn){
  padding:.5rem .8rem; border-radius:8px; font-weight:500; font-size:.95rem; color:#2B3651;
  position:relative; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:not(.btn):hover{background:var(--daylight-2); color:var(--panel-indigo)}
.nav a:not(.btn)::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem; height:2px; border-radius:2px;
  background:var(--sun-copper); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med) var(--ease)}
.header-cta{margin-left:.25rem}
.header-cta svg{color:#2A1605}
.nav-cta,.rail-dots{display:none}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:10px; margin-left:auto}
.nav-toggle span{width:24px; height:2px; background:var(--panel-indigo); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.hero{position:relative; min-height:clamp(580px, 88vh, 860px); min-height:clamp(580px, 88dvh, 860px); display:flex; align-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%; transform:scale(1.06); animation:hero-settle 2.4s var(--ease) .1s forwards}
@keyframes hero-settle{to{transform:scale(1)}}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(10,15,28,.86) 0%, rgba(12,19,36,.66) 34%, rgba(14,22,40,.22) 60%, rgba(14,22,40,0) 78%),
    linear-gradient(0deg, rgba(10,15,28,.5), rgba(10,15,28,0) 38%);
}
.hero-sweep{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(244,169,76,.22) 50%, transparent 62%);
  transform:translateX(-30%);
  animation:sweep 5.5s var(--ease) 0.4s both;
  mix-blend-mode:screen;
}
@keyframes sweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.hero-inner{position:relative; z-index:2; max-width:880px; color:#fff; padding-block:clamp(2rem,6vh,4rem)}
.hero-title{
  font-size:clamp(2rem, 4.4vw, 3.5rem); font-weight:800; color:#fff;
  letter-spacing:-.02em; margin-bottom:1.1rem;
}
.hero-title .accent{display:block; color:var(--sun-glow)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.2rem); color:rgba(255,255,255,.88); max-width:600px; margin-bottom:1.9rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.4rem}
.hero-partners{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16); max-width:600px}
.hero-partners span{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-right:.4rem}
.hero-partners strong{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; letter-spacing:.02em}
.hero-partners i{width:4px; height:4px; border-radius:50%; background:var(--sun-glow); opacity:.7}
.h-in{opacity:0; transform:translateY(22px); animation:h-in .8s var(--ease) forwards}
.hero-title.h-in{animation-delay:.12s} .hero-sub.h-in{animation-delay:.26s} .hero-actions.h-in{animation-delay:.38s}
.hero-partners{opacity:0; animation:h-in .8s var(--ease) .52s forwards}
@keyframes h-in{to{opacity:1; transform:none}}
.anim-off, .anim-off *{animation-play-state:paused !important}
.stats{background:var(--panel-indigo); position:relative; overflow:hidden}
.stats::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:46px 46px; pointer-events:none;
}
.stats-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08)}
.stat{background:var(--panel-indigo); padding:clamp(1.8rem,3.5vw,2.8rem) 1.4rem; text-align:center}
.stat-num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,4.5vw,3.1rem); color:#fff; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat-num .unit{font-size:.9rem; font-weight:600; color:var(--sun-glow); margin-left:.25rem; font-family:var(--font-data)}
.stat-label{display:block; margin-top:.7rem; color:rgba(255,255,255,.66); font-size:.92rem}
.about-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about-media{position:relative}
.about-media img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md); aspect-ratio:4/3; object-fit:cover}
.about-badge{
  position:absolute; right:-14px; bottom:-18px; background:var(--sun-copper);
  color:#2A1605; padding:1rem 1.2rem; border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:.7rem; box-shadow:var(--shadow-md);
}
.about-badge-num{font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1}
.about-badge-text{font-size:.82rem; font-weight:600; line-height:1.25}
.about-copy h2{margin-bottom:1.1rem}
.about-copy p + p{margin-top:.9rem}
.about-copy > p:not(.eyebrow):not(.lead){color:#33415A}
.check-list{margin-top:1.4rem; display:grid; gap:.7rem}
.check-list li{position:relative; padding-left:1.9rem; color:#33415A}
.check-list li::before{
  content:""; position:absolute; left:0; top:.15rem; width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.solution-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.solution-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:0 clamp(1.3rem,2.2vw,1.7rem) clamp(1.4rem,2.2vw,1.8rem);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.solution-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent}
.solution-card .link-arrow{margin-top:auto; padding-top:1.3rem}
.solution-card.feature{background:linear-gradient(170deg,#fff 55%, #FBF4EA); border-color:#F0DFC8}
.solution-media{position:relative; margin:0 calc(-1 * clamp(1.3rem,2.2vw,1.7rem)) 1.6rem; aspect-ratio:16/10}
.solution-media img{width:100%; height:100%; object-fit:cover; display:block}
.obj-bottom{object-position:center bottom}
.solution-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,30,51,0) 45%, rgba(20,30,51,.45))}
.solution-icon{
  position:absolute; left:clamp(1.3rem,2.2vw,1.7rem); bottom:-22px; z-index:2;
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:var(--panel-indigo); color:var(--sun-glow); box-shadow:var(--shadow-md);
}
.solution-icon svg{width:27px; height:27px}
.feature .solution-icon{background:var(--sun-copper); color:#2A1605}
.solution-card h3{margin-top:2.2rem}
.solution-card h3{margin-bottom:.5rem}
.solution-card p{color:var(--mist); font-size:.98rem}
.mini-list{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.mini-list li{
  font-family:var(--font-data); font-size:.76rem; font-weight:500; color:#3A4A66;
  background:var(--daylight-2); padding:.3rem .65rem; border-radius:6px;
}
.products{background:var(--daylight-2)}
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.product-card{
  background:#fff; border-radius:var(--radius); padding:0 clamp(1.5rem,2.4vw,2rem) clamp(1.5rem,2.4vw,2rem);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.product-media{position:relative; margin:0 calc(-1 * clamp(1.5rem,2.4vw,2rem)) 2.3rem; aspect-ratio:4/3; background:#E6ECF3}
.product-media img{width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center bottom; transition:transform .6s var(--ease)}
.product-card:hover .product-media img{transform:scale(1.04)}
.product-media .product-icon{position:absolute; left:clamp(1.5rem,2.4vw,2rem); bottom:-26px; z-index:2; margin:0;
  background:#fff; box-shadow:var(--shadow-md)}
.product-tag{
  display:inline-block; font-family:var(--font-data); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cell-blue);
  background:#EAF0F7; padding:.3rem .6rem; border-radius:6px; margin-bottom:.9rem;
}
.product-card h3{margin-bottom:.5rem}
.product-card p{color:var(--mist); font-size:.95rem; margin-bottom:1.2rem}
.spec{display:grid; gap:0; border-top:1px solid var(--line)}
.spec div{display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line)}
.spec dt{color:var(--mist); font-size:.9rem}
.spec dd{font-family:var(--font-data); font-weight:600; color:var(--panel-indigo); font-size:.9rem; font-variant-numeric:tabular-nums}
.process{background:var(--panel-indigo); color:#fff; position:relative; overflow:hidden}
.process::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:52px 52px;
}
.process .section-head{position:relative}
.process h2{color:#fff}
.process-steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); counter-reset:step}
.process-step{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:1.6rem 1.4rem; position:relative;
  transition:transform .25s var(--ease), background .25s;
}
.process-step:hover{transform:translateY(-5px); background:rgba(255,255,255,.07)}
.process-num{
  font-family:var(--font-data); font-weight:600; font-size:1rem; color:var(--sun-glow);
  display:inline-block; padding-bottom:.9rem;
}
.process-step h3{color:#fff; margin-bottom:.5rem; font-size:1.12rem}
.process-step p{color:rgba(255,255,255,.66); font-size:.93rem}
.commit-layout{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center}
.commit-visual{position:relative; margin:0}
.commit-visual img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px; box-shadow:0 30px 60px rgba(20,30,51,.18)}
.commit-content .section-head{margin-bottom:1.6rem}
.commit-list{display:grid}
.commit-item{display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.5rem 0; border-top:1px solid var(--line)}
.commit-item:last-child{border-bottom:1px solid var(--line)}
.commit-icon{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:#EAF0F7; color:var(--cell-blue)}
.commit-item h3{margin-bottom:.35rem}
.commit-item p{color:var(--mist); font-size:.98rem}
.project-bento{display:grid; grid-template-columns:1.45fr 1fr; grid-template-rows:repeat(2, minmax(250px, 1fr)); gap:var(--gap)}
.project-tile{position:relative; overflow:hidden; border-radius:20px; background:var(--panel-indigo); isolation:isolate}
.project-tile.tile-lg{grid-row:span 2; min-height:540px}
.project-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease)}
.project-tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,15,28,0) 22%, rgba(10,15,28,.5) 52%, rgba(10,15,28,.88) 100%)}
.project-tile:hover img{transform:scale(1.045)}
.tile-cap{position:absolute; left:0; right:0; bottom:0; padding:clamp(1.2rem,2.4vw,1.8rem); color:#fff}
.tile-tag{display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sun-glow); margin-bottom:.5rem; text-shadow:0 1px 6px rgba(10,15,28,.6)}
.tile-cap h3{color:#fff; font-size:clamp(1.15rem,2vw,1.5rem); margin-bottom:.3rem}
.tile-cap p{color:rgba(255,255,255,.8); font-size:.94rem; max-width:44ch}
.case-section{background:var(--daylight-2)}
.case{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.case-media{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.case-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--line)}
.case-media img:first-child{grid-column:1/-1; border-radius:16px}
.case-body h3{font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.25; margin:.5rem 0 1.3rem; text-wrap:balance}
.case-facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; margin-bottom:1.3rem}
.case-text{color:#33415A; max-width:60ch}
.case-src{margin-top:.9rem; font-size:.875rem; color:var(--mist)}
.case-src a{color:var(--sun-copper-ink); text-decoration:underline; text-underline-offset:3px}
.case-body .link-arrow{margin-top:1.2rem}
.real-gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.real-gallery figure{margin:0}
.real-gallery img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:12px; background:var(--line)}
.real-gallery figcaption{margin-top:.55rem; font-size:.875rem; color:var(--mist)}
.cta-final{background:linear-gradient(160deg,var(--panel-indigo),var(--panel-indigo-2)); color:#fff; position:relative; overflow:hidden}
.cta-final::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:46px 46px;
}
.cta-grid{position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.cta-copy h2{color:#fff; margin-bottom:.9rem}
.cta-copy > p:not([class]){color:rgba(255,255,255,.8); max-width:460px}
.cta-channels{display:grid; gap:.75rem; margin-top:2rem; max-width:470px}
.channel{display:flex; align-items:center; gap:1rem; padding:.85rem 1.1rem .85rem .85rem; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff;
  transition:background .45s cubic-bezier(.4,0,.2,1), border-color .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1)}
.channel:hover,.channel:focus-visible{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); transform:translateX(4px)}
.channel-ic{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex-shrink:0}
.channel-ic svg{width:26px; height:26px}
.channel-call .channel-ic{background:linear-gradient(140deg,var(--sun-glow),var(--sun-copper)); color:#2A1605}
.channel-call .channel-ic svg{width:23px; height:23px}
.channel-zalo .channel-ic{background:#0068FF}
.channel-zalo .channel-ic svg{width:32px; height:32px}
.channel-mess .channel-ic{background:linear-gradient(225deg,#FF7061 0%,#FF5280 22%,#A033FF 58%,#0099FF 100%)}
.channel-txt{display:flex; flex-direction:column; flex:1; min-width:0}
.channel-txt small{font-size:.78rem; color:rgba(255,255,255,.66); letter-spacing:.02em}
.channel-txt strong{font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:.01em; white-space:nowrap}
.channel-go{color:rgba(255,255,255,.45); font-size:1.1rem; transition:transform .45s cubic-bezier(.4,0,.2,1), color .45s}
.channel:hover .channel-go{transform:translateX(4px); color:#fff}
.cta-form{background:#fff; border-radius:20px; padding:clamp(1.6rem,3vw,2.3rem); box-shadow:var(--shadow-lg); position:relative}
.form-kicker{font-family:var(--font-data); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sun-copper-ink); margin-bottom:.5rem}
.form-title{font-size:1.35rem; color:var(--ink); margin-bottom:.45rem}
.form-sub{color:var(--mist); font-size:.94rem; margin-bottom:1.4rem}
.field{margin-bottom:1rem}
.field label{display:block; font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.4rem}
.field input{
  width:100%; min-height:52px; padding:0 1rem; border:1.5px solid var(--line);
  border-radius:12px; font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
  transition:border-color .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1)}
.field input:focus{outline:none; border-color:var(--sun-copper); box-shadow:0 0 0 4px rgba(224,123,43,.14)}
.field input[aria-invalid="true"]{border-color:#C8321F; box-shadow:0 0 0 4px rgba(200,50,31,.1)}
.field.is-valid input{border-color:var(--moss)}
.field-err{display:flex; align-items:center; gap:.35rem; margin-top:.35rem; font-size:.84rem; color:#B42A18; font-weight:500; animation:err-in .2s var(--ease)}
.field-err::before{content:""; width:14px; height:14px; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.field-err:empty{display:none}
@keyframes err-in{from{opacity:0; transform:translateY(-3px)}}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cta-form .btn{margin-top:.4rem}
.btn.is-loading{opacity:.75; cursor:progress}
.btn.is-loading .btn-text::after{content:""; display:inline-block; width:14px; height:14px; margin-left:.6rem; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
.form-consent{margin-top:.9rem; font-size:.8rem; line-height:1.5; color:var(--mist); text-align:center}
.form-consent a{color:var(--sun-copper-ink); text-decoration:underline; text-underline-offset:2px}
.form-status{margin-top:.8rem; font-size:.9rem; font-weight:600; text-align:center}
.form-status:empty{display:none}
.form-status.is-error{color:#B42A18}
.form-status.is-info{color:var(--cell-blue)}
.form-status a{text-decoration:underline}
.form-done{display:none; outline:none}
.is-sent .form-done{display:block; text-align:center; padding:.3rem 0 .1rem}
.is-sent .field, .is-sent .lp-fields, .is-sent .form-sub, .is-sent button[type="submit"], .is-sent .form-consent{display:none}
.form-done-ic{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--moss-soft); color:var(--moss-ink); margin-bottom:.85rem}
.form-done-ic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.form-done-title{font-family:var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.35; color:var(--ink); margin-bottom:.4rem; text-wrap:balance}
.form-done-text{color:var(--mist); font-size:.94rem; margin-bottom:.55rem; text-wrap:balance}
.form-done-call{font-size:.94rem; color:var(--ink); margin-bottom:.4rem}
.form-done-call a{color:var(--sun-copper-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.form-done-again{min-height:44px; padding:.4rem .5rem; border:0; background:none; font:inherit; font-size:.86rem; color:var(--mist); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.form-done-again:hover{color:var(--ink)}
.site-footer{background:#0E1626; color:rgba(255,255,255,.74)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2rem; padding-block:clamp(2.5rem,5vw,4rem)}
.footer-brand p{margin-top:1rem; font-size:.92rem; max-width:320px; color:rgba(255,255,255,.66)}
.footer-col h3{font-family:var(--font-display); font-size:1rem; color:#fff; margin-bottom:1rem; font-weight:600}
.footer-col ul{display:grid; gap:.6rem}
.footer-col a{font-size:.92rem; color:rgba(255,255,255,.66); transition:color .18s}
.footer-col a:hover{color:var(--sun-glow)}
.footer-contact li{display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:rgba(255,255,255,.66)}
.footer-contact svg{flex-shrink:0; margin-top:.2rem; color:var(--sun-glow)}
.footer-contact .info-label{display:block; font-size:.78rem; color:rgba(255,255,255,.66); margin-bottom:.1rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:1.3rem; font-size:.85rem; color:rgba(255,255,255,.66)}
.dock{position:fixed; right:20px; bottom:22px; z-index:95; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.dock.is-muted{opacity:0; transform:translateY(16px); pointer-events:none}
.dock-btn{position:relative; display:flex; align-items:center; gap:12px; text-decoration:none;
  opacity:0; transform:translateX(18px); animation:dock-in .6s cubic-bezier(.4,0,.2,1) forwards}
.dock-btn:nth-child(1){animation-delay:.9s} .dock-btn:nth-child(2){animation-delay:1.02s} .dock-btn:nth-child(3){animation-delay:1.14s}
@keyframes dock-in{to{opacity:1; transform:none}}
.dock-ic{position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  box-shadow:0 10px 26px rgba(10,16,32,.28), inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1)}
.dock-ic svg{width:30px; height:30px; position:relative; z-index:1}
.dock-messenger .dock-ic{background:linear-gradient(225deg,#FF7061 0%,#FF5280 22%,#A033FF 58%,#0099FF 100%)}
.dock-zalo .dock-ic{background:#0068FF}
.dock-zalo .dock-ic svg{width:36px; height:36px}
.dock-call .dock-ic{background:linear-gradient(140deg,var(--sun-glow),var(--sun-copper)); color:#2A1605; width:62px; height:62px}
.dock-call .dock-ic svg{width:28px; height:28px; animation:ring-shake 4.8s cubic-bezier(.4,0,.2,1) infinite; transform-origin:50% 50%}
@keyframes ring-shake{0%,82%,100%{transform:none}85%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}91%{transform:rotate(-9deg)}94%{transform:rotate(6deg)}}
.dock-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--sun-copper); opacity:0;
  animation:ring-wave 2.6s cubic-bezier(.4,0,.2,1) infinite}
.dock-ring-2{animation-delay:1.3s}
@keyframes ring-wave{0%{transform:scale(1); opacity:.55}100%{transform:scale(1.75); opacity:0}}
.dock-label{display:flex; flex-direction:column; align-items:flex-end; padding:.62rem 1rem; border-radius:12px;
  background:rgba(14,22,38,.92); color:#fff; font-weight:600; font-size:.9rem; line-height:1.2; white-space:nowrap;
  backdrop-filter:blur(10px); box-shadow:0 10px 26px rgba(10,16,32,.22);
  opacity:0; transform:translateX(10px); pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1)}
.dock-label small{font-size:.7rem; font-weight:500; color:rgba(255,255,255,.66); letter-spacing:.04em; margin-bottom:.15rem}
.dock-call .dock-label{font-family:var(--font-display); font-size:1.02rem; font-weight:800; letter-spacing:.01em}
.dock-btn:hover .dock-label,.dock-btn:focus-visible .dock-label{opacity:1; transform:none}
.dock-btn:hover .dock-ic,.dock-btn:focus-visible .dock-ic{transform:translateY(-2px) scale(1.04); box-shadow:0 16px 34px rgba(10,16,32,.34), inset 0 0 0 1px rgba(255,255,255,.22)}
.dock-btn:focus-visible{outline:none}
.dock-btn:focus-visible .dock-ic{outline:3px solid #fff; outline-offset:3px}
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  animation:reveal-failsafe 0s 3s forwards}
.js.reveal-ready .reveal{animation:none}
.js .reveal.in{opacity:1; transform:none}
@keyframes reveal-failsafe{to{opacity:1; transform:none}}
.process .section-intro,.howto .section-intro{color:rgba(255,255,255,.74)}
.faq-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.faq .section-intro a{color:var(--sun-copper-ink); font-weight:600}
.faq-list{display:grid; gap:.75rem}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color .2s, box-shadow .2s}
.faq-item[open]{border-color:#F0DFC8; box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none; cursor:pointer; padding:1.05rem 3rem 1.05rem 1.2rem; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; position:absolute; right:1.2rem; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--sun-copper); border-bottom:2px solid var(--sun-copper); transform:rotate(45deg);
  transition:transform .28s cubic-bezier(.2,0,0,1)}
.faq-item[open] summary::after{transform:rotate(225deg); margin-top:-2px}
.faq-item p{padding:0 1.2rem 1.15rem; color:var(--mist); font-size:.96rem}
.ai{display:block; overflow:visible}
.ai *{transform-box:fill-box}
.solution-icon svg,.commit-icon svg{width:31px; height:31px}
.solution-icon,.commit-icon,.process-icon,.product-icon{
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease)}
.solution-card:hover .solution-icon,.commit-item:hover .commit-icon,
.process-step:hover .process-icon,.product-card:hover .product-icon{
  transform:translateY(-3px) scale(1.06); box-shadow:0 10px 24px rgba(224,123,43,.28)}
.process-step{position:relative}
.process-icon{position:absolute; top:1.25rem; right:1.25rem; width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--sun-glow)}
.process-icon svg{width:28px; height:28px}
.product-icon{width:56px; height:56px; border-radius:15px; display:grid; place-items:center;
  background:#EAF0F7; color:var(--cell-blue); margin-bottom:1rem}
.product-icon svg{width:32px; height:32px}
.ai-home .h-sun{animation:h-sun 4s ease-in-out infinite}
.ai-home .h-win{fill:currentColor; fill-opacity:.9; animation:h-win 4s ease-in-out infinite}
@keyframes h-sun{0%,100%{transform:translateY(7px); opacity:.15}35%,80%{transform:none; opacity:1}}
@keyframes h-win{0%,30%,100%{fill-opacity:0}45%,80%{fill-opacity:.9}}
.ai-factory .f-bolt{animation:f-bolt 2.6s ease-in-out infinite}
@keyframes f-bolt{0%{transform:translateY(5px); opacity:0}30%,65%{transform:none; opacity:1}100%{transform:translateY(-4px); opacity:0}}
.ai-sprout .s-sun{transform-origin:center; animation:pulse 2.4s ease-in-out infinite}
.ai-sprout .s-plant{animation:fade-cycle 4.2s ease-in-out infinite}
.ai-sprout .s-stem{transform-origin:50% 100%; animation:s-stem 4.2s cubic-bezier(.2,0,0,1) infinite}
.ai-sprout .s-leaf-l{transform-origin:100% 100%; animation:s-leaf 4.2s cubic-bezier(.2,0,0,1) infinite}
.ai-sprout .s-leaf-r{transform-origin:0% 100%; animation:s-leaf 4.2s cubic-bezier(.2,0,0,1) infinite}
@keyframes s-stem{0%{transform:scaleY(0)}30%,100%{transform:scaleY(1)}}
@keyframes s-leaf{0%,22%{transform:scale(0)}50%,100%{transform:scale(1)}}
@keyframes fade-cycle{0%,88%{opacity:1}100%{opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.75}50%{transform:scale(1.14); opacity:1}}
.ai .draw,.ai .d-line{stroke-dasharray:1 1}
.ai-shield .draw{animation:draw 3.2s cubic-bezier(.2,0,0,1) infinite}
@keyframes draw{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.ai-clock .c-hand{transform-origin:50% 100%; animation:spin 2.4s linear infinite}
.ai-badge .b-glint,.ai-panel .pn-glint{opacity:0}
.ai-badge .b-glint{animation:glint 3.4s ease-in-out infinite}
.ai-panel .pn-glint{animation:glint-wide 3.6s ease-in-out infinite}
@keyframes glint{0%,50%{transform:translateX(-20px); opacity:0}60%{opacity:1}85%{transform:translateX(24px); opacity:1}100%{transform:translateX(24px); opacity:0}}
@keyframes glint-wide{0%,45%{transform:translateX(-28px); opacity:0}55%{opacity:1}85%{transform:translateX(40px); opacity:1}100%{transform:translateX(40px); opacity:0}}
.ai-survey .sv-lens{animation:scan 3.6s ease-in-out infinite}
@keyframes scan{0%,100%{transform:none}33%{transform:translate(-8px,4px)}66%{transform:translate(-3px,9px)}}
.ai-design .d-line{animation:draw 3.4s cubic-bezier(.2,0,0,1) infinite}
.ai-design .d-pen{animation:pen 3.4s ease-in-out infinite}
@keyframes pen{0%,100%{transform:none}45%{transform:translate(-3px,3px)}}
.ai-install .w-wrench{transform-origin:85% 15%; animation:wrench 1.8s ease-in-out infinite}
@keyframes wrench{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.ai-power .p-ring{transform-origin:center; opacity:.35; animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.8); opacity:.6}100%{transform:scale(1.22); opacity:0}}
.ai-inverter .iv-wave{animation:wave 1.1s linear infinite}
.ai-inverter .iv-led{animation:blink 1.4s steps(2) infinite}
@keyframes wave{to{transform:translateX(-12px)}}
@keyframes blink{50%{opacity:.2}}
.ai-battery .bt-fill{fill-opacity:.85; transform-origin:0% 50%; animation:charge 3.2s cubic-bezier(.2,0,0,1) infinite}
@keyframes charge{0%{transform:scaleX(.12)}70%,88%{transform:scaleX(1)}100%{transform:scaleX(.12)}}
.ai-savings .sv-coin{animation:coin 3.2s cubic-bezier(.2,0,0,1) infinite}
.ai-savings .draw{animation:draw 3.2s cubic-bezier(.2,0,0,1) infinite}
@keyframes coin{0%{transform:translateY(-9px); opacity:0}30%,85%{transform:none; opacity:1}100%{opacity:0}}
.howto{background:var(--panel-indigo-2); color:#fff; position:relative; overflow:hidden}
.howto::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:48px 48px;}
.howto .section-head{position:relative; margin-inline:auto; text-align:center}
.howto h2{color:#fff}
.render-wrap{position:relative; max-width:1040px; margin:0 auto; background:#fff;
  border-radius:20px; padding:clamp(.5rem,1.5vw,1rem); box-shadow:0 30px 70px rgba(5,10,22,.45); overflow:hidden}
.render-img{width:100%; height:auto; display:block; border-radius:14px}
.render-overlay{position:absolute; left:clamp(.5rem,1.5vw,1rem); top:clamp(.5rem,1.5vw,1rem);
  width:calc(100% - 2*clamp(.5rem,1.5vw,1rem)); height:calc(100% - 2*clamp(.5rem,1.5vw,1rem))}
.render-overlay .r-sun{fill:#F4A94C}
.render-overlay .r-halo{animation:halo 4s ease-in-out infinite; transform-origin:235px 195px}
@keyframes halo{0%,100%{opacity:.8; transform:scale(1)}50%{opacity:1; transform:scale(1.08)}}
.render-overlay .r-rays{transform-origin:235px 195px; animation:spin 40s linear infinite}
.render-overlay .r-rays path{stroke:#E07B2B; stroke-width:9; stroke-linecap:round}
@keyframes spin{to{transform:rotate(360deg)}}
.render-overlay .r-beams path{stroke:#F7C77E; stroke-width:7; stroke-linecap:round; opacity:.9;
  stroke-dasharray:26 30; animation:beamflow 1.2s linear infinite}
.render-overlay .r-beams .d2{animation-duration:1.5s}
.render-overlay .r-beams .d3{animation-duration:1s}
@keyframes beamflow{to{stroke-dashoffset:-56}}
.render-overlay .el path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.render-overlay .el-halo{stroke:#2FB8FF; stroke-width:16; opacity:.38; filter:url(#eGlow); animation:el-flicker 1.7s steps(6) infinite}
.render-overlay .el-arc{stroke:#E9FBFF; stroke-width:3.2; filter:url(#eBolt)}
.render-overlay .el-arc2{stroke:#6FE0FF; stroke-width:1.8; opacity:.85; filter:url(#eBolt2)}
.render-overlay .el-pulse{stroke:#FFFFFF; stroke-width:9; stroke-dasharray:6 94; filter:url(#eGlow); animation:el-run 2.4s linear infinite}
.render-overlay .el-pulse-dc{stroke-dasharray:12 88; animation-duration:1.5s}
.render-overlay .el-ac .el-halo{stroke:#FFB547}
.render-overlay .el-ac .el-arc{stroke:#FFF1D6}
.render-overlay .el-pulse-ac{stroke:#FFE2A8; stroke-dasharray:22 78; animation-duration:1s}
@keyframes el-run{from{stroke-dashoffset:0} to{stroke-dashoffset:-100}}
@keyframes el-flicker{0%{opacity:.30}20%{opacity:.48}40%{opacity:.34}60%{opacity:.52}80%{opacity:.36}100%{opacity:.44}}
.render-overlay .el-flash{fill:#BFF1FF; filter:url(#eGlow); transform-box:fill-box; transform-origin:center; animation:el-flash 1.5s ease-out infinite}
@keyframes el-flash{0%,55%{opacity:0; transform:scale(.4)}70%{opacity:.85; transform:scale(1)}100%{opacity:0; transform:scale(1.35)}}
.render-overlay .el-window{fill:#FFC86B; mix-blend-mode:screen; animation:el-window 1.5s ease-in-out infinite}
@keyframes el-window{0%,100%{opacity:.08}50%{opacity:.42}}
.render-overlay .r-marker circle{fill:var(--sun-copper); stroke:#fff; stroke-width:4}
.render-overlay .r-marker text{fill:#fff; font-family:var(--font-data); font-weight:800; font-size:30px; text-anchor:middle}
.legend{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; position:relative}
.legend li{display:flex; gap:.75rem; align-items:flex-start}
.legend-n{flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--sun-copper); color:#2A1605;
  font-family:var(--font-data); font-weight:800; font-size:.9rem; display:grid; place-items:center}
.legend strong{display:block; color:#fff; font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:.25rem}
.legend div{color:rgba(255,255,255,.66); font-size:.88rem; line-height:1.5}
.howto-note{display:flex; align-items:center; gap:1rem; max-width:780px; margin:2.3rem auto 0;
  background:rgba(62,157,91,.14); border:1px solid rgba(62,157,91,.35); border-radius:var(--radius);
  padding:1.1rem 1.4rem; color:rgba(255,255,255,.88); font-size:.96rem; position:relative}
.howto-badge{flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--moss); color:#fff; display:grid; place-items:center}
.howto-badge svg{width:21px; height:21px}
.btn-outline{background:transparent; color:var(--panel-indigo); border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--panel-indigo); transform:translateY(-2px)}
.header-cta--always{margin-left:auto}
.thanks{padding-block:clamp(3.5rem,9vw,6.5rem); min-height:calc(100vh - 140px)}
.thanks-inner{max-width:760px; text-align:center}
.thanks-check{display:inline-grid; place-items:center; width:84px; height:84px; margin-bottom:1.6rem; border-radius:50%; background:var(--moss-soft); color:var(--moss)}
.thanks-check svg{width:52px; height:52px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.thanks-check circle{opacity:.25}
.thanks-check path{stroke-dasharray:40; stroke-dashoffset:40; animation:tick .7s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.thanks .eyebrow{justify-content:center}
.thanks h1{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem}
.thanks-lead{color:var(--mist); font-size:1.06rem; max-width:600px; margin:0 auto 2.4rem}
.thanks-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:left; counter-reset:t; margin-bottom:2.4rem}
.thanks-steps li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; counter-increment:t}
.thanks-steps li::before{content:counter(t,decimal-leading-zero); display:block; font-family:var(--font-data); font-weight:800; color:var(--sun-copper-ink); margin-bottom:.4rem}
.thanks-steps strong{display:block; font-family:var(--font-display); margin-bottom:.25rem}
.thanks-steps span{color:var(--mist); font-size:.9rem}
.thanks-more{color:var(--mist); margin-bottom:1rem}
.thanks-actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center}
.legal{padding-block:clamp(3rem,7vw,5rem)}
.legal-inner{max-width:780px}
.legal h1{font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.6rem}
.legal-meta{color:var(--mist); margin-bottom:2.2rem}
.legal h2{font-size:1.2rem; margin:2rem 0 .6rem}
.legal p:not([class]){color:#33415A; margin-bottom:.8rem}
.legal ul{display:grid; gap:.45rem; margin:.2rem 0 1rem; padding-left:1.2rem; list-style:disc; color:#33415A}
.legal strong{color:var(--ink)}
.legal .info-list{margin-top:.4rem}
.legal .info-list + p{margin-top:1.4rem}
.legal .info-list a{text-decoration:none}
.legal a{color:var(--sun-copper-ink); text-decoration:underline; text-underline-offset:2px}
.site-footer--slim .footer-bottom{border-top:0}
.footer-bottom .shell{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem}
.footer-bottom a{color:rgba(255,255,255,.66)}
.footer-bottom a:hover{color:var(--sun-glow)}
.nav-item{position:relative; display:flex}
.nav .nav-item > a:not(.btn){padding-right:1.75rem}
.nav .nav-item > a:not(.btn)::after{right:1.75rem}
.nav-item > a::before{content:""; position:absolute; right:.8rem; top:50%; width:6px; height:6px; margin-top:-5px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); opacity:.6}
.subnav{position:absolute; top:100%; left:-.4rem; min-width:250px; padding:.5rem; border-radius:14px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); display:grid; gap:.15rem;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast)}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{opacity:1; visibility:visible; transform:none}
.nav .subnav a{display:flex; flex-direction:column; padding:.65rem .8rem; border-radius:10px}
.nav .subnav a::after{display:none}
.subnav a small{font-size:.78rem; color:var(--mist); font-weight:400; margin-top:.1rem}
.nav a[aria-current="page"]{color:var(--panel-indigo)}
.nav > a[aria-current="page"]::after,.nav-item > a[aria-current="page"]::after{transform:scaleX(1)}
.page-hero{position:relative; isolation:isolate; min-height:clamp(380px,52vh,520px); display:flex; align-items:flex-end; overflow:hidden; color:#fff}
.page-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.page-hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(10,15,28,.86) 0%, rgba(12,19,36,.6) 45%, rgba(14,22,40,.2) 100%), linear-gradient(0deg, rgba(10,15,28,.55), rgba(10,15,28,0) 55%)}
.page-hero .shell{position:relative; padding-block:clamp(2.6rem,7vw,4.2rem)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem); color:#fff; max-width:18ch; margin-bottom:1rem; letter-spacing:-.025em}
.page-hero .lead{color:rgba(255,255,255,.88); max-width:60ch; font-size:clamp(1rem,1.4vw,1.14rem)}
.page-hero .hero-actions{margin:1.6rem 0 0}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.4rem; font-size:.84rem; color:rgba(255,255,255,.66); margin-bottom:1.1rem}
.breadcrumb a{color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3)}
.breadcrumb a:hover{color:#fff}
.breadcrumb li + li::before{content:"/"; margin-right:.4rem; color:rgba(255,255,255,.4)}
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5.5vw,5rem); align-items:center}
.split--rev .split-media{order:-1}
.split-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; box-shadow:0 28px 56px rgba(20,30,51,.16)}
.prose p:not([class]){color:#33415A; max-width:62ch}
.prose p:not([class]) + p{margin-top:.9rem}
.split--top{align-items:start}
.brand-card{margin:clamp(1.6rem,3vw,2.2rem) 0 0; max-width:560px; aspect-ratio:4/3; padding:1.5rem; border-radius:18px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:var(--panel-indigo); box-shadow:var(--shadow-md); font-family:var(--font-display)}
.brand-card::before{content:""; position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:36px 36px; -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent); mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.brand-card > *{position:relative}
.brand-card-mark{width:46%; height:auto}
.brand-card .lg-pv{fill:#7FA3D6}
.brand-card .lg-house{fill:#fff}
.brand-card-name{display:flex; flex-direction:column; font-weight:800; line-height:1; margin-top:clamp(1rem,3vw,1.6rem)}
.brand-card-name span:first-child{font-size:clamp(.72rem,1.6vw,1.02rem); letter-spacing:.32em; margin-right:-.32em; color:#fff}
.brand-card-name span:last-child{font-size:clamp(1.5rem,3.4vw,2.15rem); letter-spacing:.035em; margin-top:.5rem; color:#6CC48A}
.brand-card-tag{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.3rem .7rem;
  margin-top:clamp(.9rem,2.4vw,1.4rem); padding-top:clamp(.8rem,2vw,1.1rem); border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-body); font-size:clamp(.7rem,1.3vw,.8rem); font-weight:500; letter-spacing:.06em; color:rgba(255,255,255,.74)}
.brand-card-tag i{width:4px; height:4px; border-radius:50%; background:var(--sun-copper)}
.prose h2{margin-bottom:1rem}
.prose h3{margin:1.6rem 0 .5rem; font-size:1.2rem}
.check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.6rem; margin-top:1.4rem}
.check-grid li{position:relative; padding-left:2rem; color:#33415A}
.check-grid li::before{content:""; position:absolute; left:0; top:.2rem; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.check-grid strong{display:block; color:var(--ink); font-family:var(--font-display)}
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
.benefit{padding:1.6rem 1.4rem; border-radius:var(--radius); background:#fff; border:1px solid var(--line)}
.benefit .product-icon{margin-bottom:1rem}
.benefit h3{font-size:1.08rem; margin-bottom:.4rem}
.benefit p{color:var(--mist); font-size:.94rem}
.compare-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:#fff}
.compare{width:100%; border-collapse:collapse; min-width:620px}
.compare th,.compare td{padding:1rem 1.2rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:.95rem}
.compare thead th{font-family:var(--font-display); font-size:1rem; background:var(--panel-indigo); color:#fff}
.compare thead th:first-child{background:#1b2742}
.compare tbody th{font-weight:600; color:var(--ink); width:22%; background:var(--daylight)}
.compare td{color:#33415A}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.info-table{width:100%; border-collapse:collapse}
.info-table th,.info-table td{padding:.95rem 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:baseline}
.info-table th{width:34%; color:var(--mist); font-weight:500; font-size:.875rem; padding-right:1rem}
.info-table td{color:var(--ink); font-weight:600; overflow-wrap:break-word}
.split > *{min-width:0}
.info-table a{color:var(--sun-copper-ink)}
.product-detail{display:grid; grid-template-columns:auto 1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:start; padding:clamp(1.6rem,3vw,2.4rem); border-radius:20px; background:#fff; border:1px solid var(--line)}
.product-detail + .product-detail{margin-top:var(--gap)}
.product-detail .product-icon{width:76px; height:76px; border-radius:20px; margin:0}
.product-detail .product-icon svg{width:42px; height:42px}
.product-detail h3{font-size:1.4rem; margin:.3rem 0 .6rem}
.product-detail p{color:var(--mist)}
.product-detail.has-media{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"media head" "media specs";
  column-gap:clamp(1.6rem,4vw,3.5rem); row-gap:1.4rem}
.product-detail.has-media:nth-of-type(even){grid-template-areas:"head media" "specs media"}
.product-detail .product-figure{grid-area:media; position:relative; margin:0; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#E6ECF3}
.product-figure img{width:100%; height:100%; object-fit:cover; display:block}
.product-detail .product-head{grid-area:head; align-self:end}
.product-detail .product-specs{grid-area:specs; align-self:start}
.product-detail .product-figure .product-icon{position:absolute; left:1rem; bottom:1rem; width:60px; height:60px; border-radius:16px;
  background:#fff; box-shadow:var(--shadow-md)}
.product-detail .product-figure .product-icon svg{width:34px; height:34px}
.spec-note{margin-top:.9rem; font-size:.82rem; color:var(--mist)}
.partner-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 3rem; padding:1.8rem; border-radius:var(--radius); background:var(--panel-indigo); color:#fff}
.partner-strip span{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.66)}
.partner-strip strong{font-family:var(--font-display); font-size:1.5rem; letter-spacing:.02em}
.kb-toc{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.4rem; margin-top:1.4rem; counter-reset:toc}
.kb-toc a{display:flex; gap:.8rem; padding:.9rem 1rem; border-radius:12px; background:#fff; border:1px solid var(--line); font-weight:600; color:var(--ink); counter-increment:toc;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.kb-toc a::before{content:counter(toc,decimal-leading-zero); color:var(--sun-copper-ink); font-family:var(--font-data)}
.kb-toc a:hover{border-color:var(--sun-copper); transform:translateX(3px)}
.kb-article{max-width:780px; margin-inline:auto}
.kb-article + .kb-article{margin-top:clamp(2.6rem,6vw,4rem); padding-top:clamp(2.6rem,6vw,4rem); border-top:1px solid var(--line)}
.kb-article h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1rem}
:is(.kb-article,.kb-body) > p{color:#33415A}
:is(.kb-article,.kb-body) > p + p,:is(.kb-article,.kb-body) > p + ul,:is(.kb-article,.kb-body) > ul + p,:is(.kb-article,.kb-body) > .compare-wrap + p{margin-top:.9rem}
.kb-article ul{display:grid; gap:.5rem; margin-top:.9rem; padding-left:1.2rem; list-style:disc; color:#33415A}
.kb-article .compare-wrap{margin-top:1.2rem}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.kb-figure{margin:1.2rem 0 1.4rem}
.kb-figure img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; background:var(--line)}
.compare thead th{white-space:nowrap}
.info-list{display:grid; gap:1rem}
.info-list dt{font-size:.875rem; font-weight:500; color:var(--mist); margin-bottom:.15rem}
.info-list dd{font-weight:600; color:var(--ink); overflow-wrap:break-word}
.info-list a{color:var(--sun-copper-ink)}
.info-list a:hover{text-decoration:underline; text-underline-offset:3px}
.contact-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.contact-card{display:flex; flex-direction:column; padding:clamp(1.4rem,2.4vw,1.8rem); border-radius:var(--radius); background:#fff; border:1px solid var(--line)}
.contact-card h3{font-size:1.15rem; margin-bottom:1.1rem}
.contact-card .link-arrow{margin-top:auto; padding-top:1.2rem}
.note-box{padding:1.3rem 1.5rem; border-radius:var(--radius); background:var(--moss-soft); color:#21402C; border:1px solid rgba(62,157,91,.3)}
.note-box a{color:var(--moss-ink); font-weight:600; text-decoration:underline}
.section-more{margin-top:clamp(1.75rem,3vw,2.5rem); display:flex; justify-content:center}
.cta-band{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem 2rem;
  margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.3rem,3vw,2.2rem);
  border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative}
.cta-band-title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,1.8vw,1.3rem); line-height:1.3; color:var(--ink)}
.cta-band-text{color:var(--mist); font-size:.95rem; margin-top:.35rem; max-width:58ch}
.cta-band > div:first-child{flex:1 1 360px}
.cta-band-actions{display:flex; flex-wrap:wrap; gap:.6rem; flex:0 0 auto}
.cta-band--dark{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none}
.cta-band--dark .cta-band-title{color:#fff}
.cta-band--dark .cta-band-text{color:rgba(255,255,255,.74)}
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr; gap:3rem}
  .about-media{max-width:520px}
  .legend{grid-template-columns:1fr 1fr; gap:1rem}
  .cta-grid{grid-template-columns:1fr; gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr; gap:2rem 1.5rem}
  .footer-brand{grid-column:1/-1}
  .faq-grid{grid-template-columns:1fr; gap:1.5rem}
  .split{grid-template-columns:1fr; gap:2.2rem}
  .split--rev .split-media{order:0}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .product-detail{grid-template-columns:auto 1fr}
  .product-detail > :last-child{grid-column:1/-1}
  .contact-cards{grid-template-columns:1fr 1fr}
  .contact-card:last-child{grid-column:1/-1}
  .nav-item{display:block}
  .nav-item > a::before{display:none}
  .subnav{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 .3rem .9rem; min-width:0; background:transparent}
  .solution-grid{grid-template-columns:1fr 1fr}
  .solution-card:last-child{grid-column:1/-1}
  .solution-card:last-child .solution-media{aspect-ratio:21/9}
  .process-steps{grid-template-columns:1fr 1fr}
  .commit-layout{grid-template-columns:1fr; gap:2.5rem}
  .commit-visual img{aspect-ratio:16/10}
  .commit-visual img[src*="tt2-ban-giao"]{object-position:50% 15%}
  .commit-visual img[src*="tt2-nguyen-tac"]{object-position:50% 72%}
  .project-bento{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .project-tile{min-height:280px}
  .project-tile.tile-lg{grid-column:1/-1; grid-row:auto; min-height:400px}
  .nav, .header-cta:not(.header-cta--always){display:none}
  .nav-toggle{display:flex}
  .site-header.nav-open{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--daylight)}
  .site-header.nav-open .nav{
    display:flex; position:fixed; top:70px; left:0; right:0; bottom:0; flex-direction:column;
    background:var(--daylight); padding:1rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom)); gap:.25rem;
    overflow-y:auto; overscroll-behavior:contain; margin:0;
  }
  .nav-cta{display:grid; gap:.6rem; margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line)}
  .nav-cta .btn{width:100%}
  .site-header.nav-open .nav a:not(.btn){padding:.85rem 1rem; border-radius:10px}
  .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:760px){
  :root{--section-y:clamp(2.9rem,11vw,3.5rem)}
  .m-hide{display:none !important}
  .case{grid-template-columns:1fr; gap:1.4rem}
  .case-facts{gap:.85rem 1rem}
  .real-gallery{grid-template-columns:1fr 1fr; gap:.5rem}
  .real-gallery img{border-radius:10px}
  h2{font-size:clamp(1.55rem,6.6vw,1.9rem)}
  .section-head{margin-bottom:1.6rem}
  .section-intro{font-size:.98rem; margin-top:.7rem}
  .lead{font-size:1rem}
  .eyebrow{font-size:.75rem; margin-bottom:.7rem}
  .hero{min-height:auto; padding-block:1.75rem 2.25rem}
  .hero-inner{padding-block:.5rem}
  .hero-media img{object-position:68% 30%}
  .hero-scrim{background:linear-gradient(180deg, rgba(10,15,28,.28) 0%, rgba(10,15,28,.62) 38%, rgba(10,15,28,.88) 72%, rgba(10,15,28,.92) 100%)}
  .hero-sub{margin-bottom:1.5rem}
  .hero-actions{margin-bottom:1.6rem}
  .hero-actions .btn{flex:1 1 100%}
  .hero-actions .btn-ghost-light{display:none}
  .hero-partners span{flex-basis:100%; margin:0}
  .page-hero{min-height:0}
  .page-hero > img[src*="khu-pho-ven-ho"]{object-position:20% 50%}
  .page-hero .shell{padding-block:2.4rem 2.2rem}
  .page-hero h1{font-size:clamp(1.75rem,7.4vw,2.1rem)}
  .page-hero .lead{font-size:.98rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:1.35rem .7rem}
  .stat-label{font-size:.82rem; margin-top:.5rem}
  .about-grid{gap:2.4rem}
  .about-media img{aspect-ratio:16/10}
  .about-badge{right:12px; bottom:-14px; padding:.75rem .95rem}
  .about-badge-num{font-size:1.6rem}
  .render-wrap{border-radius:14px; padding:.35rem}
  .legend{grid-template-columns:1fr 1fr; gap:.9rem .8rem; margin-top:1.5rem}
  .legend li{gap:.55rem; align-items:center}
  .legend strong{font-size:.9rem; line-height:1.3; margin:0}
  .howto-note{font-size:.9rem; padding:.95rem 1rem; margin-top:1.5rem}
  .solution-grid,.product-grid,.process-steps,.project-bento,.benefit-grid{grid-template-columns:1fr}
  .rail{display:grid; grid-template-columns:none; grid-template-rows:none; grid-auto-flow:column; grid-auto-columns:84%;
    gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 10px; scroll-padding-inline:var(--pad); scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{scroll-snap-align:start; grid-column:auto !important; grid-row:auto !important; min-width:0}
  .js .rail > .reveal{opacity:1; transform:none; transition-delay:0s !important}
  .rail-dots{display:flex; justify-content:center; gap:6px; margin-top:.8rem}
  .rail-dots span{width:6px; height:6px; border-radius:3px; background:#D5CCBE; transition:width .35s var(--ease), background .35s var(--ease)}
  .rail-dots span.on{width:22px; background:var(--sun-copper)}
  .process .rail-dots span{background:rgba(255,255,255,.22)}
  .process .rail-dots span.on{background:var(--sun-glow)}
  .process-steps.rail{grid-auto-columns:78%}
  .benefit-grid.rail{grid-auto-columns:72%}
  .project-bento.rail .project-tile{min-height:340px}
  .solution-card .solution-media,.solution-card:last-child .solution-media{aspect-ratio:16/10}
  .solution-card p,.product-card p{font-size:.94rem}
  .check-grid,.kb-toc,.contact-cards,.product-detail{grid-template-columns:1fr}
  .product-detail.has-media,.product-detail.has-media:nth-of-type(even){grid-template-columns:1fr; grid-template-areas:"media" "head" "specs"; row-gap:1.1rem}
  .product-detail .product-head{align-self:start}
  .check-grid{gap:.85rem}
  .product-detail .product-icon{width:60px; height:60px; border-radius:16px}
  .product-detail .product-icon svg{width:34px; height:34px}
  .compare{min-width:0}
  .compare thead{display:none}
  .compare tr{display:block; padding:1.1rem 1.2rem; border-bottom:1px solid var(--line)}
  .compare tr:last-child{border-bottom:0}
  .compare tbody th,.compare td{display:block; width:auto; padding:0; border:0; background:none}
  .compare tbody th{font-family:var(--font-display); font-size:1.02rem; margin-bottom:.55rem}
  .compare td + td{margin-top:.6rem}
  .compare tbody th{font-weight:700}
  .compare td::before{content:attr(data-label); display:block; margin-bottom:.15rem; font-size:.875rem; font-weight:500; color:var(--mist)}
  .info-table th,.info-table td{display:block; width:auto}
  .info-table th{padding:.9rem 0 .15rem; border-bottom:0}
  .info-table td{padding:0 0 .9rem}
  .commit-item{gap:1rem; padding:1.15rem 0}
  .commit-icon{width:48px; height:48px}
  .commit-item p{font-size:.94rem}
  .quote blockquote{font-size:1.14rem}
  .faq-item summary{font-size:.98rem; padding:.95rem 2.8rem .95rem 1rem}
  .faq-item p{padding:0 1rem 1rem; font-size:.94rem}
  .cta-band{flex-direction:column; align-items:stretch; gap:1rem; padding:1.25rem 1.15rem}
  .cta-band > div:first-child{flex:none}
  .cta-band-actions{display:grid; grid-template-columns:1fr}
  .cta-grid{gap:2rem}
  .cta-channels{margin-top:1.4rem; gap:.6rem}
  .channel{padding:.7rem .9rem .7rem .7rem}
  .channel-ic{width:42px; height:42px}
  .site-footer .footer-brand p{display:none}
  .footer-grid{grid-template-columns:1fr 1fr; gap:1.8rem 1.2rem}
  .footer-contact{grid-column:1/-1}
  .thanks-steps{grid-template-columns:1fr}
  .site-footer{padding-bottom:env(safe-area-inset-bottom)}
  .header-cta--always{width:46px; height:46px; padding:0; justify-content:center}
  .brand-card-tag{flex-direction:column; gap:.3rem}
  .brand-card-tag i{display:none}
  .brand-mark svg{height:38px}
  .brand-line1{font-size:.66rem}
  .brand-line2{font-size:.98rem; margin-top:.24rem}
  .header-cta--always span{display:none}
  .page-simple .site-footer{padding-bottom:env(safe-area-inset-bottom)}
  .dock{right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); gap:8px}
  .dock.is-muted{transform:translateX(130%)}
  .dock-ic{width:44px; height:44px; box-shadow:0 8px 20px rgba(10,16,32,.28), inset 0 0 0 1px rgba(255,255,255,.18)}
  .dock-call .dock-ic{width:50px; height:50px}
  .dock-ic svg{width:22px; height:22px}
  .dock-zalo .dock-ic svg{width:28px; height:28px}
  .dock-call .dock-ic svg{width:22px; height:22px}
  .dock-label{display:none}
  .dock-btn:hover .dock-ic{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
.lp-hero{position:relative; isolation:isolate; overflow:hidden; background:var(--panel-indigo); color:#fff}
.lp-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 18% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 18% 40%,#000 0%,transparent 75%)}
.lp-hero::after{content:""; position:absolute; z-index:-1; width:620px; height:620px; left:-180px; top:-220px; pointer-events:none;
  background:radial-gradient(circle,rgba(224,123,43,.22) 0%,rgba(224,123,43,0) 62%)}
.lp-hero-media{position:absolute; top:0; right:0; bottom:0; width:46%; z-index:-1; overflow:hidden}
.lp-hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:lp-settle 2.4s var(--ease) both}
.lp-hero-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--panel-indigo) 0%,rgba(20,30,51,.72) 12%,rgba(20,30,51,.18) 34%,rgba(20,30,51,0) 52%),
             linear-gradient(0deg,rgba(20,30,51,.45) 0%,rgba(20,30,51,0) 30%)}
@keyframes lp-settle{from{transform:scale(1.06)}to{transform:none}}
.lp-sun{position:absolute; left:6%; top:8%; width:46%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:1; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(244,169,76,.45) 0%,rgba(244,169,76,0) 65%); animation:lp-glow 6s ease-in-out infinite alternate}
@keyframes lp-glow{from{opacity:.55; transform:scale(.94)}to{opacity:1; transform:scale(1.05)}}
.lp-float{position:absolute; z-index:2; display:flex; align-items:center; gap:.8rem; padding:.8rem 1.1rem .8rem .8rem;
  border-radius:16px; background:rgba(20,30,51,.58); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(8,13,24,.35);
  animation:lp-float 7s ease-in-out infinite alternate}
.lp-float--a{left:9%; bottom:11%}
.lp-float--b{left:9%; top:12%; animation-delay:-3.5s}
.lp-float strong{display:block; font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1.25}
.lp-float small{display:block; font-size:.78rem; color:rgba(255,255,255,.74); margin-top:.15rem}
.lp-float-ic{width:42px; height:42px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
  background:rgba(244,169,76,.16); color:var(--sun-glow)}
.lp-float-ic svg{width:24px; height:24px}
@keyframes lp-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.lp-hero-grid{position:relative; display:flex; align-items:center; min-height:clamp(640px, calc(100svh - 70px), 860px);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,4.5rem)}
.lp-hero-copy{width:min(600px, calc(54vw - max(0px, (100vw - var(--shell)) / 2) - var(--pad) - 48px))}
.lp-hero-copy .breadcrumb{margin-bottom:1.4rem}
.lp-title{font-size:clamp(2.3rem,4.1vw,3.55rem); line-height:1.08; letter-spacing:-.03em; color:#fff; margin-bottom:1.1rem; text-wrap:balance}
.lp-title .accent{color:var(--sun-glow)}
.lp-lead{font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.65; color:rgba(255,255,255,.8); max-width:52ch; margin-bottom:1.8rem}
.lp-hero-copy > .h-in:nth-child(2){animation-delay:.08s}
.lp-hero-copy > .h-in:nth-child(3){animation-delay:.16s}
.lp-hero-copy > .h-in:nth-child(4){animation-delay:.26s}
.lp-hero-copy > .h-in:nth-child(5){animation-delay:.38s}
.lp-hero-copy > .h-in:nth-child(6){animation-delay:.5s}
.lp-form-card{background:#fff; color:var(--ink); border-radius:20px; padding:clamp(1.25rem,2.2vw,1.6rem);
  box-shadow:0 30px 70px rgba(6,10,20,.38), 0 0 0 1px rgba(255,255,255,.06); scroll-margin-top:90px}
.lp-form-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; margin-bottom:1rem}
.lp-form-kicker{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800; font-size:1.08rem; color:var(--panel-indigo)}
.lp-live{width:9px; height:9px; border-radius:50%; background:var(--moss); box-shadow:0 0 0 0 rgba(62,157,91,.5); animation:lp-live 2.2s ease-out infinite}
@keyframes lp-live{0%{box-shadow:0 0 0 0 rgba(62,157,91,.5)}70%,100%{box-shadow:0 0 0 9px rgba(62,157,91,0)}}
.lp-form-note{font-size:.84rem; color:var(--mist)}
.lp-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem}
.lp-form .field{margin-bottom:.9rem}
.lp-form .field label{font-size:.84rem}
.lp-form .btn{margin-top:.1rem}
.lp-form .btn svg{transition:transform var(--t-fast) var(--ease)}
.lp-form .btn:hover svg{transform:translateX(4px)}
.lp-form .form-consent{margin-top:.75rem; font-size:.78rem; text-wrap:balance}
.lp-proof{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.4rem; font-size:.92rem; color:rgba(255,255,255,.8)}
.lp-proof li{display:flex; align-items:center; gap:.5rem}
.lp-proof svg{color:#6CC48A; flex-shrink:0}
.lp-proof strong{color:#fff; font-weight:700}
.lp-proof a{color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px}
.lp-proof a:hover{text-decoration-color:var(--sun-glow)}
.lp-brands{background:#fff; border-bottom:1px solid var(--line)}
.lp-brands-row{display:flex; align-items:center; gap:clamp(1.25rem,3vw,3rem); padding-block:1.35rem}
.lp-brands-label{flex-shrink:0; font-family:var(--font-data); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mist)}
.lp-brands-list{flex:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.6rem}
.lp-brands-list li{font-family:var(--font-display); font-weight:800; font-size:1.08rem; letter-spacing:.01em; color:var(--mist); transition:color var(--t-fast) var(--ease)}
.lp-brands-list li:hover{color:var(--panel-indigo)}
.lp-stats{background:#fff; border-bottom:1px solid var(--line)}
.lp-stats-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.lp-stat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.45rem; padding:clamp(1.8rem,3.4vw,2.6rem) 1rem}
.lp-stat + .lp-stat{border-left:1px solid var(--line)}
.lp-stat-num{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,3.8vw,3.1rem); line-height:1; letter-spacing:-.03em; color:var(--panel-indigo); font-variant-numeric:tabular-nums}
.lp-stat-num small{font-size:.38em; font-weight:700; letter-spacing:0; color:var(--sun-copper-ink); margin-left:.3rem}
.lp-stat-label{font-size:.9rem; color:var(--mist)}
.lp-section{padding-block:var(--section-y) calc(var(--section-y) * 1.08)}
.lp-head{max-width:720px; margin-bottom:clamp(2rem,4vw,3rem)}
.lp-head h2{text-wrap:balance}
.lp-intro{margin-top:.9rem; color:var(--mist); font-size:1.02rem; max-width:60ch}
.lp-intro a{color:var(--sun-copper-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.lp-head--light h2{color:#fff}
.lp-head--light .lp-intro{color:rgba(255,255,255,.74)}
.lp-head--split{max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem clamp(1rem,2vw,1.5rem); align-items:end}
.lp-head--split > div{grid-column:span 2}
.lp-process .lp-head--split{grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(1.25rem,2.4vw,2rem)}
.lp-process .lp-head--split > *{grid-column:span 2}
.lp-head--split h2{max-width:20ch}
.lp-head--split .lp-intro{margin-top:0; padding-bottom:.35rem}
.lp-get-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.lp-get-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.6rem,2.6vw,2.1rem); transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease)}
.lp-get-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#EAD9C4}
.lp-get-card h3{font-size:1.2rem; margin:1.4rem 0 .6rem; color:var(--ink)}
.lp-get-card p{color:var(--mist); font-size:.97rem; line-height:1.65}
.lp-ic{width:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:var(--sun-copper);
  background:linear-gradient(140deg,#FFF4E8 0%,#FBE3CC 100%); box-shadow:inset 0 0 0 1px rgba(224,123,43,.14);
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease)}
.lp-ic svg{width:30px; height:30px}
.lp-get-card:hover .lp-ic{transform:translateY(-2px) scale(1.06); box-shadow:inset 0 0 0 1px rgba(224,123,43,.2), 0 10px 22px rgba(224,123,43,.22)}
.lp-tag{display:flex; align-items:center; gap:.5rem; margin-top:auto; padding-top:1.2rem; border-top:1px dashed var(--line);
  color:var(--moss-ink) !important; font-weight:600; font-size:.9rem !important}
.lp-get-card p:not(.lp-tag){margin-bottom:1.4rem}
.lp-tag svg{flex-shrink:0}
.lp-segs{background:#fff}
.lp-seg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.lp-seg{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease)}
.lp-seg:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.lp-seg-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--daylight-2)}
.lp-seg-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.lp-seg:hover .lp-seg-media img{transform:scale(1.05)}
.lp-seg-ic{position:absolute; left:1.1rem; bottom:-1px; width:52px; height:52px; border-radius:14px 14px 0 0; display:grid; place-items:center;
  background:#fff; color:var(--sun-copper)}
.lp-seg-ic svg{width:28px; height:28px}
.lp-seg-body{flex:1; display:flex; flex-direction:column; padding:1.4rem clamp(1.3rem,2vw,1.6rem) 1.6rem}
.lp-seg-body h3{font-size:1.22rem; color:var(--ink); margin-bottom:.4rem}
.lp-seg-body > p{color:var(--mist); font-size:.95rem; margin-bottom:1.1rem}
.lp-seg-facts{display:grid; gap:.55rem; margin-bottom:1.5rem}
.lp-seg-facts li{display:flex; align-items:center; gap:.55rem; font-size:.94rem; color:#2B3651}
.lp-seg-facts svg{color:var(--moss); flex-shrink:0}
.lp-seg-actions{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.lp-link{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; font-weight:600; font-size:.95rem; color:var(--panel-indigo); transition:gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.lp-link:hover{gap:.65rem; color:var(--sun-copper-ink)}
.lp-process{position:relative; isolation:isolate; overflow:hidden; background:var(--panel-indigo); color:#fff}
.lp-process::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--cell-line) 1px,transparent 1px),linear-gradient(90deg,var(--cell-line) 1px,transparent 1px);
  background-size:56px 56px; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%)}
.lp-process::after{content:""; position:absolute; z-index:-1; right:-200px; top:-260px; width:640px; height:640px;
  background:radial-gradient(circle,rgba(224,123,43,.2) 0%,rgba(224,123,43,0) 62%)}
.lp-steps{--g:clamp(1.25rem,2.4vw,2rem); position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--g)}
.lp-steps::before{content:""; position:absolute; left:30px; right:calc((100% - 3 * var(--g)) / 4 - 30px); top:30px; height:2px;
  background:linear-gradient(90deg,var(--sun-glow) 0%,rgba(244,169,76,.25) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease) .2s}
.lp-steps.in::before{transform:scaleX(1)}
.lp-step{position:relative}
.lp-step-node{position:relative; z-index:1; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel-indigo-2); color:var(--sun-glow); border:1px solid rgba(244,169,76,.35);
  box-shadow:0 0 0 8px var(--panel-indigo); transition:transform var(--t-med) var(--ease), background var(--t-med) var(--ease)}
.lp-step-node svg{width:28px; height:28px}
.lp-step:hover .lp-step-node{transform:scale(1.07); background:#26385C}
.lp-step-no{margin:1.4rem 0 .4rem; font-family:var(--font-data); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sun-glow)}
.lp-step h3{font-size:1.15rem; color:#fff; margin-bottom:.5rem}
.lp-step p{font-size:.94rem; line-height:1.65; color:rgba(255,255,255,.74)}
.lp-w-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,5rem); align-items:stretch}
.lp-w-media{position:relative; margin:0; min-height:420px}
.lp-w-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 8%; border-radius:22px; box-shadow:var(--shadow-lg)}
.lp-w-badge{position:absolute; right:clamp(1rem,2.5vw,1.6rem); bottom:clamp(-1.8rem,-2.5vw,-1.2rem); display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.3rem; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); font-size:.86rem; line-height:1.35; color:var(--mist)}
.lp-w-badge-num{font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.04em; color:var(--sun-copper)}
.lp-w-list{border-top:1px solid var(--line)}
.lp-w-row{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line); align-items:baseline}
.lp-w-row dt{font-weight:600; color:var(--ink)}
.lp-w-row dd strong{display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--panel-indigo)}
.lp-w-row dd span{display:block; font-size:.88rem; color:var(--mist); margin-top:.15rem}
.lp-legal{margin-top:1.4rem; font-size:.84rem; color:var(--mist)}
.lp-faq-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.lp-faq{background:#fff}
.lp-faq .lp-head{position:sticky; top:110px; margin-bottom:0}
.lp-final{position:relative; isolation:isolate; overflow:hidden; color:#fff; padding-block:clamp(5rem,10vw,8.5rem)}
.lp-final > img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.lp-final::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(20,30,51,.94) 0%,rgba(20,30,51,.82) 42%,rgba(20,30,51,.35) 100%)}
.lp-final-inner h2{color:#fff; max-width:22ch; margin-bottom:1rem}
.lp-final-inner > p:not(.eyebrow){max-width:52ch; color:rgba(255,255,255,.8); font-size:1.05rem; margin-bottom:2rem}
.lp-final-actions{display:flex; flex-wrap:wrap; gap:.8rem}
.lp-get-grid > .reveal:nth-child(2),.lp-seg-grid > .reveal:nth-child(2),.lp-steps > .reveal:nth-child(2),.lp-stats-grid > .reveal:nth-child(2){transition-delay:.1s}
.lp-get-grid > .reveal:nth-child(3),.lp-seg-grid > .reveal:nth-child(3),.lp-steps > .reveal:nth-child(3),.lp-stats-grid > .reveal:nth-child(3){transition-delay:.2s}
.lp-steps > .reveal:nth-child(4),.lp-stats-grid > .reveal:nth-child(4){transition-delay:.3s}
@media (max-width:1023px){
  .lp-hero-media{position:relative; width:100%; height:clamp(280px,56vw,460px)}
  .lp-hero-media::after{background:linear-gradient(180deg,rgba(20,30,51,0) 45%,var(--panel-indigo) 100%)}
  .lp-hero-media img{object-position:50% 38%}
  .lp-float--a{left:auto; right:4%; bottom:22%}
  .lp-float--b{display:none}
  .lp-hero-grid{min-height:0; padding-block:0 3.25rem; margin-top:-3.5rem}
  .lp-hero-copy{width:100%; max-width:640px}
  .lp-hero::after{display:none}
  .lp-get-grid{grid-template-columns:1fr; max-width:640px}
  .lp-seg-grid:not(.rail){grid-template-columns:1fr 1fr}
  .lp-steps{grid-template-columns:1fr 1fr; row-gap:2.5rem}
  .lp-steps::before{display:none}
  .lp-w-grid,.lp-faq-grid{grid-template-columns:1fr}
  .lp-w-media{max-width:640px; min-height:0; aspect-ratio:4/3}
  .lp-faq .lp-head{position:static; margin-bottom:1.5rem}
  .lp-head--split,.lp-process .lp-head--split{grid-template-columns:1fr; gap:.9rem}
  .lp-head--split > *,.lp-process .lp-head--split > *{grid-column:auto}
  .lp-brands-row{flex-direction:column; align-items:flex-start; gap:.8rem}
  .lp-brands-list{justify-content:flex-start; gap:.5rem 1.4rem}
}
@media (max-width:760px){
  .lp-hero-media{height:clamp(230px,62vw,320px)}
  .lp-float{display:none}
  .lp-hero-copy .breadcrumb{display:none}
  .lp-hero-grid{margin-top:-2.75rem; padding-bottom:2.75rem}
  .lp-title{font-size:clamp(1.95rem,8.4vw,2.4rem)}
  .lp-lead{margin-bottom:1.4rem}
  .lp-fields{grid-template-columns:1fr}
  .lp-form-head{flex-direction:column; align-items:flex-start}
  .lp-proof{flex-direction:column; gap:.55rem}
  .lp-brands-list li{font-size:.98rem}
  .lp-stats-grid{grid-template-columns:1fr 1fr}
  .lp-stat:nth-child(3){border-left:none}
  .lp-stat:nth-child(n+3){border-top:1px solid var(--line)}
  .lp-steps{grid-template-columns:1fr; row-gap:0}
  .lp-step{display:grid; grid-template-columns:60px 1fr; column-gap:1.1rem; padding-bottom:1.8rem}
  .lp-step::before{content:""; position:absolute; left:29px; top:60px; bottom:0; width:2px; background:linear-gradient(180deg,rgba(244,169,76,.6),rgba(244,169,76,.12))}
  .lp-step:last-child::before{display:none}
  .lp-step-node{grid-row:span 3}
  .lp-step-no{margin:.35rem 0 .3rem}
  .lp-seg-grid.rail{grid-template-columns:none}
  .lp-seg-actions{flex-wrap:wrap}
  .lp-w-badge{right:.8rem; bottom:-1.4rem; padding:.8rem 1rem}
  .lp-w-badge-num{font-size:2.1rem}
  .lp-w-row{grid-template-columns:1fr; gap:.25rem}
  .lp-final::before{background:linear-gradient(180deg,rgba(20,30,51,.9) 0%,rgba(20,30,51,.8) 100%)}
  .lp-final-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .lp-hero-media img,.lp-sun,.lp-float,.lp-live{animation:none}
  .lp-steps::before{transform:none}
}
.kb-updated{max-width:780px; margin:0 auto 1.6rem; font-size:.86rem; color:var(--mist)}
.compare--tight{min-width:0}
.compare--tight tbody th{width:auto}
.kb-bars{list-style:none; margin:1.2rem 0 0; padding:1rem 1.2rem; display:grid; gap:.45rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.kb-bars li{display:grid; grid-template-columns:4.6rem 1fr 2.4rem; align-items:center; gap:.8rem; font-size:.9rem}
.kb-bar-m{color:var(--mist)}
.kb-bar{height:10px; border-radius:999px; background:var(--daylight-2); position:relative; overflow:hidden}
.kb-bar::after{content:""; position:absolute; inset:0; width:calc(var(--v) * 100%); border-radius:inherit;
  background:linear-gradient(90deg,var(--sun-glow),var(--sun-copper))}
.kb-bar-v{text-align:right; font-family:var(--font-display); font-weight:700; color:var(--panel-indigo); font-variant-numeric:tabular-nums}
.kb-sources{padding:1.4rem 1.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.kb-sources h2{font-size:1.15rem !important; margin-bottom:.7rem !important}
.kb-sources ul{margin-top:0 !important}
.kb-sources a{color:var(--cell-blue); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.kb-sources p{margin-top:.8rem; font-size:.88rem; color:var(--mist)}
.kb-article + .kb-article.kb-sources{padding-top:1.4rem}
@media (max-width:760px){
  .compare--tight thead{display:table-header-group}
  .compare--tight tr{display:table-row; padding:0}
  .compare--tight tbody th,.compare--tight td{display:table-cell; padding:.7rem .75rem; border-bottom:1px solid var(--line); font-size:.9rem}
  .compare--tight thead th{padding:.7rem .75rem; font-size:.84rem; white-space:normal}
  .compare--tight tbody th{font-family:var(--font-body); font-size:.9rem; margin:0; background:var(--daylight)}
  .compare--tight td + td{margin-top:0}
  .compare--tight td::before{content:none}
  .compare--tight tr:last-child th,.compare--tight tr:last-child td{border-bottom:0}
  .kb-bars{padding:.9rem 1rem}
  .kb-bars li{grid-template-columns:4.2rem 1fr 2.2rem; gap:.6rem; font-size:.86rem}
}
.kb-links{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; margin-top:1.4rem}
.kb-links-label{font-family:var(--font-data); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); margin-right:.2rem}
.kb-links a{display:inline-flex; align-items:center; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:.9rem; font-weight:500; color:var(--panel-indigo); transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.kb-links a:hover{border-color:var(--sun-copper); color:var(--sun-copper-ink)}
.nw{white-space:nowrap}
.kb-acc > summary{list-style:none}
.kb-acc > summary::-webkit-details-marker{display:none}
@media (min-width:761px){
  .kb-acc > summary{pointer-events:none}
}
@media (max-width:760px){
  .kb-toc-sec{display:none}
  .kb-updated{margin:0 0 .9rem}
  .kb-article + .kb-article{margin-top:.75rem; padding-top:0; border-top:0}
  .kb-acc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:0 1.1rem; scroll-margin-top:84px}
  .kb-acc[open]{box-shadow:var(--shadow-sm); border-color:#F0DFC8; padding-bottom:1.2rem}
  .kb-acc > summary{position:relative; cursor:pointer; padding:1.05rem 2rem 1.05rem 0}
  .kb-acc > summary h2{font-size:1.08rem !important; margin:0 !important; line-height:1.35}
  .kb-acc > summary::after{content:""; position:absolute; right:.15rem; top:50%; width:9px; height:9px; margin-top:-7px;
    border-right:2px solid var(--sun-copper); border-bottom:2px solid var(--sun-copper); transform:rotate(45deg); transition:transform var(--t-fast) var(--ease)}
  .kb-acc[open] > summary::after{transform:rotate(225deg); margin-top:-2px}
  .kb-sources{margin-top:.75rem !important}
}
.compare--tight tbody th{white-space:nowrap}
.kb-body > :is(ol,ul,figure,div,dl) + p{margin-top:1rem}
.kb-body > p + :is(ol,figure){margin-top:1.2rem}
.kb-acc > summary h2{margin-bottom:1rem}
.kb-article p a,.kb-article li a{color:var(--sun-copper-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(160,79,23,.35); text-underline-offset:3px}
.kb-article p a:hover,.kb-article li a:hover{text-decoration-color:currentColor}
.stat-label,.lp-stat-label{text-wrap:balance}