/* Training Zone · Khu Huấn Luyện — bản xem trước HOÀN THIỆN (QĐ-18 Đ22).
   Nền là hướng B "Sân tập" (thắng 55/54) + màn đầu "sảnh đêm" của hướng A + các món giám khảo chọn ghép.
   Chỉ một bảng màu TỐI: trang web thật và cả 35 trang công cụ đều nền tối, nên khách đi từ trang tổng vào công
   cụ không bị chớp sáng/tối (mặc định đã chọn theo QĐ-16, ghi ở THAY-TRANG-TONG.md §7).
   Chữ: Saira (tiêu đề, trục độ rộng 87,5 đến 125) + Be Vietnam Pro (chữ đọc). Cả hai có bộ tiếng Việt.
   Chuyển động: CHỈ transform và opacity; lõi, bụi sáng, vòng sáng chỉ chạy khi phần đó đang trên màn hình
   (lớp .dang-thay do tz.js bật/tắt); "giảm chuyển động" thì đứng yên hết.
   Bo góc: khối lớn 28px, thẻ 20px, nút và ô nhập bo tròn hẳn. Chữ nhỏ nhất 12px.
   Lớp chồng: 1 cảnh nền, 2 nội dung, 5 thanh tìm dính, 19 nút nổi, 20 thanh điều hướng, 60 hộp giải thích. */

:root {
  --nen-1: #120B1F;
  --nen-2: #1B1230;
  --nen-3: #1A1226;
  --nen-4: #171110;          /* = --canvas của tools.css: cuối trang liền màu với trang công cụ */
  --mat: rgba(38, 26, 54, .74);
  --mat-dac: #251A37;
  --mat-2: #2E2143;
  --vien: rgba(255, 190, 215, .14);
  --vien-2: rgba(255, 190, 215, .28);
  --chu: #FBEFF5;
  --chu-2: #DCC8DA;
  --chu-3: #C0ACC4;
  --hong: #F58BAF;
  --hong-sang: #FFB3CB;
  --hong-chu: #FFA9C6;
  --oai: #B9A3F0;
  --bac-ha: #8FD8C6;
  --vang: #F6D98B;
  --bong: 6 2 14;
  --f-hien: 'Saira', system-ui, sans-serif;
  --f-than: 'Be Vietnam Pro', system-ui, sans-serif;
  --r-lon: 28px;
  --r: 20px;
  --cham: 44px;
  --accent: #F58BAF;
  --text-primary: #FBEFF5;
  --text-secondary: #C0ACC4;
  /* Màu Lõi năng lượng của từng khu. Bục nhân vật trong công cụ (Đ23) đọc đúng các biến này để
     vòng sáng dưới chân nhân vật cùng màu với trạm người chơi vừa chạm (KIEN-TRUC-NHAN-VAT §6.3). */
  --loi-nhip: #B9A3F0; --loi-cothe: #FF9F80; --loi-hoitho: #8EC5F5; --loi-yoga: #F58BAF;
  --loi-anuong: #FFB48A; --loi-thoiquen: #7FD6BF; --loi-tientrinh: #F4CE6A; --loi-baitap: #A99BF5;
  /* tên theo kiểu bục của Đ23 (nhan-vat-api.json → buc.theo_nhom), trỏ về khu có nhiều công cụ của kiểu đó nhất */
  --loi-ngu: var(--loi-tientrinh); --loi-an: var(--loi-anuong); --loi-nhac: var(--loi-nhip);
  --loi-tho: var(--loi-hoitho); --loi-nuoc: var(--loi-thoiquen); --loi-van-dong: var(--loi-baitap);
  --loi-thanh-tich: var(--loi-tientrinh); --loi-lop-hoc: var(--loi-yoga); --loi-co-the: var(--loi-cothe);
  --loi-training-zone: var(--hong);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--nen-4); }
body {
  margin: 0;
  min-height: 100dvh;
  font: 400 1rem/1.6 var(--f-than);
  color: var(--chu);
  background: linear-gradient(180deg, var(--nen-1) 0, var(--nen-2) 14%, var(--nen-3) 62%, var(--nen-4) 100%) no-repeat, var(--nen-4);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hong-chu); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px;
  background: var(--hong); color: #2A1B38; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.ic { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* ------------------------------------------------------------------ dải báo bản xem trước */
.ban-thu {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px;
  padding: 6px 16px; font-size: .8rem; line-height: 1.45; color: var(--chu-2);
  background: linear-gradient(90deg, rgb(245 139 175 / .16), rgb(185 163 240 / .16)); border-bottom: 1px solid var(--vien);
}
.ban-thu p { margin: 0; }
.ban-thu p a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vien-2); }
.ban-thu b { color: var(--hong-chu); font-weight: 600; }
.ban-thu-lk { display: flex; gap: 2px; }
.ban-thu-lk a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px;
  color: var(--chu); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vien-2); }
.ban-thu-lk a:hover { background: rgb(255 255 255 / .06); text-decoration-color: var(--hong); }
.chon-vai { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(0 0 0 / .22); }
.chon-vai span { font-size: .78rem; color: var(--chu-3); padding: 0 6px 0 8px; }
.chon-vai button { min-height: 44px; padding: 4px 12px; border: 0; border-radius: 999px; background: none;
  font: 600 .8rem var(--f-hien); color: var(--chu-2); }
.chon-vai button[aria-pressed="true"] { background: var(--mat-2); color: var(--chu); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .6); }

/* ------------------------------------------------------------------ thanh điều hướng */
.topnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 max(16px, calc((100vw - 1240px) / 2));
  background: rgb(18 11 31 / .78);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--vien);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: var(--cham); }
.brand img { width: 34px; height: auto; filter: drop-shadow(0 0 10px rgb(245 139 175 / .25)); }
.brand b { font: 700 1.06rem var(--f-hien); font-stretch: 112%; letter-spacing: .01em; }
.topnav .links { display: flex; gap: 4px; margin: 0 auto; }
.topnav .links a {
  text-decoration: none; font-size: .92rem; color: var(--chu-2); padding: 10px 12px; border-radius: 999px;
  min-height: var(--cham); display: inline-flex; align-items: center;
}
.topnav .links a:hover { color: var(--chu); background: rgb(245 139 175 / .12); }
.topnav .links a[aria-current="page"] { color: var(--chu); font-weight: 600; background: rgb(245 139 175 / .2); }
.topnav .btn { margin-left: auto; }
/* Lỗi B: ".links + .btn { margin-left: 0 }" vẫn khớp khi .links bị ẩn trên điện thoại, nên nút Zalo dính
   sát logo. Chỉ bỏ lề tự động khi .links thật sự hiện. */
@media (min-width: 1024px) { .topnav .links + .btn { margin-left: 0; } }
@media (max-width: 1023.98px) { .topnav .links { display: none; } }

