/* UU DS design tokens */
/* Đơn vị (web): size / gap / radius / font-size / line-height xuất rem (1rem = 16px ở cỡ chữ mặc định)
   để giao diện co theo cỡ chữ người dùng chọn trong trình duyệt. Giữ px: size-px (nét 1px), rounded-circle,
   bóng đổ, độ dày viền. App (Flutter) dùng cùng giá trị ở dạng logical px — xem tokens.json. */
/* UU DS — hai brand mode: Default (:root) và UU ([data-theme="uu"], cam + vàng theo nhận diện Ú Ù). Brand khác: thêm một khối
   [data-theme="<tên>"] ghi đè đúng 23 token thương hiệu (spec 2.5). */

:root {
  /* ---- primitive: color ---- */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --color-slate-950: #020617;
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;
  --color-red-950: #450A0A;
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;
  --color-orange-800: #9A3412;
  --color-orange-900: #7C2D12;
  --color-orange-950: #431407;
  --color-amber-50: #FFFBEB;
  --color-amber-100: #FEF3C7;
  --color-amber-200: #FDE68A;
  --color-amber-300: #FCD34D;
  --color-amber-400: #FBBF24;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;
  --color-amber-700: #B45309;
  --color-amber-800: #92400E;
  --color-amber-900: #78350F;
  --color-amber-950: #451A03;
  --color-yellow-50: #FEFCE8;
  --color-yellow-100: #FEF9C3;
  --color-yellow-200: #FEF08A;
  --color-yellow-300: #FDE047;
  --color-yellow-400: #FACC15;
  --color-yellow-500: #EAB308;
  --color-yellow-600: #CA8A04;
  --color-yellow-700: #A16207;
  --color-yellow-800: #854D0E;
  --color-yellow-900: #713F12;
  --color-yellow-950: #422006;
  --color-lime-50: #F7FEE7;
  --color-lime-100: #ECFCCB;
  --color-lime-200: #D9F99D;
  --color-lime-300: #BEF264;
  --color-lime-400: #A3E635;
  --color-lime-500: #84CC16;
  --color-lime-600: #65A30D;
  --color-lime-700: #4D7C0F;
  --color-lime-800: #3F6212;
  --color-lime-900: #365314;
  --color-lime-950: #1A2E05;
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;
  --color-green-950: #052E16;
  --color-emerald-50: #ECFDF5;
  --color-emerald-100: #D1FAE5;
  --color-emerald-200: #A7F3D0;
  --color-emerald-300: #6EE7B7;
  --color-emerald-400: #34D399;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065F46;
  --color-emerald-900: #064E3B;
  --color-emerald-950: #022C22;
  --color-teal-50: #F0FDFA;
  --color-teal-100: #CCFBF1;
  --color-teal-200: #99F6E4;
  --color-teal-300: #5EEAD4;
  --color-teal-400: #2DD4BF;
  --color-teal-500: #14B8A6;
  --color-teal-600: #0D9488;
  --color-teal-700: #0F766E;
  --color-teal-800: #115E59;
  --color-teal-900: #134E4A;
  --color-teal-950: #042F2E;
  --color-cyan-50: #ECFEFF;
  --color-cyan-100: #CFFAFE;
  --color-cyan-200: #A5F3FC;
  --color-cyan-300: #67E8F9;
  --color-cyan-400: #22D3EE;
  --color-cyan-500: #06B6D4;
  --color-cyan-600: #0891B2;
  --color-cyan-700: #0E7490;
  --color-cyan-800: #155E75;
  --color-cyan-900: #164E63;
  --color-cyan-950: #083344;
  --color-sky-50: #F0F9FF;
  --color-sky-100: #E0F2FE;
  --color-sky-200: #BAE6FD;
  --color-sky-300: #7DD3FC;
  --color-sky-400: #38BDF8;
  --color-sky-500: #0EA5E9;
  --color-sky-600: #0284C7;
  --color-sky-700: #0369A1;
  --color-sky-800: #075985;
  --color-sky-900: #0C4A6E;
  --color-sky-950: #082F49;
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;
  --color-blue-950: #172554;
  --color-indigo-50: #EEF2FF;
  --color-indigo-100: #E0E7FF;
  --color-indigo-200: #C7D2FE;
  --color-indigo-300: #A5B4FC;
  --color-indigo-400: #818CF8;
  --color-indigo-500: #6366F1;
  --color-indigo-600: #4F46E5;
  --color-indigo-700: #4338CA;
  --color-indigo-800: #3730A3;
  --color-indigo-900: #312E81;
  --color-indigo-950: #1E1B4B;
  --color-violet-50: #F5F3FF;
  --color-violet-100: #EDE9FE;
  --color-violet-200: #DDD6FE;
  --color-violet-300: #C4B5FD;
  --color-violet-400: #A78BFA;
  --color-violet-500: #8B5CF6;
  --color-violet-600: #7C3AED;
  --color-violet-700: #6D28D9;
  --color-violet-800: #5B21B6;
  --color-violet-900: #4C1D95;
  --color-violet-950: #2E1065;
  --color-purple-50: #FAF5FF;
  --color-purple-100: #F3E8FF;
  --color-purple-200: #E9D5FF;
  --color-purple-300: #D8B4FE;
  --color-purple-400: #C084FC;
  --color-purple-500: #A855F7;
  --color-purple-600: #9333EA;
  --color-purple-700: #7E22CE;
  --color-purple-800: #6B21A8;
  --color-purple-900: #581C87;
  --color-purple-950: #3B0764;
  --color-fuchsia-50: #FDF4FF;
  --color-fuchsia-100: #FAE8FF;
  --color-fuchsia-200: #F5D0FE;
  --color-fuchsia-300: #F0ABFC;
  --color-fuchsia-400: #E879F9;
  --color-fuchsia-500: #D946EF;
  --color-fuchsia-600: #C026D3;
  --color-fuchsia-700: #A21CAF;
  --color-fuchsia-800: #86198F;
  --color-fuchsia-900: #701A75;
  --color-fuchsia-950: #4A044E;
  --color-pink-50: #FDF2F8;
  --color-pink-100: #FCE7F3;
  --color-pink-200: #FBCFE8;
  --color-pink-300: #F9A8D4;
  --color-pink-400: #F472B6;
  --color-pink-500: #EC4899;
  --color-pink-600: #DB2777;
  --color-pink-700: #BE185D;
  --color-pink-800: #9D174D;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  --color-rose-50: #FFF1F2;
  --color-rose-100: #FFE4E6;
  --color-rose-200: #FECDD3;
  --color-rose-300: #FDA4AF;
  --color-rose-400: #FB7185;
  --color-rose-500: #F43F5E;
  --color-rose-600: #E11D48;
  --color-rose-700: #BE123C;
  --color-rose-800: #9F1239;
  --color-rose-900: #881337;
  --color-rose-950: #4C0519;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* ---- primitive: size (N * 4px) ---- */
  --size-0: 0rem;
  --size-px: 1px;
  --size-0-5: 0.125rem;
  --size-1: 0.25rem;
  --size-1-5: 0.375rem;
  --size-2: 0.5rem;
  --size-2-5: 0.625rem;
  --size-3: 0.75rem;
  --size-3-5: 0.875rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-9: 2.25rem;
  --size-10: 2.5rem;
  --size-11: 2.75rem;
  --size-12: 3rem;
  --size-14: 3.5rem;
  --size-16: 4rem;
  --size-20: 5rem;
  --size-24: 6rem;
  --size-28: 7rem;
  --size-32: 8rem;
  --size-36: 9rem;
  --size-40: 10rem;
  --size-44: 11rem;
  --size-48: 12rem;
  --size-52: 13rem;
  --size-56: 14rem;
  --size-60: 15rem;
  --size-64: 16rem;
  --size-72: 18rem;
  --size-80: 20rem;
  --size-90: 22.5rem;
  --size-96: 24rem;
  --size-120: 30rem;

  /* ---- spacing ---- */
  --gap-0: 0rem;
  --gap-0-5: 0.125rem;
  --gap-1: 0.25rem;
  --gap-1-5: 0.375rem;
  --gap-2: 0.5rem;
  --gap-2-5: 0.625rem;
  --gap-3: 0.75rem;
  --gap-3-5: 0.875rem;
  --gap-4: 1rem;
  --gap-5: 1.25rem;
  --gap-6: 1.5rem;
  --gap-7: 1.75rem;
  --gap-8: 2rem;
  --gap-9: 2.25rem;
  --gap-10: 2.5rem;
  --gap-11: 2.75rem;
  --gap-12: 3rem;
  --gap-14: 3.5rem;
  --gap-16: 4rem;

  /* ---- radius ---- */
  --radius-none: 0rem;
  --radius-sm: 0.5rem;
  --radius-base: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --rounded-2xl: 1.5rem;
  --rounded-3xl: 1.75rem;
  --rounded-4xl: 2rem;
  --rounded-circle: 9999px;

  /* ---- opacity ---- */
  --opacity-0: 0.0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-35: 0.35;
  --opacity-40: 0.4;
  --opacity-45: 0.45;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-60: 0.6;
  --opacity-65: 0.65;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;

  /* ---- typography ---- */
  /* Font hệ thống của thiết bị. SF Pro là font hệ thống của iOS, không phải font của UU DS — đừng nhúng. */
  --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Noto Sans", system-ui, sans-serif;
  --font-family-display: "Bungee", Impact, sans-serif;
  --font-size-3xs: 0.5rem;
  --font-size-2xs: 0.5625rem;
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.4375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.0625rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-height-2xs: 0.5rem;
  --font-height-xs: 1rem;
  --font-height-sm: 1.25rem;
  --font-height-base: 1.5rem;
  --font-height-lg: 1.75rem;
  --font-height-xl: 2rem;
  --font-height-2xl: 2.25rem;
  --font-height-3xl: 2.5rem;
  --font-height-4xl: 3.25rem;
  --font-height-5xl: 3.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- blur: primitive (px — độ nhoè không co theo cỡ chữ) ---- */
  --blur-0: 0px;
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-lg: 16px;

  /* ---- effect: blur theo vai trò (spec 2.4) — component chỉ đọc nhóm này ---- */
  --overlay-blur: var(--blur-lg);
  --surface-blur-start: var(--blur-0);
  --surface-blur-end: var(--blur-lg);

  /* ---- elevation ---- */
  --elevation-low: 0px 2px 8px rgba(0, 0, 0, 0.10);
  --elevation-medium: 0px 4px 12px rgba(0, 0, 0, 0.10);
  --elevation-high: 0px 8px 24px rgba(0, 0, 0, 0.10);

  /* ---- control DNA (spec 4.3) — mặc định không viền, không bóng; DNA của sản phẩm bật ---- */
  /* Vòng viền vẽ BÊN NGOÀI viền riêng của control bằng box-shadow spread: không chiếm chỗ, không che viền trạng thái. */
  --control-outline-width: 0px;
  --control-outline-color: var(--object-primary);
  --control-shadow: 0 0 0 0 transparent;

  /* ---- semantic: brand mode Default ---- */
  --background-surface: var(--color-white);
  --background-muted: var(--color-slate-50);
  --background-subtle: var(--color-slate-100);
  --background-emphasized: var(--color-slate-200);
  --background-inverted: var(--color-black);
  --background-disabled: var(--color-slate-200);
  --background-interactive: var(--color-indigo-600);
  --background-interactive-muted: var(--color-indigo-50);
  --background-accent: var(--color-blue-600);
  --background-accent-muted: var(--color-blue-50);
  --background-accent-subtle: var(--color-blue-100);
  --background-accent-medium: var(--color-blue-200);
  --background-accent-emphasized: var(--color-blue-400);
  --background-positive: var(--color-green-700);
  --background-positive-muted: var(--color-green-100);
  --background-negative: var(--color-red-600);
  --background-negative-muted: var(--color-red-100);
  --background-attention: var(--color-red-500);
  --background-attention-muted: var(--color-red-100);
  --background-warning: var(--color-yellow-300);
  --background-warning-muted: var(--color-yellow-100);
  --object-primary: var(--color-black);
  --object-primary-inverted: var(--color-white);
  --object-secondary: var(--color-slate-500);
  --object-disabled: var(--color-slate-400);
  --object-on-light: var(--color-black);
  --object-on-dark: var(--color-white);
  --object-interactive: var(--color-indigo-600);
  --object-interactive-muted: var(--color-indigo-500);
  --object-interactive-inverted: var(--color-indigo-300);
  --object-on-interactive: var(--color-white);
  --object-accent: var(--color-blue-600);
  --object-accent-muted: var(--color-blue-300);
  --object-accent-inverted: var(--color-blue-300);
  --object-on-accent: var(--color-white);
  --object-positive: var(--color-green-700);
  --object-on-positive: var(--color-white);
  --object-negative: var(--color-red-600);
  --object-on-negative: var(--color-white);
  --object-attention: var(--color-red-500);
  --object-on-attention: var(--color-white);
  --object-warning: var(--color-yellow-500); /* 1.92:1 trên trắng — chỉ dùng cho chấm/icon đi kèm chữ */
  --object-on-warning: var(--color-black);
  --border: var(--color-slate-300);
  --border-muted: var(--color-slate-200);
  --border-emphasized: var(--color-slate-500);
  /* Thang viền theo MÀU THƯƠNG HIỆU, song song với thang xám ở trên.
     Thang xám (border / -muted / -emphasized) KHÔNG đổi theo brand. */
  --border-subtle: var(--color-blue-200);
  --border-medium: var(--color-blue-300);
  --border-inverted: var(--color-slate-600);
  --border-muted-inverted: var(--color-slate-700);
  --border-interactive: var(--color-indigo-500);
  --border-interactive-inverted: var(--color-indigo-700);
  --border-highlight: var(--color-white);
  --border-negative: var(--color-red-600); /* viền ô nhập ở state Error */

  /* ---- semantic: alpha tokens ---- */
  /* Alpha lives on the token itself, not on a separate primitive. */
  --overlay: color-mix(in srgb, var(--color-black) 10%, transparent);
  --overlay-strong: color-mix(in srgb, var(--color-black) 45%, transparent);
  --background-transparent: color-mix(in srgb, var(--color-white) 0%, transparent);
}

