/* ═══════════════════════════════════════════════════════════════ Bàn quản lí — bộ áo, chuyển nguyên văn từ salesos-ban-lam-viec-mockup.html. Mọi selector neo vào #bql. Mockup đặt tên class trần (.card .btn .sec .ps …) trùng tên với nhiều class đang chạy trong app; neo theo id cho độ đặc hiệu 1-x-x nên bên trong hộp mockup thắng, bên ngoài hộp không rule nào với tới. Sửa bộ áo thì sửa ở mockup rồi dựng lại, đừng sửa tay ở đây. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ Bàn làm việc — Sales OS · mockup Token lấy ĐÚNG theo lớp đang thắng trên live: css/sales-os-v3.css (body.sales-v3) + css/plan-v3.css (body.plan-v3) — Monday DS v2. Icon: sprite từ js/sales-icons.js (stroke 1.75 · currentColor). Số liệu: T9/2026 đo trên DB live 21/09/2026 09:20 — không có số bịa. ═══════════════════════════════════════════════════════════════ */ #bql *, #bql *::before, #bql *::after{box-sizing:border-box} /* Ba lần trong file này một class mới trùng tên class cũ có display riêng, làm thuộc tính hidden mất tác dụng mà không lỗi nào nổ. Chốt lại một lần. */ #bql [hidden]{display:none !important} /* ══════════════════════════════════════════════════════════════════════════ BẢNG MÀU «XANH MONDAY TƯƠI» — ba tầng, khai MỘT chỗ duy nhất là khối :root dưới đây. Không có hex nào nằm ngoài khối này: mọi rule CSS, mọi style inline trong markup và mọi bảng màu trong JS đều trỏ về var(--…). TẦNG 1 nền tảng · TẦNG 2 một hue cho mỗi mục · TẦNG 3 ngữ nghĩa cho SỐ LIỆU. Luật dùng chỉ có ba lớp: A nền đặc + chữ trắng --sec-N-solid + --text-on-solid B nền nhạt + chữ đậm --sec-N-tint + --sec-N-ink C một vệt màu --sec-N (chấm 8px · gạch 3px · viền trên thẻ) Hue của MỤC chỉ dùng cho khung của mục. Số liệu bên trong luôn dùng tầng 3 — nếu không, một con số tô --sec-5 sẽ bị đọc thành cảnh báo. ── BẢNG ĐỐI CHIẾU tên cũ → mới ──────────────────────────────────────────── Tên cũ đã dùng 734 lượt var() trong file này nên GIỮ NGUYÊN TÊN và trỏ sang token mới (đúng luật "viết bảng đối chiếu thay vì đổi tên hàng loạt"). --surface → --bg-surface --line → --border-line --surface-2 → --bg-canvas --line-2 → --border-strong --surface-3 → --bg-sunken --bg → --bg-canvas --text → --text-ink --muted → --text-muted --soft → --text-muted ⚠ xem ghi chú (a) --primary → --sec-1-solid --primary-h → --sec-1-solid-hover --primary-soft→ --sec-1-tint --primary-ink → --sec-1-ink --done/-bg/-ink → --ok / --ok-tint / --ok-ink --working/-bg/-ink → --warn / --warn-tint / --warn-ink --stuck/-bg/-ink → --bad / --bad-tint / --bad-ink --info/-bg/-ink → --sec-9 / --sec-9-tint / --sec-9-ink --purple/-bg/-ink → --sec-2 / --sec-2-tint / --sec-2-ink --ca/-ink/-bg → --sec-5 / --sec-5-ink / --sec-5-tint --cs/-ink/-bg/-bar → --neutral / --neutral-ink / --neutral-tint / --neutral (a) --soft cũ là #9699A6, tương phản chỉ 2,84:1 trên nền trắng và 2,41:1 trên nền lún — trượt xa ngưỡng 4,5:1 ở cả 126 chỗ đang dùng. Đo lại: KHÔNG có tông nào nhạt hơn --text-muted mà còn đạt 4,5:1 trên cả ba nền, nên --soft nhập vào --text-muted. Mất một bậc xám trong thang chữ, đổi lấy 126 chỗ từ 2,4:1 lên 5,0:1; phân cấp còn lại dựa vào cỡ chữ và độ đậm, không dựa vào màu. (b) Tầng 3 TRÙNG HỆT tầng 2 ở ba chỗ, không chỉ "trùng tông": --ok === sec-4-solid, --warn === sec-5-solid, --bad === sec-7-solid, và ba tint cũng trùng từng byte. Vẫn khai rời nhau để đổi hue của mục không kéo theo màu số liệu. ══════════════════════════════════════════════════════════════════════════ */ #bql{ /* ── MAGNOLIA NAVY — bảng gốc. Mọi token phía dưới trỏ về đây, không có hex nào khác trong file. ───────────────────────────────────────── */ --mg-ground:#F7F6F1; --mg-surface:#FFFFFF; --mg-cream:#F3F0E2; --mg-cream-2:#FAF8F1; --mg-ink:#16191F; --mg-muted:#525864; --mg-line:#E1DDD0; --mg-line-strong:#A6A6A6; --mg-control-border:#8C8C8C; --mg-track:#ECE8DC; --mg-navy:#0E448E; --mg-navy-deep:#0C324D; --mg-navy-soft:#E5ECF6; --mg-tan:#C98A4E; --mg-red:#C22319; /* Bảy vai trò trạng thái — cặp chữ / nền. Chữ dùng luôn làm màu viền chip. */ --mg-pri:#0E448E; --mg-pri-bg:#E5ECF6; --mg-ok:#1E6E45; --mg-ok-bg:#E3F0E7; --mg-warn:#8A561B; --mg-warn-bg:#F8ECDD; --mg-bad:#C22319; --mg-bad-bg:#F9E4E2; --mg-vio:#5A4799; --mg-vio-bg:#EEEAF6; /* Bảng gốc ghi #0B7A80, đo lại chỉ 4,48:1 trên chính nền #DFF4F5 của nó — trượt ngưỡng 4,5. Đậm thêm một nấc: 4,79:1 trên tint, 5,46:1 trên trắng. */ --mg-teal:#0A757B; --mg-teal-bg:#DFF4F5; --mg-neu:#3F4550; --mg-neu-bg:#EFEDE6; /* Chữ đặt TRÊN nền navy — chỉ ba tông này được phép. */ --mg-on-navy:#FFFFFF; --mg-on-navy-2:#DCE5F2; --mg-on-navy-3:#B7C5D6; /* ── FONT ──────────────────────────────────────────────────────────── --font-head chỉ cho h1 trang, h2 khối và số KPI lớn; mọi chữ còn lại (bảng, nút, form, chip) dùng --font-body. */ --font-body:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif; --font-head:'Platypi',Georgia,serif; /* ── BO GÓC ───────────────────────────────────────────────────────── */ --radius-card:0; --radius-ctrl:2px; --radius-chip:2px; --radius-bar:0; /* ── TẦNG 1 — NỀN TẢNG ─────────────────────────────────────────────── */ --bg-canvas:var(--mg-ground); --bg-surface:var(--mg-surface); --bg-sunken:var(--mg-cream); --text-ink:var(--mg-ink); --text-muted:var(--mg-muted); --text-on-solid:var(--mg-on-navy); --border-line:var(--mg-line); --border-strong:var(--mg-line-strong); --rail-bg:var(--mg-navy-deep); --rail-title:var(--mg-on-navy); --rail-muted:#9FB2C8; --rail-item:var(--mg-on-navy); --rail-icon:var(--mg-on-navy-3); --rail-item-hover:rgba(255,255,255,.10); --rail-active-bg:var(--mg-navy); --rail-active-fg:var(--mg-on-navy); --focus-ring:var(--mg-navy); --focus-ring-dark:#9FC0EA; /* ── TẦNG 2 — CHÍN MỤC, NAY CÙNG MỘT NAVY ─────────────────────────── Magnolia Navy là bảng MỘT màu thương hiệu: tiêu đề mọi khối đều nền --mg-navy. Mười tên biến giữ nguyên để 734 lượt var() không phải sửa, và để sau này muốn tách hue lại thì chỉ đổi ở đây. Việc phân biệt người phụ trách chuyển hẳn sang màu avatar (bảy vai trò ở trên). */ /* ① Tổng quan */ --sec-1:var(--mg-navy); --sec-1-solid:var(--mg-navy); --sec-1-solid-hover:var(--mg-navy-deep); --sec-1-ink:var(--mg-navy-deep); --sec-1-tint:var(--mg-navy-soft); /* ② Kế hoạch */ --sec-2:var(--mg-navy); --sec-2-solid:var(--mg-navy); --sec-2-solid-hover:var(--mg-navy-deep); --sec-2-ink:var(--mg-navy-deep); --sec-2-tint:var(--mg-navy-soft); /* ③ KH hoạt động */ --sec-3:var(--mg-navy); --sec-3-solid:var(--mg-navy); --sec-3-solid-hover:var(--mg-navy-deep); --sec-3-ink:var(--mg-navy-deep); --sec-3-tint:var(--mg-navy-soft); /* ④ KH công tác */ --sec-4:var(--mg-navy); --sec-4-solid:var(--mg-navy); --sec-4-solid-hover:var(--mg-navy-deep); --sec-4-ink:var(--mg-navy-deep); --sec-4-tint:var(--mg-navy-soft); /* ⑤ Đề xuất */ --sec-5:var(--mg-navy); --sec-5-solid:var(--mg-navy); --sec-5-solid-hover:var(--mg-navy-deep); --sec-5-ink:var(--mg-navy-deep); --sec-5-tint:var(--mg-navy-soft); /* ⑥ Đề xuất thiết kế */ --sec-6:var(--mg-navy); --sec-6-solid:var(--mg-navy); --sec-6-solid-hover:var(--mg-navy-deep); --sec-6-ink:var(--mg-navy-deep); --sec-6-tint:var(--mg-navy-soft); /* ⑧ Giao hàng */ --sec-8:var(--mg-navy); --sec-8-solid:var(--mg-navy); --sec-8-solid-hover:var(--mg-navy-deep); --sec-8-ink:var(--mg-navy-deep); --sec-8-tint:var(--mg-navy-soft); /* ⑨ Danh sách outlet */ --sec-9:var(--mg-navy); --sec-9-solid:var(--mg-navy); --sec-9-solid-hover:var(--mg-navy-deep); --sec-9-ink:var(--mg-navy-deep); --sec-9-tint:var(--mg-navy-soft); /* Hợp đồng & BBBG */ --sec-10:var(--mg-navy); --sec-10-solid:var(--mg-navy); --sec-10-solid-hover:var(--mg-navy-deep); --sec-10-ink:var(--mg-navy-deep); --sec-10-tint:var(--mg-navy-soft); /* ── TẦNG 3 — NGỮ NGHĨA, chỉ dùng cho SỐ LIỆU ──────────────────────── */ --ok:var(--mg-ok); --ok-ink:var(--mg-ok); --ok-tint:var(--mg-ok-bg); --warn:var(--mg-warn); --warn-ink:var(--mg-warn); --warn-tint:var(--mg-warn-bg); --bad:var(--mg-red); --bad-ink:var(--mg-red); --bad-tint:var(--mg-bad-bg); --neutral:var(--mg-neu); --neutral-ink:var(--mg-neu);--neutral-tint:var(--mg-neu-bg); /* ── ĐỔ BÓNG (đều là tông mực trung tính — không có bóng MÀU) ──────── */ --sh-sm:0 1px 2px rgba(0,0,0,.05); --sh-md:0 2px 10px rgba(20,20,25,.06); --sh-pop:0 14px 38px rgba(22,32,51,.16); --sh-nav:0 6px 14px -10px rgba(22,32,51,.5); --sh-mod:0 12px 34px rgba(20,24,40,.18); --sh-sub:0 8px 8px -8px rgba(20,24,40,.10); --sh-scrim:rgba(20,24,34,.44); --sh-scroll:rgba(22,32,51,.14); --focus:0 0 0 3px color-mix(in srgb, var(--focus-ring) 34%, transparent); /* ── ALIAS tên cũ (xem bảng đối chiếu ở trên) ──────────────────────── */ --surface:var(--bg-surface); --surface-2:var(--bg-canvas); --surface-3:var(--bg-sunken); --text:var(--text-ink); --muted:var(--text-muted); --soft:var(--text-muted); --primary:var(--mg-navy); --primary-h:var(--mg-navy-deep); --primary-soft:var(--mg-navy-soft); --primary-ink:var(--mg-navy-deep); --done:var(--mg-ok); --done-bg:var(--mg-ok-bg); --done-ink:var(--mg-ok); --working:var(--mg-warn); --working-bg:var(--mg-warn-bg); --working-ink:var(--mg-warn); --stuck:var(--mg-red); --stuck-bg:var(--mg-bad-bg); --stuck-ink:var(--mg-red); --info:var(--mg-pri); --info-bg:var(--mg-pri-bg); --info-ink:var(--mg-pri); --purple:var(--mg-vio); --purple-bg:var(--mg-vio-bg); --purple-ink:var(--mg-vio); --line:var(--border-line); --line-2:var(--mg-control-border); --bg:var(--bg-canvas); /* C.A giữ vai trò «cảnh báo/đang chạy», C.S giữ vai trò trung tính — đúng quan hệ cũ (C.A hổ phách, C.S xám đá), nay đọc theo bảng bảy vai trò. */ --ca:var(--mg-warn); --ca-ink:var(--mg-warn); --ca-bg:var(--mg-warn-bg); --cs:var(--mg-neu); --cs-ink:var(--mg-neu); --cs-bg:var(--mg-neu-bg); --cs-bar:var(--mg-neu); --rail-w:196px; --hd-h:72px; --nav-h:46px; } /* Hue của MỤC cấp xuống bằng biến cục bộ, nên chỉ có MỘT rule cho mỗi thành phần khung (ô số, gạch tiêu đề, chip điều hướng) thay vì chín bản sao. Chip điều hướng nằm ngoài
nên phải nhận biến qua selector riêng của nó. */ #bql [data-sec="1"]{--s-base:var(--sec-1);--s-solid:var(--sec-1-solid);--s-ink:var(--sec-1-ink);--s-tint:var(--sec-1-tint)} #bql [data-sec="2"]{--s-base:var(--sec-2);--s-solid:var(--sec-2-solid);--s-ink:var(--sec-2-ink);--s-tint:var(--sec-2-tint)} #bql [data-sec="3"]{--s-base:var(--sec-3);--s-solid:var(--sec-3-solid);--s-ink:var(--sec-3-ink);--s-tint:var(--sec-3-tint)} #bql [data-sec="4"]{--s-base:var(--sec-4);--s-solid:var(--sec-4-solid);--s-ink:var(--sec-4-ink);--s-tint:var(--sec-4-tint)} #bql [data-sec="5"]{--s-base:var(--sec-5);--s-solid:var(--sec-5-solid);--s-ink:var(--sec-5-ink);--s-tint:var(--sec-5-tint)} #bql [data-sec="7"]{--s-base:var(--sec-6);--s-solid:var(--sec-6-solid);--s-ink:var(--sec-6-ink);--s-tint:var(--sec-6-tint)} #bql [data-sec="8"]{--s-base:var(--sec-8);--s-solid:var(--sec-8-solid);--s-ink:var(--sec-8-ink);--s-tint:var(--sec-8-tint)} #bql [data-sec="9"]{--s-base:var(--sec-9);--s-solid:var(--sec-9-solid);--s-ink:var(--sec-9-ink);--s-tint:var(--sec-9-tint)} /* ⚠ Mỗi mục PHẢI có đúng một dòng ở đây. Thiếu dòng thì `--s-solid` rỗng ⇒ viên số trên dải điều hướng mất nền mà chữ vẫn trắng — chữ trắng trên nền trắng, không lỗi nào nổ. Đúng cảnh mục ⑥ (id `s10`) gặp ngày 22/09/2026: số 6 vẫn nằm trong DOM, chỉ là không nhìn thấy. Kéo theo cả nền nhạt khi rê chuột và gạch chân khi đang đứng ở mục đó cũng biến mất, vì chúng dùng chung bộ biến này. ⚠ Tên biến đi theo SỐ HIỂN THỊ của mục, còn selector đi theo `id` — hai thứ đã rời nhau từ khi chèn mục ⑥ vào giữa (xem chú thích ở đầu
). */ #bql [data-sec="6"]{--s-base:var(--sec-10);--s-solid:var(--sec-10-solid);--s-ink:var(--sec-10-ink);--s-tint:var(--sec-10-tint)} #bql, #bql{margin:0;padding:0} #bql{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } /* Mọi ô số thẳng cột — bảng, chip đếm, thanh nhãn. */ #bql .tn, #bql table td, #bql table th, #bql .n, #bql .v, #bql .c{font-variant-numeric:tabular-nums} #bql h1, #bql h2, #bql h3, #bql h4, #bql h5{margin:0;font-weight:700;letter-spacing:-.02em} #bql a{color:var(--mg-navy-deep);text-decoration:none} #bql a:hover{color:var(--mg-navy)} #bql button, #bql input, #bql select, #bql optgroup, #bql textarea{font-family:inherit} #bql button{font-size:inherit;cursor:pointer} #bql :focus-visible{outline:2px solid var(--mg-navy);outline-offset:2px;box-shadow:none} #bql .ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;vertical-align:-3px} #bql .ic-sm{width:13px;height:13px;vertical-align:-2px} #bql .ic-lg{width:20px;height:20px;vertical-align:-4px} #bql .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ══ Shell ══ */ #bql{display:flex;min-height:100vh} #bql .rail{ width:var(--rail-w);flex:none;background:var(--rail-bg);color:var(--rail-item); position:sticky;top:0;height:100vh;overflow:auto;padding:12px 0 20px; } #bql .rail-brand{display:flex;align-items:center;gap:9px;padding:4px 14px 14px;color:var(--rail-title);font-weight:700;font-size:14px;letter-spacing:-.02em} #bql .rail-brand .dot{width:22px;height:22px;border-radius:var(--radius-ctrl);background:var(--rail-active-bg);display:grid;place-items:center;color:var(--rail-active-fg)} #bql .rail-ghd{display:flex;align-items:center;gap:8px;padding:12px 14px 5px;font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--rail-muted);text-transform:uppercase} #bql .rail-ghd .gdot{width:7px;height:7px;border-radius:99px;flex:none} /* Chấm 7px nối rail với thân trang: tab nào có mục thật trên trang thì mang base của mục đó; tab chưa có mục thì để --rail-muted, không bịa hue. */ #bql .rail-item .idot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--s-base,var(--rail-muted))} #bql .rail-ghd .gn{margin-left:auto;font-size:9.5px;font-weight:700;background:var(--rail-item-hover);border-radius:var(--radius-chip);padding:1px 6px} #bql .rail-item{ display:flex;align-items:center;gap:9px;width:100%;padding:7px 14px;border:0;background:none; color:var(--rail-item);font-size:12.5px;font-weight:600;letter-spacing:.03em;text-align:left; border-left:3px solid transparent;border-radius:var(--radius-ctrl); } #bql .rail-item .ic{color:var(--rail-icon)} #bql .rail-item:hover{background:var(--rail-item-hover);color:var(--rail-title)} #bql .rail-item:hover .ic, #bql .rail-item.active .ic{color:var(--rail-active-fg)} /* Rail nền tối nên vòng focus sáng --focus-ring-dark mới thấy; thân trang sáng thì dùng --focus-ring. Thiếu cặp này là tab-focus mất dấu đúng ở nửa tối. */ #bql .rail-item:focus-visible, #bql .rail-brand:focus-visible{outline:2px solid var(--focus-ring-dark);outline-offset:-2px} #bql .rail-item.active{background:var(--rail-active-bg);border-left-color:var(--rail-active-bg);color:var(--rail-active-fg);font-weight:700} #bql .main{flex:1;min-width:0;display:flex;flex-direction:column} /* ══ Header ══ */ #bql .hd{ position:sticky;top:0;z-index:60;background:var(--surface); border-bottom:1px solid var(--line);padding:9px 20px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; } #bql .hd-t{display:flex;align-items:center;gap:10px;min-width:0} #bql .hd-t .ico{width:38px;height:38px;border-radius:var(--radius-ctrl);background:var(--primary-soft);color:var(--primary-ink);display:grid;place-items:center;flex:none} #bql .hd-t .ico .ic{width:20px;height:20px} #bql .hd-t h1{font-size:26px;line-height:1.15;font-family:var(--font-head);color:var(--mg-navy-deep)} #bql .hd-t .sub{font-size:12.5px;color:var(--soft);font-weight:400;margin-top:2px} #bql .hd-c{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #bql .seg{display:inline-flex;background:var(--mg-cream);border:1px solid var(--line);border-radius:var(--radius-ctrl);padding:2px;gap:2px} #bql .seg button{border:0;background:none;padding:4px 11px;border-radius:var(--radius-ctrl);font-size:12px;font-weight:700;color:var(--muted)} #bql .seg button:hover:not(.on){color:var(--text)} #bql .seg button.on{background:var(--mg-navy);color:var(--mg-on-navy);box-shadow:none} #bql .pick{ height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 9px; border:1px solid var(--border-line);background:var(--surface);border-radius:var(--radius-ctrl); font-size:12.5px;font-weight:700;color:var(--text); } #bql .pick.on{border-color:var(--sec-1);color:var(--sec-1-ink);background:var(--sec-1-tint)} #bql .pick .ic{color:var(--soft)} #bql .wk{display:inline-flex;gap:3px} #bql .wk button{ height:30px;min-width:34px;padding:0 9px;border:1px solid var(--line-2);background:var(--surface); border-radius:var(--radius-ctrl);font-size:12px;font-weight:700;color:var(--muted); } #bql .wk button.on{background:var(--primary);border-color:var(--primary);color:var(--text-on-solid)} #bql .wk button:hover:not(.on){border-color:var(--primary);color:var(--primary-ink)} /* ══ Sub-nav ══ */ #bql .nav{ position:sticky;top:var(--hd-h);z-index:55;background:color-mix(in srgb, var(--bg-surface) 94%, transparent); backdrop-filter:blur(6px);border-bottom:1px solid var(--line); display:flex;gap:2px;padding:0 20px;overflow:auto;scrollbar-width:none; } #bql .nav::-webkit-scrollbar{display:none} #bql .nav.stuck{box-shadow:var(--sh-nav)} #bql .nav a{ display:flex;align-items:center;gap:6px;padding:11px 11px;white-space:nowrap; font-size:13.5px;font-weight:600;color:var(--muted); border-bottom:2px solid transparent;margin-bottom:-1px; } #bql .nav a:hover{color:var(--s-ink);background:var(--s-tint)} #bql .nav a.on{color:var(--s-ink);background:var(--s-tint);font-weight:700;border-bottom-color:var(--s-base)} #bql .nav a .c{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:var(--radius-chip);padding:1px 6px} #bql .nav a .n{width:17px;height:17px;flex:none;border-radius:var(--radius-chip);background:var(--s-solid);color:var(--text-on-solid); display:grid;place-items:center;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums} #bql .nav a.on .c{background:var(--bg-surface);color:var(--s-ink)} /* ══ Sections ══ */ #bql .body{padding:20px 20px 56px;max-width:1440px;width:100%} #bql .sec{margin-bottom:22px;scroll-margin-top:calc(var(--hd-h) + var(--nav-h) + 14px)} #bql .sec-hd{display:flex;align-items:baseline;gap:11px;margin:0 0 4px;flex-wrap:wrap; padding:8px 14px;background:var(--mg-navy)} #bql .sec-hd .no{ width:23px;height:23px;flex:none;border-radius:var(--radius-ctrl);background:var(--mg-surface);color:var(--mg-navy); display:grid;place-items:center;font-size:12.5px;font-weight:700;align-self:center } #bql .sec-hd h2{font-size:22px;line-height:1.18;font-family:var(--font-head);color:var(--mg-on-navy)} #bql .sec-hd .hint{font-size:12px;color:var(--mg-on-navy-2);font-weight:400} /* Nút/chip nằm trong dải navy — chuyển sang kiểu nút phụ nền trắng để còn đọc được. */ #bql .sec-hd .secn{color:var(--mg-on-navy-2)} #bql .sec-hd .ps--grey{background:var(--mg-surface);color:var(--mg-navy-deep);border-color:var(--mg-surface)} #bql .sec-hd .btn--sec{background:var(--mg-surface);border-color:var(--mg-surface)} #bql .sec-hd .sp{flex:1} /* Điều khiển từng khối: ô lọc + nút bung/thu. BA kênh ẩn dòng RỜI NHAU, đừng trộn: hidden → phạm vi sales + chip .f-out → bộ lọc chữ .f-fold → thu/bung nhóm bậc trong hai bảng plan Trộn kênh là sinh lỗi câm: các bộ đếm «nhóm này còn dòng nào không» đọc `hidden`, nên nếu thu nhóm cũng ghi vào `hidden` thì thu hết dòng ⇒ cả nhóm bị coi là rỗng ⇒ hàng tiêu đề bậc bị đóng `.f-out` và mất luôn nút bung. */ #bql .f-out{display:none !important} #bql .f-fold{display:none !important} #bql .sec-hd .sc{display:inline-flex;align-items:center;gap:7px;margin-left:auto;align-self:center} #bql .secf{position:relative;display:inline-flex} #bql .secf input{ height:28px;width:186px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl);background:var(--surface); padding:0 8px 0 27px;font-family:inherit;font-size:12px;color:var(--text) } #bql .secf input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .secf svg{position:absolute;left:8px;top:8px;width:13px;height:13px;color:var(--soft);pointer-events:none} #bql .secn{font-size:11px;font-weight:700;color:var(--primary-ink);font-variant-numeric:tabular-nums;white-space:nowrap} #bql .secx{ height:28px;width:28px;flex:none;display:grid;place-items:center;color:var(--muted); border:1px solid var(--line-2);border-radius:var(--radius-ctrl);background:var(--surface) } #bql .secx:hover{border-color:var(--primary);color:var(--primary-ink)} #bql .secx svg{transition:transform .18s cubic-bezier(.22,1,.36,1)} #bql .sec.is-collapsed .secx svg{transform:rotate(-90deg)} #bql .sec.is-collapsed>*:not(.sec-hd){display:none} #bql .sec.is-collapsed .sec-hd{margin-bottom:0} #bql .secall{display:inline-flex;gap:5px} #bql .secall button{ height:26px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl);background:var(--surface); font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap } #bql .secall button:hover{border-color:var(--primary);color:var(--primary-ink)} #bql .card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-sm);padding:14px} #bql .card--flush{padding:0;overflow:hidden} #bql .card-h{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap} #bql .card-h h3{font-size:16.5px} #bql .card-h .sp{flex:1} #bql .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #bql .g2--wide{grid-template-columns:minmax(0,1.34fr) minmax(0,1fr)} #bql .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #bql .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #bql .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} /* ══ KPI band ══ */ /* Cột «Đơn» từng để .85fr — hẹp nhất bảng trong khi nó là thẻ DUY NHẤT có thêm hàng chip C.A/C.S/outlet. Hệ quả đo được ở 1280px: hàng chip xuống 2 dòng, đội cao CẢ BỐN thẻ từ 242px lên 269px. Cho bằng C.A/C.S. */ #bql .kpi{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-sm);overflow:hidden} #bql .kcell{padding:13px 16px;border-left:1px solid var(--line);position:relative;display:flex;flex-direction:column} #bql .kcell:first-child{border-left:0} #bql .kcell::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:var(--radius-bar);background:var(--acc,var(--line-2))} #bql .kcell:first-child::before{left:0} #bql .kcell .v{font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.12;margin-top:6px;font-family:var(--font-head)} /* `white-space:nowrap`: phần «/ target» phải đi NGUYÊN CỤM. Thiếu nó thì dòng số to ngắt ngay giữa con số và đơn vị — đo 1280px, thẻ C.S in «447,6 tr / 1.265,4» rồi thả chữ «tr» trơ trọi xuống dòng dưới. Cụm này nay xuống dòng cả cụm hoặc không. */ #bql .kcell .v small{font-size:13.5px;font-weight:700;color:var(--soft);letter-spacing:0;white-space:nowrap} #bql .kcell .meta{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} #bql .kdon{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px} /* Thanh tiến độ GỘP — ghim đáy thẻ (margin-top:auto) nên 4 thẻ có thanh trên cùng một đường ngang dù phần trên cao thấp khác nhau. Một thanh mang HAI mốc: phần tô = % đạt target, vạch đứng = % thời gian đã trôi. Nhãn hai bên đọc đúng hai mốc đó. */ /* Hai thanh ghim CHUNG một đáy thẻ để 4 thẻ thẳng hàng; từng thanh không tự ghim. */ #bql .kbars{margin-top:auto;padding-top:11px;display:grid;gap:9px} #bql .kbar{min-width:0} /* Thanh 2 — TIỀN. Mảnh hơn thanh nhịp độ và tô đúng màu nhấn của thẻ, để không đọc nhầm hai thanh thành một cặp cùng đơn vị. Không có vạch thời gian: thanh này trả lời «còn thiếu bao nhiêu tiền», không phải «có kịp tiến độ không». */ #bql .kbars>.kbar+.kbar{padding-top:9px;border-top:1px dashed var(--line)} #bql .pb--m{height:6px;margin-top:0} /* Dải ② có 5 ô trong cùng bề rộng mà khối ① chỉ có 4 — số to hơn một bậc thì tràn. */ #bql #plan-strip .v{font-size:26px} #bql #plan-strip .v small{font-size:12.5px} /* Màn hẹp: hạ một nấc cỡ chữ của dòng số to để cụm «actual / target» còn nằm trọn một hàng. Ở phạm vi toàn công ty, chuỗi dài nhất là «447,6 tr / 1.265,4 tr» và «1.834,0 tr / 1.385,4 tr» — ở 1280px thẻ chỉ rộng 243px (dải ①) và 209px (dải ②) nên giữ nguyên 31px/26px là cụm target rơi xuống hàng riêng. Hạ cỡ chứ KHÔNG cắt chữ số. */ @media (max-width:1520px){ #bql .kcell .v{font-size:26px} #bql .kcell .v small{font-size:12px} /* Dải ② chia 5 cột trong cùng bề ngang mà dải ① chỉ chia 4, lại mang chuỗi dài nhất («1.834,0 tr / 1.385,4 tr») nên phải hạ thêm một nấc nữa mới đủ chỗ. */ #bql #plan-strip .v{font-size:20px} #bql #plan-strip .v small{font-size:10.5px}} #bql .pb--m .act{background:var(--mg-tan)} #bql .kbl--m b{font-size:12px;color:var(--text)} #bql .kbl--m .t b{color:var(--muted)} /* `white-space:nowrap` + `min-width:0` mà KHÔNG có overflow và KHÔNG cho xuống dòng thì chữ tràn khỏi phần của mình rồi ĐÈ lên ô bên cạnh — không bị cắt nên không có dấu hiệu nào báo tràn. Thẻ «Đơn» dính đầu tiên: nhãn dài nhất nằm trong cột hẹp nhất. Cho xuống dòng là giữ được đủ chữ số, hơn hẳn cắt bớt hay thu nhỏ cỡ chữ. */ /* Dòng nhãn dưới mỗi thanh chia HAI CỘT cân hai bên: trái là con số thật của thẻ, phải là mốc đem so (Target · Thời gian). Trong mỗi cột nhãn nhỏ nằm TRÊN con số, nên cột chỉ cần nửa bề ngang mà vẫn gọn đúng hai hàng — mọi thẻ cao bằng nhau ở mọi bề ngang, hai thanh của bốn thẻ vẫn thẳng một đường. Trước đây hai cụm xếp CHỒNG lên nhau (grid một cột): mốc so bị đẩy xuống dưới con số thật nên mắt phải đọc theo chiều dọc mới ghép được cặp «đạt / phải đạt». Cột phải để `auto` — ôm đúng bề ngang con số nên con số KHÔNG bao giờ bị cắt; cột trái `minmax(0,1fr)` nên chật thì NHÃN rút gọn bằng ba chấm. Đây là chỗ từng hỏng nặng nhất: `white-space:nowrap` + `min-width:0` mà thiếu overflow thì chữ tràn ĐÈ sang ô bên cạnh, mất chữ mà không có dấu hiệu nào báo. */ #bql .kbl{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px; align-items:end;margin-top:5px} #bql .kbl .t{text-align:right} #bql .kbl span{display:block;min-width:0} /* `display:block` chứ không `inline-flex`: flex thì `text-overflow` không ăn, chữ dài bị cắt phăng mà không có dấu hiệu nào. Dạng block + ellipsis thì tràn là THẤY được. */ #bql .kbl i{display:block;font-size:9.5px;font-weight:700;font-style:normal; letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} #bql .kbl b{display:block;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:-.01em;white-space:nowrap} #bql .kbl .t b{color:var(--working-ink)} #bql .kbl b.ok{color:var(--done-ink)} #bql .kbl b.warn{color:var(--working-ink)} #bql .kbl b.bad{color:var(--stuck-ink)} /* Thẻ KPI bấm được → mở #kpop. Nhãn phụ ép 1 dòng: nếu để nó ngắt dòng thì .klb cao thêm và con số lớn của 4 thẻ không còn nằm trên cùng một đường ngang. */ #bql .kcell[data-kd]{cursor:pointer;transition:background .16s cubic-bezier(.22,1,.36,1)} #bql .kcell[data-kd]:hover{background:var(--surface-2)} #bql .kcell[data-kd][aria-expanded="true"]{background:var(--surface-2)} #bql .kcell[data-kd]:focus-visible{outline:none;box-shadow:inset var(--focus)} #bql .kcell .klb{padding-right:24px} #bql .kcell .ksub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .kinfo{position:absolute;top:9px;right:10px;width:20px;height:20px;border:0;padding:0;border-radius:var(--radius-ctrl); background:var(--surface-3);color:var(--muted);display:grid;place-items:center;flex:none} #bql .kinfo .ic{width:12px;height:12px;vertical-align:0} #bql .kcell[data-kd]:hover .kinfo, #bql .kcell[data-kd][aria-expanded="true"] .kinfo{background:var(--primary);color:var(--text-on-solid)} /* Popover chi tiết cách tính — gắn vào vì .kpi có overflow:hidden sẽ cắt mất nó. */ #bql .kpop{position:absolute;z-index:80;width:min(480px,calc(100vw - 20px));background:var(--surface); border-radius:var(--radius-card);box-shadow:var(--sh-pop);border-top:3px solid var(--acc,var(--primary));overflow:hidden} /* Khối .sku vốn nằm trong hàng bung của bảng nên thụt 40px cho thẳng cột Outlet; trong popup không có cột nào để thẳng theo, và .kpop-b đã có đệm riêng. */ #bql #cpop .sku{padding:0} /* 9 cột trên khổ hẹp thì bóp nát chữ — cho bảng giữ bề rộng tối thiểu và để .kpop-b cuộn ngang, hơn là để ô co lại tới mức không đọc được. */ #bql #cpop .sku table.sub{min-width:620px} #bql #cpop .sku-kpi{min-width:106px;flex:1 1 106px} #bql .kpop-h{display:flex;align-items:flex-start;gap:9px;padding:11px 12px 9px;border-bottom:1px solid var(--line)} #bql .kpop-h .klb{min-height:0;flex:1;padding-right:0} #bql .kpop-h .kfn{font-size:17px} #bql .kpop-h .ksub{white-space:normal} /* Bóng cuộn: chỉ hiện khi thân popover còn nội dung bên dưới — 2 lớp `local` là mảng nền trắng che, 2 lớp `scroll` là bóng nằm dưới. Không có nó thì popover bị bóp cho vừa khoảng trống trông như đã hết nội dung. */ #bql .kpop-b{padding:6px 12px 12px;max-height:min(66vh,520px);overflow:auto; background: linear-gradient(var(--surface) 40%,transparent) top/100% 16px no-repeat local, linear-gradient(transparent,var(--surface) 65%) bottom/100% 16px no-repeat local, radial-gradient(farthest-side at 50% 0,var(--sh-scroll),transparent) top/100% 7px no-repeat, radial-gradient(farthest-side at 50% 100%,var(--sh-scroll),transparent) bottom/100% 7px no-repeat} /* Dải chip số: nhãn + số, KHÔNG câu giải thích nào. Định nghĩa cần giữ nằm ở title. */ #bql .kps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:9px 0 3px} #bql .kps>span{display:flex;flex-direction:column;gap:1px;min-width:0} #bql .kps i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .kps i[title]{cursor:help;text-decoration:underline dotted var(--line-2);text-underline-offset:2px} #bql .kps b{font-size:14px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} #bql .kps b.ok{color:var(--done-ink)} #bql .kps b.warn{color:var(--working-ink)} #bql .kps b.bad{color:var(--stuck-ink)} /* Bảng outlet trong popover — thead ghim khi cuộn thân popover. */ #bql .kpt{width:100%;border-collapse:collapse;margin-top:9px} #bql .kpt th{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted); text-align:left;padding:5px 6px;background:var(--mg-cream);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:1} #bql .kpt td{font-size:11.5px;padding:5px 6px;border-bottom:1px solid var(--line)} #bql .kpt th.num, #bql .kpt td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap} #bql .kpt tbody tr:last-child td{border-bottom:0} #bql .kpt tbody tr:hover td{background:var(--mg-navy-soft)} #bql .kpt .olc{display:flex;align-items:center;gap:5px;min-width:0} #bql .kpt .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .kpt .olc .ps{flex:none} #bql .kpt .av{width:18px;height:18px;font-size:9px;flex:none} #bql .oldd{width:min(440px,calc(100vw - 20px))} /* Trong popover .ksub là TÊN OUTLET người dùng phải đọc, không phải nhãn phụ trang trí — --soft chỉ đạt 2,84:1 nên nâng lên --muted. Thẻ KPI giữ nguyên --soft. */ #bql .kpop .ksub{color:var(--muted)} #bql .olc2{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%} #bql .olc2 .nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .kpt tr.more td{color:var(--soft);font-size:10.5px;font-weight:400;text-align:left} /* Hai nhóm C.A / C.S trong CÙNG một popover — dùng lại .kfn/.ksub/.kps/.kpt của popover nên không sinh kiểu chữ thứ hai cho cùng một thứ. */ #bql .kpg{margin-top:15px;padding-top:12px;border-top:1px solid var(--line)} #bql .kpg-h{display:flex;align-items:baseline;gap:8px} #bql .kpg-h .kfn{font-size:15px;line-height:1.2} #bql .kpg-h .ksub{font-size:11.5px;color:var(--muted);white-space:normal} #bql .kpg .kps{padding:7px 0 0} /* ── Khổ riêng cho popover thẻ KPI ──────────────────────────────────────────── 480px là khổ của thời popover chỉ có MỘT bảng 3 cột. Đo ở khổ cũ: hộp 480×410, dải chỉ số khoá cứng 2 cột nên 9 ô của thẻ «Đơn» xuống 5 hàng và hai nhóm C.A/C.S mỗi nhóm thêm 2 hàng nữa, cột «Outlet» của cả hai bảng dùng chung 271px. Nới riêng `#kpop` — KHÔNG đụng `.kpop` gốc vì `#oldd`/`#fndd` cũng ăn khổ đó mà chúng chỉ có một bảng hẹp, nới ra là hộp rỗng một nửa. kpopPlace() tự kẹp mép khung nhìn nên nới an toàn: ở 1600px thẻ «Đơn» nằm sát phải vẫn được đặt vừa, khổ hẹp thì `calc(100vw - 24px)` tự rút. */ #bql #kpop{width:min(760px,calc(100vw - 24px))} #bql #kpop .kpop-b{max-height:min(76vh,720px)} /* Rộng hơn thì để dải chỉ số TỰ chia cột thay vì khoá 2: 9 ô rút còn 3 hàng, nhóm 4 ô gọn đúng một hàng. Khổ hẹp tự về 2 cột nên không cần media query. */ #bql #kpop .kps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} @media (prefers-reduced-motion:no-preference){#bql .kpop{animation:bql-kpop-in .18s cubic-bezier(.22,1,.36,1)}} @keyframes bql-kpop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} #bql .pb{position:relative;height:8px;border-radius:var(--radius-bar);background:var(--mg-track);margin-top:9px;overflow:visible} #bql .pb i{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-bar);display:block} #bql .pb .fc{background:color-mix(in srgb, var(--mg-tan) 30%, transparent)} #bql .pb .act{background:var(--mg-tan)} #bql .pb.ca .act{background:var(--mg-tan)} /* Tiến độ BA BẬC — so với % thời gian đã trôi, không phải với 100%: nhanh hơn mốc thời gian = XANH · sát mốc (±2 điểm) = VÀNG · chậm hơn = ĐỎ. Đặt SAU hai dòng trên để đè màu định danh phễu. Thanh phải nói ĐÚNG cái mà con số ngay dưới nó đang nói — .kbl b.ok/.warn/.bad đã là ba màu (--done-ink / --working-ink / --stuck-ink) từ đầu. Trước 21/09/2026 hai bậc ok và warn của THANH dùng chung một tông hổ phách với lý do «để thanh không kể chuyện khác con số»; lý do đó ngược: chính nó làm ô «Plan · do sale nhập» đạt 139,4% (mốc thời gian 70,0%) hiện số XANH mà thanh VÀNG. Ba màu đều là bộ ngữ nghĩa của bảng Magnolia Navy và đều đủ tương phản với nền rãnh --mg-track #ECE8DC cho vật thể phi chữ (ngưỡng 3:1) — hổ phách thương hiệu --mg-tan #C98A4E chỉ được 2,37:1 nên không dùng làm ruột thanh. */ #bql .pb.t-ok .act{background:var(--mg-ok)} #bql .pb.t-warn .act{background:var(--mg-warn)} #bql .pb.t-bad .act{background:var(--mg-red)} #bql .pb .tm{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--mg-navy-deep);border-radius:var(--radius-bar)} #bql .pb .tm::after{content:"";position:absolute;top:-4px;left:-3px;border:4px solid transparent;border-top-color:var(--mg-navy-deep)} #bql .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:7px} #bql .legend b{display:inline-block;width:9px;height:9px;border-radius:var(--radius-chip);vertical-align:-1px;margin-right:4px} /* ══ Pills ══ */ #bql .pill, #bql .ps{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-chip);font-weight:700;white-space:nowrap} #bql .pill{padding:3px 10px;font-size:11.5px;color:var(--text-on-solid)} #bql .ps{padding:2px 9px;font-size:11px;border:1px solid transparent} #bql .pill--done{background:var(--done)} #bql .pill--work{background:var(--working);color:var(--text-on-solid)} #bql .pill--stuck{background:var(--stuck)} #bql .pill--info{background:var(--info)} #bql .pill--pri{background:var(--primary)} #bql .pill--ink{background:var(--cs)} #bql .ps--done{background:var(--mg-ok-bg);color:var(--mg-ok);border-color:var(--mg-ok)} #bql .ps--work{background:var(--mg-warn-bg);color:var(--mg-warn);border-color:var(--mg-warn)} #bql .ps--stuck{background:var(--mg-bad-bg);color:var(--mg-red);border-color:var(--mg-red)} #bql .ps--info{background:var(--mg-pri-bg);color:var(--mg-pri);border-color:var(--mg-pri)} #bql .ps--purple{background:var(--mg-vio-bg);color:var(--mg-vio);border-color:var(--mg-vio)} #bql .ps--grey{background:var(--mg-neu-bg);color:var(--mg-neu);border-color:var(--mg-neu)} #bql .ps--teal{background:var(--mg-teal-bg);color:var(--mg-teal);border-color:var(--mg-teal)} #bql .ps--ca{background:var(--mg-warn-bg);color:var(--mg-warn);border-color:var(--mg-warn)} #bql .ps--cs{background:var(--mg-neu-bg);color:var(--mg-neu);border-color:var(--mg-neu)} #bql .tag-ca{background:var(--mg-warn-bg);color:var(--mg-warn);border-color:var(--mg-warn)} #bql .tag-cs{background:var(--mg-neu-bg);color:var(--mg-neu);border-color:var(--mg-neu)} /* ── Stage = MỘT kiểu trung tính ─────────────────────────────────── Bảng đã nhóm theo stage (có hàng nhóm ghi rõ), nên pill stage lặp lại thông tin — tô màu cho thứ dư thừa là chỗ làm màn rối nhất. Chỉ Won và New Opening giữ xanh lá vì đó là KẾT QUẢ, không phải phân loại. */ #bql .sa1, #bql .sa2, #bql .sa3, #bql .sa4, #bql .si2, #bql .si3, #bql .si4{background:var(--mg-neu-bg);color:var(--mg-neu);border-color:var(--mg-neu)} #bql .sa4, #bql .si4{background:var(--mg-cream);color:var(--mg-neu);border-color:var(--mg-neu)} /* ══ Board table ══ */ #bql .bwrap{overflow:auto;max-height:none} #bql table.board{width:100%;border-collapse:collapse;font-size:12.5px} #bql table.board thead th{ position:sticky;top:0;z-index:2;background:var(--bg-sunken);text-align:left; font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted); padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap } #bql table.board thead th.num, #bql table.board td.num{text-align:right} #bql table.board tbody td{padding:0 9px;height:44px;border-bottom:1px solid var(--border-line);vertical-align:middle} #bql table.board tbody tr:hover>td{background:var(--mg-navy-soft)} /* Khối ② mang hue riêng ở head bảng để bảng plan tự nhận ra mình thuộc mục nào. */ #bql [data-sec="2"] table.board thead th{background:var(--mg-cream);color:var(--mg-muted)} /* Hàng nhóm = CẤU TRÚC, không phải hành động → một nền trung tính chung, phân biệt phễu bằng viền trên 2px. Cobalt rút khỏi đây. */ #bql table.board tbody tr.grp>td{ background:var(--mg-cream-2);font-weight:700;font-size:13px;height:38px; border-top:2px solid var(--mg-warn);color:var(--text);letter-spacing:-.01em } #bql table.board tbody tr.grp.ink>td{border-top-color:var(--mg-neu)} #bql table.board tbody tr.grp:hover>td, #bql table.board tbody tr.grp.ink:hover>td{background:var(--mg-cream-2)} #bql table.board tbody tr.xrow>td{background:var(--bg-surface);padding:0;height:auto} #bql table.board tbody tr.xrow:hover>td{background:var(--bg-surface)} #bql .ol{display:flex;align-items:center;gap:8px;min-width:0} #bql .ol .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px} #bql .ol .sb{font-size:11px;color:var(--soft);white-space:nowrap} /* Outlet 2 dòng: tên trên, khu vực/segment dưới. Chỉ áp cho .nm/.sb nằm trong span bọc (cháu của .ol) — bản 1 dòng (.ol > .nm) giữ nguyên để pill đứng cùng hàng. */ #bql .ol>span>.nm, #bql .ol>span>.sb{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis} #bql .ol>span:not(.av):not(.ps){display:flex;flex-direction:column;min-width:0;line-height:1.3} /* Người phụ trách: Nguyên pri · Linh vio · Thịnh ok · Phúc warn · Châu teal · còn lại neu. Cách gán giữ nguyên (SALES[].av = 'aN'), chỉ đổi bảng màu. */ #bql .av{width:22px;height:22px;flex:none;border-radius:3px;background:var(--mg-neu-bg);color:var(--mg-neu);display:grid;place-items:center;font-size:9.5px;font-weight:700} #bql .av.a2{background:var(--mg-pri-bg);color:var(--mg-pri)} #bql .av.a3{background:var(--mg-ok-bg);color:var(--mg-ok)} #bql .av.a4{background:var(--mg-warn-bg);color:var(--mg-warn)} #bql .av.a5{background:var(--mg-vio-bg);color:var(--mg-vio)} #bql .av.a6{background:var(--mg-neu-bg);color:var(--mg-neu)} #bql .av.a7{background:var(--mg-teal-bg);color:var(--mg-teal)} #bql .xbtn{width:20px;height:20px;border:0;background:none;border-radius:var(--radius-ctrl);color:var(--soft);display:grid;place-items:center;padding:0} #bql .xbtn:hover{background:var(--surface-3);color:var(--text)} #bql .xbtn[aria-expanded="true"] .ic{transform:rotate(90deg)} #bql .xbtn .ic{transition:transform .18s cubic-bezier(.22,1,.36,1)} #bql .neg{color:var(--stuck-ink);font-weight:700} #bql .pos{color:var(--done-ink);font-weight:700} #bql .zero{color:var(--soft)} /* ══ Buttons ══ */ #bql .btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius-ctrl);font-size:12.5px;font-weight:700;border:1px solid transparent} #bql .btn--pri{background:var(--primary);color:var(--text-on-solid)} #bql .btn--pri:hover{background:var(--primary-h)} #bql .btn--sec{background:var(--surface);border-color:var(--line-2);color:var(--text)} #bql .btn--sec:hover{background:var(--mg-cream)} #bql .btn--ghost{background:none;color:var(--mg-navy-deep)} #bql .btn--ghost:hover{background:var(--mg-cream);color:var(--mg-navy)} #bql .btn--sm{height:25px;padding:0 9px;font-size:11.5px;border-radius:var(--radius-ctrl)} #bql .btn:active{transform:scale(.96)} #bql .lnk{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--sec-1-ink);background:none;border:0;padding:2px 4px;border-radius:var(--radius-ctrl)} #bql .lnk:hover{background:var(--primary-soft)} /* ══ Hộp chốt ══════════════════════════════════════════════════════════ Một khuôn duy nhất: viền navy 1.5px, góc vuông, tiêu đề Platypi, câu thân chỉ in đậm ĐÚNG cụm hành động. Hộp nằm CUỐI thân khối nên tự ẩn theo .sec.is-collapsed, và chỉ dựng khi còn việc phải làm. */ #bql .chot{background:var(--mg-surface);border:1.5px solid var(--mg-navy);border-radius:var(--radius-card); padding:18px 22px;margin-top:22px} #bql .chot h4{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--mg-ink);letter-spacing:0} #bql .chot p{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--mg-ink);margin:6px 0 0} /* ══ Bậc B3 — hai nút của tab «CT đề xuất» bản thật ════════════════════ Chép luật hiện nút từ js/tos/proposal.js nhánh proposal_sent: hai nút đi CÙNG NHAU, «Soạn proposal» là việc không bắt buộc nên để kiểu nút phụ, «Điền ngày thực tế» là đường đi tiếp nên là nút chính. */ #bql .ctdx{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:8px;border-top:1px solid var(--line)} #bql .ctdx-b{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px; border:1px solid transparent;border-radius:var(--radius-ctrl); font-family:inherit;font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer} #bql .ctdx-b.sp{background:var(--mg-vio-bg);border-color:var(--mg-vio);color:var(--mg-vio)} #bql .ctdx-b.sp:hover{background:var(--mg-surface)} #bql .ctdx-b.dt{background:var(--mg-navy);color:var(--mg-on-navy)} #bql .ctdx-b.dt:hover{background:var(--mg-navy-deep)} #bql .ctdx-sp{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:1px 7px; border:1px solid var(--mg-vio);border-radius:var(--radius-chip);background:var(--mg-vio-bg);color:var(--mg-vio)} #bql .ctdx-sp.done{border-color:var(--mg-ok);background:var(--mg-ok-bg);color:var(--mg-ok)} #bql .ctdx-sp[hidden]{display:none} /* Thân hai lớp nổi — dùng chung một bộ lớp, không đẻ hai bảng kiểu. */ /* .omod-b KHÔNG có đệm — mỗi thân lớp nổi tự mang, cùng nhịp với .pfm. Thiếu dòng padding này là chữ và ô nhập dính sát mép hộp thoại. */ #bql .cdx{display:grid;gap:13px;padding:14px 16px 18px} /* Tên quán đã ở tiêu đề lớp nổi; dòng này chỉ bù phần tiêu đề KHÔNG có. */ #bql .cdx-id{padding-bottom:10px;border-bottom:1px solid var(--line)} #bql .cdx-id span{font-size:11.5px;font-weight:600;color:var(--muted)} #bql .cdx-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #bql .cdx-c{border:1px solid var(--mg-line-strong);background:var(--mg-surface);padding:9px 11px} #bql .cdx-lb{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} #bql .cdx-v{font-size:13.5px;font-weight:700;margin-top:4px} #bql .cdx-n{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45} #bql .cdx-n.warn{color:var(--mg-warn);font-weight:600} #bql .cdx-mech{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} #bql .cdx-f{display:grid;gap:5px} #bql .cdx-f>label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} #bql .cdx-f>label i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0} #bql .cdx-f input, #bql .cdx-f textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--radius-ctrl); font-family:inherit;font-size:12.5px;color:var(--text);background:var(--surface)} #bql .cdx-f input{height:31px;padding:0 9px} #bql .cdx-f textarea{padding:7px 9px;resize:vertical;line-height:1.5} #bql .cdx-f input:focus, #bql .cdx-f textarea:focus{outline:none;border-color:var(--mg-navy);box-shadow:var(--focus)} #bql .cdx-dt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #bql .cdx-box{display:flex;gap:8px;padding:9px 11px;font-size:12px;line-height:1.55;border-left:3px solid} #bql .cdx-box .ic{flex:none;margin-top:2px} #bql .cdx-box.info{background:var(--mg-navy-soft);border-left-color:var(--mg-navy);color:var(--mg-ink)} #bql .cdx-box.danger{background:var(--mg-warn-bg);border-left-color:var(--mg-warn);color:var(--mg-ink)} #bql .cdx-box.block{background:var(--mg-bad-bg);border-left-color:var(--mg-red);color:var(--mg-ink)} #bql .cdx-box ul{margin:5px 0 0;padding-left:17px;display:grid;gap:3px} #bql .cdx-file{display:flex;align-items:center;gap:7px;font-size:12px;padding:6px 0;border-bottom:1px solid var(--line)} #bql .cdx-file .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .cdx-file .mt{font-size:10.5px;color:var(--muted);white-space:nowrap} #bql .cdx-empty{font-size:11.5px;color:var(--muted);padding:6px 0} #bql .cdx-act{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;padding-top:2px} #bql .cdx-msg{font-size:12px;font-weight:700;color:var(--mg-red)} #bql .cdx-msg.ok{color:var(--mg-ok)} #bql .cdx-msg:empty{display:none} /* ══ Note / banner ══ */ #bql .note{display:flex;gap:9px;padding:9px 12px;border-radius:var(--radius-card);font-size:11.5px;line-height:1.5;background:var(--surface-2);color:var(--muted);border-left:3px solid var(--line-2)} #bql .note .ic{margin-top:2px;color:var(--soft)} #bql .note--warn{background:var(--mg-warn-bg);color:var(--mg-ink);border-left-color:var(--mg-warn)} #bql .note--warn .ic{color:var(--mg-warn)} #bql .note--info{background:var(--info-bg);color:var(--info-ink);border-left-color:var(--info)} #bql .note--info .ic{color:var(--info-ink)} #bql .note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--neutral-tint);padding:1px 4px;border-radius:var(--radius-card)} #bql .empty{padding:26px 14px;text-align:center;color:var(--soft);font-size:12.5px} #bql .empty .ic-lg{color:var(--line-2);display:block;margin:0 auto 8px} /* ══ Lane ══ */ #bql .lane{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-sm);overflow:hidden} #bql .lane-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);border-top:3px solid var(--acc)} /* ── Nhãn phễu 2 dòng: mã phễu TO, tên đầy đủ nhỏ + IN HOA ────────────── Dùng CHUNG một khuôn (.klb/.kfn/.ksub) cho thẻ KPI ở trên và đầu 2 phễu ở dưới. Trước đây thẻ KPI in hoa cả câu ("C.A — OUTLET MỞ MỚI") còn đầu phễu lại là pill nhỏ "C.A" + tiêu đề thường "Outlet mở mới" ⇒ cùng một thứ hiện hai kiểu chữ. */ #bql .klb{display:flex;flex-direction:column;gap:1px;justify-content:center;min-height:33px} #bql .kfn{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.06;color:var(--text)} #bql .kfn.ca{color:var(--ca-ink)} #bql .kfn.cs{color:var(--cs-ink)} #bql .ksub{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);line-height:1.25} #bql .lane-h .klb{min-height:0} #bql .lane-h .kfn{font-size:21px} #bql .lane-h .sp{flex:1} #bql .lane-b{padding:12px 14px} #bql .lane-b--flush{padding:0} /* Thanh lọc khối ② — Tháng · Tuần · Phễu · Tìm outlet. Lọc tuần/tháng ở mockup chỉ đổi nhãn kỳ (dữ liệu mẫu chỉ có T9); lọc phễu + tìm outlet lọc THẬT trên DOM. */ #bql .ptool{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;padding:9px 12px; background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-sm)} #bql .pfl{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px;border-radius:var(--radius-ctrl); border:1px solid var(--line-2);background:var(--surface)} #bql .pfl>span{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)} #bql .pfl select{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text);padding:0} #bql .pfl select:focus{outline:none} #bql .pseg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-ctrl);background:var(--mg-cream);border:1px solid var(--line)} #bql .pseg button{border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted); padding:4px 10px;border-radius:var(--radius-ctrl);cursor:pointer;white-space:nowrap} #bql .pseg button:hover{color:var(--text)} #bql .pseg button.on{background:var(--mg-navy);color:var(--mg-on-navy);box-shadow:none} #bql .pseg button:focus-visible{outline:none;box-shadow:var(--focus)} #bql .mrow{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted)} #bql .mrow .k{min-width:78px;font-weight:600} #bql .mrow .n{font-weight:700;color:var(--text);font-size:16px} #bql .mrow .p{margin-left:auto;font-weight:700;font-size:13px;color:var(--text)} /* ══ Funnel ══ */ #bql .fn{display:grid;gap:6px;margin-top:4px} #bql .fn-r{display:grid;grid-template-columns:104px 1fr 92px;align-items:center;gap:9px;font-size:12px} #bql .fn-r .k{color:var(--muted);font-weight:600} #bql .fn-r .t{height:22px;border-radius:var(--radius-bar);background:var(--neutral-tint);overflow:hidden;position:relative} #bql .fn-r .t i{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-bar);background:var(--fill)} #bql .fn-r .t span{position:absolute;left:9px;top:0;line-height:22px;font-size:11.5px;font-weight:700;color:var(--fill-ink)} #bql .fn-r .t.lo span{color:var(--muted);left:auto;right:9px} #bql .fn-r .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums} #bql .fn-r .v em{font-style:normal;color:var(--soft);font-weight:400;font-size:11px} #bql .fn-r.nd .t{background:repeating-linear-gradient(135deg,var(--bg-canvas) 0 6px,var(--bg-sunken) 6px 12px)} #bql .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px} #bql .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-ctrl);border:1px solid var(--mg-control-border);background:var(--mg-surface);font-size:11px;font-weight:700;color:var(--mg-ink)} #bql .chip:hover{border-color:var(--mg-navy);color:var(--mg-navy-deep)} #bql .chip.on{background:var(--mg-navy-soft);border-color:var(--mg-navy);color:var(--mg-navy-deep)} #bql .chip .c{font-variant-numeric:tabular-nums;color:var(--mg-muted)} #bql .chip.on .c{color:var(--mg-navy)} #bql .mini{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px} #bql .mini li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-ctrl);font-size:12px} #bql .mini li:hover{background:var(--surface-2)} #bql .mini .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} #bql .mini .d{font-size:11px;color:var(--soft);font-variant-numeric:tabular-nums} #bql .mini .a{font-weight:700;font-variant-numeric:tabular-nums} /* ══ Outlet panel ══ */ #bql .srch{position:relative;flex:1;min-width:200px;max-width:340px} #bql .srch input{ width:100%;height:30px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl); padding:0 9px 0 30px;font-family:inherit;font-size:12.5px;color:var(--text);background:var(--surface) } #bql .srch input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .srch .ic{position:absolute;left:9px;top:7px;color:var(--soft);pointer-events:none} #bql .opanel{margin-top:12px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-md);border-top:3px solid var(--primary);overflow:hidden} #bql .opanel[hidden]{display:none} #bql .opanel-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap} #bql .opanel-h h3{font-size:20px;line-height:1.2} #bql .opanel-h .sp{flex:1} #bql .opanel-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} #bql .ocol{padding:12px 14px;border-left:1px solid var(--line);min-width:0} #bql .ocol:first-child{border-left:0} #bql .ocol h4{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin-bottom:8px} #bql .dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;margin:0} #bql .dl dt{color:var(--soft);white-space:nowrap} #bql .dl dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere} #bql .tl{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:12px} #bql .tl li{display:flex;align-items:center;gap:7px} #bql .tl .q{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)} /* ══ Activity columns ══ */ #bql .acol{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column} #bql .acol-h{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);border-top:3px solid var(--acc)} #bql .acol-h h3{font-size:15.5px} #bql .acol-h .n{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:var(--radius-chip);padding:1px 7px} #bql .wsfold{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none; border:1px solid var(--line);border-radius:var(--radius-ctrl);background:var(--surface);color:var(--muted);cursor:pointer;padding:0} #bql .wsfold:hover{border-color:var(--primary);color:var(--primary-ink)} #bql .wsfold:focus-visible{outline:none;box-shadow:var(--focus)} #bql .wsfold svg{transition:transform .18s cubic-bezier(.22,1,.36,1)} #bql .wsfold[aria-expanded="false"] svg{transform:rotate(-90deg)} /* Hai danh sách là HAI THẺ rời, mỗi thẻ trọn bề ngang. Đo 1600px: đặt cạnh nhau thì mỗi khung chỉ ~660px mà bảng 13 cột rộng 1777px ⇒ đọc được 5/13 cột, tức đúng bộ cột vừa chốt lại là bộ không nhìn thấy. */ /* …và bề ngang cột KHOÁ THEO % (`table-layout:fixed`), không để bảng tự co nở. Đo thật ở 1600px trước khi khoá: bảng nở 1777px trong khung 1338px, và cột rộng nhất không phải cột quan trọng nhất mà là cột có CHUỖI dài nhất — «Ghé tuyến A Taste Of Saigon - Kitchen» một mình 230px, ô PIC 120px, hai ô ở đó đang dư ~50px. */ #bql table.wsb--half thead th:nth-child(2){width:7%} #bql table.wsb--half thead th:nth-child(3){width:9%} #bql table.wsb--half thead th:nth-child(4){width:8.5%} #bql table.wsb--half thead th:nth-child(5){width:8.5%} #bql table.wsb--half thead th:nth-child(6){width:7%} #bql table.wsb--half thead th:nth-child(7){width:6%} #bql table.wsb--half thead th:nth-child(8){width:9%} #bql table.wsb--half thead th:nth-child(9){width:10%} #bql table.wsb--half thead th:nth-child(10){width:6%} #bql table.wsb--half thead th:nth-child(11){width:8%} #bql table.wsb--half thead th:nth-child(12){width:8%} #bql table.wsb--half thead th:nth-child(13){width:4.5%} #bql #s3 table.wsb--half .wsin{width:100%;min-width:0;box-sizing:border-box} #bql #s3 table.wsb--half select.wsin{padding-left:5px;padding-right:2px} #bql #s3 table.wsb--half .wsact{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Khổ nhỏ: thứ DUY NHẤT làm 13 cột không vừa là hai ô / KHÔNG hiện được dấu «…» nên cắt là mất chữ câm. Hạ font nhóm ô nhập một nấc thì chuỗi đó chỉ còn cần 86px ⇒ khoá % dùng được ở MỌI khổ, không phải đổi sang cuộn ngang. (Bản trước cho cuộn ngang dưới 1420px: đo ra 823px phải cuộn ở 1280px — đúng cái bệnh «cột quan trọng nằm ngoài tầm nhìn» mà việc khoá % sinh ra để chữa.) */ @media (max-width:1460px){ #bql #s3 table.wsb--half .wsin{font-size:10px} #bql #s3 table.wsb--half select.wsin{padding-left:4px;padding-right:1px} #bql table.wsb--half th, #bql table.wsb--half td{padding:6px 5px} #bql table.wsb--half thead th, #bql table.wsb--half thead th.num{font-size:9.5px} #bql table.wsb--half td .ps{font-size:10px;padding:2px 5px} /* «DEADLINE» là MỘT TỪ — không xuống dòng được, nên hai cột đó phải đủ rộng bằng chính chữ tiêu đề. Lấy chỗ từ «Outlets» + «Nội dung hoạt động»: hai cột đó có dấu «…» nên bóp lại là mất chữ CÓ DẤU HIỆU, còn tiêu đề bị cắt thì không. */ #bql table.wsb--half thead th:nth-child(3){width:8%} #bql table.wsb--half thead th:nth-child(7){width:6.5%} #bql table.wsb--half thead th:nth-child(8){width:8%} #bql table.wsb--half thead th:nth-child(9){width:11%} #bql table.wsb--half thead th:nth-child(10){width:6.5%} #bql table.wsb--half thead th:nth-child(11){width:8.5%}} /* ── Hai danh sách chia dọc 1/1, thẳng cột với hai ô nhập ngay trên ─────────── Dùng CHÍNH `.g2` của `#ws-add` nên hai mép luôn khớp nhau, không phải nuôi hai bộ số chia. ⚠ Khoá % một mình KHÔNG đủ ở khổ nửa. Đo ở viewport 1600px: mỗi nửa được 676px, ở bề ngang đó có 346 ô và 10 tiêu đề cột bị CẮT — mà : với ô nhập, chữ ngắn hơn ô thì scrollWidth BẰNG clientWidth, nên phép đo đó không phân biệt được «khít» với «còn dư» — và placeholder bị cắt thì cũng KHÔNG hiện dấu «…». Phải đo bề ngang chữ. Nới bao nhiêu cũng không đụng bề ngang bảng: bảng là `width:100%` của khung popup (1156px), các cột khác tự nhường — đã quét 94/104/108/116/124/140px, không khổ nào sinh cuộn ngang hay cắt ô nào. */ #bql table.sub input.fcin.money{width:108px} #bql table.sub tr.fctot td{background:var(--bg-sunken);font-weight:700;border-top:1px solid var(--line)} #bql .sku-add .ny{display:inline-flex;align-items:center;gap:5px;height:29px;padding:0 9px; border-radius:var(--radius-ctrl);background:var(--surface-2);border:1px dashed var(--line-2); font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} #bql .sku-add .ny b{color:var(--text)} /* Bảng C.S nay 14 cột — ô số không được xuống dòng, thà cuộn ngang còn hơn vỡ hàng */ #bql .board td.num, #bql .board th.num{white-space:nowrap} /* Hàng nhóm stage — khuôn chữ lấy của plan-editor.js (psg-target / psg-plan) */ #bql .grp .g{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%} #bql .grp .g .sp{flex:1} #bql .grp .gt{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted)} #bql .grp .gp{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--radius-chip);font-size:11.5px;font-weight:700} #bql .grp .gp.ok{background:var(--done-bg);color:var(--done-ink)} #bql .grp .gp.warn{background:var(--stuck-bg);color:var(--stuck-ink)} #bql .grp .gp.none{background:var(--surface-3);color:var(--muted)} #bql .grp .gd{font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} #bql .grp .dot{width:9px;height:9px;border-radius:99px;flex:none} #bql .gfold{width:22px;height:22px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2); border-radius:var(--radius-ctrl);background:var(--surface);color:var(--muted);cursor:pointer;padding:0} #bql .gfold:hover{background:var(--surface-2);color:var(--text)} #bql .gfold:focus-visible{outline:none;box-shadow:var(--focus)} #bql .gfold .ic-sm{transition:transform .18s cubic-bezier(.22,1,.36,1)} #bql .gfold[aria-expanded="false"] .ic-sm{transform:rotate(-90deg)} /* ══ Hồ sơ outlet bung trong hàng plan — 5 việc con của sơ đồ ══ */ #bql .hub{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden} #bql .hub-t{display:flex;gap:2px;padding:6px 8px 0;background:var(--surface-2);border-bottom:1px solid var(--line);overflow:auto;scrollbar-width:none} #bql .hub-t::-webkit-scrollbar{display:none} #bql .hub-t button{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 11px;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer} #bql .hub-t button.on{color:var(--primary-ink);border-bottom-color:var(--primary)} #bql .hub-t button:hover:not(.on){color:var(--text)} #bql .hub-t .c{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:var(--radius-chip);background:var(--surface-3);font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)} #bql .hub-t button.on .c{background:var(--primary-soft);color:var(--primary-ink)} #bql .hub-p{padding:11px 12px} #bql .hub-p[hidden]{display:none} #bql .hub-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px} #bql .hub-b{border:1px solid var(--line);border-radius:var(--radius-card);padding:9px 10px;background:var(--surface)} #bql .hub-b h5{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px} #bql .hub-b h5 .sp{flex:1} #bql .hub-l{display:grid;gap:6px;font-size:12px} #bql .hub-l .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-ctrl);background:var(--surface)} #bql .hub-l .r .nm{font-weight:600;flex:1;min-width:130px} #bql .hub-none{font-size:12px;color:var(--muted);padding:9px 2px;display:flex;align-items:center;gap:7px} #bql .hub-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:12px;align-items:baseline;margin:0} #bql .hub-kv dt{color:var(--muted)} #bql .hub-kv dd{margin:0;font-weight:600;min-width:0} #bql .hub-f{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)} #bql .hub-f input, #bql .hub-f select{height:29px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl);padding:0 8px;font-family:inherit;font-size:12px;color:var(--text);background:var(--surface)} #bql .hub-f input:focus, #bql .hub-f select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .hub-f .grow{flex:1;min-width:140px} /* Chọn hạng mục trong tab Đề xuất / Giao hàng — không đổ hết ba danh sách một lúc. */ #bql .hub-pick{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px} #bql .hub-pick button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px; border:1px solid var(--line-2);border-radius:var(--radius-ctrl);background:var(--surface);font:inherit; font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap; transition:background .16s cubic-bezier(.22,1,.36,1),color .16s} #bql .hub-pick button:hover{color:var(--text);background:var(--surface-2)} #bql .hub-pick button.on{background:var(--primary);border-color:var(--primary);color:var(--text-on-solid)} #bql .hub-pick button:focus-visible{outline:none;box-shadow:var(--focus)} #bql .hub-pick .c{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px; padding:0 5px;border-radius:var(--radius-chip);background:var(--surface-3);font-size:10px; font-variant-numeric:tabular-nums;color:var(--muted)} #bql .hub-pick button.on .c{background:color-mix(in srgb, var(--text-on-solid) 26%, transparent);color:var(--text-on-solid)} #bql .hub-pick button:disabled{opacity:.5;cursor:not-allowed} /* ══ Phễu chuẩn — bám đúng renderFunnelBars của js/funnel-shape.js ══ KHUNG thanh = TARGET của chính bậc đó, phần tô = actual. Mọi bậc dùng chung một khung đầy nên đọc dọc là so được bậc này với bậc kia; nhóm "ngoài phễu" (Nuturing · Fail · Delete WE · Delete NE) có vạch ngăn và không tính %. */ #bql .fn2{display:grid;gap:5px} /* Cột «Actual/Target» 104px KHÔNG đủ cho hàng Revenue ₫ của C.S: «309,8 tr/1.266,4 tr» cần ~116px, và `.fn2-c{overflow:hidden}` + căn phải làm nó bị cắt ở mép TRÁI ⇒ trang in ra «09,8 tr» — sai con số, không có dấu hiệu nào báo. Nới cột số, lấy chỗ từ cột thanh (1fr) nên mọi hàng vẫn thẳng cột. */ #bql .fn2-r{display:grid;grid-template-columns:76px minmax(56px,1fr) 120px 62px 88px;align-items:center;gap:7px;padding:3px 0;border-radius:var(--radius-ctrl)} /* 1101–1340px: rail 196px còn chiếm chỗ nên lane chỉ ~500-590px. Bóp cột «DT plan» lại còn phần biểu đồ, giấu con số — số vẫn nằm trong tooltip của hàng. */ @media (min-width:1101px) and (max-width:1340px){ #bql .fn2 .fn2-hd, #bql .fn2 .fn2-r{grid-template-columns:66px minmax(40px,1fr) 120px 46px 76px} #bql .fn2-c .vb:not(.vb--m) b{display:none}} /* Ô số bên phải thanh phễu. .fn2-c dùng cho CẢ 4 cột số → cùng một cách căn lề. */ #bql .fn2-c{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;font-size:12px;white-space:nowrap;overflow:hidden} #bql .fn2-a{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)} #bql .fn2-a.ok{color:var(--done-ink)} #bql .fn2-a.behind{color:var(--stuck-ink)} #bql .fn2-a.nil{color:var(--soft);font-weight:700} #bql .fn2-s{font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums;font-size:11px} #bql .fn2-r.clk{cursor:pointer} #bql .fn2-r.clk:hover{background:var(--surface-2)} #bql .fn2-r.sep{margin-top:9px;padding-top:11px;border-top:1px dashed var(--line-2)} #bql .fn2-r.nil{opacity:.45} #bql .fn2-lb{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .fn2-tr{position:relative;height:24px;border-radius:var(--radius-bar);background:var(--neutral-tint);overflow:hidden; box-shadow:inset 0 0 0 1px var(--border-line)} /* Bậc chưa đặt target thì KHÔNG có mẫu số — khung để trống và ghi thẳng ra, đừng vẽ phần tô theo một thang khác rồi để mắt đọc nó như % đạt target. */ #bql .fn2-tr.nt{background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface) 6px 12px)} #bql .fn2-bar{position:absolute;inset:0 auto 0 0;height:100%;border-radius:var(--radius-bar);background:var(--hue);min-width:5px} /* Nhãn % ĐÈ lên thanh, mà thanh nay có 11 tông đậm nhạt rất khác nhau. Đo bản chữ mực + quầng trắng: RAW LEAD (tông neutral) chỉ 1,15:1 — coi như không đọc được — SQL 3,13:1 và hai hàng Revenue 3,92:1. Đổi nhãn sang chữ TRẮNG cũng không cứu được, vì 5/11 hàng có thanh quá ngắn nên nhãn tràn ra phần nền rỗng sáng màu. Cho nhãn một mặt nền riêng thì đạt 17,75:1 ở CẢ hai cảnh, bằng một rule. */ #bql .fn2-pct{position:absolute;left:6px;top:3px;height:18px;line-height:17px;padding:0 5px;border-radius:var(--radius-chip); background:var(--bg-surface);border:1px solid var(--border-line); font-size:11px;font-weight:700;color:var(--text-ink);pointer-events:none} #bql .fn2-pct.ok{color:var(--done-ink)} #bql .fn2-pct.nt{color:var(--muted);font-weight:600} /* Biểu đồ «DT plan» — cột DỌC. Thanh ngang trước đây mỗi hàng bắt đầu ở một mép khác nhau nên không so được hàng này với hàng kia; cột dọc chung một đáy, liếc dọc theo cột là thấy ngay giai đoạn nào nặng tiền. */ #bql .vb{display:flex;align-items:flex-end;gap:6px;width:100%;min-width:0;height:26px} /* Số căn PHẢI mà cột lại đứng đầu ô ⇒ cột dính mép trái, cách số của chính nó cả chục px và nằm sát số của CỘT BÊN TRÁI — mắt ghép nhầm cột với số không phải của nó. Đảo thứ tự bằng `order` (không đụng markup) để cột luôn bám ngay sau số của mình. */ #bql .vb-t{order:2;position:relative;flex:none;width:11px;height:100%;border-radius:var(--radius-bar);background:var(--surface-3);overflow:hidden} #bql .vb-t i{position:absolute;left:0;right:0;bottom:0;display:block;border-radius:var(--radius-bar);background:var(--soft);opacity:.5;min-height:3px} #bql .vb b{order:1;flex:1;align-self:center;text-align:right;font-size:11px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;overflow:hidden} /* Biểu đồ «Chênh» — cột DỌC hai chiều: trục nằm NGANG ở giữa, vượt mọc LÊN (xanh), thiếu thõng XUỐNG (đỏ). ⚠ Hướng cột + màu KHÔNG đủ để nói dấu: hai thứ đó đều là tín hiệu thị giác, mà cột chỉ cao tối đa 13px còn màu thì hỏng với người mù màu — và ở dữ liệu thật MỌI hàng có target đều âm nên cả cột cùng một màu, màu hết phân biệt được gì. Dấu phải nằm ở CHÍNH con số (xem funnelHTML: `${gv >= 0 ? '+' : '−'}`), cột và màu chỉ là nhắc lại. Vạch trục để --border-strong dài 17px thì nhìn không ra, mà không thấy trục thì «nằm dưới trục» không nói lên điều gì — đậm lên và kéo dài ra. */ #bql .dv{display:flex;align-items:center;gap:6px;width:100%;min-width:0;height:26px} /* Cột KHÔNG có nền thì chỉ còn một khối đỏ lơ lửng: không thấy khung chứa ⇒ không có thang đo, không biết khối đó là bao nhiêu trên bao nhiêu, cũng không thấy nó đang nằm DƯỚI mốc 0. Cho khung nền + vạch 0 nằm giữa thì đọc ra ngay là thước hai chiều: nửa trên = vượt, nửa dưới = thiếu, chiều dài = so với giai đoạn hụt nhiều nhất của phễu. */ #bql .dv-t{order:2;position:relative;flex:none;width:13px;height:100%;border-radius:var(--radius-bar); background:var(--surface-2);overflow:hidden} #bql .dv-t::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px; background:var(--muted);z-index:2} #bql .dv.none .dv-t{background:none} #bql .dv.none .dv-t::before{display:none} #bql .dv-t i{position:absolute;left:0;right:0;z-index:1;display:block;border-radius:var(--radius-bar);min-height:3px} #bql .dv.up i{bottom:50%;background:var(--done)} #bql .dv.dn i{top:50%;background:var(--stuck)} #bql .dv b{order:1;flex:1;align-self:center;text-align:right;font-size:11px;font-weight:700; font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden} #bql .dv.up b{color:var(--done-ink)} #bql .dv.dn b{color:var(--stuck-ink)} #bql .dv.none b{color:var(--muted);font-weight:400} /* Ô «Outlet» in ĐÚNG MỘT số. Mọi so sánh (target số lượng, số outlet đã ra đơn) nằm ở tooltip của hàng — in kèm vào ô hẹp là mắt nối hai số thành một. */ /* Actual/Target trong MỘT ô: actual đậm, target nhỏ mờ ngay sau dấu gạch. Hai con số của cùng một phép so thì phải nằm cạnh nhau, đừng để mắt tự nối qua hai cột. */ /* Tên outlet trong danh sách bung = nút mở modal. Nút trải hết ô để vùng bấm bằng cả hàng, không phải đúng mấy chữ. */ /* Dấu thiếu thông tin đứng ngay sau tên outlet — cùng dòng, không đẩy tên xuống. */ #bql .nmrow{display:flex;align-items:center;gap:5px;min-width:0} #bql .nmrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .olwarn{flex:none;display:inline-flex;align-items:center;gap:2px;padding:0 4px;height:15px; border-radius:var(--radius-chip);background:var(--stuck-bg);color:var(--stuck-ink);cursor:help;vertical-align:1px} #bql .olwarn b{font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums} #bql .olwarn svg{width:10px;height:10px} #bql .olwarn.ok{background:var(--done-bg);color:var(--done-ink);padding:0 3px} /* «n dòng» trên hàng bậc đã thu — chỉ hiện khi thu, nên không chiếm chỗ khi bung. */ #bql .gn{font-size:11px;color:var(--soft);font-weight:600} #bql .sb2{font-size:10.5px;font-weight:400;color:var(--soft);margin-top:2px;white-space:nowrap} #bql .sb2.neg{color:var(--stuck-ink);font-weight:600} /* Bảng đi tuyến rộng 22 cột — ô không được tự xuống dòng, cuộn ngang là đúng khuôn bản thật. */ #bql .wsb th, #bql .wsb td{white-space:nowrap} #bql .wsb td .nm{max-width:210px;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:-4px} #bql .wsb tr.wsday td{background:var(--info-bg)} #bql .wsb tr.wsday .g b{color:var(--info-ink)} #bql .fndd-o{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;font:inherit; text-align:left;padding:1px 2px;margin:-1px -2px;border-radius:var(--radius-ctrl);cursor:pointer;color:inherit} #bql .fndd-o .olc2{flex:1;min-width:0} #bql .fndd-o .nm{overflow:hidden;text-overflow:ellipsis} #bql .fndd-o>svg{flex:none;color:var(--soft);transform:rotate(-90deg)} #bql .fndd-o:hover{background:var(--info-bg)} #bql .fndd-o:hover .nm{color:var(--sec-1-ink);font-weight:700} #bql .fndd-o:hover>svg{color:var(--primary)} #bql .fndd-o:focus-visible{outline:none;box-shadow:var(--focus)} #bql .at{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:1px;min-width:0; font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden} #bql .at b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--text)} #bql .at i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--soft)} #bql .at.ok b{color:var(--done-ink)} #bql .at.behind b{color:var(--text)} #bql .at i.none{font-weight:400} /* Hàng Revenue ₫ — hàng duy nhất nói bằng tiền nên phải tách hẳn khỏi dải bậc phía trên. */ #bql .fn2-r.rev{margin-top:10px;padding-top:11px;padding-bottom:4px;border-top:2px solid var(--line-2);background:var(--surface-2)} /* Revenue ₫ đứng liền trước bậc kết thúc: hai vạch phân cách sát nhau thì thừa chỗ. */ #bql .fn2-r.rev + .fn2-r.sep{margin-top:4px} #bql .fn2-r.rev .fn2-lb{color:var(--sec-1-ink);font-weight:700;letter-spacing:.05em} #bql .fn2-r.rev .at b{font-size:13px} #bql .vb--m{justify-content:flex-end} #bql .vb--m b{color:var(--text)!important;font-weight:700} #bql .fn2-c .dv.none b{min-width:0} #bql .fn2-v{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;font-size:12px;white-space:nowrap} #bql .fn2-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)} #bql .fn2-m{font-variant-numeric:tabular-nums;color:var(--muted)} #bql .fn2-g{font-style:normal;font-weight:700;font-size:11px;font-variant-numeric:tabular-nums;min-width:62px;text-align:right} #bql .fn2-c .fn2-g{min-width:0} #bql .fn2-g.ok{color:var(--done-ink)} #bql .fn2-g.behind{color:var(--stuck-ink)} #bql .fn2-g.none{color:var(--soft);font-weight:400} #bql .fn2-hd{display:grid;grid-template-columns:76px minmax(56px,1fr) 120px 62px 88px;gap:7px;padding:0 0 5px; font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)} #bql .fn2-hd .r{text-align:right} #bql .fn2-hd span:last-child{text-align:right} /* ══ Hồ sơ outlet — MODAL ══════════════════════════════════════════════ Bấm một outlet trước đây chèn hàng hồ sơ NGAY DƯỚI outlet đó: khối 5 tab + bảng SKU (~420px) nằm chen giữa các outlet cùng stage, vừa đọc hồ sơ vừa thấy outlet khác trôi bên dưới. Nay hồ sơ nổi lên một lớp riêng, bảng phía sau đứng im. */ #bql .omod{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px} #bql .omod-bd{position:absolute;inset:0;background:var(--sh-scrim)} #bql .omod-d{position:relative;width:min(1080px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column; background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--sh-pop);border-top:3px solid var(--primary);overflow:hidden} #bql .omod-d:focus{outline:none} /* Biểu mẫu một cột: 1080px làm dòng chữ dài quá tầm mắt và ô nhập kéo hết bề ngang. Bản thật khoá 560–600px; ở đây 620px cho vừa hai cột ngày. */ #bql #omod[data-narrow] .omod-d{width:min(620px,100%)} #bql .omod-h{display:flex;align-items:flex-start;gap:11px;padding:13px 14px 11px;border-bottom:1px solid var(--line)} #bql .omod-h .av{width:34px;height:34px;font-size:12px;flex:none} #bql .omod-ti{flex:1;min-width:0} #bql .omod-ti h4{font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis} #bql .omod-sb{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .omod-m{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;align-items:center} #bql .omod-m>span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap} #bql .omod-m i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} #bql .omod-m small{font-size:10px;color:var(--muted)} #bql .omod-b{overflow:auto;background:var(--surface-2)} #bql .omod-b .hub{background:var(--surface)} #bql .omod-b .hub-t{position:sticky;top:0;z-index:2} #bql .omod-b .sku{padding-left:12px} @media (prefers-reduced-motion:no-preference){ #bql .omod-d{animation:bql-omod-in .2s cubic-bezier(.22,1,.36,1)} #bql .omod-bd{animation:bql-fade .2s}} @keyframes bql-omod-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} /* ══ Modal «Sửa visit» ══════════════════════════════════════════════════ Khuôn bám modal #ws-modal thật của app (public/index.html:1395-1404): 8 tab Thông tin outlet · Kết quả làm việc · Plan · Đơn hàng · Chương trình · Hợp đồng · Media · Thiết bị. Emoji của bản thật đổi thành icon line theo DS. */ #bql .vsg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #bql .vsg--3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} #bql .vsg--4{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} #bql .vsf{display:flex;flex-direction:column;gap:4px;min-width:0} #bql .vsf>span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} #bql .vsf input, #bql .vsf select{height:31px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl);padding:0 9px; font-family:inherit;font-size:12.5px;color:var(--text);background:var(--surface);min-width:0} #bql .vsf input:focus, #bql .vsf select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .vsv{min-height:31px;display:flex;align-items:center;gap:6px;padding:0 9px;border-radius:var(--radius-ctrl); border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;min-width:0} #bql .vsv.ro{color:var(--muted)} #bql .vsv>span, #bql .vsv>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .vsbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end; margin-top:12px;padding-top:11px;border-top:1px solid var(--line)} #bql .vsbar .sp{flex:1} /* Bảng đơn hàng trong tab Đơn hàng — cùng khuôn .cpt cho khỏi sinh kiểu bảng thứ tư. */ #bql .vsn{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;padding:4px 0 8px} /* ══ Khuôn modal «Sửa visit» — bám bản thật #ws-modal ══════════════════════════ Mọi luật dưới đây nằm trong .omod[data-skin="ws"]. Lý do: .hub* / .btn--* / .ps--* dùng chung với bảng plan và popup ô ngoài modal; sửa tại chỗ là đổi luôn 3 nơi. Màu lấy theo trạng thái ĐANG CHẠY của app (body.sales-v3 bật mặc định) — ở trạng thái đó sales-os-v3.css đè nhấn đỏ #dc2626 của markup gốc về #0073EA. */ #bql .omod[data-skin="ws"] .omod-bd{background:var(--sh-scrim);backdrop-filter:blur(2px)} #bql .omod[data-skin="ws"] .omod-d{width:min(1280px,100%);max-height:92vh;border-radius:var(--radius-card); box-shadow:var(--sh-mod)} #bql .omod[data-skin="ws"] .omod-h{padding:13px 18px 12px;background:var(--surface)} #bql .omod[data-skin="ws"] .omod-ti h4{font-size:15.5px;font-weight:700;letter-spacing:-.02em} /* Nút ✕ bản thật là nút VIỀN TRẮNG, không phải icon trần như .xbtn của bảng. */ #bql .omod[data-skin="ws"] #omod-x{width:28px;height:28px;border:1px solid var(--line-2); border-radius:var(--radius-ctrl);background:var(--surface);color:var(--text)} #bql .omod[data-skin="ws"] #omod-x:hover{background:var(--surface-2);color:var(--text)} /* Thanh tab: 8 nút CHIA ĐỀU toàn bề ngang, không cuộn ngang; nhãn dài thì xuống dòng. */ #bql .omod[data-skin="ws"] .omod-b{background:var(--bg-canvas);padding:0} #bql .omod[data-skin="ws"] .hub{background:transparent;border:0;border-radius:var(--radius-card);overflow:visible} #bql .omod[data-skin="ws"] .hub-t{background:var(--surface);border-bottom:1px solid var(--line); padding:0;gap:0;overflow:visible} #bql .omod[data-skin="ws"] .hub-t button{flex:1 1 auto;min-width:0;height:auto;padding:11px 8px; font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent; white-space:normal;line-height:1.3;justify-content:center;text-align:center} #bql .omod[data-skin="ws"] .hub-t button.on{color:var(--text);font-weight:700;border-bottom-color:var(--primary)} #bql .omod[data-skin="ws"] .hub-t .ic-sm{flex:none} #bql .omod[data-skin="ws"] .hub-p{padding:14px 18px 18px} /* Sàn chiều cao thân: đo được tab «Hợp đồng» rỗng chỉ cao 67px còn tab «Kết quả làm việc» 725px — đổi tab là modal nảy hơn 650px, nút footer chạy lên chạy xuống dưới con trỏ. Sàn giữ khung đứng yên; tab dài hơn sàn vẫn cuộn như cũ. */ #bql .omod[data-skin="ws"] .omod-b{min-height:min(430px,52vh)} /* ══ Master Data outlet — 46 trường / 13 nhóm ══════════════════════════════════ Bản thật xếp 13 nhóm thành MỘT cột dọc, không có mục lục: muốn biết nhóm nào còn thiếu phải cuộn hết hơn hai màn. Ở đây giữ nguyên đủ trường nhưng thêm ba thứ: băng đếm ở đầu, hàng chip nhảy nhóm dính trên, và mép trái đỏ ở ô bắt buộc còn trống. */ #bql .omod[data-skin="ws"] .mdban{border:1px solid var(--warn);background:var(--working-bg); border-radius:var(--radius-card);padding:10px 12px;margin-bottom:11px} #bql .omod[data-skin="ws"] .mdban--ok{border-color:var(--ok);background:var(--done-bg)} #bql .mdban-h{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--warn-ink)} #bql .mdban--ok .mdban-h{color:var(--ok-ink)} #bql .mdban-h .sp{flex:1} #bql .mdban-n{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} #bql .mdbar{height:6px;border-radius:var(--radius-bar);background:var(--mg-track);margin:9px 0 8px;overflow:hidden} #bql .mdbar i{display:block;height:100%;border-radius:var(--radius-bar);background:var(--mg-tan)} #bql .mdban-c{display:flex;flex-wrap:wrap;gap:5px} #bql .mdchip{height:23px;padding:0 9px;border:1px solid var(--warn);border-radius:var(--radius-chip);background:var(--surface); font:inherit;font-size:11.5px;font-weight:600;color:var(--warn-ink);cursor:pointer;white-space:nowrap} #bql .mdchip:hover{background:var(--bg-surface);border-color:var(--working);color:var(--warn-ink)} #bql .mdchip:focus-visible{outline:none;box-shadow:var(--focus)} #bql .mdban-s{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.55} #bql .mdban-b{width:22px;height:22px;flex:none;display:grid;place-items:center;padding:0; border:1px solid transparent;border-radius:var(--radius-ctrl);background:none;color:inherit;cursor:pointer;opacity:.8} #bql .mdban-b:hover{background:color-mix(in srgb, var(--warn) 18%, transparent);opacity:1} #bql .mdban-b:focus-visible{outline:none;box-shadow:var(--focus)} #bql .mdban-b .ic-sm{transition:transform .18s cubic-bezier(.22,1,.36,1)} #bql .mdban-b[aria-expanded="true"] .ic-sm{transform:rotate(90deg)} /* Hàng chip nhảy nhóm — dính dưới thanh tab, luôn thấy khi cuộn trong thân modal. */ #bql .mdnav{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:5px; padding:9px 0 10px;margin-bottom:2px;background:var(--bg-canvas); box-shadow:var(--sh-sub)} #bql .mdnav button{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px; border:1px solid var(--line-2);border-radius:var(--radius-ctrl);background:var(--surface); font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap} #bql .mdnav button:hover{border-color:var(--primary);color:var(--primary-ink)} #bql .mdnav button:focus-visible{outline:none;box-shadow:var(--focus)} #bql .mdnav button .c{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px; padding:0 4px;border-radius:var(--radius-chip);font-size:10px;font-variant-numeric:tabular-nums} #bql .mdnav .ok{border-color:var(--ok);background:var(--done-bg);color:var(--ok-ink)} #bql .mdnav .mid{border-color:var(--warn);background:var(--working-bg);color:var(--warn-ink)} #bql .mdnav .mid .c{background:var(--working);color:var(--text-on-solid)} #bql .mdnav .no{border-color:var(--bad);background:var(--stuck-bg);color:var(--bad-ink)} #bql .mdnav .no .c{background:var(--stuck);color:var(--text-on-solid)} #bql .mdnav .off{opacity:.62} #bql .mdaddr{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted); padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--radius-card);background:var(--surface);margin-bottom:11px} #bql .mdaddr b{color:var(--text);font-weight:700} #bql .mdgs{display:grid;gap:11px} #bql .mdg{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);padding:10px 12px 12px;scroll-margin-top:60px} #bql .mdg--lock{opacity:.72} /* Gạch chân hổ phách của tiêu đề nhóm là dấu nhận dạng của bản thật — giữ nguyên. */ #bql .mdg-h{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding:0 0 6px; border-bottom:2px solid var(--working);font-size:11.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--warn-ink)} #bql .mdg-h .sp{flex:1} #bql .mdg-tick{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600; text-transform:none;letter-spacing:0;color:var(--muted);cursor:pointer;white-space:nowrap} #bql .mdg-tick input{width:14px;height:14px;cursor:pointer} #bql .mdlock{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted); font-style:italic;margin:-2px 0 9px} #bql .mdnote{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--muted); line-height:1.6;margin:-2px 0 10px} #bql .mdnote .ic-sm{flex:none;margin-top:2px} #bql .mdg-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #bql .mdf{display:flex;flex-direction:column;gap:4px;min-width:0;padding-left:9px; border-left:3px solid transparent;scroll-margin-top:72px} #bql .mdf--miss{border-left-color:var(--stuck)} #bql .mdf-l{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:9.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} #bql .mdf--miss .mdf-l{color:var(--bad-ink)} #bql .mdf-l .rq{font-style:normal;color:var(--bad-ink)} #bql .mdf-t{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.02em; padding:1px 5px;border-radius:var(--radius-chip);background:var(--stuck-bg);color:var(--bad-ink)} #bql .mdf input, #bql .mdf select, #bql .mdf textarea{height:31px;border:1px solid var(--line-2);border-radius:var(--radius-ctrl); padding:0 9px;font-family:inherit;font-size:12.5px;color:var(--text);background:var(--surface);min-width:0} #bql .mdf textarea{height:auto;padding:7px 9px;resize:vertical;line-height:1.5} #bql .mdf input:focus, #bql .mdf select:focus, #bql .mdf textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .mdf--miss input, #bql .mdf--miss select, #bql .mdf--miss textarea{border-color:var(--bad);background:var(--bad-tint)} #bql .mdf input:disabled, #bql .mdf select:disabled, #bql .mdf textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed} #bql .mdf-h{font-size:10.5px;color:var(--muted);line-height:1.5} @media (max-width:1100px){ #bql .mdg-b{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:700px){ #bql .mdg-b{grid-template-columns:minmax(0,1fr)}} #bql .omod[data-skin="ws"] .omod-b .sku{padding-left:0} /* Khối tô màu — bản thật chia mục bằng nền màu theo nghĩa, đây là dấu nhận dạng chính của nó. Hai tông vàng của bản thật (#fffbeb và #fef3c7) sau khi qua v3 đều ra cùng một nền nên ở đây gộp làm một. */ #bql .omod[data-skin="ws"] .vsb{margin-bottom:11px} #bql .omod[data-skin="ws"] .vsb:last-child{margin-bottom:0} #bql .omod[data-skin="ws"] .vsb--warn{background:var(--working-bg);border-color:var(--warn)} #bql .omod[data-skin="ws"] .vsb--warn>h5{color:var(--warn-ink)} #bql .omod[data-skin="ws"] .vsb--info{background:var(--info-bg);border-color:var(--sec-9)} #bql .omod[data-skin="ws"] .vsb--info>h5{color:var(--sec-9-ink)} #bql .omod[data-skin="ws"] .vsb--ok{background:var(--done-bg);border-color:var(--ok)} #bql .omod[data-skin="ws"] .vsb--ok>h5{color:var(--ok-ink)} #bql .omod[data-skin="ws"] .vsb--pur{background:var(--purple-bg);border-color:var(--sec-2)} #bql .omod[data-skin="ws"] .vsb--pur>h5{color:var(--sec-2-ink)} /* Khối «Plan vs Actual» của bản thật KHÔNG tô nền, nó gắn vạch nhấn ở mép trái. */ #bql .omod[data-skin="ws"] .vsb--acc{border-left:3px solid var(--primary)} #bql .omod[data-skin="ws"] .vsb .hub-b, #bql .omod[data-skin="ws"] .vsb .r{background:var(--surface)} #bql .omod[data-skin="ws"] .vsb .hub-none{color:var(--text-muted)} /* Footer: anh em ruột của thân, nên hiện ở MỌI tab chứ không nằm trong tab 1. */ #bql .omod-ft{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:11px 18px} #bql .omod-ft[hidden]{display:none} #bql .omod-ft .vsbar{margin-top:0;padding-top:0;border-top:0} #bql .vsauto{font-size:11.5px;color:var(--muted);font-style:italic;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .omod[data-skin="ws"] .btn--dng{background:var(--stuck);color:var(--text-on-solid)} #bql .omod[data-skin="ws"] .btn--dng:hover{background:var(--stuck-ink)} @media (max-width:760px){ #bql .omod[data-skin="ws"] .hub-t{overflow:auto} #bql .omod[data-skin="ws"] .hub-t button{flex:0 0 auto;white-space:nowrap} #bql .omod[data-skin="ws"] .hub-p{padding:12px 12px 14px} #bql .omod-ft{padding:10px 12px}} /* ══ Tab «Đề xuất» — lọc theo trạng thái + thang bậc tiến độ ══════════ Bản cũ đổ một danh sách phẳng: mỗi dòng một viên trạng thái rồi tới bốn mẩu chữ xám dài ngắn khác nhau, không đọc ra được cái đang chờ ai và còn mấy bước. */ #bql .dxf{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 9px} #bql .dxf button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--line); border-radius:var(--radius-ctrl);background:var(--surface);font:inherit;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} #bql .dxf button:hover:not(:disabled){border-color:var(--line-2);color:var(--text)} #bql .dxf button.on{background:var(--text);border-color:var(--text);color:var(--text-on-solid)} #bql .dxf button:disabled{opacity:.42;cursor:not-allowed} #bql .dxf .c{font-variant-numeric:tabular-nums;font-size:10px;padding:0 4px;border-radius:var(--radius-chip); background:var(--surface-3);color:var(--muted);min-width:15px;text-align:center} #bql .dxf button.on .c{background:color-mix(in srgb, var(--text-on-solid) 24%, transparent);color:var(--text-on-solid)} #bql .dxl{display:grid;gap:7px} #bql .dxc{border:1px solid var(--line);border-left:3px solid var(--tone,var(--line-2));border-radius:var(--radius-card); padding:8px 10px;background:var(--surface);display:grid;gap:7px} #bql .dxc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #bql .dxc-h .nm{font-size:12.5px;font-weight:700;flex:1;min-width:120px} #bql .dxc-h .dt{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} /* Thang bậc dùng chung 3 hạng mục: bậc đã qua tô xám đậm, bậc đang đứng tô cam (hoặc đỏ nếu bị từ chối / xanh nếu là bậc cuối). */ #bql .stpm{display:flex;gap:4px} #bql .stpm-i{flex:1;min-width:0} #bql .stpm-i i{display:block;height:5px;border-radius:var(--radius-bar);background:var(--surface-3)} #bql .stpm-i em{font-style:normal;display:block;font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--muted); margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .stpm-i.done i{background:var(--cs-bar)} #bql .stpm-i.done em{color:var(--cs-ink)} #bql .stpm-i.cur i{background:var(--working)} #bql .stpm-i.cur em{color:var(--working-ink)} #bql .stpm-i.end i{background:var(--done)} #bql .stpm-i.end em{color:var(--done-ink)} #bql .stpm-i.bad i{background:var(--stuck)} #bql .stpm-i.bad em{color:var(--stuck-ink)} /* Chốt chặn cho thang DÀI (>6 bậc): 12 ô bằng nhau trên một hàng ngang, nhãn dài xuống dòng thứ hai chứ không bị cắt. Từ 23/09/2026 thang dài nhất là 5 bậc nên luật này chưa ai chạm tới — giữ để thang sau có nới ra thì nhãn không chồng nhau trở lại. */ #bql .stpm--wrap{gap:5px} #bql .stpm--wrap .stpm-i em{white-space:normal;overflow:visible;line-height:1.35} /* Dưới 980px màn hình, popup co lại tới mức mỗi bậc chỉ còn ~60px và nhãn bị cắt cụt. Quay về lưới xuống dòng: thà 2–3 hàng còn hơn mất chữ. */ @media (max-width:980px){ #bql .stpm--wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px 6px;align-items:start}} /* ══ Ô trạng thái bấm được trong 2 bảng plan ══════════════════════════ Mỗi ô là một trạng thái riêng của outlet (stage, mức tiềm năng, bậc đề xuất, lượt ghé…) nhưng trước đây chỉ in ra viên chữ, muốn biết chi tiết phải mở cả hồ sơ 5 tab. Nay bấm đúng ô nào thì bung chi tiết CỦA Ô ĐÓ. */ #bql table.board td.cpc{cursor:pointer;position:relative} #bql table.board td.cpc:hover{background:var(--primary-soft)} #bql table.board td.cpc[aria-expanded="true"]{background:var(--primary-soft);box-shadow:inset 2px 0 0 var(--primary)} /* Popup chi tiết một ô — dùng lại khuôn .kpop, hẹp hơn #oldd. */ /* 420px bóp thang 5 bậc B1→B5 và bảng SKU thành cột chữ xuống dòng; 560px là bề rộng nhỏ nhất mà 5 nhãn bậc còn đọc được trên một dòng. */ #bql .cpop{width:min(560px,calc(100vw - 20px))} /* Hai cột mở ở khổ rộng: «Kế hoạch doanh thu» bày NGUYÊN khối FC SKU của tab Plan (bảng 9 cột + 4 thẻ KPI + hàng thêm SKU) và «Đề xuất» phải xếp đủ 12 bậc thi công của thẻ thiết kế trên một hàng ngang — cả hai không nhét được vào khổ 560px. popPlace() tự kẹp mép nên nới an toàn. ⚠ Viết bằng HAI class: `.kpop--wide` một mình cùng độ đặc hiệu với `.cpop` mà lại khai TRƯỚC nên bị đè, popup vẫn ra 560px và không có lỗi nào nổ — đã đo đúng cảnh đó. */ #bql .cpop.kpop--wide{width:min(1180px,calc(100vw - 20px))} #bql .cpop .kpop-b{max-height:min(78vh,700px)} #bql .cpr{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)} #bql .cpr:last-child{border-bottom:0} #bql .cpr>i{font-style:normal;flex:none;width:116px;font-size:9.5px;font-weight:700;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);line-height:1.5} #bql .cpr>span{flex:1;min-width:0;font-size:12px;line-height:1.5} #bql .cpr>span.n{font-variant-numeric:tabular-nums;font-weight:700} /* Nhóm hạng mục trong popup «Đề xuất» — cùng khuôn chữ nhãn nhóm với h5 của .hub-b để popup và modal Sửa visit không hiện hai kiểu tiêu đề cho cùng một thứ. */ #bql .cpg+.cpg{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)} #bql .cpg h6{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:6px} #bql .cpg h6 .sp{flex:1} #bql .cpg-e{margin:0;font-size:12px;color:var(--muted);padding:1px 0 3px} /* Cổng «Tạo đề xuất» trong popup cột Đề xuất — hai mặt của CÙNG một chỗ: đủ thông tin thì ra nút, thiếu thì ra khối khoá + lối đi thẳng tới ô còn trống (đúng bản thật). */ #bql .cpg-mk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:11px; border-top:1px solid var(--line)} #bql .cpg-mk .hint{font-size:11px;color:var(--soft);flex:1;min-width:130px;text-align:right} #bql .cpg-lock{display:flex;align-items:center;gap:10px;margin-top:11px;padding:9px 11px; background:var(--warn-tint);border:1px solid var(--warn);border-radius:var(--radius-card)} #bql .cpg-lock .i{color:var(--warn-ink);display:flex;flex:none} #bql .cpg-lock div{flex:1;min-width:0;font-size:11.5px;color:var(--warn-ink);line-height:1.45} #bql .cpg-lock b{display:block;font-size:12px} #bql .cpg-lock span{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #bql .cpg-note{margin:9px 0 0;font-size:11px;color:var(--soft);line-height:1.45} #bql .dxc[data-pid], #bql .dxc[data-dk], #bql .dxc[data-ctj]{cursor:pointer} #bql .dxc[data-pid]:hover, #bql .dxc[data-dk]:hover, #bql .dxc[data-ctj]:hover{border-color:var(--primary);background:var(--primary-soft)} #bql .dxc[data-pid]:focus-visible, #bql .dxc[data-dk]:focus-visible, #bql .dxc[data-ctj]:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* Dấu «Mở form ›» ở bảng ⑦: dòng bảng cũng bấm ra brief y như thẻ trong popup, nhưng bảng không có chỗ nào nói ra điều đó nếu không in thêm. */ #bql .dgo{font-size:10.5px;font-weight:700;color:var(--primary-ink);white-space:nowrap;margin-left:7px} #bql .dxc-h .go{font-size:10.5px;font-weight:700;color:var(--primary-ink);white-space:nowrap} #bql .cpop .stpm{margin:9px 0 3px} #bql .cpop .dxc{margin-top:9px} #bql .cpop .dxc:first-child{margin-top:3px} /* Bảng SKU gọn trong popup — chỉ 3 cột, không phải cả khung FC SKU 9 cột. */ #bql .cpt{width:100%;border-collapse:collapse;margin-top:6px} #bql .cpt th{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted); text-align:left;padding:5px 6px;background:var(--surface-2);border-bottom:1px solid var(--line)} #bql .cpt td{font-size:11.5px;padding:5px 6px;border-bottom:1px solid var(--line)} #bql .cpt th.num, #bql .cpt td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #bql .cpt tbody tr:last-child td{border-bottom:0} #bql .cpt tr.more td{color:var(--muted);font-size:10.5px} /* ô PIC dùng chung cho bảng + danh sách */ #bql .pic{display:inline-flex;align-items:center;gap:6px;min-width:0} #bql .pic .nm2{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #bql .pic .rl{font-size:10px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em} /* bộ chọn người đăng nhập + sales */ #bql .who{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 6px;border-radius:var(--radius-ctrl); border:1px solid var(--line-2);background:var(--surface)} #bql .who .lb{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)} #bql .who select{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text);padding:0;max-width:190px} #bql .who select:focus{outline:none} #bql .scope{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--radius-ctrl); background:var(--surface-2);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted)} #bql .scope b{color:var(--text)} @media (max-width:1240px){ #bql .kpi{grid-template-columns:repeat(2,minmax(0,1fr))} #bql .kcell:nth-child(3){border-left:0} #bql .opanel-b{grid-template-columns:repeat(2,minmax(0,1fr))} #bql .ocol:nth-child(3){border-left:0} #bql .g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:1100px){ #bql .rail{display:none} #bql .g2, #bql .g3{grid-template-columns:minmax(0,1fr)} #bql .bwrap{overflow-x:auto}} @media (prefers-reduced-motion:no-preference){ /* KHÔNG dùng fill-mode `both`: from{opacity:0} + both để phần tử ở opacity 0 cho tới khi animation chạy — chụp/paint sớm là ra màn hình trắng trơn. */ #bql .sec{animation:bql-fade .42s cubic-bezier(.22,1,.36,1)} #bql .pcard, #bql .task, #bql .btn, #bql .chip, #bql .xbtn .ic{transition:all .2s cubic-bezier(.22,1,.36,1)} @keyframes bql-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}} @media (prefers-reduced-motion:reduce){#bql *{animation:none!important;transition:none!important}} /* ══════════════════════════════════════════════════════════════════════ Ô tìm nằm TRONG thẻ — kênh ẩn thứ BA, rời hẳn hai kênh cũ: hidden → phạm vi sales (applyOwnTables / applyDrows) .f-out → ô «Lọc trong khối…» trên dải tiêu đề .q-out → ô tìm của chính thẻ đó .hdf-out → hai bộ lọc Tiến độ / Trạng thái của thẻ Hợp đồng Ẩn ở bất kỳ kênh nào là ẩn; gộp chung một class thì kênh sau xoá dấu của kênh trước và dòng của sale khác lòi ra khi gõ tìm. ══════════════════════════════════════════════════════════════════════ */ #bql .q-out{display:none !important} /* ── ③ Action từ Commercial Plan — cột trạng thái + thẻ bấm được ────── */ #bql .cnts{display:flex;gap:5px;flex-wrap:wrap;align-items:center} #bql .cpcol-h{display:flex;align-items:center;gap:6px;margin-bottom:7px} #bql .cpcol-h .d{width:8px;height:8px;border-radius:99px;flex:none} #bql .cpcol-h .n{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--surface-2); color:var(--muted);border-radius:var(--radius-chip);padding:1px 7px} #bql .cpcol-b{display:grid;gap:7px;align-content:start;max-height:340px;overflow:auto;padding-right:3px} #bql .task--act{cursor:pointer;width:100%;box-sizing:border-box;text-align:left;font:inherit;color:inherit} #bql .task--act:hover{border-color:var(--primary)} #bql .task--act:focus-visible{outline:2px solid var(--mg-navy);outline-offset:2px} #bql .task--act.over{box-shadow:inset 3px 0 0 var(--mg-red)} #bql .task-hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10.5px;color:var(--muted)} #bql .task-hd .sp{flex:1} #bql .task-ol{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--mg-navy-deep)} #bql .task-nt{font-size:11px;color:var(--muted);line-height:1.35} /* ── ③ Việc từ Marketing OS — 4 cột trạng thái của bàn Sale ─────────── */ #bql .mkb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px} #bql .mkcol-b{display:grid;gap:7px;align-content:start;max-height:340px;overflow:auto;padding-right:3px} #bql .mkc{border:1px solid var(--mg-line-strong);background:var(--surface);padding:9px 10px;display:grid;gap:5px} #bql .mkc.pin{box-shadow:inset 3px 0 0 var(--mg-warn)} #bql .mkc.over{box-shadow:inset 3px 0 0 var(--mg-red)} #bql .mkc-t{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:600;line-height:1.35} #bql .mkc-t>span{flex:1;min-width:0} #bql .mkc-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10.5px;color:var(--muted)} #bql .mkc-by{font-size:10.5px;color:var(--muted)} #bql .mkc-nt{font-size:11px;color:var(--muted);line-height:1.35} #bql .mkc-f{display:grid;gap:5px;margin-top:2px} #bql .mkc-f select, #bql .mkc-f input{width:100%;box-sizing:border-box;border:1px solid var(--mg-control-border); background:var(--mg-surface);border-radius:var(--radius-ctrl);font-size:11.5px;padding:4px 7px;color:var(--text)} #bql .mkc-f select:focus, #bql .mkc-f input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .mkpin{width:22px;height:22px;flex:none;padding:0;border:1px solid var(--line-2);background:var(--surface); border-radius:var(--radius-ctrl);color:var(--soft);display:grid;place-items:center} #bql .mkpin.on{background:var(--mg-warn-bg);border-color:var(--mg-warn);color:var(--mg-warn)} @media (max-width:1180px){#bql .mkb{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ── Lớp nổi CHI TIẾT ACTION ───────────────────────────────────────── Element RIÊNG chứ không dùng lại #omod: #omod là hồ sơ OUTLET (avatar + dải meta đọc theo cột của bảng chứa hàng đó). Nhồi một action vào khuôn ấy thì avatar in hai chữ đầu của câu việc và dải meta luôn rỗng. Dùng lại lớp .omod-* để hai lớp nổi trông như một bộ. */ #bql #amod .omod-d{width:min(700px,100%)} #bql .amod-h{display:grid;gap:8px;padding:13px 16px 12px;border-bottom:1px solid var(--line);background:var(--surface)} #bql .amod-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap} #bql .amod-cs{display:contents} #bql .amod-r .sp{flex:1} #bql .amod-t{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.02em} #bql .amod-b{padding:14px 16px 18px;display:grid;gap:13px} #bql .asec>h5{margin:0 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} #bql .akv{border:1px solid var(--mg-line-strong);background:var(--mg-surface)} #bql .akv-r{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:7px 11px; border-bottom:1px solid var(--line);font-size:12.5px} #bql .akv-r:last-child{border-bottom:0} #bql .akv-r>span{color:var(--muted);font-size:11.5px} #bql .alink{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--mg-navy); text-decoration:underline;text-underline-offset:2px} #bql .alink:hover{color:var(--mg-navy-deep)} #bql .abox{border:1px solid var(--line);background:var(--mg-surface);padding:8px 11px;margin-bottom:6px} #bql .abox:last-child{margin-bottom:0} #bql .abox>span{display:block;margin-bottom:3px;font-size:10.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} #bql .abox>p{margin:0;font-size:12.5px;line-height:1.45} #bql .abox .f{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px} #bql .abox .f i{font-style:normal;font-size:11px;color:var(--muted);background:var(--surface-2); border:1px solid var(--line);padding:1px 7px} #bql .avs{display:grid;grid-template-columns:78px 76px 1fr;gap:9px;align-items:center;padding:6px 11px; border:1px solid var(--line);background:var(--mg-surface);margin-bottom:6px;font-size:12px} #bql .avs:last-child{margin-bottom:0} #bql .aed{display:grid;gap:9px} #bql .aed label{display:grid;gap:4px} #bql .aed label>span{font-size:11px;font-weight:700;color:var(--muted)} #bql .aed select, #bql .aed textarea{box-sizing:border-box;border:1px solid var(--mg-control-border); background:var(--mg-surface);border-radius:var(--radius-ctrl);padding:6px 9px; font-size:12.5px;color:var(--text);font-family:inherit} #bql .aed select:focus, #bql .aed textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)} #bql .aft{display:flex;gap:12px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line); font-size:11px;color:var(--muted)} /* ── ⑧ Hàng tiêu đề nhóm theo BƯỚC giao hàng ──────────────────────── KHÔNG đặt tên .dgrp — lớp đó đã thuộc về hàng nhóm của khối ⑤/⑦. */ #bql .dstep{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface-2); border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted)} #bql .dstep .n{margin-left:auto;padding:1px 7px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-chip);color:var(--text)} /* Chip đếm chỉ hiện khi ĐANG lọc — .ps có đệm + viền nên chuỗi rỗng vẫn vẽ ra một viên thuốc con con, đọc như một nhãn bị mất chữ. */ #bql #dlv-q-n:empty, #bql #dsk-q-n:empty, #bql #hdb-q-n:empty{display:none} /* ── ⑨ Ô tên outlet mở hồ sơ ────────────────────────────────────────── */ #bql .olclick{cursor:pointer} #bql .olclick:hover .nm{color:var(--mg-navy);text-decoration:underline;text-underline-offset:2px} /* ══════════════════════════════════════════════════════════════════════ THANH LỌC CỦA MỤC — tự ghim khi đang cuộn trong mục, tự nhả khi sang mục khác Dùng position:sticky neo trong CHÍNH khối «section» chứa nó, KHÔNG đếm mốc cuộn bằng tay: thanh dính ở mốc (header + dải điều hướng) từ lúc mục lọt vào tầm mắt, rồi bị đáy mục đẩy ra đúng lúc mục sau bắt đầu. Nhờ thế mỗi thời điểm chỉ có MỘT thanh được ghim và nó luôn thuộc về mục đang đọc — thứ tự bàn giao do chính bố cục quyết, không có bộ đếm nào để lệch. ⚠ Mốc ghim phải là calc(--hd-h + --nav-h) chứ không phải số cứng: header có HAI hàng và tự xuống dòng theo bề rộng nên cao thật đổi theo màn hình (đo 14/09/2026: 113px ở 1920 nhưng 189px ở 1280). syncStickHeights() đã đo và ghi ngược hai biến đó mỗi lần header đổi kích thước. ══════════════════════════════════════════════════════════════════════ */ #bql .secbar{position:sticky;top:calc(var(--hd-h) + var(--nav-h));z-index:45;background:var(--surface)} /* Dấu «đang ghim»: đổ bóng + vạch navy ở mép trái. Cả hai vẽ bằng box-shadow nên KHÔNG tốn một pixel bố cục nào — thanh cao y hệt lúc chưa ghim. Ở đây từng thử chèn nhãn «② Kế hoạch» vào thanh; đo 1280px thì thanh của ② cao 48px → 79px vì nhãn đẩy bộ lọc xuống dòng, tức mỗi lần ghim là một lần giật bố cục. Bỏ hẳn: dải điều hướng ngay trên đầu đã tô sáng đúng mục đang xem (cùng bộ quan sát cuộn với mốc ghim), nên nhãn không nói thêm điều gì. */ #bql .secbar.is-stuck{box-shadow:var(--sh-nav), inset 3px 0 0 var(--mg-navy)} /* Thẻ chứa thanh lọc phải BỎ cắt. .card--flush đặt overflow:hidden nên thẻ tự thành hộp cuộn (mà không bao giờ cuộn) — position:sticky bên trong neo theo hộp đó và KHÔNG BAO GIỜ dính, lỗi câm không có gì báo. Phần tràn ngang của bảng đã do .bwrap lo, nên bỏ cắt ở thẻ không đổi gì khác. */ #bql .card--stick{overflow:visible} /* ⑧ có HAI thanh là cố ý: thẻ «Danh sách giao hàng» mặc định THU nên thanh của nó gần như không có quãng để dính; #dskbar (lọc ba thẻ Thu máy · Hợp đồng · Biên bản) là con trực tiếp của khối «section» nên ghim cho suốt phần còn lại của mục. Hai thanh không bao giờ chạm mốc cùng lúc vì #dskbar nằm DƯỚI thẻ kia trong dòng chảy. */ /* ── Ba chỗ mockup phải nhường khung của app ───────────────────────────────── Mockup tự mang thanh tiêu đề dính của nó. Trong app đã có sẵn một thanh dính (header + dải tab) nên để nguyên là hai thanh chồng nhau, ăn mất hơn 120px chiều cao mà không thêm thông tin gì. Mọi mốc ghim trong mockup đều tính từ var(--hd-h): .nav ghim ở --hd-h, .secbar ghim ở --hd-h + --nav-h, .sec chừa chỗ cuộn cũng theo công thức đó. Vì thế chỉ cần ĐỊNH NGHĨA LẠI --hd-h = chiều cao thanh dính của app rồi bỏ dính cho .hd — cả ba mốc tự đúng theo. Chiều cao đó app đã đo sẵn vào --sticky-top-h (khối script cuối index.html, có ResizeObserver + resize + scroll). Dùng lại biến đó thay vì tự đo lần nữa: hai phép đo cùng một thứ thì sớm muộn lệch nhau, và lệch mốc ghim là thanh công cụ của mục nằm đè lên dải tab mà không lỗi nào nổ. Số cứng thì chắc chắn sai — thanh dính cao bao nhiêu còn tuỳ bề ngang màn (dải tab xuống hai hàng) và tuỳ vai trò người đăng nhập (số nút tab khác nhau). */ #bql{--hd-h:var(--sticky-top-h,0px)} #bql .hd{position:static} #bql{min-height:0} #tab-ban-quan-li{padding:0;background:var(--bg-canvas,#F7F6F1)} /* Phễu ở app bỏ cột «Plan» nên lưới còn BỐN cột, không phải năm. Lý do bỏ: trong app, outlet_plans ĐÃ được trộn thẳng vào phân loại phễu (applyPlanStages, app.js) trước khi đếm — in thêm cột Plan ở đây là in lại gần đúng con số vừa in ở cột Actual, mà người đọc lại tưởng đó là hai nguồn độc lập đang đối chiếu nhau. Mockup tách được vì nó đọc hai bảng riêng. Phải khai lại Ở ĐÂY cho CẢ .fn2-hd lẫn .fn2-r lẫn bản trong @media: thiếu một chỗ là đầu bảng lệch cột so với thân bảng, không lỗi nào nổ. */ #bql .fn2-hd, #bql .fn2-r{grid-template-columns:76px minmax(56px,1fr) 120px 88px} @media (min-width:1101px) and (max-width:1340px){ #bql .fn2 .fn2-hd, #bql .fn2 .fn2-r{grid-template-columns:66px minmax(40px,1fr) 120px 76px} } /* ── Bảng dài phải cuộn TRONG hộp, không kéo dài cả trang ──────────────────── Mockup để .bwrap{max-height:none} vì bảng dựng tay của nó chỉ hơn hai chục dòng. Số thật thì khác hẳn: T10/2026 có 765 dòng plan C.A và 177 dòng forecast C.S. Đo trên bàn thử, để nguyên max-height:none thì riêng mục ② cao 12.790px — tám mục còn lại bị đẩy xuống dưới một khối dài gấp mười màn hình, và dải mục lục phải lội qua đó mới tới mục ③. Đầu bảng đã `position:sticky;top:0` sẵn trong bộ áo mockup — nó được viết ra CHO hộp cuộn, hiện đang không có tác dụng gì vì chẳng có hộp nào để cuộn. Chặn chiều cao là dùng đúng thứ đã có, không phải thêm cơ chế mới. Cùng cách tab Plan đang làm ("mỗi stage 1 bảng trong ô cuộn ~15 dòng"). Chặn theo vh để màn cao thì thấy nhiều dòng hơn, không chặn bằng số cứng. */ #bql [data-sec="2"] .bwrap{max-height:min(560px,62vh)} @media (max-height:720px){ #bql [data-sec="2"] .bwrap{max-height:400px} }