/**
 * Tax3S - Shared design tokens (public + admin + login)
 * Load TRUOC Bootstrap va CSS area/site.
 */

:root {
    /* Brand — Purple (default) */
    --hddt-navy: #4c1d95;
    --hddt-navy-mid: #5b21b6;
    --hddt-blue: #6d28d9;
    --hddt-blue-bright: #a78bfa;
    --hddt-sky: #c4b5fd;
    --hddt-slate: #5b5675;
    --hddt-slate-soft: #ede9fe;
    --hddt-ink: #1e1b2e;
    --hddt-muted: #6b6280;
    --hddt-label: #3f3656;
    --hddt-line: #ddd6fe;
    --hddt-line-soft: #ede9fe;
    --hddt-paper: #f5f3ff;
    --hddt-surface: #ffffff;
    --hddt-success: #2f6f4e;
    --hddt-danger: #b33b3b;
    --hddt-preview: #4a4460;
    --hddt-info: #6d28d9;

    --hddt-teal: var(--hddt-info);
    --hddt-teal-mid: var(--hddt-sky);
    --hddt-teal-soft: #ede9fe;

    --hddt-shadow: 0 1px 3px rgba(109, 40, 217, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(109, 40, 217, 0.1);
    --hddt-radius: 10px;
    --hddt-radius-sm: 6px;

    --tx-primary: var(--hddt-blue);
    --tx-primary-dark: var(--hddt-navy-mid);
    --tx-primary-light: var(--hddt-sky);
    --tx-primary-soft: #ede9fe;
    --tx-accent: var(--hddt-blue);
    --tx-accent-light: var(--hddt-sky);
    --tx-accent-dark: var(--hddt-navy-mid);
    --tx-accent-soft: rgba(109, 40, 217, 0.12);

    /*
     * Type scale — bảng chuẩn Tax3S (px, neo theo viewport)
     * Chi tiết: .cursor/rules/typography-linear-chrome.mdc
     *
     * | Viewport        | base | sm  | chrome | icon |
     * | <768 (phone)    | 15   | 13  | 14     | 17   |  → @media max 767
     * | 768–1365        | 15   | 13  | 14     | 16   |  → :root default
     * | 1366–1599       | 15.5 | 13.5| 14     | 17   |
     * | 1600–1919       | 16   | 14  | 14.5   | 17.5 |
     * | 1920–2559       | 17   | 14.5| 15     | 18   |
     * | ≥2560           | 18   | 15  | 15.5   | 18.5 |
     *
     * :root = bậc 768–1365; các bậc lớn hơn override bằng min-width.
     */
    --tx-fs-bump: 0rem;
    --tx-fw-regular: 400;
    --tx-fw-medium: 500;
    --tx-fw-semibold: 600;
    --tx-fw-active: 550;

    /* Default: 768–1365 */
    --tx-fs-2xs: 10.5px;
    --tx-fs-xs: 11.5px;
    --tx-fs-sm: 13px;
    --tx-fs-base: 15px;
    --tx-fs-md: var(--tx-fs-base);
    --tx-fs-lg: 16px;
    --tx-fs-xl: 17px;
    --tx-fs-2xl: 19px;
    --tx-fs-3xl: 21px;
    --tx-fs-4xl: 23px;
    --tx-fs-5xl: 27px;
    --tx-fs-6xl: 31px;
    --tx-fs-display: 34px;
    --tx-fs-display-lg: 40px;
    --tx-ios-input-fs: max(16px, var(--tx-fs-md));

    /* Chrome UI — menu / sidebar / navbar / quickbar */
    --tx-chrome-fs: 14px;
    --tx-chrome-fw: var(--tx-fw-medium);
    --tx-chrome-lh: 1.5;
    --tx-chrome-icon: 16px;

    /* em trong workflow: kế thừa font-size panel (cqi), trần = --tx-fs-base */
    --tx-flow-u: 1em;
    --tx-flow-fs: inherit;
    /* Workflow layout — cùng hệ vw với type scale */
    --tx-flow-radius: clamp(0.375rem, 0.28rem + 0.12vw, 0.5625rem);
    --tx-flow-radius-sm: clamp(0.3125rem, 0.25rem + 0.08vw, 0.4375rem);
    --tx-flow-canvas-min-h: clamp(4.75rem, 3.75rem + 2.8vw, 7.25rem);
    --tx-flow-hub-min-h: clamp(7rem, 5.5rem + 4.5vw, 11.5rem);
    --tx-flow-hub-min-h-lg: clamp(8rem, 6.25rem + 5.2vw, 13rem);
    --tx-flow-grid-dot: clamp(0.4375rem, 0.35rem + 0.1vw, 0.5625rem);
    --tx-flow-dot-size: clamp(0.3125rem, 0.26rem + 0.06vw, 0.4375rem);
    --tx-flow-line-h: clamp(1.5px, 0.08rem + 0.04vw, 2.5px);
    --tx-flow-shadow-y: clamp(0.25rem, 0.2rem + 0.12vw, 0.5rem);
    --tx-flow-dash-step: calc(var(--tx-flow-grid-dot) * 1.5);
    --tx-lh: 1.5;

    --tx-control-fs: var(--tx-fs-md);
    /* Input/control — cân chiều cao; nút dùng --tx-btn-* (không kéo dẹt) */
    --tx-control-py: 0.45rem;
    --tx-control-px: 0.75rem;
    --tx-control-h: 2.5rem; /* 40px — default 768–1365 */
    --tx-btn-py: 0.55rem;
    --tx-btn-px: 1.15rem;
    --tx-btn-min-w: 7.5rem;
    --tx-btn-max-w: 16rem;
    --tx-btn-fw: var(--tx-fw-semibold);
    --tx-btn-radius: 0.5rem;
    --tx-grid-pad-y: clamp(0.1rem, calc(0.08vmin + 0.05rem), 0.4rem);
    --tx-grid-pad-x: clamp(0.25rem, calc(0.12vmin + 0.15rem), 0.5rem);
    --tx-card-pad-y: clamp(10px, calc(0.55vmin + 6px), 20px);
    --tx-card-pad-x: clamp(12px, calc(0.65vmin + 6px), 20px);
    --tx-gap-block: clamp(6px, calc(0.45vmin + 2px), 12px);
    --tx-gap-inline: clamp(10px, calc(0.7vmin + 2px), 28px);
    --tx-btn-primary: var(--hddt-blue);
    --tx-btn-primary-hover: var(--hddt-navy-mid);
    --tx-btn-primary-text: #5b21b6;
    --tx-btn-primary-soft: #ede9fe;
    --tx-btn-success: var(--hddt-success);
    --tx-btn-success-hover: #255a3f;
    --tx-btn-success-text: #1f4d36;
    --tx-btn-success-soft: #e8f2ec;
    --tx-btn-info: var(--hddt-info);
    --tx-btn-info-hover: #5b21b6;
    --tx-btn-info-text: #5b21b6;
    --tx-btn-info-soft: #ede9fe;
    --tx-btn-preview: var(--hddt-preview);
    --tx-btn-preview-hover: #314255;
    --tx-btn-preview-soft: #eef1f4;
    --tx-btn-danger: var(--hddt-danger);
    --tx-btn-danger-hover: #963232;
    --tx-btn-danger-text: #7d2d2d;
    --tx-btn-danger-soft: #f8eaea;
    --tx-btn-secondary: var(--hddt-slate);
    --tx-btn-secondary-hover: #364556;
    --tx-btn-secondary-text: #2f3e4d;
    --tx-btn-secondary-soft: #eef1f4;
    --tx-warning-btn: var(--hddt-preview);
    --tx-warning-btn-hover: #314255;
    --tx-warning-btn-text: #fff;

    --tx-teal: var(--hddt-success);
    --tx-teal-soft: #e8f2ec;

    --tx-sidebar-bg: var(--hddt-navy-mid);
    --tx-sidebar-dark: var(--hddt-navy);
    --tx-sidebar-width: 285px;
    --tx-sidebar-hover: rgba(255, 255, 255, 0.07);
    --tx-sidebar-active: rgba(167, 139, 250, 0.32);
    --tx-navbar-bg: var(--hddt-surface);
    --tx-content-bg: var(--hddt-paper);
    --tx-surface: var(--hddt-surface);
    --tx-text: var(--hddt-ink);
    --tx-muted: var(--hddt-muted);
    --tx-label: var(--hddt-label);
    --tx-border: var(--hddt-line);
    --tx-border-light: var(--hddt-line-soft);
    --tx-shadow: var(--hddt-shadow);
    --tx-shadow-lg: var(--hddt-shadow-lg);
    --tx-radius: var(--hddt-radius);
    --tx-radius-sm: var(--hddt-radius-sm);
    --tx-transition: 0.15s ease;
    --tx-focus-ring: 0 0 0 0.2rem rgba(109, 40, 217, 0.22);

    --tx-icon: var(--hddt-slate);
    --tx-icon-primary: var(--hddt-blue);
    --tx-icon-success: var(--hddt-success);
    --tx-icon-danger: var(--hddt-danger);
    --tx-icon-info: var(--hddt-info);

    
    /* Public site / login shared extras */
    --tx-primary-deep: var(--hddt-navy);
    --tx-accent-gold: var(--hddt-sky);
    --tx-bg: var(--hddt-paper);
    --tx-bg-alt: var(--hddt-line-soft);
    --tx-gradient-brand: linear-gradient(160deg, var(--hddt-navy) 0%, var(--hddt-navy-mid) 55%, var(--hddt-blue-bright) 100%);
    --tx-gradient-accent: linear-gradient(180deg, var(--hddt-blue) 0%, var(--hddt-navy) 100%);
    --tx-hero-fg: #ffffff;
    --tx-hero-lead: rgba(255, 255, 255, 0.88);
    --tx-hero-eyebrow: rgba(255, 255, 255, 0.72);
    --tx-hero-btn-bg: #ffffff;
    --tx-hero-btn-fg: var(--tx-primary-dark);
    --tx-hero-btn-hover-bg: var(--tx-bg-alt);
    --tx-icon-tint: var(--tx-bg-alt);
    --tx-badge-soon-bg: var(--tx-bg-alt);
    --tx-badge-soon-fg: var(--tx-primary-dark);
    --tx-on-primary: #ffffff;
    --tx-btn-solid-bg: var(--tx-gradient-accent);
    --tx-btn-solid-hover: var(--tx-primary);
    --tx-btn-solid-fg: var(--tx-on-primary);
    --tx-btn-ghost-bg: var(--tx-surface);
    --tx-btn-ghost-fg: var(--tx-primary);
    --tx-btn-ghost-border: var(--tx-primary-light);
    --tx-btn-ghost-hover-bg: var(--tx-bg-alt);
    --tx-btn-ghost-hover-fg: var(--tx-primary-dark);
    --tx-input-placeholder: var(--tx-muted);
    --tx-footer-gradient: linear-gradient(180deg, var(--tx-primary-deep) 0%, color-mix(in srgb, var(--tx-primary-deep) 75%, #000) 100%);
    --tx-font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tx-font-display: var(--tx-font);
    --tx-header-h: clamp(48px, calc(3vmin + 24px), 64px);
    --sl-header-h: var(--tx-header-h);
    --tx-max-w: 1200px;
    --tx-nav-break: 1024px;
    --tx-radius-lg: 16px;
    --tx-shadow-accent: 0 6px 20px rgba(109, 40, 217, 0.18);
    --tc-primary: var(--tx-primary);
    --tc-primary-dark: var(--tx-primary-dark);
    --tc-primary-deep: var(--tx-primary-deep);
    --tc-primary-light: var(--tx-primary-light);
    --tc-accent: var(--tx-accent);
    --tc-accent-dark: var(--tx-accent-dark);
    --tc-accent-light: var(--tx-accent-light);
    --tc-accent-gold: var(--tx-accent-gold);
    --tc-bg: var(--tx-bg);
    --tc-bg-alt: var(--tx-bg-alt);
    --tc-surface: var(--tx-surface);
    --tc-text: var(--tx-text);
    --tc-muted: var(--tx-muted);
    --tc-border: var(--tx-border);
    --tc-danger: var(--hddt-danger);
    --tc-danger-bg: var(--tx-alert-danger-bg);
    --tc-shadow: var(--tx-shadow);
    --tc-shadow-lg: var(--tx-shadow-lg);
    --tc-shadow-accent: var(--tx-shadow-accent);
    --tc-radius: var(--tx-radius-lg);
    --tc-radius-lg: var(--tx-radius-lg);
    --tc-gradient-brand: var(--tx-gradient-brand);
    --tc-gradient-accent: var(--tx-gradient-accent);}

/* Theme: Light */
html[data-theme="light"] {
    --hddt-navy: #084298;
    --hddt-navy-mid: #0a58ca;
    --hddt-blue: #0d6efd;
    --hddt-blue-bright: #6ea8fe;
    --hddt-sky: #6ea8fe;
    --hddt-slate: #495057;
    --hddt-slate-soft: #e7f1ff;
    --hddt-ink: #212529;
    --hddt-muted: #6c757d;
    --hddt-label: #343a40;
    --hddt-line: #dee2e6;
    --hddt-line-soft: #e9ecef;
    --hddt-paper: #F8F9FA;
    --hddt-surface: #ffffff;
    --hddt-info: #0d6efd;
    --hddt-teal-soft: #e7f1ff;
    --hddt-shadow: 0 1px 3px rgba(13, 110, 253, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(13, 110, 253, 0.1);
    --tx-primary-soft: #e7f1ff;
    --tx-accent-soft: rgba(13, 110, 253, 0.12);
    --tx-btn-primary-text: #0a58ca;
    --tx-btn-primary-soft: #e7f1ff;
    --tx-btn-info-hover: #0a58ca;
    --tx-btn-info-text: #0a58ca;
    --tx-btn-info-soft: #e7f1ff;
    --tx-sidebar-active: rgba(110, 168, 254, 0.3);
    --tx-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    --tx-alert-info-bg: #e7f1ff;
    --tx-alert-info-border: rgba(13, 110, 253, 0.28);
    --tx-alert-info-text: #084298;
}

/* Theme: Sepia */
html[data-theme="sepia"] {
    --hddt-navy: #5c2e1a;
    --hddt-navy-mid: #8b4513;
    --hddt-blue: #a0522d;
    --hddt-blue-bright: #c48a6a;
    --hddt-sky: #c48a6a;
    --hddt-slate: #6b564a;
    --hddt-slate-soft: #f5ebe3;
    --hddt-ink: #4a3b32;
    --hddt-muted: #7a6558;
    --hddt-label: #5a463c;
    --hddt-line: #e0d5c8;
    --hddt-line-soft: #efe6dc;
    --hddt-paper: #f4f0ea;
    --hddt-surface: #faf7f2;
    --hddt-info: #a0522d;
    --hddt-teal-soft: #f5ebe3;
    --hddt-shadow: 0 1px 3px rgba(160, 82, 45, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(160, 82, 45, 0.1);
    --tx-primary-soft: #f5ebe3;
    --tx-accent-soft: rgba(160, 82, 45, 0.12);
    --tx-btn-primary-text: #8b4513;
    --tx-btn-primary-soft: #f5ebe3;
    --tx-btn-info-hover: #8b4513;
    --tx-btn-info-text: #8b4513;
    --tx-btn-info-soft: #f5ebe3;
    --tx-sidebar-active: rgba(196, 138, 106, 0.3);
    --tx-focus-ring: 0 0 0 0.2rem rgba(160, 82, 45, 0.25);
}

/* Theme: Purple (explicit; same as :root default) */
html[data-theme="purple"],
html[data-theme="violet"] {
    --hddt-navy: #4c1d95;
    --hddt-navy-mid: #5b21b6;
    --hddt-blue: #6d28d9;
    --hddt-blue-bright: #a78bfa;
    --hddt-sky: #c4b5fd;
    --hddt-slate: #5b5675;
    --hddt-slate-soft: #ede9fe;
    --hddt-ink: #1e1b2e;
    --hddt-muted: #6b6280;
    --hddt-label: #3f3656;
    --hddt-line: #ddd6fe;
    --hddt-line-soft: #ede9fe;
    --hddt-paper: #f5f3ff;
    --hddt-surface: #ffffff;
    --hddt-info: #6d28d9;
    --hddt-teal-soft: #ede9fe;
    --hddt-shadow: 0 1px 3px rgba(109, 40, 217, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(109, 40, 217, 0.1);
    --tx-primary-soft: #ede9fe;
    --tx-accent-soft: rgba(109, 40, 217, 0.12);
    --tx-btn-primary-text: #5b21b6;
    --tx-btn-primary-soft: #ede9fe;
    --tx-btn-info-hover: #5b21b6;
    --tx-btn-info-text: #5b21b6;
    --tx-btn-info-soft: #ede9fe;
    --tx-sidebar-active: rgba(167, 139, 250, 0.32);
    --tx-focus-ring: 0 0 0 0.2rem rgba(109, 40, 217, 0.22);
}

/* Theme: Navi */
html[data-theme="navi"],
html[data-theme="institutional"] {
    --hddt-navy: #1e3a8a;
    --hddt-navy-mid: #1e40af;
    --hddt-blue: #1e40af;
    --hddt-blue-bright: #60a5fa;
    --hddt-sky: #60a5fa;
    --hddt-slate: #475569;
    --hddt-slate-soft: #e8eef8;
    --hddt-ink: #0f172a;
    --hddt-muted: #64748b;
    --hddt-label: #334155;
    --hddt-line: #d5dde6;
    --hddt-line-soft: #e8eef4;
    --hddt-paper: #f0f2f5;
    --hddt-surface: #ffffff;
    --hddt-info: #1e40af;
    --hddt-teal-soft: #e8eef8;
    --hddt-shadow: 0 1px 3px rgba(30, 64, 175, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(30, 64, 175, 0.1);
    --tx-primary-soft: #ede9fe;
    --tx-accent-soft: rgba(109, 40, 217, 0.12);
    --tx-btn-primary-text: #1e3a8a;
    --tx-btn-primary-soft: #e8eef8;
    --tx-btn-info-hover: #1e3a8a;
    --tx-btn-info-text: #1e3a8a;
    --tx-btn-info-soft: #e8eef8;
    --tx-sidebar-active: rgba(96, 165, 250, 0.28);
    --tx-focus-ring: 0 0 0 0.2rem rgba(30, 64, 175, 0.22);
}

/* Theme: Forest green */
html[data-theme="forest-green"],
html[data-theme="forest-mint"] {
    --hddt-navy: #1b5e20;
    --hddt-navy-mid: #256628;
    --hddt-blue: #2e7d32;
    --hddt-blue-bright: #66bb6a;
    --hddt-sky: #81c784;
    --hddt-slate: #4a6b54;
    --hddt-slate-soft: #e8f5e9;
    --hddt-ink: #1b3b2b;
    --hddt-muted: #5a7a64;
    --hddt-label: #2a4a36;
    --hddt-line: #c8ddd0;
    --hddt-line-soft: #e0efe5;
    --hddt-paper: #f0f5f1;
    --hddt-surface: #ffffff;
    --hddt-info: #2e7d32;
    --hddt-teal-soft: #e8f5e9;
    --hddt-shadow: 0 1px 3px rgba(46, 125, 50, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(46, 125, 50, 0.1);
    --tx-primary-soft: #e8f5e9;
    --tx-accent-soft: rgba(46, 125, 50, 0.12);
    --tx-btn-primary-text: #1b5e20;
    --tx-btn-primary-soft: #e8f5e9;
    --tx-btn-info-hover: #1b5e20;
    --tx-btn-info-text: #1b5e20;
    --tx-btn-info-soft: #e8f5e9;
    --tx-sidebar-active: rgba(102, 187, 106, 0.3);
    --tx-focus-ring: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
}

/* Theme: Pink pastel */
html[data-theme="pink-pastel"] {
    --hddt-navy: #9d174d;
    --hddt-navy-mid: #be185d;
    --hddt-blue: #db2777;
    --hddt-blue-bright: #f472b6;
    --hddt-sky: #f9a8d4;
    --hddt-slate: #7a5560;
    --hddt-slate-soft: #fce7f0;
    --hddt-ink: #4a2e35;
    --hddt-muted: #8a6b72;
    --hddt-label: #5c3a42;
    --hddt-line: #f0d4dc;
    --hddt-line-soft: #f8e6eb;
    --hddt-paper: #fdf2f4;
    --hddt-surface: #ffffff;
    --hddt-info: #db2777;
    --hddt-teal-soft: #fce7f0;
    --hddt-shadow: 0 1px 3px rgba(219, 39, 119, 0.08);
    --hddt-shadow-lg: 0 4px 16px rgba(219, 39, 119, 0.1);
    --tx-primary-soft: #fce7f0;
    --tx-accent-soft: rgba(219, 39, 119, 0.12);
    --tx-btn-primary-text: #9d174d;
    --tx-btn-primary-soft: #fce7f0;
    --tx-btn-info-hover: #9d174d;
    --tx-btn-info-text: #9d174d;
    --tx-btn-info-soft: #fce7f0;
    --tx-sidebar-active: rgba(244, 114, 182, 0.3);
    --tx-focus-ring: 0 0 0 0.2rem rgba(219, 39, 119, 0.25);
}

/* Theme: Dark */
html[data-theme="dark"] {
    --hddt-navy: #c5d0dc;
    --hddt-navy-mid: #93c5fd;
    --hddt-blue: #3d8bfd;
    --hddt-blue-bright: #6ea8fe;
    --hddt-sky: #58a6ff;
    --hddt-slate: #8b9cb3;
    --hddt-slate-soft: #232d3b;
    --hddt-ink: #e6edf3;
    --hddt-muted: #8b9cb3;
    --hddt-label: #c5d0dc;
    --hddt-line: #30363d;
    --hddt-line-soft: #21262d;
    --hddt-paper: #0f1419;
    --hddt-surface: #161b22;
    --hddt-info: #3d8bfd;
    --hddt-teal-soft: #1a3328;
    --hddt-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --hddt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --tx-primary-soft: #1a2740;
    --tx-accent-soft: rgba(61, 139, 253, 0.15);
    --tx-btn-primary-text: #93c5fd;
    --tx-btn-primary-soft: #1a2740;
    --tx-btn-info-hover: #58a6ff;
    --tx-btn-info-text: #93c5fd;
    --tx-btn-info-soft: #1a2740;
    --tx-sidebar-active: rgba(61, 139, 253, 0.25);
    --tx-focus-ring: 0 0 0 0.2rem rgba(61, 139, 253, 0.35);
    --tx-alert-info-bg: #1a2740;
    --tx-alert-info-border: rgba(61, 139, 253, 0.35);
    --tx-alert-info-text: #93c5fd;
    --tx-primary-deep: #0a0a0a;
    --tx-hero-fg: #f5f5f5;
    --tx-hero-lead: rgba(245, 245, 245, 0.88);
    --tx-hero-eyebrow: rgba(245, 245, 245, 0.72);
    --tx-hero-btn-bg: var(--tx-primary);
    --tx-hero-btn-fg: var(--tx-on-primary);
    --tx-footer-gradient: linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
    --tx-shadow-accent: 0 6px 20px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .tax3s-admin .main-header {
    background: var(--hddt-surface) !important;
    border-bottom-color: var(--hddt-line) !important;
}

html[data-theme="dark"] .tax3s-admin .main-header .nav-link {
    color: var(--hddt-ink) !important;
}

html[data-theme="dark"] .tax3s-admin .card,
html[data-theme="dark"] .tax3s-admin .modal-content,
html[data-theme="dark"] .tax3s-admin .dropdown-menu,
html[data-theme="dark"] .tax3s-admin .main-footer {
    background-color: var(--hddt-surface) !important;
    color: var(--hddt-ink);
    border-color: var(--hddt-line) !important;
}

html[data-theme="dark"] .tax3s-admin .form-control,
html[data-theme="dark"] .tax3s-admin select.form-control,
html[data-theme="dark"] .tax3s-admin .custom-select,
html[data-theme="dark"] .tax3s-admin textarea.form-control {
    background-color: #121212 !important;
    color: var(--hddt-ink) !important;
    border-color: var(--hddt-line) !important;
}

html[data-theme="dark"] .tax3s-admin .table {
    color: var(--hddt-ink);
}

html[data-theme="dark"] .tax3s-admin .table thead th,
html[data-theme="dark"] .tax3s-admin .table td,
html[data-theme="dark"] .tax3s-admin .table th {
    border-color: var(--hddt-line) !important;
}

html[data-theme="dark"] .tax3s-admin .bg-white {
    background-color: var(--hddt-surface) !important;
}

/* Utility — dùng trong HTML inline/class khi cần cùng token */
.tx-fs-2xs { font-size: var(--tx-fs-2xs); }
.tx-fs-xs { font-size: var(--tx-fs-xs); }
.tx-fs-sm { font-size: var(--tx-fs-sm); }
.tx-fs-base { font-size: var(--tx-fs-base); }
.tx-fs-md { font-size: var(--tx-fs-md); }
.tx-fs-lg { font-size: var(--tx-fs-lg); }
.tx-fs-xl { font-size: var(--tx-fs-xl); }

/* Fluid typography — áp dụng toàn MVC (public + admin + login) */
html {
    font-family: var(--tx-font);
    font-size: var(--tx-fs-base);
    font-weight: var(--tx-fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--tx-lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tax3s-admin,
body.tx-site,
body.sl-site--launcher,
body.tracuu-page,
.kt-app,
.ktw-page,
.ktl-page {
    font-family: inherit;
    font-size: inherit;
}

/* Workflow — font theo chiều rộng khung (cqi); panel launcher trần thấp hơn type MVC */
[data-flow-demo] {
    container-type: inline-size;
    font-size: calc(
        clamp(0.5625rem, 0.2rem + 1.85cqi, var(--tx-fs-base)) * var(--tx-flow-fit-mult, 1)
    );
    line-height: var(--tx-lh, 1.45);
    --flow-dash-step: var(--tx-flow-dash-step);
    --flow-grid-dot: var(--tx-flow-grid-dot);
    --flow-line-h: var(--tx-flow-line-h);
}

.tx-flow-demo.sl-app-panel-flow[data-flow-demo] {
    font-size: calc(
        clamp(0.5rem, 0.12rem + 1.55cqi, 0.8125rem) * var(--tx-flow-fit-mult, 1)
    );
}

.sl-app-panel-head .tx-flow-demo.sl-app-panel-flow[data-flow-demo] {
    font-size: clamp(0.5625rem, 0.44rem + 1.45cqi, 0.8125rem);
}

.sl-app-panel-head .tx-flow-demo.sl-app-panel-flow.tx-flow-hub--dense[data-flow-demo] {
    font-size: clamp(0.5625rem, 0.48rem + 1.25cqi, 0.78125rem);
}

.kt-launch-flow [data-flow-demo] {
    font-size: calc(
        clamp(0.6875rem, 0.32rem + 1.05cqi, var(--tx-fs-base)) * var(--tx-flow-fit-mult, 1)
    );
}

.tx-flow-hub .tx-flow-hub__stage {
    min-height: var(--tx-flow-hub-min-h);
}

.tx-flow-demo.sl-app-panel-flow .tx-flow-hub .tx-flow-hub__stage {
    min-height: unset;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.tx-flow-hub.tx-flow-invoice .tx-flow-hub__stage,
.tx-flow-download .tx-flow-hub__stage {
    min-height: calc(var(--tx-flow-hub-min-h) * 0.92);
}

.tx-flow-demo.sl-app-panel-flow.tx-flow-invoice .tx-flow-hub__stage {
    min-height: unset;
    aspect-ratio: 16 / 11;
}

.tx-flow-hub.tx-flow-hub--lg .tx-flow-hub__stage {
    min-height: var(--tx-flow-hub-min-h-lg);
}

.tx-flow-demo.sl-app-panel-flow.tx-flow-hub--lg .tx-flow-hub__stage {
    min-height: unset;
    aspect-ratio: 5 / 4;
}

/* Shell MVC — input / nút / bảng theo --tx-control-* & --tx-fs-* */
.tax3s-admin .form-control,
.tax3s-admin select.form-control,
.tax3s-admin .custom-select,
.tax3s-admin textarea.form-control,
.tax3s-admin .custom-file-label,
body.tx-site .form-control,
body.tx-site select.form-control,
body.tx-site .custom-select,
body.tx-site textarea.form-control,
body.sl-site .form-control,
body.sl-site select.form-control,
body.sl-site .custom-select,
body.sl-site textarea.form-control,
body.tracuu-page .form-control,
body.tracuu-page select.form-control,
body.tracuu-page textarea.form-control,
.kt-app .form-control,
.kt-app select.form-control,
.kt-app textarea.form-control,
.ktw-page .form-control,
.ktw-page select.form-control,
.ktw-page textarea.form-control,
.ktl-page .form-control,
.ktl-page select.form-control,
.ktl-page textarea.form-control,
.tax3s-admin input.form-control,
.tax3s-admin input[type="text"],
.tax3s-admin input[type="email"],
.tax3s-admin input[type="password"],
.tax3s-admin input[type="search"],
.tax3s-admin input[type="tel"],
.tax3s-admin input[type="number"],
.tax3s-admin input[type="date"],
.tax3s-admin input[type="datetime-local"],
body.tx-site input.form-control,
body.sl-site input.form-control {
    font-size: var(--tx-control-fs);
    min-height: var(--tx-control-h);
    padding: var(--tx-control-py) var(--tx-control-px);
    border-radius: var(--tx-btn-radius);
    line-height: var(--tx-lh);
}

.tax3s-admin textarea.form-control,
body.tx-site textarea.form-control,
body.sl-site textarea.form-control,
.kt-app textarea.form-control,
.ktw-page textarea.form-control,
.ktl-page textarea.form-control {
    min-height: auto;
}

.tax3s-admin .btn,
body.tx-site .btn,
body.sl-site .btn,
body.tracuu-page .btn,
.kt-app .btn,
.ktw-page .btn,
.ktl-page .btn {
    font-size: var(--tx-control-fs);
    line-height: 1.25;
    border-radius: var(--tx-btn-radius);
}

.tax3s-admin .btn:not(.btn-sm):not(.btn-lg):not(.btn-xs),
body.tx-site .btn:not(.btn-sm):not(.btn-lg),
body.sl-site .btn:not(.btn-sm):not(.btn-lg),
.kt-app .btn:not(.btn-sm):not(.btn-lg),
.ktw-page .btn:not(.btn-sm):not(.btn-lg),
.ktl-page .btn:not(.btn-sm):not(.btn-lg) {
    min-height: var(--tx-control-h);
    padding: var(--tx-btn-py, var(--tx-control-py)) var(--tx-btn-px, var(--tx-control-px));
    white-space: nowrap;
}

.tax3s-admin .btn-sm,
body.tx-site .btn-sm,
body.sl-site .btn-sm,
.kt-app .btn-sm,
.ktw-page .btn-sm,
.ktl-page .btn-sm {
    font-size: var(--tx-fs-sm);
    padding: calc(var(--tx-btn-py, var(--tx-control-py)) * 0.75) calc(var(--tx-btn-px, var(--tx-control-px)) * 0.85);
    min-height: calc(var(--tx-control-h) * 0.88);
}

.tax3s-admin .btn-lg,
body.tx-site .btn-lg,
body.sl-site .btn-lg,
.kt-app .btn-lg {
    font-size: var(--tx-fs-lg);
    padding: calc(var(--tx-btn-py, var(--tx-control-py)) * 1.15) calc(var(--tx-btn-px, var(--tx-control-px)) * 1.15);
    min-height: calc(var(--tx-control-h) * 1.12);
}

.tax3s-admin label:not(.btn):not(.custom-control-label),
.tax3s-admin .form-label,
.tax3s-admin .col-form-label,
body.tx-site label:not(.btn),
body.sl-site label:not(.btn),
.kt-app label:not(.btn),
.ktw-page label:not(.btn),
.ktl-page label:not(.btn) {
    font-size: var(--tx-fs-sm);
}

.tax3s-admin .table,
body.tx-site .table,
body.sl-site .table,
.kt-app .table,
.ktw-page .table,
.ktl-page .table {
    font-size: var(--tx-fs-md);
}

.tax3s-admin .table thead th,
.kt-app .table thead th,
.ktw-page .table thead th {
    font-size: var(--tx-fs-sm);
}

.tax3s-admin .input-group-text,
body.tx-site .input-group-text,
body.sl-site .input-group-text,
.kt-app .input-group-text {
    font-size: var(--tx-control-fs);
    padding: var(--tx-control-py) var(--tx-control-px);
}

/* Mobile — bậc <768; html 16px để rem layout ổn; input ≥16px tránh iOS zoom */
@media (max-width: 767px) {
    :root {
        --tx-fs-bump: 0rem;
        --tx-fs-2xs: 10.5px;
        --tx-fs-xs: 11.5px;
        --tx-fs-sm: 13px;
        --tx-fs-base: 15px;
        --tx-fs-md: 15px;
        --tx-fs-lg: 16px;
        --tx-fs-xl: 17px;
        --tx-fs-2xl: 19px;
        --tx-fs-3xl: 22px;
        --tx-fs-4xl: 25px;
        --tx-fs-5xl: 29px;
        --tx-fs-6xl: 35px;
        --tx-fs-display: 36px;
        --tx-fs-display-lg: 44px;
        --tx-chrome-fs: 14px;
        --tx-chrome-icon: 17px;
        --tx-ios-input-fs: 16px;
        --tx-control-fs: var(--tx-fs-md);
        --tx-control-h: 2.75rem; /* 44px touch */
        --tx-control-py: 0.5rem;
        --tx-control-px: 0.85rem;
        --tx-btn-py: 0.6rem;
        --tx-btn-px: 1.2rem;
        --tx-btn-min-w: 0;
        --tx-btn-max-w: none;
    }

    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* Bậc 1366–1599 (laptop HD phổ biến VN) */
@media (min-width: 1366px) and (max-width: 1599px) {
    :root {
        --tx-fs-2xs: 11px;
        --tx-fs-xs: 12px;
        --tx-fs-sm: 13.5px;
        --tx-fs-base: 15.5px;
        --tx-fs-md: 15.5px;
        --tx-fs-lg: 16.5px;
        --tx-fs-xl: 18px;
        --tx-fs-2xl: 20px;
        --tx-fs-3xl: 22px;
        --tx-fs-4xl: 24px;
        --tx-fs-5xl: 28px;
        --tx-fs-6xl: 32px;
        --tx-fs-display: 36px;
        --tx-fs-display-lg: 44px;
        --tx-chrome-fs: 14px;
        --tx-chrome-icon: 17px;
        --tx-control-h: 2.5rem;
        --tx-control-py: 0.45rem;
        --tx-control-px: 0.75rem;
        --tx-btn-py: 0.55rem;
        --tx-btn-px: 1.15rem;
    }
}

/* Bậc 1600–1919 */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root {
        --tx-fs-2xs: 11.5px;
        --tx-fs-xs: 12.5px;
        --tx-fs-sm: 14px;
        --tx-fs-base: 16px;
        --tx-fs-md: 16px;
        --tx-fs-lg: 17px;
        --tx-fs-xl: 19px;
        --tx-fs-2xl: 21px;
        --tx-fs-3xl: 24px;
        --tx-fs-4xl: 26px;
        --tx-fs-5xl: 30px;
        --tx-fs-6xl: 36px;
        --tx-fs-display: 40px;
        --tx-fs-display-lg: 48px;
        --tx-chrome-fs: 14.5px;
        --tx-chrome-icon: 17.5px;
        --tx-control-h: 2.6rem;
        --tx-control-py: 0.48rem;
        --tx-control-px: 0.8rem;
        --tx-btn-py: 0.58rem;
        --tx-btn-px: 1.2rem;
    }
}

/* Bậc 1920–2559 (FHD / 1920×1200) */
@media (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --tx-fs-2xs: 12px;
        --tx-fs-xs: 13px;
        --tx-fs-sm: 14.5px;
        --tx-fs-base: 17px;
        --tx-fs-md: 17px;
        --tx-fs-lg: 18px;
        --tx-fs-xl: 20px;
        --tx-fs-2xl: 22.5px;
        --tx-fs-3xl: 26px;
        --tx-fs-4xl: 29px;
        --tx-fs-5xl: 34px;
        --tx-fs-6xl: 40px;
        --tx-fs-display: 46px;
        --tx-fs-display-lg: 56px;
        --tx-chrome-fs: 15px;
        --tx-chrome-icon: 18px;
        --tx-control-h: 2.75rem;
        --tx-control-py: 0.5rem;
        --tx-control-px: 0.85rem;
        --tx-btn-py: 0.6rem;
        --tx-btn-px: 1.25rem;
        --tx-btn-min-w: 8rem;
        --tx-btn-max-w: 17rem;
    }
}

/* Bậc ≥2560 (QHD+) */
@media (min-width: 2560px) {
    :root {
        --tx-fs-2xs: 12.5px;
        --tx-fs-xs: 13.5px;
        --tx-fs-sm: 15px;
        --tx-fs-base: 18px;
        --tx-fs-md: 18px;
        --tx-fs-lg: 19px;
        --tx-fs-xl: 21px;
        --tx-fs-2xl: 24px;
        --tx-fs-3xl: 28px;
        --tx-fs-4xl: 32px;
        --tx-fs-5xl: 38px;
        --tx-fs-6xl: 44px;
        --tx-fs-display: 52px;
        --tx-fs-display-lg: 64px;
        --tx-chrome-fs: 15.5px;
        --tx-chrome-icon: 18.5px;
        --tx-control-h: 2.875rem;
        --tx-control-py: 0.55rem;
        --tx-control-px: 0.9rem;
        --tx-btn-py: 0.65rem;
        --tx-btn-px: 1.35rem;
        --tx-btn-min-w: 8.5rem;
        --tx-btn-max-w: 18rem;
    }
}

/* Mobile — tránh iOS zoom khi focus input */
@media (max-width: 767px) {
    .tax3s-admin input.form-control,
    .tax3s-admin select.form-control,
    .tax3s-admin textarea.form-control,
    .tax3s-admin .form-control,
    body.tx-site input.form-control,
    body.tx-site select.form-control,
    body.tx-site textarea.form-control,
    body.sl-site input.form-control,
    body.sl-site select.form-control,
    body.sl-site textarea.form-control,
    .kt-app input.form-control,
    .kt-app select.form-control,
    .kt-app textarea.form-control,
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: var(--tx-ios-input-fs);
    }
}