/* index.css — CSS riêng của trang chủ index.html "Sắp ra mắt" (dùng chung: css/common.css)
   Bảng màu thương hiệu: tím neon #8A2BE2 · cyan #00FFFF · vàng meteor #FFD700 */

:root{
  --bg:#05070f; --bg2:#0a0f22;
  --cyan:#00FFFF;           /* cyan neon thương hiệu */
  --cyan-deep:#38bdf8;      /* cyan dịu, dùng cho viền/nền mờ */
  --purple:#8A2BE2;         /* tím neon thương hiệu */
  --purple-soft:#c084fc;    /* tím nhạt cho chữ/gem */
  --gold:#FFD700;           /* vàng meteor */
  --green:#4ade80; --good:#63e6a8; --red:#ef4444;
  --brd:rgba(120,160,255,.18);
  --glass:rgba(15,23,42,.55);
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Share Tech Mono", ui-monospace, "Consolas", monospace;
  --jelly:cubic-bezier(.34,1.56,.64,1);
}

html,body{min-height:100%;}
body{min-height:100vh;overflow-x:hidden;
  background:radial-gradient(ellipse at 50% -10%, #1a1040 0%, var(--bg2) 46%, var(--bg) 100%);}
a{text-decoration:none;}
:focus-visible{outline:2px solid var(--cyan);}

/* Chỉ đọc bằng screen reader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* JS bật/tắt bằng thuộc tính hidden — cần !important vì .wl-form đang là flex */
[hidden]{display:none !important;}

/* ---------- Nền sao + tinh vân (phần chung ở common.css) ---------- */
.starfield{opacity:.75;
  background-image:
    radial-gradient(1.3px 1.3px at 20% 30%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 80% 20%, #dcecff, transparent),
    radial-gradient(1px 1px at 60% 70%, #cfe0ff, transparent),
    radial-gradient(1.1px 1.1px at 40% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 55%, #bcd0ff, transparent);
  animation:drift 160s linear infinite, tw 5s ease-in-out infinite;}
.nebula{filter:blur(12px);opacity:.75;
  background:
    radial-gradient(closest-side at 16% 22%, rgba(138,43,226,.30), transparent 70%),
    radial-gradient(closest-side at 84% 18%, rgba(0,255,255,.16), transparent 70%),
    radial-gradient(closest-side at 62% 84%, rgba(255,215,0,.10), transparent 70%);}

.wrap{position:relative;z-index:10;max-width:1160px;margin:0 auto;
  padding:0 clamp(14px,3.4vw,30px) 60px;}

/* ============================== TOPBAR ============================== */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:18px 0 6px;}
/* Khoảng cách 2px: ".org" phải dính sát wordmark như một tên miền liền mạch.
   Giá trị cũ là 10px, dành cho ô vuông gradient đứng cạnh chữ. */
.brand{display:inline-flex;align-items:center;gap:2px;}
/* `top:2px` KHÔNG phải con số ướm: đo pixel trên ảnh chụp DPR3 thì đáy dấu '.'
   của ".org" nằm CAO HƠN đáy chữ 'a' của wordmark đúng 2px, tức hai đường chân
   chữ không trùng — chữ ".org" trông như bị nhấc lên. Wordmark là ẢNH nên CSS
   không biết đường chân chữ của nó ở đâu, `align-items:center` chỉ canh giữa
   khối chứ không canh chân chữ; phải bù bằng tay. */
.brand-name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.01em;
  position:relative;top:2px;}
.brand-name.dot{color:var(--cyan);}
.top-right{display:flex;align-items:center;gap:10px;margin-left:auto;}

.status-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;color:var(--ink-soft);padding:7px 12px;border-radius:999px;
  background:rgba(56,189,248,.08);border:1px solid rgba(0,255,255,.3);}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green);box-shadow:0 0 9px var(--green);animation:blink 1.6s steps(1,end) infinite;}
@media (max-width:560px){ .status-pill{display:none;} }

