/* ===== Bộ khung module dùng chung (module-kit): panel-title · section · cell · delta · donut.
   Mọi cỡ chữ = token × --scale (biến mỗi panel) qua custom-prop --fs để vẫn "co như ảnh". ===== */

/* Thin wrapper: các panel kit chỉ giữ layout; nội dung do module-kit dựng. */
.quansu-panel,
.pccc-panel,
.vhxh-panel,
.mttq-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel__title--kit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel__title-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__title-tile {
  flex: none;
  display: inline-flex;
}

.panel__title-lineicon {
  flex: none;
  display: inline-flex;
}

/* Đơn vị đứng CẠNH bignumber cùng dòng ("778 người"). */
.grp__hero-num small {
  margin-left: 0.28rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 700;
}

.module-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 0;
  margin-top: 0.16rem;
}

/* ===== HOME = INSIGHT: mỗi nhóm = 1 số tổng LỚN + 1-2 dòng tín hiệu (nhãn trái · số canh
   phải). Ít mảnh chữ -> phẳng lặng; số to vì mỗi dòng có trọn bề ngang. Nhóm CAO THEO NỘI
   DUNG (flex:none) -> không giãn/bóp ruột; phần dư dọc chia đều GIỮA các nhóm. Toàn rem. ===== */
.grp {
  --tone: var(--color-cyan);
  /* Giãn từ cỡ nội dung ra LẤP ĐỦ cột: phần dư dọc nằm TRONG hộp có viền (breathing),
     KHÔNG dồn thành hố trống giữa các hộp. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
  border-left: 0.18rem solid var(--tone);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tone) 7%, transparent);
}

.grp__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tone);
}

.grp__head-icon {
  flex: none;
  display: inline-flex;
}

.grp__head-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text);
  /* Tiêu đề nhóm nâng 1 nấc (md -> lg) — owner: tiêu đề quá nhỏ, đọc khó. */
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grp__head-meta {
  flex: none;
  padding: 0.08rem 0.42rem;
  border: 0.07rem solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.grp__body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.grp__hero {
  flex: none;
  width: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.grp__hero-num {
  /* THANG CHỮ KIT (chốt 2026-07-04): hero 1.875 · số dòng 1.5 · tiêu đề nhóm 1 ·
     nhãn 0.875 · phụ 0.75 — đổi cỡ là đổi Ở THANG NÀY, không vá lẻ từng chỗ. */
  --stat-size: var(--text-kpi);
  /* LUẬT MÀU (chốt lại 2026-07-05): SỐ LIỆU TRẮNG trung tính — màu chỉ dành cho
     TRẠNG THÁI (vàng theo dõi / xanh lá tốt / đỏ xấu, gán qua big.tone từng ô).
     Định danh nhóm do vệt trái + icon + quầng nền lo; KHÔNG nhuộm số theo nhóm. */
  color: var(--color-text);
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.grp__hero-num.is-white {
  color: var(--color-text);
}

.grp__hero-label {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
}

.grp__hero-note {
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.15;
}

.grp__hero-note--good { color: var(--color-green); }
.grp__hero-note--up { color: var(--color-mint); }
.grp__hero-note--dim { font-weight: 600; color: var(--color-text-dim); }

/* Thanh cơ cấu ngang dưới số hero: tỉ lệ phần, màu khớp dòng chấm. */
.hero-bar {
  display: flex;
  width: 100%;
  height: 0.4rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  overflow: hidden;
  gap: 0.09rem;
}

.hero-bar i {
  display: block;
}

/* Chế độ TIẾN ĐỘ: nền track mờ theo tone nhóm, phần màu = đã đạt. */
.hero-bar--track {
  background: color-mix(in srgb, var(--tone) 16%, transparent);
}

/* Thanh hình bản rộng (barWide): con trực tiếp của .grp — to bản hơn, làm mỏ neo ngang. */
.grp > .hero-bar {
  height: 0.5rem;
  margin-top: 0.42rem;
}

/* Thanh tiến độ TỰ GIẢI THÍCH: % ở đuôi thanh, cùng dòng — thanh co lại nhường chỗ số. */
.grp > .hero-barline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-barline .hero-bar {
  flex: 1;
  height: 0.5rem;
  margin-top: 0;
}

.hero-barline__val {
  flex: none;
  color: var(--tone);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
}

/* ===== DA "LUMEN GLASS" cho 2 rail (đợt 1 đập-xây-lại, owner toàn quyền cho tôi 2026-07-05).
   Cấu trúc DOM GIỮ NGUYÊN — chỉ thay da. Bốn chất liệu: (1) thẻ kính tối nổi khối, vệt sáng
   mép trên, KHÔNG viền; (2) quầng cực quang tỏa từ góc icon; (3) số thứ tự ma 01-04 chìm góc;
   (4) đảo ngôi thứ: tiêu đề = kicker nhỏ mang màu, SỐ trắng đậm là vua, chip trạng thái đổi nền.
   Máy mát: toàn bộ tĩnh, không animation, không backdrop-filter. ===== */
/* 1 KHỐI DUY NHẤT (owner chốt 2026-07-06 — "bọc nó vào như Thu ngân sách, Đầu tư
   công để có 1 khối và tiêu đề đồng bộ, đừng chế ra kiểu khác biệt"): panel.kit-flat
   giờ mang ĐÚNG vỏ panel chuẩn toàn trang — viền/nền/bóng đổ MỘT LẦN bao hết header
   + 3 chương; header nối liền thân (không hở, không bo góc riêng).
   VÒNG 2 (owner: "3 chương không có ranh giới rõ, đang trôi nổi" — như 4 thẻ BÊN
   TRONG khối Thu ngân sách, không chỉ 1 vạch mảnh): mỗi chương thành THẺ LỒNG có
   viền + nền theo màu riêng (option G) + khe hở thật với nhau — vẫn nằm gọn trong
   1 khung ngoài duy nhất, không phá luật "1 khối". */
.panel.kit-flat {
  border: 1px solid color-mix(in srgb, var(--color-blue) 26%, transparent);
  border-radius: 0.9rem;
  background: var(--color-panel);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-black) 28%, transparent);
  overflow: hidden;
}

.panel.kit-flat::before,
.panel.kit-flat::after {
  content: none; /* bỏ tick góc cyan của vỏ panel cũ */
}

.kit-flat .module-body {
  gap: 0.5rem; /* khe hở thật giữa các thẻ chương (option G) */
  /* Lề trái/phải CHỦ ĐÍCH, không tuỳ tiện (owner 2026-07-06): đây là lề NGOÀI — khoảng
     cách từ viền khung lớn tới viền thẻ chương. Mỗi .grp có lề TRONG riêng (padding
     ngang của chính nó) — hai lớp lề cộng lại mới ra khoảng cách chữ-tới-viền-khung-lớn,
     nên lề ngoài này để NHỎ, nhường phần lớn cho lề trong của từng thẻ. */
  padding: 0.3rem 0.5rem 0.6rem;
}

.kit-flat .grp {
  gap: 0.22rem;
}

.kit-flat .grp__attrs {
  gap: 0.26rem;
  border-left: none;
  padding-left: 0.5rem;
}

.kit-flat .grp {
  position: relative;
  flex: var(--grow, 1) 1 0;
  justify-content: space-between;
  /* Lề TRONG của thẻ chương — chữ không được chạm viền (owner 2026-07-06: "lề của
     text trái phải sát luôn viền"). Ngang 0.7rem cân với lề ngoài module-body 0.5rem
     -> tổng lề chữ-tới-khung-lớn ~1.2rem, có chủ đích, không tuỳ tiện. */
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  border-radius: 0.7rem;
  background: linear-gradient(178deg, color-mix(in srgb, var(--tone) 10%, transparent), color-mix(in srgb, var(--color-bg-deep) 60%, transparent) 70%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 8%, transparent);
}

/* Quầng cực quang sau icon (góc trên-trái) — nguồn sáng trong kính, tĩnh. */
.kit-flat .grp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(38% 55% at 8% 0%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%);
}

.kit-flat .grp > * {
  position: relative;
  z-index: 1;
}

/* THĂNG CẤP tiêu đề chương: tiêu đề dùng nguyên cỡ tiêu đề khung toàn trang
   (base: --text-lg trắng đậm); icon mang màu tone. */
.kit-flat .grp__head-icon {
  padding: 0;
  background: none;
  color: var(--tone);
}

.kit-flat .grp__head-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Số: trắng đặc, chữ số đều cột. */
.kit-flat .grp__hero-num {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.kit-flat .grp__hero-num small {
  color: var(--tone);
}

/* Chip giá trị: squircle không viền; dòng trạng thái ĐỔI CẢ NỀN theo nghĩa. */
.kit-flat .attr__valrow {
  padding: 0.03rem 0.42rem;
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  border-radius: 0.45rem;
}

.kit-flat .attr__valrow:has(.stat-value[style*="yellow"]) {
  background: color-mix(in srgb, var(--color-yellow) 15%, transparent);
}

.kit-flat .attr__valrow:has(.stat-value[style*="green"]) {
  background: color-mix(in srgb, var(--color-green) 14%, transparent);
}

.kit-flat .attr__valrow:has(.stat-value[style*="danger"]) {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

/* ĐỒNG PHỤC NHÃN toàn 2 rail (owner 2026-07-05 "bất đồng bộ" — trước đó mỗi chương
   một kiểu trắng/đặc/phấn): MỘT công thức duy nhất — nhãn cỡ md = PASTEL SÁNG
   45% màu nhóm + 55% trắng. Đúc từ 2 bài học: màu ấm đặc cỡ nhỏ chết trên navy
   ("u tối"), trắng tuyền mất tầng màu ("đơn điệu"). Số vẫn trắng; trạng thái màu đặc. */
.kit-flat .hbar__label {
  color: color-mix(in srgb, var(--ptone, var(--tone)) 45%, var(--color-white));
}

.kit-flat .attr__label,
.kit-flat .grp__hero-label,
.kit-flat .seal__label,
.kit-flat .ledger__label {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
}

/* Chấm màu = ĐÈN nhỏ phát sáng — cùng ngôn ngữ tỏa sáng với viên nhiên liệu. */
.kit-flat .attr__dot {
  box-shadow: 0 0 0.35rem color-mix(in srgb, var(--color-white) 20%, transparent), 0 0 0.3rem currentColor;
}

/* VIÊN NHIÊN LIỆU (owner chốt phương án C qua bảng ảnh 2026-07-05): ray = lòng máng
   trũng (bóng lõm), mẩu tiến độ = viên chất lỏng bóng mặt trên + tỏa sáng — chất liệu
   CHUNG cho cột thanh cả 2 rail (pbars VHXH + hbars MTTQ), cao theo ngữ cảnh. */
.kit-flat .hbar__track {
  height: 1rem;
  border-radius: 999px;
  box-shadow: inset 0 0.12rem 0.3rem color-mix(in srgb, var(--color-bg-bottom) 55%, transparent);
}

.kit-flat .hbar__fill {
  border-radius: 999px;
  box-shadow:
    inset 0 0.16rem 0.22rem color-mix(in srgb, var(--color-white) 38%, transparent),
    inset 0 -0.12rem 0.2rem color-mix(in srgb, var(--color-bg-bottom) 30%, transparent),
    0 0 0.6rem color-mix(in srgb, var(--g2, var(--tone)) 60%, transparent);
}

.kit-flat .hbars--pct .hbar__track {
  height: 1.3rem;
}

/* Số cột thanh (hbars/pbars) = CHIP cùng họ với attr__valrow — số trần trắng giữa
   nền tối là "vô hồn" (owner 2026-07-05). Hàng trạng thái tự đổi nền theo --ptone. */
.kit-flat .hbar__val {
  padding: 0.03rem 0.42rem;
  background: color-mix(in srgb, var(--ptone, var(--tone)) 12%, transparent);
  border-radius: 0.45rem;
}

/* Thanh "liquid pill": dày, bo tròn, đầu tiến độ có chấm sáng nhỏ (tĩnh). */
.kit-flat .grp > .hero-bar,
.kit-flat .hero-barline .hero-bar {
  height: 0.58rem;
  border-radius: 999px;
}

.kit-flat .hero-bar--track {
  /* Ray ≥24% tone (luật nhà): % thấp phải đọc là "ray + mẩu tiến độ", không phải thanh hỏng. */
  background: color-mix(in srgb, var(--tone) 24%, transparent);
}

.kit-flat .hero-bar--track i:first-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 62%, transparent), var(--tone)) !important;
  border-radius: 999px;
  box-shadow: 0 0 0.4rem color-mix(in srgb, var(--tone) 45%, transparent);
}

