/* Crane Tea store dashboard - phone-first, authored at 414px.
 *
 * The palette is sampled from the Crane Tea logo: deep tea green, brand gold,
 * cream.  Two colour rules are load-bearing and must not drift, because the
 * whole page is read through them:
 *
 *     green = actual revenue    gold  = the target itself
 *     red   = below target      blue  = above target
 *
 * Expand/collapse is native <details> or CSS-only (a hidden checkbox plus a
 * label), so the cards and pickers work with no JavaScript at all; charts.js
 * only draws the two Chart.js canvases.
 */

/* The design-system tokens (colours, type, spacing, radii, elevation, motion)
 * now live in `ct-shell.css`, which base.html links FIRST. This file keeps only
 * three app-local hairline aliases, mapped onto the shared tokens so the older
 * dashboard rules below read the September-2026 palette without each being
 * rewritten. Fonts are imported by ct-shell too. */
:root {
  --vien: rgba(10, 82, 54, .07);
  --gach: var(--rule-dashed);
  --hang: var(--rule-row);
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--green-900);
  color: var(--ink-900);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  padding: 28px 16px 40px;
  display: flex;
  justify-content: center;
}

a { color: inherit; text-decoration: none; }

/* The phone column: authored at 414px, allowed to grow to a comfortable 560px
 * on a tablet, always centred.  The KPI grid stays at two columns either way. */
