@charset "UTF-8";
/* =============================================================================
 * AZ.css — Hệ thống UI mặc định cho AZ Enterprise
 * -----------------------------------------------------------------------------
 * Cấu trúc theo ITCSS + CSS @layer:
 *
 *   1. LAYERS       — Khai báo cascade order (giảm 90% !important)
 *   2. TOKENS       — Design tokens (colors / spacing / radius / shadows / z-index / motion)
 *   3. THEME        — Light + Dark mode mapping (manual + prefers-color-scheme auto)
 *   4. RESET        — Normalize cơ bản
 *   5. BASE         — Element defaults
 *   6. LAYOUT       — az-container, az-main, az-form-grid
 *   7. COMPONENTS   — Buttons, Forms, Cards, Tables, Tabs, Paging, Badges,
 *                     Modal, Toast, Skeleton, Tooltip, Avatar, Switch,
 *                     Empty State, Status dot, Drawer, Progress, Divider
 *   8. UTILITIES    — AZ helpers + Tailwind-style utilities
 *   9. RESPONSIVE   — Media query overrides
 *  10. A11Y         — Reduced motion + focus-visible
 *  11. PRINT        — Print styles
 * ============================================================================= */


/* =============================================================================
 * 1. LAYERS — Khai báo trật tự cascade. Layer sau ghi đè layer trước.
 *             Nhờ @layer, hầu hết !important biến mất.
 * ============================================================================= */
@layer reset, tokens, base, layout, components, utilities, overrides;


/* =============================================================================
 * 2. TOKENS — Design tokens
 * ============================================================================= */
@layer tokens {
    :root {
        /* ---------- Safe area (iOS notch) ---------- */
        --az-safe-top: env(safe-area-inset-top);
        --az-safe-bottom: env(safe-area-inset-bottom);
        --az-safe-left: env(safe-area-inset-left);
        --az-safe-right: env(safe-area-inset-right);

        /* ---------- Brand colors (raw) ---------- */
        --az-brand-50:  #ecfeff;
        --az-brand-100: #cffafe;
        --az-brand-200: #a5f3fc;
        --az-brand-300: #67e8f9;
        --az-brand-400: #38bdc8;
        --az-brand-500: #1d96b2;   /* primary */
        --az-brand-600: #167a92;
        --az-brand-700: #155e75;
        --az-brand-800: #164e63;
        --az-brand-900: #083344;

        /* ---------- Neutral scale (raw) ---------- */
        --az-gray-50:  #f8fafc;
        --az-gray-100: #f1f5f9;
        --az-gray-200: #e2e8f0;
        --az-gray-300: #cbd5e1;
        --az-gray-400: #94a3b8;
        --az-gray-500: #64748b;
        --az-gray-600: #475569;
        --az-gray-700: #334155;
        --az-gray-800: #1e293b;
        --az-gray-900: #0f172a;

        /* ---------- Semantic accents (raw) ---------- */
        --az-success-500: #16a34a;  --az-success-600: #15803d;
        --az-warning-500: #f59e0b;  --az-warning-600: #d97706;
        --az-danger-500:  #dc2626;  --az-danger-600:  #b91c1c;
        --az-info-500:    #3b82f6;  --az-info-600:    #2563eb;
        --az-purple-500:  #a855f7;  --az-purple-600:  #9333ea;
        --az-amber-500:   #f59e0b;  --az-amber-600:   #d97706;

        /* ---------- Spacing scale (4px base) ---------- */
        --az-space-0: 0;
        --az-space-1: 0.25rem;   /*  4px */
        --az-space-2: 0.5rem;    /*  8px */
        --az-space-3: 0.75rem;   /* 12px */
        --az-space-4: 1rem;      /* 16px */
        --az-space-5: 1.25rem;   /* 20px */
        --az-space-6: 1.5rem;    /* 24px */
        --az-space-8: 2rem;      /* 32px */
        --az-space-10: 2.5rem;   /* 40px */
        --az-space-12: 3rem;     /* 48px */
        --az-space-16: 4rem;     /* 64px */

        /* ---------- Radius ---------- */
        --az-radius-none: 0;
        --az-radius-sm:   0.1875rem;  /*  3px - nút bấm chính */
        --az-radius-md:   0.375rem;   /*  6px */
        --az-radius-lg:   0.5rem;     /*  8px - card */
        --az-radius-xl:   0.75rem;    /* 12px - modal */
        --az-radius-full: 9999px;

        /* ---------- Shadow elevation ---------- */
        --az-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, .04);
        --az-shadow-sm:  0 1px 2px 0 rgba(15, 23, 42, .05);
        --az-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
        --az-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .05);
        --az-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .06);
        --az-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, .25);
        --az-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, .05);
        --az-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--az-color-primary) 30%, transparent);

        /* ---------- Z-index hierarchy ---------- */
        --az-z-base:        1;
        --az-z-sticky:      10;    /* table thead, sticky cols */
        --az-z-sticky-hi:   20;    /* sticky tfoot, sticky col + sticky thead intersection */
        --az-z-dropdown:    1000;  /* select2 dropdown trong context */
        --az-z-fixed:       1030;
        --az-z-drawer:      1040;
        --az-z-modal-bg:    1050;
        --az-z-modal:       1051;
        --az-z-popover:     1060;
        --az-z-select2:     1070;  /* select2 global container */
        --az-z-tooltip:     1080;
        --az-z-toast:       1090;

        /* ---------- Motion ---------- */
        --az-duration-instant: 75ms;
        --az-duration-fast:    150ms;
        --az-duration-base:    200ms;
        --az-duration-slow:    300ms;
        --az-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
        --az-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

        /* ---------- Typography ---------- */
        --az-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --az-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
        --az-text-xs:  0.75rem;
        --az-text-sm:  0.875rem;
        --az-text-base: 1rem;
        --az-text-lg:  1.125rem;
        --az-text-xl:  1.25rem;
        --az-text-2xl: 1.5rem;

        /* ---------- Sizing ---------- */
        --az-control-height-sm: 2rem;    /* 32px */
        --az-control-height-md: 2.5rem;  /* 40px */
        --az-control-height-lg: 3rem;    /* 48px */
        --az-control-line-height: 1.25;
        --az-control-padding-x: var(--az-space-2);
        --az-btn-radius: var(--az-radius-sm);
        --az-btn-height: var(--az-control-height-md);
        --az-input-height: var(--az-btn-height);

        /* ---------- Layout ---------- */
        --az-table-offset: 17.5rem;       /* chiều cao header + filter + paging — dùng cho table max-height */
    }
}


/* =============================================================================
 * 3. THEME — Light & Dark mode mappings
 * ============================================================================= */
