/* Khu Huấn Luyện, hướng A "Ban đêm năng lượng" (bản thử ẩn, QĐ-18 Đ22).
 *
 * Một sảnh tập ban đêm tím mận, nhìn phối cảnh mềm; mỗi công cụ là một Lõi năng lượng dựng bằng
 * Blender (ảnh WebP trong suốt), đứng trên bục phát sáng, xếp theo từng khu có sàn vòng sáng.
 *
 * Luật hình khối: khung kính 20-22px, nút và chip bo tròn hẳn (pill), ô nhập cũng pill.
 * Màu: nền tím mận đêm, một màu nhấn hồng Ari #F58BAF cho nút và trạng thái, oải hương #B9A3F0
 * cho viền kính. Tám màu nhóm chỉ dùng để nhận ra khu (lõi, bục, dấu khu), không dùng cho nút.
 * Chữ: Chakra Petch (tiêu đề kiểu game, có bộ tiếng Việt) + Be Vietnam Pro (chữ đọc).
 * Chuyển động: chỉ transform/opacity; "giảm chuyển động" thì đứng yên hết.
 */

:root{
  --nen:#0E0A1C;
  --nen-2:#150F27;
  --nen-3:#1D1535;
  --kinh:rgba(22,16,42,.72);
  --vien:rgba(185,163,240,.16);
  --vien-2:rgba(185,163,240,.30);
  --chu:#F4EEF8;
  --chu-2:#BDB3D3;
  --chu-3:#9C92B6;
  --hong:#F58BAF;
  --hong-2:#FFA6C2;
  --oai:#B9A3F0;
  --tren-hong:#2A0F1A;
  --canh-bao:#F0A37E;
  --f-game:"Chakra Petch","Be Vietnam Pro",system-ui,sans-serif;
  --f-chu:"Be Vietnam Pro",system-ui,sans-serif;
  --e1:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4.5vw,56px);
  --nav:64px;
  color-scheme:dark;
}
@media (max-width:767.98px){:root{--nav:56px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--nen);color:var(--chu);
  font-family:var(--f-chu);font-size:16px;line-height:1.6;font-weight:400;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
/* soát 24/09: vòng sáng .khu-san::before (left/right -4%) lòi ra mép phải → trang cuộn ngang 14 px ở 1280, điện thoại bị thu nhỏ 385/375.
   overflow-x:clip ở body không chặn được vì trình duyệt đẩy overflow của body lên khung nhìn; cắt ở main (rộng đúng bằng màn hình). */
main{overflow-x:clip}
h1,h2,h3{margin:0;font-family:var(--f-game);font-weight:700;line-height:1.18;letter-spacing:.01em}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--hong)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hong);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--hong);color:var(--tren-hong);padding:12px 18px;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------------ nút dùng chung */
.nut,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--f-chu);font-weight:600;font-size:.97rem;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--e1),background-color .35s var(--e1),border-color .35s var(--e1),box-shadow .35s var(--e1);
}
.nut.chinh,.btn{background:var(--hong);color:var(--tren-hong);box-shadow:0 14px 34px -14px rgba(245,139,175,.75)}
.nut.phu,.btn.ghost{background:rgba(185,163,240,.06);color:var(--chu);border-color:var(--vien-2)}
.nut.nho,.btn.small{min-height:44px;padding:0 18px;font-size:.88rem}
.btn.small.warn{background:#c9603c;border-color:#c9603c;color:#fff;box-shadow:none}
@media (hover:hover){
  .nut.chinh:hover,.btn:hover{background:var(--hong-2);transform:translateY(-2px)}
  .nut.phu:hover,.btn.ghost:hover{border-color:var(--oai);background:rgba(185,163,240,.12)}
}
.nut:active,.btn:active{transform:scale(.98)}

/* ------------------------------------------------------------------ dải báo bản thử + thanh điều hướng */
.thu-bao{padding:7px var(--gut);font-size:.78rem;line-height:1.45;color:var(--chu-2);text-align:center;
  background:linear-gradient(90deg,rgba(245,139,175,.10),rgba(185,163,240,.10));border-bottom:1px solid var(--vien)}
.topnav{
  position:sticky;top:0;z-index:50;height:var(--nav);
  display:flex;align-items:center;gap:18px;padding:0 var(--gut);
  background:rgba(14,10,28,.74);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(185,163,240,.10);
}
.topnav .brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-height:44px;text-decoration:none}
.topnav .brand img{width:30px;height:auto;display:block;filter:drop-shadow(0 0 10px rgba(245,139,175,.3))}
.topnav .brand b{font-family:var(--f-game);font-weight:700;font-size:1.06rem;color:var(--chu);letter-spacing:.02em}
.topnav .links{display:flex;gap:24px}
.topnav .links a{color:var(--chu-2);text-decoration:none;font-size:.88rem;transition:color .3s var(--e1)}
.topnav .links a:hover,.topnav .links a[aria-current]{color:var(--chu)}
.topnav .links a[aria-current]{text-decoration:underline;text-decoration-color:var(--hong);text-underline-offset:8px;text-decoration-thickness:2px}
.topnav .btn{min-height:44px;padding:0 18px;font-size:.88rem;box-shadow:none}
@media (max-width:959.98px){.topnav .links{display:none}}
@media (prefers-reduced-transparency:reduce){.topnav{background:var(--nen)}}

