:root {
    --size-0: 0.55rem;
    --size-1: 0.75rem;
    --size-2: 0.825rem;
    --size-3: 0.875rem;
    --size-4: 0.975rem;
    --size-5: 1.025rem;
    --size-6: 1.125rem;
    --size-7: 1.225rem;
    --size-8: 1.5rem;
    --size-9: 2rem;
    --rz-text-font-family: 'Lexend', sans-serif !important;
}

/* ===== LOADING SCREEN ===== */
#app:has(.loading-progress) {
    --lp-size: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f7f7fb;
}
.hidden {
    display: none !important;
}
/* Fallback cho trình duyệt chưa hỗ trợ :has */
@supports not(selector(:has(*))) {
    #app {
        position: relative;
        min-height: 100vh;
        background: #f7f7fb;
    }

        #app .loading-progress {
            --lp-size: 104px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: var(--lp-size);
            height: var(--lp-size);
        }

        #app .loading-progress-text {
            position: absolute;
            left: 50%;
            top: calc(50% + (var(--lp-size) / 2) + 8px);
            transform: translateX(-50%);
            margin: 0;
        }
}
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}
/* Spinner */
.loading-progress {
    width: var(--lp-size, 104px);
    height: var(--lp-size, 104px);
    animation: lp-rotate 1.1s linear infinite;
}

    .loading-progress circle {
        fill: none;
        stroke-width: 8;
        stroke-linecap: round;
    }

        .loading-progress circle:first-of-type {
            stroke: rgba(103, 80, 164, .18);
        }

        .loading-progress circle:last-of-type {
            stroke: #6750A4;
            stroke-dasharray: 250;
            stroke-dashoffset: 180;
            animation: lp-dash 1.35s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(103, 80, 164, .45));
        }

@keyframes lp-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes lp-dash {
    0% {
        stroke-dashoffset: 250;
    }

    50% {
        stroke-dashoffset: 90;
    }

    100% {
        stroke-dashoffset: 250;
    }
}

/* Loading text */
.loading-progress-text {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #1f1f1f;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.1;
}

    .loading-progress-text::before {
        content: "Đang tải trang, vui lòng đợi trong giây lát";
        font-weight: 600;
        font-size: 0.93rem;
        line-height: 1.1;
        color: #555;
        margin-bottom: 4px;
    }

/* ===== ERROR UI ===== */
#blazor-error-ui {
    display: none;
}

    #blazor-error-ui[style*="display: block"] {
        display: flex !important;
        align-items: center;
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        background: #ffffff;
        color: #1a1a1a;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
        padding: 10px 12px;
        gap: 10px;
        z-index: 2147483647;
        font: 500 .94rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }

    #blazor-error-ui .reload {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 7px;
        background: #6750A4;
        color: #fff !important;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: .2px;
        transition: filter .2s;
    }

        #blazor-error-ui .reload:hover {
            filter: brightness(.92);
        }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        font-size: 1.1rem;
        color: #8a8aa8;
    }

/* ===== CAROUSEL COMPONENT ===== */
.md3-tk-carrousel {
    position: relative;
    width: var(--md3-tk-carrousel-width);
    height: var(--md3-tk-carrousel-height);
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--md-sys-color-surface-container, #e7e0ec);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    user-select: none;
    touch-action: pan-y;
}

.md3-tk-carrousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.md3-tk-carrousel-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.md3-tk-carrousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md3-tk-carrousel-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* Carousel Overlay */
.md3-tk-carrousel-overlay {
    position: absolute;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    z-index: 5;
    max-width: 600px;
}