@layer tokens {
    /* ---------- LIGHT (default) ---------- */
    :root {
        --az-color-primary:        var(--az-brand-500);
        --az-color-primary-hover:  var(--az-brand-600);
        --az-color-primary-active: var(--az-brand-700);

        /* Surface */
        --az-bg-body:         var(--az-gray-50);
        --az-bg-surface:      #ffffff;
        --az-bg-surface-alt:  var(--az-gray-50);
        --az-bg-surface-hover: var(--az-gray-100);
        --az-bg-overlay:      rgba(15, 23, 42, .5);

        /* Text */
        --az-text-main:    var(--az-gray-900);
        --az-text-muted:   var(--az-gray-500);
        --az-text-subtle:  var(--az-gray-400);
        --az-text-on-primary: #ffffff;
        --az-text-link:    var(--az-info-500);
        --az-text-link-hover: var(--az-info-600);

        /* Border */
        --az-border-color:        var(--az-gray-200);
        --az-border-color-strong: var(--az-gray-300);
        --az-border-color-subtle: var(--az-gray-100);

        /* Semantic — light variants */
        --az-success-bg:        #dcfce7;
        --az-success-border:    #bbf7d0;
        --az-success-text:      #166534;

        --az-warning-bg:        #fef3c7;
        --az-warning-border:    #fde68a;
        --az-warning-text:      #92400e;

        --az-danger-bg:         #fee2e2;
        --az-danger-border:     #fecaca;
        --az-danger-text:       #991b1b;

        --az-info-bg:           #dbeafe;
        --az-info-border:       #bfdbfe;
        --az-info-text:         #1e40af;

        --az-purple-bg:         #f3e8ff;
        --az-purple-border:     #e9d5ff;
        --az-purple-text:       #6b21a8;

        --az-amber-bg:          #fef3c7;
        --az-amber-border:      #fde68a;
        --az-amber-text:        #92400e;
    }

    /* ---------- DARK (manual: html.az-dark) ---------- */
    html.az-dark {
        --az-bg-body:         var(--az-gray-900);
        --az-bg-surface:      var(--az-gray-800);
        --az-bg-surface-alt:  var(--az-gray-900);
        --az-bg-surface-hover: var(--az-gray-700);
        --az-bg-overlay:      rgba(0, 0, 0, .7);

        --az-text-main:    var(--az-gray-50);
        --az-text-muted:   var(--az-gray-400);
        --az-text-subtle:  var(--az-gray-500);
        --az-text-link:    #60a5fa;
        --az-text-link-hover: #93c5fd;

        --az-border-color:        var(--az-gray-700);
        --az-border-color-strong: var(--az-gray-600);
        --az-border-color-subtle: var(--az-gray-800);

        /* Semantic — dark mode dùng tone tối + chữ sáng */
        --az-success-bg:        rgba(34, 197, 94, .15);
        --az-success-border:    rgba(34, 197, 94, .35);
        --az-success-text:      #4ade80;

        --az-warning-bg:        rgba(245, 158, 11, .15);
        --az-warning-border:    rgba(245, 158, 11, .35);
        --az-warning-text:      #fbbf24;

        --az-danger-bg:         rgba(239, 68, 68, .15);
        --az-danger-border:     rgba(239, 68, 68, .35);
        --az-danger-text:       #f87171;

        --az-info-bg:           rgba(59, 130, 246, .15);
        --az-info-border:       rgba(59, 130, 246, .35);
        --az-info-text:         #60a5fa;

        --az-purple-bg:         rgba(168, 85, 247, .15);
        --az-purple-border:     rgba(168, 85, 247, .35);
        --az-purple-text:       #c084fc;

        --az-amber-bg:          rgba(245, 158, 11, .15);
        --az-amber-border:      rgba(245, 158, 11, .35);
        --az-amber-text:        #fbbf24;

        --az-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, .3);
        --az-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, .35);
        --az-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, .4);
        --az-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, .5);
        --az-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, .55);
    }

    /* ---------- DARK (auto: theo OS) — chỉ áp dụng nếu user chưa override ---------- */
    @media (prefers-color-scheme: dark) {
        html:not(.az-light) {
            --az-bg-body:         var(--az-gray-900);
            --az-bg-surface:      var(--az-gray-800);
            --az-bg-surface-alt:  var(--az-gray-900);
            --az-bg-surface-hover: var(--az-gray-700);
            --az-bg-overlay:      rgba(0, 0, 0, .7);

            --az-text-main:    var(--az-gray-50);
            --az-text-muted:   var(--az-gray-400);
            --az-text-subtle:  var(--az-gray-500);

            --az-border-color:        var(--az-gray-700);
            --az-border-color-strong: var(--az-gray-600);
            --az-border-color-subtle: var(--az-gray-800);
        }
    }
}


/* =============================================================================
 * 4. RESET
 * ============================================================================= */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        outline: none;
    }
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        scrollbar-width: thin;
        scrollbar-color: var(--az-border-color) transparent;
    }
    img { display: inline; max-width: 100%; height: auto; }
    table { border-collapse: separate; border-spacing: 0; }
    button { font-family: inherit; cursor: pointer; }

    /* Scrollbar - WebKit */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--az-border-color); border-radius: var(--az-radius-full); }
    ::-webkit-scrollbar-thumb:hover { background: var(--az-text-muted); }
}


/* =============================================================================
 * 5. BASE — Element defaults
 * ============================================================================= */
@layer base {
    body {
        font-family: var(--az-font-sans);
        font-size: var(--az-text-base);
        background-color: var(--az-bg-body);
        color: var(--az-text-main);
        margin: 0;
        line-height: 1.5;
    }
    h1, h2, h3, h4, h5, h6, .h1 { font-weight: 700; color: var(--az-text-main); }
    a { color: var(--az-text-link); text-decoration: none; transition: color var(--az-duration-fast) var(--az-ease-out); }
    a:hover { color: var(--az-text-link-hover); }
    select { background-color: var(--az-bg-surface); color: var(--az-text-main); }

    /* Select2 global container — phải ở base vì nằm ngoài .az-main-content */
    body > .select2-container { z-index: var(--az-z-select2); }
}


/* =============================================================================
 * 6. LAYOUT — Page structure
 * ============================================================================= */
@layer layout {
    .az-container,
    .az-main {
        width: calc(100% - var(--az-space-8));
        margin: var(--az-space-4);
        position: relative;
    }
    .az-container.full,
    .az-main.full { margin: 0 var(--az-space-4); }

    .az-page-title {
        max-width: 50%;
        font-size: 1.2rem;
        font-weight: 700;
        margin: var(--az-space-2) 0;
        line-height: 2rem;
        color: var(--az-text-main);
    }
    .az-main.full > .az-page-title {
        width: calc(100% - var(--az-space-10));
        max-width: unset;
        margin: var(--az-space-5);
        font-size: 1.625rem;
        text-align: center;
        text-transform: uppercase;
    }

    .az-breadcrumb {
        max-width: 50%;
        position: absolute;
        top: var(--az-space-2);
        right: 0;
        font-size: 0.8rem;
        color: var(--az-text-main);
    }
    .az-breadcrumb a {
        margin: 0 var(--az-space-1);
        font-size: 1rem;
        color: var(--az-text-muted);
        display: inline-block;
    }
    .az-breadcrumb a:hover { color: var(--az-color-primary); }

    .az-main-content {
        width: 100%;
        margin-bottom: var(--az-space-4);
        padding: var(--az-space-4);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-sm);
        background-color: var(--az-bg-surface);
        position: relative;
    }

    /* Iframe mode */
    .az-main.frame { min-height: unset; }
    .az-main.frame > .az-page-title {
        width: calc(100% - var(--az-space-2));
        max-width: unset;
        margin: 0 var(--az-space-1) var(--az-space-1);
        font-size: 1.375rem;
        text-align: center;
        text-transform: uppercase;
    }
    .az-main.frame .az-breadcrumb { display: none; }

    /* Toolbar row */
    .az-toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--az-space-2);
        width: 100%;
        margin-bottom: var(--az-space-2);
    }
    .az-toolbar-row > label { margin: 0; display: inline-flex; align-items: center; color: var(--az-text-main); }

    /* Form Grid */
    .az-form-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: var(--az-space-4);
    }
    .az-form-label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--az-text-muted);
        margin-bottom: var(--az-space-1);
    }
}


/* =============================================================================
 * 7. COMPONENTS
 * ============================================================================= */
