/* =============================================================================
   Theme của thư viện SmartSoftware.Framework.Ui.Blazor (nạp toàn cục ở index.html).
   Các component Smart* tự mang kiểu (.razor.css) với giá trị mặc định = khuôn chung (ob / sm-page);
   khác biệt hiển thị của từng phân hệ CHỈ đặt bằng biến CSS ở một lớp theme trên gốc trang / gốc form,
   không chép lại CSS dựng component.

   Biến theme theo component (mặc định trong ngoặc):
     SmartModal        --smd-w (720px) --smd-w-sm (440px) --smd-w-lg (880px) --smd-w-xl (1080px) --smd-r (12px)
                       --smd-body-pad (16px) --smd-z (1060) --smd-warn (#7c3aed) --smd-warn-hover (#6d28d9)
     SmartSelect       --lts-h (32px)
     SmartDatePicker   --ltd-h (32px)
     SmartTreeSelect   --sf-h (32px)
     SmartListSelect   --sls-h (32px) --sls-pad (9px) --sls-r (7px) --sls-menu-h (260px)
     SmartMultiSelect  --sms-h (32px)
     SmartSearchPicker --ssp-h (32px)
     SmartSectionHeader --ssh-pad (12px 14px 10px) --ssh-ic (28px) --ssh-title-size (13.5px)
     SmartPager Compact --pager-mt (8px) --pager-font (13px)
     SmartFormFrame    --sff-h (100dvh) --sff-pad (8px) --sff-gap (8px) --sff-side-w (340px) --sff-bg (var(--bg))
     SmartFormTabs Main --sft-mt --sft-menu-w --sft-strip --sft-page --sft-on-color (Main kiểu Chrome; Sub kiểu pill)
     SmartDetailPanel  --sdp-w (clamp(300px, 28%, 352px)) --sdp-gap (8px) --sdp-body-pad (10px 12px)
     SmartStatTiles    --sst-gap (8px) --sst-bg --sst-border --sst-r --sst-shadow
     SmartProgressBar  --spb-h (7px) --spb-track (#eef1f6) --spb-m (7px 0 5px)
     SmartPill         --spill-pad (2.5px 8px) --spill-size (11.5px)
     SmartNote         --snote-pad (10px 12px) --snote-r (10px)
     SmartEmpty        --sem-pad (26px) --sem-border (0) --sem-margin (0) --sem-r (10px)
     SmartSegmented    --sseg-pad (6px 12px) --sseg-font (13px) --sseg-r (7px)
     SmartField        --sf-cols (104px minmax(0,1fr) = nhãn trái) --sf-msg-col (2) --sf-h (30px) --sf-label-size (13px) --sf-label-weight (600) --sf-gap (4px 8px)
     SmartFieldGrid    --sfg-gap (6px 16px)
     SmartInlineEditor --sie-bg (var(--pri-soft)) --sie-pad (10px 12px) --sie-r (10px) --sie-margin (6px 8px)
   ============================================================================= */

/* ---------- Theme Khuyến mãi / Mục tiêu (KPI): tái tạo giao diện bản mẫu McRoot bằng biến ----------
   Đặt lớp theme-promo trên gốc trang (div.ob.sm-page.theme-promo) hoặc gốc form (SmartFormFrame Class="theme-promo").
   Bộ token màu đầy đủ của bản mẫu (cả --pur / --cyan / --pink); McRootForOrder / DpRoot đã xoá (22/10). */
