/* =====================================================================
   /d · mkt.css — Chiến dịch Marketing (docs/58 v3 · mig 298).
   Tiền tố `cd-` cho mọi class. 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 D1; 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 (không thêm bảng màu thứ hai).
   CEO 10/10: ghi chú mô tả hệ thống → ⓘ tooltip (`.cd-tip`) · bảng ①②③ là khối mở/gập (`.cd-muc` = <details>).
   ===================================================================== */

/* Chữ nhỏ · mã: kit không có `.sm`/`.mono` dùng chung nên khai trong phạm vi trang (không rò sang trang khác). */
.cd-trang .sm:not(.btn):not(.input):not(.kpi){font-size:var(--fs-xs)}
.cd-trang .mono{font-family:var(--font-mono);font-size:var(--fs-xs)}
.cd-trang .table td.r,.cd-trang .table td.num{white-space:nowrap}

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

.cd-dieu-khien{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.cd-cua-so{min-width:170px;text-align:center;font-weight:600}
.cd-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)}
.cd-chip.tat{opacity:.45;text-decoration:line-through}
.cd-chip.on{border-color:var(--accent);background:var(--accent-weak);color:var(--accent-text)}
.cd-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;background:var(--m)}
.cd-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)}
.cd-legend[hidden]{display:none}   /* display:flex đè hidden — phải khai riêng */
.cd-legend .cd-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)}
.cd-legend .cd-sw.cd-hd{height:10px}

/* ---------------------------------------------------------------- timeline */
.cd-tl{position:relative;margin-top:var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:auto;background:var(--panel)}
.cd-tl.thang{max-height:48vh}
.cd-tl.ngay{max-height:42vh}
.cd-tl{--cd-nhan-w:300px}
/* ② trượt ngang cả khung 3 tháng: cột tên ghim trái, đầu bảng ghim trên (CEO 30/09) */
.cd-tl.ngay .cd-tl-ngay-in{min-width:0}
.cd-tl.ngay .cd-nhan{position:sticky;left:0;z-index:4}
.cd-tl.ngay .cd-dau{z-index:5}
.cd-hang.cd-dau.cd-dau-ngay .cd-ray{display:block}
.cd-dai-thang{display:flex;height:22px;border-bottom:1px solid var(--line)}
.cd-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)}
.cd-o-thang:first-child{border-left:0}
.cd-o-thang:hover{background:var(--accent-weak)}
.cd-o-thang span{position:sticky;left:calc(var(--cd-nhan-w) + 8px)}
.cd-o-thang.chon{background:var(--accent-weak);color:var(--accent-text)}
.cd-dai-ngay{display:flex}
.cd-th-ngay.dau-thang{border-left:1px solid var(--muted)}
.cd-tl-in{position:relative;min-width:960px}
.cd-hang{display:flex;min-height:30px;border-bottom:1px solid var(--line)}
.cd-hang:last-child{border-bottom:0}
.cd-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)}
.cd-nhan .t{overflow:hidden;text-overflow:ellipsis}
.cd-nhan .ma{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted)}
.cd-ray{flex:1;position:relative}
.cd-dau{background:var(--panel-2);font-weight:600;min-height:34px;position:sticky;top:0;z-index:3}
.cd-dau .cd-nhan{background:var(--panel-2)}
.cd-dau .cd-ray{display:flex}
.cd-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}
.cd-th-thang:first-child{border-left:0}
.cd-th-thang:hover{background:var(--accent-weak)}
.cd-th-thang.chon{background:var(--accent-weak);color:var(--accent-text);box-shadow:inset 0 -3px 0 var(--accent)}
.cd-th-thang small{font-weight:400;color:var(--muted);font-size:var(--fs-xs)}
.cd-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}
.cd-th-ngay b{display:block;color:var(--ink)}
.cd-th-ngay.cn{background:var(--line)}
.cd-th-ngay.nay{background:var(--accent-weak);color:var(--accent-text)}
.cd-lan{background:var(--panel-2);font-weight:600;min-height:28px}
.cd-lan .cd-nhan{background:var(--panel-2)}
.cd-lan .dem{margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--fs-xs)}
.cd-hang.cd{cursor:pointer}
.cd-hang.cd .cd-nhan{padding-left:22px}
.cd-hang.cd:hover .cd-nhan{background:var(--panel-2)}
.cd-hang.hd .cd-nhan{padding-left:40px;color:var(--muted);font-size:var(--fs-xs)}
.cd-hang.tong{background:var(--panel-2);font-weight:600;position:sticky;bottom:0;z-index:3}
.cd-hang.tong .cd-nhan{background:var(--panel-2)}
.cd-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)}
.cd-nen{position:absolute;top:0;bottom:0;left:300px;right:0;pointer-events:none}
.cd-nen .vt{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.cd-nen .vw{position:absolute;top:34px;bottom:0;border-left:1px dashed var(--line)}
.cd-nen .cn{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--line) 45%,transparent)}
.cd-nen .nay{position:absolute;top:0;bottom:0;border-left:2px solid var(--ink);z-index:2}
.cd-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 */
.cd-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}
.cd-bar:hover{filter:brightness(.95);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 20%,transparent)}
.cd-bar.chon{box-shadow:0 0 0 2px var(--ink)}
.cd-bar .t{overflow:hidden;text-overflow:ellipsis}
.cd-bar.nhap{background:var(--panel);border-style:dashed}
.cd-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)}
.cd-bar.sap_chay{background:color-mix(in srgb,var(--m) 22%,var(--panel))}
.cd-bar.dang_chay{background:var(--m);color:var(--panel)}
.cd-bar.qua_han{background:var(--m);color:var(--panel);border:2px solid var(--bad-vivid);border-right-width:7px}
.cd-bar.hoan_thanh{background:var(--panel-2);border-color:var(--line);border-left:5px solid var(--m);color:var(--muted)}
.cd-bar.ctbh{background:repeating-linear-gradient(90deg,var(--panel) 0 6px,var(--panel-2) 6px 12px);border:1px dashed var(--none-vivid);
  border-left:5px solid var(--m);color:var(--muted)}
.cd-bar.huy,.cd-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}
.cd-bar.hd{top:8px;bottom:8px;border-width:1px}
.cd-bar.hd.xong{background:color-mix(in srgb,var(--m) 14%,var(--panel));border-color:color-mix(in srgb,var(--m) 40%,var(--panel));color:var(--muted)}
.cd-bar.hd.dang{background:color-mix(in srgb,var(--m) 55%,var(--panel))}
.cd-bar.hd.chua{background:var(--panel);border-color:color-mix(in srgb,var(--m) 60%,var(--panel))}
.cd-bar.hd.tre{background:var(--bad-bg);border:1.5px solid var(--bad-vivid);color:var(--bad);font-weight:600}
.cd-bar.cat-trai{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dotted}
.cd-bar.cat-phai{border-top-right-radius:0;border-bottom-right-radius:0}
/* ---------------------------------------------------------------- ⓘ tooltip + khối mở/gập (CEO 10/10)
   Ghi chú MÔ TẢ HỆ THỐNG không rải chữ ra màn: nằm ở ⓘ cạnh tiêu đề, rê chuột / Tab vào thì hiện.
   Tooltip thuần CSS (`::after` đọc `attr(data-tip)`), nền --ink chữ --panel nên dark mode tự đảo. */
.cd-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}
.cd-tip .ic{width:14px;height:14px}
.cd-tip:hover,.cd-tip:focus-visible{color:var(--accent-text);outline:none;background:var(--accent-weak)}
.cd-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)}
.cd-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)}
.cd-tip:hover::after,.cd-tip:focus-visible::after,.cd-tip:hover::before,.cd-tip:focus-visible::before{opacity:1;visibility:visible}
.cd-tip.duoi::after{bottom:auto;top:calc(100% + 8px)}
.cd-tip.duoi::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--ink)}
/* ⓘ trong ô KPI nằm sát mép phải ô (nhãn flex space-between) → tooltip neo mép phải cho khỏi tràn */
.cd-kpis .cd-tip::after{left:auto;right:-6px}
.cd-kpis .cd-tip::before{left:auto;right:4px}
.cd-trang .btn.ghost.on{background:var(--accent-weak);color:var(--accent-text);border-color:var(--accent)}

.cd-muc{margin-top:var(--sp-3)}
.cd-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)}
.cd-muc>summary::-webkit-details-marker{display:none}
.cd-muc>summary:hover{background:var(--panel-2)}
.cd-muc>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cd-muc>summary .mui-ten{color:var(--muted);display:inline-flex;flex:none;transition:transform var(--mo-fast) var(--ease-std)}
.cd-muc[open]>summary .mui-ten{transform:rotate(90deg)}
.cd-muc>summary>b{white-space:nowrap}
.cd-muc-so{display:inline-block;margin-right:4px}
.cd-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}
.cd-muc-phu .mono{color:var(--ink)}
.cd-muc-than{margin-top:var(--sp-1)}
.cd-muc-than .cd-tl{margin-top:0}

/* ---------------------------------------------------------------- trạng thái chữ */
.cd-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}
.cd-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.cd-st.nhap,.cd-st.huy,.cd-st.tu_choi,.cd-st.ctbh,.cd-st.hoan_thanh,.cd-st.chua{color:var(--muted);background:var(--panel-2)}
.cd-st.cho_duyet,.cd-st.sap_chay{color:var(--warn);background:var(--warn-bg)}
.cd-st.dang_chay,.cd-st.dang{color:var(--good);background:var(--good-bg)}
.cd-st.qua_han,.cd-st.tre{color:var(--bad);background:var(--bad-bg)}
.cd-st.xong{color:var(--muted);background:var(--panel-2)}

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

/* ---------------------------------------------------------------- form tạo / sửa */
.cd-form .sec{margin-bottom:var(--sp-5)}
.cd-form h4{margin:0 0 10px;font-size:var(--fs-body);display:flex;align-items:center;gap:8px}
.cd-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}
.cd-form h4 .g{font-weight:400;color:var(--faint);font-size:var(--fs-xs)}
.cd-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cd-luoi .full{grid-column:1/-1}
.cd-form label.f{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:4px}
.cd-form label.f b{color:var(--bad);font-weight:600}
.cd-form .input.loi{border-color:var(--bad-vivid);background:var(--bad-bg)}
.cd-cn-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cd-cn-the{border:1.5px solid var(--line);border-radius:var(--radius-ctl);padding:9px 10px;cursor:pointer;min-width:0;background:var(--panel)}
.cd-cn-the .t{font-weight:600;display:flex;align-items:center;gap:6px}
.cd-cn-the .m{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}
.cd-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)}
.cd-cn-the.loi{border-color:var(--bad-vivid)}
.cd-nhanh{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.cd-hd-dong{display:grid;grid-template-columns:2fr 1fr 1fr 32px;gap:6px;margin-bottom:6px}
/* Mã hoạt động (D3) — đứng đầu nhãn / thanh chiến dịch (CEO 30/09) */
.cd-ma-hd{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:0 5px;border-radius:4px;flex:none;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.cd-chip-hd{gap:6px}
.cd-chip-hd b{font-size:var(--fs-xs)}
.cd-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}
.cd-thieu{color:var(--bad);font-size:var(--fs-xs)}
.cd-mau-o{width:22px;height:22px;border-radius:6px;display:inline-block;cursor:pointer;border:2px solid transparent;background:var(--m)}
.cd-mau-o.chon{border-color:var(--ink)}
.cd-hd-tbl td{vertical-align:middle}
/* Danh sách: bảng rộng tối thiểu để tên chiến dịch không vỡ 6–7 dòng ở màn hẹp — .tbl-wrap tự cuộn ngang */
.cd-ds-tbl{min-width:1040px}
.cd-ds-tbl td:nth-child(2){min-width:220px}
/* D292 (docs/58 §8b): chờ đúng người xem ký · bản tăng tiền · ② ba mức bề rộng cột ngày */
.cd-ds-tbl tr.cd-cho-toi>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.cd-chip-ky b{font-weight:700}
.cd-chip-ky[hidden]{display:none}
.cd-chip{white-space:nowrap;flex:none}
.cd-loc-hang{flex-wrap:wrap;gap:var(--sp-2)}
.cd-loc{flex-wrap:wrap;min-width:0;flex:1 1 auto}
/* Cột Ký ghim mép phải — bảng rộng 1040px cuộn ngang ở màn hẹp, nút ký không được khuất */
.cd-ds-tbl .cd-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)}
.cd-ds-tbl thead .cd-ky{z-index:1}
.cd-ds-tbl tr:hover .cd-ky{background:var(--panel-2)}
.cd-tang{color:var(--warn);font-weight:600}
.kpi .delta a.cd-cho-toi{color:var(--accent-text);font-weight:650;text-decoration:none}
.kpi .delta a.cd-cho-toi:hover{text-decoration:underline}
.cd-ngay-cc{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.cd-th-ngay i{display:block;font-style:normal}
.cd-tl.ngay.hep .cd-th-ngay i{display:none}
.cd-tl.ngay.hep .cd-th-ngay{padding-top:8px}