/* Hộp việc v4.35 (SPEC §4.2, hình m1) — js/ui-hopviec.js.
   Màu lấy token theme hiện hành (--primary, --primary-soft, --line, --ink, --ink-2, --ink-3, --bg, --danger,
   --warn, --success), tự đúng cả 3 giao diện navy / do / luxe. Cỡ chữ theo --fs-*.
   Bố cục: CSS grid 3 ngăn + container query theo bề rộng khu giữa (không theo khung nhìn).
   Lưu ý: không viết ký tự kết thúc chú thích bên trong chú thích. */

:root {
  --hv-card: var(--card, var(--bg));
  --hv-bd: var(--line, var(--bd));
  --hv-soft: var(--primary-soft);
  --hv-bad: var(--bad, var(--danger));
}

/* Tab Hộp việc chiếm trọn chiều cao còn lại: bỏ lề dưới + chân trang (body.hv-tab do ui-shell.js đặt). */
body.hv-tab #main { padding-top: 10px; padding-bottom: 0; }
body.hv-tab > footer { display: none; }

.hv {
  container-type: inline-size;
  container-name: hv;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - var(--hv-top, 120px) - var(--win-an, 0px) - 6px);
  min-height: 500px;   /* đủ chỗ cho thẻ gọn + lịch sử 240px + ô soạn; cửa sổ thấp hơn thì trang cuộn, không cắt nút Gửi */
  color: var(--ink);
  font-size: var(--fs-sm);
}
.hv-dang { padding: 24px; color: var(--ink-3); }
.hv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dải hướng dẫn lần đầu (đóng được) */
.hv-guide {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 10px; border-radius: 8px; font-size: var(--fs-sm); color: var(--ink-2);
  background: var(--hv-soft); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hv-bd));
}
.hv-guide[hidden] { display: none; }
.hv-guide-ic { color: var(--primary); display: inline-flex; }
.hv-guide-t { flex: 1; min-width: 0; }
.hv-guide .hv-x { padding: 3px 6px; }
@container hv (min-width: 760px) {
  .hv-guide { gap: 7px; padding: 5px 10px; line-height: 1.3; }
}

/* Lưới 3 ngăn: thư mục | danh sách | khung đọc (mỗi ngăn cuộn độc lập).
   TG-2 (KE-HOACH §7): độ rộng hai ngăn đầu theo biến --hv-c1 / --hv-c2 do vạch chia đặt (nhớ theo tài khoản); MỘT nguồn giới
   hạn: cột 1 từ 168 đến 360px (biểu tượng: 56px), cột 2 từ 300px và chừa khung đọc tối thiểu 420px khi đủ chỗ. */
.hv { position: relative; }
.hv-grid {
  --hv-cot1: clamp(168px, var(--hv-c1, 208px), 360px);
  --hv-cot4: 0px;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--hv-cot1) clamp(300px, var(--hv-c2, 380px), max(300px, 100% - var(--hv-cot1) - 420px - var(--hv-cot4))) minmax(0, 1fr) var(--hv-cot4);
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid var(--hv-bd); border-radius: 10px; overflow: hidden;
  background: var(--hv-card);
}

/* LH (06/10, PB-11): cột 4 "Lịch · Cuộc họp" (aside.hv-lich, ui-lichhop.js + css/lichhop.css). --hv-cot4: 300px mở · 44px thu
   gọn · 0 ẩn; cột 2 trừ thêm cột 4 để khung đọc giữ tối thiểu 420px. JS đặt lớp theo bề rộng khu Hộp việc (mốc 1099 / 820 / 759). */
.hv-grid.lh-c4-mo { --hv-cot4: 300px; }
.hv-grid.lh-c4-thu { --hv-cot4: 44px; }
.hv-grid.lh-c4-an { --hv-cot4: 0px; }

