/* Design token của bộ thiết kế ERP — nguồn chân lý duy nhất cho vùng "chrome" của app (topbar + mega menu, sidebar, tabstrip). Giá trị lấy nguyên văn từ .claude/references/design-layout/01-design-tokens.md. VÌ SAO KHÔNG ĐẶT Ở :root (spec ghi :root, ta cố ý làm khác — đọc trước khi "sửa lại"): tên --border / --surface / --ink là tên quá chung. Khai ở :root thì mọi component Syncfusion, Smart.Blazor, BootstrapBlazor trong app đều kế thừa, và ba thư viện này có hàng trăm biến nội bộ — một trùng tên là đổi màu ở màn hình không liên quan mà không ai truy ra được. Nên token chỉ áp cho đúng các khu vực chrome liệt kê dưới đây. Biến CSS kế thừa theo cây DOM chứ không theo phạm vi CSS isolation, nên các file .razor.css scoped (SmartSidebar, SmartNavbar) vẫn dùng var(--...) bình thường. Muốn thêm một khu vực dùng token: thêm selector vào danh sách, đừng chép lại giá trị. .tabs-body bao trọn nội dung trang nên token kế thừa vào mọi component bên trong. Đã kiểm trước khi thêm: không file CSS nào của repo và không bundle nào (BootstrapBlazor, Smart.Blazor, popup/theme/cms/smart-custom) dùng các tên biến trần này — Syncfusion dùng --color-sf-*, Smart.Blazor dùng --smart-*, BootstrapBlazor dùng --bb-*, Bootstrap --bs-*. BẪY đã dính một lần: dùng var(--x) ở một phần tử KHÔNG nằm trong các selector trên thì biến rỗng → cả khai báo thành không hợp lệ và bị bỏ im lặng (border-bottom biến mất mà DevTools không báo gì). Nếu một rule "không ăn dù specificity đủ", kiểm biến trước. */ .sb, .snav, .snav-mega, .layout-header, .layout-side, .tabs-header, .tabs-body, /* Ba khối của màn Phụ lục hợp đồng. Hai cái sau mở bằng PopupService của Smart.Blazor, mà popup đó render thẳng dưới trong .smart-popup-container — tức NGOÀI .tabs-body, nên không kế thừa token và mọi var(--...) trong CSS của chúng sẽ rỗng (đúng cái bẫy ghi ở đầu file). Cố ý liệt kê từng khối thay vì thêm .smart-popup-container: mở cả container là cấp token cho popup của mọi màn khác, rộng hơn mức cần. */ .pl-page, .pl-wizard, .pl-choose, .pl-pick, .pl-detail, /* Chi tiết Phiếu Vận đơn — cùng lý do với ba khối Phụ lục hợp đồng ở trên: màn danh sách mở nó bằng PopupService nên nó render dưới , ngoài .tabs-body, không kế thừa được token. Mở bằng deep-link /BillOfLading/{id} thì lại nằm trong .tabs-body — liệt kê ở đây để hai lối vào cho ra cùng một màu. */ .bol-detail, /* Popup "Thêm Invoice" của phiếu Vận đơn — cũng mở bằng PopupService nên nằm ngoài .tabs-body. Thiếu dòng này thì hai nút ở chân popup mất màu: nút Áp dụng còn trơ chữ trắng trên nền trong suốt (trông như biến mất), nút Hủy mất border. Đã dính 09/09/2026. */ .bol-choose { /* Nền & bề mặt */ /* Spec ghi #f3f4f6; người dùng chọn #E6EBEE (28/08/2026) — đậm hơn một chút để hai panel trắng tách bạch hơn. Đây là sai lệch có chủ ý, đừng "sửa lại cho đúng mẫu". */ --canvas: #E6EBEE; --surface: #ffffff; --surface-alt: #f8f9fa; --border: #e4e6e9; --border-strong: #ced3d8; /* Chữ */ --ink: #1e2530; --ink-2: #5c6774; --ink-3: #8b95a1; /* Brand — đỏ Rạng Đông */ --brand: #df3a1e; --brand-hover: #bd2f16; --brand-soft: #fdefec; --brand-line: #f5c6bb; /* Accent cam — chỉ dùng 2 chỗ (01-design-tokens.md §4) */ --accent: #e8842a; --accent-soft: #fdf3e8; --accent-line: #f3d3ae; /* Hình khối */ --radius: 8px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06); /* Cỡ chữ */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; } /* ========================================================================== TOOLTIP HOVER TOÀN APP — token (13/09/2026, chốt theo yêu cầu: nền đen, chữ trắng, bo góc, 12px). Khai ở :root chứ không trong vùng chrome: tooltip phải với tới cả popup Syncfusion render thẳng ra . Tên --tip-* đủ đặc thù; KHÔNG dùng --tip-x / --tip-y — hai tên đó SmartSidebar.razor.css đang dùng cho toạ độ con trỏ. Cơ chế dùng token: phần tử .erp-tooltip (erp-components.css) do js/erp-tooltip.js gắn vào và định vị fixed cho MỌI phần tử mang data-tooltip="…" — kể cả SVG và phần tử trong vùng cuộn. Hai tooltip CSS-only cũ (VoucherIconButton .vha-item, SmartSidebar .sb-row, dùng data-tip + ::after) chưa chuyển; khi triển khai toàn hệ thống: đổi data-tip → data-tooltip và xoá ::after của chúng, giá trị màu/cỡ lấy từ đây. ========================================================================== */ :root { --tip-bg: #1f2329; --tip-fg: #fff; --tip-fs: 12px; --tip-lh: 1.4; --tip-radius: 6px; --tip-pad: 5px 10px; --tip-shadow: 0 4px 12px rgba(0, 0, 0, .18); --tip-max-w: 320px; } /* ========================================================================== FONT CHỮ CỦA TOÀN APP — NGUỒN DUY NHẤT Đổi font cả app = sửa đúng --font-app bên dưới, không sửa chỗ nào khác. Trước 06/09/2026 khai báo Inter nằm rải ở 7 chỗ (app.css ×3, erp-chrome.css ×2, smart-custom.css, erp-content.css) mà vẫn không phủ hết: đo trên DOM thật thì chỉ mỗi SfGrid ra Inter, còn nút/dropdown/lịch/checkbox/tab/dialog và cả thanh phân trang NẰM TRONG lưới đều là system-ui. Vì sao: theme Syncfusion (cdn.syncfusion.com/blazor/30.2.4/styles/bootstrap5.3.css) đặt `.e-control,.e-css,.e-error{font-family:system-ui,...}` cùng ~108 selector khác. Đó là rule đặt THẲNG lên phần tử nên luôn thắng font kế thừa từ `body`, dù rule `body` có specificity cao đến đâu. Phải đè bằng rule cũng nhắm vào chính phần tử. File này nạp sau CDN nên cùng specificity là đủ thắng, không cần !important. --font-app khai ở :root (khác các token màu ở trên cố ý chỉ khai cho vùng chrome): font phải với tới cả popup mà Syncfusion render thẳng ra , nằm ngoài mọi vùng chrome. Tên đủ đặc thù nên không đụng --color-sf-* / --smart-* / --bb-* / --bs-*. */ :root { --font-app: Inter, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html, body, button, input, .smart-element { font-family: var(--font-app); } /* Syncfusion: chính component, mọi thứ bên trong nó, và popup render ra ngoài . LOẠI TRỪ phần tử icon — chúng dùng font riêng để vẽ glyph ("e-icons", Lucide "lu-*", Material Icons); ép font chữ lên đó là biến icon thành ký tự lạ. */ .e-control, .e-popup, .e-control *:not([class*="e-icon"]):not([class*="lu-"]):not(.material-icons), .e-popup *:not([class*="e-icon"]):not([class*="lu-"]):not(.material-icons) { font-family: var(--font-app); } /* Ô nhập phải kê riêng, và phải đủ 2 class. Thẻ bọc ô nhập (DropDownList, ComboBox, DatePicker...) KHÔNG mang class .e-control — nó là `.e-ddl.e-input-group.e-control-wrapper` — nên rule .e-control ở trên không với tới, còn theme đặt font cho `.e-input-group` (0,1,0) và cho `input.e-input` (0,1,1). Đo trên DOM thật: rule 1 class thua, 2 class thắng và kéo theo cả input bên trong. */ input.e-input, textarea.e-input, input.e-control, textarea.e-control, .e-input-group.e-control-wrapper, .e-input-group.e-control-container, .e-float-input.e-control-wrapper { font-family: var(--font-app); } /* ========================================================================== TOKEN CŨ Ở :root — GOM VỀ MỘT CHỖ (đợt 1 chuẩn hóa CSS, 08/09/2026) Trước đây các biến này khai rải trong 7 file (popup.css 62, loading.css 10, theme.css 9, smart-custom.css 7, smart.default.css 3, toolbar-css.css 2, app.css 4) với 10 tên trùng nhau ở :root; giá trị "thắng" phụ thuộc thứ tự trong index.html (file nạp sau thắng: theme.css > popup.css > smart.default.css > smart-custom.css > toolbar-css.css > app.css). Gom về đây GIỮ ĐÚNG giá trị đang thắng nên giao diện không đổi pixel (đã so 8 baseline ảnh trong bộ smoke). Các cặp trùng đã chốt, giá trị bị loại ghi kèm để ai cần thì biết: --button__footer-border-color: #6b6c72 (theme.css; bỏ cùng giá trị) --footer-background-color: #38393d (theme.css; bỏ cùng giá trị) --footer-height: 42px (theme.css; bỏ 50px của popup.css) --horizontal-control-padding-y: 16px (popup.css; bỏ 8px của toolbar-css.css) --input-height: 32px (popup.css; bỏ 26px của toolbar-css.css) --main-background-color: #eceef1 (theme.css; bỏ cùng giá trị) --popup-right__title-padding: 16px 16px 12px 16px (popup.css; bỏ cùng giá trị) --primary-btn-background-color: #2ca01c (theme.css; bỏ cùng giá trị) --primary-button-height: 26px (theme.css; bỏ 34px của popup.css) --zone-padding: 12px (theme.css; bỏ 20px của popup.css) Đây vẫn là TÊN và GIÁ TRỊ CŨ, chưa phải token thiết kế: đợt áp design-layout sẽ quy dần về bộ token ở đầu file (--brand, --surface, --ink…). Quy tắc từ nay: - Thêm biến mới: thêm vào đây, KHÔNG mở lại khối :root ở file khác. - Biến chỉ dùng trong một component thì khai trong .razor.css của component đó (VoucherView, LookupLayout, MainLayout đang làm vậy), không đưa lên đây. - Ghi đè biến thư viện theo vùng (ví dụ .smart-grid { --smart-ui-state-hover }) là RULE, vẫn nằm ở file của vùng đó; chỉ khai báo ở :root mới gom về đây. */ :root { /* Màn hình loading (loading.css) — màu gradient nền lúc WASM boot */ --color-bg1: rgb(108, 0, 162); --color-bg2: rgb(0, 17, 82); --color1: 18, 113, 255; --color2: 221, 74, 255; --color3: 100, 220, 255; --color4: 200, 50, 50; --color5: 180, 180, 50; --color-interactive: 140, 100, 255; --circle-size: 80%; --blending: hard-light; /* Ghi đè biến Syncfusion/Smart.Blazor (smart-custom.css) */ --hover-grid: #ffdfdf; --color-sf-secondary-bg-color-hover: white; --color-sf-content-bg-color-alt1: white; --color-sf-secondary-text-color: black; --smart-zindex-popup: 1050; --smart-default-clr: #FF4545; --color-sf-border-light: #dbdbdb; /* Header/footer cũ (smart.default.css) */ --main-header-color: linear-gradient(to right, #94c9ce, #94c9ce); --main-footer-color: linear-gradient(to right, #94c9ce, #94c9ce); /* Popup, tab, grid, nút, footer (popup.css) — bộ lớn nhất, 62 biến */ --horizontal-control-padding-y: 16px; --input-height: 32px; --popup-right__title-padding: 16px 16px 12px 16px; --control-label-bottom-space: 4px; --rounded-button-height: 36px; --get-data-button-height: 34px; --combobox-multi-item-height: 24px; --combobox-dropdown-icon-width: 32px; --combobox-quick-add-width: 30px; --tab__router-height: 50px; --tab__router-pading: 15px 20px; --tab__detail-padding-y: 16px; --grid-header-text-transform: uppercase; --grid-header-height: 34px; --grid-body-line-height: 44px; --grid-summary-height: 34px; --grid-footer-padding-y: 18px; --title-list-padding-top: 24px; --title-list-padding-bottom: 24px; --row-spacing: 12px; --row-spacing--large: 16px; --reference-padding-top: 12px; --reference-padding-bottom: 16px; --tab-router-margin-top: 14px; --overview-number-size: 24px; --overview-label-size: 14px; --overview-height: 64px; --suggest-short-key-position-top: -14px; --control-border-color--active: #2ca01c; --primary-btn-background-color-opacity: rgba(44, 160, 28, .2); --primary-btn--hover-background-color: #35bf22; --primary-btn--active-background-color: #248b15; --primary-btn--focus-background-color: #2ca01c; --button__footer-background-color--hover: #2f3034; --button__footer-border-color--hover: #6b6c72; --button__footer-background--active: #27282b; --button__footer-border-color--active: #6b6c72; --button__footer-background-color--focus: #27282b; --dropdown__item--hover-text-color: #2ca01c; --dropdown__footer-background-color--hover: #4b4c51; --dropdown__footer-background-color--active: #4b4c51; --upload-border-color: #babec5; --tab__item--active-text-color: #2ca01c; --tab__border-color: #d4d7dc; --tab__router-background-color: #eceef1; --datepicker-selected-day-color: #08bf1e; --datepicker-selected-day-background-color: rgba(44, 160, 28, .2); --grid-header-background-color: #e5e8ec; --grid-body__line-hover-background-color: #f2f9ff; --grid-body__line-selected-background-color: #e5f3ff; --slide-bar-background-color: #393a3d; --slide-bar--active-border-color: #2ca01c; --grid-header-border-bottom-color: #d4d7dc; --grid-header-border-left-color: #c7c7c7; --icon-heart: -2477px -606px; --remind-license-height: 52px; /* Theme cũ (theme.css) */ --primary-button-height: 26px; --zone-padding: 12px; --footer-height: 42px; --main-background-color: #eceef1; --primary-btn-background-color: #2ca01c; --button__footer-border-color: #6b6c72; --footer-background-color: #38393d; --smart-ui-state-hover: #eceef1; --smart-disabled: #eceef1; } /* Biến BootstrapBlazor cho header + màu brand cũ (từ app.css). Giữ nguyên selector ":root, input" như bản gốc (khai cả lên ) để không đổi cascade; gọn lại về :root là việc của đợt sau, khi có baseline ảnh xác nhận. */ :root, input { --bb-header-color: #FFFFFF; --bb-header-bg: #FFFFFF; --bb-dropdown-max-height: 500px; --bb-color-smart: #E4352E; }