/* Font dự phòng có kích thước khớp Be Vietnam Pro (đo bằng fontTools): chữ hiện ngay bằng Arial đã chỉnh cỡ,
   khi Be Vietnam Pro nạp xong (assets/js/fonts.js) các dòng gần như không nhảy → giảm CLS */
@font-face{font-family:'BVP Fallback';src:local('Arial'),local('ArialMT');size-adjust:108.9%;ascent-override:91.9%;descent-override:24.3%;line-gap-override:0%}
@font-face{font-family:'BVP Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:105.7%;ascent-override:94.6%;descent-override:25.1%;line-gap-override:0%}
/* Bố cục: khối mở đầu, khách hàng, CTA nền tối; nội dung nền sáng. Desktop container 1200px, mobile lề 20px; thanh Gọi · Zalo · Tư vấn cố định đáy màn hình ≤ 760px. */
:root{
  /* nền & chữ cho phần nền sáng */
  --bg:#f5faf6; --surface:#ffffff; --surface-2:#ecf5ef;
  --ink:#10291d; --muted:#55685d; --line:#d9e7de;
  --brand-soft:#e2f2e7; --tech-soft:#e6eefb;
  --brand-text:#17733a; --tech-text:#1f5fbf;
  /* màu thương hiệu (cố định) */
  --brand:#17733a; --brand-bright:#2fa35a; --lime:#8cc63f;
  --tech:#1f5fbf; --tech-bright:#2b8ad8; --navy:#173f8a;
  /* nền tối */
  --deep:#06140e; --deep-2:#0c2219; --deep-3:#133126; --line-dark:#24443a;
  --on-dark:#eaf4ee; --on-dark-muted:#9db4a6;
  /* trạng thái */
  --warn:#b54708; --warn-soft:#fffaeb; --err:#b42318; --err-soft:#fef3f2; --ok:#067647; --focus:#2563eb;
  --grad:linear-gradient(90deg,#2b8ad8,#2fa35a);
  --grad-text:linear-gradient(90deg,#5fb4f0,#9bd55a);
  --r-btn:12px; --r-card:24px;
  --shadow:0 24px 48px -12px rgba(16,41,29,.10);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a1510; --surface:#10201a; --surface-2:#15291f;
    --ink:#e3efe7; --muted:#9db4a6; --line:#234133;
    --brand-soft:#133523; --tech-soft:#16264a; --brand-text:#5fd08a; --tech-text:#7ea9f2;
    --shadow:0 24px 48px -12px rgba(0,0,0,.45); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1510; --surface:#10201a; --surface-2:#15291f;
  --ink:#e3efe7; --muted:#9db4a6; --line:#234133;
  --brand-soft:#133523; --tech-soft:#16264a; --brand-text:#5fd08a; --tech-text:#7ea9f2;
  --shadow:0 24px 48px -12px rgba(0,0,0,.45); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:'Be Vietnam Pro','BVP Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section{padding:104px 0}
.dark{background:var(--deep-2);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate}
.dark .muted,.dark .lead{color:var(--on-dark-muted)}
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1}

/* Chữ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--grad);border-radius:2px}
.dark .eyebrow,.hero .eyebrow{color:var(--lime)}
.h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.h2{font-size:clamp(28px,3.4vw,44px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.h3{font-size:clamp(18px,1.6vw,22px);line-height:1.3;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}
.gtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.head{display:grid;grid-template-columns:minmax(0,620px) 1fr;gap:24px 80px;align-items:end;margin-bottom:48px}
.head .eyebrow{margin-bottom:16px}
.head.center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:860px;margin-inline:auto}

/* Nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px 14px 26px;border-radius:var(--r-btn);font-weight:600;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.btn .ico{width:18px;height:18px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -6px rgba(23,115,58,.35)}
.btn-primary:hover{background:var(--brand-bright)}
.btn-primary:active{background:var(--deep-3)}
.btn-primary:disabled{background:var(--line);color:#94a39c;box-shadow:none;cursor:not-allowed}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#e9f3ed}
.btn-ghost-dark{border-color:var(--on-dark-muted);color:var(--on-dark)}
.btn-ghost-dark:hover{background:rgba(234,244,238,.08)}
.btn-outline{border-color:var(--line);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--brand-text);color:var(--brand-text)}
.btn-sm{min-height:44px;padding:10px 18px}
.btn-block{width:100%}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--brand-text)}
.link .ico{width:16px;height:16px;transition:transform .2s}
.link:hover .ico{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:500;background:var(--surface);border:1px solid var(--line);color:var(--ink);line-height:1.2}
.dark .chip{background:var(--deep-3);border-color:var(--line-dark);color:var(--on-dark)}

/* Icon tile */
.tile{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#1f5fbf,#2b8ad8)}
.tile.g{background:linear-gradient(135deg,#17733a,#8cc63f)}
.tile .ico{width:24px;height:24px}
.tile.sm{width:40px;height:40px;border-radius:12px}.tile.sm .ico{width:19px;height:19px}

/* Header */
header.site{position:sticky;top:0;z-index:60;background:rgba(6,20,14,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(234,244,238,.08);color:var(--on-dark)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:40px;height:40px}
.logo b{display:block;font-weight:800;font-size:19px;letter-spacing:.02em;line-height:1.1}
.logo small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.26em;color:var(--on-dark-muted);line-height:1.4}
nav.main{display:flex;gap:30px}
nav.main a{font-size:15px;font-weight:600;color:var(--on-dark-muted);position:relative;padding:6px 0;transition:color .2s}
nav.main a:hover,nav.main a.on{color:var(--on-dark)}
nav.main a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad)}
.bar-act{display:flex;align-items:center;gap:20px}
.phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.phone .ico{color:var(--lime);width:18px;height:18px}
.m-only{display:none}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-dark);background:var(--deep-3);color:var(--on-dark);cursor:pointer}
.icon-btn.call{background:var(--brand);border-color:var(--brand)}

/* Drawer menu (mobile) */
.drawer{position:fixed;inset:0;z-index:80;background:var(--deep);color:var(--on-dark);display:flex;flex-direction:column;overflow:hidden auto;isolation:isolate;visibility:hidden;opacity:0;transition:opacity .28s ease,visibility 0s .28s;overscroll-behavior:contain}
.drawer.open{visibility:visible;opacity:1;transition:opacity .28s ease}
.drawer-pattern{position:absolute;right:-180px;top:40px;width:520px;opacity:.7;z-index:-1;pointer-events:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 20px;border-bottom:1px solid rgba(234,244,238,.08);flex:none}
.drawer-top .logo-mark{width:34px;height:34px}.drawer-top .logo b{font-size:16px}.drawer-top .logo small{font-size:7px}
.drawer-body{display:flex;flex-direction:column;gap:18px;padding:20px 20px calc(20px + env(safe-area-inset-bottom));flex:1}
.drawer-body>*{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer.open .drawer-body>*{opacity:1;transform:none}
.drawer.open .drawer-body>:nth-child(2){transition-delay:.05s}.drawer.open .drawer-body>:nth-child(3){transition-delay:.1s}.drawer.open .drawer-body>:nth-child(4){transition-delay:.15s}
.d-label{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:-10px}
.d-label a{display:inline-flex;align-items:center;gap:4px;font-family:'Be Vietnam Pro','BVP Fallback',sans-serif;letter-spacing:0;text-transform:none;font-size:13px;font-weight:600;color:var(--on-dark-muted)}
.d-label .ico{width:14px;height:14px}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-grid a{position:relative;display:flex;align-items:center;gap:10px;padding:11px 10px;min-height:62px;border-radius:16px;background:rgba(234,244,238,.05);border:1px solid rgba(234,244,238,.1);transition:background .2s,border-color .2s}
.d-grid a:active,.d-grid a:hover{background:rgba(234,244,238,.09);border-color:rgba(140,198,63,.5)}
.d-grid small{position:absolute;right:9px;top:7px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--on-dark-muted);opacity:.7}
.d-grid b{font-size:13.5px;font-weight:600;line-height:1.3;padding-right:14px}
.d-grid .tile{width:36px;height:36px;border-radius:11px}.d-grid .tile .ico{width:17px;height:17px}
.d-links{display:grid;border-radius:18px;background:rgba(234,244,238,.04);border:1px solid rgba(234,244,238,.08);overflow:hidden}
.d-links a{display:flex;align-items:center;gap:14px;padding:13px 16px;font-weight:600;font-size:16px}
.d-links a+a{border-top:1px solid rgba(234,244,238,.07)}
.d-links .ico{color:var(--lime);width:19px;height:19px}
.d-links .arr{margin-left:auto;color:var(--on-dark-muted);width:16px;height:16px}
.d-links a.on{background:rgba(140,198,63,.08)}
.d-contact{display:grid;gap:10px;margin-top:auto;padding:16px;border-radius:22px;background:linear-gradient(135deg,rgba(31,95,191,.28),rgba(23,115,58,.28));border:1px solid rgba(234,244,238,.12)}
.d-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-dark-muted)}
.live{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(140,198,63,.6);animation:pulse 2s infinite;flex:none}
.live.off{background:#9aa5a0;box-shadow:none;animation:none}
.d-phone{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.d-phone small{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:4px}
.d-row{display:grid;grid-template-columns:1.45fr 1fr;gap:10px}
.d-contact .d-head{display:flex;align-items:center;gap:12px}
.d-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(234,244,238,.08);border:1px solid rgba(234,244,238,.14);flex:none}
.d-av svg{width:30px;height:30px}
.d-head b{display:block;font-size:15.5px;margin-bottom:3px}
.d-head .d-status{font-size:12.5px}
.d-act{display:flex;align-items:center;gap:10px;min-height:58px;padding:9px 12px 9px 9px;border-radius:16px;background:var(--brand);color:#fff;box-shadow:0 10px 22px -10px rgba(23,115,58,.7);transition:transform .2s}
.d-act.z{background:var(--tech);box-shadow:0 10px 22px -10px rgba(31,95,191,.7)}
.d-act:active{transform:scale(.97)}
.d-act>.ico{flex:none;width:36px;height:36px;padding:9px;box-sizing:border-box;border-radius:11px;background:rgba(255,255,255,.16)}
.d-act span{font-size:15px;font-weight:800;line-height:1.15;white-space:nowrap}
.d-act small{display:block;font-size:11.5px;font-weight:500;opacity:.82;margin-bottom:2px}
.d-cb{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--on-dark-muted)}
.d-cb .ico{width:15px;height:15px;color:var(--lime)}
.d-zalo{background:var(--tech);color:#fff}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--deep);color:var(--on-dark);padding:56px 0 88px}
.hero-pattern{position:absolute;left:-60px;top:0;width:760px;height:auto;opacity:.6;z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:40px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--deep-3);border:1px solid var(--line-dark);font-size:13px;font-weight:500}
.badge .tag{white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--grad);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.12em}
.hero .h1{margin:26px 0 22px}
.hero .lead{color:var(--on-dark-muted);max-width:600px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.stats{display:flex;gap:48px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line-dark)}
.stats b{display:block;font-size:36px;font-weight:800;line-height:1.1;background:linear-gradient(180deg,#eaf4ee,#9bd55a);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:14px;color:var(--on-dark-muted)}

/* Orbit: logo ở giữa, 6 nhóm dịch vụ bao quanh */
.orbit{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin-inline:auto}
.ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px solid rgba(155,213,90,.12)}
.ring.r2{width:72%;height:72%;border-style:dashed;border-color:rgba(155,213,90,.2)}
.ring.r3{width:44%;height:44%;border-color:rgba(155,213,90,.26)}
.core{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(47,163,90,.45),rgba(43,138,216,0) 70%)}
.core svg{position:absolute;inset:0;margin:auto;width:66%;height:66%;filter:drop-shadow(0 0 30px rgba(47,163,90,.5))}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--deep-2);border:1px solid var(--line-dark);box-shadow:0 12px 24px -6px rgba(0,0,0,.4);white-space:nowrap;transition:border-color .2s,transform .2s}
.node:hover{border-color:var(--lime)}
.node .tile{width:34px;height:34px;border-radius:10px}.node .tile .ico{width:16px;height:16px}
.node small{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--lime);line-height:1.2}
.node b{display:block;font-size:13px;font-weight:500;line-height:1.3}
.n1{left:50%;top:11%}.n2{left:83.8%;top:30.5%}.n3{left:83.8%;top:69.5%}.n4{left:50%;top:89%}.n5{left:16.2%;top:69.5%}.n6{left:16.2%;top:30.5%}
/* Chuyển động nhẹ: vòng nét đứt xoay, 3 hạt sáng chạy trên quỹ đạo, tia quét, lõi thở, từng nhóm dịch vụ sáng lần lượt */
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes spin{to{rotate:360deg}}
@keyframes halo{0%,100%{scale:1;opacity:1}50%{scale:1.14;opacity:.75}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.04}}
@keyframes nodeGlow{0%,12%,100%{border-color:var(--line-dark);box-shadow:0 12px 24px -6px rgba(0,0,0,.4)}5%{border-color:rgba(155,213,90,.85);box-shadow:0 0 0 4px rgba(140,198,63,.14),0 0 26px rgba(140,198,63,.35)}}
.ring.r2{animation:spin 70s linear infinite}
.spin{position:absolute;inset:0;margin:auto;border-radius:50%;animation:spin 22s linear infinite;pointer-events:none}
.spin i{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#9bd55a;box-shadow:0 0 12px 3px rgba(155,213,90,.65)}
.sp2{width:72%;height:72%;animation-duration:15s;animation-direction:reverse}
.sp2 i{background:#5fb4f0;box-shadow:0 0 12px 3px rgba(95,180,240,.65)}
.sp3{width:44%;height:44%;animation-duration:9s}
.sp3 i{width:6px;height:6px;margin:-3px 0 0 -3px}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(155,213,90,.13) 50deg,transparent 70deg);-webkit-mask:radial-gradient(circle,transparent 21%,#000 22.5%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 21%,#000 22.5%,#000 70%,transparent 72%);animation:spin 9s linear infinite;pointer-events:none}
.core{animation:halo 4.5s ease-in-out infinite}
.core svg{animation:breathe 4.5s ease-in-out infinite}
.node{z-index:1;animation:bob 5s ease-in-out infinite,nodeGlow 9s ease-in-out infinite}
.n1{animation-delay:0s,0s}.n2{animation-delay:-1.6s,1.5s}.n3{animation-delay:-3.2s,3s}.n4{animation-delay:0s,4.5s}.n5{animation-delay:-1.6s,6s}.n6{animation-delay:-3.2s,7.5s}

/* Dải cam kết */
.perks{background:var(--surface);border-bottom:1px solid var(--line)}
.perks-list{list-style:none;display:flex;justify-content:space-between;gap:24px;padding:24px 0;position:relative}
.perks-list li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;white-space:nowrap}
.perk-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--tech-soft);color:var(--tech-text);flex:none}
.perks-list li:nth-child(even) .perk-ico{background:var(--brand-soft);color:var(--brand-text)}
.perk-ico .ico{width:18px;height:18px}