.md3-tk-carrousel-overlay-dark {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.md3-tk-carrousel-overlay-top {
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.md3-tk-carrousel-overlay-top-left {
    top: 0;
    left: 0;
}

.md3-tk-carrousel-overlay-top-right {
    top: 0;
    right: 0;
}

.md3-tk-carrousel-overlay-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.md3-tk-carrousel-overlay-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.md3-tk-carrousel-overlay-bottom-left {
    bottom: 0;
    left: 0;
}

.md3-tk-carrousel-overlay-bottom-right {
    bottom: 0;
    right: 0;
}

.md3-tk-carrousel-overlay-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.md3-tk-carrousel-overlay-description {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

.md3-tk-carrousel-overlay-button {
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    background-color: var(--md-sys-color-primary, #6750a4);
    color: var(--md-sys-color-on-primary, #ffffff);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

    .md3-tk-carrousel-overlay-button:hover {
        background-color: var(--md-sys-color-primary-container, #eaddff);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    }

/* Carousel Navigation */
.md3-tk-carrousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: var(--md-sys-color-surface-container-high, #ece6f0);
    color: var(--md-sys-color-on-surface, #1c1b1f);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    z-index: 10;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

    .md3-tk-carrousel-nav:hover:not(:disabled) {
        background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
        opacity: 1;
    }

    .md3-tk-carrousel-nav:active:not(:disabled) {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    }

.md3-tk-carrousel-nav-disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.md3-tk-carrousel-nav-prev {
    left: 16px;
}

.md3-tk-carrousel-nav-next {
    right: 16px;
}

.md3-tk-carrousel-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Carousel Indicators */
.md3-tk-carrousel-indicators {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    align-items: center;
}

.md3-tk-carrousel-indicators-vertical {
    flex-direction: column;
    left: auto;
}

.md3-tk-carrousel-indicator {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background-color: var(--md-sys-color-on-surface, #1c1b1f);
    opacity: 0.38;
    cursor: pointer;
    padding: 0;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

    .md3-tk-carrousel-indicator:hover {
        opacity: 0.62;
        transform: scale(1.2);
    }

.md3-tk-carrousel-indicator-active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--md-sys-color-primary, #6750a4);
    opacity: 1;
}

.md3-tk-carrousel-indicators-vertical .md3-tk-carrousel-indicator-active {
    width: 8px;
    height: 24px;
}

.md3-tk-carrousel-indicator-active:hover {
    transform: scale(1);
    opacity: 1;
}

/* Carousel Thumbnails */
.md3-tk-carrousel-thumbnails {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    overflow-x: auto;
    scrollbar-width: thin;
    z-index: 10;
}

.md3-tk-carrousel-thumbnail {
    flex: 0 0 80px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease;
    background: var(--md-sys-color-surface-variant, #e7e0ec);
    padding: 0;
}

    .md3-tk-carrousel-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.md3-tk-carrousel-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.md3-tk-carrousel-thumbnail:hover {
    transform: scale(1.05);
}

.md3-tk-carrousel-thumbnail-active {
    border-color: var(--md-sys-color-primary, #6750a4);
    transform: scale(1.05);
}

/* Carousel Progress */
.md3-tk-carrousel-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.md3-tk-carrousel-progress-bar {
    height: 100%;
    background-color: var(--md-sys-color-primary, #6750a4);
    transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Carousel Counter */
.md3-tk-carrousel-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 16px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
    backdrop-filter: blur(8px);
}

/* Carousel Dark Mode */
@media (prefers-color-scheme: dark) {
    .md3-tk-carrousel {
        background-color: var(--md-sys-color-surface-container, #1c1b1f);
    }

    .md3-tk-carrousel-nav {
        background-color: var(--md-sys-color-surface-container-high, #2b2930);
        color: var(--md-sys-color-on-surface, #e6e1e5);
    }

        .md3-tk-carrousel-nav:hover:not(:disabled) {
            background-color: var(--md-sys-color-surface-container-highest, #36343b);
        }
}

/* ===== CSS VARIABLES ===== */


html {
    font-size: var(--size-1); /* hoặc 14px */
}
/* ===== CUSTOM COMPONENTS ===== */

/* Badge */
.tk-badge {
    text-transform: none;
    min-width: unset !important;
    width: auto !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    height: auto !important;
    display: inline-flex !important;
}

.tk-badge-content {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* Buttons */
.btn-tk {
    min-width: 100px;
}

    .btn-tk.shine-btn {
        position: relative;
        overflow: hidden;
        transition: all 0.25s ease;
    }

        .btn-tk.shine-btn:hover {
            transform: translateY(-0.1875rem);
            box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.25), 0 0 var(--size-3) rgba(255, 255, 255, 0.15);
        }

        .btn-tk.shine-btn::after {
            content: '';
            position: absolute;
            inset: 0 auto 0 -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            pointer-events: none;
            transition: all 0.7s ease;
        }

        .btn-tk.shine-btn:hover::after {
            left: 125%;
        }

@media (max-width: 768px) {
    .rz-group-header .rz-column-picker,
    .tk-grid-header-text,
    .btn-tk .rz-button-text,
    .btn-tk-outline .rz-button-text {
        display: none !important;
    }
    .btn-tk,
    .btn-tk-outline {
        width: 30px !important;
        height: 30px !important;
    }
}


/* Outline Buttons */
.btn-tk-outline {
    border: 1px solid currentColor !important;
}

    .btn-tk-outline.shine-btn {
        position: relative;
        overflow: hidden;
        background: transparent;
        transition: all 0.25s ease;
    }

        .btn-tk-outline.shine-btn:hover {
            transform: translateY(-0.1875rem);
            box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.15), 0 0 0.75rem rgba(79, 70, 229, 0.3);
        }

        .btn-tk-outline.shine-btn::after {
            content: '';
            position: absolute;
            inset: 0 auto 0 -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(79, 70, 229, 0) 0%, rgba(79, 70, 229, 0.25) 50%, rgba(79, 70, 229, 0) 100%);
            transform: skewX(-25deg);
            pointer-events: none;
            transition: all 0.7s ease;
        }

        .btn-tk-outline.shine-btn:hover::after {
            left: 125%;
        }


/* TextBox */
.rz-text-body1 {
    font-size: var(--size-1) !important;
    font-weight: 500 !important;
}

.tk-textbox {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;
    height: 2rem !important;
    font-size: var(--size-1) !important;
    border-radius: 1rem !important;
}

    .tk-textbox input {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 400 !important;
        height: 2rem !important;
        font-size: var(--size-1) !important;
        border-radius: 1rem !important;
    }

    .tk-textbox .rz-numeric-button {
        margin-right: 0.3125rem !important;
    }

/* Dropdown */
.tk-dropdown, .tk-multi-dropdown {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;
    height: 2rem !important;
    font-size: var(--size-1) !important;
    border-radius: 1rem !important;
}

    .tk-dropdown .rz-dropdown .rz-inputtext {
        margin-top: 0.3125rem !important;
        display: block !important;
    }

    .tk-dropdown .rz-dropdown-label {
        display: block !important;
        overflow: visible !important;
    }

    .tk-dropdown .rz-dropdown-clear-icon,
    .tk-dropdown .rz-corner-right {
        margin-top: 0.5125rem !important;
        display: block !important;
    }
    .tk-dropdown .rz-dropdown-trigger-icon {
        margin-top: -3px !important;
    }

.rz-dropdown-item rz-multiselect-item-content {
    font-size: var(--size-1) !important;
    padding: 0.65rem 0.75rem !important;
}

.rz-dropdown-item span {
    font-size: var(--size-1) !important;
    padding: 0.45rem 0.75rem !important;
}

.rz-multiselect-item .rz-multiselect-item-content {
    font-size: var(--size-1) !important;
}

/* =========================
   MATERIAL 3 TOKENS - LIGHT
   ========================= */
.customer-layout .rz-material {
    --md3-primary: #5B5B5B;
    --md3-on-primary: #FFFFFF;
    --md3-primary-container: #E0E0E0;
    --md3-on-primary-container: #1A1A1A;
    --md3-secondary: #5F5F5F;
    --md3-secondary-container: #E4E4E4;
    --md3-on-secondary-container: #1C1C1C;
    /* Surfaces (Light) */
    --md3-surface: #FFFFFF;
    --md3-surface-dim: #E8E8E8;
    --md3-surface-bright: #FFFFFF;
    --md3-surface-container-lowest: #FFFFFF;
    --md3-surface-container-low: #F8F8F8;
    --md3-surface-container: #F4F4F4;
    --md3-surface-container-high: #EEEEEE;
    --md3-surface-container-highest: #E8E8E8;
    --md3-on-surface: #1A1A1A;
    --md3-on-surface-variant: #444444;
    --md3-outline: #767676;
    --md3-outline-variant: #C7C7C7;
    --md3-shadow: rgba(0, 0, 0, 0.08);
    /* Scrollbar (LIGHT) */
    --md3-scrollbar-track: var(--md3-surface-container-low);
    --md3-scrollbar-thumb: rgba(0, 0, 0, 0.22);
    --md3-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38);
    --md3-scrollbar-corner: var(--md3-surface-container-low);
    --md3-scrollbar-size: 0.5rem;
    --md3-scrollbar-size-xs: 0.375rem;
    --md3-scrollbar-radius: 0.5rem;
    --md3-scrollbar-border: 0.125rem;
}

/* =========================
   MATERIAL 3 TOKENS - DARK
   ========================= */
.customer-layout .rz-material-dark {
    --md3-primary: #B39DFF;
    --md3-on-primary: #1E0A47;
    --md3-primary-container: #3D2B66;
    --md3-on-primary-container: #E8DDFF;
    --md3-secondary: #D0BCFF;
    --md3-secondary-container: #2A1B4D;
    --md3-on-secondary-container: #F3E8FF;
    /* Surfaces (Dark) */
    --md3-surface: #000000;
    --md3-surface-dim: #000000;
    --md3-surface-bright: #0D0D0D;
    --md3-surface-container-lowest: #121212;
    --md3-surface-container-low: #0A0A0A;
    --md3-surface-container: #050505;
    --md3-surface-container-high: #141414;
    --md3-surface-container-highest: #1A1A1A;
    --md3-on-surface: #FFFFFF;
    --md3-on-surface-variant: #E0E0E0;
    --md3-outline: #333333;
    --md3-outline-variant: #292929;
    --md3-shadow: rgba(0, 0, 0, 0.8);
    /* Scrollbar (DARK) */
    --md3-scrollbar-track: var(--md3-surface-container);
    --md3-scrollbar-thumb: rgba(255, 255, 255, 0.28);
    --md3-scrollbar-thumb-hover: rgba(255, 255, 255, 0.48);
    --md3-scrollbar-corner: var(--md3-surface-container);
    --md3-scrollbar-size: 0.5rem;
    --md3-scrollbar-size-xs: 0.375rem;
    --md3-scrollbar-radius: 0.5rem;
    --md3-scrollbar-border: 0.125rem;
}

/* =========================
   BASE LAYOUT
   ========================= */
.customer-layout .rz-layout {
    background: var(--md3-surface) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.customer-layout .rz-sidebar {
    width: 230px !important;
}


.customer-layout .rz-header,
.customer-layout .rz-sidebar,
.customer-layout .rz-body {
    background: var(--md3-surface-container-low) !important;
    border: none !important;
    box-shadow: none !important;
}

.customer-layout .rz-header {
    height: 4rem !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.customer-layout .rz-body {
    padding: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Body Container */
.customer-layout .md3-body-container {
    background: var(--md3-surface-container-lowest) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    min-height: calc(100vh - 10.25rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.customer-layout .rz-navigation-item-wrapper {
    line-height: 6px !important;
}

.customer-layout .rz-panel-menu {
    margin-top: var(--size-1) !important;
    margin-bottom: var(--size-2) !important;
}
    .customer-layout .rz-panel-menu .rz-navigation-item {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

.rz-context-menu {
    font-size:var(--size-1);
    border-radius:6px;
}
    .rz-context-menu i {
        font-size: var(--size-5);
    }

    .rz-menuitem .rz-menuitem-icon {
        font-size: var(--size-5) !important;
        margin-top: 1px !important;
    }

.customer-layout .rz-navigation-item-link {
    padding-block: var(--size-2) !important;
}
/* Footer */
.customer-layout .rz-footer {
    background: var(--md3-surface-container-low) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem 1.5rem !important;
}

/* =========================
   SIDEBAR - DESKTOP WIDTH CONTROL
   ========================= */


/* =========================
   NAVIGATION / MENU
   ========================= */
.customer-layout .rz-panel-menu {
    background: transparent !important;
    border: none !important;
}

    .customer-layout .rz-panel-menu > .rz-panel-menu-item {
        border-radius: 1.75rem !important;
        margin: 0.125rem 0 !important;
        padding: 0 !important;
        min-height: 2.25rem !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        position: relative !important;
    }

        .customer-layout .rz-panel-menu > .rz-panel-menu-item::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            background: transparent !important;
            border-radius: 1.75rem !important;
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            z-index: 0 !important;
        }

        .customer-layout .rz-panel-menu > .rz-panel-menu-item:hover::before {
            background: var(--md3-surface-container-highest) !important;
        }

        .customer-layout .rz-panel-menu > .rz-panel-menu-item.rz-state-active::before {
            background: var(--md3-secondary-container) !important;
        }

.customer-layout .rz-panel-menu-item > .rz-navigation-item-link,
.customer-layout .rz-panel-menu-item > .rz-panel-menu-item-wrapper {
    padding: 0.375rem 0.75rem !important;
    min-height: 2.25rem !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

.customer-layout .rz-panel-menu-item-icon {
    font-size: var(--size-3) !important;
    color: var(--md3-on-surface-variant) !important;
    width: var(--size-3) !important;
    height: var(--size-3) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.customer-layout .rz-panel-menu-item.rz-state-active .rz-panel-menu-item-icon,
.customer-layout .rz-panel-menu-item:hover .rz-panel-menu-item-icon {
    color: var(--md3-on-secondary-container) !important;
}

.customer-layout .rz-panel-menu-item-text {
    font-size: var(--size-1) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.2 !important;
    color: var(--md3-on-surface-variant) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    white-space: nowrap !important;
}

.customer-layout .rz-panel-menu-item.rz-state-active .rz-panel-menu-item-text,
.customer-layout .rz-panel-menu-item:hover .rz-panel-menu-item-text {
    color: var(--md3-on-secondary-container) !important;
}

.customer-layout .rz-panel-menu-item .rz-panel-menu {
    margin-top: 0.25rem !important;
    padding-left: 0 !important;
}

.customer-layout .rz-panel-menu-item .rz-panel-menu-item {
    border-radius: 1.75rem !important;
    min-height: 2rem !important;
    margin: 0.125rem 0 0.125rem 0.75rem !important;
}

    .customer-layout .rz-panel-menu-item .rz-panel-menu-item::before {
        border-radius: 1.75rem !important;
    }

    .customer-layout .rz-panel-menu-item .rz-panel-menu-item > .rz-navigation-item-link,
    .customer-layout .rz-panel-menu-item .rz-panel-menu-item > .rz-panel-menu-item-wrapper {
        padding: 0.3125rem 0.75rem !important;
        min-height: 2rem !important;
    }

.customer-layout .rz-panel-menu-item-icon.rzi-chevron-down,
.customer-layout .rz-panel-menu-item-icon.rzi-chevron-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 1.25rem !important;
}

/* =========================
   BUTTONS / TOGGLE / SEARCH
   ========================= */
.customer-layout .rz-sidebar-toggle {
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--md3-on-surface) !important;
    border-radius: 50% !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}

.customer-layout .layout-button {
    border-radius: 1.25rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    box-shadow: none !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    padding: 0.625rem 1.5rem !important;
    height: 2.5rem !important;
    margin-top: 4px;
}

.customer-layout .layout-button-dropdown {
    display: inline-flex;
}

    /* Button bên trái */
    .customer-layout .layout-button-dropdown .rz-variant-outlined {
        border-radius: 1.25rem 0 0 1.25rem !important;
        border-right: none !important;
        color: var(--md3-on-surface-variant) !important;
        border-color: var(--md3-outline) !important;
        text-transform: none !important;
    }

    /* Button icon bên phải */
    .customer-layout .layout-button-dropdown .rz-button-icon-only {
        border-radius: 0 1.25rem 1.25rem 0 !important;
        color: var(--md3-on-surface-variant) !important;
        border-color: var(--md3-outline) !important;
    }

    /* Đồng bộ border cho cả 2 nút */
    .customer-layout .layout-button-dropdown .rz-button {
        border-width: 1px !important;
    }

        /* Hover – Material 3 */
        .customer-layout .layout-button-dropdown .rz-button:hover {
            background-color: var(--md3-surface-container-highest) !important;
        }

        /* Focus – ring MD3 */
        .customer-layout .layout-button-dropdown .rz-button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--md3-primary-container);
        }

.rz-splitbutton-menu {
    border-radius: var(--size-1) !important;
}

    .rz-splitbutton-menu ul li a {
        font-size: var(--size-1) !important;
        font-weight: 500 !important;
        color: var(--md3-on-surface-variant) !important;
        padding: 0 !important;
    }

@media (max-width: 576px) {
    .customer-layout .layout-button-dropdown .rz-button-text {
        display: none !important;
    }

    /* Thu gọn padding cho nút bên trái */
    .customer-layout
    .layout-button-dropdown
    .rz-variant-outlined {
        padding-left: 0.5rem !important;
        padding-right: 0.75rem !important;
    }

    /* Icon cân giữa đẹp hơn */
    .customer-layout
    .layout-button-dropdown
    .rz-button-icon-left {
        margin-right: 0 !important;
    }
}

.customer-layout .layout-button.rz-button-icon-only {
    border-radius: 50% !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
}

.customer-layout .layout-button.rz-variant-text {
    background: transparent !important;
    color: var(--md3-on-surface-variant) !important;
}

    .customer-layout .layout-button.rz-variant-text:hover {
        background: var(--md3-surface-container-highest) !important;
    }

.customer-layout .rz-appearance-toggle {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.customer-layout .rz-alert {
    border-radius: 16px !important;
    height:35px;
}
    .customer-layout .rz-alert .rz-alert-message {
       margin : 0 !important;
    }
    .customer-layout .rz-alert .rz-button {
       margin-top:-4px;
    }


.customer-layout .layout-search-box {
    border-radius: 1.75rem !important;
    border: 1px solid var(--md3-outline-variant) !important;
    background: var(--md3-surface-container-high) !important;
    padding: 0.5rem 1rem !important;
    font-size: var(--size-1) !important;
    line-height: var(--size-3) !important;
    color: var(--md3-on-surface) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 2.5rem !important;
}

    .customer-layout .layout-search-box::placeholder {
        color: var(--md3-on-surface-variant) !important;
    }

/* =========================
   TYPOGRAPHY & LINK
   ========================= */
.customer-layout .header-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--md3-on-surface) !important;
}

.customer-layout .rz-link {
    color: var(--md3-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: var(--size-1) !important;
    letter-spacing: 0.1px !important;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    .customer-layout .rz-link:hover {
        text-decoration: underline !important;
    }

.customer-layout .rz-text-caption {
    color: var(--md3-on-surface-variant) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.4px !important;
}

.customer-layout .rz-navigation-item-text {
    font-size: var(--size-1) !important;
}




/* =========================
   SCROLLBAR
   ========================= */
.customer-layout .rz-body,
.customer-layout .rz-sidebar,
.customer-layout .md3-body-container {
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--md3-scrollbar-thumb) var(--md3-scrollbar-track);
}

    /* WebKit (Chrome, Edge, Safari) */
    .customer-layout .rz-body::-webkit-scrollbar,
    .customer-layout .rz-sidebar::-webkit-scrollbar,
    .customer-layout .md3-body-container::-webkit-scrollbar {
        width: var(--md3-scrollbar-size);
        height: var(--md3-scrollbar-size);
    }

    .customer-layout .rz-body::-webkit-scrollbar-track,
    .customer-layout .rz-sidebar::-webkit-scrollbar-track,
    .customer-layout .md3-body-container::-webkit-scrollbar-track {
        background: var(--md3-scrollbar-track);
    }

    .customer-layout .rz-body::-webkit-scrollbar-thumb,
    .customer-layout .rz-sidebar::-webkit-scrollbar-thumb,
    .customer-layout .md3-body-container::-webkit-scrollbar-thumb {
        background-color: var(--md3-scrollbar-thumb);
        border-radius: var(--md3-scrollbar-radius);
        border: var(--md3-scrollbar-border) solid transparent;
        background-clip: padding-box;
    }

        .customer-layout .rz-body::-webkit-scrollbar-thumb:hover,
        .customer-layout .rz-sidebar::-webkit-scrollbar-thumb:hover,
        .customer-layout .md3-body-container::-webkit-scrollbar-thumb:hover {
            background-color: var(--md3-scrollbar-thumb-hover);
        }

    .customer-layout .rz-body::-webkit-scrollbar-corner,
    .customer-layout .rz-sidebar::-webkit-scrollbar-corner,
    .customer-layout .md3-body-container::-webkit-scrollbar-corner {
        background: var(--md3-scrollbar-corner);
    }

/* Sidebar scrollbar darker */
.customer-layout .rz-sidebar {
    --md3-scrollbar-thumb: color-mix(in oklab, var(--md3-scrollbar-thumb), #000 10%);
    --md3-scrollbar-thumb-hover: color-mix(in oklab, var(--md3-scrollbar-thumb-hover), #000 10%);
}

.customer-layout .rz-material-dark .rz-sidebar,
.rz-material-dark .customer-layout .rz-sidebar {
    --md3-scrollbar-thumb: color-mix(in oklab, var(--md3-scrollbar-thumb), #fff 10%);
    --md3-scrollbar-thumb-hover: color-mix(in oklab, var(--md3-scrollbar-thumb-hover), #fff 10%);
}

/* =========================
   SIDEBAR COLLAPSED STATE
   ========================= */
.customer-layout .rz-sidebar {
    transition: width 0.2s cubic-bezier(0.4,0,0.2,1);
}

.customer-layout .sidebar-mobile-closed {
    width: 3rem !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-left: 8px !important;
}

/*.customer-layout .collapsed .rz-panel-menu-item-text {
    display: none !important;
}*/

.customer-layout .sidebar-mobile-expanded {
    width: 13rem !important;
    opacity: 1 !important;
    overflow: visible !important;
}



.customer-layout .rz-sidebar-collapsed i.rzi {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--size-3) !important;
    height: var(--size-3) !important;
    align-items: center !important;
    justify-content: center !important;
}

.customer-layout .rz-sidebar-collapsed .rz-panel-menu-item-text {
    display: none !important;
}

.customer-layout .rz-sidebar-collapsed .rz-panel-menu-item > .rz-navigation-item-link,
.customer-layout .rz-sidebar-collapsed .rz-panel-menu-item > .rz-panel-menu-item-wrapper {
    justify-content: center !important;
    padding: 0.375rem !important;
    min-height: 2.25rem !important;
    gap: 0 !important;
}

/* =========================
   FONT SIZE ADJUSTMENTS
   ========================= */
.customer-layout {
    font-size: var(--size-1) !important;
}

    .customer-layout .rz-button,
    .customer-layout i.rzi {
        font-size: var(--size-1) !important;
    }

    .customer-layout i.rzi {
        width: var(--size-4) !important;
        height: var(--size-4) !important;
        font-size: var(--size-4) !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

/* =========================
   DARK MODE OVERRIDES
   ========================= */
.rz-material-dark .customer-layout .rz-layout {
    background: var(--md3-surface) !important;
}

.rz-material-dark .customer-layout .rz-header {
    background: var(--md3-surface-container-highest) !important;
    box-shadow: 0 1px 0 0 var(--md3-outline-variant) !important;
    border: none !important;
}

.rz-material-dark .customer-layout .rz-sidebar {
    background: var(--md3-surface-container) !important;
    border-right: 1px solid var(--md3-outline-variant) !important;
    box-shadow: none !important;
}


.rz-material-dark .customer-layout .rz-body {
    background: var(--md3-surface-bright) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    position: relative;
}

    .rz-material-dark .customer-layout .rz-body::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    }

.rz-material-dark .customer-layout .md3-body-container {
    background: var(--md3-surface-container-lowest) !important;
    box-shadow: 0 0.375rem var(--size-3) rgba(0, 0, 0, 0.45), 0 0 0 1px var(--md3-outline-variant) !important;
}

.rz-material-dark .customer-layout .rz-footer {
    background: var(--md3-surface-container-low) !important;
    border-top: 1px solid var(--md3-outline-variant) !important;
    box-shadow: none !important;
}

.rz-material-dark .customer-layout .rz-panel-menu > .rz-panel-menu-item:hover::before {
    background: var(--md3-surface-container-high) !important;
}

.rz-material-dark .customer-layout .rz-panel-menu > .rz-panel-menu-item.rz-state-active::before {
    background: var(--md3-secondary-container) !important;
}

.rz-material-dark .customer-layout .layout-search-box {
    background: var(--md3-surface-container-high) !important;
    border: 1px solid var(--md3-outline-variant) !important;
}

    .rz-material-dark .customer-layout .layout-search-box:hover,
    .rz-material-dark .customer-layout .layout-search-box:focus {
        background: var(--md3-surface-container-highest) !important;
    }

.rz-material-dark .customer-layout .rz-sidebar-toggle:hover {
    background: var(--md3-surface-container-high) !important;
}

/* =========================
   REMOVE BORDERS
   ========================= */
.customer-layout .rz-panel-menu,
.customer-layout .rz-panel-menu-item,
.customer-layout .rz-panel-menu-item-wrapper {
    border: none !important;
}

/* =========================
   FORCE COLLAPSE SIDEBAR ON INIT
   ========================= */
.customer-layout.force-collapsed .rz-sidebar {
    width: 4.4rem !important;
}

    .customer-layout.force-collapsed .rz-sidebar .rz-panel-menu-item-text {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .customer-layout.force-collapsed .rz-sidebar .rz-panel-menu-item > .rz-navigation-item-link,
    .customer-layout.force-collapsed .rz-sidebar .rz-panel-menu-item > .rz-panel-menu-item-wrapper {
        justify-content: center !important;
    }

    .customer-layout.force-collapsed .rz-sidebar i.rzi {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


@media (max-width: 768px) {

    .customer-layout .rz-sidebar {
        margin-left: 0px !important;
    }

        .customer-layout .rz-sidebar.sidebar-mobile-closed {
            opacity: 0 !important;
            width: 0rem !important;
        }

    .rz-sidebar-responsive {
        opacity: inherit !important;
    }
}



/*
 =========================
   RESPONSIVE - TABLET (768px)
   ========================= */
@media (max-width: 768px) {
    .customer-layout .rz-header {
        height: 3.5rem !important;
        padding: 0 0.5rem !important;
        z-index: 1002 !important;
        position: relative !important;
    }

        .customer-layout .rz-header .rz-p-3 {
            padding: 0.5rem !important;
            gap: 0.5rem !important;
        }

    .customer-layout .layout-search-box {
        display: none !important;
    }

    .customer-layout .header-title {
        font-size: 0.875rem !important;
    }

    .customer-layout .rz-body {
        padding: 0.2rem !important;
    }

    .customer-layout .md3-body-container {
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
        min-height: calc(100vh - 8rem) !important;
    }

    .customer-layout .rz-footer {
        padding: 0.75rem 1rem !important;
    }

        .customer-layout .rz-footer .rz-text-caption {
            font-size: 0.75rem !important;
        }

        .customer-layout .rz-footer .rz-stack:last-child {
            gap: 0.75rem !important;
        }

    /*     ===== SIDEBAR MOBILE - FIXED ===== 
*/
    /*  .customer-layout .rz-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 3.5rem !important;
        z-index: 1001 !important;
        height: calc(100vh - 3.5rem) !important;
        width: 22.5rem !important;
        min-width: 17.5rem !important;
        max-width: 17.5rem !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0.125rem 0 0.5rem rgba(0, 0, 0, 0.15) !important;
    }*/


    .customer-layout .rz-sidebar-toggle {
        width: 2.25rem !important;
        height: 2.25rem !important;
        z-index: 1003 !important;
        position: relative !important;
    }
}


/*===================TEXTLINE===================*/
.tk-text-line {
    display: flex;
}
    /* ========== ORIENTATION ========== */
    .tk-text-line.horizontal {
        flex-direction: row;
        align-items: flex-start;
    }

    .tk-text-line.vertical {
        flex-direction: column;
    }
/* ========== TEXT ELEMENTS ========== */
.tk-text-line-title,
.tk-text-line-content {
    font-weight: 400;
    color: var(--rz-dark);
}

.tk-text-line-title {
    font-weight: 500;
}
/* ========== HORIZONTAL LAYOUT ========== */
.tk-text-line.horizontal .tk-text-line-title {
    min-width: 120px;
    flex-shrink: 0;
}

.tk-text-line.horizontal .tk-text-line-content {
    flex: 1;
}
/* ========== SIZE SCALE ========== */
.tk-text-line.size-0 .tk-text-line-title,
.tk-text-line.size-0 .tk-text-line-content {
    font-size: var(--size-0);
}

.tk-text-line.size-1 .tk-text-line-title,
.tk-text-line.size-1 .tk-text-line-content {
    font-size: var(--size-1);
}

.tk-text-line.size-2 .tk-text-line-title,
.tk-text-line.size-2 .tk-text-line-content {
    font-size: var(--size-2);
}

.tk-text-line.size-3 .tk-text-line-title,
.tk-text-line.size-3 .tk-text-line-content {
    font-size: var(--size-3);
}

.tk-text-line.size-4 .tk-text-line-title,
.tk-text-line.size-4 .tk-text-line-content {
    font-size: var(--size-4);
}

.tk-text-line.size-5 .tk-text-line-title,
.tk-text-line.size-5 .tk-text-line-content {
    font-size: var(--size-5);
}

.tk-text-line.size-6 .tk-text-line-title,
.tk-text-line.size-6 .tk-text-line-content {
    font-size: var(--size-6);
}

.tk-text-line.size-7 .tk-text-line-title,
.tk-text-line.size-7 .tk-text-line-content {
    font-size: var(--size-7);
}

.tk-text-line.size-8 .tk-text-line-title,
.tk-text-line.size-8 .tk-text-line-content {
    font-size: var(--size-8);
}






/*===================TEXTLINE===================*/


/*=========================BUTTON==========================*/
/* =========================
                   ADVANCED MODE – CARD STYLE
                   ========================= */
.rz-dialog-confirm-buttons button {
    border-radius: 1.25rem !important;
}


.btn-advanced {
    border-radius: 0.875rem !important;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.18);
    min-width: 12rem;
}

    .btn-advanced .rz-button-box {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    /* ICON TRÁI – VUÔNG, TO HƠN, PHỦ MỜ TRẮNG */
    .btn-advanced .rz-button-icon-left.left-icon {
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        width: 1.6rem !important;
        height: 1.6rem !important;
        padding: 0;
        border-radius: 0.4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        line-height: 1;
        margin-right: 0 !important;
    }

    /* TEXT CHÍNH + SUBTEXT PHÍA DƯỚI */
    .btn-advanced .rz-button-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0.01em;
        flex: 1;
    }

        .btn-advanced .rz-button-text::after {
            content: var(--tk-subtext);
            font-size: 0.7em;
            opacity: 0.78;
            margin-top: 0.18rem;
            font-weight: 400;
        }

    /* ICON PHẢI – NHẸ, ÍT ĐẬM */
    .btn-advanced .rz-button-icon-right.right-icon {
        font-size: 0.85rem;
        opacity: 0.45;
        transition: transform 0.25s ease, opacity 0.25s ease;
        margin-left: auto;
        width: auto !important;
        height: auto !important;
    }

    .btn-advanced:hover .rz-button-icon-right.right-icon {
        transform: translateX(0.3rem);
        opacity: 0.8;
    }

    /* =========================
                   SIZE MAPPING – CAO HƠN ~1.5x
                   ========================= */

    /* ExtraSmall */
    .btn-advanced.rz-button-xs {
        padding-block: 0.3rem !important;
        padding-inline: 0.8rem !important;
        min-height: 2.6rem;
        min-width: 140px;
        font-size: 0.75rem;
    }

        .btn-advanced.rz-button-xs .rz-button-icon-left.left-icon {
            width: 1.5rem !important;
            height: 1.5rem !important;
            font-size: 0.9rem;
        }

        .btn-advanced.rz-button-xs .rz-button-icon-right.right-icon {
            font-size: 0.65rem;
        }

    /* Small */
    .btn-advanced.rz-button-sm {
        padding-block: 0.7rem !important;
        padding-inline: 1.2rem !important;
        min-height: 3.6rem;
        font-size: 0.82rem;
    }

        .btn-advanced.rz-button-sm .rz-button-icon-left.left-icon {
            width: 2.1rem !important;
            height: 2.1rem !important;
        }

        .btn-advanced.rz-button-sm .rz-button-icon-right.right-icon {
            font-size: 0.75rem;
        }

    /* Medium */
    .btn-advanced.rz-button-md {
        padding-block: 0.9rem !important;
        padding-inline: 1.4rem !important;
        min-height: 4.0rem;
        font-size: 0.9rem;
    }

        .btn-advanced.rz-button-md .rz-button-icon-right.right-icon {
            font-size: 0.85rem;
        }

    /* Large */
    .btn-advanced.rz-button-lg {
        padding-block: 1.2rem !important;
        padding-inline: 1.6rem !important;
        min-height: 4.5rem;
        font-size: 0.98rem;
    }

        .btn-advanced.rz-button-lg .rz-button-icon-left.left-icon {
            width: 2.5rem !important;
            height: 2.5rem !important;
            font-size: 1.2rem;
        }

        .btn-advanced.rz-button-lg .rz-button-icon-right.right-icon {
            font-size: 1rem;
        }

/* =========================
                   PILL MODE – BUTTON TRÒN CHỈ CÓ ICON
                   ========================= */
.btn-pill {
    border-radius: 50% !important;
    padding: 0 !important;
    min-width: unset !important;
    aspect-ratio: 1 / 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    /* Ẩn text khi ở pill mode */
    .btn-pill .rz-button-text {
        display: none !important;
    }

    /* Icon căn giữa, không có margin */
    .btn-pill .rz-button-icon-left {
        margin: 0 !important;
    }

    /* Size mapping cho pill buttons */
    .btn-pill.rz-button-xs {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .btn-pill.rz-button-sm {
        width: 3rem;
        height: 3rem;
        font-size: 1.1rem;
    }

    .btn-pill.rz-button-md {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
    }

    .btn-pill.rz-button-lg {
        width: 4rem;
        height: 4rem;
        font-size: 1.4rem;
    }
/*=========================BUTTON==========================*/
/*=========================LINK==========================*/
.customer-layout .rz-link-text {
    font-weight: 500 !important;
    font-size: var(--size-1) !important;
    letter-spacing: 0.1px !important;
    color: var(--rz-primary) !important;
    text-decoration: none !important;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.customer-layout .rz-material .tk-breadcrum-last-text {
    font-weight: 500 !important;
    color: var(--rz-base-dark) !important;
}

.customer-layout .rz-material-dark .tk-breadcrum-last-text {
    font-weight: 500 !important;
    color: var(--rz-base-white) !important;
}
/*=========================LINK==========================*/
/*=========================DATAGRID==========================*/

.tk-text-container {
    display: inline-flex;
    gap: 5px;
}

.tk-grid-text {
    font-size: var(--size-1) !important;
    font-weight: 400 !important;
    margin-top: 0.4rem !important;
}

.tk-copy-icon {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-top: 2px;
    color: var(--rz-dark);
    margin-top: 0.42rem
}

    .tk-copy-icon:hover {
        opacity: 1;
    }

    .tk-copy-icon.copied {
        color: var(--rz-success);
    }
.tk-confirm-icon {
    color: #2e7d32;
}

.tk-cancel-icon {
    color: #c62828;
}
.tk-edit-icon {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
    color: var(--rz-primary);
    margin-top: 0.42rem !important;
}

.customer-layout .rz-column-picker {
    border-radius: 0.75rem !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

.customer-layout .rz-data-grid .rz-dropdown .rz-dropdown-label {
    font-weight: 500;
    color: var(--rz-dark);
    font-size: var(--size-1);
}

.customer-layout .rz-data-grid .rz-dropdown {
    height: 32px;
    border-radius: 1.75rem !important;
}

.rz-popup .rz-open {
    font-weight: 500;
    color: var(--rz-dark);
    font-size: var(--size-1);
}

.rz-multiselect-header span {
    font-weight: 500;
    color: var(--rz-dark);
    font-size: var(--size-1);
}

.rz-pager-summary, .rz-pagesize-text {
    color: var(--rz-dark) !important;
    font-size: var(--size-1) !important;
}

.tk-grid-header-text {
    font-weight: 600 !important;
    color: var(--rz-dark) !important;
    font-size: var(--size-3) !important;
    margin-top: 4px !important;
    margin-left: 4px !important;
}

.tk-inline-editor {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.tk-inline-input {
    flex: 1;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 4px 2px;
    font-size: var(--size-1);
    background: transparent;
    text-align: center;
    align-items: center;
}

    .tk-inline-input:focus {
        border-bottom-color: #1976d2;
    }

.tk-inline-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tk-inline-confirm,
.tk-inline-cancel {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}

    .tk-inline-confirm:hover {
        opacity: 1;
        color: var(--rz-primary);
    }

    .tk-inline-cancel:hover {
        opacity: 1;
        color: var(--rz-danger);
    }


    /* remove spinner */
    .tk-inline-input::-webkit-inner-spin-button,
    .tk-inline-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .tk-inline-input[type=number] {
        -moz-appearance: textfield;
    }

    .tk-inline-input:focus {
        border-bottom-color: #1976d2;
    }

.tk-badge-clickable {
    cursor: pointer !important;
    transition: opacity 0.2s ease;
}

    .tk-badge-clickable:hover {
        opacity: 0.8;
    }

    .tk-badge-clickable:active {
        opacity: 0.6;
    }






/* === SWITCH WRAPPER === */
.tk-inline-switch-wrapper {
    position: relative;
    display: inline-block;
    width: 36px; /* Giảm từ 44px */
    height: 18px; /* Giảm từ 24px */
    cursor: pointer;
}

/* === HIDDEN CHECKBOX === */
.tk-inline-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* === SLIDER === */
.tk-inline-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 18px; /* Điều chỉnh theo height */
    transition: 0.3s;
}

    .tk-inline-switch-slider:before {
        position: absolute;
        content: "";
        height: 14px; /* Giảm từ 18px */
        width: 14px; /* Giảm từ 18px */
        left: 2px; /* Giảm từ 3px */
        bottom: 2px; /* Giảm từ 3px */
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
    }

/* === CHECKED STATE === */
.tk-inline-switch-input:checked + .tk-inline-switch-slider {
    background-color: #2196F3;
}

    .tk-inline-switch-input:checked + .tk-inline-switch-slider:before {
        transform: translateX(18px); /* Điều chỉnh: 36px - 14px - 4px */
    }

/* === FOCUS === */
.tk-inline-switch-input:focus + .tk-inline-switch-slider {
    box-shadow: 0 0 1px #2196F3;
}

/* === DISABLED === */
.tk-inline-switch-input:disabled + .tk-inline-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === CHECKBOX STYLE === */
.tk-inline-checkbox {
    width: 18px; /* Cũng giảm cho cân đối */
    height: 18px;
    cursor: pointer;
    accent-color: #2196F3;
}
/*=========================DATAGRID==========================*/

/*=========================CHECKBOX==========================*/
.rz-chkbox {
    width: var(--size-3) !important;
    min-width: var(--size-3) !important;
    min-height: var(--size-3) !important;
    height: var(--size-3) !important;
    border-radius: 1.25rem !important;
}

.rz-chkbox-box {
    width: var(--size-2) !important;
    height: var(--size-2) !important;
    min-width: var(--size-2) !important;
    min-height: var(--size-2) !important;
    border-radius: 4px; /* MD3 */
    border: 2px solid var(--md3-outline);
    background-color: transparent;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

    .rz-chkbox-box.rz-state-active {
        background-color: var(--md3-primary);
        border-color: var(--md3-primary);
    }

/* icon check */
.rz-chkbox-icon {
    font-size: 16px !important;
    transform: scale(0.75) !important;
}

/*=========================CHECKBOX==========================*/
/*=========================DIALOG==========================*/
.customer-layout .rz-dialog {
    border-radius: 1rem !important;
}


/*=========================DIALOG==========================*/
/*=========================PROFILEDIALOG==========================*/
.tk-profile-card {
    width: 100%;
    max-width: 1000px;
}

.tk-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.tk-profile-row {
    padding: 10px 0;
}

.tk-profile-left {
    min-width: 260px;
}

.tk-profile-right {
    flex: 1;
    justify-content: flex-end;
}

.tk-profile-kyc {
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

/* Tablet */
@media (max-width: 768px) {
    .tk-profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tk-profile-right {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .tk-profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tk-avatar img {
        width: 56px;
        height: 56px;
    }
}

.tk-grid-dialog {
    min-width: 800px;
    width: 1200px;
}


@media (max-width: 768px) {
    .tk-grid-dialog {
        min-width: 600px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .tk-grid-dialog {
        min-width: 360px;
    }
}
/*=========================PROFILEDIALOG==========================*/
/*=========================CARDBALANCE==========================*/
/*=========================CARDBALANCE==========================*/


.tk-card-balance {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--rz-border-radius-4, 16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 140px;
}

    .tk-card-balance::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        opacity: 0.15;
        filter: blur(40px);
        transition: all 0.3s ease;
    }

    .tk-card-balance:hover {
        transform: translateY(-4px);
    }

    /* ========== VARIANTS (Radzen) ========== */
    /* Filled - Gradient */
    .tk-card-balance.variant-filled {
        background: linear-gradient(135deg, var(--card-bg-color) 0%, var(--card-gradient-color) 100%);
        color: var(--card-text-color);
        border: none;
    }

        .tk-card-balance.variant-filled::before {
            background: var(--card-accent-color);
        }

        .tk-card-balance.variant-filled:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

    /* Outlined */
    .tk-card-balance.variant-outlined {
        background: var(--rz-base-background-color, #ffffff);
        border: 2px solid var(--card-bg-color);
        color: var(--rz-text-color, #000000);
    }

        .tk-card-balance.variant-outlined:hover {
            background: color-mix(in srgb, var(--card-bg-color) 5%, transparent);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

    /* Flat - Gradient nhẹ */
    .tk-card-balance.variant-flat {
        background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-color) 12%, var(--rz-base-background-color, #ffffff)) 0%, color-mix(in srgb, var(--card-bg-color) 8%, var(--rz-base-background-color, #ffffff)) 100%);
        color: var(--card-bg-color);
        border: none;
    }

        .tk-card-balance.variant-flat::before {
            background: var(--card-bg-color);
            opacity: 0.08;
        }

        .tk-card-balance.variant-flat:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-color) 16%, var(--rz-base-background-color, #ffffff)) 0%, color-mix(in srgb, var(--card-bg-color) 12%, var(--rz-base-background-color, #ffffff)) 100%);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

    /* Text */
    .tk-card-balance.variant-text {
        background: transparent;
        color: var(--rz-text-color, #000000);
        border: 1px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

        .tk-card-balance.variant-text:hover {
            background: rgba(0, 0, 0, 0.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

/* ========== HEADER ========== */
.tk-card-balance-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.tk-card-balance-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tk-card-balance.variant-outlined .tk-card-balance-icon,
.tk-card-balance.variant-flat .tk-card-balance-icon,
.tk-card-balance.variant-text .tk-card-balance-icon {
    background: color-mix(in srgb, var(--card-bg-color) 15%, transparent);
    color: var(--card-bg-color);
}

.tk-card-balance:hover .tk-card-balance-icon {
    transform: scale(1.05) rotate(5deg);
}

.tk-card-balance-info {
    flex: 1;
}

/* ========== CONTENT ========== */
.tk-card-balance-title {
    font-size: var(--size-1, 14px);
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 4px;
    line-height: 1.4;
}

.tk-card-balance-content {
    font-size: var(--size-0, 12px);
    opacity: 0.7;
    line-height: 1.5;
}

/* ========== VALUE ========== */
.tk-card-balance-value {
    font-size: var(--size-6, 32px);
    font-weight: 700;
    margin-top: auto;
    letter-spacing: -0.5px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

/* ========== MORE BUTTON (Material 3) ========== */
.tk-card-balance-more {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: var(--size-0);
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    text-transform: none;
    letter-spacing: 0.1px;
}

    .tk-card-balance-more i {
        font-size: var(--size-0);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .tk-card-balance-more:hover i {
        transform: translateX(5px);
        opacity: 0.85;
    }

    .tk-card-balance-more:hover {
        background: rgba(0, 0, 0, 0.08);
        transform: translateX(3px);
    }

    .tk-card-balance-more:active {
        background: rgba(0, 0, 0, 0.12);
        transform: scale(0.96);
    }

/* Filled variant */
.tk-card-balance.variant-filled .tk-card-balance-more {
    color: var(--card-text-color);
}

    .tk-card-balance.variant-filled .tk-card-balance-more:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .tk-card-balance.variant-filled .tk-card-balance-more:active {
        background: rgba(255, 255, 255, 0.25);
    }

/* Outlined, Flat, Text variants */
.tk-card-balance.variant-outlined .tk-card-balance-more,
.tk-card-balance.variant-flat .tk-card-balance-more,
.tk-card-balance.variant-text .tk-card-balance-more {
    color: var(--card-bg-color);
}

    .tk-card-balance.variant-outlined .tk-card-balance-more:hover,
    .tk-card-balance.variant-flat .tk-card-balance-more:hover,
    .tk-card-balance.variant-text .tk-card-balance-more:hover {
        background: color-mix(in srgb, var(--card-bg-color) 8%, transparent);
    }

    .tk-card-balance.variant-outlined .tk-card-balance-more:active,
    .tk-card-balance.variant-flat .tk-card-balance-more:active,
    .tk-card-balance.variant-text .tk-card-balance-more:active {
        background: color-mix(in srgb, var(--card-bg-color) 12%, transparent);
    }

/* ========== COLORS ========== */
.tk-card-balance.color-primary {
    --card-bg-color: var(--rz-primary, #3f51b5);
    --card-gradient-color: color-mix(in srgb, var(--rz-primary, #3f51b5) 80%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-primary-lighter, #7986cb);
}

.tk-card-balance.color-secondary {
    --card-bg-color: var(--rz-secondary, #ff4081);
    --card-gradient-color: color-mix(in srgb, var(--rz-secondary, #ff4081) 80%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-secondary-lighter, #ff80ab);
}

.tk-card-balance.color-success {
    --card-bg-color: var(--rz-success, #4caf50);
    --card-gradient-color: color-mix(in srgb, var(--rz-success, #4caf50) 85%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-success-lighter, #81c784);
}

.tk-card-balance.color-info {
    --card-bg-color: var(--rz-info, #2196f3);
    --card-gradient-color: color-mix(in srgb, var(--rz-info, #2196f3) 80%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-info-lighter, #64b5f6);
}

.tk-card-balance.color-warning {
    --card-bg-color: var(--rz-warning, #ff9800);
    --card-gradient-color: color-mix(in srgb, var(--rz-warning, #ff9800) 85%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-warning-lighter, #ffb74d);
}

.tk-card-balance.color-danger {
    --card-bg-color: var(--rz-danger, #f44336);
    --card-gradient-color: color-mix(in srgb, var(--rz-danger, #f44336) 80%, #000000);
    --card-text-color: #ffffff;
    --card-accent-color: var(--rz-danger-lighter, #e57373);
}

.tk-card-balance.color-dark {
    --card-bg-color: var(--rz-dark, #212121);
    --card-gradient-color: #000000;
    --card-text-color: #ffffff;
    --card-accent-color: #424242;
}

.tk-card-balance.color-light {
    --card-bg-color: var(--rz-light, #f5f5f5);
    --card-gradient-color: #e0e0e0;
    --card-text-color: var(--rz-text-color, #000000);
    --card-accent-color: #e0e0e0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .tk-card-balance {
        padding: 20px;
        min-height: 140px;
    }

    .tk-card-balance-icon {
        width: 40px;
        height: 40px;
    }

    .tk-card-balance-value {
        font-size: var(--size-5, 24px);
    }

    .tk-card-balance-more {
        bottom: 12px;
        right: 12px;
        padding: 6px 10px;
        font-size: 13px;
    }
}



/*=========================CARDBALANCE==========================*/
/*=========================ACCORDION==========================*/
.rz-accordion span {
    font-size: var(--size-1) !important;
    font-weight: 500 !important;
    color: var(--rz-dark) !important;
}
/*=========================ACCORDION==========================*/

/*=========================LINK==========================*/


.tk-md-link {
    font-size: var(--size-1);
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

    .tk-md-link:hover {
        text-decoration: underline;
    }
/*=========================LINK==========================*/
/*=========================TABS==========================*/
.customer-layout .rz-tabview-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 3px !important;
    background: var(--rz-surface) !important;
    border: 1px solid var(--rz-base) !important;
    border-radius: 999px !important;
    /* ===== FLOATING (ELEVATION) ===== */
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .18) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: var(--size-0) !important;
}

.customer-layout .rz-tabview-panels {
    padding: 0 !important;
}

    .customer-layout .rz-tabview-panels .rz-tabview-panel {
        padding: 0 !important;
    }

.customer-layout.rz-tabview.rz-tabview-top > .rz-tabview-panels {
    border-top: var(--rz-border-base-50) !important;
}

.customer-layout .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.customer-layout .rz-tabview-nav li {
    flex: 0 0 auto !important; /* ưu tiên min-width */
    white-space: nowrap !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--rz-text-color) !important;
    padding: 4px 10px !important; /* ultra compact */
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 500 !important;
    min-height: 26px !important;
    min-width: 72px !important; /* desktop */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color .12s ease, box-shadow .12s ease !important;
}

    /* Text / icon */
    .customer-layout .rz-tabview-nav li a {
        color: inherit !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    /* Hover – giữ màu Radzen */
    .customer-layout .rz-tabview-nav li:hover {
        background-color: var(--rz-hover-color) !important;
    }

    /* ===== SELECTED ===== */
    .customer-layout .rz-tabview-nav li.rz-tabview-selected {
        background-color: var(--rz-primary) !important; /* đúng tone */
        color: var(--rz-white) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1) !important;
    }

    /* Remove Radzen underline */
    .customer-layout .rz-tabview-nav li::after {
        display: none !important;
    }

/* ===== TABLET ≤768px ===== */
@media (max-width: 768px) {
    .customer-layout .rz-tabview-nav {
        gap: 3px !important;
    }

        .customer-layout .rz-tabview-nav li {
            padding: 4px 8px !important;
            min-width: 64px !important;
            font-size: 0.8125rem !important;
        }
}

/* ===== MOBILE ≤480px ===== */
@media (max-width: 480px) {
    .customer-layout .rz-tabview-nav {
        gap: 2px !important;
        padding: 2px !important;
    }

        .customer-layout .rz-tabview-nav li {
            padding: 3px 6px !important;
            min-width: 56px !important;
            min-height: 24px !important;
            font-size: 0.75rem !important;
        }
}


.customer-layout .rz-tabview-nav li {
}

    .customer-layout .rz-tabview-nav li a {
        font-size: var(--size-3) !important;
        padding-block: 0rem !important;
        letter-spacing: 0.25px !important;
        font-size: var(--size-2) !important;
    }

        .customer-layout .rz-tabview-nav li a .rz-tabview-title {
            text-transform: none !important;
        }

/*=========================TABS==========================*/
/*=========================POPUP==========================*/
.floating-popup {
    position: fixed;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    pointer-events: auto;
}

/* ===== HEADER ===== */
.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--rz-base-200);
}

    .popup-header.draggable {
        cursor: move;
    }

/* TITLE CSS RIÊNG */
.popup-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* ===== BODY ===== */
.popup-body {
    padding: 10px;
    overflow: auto; /* SCROLL TỰ ĐỘNG */
    flex: 1;
}

/* ===== RESIZE ===== */
.resize-handle {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 2px;
    bottom: 2px;
    cursor: nwse-resize;
}


.container-phone-control .section-phone-actions {
    display: none !important;
}

/*=========================POPUP==========================*/
#m3-toast-container {
    position: fixed;
    top: 10%;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99999;
    pointer-events: none;
}

.m3-toast {
    min-width: 200px;
    max-width: 420px;
    padding: 6px 12px;
    border-radius: 12px;
    color: #fff;
    font-size: var(--size-1);
    font-weight: 500;
    box-shadow: 0 6px 12px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(24px) scale(.96);
    animation: toast-in 220ms cubic-bezier(.2,0,0,1) forwards;
    opacity : 0.8;
}

    /* 🎨 GRADIENT MATERIAL 3 */
    .m3-toast.success {
        background: linear-gradient(135deg, var(--rz-success), var(--rz-success-light) );
    }

    .m3-toast.error {
        background: linear-gradient(135deg, var(--rz-danger), var(--rz-danger-light) );
    }

    .m3-toast.warning {
        background: linear-gradient(135deg, var(--rz-warning), var(--rz-warning-light) );
    }

    .m3-toast.info {
        background: linear-gradient(135deg, var(--rz-info), var(--rz-info-light) );
    }

/* ICON */
.m3-toast-icon {
    font-size: 18px;
    opacity: .95;
}

/* ANIMATION */
@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateX(24px) scale(.96);
    }
}

@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }
}

/*=================SOCIAL BUTTON====================*/
.social-btn {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .social-btn:hover {
        transform: translateY(-1px) scale(1.08);
        background: rgba(0,0,0,0.04);
        box-shadow: 0 4px 10px rgba(0,0,0,.15), 0 0 0 2px rgba(0,0,0,.05);
    }

.rz-material-dark .social-btn:hover {
    background: rgba(255,255,255,0.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.12);
}

.social-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .18s ease;
}

/* Icon nổi hơn chút */
.social-btn:hover .social-img {
    transform: scale(1.05);
}
/*=================SOCIAL BUTTON====================*/