/* ============================================================
   v4.40 C2 — XIN Ý KIẾN – PHÊ DUYỆT (biểu mẫu mới, chi tiết phiếu, lớp quyết, lối vào Báo cáo tuần / Soạn việc / điện thoại).
   Tiền tố .ykpd- (biểu mẫu) · .ykxem- (chi tiết phiếu) · .ykqd- (lớp quyết) · .sv-yk* (thẻ Soạn việc) · .mbhv-ykv / .mbbc-yk (điện thoại).
   Chỉ dùng biến màu có sẵn (--primary, --primary-soft, --line, --ink*, --grey, --warn, --danger, --success) ⇒ chạy đủ 3 giao
   diện navy / do / luxe. Sheet điện thoại (mbSheet) dùng bộ biến --m* do .mb-sheet-wrap tự khai (mobile.css).
   ============================================================ */

/* ---- Biểu mẫu (máy tính: lớp chồng, lưới .dlg-b 2 cột) ---- */
.dlg-b.ykpd textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.dlg-b.ykpd .hint { margin: 4px 0 0; }
.ykpd-viec { padding: 9px 11px; background: var(--primary-soft); border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.ykpd-viec small { color: var(--ink-3); }
.ykpd-ghi { margin: 0; color: var(--ink-3); }
.ykpd-tien { margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink); background: #fff4e0; background: color-mix(in srgb, var(--warn) 18%, #fff); border: 1px solid var(--warn); border-radius: 6px; padding: 6px 9px; }
.ykpd-dem { float: right; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.ykpd-nhac { font-size: var(--fs-xs); color: var(--ink-2); background: var(--grey); border-left: 3px solid var(--primary); border-radius: 4px; padding: 6px 10px; }
.ykpd-loi { color: var(--danger); font-weight: 700; font-size: var(--fs-sm); background: #fdecea; background: color-mix(in srgb, var(--danger) 10%, #fff); border: 1px solid var(--danger); border-radius: 6px; padding: 8px 10px; }
.ykpd-loi[hidden], .ykpd-tien[hidden] { display: none; }

/* bối cảnh do hệ thống tổng hợp — thu gọn trong <details>, chữ chỉ đọc */
.ykpd-bc-d { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ykpd-bc-d > summary { cursor: pointer; padding: 8px 11px; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); list-style-position: inside; }
.ykpd-bc-d[open] > summary { border-bottom: 1px solid var(--line); }
.ykpd-bc-gt { margin: 8px 11px 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.ykpd-muc { display: flex; flex-direction: column; gap: 2px; margin: 0 11px 8px; }
.ykpd-muc-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--ink); }
.ykpd-muc-r:last-child { border-bottom: 0; }
.ykpd-muc-t { min-width: 0; font-weight: 600; }
.ykpd-luon { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.dlg-b .ykpd-muc-cb, .ykpd-muc-cb { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.ykpd-muc-cb input { width: auto; margin: 0; }
.ykpd-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); background: var(--grey); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 340px; overflow-y: auto; }
.ykpd-bc-d .ykpd-pre { margin: 0 11px 11px; }
.ykpd-bc-cho { padding: 10px 11px; color: var(--ink-3); font-size: var(--fs-sm); border: 1px dashed var(--line); border-radius: 8px; }
.ykpd-bc-bao { padding: 8px 11px; font-size: var(--fs-sm); color: var(--ink); background: #fff4e0; background: color-mix(in srgb, var(--warn) 12%, #fff); border: 1px solid var(--line); border-radius: 8px; }

/* ---- Chi tiết phiếu (xemYK) + lớp quyết ---- */
.ykxem-o { padding: 9px 11px; background: var(--grey); border-radius: 6px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.ykxem-viec { background: var(--primary-soft); border: 1px solid var(--line); }
.ykxem-o a { color: var(--primary); }
.ykxem-mo { color: var(--ink-3); }
.ykxem-an { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.ykxem-cho { background: #fff4e0; background: color-mix(in srgb, var(--warn) 14%, #fff); }
.ykxem-xong { background: #eaf6ee; background: color-mix(in srgb, var(--success) 10%, #fff); }
.ykxem-yk { margin-top: 6px; font-weight: 600; }
.ykxem-yk > span { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.ykqd-m { margin: 2px 0 6px; }
.ykqd-m:last-child { margin-bottom: 0; }
.dlg-b.ykqd textarea { resize: vertical; min-height: 80px; line-height: 1.45; }

/* ---- Lối vào ---- */
.ykso-link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); text-decoration: none; }
.ykso-link:hover { text-decoration: underline; }
.ykbc-nut button { display: inline-flex; align-items: center; gap: 6px; }

/* thẻ "Xin ý kiến – phê duyệt" của Soạn việc mới: ô tìm + danh sách chọn việc (≤ 20 dòng) */
.dlg-b.sv-b .sv-loivao input[type="search"] { width: 100%; padding: 6px 8px; font-size: var(--fs-sm); }
.sv-ykds { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
.sv-ykv { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 6px; padding: 6px 9px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.sv-ykv small { color: var(--ink-3); font-size: var(--fs-xs); }
.sv-ykv:hover { background: var(--primary-soft); }
.sv-ykv.on { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.sv-ykv:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---- Điện thoại (sheet đáy — biến --m*) ---- */
.ykpd-mb { display: flex; flex-direction: column; }
.ykpd-mb .mb-field .lb { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }   /* tránh luật .lb (bảng xếp hạng) phủ lên nhãn ô */
.ykpd-mb .mb-field .lb label { font: inherit; color: inherit; margin: 0; }
.ykpd-mb .mb-field .hint { margin: 6px 0 0; }
.ykpd-mb .ykpd-viec { background: var(--msurf2); border-color: var(--mbd); color: var(--mink); font-size: 14px; border-radius: 12px; padding: 12px; }
.ykpd-mb .ykpd-viec small { color: var(--msub); }
.ykpd-mb .ykpd-dem { float: none; margin-left: 6px; color: var(--msub); font-size: 12px; }
.ykpd-mb .ykpd-nhac { text-align: left; margin: 0 0 12px; background: var(--mtag-blue); color: var(--mink); border-left-color: var(--mbrand); font-size: 13px; }
.ykpd-mb .ykpd-ghi { text-align: left; margin: 0 2px 12px; }
.ykpd-mb .ykpd-tien { background: var(--mtag-amber); color: var(--mink); border-color: var(--mwarn); font-size: 13px; }
.ykpd-mb .ykpd-loi { margin: 0 0 12px; background: var(--mtag-red); color: var(--mred); border-color: var(--mred); font-size: 14px; }
.ykpd-mb .ykpd-bc-d { background: var(--msurf); border-color: var(--mbd); }
.ykpd-mb .ykpd-bc-d > summary { color: var(--mbrand); font-size: 14px; padding: 12px; min-height: 44px; }
.ykpd-mb .ykpd-bc-d[open] > summary { border-bottom-color: var(--mbd); }
.ykpd-mb .ykpd-bc-gt, .ykpd-mb .ykpd-luon { color: var(--msub); }
.ykpd-mb .ykpd-muc-r { border-bottom-color: var(--mbd); color: var(--mink); font-size: 14px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0; }
.ykpd-mb .ykpd-muc-cb { font-size: 13px; color: var(--mink); min-height: 40px; }
.ykpd-mb .ykpd-muc-cb input { width: 20px; height: 20px; }
.ykpd-mb .ykpd-pre { background: var(--msurf2); color: var(--mink); border-color: var(--mbd); font-size: 14px; max-height: none; overflow-y: visible; }
.ykpd-mb .ykpd-bc-cho, .ykpd-mb .ykpd-bc-bao { color: var(--mink); border-color: var(--mbd); background: var(--msurf2); font-size: 14px; }
.ykpd-mbnut { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ykpd-mbnut .mb-cta { min-height: 44px; }
.ykpd-mb input[type="date"].mb-inp { min-height: 44px; }
.mb-sheet-b .ykpd-mb, .mb-sheet-b .ykpd-mb * { max-width: 100%; }
.mbbc-yk { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 15px; }
.mbhv-ykv { align-items: center; }
.mbhv-ykv .mbhv-ykv-phu { display: block; font-size: 12px; font-weight: 500; color: var(--msub); margin-top: 2px; }