/* soanviec.css — cửa sổ Giao việc (TG-1, 30/09: khung tối giản; nền v4.35 hình m2).
   Mọi màu lấy token theme (navy / do / luxe); chỉ đỏ báo lỗi có dự phòng viết cứng.
   Bố cục một cột: thẻ loại ở thanh tiêu đề; thân = Tới → dòng ngữ cảnh → Tiêu đề → Nội dung → tệp → thanh viên → khối mở rộng;
   lớp nổi (gợi ý người, popover viên, ⓘ, menu ▾) đặt trong .sv-noi gắn khung, vị trí do ThanhCongCu.datNoi; chân một hàng. */

dialog.wide:has(> .sv-b) { max-width: 1168px; }
dialog.win.wide:has(> .sv-b) { width: min(680px, calc(100vw - 32px)); }
dialog.win.wide.win-sized:has(> .sv-b) { max-width: none; }

.dlg-b.sv-b { display: flex; flex-direction: column; padding: 0; gap: 0; position: relative; overflow: hidden; min-height: 0; max-height: 78vh; flex: 1 1 auto; container-type: inline-size; }
dialog.win .dlg-b.sv-b { overflow: hidden; max-height: none; }   /* cuộn ở .sv-cuon; lớp nổi .sv-noi đứng yên theo khung */
.sv-b [hidden], .sv-f [hidden] { display: none !important; }
.sv-b.sv-dang-gui { pointer-events: none; opacity: .72; }

.sv-cuon { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 18px 12px; display: flex; flex-direction: column; gap: 6px; }
.sv-noidung { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; position: relative; }
.sv-noidung.sv-keo { outline: 2px dashed var(--primary); outline-offset: 2px; background: var(--primary-soft); border-radius: var(--rad-sm, 9px); }

@media (max-width: 819px) {
  .sv-cuon { padding: 8px 12px 10px; }
}
@media (max-width: 560px) {
  .sv-buoc { grid-template-columns: minmax(0, 1fr) 26px; }
  .sv-buoc > select, .sv-buoc > input[type=date] { grid-column: 1 / 2; }
}

/* ── Thanh tiêu đề: thẻ loại + dòng phụ; tên cửa sổ (.dlg-t) ẩn thị giác, giữ cho dock / Phản ánh ──
   RV-1 (30/09): thẻ không co, không tràn (flex: none); thiếu chỗ thì xuống hàng — dòng phụ sang hàng riêng, chỉ rút gọn "…"
   khi một mình vẫn quá dài; thanh không bị ép thấp khi cửa sổ thấp (flex-shrink: 0) nên các hàng không đè xuống thân. */
.dlg-h.sv-h { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 44px; flex-shrink: 0; }
dialog.win .dlg-h.sv-h.win-drag { row-gap: 2px; }   /* RV2-1: app.css .dlg-h.win-drag gap 10px thắng; giữ hàng sát như hộp thoại */
.dlg-h.sv-h > .dlg-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dlg-h.sv-h > .dlg-sub { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sv-the { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; align-self: stretch; flex: none; max-width: 100%; }
/* Khổ ≤600px: mobile.css kẹp .dlg-h hai dòng (display: -webkit-box; overflow: hidden) làm cắt mất thẻ — thanh Giao việc giữ flex,
   không cắt; nhóm thẻ nằm cạnh biểu tượng, thẻ xuống hàng trong nhóm khi thiếu chỗ; dòng phụ luôn một hàng riêng. */
@media (max-width: 600px) {
  .dlg-h.sv-h { display: flex; flex-wrap: wrap; overflow: visible; -webkit-line-clamp: unset; }
  .sv-the { flex: 1 1 0; min-width: 0; }
  .dlg-h.sv-h > .dlg-sub { flex-basis: 100%; }
}

/* ── Loại (thẻ gạch chân) ─────────────────────────────────────────────── */
.sv-loai { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sv-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; padding: 10px 10px 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; line-height: 1.4; white-space: nowrap; }
.sv-tab:hover { color: var(--primary); }
.sv-tab.on { border-bottom-color: var(--primary); color: var(--primary); }
.sv-tab:disabled { opacity: .45; cursor: not-allowed; }
.sv-tab:focus-visible, .sv-tb-nut:focus-visible, .sv-chon-muc:focus-visible, .sv-chip-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Dòng ngữ cảnh: 2 lựa chọn Ban TGĐ, đường gửi, ô Giao trong, cảnh báo, câu báo ── */
.sv-ngucanh { display: flex; flex-direction: column; gap: 4px; }
.sv-chedo:empty, .sv-duong:empty { display: none; }
.sv-rt { display: inline-flex; border: 1px solid var(--line); border-radius: var(--rad-sm, 9px); overflow: hidden; max-width: 100%; flex-wrap: wrap; }
.sv-rt-nut { border: 0; background: var(--card, #fff); padding: 5px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; line-height: 1.4; }
.sv-rt-nut + .sv-rt-nut { border-left: 1px solid var(--line); }
.sv-rt-nut.on { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sv-rt-nut:disabled { opacity: .45; cursor: not-allowed; }
.sv-rt-nut:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sv-chip-khoa { padding-right: 9px; }

/* ── Dòng Tới / CC / Tiêu đề ─────────────────────────────────────────── */
.sv-dong { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--line); padding: 5px 0; flex-wrap: wrap; }
.dlg-b.sv-b label.sv-nhan { flex: 0 0 32px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; padding-top: 6px; margin: 0; }
.sv-o-nguoi { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }
.sv-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dlg-b.sv-b input.sv-tim:not([type=checkbox]):not([type=radio]) { flex: 1 1 140px; min-width: 120px; width: auto; border: 0; outline: none;
  padding: 5px 2px; font-size: var(--fs-sm); background: transparent; color: var(--ink); }
.dlg-b.sv-b input.sv-tieude:not([type=checkbox]):not([type=radio]) { flex: 0 0 auto; width: 100%; border: 0; border-bottom: 1px solid var(--line); outline: none; padding: 7px 2px;
  font-size: var(--fs-md); font-weight: 600; background: transparent; color: var(--ink); }
.dlg-b.sv-b input.sv-tim:focus-visible, .dlg-b.sv-b input.sv-tieude:focus-visible { box-shadow: inset 0 -2px 0 var(--primary); }
.sv-khoi-chon { display: inline-flex; align-items: center; gap: 6px; }
.sv-khoi-chon:empty { display: none; }
.dlg-b.sv-b .sv-khoi-chon label { margin: 0; display: inline; }
.dlg-b.sv-b .sv-khoi-chon select { width: auto; padding: 4px 6px; font-size: var(--fs-xs); }
.sv-lk-cc { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; padding: 6px 4px; }
.sv-lk-cc[aria-expanded="true"] { color: var(--ink-3); }
.sv-lk-cc:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 4px; }
.sv-i { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 4px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; flex: none; }
.sv-i svg { width: 15px; height: 15px; }
.sv-i:hover, .sv-i[aria-expanded="true"] { color: var(--primary); background: var(--primary-soft); }
.sv-i:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.sv-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--ink); border-radius: var(--rad-pill, 999px);
  padding: 2px 3px 2px 3px; font-size: var(--fs-xs); max-width: 100%; line-height: 1.4; }
.sv-chip small { color: var(--ink-3); font-size: 11px; }
.sv-chip-nho { padding-left: 8px; }
.sv-chip-ngoai { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 70%, var(--line)); }
.sv-av { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .2px; }
.sv-av-khoi { border-radius: 5px; }  /* v4.48: mục "Cả khối …" ở ô Tới — ô vuông bo góc, khác chấm tròn của người */
.sv-chip-khoi { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); }
.sv-chip-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 1px 5px; border-radius: 50%; }
.sv-chip-x:hover { color: var(--danger, var(--bad, #c0392b)); background: var(--card, #fff); }
.sv-vm { color: var(--ink-3); font-size: 11px; font-weight: 400; white-space: nowrap; }
.sv-vm-nhieu, .sv-chip small.sv-vm-nhieu, .sv-ds-muc small.sv-vm-nhieu { color: var(--ink-2); color: color-mix(in srgb, var(--warn) 45%, var(--ink)); font-weight: 700; }   /* E2E U5: thắng .sv-chip small; màu cảnh báo sẫm đủ tương phản chữ */

.sv-goiy { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.sv-goiy:empty { display: none; }
.sv-goiy b { color: var(--primary); }
.sv-goiy p { margin: 0 0 6px; }
.sv-dai { border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); background: var(--primary-soft); color: var(--ink); border-radius: var(--rad-sm, 9px);
  padding: 7px 10px; font-size: var(--fs-xs); display: flex; gap: 6px; align-items: flex-start; margin: 2px 0; line-height: 1.45; }
.sv-dai .ico, .sv-dai svg { flex: none; margin-top: 1px; color: var(--primary); }
.sv-dai > span { flex: 1 1 auto; min-width: 0; }  /* chữ (kể cả <b>) chảy liền một khối cạnh biểu tượng — không tách cột (E2E v4.48 L2b) */
.sv-dai-canh { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, var(--card, #fff)); }
.sv-dai-canh .ico, .sv-dai-canh svg { color: var(--warn); }

/* ── Lớp nổi gắn khung (gợi ý người, popover viên, ⓘ, menu ▾): vị trí do ThanhCongCu.datNoi ── */
.sv-noi { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.sv-noi > * { pointer-events: auto; position: absolute; left: 8px; top: 8px; }
.sv-noi .sv-ds, .sv-pop, .sv-menu { background: var(--card, #fff); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rad-sm, 9px);
  box-shadow: var(--ds-shadow-lift, 0 4px 16px rgba(16, 35, 47, .10)); overflow-y: auto; }
.sv-pop:focus, .sv-menu:focus, .sv-ds:focus { outline: none; }

/* ── Danh sách gợi ý người ───────────────────────────────────────────── */
.sv-ds { z-index: 30; width: 420px; max-height: 280px; padding: 4px 0; }
.sv-ds-nhom { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 6px 10px 3px; }
.sv-ds-muc { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); }
.sv-ds-muc small { color: var(--ink-3); margin-left: 2px; }
.sv-ds-muc.on, .sv-ds-muc:hover { background: var(--primary-soft); }
.sv-ds-toi { border-bottom: 1px solid var(--line); }
.sv-ds-rong { padding: 3px 10px 6px; font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Popover viên / ⓘ / menu ▾ ───────────────────────────────────────── */
.sv-pop { width: 320px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sv-pop > .sv-o { border: 0; padding: 0; background: transparent; }
.sv-menu { width: 220px; padding: 4px 0; display: flex; flex-direction: column; }
.sv-menu-muc { border: 0; background: transparent; text-align: left; padding: 8px 12px; font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.sv-menu-muc:hover, .sv-menu-muc:focus-visible { background: var(--primary-soft); outline: none; }

/* ── Soạn nội dung ───────────────────────────────────────────────────── */
.sv-tb { display: flex; gap: 4px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--line); }
.sv-tb-nut { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 6px; padding: 2px 9px; font-size: 11.5px; font-weight: 700;
  color: var(--ink-2); cursor: pointer; line-height: 1.5; }
.sv-tb-nut:hover { background: var(--primary-soft); border-color: var(--primary); }
.sv-ed-khung { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 66px; }
.sv-ed { flex: 1 1 auto; min-height: 66px; max-height: none; overflow-y: auto; font-size: var(--fs-sm); line-height: 1.55; padding: 6px 2px;
  outline: none; color: var(--ink); overflow-wrap: anywhere; }
.sv-ed:empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; }
.sv-ed:focus-visible { box-shadow: inset 0 -2px 0 var(--primary); }
.sv-ed p { margin: 0 0 4px; }
.sv-ed ul, .sv-ed ol { margin: 4px 0 4px 22px; }
.sv-ed blockquote { border-left: 3px solid var(--line); padding-left: 8px; color: var(--ink-2); }
/* Thanh đầy đủ chỉ gắn trên biểu mẫu desktop Giao việc. */
.sv-dd-mo { align-self: flex-start; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 0 14px;
  background: var(--card, #fff); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.sv-dd-mo[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.sv-dd-mo:focus-visible, .sv-tb-daydu .pcg-tb:focus-visible, .sv-tb-daydu .pcg-sel:focus-visible,
.sv-tb-daydu .sv-tb-nut:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sv-tb-daydu.pcg-ed-tb { background: var(--primary-soft); border: 1px solid var(--line); border-radius: 8px;
  gap: 4px; width: 100%; box-sizing: border-box; overflow: visible; }
.sv-tb-daydu .pcg-g { flex-wrap: wrap; }
.sv-tb-daydu .pcg-tb, .sv-tb-daydu .pcg-sel, .sv-tb-daydu .sv-tb-nut { min-width: 44px; min-height: 44px; }
.sv-tb-daydu .pcg-sel { max-width: none; }
.sv-tb-daydu .pcg-tbl-pop { z-index: 35; }
.sv-tb-daydu + .sv-ed-khung .sv-ed { overflow-x: auto; }
.sv-ed a { color: var(--link, var(--primary)); }
.sv-ds-at { width: 360px; }

/* ── Tệp ─────────────────────────────────────────────────────────────── */
.sv-tep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; position: relative; }
.sv-tep-ds { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sv-tep-ds:empty { display: none; }
.sv-tep-muc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 3px 3px 7px;
  background: var(--ds-surface-2, var(--primary-soft)); font-size: 11.5px; color: var(--ink); max-width: 100%; }
.sv-tep-loai { font-size: 9px; color: var(--primary-ink); background: var(--primary); border-radius: 3px; padding: 1px 4px; }
.dlg-b.sv-b input.sv-an-tep[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* ── Thanh viên + khối mở rộng (Bước / Việc phải xong trước / Nhắc lại) ── */
.sv-vien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sv-vien-tu, .sv-vien-tcc { display: contents; }
.sv-khoi-ds { display: flex; flex-direction: column; gap: 8px; }
.sv-khoi-ds:empty { display: none; }
.sv-khoi { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; background: var(--ds-surface-2, var(--primary-soft)); }
.sv-khoi-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
.sv-khoi-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 50%; }
.sv-khoi-x:hover { color: var(--danger, var(--bad, #c0392b)); background: var(--card, #fff); }
.sv-khoi-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sv-an-tt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Báo lỗi / thông báo ─────────────────────────────────────────────── */
.sv-loi { border: 1px solid var(--danger, var(--bad, #c0392b)); border-left-width: 4px; border-radius: var(--rad-sm, 9px); padding: 8px 10px;
  font-size: var(--fs-xs); color: var(--danger, var(--bad, #c0392b)); background: color-mix(in srgb, var(--danger, var(--bad, #c0392b)) 6%, var(--card, #fff)); line-height: 1.45; }
.sv-loi ul { margin: 4px 0 0 18px; }
.sv-thongbao { font-size: var(--fs-xs); color: var(--ink-2); background: var(--primary-soft); border-radius: var(--rad-sm, 9px); padding: 6px 10px; line-height: 1.45; }
.sv-b [aria-invalid="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, var(--bad, #c0392b)) 55%, transparent); border-radius: 4px; }

/* ── Ô chi tiết (trong popover viên và khối mở rộng) ──────────────────── */
.sv-o { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dlg-b.sv-b .sv-o-nhan { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin: 6px 0 0; display: block; }
.dlg-b.sv-b .sv-o > .sv-o-nhan:first-child, .dlg-b.sv-b .sv-o > div > .sv-o-nhan:first-child { margin-top: 0; }
.dlg-b.sv-b .sv-pop input:not([type=checkbox]):not([type=radio]), .dlg-b.sv-b .sv-pop select,
.dlg-b.sv-b .sv-khoi input:not([type=checkbox]):not([type=radio]), .dlg-b.sv-b .sv-khoi select,
.dlg-b.sv-b .sv-loivao select { padding: 5px 7px; font-size: var(--fs-xs); width: 100%; }
.sv-bb { color: var(--danger, var(--bad, #c0392b)); }
.sv-chon { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-chon-muc { border: 1px solid var(--line); background: var(--card, #fff); border-radius: var(--rad-pill, 999px); padding: 1px 9px; font-size: 11.5px;
  color: var(--ink-2); cursor: pointer; min-width: 28px; line-height: 1.6; }
.sv-chon-muc:hover { border-color: var(--primary); }
.sv-chon-muc.on { border-color: var(--primary); color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.sv-nho { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.sv-nho b { color: var(--ink-2); }
.sv-do { color: var(--danger, var(--bad, #c0392b)); font-weight: 600; }
.sv-uoc { font-size: 10.5px; font-weight: 700; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); border-radius: var(--rad-pill, 999px); padding: 0 6px; }
.sv-thang { display: flex; align-items: center; gap: 8px; }
.sv-thang > .sv-nho { width: 64px; flex: none; }
.sv-luat { margin: 0 0 2px 16px; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.dlg-b.sv-b label.sv-nhac-lai { font-size: 11.5px; color: var(--ink-2); font-weight: 600; margin: 4px 0 0; display: block; }
.sv-buoc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 116px 26px; gap: 4px; align-items: center; }
.sv-buoc-ghi { grid-column: 1 / -1; }
.dlg-b.sv-b button.sv-nut-nho { align-self: flex-start; padding: 3px 10px; font-size: var(--fs-xs); min-height: 0; }
.dlg-b.sv-b label.sv-mo-sua { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-weight: 400; cursor: pointer; }
.dlg-b.sv-b label.sv-mo-sua input[type=checkbox] { width: auto; flex: none; margin: 2px 0 0; }

/* ── Lối vào biểu mẫu Xin ý kiến – phê duyệt ─────────────────────────── */
.sv-loivao-o { display: flex; flex-direction: column; gap: 8px; max-width: 640px; padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* ── Chân cửa sổ: tóm tắt (tối đa 2 dòng) · ⓘ · Huỷ · [Gửi & soạn việc khác khi ghim] · nút chính tách ▾ ── */
.dlg-f.sv-f { align-items: center; flex-wrap: nowrap; gap: 8px; }
.dlg-f.sv-f.pcg-nav-foot { flex-wrap: wrap; }
.dlg-f.sv-f > button.sv-lui.pcg-nav-back { position: static; width: auto; min-width: 112px; height: auto; min-height: 44px; margin: 0 auto 0 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.sv-ghichu { margin-right: auto; font-size: 11.5px; color: var(--ink-3); flex: 1 1 280px; min-width: 0; line-height: 1.4; }
.sv-f .sv-ghichu { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sv-f .sv-ghichu b { color: var(--ink); }
.sv-chan-thieu { color: var(--danger, var(--bad, #c0392b)); font-weight: 600; }
.dlg-f.sv-f button.pri, .dlg-f.sv-f button[data-sv-act="gui-tiep"] { white-space: nowrap; }
.sv-tach { display: inline-flex; align-items: stretch; flex: none; }
.dlg-f.sv-f .sv-tach > button.pri { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dlg-f.sv-f .sv-tach > .sv-tach-mo { border: 0; border-left: 1px solid color-mix(in srgb, var(--primary-ink) 35%, var(--primary)); background: var(--primary); color: var(--primary-ink);
  border-radius: 0 var(--rad-sm, 9px) var(--rad-sm, 9px) 0; padding: 0 8px; cursor: pointer; display: inline-flex; align-items: center; min-height: 0; }
.dlg-f.sv-f .sv-tach > .sv-tach-mo svg { transform: rotate(90deg); width: 14px; height: 14px; }
.dlg-f.sv-f .sv-tach > .sv-tach-mo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dlg-f.sv-f .sv-tach > .sv-tach-mo:disabled { opacity: .6; cursor: not-allowed; }
/* Khung hẹp ≤600px: mobile.css cho mọi .dlg-f DÍNH ĐÁY (position: sticky) nhưng không có nền → phần thân đang cuộn lộ qua
   chữ ghi chú và nút, đè thanh định dạng / nhãn "Dự án" (E2E v4.48 L2a, có từ trước). Cho chân cửa sổ nền như thân cửa sổ,
   một đường bóng mảnh phía trên, bớt khoảng đệm; nút giữ cỡ chạm 44px của mobile.css. */
@media (max-width: 600px) {
  .dlg-f.sv-f { background: var(--card, #fff); position: sticky; bottom: 0; z-index: 2; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); gap: 6px 8px;
    box-shadow: 0 -8px 14px -12px rgba(15, 42, 74, .45); flex-wrap: wrap; }
  .dlg-f.sv-f .sv-ghichu { flex-basis: 100%; font-size: 11px; line-height: 1.35; }
}

/* Hợp nhất 1.3 — gửi lên cấp trên (chỉ nhãn, TGĐ Q7 = b): nhãn phụ "→ Gửi lên" ở gợi ý ô Tới và chip người phụ trách;
   dòng "Gửi lên — Nhờ hỗ trợ" + lối sang biểu mẫu Xin ý kiến – phê duyệt (nút dạng liên kết). */
.sv-gl { display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: var(--rad-pill, 999px); font-size: 11px; font-weight: 600; line-height: 1.55;
  color: var(--primary); background: var(--card, #fff); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line)); white-space: nowrap; vertical-align: 1px; }
.sv-ds-muc.on .sv-gl { background: var(--card, #fff); }
.sv-dai-gl .sv-lk { border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; margin: 0; }
.sv-dai-gl .sv-lk:hover { color: var(--ink); }
.sv-dai-gl .sv-lk:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* Hợp nhất 1.2 — Giao việc trên điện thoại (#mbApp; ui-soanviec.js gắn lớp .sv-dt vào hộp thoại #dlg). Hộp hỏi đóng/huỷ trong
   cửa sổ (.sv-hoi, không confirm()) nằm trong hộp thoại nên ở top layer, phủ toàn khung. */
.sv-hoi { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .42); }
.sv-hoi-k { width: 100%; max-width: 520px; box-sizing: border-box; background: var(--card, #fff); color: var(--ink); border-radius: 14px 14px 0 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 28px rgba(15, 42, 74, .28); font-size: 14px; line-height: 1.45; }
.sv-hoi-k b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.sv-hoi-k p { margin: 0; color: var(--ink-2); }
.sv-hoi-n { display: flex; gap: 10px; margin-top: 14px; }
.sv-hoi-n button { flex: 1 1 0; min-height: 44px; }
/* Khổ điện thoại: hộp thoại cao đúng vùng nhìn thấy (--sv-vvh/--sv-vvt theo visualViewport — bàn phím ảo mở thì co lại) ⇒ chân có
   nút Gửi luôn nằm ngay trên bàn phím; thân cuộn ở .sv-cuon; nút Quay lại 44px đầu thanh tiêu đề; mục gợi ý Tới/CC cao ≥ 44px. */
/* L5 (sửa v1): nút Quay lại gắn ở MỌI khổ của chế độ điện thoại (xoay ngang, máy tính bảng) ⇒ kiểu nằm ngoài khối 480px. */
dialog.sv-dt .sv-lui { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
dialog.sv-dt .sv-lui:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (min-width: 820px) {
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f .sv-chan-thieu {
    color: color-mix(in srgb, var(--danger) 88%, black);
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-b.sv-dang-gui {
    opacity: 1;
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-h > .dlg-sub {
    color: var(--ink-2);
  }
  body:not(.mb-app) dialog:not(.sv-dt):has(> .sv-b) > .sv-h {
    background: var(--card);
    box-shadow: none;
    padding: 12px 16px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-cuon {
    padding: 16px;
    gap: 8px;
    background: var(--card);
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-noidung {
    gap: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-dong {
    padding: 8px 0;
    gap: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b label.sv-nhan,
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-o-nhan {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-2);
  }
  body:not(.mb-app) dialog:not(.sv-dt) .dlg-b.sv-b input.sv-tim:not([type=checkbox]):not([type=radio]),
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b input.sv-tieude,
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-khoi-chon select,
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-ed {
    font-size: 14px;
    line-height: 1.5;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-ngucanh {
    gap: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-ed-khung {
    min-height: 88px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-ed {
    min-height: 88px;
    padding: 12px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-ed:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary);
    border-radius: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-vien {
    padding-top: 12px;
    gap: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-o,
  body:not(.mb-app) dialog:not(.sv-dt) .sv-b .sv-khoi {
    border-radius: 8px;
    padding: 12px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f {
    padding: 12px 28px 16px 16px;
    background: var(--card);
    gap: 8px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f .sv-ghichu {
    flex-basis: 160px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f button,
  body:not(.mb-app) dialog:not(.sv-dt) > .dlg-f.sv-f .sv-tach > .sv-tach-mo,
  body:not(.mb-app) dialog:not(.sv-dt) .sv-i {
    min-height: 44px;
  }
  body:not(.mb-app) dialog:not(.sv-dt) .sv-i,
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f .sv-tach-mo {
    min-width: 44px;
    justify-content: center;
  }
  body:not(.mb-app) dialog:not(.sv-dt) > .sv-f button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}
@media (max-width: 480px) {
  dialog.sv-dt[open] { display: flex; flex-direction: column; position: fixed; inset: 0 auto auto 0; top: var(--sv-vvt, 0px); width: 100%; max-width: 100%;
    height: var(--sv-vvh, 100%); max-height: var(--sv-vvh, 100%); margin: 0; padding: 0; border-radius: 0; overflow: hidden; }
  dialog.sv-dt > .dlg-h.sv-h { flex: 0 0 auto; padding: 6px 10px 6px 6px; }
  dialog.sv-dt > .dlg-b.sv-b { flex: 1 1 auto; max-height: none; min-height: 0; padding: 0; }
  dialog.sv-dt > .dlg-f.sv-f { position: static; flex: 0 0 auto; }
  dialog.sv-dt .sv-f .sv-ghichu { -webkit-line-clamp: 1; line-clamp: 1; }
  dialog.sv-dt .sv-ds-muc { min-height: 44px; }
  dialog.sv-dt .sv-cuon { overflow-x: hidden; }
}

/* PA-261028-001 KH-1: bố cục bước theo M1, dùng màu trạng thái chung. */
.svb-buoc.sv-buoc { grid-template-columns: minmax(0, 1fr) 116px 26px; padding: 6px 0; border-top: 1px solid var(--line); }
.svb-ten { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.svb-ten input, .svb-buoc select { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svb-late { color: var(--st-late-ink, var(--st-od)); background: var(--st-late-bg, color-mix(in srgb, var(--st-od) 12%, transparent)); }
.svb-soon { color: var(--st-soon-ink, var(--st-todo)); background: var(--st-soon-bg, color-mix(in srgb, var(--st-todo) 12%, transparent)); }
.svb-wait { color: var(--st-wait-ink, var(--st-todo)); background: var(--st-wait-bg, color-mix(in srgb, var(--st-todo) 12%, transparent)); border-radius: var(--rad-sm, 9px); padding: 0 4px; }
.svb-track { color: var(--st-track-ink, var(--st-doing)); background: var(--st-track-bg, color-mix(in srgb, var(--st-doing) 12%, transparent)); border-radius: var(--rad-sm, 9px); padding: 0 4px; }
.pill.svb-wait, .pill.svb-track { padding: 2px 8px; border-radius: 10px; }
@media (max-width: 560px) {
  .svb-buoc.sv-buoc { grid-template-columns: minmax(0, 1fr) 116px 26px; }
  .svb-buoc.sv-buoc > select, .svb-buoc.sv-buoc > input[type=date] { grid-column: auto; }
}

/* KH-1 sửa 2: màu ô hạn thắng kiểu ô nhập chung của form Sửa việc. */
.hdform input.svb-late:not([type=checkbox]):not([type=radio]) { color: var(--st-late-ink, var(--st-od)); background: var(--st-late-bg, color-mix(in srgb, var(--st-od) 12%, transparent)); }
.hdform input.svb-soon:not([type=checkbox]):not([type=radio]) { color: var(--st-soon-ink, var(--st-todo)); background: var(--st-soon-bg, color-mix(in srgb, var(--st-todo) 12%, transparent)); }
.svb-bang-wrap { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; container: svb-buoc / inline-size; }
.svb-bang { table-layout: fixed; width: 100%; max-width: 100%; box-sizing: border-box; }
.svb-bang th, .svb-bang td { min-width: 0; box-sizing: border-box; padding: 6px 5px; overflow-wrap: anywhere; white-space: normal; }
.svb-bang th:nth-child(1) { width: 28px; }
.svb-bang th:nth-child(2) { width: 17%; }
.svb-bang th:nth-child(3) { width: 70px; }
.svb-bang th:nth-child(4) { width: 11%; }
.svb-bang th:nth-child(6) { width: 126px; }
.svb-bang th:nth-child(7) { width: 56px; }
.svb-bang th:nth-child(8) { width: 90px; }
.svb-bang th:nth-child(9) { width: 36px; }
.svb-bang input, .svb-bang select, .svb-bang textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.hdform .svb-bang input:not([type=checkbox]):not([type=radio]), .hdform .svb-bang select, .hdform .svb-bang textarea { padding: 6px 5px; }
.svb-bang input, .svb-bang select { text-overflow: ellipsis; }
.svb-bang .pctbar { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.svb-bang .pill { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
.svb-bang td[data-svb-nhan=""] button { max-width: 100%; padding: 4px; }
.svb-npt { display: none; }
@media (max-width: 600px) {
  .svb-npt { display: inline-block; margin-right: 6px; white-space: normal; overflow-wrap: anywhere; }
}
@container svb-buoc (max-width: 800px) {
  .svb-bang { display: block; }
  .svb-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .svb-bang .svb-nhom { display: block; width: 100%; min-width: 0; box-sizing: border-box; border-top: 1px solid var(--line); }
  .svb-bang .svb-dong { display: grid; width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: 28px minmax(0, 1.2fr) 126px 56px minmax(0, 1fr) 36px; }
  .svb-bang .svb-dong > td { display: block; width: auto; min-width: 0; border: 0; }
  .svb-bang .svb-dong > td::before { content: attr(data-svb-nhan); display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--ink-2); }
  .svb-bang .svb-dong > td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .svb-bang .svb-dong > td:nth-child(1)::before, .svb-bang .svb-dong > td:nth-child(9)::before { display: none; }
  .svb-bang .svb-dong > td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .svb-bang .svb-dong > td:nth-child(3) { grid-column: 3; grid-row: 1; }
  .svb-bang .svb-dong > td:nth-child(4) { grid-column: 4 / 6; grid-row: 1; }
  .svb-bang .svb-dong > td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .svb-bang .svb-dong > td:nth-child(5):has(label:not(:empty))::before { display: none; }
  .svb-bang .svb-dong > td:nth-child(6) { grid-column: 3; grid-row: 2; }
  .svb-bang .svb-dong > td:nth-child(7) { grid-column: 4; grid-row: 2; }
  .svb-bang .svb-dong > td:nth-child(8) { grid-column: 5; grid-row: 2; }
  .svb-bang .svb-dong > td:nth-child(9) { grid-column: 6; grid-row: 1 / 3; }
  .svb-bang .bw-hd-row, .svb-bang .bw-hd-row > td { display: block; width: 100%; min-width: 0; box-sizing: border-box; border: 0; }
  .svb-bang .bw-hd-row > td:first-child { display: none; }
}
@container svb-buoc (max-width: 560px) {
  .svb-bang .svb-dong { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .svb-bang .svb-dong > td:nth-child(1) { grid-column: 1; grid-row: 1 / 6; }
  .svb-bang .svb-dong > td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .svb-bang .svb-dong > td:nth-child(3) { grid-column: 2; grid-row: 3; }
  .svb-bang .svb-dong > td:nth-child(4) { grid-column: 3; grid-row: 3; }
  .svb-bang .svb-dong > td:nth-child(5) { grid-column: 2 / 4; grid-row: 2; }
  .svb-bang .svb-dong > td:nth-child(6) { grid-column: 2; grid-row: 4; }
  .svb-bang .svb-dong > td:nth-child(7) { grid-column: 3; grid-row: 4; }
  .svb-bang .svb-dong > td:nth-child(8) { grid-column: 2 / 4; grid-row: 5; }
  .svb-bang .svb-dong > td:nth-child(9) { grid-column: 4; grid-row: 1; align-self: start; }
  .svb-bang .pill { display: inline-block; max-width: 100%; vertical-align: top; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* PA-261030-001 v3 — genuine step cards; all bw_* fields remain mounted. */
.svb-cards { min-width:0; }
.svb-step-card, .svb-ph-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:12px; background:#fff; }
.svb-step-card > summary, .svb-ph-card > summary { display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:64px; list-style:none; cursor:pointer; }
.svb-step-card > summary::-webkit-details-marker, .svb-ph-card > summary::-webkit-details-marker { display:none; }
.svb-step-card[open] > summary, .svb-ph-card[open] > summary { background:var(--primary-soft); border-bottom:1px solid var(--line); }
.svb-step-index { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--line); border-radius:50%; font-size:12px; color:var(--primary); background:var(--bg); }
.svb-step-summary { flex:1; min-width:0; }
.svb-step-summary > b { display:block; font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
.svb-step-summary > span { display:block; color:var(--ink-2); font-size:13px; margin-top:3px; }
.svb-step-chevron { color:var(--primary); font-size:18px; flex-shrink:0; }
.svb-step-card[open] > summary .svb-step-chevron, .svb-ph-card[open] > summary .svb-step-chevron { transform:rotate(180deg); }
.svb-card-body { padding:18px; min-width:0; }
.svb-card-body .field { min-width:0; margin:0; }
.svb-card-body > .field + .field { margin-top:16px; }
.svb-card-body label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; }
.svb-name-label:has(.svb-required-label:not(:empty)) .svb-name-plain { display:none; }
.svb-card-body input, .svb-card-body select, .svb-card-body textarea { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.hdform .svb-card-body input:not([type=checkbox]):not([type=radio]), .hdform .svb-card-body select, .hdform .svb-card-body textarea { font-size:16px; min-height:44px; padding:10px 12px; }
.hdform .svb-card-body .svb-step-title { font-size:16px; font-weight:700; line-height:1.5; min-height:66px; resize:vertical; }
.hdform .svb-card-body .svb-step-hd { font-size:16px; line-height:1.4; padding:8px 12px; height:64px; min-height:64px; resize:vertical; }
.svb-hd-tools { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:5px; }
.svb-hd-tools > .hint { font-size:12px; }
.svb-hd-tools > .svb-hd-toggle { min-height:44px; min-width:44px; white-space:nowrap; border:0; padding:8px 0 8px 10px; color:var(--primary); font-size:13px; }
.svb-hd-cue { margin:0; color:var(--primary); }
.svb-step-meta { display:grid; grid-template-columns:minmax(200px,1.7fr) minmax(160px,1fr) minmax(100px,.65fr); gap:18px; margin-top:18px; }
.svb-step-meta .pctbar { width:100%; max-width:100%; min-width:0; }
.svb-step-extra { border-top:1px solid var(--line); margin-top:18px; }
.svb-step-extra > summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--primary); font-size:13px; font-weight:650; }
.svb-extra-grid, .svb-ph-meta { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.svb-step-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:16px; padding-top:12px; }
.svb-step-actions button { min-height:44px; min-width:44px; color:var(--st-late-ink); }
.svb-step-actions select { max-width:260px; }
.svb-ph-content { white-space:normal; overflow-wrap:anywhere; font-size:16px; line-height:1.7; }
.svb-ph-meta { margin:16px 0; }.svb-ph-meta dt { font-size:12px; color:var(--ink-2); }.svb-ph-meta dd { margin:4px 0 0; overflow-wrap:anywhere; }
.svb-done { color:var(--st-done-ink); background:var(--st-done-bg); }
@media(max-width:760px) {
  .svb-step-card > summary, .svb-ph-card > summary { padding:13px 12px; gap:9px; flex-wrap:wrap; position:relative; }
  .svb-step-summary { flex-basis:calc(100% - 65px); padding-right:16px; }
  .svb-step-card > summary > .pill, .svb-ph-card > summary > .pill { margin-left:37px; }
  .svb-step-chevron { position:absolute; right:12px; top:16px; }
  .svb-card-body { padding:15px 12px; }
  .svb-step-meta, .svb-extra-grid, .svb-ph-meta { grid-template-columns:1fr; gap:16px; }
  .svb-hd-tools { gap:6px; }.svb-hd-tools > .hint { font-size:11px; }.svb-hd-tools > .svb-hd-toggle { font-size:12px; }
  .svb-step-actions { align-items:flex-start; flex-wrap:wrap; }.svb-step-actions button, .svb-step-actions select { width:100%; max-width:none; }
}

/* Override the desktop task-form field rule only inside the approved step cards. */
.task-form-body #f_buoc_box .svb-cards .svb-card-body .field :is(input, select, textarea) { font-size:16px; }