@layer components {

    /* ---------- 7a. BUTTONS ---------- */
    .az-btn {
        padding: 0 var(--az-space-4);
        height: var(--az-btn-height);
        line-height: 1.25;
        font-size: var(--az-text-base);
        text-decoration: none;
        background-color: var(--az-color-primary);
        border: 0;
        border-radius: var(--az-btn-radius);
        color: #ffffff;
        transition: background-color var(--az-duration-fast) var(--az-ease-out),
                    transform var(--az-duration-fast) var(--az-ease-out),
                    box-shadow var(--az-duration-fast) var(--az-ease-out);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--az-space-2);
        cursor: pointer;
        white-space: nowrap;
    }
    .az-btn:hover { background-color: var(--az-color-primary-hover); color: #ffffff; }
    .az-btn:active { background-color: var(--az-color-primary-active); transform: translateY(1px); }
    .az-btn i, .az-btn img { font-size: inherit; color: inherit; }

    /* Variants */
    .az-btn.green   { background-color: var(--az-success-500); }
    .az-btn.green:hover  { background-color: var(--az-success-600); }
    .az-btn.red     { background-color: var(--az-danger-500); }
    .az-btn.red:hover    { background-color: var(--az-danger-600); }
    .az-btn.amber   { background-color: var(--az-warning-500); }
    .az-btn.amber:hover  { background-color: var(--az-warning-600); }
    .az-btn.black   { background-color: var(--az-gray-700); }
    .az-btn.black:hover  { background-color: var(--az-gray-900); }
    .az-btn.outline {
        background-color: transparent;
        border: 1px solid var(--az-border-color-strong);
        color: var(--az-text-main);
    }
    .az-btn.outline:hover { background-color: var(--az-bg-surface-hover); color: var(--az-text-main); }
    .az-btn.ghost {
        background-color: transparent;
        color: var(--az-text-main);
    }
    .az-btn.ghost:hover { background-color: var(--az-bg-surface-hover); color: var(--az-text-main); }
    .az-btn.disabled,
    .az-btn:disabled,
    .az-btn[disabled] {
        background-color: var(--az-bg-surface-hover);
        color: var(--az-text-muted);
        cursor: not-allowed;
        pointer-events: none;
    }
    .az-btn.sm { height: 2rem; line-height: 2rem; padding: 0 var(--az-space-3); font-size: var(--az-text-sm); }
    .az-btn.lg { height: 3rem; line-height: 3rem; padding: 0 var(--az-space-6); font-size: var(--az-text-lg); }

    /* Loading state — chấm loading sau text */
    .az-btn.loading { position: relative; color: transparent !important; pointer-events: none; }
    .az-btn.loading::after {
        content: "";
        position: absolute;
        width: 1rem; height: 1rem;
        border: 2px solid rgba(255,255,255,.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: az-spin 0.6s linear infinite;
    }

    /* Icon button */
    .az-btn-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--az-btn-height);
        width: var(--az-btn-height);
        background-color: var(--az-bg-surface-alt);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-btn-radius);
        color: var(--az-text-main);
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--az-duration-fast) var(--az-ease-out);
    }
    .az-btn-icon:hover { background-color: var(--az-bg-surface-hover); color: var(--az-text-main); }
    .az-btn-icon.az-active { background-color: var(--az-color-primary); color: #fff; border-color: var(--az-color-primary); }
    .az-btn-icon i { transition: transform var(--az-duration-slow) var(--az-ease-out); }
    .az-btn-icon.az-active i { transform: rotate(180deg); }

    /* Button group */
    .az-btn-group { display: inline-flex; }
    .az-btn-group > .az-btn { border-radius: 0; }
    .az-btn-group > .az-btn:first-child { border-top-left-radius: var(--az-btn-radius); border-bottom-left-radius: var(--az-btn-radius); }
    .az-btn-group > .az-btn:last-child  { border-top-right-radius: var(--az-btn-radius); border-bottom-right-radius: var(--az-btn-radius); }
    .az-btn-group > .az-btn + .az-btn   { border-left: 1px solid rgba(255,255,255,.2); }


    /* ---------- 7b. FORMS — Input / Select / Textarea ---------- */
    .az-main-content :is(input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"]) {
        height: var(--az-input-height);
        line-height: var(--az-control-line-height);
        padding-top: calc((var(--az-input-height) - (1em * var(--az-control-line-height)) - 0.125rem) / 2);
        padding-bottom: calc((var(--az-input-height) - (1em * var(--az-control-line-height)) - 0.125rem) / 2);
        padding-left: var(--az-control-padding-x);
        padding-right: var(--az-control-padding-x);
        border: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
        font-size: var(--az-text-base);
        color: var(--az-text-main);
        border-radius: var(--az-radius-sm);
        transition: border-color var(--az-duration-fast) var(--az-ease-out),
                    box-shadow var(--az-duration-fast) var(--az-ease-out);
    }
    .az-main-content :is(input, select, textarea):focus {
        border-color: var(--az-color-primary);
        box-shadow: var(--az-shadow-focus);
    }
    .az-main-content select {
        height: var(--az-input-height);
        line-height: normal;
        padding: 0 var(--az-control-padding-x);
        border: 1px solid var(--az-border-color);
        font-size: var(--az-text-base);
        color: var(--az-text-main);
        border-radius: var(--az-radius-sm);
        background-color: var(--az-bg-surface);
    }
    .az-main-content textarea {
        width: 100%;
        min-height: 3.125rem;
        padding: var(--az-space-2);
        border: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
        font-size: var(--az-text-base);
        color: var(--az-text-main);
        border-radius: var(--az-radius-sm);
        resize: vertical;
    }

    /* Validation states */
    .az-input--error,
    .az-main-content :is(input, select, textarea).az-input--error {
        border-color: var(--az-danger-500);
    }
    .az-input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-danger-500) 25%, transparent); }
    .az-input--success { border-color: var(--az-success-500); }
    .az-input--warning { border-color: var(--az-warning-500); }
    .az-form-error-text { color: var(--az-danger-500); font-size: var(--az-text-xs); margin-top: var(--az-space-1); display: block; }
    .az-form-help-text  { color: var(--az-text-muted); font-size: var(--az-text-xs); margin-top: var(--az-space-1); display: block; }

    /* Input group (text + scanner / icon) */
    .az-input-group { position: relative; display: inline-block; vertical-align: top; width: 100%; }
    .az-input-group > input { padding-right: 2.1875rem; width: 100%; }
    .az-input-group .az-scanner {
        position: absolute;
        right: var(--az-space-2);
        top: 50%;
        transform: translateY(-50%);
        color: var(--az-text-muted);
        z-index: 2;
        cursor: pointer;
        text-decoration: none;
    }
    .az-input-group .az-scanner i { font-size: 1.2rem; }
    .az-input-group .az-scanner:hover { color: var(--az-color-primary); }

    /* Select2 fix */
    .az-main-content .select2-container { width: 100% !important; }
    .az-main-content .select2-container,
    .az-main-content .select2-container .select2-selection--single,
    .az-main-content .select2-container .select2-selection--multiple {
        box-sizing: border-box !important;
    }
    .az-main-content .select2-container--default .select2-selection--single {
        height: var(--az-input-height) !important;
        min-height: var(--az-input-height) !important;
        background-color: var(--az-bg-surface) !important;
        border-color: var(--az-border-color) !important;
    }
    .az-main-content .select2-container .select2-selection--single {
        min-height: var(--az-input-height);
        height: var(--az-input-height);
        display: flex;
        align-items: center;
        border: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
        border-radius: var(--az-radius-sm);
    }
    .az-main-content .select2-container--default .select2-selection--single {
        height: var(--az-input-height) !important;
        min-height: var(--az-input-height) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        position: relative;
    }
    .az-main-content .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: calc(var(--az-input-height) - 0.125rem) !important;
        line-height: calc(var(--az-input-height) - 0.125rem) !important;
        display: block !important;
        color: var(--az-text-main) !important;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: var(--az-control-padding-x);
        padding-right: calc(var(--az-space-8) - 0.125rem);
        box-sizing: border-box;
    }
    .az-main-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
        line-height: calc(var(--az-input-height) - 0.125rem) !important;
        display: inline-block !important;
        color: var(--az-text-muted) !important;
    }
    .az-main-content .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100% !important;
        top: 0 !important;
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .az-main-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0 !important;
        margin-left: 0 !important;
        position: static;
        top: auto;
        transform: none;
    }

    .az-main-content .select2-container--default .select2-selection--multiple {
        min-height: var(--az-input-height);
        height: auto;
        padding: 0 0.5rem;
        overflow: visible;
        box-sizing: border-box;
        border: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
        border-radius: var(--az-radius-sm);
    }
    .az-main-content .select2-container--default .select2-selection--single,
    .az-main-content .select2-container--default .select2-selection--multiple,
    .az-main-content .select2-container--default .select2-selection--single:focus,
    .az-main-content .select2-container--default .select2-selection--multiple:focus {
        background-color: var(--az-bg-surface) !important;
        border-color: var(--az-border-color) !important;
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        min-height: calc(var(--az-input-height) - 0.125rem);
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
        overflow: visible;
        color: var(--az-text-main);
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 0 0.25rem 0 0;
        padding: 0.25rem 0.625rem;
        border-radius: var(--az-radius-sm);
        font-size: var(--az-text-sm);
        line-height: 1.25;
        display: inline-flex;
        align-items: flex-start;
        min-height: 1.75rem;
        border: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
        color: var(--az-text-main);
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        min-height: 1.75rem;
        display: inline-flex;
        align-items: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: var(--az-text-muted);
        margin-right: 0.375rem;
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--az-danger-text);
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--az-text-main);
        line-height: 1.25;
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-search--inline {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
        margin: 0;
    }
    .az-main-content .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        margin: 0;
        line-height: 1.25;
        height: 1.75rem;
        padding: 0;
        vertical-align: middle;
        color: var(--az-text-main);
        background-color: transparent !important;
    }

    /* Multiple Select2: khi không focus thì ô search không chiếm dòng */
    .az-main-content .select2-container--default.select2-container--focus .select2-selection--multiple .select2-search--inline,
    .az-main-content .select2-container--default.select2-container--open .select2-selection--multiple .select2-search--inline {
        flex: 1 0 7rem;
        min-width: 6rem;
    }
    .az-main-content .select2-container--default.select2-container--focus .select2-selection--multiple .select2-search--inline .select2-search__field,
    .az-main-content .select2-container--default.select2-container--open .select2-selection--multiple .select2-search--inline .select2-search__field {
        width: 100% !important;
        min-width: 6rem !important;
        opacity: 1;
    }

    .az-toolbar-row :is(input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, .select2-selection--single, .select2-selection--multiple, button, .az-btn) {
        box-shadow: none !important;
    }

    .az-table-wrapper,
    .az-table,
    .az-table :is(thead, tbody, tfoot, tr, td, th) {
        box-shadow: none !important;
    }
    .select2-dropdown { background-color: var(--az-bg-surface); border-color: var(--az-border-color); }
    .az-main-content .select2-container--default.select2-container--focus .select2-selection--single,
    .az-main-content .select2-container--default.select2-container--focus .select2-selection--multiple,
    .az-main-content .select2-container--default.select2-container--open .select2-selection--single,
    .az-main-content .select2-container--default.select2-container--open .select2-selection--multiple {
        border-color: var(--az-border-color-strong);
        box-shadow: none;
    }
    .select2-container--default .select2-results__option { color: var(--az-text-main); }
    .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--az-bg-surface-alt); }
    .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--az-color-primary); color: #fff; }

    html.az-dark .select2-selection,
    html.az-dark .az-main-content .select2-container--default .select2-selection--single,
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple {
        background-color: var(--az-bg-surface-alt) !important;
        border-color: var(--az-border-color) !important;
        box-sizing: border-box !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--single {
        height: var(--az-input-height) !important;
        min-height: var(--az-input-height) !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple {
        min-height: var(--az-input-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        min-height: calc(var(--az-input-height) - 0.125rem) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--single .select2-selection__rendered,
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    html.az-dark .az-main-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--az-text-main);
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--az-bg-surface-hover);
        border-color: var(--az-border-color-strong);
        color: var(--az-text-main);
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--az-text-main);
    }
    /* Dark mode hard override cho Select2 multiple chip (kể cả khi container nằm ngoài .az-main-content) */
    html.az-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--az-bg-surface-hover) !important;
        border: 1px solid var(--az-border-color-strong) !important;
        color: var(--az-text-main) !important;
    }
    html.az-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--az-text-main) !important;
        opacity: 1 !important;
    }
    html.az-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: var(--az-text-muted) !important;
    }
    html.az-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--az-danger-text) !important;
    }
    html.az-dark .select2-dropdown {
        background-color: var(--az-bg-surface-alt) !important;
        border-color: var(--az-border-color) !important;
    }
    html.az-dark .select2-container--default .select2-results > .select2-results__options {
        background-color: var(--az-bg-surface-alt) !important;
    }
    html.az-dark .select2-container--default .select2-results__option {
        color: var(--az-text-main) !important;
        background-color: transparent;
    }
    html.az-dark .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: var(--az-bg-surface-hover) !important;
        color: var(--az-text-main) !important;
    }
    html.az-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--az-color-primary) !important;
        color: var(--az-text-on-primary) !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    html.az-dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        color: var(--az-text-muted) !important;
        caret-color: var(--az-text-muted) !important;
        background-color: transparent !important;
    }
    html.az-dark .az-main-content .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder,
    html.az-dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
        color: var(--az-text-subtle) !important;
        opacity: 1;
    }
    html.az-dark .az-main-content .select2-container--default.select2-container--focus .select2-selection--single,
    html.az-dark .az-main-content .select2-container--default.select2-container--focus .select2-selection--multiple,
    html.az-dark .az-main-content .select2-container--default.select2-container--open .select2-selection--single,
    html.az-dark .az-main-content .select2-container--default.select2-container--open .select2-selection--multiple {
        border-color: var(--az-border-color-strong);
    }

    /* Switch / Toggle */
    .az-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; }
    .az-switch input { opacity: 0; width: 0; height: 0; }
    .az-switch-slider {
        position: absolute; cursor: pointer; inset: 0;
        background-color: var(--az-gray-300);
        border-radius: var(--az-radius-full);
        transition: background-color var(--az-duration-base) var(--az-ease-out);
    }
    .az-switch-slider::before {
        content: ""; position: absolute;
        height: 1.125rem; width: 1.125rem;
        left: 0.1875rem; bottom: 0.1875rem;
        background-color: #fff;
        border-radius: 50%;
        transition: transform var(--az-duration-base) var(--az-ease-out);
        box-shadow: var(--az-shadow-sm);
    }
    .az-switch input:checked + .az-switch-slider { background-color: var(--az-color-primary); }
    .az-switch input:checked + .az-switch-slider::before { transform: translateX(1.25rem); }


    /* ---------- 7c. CARDS ---------- */
    .az-card {
        background: var(--az-bg-surface);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-lg);
        box-shadow: var(--az-shadow-sm);
        overflow: hidden;
    }
    .az-card-body { padding: var(--az-space-4); }
    .az-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px dashed var(--az-border-color);
        padding-bottom: var(--az-space-3);
        margin-bottom: var(--az-space-3);
    }
    .az-card-section {
        background-color: var(--az-bg-surface-alt);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-md);
        padding: var(--az-space-3);
        margin-top: var(--az-space-2);
        font-size: 0.8125rem;
    }
    .az-card-section-title { font-weight: 600; color: var(--az-text-main); margin-bottom: var(--az-space-1); display: flex; align-items: center; gap: var(--az-space-1); }
    .az-card-row { display: flex; justify-content: space-between; margin-bottom: var(--az-space-1); gap: var(--az-space-2); }
    .az-card-row:last-child { margin-bottom: 0; }
    .az-card-label { color: var(--az-text-muted); flex-shrink: 0; }
    .az-card-value { font-weight: 500; text-align: right; color: var(--az-text-main); }


    /* ---------- 7d. TABLES ---------- */
    .az-table-wrapper {
        width: 100%;
        max-height: calc(100vh - var(--az-table-offset));
        overflow: auto;
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-md);
        background-color: var(--az-bg-surface);
    }
    .az-table-wrapper.az-table-float { max-height: none; height: auto; overflow-y: visible; }
    .az-table { margin: 0; border-collapse: separate; border-spacing: 0; min-width: 100%; }

    .az-table thead { position: sticky; top: 0; z-index: var(--az-z-sticky); }
    .az-table thead th {
        background-color: var(--az-color-primary);
        color: #ffffff;
        border-bottom: 1px solid rgba(255,255,255,.2);
        background-clip: padding-box;
        height: 2rem;
        line-height: 1rem;
        vertical-align: middle;
    }

    .az-table tbody tr { background-color: var(--az-bg-surface); }
    .az-table tbody tr:nth-child(even) { background-color: var(--az-bg-surface-alt); }
    .az-table tbody tr:hover { background-color: var(--az-bg-surface-hover); }
    .az-table tbody td {
        border-bottom: 1px solid var(--az-border-color);
        color: var(--az-text-main);
    }

    /* Sticky cột trái */
    .az-sticky-col { position: sticky; }
    .az-table tbody td.az-sticky-col {
        z-index: var(--az-z-base);
        background-color: inherit;
        border-right: 1px solid var(--az-border-color);
    }
    .az-table thead th.az-sticky-col {
        z-index: var(--az-z-sticky-hi);
        background-color: var(--az-color-primary);
        border-right: 1px solid rgba(255,255,255,.2);
    }
    .az-sticky-col.az-sticky-last::after {
        content: "";
        position: absolute;
        top: 0; right: -5px; bottom: -1px;
        width: 5px;
        background: linear-gradient(to right, rgba(0,0,0,.08) 0%, transparent 100%);
        pointer-events: none;
        z-index: var(--az-z-base);
    }

    /* Sticky cột phải */
    .az-sticky-col-right { position: sticky; }
    .az-table tbody td.az-sticky-col-right {
        z-index: var(--az-z-base);
        background-color: inherit;
        border-left: 1px solid var(--az-border-color);
    }
    .az-table thead th.az-sticky-col-right {
        z-index: var(--az-z-sticky-hi);
        background-color: var(--az-color-primary);
        border-left: 1px solid rgba(255,255,255,.2);
    }
    .az-sticky-col-right.az-sticky-first::before {
        content: "";
        position: absolute;
        top: 0; left: -5px; bottom: -1px;
        width: 5px;
        background: linear-gradient(to left, rgba(0,0,0,.08) 0%, transparent 100%);
        pointer-events: none;
        z-index: var(--az-z-base);
    }

    /* Sticky tfoot */
    .az-table tfoot { position: sticky; bottom: 0; z-index: var(--az-z-sticky); }
    .az-table tfoot :is(td, th) {
        background-color: var(--az-bg-surface-alt);
        border-top: 1px solid var(--az-border-color);
        font-weight: 700;
    }
    .az-table tfoot td.az-sticky-col,
    .az-table tfoot td.az-sticky-col-right { z-index: var(--az-z-sticky-hi); }


    /* ---------- 7e. TABS ---------- */
    .az-tabs { width: 100%; padding: 0; margin: 0; position: relative; }
    .az-tabs > ul {
        margin: 0 0 var(--az-space-2);
        padding: 0;
        list-style: none;
        border-bottom: 1px solid var(--az-border-color);
        display: flex;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .az-tabs > ul::-webkit-scrollbar { display: none; }
    .az-tabs > ul > li {
        margin: 0;
        padding: var(--az-space-2) var(--az-space-4);
        color: var(--az-text-muted);
        display: inline-block;
        transition: color var(--az-duration-base) var(--az-ease-out), border-color var(--az-duration-base) var(--az-ease-out);
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 3px solid transparent;
    }
    .az-tabs > ul > li.active { border-bottom-color: var(--az-color-primary); color: var(--az-text-main); }
    .az-tabs > ul > li:hover { color: var(--az-text-main); }
    .az-tabs > ul a { text-decoration: none; font-size: var(--az-text-base); color: inherit; }


    /* ---------- 7f. PAGING ---------- */
    .az-page-links { display: inline-flex; gap: var(--az-space-1); margin-left: auto; }
    .az-page-links a {
        min-width: 2rem;
        height: 2rem;
        line-height: 2rem;
        border-radius: var(--az-radius-sm);
        text-align: center;
        text-decoration: none;
        color: var(--az-text-main);
        padding: 0 var(--az-space-2);
        transition: background-color var(--az-duration-fast) var(--az-ease-out);
    }
    .az-page-links a.selected,
    .az-page-links a:hover { background-color: var(--az-color-primary); color: #fff; }


    /* ---------- 7g. BADGES ---------- */
    .az-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--az-space-1);
        padding: 0.25rem 0.5rem;
        font-size: var(--az-text-xs);
        font-weight: 700;
        border-radius: var(--az-radius-sm);
        white-space: nowrap;
        line-height: 1;
        border: 1px solid transparent;
    }
    .az-badge-blue,
    .az-badge-info {
        background-color: var(--az-info-bg);
        color: var(--az-info-text);
        border-color: var(--az-info-border);
    }
    .az-badge-green,
    .az-badge-success {
        background-color: var(--az-success-bg);
        color: var(--az-success-text);
        border-color: var(--az-success-border);
    }
    .az-badge-red,
    .az-badge-danger {
        background-color: var(--az-danger-bg);
        color: var(--az-danger-text);
        border-color: var(--az-danger-border);
    }
    .az-badge-amber,
    .az-badge-warning {
        background-color: var(--az-warning-bg);
        color: var(--az-warning-text);
        border-color: var(--az-warning-border);
    }
    .az-badge-purple {
        background-color: var(--az-purple-bg);
        color: var(--az-purple-text);
        border-color: var(--az-purple-border);
    }
    .az-badge-gray,
    .az-badge-neutral {
        background-color: var(--az-bg-surface-alt);
        color: var(--az-text-muted);
        border-color: var(--az-border-color);
    }
    .az-badge.solid { color: #fff; border: 0; }
    .az-badge.solid.az-badge-blue,    .az-badge.solid.az-badge-info    { background-color: var(--az-info-500); }
    .az-badge.solid.az-badge-green,   .az-badge.solid.az-badge-success { background-color: var(--az-success-500); }
    .az-badge.solid.az-badge-red,     .az-badge.solid.az-badge-danger  { background-color: var(--az-danger-500); }
    .az-badge.solid.az-badge-amber,   .az-badge.solid.az-badge-warning { background-color: var(--az-warning-500); }
    .az-badge.solid.az-badge-purple   { background-color: var(--az-purple-500); }

    /* Table cell link */
    .az-table-link {
        color: var(--az-text-link);
        font-weight: 500;
        transition: color var(--az-duration-fast) var(--az-ease-out);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: var(--az-space-1);
    }
    .az-table-link:hover { color: var(--az-text-link-hover); text-decoration: underline; }


    /* ---------- 7h. MODAL / POPUP ----------
       Đặt tên mới: .az-modal-*
       Backward compat alias: .AZPopup* vẫn hoạt động (xem layer overrides) */
    .az-modal {
        position: fixed;
        inset: 0;
        background-color: var(--az-bg-overlay);
        z-index: var(--az-z-modal-bg);
        overflow: hidden;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .az-modal-bg {
        background-color: transparent;
        margin: 0; padding: 0;
        width: 100%; height: 100%;
        z-index: 1;
        overflow: hidden;
    }
    .az-modal-container {
        width: 600px; height: 450px;
        min-width: 200px; min-height: 150px;
        max-width: 100vw; max-height: 100vh;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        margin: 0; padding: 0 var(--az-space-5) var(--az-space-5);
        box-shadow: var(--az-shadow-2xl);
        border-radius: var(--az-radius-xl);
        background-color: var(--az-bg-surface);
        z-index: var(--az-z-modal);
        overflow: hidden;
        animation: az-modal-in var(--az-duration-base) var(--az-ease-out);
    }
    .az-modal-container.noborder { border-radius: 0; }
    .az-modal-container.hasbutton { padding-bottom: 5rem; }
    .az-modal-close {
        right: var(--az-space-3); top: 0;
        position: absolute;
        margin: 0; padding: 0;
        width: 2.625rem; height: 1rem;
        background-image: url(/images/close.png);
        background-repeat: no-repeat;
        z-index: 3;
        cursor: pointer;
    }
    .az-modal-main {
        width: 100%; height: 100%;
        margin: 0; padding: 0;
        overflow: auto;
    }
    .az-modal-main > h2 {
        margin: 0;
        padding: var(--az-space-5) 0 var(--az-space-1);
        border: 0;
        line-height: 1.2;
        font-size: 1.375rem;
        color: var(--az-text-main);
        text-align: left;
    }
    .az-modal-main iframe {
        display: block;
        width: 100%; height: 100%;
        border: none;
        margin: 0; padding: 0;
    }
    .az-modal-button {
        width: 100%;
        min-width: 18.75rem;
        height: 2.5rem;
        margin: 0;
        padding: 0 var(--az-space-4);
        position: absolute;
        bottom: var(--az-space-5);
        left: 0;
        display: flex;
        justify-content: center;
        gap: var(--az-space-2);
    }
    .az-modal-button > a {
        min-width: 6.25rem;
        padding: var(--az-space-1) var(--az-space-2);
        line-height: 2rem;
        background-color: var(--az-color-primary);
        color: #fff;
        font-size: var(--az-text-base);
        text-align: center;
        transition: background-color var(--az-duration-base) var(--az-ease-out);
        cursor: pointer;
        border-radius: var(--az-radius-sm);
        text-decoration: none;
    }
    .az-modal-button > a:hover { background-color: var(--az-color-primary-hover); }
    .az-modal-button > a.red   { background-color: var(--az-danger-500); }
    .az-modal-button > a.red:hover { background-color: var(--az-danger-600); }

    @keyframes az-modal-in {
        from { opacity: 0; transform: translate(-50%, -45%); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
    }


    /* ---------- 7i. TOAST / NOTIFY ----------
       Modern stack ở góc phải dưới với animation slide-in.
       Backward compat: .AZAlertTip vẫn còn (layer overrides) */
    .az-toast-container {
        position: fixed;
        bottom: var(--az-space-4);
        right: var(--az-space-4);
        z-index: var(--az-z-toast);
        display: flex;
        flex-direction: column;
        gap: var(--az-space-2);
        max-width: 24rem;
        padding-bottom: var(--az-safe-bottom);
    }
    .az-toast {
        display: flex;
        align-items: flex-start;
        gap: var(--az-space-3);
        padding: var(--az-space-3) var(--az-space-4);
        background-color: var(--az-bg-surface);
        border: 1px solid var(--az-border-color);
        border-left: 4px solid var(--az-text-muted);
        border-radius: var(--az-radius-md);
        box-shadow: var(--az-shadow-lg);
        color: var(--az-text-main);
        animation: az-toast-in var(--az-duration-base) var(--az-ease-out);
    }
    .az-toast.az-toast--success { border-left-color: var(--az-success-500); }
    .az-toast.az-toast--warning { border-left-color: var(--az-warning-500); }
    .az-toast.az-toast--danger  { border-left-color: var(--az-danger-500); }
    .az-toast.az-toast--info    { border-left-color: var(--az-info-500); }
    .az-toast-icon { flex-shrink: 0; font-size: 1.25rem; }
    .az-toast--success .az-toast-icon { color: var(--az-success-500); }
    .az-toast--warning .az-toast-icon { color: var(--az-warning-500); }
    .az-toast--danger  .az-toast-icon { color: var(--az-danger-500); }
    .az-toast--info    .az-toast-icon { color: var(--az-info-500); }
    .az-toast-body { flex: 1; font-size: var(--az-text-sm); line-height: 1.4; }
    .az-toast-title { font-weight: 600; margin-bottom: var(--az-space-1); }
    .az-toast-close { background: transparent; border: 0; cursor: pointer; color: var(--az-text-muted); padding: 0; font-size: 1rem; }
    .az-toast-close:hover { color: var(--az-text-main); }
    .az-toast.az-toast--leaving { animation: az-toast-out var(--az-duration-base) var(--az-ease-in-out) forwards; }

    @keyframes az-toast-in {
        from { opacity: 0; transform: translateX(100%); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes az-toast-out {
        from { opacity: 1; transform: translateX(0); }
        to   { opacity: 0; transform: translateX(100%); }
    }


    /* ---------- 7j. SKELETON LOADING ---------- */
    @keyframes az-shimmer {
        0%   { background-position: -1000px 0; }
        100% { background-position:  1000px 0; }
    }
    .az-skeleton {
        background: var(--az-border-color);
        background-image: linear-gradient(to right,
            var(--az-border-color) 0%,
            var(--az-bg-surface-hover) 20%,
            var(--az-border-color) 40%,
            var(--az-border-color) 100%);
        background-repeat: no-repeat;
        background-size: 1000px 100%;
        animation: az-shimmer 1.5s linear infinite forwards;
        border-radius: var(--az-radius-sm);
    }
    .az-skeleton-text  { height: 1rem; margin-bottom: var(--az-space-1); }
    .az-skeleton-title { height: 1.5rem; margin-bottom: var(--az-space-2); }
    .az-skeleton-circle { border-radius: 50%; }


    /* ---------- 7k. TOOLTIP — CSS-only, không cần JS ---------- */
    [data-tooltip] { position: relative; }
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        padding: 0.375rem 0.625rem;
        background-color: var(--az-gray-900);
        color: #fff;
        font-size: var(--az-text-xs);
        font-weight: 500;
        white-space: nowrap;
        border-radius: var(--az-radius-md);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--az-duration-fast) var(--az-ease-out),
                    transform var(--az-duration-fast) var(--az-ease-out);
        z-index: var(--az-z-tooltip);
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }


    /* ---------- 7l. AVATAR ---------- */
    .az-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background-color: var(--az-bg-surface-hover);
        color: var(--az-text-main);
        font-weight: 600;
        font-size: var(--az-text-sm);
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid var(--az-border-color);
    }
    .az-avatar > img { width: 100%; height: 100%; object-fit: cover; }
    .az-avatar.sm { width: 1.75rem; height: 1.75rem; font-size: var(--az-text-xs); }
    .az-avatar.lg { width: 3.5rem; height: 3.5rem; font-size: var(--az-text-lg); }
    .az-avatar.xl { width: 5rem;   height: 5rem;   font-size: var(--az-text-xl); }
    .az-avatar-group { display: inline-flex; }
    .az-avatar-group > .az-avatar + .az-avatar { margin-left: -0.625rem; box-shadow: 0 0 0 2px var(--az-bg-surface); }


    /* ---------- 7m. STATUS DOT ---------- */
    .az-dot {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: var(--az-text-muted);
        flex-shrink: 0;
    }
    .az-dot.success { background-color: var(--az-success-500); }
    .az-dot.warning { background-color: var(--az-warning-500); }
    .az-dot.danger  { background-color: var(--az-danger-500); }
    .az-dot.info    { background-color: var(--az-info-500); }
    .az-dot.pulse   { animation: az-pulse 2s ease-out infinite; }
    @keyframes az-pulse {
        0%   { box-shadow: 0 0 0 0 currentColor; }
        70%  { box-shadow: 0 0 0 6px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }


    /* ---------- 7n. EMPTY STATE ---------- */
    .az-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--az-space-12) var(--az-space-4);
        text-align: center;
        color: var(--az-text-muted);
    }
    .az-empty-icon {
        width: 6rem;
        height: 6rem;
        opacity: 0.5;
        margin-bottom: var(--az-space-4);
    }
    .az-empty-title { font-size: var(--az-text-lg); font-weight: 700; color: var(--az-text-main); margin-bottom: var(--az-space-2); }
    .az-empty-desc  { font-size: var(--az-text-sm); margin-bottom: var(--az-space-4); max-width: 24rem; }


    /* ---------- 7o. DRAWER (slide panel) ---------- */
    .az-drawer-backdrop {
        position: fixed;
        inset: 0;
        background-color: var(--az-bg-overlay);
        z-index: calc(var(--az-z-drawer) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--az-duration-base) var(--az-ease-out);
    }
    .az-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    .az-drawer {
        position: fixed;
        top: 0; bottom: 0;
        right: 0;
        width: min(24rem, 100vw);
        background-color: var(--az-bg-surface);
        box-shadow: var(--az-shadow-xl);
        z-index: var(--az-z-drawer);
        transform: translateX(100%);
        transition: transform var(--az-duration-slow) var(--az-ease-out);
        overflow-y: auto;
        padding-top: var(--az-safe-top);
        padding-bottom: var(--az-safe-bottom);
    }
    .az-drawer.open { transform: translateX(0); }
    .az-drawer.left { right: auto; left: 0; transform: translateX(-100%); }
    .az-drawer.left.open { transform: translateX(0); }


    /* ---------- 7p. PROGRESS BAR ---------- */
    .az-progress {
        width: 100%;
        height: 0.5rem;
        background-color: var(--az-bg-surface-hover);
        border-radius: var(--az-radius-full);
        overflow: hidden;
    }
    .az-progress-bar {
        height: 100%;
        background-color: var(--az-color-primary);
        border-radius: inherit;
        transition: width var(--az-duration-slow) var(--az-ease-out);
    }
    .az-progress-bar.indeterminate {
        width: 30%;
        animation: az-progress-indeterminate 1.5s ease-in-out infinite;
    }
    @keyframes az-progress-indeterminate {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(400%); }
    }


    /* ---------- 7q. LOADING OVERLAY ---------- */
    .az-loading-overlay {
        position: absolute;
        inset: 0;
        background-color: color-mix(in srgb, var(--az-bg-surface) 70%, transparent);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--az-z-sticky-hi);
        backdrop-filter: blur(1px);
    }
    .az-spinner {
        width: 2rem;
        height: 2rem;
        border: 3px solid var(--az-border-color);
        border-top-color: var(--az-color-primary);
        border-radius: 50%;
        animation: az-spin 0.8s linear infinite;
    }
    .az-spinner.sm { width: 1rem; height: 1rem; border-width: 2px; }
    .az-spinner.lg { width: 3rem; height: 3rem; border-width: 4px; }
    @keyframes az-spin { to { transform: rotate(360deg); } }


    /* ---------- 7r. DIVIDER ---------- */
    .az-divider {
        height: 1px;
        background-color: var(--az-border-color);
        margin: var(--az-space-4) 0;
        border: 0;
    }
    .az-divider.vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--az-space-4); }
    .az-divider.dashed { background-color: transparent; border-top: 1px dashed var(--az-border-color); }
}


