/* ONE VLU v1 — lớp giao diện miền đại học (gói C · KWV-354). Nạp SAU styles.css · v4 · v5 · v6 · v7b — chỉ THÊM / đè có chủ đích.
   Luật tương phản cứng (giữ từ Capella): mọi chữ nằm trên nền TỰ CHỨA của chính component đó. Thẻ «giấy» (thẻ công cụ, cầu số, thang
   thực chiến, nhãn dữ liệu minh hoạ, chip đối tác) dùng màu cố định ở CẢ 2 theme; phần bám theme dùng token --navy-* / --fg / --text-2.
   Khối: 1 Cấp nguồn lực · 2 Hậu kỳ «vì sao» · 3 persona 5 (nhân viên) · 4 nhãn bắt buộc (dữ liệu minh hoạ · đối tác · mô phỏng) ·
   5 Destini + cầu số · 6 thang thực chiến + KII · 7 thanh 8 khâu · 8 màn mở / thẻ học kỳ VLU · 12 Domino Lớn 8 quân (v1.1 · KWV-359). */

:root { --vlu-ink: var(--vlu-navy); --vlu-ink-2: var(--vlu-navy-2); --vlu-line: var(--vlu-paper-line); --vlu-ok-bg: var(--vlu-stone-soft); --vlu-ok-line: var(--vlu-stone);
  --pc4: #b8c2d6; }   /* v1.2 · UI2: --vlu-paper / --vlu-red nay ở styles-vlu-tokens.css (giấy trắng · đỏ VLU) */
:root[data-theme="light"] { --pc4: #4c5670; }
.pc4 { --pcc: var(--pc4); } .pcb4 { background: var(--pc4); }

/* ───────── 1 · CẤP NGUỒN LỰC (overlay bên phải như Giao ban) */
.tools { top: calc(var(--top-h) + var(--time-h)); bottom: var(--tool-h); place-items: stretch end; padding: 8px 12px; background: linear-gradient(90deg, rgba(15, 18, 22, 0) 0%, rgba(15, 18, 22, 0) 30%, rgba(15, 18, 22, .45) 70%); }
:root[data-theme="light"] .tools { background: linear-gradient(90deg, rgba(31, 37, 45, 0) 0%, rgba(31, 37, 45, 0) 30%, rgba(31, 37, 45, .14) 70%); }
.tl-panel { width: min(680px, 50vw); }
.tl-focus { margin: 0 0 8px; padding: 8px 12px; border-radius: 5px; background: #fdf2f3; color: #1f2251; border-left: 6px solid #d72134; font-size: 15px; line-height: 1.35; }
.tl-focus b { color: #1f2251; }
.tl-budget { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 10px; padding: 8px 12px 14px; border-radius: 5px; background: var(--navy-800); color: var(--fg); border: 1px solid var(--line-2); font-size: 15px; }
.tl-budget b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--fg); }
.tl-bonus { font-size: 13px; font-weight: 800; color: var(--accent-text); }
.tl-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 5px; border-radius: 3px; background: var(--navy-700); overflow: hidden; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--vlu-red-deep), var(--vlu-red)); }
.tl-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.tl-card { width: 100%; min-height: 44px; display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 5px; cursor: pointer;
  background: var(--vlu-paper); color: var(--vlu-ink); border: 2px solid var(--vlu-line); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); font: inherit; }
