/* =============================================================================
   kq-khung.css — KHUNG TRANG của sản phẩm (ADR-0022 2.1–2.3, QD-050): thanh trên 44px, điều hướng trái 248/52px (ghim/bỏ ghim,
   dọc/ngang), vùng nội dung khe 3px, cây con dock trái/phải, thanh trạng thái 24px, vùng + thanh kéo, lớp nổi.
   CHỈ dùng biến của kq-token.css. Không :has(), color-mix(), @container (Firefox ESR 102/115).
   Lớp trạng thái do MÁY CHỦ đặt lúc dựng (không nháy): .ud.bo-ghim · .ud.dh-ngang · .ud.dh-gon · .ud.dh-rong · .nd.dock-phai;
   kq-khung.js chỉ đổi tại chỗ khi người dùng bấm, rồi lưu /api/khung/tuy-chon.
   ============================================================================= */

/* ============================ NỀN ============================ */
html.kq, html.kq body { height: 100%; margin: 0; }
html.kq body.kq-than {
  display: block; overflow: hidden; font: var(--kq-co-3)/1.45 var(--kq-phong); color: var(--kq-chu); background: var(--kq-nen-ud);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.kq-than *, .kq-than *::before, .kq-than *::after { box-sizing: border-box; }
.kq-than [hidden] { display: none !important; }
.kq-tp button, .kq-tp input, .kq-tp select, .kq-tp textarea { font: inherit; color: inherit; }
.kq-than :focus-visible { outline: 2px solid var(--kq-nhan); outline-offset: 1px; border-radius: var(--kq-bo-1); }
.kq-than .so, .kq-than td.so, .kq-than .gia-tri { font-variant-numeric: tabular-nums; }
.kq-than .ma { font-family: var(--kq-phong-ma); font-size: .95em; letter-spacing: -.01em; white-space: nowrap; }
.kq-than .an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kq-than .mo { color: var(--kq-chu-mo); }
.kq-than .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.kq-than .ic.lon { width: 20px; height: 20px; }
.kq-than .ic.nho { width: 12px; height: 12px; }
.bo-qua-noi-dung { position: absolute; left: 8px; top: -60px; z-index: 400; background: var(--kq-nen-noi); color: var(--kq-chu); padding: 8px 12px; border-radius: var(--kq-bo-2); box-shadow: var(--kq-bong-noi); }
.bo-qua-noi-dung:focus { top: 8px; }

/* ============================ KHUNG ỨNG DỤNG ============================ */
.ud {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-rows: var(--kq-cao-thanh-tren) minmax(0, 1fr) var(--kq-cao-trang-thai);
  grid-template-columns: var(--kq-rong-dh) minmax(0, 1fr);
}
.ud.dh-gon { grid-template-columns: var(--kq-rong-dh-gon) minmax(0, 1fr); }
.ud.bo-ghim, .ud.dh-ngang { grid-template-columns: 0 minmax(0, 1fr); }

/* — Thanh trên — */
.tt {
  grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: var(--kq-k2); min-width: 0;
  background: var(--kq-thuong-hieu); color: var(--kq-thuong-hieu-chu); padding: 0 var(--kq-k2) 0 0; position: relative; z-index: 70;
}
.tt-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 8px;
  border: 0; border-radius: var(--kq-bo-2); background: transparent; color: inherit; cursor: pointer; white-space: nowrap; text-decoration: none !important;
}
.tt-nut:hover, .tt-nut[aria-expanded="true"] { background: var(--kq-thuong-hieu-2); color: inherit; }
.tt .kq-than :focus-visible, .tt :focus-visible { outline-color: var(--kq-thuong-hieu-chu); }
.tt-mo-menu { display: none; margin-left: 6px; }
.ud.bo-ghim .tt-mo-menu { display: inline-flex; }
.tt-thuong-hieu { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 12px; flex: none; color: inherit !important; text-decoration: none !important; }
.ud.bo-ghim .tt-thuong-hieu, .ud.dh-ngang .tt-thuong-hieu { padding-left: 2px; }
.ud.dh-ngang .tt-thuong-hieu { padding-left: 10px; }
.tt-dau { width: 26px; height: 26px; flex: none; }
.tt-dau.logo { object-fit: contain; border-radius: var(--kq-bo-2); background: var(--kq-thuong-hieu-chu); }
.tt-ten { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tt-ten b { font-size: var(--kq-co-3); font-weight: 600; white-space: nowrap; }
.tt-ten span { font-size: var(--kq-co-1); color: var(--kq-thuong-hieu-chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ud.dh-ngang .tt-ten { display: none; }  /* menu ngang: giữ biểu tượng, ẩn chữ tên sản phẩm + khách (QD-050 (3)) */
.tt-phim { font-size: 12px; color: var(--kq-thuong-hieu-chu-2); }
.tt-giua { display: flex; align-items: center; gap: var(--kq-k2); min-width: 0; flex: 1 1 auto; }
.ud.dh-ngang .tt-giua { flex: 0 1 auto; }
.tt-phai { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }

/* — Menu ngang trên thanh trên (ARIA menubar) — */
.tt-menu { display: none; align-items: center; min-width: 0; flex: 1 1 auto; }
.ud.dh-ngang .tt-menu { display: flex; }
/* overflow PHẢI để visible: bảng xổ (.bang-noi) là con của thanh — overflow: hidden cắt mất bảng ngay dưới thanh (menu «không xổ»). Nhóm tràn
   vẫn được dồn vào «Thêm» vì scrollWidth tính cả phần tràn khi tràn hiển thị (kq-khung.js veLai). */
.tt-menu > ul[role="menubar"] { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1 1 auto; overflow: visible; }
.tt-menu li { position: relative; flex: none; }
.tt-nhom { height: 32px; }
.tt-nhom .ic { opacity: .9; }
.tt-nhom.dang-o { background: var(--kq-thuong-hieu-2); box-shadow: inset 0 -3px 0 var(--kq-nhan); }
.tt-menu .bang-noi { top: calc(100% + 6px); }
.tt-menu .tt-ve-doc { flex: none; }

/* Ô phạm vi + chọn kỳ (trên nền thương hiệu — viền/nền trong suốt lấy theo chữ trắng) */
.pham-vi, .ky-chon {
  display: flex; align-items: center; height: 32px; border-radius: var(--kq-bo-2); min-width: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
}
.pham-vi-nhan { font-size: var(--kq-co-1); color: var(--kq-thuong-hieu-chu-2); padding: 0 8px 0 10px; white-space: nowrap; }
.pham-vi-buoc {
  display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--kq-thuong-hieu-chu);
  cursor: pointer; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important;
}
.pham-vi-buoc:hover { background: rgba(255, 255, 255, .12); color: var(--kq-thuong-hieu-chu); }
.pham-vi-buoc[aria-disabled="true"] { cursor: default; color: var(--kq-thuong-hieu-chu-2); }
.pham-vi-buoc[aria-disabled="true"]:hover { background: transparent; }
.pham-vi-tach { color: var(--kq-thuong-hieu-chu-2); font-size: 12px; }
.ky-chon .tt-nut { height: 30px; border-radius: 0; }
.ky-chon .tt-nut + .tt-nut { border-left: 1px solid rgba(255, 255, 255, .22); }
.ky-nhan-phu { font-size: 11px; color: var(--kq-thuong-hieu-chu-2); }
.chuong { position: relative; }
.chuong-so {
  position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--kq-huy-hieu);
  color: var(--kq-huy-hieu-chu); font-size: 11px; line-height: 16px; font-weight: 700; text-align: center;
}
.nguoi-dung { gap: 8px; }
.chu-dau { width: 26px; height: 26px; border-radius: 50%; background: var(--kq-nhan); color: var(--kq-nhan-chu); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.nguoi-dung-ten { display: flex; flex-direction: column; line-height: 1.15; text-align: left; max-width: 220px; min-width: 0; }
.nguoi-dung-ten b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nguoi-dung-ten span { font-size: 11px; color: var(--kq-thuong-hieu-chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================ ĐIỀU HƯỚNG TRÁI ============================ */
.dh {
  grid-column: 1; grid-row: 2; background: var(--kq-nen-dh); border-right: 1px solid var(--kq-vien); min-height: 0; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.dh-dau { display: flex; align-items: center; gap: 2px; padding: var(--kq-k2) 4px 6px 0; flex: none; }
.dh-dau .dh-trang-chu { flex: 1 1 auto; min-width: 0; }
.dh-cong-cu { display: flex; gap: 0; flex: none; }
/* Vùng cuộn RIÊNG của menu: mục cuối không bao giờ đè lên nhau hay lên chân menu (QD-050 (4)). */
.dh-cuon { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: var(--kq-k2); overscroll-behavior: contain; }
.dh-nhom { margin: 0 0 2px; }
.dh-nhom-nut {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 12px 0 14px; border: 0; background: transparent;
  color: var(--kq-chu-2); font-weight: 600; font-size: var(--kq-co-2); cursor: pointer; text-align: left;
}
.dh-nhom-nut:hover { background: var(--kq-dong-di); }
.dh-nhom-nut .mui { margin-left: auto; transition: transform var(--kq-nhanh); color: var(--kq-chu-mo); display: inline-flex; }
.dh-nhom-nut[aria-expanded="false"] .mui { transform: rotate(-90deg); }
.dh-nhom-nut[aria-expanded="false"] + .dh-con { display: none; height: 0; opacity: 0; }
.dh-con { list-style: none; margin: 0 0 4px 22px; padding: 0; border-left: 1px solid var(--kq-noi-cay); }
.dh-con li { position: relative; }
.dh-con li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; border-top: 1px solid var(--kq-noi-cay); }
/* Nhãn dài XUỐNG DÒNG trong cột của nó; nhãn đợt / số việc đứng cột riêng, không bao giờ bị chữ đè (QD-050 (4), luật CHU_DE_NHAU). */
.dh-muc {
  display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px 5px 16px; margin-right: 8px; border-radius: 0 var(--kq-bo-2) var(--kq-bo-2) 0;
  color: var(--kq-chu); font-size: var(--kq-co-2); line-height: 1.3; position: relative; text-decoration: none !important;
}
.dh-muc:hover { background: var(--kq-dong-di); color: var(--kq-chu); }
.dh-muc[aria-current="page"] { background: var(--kq-chinh-nhat); color: var(--kq-chinh-dam); font-weight: 600; }
.dh-muc[aria-current="page"]::after { content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 3px; background: var(--kq-nhan); border-radius: 2px; }
.dh-nhan { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dh-muc .ve { flex: none; font-size: 11px; line-height: 16px; color: var(--kq-chu-mo); background: var(--kq-chua-do-nen); border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.dh-muc .dem { flex: none; font-size: 11px; line-height: 16px; font-weight: 700; color: var(--kq-huy-hieu-chu); background: var(--kq-huy-hieu); border-radius: 8px; padding: 0 6px; }
.dh-trang-chu { margin: 0; padding-left: 14px; border-radius: var(--kq-bo-2); font-weight: 600; }
.dh-chan { padding: 8px 14px; font-size: 11px; line-height: 1.4; color: var(--kq-chu-mo); border-top: 1px solid var(--kq-vien); flex: none; }
.dh-ngan-dau { display: none; flex-direction: column; gap: 6px; padding: 8px; border-bottom: 1px solid var(--kq-vien); background: var(--kq-thuong-hieu); flex: none; }
.dh .nut.nho.chi-ic { width: 28px; height: 28px; }

/* Thu gọn 52px: chỉ biểu tượng nhóm, bấm nhóm thì mở lại. */
.ud.dh-gon .dh-nhan, .ud.dh-gon .dh-con, .ud.dh-gon .dh-chan, .ud.dh-gon .dh-nhom-nut .mui, .ud.dh-gon .nut-ghim, .ud.dh-gon .nut-xoay { display: none; }
.ud.dh-gon .dh-dau { flex-direction: column; padding: var(--kq-k2) 0 6px; }
.ud.dh-gon .nut-gon .ic { transform: rotate(180deg); }
.ud.dh-gon .dh-nhom-nut, .ud.dh-gon .dh-trang-chu { justify-content: center; padding: 0; margin: 0 4px 2px; }
.ud.dh-gon .dh-trang-chu { width: 40px; }

/* Bỏ ghim / menu ngang: menu thành NGĂN KÉO lớp phủ trượt từ trái (bỏ ghim) hoặc ẩn hẳn (ngang, chỉ dùng ở bề rộng điện thoại). */
.ud.bo-ghim .dh, .ud.dh-ngang .dh {
  position: fixed; left: 0; top: var(--kq-cao-thanh-tren); bottom: var(--kq-cao-trang-thai); width: var(--kq-rong-ngan-keo); z-index: var(--kq-z-ngan-keo);
  transform: translateX(-102%); transition: transform var(--kq-ngan-keo-tg) ease-out, visibility 0s linear var(--kq-ngan-keo-tg);
  box-shadow: var(--kq-bong-noi); visibility: hidden;
}
.ud.dh-mo-ngan .dh { transform: none; visibility: visible; transition: transform var(--kq-ngan-keo-tg) ease-out; }
.ud.bo-ghim .nut-gon, .ud.dh-ngang .nut-gon, .ud.dh-ngang .nut-xoay { display: none; }
.ud.bo-ghim .dh-nhan, .ud.bo-ghim .dh-con, .ud.bo-ghim .dh-chan { display: revert; }
.ud.bo-ghim .dh-nhan { display: block; }
.che-dh { position: fixed; inset: var(--kq-cao-thanh-tren) 0 var(--kq-cao-trang-thai) 0; background: var(--kq-man-che); z-index: calc(var(--kq-z-ngan-keo) - 1); }

/* ============================ NỘI DUNG ============================ */
.nd { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; padding: var(--kq-khe); display: flex; flex-direction: column; gap: var(--kq-khe); overflow: hidden; }
.thong-bao-trang {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 6px var(--kq-k3); background: var(--kq-tin-nen); color: var(--kq-chu); font-size: var(--kq-co-2);
  border-left: 3px solid var(--kq-tin);
}
.thong-bao-trang .ic { color: var(--kq-tin); }
.tieu-de-trang {
  display: flex; align-items: center; gap: var(--kq-k3); background: var(--kq-nen-vung); padding: 4px var(--kq-k3); min-height: var(--kq-cao-tieu-de); flex: none; min-width: 0;
}
.tieu-de-trang h1 { font-size: var(--kq-co-4); line-height: 1.3; margin: 0; font-weight: 600; white-space: nowrap; color: var(--kq-chu); letter-spacing: 0; }
.tieu-de-trang .mo-ta { color: var(--kq-chu-mo); font-size: var(--kq-co-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tieu-de-trang .phai { margin-left: auto; display: flex; gap: var(--kq-k2); align-items: center; flex: none; }
.nd-than { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--kq-khe); }

/* Cây con của chức năng (khe bố cục cấp KHUNG — QD-050 (2)): dock trái/phải chỉ đổi thứ tự HIỂN THỊ (CSS order), DOM/Tab giữ nguyên. */
.chia-cay-con { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.chia-cay-con > .vung-cay-con { flex: 0 0 var(--kq-rong-cay); width: var(--kq-rong-cay); min-width: 200px; max-width: 60%; order: 1; }
.chia-cay-con > .thanh-keo-cay-con { order: 2; }
.chia-cay-con > .nd-chinh { order: 3; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--kq-khe); }
.nd.dock-phai .chia-cay-con > .vung-cay-con { order: 9; }
.nd.dock-phai .chia-cay-con > .thanh-keo-cay-con { order: 8; }
.nd.dock-phai .nut-dock .ic { transform: scaleX(-1); }

/* Nội dung KẾ THỪA (trang giữ khung, nội dung cũ chờ UI-2…5): <main class="nd nd-ke-thua noi-dung"> là MỘT vùng trắng tự cuộn trong khung
   mới — giữ nguyên các luật «main.noi-dung …» của site.css/vua-khung.css/chia-vung.css mà nội dung cũ dựa vào. */
.ud > main.nd.nd-ke-thua {
  display: flex; flex-direction: column; gap: var(--kc-khoi, 4px); margin: var(--kq-khe); padding: var(--kc-vung, 12px);
  background: var(--kq-nen-vung); overflow-y: auto; overflow-x: hidden;
}
body.vua-khung .ud > main.nd.nd-ke-thua { overflow: hidden; }
@media (max-width: 1023px), (max-height: 699px) {
  body.vua-khung .ud > main.nd.nd-ke-thua { overflow-y: auto; }
}

/* ============================ THANH TRẠNG THÁI ============================ */
.ttt {
  grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: var(--kq-k4); padding: 0 var(--kq-k3); background: var(--kq-nen-phu);
  border-top: 1px solid var(--kq-vien); font-size: var(--kq-co-1); color: var(--kq-chu-mo); white-space: nowrap; overflow: hidden; min-width: 0;
}
.ttt b { color: var(--kq-chu-2); font-weight: 600; }
.ttt a { color: var(--kq-chu-2); }
.ttt .phai { margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 4px; }
.ttt-moc { display: flex; align-items: center; gap: var(--kq-k4); min-width: 0; flex: 1 1 0; overflow: hidden; }
.ttt-rong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ttt-ghi { display: inline-flex; color: var(--kq-chu-2); cursor: help; }
.cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; background: var(--kq-chua-do); }
.cham.tot { background: var(--kq-bd-tot); } .cham.canh-bao { background: var(--kq-bd-canh-bao); } .cham.xau { background: var(--kq-bd-xau); }

/* ============================ VÙNG + THANH KÉO ============================ */
.chia { display: flex; min-height: 0; min-width: 0; flex: 1 1 auto; }
.chia.doc { flex-direction: column; }
.vung { background: var(--kq-nen-vung); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.vung-dau {
  display: flex; align-items: center; gap: var(--kq-k2); min-height: var(--kq-cao-dau-vung); padding: 0 var(--kq-k2) 0 var(--kq-k3);
  border-bottom: 1px solid var(--kq-vien); background: var(--kq-nen-vung); flex: none; min-width: 0;
}
.vung-dau h2 { font-size: var(--kq-co-3); line-height: 1.3; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--kq-chu); letter-spacing: 0; }
.vung-dau .phai { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.vung-than { flex: 1 1 auto; overflow: auto; min-height: 0; }
.vung-than.dem { padding: var(--kq-k3); }
.thanh-keo { flex: 0 0 var(--kq-khe); background: transparent; position: relative; cursor: col-resize; touch-action: none; outline: none; }
.chia.doc > .thanh-keo { cursor: row-resize; }
.thanh-keo::after { content: ""; position: absolute; inset: 0 -4px; z-index: 2; }
.chia.doc > .thanh-keo::after { inset: -4px 0; }
.thanh-keo:hover, .thanh-keo:focus-visible, .thanh-keo.dang-keo { background: var(--kq-nhan); }

/* ============================ LỚP NỔI: menu thả, bảng nổi ============================ */
.bang-noi {
  position: absolute; z-index: var(--kq-z-menu); top: calc(100% + 4px); left: 0; min-width: 240px; max-width: min(420px, calc(100vw - 16px));
  background: var(--kq-nen-noi); color: var(--kq-chu); border: 1px solid var(--kq-vien-dam); border-radius: var(--kq-bo-2); box-shadow: var(--kq-bong-noi);
  padding: 6px 0; max-height: min(480px, calc(100vh - 90px)); overflow: auto; list-style: none; margin: 0; font-size: var(--kq-co-2); text-align: left;
}
.bang-noi.phai { left: auto; right: 0; }
.bang-noi[role="menu"] li { list-style: none; }
.bang-noi .tieu-de-noi { padding: 4px 14px 2px; font-size: 11px; font-weight: 700; color: var(--kq-chu-mo); text-transform: uppercase; letter-spacing: .03em; white-space: normal; }
.bang-noi .muc-menu {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 14px; border: 0; background: transparent; cursor: pointer; text-align: left;
  color: var(--kq-chu); text-decoration: none !important; white-space: normal; line-height: 1.35; min-height: 30px;
}
.bang-noi .muc-menu:hover:not([aria-disabled="true"]), .bang-noi .muc-menu:focus-visible, .bang-noi .muc-menu.tieu-diem { background: var(--kq-dong-di); color: var(--kq-chu); outline: none; }
.bang-noi .muc-menu[aria-current="page"], .bang-noi .muc-menu[aria-checked="true"] { font-weight: 600; color: var(--kq-chinh-dam); }
.bang-noi .muc-menu[aria-disabled="true"] { color: var(--kq-chu-tat); cursor: not-allowed; }
.bang-noi .muc-menu .ly-do { display: block; font-size: 11px; color: var(--kq-chu-mo); }
.bang-noi .muc-menu .ve, .bang-noi .muc-menu .dem { margin-left: auto; flex: none; font-size: 11px; border-radius: 8px; padding: 0 6px; }
.bang-noi .muc-menu .ve { color: var(--kq-chu-mo); background: var(--kq-chua-do-nen); }
.bang-noi .muc-menu .dem { color: var(--kq-huy-hieu-chu); background: var(--kq-huy-hieu); font-weight: 700; }
.bang-noi .muc-menu .ic { color: var(--kq-chu-2); }
.bang-noi hr, .bang-noi .tach { border: 0; border-top: 1px solid var(--kq-vien); margin: 4px 0; height: 0; }
.bang-noi form { margin: 0; }
.bang-noi .rong-noi { padding: 8px 14px; color: var(--kq-chu-mo); white-space: normal; }
.bao-noi { position: relative; display: inline-flex; }

/* Tìm nhanh (Ctrl+K) */
.tim-nhanh .hop-thoai { width: min(640px, calc(100vw - 32px)); }
.tim-nhanh-o { width: 100%; }
.tim-nhanh-kq { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.tim-nhanh-kq a { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: var(--kq-bo-2); color: var(--kq-chu); text-decoration: none; }
.tim-nhanh-kq a:hover, .tim-nhanh-kq a.tieu-diem { background: var(--kq-dong-di); }
.tim-nhanh-kq .nhom-kq { margin-left: auto; font-size: 11px; color: var(--kq-chu-mo); white-space: nowrap; }

/* ============================ BỀ RỘNG (ADR-0022 2.1) ============================ */
/* QD-054: không còn dải thu gọn 52px (kể cả 900–1279px) — bỏ ghim là ẩn hẳn, mở bằng ☰. */
/* < 900px: điều hướng LUÔN là ngăn kéo ☰ (kể cả ghim hay ngang); ô phạm vi và chọn kỳ lên đầu ngăn kéo; các vùng xếp dọc. */
@media (max-width: 899px) {
  .ud, .ud.dh-gon, .ud.bo-ghim, .ud.dh-ngang { grid-template-columns: 0 minmax(0, 1fr); }
  .ud .dh {
    position: fixed; left: 0; top: var(--kq-cao-thanh-tren); bottom: var(--kq-cao-trang-thai); width: min(var(--kq-rong-ngan-keo), 86vw); z-index: var(--kq-z-ngan-keo);
    transform: translateX(-102%); transition: transform var(--kq-ngan-keo-tg) ease-out, visibility 0s linear var(--kq-ngan-keo-tg); box-shadow: var(--kq-bong-noi); visibility: hidden;
  }
  .ud.dh-mo-ngan .dh { transform: none; visibility: visible; transition: transform var(--kq-ngan-keo-tg) ease-out; }
  .ud .tt-mo-menu { display: inline-flex; }
  .ud .tt-menu { display: none; }
  .ud.dh-gon .dh-nhan, .ud.dh-gon .dh-con, .ud.dh-gon .dh-chan, .ud.dh-gon .dh-nhom-nut .mui { display: revert; }
  .ud.dh-gon .dh-nhan { display: block; }
  .ud.dh-gon .dh-dau { flex-direction: row; }
  .ud.dh-gon .dh-nhom-nut { justify-content: flex-start; padding: 0 12px 0 14px; margin: 0; }
  .ud.dh-gon .dh-trang-chu { width: auto; justify-content: flex-start; padding-left: 14px; }
  .nut-gon, .nut-ghim, .nut-xoay { display: none !important; }
  .dh-ngan-dau { display: flex; }
  .tt-thuong-hieu { flex: 1 1 auto; min-width: 0; padding-left: 2px; }
  .tt-ten b { overflow: hidden; text-overflow: ellipsis; }
  .ud.dh-ngang .tt-ten { display: flex; }
  .tt-ten span, .pham-vi-nhan, .nut-cung-ky, .nguoi-dung-ten, .tt-phim, .tt-giua { display: none !important; }
  .tt-phai { margin-left: 0; }
  .nd { overflow-y: auto; }
  .chia, .chia.doc, .chia-cay-con { flex-direction: column; flex: none; }
  .chia > .vung, .chia-cay-con > .vung-cay-con { flex: 0 0 auto !important; width: auto !important; max-width: none; min-height: 40vh; max-height: 75vh; }
  .chia > .thanh-keo, .chia-cay-con > .thanh-keo { display: none; }
  .nd.dock-phai .chia-cay-con > .vung-cay-con { order: 1; }
  .tieu-de-trang { flex-wrap: wrap; } .tieu-de-trang h1 { white-space: normal; } .tieu-de-trang .mo-ta { white-space: normal; }
  .tieu-de-trang .phai { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-left: 0; }
  .ttt-moc > :not(:first-child) { display: none; }
}

/* ============================ CHUYỂN ĐỘNG, IN ============================ */
@media (prefers-reduced-motion: reduce) {
  .kq-than *, .kq-than *::before, .kq-than *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  html.kq body.kq-than { overflow: visible; background: #fff; }
  .ud { display: block; height: auto; }
  .tt, .dh, .ttt, .che-dh, .thanh-keo, .vung-thong-bao, .tieu-de-trang .phai { display: none !important; }
  .nd, .nd-than, .chia, .chia-cay-con, .vung, .vung-than { overflow: visible !important; height: auto !important; display: block; }
}
.nd > .vung:last-child, .nd-chinh > .vung:last-child, .nd-chinh > .vung-than:last-child, .nd > .vung-than:last-child { flex: 1 1 auto; min-height: 0; }
/* UI-1: dải tab đáy của Tổng quan kế thừa (kho cấp tỉnh) không hiện trong khung mới — trang chủ theo vai làm lại ở UI-2. */
body.kq-ke-thua .dash-tab { display: none !important; }
/* Phần tử định vị tuyệt đối (nhãn ẩn .an-chu, ::after phủ thẻ…) phải lấy VÙNG làm khối chứa — nếu không chúng thoát khỏi overflow của vùng
   và kéo dài tài liệu (body cuộn — luật KHUNG_SAI). */
.nd, .vung, .vung-than, .dh-cuon, .nd-chinh, .chia-cay-con { position: relative; }
/* Chưa đăng nhập (trang lỗi, từ chối): không có cột điều hướng. */
.ud.khach { grid-template-columns: 0 minmax(0, 1fr); }

/* QD-054 — không cắt dở: mô tả ở đầu vùng tự rút gọn trên CHÍNH nó (… + title); bề rộng hẹp thì đầu vùng xuống dòng thay vì tràn. */
.vung-dau > .mo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  .vung-dau { flex-wrap: wrap; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .vung-dau .phai { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; min-width: 0; }
  .kq-tp .tan-suat.tan-suat { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
  .kq-tp .tan-suat .tan-suat-nut { white-space: nowrap; flex: none; }
}


/* ============================ HIỆU ỨNG MỞ / ĐÓNG (yêu cầu người dùng 19/10/2026) ============================
   Mọi chỗ ẩn/hiện chuyển mượt thay vì bật tắt tức thì: bảng nổi (menu ngang, chuông, tài khoản, kỳ…) mờ dần + trượt nhẹ; nhóm menu dọc cao
   dần; khối <details> mở dần; phần tử vừa thôi [hidden] hiện dần. Dùng display/height chuyển rời rạc (transition-behavior: allow-discrete,
   @starting-style, interpolate-size — Chrome 129+); trình duyệt cũ bỏ qua và vẫn bật tắt như trước. Tắt khi người dùng chọn giảm chuyển động. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  /* Chỉ chuyển động SAU khi trang đã vẽ khung đầu (kq-khung.js gắn .kq-da-nap): lúc nạp trang mọi thứ hiện ngay — nhóm menu đang mở,
     bảng nổi, <details> mở sẵn không «cao dần từ 0» (máy đo bắt nội dung bị cắt nếu đo giữa chừng). */
  .kq-da-nap .bang-noi { transition: opacity .16s ease, transform .16s ease, display .16s allow-discrete, overlay .16s allow-discrete; }
  .kq-da-nap .bang-noi[hidden] { opacity: 0; transform: translateY(-6px); }
  @starting-style { .kq-da-nap .bang-noi:not([hidden]) { opacity: 0; transform: translateY(-6px); } }
  .kq-da-nap .dh-con { overflow: hidden; transition: height .22s ease, opacity .22s ease, display .22s allow-discrete; }
  @starting-style { .kq-da-nap .dh-nhom-nut[aria-expanded="true"] + .dh-con { height: 0; opacity: 0; } }
  .kq-da-nap details::details-content { transition: height .22s ease, opacity .22s ease, content-visibility .22s allow-discrete; height: 0; opacity: 0; overflow: clip; }
  .kq-da-nap details[open]::details-content { height: auto; opacity: 1; }
  /* hiện dần: kq-khung.js gắn lớp này khi một phần tử vừa bỏ [hidden]. Không làm ẩn dần chung cho [hidden] vì nhiều chỗ (vừa khung, menu
     «Thêm») ẩn rồi đo kích thước ngay — trễ display sẽ làm đo sai. Không dùng @starting-style chung để trang không nhoè khi mới nạp. */
  .kq-vua-hien { animation: kq-hien-dan .2s ease both; }
  @keyframes kq-hien-dan { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ============================ PHỦ CHỜ (KQ.cho trong kq-khung.js) ============================ */
.kq-phu-cho {
  position: fixed; inset: 0; z-index: calc(var(--kq-z-goi-y) + 50); display: grid; place-content: center; justify-items: center; gap: var(--kq-k2, 10px);
  background: rgb(0 0 0 / .18); cursor: progress; backdrop-filter: blur(1px);
}
.kq-phu-cho-chu { font-weight: 600; color: var(--kq-chu-2); background: var(--kq-nen-noi); padding: 4px 12px; border-radius: 999px; box-shadow: var(--kq-bong-noi); }
.kq-vong-xoay {
  width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--kq-vien); border-top-color: var(--kq-chinh);
  animation: kq-xoay .8s linear infinite;
}
@keyframes kq-xoay { to { transform: rotate(360deg); } }
.kq-thanh-cho { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--kq-z-thong-bao) + 1); overflow: hidden; pointer-events: none; }
.kq-thanh-cho::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--kq-chinh); animation: kq-thanh-chay 1.1s ease-in-out infinite; }
@keyframes kq-thanh-chay { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: no-preference) {
  .kq-phu-cho { transition: opacity .15s ease, display .15s allow-discrete; }
  .kq-phu-cho[hidden] { opacity: 0; }
  @starting-style { .kq-phu-cho:not([hidden]) { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .kq-vong-xoay { animation-duration: 2.4s; } .kq-thanh-cho::before { animation: none; width: 100%; opacity: .6; } }

/* ============================ KHỐI GIỚI THIỆU XỔ (định nghĩa, cách hiểu chỉ số — mặc định gập) ============================ */
.kq-xo-gt > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 6px;
  border: 1px solid var(--kq-vien); border-radius: var(--kq-bo-1, 6px); color: var(--kq-chinh); font-weight: 600; background: var(--kq-nen-noi);
}
.kq-xo-gt > summary::-webkit-details-marker { display: none; }
.kq-xo-gt > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform var(--kq-nhanh, .15s); }
.kq-xo-gt[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
.kq-xo-gt > summary:hover { background: var(--kq-dong-di); }
.kq-xo-gt[open] > summary { margin-bottom: var(--kq-k2); }

/* Chỉ hiện khi in (dòng nguồn số chân trang…) — trên màn đã có tooltip ở chip trạng thái. */
.kq-than .chi-in { display: none !important; }
@media print { .kq-than .chi-in { display: block !important; } }