/* Gà Võ CRM — biểu đồ, "Cần xử lý", số trên nút lọc + tinh chỉnh hiển thị (v1.5). Nạp sau app.css. */

/* ---------- tokens: categorical (fixed order, validated), status, chart chrome ---------- */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #6250d6; --viz-8: #e34948; --viz-other: #a3a29b;
  --st-good: #0ca30c; --st-warning: #fab219; --st-warning-2: #86b6ef; --st-serious: #ec835a; --st-critical: #d03b3b;
  --col: #E0A400; --col-hover: #B98700; --col-today: #7A5600;
  --grid: #ECE9E1; --axis: #CFCBC0; --tick: #7A7D84;
  --urgent: #C62828; --urgent-soft: #FDECEC; --warn-ink: #8A5A00; --warn-soft: #FFF3D1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767; --viz-other: #6d6c66;
    --st-warning-2: #5598e7;
    --col: #F2B705; --col-hover: #FFD043; --col-today: #FFE59A;
    --grid: #26262C; --axis: #3A3A42; --tick: #9A9CA4;
    --urgent: #FF6B6B; --urgent-soft: #3D1616; --warn-ink: #F2B705; --warn-soft: #3A3010;
  }
}
:root[data-theme="dark"] {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767; --viz-other: #6d6c66;
  --st-warning-2: #5598e7;
  --col: #F2B705; --col-hover: #FFD043; --col-today: #FFE59A;
  --grid: #26262C; --axis: #3A3A42; --tick: #9A9CA4;
  --urgent: #FF6B6B; --urgent-soft: #3D1616; --warn-ink: #F2B705; --warn-soft: #3A3010;
}