/* ------------------------------------------------------------------ nút chung */
.nut, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .98rem/1.1 var(--f-hien); font-stretch: 104%; letter-spacing: .01em; text-decoration: none;
  white-space: nowrap; transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, background-color .35s, border-color .35s;
}
.nut.chinh, .btn {
  color: #2A1B38; background: linear-gradient(180deg, #FFB6CD, var(--hong));
  box-shadow: 0 10px 26px -10px rgb(245 139 175 / .75), inset 0 1px 0 rgb(255 255 255 / .6);
}
.nut.chinh:hover, .btn:hover { transform: translateY(-2px); }
.nut:active, .btn:active { transform: translateY(1px) scale(.98); }
.nut.phu {
  color: var(--chu); background: rgb(255 255 255 / .05); border-color: var(--vien-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nut.phu:hover { border-color: var(--hong); background: rgb(245 139 175 / .1); }
.topnav .btn { min-height: var(--cham); padding: 10px 18px; font-size: .9rem; }

/* ------------------------------------------------------------------ màn đầu: sảnh đêm + sân đảo */
.mo-dau { position: relative; isolation: isolate; overflow: clip; padding: 8px 0 72px; }
.canh { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent); }
.canh picture, .canh-nen { position: absolute; inset: 0; width: 100%; height: 100%; }
.canh-nen { object-fit: cover; object-position: 8% 30%; opacity: .92; }
@media (min-width: 900px) { .canh picture { left: -4%; right: auto; width: 118%; } }  /* trăng lệch sang phải đầu nhân vật */
.canh::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(18 11 31 / .82) 0, rgb(18 11 31 / .55) 30%, rgb(18 11 31 / 0) 48%); }

.hero-luoi {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 12px;
}
.hero-chu { padding: 36px 0 48px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 600 .8rem var(--f-hien); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--hong-chu);
}
.kicker .ic { width: 16px; height: 16px; }
h1 {
  margin: 0; padding-top: .08em;
  font: 800 clamp(2.55rem, 5.6vw, 4.5rem)/1.06 var(--f-hien); font-stretch: 116%; letter-spacing: -.012em;
  color: var(--chu); text-wrap: balance; text-shadow: 0 4px 30px rgb(10 4 20 / .6);
}
h1 .dong { display: block; }
h1 .nho { font-size: .46em; font-weight: 700; font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--hong-chu); margin-bottom: .12em; }
.lede { margin: 18px 0 0; max-width: 36ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.62; color: var(--chu-2); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.dao { position: relative; margin: 0; aspect-ratio: 1600 / 1248; }
.dao-khung { position: absolute; inset: 0; transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px), 0); }
.dao-bay { position: absolute; inset: 0; }
.dao-anh {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 97%); mask-image: linear-gradient(180deg, #000 76%, transparent 97%);
  filter: drop-shadow(0 30px 50px rgb(6 2 14 / .55));
}
/* luồng sáng rọi xuống bục giữa (toạ độ đo từ Blender, san_dao_dem.py in CHIEU: tâm bục 48,44% / 46,23%) */
.cot-sang {
  position: absolute; left: 48.44%; top: -6%; width: 17%; height: 53%; translate: -50% 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(185 163 240 / 0), rgb(212 180 255 / .16) 35%, rgb(255 190 225 / .34));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mix-blend-mode: screen; transform-origin: 50% 100%;
}
.vong-buc { position: absolute; left: 48.44%; top: 46.4%; width: 21%; aspect-ratio: 3.1 / 1; translate: -50% -50%; pointer-events: none; }
.vong-buc i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 170 210 / .7);
  box-shadow: 0 0 18px rgb(245 139 175 / .55), inset 0 0 14px rgb(245 139 175 / .35); opacity: 0; }
.nv { position: absolute; left: 48.44%; top: 13.6%; height: 33%; translate: -50% 0; transform-origin: 50% 100%; }
.nv img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 8px 10px rgb(6 2 14 / .45)); }
.nv-tho { height: 100%; transform-origin: 50% 100%; }
.bang-ten {
  position: absolute; left: 48.44%; top: 1.5%; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: calc(var(--cham) + 2px); padding: 4px 12px 4px 5px; border-radius: 999px;   /* +2px: bảng tên trôi theo đảo (dịch nửa điểm ảnh), đo ra 43,9 px */
  background: rgb(37 26 55 / .92); border: 1px solid var(--vien-2); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .7);
  font: 600 .88rem/1.1 var(--f-hien); font-stretch: 104%; white-space: nowrap; text-align: left; color: var(--chu);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bang-ten small { display: block; font: 400 .75rem/1.25 var(--f-than); color: var(--chu-3); }
.bang-ten .ic { width: 16px; height: 16px; color: var(--hong-chu); }
.bang-ten:hover { border-color: var(--hong); }
.bang-ten .so-cap {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(180deg, #FFD3E1, var(--hong)); color: #2A1B38; font-weight: 800; font-size: .92rem;
}
.be-sao { position: absolute; left: 48.44%; top: 19%; width: 16%; translate: -50% 0; display: none; }
.be-sao svg { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgb(255 190 215 / .45)); }
.loi-moi {
  position: absolute; left: 60%; top: 9%; max-width: 32%; display: none; margin: 0; z-index: 3;
  padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--mat-dac); border: 1px solid var(--vien-2);
  font-size: .86rem; line-height: 1.45; color: var(--chu); box-shadow: 0 12px 28px -14px rgb(0 0 0 / .7);
}
[data-vai="khach"] .nv, [data-vai="khach"] .bang-ten { display: none; }
[data-vai="khach"] .be-sao, [data-vai="khach"] .loi-moi { display: block; }
.hat { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgb(255 160 200 / .8); opacity: 0; }

/* ------------------------------------------------------------------ bảng hành trình (HUD) */
.hud {
  position: relative; z-index: 2; max-width: 1180px; margin: -40px auto 0; padding: 22px 24px 18px;
  border-radius: var(--r-lon); background: var(--mat);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--vien);
  box-shadow: 0 30px 70px -34px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06);
}
.hud-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.hud-dau h2 { margin: 0; font: 700 1.3rem/1.2 var(--f-hien); font-stretch: 110%; }
.mau-so {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font: 600 .78rem var(--f-hien); letter-spacing: .03em; color: #2E2200; background: #F6D98B;
}
.hud-luoi { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px 20px; align-items: stretch; }
.cap-khoi { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px;
  border-radius: var(--r); background: rgb(255 255 255 / .04); border: 1px solid var(--vien); }
.huy-cap {
  grid-row: span 2; position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0;
  background: conic-gradient(var(--hong) calc(var(--pt) * 1%), rgb(185 163 240 / .22) 0);
  display: grid; place-items: center;
}
.huy-cap span {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--mat-dac);
  font: 800 1.75rem/1 var(--f-hien); color: var(--chu);
}
.huy-cap small { position: absolute; bottom: -8px; left: 50%; translate: -50% 0; padding: 1px 9px; border-radius: 999px;
  background: var(--hong); color: #2A1B38; font: 700 .75rem/1.4 var(--f-hien); letter-spacing: .06em; text-transform: uppercase; }
.ten-bac { margin: 0; font: 700 1.14rem/1.2 var(--f-hien); font-stretch: 108%; }
.ten-bac em { display: block; font: 400 .82rem/1.4 var(--f-than); font-style: normal; color: var(--chu-3); }
.ong-xp { grid-column: 1 / -1; margin-top: 10px; }
.ong {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgb(185 163 240 / .18); box-shadow: inset 0 1px 3px rgb(0 0 0 / .4);
}
.ong i {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--pt) * 1%); border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--oai), var(--hong) 70%, #FFC7D8);
  box-shadow: 0 0 14px rgb(245 139 175 / .5);
}
/* Lỗi B (14–19% CPU lúc đứng yên): hiệu ứng lấp lánh chạy background-position mãi mãi. Bản này trượt một
   dải sáng bằng transform, chỉ 3 lượt, chỉ khi bảng đang trên màn hình. */
