/* =====================================================================
   /d · ke_hoach.css — Kế hoạch & dự án của lead (docs/72 · mig 352 · D299, CEO chốt 11/10/2026).
   CHÉP khung mkt.css (chiến dịch MKT), tiền tố `khd-`. Không hex (L3): màu chức năng đi qua biến `--m` do JS đặt = var(--c-N)
   từ danh mục dm_chuc_nang_kh; nền nhạt dựng bằng color-mix.
   Quy ước vẽ: MÀU = chức năng · KIỂU VẼ = trạng thái · liên phòng = viền kép · kế hoạch tháng = vạch trái dày.
   Khác mkt.css đúng 3 khối: đèn tuần (.khd-den) · bảng phủ tháng (.khd-phu) · băng thiếu cập nhật (.khd-bao.thieu).
   ===================================================================== */

.khd-trang .sm:not(.btn):not(.input):not(.kpi){font-size:var(--fs-xs)}
.khd-trang .mono{font-family:var(--font-mono);font-size:var(--fs-xs)}
.khd-trang .table td.r,.khd-trang .table td.num{white-space:nowrap}

.khd-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3)}
.khd-kpis .kpi{cursor:pointer}
.khd-kpis .kpi:hover{box-shadow:var(--e2)}
.khd-kpis .kpi.xau .val{color:var(--bad)}
@media (max-width:900px){.khd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.khd-dieu-khien{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.khd-cua-so{min-width:170px;text-align:center;font-weight:600}
.khd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:var(--fs-xs);user-select:none;color:var(--ink);white-space:nowrap;flex:none}
.khd-chip.tat{opacity:.45;text-decoration:line-through}
.khd-chip.on{border-color:var(--accent);background:var(--accent-weak);color:var(--accent-text)}
.khd-chip[hidden]{display:none}
.khd-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;background:var(--m)}
.khd-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
.khd-legend[hidden]{display:none}
.khd-legend .khd-sw{display:inline-block;width:24px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:4px;position:static;padding:0;--m:var(--c-2)}
.khd-legend .khd-sw.khd-hd{height:10px}

/* ---------------------------------------------------------------- bảng phủ tháng (khác chiến dịch) */
.khd-phu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:var(--sp-2)}
@media (max-width:900px){.khd-phu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.khd-phu-o{border:1.5px solid var(--line);border-radius:var(--radius-ctl);padding:7px 9px;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;background:var(--panel)}
.khd-phu-o:hover{background:var(--panel-2)}
.khd-phu-o .t{font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.khd-phu-o .s{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.khd-phu-o.thieu{border-color:var(--bad-vivid);background:var(--bad-bg)}
.khd-phu-o.thieu .s{color:var(--bad);font-weight:600}
.khd-phu-o.nhap{border-style:dashed}
.khd-phu-o.hoan_thanh{background:var(--good-bg);border-color:var(--good-vivid)}
.khd-phu-o.qua_han{border-color:var(--bad-vivid)}
.khd-phu-o.qua_han .s{color:var(--bad);font-weight:600}
.khd-phu-o.cho_duyet{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--m) 22%,var(--panel)) 0 5px,color-mix(in srgb,var(--m) 6%,var(--panel)) 5px 10px)}

/* ---------------------------------------------------------------- đèn tuần (khác chiến dịch) */
.khd-den{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:700;flex:none;
  color:var(--panel);background:var(--none-vivid)}
.khd-den.X{background:var(--good)}
.khd-den.V{background:var(--warn)}
.khd-den.D{background:var(--bad-vivid)}
.khd-den.trong{background:transparent;border:1.5px dashed var(--none-vivid);color:var(--faint)}
.khd-tuan{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.khd-tuan .dong{display:grid;grid-template-columns:70px 16px minmax(0,1fr);gap:8px;align-items:start;font-size:var(--fs-sm);padding:6px 8px;border-radius:var(--radius-ctl);background:var(--panel-2)}
.khd-tuan .dong .l{color:var(--faint);font-size:var(--fs-xs)}
.khd-tuan .dong.ceo{box-shadow:inset 3px 0 0 var(--bad-vivid)}

/* ---------------------------------------------------------------- timeline */
.khd-tl{position:relative;margin-top:var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:auto;background:var(--panel)}
.khd-tl.thang{max-height:52vh}
.khd-tl.ngay{max-height:42vh}
.khd-tl{--khd-nhan-w:300px}
.khd-tl.ngay .khd-tl-ngay-in{min-width:0}
.khd-tl.ngay .khd-nhan{position:sticky;left:0;z-index:4}
.khd-tl.ngay .khd-dau{z-index:5}
.khd-hang.khd-dau.khd-dau-ngay .khd-ray{display:block}
.khd-dai-thang{display:flex;height:22px;border-bottom:1px solid var(--line)}
.khd-o-thang{flex:none;font-size:var(--fs-xs);font-weight:600;padding:3px 8px;border-left:1px solid var(--line);cursor:pointer;white-space:nowrap;color:var(--muted)}
.khd-o-thang:first-child{border-left:0}
.khd-o-thang:hover{background:var(--accent-weak)}
.khd-o-thang span{position:sticky;left:calc(var(--khd-nhan-w) + 8px)}
.khd-o-thang.chon{background:var(--accent-weak);color:var(--accent-text)}
.khd-dai-ngay{display:flex}
.khd-th-ngay.dau-thang{border-left:1px solid var(--muted)}
.khd-tl-in{position:relative;min-width:960px}
.khd-hang{display:flex;min-height:30px;border-bottom:1px solid var(--line)}
.khd-hang:last-child{border-bottom:0}
.khd-nhan{width:300px;flex:none;padding:5px 10px;display:flex;align-items:center;gap:8px;border-right:1px solid var(--line);
  background:var(--panel);overflow:hidden;white-space:nowrap;font-size:var(--fs-sm)}
.khd-nhan .t{overflow:hidden;text-overflow:ellipsis}
.khd-nhan .ma{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted)}
.khd-ray{flex:1;position:relative}
.khd-dau{background:var(--panel-2);font-weight:600;min-height:34px;position:sticky;top:0;z-index:3}
.khd-dau .khd-nhan{background:var(--panel-2)}
.khd-dau .khd-ray{display:flex}
.khd-th-thang{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid var(--line);
  cursor:pointer;font-size:var(--fs-sm);line-height:1.25}