.lang-switch{background:rgba(8,14,38,.6);border:1px solid var(--brd);}
/* ⚠️ `a` nằm cùng quy tắc với `button`, KHÔNG khai bản thứ hai (quy tắc 2 mục 2).
   Trang chủ có HAI URL tĩnh nên nút đổi ngôn ngữ ở đây là <a href> thật —
   crawler đi được, và đó là nửa còn lại của hreflang. 17 trang app vẫn dùng
   <button> vì mỗi trang chỉ có một URL. */
.lang-switch button,.lang-switch a{border:none;background:transparent;color:var(--ink-soft);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:11px;padding:6px 11px;border-radius:999px;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s;}
.lang-switch button.active,.lang-switch a.active{color:#04060f;background:linear-gradient(120deg,var(--cyan),var(--purple));}

/* ============================== HERO ============================== */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,54px);
  align-items:center;padding:clamp(28px,6vw,70px) 0 clamp(24px,5vw,54px);}
.hero .eyebrow{font-size:11px;color:var(--cyan);margin-bottom:14px;}

.hero h1{font-family:var(--font-display);font-weight:700;margin:0 0 16px;
  font-size:clamp(30px,5.4vw,56px);line-height:1.06;letter-spacing:-.015em;
  background:linear-gradient(112deg,#ffffff 4%, var(--cyan) 38%, var(--purple-soft) 74%, var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(138,43,226,.28);}
/* Dự phòng: trình duyệt không hỗ trợ background-clip:text thì chữ vẫn đọc được */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{background:none;color:var(--ink);}
}

.lede{max-width:56ch;margin:0 0 26px;color:var(--ink-soft);
  font-size:clamp(14.5px,1.5vw,17px);line-height:1.68;}

/* ---------- Đếm ngược ---------- */
.countdown{margin:0 0 26px;}
.cd-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;
  color:var(--ink-faint);margin-bottom:9px;}
.cd-grid{display:flex;gap:10px;flex-wrap:wrap;}
.cd-cell{min-width:74px;flex:0 0 auto;padding:11px 8px 9px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg, rgba(138,43,226,.16), rgba(10,15,34,.7));
  border:1px solid rgba(138,43,226,.42);
  box-shadow:inset 0 0 22px -12px var(--purple), 0 12px 26px -20px #000;}
.cd-cell b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,3.2vw,30px);line-height:1;color:#fff;
  text-shadow:0 0 16px rgba(0,255,255,.45);font-variant-numeric:tabular-nums;}
.cd-cell span{display:block;margin-top:5px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Nút ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#06070f;
  padding:14px 24px;border:none;border-radius:14px;cursor:pointer;text-align:center;
  background:linear-gradient(120deg, var(--cyan), var(--purple-soft) 58%, var(--purple));
  box-shadow:0 16px 34px -16px rgba(138,43,226,.95), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .14s var(--jelly), box-shadow .2s, filter .2s;}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 20px 40px -16px rgba(0,255,255,.7);}
.btn-primary:active{transform:scale(.97);}
.btn-primary[disabled]{opacity:.6;cursor:progress;transform:none;filter:grayscale(.25);}

.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink);
  padding:13px 20px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--brd);
  transition:background .18s, border-color .18s, transform .12s;}
.btn-ghost:hover{background:rgba(0,255,255,.1);border-color:rgba(0,255,255,.45);}
.btn-ghost:active{transform:scale(.97);}

