/* THE ONE CAPELLA v6 «Diễn tập tiệc cưới thật» — giao diện 2D (gói C6b). Dùng chung host (index.html) + điện thoại (phone.html).
   Luật tương phản: mọi khối mang màu (thẻ khẩn P1–P3, ô gợn sóng, ô 411, cây 5 tầng) là GIẤY TỰ CHỨA (nền sáng cố định + mực tối cố định)
   → đọc được ở cả 2 theme. Phần còn lại đi qua token: --fg / --text-2 / --text-3 / --line / --navy-8xx (điện thoại có bí danh cùng tên). */
:root {
  --v6-paper: var(--vlu-paper); --v6-ink: var(--vlu-navy); --v6-ink-2: var(--vlu-navy-2); --v6-ink-3: #50565f; --v6-line: var(--vlu-paper-line);   /* v1.2 · UI2 */
  --v6-up: #e2f1ef; --v6-up-ink: #0f3f3b; --v6-up-line: #6bbdb4;
  --v6-down: #fbe4e7; --v6-down-ink: #6a1424; --v6-down-line: #d98a98;
  --v6-flat: #eef0f5; --v6-flat-ink: #454b55;
  --v6-p1: #fde3e6; --v6-p1-ink: #5c0f1d; --v6-p1-bar: #b3263b;
  --v6-p2: #fff0d6; --v6-p2-ink: #4d2f05; --v6-p2-bar: #94420f;
  --v6-p3: #e5edfb; --v6-p3-ink: #14305e; --v6-p3-bar: #2c56a0;
  --v6-lit: var(--vlu-red-soft); --v6-lit-line: var(--vlu-red); --v6-sel: #2463b8;
}

/* ── màn mở: 4 chế độ + nhịp Diễn tập + bước «Vị trí» */
.picks.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1180px) { .picks.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .picks.four { grid-template-columns: minmax(0, 1fr); } }
.pick.pick-rh { border-style: dashed; }
.rh-tempo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); }
.rh-tempo .rh-tl { font-size: 15px; font-weight: 800; color: var(--fg); margin-right: 4px; }
.rh-tempo .btn { white-space: normal; text-align: left; }
.in-sec-s { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.rl-note { margin-top: 0 !important; }
.rl-depts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.rl-dept { min-height: 44px; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--navy-800); color: var(--fg); font-size: 15px; font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rl-dept small { font-size: 12px; font-weight: 800; padding: 0 6px; border-radius: 4px; background: var(--navy-700); color: var(--fg); }
.rl-dept.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.rl-dept.on small { background: var(--inv-fg); color: var(--inv-bg); }
.picks.rl-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .picks.rl-roles { grid-template-columns: minmax(0, 1fr); } }
.rl-pick { text-align: left; }
.rl-pick .rl-en { display: block; font-size: 14px; color: var(--text-2); margin: 2px 0 4px; }
.rl-pick .rl-jd { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--fg); line-height: 1.35; }
.rl-pick .rl-nam { display: block; font-size: 14px; color: var(--fg); }
.rl-pick .rl-nam b { color: var(--accent-text); }
.rl-pick.none { border-style: dashed; }
.rl-live { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-org { margin: 10px 0 0; }
.rl-org > summary, .g4-tests > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; color: var(--fg); }

