/* Kim Hoang Tech — fintech / global tech v50 */
:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --ink:#0a2438;
  --ink-2:#4a6070;
  --line:rgba(8,47,75,.11);
  --blue:#0e4a6e;
  --cyan:#2a8cc0;
  --navy:#082f4b;
  --gold:#c9a227;
  --gold-lt:#f0b429;
  --font:"Be Vietnam Pro",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{position:relative;overflow:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ---------------- background ---------------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-mesh{position:absolute;inset:-20%;
  background:
    radial-gradient(40vw 40vw at 80% 6%,rgba(14,74,110,.20),transparent 66%),
    radial-gradient(32vw 32vw at 10% 94%,rgba(240,180,41,.20),transparent 66%),
    radial-gradient(28vw 28vw at 94% 86%,rgba(42,140,192,.16),transparent 66%);
  filter:blur(10px);animation:mesh 24s ease-in-out infinite alternate}
/* kien truc nhin len: tam voc, khong brochure */
.bg-city{position:absolute;inset:0;
  background:url("../photos/skyline-glass-lite.jpg?v=132") 62% 42% / cover no-repeat;
  filter:saturate(.55) brightness(1.28) contrast(.92);
  opacity:.42;
  transform:scale(1.04);
  animation:cityDrift 36s ease-in-out infinite alternate}
.bg-city::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(247,249,251,.28) 0%,transparent 28%,rgba(247,249,251,.18) 100%),
    linear-gradient(90deg,rgba(8,47,75,.08),transparent 50%)}
.bg-veil{position:absolute;inset:0;
  background:
    linear-gradient(105deg,
      rgba(247,249,251,.96) 0%,
      rgba(247,249,251,.88) 26%,
      rgba(247,249,251,.42) 52%,
      rgba(247,249,251,.12) 72%,
      transparent 88%)}
@keyframes cityDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.09) translate(-1.4%,-1%)}}
.bg-scan{position:absolute;left:0;right:0;height:38vh;top:-40vh;
  background:linear-gradient(180deg,transparent,rgba(14,74,110,.07),transparent);
  animation:scan 9s 2.4s linear infinite}

/* ---------------- boot ---------------- */
/* z-index trên popup 20/10 — tắt mờ chậm */
.boot{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:var(--bg);
  opacity:1;visibility:visible;
  transition:opacity 1.15s cubic-bezier(.33,0,.2,1),visibility 1.15s cubic-bezier(.33,0,.2,1)}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-ring{position:absolute;width:12px;height:12px;border-radius:50%;border:1px solid var(--blue);
  animation:burst 1.25s var(--e2) forwards}
.boot-ring-2{border-color:var(--cyan);animation-delay:.16s}
.boot-tag{font-family:var(--mono);font-size:clamp(.64rem,1.2vw,.78rem);letter-spacing:.5em;color:var(--navy);
  animation:tagIn .55s .12s var(--e2) both}

/* ---------------- stage ---------------- */
.stage{position:relative;z-index:5;height:100vh;height:100dvh;max-width:1580px;margin:0 auto;
  padding:0 clamp(16px,3vw,52px) clamp(12px,2vh,22px);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(10px,1.8vh,26px)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(12px,2vh,20px) 0 0}
.logo{display:flex;align-items:center;gap:11px;min-width:0;max-width:min(520px,58vw)}
.logo img{height:clamp(26px,3vh,34px);width:auto;flex:0 0 auto}
.logo-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.logo-txt strong{display:block;font-size:clamp(.62rem,.85vw,.78rem);font-weight:700;letter-spacing:.04em;
  color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-txt em{display:block;font-style:normal;font-size:clamp(.52rem,.7vw,.64rem);font-weight:500;
  letter-spacing:.06em;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-right{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);flex:0 0 auto}
.lang{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);
  border-radius:2px;background:rgba(255,255,255,.72)}
.lang-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;
  padding:5px 8px;cursor:pointer;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  color:var(--ink-2);border-radius:2px;transition:.25s var(--e)}
.lang-btn .flag{width:18px;height:12px;display:block;border-radius:1px;box-shadow:0 0 0 1px rgba(8,47,75,.12)}
.lang-btn.is-on{background:var(--navy);color:#fff}
.lang-btn:hover:not(.is-on){background:rgba(14,74,110,.08);color:var(--navy)}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.24em;color:var(--ink-2)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(42,140,192,.6);
  animation:beat 2.4s ease-out infinite}
.cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  padding:9px 15px;border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--navy);
  transition:.4s var(--e);white-space:nowrap}
.cta svg{transition:transform .4s var(--e)}
.cta:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 10px 24px -14px rgba(14,74,110,.6)}
.cta:hover svg{transform:translateX(4px)}

/* tag + lang: mobile cung dong (JS chuyen .lang vao .tag-row) */
.tag-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 clamp(10px,1.8vh,20px)}
.tag{margin:0;flex:1 1 auto;min-width:0;font-size:clamp(.62rem,.85vw,.74rem);font-weight:500;
  letter-spacing:.18em;color:var(--blue)}

/* core */
.core{min-height:0;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(16px,3vw,48px);align-items:center}

.lead{min-width:0}
h1{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.022em;text-wrap:balance;
  font-size:clamp(2.55rem,min(7.6vw,13.5vh),6.8rem)}
h1 .ln{display:block;overflow:hidden;padding:.08em 0 .14em}
h1 .ln>span{display:block;transform:translateY(108%)}
h1 .hl{background:linear-gradient(96deg in oklab,var(--navy) 0%,var(--blue) 28%,var(--cyan) 62%,var(--gold-lt) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.sub{margin:clamp(10px,1.8vh,18px) 0 0;font-size:clamp(.82rem,1.05vw,.98rem);font-weight:500;
  letter-spacing:.04em;color:var(--ink-2);line-height:1.45}
.stats{list-style:none;display:flex;gap:clamp(18px,2.6vw,44px);margin:clamp(14px,2.4vh,26px) 0 0;padding:0}
.stats li{display:flex;flex-direction:column;gap:4px}
.stats b{font-size:clamp(1.1rem,1.8vw,1.7rem);font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--navy),var(--blue) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats em{font-style:normal;font-size:.6rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}

/* ---------------- globe ---------------- */
.orb{position:relative;min-width:0;height:100%;display:grid;place-items:center}
.globe{position:relative;width:min(100%,clamp(210px,46vh,500px));aspect-ratio:1;border-radius:50%;
  overflow:hidden;opacity:0;transform:scale(.88);z-index:2;
  background:radial-gradient(circle at 32% 26%,#ffffff,#e9f1fb 56%,#d8e6f7 100%);
  box-shadow:0 44px 96px -46px rgba(8,47,75,.55),inset 0 0 0 1px rgba(14,74,110,.16)}
.globe-fx{position:absolute;width:0;height:0;overflow:hidden}
/* lop bi cat tron + phong lon chau luc, day Nam cuc ra ngoai vong tron */
.globe-skin{position:absolute;inset:0;z-index:1}
.globe-tex{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;transform:none}
.globe-map{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.55;pointer-events:none;
  border-radius:50%;
  mask-image:radial-gradient(circle at 50% 48%,#000 58%,rgba(0,0,0,.75) 78%,transparent 96%);
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 58%,rgba(0,0,0,.75) 78%,transparent 96%)}
.globe-dots{position:absolute;inset:0;z-index:1;opacity:.06;pointer-events:none;
  background-image:radial-gradient(circle,rgba(8,47,75,.35) 1px,transparent 1.2px);
  background-size:16px 16px;
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 96%);
  animation:spin 48s linear infinite}
.globe-shade{position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 42%),
             radial-gradient(circle at 78% 78%,rgba(14,74,110,.22),transparent 52%),
             radial-gradient(circle at 50% 50%,transparent 62%,rgba(247,249,251,.55) 100%)}
.node{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);z-index:4;
  transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.65)}
.node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(14,74,110,.45);
  animation:ping 2.6s ease-out infinite}
