/* VSE — generated from tokens.json (v2.0.0) */
:root, [data-theme="light"] {
  color-scheme: light;
  --blue-800: #1E3F6E;
  --blue-700: #264F8A;
  --blue-600: #2F63AC;
  --blue-500: #388FCA;
  --blue-300: #8DB8EC;
  --blue-200: #A9CBF3;
  --blue-100: #C9DDF6;
  --blue-50: #F0F4F9;
  --blue-950: #1E2F47;
  --cyan-400: #49C5DB;
  --ink: #22272F;
  --body: #3D434C;
  --muted: #6B7280;
  --line: #D1D5DB;
  --subtle: #E5E7EB;
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --graphite-950: #171B21;
  --graphite-800: #2C323B;
  --graphite-400: #9AA1AD;
  --graphite-300: #B6BCC6;
  --success: #1F7A4D;
  --success-50: #E8F5EE;
  --success-950: #17332A;
  --green-300: #5CC48C;
  --warning: #A15C07;
  --warning-50: #FDF4E7;
  --warning-950: #3A2A12;
  --amber-300: #E6A649;
  --danger: #B42318;
  --danger-50: #FDECEA;
  --danger-950: #3A1B19;
  --red-800: #8F1B12;
  --red-300: #F4958C;
  --red-200: #F8B5AE;
  --background: #FAFBFC;
  --layer-01: #FFFFFF;
  --layer-02: #FAFBFC;
  --layer-hover: #F0F4F9;
  --layer-selected: #C9DDF6;
  --field-01: #FFFFFF;
  --background-disabled: #E5E7EB;
  --tag-background: #E5E7EB;
  --border-subtle: #D1D5DB;
  --border-strong: #6B7280;
  --border-interactive: #2F63AC;
  --text-primary: #22272F;
  --text-secondary: #3D434C;
  --text-helper: #6B7280;
  --text-disabled: #9CA3AF;
  --text-on-color: #FFFFFF;
  --text-error: #B42318;
  --text-inverse: #FFFFFF;
  --background-inverse: #22272F;
  --link-primary: #2F63AC;
  --link-hover: #264F8A;
  --icon-primary: #22272F;
  --icon-secondary: #6B7280;
  --interactive: #2F63AC;
  --interactive-hover: #264F8A;
  --interactive-active: #1E3F6E;
  --focus: #2F63AC;
  --support-error: #B42318;
  --support-error-hover: #8F1B12;
  --support-success: #1F7A4D;
  --support-warning: #A15C07;
  --support-info: #2F63AC;
  --notification-info: #F0F4F9;
  --notification-success: #E8F5EE;
  --notification-warning: #FDF4E7;
  --notification-error: #FDECEA;
  --overlay: rgba(34, 39, 47, 0.6);
  --chart-1: #2F63AC;
  --chart-2: #388FCA;
  --chart-3: #49C5DB;
}
[data-theme="dark"] {
  color-scheme: dark;
  --blue-800: #1E3F6E;
  --blue-700: #264F8A;
  --blue-600: #2F63AC;
  --blue-500: #388FCA;
  --blue-300: #8DB8EC;
  --blue-200: #A9CBF3;
  --blue-100: #C9DDF6;
  --blue-50: #F0F4F9;
  --blue-950: #1E2F47;
  --cyan-400: #49C5DB;
  --ink: #22272F;
  --body: #3D434C;
  --muted: #6B7280;
  --line: #D1D5DB;
  --subtle: #E5E7EB;
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --graphite-950: #171B21;
  --graphite-800: #2C323B;
  --graphite-400: #9AA1AD;
  --graphite-300: #B6BCC6;
  --success: #1F7A4D;
  --success-50: #E8F5EE;
  --success-950: #17332A;
  --green-300: #5CC48C;
  --warning: #A15C07;
  --warning-50: #FDF4E7;
  --warning-950: #3A2A12;
  --amber-300: #E6A649;
  --danger: #B42318;
  --danger-50: #FDECEA;
  --danger-950: #3A1B19;
  --red-800: #8F1B12;
  --red-300: #F4958C;
  --red-200: #F8B5AE;
  --background: #171B21;
  --layer-01: #22272F;
  --layer-02: #2C323B;
  --layer-hover: #2C323B;
  --layer-selected: #1E2F47;
  --field-01: #22272F;
  --background-disabled: #2C323B;
  --tag-background: #2C323B;
  --border-subtle: #3D434C;
  --border-strong: #6B7280;
  --border-interactive: #8DB8EC;
  --text-primary: #FAFBFC;
  --text-secondary: #B6BCC6;
  --text-helper: #9AA1AD;
  --text-disabled: #6B7280;
  --text-on-color: #22272F;
  --text-error: #F4958C;
  --text-inverse: #22272F;
  --background-inverse: #FAFBFC;
  --link-primary: #8DB8EC;
  --link-hover: #A9CBF3;
  --icon-primary: #FAFBFC;
  --icon-secondary: #9AA1AD;
  --interactive: #8DB8EC;
  --interactive-hover: #A9CBF3;
  --interactive-active: #C9DDF6;
  --focus: #8DB8EC;
  --support-error: #F4958C;
  --support-error-hover: #F8B5AE;
  --support-success: #5CC48C;
  --support-warning: #E6A649;
  --support-info: #8DB8EC;
  --notification-info: #1E2F47;
  --notification-success: #17332A;
  --notification-warning: #3A2A12;
  --notification-error: #3A1B19;
  --overlay: rgba(0, 0, 0, 0.7);
  --chart-1: #8DB8EC;
  --chart-2: #388FCA;
  --chart-3: #49C5DB;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --blue-800: #1E3F6E;
  --blue-700: #264F8A;
  --blue-600: #2F63AC;
  --blue-500: #388FCA;
  --blue-300: #8DB8EC;
  --blue-200: #A9CBF3;
  --blue-100: #C9DDF6;
  --blue-50: #F0F4F9;
  --blue-950: #1E2F47;
  --cyan-400: #49C5DB;
  --ink: #22272F;
  --body: #3D434C;
  --muted: #6B7280;
  --line: #D1D5DB;
  --subtle: #E5E7EB;
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --graphite-950: #171B21;
  --graphite-800: #2C323B;
  --graphite-400: #9AA1AD;
  --graphite-300: #B6BCC6;
  --success: #1F7A4D;
  --success-50: #E8F5EE;
  --success-950: #17332A;
  --green-300: #5CC48C;
  --warning: #A15C07;
  --warning-50: #FDF4E7;
  --warning-950: #3A2A12;
  --amber-300: #E6A649;
  --danger: #B42318;
  --danger-50: #FDECEA;
  --danger-950: #3A1B19;
  --red-800: #8F1B12;
  --red-300: #F4958C;
  --red-200: #F8B5AE;
  --background: #171B21;
  --layer-01: #22272F;
  --layer-02: #2C323B;
  --layer-hover: #2C323B;
  --layer-selected: #1E2F47;
  --field-01: #22272F;
  --background-disabled: #2C323B;
  --tag-background: #2C323B;
  --border-subtle: #3D434C;
  --border-strong: #6B7280;
  --border-interactive: #8DB8EC;
  --text-primary: #FAFBFC;
  --text-secondary: #B6BCC6;
  --text-helper: #9AA1AD;
  --text-disabled: #6B7280;
  --text-on-color: #22272F;
  --text-error: #F4958C;
  --text-inverse: #22272F;
  --background-inverse: #FAFBFC;
  --link-primary: #8DB8EC;
  --link-hover: #A9CBF3;
  --icon-primary: #FAFBFC;
  --icon-secondary: #9AA1AD;
  --interactive: #8DB8EC;
  --interactive-hover: #A9CBF3;
  --interactive-active: #C9DDF6;
  --focus: #8DB8EC;
  --support-error: #F4958C;
  --support-error-hover: #F8B5AE;
  --support-success: #5CC48C;
  --support-warning: #E6A649;
  --support-info: #8DB8EC;
  --notification-info: #1E2F47;
  --notification-success: #17332A;
  --notification-warning: #3A2A12;
  --notification-error: #3A1B19;
  --overlay: rgba(0, 0, 0, 0.7);
  --chart-1: #8DB8EC;
  --chart-2: #388FCA;
  --chart-3: #49C5DB;
} }
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --font-display: Manrope, "Segoe UI", Arial, sans-serif;
  --font-text: Inter, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}