.theme-promo {
	--bg: #f4f6fa;
	--card: #fff;
	--line: #e6eaf1;
	--line-soft: #eef1f6;
	--line-hover: #d8dee9;
	--txt: #1f2937;
	--txt2: #5b6577;
	--txt3: #6b7280;
	--pri: #2563eb;
	--pri-hover: #1d4ed8;
	--pri-strong: #1e3a8a;
	--pri-soft: #eef4ff;
	--pri-line: #c7dbff;
	--ok: #16a34a;
	--ok-strong: #15803d;
	--ok-soft: #eaf7ef;
	--warn: #f59e0b;
	--warn-text: #854d0e;
	--warn-soft: #fff7e8;
	--warn-line: #f7dfae;
	--dan: #dc2626;
	--dan-soft: #fdecec;
	--dan-line: #f3c7c7;
	--gray-soft: #f1f3f7;
	--pur: #7c3aed;
	--pur-soft: #f3eeff;
	--cyan: #0891b2;
	--cyan-soft: #e6f6fa;
	--pink: #db2777;
	--pink-soft: #fdeef6;
	--r: 10px;
	--r-sm: 7px;
	--sh: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
	--sh-md: 0 4px 16px rgba(16, 24, 40, .10);
	--sh-lg: 0 18px 48px rgba(16, 24, 40, .20);

	/* Hộp thoại hẹp hơn khuôn chung một chút như bản mẫu */
	--smd-w: 680px;

	/* Form chi tiết: thân rộng rãi, panel phải 352px */
	--sff-pad: 14px 18px;
	--sff-gap: 14px;
	--sff-side-w: 352px;

	/* Dải tab chính kiểu Chrome: khoảng cách phía trên */
	--sft-mt: 12px;
	--sft-strip-bg: #e9eef5;

	/* Ô nhập: nhãn trên 12px, ô cao 32px chữ 13px (như form chứng từ) */
	--sf-cols: minmax(0, 1fr);
	--sf-msg-col: 1;
	--sf-h: 32px;
	--sf-label-size: 13px;
	--sf-gap: 5px;
	--sfg-gap: 12px;

	/* Trạng thái rỗng trong thẻ: khung viền đứt */
	--sem-border: 1px dashed var(--line);
	--sem-margin: 0 14px 14px;
}

/* ---------- Theme mật độ gọn: ô nhập cao 30px như form chứng từ ----------
   Đặt lớp theme-compact trên gốc form (form danh mục hàng hoá, khách hàng, nhà cung cấp, nhân viên).
   Ô nhập tự dựng trong form đọc cùng biến --sf-h (vd height: var(--sf-h, 32px)); ô trong bảng d-tbl vẫn 28px (quy tắc td bên dưới gần hơn). */
.theme-compact {
	--sf-h: 30px;
	--lts-h: 30px;
	--ltd-h: 30px;
	--sls-h: 30px;
	--ssp-h: 30px;
	--lta-h: 30px;
	--sms-h: 30px;
}

/* Ô nhập / dropdown trong ô bảng (dòng sửa): cùng cao 28px với ô nhập chuẩn, không to hơn dòng 32px */
table.d-tbl :is(td, th) {
	--sls-h: 28px;
	--ssp-h: 28px;
	--lta-h: 28px;
	--sf-h: 28px;
}

table.d-tbl :is(td, th) :is(.lts-btn, .ltd-box, .ltt-btn) {
	height: 28px;
}

/* Khối sửa tại chỗ (SmartInlineEditor) nằm trong ô bảng nhưng là form: ô theo --sf-h của khối (32px) */
table.d-tbl :is(td, th) .sie :is(.lts-btn, .ltd-box, .ltt-btn) {
	height: var(--sf-h, 32px);
}

/* Ô lỗi của SmartTreeSelect: viền đỏ như các dropdown khác */
:is(.field, .sf).has-error .ltt-btn {
	border-color: var(--dan, #dc2626);
}

/* Hàng lọc theo cột của bảng: ô chọn gọn 28px */
.theme-promo :is(.lt-colfilter, .mc-colfilter, .lt-filter-row) {
	--sls-h: 28px;
	--ssp-h: 28px;
}

/* ---------- Lớp tiện ích của theme KM / KPI (thay phần còn lại của McRootForOrder, 22/10 đợt 3) ---------- */
.theme-promo .mt8 { margin-top: 8px; }
.theme-promo .mt12 { margin-top: 12px; }

/* Dải tab chính (SmartFormTabs Main) và thẻ nội dung ngay dưới là MỘT khối: thẻ bỏ viền trên, bo góc trên, khe trên (kể cả khi dải nằm trong div bọc). */
:is(.sft.main, :has(> .sft.main)) + .ob-card,
.theme-promo :is(.sft.main, :has(> .sft.main)) + .ob-card.mt12 {
	margin-top: 0;
	border-top: 0;
	border-radius: 0 0 var(--r) var(--r);
}
.theme-promo .nowrap { white-space: nowrap; }

/* Hàng tách hai đầu: trái chữ, phải số / nút */
.theme-promo .flexb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Cặp nhãn – giá trị trên một dòng: <div class="kv"><span class="k">…</span><span class="v">…</span></div>
   (khác .kv dạng lưới ô của danh mục: lưới đó dùng div con, không có .k) */
:is(.sm-page, .theme-promo) .kv:has(> .k) {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	font-size: 14px;
}

:is(.sm-page, .theme-promo) .kv > .k {
	color: var(--txt3);
}

:is(.sm-page, .theme-promo) .kv > .v {
	font-weight: 620;
	text-align: right;
}

/* Khối bậc thưởng: mỗi dòng một bậc (nhãn bậc · khoảng · ưu đãi) */
.theme-promo .tierbox {
	margin-top: 6px;
	padding: 8px 10px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
	background: #fbfcfe;
}

.theme-promo .tierrow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	padding: 3px 0;
	font-size: 13px;
}

