/* THE ONE CAPELLA v5 «Trải nghiệm 5 sao» (gói C5) — dùng chung host (index.html) + điện thoại (phone.html), nạp SAU styles-v4.css.
   5 đường trải nghiệm · hộp trắc nghiệm 5 đáp án · Domino Lớn · tab «Họ sẽ nhớ gì» · bảng sao.
   Luật tương phản giữ nguyên: mọi chữ nằm trên nền tự chứa của component; màu persona (--pc0..3) chỉ tô HÌNH (đường, chấm, sao, viền);
   số ★ trong chấm dùng --pc-ink (đo ≥ 5,2:1 trên mọi màu chấm ở cả 2 theme). Ô «ONE/bẫy» dùng giấy xanh/hồng + mực riêng ở CẢ 2 theme. */

:root {
  --pc0: #ff7a9a; --pc1: #f0c25a; --pc2: #6fa8ff; --pc3: #5fd19d; --pc-ink: #1f252d;
  --v5-one-bg: #e2f1ef; --v5-one-ink: #0f3f3b; --v5-one-line: #24807a;
  --v5-trap-bg: #fbe4e7; --v5-trap-ink: #6a1424; --v5-trap-line: #c24a5e;
  --v5-good-bg: #eff1f6; --v5-good-ink: #2e333a;
  --v5-warn: var(--vlu-earth-glow); --v5-bad-text: #ffc4cc; --v5-band: rgba(250, 247, 242, .045); --v5-band-5: rgba(95, 209, 157, .10); --v5-band-1: rgba(255, 122, 154, .08);
  --v5-scope-khau: var(--vlu-red-glow); --v5-scope-dept: #6fa8ff; --v5-scope-moment: #ff9aa8;
}
:root[data-theme="light"] {
  --pc0: #c2335a; --pc1: #8a5f00; --pc2: #2463b8; --pc3: #1f7a52; --pc-ink: #ffffff;
  --v5-warn: #94420f; --v5-bad-text: #9b1c31; --v5-band: rgba(31, 37, 45, .035); --v5-band-5: rgba(31, 122, 82, .09); --v5-band-1: rgba(194, 51, 90, .07);
  --v5-scope-khau: var(--vlu-red-ink); --v5-scope-dept: #2463b8; --v5-scope-moment: #9b1c31;
}
.pc0 { --pcc: var(--pc0); } .pc1 { --pcc: var(--pc1); } .pc2 { --pcc: var(--pc2); } .pc3 { --pcc: var(--pc3); }
.pcb0 { background: var(--pc0); } .pcb1 { background: var(--pc1); } .pcb2 { background: var(--pc2); } .pcb3 { background: var(--pc3); }

/* ───────── 5 đường trải nghiệm (host: #journey.pj trong dải #livedash) */
.app:not([data-live="1"]) .livedash { grid-template-columns: minmax(0, 1fr); }
.app:not([data-live="1"]) .dash-metrics, .app:not([data-live="1"]) .col-metrics { display: none !important; }
.journey.pj { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 4px; }
.pj-head { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pj-head h2 { margin: 0; flex: none; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); font-weight: 850; }
.pj-chipwrap { flex: 1; min-width: 0; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pj-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 10px 2px 7px; border-radius: 4px; cursor: pointer;
  background: var(--navy-800); color: var(--fg); border: 2px solid var(--pcc, var(--line-2)); font-size: 13px; font-weight: 750; white-space: nowrap; }