/* =============================================================================
 * 8. UTILITIES — Helpers + Tailwind-style atomic classes
 * ============================================================================= */
@layer utilities {

    /* AZ-specific helpers */
    .az-hide { display: none !important; }
    .az-deleted { text-decoration: line-through; opacity: 0.6; }
    .az-text-red    { color: var(--az-danger-500); }
    .az-text-blue   { color: var(--az-info-500); }
    .az-text-green  { color: var(--az-success-500); }
    .az-text-amber  { color: var(--az-warning-500); }
    .az-text-muted  { color: var(--az-text-muted); }
    .az-text-center { text-align: center; }
    .az-text-right  { text-align: right; }
    .az-text-left   { text-align: left; }
    .az-text-small  { font-size: var(--az-text-sm); }
    .az-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .az-clamp-2     { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .az-no-select   { user-select: none; -webkit-user-select: none; }
    .az-clickable   { cursor: pointer; }

    /* Spacing */
    .m-0 { margin: 0; } .m-1 { margin: var(--az-space-1); } .m-2 { margin: var(--az-space-2); } .m-3 { margin: var(--az-space-3); } .m-4 { margin: var(--az-space-4); } .m-8 { margin: var(--az-space-8); }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--az-space-1); } .mt-2 { margin-top: var(--az-space-2); } .mt-3 { margin-top: var(--az-space-3); } .mt-4 { margin-top: var(--az-space-4); } .mt-6 { margin-top: var(--az-space-6); }
    .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--az-space-1); } .mb-2 { margin-bottom: var(--az-space-2); } .mb-3 { margin-bottom: var(--az-space-3); } .mb-4 { margin-bottom: var(--az-space-4); } .mb-6 { margin-bottom: var(--az-space-6); }
    .ml-0 { margin-left: 0; } .ml-1 { margin-left: var(--az-space-1); } .ml-2 { margin-left: var(--az-space-2); } .ml-auto { margin-left: auto; }
    .mr-0 { margin-right: 0; } .mr-1 { margin-right: var(--az-space-1); } .mr-2 { margin-right: var(--az-space-2); } .mr-auto { margin-right: auto; }

    .p-0 { padding: 0; } .p-1 { padding: var(--az-space-1); } .p-2 { padding: var(--az-space-2); } .p-3 { padding: var(--az-space-3); } .p-4 { padding: var(--az-space-4); } .p-6 { padding: var(--az-space-6); }
    .px-0 { padding-left: 0; padding-right: 0; }
    .px-1 { padding-left: var(--az-space-1); padding-right: var(--az-space-1); }
    .px-2 { padding-left: var(--az-space-2); padding-right: var(--az-space-2); }
    .px-3 { padding-left: var(--az-space-3); padding-right: var(--az-space-3); }
    .py-0 { padding-top: 0; padding-bottom: 0; }
    .py-1 { padding-top: var(--az-space-1); padding-bottom: var(--az-space-1); }
    .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .py-2 { padding-top: var(--az-space-2); padding-bottom: var(--az-space-2); }
    .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--az-space-1); } .pt-2 { padding-top: var(--az-space-2); } .pt-4 { padding-top: var(--az-space-4); }
    .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--az-space-1); } .pb-2 { padding-bottom: var(--az-space-2); }
    .pl-0 { padding-left: 0; } .pl-1 { padding-left: var(--az-space-1); } .pl-2 { padding-left: var(--az-space-2); } .pl-3 { padding-left: var(--az-space-3); }
    .pr-0 { padding-right: 0; } .pr-1 { padding-right: var(--az-space-1); } .pr-2 { padding-right: var(--az-space-2); }

    /* Widths */
    .w-full   { width: 100%; }
    .w-screen { width: 100vw; }
    .w-auto   { width: auto; }
    .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.3333%; } .w-2\/3 { width: 66.6667%; } .w-1\/4 { width: 25%; } .w-3\/4 { width: 75%; }
    .w-0 { width: 0; } .w-1 { width: var(--az-space-1); } .w-2 { width: var(--az-space-2); } .w-3 { width: var(--az-space-3); } .w-4 { width: var(--az-space-4); }
    .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; }
    .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-32 { width: 8rem; } .w-40 { width: 10rem; }
    .w-48 { width: 12rem; } .w-56 { width: 14rem; } .w-64 { width: 16rem; } .w-72 { width: 18rem; }

    .min-w-0 { min-width: 0; }
    .min-w-8 { min-width: 2rem; } .min-w-10 { min-width: 2.5rem; } .min-w-12 { min-width: 3rem; }
    .min-w-16 { min-width: 4rem; } .min-w-20 { min-width: 5rem; } .min-w-24 { min-width: 6rem; }
    .min-w-32 { min-width: 8rem; } .min-w-40 { min-width: 10rem; } .min-w-48 { min-width: 12rem; }
    .min-w-56 { min-width: 14rem; } .min-w-64 { min-width: 16rem; } .min-w-72 { min-width: 18rem; }
    .min-w-full { min-width: 100%; }

    .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; }
    .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-full { max-width: 100%; }

    /* Heights */
    .h-full { height: 100%; } .h-screen { height: 100vh; } .h-auto { height: auto; }
    .h-0 { height: 0; } .h-1 { height: var(--az-space-1); } .h-2 { height: var(--az-space-2); } .h-3 { height: var(--az-space-3); }
    .h-4 { height: var(--az-space-4); } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; }

    /* Display */
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .hidden { display: none; }

    /* Flex */
    .flex { display: flex; } .inline-flex { display: inline-flex; }
    .flex-row { flex-direction: row; } .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
    .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; }
    .justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
    .justify-around { justify-content: space-around; }
    .items-start { align-items: flex-start; } .items-center { align-items: center; }
    .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; }
    .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; }
    .flex-shrink-0 { flex-shrink: 0; }

    /* Grid */
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gap-0 { gap: 0; } .gap-1 { gap: var(--az-space-1); } .gap-2 { gap: var(--az-space-2); } .gap-3 { gap: var(--az-space-3); } .gap-4 { gap: var(--az-space-4); }

    /* Position */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed    { position: fixed; }
    .sticky   { position: sticky; }
    .static   { position: static; }
    .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }
    .inset-0 { inset: 0; }

    /* Z-index */
    .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; }

    /* Overflow */
    .overflow-hidden { overflow: hidden; }
    .overflow-auto   { overflow: auto; }
    .overflow-x-auto { overflow-x: auto; }
    .overflow-y-auto { overflow-y: auto; }

    /* Cursor */
    .cursor-pointer { cursor: pointer; }
    .cursor-not-allowed { cursor: not-allowed; }
    .cursor-default { cursor: default; }

    /* Pointer events */
    .pointer-events-none { pointer-events: none; }
    .pointer-events-auto { pointer-events: auto; }

    /* Typography */
    .text-xs { font-size: var(--az-text-xs); line-height: 1rem; }
    .text-sm { font-size: var(--az-text-sm); line-height: 1.25rem; }
    .text-base { font-size: var(--az-text-base); line-height: 1.5rem; }
    .text-lg { font-size: var(--az-text-lg); line-height: 1.75rem; }
    .text-xl { font-size: var(--az-text-xl); line-height: 1.75rem; }
    .text-2xl { font-size: var(--az-text-2xl); line-height: 2rem; }
    .font-normal { font-weight: 400; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .italic { font-style: italic; }
    .leading-none { line-height: 1; }
    .leading-tight { line-height: 1.25; }
    .leading-relaxed { line-height: 1.625; }

    /* Borders */
    .border          { border-width: 1px; border-style: solid; border-color: var(--az-border-color); }
    .border-0        { border-width: 0; }
    .border-t        { border-top-width: 1px; border-style: solid; border-color: var(--az-border-color); }
    .border-b        { border-bottom-width: 1px; border-style: solid; border-color: var(--az-border-color); }
    .border-l        { border-left-width: 1px; border-style: solid; border-color: var(--az-border-color); }
    .border-r        { border-right-width: 1px; border-style: solid; border-color: var(--az-border-color); }
    .border-dashed   { border-style: dashed; }
    .border-dotted   { border-style: dotted; }
    .rounded-none { border-radius: 0; }
    .rounded     { border-radius: var(--az-radius-sm); }
    .rounded-md  { border-radius: var(--az-radius-md); }
    .rounded-lg  { border-radius: var(--az-radius-lg); }
    .rounded-xl  { border-radius: var(--az-radius-xl); }
    .rounded-full { border-radius: var(--az-radius-full); }

    /* Shadows */
    .shadow-none { box-shadow: none; }
    .shadow-sm   { box-shadow: var(--az-shadow-sm); }
    .shadow      { box-shadow: var(--az-shadow-md); }
    .shadow-md   { box-shadow: var(--az-shadow-md); }
    .shadow-lg   { box-shadow: var(--az-shadow-lg); }
    .shadow-xl   { box-shadow: var(--az-shadow-xl); }

    /* Opacity & transitions */
    .opacity-0  { opacity: 0; }
    .opacity-50 { opacity: 0.5; }
    .opacity-70 { opacity: 0.7; }
    .opacity-100 { opacity: 1; }
    .hover\:opacity-80:hover { opacity: 0.8; }
    .transition         { transition: all var(--az-duration-base) var(--az-ease-out); }
    .transition-opacity { transition: opacity var(--az-duration-base) var(--az-ease-out); }
    .transition-colors  { transition: background-color var(--az-duration-base) var(--az-ease-out),
                                       color var(--az-duration-base) var(--az-ease-out),
                                       border-color var(--az-duration-base) var(--az-ease-out); }
    .transition-transform { transition: transform var(--az-duration-base) var(--az-ease-out); }

    /* Transform */
    .rotate-180 { transform: rotate(180deg); }
}


