.topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 26rem) minmax(30rem, 1fr) minmax(23rem, 30rem);
  grid-template-rows: minmax(4.75rem, 1fr) 1.625rem;
  gap: 0 var(--space-4);
  align-items: stretch;
  height: 6.125rem;
  padding: var(--space-2) var(--space-4) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--alpha-blue-24160255-34);
  background:
    radial-gradient(circle at 50% 120%, var(--alpha-cyan-22200255-22), transparent 38%),
    radial-gradient(circle at 72% 0%, var(--alpha-blue-43125255-18), transparent 30%),
    linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011028-99)),
    repeating-linear-gradient(90deg, var(--alpha-cyan-22200255-035) 0, var(--alpha-cyan-22200255-035) 1px, transparent 1px, transparent 48px);
  box-shadow: 0 0 24px var(--alpha-blue-00119255-12), inset 0 -22px 32px var(--alpha-deep-001227-42);
}

.topbar::before,
.topbar::after {
  position: absolute;
  content: "";
}

.topbar::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--alpha-cyan-19187255-08) 8.2%, transparent 8.5% 49.5%, var(--alpha-cyan-19187255-10) 50%, transparent 50.5% 91%, var(--alpha-cyan-19187255-08) 91.2%, transparent 91.5%),
    linear-gradient(180deg, var(--alpha-white-025), transparent 46%, var(--alpha-cyan-19187255-045));
  pointer-events: none;
}

.topbar::after {
  left: 50%;
  bottom: 0;
  width: 74rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--alpha-cyan-19187255-18), var(--alpha-cyan-19187255-58), var(--alpha-cyan-19187255-18), transparent);
  box-shadow: 0 0 10px var(--alpha-cyan-19187255-26);
}

.topbar__identity {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-5) 0 var(--space-4);
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  border-left: 2px solid var(--color-cyan);
  background:
    radial-gradient(circle at 15% 50%, var(--alpha-cyan-22200255-24), transparent 42%),
    linear-gradient(90deg, var(--alpha-navy-064497-92), var(--alpha-navy-031848-28));
  box-shadow: inset 0 0 0 1px var(--alpha-ice-94231255-16), inset 0 0 22px var(--alpha-cyan-19187255-07);
}

.topbar__identity-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.topbar__identity-mark {
  color: var(--color-white);
  font-size: var(--text-hero-value);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.8;
  text-shadow: 0 0 18px var(--alpha-cyan-22200255-42);
}

.topbar__identity-place {
  padding-bottom: 0.25rem;
  color: var(--color-cyan);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.topbar__identity-line {
  width: min(15rem, 74%);
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-mint), transparent);
  box-shadow: 0 0 14px var(--alpha-cyan-22200255-80);
}

