/* Toán Bi design tokens v0.2.0 — SINH TỰ ĐỘNG từ design/tokens/design-tokens.json bởi design/scripts/build-tokens-css.cjs. Không sửa tay. */

:root {
  --tb-color-web-canvas: #F7F9FA;
  --tb-color-web-surface: #FFFFFF;
  --tb-color-web-subtle: #EEF2F4;
  --tb-color-web-ink: #17212B;
  --tb-color-web-muted: #465563;
  --tb-color-web-line: #7B8B98;
  --tb-color-web-primary: #174A63;
  --tb-color-web-onprimary: #FFFFFF;
  --tb-color-web-focus: #174A63;
  --tb-color-web-success: #126446;
  --tb-color-web-error: #A0272D;
  --tb-color-web-warning: #805200;
  --tb-color-ink-300: #A9AED0;
  --tb-color-ink-400: #7C81AB;
  --tb-color-ink-500: #5E6390;
  --tb-color-ink-700: #3A3F66;
  --tb-color-ink-900: #1B1F3B;
  --tb-color-surface-base: #FFFFFF;
  --tb-color-surface-sunken: #F1F5FF;
  --tb-color-surface-docbg: #F7F9FF;
  --tb-color-surface-line: #DCE3F5;
  --tb-color-surface-linestrong: #CAD3EC;
  --tb-color-appbg-choi: #EAF2FF;
  --tb-color-appbg-mam: #FFF4F8;
  --tb-color-appbg-exam: #F4F6FB;
  --tb-color-appbg-rewards: #FFF9E8;
  --tb-color-appbg-collection: #FFF4F8;
  --tb-color-progress-todo: #D3DDF5;
  --tb-color-tabs-track-collection: #F7F0F4;
  --tb-color-tabs-track-rewards: #F5EBC8;
  --tb-color-mode-blue-100: #E3EAFF;
  --tb-color-mode-blue-500: #2F5BFF;
  --tb-color-mode-blue-edge: #1E3FCC;
  --tb-color-mode-blue-tileedge: #C3D0FF;
  --tb-color-mode-blue-on500: #FFFFFF;
  --tb-color-mode-green-100: #DDF7EA;
  --tb-color-mode-green-500: #19B36B;
  --tb-color-mode-green-edge: #0E8A50;
  --tb-color-mode-green-tileedge: #B4E6CC;
  --tb-color-mode-green-on500: var(--tb-color-ink-900);
  --tb-color-mode-green-text: #0B7A45;
  --tb-color-mode-orange-100: #FFE9D9;
  --tb-color-mode-orange-500: #FF7A21;
  --tb-color-mode-orange-edge: #D95E0B;
  --tb-color-mode-orange-tileedge: #F5CDB0;
  --tb-color-mode-orange-on500: var(--tb-color-ink-900);
  --tb-color-mode-orange-text: #9A3F00;
  --tb-color-mode-purple-100: #EEEAFF;
  --tb-color-mode-purple-500: #7C5CFF;
  --tb-color-mode-purple-edge: #5B3FE0;
  --tb-color-mode-purple-tileedge: #D6CEFF;
  --tb-color-mode-purple-on500: #FFFFFF;
  --tb-color-mode-purple-text: #3A2BA8;
  --tb-color-mode-pink-100: #FFE3EF;
  --tb-color-mode-pink-500: #FF4D9A;
  --tb-color-mode-pink-edge: #D92F7A;
  --tb-color-mode-pink-tileedge: #FFC2DB;
  --tb-color-mode-pink-on500: var(--tb-color-ink-900);
  --tb-color-mode-pink-text: #A3175A;
  --tb-color-mode-sun-100: #FFF4CC;
  --tb-color-mode-sun-500: #FFC72C;
  --tb-color-mode-sun-edge: #E0A500;
  --tb-color-mode-sun-tileedge: #F3E2A6;
  --tb-color-mode-sun-on500: var(--tb-color-ink-900);
  --tb-color-mode-sun-text: #6B4E00;
  --tb-color-mode-coral-100: #FFE5E2;
  --tb-color-mode-coral-500: #FF5A4E;
  --tb-color-mode-coral-edge: #D63E33;
  --tb-color-mode-coral-on500: var(--tb-color-ink-900);
  --tb-color-mode-coral-text: #B5302A;
  --tb-color-feedback-correct-bg: var(--tb-color-mode-green-100);
  --tb-color-feedback-correct-border: var(--tb-color-mode-green-500);
  --tb-color-feedback-correct-text: var(--tb-color-mode-green-text);
  --tb-color-feedback-correct-badge: var(--tb-color-mode-green-text);
  --tb-color-feedback-incorrect-bg: var(--tb-color-mode-coral-100);
  --tb-color-feedback-incorrect-border: var(--tb-color-mode-coral-500);
  --tb-color-feedback-incorrect-text: var(--tb-color-mode-coral-text);
  --tb-color-feedback-incorrect-badge: var(--tb-color-mode-coral-text);
  --tb-color-feedback-hint-bg: var(--tb-color-mode-sun-100);
  --tb-color-feedback-hint-border: var(--tb-color-mode-sun-500);
  --tb-color-feedback-hint-text: var(--tb-color-ink-900);
  --tb-color-feedback-disabled-bg: #E8ECF7;
  --tb-color-feedback-disabled-edge: #D2D8EA;
  --tb-color-feedback-disabled-text: var(--tb-color-ink-500);
  --tb-color-mastery-nottried-border: var(--tb-color-ink-400);
  --tb-color-mastery-learning-bg: var(--tb-color-mode-sun-100);
  --tb-color-mastery-learning-dot: var(--tb-color-mode-sun-edge);
  --tb-color-mastery-learning-dotempty: var(--tb-color-mode-sun-tileedge);
  --tb-color-mastery-practicing-bg: var(--tb-color-mode-orange-100);
  --tb-color-mastery-practicing-dot: var(--tb-color-mode-orange-edge);
  --tb-color-mastery-practicing-dotempty: var(--tb-color-mode-orange-tileedge);
  --tb-color-mastery-strong-bg: var(--tb-color-mode-green-100);
  --tb-color-mastery-strong-dot: var(--tb-color-mode-green-edge);
  --tb-color-mastery-strong-dotempty: var(--tb-color-mode-green-tileedge);
  --tb-color-mastery-mastered-bg: var(--tb-color-mode-blue-500);
  --tb-color-mastery-mastered-text: var(--tb-color-mode-blue-on500);
  --tb-color-mastery-mastered-icon: var(--tb-color-mode-sun-500);
  --tb-color-mastery-schedule-reviewdue-bg: var(--tb-color-surface-sunken);
  --tb-color-mastery-schedule-reviewdue-border: var(--tb-color-mode-blue-500);
  --tb-color-mastery-schedule-reviewdue-text: var(--tb-color-mode-blue-edge);
  --tb-color-mastery-schedule-atrisk-bg: var(--tb-color-mode-orange-100);
  --tb-color-mastery-schedule-atrisk-border: var(--tb-color-mode-orange-edge);
  --tb-color-mastery-schedule-atrisk-text: var(--tb-color-mode-orange-text);
  --tb-illustration-blush: #FF8FB8;
  --tb-illustration-dinoink: #0B5C35;
  --tb-illustration-mouth: #C2410C;
  --tb-illustration-decorbluea: #4A72FF;
  --tb-illustration-decorblueb: #6E8EFF;
  --tb-illustration-decorbluesoft: #D6E5FF;
  --tb-illustration-decorpinksoft: #FFD3E6;
  --tb-mastery-dotsfilled-nottried: 0;
  --tb-mastery-dotsfilled-learning: 1;
  --tb-mastery-dotsfilled-practicing: 2;
  --tb-mastery-dotsfilled-strong: 3;
  --tb-mastery-dotsfilled-mastered: 3;
  --tb-mastery-nottriedborder-style: dashed;
  --tb-mastery-nottriedborder-width: 2px;
  --tb-mastery-scheduleicon-reviewdue: clock;
  --tb-mastery-scheduleicon-atrisk: alert;
  --tb-space-s1: 4px;
  --tb-space-s2: 8px;
  --tb-space-s3: 12px;
  --tb-space-s4: 16px;
  --tb-space-s20: 20px;
  --tb-space-s5: 24px;
  --tb-space-s6: 32px;
  --tb-space-s7: 48px;
  --tb-space-s8: 64px;
  --tb-space-screenpadding-x: 32px;
  --tb-space-screenpadding-y: 24px;
  --tb-radius-sm: 12px;
  --tb-radius-md: 20px;
  --tb-radius-r24: 24px;
  --tb-radius-lg: 28px;
  --tb-radius-r32: 32px;
  --tb-radius-xl: 36px;
  --tb-radius-r40: 40px;
  --tb-radius-xxl: 48px;
  --tb-radius-pill: 999px;
  --tb-edge-sm: 4px;
  --tb-edge-md: 6px;
  --tb-edge-lg: 8px;
  --tb-edge-xl: 10px;
  --tb-elevation-pressable-rest-offsety: var(--tb-edge-md);
  --tb-elevation-pressable-rest-blur: 0px;
  --tb-elevation-pressable-pressed-offsety: 2px;
  --tb-elevation-pressable-pressed-translatey: 4px;
  --tb-elevation-pressable-pressed-blur: 0px;
  --tb-elevation-card-border-style: solid;
  --tb-elevation-card-border-width: 2px;
  --tb-elevation-card-border-color: var(--tb-color-surface-line);
  --tb-elevation-card-offsety: 4px;
  --tb-elevation-card-blur: 0px;
  --tb-elevation-card-shadowcolor: var(--tb-color-ink-900);
  --tb-elevation-card-shadowalpha: 0.06;
  --tb-elevation-overlay-offsety: 24px;
  --tb-elevation-overlay-blur: 48px;
  --tb-elevation-overlay-shadowcolor: var(--tb-color-ink-900);
  --tb-elevation-overlay-shadowalpha: 0.18;
  --tb-scrim-color: var(--tb-color-ink-900);
  --tb-scrim-alpha: 0.4;
  --tb-motion-tap: 120ms;
  --tb-motion-feedback: 240ms;
  --tb-motion-questiontransition: 200ms;
  --tb-motion-celebrationmax: 600ms;
  --tb-agetier-mam-touchmin: 72px;
  --tb-agetier-mam-keypadkey: 88px;
  --tb-agetier-mam-answertilemin: 176px;
  --tb-agetier-mam-hometilecount: 4;
  --tb-agetier-choi-touchmin: 56px;
  --tb-agetier-choi-keypadkey: 72px;
  --tb-agetier-choi-answertilemin: 96px;
  --tb-agetier-choi-hometilecount: 6;
  --tb-iconography-grid: 24px;
  --tb-iconography-stroke: 2.5px;
  --tb-iconography-caps: round;
  --tb-iconography-joins: round;
  --tb-mathvisual-object: var(--tb-color-mode-blue-500);
  --tb-mathvisual-objectedge: var(--tb-color-mode-blue-edge);
  --tb-mathvisual-highlight: var(--tb-color-mode-orange-500);
  --tb-mathvisual-empty-style: dashed;
  --tb-mathvisual-empty-width: 3px;
  --tb-mathvisual-empty-color: var(--tb-color-ink-400);
  --tb-mathvisual-stroke-color: var(--tb-color-ink-900);
  --tb-mathvisual-stroke-widthmin: 3px;
  --tb-mathvisual-stroke-widthmax: 4px;
  --tb-mathvisual-labelfont: display;
  --tb-mathvisual-labelweight: 700;
  --tb-mathvisual-unknown-color: var(--tb-color-mode-sun-500);
  --tb-mathvisual-base10-tens: var(--tb-color-mode-blue-500);
  --tb-mathvisual-base10-ones: var(--tb-color-mode-orange-500);
  --tb-mathvisual-mindot: 24px;
  --tb-mathvisual-tenframecellmam: 104px;
  --tb-mathvisual-tenframecellchoi: 60px;
  --tb-font-display: 'Baloo 2', system-ui, sans-serif;
  --tb-font-body: 'Lexend', system-ui, sans-serif;
}

