/* CHUYÊN TRANG CHI TIẾT (dtl) — khung dùng chung cho các trang lĩnh vực (Chi bộ - Đảng viên,
   Thu chi ngân sách, Đầu tư công...). Bộ màu B3 lam biển qua token --color-dtl-* (tokens.css);
   cấu trúc owner chốt 2026-07-10: pill mục → thẻ KPI trắng (mốc kỳ trước + chip chênh lệch)
   → nhận định/gợi ý 2 cột → dải biểu đồ ECharts và insight truy vết.
   Chữ trong khối dùng token theo vai trò: KPI title --text-xl, value/support, tiêu đề mục --text-lg;
   Không dùng text-sm/2xs cho dữ liệu đọc được: các tab phải giữ cùng nhịp chữ responsive.
   MỌI chữ dùng chung mực --color-dtl-ink — không opacity, không tầng chữ mờ. */

.dtl {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  background: var(--color-dtl-bg);
  color: var(--color-dtl-ink);
  border-radius: var(--radius-md);
}

.dtl-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
}

.dtl-sechead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.dtl-pill {
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-dtl-primary), var(--color-dtl-primary-2));
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: 900;
}

.dtl-sechead-note {
  font-size: var(--text-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-dtl-ink);
}

.dtl-sechead-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  min-width: 0;
}

.dtl-filter-set {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dtl-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.dtl-filter-label {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-filter .dtl-period-select {
  min-width: 6.2rem;
}

/* Ô chọn kỳ — cùng viền/nền với .dtl-card (không bịa màu mới, khớp ngôn ngữ khối trắng
   đã có trong trang) thay vì để nguyên khung xám mặc định của trình duyệt. */
.dtl-period-select {
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-ink) 22%, transparent);
  background: var(--color-white);
  color: var(--color-dtl-ink);
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 800;
  cursor: pointer;
}

.dtl-period-select:disabled {
  cursor: wait;
  opacity: 0.6;
}

.dtl-source-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-dtl-ink) 18%, transparent);
  border-radius: 0.65rem;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dtl-ink) 10%, transparent);
}

.dtl-source-status__title {
  flex: none;
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-source-status__items {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  min-width: 0;
}

.dtl-source-status__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-source-status__item i {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-dtl-good);
}

.dtl-source-status__item.is-missing i {
  background: var(--color-dtl-warn);
}

.dtl-source-status__item small {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
}

.dtl-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-dtl-ink) 22%, transparent);
  border-radius: 0.8rem;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dtl-ink) 14%, transparent);
}

.dtl-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}

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

.dtl-kpi-value-row {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.dtl-kpi-number-group {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
}

/* RUY BĂNG CHÉO góc phải trên thẻ KPI (owner chốt đồ họa G02, 2026-07-12): dải kỳ dữ liệu
   vắt qua góc — đồ họa duy nhất của thẻ, kiêm luôn việc ghi kỳ (thay tag chữ cũ). */
.dtl-card--ribbon {
  position: relative;
  overflow: hidden;
}

.dtl-kpi-ribbon {
  position: absolute;
  top: 0.85rem;
  right: -2.6rem;
  width: 8rem;
  padding: 0.12rem 0;
  background: linear-gradient(90deg, var(--color-dtl-primary), var(--color-dtl-primary-2));
  color: var(--color-white);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(38deg);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--color-dtl-ink) 30%, transparent);
}

.dtl-label {
  max-width: 100%;
  padding-right: 2.8rem;
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-dtl-ink);
}

.dtl-cap {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-dtl-ink);
}

.dtl-kpi-num {
  font-size: var(--text-kpi-hero);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--color-dtl-primary);
}

.dtl-kpi-num--violet { color: var(--color-dtl-kpi-violet); }
.dtl-kpi-num--bad { color: var(--color-dtl-chip-bad); }
.dtl-kpi-num--good { color: var(--color-dtl-chip-good); }

.dtl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.dtl-chip .tabler-icon {
  flex: none;
}

.dtl-kpi-delta {
  display: inline-flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  white-space: nowrap;
}

.dtl-kpi-delta-label {
  font-weight: 500;
}

.dtl-kpi-delta--good .dtl-kpi-delta-label,
.dtl-kpi-delta--bad .dtl-kpi-delta-label,
.dtl-kpi-delta--warn .dtl-kpi-delta-label {
  font-weight: 800;
}

.dtl-kpi-delta-row {
  justify-content: flex-start;
  margin-top: 0.12rem;
}

.dtl-kpi-delta--good { color: var(--color-dtl-chip-good); }
.dtl-kpi-delta--bad { color: var(--color-dtl-chip-bad); }
.dtl-kpi-delta--warn { color: var(--color-dtl-chip-warn); }
.dtl-kpi-delta--info { color: var(--color-dtl-chip-info); }

.dtl-kpi-comparison {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.dtl-kpi-unit {
  margin-left: 0.35rem;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-dtl-ink);
}

/* Hàng nhận định/gợi ý có cấu trúc: đèn chấm màu hoặc chip P1/P2 + phần dẫn đậm */
.dtl-li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  list-style: none;
  margin-left: -1.1rem;
}

.dtl-li .dtl-chip {
  flex: none;
}

.dtl-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  /* Ghim theo DÒNG CHỮ ĐẦU (câu dài xuống 2 dòng mà đèn nằm giữa khối thì trôi lơ lửng
     giữa 2 dòng — QA 2026-07-12); 0.35rem ≈ tâm dòng chữ cao 1.5 × --text-md. */
  align-self: flex-start;
  margin-top: 0.35rem;
}

.dtl-dot--good { background: var(--color-dtl-chip-good); }
.dtl-dot--warn { background: var(--color-dtl-chip-warn); }
.dtl-dot--bad { background: var(--color-dtl-chip-bad); }
.dtl-dot--info { background: var(--color-dtl-chip-info); }

/* Chip nền ĐẶC rực + chữ trắng (owner 2026-07-11: bản tint chữ thẫm "tối quá");
   mũi tên tăng/giảm gắn ở tầng JS (chip() trong domain-detail.js), không dấu cộng/trừ. */
.dtl-chip--good { background: var(--color-dtl-chip-good); color: var(--color-white); }
.dtl-chip--warn { background: var(--color-dtl-chip-warn); color: var(--color-white); }
.dtl-chip--bad { background: var(--color-dtl-chip-bad); color: var(--color-white); }
.dtl-chip--info { background: var(--color-dtl-chip-info); color: var(--color-white); }

