:root {
    /* Brand + semantic (UI Design System — docs/ux-ui/ui-guidelines.md) */
    --icu-primary: #6750a4;
    --icu-on-primary: #ffffff;
    --icu-primary-text: #6750a4;
    --icu-primary-soft: #d2c7ee;
    --icu-danger: #b3261e;
    --icu-on-danger: #ffffff;
    --icu-danger-soft: #fbecec;
    --icu-success: #26b050;
    --icu-warning: #f4b400;
    --icu-warning-soft: #fdf3d7;
    --icu-warning-text: #6e6000;
    --icu-info-soft: #ece7f8;
    --icu-link: #5b3fb0;
    --icu-text-primary: #3c4043;
    --icu-text-secondary: #5f6368;
    --icu-border: #dadce0;
    --icu-border-light: #e8eaed;
    --icu-surface: #ffffff;
    --icu-muted-bg: #f1f3f4;
    --icu-muted-surface: #e9ecef;
    --icu-chip-on: #f0edf8;
    /* Select/list option (ADR-0126 sửa lần 9): triplet rgb theo scope cho bản FALLBACK (trình duyệt chưa hỗ trợ
       color-mix); dòng color-mix ngay sau là bản ưu tiên — cả 2 suy từ --icu-primary của area/mode/mù màu hiện tại. */
    --icu-primary-rgb-tint: 103, 80, 164;
    --icu-item-hover-bg: rgba(var(--icu-primary-rgb-tint), .10);
    --icu-item-hover-bg: color-mix(in srgb, var(--icu-primary) 10%, transparent);
    /* Spacing / radius / shadow */
    --icu-space-1: 4px; --icu-space-2: 8px; --icu-space-3: 12px;
    --icu-space-4: 16px; --icu-space-5: 24px;
    --icu-radius-sm: .375rem; --icu-radius: .5rem; --icu-radius-pill: 999px;
    --icu-shadow-card: 0 2px 8px rgba(0,0,0,.15);
    --icu-shadow-pop: 0 4px 16px rgba(0,0,0,.18);
    /* In ấn (@media print): mực đen trên giấy trắng — KHÔNG theo mode (guard NoHardcodedHex chỉ cho hex ở khối token). */
    --icu-print-bg: #ffffff;
    --icu-print-fg: #000000;
}

/* Theme theo "theme key" (docs/ux-ui/ui-guidelines.md §3 — AppThemeCatalog):
   :root = customer mặc định; SERVER ghi data-icu-area lên <html> (App.razor — WebArea.FromUri) ⇒ token theo area khai
   scope html[data-icu-area=…] MỌI NƠI (kể cả portal: dialog/snackbar/menu — render ngoài wrapper).
   LUẬT single-source (ADR-0126 sửa lần 8 — 2026-10-03): KHÔNG khai --icu-* trong.icu-theme-* (class layout chỉ là hook;
   layout đặt class lên wrapper bao cả appbar/toggle ⇒ nếu khai giá trị SÁNG trong class sẽ ĐÈ bản dark cho mọi phần tử
   trong wrapper ⇒ dropdown "đang chọn" 1.09:1 — bài học lần 8). Tương lai thêm theme nhóm nội dung
   (.icu-theme-customer-story/...) ⇒ khai trên wrapper PHẢI kèm khối dark+system (guard bắt). */
html[data-icu-area="manager"] { --icu-primary: #1565c0; --icu-primary-text: #1565c0; --icu-primary-soft: #c9ddf6; --icu-chip-on: #e8f1fb; --icu-link: #1565c0; --icu-info-soft: #e8f1fb; --icu-primary-rgb-tint: 21, 101, 192; }
html[data-icu-area="org"]     { --icu-primary: #00796b; --icu-primary-text: #00796b; --icu-primary-soft: #bfe0da; --icu-chip-on: #e3f3f0; --icu-link: #00796b; --icu-info-soft: #e3f3f0; --icu-primary-rgb-tint: 0, 121, 107; }

/* Bản DARK cho theme key area (ADR-0126 sửa lần 7+8 — 2026-10-03): scope html[data-icu-area=…] — "lần 8" giải thích vì sao
   KHÔNG được dùng class cho dark: layout đặt .icu-theme-* trên wrapper bao cả toggle/dropdown, nếu dark khai ở class thì
   vẫn đúng, nhưng lần 8 CHUYỂN hẳn single-source html-area để portal đúng + chống 2 nguồn. Light: primary/soft/chip/link
   khai light area (bên trên); dark: làm sáng primary + on-primary SẬM (chữ trên nút primary) + --icu-primary-text (chữ
   primary trên nền tối) — phải khai MỌI data-icu-area (guard).
   LƯU Ý sửa token tối = sửa CẢ 2 khối (dark + @media system). */
html[data-icu-area="manager"][data-icu-mode="dark"] {
    --icu-primary-rgb-tint: 100, 181, 246;
    --icu-primary: #64B5F6; --icu-primary-text: #7FB3F0; --icu-on-primary: #0D1B2A;
    --icu-primary-soft: #22334A; --icu-chip-on: #1F2F45; --icu-info-soft: #22334A; --icu-link: #7FB3F0;
    --mud-palette-primary: #64B5F6; --mud-palette-primary-rgb: 100, 181, 246; --mud-palette-primary-text: #0D1B2A;
    --mud-palette-primary-hover: #42A5F5; --mud-palette-primary-lighten: #83C3F8; --mud-palette-primary-darken: #4FA8E8;
}
html[data-icu-area="org"][data-icu-mode="dark"] {
    --icu-primary-rgb-tint: 77, 182, 172;
    --icu-primary: #4DB6AC; --icu-primary-text: #5FD3C0; --icu-on-primary: #04211D;
    --icu-primary-soft: #22383A; --icu-chip-on: #1F3733; --icu-info-soft: #22383A; --icu-link: #5FD3C0;
    --mud-palette-primary: #4DB6AC; --mud-palette-primary-rgb: 77, 182, 172; --mud-palette-primary-text: #04211D;
    --mud-palette-primary-hover: #26A69A; --mud-palette-primary-lighten: #71C8C0; --mud-palette-primary-darken: #3FA99E;
}
@media (prefers-color-scheme: dark) {
    html[data-icu-area="manager"][data-icu-mode="system"] {
        --icu-primary-rgb-tint: 100, 181, 246;
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0126 sửa lần 7/8). */
        --icu-primary: #64B5F6; --icu-primary-text: #7FB3F0; --icu-on-primary: #0D1B2A;
        --icu-primary-soft: #22334A; --icu-chip-on: #1F2F45; --icu-info-soft: #22334A; --icu-link: #7FB3F0;
        --mud-palette-primary: #64B5F6; --mud-palette-primary-rgb: 100, 181, 246; --mud-palette-primary-text: #0D1B2A;
        --mud-palette-primary-hover: #42A5F5; --mud-palette-primary-lighten: #83C3F8; --mud-palette-primary-darken: #4FA8E8;
    }
    html[data-icu-area="org"][data-icu-mode="system"] {
        --icu-primary-rgb-tint: 77, 182, 172;
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0126 sửa lần 7/8). */
        --icu-primary: #4DB6AC; --icu-primary-text: #5FD3C0; --icu-on-primary: #04211D;
        --icu-primary-soft: #22383A; --icu-chip-on: #1F3733; --icu-info-soft: #22383A; --icu-link: #5FD3C0;
        --mud-palette-primary: #4DB6AC; --mud-palette-primary-rgb: 77, 182, 172; --mud-palette-primary-text: #04211D;
        --mud-palette-primary-hover: #26A69A; --mud-palette-primary-lighten: #71C8C0; --mud-palette-primary-darken: #3FA99E;
    }
}

/* ===== Chế độ tối (dark) — ADR-0126, CSS-first, zero-JS =====
   Server đặt data-icu-mode trên <html> từ cookie icu.platform.theme.{area} (App.razor); CSS đổi bộ token (--icu-* + --mud-palette-*).
   PRIMARY/primary-soft giữ theo theme key (manager/org/customer); `system` = theo OS qua @media prefers-color-scheme.
   LƯU Ý: sửa token tối ⇒ sửa CẢ 2 khối (dark + system) để giữ đồng bộ. */
html[data-icu-mode="dark"],
html[data-icu-mode="system"] { color-scheme: light dark; }

html[data-icu-mode="dark"] {
    --icu-primary-rgb-tint: 103, 80, 164;
    --icu-item-hover-bg: rgba(var(--icu-primary-rgb-tint), .22);
    --icu-item-hover-bg: color-mix(in srgb, var(--icu-primary) 22%, transparent);
    --icu-surface: #1e1f22;
    --icu-muted-bg: #26282c;
    --icu-muted-surface: #2b2e33;
    --icu-text-primary: #e6e6e6;
    --icu-text-secondary: #b0b4b8;
    --icu-border: #3f4348;
    --icu-border-light: #34383d;
    --icu-danger: #ff897d; --icu-danger-soft: #3a2220; --icu-on-danger: #1a1a1a;
    --icu-success: #7fdd9b; --icu-warning: #f7d16b; --icu-warning-text: #ffe082;
    --icu-primary-soft: #352f4a;
    --icu-chip-on: #322c45;
    --icu-info-soft: #2e2a3d;
    --icu-link: #b3a1f0;
    --mud-palette-error: #ff897d; --mud-palette-error-rgb: 255, 137, 125; --mud-palette-error-lighten: #ffada5; --mud-palette-error-darken: #ffc9c4; --mud-palette-error-hover: #3a2220; --mud-palette-error-text: #1a1a1a;
    --mud-palette-success: #7fdd9b; --mud-palette-success-rgb: 127, 221, 155; --mud-palette-success-lighten: #a2e8b8; --mud-palette-success-darken: #c2f0d1; --mud-palette-success-hover: #1f3a28; --mud-palette-success-text: #1a1a1a;
    --mud-palette-warning: #f7d16b; --mud-palette-warning-rgb: 247, 209, 107; --mud-palette-warning-lighten: #f9dd95; --mud-palette-warning-darken: #fcebb9; --mud-palette-warning-hover: #3a3316; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #b3a1f0; --mud-palette-info-rgb: 179, 161, 240; --mud-palette-info-lighten: #c8bbf5; --mud-palette-info-darken: #ded6fa; --mud-palette-info-hover: #2e2a3d; --mud-palette-info-text: #1a1a1a;
    --mud-palette-surface: #1e1f22;
    --mud-palette-background: #222327;
    --mud-palette-background-gray: #26282c;
    --mud-palette-appbar-background: #191a1d;
    --mud-palette-appbar-text: #e6e6e6;
    --mud-palette-drawer-background: #1e1f22;
    --mud-palette-drawer-text: #e6e6e6;
    --mud-palette-drawer-icon: #b0b4b8;
    --mud-palette-text-primary: #e6e6e6;
    --mud-palette-text-secondary: #b0b4b8;
    --mud-palette-secondary: #b0b4b8; /* #5f6368 (light) trên nền tối = 2.59:1 — chữ meta card/nút phụ dùng Color.Secondary (sweep ADR-0151, 2026-10-05). */
    --mud-palette-text-disabled: rgba(255,255,255,.35);
    --mud-palette-lines-default: #3f4348;
    --mud-palette-lines-inputs: #3f4348;
    --mud-palette-divider: #34383d;
    --mud-palette-divider-light: rgba(255,255,255,.08);
    /* BỀ MẶT action/hover trong dark phải là TRẮNG MỜ (không dùng xám sáng của light) — nav link hover/active,
       icon button, table row... dễ đọc (ADR-0126 sửa lần 4). */
    --mud-palette-action-default: #cfd2d5;
    --mud-palette-action-default-hover: rgba(255,255,255,.10);
    --mud-palette-action-disabled: rgba(255,255,255,.35);
    --mud-palette-action-disabled-background: rgba(255,255,255,.10);
    --mud-palette-table-striped: #26282c;
    --mud-palette-table-hover: rgba(255,255,255,.06);
    --mud-palette-table-lines: #34383d;
    --mud-palette-skeleton: rgba(255,255,255,.09);
    --mud-palette-dark: #26282c;
    --mud-native-html-color-scheme: dark;
    background: #1e1f22;
}