/* VSE components v2 — chỉ dùng token vai trò. Hover = 1 bậc, active = 2 bậc, focus = viền 3px. */
:where(.vse-btn,.vse-input,.vse-tab,.vse-page,.vse-link,.vse-choice input,.vse-toast__close):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.vse-tab:focus-visible,.vse-page:focus-visible{outline-offset:-3px}
.vse-link{color:var(--link-primary)}.vse-link:hover{color:var(--link-hover)}

/* Button */
.vse-btn{font:600 14px/1 var(--font-text);min-height:48px;padding:12px 24px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background 120ms,border-color 120ms}
.vse-btn--primary{background:var(--interactive);color:var(--text-on-color)}
.vse-btn--primary:hover{background:var(--interactive-hover)}
.vse-btn--primary:active{background:var(--interactive-active)}
.vse-btn--secondary{background:transparent;color:var(--link-primary);border-color:var(--border-interactive)}
.vse-btn--secondary:hover{background:var(--layer-hover)}
.vse-btn--secondary:active{background:var(--layer-selected)}
.vse-btn--ghost{background:transparent;color:var(--text-primary)}
.vse-btn--ghost:hover{background:var(--layer-hover)}
.vse-btn--ghost:active{background:var(--layer-selected)}
.vse-btn--danger{background:var(--support-error);color:var(--text-on-color)}
.vse-btn--danger:hover,.vse-btn--danger:active{background:var(--support-error-hover)}
.vse-btn:disabled{background:var(--background-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed}

/* Card */
.vse-card{background:var(--layer-01);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);color:var(--text-secondary);font:16px/1.65 var(--font-text)}
.vse-card--pending{border-style:dashed}
.vse-card h3{margin:0 0 var(--space-3);font:600 20px/1.4 var(--font-display);color:var(--text-primary)}
.vse-card p{margin:0}