/* Một đầu mối */
.os{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:center}
.quote{display:flex;gap:18px;margin:24px 0 28px}
.quote::before{content:"";width:4px;border-radius:4px;background:linear-gradient(180deg,#1f5fbf,#2fa35a);flex:none}
.diagram{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.before{padding:22px;display:grid;gap:14px;align-content:start}
.cmp-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmp-h .eyebrow{white-space:nowrap}.cmp-count{padding:4px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;white-space:nowrap}
.cmp-count.bad{background:var(--err-soft);color:var(--err)}
.vendors{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vendor{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:9px 10px 9px 9px;border:1px dashed var(--line);border-radius:14px;background:var(--bg);font-size:14px;color:var(--muted)}
.v-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--muted)}
.vendor .ico{width:16px;height:16px}
.vendor em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 8px;border-radius:999px;background:var(--err-soft);color:var(--err);white-space:nowrap}
.cmp-pain{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--err)}
.cmp-pain .ico{flex:none;width:20px;height:20px;padding:4px;border-radius:50%;background:var(--err-soft);stroke-width:2.6;box-sizing:border-box}
.arrow-c{display:flex;flex-direction:column;align-items:center;gap:10px}
.arrow-c .ico{width:48px;height:48px;padding:14px;box-sizing:border-box;border-radius:50%;background:linear-gradient(135deg,#1f5fbf,#2fa35a);color:#fff;box-shadow:0 10px 24px -8px rgba(31,95,191,.55)}
.arrow-c b{display:none;max-width:84px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.after{padding:22px;border-radius:var(--r-card);background:radial-gradient(120% 70% at 100% 0%,rgba(43,138,216,.22),transparent 60%),var(--deep-2);color:var(--on-dark);display:grid;gap:14px;box-shadow:0 30px 60px -20px rgba(8,51,31,.35)}
.after-h{display:flex;align-items:center;gap:12px}
.after-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(234,244,238,.08);border:1px solid rgba(234,244,238,.12);flex:none}
.after-h svg{width:32px;height:32px}
.after-h b{display:block;font-size:16px}
.after-h small{display:block;margin-top:2px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--lime);letter-spacing:.04em}
.svc-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:6px}
.svc-mini li{display:flex;align-items:center;gap:9px;padding:9px 10px 9px 9px;border-radius:14px;background:rgba(234,244,238,.05);border:1px solid rgba(234,244,238,.09);font-size:13.5px;font-weight:600;line-height:1.25}
.svc-mini .tile.sm{width:30px;height:30px;border-radius:9px}.svc-mini .tile.sm .ico{width:15px;height:15px}
.svc-mini .mono{margin-left:auto;font-size:10.5px;color:var(--on-dark-muted)}
.cmp-gain{display:flex;align-items:center;gap:10px;margin:0;padding-top:14px;border-top:1px solid rgba(234,244,238,.1);font-size:13.5px;color:var(--on-dark)}
.check-row{display:flex;align-items:center;gap:10px;font-size:14px}
.ck{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#2fa35a,#8cc63f);color:var(--deep);flex:none}
.ck .ico{width:12px;height:12px;stroke-width:2.4}
.check-row .mono{margin-left:auto;font-size:10px;color:var(--on-dark-muted)}

/* 6 nhóm dịch vụ */
#dich-vu{background:var(--surface)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{display:flex;flex-direction:column;gap:18px;padding:30px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-bright)}
.svc-top{display:flex;justify-content:space-between;align-items:center}
.svc-num::before{content:attr(data-n)}
.svc-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:34px;color:var(--line);letter-spacing:-1px}
.svc-en{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tech-text)}
.svc-card:nth-child(even) .svc-en{color:var(--brand-text)}
.svc-card p{font-size:14px;color:var(--muted)}
.svc-items{display:flex;flex-wrap:wrap;gap:8px}
.svc-items .chip{font-size:12.5px;padding:6px 10px}
.svc-card .link{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}

