: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;}

  .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,.74) 0%, rgba(5,12,20,.52) 34%, rgba(5,12,20,.14) 66%, rgba(5,12,20,.20) 100%),
               linear-gradient(0deg, rgba(5,12,20,.58) 0%, rgba(5,12,20,0) 46%); /* v30: sáng hơn */}
  .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;}
    .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/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;}
@media (max-width: 900px){
  .main-product-cta-quote a{flex:1 1 44%; min-width:0;}
}

/* ===================== 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){
  .main-product .main-product-wrap.has-side{grid-template-columns:57% minmax(0,1fr); 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;}