/* /Components/FeaturePlaceholder.razor.rz.scp.css */
/* Khối "đang phát triển" — căn giữa vùng nội dung. */
.feature-placeholder[b-2lm5lppyxo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 58vh;
    gap: 4px;
    padding: 32px 16px;
}

.fp-icon-circle[b-2lm5lppyxo] {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: var(--app-primary-lighten);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

/* MudIcon là component con → cần ::deep để CSS scoped chạm tới. */
[b-2lm5lppyxo] .fp-icon {
    width: 40px;
    height: 40px;
    color: var(--app-primary);
}

.fp-title[b-2lm5lppyxo] {
    font-weight: 700 !important;
}

.fp-desc[b-2lm5lppyxo] {
    color: var(--app-text-secondary);
    max-width: 440px;
    margin-top: 2px;
}

.fp-badge[b-2lm5lppyxo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--app-primary-lighten);
    color: var(--app-primary);
    font-size: 13px;
    font-weight: 600;
}

[b-2lm5lppyxo] .fp-badge-icon {
    width: 16px;
    height: 16px;
    color: var(--app-primary);
}
/* /Components/FileDropZone.razor.rz.scp.css */
/* Drop zone — paper nét đứt, cần `position:relative` để input file đè lên (absolute, opacity:0). */
.filedrop-zone[b-gcnrt1aksu] {
    border: 2px dashed var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 8px;
    transition: all 0.15s ease;
    background: transparent;
    text-align: center;
    user-select: none;
    cursor: pointer;
    position: relative;
}

.filedrop-zone:hover[b-gcnrt1aksu] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.04);
}

/* Khi user kéo file qua zone — feedback solid border + nền đậm. */
.filedrop-dragging[b-gcnrt1aksu] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.10);
}

.filedrop-disabled[b-gcnrt1aksu] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

/* Preview file đã chọn / đã upload. */
.filedrop-preview[b-gcnrt1aksu] {
    border-radius: 8px;
}
/* /Features/Account/Pages/PProfile/Profile.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────
 * CSS isolation cho Profile page ("Thông tin tài khoản").
 * Tái hiện AccountInfoScreen design source (ui_kits/web/AccountInfoScreen.jsx):
 * thẻ định danh trái + thanh tab segmented navy + 3 pane.
 *
 * KHÔNG hardcode hex màu — chỉ dùng CSS variables --* khai báo trong
 * wwwroot/css/app.css (xem CLAUDE.md mục 6 + DESIGN.md). Token mức -600/-700
 * và --status-*-bg KHÔNG có trong app.css nên dùng mức -500 + color-mix.
 *
 * Lưu ý CSS isolation: các <div>/<button> dưới đây do page tự khai báo nên
 * tự mang scope id → KHÔNG cần ::deep. Mud component được style bằng inline
 * Style/param trong .razor (không style internal Mud ở đây).
 * ────────────────────────────────────────────────────────────── */

/* ── Thẻ định danh (cột trái) ── */
.acct-identity-head[b-uz6y43lv8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.acct-id-name[b-uz6y43lv8b] {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg-1);
}

.acct-id-title[b-uz6y43lv8b] {
    font-size: 13px;
    color: var(--fg-3);
    margin-top: 2px;
}

.acct-id-meta[b-uz6y43lv8b] {
    font-size: 12px;
    color: var(--fg-4);
    margin-top: 4px;
}

.acct-avatar-drop[b-uz6y43lv8b] {
    width: 100%;
}

.acct-divider[b-uz6y43lv8b] {
    height: 1px;
    background: var(--border-1);
}

.acct-divider-lg[b-uz6y43lv8b] {
    margin: 20px 0;
}

.acct-kv-list[b-uz6y43lv8b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acct-kv-label[b-uz6y43lv8b] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-3);
    margin-bottom: 3px;
}

.acct-kv-value[b-uz6y43lv8b] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg-1);
}

.acct-kv-value.mono[b-uz6y43lv8b] {
    font-family: var(--font-mono);
    letter-spacing: 0.2px;
}

/* ── Thanh tab segmented trên nền navy ── */
.acct-tabbar[b-uz6y43lv8b] {
    background: var(--brand);
    padding: 4px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.acct-tab[b-uz6y43lv8b] {
    flex: 1;
    min-width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--brand-on);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background 160ms;
}

.acct-tab:hover[b-uz6y43lv8b] {
    background: color-mix(in srgb, var(--brand-on) 10%, transparent);
}

.acct-tab.active[b-uz6y43lv8b] {
    background: color-mix(in srgb, var(--brand-on) 16%, transparent);
    font-weight: 700;
}

/* Gạch chân trắng cho tab đang chọn — luôn hiển thị kể cả khi color-mix không hỗ trợ. */
.acct-tab.active[b-uz6y43lv8b]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--brand-on);
    border-radius: 2px;
}

/* ── Vùng nội dung pane ── */
.acct-pane[b-uz6y43lv8b] {
    padding: 20px 22px 24px;
}

.acct-subhead-title[b-uz6y43lv8b] {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
}

.acct-subhead-desc[b-uz6y43lv8b] {
    font-size: 12.5px;
    color: var(--fg-3);
    margin-top: 4px;
    line-height: 1.5;
}

/* ── Tab Đổi mật khẩu: form + thanh độ mạnh + checklist ── */
.acct-pwd-form[b-uz6y43lv8b] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

.acct-pwd-strength[b-uz6y43lv8b] {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.acct-pwd-bar[b-uz6y43lv8b] {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--slate-200);
    transition: background 160ms;
}

.acct-pwd-lv-1 .acct-pwd-bar.on[b-uz6y43lv8b] { background: var(--error-500); }
.acct-pwd-lv-2 .acct-pwd-bar.on[b-uz6y43lv8b] { background: var(--warning-500); }
.acct-pwd-lv-3 .acct-pwd-bar.on[b-uz6y43lv8b] { background: var(--info-500); }
.acct-pwd-lv-4 .acct-pwd-bar.on[b-uz6y43lv8b] { background: var(--success-500); }

.acct-pwd-checks[b-uz6y43lv8b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 8px;
}

.acct-pwd-check[b-uz6y43lv8b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-3);
}

.acct-pwd-check.ok[b-uz6y43lv8b] {
    color: var(--success-500);
}

.acct-pwd-dot[b-uz6y43lv8b] {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--slate-200);
    color: var(--brand-on);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acct-pwd-check.ok .acct-pwd-dot[b-uz6y43lv8b] {
    background: var(--success-500);
}

/* ── Tab Bảo mật: bảng thiết bị ── */
.acct-table-wrap[b-uz6y43lv8b] {
    overflow-x: auto;
}

.acct-dev-cell[b-uz6y43lv8b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acct-dev-ic[b-uz6y43lv8b] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acct-dev-ic.android[b-uz6y43lv8b] {
    background: color-mix(in srgb, var(--success-500) 14%, transparent);
    color: var(--success-500);
}

.acct-dev-name[b-uz6y43lv8b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg-1);
}

.acct-dev-detail[b-uz6y43lv8b] {
    font-size: 12.5px;
    color: var(--fg-3);
    margin-top: 2px;
}

.acct-mono[b-uz6y43lv8b] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-1);
}
/* /Features/Account/Pages/PSettings/Settings.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────
 * CSS isolation cho Settings page.
 * KHÔNG hardcode hex màu — dùng CSS variables --app-* trong wwwroot/css/app.css
 * (xem CLAUDE.md mục 6).
 *
 * Phase 1: chỉ giữ vài override nhỏ; phase 2 (kích hoạt cài đặt) có thể bổ sung.
 * ────────────────────────────────────────────────────────────── */

[b-ea1vucnl48] .settings-section-card {
    box-shadow: var(--app-shadow-card-strong);
    border-radius: var(--app-radius-card, 12px);
}

[b-ea1vucnl48] .settings-disabled-hint {
    opacity: 0.7;
    font-style: italic;
}
/* /Features/Admin/Pages/PAiConfig/AiConfig.razor.rz.scp.css */
/* Tab bar nhẹ — chỉ underline tab đang chọn, không nền đậm */
[b-90ficw04ks] .app-ai-tabs .mud-tabs-toolbar {
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.08));
    min-height: 44px;
}

[b-90ficw04ks] .app-ai-tabs .mud-tab {
    min-height: 44px;
    text-transform: none;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0;
    padding: 0 16px;
}

[b-90ficw04ks] .app-ai-tabs .mud-tab.app-tab-active,
[b-90ficw04ks] .app-ai-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

[b-90ficw04ks] .app-ai-tabs .mud-tabs-tabbar-slider {
    height: 2px;
}

/* Empty state đẹp hơn cho data grid */
.app-aiconfig-empty[b-90ficw04ks] {
    padding: 32px 16px;
    text-align: center;
}

.app-aiconfig-empty .mud-icon-root[b-90ficw04ks] {
    opacity: 0.35;
}
/* /Features/Admin/Pages/POrgStructure/OrgStructure.razor.rz.scp.css */
/* CSS isolation cho /admin/co-cau-to-chuc */

/* Khoá chiều cao 2 panel cây + side để cuộn trong 1 màn hình */
.org-tree-pane[b-6utb6v4517],
.org-side-pane[b-6utb6v4517] {
    max-height: calc(100vh - 240px);
    min-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px; /* tránh scrollbar che border phải */
}

/* Custom scrollbar gọn */
.org-tree-pane[b-6utb6v4517]::-webkit-scrollbar,
.org-side-pane[b-6utb6v4517]::-webkit-scrollbar {
    width: 8px;
}
.org-tree-pane[b-6utb6v4517]::-webkit-scrollbar-thumb,
.org-side-pane[b-6utb6v4517]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}
.org-tree-pane[b-6utb6v4517]::-webkit-scrollbar-thumb:hover,
.org-side-pane[b-6utb6v4517]::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-default);
}

/* Hover cho mọi node trong cây */
.org-tree-row[b-6utb6v4517] {
    border-radius: 8px;
    padding: 6px 8px;
    transition: background-color 0.15s ease;
}
.org-tree-row:hover[b-6utb6v4517] {
    background: var(--mud-palette-action-default-hover);
}

/* Indent helper — căn theo cấp */
.org-indent-1[b-6utb6v4517] { margin-left: 36px; margin-top: 4px; }
.org-indent-2[b-6utb6v4517] { margin-left: 36px; margin-top: 4px; }
.org-indent-3[b-6utb6v4517] { margin-left: 36px; margin-top: 2px; }

/* Spacer khi node không có nút toggle (leaf) — căn thẳng với row có toggle */
.org-toggle-spacer[b-6utb6v4517] {
    display: inline-block;
    width: 32px;
    flex-shrink: 0;
}
/* /Features/Admin/Pages/PSettings/SettingsAdmin.razor.rz.scp.css */
/* ── Sticky save bar dưới mỗi tab ── */
.settings-action-bar[b-yrqr7pwc3h] {
    position: sticky;
    bottom: -16px;
    margin: 16px -16px -16px -16px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 2;
}

/* Card chính cần overflow visible để sticky hoạt động trong scroll page */
.settings-card[b-yrqr7pwc3h] {
    overflow: visible;
}

/* Stat dashboard card (tab Lưu trữ / Audit) */
.setting-stat-card[b-yrqr7pwc3h] {
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

/* ── Tabs xếp dọc trái ──
   MudTabs Position=Position.Left → render tab bar bên trái, content bên phải.
   Cố định width tab bar 220px, tab align left, divider giữa tab bar và content. */
.settings-tabs[b-yrqr7pwc3h]  .mud-tabs-tabbar {
    min-width: 220px;
    max-width: 240px;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding-right: 8px;
    background: transparent;
}

.settings-tabs[b-yrqr7pwc3h]  .mud-tab {
    justify-content: flex-start;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 8px;
    margin: 2px 4px;
    padding: 10px 12px;
    min-height: 44px;
    opacity: 0.72;
    color: var(--mud-palette-text-primary);
    transition: background 0.15s, opacity 0.15s;
}

.settings-tabs[b-yrqr7pwc3h]  .mud-tab:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    opacity: 1;
}

.settings-tabs[b-yrqr7pwc3h]  .mud-tab .mud-tab-icon-text-wrapper {
    justify-content: flex-start;
    gap: 12px;
}

/* Tab active — bold + background tint + viền trái 4px primary. Cover nhiều class name
   khác nhau giữa MudBlazor versions: mud-tab-active, mud-tab-button-active. */
.settings-tabs[b-yrqr7pwc3h]  .mud-tab.mud-tab-active,
.settings-tabs[b-yrqr7pwc3h]  .mud-tab-button-active,
.settings-tabs[b-yrqr7pwc3h]  .mud-tab.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 8px;
}

/* Slider mặc định của MudTabs ở Position.Left — ẩn vì đã thay bằng border-left của tab active. */
.settings-tabs[b-yrqr7pwc3h]  .mud-tab-slider {
    display: none;
}

/* Panel content có padding trái tách khỏi tab bar. */
.settings-tab-panel[b-yrqr7pwc3h] {
    padding-left: 20px;
}

/* Responsive: màn nhỏ < 768px → tab bar gọn lại, ẩn label chỉ giữ icon. */
@media (max-width: 768px) {
    .settings-tabs[b-yrqr7pwc3h]  .mud-tabs-tabbar {
        min-width: 56px;
        max-width: 56px;
    }
    .settings-tabs[b-yrqr7pwc3h]  .mud-tab {
        padding: 10px 8px;
        font-size: 0;
    }
    .settings-tabs[b-yrqr7pwc3h]  .mud-tab .mud-icon-root {
        font-size: 20px !important;
    }
    .settings-tab-panel[b-yrqr7pwc3h] {
        padding-left: 12px;
    }
}

/* ── Branding upload cell ── */
.setting-branding-cell[b-yrqr7pwc3h] {
    border-radius: 12px;
    background: transparent;
}

/* Wrap để cố định khung hiển thị, tránh ảnh nguyên kích thước phá layout. */
.setting-branding-preview-wrap[b-yrqr7pwc3h] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

/* Preview ảnh branding — base size, override per-kind bằng class bổ sung. */
.setting-branding-preview[b-yrqr7pwc3h] {
    display: block;
    object-fit: contain;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 8px;
    border: 1px dashed var(--mud-palette-lines-default);
}

/* Logo dạng ngang (rectangle) — fix height 72px, width fit content tối đa 280px. */
.setting-branding-preview--logo[b-yrqr7pwc3h] {
    width: auto;
    max-width: 280px;
    height: 72px;
    max-height: 72px;
}

/* Favicon dạng vuông — square, nhỏ. */
.setting-branding-preview--favicon[b-yrqr7pwc3h] {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    padding: 4px;
}

.setting-branding-url[b-yrqr7pwc3h] {
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    opacity: 0.7;
}
/* /Features/Admin/Permission/Pages/PermissionHelpDialog.razor.rz.scp.css */
/* ============================================================
   PermissionHelpDialog — sơ đồ RBAC 2 lớp + 3 bước
   Port .rbac-model / .rbac-help-steps từ design PermissionsScreen.css.
   Token design → --mud-palette-* (dark-safe).
   ============================================================ */

.help-head-ic[b-4ezkkxv6lq] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.help-head-ic[b-4ezkkxv6lq]  .mud-icon-root {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
}

/* ---------- Mô hình 2 lớp ---------- */
.rbac-model[b-4ezkkxv6lq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 0.9fr);
    align-items: stretch;
    gap: 0;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--mud-palette-background-grey) 0%, var(--mud-palette-surface) 100%);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    margin-bottom: 16px;
}

.rbac-model-layer[b-4ezkkxv6lq] {
    display: flex;
    gap: 12px;
    padding: 4px 18px;
    min-width: 0;
}

.rbac-model-layer:first-child[b-4ezkkxv6lq] {
    padding-left: 4px;
}

.rbac-model-num[b-4ezkkxv6lq] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rbac-model-num.l1[b-4ezkkxv6lq] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.rbac-model-num.l2[b-4ezkkxv6lq] {
    background: rgba(var(--mud-palette-info-rgb), 0.12);
    color: var(--mud-palette-info);
}

.rbac-model-title[b-4ezkkxv6lq] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.rbac-model-sub2[b-4ezkkxv6lq] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.rbac-model-q[b-4ezkkxv6lq] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

.rbac-model-eg[b-4ezkkxv6lq] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 7px;
    line-height: 1.45;
    padding: 6px 9px;
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: 8px;
}

.rbac-model-op[b-4ezkkxv6lq] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
    padding: 0 2px;
}

.rbac-model-op .glyph[b-4ezkkxv6lq] {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.rbac-model-result[b-4ezkkxv6lq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 4px 4px 20px;
    border-left: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.rbac-model-result .lbl[b-4ezkkxv6lq] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.rbac-model-result .val[b-4ezkkxv6lq] {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    line-height: 1.3;
}

.rbac-model-result .sub[b-4ezkkxv6lq] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .rbac-model[b-4ezkkxv6lq] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .rbac-model-layer[b-4ezkkxv6lq] {
        padding: 10px 4px;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .rbac-model-layer:first-child[b-4ezkkxv6lq] {
        border-top: none;
    }

    .rbac-model-op[b-4ezkkxv6lq] {
        padding: 2px 0;
    }

    .rbac-model-op .glyph[b-4ezkkxv6lq] {
        transform: rotate(90deg);
    }

    .rbac-model-result[b-4ezkkxv6lq] {
        border-left: none;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding: 10px 4px 4px;
    }
}

/* ---------- 3 bước ---------- */
.rbac-help-steps[b-4ezkkxv6lq] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.rbac-help-step[b-4ezkkxv6lq] {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    min-width: 0;
}

.rbac-help-step b[b-4ezkkxv6lq] {
    color: var(--mud-palette-text-primary);
}

.rbac-help-step .n[b-4ezkkxv6lq] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.rbac-help-step.hl .n[b-4ezkkxv6lq] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.rbac-help-step.hl b[b-4ezkkxv6lq] {
    color: var(--mud-palette-primary);
}

.rbac-help-arrow[b-4ezkkxv6lq] {
    align-self: center;
    flex-shrink: 0;
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 720px) {
    .rbac-help-steps[b-4ezkkxv6lq] {
        flex-direction: column;
    }

    .rbac-help-arrow[b-4ezkkxv6lq] {
        transform: rotate(90deg);
        align-self: flex-start;
        margin-left: 6px;
    }
}
/* /Features/Admin/Permission/Pages/PermissionHub.razor.rz.scp.css */
/* ============================================================
   PermissionHub — thanh tab phân tầng (pill segmented) + tier-tag
   Port từ design _design_source PermissionsScreen.css (.rbac-toptabs,
   .rbac-tier-tag). Token design → --mud-palette-* để tự đảo dark mode.
   ============================================================ */

/* Hàng chứa cụm tab + tier-tag (cùng hàng, canh trái, wrap khi hẹp) */
.rbac-toptabs-row[b-1tyggvbl1n] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ---------- Top tabs (tầng trên) — pill segmented ---------- */
.rbac-toptabs[b-1tyggvbl1n] {
    display: inline-flex;
    gap: 4px;
    background: var(--mud-palette-background-grey);
    border-radius: 12px;
    padding: 4px;
}

.rbac-toptab[b-1tyggvbl1n] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 9px 16px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 140ms, color 140ms;
    white-space: nowrap;
}

.rbac-toptab:hover[b-1tyggvbl1n] {
    color: var(--mud-palette-text-primary);
}

.rbac-toptab.active[b-1tyggvbl1n] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-1);
}

.rbac-toptab[b-1tyggvbl1n]  .mud-icon-root {
    font-size: 1.15rem;
}

/* badge số đếm trên pill */
.rbac-toptab .n[b-1tyggvbl1n] {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

.rbac-toptab.active .n[b-1tyggvbl1n] {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

/* nhãn ngắn chỉ hiện trên mobile */
.rbac-toptab-short[b-1tyggvbl1n] {
    display: none;
}

@media (max-width: 720px) {
    .rbac-toptabs[b-1tyggvbl1n] {
        display: flex;
        width: 100%;
    }

    .rbac-toptab[b-1tyggvbl1n] {
        flex: 1;
        justify-content: center;
        padding: 9px 8px;
        font-size: 12.5px;
    }

    .rbac-toptab .rbac-toptab-lbl[b-1tyggvbl1n] {
        display: none;
    }

    .rbac-toptab .rbac-toptab-short[b-1tyggvbl1n] {
        display: inline;
    }
}

/* ---------- Tier marker chip (phân tầng trên / dưới) ---------- */
.rbac-tier-tag[b-1tyggvbl1n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    padding: 4px 10px;
    border-radius: 999px;
}

.rbac-tier-tag[b-1tyggvbl1n]  .mud-icon-root {
    font-size: 0.95rem;
}

/* tab Người dùng (tầng dưới) → tông info */
.rbac-tier-tag.tier-users[b-1tyggvbl1n] {
    color: var(--mud-palette-info);
    background: rgba(var(--mud-palette-info-rgb), 0.12);
}

/* ---------- Nút "Hướng dẫn" (pill cạnh tiêu đề, mở modal sơ đồ) ---------- */
.rbac-help-trigger[b-1tyggvbl1n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.18);
    padding: 4px 11px;
    border-radius: 999px;
    line-height: 1;
    transition: background 120ms;
}

.rbac-help-trigger:hover[b-1tyggvbl1n] {
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
}

.rbac-help-trigger[b-1tyggvbl1n]  .mud-icon-root {
    font-size: 0.95rem;
    color: var(--mud-palette-primary);
}
/* /Features/Admin/Permission/Pages/PRoles/RoleEdit.razor.rz.scp.css */
/* ============================================================
   RoleEdit.razor giờ chỉ là wrapper @page mỏng (ArrowBack + tiêu đề +
   <RoleEditor/>) — KHÔNG render markup ma trận/role nữa.

   Scoped CSS gắn theo component render markup. Vì ma trận quyền +
   header-band + scope-picker được render trong RoleEditor.razor, toàn bộ
   style đã chuyển sang [RoleEditor.razor.css]. Các rule .perm-* / .rbac-*
   để ở file này sẽ KHÔNG áp được (sai scope) → đã gỡ.

   Đừng thêm style cho ma trận role vào đây — sửa trong RoleEditor.razor.css.
   ============================================================ */
/* /Features/Admin/Permission/Pages/PRoles/RoleEditor.razor.rz.scp.css */
/* ============================================================
   RoleEditor — CSS isolation (component thật render markup).
   Trước đây style nằm ở RoleEdit.razor.css nhưng markup đã tách sang
   RoleEditor.razor → scoped CSS không áp được. Chuyển về đây + port
   các class design (PermissionsScreen.css): header-band, qstrip,
   scope-opts, ma trận glyph, save-bar. Token → --mud-palette-* (dark-safe).
   ============================================================ */

/* ─── Header band: nhận diện role + chỉ số nhanh ───────────────────── */
.rbac-detail-head[b-j783by71rf] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;   /* panel hẹp: cụm hành động tự xuống dòng thay vì tràn ngang */
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--mud-palette-background-grey) 0%, transparent 100%);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    flex-shrink: 0;   /* header band đứng yên — không co khi panel giới hạn chiều cao */
}