/* Khách hàng */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.seg div{display:flex;align-items:center;gap:16px;padding:24px;border-radius:22px;background:var(--deep-3);border:1px solid var(--line-dark)}
.seg-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(140,198,63,.12);border:1px solid rgba(140,198,63,.35);color:var(--lime);flex:none}
.seg-ico .ico{width:24px;height:24px}
.needs-t{margin:40px 0 16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.needs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.need{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:22px;background:var(--deep-3);border:1px solid var(--line-dark);transition:border-color .2s}
.need:hover{border-color:var(--lime)}
.need .mono{font-size:11px;color:var(--lime);margin-top:auto}

/* Quy trình */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:35px;left:12.5%;right:12.5%;height:2px;border-radius:2px;background:var(--line)}
.steps::after{content:"";position:absolute;top:35px;left:12.5%;height:2px;width:var(--len,0px);border-radius:2px;background:linear-gradient(90deg,#2b8ad8,#8cc63f);box-shadow:0 0 10px rgba(140,198,63,.55);transition:width 1.1s cubic-bezier(.6,0,.2,1)}
.steps-dot{position:absolute;left:0;top:0;z-index:1;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#8cc63f;box-shadow:0 0 0 5px rgba(140,198,63,.22),0 0 18px #8cc63f;opacity:0;transition:transform 1.1s cubic-bezier(.6,0,.2,1),opacity .3s;pointer-events:none}
.steps-dot.show{opacity:1}
.steps li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 12px}
.step-ico{position:relative;z-index:2;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--tech-text);box-shadow:0 10px 24px -4px rgba(18,77,51,.14);transition:background .45s,border-color .45s,color .45s,transform .45s,box-shadow .45s}
.step-ico .ico{width:30px;height:30px;stroke-width:1.6}
.steps li.on .step-ico{background:linear-gradient(135deg,#1f5fbf,#2fa35a);border-color:transparent;color:#fff;box-shadow:0 14px 28px -6px rgba(31,95,191,.45)}
.steps li.cur .step-ico{transform:scale(1.08)}
.steps li.cur .step-ico::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(140,198,63,.6);animation:ringOut 1.4s ease-out infinite}
@keyframes ringOut{from{opacity:1;scale:1}to{opacity:0;scale:1.35}}
.steps h3{transition:color .45s}
.steps li.cur h3{color:var(--brand-text)}
.step-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--muted)}
.steps p{font-size:14px;color:var(--muted)}