/* ===== VÒNG ĐO (infographic thuần CSS): cung tròn đầy/vơi kể chuyện, số ở tâm. ===== */
.grp__gauges {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.4rem;
  align-content: space-evenly;
  justify-items: center;
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
}

.gauge__dial {
  position: relative;
  width: 4.15rem;
  height: 4.15rem;
}

.gauge__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Rãnh = ĐƯỜNG RAY mờ thấy rõ (28%) — vòng % thấp không thành 'donut đen' (lỗi cũ 6/2026). */
  background: conic-gradient(var(--gtone) calc(var(--pct) * 1%), color-mix(in srgb, var(--gtone) 28%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), var(--color-black) calc(100% - 0.44rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), var(--color-black) calc(100% - 0.44rem));
  filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--gtone) 35%, transparent));
}

/* THỰC ĐƠN 3 CỠ (chốt 2026-07-05): SỐ LỚN = --text-kpi · SỐ THƯỜNG = --text-xl ·
   CHỮ = --text-md. CẤM cỡ thứ tư trong lòng khối. Chữ KHÔNG sống trong lòng hình. */
.gauge__val {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gauge__label {
  max-width: 9rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
}

/* ===== DÀN NHẠC CỤ INFOGRAPHIC ===== */
/* Đồng hồ bán nguyệt: cung trên, số lớn ngồi giữa lòng cung. */
.meter {
  position: relative;
  width: 11.5rem;
  height: 6rem;
  margin: 0.1rem auto 0;
}

.meter__arc {
  position: absolute;
  inset: 0 0 -6rem 0;
  border-radius: 50%;
  /* Cung GRADIENT: càng chạy càng chuyển sắc tone -> tone2 (kiểu vòng tập Apple Watch). */
  background: conic-gradient(from 270deg, var(--tone), var(--tone2) calc(var(--pct) * 0.5%), color-mix(in srgb, var(--tone) 24%, transparent) 0 50%, transparent 50%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), var(--color-black) calc(100% - 1.05rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), var(--color-black) calc(100% - 1.05rem));
  filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--tone) 48%, transparent));
}

