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

/* Khối "chờ dữ liệu" (Chỉ tiêu nghị quyết): trạng thái trống theo chủ đích, cùng ngôn
   ngữ với màn hình chờ chuyên trang — khung gạch đứt cyan, không số giả.
   Thân card bỏ đệm để hộp chờ TRÀN SÁT vỏ khung (tránh "hộp trong hộp" thấy rõ khi trống). */
.trend-card--pending .trend-card__body {
  grid-template-rows: 1fr;
  padding: var(--space-1);
}

.trend-card__pending {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--space-3);
  border: 1px dashed var(--alpha-cyan-19187255-26);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--alpha-deep-010828-98), var(--alpha-deep-011435-97));
}

.trend-card__pending-title {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-card__pending-note {
  max-width: 24rem;
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
}

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

.trend-card__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  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 {
  display: inline-block;
  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);
  /* Lề ngoài ĐỒNG BỘ với chuẩn VHXH/MTTQ (owner 2026-07-06: "lấy văn hoá xã hội làm
     chuẩn") — 0.5rem, không dùng --space-3 (0.75rem) riêng của khối này nữa. */
  padding: var(--space-1) 0.5rem var(--space-1);
}

.trend-card--investment .trend-card__metric {
  grid-template-columns: 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);
}