/* Dich den — cham vang nho */
.node-dest{width:5px;height:5px;background:#f0b429;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 8px rgba(240,180,41,.75);z-index:4}
.node-dest::after{inset:-4px;border-color:rgba(240,180,41,.45);animation:pingGold 2.4s ease-out infinite}
@keyframes pingGold{0%{transform:scale(.8);opacity:.55}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.n1{top:28%;left:58%}
.n2{top:48%;left:38%;animation-delay:.4s}
.n2::after{animation-delay:.4s}
/* Ha Noi — cham rat nho, khong che Bac Bo */
.n3,.node-hn{top:42%;left:48%;width:4px;height:4px;background:#fff;
  border:1.5px solid #c8102e;box-shadow:0 0 0 1px rgba(255,255,255,.95);z-index:5}
.n3::after,.node-hn::after{inset:-3px;border-width:1px;border-color:rgba(200,16,46,.28);
  animation:pingHn 3s ease-out infinite}
@keyframes pingHn{0%{transform:scale(.85);opacity:.5}70%{transform:scale(1.8);opacity:0}100%{opacity:0}}
.globe-map-3d{image-rendering:auto}
.n4{top:32%;left:72%}
.n4::after{animation-delay:1s}
.n5{top:72%;left:68%}
.n5::after{animation-delay:1.4s}

/* Quy dao: an net nen — chi hat sang nho chay tren path */
.routes{position:absolute;inset:0;width:100%;height:100%;z-index:3;fill:none;pointer-events:none;
  overflow:visible}
.routes path.flight{stroke:transparent;stroke-width:0;opacity:0;fill:none}
.pk{fill:#f0b429;filter:drop-shadow(0 0 2px rgba(240,180,41,.95)) drop-shadow(0 0 4px rgba(255,122,26,.4));opacity:.95}
.go .pk{animation:pkPulse 1.4s ease-in-out infinite}
.go .pk2{animation-delay:.25s}
.go .pk3{animation-delay:.5s}
.go .pk4{animation-delay:.75s}
.go .pk5{animation-delay:1s}
.go .pk6{animation-delay:1.25s}
.go .pk7{animation-delay:1.5s}
@keyframes pkPulse{
  0%,100%{fill:#f0b429}
  40%{fill:#ff8a1a}
  70%{fill:#fff6d0}
}

/* 2+ vanh quy dao: moi cham quay rieng (--spd), doi mau */
.orbit{position:absolute;top:50%;left:50%;
  width:min(118%,clamp(250px,54vh,590px));aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(8,47,75,.14);z-index:1;pointer-events:none;
  box-sizing:border-box;transform:translate(-50%,-50%)}
.orbit b{position:absolute;inset:0;margin:0;padding:0;display:block;pointer-events:none;
  transform:rotate(var(--a,0deg));
  animation:orbArmCW var(--spd,16s) linear infinite}
.orbit i{position:absolute;top:-4px;left:calc(50% - 3.5px);width:7px;height:7px;border-radius:50%;
  background:#0e4a6e;box-shadow:0 0 10px rgba(14,74,110,.9);display:block;
  animation:orbDotHue 4.5s ease-in-out infinite}
.orbit i.d2{width:5px;height:5px;left:calc(50% - 2.5px);top:-2.5px;
  animation-duration:3.6s;animation-delay:.4s}
.orbit i.d3{width:4px;height:4px;left:calc(50% - 2px);top:-2px;
  animation-duration:5.2s;animation-delay:.9s;opacity:.95}
.o1{border-color:rgba(8,47,75,.16)}
.o2{width:min(142%,clamp(290px,66vh,720px));
  border-color:rgba(42,140,192,.18)}
.o2 b{animation-name:orbArmCCW}
.o3{width:min(128%,clamp(270px,58vh,640px));
  border-color:rgba(14,74,110,.1);opacity:.95}
.o3 b{animation-name:orbArmCW}
.orb-halo{position:absolute;top:50%;left:50%;
  width:min(160%,clamp(320px,74vh,820px));aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(14,74,110,.1);pointer-events:none;
  transform:translate(-50%,-50%);
  animation:halo 14s ease-in-out infinite alternate}
@keyframes orbArmCW{
  from{transform:rotate(var(--a,0deg))}
  to{transform:rotate(calc(var(--a,0deg) + 360deg))}
}
@keyframes orbArmCCW{
  from{transform:rotate(var(--a,0deg))}
  to{transform:rotate(calc(var(--a,0deg) - 360deg))}
}
@keyframes orbDotHue{
  0%{background:#0e4a6e;box-shadow:0 0 10px rgba(14,74,110,.85)}
  30%{background:#2a8cc0;box-shadow:0 0 12px rgba(42,140,192,.95)}
  60%{background:#7eb8d8;box-shadow:0 0 11px rgba(126,184,216,1)}
  100%{background:#0e4a6e;box-shadow:0 0 10px rgba(14,74,110,.85)}
}

/* ---------------- rail ---------------- */
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.cell{position:relative;display:flex;align-items:baseline;gap:10px;padding:clamp(11px,1.8vh,20px) clamp(8px,1vw,18px);
  border-right:1px solid var(--line);opacity:0;transform:translateY(14px);transition:background .4s var(--e)}
.cell:first-child{padding-left:0}
.cell:last-child{border-right:0}
.cell b{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;color:var(--blue)}
.cell span{font-size:clamp(.86rem,1.15vw,1.08rem);font-weight:600;letter-spacing:0}
.cell i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--navy),var(--blue) 45%,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.cell:hover{background:linear-gradient(180deg,rgba(14,74,110,.05),transparent)}
.cell:hover i{transform:scaleX(1)}
.cell:hover span{color:var(--navy)}

/* ---------------- board ---------------- */
.board{display:flex;align-items:center;gap:clamp(14px,2.2vw,40px);flex-wrap:nowrap;
  padding-top:clamp(8px,1.4vh,16px);border-top:1px solid var(--line)}
.board-tag{font-size:.62rem;font-weight:500;letter-spacing:.16em;color:var(--ink-2);white-space:nowrap}
.who{display:flex;align-items:center;gap:clamp(9px,1.1vw,16px);opacity:0;transform:translateY(14px);cursor:pointer}
.ring{position:relative;flex:0 0 auto;width:clamp(44px,4.4vw,62px);height:clamp(44px,4.4vw,62px);
  border-radius:50%;overflow:hidden;background:#e7eef8;
  box-shadow:0 0 0 1px rgba(14,74,110,.25),0 12px 24px -16px rgba(8,47,75,.7)}
.ring img{width:100%;height:100%;object-fit:cover;object-position:center 14%;transition:transform .9s var(--e)}
.who:hover .ring img{transform:scale(1.08)}
.who-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-txt b{font-size:clamp(.9rem,1.2vw,1.12rem);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.who-txt em{font-style:normal;font-size:.58rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.board-end{margin-left:auto;font-size:.58rem;font-weight:500;letter-spacing:.12em;color:var(--ink-2);
  white-space:nowrap;opacity:0}

/* ---------------- reveal ---------------- */
[data-r]{opacity:0;transform:translateY(16px)}
.go [data-r]{opacity:1;transform:none;
  transition:opacity .9s var(--e2) calc(var(--r,0)*110ms + 120ms),transform .9s var(--e2) calc(var(--r,0)*110ms + 120ms)}
.go h1 .ln>span{animation:rise 1.05s calc(.25s + var(--l,0)*.13s) var(--e2) forwards}
.go .globe{animation:orbIn 1.5s .3s var(--e2) forwards}
.go .cell{animation:cellIn .8s calc(.85s + var(--i)*.08s) var(--e2) forwards}
.go .who{animation:cellIn .8s calc(1.25s + var(--i)*.12s) var(--e2) forwards}
.go .board-end{animation:fade .8s 1.7s var(--e2) forwards}

@keyframes burst{0%{width:12px;height:12px;opacity:1}100%{width:min(150vw,150vh);height:min(150vw,150vh);opacity:0}}
@keyframes tagIn{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.5em}}
@keyframes tagOut{to{opacity:0}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes orbIn{to{opacity:1;transform:scale(1)}}
@keyframes cellIn{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes spin{to{transform:translateX(33.333%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(42,140,192,.55)}70%{box-shadow:0 0 0 9px rgba(42,140,192,0)}100%{box-shadow:0 0 0 0 rgba(42,140,192,0)}}
@keyframes halo{from{transform:translate(-50%,-50%) scale(1);opacity:.7}to{transform:translate(-50%,-50%) scale(1.06);opacity:.3}}
@keyframes merSpin{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
/* Quay vanh: luon kem translate(-50%,-50%) de giua dia cau */
@keyframes orbitSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes orbitSpinRev{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0deg)}
}
@keyframes orbit{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes mesh{from{transform:translate(0,0) scale(1)}to{transform:translate(2%,-2%) scale(1.06)}}
@keyframes scan{0%{top:-40vh}100%{top:120vh}}

/* ---------------- tablet ---------------- */
@media (max-width:1080px){
  .stage{grid-template-rows:auto auto auto auto}
  .core{grid-template-columns:1fr;gap:clamp(10px,2vh,24px)}
  .orb{height:auto}
  .globe{width:min(66vw,clamp(190px,32vh,320px))}
  .o1{width:min(84vw,clamp(230px,38vh,400px))}
  .o2{width:min(100vw,clamp(270px,44vh,470px))}
  .o3{width:min(90vw,clamp(250px,40vh,430px))}
  .orb-halo{width:min(116vw,clamp(300px,50vh,540px))}
}

/* ---------------- mobile ---------------- */
@media (max-width:760px){
  html,body{overflow:auto;height:auto;min-height:100%}
  .bg-city{opacity:.32}
  .bg-veil{background:linear-gradient(180deg,rgba(247,249,251,.92) 0%,rgba(247,249,251,.55) 42%,transparent 72%)}
  .stage{height:auto;min-height:100dvh;gap:13px;padding-bottom:16px}
  .nav{gap:8px}
  .logo{max-width:none;flex:1 1 auto;min-width:0;gap:8px}
  .logo img{height:28px}
  .logo-txt strong{font-size:.55rem;letter-spacing:.01em}
  .logo-txt em{font-size:.5rem;letter-spacing:.04em}
  .live{display:none}
  .cta{font-size:.62rem;padding:8px 10px;letter-spacing:.04em;gap:0;flex:0 0 auto}
  .cta svg{display:none}
  .tag-row{margin:0 0 10px;gap:8px;align-items:center}
  .tag{font-size:.58rem;letter-spacing:.1em}
  .lang{flex:0 0 auto;padding:2px;gap:2px}
  .lang-btn{padding:3px 5px;gap:0}
  .lang-btn .flag{width:13px;height:9px}
  .lang-btn span{display:none}
  h1{font-size:clamp(2.35rem,12.4vw,3.6rem)}
  .sub{font-size:.68rem}
  .stats{gap:20px;margin-top:12px}
  .stats b{font-size:1.02rem}
  .stats em{font-size:.52rem}
  .globe{width:min(58vw,224px)}
  .o3,.orb-halo{display:none}
  .o1{width:min(72vw,270px)}
  .o2{width:min(88vw,330px);display:block}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
  .cell{border-bottom:1px solid var(--line);padding:10px}
  .cell:first-child{padding-left:10px}
  .cell:nth-child(2n){border-right:0}
  .cell:last-child{grid-column:1/-1;border-bottom:0}
  .board{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:center}
  .board-tag{grid-column:1/-1}
  .who{min-width:0}
  .who-txt b{font-size:.84rem;white-space:normal}
  .who-txt em{font-size:.52rem;letter-spacing:.12em}
  .ring{width:42px;height:42px}
  .board-end{grid-column:1/-1;margin-left:0;text-align:center;font-size:.5rem;letter-spacing:.16em}
}
@media (max-width:400px){
  .who{flex:1 1 100%}
  .stats b{font-size:1.05rem}
}

/* ---------------- short screens ---------------- */
@media (min-width:761px) and (max-height:640px){
  html,body{overflow:auto;height:auto}
  .stage{height:auto;min-height:100dvh}
  h1{font-size:clamp(2.2rem,5.4vw,3.4rem)}
  .globe{width:min(100%,clamp(170px,32vh,280px))}
  .orb-halo,.o3{display:none}
  .o2{display:block;width:min(100%,clamp(200px,38vh,320px))}
  .stats{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .bg-city,.bg-mesh,.bg-scan{animation:none!important;filter:none!important}
  /* Vẫn hiện boot trên desktop (Windows hay bật reduce) — chỉ tắt vòng animation */
  .boot{display:grid!important}
  .boot-ring,.boot-ring-2{animation:none!important;opacity:0}
  .boot-tag{animation:none!important;opacity:1;letter-spacing:.5em}
  h1 .ln>span{transform:none}
  .globe{opacity:1;transform:none}
  [data-r],.cell,.who,.board-end{opacity:1;transform:none}
  .arcs path{stroke-dashoffset:0}
  /* Bat lai quay quy dao + hat bay (user yeu cau nhin thay) */
  .orbit{animation:none!important;transform:translate(-50%,-50%)!important}
  .orbit b{animation:orbArmCW var(--spd,16s) linear infinite!important}
  .orbit.o2 b{animation-name:orbArmCCW!important}
  .orbit i{animation:orbDotHue 4.5s ease-in-out infinite!important}
  .pk{animation:pkPulse 1.4s ease-in-out infinite!important}
  .globe-dots,.live i{animation:none!important}
}

/* Máy yếu / Save-Data — cắt filter + animation nặng; GIỮ quỹ đạo quay */
body.is-lite .bg-mesh{filter:none;animation:none;opacity:.85}
body.is-lite .bg-city{animation:none;filter:none;opacity:.28;transform:none}
body.is-lite .bg-scan,
body.is-lite .globe-dots,
body.is-lite .orb-halo,
body.is-lite .halo-wave,
body.is-lite .routes .pk{display:none!important}
body.is-lite .live i,
body.is-lite .node::after{animation:none!important}
body.is-lite .pop-dim{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Quỹ đạo vẫn hiện + quay trên máy lite */
body.is-lite .orbit{display:block!important}
body.is-lite .orbit b{animation:orbArmCW var(--spd,16s) linear infinite!important}
body.is-lite .orbit.o2 b{animation-name:orbArmCCW!important}
body.is-lite .orbit i{animation:orbDotHue 4.5s ease-in-out infinite!important}


/* ================= DAU AN KIM HOANG ================= */
/* dai 3 mau nhan dien: thuy | trang | kim */
.ribbon{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  background:linear-gradient(90deg,var(--navy) 0 33.33%,#fff 33.33% 66.66%,var(--gold) 66.66% 100%);
  transform:scaleX(0);transform-origin:left}
.go .ribbon{animation:ribbonIn 1.1s .35s var(--e2) forwards}
@keyframes ribbonIn{to{transform:scaleX(1)}}

/* mo tip song trong logo KH */
.wave{display:block;width:clamp(168px,19vw,268px);height:auto;margin:clamp(8px,1.5vh,16px) 0 2px;overflow:visible}
.wave .rib{opacity:0;transform-origin:12% 50%;transform:scaleX(.2);filter:saturate(1.05)}
.go .wave .rib-b{animation:silkIn 1.15s 1.05s var(--e2) forwards}
.go .wave .rib-g{animation:silkIn 1.15s 1.22s var(--e2) forwards}
.wave .rib-hi{opacity:0;mix-blend-mode:screen}
.go .wave .rib-hi{animation:silkHi 2.8s 1.4s ease-in-out infinite}
@keyframes silkIn{to{opacity:1;transform:none}}
@keyframes silkHi{0%,18%{opacity:0}38%,62%{opacity:.85}100%{opacity:.15}}

/* logo KH chim trong long dia cau */
.mark{position:absolute;top:50%;left:50%;translate:-50% -50%;width:52%;height:auto;z-index:4;
  opacity:0;mix-blend-mode:multiply;filter:saturate(.85);pointer-events:none}
.go .mark{animation:markIn 2.4s .8s var(--e2) forwards}
@keyframes markIn{to{opacity:.08}}

/* vanh song quanh dia cau */
.halo-wave{position:absolute;width:min(150%,clamp(300px,70vh,760px));aspect-ratio:1;z-index:1;
  pointer-events:none;overflow:visible;animation:spinSlow 44s linear infinite}
.halo-wave path{fill:none;stroke:rgba(201,162,39,.4);stroke-width:1.2;stroke-dasharray:6 10}
.halo-wave path:nth-child(2){stroke:rgba(14,74,110,.28);stroke-dasharray:3 12}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* logo tren nav: vien kim mong */
.logo img{padding:2px;border-radius:3px;box-shadow:0 0 0 1px rgba(201,162,39,.35)}
.logo-txt strong{background:linear-gradient(100deg,var(--navy),var(--blue) 70%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cta{border-color:rgba(201,162,39,.4)}
.cta:hover{border-color:var(--gold);color:var(--navy);box-shadow:0 10px 24px -14px rgba(201,162,39,.7)}
.live i{background:var(--gold-lt)}
@keyframes beatGold{0%{box-shadow:0 0 0 0 rgba(240,180,41,.6)}70%{box-shadow:0 0 0 9px rgba(240,180,41,0)}100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}}
.live i{animation:beatGold 2.4s ease-out infinite}

/* vien kim cho chan dung lanh dao */
.ring{box-shadow:0 0 0 1px rgba(201,162,39,.55),0 0 0 4px rgba(255,255,255,.9),0 12px 24px -16px rgba(8,47,75,.7)}

@media (max-width:1080px){
  .halo-wave{width:min(130%,clamp(260px,50vh,560px))}
}
@media (max-width:760px){
  .wave{width:clamp(150px,48vw,220px);margin-top:8px}
  .halo-wave{display:none}
  .ribbon{height:3px}
}
@media (prefers-reduced-motion:reduce){
  .ribbon{transform:scaleX(1)}
  .wave .rib{opacity:1;transform:none}
  .wave .rib-hi{animation:none;opacity:.35}
  .mark{opacity:.3}
  .halo-wave{animation:none}
}

/* ---------------- popup: anh | o chu an — 2 nguoi cung 1 layout ---------------- */
.pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:clamp(16px,3.5vh,40px) clamp(14px,3vw,36px);overflow:auto}
.pop[hidden]{display:none}
.pop-dim{position:absolute;inset:0;background:rgba(8,47,75,.46);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pop-sheet{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,36%) minmax(0,1fr);
  align-items:stretch;width:min(1080px,96vw);height:min(88vh,720px);max-height:min(88vh,720px);
  overflow:hidden;background:#fff;box-shadow:0 40px 90px -28px rgba(8,47,75,.45);
  border:0;outline:0;animation:popIn .55s var(--e2)}
.pop-pic{background:#e7eef4;min-height:0;height:100%;overflow:hidden}
.pop-pic img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}

.pop-copy{min-width:0;min-height:0;height:100%;overflow:hidden;
  padding:28px 32px 26px;display:flex;flex-direction:column;box-sizing:border-box;
  background:#fff;color:var(--ink)}
.pop-head{flex:0 0 auto;padding-bottom:14px}
.pop-head em{display:block;font-style:normal;font-size:.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.pop-head h2{margin:0;font-size:clamp(1.45rem,2.1vw,1.75rem);font-weight:700;letter-spacing:-.02em;
  color:var(--navy);line-height:1.18}
.pop-title{margin:6px 0 0;font-size:.9rem;font-weight:500;color:var(--ink-2);line-height:1.4}

/* o chu: cuon khi van dai — font doc binh thuong */
.pop-slot{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding-right:6px;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(14,74,110,.35) transparent}
.pop-slot::-webkit-scrollbar{width:6px}
.pop-slot::-webkit-scrollbar-thumb{background:rgba(14,74,110,.32);border-radius:6px}
.pop-slot::-webkit-scrollbar-track{background:transparent}
.pop-fit{width:100%;font-size:clamp(14px,1.35vw,16.5px);padding-bottom:12px}
.pop-bio p{margin:0 0 .72em;font-size:1.05em;font-weight:400;line-height:1.58;color:var(--ink)}
.pop-bio p:last-child{margin-bottom:0}
.pop-quote{margin:.85em 0 0;padding:0;font-size:.95em;line-height:1.5;color:var(--navy);
  font-style:italic;font-weight:500;border:0}
.pop-quote:empty{display:none}

/* nut X — chi mobile */
.pop-x{display:none;position:absolute;top:10px;right:10px;z-index:5;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--navy);
  box-shadow:0 6px 18px -8px rgba(8,47,75,.55),0 0 0 1px rgba(8,47,75,.12);
  align-items:center;justify-content:center;padding:0}
.pop-x:active{transform:scale(.96)}

@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .pop{padding:0;place-items:stretch}
  /* anh full-bleed; panel chu de len — --pop-sheet-top: mo ~52%, vuot len ~20% (con dau) */
  .pop-sheet{display:block;grid-template-columns:unset;grid-template-rows:unset;
    width:100%;height:100%;max-height:100%;margin:0;position:relative;
    --pop-sheet-top:52%}
  .pop-pic{position:absolute;inset:0;height:100%;z-index:0}
  .pop-pic img{object-position:center 10%}
  .pop-copy{position:absolute;left:0;right:0;bottom:0;top:var(--pop-sheet-top,52%);
    z-index:1;height:auto;padding:16px 16px 20px;
    background:#fff;color:var(--ink);
    border-radius:18px 18px 0 0;
    box-shadow:0 -16px 40px -18px rgba(8,47,75,.35);
    will-change:top}
  .pop-head{padding-bottom:10px}
  .pop-head h2{font-size:1.35rem}
  .pop-x{display:inline-flex;top:max(10px,env(safe-area-inset-top));right:10px}
  .logo-txt strong{font-size:.58rem}
  .logo-txt em{font-size:.5rem}
  .lang-btn span{display:none}
  .cta svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pop-sheet{animation:none}
}