/* ===================================================================== fb-20260803-220919-887 — CHUẨN HOÁ INPUT COMPONENT (exControl DÙNG CHUNG) Biến 1 nguồn cho MỌI ô nhập: chiều cao + padding + bo góc ĐỒNG BỘ. • --ex-input-radius: mặc định bo 2px. Chế độ PHẲNG (flat) = 0 khi có class .ex-input-flat trên (bật/tắt bằng window.setInputFlat()). • --ex-input-height / pad: dùng chung để height & padding các input BẰNG nhau. Grid (Tabulator) KHÔNG áp các biến này (đã làm riêng). ===================================================================== */ :root { --ex-input-radius: 2px; --ex-input-height: 32px; --ex-input-pad-y: 4px; --ex-input-pad-x: 8px; } html.ex-input-flat { --ex-input-radius: 0px; } .container-fluid { margin: 0px !important; padding: 0px !important; float: left; width: 100%; } .row { margin: 0px !important; padding: 0px !important; } .col-lg-1 { margin: 0px !important; padding: 0px !important; } .col-lg-2 { margin: 0px !important; padding: 0px !important; } .col-lg-3 { margin: 0px !important; padding: 0px !important; } .col-lg-4 { margin: 0px !important; padding: 0px !important; } .col-lg-6 { margin: 0px !important; padding: 0px !important; } .col-lg-12 { margin: 0px !important; padding: 0px !important; } .col-md-1 { margin: 0px !important; padding: 0px !important; } .col-md-2 { margin: 0px !important; padding: 0px !important; } .col-md-3 { margin: 0px !important; padding: 0px !important; } .col-md-4 { margin: 0px !important; padding: 0px !important; } .col-md-6 { margin: 0px !important; padding: 0px !important; } .col-md-12 { margin: 0px !important; padding: 0px !important; } .col-sm-1 { margin: 0px !important; padding: 0px !important; } .col-sm-2 { margin: 0px !important; padding: 0px !important; } .col-sm-3 { margin: 0px !important; padding: 0px !important; } .col-sm-4 { margin: 0px !important; padding: 0px !important; } .col-sm-6 { margin: 0px !important; padding: 0px !important; } .col-sm-12 { margin: 0px !important; padding: 0px !important; } .btn { color: var(--main-color) !important; border-color: var(--main-color) !important; } .btn-primary { background: var(--main-color) !important; color: #fff !important; } .form-control { padding: 0.375rem 0.75rem !important; } input.form-control { padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important; height: var(--ex-input-height) !important; border-radius: var(--ex-input-radius) !important; font-size: 14px !important; line-height: 1.2 !important; } .tabulator .tabulator-header .tabulator-col { padding: 0 !important; } .tabulator .tabulator-row.tabulator-row-even { background: transparent !important; } .tabulator .tabulator-row.tabulator-selected { border-bottom: 2px solid var(--main-color); background: none !important; } .tabulator .tabulator-row.tabulator-selected:hover { cursor: pointer; } /* Viền + padding ô editing gộp về 1 nguồn duy nhất tại .tabulator .tabulator-cell.tabulator-editing (dưới, ~596) */ .tabulator-row .tabulator-cell.tabulator-editing { outline: none; } .tabulator .tabulator-col-content { padding: 0 !important; } .grid-header-title { height: 34px; display: flex; align-items: center; padding: 0 10px; font-weight: 600; white-space: nowrap; } .tabulator .tabulator-header-filter { padding: 7px 8px 8px 8px !important; border-top: 1px solid #e2e8f0; background: #fff; } .tabulator .tabulator-header-filter input, .tabulator .tabulator-header-filter select { width: 100%; height: 34px; } .tabulator .tabulator-col-title { height: 34px; display: flex; align-items: center; } .tabulator-headers .grid-checkbox-col .tabulator-col-content { height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e2e8f0; cursor: pointer; } .grid-toolbar { border-bottom: none !important; border-radius: 0px !important; padding: 5px !important; margin-bottom: 0px !important; box-shadow: none !important; } .grid-tomselect-editor { width: 100%; } .tabulator-cell .ts-wrapper { width: 100%; height: 100%; } .tabulator-cell .ts-control { min-height: 100%; height: 100%; border: 1px solid var(--main-color); border-radius: 0; padding: 4px 8px; box-shadow: none; } .ts-dropdown { z-index: 999999 !important; background: #fff !important; } .grid-toolbar button i { margin-left: 5px; margin-right: 5px; } .grid-toolbar button { padding: 5px !important; padding-right: 10px !important; } .modal-dialog { margin: 0px auto !important; } .grid-group-droparea { min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 4px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; color: #64748b; font-size: 13px; } .grid-group-droparea.drag { border-color: var(--main-color); background: var(--tranfer-color); } .grid-group-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 14px; background: var(--main-color); color: #fff; font-size: 13px; } .grid-group-chip button { border: 0; background: transparent; color: #fff; cursor: pointer; font-weight: bold; } .grid-group-droparea { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-bottom: 4px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; color: #64748b; font-size: 13px; } .grid-group-droparea.drag { border-color: var(--main-color); background: var(--tranfer-color); } .grid-group-left { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .grid-group-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 14px; background: var(--main-color); color: #fff; font-size: 13px; } .grid-group-chip button { border: 0; background: transparent; color: #fff; cursor: pointer; font-weight: bold; } .grid-group-actions { display: flex; align-items: center; gap: 6px; } .grid-group-actions button { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; } /* fb-20260821-170150-085 (reply): kéo chip trong bảng nhóm để ĐỔI THỨ TỰ nhóm */ .grid-group-chip { cursor: grab; user-select: none; } .grid-group-chip.dragging { opacity: .45; cursor: grabbing; } .grid-group-chip.drop-before { box-shadow: -3px 0 0 0 var(--main-color, #2563eb); } .grid-group-chip.drop-after { box-shadow: 3px 0 0 0 var(--main-color, #2563eb); } /* fb-288 V2: 2 nút Expand/Collapse -> icon vuông gọn; spinner khi đang mở/thu gọn */ .grid-group-actions .grid-group-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; font-size: 13px; color: var(--main-color, #2563eb); } .grid-group-actions .grid-group-iconbtn:hover { background: var(--tranfer-color, #eef4ff); } .grid-group-actions .grid-group-spin { display: none; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--main-color, #2563eb); font-size: 13px; } .grid-load-more { position: absolute; bottom: 0; left: 0; right: 0; z-index: 50; padding: 8px; text-align: center; background: #fff; border-top: 1px solid #ddd; color: var(--main-color); font-size: 13px; } .ts-wrapper .ts-control { display: flex !important; align-items: center; flex-wrap: nowrap !important; min-height: 32px; overflow: hidden; } .ts-wrapper .ts-control input { min-width: 80px !important; flex: 1; } .ts-wrapper.multi .ts-control > div { white-space: nowrap; margin: 2px; } .ts-wrapper .ts-control .item { display: flex; align-items: center; } .ts-wrapper .ts-control { display: flex !important; align-items: center; flex-wrap: nowrap !important; min-height: var(--ex-input-height); overflow: hidden; border: 1px solid #d9d9d9 !important; border-radius: var(--ex-input-radius) !important; box-shadow: none !important; outline: none !important; } .ts-control input { width: auto !important; min-width: 80px !important; background: transparent !important; } .form-control { border: 1px solid #d9d9d9 !important; outline: none !important; box-shadow: none !important; } .form-control:focus, .ts-wrapper.focus .ts-control { border-color: var(--tranfer-color) !important; box-shadow: 0 0 3px 1px var(--tranfer-color) !important; outline: none !important; } .form-control, .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { min-height: var(--ex-input-height) !important; height: var(--ex-input-height) !important; padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important; border: 1px solid #ced4da !important; border-radius: var(--ex-input-radius) !important; background: #fff !important; font-size: 13px !important; line-height: 18px !important; box-shadow: none !important; } .ts-wrapper .ts-control { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } .ts-wrapper.single .ts-control .item, .ts-wrapper.single .ts-control input { line-height: 18px !important; padding: 0 !important; margin: 0 !important; } .ts-wrapper { min-height: 32px !important; } .ts-wrapper.focus .ts-control, .form-control:focus { border-color: var(--tranfer-color) !important; box-shadow: 0 0 2px 0 var(--tranfer-color) !important; } .ts-check-option { display: flex !important; gap: 5px; } .ts-check-option input[type="checkbox"] { width: auto !important; /* fb-20260813-165014-127: checkbox đầu MỖI option đa-chọn ĂN THEO MÀU PHÂN HỆ (đồng nhất toàn hệ) */ accent-color: var(--main-color, var(--accent, #2563eb)); } /* fb-20260813-165014-127: MULTISELECT 1 dòng — nhãn "(N mục)" thay cho chip khi thu gọn. Mở dropdown → thu gọn để ô tìm RỘNG (input vẫn hiện); đóng + tràn → thu gọn (ẩn cả input). reply: nhãn "(N mục)" hiện KIỂU CHIP như item đã chọn (ĂN THEO MÀU PHÂN HỆ) — thu gọn khi focus không còn mất màu (trước là chữ xám thường nên "mất vạch màu khi focus"). */ .ts-wrapper.multi .ts-ms-count { display: none; align-items: center; font-size: 11px; line-height: 1.5; font-weight: 600; color: #fff; background: var(--main-color, var(--accent, #2563eb)); border-radius: 2px; white-space: nowrap; padding: 1px 7px; flex: 0 0 auto; } .ts-wrapper.multi.ts-ms-collapsed .ts-control > .item { display: none !important; } .ts-wrapper.multi.ts-ms-collapsed .ts-ms-count { display: inline-flex; } .ts-wrapper.multi.ts-ms-collapsed:not(.dropdown-active):not(.focus) .ts-control > input { display: none !important; } /* fb-20260813-203840-600: CHIP TỪNG ITEM đa-chọn dùng CÙNG kiểu với chip "(N mục)" ở trên (nền màu phân hệ, chữ trắng, bo 2px, cỡ 11px) — trước đây item xài chip xanh nhạt mặc định của thư viện nên lệch hẳn với "(N mục)". Nay hai loại chip ĐỒNG NHẤT (yêu cầu: «để giống chip số mục»). */ .ts-wrapper.multi .ts-control .item { display: inline-flex !important; align-items: center !important; font-size: 11px !important; line-height: 1.5 !important; font-weight: 600 !important; color: #fff !important; background: var(--main-color, var(--accent, #2563eb)) !important; border: 0 !important; border-radius: 2px !important; padding: 1px 4px 1px 7px !important; margin: 2px 3px 2px 0 !important; white-space: nowrap !important; } /* fb-20260813-203840-600 (reply 3 «chữ X để gỡ item xấu quá»): nút × gỡ item bám sát chữ, nhìn xấu. Theo mẫu AnToanThuoc (ảnh 2): (1) VẠCH NGĂN mảnh border-left giữa chữ và ×; (2) × CĂN GIỮA (inline-flex align-items:center) + có padding hai bên ở phần được ngăn ra. */ .ts-wrapper.multi .ts-control .item .remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; background: transparent !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .4) !important; border-radius: 0 !important; padding: 0 4px !important; margin-left: 5px !important; text-decoration: none !important; opacity: .85; } .ts-wrapper.multi .ts-control .item .remove:hover { background: rgba(255, 255, 255, .18) !important; opacity: 1; } /* fb-20260813-203840-600 (reply 1 «đã chọn rồi mà vẫn hiện chữ tất cả»): TomSelect đặt lại placeholder ("Tất cả"/"Mọi …") trên ô nhập kể cả khi ĐÃ có item. Khi wrapper có .has-items (TomSelect tự thêm khi items.length>0) → LÀM TRONG SUỐT chữ placeholder để không còn chữ "Tất cả" đứng lẫn cạnh các chip. */ .ts-wrapper.multi.has-items .ts-control > input::placeholder { color: transparent !important; } .ts-wrapper.multi.has-items .ts-control > input::-webkit-input-placeholder { color: transparent !important; } .tabulator-cell.tabulator-editing { display: flex; align-items: center; } .tabulator-cell.tabulator-editing select, .tabulator-cell.tabulator-editing .ts-wrapper { outline: none !important; width: 100%; } .ts-wrapper.single .ts-control { background-color: transparent !important; border: none !important; text-align: center !important; box-shadow: none !important; } .ts-wrapper.single .ts-control .item { width: 100%; text-align: center; } .date-picker-wrap { position: relative; width: 100%; } .date-picker-wrap input { width: 100%; } .date-picker-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #999; z-index: 5; transition: .2s; } .date-picker-icon:hover { color: var(--tranfer-color); } .date-picker-wrap input:focus + .date-picker-icon { color: var(--tranfer-color); } .ql-insertTable:after { content: "Table"; font-size: 12px; } .ql-insertTable { width: 45px !important; } .grid-header-mode-menu { position: absolute; z-index: 100000; min-width: 190px; background: #fff; border: 1px solid #d0d7de; border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: 6px; font-size: 13px; } .grid-header-mode-menu-item { padding: 8px 10px; cursor: pointer; border-radius: 4px; white-space: nowrap; } .grid-header-mode-menu-item:hover { background: #f1f5f9; } .grid-header-mode-menu-item.active { font-weight: 700; color: var(--main-color); } .ts-wrapper.single .ts-control { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; min-height: var(--ex-input-height) !important; height: var(--ex-input-height) !important; padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important; border: 1px solid #ced4da !important; border-radius: var(--ex-input-radius) !important; background: #fff !important; box-shadow: none !important; text-align: left !important; } .ts-wrapper.single .ts-control .item { flex: 0 0 auto !important; width: auto !important; max-width: none !important; text-align: left !important; padding: 0 !important; margin: 0 4px 0 0 !important; line-height: 18px !important; white-space: nowrap !important; } .ts-wrapper.single .ts-control input { flex: 1 1 auto !important; width: auto !important; min-width: 20px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } .ts-wrapper.single.focus .ts-control { border-color: var(--tranfer-color) !important; box-shadow: 0 0 2px 0 var(--tranfer-color) !important; } .tabulator-cell.tabulator-editing .ts-wrapper.single .ts-control { border: none !important; background: transparent !important; box-shadow: none !important; } .ts-check-option.option { display:flex !important; align-items:center } /* Chỉ bỏ padding khi modal-body chứa TRỰC TIẾP lưới (Tabulator) để lưới lấp đầy mép. Các popup alert/xác nhận/dialog thường vẫn giữ padding cân đối từ _MainLayout. */ .modal-body:has(> .tabulator) { padding: 0px !important; } .tabulator .tabulator-cell.tabulator-editing { padding: 6px 10px !important; background: #fff !important; border: 1px solid var(--main-color, #00897b) !important; outline: none; } .tabulator .tabulator-cell.tabulator-editing input, .tabulator .tabulator-cell.tabulator-editing select, .grid-inline-editor { width: 100% !important; height: 100% !important; border: none !important; margin: 0 !important; padding: 2px 6px !important; font-size: 14px !important; background: transparent !important; color: #111827 !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; } .tabulator .tabulator-cell.tabulator-editing input[type=number] { text-align: right; } .ts-wrapper.grid-tomselect-editor { width: 100% !important; } .ts-wrapper.grid-tomselect-editor .ts-control { min-height: 31px !important; height: 31px !important; border: 1px solid #00897b !important; border-radius: 4px !important; padding: 3px 8px !important; font-size: 14px !important; box-shadow: 0 0 0 1px rgba(0,137,123,.15) !important; } .ts-dropdown { border: 1px solid #d0d7de !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0,0,0,.18) !important; font-size: 14px !important; } .ts-dropdown .option { padding: 9px 12px !important; } /* fb-20260813-165014-127 (reply): VẠCH MÀU ở ĐẦU item đang focus/active — ăn theo màu phân hệ. Dùng inset box-shadow (không đổi layout) để vẽ vạch dọc bên trái option đang được chọn/di chuột. */ .ts-dropdown .active { background: #eef2f7 !important; color: #111827 !important; box-shadow: inset 3px 0 0 var(--main-color, var(--accent, #2563eb)) !important; } /* ===================================================================== fb-20260722-134007-620 — exControl dropdown (TomSelect) DÙNG CHUNG: panel giãn rộng vừa nội dung (KHÔNG cắt chữ), cao hơn + cuộn dọc, lật lên khi chạm mép dưới. Fix chung mọi vai. Chỉ sửa kích thước/không-cắt- chữ/cuộn — KHÔNG đổi màu/hover/hành vi chọn. Áp cả light & dark. ===================================================================== */ .ts-dropdown { width: max-content !important; /* giãn theo nội dung dài nhất */ min-width: 100% !important; /* nhưng không hẹp hơn ô control */ max-width: min(420px, 90vw) !important; /* trần hợp lý, không tràn viewport */ } .ts-dropdown .ts-dropdown-content { max-height: 280px !important; /* ~8 dòng, phần dư cuộn dọc */ overflow-y: auto !important; overflow-x: hidden !important; } /* Bỏ cắt cụt/ellipsis: cho option xuống dòng, hiện đủ chữ */ .ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results, .ts-dropdown .optgroup-header, .ts-dropdown .ts-check-option.option > span { white-space: normal !important; word-break: break-word !important; overflow: visible !important; text-overflow: clip !important; } .ts-dropdown [data-selectable] { overflow: visible !important; } /* gỡ overflow:hidden mặc định của tom-select */ /* Lật panel LÊN TRÊN khi gần mép dưới màn (JS toggle .ts-dropup trên wrapper) */ .ts-wrapper.ts-dropup .ts-dropdown { top: auto !important; bottom: 100% !important; margin: 0 0 .25rem 0 !important; box-shadow: 0 -4px 12px rgba(0,0,0,.18) !important; } /* ===================================================================== fb-20260817-231947-111 — CƠ CHẾ GRID cho dropdown "new" (newDropDownSingle / newDropDown). Opt-in bằng thuộc tính data-ddgrid; JS gắn class .ts-grid vào panel .ts-dropdown. MỖI option = 1 HÀNG grid nhiều cột (canh cột thẳng nhau); đa-chọn có cột CHECKBOX đứng ĐẦU, rộng vừa đủ (biến --ts-grid-check); SỌC chẵn/lẻ theo hàng; GIỮ hover/active (vạch màu phân hệ) như dropdown thường. ===================================================================== */ .ts-dropdown.ts-grid { --ts-grid-check: 22px; } .ts-dropdown.ts-grid .ts-dropdown-content .option.ts-grid-row { display: grid !important; align-items: center; column-gap: 10px; padding: 6px 12px !important; } /* cột chữ 1 hàng, tràn thì cắt bằng … để CỘT thẳng hàng (thắng rule white-space:normal ở trên) */ .ts-dropdown.ts-grid .ts-grid-row > .ts-grid-cell { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0; } /* checkbox cột đầu (đa-chọn) — hẹp vừa đủ, canh giữa ô */ .ts-dropdown.ts-grid .ts-grid-row > input[type="checkbox"] { width: auto !important; margin: 0 !important; justify-self: center; } /* SỌC chẵn/lẻ theo HÀNG */ .ts-dropdown.ts-grid .ts-dropdown-content .option:nth-child(odd) { background: #ffffff; } .ts-dropdown.ts-grid .ts-dropdown-content .option:nth-child(even) { background: #f4f6f9; } /* GIỮ hover + active (thắng sọc), vạch màu phân hệ như dropdown thường */ .ts-dropdown.ts-grid .ts-dropdown-content .option:hover, .ts-dropdown.ts-grid .ts-dropdown-content .option.active, .ts-dropdown.ts-grid .ts-dropdown-content .active { background: #eef2f7 !important; color: #111827 !important; box-shadow: inset 3px 0 0 var(--main-color, var(--accent, #2563eb)) !important; } /* DARK: sọc + hover theo tông tối */ html[data-theme='dark'] .ts-dropdown.ts-grid .ts-dropdown-content .option:nth-child(odd) { background: var(--dk-input-bg, #26262b); } html[data-theme='dark'] .ts-dropdown.ts-grid .ts-dropdown-content .option:nth-child(even) { background: #2d2d34; } html[data-theme='dark'] .ts-dropdown.ts-grid .ts-dropdown-content .option:hover, html[data-theme='dark'] .ts-dropdown.ts-grid .ts-dropdown-content .active { background: #34343a !important; color: #fff !important; } .grid-toolbar { background: #f8f9fa } .grid-toolbar .btn{ border:none !important } /* ===================================================================== DARK THEME — ô nhập liệu (input/select/textarea/TomSelect/date picker) Chỉ áp khi html[data-theme='dark']; light theme GIỮ NGUYÊN. Dùng biến --dk-* để chỉnh 1 chỗ. Đặt cuối file để thắng các rule .ts-control/.form-control { background:#fff !important } ở trên. ===================================================================== */ html[data-theme='dark'] { --dk-field-bg: #2c2c31; /* nền ô: tối nhưng tách khỏi nền trang */ --dk-field-bg-focus: #33333a; /* nền ô khi focus */ --dk-field-text: #f0f0f2; /* chữ đã gõ */ --dk-field-placeholder: #9aa0aa;/* placeholder mờ nhưng đọc được */ --dk-field-border: #4a4a52; /* viền rõ */ --dk-field-border-focus: #4aa3e6;/* viền khi focus */ --dk-field-focus-ring: rgba(74,163,230,.30); --dk-dropdown-bg: #2a2a2f; --dk-dropdown-hover: #34343c; } /* Input thuần / select / textarea (loại trừ checkbox/radio/nút) */ html[data-theme='dark'] input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]), html[data-theme='dark'] select, html[data-theme='dark'] textarea, html[data-theme='dark'] .form-control, html[data-theme='dark'] .form-select { background-color: var(--dk-field-bg) !important; color: var(--dk-field-text) !important; border: 1px solid var(--dk-field-border) !important; } html[data-theme='dark'] input::placeholder, html[data-theme='dark'] textarea::placeholder, html[data-theme='dark'] .form-control::placeholder { color: var(--dk-field-placeholder) !important; opacity: 1; } /* select option list (native) */ html[data-theme='dark'] select option { background-color: var(--dk-dropdown-bg); color: var(--dk-field-text); } /* TomSelect: control (ô hiển thị) + input bên trong */ html[data-theme='dark'] .ts-wrapper .ts-control, html[data-theme='dark'] .ts-wrapper.single .ts-control, html[data-theme='dark'] .ts-wrapper.multi .ts-control { background-color: var(--dk-field-bg) !important; color: var(--dk-field-text) !important; border: 1px solid var(--dk-field-border) !important; } html[data-theme='dark'] .ts-control, html[data-theme='dark'] .ts-control input, html[data-theme='dark'] .ts-control .item { color: var(--dk-field-text) !important; } html[data-theme='dark'] .ts-control input::placeholder { color: var(--dk-field-placeholder) !important; opacity: 1; } /* TomSelect: dropdown options */ html[data-theme='dark'] .ts-dropdown { background-color: var(--dk-dropdown-bg) !important; color: var(--dk-field-text) !important; border: 1px solid var(--dk-field-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,.55) !important; } html[data-theme='dark'] .ts-dropdown .option { color: var(--dk-field-text) !important; } html[data-theme='dark'] .ts-dropdown .option:hover, html[data-theme='dark'] .ts-dropdown .active { background-color: var(--dk-dropdown-hover) !important; color: #ffffff !important; } html[data-theme='dark'] .ts-dropdown .optgroup-header, html[data-theme='dark'] .ts-dropdown .no-results { color: var(--dk-field-placeholder) !important; background-color: var(--dk-dropdown-bg) !important; } /* flatpickr: lịch chọn ngày trên nền tối */ html[data-theme='dark'] .flatpickr-calendar { background: var(--dk-dropdown-bg) !important; color: var(--dk-field-text) !important; border: 1px solid var(--dk-field-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,.55) !important; } html[data-theme='dark'] .flatpickr-months .flatpickr-month, html[data-theme='dark'] .flatpickr-current-month, html[data-theme='dark'] .flatpickr-monthDropdown-months, html[data-theme='dark'] .flatpickr-weekday { color: var(--dk-field-text) !important; fill: var(--dk-field-text) !important; } html[data-theme='dark'] .flatpickr-day { color: var(--dk-field-text) !important; } html[data-theme='dark'] .flatpickr-day:hover { background: var(--dk-dropdown-hover) !important; border-color: var(--dk-dropdown-hover) !important; } html[data-theme='dark'] .flatpickr-day.today { border-color: var(--dk-field-border-focus) !important; } html[data-theme='dark'] .flatpickr-day.selected { background: var(--accent-color, #0078d4) !important; border-color: var(--accent-color, #0078d4) !important; color: #fff !important; } html[data-theme='dark'] .flatpickr-day.flatpickr-disabled, html[data-theme='dark'] .flatpickr-day.prevMonthDay, html[data-theme='dark'] .flatpickr-day.nextMonthDay { color: var(--dk-field-placeholder) !important; } /* FOCUS: viền + ring rõ cho mọi loại ô */ html[data-theme='dark'] input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):focus, html[data-theme='dark'] select:focus, html[data-theme='dark'] textarea:focus, html[data-theme='dark'] .form-control:focus, html[data-theme='dark'] .form-select:focus, html[data-theme='dark'] .ts-wrapper.focus .ts-control, html[data-theme='dark'] .ts-wrapper.single.focus .ts-control { background-color: var(--dk-field-bg-focus) !important; border-color: var(--dk-field-border-focus) !important; box-shadow: 0 0 0 .15rem var(--dk-field-focus-ring) !important; outline: none !important; } /* TomSelect editor trong ô lưới (giữ viền nhấn xanh teal nhưng nền tối) */ html[data-theme='dark'] .tabulator-cell.tabulator-editing input, html[data-theme='dark'] .tabulator-cell.tabulator-editing select, html[data-theme='dark'] .tabulator-cell.tabulator-editing .ts-control, html[data-theme='dark'] .ts-wrapper.grid-tomselect-editor .ts-control, html[data-theme='dark'] .grid-inline-editor, html[data-theme='dark'] .grid-tomselect-editor { background-color: var(--dk-field-bg-focus) !important; color: var(--dk-field-text) !important; } /* ===================================================================== DARK THEME — LƯỚI TABULATOR (grid) + TOOLBAR Vì sao bản override cũ THUA: file vendor tabulator_bootstrap5.min.css có .tabulator-row{...color:#212529!important} -> chữ TỐI .tabulator-row.tabulator-row-even{background:#e9ecef} và NGAY trong file này (dòng ~128): .tabulator .tabulator-row.tabulator-row-even{background:#babfbf33 !important} tức nền hàng chẵn là lớp XÁM SÁNG bán trong suốt + chữ tối ép !important. Block dark cũ trong _MainLayout KHÔNG dùng !important nên LUÔN thua các rule !important trên => hàng chẵn bị nền xám sáng + chữ tối => "mờ, khó đọc". Mọi rule dưới đây dùng !important + đặt CUỐI file (load sau cùng) nên thắng. ===================================================================== */ html[data-theme='dark'] { --dk-grid-row-odd: #232327; /* nền hàng lẻ */ --dk-grid-row-even: #1c1c20; /* nền hàng chẵn (sọc nhẹ, KHÔNG xám sáng) */ --dk-grid-text: #eef0f3; /* CHỮ SÁNG cho CẢ hàng lẻ và chẵn */ --dk-grid-border: #33343a; /* viền hàng/ô đọc được */ --dk-grid-hover: #2d2e35; /* hover rõ */ --dk-grid-sel: #2d4a63; /* nền dòng được chọn (xanh đậm) */ --dk-grid-header-bg: #2a2b31; /* nền header */ --dk-grid-header-tx: #f4f5f7; /* chữ header */ --dk-grid-surface: #202024; /* nền chung của lưới + thanh filter */ --dk-toolbar-bg: #232327; /* nền thanh công cụ */ --dk-toolbar-btn: #2a2b31; /* nền nút công cụ */ --dk-toolbar-btn-hv: #34353d; /* hover nút */ --dk-toolbar-tx: #e9ebef; /* chữ + icon nút */ } /* Khung lưới + nền chung */ html[data-theme='dark'] .tabulator { background-color: var(--dk-grid-surface) !important; color: var(--dk-grid-text) !important; border-color: var(--dk-grid-border) !important; } /* Header: nền + chữ rõ, viền gọn */ html[data-theme='dark'] .tabulator .tabulator-header, html[data-theme='dark'] .tabulator .tabulator-header .tabulator-col, html[data-theme='dark'] .tabulator .tabulator-col { background-color: var(--dk-grid-header-bg) !important; color: var(--dk-grid-header-tx) !important; border-color: var(--dk-grid-border) !important; } html[data-theme='dark'] .tabulator .grid-head-title, html[data-theme='dark'] .tabulator .tabulator-col-title, html[data-theme='dark'] .tabulator .tabulator-col-title * { color: var(--dk-grid-header-tx) !important; } /* HÀNG: nền sọc nhẹ, CHỮ SÁNG NHƯ NHAU cho lẻ & chẵn (đè color:#212529!important của vendor) */ html[data-theme='dark'] .tabulator .tabulator-row, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-odd { background-color: var(--dk-grid-row-odd) !important; color: var(--dk-grid-text) !important; border-color: var(--dk-grid-border) !important; border-bottom: 1px solid var(--dk-grid-border) !important; } html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-even { background-color: var(--dk-grid-row-even) !important; color: var(--dk-grid-text) !important; } /* Ô: chữ sáng cho MỌI hàng (kể cả vendor đặt color trên .tabulator-row) */ html[data-theme='dark'] .tabulator .tabulator-row .tabulator-cell, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-even .tabulator-cell, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-odd .tabulator-cell { color: var(--dk-grid-text) !important; border-color: var(--dk-grid-border) !important; background-color: transparent !important; } /* Hover: rõ ràng trên cả hàng lẻ/chẵn */ html[data-theme='dark'] .tabulator .tabulator-row:hover, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-selectable:hover, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-even.tabulator-selectable:hover { background-color: var(--dk-grid-hover) !important; } html[data-theme='dark'] .tabulator .tabulator-row:hover .tabulator-cell { background-color: transparent !important; color: var(--dk-grid-text) !important; } /* Dòng được chọn: nền nhấn + chữ trắng (đè cả rule .tabulator-row-even.tabulator-selected) */ html[data-theme='dark'] .tabulator .tabulator-row.tabulator-selected, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-even.tabulator-selected, html[data-theme='dark'] .tabulator .tabulator-row.tabulator-selected:hover { background-color: var(--dk-grid-sel) !important; } html[data-theme='dark'] .tabulator .tabulator-row.tabulator-selected .tabulator-cell { color: #ffffff !important; } /* Hàng nhóm (grouping) */ html[data-theme='dark'] .tabulator .tabulator-row.tabulator-group { background-color: var(--dk-grid-header-bg) !important; color: var(--dk-grid-header-tx) !important; border-color: var(--dk-grid-border) !important; } html[data-theme='dark'] .tabulator .tabulator-row.tabulator-group span { color: #ff9aa2 !important; } /* Thanh filter trong header + ô nhập filter */ html[data-theme='dark'] .tabulator .grid-filter-line, html[data-theme='dark'] .tabulator .tabulator-header-filter { background-color: var(--dk-grid-header-bg) !important; border-color: var(--dk-grid-border) !important; } html[data-theme='dark'] .tabulator .grid-filter-line input, html[data-theme='dark'] .tabulator .grid-filter-line select { background-color: var(--dk-field-bg) !important; color: var(--dk-field-text) !important; border: 1px solid var(--dk-field-border) !important; } html[data-theme='dark'] .tabulator .filter-btn { color: #9aa0aa !important; } html[data-theme='dark'] .tabulator .filter-btn.active { color: #4aa3e6 !important; } /* Placeholder "Không có dữ liệu" */ html[data-theme='dark'] .tabulator .tabulator-placeholder, html[data-theme='dark'] .tabulator .tabulator-placeholder-contents { color: var(--dk-field-placeholder) !important; background-color: var(--dk-grid-surface) !important; } /* Panel filter kiểu Excel (đang là nền trắng cứng) */ html[data-theme='dark'] .excel-filter-panel { background-color: var(--dk-dropdown-bg) !important; color: var(--dk-grid-text) !important; border-color: var(--dk-field-border) !important; box-shadow: 0 12px 30px rgba(0,0,0,.6) !important; } html[data-theme='dark'] .excel-filter-panel .filter-values { border-color: var(--dk-field-border) !important; } /* ===== THANH CÔNG CỤ + NÚT (Thêm / Sửa / Xóa / Export / Import) ===== Trước: nút .btn-outline-secondary chữ/icon tối nằm trên nền tối -> gần như tàng hình. Cho nút bề mặt tối nhạt + chữ/icon sáng + viền nhẹ + hover rõ. */ html[data-theme='dark'] .grid-toolbar, html[data-theme='dark'] div[id$='_legacy_toolbar'].grid-toolbar { background-color: var(--dk-toolbar-bg) !important; border-color: var(--dk-grid-border) !important; } html[data-theme='dark'] .grid-toolbar .btn, html[data-theme='dark'] .grid-toolbar button { background-color: var(--dk-toolbar-btn) !important; color: var(--dk-toolbar-tx) !important; border: 1px solid var(--dk-grid-border) !important; } html[data-theme='dark'] .grid-toolbar .btn i, html[data-theme='dark'] .grid-toolbar button i { color: var(--dk-toolbar-tx) !important; } html[data-theme='dark'] .grid-toolbar .btn:hover, html[data-theme='dark'] .grid-toolbar button:hover { background-color: var(--dk-toolbar-btn-hv) !important; color: #ffffff !important; } html[data-theme='dark'] .grid-toolbar .btn:hover i, html[data-theme='dark'] .grid-toolbar button:hover i { color: #ffffff !important; } /* Nút nhấn chính (primary/teal) giữ màu nhấn nhưng chữ trắng cho dễ đọc */ html[data-theme='dark'] .grid-toolbar .btn-primary { background-color: var(--main-color, #1f9e8f) !important; border-color: var(--main-color, #1f9e8f) !important; color: #ffffff !important; } /* ===== THANH CÔNG CỤ TÙY BIẾN — nút .button trong #divCondication ===== Một số màn (vd "TÍNH LƯƠNG NHÂN VIÊN") KHÔNG dùng .grid-toolbar mà render toolbar riêng:
chứa các nút
. Light theme: .button có background:#fff + viền teal (master.css) -> ổn. Dark theme: nền body tối + chữ kế thừa màu sáng -> nút "tối-trên-tối" / mờ. Scope CHẶT vào "#divCondication .button" (chỉ nút trong toolbar tùy biến này) nên KHÔNG đụng tới: nút primary teal, nút .grid-toolbar (đã xử lý ở trên), nút Đóng/Lưu kiểu link trong modal — vì chúng KHÔNG nằm trong #divCondication. */ html[data-theme='dark'] #divCondication .button { background-color: var(--dk-toolbar-btn) !important; color: var(--dk-toolbar-tx) !important; border: 1px solid var(--dk-grid-border) !important; } html[data-theme='dark'] #divCondication .button i { color: var(--dk-toolbar-tx) !important; } html[data-theme='dark'] #divCondication .button:hover { background-color: var(--dk-toolbar-btn-hv) !important; border-color: var(--main-color, #1f9e8f) !important; color: #ffffff !important; } html[data-theme='dark'] #divCondication .button:hover i { color: #ffffff !important; } /* Nút thao tác chính (Chốt) giữ màu nhấn teal + chữ trắng để nổi bật */ html[data-theme='dark'] #divCondication .button#btnChotTinhLuong { background-color: var(--main-color, #1f9e8f) !important; border-color: var(--main-color, #1f9e8f) !important; color: #ffffff !important; } html[data-theme='dark'] #divCondication .button#btnChotTinhLuong i { color: #ffffff !important; } html[data-theme='dark'] #divCondication .button#btnChotTinhLuong:hover { background-color: #17b39e !important; border-color: #17b39e !important; } /* ===================================================================== fb-20260803-220919-887 — ICON CARET XỔ DANH SÁCH cho Dropdown/Multiselect (newDropDownSingle / newDropDown / newDropDownMillion = TomSelect). Trước đây không có mũi tên nên người dùng tưởng phải GÕ mới ra danh sách. JS chèn vào .ts-wrapper; bấm để mở/đóng panel. Chừa chỗ bên phải control để chữ không chồng mũi tên (KHÔNG áp cho ô editor trong lưới — grid làm riêng). ===================================================================== */ .ts-wrapper { position: relative; } /* Tắt caret tam giác tĩnh (không bấm được) của theme bootstrap5 — thay bằng .ts-caret bấm được */ .ts-wrapper.single .ts-control:after, .ts-wrapper.multi .ts-control:after { display: none !important; } .ts-caret { position: absolute; top: 0; right: 0; bottom: 0; width: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9aa0aa; z-index: 3; /* Mũi tên CHỈ để nhìn: cú click XUYÊN QUA xuống .ts-control để TomSelect tự toggle 1 lần (không bị bắt 2 lần → không mở-rồi-ẩn). fb-20260803-220919-887 */ pointer-events: none; transition: transform .15s ease, color .15s ease; } /* fb-20260813-165014-127 (reply): mũi tên xổ MẢNH & gọn cho cân đối — nhưng 9px thì NHỎ QUÁ, người dùng báo "mất luôn mũi tên lên/xuống" ⇒ nâng lên 12px (vẫn nhỏ hơn mặc định ~14px, vẫn thấy rõ). fb-20260813-201759-998: font-weight:400 ÉP icon .fa-solid dùng FACE Regular (fa-regular-400) của "Font Awesome 6 Free" — mà bộ Free KHÔNG có chevron-down ở Regular ⇒ trình duyệt vẽ Ô-VUÔNG-VỰ (tofu), người dùng báo "không ra mũi tên". PHẢI để 900 (face Solid, nơi chevron-down tồn tại) mới hiện. */ .ts-caret i { font-size: 12px; font-weight: 900; } .ts-wrapper.dropdown-active .ts-caret { transform: rotate(180deg); } /* fb-20260813-165014-127 (reply): NÚT × XOÁ HẾT item đã chọn (chỉ cho đa-chọn), JS bật/tắt theo số item. Đặt bên trái mũi tên; pointer-events:auto để bấm được (khác caret vốn xuyên click). */ .ts-wrapper.multi .ts-ms-clear { position: absolute; top: 0; bottom: 0; right: 22px; width: 16px; display: none; align-items: center; justify-content: center; cursor: pointer; color: #9aa0aa; font-size: 14px; line-height: 1; z-index: 4; pointer-events: auto; } .ts-wrapper.multi .ts-ms-clear:hover { color: var(--main-color, var(--accent, #2563eb)); } /* fb-20260803-220919-887 (vòng 3): caret dùng pointer-events:none nên con trỏ NGAY trên mũi tên lấy theo .ts-control bên dưới — mà ô nhập mặc định là con trỏ NHẬP LIỆU (text). Ép .ts-control + ô nhập dùng con trỏ POINTER để bấm vào mũi tên/ô đều thấy bàn tay (đây là dropdown bấm-để-chọn, không phải ô gõ tự do). Trừ ô editor trong lưới. */ .ts-wrapper .ts-control, .ts-wrapper .ts-control input { cursor: pointer !important; } .tabulator-cell .ts-control, .tabulator-cell .ts-control input, .ts-wrapper.grid-tomselect-editor .ts-control, .ts-wrapper.grid-tomselect-editor .ts-control input { cursor: text !important; } /* Chừa chỗ cho mũi tên (đặt CUỐI file để thắng rule padding shorthand phía trên) */ .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .ts-wrapper .ts-control { padding-right: 28px !important; } /* fb-20260813-165014-127 (reply): đa-chọn có thêm nút × → chừa chỗ cho cả × lẫn mũi tên */ .ts-wrapper.multi .ts-control { padding-right: 42px !important; } /* Ô editor trong lưới không dùng caret (giữ nguyên) */ .tabulator-cell .ts-caret, .ts-wrapper.grid-tomselect-editor .ts-caret { display: none !important; } .tabulator-cell .ts-control, .ts-wrapper.grid-tomselect-editor .ts-control { padding-right: 8px !important; } html[data-theme='dark'] .ts-caret { color: var(--dk-field-placeholder, #9aa0aa); } /* ── fb HỘI CHẨN 20/08/2026 — chip đa-chọn: không co, dấu × luôn bấm được ────── Trước đây chip là con của hộp flex nên trình duyệt CO chúng lại cho vừa ô. Hệ quả kép: (a) phép đo "tổng bề rộng chip > chỗ trống" không bao giờ đúng nên không thu về «N mục»; (b) chip co tới mức dấu × bị đẩy khuất, không bấm gỡ được. Khoá chip flex:0 0 auto ⇒ chúng TRÀN THẬT, phép đo bắt được và thu gọn đúng. Chữ trong chip mới là phần được phép cắt (ellipsis); dấu × giữ nguyên chỗ. */ .ts-wrapper.multi .ts-control > .item { flex: 0 0 auto !important; max-width: 100% !important; min-width: 0 !important; } .ts-wrapper.multi .ts-control > .item > div { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } /* × không bao giờ bị co hay bị cắt — nó là thứ duy nhất để gỡ item */ .ts-wrapper.multi .ts-control > .item .remove { flex: 0 0 auto !important; position: relative; z-index: 2; } /* Chip tràn thì cắt ở mép ô, không đẩy giãn ô nhập */ .ts-wrapper.multi .ts-control { overflow: hidden !important; } /* ══════════════════════════════════════════════════════════════════════════════ LUẬT SÀN CHO ĐẦU BẢNG DÍNH (position: sticky) — áp cho TOÀN HỆ, kể cả màn viết sau. Lỗi đã đo 31/08: nhiều bảng tự chế đặt thead th là sticky nhưng để z-index mặc định (auto). Sticky KHÔNG tự nằm trên: các ô dữ liệu cuộn tới sẽ VẼ ĐÈ LÊN đầu bảng, nhìn như chữ xuyên qua tiêu đề. Đo cụ thể: TiepDon/CauHinhCapSo có nền đục nhưng z-index:auto -> bị; PhanQuyen có z-index:2 -> không bị. Hai dòng dưới là SÀN, không phải áp đặt: · z-index trên phần tử KHÔNG định vị bị bỏ qua, nên bảng thường không ảnh hưởng gì. · background-color đặt bằng bộ chọn độ đặc hiệu THẤP (thead th = 0,0,2) và tệp này nạp SỚM, nên màn nào tự đặt màu đầu bảng vẫn thắng — chỉ màn nào QUÊN mới nhận nền mặc định thay vì để lộ nội dung phía sau. ══════════════════════════════════════════════════════════════════════════════ */ thead th { background-color: var(--panel-h, #f8fafc); z-index: 2; }