@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, template, 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;
        /* Modal stack — đặt CAO hơn template PanelHeader (9000 trong style.css)
           để popup luôn hiển thị trên header, không bị che nút Close. V6.12 */
        --az-z-modal-bg:    9500;
        --az-z-modal:       9501;
        --az-z-popover:     9510;
        --az-z-select2:     9520;  /* select2 global container — phải trên modal để dropdown trong popup hoạt động */
        --az-z-tooltip:     9530;
        --az-z-toast:       9540;

        /* ---------- 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) ---------- */
    /* Tinh chỉnh v2 — kế thừa DNA cyan-teal từ OS legacy:
     *   • Surface hơi nghiêng cyan (ăn rơ brand #1d96b2) thay vì slate
     *   • surface-alt = #f0f4f5 (legacy row-even) → zebra stripe hiện rõ
     *   • border cool-gray thay slate-blue
     *   • semantic dịu hơn, text đủ contrast WCAG AA trên nền pastel
     * Mapping 1-1 với darkmode được giữ nguyên: không thêm/xoá token. */
    :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 — cyan-tinted cool gray */
        --az-bg-body:         #f5f8f9;   /* trang: mát nhẹ, thay #f8fafc slate */
        --az-bg-surface:      #ffffff;   /* card: trắng thuần */
        --az-bg-surface-alt:  #f0f4f5;   /* ⭐ row-even / panel phụ — DNA legacy */
        --az-bg-surface-hover: #d8e2e5;  /* hover rõ, vẫn đủ dịu cho button ghost */
        --az-bg-overlay:      rgba(15, 23, 42, .5);

        /* Text — giữ mapping cũ, đã đạt contrast tốt */
        --az-text-main:    var(--az-gray-900);
        --az-text-muted:   var(--az-gray-600);   /* bump từ 500→600: 4.5:1 → 7.5:1 contrast trên nền trắng (AAA) */
        --az-text-subtle:  var(--az-gray-400);
        --az-text-on-primary: #ffffff;
        --az-text-link:       #555555;
        --az-text-link-hover: #000000;

        /* Border — cool-gray, dịu hơn slate */
        --az-border-color:        #d5dcde;  /* thay #e2e8f0 (gray-200 slate) */
        --az-border-color-strong: #a8b5b8;  /* thay #cbd5e1 (gray-300 slate) */
        --az-border-color-subtle: #e7ecee;  /* thay #f1f5f9 (gray-100 slate) */

        /* Semantic — pastel dịu, text deep-tone (đạt AA trên nền bg) */
        --az-success-bg:        #e8f7ee;
        --az-success-border:    #b8e5c7;
        --az-success-text:      #0f6e35;

        --az-warning-bg:        #fff4d6;
        --az-warning-border:    #f7d57a;
        --az-warning-text:      #854708;

        --az-danger-bg:         #fde8e8;
        --az-danger-border:     #f5b5b5;
        --az-danger-text:       #8b1a1a;

        --az-info-bg:           #e3f0fc;
        --az-info-border:       #a9d0f5;
        --az-info-text:         #1a4a87;

        --az-purple-bg:         #f2e7fd;
        --az-purple-border:     #d9b7f4;
        --az-purple-text:       #5e1a9c;

        --az-amber-bg:          #fff4d6;
        --az-amber-border:      #f7d57a;
        --az-amber-text:        #854708;
    }

    /* ---------- 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 :is(.az-main-content, .az-modal-main) */
    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,.az-main.az-frame { width:100%; margin: 0; }

    .az-main-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-main-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-main-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; }

    /* Khoảng cách giữa toolbar (Search/Excel/AddNew) và table-wrapper bên dưới */
    .az-toolbar { margin-bottom: var(--az-space-3); }
    /* Hoặc nếu toolbar không có class az-toolbar, fallback dùng :has */
    .az-table-wrapper { margin-top: var(--az-space-2); }



    /* 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; }

    /* Anchor dùng class .az-btn — ép màu chữ + bỏ underline ở mọi state.
     * Cần override vì <a> có default color từ user agent + có thể Template set. */
    a.az-btn,
    a.az-btn:link,
    a.az-btn:visited,
    a.az-btn:hover,
    a.az-btn:focus,
    a.az-btn:active {
        color: #ffffff;
        text-decoration: none;
    }
    a.az-btn.outline,
    a.az-btn.outline:link,
    a.az-btn.outline:visited,
    a.az-btn.outline:hover,
    a.az-btn.outline:focus,
    a.az-btn.outline:active,
    a.az-btn.ghost,
    a.az-btn.ghost:link,
    a.az-btn.ghost:visited,
    a.az-btn.ghost:hover,
    a.az-btn.ghost:focus,
    a.az-btn.ghost:active {
        color: var(--az-text-main);
        text-decoration: none;
    }

    /* Focus ring chuẩn — thay browser default underline.
     * :focus-visible chỉ hiện khi navigate bằng keyboard, không hiện khi click chuột. */
    .az-btn:focus { outline: none; }
    .az-btn:focus-visible {
        outline: 2px solid var(--az-color-primary);
        outline-offset: 2px;
    }

    /* 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); }


    /* ---------- 7b. FORMS — Input / Select / Textarea ---------- */
    :is(.az-main-content, .az-modal-main) :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);
    }
    :is(.az-main-content, .az-modal-main) :is(input, select, textarea):focus {
        border-color: var(--az-color-primary);
        box-shadow: var(--az-shadow-focus);
    }
    :is(.az-main-content, .az-modal-main) 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);
    }
    :is(.az-main-content, .az-modal-main) 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;
    }

    /* 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 */
    :is(.az-main-content, .az-modal-main) .select2-container { width: 100% !important; }
    :is(.az-main-content, .az-modal-main) .select2-container,
    :is(.az-main-content, .az-modal-main) .select2-container .select2-selection--single,
    :is(.az-main-content, .az-modal-main) .select2-container .select2-selection--multiple {
        box-sizing: border-box !important;
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .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);
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0 !important;
        margin-left: 0 !important;
        position: static;
        top: auto;
        transform: none;
    }

    :is(.az-main-content, .az-modal-main) .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);
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single,
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple,
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single:focus,
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple:focus {
        background-color: var(--az-bg-surface) !important;
        border-color: var(--az-border-color) !important;
    }
    :is(.az-main-content, .az-modal-main) .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);
    }
    :is(.az-main-content, .az-modal-main) .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);
    }
    :is(.az-main-content, .az-modal-main) .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;
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: var(--az-text-muted);
        margin-right: 0.375rem;
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--az-danger-text);
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--az-text-main);
        line-height: 1.25;
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-search--inline {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
        margin: 0;
    }
    :is(.az-main-content, .az-modal-main) .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 */
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--multiple .select2-search--inline,
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--open .select2-selection--multiple .select2-search--inline {
        flex: 1 0 7rem;
        min-width: 6rem;
    }
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--multiple .select2-search--inline .select2-search__field,
    :is(.az-main-content, .az-modal-main) .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-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); }
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--single,
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--multiple,
    :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--open .select2-selection--single,
    :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single,
    html.az-dark :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single {
        height: var(--az-input-height) !important;
        min-height: var(--az-input-height) !important;
    }
    html.az-dark :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single .select2-selection__rendered,
    html.az-dark :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    html.az-dark :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--az-text-main);
    }
    html.az-dark :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--az-text-main);
    }
    html.az-dark .az-modal-main { background-color: var(--az-bg-surface) !important; color: var(--az-text-main); }
    html.az-dark .az-modal-main h2,
    html.az-dark .az-modal-main p,
    html.az-dark .az-modal-main label,
    html.az-dark .az-modal-main span,
    html.az-dark .az-modal-main .result { color: var(--az-text-main) !important; }
    html.az-dark .az-modal-main input[type="text"],
    html.az-dark .az-modal-main input[type="number"],
    html.az-dark .az-modal-main select {
        background-color: var(--az-bg-surface-alt) !important;
        color: var(--az-text-main) !important;
        border-color: var(--az-border-color) !important;
    }
    html.az-dark .az-modal-main button { background-color: var(--az-color-primary) !important; border-color: var(--az-color-primary) !important; color: var(--az-text-on-primary) !important; }
    html.az-dark .az-modal-main button:hover { background-color: var(--az-danger-text) !important; border-color: var(--az-danger-text) !important; }
    /* Dark mode hard override cho Select2 multiple chip (kể cả khi container nằm ngoài :is(.az-main-content, .az-modal-main)) */
    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 :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .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 :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--single,
    html.az-dark :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--focus .select2-selection--multiple,
    html.az-dark :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--open .select2-selection--single,
    html.az-dark :is(.az-main-content, .az-modal-main) .select2-container--default.select2-container--open .select2-selection--multiple {
        border-color: var(--az-border-color-strong);
    }


    /* ---------- Streaming state ----------
     * Keyframe giữ nguyên (slide-up nhẹ + fade-in). Rule apply nằm ở block cuối
     * file (V6.14) để dedupe — tránh trùng rule với unlayered block bên dưới. */
    @keyframes az-stream-slide-up {
        0% { 
            opacity: 0.1; 
            transform: translateY(5px); 
        }
        20% { 
            /* Đạt độ sáng tối đa ngay ở 20% thời gian của animation */
            opacity: 1; 
        }
        100% { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }

    /* Tối ưu hiệu ứng Mobile: Thêm trượt dọc nhẹ để bắt nhịp với thao tác cuộn auto-scroll */
    @keyframes az-stream-slide-flash {
        0% {
            opacity: 0.2;
            transform: translateY(15px); /* Rớt từ trên xuống thay vì trượt ngang */
            box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--az-text-muted) 50%, transparent);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            box-shadow: inset 0 0 0 0 transparent;
        }
    }

    /* ---------- 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); }

    /* ---------- 7c.1 MOBILE LIST ITEM (V6.13) ----------
       Flat list pattern: KHÔNG card border, KHÔNG card padding, items ngăn cách
       bởi border-b mỏng. Item cuối không có border. Tham khảo iOS list / Material list. */
    .az-mobile-item {
        padding: var(--az-space-3) var(--az-space-2);
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--az-text-muted) 18%, transparent);
        background: transparent;
        box-shadow: none;
    }
    .az-mobile-item:last-child { border-bottom: 0; }
    .az-mobile-item > * + * { margin-top: var(--az-space-2); }
    .az-mobile-item .az-card-row { margin-bottom: 0; }
    /* Force bỏ mọi border thừa từ template/legacy trên descendant */
    .az-mobile-item :is(div, span, a, p, h1, h2, h3, h4):not(.az-btn) {
        border: 0;
        box-shadow: none;
    }
    /* Buttons trong card mobile: KHÔNG outline border, chỉ background filled */
    .az-mobile-item .az-btn {
        border: 0;
    }
    .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 { 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);
        padding: 0.5rem 0.75rem;
        line-height: 1.25rem;
    }

    .az-table :is(thead, tbody, tfoot) :is(td, th) {
        border: 1px solid var(--az-border-color);
    }
    .az-table thead :is(td, th) {
        border-color: rgba(255, 255, 255, .2);
    }

    /* Sticky cột trái — cao hơn cột phải 1 cấp để khi bảng hẹp,
     * cột trái (TT/ID/Mã) che cột phải, không ngược lại.
     * UX priority: user luôn biết đang xem row nào. */
    .az-sticky-col { position: sticky; }
    .az-table tbody td.az-sticky-col {
        z-index: calc(var(--az-z-base) + 1);
        background-color: inherit;
        border-right: 1px solid var(--az-border-color);
    }
    .az-table thead th.az-sticky-col {
        z-index: calc(var(--az-z-sticky-hi) + 1);
        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: calc(var(--az-z-base) + 1);
    }

    /* Sticky cột phải — thấp hơn cột trái 1 cấp. */
    .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);
    }

    /* Sticky tfoot — cột trái cũng cao hơn cột phải cho đồng nhất với thead/tbody */
    .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       { z-index: calc(var(--az-z-sticky-hi) + 1); }
    .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; }

    /* ---------- 7e-2. NAVIGATION TABS — Top-level page routing ----------
       Dùng cho List page có nhiều sub-view (Product: Info/Import/Properties/Reward/Site).
       Nổi bật hơn StatusTabs: có background, font-weight, rounded top corners. */
    .az-nav-tabs {
        width: 100%;
        margin: 0 0 var(--az-space-3);
    }
    .az-nav-tabs > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        gap: var(--az-space-1);
        border-bottom: 2px solid var(--az-border-color);
    }
    .az-nav-tabs > ul::-webkit-scrollbar { display: none; }
    .az-nav-tabs > ul > li {
        padding: var(--az-space-2) var(--az-space-4);
        font-size: var(--az-text-sm);
        font-weight: 600;
        color: var(--az-text-muted);
        cursor: pointer;
        white-space: nowrap;
        border-radius: var(--az-radius-md) var(--az-radius-md) 0 0;
        border: 1px solid transparent;
        border-bottom: none;
        margin-bottom: -2px;
        transition: all var(--az-duration-base) var(--az-ease-out);
    }
    .az-nav-tabs > ul > li:hover {
        color: var(--az-text-main);
        background-color: var(--az-bg-surface-alt);
    }
    .az-nav-tabs > ul > li.active {
        color: var(--az-color-primary);
        background-color: var(--az-bg-surface);
        border-color: var(--az-border-color);
        border-bottom-color: var(--az-bg-surface);
    }
    .az-nav-tabs > ul > li > a { text-decoration: none; color: inherit; }
    .az-nav-tabs > ul > li > i { margin-right: var(--az-space-1); }


    /* ---------- 7f. PAGING ---------- */
    .az-page-links { display: inline-flex; gap: var(--az-space-1); margin-left: auto; }
    .az-page-links a,
    .az-page-links a:link,
    .az-page-links a:visited {
        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.selected:link,
    .az-page-links a.selected:visited,
    .az-page-links a:hover,
    .az-page-links a:focus,
    .az-page-links a:active {
        background-color: var(--az-color-primary);
        color: #ffffff;
        text-decoration: none;
    }
    .az-page-links a:focus { outline: none; }
    .az-page-links a:focus-visible {
        outline: 2px solid var(--az-color-primary);
        outline-offset: 2px;
    }


    /* ---------- 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);
        /* Transition cho auto-resize (V9.1): khi resize() stretch lên 95vh/4:3, animate mượt */
        transition: width var(--az-duration-base) var(--az-ease-out),
                    height var(--az-duration-base) var(--az-ease-out);
    }
    .az-modal-container.noborder { border-radius: 0; }
    .az-modal-container.hasbutton { padding-bottom: 5rem; }
    /* V6.13: Modern close button — circular subtle background + inline SVG X stroke.
       Pattern Material/Radix dialog. Không phụ thuộc file ảnh ngoài. */
    .az-modal-close {
        right: var(--az-space-3);
        top: var(--az-space-3);
        position: absolute;
        margin: 0; padding: 0;
        width: 2rem; height: 2rem;
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 4 L12 12 M12 4 L4 12'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1rem 1rem;
        background-color: color-mix(in srgb, var(--az-text-muted) 12%, transparent);
        border: 0;
        border-radius: 50%;
        z-index: 100;
        cursor: pointer;
        opacity: 0.9;
        transition: background-color var(--az-duration-fast) var(--az-ease-out),
                    opacity var(--az-duration-fast) var(--az-ease-out),
                    transform var(--az-duration-fast) var(--az-ease-out);
    }
    .az-modal-close:hover {
        opacity: 1;
        background-color: color-mix(in srgb, var(--az-danger-500) 18%, transparent);
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4 L12 12 M12 4 L4 12'/%3E%3C/svg%3E");
        transform: scale(1.08) rotate(90deg);
    }
    .az-modal-close:active { transform: scale(0.92) rotate(90deg); }
    .az-modal-close:focus-visible {
        outline: 2px solid var(--az-color-primary);
        outline-offset: 2px;
    }
    .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 ---------- */
    .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); }


    /* ---------- 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);
    }


    /* ---------- 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);
    }


}



@layer components {
    /* ---------- FORM LAYOUT FOR DETAIL POPUP (V6.2) ----------
       Pattern 2-card: form card + footer card có cùng background "surface",
       sit on top modal body có background "modal" (tone tối hơn 1 chút).
       Inspired by macOS sheet, Material card stack, Notion modal. */

    /* Container modal body — full viewport.
       padding-bottom: 0 vì footer sẽ tự bám đáy với padding riêng. */
    .az-detail {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100vh;
        gap: var(--az-space-3);
        padding: var(--az-space-3) var(--az-space-3) 0;
        background-color: transparent;  /* inherit modal bg */
    }

    /* Iframe popup mode (Layout.cshtml render PanelMain.frame khi ?frame=1)
       overflow: auto → cho phép page tự scroll khi content dài hơn viewport.
       Header/footer dùng position:fixed bám viewport, content scroll giữa. */
    html:has(.az-frame),
    body:has(.az-frame),
    .az-frame {
        overflow: auto;
    }

    /* Header zone — title + breadcrumb, BÁM TRÊN cùng .az-detail.
       Tách khỏi body để khi body scroll, header KHÔNG bị scroll theo.
       Optional: nếu Detail không dùng header, title nằm trực tiếp trong body như cũ. */
    .az-detail-header {
        flex: 0 0 auto;
        width: 100%;
        box-sizing: border-box;
        padding: var(--az-space-3) var(--az-space-4);
        background-color: var(--az-bg-surface);
        border-radius: var(--az-radius-lg) var(--az-radius-lg) 0 0;
        /* Border + shadow rõ để báo hiệu header sticky, có nội dung scroll bên dưới */
        border-bottom: 1px solid var(--az-border-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
        display: flex;
        flex-direction: column;
        gap: var(--az-space-2);
        position: relative;
        z-index: 2;        /* trên body shadow để border rõ ràng */
    }
    .az-detail-header + .az-detail-body {
        border-radius: 0 0 var(--az-radius-lg) var(--az-radius-lg);  /* bo dưới khi có header */
        margin-top: 0;
        box-shadow: none;  /* tránh trùng shadow với header */
    }
    /* Title mặc định — bỏ margin-bottom default */
    .az-detail-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--az-text-main);
        line-height: 1.3;
    }
    /* Breadcrumb trong header không cần margin-bottom */
    .az-detail-header > .az-breadcrumb {
        margin: 0;
    }

    /* Form card — chứa fields, scroll khi nội dung dài. Full width. */
    .az-detail-body {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        padding: var(--az-space-4);
        background-color: var(--az-bg-surface);
        border-radius: var(--az-radius-lg);
        box-shadow: var(--az-shadow-sm);
    }

    /* Footer card — bám đáy popup, full width tới mép modal.
       Margin âm để "phá" padding của .az-detail, ép sát mép trái/phải/đáy.
       Padding tăng để có không gian thở cho buttons. */
    .az-form-footer {
        flex: 0 0 auto;
        width: auto;
        margin: 0 calc(-1 * var(--az-space-3)) 0;  /* phá padding ngang của parent */
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--az-space-3);
        padding: var(--az-space-4) var(--az-space-5);  /* tăng padding cho thoáng */
        background-color: var(--az-bg-surface);
        border-radius: 0;  /* sát đáy modal — không bo */
        box-shadow: var(--az-shadow-sm);
    }

    /* Spacer đẩy nhóm primary actions sang phải */
    .az-form-footer-spacer {
        margin-left: auto;
    }

    /* ----------------------------------------------------------------
     * DETAIL TABS — V10.28: Panel toggle cho Detail page multi-section.
     * Dùng chung CSS `.az-tabs` (tab bar styling).
     * Mỗi panel `.az-tab-panel` toggle `.az-hide` khi click tab.
     * ---------------------------------------------------------------- */
    .az-tab-panel {
        width: 100%;
    }

    /* Section title bên trong tab panel */
    .az-section-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--az-text-main);
        margin: 0 0 var(--az-space-3) 0;
        padding-bottom: var(--az-space-2);
        border-bottom: 1px solid var(--az-border-color);
    }

    /* Detail tabs sticky — BÁM DƯỚI header khi scroll body dài.
       Chỉ apply khi nằm trong .az-detail (không ảnh hưởng StatusTabs của List). */
    .az-detail > .az-detail-tabs {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--az-bg-surface);
        margin: 0 calc(-1 * var(--az-space-3));
        padding: 0 var(--az-space-3);
        border-bottom: 1px solid var(--az-border-color);
    }

    /* Khi Detail có tabs → body bo góc trên = 0 (tabs đã chiếm) */
    .az-detail-tabs + .az-detail-body {
        border-radius: 0 0 var(--az-radius-lg) var(--az-radius-lg);
    }

    /* ----------------------------------------------------------------
     * FIELDSET + SETTING ROW — V10.28: Layout cho Policy / Config tabs.
     * Thay thế pattern cũ `<div class="row"><label>...<input>...<span>`.
     * ---------------------------------------------------------------- */
    .az-fieldset {
        margin-bottom: var(--az-space-5);
        padding: var(--az-space-4) var(--az-space-5);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-md);
        background-color: var(--az-bg-surface-alt);
    }
    .az-fieldset > legend {
        font-size: var(--az-text-sm);
        font-weight: 700;
        padding: 0 var(--az-space-2);
        color: var(--az-color-primary);
    }

    /* Setting row — 3 vùng: label | control | description */
    .az-setting-row {
        display: flex;
        align-items: flex-start;
        gap: var(--az-space-3);
        padding: var(--az-space-3) 0;
        border-bottom: 1px dashed var(--az-border-color);
    }
    .az-setting-row:last-child { border-bottom: none; }

    .az-setting-label {
        flex: 0 0 140px;
        font-weight: 600;
        font-size: var(--az-text-sm);
        color: var(--az-text-main);
        padding-top: 2px;
    }
    .az-setting-control {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: var(--az-space-2);
        min-height: 1.75rem;
    }
    .az-setting-control input[type="text"],
    .az-setting-control input[type="number"] {
        text-align: center;
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-sm);
        padding: var(--az-space-1) var(--az-space-2);
        width: 80px;
    }
    .az-setting-control select {
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-sm);
        padding: var(--az-space-1) var(--az-space-2);
    }
    .az-setting-desc {
        flex: 1 1 0;
        font-size: var(--az-text-sm);
        color: var(--az-text-muted);
        padding-top: 2px;
        line-height: 1.6;
    }

    /* Radio group bên trong setting row — dọc + khoảng cách giữa options */
    .az-setting-control.az-radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--az-space-2);
    }
    .az-radio-option {
        display: flex;
        align-items: center;
        gap: var(--az-space-2);
        cursor: pointer;
        font-size: var(--az-text-sm);
    }

    /* Responsive: mobile stack dọc */
    @media (max-width: 768px) {
        .az-setting-row { flex-direction: column; gap: var(--az-space-1); }
        .az-setting-label { flex: none; }
    }

    /* Trong iframe popup mode:
       - background TRANSPARENT để hiển thị màu nền body của template (seamless với layout cha).
       - margin top 5rem để chừa chỗ cho .az-detail-header (position:fixed top:0).
       - margin bottom 8rem để chừa chỗ cho .az-form-footer (position:fixed bottom:0). */
    .az-frame .az-main-content {
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 5rem 0 8rem 0;
    }
    /* ---------- 7o. ARTICLE VIEW — Reading view container ----------
       Dùng cho trang hiển thị nội dung đọc: Notify Detail, News Detail,
       Blog post, Product description, Help article, Email viewer...
       3 sub-element: az-article-title / az-article-summary / az-article-body. */
    .az-article {
        max-width: 1000px;
        margin: 0 auto;
        padding: var(--az-space-5) var(--az-space-6) var(--az-space-8);
        background-color: var(--az-bg-surface);
        border-radius: var(--az-radius-lg);
        color: var(--az-text-main);
    }
 
    /* Hero image — ảnh lớn đầu trang, con trực tiếp của .az-article */
    .az-article > img {
        display: block;
        max-width: 100%;
        max-height: 30vh;
        margin: 0 auto var(--az-space-4);
        border-radius: var(--az-radius-md);
        object-fit: contain;
    }
 
    /* Title — UPPERCASE, bold, emphasis chính */
    .az-article-title {
        margin: var(--az-space-2) 0 var(--az-space-3);
        padding: 0;
        color: var(--az-text-main);
        font-size: var(--az-text-lg);
        font-weight: 700;
        line-height: 1.5;
        text-transform: uppercase;
    }
 
    /* Summary — đoạn tóm tắt bold, tương đương lead paragraph */
    .az-article-summary {
        margin: 0 0 var(--az-space-3);
        padding: 0;
        color: var(--az-text-main);
        font-size: 0.9375rem;    /* 15px — giữa base (16px) và sm (14px) */
        font-weight: 700;
        line-height: 1.5;
    }
    .az-article-summary * {
        font-size: inherit;
        font-weight: inherit;
    }
    .az-article-summary p {
        margin: 0;
        padding: 0;
    }
 
    /* Body — rich text description: auto-style h1-h3, img, a, ul */
    .az-article-body {
        color: var(--az-text-main);
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    .az-article-body h1,
    .az-article-body h2 {
        margin: var(--az-space-4) 0 var(--az-space-2);
        font-size: var(--az-text-lg);
        font-weight: 700;
        line-height: 1.4;
    }
    .az-article-body h3 {
        margin: var(--az-space-3) 0 var(--az-space-2);
        font-size: var(--az-text-base);
        font-weight: 700;
        line-height: 1.5;
    }
    .az-article-body img {
        display: block;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: var(--az-space-3) auto;
        border-radius: var(--az-radius-sm);
    }
    .az-article-body a {
        color: var(--az-text-link);
        text-decoration: none;
    }
    .az-article-body a:hover {
        color: var(--az-text-link-hover);
        text-decoration: underline;
    }
    .az-article-body ul {
        list-style: disc;
        padding-left: var(--az-space-5);
        margin: var(--az-space-2) 0;
    }
    .az-article-body ol {
        list-style: decimal;
        padding-left: var(--az-space-5);
        margin: var(--az-space-2) 0;
    }
    .az-article-body p {
        margin: 0 0 var(--az-space-3);
    }
}