/* ---------- layout polish ---------- */
.main { max-width: 1440px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; } .clamp-2 { -webkit-line-clamp: 2; }
.card-head h2, .card-title h2 { font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.card-title { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.card-title.row { flex-direction: row; align-items: center; }
.card-title small { font-size: 12px; }
.card-title a { text-decoration: none; }
.toolbar.filters { align-items: center; }
.toolbar.filters .chips { padding-bottom: 2px; }
.range-label { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.range-box .input { width: auto; }
.table td { font-variant-numeric: tabular-nums; }
.table.compact td, .table.compact th { padding: 6px 8px; font-size: 13px; }
.prod-cell { max-width: 360px; line-height: 1.45; }
.prod-cell .qty-x { font-weight: 700; color: var(--text); }
.prod-name b { display: block; }
.prod-name .clamp-1 { max-width: 420px; }
.badge.xs { vertical-align: middle; }
@media (min-width: 720px) { .table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); } }

/* ---------- filter chips with counts ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; transition: background .12s, border-color .12s, opacity .12s; }
.chip:hover { border-color: var(--gold); }
.chip-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.chip.on .chip-count { background: rgba(255,255,255,.18); color: inherit; border-color: transparent; }
.chip.is-zero:not(.on) { opacity: .55; }
.chip.is-zero .chip-count { font-weight: 500; }
.chip-count.cc-urgent { background: var(--urgent); color: #fff; border-color: var(--urgent); }
.chip-count.cc-warn { background: var(--gold); color: #111; border-color: var(--gold-strong); }
.chip-urgent:not(.on) { border-color: color-mix(in srgb, var(--urgent) 55%, var(--line)); color: var(--urgent); font-weight: 600; }
.chip-warn:not(.on) { border-color: color-mix(in srgb, var(--gold) 70%, var(--line)); font-weight: 600; }

/* ---------- nav badges ---------- */
.nav-badge.nb-urgent { background: var(--urgent); animation: nb-pulse 2s ease-in-out infinite; }
.nav-badge[data-alert-badge]:not(.nb-urgent) { background: var(--gold); color: #111; }
.bn-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; line-height: 16px; min-width: 18px; font-size: 10px; padding: 0 5px; }
.nav-dot-urgent { background: var(--urgent); right: calc(50% - 22px); }
@keyframes nb-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgent) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- "Cần xử lý" strip ---------- */
.alerts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 14px; }
.alerts.has-urgent { border-color: color-mix(in srgb, var(--urgent) 45%, var(--line)); box-shadow: inset 4px 0 0 var(--urgent), var(--shadow); }
.alerts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.alerts-head h2 { font-size: 15px; }
.alerts-list { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .alerts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .alerts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--surface-2); min-width: 0; transition: transform .12s, border-color .12s; }
.alert-item:hover { color: var(--text); border-color: var(--gold); transform: translateY(-1px); }
.alert-item.lv-urgent { background: var(--urgent-soft); border-color: color-mix(in srgb, var(--urgent) 40%, transparent); }
.alert-item.lv-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.al-ico { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--line); color: var(--text); }
.lv-urgent .al-ico { background: var(--urgent); color: #fff; animation: nb-pulse 2s ease-in-out infinite; }
.lv-warn .al-ico { background: var(--gold); color: #111; }
.lv-info .al-ico { background: var(--blue-soft); color: var(--blue); }
.al-ico.ok { background: var(--green-soft); color: var(--green); }
.al-count { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; min-width: 26px; text-align: center; }
.lv-urgent .al-count { color: var(--urgent); }
.lv-warn .al-count { color: var(--warn-ink); }
.al-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.al-title { font-weight: 650; font-size: 14px; line-height: 1.3; }
.al-hint { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-go { color: var(--muted); font-weight: 700; }
.alerts.all-clear { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; flex-wrap: wrap; }

/* ---------- KPI v2 ---------- */
.kpis-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .kpis-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis-v2 .kpi-hero { grid-column: span 2; } }
.kpis-v2 .kpi-hero { grid-column: span 2; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.kpi-link:hover { color: inherit; border-color: var(--gold); transform: translateY(-1px); }
.kpi-title { text-transform: none; letter-spacing: 0; font-size: 13px; }
.kpi-value { font-size: 24px; line-height: 1.15; }
.kpi-value.hero { font-size: 34px; letter-spacing: -.5px; }
@media (max-width: 420px) { .kpi-value { font-size: 20px; } .kpi-value.hero { font-size: 28px; } }
.kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; }
.kpi-sub { color: var(--muted); }
.kpi-hero { padding-right: 150px; min-height: 108px; }
.kpi-spark { position: absolute; right: 14px; bottom: 12px; }
@media (max-width: 520px) { .kpi-hero { padding-right: 14px; } .kpi-spark { position: static; margin-top: 6px; } }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 1px 6px; border-radius: 6px; }
.delta.good { color: var(--green); background: var(--green-soft); }
.delta.bad { color: var(--red); background: var(--red-soft); }
.delta.flat { color: var(--muted); background: var(--surface-2); }
.delta-ctx { font-weight: 500; opacity: .8; }
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--col); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--col); opacity: .12; }
.spark-dot { fill: var(--col); stroke: var(--surface); stroke-width: 2; }