/* ---------- Linh vật Comet & Byte ---------- */
.crew{display:grid;gap:14px;}
.crew-card{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:14px 16px;
  border-radius:20px;background:var(--glass);border:1px solid var(--brd);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -28px #000;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;}
.crew-card:hover{transform:translateY(-4px);}
/* <picture> mới là flex item, không phải <img> */
.crew-card picture{display:block;flex:none;line-height:0;}
.crew-card img{width:clamp(78px,11vw,104px);height:auto;flex:none;
  animation:float 6s ease-in-out infinite;}
.crew-comet{border-color:rgba(255,215,0,.34);}
.crew-comet:hover{box-shadow:0 26px 54px -26px rgba(255,215,0,.5);}
.crew-comet img{filter:drop-shadow(0 8px 22px rgba(255,215,0,.45));}
.crew-byte{border-color:rgba(0,255,255,.32);}
.crew-byte:hover{box-shadow:0 26px 54px -26px rgba(0,255,255,.5);}
.crew-byte img{filter:drop-shadow(0 8px 22px rgba(0,255,255,.42));animation-delay:-3s;}
.crew-card figcaption{display:flex;flex-direction:column;gap:5px;min-width:0;}
.crew-card b{font-family:var(--font-display);font-size:16px;letter-spacing:.01em;}
.crew-comet b{color:var(--gold);}
.crew-byte b{color:var(--cyan);}
.crew-card span{font-size:12.8px;line-height:1.55;color:var(--ink-soft);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:20px;}
  .crew{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){ .crew{grid-template-columns:1fr;} }

/* ============================== WAITLIST ============================== */
.waitlist{padding:8px 0 clamp(30px,6vw,64px);}
.wl-card{position:relative;overflow:hidden;max-width:760px;margin:0 auto;text-align:center;
  padding:clamp(24px,4.4vw,44px) clamp(18px,4vw,44px);border-radius:26px;
  background:linear-gradient(180deg, rgba(138,43,226,.14), rgba(10,15,34,.82));
  border:1px solid rgba(138,43,226,.44);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px #000, inset 0 0 60px -40px var(--cyan);}
/* Vệt sáng chạy trên viền thẻ */
.wl-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 68%, rgba(0,255,255,.5) 78%, rgba(138,43,226,.6) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  animation:orbitEdge 9s linear infinite;opacity:.85;}
@keyframes orbitEdge{to{transform:rotate(1turn);}}

.wl-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.18em;color:var(--cyan);padding:6px 13px;border-radius:999px;margin-bottom:16px;
  background:rgba(0,255,255,.08);border:1px solid rgba(0,255,255,.32);}
.wl-tag .led{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:blink 1.6s steps(1,end) infinite;}

.wl-card h2{font-family:var(--font-display);font-weight:700;margin:0 0 12px;
  font-size:clamp(21px,3.2vw,31px);line-height:1.2;letter-spacing:-.01em;}
.wl-desc{max-width:56ch;margin:0 auto 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.68;}
.wl-desc b{color:var(--purple-soft);}

.reward{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:10px 18px;
  border-radius:999px;background:rgba(26,16,44,.7);border:1px solid rgba(192,132,252,.45);
  box-shadow:0 0 34px -14px var(--purple);}
.reward-gem{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(circle at 50% 38%, rgba(192,132,252,.5), rgba(143,123,255,.12) 68%, transparent);}
.reward-gem img{width:21px;height:21px;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(192,132,252,.95));animation:gemPulse 2.6s ease-in-out infinite;}
@keyframes gemPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.reward-num{font-family:var(--font-display);font-weight:700;font-size:23px;color:#f0e0ff;
  text-shadow:0 0 16px rgba(192,132,252,.75);}
.reward-unit{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--purple-soft);}

/* ---------- Form ---------- */
.wl-form{display:flex;gap:10px;max-width:560px;margin:0 auto 12px;flex-wrap:wrap;}
.field{flex:1 1 240px;min-width:0;}
.wl-form input[type="email"]{width:100%;height:52px;padding:0 16px;border-radius:14px;
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:rgba(8,12,28,.8);border:1px solid var(--brd);
  transition:border-color .18s, box-shadow .18s, background .18s;}
.wl-form input[type="email"]::placeholder{color:var(--ink-faint);}
.wl-form input[type="email"]:focus{outline:none;border-color:var(--cyan);background:rgba(0,255,255,.06);
  box-shadow:0 0 0 3px rgba(0,255,255,.14);}
