/* Vibary UI — den.css (6 màn con 6x6 — 25/10): đèn, "Cần khắc phục", lưới dàn đều 100vh, 5 khổ 375/768/1024/1440/1920, mượt, skeleton.
   Tệp mới, không đụng app.css. Lớp: .den, .kpi-co-den, .khoi-dkp/.dkp-*, .tq.tq-dkp (lưới), .tq-vao, .skel-tq.
   Màu lấy token tokens.css (--do/--vang/--la/--chu-mo) có dự phòng hex. Chữ kế thừa 14px; chỉ .chu-thich < 14. */

/* ===== 1. Đèn tròn 10px + glow 3px ===== */
.den { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: var(--chu-mo, #9AA7B8); box-shadow: 0 0 0 3px rgba(154, 167, 184, 0.25); }
.den-xanh { background: var(--la, #079455); box-shadow: 0 0 0 3px rgba(7, 148, 85, 0.18); }
.den-vang { background: var(--vang, #DC6803); box-shadow: 0 0 0 3px rgba(220, 104, 3, 0.2); }
.den-do { background: var(--do, #D92D20); box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18); }
.den-xam { background: var(--chu-mo, #9AA7B8); box-shadow: 0 0 0 3px rgba(154, 167, 184, 0.25); }

/* ===== 2. Ô KPI có đèn: nhãn 1 dòng (ellipsis + title), chú thích đã rút ≤ 8 từ hiện dưới nhãn ===== */
.kpi-co-den .kpi-nhan { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k4, 4px) var(--k8, 8px); min-width: 0; white-space: normal; }
.kpi-co-den .kpi-nhan-chu { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.kpi-co-den .kpi-nhan .chu-thich { flex: 1 0 100%; white-space: normal; overflow-wrap: anywhere; }
.kpi-co-den.kpi-den-do::before { background: linear-gradient(90deg, var(--do, #D92D20), #F97066); }
.kpi-co-den.kpi-den-vang::before { background: linear-gradient(90deg, var(--vang, #DC6803), #FDB022); }
.kpi-co-den.kpi-den-xanh::before { background: linear-gradient(90deg, var(--la, #079455), #32D583); }
.kpi-co-den.kpi-den-xam::before { background: linear-gradient(90deg, var(--chu-mo, #9AA7B8), #D0D7E1); }

/* ===== 3. Khối "Cần khắc phục" ===== */
.khoi-dkp .khoi-than { display: flex; flex-direction: column; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* viền mờ đáy cho khối cuộn nội bộ: báo còn nội dung, không cắt chữ */
.tq.tq-dkp > .khoi-dkp, .tq.tq-dkp > .tq-cb, .tq.tq-dkp > .tq-rieng { position: relative; }
.tq.tq-dkp > .khoi-dkp::after, .tq.tq-dkp > .tq-cb::after, .tq.tq-dkp > .tq-rieng::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 22px; pointer-events: none; border-radius: 0 0 var(--bo-goc, 12px) var(--bo-goc, 12px); background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--the, #fff) 85%); }
.dkp-danh-sach { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--k8, 8px); align-content: stretch; }
.dkp-dong { display: flex; align-items: flex-start; gap: var(--k8, 8px); min-width: 0; background: var(--the, #fff); border: 1px solid var(--vien, #E3E9F2); border-left: 4px solid var(--chu-mo, #9AA7B8); border-radius: 12px; padding: var(--k8, 8px) var(--k12, 12px); transition: transform var(--chuyen, 240ms), box-shadow var(--chuyen, 240ms); }
.dkp-dong:hover, .dkp-dong:focus-within { transform: translateY(-1px); box-shadow: var(--bong-noi, 0 6px 18px rgba(11, 27, 51, 0.08)); }
.dkp-do { border-left-color: var(--do, #D92D20); background: linear-gradient(90deg, var(--do-nen, #FEE4E2), var(--the, #fff) 40%); }
.dkp-vang { border-left-color: var(--vang, #DC6803); background: linear-gradient(90deg, var(--vang-nen, #FEF0C7), var(--the, #fff) 40%); }
.dkp-xanh { border-left-color: var(--la, #079455); }
.dkp-xam { border-left-color: var(--chu-mo, #9AA7B8); }
.dkp-dong > .den { margin-top: var(--k4, 4px); }
.dkp-nd { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--k4, 4px); }
.dkp-tieu-de { font-weight: 700; color: var(--chu, #0B1B33); white-space: normal; overflow-wrap: anywhere; }
.dkp-gia-tri { font-weight: 400; color: var(--chu-phu, #5B6A80); }
.dkp-viec { color: var(--chu-2, #37455C); overflow-wrap: anywhere; white-space: normal; }
.dkp-viec.chu-thich { color: var(--chu-phu, #5B6A80); }
.dkp-link { flex: none; display: inline-flex; align-items: center; gap: var(--k4, 4px); align-self: center; color: var(--xanh, #1565D8); font-weight: 700; text-decoration: none; white-space: nowrap; min-height: 44px; padding: var(--k8, 8px) var(--k12, 12px); border-radius: 8px; transition: background-color 180ms ease; }
.dkp-link:hover, .dkp-link:focus-visible { background: var(--xanh-nhat, #E8F0FD); text-decoration: underline; outline: none; }
.dkp-link:focus-visible { box-shadow: 0 0 0 2px var(--xanh, #1565D8); }

/* ===== 4. Lưới màn con dàn đều: KPI → Cần khắc phục + Cảnh báo → Biểu đồ + Bảng (lấp đủ chiều cao, không ô trống) ===== */
.tq.tq-dkp > .khoi-dkp { grid-column: span 7; }
.tq.tq-dkp > .tq-cb { grid-column: span 5; }
.tq.tq-dkp > .tq-bd1 { grid-column: span 7; }
.tq.tq-dkp > .tq-bang { grid-column: span 5; }
.tq.tq-dkp.tq-khong-dkp > .tq-cb { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .tq.tq-dkp.tq-co-rieng > .khoi-dkp { grid-column: 1 / 5; grid-row: 2; }
  .tq.tq-dkp.tq-co-rieng > .tq-cb { grid-column: 5 / 9; grid-row: 2; }
  .tq.tq-dkp.tq-co-rieng > .tq-rieng { grid-column: 9 / 13; grid-row: 2; }
  .tq.tq-dkp.tq-co-rieng > .tq-bd1 { grid-row: 3; }
  .tq.tq-dkp.tq-co-rieng > .tq-bang { grid-row: 3; }
}
.tq.tq-dkp.tq-co-rieng.tq-khong-dkp > .tq-cb, .tq.tq-dkp.tq-co-rieng.tq-khong-dkp > .tq-rieng { grid-column: span 6; }
.tq.tq-dkp > .tq-cb .khoi-than, .tq.tq-dkp > .tq-rieng .khoi-than { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.tq.tq-dkp > .tq-cb .cb-danh-sach { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--k8, 8px); }
.tq.tq-dkp > .tq-cb .cb-danh-sach > .cb { flex: 1 1 auto; }
.tq.tq-dkp > .khoi-bang .khoi-than { min-height: 0; overflow: auto; }
/* 100 % chữ không cắt/khuất (lệnh 25/10): mọi ô bảng, chip, tiêu đề, chú thích, giá trị cảnh báo xuống dòng thay vì "…" */
.tq .cb-gia-tri, .tq .cb-tieu-de, .tq .cb-noi-dung .chu-thich, .tq .kpi-cuoi .chu-thich, .tq .kpi-nhan, .tq .kpi-nhan .chu-thich, .tq .tieu-de-khoi, .tq .khoi-dau .chu-thich, .tq .kpi-so, .tq .nhan { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.tq .kpi-so { line-height: 1.1; }
.tq .kpi-ss { white-space: normal; }
.tq table.bang td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }
.tq table.bang th.o-tieu-de { width: auto; }
.tq .khoi-dau { flex-wrap: wrap; row-gap: 2px; }
.tq .khoi-dau .khoi-phai { flex: none; margin-left: auto; position: static; }
.tq.tq-dkp > .khoi > .khoi-dau { flex: none; }
.tq .khoi-dau .chu-thich { flex: 1 1 auto; min-width: 0; }
.tq .khoi-dau h2 { flex: 0 1 auto; min-width: 0; }
.tq .kpi { overflow: visible; gap: var(--k8, 8px); padding: var(--k12, 12px); }
.tq .bd-khung { position: relative; overflow: hidden; }
.tq .bd-khung canvas { position: relative; max-width: 100%; }
.tq .kpi::before { border-radius: var(--bo-goc, 12px) var(--bo-goc, 12px) 0 0; }
.tq table.bang th { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.tq .nhan-muc { display: inline-block; padding: 0 var(--k8, 8px); border-radius: 999px; line-height: 22px; font-weight: 700; }
.tq .nhan-muc-do { background: var(--do-nen, #FEE4E2); color: var(--do-chu, #B42318); }
.tq .nhan-muc-vang { background: var(--vang-nen, #FEF0C7); color: var(--vang-chu, #B54708); }
.tq .nhan-muc-xanh { background: var(--la-nen, #DCFAE6); color: var(--la-chu, #067647); }
.tq > .loi, .tq > .trong { grid-column: 1 / -1; }
.loc-man { min-height: 44px; border-radius: 12px; }
.loc-man:focus-visible { outline: 2px solid var(--xanh, #1565D8); outline-offset: 2px; }
@media (min-width: 1024px) {
  .tq.tq-dkp { grid-template-rows: auto minmax(200px, 1fr) minmax(280px, 1.3fr); height: 100%; min-height: 0; }
  .tq.tq-dkp > .tq-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tq.tq-dkp > .tq-kpi .kpi { min-height: 150px; }
  .tq.tq-dkp > .khoi { min-height: 0; overflow: hidden; }
  .tq.tq-dkp > .khoi-bang .khoi-than { display: flex; flex-direction: column; }
  .tq.tq-dkp > .khoi-bang .bang-khung { flex: 1 1 auto; max-height: none; }
  .tq.tq-dkp > .khoi-bang table.bang { height: 100%; }
  .tq.tq-dkp > .tq-bd1, .tq.tq-dkp > .tq-bang { height: auto; max-height: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* màn 1024 thấp (768px): giữ tối thiểu hàng 3 để bảng/biểu đồ đọc được, trang cuộn thay vì ép */
  .tq.tq-dkp { grid-template-rows: auto minmax(220px, 1fr) minmax(400px, 1.3fr); height: auto; min-height: 100%; }
  .tq.tq-dkp > .tq-bd1 { min-height: 400px; }
}
@media (min-width: 1600px) {
  .tq.tq-dkp { grid-template-rows: auto minmax(220px, 1fr) minmax(320px, 1.5fr); }
  .tq.tq-dkp > .tq-kpi .kpi { min-height: 160px; }
}
/* tablet 768–1023: lưới 2 cột, KPI 3 cột, bảng dạng thẻ 2 cột */
@media (min-width: 641px) and (max-width: 1023px) {
  .tq.tq-dkp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .tq.tq-dkp > .tq-kpi { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq.tq-dkp > .khoi-dkp, .tq.tq-dkp > .tq-cb, .tq.tq-dkp > .tq-rieng { grid-column: span 1; grid-row: auto; }
  .tq.tq-dkp > .tq-bd1, .tq.tq-dkp > .tq-bang { grid-column: 1 / -1; grid-row: auto; max-height: none; }
  .tq.tq-dkp > .tq-bd1 { height: 360px; }
  .tq.tq-dkp.tq-co-rieng > .khoi-dkp { grid-column: 1 / -1; }
  .tq.tq-dkp > .khoi-dkp .khoi-than, .tq.tq-dkp > .tq-cb .khoi-than { max-height: 360px; }
  .dkp-danh-sach { grid-template-columns: minmax(0, 1fr); }
  .tq.tq-dkp .khoi-bang .khoi-than, .tq.tq-dkp .bang-khung { overflow: visible; max-height: none; }
  .tq.tq-dkp table.bang, .tq.tq-dkp table.bang tbody, .tq.tq-dkp table.bang td { display: block; }
  .tq.tq-dkp table.bang thead { display: none; }
  .tq.tq-dkp table.bang tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k8, 8px); }
  .tq.tq-dkp table.bang tr { display: block; border: 1px solid var(--vien, #E3E9F2); border-radius: 10px; padding: var(--k8, 8px) var(--k12, 12px); background: var(--the, #fff); min-width: 0; }
  .tq.tq-dkp table.bang td { display: flex; justify-content: space-between; align-items: center; gap: var(--k8, 8px); padding: 3px 0; border: 0; white-space: normal; max-width: none; }
  .tq.tq-dkp table.bang td::before { content: attr(data-nhan); color: var(--chu-phu, #5B6A80); flex: none; }
  .tq.tq-dkp table.bang td.o-tieu-de { display: block; font-weight: 700; padding-bottom: var(--k4, 4px); }
  .tq.tq-dkp table.bang td.o-tieu-de::before { display: none; }
  .tq.tq-dkp table.bang td.so .o-thanh { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .dkp-danh-sach { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .dkp-dong { flex-wrap: wrap; }
  .dkp-tieu-de { white-space: normal; overflow-wrap: anywhere; }
  .dkp-link { width: 100%; justify-content: flex-end; min-height: 44px; }
}

/* ===== 5. Mượt: fade-in 240 ms khi render ===== */
@keyframes tq-vao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tq-vao { animation: tq-vao 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ===== 6. Skeleton cùng lưới với màn thật (span khớp, cao đo thật 25/10) ===== */
.skel-tq { display: grid; gap: var(--k12, 12px); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(200px, 1fr) minmax(280px, 1.3fr); height: 100%; min-height: 0; }
.skel-tq-kpi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--k12, 12px); }
.skel-tq .skel-kpi { height: 150px; }
.skel-tq .skel-dkp { grid-column: span 7; height: auto; min-height: 140px; }
.skel-tq .skel-cb { grid-column: span 5; height: auto; min-height: 140px; }
.skel-tq .skel-bd { grid-column: span 7; height: auto; min-height: 160px; }
.skel-tq .skel-bang { grid-column: span 5; height: auto; min-height: 160px; }
@media (max-width: 1023px) {
  .skel-tq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .skel-tq-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skel-tq .skel-kpi { height: 132px; }
  .skel-tq .skel-dkp, .skel-tq .skel-cb, .skel-tq .skel-bd { grid-column: span 1; height: 360px; }
  .skel-tq .skel-bang { grid-column: 1 / -1; height: 560px; }
}
@media (max-width: 640px) {
  .skel-tq { display: flex; flex-direction: column; }
  .skel-tq-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k8, 8px); }
  .skel-tq .skel-kpi { height: 112px; }
  .skel-tq .skel-dkp { height: 580px; }
  .skel-tq .skel-cb { height: 300px; }
  .skel-tq .skel-bd { height: 280px; }
  .skel-tq .skel-bang { height: 1400px; }
}

/* ===== 7. Giảm chuyển động ===== */
@media (prefers-reduced-motion: reduce) {
  .tq-vao { animation: none; }
  .dkp-dong, .dkp-dong:hover, .dkp-dong:focus-within { transition: none; transform: none; }
  .dkp-link { transition: none; }
}