/* ============================================================
   DANH MỤC CHUNG — ND-1 (js/danhmuc.js). CHỈ lớp .dm-* (khối lệnh K01). Màu lấy từ token chung sẵn có:
   để-bàn dùng --primary/--ink/--line/--warn/--danger (app.css :root + theme); điện thoại (#mbApp) dùng --msurf/--mink/--mbd/
   --mtag-* (mobile.css) ⇒ theme navy trên điện thoại là nền tối. Biến --dm-* chỉ ánh xạ lại token, không thêm màu mới.
   ============================================================ */
.dm-o, .dm-bo, .dm-hsl, .dm-the-b, .dm-lk, .dm-chip, .dm-loi, .dm-mat, .dm-chu {
  --dm-surf: #fff; --dm-surf2: var(--grey, #f4f4f4); --dm-ink: var(--ink, #17232f); --dm-ink2: var(--ink-2, #3b4a58);
  --dm-sub: var(--ink-3, #6b7a88); --dm-bd: var(--line, #ddd); --dm-acc: var(--primary, #1F4E79); --dm-acc-nen: var(--primary-soft, #eef3f8);
  --dm-vang-nen: color-mix(in srgb, var(--warn, #e6a700) 13%, #fff); --dm-vang-vien: color-mix(in srgb, var(--warn, #e6a700) 55%, #fff);
  --dm-vang-chu: color-mix(in srgb, var(--warn, #e6a700) 55%, #000); --dm-do: var(--danger, #EC1F27);
  --dm-xam-nen: var(--grey, #f4f4f4); --dm-bong: 0 12px 32px rgba(15, 23, 42, .18);
}
/* Sheet và màn luồng của điện thoại gắn vào body (ngoài #mbApp, mobile.css định nghĩa --m* cho cả hai) dùng cùng bảng màu (KHB-10). */
#mbApp .dm-o, #mbApp .dm-bo, #mbApp .dm-hsl, #mbApp .dm-lk, #mbApp .dm-chip, #mbApp .dm-loi, #mbApp .dm-mat, #mbApp .dm-chu,
.mb-sheet-wrap .dm-o, .mb-sheet-wrap .dm-bo, .mb-sheet-wrap .dm-hsl, .mb-sheet-wrap .dm-lk, .mb-sheet-wrap .dm-chip, .mb-sheet-wrap .dm-loi, .mb-sheet-wrap .dm-mat, .mb-sheet-wrap .dm-chu,
.mbhv-wrap .dm-o, .mbhv-wrap .dm-bo, .mbhv-wrap .dm-hsl, .mbhv-wrap .dm-lk, .mbhv-wrap .dm-chip, .mbhv-wrap .dm-loi, .mbhv-wrap .dm-mat, .mbhv-wrap .dm-chu {
  --dm-surf: var(--msurf); --dm-surf2: var(--msurf2); --dm-ink: var(--mink); --dm-ink2: var(--mink); --dm-sub: var(--msub);
  --dm-bd: var(--mbd); --dm-acc: var(--mbrand); --dm-acc-nen: var(--mtag-blue); --dm-vang-nen: var(--mtag-amber);
  --dm-vang-vien: var(--mwarn); --dm-vang-chu: var(--mtag-amber-t); --dm-do: var(--mred); --dm-xam-nen: var(--mtag-grey);
  --dm-bong: 0 12px 32px rgba(0, 0, 0, .35);
}

/* ---------- Ô chọn ---------- */
.dm-o { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 10px; box-sizing: border-box;
  border: 1px solid var(--dm-bd); border-radius: 8px; background: var(--dm-surf); color: var(--dm-ink); flex-wrap: wrap; max-width: 100%; }
.dm-o-gt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-o-ten { font-weight: 600; font-size: var(--fs-md, 14px); line-height: 1.35; overflow-wrap: anywhere; }
.dm-o-ten .dm-lk { color: inherit; }
.dm-o-phu { font-size: var(--fs-xs, 12px); color: var(--dm-sub); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dm-ma { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--dm-acc); font-weight: 600; letter-spacing: .01em; }
.dm-o-doi, .dm-o-trong, .dm-o-thulai, .dm-gy, .dm-hsl-thulai { cursor: pointer; font: inherit; font-size: var(--fs-sm, 13px); border-radius: 6px; }
.dm-o-doi { flex: 0 0 auto; padding: 4px 12px; border: 1px solid var(--dm-bd); background: var(--dm-surf); color: var(--dm-acc); font-weight: 600; }
.dm-o-doi:hover, .dm-o-trong:hover { background: var(--dm-acc-nen); }
.dm-o-trong { flex: 1 1 auto; text-align: left; padding: 4px 2px; border: 0; background: none; color: var(--dm-sub); }
.dm-o-x, .dm-chip-x, .dm-bo-xoatim, .dm-bo-dong { flex: 0 0 auto; cursor: pointer; border: 0; background: none; color: var(--dm-sub);
  font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; padding: 0; }
.dm-o-x:hover, .dm-chip-x:hover, .dm-bo-xoatim:hover, .dm-bo-dong:hover { background: var(--dm-xam-nen); color: var(--dm-do); }
.dm-o-rong { color: var(--dm-sub); }
.dm-o-khoa { background: var(--dm-surf2); }
.dm-dang { color: var(--dm-sub); font-style: italic; font-weight: 400; }
.dm-o-loitai { color: var(--dm-do); font-weight: 400; font-size: var(--fs-sm, 13px); }
.dm-o-thulai, .dm-hsl-thulai { border: 1px solid var(--dm-bd); background: var(--dm-surf); color: var(--dm-acc); padding: 2px 10px; }
/* mã không còn (xám, không bấm) */
.dm-o.dm-tt-mat { background: var(--dm-xam-nen); border-style: dashed; }
.dm-mat { color: var(--dm-sub); font-weight: 500; }
.dm-mat .dm-ma { color: var(--dm-sub); }
/* chữ cũ chưa ghép (vàng, không bấm) */
.dm-o.dm-tt-chu { background: var(--dm-vang-nen); border-color: var(--dm-vang-vien); }
.dm-o-cu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dm-chu { color: var(--dm-ink2); font-style: italic; cursor: default; }
q.dm-chu { quotes: "«" "»"; font-weight: 500; }
.dm-goiy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm, 13px); color: var(--dm-sub); margin-top: 2px; }
.dm-goiy-nhan { color: var(--dm-vang-chu); font-weight: 600; }
.dm-gy { border: 1px solid var(--dm-vang-vien); background: var(--dm-surf); color: var(--dm-ink); padding: 3px 10px; display: inline-flex; gap: 6px; align-items: baseline; }
.dm-gy:hover { background: var(--dm-acc-nen); border-color: var(--dm-acc); }
.dm-gy-ten { font-weight: 600; }
.dm-gy-pt { color: var(--dm-sub); font-size: var(--fs-xs, 12px); }
/* nhiều mã: chip, × riêng */
.dm-o-chips { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dm-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 10px; border-radius: 999px;
  background: var(--dm-acc-nen); color: var(--dm-ink); font-size: var(--fs-sm, 13px); border: 1px solid transparent; }
.dm-chip .dm-lk { color: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-chip.dm-tt-mat { background: var(--dm-xam-nen); border-style: dashed; border-color: var(--dm-bd); color: var(--dm-sub); }
.dm-chip.dm-tt-chu { background: var(--dm-vang-nen); border-color: var(--dm-vang-vien); }
.dm-chip-x { width: 24px; height: 24px; font-size: 16px; border-radius: 999px; }
.dm-o-toida { font-size: var(--fs-xs, 12px); color: var(--dm-sub); }
/* chế độ lọc (thanh công cụ): nút gọn «Tất cả …» */
.dm-o.dm-o-loc { padding: 0; min-height: 34px; border: 0; background: none; display: inline-flex; width: auto; }
.dm-o-locnut { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; cursor: pointer; font: inherit;
  font-size: var(--fs-sm, 13px); border: 1px solid var(--dm-bd); border-radius: 8px; background: var(--dm-surf); color: var(--dm-ink); max-width: 320px; }
.dm-o-locten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dm-o-mui { color: var(--dm-sub); font-size: 11px; }
/* lỗi máy chủ đúng ô (DM.baoLoi) */
.dm-co-loi { border-color: var(--dm-do) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--dm-do) 18%, transparent); }
.dm-loi { flex: 1 0 100%; color: var(--dm-do); font-size: var(--fs-sm, 13px); font-weight: 600; margin-top: 2px; }
/* liên kết mã */
.dm-lk { color: var(--link, var(--dm-acc)); text-decoration: none; cursor: pointer; border-bottom: 1px dotted currentColor; }
.dm-lk:hover { text-decoration: underline; border-bottom-color: transparent; }
.dm-lk-an { color: var(--dm-sub); }
.dm-lk-cho { color: var(--dm-sub); }

/* ---------- Bộ chọn (popover, lớp trên cùng) ---------- */
.dm-bo { display: none; position: fixed; inset: auto; margin: 0; padding: 0; box-sizing: border-box; z-index: 2147483000;
  flex-direction: column; border: 1px solid var(--dm-bd); border-radius: 12px; background: var(--dm-surf); color: var(--dm-ink);
  box-shadow: var(--dm-bong); overflow: hidden; min-width: 300px; max-height: 560px; font-size: var(--fs-md, 14px); }
.dm-bo:popover-open { display: flex; }
.dm-bo.dm-bo-noi { display: flex; }
.dm-bo-dau { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px 16px; }
.dm-bo-tieude { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-bo-tieude b { font-size: var(--fs-lg, 16px); }
.dm-bo-dem { color: var(--dm-sub); font-size: var(--fs-xs, 12px); }
.dm-bo-lui { border: 0; background: none; color: var(--dm-acc); font-size: 28px; line-height: 1; width: 40px; height: 40px; cursor: pointer; padding: 0; }
.dm-bo-tim { position: relative; padding: 4px 12px 8px; }
.dm-bo-o { width: 100%; box-sizing: border-box; height: 38px; padding: 6px 34px 6px 12px; border: 1px solid var(--dm-bd); border-radius: 8px;
  background: var(--dm-surf); color: var(--dm-ink); font: inherit; }
.dm-bo-o:focus { outline: 2px solid var(--dm-acc); outline-offset: -1px; }
.dm-bo-xoatim { position: absolute; right: 18px; top: 9px; }
/* Chỉ MỘT dấu × trong ô tìm: ẩn nút xoá có sẵn của trình duyệt (type=search), giữ nút .dm-bo-xoatim (KHB-02). */
.dm-bo-o::-webkit-search-cancel-button, .dm-bo-o::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.dm-bo-ds { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 8px; min-height: 80px; }
.dm-nhom { margin: 2px 0 6px; }
.dm-nhom-dau { padding: 8px 10px 4px; font-size: var(--fs-xs, 12px); font-weight: 700; color: var(--dm-sub); cursor: default; }
details.dm-nhom-an > summary.dm-nhom-dau { cursor: pointer; list-style: revert; }
.dm-dem { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--dm-xam-nen); color: var(--dm-sub);
  font-size: 11px; font-weight: 600; text-align: center; text-transform: none; }
.dm-muc { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.dm-muc:hover, .dm-muc.dm-muc-hd { background: var(--dm-acc-nen); }
.dm-muc.dm-muc-hd { outline: 1px solid var(--dm-acc); outline-offset: -1px; }
.dm-muc.dm-muc-tat { cursor: not-allowed; opacity: .55; }
.dm-muc.dm-muc-tat:hover { background: none; }
.dm-muc.dm-muc-con { padding-left: 30px; }
.dm-muc-dau { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--dm-bd); border-radius: 50%; box-sizing: border-box; }
.dm-muc-dau.dm-muc-dau-o { border-radius: 4px; }
.dm-muc.dm-muc-chon .dm-muc-dau { border-color: var(--dm-acc); background: radial-gradient(circle, var(--dm-acc) 0 4px, transparent 5px); }
.dm-muc.dm-muc-chon .dm-muc-dau.dm-muc-dau-o { background: var(--dm-acc); box-shadow: inset 0 0 0 2px var(--dm-surf); }
.dm-muc-nd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dm-muc-ten { font-weight: 600; overflow-wrap: anywhere; }
.dm-muc-phu { font-size: var(--fs-xs, 12px); color: var(--dm-sub); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dm-muc mark { background: var(--dm-vang-nen); color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--dm-vang-vien); }
.dm-muc.dm-muc-tatca .dm-muc-ten { font-weight: 700; }
.dm-bo-trong, .dm-bo-them { padding: 16px; color: var(--dm-sub); text-align: center; font-size: var(--fs-sm, 13px); }
.dm-bo-loi { color: var(--dm-do); }
.dm-bo-chan { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--dm-bd); background: var(--dm-surf2); }
.dm-bo-phim, .dm-bo-dachon { flex: 1; min-width: 0; color: var(--dm-sub); font-size: var(--fs-xs, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-bo-xong { min-width: 88px; }
/* Điện thoại / màn hẹp: phủ toàn màn, «Xong» cố định đáy (không cuộn theo danh sách) */
.dm-bo.dm-bo-toan { inset: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; min-width: 0;
  border: 0; border-radius: 0; box-shadow: none; }
.dm-bo-toan .dm-bo-dau { padding: 8px 12px 4px 4px; border-bottom: 1px solid var(--dm-bd); }
.dm-bo-toan .dm-bo-o { height: 44px; font-size: 16px; }
.dm-bo-toan .dm-bo-xoatim { top: 12px; width: 36px; height: 36px; }
.dm-bo-toan .dm-muc { padding: 12px 10px; min-height: 48px; box-sizing: border-box; }
.dm-bo-toan .dm-muc.dm-muc-con { padding-left: 30px; }
.dm-bo-toan .dm-bo-chan { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.dm-bo-toan .dm-bo-chan button { min-height: 44px; }
.dm-bo-toan .dm-bo-xong { min-width: 110px; font-size: 16px; }
.dm-bo::backdrop { background: transparent; }
@media (max-width: 760px) {
  .dm-o { min-height: 44px; }
  .dm-o-doi { min-height: 36px; }
  .dm-o-x { width: 36px; height: 36px; }
  .dm-chip-x { width: 30px; height: 30px; }
}

/* ---------- «Hồ sơ liên quan» ---------- */
.dm-hsl { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--dm-bd); border-radius: 10px; background: var(--dm-surf); color: var(--dm-ink); }
.dm-hsl:empty { display: none; }
.dm-hsl-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dm-hsl-tieude { font-weight: 700; font-size: var(--fs-md, 14px); }
.dm-hsl-rong { color: var(--dm-sub); font-size: var(--fs-sm, 13px); }
.dm-hsl-nhom + .dm-hsl-nhom { margin-top: 8px; }
.dm-hsl-nhom-dau { font-size: var(--fs-xs, 12px); font-weight: 700; color: var(--dm-sub); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.dm-hsl-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-hsl-dong { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--dm-ink); font: inherit; font-size: var(--fs-sm, 13px); cursor: pointer; }
.dm-hsl-dong:hover:not(:disabled) { background: var(--dm-acc-nen); }
.dm-hsl-dong:disabled { cursor: default; }
.dm-hsl-ten { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dm-hsl-them { font-size: var(--fs-xs, 12px); color: var(--dm-sub); padding: 2px 8px; }
.dm-hsl-loi { margin-top: 6px; color: var(--dm-do); font-size: var(--fs-sm, 13px); }
.dm-hsl.dm-hsl-mb { margin: 12px 0; border-radius: 14px; }
#mbApp .dm-hsl-dong { min-height: 40px; }

/* ---------- Thẻ đối tượng (DM.mo trong biểu mẫu ⇒ cửa sổ nổi riêng) ---------- */
.dm-the { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-md, 14px); }
.dm-the dt { color: var(--dm-sub); }
.dm-the dd { margin: 0; overflow-wrap: anywhere; }
.dm-the-b { min-width: min(520px, 86vw); }