/* Lưới danh sách div.g và bảng chi tiết table.d-tbl của các module mới: tiêu đề cột sắp xếp (GridSort) và kéo giãn cột (js/lt-grid.js). */

/* Cột # vuông bằng chiều cao hàng chuẩn 32px: vùng số 20px (--lt-idx-w) + đệm 12px. Dòng bảng cao hơn (có ô nhập 30px) thì js/lt-grid.js nới --lt-idx-cell-pad trên bảng cho ô # vẫn vuông. Bảng: bề ngang ô = --lt-idx-w + --lt-idx-cell-pad;
   lưới div.g: đệm trái hàng 6px + vùng số 20px + nửa khe cột 6px tới vạch kẻ dọc. Trang hiện số từ 3 chữ số thì js/lt-grid.js nới --lt-idx-w trên khung. */
:root {
	--lt-idx-w: 20px;
	--lt-idx-cell-pad: 12px;
}

/* Tiêu đề cột sắp xếp được: bấm để sắp tăng → giảm → bỏ */
.thead > .lt-sort, thead th.lt-sort {
	cursor: pointer;
	user-select: none;
}

.thead > .lt-sort:hover, thead th.lt-sort:hover {
	color: #1e3a8a;
}

.thead > .lt-sort::after, thead th.lt-sort::after {
	content: "\2195";
	display: inline-block;
	margin-left: 4px;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transition: opacity .12s;
}

.thead > .lt-sort:hover::after, thead th.lt-sort:hover::after {
	opacity: .45;
}

.thead > .lt-sort.asc, thead th.lt-sort.asc,
.thead > .lt-sort.desc, thead th.lt-sort.desc {
	color: #1e3a8a;
}

.thead > .lt-sort.asc::after, thead th.lt-sort.asc::after,
.thead > .lt-sort.desc::after, thead th.lt-sort.desc::after {
	content: "\25B2";
	font-size: 14px;
	vertical-align: 1px;
	color: #2563eb;
	opacity: 1;
}

.thead > .lt-sort.desc::after, thead th.lt-sort.desc::after {
	content: "\25BC";
}

/* Kéo giãn cột: vạch mép phải khi trỏ chuột tới, con trỏ col-resize */
.thead.lt-rz-hover,
.thead.lt-rz-hover > *,
thead > tr.lt-rz-hover > th {
	cursor: col-resize !important;
}

.thead > .lt-rz-on,
thead > tr > th.lt-rz-on {
	box-shadow: inset -2px 0 0 #93c5fd;
}

body.lt-rz-drag,
body.lt-rz-drag * {
	cursor: col-resize !important;
	user-select: none !important;
}

/* Lưới đã đổi độ rộng cột: dùng khuôn cột do lt-grid.js tính (đè grid-template-columns của màn) */
[data-lt-cols] .g {
	grid-template-columns: var(--lt-cols) !important;
	min-width: var(--lt-min) !important;
}

[data-lt-cols] .g > * {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bảng chi tiết đã đổi độ rộng cột: chữ dài cắt bằng dấu … thay vì tràn sang cột bên */
table[data-lt-cols] > thead > tr > th,
table[data-lt-cols] > tbody > tr > td,
table[data-lt-cols] > tfoot > tr > td {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ẩn / hiện cột: nút "Cột" nổi ở mép phải hàng tiêu đề và menu tích chọn (js/lt-grid.js) */
.lt-colbtn {
	position: fixed;
	z-index: 1050;
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid #cfd8e3;
	border-radius: 7px;
	background: #fff;
	color: #475569;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	cursor: pointer;
}

.lt-colbtn.on {
	display: inline-flex;
}

.lt-colbtn:hover {
	color: #2563eb;
	border-color: #93c5fd;
	background: #eff6ff;
}

.lt-colmenu {
	position: fixed;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	min-width: 300px;
	max-width: 440px;
	max-height: min(460px, calc(100vh - 16px));
	background: #fff;
	border: 1px solid #cfd8e3;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(16, 24, 40, .16);
	font: 400 14px/1.4 var(--app-font-family);
	color: #1f2937;
	overflow: hidden;
}

.lt-colmenu-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px 7px;
	font-size: 14px;
	font-weight: 700;
	color: #1e3a8a;
	border-bottom: 1px solid #eef1f6;
}

.lt-colmenu-h small {
	font-size: 14px;
	font-weight: 600;
	color: #8a94a6;
}

.lt-colmenu-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 0;
}