.topbar__identity-note {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.topbar__command-lens {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 0 7rem;
  background:
    linear-gradient(90deg, transparent, var(--alpha-cyan-19187255-12) 18%, var(--alpha-navy-074494-86) 36%, var(--alpha-navy-0965132-70) 50%, var(--alpha-navy-074494-86) 64%, var(--alpha-cyan-19187255-12) 82%, transparent),
    linear-gradient(180deg, var(--alpha-white-035), var(--alpha-navy-052153-30));
  clip-path: polygon(4rem 0, calc(100% - 4rem) 0, 100% 50%, calc(100% - 4rem) 100%, 4rem 100%, 0 50%);
  box-shadow: inset 0 0 0 1px var(--alpha-ice-94231255-15), inset 0 0 42px var(--alpha-cyan-22200255-11), 0 0 30px var(--alpha-cyan-22200255-10);
}

.topbar__command-lens::before,
.topbar__command-lens::after {
  position: absolute;
  top: 50%;
  width: 10rem;
  height: 0.1875rem;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
  box-shadow: 0 0 14px var(--alpha-cyan-22200255-80);
  content: "";
}

.topbar__command-lens::before { left: 6rem; }
.topbar__command-lens::after { right: 6rem; }

.topbar__kicker {
  color: var(--color-cyan);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.12rem;
  line-height: 1;
  text-transform: uppercase;
}

.topbar__agency {
  margin-top: var(--space-2);
  color: var(--color-text-panel-bright);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 9px var(--alpha-cyan-19187255-34), 0 2px 0 var(--alpha-black-50);
  white-space: nowrap;
}

.topbar__agency-sub {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.075rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.topbar__meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.85fr 0.85fr 1.2fr 1fr;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 var(--space-4) 0 4.25rem;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
  border-right: 2px solid var(--color-cyan);
  background:
    radial-gradient(circle at 70% 52%, var(--alpha-mint-79226141-13), transparent 36%),
    linear-gradient(270deg, var(--alpha-navy-064497-92), var(--alpha-navy-031846-42));
  box-shadow: inset 0 0 0 1px var(--alpha-ice-94231255-16), inset 0 0 22px var(--alpha-cyan-19187255-055);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.meta-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  height: auto;
  padding: 0 0 0 var(--space-3);
  justify-content: start;
  align-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  white-space: nowrap;
}

.meta-card::before {
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 0.1875rem;
  height: 2.25rem;
  border: 0;
  background: linear-gradient(180deg, var(--color-cyan), transparent);
  box-shadow: 0 0 10px var(--alpha-cyan-22200255-70);
  content: "";
}

.meta-card__label {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.meta-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-panel-bright);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
}

.meta-card--clock strong {
  font-size: var(--text-2xl);
}

.meta-card--status strong {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-mint);
  font-weight: 900;
  justify-content: center;
}

.meta-card--status strong::before {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-mint);
  box-shadow: 0 0 10px var(--alpha-mint-79226141-45);
  content: "";
}

.topbar__nav {
  position: relative;
  z-index: 3;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  border-top: 1px solid var(--alpha-ice-94231255-20);
  background: linear-gradient(90deg, transparent, var(--alpha-cyan-22200255-05), transparent);
}

.topbar__nav span {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.topbar__nav i {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 auto;
  background: var(--color-cyan);
  box-shadow: 0 0 10px var(--alpha-cyan-22200255-72);
  transform: rotate(45deg);
}

.panel {
  position: relative;
  overflow: hidden;
  border: var(--border-panel);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-panel-top), var(--color-panel) 28%, var(--alpha-deep-011435-97));
  box-shadow: var(--shadow-panel);
}

.panel::before,
.panel::after {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-color: var(--color-border);
  content: "";
}

.panel::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  color: var(--color-cyan);
}

.panel::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--color-cyan);
}

.panel__title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--alpha-blue-42165255-16);
  background: linear-gradient(90deg, var(--alpha-blue-21176139-64), var(--alpha-navy-052861-0));
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
}

.panel__title svg {
  flex: 0 0 auto;
  color: var(--color-cyan);
  filter: drop-shadow(0 0 7px var(--alpha-cyan-19187255-68));
}

/* Icon tile 3D ở tiêu đề khối: nằm gọn trong min-height 2.25rem, không kéo cao hàng. */
.icon-tile {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px var(--alpha-navy-052861-0));
}

.panel__title .icon-tile {
  margin: -0.25rem 0;
}

/* Đầu tư công: khối này dùng scheme trung tính (không cyan) — icon tiêu đề trắng. */
[data-module-id="dau_tu_cong"] .panel__title svg {
  color: var(--color-white);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-white) 32%, transparent));
}

.data-quality-badge {
  --quality-tone: var(--color-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  padding: 0.12rem 0.34rem;
  color: var(--quality-tone);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--quality-tone) 36%, transparent);
  background: color-mix(in srgb, var(--quality-tone) 8%, transparent);
  box-shadow: inset 0 0 0.55rem color-mix(in srgb, var(--quality-tone) 5%, transparent);
}

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

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

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

.map-panel-title .data-quality-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.panel__title--with-action {
  justify-content: space-between;
}

.panel__title--with-action span:first-child {
  margin-right: var(--space-2);
}

.panel__title button {
  border: 0;
  background: transparent;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  cursor: pointer;
}

.panel__title button[disabled] {
  color: var(--color-text-soft);
  cursor: default;
  opacity: 1;
  pointer-events: none;
  -webkit-text-fill-color: var(--color-text-soft);
}

.panel__title button::after {
  margin-left: var(--space-1);
  color: var(--color-cyan);
  content: ">";
}

/* Chip "kỳ dữ liệu" trong header trend-card (đẩy sát phải, trước nút Chi tiết) */
/* ===== Badge KỲ dữ liệu — 1 STYLE DUY NHẤT cho MỌI panel (pill xanh dương đặc, chữ trắng,
   bo tròn). Không còn mỗi nơi một kiểu. Vị trí (margin) để riêng theo ngữ cảnh. ===== */
.trend-card__period,
.business__period,
.budget-analysis__period,
.party-panel__period,
.culture__period {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0.18rem 0.82rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-period-badge-top), var(--color-period-badge-bottom));
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-white) 18%, transparent),
    0 0 0.62rem var(--alpha-blue-73160255-50);
}

.trend-card__period { margin-right: var(--space-2); }

.trend-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.trend-card__body {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
}

.trend-card__metric {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--space-4);
  align-items: end;
  min-height: 3.25rem;
}

.trend-card__value {
  color: var(--color-white);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px var(--alpha-white-18);
}

.trend-card__unit {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.trend-card__delta {
  align-self: center;
  color: var(--color-mint);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
}

.trend-card__delta span,
.trend-card__peak span {
  display: block;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 500;
}

.trend-card__peak {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.trend-card--investment .trend-card__body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: var(--space-1) var(--space-3) var(--space-1);
}

.trend-card--investment .trend-card__metric {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-height: 2rem;
}

.trend-card--investment .trend-card__value {
  font-size: var(--text-2xl);
}

.trend-card--investment .trend-card__unit,
.trend-card--investment .trend-card__delta span,
.trend-card--investment .trend-card__peak span {
  font-size: var(--text-2xs);
}

.trend-card--investment .trend-card__delta,
.trend-card--investment .trend-card__peak {
  font-size: var(--text-xs);
  line-height: 1.15;
}

.trend-card--investment .trend-card__peak--attention {
  align-self: center;
  padding: 0.18rem 0.42rem;
  color: var(--color-yellow);
  background: color-mix(in srgb, var(--color-yellow) 7%, transparent);
  border-left: 0.16rem solid color-mix(in srgb, var(--color-yellow) 72%, transparent);
  text-shadow: 0 0 0.5rem color-mix(in srgb, var(--color-yellow) 18%, transparent);
}

.trend-card--investment .trend-card__peak--attention span {
  color: var(--color-text);
}

/* ============================================================
   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) */
}

/* 4 ô hẹp hơn 3 ô: nhãn cho xuống dòng thay vì cắt ellipsis.
   space-between: dàn ĐỀU head·số·delta·bars kín ô (4 ô đồng cấu trúc nên số vẫn thẳng hàng),
   bars tự xuống đáy → hết dồn cục + hết khoảng trống 56px ở đáy. Khi ô thấp (zoom) khe tự co. */
.invest__kpis--four .invest__kpi {
  justify-content: space-between;
  padding: 0.3rem 0.42rem;
  gap: 0.12rem;
}

.invest__kpis--four .invest__head {
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
}

/* Icon đẩy sang PHẢI đầu ô (sau nhãn). Đã bỏ chip trạng thái. */
.invest__kpis--four .invest__badge {
  margin-left: auto;
  flex: none;
  align-self: flex-start;
}

.invest__kpis--four .stat-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
}

/* Budget = CÙNG cỡ số với Đầu tư công ở mọi cỡ màn (1 chế độ, scale đều qua root-font). */
.invest__kpis--four .stat-value {
  --stat-size: clamp(1.85rem, 2.7vh, 2.4rem);
}