.rbac-detail-ic[b-j783by71rf] {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.rbac-detail-head.sys .rbac-detail-ic[b-j783by71rf] {
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

.rbac-detail-ic[b-j783by71rf]  .mud-icon-root {
    font-size: 1.5rem;
}

.rbac-detail-body[b-j783by71rf] {
    flex: 1;
    min-width: 0;
}

/* Cụm hành động bên phải header (công tắc · Sửa tên · Nhân bản · ⋮) */
.rbac-detail-actions[b-j783by71rf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;   /* đẩy sang phải khi cùng hàng; tự xuống dòng khi header chật (flex-wrap) */
}

/* Ô nhập sửa tên inline — khớp cỡ chữ với .rbac-detail-name (19px/700) để không nhảy layout */
.rbac-name-input[b-j783by71rf] {
    font-size: 19px;
    font-weight: 700;
    height: 36px;
    max-width: 280px;
    border: 1.5px solid var(--mud-palette-primary);
    border-radius: 8px;
    padding: 2px 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    outline: none;
}

.rbac-detail-titlerow[b-j783by71rf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rbac-detail-name[b-j783by71rf] {
    font-size: 19px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.rbac-detail-desc[b-j783by71rf] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}

/* qstrip — dải 4 chỉ số nằm trong header band */
.rbac-qstrip[b-j783by71rf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.rbac-qstrip-item b[b-j783by71rf] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.rbac-qstrip-sep[b-j783by71rf] {
    color: var(--mud-palette-text-disabled);
}

/* ─── Badges (bản sao cho RoleEditor — scoped CSS theo component) ───── */
.rbac-sys-badge[b-j783by71rf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

.rbac-status-badge[b-j783by71rf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

.rbac-status-badge .d[b-j783by71rf] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.rbac-status-badge.on[b-j783by71rf] {
    background: rgba(var(--mud-palette-success-rgb), 0.14);
    color: var(--mud-palette-success);
}

.rbac-status-badge.off[b-j783by71rf] {
    background: rgba(var(--mud-palette-error-rgb), 0.14);
    color: var(--mud-palette-error);
}

.rbac-inherit-chip[b-j783by71rf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    padding: 3px 9px;
    border-radius: 7px;
}

.rbac-inherit-chip[b-j783by71rf]  .mud-icon-root {
    font-size: 0.85rem;
}

/* ─── Section sub-title (UPPERCASE) ───────────────────────────────── */
.rbac-sec-sub[b-j783by71rf] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

/* ─── Scope picker (ScopeType) — lưới thẻ chọn ────────────────────── */
.rbac-scope-opts[b-j783by71rf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.rbac-scope-opt[b-j783by71rf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    border-radius: 11px;
    padding: 11px 12px;
    background: var(--mud-palette-surface);
    transition: border-color 120ms, background 120ms;
    font-family: inherit;
}

.rbac-scope-opt:hover[b-j783by71rf] {
    border-color: var(--mud-palette-primary);
}

.rbac-scope-opt.active[b-j783by71rf] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* Thẻ scope bị khoá (vd "Toàn bộ" với user không đủ quyền) — mờ + con trỏ cấm, không hover sáng. */
.rbac-scope-opt:disabled[b-j783by71rf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rbac-scope-opt:disabled:hover[b-j783by71rf] {
    border-color: var(--mud-palette-lines-default);
}

.rbac-scope-opt.locked .so-radio[b-j783by71rf] {
    color: var(--mud-palette-text-secondary);
}

/* Chỉ báo chọn dạng radio bên trái tiêu đề (đơn-chọn) */
.rbac-scope-opt .so-radio[b-j783by71rf] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.rbac-scope-opt.active .so-radio[b-j783by71rf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);   /* check thừa kế currentColor → trắng trên nền navy */
}

.rbac-scope-opt .so-radio[b-j783by71rf]  .mud-icon-root {
    font-size: 0.8rem;
}

.rbac-scope-opt .so-text[b-j783by71rf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rbac-scope-opt .so-name[b-j783by71rf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.rbac-scope-opt .so-desc[b-j783by71rf] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    line-height: 1.45;
}

.rbac-scope-opt:disabled[b-j783by71rf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rbac-scope-opt:disabled:hover[b-j783by71rf] {
    border-color: var(--mud-palette-lines-inputs);
}

/* ─── CUSTOM picker: cây Công ty → Chi nhánh (đồng bộ tab Phạm vi dữ liệu user) ──── */
.rbac-custom-pick[b-j783by71rf] {
    margin-top: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    padding: 12px 14px;
    background: var(--mud-palette-background-grey);
}

.rbac-custom-hint[b-j783by71rf] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.rbac-custom-hint[b-j783by71rf]  .mud-icon-root {
    font-size: 1rem;
    flex-shrink: 0;
}

.rbac-custom-foot[b-j783by71rf] {
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 10px;
}

.rbac-custom-foot.ok[b-j783by71rf] {
    color: var(--mud-palette-success);
}

.rbac-custom-foot.empty[b-j783by71rf] {
    color: var(--mud-palette-error);
}

/* Cây */
.scope-tree[b-j783by71rf] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    max-height: 46vh;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

.scope-node[b-j783by71rf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.scope-node:last-child[b-j783by71rf] {
    border-bottom: none;
}

.scope-node.company[b-j783by71rf] {
    background: var(--mud-palette-background-grey);
}

.scope-node.branch[b-j783by71rf] {
    padding-left: 16px;
}

.scope-node:hover[b-j783by71rf] {
    background: var(--mud-palette-action-hover);
}

.scope-node.on[b-j783by71rf] {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.scope-caret[b-j783by71rf] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.scope-caret.placeholder[b-j783by71rf] {
    visibility: hidden;
    cursor: default;
}

.scope-caret[b-j783by71rf]  .mud-icon-root {
    font-size: 1.1rem;
}

.scope-cbx[b-j783by71rf] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 120ms;
    flex: 0 0 auto;
}

.scope-cbx[b-j783by71rf]  .mud-icon-root {
    font-size: 0.8rem;
}

.scope-cbx:hover[b-j783by71rf] {
    border-color: var(--mud-palette-primary);
}

.scope-cbx.on[b-j783by71rf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.scope-cbx.on[b-j783by71rf]  .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

.scope-node-main[b-j783by71rf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.scope-node-main .nm[b-j783by71rf] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scope-node-main .mc[b-j783by71rf] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
    font-family: var(--font-mono, monospace);
}

.scope-cov[b-j783by71rf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.scope-cov .cov-glyph[b-j783by71rf] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scope-cov .cov-glyph[b-j783by71rf]  .mud-icon-root {
    font-size: 0.7rem;
}

.scope-cov.full .cov-glyph[b-j783by71rf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.scope-cov.full .cov-glyph[b-j783by71rf]  .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

.scope-cov.partial .cov-glyph[b-j783by71rf] {
    background: rgba(var(--mud-palette-primary-rgb), 0.18);
    border-color: var(--mud-palette-primary);
}

.scope-cov.partial .cov-glyph[b-j783by71rf]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

.scope-allbtn[b-j783by71rf] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    padding: 2px 6px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.scope-allbtn:hover[b-j783by71rf] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
}

/* ─── Group header trong matrix (dải nền uppercase) ───────────────── */
.perm-group-header[b-j783by71rf] {
    color: var(--mud-palette-text-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    background: var(--mud-palette-background-grey);
    padding: 7px 16px;
    border-radius: 6px;
}

/* ─── Wrapper scroll ngang + bảng chính ───────────────────────────── */
.perm-matrix[b-j783by71rf] {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

.perm-matrix-table[b-j783by71rf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perm-matrix-table th[b-j783by71rf],
.perm-matrix-table td[b-j783by71rf] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
}

.perm-matrix-table thead th[b-j783by71rf] {
    background: var(--mud-palette-background-grey);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    position: sticky;
    top: 0;
    z-index: 3;
}

.perm-matrix-th-page[b-j783by71rf] {
    text-align: left !important;
    min-width: 200px;
    position: sticky;
    left: 0;
    z-index: 4;   /* ô góc trên-trái: nổi trên cả hàng header lẫn cột page khi cuộn 2 chiều */
}

.perm-matrix-th-action[b-j783by71rf] {
    width: 64px;
    cursor: help;
}

/* icon + nhãn action xếp dọc trong header cột */
.perm-acthead[b-j783by71rf] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.perm-acthead[b-j783by71rf]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.perm-matrix-th-quick[b-j783by71rf] {
    width: 80px;
    background: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

/* ─── Cột page name (sticky trái) ─────────────────────────────────── */
.perm-matrix-td-page[b-j783by71rf] {
    text-align: left !important;
    position: sticky;
    left: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

.perm-page-name[b-j783by71rf] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.perm-page-key[b-j783by71rf] {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    font-family: var(--font-mono, monospace);
    margin-top: 2px;
}

.perm-matrix-table tbody tr:hover .perm-matrix-td-page[b-j783by71rf] {
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
}

/* ─── Ô action: glyph button (none/granted/inherited/unsupported) ─── */
.perm-mx-cell[b-j783by71rf] {
    padding: 0 !important;
    text-align: center;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.perm-cgbtn[b-j783by71rf] {
    width: 100%;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
}

.perm-cgbtn:hover[b-j783by71rf] {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.rbac-cg[b-j783by71rf] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rbac-cg[b-j783by71rf]  .mud-icon-root {
    font-size: 0.95rem;
}

.rbac-cg.none[b-j783by71rf] {
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: transparent;
}

.rbac-cg.granted[b-j783by71rf] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);   /* icon (Color.Inherit) thừa kế currentColor → trắng */
}

.rbac-cg.inherited[b-j783by71rf] {
    background: transparent;
    border: 1.5px dashed rgba(var(--mud-palette-primary-rgb), 0.45);
    color: var(--mud-palette-primary);          /* mũi tên thừa kế currentColor → primary */
}

.rbac-cg.unsupported[b-j783by71rf] {
    border: none;
    background-image: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        var(--mud-palette-lines-default) 4px,
        var(--mud-palette-lines-default) 5px
    );
    color: var(--mud-palette-text-disabled);
    font-size: 13px;
    font-weight: 700;
    cursor: not-allowed;
}

/* ─── Cột quick "Tất cả" ──────────────────────────────────────────── */
.perm-matrix-td-quick[b-j783by71rf] {
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* ─── Save bar sticky đáy panel ───────────────────────────────────── */
/* ── Vừa chiều cao màn hình: header band + save bar đứng yên, 3 khối giữa cuộn riêng ── */
.rbac-editor-stack[b-j783by71rf] {
    display: flex;            /* MudStack đã là flex-column, khai báo tường minh cho chắc + nhất quán */
    flex-direction: column;
    /* Khớp tab Vai trò (có banner onboarding phía trên) → trừ nhiều nhất để không tràn trang. */
    max-height: calc(100dvh - 350px);
    min-height: 240px;
}

/* Banner "Tạm ngưng" đứng yên cùng header band (không co khi 3 khối giữa cuộn). */
.rbac-detail-alert[b-j783by71rf] {
    flex-shrink: 0;
}

.rbac-editor-scroll[b-j783by71rf] {
    flex: 1 1 auto;
    min-height: 0;
    /* Tự cuộn theo màn hình: viewport − (app bar + hub + banner + header band + save bar). */
    max-height: calc(100dvh - 425px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Mobile/tablet (≤1024px): bỏ giới hạn chiều cao → cuộn trang tự nhiên. */
@media (max-width: 1024px) {
    .rbac-editor-stack[b-j783by71rf] {
        max-height: none;
        min-height: 0;
    }

    .rbac-editor-scroll[b-j783by71rf] {
        overflow: visible;
        max-height: none;
    }
}

.rbac-savebar[b-j783by71rf] {
    flex-shrink: 0;   /* save bar đứng yên đáy panel — không co */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.rbac-savebar .info[b-j783by71rf] {
    flex: 1;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
}

.rbac-savebar .info b[b-j783by71rf] {
    color: var(--mud-palette-text-primary);
}

.rbac-dirty-dot[b-j783by71rf] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    margin-right: 7px;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-warning-rgb), 0.18);
}
/* /Features/Admin/Permission/Pages/PRoles/RolePermsDialog.razor.rz.scp.css */
/* ============================================================
   RolePermsDialog — port .rbac-permdetail-* (đồng bộ EffectivePermsDialog).
   Header icon-tile + hàng page bo viền + chip đếm. Token → --mud-palette-*.
   ============================================================ */

.rp-head-ic[b-kvf0va15he] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-head-ic[b-kvf0va15he]  .mud-icon-root {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
}

.rp-group[b-kvf0va15he] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin: 14px 0 6px;
}

.rp-row[b-kvf0va15he] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    margin-bottom: 6px;
}

.rp-row-page[b-kvf0va15he] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    padding-top: 2px;
}

.rp-row-page[b-kvf0va15he]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.rp-count[b-kvf0va15he] {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.rp-acts[b-kvf0va15he] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 520px) {
    .rp-row[b-kvf0va15he] {
        flex-direction: column;
        gap: 8px;
    }

    .rp-row-page[b-kvf0va15he] {
        min-width: 0;
    }
}
/* /Features/Admin/Permission/Pages/PRoles/Roles.razor.rz.scp.css */
/* ============================================================
   Roles tab — master/detail list (port từ design PermissionsScreen.css)
   .rbac-rolesintro · .rbac-rolelist · .rbac-role-item · badges.
   Token design → --mud-palette-* để tự đảo dark mode.
   ============================================================ */

/* ---------- Intro hướng dẫn người mới ---------- */
.rbac-rolesintro[b-scy92boav6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.rbac-rolesintro-main[b-scy92boav6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.rbac-rolesintro-ic[b-scy92boav6] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rbac-rolesintro-t[b-scy92boav6] {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.rbac-rolesintro-s[b-scy92boav6] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    line-height: 1.55;
}

.rbac-inherit-chip[b-scy92boav6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    padding: 1px 7px;
    border-radius: 7px;
    margin: 0 4px;
    vertical-align: middle;
}

.rbac-inherit-chip[b-scy92boav6]  .mud-icon-root {
    font-size: 0.8rem;
}

@media (max-width: 720px) {
    .rbac-rolesintro[b-scy92boav6] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- List header ---------- */
.rbac-rolelist-head[b-scy92boav6] {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;   /* tiêu đề + ô tìm đứng yên — không co khi list dài */
}

.rbac-rolelist-title[b-scy92boav6] {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 10px;
}

/* ---------- Role list ---------- */
/* Card danh sách = cột flex vừa chiều cao màn hình: tiêu đề + ô tìm đứng yên, chỉ list cuộn. */
.rbac-rolelist-card[b-scy92boav6] {
    display: flex;
    flex-direction: column;
    /* Cao = màn hình − chrome trên. Tab Vai trò có banner onboarding phía trên → trừ nhiều nhất. */
    max-height: calc(100dvh - 350px);
    min-height: 240px;
}

.rbac-rolelist[b-scy92boav6] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    /* Tự cuộn theo màn hình: viewport − (app bar + hub + banner onboarding + đầu list). */
    max-height: calc(100dvh - 355px);
    overflow-y: auto;
    overflow-x: hidden;   /* chỉ cuộn dọc — text dài dùng ellipsis */
}

/* Mobile/tablet (≤1024px): bỏ giới hạn chiều cao → cuộn trang tự nhiên. */
@media (max-width: 1024px) {
    .rbac-rolelist-card[b-scy92boav6] {
        display: block;
        max-height: none;
        min-height: 0;
    }

    .rbac-rolelist[b-scy92boav6] {
        overflow: visible;
        max-height: none;
    }
}

.rbac-role-item[b-scy92boav6] {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
    font-family: inherit;
    position: relative;   /* mốc cho connector cây (::before) */
}

.rbac-role-item:hover[b-scy92boav6] {
    background: var(--mud-palette-action-default-hover);
}

.rbac-role-item.active[b-scy92boav6] {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.25);
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);   /* accent border-left 4px (không đẩy layout) */
}

/* ─── Tree-view: thụt lề theo cấp (cap 3 cấp) + connector L-bracket ─── */
.rbac-role-item.lvl1[b-scy92boav6] {
    padding-left: 34px;
}

.rbac-role-item.lvl2[b-scy92boav6] {
    padding-left: 56px;
}

.rbac-role-item.lvl1[b-scy92boav6]::before,
.rbac-role-item.lvl2[b-scy92boav6]::before {
    content: '';
    position: absolute;
    top: 0;
    height: 24px;
    width: 11px;
    border-left: 1.5px solid var(--mud-palette-lines-inputs);
    border-bottom: 1.5px solid var(--mud-palette-lines-inputs);
    border-bottom-left-radius: 8px;
}

.rbac-role-item.lvl1[b-scy92boav6]::before {
    left: 15px;
}

.rbac-role-item.lvl2[b-scy92boav6]::before {
    left: 37px;
}

/* Caret mở/thu của role cha (span, không phải button — tránh nested button) */
.rbac-tree-caret[b-scy92boav6] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.rbac-tree-caret:hover[b-scy92boav6] {
    background: var(--mud-palette-action-default-hover);
}

.rbac-tree-caret.placeholder[b-scy92boav6] {
    visibility: hidden;
    cursor: default;
}

.rbac-tree-caret[b-scy92boav6]  .mud-icon-root {
    font-size: 1.15rem;
}

/* Icon loại vai trò — nhỏ, màu gray nhẹ, trung tính (không tile, không màu theo từng role).
   Đồng bộ với design source .rbac-role-ic nhưng tối giản cho tree-view. */
.rbac-role-ic[b-scy92boav6] {
    flex-shrink: 0;
    width: 20px;          /* hộp nhỏ cố định → tên role bắt đầu cùng mốc x mọi dòng (sao/khiên không lệch) */
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.rbac-role-ic[b-scy92boav6]  .mud-icon-root {
    font-size: 1.1rem;   /* ~17px — size nhỏ */
}

/* Role đang chọn → icon tô primary cho khớp accent chung của dòng. */
.rbac-role-item.active .rbac-role-ic[b-scy92boav6] {
    color: var(--mud-palette-primary);
}

/* Role tạm ngưng → làm mờ tên + icon. */
.rbac-role-item.inactive .rbac-role-name[b-scy92boav6] {
    opacity: 0.6;
}

.rbac-role-item.inactive .rbac-role-ic[b-scy92boav6] {
    opacity: 0.5;
}

.rbac-role-meta[b-scy92boav6] {
    flex: 1;
    min-width: 0;
}

.rbac-role-name[b-scy92boav6] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* tên role: ellipsis khi dài (không xuống dòng) */
.rbac-role-name .nm-txt[b-scy92boav6] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rbac-role-name .rbac-sys-badge[b-scy92boav6],
.rbac-role-name .rbac-status-badge[b-scy92boav6] {
    flex-shrink: 0;
}

.rbac-role-sub[b-scy92boav6] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.rbac-role-sub .n[b-scy92boav6] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

.rbac-role-sub .sep[b-scy92boav6] {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

/* dòng phụ "Kế thừa từ: {cha}" — nổi bật (primary), ellipsis khi tên cha dài */
.rbac-inh-tx[b-scy92boav6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--mud-palette-primary);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rbac-inh-tx[b-scy92boav6]  .mud-icon-root {
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* "{n} vai trò con" / "+{n} vai trò con" (collapsed) — bấm để mở/thu */
.rbac-childcount[b-scy92boav6] {
    flex-shrink: 0;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.rbac-childcount.collapsed[b-scy92boav6] {
    color: var(--mud-palette-primary);
}

.rbac-childcount:hover[b-scy92boav6] {
    text-decoration: underline;
}

.rbac-scope-tx[b-scy92boav6] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* scope defer (chưa hỗ trợ): đánh dấu nhẹ bằng gạch chân chấm */
.rbac-scope-tx.defer[b-scy92boav6] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    text-decoration-color: var(--mud-palette-text-disabled);
}

.rbac-role-users[b-scy92boav6] {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.rbac-role-item.active .rbac-role-users[b-scy92boav6] {
    background: var(--mud-palette-surface);
}

/* ---------- Badges ---------- */
.rbac-sys-badge[b-scy92boav6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

.rbac-status-badge[b-scy92boav6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

.rbac-status-badge .d[b-scy92boav6] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

/* List chỉ render biến thể .off ("Tạm ngưng"); biến thể .on (Đang hoạt động)
   thuộc header band của RoleEditor (file CSS khác) → không định nghĩa thừa ở đây. */
.rbac-status-badge.off[b-scy92boav6] {
    background: rgba(var(--mud-palette-error-rgb), 0.14);
    color: var(--mud-palette-error);
}
/* /Features/Admin/Permission/Pages/PRoles/RoleTemplates.razor.rz.scp.css */
/* ============================================================
   Template chức danh — master/detail (port từ design PermissionsScreen)
   .tpl-cd-*      danh sách chức danh (trái)
   .tpl-detail-*  header gradient + body chi tiết (phải)
   .perm-tpl-sec  tiêu đề mục · .perm-assign-* hàng chọn role
   .tpl-summary   dải tóm tắt · .perm-savebar footer lưu
   Màu qua --mud-palette-* để tự đảo dark mode (KHÔNG hardcode hex/rgb).
   ============================================================ */

/* ---------- Danh sách chức danh (trái) ---------- */
.tpl-cd-head[b-gtr93fkejm] {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;   /* tiêu đề + ô tìm đứng yên — không co khi list dài */
}

/* Hàng tiêu đề: "Chức danh" trái + nút "Tạo chức danh" phải */
.tpl-cd-titlerow[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.tpl-cd-title[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.tpl-cd-title[b-gtr93fkejm]  .mud-icon-root {
    font-size: 1rem;
}

.tpl-cd-empty[b-gtr93fkejm] {
    padding: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* Card list/chi tiết = cột flex vừa chiều cao màn hình: head + save-bar đứng yên, giữa cuộn riêng. */
.tpl-cd-card[b-gtr93fkejm],
.tpl-detail-card[b-gtr93fkejm] {
    display: flex;
    flex-direction: column;
    /* Cao = màn hình − chrome trên. Tab Template có thêm dòng intro phía trên lưới → trừ nhiều hơn Users. */
    max-height: calc(100dvh - 320px);
    min-height: 240px;
}

.tpl-cd-list[b-gtr93fkejm] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    /* Tự cuộn theo màn hình: viewport − (app bar + hub + intro + đầu list). */
    max-height: calc(100dvh - 315px);
    overflow-y: auto;
    overflow-x: hidden;   /* chỉ cuộn dọc — tên dài dùng ellipsis */
}

/* Mobile/tablet (≤1024px): bỏ giới hạn chiều cao → cuộn trang tự nhiên (DESIGN.md §20). */
@media (max-width: 1024px) {
    .tpl-cd-card[b-gtr93fkejm],
    .tpl-detail-card[b-gtr93fkejm] {
        display: block;
        max-height: none;
        min-height: 0;
    }

    .tpl-cd-list[b-gtr93fkejm],
    .tpl-detail-body[b-gtr93fkejm] {
        overflow: visible;
        max-height: none;
    }
}

.tpl-cd-item[b-gtr93fkejm] {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms, border-color 120ms;
}

.tpl-cd-item:hover[b-gtr93fkejm] {
    background: var(--mud-palette-action-default-hover);
}

.tpl-cd-item.active[b-gtr93fkejm] {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* Icon-tile chức danh — nền vàng nhạt (đồng bộ design rbac-role-ic của template) */
.tpl-cd-ic[b-gtr93fkejm] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

.tpl-cd-ic[b-gtr93fkejm]  .mud-icon-root {
    font-size: 1.05rem;
    color: var(--mud-palette-warning);
}

.tpl-cd-meta[b-gtr93fkejm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tpl-cd-name[b-gtr93fkejm] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-cd-sub[b-gtr93fkejm] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-cd-users[b-gtr93fkejm] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.tpl-cd-users[b-gtr93fkejm]  .mud-icon-root {
    font-size: 0.85rem;
}

/* ---------- Header chi tiết template (phải) ---------- */
.tpl-detail-head[b-gtr93fkejm] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;   /* khớp design rbac-detail-head */
    background: linear-gradient(180deg, var(--mud-palette-background-grey) 0%, transparent 100%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;   /* header đứng yên — không co khi panel giới hạn chiều cao */
}

.tpl-detail-meta[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.tpl-detail-meta .sep[b-gtr93fkejm] {
    color: var(--mud-palette-text-disabled);
}

.tpl-detail-meta b[b-gtr93fkejm] {
    color: var(--mud-palette-text-primary);
}

.tpl-detail-body[b-gtr93fkejm] {
    flex: 1 1 auto;
    min-height: 0;
    /* Tự cuộn theo màn hình: viewport − (app bar + hub + intro + header + save bar). */
    max-height: calc(100dvh - 375px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
}

/* ---------- Tiêu đề mục (section) ---------- */
.perm-tpl-sec[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.perm-tpl-sec .hint[b-gtr93fkejm] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    font-size: 11.5px;
}

.perm-tpl-sec[b-gtr93fkejm]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Hàng chọn role (full-width, 1 cột) ---------- */
.perm-assign-list[b-gtr93fkejm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perm-assign-row[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms, background 120ms;
}

.perm-assign-row:hover[b-gtr93fkejm] {
    border-color: var(--mud-palette-primary);
}

.perm-assign-row.on[b-gtr93fkejm] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* Icon-tile trong hàng role — trung tính, tô primary khi chọn */
.perm-assign-ic[b-gtr93fkejm] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

.perm-assign-row.on .perm-assign-ic[b-gtr93fkejm] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.perm-assign-ic[b-gtr93fkejm]  .mud-icon-root {
    font-size: 1.05rem;
}

/* Chip "↑ kế thừa từ role cha" trong tên role */
.perm-inherit-chip[b-gtr93fkejm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    padding: 1px 7px;
    border-radius: 7px;
    margin-left: 4px;
    vertical-align: middle;
}

.perm-inherit-chip[b-gtr93fkejm]  .mud-icon-root {
    font-size: 0.78rem;
}

/* ---------- Dải tóm tắt số role đã chọn ---------- */
.tpl-summary[b-gtr93fkejm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 12.5px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Header editor: icon-badge chức danh 50px ---------- */
.perm-tpl-badge[b-gtr93fkejm] {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

.perm-tpl-badge[b-gtr93fkejm]  .mud-icon-root {
    font-size: 1.4rem;
    color: var(--mud-palette-warning);
}

.perm-tpl-code[b-gtr93fkejm] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
}

/* ---------- Save bar (footer lưu template) ---------- */
.perm-savebar[b-gtr93fkejm] {
    flex-shrink: 0;   /* save bar đứng yên đáy panel — không co khi body cuộn */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.perm-savebar .info[b-gtr93fkejm] {
    flex: 1;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.perm-savebar .info b[b-gtr93fkejm] {
    color: var(--mud-palette-text-primary);
}

/* Chấm "có thay đổi chưa lưu" — vàng + quầng nhạt */
.perm-dirty-dot[b-gtr93fkejm] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    margin-right: 7px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-warning-rgb), 0.18);
}

/* Footer xếp dọc khi hẹp để nút không tràn */
@media (max-width: 600px) {
    .perm-savebar[b-gtr93fkejm] {
        flex-wrap: wrap;
    }

    .perm-savebar .info[b-gtr93fkejm] {
        flex: 1 0 100%;
        margin-bottom: 6px;
    }
}
/* /Features/Admin/Permission/Pages/PUsers/DataScopeMatrix.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────
   DataScopeMatrix — CSS isolation cho component
   Cây Công ty → Chi nhánh, mỗi node 1 checkbox "set hiệu lực".
   Dùng token MudBlazor (không hardcode hex).
   ───────────────────────────────────────────────────────────────── */

/* ─── Khung cây (cuộn riêng để list dài không đẩy thanh Lưu) ─── */
.scope-tree[b-qp3o3kf2w4] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    max-height: 52vh;
    overflow-y: auto;
}

/* ─── 1 dòng node (công ty hoặc chi nhánh) ─── */
.scope-node[b-qp3o3kf2w4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.scope-node:last-child[b-qp3o3kf2w4] {
    border-bottom: none;
}

.scope-node.company[b-qp3o3kf2w4] {
    background: var(--mud-palette-background-grey);
    font-weight: 500;
}

.scope-node.branch[b-qp3o3kf2w4] {
    padding-left: 16px;
}

.scope-node:hover[b-qp3o3kf2w4] {
    background: var(--mud-palette-action-hover);
}

/* node đang trong phạm vi → dải nền brand nhạt + viền trái */
.scope-node.on[b-qp3o3kf2w4] {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* ─── Caret mở/đóng chi nhánh ─── */
.scope-caret[b-qp3o3kf2w4] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.scope-caret.placeholder[b-qp3o3kf2w4] {
    visibility: hidden;
    cursor: default;
}

.scope-caret[b-qp3o3kf2w4]  .mud-icon-root {
    font-size: 1.1rem;
}

/* ─── Checkbox "set hiệu lực" (vuông bo góc) ─── */
.scope-cbx[b-qp3o3kf2w4] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 120ms;
    flex: 0 0 auto;
}

.scope-cbx[b-qp3o3kf2w4]  .mud-icon-root {
    font-size: 0.8rem;
}

.scope-cbx:hover[b-qp3o3kf2w4] {
    border-color: var(--mud-palette-primary);
}

/* tick mặc định/kế thừa → nền brand */
.scope-cbx.on[b-qp3o3kf2w4] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.scope-cbx.on[b-qp3o3kf2w4]  .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

/* tick do CẤP THÊM → nền success (phân biệt với kế thừa) */
.scope-cbx.grant.on[b-qp3o3kf2w4] {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.scope-cbx.grant.on[b-qp3o3kf2w4]  .mud-icon-root {
    color: var(--mud-palette-success-text);
}

/* bỏ tick mục mặc định (THU HỒI) → ô đỏ rỗng có dấu ✕ */
.scope-cbx.deny[b-qp3o3kf2w4] {
    border-color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), 0.08);
}

.scope-cbx.deny[b-qp3o3kf2w4]  .mud-icon-root {
    color: var(--mud-palette-error);
}

/* ─── Tên + mã đơn vị ─── */
.scope-node-main[b-qp3o3kf2w4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.scope-node-main .nm[b-qp3o3kf2w4] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scope-node-main .mc[b-qp3o3kf2w4] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

/* ─── Nhãn nguồn / override cạnh tên ─── */
.scope-base-hint[b-qp3o3kf2w4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.scope-base-hint.def[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

.scope-base-hint.role[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-info-rgb), 0.14);
    color: var(--mud-palette-info);
}

.scope-base-hint.grant[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-success-rgb), 0.16);
    color: var(--mud-palette-success);
}

.scope-base-hint.deny[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-error-rgb), 0.16);
    color: var(--mud-palette-error);
}

/* ─── Badge tỉ lệ chi nhánh trong phạm vi (tri-state) ─── */
.scope-cov[b-qp3o3kf2w4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.scope-cov .cov-glyph[b-qp3o3kf2w4] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scope-cov .cov-glyph[b-qp3o3kf2w4]  .mud-icon-root {
    font-size: 0.7rem;
}

.scope-cov.full .cov-glyph[b-qp3o3kf2w4] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.scope-cov.full .cov-glyph[b-qp3o3kf2w4]  .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

.scope-cov.partial .cov-glyph[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-primary-rgb), 0.18);
    border-color: var(--mud-palette-primary);
}

.scope-cov.partial .cov-glyph[b-qp3o3kf2w4]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* ─── Nút "chọn tất cả chi nhánh" ─── */
.scope-allbtn[b-qp3o3kf2w4] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    padding: 2px 6px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.scope-allbtn:hover[b-qp3o3kf2w4] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
}
/* /Features/Admin/Permission/Pages/PUsers/EffectivePermsDialog.razor.rz.scp.css */
/* ============================================================
   EffectivePermsDialog — port .rbac-permdetail-* (PermissionsScreen.css ~85-104)
   Header icon-tile + hàng page bo viền + chip đếm. Token → --mud-palette-*.
   ============================================================ */

.eff-head-ic[b-dlqgn4t87u] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eff-head-ic[b-dlqgn4t87u]  .mud-icon-root {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
}

/* nhóm module */
.eff-group[b-dlqgn4t87u] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin: 14px 0 6px;
}

/* hàng 1 page */
.eff-row[b-dlqgn4t87u] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    margin-bottom: 6px;
}

.eff-row-page[b-dlqgn4t87u] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    padding-top: 2px;
}

.eff-row-page[b-dlqgn4t87u]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.eff-count[b-dlqgn4t87u] {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.eff-acts[b-dlqgn4t87u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 520px) {
    .eff-row[b-dlqgn4t87u] {
        flex-direction: column;
        gap: 8px;
    }

    .eff-row-page[b-dlqgn4t87u] {
        min-width: 0;
    }
}
/* /Features/Admin/Permission/Pages/PUsers/OverrideTab.razor.rz.scp.css */
/* ============================================================
   OverrideTab — danh sách phẳng, mỗi action 1 checkbox "đặt quyền hiệu lực".
   Port .rbac-ovr-* từ design PermissionsScreen.css. Token → --mud-palette-*.
   ============================================================ */

/* chip tóm tắt số trang có ngoại lệ */
.ovr-count[b-t2xc6ngorf] {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ovr-count.on[b-t2xc6ngorf] {
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
}

/* khung list (cuộn riêng để save-bar luôn thấy) */
.ovr-list[b-t2xc6ngorf] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden auto;
    max-height: 52vh;
}

/* 1 hàng = 1 page */
.rbac-ovr-row[b-t2xc6ngorf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rbac-ovr-row:last-child[b-t2xc6ngorf] {
    border-bottom: none;
}

.rbac-ovr-row.has-ovr[b-t2xc6ngorf] {
    background: rgba(var(--mud-palette-warning-rgb), 0.08);
}

.rbac-ovr-meta[b-t2xc6ngorf] {
    flex-shrink: 0;
    min-width: 170px;
    max-width: 240px;
}

.rbac-ovr-name[b-t2xc6ngorf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
}

.ovr-dot[b-t2xc6ngorf] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    margin-right: 7px;
    flex-shrink: 0;
}

.rbac-ovr-base[b-t2xc6ngorf] {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* lưới các ô action */
.rbac-ovr-checks[b-t2xc6ngorf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.rbac-ovr-check[b-t2xc6ngorf] {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    padding: 6px 9px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: border-color 120ms, background 120ms;
    font-family: inherit;
}

.rbac-ovr-check:hover[b-t2xc6ngorf] {
    border-color: var(--mud-palette-primary);
}

.rbac-ovr-check .lbl[b-t2xc6ngorf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    flex: 1;
    min-width: 0;
    text-align: left;
}

.rbac-ovr-check.checked .lbl[b-t2xc6ngorf] {
    color: var(--mud-palette-text-primary);
}

.rbac-ovr-check.granted[b-t2xc6ngorf] {
    border-color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), 0.10);
}

.rbac-ovr-check.denied[b-t2xc6ngorf] {
    border-color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), 0.10);
}

.rbac-ovr-check.denied .lbl[b-t2xc6ngorf] {
    color: var(--mud-palette-error);
    text-decoration: line-through;
}

.rbac-ovr-check.unsupported[b-t2xc6ngorf] {
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-grey);
    cursor: not-allowed;
    opacity: 0.7;
}

.rbac-ovr-check.unsupported .lbl[b-t2xc6ngorf] {
    color: var(--mud-palette-text-disabled);
    text-decoration: none;
}

/* ô vuông tick */
.ovr-box[b-t2xc6ngorf] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--mud-palette-surface);
}

.ovr-box.on[b-t2xc6ngorf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.rbac-ovr-check.granted .ovr-box.on[b-t2xc6ngorf] {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.ovr-box[b-t2xc6ngorf]  .mud-icon-root {
    font-size: 0.8rem;
    color: var(--mud-palette-primary-text);
}

.ovr-dash[b-t2xc6ngorf] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    font-weight: 700;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 3px,
        var(--mud-palette-lines-default) 3px, var(--mud-palette-lines-default) 4px);
}

@media (max-width: 720px) {
    .rbac-ovr-row[b-t2xc6ngorf] {
        flex-direction: column;
        align-items: stretch;
    }

    .rbac-ovr-meta[b-t2xc6ngorf] {
        max-width: none;
    }
}

/* ─── Save bar ─────────────────────────────────────────────────────── */
.ovr-savebar[b-t2xc6ngorf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px 0;
    margin-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ovr-savebar .info[b-t2xc6ngorf] {
    flex: 1;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
}

.ovr-savebar .info b[b-t2xc6ngorf] {
    color: var(--mud-palette-text-primary);
}

.ovr-dirty-dot[b-t2xc6ngorf] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    margin-right: 7px;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-warning-rgb), 0.18);
}
/* /Features/Admin/Permission/Pages/PUsers/UserPermissions.razor.rz.scp.css */
/* ============================================================
   UserPermissions — master-detail (bám design PermissionsScreen.user.jsx)
   Token design → --mud-palette-* (dark-safe). Icon child-component → ::deep.
   ============================================================ */

/* ─── Picker NV (cột trái) ─────────────────────────────────────────── */
.perm-emp-head[b-35h77iessh] {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.perm-emp-head-title[b-35h77iessh] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.perm-step-badge[b-35h77iessh] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.perm-emp-list[b-35h77iessh] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    /* Tự cuộn theo chiều cao màn hình: cao = viewport − (app bar + tiêu đề hub + tab + đầu list). */
    max-height: calc(100dvh - 295px);
    overflow-y: auto;
}

/* ── Vừa chiều cao màn hình: list NV + panel chi tiết cuộn RIÊNG, phần cần check đứng yên ──
   Card = cột flex giới hạn theo viewport; đầu/đỉnh là flex-item (đứng yên), chỉ giữa cuộn. */
.perm-emp-card[b-35h77iessh],
.perm-detail-card[b-35h77iessh] {
    display: flex;
    flex-direction: column;
    /* Cao = màn hình − (app bar + tiêu đề hub + thanh tab + caption). Tab Users ít chrome trên nhất. */
    max-height: calc(100dvh - 290px);
    min-height: 240px;
}

/* Header NV + dải công thức ①×② + thanh sub-tab đứng yên; chỉ nội dung sub-tab cuộn. */
.perm-subtab-scroll[b-35h77iessh] {
    flex: 1 1 auto;
    min-height: 0;
    /* Trừ thêm header NV + dải ①×② + thanh sub-tab (đều đứng yên phía trên vùng cuộn). */
    max-height: calc(100dvh - 405px);
    overflow-y: auto;
}

/* Các phần đứng yên KHÔNG co khi nội dung dài (chỉ vùng cuộn co lại để chứa overflow). */
.perm-emp-head[b-35h77iessh],
.perm-detail-head[b-35h77iessh],
.perm-eff-summary[b-35h77iessh],
.perm-subtabs[b-35h77iessh] {
    flex-shrink: 0;
}

/* Mobile/tablet (≤1024px): bỏ giới hạn chiều cao → cuộn trang tự nhiên (DESIGN.md §20). */
@media (max-width: 1024px) {
    .perm-emp-card[b-35h77iessh],
    .perm-detail-card[b-35h77iessh] {
        display: block;
        max-height: none;
        min-height: 0;
    }

    .perm-emp-list[b-35h77iessh],
    .perm-subtab-scroll[b-35h77iessh] {
        overflow: visible;
        max-height: none;
    }
}

.perm-emp-item[b-35h77iessh] {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
    font-family: inherit;
}

.perm-emp-item:hover[b-35h77iessh] {
    background: var(--mud-palette-action-default-hover);
}

.perm-emp-item.active[b-35h77iessh] {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

.perm-emp-meta[b-35h77iessh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perm-emp-name[b-35h77iessh] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-emp-sub[b-35h77iessh] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-emp-rolecount[b-35h77iessh] {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    padding: 2px 8px;
    border-radius: 999px;
}

.perm-emp-item.active .perm-emp-rolecount[b-35h77iessh] {
    background: var(--mud-palette-surface);
}

/* ─── Badge phạm vi dữ liệu (dòng 3 trong meta) ───────────────────── */
.perm-emp-scope[b-35h77iessh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-emp-scope[b-35h77iessh]  .mud-icon-root {
    font-size: 0.85rem;
}

.perm-emp-scope.bypass[b-35h77iessh] {
    color: var(--mud-palette-info);
}

.perm-emp-scope.empty[b-35h77iessh] {
    color: var(--mud-palette-warning);
}

.perm-emp-scope.err[b-35h77iessh] {
    color: var(--mud-palette-error);
}

.perm-emp-scope.loading[b-35h77iessh] {
    opacity: 0.55;
    font-style: italic;
}

/* ─── Empty-state (chưa chọn NV) ───────────────────────────────────── */
.perm-empty[b-35h77iessh] {
    padding: 56px 24px;
    text-align: center;
}

.perm-empty-ic[b-35h77iessh] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin: 0 auto 16px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.perm-empty-ic[b-35h77iessh]  .mud-icon-root {
    font-size: 2rem;
    color: var(--mud-palette-primary);
}

.perm-empty-title[b-35h77iessh] {
    font-size: 16px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.perm-empty-sub[b-35h77iessh] {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ─── Header band chi tiết NV ──────────────────────────────────────── */
.perm-detail-head[b-35h77iessh] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--mud-palette-background-grey) 0%, transparent 100%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.perm-context-code[b-35h77iessh] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

/* quick-stats strip trong header */
.perm-qstrip[b-35h77iessh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.perm-qstrip-item b[b-35h77iessh] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.perm-qstrip-sep[b-35h77iessh] {
    color: var(--mud-palette-text-disabled);
}

/* ─── Dải công thức ① × ② = quyền hiệu lực ─────────────────────────── */
.perm-eff-summary[b-35h77iessh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.perm-eff-col[b-35h77iessh] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.perm-eff-num[b-35h77iessh] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.perm-eff-num.l1[b-35h77iessh] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.perm-eff-num.l2[b-35h77iessh] {
    background: rgba(var(--mud-palette-info-rgb), 0.12);
    color: var(--mud-palette-info);
}

.perm-eff-lbl[b-35h77iessh] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.perm-eff-val[b-35h77iessh] {
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
}

.perm-eff-op[b-35h77iessh] {
    font-size: 16px;
    font-weight: 300;
    color: var(--mud-palette-text-disabled);
}

.perm-eff-result[b-35h77iessh] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.perm-eff-result[b-35h77iessh]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

@media (max-width: 720px) {
    .perm-eff-result[b-35h77iessh], .perm-eff-detail-btn[b-35h77iessh] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ─── Callout "90%" ────────────────────────────────────────────────── */
.perm-callout[b-35h77iessh] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 11px;
    margin-bottom: 16px;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.18);
}

.perm-callout-ic[b-35h77iessh] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.perm-callout-ic[b-35h77iessh]  .mud-icon-root {
    font-size: 1.05rem;
    color: var(--mud-palette-primary-text);
}

.perm-callout-t[b-35h77iessh] {
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.perm-callout-s[b-35h77iessh] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

/* ─── Sub-tabs (underline + số + tag CHÍNH/TUỲ CHỌN + count) ────────── */
.perm-subtabs[b-35h77iessh] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0 18px;
    flex-wrap: wrap;
}

.perm-subtab[b-35h77iessh] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
}

.perm-subtab:hover[b-35h77iessh] {
    color: var(--mud-palette-text-primary);
}

.perm-subtab.active[b-35h77iessh] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.perm-subtab .num[b-35h77iessh] {
    font-weight: 800;
}

.perm-subtab .count[b-35h77iessh] {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    padding: 0 6px;
    border-radius: 999px;
    line-height: 1.5;
}

.perm-subtab.active .count[b-35h77iessh] {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

.perm-subtab-tag[b-35h77iessh] {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
}

.perm-subtab-tag.main[b-35h77iessh] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.perm-subtab-tag.opt[b-35h77iessh] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

/* ─── Section title (trong tab Gán role) ───────────────────────────── */
.perm-sec-title[b-35h77iessh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.perm-sec-title .hint[b-35h77iessh] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    font-size: 11.5px;
}

.perm-sec-title[b-35h77iessh]  .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

/* ─── Tab Gán role: 2 cột (4fr chọn role · 8fr quyền cuối) ──────────── */
.perm-assign-grid[b-35h77iessh] {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1024px) {
    .perm-assign-grid[b-35h77iessh] {
        grid-template-columns: 1fr;
    }
}

/* hàng chọn role (full-width) */
.perm-assign-list[b-35h77iessh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perm-assign-row[b-35h77iessh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
    user-select: none;
}

.perm-assign-row:hover[b-35h77iessh] {
    border-color: var(--mud-palette-primary);
}

.perm-assign-row.on[b-35h77iessh] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.perm-assign-ic[b-35h77iessh] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

.perm-assign-row.on .perm-assign-ic[b-35h77iessh] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.perm-assign-ic[b-35h77iessh]  .mud-icon-root {
    font-size: 1.05rem;
}

/* ─── Ma trận QUYỀN CUỐI CÙNG (read-only) ──────────────────────────── */
.perm-ro-matrix[b-35h77iessh] {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

.perm-ro-table[b-35h77iessh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perm-ro-table th[b-35h77iessh],
.perm-ro-table td[b-35h77iessh] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
}

.perm-ro-table thead th[b-35h77iessh] {
    background: var(--mud-palette-background-grey);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.perm-ro-th-page[b-35h77iessh] {
    text-align: left !important;
    min-width: 180px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.perm-ro-th-action[b-35h77iessh] {
    width: 52px;
}

.perm-acthead[b-35h77iessh] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.perm-acthead[b-35h77iessh]  .mud-icon-root {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
}

.perm-ro-grouprow td[b-35h77iessh] {
    background: var(--mud-palette-background-grey);
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    padding: 6px 12px;
    position: sticky;
    left: 0;
    z-index: 1;
}

.perm-ro-td-page[b-35h77iessh] {
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.perm-ro-cell[b-35h77iessh] {
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* glyph trạng thái ô (đồng bộ ma trận role) */
.rbac-cg[b-35h77iessh] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rbac-cg[b-35h77iessh]  .mud-icon-root {
    font-size: 0.95rem;
}

.rbac-cg.none[b-35h77iessh] {
    border: 1.5px solid var(--mud-palette-lines-inputs);
}

.rbac-cg.granted[b-35h77iessh] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.rbac-cg.unsupported[b-35h77iessh] {
    border: none;
    background-image: repeating-linear-gradient(
        135deg, transparent, transparent 4px,
        var(--mud-palette-lines-default) 4px, var(--mud-palette-lines-default) 5px);
    color: var(--mud-palette-text-disabled);
    font-size: 13px;
    font-weight: 700;
}

/* ─── Hộp công thức tính quyền cuối ────────────────────────────────── */
.perm-effect[b-35h77iessh] {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 13px 15px;
    margin-top: 14px;
}

.perm-effect-t[b-35h77iessh] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.perm-effect-formula[b-35h77iessh] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 9px 11px;
    line-height: 1.6;
    margin-top: 8px;
    overflow-x: auto;
}

.perm-effect-formula .g[b-35h77iessh] {
    color: var(--mud-palette-success);
}

.perm-effect-formula .d[b-35h77iessh] {
    color: var(--mud-palette-error);
}

.perm-effect-note[b-35h77iessh] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}
/* /Features/Auth/Pages/PForgotPassword/ForgotPassword.razor.rz.scp.css */
/* ============================================================
   ForgotPassword page — CSS isolation
   Theo design source: _design_source/.../web/ForgotPasswordScreen.jsx
   4 bước: Danh tính → Mã xác thực → Mật khẩu mới → Hoàn tất
   ============================================================ */

/* Card chính 620px — rộng hơn để chứa 6 ô OTP gần vuông + stepper 4 bước thoáng.
   Khớp screenshot mới (imagefix/quenmatkhau.JPG) — design source JSX dùng 460 nhưng
   user-facing screenshot đã update theo proportions rộng hơn. */
.fp-card[b-f1gzyn8vxk] {
    border-radius: 24px !important;
    border: 1px solid var(--app-divider) !important;
    box-shadow: var(--app-shadow-card-strong) !important;
    overflow: hidden;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
}

/* ── Header (back link + logo + tiêu đề + stepper) ── */
.fp-header[b-f1gzyn8vxk] {
    padding: 32px 40px 24px;
    background: var(--app-auth-header-gradient);
    border-bottom: 1px solid var(--app-divider);
}

.fp-back[b-f1gzyn8vxk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--app-text-secondary);
    margin-bottom: 12px;
    margin-left: -10px;
}

.fp-back:hover[b-f1gzyn8vxk] {
    background: rgba(0, 0, 0, 0.03);
}

/* Nút "Đăng nhập lại" cố định cuối form — về thẳng /login từ bất kỳ bước nào (không back từng bước). */
.fp-login-again[b-f1gzyn8vxk] {
    text-align: center;
    margin-top: 18px;
}

.fp-back--center[b-f1gzyn8vxk] {
    margin: 0;
}

.fp-header-row[b-f1gzyn8vxk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo wrap — square 56px theo screenshot, bg pastel với icon đậm cho contrast. */
.fp-logo-wrap[b-f1gzyn8vxk] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--app-primary-lighten);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* MudIcon render <svg> con → ::deep apply size + color */
.fp-logo-wrap[b-f1gzyn8vxk]  .fp-logo-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 28px !important;
    color: var(--app-primary);
}

.fp-header-text[b-f1gzyn8vxk] {
    display: flex;
    flex-direction: column;
}

.fp-title[b-f1gzyn8vxk] {
    font-weight: 700;
    font-size: 24px;
    color: var(--app-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.fp-subtitle[b-f1gzyn8vxk] {
    margin-top: 4px;
    font-size: 14px;
    color: var(--app-text-secondary);
}

/* ── Stepper 4 bước ── theo screenshot: chấm 32px, đường nối dài & dày, idle bg trắng + viền */
.fp-steps[b-f1gzyn8vxk] {
    display: flex;
    align-items: center;
    margin-top: 22px;
    gap: 4px;
}

.fp-step[b-f1gzyn8vxk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 64px;
    flex-shrink: 0;
}

.fp-step-dot[b-f1gzyn8vxk] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 160ms;
}

/* Idle: bg trắng + viền mảnh + số xám — khác bản cũ (bg fill xám) */
.fp-step--idle .fp-step-dot[b-f1gzyn8vxk] {
    background: var(--app-surface);
    color: var(--app-text-secondary);
    border: 1.5px solid var(--app-divider-strong);
}

.fp-step--active .fp-step-dot[b-f1gzyn8vxk] {
    background: var(--app-primary);
    color: #fff;
    box-shadow: var(--app-shadow-step-active);
}

.fp-step--done .fp-step-dot[b-f1gzyn8vxk] {
    background: var(--app-primary);
    color: #fff;
}

.fp-step-label[b-f1gzyn8vxk] {
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--app-text-secondary);
}

.fp-step--idle .fp-step-label[b-f1gzyn8vxk] {
    color: var(--app-text-secondary);
    opacity: 0.7;
}

.fp-step--active .fp-step-label[b-f1gzyn8vxk],
.fp-step--done .fp-step-label[b-f1gzyn8vxk] {
    color: var(--app-text-primary);
}

/* Đường nối: dày 3px, dài (flex-1) — đoạn done tô navy đậm */
.fp-step-line[b-f1gzyn8vxk] {
    flex: 1;
    height: 3px;
    margin: 0 6px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: var(--app-divider-strong);
    transition: background 200ms;
}

.fp-step-line--done[b-f1gzyn8vxk] {
    background: var(--app-primary);
}

/* ── Body ── */
.fp-form-wrap[b-f1gzyn8vxk] {
    padding: 32px 40px;
    background: var(--app-surface);
}

/* ── Step 1: Tabs email/code ── */
.fp-tabs[b-f1gzyn8vxk] {
    display: flex;
    padding: 4px;
    background: var(--app-step-idle-bg);
    border-radius: 10px;
    margin-bottom: 16px;
}

.fp-tab[b-f1gzyn8vxk] {
    flex: 1;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--app-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 120ms, color 120ms, box-shadow 120ms;
}

.fp-tab--on[b-f1gzyn8vxk] {
    background: var(--app-surface);
    color: var(--app-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ── Label + input group (giống Login) ── */
.fp-flabel[b-f1gzyn8vxk] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text-primary);
    margin-bottom: 8px;
}

.fp-ig[b-f1gzyn8vxk] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider-strong);
    border-radius: 12px;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.fp-ig:focus-within[b-f1gzyn8vxk] {
    border-color: var(--app-primary);
    box-shadow: var(--app-focus-ring);
}

.fp-ig--error[b-f1gzyn8vxk] {
    border-color: var(--app-error) !important;
}

/* MudIcon ::deep — apply size & color cho <svg> con (giống Login.razor.css) */
.fp-ig[b-f1gzyn8vxk]  .fp-ig-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    color: var(--app-text-secondary);
    flex-shrink: 0;
}

.fp-ig[b-f1gzyn8vxk]  .fp-ok-icon {
    color: var(--app-success) !important;
}

.fp-ig-input[b-f1gzyn8vxk] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--app-text-primary);
}

.fp-ig-input[b-f1gzyn8vxk]::placeholder {
    color: var(--app-text-secondary);
    opacity: 0.6;
}

.fp-ig-toggle[b-f1gzyn8vxk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.fp-error-hint[b-f1gzyn8vxk] {
    font-size: 12px;
    color: var(--app-error);
    margin-top: 6px;
    font-weight: 500;
}

/* ── Step 3: Warning banner "tự tạo tài khoản" ──
   Theo screenshot imagefix/quenmatkhau.JPG: viền + nền vàng cam soft, icon ⚠️ bên trái.
   Dùng token --app-warning từ app.css để đồng bộ design system. */
.fp-warn-banner[b-f1gzyn8vxk] {
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.08);   /* warning-500 8% — soft amber */
    border: 1px solid rgba(245, 158, 11, 0.40);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: #92400E;                          /* amber-800 — text đậm trên nền nhạt */
    line-height: 1.5;
}

.fp-warn-banner b[b-f1gzyn8vxk] {
    color: #92400E;
    font-weight: 700;
}

.fp-warn-banner[b-f1gzyn8vxk]  .fp-warn-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--app-warning);
}

/* ── Step 1: Info banner ──
   Đồng bộ design source ForgotPasswordScreen.jsx (--status-info-bg + --info-600).
   Dùng token --app-info-* trong app.css thay vì hardcode rgba/hex. */
.fp-info[b-f1gzyn8vxk] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-border);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--app-info-fg);
    line-height: 1.5;
}

.fp-info b[b-f1gzyn8vxk] {
    color: var(--app-info-fg);
    font-weight: 700;
}

/* MudIcon render <svg> con → BẮT BUỘC ::deep để CSS scoped chạm tới size + color.
   Nếu không có, icon giữ size mặc định MudBlazor (24px) → quá to so với text 13px. */
.fp-info[b-f1gzyn8vxk]  .fp-info-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--app-info-fg);
}

/* ── Step 2: OTP 6 ô + countdown ── theo screenshot: banner generous, ô gần vuông 72px ── */
.fp-otp-info[b-f1gzyn8vxk] {
    padding: 14px 18px;
    background: var(--app-primary-lighten);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--app-primary);
    font-weight: 500;
    margin-bottom: 22px;
}

/* MudIcon render <svg> → ::deep mới chạm được. Không có → giữ size mặc định 24px. */
.fp-otp-info[b-f1gzyn8vxk]  .fp-otp-info-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    flex-shrink: 0;
    color: var(--app-primary);
}

.fp-otp-row[b-f1gzyn8vxk] {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 10px;
}

/* OTP cell gần vuông 72×72 theo screenshot, bo lớn 16px, font mono nét đậm. */
.fp-otp-cell[b-f1gzyn8vxk] {
    width: 72px;
    height: 72px;
    text-align: center;
    border: 1.5px solid var(--app-divider-strong);
    border-radius: 16px;
    outline: none;
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 26px;
    font-weight: 700;
    transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
    caret-color: var(--app-primary);
}

.fp-otp-cell:focus[b-f1gzyn8vxk] {
    border-color: var(--app-primary);
    border-width: 2px;
    box-shadow: var(--app-focus-ring);
}

.fp-otp-cell--on[b-f1gzyn8vxk] {
    border-color: var(--app-primary);
    background: var(--app-primary-lighten);
}

.fp-otp-meta[b-f1gzyn8vxk] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--app-text-secondary);
}

.fp-mono[b-f1gzyn8vxk] {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--app-text-primary);
}

.fp-text-danger[b-f1gzyn8vxk] {
    color: var(--app-error) !important;
}

.fp-resend[b-f1gzyn8vxk] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--app-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fp-resend:disabled[b-f1gzyn8vxk] {
    cursor: not-allowed;
    color: var(--app-text-secondary);
    opacity: 0.6;
}

/* ── Step 2: 2 nút "Quay lại / Xác thực" theo screenshot — pill shape, height 56 ── */
.fp-actions[b-f1gzyn8vxk] {
    display: flex;
    gap: 14px;
    margin-top: 22px;
}

[b-f1gzyn8vxk] .fp-btn-outline {
    border-radius: 999px !important;     /* pill */
    height: 56px !important;
    min-width: 130px;
    padding-left: 28px !important;
    padding-right: 28px !important;
    font-weight: 700 !important;
    border-width: 2px !important;
}

/* ── Step 3: Strength bar ── */
/* Strength bar dùng color inline-style từ PasswordStrength tuple (code-behind chọn
   var(--app-error/warning/info/success) tùy score). Không khai báo lại ở CSS. */
.fp-strength[b-f1gzyn8vxk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.fp-strength-track[b-f1gzyn8vxk] {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--app-step-idle-bg);
    overflow: hidden;
}

.fp-strength-bar[b-f1gzyn8vxk] {
    height: 100%;
    transition: width 200ms, background 200ms;
}

.fp-strength-label[b-f1gzyn8vxk] {
    font-size: 11px;
    font-weight: 700;
    min-width: 64px;
    text-align: right;
}

/* ── Step 3: Checklist yêu cầu (2 cột) ── */
.fp-checklist[b-f1gzyn8vxk] {
    margin-top: 14px;
    padding: 12px;
    background: var(--app-step-idle-bg);
    border-radius: 10px;
    border: 1px solid var(--app-divider);
}

.fp-checklist-title[b-f1gzyn8vxk] {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.fp-checklist-grid[b-f1gzyn8vxk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.fp-checklist-item[b-f1gzyn8vxk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--app-text-secondary);
}

.fp-checklist-item--ok[b-f1gzyn8vxk] {
    color: var(--app-success);
}

.fp-checklist-dot[b-f1gzyn8vxk] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--app-divider-strong);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-checklist-item--ok .fp-checklist-dot[b-f1gzyn8vxk] {
    background: var(--app-success);
}

/* ── Step 4: Done ── */
.fp-done[b-f1gzyn8vxk] {
    text-align: center;
    padding: 10px 4px 6px;
}

.fp-done-icon[b-f1gzyn8vxk] {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--app-success-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.fp-done[b-f1gzyn8vxk]  .fp-done-icon-svg {
    width: 40px !important;
    height: 40px !important;
    font-size: 40px !important;
    color: var(--app-success);
}

.fp-done-title[b-f1gzyn8vxk] {
    font-size: 18px;
    font-weight: 700;
    color: var(--app-text-primary);
}

.fp-done-text[b-f1gzyn8vxk] {
    font-size: 13px;
    color: var(--app-text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

/* ── Primary CTA — pill shape theo screenshot, height 56 ── */
[b-f1gzyn8vxk] .fp-btn {
    border-radius: 999px !important;
    box-shadow: var(--app-shadow-btn-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    height: 56px !important;
    font-size: 15px !important;
}

[b-f1gzyn8vxk] .fp-btn:hover {
    box-shadow: var(--app-shadow-btn-primary-hover) !important;
}

/* ── Responsive: OTP ô + button scale theo viewport ── */
@media (max-width: 600px) {
    .fp-header[b-f1gzyn8vxk],
    .fp-form-wrap[b-f1gzyn8vxk] {
        padding-left: 24px;
        padding-right: 24px;
    }
    .fp-otp-cell[b-f1gzyn8vxk] {
        width: 48px;
        height: 56px;
        font-size: 22px;
        border-radius: 12px;
    }
    .fp-otp-row[b-f1gzyn8vxk] {
        gap: 6px;
    }
    .fp-title[b-f1gzyn8vxk] {
        font-size: 20px;
    }
    [b-f1gzyn8vxk] .fp-btn,
    [b-f1gzyn8vxk] .fp-btn-outline {
        height: 52px !important;
    }
    [b-f1gzyn8vxk] .fp-btn-outline {
        min-width: 100px;
    }
}
/* /Features/Auth/Pages/PLogin/Login.razor.rz.scp.css */
/* Card chính — bo góc lớn 4 cạnh, shadow mềm, viền mảnh (theo design system).
   overflow:hidden + !important phòng MudPaper base rule có thể đổi → 4 góc luôn cắt
   đúng theo border-radius (header/footer/form không tràn ra ngoài). */
.login-card[b-16e0hbb828] {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    border-radius: 20px !important;
    border: 1px solid var(--app-divider) !important;
    box-shadow: var(--app-shadow-card-strong) !important;
    overflow: hidden !important;
}

/* Header branding — gradient nhẹ + border-bottom thay cho MudDivider (đúng design source). */
.login-header[b-16e0hbb828] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 32px 24px;
    text-align: center;
    background: var(--app-auth-header-gradient);
    border-bottom: 1px solid var(--app-divider);
}

.login-logo-wrap[b-16e0hbb828] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    box-shadow: var(--app-shadow-logo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.login-logo-svg[b-16e0hbb828] {
    display: block;
}

.login-title[b-16e0hbb828] {
    font-weight: 700 !important;
    font-size: 22px !important;
    color: var(--app-text-primary);
    letter-spacing: -0.01em;
}

.login-subtitle[b-16e0hbb828] {
    margin-top: 4px;
    font-size: 13px;
}

.login-form-wrap[b-16e0hbb828] {
    padding: 28px;
    background: var(--app-surface);
}

/* Footer card — dòng bản quyền nhỏ. KHÔNG có border-top: design source
   LoginScreen.jsx footer chỉ có padding + text style, không có đường kẻ ngang.
   Bỏ border-top để card nhìn liền 1 khối bo tròn thay vì 3 hộp chồng. */
.login-footer[b-16e0hbb828] {
    padding: 14px 28px 22px;
    text-align: center;
    font-size: 11px;
    color: var(--app-text-secondary);
    background: var(--app-surface);
}

/* ── Form ── */
.login-fields[b-16e0hbb828] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field-group[b-16e0hbb828] {
    display: flex;
    flex-direction: column;
}

.login-flabel[b-16e0hbb828] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
    margin-bottom: 6px;
}

/* Input group — ô nhập bo góc, icon nằm trong (theo design system, --radius-input = 12px). */
.login-ig[b-16e0hbb828] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider-strong);
    border-radius: 12px;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.login-ig:focus-within[b-16e0hbb828] {
    border-color: var(--app-primary);
    box-shadow: var(--app-focus-ring);
}

/* Icon trong ô — MudIcon là component con nên cần ::deep để CSS scoped chạm tới. */
.login-ig[b-16e0hbb828]  .login-ig-icon {
    width: 18px;
    height: 18px;
    color: var(--fg-3);
    flex-shrink: 0;
}

/* <InputText> render <input> ở component con → BẮT BUỘC ::deep, nếu không
   CSS isolation của Login không áp được (input giữ viền + nền autofill mặc định). */
.login-ig[b-16e0hbb828]  input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--app-text-primary);
}

.login-ig[b-16e0hbb828]  input::placeholder {
    color: var(--fg-4);
}

/* Chrome autofill — bỏ nền vàng/xanh mặc định, giữ nền card */
.login-ig[b-16e0hbb828]  input:-webkit-autofill,
.login-ig[b-16e0hbb828]  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface) inset;
    -webkit-text-fill-color: var(--app-text-primary);
    caret-color: var(--app-text-primary);
}