.dien-thoai {
  width: 414px;
  max-width: 100%;
  background: var(--cream-100);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

@media (min-width: 600px) { .dien-thoai { width: 560px; } }

/* The state machine: one hidden checkbox per expandable card and per picker. */
.congtac { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* ---------------------------------------------------------------- header */
.dau-trang { background: var(--green-700); padding: 11px 14px 10px; }

.hang-thuong-hieu { display: flex; align-items: center; gap: 10px; }

.chu-hieu {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--gold-500); white-space: nowrap;
}

/* The store chip must WRAP and show the full name - never truncate it. */
.chip-cua-hang {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; text-align: left; color: inherit;
}

.o-ct {
  width: 18px; height: 18px; border-radius: 6px; flex: none;
  background: var(--gold-500); color: var(--green-700);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.ten-cua-hang { font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.mui-ten { color: rgba(255, 255, 255, .45); font-size: 10px; flex: none; }

/* ------------------------------------------------------ the store switcher
 * An admin picks out of 46 stores in here.  The whole brand row is the
 * <summary>, so the list gets the FULL header width and a real row per store
 * instead of a centred tile squeezed into the chip's third of the line
 * (captain, 2026-08-19: "this UI is messed up").  It is still a <details>: with
 * JavaScript off it opens, scrolls and picks; the filter box on top of it is
 * `tim-cua-hang.js`. */
.chon-cua-hang > summary {
  list-style: none; cursor: pointer;
  min-height: 40px;   /* the phone rule: every control is tappable */
}
.chon-cua-hang > summary::-webkit-details-marker { display: none; }
.chon-cua-hang[open] .mui-ten { display: inline-block; transform: rotate(180deg); }

.khung-cua-hang { margin-top: 8px; }
.khung-cua-hang .tieu-de { display: flex; align-items: center; gap: 6px; }
.dem-cua-hang {
  font-size: 10px; font-weight: 700; color: var(--green-700);
  background: rgba(14, 77, 56, .1); border-radius: 999px; padding: 1px 7px;
}

/* The filter box.  16px or the phone zooms the whole page in on focus. */
.o-tim {
  margin-top: 9px; width: 100%; box-sizing: border-box; min-width: 0;
  min-height: 40px; padding: 0 11px; border-radius: 11px;
  border: 1px solid rgba(14, 77, 56, .18); background: #fff;
  font-family: inherit; font-size: 16px; color: var(--green-700);
  -webkit-appearance: none; appearance: none;
}
.o-tim:focus { outline: none; border-color: var(--green-700); }
.o-tim::placeholder { color: var(--ink-400); font-size: 12px; }

/* Eight rows and then a scroll, so the list never buries the page under it. */
.danh-sach-cua-hang {
  margin-top: 8px; max-height: 320px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-radius: 11px; border: 1px solid rgba(14, 77, 56, .12); background: #fff;
}
.danh-sach-cua-hang::-webkit-scrollbar { width: 4px; }
.danh-sach-cua-hang::-webkit-scrollbar-thumb { background: rgba(14, 77, 56, .22); border-radius: 2px; }

.dong-cua-hang {
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 7px 11px;
  border-top: 1px solid rgba(14, 77, 56, .08);
  font-size: 12px; color: var(--green-700); text-align: left;
}
.dong-cua-hang:first-child { border-top: 0; }
.dong-cua-hang .ten { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.dong-cua-hang .phu { flex: none; font-size: 10px; color: var(--ink-400); }
.dong-cua-hang.dang-chon { background: var(--green-700); color: #fff; }
.dong-cua-hang.dang-chon .phu { color: rgba(255, 255, 255, .7); }
.dong-cua-hang[hidden] { display: none; }

.khong-thay { margin-top: 9px; font-size: 11px; color: var(--ink-400); text-align: center; }

.hang-ky { margin-top: 8px; display: flex; gap: 6px; align-items: center; }

/* The Ky chip.  Default it is a quiet outline; while a CUSTOM range is active it
 * takes the gold treatment and every segmented pill goes inactive, so exactly
 * one control ever reads as selected. */
.chip-ky {
  display: flex; align-items: center; gap: 7px;
  border-radius: 10px; padding: 6px 9px; cursor: pointer;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(219, 178, 76, .3);
  min-height: 40px;
}
.chip-ky .nhan { font-size: 10px; color: rgba(255, 255, 255, .55); }
.chip-ky .gia-tri { font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #fff; }
.chip-ky .caret { font-size: 10px; color: rgba(255, 255, 255, .45); }

.chip-ky.tuy-chon { background: var(--gold-500); border-color: var(--gold-500); }
.chip-ky.tuy-chon .nhan { color: rgba(14, 77, 56, .6); }
.chip-ky.tuy-chon .gia-tri { color: var(--green-700); }
.chip-ky.tuy-chon .caret { color: rgba(14, 77, 56, .55); }

.caret::after { content: '▾'; }
#mo-ky:checked ~ .hang-ky .caret::after { content: '▴'; }

/* Segmented pill groups */
.nhom-pill {
  display: flex; gap: 2px; background: rgba(0, 0, 0, .16);
  padding: 2px; border-radius: 9px;
}
.nhom-pill.so-huu { margin-top: 7px; gap: 4px; background: rgba(0, 0, 0, .18); }

.pill {
  padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; color: rgba(255, 255, 255, .62);
  display: flex; align-items: center; justify-content: center; min-height: 30px;
}
.pill.dang-chon { background: var(--gold-500); color: var(--green-700); }

/* ------------------------------------------------- date-range picker popover
 * It pushes the page down instead of floating: on a phone an absolutely
 * positioned popover is one mis-tap away from being unreachable. */
.chon-ngay {
  display: none;
  margin-top: 8px; background: var(--cream-100);
  border-radius: 14px; padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
#mo-ky:checked ~ .chon-ngay { display: block; }
/* The admin store picker reuses the same popover inside a <details>, where the
   sibling rule above cannot reach it - without this it opens onto nothing. */
details[open] > .chon-ngay { display: block; }

.chon-ngay .tieu-de { font-size: 11px; font-weight: 600; color: var(--ink-600); }

.luoi-mau {
  margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.mau {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; border-radius: 11px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center;
  background: #fff; border: 1px solid rgba(14, 77, 56, .16); color: var(--green-700);
}
.mau.dang-chon { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.hang-o-ngay { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.o-ngay { flex: 1; min-width: 0; }
.o-ngay label { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-400); }
/* box-sizing + min-width:0 + max-width keep the native calendar glyph inside
 * the field on mobile Safari and Chrome; without them it overflows. */
.o-ngay input {
  margin-top: 4px; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
  font-family: inherit; font-size: 11.5px; padding: 8px 7px; min-height: 40px;
  border: 1px solid rgba(14, 77, 56, .22); border-radius: 10px;
  background: #fff; color: var(--ink-900);
}

.hang-nut { margin-top: 11px; display: flex; gap: 8px; }
.nut-chinh, .nut-phu {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; border: 0;
}
.nut-chinh { flex: 1; background: var(--green-700); color: #fff; }
.nut-phu { padding: 0 16px; background: #fff; border: 1px solid rgba(14, 77, 56, .2); color: var(--green-700); }

.ghi-chu-nho { margin-top: 9px; font-size: 10px; line-height: 1.5; color: var(--ink-400); }

/* -------------------------------------------------------- freshness strip */
.thanh-tuoi {
  background: var(--green-800); padding: 8px 14px;
  border-top: 1px solid rgba(219, 178, 76, .2);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: rgba(255, 255, 255, .62);
}
.thanh-tuoi .pham-vi { flex: 1; min-width: 0; }
.thanh-tuoi strong { color: #fff; font-weight: 600; }
.chip-lam-moi {
  display: flex; align-items: center; gap: 5px; flex: none;
  background: rgba(255, 255, 255, .08); border-radius: 99px; padding: 3px 8px;
}
.chip-lam-moi .glyph { font-size: 10px; color: var(--gold-500); }
.chip-lam-moi .gio { font-size: 10px; font-weight: 600; color: #f0e2bd; white-space: nowrap; }

/* ------------------------------------------------------------------ body */
.than { padding: 16px 14px 28px; display: flex; flex-direction: column; gap: 13px; }

.the {
  background: var(--surface-card);
  border-radius: var(--radius-card); padding: var(--pad-card); position: relative;
  box-shadow: var(--shadow-card);
}
.the.hero { box-shadow: var(--shadow-raised); }
.the.bieu-do { padding: 16px 14px 14px; }

/* Section labels group the cards on a page (11/700 uppercase). */
.ct-section-label {
  padding: 0 2px; font-size: var(--text-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-500);
}
/* A slim freshness caption at the top of a page (replaces the old strip). */
.ct-freshness { padding: 0 2px; font-size: var(--text-caption); color: var(--ink-400); line-height: var(--leading-snug); }
.ct-freshness strong { color: var(--ink-600); font-weight: 600; }
.ct-foot-page { padding-top: 4px; padding-bottom: 20px; }
/* A plain explanatory card (e.g. Mục tiêu for an account with no plan). */
.ct-note-card {
  background: var(--surface-card); border-radius: var(--radius-card); padding: var(--pad-card);
  box-shadow: var(--shadow-card); font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--ink-600);
}
/* A non-interactive card header (no expand/collapse). */
.dau-the.tinh { cursor: default; min-height: 0; margin-bottom: 2px; }

.dau-the {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; min-height: 38px;
}
.dau-the .nhom { min-width: 0; display: block; }
.tieu-de-the { font-size: 13px; font-weight: 600; display: block; }
.tieu-de-the.nho { font-size: 12px; color: var(--ink-600); }
.phu-de-the { font-size: 10.5px; color: var(--ink-400); margin-top: 2px; display: block; }

/* the "Xem chi tiet / Thu gon" pill */
.pill-chi-tiet {
  font-size: 10.5px; font-weight: 600; color: var(--green-700);
  background: rgba(14, 77, 56, .07); padding: 5px 9px; border-radius: 99px;
  white-space: nowrap; flex: none;
}
.pill-chi-tiet.vang { background: var(--gold-500); color: var(--green-700); padding: 5px 10px; }
.chi-tiet { display: none; }
.congtac:checked ~ .dau-the .khi-dong,
.dau-the .khi-mo { display: none; }
.congtac:checked ~ .dau-the .khi-mo { display: inline; }
.congtac:checked ~ .chi-tiet { display: block; }
.congtac:checked ~ .dau-the .phu-de-dong { display: none; }
.dau-the .phu-de-mo { display: none; }
.congtac:checked ~ .dau-the .phu-de-mo { display: block; }

/* ------------------------------------------------------- 1. headline card */
/* The redesigned hero: title, then a row with the figure LEFT and the two delta
 * chips stacked RIGHT, then the inset boxes, then the basis footer. */
.hero-title { font-size: var(--text-title); font-weight: 600; color: var(--ink-900); }
.hero-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.hero-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.hero-foot { margin-top: 12px; font-size: var(--text-caption); color: var(--ink-400); }

.so-lon {
  display: flex; align-items: flex-end; gap: 6px;
}
.so-lon .gia-tri {
  font-size: var(--text-display); font-weight: 700; letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight); color: var(--measure-actual);
}
.so-lon .don-vi { font-size: var(--text-title); font-weight: 600; color: var(--ink-400); padding-bottom: 5px; }

.hang-chip { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.chip-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 99px;
  white-space: nowrap;
}
.chip-delta .cau { opacity: .62; font-weight: 500; }
.chip-delta.nho { font-size: 10.5px; padding: 3px 7px; }
.chip-len { color: var(--status-ok); background: var(--status-ok-fill); }
.chip-xuong { color: var(--status-bad); background: var(--status-bad-fill); }
.chip-trong { color: var(--status-flat); background: var(--status-flat-fill); }

.hai-o { margin-top: 14px; padding-top: 14px; border-top: var(--rule-dashed); display: flex; gap: 12px; }
.o-nho { flex: 1; border-radius: var(--radius-box); padding: 12px; min-width: 0; }
.o-nho.net { background: var(--surface-inset); }
.o-nho.mt { background: var(--surface-inset-warm); }
.o-nho .nhan { font-size: var(--text-caption); font-weight: 600; color: var(--ink-500); }
.o-nho .doi { display: flex; align-items: flex-end; gap: 3px; margin-top: 4px; }
.o-nho .gia-tri { font-size: var(--text-figure-sm); font-weight: 700; letter-spacing: -.02em; line-height: var(--leading-tight); color: var(--ink-900); }
.o-nho .don-vi { font-size: var(--text-caption); color: var(--ink-400); padding-bottom: 2px; }
.o-nho .chan { font-size: 10px; color: var(--ink-400); margin-top: 5px; line-height: 1.45; }

/* completion colours - "100% is done" reading */
.muc-dat { color: var(--ok-ink) !important; }
.muc-gan { color: var(--warn) !important; }
.muc-thieu { color: var(--danger) !important; }
.muc-vuot { color: var(--blue) !important; }
.muc-trong { color: var(--ink-400) !important; }

/* ------------------------------------------------------------ mini tables */
.bang { margin-top: 13px; border-top: var(--gach); padding-top: 11px; }
.bang.lien { margin-top: 12px; padding-top: 10px; }
.bang .ten-bang { font-size: 11px; font-weight: 600; color: var(--ink-600); }
.bang .dau-cot {
  display: flex; align-items: center; gap: 8px; padding: 8px 0 6px;
  font-size: 9.5px; font-weight: 600; color: var(--ink-400);
}
.bang .hang-bang {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-top: var(--hang); font-size: 11.5px;
}
.bang .hang-bang.tong {
  padding: 8px 0 0; border-top: 1px solid rgba(14, 77, 56, .18); font-weight: 700;
}
/* The day-by-day detail under "Doanh thu theo ngày": every day of the month
 * from the 1st, in a scroller, so the list can be complete without pushing the
 * rest of the page down a screen and a half (captain, 2026-08-19).  The Tổng row
 * is deliberately OUTSIDE it - the month's total stays on screen while the days
 * scroll - and `-webkit-overflow-scrolling` keeps the flick native on iOS. */
.cuon-ngay {
  max-height: 208px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cuon-ngay::-webkit-scrollbar { width: 4px; }
.cuon-ngay::-webkit-scrollbar-thumb { background: rgba(14, 77, 56, .22); border-radius: 2px; }

.c-ten { flex: 1.4; display: flex; align-items: center; gap: 6px; min-width: 0; }
.c-ten span.chu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-so { flex: 1; text-align: right; font-weight: 600; }
.c-so.mo { color: var(--ink-500); font-weight: 400; }
.c-pct { width: 46px; text-align: right; font-weight: 600; }
.o-mau { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ghi-chu { margin-top: 8px; font-size: 10px; line-height: 1.5; color: var(--ink-400); }

/* ------------------------------------------------------------- 2. KPI grid */
.luoi-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-kpi); }
.o-kpi {
  background: var(--surface-card); border-radius: var(--radius-tile);
  padding: 14px; box-shadow: var(--shadow-card);
}
.o-kpi .nhan {
  font-size: var(--text-label); font-weight: 600; color: var(--ink-600);
  min-height: 32px; line-height: var(--leading-snug);
}
.o-kpi .doi { display: flex; align-items: flex-end; gap: 4px; margin-top: 6px; }
.o-kpi .gia-tri { font-size: var(--text-figure); font-weight: 700; letter-spacing: var(--tracking-figure); line-height: var(--leading-tight); color: var(--ink-900); }
.o-kpi .don-vi { font-size: var(--text-caption); color: var(--ink-400); padding-bottom: 3px; }
.o-kpi .hang-chip { margin-top: 8px; }
.o-kpi .chan { margin-top: 7px; font-size: 10.5px; line-height: 1.45; color: var(--ink-400); }

/* ------------------------------------------------------- 3. progress card */
.the-tien-do {
  background: var(--surface-card-dark); border-radius: var(--radius-card); padding: var(--pad-card);
  color: #fff; box-shadow: var(--shadow-raised);
}
.the-tien-do .tieu-de-the { font-size: 13.5px; }
.the-tien-do .phu-de-the { font-size: 10.5px; color: rgba(255, 255, 255, .5); }

.bang-toi {
  margin-top: 13px; background: rgba(0, 0, 0, .16); border-radius: 14px; padding: 12px;
}
.bang-toi .ten-bang { font-size: 11px; font-weight: 600; color: var(--gold-500); }
.bang-toi .dau-cot { color: rgba(255, 255, 255, .5); }
.bang-toi .hang-bang { border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.bang-toi .c-so.mo { color: rgba(255, 255, 255, .72); }
.bang-toi .ghi-chu { margin-top: 9px; color: rgba(255, 255, 255, .5); }
/* The in-store channels are brand green, which is the panel's own colour - a
 * hairline ring keeps their swatch visible instead of vanishing into it. */
.bang-toi .o-mau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.thang-du { color: var(--ok) !important; }
.thieu-hut { color: var(--danger-soft) !important; }

.thong-bao-vang {
  margin-top: 11px; background: rgba(219, 178, 76, .14);
  border: 1px solid rgba(219, 178, 76, .34); border-radius: 12px;
  padding: 10px 12px; font-size: 11px; line-height: 1.5; color: #f2e6c8;
}
.thong-bao-vang strong { font-weight: 600; }

.hai-gap { margin-top: 13px; display: flex; gap: 10px; }
.o-gap { flex: 1; border-radius: 13px; padding: 11px 12px; min-width: 0; }
.o-gap.vuot { background: rgba(127, 214, 168, .12); border: 1px solid rgba(127, 214, 168, .35); }
.o-gap.thieu { background: rgba(194, 65, 12, .18); border: 1px solid rgba(255, 180, 160, .4); }
.o-gap.trong { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.o-gap .nhan { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.o-gap .doi { display: flex; align-items: flex-end; gap: 3px; margin-top: 4px; }
.o-gap .gia-tri { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.o-gap .don-vi { font-size: 10.5px; color: rgba(255, 255, 255, .6); padding-bottom: 3px; }
.o-gap .chan { font-size: 10px; color: rgba(255, 255, 255, .55); margin-top: 4px; line-height: 1.4; }

.khoi-tien-do { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.khoi-tien-do .hang-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.khoi-tien-do .nhan-ky { font-size: 11.5px; color: rgba(255, 255, 255, .66); }
.khoi-tien-do .pct { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.khoi-tien-do .pct .dv { font-size: 14px; font-weight: 600; opacity: .7; }
.khoi-tien-do .dong-cuoi { margin-top: 7px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.khoi-tien-do .dong-cuoi strong { color: #fff; font-weight: 600; }

.thanh { margin-top: 8px; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.thanh > i { display: block; height: 100%; border-radius: 99px; background: var(--gold-500); }
.thanh > i.tot { background: var(--ok); }
.thanh.mong { height: 6px; }
.thanh.mong > i { background: rgba(219, 178, 76, .75); }

.o-du-bao { margin-top: 16px; background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 13px; }
.o-du-bao .hang-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.o-du-bao .ten { font-size: 11.5px; font-weight: 600; color: var(--gold-500); }
.o-du-bao .nhip { font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.o-du-bao .doi { margin-top: 7px; display: flex; align-items: flex-end; gap: 8px; }
.o-du-bao .gia-tri { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.o-du-bao .gia-tri .dv { font-size: 13px; font-weight: 600; opacity: .65; }
.o-du-bao .pct { font-size: 12px; font-weight: 600; padding-bottom: 4px; }
.o-du-bao .chan { margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.o-du-bao .pct.tot { color: var(--ok); }
.o-du-bao .pct.chua { color: var(--gold-500); }

/* --------------------------------------------------------- 4-5. the charts */
.chu-thich { display: flex; gap: 11px; align-items: center; margin-top: 9px; padding: 0 3px; flex-wrap: wrap; }
.chu-thich span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-500); }
.chu-thich .o-mau.duong { width: 12px; height: 0; border-top: 2px dashed var(--gold-600); border-radius: 0; }
.khung-bieu-do { margin-top: 8px; position: relative; }
.khung-bieu-do canvas { display: block; width: 100% !important; }

.chu-thich.gio { gap: 12px; padding: 2px 3px 0; margin-top: 0; }
.chu-thich.gio span { font-size: 10.5px; }
.dong-cao-diem { margin-top: 8px; padding: 0 3px; font-size: 10.5px; font-weight: 600; color: var(--green-700); }

/* -------------------------------------------------------------- 6. heatmap */
.nhiet { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.nhiet-hang { display: flex; align-items: center; gap: 6px; }
.nhiet-hang .ten-ngay { width: 26px; font-size: 10px; font-weight: 600; color: var(--ink-500); flex: none; }
.nhiet-o { flex: 1; display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; }
/* Every cell states its own money (captain, 2026-08-19), in millions with one
 * decimal - the same device the charts use.  SIXTEEN columns since the 23h slot
 * landed (captain, 2026-08-22): the gap dropped 3px -> 2px to pay for the extra
 * column, so a 360px phone still leaves ~17.5px per cell and the 8px figure
 * still fits.  A cell that traded nothing draws no text, ten million and up
 * drops the decimal, and on a screen too narrow for even that the text is
 * dropped rather than overflowed - the colour still carries the reading. */
.nhiet-o i {
  display: flex; align-items: center; justify-content: center;
  height: 20px; border-radius: 3px;
  font-size: 8px; font-style: normal; font-weight: 600;
  line-height: 1; letter-spacing: -.2px;
  overflow: hidden; white-space: nowrap;
}
/* Auto-contrast: the deep-green cells carry light text, the pale ones dark. */
.nhiet-o i.o-sang { color: rgba(255, 255, 255, .95); }
.nhiet-o i.o-toi { color: var(--ink-500); }
@media (max-width: 359px) { .nhiet-o i { font-size: 0; } }
.nhiet-truc { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.nhiet-truc .dem { width: 26px; flex: none; }
.nhiet-truc .gio {
  flex: 1; display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-400);
}
.nhiet-thang { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
/* The legend now carries real dong figures, not "thap"/"cao": they are wider,
   so they get their own colour weight and must not wrap. */
.nhiet-thang span {
  font-size: 10px; color: var(--ink-500); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nhiet-ghi { margin-top: 6px; }
/* The channel slicer.  `.nhom-pill` was authored for the dark header, so inside
   a white card it needs the inverse ink; and it scrolls sideways rather than
   wrapping into three rows on a 414 px column. */
.nhom-pill.kenh-nhiet {
  margin-top: 12px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start;
  background: rgba(14, 77, 56, .07); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nhom-pill.kenh-nhiet::-webkit-scrollbar { display: none; }
.nhom-pill.kenh-nhiet .pill {
  flex: none; white-space: nowrap; padding-left: 12px; padding-right: 12px;
  color: var(--ink-500);
}
.nhom-pill.kenh-nhiet .pill.dang-chon { background: var(--green-700); color: var(--white); }
.nhiet-thang i {
  flex: 1; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #eaf0ec, #9dc2ad, #3f8460, #0e4d38);
}

/* ---------------------------------------------------------------- 7. items */
.hang-xep-mon { margin-top: 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xep-mon { min-width: 0; }
.xep-mon .dau-the { min-height: 35px; }
.ds-mon { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.mon { display: flex; align-items: center; gap: 10px; }
.hang-so {
  width: 19px; height: 19px; border-radius: 6px; flex: none;
  background: rgba(14, 77, 56, .08); color: var(--green-700);
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mon .than-mon { flex: 1; min-width: 0; }
.mon .ten { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thanh-mon { margin-top: 5px; height: 5px; border-radius: 99px; background: rgba(14, 77, 56, .08); overflow: hidden; }
.thanh-mon > i { display: block; height: 100%; border-radius: 99px; background: var(--green-700); }
.mon .phai { text-align: right; flex: none; }
.mon .phai .so { font-size: 13px; font-weight: 600; }
.mon .phai .dv { font-size: 9.5px; color: var(--ink-400); }

.khuyen-mai { margin-top: 14px; padding-top: 13px; border-top: var(--gach); }
.khuyen-mai .dau { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.khuyen-mai .ten-nhom { font-size: 12px; font-weight: 600; color: var(--warn); }
.khuyen-mai .ti-le { font-size: 10px; color: var(--ink-400); }
.ds-km { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.km { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.km .cham { width: 5px; height: 5px; border-radius: 99px; background: var(--gold-600); flex: none; }
.km .ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-700); }
.km .so { font-weight: 600; }
.km .dv { font-size: 9.5px; color: var(--ink-400); width: 14px; }
.km .tien { font-size: 11px; color: var(--ink-500); width: 56px; text-align: right; }

/* ------------------------------------------------------------------ 8. mix */
.thanh-kenh { margin-top: 11px; display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.thanh-kenh i { display: block; height: 100%; }
.ds-kenh { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.kenh { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.kenh .o-mau { width: 9px; height: 9px; border-radius: 3px; }
.kenh .ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kenh .pct { font-weight: 600; }
.kenh .tien { font-size: 10.5px; color: var(--ink-400); width: 62px; text-align: right; }

.tieu-de-thanh-toan {
  margin-top: 16px; padding-top: 14px; border-top: var(--gach);
  font-size: 13px; font-weight: 600;
}
.ds-thanh-toan { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.tt { display: flex; align-items: center; gap: 9px; }
.tt .ten { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt .rangbuoc { width: 72px; height: 6px; border-radius: 99px; background: rgba(14, 77, 56, .08); overflow: hidden; flex: none; }
.tt .rangbuoc i { display: block; height: 100%; border-radius: 99px; }
.tt .pct { width: 38px; text-align: right; font-size: 12px; font-weight: 600; }
.tt .tien { width: 62px; text-align: right; font-size: 10.5px; color: var(--ink-400); }

/* --------------------------------------------------------- 9. admin cards */
.ds-xep-hang { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.xep-hang { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--hang); }
.xep-hang .thu-tu { width: 20px; font-size: 11px; font-weight: 700; color: var(--ink-400); flex: none; }
.xep-hang .thu-tu.top { color: var(--gold-600); }
.xep-hang .than-ch { flex: 1; min-width: 0; }
.xep-hang .ten { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xep-hang .the-loai { font-size: 9.5px; color: var(--ink-400); margin-top: 1px; }
.xep-hang .phai { text-align: right; flex: none; }
.xep-hang .doanh-thu { font-size: 13px; font-weight: 600; }
.xep-hang .doanh-thu .dv { font-size: 9.5px; color: var(--ink-400); font-weight: 500; }
.xep-hang .pct { font-size: 10px; font-weight: 600; }

.the.canh-bao { border: 1px solid rgba(198, 154, 46, .4); }
.the.canh-bao .dau { display: flex; align-items: center; gap: 8px; }
.the.canh-bao .cham { width: 8px; height: 8px; border-radius: 99px; background: var(--danger); flex: none; }
.the.canh-bao .dem { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--danger); }
.ds-duoi { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.duoi { display: flex; align-items: center; gap: 9px; }
.duoi .than-ch { flex: 1; min-width: 0; }
.duoi .ten { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duoi .thanh-do { margin-top: 5px; height: 5px; border-radius: 99px; background: rgba(194, 65, 12, .1); overflow: hidden; }
.duoi .thanh-do i { display: block; height: 100%; border-radius: 99px; background: var(--danger); }
.duoi .phai { text-align: right; width: 64px; flex: none; }
.duoi .pct { font-size: 13px; font-weight: 700; color: var(--danger); }
.duoi .thieu { font-size: 9.5px; color: var(--ink-400); }
.trong-sach { margin-top: 10px; font-size: 11.5px; color: var(--ink-500); }

/* ----------------------------------------------------------------- 10. foot */
.chan-trang { font-size: 10.5px; line-height: 1.6; color: var(--ink-400); }
.chan-trang code { font-family: inherit; }
.chan-trang a { color: var(--green-700); font-weight: 600; }

/* ------------------------------------------------------------ login/error */
.trang-don {
  background: var(--white); border-radius: 18px; padding: 22px;
  width: 414px; max-width: 100%; align-self: center; margin: auto;
}
.trang-don h1 { font-size: 17px; margin: 0 0 4px; color: var(--green-700); }
.trang-don p { font-size: 12.5px; color: var(--ink-500); line-height: 1.6; }
.trang-don label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-500); margin-top: 12px; }
.trang-don input {
  width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 4px;
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid rgba(14, 77, 56, .22); border-radius: 10px; background: #fff;
}
.trang-don button {
  width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 12px;
  background: var(--green-700); color: #fff; font-family: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.loi { margin-top: 12px; font-size: 12px; color: var(--danger); }

/* ----------------------------------------------- redesigned login surface
 * The login is outside the signed-in shell but uses the same DS tokens, type,
 * green header and raised white-card language. No script is required. */
body.trang-dang-nhap {
  min-height: 100svh;
  padding: 0;
  display: flex;
  background: var(--surface-page);
}
.ct-login {
  width: 100%;
  max-width: var(--column-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-column);
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}
.ct-login-hero {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  padding: 30px 24px 52px;
  background: var(--surface-header);
  color: var(--text-on-dark);
}
.ct-login-hero::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -82px;
  bottom: -104px;
  border: 32px solid rgba(232, 178, 58, .12);
  border-radius: var(--radius-pill);
}
.ct-login-hero img {
  position: relative;
  z-index: 1;
  display: block;
  width: 150px;
  height: auto;
}
.ct-login-stamp {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 28px;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-brand-gold);
}
.ct-login-hero h1 {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  font-size: 26px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-figure);
}
.ct-login-hero p {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  font-size: var(--text-body);
  color: var(--text-on-dark-muted);
}
.ct-login-body {
  position: relative;
  z-index: 2;
  flex: 1;
  margin-top: -28px;
  padding: 0 var(--gutter-page) 24px;
}
.ct-login-card {
  padding: 22px var(--pad-card) 20px;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-raised);
}
.ct-login-kicker {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--gold-600);
}
.ct-login-card h2 {
  margin: 4px 0 0;
  font-size: var(--text-figure-sm);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-figure);
  color: var(--green-700);
}
.ct-login-copy {
  margin: 8px 0 16px;
  font-size: var(--text-label);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.ct-login-card label {
  display: block;
  margin-top: 12px;
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}
.ct-login-card input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
  padding: 0 13px;
  border: var(--border-field);
  border-radius: var(--radius-field);
  outline: none;
  background: var(--surface-inset);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ct-login-card input::placeholder { color: var(--text-faint); font-size: var(--text-label); }
.ct-login-card input:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(232, 178, 58, .18);
  background: var(--white);
}
.ct-login-card button {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--green-700);
  color: var(--text-on-dark);
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  box-shadow: var(--shadow-pressed);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ct-login-card button:active { transform: scale(var(--press-scale)); background: var(--green-800); }
.ct-login-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-chip);
  background: var(--status-bad-fill);
  color: var(--status-bad);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
}
.ct-login-help {
  margin: 18px 12px 0;
  text-align: center;
  font-size: var(--text-caption);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
@media (min-width: 600px) {
  body.trang-dang-nhap { padding: 32px 16px; }
  .ct-login {
    min-height: min(720px, calc(100svh - 64px));
    border-radius: var(--radius-phone);
    box-shadow: var(--shadow-phone);
  }
}

/* ------------------------------------------------------- loading skeletons
 * Shown while a period, a date range, the ownership slicer or the store picker
 * is being fetched (`app/static/app.js`).  The trick is that NOTHING is
 * replaced: the card that is on screen stays on screen and only its numbers
 * turn into neutral bars, so every card is a skeleton at exactly its own height
 * and the page cannot jump - which is the rule the design handoff sets for
 * anything moved to `fetch`.
 *
 * Text goes transparent rather than empty, so the box keeps the width the digits
 * gave it.  Two neutral fills, because the progress card is dark green. */
.dang-tai { cursor: progress; }
.dang-tai .gia-tri,
.dang-tai .chip-delta,
.dang-tai .c-so,
.dang-tai .c-pct,
.dang-tai .pct,
.dang-tai .tien,
.dang-tai .so,
.dang-tai .doanh-thu,
.dang-tai .nhip,
.dang-tai .thieu,
.dang-tai .ti-le,
.dang-tai .canh-bao .dem,
.dang-tai .dong-cuoi strong,
.dang-tai .chip-lam-moi .gio,
.dang-tai .thanh-tuoi strong {
  color: transparent !important;
  background: rgba(14, 77, 56, .10);
  border-radius: 5px;
  animation: nhip-tai 1.1s ease-in-out infinite;
}
/* On the dark green progress card and the green freshness strip, the same bars
   in the light neutral. */
.dang-tai .the-tien-do .gia-tri,
.dang-tai .the-tien-do .pct,
.dang-tai .the-tien-do .c-so,
.dang-tai .the-tien-do .c-pct,
.dang-tai .the-tien-do .nhip,
.dang-tai .the-tien-do .dong-cuoi strong,
.dang-tai .chip-lam-moi .gio,
.dang-tai .thanh-tuoi strong,
.dang-tai .thanh-tuoi .so {
  background: rgba(255, 255, 255, .18);
}
/* The drawn things - charts, every bar, every heat cell, every swatch - flatten
   to the same neutral rather than holding numbers that are about to change. */
.dang-tai canvas,
.dang-tai .thanh i,
.dang-tai .thanh-mon i,
.dang-tai .thanh-kenh i,
.dang-tai .rangbuoc i,
.dang-tai .thanh-do i,
.dang-tai .nhiet-o i,
.dang-tai .o-mau,
.dang-tai .cham {
  background: rgba(14, 77, 56, .10) !important;
  border-color: transparent !important;
  animation: nhip-tai 1.1s ease-in-out infinite;
}
.dang-tai canvas { opacity: .5; }
/* The footnotes and denominators carry the OLD period's figures inside ordinary
   wording ("13.535 topping ÷ 40.367 ly"), which a bar would swallow whole.  Fade
   them instead, so nothing on screen reads as current while it is not. */
.dang-tai .chan,
.dang-tai .ghi-chu,
.dang-tai .the-loai,
.dang-tai .dong-cuoi,
.dang-tai .nhan-ky { opacity: .4; }
.dang-tai .the-tien-do .thanh i { background: rgba(255, 255, 255, .18) !important; }

@keyframes nhip-tai {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
/* A loading pulse is the one motion here; honour a reader who has asked for
   none, and keep the transition into the state under the 150 ms rule. */
@media (prefers-reduced-motion: reduce) {
  .dang-tai .gia-tri, .dang-tai canvas, .dang-tai .o-mau { animation: none; }
}

/* =================================================== the live "Hôm nay" tab
 * The fourth tab (captain, 2026-08-19) and everything only it shows.  It was a
 * separate page with its own stylesheet until then; the rules moved here
 * because the tab is now part of the core view, and being additive on top of
 * the shared cards is exactly what keeps it from needing its own design.
 *
 * Same colour rules as the rest of this file: green = actual revenue, gold =
 * the target, red = below target, blue = above.  The one new signal is the live
 * dot, which says whether the poller is still talking to us.
 */

/* The tab itself.  Gold-edged rather than plain, because it opens a DIFFERENT
 * SOURCE - the iPOS API shadow feed, still being checked against the daily
 * report - and must not read as another way of saying the same numbers. */
.pill.truc-tiep { color: var(--gold-300); gap: 5px; padding-left: 8px; padding-right: 9px; }
.pill.truc-tiep .cham {
  width: 6px; height: 6px; border-radius: 99px; background: var(--gold-500); flex: none;
}
.pill.truc-tiep.dang-chon { background: var(--gold-500); color: var(--green-700); }
.pill.truc-tiep.dang-chon .cham { background: var(--green-700); }
/* Four tabs plus the Kỳ chip is more than a 356 px column holds on the smallest
 * phones, so the group scrolls rather than pushing the chip off the row. */
.hang-ky .nhom-pill { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hang-ky .nhom-pill::-webkit-scrollbar { display: none; }

/* On the live tab the Kỳ chip is a statement, not a control: the view is always
 * today and there is nothing to pick. */
.chip-ky.truc-tiep-ky { cursor: default; }

/* The "trực tiếp (beta)" label on the freshness strip. Gold on the dark strip,
 * because the reader must not mistake a feed under evaluation for the reported
 * number. */
.thanh-tuoi.tuoi-truc-tiep { flex-wrap: wrap; }
.nhan-beta {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--green-700); background: var(--gold-500);
  padding: 3px 8px; border-radius: 99px; white-space: nowrap; flex: none;
}

/* Live dot: green and breathing while the poll is recent, grey and still once
 * it is not.  The animation is the only motion on the tab and it stops when the
 * reader asks for reduced motion. */
.cham-song {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--ink-400);
}
.cham-song.song {
  background: var(--ok-ink);
  box-shadow: 0 0 0 0 rgba(27, 122, 83, .45);
  animation: nhip-song 2s ease-out infinite;
}
@keyframes nhip-song {
  70% { box-shadow: 0 0 0 7px rgba(27, 122, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 122, 83, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cham-song.song { animation: none; }
}

/* The live-tab SEAM banner — a DIFFERENT SOURCE, gold-edged so it can never be
 * mistaken for the settled reports (captain: a correctness property). */
.bang-truc-tiep {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  background: var(--notice-gold-fill); border: var(--notice-gold-border);
  border-radius: var(--radius-field); padding: 8px 12px;
  font-size: var(--text-caption); color: var(--ink-600);
}
.bang-truc-tiep .nhan-beta {
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .02em;
  color: var(--green-700); background: var(--gold-500);
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.bang-truc-tiep .tt-nguon { flex: 1; min-width: 0; color: var(--ink-500); }
.bang-truc-tiep .tt-nguon strong, .bang-truc-tiep .so { color: var(--ink-700); font-weight: 600; }
.bang-truc-tiep .tt-gio { flex: none; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }

.dong-phu { margin-top: 6px; font-size: 11.5px; color: var(--ink-500); }

/* A section the shadow grain cannot answer.  It keeps its heading and its place
 * in the order - a card that quietly disappeared would read as "nothing sold". */
.the.chua-truc-tiep { background: rgba(14, 77, 56, .02); }
.nhan-chua {
  font-size: 10px; font-weight: 600; color: var(--ink-500);
  background: rgba(14, 77, 56, .06); padding: 5px 9px; border-radius: 99px;
  white-space: nowrap; flex: none;
}
.o-kpi.trong-truc-tiep .gia-tri { color: var(--ink-400); }
/* An hour the clock has not reached: present, so the table keeps its shape, but
 * visibly not a measurement. */
.hang-bang.gio-sau { opacity: .45; }
.ghi-chu-nho-inline { font-size: 10px; color: var(--ink-400); }

/* A stamp older than two poll intervals is a statement, not a decoration. */
.tuoi-cu { color: var(--danger); font-weight: 600; }

/* The MIXED-SOURCE rows on the live tab: sections 4 and 6 show reported days
 * beside one live one, and the live one has to be legible as such in the TABLE
 * as well as in the chart (where it is the second green).  A tinted row plus a
 * gold rule on the reading edge - loud enough to find, quiet enough that six
 * reported rows still read as the primary content. */
.hang-bang.hang-truc-tiep,
.nhiet-hang.hang-truc-tiep {
  background: rgba(198, 154, 46, .10);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
/* The live row's own dot in the heatmap's day column - the same statement the
 * hero card's `cham-song` makes, at label size and without the animation. */
.cham-truc-tiep {
  display: inline-block; width: 5px; height: 5px; border-radius: 99px;
  background: var(--gold-500); vertical-align: middle;
}

/* ------------------------------------------------------------------ print
 * The browser's own Ctrl-P.  Everything that only exists to change the page -
 * the pills, the picker - comes off, and the phone column loses its rounded
 * shell so it does not print a grey frame. */
@media print {
  body { background: #fff; padding: 0; display: block; }
  .dien-thoai { width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; background: #fff; }
  .hang-ky, .chon-ngay, .nhom-pill, .mui-ten { display: none !important; }
  .the, .o-kpi { break-inside: avoid; page-break-inside: avoid; }
  .pill-chi-tiet { display: none !important; }
  /* A scroller prints as its first screenful; on paper the whole month fits. */
  .cuon-ngay { max-height: none; overflow: visible; }
}

/* ------------------------------------------- the money-basis tick (Net sales)
 * Captain, 2026-08-21 (Sales topic 671060016).  It lives in the dark header
 * under the tab row and governs ALL FOUR TABS, so it is styled like the pills
 * beside it rather than like a form control: a real link that reads as a tick
 * box, on for Net and off for Gross (+VAT). */
.hang-co-so {
  margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tick-co-so {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .18); color: rgba(255, 255, 255, .70);
  font-size: 10.5px; font-weight: 600; min-height: 30px; cursor: pointer;
}
.tick-co-so .o-tick {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .45); font-size: 10px; line-height: 1;
}
.tick-co-so.dang-bat { background: var(--gold-500); color: var(--green-700); }
.tick-co-so.dang-bat .o-tick {
  background: var(--green-700); border-color: var(--green-700); color: var(--gold-500);
}
.chu-co-so { font-size: 9.5px; line-height: 1.45; color: rgba(255, 255, 255, .52); flex: 1 1 150px; }

/* ------------------------------- the same-weekday-last-week reference row/col
 * Captain, 2026-08-21: an eighth heatmap row and an extra hour column, so staff
 * can measure today against the same weekday a week ago.  It is a REFERENCE and
 * not part of the week being shown - it is in no total on the card - so it sits
 * below a hairline, in quieter ink, and never competes with the seven days. */
.nhiet-hang.hang-so-sanh,
.hang-bang.hang-so-sanh {
  margin-top: 5px; padding-top: 6px !important;
  border-top: 1px dashed rgba(14, 77, 56, .28);
  opacity: .82;
}
.nhiet-hang.hang-so-sanh .ten-ngay { color: var(--ink-400); line-height: 1.15; }
.nhiet-hang.hang-so-sanh .ten-ngay i {
  display: block; font-style: normal; font-size: 7.5px; font-weight: 500; letter-spacing: -.2px;
}
.c-so-sanh { color: var(--ink-400) !important; font-weight: 500 !important; }
/* The hour chart's reference LINE, in the legend: a dotted rule in the ink the
 * line is drawn in (`charts.js:SO_SANH`), not a filled swatch - it is a line on
 * the chart and a filled square would read as a fourth bar series. */
.chu-thich .o-mau.o-duong {
  width: 13px; height: 0; border-radius: 0; border-top: 2px dotted #7d6b4f;
}