/* ONE CAPELLA v4 «Chuỗi giá trị Capella» — giao diện gói C3 (host index.html + điện thoại phone.html + nhãn dùng chung).
   Luật tương phản (CLAUDE.md · UI Contrast): mọi thành phần mới có NỀN TỰ CHỨA. Ô khâu + bảng KPI = GIẤY Capella (kem + mận) ở CẢ 2 theme
   — như The One Page — nên chữ không phụ thuộc theme. Phần nổi trên mặt theme (bộ xếp top 3, thẻ màn mở) dùng token vai trò (--fg · --navy · --inv). */

:root {
  --cap-paper: #fffaf6; --cap-paper-top: #fde4dc; --cap-paper-cur: #ffffff;
  --cap-ink: #4a0d2a; --cap-ink-2: #6b3a4f; --cap-ink-3: #7c5566;
  --cap-line: #e3c9bd; --cap-top-line: #6b0f3a; --cap-badge: #6b0f3a; --cap-badge-fg: #ffffff;
  --cap-gold: #d9b46a; --cap-ok-bg: #e6f4ec; --cap-ok-ink: #12372a; --cap-no-bg: #fbe4e7; --cap-no-ink: #6a1424;
}
:root[data-event="conference"] { --time-h: 80px; }
@media (max-height: 820px) and (min-width: 761px) { :root[data-event="conference"] { --time-h: 72px; } }

/* ───────── huy hiệu TOP · nhãn khâu (thay «Chương 0x») */
.kb-top { display: inline-flex; align-items: center; flex: none; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; background: var(--cap-badge); color: var(--cap-badge-fg); }
.kb-top.sm { font-size: 10px; padding: 2px 6px; }
.chap.kh-lab { align-items: center; }
.chap.kh-lab .kb-top { margin-left: 2px; }
.wc .chap.kh-lab.in-card { display: inline-flex; justify-content: center; margin-bottom: 2px; }
.wc .chap.kh-lab.in-card .chap-n { color: var(--gold-ink); }
.wc .chap.kh-lab.in-card .chap-t { color: var(--ink); }

/* ───────── THANH 7 KHÂU trên thanh tiến trình (host) — ô giấy chứa chấm trạm / Line-Up / Giờ G */
.kwrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.kbar { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; min-width: 0; }
.kbar.host { flex: 1; min-width: 0; }
.kb-ar { flex: none; align-self: center; padding: 0 3px; font-size: 13px; font-weight: 800; color: var(--text-2); }
.kb-c { position: relative; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 8px 3px;
  border-radius: 9px; background: var(--cap-paper); color: var(--cap-ink); border: 1.5px solid var(--cap-line); }
