/* web/css/kpi_gon.css
   KPI gọn cho mobile/tablet — tệp riêng, không sửa app.css.
   Chỉ chỉnh bố cục; giữ nguyên thang chữ 12/14/18/24/28. */

/* Lưới KPI: 2 cột ≤640px; 641–1023px dùng 3 cột */
@media (max-width: 1023px) {
  .tq .hang-kpi,
  .kpi-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k2); /* 8px */
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .tq .hang-kpi,
  .kpi-luoi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Thẻ KPI ≤640px: bỏ chiều cao cố định, thu gọn khoảng trống */
@media (max-width: 640px) {
  .tq .hang-kpi > .kpi,
  .tq .kpi-luoi > .kpi,
  .tq6-kpi .kpi,
  .kpi-luoi > .kpi {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: var(--k3); /* 12px */
    gap: var(--k2);     /* 8px */
    overflow: visible;
  }

  /* Nhãn 14px, đúng 1 dòng ellipsis */
  .kpi .kpi-nhan,
  .kpi-co-den .kpi-nhan,
  .tq .kpi-nhan,
  .tq6-kpi .kpi-nhan {
    display: block;
    min-width: 0;
    padding-right: var(--k16); /* chừa chỗ cho chấm trạng thái */
    font-size: var(--cc-than); /* 14px */
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ẩn chú thích phụ để nhãn không bị xuống dòng */
  .kpi-nhan .chu-thich {
    display: none;
  }

  /* Số KPI 24px, trừ KPI dạng chữ */
  .tq .kpi-so:not(.kpi-chu),
  .tq6-kpi .kpi-so:not(.kpi-chu),
  .kpi-luoi .kpi-so:not(.kpi-chu),
  .tq6-kpi .kpi-lon .kpi-so:not(.kpi-chu),
  .tq6-kpi .kpi-nho .kpi-so:not(.kpi-chu) {
    font-size: var(--cc-kpi); /* 24px */
    line-height: 1.15;
  }

  /* Hàng số + chip không rớt dòng */
  .tq .kpi > .kpi-giua,
  .tq6-kpi .kpi > .kpi-giua,
  .kpi-luoi .kpi > .kpi-giua {
    flex-wrap: nowrap;
    min-width: 0;
    gap: var(--k2); /* 8px */
  }

  /* Chip so sánh 12px, nowrap */
  .kpi .kpi-ss,
  .tq .kpi-ss,
  .tq6-kpi .kpi-ss,
  .kpi-luoi .kpi-ss {
    display: inline-flex;
    flex: none;
    white-space: nowrap;
    font-size: var(--cc-than); /* 14px: chip so sánh là chữ thường, không phải chú thích */
    line-height: 20px;
    padding: 0 var(--k1); /* 4px */
  }

  /* Sparkline cao 32px; ẩn khung rỗng để không tạo khoảng trống */
  .kpi .kpi-hinh,
  .tq .kpi-hinh,
  .tq6-kpi .kpi-hinh,
  .tq6-kpi .kpi-nho .kpi-hinh,
  .kpi-luoi .kpi-hinh {
    height: 32px;
    min-height: 32px;
    margin-top: auto;
  }

  .kpi-hinh svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .kpi-hinh:empty {
    display: none;
  }

  /* Mobile không phóng to thẻ để tránh lệch lưới */
  .kpi:hover {
    transform: none;
  }
}

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .kpi,
  .kpi:hover {
    transition: none;
    transform: none;
  }
}