/* ------------------------------------------------------------------ màn đầu: sảnh + bục + nhân vật */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,calc(100svh - var(--nav) - 34px - 150px),760px);
  display:grid;align-items:center;
}
.san-khau{position:absolute;inset:0;z-index:-1;container-type:size}
.canh{
  position:absolute;left:50%;top:50%;container-type:size;
  aspect-ratio:16/9;width:max(100cqw,calc(100cqh * 16 / 9));
  translate:-50% -50%;
}
.canh-nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* phủ tối phía chữ để chữ đọc rõ, và tan xuống màu nền trang ở mép dưới */
.san-khau::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,10,28,.92) 0%,rgba(14,10,28,.62) 32%,rgba(14,10,28,0) 58%),
    linear-gradient(0deg,var(--nen) 0%,rgba(14,10,28,0) 22%);
}
/* Điểm neo = tâm mặt bục trong ảnh nền (tính bằng phép chiếu máy ảnh Blender: 64% / 71%). */
.buc{position:absolute;left:64%;top:71%;width:0;height:0}
.buc-vong{
  position:absolute;left:0;top:0;width:24cqh;height:6cqh;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,139,175,.55),rgba(185,163,240,.22) 60%,transparent);
  animation:vong 4.8s ease-in-out infinite;
}
.nv{
  position:absolute;left:0;bottom:-.4cqh;height:31cqh;width:auto;max-width:none;translate:-50% 0;
  transform-origin:50% 100%;
  filter:drop-shadow(0 0 1.2cqh rgba(245,139,175,.35)) drop-shadow(0 1.4cqh 1.4cqh rgba(8,4,20,.55));
  animation:tho 4.8s ease-in-out infinite;
}
.nv-the{
  position:absolute;left:0;top:2.2cqh;translate:-50% 0;
  min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-family:var(--f-game);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chu);background:rgba(20,14,38,.78);border:1px solid rgba(245,139,175,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 28px -12px rgba(245,139,175,.6);
  transition:border-color .3s var(--e1),transform .3s var(--e1);
}
.nv-the:hover{border-color:var(--hong);transform:translateY(-2px)}
.bui{position:absolute;inset:0;pointer-events:none}
.bui i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:#fff;box-shadow:0 0 8px 2px rgba(245,139,175,.55);opacity:.0;
  animation:bay 8s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}

.hero-chu{position:relative;padding:48px var(--gut) 120px;max-width:min(40rem,54vw)}
.hero-nhan{font-family:var(--f-game);font-weight:600;font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;color:var(--hong)}
.hero h1{margin-top:10px;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.12;text-transform:uppercase;letter-spacing:.015em;
  padding-top:.08em;text-wrap:balance}