/* Delta của ô. Mũi tên tăng/giảm CHỈ 2 màu: tăng = xanh lá, giảm = đỏ
   (độc lập với màu định danh của tile). Dòng không có chiều (vd "Năm 2025") = màu tone. */
.budget-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--tone);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

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

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

.budget-delta .tabler-icon {
  flex: none;
}

/* Chiều GIẢM: lật dọc mũi tên đi-lên → thành đi-xuống (icon nhìn rõ là gì) */
.budget-delta--down .tabler-icon {
  transform: scaleY(-1);
}

/* ── Nội dung giàu khối Thu ngân sách (tô theo --tone từng ô) ── */

/* 2 cột so sánh Quý I ↔ Quý II (data thật) */
.budget-bars {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
}

.budget-bar {
  display: grid;
  grid-template-columns: 2.3rem 1fr auto;
  align-items: center;
  gap: 0.34rem;
}

.budget-bar-cap {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-text-soft);
}

.budget-bar i {
  height: 0.44rem;
  width: calc(var(--w) * 1%);
  min-width: 0.4rem;
  border-radius: 999px;
  background: var(--tone);
  box-shadow: 0 0 0.4rem color-mix(in srgb, var(--tone) 45%, transparent);
}

.budget-bar b {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-text);
  text-align: right;
}



/* Tile = 3 khối: đầu (nhãn) · giữa (số) · chân (footer) — phân bố ĐỀU theo chiều cao
   để lấp khoảng trống khi row cao (màn IOC lớn), không bị dồn cụm để lại void. */
.invest__kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Top-anchor: head + số + caption dính trên cùng → 3 số bignum THẲNG HÀNG ở mọi tile
     (visual cao/thấp khác nhau không còn đẩy số lên/xuống). Visual tự xuống đáy (margin-top:auto). */
  justify-content: flex-start;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.3rem 0.62rem;
  overflow: hidden;
  /* MỘT CHẾ ĐỘ DUY NHẤT (đầy đủ): KHÔNG còn container-query lật mode ít/đủ thông tin.
     Zoom/đổi cỡ chỉ SCALE (qua root-font) chứ không đổi cấu trúc — theo yêu cầu chủ đầu tư. */
}

/* Dải visual giữa tile — LUÔN HIỆN (1 chế độ đầy đủ duy nhất).
   margin trên+dưới auto: CĂN GIỮA visual trong khoảng trống dưới số (số top-anchor vẫn thẳng
   hàng), tránh visual dính đáy thành "2 cụm". Ô thấp (zoom) khe auto tự co → không tràn. */
.invest__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 0;
}

.invest__visual--wide {
  width: 100%;
}

/* Khối số giữa (số + chú thích đi kèm) gom làm 1 để space-between canh đều */
.invest__valuegroup {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* Caption phụ DÙNG CHUNG ngay dưới số (cả 3 tile Đầu tư công) — đồng nhịp "SO VỚI KỲ TRƯỚC":
   in hoa, tô theo --tone (KHÔNG xám, theo [[dashboard-color-system]]); visual đẩy xuống dưới. */
.invest__sub {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 64%, var(--color-text));
}

/* Cảnh báo thật (vd dự án vướng mắc) → đỏ status có nghĩa */
.invest__sub--danger {
  color: var(--color-danger);
}

.invest__kpi .stat-sub {
  overflow: visible;
  white-space: normal;
  line-height: 1.18;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 800;
}

/* ĐỊNH DANH · màu BÃO HÒA rực theo ảnh chuẩn — KHÔNG pastel nhạt (pastel = nhòe/mờ).
   Số = TRẮNG premium (kế thừa .stat-value); màu rực nằm ở icon/đơn vị/delta/viền/glow.
   Ngoại lệ: số nào TỰ là cảnh báo (tỷ lệ giải ngân thấp) thì số mang màu status. */