.meter__below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
}

.meter__below b {
  color: var(--color-text);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.meter__below span {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
}

/* Hàng người: lớp màu đè lớp mờ, xén ngang theo %. */
.picto {
  position: relative;
  align-self: center;
  line-height: 0;
}

.picto__row {
  display: inline-flex;
  gap: 0.16rem;
  color: color-mix(in srgb, var(--gtone, var(--tone)) 20%, transparent);
}

.picto__row--fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: calc(var(--pct) * 1%);
  color: var(--gtone, var(--tone));
  white-space: nowrap;
}

.picto__caption {
  align-self: center;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

/* Lưới đèn 45 ô — mỗi ô một khu phố thật. */
.waffle-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
}

.waffle-wrap {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.waffle {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.16rem;
  width: 10.5rem;
}

.waffle i {
  aspect-ratio: 1;
  border-radius: 0.14rem;
  background: color-mix(in srgb, var(--tone) 13%, transparent);
}

.waffle i.on {
  background: var(--color-mint);
  box-shadow: 0 0 0.28rem color-mix(in srgb, var(--color-mint) 45%, transparent);
}

.waffle__caption {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-xs);
  font-weight: 600;
}

.waffle__caption b {
  color: var(--color-mint);
  font-size: var(--text-md);
  font-weight: 900;
}

/* Cột ngang tỉ lệ: độ dài vạch kể chuyện. */
.hbars {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
}

.hbars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.hbars-callout {
  color: color-mix(in srgb, var(--tone) 70%, var(--color-text));
  font-size: var(--text-md);
  font-weight: 700;
  text-align: right;
  max-width: 9rem;
}

.hbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hbar__label {
  flex: none;
  width: 8.1rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar__track {
  flex: 1;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  overflow: hidden;
}

.hbar__fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--g1, var(--tone)), var(--g2, var(--tone2)));
  box-shadow: 0 0 0.35rem color-mix(in srgb, var(--g2, var(--tone)) 50%, transparent);
}

.hbar__fill--negative {
  margin-left: auto;
}

/* Dense source breakdowns stay inside the fixed home rail without shrinking the hero. */
.kit-flat .grp--compact .hbars {
  gap: 0.16rem;
}

.kit-flat .grp--compact .hbar__label {
  font-size: var(--text-md);
}

.kit-flat .grp--compact .hbar__track {
  height: 0.84rem;
}

.kit-flat .grp--compact .hbar__val {
  min-width: 3.8rem;
  font-size: var(--text-lg);
}

/* Phát triển hội viên: cùng nhịp hbars — hero thoáng, breakdown dọc có thanh quy mô. */
.grp--membership {
  justify-content: flex-start;
  gap: 0.28rem;
}

.kit-flat .grp--membership {
  flex-grow: var(--grow, 1.08);
  gap: 0.1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.membership__period {
  flex: none;
  margin-left: auto;
  color: color-mix(in srgb, var(--tone) 48%, var(--color-white));
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.membership__summary {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.08rem 0 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
}

.membership__hero-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
}

.membership__hero-block--secondary {
  align-items: flex-end;
  text-align: right;
}

.membership__hero-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  color: var(--color-text);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.membership__hero-value small {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 800;
}

.membership__hero-label {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.1;
}

.membership__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 auto;
  gap: 0.1rem;
  min-height: 0;
}