.login-ig-toggle[b-16e0hbb828] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

/* Hàng "Ghi nhớ đăng nhập" + "Quên mật khẩu?" */
.login-row[b-16e0hbb828] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

[b-16e0hbb828] .login-check {
    margin-left: -6px;
}

[b-16e0hbb828] .login-check .mud-typography {
    font-size: 13px;
    color: var(--fg-2);
}

.login-forgot[b-16e0hbb828] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-primary);
    text-decoration: none;
    white-space: nowrap;
}

.login-forgot:hover[b-16e0hbb828] {
    text-decoration: underline;
}

/* Primary CTA login — design source explicit dùng chữ in hoa (LoginScreen.jsx) như
   ngoại lệ flat-modern. Giữ markup "Đăng nhập" để i18n / screen reader đọc đúng,
   render in hoa thuần CSS. AppTheme.cs (Typography.Button.TextTransform = "none")
   tắt uppercase global của MudBlazor → bật lại cục bộ ở đây. */
[b-16e0hbb828] .login-btn {
    border-radius: 12px !important;
    box-shadow: var(--app-shadow-btn-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    height: 46px;
}

[b-16e0hbb828] .login-btn:hover {
    box-shadow: var(--app-shadow-btn-primary-hover) !important;
}
/* /Features/ChatNoiBo/Components/ChatComposer.razor.rz.scp.css */
/* Ô soạn tin nhắn chat — banner trả lời + khung bo tròn + đính kèm ảnh/tệp.
   Màu lấy từ palette MudBlazor (không hardcode hex theo CLAUDE.md §6). */

.reply-banner[b-f5g3d9wt76] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    border-radius: 6px;
    font-size: 0.82rem;
}

.reply-banner-text[b-f5g3d9wt76] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Khung input — chỉ chứa textarea (action buttons ở row riêng phía dưới).
   Khớp design v3 input-group: border-radius 12, padding 8/12, focus-within highlight brand. */
.composer-input[b-f5g3d9wt76] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 8px 12px;
    background-color: var(--mud-palette-surface);
    transition: border-color .15s ease;
}

.composer-input:focus-within[b-f5g3d9wt76] {
    border-color: var(--mud-palette-primary);
}

/* Hàng action dưới input — 3 nút icon + spacer + Send (khớp design v3 line 218-224). */
.composer-actions-row[b-f5g3d9wt76] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.composer-spacer[b-f5g3d9wt76] {
    flex: 1;
}

/* Icon button ghost — 4 nút composer (file/image/emoji). 32×32 bo 8, transparent bg,
   hover bg slate-100, disabled fade. InputFile overlay cần position:relative để z-index. */
.composer-icon-btn[b-f5g3d9wt76] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.composer-icon-btn:hover:not(:disabled)[b-f5g3d9wt76] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-primary);
}

.composer-icon-btn:disabled[b-f5g3d9wt76] {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-f5g3d9wt76] .composer-icon-btn .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

/* Khay tệp chờ gửi — ảnh dạng thumbnail, tài liệu dạng chip icon + tên. */
.file-tray[b-f5g3d9wt76] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.file-chip[b-f5g3d9wt76] {
    position: relative;
}

.file-chip img[b-f5g3d9wt76] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    border: 1px solid var(--mud-palette-lines-default);
    display: block;
}

.file-chip-doc[b-f5g3d9wt76] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 64px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    font-size: 0.78rem;
}

.file-chip-doc-text[b-f5g3d9wt76] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.file-chip-name[b-f5g3d9wt76] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.file-chip-size[b-f5g3d9wt76] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

.file-chip-x[b-f5g3d9wt76] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}

.file-chip-x:hover[b-f5g3d9wt76] {
    color: var(--mud-palette-error);
}

.composer-zoom-img[b-f5g3d9wt76] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    cursor: zoom-out;
}

/* Nút đính kèm — InputFile trong suốt phủ lên để vừa bấm vừa kéo-thả được. */
.attach-btn[b-f5g3d9wt76] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
}

.attach-btn:hover[b-f5g3d9wt76] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
/* /Features/ChatNoiBo/Components/ChatDirectStartDialog.razor.rz.scp.css */
/* Dialog "Cuộc trò chuyện mới" — khớp design Claude DirectMessageModal.
   Layout chung (header/search/modebar/list/row) DUPLICATE từ
   ChatGroupCreateDialog.razor.css vì Blazor CSS isolation scope theo file
   (không share giữa 2 .razor). Phần riêng của dialog này: nmm-quick (2 card
   action) và nmm-row-open (row click mở chat 1-1, không có checkbox). */

.nmm-modal-body[b-3kgxo1nkjv] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    background: var(--app-surface);
}

/* ── Header ─────────────────────────────────────────── */
.nmm-head[b-3kgxo1nkjv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--app-divider);
    flex: 0 0 auto;
}

.nmm-head-text[b-3kgxo1nkjv] {
    flex: 1;
    min-width: 0;
}

.nmm-head-title[b-3kgxo1nkjv] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--app-text-primary);
    line-height: 1.25;
}

.nmm-head-sub[b-3kgxo1nkjv] {
    font-size: 12px;
    color: var(--app-text-secondary);
    margin-top: 3px;
}

.nmm-close[b-3kgxo1nkjv] {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--slate-100);
    color: var(--fg-2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms;
}

.nmm-close:hover[b-3kgxo1nkjv] {
    background: var(--slate-200);
    color: var(--fg-1);
}

/* ── Quick action cards (đặc thù dialog Direct) ─────── */
.nmm-quick[b-3kgxo1nkjv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px 4px;
    flex: 0 0 auto;
}

.nmm-action[b-3kgxo1nkjv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 120ms, border-color 120ms, transform 120ms;
    width: 100%;
}

.nmm-action:hover:not(:disabled)[b-3kgxo1nkjv] {
    background: var(--slate-100);
    border-color: var(--brand-soft);
}

.nmm-action:active:not(:disabled)[b-3kgxo1nkjv] {
    transform: scale(0.99);
}

.nmm-action:disabled[b-3kgxo1nkjv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.nmm-action-ic[b-3kgxo1nkjv] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nmm-action-ic-group[b-3kgxo1nkjv] {
    background: color-mix(in oklab, var(--success-500) 16%, transparent);
    color: var(--success-500);
}

.nmm-action-ic-qr[b-3kgxo1nkjv] {
    background: color-mix(in oklab, var(--warning-500) 18%, transparent);
    color: var(--warning-500);
}

.nmm-action-text[b-3kgxo1nkjv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nmm-action-title[b-3kgxo1nkjv] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--app-text-primary);
}

.nmm-action-sub[b-3kgxo1nkjv] {
    font-size: 11.5px;
    color: var(--fg-3);
}

.nmm-action-go[b-3kgxo1nkjv] {
    color: var(--fg-3);
    flex-shrink: 0;
}

.nmm-action-go[b-3kgxo1nkjv]  svg {
    width: 16px;
    height: 16px;
}

/* ── Input wrapper chung ────────────────────────────── */
.nmm-input[b-3kgxo1nkjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 10px;
    transition: border-color 140ms, box-shadow 140ms;
}

.nmm-input:focus-within[b-3kgxo1nkjv] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.nmm-input input[b-3kgxo1nkjv] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--app-text-primary);
}

.nmm-input input[b-3kgxo1nkjv]::placeholder {
    color: var(--fg-4);
}

/* ── Search ─────────────────────────────────────────── */
.nmm-search[b-3kgxo1nkjv] {
    padding: 12px 20px 4px;
    flex: 0 0 auto;
}

.nmm-search-input[b-3kgxo1nkjv] {
    background: var(--app-bg);
    border-color: transparent;
}

.nmm-search-input:focus-within[b-3kgxo1nkjv] {
    background: var(--app-surface);
}

.nmm-search-ic[b-3kgxo1nkjv]  svg {
    color: var(--fg-3);
}

