: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);
        --r-s:8px; --r-m:12px; --r-l:14px;
        --ease:cubic-bezier(.22,.68,.26,1); --dur:.24s;
        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);
        --r-s:8px; --r-m:12px; --r-l:14px;
        --ease:cubic-bezier(.22,.68,.26,1); --dur:.24s;
        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:1840px; margin:0 auto; padding:0 clamp(20px,4.8vw,105px);} /* v31: GIÃN ngang gần hết màn hình như thienvu.com.vn (đo ảnh: nội dung ~89% bề ngang, lề ~5%) */
  .page{display:none;}
  .page.active{display:block;}

  .idx{font-family:var(--sans); font-size:12px; letter-spacing:.19em; color:var(--blue); font-weight:700; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;}
  .idx::before{content:""; width:22px; height:2px; background:currentColor; opacity:.55; flex:none;}
  .sec{padding:clamp(58px,6.6vw,106px) 0;}
  .sec + .sec{border-top:0;}
  .sec.alt{background:var(--paper-2);}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(28px,3.2vw,46px);}
  /* 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;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .rv{opacity:1 !important; transform:none !important; transition:none !important;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }
  .sec-head h2{font-size:clamp(1.7rem,2.9vw,2.55rem); line-height:1.14; letter-spacing:-.022em; margin-top:12px; max-width:20ch;}
  .sec-link{font-family:var(--sans); font-size:13.5px; 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(--sans); color:var(--muted-2); letter-spacing:.01em;}
  .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:8px; padding:14px 26px; letter-spacing:.005em; 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(--sans); letter-spacing:.22em; 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(--sans); 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(--sans); letter-spacing:.16em; color:var(--muted-2); text-transform:uppercase;}
  .hotline a{font:750 17.5px var(--sans); letter-spacing:-.01em; 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 .ddh{margin:0 0 12px; font:700 11px var(--sans); 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(--sans); text-decoration:none;}
  .dd-cta a:hover{letter-spacing:.05em;}

  .msearch{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; color:var(--ink);}
  .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:700 12px var(--sans); 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 transparent; box-shadow:0 1px 2px rgba(16,38,58,.06),0 8px 24px -14px rgba(16,38,58,.22); border-radius:var(--r-l); padding:22px 24px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--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(-5px); box-shadow:0 2px 4px rgba(16,38,58,.08),0 26px 50px -22px rgba(16,38,58,.4);}
  .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 ===== */
  /* ===== HERO: ảnh lớn trọn khung, chữ ít, một nút chính (hướng fbt.it) ===== */
  .heroS{position:relative; height:clamp(500px,74vh,780px); overflow:hidden; background:#06111c; display:flex; flex-direction:column; isolation:isolate;}
  .heroS-stage{position:absolute; inset:0; z-index:0;}
  .heroS-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.07);
            transition:opacity 1.4s var(--ease), transform 9s linear; will-change:opacity, transform;}
  .heroS-bg.is-on{opacity:1; transform:scale(1);}
  .heroS-bg em{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}   /* chỉ để lấy nhãn ảnh */
  .heroS-shade{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(5,12,20,.30) 0%, rgba(5,12,20,.16) 34%, rgba(5,12,20,.04) 66%, rgba(5,12,20,.08) 100%),
               linear-gradient(0deg, rgba(5,12,20,.34) 0%, rgba(5,12,20,0) 46%); /* v48: banner đã baked gradient — shade CSS chỉ còn rất nhẹ */}
  .heroS-inner{position:relative; z-index:2; flex:1; display:flex; align-items:center;}
  .heroS-kick{display:inline-flex; align-items:center; gap:11px; margin:0 0 18px; color:var(--amber);
              font:700 12px var(--sans); letter-spacing:.2em; text-transform:uppercase;}
  .heroS-kick::before{content:""; width:26px; height:2px; background:currentColor; opacity:.8;}
  .heroS h1{color:#fff; font-size:clamp(2.1rem,5vw,4.15rem); line-height:1.03; letter-spacing:-.032em; font-weight:750; margin:0 0 20px;
            text-shadow:0 2px 30px rgba(0,0,0,.35);}
  .heroS-sub{color:rgba(255,255,255,.82); font-size:clamp(15px,1.35vw,18.5px); line-height:1.62; max-width:46ch; margin:0 0 32px;}
  .heroS-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .heroS-cta .btn-panel{border-color:rgba(255,255,255,.42); color:#fff; backdrop-filter:blur(3px); background:rgba(255,255,255,.06);}
  .heroS-cta .btn-panel:hover{border-color:#fff; background:rgba(255,255,255,.14);}
  .heroS-foot{position:relative; z-index:2; padding-bottom:26px;}
  .heroS-foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:22px;}
  .heroS-cap{color:rgba(255,255,255,.72); font:600 12.5px var(--sans); letter-spacing:.02em;}
  .heroS-cap::before{content:"◉ "; color:var(--amber); font-size:9px; vertical-align:2px;}
  .heroS-bars{display:flex; gap:8px;}
  .heroS-bars button{width:26px; height:3px; padding:0; border:0; border-radius:2px; background:rgba(255,255,255,.34); cursor:pointer;
                     transition:width .35s var(--ease), background .35s var(--ease);}
  .heroS-bars button:hover{background:rgba(255,255,255,.6);}
  .heroS-bars button.on{width:52px; background:var(--amber);}
  @media(max-width:720px){
    .heroS{height:auto; min-height:clamp(440px,80vh,620px); padding:88px 0 0;}
    .heroS-shade{background:linear-gradient(0deg, rgba(5,12,20,.74) 0%, rgba(5,12,20,.30) 55%, rgba(5,12,20,.40) 100%);}
    .heroS h1{font-size:clamp(1.9rem,8.6vw,2.7rem);}
    .heroS-sub{max-width:none; margin-bottom:26px;}
    .heroS-cta .btn{flex:1 1 100%; justify-content:center;}
    .heroS-foot .wrap{flex-direction:column; align-items:flex-start; gap:12px;}
  }

  .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.7rem,2.9vw,2.55rem); line-height:1.14; letter-spacing:-.022em; margin:12px 0 15px;}
  .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 var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--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:15.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 transparent; box-shadow:0 1px 2px rgba(16,38,58,.06),0 8px 24px -14px rgba(16,38,58,.22); border-radius:var(--r-l); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.proj:hover{transform:translateY(-5px); box-shadow:0 2px 4px rgba(16,38,58,.08),0 26px 50px -22px rgba(16,38,58,.4);}