.lt-colmenu-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 12px 4px 8px;
	user-select: none;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}

.lt-colmenu-item.dragging {
	opacity: .45;
}

.lt-colmenu-item.drop-before {
	border-top-color: #2563eb;
}

.lt-colmenu-item.drop-after {
	border-bottom-color: #2563eb;
}

.lt-colmenu-grip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 22px;
	color: #94a3b8;
	cursor: grab;
	border-radius: 4px;
}

.lt-colmenu-grip:hover {
	color: #2563eb;
	background: #eff6ff;
}

.lt-colmenu-name {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
}

.lt-colmenu-item input.lt-colw {
	flex: none;
	width: 64px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	font: 500 13px var(--app-font-family);
	text-align: right;
	color: #1f2937;
	background: #fff;
	accent-color: auto;
	cursor: text;
}

.lt-colmenu-item input.lt-colw:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

.lt-colmenu-item input.lt-colw::placeholder {
	color: #a3acba;
}

.lt-colmenu-item:hover {
	background: #f4f6fa;
}

.lt-colmenu-name > input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: #2563eb;
	cursor: pointer;
}

.lt-colmenu-name > input:disabled {
	cursor: default;
}

.lt-colmenu-name > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lt-colmenu-name > small {
	flex: none;
	font-size: 14px;
	color: #8a94a6;
}

.lt-colmenu-f {
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid #eef1f6;
	background: #fbfcfe;
}

.lt-colmenu-f button {
	flex: 1 1 0;
	height: 28px;
	border: 0;
	border-radius: 7px;
	font: 600 13px var(--app-font-family);
	color: #fff;
	background: #2563eb;
	cursor: pointer;
}

.lt-colmenu-f .lt-colmenu-cancel {
	background: #64748b;
}

.lt-colmenu-f .lt-colmenu-save {
	background: #2563eb;
}

.lt-colmenu-tip {
	padding: 6px 12px 8px;
	font-size: 14px;
	color: #8a94a6;
	background: #fbfcfe;
}

/* Đổi vị trí cột: ô tiêu đề đang kéo mờ đi, vạch xanh chỉ chỗ thả (js/lt-grid.js) */
.thead > .lt-mv-src {
	opacity: .45;
	background: #eff6ff;
}

body.lt-mv-drag,
body.lt-mv-drag * {
	cursor: grabbing !important;
	user-select: none !important;
}

.lt-mv-marker {
	position: fixed;
	z-index: 1055;
	display: none;
	width: 3px;
	border-radius: 2px;
	background: #2563eb;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
	pointer-events: none;
}

.lt-mv-marker.on {
	display: block;
}

/* Cố định tiêu đề khi cuộn: khung lưới cuộn dọc trong vùng nhìn thấy (--lt-max-h do js/lt-grid.js tính), tiêu đề dính trên, dòng tổng dính dưới */
[data-lt-sticky] {
	overflow: auto !important;
	max-height: var(--lt-max-h, none);
}

[data-lt-sticky] > .g.thead {
	position: sticky;
	top: 0;
	z-index: 4;
}

/* Hàng lọc theo cột (do lt-grid.js dựng cho lưới div.g) dính ngay dưới tiêu đề khi cuộn, như tiêu đề; hàng lọc của máy chủ (.lt-colfilter) có quy tắc riêng ở smart-list.css */
[data-lt-sticky] > .g.lt-filter-row {
	position: sticky;
	top: var(--lt-thead-h, 32px);
	z-index: 4;
}

[data-lt-sticky] > .g.tsum,
[data-lt-sticky] > .g[class*="-total"] {
	position: sticky;
	bottom: 0;
	z-index: 3;
}

/* Menu cột dạng hộp thoại: lớp nền chặn bấm ra ngoài (không đóng), nút X, hàng Hiện tất cả / Mặc định */
.lt-colmenu-scrim {
	position: fixed;
	inset: 0;
	z-index: 1058;
	background: rgba(15, 23, 42, .12);
}

.lt-colmenu-h .lt-colmenu-x {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
}

.lt-colmenu-h .lt-colmenu-x:hover {
	background: #fee2e2;
	color: #dc2626;
}

.lt-colmenu-h > small {
	margin-left: auto;
}

.lt-colmenu-tools {
	display: flex;
	gap: 8px;
	padding: 8px 12px 0;
	border-top: 1px solid #eef1f6;
}