/* =============================================================================
 * 9. RESPONSIVE
 * ============================================================================= */
@layer layout {
    /* Form grid responsive */
    @media screen and (min-width: 768px) {
        .az-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .md\:col-span-2 { grid-column: span 2 / span 2; }
        .md\:w-auto { width: auto; }
        .md\:mt-0 { margin-top: 0; }
    }
    @media screen and (min-width: 1024px) {
        .az-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .lg\:col-span-2 { grid-column: span 2 / span 2; }
        .lg\:col-span-3 { grid-column: span 3 / span 3; }
        .lg\:col-span-4 { grid-column: span 4 / span 4; }
    }

    /* Mobile (< 768px) */
    @media screen and (max-width: 768px) {
        .az-main {
            width: 100%;
            padding: var(--az-space-2);
            margin: 0 0 6.25rem 0;
        }
        .az-page-title {
            max-width: unset;
            width: 100%;
            text-align: center;
            font-size: 1.8rem;
        }
        .az-breadcrumb { display: none; }

        /* Select2 mobile fix */
        .az-main-content .select2-container {
            padding: 0;
            min-height: var(--az-input-height);
        }
        .az-main-content .select2-selection__rendered {
            height: var(--az-input-height);
            line-height: var(--az-input-height);
        }

        /* Mobile-only hide trong filter advanced */
        .az-search-box:not(.az-expanded) .az-mobile-hide { display: none; }

        /* Toast mobile full width */
        .az-toast-container {
            left: var(--az-space-2);
            right: var(--az-space-2);
            bottom: var(--az-space-2);
            max-width: none;
        }
    }
}