@media (prefers-color-scheme: dark) {
    html[data-icu-mode="system"] {
        --icu-primary-rgb-tint: 103, 80, 164;
        --icu-item-hover-bg: rgba(var(--icu-primary-rgb-tint), .22);
        --icu-item-hover-bg: color-mix(in srgb, var(--icu-primary) 22%, transparent);
        /* Cùng bộ token tối (đồng bộ với khối data-icu-mode="dark" ở trên). */
        --icu-surface: #1e1f22;
        --icu-muted-bg: #26282c;
        --icu-muted-surface: #2b2e33;
        --icu-text-primary: #e6e6e6;
        --icu-text-secondary: #b0b4b8;
        --icu-border: #3f4348;
        --icu-border-light: #34383d;
        --icu-danger: #ff897d; --icu-danger-soft: #3a2220; --icu-on-danger: #1a1a1a;
        --icu-success: #7fdd9b; --icu-warning: #f7d16b; --icu-warning-text: #ffe082;
        --icu-primary-soft: #352f4a;
        --icu-chip-on: #322c45;
        --icu-info-soft: #2e2a3d;
        --icu-link: #b3a1f0;
        --mud-palette-error: #ff897d; --mud-palette-error-rgb: 255, 137, 125; --mud-palette-error-lighten: #ffada5; --mud-palette-error-darken: #ffc9c4; --mud-palette-error-hover: #3a2220; --mud-palette-error-text: #1a1a1a;
        --mud-palette-success: #7fdd9b; --mud-palette-success-rgb: 127, 221, 155; --mud-palette-success-lighten: #a2e8b8; --mud-palette-success-darken: #c2f0d1; --mud-palette-success-hover: #1f3a28; --mud-palette-success-text: #1a1a1a;
        --mud-palette-warning: #f7d16b; --mud-palette-warning-rgb: 247, 209, 107; --mud-palette-warning-lighten: #f9dd95; --mud-palette-warning-darken: #fcebb9; --mud-palette-warning-hover: #3a3316; --mud-palette-warning-text: #1a1a1a;
        --mud-palette-info: #b3a1f0; --mud-palette-info-rgb: 179, 161, 240; --mud-palette-info-lighten: #c8bbf5; --mud-palette-info-darken: #ded6fa; --mud-palette-info-hover: #2e2a3d; --mud-palette-info-text: #1a1a1a;
        --mud-palette-surface: #1e1f22;
        --mud-palette-background: #222327;
        --mud-palette-background-gray: #26282c;
        --mud-palette-appbar-background: #191a1d;
        --mud-palette-appbar-text: #e6e6e6;
        --mud-palette-drawer-background: #1e1f22;
        --mud-palette-drawer-text: #e6e6e6;
        --mud-palette-drawer-icon: #b0b4b8;
        --mud-palette-text-primary: #e6e6e6;
        --mud-palette-text-secondary: #b0b4b8;
        --mud-palette-secondary: #b0b4b8; /* ĐỒNG BỘ khối dark phía trên (Color.Secondary trên nền tối). */
        --mud-palette-text-disabled: rgba(255,255,255,.35);
        --mud-palette-lines-default: #3f4348;
        --mud-palette-lines-inputs: #3f4348;
        --mud-palette-divider: #34383d;
        --mud-palette-divider-light: rgba(255,255,255,.08);
        /* BỀ MẶT action/hover trong dark phải là TRẮNG MỜ (không dùng xám sáng của light) — nav link hover/active,
           icon button, table row... dễ đọc (ADR-0126 sửa lần 4). */
        --mud-palette-action-default: #cfd2d5;
        --mud-palette-action-default-hover: rgba(255,255,255,.10);
        --mud-palette-action-disabled: rgba(255,255,255,.35);
        --mud-palette-action-disabled-background: rgba(255,255,255,.10);
        --mud-palette-table-striped: #26282c;
        --mud-palette-table-hover: rgba(255,255,255,.06);
        --mud-palette-table-lines: #34383d;
        --mud-palette-skeleton: rgba(255,255,255,.09);
        --mud-palette-dark: #26282c;
        --mud-native-html-color-scheme: dark;
        background: #1e1f22;
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--icu-link);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--icu-success);
}

.invalid {
    outline: 1px solid var(--icu-danger);
}

.validation-message {
    color: var(--icu-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--icu-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--icu-border);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--icu-text-secondary);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Form input chuẩn cho SSR */
.icu-input { width: 100%; padding: 10px 14px; border: 1px solid var(--icu-border); border-radius: var(--icu-radius); font-size: 1rem;
    background: var(--icu-surface); color: var(--icu-text-primary); }
select.icu-input { width: auto; } /* select lọc trong filter bar — không căng full-width */
.icu-input:focus { outline: 2px solid var(--icu-primary); }
/* Trang Bảo mật (/account/security, ADR-0155) — QR 2FA responsive + hàng nhập liệu gọn, không tràn ngang. */
.icu-security-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.icu-security-field { width: 100%; max-width: 160px; }
.icu-security-field-wide { width: 100%; max-width: 220px; }

/* Khung ôm đúng ảnh: hẹp thì theo khung, rộng thì dừng ở 240px; không bao giờ rộng hơn container.
   (Nền QR trắng đã nướng sẵn trong PNG — không cần khai màu nền ở đây/token; ADR-0126 không cho hex trần.) */
.icu-qr-panel { display: flex; justify-content: center; width: fit-content; max-width: 100%;
    margin: 0 auto 12px; padding: 12px; border: 1px solid var(--icu-border);
    border-radius: var(--icu-radius); }

/* Ảnh: cap trên 240px (đủ to để quét, ~4,5px/module), cap dưới 100% khung (không tràn), luôn vuông, module sắc. */
.icu-qr-image { width: min(240px, 100%); aspect-ratio: 1 / 1; height: auto; display: block;
    image-rendering: pixelated; }

.icu-recovery-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em;
    color: var(--icu-text-primary); }

/* AccountMenu — dropdown HTML thuần (details/summary) — zero-JS, SSR-first (ADR-0045) */
.account-menu { position: relative; display: inline-block; }
.account-menu-summary {
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    list-style: none; padding: 2px 0;
}
.account-menu-summary::-webkit-details-marker { display: none; }
.account-menu-summary::after { content: "▾"; font-size: 0.75rem; opacity: .6; }
.account-menu[open] .account-menu-summary::after { content: "▴"; }
.account-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
    background: var(--icu-surface); border: 1px solid var(--icu-border); border-radius: var(--icu-radius);
    box-shadow: var(--icu-shadow-pop); padding: 8px 0; z-index: 20;
    color: var(--icu-text-primary); /* không dùng chữ trắng kế thừa từ MudAppBar — theo token (sáng/tối đều chuẩn) */
}
.account-menu-label { padding: 6px 16px; font-size: .8125rem; opacity: .7; }
.account-menu-item { display: block; padding: 9px 16px; color: inherit; text-decoration: none; font-size: .9375rem; }
.account-menu-item:hover { background: var(--mud-palette-action-default-hover); }

/* ThemeToggle (appbar — ADR-0126): dropdown details/summary zero-JS, 3 nút Sáng/Tối/Hệ thống → form GET /bff/theme
   (form submit = điều hướng document thật, không bị Router/enhanced-nav chặn). */
.theme-toggle { position: relative; display: inline-flex; }
.theme-toggle-summary { list-style: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer; font-size: 1.05rem; }
.theme-toggle-summary::-webkit-details-marker { display: none; }
.theme-toggle-summary:hover { background: var(--mud-palette-action-default-hover); }
.theme-toggle-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 20; }
.theme-toggle-option { width: 100%; text-align: left; background: none; border: 0; padding: 9px 16px;
    font: inherit; font-size: .9375rem; color: inherit; cursor: pointer; }
.theme-toggle-option:hover { background: var(--mud-palette-action-default-hover); }

/* Cầu nối vô hình chống rớt hover giữa summary và dropdown panel (2026-10-12) */
.account-menu-panel::before,
.theme-toggle-panel::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* Đánh dấu lựa chọn ĐANG CHỌN trong dropdown (ADR-0143, 2026-10-03): cookie HttpOnly + layout client-side + zero-JS
   ⇒ server đã ghi giá trị CHỌN lên <html> (data-icu-mode / data-icu-cb) — CSS dùng tổ tiên đánh dấu nút tương ứng
   (✓ + nền chip-on + đậm). Mọi nút name="mode" trong ThemeToggle phải CÓ rule here (guard ThemeToggleSelectionCssTests). */
.theme-toggle-check { visibility: hidden; margin-right: .375rem; }
html[data-icu-mode="light"]  .theme-toggle-option[value="light"],
html[data-icu-mode="dark"]   .theme-toggle-option[value="dark"],
html[data-icu-mode="system"] .theme-toggle-option[value="system"],
html[data-icu-cb="off"]            .theme-toggle-option[value="off"],
html[data-icu-cb="deuteranopia"]   .theme-toggle-option[value="deuteranopia"],
html[data-icu-cb="protanopia"]     .theme-toggle-option[value="protanopia"],
html[data-icu-cb="tritanopia"]     .theme-toggle-option[value="tritanopia"] {
    background: var(--icu-chip-on);
    color: var(--icu-text-primary); /* lần 8: chữ trên chip-on LUÔN theo text-primary (primary làm chữ = dark customer 2.04:1) */
    font-weight: 700;
}
html[data-icu-mode="light"]  .theme-toggle-option[value="light"] .theme-toggle-check,
html[data-icu-mode="dark"]   .theme-toggle-option[value="dark"] .theme-toggle-check,
html[data-icu-mode="system"] .theme-toggle-option[value="system"] .theme-toggle-check,
html[data-icu-cb="off"]            .theme-toggle-option[value="off"] .theme-toggle-check,
html[data-icu-cb="deuteranopia"]   .theme-toggle-option[value="deuteranopia"] .theme-toggle-check,
html[data-icu-cb="protanopia"]     .theme-toggle-option[value="protanopia"] .theme-toggle-check,
html[data-icu-cb="tritanopia"]     .theme-toggle-option[value="tritanopia"] .theme-toggle-check { visibility: visible; }

/* LanguageToggle (appbar — ADR-0148): đánh dấu "đang chọn" theo aria-current="true" (server ghi ngôn ngữ area lên
   <html data-icu-lang>, WASM giữ lại trên nút khi render) — GENERIC nên thêm ngôn ngữ mới không cần sửa CSS.
   Nút khác nút theme: summary phải nới chiều rộng (có mã ngôn ngữ cạnh icon 🌐), không kẹt hình tròn 2.25rem. */
.language-toggle .theme-toggle-summary { width: auto; padding: 0 .5rem; border-radius: 999px; gap: .25rem; font-size: .9375rem; }
.theme-toggle-lang-code { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.theme-toggle-option[aria-current="true"] { background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 700; }
.theme-toggle-option[aria-current="true"] .theme-toggle-check { visibility: visible; }

/* Org login — chọn Gia nhập org / Đăng ký org mới (SSR-first; thay MudTabs không đổi tab khi không có JS) */
.org-mode-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--icu-border); margin-bottom: 16px; }
.org-mode-tabs a {
    flex: 1; text-align: center; padding: 10px 0; text-decoration: none;
    color: var(--icu-text-secondary); border-bottom: 2px solid transparent; font-size: .95rem;
}
.org-mode-tabs a.active { color: var(--icu-primary-text); border-bottom-color: var(--icu-primary); font-weight: 500; }



/* List filter bar — label trên mỗi field, grid 2 cột, nút hành động căn giữa dưới */
.icu-filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-bottom: 16px; }
.icu-filter-field { display: flex; flex-direction: column; gap: 6px; }
.icu-filter-label { font-size: .875rem; font-weight: 500; color: var(--icu-text-secondary); }
.icu-filter-actions { display: flex; justify-content: center; gap: 8px; }
.icu-filter-field select.icu-input,
.icu-filter-field input.icu-input { width: 100%; height: 42px; min-height: 42px; box-sizing: border-box; }