.khd-th-thang:first-child{border-left:0}
.khd-th-thang:hover{background:var(--accent-weak)}
.khd-th-thang.chon{background:var(--accent-weak);color:var(--accent-text);box-shadow:inset 0 -3px 0 var(--accent)}
.khd-th-thang small{font-weight:400;color:var(--muted);font-size:var(--fs-xs)}
.khd-th-ngay{flex:none;text-align:center;font-size:var(--fs-xs);line-height:1.15;padding-top:4px;border-left:1px solid var(--line);color:var(--muted);font-weight:500}
.khd-th-ngay b{display:block;color:var(--ink)}
.khd-th-ngay i{display:block;font-style:normal}
.khd-th-ngay.cn{background:var(--line)}
.khd-th-ngay.nay{background:var(--accent-weak);color:var(--accent-text)}
.khd-tl.ngay.hep .khd-th-ngay i{display:none}
.khd-tl.ngay.hep .khd-th-ngay{padding-top:8px}
.khd-lan{background:var(--panel-2);font-weight:600;min-height:28px}
.khd-lan .khd-nhan{background:var(--panel-2)}
.khd-lan .dem{margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--fs-xs)}
.khd-lan.thieu .khd-nhan{box-shadow:inset 3px 0 0 var(--bad-vivid)}
.khd-lan .dem.do{color:var(--bad);font-weight:600}
.khd-hang.kh{cursor:pointer}
.khd-hang.kh .khd-nhan{padding-left:22px}
.khd-hang.kh:hover .khd-nhan{background:var(--panel-2)}
.khd-hang.hd .khd-nhan{padding-left:40px;color:var(--muted);font-size:var(--fs-xs)}
.khd-hang.tong{background:var(--panel-2);font-weight:600;position:sticky;bottom:0;z-index:3}
.khd-hang.tong .khd-nhan{background:var(--panel-2)}
.khd-tong-o{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);border-left:1px solid var(--line)}
.khd-nen{position:absolute;top:0;bottom:0;left:300px;right:0;pointer-events:none}
.khd-nen .vt{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.khd-nen .vw{position:absolute;top:34px;bottom:0;border-left:1px dashed var(--line)}
.khd-nen .cn{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--line) 45%,transparent)}
.khd-nen .nay{position:absolute;top:0;bottom:0;border-left:2px solid var(--ink);z-index:2}
.khd-nen .nay span{position:absolute;top:38px;left:3px;background:var(--ink);color:var(--panel);font-size:10px;padding:0 5px;border-radius:4px;white-space:nowrap}

/* Thanh: MÀU = chức năng (--m) · KIỂU VẼ = trạng thái · loại = viền */
.khd-bar{position:absolute;top:5px;bottom:5px;border-radius:6px;padding:0 7px;display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);
  white-space:nowrap;overflow:hidden;cursor:pointer;border:1.5px solid var(--m);color:var(--ink);z-index:1}
.khd-bar:hover{filter:brightness(.95);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 20%,transparent)}
.khd-bar.chon{box-shadow:0 0 0 2px var(--ink)}
.khd-bar .t{overflow:hidden;text-overflow:ellipsis}
.khd-bar.nhap{background:var(--panel);border-style:dashed}
.khd-bar.cho_duyet{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--m) 42%,var(--panel)) 0 5px,color-mix(in srgb,var(--m) 14%,var(--panel)) 5px 10px)}
.khd-bar.sap_chay{background:color-mix(in srgb,var(--m) 22%,var(--panel))}
.khd-bar.dang_chay{background:var(--m);color:var(--panel)}
.khd-bar.qua_han{background:var(--m);color:var(--panel);border:2px solid var(--bad-vivid);border-right-width:7px}
.khd-bar.hoan_thanh{background:var(--good-bg);border-color:var(--good-vivid);border-left:5px solid var(--m);color:var(--good)}   /* xong = xanh lá, vạch trái giữ màu chức năng */
.khd-bar.huy,.khd-bar.tu_choi{background:repeating-linear-gradient(0deg,var(--panel) 0 4px,var(--panel-2) 4px 8px);border-color:var(--none-vivid);
  color:var(--faint);text-decoration:line-through}
.khd-bar.lien_phong{box-shadow:inset 0 0 0 2px var(--panel),inset 0 0 0 3px var(--m)}
.khd-bar.lien_phong.chon{box-shadow:inset 0 0 0 2px var(--panel),inset 0 0 0 3px var(--m),0 0 0 2px var(--ink)}
.khd-bar.thang{border-left-width:6px}
.khd-bar .khd-den{width:13px;height:13px;font-size:9px}
.khd-bar.hd{top:8px;bottom:8px;border-width:1px}
.khd-bar.hd.xong{background:var(--good-bg);border-color:var(--good-vivid);color:var(--good)}
.khd-bar.hd.dang{background:color-mix(in srgb,var(--m) 55%,var(--panel))}
.khd-bar.hd.chua{background:var(--panel);border-color:color-mix(in srgb,var(--m) 60%,var(--panel))}
.khd-bar.hd.tre{background:var(--bad-bg);border:1.5px solid var(--bad-vivid);color:var(--bad);font-weight:600}
.khd-bar.cat-trai{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dotted}
.khd-bar.cat-phai{border-top-right-radius:0;border-bottom-right-radius:0}