.ong i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .6), transparent);
  transform: translateX(-120%); opacity: 0;
}
.so-giai {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--cham); padding: 8px 12px; margin: 0 -6px;
  border: 0; border-radius: 999px; background: none; font: 600 .92rem var(--f-hien); color: var(--chu);
  text-decoration: underline dotted rgb(255 169 198 / .6); text-underline-offset: 4px;
}
.so-giai:hover { background: rgb(245 139 175 / .12); }
.so-giai .ic { width: 15px; height: 15px; color: var(--hong-chu); }
.xp-dong { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.xp-nay { font: 600 .82rem var(--f-hien); color: var(--bac-ha); }

.so-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.so-o {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 92px;
  padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--vien); background: rgb(255 255 255 / .04);
  text-align: left; transition: border-color .3s, background-color .3s;
}
.so-o:hover { border-color: var(--vien-2); background: rgb(245 139 175 / .08); }
.so-o b { font: 800 1.9rem/1 var(--f-hien); font-stretch: 108%; color: var(--chu); }
.so-o b small { font-size: .56em; font-weight: 600; color: var(--chu-3); }
.so-o span { font-size: .84rem; line-height: 1.35; color: var(--chu-2); text-decoration: underline dotted rgb(255 169 198 / .55); text-underline-offset: 4px; }
.so-o.lua b::before { content: ""; display: inline-block; width: .5em; height: .7em; margin-right: .18em; vertical-align: .02em;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 70%, #FFE39A, #FF9F80 60%, #F58BAF); }

/* ba thói quen mới (Đ21) */
.moi-ba { margin-top: 18px; }
.moi-ba h3, .con-lai summary > span:first-child { margin: 0 0 10px; font: 700 1.02rem var(--f-hien); font-stretch: 106%; }
.tq-luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tq {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 8px 8px 8px 10px; border-radius: 18px; background: rgb(255 255 255 / .045);
  border: 1px solid color-mix(in srgb, var(--mau) 30%, transparent);
}
.tq .mini { position: relative; width: 56px; height: 56px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 42%, transparent), transparent); }
.tq .mini img { position: absolute; left: 50%; top: -12%; width: 140%; height: auto; max-width: none; translate: -50% 0; }
.tq-chu { display: flex; flex-direction: column; gap: 2px; min-height: var(--cham); justify-content: center; text-decoration: none; min-width: 0; }
.tq-chu b { font: 600 .98rem/1.25 var(--f-hien); }
.tq-phu { font-size: .8rem; line-height: 1.35; color: var(--chu-3); }
.tq-tt { align-self: flex-start; margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 999px; font: 600 .75rem/1.5 var(--f-hien); letter-spacing: .02em; border: 1px solid var(--vien-2); color: var(--chu-2); }
.tq-tt .ic { width: 12px; height: 12px; }
.tq-tt.xong { background: var(--bac-ha); border-color: transparent; color: #0F3B30; }
.tq-tt.sap { border-style: dashed; }
.tq.xong { background: color-mix(in srgb, var(--bac-ha) 10%, transparent); }
.tq.sap .mini img { opacity: .7; }

/* mười việc quen thuộc */
.con-lai { margin-top: 14px; border-top: 1px solid var(--vien); padding-top: 4px; }
.con-lai summary {
  display: flex; align-items: center; gap: 10px; min-height: var(--cham); cursor: pointer; list-style: none; border-radius: 12px;
}
.con-lai summary::-webkit-details-marker { display: none; }
.con-lai summary > span:first-child { margin: 0; }
.con-lai-so { font-size: .84rem; color: var(--bac-ha); }
.con-lai summary .ic { margin-left: auto; width: 18px; height: 18px; color: var(--chu-3); transition: transform .3s; }
.con-lai[open] summary .ic { transform: rotate(180deg); }
.nv-vu-luoi { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.nv-vu {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 5px 6px 5px 8px; border-radius: 16px; background: rgb(255 255 255 / .04); border: 1px solid var(--vien); min-height: 58px;
}
.nv-vu .mini { position: relative; width: 44px; height: 44px; border-radius: 13px; overflow: hidden;
  background: color-mix(in srgb, var(--mau, var(--hong)) 20%, transparent); }
.nv-vu .mini img { position: absolute; left: 50%; top: -14%; width: 150%; height: auto; max-width: none; translate: -50% 0; }
.nv-vu a { display: flex; flex-direction: column; justify-content: center; min-height: var(--cham); text-decoration: none; min-width: 0; }
.nv-vu b { font: 600 .92rem/1.25 var(--f-hien); font-stretch: 98%; }
.nv-vu .tt { font-size: .78rem; color: var(--chu-3); display: inline-flex; align-items: center; gap: 4px; }
.nv-vu.xong { background: color-mix(in srgb, var(--bac-ha) 9%, transparent); }
.nv-vu.xong .tt { color: #A6ECD6; }
.nv-vu .tt .ic { width: 13px; height: 13px; }
.nv-vu .tt.tt-thap { display: flex; align-items: flex-start; font-style: italic; line-height: 1.35; }   /* QĐ-46 Q32: lời trùm khi_thap_canh */
.nv-vu .tt.tt-thap .ic { flex: none; margin-top: 2px; }
.diem-nut {
  min-width: var(--cham); min-height: var(--cham); padding: 0 10px; border-radius: 999px; border: 1px solid var(--vien-2);
  background: var(--mat-dac); font: 700 .9rem var(--f-hien); color: var(--chu);
}
.diem-nut:hover { border-color: var(--hong); }
.hud-chan { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--vien); font-size: .84rem; color: var(--chu-3); }

.khach-khoi { display: none; }
[data-vai="khach"] .cap-khoi, [data-vai="khach"] .so-luoi, [data-vai="khach"] .tq-tt,
[data-vai="khach"] .nv-vu .tt, [data-vai="khach"] .con-lai-so, [data-vai="khach"] .mau-so,
[data-vai="khach"] .tram-xong { display: none; }
[data-vai="khach"] .tq.xong, [data-vai="khach"] .nv-vu.xong { background: rgb(255 255 255 / .04); }
[data-vai="khach"] .khach-khoi { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; grid-column: 1 / -1;
  padding: 16px; border-radius: var(--r); background: rgb(255 255 255 / .04); border: 1px dashed var(--vien-2); }
.khach-khoi p { margin: 4px 0 12px; font-size: .92rem; color: var(--chu-2); max-width: 60ch; }
.khach-khoi b { font: 700 1.12rem var(--f-hien); }
.be-sao-nho svg { width: 64px; height: 64px; }

/* hộp giải thích con số (QĐ-15) */
[popover].giai {
  position: fixed; inset: auto 16px 16px 16px; margin: 0 auto; max-width: 460px; z-index: 60;
  padding: 18px 18px 16px; border-radius: 22px; border: 1px solid var(--vien-2);
  background: var(--mat-dac); color: var(--chu); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .8);
}
[popover].giai::backdrop { background: rgb(6 2 14 / .5); backdrop-filter: blur(2px); }
.giai h3 { margin: 0 44px 8px 0; font: 700 1.08rem/1.3 var(--f-hien); font-stretch: 106%; }
.giai p { margin: 0 0 8px; font-size: .94rem; line-height: 1.6; color: var(--chu-2); }
.giai p:last-of-type { margin-bottom: 0; }
.giai .dong-giai { position: absolute; right: 8px; top: 8px; width: var(--cham); height: var(--cham); border: 0; border-radius: 50%;
  background: none; display: grid; place-items: center; color: var(--chu-2); }
.giai .dong-giai:hover { background: rgb(245 139 175 / .14); }
@media (min-width: 768px) { [popover].giai { inset: 0; margin: auto; height: fit-content; } }

/* ------------------------------------------------------------------ thanh tìm và lọc */
.dieu-khien { position: relative; z-index: 5; max-width: 1180px; margin: 40px auto 0; padding: 0 20px; }
.dk-trong {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px; border-radius: var(--r-lon);
  background: rgb(30 20 46 / .86); border: 1px solid var(--vien);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
@media (min-width: 768px) { .dieu-khien { position: sticky; top: 72px; } }
.o-tim { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.o-tim label { position: absolute; left: 16px; display: inline-flex; color: var(--chu-3); }
.o-tim input {
  width: 100%; min-height: 48px; padding: 10px 16px 10px 44px; border-radius: 999px; border: 1px solid var(--vien-2);
  background: var(--mat-dac); font-size: 1rem; color: var(--chu);
}
.o-tim input::placeholder { color: var(--chu-3); opacity: 1; }
.o-tim input:focus-visible { outline: 3px solid rgb(245 139 175 / .6); outline-offset: 1px; border-color: var(--hong-chu); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 520px; padding: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--cham); padding: 4px 14px 4px 6px;
  border-radius: 999px; border: 1px solid var(--vien); background: rgb(255 255 255 / .04);
  font: 600 .86rem var(--f-hien); font-stretch: 98%; color: var(--chu-2); white-space: nowrap;
}
.chip .mini { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--mau, var(--hong)) 26%, transparent); }
.chip .mini img { position: absolute; left: 50%; top: -14%; width: 150%; height: auto; max-width: none; translate: -50% 0; }
.chip.tat-ca { padding-left: 14px; }
.chip:hover { border-color: var(--vien-2); color: var(--chu); }
.chip[aria-pressed="true"] { background: var(--chu); color: #1B1230; border-color: var(--chu); }
.dem-tim { margin: 12px 4px 0; font-size: .84rem; color: var(--chu-3); min-height: 1.3em; }

/* ------------------------------------------------------------------ các khu */
.cac-khu { position: relative; max-width: 1180px; margin: 0 auto; padding: 18px 20px 30px; overflow-x: clip; scroll-margin-top: 150px; }
.duong { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.duong .nen-duong { fill: none; stroke: rgb(185 163 240 / .16); stroke-width: 22; stroke-linecap: round; }
.duong .buoc { fill: none; stroke: rgb(245 139 175 / .75); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 20; }
.khu { position: relative; z-index: 1; margin: 34px 0 64px; width: min(100%, 1000px); scroll-margin-top: 170px; }
.khu.phai { margin-left: auto; }
.khu[hidden] { display: none; }
.khu-dau { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-bottom: 6px; }
.khu-huy { grid-row: span 2; width: 76px; height: 76px; border-radius: 50%; position: relative;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 40%, var(--mat-dac)), var(--mat-dac));
  border: 1px solid color-mix(in srgb, var(--mau) 40%, transparent); box-shadow: 0 0 26px -6px color-mix(in srgb, var(--mau) 60%, transparent); overflow: hidden; }