/* Đồng bộ kích thước của SkuSelect / WarehouseSelect / SearchSelect trong ListFilterField với các select.icu-input mặc định */
.icu-filter-field .icu-sku-select-single,
.icu-filter-field .icu-sku-select-multi,
.icu-filter-field .icu-warehouse-select,
.icu-filter-field .icu-search-select {
    width: 100%;
}
.icu-filter-field .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.icu-filter-field .mud-input-control > .mud-input-control-input-container {
    display: flex;
    align-items: center;
}
.icu-filter-field .mud-input.mud-input-outlined {
    width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: var(--icu-radius) !important;
    background-color: var(--icu-surface) !important;
    box-sizing: border-box !important;
}
.icu-filter-field .mud-input.mud-input-outlined .mud-input-slot {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 1rem !important;
    color: var(--icu-text-primary) !important;
    box-sizing: border-box !important;
}
.icu-filter-field .mud-input.mud-input-outlined .mud-input-adornment {
    margin-right: 6px;
}
.icu-filter-field-full { grid-column: 1 / -1; }

/* Hàng tuỳ chọn Checkbox trong Filter Bar — nằm ngang, thẳng hàng, cân đối */
.icu-filter-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 4px 0; }
.icu-filter-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: .875rem; font-weight: 500; color: var(--icu-text-primary); }
.icu-filter-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--icu-primary); }

/* Thanh Tab Báo cáo kho — gạch chân primary khi active, zero-JS link */
.icu-report-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--icu-border); margin-bottom: 16px; }
.icu-report-tab { display: inline-flex; align-items: center; padding: 8px 16px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--icu-text-secondary); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; margin-bottom: -1px; }
.icu-report-tab:hover { color: var(--icu-text-primary); }
.icu-report-tab[aria-current="true"] { color: var(--icu-primary-text); border-bottom-color: var(--icu-primary); font-weight: 600; }

/* Chip chọn nhóm loại nội dung (trang khám phá /stories|comics|movies/{trending|popular|recommend|watching} — ADR-0128:
   module là SEGMENT PATH, chip là anchor đổi route (không còn select `?module=`). */
.icu-filter-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }
.icu-filter-chip { display: inline-block; padding: .25rem .75rem; border: 1px solid var(--icu-border);
    border-radius: var(--icu-radius-pill); color: var(--icu-text-primary); background: var(--icu-surface);
    text-decoration: none; font-size: .8125rem; line-height: 1.35; }
.icu-filter-chip:hover, .icu-filter-chip:focus-visible { background: var(--icu-muted-bg); }
.icu-filter-chip-on { border-color: var(--icu-primary); background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 600; }

.icu-row-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 45px; }

/* BẢO VỆ CẤU TRÚC BẢNG:
   Khi .icu-row-actions được gán trực tiếp lên thẻ <td> / <th> (MudTd / MudTh):
   BẮT BUỘC giữ display: table-cell để chiều cao ô luôn đồng bộ 100% với chiều cao hàng <tr> (table-cell stretch).
   Điều này ngăn chặn tình trạng ô Hành động bị co ngắn hơn các cột nhiều dòng (ví dụ cột Kho),
   giúp đường viền kẻ ngang (border-bottom) luôn nối liền mạch tuyệt đối trên toàn bộ hàng, không bị hụt hay đứt đoạn. */
td.icu-row-actions,
th.icu-row-actions {
    display: table-cell !important;
    vertical-align: middle;
    height: 45px;
    white-space: normal;
}
td.icu-row-actions > * {
    margin: 2px 4px;
    vertical-align: middle;
}
/* Nút icon hành động màu PRIMARY — dùng token --icu-primary-text (guard ≥4.5 trong mọi cb×mode×area, IcuTokenContrastTests);
   KHÔNG dùng Color="Primary" của MudBlazor (palette dark không đảm bảo — ADR-0126 sửa lần 10). */
.icu-action-icon-primary { color: var(--icu-primary-text) !important; }
.icu-action-icon-warning { color: var(--icu-warning-text) !important; } /* icon cảnh báo dùng token TEXT (đậm) — #F4B400/#F0E442 trên nền sáng chỉ 1.3–1.9:1 (sweep ADR-0151, 2026-10-05). */

/* Bảng compact cho danh sách nhiều cột — tối ưu đệm ngang từ 16px về 8px */
.icu-table-compact .mud-table-cell {
    padding-inline: 8px !important;
}

/* Lưới truyện khách (Customer /stories) — ảnh bìa đồng đều theo hàng/cột dù ảnh gốc khác size:
   aspect-ratio cố định 3/4 + object-fit: cover crop ảnh về cùng khung; grid auto-fill co theo màn hình. */
.icu-story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.icu-story-card { display: block; height: 100%; color: inherit; text-decoration: none; } /* cả card là link vào chi tiết (bỏ nút Đọc) */
.icu-story-card:hover .icu-story-card-inner { box-shadow: var(--icu-shadow-card); }
.icu-story-card-inner { height: 100%; overflow: hidden; } /* cột cùng cao; bo góc ảnh theo card */
.icu-story-cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--icu-muted-bg); }
.icu-story-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--icu-text-secondary); font-size: .875rem; text-align: center; padding: 0 8px; }
.icu-story-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* title dài không đẩy card lệch hàng/cột */

/* Chi tiết truyện khách kiểu truyenfull: cover trái + thông tin phải; mô tả giữ xuống dòng. */
.icu-story-detail-header { display: flex; gap: 24px; flex-wrap: wrap; }
.icu-story-detail-cover { width: min(220px, 100%); flex-shrink: 0; overflow: hidden; border-radius: var(--icu-radius); }
.icu-story-detail-info { flex: 1 1 340px; min-width: 0; }
.icu-story-description { white-space: pre-line; color: var(--icu-text-primary); }

/* Nav chuyển chương đầu/cuối trang đọc (Chương trước/Tiếp — truyenfull): 2 nút cạnh nhau, wrap khi màn hẹp, căn giữa. */
.icu-chapter-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Header trang đọc chương khách: tên truyện (link về chi tiết) + tên chương + nav căn giữa; nội dung chương bên ngoài header hiển thị bình thường (không căn giữa). */
.icu-reader-header { text-align: center; margin-bottom: 8px; }
.icu-reader-story-link { color: var(--icu-primary-text); text-decoration: none; }
.icu-reader-story-link:hover { text-decoration: underline; }

/* Reader truyện tranh — mỗi trang ảnh là một img xếp dọc, toàn chiều rộng vùng nội dung (giữ nét/không nén); tối đa 900px cho màn rộng. */
.icu-comic-reader { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.icu-comic-page { display: block; width: 100%; max-width: 900px; height: auto; background: var(--icu-muted-bg); }

/* 2 chế độ đọc truyện tranh (ReadComic): thanh chọn chế độ trên cùng; lật trang bấm trái/phải (phím mũi tên/vuốt — swipe qua icuSwipe). */
.icu-reader-mode-bar { display: flex; gap: 4px; justify-content: center; margin-bottom: 12px; }
.icu-comic-paged { display: flex; flex-direction: column; align-items: center; gap: 10px; outline: none; }
.icu-comic-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: min(68dvh, 760px); }
.icu-comic-page-single { display: block; width: auto; height: auto; max-width: 100%; max-height: 68dvh; background: var(--icu-muted-bg); border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,.18); }
/* Hit-zone lật trang: 2 nút trong suốt phủ nửa trái/phải vùng ảnh; mũi tên mờ hiện giữa mép — rõ là bấm được. */
.icu-comic-turn { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.icu-comic-turn-prev { left: 0; }
.icu-comic-turn-next { right: 0; }
.icu-comic-turn::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.5rem; line-height: 1; color: var(--icu-primary); opacity: .35; pointer-events: none; }
.icu-comic-turn-prev::after { content: "\2039"; left: 16px; }
.icu-comic-turn-next::after { content: "\203A"; right: 16px; }
.icu-comic-turn:disabled { cursor: default; }
.icu-comic-turn:disabled::after { opacity: .08; }
.icu-comic-turn:hover:not(:disabled)::after { opacity: .7; }
.icu-comic-page-counter { margin-top: 4px; }


/* Breadcrumb bootstrap-like (kiểu Bootstrap 5.3 components/breadcrumb) — đầu mỗi page trong 3 area layout.
   CSS tự viết vì bootstrap.css không được load toàn cục (App.razor chỉ link MudBlazor + app.css);
   repo không dùng .razor.css nữa (comment trong App.razor) nên đặt ở đây. */
.icu-breadcrumb { margin-bottom: 1.5rem; font-size: .9375rem; }
.icu-breadcrumb .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: .625rem 1rem; background: var(--icu-muted-surface); border-radius: var(--icu-radius-sm); }
.icu-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; }
.icu-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 .625rem; color: var(--icu-text-secondary); }
.icu-breadcrumb .breadcrumb-item a { color: var(--icu-text-secondary); text-decoration: none; }
.icu-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.icu-breadcrumb .breadcrumb-item span[aria-current="page"] { color: var(--icu-text-primary); font-weight: 600; }
/* Chip phân biệt area — crumb đầu tiên: màu LẤY THEO THEME KEY của vùng (--icu-link/--icu-info-soft:
   customer tím · manager xanh dương · org teal — app.css .icu-theme-{key}). */
.icu-breadcrumb .breadcrumb-item.area-customer a,
.icu-breadcrumb .breadcrumb-item.area-manager a,
.icu-breadcrumb .breadcrumb-item.area-org a { padding: .1875rem .625rem; border-radius: var(--icu-radius-sm); font-weight: 600;
    color: var(--icu-link); background: var(--icu-info-soft); }

/* Community (ADR-0095) — thanh reaction (6 loại) + widget đánh giá 1..5★ trên trang chi tiết nội dung.
   Component: Components/Shared/ReactionBar.razor + RatingWidget.razor. */
.icu-reaction-bar { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin: .75rem 0; }
.icu-reaction-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .625rem; border: 1px solid var(--icu-border);
    border-radius: var(--icu-radius-pill); background: var(--icu-surface); color: var(--icu-text-primary); cursor: pointer; line-height: 1.25; }
.icu-reaction-btn:hover:not(:disabled) { background: var(--icu-muted-bg); }
.icu-reaction-btn:disabled { cursor: default; opacity: .6; }
.icu-reaction-btn-active { border-color: var(--icu-primary); background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 600; }
.icu-reaction-emoji { font-size: 1rem; }
.icu-reaction-count { font-size: .8125rem; }

.icu-rating-widget { margin: .75rem 0; }
.icu-rating-summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.icu-rating-average { font-size: 1.125rem; letter-spacing: .0625rem; }
.icu-star { color: var(--icu-border); }
.icu-star-on { color: var(--icu-warning-text); }
.icu-rating-distribution { margin-top: .5rem; max-width: 20rem; }
.icu-rating-row { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--icu-text-secondary); }
.icu-rating-row-label { min-width: 1.75rem; text-align: right; }
.icu-rating-bar { flex: 1 1 auto; height: .5rem; background: var(--icu-border-light); border-radius: var(--icu-radius-pill); overflow: hidden; }
.icu-rating-bar-fill { display: block; height: 100%; background: var(--icu-warning-text); }
.icu-rating-row-count { min-width: 2rem; }
.icu-rating-actions { display: flex; align-items: center; flex-wrap: wrap; }
.icu-star-btn { border: 0; background: transparent; color: var(--icu-border); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .125rem; }
.icu-star-btn:hover:not(:disabled) { color: var(--icu-warning-text); }
.icu-star-btn:disabled { cursor: default; opacity: .6; }
.icu-star-btn-on { color: var(--icu-warning-text); }

/* Community Phase 2 — danh sách đánh giá (filter sao + pager) và bình luận 2 cấp.
   Component: Components/Shared/ReviewSection.razor + ReviewReplies.razor. */