.dtl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.dtl-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  align-items: start;
}

/* An ninh trật tự: three existing source charts plus two Quân sự charts fill
   the final row without leaving a dead third column. */
.dtl-grid4--antt-balanced {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.dtl-grid4--antt-balanced > [data-dtl-grid-span="2"] {
  grid-column: span 2;
}

.dtl-grid4--antt-balanced > [data-dtl-grid-span="3"] {
  grid-column: span 3;
}

/* Wrapper chỉ giữ nhịp layout; hai card phân tích bên trong mới là bề mặt thị giác. */
.dtl-analysis-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dtl-analysis-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dtl-analysis-title {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.34rem 0.95rem;
  border-radius: 0.9rem;
  background: linear-gradient(115deg, var(--color-dtl-primary), var(--color-dtl-primary-2));
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
}

.dtl-analysis-period {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
  white-space: nowrap;
}

.dtl-analysis-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, transparent);
}

.dtl-analysis-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.dtl-analysis-section {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 24%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 45%, var(--color-white));
}

.dtl-analysis-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.dtl-analysis-section-title {
  flex: none;
  padding-left: 0.58rem;
  border-left: 0.3rem solid var(--color-dtl-primary-2);
  color: var(--color-dtl-primary);
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1.2;
}

.dtl-analysis-section-note {
  min-width: 0;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}

.dtl-analysis-section--operations .dtl-analysis-section-title {
  border-left-color: var(--color-dtl-chip-warn);
  color: var(--color-dtl-warn);
}

.dtl-analysis-section--operations .dtl-analysis-items {
  border-color: color-mix(in srgb, var(--color-dtl-chip-warn) 25%, transparent);
}

.dtl-analysis-section .dtl-analysis-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 0;
}

.dtl-analysis-section--operations .dtl-analysis-item:last-child {
  grid-column: 1 / -1;
}

.dtl-analysis-item {
  position: relative;
  display: flex;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.72rem 0.85rem;
  border-right: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 15%, transparent);
}

.dtl-analysis-item:last-child {
  border-right: 0;
}

.dtl-analysis-mark {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--color-dtl-chip-info);
  box-shadow: 0 0 0 4px var(--color-dtl-info-bg);
}

.dtl-analysis-item--good .dtl-analysis-mark {
  background: var(--color-dtl-chip-good);
  box-shadow: 0 0 0 4px var(--color-dtl-good-bg);
}

.dtl-analysis-item--warn .dtl-analysis-mark {
  background: var(--color-dtl-chip-warn);
  box-shadow: 0 0 0 4px var(--color-dtl-warn-bg);
}

.dtl-analysis-item--bad .dtl-analysis-mark {
  background: var(--color-dtl-chip-bad);
  box-shadow: 0 0 0 4px var(--color-dtl-bad-bg);
}

.dtl-analysis-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.22rem;
}

.dtl-analysis-label {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-analysis-item-body strong {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.35;
}

.dtl-analysis-detail {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
}

.dtl-analysis-action {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.25rem 0.15rem 0;
  color: var(--color-dtl-warn);
  font-size: var(--text-md);
  line-height: 1.35;
}

.dtl-analysis-action span {
  flex: none;
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-analysis-action strong {
  color: var(--color-dtl-ink);
  font-weight: 800;
}

/* Số liệu nổi bật trong panel phải tách khỏi nền trắng ngay ở lần đọc đầu tiên. */
.dtl-analysis-panel .dtl-num-cap {
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--color-dtl-primary-2);
  background: var(--color-dtl-chip-info);
  color: var(--color-white);
  box-shadow: none;
}

.dtl-analysis-item--good .dtl-num-cap {
  border-color: var(--color-dtl-chip-good);
  background: var(--color-dtl-chip-good);
}

.dtl-analysis-item--warn .dtl-num-cap {
  border-color: var(--color-dtl-chip-warn);
  background: var(--color-dtl-chip-warn);
}

.dtl-analysis-item--bad .dtl-num-cap {
  border-color: var(--color-dtl-chip-bad);
  background: var(--color-dtl-chip-bad);
}

.dtl-analysis-action .dtl-num-cap {
  border-color: var(--color-dtl-chip-warn);
  background: var(--color-dtl-chip-warn);
  color: var(--color-white);
}

@media (max-width: 900px) {
  .dtl-analysis-sections {
    grid-template-columns: 1fr;
  }

  .dtl-analysis-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dtl-analysis-item:nth-child(2) {
    border-right: 0;
  }

  .dtl-analysis-item:nth-child(n+3) {
    border-top: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 15%, transparent);
  }
}

@media (max-width: 640px) {
  .dtl-analysis-panel-head,
  .dtl-analysis-section-head,
  .dtl-analysis-action {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.28rem;
  }

  .dtl-analysis-items {
    grid-template-columns: 1fr;
  }

  .dtl-analysis-section .dtl-analysis-items {
    grid-template-columns: 1fr;
  }

  .dtl-analysis-section--operations .dtl-analysis-item:last-child {
    grid-column: auto;
  }

  .dtl-analysis-item,
  .dtl-analysis-item:nth-child(2) {
    border-right: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 15%, transparent);
  }

  .dtl-analysis-item:first-child {
    border-top: 0;
  }
}

/* Thu-Chi reference layout: two white cards with one consistent signal list in
   each card. Kept as a variant so other detail pages retain their renderer. */
.dtl-budget-analysis-heading {
  display: flex;
  align-items: center;
  min-height: 2.2rem;
}

.dtl-analysis-panel--budget-reference {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 0.75rem;
  align-items: stretch;
}

.dtl-budget-section-head,
.dtl-budget-action,
.dtl-budget-result {
  display: inline-flex;
  align-items: center;
}

.dtl-analysis-panel--budget-reference .dtl-budget-analysis-section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-ink) 20%, transparent);
  border-radius: 0.8rem;
  background: var(--color-white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dtl-ink) 12%, transparent);
}

.dtl-budget-section-head {
  min-height: 2.1rem;
  padding: 0 0 0.42rem;
  background: var(--color-white);
  line-height: 1.15;
}

.dtl-budget-section-head--operations {
  color: inherit;
}

.dtl-budget-analysis-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-content: start;
  align-items: stretch;
  grid-auto-rows: max-content;
  flex: 0 0 auto;
  padding: 0;
}

.dtl-analysis-section--operations .dtl-budget-analysis-items {
  grid-template-columns: minmax(0, 1fr);
}

