/* Luyện nghe IELTS — một phần thi, chấm tại chỗ.
 *
 * Mọi lớp mang tiền tố `bv-ielts` và nằm dưới `.bv-ielts` để không rỉ ra phần
 * Bootstrap còn lại của theme. Sắc nhấn là xanh chính của site (#2f6fed), giống
 * khoá Listening và Reading — ba khoá nghe/đọc nhìn cùng một họ. */

.bv-ielts {
  --bvi: #2f6fed;
  --bvi-soft: #eef4ff;
  --bvi-ink: #1e3a8a;
  --bvi-line: #e2e8f0;
  --bvi-mute: #64748b;
  --bvi-ok: #15803d;
  --bvi-ok-soft: #ecfdf3;
  --bvi-bad: #dc2626;
  --bvi-bad-soft: #fef2f2;
  --bvi-navh: 64px;
  --bvi-barh: 96px;
}

.bv-ielts__wrap { width: 100%; }

/* Breadcrumb + tiêu đề nằm trong dải .hero.bv-course-hero dùng chung của theme
 * (như Reading/Listening), nên ở đây không định kiểu lại. */

.bv-ielts__back {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
  font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--bvi);
  border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 999px; padding: .4rem .9rem;
  background: var(--soft, rgba(15,23,42,.04)); transition: background .15s ease, border-color .15s ease;
}
.bv-ielts__back:hover { background: rgba(47,111,237,.1); border-color: rgba(47,111,237,.4); }
.bv-ielts__back i { transition: transform .15s ease; }
.bv-ielts__back:hover i { transform: translateX(-2px); }

/* ------------------------------------------------------------------ đầu bài */
.bv-ielts__head { margin-bottom: 1.2rem; }
.bv-ielts__badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
.bv-ielts__part {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  padding: .25rem .7rem; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, var(--bvi), #00b8a9);
}
.bv-ielts__subtitle { margin: 0; color: var(--bvi-mute); font-size: .95rem; }
.bv-ielts__subtitle [lang="en"] { font-style: italic; }
.bv-ielts__partdesc { margin: .35rem 0 0; font-size: .88rem; color: var(--bvi-mute); }
.bv-ielts__desc { margin-top: .7rem; color: var(--bvi-mute); font-size: .93rem; }
.bv-ielts__desc p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- khối gập: cách làm, từ */
.bv-ielts__panel {
  border: 1px solid var(--bvi-line); border-radius: 14px; background: #fff;
  padding: .2rem 1rem; margin-bottom: 1rem;
}
.bv-ielts__panel > summary {
  cursor: pointer; list-style: none; padding: .7rem 0;
  font-weight: 700; display: flex; align-items: center; gap: .5rem;
}
.bv-ielts__panel > summary::-webkit-details-marker { display: none; }
.bv-ielts__panel > summary::after {
  content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto;
  font-weight: 400; color: var(--bvi-mute); transition: transform .15s ease;
}
.bv-ielts__panel[open] > summary::after { transform: rotate(180deg); }
.bv-ielts__panel > summary i { color: var(--bvi); }
.bv-ielts__panel[open] { padding-bottom: 1rem; }

.bv-ielts__steps { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .93rem; }
.bv-ielts__steps li { margin-bottom: .35rem; }
.bv-ielts__tips {
  list-style: none; margin: 0; padding: .75rem .9rem; border-radius: 10px;
  background: var(--bvi-soft); font-size: .9rem;
}
.bv-ielts__tips li + li { margin-top: .4rem; }
.bv-ielts__tips:empty { display: none; }