.nmm-search-clear[b-3kgxo1nkjv] {
    width: 22px;
    height: 22px;
    border: none;
    background: var(--slate-100);
    color: var(--fg-3);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.nmm-search-clear:hover[b-3kgxo1nkjv] {
    background: var(--slate-200);
    color: var(--fg-1);
}

.nmm-search-clear[b-3kgxo1nkjv]  svg {
    width: 12px;
    height: 12px;
}

/* ── Segmented bar ──────────────────────────────────── */
.nmm-modebar[b-3kgxo1nkjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 6px;
    flex: 0 0 auto;
}

.nmm-segmented[b-3kgxo1nkjv] {
    display: inline-flex;
    padding: 2px;
    background: var(--slate-100);
    border-radius: 8px;
}

.nmm-seg[b-3kgxo1nkjv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-3);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.nmm-seg.on[b-3kgxo1nkjv] {
    background: var(--app-surface);
    color: var(--app-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.nmm-seg[b-3kgxo1nkjv]  svg {
    width: 13px;
    height: 13px;
}

.nmm-modebar-count[b-3kgxo1nkjv] {
    margin-left: auto;
    font-size: 11px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}

/* ── People list ────────────────────────────────────── */
.nmm-list[b-3kgxo1nkjv] {
    flex: 1 1 auto;
    min-height: 200px;
    overflow-y: auto;
    padding: 4px 12px 16px;
}

.nmm-section-label[b-3kgxo1nkjv] {
    padding: 8px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nmm-empty[b-3kgxo1nkjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.nmm-empty-title[b-3kgxo1nkjv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
}

/* Row mở 1-1 — không có checkbox, có chevron phải */
.nmm-row[b-3kgxo1nkjv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 100ms, border-color 100ms;
}

.nmm-row:hover:not(:disabled)[b-3kgxo1nkjv] {
    background: var(--slate-100);
}

.nmm-row.is-busy[b-3kgxo1nkjv] {
    background: var(--brand-soft);
}

.nmm-row:disabled[b-3kgxo1nkjv] {
    cursor: not-allowed;
    opacity: 0.6;
}

.nmm-row-av[b-3kgxo1nkjv] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--app-avatar-cool-to, var(--brand));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nmm-row-info[b-3kgxo1nkjv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nmm-row-name[b-3kgxo1nkjv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-row-meta[b-3kgxo1nkjv] {
    font-size: 11.5px;
    color: var(--fg-3);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-row-go[b-3kgxo1nkjv] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    border-radius: 8px;
    flex-shrink: 0;
}

.nmm-row:hover .nmm-row-go[b-3kgxo1nkjv] {
    color: var(--fg-2);
    background: var(--app-surface);
}

/* ── Department grouping ────────────────────────────── */
.nmm-dept[b-3kgxo1nkjv] {
    margin-bottom: 4px;
}

.nmm-dept-head[b-3kgxo1nkjv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 6px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: left;
}

.nmm-dept-name[b-3kgxo1nkjv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.nmm-dept-count[b-3kgxo1nkjv] {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--fg-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
}

.nmm-dept-head[b-3kgxo1nkjv]  svg {
    width: 13px;
    height: 13px;
}

/* ── Error banner ───────────────────────────────────── */
.nmm-err[b-3kgxo1nkjv] {
    margin: 0 20px 12px;
    padding: 10px 12px;
    background: color-mix(in oklab, var(--error-500) 10%, transparent);
    color: var(--error-500);
    border: 1px solid color-mix(in oklab, var(--error-500) 28%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 560px) {
    .nmm-head[b-3kgxo1nkjv],
    .nmm-quick[b-3kgxo1nkjv],
    .nmm-search[b-3kgxo1nkjv],
    .nmm-modebar[b-3kgxo1nkjv] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .nmm-list[b-3kgxo1nkjv] {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* /Features/ChatNoiBo/Components/ChatGroupCreateDialog.razor.rz.scp.css */
/* Dialog "Tạo nhóm mới" — khớp design Claude nmm-modal.
   Wrapper width/height + override MudDialog default ở app.css
   (.chat-nmm-dialog). File này style các section của body. */

.nmm-modal-body[b-ndx8jidpdt] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    background: var(--app-surface);
}

/* ── Header ─────────────────────────────────────────── */
.nmm-head[b-ndx8jidpdt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--app-divider);
    flex: 0 0 auto;
}

.nmm-head-text[b-ndx8jidpdt] {
    flex: 1;
    min-width: 0;
}

.nmm-head-title[b-ndx8jidpdt] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--app-text-primary);
    line-height: 1.25;
}

.nmm-head-sub[b-ndx8jidpdt] {
    font-size: 12px;
    color: var(--app-text-secondary);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-close[b-ndx8jidpdt] {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--slate-100);
    color: var(--fg-2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms;
}

.nmm-close:hover[b-ndx8jidpdt] {
    background: var(--slate-200);
    color: var(--fg-1);
}

/* ── Group identity fields ──────────────────────────── */
.nmm-group-fields[b-ndx8jidpdt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--app-divider);
    flex: 0 0 auto;
}

.nmm-field[b-ndx8jidpdt] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nmm-field-label[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nmm-field-req[b-ndx8jidpdt] {
    color: var(--error-500);
}

.nmm-field-opt[b-ndx8jidpdt] {
    color: var(--fg-3);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Input wrapper chung — viền 1px + bo 10px, focus ring brand. */
.nmm-input[b-ndx8jidpdt] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 10px;
    transition: border-color 140ms, box-shadow 140ms;
}

.nmm-input:focus-within[b-ndx8jidpdt] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.nmm-input input[b-ndx8jidpdt],
.nmm-input textarea[b-ndx8jidpdt] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--app-text-primary);
    padding: 0;
}

.nmm-input input[b-ndx8jidpdt]::placeholder,
.nmm-input textarea[b-ndx8jidpdt]::placeholder {
    color: var(--fg-4);
}

.nmm-textarea-wrap[b-ndx8jidpdt] {
    height: auto;
    align-items: stretch;
    padding: 10px 12px;
}

.nmm-textarea-wrap textarea[b-ndx8jidpdt] {
    min-height: 40px;
    line-height: 1.5;
    resize: none;
}

/* ── Selected member chips ──────────────────────────── */
.nmm-chips[b-ndx8jidpdt] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.nmm-chip[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 3px;
    background: var(--brand-soft);
    border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    max-width: 220px;
}

.nmm-chip-av[b-ndx8jidpdt] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nmm-chip-name[b-ndx8jidpdt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-chip-x[b-ndx8jidpdt] {
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    color: var(--brand);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.nmm-chip-x:hover[b-ndx8jidpdt] {
    background: #fff;
    color: var(--error-500);
}

.nmm-chip-x[b-ndx8jidpdt]  svg {
    width: 12px;
    height: 12px;
}

/* ── Search ─────────────────────────────────────────── */
.nmm-search[b-ndx8jidpdt] {
    padding: 12px 20px 4px;
    flex: 0 0 auto;
}

.nmm-search-input[b-ndx8jidpdt] {
    background: var(--app-bg);
    border-color: transparent;
}

.nmm-search-input:focus-within[b-ndx8jidpdt] {
    background: var(--app-surface);
}

.nmm-search-ic[b-ndx8jidpdt]  svg {
    color: var(--fg-3);
}

.nmm-search-clear[b-ndx8jidpdt] {
    width: 22px;
    height: 22px;
    border: none;
    background: var(--slate-100);
    color: var(--fg-3);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.nmm-search-clear:hover[b-ndx8jidpdt] {
    background: var(--slate-200);
    color: var(--fg-1);
}

.nmm-search-clear[b-ndx8jidpdt]  svg {
    width: 12px;
    height: 12px;
}

/* ── View mode segmented ────────────────────────────── */
.nmm-modebar[b-ndx8jidpdt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 6px;
    flex: 0 0 auto;
}

.nmm-segmented[b-ndx8jidpdt] {
    display: inline-flex;
    padding: 2px;
    background: var(--slate-100);
    border-radius: 8px;
}

.nmm-seg[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-3);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.nmm-seg.on[b-ndx8jidpdt] {
    background: var(--app-surface);
    color: var(--app-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.nmm-seg[b-ndx8jidpdt]  svg {
    width: 13px;
    height: 13px;
}

.nmm-modebar-count[b-ndx8jidpdt] {
    margin-left: auto;
    font-size: 11px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}

/* ── People list ────────────────────────────────────── */
.nmm-list[b-ndx8jidpdt] {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    padding: 4px 12px 8px;
}

.nmm-empty[b-ndx8jidpdt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.nmm-empty-title[b-ndx8jidpdt] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
}

/* Row chọn người */
.nmm-row[b-ndx8jidpdt] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 100ms, border-color 100ms;
}

.nmm-row:hover[b-ndx8jidpdt] {
    background: var(--slate-100);
}

.nmm-row.is-picked[b-ndx8jidpdt] {
    background: var(--brand-soft);
    border-color: color-mix(in oklab, var(--brand) 22%, transparent);
}

.nmm-row.is-disabled[b-ndx8jidpdt] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.nmm-row-av[b-ndx8jidpdt] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--app-avatar-cool-to, var(--brand));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nmm-row-info[b-ndx8jidpdt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nmm-row-name[b-ndx8jidpdt] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-row-meta[b-ndx8jidpdt] {
    font-size: 11.5px;
    color: var(--fg-3);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-check[b-ndx8jidpdt] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid var(--slate-300, #CBD5E1);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    transition: background 120ms, border-color 120ms;
}

.nmm-check.on[b-ndx8jidpdt] {
    background: var(--brand);
    border-color: var(--brand);
}

.nmm-check[b-ndx8jidpdt]  svg {
    width: 14px;
    height: 14px;
}

/* ── Department grouping ────────────────────────────── */
.nmm-dept[b-ndx8jidpdt] {
    margin-bottom: 4px;
}

.nmm-dept-head-action[b-ndx8jidpdt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 6px;
}

.nmm-dept-toggle[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.nmm-dept-name[b-ndx8jidpdt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmm-dept-count[b-ndx8jidpdt] {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--fg-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
}

.nmm-dept-toggle[b-ndx8jidpdt]  svg {
    width: 13px;
    height: 13px;
}

.nmm-dept-bulk[b-ndx8jidpdt] {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand);
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.nmm-dept-bulk:hover[b-ndx8jidpdt] {
    background: var(--brand-soft);
}

/* ── Footer ─────────────────────────────────────────── */
.nmm-foot[b-ndx8jidpdt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--app-divider);
    background: var(--app-surface);
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.nmm-foot-link[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}

.nmm-foot-link:hover[b-ndx8jidpdt] {
    text-decoration: underline;
}

.nmm-foot-link[b-ndx8jidpdt]  svg {
    width: 14px;
    height: 14px;
}

.nmm-foot-spacer[b-ndx8jidpdt] {
    flex: 1;
}

/* Buttons — gọn nhẹ, khớp design (KHÔNG dùng MudButton để không vướng theme height/case). */
.nmm-btn[b-ndx8jidpdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.nmm-btn:disabled[b-ndx8jidpdt] {
    opacity: 0.55;
    cursor: not-allowed;
}

.nmm-btn-outline[b-ndx8jidpdt] {
    background: var(--app-surface);
    color: var(--app-text-primary);
    border-color: var(--app-divider);
}

.nmm-btn-outline:hover:not(:disabled)[b-ndx8jidpdt] {
    background: var(--slate-100);
}

.nmm-btn-primary[b-ndx8jidpdt] {
    background: var(--brand);
    color: #fff;
}

.nmm-btn-primary:hover:not(:disabled)[b-ndx8jidpdt] {
    background: var(--brand-hover, var(--brand));
}

.nmm-btn-primary[b-ndx8jidpdt]  svg {
    width: 14px;
    height: 14px;
}

.nmm-btn-spin[b-ndx8jidpdt] {
    color: #fff;
}

/* ── Error banner ───────────────────────────────────── */
.nmm-err[b-ndx8jidpdt] {
    margin: 0 20px 12px;
    padding: 10px 12px;
    background: color-mix(in oklab, var(--error-500) 10%, transparent);
    color: var(--error-500);
    border: 1px solid color-mix(in oklab, var(--error-500) 28%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 560px) {
    .nmm-head[b-ndx8jidpdt],
    .nmm-group-fields[b-ndx8jidpdt],
    .nmm-search[b-ndx8jidpdt],
    .nmm-modebar[b-ndx8jidpdt],
    .nmm-foot[b-ndx8jidpdt] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .nmm-list[b-ndx8jidpdt] {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* /Features/ChatNoiBo/Components/ChatGroupList.razor.rz.scp.css */
/* ChatGroupList — cột trái sidebar Chat nội bộ.
   Khớp design v4 ChatScreen.jsx ChannelRow: flat list (no section grouping),
   group avatar 2×2 grid với 3 tile initials + "+N" overflow, "Nhóm" badge.
   Token màu lấy từ app.css (--brand, --slate-*, --success-500, --warning-500…). */

.group-list[b-xdqaatkann] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Search box header — padding 14, border-bottom (khớp design v4 line 97). */
.group-search[b-xdqaatkann] {
    padding: 14px;
    border-bottom: 1px solid var(--app-divider);
    flex-shrink: 0;
}

/* MudTextField mặc định flex:1 nở ra — ghim flex:0 để giữ chiều cao tự nhiên. */
.group-search[b-xdqaatkann]  .mud-input-control {
    flex: 0 0 auto;
}

.group-list-body[b-xdqaatkann] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 6px 16px;
}

.group-empty[b-xdqaatkann] {
    padding: 24px 12px;
    text-align: center;
}

/* ── Row 1 item — 10/10 padding, border-radius 8, border-left 3px transparent (active = brand). ── */
.group-row[b-xdqaatkann] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    margin-bottom: 2px;
    transition: background 0.12s;
}

.group-row:hover[b-xdqaatkann] {
    background: var(--slate-100);
}

.group-row.selected[b-xdqaatkann] {
    background: var(--app-primary-lighten);
    border-left-color: var(--mud-palette-primary);
}

/* ── Avatar block ── */
.group-avatar[b-xdqaatkann] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* DM avatar — tròn brand-soft với initials brand (single big avatar). */
.group-avatar-dm[b-xdqaatkann] {
    border-radius: 50%;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Group avatar 2×2 grid — 3 tile initials + ô 4 "+N". Gap 1.5 nhỏ tạo cảm giác stack tiles.
   border-radius 10 trên container, overflow hidden để 4 ô góc clip vào. */
.group-avatar-stack[b-xdqaatkann] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--slate-100);
}

.group-tile[b-xdqaatkann] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
}

/* 3 tone xoay vòng cho 3 ô đầu — warning/info/success (khớp design v4 toneBg). */
.group-tile-1[b-xdqaatkann] { background: var(--mud-palette-primary); }       /* brand navy */
.group-tile-2[b-xdqaatkann] { background: var(--info-500, #2563EB); }         /* info blue */
.group-tile-3[b-xdqaatkann] { background: var(--warning-500, #F59E0B); }      /* warning amber */

/* Ô 4 overflow "+N" — brand-soft bg với chữ brand (khớp design v4 line 772-778). */
.group-tile-overflow[b-xdqaatkann] {
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

/* Ô empty placeholder (khi <4 tile, không overflow) — slate-100 nhạt. */
.group-tile-empty[b-xdqaatkann] {
    background: var(--slate-100);
}

/* ── Main content (name/time + preview/unread) ── */
.group-main[b-xdqaatkann] {
    flex: 1;
    min-width: 0;
}

.group-line1[b-xdqaatkann] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.group-name[b-xdqaatkann] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Nhóm" badge — brand-soft pill nhỏ, uppercase, icon Group 9px (khớp design v4). */
.group-kind-chip[b-xdqaatkann] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    padding: 1px 5px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

[b-xdqaatkann] .group-kind-chip .mud-icon-root {
    width: 9px !important;
    height: 9px !important;
    font-size: 9px !important;
}

.group-time[b-xdqaatkann] {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.group-time.unread[b-xdqaatkann] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.group-line2[b-xdqaatkann] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.group-preview[b-xdqaatkann] {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-preview.unread[b-xdqaatkann] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* Unread count badge — pill brand bg với chữ trắng, min-width 16. */
.group-unread[b-xdqaatkann] {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /Features/ChatNoiBo/Components/ChatInfoPanel.razor.rz.scp.css */
/* ChatInfoPanel — cột phải sidebar Chat nội bộ.
   Khớp design v3 ui_kits/web/ChatScreen.jsx <div className="chat-aside">.
   Layout: header centered → members card → 3 section divider top.
   Token màu lấy từ app.css (--brand-soft, --slate-25, --fg-3, border-1).
   CSS isolation: tất cả là <div>/<span>/<button> thuần → scope attribute áp trực tiếp,
   không cần ::deep cho rule root. */

.chat-info-panel[b-8hof7vcldu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

/* ── Header centered — avatar 56px + tên 15bold + mô tả 12 secondary + 3 nút action ── */
.chat-info-head[b-8hof7vcldu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--app-divider);
    flex-shrink: 0;
}

/* Avatar lớn — hộp brand-soft với icon brand chính giữa. */
.chat-info-avatar[b-8hof7vcldu] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

[b-8hof7vcldu] .chat-info-avatar .mud-icon-root {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
}

.chat-info-name[b-8hof7vcldu] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.chat-info-desc[b-8hof7vcldu] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

/* 3 nút action ngang — bell mute / star pin / settings. */
.chat-info-actions[b-8hof7vcldu] {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.chat-info-action-btn[b-8hof7vcldu] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--app-divider);
    background: var(--app-surface);
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chat-info-action-btn:hover:not(:disabled)[b-8hof7vcldu] {
    background: var(--app-primary-lighten);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chat-info-action-btn:disabled[b-8hof7vcldu] {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-8hof7vcldu] .chat-info-action-btn .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

/* ── Card "Thành viên" — clickable mở dialog. Slate bg, rounded, icon + count + chev ── */
.chat-info-members-card[b-8hof7vcldu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 14px;
    background: var(--slate-25);
    border: 1px solid var(--app-divider);
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.chat-info-members-card:hover[b-8hof7vcldu] {
    background: var(--app-primary-lighten);
    border-color: var(--mud-palette-primary);
}

.chat-info-members-icon[b-8hof7vcldu] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-8hof7vcldu] .chat-info-members-icon .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

.chat-info-members-text[b-8hof7vcldu] {
    flex: 1;
    min-width: 0;
}

.chat-info-members-label[b-8hof7vcldu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.chat-info-members-sub[b-8hof7vcldu] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.chat-info-members-count[b-8hof7vcldu] {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

[b-8hof7vcldu] .chat-info-members-chev {
    color: var(--mud-palette-text-secondary);
    width: 14px !important;
    height: 14px !important;
}

/* ── Section chung (ẢNH/VIDEO, FILE, LINK) ── */
.chat-info-section[b-8hof7vcldu] {
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--app-divider);
    flex-shrink: 0;
}

.chat-info-section-head[b-8hof7vcldu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.chat-info-section-title[b-8hof7vcldu] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.chat-info-section-more[b-8hof7vcldu] {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.chat-info-section-more:disabled[b-8hof7vcldu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-info-section-more:hover:not(:disabled)[b-8hof7vcldu] {
    text-decoration: underline;
}

/* Empty state — placeholder khi chưa wire backend hoặc nhóm chưa có media. */
.chat-info-empty[b-8hof7vcldu] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 4px 0;
}
/* /Features/ChatNoiBo/Components/ChatPanel.razor.rz.scp.css */
/* ChatPanel — cột giữa Chat nội bộ. Khớp design v3 ui_kits/web/ChatScreen.jsx
   chat-main: header (avatar + name + sub + actions) → search bar → scroll messages
   với "Hôm nay" chip → typing indicator → composer footer.

   Root <div> thuần (không MudPaper) — CSS isolation áp đúng height/flex.
   Tokens lấy từ app.css (--app-divider, --slate-25/100, --app-primary-lighten…). */

.chat-panel[b-pralgv9ujx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-empty-state[b-pralgv9ujx] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
}

/* ── Header — padding 12/18, border-bottom, flex row gap 10, avatar 32 ── */
.chat-panel-head[b-pralgv9ujx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--app-divider);
    flex-shrink: 0;
}

/* Avatar circle 32px — `#` cho channel, initials cho group/DM (warm tone). */
.chat-panel-head-avatar[b-pralgv9ujx] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* DM 1-1 → avatar tròn warm (coral) như requester ở TicketDetail. */
.chat-panel-head-avatar-dm[b-pralgv9ujx] {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-avatar-warm-from), var(--app-avatar-warm-to));
    color: white;
}

/* Icon trong avatar (cho non-DM) — size 16px brand color. */
[b-pralgv9ujx] .chat-panel-head-avatar .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: var(--mud-palette-primary);
}

.chat-panel-head-text[b-pralgv9ujx] {
    flex: 1;
    min-width: 0;
}

.chat-panel-head-title-row[b-pralgv9ujx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-panel-head-name[b-pralgv9ujx] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Pinned chip "Đã ghim" — brand-soft pill nhỏ. */
.chat-panel-head-pin-chip[b-pralgv9ujx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

[b-pralgv9ujx] .chat-panel-head-pin-chip .mud-icon-root {
    width: 10px !important;
    height: 10px !important;
    font-size: 10px !important;
}

.chat-panel-head-sub[b-pralgv9ujx] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Khung tin nhắn cuộn ── */
.chat-scroll[b-pralgv9ujx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    background-color: var(--mud-palette-background-grey);
    display: flex;
    flex-direction: column;
}

/* Date chip "Hôm nay" — pill slate-100 căn giữa đầu timeline. */
.chat-date-chip-wrap[b-pralgv9ujx] {
    text-align: center;
    margin: 4px 0 16px;
    flex-shrink: 0;
}

.chat-date-chip[b-pralgv9ujx] {
    display: inline-block;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    background: var(--slate-100);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.chat-typing[b-pralgv9ujx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 18px;
    flex-shrink: 0;
}

/* ── Footer composer ── */
.chat-panel-foot[b-pralgv9ujx] {
    padding: 14px 18px;
    border-top: 1px solid var(--app-divider);
    flex-shrink: 0;
}

.chat-no-send[b-pralgv9ujx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* ── Search panel ── */
.chat-search-panel[b-pralgv9ujx] {
    padding: 10px 18px;
    border-bottom: 1px solid var(--app-divider);
    background: var(--slate-25);
    flex-shrink: 0;
}

.chat-search-list[b-pralgv9ujx] {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 6px;
}

.chat-search-item[b-pralgv9ujx] {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.chat-search-item:hover[b-pralgv9ujx] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.chat-search-snippet[b-pralgv9ujx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Features/ChatNoiBo/Components/ChatTimeline.razor.rz.scp.css */
/* Timeline chat nội bộ — bong bóng 2 phía, gom nhóm tin liền kề, trích dẫn + biểu cảm
   + ảnh + tệp. Màu lấy từ palette MudBlazor (không hardcode hex theo CLAUDE.md §6). */

.chat-feed[b-sypjw5xzm8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 960px;
    align-self: center;
}

.chat-feed > :first-child[b-sypjw5xzm8] {
    margin-top: 0;
}

/* Trạng thái rỗng — nhóm chưa có tin nhắn. */
.chat-empty[b-sypjw5xzm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 56px 16px;
    text-align: center;
}

/* Row chat — avatar TOP-aligned (flex-start), gap 10. Mine = row-reverse → avatar
   bên phải, content bên trái. Khớp design v3 .msg-row + .is-me. */
.chat-row[b-sypjw5xzm8] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
}

/* Tin liền kề cùng người gửi — sát lại, avatar slot vẫn giữ width để cụm thẳng hàng. */
.chat-row.grouped[b-sypjw5xzm8] {
    margin-top: 2px;
}

/* Mine: row-reverse để avatar nằm bên phải, content cuộn về phải.
   Content alignment cụ thể (text right) xử lý ở .chat-col.mine. */
.chat-row.mine[b-sypjw5xzm8] {
    flex-direction: row-reverse;
}

.chat-log[b-sypjw5xzm8] {
    margin: 8px 0;
}

/* Ô giữ chỗ avatar — luôn rộng cố định để bong bóng gom nhóm thẳng hàng. */
.chat-avatar-slot[b-sypjw5xzm8] {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.chat-col[b-sypjw5xzm8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 80%;
    min-width: 0;
}

.chat-col.mine[b-sypjw5xzm8] {
    align-items: flex-end;
}

.chat-col.other[b-sypjw5xzm8] {
    align-items: flex-start;
}

/* Meta row trên bubble — name + time inline, font-size 13/11.
   Khớp design v3 .msg-meta: name bold + time secondary cùng dòng. */
.chat-meta[b-sypjw5xzm8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.chat-name[b-sypjw5xzm8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.chat-time[b-sypjw5xzm8] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

/* Mine — meta dồn về phải, order: [time] [Bạn] (Bạn gần avatar TT). */
.chat-col.mine .chat-meta[b-sypjw5xzm8] {
    justify-content: flex-end;
}

.chat-bubble[b-sypjw5xzm8] {
    padding: 8px 12px;
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Bubble "other" — slate-100 bg (xám nhạt) cho dễ phân biệt với scroll bg.
   Khớp design v3 ChatScreen.jsx .msg-bubble (default tone). */
.chat-bubble.other[b-sypjw5xzm8] {
    background-color: var(--slate-100);
    color: var(--mud-palette-text-primary);
    border-bottom-left-radius: 4px;
}

/* Bubble "mine" — SOLID navy + white text (không phải 16% mix nhạt).
   Khớp design v3 .msg-bubble.bubble-me. */
.chat-bubble.mine[b-sypjw5xzm8] {
    background-color: var(--mud-palette-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

/* Link bên trong bubble mine — chỉnh contrast vì nền navy. */
.chat-bubble.mine a[b-sypjw5xzm8] {
    color: white;
    text-decoration: underline;
}

/* Tin đã thu hồi — nền mờ, chữ nghiêng xám. */
.chat-bubble.recalled[b-sypjw5xzm8] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Tin được nhảy tới (từ tìm kiếm / bấm trích dẫn) — viền vàng giữ ~1.5s rồi tự mờ. */
.chat-bubble.highlighted[b-sypjw5xzm8] {
    animation: chat-highlight-fade-b-sypjw5xzm8 3.5s ease-out forwards;
}

@keyframes chat-highlight-fade-b-sypjw5xzm8 {
    0%, 45% { box-shadow: 0 0 0 3px var(--mud-palette-warning); }
    100%    { box-shadow: 0 0 0 3px transparent; }
}

/* Giữ xuống dòng người dùng nhập trong nội dung tin nhắn. */
.chat-text-prewrap[b-sypjw5xzm8] {
    white-space: pre-wrap;
}

/* Trích dẫn reply-to — BLOCK RIÊNG phía trên bubble (không nằm trong bubble nữa).
   Khớp design v3 .msg-replyto: bar trái 3px brand + name bold + text snippet trên 1 dòng. */
.chat-quote-row[b-sypjw5xzm8] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: var(--slate-25);
    border-radius: 8px;
    cursor: pointer;
    max-width: 100%;
    transition: background 0.15s;
}

.chat-quote-row:hover[b-sypjw5xzm8] {
    background: var(--slate-100);
}

.chat-quote-bar[b-sypjw5xzm8] {
    width: 3px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

.chat-quote-body[b-sypjw5xzm8] {
    flex: 1;
    min-width: 0;
}

.chat-quote-name[b-sypjw5xzm8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.chat-quote-text[b-sypjw5xzm8] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ảnh đính kèm — lưới thumbnail vuông, bấm để phóng to. */
.chat-images[b-sypjw5xzm8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-img[b-sypjw5xzm8] {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    display: block;
}

.chat-img:hover[b-sypjw5xzm8] {
    opacity: 0.9;
}

.chat-zoom-img[b-sypjw5xzm8] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    cursor: zoom-out;
}

/* Nút đóng lightbox — luôn hiện ở góc, hỗ trợ bàn phím/screen reader. */
.chat-zoom-close[b-sypjw5xzm8] {
    position: fixed;
    top: 16px;
    right: 16px;
}

/* File attachment block — TÁCH RIÊNG sau bubble (khớp design v3 .msg-attach).
   Card trắng với border + icon ext + name/size + download icon bên phải.
   Variant .mine = border navy nhạt + bg trắng (vẫn nổi trên xám), nằm bên phải column. */
.chat-file-block[b-sypjw5xzm8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 4px;
    border: 1px solid var(--app-divider);
    border-radius: 10px;
    background: var(--app-surface);
    text-decoration: none;
    color: inherit;
    min-width: 220px;
    max-width: 320px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.chat-file-block:hover[b-sypjw5xzm8] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.chat-file-ic[b-sypjw5xzm8] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--slate-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-file-meta[b-sypjw5xzm8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.chat-file-name[b-sypjw5xzm8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-file-size[b-sypjw5xzm8] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

[b-sypjw5xzm8] .chat-file-dl {
    color: var(--mud-palette-text-secondary);
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

/* Dãy chip biểu cảm dưới bong bóng — khớp design v3 .msg-reactions:
   chip pill 22px, ô đầu = emoji + count, nút "+" cuối để mở popover thêm. */
.chat-reactions[b-sypjw5xzm8] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.reaction-chip[b-sypjw5xzm8] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--app-divider);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.reaction-chip:hover:not(:disabled)[b-sypjw5xzm8] {
    background: var(--slate-100);
}

.reaction-chip.active[b-sypjw5xzm8] {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.reaction-chip:disabled[b-sypjw5xzm8] {
    cursor: default;
    opacity: 0.6;
}

.reaction-emoji[b-sypjw5xzm8] {
    font-size: 13px;
    line-height: 1;
}

.reaction-count[b-sypjw5xzm8] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.reaction-chip.active .reaction-count[b-sypjw5xzm8] {
    color: var(--mud-palette-primary);
}

/* Nút "+" thêm reaction — chip rỗng, padding hẹp, icon nhạt. */
.reaction-chip-add[b-sypjw5xzm8] {
    padding: 0 6px;
    color: var(--mud-palette-text-secondary);
}

[b-sypjw5xzm8] .reaction-chip-add .mud-icon-root {
    width: 12px !important;
    height: 12px !important;
}

/* .chat-foot bỏ — time đã nằm trong .chat-meta trên bubble; actions tách thành
   .chat-actions hiển thị hover bên cạnh bubble. Giữ rule này empty làm placeholder
   để không vỡ render Pending (đang gửi) đang dùng class này. */
.chat-foot[b-sypjw5xzm8] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.chat-sending[b-sypjw5xzm8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.chat-retry[b-sypjw5xzm8] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-error);
}

/* Wrapper bubble + actions popover — relative để .chat-actions absolute float bên cạnh.
   inline-flex: bubble tự fit content + actions không chiếm dòng riêng. */
.chat-bubble-wrap[b-sypjw5xzm8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* Wrap rỗng (tin chỉ có file, không text/ảnh) — vẫn giữ vùng hover cho actions. */
.chat-bubble-wrap-empty[b-sypjw5xzm8] {
    min-height: 24px;
    min-width: 32px;
}

.chat-col.mine .chat-bubble-wrap[b-sypjw5xzm8] {
    flex-direction: row-reverse;
}

/* Pill nổi 3 nút action — khớp design v3 .msg-actions:
   position absolute, top center, bg surface bo tròn 999px + shadow nhẹ.
   Ẩn mặc định (visibility:hidden để KHÔNG nhận focus bàn phím / screen reader),
   hiện khi hover toàn bộ .chat-row. */
.chat-actions[b-sypjw5xzm8] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--app-divider);
    border-radius: 999px;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 42, .08);
    z-index: 2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

/* Other (bên trái) → actions float bên PHẢI bubble. */
.chat-col.other .chat-actions[b-sypjw5xzm8] {
    left: 100%;
    margin-left: 8px;
}

/* Mine (bên phải) → actions float bên TRÁI bubble. */
.chat-col.mine .chat-actions[b-sypjw5xzm8] {
    right: 100%;
    margin-right: 8px;
}

.chat-row:hover .chat-actions[b-sypjw5xzm8] {
    opacity: 1;
    visibility: visible;
}

/* Khi popover emoji đang mở → giữ pill hiện luôn dù chuột rời khỏi row. */
.chat-actions:has(.chat-emoji-pop)[b-sypjw5xzm8] {
    opacity: 1;
    visibility: visible;
}

/* Thiết bị cảm ứng (không hover) — luôn hiện. */
@media (hover: none) {
    .chat-actions[b-sypjw5xzm8] {
        opacity: 1;
        visibility: visible;
    }
}

/* Nút round trong pill — 26px, transparent, hover slate. */
.chat-action-btn[b-sypjw5xzm8] {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 120ms, color 120ms;
}

.chat-action-btn:hover:not(:disabled)[b-sypjw5xzm8] {
    background: var(--slate-100);
    color: var(--mud-palette-text-primary);
}

.chat-action-btn.is-active[b-sypjw5xzm8] {
    background: var(--brand-soft);
    color: var(--mud-palette-primary);
}

.chat-action-btn:disabled[b-sypjw5xzm8] {
    cursor: default;
    opacity: 0.5;
}

[b-sypjw5xzm8] .chat-action-btn .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
}

/* Wrapper smile + popover bên dưới — relative để pop absolute neo theo nút. */
.chat-emoji-trigger-wrap[b-sypjw5xzm8] {
    position: relative;
    display: inline-flex;
}

/* Popover 4 reaction — hiện bên dưới nút smile, float trên bubble.
   bg-surface bo 999px + shadow rõ hơn (tách khỏi pill action). */
.chat-emoji-pop[b-sypjw5xzm8] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--app-divider);
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, .18);
    z-index: 3;
    white-space: nowrap;
}

/* Mine → popover lệch sang trái 1 chút để không tràn ra ngoài card. */
.chat-emoji-pop.mine[b-sypjw5xzm8] {
    left: auto;
    right: 0;
    transform: none;
}

.emoji-pick[b-sypjw5xzm8] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 999px;
    transition: background 120ms, transform 120ms;
}

.emoji-pick:hover[b-sypjw5xzm8] {
    background: var(--slate-100);
    transform: scale(1.15);
}

.emoji-pick:disabled[b-sypjw5xzm8] {
    cursor: default;
    opacity: 0.5;
}
/* /Features/ChatNoiBo/Pages/PChatNoiBo/ChatNoiBo.razor.rz.scp.css */
/* Trang Chat nội bộ — header trang + 1 card duy nhất chia 3 cột bằng CSS Grid:
   channels (trái, slate-25 bg) · main thread (giữa) · aside info (phải).
   Khớp design Shell.jsx ChatScreen.jsx + web.css .chat-grid spec. */

.chat-page[b-xbw2vl2kx9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Lấp đầy phần viewport còn lại sau AppBar 60px + container pa-6 (2×24px).
       pa-md-8 (2×32px) trừ thêm ở media query md+ bên dưới. Dùng 100dvh để
       co theo address bar mobile, tránh tràn / cuộn ngoài ở iOS Safari. */
    height: calc(100dvh - 108px);
    min-height: 480px;
}

@media (min-width: 960px) {
    .chat-page[b-xbw2vl2kx9] {
        height: calc(100dvh - 124px);
    }
}

/* Thanh tiêu đề trang — breadcrumb + tên trang (trái) + nút action (phải).
   Khớp design ChatScreen.jsx <div class="page-header"> > .crumbs + h1.page-title. */
.chat-page-head[b-xbw2vl2kx9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.chat-page-head-text[b-xbw2vl2kx9] {
    min-width: 0;
}

/* Breadcrumb nhỏ — gray fg-3, 12px, sep dấu / nhạt hơn nữa. */
.chat-crumbs[b-xbw2vl2kx9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.chat-crumbs .sep[b-xbw2vl2kx9] {
    opacity: 0.5;
}

/* Tiêu đề trang — 26px bold (h1 design) nhưng không quá nổi (giảm xuống 22px webapp). */
.chat-page-title[b-xbw2vl2kx9] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.2;
}

.chat-page-actions[b-xbw2vl2kx9] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Card grid 3 cột — khớp design web.css .chat-grid:
   - padding: 0 (3 cột tự padding riêng, không pad ngoài card)
   - height calc(100vh - 200px), min 520, max 900 (clamp tránh quá lùn/cao)
   - overflow hidden (cột tự cuộn bên trong)
   - 3 cột 260px / 1fr / 280px.
   - position relative — anchor cho mobile drawer + scrim positioning. */
.chat-card[b-xbw2vl2kx9] {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: grid;
    /* --chat-channels-width điều khiển bởi JS chat-resizer (default 300px, clamp
       220-480). Cột 2 là resize handle 6px. Cột 3 = main, cột 4 = aside 280px. */
    --chat-channels-width: 300px;
    grid-template-columns: var(--chat-channels-width) 6px 1fr 280px;
    /* Card lấp phần dọc còn lại của .chat-page (đã trừ AppBar + container pad +
       page-head + gap). min-height: 0 cho phép grid-items con dùng overflow:auto. */
    flex: 1 1 auto;
    min-height: 0;
}

/* Khi chưa chọn nhóm → ẩn aside, grid 3 cột (channels | resizer | main). */
.chat-card.no-aside[b-xbw2vl2kx9] {
    grid-template-columns: var(--chat-channels-width) 6px 1fr;
}

/* Cho phép grid item bên trong shrink để inner overflow:auto của ChatPanel chạy.
   Khớp .chat-grid > * design — bắt buộc cho timeline cuộn được. */
.chat-card > *[b-xbw2vl2kx9] {
    min-width: 0;
    min-height: 0;
}

/* Cột trái — danh sách kênh/nhóm. Nền slate nhạt + border phải làm separator,
   flex column để search bar trên + list cuộn dưới + bottom action. */
.chat-channels[b-xbw2vl2kx9] {
    display: flex;
    flex-direction: column;
    background: var(--slate-25);
    border-right: 1px solid var(--app-divider);
    overflow: hidden;
}

/* Resize handle — cột 6px giữa channels và main. Cursor col-resize, hover highlight
   bằng border 2px brand-soft. JS chat-resizer.js xử lý pointer events đổi
   --chat-channels-width trên parent .chat-card. */
.chat-resizer[b-xbw2vl2kx9] {
    cursor: col-resize;
    background: transparent;
    position: relative;
    user-select: none;
    touch-action: none;
    transition: background 0.15s;
}

/* Đường line mảnh giữa handle — visual cue cho user thấy có thể kéo. */
.chat-resizer[b-xbw2vl2kx9]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--app-divider);
    transform: translateX(-50%);
    transition: background 0.15s, width 0.15s;
}

.chat-resizer:hover[b-xbw2vl2kx9]::before,
.chat-resizer:active[b-xbw2vl2kx9]::before {
    background: var(--mud-palette-primary);
    width: 3px;
}

.chat-resizer:hover[b-xbw2vl2kx9] {
    background: var(--app-primary-lighten);
}

/* Cột giữa — header chat + messages + composer. Flex column để timeline có overflow riêng. */
.chat-main[b-xbw2vl2kx9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Cột phải — info panel. Border trái làm separator + nền surface trắng. */
.chat-aside[b-xbw2vl2kx9] {
    border-left: 1px solid var(--app-divider);
    overflow-y: auto;
    background: var(--app-surface);
}

/* Tablet ≤ 1280: ẩn aside, grid 3 cột (channels | resizer | main). */
@media (max-width: 1280px) {
    .chat-card[b-xbw2vl2kx9] {
        grid-template-columns: var(--chat-channels-width) 6px 1fr;
    }
    .chat-aside[b-xbw2vl2kx9] {
        display: none;
    }
}

/* ── Mobile drawer trigger button ──
   Ẩn trên desktop, hiện trên mobile (≤880px). Đặt absolute top-left
   của chat-card để đè lên góc trên cùng của ChatPanel header — không phá
   markup ChatPanel. */
.chat-mobile-trigger[b-xbw2vl2kx9] {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: 1px solid var(--app-divider);
    background: var(--app-surface);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.chat-mobile-trigger:hover[b-xbw2vl2kx9] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

/* Scrim — chỉ render khi mobile drawer mở (page conditional). CSS chỉ cần
   set positioning + nền tối. Click handler ở .razor. */
.chat-scrim[b-xbw2vl2kx9] {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.40);
    z-index: 29;
    cursor: pointer;
}

/* Mobile ≤ 880: chuyển channels thành drawer slide-from-left + show scrim +
   show trigger button. Khớp đúng pattern design web.css @media 880. */
@media (max-width: 880px) {
    .chat-card[b-xbw2vl2kx9] {
        /* 1 cột chính — chat-main fill width, channels overlay drawer.
           Resizer ẩn ở mobile vì drawer pattern không có column layout.
           Height đã được .chat-page lo qua flex:1, không cần set lại. */
        grid-template-columns: 1fr;
    }

    .chat-resizer[b-xbw2vl2kx9] {
        display: none;
    }

    /* Channels chuyển thành drawer absolute, ẩn mặc định (translateX -100%) */
    .chat-channels[b-xbw2vl2kx9] {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 86%;
        z-index: 30;
        background: var(--app-surface);
        border-right: 1px solid var(--app-divider);
        transform: translateX(-100%);
        transition: transform 200ms var(--ease-out, cubic-bezier(.16,1,.3,1));
        box-shadow: 4px 0 14px rgba(15, 23, 42, 0.10);
    }

    /* Khi class show-channels: drawer slide vào view + scrim hiện */
    .chat-card.show-channels .chat-channels[b-xbw2vl2kx9] {
        transform: translateX(0);
    }

    .chat-card.show-channels .chat-scrim[b-xbw2vl2kx9] {
        display: block;
    }

    /* Trigger hamburger button — hiện trên mobile */
    .chat-mobile-trigger[b-xbw2vl2kx9] {
        display: inline-flex;
    }

    /* Aside (right info) ẩn trên mobile — đã ẩn từ ≤1280 nhưng đảm bảo */
    .chat-aside[b-xbw2vl2kx9] {
        display: none;
    }
}
/* /Features/DaoTao/Pages/PChungNhanPublic/ChungNhanPublic.razor.rz.scp.css */
/* Container public verify — căn giữa + padding để render đẹp trên cả desktop/mobile.
   Không phụ thuộc MainLayout hidden states. */
.cert-public-page[b-j4v1uia5xd] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
/* /Features/DocumentViewer/Components/DocumentViewerBody.razor.rz.scp.css */
/* DocumentViewer — layout chung cho Modal + Page */

.doc-viewer-root[b-2cctypp805] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.doc-viewer-state[b-2cctypp805] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    color: var(--mud-palette-text-secondary);
}

.doc-viewer-header[b-2cctypp805] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
}

.doc-viewer-header-info[b-2cctypp805] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.doc-viewer-header-info > div[b-2cctypp805] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-viewer-header-actions[b-2cctypp805] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.doc-viewer-content[b-2cctypp805] {
    flex: 1;
    min-height: 480px;
    overflow: auto;
}

/* Frame container cho HTML/Markdown đã render */
[b-2cctypp805] .doc-viewer-html-frame {
    padding: 16px 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    line-height: 1.55;
    overflow: auto;
    max-height: 70vh;
}

[b-2cctypp805] .doc-viewer-html-frame img { max-width: 100%; height: auto; }
[b-2cctypp805] .doc-viewer-html-frame table { border-collapse: collapse; width: 100%; }
[b-2cctypp805] .doc-viewer-html-frame table th,
[b-2cctypp805] .doc-viewer-html-frame table td { border: 1px solid var(--mud-palette-lines-default); padding: 6px 10px; }

/* Plain text frame */
[b-2cctypp805] .doc-viewer-text-frame {
    padding: 12px 14px;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    max-height: 70vh;
    margin: 0;
}

/* Image viewer */
[b-2cctypp805] .doc-viewer-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 480px;
    background: repeating-conic-gradient(#f3f3f3 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
    border-radius: 6px;
}

[b-2cctypp805] .doc-viewer-image-frame img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Unsupported */
[b-2cctypp805] .doc-viewer-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px;
    text-align: center;
}
/* /Features/DocumentViewer/Pages/PDocumentView/DocumentViewerPage.razor.rz.scp.css */
.doc-viewer-page-wrapper[b-ewzxyhgi3q] {
    padding: 16px;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-viewer-page-toolbar[b-ewzxyhgi3q] {
    padding: 4px 0 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* /Features/HR/Pages/PChamCong/ChamCong.razor.rz.scp.css */
/* Chart cột stack tuần — không có MudChart phù hợp, render thủ công bằng div.
   Chỉ chứa layout; màu dùng biến --mud-palette-* inline trong .razor. */

.cc-chart[b-2ei114779l] {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    height: 220px;
    padding: 0 4px;
}

.cc-chart-col[b-2ei114779l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cc-chart-bar[b-2ei114779l] {
    display: flex;
    flex-direction: column-reverse;
    width: 38px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
}

.cc-chart-bar-weekend[b-2ei114779l] {
    background: var(--mud-palette-background-grey);
    border: 1px dashed var(--mud-palette-lines-default);
}

.cc-chart-label[b-2ei114779l] {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cc-chart-sublabel[b-2ei114779l] {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cc-chart-total[b-2ei114779l] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Mobile: bar nhỏ lại để 7 ngày fit viewport hẹp */
@media (max-width: 720px) {
    .cc-chart[b-2ei114779l] {
        height: 180px;
    }

    .cc-chart-bar[b-2ei114779l] {
        width: 26px;
        height: 140px;
    }
}

@media (max-width: 520px) {
    .cc-chart[b-2ei114779l] {
        gap: 8px;
        height: 160px;
    }

    .cc-chart-bar[b-2ei114779l] {
        width: 22px;
        height: 120px;
    }

    .cc-chart-label[b-2ei114779l] {
        font-size: 11px;
    }
}

/* /Features/Notification/Pages/PInbox/Inbox.razor.rz.scp.css */
[b-w1ctgzzl3i] .inbox-item {
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 12px 16px;
}

[b-w1ctgzzl3i] .inbox-item:last-child {
    border-bottom: none;
}

[b-w1ctgzzl3i] .inbox-unread {
    background: var(--mud-palette-action-default-hover);
}
/* /Features/Sop/Pages/PSop/Sop.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   Sop.razor.css — INTENTIONALLY EMPTY.

   Styles cho trang /sop-bieu-mau đặt trong global `wwwroot/css/sop.css`
   thay vì CSS isolation vì:
   - MudDrawer portal nội dung ra `<body>` (overlay) → mất scope attribute.
   - Một số sub-component (modal, popover) cũng portal tương tự.
   - Chuyển sang global đảm bảo styles apply nhất quán cho mọi DOM context.

   Link CSS đã thêm trong App.razor. KHÔNG thêm rule ở đây — sẽ không
   reach drawer.
   ────────────────────────────────────────────────────────────────────── */
/* /Features/TestModule/Pages/PTestModule/TestModule.razor.rz.scp.css */
/* Khung xem nội dung trích xuất — dùng biến palette MudBlazor, không hardcode màu. */

.test-module-html[b-3cvmphuwas] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px 16px;
    max-height: 480px;
    overflow: auto;
}

/* Nội dung HTML do engine sinh ra nằm trong MarkupString → cần ::deep
   để selector vượt qua CSS isolation. */
.test-module-html[b-3cvmphuwas]  table {
    border-collapse: collapse;
    margin: 8px 0;
}

.test-module-html[b-3cvmphuwas]  td,
.test-module-html[b-3cvmphuwas]  th {
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

.test-module-pre[b-3cvmphuwas] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px 16px;
    max-height: 480px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}
/* /Features/Ticket/Components/TicketDetailPanel.razor.rz.scp.css */
/* TicketDetailPanel — khớp design v2 TicketScreen.jsx TicketDetail.
   Root là <div class="td-panel"> thuần (chuyển từ MudPaper) để CSS isolation
   áp đúng padding/layout (theo DESIGN.md §5.1). */

.td-panel[b-zge8hmp0ye] {
    padding: 20px;
    /* Cho phép composer sticky-bottom bám đáy viewport khi scroll trang —
       relative tạo containing block để position:sticky tính. */
    position: relative;
}

/* Timeline cuộn nội tại — neo đáy (column-reverse), chiều cao giới hạn tránh
   chiếm hết viewport (composer sticky vẫn còn không gian hiển thị). */
.td-timeline-scroll[b-zge8hmp0ye] {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    max-height: 42vh;
    border-radius: 12px;
    background-color: var(--mud-palette-background-grey);
    padding: 8px 12px;
}

/* Composer sticky-bottom — luôn dính đáy viewport trong khi panel scroll.
   margin âm 20px = bù padding .td-panel để full-bleed; padding-top tạo
   khoảng cách trên ô input; border-top tách khỏi timeline; background
   surface để che nội dung scroll phía sau. */
.td-composer-sticky[b-zge8hmp0ye] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--app-surface);
    margin: 12px -20px -20px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--app-divider);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* ── Row 1: top chip row (ID + status + priority + SLA + actions) ── */
.td-top-row[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.td-id[b-zge8hmp0ye] {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.02em;
}

.td-top-spacer[b-zge8hmp0ye] {
    flex: 1;
    min-width: 8px;
}

/* SLA chip ở header — pill có border + bg theo state, đồng bộ với status/priority
   chip về visual weight. Token màu định nghĩa ở app.css (--app-sla-*). */
.td-sla-chip[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.td-sla-ok[b-zge8hmp0ye] {
    background: var(--app-sla-ok-bg);
    color: var(--app-sla-ok-text);
    border-color: var(--app-sla-ok-border);
}

.td-sla-warn[b-zge8hmp0ye] {
    background: var(--app-sla-warn-bg);
    color: var(--app-sla-warn-text);
    border-color: var(--app-sla-warn-border);
}

.td-sla-err[b-zge8hmp0ye] {
    background: var(--app-sla-err-bg);
    color: var(--app-sla-err-text);
    border-color: var(--app-sla-err-border);
}

.td-sla-done[b-zge8hmp0ye] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    border-color: var(--app-divider);
}

[b-zge8hmp0ye] .td-sla-chip .mud-icon-root {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

/* ── Row 2: Title big ── */
.td-title[b-zge8hmp0ye] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* ── Row 3: Meta row — chip status/priority/SLA bên trái + people row bên phải.
   Layout: chips → spacer → requester → arrow → assignee. People row tự nhóm
   lại nhờ display:flex riêng (không bị wrap rời ra). ── */
.td-meta-row[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* People row — avatar + name + arrow + avatar + name (no department/time). */
.td-people-row[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.td-avatar[b-zge8hmp0ye] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* Avatar người yêu cầu — warm tone (coral) để phân biệt với người xử lý cool. */
.td-avatar-from[b-zge8hmp0ye] {
    background: linear-gradient(135deg, var(--app-avatar-warm-from), var(--app-avatar-warm-to));
    color: white;
}

/* Avatar người xử lý — primary navy (cool tone). */
.td-avatar-to[b-zge8hmp0ye] {
    background: linear-gradient(135deg, var(--app-avatar-cool-from), var(--app-avatar-cool-to));
    color: white;
}

.td-person-name[b-zge8hmp0ye] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.td-person-meta[b-zge8hmp0ye] {
    color: var(--mud-palette-text-secondary);
}

.td-meta-sep[b-zge8hmp0ye] {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    margin: 0 2px;
}

.td-arrow[b-zge8hmp0ye] {
    margin: 0 4px;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.td-time[b-zge8hmp0ye] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

/* Nhóm hỗ trợ — chip nhẹ dưới people row khi có. */
.td-supp-group[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

[b-zge8hmp0ye] .td-supp-group .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
}

/* ── MÔ TẢ block — compact 1-row collapsible (khớp design v2).
   Collapsed (default): icon + "MÔ TẢ" + preview ellipsis + chips đính kèm + ghi chú + chevron.
   Expanded: row trên + body box bên dưới với full text + attachments. ── */
.td-desc-block[b-zge8hmp0ye] {
    border: 1px solid var(--app-divider);
    border-radius: 10px;
    background: var(--app-surface);
    overflow: hidden;
}

.td-desc-block.expanded[b-zge8hmp0ye] {
    background: var(--app-surface);
}

/* Row đứng đầu — button-style cho click toggle expand. */
.td-desc-row[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.td-desc-row:hover[b-zge8hmp0ye] {
    background: var(--mud-palette-action-default-hover);
}

[b-zge8hmp0ye] .td-desc-row .td-desc-icon {
    color: var(--mud-palette-primary);
    width: 16px !important;
    height: 16px !important;
}

.td-desc-label[b-zge8hmp0ye] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

/* Preview text — truncate 1 line khi collapsed. */
.td-desc-preview[b-zge8hmp0ye] {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.td-desc-spacer[b-zge8hmp0ye] {
    flex: 1;
    min-width: 4px;
}

/* Chip nhỏ trong row — đính kèm count, ghi chú indicator. */
.td-desc-chip[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.td-desc-chip-note[b-zge8hmp0ye] {
    background: rgba(245, 158, 11, 0.10);
    color: var(--warning-500, #F59E0B);
}

[b-zge8hmp0ye] .td-desc-chip .mud-icon-root {
    width: 13px !important;
    height: 13px !important;
}

[b-zge8hmp0ye] .td-desc-chev {
    color: var(--mud-palette-text-secondary);
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

/* Body khi expanded — đè vào dưới row, border-top divider. */
.td-desc-body[b-zge8hmp0ye] {
    padding: 14px;
    border-top: 1px solid var(--app-divider);
}

.td-desc-text[b-zge8hmp0ye] {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
}

/* Attachments list — chips dưới mô tả. */
.td-attachments[b-zge8hmp0ye] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.td-attachment[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.td-attachment:hover[b-zge8hmp0ye] {
    border-color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
}

.td-attach-ext[b-zge8hmp0ye] {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    letter-spacing: 0.04em;
}

.td-attach-name[b-zge8hmp0ye] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    white-space: nowrap;
}

.td-attach-size[b-zge8hmp0ye] {
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
}

/* ── GHI CHÚ NỘI BỘ — pinned note dành riêng cho team IT (amber/warning tone).
   Nested vào trong td-desc-body khi MÔ TẢ expanded → tiết kiệm không gian, không
   tạo block riêng. margin-top tạo khoảng cách với mô tả/attachments phía trên. ── */
.td-int-note[b-zge8hmp0ye] {
    border: 1px dashed rgba(245, 158, 11, 0.50);
    background: rgba(245, 158, 11, 0.06);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
}

.td-int-note-head[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.td-int-note-label[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warning-500, #F59E0B);
}

[b-zge8hmp0ye] .td-int-note-label .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    color: var(--warning-500, #F59E0B);
}

.td-int-note-hint[b-zge8hmp0ye] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.td-int-note-spacer[b-zge8hmp0ye] {
    flex: 1;
    min-width: 4px;
}

/* Nút Sửa — text + icon nhỏ, hiện như link mềm (không phải button rộn ràng). */
.td-int-note-edit[b-zge8hmp0ye] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--mud-palette-primary);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.td-int-note-edit:hover:not(:disabled)[b-zge8hmp0ye] {
    background: var(--app-primary-lighten);
}

.td-int-note-edit:disabled[b-zge8hmp0ye] {
    opacity: 0.55;
    cursor: not-allowed;
}

[b-zge8hmp0ye] .td-int-note-edit .mud-icon-root {
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
}

.td-int-note-body[b-zge8hmp0ye] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    padding-left: 2px;
}

.td-int-note-empty[b-zge8hmp0ye] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    font-size: 12.5px;
}

/* ── Hành động xử lý — compact row (bỏ tiêu đề, nút nhỏ, switch log bên phải). ── */
.td-actions-row[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.td-actions-buttons[b-zge8hmp0ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

/* Nén kích thước nút action (Hoàn thành / Chờ NSD / Bị chặn …) — khớp design v2. */
[b-zge8hmp0ye] .td-actions-buttons .mud-button-root {
    padding: 4px 12px !important;
    min-height: 32px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

[b-zge8hmp0ye] .td-actions-buttons .mud-button-root .mud-button-icon-start {
    margin-right: 4px;
}

[b-zge8hmp0ye] .td-actions-buttons .mud-button-root .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

[b-zge8hmp0ye] .td-actions-buttons .mud-icon-button {
    padding: 4px !important;
    width: 32px !important;
    height: 32px !important;
}
/* /Features/Ticket/Components/TicketReplyComposer.razor.rz.scp.css */
/* Ô soạn phản hồi tối giản — banner trả lời + khung bo tròn + đính kèm ảnh xem trước.
   Màu lấy từ palette MudBlazor (không hardcode hex theo CLAUDE.md §6). */

/* Banner "đang trả lời" 1 tin nhắn. */
.reply-banner[b-te498wjvg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    border-radius: 6px;
    font-size: 0.82rem;
}

.reply-banner-text[b-te498wjvg3] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle nội bộ + chip đổi trạng thái — nằm trên khung nhập. */
.composer-top[b-te498wjvg3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding: 0 4px;
}

.composer-box[b-te498wjvg3] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 6px 8px 6px 14px;
    background-color: var(--mud-palette-surface);
    transition: border-color .15s ease;
}

.composer-box:focus-within[b-te498wjvg3] {
    border-color: var(--mud-palette-primary);
}

.composer-actions[b-te498wjvg3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Khay ảnh chờ gửi — thumbnail vuông, bấm phóng to, nút ✕ bỏ ảnh. */
.img-tray[b-te498wjvg3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.img-thumb[b-te498wjvg3] {
    position: relative;
    width: 64px;
    height: 64px;
}

.img-thumb img[b-te498wjvg3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    border: 1px solid var(--mud-palette-lines-default);
}

.img-thumb-x[b-te498wjvg3] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}

.img-thumb-x:hover[b-te498wjvg3] {
    color: var(--mud-palette-error);
}

/* Ảnh phóng to trong lightbox xem trước. */
.composer-zoom-img[b-te498wjvg3] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    cursor: zoom-out;
}

/* Nút đính kèm ảnh — InputFile trong suốt phủ lên để vừa bấm vừa kéo-thả được. */
.img-add-btn[b-te498wjvg3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
}

.img-add-btn:hover[b-te498wjvg3] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
/* /Features/Ticket/Components/TicketTimeline.razor.rz.scp.css */
/* Timeline kiểu chat — bong bóng 2 phía, gom nhóm reply liền kề, trích dẫn + biểu cảm + ảnh.
   Màu lấy từ palette MudBlazor (không hardcode hex theo CLAUDE.md §6). */

.chat-feed[b-lvxd0zvrqb] {
    display: flex;
    flex-direction: column;
}

.chat-feed > :first-child[b-lvxd0zvrqb] {
    margin-top: 0;
}

.chat-row[b-lvxd0zvrqb] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 10px;
}

/* Reply liền kề cùng người gửi — sát lại, ẩn avatar/tên. */
.chat-row.grouped[b-lvxd0zvrqb] {
    margin-top: 2px;
}

.chat-row.mine[b-lvxd0zvrqb] {
    justify-content: flex-end;
}

.chat-row.other[b-lvxd0zvrqb] {
    justify-content: flex-start;
}

.chat-log[b-lvxd0zvrqb] {
    margin: 8px 0;
}

/* Ô giữ chỗ avatar — luôn rộng cố định để bong bóng gom nhóm thẳng hàng. */
.chat-avatar-slot[b-lvxd0zvrqb] {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.chat-col[b-lvxd0zvrqb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 80%;
    min-width: 0;
}

.chat-col.mine[b-lvxd0zvrqb] {
    align-items: flex-end;
}

.chat-col.other[b-lvxd0zvrqb] {
    align-items: flex-start;
}

.chat-meta[b-lvxd0zvrqb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chat-bubble[b-lvxd0zvrqb] {
    padding: 8px 12px;
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
}

.chat-bubble.other[b-lvxd0zvrqb] {
    background-color: var(--mud-palette-surface);
    border-bottom-left-radius: 4px;
}

.chat-bubble.mine[b-lvxd0zvrqb] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
    border-bottom-right-radius: 4px;
}

/* Ghi chú nội bộ IT — luôn nền vàng nhạt, đè màu phía mine/other. */
.chat-bubble.internal[b-lvxd0zvrqb] {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
}

/* Trích dẫn tin nhắn được trả lời — nằm trong bong bóng, trên nội dung. */
.chat-quote[b-lvxd0zvrqb] {
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--mud-palette-primary);
    padding: 2px 8px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    opacity: 0.8;
}

.chat-quote span[b-lvxd0zvrqb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ảnh đính kèm trong bong bóng — lưới thumbnail vuông, bấm để phóng to. */
.chat-images[b-lvxd0zvrqb] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-img[b-lvxd0zvrqb] {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    display: block;
}

.chat-img:hover[b-lvxd0zvrqb] {
    opacity: 0.9;
}

/* Ảnh phóng to trong lightbox overlay. */
.chat-zoom-img[b-lvxd0zvrqb] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    cursor: zoom-out;
}

/* Dãy chip biểu cảm dưới bong bóng. */
.chat-reactions[b-lvxd0zvrqb] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.reaction-chip[b-lvxd0zvrqb] {
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 0 8px;
    font-size: 0.78rem;
    line-height: 1.7;
    cursor: pointer;
}

.reaction-chip:hover[b-lvxd0zvrqb] {
    border-color: var(--mud-palette-primary);
}

.reaction-chip.active[b-lvxd0zvrqb] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
}

.reaction-chip:disabled[b-lvxd0zvrqb] {
    cursor: default;
    opacity: 0.6;
}

/* Hàng chân tin nhắn — thời gian (luôn hiện) + nhóm hành động (hiện khi hover). */
.chat-foot[b-lvxd0zvrqb] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Trạng thái tin đang gửi (optimistic). */
.chat-sending[b-lvxd0zvrqb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.chat-retry[b-lvxd0zvrqb] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-error);
}

.chat-actions[b-lvxd0zvrqb] {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .12s ease;
}

.chat-row:hover .chat-actions[b-lvxd0zvrqb] {
    opacity: 1;
}

/* Thiết bị cảm ứng (không hover) — luôn hiện để bấm được. */
@media (hover: none) {
    .chat-actions[b-lvxd0zvrqb] {
        opacity: 1;
    }
}

/* Nút biểu cảm nhanh trong toolbar hover. */
.emoji-pick[b-lvxd0zvrqb] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 3px;
    border-radius: 50%;
}

.emoji-pick:hover[b-lvxd0zvrqb] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}

.emoji-pick:disabled[b-lvxd0zvrqb] {
    cursor: default;
    opacity: 0.5;
}
/* /Features/Ticket/Pages/PTicketQuanLy/TicketQuanLy.razor.rz.scp.css */
/* ── Page header — breadcrumb + h1 + subtitle + actions phải.
   Khớp design TicketScreen.jsx <div class="page-header">. ── */
.ticket-page-head[b-viyd4wmk20] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-page-head-text[b-viyd4wmk20] {
    min-width: 0;
}

.ticket-crumbs[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.ticket-crumbs .sep[b-viyd4wmk20] {
    opacity: 0.5;
}

.ticket-page-title[b-viyd4wmk20] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.2;
}

.ticket-page-subtitle[b-viyd4wmk20] {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.ticket-page-actions[b-viyd4wmk20] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── 5 mini-stat cards — grid 5 cột (responsive collapse).
   Khớp design TicketScreen.jsx <MiniStat> row. ── */
.ticket-stats[b-viyd4wmk20] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.ticket-stat-card[b-viyd4wmk20] {
    padding: 14px 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 12px;
    box-shadow: var(--app-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.ticket-stat-label[b-viyd4wmk20] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ticket-stat-value[b-viyd4wmk20] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Responsive: ≤960 → 3 cột; ≤640 → 2 cột */
@media (max-width: 960px) {
    .ticket-stats[b-viyd4wmk20] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ticket-stats[b-viyd4wmk20] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Tab strip — khớp design <div class="tabs"> wrap trong card.
   Active tab có viền dưới brand + chữ brand. count badge oval nhạt.
   overflow: visible BẮT BUỘC để popover Lọc (absolute con) không bị clip
   trong cont — fallback flex-wrap cho viewport hẹp thay vì horizontal scroll. ── */
.ticket-tabs[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    overflow: visible;
    flex-wrap: wrap;
}

.ticket-tab[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ticket-tab:hover[b-viyd4wmk20] {
    color: var(--mud-palette-text-primary);
}

.ticket-tab.active[b-viyd4wmk20] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 600;
}

.ticket-tab .count[b-viyd4wmk20] {
    font-size: 11px;
    font-weight: 600;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

.ticket-tab.active .count[b-viyd4wmk20] {
    background: var(--mud-palette-primary);
    color: white;
}

/* Spacer trong tabs row — đẩy Ưu tiên + Lọc về bên phải. */
.ticket-tabs-spacer[b-viyd4wmk20] {
    flex: 1;
    min-width: 8px;
}

/* Quick select Ưu tiên — select native styled cho khớp design (height 30 fontSize 12). */
.ticket-prio-select[b-viyd4wmk20] {
    height: 30px;
    min-width: 140px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--app-surface);
    border: 1px solid var(--app-divider-strong);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.ticket-prio-select:hover[b-viyd4wmk20] {
    border-color: var(--mud-palette-primary);
}

.ticket-prio-select:focus[b-viyd4wmk20] {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: var(--app-focus-ring);
}

/* Nút "Lọc" — ghost button có badge count khi có filter áp dụng. */
.ticket-filter-btn[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.ticket-filter-btn:hover[b-viyd4wmk20] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.ticket-filter-btn.active[b-viyd4wmk20] {
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    border-color: var(--app-primary-lighten);
}

/* Badge số filter đang áp dụng — khớp design v2 (brand bg, white text, 11px). */
.ticket-filter-badge[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Wrap quanh nút Lọc + popover — position:relative để popover absolute anchor đúng. */
.ticket-filter-wrap[b-viyd4wmk20] {
    position: relative;
}

/* ====================================================================
   Bộ lọc popover (.tf-pop) — khớp design v2 TicketFilterPopover.
   Floating dropdown: absolute anchored vào nút Lọc, top:100% right:0.
   Shadow lớn, width 380, z-index 50. Header + body scroll + footer cố định.
   ==================================================================== */
.tf-pop[b-viyd4wmk20] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 12px;
    box-shadow: var(--app-shadow-pop, 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04));
    overflow: hidden;
    /* Animation slide-down nhẹ khi mở popover. */
    animation: tf-pop-in-b-viyd4wmk20 160ms var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

@keyframes tf-pop-in-b-viyd4wmk20 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header — Bộ lọc title + count chip + Xoá tất cả link */
.tf-pop-head[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-divider);
}

.tf-pop-title[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

[b-viyd4wmk20] .tf-pop-title .mud-icon-root {
    color: var(--mud-palette-primary);
}

.tf-pop-count[b-viyd4wmk20] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    padding: 2px 8px;
    border-radius: 999px;
}

.tf-clear[b-viyd4wmk20] {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.tf-clear:hover:not(:disabled)[b-viyd4wmk20] {
    color: var(--mud-palette-error);
    background: rgba(239, 68, 68, 0.06);
}

.tf-clear:disabled[b-viyd4wmk20] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Body — sections stacked, scroll khi tràn (max-height 60vh). */
.tf-pop-body[b-viyd4wmk20] {
    padding: 12px 14px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section block — header uppercase + content. */
.tf-section[b-viyd4wmk20] {
    /* Plain — no border, separated by gap */
}

.tf-section-head[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tf-section-title[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

[b-viyd4wmk20] .tf-section-title .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
}

.tf-section-count[b-viyd4wmk20] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    padding: 1px 7px;
    border-radius: 999px;
}

/* Segmented buttons trong section KHOẢNG THỜI GIAN — 4 nút equal-width
   trên 1 thanh pill xám. Active nút có nền trắng + brand color + shadow nhẹ. */
.tf-seg[b-viyd4wmk20] {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--slate-100, var(--mud-palette-action-default-hover));
    border-radius: 8px;
}

.tf-seg-btn[b-viyd4wmk20] {
    flex: 1;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.tf-seg-btn:hover:not(.on)[b-viyd4wmk20] {
    color: var(--mud-palette-text-primary);
}

.tf-seg-btn.on[b-viyd4wmk20] {
    background: var(--app-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Date inputs khi chọn "Chọn ngày" — 2 input date với sep mũi tên ở giữa. */
.tf-date-row[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.tf-date-field[b-viyd4wmk20] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.tf-date-field input[b-viyd4wmk20] {
    padding: 6px 8px;
    border: 1px solid var(--app-divider);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mud-palette-text-primary);
    background: var(--app-surface);
}

.tf-date-field input:focus[b-viyd4wmk20] {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: var(--app-focus-ring);
}

.tf-date-sep[b-viyd4wmk20] {
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
    align-self: flex-end;
    padding-bottom: 6px;
}

/* Search input trong section (Phòng ban) — input compact với icon. */
.tf-search[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 8px;
    margin-bottom: 8px;
}

.tf-search input[b-viyd4wmk20] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

[b-viyd4wmk20] .tf-search .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    width: 14px !important;
    height: 14px !important;
}

/* Dept list — scroll khi quá 5 item, mỗi item là label có checkbox + tên. */
.tf-dept-list[b-viyd4wmk20] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--app-divider);
    border-radius: 8px;
    background: var(--app-surface);
}

.tf-dept-item[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--app-divider);
}

.tf-dept-item:last-child[b-viyd4wmk20] {
    border-bottom: none;
}

.tf-dept-item:hover[b-viyd4wmk20] {
    background: var(--mud-palette-action-default-hover);
}

.tf-dept-item.on[b-viyd4wmk20] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.tf-dept-item input[type="checkbox"][b-viyd4wmk20] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.tf-empty[b-viyd4wmk20] {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Chip wrap — 8px gap, flex wrap. Dùng cho SLA + assignee chip rows. */
.tf-chip-wrap[b-viyd4wmk20] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tf-chip[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--app-divider-strong);
    background: var(--app-surface);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tf-chip:hover[b-viyd4wmk20] {
    border-color: var(--mud-palette-primary);
}

.tf-chip.on[b-viyd4wmk20] {
    border-color: var(--mud-palette-primary);
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* SLA dot — màu theo state, hiển thị bên trái label. */
.tf-dot[b-viyd4wmk20] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tf-sla-ok .tf-dot[b-viyd4wmk20] { background: var(--success-500, #16A34A); }
.tf-sla-warn .tf-dot[b-viyd4wmk20] { background: var(--warning-500, #F59E0B); }
.tf-sla-err .tf-dot[b-viyd4wmk20] { background: var(--error-500, #EF4444); }

/* Assignee chip — avatar tròn + tên, "Chưa phân công" có avatar `?`. */
.tf-chip-person[b-viyd4wmk20] {
    padding-left: 4px;  /* avatar đã có border tạo cảm giác gap */
}

.tf-avatar[b-viyd4wmk20] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.tf-avatar-none[b-viyd4wmk20] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.tf-chip-person.on .tf-avatar[b-viyd4wmk20] {
    background: var(--mud-palette-primary);
    color: white;
}

/* Toggle row — "Chỉ ticket có phản hồi mới" có icon + switch bên phải. */
.tf-toggle-row[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
}

.tf-toggle-label[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

[b-viyd4wmk20] .tf-toggle-label .mud-icon-root {
    color: var(--mud-palette-primary);
    width: 14px !important;
    height: 14px !important;
}

/* Footer — Đóng + Áp dụng cố định dưới đáy popover. */
.tf-pop-foot[b-viyd4wmk20] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--app-divider);
    background: var(--app-surface);
}

/* ── Danh sách ticket — bao card với border-radius, scroll bên trong.
   Khớp design v2 .card.ticket-list-col. ── */
/* Panel bao danh sách + paging — chiều cao cố định, paging dính đáy nhờ
   flex column + flex-shrink:0. List scroll nội bộ; paging KHÔNG bị cuộn theo. */
.ticket-list-panel[b-viyd4wmk20] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 320px);
    min-height: 420px;
    background: var(--app-surface);
    border: 1px solid var(--app-divider);
    border-radius: 12px;
    overflow: hidden;
}

/* List items — flex 1 chiếm phần còn lại sau khi paging chiếm chỗ ở đáy. */
.ticket-list[b-viyd4wmk20] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Paging footer — sticky bottom của panel (flex-shrink:0 nên không co lại). */
.ticket-list-paging[b-viyd4wmk20] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--app-divider);
    background: var(--app-surface);
}

/* ── Ticket row — 3 cột (avatar | main | right). Khớp design v2 TicketRow:
   padding 14/16, borderLeft 3px transparent → brand khi selected, bottom 1px divider. ── */
.ticket-row[b-viyd4wmk20] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-divider);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ticket-row:last-child[b-viyd4wmk20] {
    border-bottom: none;
}

.ticket-row:hover[b-viyd4wmk20] {
    background-color: var(--mud-palette-action-default-hover);
}

.ticket-row.selected[b-viyd4wmk20] {
    background-color: var(--app-primary-lighten);
    border-left-color: var(--mud-palette-primary);
}

/* Avatar tròn 32x32 với initials — màu nền brand-soft, chữ brand. */
.ticket-row-avatar[b-viyd4wmk20] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-primary-lighten);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 2px;
}

/* Cột giữa — flex 1, min-width 0 để text-overflow chạy. */
.ticket-row-main[b-viyd4wmk20] {
    flex: 1;
    min-width: 0;
}

.ticket-row-id-line[b-viyd4wmk20] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

/* ID mã ticket — font mono nhỏ, gray, weight 600. */
.ticket-row-id[b-viyd4wmk20] {
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* Dot chấm xanh — chỉ báo có phản hồi mới (khớp design unread indicator). */
.ticket-row-dot[b-viyd4wmk20] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

.ticket-row-title[b-viyd4wmk20] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
    /* 2 dòng tối đa + ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-row-meta[b-viyd4wmk20] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-row-badges[b-viyd4wmk20] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* SLA chip — pill có border + bg theo state (token --app-sla-* ở app.css). */
.ticket-row-sla[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.ticket-row-sla-ok[b-viyd4wmk20] {
    background: var(--app-sla-ok-bg);
    color: var(--app-sla-ok-text);
    border-color: var(--app-sla-ok-border);
}

.ticket-row-sla-warn[b-viyd4wmk20] {
    background: var(--app-sla-warn-bg);
    color: var(--app-sla-warn-text);
    border-color: var(--app-sla-warn-border);
}

.ticket-row-sla-err[b-viyd4wmk20] {
    background: var(--app-sla-err-bg);
    color: var(--app-sla-err-text);
    border-color: var(--app-sla-err-border);
}

.ticket-row-sla-done[b-viyd4wmk20] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    border-color: var(--app-divider);
}

/* Icon trong SLA chip nhỏ 12px — ::deep tới MudIcon root vì là child component. */
[b-viyd4wmk20] .ticket-row-sla .mud-icon-root {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

/* "Phản hồi mới" indicator — link-style nhỏ màu brand. */
.ticket-row-reply[b-viyd4wmk20] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.ticket-row-reply[b-viyd4wmk20]::before {
    content: '💬';
    font-size: 10px;
}

/* Cột phải — time + assignee avatar, căn phải, gap dọc. */
.ticket-row-right[b-viyd4wmk20] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    min-height: 60px;
}

.ticket-row-time[b-viyd4wmk20] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Assignee avatar nhỏ 24x24 — khác màu (brand-accent teal) để phân biệt với người yêu cầu. */
.ticket-row-assignee[b-viyd4wmk20] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mud-palette-secondary, #4E8EA2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
/* /Layout/Components/ContentLoading.razor.rz.scp.css */
/* ContentLoading – spinner trong content area của page */

.cl-wrap[b-3rc3dubq2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
    min-height: 200px;
    width: 100%;
}

.cl-spinner[b-3rc3dubq2i] {
    opacity: 0.85;
}

.cl-msg[b-3rc3dubq2i] {
    opacity: 0.65;
    text-align: center;
}
/* /Layout/Components/FullPageLoading.razor.rz.scp.css */
/* FullPageLoading – overlay toàn màn hình */

.fpl-overlay[b-obnuo6a8t8] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background, var(--app-bg));
    z-index: 9999;
}

.fpl-card[b-obnuo6a8t8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 48px;
    background: var(--mud-palette-surface, var(--app-surface));
    border-radius: 16px;
    box-shadow: var(--app-shadow-overlay-card);
    min-width: 240px;
}

.fpl-icon-wrap[b-obnuo6a8t8] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary, var(--app-primary));
    border-radius: 14px;
    color: var(--app-surface);
    margin-bottom: 4px;
}

.fpl-hex-icon[b-obnuo6a8t8] {
    width: 32px;
    height: 32px;
}

.fpl-title[b-obnuo6a8t8] {
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.3px;
}

.fpl-progress[b-obnuo6a8t8] {
    width: 160px;
    margin: 4px 0 !important;
}

.fpl-msg[b-obnuo6a8t8] {
    opacity: 0.7;
}
/* /Layout/LoginLayout.razor.rz.scp.css */
/* LoginLayout — full viewport background, căn giữa nội dung trang public (Login/ForgotPassword) */

.login-main-content[b-gphpph9jvq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--app-auth-bg-gradient);
}

/* Mobile: giảm padding để card đỡ co quá hẹp ở viewport < 480px */
@media (max-width: 480px) {
    .login-main-content[b-gphpph9jvq] {
        padding: 16px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Top navigation loading bar */
.crm-nav-progress-bar[b-iff22ytm7o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
}

.app-main-content[b-iff22ytm7o] {
    min-height: 100vh;
    background: var(--mud-palette-background);
    /* Topbar 60px theo design source (Shell.jsx grid-template-rows: 60px 1fr).
       Đã sửa từ 64px (MudBlazor default) → 60px để cùng tone shell mới. */
    padding-top: 60px;
}

/* AppBar — chiều cao 60px khớp design Shell.jsx (.topbar grid-row 60px).
   MudBlazor mặc định 64px, override bằng !important để cả content top-level +
   các selector chiều cao của mud-toolbar (con) đều theo. */
.crm-app-bar[b-iff22ytm7o] {
    box-shadow: var(--app-shadow-appbar) !important;
    z-index: 1300;
    height: 60px !important;
    min-height: 60px !important;
}

/* Toolbar bên trong AppBar — height 60 + padding & gap đúng design Shell.jsx:
   .topbar { padding: 0 20px; gap: 16px; } (web.css). KHÔNG có rule này thì
   nội dung topbar bị MudBlazor cấu hình spacing khác → menu/search/avatar
   sát vào nhau hoặc lệch baseline. */
[b-iff22ytm7o] .crm-app-bar .mud-toolbar {
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 20px !important;
    gap: 16px;
}

/* Drawer kéo dài full viewport — sidebar full-height giống design Shell.jsx
   (grid-area: sidebar trải qua 2 grid-row "sidebar topbar" + "sidebar content").
   MudBlazor với ClipMode="Never" đã set top:0, đây là rule defensive phòng khi
   theme/version cập nhật. Cùng tone shadow + không border-right (đã có ở rule
   .crm-drawer phía dưới). */
[b-iff22ytm7o] .crm-drawer.mud-drawer-fixed {
    top: 0 !important;
    height: 100vh !important;
}

/* Search bar — khớp design Shell.jsx .topbar-search.
   Là <div> thuần trong .razor → CSS isolation scope attribute áp trực tiếp,
   KHÔNG cần !important nữa, không bị MudBlazor base CSS lấn. */
.crm-search-bar[b-iff22ytm7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mud-palette-background-grey);
    padding: 0 14px;
    height: 38px;
    flex: 1 1 0%;
    min-width: 320px;
    max-width: 520px;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Phòng khi viewport < 640px: cho phép bar co xuống tối thiểu 180px để không
   tràn dòng — placeholder ngắn lại thay vì xuống dòng. */
@media (max-width: 640px) {
    .crm-search-bar[b-iff22ytm7o] {
        min-width: 180px !important;
    }
    .crm-search-kbd[b-iff22ytm7o] {
        display: none;
    }
}

.crm-search-bar:hover[b-iff22ytm7o] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten);
}

/* Chip kbd "Ctrl + K" — nền slate-200, font mono nhỏ, pad 2/6 bo nhẹ.
   Khớp .topbar-search .kbd của design source. */
.crm-search-kbd[b-iff22ytm7o] {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    background: var(--slate-200);
    color: var(--app-text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Placeholder text — flex:1 để fill khoảng giữa, ép kbd chip ra sát phải.
   Thay cho <MudSpacer /> trong markup cũ. */
.crm-search-placeholder[b-iff22ytm7o] {
    flex: 1;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User stack — khớp design Shell.jsx .topbar-user: bo pill 999px, info căn phải
   đứng TRƯỚC avatar (đảo so với layout cũ). Avatar tròn ở giữa, chevron cuối. */
.crm-user-stack[b-iff22ytm7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    transition: background 0.15s;
}

.crm-user-stack:hover[b-iff22ytm7o] {
    background: var(--mud-palette-action-default-hover);
}

/* Info căn PHẢI vì stack đảo: text → avatar → chevron, text phải nằm sát avatar
   bằng cách align-right. line-height 1.25 ép gọn 2 dòng (name + role). */
.crm-user-info[b-iff22ytm7o] {
    text-align: right;
    line-height: 1.25;
}

.crm-user-name[b-iff22ytm7o] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.crm-user-role[b-iff22ytm7o] {
    font-size: 12px;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.crm-avatar-text[b-iff22ytm7o] {
    font-size: 14px;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   DRAWER ROOT — phải dùng ::deep vì MudDrawer KHÔNG forward scope
   attribute b-xxx đến <aside> root. Rule `.crm-drawer { ... }` không
   ::deep sẽ compile thành `.crm-drawer[b-xxx]` → KHÔNG match → fail.

   MiniWidth (76px) set qua parameter `<MudDrawer MiniWidth="76px">`,
   KHÔNG override qua CSS var ở đây (var rule cùng bị scope-attribute
   issue như rules khác).

   Override default `.mud-drawer { overflow-y: auto }` để header + footer
   không cuộn theo nav (nav có fixed height cuộn nội bộ).
   ────────────────────────────────────────────────────────────────── */
[b-iff22ytm7o] .crm-drawer {
    box-shadow: var(--app-shadow-drawer) !important;
    border-right: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Logo header — flex-shrink:0 đứng yên đỉnh drawer. KHÔNG cần sticky vì
   nav đã có fixed height riêng cuộn nội bộ, header tự đứng yên do flex flow. */
.crm-drawer-header[b-iff22ytm7o] {
    flex-shrink: 0 !important;
}

/* Nav menu — height CỐ ĐỊNH theo viewport, KHÔNG dùng flex:1 (kém tin cậy
   khi MudDrawer có inner wrapper). 100vh - 60px (header) - 1px (divider) -
   48px (collapse btn) ≈ 100vh - 110px. overflow-y:auto cuộn nội bộ. */
[b-iff22ytm7o] .crm-drawer .crm-nav.mud-nav-menu {
    height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Footer collapse + divider — flex-shrink:0 dính đáy. */
.crm-collapse-btn[b-iff22ytm7o] {
    flex-shrink: 0 !important;
}

[b-iff22ytm7o] .crm-drawer-divider {
    flex-shrink: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────
   MINI STATE — khi MudDrawer ở Variant=Mini và Open=false. Class CHÍNH
   XÁC của MudBlazor là `.mud-drawer--closed` (2 dấu gạch ngang!) + tổ
   hợp với `.mud-drawer-mini`, KHÔNG phải `.mud-drawer-mini-left-closed`.
   Selector cũ sai → CSS không match → icon vẫn render flex-start lệch trái.

   Inner wrapper: `.mud-drawer-content` chứa children → flex column phải
   áp ở cả đây để header/nav/footer layout đúng.
   ──────────────────────────────────────────────────────────────────── */

/* Inner content wrapper — MudDrawer wraps children trong `.mud-drawer-content`.
   Áp flex column ở đây để layout header/nav/footer chạy đúng (override default
   `.mud-drawer-content { flex: 0 0 auto }` của MudBlazor không đủ flex:1 cho nav). */
[b-iff22ytm7o] .crm-drawer > .mud-drawer-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
}

/* Logo header — center hộp logo khi mini (không có text bên cạnh). */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-drawer-header {
    padding: 16px 0;
    justify-content: center;
}

/* Nav menu mini — padding ngang nhỏ để icon centered trong 88px container,
   chừa ~10px bên phải cho scrollbar không đè. */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-nav {
    padding: 10px 6px 16px !important;
    scrollbar-gutter: stable;
}

/* Nav item mini — center icon hoàn toàn. MudBlazor có rule rất specific
   (.mud-drawer--closed.mud-drawer-mini .mud-nav-group * ...mud-nav-link) với
   `padding: 8px 16px` → cần combined selector specific hơn + !important. */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-link,
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-group-header {
    justify-content: center !important;
    align-items: center !important;
    padding: 9px 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    margin: 2px 4px !important;
    gap: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    width: auto !important;
}

/* Icon trong nav-link khi mini — reset margin để center chính xác. */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-link .mud-icon-root,
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-group-header .mud-icon-root {
    margin: 0 !important;
}

/* Ẩn text label & badge khi mini — chỉ chừa icon. */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-link-text {
    display: none !important;
}

/* MudNavGroup expand icon (chevron) ẩn khi mini. */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .mud-nav-link-expand-icon {
    display: none !important;
}

/* Collapse button (đáy sidebar) — center icon khi mini, ẩn text "Thu gọn". */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-collapse-btn {
    justify-content: center;
    padding: 12px 0;
}

/* Scrollbar mỏng + transparent track trong nav mini (Webkit + Firefox). */
[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-nav::-webkit-scrollbar {
    width: 6px;
}

[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-nav::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 999px;
}

[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-nav::-webkit-scrollbar-track {
    background: transparent;
}

[b-iff22ytm7o] .crm-drawer.mud-drawer--closed .crm-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--slate-300) transparent;
}

/* Brand header trong sidebar — đúng spec design Shell.jsx .sidebar-brand:
   padding 16px 18px, height 60px, gap 10px, border-bottom 1px var(--border-1).
   Căn cùng baseline với topbar bên phải để 2 khối ngang đầu cùng baseline. */
.crm-drawer-header[b-iff22ytm7o] {
    padding: 16px 18px;
    background: var(--mud-palette-drawer-background);
    min-height: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Hộp logo brand — khớp design Shell.jsx .sidebar-brand .logo:
   30×30 bo 8px, gradient navy → navy-pressed, chứa SVG hexagon trắng 16px. */
.crm-logo-box[b-iff22ytm7o] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-pressed));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Fallback giữ cho .crm-logo-icon (nếu còn nơi nào dùng) — nhưng MainLayout
   hiện đã chuyển sang .crm-logo-box, có thể xóa nếu confirmed không dùng nữa. */
.crm-logo-icon[b-iff22ytm7o] {
    font-size: 30px;
}

/* Maintenance banner — fixed top, full width, warning color highlight. */
.crm-maintenance-banner[b-iff22ytm7o] {
    position: sticky;
    top: 0;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.crm-maintenance-logout[b-iff22ytm7o] {
    margin-left: auto;
    font-style: italic;
    opacity: 0.85;
}

/* Logo trong sidebar header — fit theo chiều cao 32px, không stretch.
   max-width nhỏ khi drawer thu gọn (chỉ chừa ô icon ~40px). */
.crm-logo-img[b-iff22ytm7o] {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
    display: block;
}

.crm-logo-text[b-iff22ytm7o] {
    color: var(--mud-palette-primary);
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

/* Section header (nhãn nhóm "CÔNG VIỆC CỦA TÔI", "NHÂN SỰ"...) — khớp design
   Shell.jsx .sidebar-group-label: padding 16px 12px 6px (top thì breathing
   room rộng tạo cảm giác section mới, đáy 6px gần items). */
.crm-section-header[b-iff22ytm7o] {
    display: block;
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 16px 12px 6px !important;
    pointer-events: none;
}

/* Vùng scroll của nav menu — khớp .sidebar-scroll padding 10px 10px 16px.
   Override MudNavMenu mặc định (Class pa-2 = padding 8px). */
[b-iff22ytm7o] .crm-nav.mud-nav-menu {
    padding: 10px 10px 16px !important;
}

/* Divider giữa các section khi sidebar mini — thay thế section header
   (chỉ hiển thị khi drawer thu gọn). Đường line mảnh + margin để phân
   nhóm icon visually, không chiếm nhiều chiều cao. */
.crm-section-divider[b-iff22ytm7o] {
    height: 1px;
    background: var(--mud-palette-divider);
    margin: 10px 14px;
    opacity: 0.7;
}

/* Wrapper text bên trong .mud-nav-link là <div class="mud-nav-link-text"> mặc định
   display:block → margin-left:auto của badge KHÔNG chạy. Ép thành flex để badge có thể
   auto-push về phải + center theo trục dọc với label text.
   width:100% bắt buộc để flex container chiếm hết chiều ngang, margin-left:auto mới đẩy
   badge ra mép phải được (nếu container chỉ rộng bằng text thì auto vô nghĩa). */
[b-iff22ytm7o] .crm-nav .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Badge số đếm trên nav item — chuẩn cho TOÀN MENU khi có cảnh báo liên quan
   (notif count, đơn chờ duyệt, ticket mở, tin chưa đọc, deadline tới…).
   - margin-left:auto → bám MÉP PHẢI item
   - align-self:center → CENTER trục dọc dù text có nhiều dòng / khác chiều cao
   - flex-shrink:0 → không co lại khi label dài
   - min-width:20px → giữ vuông gọn khi số = 1 ký tự (5, 9)
   - line-height 1 + padding cố định 2/7 → cao 18px, đẹp bất kể parent line-height. */
.crm-nav-badge[b-iff22ytm7o] {
    margin-left: auto !important;
    align-self: center;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Variant theo loại cảnh báo — dùng class phụ khi cần phân biệt mức độ.
   Mặc định = primary (info). Thêm `.crm-nav-badge-warning` cho cảnh báo,
   `.crm-nav-badge-error` cho gấp/quá hạn. */
.crm-nav-badge-warning[b-iff22ytm7o] {
    background: var(--warning-500, #F59E0B);
}

.crm-nav-badge-error[b-iff22ytm7o] {
    background: var(--error-500, #EF4444);
}

/* Active state — badge đổi nền trắng + chữ primary để contrast với background brand-soft */
[b-iff22ytm7o] .crm-nav .mud-nav-link.active .crm-nav-badge {
    background: var(--mud-palette-primary);
    color: white;
}

/* Nút toggle "Xem thêm / Thu gọn" cho nhóm "Công việc của tôi" — khớp .sidebar-item-more design:
   chữ nghiêng nhạt, padding nhỏ, hover đổi sang brand color (không có nền). */
.crm-nav-more-btn[b-iff22ytm7o] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 8px);
    margin: 2px 4px;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-style: italic;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s;
    text-align: left;
}

.crm-nav-more-btn:hover[b-iff22ytm7o] {
    background: transparent;
    color: var(--mud-palette-primary);
}

.crm-nav-more-btn:focus-visible[b-iff22ytm7o] {
    outline: 2px solid var(--mud-palette-primary-lighten);
    outline-offset: -2px;
}

/* Nav items — khớp design Shell.jsx .sidebar-item:
   padding 9px 12px, border-radius 8px, gap 11px, font 14/500 (không 13.5).
   margin 2px 0 (chia nhỏ chiều dọc, gap nhỏ giữa items). */
[b-iff22ytm7o] .crm-nav .mud-nav-link,
[b-iff22ytm7o] .crm-nav .mud-nav-group-header {
    color: var(--mud-palette-drawer-text) !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    padding: 9px 12px !important;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
}

/* Icon size — khớp design Shell.jsx .sidebar-item svg { width: 19px; height: 19px }.
   MudBlazor mặc định Icon trong MudNavLink ~24px (Size.Medium) hoặc 20px (Size.Small).
   Override xuống 19px cho mọi mud-icon-root trong nav. */
[b-iff22ytm7o] .crm-nav .mud-nav-link .mud-icon-root,
[b-iff22ytm7o] .crm-nav .mud-nav-group-header .mud-icon-root {
    width: 19px !important;
    height: 19px !important;
    font-size: 19px !important;
}

/* Chevron 14px trong nút "Xem thêm / Thu gọn" — khớp design <I.chevD size={14}/> */
[b-iff22ytm7o] .crm-nav-more-btn .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link:hover,
[b-iff22ytm7o] .crm-nav .mud-nav-group-header:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link.active {
    background-color: var(--mud-palette-primary-lighten) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link .mud-icon-root,
[b-iff22ytm7o] .crm-nav .mud-nav-group-header .mud-icon-root {
    color: var(--mud-palette-drawer-icon) !important;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link.crm-nav-sub {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 13px;
    padding-left: 44px !important;
    margin: 1px 6px !important;
    border-radius: 8px !important;
}

[b-iff22ytm7o] .crm-nav .mud-nav-link.crm-nav-sub.active {
    background-color: var(--mud-palette-primary-lighten) !important;
    color: var(--mud-palette-primary) !important;
}

[b-iff22ytm7o] .crm-drawer-divider {
    border-color: var(--mud-palette-divider) !important;
    margin: 0 12px !important;
}

.crm-collapse-btn[b-iff22ytm7o] {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.crm-collapse-btn:hover[b-iff22ytm7o] {
    background: var(--mud-palette-action-default-hover);
}

.crm-collapse-icon[b-iff22ytm7o] {
    color: var(--mud-palette-drawer-icon);
    opacity: 0.8;
}

.crm-collapse-text[b-iff22ytm7o] {
    color: var(--mud-palette-drawer-icon);
    margin-left: 8px;
    font-size: 13px;
}

.crm-user-menu-header[b-iff22ytm7o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px 12px;
    text-align: center;
    min-width: 230px;
    background: var(--mud-palette-background-grey);
    border-radius: 12px 12px 0 0;
}
/* /Pages/PHome/Home.razor.rz.scp.css */
/* CSS isolation cho trang chủ (PHome/Home.razor).
   Mục tiêu: làm MỜ nhóm "Sắp ra mắt" để nhóm "Đang khả dụng" nổi bật hơn.
   Chỉ dùng biến --app-* / --brand-* (định nghĩa ở wwwroot/css/app.css) — KHÔNG hardcode hex (CLAUDE.md §6). */

/* Card phân hệ sắp ra mắt: giảm độ đậm + xám hoá + làm phẳng để lùi ra sau. */
.home-coming-card[b-ohndaf4a47] {
    opacity: 0.55;
    filter: grayscale(0.6);
    box-shadow: none;
    transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* Icon phân hệ sắp ra mắt: tông xám nhạt (slate-400) để chìm hẳn so với icon navy của mục đang khả dụng.
   MudIcon đặt Color.Inherit nên màu do rule này quyết định (svg fill = currentColor). */
.home-coming-card[b-ohndaf4a47]  .mud-icon-root {
    color: var(--slate-400);
}

/* Hover: hé lộ lại nhẹ để card vẫn có cảm giác tương tác, không "chết" hẳn. */
.home-coming-card:hover[b-ohndaf4a47] {
    opacity: 0.9;
    filter: grayscale(0.15);
}

/* Card phân hệ đang khả dụng: nhấn mạnh bằng đổ bóng đậm hơn + viền tông thương hiệu nhẹ. */
.home-available-card[b-ohndaf4a47] {
    box-shadow: var(--app-shadow-card-strong);
    border: 1px solid var(--brand-soft);
}