/* ==== Màn Kế hoạch kinh doanh (/sales-plan) — bố cục v3 theo demo ke-hoach-kinh-doanh-v3_1.html ====
   Đặt ở CSS toàn cục vì *.razor.css của module không tới browser (memory css-isolation-module-gay).
   Mọi rule có tiền tố .sp để không đụng màn khác. Font thừa hưởng của app. */

.sp {
  --sp-page: #f2f5f9; --sp-surface: #fff; --sp-surface-2: #f5f7fa; --sp-surface-3: #eef2f7;
  --sp-ink: #101828; --sp-ink-2: #475467; --sp-muted: #8a94a6;
  --sp-grid: #e4e9f0; --sp-baseline: #c9d2de;
  --sp-accent: #2a78d6; --sp-accent-strong: #1c5cab; --sp-accent-wash: rgba(42, 120, 214, .10);
  --sp-good: #0ca30c; --sp-good-text: #0a7a0a; --sp-good-wash: rgba(12, 163, 12, .11);
  --sp-warning: #e8a713; --sp-warn-text: #7a5200; --sp-warning-wash: rgba(232, 167, 19, .15);
  --sp-critical: #d03b3b; --sp-crit-text: #b02a2a; --sp-critical-wash: rgba(208, 59, 59, .10);
  --sp-violet: #7a5af8; --sp-violet-text: #5b3fd6; --sp-violet-wash: rgba(122, 90, 248, .11);
  --sp-side-bg: #0d2a5c; --sp-side-bg2: #0a2148; --sp-side-mut: #93a5c9; --sp-side-line: rgba(255, 255, 255, .10);
  --sp-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
  background: var(--sp-page); color: var(--sp-ink); font-size: 13px; line-height: 1.5; min-height: 100%;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: inherit; }
.sp button:disabled { opacity: .45; cursor: not-allowed; }
.sp-num { font-variant-numeric: tabular-nums; }
.sp-mut { color: var(--sp-muted); }
.sp-small { font-size: 11px; }
.sp-ok { color: var(--sp-good-text); font-weight: 650; }
.sp-bad { color: var(--sp-crit-text); font-weight: 650; }
.sp-sp { flex: 1; }
.sp-grow { flex: 1; min-width: 260px; }
.sp-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* ===== Topband ===== */
/* Nền sáng #EEF1F5 (Đạt yêu cầu 22/09/2026) thay gradient tối; chữ/viền chuyển sang tông mực */
.sp-topband { background: #EEF1F5; color: var(--sp-ink); padding: 12px 20px 13px; border-bottom: 1px solid var(--sp-grid); }
.sp-tb1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-h1 { font-size: 15px; font-weight: 750; letter-spacing: .02em; }
.sp-sub { font-size: 11.5px; color: var(--sp-muted); }
.sp-meta { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 10px; border-top: 1px solid var(--sp-grid); padding-top: 9px; }
.sp-m { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--sp-grid); }
.sp-m:last-child { border-right: none; }
.sp-k { font-size: 9.5px; letter-spacing: .09em; color: var(--sp-muted); font-weight: 700; }
.sp-v { font-size: 13px; font-weight: 650; margin-top: 1px; }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; letter-spacing: .03em; }
.sp-pill.draft { background: rgba(232, 167, 19, .9); color: #3d2b00; }
/* SfComboBox trong topband nền tối: giữ nền trắng của control, chữ tối */

/* ===== Ô chọn tự vẽ SpSelect (port McSelect của PromotionModule) ===== */
.sp-cs { position: relative; display: inline-block; vertical-align: middle; }
/* ".sp .sp-cs-btn" (0,2,0) để thắng ".sp button { border: none }" (0,1,1) — viết ".sp-cs-btn" trần là mất viền */
.sp .sp-cs-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; border: 1px solid var(--sp-baseline); border-radius: 7px; padding: 0 9px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.sp-cs-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.5em; line-height: 1.5em; }
.sp-cs-btn > span.ph { color: var(--sp-muted); }
.sp-cs-btn > svg { flex: none; color: var(--sp-muted); transition: transform .15s; }
.sp .sp-cs-btn:hover:not(:disabled) { border-color: var(--sp-accent); }
.sp .sp-cs.on .sp-cs-btn { border-color: var(--sp-accent); box-shadow: 0 0 0 3px var(--sp-accent-wash); }
.sp-cs.on .sp-cs-btn > svg { transform: rotate(180deg); }
.sp .sp-cs-btn:disabled { background: var(--sp-surface-3); color: var(--sp-muted); cursor: not-allowed; }
.sp-cs-veil { position: fixed; inset: 0; z-index: 40; }
.sp-cs-menu { outline: none; position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 4px; background: var(--sp-surface); border: 1px solid var(--sp-grid); border-radius: 9px; box-shadow: 0 6px 20px rgba(16, 24, 40, .18); color: var(--sp-ink); text-align: left; }
.sp-cs-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 6px; padding: 6px 9px; background: transparent; color: var(--sp-ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.sp-cs-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.5em; }
.sp-cs-item:hover, .sp-cs-item.hi { background: var(--sp-surface-2); }
.sp-cs-item.hi { outline: 1px solid var(--sp-accent); }
.sp-cs-item.on { background: var(--sp-accent-wash); color: var(--sp-accent-strong); font-weight: 600; }
.sp-cs-item.on > svg { flex: none; }
.sp-cs-note { font-weight: 500; font-size: 11px; color: var(--sp-muted); white-space: nowrap; }
.sp-cs-empty { padding: 9px; color: var(--sp-muted); font-size: 12px; }
.sp-cs-search { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--sp-grid); margin: -4px -4px 4px; color: var(--sp-muted); position: sticky; top: -4px; background: var(--sp-surface); z-index: 1; border-radius: 9px 9px 0 0; }
.sp-cs-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--sp-ink); padding: 2px 4px; }
.sp-cs-menu::-webkit-scrollbar { width: 8px; }
.sp-cs-menu::-webkit-scrollbar-thumb { background: var(--sp-baseline); border-radius: 8px; }
.sp-cs-menu::-webkit-scrollbar-track { background: transparent; }
/* Trên thanh topband nền tối: ô trắng như SfComboBox cũ */
.sp-topband .sp-cs-top { margin-top: 2px; }
.sp-topband .sp-cs-top .sp-cs-btn { font-weight: 650; border-color: #aeb9c8; }
/* Trong ô lưới NVBH: thấp hơn cho khớp ô nhập */
.sp .sp-cs-cell .sp-cs-btn { height: 26px; padding: 0 7px; font-size: 11.5px; }

/* ===== Khung ===== */
.sp-wrap { padding: 14px 20px 40px; }
.sp-card { background: var(--sp-surface); border: 1px solid var(--sp-grid); border-radius: 12px; box-shadow: var(--sp-shadow); padding: 13px 16px 14px; }
.sp-step { margin-bottom: 12px; }
.sp-reco { margin-top: 14px; }
.sp-empty { color: var(--sp-muted); text-align: center; padding: 30px; }
.sp-blockh { font-size: 12px; font-weight: 750; letter-spacing: .04em; border-left: 3px solid var(--sp-accent); padding-left: 9px; margin-bottom: 4px; }
.sp-desc { font-size: 11.5px; color: var(--sp-muted); margin: 4px 0 0; line-height: 1.6; }
.sp-btn { border: 1px solid var(--sp-grid); border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--sp-ink-2); background: var(--sp-surface); display: inline-flex; gap: 7px; align-items: center; }
.sp-btn:hover { border-color: var(--sp-baseline); }
.sp-btn.pri { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }
.sp-btn.pri:hover { background: var(--sp-accent-strong); }
.sp-btn.sm { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }
/* Hai nút hành động chính ở card Đối chiếu: Lưu = xanh lá đặc, Bỏ thay đổi = viền đỏ (Đạt yêu cầu 21/09/2026) */
.sp-btn.save { background: var(--sp-good); border-color: var(--sp-good); color: #fff; font-weight: 700; padding: 8px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.sp-btn.save:hover { background: var(--sp-good-text); border-color: var(--sp-good-text); }
.sp-btn.danger { border-color: var(--sp-critical); color: var(--sp-crit-text); font-weight: 700; padding: 8px 14px; background: var(--sp-surface); }
.sp-btn.danger:hover { background: var(--sp-critical); border-color: var(--sp-critical); color: #fff; }
.sp-pending-note { flex-basis: 100%; text-align: right; margin-top: -4px; }
.sp-btn.pri { padding: 8px 18px; font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

/* ===== KPI strip ===== */
.sp-kstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; margin-bottom: 12px; }
.sp-ktile { background: var(--sp-surface); border: 1px solid var(--sp-grid); border-radius: 12px; padding: 11px 14px; box-shadow: var(--sp-shadow); position: relative; overflow: hidden; }
.sp-ktile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sp-accent); }
.sp-ktile.agg-dist::before { background: var(--sp-violet); }
.sp-ktile.agg-avg::before { background: #eda100; }
.sp-ktile .sp-lb { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--sp-muted); display: flex; align-items: center; gap: 6px; }
.sp-ktile .sp-v { font-size: 19px; font-weight: 750; letter-spacing: -.01em; margin-top: 3px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.sp-ktile .sp-v small { font-size: 12px; color: var(--sp-muted); font-weight: 600; display: inline-flex; align-items: baseline; gap: 4px; }
.sp-ksub { font-size: 11px; color: var(--sp-muted); margin-top: 2px; }
.sp-op { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; }
.op-sum { color: var(--sp-accent-strong); }
.op-dist { color: var(--sp-violet-text); }
.op-avg { color: var(--sp-warn-text); }

/* ===== Ô nhập ===== */
.sp-nin { width: 84px; text-align: right; border: 1px solid var(--sp-grid); border-radius: 7px; padding: 4px 8px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp-nin:hover { border-color: var(--sp-baseline); }
.sp-nin:focus { border-color: var(--sp-accent); outline: none; }
.sp-nin.w6 { width: 60px; }
.sp-nin.sp-kin { width: 90px; font-size: 12px; padding: 2px 6px; }
.sp-nin.bad { border-color: var(--sp-critical); background: var(--sp-critical-wash); }
.sp-ro { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; font-weight: 700; }
.sp-lock { font-size: 10px; opacity: .55; }
.sp-dash { color: var(--sp-baseline); font-weight: 400; }
.sp-subv { display: block; font-size: 10.5px; color: var(--sp-muted); font-weight: 400; }

/* ===== Accordion ngành ===== */
/* ===== Ô chọn (ngành hàng, nguồn mục tiêu, kỳ nguồn) ===== */
.sp-sel { border: 1px solid var(--sp-grid); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: var(--sp-surface); color: var(--sp-ink); }
.sp-sel:focus { outline: none; border-color: var(--sp-accent); }

/* ===== Hai panel theo demo: 12 cột, panel 1 chiếm 4, panel 2 chiếm 8 ===== */
.sp-g2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; align-items: start; }
.sp-g4 { grid-column: span 4; }
.sp-g8 { grid-column: span 8; min-width: 0; }
@media (max-width: 1280px) { .sp-g4, .sp-g8 { grid-column: span 12; } }
.sp-ind-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.sp-tag { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; flex: none; white-space: nowrap; }
.sp-nm { font-size: 14px; font-weight: 750; flex: 1; min-width: 0; }
.sp-nm small { display: block; font-size: 11px; color: var(--sp-muted); font-weight: 500; }
table.sp-bt { border-collapse: collapse; width: 100%; min-width: 300px; margin-top: 8px; }
.sp-bt th { font-size: 9.5px; font-weight: 750; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; padding: 7px 6px; border-bottom: 1px solid var(--sp-baseline); text-align: right; white-space: nowrap; background: var(--sp-surface-2); }
.sp-bt th.l, .sp-bt td.l { text-align: left; }
.sp-bt td { padding: 6px 6px; border-bottom: 1px solid var(--sp-grid); font-size: 12.5px; text-align: right; vertical-align: middle; }
.sp-bt td .sp-nin { width: 96px; }
.sp-fl { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.sp-fl label { font-size: 9.5px; letter-spacing: .09em; color: var(--sp-muted); font-weight: 700; }
.sp-nin.sp-ind-target { width: 130px; font-weight: 700; }
.sp-reco-line { margin-top: 9px; }
.sp-col-src { width: 130px; }
.sp-free { color: var(--sp-good-text); }
/* Thanh độ phủ nhỏ dưới số % (demo .mini) */
.sp-mini { display: block; height: 4px; border-radius: 3px; background: var(--sp-surface-3); margin-top: 3px; overflow: hidden; min-width: 56px; }
.sp-mini i { display: block; height: 100%; background: var(--sp-accent); border-radius: 3px; }
.sp-mini i.o { background: var(--sp-good); }
.sp-mini i.w { background: var(--sp-warning); }
.sp-mini i.c { background: var(--sp-critical); }
.sp-staff-search { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-top: 6px; }
.sp-staff-search .sp-search-in { width: 280px; }

/* ===== Bảng nhân viên ===== */
/* Thanh cuộn ngang LUÔN hiện (overflow-x: scroll + vẽ rõ), kẻo bảng rộng hơn màn là mất cột Thao tác mà
   không thấy chỗ nào để kéo — Đạt yêu cầu 21/09/2026 */
/* KHÔNG đặt scrollbar-width/scrollbar-color: Chromium có chúng là bỏ qua ::-webkit-scrollbar và giữ thanh overlay tự ẩn */
.sp-tscroll { overflow-x: scroll; overflow-y: hidden; }
.sp-tscroll::-webkit-scrollbar { height: 10px; }
.sp-tscroll::-webkit-scrollbar-track { background: var(--sp-surface-3); border-radius: 5px; }
.sp-tscroll::-webkit-scrollbar-thumb { background: var(--sp-baseline); border-radius: 5px; border: 2px solid var(--sp-surface-3); }
.sp-tscroll::-webkit-scrollbar-thumb:hover { background: var(--sp-muted); }
table.sp-gt { border-collapse: collapse; width: 100%; min-width: 1480px; }
.sp-gt thead th { font-size: 9.5px; font-weight: 750; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 6px; border-bottom: 1px solid var(--sp-baseline); white-space: nowrap; text-align: right; background: var(--sp-surface-2); }
.sp-gt thead th.l, .sp-gt td.l { text-align: left; }
.sp-gt thead th .sp-op { display: block; width: fit-content; margin: 2px 0 0 auto; }
.sp-gt td { padding: 6px 6px; border-bottom: 1px solid var(--sp-grid); font-size: 12.5px; text-align: right; white-space: nowrap; vertical-align: middle; }
.sp-gt tr.sp-nvrow > td { background: var(--sp-surface); }
.sp-gt tr.sp-nvrow:hover > td { background: var(--sp-surface-2); }
.sp-gt tr.sp-nvrow.sel > td { background: var(--sp-accent-wash); }
.sp-gt tr.sp-sumrow > td { background: var(--sp-surface-3); font-weight: 700; border-bottom: none; }
.sp-col-who { width: 200px; }
.sp-col-act { width: 220px; }
.sp-act-cell { position: relative; white-space: nowrap; }
.sp-inherit-btn { margin-left: 6px; border-color: var(--sp-violet); color: var(--sp-violet-text); }
.sp-inherit-btn:hover, .sp-inherit-btn.on { background: var(--sp-violet); color: #fff; }
.sp-inherit-pop { position: absolute; right: 8px; top: 100%; z-index: 6; display: flex; flex-direction: column; gap: 7px; width: 460px; margin-top: 4px; padding: 10px 12px; background: var(--sp-surface); border: 1px solid var(--sp-violet); border-radius: 10px; box-shadow: 0 6px 20px rgba(16, 24, 40, .18); white-space: normal; text-align: left; }
.sp-inherit-title { font-size: 10.5px; font-weight: 750; letter-spacing: .06em; color: var(--sp-violet-text); }
.sp-btn.sm.pri { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }
.sp-inherit-filter { width: 100%; }
.sp-inherit-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--sp-grid); border-radius: 7px; display: flex; flex-direction: column; }
.sp-inherit-item { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; width: 100%; padding: 5px 8px; border-bottom: 1px solid var(--sp-grid); font-size: 12px; }
.sp-inherit-item:last-child { border-bottom: none; }
.sp-inherit-item:hover { background: var(--sp-surface-2); }
.sp-inherit-item.on { background: var(--sp-violet-wash); color: var(--sp-violet-text); }
.sp-inherit-meta { margin-left: auto; font-size: 11px; color: var(--sp-muted); }
.sp-inherit-plan { border-left: 3px solid var(--sp-violet); }
.sp-inherit-period { width: 140px; }
.sp-inherit-plan .sp-sel:focus { border-color: var(--sp-violet); }
/* Vùng bảng của mỗi ngành cao tối đa theo viewport ⇒ thanh cuộn ngang luôn ở trong tầm nhìn, kể cả ngành 57 NV */
.sp-nvscroll { max-height: calc(100vh - 230px); overflow-y: auto; }
.sp-nvscroll > .sp-gt thead th { position: sticky; top: 0; z-index: 1; }
.sp-who { display: flex; gap: 10px; align-items: center; }
.sp-avt { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; flex: none; }
.sp-who b { display: block; font-size: 12.5px; }
.sp-who span span { font-size: 10.5px; color: var(--sp-muted); }
.sp-expbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-accent-strong); font-size: 11.5px; font-weight: 650; }
.sp-expbtn .cv { transition: transform .15s; display: inline-block; }
.sp-expbtn.on { background: var(--sp-accent); color: #fff; }

/* ===== Badge mức giao ===== */
.sp-mg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.sp-mg i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sp-mg.giao { background: var(--sp-accent-wash); color: var(--sp-accent-strong); }
.sp-mg.giao i { background: var(--sp-accent); }
.sp-mg.tong { background: var(--sp-surface-3); color: var(--sp-ink-2); }
.sp-mg.tong i { background: var(--sp-baseline); }
.sp-mg.khoa { background: transparent; color: var(--sp-muted); border: 1px dashed var(--sp-grid); }
.sp-mg.khoa i { background: var(--sp-baseline); }
.sp-mg.mix { background: var(--sp-violet-wash); color: var(--sp-violet-text); }
.sp-mg.mix i { background: var(--sp-violet); }
.sp-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sp-st.vuot { background: var(--sp-good-wash); color: var(--sp-good-text); }
.sp-st.nang { background: var(--sp-critical-wash); color: var(--sp-crit-text); }

/* ===== Panel phân bổ xuống cây (một NVBH) ===== */
.sp-alloc-head { margin: 10px 0 8px; align-items: flex-end; }
.sp-alloc-head .sp-fl { margin-top: 0; }
.sp-alloc-head > .sp-mg, .sp-alloc-head > .sp-mut { margin-bottom: 6px; }
.sp-alloc-quick { margin-bottom: 10px; }
.sp-alloc .sp-btn.sm { border: 1px solid var(--sp-accent); color: var(--sp-accent-strong); background: var(--sp-surface); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.sp-alloc .sp-btn.sm:hover { background: var(--sp-accent); color: #fff; }
.sp-alloc .sp-btn.sm.ghost { border-color: var(--sp-grid); color: var(--sp-ink-2); font-weight: 600; box-shadow: none; }
.sp-alloc .sp-btn.sm.ghost:hover { background: var(--sp-surface-3); color: var(--sp-ink); }
.sp-tt tr.sp-sumrow > td { background: var(--sp-surface-3); font-weight: 700; }
.sp-tt tr.sp-dimrow > td { color: var(--sp-muted); font-weight: 500; border-bottom: none; }
.sp-st.none { background: var(--sp-surface-3); color: var(--sp-ink-2); }
table.sp-tt { border-collapse: collapse; width: 100%; min-width: 840px; }
.sp-tt th { font-size: 9.5px; font-weight: 750; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--sp-baseline); text-align: right; white-space: nowrap; }
.sp-tt th.l, .sp-tt td.l { text-align: left; }
.sp-tt td { padding: 5px 8px; border-bottom: 1px solid var(--sp-grid); font-size: 12.5px; text-align: right; white-space: nowrap; background: var(--sp-surface); }
.sp-tt tr.lv0 > td { font-weight: 700; background: var(--sp-surface-3); }
.sp-tt tr.lv1 > td { font-weight: 680; }
.sp-tt tr.lv2 > td { font-weight: 600; }
.sp-tt tr.locked > td { opacity: .48; }
.sp-tt tr:hover > td { background: var(--sp-surface); }
.sp-col-st { width: 150px; }
.sp-col-ds { width: 120px; }
.sp-col-sku { width: 96px; }
.sp-col-pct { width: 88px; }
.sp-col-act2 { width: 200px; }
.sp-tree-tg { display: inline-block; width: 18px; text-align: center; color: var(--sp-accent-strong); font-weight: 800; margin-right: 2px; border-radius: 4px; }
.sp-tree-tg:hover { background: var(--sp-accent-wash); }
.sp-tree-tg-empty { pointer-events: none; }
/* Tìm nhanh cấp con: nút 🔍 mờ, hover/đang mở thì rõ; ô nhập nổi (absolute) ngay dưới tên nhánh */
.sp-tt td.l { position: relative; }
.sp-search-btn { font-size: 11px; margin-left: 6px; padding: 1px 5px; border-radius: 5px; opacity: .45; vertical-align: 1px; }
.sp-tt tr:hover .sp-search-btn, .sp-search-btn.on { opacity: 1; background: var(--sp-accent-wash); }
/* Nằm ngay bên phải tên nhánh (inline) thay vì đè xuống dòng dưới — đè là che mất kết quả đầu tiên */
.sp-search-pop { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 7px; background: var(--sp-surface); border: 1px solid var(--sp-accent); border-radius: 8px; box-shadow: 0 4px 16px rgba(16, 24, 40, .16); white-space: nowrap; }
.sp-search-in { width: 220px; border: 1px solid var(--sp-grid); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; text-align: left; }
.sp-search-in:focus { outline: none; border-color: var(--sp-accent); }
.sp-search-n { font-size: 10.5px; color: var(--sp-accent-strong); font-weight: 700; }
.sp-search-x { font-size: 11px; color: var(--sp-muted); padding: 1px 5px; border-radius: 5px; }
.sp-search-x:hover { background: var(--sp-surface-3); color: var(--sp-ink); }
.sp-lvtag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .05em; color: var(--sp-muted); border: 1px solid var(--sp-grid); border-radius: 4px; padding: 0 5px; margin-right: 7px; vertical-align: 1px; }
.sp-gsw { display: inline-flex; border: 1px solid var(--sp-grid); border-radius: 7px; overflow: hidden; background: var(--sp-surface); }
.sp-gsw button { padding: 2.5px 9px; font-size: 10.5px; font-weight: 700; color: var(--sp-muted); white-space: nowrap; }
.sp-gsw button.on { background: var(--sp-accent); color: #fff; cursor: default; }
/* Nút thao tác trong cây phải trông như NÚT (Đạt yêu cầu 21/09/2026): viền + chữ xanh, hover đổ màu */
.sp-gsw button:not(.on) { color: var(--sp-accent-strong); background: var(--sp-accent-wash); }
.sp-gsw button:not(.on):hover { background: var(--sp-accent); color: #fff; }
.sp-expbtn { border: 1px solid var(--sp-accent); border-radius: 7px; padding: 3px 9px; background: var(--sp-surface); }
.sp-expbtn:hover { background: var(--sp-accent); color: #fff; }
.sp-step .sp-btn.sm { border-color: var(--sp-accent); color: var(--sp-accent-strong); }
.sp-step .sp-btn.sm:hover { background: var(--sp-accent); color: #fff; }

/* ===== Kiểm tra ===== */
.sp-vtoggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 11px; border: 1px solid var(--sp-grid); border-radius: 9px; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; color: var(--sp-ink-2); background: var(--sp-surface-2); }
.sp-vtoggle:hover { border-color: var(--sp-baseline); background: var(--sp-surface-3); }
.sp-vtoggle.has-fail { border-color: rgba(208, 59, 59, .4); background: var(--sp-critical-wash); color: var(--sp-crit-text); }
.sp-vtoggle.has-warn { border-color: rgba(232, 167, 19, .45); background: var(--sp-warning-wash); color: var(--sp-warn-text); }
.sp-vtoggle .cv { font-weight: 800; }
.sp-vlist[hidden] { display: none; }
.sp-vlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 7px; margin-top: 12px; }
.sp-vitem { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--sp-grid); background: var(--sp-surface); }
.sp-vitem .code { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; flex: none; margin-top: 1px; }
.sp-vitem.pass { border-color: rgba(12, 163, 12, .35); background: var(--sp-good-wash); }
.sp-vitem.pass .code { background: var(--sp-good); color: #fff; }
.sp-vitem.warn { border-color: rgba(232, 167, 19, .45); background: var(--sp-warning-wash); }
.sp-vitem.warn .code { background: var(--sp-warning); color: #3d2b00; }
.sp-vitem.fail { border-color: rgba(208, 59, 59, .4); background: var(--sp-critical-wash); }
.sp-vitem.fail .code { background: var(--sp-critical); color: #fff; }
.sp-vitem b { font-weight: 700; }
.sp-vitem .d { color: var(--sp-ink-2); display: block; font-size: 11.5px; margin-top: 1px; }

@media (max-width: 760px) { .sp-wrap { padding: 12px; } .sp-topband { padding: 12px 14px; } }