.kbar.host .kb-c[data-kh="4"] { flex: 1.4 1 auto; }
.kbar.host .kb-c[data-kh="5"] { flex: 2 1 160px; }
.kb-c.top { background: var(--cap-paper-top); border: 2.5px solid var(--cap-top-line); }
.kb-c.cur { background: var(--cap-paper-cur); box-shadow: 0 0 0 3px var(--cap-gold), 0 4px 14px rgba(0, 0, 0, .25); z-index: 1; }
.kb-c.top.cur { background: #fff0ea; }
.kb-h { display: flex; align-items: center; gap: 5px; min-width: 0; line-height: 1.05; }
.kb-n { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 900;
  background: var(--cap-ink); color: #ffffff; }
.kb-c.done:not(.cur) .kb-n { background: #8a6a2e; color: #ffffff; }
.kb-c.cur .kb-n { background: var(--cap-badge); box-shadow: 0 0 0 2px var(--cap-gold); }
.kb-t { min-width: 0; font-size: 12.5px; font-weight: 850; color: var(--cap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-c.cur .kb-t { font-weight: 900; }
.kb-c.act::after { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #c43c52; box-shadow: 0 0 0 2px #fff; animation: kb-pulse 1s ease-in-out infinite; }
@keyframes kb-pulse { 50% { opacity: .35; } }
.kb-in { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kb-in:empty { display: none; }
/* chấm trạm · Line-Up · Giờ G nằm TRÊN giấy kem: màu tự chứa (không theo theme) */
.kbar .pdot { width: 24px; height: 24px; font-size: 11.5px; border-width: 1.5px; background: #ffffff; color: var(--cap-ink); border-color: #c9a9b6; }
.kbar .pdot.done { background: var(--cap-gold); color: #0f1a2d; border-color: #9c7a34; }
.kbar .pdot.now { background: var(--cap-badge); color: #ffffff; border-color: var(--cap-badge); box-shadow: 0 0 0 4px rgba(217, 180, 106, .55); }
.kbar .pdot.down { background: var(--cap-no-bg); color: var(--cap-no-ink); border-color: #c24a5e; }
.kbar .pdot.sent { background: var(--cap-ok-bg); color: var(--cap-ok-ink); border-color: #4f9e78; }
.kbar .ppill { padding: 2px 7px; font-size: 11.5px; border-width: 1.5px; background: #ffffff; color: var(--cap-ink); border-color: #c9a9b6; }
.kbar .ppill.now { background: var(--cap-badge); color: #ffffff; border-color: var(--cap-badge); }
.kbar .ppill.done { background: var(--cap-gold); color: #0f1a2d; border-color: #9c7a34; }
.kbar .gtrack { flex: 1; min-width: 96px; height: 24px; padding: 0 7px; gap: 6px; border-width: 1.5px; background: #ffffff; color: var(--cap-ink); border-color: #c9a9b6; }
.kbar .gtrack.now { border-color: var(--cap-badge); }
.kbar .gtrack.done { border-color: #9c7a34; }
.kbar .gtrack .gl, .kbar .gtrack .gt { color: var(--cap-ink); font-size: 12px; }
.kbar .gtrack .gt { min-width: 52px; }
.kbar .gtrack .gbar { background: #efdfe5; }
.kbar .gmark { border-color: #ffffff; width: 16px; height: 16px; font-size: 10px; }
.kbar .gmark.plat { border-radius: 4px; transform: translate(-50%, -50%) rotate(0deg); }
.kmini { flex: none; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #ffffff; color: var(--cap-ink); border: 1.5px dashed #c9a9b6; white-space: nowrap; }
.kmini.now { background: var(--cap-badge); color: #ffffff; border: 1.5px solid var(--cap-badge); }
.kmini.done { background: var(--cap-gold); color: #0f1a2d; border: 1.5px solid #9c7a34; }
.kbar.loop .kb-c[data-kh="1"] { box-shadow: 0 0 0 3px var(--cap-gold); }
.kb-loopchip { flex: none; font-size: 13px; font-weight: 850; padding: 4px 10px; border-radius: 999px; background: var(--cap-badge); color: #ffffff; white-space: nowrap; }
/* màn Khép vòng: bảng dưới đã vẽ trọn vòng «quay lại khâu 1 · giới thiệu N/100» → bỏ chip trên thanh để 7 tên khâu không bị cắt (1440 px cắt còn «Thu …») */
.app[data-phase="chain"] .kb-loopchip, .app[data-phase="ended"] .kb-loopchip { display: none; }
.kb-note { flex: 1 0 100%; order: 9; margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.25; font-weight: 650; color: var(--text-2); text-align: center; }
:root[data-event="conference"] .timebar { flex-wrap: wrap; align-content: center; row-gap: 3px; }
@media (max-width: 1440px) and (min-width: 761px) { .kb-t { font-size: 12px; } .kb-c { padding: 2px 6px 3px; } .kbar .gtrack .gt-max { display: none; } .kbar .gtrack .gt { min-width: 22px; } }
/* chip tiệc nhường chỗ cho 7 tên khâu (tên tiệc vẫn ở đầu The One Page + mọi bảng) */
@media (max-width: 1600px) and (min-width: 761px) { .timebar .wchip { display: none; } }
@media (max-height: 820px) and (min-width: 761px) { .kb-c { gap: 1px; padding: 1px 6px 2px; } .kbar .pdot { width: 21px; height: 21px; font-size: 10.5px; } .kbar .gtrack, .kbar .ppill, .kmini { height: 21px; } .kbar .ppill, .kmini { padding: 0 6px; display: inline-flex; align-items: center; } .kb-n { width: 15px; height: 15px; font-size: 9.5px; } .kb-t { font-size: 11.5px; } }
@media (max-width: 1100px) and (min-width: 761px) { .kb-c:not(.cur) .kb-t { display: none; } .kb-loopchip { font-size: 12px; } }
/* điện thoại (host mở trên máy nhỏ): ô gọn — chỉ số + chấm; tên chỉ ở khâu hiện tại */
@media (max-width: 760px) {
  :root { --time-h: 52px; }
  :root[data-event="conference"] { --time-h: 70px; }
  .timebar { flex-wrap: wrap; align-content: center; row-gap: 2px; }
  .kwrap { gap: 4px; }
  .kbar.host .kb-ar { padding: 0 1px; font-size: 10px; }
  .kbar.host .kb-c { padding: 1px 4px 2px; gap: 1px; border-width: 1.2px; }
  .kbar.host .kb-c.top { border-width: 2px; }
  .kbar.host .kb-c:not(.cur) .kb-t, .kbar.host .kb-c .kb-top { display: none; }
  .kbar.host .kb-c.cur .kb-t { font-size: 11px; max-width: 86px; }
  .kbar.host .kb-n { width: 14px; height: 14px; font-size: 9px; }
  .kbar .pdot { width: 18px; height: 18px; font-size: 9.5px; border-width: 1.2px; }
  .kbar .ppill, .kmini { font-size: 9.5px; padding: 1px 4px; }
  .kbar .gtrack { min-width: 0; height: 18px; padding: 0 4px; gap: 3px; }
  .kbar .gtrack .gl, .kbar .gtrack .gt { font-size: 9.5px; }
  .kbar .gtrack .gt-max { display: none; }
  .kbar .gtrack .gt { min-width: 16px; }
  .kbar.host .kb-c[data-kh="5"] { flex: 1.4 1 60px; }
  .kmini { max-width: 46px; overflow: hidden; text-overflow: ellipsis; }
  .kb-loopchip { font-size: 10px; padding: 2px 6px; }
  .kb-note { font-size: 10.5px; }
}

/* ───────── dải 7 khâu (điện thoại «Toàn chuỗi», màn Khép vòng) */
.kstrip { display: grid; gap: 4px; }
.kstrip .kbar { flex-wrap: nowrap; }
.kstrip .kb-c { flex: 1 1 0; align-items: flex-start; padding: 4px 6px 5px; }
.kstrip .kb-c .kb-top { margin-top: 1px; }
.kstrip.compact .kb-c { align-items: center; padding: 4px 2px; }
.kstrip.compact .kb-h { justify-content: center; }
.kstrip.compact .kb-ar { padding: 0 1px; font-size: 10px; }
.kstrip .kb-c.mine { outline: 2px dashed var(--cap-gold); outline-offset: 1px; }
.kb-loop { position: relative; margin: -2px 8px 0; }
.kb-loop svg { display: block; width: 100%; height: 26px; }
.kb-loop svg path { stroke: var(--cap-gold); }
.kb-lt { display: block; text-align: center; font-size: 13px; font-weight: 750; color: var(--fg); }
.kb-lt b { color: var(--accent-text); }
.ch-loop { padding: 8px 12px 6px; border-radius: 16px; background: rgba(11, 20, 35, .96); border: 1px solid var(--line-2); }
:root[data-theme="light"] .ch-loop { background: rgba(255, 253, 248, .97); }

/* ───────── The One Page mức Phức tạp: 3 việc/dòng (ô 3 hụt = gạch nhẹ + «không kịp») */
.l3 { display: grid; gap: 1px; }
.l3-i { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 4px; align-items: baseline; line-height: 1.25; }
.l3-i i { font-style: normal; font-size: 10.5px; font-weight: 900; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; background: var(--ink); color: var(--ivory, #f6f0e3); align-self: start; margin-top: 1px; }
/* ô 3 hụt: GIỮ màu chữ của nơi chứa (giấy The One Page · bảng Line-Up tối/sáng) — chỉ gạch đỏ + số đỏ + chip «không kịp», không làm mờ chữ */
.l3-i.miss .l3-t { text-decoration: line-through; text-decoration-color: #c24a5e; text-decoration-thickness: 1.5px; }
.l3-i.miss i { background: #8a2a3c; color: #fff1f3; }
.l3-i em { font-style: normal; text-decoration: none; display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 850; padding: 0 5px; border-radius: 6px; background: var(--cap-no-bg); color: var(--cap-no-ink); }
.onesheet .line.t3 .lx { font-size: 12.5px; }
.onesheet .line.t3 .l3-i { overflow: hidden; }
.onesheet .line.t3 .l3-t { overflow: hidden; text-overflow: ellipsis; }
.lu-line .lb .l3 { font-size: 16px; }

/* ───────── XẾP TOP 3 TRONG 5 (tấm trạm host · Line-Up Kéo dây · điện thoại) */
.t3-rule { margin: 0 0 6px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.t3-rule .t3-keys { display: block; font-size: 12px; color: var(--text-2); }
.t3-rule b { color: var(--fg); }
.t3-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.t3-task { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 1px 10px; align-items: center; text-align: left; padding: 5px 10px; min-height: 46px;
  border-radius: 12px; border: 2px solid var(--line-2); background: var(--navy-800); color: var(--fg); cursor: pointer; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; }
.t3-task:hover:not(:disabled) { border-color: var(--hover-line-2, var(--line-2)); background: var(--navy-750, var(--navy-800)); }
.t3-task .t3-n { grid-row: span 3; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 19px; font-weight: 900; line-height: 1; background: var(--navy-700); color: var(--fg); border: 2px solid var(--line-2); }
.t3-task .t3-x { grid-column: 2; font-size: 15.5px; font-weight: 700; line-height: 1.28; color: var(--fg); }
.t3-task .t3-r { grid-column: 3; grid-row: 1; justify-self: end; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: var(--cap-badge); color: #ffffff; white-space: nowrap; }
.t3-task.k3 .t3-r { background: #8a4b00; color: #ffffff; }
.t3-task .t3-cv { grid-column: 2 / span 2; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.t3-task .t3-no { grid-column: 2 / span 2; font-size: 13px; line-height: 1.3; font-style: italic; color: var(--text-2); }
.t3-task.blind { border-style: dashed; }
.t3-task.on { border-color: var(--inv-bg); background: var(--navy-700); box-shadow: inset 0 0 0 2px var(--inv-bg); }
.t3-task.on .t3-n { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.t3-task:disabled { cursor: not-allowed; }
.t3-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t3-slot { position: relative; min-width: 0; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1px; text-align: left; padding: 4px 8px; border-radius: 10px;
  border: 2px dashed var(--line-2); background: var(--navy-850); color: var(--fg); cursor: default; -webkit-touch-callout: none; user-select: none; }
.t3-slot.filled { cursor: pointer; border-style: solid; border-color: var(--inv-bg); background: var(--navy-700); }
.t3-slot .t3-sk { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; font-size: 11px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.t3-slot .t3-pct { font-style: normal; letter-spacing: 0; font-size: 10.5px; font-weight: 900; padding: 1px 5px; border-radius: 999px; background: #8a4b00; color: #ffffff; }
.t3-slot .t3-sv { font-size: 13px; font-weight: 750; line-height: 1.25; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t3-slot .t3-sv b { font-size: 15px; }
.t3-slot .t3-se { font-size: 12.5px; color: var(--text-2); font-style: italic; }
.t3-slot.drop { border-color: var(--cap-gold); box-shadow: 0 0 0 3px rgba(217, 180, 106, .5); }
.t3-dragging .t3-task:not(.on), .t3-dragging .t3-slot { transition: none; }
.t3-ghost { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; max-width: 320px; padding: 6px 10px; border-radius: 10px; background: var(--cap-badge); color: #ffffff;
  font: 750 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tấm trạm host: Chỉ bạn biết → 5 việc → The One Page trong cùng vùng cuộn · 3 ô ghim ở chân cạnh nút Xác nhận */
.t3-wrap { margin: 0 0 10px; }
.p-foot.t3-foot { flex-wrap: wrap; gap: 8px 10px; align-items: stretch; }
.p-foot.t3-foot .t3-slotbox { flex: 1 1 360px; min-width: 0; }
.p-foot.t3-foot .p-confirm { display: grid; gap: 4px; align-content: center; }
.t3-slotbox.in-scroll { margin: 8px 0 4px; }
@media (max-height: 820px) and (min-width: 761px) {
  .t3-panel .p-who { display: none; }
  .t3-task { min-height: 46px; padding: 5px 9px; }
  .t3-task .t3-x { font-size: 15px; }
  .t3-rule .t3-keys { display: none; }
}
@media (max-width: 760px) {
  .t3-slot .t3-pct { position: absolute; top: -13px; right: 4px; box-shadow: 0 0 0 2px var(--navy-850); }
  .p-foot.t3-foot .t3-slotbox { flex: 1 1 100%; }
  .p-foot.t3-foot .p-confirm { width: 100%; }
  .t3-rule .t3-keys { display: none; }
}

/* ───────── BẢNG KPI CAPELLA (giấy kem + mực — mọi theme) */
.kpib { margin: 0 0 10px; padding: 10px 12px 8px; border-radius: 14px; background: var(--cap-paper); color: #24101c; border: 1px solid var(--cap-line); border-top: 5px solid var(--cap-top-line); }
.kpib-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kpib-h h3 { margin: 0 !important; font-size: 14px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--cap-ink) !important; font-weight: 900; }
.kpib-st { font-size: 12.5px; font-weight: 750; color: var(--cap-ink-2); }
.kpib-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kp-r { display: grid; grid-template-columns: minmax(0, 1fr) 104px 112px 116px; gap: 2px 10px; align-items: center; padding: 6px 4px 6px 8px; border-bottom: 1px dashed #e8d3c9; border-left: 4px solid transparent; }
.kp-r:last-child { border-bottom: 0; }
.kp-r.top1, .kp-r.top2, .kp-r.top3 { border-left-color: var(--cap-top-line); }
.kp-r.focus { background: #fff3e6; }
.kp-l { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
/* QA D3 (L-v4-03): trên điện thoại `.ph-card li b { color: var(--fg) }` (đặc hiệu 0,1,2) đè màu nhãn KPI → chữ kem trên giấy kem (1,04–1,1:1); `.kpib .kp-l b` (0,2,1) thắng */
.kpib .kp-l b { font-size: 14.5px; font-weight: 800; color: #24101c; }
.kp-f { font-style: normal; font-size: 10.5px; font-weight: 900; padding: 2px 6px; border-radius: 999px; background: #fff1d6; color: #5a3608; border: 1px solid #d9b46a; white-space: nowrap; }
.kp-k { font-size: 11px; font-weight: 700; color: var(--cap-ink-3); }
.kp-v { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 18px; font-weight: 900; color: #24101c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-v small { font-size: 11px; font-weight: 700; color: var(--cap-ink-2); }
.kp-m { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 900; }
.kp-m.ok { background: var(--cap-ok-bg); color: var(--cap-ok-ink); border: 1px solid #4f9e78; }
.kp-m.no { background: var(--cap-no-bg); color: var(--cap-no-ink); border: 1px solid #c24a5e; }
.kp-t, .kp-c { font-size: 13px; font-weight: 700; color: #3a2230; white-space: nowrap; }
.kp-t small, .kp-c small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cap-ink-3); }
.kpib-n { margin: 6px 0 0 !important; font-size: 12px !important; line-height: 1.35; color: var(--cap-ink-2) !important; }
.kpib.compact .kp-r { grid-template-columns: minmax(0, 1fr) auto; padding: 5px 2px 5px 6px; }
.kpib.compact .kp-t { grid-column: 1 / -1; display: flex; gap: 4px; align-items: baseline; font-size: 12px; }
.kpib.compact .kp-t small { display: inline; }
.kpib.compact .kp-v { font-size: 16px; }
@media (max-width: 1180px) { .kp-r { grid-template-columns: minmax(0, 1fr) 96px 100px; } .kp-c { grid-column: 3; } .kp-t { grid-column: 3; } }
@media (max-width: 760px) { .kp-r { grid-template-columns: minmax(0, 1fr) auto; } .kp-t, .kp-c { grid-column: 1 / -1; display: flex; gap: 4px; align-items: baseline; } .kp-t small, .kp-c small { display: inline; } }
/* host · bảng KPI riêng (modal) */
.kpi .sheet.kpi-sheet { max-width: 1080px; }
.kpi-kick { margin: 0 0 2px !important; font-size: 12px !important; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text) !important; }
.kpi-sub { font-size: 15px !important; color: var(--text-2) !important; }
.kpi-sub b { color: var(--fg); }
.topc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.topc-c { padding: 10px 12px; border-radius: 12px; background: var(--cap-paper); color: #24101c; border-left: 5px solid var(--cap-top-line); }
.topc-c h4 { margin: 6px 0 4px; font-size: 15.5px; color: var(--cap-ink); }
.topc-c p { margin: 0 0 4px !important; font-size: 13.5px !important; line-height: 1.35; color: #3a2230 !important; }
.topc-c .topc-m b { color: var(--cap-ink); }
@media (max-width: 900px) { .topc { grid-template-columns: 1fr; } }
.kpi-btn[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); }

/* ───────── Hậu tiệc v4: «Tập trung đúng?» · tin đồn · thẻ nền tảng nhiều trạm · KPI */
.db-kpi { margin: 6px 0 4px; }
.fc-sum { margin: 0 0 6px !important; font-size: 14.5px; color: var(--text-2); }
.fc-sum b { color: var(--fg); }
.fc-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.fc { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto 64px; gap: 2px 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--ivory); color: var(--ink); border-left: 6px solid #b9a27a; }
.fc.m3 { border-left-color: #2f8a5e; } .fc.m2 { border-left-color: #6e9f3e; } .fc.m1 { border-left-color: #c47a1c; } .fc.m0 { border-left-color: #c43c52; }
.fc-d b { font-size: 15px; color: var(--ink); }
.fc-d .chip { margin-left: 6px; }
.fc-c, .fc-b { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.fc-c small, .fc-b small { font-size: 10.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-right: 3px; }
.fc-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; font-size: 16px; font-weight: 900; background: var(--ivory-2); color: var(--ink-2); border: 1px solid var(--paper-line); }
.fc-n.hit { background: #e6f4ec; color: #12372a; border-color: #4f9e78; }
.fc-n.miss { text-decoration: line-through; background: #fbe4e7; color: #6a1424; border-color: #e3a0ab; }
.fc-c em { font-style: normal; font-size: 11px; font-weight: 850; padding: 0 5px; border-radius: 6px; background: #fbe4e7; color: #6a1424; margin-left: 3px; }
.fc-s { justify-self: end; font-size: 15px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-s b { color: #12372a; }
.fc-t { grid-column: 1 / -1; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 1180px) { .fc { grid-template-columns: minmax(0, 1fr) auto; } .fc-c, .fc-b { grid-column: 1 / -1; } .fc-s { grid-row: 1; grid-column: 2; } }
.rm-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 5px; }
.rm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 10px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); color: var(--fg); font-size: 15px; }
.rm q { quotes: "«" "»"; color: var(--fg); }
.rm.bad { border-color: #c43c52; box-shadow: inset 4px 0 0 #c43c52; }
.rm-note { margin: 0 0 10px !important; font-size: 14px !important; }
.cf-list li.cf-plat { border-left-color: var(--cap-top-line); }
.cf-plat .pl-k, .banner .pl-k { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.cf-plat .pl-k { color: var(--cap-ink); margin-bottom: 2px; }
.cf-st { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cf-st li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 8px; font-size: 15px; }
.cf-st li.ok { background: #e6f4ec; color: #12372a; }
.cf-st li.no { background: #fbe4e7; color: #6a1424; }
.cf-st .cf-m { font-weight: 900; }
.chip.plat { background: var(--cap-paper-top); color: var(--cap-ink); border-color: var(--cap-top-line); }
.inc.plat { box-shadow: inset 4px 0 0 var(--cap-top-line); }
/* băng thẻ nền tảng (Giờ G) */
.banner.plat { border-width: 3px; }
.banner.plat .bi { border-radius: 6px; }
.banner.plat .pl-k { color: var(--cap-gold); margin-bottom: 1px; }
:root[data-theme="light"] .banner.plat .pl-k { color: var(--cap-badge); }   /* băng sáng: vàng trên kem chỉ 1,9:1 → mận 12:1 */

/* ───────── màn mở v4: 1 Loại sự kiện · 2 Mức chơi · 3 Chế độ */
.in-sec .in-step { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--accent-text); color: var(--navy-900); font-size: 12px; letter-spacing: 0; vertical-align: 1px; }
.picks.two.events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-pick .pk-t { font-size: 19px; }
.ev-tops { display: grid; gap: 3px; margin-top: 6px; }
.ev-top { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--text-2); line-height: 1.3; }
.lv-facts { margin: 4px 0 2px; padding-left: 18px; font-size: 14px; line-height: 1.35; color: var(--text-2); text-align: left; }
.lv-facts b { color: var(--fg); }
.lv-who { font-style: italic; }
.in-capnote { margin: 6px auto 0 !important; max-width: 820px; font-size: 13.5px !important; color: var(--text-2) !important; }
.picks.rounds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.picks.rounds.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picks.rounds.n5, .picks.rounds.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.picks.rounds .pk-t { font-size: 17px; }
/* v4: màn mở dài gấp đôi v3 (3 bước + chọn tiệc, ~1.560 px) → nút «Bắt đầu» dính đáy khung ở MỌI màn (v3 chỉ dính ở điện thoại).
   Đo 1440×900: nút ở y = 1.427 px, phải cuộn mới thấy. Nền dải mờ dùng token theme → đọc được cả sáng/tối. */
@media (min-width: 761px) {
  .intro .in-actions { position: sticky; bottom: -22px; z-index: 2; margin: 14px -26px -22px; padding: 12px 26px 16px; background: linear-gradient(180deg, var(--fade-0) 0%, var(--navy-850) 34%); }
  .intro .in-actions + .in-khau { margin-top: 32px !important; }
}
.in-khau { margin: 10px 0 0 !important; font-size: 14px !important; color: var(--text-2) !important; }
.in-khau .chap { display: inline-flex; }
@media (max-width: 900px) { .picks.two.events, .picks.three.levels { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .picks.rounds, .picks.rounds.n5, .picks.rounds.n6 { grid-template-columns: 1fr; } .lv-facts { font-size: 13px; } }

/* ───────── chỉnh nhỏ v4: tiêu đề The One Page không gãy khi tên khách DN dài · tên giám khảo hội nghị xuống dòng gọn */
.onesheet h2 { white-space: nowrap; }
.onesheet h2 small { white-space: normal; text-align: right; line-height: 1.25; }
.face .fr { overflow-wrap: anywhere; hyphens: auto; }
.kstrip.compact .kb-top.sm { font-size: 8.5px; padding: 1px 4px; }
.kstrip.compact .kb-c { flex-direction: column; gap: 2px; }