/* ============================================================
   Luyện nghe — hiện nguyên trang PDF gốc (ảnh) + audio; người học
   chỉ cần chọn A/B/C/D cho từng câu bên dưới. Nạp sau cùng, không
   đụng khung .card/.option sẵn có của Trắc nghiệm.
   ============================================================ */

/* Man "Hoan thanh!" cua Luyen nghe: dung chung dung 1 rule voi
   Flashcard/Go pinyin/Trac nghiem (patches.css, #app > .quiz-completion-card
   .quiz-completion-title), khong con override rieng de dam bao dong bo
   tuyet doi ve size/line-height. */

/* Tiêu đề bài ở Luyện nghe đồng bộ với các phần khác; chỉ tách "Phần ..."
   xuống dòng cho dễ nhìn. */
.listening-card .badge{
  font-size:14px !important;
  line-height:22px !important;
  font-weight:400 !important;
  color:#111 !important;
}

.listening-card .badge .listening-badge-part{
  display:block;
}

/* Màn "Hoàn thành" — 2 nút "Làm lại"/"Bài tiếp theo" giới hạn 520px giống
   .flash-nav-actions (Flashcard), thay vì kéo dài hết bề ngang thẻ như
   .actions mặc định (patches.css) đang làm. */
.listening-finish-actions{
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.listening-audio{
  display:block;
  width:100%;
  max-width:420px;
  margin:16px auto 8px;
}
.listening-noaudio{
  color:#b94a48;
  margin:14px 0 4px;
}

/* Nguyên trang đề bài, chụp từ sách gốc */
.listening-page{
  display:block;
  width:100%;
  max-width:560px;
  margin:0 auto 12px;
  border:1px solid #d8dee9;
  border-radius:10px;
}

.listening-page:last-child{
  margin-bottom:0;
}

.listening-doc-scroll{
  width:100%;
  max-width:600px;
  height:420px;
  margin:16px auto 0;
  padding:12px;
  border:1px solid #d8dee9;
  border-radius:12px;
  background:#f8faf9;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Mỗi câu 1 hàng gọn: "Câu N" bên trái, các nút A/B/C/D nhỏ bên phải —
   giống layout đề gốc, thay vì nhãn câu và nút xếp chồng chiếm nhiều chỗ. */
.listening-answer-group{
  width:fit-content;
  max-width:100%;
  margin:16px auto 14px;
}

.listening-question{
  margin-top:10px;
  max-width:none;
  margin-left:0;
  margin-right:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.listening-question + .listening-question{ margin-top:10px; }
.listening-qno{
  font-weight:700;
  color:#145A32;
  white-space:nowrap;
  min-width:58px;
}
.listening-options{
  display:flex;
  gap:8px;
  margin:0 !important;
  max-width:none !important;
}
.listening-options .option{
  width:36px;
  height:36px;
  min-width:0;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:8px;
}

@media (max-width:640px){
  .listening-doc-scroll{ height:360px; padding:10px; }
  .listening-answer-group{ margin:12px auto 12px; }
  .listening-question{ margin-top:8px; max-width:none; gap:6px; }
  .listening-question + .listening-question{ margin-top:8px; }
  .listening-qno{ min-width:52px; }
  .listening-options{ gap:6px; }
  .listening-options .option{ width:34px; height:34px; }
}

/* ---- Màn kết quả (Hoàn thành) ---- */
.listening-result-breakdown{
  max-width:340px;
  margin:26px auto 0;
  text-align:left;
  border-top:1px solid #e5eae7;
}
.listening-result-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 4px;
  border-bottom:1px solid #e5eae7;
  font-size:15px;
}
.listening-result-part{ color:#3c463f; }
.listening-result-count{ font-weight:700; color:#145A32; }

/* Hàng "Tổng" — thay cho cục tròn điểm số cũ. Đậm hơn, tách khỏi các hàng
   Phần bằng viền trên dày hơn để dễ nhận ra đây là dòng tổng kết. */
.listening-result-total{
  border-top:2px solid #145A32;
  margin-top:4px;
}
.listening-result-total .listening-result-part{
  font-weight:700;
  color:#145A32;
}
.listening-result-total .listening-result-count{
  font-size:16px;
}

/* Đáp án đang chọn (chưa bấm Kiểm tra) — phân biệt với .correct/.wrong
   (chỉ hiện sau khi kiểm tra). */
.listening-options .option.selected{
  background:#145A32 !important;
  color:#fff !important;
  border-color:#145A32 !important;
}