.lt-colmenu-tools button {
	flex: 1 1 0;
	height: 26px;
	border: 0;
	border-radius: 7px;
	font: 600 13px var(--app-font-family);
	color: #1e3a8a;
	background: #eef4ff;
	cursor: pointer;
}

.lt-colmenu-tools button:hover {
	background: #dbeafe;
}

/* Nút ghim (cố định cột bên trái khi cuộn ngang) trong menu cột */
.lt-colmenu-item .lt-colmenu-pin {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #a3acba;
	cursor: pointer;
}

.lt-colmenu-item .lt-colmenu-pin:hover {
	color: #2563eb;
	background: #eff6ff;
}

.lt-colmenu-item .lt-colmenu-pin.on {
	color: #fff;
	background: #2563eb;
	border-color: #2563eb;
}

.lt-colmenu-item .lt-colmenu-pin:disabled {
	opacity: .4;
	cursor: default;
	color: #a3acba;
	background: transparent;
	border-color: transparent;
}

/* Nút "Luôn hiện" của cột tự ẩn theo phiếu (vd cột chiết khấu); chỗ trống giữ thẳng hàng cho cột không tự ẩn */
.lt-colmenu-item .lt-colmenu-always.on {
	background: #16a34a;
	border-color: #16a34a;
}

.lt-colmenu-item .lt-colmenu-gap {
	flex: none;
	width: 26px;
	height: 26px;
}

/* Hàng lọc dưới tiêu đề bảng / lưới (menu Cột → "Hiện hàng lọc dưới tiêu đề") */
.lt-colmenu-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	border-top: 1px solid #eef1f6;
	font: 600 13px var(--app-font-family);
	color: #1e3a8a;
	cursor: pointer;
}

.lt-colmenu-filter input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: #2563eb;
}

.lt-filtered {
	display: none !important;
}

table.d-tbl > thead > tr.lt-filter-row > th {
	position: sticky;
	top: var(--lt-head-h, 32px);
	z-index: 2;
	height: auto;
	padding: 2px 4px;
	background: #f1f5fb;
	border-bottom: 1px solid #d6dee9;
	text-align: left;
	font-weight: 400;
}

.g.lt-filter-row {
	min-height: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	background: #f1f5fb;
	border-bottom: 1px solid #d6dee9;
}

.lt-filter-row .lt-filter-in {
	width: 100%;
	min-width: 0;
	height: 26px;
	box-sizing: border-box;
	padding: 0 6px;
	border: 1px solid #d6dee9;
	border-radius: 6px;
	background: #fff;
	font: 400 13px var(--app-font-family);
	color: #1f2937;
	outline: none;
}

.lt-filter-row .lt-filter-in:focus {
	border-color: #93b4ef;
	box-shadow: 0 0 0 2px #eef4ff;
}

/* Menu "Tuỳ chỉnh bảng": tiêu đề từng phần (Cột hiển thị / Tiện ích bảng) */
.lt-colmenu-sec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 12px 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #64748b;
}

.lt-colmenu-sec small {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #8a94a6;
}

.lt-colmenu-tools {
	padding-bottom: 8px;
	border-top: 0;
	border-bottom: 1px solid #eef1f6;
}

.lt-colmenu-filter {
	border-top: 0;
	padding-top: 2px;
}

.lt-colmenu-tip {
	border-top: 1px solid #eef1f6;
}

/* Đang lọc: ô số của dòng Cộng / Tổng cộng hiện tổng các dòng còn hiện (số gốc ẩn) */
.lt-fsum-on,
.lt-fsum-on > * {
	font-size: 0 !important;
}

.lt-fsum-on > .lt-fsum {
	font-size: var(--lt-fs, 14px) !important;
	font-weight: 700;
	color: #2563eb;
}