/* =============================================================================
 * 10. A11Y — Accessibility
 * ============================================================================= */
@layer base {
    /* Focus visible (chỉ hiện khi navigate bằng keyboard) */
    :focus-visible {
        outline: 2px solid var(--az-color-primary);
        outline-offset: 2px;
        border-radius: var(--az-radius-sm);
    }

    /* Bỏ focus default của browser cho mouse click */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* Screen reader only */
    .az-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Reduced motion - tôn trọng hệ điều hành */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}


/* =============================================================================
 * 11. PRINT
 * ============================================================================= */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .az-breadcrumb,
    .az-tabs,
    .az-search-box,
    .az-page-links,
    .az-btn,
    .az-btn-icon,
    .az-toast-container,
    .az-modal,
    .az-drawer,
    [name="popup"]::after { display: none !important; }

    .az-table-wrapper {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
    }
    .az-table thead {
        position: static !important;
        background: #f0f0f0 !important;
        color: #000 !important;
    }
    .az-table thead th {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }
    .az-table tbody tr { page-break-inside: avoid; }
    .az-card { page-break-inside: avoid; box-shadow: none !important; border: 1px solid #999 !important; }

    .az-sticky-col,
    .az-sticky-col-right { position: static !important; box-shadow: none !important; }
}


/* =============================================================================
 * 12. OVERRIDES — Backward compatibility cho code cũ
 * Khi đổi tên class, alias ở đây để không phá vỡ HTML/JS hiện tại.
 * Khi migrate xong, có thể xóa block này.
 * ============================================================================= */
