:root {
    --vbhxh-mud-accent: #EE0033;
    --vbhxh-mud-accent-hover: #CC002B;
    --vbhxh-mud-accent-soft: rgba(238, 0, 51, 0.08);
    --vbhxh-mud-accent-soft-hover: rgba(238, 0, 51, 0.04);
    --vbhxh-mud-field-border: #E0E0E0;
    --vbhxh-mud-field-radius: 12px;
    --vbhxh-mud-field-label: #424242;
    --vbhxh-mud-field-disabled-bg: #f5f5f5;
    --vbhxh-mud-field-disabled-text: #616161;
    --vbhxh-mud-field-disabled-adornment: #9e9e9e;
}

/* Reusable MudBlazor field theme:
   TextField, DatePicker, Select, SearchSelect */

.mud-input-outlined-border {
    border-radius: var(--vbhxh-mud-field-radius) !important;
    border-color: var(--vbhxh-mud-field-border) !important;
}

.mud-input-helper-text {
    font-size: 12px;
    line-height: 1.4;
}

.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--vbhxh-mud-accent) !important;
    border-width: 2px !important;
}

.mud-input-control.mud-input-error .mud-input-outlined-border {
    border-color: var(--vbhxh-mud-accent) !important;
}

.mud-input-control:focus-within .mud-input-label {
    color: var(--vbhxh-mud-accent) !important;
}

.mud-input-helper-text.mud-input-error {
    color: var(--vbhxh-mud-accent) !important;
}

.field-label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--vbhxh-mud-field-label);
    margin-bottom: 4px;
}

.required-mark {
    color: var(--vbhxh-mud-accent);
    font-weight: bold;
}

.custom-rounded .mud-input-outlined-border,
.custom-rounded.mud-input-control .mud-input-outlined-border {
    border-radius: var(--vbhxh-mud-field-radius) !important;
}

.custom-rounded.mud-input-control:focus-within .mud-input-outlined-border,
.custom-rounded .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--vbhxh-mud-accent) !important;
}

.custom-rounded.mud-input-control.mud-input-error .mud-input-outlined-border,
.custom-rounded .mud-input-control.mud-input-error .mud-input-outlined-border {
    border-color: var(--vbhxh-mud-accent) !important;
}

.custom-rounded-menu .mud-selected-item,
.mud-popover .mud-list-item.mud-selected-item,
.search-select-item-selected {
    background-color: var(--vbhxh-mud-accent-soft) !important;
}

.custom-rounded-menu,
.search-select-popover,
.mud-popover {
    --mud-palette-primary: var(--vbhxh-mud-accent);
    --mud-palette-primary-hover: var(--vbhxh-mud-accent-soft);
}

.custom-rounded-menu .mud-selected-item .mud-typography,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
.mud-popover .mud-list-item.mud-selected-item .mud-typography,
.search-select-item-selected {
    color: var(--vbhxh-mud-accent) !important;
}

.custom-rounded-menu .mud-list-item.mud-selected-item,
.custom-rounded-menu .mud-list-item.mud-selected-item:hover,
.custom-rounded-menu .mud-list-item.mud-selected-item.mud-primary-hover,
.custom-rounded-menu .mud-list-item.mud-selected-item.mud-primary-hover:hover,
.mud-popover .mud-list-item.mud-selected-item,
.mud-popover .mud-list-item.mud-selected-item:hover,
.mud-popover .mud-list-item.mud-selected-item.mud-primary-hover,
.mud-popover .mud-list-item.mud-selected-item.mud-primary-hover:hover,
.search-select-item-selected,
.search-select-item-selected:hover {
    background-color: var(--vbhxh-mud-accent-soft) !important;
    color: var(--vbhxh-mud-accent) !important;
}

.custom-rounded-menu .mud-list-item.mud-selected-item .mud-list-item-text,
.custom-rounded-menu .mud-list-item.mud-selected-item .mud-typography,
.custom-rounded-menu .mud-list-item.mud-selected-item .mud-list-item-icon,
.custom-rounded-menu .mud-list-item.mud-selected-item .mud-icon-root,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
.mud-popover .mud-list-item.mud-selected-item .mud-typography,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-icon,
.mud-popover .mud-list-item.mud-selected-item .mud-icon-root,
.search-select-item-selected,
.search-select-item-selected * {
    color: var(--vbhxh-mud-accent) !important;
}

.custom-rounded-menu .mud-list-item.mud-selected-item.mud-primary-hover:hover,
.custom-rounded-menu .mud-list-item:hover,
.mud-popover .mud-list-item:hover,
.search-select-item:hover {
    background-color: var(--vbhxh-mud-accent-soft-hover) !important;
}

.mud-picker-calendar-day.mud-selected {
    background-color: var(--vbhxh-mud-accent) !important;
    color: white !important;
}

.mud-picker-toolbar {
    background-color: var(--vbhxh-mud-accent) !important;
}

