/* ===== (KHÔI PHỤC nguyên văn từ bản deploy 29/6) visual 3 ô KPI Đầu tư công ===== */
/* 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__source-summary {
  display: flex;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  padding: 0.28rem 0.45rem;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  line-height: 1.1;
  border-top: 1px solid var(--alpha-ice-103215255-18);
}

.invest__source-summary i {
  color: var(--color-cyan);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.invest__source-summary span {
  white-space: nowrap;
}

.invest__source-summary b {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
/* 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;
}
/* 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);
}
/* 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);
}
/* 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));
}

/* 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;
  /* Lề trong ĐỒNG BỘ chuẩn VHXH/MTTQ (owner 2026-07-06): 0.7rem thay vì 0.42rem riêng cho 4 ô hẹp. */
  padding: 0.3rem 0.7rem;
  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;
  /* Lề trong ĐỒNG BỘ chuẩn VHXH/MTTQ (owner 2026-07-06): 0.7rem, không phải 0.62rem riêng. */
  padding: 0.3rem 0.7rem;
  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ư. */
}





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


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



/* Thanh tiến độ + thang 0–50–100% (tile tỷ lệ giải ngân) */


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





/* ĐÃ 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;
}

/* ===== Card nghị quyết — hai nhóm dùng chung một card theo cấu trúc cũ. */
.nq-groups {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) 0.07rem minmax(0, 1.58fr);
  align-items: center;
  justify-content: center;
}

.nq-groups > .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%);
}

.nq-group {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.nq-group__hero {
  display: grid;
  justify-items: center;
}

.nq-group__hero .stage__label {
  white-space: nowrap;
}

.nq-group__value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
}

.nq-group__value > small {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 800;
}

.nq-group__num {
  display: block;
}

.nq-groups__divider {
  position: relative;
  z-index: 1;
  width: 0.07rem;
  align-self: stretch;
  margin: 0.3rem 0;
  background: color-mix(in srgb, var(--color-orange) 25%, transparent);
}

.nq-group__breakdown {
  margin-top: 0.25rem;
  font-size: var(--text-md);
  font-weight: 700;
}

.nq-group--subgroups {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.22rem;
  padding: 0 0.4rem 0 0.65rem;
}

.nq-group--subgroups .nq-group__hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  justify-items: stretch;
  gap: 0.45rem;
}

.nq-group--subgroups .nq-group__hero .stage__label {
  align-self: center;
  text-align: left;
}

.nq-group--subgroups .nq-group__value {
  justify-content: flex-end;
}

.nq-group__subgroups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.24rem;
  text-align: left;
}

.nq-group__subgroup {
  min-width: 0;
  padding: 0.22rem 0.34rem;
  background: color-mix(in srgb, var(--color-cyan) 5%, var(--color-map-stage-base));
  border-left: 0.14rem solid color-mix(in srgb, var(--color-cyan) 72%, transparent);
}

.nq-group__subgroup-title {
  display: block;
  margin-bottom: 0.14rem;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 900;
  text-align: left;
}

.nq-group__submetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.14rem 0.22rem;
}

.nq-submetric {
  min-width: 0;
  padding-left: 0.28rem;
  border-left: 0.08rem solid color-mix(in srgb, var(--color-cyan) 26%, transparent);
}

.nq-submetric b,
.nq-submetric small {
  display: block;
}

.nq-submetric b {
  color: var(--color-cyan);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
}

.nq-submetric small {
  margin-top: 0.08rem;
  color: var(--color-text);
  font-size: var(--text-3xs);
  font-weight: 700;
  line-height: 1.08;
  white-space: normal;
}

.nq-submetric--good b {
  color: var(--color-green);
}

.nq-submetric--warn b {
  color: var(--color-yellow);
}

.nq-submetric--danger b {
  color: var(--color-danger);
}

.nq-group__status--good {
  color: var(--color-green);
}

.nq-group__status--warn {
  color: var(--color-yellow);
}

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

.nq-group__sep {
  margin: 0 0.25rem;
  color: var(--color-text);
}

.nq-group__total {
  margin-top: 0.15rem;
  font-size: var(--text-md);
  font-weight: 700;
  color: color-mix(in srgb, var(--color-cyan) 45%, var(--color-white));
}