/* Design system CFS (token + khối dùng chung). Gốc: wireframe A đã chọn 08/11. ô chọn ngày chung → 4 ô số → [xu hướng + so sánh | việc cần làm] → bảng chi tiết tab Ngày/Camp/QC. Token giữ đúng bản wireframe (demo ABERA 360: Inter, một màu nhấn chàm, khối viền 1px bo 10px). Biểu đồ SVG tự vẽ, một trục mỗi khung, 3 khung chung trục ngày. */
/* Màu theo nen2/web/DESIGN.md mục 5 (Tú "duyệt plan" 12/11, đợt 1). Đổi màu: sửa dev/mau/tuong_phan.py, chạy cho ra 0 cặp hỏng, rồi mới sửa ở đây. */
:root {
  --bg: #f7f8f8; --surface: #ffffff; --sunken: #f1f2f3; --line: #e4e5e7; --line-strong: #858a94;
  --ink: #1a1b1e; --body: #3c3f45; --muted: #63676e;
  --accent: #5e6ad2; --accent-text: #4f5bc4; --on-accent: #ffffff; --active: #eceefb;
  --ok: #17764c; --ok-bg: #e4f4ec; --warn: #8f5207; --warn-bg: #fbf1e0; --bad: #b92e2e; --bad-bg: #fcecec;
  --info: #4f5bc4; --info-bg: #eceefb; --neutral: #63676e; --neutral-bg: #f0f1f2;
  --dot-ok: #1f8a5b; --dot-warn: #b56a0c; --dot-bad: #c93636; --dot-info: #5e6ad2; --dot-neutral: #858a94;
  --bar: #5e6ad2; --bar-soft: #c9cdf2; --bar-off: #d5d7db;
  --font: "Inter", "Segoe UI", "Noto Sans Thai", system-ui, sans-serif;
  /* Thang cỡ chữ, khoảng cách, bo góc, bóng (mục 5.3, 5.4). Màn cũ chưa dùng; màn mới chỉ dùng các bậc này. */
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 24px;
  --kc-1: 4px; --kc-2: 8px; --kc-3: 12px; --kc-4: 16px; --kc-5: 24px; --kc-6: 32px;
  --bo-1: 4px; --bo-2: 6px; --bo-3: 10px; --bo-tron: 999px;
  --shadow-1: 0 8px 24px rgb(0 0 0 / .12); --shadow-2: 0 16px 48px rgb(0 0 0 / .2);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #08090a; --surface: #101113; --sunken: #16171a; --line: #23252a; --line-strong: #676c75;
  --ink: #f7f8f8; --body: #d0d6e0; --muted: #8a8f98;
  --accent: #828fff; --accent-text: #8f9bff; --on-accent: #08090a; --active: #1b1d33;
  --ok: #4cb782; --ok-bg: #12291f; --warn: #f2a93b; --warn-bg: #2b2110; --bad: #f06a6a; --bad-bg: #2c1618;
  --info: #8f9bff; --info-bg: #1b1d33; --neutral: #8a8f98; --neutral-bg: #1a1c20;
  --dot-ok: #4cb782; --dot-warn: #f2a93b; --dot-bad: #eb5757; --dot-info: #828fff; --dot-neutral: #676c75;
  --shadow-1: 0 8px 24px rgb(0 0 0 / .5); --shadow-2: 0 16px 48px rgb(0 0 0 / .6);
  --bar: #6f7ae0; --bar-soft: #2e3260; --bar-off: #3a3d45; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #08090a; --surface: #101113; --sunken: #16171a; --line: #23252a; --line-strong: #676c75;
  --ink: #f7f8f8; --body: #d0d6e0; --muted: #8a8f98;
  --accent: #828fff; --accent-text: #8f9bff; --on-accent: #08090a; --active: #1b1d33;
  --ok: #4cb782; --ok-bg: #12291f; --warn: #f2a93b; --warn-bg: #2b2110; --bad: #f06a6a; --bad-bg: #2c1618;
  --info: #8f9bff; --info-bg: #1b1d33; --neutral: #8a8f98; --neutral-bg: #1a1c20;
  --dot-ok: #4cb782; --dot-warn: #f2a93b; --dot-bad: #eb5757; --dot-info: #828fff; --dot-neutral: #676c75;
  --shadow-1: 0 8px 24px rgb(0 0 0 / .5); --shadow-2: 0 16px 48px rgb(0 0 0 / .6);
  --bar: #6f7ae0; --bar-soft: #2e3260; --bar-off: #3a3d45; color-scheme: dark }
* { box-sizing: border-box }
* { scrollbar-width: thin; scrollbar-color: var(--bar-off) transparent }
::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-thumb { background: var(--bar-off); border-radius: 4px } ::-webkit-scrollbar-track { background: transparent }
body { background: var(--bg); color: var(--body); font: 400 14px/1.55 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -.01em }
p { margin: 0 }
button, select { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: 1320px; margin: 0 auto; padding-block: 16px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); container: st / inline-size }

