/* Vibary UI — css/hoa_don.css (màn Hoá đơn & Xuất HĐ, 25/10). Tệp mới, không đụng app.css/den.css.
   Lớp: .hd-cho-xuat (khối bảng Chờ xuất), .hd-o-chon/.hd-chon (ô tick ≥44 vùng chạm), .hd-tre-* (đèn trễ), .hd-hddt, .hd-ket-qua, .hd-phai.
   Màu từ tokens.css; chữ < 14px chỉ ở .chu-thich. Nối vào index.html: <link rel="stylesheet" href="css/hoa_don.css?v=..."> sau den.css. */
.hd-cho-xuat .khoi-dau { flex-wrap: wrap; row-gap: var(--k8, 8px); }
.hd-cho-xuat .khoi-dau .khoi-phai { flex-wrap: wrap; }
.hd-phai { display: flex; align-items: center; gap: var(--k8, 8px); flex-wrap: wrap; }
.hd-cho-xuat .hd-hddt { flex: none; }
.hd-cho-xuat-than { display: flex; flex-direction: column; gap: var(--k8, 8px); min-height: 0; }
.hd-cho-xuat-than > .bang-khung { flex: 1 1 auto; min-height: 0; }

/* ô tick: vùng chạm ≥ 44 trên mobile, 36 máy tính; ô vuông 20 px */
.hd-o-chon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; cursor: pointer; border-radius: 8px; position: relative; }
.hd-o-chon:hover { background: var(--xanh-nhat, #EAF2FF); }
.hd-chon, .hd-chon-tat-ca { width: 20px; height: 20px; margin: 0; accent-color: var(--xanh, #1570EF); cursor: pointer; }
.hd-chon:disabled { cursor: not-allowed; opacity: 0.5; }
.hd-chon:focus-visible, .hd-chon-tat-ca:focus-visible { outline: 2px solid var(--xanh, #1570EF); outline-offset: 2px; }
table.bang th.hd-th-chon, table.bang td.hd-td-chon { width: 44px; padding-left: 0; padding-right: 0; text-align: center; }
table.bang th.hd-th-tre, table.bang td.hd-td-tre, table.bang th.hd-th-hddt, table.bang td.hd-td-hddt { white-space: nowrap; }
.tq table.bang td.hd-td-tre, .tq table.bang td.hd-td-hddt, .tq table.bang td.hd-td-chon { overflow: visible; overflow-wrap: normal; white-space: nowrap; }
.tq .nhan.hd-tre, .tq .nhan.hd-hddt, .tq .nhan.hd-cho-duyet { white-space: nowrap; overflow-wrap: normal; }  /* thắng .tq .nhan (den.css) */
.tq table.bang td.hd-td-tre, .tq table.bang th.hd-th-tre { width: 112px; }
@media (min-width: 1024px) and (max-width: 1599px) { .hd-cot-phu { display: none; } }  /* VAT, Kênh: có trong CSV + ≥1600 + mobile */
/* ===== Vòng 3: 1440×900 / 1024×768 KHÔNG cuộn trang — 3 hàng: KPI · [Khắc phục | Cảnh báo | Biểu đồ nhỏ] · Bảng 2 tab (≤6 dòng, Xem thêm cuộn trong khối) ===== */
@media (min-width: 1024px) {
  .tq.tq-dkp.hd-man { height: calc(100vh - var(--cao-dau-trang, 64px) - 28px); min-height: 0; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.15fr); }
  .tq.tq-dkp.hd-man > .tq-kpi .kpi { min-height: 0; }
  .tq.tq-dkp.hd-man > .khoi-dkp { grid-column: span 4; grid-row: 2; }
  .tq.tq-dkp.hd-man > .tq-cb { grid-column: span 4; grid-row: 2; }
  .tq.tq-dkp.hd-man > .tq-bd1 { grid-column: span 4; grid-row: 2; min-height: 0; height: auto; }
  .tq.tq-dkp.hd-man > .tq-bang { grid-column: 1 / -1; grid-row: 3; height: auto; max-height: none; }
  .tq.tq-dkp.hd-man > .khoi { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .tq.tq-dkp.hd-man > .khoi > .khoi-than { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .tq.tq-dkp.hd-man .dkp-danh-sach { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; }
  .tq.tq-dkp.hd-man > .tq-bd1 .bd-khung { min-height: 0; height: 100%; }
  .tq.tq-dkp.hd-man > .tq-bang table.bang { height: auto; }
  .tq.tq-dkp.hd-man > .tq-bang .bang-khung { overflow: auto; flex: 1 1 auto; min-height: 0; }
  .tq.tq-dkp.hd-man table.bang th.o-tieu-de { width: 26%; }
  .hd-tab-khung { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .hd-tab-than { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .tq.tq-dkp.hd-man { height: calc(100vh - var(--cao-dau-trang, 64px) - 28px); min-height: 0; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.1fr); }
  .tq.tq-dkp.hd-man > .tq-bd1 { min-height: 0; }
}
}
.hd-tre, .hd-hddt { gap: var(--k8, 8px); }
.hd-tre .den, .hd-hddt .den { flex: 0 0 10px; }
.hd-da-cho-duyet td { color: var(--chu-phu, #5B6A80); }
.hd-da-cho-duyet td.o-tieu-de { text-decoration: none; }
.hd-cho-duyet { margin-left: var(--k4, 4px); }

/* nút Đưa vào hàng chờ duyệt */
.hd-nut-duyet { white-space: nowrap; }
.hd-nut-duyet.hd-dang-gui { opacity: 0.7; cursor: progress; }
.hd-nut-duyet.hd-dang-gui svg { animation: hd-xoay 0.9s linear infinite; }
@keyframes hd-xoay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hd-nut-duyet.hd-dang-gui svg { animation: none; } }

/* kết quả POST (trong khối, không alert) */
.hd-ket-qua { display: none; align-items: center; gap: var(--k8, 8px); flex-wrap: wrap; padding: var(--k8, 8px) var(--k12, 12px); border-radius: 10px; line-height: 1.35; }
.hd-ket-qua.hd-ket-qua-cho, .hd-ket-qua.hd-ket-qua-ok, .hd-ket-qua.hd-ket-qua-loi { display: flex; }
.hd-ket-qua-cho { background: var(--xanh-nhat, #EAF2FF); color: var(--xanh, #1570EF); }
.hd-ket-qua-ok { background: var(--la-nen, #DCFAE6); color: var(--la-chu, #067647); }
.hd-ket-qua-loi { background: var(--do-nen, #FEE4E2); color: var(--do-chu, #B42318); }
.hd-ket-qua svg { flex: none; }
.hd-ket-qua .nut { margin-left: auto; }

/* ≤640: bảng thành thẻ (den.css) — ô tick nằm góc phải trên thẻ, vùng chạm 44 */
@media (max-width: 640px) {
  .tq.tq-dkp table.bang td.hd-td-chon { display: flex; justify-content: flex-end; width: auto; padding: 0; }
  .tq.tq-dkp table.bang td.hd-td-chon::before { content: 'Chọn hoá đơn'; margin-right: auto; }
  .hd-o-chon { min-width: var(--vung-cham, 44px); min-height: var(--vung-cham, 44px); }
  .tq.tq-dkp table.bang tbody { grid-template-columns: 1fr; }
  .hd-cho-xuat .khoi-dau .khoi-phai { margin-left: 0; width: 100%; }
  .hd-phai { width: 100%; }
  .hd-phai .hd-nut-duyet { flex: 1 1 auto; justify-content: center; }
  .hd-ket-qua .nut { margin-left: 0; width: 100%; justify-content: center; }
}

/* #3: dòng thiếu id → ô tick khoá, mờ */
.hd-o-chon-khoa { opacity: 0.45; cursor: not-allowed; }
.hd-o-chon-khoa:hover { background: transparent; }

/* tab bảng (NH03/CRM06): đèn + nhãn + badge đếm, aria-selected, phím ←/→ */
.hd-tabs { display: inline-flex; gap: var(--k4, 4px); margin-left: var(--k8, 8px); padding: 2px; border-radius: 10px; background: var(--vien-nhat, #EEF2F7); }
.hd-tab { display: inline-flex; align-items: center; gap: var(--k8, 8px); min-height: 32px; padding: 0 var(--k12, 12px); border: 0; border-radius: 8px; background: transparent; color: var(--chu-phu, #5B6A80); font-weight: 700; font-size: var(--c-thuong, 14px); cursor: pointer; white-space: nowrap; transition: background 180ms ease, color 180ms ease; }
.hd-tab:hover { color: var(--chu, #1B2430); }
.hd-tab[aria-selected="true"] { background: var(--the, #fff); color: var(--chu, #1B2430); box-shadow: var(--bong, 0 1px 2px rgba(0,0,0,0.08)); }
.hd-tab:focus-visible { outline: 2px solid var(--xanh, #1570EF); outline-offset: 1px; }
.hd-tab-dem { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--xanh-nhat, #EAF2FF); color: var(--xanh, #1570EF); font-variant-numeric: tabular-nums; }
.hd-phai-khung { display: flex; align-items: center; }
.hd-phai[hidden], .hd-tab-than[hidden] { display: none; }
.hd-dong-an { display: none; }
.tq.tq-dkp table.bang tr.hd-dong-an { display: none; }
.hd-xem-them { margin: var(--k8, 8px) auto 0; display: flex; }
.hd-xem-them[aria-expanded="true"] svg { transform: rotate(90deg); }
.hd-xem-them svg { transition: transform 180ms ease; }
@media (max-width: 1023px) { .hd-tab { min-height: 44px; } .hd-tabs { flex-wrap: wrap; margin-left: 0; } }