/* Giao diện chính — "Hải đồ": xanh nước biển, pha màu sáng (băng, trời, bạc hà, nắng) */
:root{
  --bg:#06173a;--bg2:#0a2352;--panel:rgba(130,200,255,.10);--line:rgba(150,210,255,.16);--line2:rgba(160,220,255,.34);
  --ink:#f3f9ff;--ink2:#b3d3f7;--ink3:#84abdc;
  --acc:#3db4ff;--acc-rgb:61,180,255;--acc-dim:#1d6fb8;--acc-ink:#04204a;
  --acc2:#7ff3ff;--mint:#7bffd9;--sun:#ffd166;--sun-rgb:255,209,102;--ice:#eaf8ff;
  --f-disp:"Unbounded","Manrope",sans-serif;--f-sans:"Manrope","Segoe UI",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
body{font-family:var(--f-sans);
  background:
   radial-gradient(1200px 720px at 88% -12%,rgba(70,165,255,.55),transparent 62%),
   radial-gradient(950px 650px at 2% 108%,rgba(40,225,205,.34),transparent 60%),
   radial-gradient(700px 520px at 48% 38%,rgba(130,150,255,.14),transparent 70%),
   linear-gradient(180deg,#0b2558,#07194a 55%,#061538);background-attachment:fixed}
#bgc{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;display:block}
.rail,.brand,.foot{display:none}
main{padding-bottom:130px}
.top{border:0;padding:24px 40px 6px;gap:20px}
.top .date{display:none}
.tools{display:flex;gap:12px;align-items:center}
.bt b{display:block;font:600 clamp(13px,1.35vw,18px)/1 var(--f-disp);letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(100deg,#fff 0%,var(--acc2) 30%,var(--mint) 52%,#fff 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 7s linear infinite}
@keyframes shim{to{background-position:-250% 0}}
.top .demo{border-color:var(--line2);color:var(--ink2);font-family:var(--f-mono)}
.lab{color:var(--ink3);font-family:var(--f-mono)}

/* con trỏ */
html.fx-on,html.fx-on *{cursor:none!important}
html.fx-on textarea,html.fx-on input[type=text]{cursor:text!important}
html:not(.fx-on) .cur-dot,html:not(.fx-on) .cur-ring{display:none}
.cur-dot{position:fixed;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;z-index:100;pointer-events:none;box-shadow:0 0 12px var(--acc2),0 0 28px var(--acc)}
.cur-ring{position:fixed;left:0;top:0;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1.5px solid rgba(127,243,255,.75);z-index:99;pointer-events:none;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s}
.cur-ring i{display:none}
.cur-ring.big,html.hot-canvas .cur-ring{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(var(--acc-rgb),.16);border-color:#fff}
.cur-ring.press{width:30px;height:30px;margin:-15px 0 0 -15px}
.pulse{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border:1.5px solid var(--acc2);border-radius:50%;pointer-events:none;z-index:98;animation:pulse .9s ease-out forwards}
@keyframes pulse{to{transform:scale(12);opacity:0}}

/* nút bấm hình bình hành, viền chảy nhiều màu sáng */
.btn{--sl:13px;position:relative;isolation:isolate;border:0;padding:15px 26px;color:var(--ink);overflow:hidden;
  background:linear-gradient(110deg,var(--acc),var(--acc2),var(--mint),var(--acc2),var(--acc));background-size:300% 100%;animation:flow 6s linear infinite;
  clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%);
  font:600 11px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;transition:color .25s,translate .25s var(--ease),filter .25s}
@keyframes flow{to{background-position:-300% 0}}
.btn::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:#0a2756;clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%);transition:background .3s}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:36%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-24deg);transition:left .7s var(--ease);z-index:-1}
.btn:hover{color:#fff;filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.85))}
.btn:hover::before{background:#12408a}
.btn:hover::after{left:140%}
.btn.pri{color:var(--acc-ink)}
.btn.pri::before{background:linear-gradient(110deg,var(--acc2),var(--mint))}
.btn.pri:hover{color:var(--acc-ink)}
.btn.pri:hover::before{background:linear-gradient(110deg,#fff,var(--acc2))}
.btn.ghost{animation:none;background:transparent;color:var(--ink2)}
.btn.ghost::before{background:transparent}
.btn.ghost:hover::before{background:transparent}
.btn.sm{padding:11px 18px;font-size:10px;--sl:9px}
.x{border-radius:50%;border-color:var(--line2)}
.x::before,.x::after{background:var(--acc2)}

/* dock điều hướng nổi */
@media (min-width:901px){
  .rail{display:block;position:fixed;left:50%;bottom:24px;top:auto;transform:translateX(-50%);height:auto;border:0;padding:0;background:none;z-index:30;width:auto;
    filter:drop-shadow(0 14px 34px rgba(0,10,40,.6)) drop-shadow(0 0 1px rgba(var(--acc-rgb),.95))}
  .nav{flex-direction:row;gap:4px;padding:8px 22px;background:rgba(8,32,80,.82);backdrop-filter:blur(16px);clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%)}
  .nav button{white-space:nowrap;padding:14px 22px;font:600 10.5px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;gap:12px;align-items:center;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:color .25s,background .3s,translate .25s var(--ease)}
  .nav button .n{display:none}
  .nav button:hover{background:rgba(var(--acc-rgb),.2);color:#fff}
  .nav button.on{background:linear-gradient(110deg,var(--acc),var(--acc2),var(--mint));color:var(--acc-ink)}
  .nav button.on::before{display:none}
  .nav button .c{margin-left:0;font:700 11px var(--f-mono);color:inherit;opacity:.8}
  .nav button .c.hot{background:var(--sun);color:#3a2800;opacity:1;padding:2px 7px}
}

/* tổng quan: địa cầu + chỉ số */
#v-overview.on{display:grid;grid-template-columns:minmax(380px,1.1fr) minmax(0,1fr);align-items:center}
#radarWrap{display:block;grid-column:1;grid-row:1;padding:0 0 0 24px;position:relative}
.strip{grid-column:2;grid-row:1;grid-template-columns:1fr 1fr;gap:14px;border:0;padding:0 40px 0 10px}
#v-overview>.sec{grid-column:1/-1;grid-row:2}
.stat{border:1px solid var(--line2);border-radius:3px 28px 3px 28px;padding:22px 24px 20px;
  background:linear-gradient(160deg,rgba(150,215,255,.20),rgba(150,215,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden}
.stat:last-child{border-right:1px solid var(--line2)}
.stat .v{font:300 clamp(40px,4.3vw,70px)/1 var(--f-disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.3px var(--acc2);transition:color .35s,text-shadow .35s;margin:14px 0 10px}
.stat:hover .v,.stat.hot .v{color:var(--ice);-webkit-text-stroke:0;text-shadow:0 0 34px rgba(var(--acc-rgb),.9)}
.stat[data-k=late]{-webkit-text-stroke:0}
.stat[data-k=late] .v{-webkit-text-stroke-color:var(--sun)}
.stat[data-k=late].hot .v,.stat[data-k=late]:hover .v{color:var(--sun);text-shadow:0 0 34px rgba(var(--sun-rgb),.75)}
.stat[data-k=wait] .v{-webkit-text-stroke-color:var(--mint)}
.stat.hot::after{height:3px;background:linear-gradient(90deg,var(--acc),var(--mint))}
.stat[data-k=late].hot::after{background:linear-gradient(90deg,var(--sun),#fff)}
.stat .d{color:var(--ink2)}
.sec h2{font:600 17px/1.2 var(--f-disp);letter-spacing:.14em;text-transform:uppercase}
.sec{padding-top:40px}

/* khoang chức năng */
.bay{border:1px solid var(--line);border-radius:3px 28px 3px 28px;margin-bottom:14px;
  background:linear-gradient(95deg,rgba(150,215,255,.15),rgba(150,215,255,.03));box-shadow:inset 3px 0 0 var(--acc-dim),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .4s,border-color .4s}
.bay:last-child{border-bottom:1px solid var(--line)}
.bay:hover,.bay.open{border-color:var(--line2);box-shadow:inset 3px 0 0 var(--acc2),inset 0 1px 0 rgba(255,255,255,.28),0 0 44px rgba(var(--acc-rgb),.14)}
.bay-h{padding:22px}
.bay-h:hover{background:transparent}
.bay-h .nm{font:600 15px/1.3 var(--f-disp);letter-spacing:.05em;text-transform:uppercase}
.bay-h .nm small{font:400 10.5px var(--f-mono);letter-spacing:.08em;color:var(--ink3)}
.bay-in{padding:4px 22px 26px 66px}
.seg{gap:4px;height:12px}
.seg i{transform:skewX(-26deg);background:rgba(150,210,255,.14)}
.seg i.f{background:linear-gradient(90deg,var(--acc),var(--mint))}
.seg i.p{background:#fff;box-shadow:0 0 16px var(--acc2);animation:segp 1.4s ease-in-out infinite}
@keyframes segp{50%{opacity:.4}}
.cnt{color:var(--ink2)}
.cnt .od{color:var(--sun)}
.chev{border-color:var(--acc2)}
.case:hover{background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),transparent 70%)}
.case:hover .ct{color:var(--acc2)}
.ct{font-weight:700}
.cm{color:var(--ink3)}
.tag{border-color:var(--line2);color:var(--ink2)}
.tag.lock{border-color:var(--mint);color:var(--mint)}
.nd b{transform:rotate(45deg);border-color:var(--line2);background:transparent}
.nd.done b{background:var(--acc2);border-color:var(--acc2)}
.nd.act b{border-color:#fff;background:rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3),0 0 18px var(--acc2)}
.nd.act.late b{background:var(--sun);border-color:var(--sun);box-shadow:0 0 0 3px rgba(var(--sun-rgb),.28),0 0 18px var(--sun)}
.nd span{color:var(--ink3)}.nd.act span{color:#fff}
.ln{background:var(--line2)}.ln.done{background:var(--acc2)}
.ln.run::after{background:linear-gradient(90deg,transparent,var(--mint));width:36px;filter:drop-shadow(0 0 6px var(--mint))}
.due{color:var(--ink2)}
.due.late{color:var(--sun)}
.stat,.bay,.q,.row,.portal{background-image:radial-gradient(480px circle at var(--mx,-999px) var(--my,-999px),rgba(200,235,255,.16),transparent 62%);background-repeat:no-repeat}

/* thẻ duyệt */
.q{background-color:rgba(150,210,255,.10);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:3px 30px 3px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.q-h,.q-f{border-color:var(--line2)}
.q-h h3{font:600 15px/1.45 var(--f-disp);letter-spacing:.02em}
.q-h .k{color:var(--mint)}
.src{color:var(--ink3);border-color:var(--line2)}.src b{color:var(--ink2)}
.opt{border-color:var(--line2);border-radius:99px;overflow:hidden}
.opt button{border-color:var(--line2);font-family:var(--f-disp);font-weight:500;font-size:11px;letter-spacing:.04em}
.opt button.on{background:linear-gradient(110deg,var(--acc2),var(--mint));color:var(--acc-ink)}
.paper{box-shadow:0 20px 60px rgba(0,10,40,.5),0 0 0 1px rgba(255,255,255,.4);border-radius:2px}
.row,.portal{border-color:var(--line)}
.row .m,.guess{color:var(--ink3)}
.guess i{color:var(--mint)}
.drawer{background:rgba(7,26,66,.94);backdrop-filter:blur(18px);border-left:1px solid var(--line2);box-shadow:-40px 0 90px rgba(0,10,40,.55)}
.dr-h{border-color:var(--line2)}
.dr-h h3{font:600 17px/1.35 var(--f-disp);letter-spacing:.02em}
.vs.act h4{color:var(--acc2)}
.vs.done b,.vs.done::before{background:var(--acc2);border-color:var(--acc2)}
.vs.act b{border-color:#fff;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3)}
.kv dt{color:var(--ink3)}
.log{color:var(--ink3);border-color:var(--line2)}.log div b{color:var(--ink2)}
.veil{backdrop-filter:blur(5px);background:rgba(2,10,34,.55)}
textarea,select,input[type=text]{background:rgba(150,210,255,.10);border-color:var(--line2);color:var(--ink);font-family:var(--f-sans)}
textarea:focus,select:focus,input:focus{border-color:var(--acc2)}
.sw,.drop{border-color:var(--line2)}
.sw .bx{border-color:var(--ink3)}
.sw input:checked+.bx{background:var(--mint);border-color:var(--mint)}
.sw:has(input:checked){border-color:var(--mint)}
.toast{background:linear-gradient(110deg,var(--acc2),var(--mint));color:var(--acc-ink);font:600 11px var(--f-disp);letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);padding:15px 30px}
.tabbar{background:rgba(7,26,66,.92);backdrop-filter:blur(14px);border-color:var(--line2)}
.tabbar button{font-family:var(--f-disp);font-weight:600;font-size:9px;color:var(--ink3)}
.tabbar button.on{color:#fff}
.tabbar button.on::before{background:var(--acc2);box-shadow:0 0 10px var(--acc2)}
.tabbar button em.hot{color:var(--sun)}
.empty{color:var(--ink3)}

/* địa cầu 3D */
.globe-wrap{position:relative;max-width:700px;margin:0 auto;aspect-ratio:1/1}
#globe{display:block;width:100%;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.radar-tip{position:absolute;pointer-events:none;background:rgba(5,22,60,.95);border:1px solid var(--line2);padding:9px 13px;font:12px/1.5 var(--f-mono);opacity:0;transition:opacity .15s;z-index:6;max-width:270px;transform:translate(14px,14px)}
.radar-tip b{display:block;font:700 13px/1.35 var(--f-sans);color:var(--ink)}
.radar-tip span{color:var(--ink2)}
.no-globe #radarWrap{display:none}
.no-globe .strip{grid-column:1/-1;padding:0 40px}
.no-stats .strip{display:none}
.no-stats #radarWrap{grid-column:1/-1}
.no-bays #v-overview>.sec{display:none}
.hs-late .stat[data-k=late],.hs-soon .stat[data-k=soon],.hs-appr .stat[data-k=appr],.hs-wait .stat[data-k=wait]{display:none}

/* bảng tùy chỉnh */
.pg{margin-bottom:30px}
.pg>.lab{display:block;margin-bottom:6px;color:var(--mint)}
.pr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.pr span{font-size:14.5px}
.pr small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.tg{position:relative;width:44px;height:24px;flex:none}
.tg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.tg i{position:absolute;inset:0;border:1.5px solid var(--line2);border-radius:99px;transition:background .25s,border-color .25s}
.tg i::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--ink3);transition:transform .3s var(--ease),background .25s}
.tg input:checked+i{background:rgba(123,255,217,.2);border-color:var(--mint)}
.tg input:checked+i::after{transform:translateX(20px);background:var(--mint)}
.pr input[type=range]{width:150px;accent-color:var(--acc2)}
.pr input[type=text]{padding:8px 10px;font-size:14px;width:190px}
.pr .btn{padding:10px 14px}
.pfn{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}

@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
.top,.sec-h,.globe-wrap{animation:rise .9s var(--ease) both}
.stat{animation:rise .9s var(--ease) both}
.stat:nth-child(1){animation-delay:.2s}.stat:nth-child(2){animation-delay:.28s}.stat:nth-child(3){animation-delay:.36s}.stat:nth-child(4){animation-delay:.44s}
body.booting .bay{animation:rise .9s var(--ease) both}
body.booting .bay:nth-child(1){animation-delay:.5s}body.booting .bay:nth-child(2){animation-delay:.58s}body.booting .bay:nth-child(3){animation-delay:.66s}body.booting .bay:nth-child(4){animation-delay:.74s}body.booting .bay:nth-child(5){animation-delay:.82s}

@media (max-width:900px){
  #v-overview.on{display:block}
  #radarWrap{padding:0 8px}
  .strip{padding:0;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:6px 16px 0}
  .stat{padding:16px 14px;border-bottom:1px solid var(--line2)}
  .stat:nth-child(n+3){border-bottom:1px solid var(--line2)}
  .top{padding:16px}
  .top .tools .btn.pri{display:none}
  .top .demo{display:none}
  .bay{border-radius:3px 20px 3px 20px}
  .bay-in{padding:0 14px 22px}
  .bay-h{padding:16px 14px}
  .pr input[type=text]{width:140px}
}