.membership__row {
  display: grid;
  grid-template-columns: minmax(7.4rem, 0.78fr) minmax(3rem, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.membership__name {
  position: relative;
  min-width: 0;
  padding-left: 0.52rem;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.membership__name::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--row-accent, var(--color-cyan));
  box-shadow: 0 0 0.28rem color-mix(in srgb, var(--row-accent, var(--color-cyan)) 65%, transparent);
  transform: translateY(-50%);
}

.membership__numbers {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  flex: none;
  justify-content: flex-end;
  min-width: 3.8rem;
  padding: 0.08rem 0.34rem;
  border-radius: 0.38rem;
  background: color-mix(in srgb, var(--row-tone, var(--color-cyan)) 12%, var(--color-bg-bottom));
}

.membership__value {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.membership__value {
  min-width: 0;
}

.membership__value--negative {
  color: var(--color-danger);
}

.membership__monthly {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.14rem;
  min-width: 0;
  padding: 0 0.2rem 0 0.08rem;
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0.08rem 0.18rem color-mix(in srgb, var(--color-bg-bottom) 88%, transparent);
  pointer-events: none;
  color: var(--color-mint);
}

.membership__bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(4rem, 27%, 5.1rem);
  grid-template-rows: 1fr;
  align-items: center;
  width: 100%;
  height: 0.82rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--row-tone, var(--color-cyan)) 16%, transparent);
  box-shadow: inset 0 0.12rem 0.26rem color-mix(in srgb, var(--color-bg-bottom) 55%, transparent);
}

.membership__bar--monthly {
  grid-template-columns: minmax(0, 1fr) clamp(4rem, 27%, 5.1rem);
}

.membership__bar--plain {
  grid-template-columns: minmax(0, 1fr);
}

.membership__bar i {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: var(--bar-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--row-tone, var(--color-mint)), var(--row-tone2, var(--color-cyan)));
  box-shadow:
    inset 0 0.12rem 0.16rem color-mix(in srgb, var(--color-white) 38%, transparent),
    inset 0 -0.08rem 0.16rem color-mix(in srgb, var(--color-bg-bottom) 30%, transparent),
    0 0 0.5rem color-mix(in srgb, var(--row-tone2, var(--color-cyan)) 55%, transparent);
}

.membership__monthly--zero {
  color: var(--color-cyan);
}

.membership__monthly--negative {
  color: var(--color-danger);
}

/* Warm module theme shared with the Y tế stage: orange/pink owns the block,
   while monthly values keep their semantic green/red/cyan meanings. */
.kit-flat .grp--membership-warm .membership__hero-value {
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--color-orange) 45%, transparent));
}

.kit-flat .grp--membership-warm .membership__hero-label,
.kit-flat .grp--membership-warm .membership__period {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
}

.kit-flat .grp--membership-warm .membership__name {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
}

.kit-flat .grp--membership-warm .membership__bar {
  background: color-mix(in srgb, var(--color-orange) 16%, transparent);
}

.kit-flat .grp--membership-warm .membership__numbers {
  background: color-mix(in srgb, var(--color-bg-bottom) 84%, var(--tone) 16%);
}

/* Số lượng theo tháng: cột ngắn, có nhãn số và đường chuẩn chung; không dùng ray tiến độ. */
.grp--monthly {
  justify-content: flex-start;
  gap: 0.28rem;
}

/* Khối hoa dùng title 2 dòng ở rail hẹp; thu gọn đúng vùng biểu đồ để không cắt đáy. */
.kit-flat .grp--monthly {
  gap: 0.22rem;
  padding-top: 0.34rem;
  padding-bottom: 0.38rem;
}

.grp--monthly .grp__head-title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.05;
}

.monthly__summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.08rem 0 0.24rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
}

.monthly__hero {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.monthly__hero-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: var(--color-text);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.monthly__hero-value small {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 800;
}

.grp--monthly-warm .monthly__hero-value {
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--color-orange) 45%, transparent));
}

.monthly__hero-label,
.monthly__insight span,
.monthly__insight small {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.1;
}

.monthly__insight {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  text-align: right;
}

.monthly__delta {
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.1;
}

.monthly__delta--up { color: var(--color-mint); }
.monthly__delta--down { color: var(--color-danger); }
.monthly__delta--flat { color: var(--color-cyan); }

.monthly__chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.55rem;
  min-height: 3.55rem;
  padding: 0.22rem 0.1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 20%, transparent);
  overflow: hidden;
}

.monthly__column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.18rem;
  min-width: 0;
}

.monthly__plot {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 2.3rem;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
}

.monthly__bar {
  align-self: end;
  justify-self: center;
  width: clamp(1.15rem, 42%, 2rem);
  height: var(--bar-height);
  min-height: 0.22rem;
  border-radius: 0.32rem 0.32rem 0.12rem 0.12rem;
  background: linear-gradient(180deg, var(--color-yellow), var(--color-orange));
  box-shadow: 0 0 0.48rem color-mix(in srgb, var(--color-orange) 42%, transparent);
}

.monthly__column--current .monthly__bar {
  background: linear-gradient(180deg, var(--color-white), var(--color-orange));
  box-shadow: 0 0 0.62rem color-mix(in srgb, var(--color-orange) 62%, transparent);
}

