/* ===================================================================
   MINADORI — Hệ thiết kế dùng chung
   Concept: 彩り (sắc màu) — mỗi kỹ năng một màu, nền sáng, khối bo tròn
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Màu nền & mực */
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --ink: #1F1B2E;
  --ink-soft: #6B6577;
  --line: #ECE6DC;

  /* Bảng màu kỹ năng (mỗi tính năng một sắc) */
  --c-lesson: #FF6B5B;   /* cam-đỏ — bài học */
  --c-vocab:  #00B894;   /* xanh ngọc — từ vựng */
  --c-ai:     #6C5CE7;   /* tím — luyện AI */
  --c-quiz:   #FFB02E;   /* vàng — quiz/test */
  --c-grammar:#0984E3;   /* xanh dương — ngữ pháp */

  --c-lesson-soft: #FFE9E6;
  --c-vocab-soft:  #D6F5EC;
  --c-ai-soft:     #E8E5FB;
  --c-quiz-soft:   #FFF1D6;
  --c-grammar-soft:#DCEEFB;

  /* Hệ thống */
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow: 0 12px 30px -12px rgba(31,27,46,.18);
  --shadow-soft: 0 4px 14px -8px rgba(31,27,46,.20);
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-jp: 'Zen Maru Gothic', system-ui, sans-serif;
  --ease: cubic-bezier(.34,1.3,.46,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.jp { font-family: var(--font-jp); }

/* ---------- Layout chung ---------- */
.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 22px 80px;
}

/* phase 134 — thay cho 7 override lẻ tẻ (1100-1600px) từng trang tự vá
   riêng — trang bảng dữ liệu/danh sách admin+student dùng chung 1 giá
   trị rộng thay vì mặc định 1080px quá hẹp trên PC lớn. */
.app.app-wide { max-width: 1560px; }

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 30px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.brand .logo {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, var(--c-lesson), var(--c-quiz) 40%, var(--c-vocab) 70%, var(--c-ai));
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 1.2rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(-4deg);
}
.brand small { display:block; font-size:.7rem; font-weight:500; color:var(--ink-soft); letter-spacing:.04em; }

/* Luôn giữ nav trên 1 hàng (phase 66): thay vì flex-wrap khiến pill cuối
   (VD "Bình ▾") rớt xuống hàng 2 khi không đủ chỗ, cho .nav-pills tự co
   lại (flex:1; min-width:0) rồi cuộn ngang riêng — brand/lang-select không
   bao giờ bị bóp (flex-shrink:0). Ẩn thanh cuộn để trông vẫn như 1 hàng
   pill bình thường; item không bao giờ co chữ (flex-shrink:0 + nowrap). */
.nav-pills {
  display: flex; gap: 8px; flex-wrap: nowrap;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pills a, .nav-pills .nav-item-has-children { flex-shrink: 0; }
.nav-pills a {
  text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px;
  transition: all .2s var(--ease);
}
.nav-pills a:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.nav-pills a.active { background: var(--ink); color: #fff; }
.nav-pills a.acct { background: var(--c-lesson-soft); color: var(--c-lesson); font-weight: 700; }
.nav-pills a.acct:hover { background: var(--c-lesson); color: #fff; }
.nav-pills a.acct.active { background: var(--c-lesson); color: #fff; }

.lang-select { flex-shrink: 0; }

/* ---------- Tiêu đề trang ---------- */
.page-head { margin-bottom: 26px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 13px;
  border-radius: 999px; margin-bottom: 14px;
}
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; }
.page-head p { color: var(--ink-soft); font-size: 1.02rem; margin-top: 6px; }

/* ---------- Card cơ bản ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* ---------- Nút ---------- */
.btn {
  font-family: inherit; font-weight: 700; font-size: .98rem;
  border: none; cursor: pointer;
  padding: 13px 24px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- Tiện ích ---------- */
.row { display: flex; gap: 16px; }
.between { justify-content: space-between; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  /* SPEC_phase273 — đo trên iPhone 13 (664px cao): phần đầu trang chiếm gần
     hết màn hình đầu tiên, lessons.html đẩy bài học đầu tiên xuống tận 77%
     độ cao. Cỡ chữ/khoảng cách ở đây được chọn cho màn rộng; trên điện
     thoại chúng chỉ đang đẩy NỘI DUNG xuống dưới nếp gấp.
     Chỉ bóp typography + khoảng cách, KHÔNG đụng bề rộng — mobile-fit.spec
     .mjs canh trục đó, và touch-target.spec.mjs canh vùng chạm. */
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .page-head p { font-size: .92rem; margin-top: 4px; }
  .eyebrow { margin-bottom: 10px; padding: 5px 11px; font-size: .72rem; }

  .admin-bar { flex-direction: column; gap: 16px; align-items: flex-start; }
  /* align-items:flex-start ở trên khiến flex item chỉ co theo nội dung
     (không còn stretch full-width như hàng ngang) — .nav-pills cần
     width:100% tường minh để vùng cuộn ngang chiếm hết bề rộng màn hình
     thay vì chỉ rộng bằng vài pill đầu tiên. */
  .nav-pills { width: 100%; }
  .app { padding: 18px 16px 60px; }
}

/* ---------- Language selector ---------- */
.lang-select {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  margin-left: 8px;
}
.lang-select option { background: #222; color: #fff; }

/* Biến thể cho các trang trước-đăng-nhập (login/register/forgot-password):
   nền sáng, không nằm trong thanh nav tối như .lang-select ở trên. Do
   initAuthLangSwitch() trong i18n.js dựng ra. */
.auth-lang-switch { position: fixed; top: 20px; right: 20px; z-index: 10; }
.auth-lang-switch select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}