/* ═══════════════════════════════════════════════════
   phatam.css – Luyện Phát Âm (dùng chung Anh/Trung)
   ═══════════════════════════════════════════════════ */

.pa-warn{
  margin:14px 0 4px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(240,180,60,.1);
  border:1px solid rgba(240,180,60,.4);
  color:#f0c060;
  font-size:13px;
  line-height:1.5;
}

/* Từ cần đọc */
.pa-word{
  text-align:center;
  font-size:44px;
  font-weight:800;
  color:#fff;
  margin-top:6px;
  word-break:break-word;
}
.pa-phonetic{ text-align:center; font-size:19px; color:#6fb1ff; margin-top:4px; }
.pa-meaning{ text-align:center; font-size:16px; color:#8fb0d0; margin-top:2px; }

/* Nghe mẫu */
.pa-listen{
  display:block;
  margin:16px auto 4px;
  border:1px solid rgba(90,150,210,.45);
  background:rgba(56,120,190,.12);
  color:#bfe0ff;
  border-radius:10px;
  padding:9px 18px;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.pa-listen:hover{ background:rgba(56,120,190,.25); }

/* Khu micro */
.pa-mic-zone{ text-align:center; margin:22px 0 8px; }
.pa-mic{
  width:96px; height:96px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(145deg,#2a6cf0,#1a4fc0);
  box-shadow:0 8px 24px rgba(40,110,240,.4);
  position:relative;
  transition:transform .12s;
}
.pa-mic:hover{ transform:scale(1.05); }
.pa-mic:active{ transform:scale(.96); }
.pa-mic-icon{ font-size:40px; }

/* Đang ghi âm: nhấp nháy + sóng */
.pa-mic.recording{
  background:linear-gradient(145deg,#f0504f,#c02020);
  box-shadow:0 8px 24px rgba(240,60,60,.5);
  animation:pa-pulse 1.2s ease-out infinite;
}
@keyframes pa-pulse{
  0%{   box-shadow:0 0 0 0 rgba(240,60,60,.55); }
  70%{  box-shadow:0 0 0 22px rgba(240,60,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,60,60,0); }
}
.pa-mic.disabled{ background:#33465e; box-shadow:none; cursor:not-allowed; opacity:.5; }
.pa-mic-label{ margin-top:12px; font-size:14px; color:#8fb0d0; }

/* Chuỗi nghe được */
.pa-heard{
  text-align:center;
  min-height:22px;
  margin-top:10px;
  font-size:15px;
  color:#cfe0f2;
}
.pa-heard b{ color:#fff; }

/* Vòng điểm */
.pa-score-ring{ text-align:center; margin:12px 0 4px; }
.pa-score-num{ font-size:40px; font-weight:800; line-height:1; }
.pa-score-pct{ font-size:12px; color:#8296b0; margin-top:2px; }
.pa-score-ring.good .pa-score-num{ color:#4ade80; }
.pa-score-ring.mid  .pa-score-num{ color:#f0c060; }
.pa-score-ring.bad  .pa-score-num{ color:#f87171; }

/* Nút hành động */
.pa-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.pa-retry{
  border:1px solid rgba(120,150,190,.4);
  background:rgba(20,45,78,.4);
  color:#cfe0f2;
  border-radius:10px;
  padding:11px 20px;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.pa-retry:hover{ background:rgba(40,80,130,.5); }

.pa-avg{ text-align:center; font-size:14px; color:#8fb0d0; margin:6px 0; }

@media (prefers-reduced-motion:reduce){
  .pa-mic.recording{ animation:none; }
}
@media (max-width:560px){
  .pa-word{ font-size:34px; }
}