/* ---- brand mode Default, khai lại cho vùng con: <div data-theme="default"> bên trong trang đang ở brand khác ---- */
[data-theme="default"] {
  --object-secondary: var(--color-slate-500);
  --border: var(--color-slate-300);
  --background-muted: var(--color-slate-50);
  --background-subtle: var(--color-slate-100);
  --background-emphasized: var(--color-slate-200);
  --background-interactive: var(--color-indigo-600);
  --background-interactive-muted: var(--color-indigo-50);
  --background-accent: var(--color-blue-600);
  --background-accent-muted: var(--color-blue-50);
  --background-accent-subtle: var(--color-blue-100);
  --background-accent-medium: var(--color-blue-200);
  --background-accent-emphasized: var(--color-blue-400);
  --object-interactive: var(--color-indigo-600);
  --object-interactive-muted: var(--color-indigo-500);
  --object-interactive-inverted: var(--color-indigo-300);
  --object-on-interactive: var(--color-white);
  --object-accent: var(--color-blue-600);
  --object-accent-muted: var(--color-blue-300);
  --object-accent-inverted: var(--color-blue-300);
  --border-interactive: var(--color-indigo-500);
  --border-interactive-inverted: var(--color-indigo-700);
  --border-subtle: var(--color-blue-200);
  --border-medium: var(--color-blue-300);
}