/* =============================================================================
 * 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-center,.text-center { text-align: center; }
    .az-text-right,.text-right  { text-align: right; }

    /* Spacing — Tailwind-style scale 0 → 32 */
    .m-0 { margin: 0; } .m-0\.5 { margin: 0.125rem; } .m-1 { margin: var(--az-space-1); } .m-1\.5 { margin: 0.375rem; } .m-2 { margin: var(--az-space-2); } .m-2\.5 { margin: 0.625rem; } .m-3 { margin: var(--az-space-3); } .m-3\.5 { margin: 0.875rem; } .m-4 { margin: var(--az-space-4); } .m-5 { margin: var(--az-space-5); } .m-6 { margin: var(--az-space-6); } .m-7 { margin: 1.75rem; } .m-8 { margin: var(--az-space-8); } .m-9 { margin: 2.25rem; } .m-10 { margin: var(--az-space-10); } .m-11 { margin: 2.75rem; } .m-12 { margin: var(--az-space-12); } .m-14 { margin: 3.5rem; } .m-16 { margin: var(--az-space-16); } .m-20 { margin: 5rem; } .m-24 { margin: 6rem; } .m-28 { margin: 7rem; } .m-32 { margin: 8rem; }
    .mx-0 { margin-left: 0; margin-right: 0; } .mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; } .mx-1 { margin-left: var(--az-space-1); margin-right: var(--az-space-1); } .mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem; } .mx-2 { margin-left: var(--az-space-2); margin-right: var(--az-space-2); } .mx-2\.5 { margin-left: 0.625rem; margin-right: 0.625rem; } .mx-3 { margin-left: var(--az-space-3); margin-right: var(--az-space-3); } .mx-3\.5 { margin-left: 0.875rem; margin-right: 0.875rem; } .mx-4 { margin-left: var(--az-space-4); margin-right: var(--az-space-4); } .mx-5 { margin-left: var(--az-space-5); margin-right: var(--az-space-5); } .mx-6 { margin-left: var(--az-space-6); margin-right: var(--az-space-6); } .mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; } .mx-8 { margin-left: var(--az-space-8); margin-right: var(--az-space-8); } .mx-9 { margin-left: 2.25rem; margin-right: 2.25rem; } .mx-10 { margin-left: var(--az-space-10); margin-right: var(--az-space-10); } .mx-11 { margin-left: 2.75rem; margin-right: 2.75rem; } .mx-12 { margin-left: var(--az-space-12); margin-right: var(--az-space-12); } .mx-14 { margin-left: 3.5rem; margin-right: 3.5rem; } .mx-16 { margin-left: var(--az-space-16); margin-right: var(--az-space-16); } .mx-20 { margin-left: 5rem; margin-right: 5rem; } .mx-24 { margin-left: 6rem; margin-right: 6rem; } .mx-28 { margin-left: 7rem; margin-right: 7rem; } .mx-32 { margin-left: 8rem; margin-right: 8rem; }
    .my-0 { margin-top: 0; margin-bottom: 0; } .my-0\.5 { margin-top: 0.125rem; margin-bottom: 0.125rem; } .my-1 { margin-top: var(--az-space-1); margin-bottom: var(--az-space-1); } .my-1\.5 { margin-top: 0.375rem; margin-bottom: 0.375rem; } .my-2 { margin-top: var(--az-space-2); margin-bottom: var(--az-space-2); } .my-2\.5 { margin-top: 0.625rem; margin-bottom: 0.625rem; } .my-3 { margin-top: var(--az-space-3); margin-bottom: var(--az-space-3); } .my-3\.5 { margin-top: 0.875rem; margin-bottom: 0.875rem; } .my-4 { margin-top: var(--az-space-4); margin-bottom: var(--az-space-4); } .my-5 { margin-top: var(--az-space-5); margin-bottom: var(--az-space-5); } .my-6 { margin-top: var(--az-space-6); margin-bottom: var(--az-space-6); } .my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; } .my-8 { margin-top: var(--az-space-8); margin-bottom: var(--az-space-8); } .my-9 { margin-top: 2.25rem; margin-bottom: 2.25rem; } .my-10 { margin-top: var(--az-space-10); margin-bottom: var(--az-space-10); } .my-11 { margin-top: 2.75rem; margin-bottom: 2.75rem; } .my-12 { margin-top: var(--az-space-12); margin-bottom: var(--az-space-12); } .my-14 { margin-top: 3.5rem; margin-bottom: 3.5rem; } .my-16 { margin-top: var(--az-space-16); margin-bottom: var(--az-space-16); } .my-20 { margin-top: 5rem; margin-bottom: 5rem; } .my-24 { margin-top: 6rem; margin-bottom: 6rem; } .my-28 { margin-top: 7rem; margin-bottom: 7rem; } .my-32 { margin-top: 8rem; margin-bottom: 8rem; }
    .mt-0 { margin-top: 0; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: var(--az-space-1); } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: var(--az-space-2); } .mt-2\.5 { margin-top: 0.625rem; } .mt-3 { margin-top: var(--az-space-3); } .mt-3\.5 { margin-top: 0.875rem; } .mt-4 { margin-top: var(--az-space-4); } .mt-5 { margin-top: var(--az-space-5); } .mt-6 { margin-top: var(--az-space-6); } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: var(--az-space-8); } .mt-9 { margin-top: 2.25rem; } .mt-10 { margin-top: var(--az-space-10); } .mt-11 { margin-top: 2.75rem; } .mt-12 { margin-top: var(--az-space-12); } .mt-14 { margin-top: 3.5rem; } .mt-16 { margin-top: var(--az-space-16); } .mt-20 { margin-top: 5rem; } .mt-24 { margin-top: 6rem; } .mt-28 { margin-top: 7rem; } .mt-32 { margin-top: 8rem; }
    .mb-0 { margin-bottom: 0; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: var(--az-space-1); } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-2 { margin-bottom: var(--az-space-2); } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-3 { margin-bottom: var(--az-space-3); } .mb-3\.5 { margin-bottom: 0.875rem; } .mb-4 { margin-bottom: var(--az-space-4); } .mb-5 { margin-bottom: var(--az-space-5); } .mb-6 { margin-bottom: var(--az-space-6); } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: var(--az-space-8); } .mb-9 { margin-bottom: 2.25rem; } .mb-10 { margin-bottom: var(--az-space-10); } .mb-11 { margin-bottom: 2.75rem; } .mb-12 { margin-bottom: var(--az-space-12); } .mb-14 { margin-bottom: 3.5rem; } .mb-16 { margin-bottom: var(--az-space-16); } .mb-20 { margin-bottom: 5rem; } .mb-24 { margin-bottom: 6rem; } .mb-28 { margin-bottom: 7rem; } .mb-32 { margin-bottom: 8rem; }
    .ml-0 { margin-left: 0; } .ml-0\.5 { margin-left: 0.125rem; } .ml-1 { margin-left: var(--az-space-1); } .ml-1\.5 { margin-left: 0.375rem; } .ml-2 { margin-left: var(--az-space-2); } .ml-2\.5 { margin-left: 0.625rem; } .ml-3 { margin-left: var(--az-space-3); } .ml-3\.5 { margin-left: 0.875rem; } .ml-4 { margin-left: var(--az-space-4); } .ml-5 { margin-left: var(--az-space-5); } .ml-6 { margin-left: var(--az-space-6); } .ml-7 { margin-left: 1.75rem; } .ml-8 { margin-left: var(--az-space-8); } .ml-9 { margin-left: 2.25rem; } .ml-10 { margin-left: var(--az-space-10); } .ml-11 { margin-left: 2.75rem; } .ml-12 { margin-left: var(--az-space-12); } .ml-14 { margin-left: 3.5rem; } .ml-16 { margin-left: var(--az-space-16); } .ml-20 { margin-left: 5rem; } .ml-24 { margin-left: 6rem; } .ml-28 { margin-left: 7rem; } .ml-32 { margin-left: 8rem; }
    .mr-0 { margin-right: 0; } .mr-0\.5 { margin-right: 0.125rem; } .mr-1 { margin-right: var(--az-space-1); } .mr-1\.5 { margin-right: 0.375rem; } .mr-2 { margin-right: var(--az-space-2); } .mr-2\.5 { margin-right: 0.625rem; } .mr-3 { margin-right: var(--az-space-3); } .mr-3\.5 { margin-right: 0.875rem; } .mr-4 { margin-right: var(--az-space-4); } .mr-5 { margin-right: var(--az-space-5); } .mr-6 { margin-right: var(--az-space-6); } .mr-7 { margin-right: 1.75rem; } .mr-8 { margin-right: var(--az-space-8); } .mr-9 { margin-right: 2.25rem; } .mr-10 { margin-right: var(--az-space-10); } .mr-11 { margin-right: 2.75rem; } .mr-12 { margin-right: var(--az-space-12); } .mr-14 { margin-right: 3.5rem; } .mr-16 { margin-right: var(--az-space-16); } .mr-20 { margin-right: 5rem; } .mr-24 { margin-right: 6rem; } .mr-28 { margin-right: 7rem; } .mr-32 { margin-right: 8rem; }
    .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; }
    .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mt-auto { margin-top: auto; } .mb-auto { margin-bottom: auto; }
    .p-0 { padding: 0; } .p-0\.5 { padding: 0.125rem; } .p-1 { padding: var(--az-space-1); } .p-1\.5 { padding: 0.375rem; } .p-2 { padding: var(--az-space-2); } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: var(--az-space-3); } .p-3\.5 { padding: 0.875rem; } .p-4 { padding: var(--az-space-4); } .p-5 { padding: var(--az-space-5); } .p-6 { padding: var(--az-space-6); } .p-7 { padding: 1.75rem; } .p-8 { padding: var(--az-space-8); } .p-9 { padding: 2.25rem; } .p-10 { padding: var(--az-space-10); } .p-11 { padding: 2.75rem; } .p-12 { padding: var(--az-space-12); } .p-14 { padding: 3.5rem; } .p-16 { padding: var(--az-space-16); } .p-20 { padding: 5rem; } .p-24 { padding: 6rem; } .p-28 { padding: 7rem; } .p-32 { padding: 8rem; }
    .px-0 { padding-left: 0; padding-right: 0; } .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; } .px-1 { padding-left: var(--az-space-1); padding-right: var(--az-space-1); } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-2 { padding-left: var(--az-space-2); padding-right: var(--az-space-2); } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: var(--az-space-3); padding-right: var(--az-space-3); } .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } .px-4 { padding-left: var(--az-space-4); padding-right: var(--az-space-4); } .px-5 { padding-left: var(--az-space-5); padding-right: var(--az-space-5); } .px-6 { padding-left: var(--az-space-6); padding-right: var(--az-space-6); } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .px-8 { padding-left: var(--az-space-8); padding-right: var(--az-space-8); } .px-9 { padding-left: 2.25rem; padding-right: 2.25rem; } .px-10 { padding-left: var(--az-space-10); padding-right: var(--az-space-10); } .px-11 { padding-left: 2.75rem; padding-right: 2.75rem; } .px-12 { padding-left: var(--az-space-12); padding-right: var(--az-space-12); } .px-14 { padding-left: 3.5rem; padding-right: 3.5rem; } .px-16 { padding-left: var(--az-space-16); padding-right: var(--az-space-16); } .px-20 { padding-left: 5rem; padding-right: 5rem; } .px-24 { padding-left: 6rem; padding-right: 6rem; } .px-28 { padding-left: 7rem; padding-right: 7rem; } .px-32 { padding-left: 8rem; padding-right: 8rem; }
    .py-0 { padding-top: 0; padding-bottom: 0; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .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); } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3 { padding-top: var(--az-space-3); padding-bottom: var(--az-space-3); } .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-4 { padding-top: var(--az-space-4); padding-bottom: var(--az-space-4); } .py-5 { padding-top: var(--az-space-5); padding-bottom: var(--az-space-5); } .py-6 { padding-top: var(--az-space-6); padding-bottom: var(--az-space-6); } .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } .py-8 { padding-top: var(--az-space-8); padding-bottom: var(--az-space-8); } .py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .py-10 { padding-top: var(--az-space-10); padding-bottom: var(--az-space-10); } .py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; } .py-12 { padding-top: var(--az-space-12); padding-bottom: var(--az-space-12); } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: var(--az-space-16); padding-bottom: var(--az-space-16); } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .py-28 { padding-top: 7rem; padding-bottom: 7rem; } .py-32 { padding-top: 8rem; padding-bottom: 8rem; }
    .pt-0 { padding-top: 0; } .pt-0\.5 { padding-top: 0.125rem; } .pt-1 { padding-top: var(--az-space-1); } .pt-1\.5 { padding-top: 0.375rem; } .pt-2 { padding-top: var(--az-space-2); } .pt-2\.5 { padding-top: 0.625rem; } .pt-3 { padding-top: var(--az-space-3); } .pt-3\.5 { padding-top: 0.875rem; } .pt-4 { padding-top: var(--az-space-4); } .pt-5 { padding-top: var(--az-space-5); } .pt-6 { padding-top: var(--az-space-6); } .pt-7 { padding-top: 1.75rem; } .pt-8 { padding-top: var(--az-space-8); } .pt-9 { padding-top: 2.25rem; } .pt-10 { padding-top: var(--az-space-10); } .pt-11 { padding-top: 2.75rem; } .pt-12 { padding-top: var(--az-space-12); } .pt-14 { padding-top: 3.5rem; } .pt-16 { padding-top: var(--az-space-16); } .pt-20 { padding-top: 5rem; } .pt-24 { padding-top: 6rem; } .pt-28 { padding-top: 7rem; } .pt-32 { padding-top: 8rem; }
    .pb-0 { padding-bottom: 0; } .pb-0\.5 { padding-bottom: 0.125rem; } .pb-1 { padding-bottom: var(--az-space-1); } .pb-1\.5 { padding-bottom: 0.375rem; } .pb-2 { padding-bottom: var(--az-space-2); } .pb-2\.5 { padding-bottom: 0.625rem; } .pb-3 { padding-bottom: var(--az-space-3); } .pb-3\.5 { padding-bottom: 0.875rem; } .pb-4 { padding-bottom: var(--az-space-4); } .pb-5 { padding-bottom: var(--az-space-5); } .pb-6 { padding-bottom: var(--az-space-6); } .pb-7 { padding-bottom: 1.75rem; } .pb-8 { padding-bottom: var(--az-space-8); } .pb-9 { padding-bottom: 2.25rem; } .pb-10 { padding-bottom: var(--az-space-10); } .pb-11 { padding-bottom: 2.75rem; } .pb-12 { padding-bottom: var(--az-space-12); } .pb-14 { padding-bottom: 3.5rem; } .pb-16 { padding-bottom: var(--az-space-16); } .pb-20 { padding-bottom: 5rem; } .pb-24 { padding-bottom: 6rem; } .pb-28 { padding-bottom: 7rem; } .pb-32 { padding-bottom: 8rem; }
    .pl-0 { padding-left: 0; } .pl-0\.5 { padding-left: 0.125rem; } .pl-1 { padding-left: var(--az-space-1); } .pl-1\.5 { padding-left: 0.375rem; } .pl-2 { padding-left: var(--az-space-2); } .pl-2\.5 { padding-left: 0.625rem; } .pl-3 { padding-left: var(--az-space-3); } .pl-3\.5 { padding-left: 0.875rem; } .pl-4 { padding-left: var(--az-space-4); } .pl-5 { padding-left: var(--az-space-5); } .pl-6 { padding-left: var(--az-space-6); } .pl-7 { padding-left: 1.75rem; } .pl-8 { padding-left: var(--az-space-8); } .pl-9 { padding-left: 2.25rem; } .pl-10 { padding-left: var(--az-space-10); } .pl-11 { padding-left: 2.75rem; } .pl-12 { padding-left: var(--az-space-12); } .pl-14 { padding-left: 3.5rem; } .pl-16 { padding-left: var(--az-space-16); } .pl-20 { padding-left: 5rem; } .pl-24 { padding-left: 6rem; } .pl-28 { padding-left: 7rem; } .pl-32 { padding-left: 8rem; }
    .pr-0 { padding-right: 0; } .pr-0\.5 { padding-right: 0.125rem; } .pr-1 { padding-right: var(--az-space-1); } .pr-1\.5 { padding-right: 0.375rem; } .pr-2 { padding-right: var(--az-space-2); } .pr-2\.5 { padding-right: 0.625rem; } .pr-3 { padding-right: var(--az-space-3); } .pr-3\.5 { padding-right: 0.875rem; } .pr-4 { padding-right: var(--az-space-4); } .pr-5 { padding-right: var(--az-space-5); } .pr-6 { padding-right: var(--az-space-6); } .pr-7 { padding-right: 1.75rem; } .pr-8 { padding-right: var(--az-space-8); } .pr-9 { padding-right: 2.25rem; } .pr-10 { padding-right: var(--az-space-10); } .pr-11 { padding-right: 2.75rem; } .pr-12 { padding-right: var(--az-space-12); } .pr-14 { padding-right: 3.5rem; } .pr-16 { padding-right: var(--az-space-16); } .pr-20 { padding-right: 5rem; } .pr-24 { padding-right: 6rem; } .pr-28 { padding-right: 7rem; } .pr-32 { padding-right: 8rem; }
    .gap-0 { gap: 0; } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: var(--az-space-1); } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: var(--az-space-2); } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: var(--az-space-3); } .gap-3\.5 { gap: 0.875rem; } .gap-4 { gap: var(--az-space-4); } .gap-5 { gap: var(--az-space-5); } .gap-6 { gap: var(--az-space-6); } .gap-7 { gap: 1.75rem; } .gap-8 { gap: var(--az-space-8); } .gap-9 { gap: 2.25rem; } .gap-10 { gap: var(--az-space-10); } .gap-11 { gap: 2.75rem; } .gap-12 { gap: var(--az-space-12); } .gap-14 { gap: 3.5rem; } .gap-16 { gap: var(--az-space-16); } .gap-20 { gap: 5rem; } .gap-24 { gap: 6rem; } .gap-28 { gap: 7rem; } .gap-32 { gap: 8rem; }
    .gap-x-0 { column-gap: 0; } .gap-x-0\.5 { column-gap: 0.125rem; } .gap-x-1 { column-gap: var(--az-space-1); } .gap-x-1\.5 { column-gap: 0.375rem; } .gap-x-2 { column-gap: var(--az-space-2); } .gap-x-2\.5 { column-gap: 0.625rem; } .gap-x-3 { column-gap: var(--az-space-3); } .gap-x-3\.5 { column-gap: 0.875rem; } .gap-x-4 { column-gap: var(--az-space-4); } .gap-x-5 { column-gap: var(--az-space-5); } .gap-x-6 { column-gap: var(--az-space-6); } .gap-x-7 { column-gap: 1.75rem; } .gap-x-8 { column-gap: var(--az-space-8); } .gap-x-9 { column-gap: 2.25rem; } .gap-x-10 { column-gap: var(--az-space-10); } .gap-x-11 { column-gap: 2.75rem; } .gap-x-12 { column-gap: var(--az-space-12); } .gap-x-14 { column-gap: 3.5rem; } .gap-x-16 { column-gap: var(--az-space-16); } .gap-x-20 { column-gap: 5rem; } .gap-x-24 { column-gap: 6rem; } .gap-x-28 { column-gap: 7rem; } .gap-x-32 { column-gap: 8rem; }
    .gap-y-0 { row-gap: 0; } .gap-y-0\.5 { row-gap: 0.125rem; } .gap-y-1 { row-gap: var(--az-space-1); } .gap-y-1\.5 { row-gap: 0.375rem; } .gap-y-2 { row-gap: var(--az-space-2); } .gap-y-2\.5 { row-gap: 0.625rem; } .gap-y-3 { row-gap: var(--az-space-3); } .gap-y-3\.5 { row-gap: 0.875rem; } .gap-y-4 { row-gap: var(--az-space-4); } .gap-y-5 { row-gap: var(--az-space-5); } .gap-y-6 { row-gap: var(--az-space-6); } .gap-y-7 { row-gap: 1.75rem; } .gap-y-8 { row-gap: var(--az-space-8); } .gap-y-9 { row-gap: 2.25rem; } .gap-y-10 { row-gap: var(--az-space-10); } .gap-y-11 { row-gap: 2.75rem; } .gap-y-12 { row-gap: var(--az-space-12); } .gap-y-14 { row-gap: 3.5rem; } .gap-y-16 { row-gap: var(--az-space-16); } .gap-y-20 { row-gap: 5rem; } .gap-y-24 { row-gap: 6rem; } .gap-y-28 { row-gap: 7rem; } .gap-y-32 { row-gap: 8rem; }



    /* Widths — scale 0 → 96 + fractions + viewport */
    .w-0 { width: 0; } .w-0\.5 { width: 0.125rem; } .w-1 { width: var(--az-space-1); } .w-1\.5 { width: 0.375rem; } .w-2 { width: var(--az-space-2); } .w-2\.5 { width: 0.625rem; } .w-3 { width: var(--az-space-3); } .w-3\.5 { width: 0.875rem; } .w-4 { width: var(--az-space-4); } .w-5 { width: var(--az-space-5); } .w-6 { width: var(--az-space-6); } .w-7 { width: 1.75rem; } .w-8 { width: var(--az-space-8); } .w-9 { width: 2.25rem; } .w-10 { width: var(--az-space-10); } .w-11 { width: 2.75rem; } .w-12 { width: var(--az-space-12); } .w-14 { width: 3.5rem; } .w-16 { width: var(--az-space-16); } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-40 { width: 10rem; } .w-44 { width: 11rem; } .w-48 { width: 12rem; } .w-52 { width: 13rem; } .w-56 { width: 14rem; } .w-60 { width: 15rem; } .w-64 { width: 16rem; } .w-72 { width: 18rem; } .w-80 { width: 20rem; } .w-96 { width: 24rem; }
    .w-auto { width: auto; } .w-full { width: 100%; } .w-screen { width: 100vw; } .w-min { width: min-content; } .w-max { width: max-content; } .w-fit { width: fit-content; }
    .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.3333%; } .w-2\/3 { width: 66.6667%; } .w-1\/4 { width: 25%; } .w-2\/4 { width: 50%; } .w-3\/4 { width: 75%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .w-4\/5 { width: 80%; } .w-1\/6 { width: 16.6667%; } .w-2\/6 { width: 33.3333%; } .w-3\/6 { width: 50%; } .w-4\/6 { width: 66.6667%; } .w-5\/6 { width: 83.3333%; } .w-1\/12 { width: 8.3333%; } .w-2\/12 { width: 16.6667%; } .w-3\/12 { width: 25%; } .w-4\/12 { width: 33.3333%; } .w-5\/12 { width: 41.6667%; } .w-6\/12 { width: 50%; } .w-7\/12 { width: 58.3333%; } .w-8\/12 { width: 66.6667%; } .w-9\/12 { width: 75%; } .w-10\/12 { width: 83.3333%; } .w-11\/12 { width: 91.6667%; }

    /* Min-Width */
    .min-w-0 { min-width: 0; } .min-w-0\.5 { min-width: 0.125rem; } .min-w-1 { min-width: var(--az-space-1); } .min-w-1\.5 { min-width: 0.375rem; } .min-w-2 { min-width: var(--az-space-2); } .min-w-2\.5 { min-width: 0.625rem; } .min-w-3 { min-width: var(--az-space-3); } .min-w-3\.5 { min-width: 0.875rem; } .min-w-4 { min-width: var(--az-space-4); } .min-w-5 { min-width: var(--az-space-5); } .min-w-6 { min-width: var(--az-space-6); } .min-w-7 { min-width: 1.75rem; } .min-w-8 { min-width: var(--az-space-8); } .min-w-9 { min-width: 2.25rem; } .min-w-10 { min-width: var(--az-space-10); } .min-w-11 { min-width: 2.75rem; } .min-w-12 { min-width: var(--az-space-12); } .min-w-14 { min-width: 3.5rem; } .min-w-16 { min-width: var(--az-space-16); } .min-w-20 { min-width: 5rem; } .min-w-24 { min-width: 6rem; } .min-w-28 { min-width: 7rem; } .min-w-32 { min-width: 8rem; } .min-w-36 { min-width: 9rem; } .min-w-40 { min-width: 10rem; } .min-w-44 { min-width: 11rem; } .min-w-48 { min-width: 12rem; } .min-w-52 { min-width: 13rem; } .min-w-56 { min-width: 14rem; } .min-w-60 { min-width: 15rem; } .min-w-64 { min-width: 16rem; } .min-w-72 { min-width: 18rem; } .min-w-80 { min-width: 20rem; } .min-w-96 { min-width: 24rem; }
    .min-w-auto { min-width: auto; } .min-w-full { min-width: 100%; } .min-w-min { min-width: min-content; } .min-w-max { min-width: max-content; } .min-w-fit { min-width: fit-content; }

    /* Max-Width — T-shirt sizes + scale */
    .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-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; }
    .max-w-none { max-width: none; } .max-w-full { max-width: 100%; } .max-w-screen { max-width: 100vw; } .max-w-min { max-width: min-content; } .max-w-max { max-width: max-content; } .max-w-fit { max-width: fit-content; }
    .max-w-0 { max-width: 0; } .max-w-0\.5 { max-width: 0.125rem; } .max-w-1 { max-width: var(--az-space-1); } .max-w-1\.5 { max-width: 0.375rem; } .max-w-2 { max-width: var(--az-space-2); } .max-w-2\.5 { max-width: 0.625rem; } .max-w-3 { max-width: var(--az-space-3); } .max-w-3\.5 { max-width: 0.875rem; } .max-w-4 { max-width: var(--az-space-4); } .max-w-5 { max-width: var(--az-space-5); } .max-w-6 { max-width: var(--az-space-6); } .max-w-7 { max-width: 1.75rem; } .max-w-8 { max-width: var(--az-space-8); } .max-w-9 { max-width: 2.25rem; } .max-w-10 { max-width: var(--az-space-10); } .max-w-11 { max-width: 2.75rem; } .max-w-12 { max-width: var(--az-space-12); } .max-w-14 { max-width: 3.5rem; } .max-w-16 { max-width: var(--az-space-16); } .max-w-20 { max-width: 5rem; } .max-w-24 { max-width: 6rem; } .max-w-28 { max-width: 7rem; } .max-w-32 { max-width: 8rem; } .max-w-36 { max-width: 9rem; } .max-w-40 { max-width: 10rem; } .max-w-44 { max-width: 11rem; } .max-w-48 { max-width: 12rem; } .max-w-52 { max-width: 13rem; } .max-w-56 { max-width: 14rem; } .max-w-60 { max-width: 15rem; } .max-w-64 { max-width: 16rem; } .max-w-72 { max-width: 18rem; } .max-w-80 { max-width: 20rem; } .max-w-96 { max-width: 24rem; }

    /* Heights — scale 0 → 96 + fractions + viewport */
    .h-0 { height: 0; } .h-0\.5 { height: 0.125rem; } .h-1 { height: var(--az-space-1); } .h-1\.5 { height: 0.375rem; } .h-2 { height: var(--az-space-2); } .h-2\.5 { height: 0.625rem; } .h-3 { height: var(--az-space-3); } .h-3\.5 { height: 0.875rem; } .h-4 { height: var(--az-space-4); } .h-5 { height: var(--az-space-5); } .h-6 { height: var(--az-space-6); } .h-7 { height: 1.75rem; } .h-8 { height: var(--az-space-8); } .h-9 { height: 2.25rem; } .h-10 { height: var(--az-space-10); } .h-11 { height: 2.75rem; } .h-12 { height: var(--az-space-12); } .h-14 { height: 3.5rem; } .h-16 { height: var(--az-space-16); } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-28 { height: 7rem; } .h-32 { height: 8rem; } .h-36 { height: 9rem; } .h-40 { height: 10rem; } .h-44 { height: 11rem; } .h-48 { height: 12rem; } .h-52 { height: 13rem; } .h-56 { height: 14rem; } .h-60 { height: 15rem; } .h-64 { height: 16rem; } .h-72 { height: 18rem; } .h-80 { height: 20rem; } .h-96 { height: 24rem; }
    .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-dvh { height: 100dvh; } .h-min { height: min-content; } .h-max { height: max-content; } .h-fit { height: fit-content; }
    .h-1\/2 { height: 50%; } .h-1\/3 { height: 33.3333%; } .h-2\/3 { height: 66.6667%; } .h-1\/4 { height: 25%; } .h-2\/4 { height: 50%; } .h-3\/4 { height: 75%; } .h-1\/5 { height: 20%; } .h-2\/5 { height: 40%; } .h-3\/5 { height: 60%; } .h-4\/5 { height: 80%; } .h-1\/6 { height: 16.6667%; } .h-2\/6 { height: 33.3333%; } .h-3\/6 { height: 50%; } .h-4\/6 { height: 66.6667%; } .h-5\/6 { height: 83.3333%; }

    /* Min-Height */
    .min-h-0 { min-height: 0; } .min-h-0\.5 { min-height: 0.125rem; } .min-h-1 { min-height: var(--az-space-1); } .min-h-1\.5 { min-height: 0.375rem; } .min-h-2 { min-height: var(--az-space-2); } .min-h-2\.5 { min-height: 0.625rem; } .min-h-3 { min-height: var(--az-space-3); } .min-h-3\.5 { min-height: 0.875rem; } .min-h-4 { min-height: var(--az-space-4); } .min-h-5 { min-height: var(--az-space-5); } .min-h-6 { min-height: var(--az-space-6); } .min-h-7 { min-height: 1.75rem; } .min-h-8 { min-height: var(--az-space-8); } .min-h-9 { min-height: 2.25rem; } .min-h-10 { min-height: var(--az-space-10); } .min-h-11 { min-height: 2.75rem; } .min-h-12 { min-height: var(--az-space-12); } .min-h-14 { min-height: 3.5rem; } .min-h-16 { min-height: var(--az-space-16); } .min-h-20 { min-height: 5rem; } .min-h-24 { min-height: 6rem; } .min-h-28 { min-height: 7rem; } .min-h-32 { min-height: 8rem; } .min-h-36 { min-height: 9rem; } .min-h-40 { min-height: 10rem; } .min-h-44 { min-height: 11rem; } .min-h-48 { min-height: 12rem; } .min-h-52 { min-height: 13rem; } .min-h-56 { min-height: 14rem; } .min-h-60 { min-height: 15rem; } .min-h-64 { min-height: 16rem; } .min-h-72 { min-height: 18rem; } .min-h-80 { min-height: 20rem; } .min-h-96 { min-height: 24rem; }
    .min-h-auto { min-height: auto; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .min-h-dvh { min-height: 100dvh; }

    /* Max-Height */
    .max-h-0 { max-height: 0; } .max-h-0\.5 { max-height: 0.125rem; } .max-h-1 { max-height: var(--az-space-1); } .max-h-1\.5 { max-height: 0.375rem; } .max-h-2 { max-height: var(--az-space-2); } .max-h-2\.5 { max-height: 0.625rem; } .max-h-3 { max-height: var(--az-space-3); } .max-h-3\.5 { max-height: 0.875rem; } .max-h-4 { max-height: var(--az-space-4); } .max-h-5 { max-height: var(--az-space-5); } .max-h-6 { max-height: var(--az-space-6); } .max-h-7 { max-height: 1.75rem; } .max-h-8 { max-height: var(--az-space-8); } .max-h-9 { max-height: 2.25rem; } .max-h-10 { max-height: var(--az-space-10); } .max-h-11 { max-height: 2.75rem; } .max-h-12 { max-height: var(--az-space-12); } .max-h-14 { max-height: 3.5rem; } .max-h-16 { max-height: var(--az-space-16); } .max-h-20 { max-height: 5rem; } .max-h-24 { max-height: 6rem; } .max-h-28 { max-height: 7rem; } .max-h-32 { max-height: 8rem; } .max-h-36 { max-height: 9rem; } .max-h-40 { max-height: 10rem; } .max-h-44 { max-height: 11rem; } .max-h-48 { max-height: 12rem; } .max-h-52 { max-height: 13rem; } .max-h-56 { max-height: 14rem; } .max-h-60 { max-height: 15rem; } .max-h-64 { max-height: 16rem; } .max-h-72 { max-height: 18rem; } .max-h-80 { max-height: 20rem; } .max-h-96 { max-height: 24rem; }
    .max-h-none { max-height: none; } .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } .max-h-dvh { max-height: 100dvh; } .max-h-fit { max-height: fit-content; }



    /* 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;
        }
        /* V6.12: giảm padding ngang main-content trên mobile cho rộng rãi hơn */
        .az-main-content {
            padding: var(--az-space-2);
        }
        /* V6.12: giảm padding ngang mobile item — content sát mép hơn */
        .az-mobile-item {
            padding: var(--az-space-3) var(--az-space-1);
        }
        .az-main-title {
            max-width: unset;
            width: 100%;
            text-align: center;
            font-size: 1.8rem;
        }
        .az-breadcrumb { display: none; }

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

        /* Mobile-only hide trong filter advanced */
        .az-filter: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;
    }

    /* 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-filter,
    .az-page-links,
    .az-btn,
    .az-btn-icon,
    .az-toast-container,
    .az-modal,
    [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 components {
    /* ──────────────────────────────────────────────────────────────────────
     * DIALOG VARIANT — alert / confirm / prompt (V6.14)
     * Flex column 3 zone: title-fixed / body-scroll / footer-fixed.
     * JS _markAsDialog() extract <h2> ra ngoai .az-modal-main -> direct child.
     * ──────────────────────────────────────────────────────────────────────*/

    /* 1. Container */
    .az-modal-container.az-modal-dialog {
        width: auto !important;
        height: auto !important;
        min-width: 360px;
        max-width: min(700px, 95vw);
        max-height: 88vh;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .az-modal-container.az-modal-dialog.hasbutton { padding-bottom: 0; }

    /* 2. Title — fixed header zone (direct child, khong nam trong scroll zone) */
    .az-modal-container.az-modal-dialog > h2.az-modal-title {
        flex: 0 0 auto;
        margin: 0;
        padding: var(--az-space-4) var(--az-space-5);
        padding-right: calc(2.5rem + var(--az-space-5));
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.4;
        color: var(--az-text-main) !important;
        background-color: var(--az-bg-surface);
        border-bottom: 1px solid var(--az-border-color);
        display: flex;
        align-items: center;
        gap: var(--az-space-2);
        letter-spacing: 0.01em;
    }
    .az-modal-container.az-modal-dialog > h2.az-modal-title::before {
        content: '';
        display: inline-block;
        flex: 0 0 3px;
        width: 3px;
        height: 1em;
        background: var(--az-color-primary);
        border-radius: 2px;
    }

    /* 3. Body zone — scrollable block (display:block, khong flex, content tu size) */
    .az-modal-container.az-modal-dialog > .az-modal-main {
        position: static;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: auto;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent !important;
        display: block;
    }

    /* 4a. Confirm/Prompt content — card inset giong az-detail-body */
    .az-modal-container.az-modal-dialog [name="Content"] {
        display: block;
        margin: var(--az-space-4);
        padding: var(--az-space-4) var(--az-space-5);
        background: var(--az-bg-surface-alt);   /* darker inset: gray-900 in dark mode */
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-lg);
        line-height: 1.7;
        text-align: left;
        color: var(--az-text-secondary);
        font-size: var(--az-text-sm);
    }
    .az-modal-container.az-modal-dialog textarea[name="Content"] {
        width: calc(100% - var(--az-space-8));
        min-height:120px;
        padding:10px;
        resize: none;
    }
    .az-modal-container.az-modal-dialog [name="Content"] table {
        border-collapse: collapse;
        font-size: inherit;
        color: inherit;
    }
    .az-modal-container.az-modal-dialog [name="Content"] td,
    .az-modal-container.az-modal-dialog [name="Content"] th {
        white-space: nowrap;
        padding: var(--az-space-2) var(--az-space-3);
        vertical-align: top;
    }
    .az-modal-container.az-modal-dialog [name="Content"] td:first-child,
    .az-modal-container.az-modal-dialog [name="Content"] th:first-child { padding-left: 0; }
    .az-modal-container.az-modal-dialog [name="Content"] td:last-child {
        white-space: normal;
        word-break: break-word;
        min-width: 140px;
    }

    /* 4b. Alert content — card inset giong az-detail-body */
    .az-modal-container.az-modal-dialog .az-modal-content {
        display: block;
        margin: var(--az-space-4);
        padding: var(--az-space-5) var(--az-space-6);
        background: var(--az-bg-surface-alt);
        border: 1px solid var(--az-border-color);
        border-radius: var(--az-radius-lg);
        line-height: 1.7;
        text-align: center;
        color: var(--az-text-main);
        font-size: var(--az-text-base);
    }

    /* 5. Footer */
    .az-modal-container.az-modal-dialog .az-modal-button {
        flex: 0 0 auto;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: var(--az-space-3) var(--az-space-5);
        bottom: auto;
        left: auto;
        gap: var(--az-space-3);
        justify-content: center;
        border-top: 1px solid var(--az-border-color);
        background-color: var(--az-bg-surface);
    }

    /* 6. Buttons */
    .az-modal-container.az-modal-dialog .az-modal-button > a {
        min-width: 7rem;
        height: 2.375rem;
        line-height: 2.375rem;
        padding: 0 var(--az-space-6);
        font-weight: 600;
        font-size: var(--az-text-sm);
        border-radius: var(--az-radius-md);
        letter-spacing: 0.01em;
    }
}
@layer overrides {
    /* V6.12: Force-strip border + shadow trong .az-mobile-item, đè mọi template/legacy.
       Phải set border-width:0 (không chỉ color:transparent) để xóa cả space của Tailwind .border-b */
    .az-mobile-item *:not(.az-btn) {
        border-width: 0 !important;
        box-shadow: none !important;
    }
    .az-mobile-item {
        border-width: 0 !important;
        border-bottom-width: 1px !important;
        border-bottom-style: solid !important;
        border-bottom-color: color-mix(in srgb, var(--az-text-muted) 18%, transparent) !important;
        box-shadow: none !important;
    }
    .az-mobile-item:last-child {
        border-bottom-width: 0 !important;
    }

    /* ============================================================
     * DETAIL POPUP LAYOUT — V9.1
     * Khi .az-detail nằm trong .az-modal-container hoặc iframe popup mode,
     * - .az-modal-main thành flex column, KHÔNG tự scroll
     * - .az-main-content fill chiều cao, bỏ border/bg/padding (modal đã lo)
     * - .az-detail bỏ min-height:100vh, fit parent
     * - .az-detail-body scroll bên trong (đã sẵn flex:1 + overflow:auto)
     * - .az-form-footer bám đáy modal (đã sẵn flex:0)
     * ============================================================ */
    .az-modal-container:has(.az-detail) > .az-modal-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .az-modal-container > .az-modal-main > .az-main-content:has(.az-detail) {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .az-modal-container .az-detail {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
    }
    .az-modal-container .az-detail-body {
        min-height: 0;     /* cho phép flex shrink → overflow:auto kích hoạt */
    }

    /* Hide AZ.Modal default h2 khi Detail có .az-detail-header riêng — tránh trùng title.
       Detail tự render header với title trong .az-detail-title nên không cần modal h2. */
    .az-modal-container:has(.az-detail-header) > .az-modal-main > h2 {
        display: none;
    }
    /* V12: Detail render trong modal — chừa padding-right cho .az-modal-close (32px + ~12px gap)
       để header content (vd Mode selector trong ImportExcel) không bị X đè lên.
       Inline style trong JS (_renderHeader) cũng set fallback để không phụ thuộc CSS deploy. */
    .az-modal-container .az-detail-header {
        padding-right: calc(var(--az-space-4) + 3rem) !important;
    }

    /* V12: Import Excel result stats card — 3 ô thống kê Add/Edit/Fail */
    .az-import-stats {
        display: flex;
        gap: var(--az-space-3);
        margin-bottom: var(--az-space-3);
        flex-wrap: wrap;
    }
    .az-import-stat-card {
        flex: 1 1 0;
        min-width: 140px;
        background-color: var(--az-bg-surface);
        border: 1px solid var(--az-border-color);
        border-left: 4px solid var(--az-border-color);
        border-radius: var(--az-radius-md);
        padding: 0.75rem 1rem;
        display: flex; align-items: center; gap: 0.75rem;
    }
    .az-import-stat-card[data-kind="Add"]  { border-left-color: var(--az-success-500); }
    .az-import-stat-card[data-kind="Edit"] { border-left-color: var(--az-color-primary); }
    .az-import-stat-card[data-kind="Fail"] { border-left-color: var(--az-danger-500); }
    .az-import-stat-card > i { font-size: 1.5rem; opacity: 0.85; }
    .az-import-stat-card[data-kind="Add"]  > i { color: var(--az-success-500); }
    .az-import-stat-card[data-kind="Edit"] > i { color: var(--az-color-primary); }
    .az-import-stat-card[data-kind="Fail"] > i { color: var(--az-danger-500); }
    .az-import-stat-card .az-import-stat-label {
        font-size: 0.85rem;
        color: var(--az-text-muted);
    }
    .az-import-stat-card .az-import-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.1;
        color: var(--az-text-main);
    }

    /* ============================================================
     * IFRAME POPUP MODE (.az-frame) — V9.1 Fixed positioning
     * Pattern: page tự scroll, header/footer fixed bám viewport.
     * Khác với modal mode (flex 3-zone) — đơn giản hơn cho iframe.
     * ============================================================ */
    /* Reset flex behavior của .az-detail trong frame mode (header/footer fixed,
       không còn cần flex chain) */
    .az-frame .az-detail {
        display: block;
        height: auto;
        min-height: 0;
        padding: 0;
        gap: 0;
    }

    /* Header BÁM ĐỈNH viewport — full width */
    .az-frame .az-detail-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: var(--az-space-5);
        background-color: var(--az-bg-surface);
        border-radius: 0;
        border-bottom: 1px solid var(--az-border-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
        z-index: 1;
        box-sizing: border-box;
    }
    /* Title trong header: clamp 2-3 dòng nếu text dài */
    .az-frame .az-detail-header h1,
    .az-frame .az-detail-header .az-detail-title {
        margin: 0;
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 700;
        color: var(--az-text-main);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    /* Body: scroll cùng page, không tự scroll riêng.
       Tạo khoảng cách 2 bên + border-radius để body đứng tách khỏi mép modal.
       Responsive: desktop khoảng cách lớn hơn, mobile bỏ inset cho full width.
       LƯU Ý: Base có width:100% — khi thêm margin sẽ overflow vì box-sizing
       KHÔNG tính margin. Phải override width:auto để flex tự stretch. */
    .az-frame .az-detail-body {
        min-height: 0;
        overflow: visible;
        width: auto;
        margin-left:  var(--az-space-5);
        margin-right: var(--az-space-5);
        border-radius: var(--az-radius-lg);
    }
    /* Tablet 768-1023px: thu hẹp khoảng cách */
    @media (max-width: 1023px) {
        .az-frame .az-detail-body {
            margin-left:  var(--az-space-3);
            margin-right: var(--az-space-3);
            border-radius: var(--az-radius-md);
        }
    }
    /* Mobile <768px: full width, bỏ border-radius cho mượt mép */
    @media (max-width: 767px) {
        .az-frame .az-detail-body {
            margin-left:  0;
            margin-right: 0;
            width: 100%;
            border-radius: 0;
        }
    }

    /* Footer BÁM ĐÁY viewport — full width.
       border-top tách rõ với body khi cuộn, dùng cùng border-color framework. */
    .az-frame .az-form-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        z-index: 2;
        box-sizing: border-box;
        border-radius: 0;
        border-top: 1px solid var(--az-border-color);
        box-shadow: 0 -2px 4px rgba(0, 0, 0, .04);
    }

    /* 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, cuộn dọc theo viewport.
 * Cuộn ngang trong wrapper (không phá giao diện trang).
 * Drag-to-scroll với hold-delay: text selection + double-click vẫn hoạt động.
 * Cursor chỉ đổi sang "grabbing" KHI drag đã activate (sau hold-delay). */
.az-table-wrapper.az-table-float {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;        /* browser sẽ ép thành auto, chấp nhận */
}
.az-table-wrapper.az-table-float.az-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
.az-table-wrapper.az-table-float.az-grabbing * {
    pointer-events: none;
    user-select: none;
}
.az-table-wrapper.az-table-float .az-table thead {
    position: sticky;
    top: 0;
    z-index: var(--az-z-sticky, 10);
}
.az-table-wrapper.az-table-float .az-table thead tr {
    will-change: transform;
}
.az-table-wrapper.az-table-float .az-table thead.az-thead-stuck {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * V6.14 Streaming state (perf pass, giữ UX V6.13)
 * ═══════════════════════════════════════════════════════════════════════════
 * JS toggle class .az-streaming trên Root + temp clear FieldX (re-render thead
 * đầy đủ). CSS làm:
 *   1. Ẩn controls (filter/tabs/paging)
 *   2. Bảng max-height + overflow (scrollbar dọc/ngang)
 *   3. Animation slide-up giữ nguyên từ V6.13 (dễ nhìn) — KHÔNG will-change
 *   4. Tắt sticky columns lúc streaming (reflow cost cao khi append row liên tục)
 *
 * ĐÃ BỎ so với V6.13:
 *   - will-change: transform, opacity  → với 10k rows tạo 10k GPU layers, nổ VRAM
 *   - scroll-behavior: smooth  → conflict với scrollTop=scrollHeight mỗi chunk,
 *                                smooth animation chồng nhau → thrashing visible
 *
 * GIỮ NGUYÊN:
 *   - animation slide-up với translateY(5px) → hiệu ứng "đổ xuống" user cần
 *   - Rule animation 1 nơi duy nhất (gộp cả layered + unlayered cũ)
 *   - Sticky sau khi stream xong (JS remove class .az-streaming)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Ẩn controls */
.az-streaming .az-filter,
.az-streaming .az-tabs,
.az-streaming [name="PagingContainer"] {
    display: none;
}

/* 2. Bảng contained — max-height + overflow auto cho scrollbar. */
.az-streaming .az-table-wrapper,
.az-streaming .az-table-wrapper.az-table-float {
    max-height: calc(100vh - var(--az-header-offset, 0px) - 150px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    scroll-behavior: auto;        /* V6.14: KHÔNG smooth — conflict auto-scroll per chunk */
}

/* 3. Animation slide-up — KHÔNG will-change (sẽ nổ GPU với list lớn).
 *    V6.14: Chỉ apply cho row CUỐI CÙNG của chunk (class .az-stream-last).
 *    Rows khác append instant → không chồng chéo animation → rất mượt.
 *    Duration per-row JS inject inline style="animation-duration:Xms". */
.az-streaming tbody tr.az-stream-last,
.az-streaming [name="AZList"] > .az-card.az-stream-last,
.az-streaming [name="AZList"] > .az-mobile-item.az-stream-last {
    opacity: 0;
    animation: az-stream-slide-up 250ms ease-out both;
    will-change: transform, opacity;
}

/* 3b. Mobile "lite" mode — JS thêm class .az-streaming-lite khi !isDesktop.
 *     Slide ngang nhanh + border-left flash → cảm giác "lướt vào" rõ rệt mà
 *     chữ không mờ. Chỉ apply cho row cuối chunk. */
.az-streaming.az-streaming-lite tbody tr.az-stream-last,
.az-streaming.az-streaming-lite [name="AZList"] > .az-card.az-stream-last,
.az-streaming.az-streaming-lite [name="AZList"] > .az-mobile-item.az-stream-last {
    animation-name: az-stream-slide-flash;
}

/* 4. TẮT STICKY khi streaming — sticky trigger reflow mỗi lần append rows.
 *    Sau stream (class .az-streaming bị remove) sticky tự trở về bình thường. */
.az-streaming .az-sticky-col,
.az-streaming .az-sticky-col-right {
    position: static !important;
    box-shadow: none !important;
}
.az-streaming .az-sticky-col.az-sticky-last::after {
    display: none !important;
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
    .az-advanced-row { transition: none !important; }
    .az-streaming tbody tr.az-stream-last,
    .az-streaming [name="AZList"] > .az-card.az-stream-last,
    .az-streaming [name="AZList"] > .az-mobile-item.az-stream-last,
    .az-streaming.az-streaming-lite tbody tr.az-stream-last,
    .az-streaming.az-streaming-lite [name="AZList"] > .az-card.az-stream-last,
    .az-streaming.az-streaming-lite [name="AZList"] > .az-mobile-item.az-stream-last {
        animation: none !important;
        opacity: 1 !important;
    }
}