/* Về chúng tôi */
#ve-chung-toi{background:var(--surface)}
.about{display:grid;grid-template-columns:400px 1fr;gap:56px}
/* Ý nghĩa logo: slide tự chạy, logo bên trái làm sáng nửa tương ứng */
.meaning{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;margin-top:28px;padding:18px;border-radius:24px;background:var(--bg);border:1px solid var(--line)}
.mean-visual{position:relative;width:104px;height:104px;display:grid;place-items:center}
.mean-visual svg{width:72px;height:72px;position:relative;z-index:1;filter:drop-shadow(0 8px 16px rgba(23,115,58,.25))}
.mv-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--brand-bright) 45%,transparent);animation:spin 18s linear infinite}
.mv-shade{position:absolute;z-index:2;top:16px;width:36px;height:72px;background:var(--bg);opacity:0;transition:opacity .5s}
.mv-shade.l{left:16px;border-radius:72px 0 0 72px}
.mv-shade.r{right:16px;border-radius:0 72px 72px 0}
.meaning[data-i="0"] .mv-shade.r,.meaning[data-i="1"] .mv-shade.l{opacity:.72}
.meaning[data-i="2"] .mv-ring{border-style:solid;border-color:var(--lime);box-shadow:0 0 18px rgba(140,198,63,.35)}
.mean-list{display:grid;gap:4px}
.mean{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 10px 12px;border:0;border-radius:14px;background:transparent;text-align:left;cursor:pointer;transition:background .35s}
.mean .tile{opacity:.55;transition:opacity .35s,transform .35s}
.mean b{display:block;font-size:15px;color:var(--muted);transition:color .35s}
.mean-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.mean-p>span{overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--muted)}
.mean.on{background:var(--surface);box-shadow:0 10px 24px -14px rgba(16,41,29,.35)}
.mean.on .tile{opacity:1;transform:scale(1.05)}
.mean.on b{color:var(--ink)}
.mean.on .mean-p{grid-template-rows:1fr}
.mean.on .mean-p>span{padding-top:4px}
.mean-bar{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--line);opacity:0}
.mean-bar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#2b8ad8,#8cc63f)}
.mean.on .mean-bar{opacity:1}
.mean.on.run .mean-bar i{animation:fillBar var(--dur,4.5s) linear forwards}
.meaning:hover .mean.on.run .mean-bar i{animation-play-state:paused}
@keyframes fillBar{to{width:100%}}
.addr{display:flex;gap:12px;padding:18px;margin-top:28px;border-radius:16px;background:var(--surface-2)}
.addr .ico{color:var(--brand-text);margin-top:2px}
.addr small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.codes{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.codes table{width:100%;border-collapse:collapse}
.codes th{text-align:left;padding:14px 28px;background:var(--surface-2);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.codes td{padding:13px 28px;border-top:1px solid var(--line);font-size:15px;vertical-align:middle}
.codes td:first-child{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--tech-text);width:110px}
.codes tr.main td{background:var(--brand-soft);font-weight:600}
.codes tr.main td:first-child{color:var(--brand-text)}
.pill-main{display:inline-flex;margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:500;vertical-align:middle}
.codes-note{padding:14px 28px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}

/* Hỏi đáp */
.faq-wrap{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:start}
.faq-side{position:sticky;top:110px}
.help-card{position:relative;overflow:hidden;isolation:isolate;margin-top:28px;padding:22px;border-radius:24px;background:var(--deep-2);color:var(--on-dark);box-shadow:0 24px 48px -20px rgba(6,20,14,.5)}
.help-head{display:flex;align-items:center;gap:12px}
.help-av{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(234,244,238,.08);border:1px solid rgba(234,244,238,.14);flex:none}
.help-av svg{width:32px;height:32px}
.help-head b{display:block;font-size:15px}
.help-st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--on-dark-muted)}
.help-card p{margin:14px 0 16px;font-size:14px;color:var(--on-dark-muted)}
.help-act{display:flex;flex-wrap:wrap;gap:10px}
.help-act .btn{flex:1;padding-inline:14px}
.faq{display:grid;gap:12px}
.faq details{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#1f5fbf,#2fa35a);opacity:0;transition:opacity .3s}
.faq details:hover{border-color:color-mix(in srgb,var(--brand-bright) 45%,var(--line))}
.faq details[open]{border-color:transparent;box-shadow:var(--shadow)}
.faq details[open]::before{opacity:1}
.faq summary{display:flex;align-items:center;gap:16px;padding:18px 20px 18px 22px;font-weight:700;font-size:16.5px;line-height:1.4;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.q-num{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;flex:none;transition:background .3s,color .3s}
.faq details[open] .q-num{background:linear-gradient(135deg,#1f5fbf,#2fa35a);color:#fff}
.q-txt{flex:1;transition:color .2s}
.faq summary:hover .q-txt{color:var(--brand-text)}
.pm{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface-2);flex:none;transition:transform .3s,background .3s}
.faq details[open] .pm{background:var(--brand);color:#fff;transform:rotate(45deg)}
.pm .ico{width:16px;height:16px}
.faq .a{overflow:hidden}
.faq .a p{padding:0 24px 22px 76px;color:var(--muted)}

/* Liên hệ */
.contact-box{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 500px;gap:64px;align-items:center;padding:64px;border-radius:36px;background:var(--deep);color:var(--on-dark)}
.channels{display:grid;gap:12px;margin-top:28px}
.channel{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--deep-3);border:1px solid var(--line-dark)}
.channel .tile{width:40px;height:40px;border-radius:12px}.channel .tile .ico{width:20px;height:20px}
.channel small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.channel b{font-weight:600;font-size:15px;word-break:break-word}
.copy{margin-left:auto;padding:6px 12px;border-radius:999px;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark);font-size:12px;cursor:pointer}
.legal{margin-top:20px;font-size:13px;color:var(--on-dark-muted)}
.lead-form{position:relative;display:grid;gap:18px;padding:36px;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 40px 80px -24px rgba(0,0,0,.4)}
.lead-form h3{font-size:24px;font-weight:700}
.field{display:grid;gap:8px;border:0}
.field label,.field legend{font-size:14px;font-weight:600}
.field input,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-size:16px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--brand-bright);box-shadow:0 0 0 4px rgba(47,163,90,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.8}
.field.err input{border-color:var(--err);border-width:2px}
.help{font-size:13px;color:var(--muted)}.field.err .help{color:var(--err)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pills label{cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-flex;padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;transition:all .2s}
.pills input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.pills input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.consent input{width:20px;height:20px;accent-color:var(--brand);margin-top:2px;flex:none}
.form-msg{display:flex;gap:10px;padding:12px 14px;border-radius:12px;font-size:14px}
.form-msg.err{background:var(--err-soft);color:var(--err);border:1px solid var(--err)}
.form-msg.ok{background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-bright)}
.secure{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.secure .ico{width:14px;height:14px}
/* hướng dẫn điền form */
.form-guide{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-radius:10px;background:var(--surface-2);font-size:13px;color:var(--muted)}
.form-guide.done{opacity:.7}
.fg-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-bright);flex:none}
.fg-steps{display:flex;gap:4px;margin-left:auto}
.fg-steps i{width:14px;height:4px;border-radius:2px;background:var(--line)}
.fg-steps i.on{background:var(--brand-bright)}
.form-hand{position:absolute;left:0;top:0;width:38px;height:38px;fill:var(--ink);stroke:var(--surface);stroke-width:1;opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .3s;z-index:3}
.form-hand.show{opacity:.9}.form-hand.tap{animation:tap .35s}
@keyframes tap{50%{scale:.85}}
.demo-focus{border-color:var(--brand-bright)!important;box-shadow:0 0 0 4px rgba(47,163,90,.18)}
.demo-ping{animation:ping .9s}
@keyframes ping{40%{box-shadow:0 0 0 6px rgba(47,163,90,.3)}}

/* Footer */
footer{background:var(--deep);color:var(--on-dark);padding:80px 0 0}
.foot{display:grid;grid-template-columns:280px repeat(3,1fr) 300px;gap:40px}
.foot p{font-size:14px;color:var(--on-dark-muted);margin-top:18px}
.foot h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:12px;font-size:14px}
.foot ul a:hover{color:var(--lime)}
.foot .ci{display:flex;gap:10px;font-size:14px}.foot .ci .ico{color:var(--lime);width:18px;height:18px;margin-top:2px}
.social{display:flex;gap:10px;margin-top:20px}
.social a{padding:8px 12px;border-radius:999px;background:var(--deep-3);border:1px solid var(--line-dark);font-size:13px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding:24px 0 36px;border-top:1px solid var(--line-dark);font-size:14px;color:var(--on-dark-muted)}

/* Nút nổi desktop, thanh hành động mobile, lời nhắc tư vấn */
.fab{position:fixed;right:32px;bottom:32px;z-index:50;display:grid;gap:12px}
.fab a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;box-shadow:0 10px 24px -4px rgba(0,0,0,.25);transition:transform .2s}
.fab a:hover{transform:scale(1.06)}
.fab .z{background:var(--tech)}.fab .p{background:var(--brand);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,163,90,.5)}70%{box-shadow:0 0 0 16px rgba(47,163,90,0)}100%{box-shadow:0 0 0 0 rgba(47,163,90,0)}}
.actionbar{display:none}
/* Lời nhắc tư vấn: thẻ nhỏ góc trái dưới */
.nudge{position:fixed;left:24px;bottom:24px;z-index:55;width:300px;display:flex;gap:10px;align-items:flex-start;padding:11px 10px 11px 11px;border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 30px -10px rgba(6,20,14,.32);opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom left;pointer-events:none;transition:opacity .35s,transform .35s}
.nudge.show{opacity:1;transform:none;pointer-events:auto}
.nudge-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1f5fbf,#2fa35a);color:#fff;flex:none}
.nudge-ico .ico{width:17px;height:17px}
.nudge small{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--brand-text);text-transform:uppercase}
.nudge-title{display:block;font-size:13.5px;line-height:1.35;margin-top:1px}
.nudge p{display:none}
.nudge-act{display:flex;align-items:center;gap:6px;margin-top:8px}
.nudge-act .btn{min-height:30px;padding:5px 12px;font-size:12.5px;box-shadow:none}
.nudge-x,.nudge-mute{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;flex:none}
.nudge-x .ico,.nudge-mute .ico{width:14px;height:14px}
.nudge-mute{background:var(--brand-soft);color:var(--brand-text)}
.nudge-mute .ico{transform-origin:50% 15%}
.nudge.show .nudge-mute .ico{animation:bellRing 1.1s ease-in-out .3s 2}
@keyframes bellRing{0%,100%{rotate:0deg}15%{rotate:16deg}30%{rotate:-14deg}45%{rotate:10deg}60%{rotate:-6deg}75%{rotate:3deg}}
.nudge-body{flex:1}