.wl-form input[type="email"].invalid{border-color:#ff8a8a;box-shadow:0 0 0 3px rgba(255,120,120,.16);}
.wl-submit{flex:0 0 auto;height:52px;white-space:nowrap;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
@media (max-width:560px){ .wl-form{flex-direction:column;} .wl-submit{width:100%;} }

/* Lời báo lỗi của form waitlist — xem lý do vì sao KHÔNG chỉ dùng toast ở
   js/index.js (toast neo `top:22px`, cách ô email ~465px khi cuộn tới cuối trang). */
.wl-err{display:flex;align-items:center;gap:9px;max-width:560px;margin:0 auto 12px;
  padding:10px 14px;border-radius:12px;text-align:left;
  font-size:13.4px;font-weight:600;line-height:1.45;color:#ffd6d6;
  background:rgba(255,120,120,.10);border:1px solid rgba(255,120,120,.42);
  animation:wlErrIn .26s var(--jelly);}
.wl-err[hidden]{display:none;}
.wl-err .lic{width:18px;height:18px;flex:none;fill:none;stroke:#ff8a8a;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,120,120,.55));}
@keyframes wlErrIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.wl-hint{margin:0;font-size:12.2px;color:var(--ink-faint);}

/* ---------- Trạng thái thành công ---------- */
.wl-done{margin-top:22px;padding-top:22px;border-top:1px dashed rgba(150,180,255,.22);
  animation:doneIn .45s var(--jelly);}
@keyframes doneIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.done-ic{position:relative;width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--good);background:rgba(99,230,168,.12);border:1px solid rgba(99,230,168,.45);
  box-shadow:0 0 26px -8px rgba(99,230,168,.8);
  animation:donePop .5s var(--jelly) both;}
.done-ic svg{width:26px;height:26px;}
/* chỉ nét check tự vẽ ra — KHÔNG áp lên <circle>, nếu không vòng tròn sẽ đứt nét */
.done-ic svg path{stroke-dasharray:34;stroke-dashoffset:34;
  animation:doneDraw .45s ease-out .22s forwards;}
/* vòng sáng lan ra một lần khi thành công */
.done-ic::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--good);animation:doneRing 1.1s ease-out .2s 2;}
@keyframes donePop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes doneDraw{to{stroke-dashoffset:0;}}
@keyframes doneRing{from{transform:scale(1);opacity:.7;}to{transform:scale(1.9);opacity:0;}}
.wl-done h3{font-family:var(--font-display);font-size:18px;margin:0 0 8px;color:var(--good);}
.wl-done p{margin:0 0 16px;font-size:13.8px;line-height:1.65;color:var(--ink-soft);}
.wl-done p b{color:var(--ink);}

/* ============================== AEO / FAQ ============================== */
.aeo{padding:clamp(24px,5vw,56px) 0 10px;}
.aeo-head{max-width:760px;margin:0 auto clamp(24px,4vw,40px);text-align:center;}
.aeo h2{font-family:var(--font-display);font-weight:700;margin:0 0 14px;
  font-size:clamp(22px,3.4vw,34px);letter-spacing:-.01em;}
.answer{margin:0;font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.78;color:var(--ink-soft);}

.pillars{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:0 0 clamp(28px,5vw,48px);padding:0;}
.pillars li{display:flex;flex-direction:column;gap:7px;padding:18px 16px;border-radius:18px;
  background:var(--glass);border:1px solid var(--brd);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .22s var(--ease), border-color .22s, box-shadow .22s;}
.pillars li:hover{transform:translateY(-4px);border-color:rgba(0,255,255,.4);
  box-shadow:0 22px 46px -30px var(--cyan);}