/* Cột # (số thứ tự) đứng đầu lưới div / bảng: hẹp, số màu chữ phụ, căn giữa, không chừa lề trái */
.c-idx {
	justify-content: center;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center !important;
	color: var(--txt3, #8a94a6) !important;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

/* Vùng số của cột # rộng --lt-idx-w (mặc định 20px, đủ 2 chữ số); trang đang hiện số từ 3 chữ số trở lên thì js/lt-grid.js đặt --lt-idx-w
   trên khung lưới / bảng bằng bề ngang số dài nhất. Lưới div.g: khuôn cột từng màn khai track đầu var(--lt-idx-w, 16px).
   Bảng dòng hàng form phiếu kẻ ô (tiêu đề th.c-no data-lt-fixed ghi "#", ô c-no): vùng số + đệm đều 6px hai bên (mặc định 28px), số căn giữa giữa hai vạch kẻ;
   cột c-no khác (vd Số phiếu ở hộp kế thừa) giữ bề rộng riêng. */
th.c-no[data-lt-fixed]:not(.c-idx),
table:has(> thead > tr > th.c-no[data-lt-fixed]:not(.c-idx)) > :is(tbody, tfoot) > tr > td.c-no {
	box-sizing: border-box;
	width: calc(var(--lt-idx-w, 20px) + var(--lt-idx-cell-pad, 12px)) !important;
	min-width: calc(var(--lt-idx-w, 20px) + var(--lt-idx-cell-pad, 12px)) !important;
	max-width: calc(var(--lt-idx-w, 20px) + var(--lt-idx-cell-pad, 12px)) !important;
	padding-left: calc(var(--lt-idx-cell-pad, 12px) / 2) !important;
	padding-right: calc(var(--lt-idx-cell-pad, 12px) / 2) !important;
	text-align: center;
}

/* Bảng (table): bề ngang ô = vùng số + --lt-idx-cell-pad (10px); cột kế bên có đệm trái 6px nên đệm ô # chia 8px trái / 2px phải, khe nhìn thấy hai bên số đều 8px.
   Ô c-no thân bảng có tiêu đề th.c-no.c-idx đi cùng cách để số thẳng hàng với chữ "#". */
th.c-idx,
td.c-idx,
table:has(> thead > tr > th.c-no.c-idx) > :is(tbody, tfoot) > tr > td.c-no {
	width: calc(var(--lt-idx-w, 16px) + var(--lt-idx-cell-pad, 10px)) !important;
	min-width: calc(var(--lt-idx-w, 16px) + var(--lt-idx-cell-pad, 10px)) !important;
	max-width: calc(var(--lt-idx-w, 16px) + var(--lt-idx-cell-pad, 10px)) !important;
	padding-left: calc(var(--lt-idx-cell-pad, 10px) / 2 + 3px) !important;
	padding-right: calc(var(--lt-idx-cell-pad, 10px) / 2 - 3px) !important;
}

/* Ô ghim (cột #, cột Chức năng…) dính khi cuộn ngang tạo lớp xếp chồng riêng: ô đang mở menu / danh sách thả (neo position: fixed)
   phải nổi lên trên các ô ghim của dòng khác, nếu không menu bị che khi bảng cuộn ngang. */
.g > :has(.srm-menu, .srm-veil, [role="menu"], [role="listbox"]),
table > :is(thead, tbody, tfoot) > tr > :has(.srm-menu, .srm-veil, [role="menu"], [role="listbox"]) {
	z-index: 60 !important;
}

/* Cột Chức năng (ô tiêu đề, ô dòng, hàng lọc, dòng tổng): đệm ngang chung mọi màn để chữ / nút không sát mép cột.
   Bề rộng cột khai trong CSS từng màn = nội dung lớn nhất (tiêu đề "Chức năng" hoặc "Sửa / Xem ▾"…) + 2 × 8 − 14 (lề phải âm phủ đệm phải 14px của hàng). */
.g > :is(.row-acts-h, .row-acts-f, .row-acts-c, .row-acts, .srm) {
	padding-left: 8px;
	padding-right: 8px;
}

/* Cột # cân hai bên: đệm trái của hàng bằng khoảng cách cột (gap lưới, mặc định 12px) để số # cách viền trái đúng bằng cách cột kế bên */
.g:has(> .c-idx:first-child) {
	padding-left: var(--lt-idx-pad, 12px) !important;
}

.c-idx {
	margin-left: 0 !important;
}

.g.thead > .c-idx,
thead th.c-idx {
	cursor: default;
}

/* Ô dữ liệu bảng một dòng: chữ dài không xuống hàng mà cắt bằng dấu …; trỏ chuột vào ô bị cắt hiện đủ chữ (title, js/lt-grid.js).
   Áp hàng dữ liệu / hàng tổng của lưới div.g và table.d-tbl; bỏ qua hàng lọc theo cột, ô đang có ô nhập / dropdown, ô Chức năng
   và ô đặt lớp lt-wrap (ô được phép nhiều dòng). Dropdown trong ô neo position: fixed nên không bị cắt. */
.g:not(.thead, .lt-filter-row, .lt-colfilter) > :not(.lt-wrap):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea, [contenteditable="true"], .srm, .lts, .lta, .ltt, .ltd, .sod, .mc-sel, .combo-btn))) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ô dạng flex (mã + biểu tượng, chữ + nhãn): phần chữ con (không lồng thẻ khác) được co lại và hiện … thay vì tràn khỏi ô */
.g:not(.thead, .lt-filter-row, .lt-colfilter) > :not(.lt-wrap) > :where(span, a, b, strong, em, small, div, label, p):not(:has(*)):where(:not([class*="pill"], [class*="badge"], [class*="tag"], [class*="chip"], [class*="dot"], .code, .mono)) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.d-tbl > thead > tr:not(.lt-filter-row) > th:not(.lt-wrap):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea))),
table.d-tbl > :is(tbody, tfoot) > tr > td:not(.lt-wrap):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea, [contenteditable="true"], .srm, .lts, .lta, .ltt, .ltd, .sod, .mc-sel, .combo-btn, table))) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bảng tự giãn cột (chưa kéo độ rộng): ô chữ rộng tối đa --lt-td-max rồi hiện …; màn cần rộng hơn đặt lại biến hoặc max-width */
:where(table.d-tbl:not([data-lt-cols])) > :where(tbody, tfoot) > tr > td:where(:not([colspan], .lt-wrap)) {
	max-width: var(--lt-td-max, 360px);
}

