/* ═══════════════════════════════════════════════════════════════════════════
NSCA ERP — LỚP GIAO DIỆN CHUẨN (erp-ui.css)
Rút từ shadcn/ui (ui-main) và ánh xạ sang bộ token có sẵn của theme.css.
VÌ SAO CÓ FILE NÀY
Mỗi module trước đây tự chế cỡ nút, chiều cao hàng bảng, màu chữ phụ.
Cùng một trạng thái mà ba màn ba kiểu thì người dùng phải học lại ở từng chỗ,
và phần mềm trông như ghép từ nhiều bản nháp. File này là bộ DUY NHẤT.
CÁCH DÙNG
Nạp SAU theme.css và design-system.css. Mọi class có tiền tố `eu-`
nên không đụng class cũ của module nào.
NGUYÊN TẮC GỐC (shadcn): chuyên nghiệp đến từ ĐỘ TƯƠNG PHẢN và NHỊP
KHOẢNG CÁCH, không đến từ màu. Bộ mặc định của họ là thang xám thuần.
Phiên bản: 2026-08-12.1
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* ── Thang bo góc: nhân từ một gốc, không gõ số rời ── */
--eu-radius: 10px;
--eu-radius-sm: 6px; /* = gốc × 0,6 — badge vuông, ô nhỏ */
--eu-radius-md: 8px; /* = gốc × 0,8 — NÚT, TAB, ô nhập */
--eu-radius-lg: 10px; /* = gốc — khối rỗng, hộp thoại nhỏ */
--eu-radius-xl: 14px; /* = gốc × 1,4 — THẺ (card) */
/* ── Ba nấc chiều cao control. Chỉ ba, không thêm ── */
--eu-h-sm: 32px;
--eu-h-md: 36px;
--eu-h-lg: 40px;
/* ── Nhịp khoảng cách 4px: chỉ dùng 6 giá trị này ── */
--eu-1: 4px; --eu-2: 8px; --eu-3: 12px; --eu-4: 16px; --eu-6: 24px; --eu-7: 28px;
/* ── Ba cỡ chữ trong UI dày đặc ── */
--eu-fs-xs: 12px; /* badge · nhãn nhóm · chữ phụ nhỏ */
--eu-fs-sm: 14px; /* MẶC ĐỊNH: bảng, nút, form, mô tả */
--eu-fs-base: 16px; /* tiêu đề trang */
/* ── Ánh xạ tên ngữ nghĩa sang token NSCA có sẵn ── */
--eu-bg: var(--surface);
--eu-fg: var(--text);
--eu-card: var(--surface);
--eu-muted: var(--surface-2);
--eu-muted-fg: var(--text-3); /* MỌI chữ phụ dùng đúng biến này */
--eu-border: var(--border);
--eu-input: var(--border-2);
--eu-ring: var(--b400);
--eu-primary: var(--b400);
--eu-primary-fg:#fff;
--eu-destructive: var(--err);
--eu-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
--eu-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
}
:root[data-theme="dark"]{
--eu-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.45);
--eu-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.55), 0 1px 2px -1px rgba(0,0,0,.45);
/* Chữ trên nút chính ở chế độ TỐI phải là mực đậm, không phải trắng.
Đo bằng render thật 26/08: trắng trên --b400 bản Tối (#5B87F5) chỉ được
3.37:1 — dưới ngưỡng 4.5 của WCAG AA, chữ nhoè trên nền xanh sáng. Đổi
sang #0B0F17 thì lên 5.69:1.
Đây là cách các hệ thiết kế lớn làm ở chế độ tối: nền nhấn sáng lên thì
chữ phải tối đi, chứ không giữ nguyên trắng như bản Sáng. */
--eu-primary-fg:#0B0F17;
}
/* ═══ VÒNG FOCUS — áp cho MỌI control, 3px, không bỏ sót cái nào ═══ */
.eu-btn:focus-visible, .eu-inp:focus-visible, .eu-sel:focus-visible,
.eu-tab:focus-visible, .eu-chk:focus-visible, .eu-inp:focus, .eu-sel:focus{
outline: none;
border-color: var(--eu-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--eu-ring) 45%, transparent);
}
/* ═══════════════════ NÚT ═══════════════════ */
.eu-btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--eu-2);
height:var(--eu-h-md); padding:0 var(--eu-4);
border:1px solid transparent; border-radius:var(--eu-radius-md);
font-family:inherit; font-size:var(--eu-fs-sm); font-weight:500; line-height:1;
white-space:nowrap; cursor:pointer; user-select:none;
background:var(--eu-primary); color:var(--eu-primary-fg);
transition:background .12s, border-color .12s, color .12s;
}
.eu-btn:hover{ background:color-mix(in srgb, var(--eu-primary) 90%, #000) }
.eu-btn:disabled{ opacity:.5; cursor:not-allowed }
.eu-btn svg,.eu-btn .ic{ width:16px; height:16px; flex:none }
.eu-btn.sm{ height:var(--eu-h-sm); padding:0 var(--eu-3); gap:6px; font-size:13px }
.eu-btn.lg{ height:var(--eu-h-lg); padding:0 var(--eu-6) }
.eu-btn.xs{ height:24px; padding:0 var(--eu-2); font-size:var(--eu-fs-xs); gap:4px }
.eu-btn.icon{ width:var(--eu-h-md); padding:0 }
.eu-btn.icon.sm{ width:var(--eu-h-sm) }
/* biến thể — có icon thì bớt 4px padding ngang (quy tắc shadcn) */
.eu-btn.has-ic{ padding-left:var(--eu-3); padding-right:var(--eu-3) }
.eu-btn.outline{ background:var(--eu-bg); color:var(--eu-fg);
border-color:var(--eu-input); box-shadow:var(--eu-shadow-xs) }
.eu-btn.outline:hover{ background:var(--eu-muted) }
.eu-btn.secondary{ background:var(--eu-muted); color:var(--eu-fg) }
.eu-btn.secondary:hover{ background:color-mix(in srgb, var(--eu-muted) 80%, var(--eu-fg)) }
.eu-btn.ghost{ background:transparent; color:var(--eu-fg) }
.eu-btn.ghost:hover{ background:var(--eu-muted) }
.eu-btn.danger{ background:var(--eu-destructive); color:#fff }
.eu-btn.link{ background:transparent; color:var(--eu-primary); height:auto; padding:0;
text-underline-offset:4px }
.eu-btn.link:hover{ text-decoration:underline; background:transparent }
/* ═══════════════════ THẺ ═══════════════════
Mấu chốt: padding DỌC nằm ở thẻ, padding NGANG nằm ở từng phần.
Nhờ vậy thêm đường kẻ vào đầu thẻ là tự có khoảng thở đúng. */
.eu-card{
display:flex; flex-direction:column; gap:var(--eu-6);
background:var(--eu-card); color:var(--eu-fg);
border:1px solid var(--eu-border); border-radius:var(--eu-radius-xl);
padding:var(--eu-6) 0; box-shadow:var(--eu-shadow-sm);
}
.eu-card.flush{ gap:0; padding:0 } /* thẻ chứa bảng full-bleed */
.eu-card-hd{
display:grid; grid-auto-rows:min-content; align-items:start; gap:var(--eu-2);
padding:0 var(--eu-6);
}
.eu-card-hd.has-act{ grid-template-columns:1fr auto }
.eu-card-hd.bd{ padding-bottom:var(--eu-6); border-bottom:1px solid var(--eu-border) }
.eu-card-t{ font-size:var(--eu-fs-sm); font-weight:600; line-height:1.2 }
.eu-card-d{ font-size:var(--eu-fs-sm); color:var(--eu-muted-fg); line-height:1.5 }
.eu-card-act{ grid-column:2; grid-row:1/span 2; justify-self:end; align-self:start }
.eu-card-ct{ padding:0 var(--eu-6) }
.eu-card-ct.flush{ padding:0 }
.eu-card-ft{ display:flex; align-items:center; gap:var(--eu-2); padding:0 var(--eu-6) }
.eu-card-ft.bd{ padding-top:var(--eu-6); border-top:1px solid var(--eu-border) }
/* ═══════════════════ THẺ SỐ (KPI) ═══════════════════
4 phần theo dashboard-01: nhãn · số · badge xu hướng · chân giải thích */
.eu-stat{ position:relative; display:flex; flex-direction:column; gap:var(--eu-2);
background:var(--eu-card); border:1px solid var(--eu-border);
border-radius:var(--eu-radius-xl); padding:var(--eu-4) var(--eu-6);
box-shadow:var(--eu-shadow-xs) }
.eu-stat .lb{ font-size:var(--eu-fs-sm); color:var(--eu-muted-fg); line-height:1.3 }
.eu-stat .v{ font-size:26px; font-weight:600; letter-spacing:-.6px; line-height:1.1;
font-variant-numeric:tabular-nums }
.eu-stat .act{ position:absolute; top:var(--eu-4); right:var(--eu-6) }
.eu-stat .ft{ display:flex; flex-direction:column; gap:6px; font-size:13px; margin-top:2px }
.eu-stat .ft .l1{ font-weight:500; display:flex; align-items:center; gap:6px }
.eu-stat .ft .l2{ color:var(--eu-muted-fg) }
/* thiếu nguồn: KHÔNG hiện 0%, hiện gạch ngang + nền kẻ sọc */
.eu-stat.na .v{ font-size:var(--eu-fs-sm); font-weight:500; color:var(--eu-muted-fg);
letter-spacing:0 }
.eu-stat.na .v:before{ content:'— chưa đủ dữ liệu' }
/* ═══════════════════ BẢNG ═══════════════════ */
.eu-tw{ position:relative; width:100%; overflow-x:auto;
border:1px solid var(--eu-border); border-radius:var(--eu-radius-lg) }
.eu-tw.bare{ border:0; border-radius:0 }
table.eu-tb{ width:100%; border-collapse:collapse; font-size:var(--eu-fs-sm);
caption-side:bottom }
table.eu-tb th{
height:40px; padding:0 var(--eu-2); text-align:left; vertical-align:middle;
font-weight:500; font-size:13px; color:var(--eu-fg); white-space:nowrap;
background:var(--eu-muted); border-bottom:1px solid var(--eu-border);
position:sticky; top:0; z-index:10;
}
table.eu-tb td{ padding:var(--eu-2); vertical-align:middle;
border-bottom:1px solid var(--eu-border) }
table.eu-tb tbody tr:last-child td{ border-bottom:0 }
table.eu-tb tbody tr{ transition:background .1s }
table.eu-tb tbody tr:hover{ background:color-mix(in srgb, var(--eu-muted) 50%, transparent) }
table.eu-tb tbody tr[data-sel="1"]{ background:var(--eu-muted) }
table.eu-tb tbody tr.clk{ cursor:pointer }
table.eu-tb tfoot td{ border-top:1px solid var(--eu-border); border-bottom:0;
font-weight:500; background:color-mix(in srgb, var(--eu-muted) 50%, transparent) }
/* Số LUÔN căn phải và tabular — kể cả tiêu đề cột */
table.eu-tb .r,table.eu-tb th.r{ text-align:right; font-variant-numeric:tabular-nums }
table.eu-tb .c{ text-align:center }
table.eu-tb td.sub{ color:var(--eu-muted-fg); font-size:13px }
/* hàng rỗng của data-table shadcn: cao 96px, căn giữa */
table.eu-tb .no-row td{ height:96px; text-align:center; color:var(--eu-muted-fg) }
/* ô sửa tại chỗ: chỉ hiện viền khi focus */
.eu-cell-inp{ height:var(--eu-h-sm); width:100%; padding:0 6px; text-align:right;
border:1px solid transparent; background:transparent; border-radius:var(--eu-radius-sm);
font-family:var(--font-mono,monospace); font-size:13px; color:var(--eu-fg);
font-variant-numeric:tabular-nums }
.eu-cell-inp:hover{ border-color:var(--eu-input) }
/* ═══════════════════ BADGE ═══════════════════
Trạng thái trung tính dùng `outline` (viền + chữ xám), KHÔNG tô màu.
Tô màu chỉ dành cho việc thật sự cần chú ý. */
.eu-bg{ display:inline-flex; width:fit-content; align-items:center; justify-content:center;
gap:var(--eu-1); padding:2px var(--eu-2); border:1px solid transparent;
border-radius:9999px; font-size:var(--eu-fs-xs); font-weight:500; line-height:1.4;
white-space:nowrap; overflow:hidden }
.eu-bg svg{ width:12px; height:12px }
.eu-bg.outline{ border-color:var(--eu-border); color:var(--eu-muted-fg); background:transparent }
.eu-bg.solid{ background:var(--eu-primary); color:var(--eu-primary-fg) }
.eu-bg.ok{ background:var(--ok2); color:var(--ok) }
.eu-bg.warn{ background:var(--warn2); color:var(--warn) }
.eu-bg.err{ background:var(--err2); color:var(--err) }
.eu-bg.info{ background:var(--b50); color:var(--b500); border-color:var(--b200) }
.eu-bg.mute{ background:var(--eu-muted); color:var(--eu-muted-fg) }
/* badge đếm trong tab — ép tròn đều */
.eu-bg.cnt{ min-width:20px; height:20px; padding:0 5px;
background:color-mix(in srgb, var(--eu-muted-fg) 22%, transparent); color:var(--eu-fg);
font-variant-numeric:tabular-nums }
/* ═══════════════════ TAB ═══════════════════ */
/* kiểu hộp: nền muted, tab chọn nổi lên nền trắng + đổ bóng */
.eu-tabs{ display:inline-flex; align-items:center; gap:0; height:var(--eu-h-md);
padding:3px; background:var(--eu-muted); border-radius:var(--eu-radius-lg);
color:var(--eu-muted-fg) }
.eu-tab{ display:inline-flex; align-items:center; gap:6px; height:calc(100% - 1px);
padding:0 var(--eu-2); border:0; background:transparent; cursor:pointer;
border-radius:var(--eu-radius-md); font-family:inherit; font-size:var(--eu-fs-sm);
font-weight:500; color:color-mix(in srgb, var(--eu-fg) 60%, transparent); white-space:nowrap }
.eu-tab:hover{ color:var(--eu-fg) }
.eu-tab[aria-selected="true"],.eu-tab.on{
background:var(--eu-bg); color:var(--eu-fg); box-shadow:var(--eu-shadow-sm) }
/* kiểu gạch chân: dùng cho thanh tab chính của trang */
.eu-tabs.line{ background:transparent; padding:0; height:auto; gap:var(--eu-1);
border-radius:0; display:flex; flex-wrap:wrap }
.eu-tabs.line .eu-tab{ position:relative; height:38px; padding:0 var(--eu-3);
border-radius:0; box-shadow:none }
.eu-tabs.line .eu-tab.on{ background:transparent; color:var(--eu-fg); box-shadow:none }
.eu-tabs.line .eu-tab.on:after{ content:''; position:absolute; left:0; right:0; bottom:-1px;
height:2px; background:var(--eu-fg); border-radius:2px }
/* ═══════════════════ Ô NHẬP · FORM ═══════════════════ */
/* 🪤 VÁ 18/08/2026 — box-sizing. Bộ này KHÔNG có reset toàn cục, mà ô nhập
mặc định width:100%. Với content-box thì 100% + padding 2×12 + viền 2 =
luôn rộng hơn khung cha 26px → tràn ngang ở mọi màn hẹp. Đặt width:300px
cũng ra 326px thật. Bắt được bằng test trình duyệt ở khổ 390px. */
.eu-inp,.eu-sel,.eu-ta{
box-sizing:border-box;
width:100%; height:var(--eu-h-md); padding:0 var(--eu-3);
border:1px solid var(--eu-input); border-radius:var(--eu-radius-md);
background:var(--eu-bg); color:var(--eu-fg);
font-family:inherit; font-size:var(--eu-fs-sm); box-shadow:var(--eu-shadow-xs) }
.eu-ta{ height:auto; padding:var(--eu-2) var(--eu-3); line-height:1.55; resize:vertical }
.eu-inp.sm,.eu-sel.sm{ height:var(--eu-h-sm); font-size:13px }
.eu-inp:disabled,.eu-sel:disabled{ background:var(--eu-muted); color:var(--eu-muted-fg);
cursor:not-allowed; box-shadow:none }
.eu-inp::placeholder{ color:var(--text-5) }
/* Field: gap trong 1 field 6px · giữa 2 field 28px · giữa 2 nhóm 24px */
.eu-fset{ display:flex; flex-direction:column; gap:var(--eu-6); border:0; padding:0; margin:0 }
.eu-fgrp{ display:flex; flex-direction:column; gap:var(--eu-7) }
.eu-fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--eu-4) var(--eu-4) }
.eu-fld{ display:flex; flex-direction:column; gap:6px }
.eu-fld>label{ font-size:var(--eu-fs-sm); font-weight:500; line-height:1.2 }
.eu-fld>label .rq{ color:var(--eu-destructive); margin-left:2px }
.eu-fld .desc{ font-size:13px; color:var(--eu-muted-fg); line-height:1.5 }
.eu-fld .err{ font-size:13px; color:var(--eu-destructive); font-weight:500 }
.eu-fld[data-invalid="true"] .eu-inp,.eu-fld[data-invalid="true"] .eu-sel{
border-color:var(--eu-destructive) }
.eu-fld[data-invalid="true"]>label{ color:var(--eu-destructive) }
/* ═══════════════════ ITEM — dòng danh sách media + nội dung + hành động ═══ */
.eu-items{ display:flex; flex-direction:column }
.eu-item{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--eu-4);
padding:var(--eu-4); border:1px solid transparent; border-radius:var(--eu-radius-md);
font-size:var(--eu-fs-sm) }
.eu-item.sm{ gap:10px; padding:var(--eu-3) var(--eu-4) }
.eu-item.outline{ border-color:var(--eu-border) }
.eu-item.muted{ background:color-mix(in srgb, var(--eu-muted) 50%, transparent) }
.eu-item+.eu-item.sep{ border-top:1px solid var(--eu-border); border-radius:0 }
.eu-item-md{ width:32px; height:32px; flex:none; display:grid; place-items:center;
border:1px solid var(--eu-border); border-radius:var(--eu-radius-sm);
background:var(--eu-muted); font-size:15px }
.eu-item-md.lg{ width:40px; height:40px; font-size:17px }
.eu-item-ct{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--eu-1) }
.eu-item-t{ font-weight:500; line-height:1.35 }
.eu-item-d{ color:var(--eu-muted-fg); line-height:1.5 }
.eu-item-ac{ display:flex; align-items:center; gap:var(--eu-2); flex:none }
/* ═══════════════════ TRẠNG THÁI RỖNG ═══════════════════ */
.eu-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:var(--eu-6); padding:var(--eu-6); text-align:center;
border:1px dashed var(--eu-border); border-radius:var(--eu-radius-lg) }
@media(min-width:768px){ .eu-empty{ padding:48px var(--eu-6) } }
.eu-empty.bare{ border:0 }
.eu-empty-hd{ display:flex; flex-direction:column; align-items:center; gap:var(--eu-2);
max-width:384px }
.eu-empty-md{ width:40px; height:40px; display:grid; place-items:center;
background:var(--eu-muted); border-radius:var(--eu-radius-lg); font-size:20px;
margin-bottom:var(--eu-2) }
.eu-empty-t{ font-size:18px; font-weight:500; letter-spacing:-.2px }
.eu-empty-d{ font-size:var(--eu-fs-sm); line-height:1.625; color:var(--eu-muted-fg) }
.eu-empty-ct{ display:flex; flex-direction:column; align-items:center; gap:var(--eu-4);
max-width:384px; font-size:var(--eu-fs-sm) }
/* biến thể GỌN — dùng trong thẻ nhỏ, không chiếm nửa màn hình */
.eu-empty.slim{ flex-direction:row; align-items:flex-start; text-align:left;
gap:var(--eu-3); padding:var(--eu-4); border-style:solid }
.eu-empty.slim .eu-empty-md{ width:28px; height:28px; font-size:15px; margin:0 }
.eu-empty.slim .eu-empty-hd{ align-items:flex-start; max-width:none }
.eu-empty.slim .eu-empty-t{ font-size:var(--eu-fs-sm); font-weight:600 }
.eu-empty.slim .eu-empty-d{ font-size:13px }
/* ═══════════════════ ĐẦU TRANG · THANH CÔNG CỤ ═══════════════════ */
.eu-head{ display:flex; align-items:center; gap:var(--eu-2); min-height:48px;
padding:var(--eu-2) var(--eu-4); border-bottom:1px solid var(--eu-border);
background:var(--eu-bg) }
@media(min-width:1024px){ .eu-head{ padding:var(--eu-2) var(--eu-6) } }
.eu-head h1{ font-size:var(--eu-fs-base); font-weight:500; letter-spacing:-.2px; margin:0 }
.eu-head .sep{ width:1px; height:16px; background:var(--eu-border); margin:0 var(--eu-2) }
.eu-head .sp{ flex:1 }
.eu-sub{ font-size:13px; color:var(--eu-muted-fg) }
.eu-bar{ display:flex; align-items:center; gap:var(--eu-2); flex-wrap:wrap;
padding:var(--eu-2) var(--eu-4); background:var(--eu-bg);
border-bottom:1px solid var(--eu-border) }
.eu-lbl{ font-size:var(--eu-fs-xs); font-weight:600; letter-spacing:.4px;
text-transform:uppercase; color:var(--eu-muted-fg) }
/* ═══════════════════ PHÂN TRANG ═══════════════════ */
.eu-pag{ display:flex; align-items:center; gap:var(--eu-2); padding:var(--eu-3) var(--eu-4);
font-size:var(--eu-fs-sm); border-top:1px solid var(--eu-border) }
.eu-pag .info{ color:var(--eu-muted-fg) }
.eu-pag .sp{ flex:1 }
.eu-pag .grp{ display:flex; align-items:center; gap:32px }
.eu-pag .pg{ font-weight:500; font-variant-numeric:tabular-nums }
.eu-pag .nav{ display:flex; gap:var(--eu-1) }
/* ═══════════════════ THANH TIẾN ĐỘ ═══════════════════ */
.eu-pr{ height:6px; background:var(--eu-muted); border-radius:9999px; overflow:hidden }
.eu-pr>i{ display:block; height:100%; background:var(--eu-primary); border-radius:9999px }
.eu-pr>i.ok{ background:var(--ok) } .eu-pr>i.warn{ background:var(--warn) }
.eu-pr>i.err{ background:var(--err) }
.eu-pr.hatch{ background:repeating-linear-gradient(45deg,
var(--surface-3),var(--surface-3) 4px,var(--surface-2) 4px,var(--surface-2) 8px) }
/* có mốc mục tiêu */
.eu-prt{ position:relative; height:10px; background:var(--eu-muted); border-radius:4px }
.eu-prt>i{ display:block; height:100%; border-radius:4px; background:var(--eu-primary) }
.eu-prt>i.ok{ background:var(--ok) } .eu-prt>i.warn{ background:var(--warn) }
.eu-prt>i.err{ background:var(--err) }
.eu-prt>.mk{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--eu-fg);
opacity:.7 }
/* ═══════════════════ DẢI THÔNG BÁO (alert) ═══════════════════
Nền nhạt + viền cùng tông. Không dùng nền đặc — chữ trên nền đặc
khó đọc ở đoạn dài, và nó tranh chú ý với chỗ tô màu chính của màn. */
.eu-alert{ display:grid; grid-template-columns:20px 1fr; gap:var(--eu-3);
align-items:start; padding:var(--eu-3) var(--eu-4);
border:1px solid var(--eu-border); border-radius:var(--eu-radius-lg);
background:var(--eu-bg); font-size:var(--eu-fs-sm); line-height:1.6 }
.eu-alert>.ic{ font-size:15px; line-height:1.3 }
/* 🔴 13/08/2026 — DẢI KHÔNG CÓ Ô ICON THÌ ĐỪNG CHIA CỘT.
Lưới `20px 1fr` giả định phần tử đầu là `.ic`. Rất nhiều chỗ gọi chỉ viết
`… chữ…
` — thẻ rơi vào cột 20px và
VỠ DỌC TỪNG CHỮ (Alex bắt được ở ngăn chi tiết Temp giá: một cột chữ "Đã /
lấy / giá / (file / không / có / mã / phát / hành)").
Sửa ở bộ chung chứ không đi vá từng chỗ gọi: cùng một lỗi đang nằm rải rác
ở nhiều module, và chỗ gọi thứ N+1 viết ngày mai sẽ lại dính. */
.eu-alert:not(:has(> .ic)){ display:block }
.eu-alert b{ display:block; font-weight:600; margin-bottom:2px }
.eu-alert.ok{ background:var(--ok2); border-color:transparent; color:var(--ok) }
.eu-alert.warn{ background:var(--warn2); border-color:transparent; color:var(--warn) }
.eu-alert.err{ background:var(--err2); border-color:transparent; color:var(--err) }
.eu-alert.info{ background:var(--b50); border-color:var(--b200); color:var(--b500) }
/* ═══════════════════ THANG MỨC (ladder) ═══════════════════
Dùng cho tiến trình có thứ bậc: mức chỉ định, mốc vòng đời NPP. */
.eu-lad{ display:flex; border:1px solid var(--eu-border); border-radius:var(--eu-radius-md);
overflow:hidden; font-size:var(--eu-fs-xs); font-weight:600 }
.eu-lad>div{ flex:1; padding:6px 4px; text-align:center; background:var(--eu-muted);
color:var(--text-5); border-right:1px solid var(--eu-border) }
.eu-lad>div:last-child{ border-right:0 }
.eu-lad>div.done{ background:var(--ok); color:#fff }
.eu-lad>div.now{ background:var(--eu-primary); color:#fff }
/* ═══════════════════ DÒNG THUỘC TÍNH (property row) ═══════════════════ */
.eu-props{ display:flex; flex-direction:column }
.eu-prop{ display:flex; gap:var(--eu-3); padding:7px 0; font-size:13px;
border-bottom:1px solid var(--eu-border) }
.eu-prop:last-child{ border-bottom:0 }
.eu-prop>b{ width:126px; flex:none; font-weight:400; color:var(--eu-muted-fg) }
.eu-prop>span{ flex:1; min-width:0 }
/* ═══════════════════ GHI CHÚ GIẢI THÍCH ═══════════════════
Dùng cho đoạn nói VÌ SAO màn hình làm như vậy — đặt cuối thẻ. */
.eu-hint{ font-size:13px; color:var(--eu-muted-fg); line-height:1.6;
padding:var(--eu-3) var(--eu-6); background:color-mix(in srgb,var(--eu-muted) 45%,transparent);
border-top:1px solid var(--eu-border) }
.eu-hint b{ color:var(--eu-fg); font-weight:500 }
.eu-note{ font-size:13px; color:var(--eu-muted-fg); line-height:1.65;
background:color-mix(in srgb,var(--eu-muted) 45%,transparent);
border:1px dashed var(--eu-border); border-radius:var(--eu-radius-md);
padding:var(--eu-3) var(--eu-4) }
.eu-note b{ color:var(--eu-fg); font-weight:500 }
/* ═══════════════════ CHẤM MÀU + PHÍM MÃ ═══════════════════
Bổ sung 18/08/2026 — khuôn màn V12 (MOCKUP_BAN_HANH_GIA_V12) mà Alex duyệt
cho toàn dự án dùng hai thứ này, nhưng bộ chung chưa có nên mỗi mockup lại
tự chế `.dot` / `.kbd` riêng. Đưa vào đây, tiền tố eu- như mọi class khác.
CHẤM MÀU đứng đầu dòng `.l1` của thẻ số: nó là chỗ tô màu RẺ NHẤT — một
chấm 8px đủ dẫn mắt mà không biến bảng thành cầu vồng. Đúng nguyên tắc
"mỗi màn một chỗ tô màu đặc". */
.eu-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:none }
.eu-dot.ok{ background:var(--ok) }
.eu-dot.wn{ background:var(--warn) }
.eu-dot.er{ background:var(--err) }
.eu-dot.mu{ background:var(--text-5) }
.eu-dot.pr{ background:var(--eu-primary) }
/* Tên cột / tên bảng / mã lệnh nhắc trong câu chữ */
.eu-kbd{ font-family:ui-monospace,Consolas,'JetBrains Mono',monospace; font-size:12px;
padding:1px 5px; border:1px solid var(--eu-border); border-radius:4px;
background:var(--eu-muted) }
/* ═══════════════════ TIỆN ÍCH ═══════════════════ */
.eu-xs{ font-size:var(--eu-fs-xs) }
.eu-sm{ font-size:13px }
.eu-skel{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,
var(--surface-2) 75%); background-size:200% 100%; animation:euSkel 1.2s infinite;
border-radius:var(--eu-radius-sm); height:13px }
@keyframes euSkel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Thang 1 cột — cần khi số thẻ sinh động (1 thẻ thì đừng kéo giãn hết dòng) */
.eu-grid-1{ display:grid; grid-template-columns:1fr; gap:var(--eu-4) }
.eu-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--eu-4) }
.eu-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--eu-4) }
.eu-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--eu-4) }
.eu-grid-21{ display:grid; grid-template-columns:2fr 1fr; gap:var(--eu-4); align-items:start }
.eu-stack{ display:flex; flex-direction:column; gap:var(--eu-4) }
.eu-row{ display:flex; align-items:center; gap:var(--eu-2) }
.eu-wrap{ flex-wrap:wrap }
.eu-sp{ flex:1 }
.eu-mut{ color:var(--eu-muted-fg) }
.eu-num{ font-variant-numeric:tabular-nums }
.eu-mono{ font-family:var(--font-mono,ui-monospace,Consolas,monospace);
font-variant-numeric:tabular-nums }
.eu-sep{ height:1px; background:var(--eu-border); border:0; margin:0 }
@media(max-width:1100px){
.eu-grid-21,.eu-grid-2,.eu-grid-3{ grid-template-columns:1fr }
.eu-grid-4{ grid-template-columns:1fr 1fr }
}
@media(max-width:640px){ .eu-grid-4{ grid-template-columns:1fr } }
/* ═══════════════════ MẬT ĐỘ DÀY (compact) ═══════════════════
Đặt data-dense="1" hoặc class .eu-dense lên một khối bao ngoài.
Dùng cho màn nghiệp vụ mở tám tiếng mỗi ngày: hồ sơ thiết kế, BOM,
danh mục vật tư. KHÔNG dùng cho màn báo cáo hay trang giới thiệu.
Bộ mặc định có ba nấc chiều cao 32/36/40px — vẫn giữ nguyên.
Đây là nấc thứ tư 24px CHỈ áp trong vùng dày, không phá thang chung. */
.eu-dense{
--eu-h-sm: 28px;
--eu-h-md: 32px;
--eu-h-lg: 36px;
--eu-fs-sm: 13px;
--eu-row-h: 30px; /* hàng bảng */
--eu-th-h: 28px; /* tiêu đề cột */
--eu-tool-h: 34px; /* thanh công cụ */
--eu-radius-xl: 4px; /* thẻ hết bo tròn to */
--eu-radius-lg: 4px;
--eu-radius-md: 4px;
font-size:13px;
}
/* nút cỡ thanh công cụ — nấc 24px, chỉ có trong vùng dày */
.eu-dense .eu-btn.tool{ height:24px; padding:0 8px; gap:5px; font-size:12px;
border-radius:4px; font-weight:500 }
.eu-dense .eu-btn.tool.icon{ width:24px; padding:0 }
/* thanh công cụ và thanh lọc — hai dải riêng, đúng kiểu structure browser */
.eu-dense .eu-tool{ height:var(--eu-tool-h); display:flex; align-items:center; gap:4px;
padding:0 8px; background:var(--eu-muted); border-bottom:1px solid var(--eu-border);
overflow-x:auto }
.eu-dense .eu-tool .eu-vs{ width:1px; height:18px; background:var(--eu-input); margin:0 4px; flex:none }
.eu-dense .eu-filter{ height:30px; display:flex; align-items:center; gap:10px; padding:0 8px;
background:var(--eu-bg); border-bottom:1px solid var(--eu-border);
font-size:12px; color:var(--eu-muted-fg); overflow-x:auto }
/* bảng dày */
.eu-dense table{ font-size:12px }
.eu-dense th{ height:var(--eu-th-h); padding:0 8px; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.3px; color:var(--eu-muted-fg) }
.eu-dense td{ padding:4px 8px; height:var(--eu-row-h) }
/* 🪤 VÁ 18/08/2026 — chế độ dày KHÔNG ăn vào .eu-tb.
`table.eu-tb td` có độ cụ thể (0,1,2), `.eu-dense td` chỉ (0,1,1) → bảng
chuẩn luôn thắng và hàng vẫn 47px dù đã bật chế độ dày. Bắt được bằng test
trình duyệt thật (đo getBoundingClientRect), linkedom không thấy vì không
tính bố cục. Ba dòng dưới nâng độ cụ thể cho khớp. */
.eu-dense table.eu-tb{ font-size:12px }
.eu-dense table.eu-tb th{ height:var(--eu-th-h); padding:0 8px; font-size:11px }
.eu-dense table.eu-tb td{ padding:4px 8px }
/* thẻ trong vùng dày */
.eu-dense .eu-card{ border-radius:4px; box-shadow:none }
.eu-dense .eu-card-hd{ min-height:34px; padding:0 10px }
.eu-dense .eu-card-ct{ padding:10px }
/* badge nhỏ lại một nấc */
.eu-dense .eu-bg{ height:18px; padding:0 6px; border-radius:3px }
/* ════════════════════════════════════════════════════════════════════════════
BỔ SUNG 2026-08-17 — thành phần dựng cho module NSCA CRM.
Đặt ở bộ chung vì đều dùng lại được: thanh giai đoạn, bảng luồng, phễu,
dòng thời gian, thanh phân bố, thẻ việc cần xử lý, nút phân đoạn, chip lọc.
⚠ Icon dùng sprite KHÔNG mang theo fill/stroke — phải khai .eu-ic.
════════════════════════════════════════════════════════════════════════════ */
/* icon nét: dùng cho mọi