/* ===================================================================== TTP VẬN HÀNH — bảng điều khiển vận hành Nguyên tắc: dày đặc thông tin, mã đơn luôn ở font đẳng cự, mỗi dòng có thanh SLA bên trái để quét bằng mắt. ===================================================================*/ :root{ --ink:#12161C; --ink-2:#1A212B; --ink-3:#2A3442; --paper:#F4F6F8; --surface:#FFFFFF; --line:#DCE2E8; --text:#1B2430; --text-2:#5A6675; --text-3:#8C96A3; --primary:#0F5F6B; --primary-d:#0B474F; --ok:#1B7A4B; --run:#1F5FA8; --new:#5A6675; --warn:#A96500; --bad:#B3261E; --hl:#D4A72C; --r:8px; --sh:0 1px 2px rgba(16,24,32,.06), 0 8px 24px -18px rgba(16,24,32,.35); --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace; --sans:"Roboto",Arial,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--sans);background:var(--paper);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} code,.mono,.num{font-family:var(--mono);font-size:.92em} code{background:#EDF1F4;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:#25303D} .muted{color:var(--text-3)} .nowrap{white-space:nowrap} .ta-r{text-align:right} :focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* ---------- Thanh bên ---------- */ .side{position:fixed;inset:0 auto 0 0;width:232px;background:var(--ink);color:#C9D2DC;display:flex;flex-direction:column;z-index:20;transition:width .16s ease} .brand{display:flex;align-items:center;gap:9px;padding:18px 14px 14px 18px} .brand .mark{font-family:var(--mono);font-weight:700;letter-spacing:.06em;background:var(--primary);color:#fff;padding:4px 8px;border-radius:5px;font-size:13px;flex:0 0 auto} .brand .bname{font-weight:600;letter-spacing:.14em;font-size:12px;color:#EAF0F5;white-space:nowrap;overflow:hidden} .navcollapse{ display:none;margin-left:auto;flex:0 0 auto;width:24px;height:24px;border-radius:6px; border:1px solid #2A3442;background:transparent;color:#9AA7B5;font-size:12px;line-height:1; align-items:center;justify-content:center;cursor:pointer; } .navcollapse:hover{color:#fff;border-color:#3A4756;background:var(--ink-2)} .side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 10px 16px} .navgroup{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#697786;padding:16px 8px 6px;white-space:nowrap;overflow:hidden} .nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:#C9D2DC;font-size:13.5px;white-space:nowrap} .nav:hover{background:var(--ink-2);text-decoration:none;color:#fff} .nav.on{background:var(--ink-3);color:#fff;box-shadow:inset 3px 0 0 var(--primary)} .nav-ic{ display:none;flex:0 0 auto;width:24px;height:24px;border-radius:6px;background:var(--ink-3); color:#EAF0F5;align-items:center;justify-content:center;font-size:11.5px;font-weight:700; font-family:var(--mono);line-height:1; } .nav.on .nav-ic{background:var(--primary)} .nav-tx{overflow:hidden;text-overflow:ellipsis} .me{border-top:1px solid #232C37;padding:14px 18px;display:flex;align-items:center;gap:10px} .me-avatar{ flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--mono); } .me-info{min-width:0;overflow:hidden} .me-name{color:#EAF0F5;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me-role{font-size:12px;color:#8B97A5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me-org{font-size:12px;color:#697786;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .signout{display:inline-block;margin-top:8px;font-size:12px;color:#9AA7B5} /* ---------- Menu thu gọn (chỉ áp dụng khi thanh bên đang cố định, màn hình rộng) ---------- */ @media (min-width:901px){ .navcollapse{display:flex} body.nav-collapsed .side{width:64px} body.nav-collapsed .main{margin-left:64px} body.nav-collapsed .brand{flex-direction:column;gap:10px;padding:16px 0} body.nav-collapsed .brand .bname{display:none} body.nav-collapsed .navgroup, body.nav-collapsed .nav-tx, body.nav-collapsed .me-info{display:none} body.nav-collapsed .nav{justify-content:center;padding:8px} body.nav-collapsed .nav-ic{display:flex} body.nav-collapsed .me{justify-content:center;padding:14px 8px} } /* ---------- Vùng nội dung ---------- */ .main{margin-left:232px;padding:0 22px 60px;max-width:1500px;transition:margin-left .16s ease} .top{display:flex;align-items:center;gap:12px;padding:20px 0 12px;position:sticky;top:0;background:var(--paper);z-index:10} .top .push{margin-left:auto} .top h1{font-size:20px;margin:0;letter-spacing:-.01em} .burger{display:none;font-size:20px;cursor:pointer} .pagenote{color:var(--text-2);margin:0 0 14px} /* ---------- Chuông thông báo ---------- */ .bell{position:relative;font-size:19px;line-height:1;color:var(--text-2);display:inline-flex;padding:4px} .bell:hover{text-decoration:none;color:var(--primary)} .bell.on{color:var(--primary)} .belldot{ position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 3px;border-radius:20px; background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center; font-family:var(--mono);border:2px solid var(--paper); } .bn-belldot{position:absolute;top:-4px;right:-8px;min-width:14px;height:14px;padding:0 3px;border-radius:20px; background:var(--bad);color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center; font-family:var(--mono);border:2px solid var(--ink)} .bn-i{position:relative} /* ---------- Hộp thông báo ---------- */ .notiflist{display:flex;flex-direction:column;gap:6px} .notifitem{margin:0} .notiflink{ width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line); border-radius:8px;background:#fff;font:inherit;font-size:13.5px;color:var(--text);text-align:left;cursor:pointer; } .notiflink:hover{border-color:var(--primary);background:#F7F9FA} .notifitem.unread .notiflink{background:#F0F5F6;border-color:#C9DBDD} .notifdot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--primary)} .notiftext{flex:1;min-width:0} .notiftime{flex:0 0 auto;color:var(--text-3);font-size:12px;font-family:var(--mono)} /* ---------- Bảng cấu hình thông báo ---------- */ .notiftbl td.ta-c,.notiftbl th.ta-c{width:1%} .notiftbl input[type=checkbox]{width:16px;height:16px} /* ---------- Khối ---------- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:18px;padding:16px} .panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap} .panel-h h2{font-size:15px;margin:0;letter-spacing:.01em} .panel-h-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 4px} fieldset:first-of-type{border-top:0;padding-top:0} legend{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:0 0 6px} .note{background:#F0F5F6;border-left:3px solid var(--primary);padding:9px 12px;border-radius:0 6px 6px 0;color:var(--text-2);margin:4px 0 12px;font-size:13px} .lockednotice{background:#FDF2E2;border-left:3px solid var(--warn);padding:9px 12px;border-radius:0 6px 6px 0;color:#7A5A17;margin:0 0 16px;font-size:13px;font-weight:600} .hlnotice{background:#FEF9E7;border-left:3px solid var(--hl,#D4A72C);padding:9px 12px;border-radius:0 6px 6px 0;color:#7A5A00;margin:0 0 16px;font-size:13px;font-weight:600} .panel-hl{outline:2px solid var(--hl,#D4A72C);outline-offset:-1px} /* ---------- Thẻ số liệu ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:20px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh);color:inherit} .card:hover{text-decoration:none;border-color:var(--primary)} .card-h{font-size:12.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em} .card-n{font-family:var(--mono);font-size:30px;font-weight:600;margin:6px 0 10px;letter-spacing:-.02em} .card-split{display:flex;flex-wrap:wrap;gap:5px} /* ---------- Bảng ---------- */ .tblwrap{overflow-x:auto;margin:0 -16px} .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFC} .tbl td{padding:9px 10px;border-bottom:1px solid #EDF0F3;vertical-align:middle} /* Đường viền dọc giữa các cột (Hi yêu cầu, ảnh mẫu danh sách Đơn hàng) — áp dụng chung cho MỌI bảng .tbl trong hệ thống để đồng nhất giao diện, không riêng 1 màn hình. Bỏ viền ở cột cuối cùng (không cần viền sát mép phải khung bảng). */ .tbl th:not(:last-child),.tbl td:not(:last-child){border-right:1px solid #EDF0F3} .tbl thead th:not(:last-child){border-right-color:var(--line)} /* Nhiều dòng hơn khung nhìn thì bảng tự cuộn RIÊNG trong khung của nó — kể cả thanh cuộn ngang cũng nằm ngay dưới khung này, không phải kéo hết trang xuống tận cuối (qua cả thanh công cụ, phân trang...) mới thấy được. Đầu bảng dính lại khi cuộn dọc để luôn biết đang xem cột nào. */ @media (min-width:641px){ .tblwrap{max-height:min(72vh, 720px);overflow-y:auto;border:1px solid var(--line);border-radius:8px} .tbl thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line)} } .tblwrap::-webkit-scrollbar{height:11px;width:11px} .tblwrap::-webkit-scrollbar-track{background:#F2F4F6} .tblwrap::-webkit-scrollbar-thumb{background:#C6D2DB;border-radius:20px;border:2px solid #F2F4F6} .tblwrap::-webkit-scrollbar-thumb:hover{background:#AAB8C2} .tblwrap::-webkit-scrollbar-corner{background:#F2F4F6} /* Bản 391: thanh cuộn ngang NỔI bám đáy màn hình (app.js mục 14) + bóng mờ mép bảng báo còn cột bị ẩn */ .hs-float{position:fixed;bottom:0;z-index:900;display:flex;align-items:center;gap:6px;height:30px;padding:0 6px; background:rgba(255,255,255,.96);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0; box-shadow:0 -4px 14px rgba(15,23,42,.10);backdrop-filter:blur(4px);box-sizing:border-box} .hs-float[hidden]{display:none} .hs-rail{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;height:16px} .hs-in{height:1px} .hs-rail::-webkit-scrollbar{height:12px} .hs-rail::-webkit-scrollbar-track{background:#EEF2F5;border-radius:20px} .hs-rail::-webkit-scrollbar-thumb{background:#9FB3C2;border-radius:20px;border:2px solid #EEF2F5} .hs-rail::-webkit-scrollbar-thumb:hover{background:var(--primary)} .hs-nut{flex:0 0 auto;width:26px;height:22px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text-2); font-size:11px;line-height:1;cursor:pointer;padding:0} .hs-nut:hover{border-color:var(--primary);color:var(--primary)} .tblwrap.hs-trai{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px);mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px)} .tblwrap.hs-phai{-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.25),#000 26px);mask-image:linear-gradient(to left,rgba(0,0,0,.25),#000 26px)} .tblwrap.hs-trai.hs-phai{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px,#000 calc(100% - 26px),rgba(0,0,0,.25)); mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px,#000 calc(100% - 26px),rgba(0,0,0,.25))} body.hs-co .fab{bottom:56px} /* nút + nổi không bị thanh cuộn nổi đè */ @media print{.hs-float{display:none!important}} /* Ô chữ dài (Sản phẩm, Địa chỉ, Ghi chú...) rút gọn về đúng một dòng kèm "...", rê chuột để xem đầy đủ (thuộc tính title) — thay vì đẩy hàng cao vọt lên vì tràn xuống nhiều dòng. */ .cell-clamp{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Bản 184: trường khai 'cell_full' (vd Tên sản phẩm) — hiện đủ, tự xuống dòng. */ .cell-full{display:block;min-width:260px;max-width:560px;white-space:normal;overflow-wrap:anywhere;line-height:1.45} .tbl tbody tr:hover{background:#FAFBFC} .tbl td:first-child,.tbl th:first-child{padding-left:16px} .tbl td:last-child,.tbl th:last-child{padding-right:16px} .idlink{font-family:var(--mono);font-weight:600} .empty{text-align:center;color:var(--text-3);padding:34px 10px} /* Thanh SLA bên trái — dấu hiệu nhận biết chính của bảng */ .tbl tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent} tr.sla-late td:first-child{box-shadow:inset 3px 0 0 var(--bad)} tr.sla-due td:first-child{box-shadow:inset 3px 0 0 var(--warn)} tr.sla-ok td:first-child{box-shadow:inset 3px 0 0 #C6D2DB} tr.sla-done td:first-child{box-shadow:inset 3px 0 0 var(--ok)} /* "Đóng khung" cảnh báo — Yêu cầu nhanh đã chuyển kho nhưng chưa được Kế toán kho xử lý (mục 4ae, bản 93). Outline thay vì border vì bảng đang border-collapse:collapse, border trên tr không lên khung được. */ tr.hl-pending{outline:2px solid var(--hl);outline-offset:-2px;position:relative;z-index:1} tr.hl-pending td{background:#FFFBEA} /* Bản 193: Kho vận hành / Đơn hàng — đơn Đã in tô xanh nhạt */ tr.row-dain,tr.row-dain td{background:#E7F4EC} .badge.b-dain{background:#fff;color:#0B5D33;border-color:#8CCBA5;font-weight:700} /* Bản 193 (Hi): bảng Đơn hàng — Kho / Trạng thái hiện chữ trơn, bỏ khung nhãn (giữ màu chữ) */ .tbl-khodh .badge{background:none!important;border-color:transparent!important;padding:0;font-size:13px} .tbl-khodh .badge.b-dain{font-weight:700} /* Bản 193 (Hi): màu phân biệt Sàn ở bảng Đơn hàng */ .san-tag{font-weight:700;white-space:nowrap;color:#5A6675} /* Bản 193 (Hi): dấu tích xanh ở ô danh sách ('cell_tick', vd cột Ưu tiên của Yêu cầu nhanh) */ .cell-tick{display:block;text-align:center;color:#16A34A;font-size:20px;font-weight:700;line-height:1} /* Bản 193 (Hi): Kho vận hành — tiêu đề cột bảng màu đen, đậm, căn giữa */ .kvh .tbl th{color:#111;font-weight:700;text-align:center} /* Bản 193 (Hi): nền tiêu đề cột Kho vận hành — xanh ngọc nhạt theo màu chủ đạo, kẻ đậm phía dưới */ .kvh .tbl thead th{background:#D5E6E9;border-bottom:2px solid var(--primary)} .kvh .tbl thead th:not(:last-child){border-right-color:#B9D3D8} .kvh .tbl thead th.sorted{background:#BFD9DE;color:#111} /* Bản 193 (Hi): tiêu đề cột MỌI bảng trên site giống Kho vận hành — đen, đậm, căn giữa, nền xanh ngọc nhạt, kẻ đậm dưới. Chỉ dòng tiêu đề (thead; th ở thân bảng ma trận giữ nguyên). Trừ bảng chữ to màn Tracking – Bắn mã (.trackingbigtbl) vốn có kiểu riêng cho camera quay màn hình. */ .tbl:not(.trackingbigtbl) thead th{color:#111;font-weight:700;text-align:center;background:#D5E6E9;border-bottom:2px solid var(--primary)} .tbl:not(.trackingbigtbl) thead th:not(:last-child){border-right-color:#B9D3D8} .tbl:not(.trackingbigtbl) thead th.sorted{background:#BFD9DE;color:#111} /* Bản 193 (Hi, theo ảnh mẫu): thanh tìm kiếm/lọc luôn hiện ở Đơn hàng */ /* Bản 193 (Hi): nút mục con (Hàng hoàn nhận / Đối soát hàng hoàn) ở đầu hàng công cụ trang Hàng hoàn */ .subtabs{display:flex;gap:10px;flex-wrap:wrap} .subtab{display:inline-flex;align-items:center;height:36px;padding:0 18px;border:1px solid var(--primary);border-radius:6px;color:var(--primary);font-weight:600;text-decoration:none;background:#fff;white-space:nowrap} .subtab:hover{background:#EEF3F4} .subtab.on{background:var(--primary);color:#fff} /* Bản 193 (Hi): Sản phẩm bán chạy — chọn kỳ dạng nút liền, dòng tổng, top 3 */ .kf-seg{display:inline-flex;flex:none;border:1px solid var(--primary);border-radius:4px;overflow:hidden;height:38px} .kf-seg a{display:inline-flex;align-items:center;padding:0 13px;color:var(--primary);font-weight:600;text-decoration:none;border-left:1px solid var(--primary);white-space:nowrap} .kf-seg a:first-child{border-left:0} .kf-seg a:hover{background:#EEF3F4} .kf-seg a.on{background:var(--primary);color:#fff} .spbc-sum{display:flex;flex-wrap:wrap;gap:8px 28px;padding:10px 16px;border-top:1px solid var(--line);background:#F7FAFA;color:var(--text-2)} .spbc-sum b{color:#111} .spbc-note{padding:6px 16px 10px;background:#F7FAFA;color:var(--text-3);font-size:12.5px} .spbc-tbl tr.spbc-top td{background:#FFF8E6} .spbc-tbl td.ta-c{text-align:center} /* Bản 193 (Hi, ảnh mẫu): thanh tìm kiếm Kho vận hành trên ĐÚNG 1 DÒNG — các ô tự co giãn chia nhau chiều ngang */ .kvh-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;margin:4px 16px 14px;background:#F8FAFC;border:1px solid #CBD5E1;border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)} /* Bản 317: bo thành 1 khối (trước: nền trắng + viền trên) */ @media (max-width:760px){.kvh-filter{margin:4px 8px 12px;padding:10px}} .kvh-filter input,.kvh-filter select{height:38px;min-width:0;border:1px solid #CFD6DD;border-radius:3px;padding:0 8px;font-size:14px;color:#333;background:#fff;box-sizing:border-box} .kvh-filter select{flex:1 1 105px;width:auto;padding:0 4px;cursor:pointer} .kvh-filter .ss-wrap{flex:1.6 1 220px;min-width:180px} /* Bản 390: ô chọn gõ tìm được (vd Sản phẩm) trong thanh lọc */ .kvh-filter .ss-wrap .ss-input{width:100%} .kf-search{display:flex;flex:1.6 1 180px;min-width:0} .kf-search input{flex:1 1 auto;width:auto;border-radius:3px 0 0 3px} .kf-search button{flex:none;width:40px;height:38px;border:1px solid #CFD6DD;border-left:0;border-radius:0 3px 3px 0;background:#fff;color:#222;cursor:pointer;display:grid;place-items:center} .kf-search button:hover{background:#F2F4F6} .kvh-filter .kf-date{flex:1 1 118px;width:auto} .kf-btns{display:flex;gap:4px;flex:none} .kf-btn{height:38px;padding:0 14px;display:inline-flex;align-items:center;border:0;border-radius:2px;background:#3AA0E8;color:#fff!important;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap} .kf-btn:hover{background:#238BD4} @media (max-width:760px){.kf-search,.kvh-filter .kf-date{flex:1 1 100%} .kvh-filter select{flex:1 1 calc(50% - 5px)} .kf-btns{flex:1 1 100%;justify-content:flex-end}} .san-SHOPEE{color:#E0461F} .san-TIKTOK{color:#111827} .san-LAZADA{color:#1D2EA8} .san-WEBSITE{color:#7C3AED} .san-SPX{color:#B45309} .san-VIETTEL{color:#0F766E} .san-BEST{color:#DB2777} .san-KHAC{color:#5A6675} .tbl tbody tr.row-dain:hover,.tbl tbody tr.row-dain:hover td{background:#D9EEE1} /* ---------- Nhãn trạng thái ---------- */ .badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent} .b-ok {background:#E7F4EC;color:var(--ok);border-color:#C6E6D3} .b-run {background:#E9F1FB;color:var(--run);border-color:#CBDEF5} .b-new {background:#EEF1F4;color:var(--new);border-color:#DCE2E8} .b-warn{background:#FDF2E2;color:var(--warn);border-color:#F3DFBE} .b-bad {background:#FCEAE8;color:var(--bad);border-color:#F3CFCB} .b-tim {background:#F1EAFB;color:#6B3FA0;border-color:#DDCDF3} /* Bản 251: tím (vd "Chờ linh kiện" ở Hàng hoàn - Hàng đổi(Kho)) */ .txt-bad{color:var(--bad);font-weight:600} .b-off {background:#F2F4F6;color:var(--text-3);border-color:#E4E8EC} /* Bản 337: 3 màu nhãn rõ (Báo nhập linh kiện) — trắng / vàng / xanh */ .badge.b-trang{background:#fff;color:#334155;border-color:#CBD5E1} .badge.b-vang{background:#FDE68A;color:#713F12;border-color:#F5C518} .badge.b-xanh{background:#BBF7D0;color:#14532D;border-color:#4ADE80} .badge.b-tim{background:#EDE9FE;color:#5B21B6;border-color:#C4B5FD} /* Bản 344 */ /* Bản 344: ô chọn Trạng thái sửa nhanh trên danh sách — dáng nhãn tròn, đủ rộng cho chữ + mũi tên, không bị cắt */ select.o-chon.badge{font-size:12.5px;font-weight:600;padding:4px 22px 4px 10px;border-radius:20px;min-width:128px;max-width:190px;height:auto;line-height:1.3; -webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 7px center;background-size:9px 6px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%2364748B'/%3E%3C/svg%3E")} select.o-chon.badge:not([class*=" b-"]){background-color:#fff;border-color:#CBD5E1;color:#334155} /* Bản 178: "Đơn hủy" — nền sẫm chữ trắng, khác hẳn đỏ "Chưa đóng hàng". */ .b-huy {background:#3A3F45;color:#fff;border-color:#3A3F45} /* Bản 183: "Hết hàng" (Đơn hết hàng) ở Danh sách đơn hàng — tím, khác các nhãn còn lại. */ .b-het {background:#F1EAFB;color:#6B3FA0;border-color:#DCCBF3} /* Nhãn khoá ngoại có màu/kích thước tuỳ chỉnh theo bản ghi (vd Tên kho) — xem Render::styledRefLabel(). Khi chưa đặt Màu sắc, badge.reflabel dùng lại đúng màu trung tính của .b-off; span/b thường không nhãn thì giữ màu chữ mặc định của trang. */ .badge.reflabel:not([style]){background:#F2F4F6;color:var(--text-3);border-color:#E4E8EC} .reflabel-sz-nho{font-size:10.5px} .reflabel-sz-vua{font-size:12.5px} .reflabel-sz-lon{font-size:14.5px} .colorswatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;border:1px solid #0002} /* ---------- Thanh tiến độ ---------- */ .bar{position:relative;background:#EDF0F3;border-radius:20px;height:16px;overflow:hidden;min-width:90px} .bar i{position:absolute;inset:0 auto 0 0;background:var(--primary);border-radius:20px} .bar b{position:relative;display:block;text-align:center;font-family:var(--mono);font-size:10.5px;line-height:16px;color:#fff;mix-blend-mode:difference} /* ---------- Thanh công cụ ---------- */ .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px} .toolbar .push{margin-left:auto} .search{min-width:240px;flex:1 1 240px} /* ---------- Biểu mẫu ---------- */ input,select,textarea{font-family:inherit;font-size:13.5px;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%} input[type=file]{padding:6px;background:#FAFBFC} textarea.url-files{margin-top:6px;font-size:12.5px} input[type=checkbox]{width:auto} textarea{resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(15,95,107,.12)} input[readonly]{background:#F5F7F8;color:var(--text-2)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 14px} .fld{display:flex;flex-direction:column;gap:4px;min-width:0} .fld-full{grid-column:1/-1} .fld label{font-size:12px;font-weight:600;color:var(--text-2)} .fld small{font-size:11.5px;color:var(--text-3)} .fld small.locked{color:var(--warn)} .req{color:var(--bad)} .ro{padding:7px 0;min-height:32px} .input-unit{display:flex;align-items:center;gap:6px} .input-unit input{flex:1;min-width:0} .input-unit .unit,.num+.unit{font-size:11.5px;font-weight:600;color:var(--text-3);white-space:nowrap} .formbar{display:flex;gap:8px;align-items:center;padding-top:14px;margin-top:6px;border-top:1px solid var(--line)} .formbar .push{margin-left:auto} .childform{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px} .childform-collapsed{display:none} .inline{display:inline} .switch{display:inline-flex;align-items:center;cursor:pointer} .switch input{position:absolute;opacity:0} .switch span{width:38px;height:21px;background:#CDD6DE;border-radius:20px;position:relative;transition:.15s} .switch span::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;background:#fff;border-radius:50%;transition:.15s} .switch input:checked + span{background:var(--primary)} .switch input:checked + span::after{transform:translateX(17px)} .switch input:focus-visible + span{box-shadow:0 0 0 3px rgba(15,95,107,.25)} /* bool_ui: checkbox2 — 2 ô vuông "Có"/"Không" loại trừ nhau (Đơn Seeding...) */ .bool2{display:flex;align-items:center;gap:22px;min-height:34px} .chk2{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer} .chk2 input{position:absolute;opacity:0;width:18px;height:18px;margin:0} .chk2 span{width:18px;height:18px;border:2px solid var(--line);border-radius:4px;position:relative;flex:0 0 auto;background:#fff} .chk2 input:checked + span{background:var(--primary);border-color:var(--primary)} .chk2 input:checked + span::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:12px;line-height:14px;text-align:center} .chk2 input:focus-visible + span{box-shadow:0 0 0 3px rgba(15,95,107,.25)} /* form_style: 'rows' — biểu mẫu "1 dòng 1 trường" (nhãn trái, ô nhập phải), đầu mục có thanh xanh nhạt — kiểu chuẩn của toàn hệ thống từ bản có mục "Chỉnh lại toàn bộ giao diện" (đối chiếu theo Yêu cầu nhanh). Dùng cho mọi module khai 'form_style' => 'rows' trong config/modules.php (views/form.php đọc key này), cộng thêm 3 màn hình dựng view riêng: Kho vận hành -> Đơn hàng/Hàng hoàn (views/khodh_form.php, views/khohh_form.php) và Nhân viên (views/user.php) — 3 file này tự in ra đúng khung .formrows/.formrow thay vì đọc config, vì có thêm nút/khối riêng ngoài danh sách trường thường. Thay cho lưới nhiều cột kiểu cũ (.grid/.fld ở trên) — lưới cũ giờ chỉ còn dùng cho các khối phụ chưa chuyển (nếu có). */ .formrows{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px} /* 'form_grid' (opt-in, bản 115) — nhiều khối .formrows xếp dạng lưới co giãn thay vì xếp dọc, đúng bố cục "từng khối" trong ảnh mẫu Sản phẩm. */ .formrows-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-items:start} .formrows-grid .formrows{margin-bottom:0} .formrows-head{display:flex;align-items:center;gap:8px;background:#E1F0F5;color:#175A70;font-weight:700;font-size:14.5px;padding:13px 18px;border-bottom:1px solid var(--line)} .formrow{display:flex;align-items:flex-start;gap:18px;padding:13px 18px;border-bottom:1px solid var(--line)} .formrow:last-of-type{border-bottom:none} .formrow>label{flex:0 0 150px;padding-top:8px;font-size:13px;font-weight:600;color:var(--text-2)} .formrow-control{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .formrows .formbar{padding:14px 18px;border-top:none} /* formrows-body: khối nội dung tự do (ghi chú, lưới checkbox...) bên trong .formrows nhưng KHÔNG theo khuôn nhãn-trái/ô-phải của .formrow — dùng ở views/user.php cho 3 khối "TEAM tham gia / Nhóm tham gia / Gian hàng". */ .formrows-body{padding:13px 18px;border-bottom:1px solid var(--line)} .formrows-body:last-child{border-bottom:none} .formrows-body .note{margin:0 0 10px} .formrows-body .note:last-child{margin-bottom:0} .formrows-body .checkgrid{margin-top:2px} @media (max-width:640px){ .formrow{flex-direction:column;gap:6px;padding:12px 14px} .formrow>label{flex:none;padding-top:0} } /* upload_box: khung "Upload" bọc ngoài ô chọn file (Hóa đơn PDF, Đơn hàng Excel) */ .upload-box{border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:420px} .upload-box-cta{background:var(--primary);color:#fff;font-weight:700;font-size:13px;text-align:center;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:6px} .upload-box input[type=file]{display:block;width:100%;border:none;border-top:1px solid var(--line);border-radius:0;background:#fff} .upload-box .filelist{padding:8px 10px;border-top:1px solid var(--line)} .checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px} .checkitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;cursor:pointer} .checkitem:hover{border-color:var(--primary)} .checkitem em{color:var(--text-3);font-style:normal;font-size:11.5px} .checkitem-outscope{background:#FDF2E2;border-color:#F3DFBE} .checkitem-outscope em{color:var(--warn)} .filelist{display:flex;flex-direction:column;gap:4px;margin-top:6px} .filerow{display:flex;align-items:center;gap:8px;font-size:12.5px} .filerow .muted{margin-left:auto;font-size:11px} /* chunk_progress: thanh tiến trình tải video theo phần (bản 108 — xem public/assets/app.js mục "Tải video theo phần" + src/Render.php ô Video). Ẩn mặc định, JS tự hiện ra (.is-active) khi có tệp lớn đang tải. */ .chunk-progress{display:none;margin-top:8px} .chunk-progress.is-active{display:block} .chunk-progress-bar{height:8px;border-radius:5px;background:#E4E9EC;overflow:hidden} .chunk-progress-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:5px;transition:width .15s linear} .chunk-progress-text{display:block;margin-top:4px;font-size:12px;color:var(--text-2)} .chunk-progress.is-error .chunk-progress-bar i{background:var(--bad)} .chunk-progress.is-error .chunk-progress-text{color:var(--bad);font-weight:600} .chunk-progress.is-done .chunk-progress-bar i{background:var(--ok)} /* ---------- Nút ---------- */ .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap} .btn:hover{background:#F7F9FA;text-decoration:none;border-color:#C6D0D9} .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff} .btn-danger{background:#fff;border-color:#E6C3BF;color:var(--bad)} .btn-danger:hover{background:#FCEAE8} .btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)} .btn-ghost:hover{background:#F1F4F6} .btn-sm{padding:4px 9px;font-size:12px} /* Bản 125 — nút dạng hiển thị (KHÔNG phải /