.monthly__value {
  position: static;
  display: block;
  align-self: start;
  justify-self: center;
  margin-bottom: 0.12rem;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.monthly__label {
  color: color-mix(in srgb, var(--tone) 48%, var(--color-white));
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.hbar__val {
  flex: none;
  min-width: 4.3rem;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===== DÀN THANH % (pbars): fill theo THANG 100, ray 24% tone luôn hiện rõ.
   Hàng lệch chuẩn: JS gắn --ptone/--g1/--g2 -> ray + mẩu + số cùng nhuộm màu trạng thái.
   Hàng hero = hàng đầu bảng: số cỡ kpi + ray dày hơn, cột số chung mép phải. ===== */
.hbars--pct .hbar__track {
  background: color-mix(in srgb, var(--ptone, var(--tone)) 24%, transparent);
}

/* Hàng hero (chỉ số dẫn đầu): ngôi thứ do VỊ TRÍ ĐỨNG ĐẦU + ray dày hơn gánh —
   số GIỮ CÙNG CỠ xl với các hàng (owner 2026-07-05: số kpi giữa bảng = "to tổ chảng"). */
.kit-flat .hbar--hero .hbar__track {
  height: 1.5rem;
}

/* ===== TEM ĐẠT CHUẨN (seal): huy hiệu vuông bo góc + số done/total — KHÔNG biểu đồ.
   --stone do JS chọn theo data: đủ = green (kiếm được), hụt = yellow (đang củng cố). ===== */
.seal {
  display: flex;
  align-items: center;
  justify-content: space-between; /* luật trải ngang: huy hiệu trái - tem mép phải */
  gap: 0.8rem;
  min-height: 0;
}

.seal__body {
  flex: 1;
  min-width: 0;
}

/* DẢI ĐÈN của tem: mỗi vạch một đơn vị thật — vạch đạt sáng đèn (glow + bóng mặt trên
   như viên nhiên liệu), vạch hụt là ray mờ 22% tone. */
.seal-ticks {
  display: flex;
  gap: 0.14rem;
}

.seal-ticks i {
  flex: 1;
  height: 0.62rem;
  border-radius: 0.14rem;
  background: color-mix(in srgb, var(--stone) 22%, transparent);
}

.seal-ticks i.on {
  background: var(--stone);
  box-shadow:
    0 0 0.3rem color-mix(in srgb, var(--stone) 60%, transparent),
    inset 0 0.08rem 0.1rem color-mix(in srgb, var(--color-white) 30%, transparent);
}

.seal__num {
  display: block;
  color: var(--stone);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.seal__label {
  display: block;
  margin-top: 0.12rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
}

.seal__tag {
  flex: none;
  align-self: center;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 0.07rem solid color-mix(in srgb, var(--stone) 50%, transparent);
  border-radius: 0.35rem;
  color: var(--stone);
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== SỔ QUỸ (ledger): dòng số thẳng cột như trang sổ; dòng main nổi tone + chip %. ===== */
.ledger {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* Sổ quỹ 3 dòng (1 dòng cỡ kpi) cần NHIỀU chỗ hơn dòng phụ 1 hàng bên dưới — trước
   đây cả 2 chia đều 50/50 (flex:1 mặc định của .ledger và .grp__attrs) dù nội dung
   lệch ~3:1, khiến sổ quỹ tràn chồng lên dòng phụ (owner 2026-07-06). Chia theo
   TRỌNG SỐ đúng nội dung, không còn ép 50/50. */
.grp--ledger .ledger {
  flex: 3 1 0;
}

.grp--ledger .grp__attrs--stack {
  flex: 1 1 0;
}

/* ===== BRIEF (câu văn + số nổi bật, owner chốt 2026-07-06 theo ảnh mẫu cấu trúc):
   mỗi dòng một câu hoàn chỉnh, số/từ khoá đậm nổi giữa câu — không sổ/thanh/hộp,
   NHƯNG mỗi câu là 1 DÒNG SỔ có nét gạch đứt phân cách với dòng kế (owner 2026-07-06:
   "các chấm gạch đâu" — bản đầu bỏ sót đúng chi tiết cấu trúc này, chỉ có câu rời rạc
   không phân dòng). Giữ NGUYÊN màu tone của chương (không đổi sang xanh như ảnh mẫu). ===== */
.brief {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.brief__line {
  /* LỀ CHUNG CẢ ĐOẠN (owner 2026-07-06: "vấn đề là lề cả đoạn" — dòng có tick bị đẩy
     chữ vào trong, dòng không tick chạy sát mép trái, chữ lệch lề nhau giữa các dòng).
     Bỏ hẳn flex-row icon+chữ; đổi sang KHỐI với padding-left CỐ ĐỊNH cho MỌI dòng —
     tick (nếu có) nằm tuyệt đối TRONG phần lề đó, chữ luôn thẳng một cột dù dòng nào
     có tick hay không. */
  position: relative;
  margin: 0;
  padding: 0.22rem 0 0.22rem 1.3rem;
  /* CẤM var(--color-text-soft) (luật 2026-07-06) — pastel theo công thức đồng phục. */
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
}

.brief__line + .brief__line {
  /* "chấm gạch" trong ảnh mẫu là CHẤM TRÒN, không phải dash chữ nhật — dashed sai chất liệu.
     Owner: "màu tối thui vậy sao thấy" — 40% quá mờ trên nền navy, nâng lên 85% + dày hơn. */
  border-top: 0.13rem dotted color-mix(in srgb, var(--tone) 85%, transparent);
}

.brief__icon {
  position: absolute;
  left: 0;
  top: 0.37rem;
  display: inline-flex;
}

.brief__text b {
  color: var(--color-text);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.16rem 0;
}

.ledger__row + .ledger__row {
  border-top: 0.07rem dashed color-mix(in srgb, var(--tone) 26%, transparent);
}

.ledger__label {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
}

.ledger__num {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.ledger__num b {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ledger__num b small {
  margin-left: 0.18rem;
  color: var(--tone);
  font-size: var(--text-md);
  font-weight: 700;
}

.ledger__row--main .ledger__num b {
  color: var(--tone);
  font-size: var(--text-kpi);
  font-weight: 900;
}

.ledger__chip {
  padding: 0.06rem 0.5rem;
  border: 0.07rem solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone);
  font-size: var(--text-md);
  font-weight: 800;
}

/* Dòng thuộc tính XẾP CHỒNG dưới tem/sổ (không chia cột hero|attrs như grp__body). */
.grp__attrs--stack {
  flex: 0 1 auto;
  border-left: none;
  padding-left: 0;
}


/* ===== SÂN KHẤU SONG SẮC (stage, owner chốt Z2+G3): quầng rọi đỉnh giữa, số vua
   gradient hoàng hôn, bệ đỡ phát sáng, chip chỉ số dàn chân đế — đối xứng duy nhất. ===== */
.grp--stage {
  overflow: hidden;
}

/* ===== LUỒNG THỦ TỤC HÀNH CHÍNH — một hero, một tuyến vào-ra, một dải chất lượng. ===== */
.grp--service-flow {
  overflow: hidden;
}

.kit-flat .grp--service-flow {
  gap: 0.26rem;
  justify-content: center;
  padding-block: 0.42rem;
  background:
    radial-gradient(55% 72% at 0% 0%, color-mix(in srgb, var(--color-yellow) 15%, transparent), transparent 72%),
    linear-gradient(178deg, color-mix(in srgb, var(--color-orange) 7%, transparent), color-mix(in srgb, var(--color-bg-deep) 62%, transparent) 72%);
}

.grp--service-flow .grp__head {
  min-width: 0;
}

.service-flow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 0;
}

.service-flow__hero {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.service-flow__hero-value {
  flex: none;
  color: var(--color-yellow);
  font-size: var(--text-kpi-hero);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.65rem color-mix(in srgb, var(--color-yellow) 38%, transparent);
}

.service-flow__hero-copy {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.service-flow__hero-copy strong {
  color: var(--color-yellow);
  font-size: var(--text-lg);
}

.service-flow__delta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.16rem 0.45rem;
  border-left: 0.16rem solid var(--color-yellow);
  background: color-mix(in srgb, var(--color-yellow) 10%, transparent);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.15;
}

.service-flow__delta--up {
  border-left-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 11%, transparent);
}

.service-flow__delta b {
  color: var(--color-yellow);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.service-flow__delta--up b {
  color: var(--color-danger);
}

.service-flow__delta--down b {
  color: var(--color-green);
}

.service-flow__lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.26rem 0.5rem;
  border-top: 0.07rem solid color-mix(in srgb, var(--color-cyan) 42%, transparent);
  border-bottom: 0.07rem solid color-mix(in srgb, var(--color-cyan) 28%, transparent);
  background: color-mix(in srgb, var(--color-cyan) 7%, transparent);
}

.service-flow__node {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.service-flow__node--processed {
  align-items: flex-end;
  text-align: right;
}

.service-flow__node > span {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.service-flow__node b {
  color: var(--color-cyan);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-flow__node--processed b {
  color: var(--color-green);
}

.service-flow__node small {
  margin-left: 0.25rem;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
}

.service-flow__arrow {
  display: inline-flex;
  color: var(--color-cyan);
}

.service-flow__quality {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.16rem 0.5rem;
  border-left: 0.16rem solid var(--color-green);
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

.service-flow__quality-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.service-flow__quality-item i {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--quality-tone);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--quality-tone) 68%, transparent);
}

.kit-flat .grp--stage > .stage__light {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(60% 75% at 50% 0%, color-mix(in srgb, var(--color-orange) 16%, transparent), transparent 72%);
}

.stage__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
}

.stage__num {
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange) 55%, var(--color-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--color-orange) 45%, transparent));
}

.stage__unit {
  display: inline-block;
  margin-left: 0.22rem;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: baseline;
}

.stage__label {
  color: color-mix(in srgb, var(--color-orange) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 700;
}

.stage__pedestal {
  position: relative;
  align-self: center;
  width: 58%;
  height: 0.5rem;
}

.stage__pedestal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.12rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange) 55%, var(--color-violet));
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--color-orange) 45%, transparent);
}