/* Tablet */
@media (max-width:1100px){
  nav.main{gap:20px}.phone span{display:none}
  .hero-grid{grid-template-columns:1fr}
  .orbit{max-width:460px}
  .os,.about,.faq-wrap{grid-template-columns:1fr;gap:40px}
  .faq-side{position:static}
  .svc{grid-template-columns:repeat(2,1fr)}
  .needs{grid-template-columns:repeat(2,1fr)}
  .contact-box{grid-template-columns:1fr;padding:48px}
  .foot{grid-template-columns:1fr 1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  nav.main,.bar-act .phone,.bar-act .btn{display:none}
  .m-only{display:flex;gap:8px}
}
/* Mobile 390 */
@media (max-width:760px){
  .section{padding:64px 0}
  .bar{height:68px}
  .logo-mark{width:34px;height:34px}.logo b{font-size:16px}.logo small{font-size:7px}
  .hero{padding:28px 0 48px}
  .hero .h1{font-size:35px;margin:20px 0 16px}
  .badge{font-size:12px;padding-right:12px}.badge .tag{font-size:9.5px;padding:3px 8px}
  .ctas{flex-direction:column}.ctas .btn{width:100%}
  .stats{justify-content:space-between;gap:12px}.stats b{font-size:30px}
  .orbit{max-width:350px;margin-top:16px}
  .node{padding:6px 10px 6px 6px;gap:6px}.node .tile{width:26px;height:26px;border-radius:8px}.node .tile .ico{width:13px;height:13px}
  .node b{font-size:11px}.node small{font-size:8.5px}
  .head{grid-template-columns:1fr;margin-bottom:28px}
  .perks-list{overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 0;justify-content:flex-start;scrollbar-width:none}
  .perks-list::-webkit-scrollbar{display:none}
  .perks-list li{scroll-snap-align:start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
  .diagram{grid-template-columns:1fr;gap:14px}
  .arrow-c{flex-direction:row;justify-content:center}.arrow-c .ico{transform:rotate(90deg);width:42px;height:42px;padding:12px}.arrow-c b{display:block;max-width:none}
  .svc{grid-template-columns:1fr;gap:14px}
  .svc-card{padding:22px}
  .seg,.needs{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr;gap:0;text-align:left}
  .steps::before{left:23px;right:auto;top:24px;bottom:50px;width:2px;height:auto}
  .steps::after{left:23px;top:24px;width:2px;height:var(--len,0px);background:linear-gradient(180deg,#2b8ad8,#8cc63f);transition:height 1.1s cubic-bezier(.6,0,.2,1)}
  .steps li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:0 0 26px}
  .steps li>div{display:grid;gap:4px}
  .step-ico{width:48px;height:48px;flex:none}.step-ico .ico{width:22px;height:22px}
  .codes th,.codes td{padding:12px 16px}.codes td{font-size:14px}.codes td:first-child{width:64px}
  .pill-main{display:none}
  .contact-box{padding:28px 20px;border-radius:0;margin-inline:-20px}
  .lead-form{padding:20px}
  .row2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:28px}
  .fab{display:none}
  .actionbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.16);transition:transform .25s}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:8px 12px;border-radius:14px;font-weight:600;font-size:14px;line-height:1.2}
  .actionbar small{display:block;font-size:11.5px;font-weight:500;opacity:.9}
  .a-call{flex:1;background:var(--brand);color:#fff}
  .a-zalo{background:var(--tech);color:#fff}
  .a-form{border:1.5px solid var(--line);color:var(--ink)}
  .ab-ico{position:relative;display:flex}
  .ab-dot{position:absolute;left:-14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(140,198,63,.6);animation:pulse 2s infinite}
  body.is-typing .actionbar{transform:translateY(140%)}
  body.is-typing .nudge{display:none}
  /* Thanh hành động nổi, nền kính mờ */
  .actionbar{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:7px;gap:7px;border-radius:22px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 14px 34px -8px rgba(6,20,14,.38)}
  .actionbar a{min-height:50px;border-radius:16px}
  .a-call{box-shadow:0 8px 18px -6px rgba(23,115,58,.55)}
  .a-form{border:0;background:var(--brand-soft);color:var(--brand-text)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  /* Lời nhắc gọn trên mobile */
  .nudge{left:12px;right:auto;width:min(290px,calc(100% - 24px));bottom:calc(84px + env(safe-area-inset-bottom))}
  /* Hỏi đáp & ý nghĩa logo */
  .faq-side{position:static}
  .help-card{margin-top:22px}
  .faq summary{padding:15px 14px 15px 16px;gap:12px;font-size:15.5px}
  .q-num{width:32px;height:32px;border-radius:10px;font-size:11px}
  .faq .a p{padding:0 16px 18px 60px;font-size:15px}
  .meaning{grid-template-columns:84px 1fr;padding:14px;gap:12px}
  .mean-visual{width:84px;height:84px}.mean-visual svg{width:58px;height:58px}
  .mv-shade{top:13px;width:29px;height:58px}.mv-shade.l{left:13px}.mv-shade.r{right:13px}
  .mean{padding:9px 8px 11px;gap:10px}.mean b{font-size:14px}
  /* Số liệu hero: thẻ 3 cột */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;padding:16px 0;border:1px solid var(--line-dark);border-radius:18px;background:rgba(234,244,238,.04)}
  .stats>div{text-align:center;padding:0 8px}
  .stats>div+div{border-left:1px solid var(--line-dark)}
  .stats b{font-size:28px}
  .stats span{display:block;font-size:12px;line-height:1.35;margin-top:2px}
  /* Dịch vụ */
  .svc-card{gap:14px}
  .svc-num{font-size:26px}
  .tile{width:46px;height:46px;border-radius:14px}
  /* Khách hàng gọn */
  .seg div{padding:14px 16px;gap:14px;border-radius:18px}
  .seg-ico{width:42px;height:42px}.seg-ico .ico{width:20px;height:20px}
  .seg .h3{font-size:16px}
  .needs-t{margin:28px 0 12px}
  .needs{grid-template-columns:1fr 1fr;gap:10px}
  .need{padding:16px;gap:10px;border-radius:18px}
  .need .h3{font-size:15px}
  .need .mono{font-size:10px}
  /* Về chúng tôi, hỏi đáp */
  .addr{margin-top:20px}
  /* Footer */
  .foot>div:last-child{grid-column:1/-1}
}
/* Giảm chuyển động: chỉ tắt hiệu ứng trang trí (giữ đếm số, nhịp nút gọi, lời nhắc) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .svc-card:hover,.fab a:hover{transform:none}
}

/* ===== Chữ: cân dòng tiêu đề, tránh chữ lẻ cuối đoạn ===== */
h1,h2,h3,.h1,.h2,.h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* ===== Vùng bấm ≥44px ===== */
.foot ul{gap:0}
.foot ul a,.foot ul li>span{display:inline-flex;align-items:center;min-height:44px}
.foot .ci{align-items:center;min-height:44px}
.foot .ci a{overflow-wrap:anywhere;word-break:normal!important}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.channel .map{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--lime)}
.copy{min-height:44px;padding:0 16px;font-size:13px}
.consent{min-height:44px;align-items:center}
.consent input{width:22px;height:22px;margin-top:0}
.d-label a{min-height:44px}
@media (min-width:761px){.foot-bottom{padding-right:96px}}
@media (min-width:1321px){.perks-list{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between}.perks-list li{white-space:normal}}
@media (min-width:761px) and (max-width:1320px){.perks-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}.perks-list li{white-space:normal}}

.svc-act{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.svc-card .svc-act .link{margin:0;padding:0;border:0;min-height:44px}
.link-2{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--muted)}
.link-2:hover{color:var(--brand-text)}