.icu-reviews { margin: .75rem 0; }
.icu-review-filter { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.icu-review-chip { border: 1px solid var(--icu-border); background: var(--icu-surface); color: var(--icu-text-primary); border-radius: var(--icu-radius-pill);
    padding: .125rem .5rem; font-size: .8125rem; cursor: pointer; }
.icu-review-chip:hover:not(:disabled) { background: var(--icu-muted-bg); }
.icu-review-chip:disabled { cursor: default; opacity: .6; }
.icu-review-chip-on { border-color: var(--icu-primary); background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 600; }
.icu-review { border-top: 1px solid var(--icu-border-light); padding: .5rem 0; }
.icu-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--icu-text-secondary); }
.icu-review-stars { color: var(--icu-warning-text); letter-spacing: .0625rem; }
.icu-review-author { font-weight: 600; color: var(--icu-text-primary); }
.icu-review-sort { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.icu-review-votes { display: flex; gap: .25rem; margin-top: .25rem; }

/* Nút "Báo cáo" (đánh giá/bình luận/nội dung/chương-tập) — ReviewSection/ReviewReplies/ReportButton.
   Dùng chung cho <button> (đã đăng nhập → mở modal) và <a> (khách → /customer/auth/login). */
.icu-report-btn { display: inline-block; border: 1px solid var(--icu-border); border-radius: var(--icu-radius-pill); background: var(--icu-surface);
    color: var(--icu-text-secondary); font: inherit; font-size: .75rem; line-height: 1.3; padding: .25rem .625rem; cursor: pointer; text-decoration: none; }
.icu-report-btn:hover:not(:disabled), .icu-report-btn:focus-visible { color: var(--icu-danger); border-color: var(--icu-danger); background: var(--icu-muted-bg); }
.icu-report-btn:disabled { opacity: .6; cursor: default; }
.icu-vote-btn { border: 1px solid var(--icu-border); background: var(--icu-surface); color: var(--icu-text-secondary); border-radius: var(--icu-radius-pill);
    padding: .125rem .5rem; font-size: .8125rem; cursor: pointer; }
.icu-vote-btn:hover:not(:disabled) { background: var(--icu-muted-bg); }
.icu-vote-btn:disabled { cursor: default; opacity: .6; }
.icu-vote-btn-on { border-color: var(--icu-primary); background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 600; }
.icu-notification-bell { min-width: 0; }
.icu-notification-count { display: inline-block; margin-left: .25rem; padding: 0 .375rem; border-radius: var(--icu-radius-pill);
    background: var(--icu-danger); color: var(--icu-on-danger); font-size: .6875rem; font-weight: 700; line-height: 1.25rem; }
/* Trang Thông báo (trang /notifications) — dòng theo trạng thái: unread = viền trái primary; đã đọc = mờ. */
.icu-notification-unread { border-left: 4px solid var(--icu-primary); }
.icu-notification-read { opacity: .75; }
/* ADR-0133 — body 2 dòng + icon category + chip ưu tiên (sáng/tối theme). */
.icu-notification-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icu-notification-cat-community { color: var(--icu-primary-text); }
.icu-notification-cat-security { color: var(--icu-warning-text); }
.icu-notification-cat-system { color: var(--icu-link); }
.icu-notification-cat-default { color: var(--icu-text-secondary); }
.icu-notification-priority { display: inline-block; padding: 2px 8px; border-radius: var(--icu-radius-pill); font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.icu-notification-priority-high { background: var(--icu-warning-soft); color: var(--icu-warning-text); }
.icu-notification-priority-urgent { background: var(--icu-danger-soft); color: var(--icu-danger); }

.icu-replies { margin-top: .25rem; }
.icu-reply { border-left: 2px solid var(--icu-border-light); padding: .25rem 0 .25rem .5rem; margin-bottom: .25rem; }
.icu-reply-child { margin-left: 1rem; border-left-color: var(--icu-primary-soft); }
.icu-reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .75rem; color: var(--icu-text-secondary); }
.icu-reply-author { font-weight: 600; color: var(--icu-text-primary); }
.icu-reply-delete, .icu-reply-action { border: 0; background: transparent; color: var(--icu-primary-text); cursor: pointer;
    font-size: .75rem; padding: 0 .25rem; }
.icu-reply-delete:hover:not(:disabled), .icu-reply-action:hover:not(:disabled) { text-decoration: underline; }
.icu-reply-delete { color: var(--icu-danger); }
.icu-reply-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .25rem; }
.icu-reply-form-root { margin-top: .5rem; }
.icu-reply-input { flex: 1 1 16rem; min-height: 2.25rem; padding: .375rem .5rem; border: 1px solid var(--icu-border);
    border-radius: var(--icu-radius-sm); font: inherit; font-size: .875rem; }

/* Trang chủ — card entry nhóm nội dung (Home): 3 card bằng chiều cao, link cả card. */
.icu-group-card { display: block; height: 100%; text-decoration: none; }
.icu-group-card-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; } /* MudCard mặc định flex column: align-items set theo cross-axis (ngang) — nếu để center thì content co-fit và rơi giữa, lệch lề giữa các card; stretch ép full ngang cho thẳng hàng. */

/* AppBar - brand + account actions: tránh tràn trên mobile (2026-09-17) */
.icu-appbar-brand { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icu-appbar-brand .mud-typography-h6 { line-height: 1.5; }
.icu-account-actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 640px) {
    .icu-appbar-brand { font-size: 1rem; }
    .icu-appbar-brand-area { display: none; }
    .icu-account-actions { gap: .25rem; }
    .icu-account-actions .mud-button { min-width: 0; padding: 4px 8px; }
    .icu-account-actions .mud-button-label { font-size: .8125rem; line-height: 1.4; }
}

/* Sticky footer (2026-10-01): nội dung ngắn ⇒ footer sát đáy viewport; nội dung dài ⇒ footer sau nội dung — docs/ux-ui/ui-guidelines.md §13.
   Cơ sở: MudBlazor có *{box-sizing:border-box} + .mud-main-content{padding-top:var(--mud-appbar-height)} ⇒ min-height 100dvh
   đã trừ sẵn chiều cao appbar; .mud-main-content thành flex-column + container nội dung giãn phần trống ⇒ đẩy footer xuống đáy.
   Áp MỌI layout dùng MudLayout (Customer/Manager/Org/Account — AppBar fixed, Drawer absolute không nằm trong flow này). */
.mud-main-content { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.mud-main-content > .mud-container { flex: 1 0 auto; }

/* Footer toàn web (2026-09-25) — docs/ux-ui/ui-guidelines.md §13 */
.icu-footer { border-top: 1px solid var(--icu-border-light); background: var(--icu-muted-bg); margin-top: var(--icu-space-5); }
.icu-footer-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--icu-space-5); padding-block: var(--icu-space-5); }
.icu-footer-inner-minimal { display: flex; justify-content: space-between; align-items: center; gap: var(--icu-space-3); }
.icu-footer-brand { min-width: 0; }
.icu-footer-brand .mud-typography-subtitle2 { color: var(--icu-text-primary); }
.icu-footer-links-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--icu-space-1); min-width: 0; }
.icu-footer-heading { color: var(--icu-text-secondary); margin-bottom: var(--icu-space-1); }
.icu-footer-link { color: var(--icu-text-secondary); text-decoration: none; font-size: .875rem; }
.icu-footer-link:hover, .icu-footer-link:focus-visible { color: var(--icu-link); text-decoration: underline; }
.icu-footer-meta { grid-column: 1 / -1; border-top: 1px solid var(--icu-border-light); margin-top: var(--icu-space-3); padding-top: var(--icu-space-3); color: var(--icu-text-secondary); font-size: .8125rem; }
@media (max-width: 640px) {
    .icu-footer-inner { grid-template-columns: 1fr; gap: var(--icu-space-3); }
}

/* ===== Player HLS — thanh điều khiển tự dựng (ADR-0121/P2) =====
   Tắt controls native (thanh native nằm trong shadow DOM đóng + controlsList không hỗ trợ mọi browser)
   ⇒ bar do icu.hls.js dựng; cụm bên phải (Chất lượng/Phụ đề/fullscreen) do Blazor dựng TRÊN CÙNG DÒNG
   (dùng chung --icu-bar-h; bar chừa --icu-bar-right). Windowed LUÔN hiển thị; fullscreen auto-hide 5 s
   (ADR-0121/P3 — ẩn cả bar lẫn con trỏ; rê chuột/phím/click ⇒ hiện lại). */
.icu-player { position: relative; background: #000; border-radius: var(--icu-radius); overflow: hidden;
    --icu-bar-h: 2.5rem; }
.icu-video-player { display: block; width: 100%; max-height: 480px; background: #000; }

.icu-player-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--icu-bar-h);
    display: flex; align-items: center; gap: .375rem; padding: 0 .5rem; padding-right: 6rem; /* JS ghi inline giá trị thật */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%); }
.icu-player-bar-btn { min-width: 2rem; height: 2rem; border: 0; background: transparent; color: #fff; cursor: pointer;
    font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.icu-player-bar-time { color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.icu-player-bar-seek { flex: 1 1 auto; min-width: 0; }
.icu-player-bar-volume { width: 5rem; }
.icu-player-bar input[type="range"] { accent-color: var(--icu-primary); height: 1.25rem; cursor: pointer; }

.icu-player-actions { position: absolute; right: .5rem; bottom: .125rem; z-index: 11; height: var(--icu-bar-h);
    display: flex; align-items: center; gap: .375rem; }
.icu-player-menu-anchor { position: relative; }
.icu-player-btn { border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .45); font: inherit; }
.icu-player-btn--menu { display: inline-flex; align-items: center; gap: .15rem; height: 1.9rem; padding: 0 .5rem;
    border-radius: 999px; font-size: .8rem; white-space: nowrap; }
.icu-player-btn-glyph { font-size: .95rem; line-height: 1; }
.icu-player-btn--menu:hover, .icu-player-btn--menu:focus-visible, .icu-player-btn--open { background: rgba(0, 0, 0, .75); }
.icu-player-btn--fullscreen { width: 2rem; height: 2rem; border-radius: 50%; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; }
.icu-player-btn--fullscreen:hover, .icu-player-btn--fullscreen:focus-visible { background: rgba(0, 0, 0, .75); }
.icu-player-btn--nav { width: 2rem; height: 2rem; border-radius: 50%; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.icu-player-btn--nav:hover, .icu-player-btn--nav:focus-visible { background: rgba(0, 0, 0, .75); }
.icu-player-btn--disabled { opacity: .4; cursor: not-allowed; }
.icu-player-btn--disabled:hover { background: transparent; }

.icu-player-panel-backdrop { position: absolute; inset: 0; z-index: 5; background: transparent; }
.icu-player-panel { position: absolute; right: 0; left: auto; bottom: calc(100% + .35rem); z-index: 12;
    min-width: 180px; max-width: min(40vw, 420px); max-height: min(60vh, 260px); overflow-y: auto; padding: .35rem 0;
    background: rgba(18, 18, 18, .96); color: #fff; border-radius: 6px; box-shadow: var(--icu-shadow-pop); }
.icu-player-panel-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, .9); font: inherit; font-size: .875rem; padding: .4rem .75rem; }
.icu-player-panel-item:hover, .icu-player-panel-item:focus-visible { background: color-mix(in srgb, var(--icu-primary) 35%, transparent); }
.icu-player-panel-item--active { color: var(--icu-primary-soft); font-weight: 600; }

@media (max-width: 900px) {
    .icu-player-bar-volume { display: none; } /* giữ nút mute 🔇 — tiết chỗ cho cụm nút bên phải */
}
@media (max-width: 640px) {
    .icu-player-btn--menu { min-height: 2.75rem; }
    .icu-player-btn--fullscreen, .icu-player-btn--nav { width: 2.75rem; height: 2.75rem; }
    .icu-player-menu-selection { display: none; }
}
@media (max-width: 480px) {
    .icu-player-bar-time { display: none; }
}
.icu-player:fullscreen { width: 100vw; height: 100vh; border-radius: 0; --icu-bar-h: 3rem; }
.icu-player:fullscreen .icu-video-player { max-height: 100vh; height: 100%; }

/* Auto-hide bar + CON TRỎ CHỈ khi fullscreen (ADR-0121/P3): windowed luôn hiện; fullscreen không thao tác 5 s ⇒ ẩn.
   Rê chuột/bấm phím tắt/click/chạm ⇒ gỡ class `icu-player--idle` ⇒ bar + con trỏ hiện lại, hẹn lại 5 s.
   Phụ đề tự vẽ (.icu-player-captions) nâng khi bar hiện (trên bar) / hạ xuống khi bar ẩn — không bao giờ bị che. */
.icu-player-bar, .icu-player-actions { transition: opacity .25s ease; }
.icu-player--idle .icu-player-bar,
.icu-player--idle .icu-player-actions { opacity: 0; pointer-events: none; }
.icu-player:fullscreen.icu-player--idle { cursor: none; }
.icu-player-captions { position: absolute; left: 0; right: 0; z-index: 6; text-align: center; padding: 0 8%;
    pointer-events: none; }
.icu-player-captions-text { display: inline-block; max-width: 100%; padding: .15rem .6rem; white-space: pre-line;
    line-height: 1.4; border-radius: var(--icu-radius-sm);
    font-size: calc(1.05rem * var(--icu-caption-scale, 1)); color: var(--icu-caption-color, #fff);
    background: var(--icu-caption-bg, rgba(0, 0, 0, .45)); text-shadow: var(--icu-caption-shadow, none); }
.icu-player-captions.icu-captions--bottom { bottom: calc(var(--icu-bar-h) + .75rem); top: auto; transition: bottom .25s ease; }
.icu-player--idle .icu-player-captions.icu-captions--bottom { bottom: 1.25rem; }
.icu-player-captions.icu-captions--middle { top: 50%; bottom: auto; transform: translateY(-50%); }
.icu-player-captions.icu-captions--top { top: calc(var(--icu-bar-h) + .75rem); bottom: auto; }
.icu-player:fullscreen .icu-player-captions-text { font-size: calc(1.35rem * var(--icu-caption-scale, 1)); }

/* Panel cài đặt phụ đề (ADR-0122): label nhóm + chip + slider. */
.icu-player-panel-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: rgba(255, 255, 255, .7); padding: .45rem .75rem .1rem; }
.icu-player-option-row { display: flex; flex-wrap: wrap; gap: .35rem; padding: .15rem .5rem .45rem; }
.icu-player-option-chip { border: 0; cursor: pointer; font: inherit; font-size: .78rem; padding: .25rem .55rem;
    border-radius: 999px; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); }
.icu-player-option-chip:hover, .icu-player-option-chip:focus-visible { background: rgba(255, 255, 255, .22); }
.icu-player-option-chip--active { background: var(--icu-primary); color: #fff; }
.icu-player-option-slider { width: calc(100% - 1rem); margin: .1rem .5rem .5rem; accent-color: var(--icu-primary); }
/* ===== Trang đọc TRUYỆN CHỮ — tuỳ chọn đọc (ADR-0127) =====
   CSS var --icu-rd-* đặt trên <html> (SSR App.razor emit từ cookie icu.platform.reader.story; JS icuReader set khi chỉnh).
   Nền đọc theo data-icu-rd-theme (sepia/dark/...) — độc lập theme toàn app; ICON nền theo `auto` giữ nguyên app. */
.icu-reader { outline: none; } /* vùng nhận phím tắt (tabindex=0) — không hiện viền focus toàn khối. */
.icu-reader-surface { background: var(--icu-reader-bg, transparent); color: var(--icu-reader-fg, inherit);
    border-radius: var(--icu-radius); padding: 1.25rem 1.5rem; margin-top: .5rem; }
.icu-reader-content { white-space: pre-wrap; font-family: var(--icu-rd-font, inherit); font-weight: var(--icu-rd-weight, 400);
    font-style: var(--icu-rd-style, normal); line-height: var(--icu-rd-leading, 1.8); font-size: var(--icu-rd-size, 19px);
    text-align: var(--icu-rd-align, left); max-width: var(--icu-rd-width, 760px); margin-inline: auto; }

/* Nền đọc (theo data-icu-rd-theme trên <html>) — đặt trước khi surface dùng. */
html[data-icu-rd-theme="light"] { --icu-reader-bg: #ffffff; --icu-reader-fg: #1f1f1f; }
html[data-icu-rd-theme="sepia"] { --icu-reader-bg: #f4ecd8; --icu-reader-fg: #3b3226; }
html[data-icu-rd-theme="dark"]  { --icu-reader-bg: #1b1c1f; --icu-reader-fg: #dcdcdc; }
html[data-icu-rd-theme="black"] { --icu-reader-bg: #000000; --icu-reader-fg: #c9c9c9; }

/* Thanh công cụ đọc: Aa (tuỳ chọn) + Mục lục + Ẩn giao diện + Lên đầu — căn giữa dưới header. */
.icu-reader-toolbar { display: flex; justify-content: center; align-items: center; gap: .375rem; flex-wrap: wrap;
    margin: .25rem 0 .5rem; }
.icu-reader-popover { position: relative; }
.icu-reader-popover-toggle { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
    padding: .375rem .875rem; border: 1px solid var(--icu-border); border-radius: var(--icu-radius-pill);
    background: var(--icu-surface); color: var(--icu-text-primary); font: inherit; font-size: .875rem; user-select: none; }
.icu-reader-popover-toggle:hover, .icu-reader-popover-toggle:focus-visible { background: var(--icu-muted-bg); }
.icu-reader-popover[open] .icu-reader-popover-toggle { border-color: var(--icu-primary); color: var(--icu-primary-text); }
.icu-reader-popover-panel { position: absolute; left: 50%; transform: translateX(-50%); z-index: 40; width: min(300px, 84vw);
    margin-top: .375rem; padding: .875rem; background: var(--icu-surface); color: var(--icu-text-primary);
    border: 1px solid var(--icu-border); border-radius: var(--icu-radius); box-shadow: var(--icu-shadow-pop); }

/* FAB "Lên đầu trang" (2026-10-01): nút ↑ KHÔNG còn cạnh toolbar header (nơi vô dụng — đang ở đầu trang) mà NỔI
   góc phải-dưới, CHỈ hiện khi đã cuộn qua ~2/3 màn hình đầu (body .icu-reader-scrolled — icu.js report() toggle).
   Zen ẩn (không đè nút thoát X cũng fixed góc này); Space/Home vẫn là đường tắt. */
.icu-reader-top-btn { display: none; }
.icu-reader-scrolled .icu-reader-top-btn { display: inline-flex; position: fixed; right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
    background: var(--icu-surface); box-shadow: var(--icu-shadow-pop); border: 1px solid var(--icu-border-light); }
.icu-reader-scrolled .icu-reader-top-btn:hover, .icu-reader-scrolled .icu-reader-top-btn:focus-visible { background: var(--icu-muted-bg); }
.icu-reader-zen .icu-reader-top-btn { display: none !important; }

/* Nội dung panel tuỳ chọn đọc: từng dòng cài đặt + chip chọn. */
.icu-reader-setting { margin-bottom: .75rem; }
.icu-reader-setting-label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem;
    color: var(--icu-text-secondary); }
.icu-reader-setting-row { display: flex; align-items: center; gap: .375rem; }
.icu-reader-range { flex: 1 1 auto; accent-color: var(--icu-primary); }
.icu-reader-setting-value { min-width: 1.75rem; text-align: center; font-size: .8125rem; }
.icu-reader-step { min-width: 2rem; padding: .25rem .5rem; border: 1px solid var(--icu-border); border-radius: .375rem;
    background: var(--icu-surface); color: var(--icu-text-primary); cursor: pointer; font: inherit; font-size: .875rem; }
.icu-reader-step:hover:not(:disabled) { background: var(--icu-muted-bg); }
.icu-reader-step:disabled { opacity: .5; cursor: default; }
.icu-reader-chip-row { display: flex; flex-wrap: wrap; gap: .375rem; }
.icu-reader-chip { padding: .25rem .625rem; border: 1px solid var(--icu-border); border-radius: 999px; cursor: pointer;
    background: var(--icu-surface); color: var(--icu-text-primary); font: inherit; font-size: .8125rem; }
.icu-reader-chip:hover:not(:disabled), .icu-reader-chip:focus-visible { background: var(--icu-muted-bg); }
.icu-reader-chip-on { border-color: var(--icu-primary); background: var(--icu-chip-on); color: var(--icu-text-primary); font-weight: 600; }
.icu-reader-reset { width: 100%; margin-top: .25rem; }

/* Mục lục chương (B2): ô "Đi tới chương số" + danh sách link cuộn trong panel. */
.icu-reader-goto { display: flex; gap: .375rem; margin-bottom: .625rem; }
.icu-reader-goto input.icu-input { flex: 1 1 auto; min-width: 0; }
.icu-reader-toc-list { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 40vh; overflow-y: auto; }
.icu-reader-toc-list li { border-bottom: 1px solid var(--icu-border-light); }
.icu-reader-toc-list a { display: block; padding: .4375rem .5rem; color: var(--icu-text-primary); text-decoration: none; }
.icu-reader-toc-list a:hover { background: var(--icu-muted-bg); }
.icu-reader-toc-list .icu-reader-toc-current a { color: var(--icu-primary-text); font-weight: 600; }
.icu-reader-toc-note { font-size: .75rem; color: var(--icu-text-secondary); margin: 0; }

/* Thanh tiến độ đọc (B3) — dính đỉnh, mảnh; fill = % cuộn. */
.icu-reader-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 50; height: 4px; background: rgba(128,128,128,.25); }
.icu-reader-progress-fill { height: 100%; width: 0; background: var(--icu-primary); transition: width .15s linear; }
.icu-reader-progress-text { position: absolute; right: .375rem; top: .5rem; font-size: .6875rem; color: var(--icu-text-secondary); }

/* Zen/focus mode (B4): ẩn giao diện ngoài nội dung — chỉ nội dung giữa màn hình. Nút thoát (X) phải nổi NGOÀI
   header (đã bị ẩn) nên để fixed — mặc định ẩn, chỉ hiện khi body có class .icu-reader-zen (Esc cũng thoát). */
.icu-reader-zen .mud-appbar,
.icu-reader-zen .icu-reader-header,
.icu-reader-zen .icu-breadcrumb,
.icu-reader-zen .icu-footer { display: none !important; }
.icu-reader-exit-zen { display: none; }
.icu-reader-zen .icu-reader-exit-zen { display: inline-flex; position: fixed; right: .75rem; bottom: .75rem; z-index: 60; }
.icu-reader-zen .icu-reader-content { max-width: var(--icu-rd-width, 760px); }

/* Chữ nav đang HỌẠT/primary-làm-chữ trong dark (ADR-0126 sửa lần 8): MudBlazor tô .mud-nav-link.active bằng
   --mud-palette-primary = #6750a4 (không có bản dark) ⇒ 1.9:1 trên drawer tối — chuyển qua --icu-primary-text
   (dark customer #cbb9f7 = 9.4:1; manager/org theo area). Light giữ nguyên màu Mud. */
html[data-icu-mode="dark"] .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
html[data-icu-mode="dark"] .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { color: var(--icu-primary-text); }
@media (prefers-color-scheme: dark) {
    html[data-icu-mode="system"] .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
    html[data-icu-mode="system"] .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { color: var(--icu-primary-text); }
}

/* Nút chữ/viền trong dark mode bị dính màu primary sẫm của light mode ⇒ đổi sang icu-primary-text sáng hơn */
html[data-icu-mode="dark"] .mud-button-text-primary,
html[data-icu-mode="system"] .mud-button-text-primary,
html[data-icu-mode="dark"] .mud-button-outlined-primary,
html[data-icu-mode="system"] .mud-button-outlined-primary,
html[data-icu-mode="dark"] .mud-icon-button-primary,
html[data-icu-mode="system"] .mud-icon-button-primary {
    color: var(--icu-primary-text) !important;
}

html[data-icu-mode="dark"] .mud-button-outlined-primary,
html[data-icu-mode="system"] .mud-button-outlined-primary {
    border-color: var(--icu-primary-text) !important;
}

/* Select/List option (ADR-0126 sửa lần 9 — 2026-10-03): MudBlazor tô item ĐANG CHỌN bằng .mud-primary-text (chữ =
   --mud-palette-primary) trên .mud-primary-hover (nền = --mud-palette-primary-hover). Token hover của MudBlazor là màu
   ĐẶC (dùng cho nút text/outlined/alert) ⇒ dark: chữ xanh sáng trên nền xanh đặc = 1.20:1 (manager) / 1.23:1 (org) —
   đo bằng computed style. Fix: item đang chọn dùng cặp Filled (nền --icu-primary + chữ --icu-on-primary ⇒ ≥4.5 ở MỌI
   area × mode × mù màu) và hover option dùng tint primary của area (--icu-item-hover-bg). Prefix `html` để thắng
   !important của MudBlazor. Áp cho MỌI select/list (MudSelect/MudList/MudAutocomplete/MudTreeView, kể cả portal/dialog). */
html .mud-selected-item.mud-primary-text { color: var(--icu-on-primary) !important; }
html .mud-selected-item.mud-primary-hover { background-color: var(--icu-primary) !important; }
html .mud-list-item-clickable:not(.mud-selected-item):hover,
html .mud-list-item-clickable:not(.mud-selected-item):focus-visible,
html .mud-list-item-clickable:not(.mud-selected-item):active { background-color: var(--icu-item-hover-bg) !important; }

/* Trợ giúp tương phản cho item select/autocomplete có cấu trúc ItemTemplate (2026-10-12):
   Khi item được chọn, nền chuyển thành --icu-primary. Mọi text phụ (text-secondary/caption),
   text-primary và chip/badge bên trong phải tự động thích ứng với --icu-on-primary (≥4.5:1). */
html .mud-selected-item .mud-text-primary { color: var(--icu-on-primary) !important; }
html .mud-selected-item .text-secondary,
html .mud-selected-item .mud-typography-caption,
html .mud-selected-item .icu-warehouse-name { color: var(--icu-on-primary) !important; opacity: 0.88; }
html .mud-selected-item .mud-chip,
html .mud-selected-item .icu-warehouse-chip {
    color: var(--icu-on-primary) !important;
    border-color: currentColor !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}
html[data-icu-mode="dark"] .mud-selected-item .mud-chip,
html[data-icu-mode="dark"] .mud-selected-item .icu-warehouse-chip {
    color: var(--icu-on-primary) !important;
    border-color: currentColor !important;
    background-color: rgba(0, 0, 0, 0.22) !important;
}
@media (prefers-color-scheme: dark) {
    html[data-icu-mode="system"] .mud-selected-item .mud-chip,
    html[data-icu-mode="system"] .mud-selected-item .icu-warehouse-chip {
        color: var(--icu-on-primary) !important;
        border-color: currentColor !important;
        background-color: rgba(0, 0, 0, 0.22) !important;
    }
}

/* Badge loại kho trong WarehouseSelect (2026-10-12):
   Tối ưu tương phản WCAG AA cho cả trạng thái thường, hover và dark mode. */
.icu-warehouse-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 9999px;
    font-weight: 500;
    border: 1px solid transparent;
}
.icu-warehouse-chip-physical {
    background-color: var(--icu-chip-on);
    color: var(--icu-primary-text);
    border-color: var(--icu-primary-soft);
}
.icu-warehouse-chip-virtual {
    background-color: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04));
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default, rgba(0,0,0,0.12));
}
html[data-icu-mode="dark"] .icu-warehouse-chip-virtual {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
@media (prefers-color-scheme: dark) {
    html[data-icu-mode="system"] .icu-warehouse-chip-virtual {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
    }
}


/* Token SEMANTIC thiếu bản dark (ADR-0126 sửa lần 7 — 2026-10-03): --icu-danger chỉ có giá trị light nên trong dark
   chữ/icon đỏ ~2.5:1; thêm bản dark + bộ warning-soft/text (chip ưu tiên, sao đánh giá — xoá hex trần riêng dark). */
html[data-icu-mode="dark"] {
    --icu-primary-text: #cbb9f7;
    --icu-danger: #ff8a80;
    --icu-on-danger: #101418;
    --icu-warning-soft: #3a3416;
    --icu-warning-text: #f2e48a;
}
@media (prefers-color-scheme: dark) {
    html[data-icu-mode="system"] {
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0126 sửa lần 7). */
        --icu-primary-text: #cbb9f7;
        --icu-danger: #ff8a80;
        --icu-on-danger: #101418;
        --icu-warning-soft: #3a3416;
        --icu-warning-text: #f2e48a;
    }
}

