/* ---------- Bài nghe (Listening) ---------- */
.lis { background: linear-gradient(135deg, #E8F7F5, #EAF2FF); border: 3px solid #BFEDE8; }
.lis-ic { font-size: 34px; line-height: 1; }
.lis-main { display: flex; gap: 14px; align-items: center; }
.lis-play {
  width: 72px; height: 72px; border-radius: 50%; border: 0; flex: none; cursor: pointer;
  background: var(--teal); color: #fff; font-size: 30px; box-shadow: 0 5px 0 var(--teal-d);
}
.lis-play:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--teal-d); }
.lis-bar { height: 14px; background: #fff; border-radius: 999px; overflow: hidden; cursor: pointer; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); }
.lis-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); border-radius: 999px; transition: width .2s linear; }
.lis-hint { background: #E3F7F4; color: var(--teal-d); }
.lis-ask { background: #FFF8E1; border: 3px dashed #F3D9A4; }
.lis-ev { background: #E9FBF8; border-radius: 12px; padding: 10px 12px; }
.lis-line { font-style: italic; font-weight: 700; margin: 4px 0; }
.lis-script { white-space: pre-wrap; font-size: 15px; }
.skill-chip {
  border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; cursor: pointer;
  background: #fff; box-shadow: 0 3px 0 rgba(43,45,66,.10); flex: none; white-space: nowrap;
}
.skill-tag { display: inline-block; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.skill-tag.l { background: #D7F5F1; color: var(--teal-d); }
.skill-tag.r { background: #F1ECFF; color: var(--purple-d); }