.hero-mo{margin-top:18px;max-width:32ch;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.62;color:var(--chu-2)}
.hero-nut{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:767.98px){
  .hero{min-height:min(700px,calc(100svh - var(--nav) - 40px));align-items:stretch}
  .canh{aspect-ratio:1080/1600;width:max(100cqw,calc(100cqh * 1080 / 1600))}
  .buc{left:50%;top:59.65%}
  .buc-vong{width:30cqw;height:4.5cqh}
  .nv{height:26cqh}
  .nv-the{top:3cqh}
  .san-khau::after{
    background:
      linear-gradient(180deg,rgba(14,10,28,.78) 0%,rgba(14,10,28,0) 22%),
      linear-gradient(0deg,var(--nen) 0%,rgba(14,10,28,.9) 26%,rgba(14,10,28,0) 44%);
  }
  .hero-chu{max-width:none;display:grid;grid-template-rows:auto 1fr auto;padding:22px var(--gut) 34px;min-height:inherit}
  .hero h1{font-size:clamp(2rem,9.4vw,2.6rem);margin-top:6px}
  .hero-nhan{font-size:.8rem}
  .hero-sau{grid-row:3}
  .hero-mo{margin-top:0;max-width:36ch;font-size:1rem}
  .hero-nut{margin-top:18px}
  .hero-nut .nut{flex:1 1 auto}
}