.tb-number-xl { font-family: var(--tb-font-display); font-weight: 800; font-size: 80px; line-height: 84px; }
.tb-display { font-family: var(--tb-font-display); font-weight: 800; font-size: 48px; line-height: 56px; }
.tb-heading-1 { font-family: var(--tb-font-display); font-weight: 700; font-size: 36px; line-height: 44px; }
.tb-heading-2 { font-family: var(--tb-font-display); font-weight: 700; font-size: 28px; line-height: 36px; }
.tb-heading-3 { font-family: var(--tb-font-display); font-weight: 700; font-size: 22px; line-height: 28px; }
.tb-button-l { font-family: var(--tb-font-display); font-weight: 800; font-size: 28px; line-height: 32px; }
.tb-button-m { font-family: var(--tb-font-display); font-weight: 700; font-size: 22px; line-height: 26px; }
.tb-button-primary { font-family: var(--tb-font-display); font-weight: 800; font-size: 26px; line-height: 26px; }
.tb-stem-mam { font-family: var(--tb-font-body); font-weight: 500; font-size: 26px; line-height: 38px; }
.tb-stem-mamdisplay { font-family: var(--tb-font-display); font-weight: 800; font-size: 52px; line-height: 52px; }
.tb-stem-choi { font-family: var(--tb-font-body); font-weight: 500; font-size: 24px; line-height: 36px; }
.tb-answer-choi { font-family: var(--tb-font-display); font-weight: 800; font-size: 64px; line-height: 64px; }
.tb-answer-mam { font-family: var(--tb-font-display); font-weight: 800; font-size: 96px; line-height: 96px; }
.tb-cta-choi { font-family: var(--tb-font-display); font-weight: 800; font-size: 60px; line-height: 60px; }
.tb-cta-mam { font-family: var(--tb-font-display); font-weight: 800; font-size: 72px; line-height: 72px; }
.tb-body { font-family: var(--tb-font-body); font-weight: 400; font-size: 18px; line-height: 28px; }
.tb-label { font-family: var(--tb-font-body); font-weight: 600; font-size: 16px; line-height: 22px; }
.tb-caption { font-family: var(--tb-font-body); font-weight: 500; font-size: 14px; line-height: 20px; }