/* ===== Cam kết dưới nút chính ===== */
.commit{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:13.5px;color:var(--on-dark-muted)}
.commit span{display:inline-flex;align-items:center;gap:6px}
.commit .ico{width:15px;height:15px;color:var(--lime)}
.commit.light{color:var(--muted)}.commit.light .ico{color:var(--brand-text)}

/* ===== Ô dữ liệu cần điền ===== */
.ph{display:inline;padding:0 6px;border-radius:6px;background:#fffaeb;color:#b54708;border:1px dashed #f5b544;font-weight:600;font-style:normal}
.dark .ph,.plan.hot .ph{background:rgba(245,181,68,.12);color:#f5c26b;border-color:rgba(245,181,68,.5)}

/* ===== Dự án tiêu biểu ===== */
#du-an{background:var(--bg)}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pj{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pj:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.img-ph{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--bg) 14px 28px);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12.5px;text-align:center;padding:12px}
.img-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* Ảnh bìa tạm cho thẻ dự án khi chưa có ảnh thật */
.pj-cover{place-content:center;justify-items:center;gap:8px;background:radial-gradient(120% 90% at 85% 0%,rgba(47,163,90,.35),transparent 60%),linear-gradient(150deg,#0b2a1c,#06140e);color:var(--on-dark);font-family:inherit;overflow:hidden}
.pj-cover.b{background:radial-gradient(120% 90% at 15% 0%,rgba(43,138,216,.38),transparent 60%),linear-gradient(150deg,#0c2140,#06140e)}
.pj-cover.c{background:radial-gradient(120% 90% at 50% 0%,rgba(140,198,63,.3),transparent 60%),linear-gradient(150deg,#10301f,#071a24)}
.pj-cover b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.pj-cover small{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.72)}
.pj-ind{font-size:12.5px;font-weight:600;color:var(--muted);text-align:right}
.pj-flow dd{line-height:1.55}
.pj-body{display:grid;gap:14px;padding:22px}
.pj-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}.pj-top .chip{white-space:nowrap}
.pj-flow{display:grid;gap:10px}
.pj-flow div{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px}
.pj-flow dt{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700}
.pj-flow div:last-child dt{background:var(--brand-soft);color:var(--brand-text)}
.pj-flow dd b{display:block;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pj-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pj-metrics div{padding:12px;border-radius:14px;background:var(--brand-soft)}
.pj-metrics b{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--brand-text)}
.pj-metrics b.ph{font-size:14px;white-space:nowrap}
.pj-metrics span{font-size:12.5px;color:var(--muted)}
.note{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;color:var(--muted)}
.note .ico{width:16px;height:16px;color:var(--warn)}

/* ===== Khách hàng nói gì + logo ===== */
#danh-gia{background:var(--surface)}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:40px}
.logo-box{display:grid;place-items:center;height:72px;border-radius:16px;border:1px dashed var(--line);background:var(--bg);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px}
.logo-box img{max-height:40px;width:auto;filter:grayscale(1);opacity:.75}
.logos.three{grid-template-columns:repeat(3,1fr)}
.logo-box.name{border-style:solid;font-family:inherit;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;text-align:center;padding:0 12px}
.q-who .q-av{font-weight:800;font-size:17px;color:var(--brand-text);background:var(--brand-soft)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q-card{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:24px;background:var(--bg);border:1px solid var(--line)}
.q-card>.ico{width:30px;height:30px;color:var(--brand-text)}
.q-card blockquote{font-size:16px;line-height:1.65}
.q-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.q-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--muted);flex:none;overflow:hidden}
.q-av img{width:100%;height:100%;object-fit:cover}
.q-who b{display:block;font-size:15px;color:var(--ink)}.q-who span{font-size:13px;color:var(--muted)}

/* ===== Gói dịch vụ / giá tham khảo ===== */
#bang-gia{background:var(--bg)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:28px;background:var(--surface);border:1px solid var(--line)}
.plan.hot{background:var(--deep);color:var(--on-dark);border-color:transparent;box-shadow:0 30px 60px -20px rgba(8,51,31,.45)}
.plan-name{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.plan.hot .plan-name{color:var(--lime)}
.plan h3{font-size:22px;font-weight:800}
.plan-for{font-size:14px;color:var(--muted)}
.plan.hot .plan-for{color:var(--on-dark-muted)}
.plan-img{margin:4px 0;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.plan-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.plan:hover .plan-img img{transform:scale(1.04)}
.plan.hot .plan-img{box-shadow:0 0 0 1px var(--line-dark)}
.plan-price{display:flex;align-items:baseline;gap:8px;padding:16px 0;border-block:1px solid var(--line)}
.plan.hot .plan-price{border-color:var(--line-dark)}
.plan-price small{font-size:14px;color:var(--muted)}
.plan.hot .plan-price small{color:var(--on-dark-muted)}
.plan-price b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.plan ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
.plan li{display:flex;gap:10px}
.plan li .ck{width:20px;height:20px;margin-top:2px}
.plan .btn{margin-top:auto}

/* ===== Ảnh văn phòng / đội ngũ ===== */
.about-photos{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-top:22px}
.about-photos figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--surface-2)}
.about-photos img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.about-photos figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(6,20,14,.7);color:#fff;font-size:12px}

/* ===== Bảng mã ngành & thẻ dịch vụ thu gọn trên mobile ===== */
.codes-more,.chip-more{display:none}
.chip-more{align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;border:1px dashed var(--brand-text);background:transparent;color:var(--brand-text);font-size:12.5px;font-weight:600;cursor:pointer}

/* ===== Trang con: dịch vụ, blog ===== */
.page-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--deep);color:var(--on-dark);padding:32px 0 64px}
.page-hero .hero-pattern{left:auto;right:-160px;top:-40px;width:620px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;color:var(--on-dark-muted);margin-bottom:28px}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.crumb a:hover{color:var(--on-dark)}
.crumb span[aria-current]{color:var(--on-dark)}
.page-hero .h1{margin:18px 0 18px;max-width:880px}
.page-hero .lead{color:var(--on-dark-muted);max-width:760px}
.page-hero .ctas{margin-top:28px}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.prose{max-width:760px;font-size:17px;line-height:1.75}
.prose h2{font-size:clamp(22px,2.4vw,30px);line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:700;margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:8px}
.prose a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 24px}
.item{display:flex;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.55}
.item .tile{width:38px;height:38px;border-radius:11px}.item .tile .ico{width:18px;height:18px}
.item b{display:block}
.callout{display:flex;gap:14px;padding:20px;margin:8px 0 24px;border-radius:18px;background:var(--brand-soft);font-size:15.5px}
.callout .ico{width:22px;height:22px;color:var(--brand-text);margin-top:3px}
.side-card{position:sticky;top:100px;display:grid;gap:14px;padding:24px;border-radius:24px;background:var(--deep-2);color:var(--on-dark);box-shadow:0 24px 48px -20px rgba(6,20,14,.5)}
.side-card h2{font-size:20px;font-weight:800}
.side-card p{font-size:14px;color:var(--on-dark-muted)}
.side-card .btn{width:100%}
.side-list{list-style:none;display:grid;gap:2px;margin-top:4px;border-top:1px solid var(--line-dark);padding-top:12px}
.side-list a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--on-dark-muted)}
.side-list a:hover,.side-list a[aria-current]{color:var(--on-dark)}
.side-list .ico{width:16px;height:16px;color:var(--lime)}
.related{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.related a{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:15px;transition:border-color .2s,transform .2s}
.related a:hover{border-color:var(--brand-bright);transform:translateY(-3px)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-cover{display:grid;place-items:center;aspect-ratio:16/9;color:#fff}
.post-cover .ico{width:44px;height:44px;opacity:.9}
.post-body{display:grid;gap:10px;padding:20px}
.post-meta{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text)}
.post-body h2,.post-body h3{font-size:19px;line-height:1.35;font-weight:700}
.post-body p{font-size:14.5px;color:var(--muted)}
.post-body .link{margin-top:4px}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--on-dark-muted)}

@media (max-width:1100px){
  .projects,.quotes,.plans,.posts{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .related{grid-template-columns:repeat(3,1fr)}
  .page-grid{grid-template-columns:1fr}
  .side-card{position:static}
}
@media (max-width:760px){
  .projects,.quotes,.plans,.posts{grid-template-columns:1fr}
  .plan{padding:24px}
  .items-grid{grid-template-columns:1fr}
  .related{grid-template-columns:1fr 1fr}
  .prose{font-size:16px}
  .page-hero{padding:20px 0 44px}
  .crumb{margin-bottom:12px}
}

/* ===== Mobile ≤480px: rút gọn trang, chữ tối thiểu 12px ===== */
@media (max-width:480px){
  .orbit{max-width:280px}
  .node{padding:5px;gap:0}
  .node>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .node .tile{width:34px;height:34px;border-radius:10px}.node .tile .ico{width:16px;height:16px}
  .logo small,.drawer-top .logo small{font-size:9px;letter-spacing:.18em}
  .eyebrow,.svc-en,.step-n,.need .mono,.plan-name,.post-meta,.codes th,.channel small,.d-label,.nudge small,.pj-flow dd b,.addr small,.foot h4{font-size:12px}
  .d-grid small{font-size:12px;top:6px;right:8px}
  .check-row .mono{font-size:12px}
  .svc-items .chip:nth-child(n+5){display:none}
  .svc-card.open .svc-items .chip{display:inline-flex}
  .chip-more{display:inline-flex}
  .svc-card.open .chip-more{display:none}
  .codes tbody tr:nth-child(n+5){display:none}
  .codes.open tbody tr{display:table-row}
  .codes-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:0;border-top:1px solid var(--line);background:var(--surface);color:var(--brand-text);font-weight:600;font-size:14px;cursor:pointer}
  .codes.open .codes-more{display:none}
  .logos{grid-template-columns:1fr 1fr}
  .about-photos{grid-template-columns:1fr}
}
/* Một đầu mối – mobile */
.os>*,.diagram>*{min-width:0}
@media (min-width:481px) and (max-width:760px){.svc-mini{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.before,.after{padding:18px}.cmp-h .eyebrow{letter-spacing:.12em}.cmp-h .eyebrow::before{width:16px}.svc-mini{grid-template-columns:1fr;gap:6px}.svc-mini li{padding:7px 12px 7px 7px;font-size:14px}.vendor{font-size:13.5px}}
/* Với Trí Nhân: thanh sáng trượt 01→06 (JS thêm .seq, .lit, .done) */
.svc-mini{position:relative}
.svc-glide{position:absolute;left:0;top:0;border-radius:14px;border:1px solid rgba(140,198,63,.7);background:linear-gradient(90deg,rgba(140,198,63,.22),rgba(43,138,216,.12));box-shadow:0 0 22px -4px rgba(140,198,63,.55);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.65,0,.35,1),width .3s,height .3s,opacity .35s}
.svc-glide.on{opacity:1}
.after.seq .svc-mini li{opacity:.5;transition:opacity .45s,border-color .45s,background .45s}
.after.seq .svc-mini li.lit{opacity:1;border-color:rgba(140,198,63,.28);background:rgba(140,198,63,.06)}
.after.seq .svc-mini li.lit .mono{color:var(--lime)}
.after.seq .cmp-gain{opacity:.5;transition:opacity .5s}
.after.done .cmp-gain{opacity:1}
.after.done .cmp-gain .ck{animation:gainPop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes gainPop{0%{transform:scale(.4)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
/* ===== Đợt hoàn thiện 10/2026 ===== */
/* Skip link: chỉ hiện khi dùng bàn phím (Tab) */
.skip{position:fixed;left:12px;top:-80px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}

/* Bật / tắt mục bằng cờ trong assets/js/config.js (config.js gắn class lên <html>) */
.no-cases #du-an,.no-cases a[href$="#du-an"],.no-cases li:has(>a[href$="#du-an"]){display:none!important}
.no-testi #danh-gia,.no-testi a[href$="#danh-gia"],.no-testi li:has(>a[href$="#danh-gia"]){display:none!important}

/* Trạng thái trực tuyến trong lời nhắc */
.nudge small{display:flex;align-items:center;gap:6px}
.nudge small .live{width:7px;height:7px}

/* Form lỗi: kèm nút Gọi / Zalo */
.form-msg{flex-wrap:wrap}
.form-msg-act{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.form-msg-act .btn{min-height:44px;padding:8px 14px;font-size:14px;box-shadow:none}
.consent a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}

/* Dòng giá gói (hiện khi điền PLAN_PRICES) */
.plan-price b{color:var(--brand-text)}
.plan.hot .plan-price b{color:var(--lime)}
.plan-price span{font-size:20px;font-weight:800}

/* Thẻ dự án: nút Xem chi tiết chỉ dùng trên mobile */
.pj-more{display:none}
.pj-cover img{z-index:2}

/* Vùng bấm tối thiểu 44px */
.faq summary{min-height:56px}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}

/* ===== Mobile ≤768px: trang ngắn gọn ===== */
@media (max-width:768px){
  .nudge{display:none!important}
  /* quỹ đạo dịch vụ ở hero: tối đa 260px */
  .orbit{max-width:260px;margin-inline:auto}
  .node{padding:5px;gap:0}
  .node>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .node .tile{width:34px;height:34px;border-radius:10px}.node .tile .ico{width:16px;height:16px}
  /* bảng mã ngành: 4 dòng + Xem đầy đủ */
  .codes tbody tr:nth-child(n+5){display:none}
  .codes.open tbody tr{display:table-row}
  .codes-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:0;border-top:1px solid var(--line);background:var(--surface);color:var(--brand-text);font-weight:600;font-size:14px;cursor:pointer}
  .codes.open .codes-more{display:none}
  /* gói dịch vụ: bỏ ảnh minh họa */
  .plan-img{display:none}
  /* dự án & đánh giá: slider ngang, 1 thẻ / màn hình */
  .projects,.quotes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .projects::-webkit-scrollbar,.quotes::-webkit-scrollbar{display:none}
  .projects>.pj,.quotes>.q-card{flex:0 0 86%;scroll-snap-align:start}
  .pj:hover{transform:none}
  .pj-cover{aspect-ratio:2/1}
  .pj-flow>div:nth-child(n+2){display:none}
  .pj.open .pj-flow>div{display:grid}
  .pj-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--brand-text);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
  .pj-more .ico{width:16px;height:16px;transition:transform .2s}
  .pj.open .pj-more .ico{transform:rotate(180deg)}
  .q-card{padding:22px}
}
/* ===== Mobile ≤768px: rút gọn trang chủ còn ~12 màn hình (desktop giữ nguyên) ===== */
@media (max-width:768px){
  /* 6 nhóm dịch vụ: lưới 2 cột gọn, chạm cả thẻ để vào trang dịch vụ (chi tiết hạng mục nằm ở trang con) */
  .svc{grid-template-columns:1fr 1fr;gap:10px}
  .svc-card{position:relative;padding:16px 14px;gap:10px;border-radius:20px}
  .svc-card:hover{transform:none}
  .svc-card>p,.svc-items,.svc-card .link-2{display:none}
  .svc-top .tile{width:40px;height:40px;border-radius:12px}.svc-top .tile .ico{width:19px;height:19px}
  .svc-card .svc-num{font-size:20px}
  .svc-card .h3{font-size:15.5px;line-height:1.3}
  .svc-card .svc-en{font-size:10.5px;letter-spacing:.1em}
  .svc-act{padding-top:8px}
  .svc-card .svc-act .link{font-size:14px}
  .svc-card .svc-act .link::after{content:"";position:absolute;inset:0;border-radius:inherit}
  /* sơ đồ một đầu mối */
  .os .btn-outline{display:none}
  .vendors{grid-template-columns:1fr 1fr}
  .vendor{grid-template-columns:28px 1fr;padding:8px;font-size:13px;line-height:1.3}
  .vendor em{display:none}
  .v-ico{width:28px;height:28px;border-radius:8px}
  .svc-mini{grid-template-columns:1fr 1fr}
  .svc-mini li{font-size:13px;padding:7px 8px 7px 7px}
  .svc-mini .mono{display:none}
  /* khách hàng phù hợp: bỏ 4 thẻ "có nhu cầu" (trùng với mục Dịch vụ) */
  .needs-t,.needs{display:none}
  .seg{gap:8px}
  /* gói dịch vụ: slider ngang */
  .plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 14px;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plans>.plan{flex:0 0 86%;scroll-snap-align:start;padding:24px 22px;gap:14px}
  /* về chúng tôi: 2 ảnh cạnh nhau, bỏ thẻ địa chỉ (đã có ở Liên hệ) */
  .about-photos{grid-template-columns:1fr 1fr;gap:10px}
  .about .addr{display:none}
  /* hỏi đáp: thẻ Zalo / gọi đã có ở thanh dưới */
  .help-card{display:none}
  /* liên hệ */
  .contact-box .legal{display:none}
  /* footer gọn: bỏ mô tả + cột Khách hàng, 2 cột link */
  .foot{grid-template-columns:1fr 1fr;gap:8px 20px}
  .foot>div:first-child{grid-column:1/-1}
  .foot>div:first-child>p{display:none}
  .foot>div:nth-child(3){display:none}
  .foot>div:last-child{grid-column:1/-1}
  .foot h4{margin:14px 0 4px}
}
@media (max-width:768px){
  .section{padding:48px 0}
  .head{margin-bottom:22px}
  .os .quote{font-size:15px;line-height:1.6;margin:16px 0 0}
  .diagram{margin-top:6px}
  .hero{padding-bottom:36px}
  /* vùng bấm ≥44px trên mobile */
  .channel b a,.foot .logo,.social a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:768px){.hero .ctas .btn-ghost-dark{display:none}.channels .channel:nth-child(2){display:none}.channels{margin-top:20px}}