/* ------------------------------------------------------------------ bảng tiến trình (HUD) */
.hud{position:relative;z-index:3;margin-top:-92px;padding:0 var(--gut)}
.hud-khung{
  max-width:1180px;margin:0 auto;padding:18px 20px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(30,22,56,.80),rgba(18,13,36,.84));
  border:1px solid var(--vien);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
}
@media (prefers-reduced-transparency:reduce){.hud-khung{background:var(--nen-3)}}
.hud-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 10px}
.hud-dau h2{font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chu)}
.mau{font-size:.74rem;font-weight:600;color:var(--oai);border:1px dashed rgba(185,163,240,.5);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hud-luoi{display:grid;grid-template-columns:auto auto auto auto;gap:8px;align-items:stretch}
.hud-luoi > button,.tq{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(185,163,240,.10);text-align:left;cursor:pointer;
  transition:background-color .3s var(--e1),border-color .3s var(--e1),transform .3s var(--e1);
}
.hud-luoi > button:hover,.tq:hover{background:rgba(185,163,240,.08);border-color:var(--vien-2)}
.hud-luoi > button:active,.tq:active{transform:scale(.985)}
.hud-av{width:54px;height:54px;flex:none;border-radius:50%;padding:3px;
  background:conic-gradient(var(--hong) var(--p),rgba(185,163,240,.18) 0)}
.hud-av-khung{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#3a2a66,#150f27)}
.hud-av-khung img{width:100%;height:100%;object-fit:cover;object-position:50% 7%;transform:scale(1.45);transform-origin:50% 55%}
.hud-cap{display:grid;line-height:1.2}
.hud-cap b{font-family:var(--f-game);font-size:1.3rem;font-weight:700}
.hud-cap small{font-size:.82rem;color:var(--oai);font-weight:600}
.hud-xp{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:2px!important}
.hud-nhan{font-size:.76rem;color:var(--chu-3);font-weight:500}
.hud-soxp{font-family:var(--f-game);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.hud-soxp small{font-size:.8rem;color:var(--chu-2);font-weight:600}
.hud-vach{display:none}
.hud-so{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:2px!important}
.hud-so b{font-family:var(--f-game);font-size:1.5rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.hud-so b small{font-size:.95rem;color:var(--chu-2)}
.hud-so span{font-size:.8rem;color:var(--chu-2)}
.hud-moi{margin-top:12px;padding:12px 6px 2px;border-top:1px solid rgba(185,163,240,.10)}
.hud-moi h3{font-family:var(--f-chu);font-weight:600;font-size:.86rem;color:var(--chu-2);letter-spacing:.01em;margin:0 0 8px 2px}
.hud-moi ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tq{width:100%;display:grid!important;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:10px!important;row-gap:3px;min-height:64px;padding:8px 12px 8px 8px}
.tq img{grid-row:1/3;align-self:center}
.tq img{width:48px;height:48px;flex:none;filter:drop-shadow(0 4px 10px rgba(185,163,240,.25))}
.tq-ten{align-self:end;font-weight:600;font-size:.9rem;line-height:1.3}
.tq-tt{justify-self:start;align-self:start;font-size:.72rem;font-weight:600;color:var(--chu-2);border:1px solid var(--vien-2);border-radius:999px;padding:1px 9px;white-space:nowrap}
.tq.xong .tq-tt{color:var(--tren-hong);background:var(--hong);border-color:var(--hong)}
.tq.sap img{opacity:.55;filter:grayscale(.4)}
.tq.sap .tq-tt{border-style:dashed;color:var(--chu-3)}
.hud-chu{margin:10px 8px 0;font-size:.8rem;color:var(--chu-3)}

@media (min-width:1100px){
  .hud-khung{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
  .hud-dau{grid-column:1/-1}
  .hud-moi{margin-top:0;padding:0 0 0 18px;border-top:0;border-left:1px solid rgba(185,163,240,.10)}
  .hud-moi h3{margin-top:-4px}
  .hud-chu{grid-column:1/-1}
}
@media (max-width:767.98px){
  .hud{margin-top:-18px}
  .hud-khung{padding:14px 12px 12px;border-radius:20px}
  .hud-luoi{grid-template-columns:1fr 1fr}
  .hud-luoi > button{min-height:60px;padding:8px 12px}
  .hud-av{width:48px;height:48px}
  .hud-moi ul{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ thanh tìm + lọc */
.cac-tram{max-width:1240px;margin:0 auto;padding:64px var(--gut) 24px}
.loc{
  position:relative;z-index:20;
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:10px 16px;align-items:end;
  padding:12px 14px;border-radius:20px;
  background:rgba(18,13,36,.86);border:1px solid var(--vien);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9);
}
.loc[hidden]{display:none}
.loc-tim{display:grid;gap:4px}
.loc-tim label{font-size:.78rem;font-weight:600;color:var(--chu-2);padding-left:14px}
.loc-tim input{
  width:100%;min-height:46px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--vien-2);color:var(--chu);
  font:inherit;font-size:.95rem;
}
.loc-tim input::placeholder{color:var(--chu-3)}
.loc-tim input:focus{outline:2px solid var(--hong);outline-offset:2px;border-color:transparent}
.loc-nhom{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px;scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
.loc-nhom::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(185,163,240,.22);color:var(--chu-2);
  font-family:var(--f-chu);font-weight:600;font-size:.86rem;white-space:nowrap;
  transition:background-color .3s var(--e1),border-color .3s var(--e1),color .3s var(--e1);
}
.chip:hover{border-color:var(--vien-2);color:var(--chu)}
.chip[aria-pressed="true"]{background:rgba(245,139,175,.16);border-color:var(--hong);color:var(--chu)}
.chip-mau{width:10px;height:10px;border-radius:3px;background:rgb(var(--m));transform:rotate(45deg);
  box-shadow:0 0 10px rgba(var(--m),.7)}
.loc-dem{grid-column:1/-1;font-size:.78rem;color:var(--chu-3);padding-left:14px;margin-top:-2px}
.rieng-tu{margin:18px 4px 0;font-size:.86rem;color:var(--chu-3);max-width:72ch}
@media (min-width:768px){.loc-nhom{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}}
@media (max-width:767.98px){
  .cac-tram{padding-top:44px}
  .loc{position:static;grid-template-columns:1fr;padding:12px}
  .loc-nhom{margin:0 -12px;padding:2px 12px}
}

/* ------------------------------------------------------------------ khu + trạm */
.khu{position:relative;isolation:isolate;padding:64px 0 30px;scroll-margin-top:calc(var(--nav) + 150px)}
.khu[hidden]{display:none}
.khu::before{ /* hơi sáng của khu, màu nhóm */
  content:"";position:absolute;inset:10% -8% 0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 46% 50% at 30% 62%,rgba(var(--m),.10),transparent 70%);
}
.khu.dao::before{background:radial-gradient(ellipse 46% 50% at 70% 62%,rgba(var(--m),.10),transparent 70%)}
.khu-dau{margin-bottom:34px}
.khu-dau h2{display:inline-flex;align-items:center;gap:14px;vertical-align:middle;font-size:clamp(1.45rem,2.7vw,2rem);text-transform:uppercase;letter-spacing:.04em}
.khu-dau h2::before{content:"";width:12px;height:12px;flex:none;border-radius:3px;background:rgb(var(--m));transform:rotate(45deg);
  box-shadow:0 0 14px rgba(var(--m),.85)}
.khu-so{display:inline-block;vertical-align:middle;margin-left:16px;font-family:var(--f-game);font-weight:600;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--m))}
.khu-dau p{margin-top:8px;color:var(--chu-2);max-width:60ch;padding-left:26px}

.khu-san{position:relative;display:grid;grid-template-columns:minmax(270px,340px) 1fr;gap:18px 30px;align-items:center}
.khu.dao .khu-san{grid-template-columns:1fr minmax(270px,340px)}
.khu.dao .tram.lon{order:2}
/* sàn vòng sáng nằm nghiêng dưới các trạm: cùng ngôn ngữ với sàn sảnh ở màn đầu */
.khu-san::before{
  content:"";position:absolute;left:-4%;right:-4%;bottom:-6%;height:92%;z-index:-1;pointer-events:none;
  background:
    repeating-radial-gradient(ellipse at 50% 50%,transparent 0 38px,rgba(var(--m),.26) 45px,transparent 52px),
    radial-gradient(ellipse 50% 46% at 50% 50%,rgba(var(--m),.16),transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 54% 50% at 50% 50%,#000 30%,transparent 74%);
  mask-image:radial-gradient(ellipse 54% 50% at 50% 50%,#000 30%,transparent 74%);
  transform:perspective(900px) rotateX(66deg);transform-origin:50% 100%;
}
.khu-phu{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,196px));justify-content:center;gap:26px 10px;padding-bottom:22px}
.khu-phu > .tram:nth-child(even){translate:0 22px}

.tram{
  position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:8px;
  padding:10px 8px 14px;border-radius:20px;text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .4s var(--e1);
}
.tram[hidden]{display:none}
.tram-loi{position:relative;width:150px;aspect-ratio:1;display:grid;place-items:center}
.tram-loi img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 20px rgba(var(--m),.26));
  animation:troi 6.4s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s);
  transition:translate .5s var(--e1),filter .5s var(--e1);
}
/* bục nhỏ: đĩa sáng hình elip + cột sáng mờ phía sau lõi */
.tram-be{position:absolute;left:14%;right:14%;bottom:-1%;height:20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--m),.55),rgba(var(--m),.16) 62%,transparent);
  box-shadow:inset 0 0 0 1px rgba(var(--m),.34);
  animation:nhip 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
