/* ══════════════════════════════════════════════
   AE-PLX-LANGSON – Module HỌC TIẾNG TRUNG
   static/css/nghe_cn.css  (Phase 4: Luyện Nghe)
   Dùng KÈM chinese.css + quiz_cn.css
   ══════════════════════════════════════════════ */

.ln-audio-zone{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:6px 0 4px;
}

/* Nút loa lớn với vòng sóng âm */
.ln-play{
  width:92px;height:92px;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--blue2),var(--blue));
  border:none;font-size:36px;color:#fff;
  box-shadow:0 10px 30px rgba(42,127,255,.35);
  position:relative;transition:.2s;
}
.ln-play:hover{transform:scale(1.06);}
.ln-play:active{transform:scale(.96);}
.ln-play.playing::before,
.ln-play.playing::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(42,127,255,.5);
  animation:lnWave 1.4s ease-out infinite;
}
.ln-play.playing::after{animation-delay:.7s;}
@keyframes lnWave{
  from{transform:scale(1);opacity:.8;}
  to{transform:scale(1.7);opacity:0;}
}

.ln-slow{
  padding:8px 18px;border-radius:18px;cursor:pointer;
  background:rgba(255,152,0,.08);
  border:1px solid rgba(255,152,0,.25);
  font-size:12px;font-weight:700;color:#ffb340;
  transition:.18s;
}
.ln-slow:hover{background:rgba(255,152,0,.16);transform:translateY(-1px);}

.ln-hint{font-size:10px;color:#2a4a5a;letter-spacing:1px;text-transform:uppercase;}

/* Sau khi trả lời: hiện văn bản vừa nghe */
.ln-reveal{
  min-height:0;font-size:17px;font-weight:700;color:#8ec0ff;
  text-align:center;line-height:1.4;max-width:480px;
}
.ln-reveal .ln-reveal-sub{
  display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;
}

@media(max-width:800px){
  .ln-play{width:78px;height:78px;font-size:30px;}
}

/* Hán tự trong phần lộ đáp án */
.ln-reveal .ln-hanzi{
  display:block;font-size:26px;letter-spacing:2px;
  font-family:'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;
}