và gắn class op-form-open lên lúc mở (SetBodyClassAsync). Khối chỉ một form có (.op-status, .op-discount, .op-inv-status của đơn mua; .invoice-badge, .op-suggest-btn, .op-promo-btn, .op-sum--variance, .ordersale-grids của đơn bán) thì form kia đơn giản là không khớp selector. Vì sao file toàn cục chứ không phải *.razor.css: CSS isolation của module được gộp bằng @import tới tên CÓ fingerprint, dev server chỉ phục vụ tên KHÔNG fingerprint ⇒ 404 (xem ghi chú ở voucher.css, khối .vhb-btn). Vì vậy khung lưới (.orderpurchase-grid, .ordersale-grids) và toàn bộ tab Đính kèm (.voucher-attach*) cũng được chép sang đây — bản trong .razor.css vẫn còn nhưng selector ở đây có #id nên luôn thắng. Móc markup (form thêm class, file này tô): .op-ref (hàng "Tham chiếu") · .op-audit (Người tạo / Người sửa) · .op-voucher-no (số đơn) · .op-required (nhãn bắt buộc) · .op-suggest-btn / .op-promo-btn (nút đơn bán) · .op-sum / --discount / --total / --variance (dải tổng). Luật để sống chung với app (giống kpi.css / tong-quan.css): 1. Mọi selector bắt đầu bằng .op-form-root #poup-voucher-detail — .op-form-root là div display:contents bọc RIÊNG form này. KHÔNG dùng :has(): bản trước viết #poup-voucher-detail:has(.op-form) cho ~110 quy tắc ⇒ mỗi lần lưới đổi DOM trình duyệt phải xét lại :has ⇒ nhập liệu trễ hơn form cũ. Cũng KHÔNG để * đứng cuối selector và không nối dài :not() trên selector chạy cho TỪNG Ô lưới (tính lại mỗi lần gõ / cuộn). 2. Màu lấy từ token --st-* (smart-theme.css). Biến riêng mang tiền tố --op-. 3. Trạng thái luôn có icon + chữ đi kèm màu (nguyên tắc của smart-theme.css). 4. VIỀN luôn xám trung tính — không viền màu, không vạch màu bên trái, không gạch chân màu; màu chỉ nằm ở NỀN, chữ, icon, nút. Nút hành động luôn TÔ NỀN (không nút trắng/viền). 5. Hạn chế nền trắng: nền trang + card tông XANH TRỜI, card sáng hơn nền một bậc, tách khỏi nền bằng viền xám #bcc3ce + bóng đổ mềm; ô nhập theo màu card nhưng nhạt hơn (không xám, không trắng), hover viền ĐẬM hơn, focus giữ nền chỉ đổi viền + vòng sáng; thân bảng XÁM NHẠT, tiêu đề cột xanh nhạt chữ xanh đậm (27/09/2026). 6. Bo góc theo MỘT thang: card 12px · thẻ con / bảng / panel 10px · ô nhập / nút 8px · chip 999px (--op-r-card / --op-r-sub / --op-r-ctl / --op-r-pill). ============================================================================= */ .op-form-root #poup-voucher-detail { /* Màu nhấn: xanh --st-s2 (đơn mua); cam = tiền / chiết khấu (bộ nhận diện). */ --op-accent: var(--st-s2, #2a78d6); --op-accent-2: #4f97ea; --op-accent-700: #1d5fb0; --op-accent-050: #eef4fd; --op-orange: var(--st-orange, #F47920); --op-orange-2: #f59e0b; --op-orange-050: var(--st-orange-050, #FEF1E7); --op-label: #475a78; --op-text: #1c2b44; /* Thang bo góc (luật 6). */ --op-r-card: 12px; --op-r-sub: 10px; --op-r-ctl: 8px; --op-r-pill: 999px; /* Card tách rõ khỏi nền: viền xám trung tính đậm + bóng đổ mềm (KHÔNG viền màu). Vạch sáng 1px ở mép trên (inset) cho card trông "nổi" thay vì phẳng. */ --op-card-border: #bcc3ce; --op-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 14px rgba(20, 60, 120, .12), 0 1px 2px rgba(27, 28, 31, .07); /* Đường kẻ BÊN TRONG card (dưới thanh tab, giữa lưới và dải tổng, tiêu đề bảng) — một màu xám duy nhất thay cho #E6E6E8 / #D3D4D7 / #d5deea… rải rác trước đây. */ --op-divider: #cdd5e0; /* Nút tô nền: bóng mềm cùng tông màu nút. */ --op-btn-shadow: 0 1px 2px rgba(27, 28, 31, .10), 0 2px 6px rgba(29, 95, 176, .18); /* Nền trang: xanh trời (đậm hơn card một bậc để card nổi lên). */ --op-page-bg: linear-gradient(160deg, #cbe0f7 0%, #d8e8fa 50%, #cadff6 100%); /* Panel: cùng một tông XANH TRỜI (người dùng chốt 24/09/2026, bỏ bảng tím/bạc hà/cam đào). Card sáng hơn nền trang; thẻ con (cột phải) đậm hơn card chứa nó một bậc. */ --op-panel-info: linear-gradient(180deg, #f1f7ff 0%, #e7f1fd 100%); --op-panel-side: linear-gradient(180deg, #dcebfc 0%, #d2e5fb 100%); --op-panel-grid: #e7f1fd; --op-panel-grid-head: linear-gradient(90deg, #d3e6fb 0%, #e0edfc 55%, #eaf3fe 100%); /* Dải tổng là nửa dưới của thẻ lưới: bắt đầu ĐÚNG màu --op-panel-grid để chỗ nối không lệch tông. */ --op-panel-sum: linear-gradient(180deg, #e7f1fd 0%, #dde9fa 100%); /* Bảng (lưới Nội dung + Khuyến mãi + bảng Đính kèm): thân XÁM NHẠT; tiêu đề cột xanh NHẠT chữ xanh đậm — đậm hơn card xanh trời một bậc để vẫn tách khỏi thân bảng xám (bản trước là dải xanh thép #4f88d0 chữ trắng; người dùng yêu cầu nhạt hơn, 27/09/2026). */ --op-grid-col-head: linear-gradient(180deg, #d6e6f9 0%, #c4dbf4 100%); --op-grid-col-head-text: #1b3f6e; --op-grid-row: #f5f6f8; --op-grid-row-alt: #eceef2; --op-grid-row-hover: #e1e5eb; /* Dòng tổng của lưới + cột STT: cùng họ xanh với tiêu đề cột nhưng nhạt hơn. */ --op-grid-summary: #dfe9f6; --op-grid-row-head: #e3eaf3; /* Thanh cuộn (lưới, thân phiếu, bảng Đính kèm): xám xanh thay cho #888 / #c1c1c1 mặc định. */ --op-scroll-track: #dbe7f6; --op-scroll-thumb: #a9bcd6; --op-scroll-thumb-hover: #8fa8c9; /* Ô nhập: theo nền CARD chứa nó nhưng NHẠT hơn (xanh trời nhạt ở đầu phiếu, xanh đậm hơn một chút ở cột phải, cam nhạt ở khối Chiết khấu). Focus GIỮ nền này, chỉ đổi viền + vòng sáng. */ --op-input-bg: #f7fbff; --op-input-bg-side: #edf5fe; --op-input-bg-discount: #fff6ee; --op-input-border: #a3aab7; /* Hover phải ĐẬM hơn viền thường. Gốc Smart.Blazor đặt --smart-ui-state-border-hover = --smart-ui-state-hover (#ebebeb, màu NỀN hover) ⇒ rê chuột vào là viền nhạt đi. */ --op-input-border-hover: #6f7889; --op-input-radius: var(--op-r-ctl); --op-input-ring: 0 0 0 3px rgba(42, 120, 214, .20); --op-input-addon-bg: #e2edfb; --op-input-addon-bg-hover: #cfe0f6; /* Ô bị khoá (chế độ xem, Số đơn hàng): vẫn sắc xanh nhạt, chữ đọc rõ — thay cho mờ 55% của vendor làm cả đầu phiếu bạc màu và viền biến mất trên nền xanh. */ --op-input-bg-disabled: #eaf1fa; --op-input-border-disabled: #b9c1cd; --op-input-text-disabled: #3c4a60; background: var(--op-page-bg); } /* ---------- Thanh tiêu đề ---------- */ /* Kẻ dưới thanh tiêu đề: cùng xám của card (voucher.css để #E3E7EB gần như mất trên nền xanh) + bóng rất nhẹ để thanh tiêu đề nổi hơn thân phiếu. */ .op-form-root #poup-voucher-detail .top-header.header-form { background: linear-gradient(90deg, #bcd6f5 0%, #d2e4f9 45%, #e2eefc 100%); border-bottom-color: var(--op-card-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 3px rgba(20, 60, 120, .10); } .op-form-root #poup-voucher-detail .header-title { gap: 10px; } .op-form-root #poup-voucher-detail .header-title .icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--op-r-ctl); background: linear-gradient(135deg, var(--op-accent) 0%, var(--op-accent-2) 100%); color: #fff; font-size: 20px; box-shadow: 0 2px 6px rgba(20, 60, 120, .25); } .op-form-root #poup-voucher-detail .header-title .title { color: var(--op-text); font-size: 1.25rem; letter-spacing: -.2px; } /* Phiếu đã lưu: form cũ tô chữ đỏ inline, ở đây dùng màu nhấn. */ .op-form-root #poup-voucher-detail .header-title .title.is-saved { color: var(--op-accent-700); } /* Đơn bán: chip "Đã tạo chứng từ kế toán" trong tiêu đề — cùng công thức .op-status.is-good. Kiểu gốc chỉ nằm ở PopupOrderSaleDetail.razor.css (404 ở dev) nên trước đây hiện thành chữ trơn cỡ tiêu đề. Dấu ✓ vẽ bằng CSS để chip luôn có icon đi kèm màu (luật 3). */ .op-form-root #poup-voucher-detail .header-title .invoice-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 10px; border-radius: var(--op-r-pill); background: #d7f2e2; color: var(--st-good-text, #07773A); font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 0; vertical-align: middle; white-space: nowrap; } .op-form-root #poup-voucher-detail .header-title .invoice-badge::before { content: "✓"; font-weight: 700; } /* ---------- Nút hành động (MenuVoucher: Ghi sổ, Sửa, Lưu tạm, Xoá, Duyệt, Kế thừa) ---------- MenuVoucher gắn lớp biến thể Syncfusion lên từng nút (e-success / e-primary / e-danger / e-info, còn lại e-outline). Tô nền theo biến thể; viền cùng màu nền để không thành "viền màu" riêng. */ .op-form-root #poup-voucher-detail .header-action { gap: 6px; } .op-form-root #poup-voucher-detail .header-action .e-btn { border-radius: var(--op-r-ctl); font-weight: 600; text-transform: none; box-shadow: 0 1px 2px rgba(27, 28, 31, .10); } /* Nút tách (SfSplitButton "Ghi sổ"): quy tắc bo góc ở trên có #id nên thắng quy tắc Syncfusion vốn bỏ bo ở hai mép giáp nhau ⇒ hai nửa đều bo 4 góc, hở khấc ở giữa. Bo lại theo từng nửa, bóng đặt ở khung bọc để hai nửa liền một khối. */ .op-form-root #poup-voucher-detail .header-action .e-split-btn-wrapper { border-radius: var(--op-r-ctl); box-shadow: 0 1px 2px rgba(27, 28, 31, .10); } .op-form-root #poup-voucher-detail .header-action .e-split-btn-wrapper .e-btn { box-shadow: none; } .op-form-root #poup-voucher-detail .header-action .e-split-btn-wrapper .e-split-btn.e-btn { border-radius: var(--op-r-ctl) 0 0 var(--op-r-ctl); } .op-form-root #poup-voucher-detail .header-action .e-split-btn-wrapper .e-dropdown-btn.e-btn { border-radius: 0 var(--op-r-ctl) var(--op-r-ctl) 0; } .op-form-root #poup-voucher-detail .header-action .e-btn.e-success { background: linear-gradient(135deg, #0E9F4F 0%, #22b865 100%); border-color: #0E9F4F; color: #fff; } .op-form-root #poup-voucher-detail .header-action .e-btn.e-primary { background: linear-gradient(135deg, var(--op-accent) 0%, var(--op-accent-2) 100%); border-color: var(--op-accent); color: #fff; } .op-form-root #poup-voucher-detail .header-action .e-btn.e-info { background: linear-gradient(135deg, #0f8fa8 0%, #1fb3c9 100%); border-color: #0f8fa8; color: #fff; } .op-form-root #poup-voucher-detail .header-action .e-btn.e-danger { background: var(--st-red-050, #FDECEC); border-color: var(--st-red-050, #FDECEC); color: var(--st-critical-text, #9A1015); } /* Nút không có biến thể (Sửa/Hủy, Lưu tạm, Kế thừa): xanh nhạt TÔ NỀN thay cho nền trắng — nút hành động luôn tô nền (luật 4), viền trùng màu nền. */ .op-form-root #poup-voucher-detail .header-action .e-btn.e-outline { background: linear-gradient(180deg, #e6f0fd 0%, #d6e6fa 100%); border-color: #d6e6fa; color: var(--op-accent-700); } .op-form-root #poup-voucher-detail .header-action .e-btn:not(:disabled):hover { filter: brightness(.94); } .op-form-root #poup-voucher-detail .header-action .e-btn.e-outline:not(:disabled):hover { background: #c9dcf5; border-color: #c9dcf5; filter: none; } .op-form-root #poup-voucher-detail .header-action .e-btn:disabled { opacity: .5; } /* Nút icon góc phải: bảng màu riêng từng nút như form cũ (voucher.css đang để chung một màu — khối comment dưới .vhb-btn). */ .op-form-root #poup-voucher-detail .vhb-secondary.e-btn { color: #6c757d; } .op-form-root #poup-voucher-detail .vhb-success.e-btn { color: var(--st-good, #0E9F4F); } .op-form-root #poup-voucher-detail .vhb-info.e-btn { color: #0f8fa8; } .op-form-root #poup-voucher-detail .vhb-primary.e-btn { color: var(--op-accent); } .op-form-root #poup-voucher-detail .vhb-error.e-btn { color: var(--st-red, #EC2227); } /* Bo 8px như mọi nút khác (voucher.css để 3.25px); hover xanh nhạt trong suốt thay cho ô trắng. */ .op-form-root #poup-voucher-detail .vhb-btn.e-btn { border-radius: var(--op-r-ctl); transition: background-color .15s ease; } .op-form-root #poup-voucher-detail .vhb-btn.e-btn:hover, .op-form-root #poup-voucher-detail .vhb-btn.e-btn:focus { background: rgba(29, 95, 176, .12); } /* ---------- Chip trạng thái cạnh tiêu đề ---------- */ .op-form-root #poup-voucher-detail .op-status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: var(--op-r-pill); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; } .op-form-root #poup-voucher-detail .op-status i { font-size: 11px; } .op-form-root #poup-voucher-detail .op-status.is-good { background: #d7f2e2; color: var(--st-good-text, #07773A); } .op-form-root #poup-voucher-detail .op-status.is-warn { background: #fdecc4; color: var(--st-warn-text, #8a6100); } .op-form-root #poup-voucher-detail .op-status.is-new { background: var(--op-accent); color: #fff; } .op-form-root #poup-voucher-detail .op-status.is-pending { background: #e4e7f0; color: #4a5570; } /* ---------- Nền thân phiếu ---------- */ /* Trong suốt để nền gradient của #poup-voucher-detail là NGUỒN DUY NHẤT: tô lại ở đây thì gradient bắt đầu lại ngay dưới thanh tiêu đề (lệch tông) và cuộn theo nội dung. voucher.css đặt #f3f3f3 nên phải khai transparent tường minh. */ .op-form-root #poup-voucher-detail .body-container { background: transparent; } .op-form-root #poup-voucher-detail .body-container::-webkit-scrollbar-track { background: var(--op-scroll-track); } .op-form-root #poup-voucher-detail .body-container::-webkit-scrollbar-thumb { background: var(--op-scroll-thumb); border-radius: var(--op-r-pill); } .op-form-root #poup-voucher-detail .body-container::-webkit-scrollbar-thumb:hover { background: var(--op-scroll-thumb-hover); } /* KHÔNG tô khung .smart-popup-fullscreen qua body.op-form-open: khung đó dùng chung cho mọi popup toàn màn hình mở từ form (In phiếu, Kế thừa, F9) — tô ở đây là lan sang cả những popup đó. Nền do .op-form-root tự vẽ. */ /* ---------- Đầu phiếu: card xanh trời sáng ---------- Biến --smart-* của ô nhập nằm ở khối "Ô nhập" bên dưới (dùng chung với .op-discount). */ .op-form-root #poup-voucher-detail .main-information { width: auto; margin: 10px 16px 10px; padding: 10px 14px 12px 16px; background: var(--op-panel-info); border: 1px solid var(--op-card-border); border-radius: var(--op-r-card); box-shadow: var(--op-card-shadow); /* Vendor dùng --smart-disabled làm VIỀN của ô bị khoá (theme.css đặt #eceef1 ⇒ viền biến mất). */ --smart-disabled: var(--op-input-border-disabled); } .op-form-root #poup-voucher-detail .main-information label { color: var(--op-label); font-weight: 600; } /* Ô bắt buộc (Nhà cung cấp, Nhập về kho) — ValidateForm chặn khi bỏ trống. */ .op-form-root #poup-voucher-detail .main-information label.op-required::after { content: "*"; margin-left: 3px; color: var(--st-red, #EC2227); font-weight: 700; } /* Cột phải: thẻ con xanh trời đậm hơn card một bậc — số đơn, ngày, tiền tệ, tình trạng tách khỏi thông tin NCC. .main-infomation__right là một .row (flex-wrap) bị kéo cao bằng cột trái: phải có align-content: flex-start, nếu không các hàng ô nhập bị DÀN ĐỀU theo chiều cao thay vì dồn lên trên. Nền ô trong thẻ này đậm hơn một chút theo thẻ: đặt lại cả biến của Smart vì giá trị kế thừa từ .main-information đã được tính sẵn ra màu của card ngoài. */ .op-form-root #poup-voucher-detail .main-infomation__right { align-self: stretch; align-content: flex-start; align-items: flex-start; margin-left: 12px; padding: 6px 12px; background: var(--op-panel-side); border: 1px solid var(--op-card-border); border-radius: var(--op-r-sub); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); --op-input-bg: var(--op-input-bg-side); --smart-background: var(--op-input-bg-side); --smart-ui-state-hover: var(--op-input-bg-side); --smart-ui-state-focus: var(--op-input-bg-side); } .op-form-root #poup-voucher-detail .main-infomation__right label { color: var(--op-label); } /* ---------- Ô nhập (đầu phiếu + khối Chiết khấu) ---------- Một kiểu cho mọi loại ô: Smart Input / NumberInput / DropDownList, SearchDropDownGrid, ô ngày Syncfusion. Nền sắc nhạt theo panel (không trắng) · viền xám rõ · bo 8px · hover viền đậm hơn · focus giữ nền nhạt, chỉ viền xanh + vòng sáng (box-shadow, không phải viền). Biến --smart-* chỉ đặt ở ĐẦU PHIẾU và khối Chiết khấu: lưới smart-grid cũng dùng --smart-border cho đường kẻ ô, đặt ở gốc form là đổi luôn lưới. */ .op-form-root #poup-voucher-detail .main-information, .op-form-root #poup-voucher-detail .op-discount { --smart-border: var(--op-input-border); --smart-ui-state-border-hover: var(--op-input-border-hover); --smart-outline: var(--op-accent); --smart-background: var(--op-input-bg); /* Smart đổi NỀN ô khi hover/focus theo 2 biến này (app đặt #fee8d6 cam / #eceef1 xám) — giữ nền ô. */ --smart-ui-state-hover: var(--op-input-bg); --smart-ui-state-focus: var(--op-input-bg); --smart-border-top-left-radius: var(--op-input-radius); --smart-border-top-right-radius: var(--op-input-radius); --smart-border-bottom-left-radius: var(--op-input-radius); --smart-border-bottom-right-radius: var(--op-input-radius); } .op-form-root #poup-voucher-detail .main-information smart-input, .op-form-root #poup-voucher-detail .main-information smart-number-input, .op-form-root #poup-voucher-detail .main-information smart-drop-down-list, .op-form-root #poup-voucher-detail .main-information .sdg-host, .op-form-root #poup-voucher-detail .main-information .e-input-group, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-control-wrapper, .op-form-root #poup-voucher-detail .op-discount smart-number-input, .op-form-root #poup-voucher-detail .op-discount .sdg-host { background: var(--op-input-bg); border-color: var(--op-input-border); border-radius: var(--op-input-radius); box-shadow: inset 0 1px 2px rgba(27, 28, 31, .05); transition: border-color .15s ease, box-shadow .15s ease; } /* Nền ô theo card chứa nó qua --op-input-bg: cột phải xanh đậm hơn một chút (đặt ở khối .main-infomation__right), khối Chiết khấu cam nhạt (đặt ở khối .op-discount). */ /* Thẻ thật bên trong ô phải trong suốt, nếu không nó vẽ nền trắng riêng đè lên nền ô. */ .op-form-root #poup-voucher-detail .main-information smart-input input, .op-form-root #poup-voucher-detail .main-information smart-number-input input, .op-form-root #poup-voucher-detail .main-information smart-drop-down-list input, .op-form-root #poup-voucher-detail .main-information .e-input-group input, .op-form-root #poup-voucher-detail .op-discount smart-number-input input { background: transparent; } /* Hover — đậm hơn viền thường (SearchDropDownGrid và ô ngày không theo biến của Smart). */ .op-form-root #poup-voucher-detail .main-information .sdg-host:not([data-disabled]):not(:focus-within):hover, .op-form-root #poup-voucher-detail .op-discount .sdg-host:not([data-disabled]):not(:focus-within):hover, .op-form-root #poup-voucher-detail .main-information .e-input-group:not(.e-disabled):not(.e-input-focus):hover, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-input-focus):hover { border-color: var(--op-input-border-hover); } /* Focus — viền xanh + vòng sáng. Smart gắn thuộc tính [focus] lên thẻ khi ô được chọn. */ .op-form-root #poup-voucher-detail .main-information smart-input[focus], .op-form-root #poup-voucher-detail .main-information smart-number-input[focus], .op-form-root #poup-voucher-detail .main-information smart-drop-down-list[focus], .op-form-root #poup-voucher-detail .main-information .sdg-host:focus-within, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-input-focus, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-control-wrapper.e-input-focus, .op-form-root #poup-voucher-detail .op-discount smart-number-input[focus], .op-form-root #poup-voucher-detail .op-discount .sdg-host:focus-within { background: var(--op-input-bg); border-color: var(--op-accent); box-shadow: var(--op-input-ring); } /* Ô ngày Syncfusion: smart-custom.css ép `box-shadow:none !important; border-color:--smart-primary !important` lúc focus ⇒ ô ngày mất vòng sáng và viền khác màu các ô bên cạnh. Chỉ !important mới đè được; giới hạn trong đầu phiếu. */ .op-form-root #poup-voucher-detail .main-information .e-input-group.e-input-focus, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-control-wrapper.e-input-focus { border-color: var(--op-accent) !important; box-shadow: var(--op-input-ring) !important; } /* Nút lịch / đồng hồ của ô ngày: cùng kiểu nút "+" / mũi tên của SearchDropDownGrid ngay bên cạnh (nền xanh nhạt, vạch ngăn cùng màu viền ô), nút cuối bo theo góc phải của ô. */ .op-form-root #poup-voucher-detail .main-information .e-input-group .e-input-group-icon { margin: 0; background: var(--op-input-addon-bg); border-left: 1px solid var(--op-input-border); color: var(--op-text); } .op-form-root #poup-voucher-detail .main-information .e-input-group .e-input-group-icon:last-child { border-radius: 0 calc(var(--op-input-radius) - 1px) calc(var(--op-input-radius) - 1px) 0; } .op-form-root #poup-voucher-detail .main-information .e-input-group:not(.e-disabled) .e-input-group-icon:hover { background: var(--op-input-addon-bg-hover); color: var(--op-accent-700); } /* Ô bị khoá (chế độ xem: disableInputForm gắn disabled lên ; SearchDropDownGrid mang [data-disabled]; Số đơn hàng luôn khoá): KHÔNG mờ 55% như vendor — giữ sắc xanh nhạt, viền xám rõ, chữ xám đậm đọc được. Không đổi pointer-events / hành vi, chỉ đổi màu. */ .op-form-root #poup-voucher-detail .main-information .sdg-host[data-disabled], .op-form-root #poup-voucher-detail .main-information smart-input[disabled], .op-form-root #poup-voucher-detail .main-information smart-number-input[disabled], .op-form-root #poup-voucher-detail .main-information smart-drop-down-list[disabled], .op-form-root #poup-voucher-detail .main-information .e-input-group.e-disabled, .op-form-root #poup-voucher-detail .op-discount .sdg-host[data-disabled], .op-form-root #poup-voucher-detail .op-discount smart-number-input[disabled] { opacity: 1; background: var(--op-input-bg-disabled); border-color: var(--op-input-border-disabled); box-shadow: none; } .op-form-root #poup-voucher-detail .main-information input:disabled, .op-form-root #poup-voucher-detail .op-discount input:disabled { color: var(--op-input-text-disabled); -webkit-text-fill-color: var(--op-input-text-disabled); opacity: 1; } .op-form-root #poup-voucher-detail .main-information .sdg-host[data-disabled] .sdg-btn, .op-form-root #poup-voucher-detail .main-information .e-input-group.e-disabled .e-input-group-icon, .op-form-root #poup-voucher-detail .op-discount .sdg-host[data-disabled] .sdg-btn { background: #dde7f3; border-left-color: var(--op-input-border-disabled); color: #8a94a6; } /* Ô Tình trạng đơn hàng (Smart DropDownList): phần hiển thị giá trị đã chọn và nút mũi tên vẽ bằng --smart-surface / --smart-surface-color — app đặt #fa884d (CAM) ⇒ chỉ khi CÓ dữ liệu ô mới đổi màu khác các ô còn lại. Đặt lại về đúng nền/chữ của ô nhập. */ .op-form-root #poup-voucher-detail .op-inv-status { --smart-surface: var(--op-input-bg); --smart-surface-color: var(--op-text); --smart-ui-state-active: var(--op-input-bg); --smart-ui-state-color-active: var(--op-text); } .op-form-root #poup-voucher-detail .op-inv-status smart-drop-down-list { width: 100%; height: 26px; border-radius: var(--op-input-radius); } .op-form-root #poup-voucher-detail .op-inv-status smart-drop-down-list .smart-action-button, .op-form-root #poup-voucher-detail .op-inv-status smart-drop-down-list .smart-input { background: var(--op-input-bg); color: var(--op-text); } .op-form-root #poup-voucher-detail .op-inv-status smart-drop-down-list .smart-drop-down-button { background: var(--op-input-addon-bg); border-left-color: var(--op-input-border); border-radius: 0 calc(var(--op-input-radius) - 1px) calc(var(--op-input-radius) - 1px) 0; color: var(--op-text); } /* Nút "+" và mũi tên của SearchDropDownGrid: nền xám xanh nhạt, vạch ngăn cùng màu viền ô (bản gốc gán cứng #e0e0e0), bo góc phải khớp ô. */ .op-form-root #poup-voucher-detail .main-information .sdg-btn, .op-form-root #poup-voucher-detail .op-discount .sdg-btn { background: var(--op-input-addon-bg); border-left-color: var(--op-input-border); } .op-form-root #poup-voucher-detail .main-information .sdg-btn-arrow, .op-form-root #poup-voucher-detail .op-discount .sdg-btn-arrow { border-radius: 0 calc(var(--op-input-radius) - 1px) calc(var(--op-input-radius) - 1px) 0; } .op-form-root #poup-voucher-detail .main-information .sdg-btn:hover, .op-form-root #poup-voucher-detail .op-discount .sdg-btn:hover { background: var(--op-input-addon-bg-hover); } /* Dấu "+" (thêm danh mục): vendor gán cứng xanh Bootstrap #0069d9 — đổi sang màu nhấn của form. */ .op-form-root #poup-voucher-detail .main-information .sdg-btn-add::after, .op-form-root #poup-voucher-detail .op-discount .sdg-btn-add::after { color: var(--op-accent-700); } /* Số đơn hàng: luôn khoá nhưng vẫn là con số chính của phiếu — giữ đậm màu nhấn, thắng quy tắc chữ của ô bị khoá ở trên (cần cả :disabled để đủ độ ưu tiên). */ .op-form-root #poup-voucher-detail .op-voucher-no input, .op-form-root #poup-voucher-detail .op-voucher-no input:disabled { color: var(--op-accent-700); -webkit-text-fill-color: var(--op-accent-700); font-weight: 700; letter-spacing: .2px; } /* Nút icon "paid" cạnh tên đối tượng: nút flat của Smart lấy --smart-primary của theme (khác màu nhấn của form) và bo 4px. */ .op-form-root #poup-voucher-detail .main-information .smart-form-button-row smart-button.flat { --smart-primary: var(--op-accent); border-radius: var(--op-r-ctl); } /* Hàng "Tham chiếu": số phiếu kế thừa là không href / "..." là

(kèm lề dưới 1rem của Bootstrap) — ô duy nhất trong card không phải ô nhập. Số phiếu thành chip xanh bo góc; "..." thành chữ mờ, cùng chiều cao 26px với các ô khác. */ .op-form-root #poup-voucher-detail .op-ref a, .op-form-root #poup-voucher-detail .op-ref p { display: flex; align-items: center; justify-self: start; height: 26px; margin: 0; } .op-form-root #poup-voucher-detail .op-ref a { padding: 0 12px; border-radius: var(--op-r-pill); background: #d6e7fb; color: var(--op-accent-700); font-weight: 600; text-decoration: none; } .op-form-root #poup-voucher-detail .op-ref p { padding: 0 4px; color: #8a94a6; } /* ---------- Khối lưới: card xanh trời, thân bảng xám nhạt ---------- .tab-panel (nửa trên) + .summary (nửa dưới) ghép thành MỘT card: bo 2 góc trên ở đây, 2 góc dưới ở .summary (voucher.css đã bỏ viền dưới / viền trên tương ứng). */ .op-form-root #poup-voucher-detail .tab-panel { background: var(--op-panel-grid); border-color: var(--op-card-border); border-radius: var(--op-r-card) var(--op-r-card) 0 0; box-shadow: var(--op-card-shadow); } .op-form-root #poup-voucher-detail .tab-header { padding: 6px 12px; background: var(--op-panel-grid-head); border-bottom: 1px solid var(--op-divider); gap: 12px; } /* Nút chuyển tab (Nội dung / Đính kèm / Khuyến mãi): nhóm viên thuốc trên một rãnh xanh mờ — nút thường trong suốt, nút đang chọn là viên sáng TÔ NỀN + bóng nhẹ. Không gạch chân (app.css gắn text-decoration:underline cho .smart-button.active), không viền màu. Smart