.tram-be::before{content:"";position:absolute;left:24%;right:24%;bottom:50%;height:330%;border-radius:40% 40% 0 0;
  background:linear-gradient(0deg,rgba(var(--m),.20),transparent);filter:blur(6px)}
.tram-be::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:1.5px solid rgba(var(--m),.95);opacity:0;transform:scale(.6)}
.tram-chu{display:grid;justify-items:center;gap:4px;max-width:210px}
.tram-ten{font-weight:600;font-size:.98rem;line-height:1.35;color:var(--chu)}
.tram-mo{font-size:.84rem;line-height:1.5;color:var(--chu-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tram-nv{margin-top:4px;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--hong);
  border:1px solid rgba(245,139,175,.42);border-radius:999px;padding:2px 10px}
.tram-nv.sap{color:var(--chu-3);border-color:rgba(185,163,240,.3);border-style:dashed}

@media (hover:hover){
  a.tram:hover{background:rgba(var(--m),.05)}
  a.tram:hover .tram-loi img{translate:0 -10px;filter:drop-shadow(0 18px 30px rgba(var(--m),.55)) brightness(1.1)}
  a.tram:hover .tram-be::after{animation:no .75s var(--e1)}
}
a.tram:focus-visible{outline:2px solid rgb(var(--m));outline-offset:2px;background:rgba(var(--m),.06)}
a.tram:focus-visible .tram-loi img{translate:0 -10px;filter:drop-shadow(0 18px 30px rgba(var(--m),.55)) brightness(1.1)}
a.tram:focus-visible .tram-be::after{animation:no .75s var(--e1)}
a.tram:active .tram-loi{transform:scale(.95);transition:transform .12s ease-out}
a.tram:active .tram-be::after{animation:no .45s var(--e1)}
.tram.sap{cursor:default}
.tram.sap .tram-loi img{opacity:.5;filter:grayscale(.45) drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.tram.sap .tram-be{opacity:.4}

/* trạm chính của mỗi khu: bục lớn */
.tram.lon{padding:6px 8px 18px}
.tram.lon .tram-loi{width:240px}
.tram.lon .tram-be{height:18%;box-shadow:inset 0 0 0 1.5px rgba(var(--m),.5),0 0 40px rgba(var(--m),.25)}
.tram.lon .tram-be::before{height:420%}
.tram.lon .tram-ten{font-family:var(--f-game);font-weight:700;font-size:1.3rem;letter-spacing:.02em;line-height:1.25}
.tram.lon .tram-mo{font-size:.92rem;-webkit-line-clamp:3}
.tram.lon .tram-chu{max-width:290px}

@media (max-width:767.98px){
  .khu{padding:52px 0 18px}
  .khu-dau{margin-bottom:18px}
  .khu-dau p{padding-left:0;font-size:.94rem}
  .khu-san,.khu.dao .khu-san{grid-template-columns:1fr;gap:6px}
  .khu.dao .tram.lon{order:0}
  .khu-san::before{height:60%;bottom:0}
  .tram.lon{grid-template-columns:136px 1fr;justify-items:start;text-align:left;align-items:center;gap:12px;padding:4px 0 10px}
  .tram.lon .tram-loi{width:136px}
  .tram.lon .tram-chu{justify-items:start;max-width:none}
  .tram.lon .tram-ten{font-size:1.14rem}
  .tram.lon .tram-mo{font-size:.88rem}
  .khu-phu{grid-template-columns:1fr 1fr;gap:12px 8px;padding-bottom:24px}
  .khu-phu > .tram:nth-child(even){translate:0 22px}
  .tram{padding:6px 4px 10px}
  .tram-loi{width:118px}
  .tram-ten{font-size:.93rem}
  .tram-mo{font-size:.8rem}
}

/* hiện dần khi khu trôi vào màn (chỉ khi có JS; không JS thì hiện sẵn) */
.js .khu .tram{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e1),transform .7s var(--e1),background-color .4s var(--e1);
  transition-delay:calc(var(--i) * 70ms)}
.js .khu.hien .tram{opacity:1;transform:none}
/* lõi ngoài màn thì đứng yên cho đỡ tốn máy */
.js .khu:not(.dang-thay) .tram-loi img,.js .khu:not(.dang-thay) .tram-be{animation-play-state:paused}

.trong{margin:40px auto 0;max-width:420px;text-align:center;padding:30px 20px;border-radius:22px;border:1px dashed var(--vien-2);background:rgba(185,163,240,.04)}
.trong[hidden]{display:none}
.trong p{color:var(--chu-2);margin-bottom:16px}

/* ------------------------------------------------------------------ sổ tay trên máy (hub.js + theodoi.js vẽ vào đây) */
.so-tay{max-width:1180px;margin:40px auto 0;padding:0 var(--gut)}
.so-tay > h2{font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase;letter-spacing:.04em}
.so-tay-mo{margin:8px 0 22px;color:var(--chu-2);max-width:60ch}
.so-tay h3{font-family:var(--f-game);font-size:1.02rem;letter-spacing:.03em;margin:0 0 8px}
.so-tay .lede{color:var(--chu-2);font-size:.95rem;line-height:1.66;max-width:62ch;margin:0 0 18px}
.so-tay .hint{color:var(--chu-3);font-size:.86rem;line-height:1.55;margin:0 0 14px}
.mecard{border:1px solid var(--vien);border-radius:22px;padding:clamp(20px,4vw,32px);
  background:linear-gradient(180deg,rgba(185,163,240,.06),rgba(185,163,240,.015))}
.mecard h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:0 0 10px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 20px}
.metric{padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(185,163,240,.10)}
.metric .n{display:flex;align-items:baseline;gap:7px}
.metric b{font-family:var(--f-game);font-size:clamp(1.5rem,4.6vw,2rem);line-height:1;font-weight:700}
.metric .unit{font-size:.76rem;color:var(--chu-3)}
.metric .lab{display:block;margin-top:7px;font-size:.76rem;color:var(--chu-2);line-height:1.4}
.me-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,38px);margin-top:26px;padding-top:24px;border-top:1px solid rgba(185,163,240,.10)}
.mecard .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mecard .row.small{gap:18px;margin-top:14px}
.me-side .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip.add{border-style:dashed}
.lnk{background:none;border:0;padding:0;color:var(--chu-2);cursor:pointer;display:inline-flex;align-items:center;min-height:44px;
  font:inherit;font-size:.86rem;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--hong)}