.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:var(--r-m); overflow:hidden; border:1px solid var(--line);}
.gitem .gph{aspect-ratio:3/2; background-size:cover; background-position:center; transition:transform .5s var(--ease);}
.gitem:hover .gph{transform:scale(1.045);}
.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/9; border-radius:var(--r-m); background-size:cover; background-position:center; margin:12px 20px 2px 0; border:1px solid var(--line); transition:transform .5s var(--ease);}
.fstep:hover .fimg{transform:scale(1.025);}

/* 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);}
@keyframes slideR{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* v30: keyframes bị thiếu từ đầu — marquee giờ mới thật sự chạy, hướng sang trái */
.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 transparent; box-shadow:0 1px 2px rgba(16,38,58,.06),0 8px 24px -14px rgba(16,38,58,.22); border-radius:var(--r-l); padding:20px 22px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.art-img{position:relative; aspect-ratio:16/9; border-radius:var(--r-s); 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(-5px); box-shadow:0 2px 4px rgba(16,38,58,.08),0 26px 50px -22px rgba(16,38,58,.4);}
.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 var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--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;}
    .wrap{padding:0 18px;}
    .hrow1 .wrap{gap:12px;}
    .hrow1 .nav-actions > .btn{display:none;}
    .logo-word{font-size:18px;}
    .logo-word small{letter-spacing:.18em; font-size:8px;}
    .sec-head{flex-direction:column; align-items:flex-start; gap:10px;}
    .flow,.groups,.pkgs,.prods{grid-template-columns:1fr;}
    .fgrid{grid-template-columns:1fr;}
    /* v55: searchbox không còn display:none cứng — mặc định ẩn, bấm nút kính lúp mới hiện */
    .msearch{display:flex;}
    .searchbox{display:none; position:absolute; left:0; right:0; top:100%; margin:0; max-width:none;
      padding:10px 18px; background:var(--card); border-top:1px solid var(--line-strong);
      box-shadow:0 8px 20px rgba(14,34,51,.12); z-index:60;}
    .searchbox.open{display:block;}
    .searchbox input{height:46px;}
    .hrow1{position:relative;}
    .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/9; border-radius:var(--r-s); background-size:cover; background-position:center; margin-bottom:4px;}
/* Ảnh thẻ sản phẩm — render server-side bằng <img> (có alt + lazy) thay cho div background-image */
.prod-img,.pkg-img{display:block;width:100%;border-radius:8px;margin-bottom:10px;background:var(--panel);object-fit:cover;}
.prod-img{aspect-ratio:1/1;}
.pkg-img{aspect-ratio:4/3;}
.prod-img-empty{display:flex;align-items:center;justify-content:center;font:700 13px var(--mono);letter-spacing:2px;color:var(--muted-2);opacity:.45;}

/* CTA báo giá trên trang sản phẩm (mô hình B2B, không dùng giỏ hàng) — 11/08/2026.
   Dùng thẻ <a> thay <button> để đúng ngữ nghĩa điều hướng + SEO; product.scss.css chỉ
   style cho `.main-product-cta button` nên khai báo lại ở đây cho khớp giao diện. */