.mud-input-control:not(.mud-select) .mud-input input[readonly],
.mud-input-control:not(.mud-select) .mud-input textarea[readonly] {
    background-color: var(--vbhxh-mud-field-disabled-bg) !important;
    color: var(--vbhxh-mud-field-disabled-text) !important;
    cursor: default !important;
    border-radius: var(--vbhxh-mud-field-radius) !important;
}

.mud-disabled .mud-input-slot,
.mud-input.mud-disabled,
.mud-input-control.mud-disabled .mud-input-slot {
    background-color: var(--vbhxh-mud-field-disabled-bg) !important;
    color: var(--vbhxh-mud-field-disabled-text) !important;
    border-radius: var(--vbhxh-mud-field-radius) !important;
}

.mud-input.mud-disabled.mud-input-outlined {
    border-radius: var(--vbhxh-mud-field-radius) !important;
    overflow: hidden;
}

.mud-input.mud-disabled .mud-input-adornment-text,
.mud-input.mud-disabled .mud-input-adornment .mud-typography {
    color: var(--vbhxh-mud-field-disabled-adornment) !important;
}

.search-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: transparent;
    cursor: default;
}

.search-select-wrapper {
    position: relative;
}

.search-select-wrapper--open {
    z-index: 1301;
}

.search-select-popover {
    z-index: 1302;
}

.search-select-item,
.search-select-item-selected {
    cursor: pointer;
}

.search-select-item-selected {
    font-weight: 600;
}

.search-select-popover * {
    font-size: 14px !important;
}

.file-upload-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.file-upload-name {
    flex: 1 1 auto;
    min-width: 0;
}

.file-upload-name .mud-input-outlined-border {
    border-right: none !important;
    border-radius: var(--vbhxh-mud-field-radius) 0 0 var(--vbhxh-mud-field-radius) !important;
}

.file-upload-trigger {
    display: flex;
    flex: 0 0 auto;
}

.file-upload-trigger > div,
.file-upload-trigger > span {
    display: flex;
}

.file-upload-button {
    height: 100%;
    min-height: 40px;
    margin: 3px 0;
    border-radius: 0 var(--vbhxh-mud-field-radius) var(--vbhxh-mud-field-radius) 0 !important;
    box-shadow: none !important;
}
/* =====================================================
   VBHXH GLOBAL MudBlazor Theme Override 
   Màu chủ đạo: #EE0033 (Đỏ Viettel)
   Áp dụng cho toàn bộ dự án: TextField, Select, DatePicker, Checkbox, Button, etc.
   ===================================================== */

/* --- MudCheckbox: Checked state --- */
.mud-checkbox.mud-checkbox-true .mud-icon-root {
    color: #EE0033 !important;
}

/* --- MudRadio: Checked state --- */
.mud-radio.mud-checked .mud-icon-root {
    color: #EE0033 !important;
}

/* --- MudSwitch: Checked state --- */
.mud-switch.mud-checked .mud-switch-track {
    background-color: rgba(238, 0, 51, 0.5) !important;
}

.mud-switch.mud-checked .mud-switch-thumb {
    background-color: #EE0033 !important;
}

/* --- MudButton: Primary/Error màu đỏ --- */
.mud-button-filled.mud-button-filled-error,
.color-error {
    background-color: #EE0033 !important;
    color: white !important;
}

    .mud-button-filled.mud-button-filled-error:hover,
    .color-error:hover {
        background-color: #CC002B !important;
    }

/* --- MudButton: Outlined Error --- */
.mud-button-outlined.mud-button-outlined-error {
    border-color: #EE0033 !important;
    color: #EE0033 !important;
}

    .mud-button-outlined.mud-button-outlined-error:hover {
        background-color: rgba(238, 0, 51, 0.08) !important;
    }

/* --- MudChip: Error color --- */
.mud-chip.mud-chip-error {
    background-color: #EE0033 !important;
    color: white !important;
}

/* --- MudTabs: Active tab indicator --- */
.mud-tabs .mud-tab-slider {
    background-color: #EE0033 !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: #EE0033 !important;
}

/* --- MudProgressCircular: Loading spinner --- */
.mud-progress-circular.mud-error svg circle {
    stroke: #EE0033 !important;
}

/* --- MudAlert: Error variant --- */
.mud-alert.mud-alert-error {
    background-color: rgba(238, 0, 51, 0.1) !important;
    color: #EE0033 !important;
}

/* --- Links màu đỏ --- */
a.text-error, .mud-link.mud-error-text {
    color: #EE0033 !important;
}

/* --- MudPagination: Selected page --- */
.mud-pagination-item.mud-pagination-selected {
    background-color: #EE0033 !important;
    color: white !important;
}

/* --- Upload zone hover state --- */
.upload-zone {
    border: 2px dashed #E0E0E0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background-color: #FAFAFA;
    cursor: pointer;
    transition: all 0.3s;
}

    .upload-zone:hover {
        border-color: #EE0033;
        background-color: #FFF5F6;
    }


.vt-dialog-wrapper {
    z-index: 1450 !important;
}