:root{
        --paper:#F4F6F7; --paper-2:#EBEFF1; --card:#FFFFFF;
        --ink:#141E26; --muted:#3C4954; --muted-2:#586773;
        --line:#D9DFE3; --line-strong:#BCC7CD; --hairline:#CFD7DC;
        --panel:#0E2233; --panel-2:#143049; --panel-line:#26445C;
        --blue:#1F6FB2; --blue-ink:#155A94; --blue-soft:#E1EEF8;
        --amber:#E8A83E; --amber-ink:#B9822B;
        --on-panel:#F2F6F9; --on-panel-mut:#B2C4D2;
        --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
        --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
        --sh:0 16px 44px -18px rgba(14,34,51,.32);
        --sh-s:0 4px 14px -8px rgba(14,34,51,.25);
        color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
        :root{
                --paper:#101820; --paper-2:#0B1218; --card:#16222D;
                --ink:#E9EEF2; --muted:#A2B2BE; --muted-2:#7E8F9B;
                --line:#243542; --line-strong:#33495A; --hairline:#20303C;
                --panel:#0A1926; --panel-2:#122536; --panel-line:#24425A;
                --blue:#4C9BD8; --blue-ink:#2F7FBF; --blue-soft:#152C3F;
                --amber:#EDB055; --amber-ink:#EDB055;
                --on-panel:#F2F6F9; --on-panel-mut:#B2C4D2;
                --sh:0 16px 44px -18px rgba(0,0,0,.7);
                --sh-s:0 4px 14px -8px rgba(0,0,0,.5);
                color-scheme:dark;
        }
  }
  :root[data-theme="dark"]{
        --paper:#101820; --paper-2:#0B1218; --card:#16222D;
        --ink:#E9EEF2; --muted:#A2B2BE; --muted-2:#7E8F9B;
        --line:#243542; --line-strong:#33495A; --hairline:#20303C;
        --panel:#0A1926; --panel-2:#122536; --panel-line:#24425A;
        --blue:#4C9BD8; --blue-ink:#2F7FBF; --blue-soft:#152C3F;
        --amber:#EDB055; --amber-ink:#EDB055;
        --on-panel:#F2F6F9; --on-panel-mut:#B2C4D2;
        --sh:0 16px 44px -18px rgba(0,0,0,.7);
        --sh-s:0 4px 14px -8px rgba(0,0,0,.5);
        color-scheme:dark;
  }
  :root[data-theme="light"]{
        --paper:#F4F6F7; --paper-2:#EBEFF1; --card:#FFFFFF;
        --ink:#141E26; --muted:#3C4954; --muted-2:#586773;
        --line:#D9DFE3; --line-strong:#BCC7CD; --hairline:#CFD7DC;
        --panel:#0E2233; --panel-2:#143049; --panel-line:#26445C;
        --blue:#1F6FB2; --blue-ink:#155A94; --blue-soft:#E1EEF8;
        --amber:#E8A83E; --amber-ink:#B9822B;
        --on-panel:#F2F6F9; --on-panel-mut:#B2C4D2;
        --sh:0 16px 44px -18px rgba(14,34,51,.32);
        --sh-s:0 4px 14px -8px rgba(14,34,51,.25);
        color-scheme:light;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  p{margin:0;}
  h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.012em; text-wrap:balance; font-weight:680;}
  ::selection{background:var(--blue); color:#fff;}
  :focus-visible{outline:2.5px solid var(--blue); outline-offset:2px; border-radius:3px;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  .page{display:none;}
  .page.active{display:block;}

  .idx{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--blue); font-weight:700;}
  .sec{padding:clamp(46px,5.2vw,82px) 0;}
  .sec + .sec{border-top:1px solid var(--hairline);}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:30px;}
  /* Reveal mượt khi cuộn tới (theme.js thêm .in) */
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.68,.26,1), transform .7s cubic-bezier(.22,.68,.26,1); will-change:opacity, transform;}
  .rv.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){ .rv{opacity:1 !important; transform:none !important; transition:none !important;} }
  .sec-head h2{font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.25; margin-top:9px;}
  .sec-link{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); text-decoration:none; white-space:nowrap; position:relative; padding-bottom:3px; flex:none;}
  .sec-link::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  .sec-link:hover::after{transform:scaleX(1);}
  .crumb{padding:14px 0 0; font:600 12.5px var(--mono); color:var(--muted-2);}
  .crumb a{color:var(--blue); text-decoration:none;}
  .crumb a:hover{text-decoration:underline;}
  .page-head{padding:10px 0 22px;}
  .page-head h1{font-size:clamp(1.45rem,2.3vw,1.9rem); font-weight:700; margin-top:8px;}
  .page-head p{color:var(--muted); font-size:15.5px; max-width:68ch; margin-top:10px; line-height:1.7;}

  .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; font:700 15px var(--sans); border-radius:6px; padding:13px 24px; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;}
  .btn:hover{transform:translateY(-2px); box-shadow:var(--sh-s);}
  .btn:active{transform:translateY(0);}
  .btn-blue{background:var(--blue); color:#fff;}
  .btn-blue:hover{background:var(--blue-ink);}
  .btn-amber{background:var(--amber); color:#0E2233;}
  .btn-amber:hover{background:#f0b955;}
  .btn-line{border-color:var(--line-strong); color:var(--ink); background:transparent;}
  .btn-line:hover{border-color:var(--blue); color:var(--blue);}
  .btn-panel{border-color:var(--panel-line); color:var(--on-panel); background:transparent;}
  .btn-panel:hover{border-color:var(--amber); color:var(--amber); box-shadow:none;}

  .skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--blue); color:#fff; padding:10px 18px; border-radius:6px; font:700 14px var(--sans); text-decoration:none; transition:top .2s ease;}
  .skip:focus{top:12px;}

  header.site{position:sticky; top:0; z-index:80;}
  .hrow1{background:var(--paper); border-bottom:1px solid var(--line);}
  .hrow1 .wrap{display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px; transition:padding .25s ease;}
  header.site.scrolled .hrow1 .wrap{padding-top:8px; padding-bottom:8px;}
  .logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none;}
  .logo-mark{width:40px; height:40px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font:800 18px var(--sans); border-radius:8px; transition:transform .2s ease;}
  .logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05);}
  .logo-word{font:750 21px/1 var(--sans); letter-spacing:-.02em; color:var(--ink);}
  .logo-word small{display:block; font:600 8.5px var(--mono); letter-spacing:.24em; color:var(--muted-2); margin-top:4px;}
  .searchbox{position:relative; flex:1 1 320px; max-width:430px; margin:0 auto;}
  .searchbox input{width:100%; height:44px; border-radius:99px; border:1.5px solid var(--line-strong); background:var(--card); padding:0 18px 0 44px; font:500 14.5px var(--sans); color:var(--ink); outline:none; transition:border-color .18s ease, box-shadow .18s ease;}
  .searchbox input:hover{border-color:var(--blue);}
  .searchbox input:focus{border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-soft);}
  .searchbox svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted-2); pointer-events:none;}
  .sugg{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh); overflow:hidden; display:none; z-index:95;}
  .sugg.show{display:block;}
  .sugg a{display:flex; justify-content:space-between; gap:10px; padding:11px 16px; font:550 14px var(--sans); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
  .sugg a:last-child{border-bottom:0;}
  .sugg a:hover{background:var(--blue-soft); color:var(--blue-ink);}
  .sugg a small{font:600 11px var(--mono); color:var(--muted-2);}
.sugg-empty{padding:14px 16px; font:500 13px var(--sans); color:var(--muted); text-align:center;}
  .nav-actions{display:flex; align-items:center; gap:16px; flex:none;}
  .hotline{text-align:right; line-height:1.3;}
  .hotline span{display:block; font:600 10px var(--mono); letter-spacing:.16em; color:var(--muted-2); text-transform:uppercase;}
  .hotline a{font:700 16.5px var(--mono); color:var(--ink); text-decoration:none; transition:color .16s;}
  .hotline a:hover{color:var(--blue);}

  .navbar{background:var(--panel); border-bottom:1px solid var(--panel-line);}
  .navbar .wrap{display:flex; align-items:stretch; padding:0 32px;}
  .navbar ul.top{display:flex; list-style:none; margin:0; padding:0; flex:1;}
  .navbar ul.top > li{position:relative;}
  .navbar ul.top > li > a{display:flex; align-items:center; gap:7px; padding:15px 22px; font:650 16px var(--sans); color:var(--on-panel); text-decoration:none; white-space:nowrap; position:relative; transition:background .18s ease, color .18s ease;}
  .navbar ul.top > li > a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  .navbar ul.top > li > a:hover, .navbar ul.top > li:focus-within > a{background:var(--panel-2); color:var(--amber); text-shadow:.4px 0 0 currentColor;}
  .navbar ul.top > li > a:hover::after, .navbar ul.top > li:focus-within > a::after{transform:scaleX(1);}
  .navbar .car{font-size:10px; color:var(--on-panel-mut); transition:transform .2s ease, color .2s ease;}
  .navbar li:hover .car{transform:rotate(180deg); color:var(--amber);}
  .navbar .hot-tab{color:var(--amber) !important;}
  .dd{position:absolute; top:100%; left:0; z-index:90; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility .22s;}
  .dd.right{left:auto; right:0;}
  .navbar li:hover > .dd, .navbar li:focus-within > .dd{opacity:1; visibility:visible; transform:translateY(0);}
  .ddp{background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); padding:26px 30px; display:flex; gap:44px; border-radius:0 0 12px 12px; border-top:3px solid var(--amber);}
  .ddc{min-width:215px;}
  .ddc h5{margin:0 0 12px; font:700 11px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--blue);}
  .ddc a{display:block; padding:7px 0; font:550 15px var(--sans); color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s ease;}
  .ddc a:hover{color:var(--amber-ink); text-shadow:.5px 0 0 currentColor;}
  .dd-cta{background:var(--panel); border-radius:10px; padding:18px 20px; min-width:215px; display:flex; flex-direction:column; gap:8px; justify-content:center;}
  .dd-cta b{color:var(--on-panel); font:750 15.5px var(--sans);}
  .dd-cta span{color:var(--on-panel-mut); font:500 13px var(--sans); line-height:1.5;}
  .dd-cta a{margin-top:6px; color:var(--amber); font:700 13.5px var(--mono); text-decoration:none;}
  .dd-cta a:hover{letter-spacing:.05em;}

  .burger{display:none; flex:none; width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:8px; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
  .burger i{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
  .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .mnav{display:none; background:var(--card); border-bottom:1px solid var(--line-strong); box-shadow:var(--sh);}
  .mnav.open{display:block;}
  .mnav a.mtop{display:block; padding:15px 32px; font:700 16.5px var(--sans); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}

  .hero{background:var(--panel); color:var(--on-panel); border-bottom:1px solid var(--panel-line); position:relative; overflow:hidden;}
  .hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:46px 46px;}
  .hero .wrap{position:relative; z-index:1;}
  .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; padding:clamp(30px,3.8vw,50px) 0;}
  .hero-kicker{display:flex; align-items:center; gap:14px; font:650 12px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:18px;}
  .hero-kicker::before{content:""; width:30px; height:2.5px; background:var(--amber);}
  .hero h1{color:var(--on-panel); font-size:clamp(1.75rem,2.8vw,2.4rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:14px;}
  .hero h1 em{font-style:normal; color:var(--amber);}
  .hero-lead{color:var(--on-panel-mut); font-size:16px; line-height:1.7; max-width:44ch; margin-bottom:24px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  .hero-facts{display:flex; border-top:1px solid var(--panel-line); flex-wrap:wrap;}
  .hf{padding:16px 26px 2px 0; margin-right:26px; border-right:1px dashed var(--panel-line);}
  .hf:last-child{border-right:0;}
  .hf b{display:block; font:700 22px var(--mono); color:var(--amber); font-variant-numeric:tabular-nums;}
  .hf span{font:550 12.5px var(--sans); color:var(--on-panel-mut);}
  .analyzer{position:relative; border:1px solid var(--panel-line); background:var(--panel-2); border-radius:12px; overflow:hidden; box-shadow:var(--sh);}
  .an-head{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--panel-line); font:650 11px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--on-panel-mut);}
  .an-head .lamps{display:flex; gap:7px;}
  .an-head .lamps i{width:9px; height:9px; border-radius:50%; background:var(--panel-line);}
  .an-head .lamps i.on{background:var(--amber); box-shadow:0 0 8px var(--amber);}
  .analyzer canvas{display:block; width:100%; height:215px;}
  .an-freq{display:flex; justify-content:space-between; padding:0 18px 7px; font:600 10px var(--mono); color:var(--on-panel-mut);}
  .an-foot{display:flex; justify-content:space-between; padding:10px 18px; border-top:1px solid var(--panel-line); font:650 11px var(--mono); color:var(--on-panel-mut);}
  .an-foot b{color:var(--on-panel); font-weight:650;}

  .groups{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .group{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .group::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
  .group:hover{transform:translateY(-4px); box-shadow:var(--sh-s); border-color:var(--blue);}
  .group:hover::before{transform:scaleX(1);}
  .group h3{font-size:16.5px; font-weight:700;}
  .group > p{color:var(--muted); font-size:13.5px; line-height:1.55;}
  .group ol{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column;}
  .group ol a{display:flex; align-items:center; gap:9px; padding:7.5px 0; font:600 14px var(--sans); color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--line); transition:color .16s ease, padding-left .16s ease;}
  .group ol li:last-child a{border-bottom:0;}
  .group ol a::before{content:"go"; font-size:12px; color:var(--line-strong); transition:color .16s ease;}
  .group ol a:hover{color:var(--blue-ink); padding-left:6px;}
  .group ol a:hover::before{color:var(--blue);}
  .group .g{margin-top:auto; padding-top:10px; font:700 12.5px var(--mono); color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
  .group .g i{font-style:normal; transition:transform .2s ease;}
  .group .g:hover i{transform:translateX(5px);}

  /* ===== HERO SLIDESHOW — đơn giản, chỉ ảnh + nhãn ===== */
  .heroS{position:relative; aspect-ratio:16/6; min-height:360px; max-height:560px; overflow:hidden; border-bottom:1px solid var(--panel-line);}
  .heroS-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.04); transition:opacity 1s ease, transform 6s ease;}
  .heroS-bg.is-on{opacity:1; transform:scale(1);}
  .heroS-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,14,23,.78) 0%, rgba(6,14,23,.15) 42%, rgba(6,14,23,.28) 100%);}
  .heroS-cap{position:absolute; left:0; bottom:26px; z-index:3; opacity:0; transform:translateY(8px); transition:opacity .7s ease .15s, transform .7s ease .15s; color:#fff; padding-left:max(32px,calc((100% - 1180px)/2 + 32px)); pointer-events:none;}
  .heroS-bg.is-on .heroS-cap{opacity:1; transform:none;}
  .heroS-cap i{display:block; font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:7px;}
  .heroS-cap b{font:700 clamp(19px,2.3vw,27px)/1.2 inherit; letter-spacing:-.01em;}
  .heroS-tag{position:absolute; top:22px; z-index:3; left:max(32px,calc((100% - 1180px)/2 + 32px)); font:700 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(9,20,32,.5); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 15px;}
  .heroS-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.32); background:rgba(9,20,32,.45); color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:border-color .2s, background .2s;}
  .heroS-nav:hover{border-color:var(--amber); background:rgba(9,20,32,.75);}
  .heroS-nav.prev{left:20px;} .heroS-nav.next{right:20px;}
  .heroS-dots{position:absolute; bottom:24px; right:32px; z-index:4; display:flex; gap:9px;}
  .heroS-dots button{width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:width .25s, background .25s;}
  .heroS-dots button.on{background:var(--amber); width:24px; border-radius:5px;}
  @media(max-width:720px){ .heroS{aspect-ratio:4/3; max-height:none;} .heroS-nav{display:none;} .heroS-dots{left:50%; right:auto; transform:translateX(-50%);} }

  .studio{background:var(--panel); color:var(--on-panel); border-top:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line);}
  .studio .wrap{padding-top:clamp(46px,5.2vw,82px); padding-bottom:clamp(46px,5.2vw,82px);}
  .studio .idx{color:var(--amber);}
  .studio h2{color:var(--on-panel); font-size:clamp(1.25rem,1.8vw,1.6rem); margin:11px 0 13px;}
  .studio p.lead{color:var(--on-panel-mut); font-size:15px; line-height:1.7; max-width:72ch;}
  .ease{display:grid; grid-template-columns:340px 1fr; gap:20px; margin-top:22px; align-items:start;}
  .cfgpanel{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; overflow:hidden;}
  .cfgpanel .console-head{display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid var(--panel-line);}
  .cfgpanel .console-head h3{font:700 14.5px var(--sans); color:var(--on-panel);}
  .cfgpanel .badge{font:700 10px var(--mono); letter-spacing:.1em; background:var(--amber); color:#0E2233; padding:4px 10px; border-radius:4px;}
  .cfgpanel .body{padding:15px 18px 18px;}
  .cf{margin-bottom:11px;}
  .cf label{display:block; font:650 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-mut); margin-bottom:6px;}
  .cf select,.cf input{width:100%; background:var(--panel); border:1.5px solid var(--panel-line); border-radius:6px; color:var(--on-panel); font:550 14px var(--sans); padding:9px 11px; outline:none; transition:border-color .18s ease;}
.cf select:hover,.cf input:hover{border-color:color-mix(in srgb, var(--panel-line) 40%, var(--amber) 60%);}
.cf select:focus,.cf input:focus{border-color:var(--amber);}
.cf select option{color:#17222B; background:#fff;}
.cf2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cfgpanel .btn{width:100%; justify-content:center; margin-top:4px;}
.simpanel{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; overflow:hidden;}
.sim-head{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--panel-line); font:650 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-mut);}
.sim-head b{color:var(--amber);}
#ease{display:block; width:100%; height:380px; cursor:crosshair; touch-action:none; background:var(--panel);}
.sim-stats{display:flex; flex-wrap:wrap; border-top:1px solid var(--panel-line);}
.ss{flex:1 1 120px; padding:11px 16px; border-right:1px dashed var(--panel-line);}
.ss:last-child{border-right:0;}
.ss b{display:block; font:700 16px var(--mono); color:var(--on-panel); font-variant-numeric:tabular-nums;}
.ss b.ok{color:#5fd08a;}
.ss b.bad{color:#ef7a63;}
.ss b.hot{color:var(--amber);}
.ss span{font:550 10.5px var(--mono); letter-spacing:.06em; color:var(--on-panel-mut); text-transform:uppercase;}
.sim-note{padding:10px 18px 13px; font:500 12px var(--sans); color:var(--on-panel-mut); line-height:1.55; border-top:1px solid var(--panel-line);}
.sim-note b{color:var(--amber); font-weight:600;}
.lead-strip{display:flex; gap:10px; padding:12px 18px; border-top:1px solid var(--panel-line); flex-wrap:wrap; align-items:center;}
.lead-strip input{flex:1 1 150px; background:var(--panel); border:1.5px solid var(--panel-line); border-radius:6px; color:var(--on-panel); font:550 14px var(--sans); padding:9px 11px; outline:none;}
.lead-strip input:focus{border-color:var(--amber);}
.lead-ok{display:none; font:600 13px var(--sans); color:var(--amber); padding:0 18px 12px; line-height:1.5;}
.lead-ok.show{display:block;}
.fbar{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:22px;}
.fbar .cf{margin:0; min-width:160px; flex:1 1 160px;}
.fbar .cf label{color:var(--muted-2);}
.fbar select, .fbar input[type=text]{width:100%; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:6px; color:var(--ink); font:550 14px var(--sans); padding:9px 11px; outline:none;}
.fbar select:focus{border-color:var(--blue);}
.range-wrap{flex:2 1 260px;}
.range-lab{display:flex; justify-content:space-between; font:650 12.5px var(--mono); color:var(--blue-ink); margin-top:6px;}
input[type=range]{width:100%; accent-color:var(--blue); height:26px;}
.fcount{font:650 13px var(--mono); color:var(--muted-2); flex:none; padding-bottom:8px;}
.pkgs, .prods{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:14px;}
.prods{grid-template-columns:repeat(4,1fr);}
.pkg, .prod{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:7px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.pkg:hover, .prod:hover{transform:translateY(-4px); box-shadow:var(--sh-s); border-color:var(--blue);}
.pkg .k, .prod .k{font:700 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
.pkg h3{font-size:15.5px;}
.prod h3{font-size:14.5px; line-height:1.4;}
.pkg .pr, .prod .pr{font:700 17px var(--mono); color:var(--amber-ink);}
.pkg ul{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:4px;}
.pkg li{font:500 13px var(--sans); color:var(--muted); padding-left:16px; position:relative;}
.pkg li::before{content:"OK"; position:absolute; left:0; color:var(--blue); font-weight:700;}
.pkg .g, .prod .g{margin-top:auto; padding-top:8px; font:650 12px var(--mono); color:var(--muted-2); text-decoration:none;}
.pkg:hover .g, .prod:hover .g{color:var(--blue);}
.prod .b{font:600 11.5px var(--mono); color:var(--muted-2);}
.empty{padding:26px; text-align:center; color:var(--muted-2); font:600 14px var(--mono); border:1.5px dashed var(--line-strong); border-radius:12px; margin-bottom:14px;}
.crit{background:var(--panel); color:var(--on-panel); border-radius:12px; padding:20px 24px; margin-bottom:24px; box-shadow:var(--sh);}
.crit h3{color:var(--on-panel); font-size:15.5px; margin-bottom:12px;}
.crit .row{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; align-items:end;}
.crit .cf{margin:0;}
.crit-out{display:none; margin-top:16px; border-top:1px dashed var(--panel-line); padding-top:14px; font:550 13.5px var(--mono); color:var(--on-panel);}
.crit-out.show{display:block;}
.crit-out .hl{color:var(--amber);}
.crit-out a{color:var(--amber); font-weight:700;}
.cat-row{display:grid; grid-template-columns:56px 1.05fr 1.55fr auto 26px; gap:22px; align-items:center; padding:16px 10px 16px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; border-left:3px solid transparent; transition:background .18s ease, border-color .18s ease, padding-left .18s ease, box-shadow .18s ease;}
.cat-row:hover{background:var(--card); border-left-color:var(--blue); padding-left:16px; box-shadow:var(--sh-s);}
.cat-row .no{font:650 13px var(--mono); color:var(--muted-2);}
.cat-row:hover .no{color:var(--blue);}
.cat-row h3{font-size:16.5px;}
.cat-row:hover h3{color:var(--blue-ink);}
.cat-row .desc{color:var(--muted); font-size:14.5px; line-height:1.55;}
.cat-row .spec{font:650 12px var(--mono); color:var(--blue); background:var(--blue-soft); padding:6px 13px; border-radius:99px; white-space:nowrap;}
.cat-row:hover .spec{background:var(--blue); color:#fff;}
.cat-row .arr{color:var(--muted-2); font-size:18px; transition:transform .2s ease, color .2s ease;}
.cat-row:hover .arr{transform:translateX(6px); color:var(--blue);}
.cat-title{display:flex; align-items:baseline; gap:16px; font:700 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin:22px 0 4px;}
.cat-title::after{content:""; flex:1; height:1px; background:var(--line);}
.projs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.proj{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.proj:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--blue);}
.proj-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(140deg, var(--panel) 0%, var(--panel-2) 60%, #1c4568 100%); background-size:cover; background-position:center;}
.proj-img .proj-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; opacity:0; transition:opacity .35s ease;}
.proj-img .proj-photo.loaded{opacity:1;}
.proj-img .meas{z-index:2;}
.proj-img .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:650 10.5px var(--mono); letter-spacing:.2em; color:rgba(255,255,255,.4); text-transform:uppercase;}
.proj-img .meas{position:absolute; left:14px; bottom:12px; display:flex; gap:8px;}
.proj-img .meas span{font:650 11px var(--mono); background:rgba(10,25,38,.75); color:var(--amber); border:1px solid rgba(232,168,62,.4); padding:4px 10px; border-radius:4px;}
.proj-body{padding:15px 18px 17px; display:flex; flex-direction:column; gap:6px;}
.proj-body .k{font:700 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
.proj-body h3{font-size:15.5px; line-height:1.4;}
.proj-body p{color:var(--muted); font-size:14px; line-height:1.55;}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.gitem{position:relative; margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.gitem .gph{aspect-ratio:4/3; background-size:cover; background-position:center; transition:transform .35s ease;}
.gitem:hover .gph{transform:scale(1.05);}
.gitem figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 14px 11px; font:700 12px var(--mono); letter-spacing:.03em; color:#fff; background:linear-gradient(0deg, rgba(6,16,28,.82), transparent);}
.proj-note{margin-top:14px; font:500 12.5px var(--mono); color:var(--muted-2);}
.flow{display:grid; grid-template-columns:repeat(5,1fr); counter-reset:step;}
.fstep{position:relative; padding:18px 20px 4px 0; transition:transform .2s ease;}
.fstep:hover{transform:translateY(-4px);}
.fstep::before{counter-increment:step; content:"0" counter(step); font:700 13px var(--mono); color:var(--blue);}
.fstep::after{content:""; position:absolute; top:0; left:0; right:20px; height:3px; background:var(--line-strong); transition:background .2s ease;}
.fstep:hover::after{background:var(--blue);}
.fstep h3{font-size:15px; margin:8px 0 5px;}
.fstep p{color:var(--muted); font-size:13.5px; line-height:1.55;}
.fstep .fimg{aspect-ratio:16/10; border-radius:10px; background-size:cover; background-position:center; margin:12px 20px 2px 0; border:1px solid var(--line); transition:transform .25s ease;}
.fstep:hover .fimg{transform:scale(1.03);}

/* SPL calculator (new) */
.splcalc{display:grid;grid-template-columns:1.35fr .95fr;gap:20px;margin-top:24px;align-items:stretch}
.splc-panel{background:var(--card,#0d1f30);border:1px solid var(--panel-line,#1e3a52);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.splc-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--panel-line,#1e3a52);font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--on-panel-mut,#9db4cd)}
.splc-bar .lv{display:flex;align-items:center;gap:7px;color:#39c07a}.splc-bar .lv i{width:7px;height:7px;border-radius:50%;background:#39c07a;box-shadow:0 0 8px #39c07a}
.splc-cw{padding:14px}#heat{width:100%;height:auto;display:block;border-radius:8px;background:#08131f}
.splc-lg{display:flex;align-items:center;padding:0 16px 12px;font:600 10px var(--mono);color:var(--on-panel-mut,#9db4cd)}
.splc-lg .grad{flex:1;height:8px;border-radius:4px;margin:0 8px;background:linear-gradient(90deg,#1b3b6b,#2f86f0,#39c07a,#e8a83e,#e5573f)}
.splc-side{display:flex;flex-direction:column;gap:14px}
.splc-form{background:var(--card,#0d1f30);border:1px solid var(--panel-line,#1e3a52);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:13px}
.splc-form label{display:flex;flex-direction:column;gap:7px;font:800 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#b9cee6}
.splc-dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.splc-form select,.splc-form input{font:600 15px/1.2 -apple-system,"Segoe UI",Roboto,sans-serif;padding:12px 13px;border-radius:9px;border:1px solid #2c4d6c;background:#0b1c2c;color:#f2f8ff;outline:none;width:100%}
.splc-form select:focus,.splc-form input:focus{border-color:var(--amber)}
.splc-form option{color:#0a1826;background:#dfeaf5}
.splc-tbl{background:var(--card,#0d1f30);border:1px solid var(--panel-line,#1e3a52);border-radius:14px;overflow:hidden}
.splc-tbl .h{display:flex;justify-content:space-between;padding:10px 15px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--panel-line,#1e3a52);font:700 10px var(--mono);letter-spacing:.12em;color:var(--on-panel-mut,#9db4cd)}
.splc-tbl table{width:100%;border-collapse:collapse}
.splc-tbl td{padding:10px 15px;border-top:1px solid var(--panel-line,#1e3a52);font-size:13.5px;color:#c4d6ea}
.splc-tbl td:last-child{text-align:right;font:800 14.5px var(--mono);color:#f2f8ff;white-space:nowrap;font-variant-numeric:tabular-nums}
.splc-tbl td:last-child b{color:var(--amber);font-weight:800}
.splc-tbl tr.tot td{background:rgba(232,168,62,.08)}.splc-tbl tr.tot td:first-child{color:var(--on-panel,#eef5fc);font-weight:700}.splc-tbl tr.tot td:last-child b{font-size:16.5px}
.splc-tbl tr.ok td:last-child b{color:#39c07a}
@media(max-width:820px){.splcalc{grid-template-columns:1fr}}
.stds{display:flex; flex-wrap:wrap; gap:0; margin-top:24px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden;}
.std{flex:1 1 185px; padding:13px 18px; border-right:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; gap:3px; transition:background .18s ease;}
.std:hover{background:var(--blue-soft);}
.std:last-child{border-right:0;}
.std b{font:700 13.5px var(--mono); color:var(--blue-ink);}
.std span{font:500 12.5px var(--sans); color:var(--muted);}
.b-lead{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px;}
.b-card{background:var(--panel); color:var(--on-panel); border-radius:12px; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; text-decoration:none; border:1px solid var(--panel-line); position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;}
.b-card::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(232,168,62,.12) 50%, transparent 70%); transform:translateX(-100%); transition:transform .6s ease;}
.b-card:hover{transform:translateY(-4px); box-shadow:var(--sh);}
.b-card:hover::before{transform:translateX(100%);}
.b-card .nm{font:750 19px var(--sans);}
.b-card .nm small{display:block; font:650 10px var(--mono); letter-spacing:.2em; color:var(--amber); margin-top:5px;}
.b-card .tagx{font:700 10.5px var(--mono); background:var(--amber); color:#0E2233; padding:6px 12px; border-radius:4px; white-space:nowrap;}
.marq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; position:relative;}
.marq::before,.marq::after{content:""; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;}
.marq::before{left:0; background:linear-gradient(90deg, var(--paper), transparent);}
.marq::after{right:0; background:linear-gradient(-90deg, var(--paper), transparent);}
.marq-track{display:flex; width:max-content; animation:slideR 38s linear infinite;}
.marq:hover .marq-track{animation-play-state:paused;}
.blogo{flex:none; display:flex; align-items:center; justify-content:center; min-width:150px; padding:6px 26px; text-decoration:none; filter:grayscale(1); opacity:.62; transition:filter .2s ease, opacity .2s ease, transform .2s ease;}
.blogo:hover{filter:grayscale(0); opacity:1; transform:translateY(-2px);}
.blogo span{font:800 19px var(--sans); letter-spacing:-.02em; color:var(--ink); white-space:nowrap;}
.blogo.serif span{font-family:Georgia, serif; font-weight:700;}
.blogo.monot span{font-family:var(--mono); font-weight:700; letter-spacing:.06em;}
.blogo.italic span{font-style:italic;}
.b-note{margin-top:12px; font:500 12.5px var(--mono); color:var(--muted-2);}
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.art{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.art-img{position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden; margin:-4px -2px 6px; background-size:cover; background-position:center;}
.art-img .art-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .35s ease;}
.art-img .art-photo.loaded{opacity:1;}
.std-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}
.art::before{content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--blue); transform:scaleY(0); transform-origin:top; transition:transform .25s ease;}
.art:hover{transform:translateY(-4px); box-shadow:var(--sh-s); border-color:var(--blue);}
.art:hover::before{transform:scaleY(1);}
.art .k{font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
.art h3{font-size:15.5px; line-height:1.45;}
.art p{color:var(--muted); font-size:14px; line-height:1.6;}
.art .g{margin-top:auto; font:650 12.5px var(--mono); color:var(--muted-2);}
.art:hover .g{color:var(--blue);}
.faq{max-width:820px;}
.faq details{border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--card); overflow:hidden; transition:border-color .18s ease;}
.faq details:hover, .faq details[open]{border-color:var(--blue);}
.faq summary{list-style:none; cursor:pointer; padding:15px 20px; font:650 15.5px var(--sans); color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::after{content:"+"; font:600 20px var(--mono); color:var(--blue); flex:none; transition:transform .22s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .fa{padding:0 20px 16px; color:var(--muted); font-size:14.5px; line-height:1.7; max-width:68ch;}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.eng{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; display:flex; gap:16px; align-items:center; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.eng:hover{transform:translateY(-4px); box-shadow:var(--sh-s); border-color:var(--blue);}
.eng .av{width:54px; height:54px; border-radius:50%; flex:none; background:var(--panel); color:var(--amber); display:flex; align-items:center; justify-content:center; font:750 17px var(--sans);}
.eng b{display:block; font:700 15px var(--sans); color:var(--ink);}
.eng span{display:block; font:500 12.5px var(--sans); color:var(--muted); line-height:1.5;}
.eng .cert{font:600 11px var(--mono); color:var(--blue); margin-top:3px; display:block;}
.cta-band{padding:clamp(22px,2.8vw,36px) 0 clamp(30px,3.4vw,46px);}
.cta{background:var(--panel); color:var(--on-panel); border-radius:14px; box-shadow:var(--sh); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:clamp(20px,2.4vw,32px) clamp(22px,2.8vw,38px);}
.cta h2{color:var(--on-panel); font-size:clamp(1.1rem,1.5vw,1.35rem); margin:8px 0 6px;}
.cta p{color:var(--on-panel-mut); font-size:14.5px;}
.cta-actions{display:flex; gap:13px; flex-wrap:wrap;}
footer.site{background:var(--panel); color:var(--on-panel-mut); border-top:1px solid var(--panel-line); font-size:14.5px;}
.fgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr; gap:34px; padding:38px 0 28px;}
.fbrand p{line-height:1.7; max-width:36ch; margin-top:15px; color:var(--on-panel-mut); font-size:13.5px;}
.fcol h4{font:700 11.5px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--on-panel-mut); opacity:.75; margin:0 0 15px;}
.fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.fcol a{color:var(--on-panel); opacity:.85; text-decoration:none; font-size:13.5px; transition:opacity .16s, color .16s, padding-left .16s;}
.fcol a:hover{opacity:1; color:var(--amber); padding-left:8px;}
.faddr li{display:flex; gap:10px; font-size:12.5px; line-height:1.55; color:var(--on-panel-mut);}
.faddr svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--amber);}
.fbot{border-top:1px solid var(--panel-line); padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:500 12px var(--mono); color:var(--on-panel-mut); opacity:.7;}
.fab{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:12px;}
.fab a{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:var(--sh); transition:transform .2s ease;}
.fab a:hover{transform:scale(1.1);}
.fab .call{background:var(--blue); color:#fff;}
.fab .zalo{background:#0068FF; color:#fff; font:800 14px var(--sans);}
.fab svg{width:23px; height:23px;}
.totop{position:fixed; right:22px; bottom:158px; z-index:90; width:44px; height:44px; border-radius:50%; background:var(--card); border:1.5px solid var(--line-strong); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s;}
.totop.show{opacity:1; visibility:visible; transform:none;}
.totop:hover{border-color:var(--blue); color:var(--blue);}
@media (max-width:1120px){
    .hero-grid{grid-template-columns:1fr;}
    .ease{grid-template-columns:1fr;}
    .navbar{display:none;}
    .burger{display:flex;}
    .hotline{display:none;}
    .groups{grid-template-columns:repeat(2,1fr);}
    .flow{grid-template-columns:repeat(2,1fr); gap:14px 26px;}
    .arts,.projs,.team{grid-template-columns:1fr;}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .pkgs{grid-template-columns:repeat(2,1fr);}
    .prods{grid-template-columns:repeat(2,1fr);}
    .fgrid{grid-template-columns:1fr 1fr;}
    .b-lead{grid-template-columns:1fr;}
    .cat-row{grid-template-columns:44px 1fr auto 22px;}
    .cat-row .desc{display:none;}
    .crit .row{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
    body{font-size:16px;}
    .flow,.groups,.pkgs,.prods{grid-template-columns:1fr;}
    .fgrid{grid-template-columns:1fr;}
    .searchbox{display:none;}
    .cat-row{grid-template-columns:36px 1fr 22px;}
    .cat-row .spec{display:none;}
    .cf2{grid-template-columns:1fr;}
    .crit .row{grid-template-columns:1fr;}
}
.hero-photo{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.34;}
.gimg{aspect-ratio:16/7; border-radius:8px; background-size:cover; background-position:center; margin-bottom:4px;}