.invest__kpi--success { --tone: var(--color-cyan); }   /* Kế hoạch vốn — định danh cyan; delta tăng = xanh lá */
.invest__kpi--info    { --tone: var(--color-blue); }    /* Đã giải ngân — xanh dương rực */
.invest__kpi--warning { --tone: var(--color-orange); }  /* Tỷ lệ giải ngân — cam rực */
.invest__kpi--danger  { --tone: var(--color-danger); }

/* Số = GRADIENT sáng→tone (premium, đúng ảnh chuẩn), KHÔNG phẳng trắng.
   Đỉnh nét chữ gần trắng, chân nét đậm màu tone → khối số có chiều sâu. */
.invest__kpi .stat-value {
  /* Cỡ số DUY NHẤT cho mọi cỡ màn (root-font lo việc phóng đều). Đầu tư công = Thu ngân sách. */
  --stat-size: clamp(1.85rem, 2.7vh, 2.4rem);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-white) 64%, var(--tone)) 0%,
    var(--tone) 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--tone) 34%, transparent));
}

/* Đơn vị mang màu tone đặc (vd "tỷ" cyan, "%" cam) */
.invest__kpi .stat-value small {
  -webkit-text-fill-color: var(--tone);
  color: var(--tone);
}

/* Đã giải ngân: "/155,1 tỷ" là mẫu số ngữ cảnh → dịu */
.invest__kpi--info .stat-value small {
  -webkit-text-fill-color: var(--color-text-soft);
  color: var(--color-text-soft);
}

/* Nhãn ô: chữ TRẮNG crisp */
.invest__kpi .stat-label {
  color: var(--color-text);
  font-size: var(--text-md);
}

/* Footer Kế hoạch vốn: 2 cột chỉ số (mũi tên ↗) + "so với kỳ trước", có gạch ngăn */
.invest__delta-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: auto; /* cỡ compact (visual ẩn): footer vẫn nằm đáy */
  padding-top: 0.26rem;
  border-top: 1px solid color-mix(in srgb, var(--tone) 24%, transparent);
}

.invest__delta-col {
  display: grid;
  gap: 0.12rem;
  align-content: start;
  min-width: 0;
}

.invest__delta-col + .invest__delta-col {
  padding-left: 0.5rem;
  border-left: 1px solid color-mix(in srgb, var(--tone) 20%, transparent);
}

.invest__delta-foot .invest__growth {
  font-size: var(--text-sm);
}

.invest__delta-col small {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1.15;
}

.invest__growth {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--color-mint); /* delta tăng = xanh lá tích cực, tách khỏi tone cyan của ô */
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1;
}

.invest__growth svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* Header tile: icon tròn + nhãn (+ badge cảnh báo ở tile tỷ lệ) */
.invest__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.invest__head .stat-label {
  min-width: 0;
}

.invest__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 42%, transparent);
}

/* Footer ngữ cảnh: gạch ngăn theo tone + icon + chữ phụ */
.invest__context {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: auto; /* cỡ compact (visual ẩn): footer vẫn nằm đáy */
  padding-top: 0.26rem;
  border-top: 1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.1;
}

.invest__context svg {
  flex: none;
  width: 0.82rem;
  height: 0.82rem;
  color: var(--tone);
}

/* Footer cảnh báo vấn đề thật (vd dự án vướng mắc) — đỏ status có nghĩa, giữ chữ đỏ */
.invest__context--danger {
  --tone: var(--color-danger);
  color: var(--color-danger);
}

/* Thanh tiến độ + thang 0–50–100% (tile tỷ lệ giải ngân) */
/* Hàng số tỷ lệ + badge cảnh báo cùng dòng */
.invest__valuerow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem 0.3rem;
  min-width: 0;
}

