/* Vui Học Tiếng Trung v2.5.17 - Lightweight Listening Studio */
.modal-dialog.listening-studio-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-width: 1080px;
}

.listening-studio,
.listening-session,
.listening-summary,
.listening-loading,
.listening-empty {
  width: 100%;
  min-width: 0;
  color: #10213e;
}

.listening-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 1px solid #dbe8fb;
  border-radius: 24px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 55%, #f3f0ff 100%);
  overflow: hidden;
}

.listening-hero-copy { min-width: 0; }
.listening-kicker {
  display: inline-block;
  color: #087ed8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.listening-hero h2,
.listening-summary h2 {
  margin: 8px 0 8px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.12;
  color: #0f1d37;
}
.listening-hero p,
.listening-summary > p {
  margin: 0;
  max-width: 720px;
  color: #65738d;
  line-height: 1.65;
}
.listening-hero-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 34px rgba(35, 105, 180, .12);
  font-size: 52px;
}

.listening-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.listening-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  min-height: 150px;
  padding: 18px;
  text-align: left;
  border: 1px solid #dfe7f2;
  border-radius: 20px;
  background: #fff;
  color: #13223d;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.listening-mode-card:hover { transform: translateY(-2px); border-color: #8cc8fb; }
.listening-mode-card.active {
  border-color: #1688e8;
  box-shadow: 0 0 0 3px rgba(22, 136, 232, .1), 0 12px 28px rgba(40, 109, 180, .09);
  background: linear-gradient(180deg, #fff, #f7fbff);
}
.listening-mode-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf6ff;
  font-size: 24px;
}
.listening-mode-copy { display: block; min-width: 0; }
.listening-mode-copy strong { display: block; margin: 2px 0 7px; font-size: 17px; }
.listening-mode-copy small { display: block; color: #6d7990; line-height: 1.5; }
.listening-mode-badge {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f6ff;
  color: #2579c8;
  font-size: 12px;
  font-weight: 700;
}

.listening-setup-card {
  padding: 22px;
  border: 1px solid #e0e7f0;
  border-radius: 22px;
  background: #fff;
}
.listening-setting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.listening-setting-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.listening-setting-head strong { font-size: 15px; }
.listening-setting-head span { color: #7b879a; font-size: 12px; }
.listening-segmented {
  display: flex;
  gap: 7px;
  padding: 5px;
  border-radius: 15px;
  background: #f2f6fb;
  overflow-x: auto;
  scrollbar-width: none;
}
.listening-segmented::-webkit-scrollbar { display: none; }
.listening-segmented button,
.listening-speed-pills button {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #65728a;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.listening-segmented button.active,
.listening-speed-pills button.active {
  background: #fff;
  color: #087ed8;
  box-shadow: 0 3px 12px rgba(38, 75, 122, .1);
}
.listening-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #e5ebf2;
  border-radius: 16px;
  cursor: pointer;
}
.listening-switch-row > span { flex: 1; min-width: 0; }
.listening-switch-row strong,
.listening-switch-row small { display: block; }
.listening-switch-row small { margin-top: 3px; color: #7d889a; }
.listening-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.listening-switch-row i {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #d9e1eb;
  transition: background .2s ease;
}
.listening-switch-row i::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.listening-switch-row input:checked + i { background: #1688e8; }
.listening-switch-row input:checked + i::after { transform: translateX(22px); }
.listening-voice-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 2px 0;
  color: #718097;
  font-size: 13px;
}
.listening-start-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #087ed8, #2c74f0);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(25, 113, 218, .22);
}
.listening-start-button strong { font-size: 22px; }
.listening-local-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.listening-local-stats div,
.listening-summary-stats div {
  padding: 15px;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  background: #fbfcfe;
  text-align: center;
}
.listening-local-stats strong,
.listening-summary-stats strong { display: block; font-size: 22px; color: #14213a; }
.listening-local-stats span,
.listening-summary-stats span { color: #7a8699; font-size: 12px; }
.listening-note { margin: 13px 0 0; color: #7b8799; font-size: 12px; text-align: center; }
.listening-note kbd { padding: 2px 6px; border: 1px solid #d8e0ea; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #39465b; }

.listening-session-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.listening-back-button {
  width: 44px;
  height: 44px;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: #fff;
  color: #2d415d;
  font-size: 20px;
  cursor: pointer;
}
.listening-session-progress { min-width: 0; }
.listening-session-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.listening-session-progress strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listening-session-progress span { flex: 0 0 auto; color: #7a8799; font-size: 12px; }
.listening-progress-track { height: 7px; border-radius: 999px; background: #e8eef6; overflow: hidden; }
.listening-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d8ee8, #5b78ee); }
.listening-score-pill {
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #eef7ff;
  text-align: center;
}
.listening-score-pill strong,
.listening-score-pill span { display: block; }
.listening-score-pill strong { color: #087ed8; font-size: 19px; }
.listening-score-pill span { color: #718095; font-size: 10px; }
.listening-question-kicker {
  margin-bottom: 12px;
  color: #5e6c82;
  font-size: 14px;
  font-weight: 700;
}

.listening-audio-panel {
  padding: 18px;
  border: 1px solid #d9e9f8;
  border-radius: 22px;
  background: linear-gradient(135deg, #f8fcff, #eef7ff);
}
.listening-play-button {
  display: grid;
  grid-template-columns: 58px minmax(100px, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 82px;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #14223b;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(38, 94, 146, .08);
}
.listening-play-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #088ae4, #386df0);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(23, 119, 222, .25);
}
.listening-play-copy { text-align: right; }
.listening-play-copy strong,
.listening-play-copy small { display: block; }
.listening-play-copy strong { font-size: 17px; }
.listening-play-copy small { margin-top: 4px; color: #8490a2; font-size: 11px; }
.listening-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
}
.listening-wave i {
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: #99c9ef;
}
.listening-wave i:nth-child(2n) { height: 18px; }
.listening-wave i:nth-child(3n) { height: 27px; }
.listening-play-button.is-playing .listening-wave i { animation: listeningWave .72s ease-in-out infinite alternate; }
.listening-play-button.is-playing .listening-wave i:nth-child(2) { animation-delay: -.45s; }
.listening-play-button.is-playing .listening-wave i:nth-child(3) { animation-delay: -.2s; }
.listening-play-button.is-playing .listening-wave i:nth-child(4) { animation-delay: -.6s; }
.listening-play-button.is-playing .listening-play-icon { transform: scale(.95); }
@keyframes listeningWave { from { height: 7px; opacity: .55; } to { height: 31px; opacity: 1; } }
.listening-inline-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: #718096;
  font-size: 12px;
}
.listening-speed-pills { display: flex; gap: 4px; }
.listening-speed-pills button { min-height: 34px; padding: 5px 9px; border: 1px solid transparent; background: rgba(255,255,255,.7); }

.listening-answer-panel {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #e1e7ef;
  border-radius: 22px;
  background: #fff;
}
.listening-answer-panel h3 { margin: 0 0 14px; font-size: 18px; }
.listening-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.listening-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 14px;
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background: #fff;
  color: #1a2a45;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.listening-option:hover:not(:disabled) { transform: translateY(-1px); border-color: #8cc7f3; background: #f8fcff; }
.listening-option > span {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f0f4f9;
  color: #6a778c;
  font-weight: 800;
}
.listening-option strong { min-width: 0; overflow-wrap: anywhere; }
.listening-option.selected { border-color: #5f9ed8; }
.listening-option.correct { border-color: #41b883; background: #f0fbf6; }
.listening-option.correct > span { background: #41b883; color: #fff; }
.listening-option.wrong { border-color: #e86b6b; background: #fff4f4; }
.listening-option.wrong > span { background: #e86b6b; color: #fff; }
.listening-option:disabled { cursor: default; }
.listening-checking { margin-top: 12px; padding: 12px; color: #68809c; text-align: center; }

.listening-result-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 17px;
  border: 1px solid #dfe8ee;
  background: #f9fbfd;
}
.listening-result-card.correct { border-color: #bfe8d5; background: #f2fbf7; }
.listening-result-card.wrong { border-color: #f1c7c7; background: #fff7f7; }
.listening-result-title { display: flex; align-items: center; gap: 10px; }
.listening-result-title > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dff5ea; color: #22875f; font-weight: 900; }
.listening-result-card.wrong .listening-result-title > span { background: #fee5e5; color: #bd4141; }
.listening-transcript,
.listening-hidden-transcript {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,.8);
}
.listening-transcript span,
.listening-hidden-transcript span,
.listening-compare-grid span,
.listening-speech-result span { color: #7b8798; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.listening-transcript strong,
.listening-hidden-transcript strong { font-size: 22px; color: #10203b; overflow-wrap: anywhere; }
.listening-result-card p { margin: 10px 0 0; color: #68768a; }
.listening-next-button,
.listening-submit-button,
.listening-mic-button {
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-radius: 13px;
  background: #147fdc;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.listening-next-button { display: block; width: 100%; margin-top: 14px; }

.listening-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.listening-panel-heading h3 { margin-bottom: 5px; }
.listening-panel-heading p { margin: 0; color: #7a8798; line-height: 1.5; font-size: 13px; }
.listening-soft-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #eef6ff; color: #2d78bd; font-size: 11px; font-weight: 800; }
.listening-dictation-form textarea {
  width: 100%;
  min-height: 110px;
  padding: 15px;
  border: 1px solid #d9e2ec;
  border-radius: 15px;
  resize: vertical;
  font: inherit;
  font-size: 19px;
  color: #11223d;
  outline: none;
}
.listening-dictation-form textarea:focus { border-color: #3c95df; box-shadow: 0 0 0 3px rgba(30, 139, 222, .1); }
.listening-form-actions,
.listening-shadow-actions,
.listening-summary-actions { display: flex; gap: 10px; margin-top: 12px; }
.listening-form-actions { justify-content: flex-end; }
.listening-ghost-button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #d9e2ed;
  border-radius: 13px;
  background: #fff;
  color: #34506e;
  font-weight: 700;
  cursor: pointer;
}
.listening-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.listening-compare-grid div { padding: 12px; border-radius: 13px; background: rgba(255,255,255,.8); }
.listening-compare-grid strong { display: block; margin-top: 5px; font-size: 18px; overflow-wrap: anywhere; }

.listening-shadow-actions { flex-wrap: wrap; }
.listening-mic-button { flex: 1; }
.listening-mic-button:disabled { background: #aab5c3; cursor: not-allowed; }
.listening-hidden-transcript { margin-top: 14px; background: #f5f7fa; }
.listening-hidden-transcript.revealed { background: #eef8ff; }
.listening-speech-status,
.listening-speech-result { margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: #f6f8fb; color: #66768b; }
.listening-speech-result strong,
.listening-speech-result small { display: block; margin-top: 4px; }
.listening-speech-result strong { color: #162942; font-size: 18px; }
.listening-repeat-box {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid #e0e7ef;
  border-radius: 15px;
}
.listening-repeat-box span { color: #778397; }
.listening-repeat-box button { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 11px; background: #eef7ff; color: #1779c8; font-weight: 800; cursor: pointer; }

.listening-loading,
.listening-empty,
.listening-summary { padding: 42px 20px; text-align: center; }
.listening-loading-icon,
.listening-summary-icon,
.listening-empty > span { display: block; margin-bottom: 12px; font-size: 54px; }
.listening-loading h3,
.listening-empty h3 { margin: 0 0 8px; color: #14213a; }
.listening-loading p,
.listening-empty p { margin: 0 auto 18px; max-width: 600px; color: #758196; line-height: 1.6; }
.listening-loading-bar { width: min(320px, 80%); height: 8px; margin: 20px auto 0; border-radius: 999px; background: #e8eef5; overflow: hidden; }
.listening-loading-bar i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #1789e4; animation: listeningLoad 1s ease-in-out infinite alternate; }
@keyframes listeningLoad { from { transform: translateX(-15%); } to { transform: translateX(150%); } }
.listening-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 620px; margin: 22px auto; }
.listening-review-list { max-width: 720px; margin: 18px auto; padding: 16px; border: 1px solid #e2e8f0; border-radius: 18px; text-align: left; }
.listening-review-list h3 { margin: 0 0 10px; }
.listening-review-list > div { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #edf0f4; }
.listening-review-list > div:first-of-type { border-top: 0; }
.listening-review-list button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef7ff; color: #117bcf; cursor: pointer; }
.listening-review-list span { font-size: 18px; font-weight: 800; }
.listening-review-list small { color: #738095; overflow-wrap: anywhere; }
.listening-summary-actions { justify-content: center; flex-wrap: wrap; }
.listening-summary-actions .listening-start-button { width: auto; min-width: 180px; margin-top: 0; }

@media (max-width: 760px) {
  .modal-dialog.listening-studio-dialog {
    width: 100%;
    max-width: none;
  }
  .listening-hero { padding: 20px; border-radius: 20px; }
  .listening-hero-icon { width: 72px; height: 72px; border-radius: 22px; font-size: 38px; }
  .listening-mode-grid { grid-template-columns: 1fr; gap: 10px; }
  .listening-mode-card { min-height: auto; grid-template-columns: 44px minmax(0, 1fr) auto; padding: 14px; }
  .listening-mode-icon { width: 44px; height: 44px; }
  .listening-mode-badge { grid-column: auto; align-self: center; }
  .listening-setting-grid { grid-template-columns: 1fr; }
  .listening-setup-card { padding: 16px; }
  .listening-session-top { grid-template-columns: 42px minmax(0, 1fr); }
  .listening-score-pill { display: none; }
  .listening-play-button { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .listening-wave { grid-column: 1 / -1; order: 3; height: 28px; }
  .listening-play-copy { text-align: left; }
  .listening-inline-controls { align-items: flex-start; flex-direction: column; }
  .listening-speed-pills { width: 100%; overflow-x: auto; }
  .listening-speed-pills button { flex: 1 0 auto; }
  .listening-option-grid { grid-template-columns: 1fr; }
  .listening-answer-panel { padding: 16px; }
  .listening-compare-grid { grid-template-columns: 1fr; }
  .listening-repeat-box { grid-template-columns: 1fr auto; }
  .listening-repeat-box button { grid-column: 1 / -1; width: 100%; }
  .listening-summary-stats,
  .listening-local-stats { gap: 7px; }
  .listening-summary-stats div,
  .listening-local-stats div { padding: 12px 7px; }
  .listening-review-list > div { grid-template-columns: 38px minmax(0, 1fr); }
  .listening-review-list small { grid-column: 2; }
}

@media (max-width: 480px) {
  .listening-hero { align-items: flex-start; }
  .listening-hero-icon { width: 58px; height: 58px; font-size: 31px; }
  .listening-hero h2 { font-size: 24px; }
  .listening-mode-card { grid-template-columns: 42px minmax(0, 1fr); }
  .listening-mode-badge { grid-column: 2; justify-self: start; }
  .listening-setting-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .listening-levels button { min-width: 66px; }
  .listening-switch-row { align-items: center; }
  .listening-form-actions,
  .listening-shadow-actions { flex-direction: column; }
  .listening-form-actions > *,
  .listening-shadow-actions > * { width: 100%; }
  .listening-summary-actions { flex-direction: column; }
  .listening-summary-actions > *,
  .listening-summary-actions .listening-start-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .listening-play-button.is-playing .listening-wave i,
  .listening-loading-bar i { animation: none !important; }
  .listening-mode-card { transition: none; }
}

/* v2.5.17 — nội dung đa dạng + HSK1 chấp nhận Pinyin */
.listening-content-mix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(14, 165, 233, .16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14, 165, 233, .07), rgba(59, 130, 246, .035));
  margin: 14px 0;
}
.listening-content-mix > span { font-weight: 800; color: #0369a1; }
.listening-content-mix > strong { color: #0f172a; }
.listening-content-mix > small { grid-column: 1 / -1; color: #64748b; line-height: 1.5; }

.listening-question-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.listening-kind-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  background: #eef2ff;
  color: #4338ca;
}
.listening-kind-badge.dialogue { background: #ecfdf5; color: #047857; }
.listening-kind-badge.word { background: #fff7ed; color: #c2410c; }
.listening-kind-badge.sentence { background: #eff6ff; color: #1d4ed8; }

.listening-transcript strong,
.listening-compare-grid strong,
.listening-hidden-transcript strong {
  white-space: normal;
  line-height: 1.65;
}
.listening-transcript small,
.listening-compare-grid small {
  display: block;
  margin-top: 6px;
  color: #0284c7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.listening-pinyin-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e40af;
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 640px) {
  .listening-content-mix {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px 13px;
  }
  .listening-content-mix > small { grid-column: auto; }
  .listening-question-kicker { gap: 7px; }
  .listening-kind-badge { min-height: 24px; font-size: 11px; }
}