/* ---- brand mode UU (spec 2.5): cam + vàng theo nhận diện Ú Ù — chỉ 23 token thương hiệu ----
   Nền nút orange-500 (chủ DS chốt 2026-10-18): chữ trắng chỉ 2.80 → chữ trên nút ĐEN (7.49) qua object-on-interactive.
   Chữ / link màu cam vẫn orange-700 (5.18 trên trắng); orange-500 trên trắng chỉ 2.80. */
[data-theme="uu"] {
  --object-secondary: var(--color-neutral-500);
  --border: var(--color-neutral-300);
  --background-muted: var(--color-neutral-50);
  --background-subtle: var(--color-neutral-100);
  --background-emphasized: var(--color-neutral-200);
  --background-interactive: var(--color-orange-500);
  --object-on-interactive: var(--color-black);
  --background-interactive-muted: var(--color-orange-50);
  --background-accent: var(--color-amber-700);
  --background-accent-muted: var(--color-amber-50);
  --background-accent-subtle: var(--color-amber-100);
  --background-accent-medium: var(--color-amber-200);
  --background-accent-emphasized: var(--color-amber-400);
  --object-interactive: var(--color-orange-700);
  --object-interactive-muted: var(--color-orange-600);
  --object-interactive-inverted: var(--color-orange-400);
  --object-accent: var(--color-amber-700);
  --object-accent-muted: var(--color-amber-300);
  --object-accent-inverted: var(--color-amber-300);
  --border-interactive: var(--color-orange-600);
  --border-interactive-inverted: var(--color-orange-800);
  --border-subtle: var(--color-amber-200);
  --border-medium: var(--color-amber-300);
}