.theme-promo .tierrow .lv {
	flex: none;
	width: 52px;
	font-weight: 650;
	color: var(--pri);
}

.theme-promo .tierrow .rg {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--txt2);
}

.theme-promo .tierrow .rw {
	flex: none;
	font-weight: 620;
	white-space: nowrap;
}

.theme-promo .tierrow .rw.muted {
	font-weight: 500;
	color: var(--txt3);
}

.theme-promo .tierrow .rw-go {
	cursor: pointer;
	border-bottom: 1px dashed transparent;
}

.theme-promo .tierrow .rw-go:hover {
	color: var(--pri);
	border-bottom-color: var(--pri);
}

/* Ô nhập trong dòng bậc (form thêm / sửa chỉ tiêu): cùng cỡ chữ 13px, bo, đệm với ô nhập chuẩn (dòng bậc dạng xem vẫn chữ nhỏ) */
.theme-promo .tierrow :is(input, select) {
	padding: 0 9px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background-color: #fff;
	color: var(--txt);
	font: inherit;
	font-size: 14px;
}

.theme-promo .tierrow :is(.mc-sel-btn, .lts-btn, .ltd-box) {
	font-size: 14px;
}

/* Ô tìm đầu bảng có biểu tượng kính lúp: <div class="tb-search"><SmartIcon Name="search"/><SmartSearch …/></div> */
.theme-promo .tb-search {
	position: relative;
	width: min(330px, 100%);
}

.theme-promo .tb-search input {
	width: 100%;
	height: var(--smart-search-h, 28px);
	padding: 0 10px 0 30px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fbfcfe;
	color: var(--txt);
	font: inherit;
	outline: none;
}

.theme-promo .tb-search input:focus {
	border-color: var(--pri-line);
	background: #fff;
	box-shadow: 0 0 0 3px var(--pri-soft);
}

.theme-promo .tb-search > svg {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--txt3);
	pointer-events: none;
}

/* Ô nhập gốc chưa nằm trong component (ô giờ, ô bậc, ô tên nhóm trong bảng…): viền / bo / nền chung.
   :where giữ độ ưu tiên thấp nhất — mọi kiểu riêng của component / lớp chung đều đè được. */
.theme-promo :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color]), select, textarea) {
	box-sizing: border-box;
	padding: 6px 9px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background-color: #fff;
	color: var(--txt);
	font: inherit;
	outline: none;
}

/* Ô một dòng cao 32px (theo --sf-h); ô trong ô bảng vẫn 28px (luật td bên dưới), component tự đặt cao thì giữ của nó */
.theme-promo :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color]), select) {
	height: var(--sf-h, 32px);
}

/* Mục trong menu dropdown cao tối thiểu 32px */
.theme-promo :is(.mc-sel-item, .lts-list li, .lta-list li, .ltt-row) {
	box-sizing: border-box;
	min-height: 32px;
}

.theme-promo :where(input:not([type=checkbox], [type=radio]), select, textarea):focus {
	border-color: var(--pri-line);
	box-shadow: 0 0 0 3px var(--pri-soft);
}

.theme-promo :where(input, select, textarea):disabled,
.theme-promo :where(input, textarea)[readonly] {
	background-color: #f4f6fa;
	color: var(--txt3);
}

.theme-promo :where(table.d-tbl td) > :where(input:not([type=checkbox], [type=radio])) {
	width: 100%;
	height: 28px;
	padding: 0 7px;
}