.stage__stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.stage__stat {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.stage__stat b {
  display: inline-block;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  padding: 0.03rem 0.45rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--color-orange) 13%, transparent);
}

.stage__stat .stage__unit {
  color: var(--color-text);
  font-size: var(--text-md);
}

.stage__stat span {
  display: block;
  margin-top: 0.1rem;
  color: color-mix(in srgb, var(--color-orange) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 700;
}

/* ===== LƯỚI THẺ SỐ (grid) — DORMANT 2026-07-05 (owner bác, VH cơ sở chuyển stage):
   mỗi chỉ số một thẻ màu NỔI KHỐI — nền gradient tone + viền sáng; nhãn màu nhóm. ===== */
.grp__stiles {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0.45rem;
}

.stile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.7rem;
  border-top-left-radius: 0.25rem; /* chữ ký góc vát của họ thẻ kính */
  /* Nền KÍNH NAVY SẠCH, chỉ phớt màu mép trên — pha màu đậm lên navy ngả nâu bùn
     (owner: "quá màu mè và màu tối"); màu dồn vào viền + đèn + nhãn. */
  background: linear-gradient(178deg, color-mix(in srgb, var(--tt) 13%, transparent), color-mix(in srgb, var(--color-bg-deep) 62%, transparent) 70%);
  border: 0.07rem solid color-mix(in srgb, var(--tt) 45%, transparent);
  box-shadow:
    inset 0 0.06rem 0 color-mix(in srgb, var(--color-white) 16%, transparent),
    0 0 0.55rem color-mix(in srgb, var(--tt) 16%, transparent);
}

.stile__val {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stile__val small {
  margin-left: 0.2rem;
  color: var(--tt);
  font-size: var(--text-md);
  font-weight: 700;
}

.stile--feat .stile__val {
  font-size: var(--text-kpi);
}

.stile__lbl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--tt);
  font-size: var(--text-md);
  font-weight: 700;
}

.stile__dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--tt);
  color: var(--tt);
  box-shadow: 0 0 0.3rem currentColor;
}

/* ===== CÂY PHÂN NHÁNH (tree, owner chốt P1): tổng đầu khối, thân cây tone chẻ
   nhánh đèn màu; số cột phải trong chip; dòng chốt = nhãn màu + chip ghim phải. ===== */
.tree__total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tree__total b {
  color: var(--color-text);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Missing values are status labels, not KPI numbers. Keep them readable without
   letting a long phrase dominate a compact tree block. */
.tree__total-value--missing,
.tree__num--missing {
  font-size: var(--text-md) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  padding: 0.16rem 0.42rem !important;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--color-cyan) 12%, transparent);
}

