/* ============================================================
   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. */
.listening-card .badge{
  font-size:14px !important;
  line-height:22px !important;
  font-weight:400 !important;
  color:#111 !important;
}

/* 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.
   margin-top:-1px để vạch xanh đè trùng lên vạch xám mờ (viền dưới của hàng
   Phần cuối) thay vì nằm cách ra 1 khoảng, nên chỉ còn 1 vạch xanh duy nhất. */
.listening-result-total{
  border-top:2px solid #145A32;
  margin-top:-1px;
}
.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;
}

/* ===== listening-compact-spacing ===== */
/* Thẻ Bài tập nghe: cùng khoảng cách chung với Flashcard/Trắc nghiệm/Gõ pinyin giữa các
   phần (Bài / ảnh đề / "Phần I" / thanh mp3 / các câu / dòng thông báo / nút). Dòng thông
   báo ("Bạn chưa chọn đủ đáp án...") chừa chỗ cố định nên nút không dịch khi nó hiện ra.
   Số câu mỗi phần khác nhau (2-4 câu) nên nút vẫn dịch theo số hàng câu — chủ ý. */
#app .card.listening-card{
  --listening-gap:24px;
  display:flex;
  flex-direction:column;
  gap:var(--listening-gap);
  min-height:0 !important;
  padding-top:var(--listening-gap);
  padding-bottom:var(--listening-gap);
}
#app .card.listening-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.listening-card .listening-doc-scroll,
#app .card.listening-card .listening-audio,
#app .card.listening-card .listening-answer-group,
#app .card.listening-card .quiz-next-action{
  align-self:center;
}
#app .card.listening-card .listening-noaudio{
  display:flex;
  align-items:center;
  justify-content:center;
  height:54px;
  width:100%;
  max-width:420px;
  align-self:center;
}
#app .card.listening-card #listeningFeedback{
  display:flex;
  align-items:center;
  justify-content:center;
  height:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  line-height:27px !important;
}
@media (max-width:600px){
  #app .card.listening-card{ --listening-gap:18px; }
  /* Câu "Bạn chưa chọn đủ đáp án cho tất cả các câu." dài hơn 1 dòng trên màn hẹp. */
  #app .card.listening-card #listeningFeedback{
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    line-height:21px !important;
  }
}

/* ===== lesson-listen-layout ===== */
/* Trang "Nghe bài học": nhãn Bài ở đầu thẻ, rồi 3 cặp (nhãn "Bài nghe N" + thanh audio riêng)
   xếp dọc. Khoảng cách giữa các phần dùng cùng cỡ chung với các thẻ khác (24px máy tính /
   18px điện thoại); trong mỗi cặp, nhãn sát thanh audio của nó hơn (một nửa) để dễ thấy
   nhãn nào đi với thanh nào. Nội dung cố định (3 cặp) nên thẻ không đổi chiều cao. */
#app .card.lesson-listen-card{
  --lesson-listen-gap:24px;
  --lesson-listen-inner:12px;
  display:flex;
  flex-direction:column;
  gap:var(--lesson-listen-gap);
  min-height:0 !important;
  padding-top:var(--lesson-listen-gap);
  padding-bottom:var(--lesson-listen-gap);
}
#app .card.lesson-listen-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.lesson-listen-card .lesson-listen-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--lesson-listen-inner);
}
#app .card.lesson-listen-card .listening-audio{
  margin:0 !important;
}
@media (max-width:600px){
  #app .card.lesson-listen-card{
    --lesson-listen-gap:18px;
    --lesson-listen-inner:9px;
  }
}