/* ── sơ đồ tổ chức */
.og-wrap { max-height: 52vh; overflow: auto; padding: 6px 4px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line); }
.og-tree, .og-tree ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.og-tree { padding-left: 4px; }
.og { margin: 4px 0; }
.og-c { display: grid; gap: 1px; padding: 5px 9px; border-radius: 5px; background: var(--v6-paper); color: var(--v6-ink); border: 1px solid var(--v6-line); border-left: 5px solid #9fa3a9; max-width: 560px; }
.og.play > .og-c { border-left-color: #1f7a52; }
.og.me > .og-c { border-left-color: var(--v6-sel); box-shadow: 0 0 0 2px var(--v6-sel); }
.og-c b { font-size: 15px; color: var(--v6-ink); }
.og-en, .og-tag, .og-nam { font-size: 13px; color: var(--v6-ink-2); }
.og-tag { font-weight: 800; }
.og-note { font-size: 14px !important; color: var(--text-2) !important; margin-top: 8px !important; }

/* ── tấm vai (trên mặt navy của sheet / bảng) */
.rc { display: grid; gap: 8px; }
.rc-h { display: grid; gap: 2px; }
.rc-k, .rc-l { font-size: 12.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.rc-h h3 { margin: 0; font-size: 21px; color: var(--fg); letter-spacing: 0; text-transform: none; }
.rc-en, .rc-meta { font-size: 14px; color: var(--text-2); }
.rc-sec { display: grid; gap: 4px; }
.rc-jd, .rc-n2 { margin: 0; padding-left: 20px; font-size: 15px; color: var(--fg); line-height: 1.4; }
.rc-more { justify-self: start; }
.rc-one { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.rc-o { padding: 6px 8px; border-radius: 5px; background: var(--v6-paper); color: var(--v6-ink); border: 1px solid var(--v6-line); }
.rc-o.ev { border-color: var(--v6-lit-line); background: var(--v6-lit); }
.rc-o dt { font-size: 12.5px; font-weight: 900; color: #a11927; text-transform: uppercase; letter-spacing: .04em; }
.rc-o dd { margin: 0; font-size: 14px; color: var(--v6-ink); line-height: 1.35; }
.rc-now { display: grid; gap: 4px; }
.rc-star { margin: 0 !important; display: grid; gap: 2px; padding: 8px 10px; border-radius: 5px; background: var(--v6-lit); color: var(--v6-ink); border: 2px solid var(--v6-lit-line); }
.rc-star b { font-size: 13px; font-weight: 900; color: #a11927; text-transform: uppercase; letter-spacing: .04em; }
.rc-star span { font-size: 16px; font-weight: 800; color: var(--v6-ink); line-height: 1.35; }
.rc-star.hidden { background: var(--v6-flat); border-style: dashed; border-color: #94989e; }
.rc-star.hidden span { font-size: 14px; font-weight: 650; color: var(--v6-flat-ink); }
.rc-dim { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-2); }
.rc-dim li::marker { content: '◦  '; }
.rc-assumed { font-size: 13px !important; color: var(--text-3) !important; margin: 0 !important; }
.rc-act { display: flex; flex-wrap: wrap; gap: 6px; }
.rc.compact .rc-h h3 { font-size: 18px; }
.ug-log { margin: 0; padding-left: 18px; font-size: 14px; color: var(--fg); }
.ug-log li.ok::marker { color: #24807a; } .ug-log li.bad::marker { color: #c43c52; }

/* ── ⭐ lúc này (cột trái host) */
.rolechip { background: var(--navy-850); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; }
.rolechip h2 { margin: 0; font-size: 16px; color: var(--fg); }
.rch-s { margin: 0; font-size: 13px; color: var(--text-2); }
.rch-b { display: flex; gap: 6px; flex-wrap: wrap; }
.rolechip .rc-star span { font-size: 14.5px; }

/* ── thẻ khẩn 🚨 (host: lớp nổi · điện thoại: trong luồng) */
.urgentbox { position: fixed; z-index: 65; left: 10px; top: calc(var(--top-h) + var(--time-h) + 10px); width: clamp(280px, calc(50vw - 404px), 400px); max-height: calc(100dvh - var(--top-h) - var(--time-h) - var(--tool-h) - 20px); overflow: auto; display: grid; gap: 8px; padding: 8px; border-radius: 6px; background: var(--navy-850); border: 2px solid var(--line-2); box-shadow: var(--shadow); }
/* thẻ khẩn nằm trên cột trái (không đè hộp câu ở giữa màn) */
.ug-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--fg); }
.ug-head span { font-size: 13px; color: var(--text-2); }
.ugs { display: grid; gap: 8px; }
.ug { border-radius: 6px; overflow: hidden; border: 2px solid; display: grid; gap: 6px; padding: 0 0 8px; }
.ug.p1 { background: var(--v6-p1); color: var(--v6-p1-ink); border-color: var(--v6-p1-bar); }
.ug.p2 { background: var(--v6-p2); color: var(--v6-p2-ink); border-color: var(--v6-p2-bar); }
.ug.p3 { background: var(--v6-p3); color: var(--v6-p3-ink); border-color: var(--v6-p3-bar); }
.ug-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #ffffff; }
.ug.p1 .ug-h { background: var(--v6-p1-bar); } .ug.p2 .ug-h { background: var(--v6-p2-bar); } .ug.p3 .ug-h { background: var(--v6-p3-bar); }
.ug-p { font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.ug-pl { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.ug-t { flex: none; font-size: 13px; font-weight: 800; padding: 1px 8px; border-radius: 4px; background: #ffffff; color: var(--v6-ink); }
.ug-t b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ug-t.low { background: #fff1a8; }
.ug-t.free { background: transparent; color: #ffffff; font-weight: 700; }
.ug-x { margin: 0 !important; padding: 0 10px; font-size: 16px !important; font-weight: 800; line-height: 1.35; color: inherit !important; }
.ug-w { margin: 0 !important; padding: 0 10px; font-size: 14px !important; color: inherit !important; }
.ug-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
.ug-a { white-space: normal; line-height: 1.15; font-size: 14.5px; padding: 4px 6px; background: #ffffff; color: var(--v6-ink); border-color: var(--v6-ink-3); flex-direction: column; gap: 1px; }
.ug-a small { font-size: 12px; font-weight: 650; color: var(--v6-ink-2); }
.ug-a:not(:disabled):hover { background: #f0f1f6 !important; color: var(--v6-ink) !important; }
.ug-back { display: grid; gap: 3px; padding: 8px; border-radius: 6px; background: var(--v6-lit); color: var(--v6-ink); border: 2px solid var(--v6-lit-line); }
.ug-bk { white-space: normal; }
.ug-bt { font-size: 14px; font-weight: 750; color: var(--v6-ink); }
.ug-bh, .ug-q { font-size: 12.5px; color: var(--v6-ink-2); margin: 0; }
.ug-q { color: var(--fg); }

/* ── thanh 8 chặng (#rhbar trên cảnh 3D) */
.rhbar { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; pointer-events: none; }
.rhb { pointer-events: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: rgba(21, 25, 31, .94); color: #f5f6fc; border: 1px solid #525a65; box-shadow: var(--shadow); }
:root[data-theme="light"] .rhb { background: rgba(255, 255, 255, .97); color: #1f2251; border-color: #b3b7c2; }
.rhb-k { display: grid; line-height: 1.15; min-width: 0; }
.rhb-tag { font-size: 11.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #f6ced2; }
:root[data-theme="light"] .rhb-tag { color: #a11927; }
.rhb-k b { font-size: 15px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.rhb-cur { font-size: 12.5px; font-weight: 700; color: inherit; opacity: 1; }
.rhs-l { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 1 1 420px; min-width: 0; }
.app[data-rhp="1"] .rhbar, .app[data-rhp="1"] .confbar { right: calc(min(560px, 42vw) + 20px - var(--col-w)); }
.rhs { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 0; padding: 3px 4px; border-radius: 5px; background: #f5f6fc; color: #1f2251; border: 2px solid #cfd2da; }
.rhs-m { font-size: 13px; font-weight: 900; line-height: 1.1; }
.rhs-k { font-size: 11.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rhs.cur { background: #f6ced2; border-color: #a11927; box-shadow: 0 0 0 2px #f6ced2; }
.rhs.done.k-one { background: var(--v6-up); color: var(--v6-up-ink); border-color: var(--v6-up-line); }
.rhs.done.k-good { background: #fff0d6; color: #4d2f05; border-color: #d9a85a; }
.rhs.done.k-trap { background: var(--v6-down); color: var(--v6-down-ink); border-color: var(--v6-down-line); }
.rhs.done.k-skip, .rhs.done:not([class*="k-"]) { background: var(--v6-flat); color: var(--v6-flat-ink); }
.rhs.next { opacity: 1; background: #e9ebf1; color: #454b55; }
.rhb-t { font-size: 14px; font-weight: 800; padding: 2px 8px; border-radius: 4px; background: #f5f6fc; color: #1f2251; white-space: nowrap; }
.rhb-t b { font-variant-numeric: tabular-nums; }
.rhb-t.low { background: #fff1a8; }
.rhb-b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.rhb-b .btn { min-height: 44px; }
.rhb-rp.flash { animation: rpflash 1s ease-in-out 3; }
@keyframes rpflash { 50% { box-shadow: 0 0 0 4px #5fd19d; } }
.app[data-rh="1"] .banners, .app[data-cf="1"] .banners { top: var(--v6-top, 82px); }
@media (max-width: 1440px) and (min-width: 761px) { .rhb .lbl, .rhb-k, .rhb-last { display: none; } }

/* ── bảng chặng (#rhpanel, bên phải — không khoá app) */
.rhpanel { position: fixed; z-index: 45; top: calc(var(--top-h) + var(--time-h)); bottom: var(--tool-h); right: 0; padding: 8px 12px; display: grid; place-items: stretch end; pointer-events: none; }
.rhpanel .panel { pointer-events: auto; width: min(560px, 42vw); }
.rhp .p-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--navy-800); }
.rha { margin: 10px 0; padding: 10px 12px; border-radius: 5px; background: var(--v6-paper); color: var(--v6-ink); border: 2px solid var(--v6-line); display: grid; gap: 6px; }
.rha.k-one { border-color: var(--v6-up-line); background: var(--v6-up); color: var(--v6-up-ink); }
.rha.k-trap { border-color: var(--v6-down-line); background: var(--v6-down); color: var(--v6-down-ink); }
.rha p { margin: 0 !important; font-size: 15px !important; color: inherit !important; line-height: 1.4; }
.rha-h b { font-weight: 900; }
.rha-w.bad { font-weight: 650; }
.rha-cf, .rp-sheet .rha-cf, .qz-rp .rha-cf { margin: 6px 0 0 !important; padding: 6px 10px; border-radius: 5px; background: #e5edfb; color: #14305e !important; font-size: 14.5px !important; font-weight: 700; border-left: 5px solid #2c56a0; }
.rha-rp { display: grid; gap: 4px; }
.rha .rc-l { color: #a11927; }
.rh-need { margin: 8px 0 !important; padding: 8px 10px; border-radius: 5px; background: var(--v6-p2); color: var(--v6-p2-ink) !important; font-size: 15px !important; border: 2px dashed var(--v6-p2-bar); }
.rh-need.ok { background: var(--v6-up); color: var(--v6-up-ink) !important; border: 2px solid var(--v6-up-line); }
.rh-room { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.rh-room th, .rh-room td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; color: var(--fg); }
.rh-room thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); }
.rh-room tbody th small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); }

/* ── bảng gợn sóng 6 × 5 */
.rp { margin: 6px 0; }
.rp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 14px; color: var(--fg); }
.rp-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-k { font-size: 12.5px; font-weight: 850; padding: 0 8px; border-radius: 4px; }
.rp-k.up { background: var(--v6-up); color: var(--v6-up-ink); } .rp-k.down { background: var(--v6-down); color: var(--v6-down-ink); }
.rp-wrap { overflow-x: auto; }
.rp-t { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.rp-t th { font-size: 12px; font-weight: 850; color: var(--fg); text-align: center; padding: 2px; }
.rp-t thead th:first-child, .rp-t tbody th { width: 64px; text-align: left; }
.rp-c { height: 34px; border-radius: 4px; padding: 2px 4px; text-align: center; vertical-align: middle; border: 1px solid; font-size: 13px; }
.rp-c.up { background: var(--v6-up); color: var(--v6-up-ink); border-color: var(--v6-up-line); }
.rp-c.down { background: var(--v6-down); color: var(--v6-down-ink); border-color: var(--v6-down-line); }
.rp-c.flat { background: var(--v6-flat); color: var(--v6-flat-ink); border-color: #d3d6de; }
.rp-c.hit { box-shadow: 0 0 0 3px var(--v6-sel); }
.rp-v { font-weight: 900; font-variant-numeric: tabular-nums; }
.rp-v i { font-style: normal; margin-right: 2px; }
.rp-n { display: block; font-size: 11px; font-weight: 600; line-height: 1.2; }
.rp:not(.compact) .rp-c { height: 54px; }
.rp-cap, .rp-lede { font-size: 13.5px !important; color: var(--text-2) !important; margin: 4px 0 !important; }
.rp-notes { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.rp-notes li { font-size: 14px; padding: 3px 8px; border-radius: 4px; }
.rp-notes li.up { background: var(--v6-up); color: var(--v6-up-ink); } .rp-notes li.down { background: var(--v6-down); color: var(--v6-down-ink); } .rp-notes li.flat { background: var(--v6-flat); color: var(--v6-flat-ink); }
.rp-big { font-size: 14.5px !important; color: var(--fg) !important; }
.rp-big small { color: var(--text-2); }
.rp-last { margin-top: 6px; }
.qz-rp { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.qz-sheet.s-rh { max-width: 860px; }
.qz-sheet.s-rh.revealed .qz-opts { gap: 4px; }

/* ── Sổ 4-1-1 */
.v6-sheet { max-width: 1180px; }
.g4-sync { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 8px; font-size: 14px; color: var(--fg); }
.g4-pc { font-size: 15px; padding: 1px 10px; border-radius: 4px; background: var(--v6-flat); color: var(--v6-flat-ink); }
.g4-pc.ok { background: var(--v6-up); color: var(--v6-up-ink); } .g4-pc.low { background: var(--v6-down); color: var(--v6-down-ink); }
.g4-sync .bad { color: var(--neg-text, #ffc4cc); font-weight: 800; }
.g4-rule { color: var(--text-2); font-style: italic; }
.g4-cols { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .g4-cols { grid-template-columns: minmax(0, 1fr); } }
.gps { display: grid; gap: 6px; }
.gps-g { margin: 0 !important; display: grid; gap: 2px; padding: 8px 10px; border-radius: 5px; background: var(--v6-lit); color: var(--v6-ink) !important; border: 2px solid var(--v6-lit-line); font-size: 15px !important; }
.gps-g span { font-size: 12.5px; font-weight: 900; color: #a11927; text-transform: uppercase; letter-spacing: .04em; }
.gps-p, .gps-s { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.gps-p > li > details { border-radius: 5px; background: var(--v6-paper); color: var(--v6-ink); border: 1px solid var(--v6-line); }
.gps-p summary { cursor: pointer; padding: 8px 10px; font-size: 14.5px; min-height: 44px; display: block; }
.gps-p summary b { color: #a11927; margin-right: 4px; }
.gps-s { padding: 0 10px 8px 22px; list-style: decimal; font-size: 14px; color: var(--v6-ink-2); }
.g4-tests ul { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--fg); }
.g4-tb { font-size: 14px !important; color: var(--text-2) !important; }
.g4 { display: grid; gap: 4px; }
.g4r { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.g4l { font-size: 13px; font-weight: 850; color: var(--fg); align-self: center; }
.g4ch { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); }
.g4g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.g4c { min-height: 56px; padding: 4px 6px; border-radius: 4px; text-align: left; font-size: 13px; line-height: 1.25; cursor: pointer; background: #ffffff; color: var(--v6-ink); border: 1px solid var(--v6-line); }
.g4c.kd { background: #f7f8fc; }
.g4c.lit { background: var(--v6-lit); border: 2px solid var(--v6-lit-line); }
.g4c.focus { box-shadow: inset 0 0 0 2px var(--v6-lit-line); font-weight: 750; }
.g4c.mine { background: #fde7ea; font-weight: 800; }
.g4c.mine::before { content: '✍ '; }
.g4c.orphan { text-decoration: underline wavy #c43c52; text-underline-offset: 3px; border-bottom: 3px solid #c43c52; }
.g4c.hit { border: 2px solid #1f7a52; background: var(--v6-up); color: var(--v6-up-ink); }
.g4c.sel { outline: 3px solid var(--v6-sel); outline-offset: 1px; }
.g4c:hover { border-color: var(--v6-sel); }
.g4-detail { margin-top: 10px; display: grid; gap: 8px; }
.g4-sel { margin: 0 !important; font-size: 15px !important; color: var(--fg) !important; }
.g4-sel .bad, .g4-hits { color: var(--fg); }
.g4-hits { font-size: 14px !important; margin: 0 !important; }
.g4-hint { font-size: 14px !important; color: var(--text-2) !important; margin: 0 !important; }
.g4-fill { display: grid; gap: 4px; padding: 8px 10px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); }
.g4-fill label { font-size: 14px; color: var(--fg); }
.g4-fill input, .g4-fill select { min-height: 44px; border-radius: 5px; padding: 6px 10px; font-size: 16px; background: #ffffff; color: var(--v6-ink); border: 1px solid var(--v6-ink-3); }
.g4-fill input::placeholder { color: #62666e; }
.g4-pl { font-size: 13px !important; color: var(--text-2) !important; }
.g4-fb { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g4-cc { font-size: 13px; font-weight: 800; color: var(--text-2); }
.g4-cc.over { color: var(--neg-text, #ffc4cc); }
.g4-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
/* cây 5 tầng */
.tr { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tr-s { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px; align-items: center; }
.tr-b { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 5px; border: 2px solid #9fa3a9; background: var(--v6-paper); color: var(--v6-ink); font-weight: 850; font-size: 14px; cursor: pointer; }
.tr-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--v6-ink); color: #f5f6fc; font-size: 12px; }
.tr-s.on .tr-b { background: var(--v6-sel); color: #ffffff; border-color: var(--v6-sel); }
.tr-s.on .tr-n { background: #ffffff; color: var(--v6-sel); }
.tr-s.none .tr-b { opacity: .6; }
.tr-x { font-size: 14px; color: var(--fg); line-height: 1.3; }
.tr-me { grid-column: 2; margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.t-team .tr-b { border-color: #2463b8; } .t-dept .tr-b { border-color: #7342c9; } .t-site .tr-b { border-color: #b5541b; } .t-group .tr-b { border-color: #1f7a52; }

/* ── hội nghị: thanh 8 pha (#confbar) */
.confbar { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; pointer-events: none; }
.app[data-rh="1"] .confbar { top: var(--v6-rhh, 84px); }
.cfb { pointer-events: auto; display: grid; gap: 4px; padding: 6px 8px; border-radius: 6px; background: rgba(21, 25, 31, .94); color: #f5f6fc; border: 1px solid #525a65; }
:root[data-theme="light"] .cfb { background: rgba(255, 255, 255, .97); color: #1f2251; border-color: #b3b7c2; }
.cf-l { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.cf-s { min-width: 0; padding: 2px 4px; border-radius: 4px; background: #e9ebf1; color: #454b55; border: 2px solid #cfd2da; display: grid; }
.cf-s.done { background: var(--v6-up); color: var(--v6-up-ink); border-color: var(--v6-up-line); }
.cf-s.now { background: #f6ced2; color: #1f2251; border-color: #a11927; }
.cf-s.mine { box-shadow: inset 0 -4px 0 #2463b8; }
.cf-n { font-size: 11.5px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-at { font-size: 10.5px; font-weight: 700; }
.cf-now { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13.5px; color: inherit; }
.cf-now > b { font-size: 14.5px; }
.cf-lead b { color: inherit; }
.cf-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cf-where { font-weight: 700; }

/* ── tổng kết Diễn tập */
.sm-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.sm-kpi > div { display: grid; padding: 8px 10px; border-radius: 5px; background: var(--v6-paper); color: var(--v6-ink); border: 1px solid var(--v6-line); }
.sm-kpi b { font-size: 24px; font-weight: 900; color: var(--v6-ink); }
.sm-kpi span { font-size: 13px; color: var(--v6-ink-2); }
@media (max-width: 900px) { .sm-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sm-t th, .sm-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--fg); }
.sm-t thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); }
.sm-t tr.ok td, .sm-t tr.ok th { background: var(--v6-up); color: var(--v6-up-ink); }
.sm-t tr.bad td, .sm-t tr.bad th { background: var(--v6-down); color: var(--v6-down-ink); }
.sm-t tr.ok .muted-i, .sm-t tr.bad .muted-i { color: inherit; }
.sm-note { font-size: 13px !important; color: var(--text-2) !important; }
.sm-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }

/* ── màn hẹp / điện thoại dọc (host) */
@media (max-width: 760px) {
  .urgentbox { left: 8px; right: 8px; width: auto; top: calc(var(--top-h) + var(--time-h) + 6px); max-height: 60dvh; }
  .app[data-rh="1"] ~ .urgentbox { top: calc(var(--top-h) + var(--time-h) + 60px); }
  .rhb { gap: 4px; padding: 4px 6px; }
  .rhb-k { display: none; }
  .rhs-k { font-size: 10px; }
  .rhb .lbl { display: none; }
  .rhb-last { display: none; }
  .rhpanel { top: auto; bottom: var(--tool-h); left: 0; right: 0; padding: 0; place-items: end stretch; }
  .rhpanel .panel { width: 100%; max-height: 55dvh; border-radius: 6px 6px 0 0; }
  .g4r { grid-template-columns: 48px minmax(0, 1fr); }
  .g4r .g4g.kd { grid-column: 2; }
  .g4hd .g4ch.kd { display: none; }
  .tr-s { grid-template-columns: minmax(0, 1fr); }
  .rc-one { grid-template-columns: minmax(0, 1fr); }
  .cf-at { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rhb-rp.flash { animation: none; } }

/* ── vá sau tự kiểm (a): toast không đè thanh chặng · hộp câu chặng khi lộ: 2 cột (đáp án | vì sao + gợn sóng) cho vừa 900 px */
.app[data-rh="1"] .toasts, .app[data-cf="1"] .toasts, .app[data-rh="1"].panel-open .toasts { top: calc(var(--v6-top, 82px) + 4px); }
.rp-corner { font-size: 10.5px; font-weight: 800; white-space: nowrap; }
@media (min-width: 1100px) {
  .qz-sheet.s-rh.revealed { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 18px; align-items: start; }
  .qz-sheet.s-rh.revealed > .qz-top, .qz-sheet.s-rh.revealed > .qz-ask, .qz-sheet.s-rh.revealed > h2, .qz-sheet.s-rh.revealed > .qz-foot { grid-column: 1 / -1; }
  .qz-sheet.s-rh.revealed > .qz-opts { grid-column: 1; grid-row: 4; }
  .qz-sheet.s-rh.revealed > .qz-why { grid-column: 2; grid-row: 4; margin-top: 0; }
  .qz-sheet.s-rh.revealed .qz-rp { margin-top: 4px; }
}
.qz-sheet.s-rh.revealed .qz-opt { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.qz-sheet.s-rh.revealed .rp.compact .rp-c { height: 28px; }

/* ───────── ĐIỆN THOẠI (phone.html · .ph) — giấy tự chứa màu thắng `.ph-card p { color: var(--text-2) }` của styles-phone.css */
.ph .ph-card .ug p, .ph .ph-card .ug p b, .ph .ph-card .ug-back, .ph .ph-card .ug-back b, .ph .ph-card .ug-back span { color: inherit; }
.ph .ph-card .ug.p1 { color: var(--v6-p1-ink); } .ph .ph-card .ug.p2 { color: var(--v6-p2-ink); } .ph .ph-card .ug.p3 { color: var(--v6-p3-ink); }
.ph .ph-card .ug-back { color: var(--v6-ink); }
.ph .ph-card .rc-star, .ph .ph-card .rc-star b, .ph .ph-card .rc-star span { color: var(--v6-ink); }
.ph .ph-card .rc-star b { color: #a11927; }
.ph .ph-card .rc-star.hidden span { color: var(--v6-flat-ink); }
.ph .ph-card .rha-cf, .ph .ph-card p.rha-cf { color: #14305e; }
.ph .ph-card .rh-need { color: var(--v6-p2-ink); } .ph .ph-card .rh-need.ok { color: var(--v6-up-ink); }
.ph .ph-card .gps-g, .ph .ph-card .gps-g b { color: var(--v6-ink); } .ph .ph-card .gps-g span { color: #a11927; }
.ph .ph-card .g4-sync { color: var(--fg); font-size: 14px; margin: 0 0 8px; }
.ph .ph-card .g4-sync .bad { color: var(--bad); }
.ph .ph-card .rc-assumed { color: var(--text-3); }
.ph .rc-h h3 { font-size: 19px; }
.ph .rc-jd, .ph .rc-n2 { font-size: 15px; }
.ph .ug-a, .ph .ug-bk, .ph .rc-more { min-height: 48px; border-radius: 5px; border: 1px solid var(--v6-ink-3); background: #ffffff; color: var(--v6-ink); font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.ph .ug-bk { background: #f6ced2; border-color: #a11927; color: var(--v6-ink); padding: 4px 10px; width: 100%; }
.ph .rc-more { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); padding: 0 12px; }
.ph .ug-a:disabled, .ph .ug-bk:disabled { opacity: 1; background: #e4e6ec; color: #454b55; }
.ph .ugs { gap: 10px; }
.ph .ug-b { gap: 6px; }
.v6pick .v6r-list { display: grid; gap: 8px; margin: 8px 0; }
.v6r { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border-radius: 6px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--fg); text-align: left; font-size: 16px; font-weight: 800; cursor: pointer; }
.v6r:active { background: var(--surface-3); }
.v6r-e { font-size: 24px; text-align: center; }
.v6r-t small { display: block; font-size: 13px; font-weight: 650; color: var(--text-2); }
.v6rc-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.v6rh .rhs-l.compact { margin: 4px 0 8px; }
.ph .rhs-l.compact .rhs { padding: 2px 1px; }
.ph .rhs-l.compact .rhs-k { font-size: 9.5px; }
.ph .rp-t th { font-size: 10.5px; } .ph .rp-t thead th:first-child, .ph .rp-t tbody th { width: 46px; } .ph .rp-c { height: 26px; font-size: 12px; padding: 1px; } .ph .rp-corner { font-size: 9px; }
.ph .rp-t { border-spacing: 2px; }
.v6gps { margin: 0 0 8px; } .v6gps > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; color: var(--fg); font-size: 15px; }
.v6g4 { overflow-x: auto; padding-bottom: 4px; }
.v6g4 .g4 { min-width: 520px; }
.ph .g4r { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); }
.ph .g4c { min-height: 52px; font-size: 12.5px; }
.ph .g4-fill { background: var(--surface-2); border-color: var(--line-2); }
.ph .g4-fill label, .ph .g4-sel { color: var(--fg); font-size: 15px; }
.ph .g4-fill input, .ph .g4-fill select { font-size: 16px; min-height: 48px; }
.ph .tr-s { grid-template-columns: 120px minmax(0, 1fr); }
.ph .tr-x { font-size: 13.5px; }
.v6sum-l { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.v6sum-l li { padding: 6px 10px; border-radius: 5px; font-size: 15px; background: var(--v6-flat); color: var(--v6-flat-ink); }
.v6sum-l li.k-one { background: var(--v6-up); color: var(--v6-up-ink); } .v6sum-l li.k-trap { background: var(--v6-down); color: var(--v6-down-ink); } .v6sum-l li.k-good { background: #fff0d6; color: #4d2f05; }
.v6sum-l li b { color: inherit; }
/* tab 3D: canvas trọn khung (C6a vẽ), nút «Tôi ở đâu» nổi dưới */
.ph-3d { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: #0f1216; padding-bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
.ph3d-wrap { position: relative; flex: 1; min-height: 0; }
#ph3d { display: block; width: 100%; height: 100%; touch-action: none; }
.ph3d-ui .ph-btn { min-height: 48px; }
/* C6a-5 (c): xoay ngang ở tab 3D — ẩn thanh trên + thanh pha để canvas gần trọn màn */
@media (orientation: landscape) and (max-height: 560px) {
  .ph.on3d .ph-top, .ph.on3d .ph-phase { display: none; }
  .ph.on3d .ph-nav { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .ph.on3d .ph-nav .nv { min-height: 44px; }
  .ph.on3d .ph3d-hint { display: none; }
}
.ph3d-ui { position: absolute; left: 10px; right: 10px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph3d-hint { margin: 0; flex: 1; min-width: 0; padding: 6px 10px; border-radius: 5px; background: rgba(21, 25, 31, .92); color: #f5f6fc; font-size: 14px; font-weight: 700; }
.ph3d-wrap .ph3d-rot { bottom: 76px; }   /* L-v6-05 (D6): gợi ý «Xoay ngang» (scene3d.js, bottom 12px) che nhãn nút «📍 Tôi ở đâu» khi điện thoại đứng dọc */
.ph3d-empty { position: absolute; left: 16px; right: 16px; top: 16px; margin: 0; padding: 12px 14px; border-radius: 6px; background: #f5f6fc; color: #1f2251; font-size: 15px; line-height: 1.4; }
.ph-main[hidden] { display: none !important; }
/* Hậu tiệc (bảng debrief bên phải, khoá app): thanh chặng thu vào phần cảnh còn thấy — chỉ chip + đồng hồ (nút ở chân bảng Hậu tiệc) */
@media (min-width: 761px) {
  .app[data-phase="debrief"].panel-open .rhbar { right: calc(min(760px, 56vw) + 20px - var(--col-w)); }
  .app[data-phase="debrief"].panel-open .rhb-b, .app[data-phase="debrief"].panel-open .rhb-k { display: none; }
  .app[data-phase="debrief"].panel-open .rhs-k { font-size: 10px; }
}
/* vá tự kiểm (d): ô chọn cha dài làm tràn ngang trên điện thoại · chip chặng gọn (chỉ chip hiện tại có chữ) · thanh 4 tab */
.g4-fill { grid-template-columns: minmax(0, 1fr); }
.g4-fill input, .g4-fill select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.rhs-l.compact .rhs:not(.cur) .rhs-k { display: none; }
.rhs-l.compact .rhs.cur { flex: 2.4 1 0; }
.rhs-l.compact .rhs.cur .rhs-k { font-size: 11.5px; }
.ph-nav.n4 .nv { font-size: 14.5px; padding: 0 4px; line-height: 1.15; }
/* host ở màn điện thoại dọc: thanh chặng 1 hàng gọn (chip hiện tại có chữ, chip khác chỉ dấu) · nút nằm ở bảng chặng / Hậu tiệc */
@media (max-width: 760px) {
  .rhb { flex-wrap: nowrap; }
  .rhs-l { flex: 1 1 auto; min-width: 0; }
  .rhs:not(.cur) .rhs-k { display: none; }
  .rhs.cur { flex: 2.6 1 0; }
  .rhs.cur .rhs-k { font-size: 11px; }
  .rhb-b { display: none; }
  .rhb-t { font-size: 12.5px; padding: 2px 6px; }
}
/* màn thấp (≤ 820 px cao, vd 1366×768): thanh 8 pha 2 dòng — bỏ dòng «Dẫn» + «Tôi ở đâu» (nút 📍 ở cột trái), chip nhỏ */
@media (max-height: 820px) and (min-width: 761px) {
  .cfb { gap: 2px; padding: 4px 6px; }
  .cf-lead, .cf-where { display: none; }
  .cf-now { font-size: 12.5px; }
  .cf-now > span:not(.cf-chips) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
  .cf-chips .chip { font-size: 11.5px; }
  .cf-at { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) { .ph.on3d { max-width: none; } }
.ph .rp-corner, .rp.compact .rp-corner { font-size: 0; } .ph .rp-corner::after, .rp.compact .rp-corner::after { content: 'Mốc'; font-size: 10px; }
/* L-v6-07 (D6): chế độ cũ + vai thêm nhóm 👤 📒 🌊 → thanh điều khiển 18 nút rộng 1538 px (màn 1440) · 1612 px (1366) · 2277 px (1920) → cắt 2 đầu («Tạm dừng», «Chơi lại»). Có nhóm vai → ẩn nhãn phụ ở mọi cỡ desktop (rộng còn 1234 px, như ≤ 1280). */
@media (min-width: 761px) { .toolbar:has(.v6-grp:not([hidden])) :is(.lbl-opt, .lbl-2) { display: none; } }

/* L-v6-02 / L-v6-09 (C6b, sau D6): nút ⏸ trong hộp câu · thanh thời gian lộ «vì sao» dày + nhãn đếm ngược · chế độ giữ tới khi bấm «Tiếp» */
.qz-foot .qz-pause { order: -1; }
.qz-bar { height: 8px; }
.qz-rl { font-size: 13.5px; font-weight: 750; color: var(--fg); white-space: nowrap; }
.qz-rl.hold { margin-right: auto; white-space: normal; padding: 4px 10px; border-radius: 5px; background: var(--v6-lit); color: var(--v6-ink); border: 1px solid var(--v6-lit-line); }