/* Chiều cao dòng bảng 32px + cỡ chữ chuẩn cho bảng d-tbl trong form / popup theme-promo (nằm ngoài .sm-page nên luật của sales-management.css không tới).
   Ô cố ý nhiều dòng: thêm lớp .multi hoặc .wrap. Cột # (.c-idx) giữ đệm của lt-grid.css; ô sửa dòng (input / dropdown) cao 28px. */
.theme-promo table.d-tbl {
	font-size: var(--tbl-fs, 14px);
}

.theme-promo table.d-tbl > thead > tr:not(.lt-filter-row) > th,
.theme-promo table.d-tbl > :is(tbody, tfoot) > tr > td {
	box-sizing: border-box;
	height: 32px;
	padding-block: 0;
	vertical-align: middle;
	line-height: 1.25;
}

.theme-promo table.d-tbl > thead > tr:not(.lt-filter-row) > th:not(.c-idx),
.theme-promo table.d-tbl > :is(tbody, tfoot) > tr > td:not(.c-idx) {
	padding-inline: 8px;
}

.theme-promo table.d-tbl > thead > tr:not(.lt-filter-row) > th {
	font-size: var(--tbl-fs-head, 14px);
	white-space: nowrap;
}

.theme-promo table.d-tbl > :is(tbody, tfoot) > tr > td:not(.multi, .wrap, .d-tfoot-label, :has(input, select, textarea, .mc-select, .lt-select)) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.theme-promo table.d-tbl .mono {
	font-size: var(--tbl-fs-mono, 14px);
}

.theme-promo table.d-tbl td :where(select, .mc-select, .lt-select):not(.sie *) {
	height: 28px;
}

/* Khung khoá nhập của chế độ XEM: <fieldset class="sm-fs" disabled="@viewing"> bọc phần nhập liệu; không tạo hộp riêng (display: contents). */
fieldset.sm-fs {
	display: contents;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Luật (22/10): nút trên CÙNG MỘT HÀNG cùng một kiểu. Vùng nút của thư viện (đầu thẻ, menu chọn mục, thanh nút dưới, chân hộp)
   đã có nút tô đặc thì nút viền còn lại cũng tô đặc theo nghĩa: thường → xám, danger → đỏ, soft → xanh dương. */
:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon)) {
	background: #64748b;
	border-color: #64748b;
	color: #fff;
}

:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon)):hover:not(:disabled) {
	background: #475569;
	border-color: #475569;
}

:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn:is(.danger, .dangerline):not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) {
	background: #dc2626;
	border-color: #dc2626;
}

:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn:is(.danger, .dangerline):not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)):hover:not(:disabled) {
	background: #b91c1c;
	border-color: #b91c1c;
}

:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn.soft:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) {
	background: #2563eb;
	border-color: #2563eb;
}

:is(.ssh-act, .stp-acts, .sff-start, .sff-sec, .sff-end, .m-foot):has(> .ob-btn:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)) > .ob-btn.soft:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill)):hover:not(:disabled) {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

/* Luật (22/10): mọi nút chữ của KM / KPI tô đặc theo nghĩa — chính / lưu / sửa xanh dương, thêm / chạy / duyệt xanh lá,
   dừng / rút về nháp cam, xoá / từ chối đỏ, huỷ / đóng / phụ (lịch sử, luồng duyệt, xuất / nhập Excel…) xám.
   Lưới an toàn cho nút chưa gắn màu: thường → xám, danger → đỏ, soft → xanh dương. Bỏ qua nút icon (.icon) và nút bật / tắt (.seg). */
.theme-promo .ob-btn:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)) {
	background: #64748b;
	border-color: #64748b;
	color: #fff;
}

.theme-promo .ob-btn:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)):hover:not(:disabled) {
	background: #475569;
	border-color: #475569;
	color: #fff;
}

.theme-promo .ob-btn:is(.danger, .dangerline):not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)) {
	background: #dc2626;
	border-color: #dc2626;
}

.theme-promo .ob-btn:is(.danger, .dangerline):not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)):hover:not(:disabled) {
	background: #b91c1c;
	border-color: #b91c1c;
}

.theme-promo .ob-btn.soft:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)) {
	background: #2563eb;
	border-color: #2563eb;
}