.mau-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 12px }
.mau-chip { font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 8px; background: var(--surface); min-width: 0 }
.mau-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 6px; vertical-align: 1px }

.man { display: grid; gap: 16px; min-width: 0 }
.dau-man { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; justify-content: space-between }
.dau-man h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em }
.nguon { font-size: 12px; color: var(--muted) }
.khoi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 12px; min-width: 0; align-content: start }
.khoi-dau { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between }
.khoi-dau h2 { font-size: 15px }
.nho { font-size: 12px; color: var(--muted) }

/* Ô chọn ngày (giữ nguyên bản wireframe) */
.ngay { position: relative; display: grid; gap: 6px; min-width: 0 }
.chips-cuon { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0 }
.ck { min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--body); border-radius: 8px; padding: 4px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0 }
.ck:hover { border-color: var(--muted); color: var(--ink) }
.ck[aria-pressed="true"] { border-color: var(--accent); background: var(--active); color: var(--ink); font-weight: 600 }
.ck svg { width: 15px; height: 15px }
.ngay-tom { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: var(--ink) }
.ngay-tom b { font-weight: 600 }
.gioi-han { font-size: 12px; color: var(--muted); max-width: 75ch }
.pop { position: absolute; z-index: 20; top: 44px; left: 0; width: 620px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgb(0 0 0 / .16); padding: 14px; display: grid; gap: 10px }
.pop-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--neutral-bg); flex-wrap: wrap }
.seg button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08) }
.pop-nav { display: flex; gap: 4px }
.nut-ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink) }
.nut-ic:disabled { opacity: .4; cursor: default }
.nut-ic svg { width: 16px; height: 16px }
.thang2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.thang h3 { font-size: 13px; text-align: center; margin-bottom: 6px }
.luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px }
.thu { font-size: 12px; color: var(--muted); text-align: center; height: 24px; line-height: 24px }
.o-ngay { position: relative; height: 36px; display: grid; place-items: center }
.o-ngay.giua { background: var(--active) }
.o-ngay.trai { background: linear-gradient(to right, transparent 50%, var(--active) 50%) }
.o-ngay.phai { background: linear-gradient(to left, transparent 50%, var(--active) 50%) }
.o-ngay button { position: relative; width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--ink); font-size: 13px }
.o-ngay button:hover { background: var(--neutral-bg) }
.o-ngay.dau button { background: var(--accent); color: var(--on-accent); font-weight: 600 }
.o-ngay button.nay { font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
.o-ngay button.tam::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--warn) }
.o-ngay button[aria-disabled="true"] { color: var(--muted); opacity: .45; cursor: not-allowed; background: none }
.pop-hint { font-size: 13px; color: var(--ink); min-height: 20px }
.pop-hint.loi { color: var(--bad) }
.pop-chan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px }
.pop-chan .nho { flex: 1 1 200px }
.btn { min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 4px 14px; font-size: 13px; font-weight: 500; white-space: nowrap }
.btn:hover { border-color: var(--muted) }
.btn.chinh { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }

/* Hàng số */
.so4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.o { padding: 14px 16px; display: grid; gap: 3px; align-content: start; border-left: 1px solid var(--line); min-width: 0 }
.o:first-child { border-left: 0 }
.o .t { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.o .v { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; display: flex; align-items: center; gap: 8px }
.o .v.nho-v { font-size: 16px; color: var(--muted); font-weight: 500 }
.o .meta, .o .m { font-size: 12px; color: var(--muted) }
.den { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--neutral) }
.den.ok { background: var(--ok) } .den.warn { background: var(--warn) } .den.bad { background: var(--bad) }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; white-space: nowrap; line-height: 18px; background: var(--surface) }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral) }
.chip.tam::before { background: var(--warn) }
.chip.win { color: var(--ok); border-color: var(--ok) } .chip.win::before { background: var(--ok) }

/* Lưới giữa: xu hướng + so sánh bên trái, việc cần làm bên phải */
.giua-luoi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "tr vi" "bc vi"; gap: 16px; align-items: start }
.a-tr { grid-area: tr } .a-bc { grid-area: bc } .a-vi { grid-area: vi }

/* Biểu đồ xu hướng */
.tr-wrap { position: relative; min-width: 0 }
.tr-wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y }
.tr-wrap svg:focus-visible { outline-offset: 4px; border-radius: 4px }
.ax { fill: var(--muted); font-size: 11px }
.lb { fill: var(--ink); font-size: 12px; font-weight: 600 }
.lb .s { fill: var(--muted); font-weight: 400 }
.gr { stroke: var(--line); stroke-width: 1 }
.gr.goc { stroke: var(--bar-off) }
.ng { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 2 3 }
.ngt { fill: var(--bad); font-size: 11px }
.band { fill: var(--active) }
.ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.ln.tam { stroke-dasharray: 4 4 }
.ln.ngoai { stroke: var(--bar-off) }
.dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2 }
.dot.tam { fill: var(--surface); stroke: var(--accent) }
.xh { stroke: var(--muted); stroke-width: 1 }
.hit { fill: transparent; cursor: crosshair }
.chu-giai { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted) }
.chu-giai span { display: inline-flex; align-items: center; gap: 6px }
.chu-giai svg { width: 22px; height: 8px; flex: none }

/* Thanh so sánh */
.bc-ds { display: grid; gap: 4px }
.br { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 88px; gap: 4px 12px; align-items: center; padding: 6px 8px; margin-inline: -8px; border-radius: 8px; cursor: default }
.br:hover, .br:focus-visible { background: var(--sunken) }
.br-ten { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere }
.br-ten small { display: block; font-size: 12px; color: var(--muted); font-weight: 400 }
.br-tr { position: relative; height: 12px; border-radius: 0 4px 4px 0; background: var(--neutral-bg) }
.br-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bar) }
.br-tr i.xau { background: var(--bad) }
.br-tr s { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--bad) }
.br-v { text-align: right; color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap }
.br-v small { display: block; font-weight: 400; font-size: 12px; color: var(--muted) }
.br.tat .br-ten, .br.tat .br-v { color: var(--muted) }

/* Tooltip dùng chung */
#tip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--body); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); padding: 8px 10px; font-size: 12px; min-width: 180px; max-width: min(260px, calc(100vw - 16px)); display: grid; gap: 3px }
#tip .tp-d { color: var(--ink); font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
#tip .tp-r { display: flex; justify-content: space-between; gap: 12px }
#tip .tp-r b { color: var(--ink); font-weight: 600 }
#tip .tp-r b.to { font-size: 15px }
#tip .tp-m { color: var(--muted); text-align: right; margin-top: -3px }
#tip .tp-n { color: var(--muted) }

/* Việc cần làm */
.viec { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line) }
.viec:first-of-type { border-top: 0; padding-top: 0 }
.viec b { color: var(--ink); font-weight: 600 }
.viec .vi { font-size: 13px }
.viec .bc { font-size: 12px; color: var(--muted) }
.viec .hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 4px }
.viec .tien { font-size: 13px; color: var(--ink) }