@layer overrides {
    /* Modal alias: .AZPopup* → .az-modal* */
    .AZPopup            { position: fixed; inset: 0; background-color: var(--az-bg-overlay); z-index: var(--az-z-modal-bg); overflow: hidden; }
    .AZPopupBG          { background-color: transparent; margin: 0; padding: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
    .AZPopupContainer {
        width: 600px; height: 450px;
        min-width: 200px; min-height: 150px;
        max-width: 100vw; max-height: 100vh;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        margin: 0; padding: 0 var(--az-space-5) var(--az-space-5);
        box-shadow: var(--az-shadow-2xl);
        border-radius: var(--az-radius-xl);
        background-color: var(--az-bg-surface);
        z-index: var(--az-z-modal);
        overflow: hidden;
    }
    .AZPopupContainer.noborder  { border-radius: 0; }
    .AZPopupContainer.hasbutton { padding-bottom: 5rem; }
    .AZPopupClose {
        right: var(--az-space-3); top: 0;
        position: absolute;
        margin: 0; padding: 0;
        width: 2.625rem; height: 1rem;
        background-image: url(/images/close.png);
        background-repeat: no-repeat;
        z-index: 3;
        cursor: pointer;
    }
    .AZPopupMain { width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; }
    .AZPopupMain > h2 {
        margin: 0;
        padding: var(--az-space-5) 0 var(--az-space-1);
        border: 0;
        line-height: 1.2;
        font-size: 1.375rem;
        color: var(--az-text-main);
        text-align: left;
    }
    .AZPopupMain iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
    .AZPopupButton {
        width: 100%;
        min-width: 18.75rem;
        height: 2.5rem;
        margin: 0;
        padding: 0 var(--az-space-4);
        position: absolute;
        bottom: var(--az-space-5);
        left: 0;
        display: flex;
        justify-content: center;
        gap: var(--az-space-2);
    }
    .AZPopupButton > a {
        min-width: 6.25rem;
        padding: var(--az-space-1) var(--az-space-2);
        line-height: 2rem;
        background-color: var(--az-color-primary);
        color: #fff;
        font-size: var(--az-text-base);
        text-align: center;
        cursor: pointer;
        border-radius: var(--az-radius-sm);
        text-decoration: none;
    }
    .AZPopupButton > a:hover { background-color: var(--az-color-primary-hover); }
    .AZPopupButton > a.red { background-color: var(--az-danger-500); }

    /* AlertTip alias (alert cũ ở bottom) */
    .AZAlertTip {
        width: 100%;
        position: fixed;
        bottom: -1000px;
        left: 0;
        z-index: var(--az-z-toast);
        opacity: 0;
        background-color: rgba(0,0,0,0.9);
        color: #fff;
        text-align: center;
        transition: all 0.8s;
        padding-bottom: var(--az-safe-bottom);
    }
    .AZAlertTip.active { opacity: 0.95; bottom: 0; }
    .AZAlertTip .fa-times {
        width: 2rem; height: 2rem; line-height: 2rem;
        border: 1px solid var(--az-warning-500); border-radius: 50%;
        font-size: 1.2rem; text-align: center;
        background-color: var(--az-warning-500); color: #fff;
        position: absolute; top: -20px; right: 0;
        cursor: pointer;
    }
    .AZAlertTip > div { max-height: 30vh; margin: var(--az-space-2); overflow: auto; }

    /* Tailwind-mồi color overrides để dark mode hoạt động */
    .bg-white { background-color: var(--az-bg-surface); }
    .bg-gray-50, .bg-slate-50 { background-color: var(--az-bg-surface-alt); }
    .bg-slate-100 { background-color: var(--az-border-color); }
    .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--az-text-main); }
    .text-slate-600, .text-slate-500, .text-slate-400 { color: var(--az-text-muted); }
    .border-gray-200, .border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--az-border-color); }
}