.theme-promo .ob-btn.soft:not(:is(.primary, .success, .dangerfill, .neutral, .warnfill, .violetfill, .draftfill, .histfill, .excelfill, .inheritfill, .flowfill, .approvefill, .viewfill, .printfill, .dupfill, .icon, .seg)):hover:not(:disabled) {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

/* Nút thao tác bản ghi (.act-btn) của KM / KPI: tô đặc màu nghĩa (trước là nền nhạt chữ màu); c-gray cho nút phụ (Nhân bản…). */
.theme-promo .act-btn.c-gray {
	--a: #64748b;
	--a-soft: #f1f5f9;
	--a-line: #cbd5e1;
}

.theme-promo .act-btn {
	border-color: var(--a);
	background: var(--a);
	color: #fff;
}

.theme-promo .act-btn:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--a) 82%, #000);
	background: color-mix(in srgb, var(--a) 82%, #000);
	color: #fff;
}

/* Nút chữ của thanh công cụ danh sách (vd Bỏ lọc): xám đặc; nút biểu tượng giữ nguyên. */
.theme-promo .slt-btn:not(.primary, .icon, .pa-icon) {
	border-color: #64748b;
	background: #64748b;
	color: #fff;
}

.theme-promo .slt-btn:not(.primary, .icon, .pa-icon):hover:not(:disabled) {
	border-color: #475569;
	background: #475569;
}

/* BẢNG MÀU NÚT GỌN (22/10, thay bảng 11 màu): tối đa 3 màu nổi trong một thanh — xanh dương chính, xanh lá thêm / chạy, đỏ xoá / từ chối;
   dừng / rút cam; xám chỉ cho Huỷ / Đóng; MỌI nút phụ (Lịch sử, Excel, Kế thừa, Luồng duyệt, Chi tiết / Xem…) cùng một màu teal, phân biệt bằng icon + chữ; In xanh da trời, Nhân bản tím (luật riêng bên dưới). */