/* Note */
.vse-note{padding:var(--space-5) var(--space-6);border-left:4px solid var(--support-info);background:var(--notification-info);color:var(--text-primary);font:15px/1.6 var(--font-text)}
.vse-note--success{border-left-color:var(--support-success);background:var(--notification-success)}
.vse-note--warning{border-left-color:var(--support-warning);background:var(--notification-warning)}
.vse-note--danger{border-left-color:var(--support-error);background:var(--notification-error)}

/* Badge */
.vse-badge{display:inline-block;font:12px/1.4 var(--font-mono);color:var(--text-primary);padding:8px 12px;background:var(--tag-background);border-radius:var(--radius-sm)}
.vse-badge--brand{background:var(--interactive);color:var(--text-on-color)}

/* Field, Select */
.vse-field{display:grid;gap:var(--space-2);font-family:var(--font-text)}
.vse-label{font:600 14px/1.4 var(--font-text);color:var(--text-primary)}
.vse-input{font:16px var(--font-text);min-height:48px;padding:12px 16px;background:var(--field-01);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.vse-input:hover{border-color:var(--text-primary)}
.vse-input[aria-invalid="true"]{border-color:var(--support-error)}
.vse-input:disabled{background:var(--background-disabled);color:var(--text-disabled);border-color:transparent}
.vse-help{font-size:13px;color:var(--text-helper)}
.vse-error{font-size:13px;color:var(--text-error)}

/* Choice (checkbox, radio) */
.vse-choice{display:flex;align-items:center;gap:var(--space-3);min-height:48px;color:var(--text-primary);font:16px/1.4 var(--font-text);cursor:pointer}
.vse-choice input{width:24px;height:24px;margin:0;accent-color:var(--interactive)}
.vse-choice--disabled{color:var(--text-disabled);cursor:not-allowed}
fieldset.vse-group{border:0;padding:0;margin:0}
.vse-group legend{font:600 14px/1.4 var(--font-text);color:var(--text-primary);padding:0;margin-bottom:var(--space-2)}

/* Table */
.vse-table{width:100%;border-collapse:collapse;font:14px/1.5 var(--font-text);color:var(--text-secondary)}
.vse-table th{text-align:left;font-weight:600;background:var(--tag-background);color:var(--text-primary)}
.vse-table th,.vse-table td{padding:16px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.vse-table tbody tr:hover{background:var(--layer-hover)}
.vse-table tr[aria-selected="true"]{background:var(--layer-selected)}

/* Tabs */
.vse-tabs{display:flex;border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.vse-tab{font:600 14px/1.4 var(--font-text);min-height:48px;padding:12px var(--space-4);background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.vse-tab:hover{background:var(--layer-hover);color:var(--text-primary)}
.vse-tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--border-interactive)}
.vse-tab:disabled{color:var(--text-disabled);cursor:not-allowed;background:transparent}
.vse-tabpanel{padding:var(--space-5) 0;color:var(--text-secondary);font:16px/1.65 var(--font-text)}

/* Modal */
.vse-scrim{display:grid;place-items:center;padding:var(--space-6);background:var(--overlay)}
.vse-modal{width:100%;max-width:440px;background:var(--layer-01);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);color:var(--text-secondary);font:16px/1.65 var(--font-text)}
.vse-modal h3{margin:0 0 var(--space-3);font:600 20px/1.4 var(--font-display);color:var(--text-primary)}
.vse-modal p{margin:0 0 var(--space-5)}
.vse-modal__actions{display:flex;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap}

/* Toast */
.vse-toast{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:440px;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-5);background:var(--background-inverse);color:var(--text-inverse);border-left:4px solid var(--support-info);border-radius:var(--radius-sm);font:14px/1.5 var(--font-text)}
.vse-toast--success{border-left-color:var(--support-success)}
.vse-toast--warning{border-left-color:var(--support-warning)}
.vse-toast--danger{border-left-color:var(--support-error)}
.vse-toast__close{flex:none;width:48px;height:48px;background:transparent;border:0;color:inherit;font-size:20px;cursor:pointer;border-radius:var(--radius-sm)}

/* Breadcrumb */
.vse-breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;font:14px/1.5 var(--font-text);color:var(--text-secondary)}
.vse-breadcrumb li+li::before{content:"/";margin-right:var(--space-2);color:var(--text-helper)}
.vse-breadcrumb a{color:var(--link-primary)}.vse-breadcrumb a:hover{color:var(--link-hover)}
.vse-breadcrumb [aria-current="page"]{color:var(--text-primary);font-weight:600}

/* Pagination */
.vse-pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.vse-page{min-width:48px;min-height:48px;padding:0 var(--space-3);background:var(--layer-01);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:600 14px var(--font-text);cursor:pointer}
.vse-page:hover{background:var(--layer-hover)}
.vse-page[aria-current="page"]{background:var(--interactive);border-color:var(--interactive);color:var(--text-on-color)}
.vse-page:disabled{color:var(--text-disabled);background:var(--background-disabled);cursor:not-allowed}
.vse-page--gap{border-color:transparent;background:transparent;pointer-events:none}