/* ===== Hỗ trợ mù màu — ADR-0143, CSS-first, zero-JS =====
   Server đặt data-icu-cb trên <html> từ cookie TOÀN CỤC icu.platform.a11y.colorblind (MỘT bộ cho MỌI area — mù màu là
   đặc điểm người dùng). Remap token SEMANTIC (--icu-* + --mud-palette-error/success/warning/info) theo 3 nhánh
   deuteranopia (đỏ–lục) / protanopia (đỏ yếu) / tritanopia (xanh–vàng) — KHÔNG dùng CSS filter toàn trang (vỡ
   position:fixed của appbar/drawer). Primary area giữ nguyên trừ nhánh tritanopia (blue↔green lẫn nhau). 
   LƯU Ý: mỗi nhánh có 2 khối (data-icu-mode="dark" + @media cho system) — sửa phải sửa CẢ 2; block CB đặt SAU khối dark
   để thắng khi cùng specificity. Luôn kèm icon/chữ (chất lượng, không chỉ màu — WCAG 1.4.1). */

/* Link gạch chân khi bật bất kỳ nhánh mù màu — CHỈ link nằm trong KHỐI CHỮ (WCAG 1.4.1: yêu cầu với link trong văn
   bản để không chỉ dựa màu). Nav/footer/breadcrumb/menu/chip = link "khung điều hướng" đã phân biệt bằng vị trí/icon/
   viền/hover ⇒ KHÔNG gạch chân (sửa lần 2 — ADR-0143; guard ColorBlindCssTests cấm quay lại blanket `a:not(...)`). */
html[data-icu-cb="deuteranopia"] :is(p, .icu-story-description, .icu-reader-content) a:not(.mud-button):not(.mud-icon-button),
html[data-icu-cb="protanopia"]  :is(p, .icu-story-description, .icu-reader-content) a:not(.mud-button):not(.mud-icon-button),
html[data-icu-cb="tritanopia"]  :is(p, .icu-story-description, .icu-reader-content) a:not(.mud-button):not(.mud-icon-button) { text-decoration: underline; text-underline-offset: .15em; }

/* ── deuteranopia (đỏ–lục, phổ biến nhất): danger = vermillion-cam, success/link = xanh dương, warning = vàng ── */
html[data-icu-cb="deuteranopia"] {
    --icu-danger: #C64B00;
    --icu-danger-soft: #fdece0;
    --icu-on-danger: #ffffff;
    --icu-success: #0072B2;
    --icu-warning: #F0E442;
    --icu-warning-soft: #fcf7dc;
    --icu-warning-text: #6e6000;
    --icu-link: #0072B2;
    --icu-info-soft: #ecf6fc; /* #e0eff7 + #0072B2 = 4.41:1 (<4.5) — nền chip crumb nhạt hơn cho chế độ mù màu (sweep ADR-0151). */
    --mud-palette-error: #C64B00; --mud-palette-error-rgb: 198, 75, 0; --mud-palette-error-lighten: #db8a40; --mud-palette-error-darken: #8A3400; --mud-palette-error-hover: #FBE9DF; --mud-palette-error-text: #ffffff;
    --mud-palette-success: #0072B2; --mud-palette-success-rgb: 0, 114, 178; --mud-palette-success-lighten: #338fc4; --mud-palette-success-darken: #004E7A; --mud-palette-success-hover: #ECF6FC; --mud-palette-success-text: #ffffff;
    --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #6E6000; --mud-palette-warning-hover: #FCF7DC; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #0072B2; --mud-palette-info-rgb: 0, 114, 178; --mud-palette-info-lighten: #338fc4; --mud-palette-info-darken: #004E7A; --mud-palette-info-hover: #ECF6FC; --mud-palette-info-text: #ffffff;
}
html[data-icu-cb="deuteranopia"][data-icu-mode="dark"] {
    --icu-danger: #FF8A65; --icu-danger-soft: #3a2518; --icu-on-danger: #101418;
    --icu-success: #58B4E8; --icu-warning: #F0E442; --icu-link: #9ad0f0; --icu-info-soft: #20303d;
    --icu-warning-soft: #3a3416; --icu-warning-text: #f2e48a;
    --mud-palette-error: #FF8A65; --mud-palette-error-rgb: 255, 138, 101; --mud-palette-error-lighten: #ffab8f; --mud-palette-error-darken: #FFB59B; --mud-palette-error-hover: #3E2718; --mud-palette-error-text: #101418;
    --mud-palette-success: #58B4E8; --mud-palette-success-rgb: 88, 180, 232; --mud-palette-success-lighten: #7cc3ec; --mud-palette-success-darken: #A9D8F4; --mud-palette-success-hover: #1E3A4C; --mud-palette-success-text: #101418;
    --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #F2E48A; --mud-palette-warning-hover: #3A3416; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #58B4E8; --mud-palette-info-rgb: 88, 180, 232; --mud-palette-info-lighten: #7cc3ec; --mud-palette-info-darken: #A9D8F4; --mud-palette-info-hover: #1E3A4C; --mud-palette-info-text: #101418;
}
@media (prefers-color-scheme: dark) {
    html[data-icu-cb="deuteranopia"][data-icu-mode="system"] {
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0143). */
        --icu-danger: #FF8A65; --icu-danger-soft: #3a2518; --icu-on-danger: #101418;
        --icu-success: #58B4E8; --icu-warning: #F0E442; --icu-link: #9ad0f0; --icu-info-soft: #20303d;
        --icu-warning-soft: #3a3416; --icu-warning-text: #f2e48a;
        --mud-palette-error: #FF8A65; --mud-palette-error-rgb: 255, 138, 101; --mud-palette-error-lighten: #ffab8f; --mud-palette-error-darken: #FFB59B; --mud-palette-error-hover: #3E2718; --mud-palette-error-text: #101418;
        --mud-palette-success: #58B4E8; --mud-palette-success-rgb: 88, 180, 232; --mud-palette-success-lighten: #7cc3ec; --mud-palette-success-darken: #A9D8F4; --mud-palette-success-hover: #1E3A4C; --mud-palette-success-text: #101418;
        --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #F2E48A; --mud-palette-warning-hover: #3A3416; --mud-palette-warning-text: #1a1a1a;
        --mud-palette-info: #58B4E8; --mud-palette-info-rgb: 88, 180, 232; --mud-palette-info-lighten: #7cc3ec; --mud-palette-info-darken: #A9D8F4; --mud-palette-info-hover: #1E3A4C; --mud-palette-info-text: #101418;
    }
}
/* ── protanopia (đỏ yếu): danger = magenta (không dựa kênh đỏ-cam), success/link = xanh dương, warning = vàng ── */
html[data-icu-cb="protanopia"] {
    --icu-danger: #C2185B;
    --icu-danger-soft: #fde9f0;
    --icu-on-danger: #ffffff;
    --icu-success: #0072B2;
    --icu-warning: #F0E442;
    --icu-warning-soft: #fcf7dc;
    --icu-warning-text: #6e6000;
    --icu-link: #0072B2;
    --icu-info-soft: #ecf6fc; /* #e0eff7 + #0072B2 = 4.41:1 (<4.5) — nền chip crumb nhạt hơn cho chế độ mù màu (sweep ADR-0151). */
    --mud-palette-error: #C2185B; --mud-palette-error-rgb: 194, 24, 91; --mud-palette-error-lighten: #d54d80; --mud-palette-error-darken: #8A0F3E; --mud-palette-error-hover: #FBE3EC; --mud-palette-error-text: #ffffff;
    --mud-palette-success: #0072B2; --mud-palette-success-rgb: 0, 114, 178; --mud-palette-success-lighten: #338fc4; --mud-palette-success-darken: #004E7A; --mud-palette-success-hover: #ECF6FC; --mud-palette-success-text: #ffffff;
    --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #6E6000; --mud-palette-warning-hover: #FCF7DC; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #0072B2; --mud-palette-info-rgb: 0, 114, 178; --mud-palette-info-lighten: #338fc4; --mud-palette-info-darken: #004E7A; --mud-palette-info-hover: #ECF6FC; --mud-palette-info-text: #ffffff;
}
html[data-icu-cb="protanopia"][data-icu-mode="dark"] {
    --icu-danger: #EF6D9D; --icu-danger-soft: #3a1f2e; --icu-on-danger: #101418;
    --icu-success: #58B4E8; --icu-warning: #F0E442; --icu-link: #9ad0f0; --icu-info-soft: #20303d;
    --icu-warning-soft: #3a3416; --icu-warning-text: #f2e48a;
    --mud-palette-error: #EF6D9D; --mud-palette-error-rgb: 239, 109, 157; --mud-palette-error-lighten: #f58ab3; --mud-palette-error-darken: #F6A6C6; --mud-palette-error-hover: #3E2030; --mud-palette-error-text: #101418;
    --mud-palette-success: #58B4E8; --mud-palette-success-rgb: 88, 180, 232; --mud-palette-success-lighten: #7cc3ec; --mud-palette-success-darken: #A9D8F4; --mud-palette-success-hover: #1E3A4C; --mud-palette-success-text: #101418;
    --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #F2E48A; --mud-palette-warning-hover: #3A3416; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #58B4E8; --mud-palette-info-rgb: 88, 180, 232; --mud-palette-info-lighten: #7cc3ec; --mud-palette-info-darken: #A9D8F4; --mud-palette-info-hover: #1E3A4C; --mud-palette-info-text: #101418;
}
@media (prefers-color-scheme: dark) {
    html[data-icu-cb="protanopia"][data-icu-mode="system"] {
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0143). */
        --icu-danger: #EF6D9D; --icu-danger-soft: #3a1f2e; --icu-on-danger: #101418;
        --icu-success: #58B4E8; --icu-warning: #F0E442; --icu-link: #9ad0f0; --icu-info-soft: #20303d;
        --icu-warning-soft: #3a3416; --icu-warning-text: #f2e48a;
        --mud-palette-error: #EF6D9D; --mud-palette-error-rgb: 239, 109, 157; --mud-palette-error-lighten: #f58ab3; --mud-palette-error-darken: #F6A6C6; --mud-palette-error-hover: #3E2030; --mud-palette-error-text: #101418;
        --mud-palette-success: #58B4E8; --mud-palette-success-rgb: 88, 180, 232; --mud-palette-success-lighten: #7cc3ec; --mud-palette-success-darken: #A9D8F4; --mud-palette-success-hover: #1E3A4C; --mud-palette-success-text: #101418;
        --mud-palette-warning: #F0E442; --mud-palette-warning-rgb: 240, 228, 66; --mud-palette-warning-lighten: #f4e96e; --mud-palette-warning-darken: #F2E48A; --mud-palette-warning-hover: #3A3416; --mud-palette-warning-text: #1a1a1a;
        --mud-palette-info: #58B4E8; --mud-palette-info-rgb: 88, 180, 232; --mud-palette-info-lighten: #7cc3ec; --mud-palette-info-darken: #A9D8F4; --mud-palette-info-hover: #1E3A4C; --mud-palette-info-text: #101418;
    }
}
/* ── tritanopia (xanh–vàng): danger = magenta, warning = cam, success = xanh lá (chéo trục blue/yellow), link = tím.
   Blue↔green lẫn nhau ⇒ nhánh này REMAP cả primary 3 area sang violet/indigo/xanh-lá-tối để giữ phân biệt khu vực. ── */
html[data-icu-cb="tritanopia"] {
    --icu-primary-rgb-tint: 173, 20, 87;
    --icu-danger: #C2185B;
    --icu-danger-soft: #fde9f0;
    --icu-on-danger: #ffffff;
    --icu-success: #00845F;
    --icu-warning: #E69F00;
    --icu-warning-soft: #fbf0da;
    --icu-warning-text: #6b4a00;
    --icu-link: #8E24AA;
    --icu-info-soft: #f0e4f7;
    --mud-palette-error: #C2185B; --mud-palette-error-rgb: 194, 24, 91; --mud-palette-error-lighten: #d54d80; --mud-palette-error-darken: #8A0F3E; --mud-palette-error-hover: #FBE3EC; --mud-palette-error-text: #ffffff;
    --mud-palette-success: #00845F; --mud-palette-success-rgb: 0, 132, 95; --mud-palette-success-lighten: #339b80; --mud-palette-success-darken: #00523C; --mud-palette-success-hover: #DFF2EC; --mud-palette-success-text: #ffffff;
    --mud-palette-warning: #E69F00; --mud-palette-warning-rgb: 230, 159, 0; --mud-palette-warning-lighten: #ebb533; --mud-palette-warning-darken: #6B4A00; --mud-palette-warning-hover: #FBF0DA; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #8E24AA; --mud-palette-info-rgb: 142, 36, 170; --mud-palette-info-lighten: #a64fbb; --mud-palette-info-darken: #5A1170; --mud-palette-info-hover: #F2E3F8; --mud-palette-info-text: #ffffff;
    --icu-primary: #AD1457; --icu-primary-soft: #f6dce7; --icu-chip-on: #fdeef3;
}
/* Khối LIGHT scope html-area cho tritan (ADR-0126 sửa lần 8 — single-source: KHÔNG khai .icu-theme-* nữa vì wrapper
   đặt class sẽ ĐÈ bản dark; chữ primary dùng --icu-primary-text riêng đủ tương phản trên nền tối). */