.khu-huy img { position: absolute; left: 50%; top: 2%; width: 122%; height: auto; max-width: none; translate: -50% 0; }
.khu-dau h2 { margin: 0; font: 700 clamp(1.4rem, 2.6vw, 1.85rem)/1.15 var(--f-hien); font-stretch: 112%; letter-spacing: -.005em; }
.khu-dau p { margin: 0; color: var(--chu-2); font-size: .95rem; }
.khu-dau .dem { color: var(--chu-3); white-space: nowrap; }
.tram-luoi {
  position: relative; list-style: none; margin: 0; padding: 18px 10px 30px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 6px 10px;
}
.tram-luoi::before {
  content: ""; position: absolute; inset: 18% -2% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, color-mix(in srgb, var(--mau) 12%, transparent) 0, transparent 72%);
}
.tram-luoi > li { display: flex; justify-content: center; }
.tram-luoi > li[hidden] { display: none; }
.tram-luoi > li:not(.chinh):nth-child(odd) { margin-top: 28px; }
.tram {
  position: relative; width: 100%; max-width: 210px; display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; color: inherit; padding: 0 6px 12px; border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}
.tram-chu { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tram-vat { position: relative; width: min(100%, 170px); aspect-ratio: 4 / 5; margin-bottom: -9%; flex: none; }
/* toạ độ đo từ Blender (lo_nang_luong.py in TOA_DO): mặt bục 69,5%, tâm lõi 34%, đáy bục 91% */
.tram-vat > * { position: absolute; }
.tram-buc, .tram-loi-bao, .tram-loi-bao img { inset: 0; width: 100%; height: 100%; }
.tram-hao { left: 12%; right: 12%; top: 6%; height: 56%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 62%, transparent), transparent);
  opacity: .5; transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.tram-tia { left: 35%; right: 35%; top: 38%; bottom: 29%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--mau) 60%, transparent), transparent);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 70%, #000, transparent); mask-image: radial-gradient(ellipse 50% 60% at 50% 70%, #000, transparent);
  opacity: .4; transition: opacity .4s; }
.tram-quang { left: 26%; right: 26%; top: 65.5%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 80%, white), transparent); opacity: .65; }
.tram-loi-bao { transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.tram-no { left: 50%; top: 34%; width: 62%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  border: 2px solid color-mix(in srgb, var(--mau) 85%, white); opacity: 0; pointer-events: none; }
.tram-ten { position: relative; margin-top: 2px; font: 600 1.02rem/1.25 var(--f-hien); font-stretch: 94%; max-width: 17ch; text-wrap: balance; }
.tram-mo { margin-top: 4px; font-size: .84rem; line-height: 1.45; color: var(--chu-2); max-width: 25ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tram-nhan {
  position: absolute; top: 6px; right: 2px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--mat-2); border: 1px solid var(--vien-2);
  font: 600 .75rem/1 var(--f-hien); letter-spacing: .02em; color: var(--hong-chu); box-shadow: 0 6px 14px -8px rgb(0 0 0 / .6);
}
.tram-nhan .ic { width: 12px; height: 12px; }
.tram-nhan.moi { background: linear-gradient(180deg, #FFD0DF, var(--hong)); color: #2A1B38; border-color: transparent; }
.tram-xong { position: absolute; top: 8px; left: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bac-ha); color: #0F3B30; box-shadow: 0 0 0 3px rgb(143 216 198 / .25); }
.tram-xong .ic { width: 15px; height: 15px; }
.tram:hover .tram-loi-bao, .tram:focus-visible .tram-loi-bao { transform: translateY(-6%) scale(1.05); }
.tram:hover .tram-hao, .tram:focus-visible .tram-hao { opacity: .95; transform: scale(1.12); }
.tram:hover .tram-tia, .tram:focus-visible .tram-tia { opacity: .75; }
.tram.bung .tram-no { animation: no .75s cubic-bezier(.2, .7, .2, 1); }
.tram:active .tram-loi-bao { transform: translateY(-2%) scale(.97); transition-duration: .12s; }
@keyframes no { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.35); } }
.tram.sap-mo { cursor: default; }
.tram.sap-mo .tram-loi-bao { opacity: .72; filter: saturate(.6); }
.tram.sap-mo .tram-ten::after { content: " (sắp mở)"; font-weight: 500; color: var(--chu-3); }

/* trạm chính của mỗi khu: lõi lớn, sàn vòng sáng, nằm ngang; khu lẻ lõi bên trái, khu chẵn lõi bên phải */
.tram-luoi > li.chinh { grid-column: 1 / -1; justify-content: flex-start; margin: 0 0 8px; }
.khu.phai .tram-luoi > li.chinh { justify-content: flex-end; }
.chinh .tram { flex-direction: row; align-items: center; max-width: 560px; gap: 10px 22px; text-align: left; padding: 6px 14px 14px 6px; }
.khu.phai .chinh .tram { flex-direction: row-reverse; text-align: right; padding: 6px 6px 14px 14px; }
.chinh .tram-vat { width: 210px; margin-bottom: 0; }
.chinh .tram-vat::before {   /* sàn vòng sáng dưới trạm chính */
  content: ""; position: absolute; left: -14%; right: -14%; top: 58%; height: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 38%, transparent), transparent 70%),
    radial-gradient(closest-side, transparent 64%, color-mix(in srgb, var(--mau) 70%, transparent) 67%, transparent 72%);
}
.chinh .tram-vat::after {    /* vòng năng lượng tỏa ra (transform/opacity) */
  content: ""; position: absolute; left: 4%; right: 4%; top: 62%; height: 20%; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mau) 80%, white); opacity: 0;
}
.chinh .tram-chu { align-items: flex-start; }
.khu.phai .chinh .tram-chu { align-items: flex-end; }
.tram-chinh-nhan { font: 700 .75rem var(--f-hien); letter-spacing: .12em; text-transform: uppercase; color: var(--mau); margin-bottom: 2px; }
.chinh .tram-ten { font-size: 1.32rem; font-stretch: 104%; max-width: 22ch; }
.chinh .tram-mo { font-size: .94rem; max-width: 34ch; -webkit-line-clamp: 3; }
.chinh .tram-nhan { position: static; margin-top: 10px; align-self: inherit; }
.chinh .tram-xong { left: 6px; top: 6px; }
.khu.phai .chinh .tram-xong { left: auto; right: 6px; }