/* Thanh thư mục: "+ Soạn việc mới" · mục GHIM · "Thêm thư mục" (thu / mở) · nút thu gọn */
.hv-fo {
  position: relative;
  display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0;
  padding: 10px 8px; border-right: 1px solid var(--hv-bd);
  background: color-mix(in srgb, var(--bg) 82%, var(--hv-bd));
}
.hv .hv-soan { width: 100%; font-weight: 700; padding: 8px; }
.hv [data-hv-ngan-dong] { display: none; }
.hv-fo-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.hv [data-hv-tm-vung] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hv [data-hv-tm-vung][hidden] { display: none; }
.hv-tm { position: relative; display: flex; align-items: center; min-width: 0; border-radius: 6px; }
.hv-tm > .hv-fo-it { flex: 1; min-width: 0; }
.hv-fo-it {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 6px; background: transparent;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-align: left; cursor: pointer;
}
.hv-fo-it:hover { background: var(--hv-card); }
.hv-fo-it.on { background: var(--hv-card); color: var(--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.hv-fo-it:focus-visible, .hv-tm-go:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.hv-fo-it > .hv-tm-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-tm-ic { flex: none; display: inline-flex; color: var(--ink-3); }
.hv-fo-it.on .hv-tm-ic { color: var(--primary); }
.hv-tm-ic svg { width: 15px; height: 15px; }
.hv-tm-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); cursor: pointer; opacity: 0;
}
.hv-tm:hover .hv-tm-go, .hv-tm:focus-within .hv-tm-go, [data-hv-tm-vung="them"] .hv-tm-go { opacity: 1; }
[data-hv-tm-vung="them"] .hv-tm-go { color: var(--primary); }
.hv-tm-go:hover { background: var(--hv-card); color: var(--ink); }
.hv-tm-go svg { width: 13px; height: 13px; }
.hv-tm.hv-tm-keo { opacity: .45; }
.hv-tm[data-hv-chen="tren"] { box-shadow: 0 -2px 0 var(--primary); }
.hv-tm[data-hv-chen="duoi"] { box-shadow: 0 2px 0 var(--primary); }
.hv [data-hv-tm-them] { margin-top: 4px; color: var(--ink-3); }
.hv [data-hv-tm-them]::after { content: "▾"; flex: none; font-size: var(--fs-xs); }
.hv [data-hv-tm-them][aria-expanded="true"]::after { content: "▴"; }
.hv [data-hv-tm-them][hidden] { display: none; }
.hv [data-hv-thu-tm] { flex: none; align-self: flex-end; padding: 2px 9px; }
.hv-n {
  flex: none; font-size: var(--fs-xs); font-weight: 600; line-height: 18px; padding: 0 6px; border-radius: 9px;
  color: var(--ink-2); background: color-mix(in srgb, var(--hv-bd) 75%, var(--bg));
}
.hv-n.r { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--hv-card)); }
.hv-fo-s { margin: 10px 8px 3px; font-size: var(--fs-xs); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
@media (hover: none) { .hv-tm-go { opacity: 1; } }

/* Vạch chia (mép phải ngăn thư mục / danh sách; không thêm cột lưới): kéo bằng chuột hoặc ngón tay, ←/→, nhấn đúp */
.hv-chia { position: absolute; top: 0; right: -4px; bottom: 0; z-index: 4; width: 8px; cursor: col-resize; touch-action: none; }
.hv-chia::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; }
.hv-chia:hover::after, .hv-chia:focus-visible::after, .hv.hv-keo-chia .hv-chia::after { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.hv-chia:focus-visible { outline: none; }
.hv.hv-keo-chia { cursor: col-resize; user-select: none; }

/* Danh sách: MỘT hàng đầu (tên thư mục + số · ô tìm · nút Lọc) */
.hv-list { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--hv-bd); background: var(--hv-card); }
.hv-lh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--hv-bd); }
.hv-lh h2 { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); color: var(--ink); }
.hv [data-hv-dem] { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.hv-lh input[type="search"] { flex: 1 1 96px; min-width: 64px; width: auto; padding: 4px 8px; font-size: var(--fs-xs); }
.hv .hv-loc, .hv .hv-ngan { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.hv .hv-ngan { display: none; }
.hv .hv-loc svg, .hv .hv-ngan svg { width: 14px; height: 14px; }
.hv .hv-loc.co-loc { color: var(--primary); border-color: var(--primary); }
.hv .hv-loc.co-loc::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.hv-vt { display: inline-flex; border: 1px solid var(--hv-bd); border-radius: 6px; overflow: hidden; }
.hv-vt button { border: 0; border-radius: 0; padding: 3px 9px; background: var(--hv-card); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.hv-vt button + button { border-left: 1px solid var(--hv-bd); }
.hv-vt button.on { background: var(--hv-soft); color: var(--primary); font-weight: 600; }
.hv-pv { display: inline-flex; min-width: 0; max-width: 100%; border: 1px solid var(--hv-bd); border-radius: 6px; overflow: hidden; }
.hv-pv button {
  min-width: 0; max-width: 200px; border: 0; border-radius: 0; padding: 3px 9px;
  background: var(--hv-card); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-pv button + button { border-left: 1px solid var(--hv-bd); }
.hv-pv button.on { background: var(--hv-soft); color: var(--primary); font-weight: 700; }
.hv-ghichu { padding: 5px 10px; font-size: var(--fs-xs); color: var(--ink-3); border-bottom: 1px solid var(--hv-bd); background: color-mix(in srgb, var(--bg) 60%, var(--hv-card)); }
.hv-ghichu[hidden] { display: none; }
.hv-status { padding: 6px 10px; font-size: var(--fs-xs); color: var(--ink-2); background: color-mix(in srgb, var(--warn) 14%, var(--hv-card)); border-bottom: 1px solid var(--hv-bd); }
.hv-status[hidden] { display: none; }
.hv-rows { flex: 1; min-height: 0; overflow: auto; outline: none; }

/* Lớp nổi phủ #hvHost (ngoài lưới — lưới cắt tràn): Lọc, danh sách Thêm ở chế độ biểu tượng, Kho thanh công cụ */
.hv-noi { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.hv-noi > * { pointer-events: auto; }
.hv-loc-noi, .hv-tm-noi {
  /* Trên bảng và lớp dính của Hộp việc, dưới shell và dialog top-layer. */
  position: absolute; z-index: 30; overflow: auto; background: var(--hv-card); border: 1px solid var(--hv-bd); border-radius: 10px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 20%, transparent);
}
.hv-loc-noi { width: 300px; max-width: calc(100% - 16px); display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.hv-tm-noi { width: 250px; margin: 0; padding: 6px; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.hv-loc-noi[hidden], .hv-tm-noi[hidden] { display: none; }
.hv-loc-n { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: var(--fs-sm); color: var(--ink-2); }
.hv-loc-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-3); }
.hv-loc-n select { width: 100%; padding: 4px 6px; font-size: var(--fs-sm); }
.hv-loc-n label { display: inline-flex; align-items: center; gap: 6px; }
.hv-loc-n input[type="checkbox"] { width: auto; padding: 0; }
.hv-loc-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-loc-f [data-hv-doc-het]:disabled { opacity: .55; cursor: default; }

/* Nhóm "Cần tôi xử lý (n)" nổi đầu (nền nhạt) · "Khác (n)" · "Dòng đang mở" */
.hv-nhom, .hv-gh {
  position: sticky; top: 0; z-index: 1;
  padding: 5px 10px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px; color: var(--ink-3);
  background: color-mix(in srgb, var(--bg) 70%, var(--hv-card)); border-bottom: 1px solid var(--hv-bd);
}
.hv-nhom[data-hv-nhom="can"] { color: var(--primary); background: var(--hv-soft); }
.hv-gh { text-transform: uppercase; }

/* Dòng 2 tầng (Thoáng): tầng 1 chữ tắt · mã + tên · giờ; tầng 2 người gửi · MỘT nhãn · thanh % · biểu tượng; tầng 3 dòng
   trích (chỉ khi bật). Chưa đọc: chấm trái + tên đậm. Gọn: một tầng (mã + tên · nhãn · giờ). */
.hv-row {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "av tt gio" "av l4 l4";
  column-gap: 10px; row-gap: 3px; align-items: center; padding: 10px 10px 10px 16px; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--hv-bd) 60%, var(--hv-card));
}
.hv-row:hover { background: color-mix(in srgb, var(--hv-soft) 55%, var(--hv-card)); }
.hv-row.sel { background: var(--hv-soft); }
.hv-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.hv-row.un::before { content: ""; position: absolute; top: 50%; left: 5px; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--primary); }
.hv-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; color: var(--primary); background: var(--hv-soft);
}
.hv-row > .hv-av { grid-area: av; align-self: start; }
.hv-row .hv-c, .hv-row .hv-l1 { display: contents; }
.hv-l2 { grid-area: tt; min-width: 0; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-l2 em { font-style: normal; font-weight: 700; color: var(--primary); margin-right: 5px; }
.hv-project, .hv-card-duan { display: none; }
.hv-row.un .hv-l2 { font-weight: 800; }   /* HV-NEN Đ-01: chưa đọc đậm hơn đã đọc (650 ở .hv-row .hv-l2) */
.hv-t { grid-area: gio; flex: none; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.hv-row.un .hv-t { color: var(--primary); font-weight: 700; }
.hv-l4 { grid-area: l4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.hv-who { flex: 1 1 40%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-nc { flex: 0 0 auto; display: inline-flex; max-width: 100%; min-width: 0; }
.hv-nc > * { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hv-row .hv-bar { flex: none; width: 36px; }
.hv-row .hv-pct { flex: none; }
.hv-ics { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--ink-3); }
.hv-ics svg { width: 13px; height: 13px; }
.hv-l3 { grid-area: l3; display: none; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-trich .hv-row { grid-template-areas: "av tt gio" "av l4 l4" "av l3 l3"; }
.hv-trich .hv-l3 { display: block; }
.hv-md-gon .hv-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tt nc gio"; padding-top: 12px; padding-bottom: 12px; }
.hv-md-gon .hv-row > .hv-av, .hv-md-gon .hv-row .hv-who, .hv-md-gon .hv-row .hv-bar, .hv-md-gon .hv-row .hv-pct, .hv-md-gon .hv-ics, .hv-md-gon .hv-l3 { display: none; }
.hv-md-gon .hv-row .hv-l4 { display: contents; }
.hv-md-gon .hv-nc { grid-area: nc; }
@container hv (min-width: 760px) {
  .hv-row .hv-l2 { display: flex; align-items: flex-start; gap: 5px; white-space: normal; text-overflow: clip; }
  .hv-row .hv-l2 em { flex: none; margin-right: 0; white-space: nowrap; }
  .hv-row .hv-row-title { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  .hv-row:has(.hv-project) { grid-template-areas: "av tt gio" "av da da" "av l4 l4"; }
  .hv-trich .hv-row:has(.hv-project) { grid-template-areas: "av tt gio" "av da da" "av l4 l4" "av l3 l3"; }
  .hv-row .hv-project { grid-area: da; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-2); }
  .hv-row .hv-project b, .hv-card-duan b { font-weight: 600; color: var(--ink-3); }
  .hv-md-gon .hv-row:has(.hv-project) { grid-template-areas: "tt nc gio" "da da da"; }
  .hv-rh .hv-card-duan { display: block; margin-top: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-2); }
}
.hv-rong { padding: 18px 12px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.hv-rong .hv-btn { margin-left: 6px; }
.hv .hv-them { display: flex; margin: 8px auto; }
.hv-nen { display: none; }

/* Nhãn, thanh tiến độ, biểu tượng — dùng chung danh sách + thẻ + điện thoại */
.hv-chip {
  display: inline-flex; align-items: center; padding: 0 7px; border-radius: 10px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; line-height: 18px;
  color: var(--ink-2); background: color-mix(in srgb, var(--hv-bd) 45%, var(--hv-card));
}
.hv-chip.r { color: color-mix(in srgb, var(--danger) 80%, var(--ink));   /* HV-NEN: >= 4,5:1 cả 3 theme (Đỏ 3,63 -> 4,8) */
  background: color-mix(in srgb, var(--danger) 12%, var(--hv-card)); }
.hv-chip.a { color: color-mix(in srgb, var(--warn) 45%, var(--ink)); background: color-mix(in srgb, var(--warn) 18%, var(--hv-card)); }
.hv-chip.g { color: color-mix(in srgb, var(--success) 90%, var(--ink)); background: color-mix(in srgb, var(--success) 12%, var(--hv-card)); }
.hv-chip.b { color: var(--primary); background: var(--hv-soft); }
.hv-bar { display: inline-block; width: 46px; height: 5px; border-radius: 3px; overflow: hidden; vertical-align: middle; background: color-mix(in srgb, var(--hv-bd) 80%, var(--hv-card)); }
.hv-bar i { display: block; height: 100%; background: var(--primary); }
.hv-pct { font-size: var(--fs-xs); color: var(--ink-3); }
.hv-co, .hv-tep { display: inline-flex; color: var(--ink-3); }
.hv-co { color: var(--danger); }
/* v4.37 (SPEC-v437 §2) — nhãn MỨC cảnh báo hạn: lớp chuẩn .cb .cb-<muc> (màu ở app.css, 3 theme — cùng màu mọi màn).
   Trong Hộp việc chỉ chỉnh cỡ cho bằng .hv-chip (dòng danh sách + thẻ) để hàng nhãn đều nhau. */
.hv .cb { font-size: var(--fs-xs); font-weight: 600; line-height: 16px; padding: 0 7px; gap: 3px; margin-left: 0; }   /* khoảng cách do gap của hàng nhãn */
.hv .cb-nghiemtrong, .hv .cb-quahan { font-weight: 700; }
.hv .cb svg.ico { width: 12px; height: 12px; }
.hv-card .hv-st .cb { max-width: 100%; white-space: normal; }

/* Khung đọc (QUYẾT ĐỊNH 7): thẻ việc gọn ở trên, lịch sử co giãn (tối thiểu 240px), ô soạn ở đáy. Khi khung quá thấp
   (hoặc đang mở phần cập nhật việc / thẻ mở rộng) cả khung đọc cuộn dọc — nút Gửi luôn tới được, không bị cắt. */
.hv-read { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); overflow-x: hidden; overflow-y: auto; container-type: inline-size; container-name: hvdoc; }
.hv-back-w { display: none; flex: none; padding: 6px 10px; background: var(--hv-card); border-bottom: 1px solid var(--hv-bd); }
.hv-read > .hv-back-w.pcg-nav-foot { order: 100; border-top: 1px solid var(--hv-bd); border-bottom: 0; }
.hv.hv-co-chon.hv-mat-quyen .hv-back-w { display: flex; }
.hv-empty { margin: auto; padding: 24px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.hv-empty svg { width: 32px; height: 32px; margin-bottom: 6px; }
.hv-empty[hidden], .hv-rh[hidden], .hv-off[hidden] { display: none; }
.hv-rh { flex: none; position: relative; z-index: 3; padding: 7px 14px 8px; background: var(--hv-card); border-bottom: 1px solid var(--hv-bd); }   /* không cắt tràn: menu thao tác khác nổi đè lên luồng */
.hv-ma { font-size: var(--fs-xs); font-weight: 700; color: var(--primary); }
.hv-c1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hv-card h3 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); line-height: 1.3; color: var(--ink); }
.hv-code { font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: var(--primary); margin-right: 6px; }
.hv .hv-the-mo { flex: none; padding: 2px 8px; font-size: var(--fs-xs); color: var(--primary); }
.hv-rh.hv-rh-mo .hv-ma { margin-top: 3px; }
.hv-rh.hv-rh-mo .hv-meta { margin-top: 4px; }
/* Thẻ GỌN (mặc định): một dòng tiêu đề + một dòng nhãn + một hàng nút (≤140px). Phần mở rộng hiện khi nhấn "Chi tiết thẻ". */
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-ma,
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-meta,
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-note { display: none; }
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container hv (min-width: 760px) {
  .hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) h3 { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
}
/* F1-01: dãy nhãn xếp theo độ quan trọng (quá hạn / xin dời hạn chờ → hạn hiện tại → %) và XUỐNG DÒNG, không cắt
   im lặng; nhãn phụ (trạng thái "Đang làm", hạn gốc · đã dời n/3) chỉ hiện khi mở "Chi tiết thẻ". Tràn quá 2 dòng
   thì ui-hopviec.js (gonNhan) ẩn nhãn ít quan trọng nhất và hiện "+n". */
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-st { flex-wrap: wrap; overflow: visible; margin-top: 5px; row-gap: 4px; }
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-st-phu { display: none; }
.hv-st-pt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hv-card .hv-st .hv-chip { max-width: 100%; white-space: normal; }   /* khung đọc rất hẹp: nhãn dài xuống dòng trong nhãn, không tràn mép thẻ */
.hv .hv-st-them { border: 0; cursor: pointer; color: var(--primary); background: var(--hv-soft); }
.hv-rh:not(.hv-rh-mo) .hv-card:not(.hv-card-du) .hv-acts { margin-top: 6px; }
.hv-card-du h3 { margin-bottom: 4px; }
.hv-meta { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: var(--fs-xs); color: var(--ink-2); }
.hv-meta b { font-weight: 600; color: var(--ink-3); }
.hv-mo { color: var(--ink-3); }
.hv-st { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.hv-st .hv-bar { width: 70px; }
.hv-note { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.hv-card-gon .hv-st { margin-top: 3px; }
.hv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.hv .hv-btn, .hv-tu .hv-btn, .hv-dlg .hv-btn { padding: 4px 9px; font-size: var(--fs-xs); }
.hv-more-w { position: relative; display: inline-flex; }
.hv-menu {
  position: absolute; top: 100%; right: 0; z-index: 20; min-width: 220px; margin-top: 4px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--hv-card); border: 1px solid var(--hv-bd); border-radius: 8px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
}
.hv-menu[hidden] { display: none; }
.hv-menu button { border: 0; border-radius: 6px; padding: 7px 10px; background: transparent; text-align: left; font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.hv-menu button:hover { background: var(--hv-soft); }
.hv-th { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.hv-th > * { flex: 1 1 0; min-height: 0; }
.hv-th:empty { display: none; }
/* Lịch sử tin luôn đủ đọc (≥240px) và đủ chỗ để PCGChat ghi nhận "đã xem"; thiếu chỗ thì khung đọc cuộn. */
.hv .pcgc-layout-inbox .pcgc-history { flex: 1 1 auto; min-height: 240px; overflow: auto; }
.hv .hv-read:has(.hv-rh-mo) .pcgc-layout-inbox .pcgc-history { min-height: 120px; }   /* xác minh cuối G2-02: thẻ mở rộng ở 1280x720 không đẩy nút Gửi ra ngoài */
/* Vùng "Kèm cập nhật việc" thu gọn cho tới khi người dùng nhấn Cập nhật tiến độ / Xin dời hạn / Hoàn thành. */
.hv [data-hv-extras]:not([data-hv-mo]) { display: none; }
.hv-off { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; }
.hv-off-t { margin-bottom: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
/* QĐ3-7: không còn quyền xem luồng đang mở */
.hv-mat { margin: 40px auto; max-width: 420px; padding: 16px 18px; text-align: center; border: 1px solid var(--hv-bd); border-radius: 10px; background: var(--hv-card); }
.hv-mat-t { margin-bottom: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* Sự kiện hệ thống (khi trao đổi tắt) — cùng tông với .pcgc-ev của khung trao đổi */
.hv-evs { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hv-ev { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
.hv-ev::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 55%, var(--hv-card)); }
.hv-ev.warn::before { background: var(--danger); }
.hv-ev.ok::before { background: var(--success); }
.hv-ev-t { flex: none; min-width: 74px; color: var(--ink-3); }
.hv-ev-who { color: var(--ink); }
.hv-ev-nd { margin-top: 2px; color: var(--ink-3); }

/* "Kèm cập nhật việc" trong ô soạn (khung trao đổi máy tính + điện thoại) */
.hv-ex { margin: 4px 0; padding: 3px 8px; border: 1px dashed var(--hv-bd); border-radius: 8px; background: var(--hv-card); font-size: var(--fs-xs); color: var(--ink-2); }
.hv-ex > summary { cursor: pointer; padding: 3px 0; font-weight: 600; color: var(--primary); list-style-position: inside; }
.hv-ex-tt { font-weight: 500; color: var(--ink-2); }
.hv-ex-in { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 6px; }
.hv-ex-o { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.hv-ex-o input { width: auto; padding: 0; }
.hv-ex-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 2px 22px; }
.hv-ex-b[hidden] { display: none; }
.hv-ex-b input[type="range"] { width: 200px; max-width: 100%; padding: 0; border: 0; }
.hv-ex-b output { min-width: 38px; font-weight: 700; color: var(--primary); }
.hv-ex-dh label { display: inline-flex; flex-direction: column; gap: 2px; }
.hv-ex-dh .hv-ex-w { flex: 1 1 260px; }
.hv-ex-dh textarea { width: 100%; resize: vertical; }
.hv-ex-note, .hv-ex-info { color: var(--ink-3); }
.hv-ex-info { flex-basis: 100%; }
.hv-ex-chan { color: var(--ink-3); }
.hv-ex-err { color: var(--hv-bad); font-weight: 600; }
.hv-ex-err[hidden] { display: none; }

/* Thẻ "Kèm cập nhật việc" trong tin đã gửi */
.hv-tu {
  margin-top: 7px; padding: 6px 9px; border-radius: 7px; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--hv-card));
  background: color-mix(in srgb, var(--success) 7%, var(--hv-card));
}
.hv-tu-k { font-weight: 700; color: var(--primary); }
.hv-tu-tt { margin-top: 3px; color: var(--ink-3); }
.hv-tu-canh { margin-top: 3px; font-weight: 600; color: var(--hv-bad); }
.hv-tu-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.hv-ok { font-weight: 700; color: var(--success); }
.hv-bad { font-weight: 700; color: var(--hv-bad); }

/* Hộp thoại (Chuyển tiếp · Đổi người phụ trách · Hướng dẫn) — nằm trong #dlg, ngoài .hv */
.hv-dlg { display: flex; flex-direction: column; gap: 8px; }
.hv-dlg .hv-note { margin: 0; }
.hv-dlg input[type="search"] { width: 100%; }
.hv-f { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--ink-2); }
.hv-f select, .hv-f textarea { width: 100%; }
.hv-pick { max-height: 46vh; overflow: auto; border: 1px solid var(--hv-bd); border-radius: 8px; padding: 4px; }
.hv-pick-h { margin: 6px 6px 3px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.hv-pick-it { display: flex; align-items: baseline; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: var(--fs-sm); }
.hv-pick-it:hover { background: var(--hv-soft); }
.hv-pick-it input { width: auto; padding: 0; }
.hv-pick-it small { color: var(--ink-3); }
.hv-err { color: var(--hv-bad); font-weight: 600; font-size: var(--fs-sm); }
.hv-err[hidden] { display: none; }
.hv-hd { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }

/* Hợp nhất Đợt 1.4 (c) — câu công khai "Mọi người trong khối X xem được luồng này.": đầu luồng (máy tính: đầu khung trao
   đổi; điện thoại: trên hàng nút nhanh) và ô soạn (vùng data-hv-extras). Máy tính: vùng ô soạn vẫn thu gọn theo luật cũ,
   chỉ câu công khai luôn hiện; phần "Kèm cập nhật việc" hiện khi người dùng nhấn Cập nhật tiến độ / Xin dời hạn / Hoàn thành. */
.hv-pub { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-2); }
.hv-pub svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--primary); }
.pcgc-head-custom > .hv-pub { padding: 5px 12px 6px; border-bottom: 1px solid var(--hv-bd); background: var(--hv-soft); }
.hv-pub-soan { padding: 2px 2px 4px; color: var(--ink-3); }
.hv [data-hv-extras]:not([data-hv-mo]):has(> .hv-pub-soan) { display: block; }
.hv [data-hv-extras]:not([data-hv-mo]) > .hv-ex { display: none; }
.mbhv-qa:has(> .hv-pub) { flex-wrap: wrap; }
.mbhv-qa > .hv-pub { flex: 1 0 100%; color: var(--msub, var(--ink-3)); }

/* Hợp nhất Đợt 1.4 (f) — thẻ báo cáo tuần cũ trong luồng (sự kiện tông 'bc', vẽ từ sổ báo cáo) + ý kiến / chỉ đạo ngay
   dưới trong cùng thẻ; ý kiến chung theo việc (tông 'cd'). Dùng cả ở khung trao đổi (.pcgc-ev) và diễn biến khi trao đổi tắt (.hv-ev). */
.pcgc-ev.pcgc-ev-bc, .pcgc-ev.pcgc-ev-cd { align-items: flex-start; }
.pcgc-ev-bc i { background: var(--primary); }
.pcgc-ev-cd i { background: var(--success); }
.pcgc-ev-bc .pcgc-ev-b { flex: 1; display: block; }

/* UI-HV-02: nhóm nhắc quá hạn trong luồng Hộp việc desktop. */
.hv .pcgc-layout-inbox .pcgc-reminder-group {
  min-width: 0; margin: 5px 4px 8px; border: 1px solid var(--hv-bd); border-radius: 9px;
  background: color-mix(in srgb, var(--warn) 10%, var(--hv-card)); color: var(--ink);
}
.hv .pcgc-layout-inbox .pcgc-reminder-group summary {
  display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 6px 9px;
  min-width: 0; padding: 9px 11px; cursor: pointer; list-style: none;
}
.hv .pcgc-layout-inbox .pcgc-reminder-group summary::-webkit-details-marker { display: none; }
.hv .pcgc-layout-inbox .pcgc-reminder-group summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px;
}
.hv .pcgc-layout-inbox .pcgc-reminder-mark {
  grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 23px; height: 23px;
  border-radius: 6px; background: color-mix(in srgb, var(--warn) 18%, var(--hv-card));
  color: var(--ink); font-weight: 700;
}
.hv .pcgc-layout-inbox .pcgc-reminder-title { grid-column: 2; grid-row: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.hv .pcgc-layout-inbox .pcgc-reminder-latest { grid-column: 2 / -1; grid-row: 2; min-width: 0; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.hv .pcgc-layout-inbox .pcgc-reminder-group summary::after { content: '▾'; grid-column: 3; grid-row: 1; color: var(--ink-2); }
.hv .pcgc-layout-inbox .pcgc-reminder-group[open] summary::after { content: '▴'; }
.hv .pcgc-layout-inbox .pcgc-reminder-history {
  padding: 2px 11px 7px; border-top: 1px solid var(--hv-bd); background: var(--hv-card);
  border-radius: 0 0 8px 8px;
}
.hv .pcgc-layout-inbox .pcgc-reminder-row {
  display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 6px 12px; padding: 7px 0; font-size: var(--fs-xs); line-height: 1.45;
}
.hv .pcgc-layout-inbox .pcgc-reminder-row + .pcgc-reminder-row { border-top: 1px solid var(--hv-bd); }
.hv .pcgc-layout-inbox .pcgc-reminder-row time { color: var(--ink-2); white-space: nowrap; }
.hv .pcgc-layout-inbox .pcgc-reminder-text { min-width: 0; overflow-wrap: anywhere; }
@container hv (max-width: 580px) {
  .hv .pcgc-layout-inbox .pcgc-reminder-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.hv-bc { margin-top: 2px; padding: 7px 10px; border: 1px solid var(--hv-bd); border-left: 3px solid var(--primary); border-radius: 8px; background: var(--hv-card); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; text-align: left; }
.hv-bc-h, .hv-bc-cd-h { font-size: var(--fs-xs); color: var(--ink-2); }
.hv-bc-k { font-weight: 700; color: var(--primary); }
.hv-bc-nd, .hv-bc-cd-nd { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hv-bc-tep { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: var(--fs-xs); }
.hv-bc-tep a { color: var(--primary); font-weight: 600; text-decoration: none; }
.hv-bc-tep small { color: var(--ink-3); font-weight: 400; }
.hv-bc-cds { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--hv-bd); }
.hv-bc-cd { padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--success) 55%, var(--hv-bd)); }
.pcgc-layout-mobile .pcgc-ev-bc, .pcgc-layout-mobile .pcgc-ev-cd { justify-content: flex-start; text-align: left; }
.hv-ev.bc, .hv-ev.cd { align-items: flex-start; }
.hv-ev.bc > div { flex: 1; min-width: 0; }

/* Hợp nhất Đợt 1.4 (e) — nút "Nhận bước" ngay trên dòng Hộp việc điện thoại (mb-hopviec.js). */
.mbhv-nb-w { margin-top: 7px; }
.mbhv-dong .mbhv-nb { padding: 5px 12px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--mbrand, var(--primary)); color: var(--hv-card); }

/* Chế độ biểu tượng của thanh thư mục: nút « (hv-thu) khi khu giữa ≥ 760px, và BUỘC ở 760–1099px (không ghi lựa chọn):
   cột 56px, chỉ biểu tượng + chấm số (tên + số ở title), "+ Soạn việc mới" thành "+", "Thêm thư mục" mở lớp nổi. */
@container hv (min-width: 760px) {
  .hv-grid.hv-thu { --hv-cot1: 56px; }
  .hv-thu .hv-fo { padding: 8px 5px; }
  .hv-thu .hv-fo .hv-tm-ten, .hv-thu .hv-fo .hv-tm-go, .hv-thu .hv-fo .hv-fo-s, .hv-thu [data-hv-tm-vung="ghim"] ~ [data-hv-tm-vung="them"], .hv-thu [data-hv-chia="tm"] { display: none; }
  .hv-thu .hv-fo-it { position: relative; justify-content: center; padding: 8px 0; }
  .hv-thu [data-hv-tm-them]::after { display: none; }
  .hv-thu .hv-fo .hv-n { position: absolute; top: 3px; right: 5px; width: 8px; height: 8px; padding: 0; overflow: hidden; font-size: 0; line-height: 0; border-radius: 50%; }
  .hv-thu .hv-soan { padding: 6px 0; }
  .hv-thu [data-hv-thu-tm] { align-self: center; }
}
@container hv (min-width: 760px) and (max-width: 1099px) {
  .hv-grid { --hv-cot1: 56px; }
  .hv-fo { padding: 8px 5px; }
  .hv-fo .hv-tm-ten, .hv-fo .hv-tm-go, .hv-fo .hv-fo-s, .hv-fo [data-hv-tm-vung="ghim"] ~ [data-hv-tm-vung="them"], [data-hv-chia="tm"], .hv [data-hv-thu-tm] { display: none; }
  .hv-fo .hv-fo-it { position: relative; justify-content: center; padding: 8px 0; }
  .hv [data-hv-tm-them]::after { display: none; }
  .hv-fo .hv-n { position: absolute; top: 3px; right: 5px; width: 8px; height: 8px; padding: 0; overflow: hidden; font-size: 0; line-height: 0; border-radius: 50%; }
  .hv .hv-soan { padding: 6px 0; }
}
/* Rất hẹp (< 760px): một ngăn — danh sách; nút "Thư mục" mở ngăn kéo trái (nền che, đóng khi chọn / Esc / nhấn nền / nút
   đóng); nhấn dòng ⇒ khung đọc toàn chiều ngang + "← Quay lại". Không cuộn ngang. */
@container hv (max-width: 759px) {
  .hv-grid { grid-template-columns: minmax(0, 1fr); position: relative; }
  .hv-fo { display: none; }
  .hv.hv-ngan-mo .hv-fo {
    display: flex; position: absolute; top: 0; bottom: 0; left: 0; z-index: 22; width: min(280px, 85%);
    box-shadow: 4px 0 18px color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .hv.hv-ngan-mo .hv-nen { display: block; position: absolute; inset: 0; z-index: 21; background: color-mix(in srgb, var(--ink) 30%, transparent); }
  .hv.hv-ngan-mo [data-hv-ngan-dong] { display: inline-flex; align-self: flex-end; }
  .hv [data-hv-thu-tm], .hv .hv-chia { display: none; }
  .hv .hv-ngan { display: inline-flex; }
  .hv-list { border-right: 0; }
  .hv-read { display: none; }
  .hv.hv-co-chon .hv-list { display: none; }
  .hv.hv-co-chon .hv-read { display: flex; }
  .hv.hv-co-chon .hv-back-w { display: block; }
}

/* TG-2 T2 (30/09) — khung đọc gọn: đầu khung (mã, tên tối đa 2 dòng, dòng thông tin, nút khoá, nút "i"), bảng "i" mở tại chỗ,
   thanh hành động (nút tự hiện + thanh công cụ ThanhCongCu), ô soạn thu gọn (lớp hv-soan-thu trên .hv-read, không đặt hidden
   lên ô soạn), câu công khai / ghi chú ô soạn chuyển vào nút khoá, nút nhanh trên dòng khi rê chuột. Chỉ dùng biến màu. */
.hv-dk { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hv-dk-t { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; color: var(--ink); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.hv-dk-ma { margin-right: 6px; font-style: normal; color: var(--primary); }
.hv-dk-context { display: none; }
@container hv (min-width: 760px) {
  .hv-dk-context { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-2); }
  .hv-dk-context span { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hv-dk-context b { color: var(--ink-3); font-weight: 600; }
}
.hv-dk-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-xs); color: var(--ink-2); min-width: 0; }
.hv-dk-tt b { color: var(--ink); font-weight: 600; }
.hv-dk-tt .hv-st-pt { display: inline-flex; align-items: center; gap: 5px; }
.hv-dk-nut { display: inline-flex; gap: 2px; margin-left: auto; }
.hv-dk-nut .hv-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; }
.hv-dk-nut .hv-btn svg { width: 15px; height: 15px; }
.hv-dk-nut [aria-expanded="true"] { background: var(--hv-soft); color: var(--primary); }
.hv-dk-i { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hv-bd); }
.hv-dk-i .hv-c1 { display: none; }
.hv-dk-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
/* Đ4 S2 — việc sinh từ phiếu: khối yêu cầu gọn ở đầu khung đọc (nội dung kẹp 3 dòng); thẻ i nằm ngay dưới nên không lặp */
.hv-ycph { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; margin-top: 2px; padding: 6px 10px; border-left: 3px solid var(--primary); border-radius: 6px; background: var(--hv-soft); font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2); }
.hv-ycph-t, .hv-ycph-nd { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.hv-ycph-t b { color: var(--ink); font-weight: 600; }
.hv-ycph-ma { font-style: normal; font-weight: 600; color: var(--primary); }
.hv-ycph-nd { color: var(--ink); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.hv-ycph-rong { color: var(--ink-3); font-style: italic; }
.hv-ycph-ngoai { border-left-color: var(--hv-bd); }
.hv-ycph-mo { align-self: flex-start; }
.hv-dk-i .hv-ycph { display: none; }
/* hv-ph-ro-viec (20/10) — mục phối hợp chờ Anh/Chị: "Cần Anh/Chị: <việc>" + trích câu hỏi / lý do (kẹp 2 dòng) + dòng "xử lý thay" */
.hv-can { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; margin-top: 4px; padding: 8px 12px; border-left: 3px solid var(--warn); border-radius: 8px; background: color-mix(in srgb, var(--warn) 10%, var(--hv-card)); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.hv-can-t, .hv-can-q, .hv-can-ly { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.hv-can-t b { font-weight: 700; }
.hv-can-q { color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.hv-can-ly { color: var(--ink-3); font-size: var(--fs-xs); }
.hv-card .hv-can { margin: 6px 0; }
.hv-hanhdong { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 14px; background: var(--hv-card); border-bottom: 1px solid var(--hv-bd); }
.hv-hanhdong[hidden] { display: none; }
.hv-hanhdong [data-hv-tuhien] { display: contents; }
.hv-hanhdong [data-hv-tcc] { flex: 1 1 auto; min-width: 0; }
.hv-tuhien { padding: 5px 12px; border: 1px solid var(--primary); border-radius: 8px; background: var(--hv-soft); color: var(--primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.hv-tuhien.pri { background: var(--primary); color: var(--hv-card); }
.hv-tuhien:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hv-hanhdong .tcc-vien[data-tcc-id="traloi"] { background: var(--primary); border-color: var(--primary); color: var(--hv-card); }
.hv-soan-w { flex: none; padding: 8px 14px; background: var(--bg); }
.hv-soan-w[hidden] { display: none; }
.hv-soan-mo { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--hv-bd); border-radius: 8px; background: var(--hv-card); color: var(--ink-3); font-size: var(--fs-sm); text-align: left; cursor: text; }
.hv-soan-mo svg { width: 15px; height: 15px; flex: none; }
.hv-soan-mo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hv-read.hv-soan-thu [data-hv-chat] .pcgc-composer { display: none; }
.hv .hv-read .pcgc-head-custom, .hv .hv-read .hv-pub-soan, .hv .hv-read .pcgc-note { display: none; }
.hv .hv-read [data-hv-extras]:not([data-hv-mo]):has(> .hv-pub-soan) { display: none; }
.hv-nhanh { grid-column: 2 / -1; grid-row: auto; justify-self: end; max-width: 100%; display: none; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.hv-md-gon .hv-row .hv-nhanh { grid-column: 1 / -1; }
.hv-row:hover .hv-nhanh { display: inline-flex; }
.hv-nhanh button { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 6px; border: 1px solid var(--hv-bd); border-radius: 6px; background: transparent; color: var(--ink-2); font-size: var(--fs-xs); cursor: pointer; }
.hv-nhanh button:hover { background: var(--hv-soft); color: var(--primary); }
.hv-nhanh svg { width: 13px; height: 13px; }
@media (hover: none) { .hv-nhanh, .hv-row:hover .hv-nhanh { display: none; } }
@container hvdoc (max-width: 631px) {
  .hv-rh, .hv-hanhdong, .hv-soan-w { padding-left: 10px; padding-right: 10px; }
}
@container hvdoc (max-width: 551px) {
  .hv-hanhdong .tcc-vien:not([data-tcc-id="traloi"]):not(.tcc-them) .tcc-ico { display: none; }
}

/* ===== CNV 06/10 — khung "Chia nhỏ việc" tại chỗ (ui-chianho.js) và khối "Các bước (n)" trong khung đọc =====
   Khung chia việc: ngay dưới thanh nút, cuộn nội bộ khi cao quá khoảng 60% khung đọc.
   Khối Các bước: trần 30% khung đọc, cuộn nội bộ; hướng dẫn là chữ thuần nên giữ xuống dòng bằng pre-wrap.
   Có khung hoặc khối này thì luồng trao đổi giữ tối thiểu 160px (PB-06). Chỉ dùng biến màu của giao diện.
   Vòng sửa 1 (CNV-27): hai khối này CO LẠI khi khung đọc thiếu chỗ (min-height 0, cuộn nội bộ) để luồng trao đổi luôn còn
   160px nhìn thấy, kể cả khi mở tay Các bước lúc khung chia đang mở. Trình duyệt có max-height theo nội dung: cơ sở co là
   60% và 30% khung đọc (chia chỗ thiếu theo tỉ lệ đó, không cao hơn nội dung). Đủ chỗ thì bố cục như cũ. */
.hv-cn, .hv-cb { flex: 0 1 auto; min-height: 0; overflow-y: auto; border-bottom: 1px solid var(--hv-bd); }
.hv-cn[hidden], .hv-cb[hidden] { display: none; }
.hv-cn { max-height: 60%; padding: 10px 14px 12px; background: color-mix(in srgb, var(--hv-soft) 55%, var(--hv-card)); font-size: var(--fs-sm); color: var(--ink); }
.hv-read:has(> .hv-cn:not([hidden])) > .hv-th, .hv-read:has(> .hv-cb:not([hidden])) > .hv-th { min-height: 160px; }
.hv-cn-dau { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.hv-cn-dau b { font-size: var(--fs-md); }
.hv-cn-phu { color: var(--ink-3); font-size: var(--fs-xs); }
.hv-cn-nguon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--hv-bd); border-radius: 8px; background: var(--hv-card); }
.hv-cn-dan { flex: 1 1 100%; }
.hv-cn-dan textarea { width: 100%; min-height: 96px; padding: 7px 9px; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--hv-card); color: var(--ink); resize: vertical; font: inherit; }
.hv-cn-hang { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hv-cn-ds { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.hv-cn-dong { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px; border: 1px solid var(--hv-bd); border-radius: 8px; background: var(--hv-card); }
.hv-cn-dong.hv-cn-sai { border-color: var(--hv-bad); }
.hv-cn-stt { padding-top: 18px; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.hv-cn-than { min-width: 0; }
.hv-cn-o3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 150px; gap: 6px 8px; }
.hv-cn-o { display: block; min-width: 0; }
.hv-cn-o > span { display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--fs-xs); }
.hv-cn-o input, .hv-cn-o select, .hv-cn-o textarea { width: 100%; padding: 5px 8px; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--hv-card); color: var(--ink); font: inherit; }
.hv-cn-o input { height: 32px; }
.hv-cn-o-hd { margin-top: 6px; }
.hv-cn-o textarea { min-height: 76px; line-height: 1.5; resize: vertical; overflow: hidden; }
.hv-cn-o input:focus, .hv-cn-o textarea:focus, .hv-cn-phu2 select:focus, .hv-cn-dan textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.hv-cn-phu2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 4px; }
.hv-cn-phu2 select { height: 28px; padding: 0 6px; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--hv-card); color: var(--ink-2); font-size: var(--fs-xs); }
.hv-cn-dem { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.hv-cn-dem.hv-cn-dem-qua { color: var(--hv-bad); font-weight: 600; }
.hv-cn-tuyen { margin-top: 4px; min-height: 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.hv-cn-t-b { color: var(--primary); font-weight: 600; }
.hv-cn-t-p { color: var(--ink); font-weight: 600; }
.hv-cn-t-trong { color: var(--ink-3); }
.hv-cn-t-sai, .hv-cn-loi { color: var(--hv-bad); }
.hv-cn-loi { margin-top: 4px; font-size: var(--fs-xs); font-weight: 600; }
.hv-cn-ghichu { margin-top: 6px; color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }
.hv-cn-nut { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; }
.hv-cn-nut button { width: 30px; height: 28px; padding: 0; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--hv-card); color: var(--ink-3); cursor: pointer; }
.hv-cn-nut button:hover:not([disabled]) { border-color: var(--primary); color: var(--primary); }
.hv-cn-nut button[disabled] { opacity: .45; cursor: default; }
.hv-cn-chan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.hv-cn-trai, .hv-cn-phai { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hv-cn-phim { padding: 0 5px; border: 1px solid var(--hv-bd); border-radius: 4px; color: var(--ink-3); font-size: var(--fs-xs); }
.hv-cn-tom { color: var(--ink-2); font-size: var(--fs-xs); }
.hv-cn-xn { margin: 8px 0 6px; padding-left: 22px; }
.hv-cn-xn li { margin: 3px 0; }
.hv-cn-nhan { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--hv-soft); color: var(--primary); font-size: var(--fs-xs); font-weight: 600; }
.hv-cn-nhan.hv-cn-nhan-p { background: var(--bg); color: var(--ink); border: 1px solid var(--hv-bd); }
.hv-cn-lydo { margin-top: 6px; }
.hv-cb { max-height: 30%; padding: 4px 14px 6px; background: var(--hv-card); }
@supports (max-height: max-content) {
  .hv-cn { flex-basis: 60%; max-height: max-content; }
  .hv-cb { flex-basis: 30%; max-height: max-content; }
}
.hv-cb-nut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; border: 0; background: none; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.hv-cb-mui { width: 12px; color: var(--ink-3); }
.hv-cb-ds { margin: 2px 0 0; padding: 0; list-style: none; }
.hv-cb-dong + .hv-cb-dong { border-top: 1px solid var(--hv-bd); }
.hv-cb-tom { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: baseline; gap: 8px; width: 100%; padding: 4px 2px; border: 0; background: none; color: var(--ink); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.hv-cb-tom:hover { background: var(--hv-soft); }
.hv-cb-tom:focus-visible, .hv-cb-nut:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hv-cb-so { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.hv-cb-ten { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hv-cb-toi .hv-cb-ten { font-weight: 600; }
.hv-cb-ng, .hv-cb-han { color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }
.hv-cb-tt { font-size: var(--fs-xs); white-space: nowrap; color: var(--ink-3); }
.hv-cb-tt-chonhan { color: var(--warn); font-weight: 600; }
.hv-cb-tt-dongy { color: var(--success); }
.hv-cb-hd { margin: 2px 0 8px 30px; padding: 6px 10px; border-left: 3px solid var(--primary); background: var(--hv-soft); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hv-cb-rong { color: var(--ink-3); font-style: italic; }
@container hvdoc (max-width: 631px) {
  .hv-cn, .hv-cb { padding-left: 10px; padding-right: 10px; }
  .hv-cn-o3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hv-cn-o3 > .hv-cn-o:first-child { grid-column: 1 / -1; }
  .hv-cb-tom { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .hv-cb-ng { display: none; }
}
.hv-list .bct-toolbar { margin:5px 8px; flex-shrink:0; }
.hv-list .bct-panel { margin:4px 0; padding:5px 7px; }
.hv-row .bct-panel, .hv-row .bct-exception { grid-column:2 / -1; grid-row:auto; min-width:0; }
.hv-md-gon .hv-row .bct-panel, .hv-md-gon .hv-row .bct-exception { grid-column:1 / -1; }
.hv-row .bct-exception { color:var(--ink-2); font-size:var(--fs-xs); }   /* HV-NEN RVCSS-02: --ink-3 var(--ink-2) chỉ 4,09 trên dòng đang chọn */
.hv-list .bct-copy > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hv-list .bct-view { font-size:11px; }

/* UI-HV03: inbox sáng ở mọi theme; theme chỉ điều khiển màu nhấn. */
.hv {
  --primary-soft: color-mix(in srgb, var(--primary) 9%, var(--card));
  --hv-card: var(--card, var(--bg));
  --hv-paper: var(--bg);
  --hv-bd: var(--line);
  --hv-soft: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--ink);
}
.hv-grid { gap: 8px; padding: 8px; border-radius: 18px; background: var(--hv-paper); }
.hv-fo { border: 0; border-radius: 14px; padding: 13px 9px; background: var(--card); }
.hv-fo-it { border-radius: 9px; padding: 9px 8px; color: var(--ink-2); }
.hv-fo-it.on { background: var(--hv-soft); color: var(--primary); box-shadow: inset 3px 0 var(--primary); }
.hv-fo-s { margin-top: 16px; }
.hv-list { border: 0; border-radius: 14px; overflow: hidden; background: var(--hv-paper); }
.hv-lh { gap: 8px; padding: 15px 12px 11px; border-bottom: 1px solid var(--hv-bd); background: var(--card); }
.hv-lh h2 { font-size: var(--fs-lg); font-weight: 750; }
.hv-lh input[type="search"] { flex-basis: 100%; order: 2; min-width: 0; border-radius: 9px; background: var(--hv-paper); }
.hv-lh .hv-loc { margin-left: auto; }
.hv-quick-filters { display: flex; gap: 7px; padding: 10px 11px; background: var(--card); }
.hv-quick-filters button { border: 1px solid var(--hv-bd); border-radius: 8px; padding: 5px 9px; background: var(--card); color: var(--ink-2); font-size: var(--fs-xs); cursor: pointer; }
.hv-quick-filters button[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); background: var(--hv-soft); font-weight: 700; }
.hv-quick-filters button:focus-visible, .hv-reader-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hv-loc-noi .bct-toolbar { display: grid; gap: 7px; width: 100%; margin: 0; padding: 0; border: 0; background: var(--card); }
.hv-loc-noi .bct-week { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.hv-loc-noi .bct-week span { flex: 1; white-space: nowrap; text-align: center; }
.hv-loc-noi .bct-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.hv-loc-noi .bct-toolbar button { min-height: 28px; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--card); color: var(--ink-2); }
.hv-loc-noi .bct-toolbar button[aria-pressed="true"] { background: var(--hv-soft); border-color: var(--primary); color: var(--primary); }
.hv-loc-noi .bct-toolbar small { color: var(--ink-2); }
.hv-rows { padding: 9px; }
.hv-nhom, .hv-gh { position: relative; margin: 0 0 7px; padding: 6px 7px; border: 0; border-radius: 8px; background: transparent; }
.hv-row, .hv-md-gon .hv-row { margin: 0 0 9px; padding: 13px 12px 13px 17px; border: 1px solid var(--hv-bd); border-radius: 12px; background: var(--card); box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent); }
.hv-row:hover { background: var(--hv-soft); }
.hv-row.sel { border-color: color-mix(in srgb, var(--primary) 45%, var(--card)); background: var(--hv-soft); box-shadow: inset 3px 0 var(--primary); }
.hv-row .hv-l2 { font-weight: 650; color: var(--ink); }
.hv-row .hv-t, .hv-row .hv-who, .hv-row .hv-l3 { color: var(--ink-2); }   /* HV-NEN K8: var(--ink-2) chỉ 4,09 trên dòng đang chọn */
.hv-row .hv-bar, .hv-row .hv-pct { display: none; }
.hv-row .hv-row-report { grid-column: 2 / -1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 7px; color: var(--ink-2); font-size: var(--fs-xs); }
.hv-md-gon .hv-row .hv-row-report { grid-column: 1 / -1; }
.hv-row .hv-report-badge { display: inline-flex; padding: 2px 7px; border-radius: 6px; color: var(--ink-2); background: var(--hv-soft); font-weight: 700; }
.hv-row .hv-report-snippet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-row .hv-report-muted { color: var(--ink-2); }
.hv-read { border: 1px solid var(--hv-bd); border-radius: 14px; background: var(--card); }
.hv-rh { padding: 18px 20px 12px; border: 0; background: var(--card); }
.hv-dk-t { font-size: var(--fs-xl, 21px); font-weight: 800; -webkit-line-clamp: 3; line-clamp: 3; }
.hv-dk-context { display: flex; }
.hv-hanhdong { padding: 8px 20px 13px; border: 0; background: var(--card); }
.hv-hanhdong { position: relative; z-index: 5; }
.hv-hanhdong [data-hv-primary] { display: contents; }
.hv-hanhdong [data-hv-primary] .pri { min-height: 34px; padding: 6px 12px; }
.hv-actions-wrap { position: static; }
.hv-actions-toggle { min-height: 34px; }
.hv-actions-content { position: absolute; top: calc(100% + 5px); left: 12px; right: 12px; z-index: 12; max-width: 280px; max-height: min(62vh, 440px); overflow: auto; padding: 8px; border: 1px solid var(--hv-bd); border-radius: 11px; background: var(--hv-card); box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent); }
.hv-actions-content[hidden] { display: none; }
.hv-actions-content .tcc-thanh, .hv-actions-content .hv-acts { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.hv-actions-content .tcc-vien, .hv-actions-content .hv-acts > button { justify-content: flex-start; width: 100%; text-align: left; }
.hv-actions-content .tcc-thanh:not(.tcc-tuychinh) > .tcc-vien[data-tcc-id="capNhatTienDo"] { display: none; }
.hv-hanhdong .hv-actions-content .tcc-vien[data-tcc-id="traloi"] { background: var(--card); border-color: var(--hv-bd); color: var(--ink); }
.hv-actions-content .hv-more-w { align-self: stretch; }
.hv-actions-content .hv-menu { position: static; min-width: 0; box-shadow: none; }
.hv-md-gon .hv-row:has(.hv-nc) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tt gio" "nc nc"; }
.hv-md-gon .hv-row .hv-nc { justify-self: start; }
@container hv (min-width: 760px) {
  .hv-md-gon .hv-row:has(.hv-project):has(.hv-nc) { grid-template-areas: "tt gio" "nc nc" "da da"; }
}
.hv-reader-tabs { display: flex; flex: none; gap: 3px; margin: 0 20px; padding: 4px; border-radius: 10px; background: var(--hv-paper); }
.hv-reader-tabs[hidden] { display: none; }
.hv-reader-tabs button { flex: 1; min-width: 0; padding: 8px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--fs-xs); }
.hv-reader-tabs button[aria-selected="true"] { background: var(--card); color: var(--primary); font-weight: 700; box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 8%, transparent); }
.hv-report { flex: none; margin: 16px 20px 8px; }
.hv-report[hidden], .hv-read-steps[hidden], .hv-read-files[hidden], .hv-read-info[hidden] { display: none; }
.hv-report-box { padding: 15px 16px; border: 1px solid var(--hv-bd); border-left: 4px solid var(--primary); border-radius: 12px; background: var(--hv-soft); color: var(--ink); }
.hv-report-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: var(--fs-xs); }
.hv-report-head span, .hv-report-week { color: var(--ink-2); }
.hv-report-author { margin-top: 8px; font-weight: 700; }
.hv-report-body { margin: 5px 0 10px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.hv-report-empty, .hv-report-prior { padding: 8px 0; color: var(--ink-2); font-size: var(--fs-xs); }
.hv-report-directions { margin-top: 10px; border-top: 1px solid var(--hv-bd); padding-top: 9px; }
.hv-report-foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-2); font-size: var(--fs-xs); }
.hv-report-history { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--hv-bd); border-radius: 9px; background: var(--card); }
.hv-report-history summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.hv-report-history summary:focus-visible, .hv-off:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hv-report-old { padding: 10px 0; border-top: 1px solid var(--hv-bd); }
.hv-report-old:first-of-type { margin-top: 10px; }
.hv-report-old time { color: var(--ink-2); font-size: var(--fs-xs); }
.hv-report-old .hv-bc { margin-top: 5px; }
.hv-report-week { margin-top: 5px; font-size: var(--fs-xs); }
.hv-read-steps, .hv-read-files, .hv-read-info { padding: 18px 20px; color: var(--ink); }
.hv-read-steps h3, .hv-read-files h3, .hv-read-info h3 { margin: 0 0 14px; font-size: var(--fs-md); }
.hv-read-files .hv-bc-tep { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; }
.hv-read-files .hv-bc-tep a { min-width: 0; padding: 10px 12px; border: 1px solid var(--hv-bd); border-radius: 8px; white-space: normal; overflow-wrap: anywhere; }
.hv-read[data-hv-view="talk"] > .hv-cb, .hv-read[data-hv-view="files"] > .hv-cb, .hv-read[data-hv-view="info"] > .hv-cb { display: none; }
.hv-read[data-hv-view="steps"] > .hv-cb { max-height: none; overflow: visible; padding: 18px 20px; border: 0; }
.hv-read[data-hv-view="steps"] > .hv-th, .hv-read[data-hv-view="files"] > .hv-th, .hv-read[data-hv-view="info"] > .hv-th,
.hv-read[data-hv-view="steps"] > .hv-off, .hv-read[data-hv-view="files"] > .hv-off, .hv-read[data-hv-view="info"] > .hv-off,
.hv-read[data-hv-view="steps"] > .hv-soan-w, .hv-read[data-hv-view="files"] > .hv-soan-w, .hv-read[data-hv-view="info"] > .hv-soan-w { display: none; }
.hv-read[data-hv-view="talk"] > .lh-viec, .hv-read[data-hv-view="steps"] > .lh-viec, .hv-read[data-hv-view="files"] > .lh-viec { display: none; }
.hv .pcgc-layout-inbox .pcgc-history { background: var(--card); padding: 10px 20px; }
.hv .pcgc-layout-inbox .pcgc-message { margin-bottom: 11px; padding: 12px 14px; border: 1px solid var(--hv-bd); border-radius: 12px; background: var(--card); box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent); }
.hv .pcgc-layout-inbox .pcgc-ev { margin: 8px 0; padding: 7px 10px; border-radius: 8px; background: var(--hv-paper); }
.hv .hv-off { background: var(--card); }
.hv .hv-ev { padding: 9px 11px; border: 1px solid var(--hv-bd); border-radius: 9px; background: var(--card); }
.hv .hv-soan-w { background: var(--card); }
@container hvdoc (max-width: 550px) {
  .hv-rh, .hv-hanhdong, .hv-read-steps, .hv-read-files, .hv-read-info { padding-left: 12px; padding-right: 12px; }
  .hv-reader-tabs { margin-left: 12px; margin-right: 12px; }
  .hv-report { margin-left: 12px; margin-right: 12px; }
  .hv .pcgc-layout-inbox .pcgc-history { padding-left: 10px; padding-right: 10px; }
}