/* Badge "Chậm tiến độ" cạnh số tỷ lệ */
.invest__tag {
  --tag-tone: var(--color-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  color: var(--tag-tone);
  background: color-mix(in srgb, var(--tag-tone) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-tone) 46%, transparent);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.invest__tag--warning {
  --tag-tone: var(--color-orange);
}

/* ── Visual giàu cho từng tile (CSS thuần, KHÔNG echarts) — tô theo --tone ── */

/* TILE 1 · So sánh Kỳ trước vs Kỳ này (nhãn + cột + giá trị + mũi tên) */
.invest__compare {
  flex-direction: column;
  align-items: stretch;
  gap: 0.26rem;
  width: 100%;
}

.invest__compare-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
}

.invest__cbar {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  min-width: 0;
}

.invest__cbar-cap {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-text-soft);
}

.invest__cbar i {
  width: 100%;
  max-width: 3.4rem;
  height: calc(var(--h) * 0.016rem);
  min-height: 0.34rem;
  border-radius: 0.18rem;
  background: color-mix(in srgb, var(--tone) 40%, transparent);
}

.invest__cbar[data-k="cur"] i {
  background: var(--tone);
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--tone) 45%, transparent);
}

.invest__cbar b {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-text);
}

.invest__compare-arrow {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  align-self: center;
  color: var(--color-mint);
  font-size: var(--text-2xs);
  font-weight: 800;
}

.invest__compare-arrow b {
  color: var(--color-mint);
}

/* TILE 2 · Nhãn "Lũy kế" + thanh tiến độ; dồn xuống ĐÁY tile để giãn chữ phía trên */
.invest__disburse {
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  width: 100%;
}

.invest__progress {
  position: relative;
  width: 100%;
  height: 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
}

.invest__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct) * 1%);
  min-width: 0.55rem;
  border-radius: 999px;
  background: var(--tone);
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--tone) 55%, transparent);
}

.invest__progress-label {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-text);
}

/* Nhãn "Lũy kế đến hiện tại" trên thanh tiến độ — in hoa, tô theo --tone (không xám) */
.invest__disburse-cap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 60%, var(--color-text));
}

/* TILE 3 · Donut có số ở giữa + chú giải + mục tiêu */
.invest__gauge {
  align-items: center;
  gap: 0.7rem;
  width: 100%;
}

.invest__donut {
  --pct: 0;
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 3.3rem;
  aspect-ratio: 1;
}

.invest__donut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--tone) calc(var(--pct) * 1%),
    color-mix(in srgb, var(--tone) 18%, transparent) 0
  );
  -webkit-mask: radial-gradient(closest-side, transparent 60%, var(--color-black) 62%);
  mask: radial-gradient(closest-side, transparent 60%, var(--color-black) 62%);
  filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--tone) 30%, transparent));
}

.invest__donut b {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--tone);
}

.invest__gauge-legend {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.invest__gauge-legend p {
  margin: 0; /* bỏ margin mặc định của <p> (10,8px) khiến 2 dòng xa nhau */
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-soft);
}

.invest__gauge-target::before {
  margin-right: 0.28rem;
  color: var(--tone);
  content: "\2022";
}

.invest__gauge-target {
  color: color-mix(in srgb, var(--tone) 70%, var(--color-text));
}

/* ĐÃ BỎ TOÀN BỘ @container investkpi (118px/130px/159px): trước đây chúng LẬT giữa
   "chế độ gọn" (ẩn visual, hiện footer chữ) và "chế độ đầy đủ" (hiện visual) theo chiều cao
   tile → khi zoom/đổi cỡ bị nhảy 2 mode ít/đủ thông tin. Theo yêu cầu chủ đầu tư: chỉ còn
   MỘT chế độ ĐẦY ĐỦ; cỡ chữ full-mode đưa thẳng vào base; root-font lo việc scale đều. */

.chart-wrap {
  position: relative;
  min-height: 0;
}

