/* Đề thi HSG THPT. Nối tiếp exam10-player.css (khung .bv-x-*), chỉ thêm phần
   riêng của đề HSG: mục lục theo phần, ô nhập ngay trong bài đọc, bảng từ cho
   sẵn, cặp ô sửa lỗi, và khối tự chấm câu viết lại. */

.bv-hsg { --bvh-ok: #0a7d72; --bvh-no: #dc3545; --bvh-brand: #7c3aed; }
.bv-x-level--hsg { background: linear-gradient(135deg, #7c3aed, #e11d48); }

/* ---- mục lục các phần ---- */
.bv-h-toc { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0 0 1rem; }
.bv-h-toc__link {
  display: flex; flex-direction: column; gap: .1rem; text-decoration: none;
  border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 10px;
  padding: .5rem .65rem; transition: border-color .15s ease, background .15s ease;
}
.bv-h-toc__link:hover { border-color: rgba(124,58,237,.45); background: rgba(124,58,237,.05); }
.bv-h-toc__t { font-size: .85rem; font-weight: 700; color: var(--ink, #0f172a); line-height: 1.35; }
.bv-h-toc__p { font-size: .76rem; color: var(--muted, rgba(15,23,42,.58)); }

/* ---- tiêu đề phần lớn ---- */
.bv-h-sec { margin: 2.2rem 0 1rem; scroll-margin-top: 4.5rem; }
.bv-h-sec:first-of-type { margin-top: 1rem; }
.bv-h-sec__t {
  font-size: 1.15rem; font-weight: 900; margin: 0; line-height: 1.3;
  padding-left: .7rem; border-left: 4px solid var(--bvh-brand);
}
.bv-h-sec__en { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--muted, rgba(15,23,42,.5)); }
.bv-h-sec__hint { margin: .35rem 0 0 .95rem; font-size: .85rem; color: var(--muted, rgba(15,23,42,.62)); }

.bv-h-part .bv-xpart__title { font-size: .95rem; font-weight: 800; color: var(--muted, rgba(15,23,42,.7)); }

/* ---- bản ghi phần Nghe ---- */
.bv-h-audio {
  border: 1px solid rgba(124,58,237,.28); background: rgba(124,58,237,.05);
  border-radius: 12px; padding: .7rem .85rem; margin: 0 0 .9rem;
}
.bv-h-audio__head { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; color: #6d28d9; margin-bottom: .5rem; }
.bv-h-audio audio { width: 100%; display: block; }

/* Lời thoại khoá lại tới khi nộp bài — mở sẵn thì phần nghe thành phần đọc. */
.bv-h-transcript { margin: 0 0 .9rem; border: 1px dashed var(--border, rgba(15,23,42,.2)); border-radius: 10px; padding: .5rem .75rem; }
.bv-h-transcript > summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--muted, rgba(15,23,42,.6)); }
.bv-h-transcript[data-locked] > summary { cursor: not-allowed; opacity: .65; }
.bv-h-transcript__body { margin-top: .5rem; font-size: .88rem; line-height: 1.75; }
.bv-h-transcript__body p { margin: 0 0 .6rem; }

/* ---- bảng từ cho sẵn (WORD FORMS phần B) ---- */
.bv-h-bank { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; padding: 0; }
.bv-h-bank li {
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  border: 1px solid rgba(124,58,237,.3); background: rgba(124,58,237,.07); color: #6d28d9;
  border-radius: 999px; padding: .2rem .6rem;
}

/* ---- chỗ trống ngay trong bài đọc ---- */
.bv-h-passage.is-interactive p { line-height: 2.4; }
.bv-h-gap { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; scroll-margin-top: 4.5rem; }
.bv-h-gap--block { display: flex; margin: .5rem 0; }
.bv-h-gap__no {
  font-size: .7rem; font-weight: 800; color: #fff; background: var(--bvh-brand);
  border-radius: 5px; padding: .05rem .3rem; line-height: 1.5;
}
.bv-h-in, .bv-h-sel {
  /* `line-height` phải đặt lại: đoạn văn có chỗ trống dùng line-height 2.4 để
     các ô không chồng lên nhau, mà `font: inherit` thì kéo luôn cả trị số ấy
     vào trong ô, làm ô cao vống lên 42px. */
  font: inherit; font-size: .88rem; line-height: 1.5; padding: .15rem .4rem; min-width: 6.5rem; max-width: 12rem;
  border: 1px solid var(--border, rgba(15,23,42,.25)); border-bottom-width: 2px; border-radius: 6px;
  background: #fff; color: var(--ink, #0f172a);
}
.bv-h-sel { min-width: 4.2rem; }
.bv-h-in:focus, .bv-h-sel:focus { outline: 2px solid rgba(124,58,237,.35); border-color: var(--bvh-brand); }
.bv-h-in:disabled, .bv-h-sel:disabled { background: var(--soft, rgba(15,23,42,.04)); color: var(--muted, rgba(15,23,42,.7)); }
.bv-h-gap.is-right .bv-h-in, .bv-h-gap.is-right .bv-h-sel { border-color: var(--bvh-ok); background: rgba(10,125,114,.07); }
.bv-h-gap.is-wrong .bv-h-in, .bv-h-gap.is-wrong .bv-h-sel { border-color: var(--bvh-no); background: rgba(220,53,69,.06); }
.bv-h-gap__fb { font-size: .8rem; font-weight: 700; color: var(--bvh-ok); white-space: nowrap; }
.bv-h-gap.is-wrong .bv-h-gap__fb { color: var(--bvh-no); }

/* Số chỗ trống của bài "điền từ có phương án": chỉ là mỏ neo tới câu bên dưới. */
.bv-h-chip {
  display: inline-block; min-width: 1.35rem; text-align: center; text-decoration: none;
  font-size: .74rem; font-weight: 800; color: #fff; background: var(--bvh-brand);
  border-radius: 5px; padding: 0 .25rem;
}
.bv-h-chip:hover { background: #6d28d9; color: #fff; }
.bv-h-chip.is-dead { background: var(--muted, rgba(15,23,42,.45)); }

/* ---- danh sách đoạn cho sẵn (bài chèn đoạn) ---- */
.bv-h-choices { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bv-h-choices li {
  display: flex; gap: .6rem; font-size: .89rem; line-height: 1.65;
  border: 1px solid var(--border, rgba(15,23,42,.1)); border-radius: 10px; padding: .6rem .75rem;
  background: var(--soft, rgba(15,23,42,.03));
}
.bv-h-choices__k {
  flex: 0 0 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem; color: #fff; background: var(--bvh-brand); border-radius: 6px;
}

/* ---- ô trả lời rời (dạng từ, sửa lỗi, viết lại câu, viết luận) ---- */
.bv-h-answer { margin-top: .1rem; }
.bv-h-answer .bv-h-in { max-width: 18rem; }
.bv-h-answer--pair { display: flex; flex-wrap: wrap; gap: .7rem; }
.bv-h-field { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--muted, rgba(15,23,42,.6)); }
.bv-h-field .bv-h-in { max-width: 14rem; }
.bv-h-kw { color: var(--bvh-brand); font-weight: 800; letter-spacing: .03em; }
.bv-h-lead { margin: 0 0 .35rem; font-size: .9rem; font-style: italic; color: var(--muted, rgba(15,23,42,.7)); }
.bv-h-ta {
  font: inherit; font-size: .92rem; line-height: 1.6; width: 100%; resize: vertical;
  border: 1px solid var(--border, rgba(15,23,42,.2)); border-radius: 9px; padding: .5rem .65rem;
  background: #fff; color: var(--ink, #0f172a);
}
.bv-h-ta:focus { outline: 2px solid rgba(124,58,237,.3); border-color: var(--bvh-brand); }
.bv-h-words { margin: .25rem 0 0; font-size: .78rem; color: var(--muted, rgba(15,23,42,.55)); text-align: right; }

/* ---- tự chấm câu viết lại ---- */
.bv-h-model {
  font-size: .9rem; line-height: 1.6; color: var(--ink, #0f172a);
  background: rgba(10,125,114,.07); border: 1px solid rgba(10,125,114,.25);
  border-radius: 9px; padding: .5rem .7rem;
}
.bv-h-model__k { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bvh-ok); display: block; }
.bv-h-alt { font-weight: 500; color: var(--muted, rgba(15,23,42,.6)); }
.bv-h-self { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .84rem; color: var(--muted, rgba(15,23,42,.65)); }
.bv-h-self .btn { padding: .2rem .6rem; font-size: .82rem; }
.bv-h-self__y.is-on { background: rgba(10,125,114,.14); color: var(--bvh-ok); border-color: rgba(10,125,114,.45); }
.bv-h-self__n.is-on { background: rgba(220,53,69,.1); color: var(--bvh-no); border-color: rgba(220,53,69,.45); }
.bv-h-fb.is-self { color: var(--ink, #0f172a); font-weight: 400; }
.bv-h-fb.is-essay { color: var(--ink, #0f172a); }
.bv-h-essay-note { margin: .5rem 0 0; font-size: .82rem; color: var(--muted, rgba(15,23,42,.6)); }
.bv-h-sol { border-top: 1px dashed var(--border, rgba(15,23,42,.15)); padding-top: .45rem; }
.bv-h-sol > summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--bvh-brand); }
.bv-h-sol__body {
  margin-top: .4rem; font-size: .87rem; line-height: 1.7;
  background: var(--soft, rgba(15,23,42,.04)); border-radius: 9px; padding: .6rem .75rem;
}

/* Chỗ trống bị rơi mất trong bản in gốc: câu vẫn phải có ô trả lời, kèm lời nhắc. */
.bv-h-orphan {
  margin: 0 0 .6rem; font-size: .84rem; line-height: 1.5; color: var(--bvh-no);
  background: rgba(220,53,69,.06); border: 1px solid rgba(220,53,69,.22);
  border-radius: 9px; padding: .45rem .65rem;
}

/* Câu tự chấm không có đúng/sai máy nên ô đánh dấu mang màu riêng. */
.bv-x-cell.is-self { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.4); color: #6d28d9; }

/* ---- "chỉ xem câu sai" ---- */
.bv-h-only-wrong .bv-h-q:not(.is-wrong) { display: none; }
.bv-h-only-wrong .bv-h-part.is-hidden { display: none; }
.bv-h-only-wrong .bv-h-sec { display: none; }
.bv-h-only-wrong .bv-h-passage:not(:has(.is-wrong)) { display: none; }
.bv-h-only-wrong .bv-h-choices, .bv-h-only-wrong .bv-h-bank { display: none; }

/* Hướng dẫn của từng khối cần giữ trên điện thoại: mỗi khối một dạng bài khác nhau. */
@media (max-width: 576px) {
  .bv-hsg .bv-xpart__en { display: block; }
  .bv-h-toc { grid-template-columns: 1fr 1fr; }
  .bv-h-sec__t { font-size: 1.02rem; }
  .bv-h-answer--pair { gap: .5rem; }
  .bv-h-field .bv-h-in { max-width: 100%; }
  .bv-h-in, .bv-h-sel { min-width: 5rem; }
}

/* ---- nền tối ----
   Theme này KHÔNG lái màu bằng `prefers-color-scheme` — styles.css không có lấy
   một khối media nào, nền tối chỉ bật khi có thuộc tính data-theme="dark".
   Nếu ở đây dùng media query thì máy cài hệ điều hành nền tối sẽ nhận ô nhập
   viền trắng 20% nằm trên trang nền sáng, tức là ô gần như tàng hình. */
:root[data-theme="dark"] .bv-h-in,
:root[data-theme="dark"] .bv-h-sel,
:root[data-theme="dark"] .bv-h-ta { background: rgba(255,255,255,.06); color: inherit; border-color: rgba(255,255,255,.2); }
:root[data-theme="dark"] .bv-h-choices li { background: rgba(255,255,255,.04); }