.dtl-analysis-section--operations .dtl-budget-analysis-item:last-child {
  grid-column: auto;
}

.dtl-budget-analysis-item {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.65rem;
  min-width: 0;
  min-height: 0;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-ink) 14%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dtl-budget-analysis-item--good {
  background: transparent;
}

.dtl-budget-analysis-item--warn {
  background: transparent;
}

.dtl-budget-analysis-item--info {
  background: transparent;
}

.dtl-budget-analysis-item:last-child {
  border-bottom: 0;
}

.dtl-budget-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: var(--color-dtl-primary-2);
  background: color-mix(in srgb, var(--color-dtl-info-bg) 72%, var(--color-white));
}

.dtl-budget-analysis-item--good .dtl-budget-item-icon {
  color: var(--color-dtl-chip-good);
  background: color-mix(in srgb, var(--color-dtl-good-bg) 78%, var(--color-white));
}

.dtl-budget-analysis-item--warn .dtl-budget-item-icon {
  color: var(--color-dtl-chip-warn);
  background: color-mix(in srgb, var(--color-dtl-warn-bg) 78%, var(--color-white));
}

.dtl-budget-item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0.22rem;
}

.dtl-budget-item-label {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.2;
}

.dtl-budget-value-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
}

.dtl-budget-value {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.dtl-budget-value--good { color: var(--color-dtl-good); }
.dtl-budget-value--warn { color: var(--color-dtl-warn); }
.dtl-budget-value small,
.dtl-budget-pair small,
.dtl-budget-result small,
.dtl-budget-source-stats small {
  margin-left: 0.2rem;
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-budget-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.22rem 0.55rem;
  border-radius: 0.45rem;
  color: var(--color-white);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.dtl-budget-delta--good { background: var(--color-dtl-chip-good); }
.dtl-budget-delta--warn { background: var(--color-dtl-chip-warn); }
.dtl-budget-delta--bad { background: var(--color-dtl-chip-bad); }
.dtl-budget-delta--info { background: var(--color-dtl-chip-info); }

.dtl-budget-item-detail {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}

.dtl-budget-paired-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.2rem;
}

.dtl-budget-pair {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.dtl-budget-pair span {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-budget-pair strong,
.dtl-budget-source-stats strong {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.dtl-budget-result {
  gap: 0.5rem;
  min-width: 0;
  margin-top: auto;
  padding: 0.42rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-chip-good) 16%, var(--color-white));
  border-radius: 0.65rem;
  color: var(--color-dtl-ink);
  background: color-mix(in srgb, var(--color-dtl-good-bg) 58%, var(--color-white));
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.dtl-budget-result > span:first-child {
  display: inline-flex;
  color: var(--color-dtl-chip-good);
}

.dtl-budget-result strong {
  margin-left: auto;
  color: var(--color-dtl-good);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-budget-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-dtl-good);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-budget-status .tabler-icon {
  flex: none;
}

.dtl-budget-action-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-budget-action-value strong {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-budget-action-value--good strong { color: var(--color-dtl-good); }
.dtl-budget-action-value--warn strong { color: var(--color-dtl-warn); }
.dtl-budget-action-value--bad strong { color: var(--color-dtl-bad); }

.dtl-budget-action-value small {
  margin-left: 0.2rem;
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-budget-source-name {
  color: var(--color-dtl-primary);
  font-size: var(--text-xl);
  line-height: 1.15;
}

.dtl-budget-source-stats {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.12rem;
}

.dtl-budget-source-stats i {
  width: 1px;
  height: 1.7rem;
  background: color-mix(in srgb, var(--color-dtl-primary) 30%, transparent);
}

.dtl-budget-action {
  gap: 0.35rem;
  margin-top: auto;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}

.dtl-budget-action > span:first-child {
  display: inline-flex;
  flex: none;
  color: var(--color-dtl-primary-2);
}

.dtl-analysis-section--operations .dtl-budget-analysis-item--warn .dtl-budget-action > span:first-child {
  color: var(--color-dtl-chip-warn);
}

.dtl-analysis-section--operations .dtl-budget-analysis-item--good .dtl-budget-action > span:first-child {
  color: var(--color-dtl-chip-good);
}

.dtl-analysis-section--operations .dtl-budget-analysis-item {
  min-height: 0;
  align-items: center;
}

.dtl-analysis-section--operations .dtl-budget-item-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.dtl-analysis-section--operations .dtl-budget-value-row {
  margin-top: 0.12rem;
}

@media (max-width: 900px) {
  .dtl-budget-analysis-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dtl-budget-analysis-items {
    grid-template-columns: 1fr;
  }

  .dtl-analysis-section--operations .dtl-budget-analysis-item:last-child {
    grid-column: auto;
  }

  .dtl-budget-paired-values {
    gap: 0.45rem;
  }
}

/* Khối nhận định/gợi ý ĐỐI SẮC (owner chốt phương án I06, 2026-07-12): thẻ nhuộm tint
   theo vai + BĂNG MÀU ĐẶC chữ trắng trùm đầu thẻ (full-bleed bằng margin âm khớp padding
   thẻ 0.6/0.8rem — thêm viền tầng nào phải soát padding tầng đó, luật 9). "Bộ não" của
   trang phải khác đồng phục thẻ trắng để được đọc có chủ ý. */
.dtl-insight {
  overflow: hidden;
  gap: 0.4rem;
}

.dtl-insight--good {
  background: var(--color-dtl-good-bg);
  border-color: var(--color-dtl-chip-good);
}

.dtl-insight--warn {
  background: var(--color-dtl-warn-bg);
  border-color: var(--color-dtl-chip-warn);
}

.dtl-insight-band {
  margin: -0.6rem -0.8rem 0.15rem;
  padding: 0.4rem 0.8rem;
  color: var(--color-white);
  font-size: var(--text-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dtl-insight-band--good { background: var(--color-dtl-chip-good); }
.dtl-insight-band--warn { background: var(--color-dtl-chip-warn); }

/* VIÊN NANG SỐ trong lời văn (owner chốt 2026-07-12 sau 3 vòng màu): nang TRẮNG ĐẶC
   kiểu T1 — đầy đặn, bo góc, bóng nhẹ — nổi trên nền tint của khối; chữ ăn TÔNG KHỐI
   (xanh trên thẻ Nhận định, cam trên thẻ Gợi ý — nang lam bị bác vì chỏi nền). */
.dtl-num-cap {
  display: inline-block;
  padding: 0 0.42rem;
  border-radius: 0.42rem;
  background: var(--color-white);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dtl-ink) 22%, transparent);
}

.dtl-insight--good .dtl-num-cap { color: var(--color-dtl-good); }
.dtl-insight--warn .dtl-num-cap { color: var(--color-dtl-warn); }

/* Chuyển động MỘT LƯỢT lúc mở trang rồi đứng yên (owner đòi "gắn animation"; luật máy mát
   cấm animation LIÊN TỤC — one-shot có điểm dừng là hợp lệ): dòng trượt vào lần lượt,
   chip P1 nảy 3 nhịp chốt sự chú ý. Máy yếu/người dùng tắt hiệu ứng → bỏ qua. */
@keyframes dtl-ins-slide {
  from { opacity: 0; transform: translateX(-1.1rem); }
  to { opacity: 1; transform: none; }
}

@keyframes dtl-chip-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}

.dtl-insight li { animation: dtl-ins-slide 0.45s ease-out backwards; }
.dtl-insight li:nth-child(1) { animation-delay: 0.05s; }
.dtl-insight li:nth-child(2) { animation-delay: 0.19s; }
.dtl-insight li:nth-child(3) { animation-delay: 0.33s; }
.dtl-insight li:nth-child(4) { animation-delay: 0.47s; }
.dtl-insight li:nth-child(5) { animation-delay: 0.61s; }
.dtl-insight li:nth-child(6) { animation-delay: 0.75s; }
.dtl-insight li:nth-child(n+7) { animation-delay: 0.89s; }

/* A paused one-shot animation must not leave text at its invisible first frame. */
html.is-idle .dtl-insight li {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.dtl-chip--pop { animation: dtl-chip-pop 0.45s ease-in-out 1.3s 3; }

@media (prefers-reduced-motion: reduce) {
  .dtl-insight li,
  .dtl-chip--pop { animation: none; }
}

.dtl ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dtl li {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-dtl-ink);
}

.dtl-chart {
  width: 100%;
  height: var(--dtl-chart-height, 8.5rem);
  min-height: 0;
}

.dtl-chart-empty {
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--color-dtl-chart-prev);
  border-radius: 0.75rem;
  background: var(--color-dtl-info-bg);
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
  text-align: center;
}

.dtl-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.dtl-chart-title-pill {
  max-width: calc(100% - 5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtl-chart-heading .dtl-label {
  min-width: 0;
}

.dtl-chart-unit {
  flex: none;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  white-space: nowrap;
}

.dtl-chart-scope {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.35;
}

.dtl-status-summary {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 11rem;
  justify-content: center;
}

.dtl-status-lead {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.dtl-status-rate {
  color: var(--color-dtl-chip-good);
  font-size: var(--text-kpi);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dtl-status-rate-label {
  color: var(--color-dtl-ink);
  font-size: var(--text-lg);
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-status-track {
  display: flex;
  width: 100%;
  height: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-dtl-info-bg);
}

.dtl-status-track-segment {
  display: block;
  height: 100%;
  min-width: 0;
}

.dtl-status-track-segment--good { background: var(--color-dtl-chip-good); }
.dtl-status-track-segment--warn { background: var(--color-dtl-chip-warn); }
.dtl-status-track-segment--bad { background: var(--color-dtl-chip-bad); }

.dtl-status-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.dtl-status-stat {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.45rem 0.6rem;
  border-left: 0.25rem solid var(--color-dtl-chip-good);
  background: var(--color-dtl-good-bg);
}

.dtl-status-stat:nth-child(2) {
  border-left-color: var(--color-dtl-chip-warn);
  background: var(--color-dtl-warn-bg);
}

.dtl-status-stat strong {
  color: var(--color-dtl-ink);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-status-stat span {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-chart--short {
  height: 7.5rem;
}

/* Danh sách chi tiết: giữ đủ các khoản thu nhưng đọc như một biểu đồ tải, không như bảng nguồn. */
.dtl-card--ranked-bars {
  gap: 0.55rem;
  padding: 0.8rem 1rem 0.95rem;
}

.dtl-card--detail-list .dtl-chart-heading .dtl-chart-title-pill {
  flex: none;
}

.dtl-ranked-head,
.dtl-ranked-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(13rem, 1.3fr) minmax(12rem, 1fr) 6.4rem 5.4rem 6.2rem;
  align-items: center;
  column-gap: 0.7rem;
}

.dtl-ranked-head {
  padding: 0 0.2rem 0.35rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-dtl-primary-2) 22%, transparent);
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-ranked-head > :nth-last-child(-n + 3) {
  text-align: right;
}

.dtl-ranked-row {
  min-height: 2.65rem;
  padding: 0.38rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-ink) 12%, transparent);
}

.dtl-ranked-row:last-child {
  border-bottom: 0;
}

.dtl-ranked-row--total {
  margin-top: 0.2rem;
  border-top: 2px solid var(--color-dtl-primary-2);
  background: var(--color-dtl-info-bg);
}

.dtl-ranked-row--total .dtl-ranked-label,
.dtl-ranked-row--total .dtl-ranked-value,
.dtl-ranked-row--total .dtl-ranked-share {
  font-weight: 900;
}

.dtl-ranked-rank {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-md);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-ranked-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.2;
}

.dtl-ranked-track {
  display: block;
  height: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-dtl-info-bg);
}

.dtl-ranked-track span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-dtl-chart-gold), var(--color-dtl-chart-coral));
}