.home-echart {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.chart-wrap--investment {
  display: grid;
  align-items: stretch;
}

.home-echart--investment {
  height: 100%;
  min-height: 3.25rem;
}

/* ===== Khối "Giải quyết TTHC" — snapshot 1 kỳ (hero + 3 chỉ số vòng tròn + thanh cơ cấu kênh) ===== */
/* Admin snapshot KHÔNG có chart → body 1 hàng phủ hết chiều cao (tránh grid auto 1fr để
   lại khoảng trống dưới). Nội dung tự dàn đều: hero+stats giữa, kênh tiếp nhận dưới đáy. */
.trend-card--admin .trend-card__body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.admin-snapshot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
  padding-top: var(--space-1);
}

.admin-snapshot__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
}

.admin-snapshot__hero {
  display: flex;
  flex-direction: column;
  flex: none;
  padding-right: var(--space-4);
  border-right: 1px solid color-mix(in srgb, var(--color-cyan) 22%, transparent);
}

.admin-snapshot__value {
  --stat-size: clamp(2rem, 3.1vh, 3rem);
  font-size: var(--stat-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.admin-snapshot__unit {
  margin-top: 0.3rem;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.admin-snapshot__stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.admin-stat {
  --tone: var(--color-cyan);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.admin-stat__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  color: var(--tone);
  border: 2px solid color-mix(in srgb, var(--tone) 50%, transparent);
  box-shadow:
    inset 0 0 0.55rem color-mix(in srgb, var(--tone) 20%, transparent),
    0 0 0.5rem color-mix(in srgb, var(--tone) 18%, transparent);
}

.admin-stat__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-stat__label {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.admin-stat__value {
  color: var(--tone);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.05;
}

.admin-stat__value small {
  font-size: var(--text-md);
  font-weight: 800;
}

.admin-channels {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: none;
}

.admin-channels__title {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-channels__bar {
  display: flex;
  gap: 0.3rem;
}

.admin-channel {
  --tone: var(--color-cyan);
  /* basis auto + min-width mặc định (content): segment rộng tối thiểu vừa chữ, KHÔNG co cắt
     nhãn; phần dư chia theo --w (tỉ lệ 9/31/60) → đọc được hết mà vẫn thấy tương quan. */
  flex: var(--w) 1 auto;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.42rem 0.6rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 38%, transparent);
  color: var(--color-text);
  overflow: hidden;
}

.admin-channel__icon {
  flex: none;
  display: flex;
  color: var(--tone);
}

.admin-channel__label {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-channel__pct {
  margin-left: auto;
  font-size: var(--text-md);
  font-weight: 900;
  white-space: nowrap;
}

/* Toàn trình = kênh số hoá cao nhất → sáng + glow (đỉnh ramp tối→sáng) */
.admin-channel--primary {
  background: color-mix(in srgb, var(--tone) 58%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 72%, transparent),
    0 0 0.8rem color-mix(in srgb, var(--tone) 42%, transparent);
  color: var(--color-white);
}

.admin-channel--primary .admin-channel__icon {
  color: var(--color-white);
}

.admin-channel--primary .admin-channel__pct {
  font-size: var(--text-lg);
}

/* ===== Khối "Doanh nghiệp & hộ cá thể" (rail trái) — theo thiết kế hình 1 ===== */
.business-panel {
  display: flex;
  flex-direction: column;
}

.business__title {
  display: flex;
  align-items: center;
}

.business__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grid 3 hàng: 2 thẻ số (LỚN) · header chart · chart (nhỏ lại). Cân lại để số dễ đọc,
   chart không nuốt hết chỗ. */
.business {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
  padding: 0.1rem var(--space-3) var(--space-2);
}

/* 2 thẻ chỉ số cạnh nhau — chiếm hàng 1 (cao), nội dung căn giữa cho thoáng */
.business__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-height: 0;
}

.business__card {
  --tone: var(--color-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  border-radius: 0.6rem;
  border-left: 4px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 20%, transparent);
}

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

.business__card-label {
  color: var(--color-text);
  font-size: var(--text-3xs);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business__numrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.business__value {
  --stat-size: clamp(1.7rem, 3vh, 3.3rem);
  font-size: var(--stat-size);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
}

.business__note {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.1;
}

.business__note--up {
  color: var(--color-mint);
  font-weight: 800;
}

/* Chip delta tăng — xanh lá; mũi tên + [%/"so quý trước"] xếp 2 dòng */
.business__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.45rem;
  color: var(--color-mint);
  background: color-mix(in srgb, var(--color-mint) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-mint) 30%, transparent);
  white-space: nowrap;
}

.business__delta-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.business__delta b {
  font-size: var(--text-sm);
  font-weight: 900;
}

.business__delta small {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
}

/* Header biểu đồ: tiêu đề "XU HƯỚNG…" + chú giải (đường liền blue / đứt cyan) */
.business__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.15rem var(--space-2);
  flex: none;
}

.business__chart-title {
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.business__legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem 0.7rem;
}

.business__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.business__legend-line {
  width: 1.1rem;
  height: 0;
  border-top: 3px solid var(--color-blue);
  border-radius: 2px;
}

.business__legend-line--dashed {
  border-top-style: dashed;
  border-top-color: var(--color-cyan);
}

.business__chart {
  min-height: 0;
}

.business__chart .home-echart {
  width: 100%;
  height: 100%;
  min-height: 2.2rem;
}

/* ===== Khối "Không gian văn hóa Hồ Chí Minh" (góc dưới-phải, gộp 2 khối) ===== */
.culture-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

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

.culture__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--color-cyan);
  border: 2px solid color-mix(in srgb, var(--color-cyan) 50%, transparent);
  background: color-mix(in srgb, var(--color-cyan) 10%, transparent);
}

