/* DS Cục DTNN v2.0 — token (chép từ skill design-system-cuc-dtnn/assets/tokens.css bản Figma 27/10/2026, CHỈ bản Light: DS chưa phát hành
   dark mode — 06 Q5). Nạp ĐẦU TIÊN trong index.html; mọi tệp CSS khác chỉ dùng var(--ds-*). Không sửa tay. */
:root {
  /* primitive */
  --ds-brand-99: #FFFAFB;
  --ds-brand-90: #FEE2E4;
  --ds-brand-60: #F26A72;
  --ds-brand-50: #DB0719;
  --ds-brand-40: #BD0616;
  --ds-brand-10: #63030C;
  --ds-brand-95: #FEF0F1;
  --ds-brand-70: #F9A3A8;
  --ds-brand-80: #FDC9CD;
  --ds-brand-20: #81040F;
  --ds-brand-30: #9F0512;
  --ds-danger-90: #FFDAD6;
  --ds-danger-60: #FF544C;
  --ds-danger-50: #DE3633;
  --ds-danger-40: #BA191E;
  --ds-danger-30: #93000E;
  --ds-danger-95: #FFEDEA;
  --ds-danger-70: #FF897F;
  --ds-danger-80: #FFB4AC;
  --ds-danger-20: #690007;
  --ds-danger-10: #410003;
  --ds-success-90: #C5EDBB;
  --ds-success-50: #008A20;
  --ds-success-40: #006E17;
  --ds-success-95: #D3FCC9;
  --ds-success-60: #2DA637;
  --ds-success-70: #4CC24F;
  --ds-success-30: #00530F;
  --ds-success-20: #003908;
  --ds-success-10: #002203;
  --ds-success-80: #69DF67;
  --ds-warning-90: #FFDEA5;
  --ds-warning-50: #9A7000;
  --ds-warning-40: #7B5800;
  --ds-warning-60: #BB8800;
  --ds-warning-95: #FFEFD7;
  --ds-warning-70: #DCA100;
  --ds-warning-80: #FFBB01;
  --ds-warning-30: #5D4200;
  --ds-warning-20: #412D00;
  --ds-warning-10: #261900;
  --ds-info-90: #DBEAFE;
  --ds-info-50: #3B82F6;
  --ds-info-40: #2563EB;
  --ds-info-70: #93C5FD;
  --ds-info-95: #EFF6FF;
  --ds-info-60: #60A5FA;
  --ds-info-80: #BFDBFE;
  --ds-info-30: #1D4ED8;
  --ds-info-20: #1E40AF;
  --ds-info-10: #1E3A8A;
  --ds-warmgray-99: #FEFBFF;
  --ds-warmgray-95: #F2F0F4;
  --ds-warmgray-90: #E5E7EB;
  --ds-warmgray-80: #D1D5DB;
  --ds-warmgray-70: #9CA3AF;
  --ds-warmgray-60: #6B7280;
  --ds-warmgray-50: #4B5563;
  --ds-warmgray-40: #4F607D;
  --ds-warmgray-30: #3B485E;
  --ds-warmgray-20: #2C3241;
  --ds-warmgray-10: #1F2937;
  --ds-lime-10: #181E00;
  --ds-lime-20: #2B3400;
  --ds-lime-30: #404C00;
  --ds-lime-40: #556500;
  --ds-lime-50: #6D7F18;
  --ds-lime-60: #859934;
  --ds-lime-70: #9FB44D;
  --ds-lime-80: #B9D069;
  --ds-lime-90: #D5ED83;
  --ds-lime-95: #E3FC8E;
  --ds-lime-99: #F6FFF2;
  --ds-teal-10: #011E2E;
  --ds-teal-20: #00344D;
  --ds-teal-30: #1A4B67;
  --ds-teal-40: #39637F;
  --ds-teal-50: #547B98;
  --ds-teal-60: #6F95B2;
  --ds-teal-70: #8AB0CE;
  --ds-teal-80: #A5CBEA;
  --ds-teal-90: #C0E8FF;
  --ds-teal-95: #CDF8FF;
  --ds-teal-99: #F1FFFF;
  --ds-purple-10: #210D4C;
  --ds-purple-20: #39187D;
  --ds-purple-30: #5322B3;
  --ds-purple-40: #6847BF;
  --ds-purple-50: #8064D5;
  --ds-purple-60: #9880EA;
  --ds-purple-70: #B19DFF;
  --ds-purple-80: #C8BFFC;
  --ds-purple-90: #E1E0FF;
  --ds-purple-95: #EDF0FF;
  --ds-purple-99: #FFFBFF;
  --ds-orchid-10: #2A0D3E;
  --ds-orchid-20: #44205A;
  --ds-orchid-30: #5A3A6B;
  --ds-orchid-40: #725283;
  --ds-orchid-50: #8B6B9C;
  --ds-orchid-60: #A585B7;
  --ds-orchid-70: #C09FD3;
  --ds-orchid-80: #DBBBEF;
  --ds-orchid-90: #EEDBFF;
  --ds-orchid-95: #F1EFFF;
  --ds-orchid-99: #FFFBFF;
  --ds-info-99: #F7F9FF;
  --ds-warmgray-15: #252C37;
  --ds-warmgray-25: #2D3748;
  --ds-warmgray-92: #E9E8EC;
  --ds-warmgray-97: #F8F6FA;
  --ds-danger-99: #FFFBFF;
  --ds-success-99: #F6FFEF;
  --ds-warning-99: #FFFBFF;
  --ds-brand-51: #ED081B;
  --ds-warmgray-45: #596C8D;
  --ds-neutral-99: #FCFCFC;
  --ds-warmgray-100: #FFFFFF;
  --ds-warmgray-55: #586474;
  --ds-sand-97: #FDF6F0;
  --ds-sand-98: #F8F7F7;
  --ds-warmgray-91: #EAECF0;
  --ds-blue-900: #02257B;
  --ds-blue-700: #0457B0;
  --ds-blue-600: #1756C5;
  --ds-blue-500: #297BFF;
  --ds-blue-400: #4894FF;
  --ds-blue-200: #6FA5E8;
  --ds-blue-100: #D0E1FF;
  --ds-blue-50: #F7F9FF;
  --ds-teal-700: #00606D;
  --ds-teal-500: #008394;
  --ds-teal-400: #0092A4;
  --ds-neutral-950: #000000;
  --ds-neutral-900: #030C25;
  --ds-neutral-800: #071028;
  --ds-neutral-700: #191C1D;
  --ds-neutral-500: #787878;
  --ds-neutral-400: #A9ADB2;
  --ds-neutral-300: #C6C6C9;
  --ds-neutral-200: #D9D9D9;
  --ds-neutral-150: #E4E4E4;
  --ds-neutral-100: #E4E7EC;
  --ds-neutral-50: #F5F4F9;
  --ds-neutral-0: #FFFFFF;
  --ds-red-500: #CF151D;
  --ds-amber-500: #E59D01;
  --ds-purple-500: #6538D8;
  --ds-social-facebook: #1877F2;
  --ds-base-white: #FFFFFF;
  /* semantic */
  --ds-surface-default: var(--ds-warmgray-100); /* #FFFFFF */
  --ds-surface-container: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-surface-container-high: var(--ds-warmgray-92); /* #E9E8EC */
  --ds-text-primary: var(--ds-warmgray-10); /* #1F2937 */
  --ds-text-secondary: var(--ds-warmgray-40); /* #4F607D */
  --ds-text-disabled: var(--ds-warmgray-60); /* #6B7280 */
  --ds-border-subtle: var(--ds-warmgray-91); /* #EAECF0 */
  --ds-border-strong: var(--ds-warmgray-60); /* #6B7280 */
  --ds-border-interactive: var(--ds-interactive-primary); /* #BD0616 */
  --ds-border-error: var(--ds-danger-40); /* #BA191E */
  --ds-interactive-primary: var(--ds-brand-40); /* #BD0616 */
  --ds-interactive-primary-hover: var(--ds-brand-30); /* #9F0512 */
  --ds-interactive-primary-active: var(--ds-brand-20); /* #81040F */
  --ds-interactive-danger: var(--ds-danger-40); /* #BA191E */
  --ds-interactive-danger-hover: var(--ds-danger-30); /* #93000E */
  --ds-interactive-danger-active: var(--ds-danger-20); /* #690007 */
  --ds-interactive-secondary: var(--ds-warmgray-40); /* #4F607D */
  --ds-interactive-secondary-hover: var(--ds-warmgray-30); /* #3B485E */
  --ds-interactive-secondary-active: var(--ds-warmgray-20); /* #2C3241 */
  --ds-support-error: var(--ds-danger-40); /* #BA191E */
  --ds-support-error-subtle: var(--ds-danger-95); /* #FFEDEA */
  --ds-support-success: var(--ds-success-40); /* #006E17 */
  --ds-support-success-subtle: var(--ds-success-95); /* #D3FCC9 */
  --ds-support-warning: var(--ds-warning-40); /* #7B5800 */
  --ds-support-warning-subtle: var(--ds-warning-95); /* #FFEFD7 */
  --ds-support-info: var(--ds-info-40); /* #2563EB */
  --ds-support-info-subtle: var(--ds-info-95); /* #EFF6FF */
  --ds-focus-ring: var(--ds-brand-50); /* #DB0719 */
  --ds-icon-primary: var(--ds-warmgray-10); /* #1F2937 */
  --ds-icon-secondary: var(--ds-warmgray-40); /* #4F607D */
  --ds-icon-disabled: var(--ds-warmgray-60); /* #6B7280 */
  --ds-icon-interactive: var(--ds-brand-40); /* #BD0616 */
  --ds-icon-error: var(--ds-danger-40); /* #BA191E */
  --ds-icon-success: var(--ds-success-50); /* #008A20 */
  --ds-icon-warning: var(--ds-warning-50); /* #9A7000 */
  --ds-icon-info: var(--ds-info-50); /* #3B82F6 */
  --ds-surface-dim: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-surface-container-low: var(--ds-warmgray-97); /* #F8F6FA */
  --ds-surface-container-highest: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-text-tertiary: var(--ds-warmgray-50); /* #4B5563 */
  --ds-text-link: var(--ds-brand-40); /* #BD0616 */
  --ds-text-brand: var(--ds-brand-40); /* #BD0616 */
  --ds-border-disabled: var(--ds-warmgray-55); /* #586474 */
  --ds-text-white: var(--ds-warmgray-100); /* #FFFFFF */
  --ds-surface-page: var(--ds-sand-98); /* #F8F7F7 */
  --ds-support-info-muted: #DBEAFE;
  --ds-support-warning-muted: #FFDEA5;
  --ds-support-error-muted: #FFDAD6;
  --ds-support-success-muted: #B7F0AE;
  /* component */
  --ds-button-primary-filled-bg: var(--ds-interactive-primary); /* #BD0616 */
  --ds-button-primary-filled-bg-hover: var(--ds-interactive-primary-hover); /* #9F0512 */
  --ds-button-primary-filled-bg-active: var(--ds-interactive-primary-active); /* #81040F */
  --ds-button-primary-filled-text: var(--ds-text-white); /* #FFFFFF */
  --ds-button-primary-outlined-border: var(--ds-border-interactive); /* #BD0616 */
  --ds-button-primary-outlined-text: var(--ds-interactive-primary); /* #BD0616 */
  --ds-button-primary-outlined-bg-hover: var(--ds-brand-95); /* #FEF0F1 */
  --ds-button-primary-tonal-bg: var(--ds-brand-90); /* #FEE2E4 */
  --ds-button-primary-tonal-text: var(--ds-brand-40); /* #BD0616 */
  --ds-button-primary-tonal-bg-hover: var(--ds-brand-80); /* #FDC9CD */
  --ds-button-primary-ghost-text: var(--ds-interactive-primary); /* #BD0616 */
  --ds-button-primary-ghost-bg-hover: var(--ds-brand-95); /* #FEF0F1 */
  --ds-button-danger-filled-bg: var(--ds-interactive-danger); /* #BA191E */
  --ds-button-danger-filled-bg-hover: var(--ds-interactive-danger-hover); /* #93000E */
  --ds-button-danger-filled-bg-active: var(--ds-interactive-danger-active); /* #690007 */
  --ds-button-danger-filled-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-button-danger-outlined-border: var(--ds-danger-40); /* #BA191E */
  --ds-button-danger-outlined-text: var(--ds-interactive-danger); /* #BA191E */
  --ds-button-danger-outlined-bg-hover: var(--ds-danger-95); /* #FFEDEA */
  --ds-button-danger-ghost-text: var(--ds-interactive-danger); /* #BA191E */
  --ds-button-danger-ghost-bg-hover: var(--ds-danger-95); /* #FFEDEA */
  --ds-button-neutral-filled-bg: var(--ds-interactive-secondary); /* #4F607D */
  --ds-button-neutral-filled-bg-hover: var(--ds-interactive-secondary-hover); /* #3B485E */
  --ds-button-neutral-filled-bg-active: var(--ds-interactive-secondary-active); /* #2C3241 */
  --ds-button-neutral-filled-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-button-neutral-outlined-border: var(--ds-interactive-secondary); /* #4F607D */
  --ds-button-neutral-outlined-text: var(--ds-interactive-secondary); /* #4F607D */
  --ds-button-neutral-outlined-bg-hover: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-button-neutral-tonal-bg: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-button-neutral-tonal-text: var(--ds-warmgray-40); /* #4F607D */
  --ds-button-neutral-tonal-bg-hover: var(--ds-warmgray-80); /* #D1D5DB */
  --ds-button-neutral-ghost-text: var(--ds-interactive-secondary); /* #4F607D */
  --ds-button-neutral-ghost-bg-hover: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-button-disabled-bg: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-button-disabled-text: var(--ds-text-disabled); /* #6B7280 */
  --ds-input-border-default: var(--ds-warmgray-60); /* #6B7280 */
  --ds-input-border-hover: var(--ds-warmgray-40); /* #4F607D */
  --ds-input-border-focus: var(--ds-border-interactive); /* #BD0616 */
  --ds-input-border-error: var(--ds-border-error); /* #BA191E */
  --ds-input-bg: var(--ds-surface-default); /* #FFFFFF */
  --ds-input-text: var(--ds-text-primary); /* #1F2937 */
  --ds-input-placeholder: var(--ds-warmgray-45); /* #596C8D */
  --ds-table-header-bg: var(--ds-sand-97); /* #FDF6F0 */
  --ds-table-row-hover: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-table-row-selected: var(--ds-brand-95); /* #FEF0F1 */
  --ds-table-border: var(--ds-border-subtle); /* #EAECF0 */
  --ds-table-text: var(--ds-warmgray-40); /* #4F607D */
  --ds-dialog-bg: var(--ds-neutral-99); /* #FCFCFC */
  --ds-dialog-border: var(--ds-border-strong); /* #6B7280 */
  --ds-dialog-backdrop: #00000080;
  --ds-tab-inactive: var(--ds-warmgray-45); /* #596C8D */
  --ds-tab-active-text: var(--ds-brand-40); /* #BD0616 */
  --ds-tab-indicator: var(--ds-brand-40); /* #BD0616 */
  --ds-toast-error-bg: var(--ds-danger-40); /* #BA191E */
  --ds-toast-success-bg: var(--ds-success-40); /* #006E17 */
  --ds-toast-warning-bg: var(--ds-warning-80); /* #FFBB01 */
  --ds-toast-info-bg: var(--ds-info-40); /* #2563EB */
  --ds-toast-neutral-bg: var(--ds-warmgray-40); /* #4F607D */
  --ds-toast-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-toast-warning-text: var(--ds-warmgray-10); /* #1F2937 */
  --ds-tag-brand-bg: var(--ds-brand-90); /* #FEE2E4 */
  --ds-tag-brand-text: var(--ds-brand-40); /* #BD0616 */
  --ds-tag-brand-border: var(--ds-brand-80); /* #FDC9CD */
  --ds-tag-danger-bg: var(--ds-danger-90); /* #FFDAD6 */
  --ds-tag-danger-text: var(--ds-danger-40); /* #BA191E */
  --ds-tag-danger-border: var(--ds-danger-80); /* #FFB4AC */
  --ds-tag-success-bg: var(--ds-success-90); /* #C5EDBB */
  --ds-tag-success-text: var(--ds-success-40); /* #006E17 */
  --ds-tag-success-border: var(--ds-success-80); /* #69DF67 */
  --ds-tag-warning-bg: var(--ds-support-warning-muted); /* #FFDEA5 */
  --ds-tag-warning-text: var(--ds-warning-40); /* #7B5800 */
  --ds-tag-warning-border: var(--ds-warning-80); /* #FFBB01 */
  --ds-tag-info-bg: var(--ds-support-info-muted); /* #DBEAFE */
  --ds-tag-info-text: var(--ds-info-40); /* #2563EB */
  --ds-tag-info-border: var(--ds-info-80); /* #BFDBFE */
  --ds-tag-neutral-bg: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-tag-neutral-text: var(--ds-warmgray-40); /* #4F607D */
  --ds-tag-neutral-border: var(--ds-warmgray-80); /* #D1D5DB */
  --ds-navigation-bg: var(--ds-warmgray-10); /* #1F2937 */
  --ds-navigation-item-active: var(--ds-brand-40); /* #BD0616 */
  --ds-navigation-item-hover: var(--ds-warmgray-20); /* #2C3241 */
  --ds-navigation-item-text: var(--ds-warmgray-70); /* #9CA3AF */
  --ds-tag-lime-subtle-bg: var(--ds-lime-90); /* #D5ED83 */
  --ds-tag-lime-subtle-text: var(--ds-lime-40); /* #556500 */
  --ds-tag-lime-subtle-border: var(--ds-lime-80); /* #B9D069 */
  --ds-tag-lime-solid-bg: var(--ds-lime-40); /* #556500 */
  --ds-tag-lime-solid-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-tag-lime-outline-border: var(--ds-lime-60); /* #859934 */
  --ds-tag-lime-outline-text: var(--ds-lime-40); /* #556500 */
  --ds-tag-lime-dot-color: var(--ds-lime-60); /* #859934 */
  --ds-tag-teal-subtle-bg: var(--ds-teal-90); /* #C0E8FF */
  --ds-tag-teal-subtle-text: var(--ds-teal-40); /* #39637F */
  --ds-tag-teal-subtle-border: var(--ds-teal-80); /* #A5CBEA */
  --ds-tag-teal-solid-bg: var(--ds-teal-40); /* #39637F */
  --ds-tag-teal-solid-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-tag-teal-outline-border: var(--ds-teal-60); /* #6F95B2 */
  --ds-tag-teal-outline-text: var(--ds-teal-40); /* #39637F */
  --ds-tag-teal-dot-color: var(--ds-teal-60); /* #6F95B2 */
  --ds-tag-purple-subtle-bg: var(--ds-purple-90); /* #E1E0FF */
  --ds-tag-purple-subtle-text: var(--ds-purple-40); /* #6847BF */
  --ds-tag-purple-subtle-border: var(--ds-purple-80); /* #C8BFFC */
  --ds-tag-purple-solid-bg: var(--ds-purple-40); /* #6847BF */
  --ds-tag-purple-solid-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-tag-purple-outline-border: var(--ds-purple-60); /* #9880EA */
  --ds-tag-purple-outline-text: var(--ds-purple-40); /* #6847BF */
  --ds-tag-purple-dot-color: var(--ds-purple-60); /* #9880EA */
  --ds-tag-orchid-subtle-bg: var(--ds-orchid-90); /* #EEDBFF */
  --ds-tag-orchid-subtle-text: var(--ds-orchid-40); /* #725283 */
  --ds-tag-orchid-subtle-border: var(--ds-orchid-80); /* #DBBBEF */
  --ds-tag-orchid-solid-bg: var(--ds-orchid-40); /* #725283 */
  --ds-tag-orchid-solid-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-tag-orchid-outline-border: var(--ds-orchid-60); /* #A585B7 */
  --ds-tag-orchid-outline-text: var(--ds-orchid-40); /* #725283 */
  --ds-tag-orchid-dot-color: var(--ds-orchid-60); /* #A585B7 */
  --ds-badge-neutral-bg: var(--ds-warmgray-80); /* #D1D5DB */
  --ds-badge-neutral-text: var(--ds-warmgray-10); /* #1F2937 */
  --ds-badge-info-bg: var(--ds-info-40); /* #2563EB */
  --ds-badge-info-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-badge-success-bg: var(--ds-success-40); /* #006E17 */
  --ds-badge-success-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-badge-warning-bg: var(--ds-toast-warning-bg); /* #FFBB01 */
  --ds-badge-warning-text: var(--ds-warning-40); /* #7B5800 */
  --ds-badge-danger-bg: var(--ds-danger-40); /* #BA191E */
  --ds-badge-danger-text: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-chip-default-border: var(--ds-border-strong); /* #6B7280 */
  --ds-chip-default-text: var(--ds-text-primary); /* #1F2937 */
  --ds-chip-hover-bg: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-chip-pressed-bg: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-chip-active-bg: var(--ds-brand-90); /* #FEE2E4 */
  --ds-chip-active-bg-hover: var(--ds-brand-80); /* #FDC9CD */
  --ds-chip-active-bg-pressed: var(--ds-brand-70); /* #F9A3A8 */
  --ds-chip-active-text: var(--ds-warmgray-10); /* #1F2937 */
  --ds-chip-selected-bg: var(--ds-brand-95); /* #FEF0F1 */
  --ds-chip-selected-text: var(--ds-text-primary); /* #1F2937 */
  --ds-chip-selected-border: var(--ds-brand-60); /* #F26A72 */
  --ds-chip-error-bg: var(--ds-danger-95); /* #FFEDEA */
  --ds-chip-error-border: var(--ds-danger-50); /* #DE3633 */
  --ds-chip-error-text: var(--ds-danger-40); /* #BA191E */
  --ds-chip-disabled-border: var(--ds-warmgray-55); /* #586474 */
  --ds-chip-disabled-text: var(--ds-text-disabled); /* #6B7280 */
  --ds-tag-neutral-dot: var(--ds-warmgray-50); /* #4B5563 */
  --ds-tag-brand-dot: var(--ds-brand-50); /* #DB0719 */
  --ds-tag-sky-dot: var(--ds-brand-50); /* #DB0719 */
  --ds-tag-amber-dot: var(--ds-warning-50); /* #9A7000 */
  --ds-tag-rose-bg: var(--ds-support-error-muted); /* #FFDAD6 */
  --ds-tag-rose-text: var(--ds-danger-40); /* #BA191E */
  --ds-tag-rose-border: var(--ds-danger-80); /* #FFB4AC */
  --ds-tag-rose-dot: var(--ds-danger-50); /* #DE3633 */
  --ds-tag-moss-bg: var(--ds-success-90); /* #C5EDBB */
  --ds-tag-moss-text: var(--ds-success-40); /* #006E17 */
  --ds-tag-moss-border: var(--ds-success-80); /* #69DF67 */
  --ds-tag-moss-dot: var(--ds-success-50); /* #008A20 */
  --ds-tab-hover-bg: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-tab-hover-text: var(--ds-warmgray-40); /* #4F607D */
  --ds-tab-active-bg: var(--ds-brand-40); /* #BD0616 */
  --ds-message-neutral-description-text-5: var(--ds-warmgray-40); /* #4F607D */
  --ds-message-neutral-background-5: var(--ds-warmgray-95); /* #F2F0F4 */
  --ds-message-success-description-text: var(--ds-success-40); /* #006E17 */
  --ds-message-infor-icon-4: var(--ds-info-40); /* #2563EB */
  --ds-message-infor-description-text-4: var(--ds-info-40); /* #2563EB */
  --ds-message-neutral-title-text-5: var(--ds-warmgray-30); /* #3B485E */
  --ds-message-warning-description-text-3: var(--ds-warning-40); /* #7B5800 */
  --ds-message-warning-border-left-3: var(--ds-warning-50); /* #9A7000 */
  --ds-message-infor-border-left-4: var(--ds-info-50); /* #3B82F6 */
  --ds-message-warning-background-3: var(--ds-support-warning-subtle); /* #FFEFD7 */
  --ds-message-danger-description-text-2: var(--ds-danger-40); /* #BA191E */
  --ds-message-infor-title-text-4: var(--ds-info-40); /* #2563EB */
  --ds-message-danger-icon-2: var(--ds-danger-30); /* #93000E */
  --ds-message-infor-background-4: var(--ds-support-info-subtle); /* #EFF6FF */
  --ds-message-danger-title-text-2: var(--ds-danger-30); /* #93000E */
  --ds-message-danger-border-left-2: var(--ds-danger-50); /* #DE3633 */
  --ds-message-success-icon: var(--ds-success-30); /* #00530F */
  --ds-message-danger-background-2: var(--ds-support-error-subtle); /* #FFEDEA */
  --ds-message-success-title-text: var(--ds-success-30); /* #00530F */
  --ds-message-warning-title-text-3: var(--ds-warning-30); /* #5D4200 */
  --ds-message-success-border-left: var(--ds-success-50); /* #008A20 */
  --ds-message-neutral-icon-5: var(--ds-warmgray-30); /* #3B485E */
  --ds-message-neutral-border-left-5: var(--ds-warmgray-50); /* #4B5563 */
  --ds-message-warning-icon-3: var(--ds-warning-30); /* #5D4200 */
  --ds-message-success-background: var(--ds-success-95); /* #D3FCC9 */
  --ds-message-close-icon: var(--ds-warmgray-50); /* #4B5563 */
  --ds-message-action-link: var(--ds-text-link); /* #BD0616 */
  --ds-navigation-border: var(--ds-border-strong); /* #6B7280 */
  --ds-switch-track-off: var(--ds-warmgray-80); /* #D1D5DB */
  --ds-switch-track-on: var(--ds-interactive-primary); /* #BD0616 */
  --ds-topbar-bg: var(--ds-surface-container-low); /* #F8F6FA */
  --ds-topbar-border: var(--ds-border-strong); /* #6B7280 */
  --ds-input-bg-disabled: var(--ds-surface-container-low); /* #F8F6FA */
  --ds-input-border-disabled: var(--ds-warmgray-55); /* #586474 */
  --ds-focus-ring-primary: var(--ds-brand-50); /* #DB0719 */
  --ds-focus-ring-danger: var(--ds-danger-50); /* #DE3633 */
  --ds-focus-ring-neutral: var(--ds-warmgray-50); /* #4B5563 */
  --ds-loading-indicator: var(--ds-interactive-primary); /* #BD0616 */
  --ds-loading-track: var(--ds-border-subtle); /* #EAECF0 */
  --ds-loading-text: var(--ds-text-secondary); /* #4F607D */
  --ds-shared-disabled: var(--ds-warmgray-55); /* #586474 */
  --ds-checkbox-border-default: var(--ds-warmgray-60); /* #6B7280 */
  --ds-checkbox-border-hover: var(--ds-warmgray-70); /* #9CA3AF */
  --ds-checkbox-checked-fill: var(--ds-interactive-primary); /* #BD0616 */
  --ds-checkbox-checkmark-icon: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-checkbox-indeterminate-dash: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-checkbox-disabled: var(--ds-button-disabled-bg); /* #F2F0F4 */
  --ds-switch-thumb: var(--ds-warmgray-99); /* #FEFBFF */
  --ds-switch-disabled: var(--ds-button-disabled-bg); /* #F2F0F4 */
  --ds-radio-border-default: var(--ds-warmgray-60); /* #6B7280 */
  --ds-radio-border-checked: var(--ds-interactive-primary); /* #BD0616 */
  --ds-radio-dot-fill: var(--ds-interactive-primary); /* #BD0616 */
  --ds-radio-disabled: var(--ds-button-disabled-bg); /* #F2F0F4 */
  --ds-switch-track-hover-on: var(--ds-interactive-primary-hover); /* #9F0512 */
  --ds-switch-track-hover-off: var(--ds-warmgray-70); /* #9CA3AF */
  --ds-number-positive: var(--ds-success-40); /* #006E17 */
  --ds-number-negative: var(--ds-danger-40); /* #BA191E */
  --ds-number-neutral: var(--ds-warmgray-40); /* #4F607D */
  --ds-number-emphasis: var(--ds-brand-40); /* #BD0616 */
  --ds-number-emphasis-bg: var(--ds-brand-51); /* #ED081B */
  --ds-button-danger-outlined-bg-press: var(--ds-danger-80); /* #FFB4AC */
  --ds-button-danger-ghost-bg-press: var(--ds-danger-80); /* #FFB4AC */
  --ds-button-primary-tonal-text-hover: var(--ds-brand-30); /* #9F0512 */
  --ds-button-primary-tonal-bg-active: var(--ds-brand-70); /* #F9A3A8 */
  --ds-button-primary-tonal-text-active: var(--ds-brand-20); /* #81040F */
  --ds-button-primary-outlined-bg-active: var(--ds-brand-90); /* #FEE2E4 */
  --ds-button-primary-ghost-bg-active: var(--ds-brand-90); /* #FEE2E4 */
  --ds-button-danger-tonal-bg: var(--ds-danger-90); /* #FFDAD6 */
  --ds-button-danger-tonal-text: var(--ds-danger-40); /* #BA191E */
  --ds-button-danger-tonal-bg-hover: var(--ds-danger-80); /* #FFB4AC */
  --ds-button-danger-tonal-text-hover: var(--ds-danger-30); /* #93000E */
  --ds-button-danger-tonal-bg-active: var(--ds-danger-70); /* #FF897F */
  --ds-button-danger-tonal-text-active: var(--ds-danger-20); /* #690007 */
  --ds-button-danger-outlined-bg-active: var(--ds-danger-90); /* #FFDAD6 */
  --ds-button-danger-ghost-bg-active: var(--ds-danger-90); /* #FFDAD6 */
  --ds-button-neutral-tonal-text-hover: var(--ds-warmgray-30); /* #3B485E */
  --ds-button-neutral-tonal-bg-active: var(--ds-warmgray-70); /* #9CA3AF */
  --ds-button-neutral-tonal-text-active: var(--ds-warmgray-20); /* #2C3241 */
  --ds-button-neutral-outlined-bg-active: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-button-neutral-ghost-bg-active: var(--ds-warmgray-90); /* #E5E7EB */
  --ds-table-row-tree-level-2: var(--ds-surface-container); /* #F2F0F4 */
  --ds-table-row-tree-level-1: var(--ds-surface-container-low); /* #F8F6FA */
  --ds-table-row-default: var(--ds-surface-default); /* #FFFFFF */
  /* chart series */
  --ds-chart-series-8: var(--ds-danger-70); /* #FF897F */
  --ds-chart-series-7: var(--ds-info-70); /* #93C5FD */
  --ds-chart-series-4: var(--ds-info-80); /* #BFDBFE */
  --ds-chart-node-highlight: var(--ds-purple-50); /* #8064D5 */
  --ds-chart-series-5: var(--ds-brand-50); /* #DB0719 */
  --ds-chart-series-6: var(--ds-purple-60); /* #9880EA */
  --ds-chart-series-3: var(--ds-warning-80); /* #FFBB01 */
  --ds-chart-series-9: var(--ds-info-70); /* #93C5FD */
  --ds-chart-series-2: var(--ds-success-70); /* #4CC24F */
  --ds-chart-series-1: var(--ds-brand-60); /* #F26A72 */
  /* typography — font chuẩn Inter (xem references/01 §2.1) */
  --ds-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-font-mono: 'Roboto Mono', ui-monospace, Consolas, monospace;
  --ds-type-display-size: 28px; --ds-type-display-lh: 33.6px; --ds-type-display-weight: 600;
  --ds-type-heading-size: 24px; --ds-type-heading-lh: 30px; --ds-type-heading-weight: 700;
  --ds-type-title-size: 18px; --ds-type-title-lh: 23.4px; --ds-type-title-weight: 600;
  --ds-type-subtitle-size: 16px; --ds-type-subtitle-lh: 21.6px; --ds-type-subtitle-weight: 500;
  --ds-type-body-size: 14px; --ds-type-body-lh: 21px; --ds-type-body-weight: 400;
  --ds-type-body-emphasis-size: 14px; --ds-type-body-emphasis-lh: 21px; --ds-type-body-emphasis-weight: 500;
  --ds-type-label-size: 14px; --ds-type-label-lh: 21px; --ds-type-label-weight: 500;
  --ds-type-caption-size: 12px; --ds-type-caption-lh: 16.8px; --ds-type-caption-weight: 400;
  /* spacing — Core spacing, mode Scale 4px */
  --ds-spacing-0: 0px;
  --ds-spacing-50: 2px;
  --ds-spacing-100: 4px;
  --ds-spacing-200: 8px;
  --ds-spacing-300: 12px;
  --ds-spacing-400: 16px;
  --ds-spacing-500: 20px;
  --ds-spacing-600: 24px;
  --ds-spacing-800: 32px;
  --ds-spacing-1000: 40px;
  --ds-spacing-1200: 48px;
  --ds-spacing-1600: 64px;
  --ds-spacing-700: 28px;
  --ds-spacing-900: 36px;
  --ds-spacing-1100: 44px;
  /* radius — giá trị thực dùng trong component (references/01 §4) */
  --ds-radius-none: 0px;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-2xl: 28px;
  --ds-radius-full: 999px;
  /* elevation */
  --ds-shadow-0-none: 0 0 0 1px rgba(0,0,0,.08);
  --ds-shadow-1-sm: 0 1px 2px 0 rgba(0,0,0,.06), 0 1px 3px -1px rgba(0,0,0,.04);
  --ds-shadow-2-md: 0 2px 4px 0 rgba(0,0,0,.08), 0 4px 8px -2px rgba(0,0,0,.06);
  --ds-shadow-3-lg: 0 4px 8px 0 rgba(0,0,0,.10), 0 8px 16px -4px rgba(0,0,0,.08);
  --ds-shadow-4-xl: 0 8px 16px 0 rgba(0,0,0,.12), 0 16px 32px -8px rgba(0,0,0,.10);
  --ds-shadow-5-2xl: 0 12px 24px 0 rgba(0,0,0,.14), 0 20px 40px -10px rgba(0,0,0,.12);
  --ds-shadow-action-floating: -4px 0 8px 0 rgba(0,0,0,.08);
  /* layout shell 1920 */
  --ds-page-bg: #F8F7F7;
  --ds-sidebar-w: 300px;
  --ds-sidebar-w-collapsed: 72px;
  --ds-content-pad-y: 12px;
  --ds-content-pad-x: 20px;
  --ds-card-pad: 20px;
  --ds-grid-gutter: 20px;
}