html[data-icu-area="customer"][data-icu-cb="tritanopia"] { --icu-primary: #AD1457; --icu-primary-text: #AD1457; --icu-primary-soft: #f6dce7; --icu-chip-on: #fdeef3; --icu-link: #8E24AA; --icu-info-soft: #f0e4f7; --icu-primary-rgb-tint: 173, 20, 87; }
html[data-icu-area="manager"][data-icu-cb="tritanopia"]  { --icu-primary: #283593; --icu-primary-text: #283593; --icu-primary-soft: #d8def2; --icu-chip-on: #eaedf9; --icu-link: #3F51B5; --icu-info-soft: #e8eaf6; --icu-primary-rgb-tint: 40, 53, 147; }
html[data-icu-area="org"][data-icu-cb="tritanopia"]      { --icu-primary: #2E7D32; --icu-primary-text: #1B5E20; --icu-primary-soft: #d7ead9; --icu-chip-on: #e9f3ea; --icu-link: #1B5E20; --icu-info-soft: #e8f3e9; --icu-primary-rgb-tint: 46, 125, 50; }
html[data-icu-cb="tritanopia"][data-icu-mode="dark"] {
    --icu-primary-rgb-tint: 216, 27, 96;
    --icu-danger: #EF6D9D; --icu-danger-soft: #3a1f2e; --icu-on-danger: #101418;
    --icu-success: #5CBFA0; --icu-warning: #F0B429; --icu-link: #C77CE0; --icu-info-soft: #331d3f;
    --icu-warning-soft: #3a2c12; --icu-warning-text: #f0c070;
    --mud-palette-error: #EF6D9D; --mud-palette-error-rgb: 239, 109, 157; --mud-palette-error-lighten: #f58ab3; --mud-palette-error-darken: #F6A6C6; --mud-palette-error-hover: #3E2030; --mud-palette-error-text: #101418;
    --mud-palette-success: #5CBFA0; --mud-palette-success-rgb: 92, 191, 160; --mud-palette-success-lighten: #7ed0b8; --mud-palette-success-darken: #7FD6B8; --mud-palette-success-hover: #1E332C; --mud-palette-success-text: #101418;
    --mud-palette-warning: #F0B429; --mud-palette-warning-rgb: 240, 180, 41; --mud-palette-warning-lighten: #f4c55b; --mud-palette-warning-darken: #F0C070; --mud-palette-warning-hover: #3A2C12; --mud-palette-warning-text: #1a1a1a;
    --mud-palette-info: #C77CE0; --mud-palette-info-rgb: 199, 124, 224; --mud-palette-info-lighten: #d79be9; --mud-palette-info-darken: #D9A6EA; --mud-palette-info-hover: #331D3F; --mud-palette-info-text: #101418;
    --icu-primary: #D81B60; --icu-primary-soft: #4a2130; --icu-chip-on: #3a2130;
}
/* Area dark/system dùng scope html[data-icu-area] (ADR-0126 sửa lần 7) để portal nhận token đúng. Giá trị guard-đo:
   customer #EE7FA9 (thay #D81B60 — magenta tối chỉ 3.4:1 trên nền dark), on-primary tối cho nút Filled; manager
   #82A0E9 (chip primary trên nền chip-on phải ≥4.5); org giữ #66BB6A + on-primary sẵn có. */
html[data-icu-cb="tritanopia"][data-icu-area="customer"][data-icu-mode="dark"] { --icu-primary-rgb-tint: 238, 127, 169; --icu-primary: #EE7FA9; --icu-primary-text: #EE7FA9; --icu-on-primary: #1A1220; --icu-primary-soft: #4a2130; --icu-chip-on: #3a2130; --icu-link: #C77CE0; --icu-info-soft: #331d3f; }
html[data-icu-cb="tritanopia"][data-icu-area="manager"][data-icu-mode="dark"]  { --icu-primary-rgb-tint: 130, 160, 233; --icu-primary: #82A0E9; --icu-primary-text: #82A0E9; --icu-on-primary: #0D1B2A; --icu-primary-soft: #2a2f45; --icu-chip-on: #262b40; --icu-link: #9FA8DA; --icu-info-soft: #25293c; }
html[data-icu-cb="tritanopia"][data-icu-area="org"][data-icu-mode="dark"]      { --icu-primary-rgb-tint: 102, 187, 106; --icu-primary: #66BB6A; --icu-primary-text: #66BB6A; --icu-on-primary: #04211D; --icu-primary-soft: #223a26; --icu-chip-on: #20351f; --icu-link: #81C784; --icu-info-soft: #1e3322; }
@media (prefers-color-scheme: dark) {
    html[data-icu-cb="tritanopia"][data-icu-mode="system"] {
        --icu-primary-rgb-tint: 216, 27, 96;
        /* Cùng bộ token với khối dark ở trên (đồng bộ — ADR-0143). */
        --icu-danger: #EF6D9D; --icu-danger-soft: #3a1f2e; --icu-on-danger: #101418;
        --icu-success: #5CBFA0; --icu-warning: #F0B429; --icu-link: #C77CE0; --icu-info-soft: #331d3f;
        --icu-warning-soft: #3a2c12; --icu-warning-text: #f0c070;
        --mud-palette-error: #EF6D9D; --mud-palette-error-rgb: 239, 109, 157; --mud-palette-error-lighten: #f58ab3; --mud-palette-error-darken: #F6A6C6; --mud-palette-error-hover: #3E2030; --mud-palette-error-text: #101418;
        --mud-palette-success: #5CBFA0; --mud-palette-success-rgb: 92, 191, 160; --mud-palette-success-lighten: #7ed0b8; --mud-palette-success-darken: #7FD6B8; --mud-palette-success-hover: #1E332C; --mud-palette-success-text: #101418;
        --mud-palette-warning: #F0B429; --mud-palette-warning-rgb: 240, 180, 41; --mud-palette-warning-lighten: #f4c55b; --mud-palette-warning-darken: #F0C070; --mud-palette-warning-hover: #3A2C12; --mud-palette-warning-text: #1a1a1a;
        --mud-palette-info: #C77CE0; --mud-palette-info-rgb: 199, 124, 224; --mud-palette-info-lighten: #d79be9; --mud-palette-info-darken: #D9A6EA; --mud-palette-info-hover: #331D3F; --mud-palette-info-text: #101418;
        --icu-primary: #D81B60; --icu-primary-soft: #4a2130; --icu-chip-on: #3a2130;
    }
    html[data-icu-cb="tritanopia"][data-icu-area="customer"][data-icu-mode="system"] { --icu-primary-rgb-tint: 238, 127, 169; --icu-primary: #EE7FA9; --icu-primary-text: #EE7FA9; --icu-on-primary: #1A1220; --icu-primary-soft: #4a2130; --icu-chip-on: #3a2130; --icu-link: #C77CE0; --icu-info-soft: #331d3f; }
    html[data-icu-cb="tritanopia"][data-icu-area="manager"][data-icu-mode="system"]  { --icu-primary-rgb-tint: 130, 160, 233; --icu-primary: #82A0E9; --icu-primary-text: #82A0E9; --icu-on-primary: #0D1B2A; --icu-primary-soft: #2a2f45; --icu-chip-on: #262b40; --icu-link: #9FA8DA; --icu-info-soft: #25293c; }
    html[data-icu-cb="tritanopia"][data-icu-area="org"][data-icu-mode="system"]      { --icu-primary-rgb-tint: 102, 187, 106; --icu-primary: #66BB6A; --icu-primary-text: #66BB6A; --icu-on-primary: #04211D; --icu-primary-soft: #223a26; --icu-chip-on: #20351f; --icu-link: #81C784; --icu-info-soft: #1e3322; }
}
/* Hỗ trợ mù màu — bù tín hiệu KHÔNG dùng màu (ADR-0143, WCAG 1.4.1): dòng chưa đọc có chấm ● + chữ thay thế viền màu.
   Chạy trong MỌI chế độ (kể cả off) — giúp mọi người, không chỉ người mù màu. */
.account-menu-sub-label { padding: 0 16px 4px; font-size: .6875rem; opacity: .65; }
.icu-notification-unread-dot { color: var(--icu-primary-text); font-size: .75rem; margin-right: .375rem; }

/* Nút bận (ADR-0152): nút gọi API tự disable khi đang xử lý (chống bấm 2 lần) + vòng xoay nhỏ trong nút;
   nhấp nháy nhẹ để thấy đang chạy; thông báo khi watchdog quá hạn. Chỉ dùng token --icu-*;
   tôn trọng prefers-reduced-motion. Nút disabled do MudBlazor làm mờ ⇒ sweep tương phản bỏ qua (đúng WCAG). */
.icu-busy-spinner {
    display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -2px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: icu-busy-spin .7s linear infinite;
}
.icu-busy-active:not([disabled]) { animation: icu-busy-pulse 1.2s ease-in-out infinite; }
.icu-busy-timeout { display: inline-block; margin-left: .5rem; font-size: .75rem; color: var(--icu-warning-text); }

/* Ô chọn checkbox + nhãn — dùng chung: RoleDialog, WarehouseAssignmentDialog, PermissionGroupedList, AssignRolesDialog.
   Checkbox và chữ CÙNG dòng; chữ dài xuống dòng THỤT LỀ theo chữ (không nhảy xuống dưới checkbox). */
.icu-checkbox { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.icu-checkbox > input[type="checkbox"] { margin: .15rem 0 0; flex: 0 0 auto; }
.icu-checkbox > span { flex: 1 1 auto; min-width: 0; }

/* Tooltip mô tả quyền (MudTooltip — portal ngoài vùng cuộn): chữ dài xuống dòng, đọc ĐỦ nội dung (ADR-0162). */
.mud-tooltip { max-width: 26rem; }

/* Trang in nhãn cá thể (Units — P7): sheet nhãn QR; khi in ẩn chrome và bỏ đồ hoạ nền. */
.icu-label-sheet { max-width: 360px; margin: 0 auto; background: var(--mud-palette-surface); border: 1px solid var(--icu-border-light); border-radius: var(--icu-radius); padding: 1.25rem; box-shadow: var(--mud-elevation-1); }
.icu-label-qr { width: 128px; height: 128px; image-rendering: pixelated; }
.icu-label-rows { font-size: .85rem; display: flex; flex-direction: column; gap: .4rem; }
.icu-label-row { display: flex; justify-content: space-between; gap: 1rem; }
.icu-label-name { color: var(--icu-text-secondary); }
/* Hàng nhập liệu nhiều ô trong dialog Kho (ReceiptCreateDialog): canh mép TRÊN theo input để HelperText/ErrorText
   của ô số lượng treo xuống dưới, không đẩy ô nhập lên cao hơn ô chọn SKU. */
.icu-line-inline { align-self: flex-start; margin-top: .85rem; }
.icu-qty-field { width: 9rem; }

/* Bảng quét nhận hàng (ReceiveReceiptDialog): canh mép TRÊN + ẩn chú thích phụ dưới ô nhập để mọi ô luôn
   cùng chiều cao (không cái cao cái thấp khi có ErrorText như "Bắt buộc nhập serial"). */
.icu-receipt-table td { vertical-align: top; }
.icu-receipt-table .mud-input-control-helper-container { display: none; }

/* Khối SKU trong dialog Nhận hàng (ReceiveReceiptDialog): 1 phiếu có thể nhiều SKU ⇒ mỗi SKU là 1 THẺ có viền +
   neo màu primary ở cạnh TRÁI để phân tách rõ ràng (không nhập nhầm số lượng/mã giữa các mặt hàng).
   Viền/nền dùng token --icu-* ⇒ đúng cả light/dark + mọi area. */
.icu-receipt-sku-card {
  border: 1px solid var(--icu-border);
  border-left: 4px solid var(--icu-primary);
  border-radius: var(--icu-radius-sm);
  background-color: var(--icu-muted-bg);
}

/* Ô nhập Mã cá thể / Số serial trong bảng quét nhận hàng (ReceiveReceiptDialog): mã dài (ULID 26 ký tự / serial
   NSX) vượt bề ngang ô ⇒ ưu tiên hiển thị những ký tự CUỐI (phần phân biệt cá thể nằm ở đuôi). `direction: rtl`
   làm phần tràn bị cắt ở BÊN TRÁI, đuôi chuỗi luôn nằm trong tầm nhìn (giữ `text-align: left` để chữ vẫn đọc
   trái→phải bình thường); khi focus thì trả về `ltr` để gõ/sửa tự nhiên. Font monospace cho dễ đối chiếu ký tự. */
.icu-receipt-code-input input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: rtl;
  text-align: left;
}

.icu-receipt-code-input input:focus {
  direction: ltr;
}

/* Placeholder không phải chuỗi mã ⇒ luôn đọc trái→phải (không bị đảo bởi direction rtl ở trên). */
.icu-receipt-code-input input::placeholder {
  direction: ltr;
  text-align: left;
}

/* Chữ ký phiếu chuyển kho: ẩn trên màn hình, chỉ hiện khi in */
.transfer-print-signatures { display: none; }

@media print {
  /* Ẩn triệt để khung giao diện + nút + snackbar + popup + breadcrumb khi in
     (snackbar Mud render ở #mud-snackbar-container/.mud-snackbar — KHÔNG có class .mud-snackbar-provider). */
  .mud-appbar, .mud-drawer, .icu-footer, .icu-label-toolbar,
  .mud-snackbar-provider, .mud-popover-provider, .mud-dialog-provider,
  .mud-alert, button, .mud-button-root,
  #mud-snackbar-container, .mud-snackbar, [class*="mud-snackbar"],
  .icu-breadcrumb, .breadcrumb, #blazor-error-ui { display: none !important; }

  /* Triệt tiêu màu theme + lề khi in */
  html, body, .mud-layout, .mud-main-content, .mud-container {
    background: var(--icu-print-bg) !important;
    color: var(--icu-print-fg) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Layout in: dải tem sát lề, không khoảng trống thừa */
  .mud-main-content > .mud-container { padding: 0 !important; max-width: 100% !important; }

  /* Sheet nhãn cá thể đơn (UnitLabel) */
  .icu-label-sheet { border: none; box-shadow: none; max-width: 100%; }

  /* Từng tem trong dải tem phiếu nhập (ReceiptLabels) — nền trắng, chữ đen, không cắt đôi tem */
  .icu-label-card {
    background: var(--icu-print-bg) !important;
    color: var(--icu-print-fg) !important;
    border: 1px solid var(--icu-print-fg) !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .icu-label-card code { color: var(--icu-print-fg) !important; }

  /* In hóa đơn POS & phiếu chuyển kho: cách ly vùng in, ẩn hoàn toàn giao diện nền và chrome dialog */
  body:has(#pos-print-area) .mud-layout,
  body:has(#transfer-print-area) .mud-layout,
  body.icu-printing-receipt .mud-layout {
    display: none !important;
  }

  body:has(#pos-print-area) .mud-dialog-provider,
  body:has(#transfer-print-area) .mud-dialog-provider,
  body.icu-printing-receipt .mud-dialog-provider {
    display: block !important;
  }

  body:has(#pos-print-area) .mud-overlay,
  body:has(#transfer-print-area) .mud-overlay,
  body.icu-printing-receipt .mud-overlay {
    display: none !important;
  }

  body:has(#pos-print-area) .mud-dialog-container,
  body:has(#transfer-print-area) .mud-dialog-container,
  body.icu-printing-receipt .mud-dialog-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(#pos-print-area) .mud-dialog,
  body:has(#transfer-print-area) .mud-dialog,
  body.icu-printing-receipt .mud-dialog {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body:has(#pos-print-area) .mud-dialog-title,
  body:has(#pos-print-area) .mud-dialog-actions,
  body:has(#transfer-print-area) .mud-dialog-title,
  body:has(#transfer-print-area) .mud-dialog-actions,
  body.icu-printing-receipt .mud-dialog-title,
  body.icu-printing-receipt .mud-dialog-actions {
    display: none !important;
  }

  body:has(#pos-print-area) .mud-dialog-content,
  body:has(#transfer-print-area) .mud-dialog-content,
  body.icu-printing-receipt .mud-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body:has(#pos-print-area) #pos-print-area,
  body.icu-printing-receipt #pos-print-area {
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--icu-print-bg) !important;
    color: var(--icu-print-fg) !important;
    max-width: 80mm !important;
    width: 100% !important;
  }

  body:has(#pos-print-area) #pos-print-area *,
  body.icu-printing-receipt #pos-print-area * {
    color: var(--icu-print-fg) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body:has(#pos-print-area) #pos-print-area .mud-divider,
  body.icu-printing-receipt #pos-print-area .mud-divider {
    border-color: var(--icu-print-fg) !important;
    opacity: 0.5 !important;
  }

  /* Định dạng phiếu chuyển kho khi in: khổ rộng chuẩn tài liệu A4/A5, bảng rõ nét */
  body:has(#transfer-print-area) #transfer-print-area,
  body.icu-printing-receipt #transfer-print-area {
    margin: 0 auto !important;
    padding: 6mm !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--icu-print-bg) !important;
    color: var(--icu-print-fg) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Triệt tiêu 100% màu nền theme (Dark/Light mode) cho mọi thành phần con trong phiếu in */
  body:has(#transfer-print-area) #transfer-print-area,
  body:has(#transfer-print-area) #transfer-print-area *,
  body.icu-printing-receipt #transfer-print-area,
  body.icu-printing-receipt #transfer-print-area * {
    color: var(--icu-print-fg) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Viền bảng và thẻ thông tin sắc nét khi in trên giấy trắng */
  body:has(#transfer-print-area) #transfer-print-area .mud-paper-outlined,
  body:has(#transfer-print-area) #transfer-print-area .mud-table,
  body.icu-printing-receipt #transfer-print-area .mud-paper-outlined,
  body.icu-printing-receipt #transfer-print-area .mud-table {
    border: 1px solid var(--icu-print-fg) !important;
  }

  body:has(#transfer-print-area) #transfer-print-area th,
  body:has(#transfer-print-area) #transfer-print-area td,
  body.icu-printing-receipt #transfer-print-area th,
  body.icu-printing-receipt #transfer-print-area td {
    border-bottom: 1px solid var(--icu-print-fg) !important;
  }

  body:has(#transfer-print-area) #transfer-print-area th,
  body.icu-printing-receipt #transfer-print-area th {
    font-weight: 700 !important;
    border-bottom: 2px solid var(--icu-print-fg) !important;
  }

  body:has(#transfer-print-area) #transfer-print-area .mud-chip,
  body.icu-printing-receipt #transfer-print-area .mud-chip {
    border: 1px solid var(--icu-print-fg) !important;
    border-radius: 4px !important;
  }

  body:has(#transfer-print-area) .transfer-print-signatures,
  body.icu-printing-receipt .transfer-print-signatures {
    display: block !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

@keyframes icu-busy-spin { to { transform: rotate(360deg); } }
@keyframes icu-busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
    .icu-busy-spinner, .icu-busy-active:not([disabled]) { animation: none; }
}