/* =============================================================================
 * PATCH — Thêm rules cho Turn B→D (filter transition + table float mode)
 * ============================================================================= */

/* Advanced filter row — GPU-accelerated collapse transition
 * Thay jQuery slideUp/Down bằng CSS max-height + opacity → mượt hơn
 * vì dùng compositor thread. */
.az-advanced-row {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height var(--az-duration-slow, 300ms) var(--az-ease-out, ease-out),
                opacity var(--az-duration-base, 200ms) var(--az-ease-out, ease-out),
                margin-top var(--az-duration-slow, 300ms) var(--az-ease-out, ease-out),
                padding-top var(--az-duration-slow, 300ms) var(--az-ease-out, ease-out);
}
.az-advanced-row.az-hide {
    display: block !important;  /* Override .az-hide utility để transition chạy */
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    pointer-events: none;
}

/* Table float mode — không giới hạn chiều cao
 * Mặc định .az-table-wrapper có max-height: calc(100vh - 280px).
 * Class .az-table-float bỏ giới hạn, thead sticky theo viewport scroll. */
.az-table-wrapper.az-table-float {
    max-height: none;
    overflow: visible;
}
.az-table-wrapper.az-table-float .az-table thead {
    position: sticky;
    top: 0;
    z-index: var(--az-z-sticky, 10);
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
    .az-advanced-row { transition: none !important; }
}