/* ---------- daily column chart ---------- */
.viz-block { display: flex; flex-direction: column; gap: 8px; }
.viz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.viz-summary { display: flex; gap: 18px; flex-wrap: wrap; }
.viz-stat { display: flex; flex-direction: column; }
.viz-stat small { color: var(--muted); font-size: 12px; }
.viz-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.viz-stat b .muted { font-weight: 500; font-size: 13px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.seg-btn { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--muted); font-weight: 600; }
.seg-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.viz { position: relative; width: 100%; min-height: 200px; }
.viz-svg { display: block; overflow: visible; touch-action: pan-y; }
.viz-grid { stroke: var(--grid); stroke-width: 1; }
.viz-base { stroke: var(--axis); stroke-width: 1; }
.viz-tick, .viz-xlabel { fill: var(--tick); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-xlabel.is-today { fill: var(--text); font-weight: 700; }
.viz-col { fill: var(--col); transition: fill .1s, opacity .1s; }
.viz-col.is-today { fill: var(--col-today); }
.viz-svg:hover .viz-col:not(.is-hover) { opacity: .55; }
.viz-col.is-hover { fill: var(--col-hover); }
.viz-avg { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 4; opacity: .35; }
.viz-avg-label { fill: var(--muted); font-size: 11px; font-weight: 600; }
.viz-peak { fill: var(--text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-hit { fill: transparent; cursor: crosshair; }
.viz-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%); opacity: 0; transition: opacity .1s;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
:root[data-theme="dark"] .viz-tip { background: #2A2A31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz-tip { background: #2A2A31; } }
.viz-tip.on { opacity: 1; }
.viz-tip-title { font-weight: 700; margin-bottom: 4px; color: var(--gold); }
.viz-tip-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.viz-tip-row b { font-variant-numeric: tabular-nums; margin-left: 12px; }
.viz-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.viz-table summary { cursor: pointer; font-size: 12px; color: var(--muted); width: fit-content; }
.viz-table .table-wrap { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.viz-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- donut ---------- */
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-ring { position: relative; width: 168px; height: 168px; flex-shrink: 0; margin: 0 auto; }
.donut-svg { width: 100%; height: 100%; display: block; }
.donut-track { fill: none; stroke: var(--surface-2); }
.donut-seg { fill: none; transition: opacity .12s; cursor: pointer; }
.donut-seg.dim, .donut-li.dim { opacity: .3; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: 20px; font-variant-numeric: tabular-nums; }
.donut-center small { color: var(--muted); font-size: 12px; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.donut-li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; transition: opacity .12s, background .12s; outline: none; }
.donut-li:hover, .donut-li:focus-visible { background: var(--surface-2); }
.donut-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.donut-name small { color: var(--muted); font-weight: 400; font-size: 12px; }
.donut-val { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.donut-val b { font-size: 14px; } .donut-val small { color: var(--muted); font-size: 12px; }

/* ---------- rank bars ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rank-row { display: flex; gap: 10px; align-items: flex-start; }
.rank-no { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); margin-top: 1px; }
.rank-no.top { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rank-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rank-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: inherit; text-decoration: none; }
.rank-val { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-val b { font-size: 14px; } .rank-val small { color: var(--muted); font-size: 12px; }
.rank-track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rank-fill { height: 100%; background: var(--col); border-radius: 0 3px 3px 0; }

/* ---------- segment bar (order status) ---------- */
.segwrap { display: flex; flex-direction: column; gap: 12px; }
.segbar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface); }
.segbar-seg { min-width: 4px; height: 100%; }
.segbar-seg:first-child { border-radius: 7px 0 0 7px; } .segbar-seg:last-child { border-radius: 0 7px 7px 0; }
.segbar-seg:only-child { border-radius: 7px; }
.seg-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.seg-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; min-width: 0; }
a.seg-item:hover { background: var(--surface-2); color: var(--text); }
.seg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-item b { font-variant-numeric: tabular-nums; }
.seg-item small { color: var(--muted); font-size: 12px; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- AI card ---------- */
.quiet-empty { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px; }
.quiet-empty p { margin: 2px 0 0; }
.quiet-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--gold-soft); color: var(--warn-ink); font-size: 16px; }
.ai-more { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ai-more b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .nav-badge.nb-urgent, .lv-urgent .al-ico { animation: none; } }
@media print { .alerts { display: none !important; } }

/* short ranges: context days muted, selected days solid; values on caps */
.viz-col.is-ctx { fill: var(--col); opacity: .32; }
.viz-svg:hover .viz-col.is-ctx:not(.is-hover) { opacity: .2; }
.viz-cap { fill: var(--text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-cap.is-ctx { fill: var(--muted); font-weight: 500; }
.viz-xlabel.is-focus { fill: var(--text); font-weight: 700; }
.viz-sw.ctx { background: var(--col); opacity: .32; }
.viz-legend-note small { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.viz-legend-note { justify-content: flex-end; }

/* logo is a link to the home page */
.brand-link { text-decoration: none; color: inherit; cursor: pointer; border-radius: 10px; }
.brand-link:hover { color: inherit; }
.sidebar .brand-link:hover .brand-logo, .topbar .brand-link:hover .brand-logo { filter: drop-shadow(0 1px 10px rgba(242,183,5,.45)); }
.sidebar .brand-link { color: #fff; }
.topbar .brand-link { color: #fff; }

/* phones: no truncated product names, compact deltas in small tiles */
@media (max-width: 560px) {
  .rank-top { flex-wrap: wrap; row-gap: 0; }
  .rank-name { white-space: normal; flex: 1 1 100%; }
  .rank-val { width: 100%; }
  .kpi:not(.kpi-hero) .delta-ctx { display: none; }
  .kpi:not(.kpi-hero) .kpi-sub { flex-basis: 100%; }
  .viz-summary { gap: 12px; }
  .viz-head { align-items: flex-start; }
  .alert-item { padding: 10px; }
  .al-hint { white-space: normal; }
}

/* pinned day detail (click a column) */
.viz-col.is-pinned { fill: var(--col-hover); }
.viz-col.is-ctx.is-pinned { opacity: .7; }
.viz-svg:hover .viz-col.is-pinned:not(.is-hover) { opacity: .85; }
.viz-svg:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.viz-detail { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.viz-detail-head { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.viz-pin { font-size: 12px; }
.viz-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.viz-detail-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.viz-detail-grid small { color: var(--muted); font-size: 12px; }
.viz-detail-grid b { font-size: 18px; font-variant-numeric: tabular-nums; }
.viz-detail-grid .delta { align-self: flex-start; font-size: 11px; }
.viz-detail-go { align-items: flex-end; }
@media (max-width: 640px) { .viz-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viz-detail-go { grid-column: span 2; align-items: stretch; } .viz-detail-go .btn { width: 100%; } }
.live-note { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.viz-svg:focus:not(:focus-visible) { outline: none; }

/* ================= Tài chính ================= */
.fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .fin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fin-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-strong .kpi-value { font-size: 28px; }
.kpi-red .kpi-value { color: var(--red); }
.stack-v.tight { gap: 8px; }
.notice { border: 1px solid var(--line); background: var(--surface-2); }

.statement { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.st-row { display: grid; grid-template-columns: 1fr 56px minmax(110px, auto); gap: 8px; align-items: baseline; padding: 7px 4px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.st-row:last-child { border-bottom: 0; }
.st-label { min-width: 0; display: flex; flex-direction: column; }
.st-label a { text-decoration: none; }
.st-hint { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.st-auto { color: var(--warn-ink); font-size: 12px; }
.st-pct { color: var(--muted); font-size: 12px; text-align: right; }
.st-val { text-align: right; white-space: nowrap; font-weight: 600; }
.st-indent .st-label { padding-left: 14px; }
.st-indent .st-val { font-weight: 500; }
.st-head { font-weight: 700; }
.st-head .st-val { font-weight: 800; font-size: 15px; }
.st-subtotal { background: var(--surface-2); border-radius: 6px; border-bottom: 0; margin: 2px 0; font-weight: 700; }
.st-subtotal-soft { font-weight: 600; color: var(--muted); }
.st-total { margin-top: 6px; padding: 10px 8px; border-radius: 8px; border: 0; background: var(--green-soft); font-weight: 800; }
.st-total .st-val { font-size: 18px; color: var(--green); }
.st-total.is-neg { background: var(--red-soft); }
.st-total.is-neg .st-val { color: var(--red); }
.st-section { margin-top: 10px; padding: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.st-empty { padding: 6px 18px; color: var(--muted); font-size: 13px; font-style: italic; }

.table.months td { vertical-align: middle; }
.pbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pbar-track { position: relative; flex: 1; min-width: 60px; max-width: 160px; height: 8px; background: var(--surface-2); border-radius: 4px; }
.pbar-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--axis); }
.pbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.pbar-fill.pos { left: 50%; background: var(--st-good); }
.pbar-fill.neg { right: 50%; background: var(--st-critical); }
.pbar b { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

.ledger { display: flex; flex-direction: column; }
.led-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.led-row:last-child { border-bottom: 0; }
.led-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 6px 0; border-radius: 8px; background: var(--surface-2); }
.led-date b { font-size: 14px; } .led-date small { color: var(--muted); font-size: 11px; }
.led-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.led-reason { font-weight: 600; overflow-wrap: anywhere; }
.led-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.led-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.led-amt b { font-size: 15px; white-space: nowrap; }
.led-in .led-amt b { color: var(--green); }
.icon-btn.sm { min-width: 30px; height: 30px; font-size: 14px; }
@media (max-width: 560px) { .led-row { grid-template-columns: 48px 1fr; } .led-amt { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; } }

.fin-form .seg-lg { width: 100%; }
.seg-lg .seg-btn { flex: 1; padding: 10px; font-size: 15px; }
.fin-form .money-in { font-size: 20px; font-weight: 700; }
.cat-hint { display: block; margin-top: 4px; }

.led-group { background: color-mix(in srgb, var(--gold-soft) 45%, transparent); border-radius: 8px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.st-auto { font-size: 11px; font-weight: 500; }

/* COD: phần chưa đối soát (cảnh báo, không phải số chính) */
.kpi-sub-warn { display: block; margin-top: 4px; color: var(--warn-ink, #8a5a00); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpi-sub-warn { color: #f2c46d; } }
:root[data-theme="dark"] .kpi-sub-warn { color: #f2c46d; }

/* Nhập file Shopee */
.imp { display: flex; flex-direction: column; gap: 10px; }
.imp ol { margin: 0; padding-left: 18px; color: var(--muted); }
.imp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 6px 0; }
.imp-kpis > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.imp-kpis b { font-size: 18px; font-variant-numeric: tabular-nums; }
.imp-kpis small { color: var(--muted); font-size: 12px; }
.imp-list summary { cursor: pointer; font-weight: 600; font-size: 13px; margin: 6px 0; }
.imp-list ul { margin: 0; padding-left: 18px; font-size: 13px; max-height: 220px; overflow: auto; overflow-wrap: anywhere; }

/* ---------- Hội thoại v2: ảnh đại diện, cột khách, thanh công cụ soạn tin ---------- */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.view-chips { margin-top: 6px; }
.conv-panel { display: none; padding: 0; overflow: auto; min-height: 0; }
.conv-panel.open { display: block; position: fixed; inset: 0 0 0 auto; width: min(380px, 100vw); z-index: 60; border-radius: 0; box-shadow: var(--shadow); }
.panel-inner { padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.panel-close { position: absolute; right: 8px; top: 8px; }
.panel-head { display: flex; gap: 12px; align-items: center; }
.panel-rows { display: flex; flex-direction: column; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.panel-inner h4 { margin: 6px 0 0; font-size: 14px; }
.panel-orders { display: flex; flex-direction: column; gap: 6px; }
.panel-order { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.panel-order:hover { border-color: var(--gold); }
@media (min-width: 1280px) {
  .conv-layout.with-panel.has-thread { grid-template-columns: 320px minmax(0, 1fr) 320px; }
  .conv-layout.with-panel.has-thread .conv-panel { display: block; position: static; width: auto; box-shadow: none; border-radius: var(--radius); }
  .conv-panel .panel-close, .panel-toggle { display: none; }
}
.composer-v2 { flex-direction: column; align-items: stretch; gap: 6px; }
.composer-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-row textarea { flex: 1; }
.suggest-imgs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.img-tile { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; }
.img-tile:hover { border-color: var(--gold); }
.img-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.img-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.qr-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.qr-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.qr-item:hover { border-color: var(--gold); }
.qr-edit { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }

/* Đơn hàng nhóm theo ngày + lọc nhanh; thông tin đặt hàng khách để lại */
.day-chips { margin: 4px 0 10px; }
.day-group { margin-bottom: 14px; }
.day-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 6px; font-size: 15px; }
.draft-box { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft, #fff8e1); overflow-wrap: anywhere; }
.draft-box .btn { align-self: flex-start; margin-top: 4px; }
.lc-draft { font-size: 12.5px; font-weight: 600; color: var(--gold-strong, #8a6d00); }