.p-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  color:var(--cyan);background:rgba(0,255,255,.1);border:1px solid rgba(0,255,255,.3);}
.pillars li:nth-child(2) .p-ic{color:var(--purple-soft);background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.34);}
.pillars li:nth-child(3) .p-ic{color:var(--gold);background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.32);}
.pillars li:nth-child(4) .p-ic{color:var(--green);background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.32);}
.pillars b{font-family:var(--font-display);font-size:14.5px;}
.pillars span{font-size:12.6px;line-height:1.55;color:var(--ink-soft);}
@media (max-width:900px){ .pillars{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .pillars{grid-template-columns:1fr;} }

.faq{max-width:820px;margin:0 auto;}
.faq-h{text-align:center;font-size:clamp(19px,2.6vw,25px);margin-bottom:18px;}
.faq-item{border-radius:16px;margin-bottom:10px;overflow:hidden;
  background:rgba(15,23,42,.5);border:1px solid var(--brd);transition:border-color .2s;}
.faq-item[open]{border-color:rgba(138,43,226,.45);}
.faq-item summary{cursor:pointer;list-style:none;padding:15px 46px 15px 18px;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:14.8px;transition:color .18s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--cyan);}
.faq-item summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--cyan);}
.faq-item p{margin:0;padding:0 18px 17px;font-size:13.6px;line-height:1.72;color:var(--ink-soft);}

/* ============================== FOOTER ============================== */
.foot{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:34px 0 6px;font-size:12.4px;color:var(--ink-faint);}
.foot .sep{opacity:.5;}

/* ============================== TOAST (phần chung ở common.css) ============================== */
.toast{top:22px;transform:translateX(-50%) translateY(-14px);z-index:90;padding:12px 20px;font-size:14px;
  max-width:calc(100vw - 28px);text-align:center;
  background:rgba(16,22,40,.95);border:1px solid rgba(0,255,255,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.85);
  transition:opacity .3s var(--ease), transform .3s var(--ease);}

/* Dẫn sang Wiki sau khối FAQ */
.faq-more{margin:18px 0 0;text-align:center;}
.faq-more a{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  color:var(--cyan);padding:11px 20px;border-radius:12px;
  background:rgba(0,255,255,.07);border:1px solid rgba(0,255,255,.3);
  transition:background .18s,transform .14s;}
.faq-more a:hover{background:rgba(0,255,255,.14);transform:translateY(-2px);}
.foot a{color:var(--ink-soft);}
.foot a:hover{color:var(--cyan);}

/* ============================================================
   DẢI KHUYẾN NGHỊ DÙNG MÁY TÍNH (chỉ hiện trên điện thoại / tablet nhỏ)
   ⚠️ NEO DƯỚI ĐÁY, KHÔNG CHE NỘI DUNG. Trang này đã go-live và Google lập chỉ mục
      theo mobile-first; một lớp phủ chắn hết nội dung trên điện thoại bị xếp vào
      "intrusive interstitial". Dải cao ~96px, người dùng vẫn đọc và đăng ký được.
   ⚠️ `env(safe-area-inset-bottom)` cho iPhone có thanh gesture — thiếu nó thì nút
      đóng nằm dưới vạch home và bấm không ăn.
   ============================================================ */