/* ---------------------------------------------------------------- ⓘ tooltip + khối mở/gập (nếp D290) */
.khd-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;vertical-align:-3px;
  color:var(--faint);cursor:help;position:relative;border-radius:50%;flex:none}
.khd-tip .ic{width:14px;height:14px}
.khd-tip:hover,.khd-tip:focus-visible{color:var(--accent-text);outline:none;background:var(--accent-weak)}
.khd-tip::after{content:attr(data-tip);position:absolute;left:-6px;bottom:calc(100% + 8px);
  width:max-content;max-width:min(340px,80vw);padding:8px 10px;border-radius:var(--radius-ctl);background:var(--ink);color:var(--panel);
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:400;line-height:1.45;white-space:pre-line;text-align:left;text-transform:none;letter-spacing:0;
  box-shadow:var(--e3);opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-toast);transition:opacity var(--mo-fast) var(--ease-std)}
.khd-tip::before{content:"";position:absolute;left:4px;bottom:calc(100% + 3px);border:5px solid transparent;
  border-top-color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-toast)}
.khd-tip:hover::after,.khd-tip:focus-visible::after,.khd-tip:hover::before,.khd-tip:focus-visible::before{opacity:1;visibility:visible}
.khd-tip.duoi::after{bottom:auto;top:calc(100% + 8px)}
.khd-tip.duoi::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--ink)}
.khd-kpis .khd-tip::after{left:auto;right:-6px}
.khd-kpis .khd-tip::before{left:auto;right:4px}
.khd-trang .btn.ghost.on{background:var(--accent-weak);color:var(--accent-text);border-color:var(--accent)}

.khd-muc{margin-top:var(--sp-3)}
.khd-muc>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;user-select:none;padding:4px 6px 4px 2px;min-height:30px;
  border-radius:var(--radius-ctl);font-size:var(--fs-body)}
.khd-muc>summary::-webkit-details-marker{display:none}
.khd-muc>summary:hover{background:var(--panel-2)}
.khd-muc>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.khd-muc>summary .mui-ten{color:var(--muted);display:inline-flex;flex:none;transition:transform var(--mo-fast) var(--ease-std)}
.khd-muc[open]>summary .mui-ten{transform:rotate(90deg)}
.khd-muc>summary>b{white-space:nowrap}
.khd-muc-so{display:inline-block;margin-right:4px}
.khd-muc-phu{margin-left:auto;color:var(--muted);font-size:var(--fs-xs);font-weight:400;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khd-muc-phu .mono{color:var(--ink)}
.khd-muc-than{margin-top:var(--sp-1)}
.khd-muc-than .khd-tl{margin-top:0}

/* ---------------------------------------------------------------- trạng thái chữ */
.khd-st{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:500;padding:1px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.khd-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
/* Đèn trạng thái THEO NGHĨA (CEO 12/10, D308 — cùng nếp chip của Ticket): xong / hoàn thành = XANH LÁ · đang chạy / đang làm = màu chủ đạo ·
   chờ duyệt = VÀNG (đang chờ một người) · quá hạn / trễ = ĐỎ · nháp / sắp chạy / chưa tới = XÁM · huỷ / từ chối = xám gạch ngang. */
.khd-st.nhap,.khd-st.sap_chay,.khd-st.chua,.khd-st.huy,.khd-st.tu_choi{color:var(--muted);background:var(--panel-2)}
.khd-st.huy,.khd-st.tu_choi{text-decoration:line-through}
.khd-st.cho_duyet{color:var(--warn);background:var(--warn-bg)}
.khd-st.dang_chay,.khd-st.dang{color:var(--accent-text);background:var(--accent-weak)}
.khd-st.qua_han,.khd-st.tre{color:var(--bad);background:var(--bad-bg)}
.khd-st.hoan_thanh,.khd-st.xong{color:var(--good);background:var(--good-bg)}
.khd-loai{font-size:10.5px;font-weight:700;padding:0 6px;border-radius:4px;flex:none;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);text-transform:uppercase;letter-spacing:.03em}
.khd-loai.lien_phong{border-style:double;border-width:3px}

/* ---------------------------------------------------------------- khai báo (tầng ③ + slide-over) */
.khd-kb{position:relative;padding-left:16px}
.khd-kb::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:3px;background:var(--m)}
.khd-bao{border-radius:var(--radius-ctl);padding:7px 10px;font-size:var(--fs-sm);margin-top:var(--sp-2)}
.khd-bao.do{background:var(--bad-bg);color:var(--bad)}
.khd-bao.vang{background:var(--warn-bg);color:var(--warn)}
.khd-bao.thieu{background:var(--bad-bg);color:var(--bad);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.khd-bao .sub{color:var(--muted);font-size:var(--fs-xs)}
.khd-so{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-ctl);margin-top:var(--sp-3)}
.khd-so>div{padding:9px 12px;border-left:1px solid var(--line);min-width:0}
.khd-so>div:first-child{border-left:0}
.khd-so .k{font-size:var(--fs-xs);color:var(--muted)}
.khd-so .v{font-weight:600;font-size:var(--fs-body);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.khd-so .s{font-size:var(--fs-xs);color:var(--faint)}
.khd-tien-do{height:5px;background:var(--panel-2);border-radius:3px;margin-top:5px;overflow:hidden}
.khd-tien-do i{display:block;height:100%;background:var(--m)}
@media (max-width:760px){.khd-so{grid-template-columns:1fr 1fr}.khd-so>div:nth-child(3){border-left:0}.khd-so>div:nth-child(5){border-left:0}}
.khd-2cot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
@media (max-width:760px){.khd-2cot{grid-template-columns:1fr}}
.khd-khoi-t{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.khd-kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:7px 12px;font-size:var(--fs-sm)}
.khd-kv .k{color:var(--muted)}
.khd-ref{background:var(--panel-2);border-radius:var(--radius-ctl);padding:7px 10px;font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.khd-ht{border-left:2px solid var(--line);margin-left:5px;padding-left:14px}
.khd-ht .b{position:relative;padding-bottom:10px;font-size:var(--fs-sm)}
.khd-ht .b::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--none-vivid)}
.khd-ht .b.xong::before{background:var(--m);border-color:var(--m)}
.khd-ht .b.dang::before{border-color:var(--m);box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 25%,transparent)}
.khd-ht .b .l{color:var(--faint);font-size:var(--fs-xs)}
.khd-mini{position:relative;height:8px;background:var(--panel-2);border-radius:4px;min-width:140px}
.khd-mini i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--m)}
.khd-mini i.tre{background:var(--bad-vivid)}
.khd-mini i.xong{background:var(--none-vivid)}
.khd-mini b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.khd-nk summary{cursor:pointer;color:var(--muted);font-size:var(--fs-xs);margin-top:var(--sp-3)}
.khd-nk .dong{font-size:var(--fs-xs);color:var(--muted);padding:3px 0 3px 14px}
.khd-mt{display:flex;flex-wrap:wrap;gap:4px}
.khd-mt .khd-chip{cursor:default;height:22px}
.khd-tep{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.khd-tep a{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius-pill);text-decoration:none;color:var(--ink)}

/* ---------------------------------------------------------------- form tạo / sửa */
.khd-form .sec{margin-bottom:var(--sp-5)}
.khd-form h4{margin:0 0 10px;font-size:var(--fs-body);display:flex;align-items:center;gap:8px}
.khd-form h4 .so{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--panel);font-size:var(--fs-xs);display:inline-flex;align-items:center;justify-content:center}
.khd-form h4 .g{font-weight:400;color:var(--faint);font-size:var(--fs-xs)}
.khd-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.khd-luoi .full{grid-column:1/-1}
.khd-form label.f{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:4px}
.khd-form label.f b{color:var(--bad);font-weight:600}
.khd-form .input.loi{border-color:var(--bad-vivid);background:var(--bad-bg)}
.khd-cn-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){.khd-cn-luoi{grid-template-columns:repeat(5,minmax(0,1fr))}}
.khd-cn-the{border:1.5px solid var(--line);border-radius:var(--radius-ctl);padding:8px 9px;cursor:pointer;min-width:0;background:var(--panel)}
.khd-cn-the .t{font-weight:600;display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khd-cn-the .m{font-size:var(--fs-xs);color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khd-cn-the.chon{border-color:var(--m);background:color-mix(in srgb,var(--m) 9%,var(--panel));box-shadow:inset 0 0 0 1px var(--m)}
.khd-cn-the.loi{border-color:var(--bad-vivid)}
.khd-cn-the.khoa{opacity:.45;cursor:not-allowed}
.khd-loai-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.khd-nhanh{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.khd-hd-dong{display:grid;grid-template-columns:2fr 1fr 1fr 32px;gap:6px;margin-bottom:6px}
.khd-mt-chon{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:28px}
.khd-mt-goi-y{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-ctl);margin-top:6px}
.khd-mt-goi-y .o{padding:6px 10px;font-size:var(--fs-sm);cursor:pointer;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line)}
.khd-mt-goi-y .o:last-child{border-bottom:0}
.khd-mt-goi-y .o:hover{background:var(--panel-2)}
.khd-mt-goi-y .o .ma{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);flex:none}
.khd-mt-goi-y .o.chon{background:var(--accent-weak)}
.khd-chan{position:sticky;bottom:calc(-1 * var(--card-pad));background:var(--panel);border-top:1px solid var(--line);
  margin:var(--sp-4) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));padding:10px var(--card-pad);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.khd-thieu{color:var(--bad);font-size:var(--fs-xs)}
.khd-mau-o{width:22px;height:22px;border-radius:6px;display:inline-block;cursor:pointer;border:2px solid transparent;background:var(--m)}
.khd-mau-o.chon{border-color:var(--ink)}
.khd-hd-tbl td{vertical-align:middle}
.khd-ds-tbl{min-width:1100px}
.khd-ds-tbl td:nth-child(2){min-width:220px}
.khd-ds-tbl tr.khd-cho-toi>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.khd-loc-hang{flex-wrap:wrap;gap:var(--sp-2)}
.khd-loc{flex-wrap:wrap;min-width:0;flex:1 1 auto}
.khd-ds-tbl .khd-ky{position:sticky;right:0;background:var(--panel);white-space:nowrap;box-shadow:-6px 0 6px -6px color-mix(in srgb,var(--ink) 30%,transparent)}
.khd-ds-tbl thead .khd-ky{z-index:1}
.khd-ds-tbl tr:hover .khd-ky{background:var(--panel-2)}
.khd-tang{color:var(--warn);font-weight:600}
.kpi .delta a.khd-cho-toi{color:var(--accent-text);font-weight:650;text-decoration:none}
.kpi .delta a.khd-cho-toi:hover{text-decoration:underline}
.khd-ngay-cc{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin-bottom:var(--sp-2)}

/* =====================================================================
   Form rộng + ⑤ bảng đầu việc + ⑥ thảo luận (CEO 11/10 tối · mig 355)
   Khung ~60 % màn hình: dùng :has() nên không phải dọn class khi đóng / mở khung khác.
   ===================================================================== */
.slideover:has(.khd-form-rong),.slideover:has(.khd-kb-rong){width:min(max(60vw,940px),98vw)}
.khd-f-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.khd-f-tren{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-3);align-items:start}
@media (max-width:900px){.khd-f-tren{grid-template-columns:1fr}}
.khd-f-phai{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.khd-p{border:1px solid var(--line);border-radius:var(--radius-card);padding:10px 12px;background:var(--panel);min-width:0}
.khd-form-rong>.khd-p{margin-top:var(--sp-3)}
.khd-form .khd-p h4{margin:0 0 8px;font-size:var(--fs-sm)}
.khd-form .khd-p h4 .so{width:18px;height:18px}
.khd-form-rong label.f{margin-bottom:3px}
.khd-form-rong textarea.input{resize:vertical}
.khd-hang-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.khd-hang-o.ba{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr)}
.khd-hang-o>[hidden]{display:none}
.khd-loai-seg{display:flex;width:100%}
.khd-loai-seg button{flex:1}
.khd-pill-ds{display:flex;flex-wrap:wrap;gap:5px}
.khd-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--radius-pill);border:1.5px solid var(--line);
  background:var(--panel);cursor:pointer;font:inherit;font-size:var(--fs-xs);color:var(--ink);white-space:nowrap}
.khd-pill:hover{border-color:var(--m)}
.khd-pill.chon{border-color:var(--m);background:color-mix(in srgb,var(--m) 14%,var(--panel));font-weight:650}
.khd-pill.khoa{opacity:.4;cursor:not-allowed}
.khd-pill.loi{border-color:var(--bad-vivid)}
.khd-mt-o{position:relative}
.khd-mt-dd{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;max-height:240px;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-ctl);box-shadow:var(--e3)}
.khd-mt-dd[hidden]{display:none}
.khd-mt-dd .o{padding:6px 10px;font-size:var(--fs-sm);cursor:pointer;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line)}
.khd-mt-dd .o:last-child{border-bottom:0}
.khd-mt-dd .o:hover{background:var(--panel-2)}
.khd-mt-dd .o .ma{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);flex:none}
.khd-mt-dd .o .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khd-mt-chon{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.khd-mt-chon .khd-chip{height:24px}
#khd-f-ref .khd-ref{margin-top:6px}

/* ---- ⑤ bảng đầu việc: lưới kiểu bảng tính, ô chữ tự giãn, viền chỉ hiện khi rê / gõ */
.khd-p5{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.khd-dv-cuon{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-ctl)}
.khd-dv{min-width:830px}          /* vừa khung 60 % màn hình — 8 cột (D308 bỏ cột người nghiệm thu) không cuộn ngang */
.khd-dv-r{display:grid;grid-template-columns:32px minmax(130px,1.2fr) minmax(140px,1.4fr) minmax(110px,1fr) minmax(110px,1fr) 120px 104px 76px;
  border-bottom:1px solid var(--line);align-items:stretch}
.khd-dv-r:last-child{border-bottom:0}
.khd-dv-r.dau{background:var(--panel-2);font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.khd-dv-r.dau .c{padding:7px 6px;line-height:1.25}
.khd-dv-r .c{padding:3px 4px;min-width:0;border-left:1px solid var(--line);display:flex;align-items:flex-start}
.khd-dv-r .c:first-child{border-left:0}
.khd-dv-r .c.stt{flex-direction:column;align-items:center;padding-top:9px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-sm)}
.khd-dv-r:not(.dau):hover{background:color-mix(in srgb,var(--accent-weak) 45%,transparent)}
.khd-dv-r.da-xong .c.stt{color:var(--good);font-weight:700}
.khd-ta{width:100%;border:1px solid transparent;background:transparent;border-radius:6px;padding:5px 6px;font:inherit;font-size:var(--fs-sm);
  color:var(--ink);resize:none;overflow:hidden;line-height:1.4;min-height:30px}
.khd-ta:hover{border-color:var(--line)}
.khd-ta:focus{outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 2px var(--accent-weak)}
.khd-ta.loi{border-color:var(--bad-vivid);background:var(--bad-bg)}
.khd-ta::placeholder{color:var(--faint)}
.khd-dv-r .c.ten .khd-ta{font-weight:600}
.khd-sel{width:100%;height:30px;border:1px solid transparent;background:transparent;border-radius:6px;font:inherit;font-size:var(--fs-xs);
  color:var(--ink);padding:0 4px;cursor:pointer;margin-top:1px}
.khd-sel:hover{border-color:var(--line)}
.khd-sel:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.khd-ngay-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 7px;max-width:100%;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--panel);font:inherit;font-size:var(--fs-xs);font-weight:650;cursor:pointer;white-space:nowrap;color:var(--ink);margin-top:1px;
  font-variant-numeric:tabular-nums}
.khd-ngay-chip .ic{width:13px;height:13px;color:var(--muted)}
.khd-ngay-chip:hover{border-color:var(--accent)}
.khd-ngay-chip.loi{border-color:var(--bad-vivid);background:var(--bad-bg);color:var(--bad)}
.khd-dv-r .c.tac{gap:2px;align-items:center;padding-top:3px;justify-content:flex-end}
.khd-cl-nut{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  cursor:pointer;font:inherit;font-size:var(--fs-xs);color:var(--muted)}
.khd-cl-nut .ic{width:13px;height:13px}
.khd-cl-nut.co{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.khd-cl-nut.on{background:var(--accent-weak)}
.khd-xoa{display:inline-flex;align-items:center;justify-content:center;width:26px;height:28px;border:0;background:none;color:var(--faint);cursor:pointer;border-radius:6px}
.khd-xoa:hover{color:var(--bad);background:var(--bad-bg)}
.khd-cl{grid-column:1/-1;padding:6px 10px 10px 46px;display:flex;flex-direction:column;gap:3px;background:var(--panel-2);border-top:1px dashed var(--line)}
.khd-cl-i{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.khd-cl-ten,.khd-cl-moi{flex:1;border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 6px;font:inherit;font-size:var(--fs-sm);color:var(--ink)}
.khd-cl-ten:focus,.khd-cl-moi:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.khd-cl-moi{border:1px dashed var(--line);margin-left:22px;max-width:520px;flex:none;width:calc(100% - 22px)}
.khd-cl-i button{border:0;background:none;color:var(--faint);cursor:pointer;display:inline-flex}
.khd-cl-i button:hover{color:var(--bad)}
.khd-cl.xem{padding:4px 0;background:none;border:0}
.khd-cl .gach{text-decoration:line-through;color:var(--muted)}
.khd-dv-chan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.khd-ngay-pop{position:fixed;z-index:calc(var(--z-modal) + 5);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--e3);padding:10px 12px;width:310px}
.khd-ngay-pop .r{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.khd-ngay-pop label{font-size:var(--fs-xs);color:var(--muted);display:flex;flex-direction:column;gap:3px}
.khd-ngay-pop input{height:32px;border:1px solid var(--line);border-radius:6px;padding:0 6px;font:inherit;font-size:var(--fs-sm);background:var(--panel);color:var(--ink)}
.khd-ngay-pop .nhanh{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center;font-size:var(--fs-xs)}
.khd-ngay-pop .nhanh button{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--radius-pill);padding:3px 8px;font:inherit;font-size:var(--fs-xs);
  cursor:pointer;color:var(--ink)}
.khd-ngay-pop .nhanh button:hover{border-color:var(--accent);color:var(--accent-text)}
.khd-ngay-pop .g{margin-top:8px;font-size:var(--fs-xs);color:var(--muted)}
/* khai báo: bảng xem đầu việc */
.khd-dv-xem{table-layout:fixed;width:100%;min-width:760px}     /* table-layout:fixed chỉ tôn trọng width → chia % cho 9 cột */
.khd-dv-xem th:nth-child(1){width:3.5%}.khd-dv-xem th:nth-child(2){width:20%}.khd-dv-xem th:nth-child(3){width:14%}.khd-dv-xem th:nth-child(4){width:13%}
.khd-dv-xem th:nth-child(5){width:8.5%}.khd-dv-xem th:nth-child(6){width:14%}.khd-dv-xem th:nth-child(7){width:8.5%}.khd-dv-xem th:nth-child(8){width:8%}
.khd-dv-xem th:nth-child(9){width:10.5%}
.khd-dv-xem td.khd-kqd .khd-dai-nd{color:var(--good)}
.khd-sua-kqd{display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:2px 0 0;font:inherit;font-size:var(--fs-xs);font-weight:650;
  color:var(--muted);cursor:pointer}
.khd-sua-kqd .ic{width:12px;height:12px}
.khd-sua-kqd:hover,.khd-sua-kqd:focus-visible{color:var(--accent-text);outline:none;text-decoration:underline}
.khd-dv-xem th{white-space:normal;line-height:1.25;vertical-align:bottom}
.khd-dv-xem td{overflow-wrap:anywhere}
.khd-dv-xem td:last-child{white-space:normal!important}
.khd-dv-xem td{vertical-align:top}
.khd-dv-xem tr.da-xong>td:first-child{box-shadow:inset 3px 0 0 var(--good)}
.khd-xuong{white-space:pre-wrap}
.khd-dv-xem td .khd-xuong.sm{color:var(--muted)}
.khd-dat{color:var(--good);font-weight:650;font-size:var(--fs-xs)}
.khd-cl-tr>td{background:var(--panel-2)}
.khd-thao-luan{margin-top:4px}
/* Ô lưới mục ①–④ co được (select có bề rộng tự nhiên theo chữ dài nhất) · ⓘ ở cột phải mở sang TRÁI — tooltip ẩn vẫn chiếm vùng cuộn,
   mở sang phải là đẩy khung rộng thêm ~100px và hiện thanh cuộn ngang. */
.khd-hang-o>div,.khd-p{min-width:0}
.khd-hang-o .input,.khd-p select.input{width:100%;min-width:0}
.khd-f-phai .khd-tip::after{left:auto;right:-6px}
.khd-f-phai .khd-tip::before{left:auto;right:4px}
/* Lưới an toàn: tooltip ⓘ ẩn vẫn tính vào vùng cuộn — khung rộng không bao giờ hiện thanh cuộn ngang vì nó (bảng tự cuộn trong .tbl-wrap). */
#over-body:has(.khd-form-rong),#over-body:has(.khd-kb-rong){overflow-x:hidden}
.khd-2cot>div:last-child .khd-tip::after{left:auto;right:-6px}
.khd-2cot>div:last-child .khd-tip::before{left:auto;right:4px}

/* =====================================================================
   MÀN CHI TIẾT KẾ HOẠCH · chữ dài · thảo luận · hoàn thành (CEO 11/10 tối)
   ===================================================================== */
/* ---- chữ dài: gập theo số dòng (--n) + đáy mờ; rê / Tab = thẻ xem nhanh #khd-peek; "Xem thêm ▾" mở tại chỗ */
.khd-dai{min-width:0}
.khd-dai-nd{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--n,3);overflow:hidden}
.khd-dai.mo .khd-dai-nd{display:block;-webkit-line-clamp:unset;overflow:visible}
.khd-dai.tran:not(.mo) .khd-dai-nd{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.3em),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 1.3em),transparent);cursor:help}
.khd-dai-nd:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.khd-dai.tran:not(.mo) .khd-dai-nd:focus-visible{-webkit-mask-image:none;mask-image:none;outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.khd-xem-du{border:0;background:none;padding:2px 0 0;font:inherit;font-size:var(--fs-xs);font-weight:650;color:var(--accent-text);cursor:pointer}
.khd-xem-du:hover{text-decoration:underline}
.khd-xem-du[hidden]{display:none}
#khd-peek{position:fixed;z-index:calc(var(--z-toast) + 1);background:var(--ink);color:var(--panel);border-radius:var(--radius-ctl);padding:8px 11px;
  font-size:var(--fs-sm);line-height:1.5;box-shadow:var(--e3);pointer-events:none;max-width:calc(100vw - 16px)}
#khd-peek[hidden]{display:none}
#khd-peek .n{font-size:var(--fs-xs);font-weight:650;opacity:.72;margin-bottom:3px}
#khd-peek .c{white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:hidden}
#khd-peek .con{font-size:var(--fs-xs);opacity:.72;margin-top:4px;font-style:italic}
#khd-peek .con[hidden]{display:none}
/* ô nhập dài: bộ đếm góc dưới phải */
.khd-o-dem{position:relative}
.khd-dem{display:block;text-align:right;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px}
.khd-dem[hidden]{display:none}
.khd-dem.gan{color:var(--warn);font-weight:650}
.khd-o-dem>.khd-dem{position:absolute;right:9px;bottom:6px;margin:0;background:var(--panel);padding:0 3px;border-radius:4px;pointer-events:none}
.khd-o-dem>textarea{padding-bottom:20px}
.khd-form textarea.input{line-height:1.5}

/* ---- đầu màn chi tiết: mã · chip · trạng thái / tên + ≤ 3 nút + ⋯ / chip nhảy — DÍNH trong khung trượt */
.khd-kb-dau{display:block}
.khd-kb-dong1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs)}
.khd-kb-dong1 .khd-chip{height:22px}
.khd-kb-dong1 .khd-st{outline:none}
.khd-kb-dong2{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-top:5px}
.khd-kb-ten{margin:0;font-size:var(--fs-h2);line-height:1.3;min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.khd-kb-nut{flex:none;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#over-body .khd-kb-dau{position:sticky;top:calc(-1 * var(--card-pad));z-index:6;background:var(--panel);
  margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0 calc(-16px - var(--card-pad));
  padding:calc(var(--card-pad) - 4px) var(--card-pad) 8px calc(16px + var(--card-pad));border-bottom:1px solid transparent;
  transition:box-shadow var(--mo-fast) var(--ease-std),border-color var(--mo-fast) var(--ease-std)}
#over-body .khd-kb-dau.cuon{border-bottom-color:var(--line);box-shadow:0 8px 12px -10px color-mix(in srgb,var(--ink) 40%,transparent)}
#over-body [data-khd-neo]{scroll-margin-top:var(--khd-dau-h,96px)}
.khd-nhay{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.khd-nhay button{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius-pill);font:inherit;font-size:var(--fs-xs);color:var(--muted);cursor:pointer}
.khd-nhay button:hover,.khd-nhay button:focus-visible{border-color:var(--accent);color:var(--accent-text);outline:none}
.khd-nhay b{color:var(--ink);font-variant-numeric:tabular-nums}
.khd-nhay .do{color:var(--bad);font-weight:650}
.khd-nhay .moi{color:var(--accent-text);font-weight:650}
/* menu ⋯ — chỉ mở bằng bấm (nếp popover click-only) */
.khd-them{position:relative}
.khd-them-nut{font-size:18px;line-height:1;letter-spacing:1px}
.khd-them-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:250px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-ctl);box-shadow:var(--e3);padding:4px;display:flex;flex-direction:column}
.khd-them-menu[hidden]{display:none}
.khd-them-menu button{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:7px 10px;border-radius:6px;
  font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;white-space:nowrap}
.khd-them-menu button:hover,.khd-them-menu button:focus-visible{background:var(--panel-2);outline:none}
.khd-them-menu button.xau{color:var(--bad)}
.khd-them-menu .ic{width:15px;height:15px;color:var(--muted);flex:none}
.khd-mi-trong{width:15px;flex:none}
.khd-them-vach{height:1px;background:var(--line);margin:4px 2px}
.khd-bao-them{margin-top:var(--sp-2)}
.khd-bao-an[hidden]{display:none}

/* ---- thân màn chi tiết */
.khd-kq-the{border-left:3px solid var(--m,var(--accent));background:color-mix(in srgb,var(--m,var(--accent)) 6%,var(--panel));padding:7px 10px;
  border-radius:0 var(--radius-ctl) var(--radius-ctl) 0;font-weight:500;min-width:0}
.khd-kq-the.dat{--m:var(--good-vivid)}
.khd-cuon{max-height:12em;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.khd-cuon-cao{max-height:min(22em,40vh)}
.khd-md-dat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.khd-md-n{font-size:var(--fs-xs);color:var(--muted);margin-bottom:3px}
@media (max-width:900px){.khd-md-dat{grid-template-columns:1fr}}
.khd-can-ceo{color:var(--bad);margin-left:4px}
.khd-tuan .dong[hidden]{display:none}
.khd-tuan>.btn{margin-top:4px}
.khd-dv-xem .khd-stt{color:var(--muted)}
.khd-dv-xem .khd-dv-ten .khd-dai-nd{font-weight:650}
.khd-dv-xem .khd-dv-ct{color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
.khd-dv-xem td .khd-dai.tran,.khd-dv-xem td .khd-dai.mo,.khd-dv-xem td .khd-dai.tran .khd-dai-nd{cursor:pointer}
.khd-dv-xem .khd-xem-du{display:none}         /* bảng: bấm ô để mở cả dòng — không rải nút "Xem thêm" khắp bảng */
.khd-dv-xem tr.mo>td{background:color-mix(in srgb,var(--accent-weak) 35%,transparent)}
.khd-dv-nut{white-space:normal!important}
.khd-dv-nut>*{margin:1px 0;max-width:100%}
.khd-dv-nut .btn.sm{padding:0 7px}
.khd-kb .tbl-wrap{overflow-y:hidden}
.khd-trang .ghi-moi{animation:sc-ghi-moi 4s var(--ease-out)}
.khd-trang tr.ghi-moi>td{animation:sc-ghi-moi 4s var(--ease-out)}

/* ---- hộp thoại: bảng đầu việc · hoàn thành · duyệt / sửa */
.modal.lon.khd-modal-dv{width:min(1180px,96vw)}
.khd-modal-dv .khd-dv{min-width:950px}
.khd-modal-dv .khd-dv-r{grid-template-columns:32px minmax(150px,1.2fr) minmax(160px,1.4fr) minmax(130px,1fr) minmax(130px,1fr) 140px 128px 76px}
.modal.lon.khd-chot{width:min(1040px,96vw)}
.modal.lon.khd-m-vua{width:min(780px,96vw)}
.khd-so.khd-so-nho{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
@media (max-width:760px){.khd-so.khd-so-nho{grid-template-columns:1fr 1fr}}
.khd-so .v.khd-den-chuoi{gap:3px}
.khd-chot-mo .r{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm)}
.khd-chot-mo .r .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khd-chot-xn{display:flex;gap:6px;align-items:center;margin-top:8px;padding:7px 10px;border:1px dashed var(--line);border-radius:var(--radius-ctl);background:var(--panel)}
.khd-chot-2cot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;align-items:start}
@media (max-width:760px){.khd-chot-2cot{grid-template-columns:1fr}}
#modal-body .khd-form textarea.input{width:100%}
#khd-m-luu:disabled{opacity:.5;cursor:not-allowed}
.khd-m-goi-y{margin-right:auto;align-self:center}
.khd-m-goi-y:empty{display:none}

/* ---- ô chữ trong bảng soạn đầu việc: không gõ thì gập 3 dòng + đáy mờ, bấm vào mở hết (tối đa 40 % màn, cuộn trong ô) */
.khd-ta:not(:focus){max-height:calc(4.2em + 12px);overflow:hidden}
.khd-ta.dai:not(:focus){-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 65%,transparent)}
.khd-ta:focus{max-height:40vh;overflow-y:auto}

/* ---- thảo luận */
.khd-thao-luan{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);padding:6px 12px 10px}
.khd-bl-ds{display:flex;flex-direction:column}
.khd-luong{border-bottom:1px solid var(--line);padding:2px 0}
.khd-luong:last-child{border-bottom:0}
.khd-luong[hidden],.khd-bl[hidden]{display:none}
.khd-bl{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;padding:8px 6px;border-radius:var(--radius-ctl)}
.khd-bl.tra{grid-template-columns:24px minmax(0,1fr);padding:6px}
.khd-bl.moi{background:color-mix(in srgb,var(--accent-weak) 55%,transparent)}
.khd-av{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:13px;color:var(--panel);background:var(--av,var(--c-6));flex:none;user-select:none}
.khd-av.nho{width:24px;height:24px;font-size:11px}
.khd-bl-than{min-width:0}
.khd-bl-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm)}
.khd-bl-dau .ai{font-weight:650}
.khd-bl-dau .luc{color:var(--faint);font-size:var(--fs-xs)}
.khd-vai{font-size:10.5px;font-weight:650;padding:0 7px;border-radius:var(--radius-pill);background:var(--panel-2);color:var(--muted);line-height:18px}
.khd-vai.duyet{background:var(--warn-bg);color:var(--warn)}
.khd-vai.pt{background:var(--accent-weak);color:var(--accent-text)}
.khd-moi-tag{font-size:10px;font-weight:700;color:var(--panel);background:var(--accent);padding:0 6px;border-radius:var(--radius-pill);line-height:16px}
.khd-bl-nd{font-size:var(--fs-sm);margin-top:2px;line-height:1.5}
.khd-at{color:var(--accent-text);font-weight:650}
.khd-at.toi{background:var(--warn-bg);color:var(--warn);padding:0 3px;border-radius:4px}
.khd-bl-anh{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.khd-bl-anh .tk-anh{width:72px;height:72px;margin:0}
.khd-bl-tac{display:flex;gap:12px;margin-top:3px}
.khd-bl-tac button{border:0;background:none;padding:0;font:inherit;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;font-weight:650}
.khd-bl-tac button:hover,.khd-bl-tac button:focus-visible{color:var(--accent-text);outline:none;text-decoration:underline}
.khd-bl-tra-ds{margin-left:41px;border-left:2px solid var(--line);padding-left:6px}
.khd-bl-hien{border:0;background:none;font:inherit;font-size:var(--fs-xs);font-weight:650;color:var(--accent-text);cursor:pointer;padding:6px}
.khd-bl-hien:hover{text-decoration:underline}
.khd-bl-rong{margin:6px 0 2px}
.khd-tra-o:empty{display:none}
.khd-tra-o{margin-left:41px;padding:0 0 8px 8px}
.khd-soan{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.khd-soan.tra{grid-template-columns:24px minmax(0,1fr);border-top:0;padding-top:4px}
.khd-bl-ds:empty+.khd-soan,.khd-bl-rong+.khd-soan{border-top:0}
.khd-soan-o{border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--panel);min-width:0}
.khd-soan-o:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
.khd-soan-o textarea{display:block;border:0;box-shadow:none;background:transparent;width:100%;resize:none;padding:8px 10px;font:inherit;
  font-size:var(--fs-sm);line-height:1.5;color:var(--ink);min-height:0}
.khd-soan-o textarea:focus{outline:none}
.khd-soan-o textarea::placeholder{color:var(--faint)}
.khd-soan-anh:empty{display:none}
.khd-soan-anh{padding:0 8px}
.khd-soan-thanh{display:flex;align-items:center;gap:6px;padding:4px 6px 6px;flex-wrap:wrap}
.khd-at-nhanh{border:1px dashed var(--line);background:none;border-radius:var(--radius-pill);padding:1px 9px;height:24px;font:inherit;font-size:var(--fs-xs);color:var(--muted);cursor:pointer}
.khd-at-nhanh:hover,.khd-at-nhanh:focus-visible{border-color:var(--accent);color:var(--accent-text);outline:none}
.khd-soan-goi{margin-left:auto;display:flex;align-items:center;gap:8px}
.khd-soan-goi .khd-dem{margin:0}
.khd-phim{font-size:11px;color:var(--faint)}
.khd-soan-goi .btn:disabled{opacity:.45;cursor:not-allowed}
.khd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){.khd-phim{display:none}.khd-bl-tra-ds,.khd-tra-o{margin-left:16px}}