.tree__total-value--missing {
  font-size: var(--text-xl) !important;
}

.tree__total span {
  min-width: 0;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white)); /* đồng phục nhãn pastel */
  font-size: var(--text-md);
  font-weight: 700;
}

/* Đường chân trời sau nhãn tổng — nét mảnh phai dần, cùng họ nét thân cây. */
.tree__total-rule {
  flex: 1;
  height: 0.14rem;
  border-radius: 999px;
  align-self: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 45%, transparent), transparent);
}

.tree__branches {
  flex: 1;
  min-height: 0;
  margin-left: 1.05rem;
  border-left: 0.14rem solid color-mix(in srgb, var(--tone) 55%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.45rem;
  padding: 0.3rem 0;
}

.tree__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tree__stub {
  flex: none;
  position: relative;
  width: 1.1rem;
  height: 0.14rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, transparent), var(--bt));
}

.tree__stub::after {
  content: "";
  position: absolute;
  right: -0.28rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bt);
  box-shadow: 0 0 0.4rem var(--bt);
}

.tree__lbl {
  flex: 1;
  min-width: 0;
  margin-left: 0.35rem;
  color: color-mix(in srgb, var(--bt) 45%, var(--color-white)); /* đồng phục nhãn pastel */
  font-size: var(--text-md);
  font-weight: 700;
}

.tree__num {
  flex: none;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 0.03rem 0.42rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--bt) 12%, transparent);
}

.tree__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tree__foot-lbl {
  min-width: 0;
  color: color-mix(in srgb, var(--ft) 45%, var(--color-white)); /* đồng phục nhãn pastel */
  font-size: var(--text-md);
  font-weight: 700;
}

.tree__foot-val {
  flex: none;
  color: var(--ft);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 0.03rem 0.45rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--ft) 15%, transparent);
}

/* ===== THẺ NHÓM (tiles) — DORMANT 2026-07-05 (owner bác vòng 5, giữ cho chuyên trang):
   hàng đầu hero + cảnh báo ghim phải; dưới là thẻ kính nhỏ mỗi nhóm — đèn màu + số. ===== */
.tiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tiles-head .grp__hero {
  width: auto;
}

.grp__tiles {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.tile {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.7rem;
  border-top-left-radius: 0.25rem; /* chữ ký góc vát của họ thẻ kính */
  background: linear-gradient(178deg, color-mix(in srgb, var(--tt) 16%, transparent), color-mix(in srgb, var(--color-bg-deep) 60%, transparent) 70%);
  box-shadow: inset 0 0.06rem 0 color-mix(in srgb, var(--color-white) 12%, transparent);
}

.tile__lbl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 600;
}

.tile__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tt);
  color: var(--tt);
  box-shadow: 0 0 0.3rem currentColor;
}

.tile__val {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tile__val small {
  margin-left: 0.2rem;
  color: var(--tt);
  font-size: var(--text-md);
  font-weight: 700;
}

/* Donut CSS: tổng ở tâm, chú giải chip bên phải.
   (DORMANT 2026-07-05: home đã dẹp donut/ring/meter/gauge — giữ style cho chuyên trang.) */
.dnut-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 0;
}

.dnut {
  position: relative;
  flex: none;
  width: 6.8rem;
  aspect-ratio: 1;
}

.dnut__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.05rem), var(--color-black) calc(100% - 0.96rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.05rem), var(--color-black) calc(100% - 0.96rem));
  filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--tone) 45%, transparent));
}

.dnut__lead {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-bottom: 0.15rem;
}

.dnut__lead b {
  color: var(--color-text);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dnut__lead span {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
}

.dnut__legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.34rem;
}

/* ===== HEADER NỐI LIỀN THÂN (owner 2026-07-06, vòng 2: "bọc nó vào như Thu ngân
   sách, Đầu tư công để có 1 khối và tiêu đề đồng bộ" — header không còn là khối
   thứ 4 tách rời nữa; giờ là phần TRÊN CÙNG của MỘT panel duy nhất, viền/nền/bóng
   đổ đã chuyển hết lên `.panel.kit-flat` bao ngoài — header chỉ còn vạch ngăn mảnh
   + dải màu ấm rất nhẹ để phân biệt với thân, giống hệt Thu ngân sách/Đầu tư công. */
.kit-flat .panel__title {
  min-height: 2.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-blue) 22%, transparent), transparent);
}