/* Typography mode "Active": weights shift up one step.
   Used ONLY for the selected state of Toggle button (Active=True) and of a
   Segment item (Pressed=True) inside SegmentedControl — NOT for :hover or :active.
   Apply on the element that is turned on / selected. */
[data-typography="active"], .uu-is-active {
  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
}

/* ---- density (spec §4.1) ----
   Touch = mặc định, đúng kích thước gốc (app mobile, mini app). Compact = desktop / dashboard: bật bằng
   data-density="compact" trên <html> hoặc một vùng. Độc lập với brand. Chỉ đổi kích thước và độ đậm chữ
   label; màu, state layer, gap giữa các khối, icon giữ nguyên. Component đọc các biến này, không đọc
   thẳng size-* / font-size-* cho phần có density. */
:root, [data-density="touch"] {
  --text-heading-lg-font-size: var(--font-size-2xl);
  --text-heading-lg-line-height: var(--font-height-2xl);
  --text-heading-base-font-size: var(--font-size-xl);
  --text-heading-base-line-height: var(--font-height-xl);
  --text-heading-sm-font-size: var(--font-size-lg);
  --text-heading-sm-line-height: var(--font-height-lg);
  --text-title-base-font-size: var(--font-size-base);
  --text-title-base-line-height: var(--font-height-base);
  --text-title-sm-font-size: var(--font-size-sm);
  --text-title-sm-line-height: var(--font-height-sm);
  --text-title-xs-font-size: var(--font-size-xs);
  --text-title-xs-line-height: var(--font-height-xs);
  --text-body-font-size: var(--font-size-base);
  --text-body-line-height: var(--font-height-base);
  --text-label-font-size: var(--font-size-base);
  --text-label-line-height: var(--font-height-base);
  --text-label-font-weight: var(--font-weight-semibold);
  --text-caption-font-size: var(--font-size-sm);
  --text-caption-line-height: var(--font-height-sm);
  --control-height-large: var(--size-14);
  --control-padding-x-large: var(--gap-6);
  --control-padding-y-large: var(--gap-2);
  --control-icon-large: var(--size-6);
  --control-height-base: var(--size-12);
  --control-padding-x-base: var(--gap-4);
  --control-padding-y-base: var(--gap-2);
  --control-icon-base: var(--size-6);
  --control-height-small: var(--size-8);
  --control-padding-x-small: var(--gap-3);
  --control-padding-y-small: var(--gap-1);
  --control-icon-small: var(--size-4);
  --field-height: var(--size-12);
  --field-padding-x: var(--gap-3);
  --field-radius: var(--radius-lg);
  --field-icon: var(--size-6);
  --field-otp-min-width: var(--size-9);
  --selection-size: var(--size-8);
  --selection-radius: var(--radius-base);
  --selection-check: var(--size-5);
  --selection-radio-dot: var(--size-5);
  --selection-label-offset: var(--gap-1);
  --switch-width: var(--size-14);
  --switch-height: var(--size-8);
  --switch-padding: var(--gap-2);
  --switch-handle-off: var(--size-4);
  --switch-handle-on: var(--size-7);
  --switch-handle-icon: var(--size-4);
  --tab-padding: var(--gap-3);
  --chip-border-width: 2px;
  --table-row-height: var(--size-14);
  --table-header-height: var(--size-12);
  --table-cell-padding-x: var(--gap-4);
  --card-padding: var(--gap-4);
  --sidenav-width: var(--size-72);
}
[data-density="compact"] {
  --text-heading-lg-font-size: var(--font-size-xl);
  --text-heading-lg-line-height: var(--font-height-xl);
  --text-heading-base-font-size: var(--font-size-lg);
  --text-heading-base-line-height: var(--font-height-lg);
  --text-heading-sm-font-size: var(--font-size-base);
  --text-heading-sm-line-height: var(--font-height-base);
  --text-title-base-font-size: var(--font-size-sm);
  --text-title-base-line-height: var(--font-height-sm);
  --text-title-sm-font-size: var(--font-size-xs);
  --text-title-sm-line-height: var(--font-height-xs);
  --text-body-font-size: var(--font-size-sm);
  --text-body-line-height: var(--font-height-sm);
  --text-label-font-size: var(--font-size-sm);
  --text-label-line-height: var(--font-height-sm);
  --text-label-font-weight: var(--font-weight-medium);
  --text-caption-font-size: var(--font-size-xs);
  --text-caption-line-height: var(--font-height-xs);
  --control-height-large: var(--size-10);
  --control-padding-x-large: var(--gap-4);
  --control-padding-y-large: var(--gap-1);
  --control-icon-large: var(--size-4);
  --control-height-base: var(--size-8);
  --control-padding-x-base: var(--gap-3);
  --control-padding-y-base: var(--gap-1);
  --control-icon-base: var(--size-4);
  --control-height-small: var(--size-6);
  --control-padding-x-small: var(--gap-2);
  --control-padding-y-small: var(--gap-0-5);
  --field-height: var(--size-8);
  --field-padding-x: var(--gap-2);
  --field-radius: var(--radius-sm);
  --field-icon: var(--size-4);
  --field-otp-min-width: var(--size-7);
  --selection-size: var(--size-6);
  --selection-radius: var(--radius-sm);
  --selection-check: var(--size-4);
  --selection-radio-dot: var(--size-3);
  --selection-label-offset: var(--gap-0-5);
  --switch-width: var(--size-10);
  --switch-height: var(--size-6);
  --switch-padding: var(--gap-1-5);
  --switch-handle-off: var(--size-3);
  --switch-handle-on: var(--size-5);
  --switch-handle-icon: var(--size-3);
  --tab-padding: var(--gap-2);
  --chip-border-width: 1px;
  --table-row-height: var(--size-10);
  --table-header-height: var(--size-8);
  --table-cell-padding-x: var(--gap-3);
  --card-padding: var(--gap-3);
  --sidenav-width: var(--size-60);
}
/* Mode chữ Active (Toggle bật, Segment đang chọn): label đậm hơn một bậc — Touch 700 · Compact 600.
   Khai báo lại tại phần tử Active để var() lấy bậc weight đã dịch của mode đó. */
[data-typography="active"], .uu-is-active { --text-label-font-weight: var(--font-weight-semibold); }
[data-density="compact"] [data-typography="active"], [data-density="compact"] .uu-is-active,
[data-density="compact"][data-typography="active"], [data-density="compact"].uu-is-active { --text-label-font-weight: var(--font-weight-medium); }

/* ---- text styles ---- */
.text-display-lg {
  font-family: var(--font-family-display);
  font-synthesis: none; /* Bungee chỉ có Regular — không làm đậm giả */
  font-size: var(--font-size-5xl);
  line-height: var(--font-height-5xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
.text-display-base {
  font-family: var(--font-family-display);
  font-synthesis: none;
  font-size: var(--font-size-4xl);
  line-height: var(--font-height-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
.text-display-sm {
  font-family: var(--font-family-display);
  font-synthesis: none;
  font-size: var(--font-size-3xl);
  line-height: var(--font-height-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
.text-display-xs {
  font-family: var(--font-family-display);
  font-synthesis: none;
  font-size: var(--font-size-2xl);
  line-height: var(--font-height-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
.text-heading-lg {
  font-family: var(--font-family-body);
  font-size: var(--text-heading-lg-font-size);
  line-height: var(--text-heading-lg-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-heading-base {
  font-family: var(--font-family-body);
  font-size: var(--text-heading-base-font-size);
  line-height: var(--text-heading-base-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-heading-sm {
  font-family: var(--font-family-body);
  font-size: var(--text-heading-sm-font-size);
  line-height: var(--text-heading-sm-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-title-base {
  font-family: var(--font-family-body);
  font-size: var(--text-title-base-font-size);
  line-height: var(--text-title-base-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-title-sm {
  font-family: var(--font-family-body);
  font-size: var(--text-title-sm-font-size);
  line-height: var(--text-title-sm-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-title-xs {
  font-family: var(--font-family-body);
  font-size: var(--text-title-xs-font-size);
  line-height: var(--text-title-xs-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.text-body {
  font-family: var(--font-family-body);
  font-size: var(--text-body-font-size);
  line-height: var(--text-body-line-height);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}
.text-label {
  font-family: var(--font-family-body);
  font-size: var(--text-label-font-size);
  line-height: var(--text-label-line-height);
  font-weight: var(--text-label-font-weight);
  letter-spacing: 0;
}
.text-caption {
  font-family: var(--font-family-body);
  font-size: var(--text-caption-font-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}

/* Paragraph spacing (Figma paragraphSpacing): khoảng cách giữa hai đoạn liền nhau trong cùng khối chữ.
   body / label 16 (font-height-xs) · caption 8 (font-height-2xs). Style khác = 0. */
:where(.text-body, .text-label) > p + p { margin-block-start: var(--font-height-xs); }
:where(.text-caption) > p + p { margin-block-start: var(--font-height-2xs); }


/* =========================================================================
   STATE LAYER — cơ chế hover/pressed của UU DS.
   Hover/Pressed KHÔNG đổi background, color, hay font-weight. Chúng chỉ phủ
   một lớp full-bleed màu = màu object của variant (CSS: currentColor).
   ========================================================================= */

.uu-interactive { position: relative; isolation: isolate; }
.uu-interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Nền đặc / tối: Solid Accent, Solid Neutral, mọi Inverted=True của Neutral,
   và Toggle button khi Active=True */
.uu-on-dark:hover::after   { opacity: var(--opacity-20); }
.uu-on-dark:active::after  { opacity: var(--opacity-40); }

/* Nền sáng / trong suốt: Outline, Ghost, mọi Solid Inverted=True,
   và Toggle button khi Active=False */
.uu-on-light:hover::after  { opacity: var(--opacity-5); }
.uu-on-light:active::after { opacity: var(--opacity-10); }

/* Disabled và Loading không có state layer */
.uu-interactive[disabled]::after,
.uu-interactive[aria-disabled="true"]::after,
.uu-interactive[data-state="loading"]::after { opacity: 0; }

/* --- Button sizing (mục 6.1 / 6.2) --- */
.uu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gap-2);
  border-radius: var(--rounded-4xl);
  font-family: var(--font-family-body);
  font-size: var(--text-label-font-size);
  line-height: var(--text-label-line-height);
  font-weight: var(--text-label-font-weight);
  border: 0 solid transparent;
  cursor: pointer;
}
.uu-btn--lg   { min-height: var(--control-height-large); min-width: var(--control-height-large); padding: var(--control-padding-y-large) var(--control-padding-x-large); }
.uu-btn--base { min-height: var(--control-height-base); min-width: var(--control-height-base); padding: var(--control-padding-y-base) var(--control-padding-x-base); }
.uu-btn--sm   { min-height: var(--control-height-small); min-width: var(--control-height-small); padding: var(--control-padding-y-small) var(--control-padding-x-small); }
.uu-btn--outline { border-width: 2px; }

.uu-iconbtn--lg   { width: var(--control-height-large); height: var(--control-height-large); padding: 0; }
.uu-iconbtn--base { width: var(--control-height-base); height: var(--control-height-base); padding: 0; }
.uu-iconbtn--sm   { width: var(--control-height-small); height: var(--control-height-small); padding: 0; }
/* icon: --control-icon-large / -base / -small (Touch 24 / 24 / 16 · Compact 16) */

/* --- Toggle button (mục 6.7) --- */
/* Active=True: đổi nền, đổi icon sang biến thể fill, và chữ đậm thêm 1 bậc
   qua typography mode "Active". Không border, không shadow.
   Hug width — đừng hardcode width. Với font hệ thống, bề rộng chữ còn khác
   nhau giữa iOS, Roboto và các bộ font OEM của Android. */
.uu-toggle { background: var(--background-surface); color: var(--object-primary); }
.uu-toggle[aria-pressed="true"] {
  background: var(--background-interactive);
  color: var(--object-on-interactive);
}
/* Chữ đậm thêm một bậc khi bật: thêm class .uu-is-active (mode chữ Active, xem khối density). */

/* --- Field (mục 6.3 / 6.4) --- */
.uu-field {
  display: flex; align-items: center; gap: var(--gap-2);
  height: var(--field-height); padding: 0 var(--field-padding-x);
  border-radius: var(--field-radius);
  background: var(--background-surface);
  border: 1px solid var(--border-muted);
}
.uu-field:focus-within { border-color: var(--border-emphasized); }
.uu-field[data-disabled] { background: var(--background-disabled); }

/* --- Ô "chọn": Dropdown (mục 6.4) và DateInput (mục 6.3c) --- */
/* Gợi ý rỗng: body 400 object-secondary. Giá trị đã chọn: label 600 object-primary.
   Icon mép phải luôn object-secondary (chevron-down 16 · calendar-days 24) — không phải
   object-interactive, không bọc thành Icon button. Text FILL để icon bám mép phải. */
.uu-field__hint,
.uu-field__value { flex: 1 1 0; min-width: 1px;
                    font-size: var(--text-body-font-size); line-height: var(--text-body-line-height); }
.uu-field__hint  { color: var(--object-secondary); font-weight: var(--font-weight-normal); }
.uu-field__value { color: var(--object-primary);   font-weight: var(--text-label-font-weight); }
.uu-field__icon  { flex: 0 0 auto; color: var(--object-secondary); }

/* --- Segmented control (mục 6.13) --- */
/* Vỏ: background-emphasized, radius 16, padding 4, gap 2.
   Item chọn: nền surface, radius 12, elevation-low, chữ 700 qua mode Active.
   Item thường: trong suốt, chữ object-secondary 600. Item HUG — đừng chia đều. */
.uu-segmented { display: inline-flex; align-items: center; gap: var(--gap-0-5);
                 padding: var(--gap-1); border-radius: var(--radius-lg);
                 background: var(--background-emphasized); }
.uu-segment   { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-2);
                 min-width: var(--size-10); min-height: var(--size-10); padding: var(--gap-1) var(--gap-3);
                 border-radius: 0; background: transparent; color: var(--object-secondary);
                 font-family: var(--font-family-body); font-size: var(--text-label-font-size);
                 line-height: var(--text-label-line-height); font-weight: var(--text-label-font-weight); }
.uu-segment[aria-selected="true"] { background: var(--background-surface); color: var(--object-primary);
                 border-radius: var(--radius-base); box-shadow: var(--elevation-low); }
/* Item chọn thêm class .uu-is-active để chữ đậm thêm một bậc (mode chữ Active). */

/* --- Checkbox / Radio (mục 6.3f / 6.3d) --- */
.uu-checkbox { width: var(--selection-size); height: var(--selection-size); border-radius: var(--selection-radius);
                background: var(--background-surface); border: 2px solid var(--border-muted);
                display: inline-flex; align-items: center; justify-content: center; }
.uu-checkbox[aria-checked="true"] { background: var(--background-interactive); border: 0;
                color: var(--object-on-interactive); } /* icon `check` fill 20 dùng currentColor */
.uu-radio    { width: var(--selection-size); height: var(--selection-size); border-radius: var(--rounded-circle);
                background: var(--background-surface); border: 2px solid var(--border);
                display: inline-flex; align-items: center; justify-content: center; }
.uu-radio[aria-checked="true"] { border-color: var(--border-interactive); color: var(--object-interactive); }
.uu-radio[aria-checked="true"]::before { content: ""; width: var(--selection-radio-dot); height: var(--selection-radio-dot);
                border-radius: inherit; background: currentColor; }
/* State layer: ô/vòng TRỐNG đi bậc nền sáng 5/10; ô ĐÃ CHỌN đi bậc nền đặc
   20/40 — Checkbox dùng object-on-interactive, Radio dùng object-interactive. */

/* ---- thanh kính mờ — blur dần (progressive, spec 2.4) ----
   Lớp tiện ích, sản phẩm tự gắn khi UI có thanh mờ; component Header / BottomBar không tự bật.
   .uu-surface-blur--top: header — mạnh nhất ở mép trên (surface-blur-end), về 0 ở mép dưới.
   .uu-surface-blur--bottom: bottom bar — ngược lại. Dựng bằng 4 lớp backdrop-filter, mỗi lớp một bậc,
   giới hạn bằng mask gradient; giá trị lấy từ token nên đổi thang là đổi theo. */
.uu-surface-blur--top, .uu-surface-blur--bottom { position: relative; isolation: isolate; }
.uu-surface-blur--top::before, .uu-surface-blur--top::after,
.uu-surface-blur--bottom::before, .uu-surface-blur--bottom::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.uu-surface-blur--top::before {
  -webkit-backdrop-filter: blur(calc(var(--surface-blur-end) / 2)); backdrop-filter: blur(calc(var(--surface-blur-end) / 2));
  -webkit-mask-image: linear-gradient(to top, transparent, var(--color-black) 60%); mask-image: linear-gradient(to top, transparent, var(--color-black) 60%);
}
.uu-surface-blur--top::after {
  -webkit-backdrop-filter: blur(var(--surface-blur-end)); backdrop-filter: blur(var(--surface-blur-end));
  -webkit-mask-image: linear-gradient(to top, transparent 40%, var(--color-black)); mask-image: linear-gradient(to top, transparent 40%, var(--color-black));
}
.uu-surface-blur--bottom::before {
  -webkit-backdrop-filter: blur(calc(var(--surface-blur-end) / 2)); backdrop-filter: blur(calc(var(--surface-blur-end) / 2));
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-black) 60%); mask-image: linear-gradient(to bottom, transparent, var(--color-black) 60%);
}
.uu-surface-blur--bottom::after {
  -webkit-backdrop-filter: blur(var(--surface-blur-end)); backdrop-filter: blur(var(--surface-blur-end));
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, var(--color-black)); mask-image: linear-gradient(to bottom, transparent 40%, var(--color-black));
}