/* 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;
}

/* Lưới div.g: mũi tên sắp xếp nằm bên phải ô tiêu đề (căn giữa dọc), không rơi xuống dưới chữ khi tiêu đề xếp hai dòng (hd2) */
.g.thead > .lt-sort {
	position: relative;
	padding-right: 18px;
}

.g.thead > .lt-sort::after {
	position: absolute;
	right: 4px;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

.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: 10px;
	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: 8px;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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: 13px;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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: 13px;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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: 13px;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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 Inter, "Segoe UI", system-ui, sans-serif;
	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: 13px;
	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 (29/10, user: "không ... khi quá dài nữa mà cho tự xuống dòng"): chữ dài tự xuống dòng, hàng cao theo nội dung.
   Áp hàng dữ liệu / hàng tổng của lưới div.g và table.d-tbl (ghi đè nowrap / … của CSS từng màn); bỏ qua hàng lọc theo cột,
   ô đang có ô nhập / dropdown, ô số / ngày (num), cột # và cột Chức năng. Tiêu đề cột vẫn một dòng, cắt bằng …. */
.g:not(.thead, .lt-filter-row, .lt-colfilter) > :where(:not(.num, .c-idx, .row-acts, .row-acts-c, .row-acts-f, .srm, .c-act)):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea, [contenteditable="true"], .srm, .lts, .lta, .ltt, .ltd, .sod, .mc-sel, .combo-btn))),
.g:not(.thead, .lt-filter-row, .lt-colfilter) > :where(:not(.num, .c-idx, .row-acts, .row-acts-c, .row-acts-f, .srm, .c-act)) :where(span, a, b, strong, em, small, div, label, p):where(:not(button, [class*="pill"], [class*="badge"], [class*="tag"], [class*="chip"], [class*="dot"])),
table.d-tbl > :is(tbody, tfoot) > tr > td:where(:not(.num, .c-idx, .c-act, .c-no)):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea, [contenteditable="true"], .srm, .lts, .lta, .ltt, .ltd, .sod, .mc-sel, .combo-btn, table))),
table.d-tbl > :is(tbody, tfoot) > tr > td:where(:not(.num, .c-idx, .c-act, .c-no)) :where(span, a, b, strong, em, small, div, label, p):where(:not(button, [class*="pill"], [class*="badge"], [class*="tag"], [class*="chip"], [class*="dot"])) {
	white-space: normal !important;
	overflow-wrap: break-word;
	text-overflow: clip !important;
}

.g:not(.thead, .lt-filter-row, .lt-colfilter) > :where(:not(.num, .c-idx, .row-acts, .row-acts-c, .row-acts-f, .srm, .c-act)) :where(span, a, b, strong, em, small, div, label, p):not(:has(*)) {
	min-width: 0;
}

table.d-tbl > thead > tr:not(.lt-filter-row) > th:not(.lt-wrap):where(:not(:has(input:not([type="checkbox"], [type="radio"]), select, textarea))) {
	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;
}

/* Hàng tiêu đề có nhóm cột (.g.thead.has-gg): MỘT lưới hai hàng. Hàng 1 cao --lt-gg-h chứa ô nhóm (data-lt-grp, đặt cuối DOM, grid-column: bắt đầu / span N),
   hàng 2 chứa ô tiêu đề cột; cột không thuộc nhóm (gh-span) chiếm cả hai hàng. Kẻ dọc dùng chung một cơ chế ::before cho mọi ô nên thẳng hàng và cùng màu. */
.g.thead.has-gg {
	--lt-gg-h: 30px;
	grid-template-rows: var(--lt-gg-h) auto;
	/* .g có gap 12px cả chiều dọc: bỏ khe giữa hai hàng để kẻ dọc hàng nhóm nối liền với kẻ dọc hàng tiêu đề cột */
	row-gap: 0;
	/* Theo bảng chuẩn report/stock-keeper/in-out-balance: nền #f3f7fd, chữ xanh đậm #1e40af, đậm 600, kẻ đậm #c9d4e3 ở đáy tiêu đề và ở ranh giới nhóm */
	background: #f3f7fd;
	color: #1e40af;
	font-size: var(--tbl-fs-head, 14px);
	font-weight: 600;
	border-bottom: 1px solid #c9d4e3;
}

.g.thead.has-gg > :not([data-lt-grp]) {
	grid-row: 2;
}

.g.thead.has-gg > .gh-span {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
}

.g.thead.has-gg > .gh-span.num {
	justify-content: flex-end;
}

.g.thead.has-gg > .gh-span.c-idx {
	justify-content: center;
}

.g.thead.has-gg > [data-lt-grp] {
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* Nới nửa khe cột hai bên để các nhóm liền nhau, gạch chân liền mạch */
	margin: 0 -6px;
	border-bottom: 1px solid #c9d4e3;
}

/* Kẻ dọc trong hàng tiêu đề có nhóm: mỗi ô tự vẽ vạch bên trái đúng giữa khe cột, cao đúng bằng ô (ô nhóm chỉ cao hàng 1, ô thường chỉ cao hàng 2, ô gh-span cao cả hai) */
.g.thead.has-gg > * {
	position: relative;
}

.g.thead.has-gg > *::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: -6px !important;
	width: 0 !important;
	border-left: 1px solid transparent !important;
	pointer-events: none;
}

/* Chỉ có kẻ dọc đậm ở ranh giới nhóm (giống th.bl của bảng chuẩn): ô nhóm, và cột đầu nhóm do CSS từng màn đánh dấu bằng :nth-child */
.g.thead.has-gg > [data-lt-grp]::before {
	left: 0 !important;
	bottom: -1px !important;
	border-left-color: #c9d4e3 !important;
}

/* Thân bảng của lưới có nhóm cột: bỏ vạch dọc mờ từng cột, chỉ giữ vạch đậm ở ranh giới nhóm (CSS từng màn) */
.ob-scroll:has(> .g.thead.has-gg) > .g:not(.thead, .lt-filter-row) > *::before {
	border-left-color: transparent !important;
}

.g.thead.has-gg > :first-child::before {
	display: none !important;
}

/* Hàng lọc dính ngay dưới hàng tiêu đề (cao = --lt-thead-h do lt-grid.js đo cả hai hàng) */

/* Dòng Cộng cuối bảng (dính đáy): nền đặc để các dòng cuộn phía dưới không lộ ra xuyên qua */
[data-lt-sticky] > .g.tsum,
[data-lt-sticky] > .g[class*="-total"] {
	background: #f3f7fd;
	border-top: 1px solid #c9d4e3;
	z-index: 6;
}