.pj-chip .pj-ic { font-size: 15px; line-height: 1; }
.pj-chip .pj-st { font-weight: 900; font-variant-numeric: tabular-nums; }
.pj-chip.sum { border-color: var(--fg); }
.pj-chip.on { background: var(--pcc); color: var(--pc-ink); }
.pj-chip.sum.on { background: var(--inv-bg); color: var(--inv-fg); }
.pj-chip:not(.on):hover { background: var(--navy-700); }
.pj-narrow .pj-chip:not(.on) .pj-lb { display: none; }
.pj-xs .pj-head h2 { display: none; }
.pj-cap { flex: none; margin: 0; font-size: 13.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.pj-cap .pj-c.bad { color: var(--v5-bad-text); }
.pj-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.pj-chart { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pj-chart svg { position: absolute; inset: 0; }
.pj-side { flex: none; width: min(400px, 40%); overflow-y: auto; padding: 2px 2px 4px 12px; border-left: 1px solid var(--line); scrollbar-width: thin; }
.pj-mem h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.pjm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pjm { padding: 5px 8px; border-radius: 5px; background: var(--navy-800); border-left: 4px solid var(--pcc, var(--line-2)); color: var(--fg); font-size: 13.5px; line-height: 1.3; }
.pjm-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.pjm-h b { font-variant-numeric: tabular-nums; }
.pjm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pjm-who, .pjm-l { color: var(--text-2); font-weight: 650; }
.pjm-e { font-size: 12px; padding: 0 7px; }
.pjm q { display: block; quotes: none; margin-top: 2px; font-style: italic; font-weight: 650; color: var(--fg); }
.pjm.bad q { color: var(--v5-bad-text); }
/* SVG */
.pj-svg .pjb { fill: var(--v5-band); }
.pj-svg .pjb.b2, .pj-svg .pjb.b4 { fill: transparent; }
.pj-svg .pjb.b5 { fill: var(--v5-band-5); }
.pj-svg .pjb.b1 { fill: var(--v5-band-1); }
.pj-svg .pjy, .pj-svg .pjax { fill: var(--text-2); font: 700 11px/1 var(--font); }
.pj-svg.compact .pjy, .pj-svg.compact .pjax { font-size: 10px; }
.pj-svg .pjsep { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.pj-svg .pjl { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pj-svg .pjl.thick { stroke: var(--pcc); stroke-width: 3.4; }
.pj-svg .pjl.thin { stroke: var(--pcc); stroke-width: 1.8; opacity: .9; }
.pj-svg .pjl.sum { stroke: var(--fg); stroke-width: 3.4; }
.pj-svg .pjl.ghost { stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; }
.pj-svg .pjnow { stroke: var(--accent-text); stroke-width: 1; stroke-dasharray: 3 3; }
.pj-svg .pjdot { fill: var(--pcc); stroke: var(--navy-850); stroke-width: 1.5; }
.pj-svg .pjstar { fill: var(--pcc); stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; }
.pj-svg .pjd.bad .pjstar { stroke: var(--v5-bad-text); stroke-dasharray: 3 2; }
.pj-svg .pjn { fill: var(--pc-ink); font: 900 10.5px/1 var(--font); pointer-events: none; }
.pj-svg .pjn.big { font-size: 12px; }
.pj-svg.compact .pjn { font-size: 9px; }
.pj-svg .pjt { fill: var(--fg); font: 800 11px/1 var(--font); paint-order: stroke; stroke: var(--navy-850); stroke-width: 3px; stroke-linejoin: round; }
.pj-svg .pjt.bad { fill: var(--v5-bad-text); }
@media (max-height: 820px) and (min-width: 761px) { .pj-cap { font-size: 12.5px; } .pj-chip { min-height: 26px; font-size: 12.5px; } }
@media (max-width: 760px) { .pj-side { display: none; } .pj-cap { display: none; } .journey.pj .pj-head h2 { display: none; } .pj-chip { min-height: 28px; } }

/* ───────── hộp trắc nghiệm (#quiz — trên mọi bảng) */
.quiz { z-index: 60; }
.qz-sheet { position: relative; width: min(780px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--navy-850); color: var(--fg);
  border: 2px solid var(--qz-c, var(--line-2)); border-radius: 6px; box-shadow: var(--shadow); padding: 16px 20px 14px; scrollbar-width: thin; }
.qz-sheet.s-khau { --qz-c: var(--v5-scope-khau); } .qz-sheet.s-dept { --qz-c: var(--v5-scope-dept); } .qz-sheet.s-moment { --qz-c: var(--v5-scope-moment); }
.qz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.qz-k { display: inline-block; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; background: var(--inv-bg); color: var(--inv-fg); }
.qz-own { font-size: 14px; color: var(--text-2); }
.qz-own b { color: var(--fg); }
.qz-clock { margin-left: auto; display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.qz-clock b { font-size: 30px; font-weight: 900; color: var(--fg); line-height: 1; }
.qz-clock small { font-size: 13px; color: var(--text-2); font-weight: 700; }
.qz-clock.low b { color: var(--v5-warn); }
.qz-ask { margin: 8px 0 2px; font-size: 13px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.qz-sheet h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.25; color: var(--fg); }
.qz-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.qz-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 54px; padding: 7px 12px 7px 8px; text-align: left; cursor: pointer;
  background: var(--navy-800); color: var(--fg); border: 2px solid var(--line-2); border-radius: 5px; font-size: 17px; font-weight: 650; line-height: 1.3; }
.qz-opt:not([aria-disabled="true"]):hover { border-color: var(--qz-c, var(--hover-line, var(--line-2))); background: var(--navy-700); }
.qz-l { width: 36px; height: 36px; border-radius: 5px; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: var(--inv-bg); color: var(--inv-fg); }
.qz-v { display: grid; grid-template-columns: 96px 26px; align-items: center; gap: 6px; }
.qz-v i { display: block; height: 10px; border-radius: 5px; background: var(--qz-c, var(--accent-text)); min-width: 2px; }
.qz-v b { font-size: 16px; font-weight: 900; text-align: right; color: var(--fg); }
.qz-tag { grid-column: 2 / -1; font-size: 13px; font-weight: 850; }
.qz-opt.k-one { background: var(--v5-one-bg); color: var(--v5-one-ink); border-color: var(--v5-one-line); }
.qz-opt.k-trap { background: var(--v5-trap-bg); color: var(--v5-trap-ink); border-color: var(--v5-trap-line); }
.qz-opt.k-good { background: var(--v5-good-bg); color: var(--v5-good-ink); border-color: var(--line-2); }
.qz-opt.k-one .qz-v b, .qz-opt.k-trap .qz-v b, .qz-opt.k-good .qz-v b { color: inherit; }
.qz-opt.k-one .qz-l { background: var(--v5-one-ink); color: #ffffff; } .qz-opt.k-trap .qz-l { background: var(--v5-trap-ink); color: #ffffff; } .qz-opt.k-good .qz-l { background: var(--v5-good-ink); color: #ffffff; }
.qz-opt.picked { box-shadow: 0 0 0 3px var(--fg); }
.revealed .qz-opt { cursor: default; }
.qz-why:empty { display: none; }
.qz-why { margin-top: 10px; padding: 9px 12px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); }
.qz-why p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.35; color: var(--fg); }
.qz-why p:last-child { margin-bottom: 0; }
.qz-why .qz-w.bad { color: var(--v5-bad-text); }
.qz-res b { font-size: 16px; }
.qz-res.k-one b { color: var(--fg); } .qz-res.k-trap b { color: var(--v5-bad-text); }
.qz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 12px; }
.qz-foot .btn { min-height: 48px; }
.qz-hint { margin-right: auto; font-size: 13.5px; color: var(--text-2); }
.qz-n { font-size: 15px; font-weight: 800; color: var(--fg); }
.qz-bar { flex: 1; min-width: 120px; height: 6px; border-radius: 3px; background: var(--navy-700); overflow: hidden; }
.qz-bar i { display: block; height: 100%; width: 0; background: var(--qz-c, var(--accent-text)); transition: width linear; }
.reduce-motion .qz-bar i { transition: none; }
@media (max-height: 820px) and (min-width: 761px) { .qz-sheet h2 { font-size: 20px; margin-bottom: 8px; } .qz-opt { min-height: 48px; font-size: 16px; padding-top: 5px; padding-bottom: 5px; } .qz-l { width: 32px; height: 32px; } }
@media (max-width: 760px) { .qz-sheet { padding: 12px 12px 10px; } .qz-sheet h2 { font-size: 19px; } .qz-opt { font-size: 15.5px; grid-template-columns: 36px minmax(0, 1fr); } .qz-v { grid-column: 2 / -1; } }

/* ───────── Domino Lớn (màn mở · Hậu tiệc · Khép vòng) */
.bc5 { margin: 8px 0 12px; padding: 10px 12px; border-radius: 6px; background: var(--navy-800); border: 1px solid var(--line-2); color: var(--fg); text-align: left; }
.bc5-h h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.bc5-intro { margin: 0 0 6px; padding-left: 18px; font-size: 14.5px; line-height: 1.35; color: var(--fg); }
.bc5-sum { margin: 0 0 4px; font-size: 14px; color: var(--text-2); } .bc5-sum b { color: var(--fg); }
.bc5-row { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; align-items: stretch; gap: 4px; }
.bc5-p { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bc5-ar { flex: none; align-self: center; margin-top: -40px; font-size: 18px; font-weight: 900; color: var(--text-2); }
.bc5-tile { position: relative; width: 46px; height: 68px; border-radius: 5px; display: grid; grid-template-rows: auto 1fr; place-items: center; padding: 4px 0;
  background: var(--cap-paper); color: var(--cap-ink); border: 2px solid var(--cap-line); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transform-origin: 85% 100%; transition: transform .5s ease; }
.bc5-k { font-size: 12px; font-weight: 900; }
.bc5-i { font-size: 22px; line-height: 1; }
.bc5-p.up .bc5-tile { background: var(--v5-one-bg); color: var(--v5-one-ink); border-color: var(--v5-one-line); }
.bc5-p.down .bc5-tile { background: var(--v5-trap-bg); color: var(--v5-trap-ink); border-color: var(--v5-trap-line); transform: rotate(52deg) translate(6px, 4px); }
.bc5-p.down.pulled .bc5-tile { transform: rotate(64deg) translate(8px, 6px); }
.reduce-motion .bc5-tile { transition: none; }
/* D5 · L-v5-05: quân ngã xoay 52–64° (gốc 85 % 100 %) làm góc dưới thò xuống 9–12 px đè lên tên quân → chừa chỗ cho MỌI quân của hàng có quân ngã (hàng vẫn thẳng) */
.bc5-row:has(.bc5-p.down) .bc5-tile { margin-bottom: 12px; }
.bc5-b { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; width: 100%; }
.bc5-n { font-size: 13px; line-height: 1.2; color: var(--fg); }
.bc5-l { font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.bc5-v b { font-size: 14.5px; color: var(--fg); font-variant-numeric: tabular-nums; }
.bc5-bar { display: block; width: 86%; height: 6px; border-radius: 3px; background: var(--navy-700); overflow: hidden; }
.bc5-bar i { display: block; height: 100%; background: var(--accent-text); }
.bc5-p.up .bc5-bar i { background: var(--v5-one-line); } .bc5-p.down .bc5-bar i { background: var(--v5-trap-line); }
.bc5-th { font-size: 11.5px; color: var(--text-2); line-height: 1.25; }
.bc5-s { font-size: 12px; font-weight: 900; padding: 0 7px; border-radius: 4px; }
.bc5-s.up { background: var(--v5-one-bg); color: var(--v5-one-ink); } .bc5-s.down { background: var(--v5-trap-bg); color: var(--v5-trap-ink); }
.bc5-r { font-size: 11.5px; color: var(--text-2); } .bc5-r b { color: var(--fg); }
.bc5-fall { margin: 2px 0 4px; font-size: 14px; color: var(--fg); } .bc5-fall b { color: var(--v5-bad-text); }
.bc5-close { margin: 4px 0 2px; font-size: 14.5px; font-weight: 800; color: var(--fg); }
.bc5-note { margin: 0; font-size: 12px; font-style: italic; color: var(--text-2); }
.bc5-f { margin: 2px 0 4px; font-size: 13px; color: var(--text-2); } .bc5-f summary { cursor: pointer; font-weight: 800; color: var(--fg); min-height: 28px; }
.bc5-f ul { margin: 4px 0 0; padding-left: 18px; } .bc5-f li b { color: var(--fg); }
.bc5.compact .bc5-intro, .bc5.compact .bc5-l { font-size: 12.5px; }
.in-big { margin: 10px auto 4px; max-width: 980px; }
.in-big .bc5 { margin: 0; }
.ch-big { margin: 0 0 10px; }
.ch-big .bc5 { margin: 4px 0 0; }
@media (max-width: 760px) {
  .bc5-row { flex-wrap: wrap; gap: 8px 4px; }
  .bc5-p { flex: 1 1 28%; }
  .bc5-ar { display: none; }
}

/* ───────── Hậu tiệc: tab · dòng sao · «Họ sẽ nhớ gì» · bảng trắc nghiệm */
.db-tabs { display: flex; gap: 6px; margin: 8px 0 0; }
.db-tab { min-height: 40px; padding: 0 14px; border-radius: 5px; border: 2px solid var(--line-2); background: var(--navy-800); color: var(--fg); font-weight: 800; font-size: 15px; cursor: pointer; }
.db-tab.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.db-tab:not(.on):hover { background: var(--navy-700); }
.db-v5 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 14.5px; color: var(--text-2); }
.db-v5 b { color: var(--fg); font-variant-numeric: tabular-nums; }
.rm-lede { margin: 0 0 6px; font-size: 15px; color: var(--fg); line-height: 1.4; }
.rm-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 14.5px; color: var(--text-2); } .rm-sum b { color: var(--fg); }
.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.rm-card { padding: 8px 10px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); border-top: 4px solid var(--pcc, var(--line-2)); }
.rm-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--fg); }
.rm-ic { font-size: 18px; } .rm-st { margin-left: auto; font-weight: 900; font-variant-numeric: tabular-nums; }
.rm-cares { margin: 0 0 6px; font-size: 13px; color: var(--text-2); line-height: 1.3; }
.rm-card .pjm { background: var(--navy-850); }
.rm-none { font-size: 14px; }
.rm-note { font-size: 13px !important; margin-top: 6px !important; }
.qt-wrap { overflow-x: auto; border-radius: 5px; border: 1px solid var(--line-2); }
.qt { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.3; color: var(--fg); background: var(--navy-850); }
.qt th, .qt td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.qt thead th { background: var(--navy-800); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.qt tbody th { width: 30%; font-weight: 650; }
.qt-k { display: block; font-size: 11.5px; font-weight: 900; color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; }
.qt-p { display: block; color: var(--fg); }
.qt-l { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--inv-bg); color: var(--inv-fg); font-weight: 900; font-size: 13px; margin-right: 2px; }
.qt-pick .chip { margin-left: 4px; font-size: 11.5px; }
.qt-why small { display: block; margin-top: 3px; color: var(--text-2); }
.qt tr.qt-trap th, .qt tr.qt-trap td { background: var(--v5-trap-bg); color: var(--v5-trap-ink); }
.qt tr.qt-trap .qt-k, .qt tr.qt-trap .qt-p, .qt tr.qt-trap .qt-why small { color: var(--v5-trap-ink); }
.qt tr.qt-trap .qt-l { background: var(--v5-trap-ink); color: #ffffff; }
.qt tr.qt-one td.qt-pick { box-shadow: inset 4px 0 0 var(--v5-one-line); }
@media (max-width: 760px) { .rm-grid { grid-template-columns: minmax(0, 1fr); } .qt tbody th { width: auto; } }

/* ───────── bảng sao (thẻ Điểm tiệc) · băng «Thời điểm» */
.sc-rows li.sc-v5 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; font-size: 13.5px; }
.sc-rows li.sc-v5 .sc5 { white-space: nowrap; }
.sc-rows li.sc-v5 b { font-size: 14px; margin-left: 2px; }
.app.dash-on .sc-note { display: none; }
.banner.quiz { border-color: var(--v5-scope-moment); } .banner.quiz .bi { background: #ff9aa8; color: #3a0a14; }
/* Hậu tiệc v5: bảng Hậu tiệc cao trọn khung bên phải · dải 5 đường nằm dưới cảnh, bên trái bảng (v4 live: dải trọn ngang, bảng bị đẩy lên → còn ~180 px cuộn) */
@media (min-width: 761px) and (min-height: 521px) {
  :root { --dash-hx: clamp(250px, 34vh, 330px); }
  html[data-dash="x"] .debrief { bottom: var(--tool-h); }
  .app.dash-x .livedash { margin-right: calc(min(760px, 56vw) + 18px); border-top: 0; }
  .app.dash-x .journey.pj .pj-side { display: none; }
  .db-long .longterm { margin: 0 0 10px; padding: 10px 12px; border-radius: 5px; background: var(--navy-800); border: 1px solid var(--line-2); }
}
@media (max-height: 820px) and (min-width: 761px) { :root { --dash-hx: clamp(250px, 38vh, 300px); } }
.qz-sheet h2:focus, .qz-sheet h2:focus-visible { outline: none; }
/* v5: dòng bảng sao thêm ~46 px vào thẻ Điểm tiệc → ở màn 881–1000 px cao (1440×900) The One Page Giờ G gọn hơn một chút để thẻ không bị cắt (đo: tràn 31 px) */
@media (min-height: 881px) and (max-height: 1000px) and (min-width: 761px) {
  .app[data-phase="gday"] .onesheet .line { padding-top: 2px; padding-bottom: 2px; line-height: 1.32; }
  .app.dash-on .sc-total b { font-size: 30px; }
}

/* ═════════ điện thoại (phone.html) — thẻ trắc nghiệm · 5 đường · «Họ sẽ nhớ gì» gọn · L-v4-06 · L-v4-10 ═════════ */
.pq { border-top: 4px solid var(--qz-c, var(--line-2)); }
.pq.s-khau { --qz-c: var(--v5-scope-khau); } .pq.s-dept { --qz-c: var(--v5-scope-dept); } .pq.s-moment { --qz-c: var(--v5-scope-moment); }
.pq-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.pq-sc { font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--inv-bg); color: var(--inv-fg); }
.pq-t { font-size: 14px; color: var(--text-2); white-space: nowrap; } .pq-t b { font-size: 22px; color: var(--fg); font-variant-numeric: tabular-nums; }
.pq-ask { margin: 4px 0 2px; font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.pq-ask b { color: var(--fg); text-transform: none; letter-spacing: 0; }
.pq h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; color: var(--fg); }
.pq-list, .pq-opts { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pq-b, .pq-o { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; text-align: left; border-radius: 5px;
  border: 2px solid var(--line-2); background: var(--surface-2); color: var(--fg); font-size: 16px; font-weight: 650; line-height: 1.3; }
.pq-b { cursor: pointer; width: 100%; }
.pq-b:active { background: var(--surface-3); }
.pq-l { width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center; font-size: 17px; font-weight: 900; background: var(--inv-bg); color: var(--inv-fg); }
.pq-x small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 850; }
.pq-o.k-one { background: var(--v5-one-bg); color: var(--v5-one-ink); border-color: var(--v5-one-line); }
.pq-o.k-trap { background: var(--v5-trap-bg); color: var(--v5-trap-ink); border-color: var(--v5-trap-line); }
.pq-o.k-good { background: var(--v5-good-bg); color: var(--v5-good-ink); }
.pq-o.k-one .pq-l { background: var(--v5-one-ink); color: #ffffff; } .pq-o.k-trap .pq-l { background: var(--v5-trap-ink); color: #ffffff; } .pq-o.k-good .pq-l { background: var(--v5-good-ink); color: #ffffff; }
.pq-o.picked { box-shadow: 0 0 0 3px var(--fg); }
.pq-why { margin-top: 8px; padding: 8px 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line-2); }
.pq-why p { margin: 0 0 4px; font-size: 15px; line-height: 1.35; color: var(--fg); } .pq-why p:last-child { margin-bottom: 0; }
.pq-why .bad { color: var(--v5-bad-text); }
.pq-res { font-weight: 850; }
.pq-wait, .pq-note { margin: 8px 0 0; font-size: 14px; color: var(--text-2); } .pq-wait b { color: var(--fg); }
.pq-after { margin: 4px 4px 12px; font-size: 13px; color: var(--text-2); text-align: center; }
.pq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.pq-foot span { font-size: 13px; color: var(--text-2); }
.ph-pj { margin: 8px 0; padding: 8px 10px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.ph-pj-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-pj-h .k { font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ph-pj-q { font-size: 13px; color: var(--text-2); } .ph-pj-q b { color: var(--fg); }
.ph-pj .pj-chips { margin: 6px 0 4px; gap: 6px; }
.ph-pj .pj-chip { min-height: 44px; padding: 2px 10px; font-size: 13.5px; }
.ph-pj .pj-chip:not(.on) .pj-lb { display: none; }
.ph-pj-c { margin: 2px 0 4px; font-size: 13.5px; color: var(--fg); }
.ph-pj-n { margin: 4px 0 0; font-size: 12px; color: var(--text-2); }
.ph-pj .pj-svg { display: block; max-width: 100%; height: auto; }
.ph-q5 { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.ph-q5 li { padding: 8px 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg); }
.ph-q5 li.k-trap { background: var(--v5-trap-bg); color: var(--v5-trap-ink); border-color: var(--v5-trap-line); }
.ph-q5 p { margin: 0 0 3px; font-size: 14px; line-height: 1.3; }
.q5-p { font-weight: 750; } .q5-a { display: grid; gap: 1px; } .q5-w { font-size: 13px !important; opacity: 1; }
.ph-q5 li:not(.k-trap) .q5-w { color: var(--text-2); }
/* D5 · L-v5-04: trên điện thoại `.ph-card p { color: var(--text-2) }` + `.ph-card p b { color: var(--fg) }` (styles-phone.css) đè màu của dòng bẫy → chữ kem trên nền hồng 1,07–1,22:1 (không đọc được «Họ sẽ nhớ gì» bản gọn ở theme tối). Dòng bẫy tự chứa màu. */
.ph-q5 li.k-trap p, .ph-q5 li.k-trap span, .ph-q5 li.k-trap b { color: var(--v5-trap-ink); }
/* L-v4-06: nút ☾/◐ và nút nhỏ ≥ 44 px (thanh trên co phần chữ, không co nút) */
.tp-ic { flex: none; width: 44px; min-width: 44px; min-height: 44px; }
.tp-role, .tp-net { flex: 0 1 auto; min-width: 0; }
.tp-brand { flex: 0 1 auto; }
.ph-btn.small { min-height: 44px; }
/* L-v4-10: «Không thấy phòng MÃ — kiểm lại 4 chữ» */
.ph-warn.nf { flex-wrap: wrap; }
.ph-warn-b { display: flex; flex-wrap: wrap; gap: 6px; }
/* nhãn hiệu ứng ⭐ (lan toả · giới thiệu · đặt lại · đối tác) tự chứa màu — điện thoại không nạp styles.css (.chip) */
.pjm-e { display: inline-block; padding: 0 7px; border-radius: 4px; border: 1px solid; font-size: 12px; font-weight: 850; line-height: 1.5; white-space: nowrap; }
.pjm-e.pass { background: var(--v5-one-bg); color: var(--v5-one-ink); border-color: var(--v5-one-line); }
.pjm-e.fail { background: var(--v5-trap-bg); color: var(--v5-trap-ink); border-color: var(--v5-trap-line); }
/* L-v4-06 ở 360–380 px: nút 44 px không co → chữ thương hiệu + mã phòng gọn lại, không chữ nào chồng lên nhau */
@media (max-width: 380px) {
  .ph-top { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .tp-brand { overflow: hidden; }
  .tp-brand b { font-size: 11px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
  .tp-brand span { font-size: 9.5px; letter-spacing: .1em; }
  .tp-room { font-size: 13px; letter-spacing: .04em; padding: 3px 6px; }
  .tp-role { max-width: 92px; padding: 3px 6px; }
}