/* ============================================================
   v4.40 C1 — SỔ QUYẾT ĐỊNH + khung TỔNG HỢP BỐI CẢNH. Tiền tố .sqd- (không sửa lớp cũ).
   Bố cục Sổ dùng lại khuôn màn Phối hợp (.phc-head/.phc-kpis/.phc-tabs/.phc-loc — app.css); tệp này chỉ thêm phần riêng.
   Chỉ dùng biến màu có sẵn (--primary, --primary-soft, --line, --ink*, --grey, --warn, --danger, --success) ⇒ chạy đủ
   3 giao diện navy / do / luxe. Khung điện thoại (mbSheet) dùng bộ biến --m* của .mb-sheet-wrap (mobile.css).
   ============================================================ */

/* ---- Sổ: đầu trang, lọc ---- */
.sqd-head .phc-title { display: flex; align-items: center; gap: 6px; }
.sqd-xuat { display: inline-flex; align-items: center; gap: 5px; }
.sqd-loc select:disabled { opacity: .55; }
.sqd-khoang { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--ink-2); }
.sqd-khoang input[type="date"] { padding: 5px 7px; font-size: var(--fs-sm); }
.sqd-empty { margin: 8px 0 16px; }

/* ---- Sổ: bảng ---- */
.sqd-wrap { margin-bottom: 10px; }
.sqd-bang { min-width: 860px; }
.sqd-bang th { text-align: left; white-space: nowrap; }
.sqd-bang td { vertical-align: top; }
.sqd-dong { cursor: pointer; }
.sqd-dong:hover td { background: var(--primary-soft); }
.sqd-dong.on td { background: var(--primary-soft); border-bottom-color: transparent; }
.sqd-dong:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sqd-ma { white-space: nowrap; color: var(--primary); }
.sqd-ngay { white-space: nowrap; color: var(--ink-2); }
.sqd-vd { min-width: 220px; max-width: 360px; color: var(--ink); }
.sqd-kqo { white-space: nowrap; }
.sqd-cap { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.sqd-ct .sqd-cap { display: inline; margin-left: 4px; }
.sqd-mo-nhat { color: var(--ink-3); }
.sqd-more { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.sqd-dem { font-size: var(--fs-xs); color: var(--ink-3); }

/* chip kết quả — nền nhạt theo màu trạng thái của theme (có dự phòng khi trình duyệt chưa có color-mix) */
.sqd-kq { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 1px 9px; background: var(--grey); color: var(--ink-2); white-space: nowrap; }
.sqd-kq-cho { background: #fff4e0; background: color-mix(in srgb, var(--warn) 16%, #fff); color: var(--ink); }
.sqd-kq-duyet, .sqd-kq-duyet_ykien { background: #e7f6ec; background: color-mix(in srgb, var(--success) 14%, #fff); color: var(--success); }
.sqd-kq-chidaokhac, .sqd-kq-trinhlen { background: var(--primary-soft); color: var(--primary); }
.sqd-kq-tuchoi { background: #fdecea; background: color-mix(in srgb, var(--danger) 12%, #fff); color: var(--danger); }
.sqd-kq-thuhoi { background: var(--grey); color: var(--ink-3); }
.sqd-qh { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); }

/* ---- Sổ: khung hẹp (E2E F2 24/09) ----
   Cột phải "Bảng hôm nay" mở ở cửa sổ 1280–1500 px làm khung bảng chỉ còn 680–860 px; bảng cũ tối thiểu 860 px nên
   phải cuộn ngang và chip Kết quả bị cắt ở mép phải. Khi KHUNG BẢNG (không phải cửa sổ) hẹp hơn 900 px: cho tiêu đề
   cột và chip Kết quả xuống dòng, bớt đệm ngang, đặt bề rộng tối thiểu từng cột ⇒ vừa khung từ khoảng 670 px. Khung
   rộng từ 900 px giữ nguyên bố cục cũ. Trình duyệt chưa có container query: giữ bố cục cũ (cuộn ngang trong khung). */
.sqd-wrap { container-type: inline-size; }
@container (max-width: 899px) {
  .sqd-bang { min-width: 660px; }
  .sqd-bang th { white-space: normal; }
  .sqd-bang th, .sqd-dong > td { padding-left: 7px; padding-right: 7px; }
  .sqd-dong > .sqd-vd { min-width: 130px; }
  .sqd-dong > .sqd-da, .sqd-dong > .sqd-kh { min-width: 60px; }
  .sqd-dong > .sqd-ng { min-width: 72px; }
  .sqd-dong > .sqd-kqo { white-space: normal; min-width: 124px; }
  .sqd-kqo .sqd-kq { white-space: normal; border-radius: 9px; padding: 1px 7px; }
}

/* ---- Sổ: dòng mở ---- */
.sqd-mo-tr > td { background: #fff; padding: 12px 14px 14px; border-top: 0; box-shadow: inset 3px 0 0 var(--primary); }
.sqd-ct { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 7px 16px; font-size: var(--fs-sm); color: var(--ink); }
.sqd-ct-r { display: contents; }
.sqd-ct-l { color: var(--ink-3); font-weight: 600; }
.sqd-ct-v { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.sqd-ct-v a { color: var(--primary); }
.sqd-pre, pre.sqd-th { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); background: var(--grey); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 420px; overflow-y: auto; }
.sqd-an { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.sqd-ghi { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.sqd-ct-nut { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 700px) {
  .sqd-ct { grid-template-columns: 1fr; gap: 2px 0; }
  .sqd-ct-l { margin-top: 6px; }
}

/* ---- Khung "Tổng hợp bối cảnh" (máy tính: lớp chồng) ---- */
.dlg-b.sqd-th-dlg { display: block; }
.sqd-th-gt { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.sqd-th-quyen { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--ink); background: #fff4e0; background: color-mix(in srgb, var(--warn) 14%, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.sqd-th-meta { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.dlg-b.sqd-th-dlg pre.sqd-th { max-height: 56vh; }
.sqd-th-cho { margin: 18px 0; text-align: center; color: var(--ink-3); }
.sqd-th-loi { margin: 12px 0; color: var(--danger); font-weight: 600; }

/* ---- Khung "Tổng hợp bối cảnh" (điện thoại: sheet đáy, biến --m*) ---- */
.sqd-th-mb { display: flex; flex-direction: column; gap: 10px; }
.sqd-th-mbid { font-size: 14px; font-weight: 700; color: var(--mink); overflow-wrap: anywhere; }
.mb-sheet-b .sqd-th-gt, .mb-sheet-b .sqd-th-meta, .mb-sheet-b .sqd-th-cho { color: var(--msub); }
.mb-sheet-b .sqd-th-quyen { color: var(--mink); background: var(--mtag-amber); border-color: var(--mbd); }
.mb-sheet-b .sqd-th-loi { color: var(--mred); }
.mb-sheet-b pre.sqd-th { background: var(--msurf2); color: var(--mink); border-color: var(--mbd); font-size: 14px; max-height: none; overflow-y: visible; }
.sqd-th-mbnut { display: flex; flex-direction: column; gap: 10px; }
.sqd-th-mbnut .mb-cta { min-height: 44px; }