.dtl-ranked-value,
.dtl-ranked-share,
.dtl-ranked-change {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dtl-ranked-value {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-ranked-value small {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-ranked-share {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-ranked-change {
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-ranked-change--up { color: var(--color-dtl-chip-good); }
.dtl-ranked-change--down { color: var(--color-dtl-chip-bad); }
.dtl-ranked-change--flat { color: var(--color-dtl-ink); }

/* Bảng tải hồ sơ: nhịp đọc theo khối phân tích, không mô phỏng bảng nhập liệu. */
.dtl-card--analysis-table {
  gap: 0.7rem;
  padding: 1.05rem 1.35rem 1.15rem;
  border: 2px solid color-mix(in srgb, var(--color-dtl-primary-2) 22%, var(--color-white));
  border-radius: 1.25rem;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-dtl-primary) 10%, transparent);
}

.dtl-card--analysis-table .dtl-chart-heading {
  align-items: center;
}

.dtl-card--analysis-table .dtl-chart-heading .dtl-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.55rem;
  padding: 0.38rem 1.05rem;
  border-radius: 1rem;
  background: linear-gradient(115deg, var(--color-dtl-primary), var(--color-dtl-primary-2));
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--color-dtl-primary-2) 20%, transparent);
}

.dtl-card--analysis-table .dtl-chart-unit {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
}

