/* ============================================================
   KPI primitive dùng chung — 1 nơi định nghĩa, mọi khối tái sử dụng.
   Điều khiển bằng biến --tone (màu) và --stat-size (cỡ số).
   Dùng cho: khối Đầu tư công, khối Chi bộ - Đảng viên, …
   ============================================================ */
.stat-tile {
  --tone: var(--color-cyan);
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tone) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-party-bg-deep) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  box-shadow:
    inset 0 0 0.7rem color-mix(in srgb, var(--tone) 6%, transparent),
    0 0 0.7rem color-mix(in srgb, var(--color-black) 12%, transparent);
}

.stat-value {
  --stat-size: var(--text-2xl);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  color: var(--color-white);
  font-size: var(--stat-size);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 0.7rem color-mix(in srgb, var(--tone) 26%, transparent);
}

.stat-value--hero {
  --stat-size: var(--text-kpi-hero);
}

.stat-value small,
.stat-value__unit {
  color: var(--color-text-soft);
  font-size: var(--text-md);
  font-weight: 700;
}

.stat-label {
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-sub {
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 55%, var(--color-text-soft));
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Đầu tư công · dải điều hành giải ngân */
.invest {
  display: grid;
  height: 100%;
  min-height: 0;
}

.invest__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-2);
  height: 100%;
  min-height: 0;
}

/* Thu ngân sách · 4 ô nhóm lớn (Thu NSNN · Thu phường · Chi phường · Kết dư) */
.invest__kpis--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2); /* nới gap giữa 4 ô (trước 4px sát rạt) */
}