/* Ô căn giữa của bảng chi tiết (luật căn lề: tiêu đề theo ô dưới; ô trạng thái / thao tác ngắn, ô tích được căn giữa) — 22/10 */
table.d-tbl :is(td, th).c {
	text-align: center;
}

/* Cột thao tác / chức năng của bảng chi tiết (22/10, user: "cột chức năng không để xuống dòng"): rộng vừa nội dung, các nút nằm một hàng.
   Gắn lớp c-act cho th + td; ô có từ hai nút trở lên (ob-iconbtn / act-btn / ob-btn) tự hưởng cùng quy tắc dù chưa gắn lớp. */
table.d-tbl :is(td, th).c-act,
table.d-tbl td:has(> :is(.ob-iconbtn, .act-btn, .ob-btn) ~ :is(.ob-iconbtn, .act-btn, .ob-btn)) {
	width: 1%;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}

table.d-tbl :is(td, th).c-act {
	text-align: center;
}

table.d-tbl td.c-act > :is(.ob-iconbtn, .act-btn, .ob-btn) + :is(.ob-iconbtn, .act-btn, .ob-btn) {
	margin-left: 2px;
}

/* Nền ô # (và mọi ô ghim) LUÔN theo nền dòng (22/10): ô ghim phải đặc (che chữ cuộn qua) nhưng không được có nền riêng khác dòng.
   Bảng table: --lt-row-bg đặt theo trạng thái dòng; js/lt-grid.js (applyTablePins) và các ô c-idx / c-no ghim đều dùng var(--lt-row-bg, #fff).
   Lưới div.g: js/lt-grid.js đặt --lt-row-bg theo loại hàng, riêng hàng rê chuột bổ sung ở đây. */