.bv-ielts__count {
  font-size: .75rem; font-weight: 700; color: var(--bvi);
  background: var(--bvi-soft); border-radius: 999px; padding: .05rem .5rem;
}
.bv-ielts__hint { font-size: .85rem; color: var(--bvi-mute); margin: 0 0 .75rem; }
.bv-ielts__vlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.bv-ielts__vitem { border: 1px solid var(--bvi-line); border-radius: 10px; padding: .6rem .75rem; }
.bv-ielts__vtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
.bv-ielts__vterm { font-size: 1rem; }
.bv-ielts__vipa { font-size: .82rem; color: var(--bvi-mute); }
.bv-ielts__vtype { font-size: .72rem; font-weight: 700; color: var(--bvi-ink); background: var(--bvi-soft); border-radius: 4px; padding: 0 .35rem; }
.bv-ielts__say {
  margin-left: auto; border: 0; background: none; color: var(--bvi); padding: 0 .2rem;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.bv-ielts__vmean { margin: .3rem 0 0; font-size: .9rem; }
.bv-ielts__vex { margin: .25rem 0 0; font-size: .82rem; color: var(--bvi-mute); font-style: italic; }

/* ------------------------------------------- thanh nghe, dính dưới navbar */
.bv-ielts__bar {
  position: sticky; top: calc(var(--bvi-navh) + .5rem); z-index: 6;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border: 1px solid var(--bvi-line); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  padding: .65rem .8rem; margin-bottom: 1.2rem;
}
.bv-ielts__audio { display: block; width: 100%; height: 40px; }
.bv-ielts__noaudio { margin: 0; font-size: .9rem; color: var(--bvi-bad); }
.bv-ielts__barrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .5rem; }
.bv-ielts__speed { display: flex; gap: .3rem; }
.bv-ielts__chip {
  border: 1px solid var(--bvi-line); background: #fff; border-radius: 999px;
  font-size: .78rem; font-weight: 600; padding: .2rem .6rem; color: var(--ink, #0f172a); cursor: pointer;
}
.bv-ielts__chip.is-on { background: var(--bvi); border-color: var(--bvi); color: #fff; }

.bv-ielts__pal { display: flex; flex-wrap: wrap; gap: .3rem; }
.bv-ielts__palq {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; border-radius: 8px;
  border: 1px solid var(--bvi-line); background: #fff;
  font-size: .8rem; font-weight: 700; color: var(--ink, #0f172a); text-decoration: none;
}
.bv-ielts__palq:hover { border-color: var(--bvi); color: var(--bvi); }
.bv-ielts__palq.is-done { background: var(--bvi-soft); border-color: rgba(47,111,237,.45); color: var(--bvi-ink); }
.bv-ielts__palq.is-ok { background: var(--bvi-ok); border-color: var(--bvi-ok); color: #fff; }
.bv-ielts__palq.is-bad { background: var(--bvi-bad); border-color: var(--bvi-bad); color: #fff; }
.bv-ielts__palq.is-void { border-style: dashed; color: var(--bvi-mute); background: transparent; }

/* --------------------------------------------------------------- nhóm câu */
.bv-ielts__part-sec {
  border: 1px solid var(--bvi-line); border-radius: 14px; background: #fff;
  padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bv-ielts__part-sec.is-live { border-color: rgba(47,111,237,.55); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.bv-ielts__shead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .45rem; }
.bv-ielts__h2 { margin: 0; font-size: 1.12rem; font-weight: 800; }
.bv-ielts__seek {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid rgba(47,111,237,.35); background: var(--bvi-soft); color: var(--bvi-ink);
  border-radius: 999px; padding: .22rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.bv-ielts__seek span { font-variant-numeric: tabular-nums; color: var(--bvi-mute); font-weight: 600; }
.bv-ielts__seek:hover { background: var(--bvi); border-color: var(--bvi); color: #fff; }
.bv-ielts__seek:hover span { color: rgba(255,255,255,.85); }
.bv-ielts__ins { margin: 0; font-style: italic; }
.bv-ielts__insvi { margin: .15rem 0 0; font-size: .88rem; color: var(--bvi-mute); }
.bv-ielts__limit {
  display: inline-flex; align-items: center; gap: .35rem; margin: .5rem 0 0;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: .15rem .5rem;
}

/* Cuộn tới một câu (bảng số câu) không được để navbar + thanh nghe che mất. */
.bv-ielts [data-q-wrap] { scroll-margin-top: calc(var(--bvi-navh) + var(--bvi-barh) + 1.5rem); }

/* ví dụ */
.bv-ielts__example {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: 10px;
  background: #f8fafc; border: 1px dashed #cbd5e1;
}
.bv-ielts__exlbl { margin: 0 0 .2rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bvi-mute); }
.bv-ielts__exq { margin: 0 0 .4rem; font-weight: 600; }
.bv-ielts__exopts { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); font-size: .92rem; }
.bv-ielts__exopts li { display: flex; align-items: center; gap: .45rem; color: var(--bvi-mute); }
.bv-ielts__exopts li.is-answer { color: var(--bvi-ok); font-weight: 700; }
.bv-ielts__exopts li.is-answer .bv-ielts__key { background: var(--bvi-ok); border-color: var(--bvi-ok); color: #fff; }

/* trắc nghiệm */
.bv-ielts__q { border: 0; margin: 1.1rem 0 0; padding: 0; min-width: 0; }
.bv-ielts__qhead { display: flex; gap: .55rem; align-items: flex-start; float: none; width: 100%; margin: 0 0 .55rem; font-size: 1rem; font-weight: 600; }
.bv-ielts__qn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--bvi); color: #fff; font-size: .82rem; font-weight: 800;
}
.bv-ielts__qtext { padding-top: .12rem; }
.bv-ielts__img { display: block; max-width: 100%; height: auto; margin: 0 0 .6rem; border-radius: 8px; border: 1px solid var(--bvi-line); }
.bv-ielts__lost {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px dashed #f59e0b; background: #fffbeb; color: #92400e;
  border-radius: 10px; padding: .7rem .85rem; margin-bottom: .6rem; font-size: .88rem;
}
.bv-ielts__lost i { font-size: 1.4rem; line-height: 1; }
.bv-ielts__lost--soft { border-color: #cbd5e1; background: #f8fafc; color: var(--bvi-mute); }

.bv-ielts__opts { display: grid; gap: .4rem; }
.bv-ielts__q.is-pic .bv-ielts__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 26rem; }
/* Có ảnh: khung co theo ảnh, hàng nút chia đều đúng số phương án → mỗi nút dưới hình của nó. */
.bv-ielts__pic { display: inline-flex; flex-direction: column; max-width: 100%; vertical-align: top; }
.bv-ielts__pic .bv-ielts__img { margin-bottom: .5rem; }
.bv-ielts__q.is-pic .bv-ielts__pic .bv-ielts__opts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); max-width: none; }
.bv-ielts__opt {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  border: 1px solid var(--bvi-line); border-radius: 10px; padding: .5rem .7rem;
  background: #fff; transition: border-color .15s ease, background .15s ease;
}
.bv-ielts__q.is-pic .bv-ielts__opt { justify-content: center; padding: .45rem; }
.bv-ielts__opt:hover { border-color: rgba(47,111,237,.5); }
.bv-ielts__opt input { position: absolute; opacity: 0; pointer-events: none; }
.bv-ielts__key {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1px solid #cbd5e1;
  font-size: .82rem; font-weight: 800; color: var(--ink, #0f172a); background: #fff;
}
.bv-ielts__opt:has(input:checked) { border-color: var(--bvi); background: var(--bvi-soft); }
.bv-ielts__opt:has(input:checked) .bv-ielts__key { background: var(--bvi); border-color: var(--bvi); color: #fff; }
.bv-ielts__opt:has(input:focus-visible) { outline: 2px solid var(--bvi); outline-offset: 2px; }
.bv-ielts__q.is-void .bv-ielts__opt { cursor: not-allowed; opacity: .5; }

/* sau khi chấm */
.bv-ielts__opt.is-key { border-color: var(--bvi-ok); background: var(--bvi-ok-soft); }
.bv-ielts__opt.is-key .bv-ielts__key { background: var(--bvi-ok); border-color: var(--bvi-ok); color: #fff; }
.bv-ielts__opt.is-wrong { border-color: var(--bvi-bad); background: var(--bvi-bad-soft); }
.bv-ielts__opt.is-wrong .bv-ielts__key { background: var(--bvi-bad); border-color: var(--bvi-bad); color: #fff; }
.bv-ielts.is-graded .bv-ielts__opt { cursor: default; }

.bv-ielts__markline { margin: .35rem 0 0; min-height: 0; }
.bv-ielts__mark { font-size: .85rem; font-weight: 700; }
.bv-ielts__mark:empty { display: none; }
.is-ok > .bv-ielts__markline .bv-ielts__mark, .bv-ielts__gap.is-ok .bv-ielts__mark { color: var(--bvi-ok); }
.is-bad > .bv-ielts__markline .bv-ielts__mark, .bv-ielts__gap.is-bad .bv-ielts__mark { color: var(--bvi-bad); }
.is-shown > .bv-ielts__markline .bv-ielts__mark, .bv-ielts__gap.is-shown .bv-ielts__mark { color: var(--bvi-ok); }

/* bảng điền (form) */
.bv-ielts__tablewrap { margin-top: .9rem; overflow-x: auto; }
.bv-ielts__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bv-ielts__table caption {
  caption-side: top; text-align: center; font-weight: 800; letter-spacing: .04em;
  color: var(--ink, #0f172a); padding: .5rem; background: #f8fafc;
  border: 1px solid var(--bvi-line); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.bv-ielts__table td { border: 1px solid var(--bvi-line); padding: .55rem .7rem; vertical-align: middle; line-height: 2.1; }
.bv-ielts__table td:first-child:not([colspan]) { width: 32%; color: var(--bvi-mute); font-weight: 600; }

/* ô trống */
.bv-ielts__gap { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; vertical-align: middle; line-height: 1.4; }
.bv-ielts__gapn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; border-radius: 6px;
  background: var(--bvi); color: #fff; font-size: .75rem; font-weight: 800; margin: 0;
}
.bv-ielts__gapin {
  width: 10rem; max-width: 100%; border: 1px solid #94a3b8; border-radius: 8px;
  padding: .3rem .55rem; font-size: .95rem; background: #fff; color: var(--ink, #0f172a);
}
.bv-ielts__gapin:focus { outline: none; border-color: var(--bvi); box-shadow: 0 0 0 3px rgba(47,111,237,.18); }
.bv-ielts__gap.is-ok .bv-ielts__gapin { border-color: var(--bvi-ok); background: var(--bvi-ok-soft); }
.bv-ielts__gap.is-bad .bv-ielts__gapin { border-color: var(--bvi-bad); background: var(--bvi-bad-soft); }
.bv-ielts__gap.is-shown .bv-ielts__gapin { border-color: var(--bvi-ok); }

/* ô chọn chữ cái (nối thông tin, ghi nhãn bản đồ) */
.bv-ielts__gapsel {
  min-width: 4.2rem; border: 1px solid #94a3b8; border-radius: 8px;
  padding: .28rem .45rem; font-size: .95rem; font-weight: 700; background: #fff; color: var(--ink, #0f172a);
}
.bv-ielts__gapsel:focus { outline: none; border-color: var(--bvi); box-shadow: 0 0 0 3px rgba(47,111,237,.18); }
.bv-ielts__gap.is-ok .bv-ielts__gapsel { border-color: var(--bvi-ok); background: var(--bvi-ok-soft); }
.bv-ielts__gap.is-bad .bv-ielts__gapsel { border-color: var(--bvi-bad); background: var(--bvi-bad-soft); }
.bv-ielts__gap.is-void { opacity: .55; }

/* chọn nhiều đáp án */
.bv-ielts__qn.is-range { width: auto; min-width: 1.7rem; padding: 0 .5rem; border-radius: 999px; }
.bv-ielts__pickhint { margin: -.25rem 0 .55rem 2.25rem; font-size: .82rem; color: var(--bvi-mute); }
.bv-ielts__opt:has(input[type="checkbox"]:checked) { border-color: var(--bvi); background: var(--bvi-soft); }
.bv-ielts__opt:has(input[type="checkbox"]:checked) .bv-ielts__key { background: var(--bvi); border-color: var(--bvi); color: #fff; }
.bv-ielts__opt.is-example { opacity: .7; cursor: default; border-style: dashed; }
.bv-ielts__extag {
  margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bvi-mute); background: #f1f5f9; border-radius: 4px; padding: .05rem .4rem;
}

/* tiêu đề phụ, ảnh sơ đồ, mũi tên quy trình */
.bv-ielts__sub { margin: 1.1rem 0 .3rem; font-size: 1rem; font-weight: 800; color: var(--ink, #0f172a); }
.bv-ielts__fig { margin: .9rem 0 .4rem; }
.bv-ielts__fig .bv-ielts__img, .bv-ielts__figwrap .bv-ielts__img { margin: 0 auto .5rem; }
.bv-ielts__arrow { text-align: center; color: var(--bvi-mute); font-size: 1.2rem; line-height: 1; margin: .1rem 0; }
.bv-ielts__part-sec > .bv-ielts__lost { margin-top: .9rem; }

/* khối hướng dẫn (bài dạng Tips) */
.bv-ielts__guide {
  margin-top: 1.2rem; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; padding: .1rem 1rem;
}
.bv-ielts__guide > summary { cursor: pointer; padding: .7rem 0; font-weight: 700; color: var(--bvi-ink); }
.bv-ielts__guide > summary small { display: block; font-weight: 500; color: var(--bvi-mute); margin-top: .1rem; }
.bv-ielts__guide[open] { padding-bottom: .9rem; }
.bv-ielts__guidebody .bv-ielts__note { font-weight: 400; margin: .45rem 0 0; font-size: .92rem; }

.bv-ielts__lines { margin-top: .8rem; }
.bv-ielts__lines p { margin: 0 0 .5rem; line-height: 2.1; }
.bv-ielts__note { margin: .9rem 0 0; font-weight: 600; }

/* ------------------------------------------------------------- nộp & kết quả */
.bv-ielts__submit {
  border: 1px solid var(--bvi-line); border-radius: 14px; background: #fff;
  padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.bv-ielts__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.bv-ielts__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--bvi-line); background: #fff; color: var(--ink, #0f172a);
  border-radius: 10px; padding: .55rem 1rem; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.bv-ielts__btn:hover { border-color: var(--bvi); color: var(--bvi); }
.bv-ielts__btn--go { background: var(--bvi); border-color: var(--bvi); color: #fff; }
.bv-ielts__btn--go:hover { background: #1f5ad6; color: #fff; }
.bv-ielts.is-graded #bviSubmit, .bv-ielts.is-graded #bviReveal { opacity: .45; pointer-events: none; }
.bv-ielts__answered { margin: .6rem 0 0; font-size: .85rem; color: var(--bvi-mute); }

.bv-ielts__result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bvi-line); }
.bv-ielts__score { display: flex; align-items: baseline; gap: .3rem; font-size: 1.1rem; color: var(--bvi-mute); }
.bv-ielts__score strong { font-size: 2.2rem; line-height: 1; color: var(--ink, #0f172a); }
.bv-ielts__score span {
  margin-left: .6rem; font-size: .85rem; font-weight: 800; color: var(--bvi);
  background: var(--bvi-soft); border-radius: 999px; padding: .1rem .55rem;
}
.bv-ielts__verdict { margin: .5rem 0 0; font-weight: 600; }
.bv-ielts__voidnote { margin: .35rem 0 0; font-size: .85rem; color: #92400e; }
.bv-ielts__wrong { margin: .7rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.bv-ielts__wrong li { margin-bottom: .25rem; }
.bv-ielts__ru { text-decoration: line-through; color: var(--bvi-bad); }
.bv-ielts__hint2, .bv-ielts__wait, .bv-ielts__revealed { margin: .7rem 0 0; font-size: .85rem; color: var(--bvi-mute); }
.bv-ielts__err { margin: 0; color: var(--bvi-bad); font-weight: 600; }

/* --------------------------------------------------------------- màn hẹp */
@media (max-width: 575.98px) {
  .bv-ielts__part-sec, .bv-ielts__submit { padding: .85rem .8rem; }
  .bv-ielts__bar { padding: .55rem .6rem; border-radius: 12px; }
  /* Thanh nghe dính đầu màn: để dãy số câu xuống dòng thì nó cao 168px, cộng
     navbar là gần một phần ba màn điện thoại. Một hàng, cuộn ngang. */
  .bv-ielts__barrow { flex-wrap: nowrap; gap: .5rem; }
  .bv-ielts__speed { flex: 0 0 auto; }
  .bv-ielts__pal { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; padding-bottom: 1px; }
  .bv-ielts__pal::-webkit-scrollbar { display: none; }
  .bv-ielts__palq { flex: 0 0 auto; }
  .bv-ielts__table td { padding: .45rem .5rem; }
  .bv-ielts__table td:first-child:not([colspan]) { width: auto; }
  .bv-ielts__gapin { width: 8.5rem; }
  .bv-ielts__q.is-pic .bv-ielts__opts { max-width: none; }
}

/* ================================================== trang lưu trữ (danh sách)
 * /courses/luyen-nghe-ielts/ — dòng không ảnh, lọc theo Part bằng radio + :has().
 * Nằm ngoài .bv-ielts nên mang tiền tố riêng `bv-ilist`. */
.bv-ilist { max-width: 980px; }

.bv-ilist__filter { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.bv-ilist__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bv-ilist__chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none;
  font-size: .88rem; font-weight: 600; color: var(--muted, rgba(15,23,42,.65));
  background: #fff; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 999px;
  padding: .4rem .85rem; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bv-ilist__chip span {
  font-size: .75rem; font-weight: 700; line-height: 1; padding: .2rem .45rem; border-radius: 999px;
  background: var(--soft, rgba(15,23,42,.06)); color: inherit;
}
.bv-ilist__chip:hover { border-color: rgba(47,111,237,.45); color: #2f6fed; }
.bv-ilist__radio:checked + .bv-ilist__chip { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.bv-ilist__radio:checked + .bv-ilist__chip span { background: rgba(255,255,255,.22); }
.bv-ilist__radio:focus-visible + .bv-ilist__chip { outline: 2px solid #2f6fed; outline-offset: 2px; }

.bv-ilist:has(#bviF-1:checked) .bv-ilist__item:not([data-part="1"]),
.bv-ilist:has(#bviF-2:checked) .bv-ilist__item:not([data-part="2"]),
.bv-ilist:has(#bviF-3:checked) .bv-ilist__item:not([data-part="3"]),
.bv-ilist:has(#bviF-4:checked) .bv-ilist__item:not([data-part="4"]),
.bv-ilist:has(#bviF-0:checked) .bv-ilist__item:not([data-part="0"]) { display: none; }

.bv-ilist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bv-ilist__item { margin: 0; }
.bv-ilist__link {
  display: grid; align-items: center; column-gap: .9rem; row-gap: .3rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* Màn hẹp: dòng thông tin trải hết chiều ngang dưới tên, kể cả phía dưới huy
     hiệu tiến độ — nếu không, dòng đã học bị đẩy độ dài xuống hàng thứ ba. */
  grid-template-areas: "no body end" "no meta meta";
  text-decoration: none; background: #fff;
  border: 1px solid var(--border, rgba(15,23,42,.1)); border-radius: 12px; padding: .7rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bv-ilist__link:hover { border-color: rgba(47,111,237,.45); box-shadow: var(--shadow, 0 8px 22px rgba(15,23,42,.08)); transform: translateX(2px); }
.bv-ilist__no {
  grid-area: no; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #2f6fed; background: rgba(47,111,237,.1);
}
.bv-ilist__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.bv-ilist__title { font-weight: 600; color: var(--ink, #0f172a); line-height: 1.35; }
.bv-ilist__vi { font-size: .84rem; color: var(--muted, rgba(15,23,42,.58)); }
.bv-ilist__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; font-size: .8rem; color: var(--muted, rgba(15,23,42,.6)); }
.bv-ilist__meta i { color: #2f6fed; }
.bv-ilist__end { grid-area: end; display: flex; align-items: center; gap: .6rem; }
.bv-ilist__arrow { color: var(--muted, rgba(15,23,42,.4)); font-size: 1rem; transition: transform .15s ease, color .15s ease; }
.bv-ilist__link:hover .bv-ilist__arrow { color: #2f6fed; transform: translateX(3px); }

/* Mỗi Part một màu để mắt quét được cả danh sách khi không có ảnh. */
.bv-ilist__part {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  justify-content: center; min-width: 4.4rem;
  border-radius: 999px; padding: .15rem .55rem; color: #475569; background: #f1f5f9;
}
.bv-ilist__part--1 { color: #1d4ed8; background: #eff6ff; }
.bv-ilist__part--2 { color: #0f766e; background: #f0fdfa; }
.bv-ilist__part--3 { color: #6d28d9; background: #f5f3ff; }
.bv-ilist__part--4 { color: #b45309; background: #fffbeb; }

/* Màn rộng: thông tin đề dồn sang phải trên cùng một hàng. */
@media (min-width: 768px) {
  .bv-ilist__link { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "no body meta end"; }
  .bv-ilist__meta { flex-wrap: nowrap; justify-content: flex-end; }
  .bv-ilist__meta > span:not(.bv-ilist__part) { min-width: 3.6rem; }
  /* Có bài nào mang huy hiệu tiến độ thì chừa cột cuối cố định cho mọi dòng, để
     Part / số câu / độ dài thẳng hàng dù dòng đó chưa học. Khách thì không chừa. */
  .bv-ilist:has(.bv-cpill) .bv-ilist__end { min-width: 6.2rem; justify-content: flex-end; }
}