/* wwwroot/css/admin/shared.css
   Nhãn dùng chung không thuộc grid/forms/reports/dashboard — icon tiêu đề trang,
   z-index popup Radzen, và TOÀN BỘ khối dark-mode override (đan xen nhiều class
   dùng chung: modal/status-badge/row-menu/rz-data-grid/rz-form-field/fpd + 2 chỗ
   riêng của MenusAdmin/ArticleTopicsAdmin) — trích nguyên khối, KHÔNG tách lại
   theo file để tránh rủi ro bỏ sót/sai selector không thể verify bằng mắt.
   Trích từ Components/Layout/AdminLayout.razor (trước đây <style> inline). */

    /* Prevent images inserted into the HTML editor from overflowing */
    [contenteditable] img { max-width: 100%; height: auto; }

    /* =====================================================================
       Icon tiêu đề trang — class DÙNG CHUNG cho mọi trang Admin.
       Ô vuông bo góc, nền brand nhạt, icon màu brand. Dùng:
       <span class="page-head__icon"><RadzenIcon Icon="..." /></span>
    ===================================================================== */
    .page-head__icon {
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light);
        color: var(--primary);
    }

    .page-head__icon .rz-icon {
        font-size: 24px;
        color: inherit;
    }

    /* =====================================================================
       RadzenTabs — nền mặc định cho MỌI thanh tab trong Admin Panel chưa có
       override riêng cụ thể hơn (forms.css .edit-locale-tabs, MentorsAdmin
       .mentor-tabs, SettingsAdmin .settings-tabs, MemberDetailAdmin .detail-tabs
       tự override sâu hơn và LOAD SAU file này nên vẫn thắng — không xung đột).

       Lý do cần rule này: Radzen tự vẽ 1 "card" quanh .rz-tabview-panels theo
       mặc định (nền/viền/shadow riêng) — nếu RadzenTabs đã nằm sẵn trong 1 card
       khác (RadzenCard, .modal, .edit-card...) sẽ thành card-lồng-card. Reset về
       trong suốt + cho thanh nav chỉ còn 1 viền mảnh dưới (đúng pattern tab chuẩn
       Material/GitHub/Bootstrap nav-tabs: thanh tab là "header" liền mạch với nội
       dung "body" của card đang chứa nó, không tự vẽ thêm khung riêng).
    ===================================================================== */
    .adm-root .rz-tabview {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .adm-root .rz-tabview-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
        padding: 10px 16px 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--divider, #E2E8F0);
    }

    /* [SỬA 2026-08-24] Class ".rz-tabview-nav-link"/".rz-link" dùng ở đây KHÔNG tồn tại trong
       Radzen.Blazor 10.4.7 thật (đã đối chiếu trực tiếp _content/Radzen.Blazor/css/default.css) —
       markup thật là `<li class="rz-tabview-selected">` chứa thẳng `<a>`/`<button>` KHÔNG có class
       riêng. Vì selector sai nên toàn bộ khối reset dưới đây trước giờ KHÔNG match được phần tử nào,
       khiến nền/viền pill mặc định của Radzen (--rz-tabs-tab-background-color trên chính <li>) vẫn lộ
       ra ngoài — chỉ phát hiện được qua ảnh chụp thật, không thấy được qua build/code review. Sửa
       đúng theo markup thật: reset nền/viền trên <li>, reset padding/font trên <li> a / <li> button. */
    .adm-root .rz-tabview-nav li {
        margin: 0 0 -1px;
        float: none;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--text-secondary) !important;
        transition: color .15s ease, border-color .15s ease;
    }

    .adm-root .rz-tabview-nav li a,
    .adm-root .rz-tabview-nav li button {
        display: inline-flex;
        align-items: center;
        height: 40px;
        padding: 0 14px;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: inherit !important;
        font-size: 13px;
        font-weight: 600;
        box-shadow: none !important;
        transition: color .15s ease, border-color .15s ease;
    }

    .adm-root .rz-tabview-nav li:hover {
        color: var(--text-body) !important;
    }

    .adm-root .rz-tabview-nav li.rz-tabview-selected {
        color: var(--primary) !important;
    }

    .adm-root .rz-tabview-nav li.rz-tabview-selected a,
    .adm-root .rz-tabview-nav li.rz-tabview-selected button {
        border-bottom-color: var(--primary) !important;
    }

    /* [SỬA 2026-08-24] Thiếu "padding: 0" ở đây — Radzen mặc định đặt padding:1.25rem (20px) thật
       trên .rz-tabview-panel (--rz-tabs-padding), cộng dồn với padding riêng của .tab-panel (16px)
       thành khoảng trắng gấp đôi. Các bản page-scoped khác (.detail-tabs/.edit-locale-tabs/
       .settings-tabs) đã có padding:0 đúng từ trước — chỉ bản global này (trang chỉ dựa vào global,
       như Menu) là thiếu, nên chỉ những trang đó mới bị padding thừa. */
    .adm-root .rz-tabview-panels,
    .adm-root .rz-tabview-panel {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* Radzen openPopup() hard-set inline z-index:2000 — thua modal-overlay (9100)
       và FilePicker/CourseDialog (9500/9600). PopupStyle="z-index:…" bị JS ghi đè,
       nên phải !important để dropdown trong modal hiện được. */
    .rz-popup,
    .rz-dropdown-panel,
    .rz-multiselect-panel,
    .rz-autocomplete-panel,
    .rz-overlaypanel {
        z-index: 9700 !important;
    }

    /* =====================================================================
       Shared dark overrides — các class hardcode màu sáng trong page CSS
       (row-menu / more-btn / modal / Radzen card-input). Layout không isolation
       nên selector khớp trực tiếp class trên DOM.
    ===================================================================== */
    /* =====================================================================
       Portal overlays (dropdown/popup) — Radzen gắn vào body, NGOÀI .adm-root
       nên KHÔNG dùng .adm-root làm ancestor. Chỉ dựa html[data-admin-theme].
    ===================================================================== */
    html[data-admin-theme="dark"]:has(.adm-root) {
        --rz-dropdown-open-background-color: #111827;
        --rz-dropdown-panel-border: 1px solid #1F2A3D;
        --rz-dropdown-item-hover-background-color: #1E293B;
        --rz-dropdown-item-hover-color: #F8FAFC;
        --rz-dropdown-item-selected-background-color: rgba(45, 212, 191, .18);
        --rz-dropdown-item-selected-color: #5EEAD4;
        --rz-dropdown-filter-background-color: #0B1220;
        --rz-base-background-color: #111827;
        --rz-base-100: #0B1220;
        --rz-base-200: #1E293B;
        --rz-panel-background-color: #111827;
        --rz-overlaypanel-background-color: #111827;
        --rz-input-background-color: #111827;
        --rz-text-color: #E2E8F0;
        --rz-text-secondary-color: #94A3B8;
        --rz-form-field-filled-background-color: #111827;
        --rz-form-field-filled-hover-background-color: #1E293B;
        --rz-form-field-label-background-color: #111827;
    }

    /* Popup gắn body — vẫn cần selector không phụ thuộc .adm-root ancestor */
    html[data-admin-theme="dark"]:has(.adm-root) .rz-popup,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-panel,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-multiselect-panel,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-autocomplete-panel,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-overlaypanel,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-datepicker-popup,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-listbox {
        background: #111827 !important;
        background-color: #111827 !important;
        border-color: #1F2A3D !important;
        color: #E2E8F0 !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, .55) !important;
    }

    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-item,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-multiselect-item,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-autocomplete-list-item {
        color: #E2E8F0 !important;
        background-color: transparent !important;
    }

    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-item:hover,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-item.rz-state-highlight,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-multiselect-item:hover,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-autocomplete-list-item:hover {
        background-color: #1E293B !important;
        color: #F8FAFC !important;
    }

    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-item.rz-state-selected,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-item[aria-selected="true"] {
        background-color: rgba(45, 212, 191, .18) !important;
        color: #5EEAD4 !important;
    }

    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-filter,
    html[data-admin-theme="dark"]:has(.adm-root) .rz-dropdown-filter-container input {
        background: #0B1220 !important;
        border-color: #1F2A3D !important;
        color: #F8FAFC !important;
    }

    /* Floating label FormField — nền nhãn phải khớp surface modal, không trắng */
    /* Form thêm/sửa dùng chung (.edit-layout / .edit-panel / .edit-card) */
    .adm-root .edit-panel .rz-stack {
        gap: 1.25rem !important;
        align-items: stretch !important;
        width: 100%;
    }

    .adm-root .edit-panel .rz-stack > *,
    .adm-root .edit-panel .rz-form-field,
    .adm-root .edit-card .rz-form-field {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-block: 0 !important;
        box-sizing: border-box;
    }

    /* TextBox / TextArea / Dropdown trong form edit — full chiều ngang cột */
    .adm-root .edit-panel .rz-textbox,
    .adm-root .edit-panel .rz-textarea,
    .adm-root .edit-panel .rz-dropdown,
    .adm-root .edit-panel .rz-form-field-content,
    .adm-root .edit-card:not(.edit-card--sidebar-compact) .rz-textbox,
    .adm-root .edit-card:not(.edit-card--sidebar-compact) .rz-textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* TextArea: cao hơn cho dễ nhập mô tả ngắn / điều kiện */
    .adm-root .edit-panel .rz-textarea {
        min-height: 88px !important;
        resize: vertical;
    }

    .adm-root .edit-panel .rz-textbox {
        min-height: 42px;
    }

    .adm-root .edit-card .rz-stack {
        gap: 0.75rem !important;
    }

    .adm-root .edit-card .rz-button {
        margin: 0 !important;
    }

    .adm-root .schedule-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }

    /* Hàng dropdown ngắn (cấp độ / hình thức...) giữ kích thước hợp lý, không full */
    .adm-root .edit-card .rz-stack.rz-align-items-normal > .rz-form-field,
    .adm-root .edit-meta-row .rz-form-field {
        width: auto !important;
        max-width: none !important;
        flex: 0 1 auto;
    }

    html[data-admin-theme="dark"] .adm-root .rz-form-field-label,
    .adm-root[data-theme="dark"] .rz-form-field-label {
        background-color: var(--surface) !important;
        color: #F8FAFC !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-form-field-content,
    .adm-root[data-theme="dark"] .rz-form-field-content {
        background-color: var(--surface) !important;
        border-color: var(--border) !important;
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-form-field,
    .adm-root[data-theme="dark"] .rz-form-field {
        --rz-form-field-filled-background-color: var(--surface);
        --rz-form-field-filled-hover-background-color: var(--adm-hover-bg);
        --rz-form-field-label-color: #F8FAFC;
        --rz-form-field-label-focus-color: #5EEAD4;
        --rz-input-background-color: var(--surface);
    }

    /* Tiêu đề / nhãn form — chữ sáng rõ trên nền tối */
    html[data-admin-theme="dark"] .adm-root .field-label,
    .adm-root[data-theme="dark"] .field-label,
    html[data-admin-theme="dark"] .adm-root .edit-card__head,
    .adm-root[data-theme="dark"] .edit-card__head,
    html[data-admin-theme="dark"] .adm-root .edit-card__head strong,
    .adm-root[data-theme="dark"] .edit-card__head strong,
    html[data-admin-theme="dark"] .adm-root .rz-text-h4,
    .adm-root[data-theme="dark"] .rz-text-h4,
    html[data-admin-theme="dark"] .adm-root .rz-text-h5,
    .adm-root[data-theme="dark"] .rz-text-h5,
    html[data-admin-theme="dark"] .adm-root .rz-text-h6,
    .adm-root[data-theme="dark"] .rz-text-h6,
    html[data-admin-theme="dark"] .adm-root h1,
    .adm-root[data-theme="dark"] h1,
    html[data-admin-theme="dark"] .adm-root h2,
    .adm-root[data-theme="dark"] h2,
    html[data-admin-theme="dark"] .adm-root h3,
    .adm-root[data-theme="dark"] h3,
    html[data-admin-theme="dark"] .adm-root h4,
    .adm-root[data-theme="dark"] h4,
    html[data-admin-theme="dark"] .adm-root h5,
    .adm-root[data-theme="dark"] h5 {
        color: #F8FAFC !important;
    }

    html[data-admin-theme="dark"] .adm-root .edit-card__head .rz-icon,
    .adm-root[data-theme="dark"] .edit-card__head .rz-icon {
        color: var(--primary) !important;
    }

    /* Ô chọn ảnh / placeholder media — nền tối rõ */
    .adm-root .thumb-empty,
    .adm-root .media-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 120px;
        margin-bottom: 10px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--sidebar, #F8FAFC);
        color: var(--text-secondary);
        font-size: 12px;
        box-sizing: border-box;
    }

    .adm-root .thumb-empty .rz-icon,
    .adm-root .media-empty .rz-icon {
        font-size: 28px;
        color: var(--disabled, #9CA3AF);
    }

    html[data-admin-theme="dark"] .adm-root .thumb-empty,
    .adm-root[data-theme="dark"] .thumb-empty,
    html[data-admin-theme="dark"] .adm-root .media-empty,
    .adm-root[data-theme="dark"] .media-empty {
        background: #020617 !important;
        border-color: #334155 !important;
        color: #94A3B8 !important;
    }

    html[data-admin-theme="dark"] .adm-root .thumb-empty .rz-icon,
    .adm-root[data-theme="dark"] .thumb-empty .rz-icon,
    html[data-admin-theme="dark"] .adm-root .media-empty .rz-icon,
    .adm-root[data-theme="dark"] .media-empty .rz-icon {
        color: #64748B !important;
    }

    /* Form thêm/sửa — input/editor/toolbar không còn nền trắng */
    html[data-admin-theme="dark"] .adm-root .edit-card,
    .adm-root[data-theme="dark"] .edit-card {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text-body) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-html-editor-toolbar,
    .adm-root[data-theme="dark"] .rz-html-editor-toolbar {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-html-editor-toolbar .rzi,
    .adm-root[data-theme="dark"] .rz-html-editor-toolbar .rzi,
    html[data-admin-theme="dark"] .adm-root .rz-html-editor-toolbar button,
    .adm-root[data-theme="dark"] .rz-html-editor-toolbar button {
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-button-light,
    .adm-root[data-theme="dark"] .rz-button-light {
        background: #1E293B !important;
        background-image: none !important;
        border-color: #334155 !important;
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-button-light:hover,
    .adm-root[data-theme="dark"] .rz-button-light:hover {
        background: #334155 !important;
        color: #F8FAFC !important;
    }

    /* Modal dùng chung mọi trang Admin — ép token, không phụ thuộc hardcode từng file */
    html[data-admin-theme="dark"] .adm-root .modal,
    .adm-root[data-theme="dark"] .modal,
    html[data-admin-theme="dark"] .adm-root .modal-panel,
    .adm-root[data-theme="dark"] .modal-panel {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-body) !important;
        box-shadow: var(--shadow-modal) !important;
    }

    html[data-admin-theme="dark"] .adm-root .modal__head,
    .adm-root[data-theme="dark"] .modal__head,
    html[data-admin-theme="dark"] .adm-root .modal__foot,
    .adm-root[data-theme="dark"] .modal__foot {
        border-color: var(--divider) !important;
        background: transparent !important;
        color: var(--text) !important;
    }

    html[data-admin-theme="dark"] .adm-root .modal__title,
    .adm-root[data-theme="dark"] .modal__title {
        color: var(--text) !important;
    }

    html[data-admin-theme="dark"] .adm-root .modal__hint,
    .adm-root[data-theme="dark"] .modal__hint,
    html[data-admin-theme="dark"] .adm-root .locale-hint,
    .adm-root[data-theme="dark"] .locale-hint {
        background: var(--background) !important;
        border-color: var(--border) !important;
        color: var(--text-secondary) !important;
    }

    html[data-admin-theme="dark"] .adm-root .locale-hint code,
    .adm-root[data-theme="dark"] .locale-hint code,
    html[data-admin-theme="dark"] .adm-root .modal__hint code,
    .adm-root[data-theme="dark"] .modal__hint code {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    html[data-admin-theme="dark"] .adm-root .modal__error,
    .adm-root[data-theme="dark"] .modal__error,
    html[data-admin-theme="dark"] .adm-root .modal__confirm-icon,
    .adm-root[data-theme="dark"] .modal__confirm-icon {
        background: rgba(248, 113, 113, .14) !important;
        border-color: rgba(248, 113, 113, .35) !important;
        color: #FCA5A5 !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--draft,
    .adm-root[data-theme="dark"] .status-badge--draft,
    html[data-admin-theme="dark"] .adm-root .status-badge--off,
    .adm-root[data-theme="dark"] .status-badge--off {
        background: #1E293B !important;
        color: #CBD5E1 !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--published,
    .adm-root[data-theme="dark"] .status-badge--published,
    html[data-admin-theme="dark"] .adm-root .status-badge--on,
    .adm-root[data-theme="dark"] .status-badge--on {
        background: rgba(52, 211, 153, .16) !important;
        color: #6EE7B7 !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--pending,
    .adm-root[data-theme="dark"] .status-badge--pending,
    html[data-admin-theme="dark"] .adm-root .status-badge--scheduled,
    .adm-root[data-theme="dark"] .status-badge--scheduled {
        background: rgba(251, 191, 36, .16) !important;
        color: #FCD34D !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--suspended,
    .adm-root[data-theme="dark"] .status-badge--suspended,
    html[data-admin-theme="dark"] .adm-root .status-badge--hidden,
    .adm-root[data-theme="dark"] .status-badge--hidden {
        background: rgba(248, 113, 113, .16) !important;
        color: #FCA5A5 !important;
    }

    /* File picker / FileManager trong modal */
    html[data-admin-theme="dark"] .adm-root .fpd,
    .adm-root[data-theme="dark"] .fpd,
    html[data-admin-theme="dark"]:has(.adm-root) .fpd {
        color: #E2E8F0;
    }

    html[data-admin-theme="dark"] .adm-root .fpd-topbar,
    html[data-admin-theme="dark"] .adm-root .fpd-footer,
    html[data-admin-theme="dark"] .adm-root .fpd-item,
    html[data-admin-theme="dark"] .adm-root .fpd-search,
    html[data-admin-theme="dark"] .adm-root .fpd-ctx,
    .adm-root[data-theme="dark"] .fpd-topbar,
    .adm-root[data-theme="dark"] .fpd-footer,
    .adm-root[data-theme="dark"] .fpd-item,
    .adm-root[data-theme="dark"] .fpd-search,
    .adm-root[data-theme="dark"] .fpd-ctx {
        background: #111827 !important;
        border-color: #1F2A3D !important;
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .fpd-searchbar,
    html[data-admin-theme="dark"] .adm-root .fpd-layout-opts,
    html[data-admin-theme="dark"] .adm-root .fpd-content,
    .adm-root[data-theme="dark"] .fpd-searchbar,
    .adm-root[data-theme="dark"] .fpd-layout-opts,
    .adm-root[data-theme="dark"] .fpd-content {
        background: #0B1220 !important;
        border-color: #1F2A3D !important;
    }

    html[data-admin-theme="dark"] .adm-root .fpd-item-name,
    .adm-root[data-theme="dark"] .fpd-item-name,
    html[data-admin-theme="dark"] .adm-root .fpd-ctx-item,
    .adm-root[data-theme="dark"] .fpd-ctx-item {
        color: #E2E8F0 !important;
    }

    html[data-admin-theme="dark"] .adm-root .row-menu,
    .adm-root[data-theme="dark"] .row-menu,
    html[data-admin-theme="dark"] .adm-root .modal-panel,
    .adm-root[data-theme="dark"] .modal-panel,
    html[data-admin-theme="dark"] .adm-root .rz-card,
    .adm-root[data-theme="dark"] .rz-card,
    html[data-admin-theme="dark"] .adm-root .rz-dialog,
    .adm-root[data-theme="dark"] .rz-dialog,
    html[data-admin-theme="dark"] .adm-root .rz-dialog-content,
    .adm-root[data-theme="dark"] .rz-dialog-content {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text-body) !important;
        box-shadow: var(--shadow-menu);
    }

    html[data-admin-theme="dark"] .adm-root .more-btn:hover,
    .adm-root[data-theme="dark"] .more-btn:hover,
    html[data-admin-theme="dark"] .adm-root .row-menu__item:hover,
    .adm-root[data-theme="dark"] .row-menu__item:hover {
        background: var(--adm-hover-bg) !important;
    }

    html[data-admin-theme="dark"] .adm-root .more-btn:active,
    html[data-admin-theme="dark"] .adm-root .more-btn--active,
    .adm-root[data-theme="dark"] .more-btn:active,
    .adm-root[data-theme="dark"] .more-btn--active {
        background: var(--adm-hover-bg-strong) !important;
    }

    html[data-admin-theme="dark"] .adm-root .row-menu__item--danger:hover,
    .adm-root[data-theme="dark"] .row-menu__item--danger:hover {
        background: rgba(248, 113, 113, .14) !important;
    }

    html[data-admin-theme="dark"] .adm-root .modal-overlay,
    .adm-root[data-theme="dark"] .modal-overlay,
    html[data-admin-theme="dark"] .adm-root .row-menu-backdrop,
    .adm-root[data-theme="dark"] .row-menu-backdrop {
        background: var(--adm-overlay-light);
    }

    html[data-admin-theme="dark"] .adm-root .rz-textbox,
    .adm-root[data-theme="dark"] .rz-textbox,
    html[data-admin-theme="dark"] .adm-root .rz-textarea,
    .adm-root[data-theme="dark"] .rz-textarea,
    html[data-admin-theme="dark"] .adm-root .rz-dropdown,
    .adm-root[data-theme="dark"] .rz-dropdown,
    html[data-admin-theme="dark"] .adm-root .rz-spinner,
    .adm-root[data-theme="dark"] .rz-spinner,
    html[data-admin-theme="dark"] .adm-root .rz-datepicker,
    .adm-root[data-theme="dark"] .rz-datepicker,
    html[data-admin-theme="dark"] .adm-root .rz-numeric,
    .adm-root[data-theme="dark"] .rz-numeric,
    html[data-admin-theme="dark"] .adm-root .rz-password,
    .adm-root[data-theme="dark"] .rz-password {
        background: var(--surface) !important;
        background-color: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    /* Trong FormField: chỉ tô viền khung ngoài — input trong suốt khớp nền card */
    .adm-root .rz-form-field-content .rz-textbox,
    .adm-root .rz-form-field-content .rz-textarea,
    .adm-root .rz-form-field-content .rz-dropdown,
    .adm-root .rz-form-field-content .rz-spinner,
    .adm-root .rz-form-field-content .rz-datepicker,
    .adm-root .rz-form-field-content .rz-numeric,
    .adm-root .rz-form-field-content .rz-password,
    .adm-root .rz-form-field-content input,
    .adm-root .rz-form-field-content textarea,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-textbox,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-textbox,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-textarea,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-textarea,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-dropdown,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-dropdown,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-spinner,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-spinner,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-datepicker,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-datepicker,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-numeric,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-numeric,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content .rz-password,
    .adm-root[data-theme="dark"] .rz-form-field-content .rz-password,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content input,
    .adm-root[data-theme="dark"] .rz-form-field-content input,
    html[data-admin-theme="dark"] .adm-root .rz-form-field-content textarea,
    .adm-root[data-theme="dark"] .rz-form-field-content textarea {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* Form edit trên card (--surface): FormField cũng transparent → chỉ còn viền */
    html[data-admin-theme="dark"] .adm-root .edit-card .rz-form-field-content,
    .adm-root[data-theme="dark"] .edit-card .rz-form-field-content,
    html[data-admin-theme="dark"] .adm-root .edit-panel .rz-form-field-content,
    .adm-root[data-theme="dark"] .edit-panel .rz-form-field-content,
    html[data-admin-theme="dark"] .adm-root .modal__body .rz-form-field-content,
    .adm-root[data-theme="dark"] .modal__body .rz-form-field-content,
    html[data-admin-theme="dark"] .adm-root .modal-body .rz-form-field-content,
    .adm-root[data-theme="dark"] .modal-body .rz-form-field-content {
        background-color: transparent !important;
        background: transparent !important;
    }

    html[data-admin-theme="dark"] .adm-root .edit-card .rz-form-field-label,
    .adm-root[data-theme="dark"] .edit-card .rz-form-field-label,
    html[data-admin-theme="dark"] .adm-root .edit-panel .rz-form-field-label,
    .adm-root[data-theme="dark"] .edit-panel .rz-form-field-label,
    html[data-admin-theme="dark"] .adm-root .modal__body .rz-form-field-label,
    .adm-root[data-theme="dark"] .modal__body .rz-form-field-label,
    html[data-admin-theme="dark"] .adm-root .modal-body .rz-form-field-label,
    .adm-root[data-theme="dark"] .modal-body .rz-form-field-label {
        background-color: var(--surface) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-dropdown-panel,
    .adm-root[data-theme="dark"] .rz-dropdown-panel,
    html[data-admin-theme="dark"] .adm-root .rz-popup,
    .adm-root[data-theme="dark"] .rz-popup,
    html[data-admin-theme="dark"] .adm-root .rz-multiselect-panel,
    .adm-root[data-theme="dark"] .rz-multiselect-panel {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text-body) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-data-grid,
    .adm-root[data-theme="dark"] .rz-data-grid,
    html[data-admin-theme="dark"] .adm-root .rz-datatable,
    .adm-root[data-theme="dark"] .rz-datatable {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        color: var(--text-body) !important;
        /* Ép lại biến sọc ngay trên component Radzen (tránh :root thắng) */
        --rz-base-background-color: #111827;
        --rz-base-100: #0B1220;
        --rz-grid-background-color: #111827;
        --rz-grid-stripe-background-color: #111827;
        --rz-grid-stripe-odd-background-color: #111827;
        --rz-grid-frozen-stripe-background-color: #111827;
        --rz-grid-frozen-stripe-odd-background-color: #111827;
        --rz-grid-header-background-color: #0B1220;
        --rz-grid-cell-color: #E2E8F0;
    }

    /* Zebra stripe + ô dữ liệu — !important vì selector Radzen có specificity cao */
    html[data-admin-theme="dark"] .adm-root .rz-grid-table-striped tbody > tr > td,
    .adm-root[data-theme="dark"] .rz-grid-table-striped tbody > tr > td,
    html[data-admin-theme="dark"] .adm-root .rz-datatable-data > tr > td,
    .adm-root[data-theme="dark"] .rz-datatable-data > tr > td,
    html[data-admin-theme="dark"] .adm-root .rz-grid-table tbody td,
    .adm-root[data-theme="dark"] .rz-grid-table tbody td {
        background-color: var(--surface) !important;
        color: var(--text) !important;
        border-bottom-color: var(--adm-grid-row-border) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-grid-table-striped tbody > tr:hover > td,
    .adm-root[data-theme="dark"] .rz-grid-table-striped tbody > tr:hover > td,
    html[data-admin-theme="dark"] .adm-root .rz-datatable-data > tr:hover > td,
    .adm-root[data-theme="dark"] .rz-datatable-data > tr:hover > td,
    html[data-admin-theme="dark"] .adm-root .rz-grid-table tbody tr:hover td,
    .adm-root[data-theme="dark"] .rz-grid-table tbody tr:hover td {
        background-color: var(--adm-hover-bg) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-grid-table thead th,
    .adm-root[data-theme="dark"] .rz-grid-table thead th {
        background-color: var(--background) !important;
        color: var(--text-body) !important;
        border-bottom-color: var(--border) !important;
    }

    /* Paginator footer — Radzen 10 dùng .rz-pager (không còn .rz-paginator) */
    html[data-admin-theme="dark"] .adm-root .rz-pager,
    .adm-root[data-theme="dark"] .rz-pager,
    html[data-admin-theme="dark"] .adm-root .rz-paginator,
    .adm-root[data-theme="dark"] .rz-paginator {
        background: var(--surface) !important;
        background-color: var(--surface) !important;
        color: var(--text-body) !important;
        border-color: var(--border) !important;
        border-top: 1px solid var(--border) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-pager-summary,
    .adm-root[data-theme="dark"] .rz-pager .rz-pager-summary,
    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-pager-page-sizes,
    .adm-root[data-theme="dark"] .rz-pager .rz-pager-page-sizes {
        color: var(--text-secondary) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-pager-element,
    .adm-root[data-theme="dark"] .rz-pager .rz-pager-element,
    html[data-admin-theme="dark"] .adm-root .rz-paginator .rz-paginator-element,
    .adm-root[data-theme="dark"] .rz-paginator .rz-paginator-element,
    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-dropdown,
    .adm-root[data-theme="dark"] .rz-pager .rz-dropdown,
    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-dropdown-label,
    .adm-root[data-theme="dark"] .rz-pager .rz-dropdown-label {
        color: var(--text-body) !important;
        background-color: transparent !important;
        background-image: none !important;
        border-color: var(--border) !important;
        box-shadow: none !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-pager-element:hover,
    .adm-root[data-theme="dark"] .rz-pager .rz-pager-element:hover {
        background-color: var(--adm-hover-bg) !important;
        color: var(--primary) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-pager-element.rz-state-active,
    .adm-root[data-theme="dark"] .rz-pager .rz-pager-element.rz-state-active,
    html[data-admin-theme="dark"] .adm-root .rz-pager .rz-state-active,
    .adm-root[data-theme="dark"] .rz-pager .rz-state-active,
    html[data-admin-theme="dark"] .adm-root .rz-paginator .rz-state-active,
    .adm-root[data-theme="dark"] .rz-paginator .rz-state-active {
        background: var(--primary) !important;
        background-image: none !important;
        border-color: var(--primary) !important;
        color: var(--rz-on-primary) !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-pager .rzi,
    .adm-root[data-theme="dark"] .rz-pager .rzi {
        color: inherit !important;
    }

    html[data-admin-theme="dark"] .adm-root .rz-cell-data,
    .adm-root[data-theme="dark"] .rz-cell-data {
        color: var(--text) !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--draft,
    .adm-root[data-theme="dark"] .status-badge--draft {
        background: #1E293B;
        color: #CBD5E1;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--published,
    .adm-root[data-theme="dark"] .status-badge--published {
        background: rgba(52, 211, 153, .16);
        color: #6EE7B7;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--pending,
    .adm-root[data-theme="dark"] .status-badge--pending {
        background: rgba(251, 191, 36, .16);
        color: #FCD34D;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--suspended,
    html[data-admin-theme="dark"] .adm-root .status-badge--hidden,
    .adm-root[data-theme="dark"] .status-badge--suspended,
    .adm-root[data-theme="dark"] .status-badge--hidden {
        background: rgba(248, 113, 113, .16);
        color: #FCA5A5;
    }

    /* HTML editor / contenteditable trong dark — trùng surface card */
    html[data-admin-theme="dark"] .adm-root .rz-html-editor,
    .adm-root[data-theme="dark"] .rz-html-editor,
    html[data-admin-theme="dark"] .adm-root .rz-html-editor-content,
    .adm-root[data-theme="dark"] .rz-html-editor-content {
        background: var(--surface) !important;
        color: var(--text-body) !important;
        border-color: var(--border) !important;
    }

    /* Ghi đè token cục bộ trong page CSS (.xxx-grid / .filter-bar / .row-menu)
       — specificity cao hơn declaration cứng màu sáng trong CSS isolation. */
    html[data-admin-theme="dark"] .adm-root [class*="-grid"],
    .adm-root[data-theme="dark"] [class*="-grid"] {
        --grid-row-border: var(--adm-grid-row-border);
        --grid-icon: var(--adm-grid-icon);
        --chip-text: var(--adm-chip-text);
        --row-selected: var(--adm-row-selected);
    }

    html[data-admin-theme="dark"] .adm-root .filter-bar,
    .adm-root[data-theme="dark"] .filter-bar {
        --ctl-icon: var(--adm-ctl-icon);
        --ctl-border-hover: var(--adm-ctl-border-hover);
    }

    html[data-admin-theme="dark"] .adm-root .row-menu,
    .adm-root[data-theme="dark"] .row-menu {
        --menu-icon: var(--adm-menu-icon);
        --menu-danger: var(--adm-menu-danger);
        --menu-danger-hover: var(--adm-menu-danger-hover);
    }

    html[data-admin-theme="dark"] .adm-root .page-head h1,
    .adm-root[data-theme="dark"] .page-head h1,
    html[data-admin-theme="dark"] .adm-root .page-head__title,
    .adm-root[data-theme="dark"] .page-head__title,
    html[data-admin-theme="dark"] .adm-root .page-head .rz-text-h5,
    .adm-root[data-theme="dark"] .page-head .rz-text-h5 {
        color: #F8FAFC !important;
    }

    html[data-admin-theme="dark"] .adm-root .page-head__subtitle,
    .adm-root[data-theme="dark"] .page-head__subtitle,
    html[data-admin-theme="dark"] .adm-root .page-head__sub,
    .adm-root[data-theme="dark"] .page-head__sub {
        color: var(--text-secondary);
    }

    /* MenusAdmin — submenu từng hardcode #FCFDFE (trắng) → chữ tối mode bị mất */
    html[data-admin-theme="dark"] .adm-root .menu-row--child td,
    .adm-root[data-theme="dark"] .menu-row--child td {
        background: var(--background) !important;
        color: var(--text) !important;
    }

    html[data-admin-theme="dark"] .adm-root .menu-table tbody td,
    .adm-root[data-theme="dark"] .menu-table tbody td {
        background: var(--surface);
        color: var(--text);
        border-bottom-color: var(--adm-grid-row-border);
    }

    html[data-admin-theme="dark"] .adm-root .menu-table tbody tr:hover td,
    .adm-root[data-theme="dark"] .menu-table tbody tr:hover td {
        background: var(--adm-hover-bg) !important;
    }
    /* ArticleTopicsAdmin — hover dòng cây danh mục */
    html[data-admin-theme="dark"] .adm-root .cat-page,
    .adm-root[data-theme="dark"] .cat-page {
        --row-hover: var(--adm-hover-bg);
        --row-border: var(--adm-grid-row-border);
        --tree-line: var(--border);
        --icon: var(--adm-grid-icon);
        --slug: var(--text-secondary);
    }

    html[data-admin-theme="dark"] .adm-root .cat-row:hover,
    .adm-root[data-theme="dark"] .cat-row:hover {
        background: var(--adm-hover-bg) !important;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--off,
    .adm-root[data-theme="dark"] .status-badge--off {
        background: #1E293B;
        color: #CBD5E1;
    }

    html[data-admin-theme="dark"] .adm-root .status-badge--on,
    .adm-root[data-theme="dark"] .status-badge--on {
        background: rgba(52, 211, 153, .16);
        color: #6EE7B7;
    }