table.d-tbl > thead > tr, table.d-tbl > tfoot > tr { --lt-row-bg: #f8fafc; }
table.d-tbl > tbody > tr:hover { --lt-row-bg: #fafcff; }
table.d-tbl > tbody > tr:is(.on, .sel, .selected) { --lt-row-bg: var(--pri-soft, #eef4ff); }
table.d-tbl > tbody > tr.alt { --lt-row-bg: #fafbfd; }
.g.trow:hover:not(.sel) { --lt-row-bg: #fafcff; }

/* Ô thân bảng luôn có nền theo dòng (độ ưu tiên 0, nền riêng của trang vẫn thắng): ô # / Chức năng ghim không còn khác nền ô thường. */
:where(table.d-tbl > tbody > tr > td) {
	background-color: var(--lt-row-bg, #fff);
}

table.d-tbl > tbody > tr > :is(td, th).c-idx,
table:has(> thead > tr > th.c-no[data-lt-fixed]) > tbody > tr > td.c-no {
	background-color: var(--lt-row-bg, #fff);
}

/* Ô # của hàng tiêu đề / dòng Cộng: độ ưu tiên 0 để màu riêng của hàng tiêu đề / dòng Cộng trong CSS từng màn (vd nền xanh của lưới form phiếu) vẫn thắng. */
:where(table.d-tbl > :is(thead, tfoot) > tr > :is(td, th).c-idx) {
	background-color: var(--lt-row-bg, #f8fafc);
}

/* Cột liền sau cột # đệm trái 6px để chữ không chạm sát số # khi cuộn ngang (không đổi bề rộng cột #). */
:is(th, td).c-idx + :is(th, td) {
	padding-left: 6px !important;
}

/* Kẻ dọc mờ giữa các cột của lưới danh sách div.g (như bảng nội dung phiếu): vạch nằm giữa khoảng hở cột (khoảng hở 12px → lệch 6px, chỉnh bằng --lt-vline-x),
   cao hết dòng nhờ dòng cắt phần tràn (overflow: clip, không ảnh hưởng cột ghim). Bỏ qua hàng lọc, hàng đang mở menu / dropdown và cột Chức năng ghim (đã có viền riêng). */
.g:not(.lt-filter-row, .lt-colfilter):not(:has(.srm-menu, .srm-veil, [role="menu"], [role="listbox"], .lts.open, .sdr.open, .snr.open)) {
	overflow: clip;
}

.g:not(.lt-filter-row, .lt-colfilter) > :where(:not(:first-child, .row-acts-h, .row-acts-f, .row-acts-c, .row-acts, .srm, .actcell)) {
	position: relative;
}

/* Ô cắt chữ bằng … (overflow hidden) sẽ cắt luôn vạch nằm ngoài mép ô: đổi sang clip (vẫn cắt chữ, vẫn …) và cho vẽ tràn 16px để vạch hiện giữa khe cột. */
.g:not(.lt-filter-row, .lt-colfilter):not(:has(.srm-menu, .srm-veil, [role="menu"], [role="listbox"], .lts.open, .sdr.open, .snr.open)) > :not(:first-child, .row-acts-h, .row-acts-f, .row-acts-c, .row-acts, .srm, .actcell) {
	overflow: clip !important;
	overflow-clip-margin: 16px;
}

.g:not(.lt-filter-row, .lt-colfilter):not(:has(.srm-menu, .srm-veil, [role="menu"], [role="listbox"], .lts.open, .sdr.open, .snr.open)) > :not(:first-child, .row-acts-h, .row-acts-f, .row-acts-c, .row-acts, .srm, .actcell)::before {
	content: "";
	position: absolute;
	top: -100px;
	bottom: -100px;
	left: var(--lt-vline-x, -6px);
	border-left: 1px solid var(--lt-vline, #eef1f6);
	pointer-events: none;
}

/* Bảng table.d-tbl trên trang danh sách (vd bảng dòng hàng của phiếu đang chọn dưới danh sách) cũng kẻ dọc mờ; không áp trong form / popup
   (khung form .sff, hộp thoại) và lưới nhập của form phiếu (lớp "<x>-tbl" đã kẻ ô riêng); độ ưu tiên thấp để kiểu riêng của màn thắng. */
:where(table.d-tbl:not([class$="-tbl"][class*=" "]):not(.sff *, [role="dialog"] *, .modal *, .ob-modal *, .us-modal *, .rv-modal *, .ou-modal *)) > :where(thead, tbody, tfoot) > tr > :where(th, td) + :where(th, td) {
	border-left: 1px solid var(--lt-vline, #eef1f6);
}

/* Có kẻ dọc thì số # cân giữa viền trái và vạch đầu tiên: lưới div.g đệm trái hàng bằng nửa khe cột (vạch nằm giữa khe);
   bảng d-tbl (bảng có kẻ dọc ở trên) ô # đệm đều hai bên. */
.g:has(> .c-idx:first-child) {
	--lt-idx-pad: 6px;
}

:where(table.d-tbl:not([class$="-tbl"][class*=" "]):not(.sff *, [role="dialog"] *, .modal *, .ob-modal *, .us-modal *, .rv-modal *, .ou-modal *)) > :where(thead, tbody, tfoot) > tr > :is(th, td).c-idx {
	padding-left: calc(var(--lt-idx-cell-pad, 10px) / 2) !important;
	padding-right: calc(var(--lt-idx-cell-pad, 10px) / 2) !important;
}

/* Ô nhập trong ô bảng (td) cao 30px: ô gõ, ô chọn (SmartListSelect / SmartSelect / ô ngày / ô tự hoàn thành) đều 30px; dòng có ô nhập tự cao theo
   (chiều cao ô bảng chỉ là mức tối thiểu). Không áp cho ô tìm trong khung bung của dropdown / lịch nằm trong ô. */
table > :is(tbody, tfoot) > tr > td {
	--sls-h: 30px;
	--lts-h: 30px;
	--ltd-h: 30px;
	--ssp-h: 30px;
	--lta-h: 30px;
	--sms-h: 30px;
}

table > :is(tbody, tfoot) > tr > td :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"]), select):not(:is([class*="-menu"], [class*="-pop"], [role="dialog"], [role="listbox"]) *) {
	box-sizing: border-box;
	height: 30px !important;
	min-height: 30px;
}

/* Tên hiển thị riêng của cột (menu Cột → sửa tên): lt-grid.js thêm span.lt-name (không có chữ) cuối ô tiêu đề; chữ gốc vẫn nằm trong ô
   (khoá lưới, Excel theo chữ gốc) nhưng ẩn bằng cỡ chữ 0, tên mới vẽ bằng ::before của span (attr() là chữ thuần) cùng cỡ chữ gốc (--lt-name-fs đo lúc gắn).
   Dùng :has thay vì gắn lớp lên ô vì Blazor ghi đè thuộc tính class của ô khi vẽ lại. */
.g.thead > :has(> .lt-name),
.g.thead > :has(> .lt-name) *:not(.lt-name),
table.d-tbl > thead > tr > th:has(> .lt-name),
table.d-tbl > thead > tr > th:has(> .lt-name) *:not(.lt-name) {
	font-size: 0 !important;
}

.lt-name {
	display: inline-block;
	order: -1;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--lt-name-fs, 14px) !important;
	vertical-align: middle;
}

.lt-name::before {
	content: attr(data-lt-name);
}

/* Ô sửa tên cột trong menu Cột: trông như chữ, viền xám khi rê / gõ */
.lt-colmenu-name > input.lt-colmenu-rename {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 26px;
	padding: 0 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	font: inherit;
	color: #1f2937;
	accent-color: auto;
	cursor: text;
	user-select: text;
	text-overflow: ellipsis;
}

.lt-colmenu-name > input.lt-colmenu-rename:hover {
	border-color: #e2e8f0;
	background: #fff;
}

.lt-colmenu-name > input.lt-colmenu-rename:focus {
	outline: none;
	border-color: #2563eb;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

.lt-colmenu-item .lt-colmenu-rename-reset[hidden] {
	display: none;
}

/* Cột mã (ô keycell, hoặc ô có mã lớp code) luôn một dòng, không xuống dòng và không cắt; lt-grid.js nới cột vừa mã dài nhất (trừ khi người dùng kéo độ rộng riêng). */
.g:not(.thead, .lt-filter-row, .lt-colfilter) > .keycell,
.g:not(.thead, .lt-filter-row, .lt-colfilter) > .keycell *,
.g:not(.thead, .lt-filter-row, .lt-colfilter) > * > .code {
	white-space: nowrap !important;
	text-overflow: clip !important;
	overflow-wrap: normal !important;
}

/* Ô lọc cục bộ của hàng lọc: cùng cỡ với ô lọc phía máy chủ (.slf-in): cao 28, chữ 14, có chữ gợi ý; cột trạng thái dùng ô chọn danh sách */
.lt-filter-row .lt-filter-in {
	height: 28px;
	padding: 0 8px;
	font-size: 14px;
}

.lt-filter-row .lt-filter-in::placeholder {
	color: #94a3b8;
}

.lt-filter-row .lt-filter-sel {
	cursor: pointer;
}

.lt-filter-row .lt-filter-in:not(:placeholder-shown),
.lt-filter-row .lt-filter-sel:has(option:checked:not([value=""])) {
	border-color: #93b4ef;
	background: #f7faff;
}

/* Chip / nhãn trạng thái trong ô bảng luôn trên một dòng; lt-grid.js nới cột vừa chip (cột chỉ có một chip) */
.g:not(.thead, .lt-filter-row, .lt-colfilter) > * > :is([class*="pill"], [class*="chip"], [class*="badge"]) {
	white-space: nowrap;
}