.lnk.warn:hover{color:var(--canh-bao)}
.sbar{display:flex;align-items:center;gap:6px 9px;flex-wrap:wrap;margin:0 0 12px;font-size:.8rem;color:var(--chu-2)}
.sbar .dot{width:7px;height:7px;border-radius:50%;flex:none}
.sbar .dot.on{background:#7fd6a8;box-shadow:0 0 0 3px rgba(127,214,168,.14)}
.sbar .dot.off{background:#e8a06a;box-shadow:0 0 0 3px rgba(232,160,106,.14)}
.inline-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px}
.inline-form input{flex:1 1 150px;min-width:0;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--vien-2);
  background:rgba(255,255,255,.04);color:inherit;font:inherit;font-size:.92rem}
.danger-box{margin-top:16px;padding:16px;border-radius:16px;border:1px solid rgba(240,163,126,.36);background:rgba(240,163,126,.06)}
.danger-box p{margin:0 0 6px;font-size:.88rem;line-height:1.6}
.first-note{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(245,139,175,.3);background:rgba(245,139,175,.06)}
.first-note p{flex:1 1 240px;font-size:.9rem;line-height:1.6}
.pass-box{margin-top:26px;padding-top:22px;border-top:1px solid rgba(185,163,240,.10)}
.ma-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--vien-2)}
.ma-box code{font-family:var(--f-game);font-size:1.02rem;letter-spacing:.09em;user-select:all;-webkit-user-select:all;word-break:break-all}
.ok-line{margin-top:12px;font-size:.84rem;color:#8fdcb0}
.err-line{margin-top:10px;font-size:.84rem;color:var(--canh-bao)}
.err-line:empty{margin:0}
.pass-box .inline-form input{letter-spacing:.06em;text-transform:uppercase}
@media (max-width:780px){.metrics{grid-template-columns:repeat(2,1fr)}.me-cols{grid-template-columns:1fr;gap:26px}}
#theodoi{margin-top:26px}
.tdkhoi{margin-top:18px;padding:20px;border-radius:22px;background:var(--nen-2);border:1px solid var(--vien)}
.tdkhoi h3{margin:0 0 14px}
.tddang,.tdtrong{color:var(--chu-2);font-size:.9rem;line-height:1.6;margin:0}
.tdchu{margin:12px 0 0;color:var(--chu-2);font-size:.86rem;line-height:1.6}
.tdcuoi{margin:16px 2px 0;color:var(--chu-3);font-size:.8rem;line-height:1.6}
.tdsvg{width:100%;height:auto;display:block;overflow:visible}
.tdke{stroke:rgba(185,163,240,.16);stroke-width:1}
.tdnhan{fill:var(--chu-2);font-family:var(--f-chu);font-size:11px}
.tdduong{fill:none;stroke:var(--hong);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.tdvung{fill:rgba(245,139,175,.10);stroke:none}
.tdcham{fill:var(--hong)}
.tdcham.cuoi{fill:#fff;stroke:var(--hong);stroke-width:2.5}
.tdlich{display:flex;gap:4px;align-items:flex-start;overflow-x:auto;padding-bottom:4px}
.tdlich-thu{display:flex;flex-direction:column;gap:4px;flex:none;margin-right:4px}
.tdlich-thu span{height:14px;line-height:14px;font-size:9px;color:var(--chu-3)}
.tdlich-tuan{display:flex;flex-direction:column;gap:4px;flex:none}
.tdlich .o{width:14px;height:14px;border-radius:4px;display:block;background:rgba(185,163,240,.09);border:1px solid rgba(185,163,240,.10)}
.tdlich .o.co{background:var(--hong);border-color:var(--hong)}
.tdlich .o.mai{background:transparent;border-color:rgba(185,163,240,.05)}
.tdmoc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tdm{padding:12px;border-radius:14px;background:rgba(10,7,20,.42);border:1px solid var(--vien)}
.tdm b{display:block;font-size:.85rem;font-weight:500;color:var(--chu-2)}
.tdm span{display:block;margin-top:5px;font-size:.76rem;color:var(--chu-3)}
.tdm.dat{border-color:rgba(245,139,175,.42);background:rgba(245,139,175,.08)}
.tdm.dat b{color:var(--chu)}
.tdm.dat span{color:var(--hong)}

/* ------------------------------------------------------------------ lời mời đến lớp + chân trang */
.cta-ari{max-width:1180px;margin:56px auto 0;padding:clamp(26px,5vw,44px);border-radius:24px;
  width:calc(100% - 2 * var(--gut));
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%,rgba(245,139,175,.14),transparent 70%),
    radial-gradient(ellipse 50% 80% at 0% 100%,rgba(185,163,240,.12),transparent 70%),
    var(--nen-2);
  border:1px solid var(--vien)}
.cta-ari h2{font-size:clamp(1.4rem,3vw,2rem);text-transform:uppercase;letter-spacing:.03em}
.cta-ari p{margin-top:12px;color:var(--chu-2);max-width:56ch}
.cta-ari .hang{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}

footer{margin-top:64px;padding:44px var(--gut) 96px;border-top:1px solid rgba(185,163,240,.10);color:var(--chu-2);font-size:.88rem}
footer .inner{max-width:1180px;margin:0 auto;display:flex;gap:22px 48px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--hong);text-decoration:none;display:inline-block;padding:12px 0}
footer a:hover{text-decoration:underline}
footer .flogo{width:104px;height:auto;display:block;margin-bottom:12px}
footer .disc{max-width:1180px;margin:26px auto 0;font-size:.8rem;color:var(--chu-3)}

.homefab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px;border-radius:999px;
  background:var(--hong);color:var(--tren-hong);text-decoration:none;font-weight:600;font-size:.92rem;
  box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .4s var(--e1),background-color .4s var(--e1)}