.tl-card:hover { border-color: #d72134; }
.tl-card.on { background: var(--vlu-ok-bg); border-color: var(--vlu-ok-line); box-shadow: 0 0 0 3px rgba(47, 138, 94, .35); }
.tl-card.over { background: #f0f1f6; color: #40444b; border-style: dashed; border-color: #a5a9b4; cursor: not-allowed; }
.tl-top { display: flex; align-items: center; gap: 8px; }
.tl-ic { font-size: 24px; line-height: 1; }
.tl-nm { flex: 1; font-size: 17px; line-height: 1.2; color: inherit; }
.tl-cost { flex: none; padding: 2px 9px; border-radius: 4px; background: #1f2251; color: #f5f6fc; font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; }
.tl-cost small { font-size: 12px; font-weight: 700; color: #e3e5ec; }
.tl-dept { font-size: 13px; font-weight: 800; color: #454a52; }
.tl-card.over .tl-dept { color: #40444b; }
.tl-why { font-size: 14.5px; line-height: 1.35; color: var(--vlu-ink-2); }
.tl-card.over .tl-why { color: #40444b; }
.tl-blks { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-blk { font-size: 12.5px; line-height: 1.3; padding: 2px 8px; border-radius: 4px; border: 1px solid; }
.tl-blk b { font-weight: 850; }
.tl-blk.off { background: #e6f0ff; color: #12305e; border-color: #9bb7e3; }
.tl-blk.soft { background: #fdf0e6; color: #6b300b; border-color: #d98a4e; }
.tl-blk.staff { background: #efe6ff; color: #3d2470; border-color: #b9a2e6; }
.tl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.tl-on, .tl-over, .tl-add, .tl-vote, .tl-mine { font-size: 13px; font-weight: 850; padding: 2px 9px; border-radius: 4px; border: 1px solid; }
.tl-on { background: #d3ece9; color: #0f3f3b; border-color: #6bbdb4; }
.tl-over { background: #fbe4e7; color: #6a1424; border-color: #e3a0ab; }
.tl-add { background: #ffffff; color: #1d4f99; border-color: #9bb7e3; }
.tl-vote { background: #1f2251; color: #f5f6fc; border-color: #1f2251; }
.tl-mine { background: #fdf0e6; color: #6b300b; border-color: #d98a4e; }
.tl-rip { margin: 4px 0 8px; padding: 8px 12px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); color: var(--fg); }
.tl-rip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-rip li { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.tl-rip li b { color: var(--fg); }
.tl-rip i { font-style: normal; font-weight: 850; color: var(--accent-text); }
.tl-note { margin: 0 0 6px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.tl-note b { color: var(--fg); }
.tl-panel .p-foot .btn.ghost { min-width: 0; }
@media (max-width: 1180px) and (min-width: 761px) { .tl-panel { width: min(620px, 60vw); } }
@media (max-width: 760px) {
  .tools { top: 0; bottom: 0; place-items: end stretch; padding: 0; background: linear-gradient(180deg, rgba(15, 18, 22, 0) 0%, rgba(15, 18, 22, 0) 30%, rgba(15, 18, 22, .5) 50%); }
  :root[data-theme="light"] .tools { background: linear-gradient(180deg, rgba(31, 37, 45, 0) 0%, rgba(31, 37, 45, 0) 30%, rgba(31, 37, 45, .16) 50%); }
  .tl-panel { width: 100%; max-height: 74dvh; }
  .tl-cards { grid-template-columns: 1fr; }
  .tl-card { padding: 8px 10px; }
  .tl-nm { font-size: 16px; }
  .tl-why { font-size: 14px; }
  .tl-panel .p-foot .btn.ghost { padding: 0 10px; }
}
@media (max-height: 520px) and (min-width: 761px) { .tools { top: 0; bottom: 0; padding: 6px; } .tl-panel { width: min(640px, 66vw); } }

/* ───────── 2 · HẬU KỲ «Vì sao Hội đồng chọn A, không chọn B» */
.tlw { margin: 4px 0 10px; }
.tlw-sum { margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
.tlw-sum b { color: var(--fg); }
.tlw-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.tlw-c, .tlw-n { display: grid; gap: 3px; padding: 8px 12px; border-radius: 5px; font-size: 14.5px; line-height: 1.35; border: 1px solid; }
.tlw-c { background: var(--vlu-ok-bg); color: #0f3f3b; border-color: #6bbdb4; }
.tlw-n { background: var(--vlu-paper); color: var(--vlu-ink); border-color: var(--vlu-line); }
.tlw-c b, .tlw-n b { font-size: 15.5px; color: inherit; }
.tlw-c small, .tlw-n small { font-size: 13px; color: inherit; font-weight: 700; }
.tlw-why, .tlw-cf, .tlw-none { color: inherit; }
.tlw-did { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 2px; font-weight: 700; }
.tlw-h2 { margin: 4px 0; font-size: 13px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }

/* ───────── 3 · 5 ĐƯỜNG: đường NHÂN VIÊN VLU (persona 5, trọng số 0) vẽ nét đứt + chú «kéo 4 đường» */
.pj-svg .pjl.staff { stroke-dasharray: 6 5; }
.pj-svg .pjl.thick.staff { stroke-width: 3; }
.pj-chip.staff { border-style: dashed; }
.pj-staffnote { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.pj-staffnote b { color: var(--fg); }

/* ───────── 4 · NHÃN BẮT BUỘC (A-5): «Dữ liệu minh hoạ» · chip «đối tác» cạnh 84X · «mô phỏng — không phải xếp hạng thật» */
.vlu-data { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 4px; background: #fdf0e6; color: #6b300b; border: 1px solid #d98a4e; font-size: 12.5px; font-weight: 850; white-space: nowrap; vertical-align: middle; }
.vlu-partner { display: inline-flex; align-items: center; padding: 0 7px; margin-left: 4px; border-radius: 4px; background: #e6f0ff; color: #12305e; border: 1px solid #9bb7e3; font-size: 11.5px; font-weight: 850; line-height: 1.5; white-space: nowrap; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.vlu-sim { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 4px; background: #efe6ff; color: #3d2470; border: 1px solid #b9a2e6; font-size: 12.5px; font-weight: 850; white-space: nowrap; }
.vlu-sample { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 4px; background: #eff1f6; color: #33383f; border: 1px solid #bcbfc4; font-size: 12.5px; font-weight: 850; white-space: nowrap; }

/* ───────── 5 · DESTINI (4 nút xuất tệp) + CẦU SỐ */
.dst { margin: 6px 0 10px; padding: 10px 12px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); color: var(--fg); }
.dst-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; }
.dst-h b { font-size: 15px; color: var(--fg); }
.dst-h span { font-size: 13px; color: var(--text-2); }
.dst-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.dst-btn { min-height: 52px; display: grid; gap: 1px; justify-items: start; text-align: left; padding: 6px 10px; border-radius: 5px; cursor: pointer; font: inherit;
  background: var(--vlu-paper); color: var(--vlu-ink); border: 2px solid var(--vlu-line); }
.dst-btn:hover { border-color: #d72134; }
.dst-btn b { font-size: 15px; color: inherit; }
.dst-btn small { font-size: 12.5px; color: var(--vlu-ink-2); }
.dst-btn .dst-tag { font-size: 11.5px; font-weight: 850; color: #6b300b; }
.brg { margin: 6px 0 10px; }
.brg-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.brg-pick .btn { min-height: 44px; font-size: 14px; padding: 0 10px; }
.brg-pick .btn[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }

/* ───────── 6 · THANG «THỰC CHIẾN» 5 tầng + KII (Khép vòng · Hậu kỳ) — giấy tự chứa */
.tc { margin: 6px 0 10px; padding: 10px 12px; border-radius: 5px; background: var(--vlu-paper); color: var(--vlu-ink); border: 2px solid var(--vlu-line); }
.tc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.tc-h h3 { margin: 0; font-size: 17px; color: var(--vlu-ink); }
.tc-sum { margin: 0 0 8px; font-size: 14.5px; line-height: 1.35; color: var(--vlu-ink-2); }
.tc-ladder { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.tc-t { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 5px; background: #f3f4f8; color: var(--vlu-ink); border: 1px solid #dfe1e8; font-size: 14px; line-height: 1.3; }
.tc-t .tc-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; background: #dfe1e8; color: var(--vlu-ink); font-weight: 900; font-size: 15px; }
.tc-t b { color: inherit; }
.tc-t small { display: block; font-size: 12.5px; color: var(--vlu-ink-2); }
.tc-t .tc-need { font-size: 12.5px; font-weight: 800; color: var(--vlu-ink-2); white-space: nowrap; }
.tc-t.reached { background: var(--vlu-ok-bg); border-color: #6bbdb4; }
.tc-t.reached .tc-n { background: #24807a; color: #ffffff; }
.tc-t.here { box-shadow: 0 0 0 3px #d72134; }
.tc-t.target .tc-n { background: #1f2251; color: #f5f6fc; }
.tc-gap { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-gap li { font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 4px; background: #fbe4e7; color: #6a1424; border: 1px solid #e3a0ab; }
.tc-kii { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 14px; color: var(--vlu-ink); }
.tc-kii b { font-size: 18px; color: var(--vlu-ink); font-variant-numeric: tabular-nums; }
.tc-kii .tc-bar { position: relative; height: 8px; border-radius: 4px; background: #dfe1e8; overflow: hidden; }
.tc-kii .tc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--vlu-stone-deep), #3f9a91); border-radius: 4px; }
.tc-kii small { font-size: 12.5px; color: var(--vlu-ink-2); }

/* ───────── 7 · THANH 8 KHÂU: khâu 8 «Nền tảng» (nền dưới vòng) + dải pha (Giao ban · Cấp nguồn lực · Giờ G · Hậu kỳ) */
.kbar.host .kb-c[data-kh] { flex: 0 1 auto; }   /* bỏ ô Giờ G / Chuẩn bị co giãn của Capella — VLU: ô khâu chỉ chứa chấm trạm */
.kbar.host .kb-c.base { border-style: dashed; background: #eff1f6; }
.kbar.host .kb-c.base .kb-n { background: #50555d; color: #ffffff; }
.kbar.host .kb-c.base.cur { background: var(--cap-paper-cur); border-style: solid; }
.kb-sep { flex: none; align-self: center; width: 1px; height: 28px; margin: 0 6px; background: var(--line-2); }
/* vlu C: chip TOP xuống hàng 2 cạnh chấm trạm → hàng 1 dành trọn cho tên khâu (1440 px: «Thu hút» không còn bị cắt thành «T.») */
.kbar.host .kb-r2 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kbar.host .kb-r2 .kb-top { padding: 2px 5px; }
.kbar.phases { flex: 0 1 auto; gap: 4px; align-items: center; }
.kbar.phases .ppill, .kbar.phases .kmini { flex: none; }
.kbar.phases .gtrack { flex: 1 1 140px; min-width: 110px; }
@media (max-width: 1600px) and (min-width: 761px) { .kbar.host:not(.phases) .kb-c .kb-t { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; } .kbar.host .kb-c.cur .kb-t { max-width: 170px; } }
@media (max-width: 1360px) and (min-width: 761px) { .kbar.host:not(.phases) .kb-c:not(.cur) .kb-t { display: none; } }
@media (max-width: 760px) { .kb-sep { height: 18px; margin: 0 2px; } .kbar.phases .gtrack { min-width: 54px; flex: 1 1 60px; } .kbar.phases .ppill { max-width: 70px; overflow: hidden; text-overflow: ellipsis; } }
/* vlu C · 390 px: 8 ô khâu + 4 pha không vừa 1 hàng (ô đè nhau, chấm trạm tràn) → 2 hàng: hàng 1 = 8 ô khâu (chỉ số / ✓), hàng 2 = dải pha */
@media (max-width: 760px) {
  .kwrap { flex-wrap: wrap; row-gap: 3px; align-content: center; }
  .kwrap > .kbar.host:not(.phases) { flex: 1 0 100%; }
  .kwrap > .kb-sep { display: none; }
  .kwrap > .kbar.phases { flex: 1 0 100%; }
  .kbar.host .kb-r2 { display: none; }
}

/* ───────── 8 · MÀN MỞ / THẺ HỌC KỲ — chip «sắp mở» sự kiện 2 · «Sợ lớn» · thanh quy mô */
.ev-pick.soon { opacity: 1; cursor: not-allowed; background: var(--navy-800); border-style: dashed; }
.ev-pick.soon .pk-t, .ev-pick.soon .pk-s { color: var(--text-2); }
.ev-soon { display: inline-flex; padding: 1px 9px; border-radius: 4px; background: #fdf0e6; color: #6b300b; border: 1px solid #d98a4e; font-size: 12.5px; font-weight: 850; }
.in-fear, .sheet .in-fear { margin: 0 auto 10px; max-width: 760px; padding: 10px 14px; border-radius: 6px; background: #3a1820; color: #ffe3e7; border: 2px solid #8a3444; font-size: 16px; line-height: 1.4; text-align: left; }
.in-fear b, .sheet .in-fear b { color: #ffffff; }
:root[data-theme="light"] .in-fear, :root[data-theme="light"] .sheet .in-fear { background: #fbe4e7; color: #5a1022; border-color: #e3a0ab; }
:root[data-theme="light"] .in-fear b, :root[data-theme="light"] .sheet .in-fear b { color: #3a0714; }
.in-scale { margin: 0 auto 10px; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.in-scale .sc-u { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 10px; border-radius: 5px; background: var(--vlu-paper); color: var(--vlu-ink); border: 1px solid var(--vlu-line); font-size: 13px; line-height: 1.25; }
.in-scale .sc-u b { font-size: 14px; color: var(--vlu-ink); }
.in-scale .sc-u small { font-size: 12px; color: var(--vlu-ink-2); }
.in-scale .sc-total { background: #1f2251; color: #f5f6fc; border-color: #1f2251; }
.in-scale .sc-total b, .in-scale .sc-total small { color: #f5f6fc; }
.in-focus, .sheet .in-focus { margin: 0 auto 10px; max-width: 760px; padding: 8px 12px; border-radius: 5px; background: #fdf2f3; color: #1f2251; border-left: 6px solid #d72134; font-size: 15px; line-height: 1.35; text-align: left; }
.in-focus b, .sheet .in-focus b { color: #1f2251; }
.sheet .in-focus small { color: #2a2d55; }
.wc-secret { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }

/* ───────── 9 · thanh đầu không còn logo Capella: điện thoại vẫn hiện chữ «ONE VLU» (Capella ẩn tiêu đề, chỉ để logo) */
@media (max-width: 760px) { .topbar .game-title { display: flex; } .topbar .game-title .t-sub { display: none; } .topbar .game-title .t-main { font-size: 15px; letter-spacing: .04em; } }
.ld-logo { height: 40px; }

/* ───────── 10 · ĐIỆN THOẠI: pha Cấp nguồn lực */
.tl-ph .tl-ph-h { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.tl-ph .tl-ph-h b { color: var(--fg); }
.tl-ph .tl-cards { grid-template-columns: 1fr; }
.tl-ph-foot { display: flex; gap: 8px; margin-top: 8px; }
.tl-ph-foot .ph-btn { flex: 1; }
.tl-ph-foot .ph-btn.primary { flex: 2; }
/* vlu C: chữ trong thẻ giấy / ô câu hỏi tập trung KHÔNG thừa hưởng màu chữ sáng của .ph-card (điện thoại theme tối) */
.ph-card .tl-focus, .ph-card .tl-focus b { color: #1f2251; }
.ph-card .tl-card b, .ph-card .tl-blk b { color: inherit; }

/* ───────── 11 · vlu C · vùng chạm ≥ 44 px (Mốc 5 ma trận): chip 5 đường + Σ · tab Hậu kỳ · «Công thức (mô phỏng)» */
.pj-chip, :root .pj-chip { min-height: 44px; }
@media (max-height: 820px) and (min-width: 761px) { :root .pj-chip { min-height: 44px; } }
.db-tab { min-height: 44px; }
.bc5-f > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }

/* D · KWV-355 · D-1 · tương phản: ô số tầng «thực chiến» đã đạt — chữ trắng trên #24807a = 4,27:1 (< 4,5) → nền #1b6f6a = 5,27:1 */
.tc-t.reached .tc-n { background: #1b6f6a; }

/* ───────── 12 · v1.1 · KWV-359 · DOMINO LỚN N QUÂN (VLU 8) — lưới CÙNG CỠ: khung hẹp 2 hàng (4 + 4) · khung ≥ 1150 px 1 hàng 8 · khung ≤ 560 px
   danh sách dọc. Quân TO DẦN (--k) đứng trên cùng 1 vạch (.bc5-tw). Quân chờ dữ liệu (< 3 vòng): viền đứt, không xoay, chip «⏳ chưa đủ dữ liệu».
   Quân 8: chip mô phỏng (.vlu-sim — nền tự chứa) + điều kiện ngoài game 📝. Chữ trong .bc5 bám token theme trên nền --navy-800 của .bc5. */
.bc5 { container-type: inline-size; }
.bc5 .bc5-row { display: grid; grid-template-columns: repeat(var(--half, 5), minmax(0, 1fr)); gap: 16px 22px; align-items: start; }
.bc5 .bc5-p { position: relative; }
.bc5 .bc5-row > .bc5-p:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 38px; font-size: 16px; font-weight: 900; color: var(--text-2); }
.bc5 .bc5-row > .bc5-p.re::after { content: none; }   /* cuối hàng 1 của lưới 4 + 4 */
.bc5-note .vlu-sim { white-space: normal; }
.bc5-tw { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 96px; }
.bc5.many .bc5-tile { width: calc(36px + var(--k, 0) * 2px); height: calc(52px + var(--k, 0) * 4px); }
.bc5-p.wait .bc5-tile { background: #eef0f5; color: #2c3138; border: 2px dashed #62666e; box-shadow: none; transform: none; }
.bc5-s.wait { background: #eef0f5; color: #2c3138; white-space: normal; }
.bc5-proj, .bc5-now { font-size: 11.5px; line-height: 1.25; color: var(--text-2); }
.bc5-sim { margin-top: 3px; white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.25; padding: 2px 8px; border-radius: 5px; }
.bc5-cd { margin-top: 4px; width: 100%; text-align: left; font-size: 11.5px; line-height: 1.3; color: var(--text-2); }
.bc5-cd ul { margin: 2px 0 0; padding-left: 16px; } .bc5-cd li { margin: 1px 0; }
.bc5-cdh { font-weight: 800; color: var(--fg); }
.bc5-cd > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 800; color: var(--fg); }
.bc5-tag { font-size: 11px; }
.bc5-tagsim { font-size: 11.5px; font-weight: 800; line-height: 1.25; color: var(--text-2); }
.bc5-wait { margin: 2px 0 4px; font-size: 14px; color: var(--fg); } .bc5-wait b { color: var(--accent-text); }
@container (min-width: 1150px) {
  .bc5.many .bc5-row { grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 16px 20px; }
  .bc5.many .bc5-row > .bc5-p.re::after { content: '→'; }
}
@container (max-width: 560px) {
  .bc5 .bc5-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bc5 .bc5-p { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 0 10px; text-align: left; }
  .bc5 .bc5-b { align-items: flex-start; }
  .bc5 .bc5-tw { height: auto; min-height: 62px; justify-content: flex-start; padding-left: 4px; }
  .bc5.many .bc5-tile { width: calc(32px + var(--k, 0) * 1px); height: calc(46px + var(--k, 0) * 2px); }
  .bc5 .bc5-p.down .bc5-tile { transform: rotate(38deg) translate(4px, 2px); } .bc5 .bc5-p.down.pulled .bc5-tile { transform: rotate(44deg) translate(5px, 3px); }
  .bc5 .bc5-p.wait .bc5-tile { transform: none; }
  .bc5.bc5 .bc5-row > .bc5-p:not(:last-child)::after { content: '↓'; right: auto; left: 30px; top: auto; bottom: -15px; font-size: 14px; }
  .bc5 .bc5-bar { width: 100%; } .bc5-sim { text-align: left; }
}
/* Khép vòng ≤ 760 px: cột lưới của lớp phủ KHÔNG được rộng hơn khung (trước v1.1 cột = min-content ≈ 419 px ở 390 → mép phải bị cắt) */
.ch-wrap { grid-template-columns: minmax(0, 1fr); }
/* Thang «thực chiến» ≤ 560 px: điều kiện tầng xuống dòng dưới tên (trước v1.1: cột điều kiện nowrap ép tên tầng còn 1 chữ/dòng và tràn mép phải) */
@media (max-width: 560px) { .tc-t { grid-template-columns: 34px minmax(0, 1fr); } .tc-t .tc-need { grid-column: 2; white-space: normal; } }
/* KII: nhãn mô phỏng ngay cạnh thanh (CONTRACT A-5 · v1.1) */
.tc-kii .tc-kii-sim { justify-self: start; }

/* ── v1.1 · gói C2 · KWV-361 — 6 chặng năm học (A3-5 · B-18): khối «▶ Tiếp ván đã lưu» ở màn mở · gợi ý chia 2 buổi ở Hậu kỳ · dòng mức.
   Nền tự chứa (2 theme): khối tiếp ván nền xanh đậm chữ ngà (tối) / xanh nhạt chữ mực (sáng); nút ≥ 44 px. */
.in-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 14px auto 0; max-width: 820px; padding: 10px 14px;
  border-radius: 6px; background: #123f3c; color: #e6f5f3; border: 2px solid #3f948c; }   /* v1.2 · UI2: xanh đá (trạng thái tốt) thay xanh dương */
.in-resume .btn { min-height: 48px; }
.in-resume .btn.primary { min-width: 220px; font-size: 18px; }
.in-resume .btn.ghost { color: #e6f5f3; border-color: #7cc4bb; background: transparent; }
.in-resume-t { flex: 1 1 240px; font-size: 15px; font-weight: 700; line-height: 1.35; color: #e6f5f3; text-align: left; }
:root[data-theme="light"] .in-resume { background: var(--vlu-stone-soft); color: var(--vlu-stone-ink); border-color: #3f948c; }
:root[data-theme="light"] .in-resume-t { color: var(--vlu-stone-ink); }
:root[data-theme="light"] .in-resume .btn.ghost { color: var(--vlu-stone-ink); border-color: #3f948c; }
.lv-facts .sessions { color: var(--fg); font-weight: 700; }
.db-split { margin: 6px 0 2px; padding: 8px 12px; border-radius: 5px; background: #123f3c; color: #e6f5f3; border-left: 6px solid var(--vlu-stone-glow); font-size: 14.5px; line-height: 1.38; }
.db-split b { color: #ffffff; }
:root[data-theme="light"] .db-split { background: var(--vlu-stone-soft); color: var(--vlu-stone-ink); border-left-color: var(--vlu-stone); }
:root[data-theme="light"] .db-split b { color: #0a2e2b; }
@media (max-width: 760px) { .in-resume { flex-direction: column; align-items: stretch; } .in-resume .btn.primary { min-width: 0; } .in-resume-t { text-align: center; } }

/* ═════════════════════════ 13 · v1.2 · BẢN SẮC ONE VLU (gói UI2 · KWV-378) ═════════════════════════
   Khác ONE CAPELLA ở cái nhìn đầu: dải băng ĐỎ VLU + wordmark «ONE VLU» (mũ cử nhân nét) · mặt trắng + xám lạnh VLU, chữ navy VLU (theme sáng
   MẶC ĐỊNH; tối = xám than đỏ) · góc vuông 4–6 px · gạch đỏ 3 px trên tiêu đề khối · chip «thẻ sinh viên» (ô màu bên trái) · dải pha = thanh học kỳ (ô vuông nối
   gạch) · «tốt / đã xong / đứng vững» = xanh đá · chuyển động trượt 8 px 160 ms. Bảng màu: styles-vlu-tokens.css. Mọi chữ vẫn trên nền tự chứa. */

/* 13.1 · chữ: số dạng bảng (đếm giờ, điểm, KPI không «nhảy» bề ngang) */
html, body { font-variant-numeric: tabular-nums; }

/* 13.2 · wordmark «ONE VLU»: ô chữ ONE (sáng: đỏ trên trắng · tối: trắng trên đỏ) + mũ cử nhân nét */
.wm-one { display: inline-block; padding: .02em .22em 0; margin-right: .06em; border-radius: 3px; background: var(--vlu-red); color: #ffffff; line-height: 1.12; letter-spacing: .02em; }
.wm-cap { display: inline-block; width: 1.3em; height: 1em; flex: none; vertical-align: -.1em; color: currentColor; }

/* 13.3 · THANH TRÊN = DẢI BĂNG ĐỎ (sáng) · xám than + băng đỏ dưới (tối) */
.topbar { background: var(--vlu-red); border-bottom: 0; box-shadow: inset 0 -3px 0 var(--vlu-red-deep); }
.topbar .game-title { align-items: center; gap: 10px; }
.topbar .game-title .wm-cap { width: 30px; height: 23px; color: #ffffff; }
.topbar .game-title .t-main { display: inline-flex; align-items: center; color: #ffffff; font-size: 21px; font-weight: 900; letter-spacing: .03em; }
.topbar .game-title .t-sub { color: #ffffff; font-weight: 650; letter-spacing: .01em; }
.topbar .wm-one { background: #ffffff; color: var(--vlu-red); }
.topbar .sim-note { color: #ffffff; }
.topbar .kw-pill { background: #ffffff; }
.topbar .wordmark { padding: 3px 8px; border-radius: 4px; background: #ffffff; color: var(--vlu-navy); }
.topbar .wordmark b { color: var(--vlu-red); }
.topbar .wordmark i { color: var(--vlu-navy-3); }
:root:not([data-theme="light"]) .topbar { background: var(--vlu-d-bar); box-shadow: inset 0 -4px 0 var(--vlu-red); }
:root:not([data-theme="light"]) .topbar .wm-one { background: var(--vlu-red); color: #ffffff; }
@media (max-width: 760px) { .topbar .game-title .wm-cap { width: 22px; height: 17px; } .topbar .game-title .t-main { font-size: 15px; } .topbar .wordmark { padding: 2px 6px; } }
@media (max-width: 400px) { .topbar .wordmark { display: none; } }

/* 13.4 · màn chờ: đỏ VLU (cả 2 theme) — chữ / logo trắng */
.loading .wm-one { background: #ffffff; color: var(--vlu-red); }
.loading .ld-cap { width: 54px; height: 41px; margin-bottom: 6px; color: #ffffff; }

/* 13.5 · KHỐI + gạch đỏ 3 px trên tiêu đề khối · bóng mỏng */
.scorecard, .gclock, .incidents, .judges, .col-metrics, .journey, .dash-metrics, .rolechip { border-top: var(--vlu-bar) solid var(--vlu-red); }
.onesheet { border-top-width: var(--vlu-bar); }
.panel { border-top: var(--vlu-bar) solid var(--vlu-red); }
.overlay > .sheet { border-top: var(--vlu-bar) solid var(--vlu-red); }
.intro .sheet { border-top-width: 6px; }
.ch-head, .ch-loop { border-top: var(--vlu-bar) solid var(--vlu-red); }
.scorecard h2, .incidents h2, .judges h2, .gclock h2, .blk-h, .p-step, .sheet h3, .in-sec, .mt-head h3, .jr-head h2, .tlw-h2 { letter-spacing: .04em; }

/* 13.6 · DẢI PHA = THANH HỌC KỲ: ô vuông nối gạch (Giao ban → Cấp nguồn lực → Giờ G → Hậu kỳ) · đã qua = xanh đá · đang = đỏ */
.kbar.phases { gap: 10px; }
.kbar.phases > li { position: relative; border-radius: 3px; }
.kbar.phases > li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 2px; margin-top: -1px; background: var(--vlu-concrete); }
.kbar.phases > li.done::before, .kbar.phases > li.now::before { background: var(--vlu-stone); }
.kbar .gtrack .gbar { border-radius: 0; }
.kbar .gtrack .gfill { border-radius: 0; background: linear-gradient(90deg, var(--vlu-red-deep), var(--vlu-red)); }
.kb-sep { background: var(--vlu-concrete); }
@media (max-width: 760px) { .kbar.phases { gap: 7px; } .kbar.phases > li + li::before { left: -8px; width: 7px; } }

/* 13.7 · ô khâu «thẻ sinh viên»: số trong ô vuông bên trái · khâu đang = viền đỏ · đã xong = số xanh đá */
.kb-c { border-width: 1px; }
.kb-n { border-radius: 2px; }
.kb-top { border-radius: 2px; letter-spacing: .03em; }
.kbar .pdot, .pdot { border-radius: 4px; }
.pdot.now, .kbar .pdot.now { box-shadow: 0 0 0 3px rgba(215, 33, 52, .30); }

/* 13.8 · CHIP «thẻ sinh viên»: góc 3 px · ô màu bên trái 4 px (cùng màu viền của chip) */
.chip, .vlu-data, .vlu-partner, .vlu-sim, .vlu-sample, .ev-soon, .kp-f, .tl-on, .tl-over, .tl-add, .tl-vote, .tl-mine, .tc-gap li { border-radius: 3px; border-left-width: 4px; }
.wchip { border-left: 4px solid var(--vlu-red); }
.sc-goal, .gc-speed { border-radius: 3px; }
.phase-chip { border-radius: 4px; }
.phase-chip.hot { background: var(--vlu-red); color: #ffffff; border-color: var(--vlu-red); }

/* 13.9 · lựa chọn ĐANG CHỌN = ô đỏ bên trái (thẻ màn mở · đáp án trạm · xếp hạng) — nền đỏ rất nhạt ở theme sáng */
.pick[aria-checked="true"], .opt[aria-checked="true"], .t3-task.on, .rb-c.picked { border-color: var(--vlu-red); box-shadow: inset 5px 0 0 var(--vlu-red); }
:root[data-theme="light"] .pick[aria-checked="true"], :root[data-theme="light"] .opt[aria-checked="true"], :root[data-theme="light"] .t3-task.on, :root[data-theme="light"] .rb-c.picked { background: var(--vlu-red-soft); }
.pick .pk-on { background: var(--vlu-red); color: #ffffff; border-radius: 3px; }
.opt[aria-checked="true"] .letter, .t3-task.on .t3-n { background: var(--vlu-red); color: #ffffff; border-color: var(--vlu-red); }
:root[data-theme="light"] .blackcard .opt[aria-checked="true"] { background: var(--vlu-d-chip); }   /* Thẻ Đen luôn tối */

/* 13.10 · nhãn nổi trên cảnh 3D: thẻ chữ nhật, số trạm trong ô vuông */
.tag .tn { border-radius: 3px; }
.tag.now { box-shadow: 0 0 0 3px rgba(215, 33, 52, .40); }

/* 13.11 · CHUYỂN ĐỘNG riêng: lớp phủ trượt lên 8 px + nền tối hiện dần · 160 ms. Đặt trên GỐC lớp phủ (#station · #lineup · #intro …): gốc chỉ
   đổi «hidden» khi mở → hoạt ảnh chạy 1 lần lúc mở; bảng bên trong dựng lại innerHTML mỗi lần bấm KHÔNG làm nó nhảy lại. Chữ không mờ dần
   (giữ tương phản khi đo/chụp). Toast = phần tử mới mỗi lần → trượt riêng. Tắt hẳn khi «giảm chuyển động». */
@keyframes vlu-rise { from { transform: translateY(8px); } to { transform: none; } }
@keyframes vlu-scrim { from { background-color: transparent; } }
.overlay:not([hidden]) { animation: vlu-rise var(--vlu-dur) var(--vlu-ease), vlu-scrim var(--vlu-dur) linear; }
.toast { animation: vlu-rise var(--vlu-dur) var(--vlu-ease); }
@media (prefers-reduced-motion: reduce) { .overlay:not([hidden]), .toast, .wc { animation: none !important; } }
html.reduce-motion .overlay:not([hidden]), html.reduce-motion .toast, html.reduce-motion .wc { animation: none !important; }

/* 13.12 · màn mở: tiêu đề = wordmark (mũ + ô ONE) · bước 1–4 ô vuông đỏ */
.in-title { display: flex; justify-content: center; align-items: center; gap: .18em; letter-spacing: .03em; }
.in-title .wm-cap { width: 1.25em; height: .95em; color: var(--vlu-red); }
:root:not([data-theme="light"]) .in-title .wm-cap { color: var(--vlu-red-glow); }
.in-sub { letter-spacing: .01em !important; }

/* 13.13 · ĐIỆN THOẠI: thanh trên = dải băng đỏ (sáng) · xám than + băng đỏ (tối) */
.ph-top { background: var(--vlu-red); border-bottom: 0; box-shadow: inset 0 -3px 0 var(--vlu-red-deep); }
.ph-top .tp-brand b { color: #ffffff; }
.ph-top .tp-brand > span { color: #ffffff; }
.ph-top .tp-net, .ph-top .tp-net.warn, .ph-top .tp-net.ok, .ph-top .tp-net.err { color: #ffffff !important; }   /* .warn (!important) của điện thoại không được tô chữ cam lên băng đỏ */
.ph-top .tp-net i { box-shadow: 0 0 0 2px #ffffff; }
.ph-top .wm-one { background: #ffffff; color: var(--vlu-red); }
:root:not([data-theme="light"]) .ph-top { background: var(--vlu-d-bar); box-shadow: inset 0 -4px 0 var(--vlu-red); }
:root:not([data-theme="light"]) .ph-top .wm-one { background: var(--vlu-red); color: #ffffff; }
.ph-card { border-top: var(--vlu-bar) solid var(--vlu-red); }
.nv.on { box-shadow: inset 0 -3px 0 var(--vlu-red); }

/* 13.14 · VÀNG NHẤN VLU #febd25 (✅ R3): chỉ cho KHỐI SỐ LIỆU — tổng điểm Hậu kỳ · quy mô VLU Group ở màn mở (chữ navy 8,9:1) */
.db-total { background: var(--vlu-gold); color: var(--vlu-navy); border-top-color: var(--vlu-red); }
.db-total b { color: var(--vlu-navy); }
.db-total span { color: var(--vlu-navy-2); }
.in-scale .sc-total { background: var(--vlu-gold); color: var(--vlu-navy); border-color: var(--vlu-gold); }
.in-scale .sc-total b, .in-scale .sc-total small { color: var(--vlu-navy); }
/* 13.15 · 5 ĐƠN VỊ: ô màu nhận diện bên trái («thẻ sinh viên») — màu chỉ tô viền, chữ giữ navy trên nền trắng */
.in-scale .sc-u[data-unit] { border-left-width: 5px; }
.in-scale .sc-u[data-unit="vlu"] { border-left-color: var(--unit-vlu); }
.in-scale .sc-u[data-unit="pdu"] { border-left-color: var(--unit-pdu); }
.in-scale .sc-u[data-unit="betu"] { border-left-color: var(--unit-betu); }
.in-scale .sc-u[data-unit="cdvlsg"] { border-left-color: var(--unit-vlsc); box-shadow: inset 3px 0 0 var(--unit-vlsc-navy); }
.in-scale .sc-u[data-unit="uts"] { border-left-color: var(--unit-uts); }
.ph-top .tp-brand .wm-one { font-size: inherit; letter-spacing: .02em; font-weight: 900; }   /* .tp-brand span (chữ LIVE) không được áp lên ô ONE */
.ph-top .tp-brand { flex: none; }   /* ô ONE làm wordmark rộng hơn → không cho co (trước: chữ «VLU» chạm mã phòng ở 390 px); vai (có «…») co thay */
.ph-top .tp-net.ok { flex: none; }   /* chấm «đã nối» (chữ ẩn) không bị vai co lấn mất */