.dtl-analysis-subtitle {
  color: color-mix(in srgb, var(--color-dtl-primary) 68%, var(--color-dtl-ink));
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
}

.dtl-analysis-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;
  background: transparent;
}

.dtl-analysis-row {
  display: grid;
  grid-template-columns: var(--dtl-analysis-columns);
  min-width: 0;
  min-height: 4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 17%, transparent);
  align-items: center;
}

.dtl-analysis-row:last-child {
  border-bottom: 0;
}

.dtl-analysis-row--head {
  min-height: 2.75rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-dtl-primary-2) 16%, transparent);
}

.dtl-analysis-row--total {
  min-height: 4.2rem;
  border-top: 2px solid var(--color-dtl-primary-2);
  border-bottom: 0;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 65%, var(--color-white));
}

.dtl-analysis-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 100%;
  padding: 0.45rem 0.55rem;
}

.dtl-analysis-cell--value {
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dtl-analysis-cell--label {
  justify-content: flex-start;
  text-align: left;
}

.dtl-analysis-row--head .dtl-analysis-cell {
  color: color-mix(in srgb, var(--color-dtl-primary) 72%, var(--color-dtl-ink));
  font-size: var(--text-md);
  font-weight: 900;
  text-transform: uppercase;
}

.dtl-analysis-row--head .dtl-analysis-cell--value {
  justify-content: center;
  text-align: center;
}

.dtl-analysis-row:not(.dtl-analysis-row--head):not(.dtl-analysis-row--total) .dtl-analysis-cell--period_0,
.dtl-analysis-row:not(.dtl-analysis-row--head):not(.dtl-analysis-row--total) .dtl-analysis-cell--period_1 {
  margin: 0.38rem 0.14rem;
  min-height: 3.25rem;
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 78%, var(--color-white));
}

.dtl-analysis-row:not(.dtl-analysis-row--head):not(.dtl-analysis-row--total) .dtl-analysis-cell--period_1 {
  background: color-mix(in srgb, var(--color-dtl-info-bg) 58%, var(--color-white));
}

.dtl-analysis-row--total .dtl-analysis-cell--period_0,
.dtl-analysis-row--total .dtl-analysis-cell--period_1 {
  background: transparent;
}

.dtl-analysis-value {
  max-width: 100%;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.25;
}

.dtl-analysis-cell--label .dtl-analysis-value {
  font-weight: 800;
}

.dtl-analysis-row--total .dtl-analysis-value {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-lg);
  font-weight: 900;
}

.dtl-analysis-row--head .dtl-analysis-value {
  color: inherit;
  font-weight: 900;
}

.dtl-analysis-value--current,
.dtl-analysis-value--share,
.dtl-analysis-value--total {
  color: var(--color-dtl-primary-2);
}

.dtl-analysis-value--period {
  color: var(--color-dtl-info);
}

.dtl-analysis-cell--delta .dtl-analysis-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.7rem;
  padding: 0.42rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 70%, var(--color-white));
}

.dtl-analysis-value--up {
  color: var(--color-dtl-chip-bad);
}

.dtl-analysis-cell--delta .dtl-analysis-value--up {
  background: var(--color-dtl-bad-bg);
}

.dtl-analysis-value--down {
  color: var(--color-dtl-chip-good);
}

.dtl-analysis-cell--delta .dtl-analysis-value--down {
  background: var(--color-dtl-good-bg);
}

.dtl-analysis-value--flat {
  color: var(--color-dtl-info);
}

.dtl-analysis-cell--delta .dtl-analysis-value--flat {
  background: var(--color-dtl-info-bg);
}

.dtl-analysis-cell--share .dtl-analysis-value {
  color: var(--color-dtl-primary-2);
}

.dtl-analysis-cell--trend .dtl-analysis-value {
  min-width: 5.25rem;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  background: var(--color-dtl-info-bg);
  color: var(--color-dtl-info);
  text-align: center;
}

.dtl-analysis-cell--trend .dtl-analysis-value--up {
  background: var(--color-dtl-bad-bg);
  color: var(--color-dtl-chip-bad);
}

.dtl-analysis-cell--trend .dtl-analysis-value--down {
  background: var(--color-dtl-good-bg);
  color: var(--color-dtl-chip-good);
}

.dtl-analysis-cell--trend .dtl-analysis-value--flat {
  background: var(--color-dtl-info-bg);
  color: var(--color-dtl-info);
}

/* Thu chi: biến động tăng là xanh, giảm là đỏ theo quy ước chung của ngân sách. */
.dtl-card--analysis-table-budget .dtl-analysis-cell--delta .dtl-analysis-value--up,
.dtl-card--analysis-table-budget .dtl-analysis-cell--trend .dtl-analysis-value--up {
  background: var(--color-dtl-good-bg);
  color: var(--color-dtl-chip-good);
}

.dtl-card--analysis-table-budget .dtl-analysis-cell--delta .dtl-analysis-value--down,
.dtl-card--analysis-table-budget .dtl-analysis-cell--trend .dtl-analysis-value--down {
  background: var(--color-dtl-bad-bg);
  color: var(--color-dtl-chip-bad);
}