.kit-flat .panel__title .panel__title-main {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kit-flat .panel__period {
  background: color-mix(in srgb, var(--color-orange) 20%, transparent);
  border: none;
  color: var(--color-yellow);
}

/* Vòng đo vệ tinh: bản mini xếp hàng ngang dưới đồng hồ. */
.grp__gauges--row {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
}

.grp__gauges--row .gauge__dial {
  width: 3.1rem;
  height: 3.1rem;
}

.grp__gauges--row .gauge__label {
  max-width: 5.4rem;
}

.gauge--stat {
  justify-content: center;
  gap: 0.12rem;
}

.gauge__statval {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ===== NHẠC CỤ CO GIÃN (chữa bệnh kinh niên "dồn cục trên, hở dưới"): cột cao theo màn
   nhưng nhạc cụ từng đóng khung cỡ chết → màn 16:10 sinh khoảng thừa dồn thành lỗ.
   Giờ đồng hồ/vòng/donut NỞ RA hút hết chỗ thừa (có trần) — màn cao hơn = vòng to hơn. ===== */
.kit-flat .meter {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 3.4rem;
  max-height: 4.9rem;
  aspect-ratio: 2 / 1.02;
  margin: 0 auto;
}

.kit-flat .dnut-wrap {
  align-items: stretch;
}

.kit-flat .dnut {
  /* Trong hàng ngang: LẤY CHIỀU CAO làm chuẩn (stretch theo dải, có trần), bề ngang
     bám theo aspect-ratio — vòng LUÔN TRÒN, không bị kéo thành bầu dục. */
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  height: auto;
  min-height: 5.6rem;
  max-height: 8.2rem;
  aspect-ratio: 1;
}

/* Màn hẹp xếp 1 cột: cột cao THEO NỘI DUNG (auto) nên "chia đều dải" (basis 0) sẽ ép
   các nhóm về 0 và đè chồng — trả nhóm về cao-theo-ruột ở chế độ này. */
@media (max-width: 1180px) {
  .kit-flat .grp {
    flex: none;
  }
}

/* Cột hero nới rộng — thu hẹp khoảng chết giữa số to và dải dòng bên phải. */
.kit-flat .grp__hero {
  width: 8.4rem;
}

/* Trend-card chỉ có 1 nhóm: căn giữa dọc trong thân card. */
.module-body > .grp:only-child {
  margin-top: auto;
  margin-bottom: auto;
}

/* Dải tín hiệu: MỖI DÒNG một chỉ số, xếp dọc, số canh phải -> cột số thẳng tắp. */
.grp__attrs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding-left: 0.65rem;
  border-left: 1px solid color-mix(in srgb, var(--tone) 20%, transparent);
}

/* 2 CỘT cho dòng thuộc tính phụ (sổ quỹ: Học bổng/Nhà mái ấm) — gộp 2 dòng riêng
   thành 1 hàng để nhường chỗ cho 3 dòng sổ quỹ chính (owner 2026-07-06: chữ chồng
   lên nhau do 5 dòng nội dung nhồi vào 1 chương — sửa bằng GIẢM SỐ DÒNG, không bóp
   chữ/không giành đất của chương khác vốn đã khít). Đặt SAU .grp__attrs để thắng
   cascade (cùng độ đặc hiệu, thứ tự khai báo quyết định — .grp__attrs còn 1 bản
   khai lại display:flex ở dưới file). */
.grp__attrs--cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.6rem;
}

.attr {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.attr__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.attr__icon {
  flex: none;
  display: inline-flex;
  color: var(--tone);
}

.attr__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  align-self: center;
}

.attr__label {
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.attr__valrow {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.attr__val {
  --stat-size: var(--text-xl);
  flex: none;
  color: var(--color-text);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: none;
}

.attr__sub {
  min-width: 0;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
}

.attr__sub--up { color: var(--color-mint); }
.attr__sub--good { color: var(--color-green); }
.attr__sub--warn { color: var(--color-yellow); }
.attr__sub--tone { color: var(--tone); }

/* Icon trong khối kit ép cỡ theo REM (đè attr px của SVG) — khối thuần rem, không xê dịch theo root. */
.grp__head-icon svg { width: 1.15rem; height: 1.15rem; }
.attr__icon svg { width: 0.8rem; height: 0.8rem; }
.stat-delta svg { width: 0.8rem; height: 0.8rem; }

/* Delta (mũi tên tăng/giảm) — màu độc lập với tone (tăng=mint, giảm=danger). */
.stat-delta {
  --fs: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-size: var(--fs);
  font-weight: 800;
}

.stat-delta--up {
  color: var(--color-mint);
}

.stat-delta--down {
  color: var(--color-danger);
}

.stat-delta--down svg {
  transform: scaleY(-1);
}

.stat-delta__lbl {
  color: color-mix(in srgb, var(--tone) 45%, var(--color-white));
  font-weight: 600;
}

.chart-legend {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.legend-item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.legend-line {
  width: 1rem;
  height: 2px;
  background: var(--color-cyan);
  box-shadow: var(--shadow-glow);
}

.legend-line--dash {
  background: repeating-linear-gradient(90deg, var(--alpha-blue-91164255-80), var(--alpha-blue-91164255-80) 5px, transparent 5px, transparent 9px);
  box-shadow: none;
}

.donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.25rem;
  height: 7.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 18px var(--alpha-cyan-19187255-30);
}

.metric-list {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: baseline;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.metric-row__label {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  color: var(--color-text);
}

.metric-row__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dot-color, var(--color-cyan));
  box-shadow: 0 0 10px var(--dot-color, var(--color-cyan));
}

.metric-row__value,
.metric-row__percent {
  font-weight: 700;
}

.metric-row__percent {
  color: var(--row-color, var(--color-cyan));
}

.metric-row--cyan {
  --dot-color: var(--color-cyan);
  --row-color: var(--color-cyan);
}

.metric-row--blue {
  --dot-color: var(--color-blue);
  --row-color: var(--color-blue);
}

.metric-row--mint,
.metric-row--success {
  --dot-color: var(--color-mint);
  --row-color: var(--color-mint);
}

.metric-row--green {
  --dot-color: var(--color-green);
  --row-color: var(--color-green);
}

.metric-row--yellow,
.metric-row--warning {
  --dot-color: var(--color-yellow);
  --row-color: var(--color-yellow);
}

.metric-row--orange {
  --dot-color: var(--color-orange);
  --row-color: var(--color-orange);
}

.metric-row--danger {
  --dot-color: var(--color-danger);
  --row-color: var(--color-danger);
}

.data-table {
  width: calc(100% - var(--space-5));
  margin: var(--space-2) auto 0;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.data-table th,
.data-table td {
  padding: 0.3125rem var(--space-2);
  border-bottom: 1px solid var(--alpha-blue-70160255-12);
  text-align: left;
}

.data-table th {
  background: var(--alpha-blue-46123210-12);
  color: var(--color-text);
  font-weight: 500;
}

.data-table td:nth-child(2),
.data-table td:nth-child(3),
.data-table th:nth-child(2),
.data-table th:nth-child(3) {
  text-align: center;
}

.tone-success {
  color: var(--color-mint);
}

.tone-warning {
  color: var(--color-yellow);
}

.tone-danger {
  color: var(--color-danger);
}

.tone-info {
  color: var(--color-cyan);
}

.dashboard-error-toast {
  position: fixed;
  inset: 1rem auto auto 1rem;
  z-index: 100;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-danger);
  box-shadow: var(--shadow-danger);
}