/* ===================================================================== CRM ECO PAK — giao diện Nguyên tắc nghiệp vụ: ít thao tác nhất có thể. Sửa tại chỗ là đường chính — bấm vào ô, rời ô là lưu, không nút Lưu. NGOẠI LỆ DUY NHẤT, thêm 08/09/2026: nút "✎ Sửa hồ sơ" ở góc trên bên phải hồ sơ khách, mở một hộp gom TOÀN BỘ trường được phép sửa. Lý do: ô sửa tại chỗ vẽ y hệt chữ thường, nên người mới không biết bấm vào là sửa được, và không ai trả lời được câu "rốt cuộc tôi được sửa những gì". Hộp đó trả lời đúng câu ấy, và có hẳn mục "không sửa được" kèm lý do. Nó KHÔNG thay sửa tại chỗ — hai đường cùng tồn tại, cùng đi qua những chốt sẵn có ở máy chủ. Đừng nhân ngoại lệ này ra các màn khác nếu chưa có lý do tương đương. Nguyên tắc hình thức (mượn cách làm của Odoo 18 và Frappe/ERPNext): 1. Màu dùng rất tiết kiệm. Nền và khung toàn màu trung tính; màu thương hiệu chỉ dành cho thứ bấm được và cho trạng thái. 2. Khung mỏng hơn bóng đổ. Thẻ là 1px viền nhạt, bóng gần như không thấy — nhìn ra phần mềm quản trị, không phải trang giới thiệu. 3. Số phải soi được theo cột: mọi bảng dùng chữ số đều chiều rộng. 4. Mỗi thành phần một thang màu duy nhất, khai báo ở :root, không rải mã màu vào từng chỗ. ===================================================================== */ :root{ /* --- thang trung tính --------------------------------------------- */ --n0:#ffffff; --n25:#fbfcfd; --n50:#f6f8fa; --n100:#eef1f5; --n200:#e4e8ee; --n300:#d4dae2; --n400:#a5b0bd; --n500:#6f7d8c; --n600:#54626f; --n700:#3a4653; --n900:#15202b; /* --- thang màu thương hiệu ---------------------------------------- Giữ nguyên #0b6a8f của ECO PAK làm bậc 600; các bậc còn lại dựng quanh nó để trạng thái rê chuột / đang chọn / nền nhạt luôn khớp. */ --c25:#f4fafd; --c50:#e9f3f9; --c100:#cfe5f0; --c200:#a6cfe4; --c500:#0d7ba4; --c600:#0b6a8f; --c700:#08536f; --c800:#063f55; /* --- màu trạng thái, dùng chung cho mọi nhãn trong ứng dụng -------- */ --tt-xam-n:#eef1f5; --tt-xam-c:#4e5c6a; --tt-lam-n:#e7f0fa; --tt-lam-c:#1a5c9c; --tt-luc-n:#e3f5ea; --tt-luc-c:#16794a; --tt-vang-n:#fdf1de; --tt-vang-c:#8a5a12; --tt-do-n:#fdeaea; --tt-do-c:#a52121; --tt-nau-n:#f2eee6; --tt-nau-c:#77653f; --tt-tim-n:#f0eafa; --tt-tim-c:#6d4aa8; /* --- tên cũ, giữ nguyên để 9 tệp module không phải sửa ------------- */ --nen:var(--n50); --the:var(--n0); --vien:var(--n200); --vien-dam:var(--n300); --chu:var(--n900); /* 21/09: đậm hơn --n500 một nấc. Nhãn cột (th) và số phụ dùng màu này, trên nền trắng chỉ được 4,15 — dưới ngưỡng đọc được. #5a6875 cho 4,92 mà vẫn là chữ phụ, không tranh chỗ với chữ chính. */ --chu-mo:#5a6875; --chu-nhat:var(--n400); /* --mo được dùng 25 chỗ trong bao-gia/bang-gia/cong-no/bao-cao nhưng chưa từng khai báo — tiêu đề cột và chữ phụ ở những chỗ đó vẫn đang ăn màu chữ đen. Khai báo ở đây là chúng về đúng màu xám. */ --mo:var(--chu-mo); --chinh:var(--c600); --chinh-dam:var(--c700); --chinh-nhat:var(--c50); --xanh:var(--tt-luc-c); --xanh-nhat:var(--tt-luc-n); --cam:var(--tt-vang-c); --cam-nhat:var(--tt-vang-n); --do:#b4232a; --do-nhat:var(--tt-do-n); --tim:var(--tt-tim-c); /* --- bóng, bo góc, vòng focus ------------------------------------- */ --bong:0 1px 2px rgba(16,24,40,.05); --bong-nhe:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --bong-cao:0 16px 40px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.08); --r:10px; /* thẻ */ --r-o:8px; /* ô nhập, nút */ --r-nho:6px; /* nút nhỏ */ --vong:0 0 0 3px rgba(11,106,143,.16); } *{box-sizing:border-box} /* 14/09/2026 — body PHẢI là min-height, KHÔNG được là height. Anh Trọng chụp màn Quản trị › KiotViet: cuộn xuống thì nội dung hiện ra Ở PHÍA TRÊN thanh điều hướng, như thể thanh đó trong suốt. ĐO ĐƯỢC: `html,body{height:100%}` ép body cao đúng 765px (bằng màn hình) trong khi #khung bên trong cao 5051px và tràn ra ngoài. Thanh tiêu đề #dau nằm TRỰC TIẾP trong body, mà position:sticky chỉ dính được trong phạm vi hộp của cha — hết 765px là #dau trôi đi mất (đo được top = -486). Còn #dieu-huong nằm trong #khung cao 5051px nên vẫn dính ở top:51px. Kết quả: một dải 51px trống hoác phía trên thanh điều hướng, nội dung chạy qua đó nhìn thấy hết. Đổi sang min-height thì body cao theo nội dung (5102px), #dau dính lại ở top 0 và bịt kín dải đó. Không có phần tử nào trong dự án đặt height:100% dựa vào chiều cao của body, nên đổi không ảnh hưởng gì. Ai sửa file này về sau: đừng đổi lại thành height:100% cho "gọn". */ html{height:100%} body{min-height:100%} /* 13/09/2026 — chừa sẵn chỗ cho thanh cuộn dọc. Đo được: màn ít dòng (Trả hàng) không sinh thanh cuộn nên vùng nội dung rộng hơn màn nhiều dòng đúng 15px (1178 so với 1163) → đổi tab là cả thẻ trượt ngang 15px. Đây là một nhánh của "bấm vào các chip cũng nhảy loạn xạ". Chừa chỗ sẵn thì bề ngang không đổi dù có thanh cuộn hay không. Chỉ áp cho máy tính: điện thoại thanh cuộn nổi, không chiếm chỗ. */ @media(min-width:901px){html{scrollbar-gutter:stable}} body{ margin:0;background:var(--nen);color:var(--chu); font-family:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:"cv05" 1; /* chữ l có đuôi, đỡ nhầm với I và 1 */ } a{color:var(--chinh);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit;cursor:pointer;color:inherit} input,select,textarea{font:inherit;color:inherit} .an{display:none !important} ::selection{background:var(--c100)} /* Bàn phím thì phải thấy mình đang ở đâu; chuột thì không hiện vòng. */ :focus-visible{outline:2px solid var(--c600);outline-offset:2px} /* ---------- thanh trên ---------- padding-top:env(...) là để khi chạy dạng ứng dụng trên iPhone tai thỏ, thanh tiêu đề không chui xuống dưới thanh trạng thái. Ở trình duyệt thường và trên máy tính giá trị này là 0 nên không đổi gì. */ #dau{background:var(--n0);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:40; padding-top:env(safe-area-inset-top)} /* 185 — trang mở trong hộp đơn (lớp gắn ở đầu app.js, trước lượt vẽ đầu) */ html.trong-hop-don #dau,html.trong-hop-don #dieu-huong,html.trong-hop-don #duoi,html.trong-hop-don #phu-menu{display:none!important} html.trong-hop-don #khung{padding-top:0!important} html.trong-hop-don body{background:#fff} .dau-trong{max-width:1560px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;gap:12px} .hieu{font-weight:700;font-size:15px;letter-spacing:-.1px;color:var(--c700);white-space:nowrap} .day{display:flex;align-items:center;gap:8px} .xa{margin-left:auto} /* ---------- chip ---------- .chip — nhãn tĩnh ở thanh trên và ô xem trước thêm nhanh .chip-loc — nút lọc trong các màn danh sách. Bốn tệp module dùng lớp này nhưng chưa có luật nào, nên đến giờ nó vẫn hiện ra là nút xám mặc định của trình duyệt, lạc hẳn khỏi phần còn lại. */ .chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px; background:var(--n100);color:var(--n600);font-size:11.5px;font-weight:600; letter-spacing:.1px;white-space:nowrap} .chip.hoat{background:var(--c50);color:var(--c700);box-shadow:inset 0 0 0 1px var(--c100)} /* Màn Cơ hội và dòng thời gian lọc bằng .chip.chip-nut, các màn danh sách lọc bằng .chip-loc. Hai kiểu chip lọc cạnh nhau trong cùng một ứng dụng nhìn rất lộ, nên cho .chip-nut mượn nguyên hình dáng của .chip-loc. */ .chip-nut{cursor:pointer} .chip.chip-nut{padding:5px 12px;border:1px solid var(--n200);background:var(--n0); color:var(--n600);font-size:12.5px;font-weight:600;line-height:1.35; transition:background .12s,border-color .12s,color .12s} .chip.chip-nut:hover:not(.hoat){background:var(--n50);border-color:var(--n300);color:var(--n700)} .chip.chip-nut.hoat{background:var(--c600);border-color:var(--c600);color:#fff;box-shadow:none} /* Chip lọc: 29px -> 25px cao. Dãy chip nhóm khách có tới 9 cái nằm ngay trên bảng; chip cao bằng nút bấm thì nó chiếm mất một băng ngang và đẩy bảng xuống. Chip là bộ lọc, không phải hành động — nhỏ hơn nút. */ .chip-loc{display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:999px;border:1px solid var(--n200); background:var(--n0);color:var(--n600); font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap; cursor:pointer;transition:background .12s,border-color .12s,color .12s} .chip-loc:hover:not(.hoat){background:var(--n50);border-color:var(--n300);color:var(--n700)} .chip-loc.hoat{background:var(--c600);border-color:var(--c600);color:#fff} .chip-loc[disabled]{opacity:.5;cursor:default} /* Vạch ngăn giữa các CỤM chip lọc (di trú 075). Màn Đơn hàng trộn hai loại chip: sáu TRẠNG THÁI đi theo một đường, và mấy LÁT CẮT không phải trạng thái (Tất cả, Đang chạy, Chờ thu tiền). Không ngăn ra thì người đọc tưởng tất cả đều là giai đoạn — và chính vì trộn mà chip "Hoàn thành" từng bị bỏ quên. Vạch mảnh, không nhãn chữ: đủ để mắt tách cụm mà không thêm chữ phải đọc. */ .chip-vach{display:inline-block;width:1px;height:18px; background:var(--n300);margin:0 3px;flex:none} /* Hàng bộ lọc đứng riêng dưới hàng tiêu đề — xem chú thích trong don-hang.js. Chip nhiều thì xuống dòng trong chính hàng này, không đẩy nút hành động đi đâu cả. */ .dh-hang-loc{display:flex;flex-wrap:wrap;align-items:center;gap:6px} /* ---------- nút quay lại ← (311 — anh Trọng chốt 03/10/2026) ---------- MỘT nơi định nghĩa nút ← cho mọi trang XEM mở từ một danh sách (đơn, hồ sơ khách, công nợ, cơ hội, việc, bảng giá nhanh). Luật đi kèm: trang xem dùng ←, tờ đang soạn và hộp thoại dùng ✕ (.dong-x) — không bao giờ cả hai trên một màn. Nút có viền, kèm tên màn sẽ về (nhanLui), cao 36px; điện thoại chỉ còn mũi tên 40×40 (Apple 44pt, WCAG ≥ 24px). Mũi tên vẽ bằng mask SVG theo currentColor; chữ "←" trong .mui chỉ còn cho máy đọc màn hình. Trước 311: chip bo tròn 12.5px ở Công nợ, chữ trơn 74×20 ở xem đơn (.dx2-ve), chữ trơn ở hồ sơ khách (.a-lui), .nut thường "← …" ở cơ hội / việc / bảng giá nhanh. */ .nut-ve{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px; height:36px;padding:0 12px 0 9px;border:1px solid var(--n300);border-radius:8px; background:var(--n0);color:var(--n700);text-decoration:none; font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer; transition:background .12s,border-color .12s,color .12s} .nut-ve:hover{background:var(--n100);border-color:var(--n400);color:var(--n900)} .nut-ve:active{background:var(--n200)} .nut-ve:focus-visible,.dong-x:focus-visible{outline:2px solid var(--chinh);outline-offset:2px} .nut-ve .mui{flex:none;width:18px;height:18px;font-size:0;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat} .day>.nut-ve,.dx2-h1>.nut-ve,.gd-ten>.nut-ve,.the-dau>.nut-ve{margin-bottom:0} /* Cơ hội: nút lui lên đầu trang; thẻ cuối chỉ còn nút dọn dẹp — không còn nút nào thì ẩn thẻ. */ .the.ch-don:has(.day.xa:empty){display:none} @media (max-width:640px){ .nut-ve{width:40px;height:40px;padding:0;gap:0;justify-content:center;font-size:0} } /* ---------- khung ---------- */ #khung{max-width:1560px;margin:0 auto;padding:16px 18px 60px;display:flex;gap:16px;align-items:flex-start} #dieu-huong{width:192px;flex:0 0 192px;position:sticky;top:60px} #dieu-huong button{position:relative;display:flex;align-items:center;gap:9px;width:100%;text-align:left; padding:8px 11px;margin-bottom:1px;border:0;border-radius:var(--r-o);background:transparent; color:var(--n600);font-weight:500;font-size:13.5px;transition:background .12s,color .12s} #dieu-huong button:hover{background:var(--n100);color:var(--n900)} /* Mục đang mở: nền nhạt + gạch dọc bên trái. Trước đây là cả khối xanh đặc, nặng hơn hẳn mọi thứ khác trên màn và hút hết mắt về thanh trái. */ #dieu-huong button.hoat{background:var(--c50);color:var(--c700);font-weight:650} #dieu-huong button.hoat::before{content:"";position:absolute;left:0;top:7px;bottom:7px; width:3px;border-radius:0 3px 3px 0;background:var(--c600)} #dieu-huong .dem{margin-left:auto;font-size:11px;font-weight:700;opacity:.9} /* Biểu tượng + chữ của nút điều hướng (13/09/2026 — xem chú thích DH_ICON trong app.js). Chữ bọc trong .dh-chu để thu gọn được. */ #dieu-huong button .dh-ico{flex:none;width:18px;height:18px;display:inline-flex;color:var(--n500)} #dieu-huong button .dh-ico svg{width:18px;height:18px} #dieu-huong button:hover .dh-ico{color:var(--n700)} #dieu-huong button.hoat .dh-ico{color:var(--c600)} #dieu-huong button .dh-chu{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #than{flex:1;min-width:0} /* ===================================================================== NAV NGANG TRÊN ĐẦU — NAV CHÍNH THỨC CỦA KHỔ MÁY TÍNH (13/09/2026) Ra đời là bản thử để so với dải biểu tượng dọc; anh Trọng chọn ngang và chạy ổn cả ngày, nên tối 13/09 đã gỡ nhánh thua: khối "nav thu gọn 56px" (body.nav-gon) và nút ☰ trên máy tính không còn nữa. Tiền tố `body.nav-ngang` GIỮ NGUYÊN — app.js gán class này vô điều kiện. Cố ý không gỡ tiền tố: nhiều luật dưới đây dựa vào độ dài của nó để thắng độ ưu tiên (xem #cn-hoi), gỡ là nút "Hướng dẫn" chạy về sai chỗ. Mấy luật #dieu-huong ở đầu tệp (nav dọc 192px) giờ chỉ còn là NỀN cho ngăn kéo điện thoại (<901px) — không phải một kiểu nav máy tính nữa. ĐO TRƯỚC KHI DỰNG (13 mục, chữ 13,5px, đệm 12px, hở 4px): có biểu tượng = 1458px → KHÔNG vừa màn 1440 (khung 1425) chỉ chữ = 1133px → vừa 1440, vừa 1366 (1330), vừa 1280 (1244) Nên hàng ngang BỎ biểu tượng. Biểu tượng giữ nguyên cho ngăn kéo điện thoại, nơi mỗi mục một dòng nên có chỗ. Thanh đầu đang chiếm 561px (tên hệ thống + 3 chip đơn vị + tên người + chuông + Thoát), nên nav ngang phải là HÀNG RIÊNG, không nhét chung được. Đổi lại bảng được trọn chiều ngang: ở 1366px bảng công nợ cần 1113px thì còn 1106px (trước đó nav dọc để lại 898px). Hình dáng mượn .v-tab đã có sẵn trong dự án (gạch chân mục đang mở) — cùng lối với KiotViet và Zoho, không đặt kiểu thứ ba. "Hướng dẫn" và "⇅ Sắp xếp" là việc phụ nên đẩy sang mép phải. ===================================================================== */ @media(min-width:901px){ /* Ngang thì không có gì để thu — nút ☰ chỉ còn cho ngăn kéo điện thoại. */ body.nav-ngang #menu-nut{display:none} body.nav-ngang #khung{display:block;padding-top:0} body.nav-ngang #than{width:100%;min-width:0} /* ---- Dáng thanh: theo đúng KiotViet, đo tại ecopakvn.kiotviet.vn ---- nav nền #0070F4 đặc, cao 48px; chữ 14px/600 màu trắng, đệm 8px 20px; mục đang mở nền #005AC3 (xanh đậm hơn) bo góc 8px. Mình theo cùng khuôn nhưng thay xanh KiotViet bằng xanh của hệ (--c700), và chữ 13px thay vì 14px — anh Trọng muốn nhỏ hơn, và mình có 13 mục trong khi KiotViet có 10. Âm 18px hai bên để nền trải hết bề ngang khung. 51px = chiều cao thật của #dau. */ body.nav-ngang #dieu-huong{position:sticky;top:51px;z-index:30; display:flex;flex-wrap:wrap;align-items:center;gap:1px; width:auto;flex:none; margin:0 -18px 14px;padding:5px 18px; background:var(--c700);border-bottom:0; transition:none} body.nav-ngang #dieu-huong button{width:auto;flex:none; margin:0;padding:7px 12px;gap:0; border-radius:8px;border:0; font-size:13px;font-weight:600;letter-spacing:.1px; color:rgba(255,255,255,.86)} body.nav-ngang #dieu-huong button:hover{background:rgba(255,255,255,.13);color:#fff} body.nav-ngang #dieu-huong button.hoat{background:var(--c800);color:#fff;font-weight:650} /* Gạch dọc bên trái là của kiểu cột — ngang thì cả ô đã đổi nền. */ body.nav-ngang #dieu-huong button.hoat::before{content:none} body.nav-ngang #dieu-huong button .dh-ico{display:none} /* Ô đếm trên nền xanh: viên trắng mờ, không dùng màu nhấn nữa vì nền đã là màu nhấn — chữ xanh trên xanh thì mất hút. */ body.nav-ngang #dieu-huong button .dem{margin-left:6px; background:rgba(255,255,255,.22);color:#fff;border-radius:999px; padding:0 6px;min-width:17px;height:17px;line-height:17px; display:inline-block;text-align:center;font-size:10.5px;opacity:1} body.nav-ngang #dieu-huong button .dem:empty{display:none} /* Phải đủ mạnh để thắng luật `#dieu-huong button{margin:0}` ở trên — luật kia có hai thẻ nên độ ưu tiên cao hơn nếu viết `#cn-hoi` trống. Đã dính: Hướng dẫn đứng dính ngay sau Báo cáo thay vì ra mép phải. */ body.nav-ngang #dieu-huong #cn-hoi{margin-left:auto} /* Quản trị và Sắp xếp dời vào menu bánh răng góc phải (anh Trọng 13/09: "2 cái này chỉ cần hiển thị cho mình"). Vẫn nằm trong DOM để ngăn kéo điện thoại và cơ chế sắp xếp dùng lại được. */ body.nav-ngang #dieu-huong button[data-man="quantri"], body.nav-ngang #dh-sap{display:none} /* Trừ lúc ĐANG sắp xếp: cần nút "✓ Xong" và "Về mặc định" ngay trên thanh, không thì bật chế độ sắp rồi không có đường ra. */ body.nav-ngang #dieu-huong.sap-xep #dh-sap{display:inline-flex} body.nav-ngang #dieu-huong.sap-xep button[data-man="quantri"]{display:inline-flex} body.nav-ngang #dh-sap,body.nav-ngang #dh-goc{margin-top:0; color:rgba(255,255,255,.7);font-size:12px} /* Đang sắp xếp: hai mũi tên là TRÁI/PHẢI, nằm cạnh nhau ở đáy nút — nút ngang chỉ cao ~32px, không xếp chồng hai mũi tên được. */ body.nav-ngang #dieu-huong.sap-xep button[data-man]{padding-bottom:23px} body.nav-ngang .dh-mui{top:auto;bottom:3px;width:18px;height:16px; background:rgba(255,255,255,.9);border-color:transparent;color:var(--c800)} body.nav-ngang .dh-len{right:24px} body.nav-ngang .dh-xuong{right:4px} } /* ---------- menu bánh răng góc phải: Quản trị + Sắp xếp ---------- Xem chú thích dungMenuQuanTri() trong app.js. Chỉ quản trị mới có. */ #qt-boc{position:relative;display:inline-flex} #qt-nut{font-size:15px;line-height:1;padding:4px 9px} #qt-nut.hoat{background:var(--c50);border-color:var(--c100);color:var(--c700)} #qt-bang{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:70; min-width:190px;padding:5px; background:var(--n0);border:1px solid var(--vien);border-radius:var(--r); box-shadow:0 8px 26px rgba(16,24,40,.16)} #qt-boc.mo #qt-bang{display:block} #qt-bang button{display:block;width:100%;text-align:left;border:0;background:transparent; padding:8px 11px;border-radius:var(--r-o); font:inherit;font-size:13.5px;font-weight:500;color:var(--n700);cursor:pointer} #qt-bang button:hover{background:var(--n100);color:var(--n900)} @media(max-width:900px){ #qt-boc{display:none} } /* ---------- thẻ ---------- */ .the{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);box-shadow:var(--bong)} .the+.the{margin-top:14px} /* Luật trên là để xếp thẻ chồng nhau theo chiều dọc. Khi thẻ nằm trong lưới (ô chỉ số ở Bảng điều khiển, phễu bán hàng) nó làm ô thứ 2 trở đi tụt xuống 14px so với ô đầu — cả hàng lệch nhau thấy rõ. */ .luoi>.the+.the{margin-top:0} .the-dau{padding:11px 15px;border-bottom:1px solid var(--vien);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .the-dau h2{margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.1px} .the-dau>b{font-weight:650;letter-spacing:-.1px} .the-than{padding:15px} .the-chan{padding:10px 15px;border-top:1px solid var(--vien);display:flex;align-items:center;gap:10px} .luoi{display:grid;gap:13px} .c2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} .c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .c4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} .c-truong{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));max-width:1180px} /* ---------- nút ---------- */ .nut{display:inline-flex;align-items:center;justify-content:center;gap:6px; border:1px solid var(--n300);background:var(--n0);color:var(--n700); padding:6px 13px;border-radius:var(--r-o); font-weight:600;font-size:13px;line-height:1.45;white-space:nowrap; box-shadow:0 1px 1px rgba(16,24,40,.03); transition:background .12s,border-color .12s,box-shadow .12s} .nut:hover{background:var(--n50);border-color:var(--n400)} .nut:active{background:var(--n100);box-shadow:none;transform:translateY(.5px)} /* .nut.chinh là cách viết dùng ở 14 chỗ trong bao-gia/don-hang/cong-no/ quan-tri — trước giờ chưa có luật nào, nên "Lưu báo giá", "Ghi phiếu thu", "Xác nhận duyệt"… hiện y hệt nút Huỷ. Nhận cả hai cách viết. */ .nut-chinh,.nut.chinh{background:var(--c600);border-color:var(--c600);color:#fff; box-shadow:0 1px 2px rgba(8,83,112,.24)} .nut-chinh:hover,.nut.chinh:hover{background:var(--c700);border-color:var(--c700)} .nut-chinh:active,.nut.chinh:active{background:var(--c800);border-color:var(--c800)} .nut-nho{padding:3px 10px;font-size:12px;border-radius:var(--r-nho)} .nut-do{color:var(--do);border-color:#eec3c5} .nut-do:hover{background:var(--tt-do-n);border-color:#e0a9ac} .nut-phang{border-color:transparent;background:transparent;color:var(--chu-mo);box-shadow:none} .nut-phang:hover{background:var(--n100);border-color:transparent;color:var(--n700)} .nut[disabled]{opacity:.45;cursor:default;box-shadow:none} .nut[disabled]:hover{background:var(--n0);border-color:var(--n300)} .nut-chinh[disabled]:hover,.nut.chinh[disabled]:hover{background:var(--c600);border-color:var(--c600)} /* ---------- nút chỉ có biểu tượng (Chọn cột, Tải lại) ---------- 13/09/2026, theo KiotViet: mấy việc phụ trên thanh công cụ để biểu tượng cho gọn, chữ dành cho hành động chính. Vuông 32px = cùng chiều cao với .nut thường nên hàng công cụ không so le. */ .nut-bt{display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;flex:none;padding:0; border:1px solid var(--n300);border-radius:var(--r-o); background:var(--n0);color:var(--n600);cursor:pointer; transition:background .12s,border-color .12s,color .12s} .nut-bt svg{width:17px;height:17px} .nut-bt:hover{background:var(--n50);border-color:var(--n400);color:var(--c700)} .nut-bt:active{background:var(--n100)} /* Bảng chọn cột bung ra từ biểu tượng sáu gạch. Ở body, position:fixed — thanh công cụ có bo góc và cắt tràn nên hộp bung từ trong đó bị xén. */ .cot-bang{display:none;position:fixed;z-index:80;min-width:216px;max-height:70vh;overflow-y:auto; padding:6px;background:var(--n0);border:1px solid var(--vien);border-radius:10px; box-shadow:0 10px 30px rgba(16,24,40,.17)} .cot-bang.mo{display:block} /* ĐỔI TÊN 13/09/2026: lớp này từng là `.cot-dau`, TRÙNG TÊN với đầu cột kanban ở dòng ~560 (.cot-dau .cham-gd). Cùng một tên cho hai thứ khác hẳn nhau, và luật khai sau đè lên trước — tiêu đề hộp chọn cột đang ăn nhầm font của kanban (700/12.5px/flex). Đặt tên riêng. */ .cot-bang-dau{font-size:11px;font-weight:600;color:var(--chu-mo);padding:5px 8px 7px} /* Tiêu đề nhóm cột — bảng khách có 23 cột, chia theo nhóm mới đọc nổi. */ .cot-nhom{font-size:11.5px;font-weight:600;color:var(--chu-mo); padding:9px 8px 3px;margin-top:2px;border-top:1px solid var(--vien)} .cot-bang-dau+.cot-nhom{margin-top:0;padding-top:3px;border-top:0} .cot-muc{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r-o); font-size:13px;font-weight:400;color:var(--chu);cursor:pointer; text-transform:none;letter-spacing:0;margin:0;line-height:1.45} .cot-muc:hover{background:var(--n100)} .cot-muc input{margin:0;width:15px;height:15px;flex:none;accent-color:var(--c600);cursor:pointer} .cot-ve{display:block;width:100%;text-align:left;margin-top:4px;border:0;border-top:1px solid var(--vien); background:transparent;padding:8px;font:inherit;font-size:12.5px;color:var(--chinh);cursor:pointer} .cot-ve:hover{background:var(--n100)} /* ---------- ĐỆM KHUNG ĐẦU THẺ ---------- Anh Trọng 13/09: "thêm padding cho tên tab và icon 6 gạch, hiện thấy nó quá sát bên trái và bên phải … như trong module khách hàng là đẹp nhé … đệm 2 bên, trên dưới luôn". ĐO TRƯỚC KHI SỬA: thẻ bắt đầu ở x=242, tên màn ở x=243 → đúng 1px lề. Khách hàng không bị vì nó dùng .the-dau có sẵn padding 11px 15px. Lấy luôn con số đó làm chuẩn cho .bg-thanh, để hai lối dựng khung đầu (.the-dau và .bg-thanh) ra CÙNG một lề — không đẻ thêm số thứ ba. */ /* Hai lối dựng: có màn đặt .bg-thanh thẳng trong thẻ (Đơn hàng, Công nợ, Báo giá, Giao hàng), có màn bọc thêm một div để dựng lại riêng phần thanh (Chứng từ #hd-thanh, Hàng hoá #hh-thanh). Phải kể cả hai — đo 13/09: chỉ khai .the>.bg-thanh thì hai màn kia lề vẫn 0. */ .the>.bg-thanh,.the>div>.bg-thanh{padding:11px 15px;margin-bottom:0} /* .bg-thanh gốc có margin-bottom:12px cho lối dựng cũ (thanh trôi tự do trên nền trang). Nằm trong thẻ thì lề dưới đã là padding, để cả hai thành đáy thẻ dày 23px. */ /* Thanh tab canh theo lề đó: 3px của thanh + 12px của nút = 15px, chữ tab thẳng hàng với tên màn. Trước là 10+12=22px, lệch 7px. */ .the>.cn-tab,.the>.dh-nguon,.the>.ct-tab,#hd-tab>.ct-tab, #kho-ngan>.kho-ngan{padding-left:3px;padding-right:3px} /* ---------- ô nhập ---------- */ .o{width:100%;padding:7px 11px;border:1px solid var(--n300);border-radius:var(--r-o); background:var(--n0);color:var(--chu);transition:border-color .12s,box-shadow .12s} .o::placeholder{color:var(--n400)} .o:hover:not(:focus){border-color:var(--n400)} .o:focus{outline:none;border-color:var(--c500);box-shadow:var(--vong)} select.o{cursor:pointer} /* Ô tìm và ô lọc ở thanh công cụ đầu màn. Chiều rộng để ở đây chứ không đặt trong style nội tuyến từng chỗ — nội tuyến thì luật cho điện thoại không đè được, ô tìm cứ kẹt ở 230px giữa màn hình rộng 390px. */ /* ---------- ô tìm của màn danh sách ---------- Dáng theo KiotViet (anh Trọng 13/09: "ô rất vừa phải, cũng rất thuận tiện khi sử dụng nếu cần đến"), đo tại ecopakvn.kiotviet.vn: một ô bo tròn vừa phải, kính lúp nằm TRONG ô bên trái, đặt ở đầu vùng nội dung. Kính lúp vẽ bằng ảnh nền SVG nội tuyến chứ không thêm thẻ — như vậy mọi màn đang dùng .o-tim tự có, không phải sửa tám chỗ vẽ. KHÁC KIOTVIET MỘT ĐIỂM, CÓ CHỦ Ý: họ có nút mở bảng ba ô tìm riêng (theo mã hoá đơn / theo hàng / theo khách). Mình KHÔNG làm, vì ô tìm của mình vốn đã nhận nhiều mảnh rời và quét cùng lúc mã, tên, MST, điện thoại, email, địa chỉ — gõ "anh An 379" ra đúng một dòng. Ba ô riêng là cách giải bài toán mà mình không có. Anh cần tìm theo từng trường riêng thì nói, em thêm sau. */ /* CHỈNH 13/09 (lượt 2) — anh Trọng: "khung tìm kiếm cần tinh chỉnh cho đẹp hơn". ĐO LẠI TRÊN KIOTVIET: ô của họ cao 31px, BO 8px (không phải viên thuốc), viền 1px #d1d5da, nền trắng, chữ 14px, chừa trái 29px cho kính lúp. Bản mình trước đó bo 999px — viên thuốc đứng cạnh thẻ góc vuông và các nút bo 8px nhìn lạc kiểu; đó là chỗ "chưa đẹp". Giữ 330px theo yêu cầu trước, cao 32px, kính lúp mảnh hơn (1.8) và nhạt đi khi chưa gõ, đậm lại khi đang gõ. */ .o-tim{width:330px;max-width:100%;height:32px; padding:6px 12px 6px 32px;border-radius:8px;font-size:13.5px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b969e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:11px 50%;background-size:15px 15px} .o-tim:focus{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6a8f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E")} .o-tim::-webkit-search-cancel-button{cursor:pointer} @media(max-width:900px){ .o-tim{width:100%} } .o-loc{max-width:200px} /* ---------- ô tìm + thanh đầu màn danh sách (312 — anh Trọng chốt 03/10/2026) ---------- "Khung tìm kiếm trên cùng làm chiều cao nhỏ lại, chỉ cần bằng đúng cái khung tìm kiếm, cho nó nổi bật một chút". Đo trước: thẻ riêng cao 56–58px (Đơn hàng, Báo giá, Giao hàng, Công nợ, Cơ hội) trong khi ô tìm chỉ 32px. • Ô tìm: cao 36px, viền xanh, bóng nhẹ — áp cho MỌI ô .o-tim. • Thẻ chỉ chứa mỗi thanh tiêu đề (.bg-thanh / .the-dau là con duy nhất, có ô tìm) thì bỏ khung thẻ: còn đúng một hàng cao bằng ô tìm. Màn mà thanh nằm chung thẻ với bảng (Khách hàng, Việc, Hàng hoá, Hợp đồng) giữ khung — thanh đó không tốn thêm thẻ. */ .o-tim{height:36px;border:1.5px solid #8fb0c8;border-radius:10px;background-color:var(--n0); box-shadow:0 1px 2px rgba(16,40,64,.08),0 0 0 3px rgba(47,88,115,.06);font-size:14px; padding-left:34px;background-position:12px 50%} .o-tim:focus{border-color:var(--chinh)} .the:has(> .bg-thanh:only-child > .o-tim),.the:has(> .the-dau:only-child > .o-tim){ background:transparent;border:0;box-shadow:none;border-radius:0} .the > .bg-thanh:only-child:has(> .o-tim),.the > .the-dau:only-child:has(> .o-tim){ padding:0;min-height:0;border:0;background:transparent;align-items:center} .the > .bg-thanh:only-child:has(> .o-tim) > b:first-child, .the > .the-dau:only-child:has(> .o-tim) > h2{font-size:17px;letter-spacing:-.2px} @media (min-width:901px){ .the > .bg-thanh:only-child > .o-tim,.the > .the-dau:only-child > .o-tim{width:440px} } /* Điện thoại: tên màn + nút Lọc + Tải lại chung MỘT hàng, ô tìm trọn hàng dưới (trước xếp 4 hàng). */ @media (max-width:900px){ .the > .bg-thanh:only-child:has(> .o-tim) > *,.the > .the-dau:only-child:has(> .o-tim) > *{order:1;flex:0 1 auto;min-width:0;margin-left:0} .the > .bg-thanh:only-child:has(> .o-tim) > .day.xa,.the > .the-dau:only-child:has(> .o-tim) > .day.xa{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap} .the > .bg-thanh:only-child:has(> .o-tim) > b:first-child,.the > .the-dau:only-child:has(> .o-tim) > h2{flex:1 1 auto} .the > .bg-thanh:only-child:has(> .o-tim) > .o-tim,.the > .the-dau:only-child:has(> .o-tim) > .o-tim{order:2;flex:1 1 100%} } /* CHUẨN NHÃN NHỎ — chốt 13/09/2026, đo từ KiotViet: KHÔNG in hoa, KHÔNG giãn chữ, và phân biệt bằng ĐỘ ĐẬM chứ không bằng cỡ. · nhãn trường / nhãn cột 12px / 500 · tiêu đề nhóm, tiêu đề khối 12px / 600 · tem, chú thích 11px / 500 Trước đó mười nơi cùng dùng 10–10.5px/700 IN HOA giãn .05–.1em: cỡ 10.5 in hoa là cỡ khó đọc nhất trong cả màn (dấu tiếng Việt chồng lên nhau), mà lại đậm hơn chính nội dung nó chú thích. Ai thêm nhãn mới thì lấy một trong ba mức trên, đừng đặt cỡ riêng. Ô đánh dấu trong thanh công cụ (vd "Hiện cả hàng ngừng bán") dùng thẻ label nhưng là CÂU ĐỂ ĐỌC, không phải nhãn trường — cỡ 13px. */ .bg-thanh>label{text-transform:none;letter-spacing:0; font-size:13px;font-weight:500;color:var(--chu);margin-bottom:0} label{display:block;font-size:12px;font-weight:500;color:var(--chu-mo);margin-bottom:4px; text-transform:none;letter-spacing:0} .truong{margin-bottom:11px} /* ---------- SỬA TẠI CHỖ: rời ô là lưu ---------- */ .oi{ width:100%;border:1px solid transparent;background:transparent;border-radius:var(--r-nho); padding:5px 7px;margin:-5px -7px;font:inherit;color:inherit;transition:background .1s,border-color .1s; } .oi:hover{background:var(--n100)} .oi:focus{outline:none;background:var(--n0);border-color:var(--c500);box-shadow:var(--vong)} select.oi{cursor:pointer;appearance:none;padding-right:20px; background-image:linear-gradient(45deg,transparent 50%,var(--n400) 50%),linear-gradient(135deg,var(--n400) 50%,transparent 50%); background-position:calc(100% - 11px) 52%,calc(100% - 7px) 52%; background-size:4px 4px,4px 4px;background-repeat:no-repeat} textarea.oi{resize:vertical;min-height:52px} /* Ô tiêu đề: textarea nhưng cao theo nội dung, không kéo tay, không thanh cuộn. */ textarea.oi.oi-1dong{resize:none;overflow:hidden;min-height:0;line-height:1.3;white-space:pre-wrap} .oi.dang-luu{background:#fff8e3;border-color:#e7cd80} .oi.da-luu{background:var(--tt-luc-n);border-color:#a6d7bb;transition:background .6s,border-color .6s} .oi.loi-luu{background:var(--tt-do-n);border-color:#e9b4b6} .oi-trong::placeholder{color:var(--chu-nhat);font-style:italic} /* ---------- bảng ---------- Chữ số đều chiều rộng cho toàn bộ bảng: cột tiền và cột ngày thẳng hàng theo chiều dọc, soi lệch một chữ số là thấy ngay. */ .cuon{overflow-x:auto} table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} /* MẬT ĐỘ BẢNG — chỉnh ngày 05/09/2026 sau khi ĐO KiotViet. Số đo thật, cùng một trình duyệt, cùng mức thu phóng 100%: KiotViet CRM (trước) CRM (giờ) cỡ chữ ô 14px 14px 13.5px đệm ô 10px 0 10px 5px 9px 13px 6px 10px cao một dòng 20px 21px 18px CAO MỘT HÀNG ~40px 59px ~44px Điều bất ngờ khi đo: CỠ CHỮ HAI BÊN GẦN NHƯ BẰNG NHAU. Thứ làm bảng của mình trông to và thưa hơn hẳn là CHIỀU CAO HÀNG — 59px so với 40px. Hai nguyên nhân: đệm dọc 9px thay vì 6px, và nhiều ô của mình xếp hai dòng (tên + mã bên dưới, ngày + "x ngày trước"). Nên chỗ sửa chính là đệm và dòng phụ, không phải cỡ chữ. Cỡ chữ chỉ hạ nửa điểm để lấy thêm bề ngang — màn khách giờ chọn được tới 23 cột. Đổi ở đây là đổi MỌI bảng trong CRM, cố ý: báo giá, đơn hàng, công nợ cùng một mật độ thì mắt không phải chỉnh lại mỗi lần đổi màn. */ th,td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--vien); white-space:nowrap;vertical-align:middle;font-size:13.5px;line-height:18px} /* Đầu bảng — chỉnh 13/09/2026 theo số đo thật của KiotViet (th 12px/600, KHÔNG in hoa, không giãn chữ). Bản cũ 10.5px/700 IN HOA giãn .4px vừa nhỏ vừa nặng: chữ hoa cỡ 10.5 khó đọc nhất trong bảng, mà lại đậm hơn cả dữ liệu bên dưới nó. */ th{font-size:12px;text-transform:none;letter-spacing:0;color:var(--chu-mo); background:var(--n25);font-weight:600;border-bottom:1px solid var(--n300); padding-top:7px;padding-bottom:7px} /* Dòng phụ trong ô (mã khách, "x ngày trước"). Nhỏ và sát hơn .mo chung: nó là chú thích của ô, không phải một dòng dữ liệu thứ hai. */ td .mo{font-size:11px;line-height:15px} /* Chữ đậm trong ô bảng: 700 → 600 (13/09/2026). Mã đơn, tên khách, số tiền đều bọc , mà 700 cạnh 400 là chênh quá gắt — cả bảng trông như đang gạch chân mọi thứ. */ td b,th b{font-weight:600} tbody tr{cursor:pointer;transition:background .1s} tbody tr:hover{background:var(--c25)} td.dai{white-space:normal;min-width:210px} .phai{text-align:right} tbody tr:last-child td{border-bottom:0} /* ---------- kanban ---------- */ #kanban{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 10px;align-items:flex-start} .cot{flex:0 0 262px;background:var(--n100);border:1px solid var(--n200);border-radius:var(--r); padding:9px;min-height:110px;transition:background .12s,box-shadow .12s} .cot.keo{background:var(--c50);box-shadow:inset 0 0 0 2px var(--c500)} .cot-dau{display:flex;align-items:center;gap:7px;margin-bottom:2px;font-weight:700;font-size:12.5px} .cot-dau .cham-gd{width:8px;height:8px;border-radius:50%;flex:0 0 8px} .cot-dau .sl{color:var(--chu-mo);font-weight:600} .cot-tong{font-size:11px;color:var(--chu-mo);font-weight:600;margin:2px 0 9px;font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} /* Số theo xác suất đứng sau số thô và nhạt hơn một bậc: nó là số phái sinh, không được nặng ngang số tiền đang thật nằm trong cột. */ .cot-tong-ts{font-weight:500;opacity:.72;cursor:help} .the-ch{background:var(--n0);border:1px solid var(--vien);border-radius:9px;padding:9px 10px;margin-bottom:7px; box-shadow:var(--bong);cursor:pointer;transition:box-shadow .12s,border-color .12s} .the-ch:hover{box-shadow:var(--bong-nhe);border-color:var(--n300)} .the-ch.dang-keo{opacity:.4} .the-ch.moi-roi{animation:roi .5s ease} @keyframes roi{0%{box-shadow:0 0 0 3px var(--c100)}100%{box-shadow:var(--bong)}} .the-ch b{display:block;font-size:13px;font-weight:650;margin-bottom:2px;line-height:1.35} .the-ch small{color:var(--chu-mo);display:block;font-size:11.5px} .the-ch .chan{display:flex;align-items:center;gap:6px;margin-top:6px} .the-ch .tien{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums} /* chấm bước tiếp theo */ .cham{width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block} .cham-do{background:var(--do)} .cham-cam{background:#e08c11} .cham-xanh{background:#1f9d5c} .cham-xam{background:var(--n400);box-shadow:inset 0 0 0 2px var(--n0),0 0 0 1px var(--n400)} .buoc-text{font-size:11px;color:var(--chu-mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ngủ quên — viền đỏ bên trái + tem số ngày im (di trú 027, đề xuất 1.2) */ .the-ch{position:relative} .the-ch.ngu-quen{border-left:3px solid var(--do);background:color-mix(in srgb,var(--do) 6%,var(--n0))} .the-ch .tem-ngu{position:absolute;top:7px;right:8px;font-size:11px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--do);background:color-mix(in srgb,var(--do) 12%,var(--n0));padding:1px 6px;border-radius:4px} .the-ch.ngu-quen b{padding-right:74px} /* Tem "Đã lưu trữ" (di trú 081) — KHÔNG chồng lên tem ngủ quên: một thẻ đã cất đi thì tính ngủ quên hết nghĩa, và máy chủ cũng không đếm nó vào ô ngủ quên nữa. Đặt cùng chỗ, màu xám để đọc là biết "không phải cảnh báo, chỉ là trạng thái". */ .the-ch .tem-luu-tru{position:absolute;top:7px;right:8px;font-size:11px;font-weight:600; color:var(--chu-mo);background:var(--n100);border:1px solid var(--vien); padding:1px 6px;border-radius:4px} .the-ch:has(.tem-luu-tru) b{padding-right:74px} .cot-dau .ngu-dem{color:var(--do);font-size:11px;margin-left:auto} /* nút → cột kế: một chạm thay cho kéo thả, cần nhất trên điện thoại */ .the-ke{border:1px solid var(--vien);background:var(--n0);color:var(--chu-mo);border-radius:6px;width:24px;height:22px; font-size:13px;line-height:1;padding:0;cursor:pointer;flex:0 0 auto;opacity:.55} .the-ch:hover .the-ke,.the-ke:focus-visible{opacity:1;color:var(--c700);border-color:var(--c500)} @media(pointer:coarse){.the-ke{opacity:1;width:30px;height:28px;font-size:15px}} .canh-ngu{background:color-mix(in srgb,var(--do) 8%,var(--n0));border:1px solid color-mix(in srgb,var(--do) 35%,transparent); border-left:3px solid var(--do);padding:9px 12px;font-size:13px;line-height:1.5;margin-bottom:14px;border-radius:6px} /* Hôm nay của tôi */ .hn-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px} .hn-khoi{min-width:0} .hn-dau{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:13px} .hn-dong{padding:6px 0;border-bottom:1px solid var(--vien);cursor:pointer} .hn-dong:last-child{border-bottom:0} .hn-dong b{font-size:13px;display:block;line-height:1.35} .hn-dong:hover b{color:var(--c700)} /* đợt B (10/09/2026) — thẻ "Đang kẹt" trên bảng điều khiển */ .the.ket{border-color:#e9b4b6} .the.ket .the-dau{background:var(--tt-do-n);border-bottom-color:#e9b4b6;border-radius:var(--r) var(--r) 0 0} .the.ket .the-dau h2{color:var(--tt-do-c)} .ket-tien{font-variant-numeric:tabular-nums;font-weight:600;color:var(--chu)} .ket-tre{color:var(--do);font-weight:600} /* đợt C (10/09/2026) — thẻ "Việc của từng bộ phận" + hạn mức */ .vb-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--vien);cursor:pointer} .vb-dong:last-child{border-bottom:0} .vb-dong b{font-size:13px;font-weight:500;color:var(--chu)} .vb-dong .so{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px;min-width:28px;text-align:right} .vb-dong:hover b{color:var(--c700)} .vb-dong.rong{cursor:default} .vb-dong.rong:hover b,.vb-dong.rong b,.vb-dong.rong .so{color:var(--chu-nhat)} .vb-dong.do .so{color:var(--do)} .vb-dong.cam .so{color:var(--cam)} /* dòng xổ danh sách việc */ .vb-nhom{border-bottom:1px solid var(--vien)} .vb-nhom .vb-dong{border-bottom:0} .vb-nhom:last-child{border-bottom:0} .vb-dong.mo-xo b{color:var(--c700)} .vb-con{padding:0 0 8px 10px;border-left:2px solid var(--c100);margin:0 0 6px 4px} .vb-muc{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:4px 0 4px 8px;cursor:pointer;font-size:12.5px;border-radius:6px} .vb-muc:hover{background:var(--c25)} .vb-muc b{font-weight:600;color:var(--c700)} .vb-muc .mo{font-size:12px} .vb-vai{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--chu-mo)} .hm-bang{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 2px} .hm-bang td{padding:5px 0;border-bottom:1px solid var(--vien)} .hm-bang tr:last-child td{border-bottom:0} .hm-bang td.phai{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .hm-bang td.vuot{color:var(--do)} .chip.giai-toa{background:var(--tt-luc-n);color:var(--tt-luc-c);border-color:transparent} /* 208 (27/09/2026) — màn quản lý năm tầng của Bảng điều khiển (bản vẽ anh Trọng duyệt). Chỉ vai quản lý; sales / kho / kế toán vẫn dùng các lớp hn- / vb- ở trên. */ .ql-dau{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 13px} .ql-dau h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.2px} .ql-dau .mo{font-size:13px} .ql-dau .mo.tre{color:var(--do)} .ql-chip{display:inline-flex;gap:4px;margin-left:auto} .ql-chip button{border:1px solid var(--vien);background:var(--n0);border-radius:999px;padding:3px 11px;font:inherit;font-size:12.5px;color:var(--chu-mo);cursor:pointer} .ql-chip button:hover{border-color:var(--c500)} .ql-chip button.on{background:var(--chinh);color:#fff;border-color:var(--chinh)} .ql-tang{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--chinh);color:#fff;font-size:11.5px;font-weight:700;flex:none} .the-dau .ql-phai{margin-left:auto;font:inherit;font-size:12.5px;color:var(--chinh);background:none;border:0;padding:0;cursor:pointer} .the-dau .ql-phai:hover{text-decoration:underline} .ql-kpi{display:grid;grid-template-columns:repeat(4,1fr)} .ql-kpi>div{padding:14px 16px;border-right:1px solid var(--vien);cursor:pointer;min-width:0} .ql-kpi>div:last-child{border-right:0} .ql-kpi>div:hover{background:var(--n50)} .ql-nhan{font-size:12.5px;color:var(--chu-mo)} .ql-so{font-size:24px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums;margin:2px 0} .ql-so small{font-size:14px;font-weight:600;color:var(--chu-mo)} .ql-ss{font-size:12.5px;display:flex;flex-direction:column;gap:1px} .ql-dv{display:block;font-size:11.5px;margin-top:5px;padding-top:5px;border-top:1px dashed var(--vien);font-variant-numeric:tabular-nums} /* 319 — tách theo đơn vị dưới ô tổng */ .ql-ss .len{color:var(--xanh)} .ql-ss .xuong{color:var(--do)} .ql-thanh{height:6px;border-radius:3px;background:var(--n100);position:relative;margin:6px 0 2px} .ql-thanh i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--chinh)} .ql-thanh.no i{background:#d95f3b} .ql-thanh b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--chu);opacity:.5} .ql-spark{display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:8px} .ql-spark i{flex:1;background:#9db6c8;border-radius:2px 2px 0 0;min-height:2px} .ql-spark i.cuoi{background:var(--chinh)} .ql-dat{display:inline-block;margin-top:4px;font:inherit;font-size:12px;color:var(--chinh);background:none;border:1px dashed var(--chinh);border-radius:6px;padding:1px 7px;cursor:pointer} .ql-hai{display:grid;grid-template-columns:1.15fr 1fr;gap:13px;align-items:start;margin-bottom:13px} .ql-hai.mot{grid-template-columns:1fr} .ql-hai>.the{min-width:0;margin:0} .ql-xl{list-style:none;margin:0;padding:0} .ql-xl>li{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--vien);cursor:pointer} .ql-xl>li:last-child{border-bottom:0} .ql-xl>li:hover{background:var(--n50)} .ql-xl>li[hidden]{display:none} .ql-xl>li.rong{cursor:default} .ql-xl>li.rong:hover{background:none} .ql-xl>li.rong b,.ql-xl>li.rong .ql-gt{color:var(--chu-mo);font-weight:500} .ql-xl>li.mo-xo b{color:var(--c700)} .ql-xl>li.ql-con{display:block;padding:0 16px 10px 34px;cursor:default} .ql-xl>li.ql-con[hidden]{display:none} .ql-xl>li.ql-con:hover{background:none} .ql-cham{width:8px;height:8px;border-radius:50%} .ql-cham.do{background:#c0392b} .ql-cham.cam{background:#d98a1c} .ql-cham.xam{background:#b6c1cc} .ql-xl .t{min-width:0} .ql-xl .t b{font-weight:600} .ql-xl .t div{font-size:12.5px;color:var(--chu-mo)} .ql-gt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .ql-gt small{display:block;font-weight:400;color:var(--chu-mo);font-size:11.5px} .ql-ai{font-size:11.5px;font-weight:500;background:var(--c50);color:var(--chinh);border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap} .ql-chan{font-size:12.5px;color:var(--chu-mo);padding:10px 16px;border-top:1px solid var(--vien)} table.ql-bang{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} table.ql-bang th,table.ql-bang td{padding:8px 10px;border-bottom:1px solid var(--vien);text-align:left} table.ql-bang th{font-size:12px;color:var(--chu-mo);font-weight:600} table.ql-bang th.so,table.ql-bang td.so{text-align:right} table.ql-bang tbody tr:last-child td{border-bottom:0} .ql-loai{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:700;font-size:11.5px} .ql-loai.lA{background:var(--tt-luc-n);color:var(--tt-luc-c)} .ql-loai.lB{background:var(--c50);color:var(--chinh)} .ql-loai.lC{background:var(--tt-vang-n);color:var(--tt-vang-c)} .ql-bar{height:8px;border-radius:4px;background:var(--n100);position:relative;min-width:64px} .ql-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--chinh)} .ql-pill{font-size:12px;border-radius:999px;padding:1px 8px;white-space:nowrap} .ql-pill.do{background:var(--tt-do-n);color:var(--tt-do-c)} .ql-pill.xanh{background:var(--tt-luc-n);color:var(--tt-luc-c)} .ql-pill.vang{background:var(--tt-vang-n);color:var(--tt-vang-c)} .ql-cot12{display:flex;align-items:flex-end;gap:6px;height:170px;padding:12px 16px 0} .ql-cot12>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0} .ql-cot12 span{font-size:10.5px;color:var(--chu-mo);margin-bottom:3px;white-space:nowrap} .ql-cot12 i{width:70%;background:#9db6c8;border-radius:3px 3px 0 0} .ql-cot12 i.cuoi{background:var(--chinh)} .ql-thang12{display:flex;gap:6px;padding:4px 16px 12px} .ql-thang12>div{flex:1;text-align:center;font-size:11px;color:var(--chu-mo)} .ql-pheu{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--vien)} .ql-pheu>div{background:var(--n0);padding:10px 14px;cursor:pointer} .ql-pheu>div:hover{background:var(--n50)} .ql-pheu b{font-size:17px} @media(max-width:900px){ .ql-kpi{grid-template-columns:1fr 1fr!important} .ql-kpi>div:nth-child(2n){border-right:0} .ql-kpi>div:nth-child(-n+2){border-bottom:1px solid var(--vien)} .ql-hai{grid-template-columns:1fr} .ql-pheu{grid-template-columns:1fr 1fr!important} .ql-chip{margin-left:0} } /* báo cáo phễu */ .bc-pheu-thanh{display:flex;align-items:flex-end;gap:6px;height:150px;padding:0 4px} .bc-pheu-thanh .cot-pheu{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0} .bc-pheu-thanh .cot-pheu i{display:block;width:100%;border-radius:4px 4px 0 0;min-height:2px} .bc-pheu-thanh .cot-pheu small{font-size:11px;color:var(--chu-mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .bc-pheu-thanh .cot-pheu b{font-size:12.5px;font-variant-numeric:tabular-nums} .bc-nhac{background:var(--n100);border-left:3px solid var(--cam);padding:9px 12px;font-size:12.5px;line-height:1.5;border-radius:6px;margin-bottom:10px} /* đợt 5 — vùng thả THẮNG / THUA khi kéo (Pipedrive), ngày chốt trễ, + đầu cột, cảnh báo trùng */ #vung-dong{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 16px;z-index:60; background:color-mix(in srgb,var(--n900) 82%,transparent);backdrop-filter:blur(4px)} .vung-tha{flex:1;height:64px;border:2px dashed rgba(255,255,255,.55);border-radius:10px;display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;letter-spacing:.08em;font-size:14px;transition:background .12s,transform .12s} .vung-tha.thang.keo{background:#1f9d5c;border-color:#1f9d5c;transform:scale(1.02)} .vung-tha.thua.keo{background:var(--do);border-color:var(--do);transform:scale(1.02)} /* Hai ô thêm 13/09/2026 (di trú 081). Màu KHÁC hẳn thắng/thua vì đây không phải kết quả bán hàng mà là việc dọn dẹp: lưu trữ xám trung tính, xoá nâu sẫm — đủ nghiêm để tay ngập ngừng, không đỏ chói tranh chỗ với THUA ngay bên cạnh. */ .vung-tha.luu_tru.keo{background:#64748b;border-color:#64748b;transform:scale(1.02)} .vung-tha.xoa.keo{background:#7f1d1d;border-color:#7f1d1d;transform:scale(1.02)} /* Bảng thùng rác cơ hội (di trú 081). Cột đầu NHẬN HẾT chỗ thừa, hai cột sau co về đúng nội dung — để nút "Khôi phục" luôn nằm trong khung hộp. Bản đầu bày 7 cột và nút bị đẩy ra ngoài, phải cuộn ngang mới thấy: đo trên màn thật mới lộ. */ .tr-bang{width:100%;table-layout:auto} .tr-bang td:first-child{width:100%} .tr-bang td,.tr-bang th{vertical-align:top} .chot-tre{color:var(--do);font-weight:600} .cot-dau .cot-them{margin-left:auto;border:1px solid var(--vien);background:var(--n0);color:var(--chu-mo);border-radius:6px; width:22px;height:20px;font-size:14px;line-height:1;padding:0;cursor:pointer;opacity:0} .cot:hover .cot-them,.cot-them:focus-visible{opacity:1} .cot-dau .ngu-dem+.cot-them{margin-left:6px} @media(pointer:coarse){.cot-dau .cot-them{opacity:1}} .canh-trung{margin-top:6px;padding:8px 11px;background:color-mix(in srgb,var(--cam) 12%,var(--n0));border-left:3px solid var(--cam); border-radius:6px;font-size:12.5px;line-height:1.5} .canh-trung a{color:var(--c700);text-decoration:underline dotted} .tuoi-ch{display:flex;flex-wrap:wrap;gap:4px 0;font-size:12px;margin:-6px 0 12px} .tuoi-ch span+span::before{content:'·';margin:0 7px;color:var(--n400)} .doi-han a{color:var(--c700);text-decoration:underline dotted;text-underline-offset:2px} /* ---------- dòng thời gian ---------- */ .dtg{list-style:none;margin:0;padding:0} .dtg li{position:relative;padding:0 0 13px 18px;border-left:2px solid var(--vien)} .dtg li:last-child{border-left-color:transparent;padding-bottom:0} .dtg li::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px; border-radius:50%;background:var(--chinh);box-shadow:0 0 0 2px var(--n0)} .dtg li.l-goi::before{background:#1f9d5c} .dtg li.l-dong::before{background:var(--tim)} .dtg li.l-doi_giai_doan::before{background:#e08c11} .dtg .khi{font-size:11px;color:var(--chu-nhat)} .dtg .nd{margin-top:1px} /* ---------- ngăn kéo ---------- */ /* .lop-phu: nền mờ của MỖI lớp trong ngăn xếp hộp (di trú 105). Lớp trên cùng có z-index cao hơn, đặt bằng JS ở moLop(). */ #phu,.lop-phu{position:fixed;inset:0;background:rgba(16,24,40,.36);z-index:60;opacity:0;transition:opacity .16s} #phu.hien,.lop-phu.hien{opacity:1} .ngan{position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);background:var(--n0);z-index:61; box-shadow:var(--bong-cao);display:flex;flex-direction:column; transform:translateX(100%);transition:transform .2s cubic-bezier(.3,.8,.4,1)} .ngan.hien{transform:none} .ngan-dau{padding:12px 16px;border-bottom:1px solid var(--vien);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ngan-dau h2,.ngan-dau h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.1px} .ngan-than{padding:16px;overflow:auto;flex:1;background:var(--n25)} .ngan-chan{padding:11px 16px;border-top:1px solid var(--vien);display:flex;gap:8px;align-items:center;background:var(--n0)} /* hộp thoại giữa màn hình */ .hop{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);width:min(620px,calc(100% - 28px)); background:var(--n0);border-radius:14px;box-shadow:var(--bong-cao);z-index:62;opacity:0; transition:opacity .14s,transform .14s;max-height:calc(100vh - 60px);display:flex;flex-direction:column} .hop.hien{opacity:1;transform:translate(-50%,-50%)} .hop-dau{padding:14px 18px;border-bottom:1px solid var(--vien);display:flex;align-items:center;gap:10px} .hop-dau h3{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.1px} .hop-than{padding:18px;overflow:auto} .hop-chan{padding:12px 18px;border-top:1px solid var(--vien);display:flex;gap:8px;justify-content:flex-end; background:var(--n25);border-radius:0 0 14px 14px} /* Chân hộp chi tiết việc: các nút thao tác, luôn nhìn thấy, tự xuống dòng khi hẹp. Nút chính (Bắt đầu làm / Báo xong) đứng đầu. */ .hop-chan.v-hop-tac{justify-content:flex-start;flex-wrap:wrap} /* Nút phân đoạn "Đang chạy | Đã kết thúc" của bảng quy trình (18/09/2026) — thay ô tích cũ, để hồ sơ đã huỷ có một chỗ đứng nhìn thấy được. */ .qt-doan{display:inline-flex;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden} .qt-doan button{border:0;background:var(--n0);padding:6px 12px;font:inherit;font-size:13px;color:var(--chu-mo);cursor:pointer} .qt-doan button + button{border-left:1px solid var(--vien)} .qt-doan button.hoat{background:var(--c50);color:var(--c700);font-weight:600} /* Chi tiết việc ở khung hẹp (đo 18/09/2026, khung 400px): thanh tiến độ và thanh kéo không co được nên đẩy cả cột rộng ra 547px trong ô 347px. Cho xuống dòng và co theo bề ngang màn — sửa cho cả hộp lẫn trang. */ .v-ct > div{min-width:0} .v-td-lon{flex-wrap:wrap} @media(max-width:760px){ .v-td-lon .v-thanh,.v-td-lon input[type=range]{width:min(200px,44vw)} } .hop-chan.v-hop-tac .nut{white-space:nowrap} .hop .v-ct{margin-top:12px} .hop .v-dau h2{font-size:16px} /* ---------- nút đóng ✕ (311 — anh Trọng chốt 03/10/2026) ---------- MỘT nơi định nghĩa ✕ cho hộp thoại, khung xem in và tờ đang soạn (đơn, báo giá). Ký tự × trong nút giữ cho máy đọc màn hình; hình vẽ bằng mask SVG nên nét đều, không phụ thuộc phông. 36×36, điện thoại 40×40. Xám trung tính — đóng không phải xoá; đang soạn dở thì luiVe() hỏi trước. Ghim góc trên bên phải ở hai chỗ: thanh đầu thẻ 1 của tờ soạn (.bg-thanh) và đầu hộp có thanh nút xuống dòng (.dong-x.goc) — để nó không trôi theo hàng chip / hàng nút khi khung hẹp. */ .dong-x{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0; border:0;border-radius:8px;background:transparent;color:var(--chu-mo); font-size:0;line-height:0;cursor:pointer} .dong-x::before{content:"";width:20px;height:20px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/20px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/20px 20px no-repeat} .dong-x:hover{background:var(--n100);color:var(--n900)} .dong-x:active{background:var(--n200)} .bg-thanh:has(>.dong-x),.hop-dau:has(>.dong-x.goc){position:relative;padding-right:56px} .bg-thanh>.dong-x{position:absolute;top:4px;right:8px;margin:0} .dong-x.goc{position:absolute;top:8px;right:8px;margin:0} /* ---------- gợi ý (hộp sổ xuống của ô tìm khách/hàng) ---------- ĐỪNG đặt lại lớp .goi-y ở chỗ khác trong tệp này. Trước 10/09 có một khối "Ghi chú KiotViet" cũng dùng .goi-y và đặt display:flex — nó đè lên hộp gợi ý, làm danh sách khách hàng sổ NGANG thay vì sổ dọc (anh Trọng bắt lỗi 10/09). Khối đó nay là .goi-y-nhac. */ .goi-y{position:absolute;z-index:70;background:var(--n0);border:1px solid var(--n200); border-radius:var(--r);box-shadow:var(--bong-cao);overflow:hidden;min-width:260px;max-height:300px;overflow-y:auto} .goi-y div{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--n100)} .goi-y div:last-child{border-bottom:0} .goi-y div:hover,.goi-y div.chon{background:var(--c50)} .goi-y small{display:block;color:var(--chu-mo);font-size:11px} .goi-y .them{color:var(--chinh);font-weight:600} /* ---------- ô chọn có gõ tìm (tỉnh/thành, phường/xã) ---------- Sau sáp nhập còn 34 tỉnh/thành nhưng mỗi tỉnh hàng trăm phường/xã — sổ xuống rồi kéo tay không ra. Ô gõ úp lên bị ẩn nhưng VẪN là nơi duy nhất giữ giá trị, nên bộ tự lưu .oi không đổi gì. Vì