.dtl-analysis-value--muted {
  color: var(--color-dtl-ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .dtl-ranked-head,
  .dtl-ranked-row {
    grid-template-columns: 2.25rem minmax(10rem, 1.2fr) minmax(8rem, 0.9fr) 5.5rem 4.8rem 5.4rem;
    column-gap: 0.45rem;
  }

  .dtl-card--analysis-table {
    padding-inline: 0.75rem;
  }

  .dtl-analysis-row {
    grid-template-columns: minmax(10rem, 1.15fr) repeat(2, minmax(5.7rem, 0.8fr)) minmax(5.8rem, 0.75fr) minmax(5.5rem, 0.72fr) minmax(5.8rem, 0.78fr);
  }

  .dtl-analysis-cell {
    padding-inline: 0.3rem;
  }
}

@media (max-width: 640px) {
  .dtl-ranked-head,
  .dtl-ranked-row {
    grid-template-columns: 2rem minmax(8rem, 1.2fr) minmax(5rem, 0.8fr) 4.6rem 4.2rem 4.8rem;
    column-gap: 0.3rem;
  }

  .dtl-ranked-head,
  .dtl-ranked-label,
  .dtl-ranked-value,
  .dtl-ranked-share,
  .dtl-ranked-change {
    font-size: var(--text-md);
  }

  .dtl-card--analysis-table {
    padding: 0.9rem 0.55rem;
  }

  .dtl-card--analysis-table .dtl-chart-heading .dtl-label {
    font-size: var(--text-md);
  }

  .dtl-analysis-table {
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .dtl-analysis-row {
    min-width: 42rem;
  }
}

/* Thu - chi option mới: mỗi phạm vi dữ liệu là một panel riêng, chart bên trong dùng chung
   nhịp card của các chuyên trang nhưng không còn bị gom vào một lưới phẳng. */
.dtl--budget-v2 {
  gap: 1rem;
  padding: 1rem 1.1rem 1.35rem;
}

.dtl-budget-scopes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dtl-budget-scope {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, var(--color-white));
  border-radius: 1.15rem;
  background: var(--color-white);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-dtl-primary) 10%, transparent);
}

.dtl-budget-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.65rem;
  padding: 0.65rem 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, transparent);
  background: linear-gradient(90deg, var(--color-dtl-info-bg), var(--color-white) 74%);
}

.dtl-budget-scope--teal .dtl-budget-scope-head {
  background: linear-gradient(90deg, var(--color-dtl-good-bg), var(--color-white) 74%);
}

.dtl-budget-scope--green .dtl-budget-scope-head {
  background: linear-gradient(90deg, var(--color-dtl-good-bg), var(--color-white) 74%);
}

.dtl-budget-scope-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-dtl-ink);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.dtl-budget-scope-title i {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--color-dtl-primary-2);
}

.dtl-budget-scope--teal .dtl-budget-scope-title i { background: var(--color-dtl-chip-info); }
.dtl-budget-scope--green .dtl-budget-scope-title i { background: var(--color-dtl-chip-good); }

.dtl-budget-scope-note {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 800;
  white-space: nowrap;
}

.dtl-budget-scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.8fr);
  gap: 0.85rem;
  align-items: stretch;
  padding: 0.8rem;
}

.dtl-budget-scope-grid--full {
  grid-template-columns: minmax(0, 1fr);
}

.dtl-budget-scope .dtl-card {
  align-self: stretch;
  height: 100%;
  min-width: 0;
  border-color: color-mix(in srgb, var(--color-dtl-primary-2) 18%, var(--color-white));
  background: color-mix(in srgb, var(--color-dtl-info-bg) 35%, var(--color-white));
  box-shadow: none;
}

/* Khi card được kéo cao theo hàng, vùng vẽ phải nhận phần chiều cao còn lại.
   Không để ECharts giữ cứng hRem rồi tạo khoảng trắng chết bên dưới. */
.dtl-budget-scope .dtl-card--echart {
  min-height: 0;
}

.dtl-budget-scope .dtl-card--echart .dtl-chart {
  flex: 1 1 auto;
  height: auto;
  min-height: var(--dtl-chart-height, 9.5rem);
}

.dtl-budget-scope .dtl-chart-heading {
  margin-bottom: 0.35rem;
}

.dtl-budget-scope .dtl-chart-heading .dtl-label {
  color: var(--color-dtl-ink);
  font-size: var(--text-lg);
  text-transform: none;
  letter-spacing: 0;
}

.dtl-budget-scope .dtl-chart-unit {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
}

.dtl-card--ranked-compact {
  gap: 0.38rem;
  padding: 0.8rem 0.9rem 0.85rem;
}

.dtl-ranked-head--compact,
.dtl-ranked-row--compact {
  grid-template-columns: 1.8rem minmax(9rem, 1.35fr) minmax(7rem, 1fr) 5.3rem 4.6rem;
  column-gap: 0.5rem;
}

.dtl-ranked-head--compact {
  padding-bottom: 0.28rem;
  font-size: var(--text-md);
}

.dtl-ranked-row--compact {
  min-height: 1.75rem;
  padding-block: 0.22rem;
}

.dtl-ranked-row--compact .dtl-ranked-rank,
.dtl-ranked-row--compact .dtl-ranked-label,
.dtl-ranked-row--compact .dtl-ranked-value,
.dtl-ranked-row--compact .dtl-ranked-share {
  font-size: var(--text-md);
}

.dtl-ranked-row--compact .dtl-ranked-track {
  height: 0.48rem;
}

.dtl-ranked-row--compact .dtl-ranked-value small {
  font-size: var(--text-md);
}

.dtl-card--composition {
  gap: 0.65rem;
  padding: 0.9rem 1rem 1rem;
}

.dtl-composition-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, transparent);
}