.sm-page .ob-btn:is(.histfill, .printfill, .excelfill, .inheritfill, .flowfill, .viewfill, .violetfill) { background: #0f766e; border-color: #0f766e; color: #fff; }
.sm-page .ob-btn:is(.histfill, .printfill, .excelfill, .inheritfill, .flowfill, .viewfill, .violetfill):hover:not(:disabled) { background: #115e59; border-color: #115e59; color: #fff; }

/* In tách màu riêng (xanh da trời) để không trùng Lịch sử (teal) đứng cạnh trên thanh nút của phiếu / đơn */
.sm-page .ob-btn.printfill, .theme-promo .ob-btn.printfill { background: #0284c7; border-color: #0284c7; color: #fff; }
.sm-page .ob-btn.printfill:hover:not(:disabled), .theme-promo .ob-btn.printfill:hover:not(:disabled) { background: #0369a1; border-color: #0369a1; color: #fff; }

/* Nút thao tác bản ghi (.act-btn): thêm c-pink (Nhân bản) và c-sky (Chi tiết / Xem) */
.theme-promo .act-btn:is(.c-sky, .c-teal) { --a: #0f766e; --a-soft: #e6f4f2; --a-line: #b7dfda; }

/* Nút "Duyệt đơn chờ duyệt" nằm cùng hàng với nút Thêm (danh sách đơn hàng): chàm để không trùng xanh lá của Thêm.
   Nút Duyệt ở nơi khác (thanh dưới form, hộp lý do) giữ xanh lá success. */
html body .ob-btn.approvefill.approvefill.approvefill,
html body #layout-content .pa-primary.approvefill.approvefill {
	background: #4f46e5;
	border-color: #4f46e5;
	color: #fff;
}

html body .ob-btn.approvefill.approvefill.approvefill:hover:not(:disabled),
html body #layout-content .pa-primary.approvefill.approvefill:hover:not(:disabled) {
	background: #4338ca;
	border-color: #4338ca;
	color: #fff;
}

/* Nhân bản tím riêng để không trùng màu Chi tiết / các nút phụ teal */
.sm-page .ob-btn.dupfill, .theme-promo .ob-btn.dupfill { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.sm-page .ob-btn.dupfill:hover:not(:disabled), .theme-promo .ob-btn.dupfill:hover:not(:disabled) { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.theme-promo .act-btn:is(.c-pink, .c-purple) { --a: #7c3aed; --a-soft: #f3edff; --a-line: #d8c8fb; }

/* ---------- Sơ đồ nhóm điều kiện của KM (dùng chung tab Điều kiện và tab Logic kết hợp, 22/10) ----------
   Nhóm là khối bo góc, tiêu đề "Nhóm A - OR (3 điều kiện)", chip điều kiện dính viền nhau (cao 32px), nối nhau bằng pill phép nối. */
.theme-promo .flow {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 14px 14px;
	min-width: 0;
}

.theme-promo .flow .joint,
.theme-promo .flow .flow-end {
	display: grid;
	place-items: center;
	flex: none;
}

.theme-promo .flow .grp {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 9px 11px;
	background: #fcfdff;
	flex: 1 1 260px;
	min-width: 0;
	max-width: 440px;
}

.theme-promo .flow .grp.gA { border-color: #cfe0ff; background: #f7faff; }
.theme-promo .flow .grp.gB { border-color: #e6d8ff; background: #faf7ff; }
.theme-promo .flow .grp.gC { border-color: #cdeef5; background: #f5fdff; }

.theme-promo .flow .grp-t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 28px;
	min-width: 0;
	margin-bottom: 7px;
	font-size: var(--tbl-fs-head, 14px);
	font-weight: 680;
}

.theme-promo .flow .grp-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.theme-promo .flow .grp-name .cnt {
	font-weight: 500;
	color: var(--txt3);
}

.theme-promo .flow .gA .grp-t { color: #1d4ed8; }
.theme-promo .flow .gB .grp-t { color: #6d28d9; }
.theme-promo .flow .gC .grp-t { color: #0e7490; }

.theme-promo .flow .cond-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 32px;
	min-width: 0;
	padding: 0 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-top-width: 0;
	font-size: var(--tbl-fs, 13px);
}

.theme-promo .flow .grp-t + .cond-chip { border-top-width: 1px; border-radius: 7px 7px 0 0; }
.theme-promo .flow .cond-chip:last-child { border-radius: 0 0 7px 7px; }
.theme-promo .flow .grp-t + .cond-chip:last-child { border-radius: 7px; }

.theme-promo .flow .cond-chip .k {
	flex: none;
	max-width: 45%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--txt3);
}

.theme-promo .flow .cond-chip .v {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: auto;
	text-align: right;
	font-weight: 620;
	color: var(--txt);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.theme-promo .flow .cond-chip svg { flex: none; color: var(--pri); }
.theme-promo .flow .gA .cond-chip svg { color: #1d4ed8; }
.theme-promo .flow .gB .cond-chip svg { color: #6d28d9; }
.theme-promo .flow .gC .cond-chip svg { color: #0e7490; }

@container sff (max-width: 560px) {
	.theme-promo .flow { padding: 0 8px 8px; }
	.theme-promo .flow .grp { flex-basis: 100%; max-width: none; }
	.theme-promo .flow .joint { flex: 1 1 100%; }
}

/* Biểu tượng Xuất Excel: ô X kiểu logo Excel cạnh trang bảng tính, màu xanh Excel để khác nút Thêm */
.xl-ic {
	color: #107c41;
}

/* Biểu tượng Tải lại: màu nhấn xanh dương của app, cùng hàng với icon Excel có màu */
.rl-ic {
	color: #2563eb;
}

/* Vạch đứng ngăn nhóm nút Xoá / Hủy với các nút thao tác khác ở chân form đơn, phiếu */
.ft-sep {
	flex: none;
	align-self: center;
	width: 1px;
	height: 22px;
	margin: 0 6px;
	background: #cbd5e1;
}

/* Không có nút nào sau vạch (không có quyền xoá, không ở chế độ sửa) thì ẩn vạch */
.ft-sep:last-child,
[class$="-grow"] + .ft-sep {
	display: none;
}

/* Chân form đơn, phiếu: các nút phụ (In, Lịch sử, Excel...) bên trái; Xoá, Hủy, Cất, Cất và In bên phải (sau khoảng trống co giãn) */



/* Nút Tiện ích: gom các nút phụ (Lịch sử, Xuất Excel...) vào menu xổ lên */
.ft-util { position: relative; display: inline-flex; align-items: center; }

.ft-util-mask { position: fixed; inset: 0; z-index: 40; }

.ft-util-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 41;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	padding: 4px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

.ft-util-menu button {
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1e293b;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.ft-util-menu button:hover:not(:disabled) { background: #f1f5f9; }
.ft-util-menu button:disabled { color: #94a3b8; cursor: default; }

/* Mục Xoá trong menu Tiện ích: chữ đỏ */
.ft-util-menu button.ft-util-danger { color: #dc2626; }
.ft-util-menu button.ft-util-danger:hover:not(:disabled) { background: #fef2f2; }

/* Nút mũi tên cạnh nút In (mở menu mẫu in): dính liền nút In */
html body footer .ob-btn.ft-caret {
	padding: 0 8px;
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

html body footer .ob-btn.printfill:has(+ .ft-caret) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Nút ở chân form đơn, phiếu rộng tối thiểu 80px (nút mũi tên của nút chia đôi và nút In nhỏ để gọn) */
html body footer .ob-btn:not(.icon):not(.ft-caret):not([class*="split-caret"]) {
	min-width: 80px;
	justify-content: center;
}

/* Dáng chung các nút chân form: cùng chiều cao, cùng bo góc, chữ vừa phải */
html body footer .ob-btn:not(.icon) {
	height: 28px;
	padding: 0 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

html body footer .sof-print,
html body footer [class$="-print"] { display: inline-flex; align-items: center; position: relative; }

/* Nút Tiện ích và nút mũi tên: mũi tên nhỏ vẽ bằng CSS (chữ V ngược), không dùng biểu tượng */
.ft-util > .ob-btn::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(-135deg) translate(-1px, -1px);
	margin-left: 4px;
	opacity: .75;
}

html body footer .ob-btn.ft-caret { min-width: 30px; padding: 0 8px; }
html body footer .ob-btn.ft-caret svg { display: none; }
html body footer .ob-btn.ft-caret::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(-135deg) translate(-1px, -1px);
}

.ft-util-menu { padding: 6px; min-width: 170px; }
.ft-util-menu button { padding: 9px 14px; font-weight: 500; }

/* Nút chia đôi (nút chính + mũi tên) ở chân form, vd nút In nhiều mẫu: hai nút dính liền như nút Cất và In */
html body footer .ft-btn-split {
	display: inline-flex !important;
	align-items: stretch;
	gap: 0 !important;
	position: relative;
}

html body footer .ft-btn-split > .ob-btn:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html body footer .ft-btn-split > .ob-btn.ft-caret {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55);
}

/* Nút chân mọi hộp thoại / form danh mục (lớp *-foot, *-footer): rộng tối thiểu 80px, không biểu tượng
   (trừ nút chỉ có biểu tượng, nút đóng X, mũi tên nút tách đôi; ot-foot là nút thêm dòng của bảng nhập con) */
:is([class*="-foot"], [class*="-footer"], .m-foot, footer, [class*="-actbar"]):not(.ot-foot, .sf-desc-foot, .d-tfoot-label) :is(button, .ob-btn, .of-btn):not([class*="icon"], [class*="close"], [class*="lta-"], [class*="pager"], [class*="chev"], [class*="caret"], .icon, .sm, .ft-caret, .smd-x) {
	min-width: 80px;
}

:is([class*="-foot"], [class*="-footer"], .m-foot, footer, [class*="-actbar"]):not(.ot-foot, .sf-desc-foot, .d-tfoot-label) :is(button, .ob-btn, .of-btn):not([class*="icon"], [class*="close"], [class*="lta-"], [class*="pager"], [class*="chev"], [class*="caret"], .icon, .sm, .ft-caret, .smd-x) svg {
	display: none;
}

/* Ô chọn nằm trong ô bảng hoà vào ô: bỏ nút mũi tên (bấm vào ô là mở danh sách), nút + không đổi nền khi rê chuột, chỉ đổi màu biểu tượng. */
table td .lta-chev,
.ot-cell .lta-chev { display: none !important; }
table td .lta-addbtn,
.ot-cell .lta-addbtn { border-left: 0 !important; border-radius: 0 !important; background: transparent !important; }
table td .lta-addbtn:hover,
.ot-cell .lta-addbtn:hover { background: transparent !important; color: #2563eb !important; }
table td :is(.mc-sel-btn, .lts-btn):hover { background: transparent !important; }