.culture__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.culture {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.42rem;
  flex: 1;
  min-height: 0;
  padding: 0.32rem var(--space-3) 0.48rem;
}

.culture__top {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex: none;
}

.culture__hero {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  border-left: 3px solid var(--color-cyan);
  padding-left: 0.7rem;
}

.culture__value {
  --stat-size: clamp(2.2rem, 4vh, 3.5rem);
  font-size: var(--stat-size);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
}

.culture__unit {
  color: var(--color-cyan);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.05;
}

.culture__sub {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.culture__delta {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-mint) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-mint) 36%, transparent);
}

.culture__delta-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  color: var(--color-mint);
  border: 2px solid color-mix(in srgb, var(--color-mint) 55%, transparent);
}

.culture__delta-num {
  color: var(--color-mint);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
}

.culture__delta-num small {
  font-size: var(--text-md);
  font-weight: 800;
}

.culture__delta-lbl {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
}

.culture__focus {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.65rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-cyan) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cyan) 26%, transparent);
}

.culture__focus-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  color: var(--color-cyan);
  border: 2px solid color-mix(in srgb, var(--color-cyan) 50%, transparent);
}

.culture__focus-pct {
  --stat-size: clamp(1.7rem, 2.9vh, 2.5rem);
  flex: none;
  color: var(--color-cyan);
  font-size: var(--stat-size);
  font-weight: 900;
  line-height: 1;
}

.culture__focus-lbl {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.15;
}

.culture-bar {
  display: flex;
  gap: 0.24rem;
  flex: none;
  height: 1.62rem;
}

.culture-bar__seg {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 0.4rem;
  background: var(--tone);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 900;
}

.culture-leg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem var(--space-3);
  flex: none;
}

/* Mỗi mục 1 dòng: chấm màu · nhãn (co giãn, cắt ellipsis nếu dài) · số điểm — gọn hơn 2 dòng,
   chừa khoảng thở cho cả khối. */
.culture-leg__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.culture-leg__dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--tone);
}

.culture-leg__label {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.culture-leg__value {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: var(--color-white);
  font-size: var(--text-md);
  font-weight: 900;
}

.culture-leg__value small {
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.chart-legend {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text-soft);
  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-soft);
}

.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-soft);
  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);
}