.mob-note{
  position:fixed;left:10px;right:10px;z-index:60;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 13px 14px;border-radius:16px;
  background:rgba(10,14,30,.96);border:1px solid rgba(0,255,255,.34);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.8), 0 0 22px -8px rgba(0,255,255,.35);
  backdrop-filter:blur(8px);
  /* Bắt đầu ở dưới mép + trong suốt; `.show` mới đưa lên. */
  transform:translateY(120%);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.4,.64,1),opacity .28s ease;
}
.mob-note.show{transform:translateY(0);opacity:1;}
.mob-note .mn-ic{font-size:24px;line-height:1.15;flex:none;}
.mob-note .mn-body{min-width:0;flex:1;}
.mob-note strong{display:block;font-family:var(--font-display,inherit);
  font-size:13.5px;color:#fff;margin-bottom:3px;}
.mob-note p{margin:0;font-size:12px;line-height:1.55;color:var(--ink-soft);}
.mob-note p b{color:var(--cyan);}
.mob-note .mn-x{
  flex:none;width:34px;height:34px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:var(--ink-soft);font-size:20px;line-height:1;
}
.mob-note .mn-x:hover{color:#fff;border-color:rgba(0,255,255,.45);}

@media (prefers-reduced-motion:reduce){
  /* Giữ dải (nó là thông tin), chỉ bỏ phần trượt lên. */
  .mob-note{transition:none;transform:none;}
}

/* Vùng chạm 44px trên thiết bị cảm ứng — lý do ghi ở `css/common.css`.
   Đo trên iPad: link logo về trang chủ cao 32px. */
@media (pointer: coarse){
  .brand{min-height:44px;}
  /* Link "Wiki" ở chân trang là một flex item ĐỨNG RIÊNG (hai dấu · là <span>
     riêng biệt), nên KHÔNG được miễn theo ngoại lệ "inline trong câu" của WCAG
     2.5.5 — đo trên iPad ra 25×15px.
     ⚠️ Phải đổi sang `inline-flex`: <a> mặc định là `inline`, mà phần tử inline
        BỎ QUA min-height, đặt mỗi min-height thì không có gì thay đổi. */
  .foot a{display:inline-flex;align-items:center;justify-content:center;
          min-width:44px;min-height:44px;padding:0 8px;}
}

/* ============================================================
   DẢI MỜI SANG BẢN NGÔN NGỮ KIA (`.lang-note`)
   Dùng lại đúng khuôn `.mob-note` ngay trên — neo đáy, không che nội dung,
   `env(safe-area-inset-bottom)` cho iPhone có thanh gesture.
   ⚠️ `--ln-lift` do JS đặt: khi dải "nên dùng laptop" cũng đang hiện (khách
      quốc tế vào bằng điện thoại — hoàn toàn có thật), hai dải cùng neo đáy sẽ
      CHỒNG LÊN NHAU. JS đo chiều cao dải kia rồi nâng dải này lên trên.
   ⚠️ Tông TÍM chứ không cyan: `.mob-note` đã là cyan, hai dải cùng màu cạnh
      nhau đọc ra như một khối bị vỡ làm đôi.
   ============================================================ */
.lang-note{
  position:fixed;left:10px;right:10px;z-index:61;
  bottom:calc(10px + var(--ln-lift, 0px) + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 13px 13px;border-radius:16px;
  background:rgba(10,14,30,.96);border:1px solid rgba(143,123,255,.42);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.8), 0 0 22px -8px rgba(143,123,255,.4);
  backdrop-filter:blur(8px);
  transform:translateY(120%);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.4,.64,1),opacity .28s ease;
}
.lang-note.show{transform:translateY(0);opacity:1;}
.lang-note .ln-ic{font-size:22px;line-height:1.15;flex:none;}
.lang-note .ln-body{min-width:0;flex:1;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 10px;}
.lang-note p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);}
.lang-note .ln-go{
  font-family:var(--font-display,inherit);font-size:12.5px;font-weight:600;
  color:#c9bcff;text-decoration:none;border-bottom:1px solid rgba(143,123,255,.5);
  /* Vùng chạm >=44px theo WCAG 2.5.5 — dự án đã trả giá vì đặt đúng mốc 44,
     nên để 48 cho có biên an toàn (bài học 02/08/2026). */
  display:inline-flex;align-items:center;min-height:48px;
}
.lang-note .ln-go:hover{color:#fff;border-color:#c9bcff;}
.lang-note .ln-x{
  flex:none;width:34px;height:34px;min-width:34px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:var(--ink-soft);font-size:20px;line-height:1;
}
.lang-note .ln-x:hover{color:#fff;border-color:rgba(143,123,255,.55);}
@media (pointer:coarse){ .lang-note .ln-x{width:44px;height:44px;min-width:44px;} }