/* ═══════════════════════════════════════════════════════════════════════════
   public/assets/css/learn-grammar-list.css — trang Ngữ pháp web tiếng Đức (_grammar_deu.php), 20/10/2026.
   Kiểu mục lục giáo trình: dải đầu trang · bốn ô cấp độ · danh sách chủ điểm (số thứ tự, tên Việt + tên Đức,
   nhóm, phút + số câu, trạng thái). Chỉ token --lv-* / --color-* (tự lật giao diện tối). Khách cũng dùng
   (trang tự nạp learn-shell.css + learn-ui.css cho khách).
   ═══════════════════════════════════════════════════════════════════════════ */
.gl { --gl-gold: var(--color-brand-gold, var(--lv-mint)); }

/* ───── Dải đầu trang ───── */
.gl-band { --lv-band-pb: 46px; }
.gl--guest .gl-band { margin-top: 0; padding-top: 40px; }   /* khách: thanh trên công khai không trong suốt */
.gl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.gl-hero__copy { min-width: 0; }
.gl-title { font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -.04em; color: var(--lv-on); }
.gl-title span { color: var(--lv-mint); }
.gl-stat { display: flex; align-items: center; gap: 18px; min-width: 300px; max-width: 400px; padding: 18px 22px 18px 18px; color: inherit; }
a.gl-stat { transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease); }
a.gl-stat:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--color-on-dark) 22%, transparent), var(--lv-glass-2)); }
.gl-stat__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gl-stat__t b { font-size: 16px; font-weight: 700; color: var(--lv-on); }
.gl-stat__t small { font-size: 13px; line-height: 1.45; color: var(--lv-on-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; min-width: 360px; }
.gl-sum__it { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; color: var(--lv-on); transition: background var(--lv-dur) var(--lv-ease); }
.gl-sum__it:hover { background: var(--lv-glass-2); }
.gl-sum__it b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--gl-gold); }
.gl-sum__it span { font-size: 12.5px; color: var(--lv-on-2); white-space: nowrap; }
.gl-sum__it + .gl-sum__it { box-shadow: -1px 0 0 var(--lv-line-d); }

/* ───── Bốn ô cấp độ ───── */
.gl-body { padding-top: 28px; }
.gl-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.gl-lv { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--lv-text); box-shadow: none;
  transition: border-color var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease); }
.gl-lv:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--lv-hair)); box-shadow: var(--lv-sh-2); }
.gl-lv:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.gl-lv__top { display: flex; align-items: baseline; gap: 10px; }
.gl-lv__top b { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--lv-ink); }
.gl-lv__top span { font-size: 14.5px; font-weight: 650; color: var(--lv-ink); }
.gl-lv small { font-size: 13px; color: var(--lv-muted); }
.gl-lv__bar { display: block; height: 5px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--lv-sunken); }
.gl-lv__bar i { display: block; height: 100%; border-radius: inherit; background: var(--lv-brand-strong); }
.gl-lv.is-on { border-color: transparent; color: var(--lv-on-2);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--gl-gold) 26%, transparent), transparent 62%),
    linear-gradient(155deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 58%, black));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--color-primary) 90%, transparent); }
.gl-lv.is-on .gl-lv__top b { color: var(--gl-gold); }
.gl-lv.is-on .gl-lv__top span { color: var(--lv-on); }
.gl-lv.is-on small { color: var(--lv-on-2); }
.gl-lv.is-on .gl-lv__bar { background: color-mix(in srgb, var(--color-on-dark) 22%, transparent); }
.gl-lv.is-on .gl-lv__bar i { background: var(--gl-gold); }
.gl-lv--bm .gl-lv__top b { font-size: 18px; letter-spacing: -.01em; }

/* ───── Đầu danh sách + tìm kiếm ───── */
.gl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 32px 0 14px; }
.gl-head__t { min-width: 0; }
.gl-head h2 { display: flex; align-items: baseline; gap: 10px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--lv-ink); }
.gl-head h2 span { font-size: 17px; font-weight: 650; letter-spacing: 0; color: var(--lv-muted); }
.gl-head p { margin-top: 4px; font-size: 14px; color: var(--lv-muted); }
.gl-search { display: flex; align-items: center; gap: 10px; flex: 0 1 340px; height: 46px; padding: 0 14px; border-radius: 13px;
  background: var(--lv-surface); border: 1px solid var(--lv-border); color: var(--lv-muted);
  transition: border-color var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease); }
.gl-search:focus-within { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--lv-border)); box-shadow: var(--shadow-focus); }
.gl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--lv-ink); }
.gl-search input::placeholder { color: var(--lv-faint); }
.gl-note { margin: -4px 0 14px !important; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }

/* ───── Danh sách chủ điểm ───── */
.gl-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.gl-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
/* Bộ luyện thêm của chủ điểm: hàng nút dưới tên, thẳng cột với tên chủ điểm */
.gl-row__ex { order: 3; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 16px 82px; margin-top: -6px; }
.gl-row__ex > span { font-size: 13px; font-weight: 650; color: var(--lv-muted); margin-right: 2px; }
.gl-ex { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  background: var(--lv-sunken); color: var(--lv-ink); text-decoration: none; transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease); }
.gl-ex small { font-size: 12px; font-weight: 600; color: var(--lv-muted); }
.gl-ex:hover { background: var(--color-primary-soft); color: var(--lv-brand-fg); }
.gl-ex.is-done { background: var(--lv-wash); color: var(--lv-brand-deep); }
.gl-ex:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.gl-row + .gl-row { border-top: 1px solid var(--lv-hair); }
.gl-row__main { flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 112px; align-items: center; gap: 18px;
  padding: 16px 12px 16px 20px; transition: background var(--lv-dur) var(--lv-ease); }
.gl-row__main:hover { background: var(--lv-tint); }
.gl-row__main:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: -2px; }
.gl-row__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 15px; font-weight: 800;
  background: var(--lv-sunken); color: var(--lv-muted); }
.gl-row.is-seen .gl-row__n { background: var(--color-primary-soft); color: var(--lv-brand-fg); }
.gl-row.is-done .gl-row__n { background: var(--lv-brand-strong); color: var(--lv-on); }
.gl-row__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gl-row__t b { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--lv-ink); }
.gl-row__t i { font-size: 14px; line-height: 1.4; color: var(--lv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-row__main:hover .gl-row__t b { color: var(--lv-brand-fg); }
.gl-row__m { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--lv-muted); }
.gl-row__cat { font-weight: 650; color: var(--lv-text); }
.gl-row__s { display: flex; justify-content: flex-end; gap: 6px; min-width: 0; }
.gl-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--lv-sunken); color: var(--lv-text); }
.gl-chip.is-done { background: var(--lv-wash); color: var(--lv-brand-deep); }
.gl-chip.is-seen { background: var(--color-primary-soft); color: var(--lv-brand-fg); }
.gl-chip.is-rm { background: var(--lv-sunken); color: var(--lv-ink); }
.gl-chip.is-free { background: color-mix(in srgb, var(--gl-gold) 24%, var(--lv-surface)); color: var(--lv-ink); }
.gl-bm { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--lv-faint); cursor: pointer; transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease); }
.gl-bm:hover { background: var(--lv-sunken); color: var(--lv-ink); }
.gl-bm.is-on { color: var(--lv-brand-fg); }
.gl-bm.is-on .lv-i { fill: currentColor; }
.gl-bm:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.gl-empty { padding: 26px 20px; font-size: 14.5px; color: var(--lv-muted); text-align: center; }

/* ───── Máy tính bảng ───── */
@media (max-width: 1100px) {
  .gl-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .gl-stat, .gl-sum { max-width: 520px; }
  .gl-row__main { grid-template-columns: 44px minmax(0, 1fr) 112px; }
  .gl-row__m { grid-column: 2; grid-row: 2; flex-direction: row; gap: 10px; margin-top: -10px; }
  .gl-row__s { grid-column: 3; grid-row: 1 / span 2; }
}
/* ───── Điện thoại ───── */
@media (max-width: 760px) {
  .gl-band { --lv-band-pb: 30px; }
  .gl--guest .gl-band { padding-top: 26px; }
  .gl-title { font-size: 32px; }
  .gl-stat { min-width: 0; padding: 14px 16px 14px 14px; gap: 14px; }
  .gl-sum { display: none; }   /* trùng bốn ô cấp độ ngay bên dưới */
  .gl-body { padding-top: 18px; }
  .gl-levels { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lv-gutter); scrollbar-width: none;
    margin: 0 calc(-1 * var(--lv-gutter)); padding: 2px var(--lv-gutter) 6px; }
  .gl-levels::-webkit-scrollbar { display: none; }
  .gl-lv { flex: 0 0 148px; scroll-snap-align: start; padding: 14px; }
  .gl-lv__top { flex-direction: column; gap: 4px; }
  .gl-lv__top b { font-size: 24px; }
  .gl-lv__top span { font-size: 13.5px; }
  .gl-head { margin: 24px 0 12px; }
  .gl-head h2 { font-size: 21px; }
  .gl-search { flex: 1 1 100%; }
  .gl-row__main { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 6px 14px 14px; align-items: start; }
  .gl-row__n { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; grid-row: 1 / span 3; }
  .gl-row__t b { font-size: 15.5px; }
  .gl-row__t i { white-space: normal; font-size: 13.5px; }
  .gl-row__m { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 0 10px; margin-top: 2px; font-size: 12.5px; }
  .gl-row__s { grid-column: 2; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; }
  .gl-row__s:empty { display: none; }
  .gl-bm { width: 40px; height: 40px; margin-right: 4px; align-self: flex-start; margin-top: 10px; }
  .gl-row__ex { padding: 0 14px 14px 62px; margin-top: -4px; gap: 6px; }
  .gl-row__ex > span { flex: 0 0 100%; font-size: 12.5px; }
  .gl-ex { height: 30px; padding: 0 10px; font-size: 13px; }
}