/* chuyển động: chỉ chạy khi khu đang trong tầm mắt (.dang-thay), không bao giờ đổi bố cục */
@media (prefers-reduced-motion: no-preference) {
  .tram-loi-bao img { animation: noi 6.4s ease-in-out infinite; animation-delay: var(--tre, 0s); animation-play-state: paused; }
  .tram-hao, .tram-quang { animation: xung 6.4s ease-in-out infinite; animation-delay: var(--tre, 0s); animation-play-state: paused; }
  .chinh .tram-vat::after { animation: vong-toa 3.2s cubic-bezier(.2, .7, .3, 1) infinite; animation-play-state: paused; }
  .khu.dang-thay .tram-loi-bao img, .khu.dang-thay .tram-hao, .khu.dang-thay .tram-quang,
  .khu.dang-thay .chinh .tram-vat::after { animation-play-state: running; }
  .dao-bay { animation: bay-dao 9s ease-in-out infinite; animation-play-state: paused; }
  .nv-tho { animation: tho-nv 4.2s ease-in-out infinite; animation-play-state: paused; }
  .be-sao svg { animation: bay-sao 3.4s ease-in-out infinite; animation-play-state: paused; }
  .hat { animation: bay-hat 5s linear infinite; animation-play-state: paused; }
  .vong-buc i { animation: vong-toa 3.6s cubic-bezier(.2, .7, .3, 1) infinite; animation-play-state: paused; }
  .vong-buc i + i { animation-delay: 1.8s; }
  .cot-sang { animation: cot-tho 6s ease-in-out infinite; animation-play-state: paused; }
  .mo-dau.dang-thay .dao-bay, .mo-dau.dang-thay .nv-tho, .mo-dau.dang-thay .be-sao svg, .mo-dau.dang-thay .hat,
  .mo-dau.dang-thay .vong-buc i, .mo-dau.dang-thay .cot-sang { animation-play-state: running; }
  .hud.dang-thay .ong i::after { animation: loang 2.6s cubic-bezier(.4, 0, .2, 1) .6s 3; }
  @supports (animation-timeline: view()) {
    .tram-luoi > li { animation: len-tram linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes len-tram { from { opacity: 0; transform: translateY(34px) scale(.94); } }
@keyframes noi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4.5%); } }
@keyframes xung { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes vong-toa { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes bay-dao { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tho-nv { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.006) translateY(-1px); } }
@keyframes bay-sao { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes bay-hat { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1); } }
@keyframes cot-tho { 0%, 100% { opacity: .75; transform: scaleX(.94); } 50% { opacity: 1; transform: scaleX(1.04); } }
@keyframes loang { 0% { transform: translateX(-120%); opacity: 1; } 100% { transform: translateX(260%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hat { display: none; }
  .dao-khung { transform: none !important; }
}

.trong {
  margin: 40px auto; max-width: 460px; text-align: center; padding: 28px 22px; border-radius: var(--r-lon);
  background: var(--mat); border: 1px dashed var(--vien-2); position: relative; z-index: 1;
}
.trong b { display: block; font: 700 1.15rem var(--f-hien); margin-bottom: 6px; }
.trong p { margin: 0 0 14px; color: var(--chu-2); }

/* ------------------------------------------------------------------ phòng hồ sơ (hub.js + theodoi.js thật) */
.phong { max-width: 1180px; margin: 20px auto 0; padding: 0 20px; }
.phong-dau h2 { margin: 0; font: 700 clamp(1.5rem, 2.8vw, 2rem)/1.15 var(--f-hien); font-stretch: 112%; }
.phong-dau p { margin: 8px 0 18px; color: var(--chu-2); max-width: 62ch; }
.mecard, .tdkhoi {
  padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lon); background: var(--mat);
  border: 1px solid var(--vien); box-shadow: 0 20px 50px -34px rgb(0 0 0 / .8);
}
.mecard h2 { margin: 0 0 10px; font: 700 clamp(1.25rem, 2.6vw, 1.6rem)/1.2 var(--f-hien); font-stretch: 108%; }
.mecard h3, .tdkhoi h3 { margin: 0 0 8px; font: 700 1.05rem var(--f-hien); font-stretch: 104%; }
.mecard .lede { margin: 0 0 18px; max-width: 62ch; font-size: .95rem; }
.hint { margin: 0 0 14px; color: var(--chu-2); font-size: .9rem; line-height: 1.6; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 20px; }
.metric { padding: 14px; border-radius: 18px; background: var(--mat-dac); border: 1px solid var(--vien); }
.metric .n { display: flex; align-items: baseline; gap: 6px; }
.metric b { font: 700 clamp(1.5rem, 4vw, 2rem)/1 var(--f-hien); }
.metric .unit { font-size: .78rem; color: var(--chu-3); }
.metric .lab { display: block; margin-top: 6px; font-size: .78rem; color: var(--chu-3); line-height: 1.4; }
.me-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 38px); margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--vien); }
.mecard .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mecard .row.small { gap: 18px; margin-top: 14px; }
.mecard .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.mecard .chip { padding: 4px 16px; }
.chip.add { border-style: dashed; }
.lnk { background: none; border: 0; padding: 10px 0; min-height: var(--cham); color: var(--chu-2); text-decoration: underline; text-underline-offset: 3px; }
.lnk:hover { color: var(--hong-chu); }
.lnk.warn { color: #FF9DB0; }
.btn.small { min-height: var(--cham); padding: 10px 18px; font-size: .88rem; }
.btn.small.warn { background: #B8345A; color: #fff; }
.btn.ghost { color: var(--chu); background: rgb(255 255 255 / .05); border-color: var(--vien-2); box-shadow: none; }
.sbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: .88rem; }
.sbar .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sbar .dot.on { background: #3FA37E; box-shadow: 0 0 0 3px rgb(63 163 126 / .18); }
.sbar .dot.off { background: #D98A4E; box-shadow: 0 0 0 3px rgb(217 138 78 / .18); }
.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: var(--cham); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vien-2); background: var(--mat-dac); }
.danger-box { margin-top: 16px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, #FF8FA8 12%, var(--mat-dac)); border: 1px solid rgb(255 143 168 / .3); }
.danger-box p { margin: 0 0 6px; font-size: .9rem; }
.first-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: var(--mat); border: 1px solid var(--vien); }
.first-note p { margin: 0; flex: 1 1 260px; font-size: .9rem; }
.pass-box { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vien); }
.ma-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; padding: 12px 16px; border-radius: 16px; background: var(--mat-dac); border: 1px solid var(--vien); }
.ma-box code { font: 700 1.05rem var(--f-hien); letter-spacing: .1em; }
.ok-line { margin-top: 12px; font-size: .86rem; color: #A6ECD6; }
.err-line { margin-top: 10px; font-size: .86rem; color: #FF9DB0; }
.err-line:empty { margin: 0; }
#theodoi:not(:empty) { margin-top: 18px; }
.tdkhoi { margin-top: 18px; }
.tddang, .tdtrong { color: var(--chu-2); font-size: .9rem; margin: 0; }
.tdchu { margin: 12px 0 0; color: var(--chu-2); font-size: .86rem; }
.tdcuoi { margin: 16px 2px 0; color: var(--chu-3); font-size: .8rem; }
.tdsvg { width: 100%; height: auto; display: block; overflow: visible; }
.tdke { stroke: rgb(245 139 175 / .16); stroke-width: 1; }
.tdnhan { fill: var(--chu-3); font-family: var(--f-than); font-size: 12px; }
.tdduong { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tdvung { fill: rgb(245 139 175 / .14); stroke: none; }
.tdcham { fill: var(--accent); }
.tdcham.cuoi { fill: var(--mat-dac); stroke: var(--accent); 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: 12px; 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: rgb(185 163 240 / .16); border: 1px solid var(--vien); }
.tdlich .o.co { background: var(--accent); border-color: var(--accent); }
.tdlich .o.mai { background: transparent; border-color: transparent; }
.tdmoc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tdm { padding: 12px 13px; border-radius: 16px; background: var(--mat-dac); border: 1px solid var(--vien); }
.tdm b { display: block; font-size: .86rem; font-weight: 600; color: var(--chu-2); }
.tdm span { display: block; margin-top: 5px; font-size: .78rem; color: var(--chu-3); }
.tdm.dat { border-color: rgb(245 139 175 / .6); background: color-mix(in srgb, var(--hong) 12%, var(--mat-dac)); }
.tdm.dat b { color: var(--chu); }
.tdm.dat span { color: var(--hong-chu); }

/* ------------------------------------------------------------------ lời mời lớp học + chân trang */
.cta-ari {
  position: relative; max-width: 1180px; margin: 56px auto 0; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lon);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 18px 32px; align-items: center;
  background: linear-gradient(120deg, rgb(245 139 175 / .2), rgb(185 163 240 / .16)), var(--mat-dac);
  border: 1px solid var(--vien);
}
.cta-ari h2 { margin: 0 0 8px; font: 700 clamp(1.4rem, 2.8vw, 2rem)/1.15 var(--f-hien); font-stretch: 110%; }
.cta-ari p { margin: 0; color: var(--chu-2); max-width: 56ch; }
.cta-ari .row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-wrap { padding: 0 20px; }
footer { margin-top: 64px; padding: 36px 20px 120px; border-top: 1px solid var(--vien); background: rgb(0 0 0 / .18); }
footer .inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; font-size: .9rem; color: var(--chu-2); }
footer p { margin: 0 0 4px; }
footer .inner a { display: inline-flex; align-items: center; min-height: var(--cham); }
footer .flogo { width: 92px; height: auto; margin-bottom: 10px; }
footer .disc { max-width: 1180px; margin: 22px auto 0; font-size: .8rem; color: var(--chu-3); }

/* Nút "Trang chủ" nổi. Lỗi B: đè tiêu đề "Hành trình hôm nay" ngay màn đầu và đè nhãn trạm khi cuộn.
   Bản này: ẩn khi màn đầu còn trên màn hình, ẩn khi đang cuộn xuống, hiện lại khi cuộn lên; trên điện
   thoại chỉ còn nút tròn 48px (như .homefab.gon của trang công cụ). */
.homefab {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 19;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px 10px 13px; border-radius: 999px;
  background: rgb(37 26 55 / .94); border: 1px solid var(--vien-2); text-decoration: none; font: 600 .9rem var(--f-hien);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .25s, transform .25s;
}
.homefab .ic { width: 18px; height: 18px; color: var(--hong-chu); }
.homefab.nep { opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none; }
.homefab.nep:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ------------------------------------------------------------------ màn vừa (≥ 1100): các khu thành "đảo" hai bên đường mòn */
@media (min-width: 1100px) {
  .cac-khu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
  .cac-khu > .duong, .cac-khu > .trong { grid-column: 1 / -1; }
  .cac-khu > .duong { grid-row: 1 / span 20; }
  .khu { width: auto; margin: 28px 0 40px; }
  .khu.phai { margin: 150px 0 40px; }
  .cac-khu .tram-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* khu bên trái: huy hiệu và lõi chính nằm sát đường mòn ở giữa, chữ canh phải */
  .khu:not(.phai) .khu-dau { grid-template-columns: minmax(0, 1fr) 76px; text-align: right; }
  .khu:not(.phai) .khu-huy { grid-column: 2; grid-row: 1 / span 2; }
  .khu:not(.phai) .khu-dau h2, .khu:not(.phai) .khu-dau p { grid-column: 1; }
  .khu:not(.phai) .khu-dau h2 { grid-row: 1; }
  .khu:not(.phai) .khu-dau p { grid-row: 2; }
  .khu:not(.phai) .tram-luoi > li.chinh { justify-content: flex-end; }
  .khu:not(.phai) .chinh .tram { flex-direction: row-reverse; text-align: right; padding: 6px 6px 14px 14px; }
  .khu:not(.phai) .chinh .tram-chu { align-items: flex-end; }
  .khu:not(.phai) .chinh .tram-xong { left: auto; right: 6px; }
  .khu.phai .tram-luoi > li.chinh { justify-content: flex-start; }
  .khu.phai .chinh .tram { flex-direction: row; text-align: left; padding: 6px 14px 14px 6px; }
  .khu.phai .chinh .tram-chu { align-items: flex-start; }
  .khu.phai .chinh .tram-xong { left: 6px; right: auto; }
  /* khu bên trái: hàng cuối thiếu thì dồn các trạm về phía đường mòn */
  .khu:not(.phai) .tram-luoi > li:not(.chinh):last-child:nth-child(3n+2) { grid-column: 3; }
  .khu:not(.phai) .tram-luoi > li:not(.chinh):nth-last-child(2):nth-child(3n+2) { grid-column: 2; }
  .tram-luoi > li:not(.chinh):nth-child(odd) { margin-top: 0; }
  .tram-luoi > li:not(.chinh):nth-child(3n+3) { margin-top: 28px; }
}

/* ------------------------------------------------------------------ màn hẹp */
@media (max-width: 899.98px) {
  .hero-luoi { grid-template-columns: 1fr; padding: 0 16px; gap: 0; }
  .hero-chu { padding: 22px 0 0; }
  .canh picture { top: 230px; height: auto; bottom: 0; }
  .canh-nen { object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .canh::after { background: none; }
  .lede { max-width: 40ch; }
  .dao { margin: 18px -16px 0; aspect-ratio: 1 / .8; overflow: hidden; }
  .dao-khung { inset: auto; left: -26%; width: 152%; top: 0; aspect-ratio: 1600 / 1248; }
  .loi-moi { left: 50%; top: 2px; translate: -50% 0; max-width: min(300px, calc(100% - 32px)); width: max-content; border-radius: 18px; text-align: center; }
  .be-sao { top: 22%; }
  .mo-dau { padding-bottom: 50px; }
  .hud-luoi { grid-template-columns: 1fr; }
  .tq-luoi { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .me-cols { grid-template-columns: 1fr; }
  .cta-ari { grid-template-columns: 1fr; }
  footer .inner { grid-template-columns: 1fr; }
}
@media (min-width: 560px) and (max-width: 899.98px) {
  .dao { width: 100%; max-width: 760px; margin: 18px auto 0; aspect-ratio: 1 / .72; }
  .dao-khung { left: -10%; width: 120%; }
}
@media (max-width: 559.98px) {
  .ban-thu { font-size: .78rem; padding: 6px 10px 4px; gap: 0 6px; }
  .ban-thu p { flex: 1 1 100%; text-align: center; }
  .ban-thu-lk a { padding: 0 8px; }
  .chon-vai span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topnav { height: 58px; gap: 10px; }
  .topnav .btn { padding: 8px 14px; font-size: .86rem; }
  .brand b { font-size: .98rem; }
  h1 { font-size: clamp(2.35rem, 11.4vw, 2.9rem); font-stretch: 108%; }
  .hang-nut { gap: 10px; margin-top: 22px; }
  .hang-nut .nut { flex: 1 1 auto; padding: 12px 16px; }
  .bang-ten { top: 2.6%; }
  .hud { margin: -30px 12px 0; padding: 16px 14px; border-radius: 24px; }
  .hud-dau h2 { font-size: 1.16rem; }
  .cap-khoi { padding: 12px; }
  .huy-cap { width: 66px; height: 66px; } .huy-cap span { width: 54px; height: 54px; font-size: 1.5rem; }
  .so-o { min-height: 84px; padding: 12px; }
  .so-o b { font-size: 1.6rem; }
  .so-o span { font-size: .8rem; }
  .nv-vu-luoi { grid-template-columns: 1fr; }
  .dieu-khien { padding: 0 12px; margin-top: 30px; }
  .dk-trong { padding: 8px; border-radius: 24px; }
  .chips { flex-basis: 100%; }
  .cac-khu { padding: 8px 12px 20px; }
  .khu { margin: 26px 0 40px; }
  .khu-dau { grid-template-columns: 60px minmax(0, 1fr); gap: 2px 12px; }
  .khu-huy { width: 60px; height: 60px; }
  .khu-dau p { font-size: .9rem; }
  .tram-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; padding: 10px 0 20px; }
  .tram-luoi::before { inset: 10% 0 0; opacity: .7; }
  .duong { display: none; }
  .tram-vat { width: min(100%, 150px); }
  .tram-ten { font-size: .96rem; }
  /* Lỗi B: .tram-mo bị giấu hẳn trên điện thoại. Bản này hiện 2 dòng. */
  .tram-mo { font-size: .8rem; -webkit-line-clamp: 2; max-width: 20ch; }
  .tram-nhan { top: 2px; right: 0; }
  .chinh .tram { gap: 4px 12px; padding: 4px 6px 10px 0; }
  .khu.phai .chinh .tram { padding: 4px 0 10px 6px; }
  .chinh .tram-vat { width: 148px; }
  .chinh .tram-ten { font-size: 1.14rem; }
  .chinh .tram-mo { font-size: .86rem; -webkit-line-clamp: 4; max-width: none; }
  .chinh .tram-nhan { margin-top: 8px; }
  .phong { padding: 0 12px; }
  .cta-wrap { padding: 0 12px; }
  .homefab { width: 48px; padding: 0; justify-content: center; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .homefab .homefab-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ================================================================== QĐ-19 Đ25: thẻ trùm đang đấu + nhãn "tính cho trùm"
   Hai trạng thái trong một trang. <html data-trum="xong"> (bản xem trước: ?trum=xong) = hôm nay đã thắp cánh sen:
   thẻ trùm xuống ngăn "Đã xong hôm nay", nhãn "tính cho trùm" tắt hết. Chữ/số đổi theo là cặp <bdi class="k-chua|k-xong">.
   Thẻ trùm KHÔNG tính vào "N việc, làm hết thêm +P điểm" hay "x/13 việc". Khách chưa đăng nhập: không thấy gì về trùm. */
:root:not([data-trum="xong"]) .k-xong, :root[data-trum="xong"] .k-chua { display: none !important; }
:root[data-trum="xong"] .cap-khoi { --pt: var(--pt-xong) !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sao-ar { width: 1.1em; height: 1.1em; flex: none; }
.ic-sen { width: 14px; height: 14px; flex: none; }
.chon-vai a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; border-radius: 999px;
  font: 600 .8rem var(--f-hien); color: var(--chu-2); text-decoration: none;
}
.chon-vai a:hover { color: var(--chu); }
.chon-vai a[aria-current="true"] { background: var(--mat-2); color: var(--chu); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .6); }

.tq-moi { margin: -4px 0 12px; font-size: .86rem; color: var(--chu-3); }
.tq-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.tq-nhan .tq-tt { margin-top: 0; }
.tinh-trum {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font: 600 .75rem/1.5 var(--f-hien); letter-spacing: .02em; color: #FFD3E2;
  background: rgb(245 139 175 / .16); border: 1px solid rgb(245 139 175 / .45);
}

.the-trum {
  grid-column: 1 / -1; position: relative; isolation: isolate;
  display: grid; gap: 8px 20px; align-items: start;
  grid-template-columns: 128px minmax(0, 1fr) minmax(236px, 292px);
  grid-template-areas: "hinh dau ben" "hinh than ben";
  padding: 16px 18px 16px 16px; border-radius: 22px;
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--mau) 24%, transparent), transparent 58%),
    linear-gradient(135deg, rgb(58 38 86 / .92), rgb(37 26 55 / .94));
  border: 1px solid color-mix(in srgb, var(--mau) 48%, transparent);
  box-shadow: 0 18px 40px -26px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
}
.tr-hinh { grid-area: hinh; position: relative; align-self: center; justify-self: center; }
.tr-vong {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 2px; border: 0; border-radius: 20px;
  background: none; color: inherit;
}
.tr-vong-hinh { position: relative; display: block; width: 124px; height: 124px; }
.tr-sen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-sen-ray { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 1; }
.tr-sen .sang { fill: url(#sen-g); }
.tr-sen .cho { fill: rgb(255 255 255 / .05); stroke: rgb(255 179 203 / .4); stroke-width: .7; }
.tr-vong-hinh img {
  position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; translate: -50% -50%; border-radius: 50%; padding: 4%;
  background: radial-gradient(circle at 50% 40%, #4A3570, #241836 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.tr-vong-so {
  font: 600 .84rem var(--f-hien); color: var(--chu-2);
  text-decoration: underline dotted rgb(255 169 198 / .6); text-underline-offset: 4px;
}
.tr-vong-so b { font-weight: 800; font-size: 1.02rem; color: var(--chu); }
.tr-vong:hover .tr-vong-so { color: var(--chu); }
.anh-tam {
  position: absolute; left: -4px; top: -4px; z-index: 2; padding: 1px 8px; border-radius: 999px; pointer-events: none;
  font: 600 .75rem/1.5 var(--f-hien); letter-spacing: .02em; color: #2E2200; background: #F6D98B;
}
.tr-dau { grid-area: dau; min-width: 0; }
.tr-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0;
  font: 700 .75rem var(--f-hien); letter-spacing: .12em; text-transform: uppercase; color: var(--hong-chu);
}
.tr-kicker .so-giai { margin: 0 0 0 -10px; padding: 6px 10px; font-size: .86rem; letter-spacing: .02em; text-transform: none; }
.the-trum h4 { margin: 0; font: 700 1.24rem/1.2 var(--f-hien); font-stretch: 108%; }
.the-trum h4 a { display: inline-flex; align-items: center; min-height: var(--cham); text-decoration: none; }
.the-trum h4 a:hover { text-decoration: underline; text-decoration-color: var(--hong); text-underline-offset: 5px; }
.tr-loi { margin: 0; font-size: .88rem; font-style: italic; line-height: 1.5; color: var(--chu-2); }
.tr-than { grid-area: than; min-width: 0; }
.tr-cau { margin: 2px 0 8px; font-size: .92rem; color: var(--chu); }
.tr-viec { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-viec {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--cham); padding: 6px 14px 6px 11px; border-radius: 999px;
  font: 600 .88rem var(--f-hien); text-decoration: none; color: var(--chu);
  background: rgb(255 255 255 / .05); border: 1px solid var(--vien-2); transition: border-color .25s, background-color .25s;
}
.chip-viec:hover { border-color: var(--hong); background: rgb(245 139 175 / .1); }
.chip-viec .ic { width: 14px; height: 14px; }
.chip-viec.xong {
  color: #CFF5EA; background: color-mix(in srgb, var(--bac-ha) 16%, transparent);
  border-color: color-mix(in srgb, var(--bac-ha) 55%, transparent);
}
.tr-ben {
  grid-area: ben; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0;
  padding-left: 18px; border-left: 1px solid var(--vien);
}
.tr-no { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 0 8px; }
.tr-no-nhan { font: 700 .78rem var(--f-hien); letter-spacing: .1em; text-transform: uppercase; color: var(--chu-2); }
.tr-no .so-giai { margin: 0 -8px 0 0; font-size: 1rem; }
.thanh-no {
  grid-column: 1 / -1; position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgb(255 255 255 / .08); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4);
}
.thanh-no i {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--no) * 1%); border-radius: inherit;
  background: linear-gradient(90deg, #FFB48A, #F58BAF); box-shadow: 0 0 10px rgb(255 160 150 / .45);
}
.tr-cuoc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 14px; border-radius: 16px;
  border: 1px solid rgb(246 217 139 / .45); background: rgb(246 217 139 / .1); color: var(--chu); text-align: left;
  transition: background-color .25s;
}
.tr-cuoc:hover { background: rgb(246 217 139 / .18); }
.tr-cuoc-nhan { font: 600 .86rem var(--f-hien); color: #F9E6B5; white-space: nowrap; }
.tr-cuoc-so { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 800 1.22rem/1 var(--f-hien); color: #FFF3C4; }
.tr-cuoc-so .sao-ar { width: 22px; height: 22px; }
.tr-cuoc .hoi {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: rgb(246 217 139 / .22); font: 800 .9rem/1 var(--f-hien); color: #FFF3C4;
}
.tr-thuan { margin: 0; font-size: .82rem; color: var(--chu-3); }
.tr-cach { min-height: var(--cham); padding: 8px 18px; font-size: .9rem; align-self: flex-start; }

/* một dòng trùm trong "Đã xong hôm nay" + gợi ý nhỏ trên thanh ngăn khi ngăn còn đóng */
.nv-vu.trum-dong { border-color: color-mix(in srgb, var(--mau) 45%, transparent); }
@media (min-width: 560px) { .nv-vu.trum-dong { grid-column: span 2; } }   /* lưới luôn ≥ 2 cột từ 560 px */
.nv-vu .mini.trum-mini { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4A3570, #241836 72%); }
.nv-vu .mini.trum-mini img { top: 0; width: 100%; height: 100%; padding: 3px; }
.trum-tom { display: inline-flex; align-items: center; gap: 5px; font: 600 .8rem var(--f-hien); color: #FFD3E2; }
.con-lai summary { flex-wrap: wrap; }
[data-vai="khach"] .the-trum, [data-vai="khach"] .tinh-trum, [data-vai="khach"] .trum-dong,
[data-vai="khach"] .trum-tom { display: none !important; }

@media (max-width: 899.98px) {
  .the-trum { grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "hinh dau" "hinh than" "ben ben"; }
  .tr-ben {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
    padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--vien);
  }
  .tr-no { grid-column: 1 / -1; }
  .tr-cuoc { justify-self: start; }
  .tr-thuan { grid-column: 1 / -1; grid-row: 3; }
  .tr-cach { align-self: center; }
}
@media (max-width: 559.98px) {
  .the-trum { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "hinh dau" "than than" "ben ben"; padding: 14px 14px 16px; gap: 8px 12px; }
  .tr-vong-hinh { width: 96px; height: 96px; }
  .the-trum h4 { font-size: 1.08rem; }
  .tr-kicker { letter-spacing: .08em; }
  .tr-kicker .so-giai { margin-left: -8px; padding: 6px 8px; }
  .tr-cuoc { grid-column: 1 / -1; justify-self: stretch; padding-left: 12px; }
  .tr-thuan { grid-column: 1; grid-row: 3; }
  .tr-cach { grid-column: 2; grid-row: 3; }
}
/* Thẩm tra 24/09 (QĐ-19 Đ25): trên điện thoại thẻ trùm cao 525 px (375 px) nên sau thẻ chỉ thấy trọn MỘT nhiệm vụ.
   Gọn lại: lời trùm để ở Hang Trùm, thanh Cuồng nộ lên cạnh ảnh trùm, "Đang cược" một hàng, "Thuần…" + "Cách làm" một hàng.
   Chỉ áp cho thẻ trên Training (.the-trum …) — Hang Trùm dùng chung vài lớp tr-* nên không đụng tới. */
@media (max-width: 559.98px) {
  .the-trum {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas: "hinh dau dau" "hinh no no" "than than than" "cuoc cuoc cuoc" "thuan thuan cach";
  }
  .the-trum .tr-ben { display: contents; }
  .the-trum .tr-loi { display: none; }
  .the-trum .tr-no { grid-area: no; align-self: end; }
  .the-trum .tr-cuoc { grid-area: cuoc; margin-top: 2px; }
  .the-trum .tr-thuan { grid-area: thuan; align-self: center; }
  .the-trum .tr-cach { grid-area: cach; align-self: center; }
}

/* QĐ-78 Đợt 2 (27/09): nút Nghe Ari trong hộp giải thích (bản xem trước, trang tổng /tools/, Hang Trùm). Kiểu nút và khung "Lời Ari"
   là của ../giong-ari.css; ở đây chỉ: ẩn khi không có JS (nút cần giong-ari.js), màu hợp nền tím, ô chạm >= 44 px, và hộp giải thích
   dài thì cuộn trong hộp (khung lời mở ra không đẩy hộp ra ngoài màn hình điện thoại). */
[popover].giai { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.giai-giong { display: none; margin: 12px 0 0; }
.co-js .giai-giong:not([hidden]) { display: block; }
.giai-giong .giong-nut { min-height: var(--cham); font-size: .86rem; color: var(--chu); border-color: var(--vien-2); background: rgb(245 139 175 / .1); }
.giai-giong .giong-nut.dang-bat { border-color: var(--hong); background: rgb(245 139 175 / .2); }
.giai-giong .giong-khung { max-width: none; background: rgb(255 255 255 / .04); border-color: var(--vien-2); }
.giai-giong .giong-loi { max-height: min(14em, 40vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.giai-giong .giong-ghi, .giai-giong .giong-khung-gio { font-size: .78rem; }
.giai-giong .giong-an { min-width: 44px; padding: 0 10px; }