.dtl-composition-total strong {
  color: var(--color-dtl-ink);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-composition-total small {
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-composition-total span {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-composition-strip {
  display: flex;
  width: 100%;
  height: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-dtl-info-bg);
}

.dtl-composition-segment {
  display: block;
  height: 100%;
  min-width: 0;
}

.dtl-composition-segment--orange { background: var(--color-dtl-chip-warn); }
.dtl-composition-segment--gold { background: var(--color-dtl-chart-gold); }
.dtl-composition-segment--violet { background: var(--color-dtl-chart-coral); }
.dtl-composition-segment--good { background: var(--color-dtl-chip-good); }
.dtl-composition-segment--info { background: var(--color-dtl-chart-gold); }
.dtl-composition-segment--warn { background: var(--color-dtl-chip-warn); }
.dtl-composition-segment--bad { background: var(--color-dtl-chip-bad); }

.dtl-composition-list {
  display: grid;
  gap: 0.55rem;
}

.dtl-composition-item {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.dtl-composition-item > span {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 800;
}

.dtl-composition-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.dtl-composition-dot--orange { background: var(--color-dtl-chip-warn); }
.dtl-composition-dot--gold { background: var(--color-dtl-chart-gold); }
.dtl-composition-dot--violet { background: var(--color-dtl-chart-coral); }
.dtl-composition-dot--good { background: var(--color-dtl-chip-good); }
.dtl-composition-dot--info { background: var(--color-dtl-chart-gold); }
.dtl-composition-dot--warn { background: var(--color-dtl-chip-warn); }
.dtl-composition-dot--bad { background: var(--color-dtl-chip-bad); }

.dtl-composition-item strong {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dtl-composition-item small {
  display: block;
  margin-top: 0.05rem;
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 800;
}

/* Chỉ tiêu Nghị quyết: status-first summary, then the field load and source rows. */
.dtl-card--resolution-status {
  gap: 0.8rem;
  padding: 0.95rem 1.1rem 1rem;
}

.dtl-resolution-status-total {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 18%, transparent);
}

.dtl-resolution-status-total strong {
  color: var(--color-dtl-primary);
  font-size: var(--text-kpi);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-resolution-status-total span {
  color: var(--color-dtl-ink);
  font-size: var(--text-lg);
  font-weight: 900;
}

.dtl-resolution-status-list {
  display: grid;
  gap: 0.68rem;
}

.dtl-resolution-status-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1.1fr) minmax(12rem, 2fr) 7rem;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.dtl-resolution-status-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-resolution-status-label span {
  overflow-wrap: anywhere;
}

.dtl-resolution-status-dot {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  border-radius: 50%;
}

.dtl-resolution-status-dot--completed,
.dtl-resolution-status-dot--maintained,
.dtl-resolution-status-fill--completed,
.dtl-resolution-status-fill--maintained {
  background: var(--color-dtl-chip-good);
}

.dtl-resolution-status-dot--above50,
.dtl-resolution-status-fill--above50 {
  background: var(--color-dtl-chip-info);
}

.dtl-resolution-status-dot--inProgress,
.dtl-resolution-status-fill--inProgress {
  background: var(--color-dtl-chip-warn);
}

.dtl-resolution-status-track {
  height: 0.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-dtl-info-bg);
}

.dtl-resolution-status-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
}

.dtl-resolution-status-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  color: var(--color-dtl-ink);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dtl-resolution-status-value small {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
}

.dtl-card--resolution-list {
  gap: 0.85rem;
  padding: 0.95rem 1.1rem 1.1rem;
}

.dtl-resolution-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.dtl-resolution-group {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 20%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 30%, var(--color-white));
}

.dtl-resolution-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.48rem;
  border-bottom: 2px solid color-mix(in srgb, var(--color-dtl-primary-2) 24%, transparent);
}

.dtl-resolution-group-head strong {
  color: var(--color-dtl-primary);
  font-size: var(--text-lg);
  font-weight: 900;
}

.dtl-resolution-group-head span {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  white-space: nowrap;
}

.dtl-resolution-items {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.45rem;
}

.dtl-resolution-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(9rem, 0.6fr);
  align-items: start;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 13%, transparent);
}

.dtl-resolution-item:last-child {
  border-bottom: 0;
}

.dtl-resolution-item-number {
  color: var(--color-dtl-primary-2);
  font-size: var(--text-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dtl-resolution-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dtl-resolution-item-main strong {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.3;
}

.dtl-resolution-item-result {
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
}

.dtl-resolution-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
  text-align: right;
}

.dtl-resolution-item-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  color: var(--color-white);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.15;
}

.dtl-resolution-item--good .dtl-resolution-item-status { background: var(--color-dtl-chip-good); }
.dtl-resolution-item--info .dtl-resolution-item-status { background: var(--color-dtl-chip-info); }
.dtl-resolution-item--warn .dtl-resolution-item-status { background: var(--color-dtl-chip-warn); }

.dtl-resolution-item-target {
  color: var(--color-dtl-primary);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.25;
}

@media (max-width: 62rem) {
  .dtl-resolution-status-row {
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1.5fr) 6rem;
  }

  .dtl-resolution-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .dtl-resolution-status-row {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: 0.35rem;
  }

  .dtl-resolution-status-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dtl-resolution-status-value {
    grid-column: 2;
    grid-row: 1;
  }

  .dtl-resolution-item {
    grid-template-columns: 1.7rem minmax(0, 1fr);
  }

  .dtl-resolution-item-meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 62rem) {
  .dtl-budget-scope-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtl-budget-scope-note {
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 40rem) {
  .dtl--budget-v2 {
    padding-inline: 0.7rem;
  }

  .dtl-budget-scope-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .dtl-budget-scope-note {
    text-align: left;
  }

  .dtl-ranked-head--compact,
  .dtl-ranked-row--compact {
    grid-template-columns: 1.55rem minmax(8rem, 1.25fr) minmax(6rem, 1fr) 4.7rem 4rem;
    column-gap: 0.35rem;
  }
}

/* Shared detail baseline: Thu - Chi is the reference rhythm for every domain tab.
   Grid rows stretch the outer cards; flex children then consume that height so the
   chart/list/analysis content does not collapse at the top of a tall card. */
.dtl-card {
  box-sizing: border-box;
  min-width: 0;
}

/* KPI dùng cùng một nhịp đọc ở mọi tab: nhãn -> số/đơn vị -> trạng thái/đối chiếu. */
.dtl-kpis > .dtl-card {
  min-height: 7.8rem;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.85rem;
  text-align: center;
}

.dtl-kpis .dtl-kpi-row,
.dtl-kpis .dtl-kpi-value-row {
  width: 100%;
  justify-content: center;
}

.dtl-kpis .dtl-label {
  padding-right: 0;
  font-size: var(--text-xl);
  text-align: center;
}

.dtl-kpis .dtl-kpi-number-group {
  justify-content: center;
}

.dtl-kpis .dtl-kpi-delta {
  justify-content: center;
}

.dtl-grid2,
.dtl-grid4,
.dtl-analysis-common-grid {
  align-items: stretch;
}

.dtl-grid2 > .dtl-card,
.dtl-grid4 > .dtl-card,
.dtl-analysis-common-grid > .dtl-card {
  height: 100%;
}

.dtl-grid4 {
  grid-auto-rows: minmax(0, auto);
}

.dtl-card--echart {
  min-height: 0;
}

.dtl-card--echart .dtl-chart {
  flex: 1 1 auto;
  height: auto;
  min-height: var(--dtl-chart-height, 8.5rem);
}

/* Sparse snapshots are decision strips, not empty report canvases. */
.dtl-card--chart-compact {
  gap: 0.45rem;
  padding: 0.7rem 0.8rem 0.75rem;
}

.dtl-grid4 > .dtl-card--chart-compact {
  align-self: start;
  height: auto;
}

.dtl-grid4 > .dtl-card--chart-compact .dtl-chart {
  flex: 0 0 auto;
}

.dtl-card--chart-compact .dtl-chart-heading {
  margin-bottom: 0;
}

.dtl-card--chart-compact .dtl-composition-list {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.7rem;
}

/* Keep the five-row zero-progress chart readable without exceeding the compact
   card height contract on large leadership displays. */
@media (min-width: 120rem) {
  .dtl-card--chart-responsive .dtl-chart {
    height: 9.5rem !important;
    min-height: 9.5rem !important;
  }
}

.dtl-card--status .dtl-status-summary,
.dtl-card--composition .dtl-composition-list,
.dtl-card--ranked-bars .dtl-ranked-list,
.dtl-card--analysis-table .dtl-analysis-table {
  flex: 1 1 auto;
}

/* A single composition/list card must keep its natural content height; stretching
   sparse rows to fill a wide grid cell creates report-like dead space. */
.dtl-grid4 > .dtl-card--composition {
  align-self: start;
  height: auto;
}

.dtl-card--composition .dtl-composition-list {
  flex: 0 0 auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.dtl-card--status .dtl-status-summary {
  justify-content: space-between;
}

.dtl-card--composition .dtl-composition-list,
.dtl-card--ranked-bars .dtl-ranked-list {
  align-content: stretch;
  grid-auto-rows: minmax(1.75rem, 1fr);
}

.dtl-shared-analysis {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.dtl-analysis-common-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.dtl-analysis-card {
  align-self: stretch;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem 0.8rem;
  border-color: color-mix(in srgb, var(--color-dtl-primary-2) 20%, var(--color-white));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dtl-ink) 12%, transparent);
}

.dtl-analysis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.dtl-analysis-card-head .dtl-pill {
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}

.dtl-analysis-card .dtl-analysis-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  border: 0;
}

