/* ============================================================
   DESIGN SYSTEM v2 — Mr. Mabu
   Nguồn DUY NHẤT cho màu / typography / spacing / component.
   Toàn bộ site load file này → đổi giá trị ở đây = đổi cả hệ thống.
   Tư duy tham khảo: Stripe Dashboard, Vercel, Linear, Notion — không sao chép.
   ============================================================ */
:root {
  color-scheme: light;
  /* ---------- NỀN & BỀ MẶT ---------- */
  --color-bg: #FAFAFB;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F5F7;
  --color-surface-hover: #ECEEF2;
  --color-overlay: rgba(15, 17, 21, 0.48);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(20, 22, 26, 0.08);

  /* ---------- CHỮ ---------- */
  --color-text: #14161A;
  --color-text-muted: #62666F;
  --color-text-faint: #9AA0AB;
  --color-text-on-primary: #FFFFFF;

  /* ---------- MÀU CHỦ ĐẠO (1) + MÀU NHẤN (1) ---------- */
  --color-primary: #5B21B6;         /* violet đậm — cao cấp, bắt mắt hơn indigo thường */
  --color-primary-hover: #4C1D95;
  --color-primary-soft: #F1EAFB;
  --color-accent: #FB5607;          /* cam rực — màu nhấn nổi bật cho CTA/điểm nhấn */
  --color-accent-hover: #E04E06;
  --color-accent-soft: #FFEDE3;
  --color-secondary: #0DA6B9;       /* teal — dùng cho biểu đồ/badge phụ, không phải CTA chính */
  --color-secondary-soft: #E4F6F8;

  --gradient-primary: linear-gradient(135deg, #5B21B6, #7C3AED);
  --gradient-accent: linear-gradient(135deg, #FB5607, #FF8A3D);
  --gradient-hero: linear-gradient(135deg, #5B21B6 0%, #7C3AED 55%, #FB5607 120%);

  /* ---------- MÀU TRẠNG THÁI ---------- */
  --color-success: #15803D;
  --color-success-bg: #E9F7EF;
  --color-warning: #B45309;
  --color-warning-bg: #FDF1E1;
  --color-error: #C0292E;
  --color-error-bg: #FBEAEA;

  /* ---------- VIỀN ---------- */
  --color-border: #E4E6EA;
  --color-border-strong: #CBCFD6;

  /* ---------- MÀU RIÊNG THEO GIÁO TRÌNH (dùng làm content-tag, không dùng cho UI chrome) ---------- */
  --curr-hsk: #C0392B; --curr-hsk-bg: #FBEAE8;
  --curr-yct: #C2410C; --curr-yct-bg: #FCE9DD;
  --curr-boya: #2C5F6F; --curr-boya-bg: #E7F0F2;
  --curr-hanngu: #1F7A4D; --curr-hanngu-bg: #E6F3EC;
  --curr-giaotiep: #B45309; --curr-giaotiep-bg: #FBF1E1;
  --curr-congxuong: #5B6B73; --curr-congxuong-bg: #EAEDEE;
  --curr-tutao: #7A5FA0; --curr-tutao-bg: #F1ECF7;

  /* ---------- TYPOGRAPHY ---------- */
  /* Sora: chữ hiển thị (heading) - hình khối chắc, có cá tính, khác Inter mặc định
     Inter: chữ nội dung/UI - trung tính, dễ đọc ở size nhỏ trên dashboard
     JetBrains Mono: số liệu/XP/streak - nhấn "định lượng" cho phần gamification */
  --font-family-display: "Sora", "Be Vietnam Pro", -apple-system, sans-serif;
  --font-family-base: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-display: 2.75rem; --lh-display: 1.1;
  --text-h1: 2.125rem; --lh-h1: 1.2;
  --text-h2: 1.625rem; --lh-h2: 1.25;
  --text-h3: 1.3rem; --lh-h3: 1.35;
  --text-h4: 1.1rem; --lh-h4: 1.4;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  /* alias tương thích code cũ */
  --font-size-sm: var(--text-body-sm);
  --font-size-base: var(--text-body);
  --font-size-lg: var(--text-body-lg);
  --font-size-xl: var(--text-h3);
  --font-size-2xl: var(--text-h1);

  /* ---------- SPACING (bội số 4px) ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  /* ---------- BO GÓC ---------- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-full: 999px;

  /* ---------- SHADOW (elevation) ---------- */
  --shadow-1: 0 1px 2px rgba(20,22,26,0.05), 0 1px 1px rgba(20,22,26,0.03);
  --shadow-2: 0 2px 8px rgba(20,22,26,0.07), 0 1px 2px rgba(20,22,26,0.04);
  --shadow-3: 0 8px 24px rgba(20,22,26,0.10), 0 2px 6px rgba(20,22,26,0.05);
  --shadow-4: 0 20px 48px rgba(20,22,26,0.16);
  --shadow-card: var(--shadow-2); /* alias tương thích code cũ */

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- LAYOUT ---------- */
  --header-height: 64px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --bottom-nav-height: 60px;
  --container-max: 1200px;
}

/* ============================================================
   DARK MODE — bật bằng [data-theme="dark"] trên <html>
   Giữ tông Violet của brand (không dùng đen/xám trung tính chung)
   để nền tối vẫn nhận diện được là Mr. Mabu.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14101F;
  --color-surface: #1C1730;
  --color-surface-alt: #241D3B;
  --color-surface-hover: #2C2447;
  --color-overlay: rgba(6, 4, 12, 0.66);
  --glass-bg: rgba(28, 23, 48, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);

  --color-text: #F1EEFA;
  --color-text-muted: #A79FC4;
  --color-text-faint: #766E96;
  --color-text-on-primary: #FFFFFF;

  --color-primary: #9F75F0;
  --color-primary-hover: #B497F5;
  --color-primary-soft: #2A2149;
  --color-accent: #FF7A3D;
  --color-accent-hover: #FF9260;
  --color-accent-soft: #3A2417;
  --color-secondary: #3FCADE;
  --color-secondary-soft: #16323A;

  --gradient-primary: linear-gradient(135deg, #6D28D9, #9F75F0);
  --gradient-accent: linear-gradient(135deg, #FF7A3D, #FFB37C);
  --gradient-hero: linear-gradient(135deg, #2B1B54 0%, #5B21B6 55%, #C2410C 120%);

  --color-success: #4ADE80;
  --color-success-bg: #163524;
  --color-warning: #FBBF24;
  --color-warning-bg: #3A2C0E;
  --color-error: #F87171;
  --color-error-bg: #3A1616;

  --color-border: #322A4C;
  --color-border-strong: #423868;

  --curr-hsk: #F0655C; --curr-hsk-bg: #3A1E1C;
  --curr-yct: #FB923C; --curr-yct-bg: #3A2415;
  --curr-boya: #5FB6CC; --curr-boya-bg: #16303A;
  --curr-hanngu: #4FD68C; --curr-hanngu-bg: #15332450;
  --curr-giaotiep: #FBBF24; --curr-giaotiep-bg: #3A2C0E;
  --curr-congxuong: #A8B3BD; --curr-congxuong-bg: #262B30;
  --curr-tutao: #B79CE0; --curr-tutao-bg: #2A2149;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-3: 0 10px 28px rgba(0,0,0,0.45);
  --shadow-4: 0 24px 56px rgba(0,0,0,0.55);
  --shadow-card: var(--shadow-2);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-family-display); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.stat-num, [data-mono] { font-family: var(--font-family-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--text-body-sm); font-weight: 600;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active { transform: scale(0.98); }

.btn-primary { background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-2); text-decoration: none; }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); text-decoration: none; }
.btn-accent { background: var(--gradient-accent); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(251,86,7,0.35); }
.btn-accent:hover { filter: brightness(1.08); text-decoration: none; box-shadow: 0 6px 18px rgba(251,86,7,0.45); }

.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; }

.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: #A32227; text-decoration: none; }

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-caption); }
.btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--text-body); }
[disabled].btn-primary, [disabled].btn-secondary, [disabled].btn-ghost { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.card-interactive { cursor: pointer; }
.card-interactive:hover { box-shadow: var(--shadow-3); }

/* ============================================================
   BADGE / TAG / PILL
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-caption); font-weight: 700;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--color-surface-alt); color: var(--color-text-muted);
}
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }

.curr-badge { font-size: 0.7rem; font-weight: 700; padding: 2px var(--space-2); border-radius: 999px; }
.curr-hsk .curr-badge, .curr-badge.curr-hsk { background: var(--curr-hsk-bg); color: var(--curr-hsk); }
.curr-yct .curr-badge, .curr-badge.curr-yct { background: var(--curr-yct-bg); color: var(--curr-yct); }
.curr-boya .curr-badge, .curr-badge.curr-boya { background: var(--curr-boya-bg); color: var(--curr-boya); }
.curr-hanngu .curr-badge, .curr-badge.curr-hanngu { background: var(--curr-hanngu-bg); color: var(--curr-hanngu); }
.curr-giaotiep .curr-badge, .curr-badge.curr-giaotiep { background: var(--curr-giaotiep-bg); color: var(--curr-giaotiep); }
.curr-congxuong .curr-badge, .curr-badge.curr-congxuong { background: var(--curr-congxuong-bg); color: var(--curr-congxuong); }
.curr-tutao .curr-badge, .curr-badge.curr-tutao { background: var(--curr-tutao-bg); color: var(--curr-tutao); }

.filter-pill {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  font-size: var(--text-body-sm); color: var(--color-text-muted); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.filter-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.filter-pill-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ============================================================
   ALERT
   ============================================================ */
.alert {
  display: flex; gap: var(--space-2); align-items: flex-start;
  border-radius: var(--radius-md); padding: var(--space-3);
  font-size: var(--text-body-sm); border: 1px solid transparent;
}
.alert-info { background: var(--color-primary-soft); color: var(--color-primary); }
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-error { background: var(--color-error-bg); color: var(--color-error); }

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: #fff; font-size: var(--text-caption);
  padding: 4px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard);
}
.tooltip:hover::after { opacity: 1; }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress-track { height: 8px; background: var(--color-surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--duration-slow) var(--ease-standard); }
.progress-ring { transform: rotate(-90deg); }
.progress-ring__bg { fill: none; stroke: var(--color-surface-alt); }
.progress-ring__fill { fill: none; stroke: var(--color-primary); stroke-linecap: round; transition: stroke-dashoffset var(--duration-slow) var(--ease-standard); }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-surface-hover) 37%, var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state { text-align: center; padding: var(--space-6) var(--space-3); color: var(--color-text-muted); }
.empty-state__icon { font-size: 2.75rem; margin-bottom: var(--space-2); }
.empty-state__title { color: var(--color-text); font-weight: 600; margin-bottom: var(--space-1); }

/* ============================================================
   TABLE
   ============================================================ */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.ds-table th { text-align: left; color: var(--color-text-muted); font-weight: 600; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.ds-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.ds-table tr:hover td { background: var(--color-surface-alt); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--color-overlay);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-4);
  padding: var(--space-5); max-width: 480px; width: 90%;
}

/* ============================================================
   MICRO INTERACTION HELPERS
   ============================================================ */
.fade-in { animation: ds-fade-in var(--duration-base) var(--ease-standard); }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   GLASS EFFECT — dùng cho header khi cuộn, overlay nổi trên hero
   ============================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.theme-toggle:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }