/* ═══════════════════════════════════════════════════════════
   HOME TOEIC — luyen-giong.css
   Trang "Luyện giọng" (luyen-giong.html, CHỈ web công khai). Màn chọn đề/Part/câu dùng lại nguyên class
   .nk-* của nghe-khuyet.css (nạp kèm) — ở đây chỉ đổi màu nhấn sang TÍM qua các biến --nk-c*, và dựng
   phòng luyện (.lg-*). Đổi màu cả trang = sửa các biến --lg-c* bên dưới.
   ═══════════════════════════════════════════════════════════ */

:root {
  --lg-c:      #7c3aed;
  --lg-c-d:    #6d28d9;
  --lg-c-bg:   #f5f3ff;
  --lg-c-bd:   #ddd6fe;
  --lg-c-sh:   rgba(124,58,237,.28);
  --lg-rec:    #e11d48;
  --lg-rec-bg: #fff1f2;
  --lg-ok:     #059669;
  --lg-miss:   #e11d48;
  --lg-hi:     #fde68a;
}
:root[data-theme="dark"] {
  --lg-c:      #a78bfa;
  --lg-c-d:    #c4b5fd;
  --lg-c-bg:   rgba(139,92,246,.14);
  --lg-c-bd:   rgba(139,92,246,.32);
  --lg-c-sh:   rgba(0,0,0,.4);
  --lg-rec:    #fb7185;
  --lg-rec-bg: rgba(244,63,94,.12);
  --lg-ok:     #34d399;
  --lg-miss:   #fb7185;
  --lg-hi:     rgba(250,204,21,.32);
}

/* Màn chọn bài — mượn .nk-* của Luyện nghe, đổi màu nhấn */
.lg-page {
  --nk-c: var(--lg-c);
  --nk-c-light: var(--lg-c);
  --nk-c-dark: var(--lg-c-d);
  --nk-c-bg: var(--lg-c-bg);
  --nk-c-border: var(--lg-c-bd);
  --nk-c-shadow: var(--lg-c-sh);
}
.nk-item-cell.lg-nodata { opacity: .45; cursor: not-allowed; }

/* Vào phòng luyện: ẩn banner đầu trang cho rộng chỗ */
body.lg-in-player .lg-hero { display: none; }
body.lg-in-player .lg-page { padding-top: calc(var(--nav-h, 60px) + 14px); }
@media (min-width: 768px) { body.lg-in-player .lg-page { padding-top: 22px; } }

.lg-player { max-width: 860px; margin: 0 auto; padding-bottom: 32px; }
.lg-player[hidden] { display: none; }

/* ── Đầu phòng luyện ── */
.lg-back { margin-bottom: 10px; }
.lg-head-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lg-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-head-txt { min-width: 0; }
.lg-head-exam { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.lg-head-title { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.3; margin: 0; }
/* Tiến độ câu trong bài */
.lg-done-prog { display: flex; align-items: center; gap: 10px; }
.lg-done-prog[hidden] { display: none; }
.lg-done-bar { width: 120px; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.lg-done-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lg-c); transition: width .35s ease; }
.lg-done-prog.is-full .lg-done-bar i { background: var(--success); }
.lg-done-txt { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lg-done-prog.is-full .lg-done-txt { color: var(--success); }
/* Ô bài đang làm dở ở màn chọn bài: vạch tiến độ mảnh sát đáy ô */
.nk-item-cell.lg-partial { border-color: var(--nk-c-border); color: var(--nk-c); }
.lg-cell-prog { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 99px; background: var(--border); overflow: hidden; }
.lg-cell-prog::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--nk-c); }
.lg-quota {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.lg-quota b { font-weight: 800; }
.lg-quota.is-low { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.lg-quota.is-out { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.lg-quota[hidden] { display: none; }
:root[data-theme="dark"] .lg-quota { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; }
:root[data-theme="dark"] .lg-quota.is-out { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.3); color: #fda4af; }

/* ── Thanh điều khiển (dính trên cùng) ── */
.lg-ctrl {
  position: sticky;
  top: calc(var(--nav-h, 60px) + var(--topbar-h, 0px));
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 24px -16px rgba(15,23,42,.35);
  padding: 12px 14px 10px;
  margin-bottom: 14px;
}
.lg-ctrl-main { display: flex; align-items: center; gap: 10px; }
.lg-ic-btn {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.lg-ic-btn:hover { background: var(--lg-c-bg); color: var(--lg-c); }
.lg-ic-btn:active { transform: scale(.94); }
.lg-play {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #a78bfa 0%, var(--lg-c) 100%);
  box-shadow: 0 8px 18px -6px var(--lg-c-sh);
  transition: transform .12s, box-shadow .15s;
}
:root[data-theme="dark"] .lg-play { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.lg-play:hover { transform: translateY(-1px); }
.lg-play:active { transform: scale(.95); }
.lg-play svg { margin-left: 2px; }
.lg-play.is-on svg { margin-left: 0; }
.lg-prog { flex: 1; min-width: 0; padding: 0 4px; }
.lg-prog-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.lg-prog-s { font-weight: 700; color: var(--text); }
.lg-seek { position: relative; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.lg-seek::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: var(--border); }
.lg-seek-fill { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 4px; background: var(--lg-c); width: 0; }
.lg-seek-knob { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--lg-c); left: 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.lg-seek:focus-visible .lg-seek-knob { box-shadow: 0 0 0 4px var(--lg-c-bg); }
.lg-rate { flex-shrink: 0; display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; }
.lg-rate button {
  border: none; background: none; cursor: pointer;
  padding: 5px 9px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.lg-rate button.is-on { background: var(--bg-card); color: var(--lg-c); box-shadow: 0 1px 3px rgba(15,23,42,.15); }
:root[data-theme="dark"] .lg-rate button.is-on { background: #334155; }

.lg-ctrl-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 14px; }
.lg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.lg-chip:hover { border-color: var(--lg-c-bd); color: var(--lg-c); }
.lg-chip.is-on { background: var(--lg-c-bg); border-color: var(--lg-c-bd); color: var(--lg-c); }
.lg-chip svg { flex-shrink: 0; }
.lg-auto {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--lg-c); background: var(--lg-c-bg); color: var(--lg-c);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.lg-auto:hover { background: var(--lg-c); color: #fff; }
.lg-auto.is-on { background: var(--lg-rec); border-color: var(--lg-rec); color: #fff; }

/* ── Hướng dẫn ── */
.lg-guide {
  background: var(--lg-c-bg); border: 1px solid var(--lg-c-bd);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
  font-size: 14px; color: var(--text); line-height: 1.6;
}
.lg-guide[hidden] { display: none; }
.lg-guide-head { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--lg-c); margin-bottom: 6px; }
.lg-guide-list { margin: 0 0 6px; padding-left: 22px; list-style: decimal; }
.lg-guide-list li { margin: 4px 0; }
.lg-guide-note, .lg-guide-keys { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.lg-guide kbd {
  display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 5px;
  border: 1px solid var(--border); border-bottom-width: 2px; background: var(--bg-card);
  font: 600 12px var(--font); color: var(--text);
}
.lg-guide-ok {
  margin-top: 10px; padding: 7px 16px; border-radius: var(--radius-pill);
  border: none; background: var(--lg-c); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
:root[data-theme="dark"] .lg-guide-ok { color: #1e1b4b; }


/* ── Danh sách câu ── */
.lg-list { display: flex; flex-direction: column; gap: 10px; }
.lg-s {
  display: flex; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.lg-s.is-now { border-color: var(--lg-c-bd); box-shadow: inset 3px 0 0 var(--lg-c), 0 6px 18px -12px var(--lg-c-sh); }
.lg-s.is-rec { border-color: var(--lg-rec); box-shadow: inset 3px 0 0 var(--lg-rec); background: var(--lg-rec-bg); }
.lg-s-plain { opacity: .7; }
.lg-s-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--bg); color: var(--text-2); margin-top: 2px;
  border: 1px solid var(--border); box-sizing: border-box;
}
.lg-s.is-now .lg-s-num, .lg-s.has-rec .lg-s-num { border-color: transparent; }
.lg-s.is-now .lg-s-num { background: var(--lg-c); color: #fff; }
.lg-s.has-rec:not(.is-now) .lg-s-num { background: var(--lg-c-bg); color: var(--lg-c); }
/* Câu đã luyện (lưu trong máy): dấu tick xanh góc phải + mép trái xanh */
.lg-s.is-done:not(.is-now):not(.is-rec) { box-shadow: inset 3px 0 0 var(--success); }
.lg-s { position: relative; }
.lg-s-tick {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--success); color: #fff; box-shadow: 0 0 0 3px var(--success-light);
}
.lg-s-tick svg { width: 11px; height: 11px; }
.lg-s.is-done .lg-s-en { padding-right: 22px; }
.lg-s-body { flex: 1; min-width: 0; }
.lg-s-en { font-size: 17px; line-height: 1.75; color: var(--text); font-weight: 500; }
.lg-s-vi { font-size: 14px; line-height: 1.55; color: var(--text-2); margin-top: 3px; }
.lg-list.no-vi .lg-s-vi { display: none; }

.lg-spk {
  display: inline-block; min-width: 24px; padding: 0 6px; margin-right: 6px;
  border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; vertical-align: 2px;
  background: #ede9fe; color: #6d28d9;
}
.lg-spk-W { background: #fce7f3; color: #be185d; }
.lg-spk-M { background: #dbeafe; color: #1d4ed8; }
:root[data-theme="dark"] .lg-spk { background: rgba(139,92,246,.2); color: #c4b5fd; }
:root[data-theme="dark"] .lg-spk-W { background: rgba(236,72,153,.18); color: #f9a8d4; }
:root[data-theme="dark"] .lg-spk-M { background: rgba(59,130,246,.2); color: #93c5fd; }
/* Hội thoại: ô người nói thành cột riêng bên trái → chữ tiếng Anh, tiếng Việt, hàng nút của mọi câu thẳng hàng */
.lg-list.has-spk .lg-s-body { position: relative; padding-left: 38px; }
.lg-list.has-spk .lg-spk { position: absolute; left: 0; top: 4px; margin: 0; min-width: 28px; }
.lg-spk.is-cont { opacity: .45; }
.lg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; vertical-align: 1px;
  font-size: 12.5px; font-weight: 800; background: var(--bg); color: var(--text-2); border: 1px solid var(--border); box-sizing: border-box;
  transition: background .2s, color .2s, border-color .2s;
}
/* Đáp án A/B/C/D thành cột trái giống ô người nói — chữ mọi câu thẳng hàng; câu đang đọc thì ô tô tím */
.lg-list.has-opt .lg-s-body { position: relative; padding-left: 38px; }
.lg-list.has-opt .lg-opt { position: absolute; left: 0; top: 2px; }
.lg-s.is-now .lg-opt { background: var(--lg-c); border-color: var(--lg-c); color: #fff; }
.lg-list.no-num .lg-s-num { display: none; }

/* Chữ sáng theo giọng đọc */
.lg-s-en .kw { cursor: pointer; border-radius: 4px; padding: 0 1px; margin: 0 -1px; transition: background .12s, color .12s; }
@media (hover: hover) { .lg-s-en .kw:not(.now):hover { background: var(--lg-c-bg); } }
.lg-list.k-run .lg-s-en .kw { color: var(--text-3); }
.lg-list.k-run .lg-s-en .kw.done { color: var(--text); }
.lg-s-en .kw.now { background: var(--lg-hi); color: var(--text) !important; }
/* Ẩn lời: chữ chưa đọc tới thành vạch che, đọc tới mới hiện */
.lg-list.is-blind .lg-s-en .kw:not(.done):not(.now),
.lg-list.is-blind .lg-s-en .kw-off { color: transparent !important; background: var(--border); }
.lg-list.is-blind .lg-s-vi { filter: blur(4px); transition: filter .2s; }
.lg-list.is-blind .lg-s-vi:hover { filter: none; }
/* Kết quả máy nhận ra */
/* Kết quả máy nhận ra: chữ đúng chữ xanh nền xanh nhạt, chữ chưa rõ chữ đỏ nền đỏ nhạt (bỏ gạch sóng 10-12) */
.lg-s-en .kw.ok:not(.now)   { color: var(--lg-ok); background: color-mix(in srgb, var(--lg-ok) 13%, transparent); }
.lg-s-en .kw.miss:not(.now) { color: var(--lg-miss); background: color-mix(in srgb, var(--lg-miss) 12%, transparent); }
.lg-s-en .kw.ok, .lg-s-en .kw.miss { padding: 1px 3px; margin: 0 -1px; }
.lg-heard {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px;
  padding: 7px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.lg-heard-lbl { font-weight: 700; color: var(--text-3); }
.lg-heard q { quotes: none; font-style: italic; color: var(--text); flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.lg-heard-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.lg-heard-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-heard-key i.ok { background: color-mix(in srgb, var(--lg-ok) 55%, transparent); }
.lg-heard-key i.miss { background: color-mix(in srgb, var(--lg-miss) 55%, transparent); margin-left: 6px; }
.lg-s-en .kw.drill { outline: 2px solid var(--lg-c); outline-offset: 2px; animation: lgDrill 1s ease-in-out infinite; }
@keyframes lgDrill { 50% { outline-color: transparent; } }
.lg-heard-miss { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.lg-miss-w {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--lg-miss); background: color-mix(in srgb, var(--lg-miss) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg-miss) 25%, transparent);
}
.lg-miss-w:hover { border-color: var(--lg-miss); }
.lg-ipa { font-weight: 500; color: var(--text-2); font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; letter-spacing: .01em; }
.lg-score.is-hint { gap: 5px; cursor: pointer; background: var(--lg-c-bg); color: var(--lg-c); border: 1px dashed var(--lg-c-bd); font-weight: 600; }
.lg-score.is-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Nút từng câu */
.lg-s-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.lg-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.lg-act[hidden] { display: none; }
.lg-act:hover { border-color: var(--lg-c-bd); color: var(--lg-c); }
.lg-act:active { transform: scale(.96); }
.lg-act.is-playing { background: var(--lg-c); border-color: var(--lg-c); color: #fff; }
:root[data-theme="dark"] .lg-act.is-playing { color: #1e1b4b; }
.lg-act-rec { color: var(--lg-rec); border-color: color-mix(in srgb, var(--lg-rec) 35%, var(--border)); }
.lg-act-rec:hover { background: var(--lg-rec-bg); color: var(--lg-rec); border-color: var(--lg-rec); }
.lg-act-rec.is-on { background: var(--lg-rec); color: #fff; border-color: var(--lg-rec); }
.lg-act-drill { color: var(--lg-miss); border-color: color-mix(in srgb, var(--lg-miss) 35%, var(--border)); }
.lg-act-drill:hover { color: var(--lg-miss); border-color: var(--lg-miss); background: color-mix(in srgb, var(--lg-miss) 10%, transparent); }
.lg-act-drill.is-on { background: var(--lg-miss); border-color: var(--lg-miss); color: #fff; }
.lg-score {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700;
}
.lg-score[hidden] { display: none; }
.lg-score.is-good { background: var(--success-light); color: var(--lg-ok); }
.lg-score.is-mid  { background: var(--warning-light); color: #b45309; }
.lg-score.is-low  { background: var(--danger-light); color: var(--lg-miss); }
.lg-score.is-none { background: var(--bg); color: var(--text-3); border: 1px dashed var(--border); font-weight: 600; }
:root[data-theme="dark"] .lg-score.is-mid { color: #fbbf24; }

/* Đang ghi âm */
.lg-live {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--lg-rec) 40%, var(--border));
}
.lg-live[hidden] { display: none; }
.lg-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lg-rec); flex-shrink: 0; animation: lgPulse 1s ease-in-out infinite; }
@keyframes lgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.lg-live-txt { flex: 1 1 0; font-size: 13px; font-weight: 700; color: var(--lg-rec); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.lg-live-bars { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; height: 22px; }
/* Điện thoại: chữ được nhường chỗ (iPhone từng đẩy nút Xong tràn ra ngoài khung) */
@media (max-width: 480px) {
  .lg-live { gap: 8px; }
  .lg-live-bars i:nth-child(n+5) { display: none; }
}
.lg-live-bars i { display: block; width: 4px; height: 100%; border-radius: 3px; background: var(--lg-rec); transform: scaleY(.15); transition: transform .06s linear; opacity: .8; }
.lg-live-stop {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-pill); border: none;
  background: var(--lg-rec); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ── Bài trước / sau ── */
.lg-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.lg-foot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer;
}
.lg-foot-btn:hover:not(:disabled) { border-color: var(--lg-c-bd); color: var(--lg-c); }
.lg-foot-btn:disabled { opacity: .4; cursor: default; }

/* ── Thông báo nhỏ ── */
.lg-toast {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px);
  bottom: calc(var(--tabbar-h, 0px) + var(--tabbar-safe, 0px) + 18px);
  z-index: 600; padding: 10px 16px; border-radius: 12px;
  background: #1e1b4b; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.lg-toast.is-show { opacity: 1; transform: none; }

/* ── Điện thoại ── */
@media (max-width: 640px) {
  .lg-head-title { font-size: 1.1rem; }
  .lg-ctrl { padding: 10px 10px 8px; border-radius: 14px; margin-left: -4px; margin-right: -4px; }
  .lg-ctrl-main { flex-wrap: wrap; gap: 8px; }
  .lg-prog { order: 5; flex-basis: 100%; padding: 0; }
  .lg-play { width: 48px; height: 48px; }
  .lg-rate { margin-left: auto; }
  .lg-rate button { padding: 5px 7px; }
  .lg-ctrl-opts { gap: 5px; }
  .lg-chip { padding: 5px 9px; font-size: 12.5px; }
  .lg-auto { margin-left: 0; }
  .lg-list.has-spk .lg-s-body, .lg-list.has-opt .lg-s-body { padding-left: 32px; }
  .lg-list.has-spk .lg-spk { min-width: 24px; top: 3px; }
  .lg-opt { width: 24px; height: 24px; font-size: 12px; }
  .lg-s { padding: 12px; gap: 10px; }
  .lg-s-num { width: 22px; height: 22px; font-size: 11px; }
  .lg-s-en { font-size: 16px; }
  .lg-act { padding: 6px 10px; font-size: 12.5px; }
  .lg-foot-btn { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .lg-ic-btn { width: 34px; height: 34px; }
  .lg-chip { padding: 5px 8px; gap: 4px; }
  .lg-act { padding: 6px 9px; gap: 4px; }
  .lg-s-num { display: none; }
  .lg-quota-lbl { display: none; }
}

/* Nhắc Safari Mac mở bằng Chrome (luyen-giong.js, MAC_SAFARI) */
.lg-mac-tip {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 14px; padding: 10px 14px;
  border: 1px solid var(--lg-c-bd); border-radius: 12px;
  background: var(--lg-c-bg); color: var(--lg-c-d);
  font-size: 14px; line-height: 1.5;
}
.lg-mac-tip svg { flex: none; margin-top: 3px; }