.main-product-cta-quote{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.main-product-cta-quote a{display:flex; flex-direction:column; gap:3px; padding:13px 18px;
  border:1px solid var(--line, #d9dee5); border-radius:10px; text-decoration:none;
  background:var(--card, #fff); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.main-product-cta-quote a:hover{border-color:var(--blue, #1F6FB2); transform:translateY(-2px); box-shadow:0 6px 18px rgba(14,34,51,.10);}
.main-product-cta-quote a strong{font:750 16px var(--sans, system-ui); color:var(--ink, #0E2233);}
.main-product-cta-quote a span{font:500 13px var(--sans, system-ui); color:var(--muted, #667); line-height:1.5;}
.main-product-cta-quote a:first-child{background:var(--blue, #1F6FB2); border-color:var(--blue, #1F6FB2);}
.main-product-cta-quote a:first-child strong,
.main-product-cta-quote a:first-child span{color:#fff;}
.main-product-cta-quote a:first-child span{opacity:.85;}

/* v23: sửa tràn ngang desktop — mega-menu ẩn (visibility:hidden vẫn chiếm layout) và
   menu nhiều mục đẩy trang rộng hơn viewport 1121–1450px, sinh thanh cuộn ngang. */
@media (min-width:1121px){
  header.site{overflow-x:clip;}
  .navbar .dd, .navbar .ddp{max-width:min(96vw,1100px);}
}
@media (min-width:1121px) and (max-width:1450px){
  .navbar .wrap{padding:0 16px;}
  .navbar ul.top > li > a{padding:15px 13px; font-size:14px;}
}

/* v23: section sản phẩm trang chủ */
.hp-rowlab{margin-top:26px;}
.hp-rowlab a{font:700 12.5px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--blue); text-decoration:none;}
.hp-rowlab a:hover{color:var(--amber-ink);}
.hp-prods{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px;}
.hp-prod{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.hp-prod:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--amber);}
.hp-prod-img{aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);}
.hp-prod-img img{width:100%; height:100%; object-fit:contain;}
.hp-prod-body{padding:13px 15px 17px; display:flex; flex-direction:column; gap:6px; flex:1;}
.hp-prod-body .k{font:700 11px var(--mono); letter-spacing:1.5px; color:var(--muted-2); text-transform:uppercase;}
.hp-prod-body h3{margin:0; font:650 15px/1.45 var(--sans); flex:1;}
.hp-price{color:var(--amber-ink); font:750 15px var(--sans);}
@media(max-width:1120px){.hp-prods{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hp-prods{gap:10px;} .hp-prod-body h3{font-size:13px;} .hp-prod-body{padding:10px 11px 13px;}}

/* v24: tiêu đề nhỏ lại, nhấn bằng line gradient thay vì cỡ chữ.
   Đặt cuối file để đè các rule cùng specificity phía trên. */
.heroS h1{font-size:clamp(1.85rem,3.3vw,2.85rem); line-height:1.1; letter-spacing:-.025em;}
.heroS h1::after{content:""; display:block; width:104px; height:4px; border-radius:99px; margin-top:20px;
  background:linear-gradient(90deg,var(--amber) 0%,#f7d88f 30%,var(--blue) 60%,var(--amber) 100%);
  background-size:280% 100%; animation:lgt-line 7s linear infinite;}
.sec-head h2, .studio h2{font-size:clamp(1.4rem,2.15vw,1.9rem);}
.sec-head h2::after, .studio h2::after{content:""; display:block; width:64px; height:3px; border-radius:99px; margin-top:14px;
  background:linear-gradient(90deg,var(--amber) 0%,#f7d88f 30%,var(--blue) 60%,var(--amber) 100%);
  background-size:280% 100%; animation:lgt-line 7s linear infinite;}
.cta h2::after{content:none;}
@keyframes lgt-line{from{background-position:0% 0;}to{background-position:280% 0;}}
@media (prefers-reduced-motion:reduce){
  .heroS h1::after, .sec-head h2::after, .studio h2::after{animation:none;}
}

/* ============================================================
   v26 — POLISH TRANG CHỦ (cấp chuyên gia)
   Nguyên tắc: 1 font hiển thị riêng cho tiêu đề, hệ thẻ đồng
   nhất (bóng lớp thay viền cứng), nhấn màu tiết chế, chuyển
   động chậm-mượt. Đặt cuối file để đè các rule cùng specificity.
   ============================================================ */
:root{ --display:"Be Vietnam Pro", var(--sans); }

/* — Chữ tiêu đề: font hiển thị, nặng hơn nhưng cỡ giữ nhỏ gọn — */
h1,h2{font-family:var(--display);}
.heroS h1{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.75rem); line-height:1.12; letter-spacing:-.02em;}
.heroS-kick{letter-spacing:.24em; font-size:11.5px;}
.heroS-sub{color:rgba(255,255,255,.88); font-weight:450;}
.sec-head h2, .studio h2{font-family:var(--display); font-weight:750; letter-spacing:-.018em;}

/* — Line gradient: ngắn hơn, 2 tông tiết chế, sheen chậm — */
.heroS h1::after{width:76px; height:3.5px; margin-top:22px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 42%,var(--blue) 100%);
  background-size:200% 100%; animation:lgt-line 9s ease-in-out infinite alternate;}
.sec-head h2::after, .studio h2::after{width:46px; height:3px; margin-top:12px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 42%,var(--blue) 100%);
  background-size:200% 100%; animation:lgt-line 9s ease-in-out infinite alternate;}

/* — Thẻ sản phẩm trang chủ: cùng ngôn ngữ với .group/.proj — */
.hp-rowlab{margin-top:30px;}
.hp-rowlab a{font:700 12px var(--sans); letter-spacing:.19em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:10px;}
.hp-rowlab a::before{content:""; width:22px; height:2px; background:currentColor; opacity:.55;}
.hp-rowlab a:hover{color:var(--blue-ink);}
.hp-prods{gap:20px; margin-top:16px;}
.hp-prod{border:1px solid transparent; border-radius:var(--r-l);
  box-shadow:0 1px 2px rgba(16,38,58,.06),0 8px 24px -14px rgba(16,38,58,.22);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.hp-prod:hover{transform:translateY(-5px); border-color:transparent;
  box-shadow:0 2px 4px rgba(16,38,58,.07),0 22px 44px -16px rgba(16,38,58,.34);}
.hp-prod-img{border-bottom:1px solid var(--hairline); background:#fff; padding:16px;}
.hp-prod-img img{transition:transform .5s var(--ease);}
.hp-prod:hover .hp-prod-img img{transform:scale(1.04);}
.hp-prod-body{padding:15px 17px 18px; gap:7px;}
.hp-prod-body .k{font:700 10.5px var(--mono); letter-spacing:.14em; color:var(--muted-2);}
.hp-prod-body h3{font:650 14.5px/1.5 var(--sans); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(2 * 1.5 * 14.5px);}
.hp-price{color:var(--amber-ink); font:750 15.5px var(--sans); letter-spacing:-.01em;}
.hp-prod:hover .hp-prod-body h3{color:var(--blue-ink);}

/* — Marquee thương hiệu: fade 2 mép cho mềm — */
.marq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}

/* — Nút: bo nhất quán, nhấn active rõ — */
.btn{border-radius:10px;}
.heroS-cta .btn-amber{box-shadow:0 10px 30px -10px rgba(232,168,62,.55);}
.heroS-cta .btn-amber:hover{box-shadow:0 14px 34px -10px rgba(232,168,62,.7);}

/* — Studio (Phòng thiết kế) đồng bộ nhấn — */
.studio p.lead{font-size:15.5px;}

/* Ảnh SP giữ nền trắng cả ở dark mode — ảnh sản phẩm vốn chụp nền trắng,
   đặt lên tile xám sẽ lộ viền bẩn; viền hairline đã tách khỏi nền tối. */

/* ===================== v27 — trang chủ 4 line + live search ===================== */
/* Chip màu đầu mục: nhấn bằng màu nền/chữ thay vì phóng to chữ (yêu cầu 12/08). */
.idx.chip{display:inline-block; padding:4px 12px; border-radius:999px; font:800 11.5px/1.6 var(--mono, monospace); letter-spacing:.14em;}
.chip-blue{background:var(--blue-soft, #e8f1f8); color:var(--blue-ink, #1F6FB2);}
.chip-amber{background:rgba(232,168,62,.16); color:#9a6a14;}
.chip-green{background:rgba(46,138,87,.13); color:#256e46;}
.chip-violet{background:rgba(112,86,190,.13); color:#5b4699;}
@media (prefers-color-scheme: dark){
  .chip-amber{color:#e8b45e;} .chip-green{color:#5cba8a;} .chip-violet{color:#a893e8;}
}

/* Thanh tab kiểu trs.vn */
.lgt-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px;}
.lgt-tab{appearance:none; cursor:pointer; border:1px solid var(--line); background:var(--card);
  color:var(--muted); font:700 11.5px var(--mono, monospace); letter-spacing:.1em;
  padding:8px 14px; border-radius:999px; transition:all .18s;}
.lgt-tab:hover{border-color:var(--blue, #1F6FB2); color:var(--blue-ink, #1F6FB2);}
.lgt-tab.on{background:var(--blue, #1F6FB2); border-color:var(--blue, #1F6FB2); color:#fff;}
.lgt-pan.hide{display:none;}
.lgt-panfoot{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;}
.lgt-more, .lgt-sol{font:700 12.5px var(--sans); text-decoration:none; color:var(--blue-ink, #1F6FB2);}
.lgt-pan > .lgt-more{grid-column:1 / -1;}
.lgt-sol{color:#9a6a14;}
.lgt-more:hover, .lgt-sol:hover{text-decoration:underline;}
@media (max-width: 640px){
  .lgt-tabs{overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
  .lgt-tab{flex:0 0 auto;}
}

/* Live search dropdown — khớp markup templates/search.smart.liquid */
.sugg{max-height:70vh; overflow-y:auto;}
.sugg .sugg-item{display:flex; justify-content:flex-start; align-items:center; gap:12px;}
.sugg .sugg-thumb{flex:0 0 44px; width:44px; height:44px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.sugg .sugg-thumb img{width:100%; height:100%; object-fit:contain;}
.sugg .sugg-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.sugg .sugg-name{font:600 13.5px var(--sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sugg .sugg-price{font:700 12.5px var(--mono, monospace); color:#9a6a14;}
.sugg .sugg-all{justify-content:center; font:700 12.5px var(--sans); color:var(--blue-ink, #1F6FB2); background:var(--blue-soft, #e8f1f8);}
.sugg a.sel{background:var(--blue-soft, #e8f1f8);}

/* Trang SP: hàng CTA ngang 1 hàng vừa khung (Báo giá · Gọi · Zalo · Thiết kế) */
.main-product-cta-quote{flex-direction:row; flex-wrap:wrap; gap:8px;}
.main-product-cta-quote a{flex:1 1 0; min-width:140px; padding:10px 12px; text-align:center; align-items:center;}
.main-product-cta-quote a strong{font-size:14px;}
.main-product-cta-quote a span{font-size:11.5px; line-height:1.35;}
.main-product-cta-quote a.cta-zalo{background:#0068ff; border-color:#0068ff;}
.main-product-cta-quote a.cta-zalo strong, .main-product-cta-quote a.cta-zalo span{color:#fff;}
.main-product-cta-quote a.cta-zalo span{opacity:.85;}
/* v57: SỬA LỖI 20/08 — khối vá v52 (grid 4 cột 1 hàng) từng bị lỡ bọc trong
   @media (max-width:900px) nên chỉ có hiệu lực trên màn hình hẹp; ở desktop rộng
   (nơi anh Bình xem) rơi về luật cũ "flex:1 1 44%" phía trên khiến nút thứ 4
   rớt hàng. Bỏ hẳn wrapper 900px — luật grid áp dụng MỌI kích thước màn hình. */
.main-product-cta-quote{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; flex-wrap:nowrap;}
.main-product-cta-quote{align-items:stretch;}
.main-product-cta-quote a{flex:none; min-width:0; padding:9px 6px; height:100%; justify-content:center;}
.main-product-cta-quote a strong{font-size:12.5px; line-height:1.25; letter-spacing:-.01em;}
.main-product-cta-quote a span{font-size:10.5px; line-height:1.3;}
@media (max-width:1300px){.main-product-cta-quote a strong{font-size:11.5px;}.main-product-cta-quote a span{font-size:10px;}}
@media (max-width:640px){.main-product-cta-quote{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ===================== v28/v29 — mục 1 hàng + band xanh, rút khoảng cách ===================== */
/* v29: cân bằng trên–dưới, hở đáy ngắn lại */
.sec{padding:clamp(20px,2.5vw,34px) 0;}
.cta-band{padding:clamp(16px,2vw,26px) 0;}
footer.site .fgrid{padding-top:30px;}

/* Dải tiêu đề mục: nền xanh, chữ trắng, kèm nút Xem tất cả (thay cho 01/02 + h2 lớn) */
.band{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(95deg, var(--blue, #1F6FB2), #16558a); border-radius:12px;
  padding:11px 18px; margin-bottom:16px;}
/* v29: đầu mục chữ IN HOA */
.band h2{margin:0; color:#fff; font:750 15px/1.3 var(--display, var(--sans, system-ui)); letter-spacing:.07em; text-transform:uppercase;}
.band h2::after{display:none;}
.band-all{color:#fff; font:700 11.5px var(--mono, monospace); letter-spacing:.08em; text-decoration:none;
  border:1px solid rgba(255,255,255,.5); padding:6px 13px; border-radius:999px; white-space:nowrap; transition:all .18s;}
.band-all:hover{background:#fff; color:var(--blue-ink, #1F6FB2); border-color:#fff;}
.lgt-tabs{margin:0 0 14px;}

/* Rail v29: 1 hàng cuộn ngang bằng NÚT trái/phải (bỏ tự trượt theo góp ý 12/08 tối).
   theme.js bọc mỗi .rail vào .rail-wrap và gắn 2 nút .rail-btn. */
/* KHÔNG dùng scroll-behavior:smooth — bị treo trong một số webview (cùng lý do
   theme này dùng setTimeout thay rAF cho số đếm); theme.js tự tween. */
.rail{overflow-x:auto; overflow-y:hidden; position:relative;
  scrollbar-width:none; -ms-overflow-style:none;}
.rail::-webkit-scrollbar{display:none;}
.rail-track{display:flex; width:max-content;}
.rail-wrap{position:relative;}
.rail-wrap.hide{display:none;}
.rail-btn{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line, #d7dee4); background:var(--card, #fff); color:var(--ink, #0E2233);
  font:700 17px/1 var(--sans, system-ui); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(14,34,51,.18); transition:all .18s;}
.rail-btn:hover{background:var(--blue, #1F6FB2); border-color:var(--blue, #1F6FB2); color:#fff;}
.rail-btn.prev{left:-8px;}
.rail-btn.next{right:-8px;}
.rail-btn[disabled]{opacity:0; pointer-events:none;}
@media (max-width: 640px){ .rail-btn{width:32px; height:32px;} }
.rail .hp-prod{width:282px; flex:0 0 auto; margin-right:16px;}
.rail .hp-prod-body h3{font:650 14.5px/1.45 var(--sans);}
.railend{flex:0 0 auto; width:190px; margin-right:16px; display:flex; flex-direction:column;
  justify-content:center; gap:5px; text-align:center; text-decoration:none;
  background:var(--blue-soft, #e8f1f8); border:1.5px dashed var(--blue, #1F6FB2); border-radius:12px; padding:16px;}
.railend strong{font:750 14.5px var(--sans, system-ui); color:var(--blue-ink, #1F6FB2);}
.railend span{font:600 12px var(--sans, system-ui); color:var(--muted, #667);}
.railend:hover{background:var(--blue, #1F6FB2);}
.railend:hover strong, .railend:hover span{color:#fff;}

/* Thẻ giải pháp: 1 ảnh + tiêu đề */
.solc{flex:0 0 auto; width:274px; margin-right:16px; position:relative; display:block;
  border-radius:12px; overflow:hidden; text-decoration:none; background:#0e2233;}
.solc .solc-img{display:block; aspect-ratio:16/10; background-size:cover; background-position:center;
  transition:transform .45s ease; background-color:#0e2233;}
.solc:hover .solc-img{transform:scale(1.06);}
.solc strong{position:absolute; left:0; right:0; bottom:0; padding:30px 13px 11px; color:#fff;
  font:700 13.5px/1.35 var(--sans, system-ui); background:linear-gradient(transparent, rgba(7,18,29,.88));}

/* Thẻ dự án: ảnh thật + tiêu đề */
.projc{flex:0 0 auto; width:340px; margin-right:16px; position:relative; display:block;
  border-radius:12px; overflow:hidden; text-decoration:none; background:#0e2233;}
.projc .projc-img{display:block; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#0e2233;}
.projc .projc-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease;}
.projc:hover .projc-img img{transform:scale(1.05);}
.projc strong{position:absolute; left:0; right:0; bottom:0; padding:32px 13px 11px; color:#fff;
  font:700 13.5px/1.35 var(--sans, system-ui); background:linear-gradient(transparent, rgba(7,18,29,.88)); z-index:2;}

/* Thẻ độc quyền trong marquee thương hiệu */
.b-card.mini{flex:0 0 auto; margin-right:14px; display:flex; align-items:center;
  background:var(--panel, #0E2233); border-radius:10px; padding:10px 18px; text-decoration:none;}
.b-card.mini .nm{color:#fff; font:800 13.5px var(--sans, system-ui); letter-spacing:.04em; display:flex; flex-direction:column; gap:2px;}
.b-card.mini .nm small{color:var(--amber, #e8a83e); font:700 9.5px var(--mono, monospace); letter-spacing:.14em;}

@media (max-width: 640px){
  .rail .hp-prod{width:176px;}
  .solc{width:220px;}
  .projc{width:270px;}
  .band h2{font-size:14.5px;}
  .flow{display:flex; overflow-x:auto; gap:14px; padding-bottom:6px;}
  .flow .fstep{flex:0 0 172px;}
}

/* v30: banner tuỳ chỉnh — slide là thẻ <a>, chỉ slide đang hiện nhận click;
   chữ + nút hero vẫn bấm được, vùng ảnh còn lại dẫn tới link của banner */
.heroS-bg{pointer-events:none;}
a.heroS-bg.is-on{pointer-events:auto; cursor:pointer;}
.heroS-inner{pointer-events:none;}
.heroS-inner a, .heroS-inner .btn{pointer-events:auto;}

/* v30: cột phải trang sản phẩm kiểu thienvu — thông tin nhanh / khuyến mãi / showroom */
.pd-quick{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0;}
.pd-q{border:1px solid var(--line, #dde4ea); border-radius:10px; padding:8px 12px; background:var(--card, #fff);}
.pd-q .k{display:block; font:700 10.5px var(--mono, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2, #8a97a3); margin-bottom:2px;}
.pd-q strong{font:700 13px/1.3 var(--sans, system-ui); color:var(--ink, #16324a);}
.pd-promo{border:1.5px dashed var(--amber, #e8a83e); border-radius:12px; margin:0 0 14px; overflow:hidden; background:rgba(232,168,62,.05);}
.pd-promo-head{background:linear-gradient(95deg, var(--amber, #e8a83e), #d18f27); color:#20242b; font:800 12.5px var(--sans, system-ui); letter-spacing:.06em; padding:8px 14px;}
.pd-promo ol{margin:0; padding:10px 14px 12px 16px; counter-reset:km; list-style:none;}
.pd-promo ol li{position:relative; padding:4px 0 4px 26px; font:500 13px/1.5 var(--sans, system-ui); color:var(--ink, #223);}
.pd-promo ol li::before{counter-increment:km; content:counter(km); position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%;
  background:var(--amber, #e8a83e); color:#20242b; font:800 11px/18px var(--sans, system-ui); text-align:center;}
.pd-stores{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.pd-store{font:500 13px/1.5 var(--sans, system-ui); color:var(--muted, #566); border-left:3px solid var(--blue, #1F6FB2); padding-left:10px;}
.pd-store b{color:var(--ink, #16324a); margin-right:6px;}
.pd-store a{color:var(--blue, #1F6FB2); font-weight:700; text-decoration:none;}

/* v31: thẻ sản phẩm kiểu thienvu — giá đỏ đậm + 2 dòng cam kết có icon */
.hp-price{color:#d9251d !important; font-weight:800 !important;}
.hp-perk{display:flex; align-items:center; gap:7px; font:500 12.5px/1.4 var(--sans, system-ui); color:var(--muted, #5a6a76);}
.hp-perk svg{width:15px; height:15px; flex:none; color:#d9251d;}
.hp-perk + .hp-perk svg{color:var(--amber, #e8a83e);}
.hp-prod-body{gap:5px;}
@media (max-width: 640px){ .rail .hp-prod{width:216px;} }

/* ===== v32: menu canh giữa + sidebar trang sản phẩm kiểu thienvu ===== */
.navbar ul.top{justify-content:center;} /* menu chính từng lệch trái khi khung giãn rộng (v31) */

/* v34: hàng 1 hai cột như thienvu (gallery 57%% | thông tin) — aside đã rời khỏi wrap */
@media (min-width:992px){
  /* v38: 57%% tính trên TỔNG (gồm gap) còn 57fr tính sau khi trừ gap → hàng 1 lệch 23px
     so với hàng 2. Dùng fr ở cả hai nơi để điểm tách cột trùng nhau tuyệt đối. */
  .main-product .main-product-wrap.has-side{grid-template-columns:minmax(0,57fr) minmax(0,43fr); gap:40px;}
}
.pd-main2{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start; margin-top:28px;}
@media (max-width:1200px){ .pd-main2{grid-template-columns:minmax(0,1fr) 300px;} }
@media (max-width:991px){ .pd-main2{grid-template-columns:1fr;} }
.pd-main2-left{min-width:0;}
.pd-main2-left .main-product-description.inSidebar{margin-top:0;}
.pd-side{display:flex; flex-direction:column; gap:16px; min-width:0; position:sticky; top:86px;}
.pd-side-box{border:1px solid var(--line, #dde4ea); border-radius:12px; overflow:hidden; background:var(--card, #fff);}
.pd-side-head{background:linear-gradient(95deg, var(--blue, #1F6FB2), #16558a); color:#fff; font:750 12.5px/1.3 var(--sans, system-ui); letter-spacing:.07em; padding:9px 14px;}
.pd-side-sols{list-style:none; margin:0; padding:6px 0;}
.pd-side-sols li a{display:block; padding:7px 14px; font:550 13.5px/1.4 var(--sans, system-ui); color:var(--ink, #223); text-decoration:none; border-left:3px solid transparent; transition:all .15s;}
.pd-side-sols li a:hover{border-left-color:var(--amber, #e8a83e); background:var(--paper-2, #f4f7fa); color:var(--blue, #1F6FB2);}
.pd-side-sols li:last-child a{color:var(--blue, #1F6FB2); font-weight:700;}
.pd-side-news{display:flex; flex-direction:column; padding:8px;}
.pd-side-news a{display:flex; gap:10px; align-items:flex-start; padding:7px 6px; border-radius:8px; text-decoration:none; transition:background .15s;}
.pd-side-news a:hover{background:var(--paper-2, #f4f7fa);}
.pd-side-news .pdn-img{flex:0 0 74px; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:#0e2233;}
.pd-side-news .pdn-img img{width:100%; height:100%; object-fit:cover; display:block;}
.pd-side-news .pdn-tt{font:600 12.5px/1.45 var(--sans, system-ui); color:var(--ink, #223); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.pd-side-cta{display:flex; flex-direction:column; gap:3px; text-align:center; text-decoration:none; border:1.5px dashed var(--blue, #1F6FB2); border-radius:12px; padding:14px; background:var(--blue-soft, #eaf2f9);}
.pd-side-cta strong{font:800 15px var(--sans, system-ui); color:var(--blue-ink, #16558a);}
.pd-side-cta span{font:550 12px var(--sans, system-ui); color:var(--muted, #5a6a76);}
.pd-side-cta:hover{background:var(--blue, #1F6FB2);}
.pd-side-cta:hover strong,.pd-side-cta:hover span{color:#fff;}


/* ===== v35: cân đối khung mô tả sản phẩm & cột liên kết phải ===== */
.pd-main2{grid-template-columns:minmax(0,1fr) 320px; gap:32px;}
/* Khung mô tả thành thẻ trắng ngang hàng với sidebar */
.pd-main2-left .main-product-description.inSidebar{border:1px solid var(--line, #dde4ea); border-radius:12px; background:var(--card, #fff); padding:4px 26px 22px; overflow:hidden;}
.pd-main2-left .main-product-description-item-head{font:750 15.5px/1.3 var(--sans, system-ui); color:var(--blue-ink, #16558a); text-transform:uppercase; letter-spacing:.04em; padding:16px 0 10px; border-bottom:2px solid var(--amber, #e8a83e); margin-bottom:14px; display:block;}
.pd-main2-left .main-product-description-item-data{font-size:15px; line-height:1.75; color:var(--ink, #223);}
.pd-main2-left .main-product-description-item-data img{max-width:100%; height:auto; border-radius:8px; display:block; margin:14px auto;}
.pd-main2-left .main-product-description-item-data h2,
.pd-main2-left .main-product-description-item-data h3{margin:20px 0 10px; line-height:1.35;}
.pd-main2-left .block_expert{margin-top:18px; border:1px solid var(--line, #dde4ea); border-radius:12px; background:var(--card, #fff);}
/* Cột liên kết phải: nhịp đều, chữ cân với mô tả */
.pd-side{gap:14px;}
.pd-side-sols li a{font-size:14px; padding:8px 14px;}
.pd-side-news .pdn-tt{font-size:13px;}
.pd-side-news a{padding:8px 6px;}
.pd-side-news .pdn-img{flex:0 0 84px;}
@media (max-width:991px){ .pd-side{position:static;} }

/* ===== v36: gallery chuyển ảnh + tỷ lệ mô tả/sidebar + chữ nghĩa trang SP ===== */
/* Khung ảnh: thẻ trắng vuông cố định, ảnh contain — không còn ảnh xếp chồng bên dưới */
.main-product-feature-featured{background:#fff; border:1px solid var(--line, #dde4ea); border-radius:14px; overflow:hidden;}
.main-product-feature-featured > a, .main-product-feature-featured .slick-slide a{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; max-height:600px;}
.main-product-feature-featured img{width:100%; height:100%; object-fit:contain;}
.main-product-feature-featured > a:not(:first-child){display:none;} /* trước khi slick chạy: chỉ hiện ảnh 1 */
.main-product-feature-featured.slick-initialized > a:not(:first-child), .main-product-feature-featured.slick-initialized .slick-slide a{display:flex;}
.main-product-feature-thumbs{display:none !important;} /* đổi sang chuyển ảnh bằng mũi tên/chấm */
.main-product-feature-featured .slick-prev, .main-product-feature-featured .slick-next{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:40px; height:40px; border-radius:50%; border:1px solid var(--line, #dde4ea); background:rgba(255,255,255,.92); color:var(--ink, #16324a); font:700 20px/1 var(--sans, system-ui); cursor:pointer; box-shadow:0 2px 10px rgba(14,34,51,.16); transition:all .18s;}
.main-product-feature-featured .slick-prev{left:12px;} .main-product-feature-featured .slick-next{right:12px;}
.main-product-feature-featured .slick-prev:hover, .main-product-feature-featured .slick-next:hover{background:var(--blue, #1F6FB2); color:#fff; border-color:var(--blue, #1F6FB2);}
.main-product-feature-featured .slick-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:8px; list-style:none; margin:0; padding:0;}
.main-product-feature-featured .slick-dots li button{width:9px; height:9px; border-radius:50%; border:0; background:#c6d2dc; text-indent:-9999px; overflow:hidden; padding:0; cursor:pointer; transition:all .18s;}
.main-product-feature-featured .slick-dots li.slick-active button{background:var(--blue, #1F6FB2); transform:scale(1.25);}

/* Tỷ lệ hàng 2 như thienvu: mô tả 58 / nội dung phụ 42 */
.pd-main2{grid-template-columns:minmax(0,57fr) minmax(0,43fr); gap:40px;} /* v37: TRÙNG lưới hàng 1 (gallery|info) để mép mô tả/sidebar thẳng hàng, hết lệch */
@media (max-width:1200px){ .pd-main2{grid-template-columns:minmax(0,1fr) 320px;} }
@media (max-width:991px){ .pd-main2{grid-template-columns:1fr;} }

/* Sidebar dạng thẻ lớn: thumb to + tiêu đề + trích đoạn */
.pd-side-news .pdn-img{flex:0 0 128px; aspect-ratio:16/10; border-radius:8px;}
.pd-side-news a{gap:12px; padding:10px 8px;}
.pd-side-news .pdn-tt{font:650 14px/1.45 var(--sans, system-ui); -webkit-line-clamp:2;}
.pd-side-news .pdn-ex{font:450 12.5px/1.5 var(--sans, system-ui); color:var(--muted, #64717c); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px;}
.pd-side-sols li a{font-size:14.5px; padding:9px 16px;}
.pd-side-head{font-size:13.5px; padding:11px 16px;}

/* Chữ nghĩa khối mô tả: đậm nhạt rõ ràng, giãn dòng thoáng */
.pd-main2-left .main-product-description-item-data{font:430 15.5px/1.8 var(--sans, system-ui); color:#243442; letter-spacing:.002em;}
.pd-main2-left .main-product-description-item-data p{margin:0 0 12px;}
.pd-main2-left .main-product-description-item-data strong, .pd-main2-left .main-product-description-item-data b{font-weight:700; color:#16324a;}
.pd-main2-left .main-product-description-item-data h2{font:750 20px/1.35 var(--sans, system-ui); color:#14293d;}
.pd-main2-left .main-product-description-item-data h3{font:700 17px/1.4 var(--sans, system-ui); color:#14293d;}
.pd-main2-left .main-product-description-item-data li{margin-bottom:6px;}
.pd-main2-left .main-product-description-item-head{font-size:16px;}
.pd-side-news .pdn-txt{display:flex; flex-direction:column; min-width:0;}

/* ===== v39: mô tả dài thu gọn về điểm cân bằng với cột phải + nút Xem thêm (kiểu thienvu) ===== */
.pd-main2-left.pd-clamp{overflow:hidden; position:relative;}
.pd-more{position:absolute; left:0; right:0; bottom:0; z-index:4; text-align:center; padding:84px 0 22px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 62%);}
.pd-more button{border:0; cursor:pointer; background:var(--blue, #1F6FB2); color:#fff;
  font:700 14.5px/1 var(--sans, system-ui); padding:12px 34px; border-radius:999px;
  box-shadow:0 4px 16px rgba(31,111,178,.35); transition:all .18s;}
.pd-more button:hover{background:#16558a; transform:translateY(-1px);}
.pd-main2-left.pd-open .pd-more{position:static; padding:18px 0 0; background:none;}

/* ===== v40: trang giải pháp — bố cục bài đọc + typography (1 trang chính & 13 trang con) ===== */
.gp-grid{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start;}
@media (max-width:1100px){ .gp-grid{grid-template-columns:minmax(0,1fr) 300px;} }
@media (max-width:900px){ .gp-grid{grid-template-columns:1fr;} }
.gp-page .pd-side{position:sticky; top:86px;}
@media (max-width:900px){ .gp-page .pd-side{position:static;} }

/* Cột bài viết: thẻ trắng, chữ dễ đọc, canh lề đều */
.gp-article{background:var(--card, #fff); border:1px solid var(--line, #dde4ea); border-radius:14px;
  padding:clamp(20px,3vw,44px); font:430 16.5px/1.85 var(--sans, system-ui); color:#243442; min-width:0;}
.gp-article > *:first-child{margin-top:0;}
.gp-article h1{font:800 clamp(23px,2.4vw,30px)/1.3 var(--display, var(--sans, system-ui)); color:#14293d; margin:0 0 18px; letter-spacing:-.01em;}
.gp-article h2{font:750 clamp(19px,1.8vw,23px)/1.35 var(--display, var(--sans, system-ui)); color:#14293d; margin:34px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--amber, #e8a83e);}
.gp-article h3{font:700 17.5px/1.4 var(--sans, system-ui); color:#16324a; margin:24px 0 8px;}
.gp-article p{margin:0 0 14px;}
.gp-article strong, .gp-article b{font-weight:700; color:#16324a;}
.gp-article a{color:var(--blue, #1F6FB2); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(31,111,178,.3);}
.gp-article a:hover{border-bottom-color:var(--blue, #1F6FB2);}
.gp-article ul, .gp-article ol{margin:0 0 16px; padding-left:24px;}
.gp-article li{margin-bottom:7px;}
/* Ảnh: luôn căn giữa, bo góc, không tràn — bất kể chèn kiểu gì trong admin */
.gp-article img{display:block; max-width:100%; height:auto; margin:20px auto; border-radius:12px; box-shadow:0 4px 20px rgba(14,34,51,.10);}
.gp-article p[style*="text-align: center"], .gp-article div[style*="text-align: center"]{max-width:100% !important;}
.gp-article em{color:#5a6a76;}
.gp-article p > em:only-child{display:block; text-align:center; font-size:13.5px; margin-top:-12px;} /* caption dưới ảnh */
.gp-article table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px; display:block; overflow-x:auto;}
.gp-article table td, .gp-article table th{border:1px solid var(--line, #dde4ea); padding:9px 13px; vertical-align:top;}
.gp-article table th{background:var(--paper-2, #f2f6f9); font-weight:700; color:#16324a;}
.gp-article table tr:nth-child(even) td{background:#fafcfe;}
.gp-article blockquote{margin:18px 0; padding:14px 20px; border-left:4px solid var(--blue, #1F6FB2);
  background:var(--blue-soft, #eef4fa); border-radius:0 10px 10px 0; font-style:normal; color:#2c3e50;}
.gp-article hr{border:0; border-top:1px solid var(--line, #dde4ea); margin:26px 0;}
.gp-article iframe{max-width:100%; border-radius:12px;}

/* Trang page thường (kể cả trang chính Giải pháp): gom nội dung về 1280px, chữ 16px */
.main-page-wrap .main-page-data{max-width:1280px; margin:0 auto; font-size:16px; line-height:1.8;}

/* ===== v43: minh họa Kiến thức theo chủ đề ===== */
.art{overflow:hidden;}
.art .art-illu{display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:12px;
  background-size:cover; background-position:center; background-color:#0e2233;}
.art .art-illu img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.art:hover .art-illu img{transform:scale(1.05);}

/* v49: logo = file gốc của công ty; khoá tỉ lệ để KHÔNG BAO GIỜ méo */
.logo{display:flex;align-items:center;}
.logo-img{height:52px !important;width:auto !important;max-width:none;display:block;
  object-fit:contain;aspect-ratio:217/180;flex:0 0 auto;}
footer.site .logo-img{height:60px !important;}
.logo-img.inv{background:#fff;border-radius:10px;padding:5px 9px;}
@media (max-width:640px){.logo-img{height:42px !important;}}

/* ===== v58 (22/08) — SỬA 2 LỖI MOBILE PHÁT HIỆN BẰNG CHROME HEADLESS THẬT =====
   Bối cảnh: sandbox browser giả lập mobile bị lỗi (innerWidth kẹt desktop) nên các
   vòng kiểm trước không phát hiện được; đã dựng harness đo computed-style bằng
   Chrome headless sạch (--window-size=375) và tái hiện được cả hai lỗi trên bản live v56. */

/* LỖI 1: menu desktop HIỆN TRÊN MOBILE (đè cùng nút ☰) trên MỌI trang trừ trang chủ.
   Gốc rễ: bootstrap4.min.css (tự host từ v41, nạp qua master-include SAU theme.css)
   định nghĩa `.navbar{display:flex}` — cùng specificity với `.navbar{display:none}`
   trong media 1120px của theme nhưng thắng nhờ thứ tự nạp. Trước v41 file này lấy
   từ CDN jsdelivr vốn KHÔNG BAO GIỜ tải được trên store nên lỗi không biểu hiện;
   tự host xong (điều đúng) thì bootstrap mới thật sự nạp và lộ xung đột. */
@media (max-width:1120px){ .navbar{display:none !important;} }

/* LỖI 2: bài giải pháp TRÀN NGANG trên điện thoại — khối bài viết giãn theo bề rộng
   nội dung (đo 845px trong cột 470px) khiến tiêu đề/chữ bị cắt cụt mép phải.
   Đã thực nghiệm loại trừ: khử min-width bảng KHÔNG đủ; phải ép width khối bài
   (selector 3 lớp + !important để thắng `.main-page-wrap .main-page-data{max-width:1280px}`).
   Verify headless: mobile artW 845→470 khớp cột, scrollWidth = viewport (hết tràn),
   bảng vẫn giữ min-width 640 và cuộn ngang gọn BÊN TRONG wrapper (đúng thiết kế);
   desktop 1400px giữ nguyên 2 cột 904+340, không tác dụng phụ. */
.main-page-wrap .gp-article.main-page-data{width:100% !important; max-width:100% !important; min-width:0 !important;}
@media (max-width:900px){ .gp-grid{grid-template-columns:minmax(0,1fr);} }