@media (max-width:768px){footer{padding-top:44px}.foot-bottom{margin-top:24px;padding:14px 0 20px;gap:4px 16px}}
.post .link{display:inline-flex;align-items:center;min-height:44px}
/* Form: lỗi từng ô + nút đang gửi */
.consent-err{display:block;margin-top:-6px;color:var(--err);font-weight:600}
.consent.err input{outline:2px solid var(--err);outline-offset:2px}
.consent.err span{color:var(--err)}
#fSubmit.is-loading{cursor:progress;opacity:.9}
#fSubmit .spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spinBtn .8s linear infinite}
@keyframes spinBtn{to{transform:rotate(360deg)}}
/* ===== Đợt 11/2026: slider gói, giá, cam kết, logo, thanh dưới ===== */
/* Giá gói: "Báo giá sau tư vấn miễn phí" hoặc "Từ {giá}" + ghi chú */
.plan-price{display:grid;gap:4px}
.plan-price .pp-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-price .pp-free{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.plan.hot .plan-price .pp-free{color:#fff}
.plan-price .pp-note{font-size:12.5px;color:var(--muted)}
.plan.hot .plan-price .pp-note{color:var(--on-dark-muted)}

/* Điều hướng slider gói (chỉ mobile) */
.plans-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.plans-nav[hidden]{display:none}
.pn-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--brand-text);cursor:pointer;transition:background .2s,opacity .2s}
.pn-btn .ico{width:18px;height:18px}
.pn-btn.prev .ico{transform:rotate(180deg)}
.pn-btn:disabled{opacity:.35;cursor:default}
.pn-btn:not(:disabled):active{background:var(--brand-soft)}
.pn-dots{display:flex;align-items:center;gap:2px}
.pn-dot{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.pn-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .25s,background .25s}
.pn-dot.on::before{width:22px;background:var(--brand)}
#plansTrack:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:20px}

/* Cam kết của Trí Nhân (hiện khi tắt cả Dự án lẫn Đánh giá) */
#cam-ket{display:none;background:var(--bg)}
.no-cases.no-testi #cam-ket{display:block}
.pledges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pledges li{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.pledges .h3{font-size:17px;line-height:1.35;margin-bottom:6px}
.pledges p{font-size:14px;color:var(--muted)}
@media (max-width:1100px){.pledges{grid-template-columns:1fr 1fr}}

/* Logo khách hàng (ảnh xám, rê chuột có màu) */
.client-logos{padding:40px 0;background:var(--surface);border-block:1px solid var(--line)}
.client-logos[hidden]{display:none}
.cl-title{margin-bottom:18px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#clientLogos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
#clientLogos .logo-box{display:grid;place-items:center;min-width:150px;height:72px;padding:0 20px;border-style:solid;background:var(--bg)}
#clientLogos .logo-box img{max-height:40px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
#clientLogos .logo-box:hover img,#clientLogos .logo-box:focus-visible img{filter:none;opacity:1}

@media (max-width:768px){
  /* slider gói: card ~85% để lộ card kế tiếp */
  .plans>.plan{flex:0 0 85%}
  /* hero: quỹ đạo nhỏ lại (~60%), nằm sau 3 chỉ số */
  .orbit{max-width:min(56vw,210px);margin-top:8px}
  .node .tile{width:30px;height:30px;border-radius:9px}.node .tile .ico{width:14px;height:14px}
  /* cam kết: 1 cột gọn, icon bên trái */
  .pledges{grid-template-columns:1fr;gap:10px}
  .pledges li{flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
  .pledges .tile{width:42px;height:42px;border-radius:12px}.pledges .tile .ico{width:20px;height:20px}
  .pledges .h3{font-size:15.5px;margin-bottom:2px}
  .pledges p{font-size:13.5px;line-height:1.5}
  .client-logos{padding:28px 0}
  #clientLogos .logo-box{min-width:0;flex:1 1 40%;height:60px}
}
@media (max-width:760px){
  /* chừa đúng chiều cao thanh nút cố định (JS đo --ab-h) + vùng an toàn của iPhone */
  body{padding-bottom:calc(var(--ab-h,84px) + env(safe-area-inset-bottom))}
}
/* Hero mobile: màn hình đầu thấy đủ tiêu đề, mô tả, nút Nhận tư vấn và 3 chỉ số (quỹ đạo nằm bên dưới) */
@media (max-width:760px){
  .hero{padding-top:18px}
  .hero .h1{font-size:clamp(28px,8.4vw,34px);line-height:1.12;margin:14px 0 12px}
  .hero .lead{font-size:15px;line-height:1.55}
  .hero .ctas{margin-top:18px}
  .hero .commit{margin-top:10px;font-size:12.5px;gap:4px 12px}
  .hero .stats{margin-top:16px;padding:12px 0}
  .hero .stats b{font-size:26px}
}
@media (max-width:768px){#clientLogos{display:grid;grid-template-columns:1fr 1fr;gap:10px}#clientLogos .logo-box{width:100%}#clientLogos .logo-box img{max-width:100%}}
/* Bản đồ nhúng trong Liên hệ + icon mạng xã hội ở footer */
.map-embed{position:relative;margin-top:16px;width:100%;height:240px;border-radius:16px;overflow:hidden;border:1px solid var(--line-dark);background:var(--deep-3)}
.map-embed iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9)}
.social{flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px}
.social .ico{width:17px;height:17px;color:var(--lime)}
.social a:hover{border-color:var(--lime)}
@media (max-width:760px){.map-embed{height:220px}}
/* Bài blog: mục lục + khối CTA cuối bài */
.prose .toc{margin:0 0 28px;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.toc-t{margin:0 0 8px!important;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.prose .toc ol{margin:0;padding-left:20px;display:grid;gap:2px}
.prose .toc a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.prose .toc a:hover{color:var(--brand-text);text-decoration:underline}
.prose h2[id]{scroll-margin-top:96px}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:36px;padding:22px 24px;border-radius:20px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.post-cta b{display:block;font-size:18px;color:var(--ink)}
.post-cta p{margin:4px 0 0!important;font-size:14px;color:var(--muted)}
.post-cta-act{display:flex;gap:10px;flex-wrap:wrap}
.post-cta .btn{min-height:46px}
@media (max-width:760px){.post-cta-act{width:100%}.post-cta-act .btn{flex:1 1 auto}}