.dtl-analysis-card .dtl-analysis-item {
  height: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-dtl-primary-2) 16%, var(--color-white));
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-dtl-info-bg) 45%, var(--color-white));
}

.dtl-analysis-card .dtl-analysis-item--good {
  border-color: color-mix(in srgb, var(--color-dtl-chip-good) 30%, var(--color-white));
  background: color-mix(in srgb, var(--color-dtl-good-bg) 58%, var(--color-white));
}

/* Semantic color is reserved for the signal itself; the analysis card remains light. */
.dtl-analysis-card .dtl-analysis-item--warn {
  color: var(--color-dtl-ink);
  border-color: color-mix(in srgb, var(--color-dtl-chip-warn) 34%, var(--color-white));
  background: color-mix(in srgb, var(--color-dtl-info-bg) 45%, var(--color-white));
}

.dtl-analysis-card .dtl-analysis-item--bad {
  color: var(--color-dtl-ink);
  border-color: color-mix(in srgb, var(--color-dtl-chip-bad) 34%, var(--color-white));
  background: color-mix(in srgb, var(--color-dtl-info-bg) 45%, var(--color-white));
}

.dtl-analysis-card .dtl-analysis-item--warn .dtl-analysis-mark,
.dtl-analysis-card .dtl-analysis-item--bad .dtl-analysis-mark {
  box-shadow: 0 0 0 4px var(--color-dtl-info-bg);
}

.dtl-analysis-card .dtl-analysis-item--warn .dtl-analysis-label,
.dtl-analysis-card .dtl-analysis-item--warn .dtl-analysis-item-body strong,
.dtl-analysis-card .dtl-analysis-item--warn .dtl-analysis-detail,
.dtl-analysis-card .dtl-analysis-item--bad .dtl-analysis-label,
.dtl-analysis-card .dtl-analysis-item--bad .dtl-analysis-item-body strong,
.dtl-analysis-card .dtl-analysis-item--bad .dtl-analysis-detail {
  color: inherit;
}

.dtl-analysis-card .dtl-analysis-item--warn .dtl-num-cap {
  color: var(--color-white);
  background: var(--color-dtl-chip-warn);
  border-color: var(--color-dtl-chip-warn);
}

.dtl-analysis-card .dtl-analysis-item--bad .dtl-num-cap {
  color: var(--color-white);
  background: var(--color-dtl-chip-bad);
  border-color: var(--color-dtl-chip-bad);
}

/* Keep only metric capsules saturated; the surrounding card stays neutral. */
.dtl-analysis-card .dtl-analysis-item--warn .dtl-num-cap,
.dtl-analysis-card .dtl-analysis-item--bad .dtl-num-cap {
  box-shadow: none;
}

.dtl-analysis-card--operations .dtl-analysis-item:last-child {
  grid-column: 1 / -1;
}

.dtl-analysis-card .dtl-analysis-action {
  margin-top: auto;
  padding: 0.2rem 0.1rem 0;
}

.dtl-analysis-empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 3rem;
  color: var(--color-dtl-ink);
  font-size: var(--text-md);
  font-weight: 700;
}

.dtl-analysis-card > ul {
  flex: 1 1 auto;
  align-content: stretch;
}

.dtl-analysis-card > ul > li {
  min-height: 2.1rem;
}

/* Every chart title follows the same pill treatment. Long source titles may wrap;
   they are never clipped or replaced by an ellipsis. */
.dtl-chart-title-pill {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
}

.dtl-chart-heading--with-unit .dtl-chart-title-pill {
  flex: 1 1 auto;
  max-width: calc(100% - 5rem);
}

.dtl-chart-heading--with-unit .dtl-chart-unit {
  padding-top: 0.34rem;
}

.dtl-card--empty-chart {
  align-self: start;
  height: auto !important;
  min-height: 0;
}

.dtl-card--status-strip {
  display: grid;
  grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
}

.dtl-card--status-strip .dtl-chart-empty {
  min-height: 2.8rem;
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.dtl-card--empty-chart .dtl-chart-empty {
  min-height: 4.2rem;
  padding: 0.7rem;
}

.dtl-card--empty-chart.dtl-card--status-strip .dtl-chart-empty {
  min-height: 2.35rem;
  padding: 0.4rem 0.65rem;
}

@media (max-width: 62rem) {
  .dtl-source-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .dtl-analysis-common-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtl-grid4--antt-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dtl-grid4--antt-balanced > [data-dtl-grid-span] {
    grid-column: auto;
  }

  .dtl-card--status-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .dtl-grid4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .dtl-grid4--antt-balanced {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dtl-analysis-card .dtl-analysis-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtl-card--chart-compact .dtl-composition-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtl-analysis-card--operations .dtl-analysis-item:last-child {
    grid-column: auto;
  }
}