/* HV-DOC-1: một DOM, đổi cột theo chính bề rộng danh sách. */
.hv-list { container: hv-ds / inline-size; }
.hv-doc-modes { display: inline-flex; gap: 2px; }
.hv-doc-modes button { min-height: 32px; border: 1px solid var(--hv-bd); border-radius: 6px; background: var(--card); color: var(--ink-2); cursor: pointer; }
.hv-doc-modes button.on { background: var(--hv-soft); color: var(--ink); font-weight: 700; }
.hv-md-hopthu .hv-rows { padding: 0; background: var(--card); }
.hv-md-hopthu .hv-nhom { margin: 0; padding: 6px 12px; border-radius: 0; background: var(--bg); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.hv .hv-doc-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-rows: 20px 19px 19px; grid-template-areas: none; gap: 0 6px; align-items: center; position: relative; margin: 0; padding: 7px 10px; min-height: 72px; border: 0; border-bottom: 1px solid var(--hv-bd); border-radius: 0; box-shadow: none; color: var(--ink); background: var(--card); }
.hv .hv-doc-row:hover { background: var(--bg); }
.hv .hv-doc-row.sel, .hv .hv-doc-row.sel:hover { background: var(--primary-soft); box-shadow: inset 3px 0 var(--primary); }
.hv-doc-main { display: contents; }
.hv-doc-title { grid-column: 2 / -1; grid-row: 1; font-size: 14px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-doc-row.un .hv-doc-title { font-weight: 800; }
.hv-doc-dot { grid-row: 1; grid-column: 1; width: 6px; height: 6px; border-radius: 50%; }
.hv-doc-row.un .hv-doc-dot { background: var(--primary); }
.hv-doc-person { grid-row: 2; grid-column: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.hv-doc-person b { font-weight: 700; }
.hv-doc-unit, .hv-doc-time, .hv-doc-preview { color: var(--ink-2); }
.hv-doc-time { grid-row: 2; grid-column: 3; font-size: 12px; white-space: nowrap; }
.hv-doc-row.un .hv-doc-time { color: var(--primary); font-weight: 800; }
.hv-doc-preview { grid-row: 3; grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.hv-doc-status { grid-row: 3; grid-column: 3; justify-self: end; font-size: 11px; }
.hv-doc-files { display: inline-flex; gap: 3px; align-items: center; color: var(--ink-2); font-size: 11px; }
.hv-doc-files svg { width: 13px; height: 13px; }
.hv-doc-project, .hv-doc-progress, .hv-doc-due, .hv-doc-pic, .hv-doc-state { display: none; }
.hv-doc-thieu { color: var(--st-wait-ink); }
@container hv-ds (max-width: 759px) {
  .hv .hv-doc-row { grid-template-columns: 8px minmax(0, 1fr) auto auto; }
  .hv-doc-person { grid-column: 2 / 4; }
  .hv-doc-time { grid-column: 4; }
  .hv-doc-status { grid-column: 4; }
  .hv-doc-files { grid-row: 3; grid-column: 3; }
}
@container hv-ds (min-width: 760px) {
  .hv .hv-doc-row { grid-template-columns: 8px minmax(180px, 1fr) 110px 120px 135px 58px 58px 64px; grid-template-rows: auto; min-height: 48px; gap: 8px; padding: 8px 10px; }
  .hv-doc-main { display: block; grid-column: 2; min-width: 0; }
  .hv-doc-title { display: block; }
  .hv-doc-project { display: block; grid-column: 3; }
  .hv-doc-person { grid-column: 4; }
  .hv-doc-person b, .hv-doc-unit { display: none; }
  .hv-doc-pic { display: block; }
  .hv-doc-status { grid-column: 5; justify-self: start; }
  .hv-doc-label { display: none; }
  .hv-doc-state { display: block; color: var(--ink-2); font-size: 12px; }
  .hv-doc-progress { display: block; grid-column: 6; }
  .hv-doc-due { display: block; grid-column: 7; }
  .hv-doc-time { grid-column: 8; }
  .hv-doc-row > span, .hv-doc-person, .hv-doc-main { grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hv .hv-doc-row .hv-doc-title, .hv .hv-doc-row .hv-doc-preview,
  .hv .hv-doc-row .hv-doc-project, .hv .hv-doc-row .hv-doc-person,
  .hv .hv-doc-row .hv-doc-pic, .hv .hv-doc-row .hv-doc-status,
  .hv .hv-doc-row .hv-doc-state, .hv .hv-doc-row .hv-doc-progress,
  .hv .hv-doc-row .hv-doc-due, .hv .hv-doc-row .hv-doc-time {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .hv .hv-doc-row .hv-doc-status { max-width: 100%; }
  .hv-doc-files { display: none; }
  .hv-doc-project, .hv-doc-progress, .hv-doc-due { font-size: 12px; color: var(--ink-2); }
}
@container hv-ds (min-width: 760px) and (max-width: 979px) {
  .hv .hv-doc-row { grid-template-columns: 8px minmax(180px, 1fr) 90px 100px 125px 58px 64px; }
  .hv-doc-progress { display: none; }
  .hv-doc-due { grid-column: 6; }
  .hv-doc-time { grid-column: 7; }
}
@container hv-ds (min-width: 760px) and (max-width: 819px) {
  .hv .hv-doc-row { grid-template-columns: 8px minmax(180px, 1fr) 110px 135px 58px 64px; }
  .hv-doc-project { display: none; }
  .hv-doc-person { grid-column: 3; }
  .hv-doc-status { grid-column: 4; }
  .hv-doc-due { grid-column: 5; }
  .hv-doc-time { grid-column: 6; }
}
.hv-bc-anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.hv-bc-anh .pcg-anh { display: block; width: 100%; min-width: 0; max-width: none; border: 0; background: transparent; box-shadow: none; }
.hv-bc-anh .pcg-anh-khung { width: 100%; height: 100px; min-height: 0; }
.hv-bc-anh .pcg-anh-ten { display: block; padding: 4px 0; color: var(--ink-2); font-size: 11px; overflow-wrap: anywhere; }
.hv-bc-files { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.hv-bc-tep { white-space: normal; }
@container hvdoc (width < 360px) { .hv-bc-anh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hv-bc-anh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hv .hv-doc-row.un::before { content: none; }

dialog.win[data-hv-cs] { width: min(1200px, 92vw); height: 88vh; padding: 0; overflow: hidden; }
.hv-cs-khung { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.hv-cs-khung > .dlg-h { flex: none; }
.hv-cs-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.hv-cs-nav { display: inline-flex; align-items: center; flex: none; gap: 6px; font-size: var(--fs-xs); }
.hv-cs-nav button:disabled { opacity: .4; cursor: default; }
.hv.hv-cs { flex: 1; height: auto; min-height: 0; min-width: 0; gap: 0; position: relative; overflow: hidden; }
.hv.hv-cs > .hv-read { display: flex; flex: 1; min-height: 0; min-width: 0; }
.hv.hv-cs .hv-back-w { display: none; }

/* Máy tính vẫn có thể có host hẹp do rail; Danh sách dùng hết ngăn còn lại. */
@container hv (max-width: 759px) {
  #hvHost.hv-bo-ds .hv-grid { grid-template-columns: minmax(0, 1fr) var(--hv-cot4, 0px); }
}

/* HV-CS-1 v2: one table; separate action cell; details are opt-in. */
#hvHost.hv .hv-grid, #hvHost.hv.hv-bo-ds .hv-grid { grid-template-columns: minmax(0, 1fr) var(--hv-cot4, 0px); }
#hvHost.hv .hv-list { grid-column: 1; min-width: 0; border-right: 0; display: flex; }
#hvHost.hv .hv-grid > .hv-read { display: none; }
#hvHost.hv .hv-lich { grid-column: 2; }
.hv-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--hv-bd); }
.hv-toolbar input[type="search"] { flex: 1 1 200px; min-width: 120px; }
.hv-toolbar select { width: 150px; min-width: 0; }
.hv-sort-narrow { display: none; }
.hv-toolbar input, .hv-toolbar select, .hv-quick-filters select { padding: 7px 9px; border: 1px solid var(--hv-bd); border-radius: 7px; background: var(--hv-card); color: var(--ink); }
.hv-display { position: relative; font-size: var(--fs-sm); }
.hv-display summary { cursor: pointer; padding: 8px; }
.hv-display > div { position: absolute; right: 0; top: 100%; z-index: 8; width: 230px; padding: 14px; border: 1px solid var(--hv-bd); border-radius: 8px; background: var(--hv-card); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 12%, transparent); }
.hv-display label { display: block; padding: 6px 0; }
.hv-quick-filters { display: flex; gap: 7px; padding: 8px 14px; overflow-x: auto; flex: none; white-space: nowrap; }
.hv-quick-filters > * { flex: none; }
.hv-quick-filters button { padding: 6px 10px; border: 1px solid var(--hv-bd); border-radius: 18px; background: var(--hv-card); color: var(--ink-2); cursor: pointer; }
.hv-quick-filters button.on { background: var(--hv-soft); color: var(--primary); border-color: var(--primary); }
.hv-table { flex: 1; min-height: 0; overflow: auto; }
.hv-table .hv-rows { overflow: visible; min-width: var(--hv-table-min, 906px); min-height: 0; padding: 0; display: block; }
.hv-table .hv-cot, .hv .hv-table-row { display: grid; grid-template-columns: var(--hv-table-cols); grid-template-areas: none; grid-template-rows: auto; gap: 12px; align-items: center; width: 100%; min-width: var(--hv-table-min, 906px); padding: 10px 14px; margin: 0; border: 0; border-bottom: 1px solid var(--hv-bd); border-radius: 0; box-shadow: none; background: var(--hv-card); }
.hv-table .hv-cot { position: sticky; top: 0; z-index: 2; font-size: var(--fs-xs); font-weight: 650; background: var(--bg); color: var(--ink-2); }
.hv-cot button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: left; white-space: nowrap; }
.hv-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.hv-table-row .hv-table-subject { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hv-table-row .hv-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.hv-table-row.un .hv-row-title { font-weight: 750; }
.hv-table-row::before { content: none; }
.hv-table-row .hv-doc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.hv-table-row.un .hv-doc-dot { background: var(--primary); }
.hv-table-row small { display: block; margin-left: 13px; color: var(--ink-2); font-size: 10px; }
.hv-table-row .hv-doc-preview { display: none; }
.hv-trich .hv-table-row .hv-doc-preview { display: block; margin-left: 13px; }
.hv-md-gon .hv-table-row { padding-top: 5px; padding-bottom: 5px; }
.hv-table-row:hover { background: var(--bg); }
.hv .hv-table-row.sel { background: var(--hv-soft); box-shadow: inset 3px 0 var(--primary); }
.hv .hv-table-row > .hv-nhanh { grid-column: -2 / -1; grid-row: 1; position: static; inset: auto; display: flex; gap: 4px; width: 72px; opacity: 0; pointer-events: none; background: transparent; }
.hv .hv-table-row:hover > .hv-nhanh, .hv .hv-table-row:focus-within > .hv-nhanh { opacity: 1; pointer-events: auto; }
.hv-table-row .hv-nhanh button { width: 30px; height: 30px; padding: 2px; border-radius: 5px; }
.hv-object { display: inline; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; padding: 0; border: 0; background: transparent; color: var(--link, var(--primary)); font: inherit; text-align: left; cursor: pointer; }
.hv-object:hover { text-decoration: underline; }
.hv-tone { display: inline-block; border-radius: 5px; padding: 3px 6px; font-size: var(--fs-xs); line-height: 1.4; color: var(--hv-tone-ink); background: var(--hv-tone-bg); }
.hv-tone-late { --hv-tone-ink: var(--st-late-ink); --hv-tone-bg: var(--st-late-bg); }
.hv-tone-soon { --hv-tone-ink: var(--st-soon-ink); --hv-tone-bg: var(--st-soon-bg); }
.hv-tone-doing { --hv-tone-ink: var(--st-track-ink); --hv-tone-bg: var(--st-track-bg); }
.hv-tone-waiting { --hv-tone-ink: var(--st-wait-ink); --hv-tone-bg: var(--st-wait-bg); }
.hv-tone-paused { --hv-tone-ink: var(--st-pause-ink); --hv-tone-bg: var(--st-pause-bg); }
.hv-tone-done { --hv-tone-ink: var(--st-done-ink); --hv-tone-bg: var(--st-done-bg); }
.hv-deadline { color: var(--hv-tone-ink); }
.hv-table-row .hv-cell-due small { margin-left: 0; color: inherit; }
.hv-progress { display: inline-flex; align-items: center; gap: 5px; width: 100%; color: var(--hv-tone-ink); }
.hv-progress .hv-bar { flex: 1; background: var(--hv-tone-bg); }
.hv-progress .hv-bar i { background: var(--hv-tone-ink); }
.hv-phim { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; padding: 8px 14px; border-top: 1px solid var(--hv-bd); color: var(--ink-2); font-size: 10px; }
.hv-phim .hv-tone { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 0; background: transparent; }
.hv-legend-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hv-result { margin-left: auto; white-space: nowrap; }
.hv-cs-nav button { padding: 3px 8px; border: 1px solid var(--hv-bd); border-radius: 5px; color: var(--ink); background: var(--hv-card); cursor: pointer; }
.hv-reader-code { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); font-size: var(--fs-xs); }
.hv-read-details { flex: none; margin: 0 16px; border-top: 1px solid var(--hv-bd); padding: 10px 0; }
.hv-read-details > summary { cursor: pointer; font-weight: 600; }
.hv-read-details > div { padding: 10px 0; }
.hv-read-details dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
.hv-read-details dd { margin: 0; overflow-wrap: anywhere; }
.hv-read-details .hv-cb { max-height: none; }
.hv .hv-read { overflow-y: auto; }
.hv .hv-read > .hv-th { flex: none; min-height: 220px; }
@media (max-width: 819px) {
  #hvHost.hv.hv-co-chon .hv-grid > .hv-read { display: flex; grid-column: 1 / -1; grid-row: 1; }
  #hvHost.hv.hv-co-chon .hv-list { display: none; }
  .hv-table .hv-cot { display: none; }
  .hv-table .hv-rows { min-width: 0; }
  .hv .hv-table-row { grid-template-columns: minmax(0, 1fr) 72px; min-width: 0; }
  .hv-table-row .hv-cell:not(.hv-cell-title) { display: none; }
  .hv-table-row > .hv-nhanh { grid-column: 2; }
  .hv-cs-nav { gap: 2px; }
}
.mbhv-filterbar { display: flex; align-items: center; gap: 8px; }
.mbhv-filterbar > input { flex: 1; min-width: 0; }
.mbhv-filter-sheet { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; padding: 24px 18px; background: var(--card, var(--bg)); color: var(--ink); display: flex; flex-direction: column; gap: 18px; }
.mbhv-filter-sheet label { display: flex; flex-direction: column; gap: 6px; }
.mbhv-filter-sheet select, .mbhv-filter-sheet input { width: 100%; min-height: 42px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.mbhv-tm { display: flex; flex-wrap: nowrap; overflow-x: auto; }
.mbhv-tm > * { flex: none; }
.mbhv-dong .mbhv-c { min-width: 0; }
.mbhv-dong .mbhv-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbhv-dong .mbhv-v2-meta { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11px; margin-top: 7px; }
.mbhv-v2-meta > * { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbhv-v2-meta > .hv-tone, .mbhv-v2-meta > .hv-deadline { flex: none; overflow: visible; }
@media (max-width: 819px) { .lh-viec .bb-moi { width: calc(100% - 8px); margin: 4px; } }

.hv [hidden], .mbhv-filter-sheet [hidden] { display: none !important; }
.hv .hv-read > .hv-rh, .hv .hv-read > .hv-hanhdong { flex: none; }
.hv-cs-open { color: var(--primary); }
.hv-lh > [data-hv-soan] { margin-left: auto; }
@media (max-width: 819px) { .bb-moi:focus-visible { outline-offset: -3px; } }

.hv-table-mobilemeta { display: none; }
@media (max-width: 819px) {
  .hv-table-mobilemeta { display: flex; gap: 5px; align-items: center; overflow: hidden; white-space: nowrap; margin-top: 6px; }
  .hv-table-mobilemeta > * { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hv-table-mobilemeta > .hv-tone, .hv-table-mobilemeta > .hv-deadline { flex: none; overflow: visible; }
  .hv-table-mobilemeta > .hv-meta-people { display: flex; gap: 3px; }
  .hv-meta-people > .hv-object { flex: 0 1 auto; min-width: 0; }
  .hv-table-row .hv-cell-title > small { display: none; }
}

@media (max-width: 819px) {
  #hvHost.hv { container-type: normal; }
  #hvHost .hv-toolbar > select, #hvHost .hv-toolbar > .hv-display { display: none; }
  #hvHost .hv-toolbar { flex-wrap: wrap; }
  #hvHost .hv-toolbar > .hv-sort-narrow { display: flex; align-items: center; flex: 1 0 100%; gap: 8px; min-width: 0; order: 1; }
  #hvHost .hv-sort-narrow > select { flex: 1; width: 0; min-height: 44px; }
  #hvHost.hv.hv-co-chon .hv-grid > .hv-read { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; border: 0; border-radius: 0; background: var(--card); }
  #hvHost.hv.hv-co-chon .hv-back-w { display: block; }
}

.hv-dk-tt [data-hv-v2-object="contract"] { padding: 3px 6px; border-radius: 5px; background: var(--hv-soft); font-weight: 650; }

.hv-nhanh [data-hv-cs-row="co"][aria-pressed="true"] { color: var(--st-wait-ink); background: var(--st-wait-bg); }

/* HV-CS-1 v2-9: hai thao tác chính, phần còn lại trong tấm chọn đáy. */
.mbhv-qa, .mbhv-qa:has(> .hv-pub), .mbhv-qa .hv-acts, .mbhv-qa:has(> .hv-pub) > .hv-acts {
  max-height: none; overflow: visible; flex-wrap: nowrap;
}
.mbhv-qa:has(> .hv-pub) { flex-direction: column; align-items: stretch; }
.mbhv-qa > .hv-pub { flex: none; }
.mbhv-qa .hv-acts { flex: 1 1 0; min-width: 0; }
.mbhv-qa .hv-acts > .hv-btn, .mbhv-qa .hv-more-w {
  flex: 1 1 0; min-width: 0;
}
.mbhv-qa .hv-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px;
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3;
}
.mbhv-qa .hv-acts { align-items: stretch; }
.mbhv-qa .hv-more-w > .hv-more { flex: 1 1 auto; width: 100%; }
.mbhv-qa .hv-acts .hv-btn { text-wrap: balance; }
.mbhv-qa .hv-menu { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
.mbhv-man .mbhv-dong { min-height: 44px; height: auto; padding-bottom: 8px; }