/* Tab + bảng */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto }
.tabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 12px; margin-bottom: -1px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; min-height: 40px }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600 }
.cuon { overflow-x: auto; min-width: 0 }
table { border-collapse: collapse; width: 100%; font-size: 13px }
th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap }
td.ten { white-space: normal; min-width: 150px; max-width: 280px }
tr:last-child td { border-bottom: 0 }
.ph { text-align: right }
td b { color: var(--ink); font-weight: 600 }
.d2 { display: block; font-size: 12px; color: var(--muted) }
tr.tong td { background: var(--sunken); font-weight: 600; color: var(--ink) }
tr.bam { cursor: pointer }
tr.bam:hover td { background: var(--sunken) }
tr.mo-c td { color: var(--muted) }
.xau { color: var(--bad) }

/* Trạng thái */
.skel { display: block; background: var(--neutral-bg); border-radius: 6px; animation: nhap 1.2s ease-in-out infinite }
@keyframes nhap { 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none } }
.rong { display: grid; justify-items: start; gap: 8px; padding: 24px 16px; border: 1px dashed var(--line); border-radius: 8px; background: var(--sunken) }
.rong h3 { font-size: 14px }
.rong p { max-width: 60ch; font-size: 13px }
.rong.loi { border-color: var(--bad); background: var(--bad-bg) }
.rong.loi h3 { color: var(--bad) }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--ink); color: var(--surface); font-size: 13px; padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .25) }

@container st (max-width: 980px) {
  .giua-luoi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tr" "vi" "bc" }
}
@container st (max-width: 760px) {
  .chips-cuon { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 4px; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent) }
  .chips-cuon::-webkit-scrollbar { display: none }
  .ck { min-height: 40px }
  .pop { top: 52px; left: 0; right: 0; width: auto; padding: 12px }
  .thang2 { grid-template-columns: minmax(0, 1fr) }
  .thang2 .thang:first-child { display: none }
  .o-ngay { height: 44px }
  .o-ngay button { width: 40px; height: 40px }
  .so4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .o { border-left: 0; border-top: 1px solid var(--line); padding: 12px }
  .o:nth-child(even) { border-left: 1px solid var(--line) }
  .o:nth-child(-n+2) { border-top: 0 }
  .o .v { font-size: 22px }
  .khoi { padding: 14px }
  .dau-man h1 { font-size: 21px }
  .btn { min-height: 44px }
  .br { grid-template-columns: minmax(0, 1fr) auto; padding: 8px }
  .br-tr { grid-column: 1 / -1; grid-row: 2 }
}

/* Menu giữa các màn + khối thêm của Content / Ads / Tài khoản */
.menu { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px }
.menu a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 13px; border: 1px solid transparent }
.menu a:hover { color: var(--ink) }
.menu a[aria-current="page"] { color: var(--ink); background: var(--active); border-color: var(--accent); font-weight: 600 }
.chip.loi { color: var(--bad); border-color: var(--bad) } .chip.loi::before { background: var(--bad) }
.ghi-chu { border-left: 3px solid var(--warn); background: var(--warn-bg); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink) }
.bang-dai { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 8px }
.bang-dai thead th { position: sticky; top: 0; background: var(--surface); z-index: 1 }
td.mo, th.mo { width: 28px; padding-right: 0 }
.mo-nut { border: 0; background: none; width: 24px; height: 24px; color: var(--muted); border-radius: 6px }
.mo-nut:hover { background: var(--neutral-bg); color: var(--ink) }
tr.con td { background: var(--sunken) }
tr.con td:first-child { padding-left: 28px }
.tk { display: grid; gap: 8px; max-width: 520px }
.tk label { font-size: 12px; color: var(--muted) }
.tk input { height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--ink); font: inherit }

/* HE-P7: phần chưa dựng trong menu ("Sắp có (đợt n)", chỉ chữ, không liên kết) + dòng nguồn dưới ô số của Hôm nay */
.menu .sap-co { position: relative; flex: 1 1 100%; font-size: 13px; color: var(--muted) }
.menu .sap-co summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--line); list-style: none }
.menu .sap-co summary::-webkit-details-marker { display: none }
.menu .sap-co ul { list-style: none; margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }
.menu .sap-co li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; cursor: default }
.o .ng-o { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere }