/* ============================================================================ KPI — giao diện chuyển từ mockup kpi-sale-truong-tin_3.html. BA THAY ĐỔI so với mockup, cả ba đều bắt buộc để sống chung với phần còn lại của app: 1. Mọi biến CSS đổi tiền tố --x thành --kpi-x. Mockup dùng tên chung (--accent, --ink, --surface) trùng với theme.css của app; để nguyên là hai bên ghi đè nhau. 2. Mọi selector bọc trong .kpi-page. Mockup có selector trần (*, body, button, table) sẽ tràn ra toàn trang; riêng :root giữ nguyên vì đó là nơi khai biến. 3. Lớp tương thích Bootstrap ngay dưới đây, cộng z-index của .mask/.toast nâng lên trên tầng chrome của app (header/sidebar dùng tới 2000) — để 60/50 như mockup thì popup và toast nằm dưới thanh menu. Phần sidebar của mockup (.side, .snav, .sqf, .sguide, .shell, .topbar) ĐÃ BỎ — app dùng MegaMenu và MainLayout sẵn có. Bộ lọc nhanh chuyển vào thanh lọc trong trang. THEME: CHỈ SÁNG. Hai nhánh tối của mockup (@media prefers-color-scheme và [data-theme="dark"]) đã được GỠ theo yêu cầu, và :root ghim color-scheme: light để trình duyệt đang ở chế độ tối không vẽ ô nhập/thanh cuộn theo màu tối. Nạp file này trong wwwroot/index.html, và bọc mỗi view KPI bằng
. ============================================================================ */ /* ============ TOKENS ============ */ /* ⚠ KHỐI NÀY PHẢI Ở CẤP CAO NHẤT — tuyệt đối KHÔNG bọc trong .kpi-page. ":root" luôn là thẻ , không bao giờ là con của một div. Viết ".kpi-page :root" là tạo ra selector KHÔNG BAO GIỜ KHỚP; khi đó cả 36 biến bên dưới không được khai, mọi var(--kpi-*) rỗng, và mọi background/border/color thành khai báo không hợp lệ nên trình duyệt bỏ hết. Triệu chứng: trang chỉ còn chữ đen trên nền trắng. Đã dính đúng lỗi này một lần. */ :root { color-scheme: light; --kpi-page:#f2f5f9; --kpi-surface:#ffffff; --kpi-surface-2:#f5f7fa; --kpi-ink:#101828; --kpi-ink-2:#475467; --kpi-muted:#8a94a6; --kpi-grid:#e4e9f0; --kpi-baseline:#c9d2de; --kpi-border:rgba(16,24,40,.10); --kpi-accent:#2a78d6; --kpi-accent-strong:#1c5cab; --kpi-accent-wash:rgba(42,120,214,.10); --kpi-good:#0ca30c; --kpi-good-text:#0a7a0a; --kpi-good-wash:rgba(12,163,12,.11); --kpi-warning:#e8a713; --kpi-warn-text:#7a5200; --kpi-warning-wash:rgba(232,167,19,.15); --kpi-critical:#d03b3b; --kpi-crit-text:#b02a2a; --kpi-critical-wash:rgba(208,59,59,.10); --kpi-s1:#2a78d6; --kpi-s2:#eb6834; --kpi-s3:#1baf7a; --kpi-s4:#eda100; --kpi-side-bg:#0d2a5c; --kpi-side-bg2:#0a2148; --kpi-side-ink:#ffffff; --kpi-side-mut:#93a5c9; --kpi-side-line:rgba(255,255,255,.10); --kpi-side-act:#2a78d6; --kpi-shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06); } :root { --kpi-t-kc:var(--kpi-s1); --kpi-t-vang:var(--kpi-s4); --kpi-t-bac:var(--kpi-muted); --kpi-t-dong:var(--kpi-s2); } /* ============ BASE ============ */ .kpi-page * {box-sizing:border-box; margin:0; padding:0} /* .kpi-page gánh HAI vai của mockup gộp lại: • body — nền, màu chữ, font • .content — lớp bọc nội dung, mang toàn bộ padding (18px 22px 46px) Bỏ sót phần padding là nội dung dính sát mép trái và nền xám chỉ phủ đúng vùng chữ, nhìn như trang chưa được tạo kiểu. Mockup có lớp .content riêng; ở đây sidebar và khung ngoài đã bỏ nên không còn lớp nào để giữ nó. KHÔNG dùng height:100% (luật đó vốn của html+body): .kpi-page là div lồng trong MainLayout, ép chiều cao cứng sẽ cắt mất phần nội dung tràn ra. */ .kpi-page { background: var(--kpi-page); color: var(--kpi-ink); font: 13.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 18px 22px 46px; min-height: 100%; } /* ---------------------------------------------------------------------------- Trả lại mặc định trình duyệt cho những tên lớp trùng Bootstrap. Mockup chạy trên một trang trần nên .modal/.card/.badge/.toast mang mặc định của trình duyệt. Trong app, bootstrap.min.css nạp toàn cục và khai đúng những tên đó — riêng .modal có display:none, nên hai popup KPI dựng đúng nhưng không bao giờ hiện ra. Khối này chỉ khai lại các thuộc tính Bootstrap áp mà kpi.css không đụng tới. Đặt ở đầu file: mọi quy tắc KPI bên dưới cùng độ ưu tiên nên vẫn thắng theo thứ tự nguồn, còn Bootstrap thua vì độ ưu tiên thấp hơn (.modal vs .kpi-page .modal). ---------------------------------------------------------------------------- */ .kpi-page .modal {position:static; top:auto; left:auto; display:block; height:auto; overflow:visible} .kpi-page .card {position:static; display:block; height:auto} .kpi-page .badge {display:inline; white-space:normal; vertical-align:baseline} .kpi-page .btn {vertical-align:baseline} .kpi-page .toast {display:block; width:auto; max-width:none} .kpi-page .progress {display:block} .kpi-page button {font:inherit; color:inherit; background:none; border:none; cursor:pointer; text-align:inherit} .kpi-page button:focus-visible, .kpi-page input:focus-visible, .kpi-page select:focus-visible, .kpi-page textarea:focus-visible {outline:2px solid var(--kpi-accent); outline-offset:1px; border-radius:6px} @media (prefers-reduced-motion: reduce) { .kpi-page * {transition:none !important; scroll-behavior:auto !important} } .kpi-page .num {font-variant-numeric:tabular-nums} .kpi-page .mut {color:var(--kpi-muted)} .kpi-page .ink2 {color:var(--kpi-ink-2)} .kpi-page .ok {color:var(--kpi-good-text); font-weight:650} .kpi-page .bad {color:var(--kpi-crit-text); font-weight:650} .kpi-page svg.ic {width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .kpi-page select.ctrl {background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:9px; padding:7px 11px; font-size:12.5px; color:var(--kpi-ink); font-weight:550} .kpi-page .page {display:none} .kpi-page .page.on {display:block} .kpi-page .pagehead {display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px} .kpi-page .pagehead h2 {font-size:17px; font-weight:750; letter-spacing:.01em} .kpi-page .pagehead p {font-size:12px; color:var(--kpi-muted)} .kpi-page .pagehead .sp {flex:1} .kpi-page .pagebtns {display:flex; gap:8px; flex-wrap:wrap} .kpi-page .btn {border:1px solid var(--kpi-grid); border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--kpi-ink-2); background:var(--kpi-surface); display:inline-flex; gap:7px; align-items:center} .kpi-page .btn:hover {border-color:var(--kpi-baseline)} .kpi-page .btn.pri {background:var(--kpi-accent); border-color:var(--kpi-accent); color:#fff} .kpi-page .btn.pri:hover {background:var(--kpi-accent-strong)} /* ============ STAT CARDS ============ */ .kpi-page .statgrid {display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin-bottom:14px} .kpi-page .stat {background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:12px; padding:13px 14px; box-shadow:var(--kpi-shadow); display:flex; gap:12px; align-items:flex-start} .kpi-page .stat .ico {width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none} .kpi-page .stat .lb {font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--kpi-muted)} .kpi-page .stat .v {font-size:21px; font-weight:750; letter-spacing:-.01em; margin-top:1px} .kpi-page .stat .sub {font-size:11px; color:var(--kpi-muted)} .kpi-page .stat .sub.up {color:var(--kpi-good-text)} /* ============ CARDS / GRID (kế thừa demo cũ) ============ */ .kpi-page .grid {display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:12px} .kpi-page .card {background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:12px; box-shadow:var(--kpi-shadow); padding:14px 16px 15px} .kpi-page .sp4 {grid-column:span 4} .kpi-page .sp6 {grid-column:span 6} .kpi-page .sp8 {grid-column:span 8} .kpi-page .sp12 {grid-column:span 12} @media (max-width: 1020px) { .kpi-page .sp4, .kpi-page .sp6, .kpi-page .sp8 {grid-column:span 12} } .kpi-page .card h3 {font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; letter-spacing:.02em} .kpi-page .card h3 .stepn {width:20px; height:20px; border-radius:6px; background:var(--kpi-accent-wash); color:var(--kpi-accent-strong); font-size:11px; font-weight:700; display:grid; place-items:center; flex:none} .kpi-page .card .desc {font-size:11.5px; color:var(--kpi-muted); margin:3px 0 10px} .kpi-page .blockh {font-size:12px; font-weight:750; letter-spacing:.04em; border-left:3px solid var(--kpi-accent); padding-left:9px; margin-bottom:10px} /* ============ TAB LINE / FILTER ROW ============ */ .kpi-page .tabline {display:flex; gap:2px; border-bottom:1px solid var(--kpi-grid); margin-bottom:12px; flex-wrap:wrap} .kpi-page .tabb {padding:8px 13px 9px; font-size:12.5px; font-weight:650; color:var(--kpi-ink-2); border-bottom:2px solid transparent} .kpi-page .tabb.on {color:var(--kpi-accent-strong); border-bottom-color:var(--kpi-accent)} .kpi-page .lfr {display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:10px} .kpi-page .lfr .srch {display:flex; align-items:center; gap:7px; border:1px solid var(--kpi-grid); border-radius:9px; padding:0 10px; background:var(--kpi-surface)} .kpi-page .lfr .srch input {border:none; background:none; padding:7px 0; font:inherit; font-size:12.5px; color:var(--kpi-ink); width:170px} .kpi-page .lfr .fl {display:flex; flex-direction:column; gap:2px} .kpi-page .lfr .fl label {font-size:10px; color:var(--kpi-muted); font-weight:650; letter-spacing:.04em} .kpi-page .lfr .push {margin-left:auto} /* Thanh phân trang dưới bảng. Chỉ hiện khi có nhiều hơn một trang — bảng 8 dòng mà vẫn đeo "Trang 1/1" là thêm nhiễu chứ không thêm thông tin. */ .kpi-page .pager {display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px} .kpi-page .pager .sp {flex:1} .kpi-page .pager .pinfo {font-size:11.5px; color:var(--kpi-muted); white-space:nowrap} /* Nút lật trang nhỏ hơn nút thường: chúng đứng thành hàng năm cái, để cỡ mặc định thì nặng hơn cả cái bảng chúng đang phục vụ. */ .kpi-page .pager .btn {padding:5px 10px; font-size:12px} .kpi-page .pager .btn:disabled {opacity:.45; cursor:default; border-color:var(--kpi-grid)} /* ============ BADGES / CHIPS ============ */ .kpi-page .rk {display:inline-flex; align-items:center; gap:5px; padding:2.5px 10px; border-radius:7px; font-size:11.5px; font-weight:700; white-space:nowrap} .kpi-page .rk.xs {background:var(--kpi-good-wash); color:var(--kpi-good-text)} .kpi-page .rk.tot {background:var(--kpi-accent-wash); color:var(--kpi-accent-strong)} .kpi-page .rk.tb {background:var(--kpi-warning-wash); color:var(--kpi-warn-text)} .kpi-page .rk.kd {background:var(--kpi-critical-wash); color:var(--kpi-crit-text)} .kpi-page .tier {display:inline-flex; align-items:center; gap:6px; padding:2.5px 10px; border-radius:999px; font-size:11px; font-weight:700; color:var(--kpi-ink); white-space:nowrap} .kpi-page .tier i {width:8px; height:8px; border-radius:50%; flex:none} .kpi-page .tier.kc {background:color-mix(in srgb, var(--kpi-t-kc) 14%, var(--kpi-surface)); border:1px solid color-mix(in srgb, var(--kpi-t-kc) 45%, transparent)} .kpi-page .tier.kc i {background:var(--kpi-t-kc)} .kpi-page .tier.vang {background:color-mix(in srgb, var(--kpi-t-vang) 16%, var(--kpi-surface)); border:1px solid color-mix(in srgb, var(--kpi-t-vang) 50%, transparent)} .kpi-page .tier.vang i {background:var(--kpi-t-vang)} .kpi-page .tier.bac {background:color-mix(in srgb, var(--kpi-t-bac) 15%, var(--kpi-surface)); border:1px solid color-mix(in srgb, var(--kpi-t-bac) 45%, transparent)} .kpi-page .tier.bac i {background:var(--kpi-t-bac)} .kpi-page .tier.dong {background:color-mix(in srgb, var(--kpi-t-dong) 14%, var(--kpi-surface)); border:1px solid color-mix(in srgb, var(--kpi-t-dong) 45%, transparent)} .kpi-page .tier.dong i {background:var(--kpi-t-dong)} .kpi-page .tier.none {background:var(--kpi-surface-2); border:1px solid var(--kpi-grid); color:var(--kpi-ink-2)} .kpi-page .tier.none i {background:var(--kpi-baseline)} .kpi-page .dot {display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px} .kpi-page .dot.g {background:var(--kpi-good)} .kpi-page .dot.w {background:var(--kpi-warning)} /* ============ BẢNG DANH SÁCH ============ */ .kpi-page .tbl-scroll {overflow-x:auto} /* Avatar chữ. Lớp này BỊ XÓA NHẦM lúc trích CSS: tôi liệt .avt vào nhóm sidebar vì mockup có .userchip .avt, nhưng nó còn được dùng cho avatar trong bảng danh sách, thẻ NVBH và dải thông tin chi tiết. Thiếu nó thì tên viết tắt hiện ra như chữ trần. */ .kpi-page .avt {border-radius:50%; background:var(--kpi-accent); color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:700; flex:none; width:34px; height:34px; letter-spacing:.02em} .kpi-page .lt .who .avt {width:30px; height:30px; font-size:10.5px} .kpi-page .iseg .avt {width:42px; height:42px; font-size:13px} .kpi-page table.lt {border-collapse:collapse; width:100%; min-width:960px} .kpi-page .lt th {font-size:10.5px; font-weight:700; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:9px 8px; border-bottom:1px solid var(--kpi-baseline); white-space:nowrap} .kpi-page .lt td {padding:8px 8px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; white-space:nowrap; vertical-align:middle} .kpi-page .lt tr.sel td {background:var(--kpi-accent-wash)} .kpi-page .lt tr.rowbtn {cursor:pointer} .kpi-page .lt tr.rowbtn:hover td {background:var(--kpi-surface-2)} .kpi-page .lt tr.sel.rowbtn:hover td {background:var(--kpi-accent-wash)} .kpi-page .lt .who {display:flex; gap:10px; align-items:center} .kpi-page .lt .who b {display:block; font-size:12.5px} .kpi-page .lt .who span {font-size:10.5px; color:var(--kpi-muted)} .kpi-page .bar {display:inline-flex; align-items:center; gap:8px} .kpi-page .bar .tr {position:relative; width:78px; height:7px; background:var(--kpi-surface-2); border-radius:5px; overflow:hidden} .kpi-page .bar .tr i {position:absolute; inset:0 auto 0 0; border-radius:5px; min-width:2px} .kpi-page .bar.xs .tr i {background:var(--kpi-good)} .kpi-page .bar.tot .tr i {background:var(--kpi-accent)} .kpi-page .bar.tb .tr i {background:var(--kpi-warning)} .kpi-page .bar.kd .tr i {background:var(--kpi-critical)} .kpi-page .bar b {font-size:12px; font-weight:650} .kpi-page .act {display:inline-flex; gap:5px} .kpi-page .act button {width:27px; height:27px; border:1px solid var(--kpi-grid); border-radius:7px; display:grid; place-items:center; color:var(--kpi-ink-2)} .kpi-page .act button:hover {border-color:var(--kpi-accent); color:var(--kpi-accent-strong)} /* ============ SETUP (kế thừa) ============ */ .kpi-page .chips {display:flex; flex-wrap:wrap; gap:8px} .kpi-page .chip {border:1px solid var(--kpi-grid); border-radius:9px; padding:7px 11px; font-size:12.5px; font-weight:600; color:var(--kpi-ink-2); background:var(--kpi-surface)} .kpi-page .chip small {display:block; font-weight:500; font-size:10.5px; color:var(--kpi-muted)} .kpi-page .chip.sel {border-color:var(--kpi-accent); color:var(--kpi-accent-strong); background:var(--kpi-accent-wash)} .kpi-page .chip.sel small {color:var(--kpi-accent-strong); opacity:.75} .kpi-page .chip.dis {opacity:.55} /* Cây phân nhánh sản phẩm — bước 3 popup cấu hình. Gốc → nhánh cấp 2 (có tỷ trọng) → cấp sâu hơn chỉ xem. */ .kpi-page .ctree {list-style:none; margin:0; padding:0; font-size:12.5px} .kpi-page .ctree ul {list-style:none; margin:0; padding:0 0 0 14px; border-left:1px dashed var(--kpi-grid)} .kpi-page .ctree li {margin:0} .kpi-page .ctree li.khac {margin-left:14px; border-left:1px dashed var(--kpi-grid)} .kpi-page .ctree .nd {display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; min-height:26px; color:var(--kpi-ink-2)} .kpi-page .ctree .nd.root {font-weight:700; color:var(--kpi-ink)} .kpi-page .ctree .nd.br {font-weight:600; color:var(--kpi-accent-strong)} .kpi-page .ctree .nd.tgl {cursor:pointer} .kpi-page .ctree .nd.tgl:hover {background:var(--kpi-accent-wash)} .kpi-page .ctree .tg {flex:0 0 14px; width:14px; text-align:center; color:var(--kpi-muted); font-size:10px} .kpi-page .ctree .nm {flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .kpi-page .ctree .sp {font-size:11px; color:var(--kpi-muted); white-space:nowrap} .kpi-page .ctree .pct {font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--kpi-accent-wash); color:var(--kpi-accent-strong); white-space:nowrap} .kpi-page .ck {display:flex; gap:9px; align-items:flex-start; font-size:12.5px} .kpi-page .ck input {margin-top:3px; accent-color:var(--kpi-accent)} .kpi-page .ck b {font-weight:650} .kpi-page .ck .d {font-size:11.5px; color:var(--kpi-muted)} /* Danh sách ô tích — MỖI MỤC MỘT HÀNG, có đường kẻ ngăn để mắt dò thẳng xuống. Trước đây bước 2 chia hai cột (columns:2): mô tả dài ngắn khác nhau làm hai cột so le, và mắt phải đọc zigzag. Một hàng một chỉ tiêu đọc nhanh hơn hẳn ở khổ popup toàn màn hình. */ .kpi-page .cklist {display:flex; flex-direction:column} /* Mỗi ô tích là một LƯỚI HAI CỘT: ô vuông rộng cố định 16px, rồi phần chữ. Trước đây dùng flex nên cột chữ bắt đầu ở đâu là tùy bề rộng thật của ô vuông do trình duyệt vẽ — mỗi mục lệch một chút, nhìn rõ nhất khi xếp hai cột cạnh nhau. Cột cố định thì đầu dòng của MỌI mục trùng nhau tuyệt đối. */ .kpi-page .cklist .ck {display:grid; grid-template-columns:16px minmax(0, 1fr); gap:0 9px; align-items:start; padding:5px 0; border-bottom:1px dashed var(--kpi-grid); line-height:1.35} .kpi-page .cklist .ck:last-child {border-bottom:none} .kpi-page .cklist .ck input {width:16px; height:16px; margin:1px 0 0} .kpi-page .cklist .ck > span {display:block; min-width:0} .kpi-page .cklist .ck b {display:block} /* Mô tả gọn ĐÚNG MỘT DÒNG, dài thì cắt bằng dấu ba chấm (nhãn mang title đủ chữ). Để nó xuống dòng tự do thì mỗi mục cao một kiểu, hàng lưới phải cao theo mục cao nhất, và cả khối dày lên trông rất nặng. */ .kpi-page .cklist .ck .d {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* Biến thể HAI CỘT cho bước "Chỉ tiêu KPI" (8 mục, một cột thì dài lê thê). Dùng GRID chứ không dùng columns:2 — cột báo (multi-column) rót nội dung theo chiều dọc nên mục dài ngắn khác nhau làm hai cột so le. */ .kpi-page .cklist.c2 {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:26px; row-gap:0} /* Bỏ kẻ ngăn ở biến thể hai cột: với số mục lẻ, hàng cuối chỉ có một ô nên đường kẻ cụt một nửa. */ .kpi-page .cklist.c2 .ck {border-bottom:none} @media (max-width: 900px) { .kpi-page .cklist.c2 {grid-template-columns:1fr} } /* Một dòng cài đặt: nhãn bên trái, ô nhập + đơn vị bám lề phải — mọi ô nhập thẳng hàng nhau dù nhãn dài ngắn khác nhau. */ .kpi-page .setrow {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; padding:7px 0; border-bottom:1px dashed var(--kpi-grid)} .kpi-page .setrow:last-child {border-bottom:none} .kpi-page .setrow label {flex:1; min-width:0} .kpi-page .setrow .unit {display:inline-flex; align-items:center; gap:5px; flex:none; color:var(--kpi-muted); font-size:11.5px} .kpi-page .khli {display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--kpi-grid)} .kpi-page .khli:last-child {border-bottom:none} .kpi-page .badge {font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:999px} .kpi-page .badge.in {color:var(--kpi-good-text); background:var(--kpi-good-wash)} .kpi-page .badge.out {color:var(--kpi-muted); background:var(--kpi-surface-2)} .kpi-page input.nin {width:66px; text-align:right; border:1px solid var(--kpi-grid); border-radius:7px; padding:4px 7px; background:var(--kpi-surface); color:var(--kpi-ink); font:inherit; font-size:12.5px; font-variant-numeric:tabular-nums} .kpi-page input.nin.w9 {width:96px} .kpi-page .progress {height:8px; border-radius:5px; background:var(--kpi-surface-2); overflow:hidden; position:relative} .kpi-page .progress i {position:absolute; inset:0 auto 0 0; background:var(--kpi-accent); border-radius:5px} .kpi-page table.st {border-collapse:collapse; width:100%; min-width:760px} .kpi-page .st th {font-size:10.5px; font-weight:650; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.05em; text-align:right; padding:7px 9px; border-bottom:1px solid var(--kpi-baseline); white-space:nowrap} .kpi-page .st th:first-child, .kpi-page .st th:nth-child(2) {text-align:left} .kpi-page .st td {padding:6.5px 9px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; text-align:right; white-space:nowrap} .kpi-page .st td:first-child, .kpi-page .st td:nth-child(2) {text-align:left} .kpi-page .st td .sub {display:block; font-size:10.5px; color:var(--kpi-muted)} .kpi-page table.mx {border-collapse:collapse; width:100%; min-width:720px} .kpi-page .mx th {font-size:10.5px; font-weight:650; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.04em; padding:7px 8px; border-bottom:1px solid var(--kpi-baseline); text-align:center; white-space:nowrap} .kpi-page .mx th:first-child {text-align:left} .kpi-page .mx td {padding:7px 8px; border-bottom:1px solid var(--kpi-grid); text-align:center} .kpi-page .mx td:first-child {text-align:left} .kpi-page .dline {display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:4px 0; border-bottom:1px dashed var(--kpi-grid)} .kpi-page .dline:last-child {border-bottom:none} /* ============ DASHBOARD (kế thừa) ============ */ .kpi-page .kpis {display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:10px} .kpi-page .tile {background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:12px; padding:11px 13px 10px; box-shadow:var(--kpi-shadow)} .kpi-page .tile .lb {font-size:11.5px; color:var(--kpi-muted)} .kpi-page .tile .v {font-size:20px; font-weight:700; letter-spacing:-.01em; margin-top:2px} .kpi-page .tile .sub {font-size:11px; color:var(--kpi-muted); margin-top:1px} .kpi-page .filterchips {display:flex; gap:8px; flex-wrap:wrap; margin-top:12px} .kpi-page .fc {border:1px solid var(--kpi-grid); border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:600; color:var(--kpi-ink-2); background:var(--kpi-surface)} .kpi-page .fc.on {border-color:var(--kpi-accent); background:var(--kpi-accent-wash); color:var(--kpi-accent-strong)} .kpi-page .teambar {display:grid; grid-template-columns:150px 1fr 62px; gap:6px 12px; align-items:center; margin-top:6px} .kpi-page .teambar .nm {font-size:12.5px; color:var(--kpi-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .kpi-page .track {position:relative; height:14px; background:var(--kpi-surface-2); border-radius:4px} .kpi-page .track i {position:absolute; top:2px; bottom:2px; left:0; background:var(--kpi-accent); border-radius:3px; min-width:2px} .kpi-page .track b {position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--kpi-baseline)} .kpi-page .teambar .val {font-size:12px; font-weight:650; text-align:right} .kpi-page .nvgrid {display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:12px; margin-top:12px} @media (max-width: 560px) { .kpi-page .nvgrid {grid-template-columns:1fr} } .kpi-page .nvhead {display:flex; align-items:center; gap:10px; flex-wrap:wrap} .kpi-page .nvhead .who b {font-size:13.5px} .kpi-page .nvhead .who span {display:block; font-size:11px; color:var(--kpi-muted)} .kpi-page .nvhead .tier {margin-left:auto} .kpi-page .mrow {display:grid; grid-template-columns:118px 1fr 52px; gap:4px 10px; align-items:center; padding:4.5px 0} .kpi-page .mrow .ml {font-size:12px; color:var(--kpi-ink-2)} .kpi-page .mrow .ml small {display:block; font-size:10px; color:var(--kpi-muted)} .kpi-page .meter {position:relative; height:8px; background:var(--kpi-surface-2); border-radius:5px} .kpi-page .meter i {position:absolute; top:0; bottom:0; left:0; background:var(--kpi-accent); border-radius:5px; min-width:2px} .kpi-page .meter.dim i {background:color-mix(in srgb, var(--kpi-accent) 45%, var(--kpi-surface-2))} .kpi-page .meter b {position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--kpi-baseline)} .kpi-page .mrow .mv {font-size:12px; font-weight:650; text-align:right} .kpi-page .subhead {font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--kpi-muted); margin:12px 0 4px} .kpi-page .spark {width:100%; height:58px; display:block} .kpi-page .gpsnote {font-size:11px; color:var(--kpi-muted); margin-top:8px; border-top:1px dashed var(--kpi-grid); padding-top:7px} /* ============ PAYROLL (kế thừa) ============ */ .kpi-page table.pt {border-collapse:collapse; width:100%; min-width:980px} .kpi-page .pt th {font-size:10.5px; font-weight:650; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.05em; text-align:right; padding:8px 10px; border-bottom:1px solid var(--kpi-baseline); white-space:nowrap} .kpi-page .pt th:first-child, .kpi-page .pt th:nth-child(2) {text-align:left} .kpi-page .pt td {padding:8px 10px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; text-align:right; white-space:nowrap} .kpi-page .pt td:first-child, .kpi-page .pt td:nth-child(2) {text-align:left} .kpi-page .pt tr.rowbtn {cursor:pointer} .kpi-page .pt tr.rowbtn:hover td {background:var(--kpi-surface-2)} .kpi-page .pt td .sub {display:block; font-size:10.5px; color:var(--kpi-muted)} .kpi-page .pt tr.tot td {font-weight:700; background:var(--kpi-surface-2); border-bottom:none} .kpi-page .pt .chev {color:var(--kpi-muted); font-size:11px} .kpi-page tr.detail>td {background:var(--kpi-surface-2); padding:12px 14px; white-space:normal; text-align:left} .kpi-page .dgrid {display:grid; grid-template-columns:1fr 1fr; gap:16px} @media (max-width: 900px) { .kpi-page .dgrid {grid-template-columns:1fr} } .kpi-page .dbox h4 {font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--kpi-muted); margin-bottom:7px} .kpi-page .tk {display:flex; align-items:baseline; gap:8px; padding:4px 0; font-size:12px; flex-wrap:wrap} .kpi-page .tk .fail {color:var(--kpi-crit-text)} .kpi-page .seg {display:inline-flex; border:1px solid var(--kpi-grid); border-radius:9px; overflow:hidden} .kpi-page .seg button {padding:6.5px 13px; font-size:12.5px; font-weight:600; color:var(--kpi-ink-2); background:var(--kpi-surface)} .kpi-page .seg button.on {background:var(--kpi-accent-wash); color:var(--kpi-accent-strong)} .kpi-page .payhead {display:flex; align-items:center; gap:12px; flex-wrap:wrap} .kpi-page .payhead .meta {margin-left:auto; font-size:12px; color:var(--kpi-muted)} /* ============ CHI TIẾT ĐÁNH GIÁ ============ */ .kpi-page .infostrip {display:flex; gap:0; flex-wrap:wrap; padding:0} .kpi-page .iseg {padding:13px 18px; display:flex; gap:11px; align-items:center; border-right:1px solid var(--kpi-grid); min-width:170px; flex:1} .kpi-page .iseg:last-child {border-right:none} .kpi-page .iseg .t {font-size:10.5px; color:var(--kpi-muted); font-weight:650; letter-spacing:.04em; text-transform:uppercase} .kpi-page .iseg b {font-size:13px; display:block} .kpi-page .iseg .s {font-size:11px; color:var(--kpi-muted)} .kpi-page .iseg .score {font-size:22px; font-weight:800; letter-spacing:-.01em} .kpi-page .iseg .score small {font-size:12px; color:var(--kpi-muted); font-weight:600} .kpi-page .dtlgrid {display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:12px; margin-top:12px; align-items:start} @media (max-width: 1100px) { .kpi-page .dtlgrid {grid-template-columns:1fr} } .kpi-page .dtlmain {display:flex; flex-direction:column; gap:14px; min-width:0} .kpi-page .dtlside {display:flex; flex-direction:column; gap:14px} .kpi-page table.et {border-collapse:collapse; width:100%; min-width:740px} .kpi-page .et th {font-size:10px; font-weight:700; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.03em; text-align:right; padding:7px 7px; border-bottom:1px solid var(--kpi-baseline); white-space:nowrap} .kpi-page .et th:nth-child(1), .kpi-page .et th:nth-child(2) {text-align:left} .kpi-page .et td {padding:8px 7px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; text-align:right; vertical-align:middle; white-space:nowrap} .kpi-page .et td:nth-child(1), .kpi-page .et td:nth-child(2) {text-align:left} .kpi-page .et td .kn {font-weight:650; display:block; white-space:normal; min-width:120px} .kpi-page .et td .kd {font-size:10.5px; color:var(--kpi-muted); display:block; white-space:normal; max-width:190px} .kpi-page .et td.gc {font-size:11px; color:var(--kpi-muted); white-space:normal; max-width:108px; text-align:left} .kpi-page #qdTable th {white-space:normal} .kpi-page #qdTable th, .kpi-page #qdTable td {padding:7px 6px} .kpi-page #qdTable .kd {max-width:140px} .kpi-page #qdTable .kn {min-width:104px} .kpi-page .et .mini {display:block; width:76px; height:5px; background:var(--kpi-surface-2); border-radius:4px; position:relative; overflow:hidden; margin-top:4px; margin-left:auto} .kpi-page .et .mini i {position:absolute; inset:0 auto 0 0; background:var(--kpi-accent); border-radius:4px} .kpi-page .et tr.tot td {font-weight:750; background:var(--kpi-surface-2)} .kpi-page .et .clip {color:var(--kpi-accent-strong); font-weight:650; display:inline-flex; gap:4px; align-items:center} .kpi-page .scorebig {font-size:30px; font-weight:800; letter-spacing:-.02em} .kpi-page .scorebig small {font-size:14px; color:var(--kpi-muted); font-weight:600} .kpi-page .ratew {display:flex; flex-direction:column; gap:6px; margin-top:10px} .kpi-page .ratew .rr {display:flex; align-items:center; gap:8px; font-size:12px} .kpi-page .ratew .rr i {width:8px; height:8px; border-radius:50%; flex:none} .kpi-page .ratew .rr .rg {margin-left:auto; color:var(--kpi-muted); font-size:11.5px} .kpi-page .cmt {display:grid; grid-template-columns:1fr 1fr; gap:14px} @media (max-width: 860px) { .kpi-page .cmt {grid-template-columns:1fr} } .kpi-page .cmt h4 {font-size:11.5px; font-weight:700; margin-bottom:6px} .kpi-page .cmt textarea {width:100%; min-height:74px; border:1px solid var(--kpi-grid); border-radius:9px; background:var(--kpi-surface); color:var(--kpi-ink); font:inherit; font-size:12.5px; padding:9px 11px; resize:vertical; line-height:1.55} .kpi-page .cmt ul {margin:2px 0 0 16px; font-size:12.5px; color:var(--kpi-ink-2); line-height:1.7} .kpi-page table.ht {border-collapse:collapse; width:100%; min-width:680px} .kpi-page .ht th {font-size:10.5px; font-weight:700; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:8px 9px; border-bottom:1px solid var(--kpi-baseline); white-space:nowrap} .kpi-page .ht td {padding:8px 9px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; white-space:nowrap} .kpi-page .ilist {display:flex; flex-direction:column; gap:9px; font-size:12.5px} .kpi-page .ilist .t {font-size:10.5px; color:var(--kpi-muted); font-weight:650; letter-spacing:.04em; text-transform:uppercase} /* ============ MODAL TẠO ĐÁNH GIÁ + INPUT CHẤM ĐIỂM ============ */ .kpi-page .mask {position:fixed; inset:0; background:rgba(7,16,32,.52); display:grid; place-items:center; z-index:10050; padding:16px} .kpi-page .mask[hidden] {display:none} .kpi-page .modal {background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:14px; box-shadow:var(--kpi-shadow); width:min(430px,100%); padding:18px 20px 16px; /* Nội dung cao hơn màn hình thì CHÍNH popup cuộn. Không có hai dòng này, phần dư tràn ra ngoài vùng nhìn mà .mask (position:fixed) thì không cuộn được — nút bấm cuối popup thành vô hình. */ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto} .kpi-page .modal h3 {font-size:14.5px; font-weight:750} .kpi-page .mlb {display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--kpi-muted); margin:12px 0 4px} .kpi-page .modal select, .kpi-page .modal input {width:100%; background:var(--kpi-surface); border:1px solid var(--kpi-grid); border-radius:9px; padding:8px 11px; font:inherit; font-size:12.5px; color:var(--kpi-ink)} .kpi-page .modal input:disabled {background:var(--kpi-surface-2); color:var(--kpi-ink-2)} .kpi-page .modal .mbtns {display:flex; justify-content:flex-end; gap:8px; margin-top:16px} /* Popup RỘNG — dùng cho chi tiết chương trình KPI (8 bước cài đặt không vừa khổ 430px). Cao tối đa 88vh và tự cuộn phần thân: màn hình thấp thì nút Đóng vẫn luôn nhìn thấy được, thay vì popup dài hơn màn hình rồi người dùng không biết thoát bằng cách nào. */ /* Popup TOÀN MÀN HÌNH — chi tiết chương trình KPI có 8 bước, bảng NVBH và bảng điều kiện cấp bậc đều rộng; khổ hẹp thì người dùng cuộn ngang suốt buổi. Bỏ bo góc và bóng vì không còn mép nào để bo. */ .kpi-page .modal.full {width:100%; max-width:none; overflow:hidden; height:100vh; max-height:100vh; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; padding:0; border-radius:0; border:none; box-shadow:none} /* Nền mờ nhường chỗ cho popup toàn màn hình: còn padding là còn một viền tối quanh mép. */ /* Bỏ căn giữa cho popup toàn màn hình: với place-items:center, hàng lưới co theo NỘI DUNG, nên height:100% của popup lại bằng chính chiều cao nội dung — popup không bao giờ thấp hơn nội dung, .mbody không bao giờ tràn, và không có gì cuộn được. */ .kpi-page .mask:has(> .modal.full) {padding:0; place-items:stretch} .kpi-page .modal.full .mhead {display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; flex:none; padding:16px 20px 12px; border-bottom:1px solid var(--kpi-grid)} .kpi-page .modal.full .mhead h3 {font-size:15px; font-weight:750; letter-spacing:.01em} /* Phần DUY NHẤT được cuộn. Nền hơi xám để tách khỏi đầu và chân popup. */ /* min-height:0 là BẮT BUỘC: mặc định min-height của flex item là auto, tức không được co nhỏ hơn nội dung — phần thân cứ cao bằng nội dung nên overflow-y:auto chẳng có gì để cuộn. */ .kpi-page .modal.full .mbody {flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 20px 16px; background:var(--kpi-page)} .kpi-page .modal.full .mbtns {flex:none; margin-top:0; padding:12px 20px 14px; border-top:1px solid var(--kpi-grid); background:var(--kpi-surface)} .kpi-page .mclose {width:30px; height:30px; flex:none; border-radius:8px; border:1px solid var(--kpi-grid); background:var(--kpi-surface); color:var(--kpi-muted); font-size:13px; line-height:1; cursor:pointer} .kpi-page .mclose:hover {border-color:var(--kpi-baseline); color:var(--kpi-ink)} /* Trong popup, lưới 12 cột không cần margin trên vì .mbody đã có padding. */ .kpi-page .modal.full .grid {margin-top:0} .kpi-page input.rin {width:104px; text-align:right; font:inherit; font-size:12.5px; font-weight:650; color:var(--kpi-ink); background:transparent; border:1px solid transparent; border-bottom:1px dashed var(--kpi-baseline); border-radius:6px 6px 0 0; padding:3px 6px; font-variant-numeric:tabular-nums} .kpi-page input.rin.okc {color:var(--kpi-good-text)} .kpi-page input.rin:hover {border-color:var(--kpi-grid)} .kpi-page input.rin:focus {background:var(--kpi-surface-2); border-color:var(--kpi-accent); border-bottom-style:solid; outline:none} .kpi-page .ovrflag {font-size:9.5px; font-weight:700; color:var(--kpi-warn-text); background:var(--kpi-warning-wash); border-radius:4px; padding:1px 5px; display:block; margin-top:2px; text-align:right} .kpi-page .bh-row {display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap} .kpi-page .bh-row .blockh {margin-bottom:0} .kpi-page .bh-row .hint {font-size:11px; color:var(--kpi-warn-text); flex:1} /* ============ TOAST ============ */ /* Mockup dùng #toast. Đổi sang lớp .toast để không dựa vào id toàn cục và vẫn nằm trong phạm vi .kpi-page. position:fixed nên đặt ở đâu trong DOM cũng nổi lên giữa đáy màn hình. */ .kpi-page .toast {position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px); opacity:0; background:var(--kpi-ink); color:var(--kpi-page); font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:9px; pointer-events:none; transition:opacity .18s, transform .18s; z-index:10060; box-shadow:var(--kpi-shadow)} .kpi-page .toast.show {opacity:1; transform:translateX(-50%) translateY(0)} /* Lát cắt giao chỉ tiêu theo NVBH — bước 6 popup cấu hình, cùng hình với màn Kế hoạch bán hàng. Đặt SAU khối .st: bảng lát cắt nằm lồng trong .st nên phải thắng các luật td/th của bảng cha (cùng độ ưu tiên, luật khai sau thắng). */ .kpi-page .st tr.cutrow > td {text-align:left; white-space:normal; padding:0 0 10px 0; background:var(--kpi-surface-2)} .kpi-page .cut {margin:0 8px; border:1px solid var(--kpi-grid); border-radius:9px; background:var(--kpi-surface); overflow:hidden} .kpi-page .cuthd {display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--kpi-grid); font-size:11.5px; letter-spacing:.04em} .kpi-page .cuthd .mut {color:var(--kpi-muted); letter-spacing:0} .kpi-page table.cuttbl {width:100%; min-width:0; border-collapse:collapse} .kpi-page .cuttbl th {font-size:10px; font-weight:650; color:var(--kpi-muted); text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:6px 10px; border-bottom:1px solid var(--kpi-grid); background:var(--kpi-surface-2)} .kpi-page .cuttbl th:nth-child(3), .kpi-page .cuttbl th:nth-child(4), .kpi-page .cuttbl th:nth-child(5) {text-align:right} .kpi-page .cuttbl td {padding:5px 10px; border-bottom:1px solid var(--kpi-grid); font-size:12.5px; text-align:left; white-space:nowrap} .kpi-page .cuttbl td.num {text-align:right; font-variant-numeric:tabular-nums} .kpi-page .cuttbl tr:last-child td {border-bottom:0} .kpi-page .cuttbl tr.locked td {color:var(--kpi-muted)} .kpi-page .cuttbl .tg {display:inline-block; width:16px; text-align:center; color:var(--kpi-muted); font-size:10px; border:0; background:none; padding:0; cursor:pointer; font:inherit} .kpi-page .cuttbl span.tg {cursor:default} .kpi-page .cuttbl .lvtag {display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--kpi-muted); border:1px solid var(--kpi-grid); border-radius:5px; padding:1px 5px; margin-right:6px; background:var(--kpi-surface-2)} .kpi-page .cuttbl .nm.root {font-weight:700; color:var(--kpi-ink)} .kpi-page .cuttbl .mg {display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; border:1px solid var(--kpi-grid); color:var(--kpi-ink-2); background:var(--kpi-surface)} .kpi-page .cuttbl .mg i {width:6px; height:6px; border-radius:50%; background:var(--kpi-muted)} .kpi-page .cuttbl .mg.giao {color:var(--kpi-accent-strong); border-color:var(--kpi-accent); background:var(--kpi-accent-wash)} .kpi-page .cuttbl .mg.giao i {background:var(--kpi-accent-strong)} .kpi-page .cuttbl .mg.tong i {background:var(--kpi-ink-2)} .kpi-page .cuttbl .mg.khoa {opacity:.7} .kpi-page .cutlnk {display:inline-block; margin-top:3px; font-size:11px; font-weight:600; color:var(--kpi-accent-strong); background:var(--kpi-accent-wash); border:1px solid var(--kpi-accent); border-radius:999px; padding:1px 8px; cursor:pointer; font-family:inherit}