.homefab:hover{background:var(--hong-2);transform:translateY(-3px)}
.homefab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:559.98px){
  .homefab{width:52px;height:52px;padding:0;justify-content:center;left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .homefab svg{width:20px;height:20px}
  .homefab-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
:root{--nen-nut-am:rgba(20,14,38,.9)}
/* Ở trang tổng, nút về trang chủ chỉ hiện khi đã cuộn qua màn đầu (thanh trên đã có logo về trang chủ),
   để nó không đè lên nút chính và bảng tiến trình ở màn đầu. */
.js .homefab{opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .4s var(--e1),transform .4s var(--e1),background-color .4s var(--e1)}
.js .homefab.hien{opacity:1;pointer-events:auto;transform:none}
.js .homefab:focus-visible{opacity:1;pointer-events:auto;transform:none}

/* ------------------------------------------------------------------ ô giải thích (QĐ-15: bấm số là có lời giải) */
.giai{
  position:fixed;z-index:80;width:min(360px,calc(100vw - 24px));padding:18px 18px 14px;border-radius:20px;
  background:#1A1331;border:1px solid var(--vien-2);color:var(--chu);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(245,139,175,.08);
  animation:hien .35s var(--e1);
}
.giai[hidden]{display:none}
.giai h3{font-size:1.06rem;letter-spacing:.02em;margin-bottom:8px;color:var(--chu)}
.giai-noi p{font-size:.9rem;line-height:1.6;color:var(--chu-2)}
.giai-noi p + p{margin-top:8px}
.giai-noi b{color:var(--chu);font-weight:600}
.giai .nut{margin-top:14px}
@media (max-width:559.98px){
  .giai{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));width:auto}
}

/* ------------------------------------------------------------------ chuyển động */
@keyframes troi{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes nhip{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes no{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}
@keyframes vong{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes tho{0%,100%{transform:scale(1,1)}50%{transform:scale(1.006,1.014)}}
@keyframes bay{0%{opacity:0;transform:translateY(12px)}30%{opacity:.75}70%{opacity:.55}100%{opacity:0;transform:translateY(-34px)}}
@keyframes hien{from{opacity:0;transform:translateY(8px)}}
@keyframes lui{to{transform:translateY(9%) scale(1.05)}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .canh{animation:lui linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .khu .tram{opacity:1;transform:none}
  .bui{display:none}
}