/* Bề mặt nhấn có gờ (nút, ô đáp án, phím số) */
.tb-pressable { border: none; border-radius: var(--tb-radius-md); box-shadow: 0 var(--tb-elevation-pressable-rest-offsety) 0 var(--tb-edge, var(--tb-color-mode-blue-edge)); transition: transform var(--tb-motion-tap) ease-out, box-shadow var(--tb-motion-tap) ease-out; }
.tb-pressable:active { transform: translateY(var(--tb-elevation-pressable-pressed-translatey)); box-shadow: 0 var(--tb-elevation-pressable-pressed-offsety) 0 var(--tb-edge, var(--tb-color-mode-blue-edge)); }
.tb-btn-primary { --tb-edge: var(--tb-color-mode-blue-edge); background: var(--tb-color-mode-blue-500); color: var(--tb-color-mode-blue-on500); height: var(--tb-agetier-mam-touchmin); padding: 0 var(--tb-space-s6); border-radius: var(--tb-radius-r24); font: 800 26px/1 var(--tb-font-display); }
.tb-btn-primary:disabled { background: var(--tb-color-feedback-disabled-bg); color: var(--tb-color-feedback-disabled-text); box-shadow: 0 var(--tb-elevation-pressable-rest-offsety) 0 var(--tb-color-feedback-disabled-edge); }
.tb-card { background: var(--tb-color-surface-base); border: var(--tb-elevation-card-border-width) var(--tb-elevation-card-border-style) var(--tb-elevation-card-border-color); border-radius: var(--tb-radius-lg); box-shadow: 0 var(--tb-elevation-card-offsety) 0 color-mix(in srgb, var(--tb-elevation-card-shadowcolor) calc(var(--tb-elevation-card-shadowalpha) * 100%), transparent); }
.tb-scrim { background: color-mix(in srgb, var(--tb-scrim-color) calc(var(--tb-scrim-alpha) * 100%), transparent); }
@media (prefers-reduced-motion: reduce) { .tb-pressable { transition: none; } }