/* Tiếng Anh cho trẻ em. Scoped dưới .bv-kid, dùng token của styles.css.
   Chữ và vùng chạm cố tình to hơn các khoá khác: người dùng là trẻ 6–9 tuổi,
   phần lớn học trên điện thoại của bố mẹ. */
.bv-kid {
  --kid-ok: #17916b;
  --kid-no: #e2574c;
  --kid-sun: #ffb703;
  --kid-sky: #4aa8ff;
  --kid-card: #fff;
  --kid-line: rgba(15, 23, 42, .12);
}
.bv-kid .container { max-width: 940px; }

.bv-kid-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted, rgba(15,23,42,.6)); margin-bottom: .85rem; }
.bv-kid-crumbs a { color: var(--muted, rgba(15,23,42,.62)); text-decoration: none; }
.bv-kid-crumbs a:hover { color: var(--brand, #2f6fed); text-decoration: underline; }
.bv-kid-crumbs > span { opacity: .5; }
.bv-kid-crumbs__here { opacity: 1; color: var(--ink, #0f172a); font-weight: 600; }

/* ---- đầu bài ---- */
.bv-kid-head { margin-bottom: 1.1rem; }
.bv-kid-head__badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
.bv-kid-level {
  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(--kid-sky), #7c5cff);
}
.bv-kid-pill {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700;
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--soft, rgba(15,23,42,.05)); color: var(--muted, rgba(15,23,42,.62));
}
.bv-kid-title { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 800; margin: 0 0 .15rem; line-height: 1.25; }
.bv-kid-title-vi { font-size: 1.05rem; font-weight: 700; color: var(--kid-sky); margin: 0 0 .35rem; }
.bv-kid-subtitle { color: var(--muted, rgba(15,23,42,.62)); font-size: .96rem; margin: 0; }

/* ---- mẫu câu ---- */
.bv-kid-patterns {
  border: 2px dashed var(--kid-sun); border-radius: 18px;
  padding: .9rem 1.1rem; margin: 1rem 0 1.3rem; background: rgba(255, 183, 3, .07);
}
.bv-kid-patterns__h { font-size: .95rem; font-weight: 800; margin: 0 0 .5rem; color: #a86800; }
.bv-kid-patterns__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bv-kid-patterns__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.bv-kid-patterns__en { font-size: 1.15rem; font-weight: 800; }
.bv-kid-patterns__vi { color: var(--muted, rgba(15,23,42,.62)); font-size: .95rem; }

/* ---- ba chặng ---- */
.bv-kid-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.bv-kid-step {
  flex: 1 1 auto; min-height: 48px; padding: .6rem 1rem; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--kid-line); background: var(--kid-card); color: var(--ink, #0f172a);
  font-size: 1rem; font-weight: 800;
}
.bv-kid-step:hover { border-color: var(--kid-sky); }
.bv-kid-step.is-on { background: var(--kid-sky); border-color: var(--kid-sky); color: #fff; }
.bv-kid-pane[hidden] { display: none; }
.bv-kid-nojs { color: var(--muted, rgba(15,23,42,.62)); }

/* ---- chặng 1: thẻ ---- */
.bv-kid-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.bv-kid-nav__btn, .bv-kid-nav__say, .bv-kid-nav__know {
  min-height: 48px; min-width: 48px; padding: .5rem .95rem; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--kid-line); background: var(--kid-card); font-size: 1rem; font-weight: 700;
}
.bv-kid-nav__btn { font-size: 1.2rem; }
.bv-kid-nav__at { font-weight: 800; min-width: 4.5rem; text-align: center; }
.bv-kid-nav__know.is-on { background: var(--kid-ok); border-color: var(--kid-ok); color: #fff; }

.bv-kid-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bv-kid-cards.is-one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bv-kid-card {
  background: var(--kid-card); border: 2px solid var(--kid-line); border-radius: 20px;
  padding: 1rem; text-align: center;
}
.bv-kid-card[hidden] { display: none; }
.bv-kid-card__pic {
  aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: .8rem;
  border: 1px solid var(--kid-line);
}
.bv-kid-card__pic img { width: 100%; height: 100%; object-fit: contain; }
.bv-kid-card__noimg { font-size: 2.6rem; opacity: .35; }
.bv-kid-card__en { font-size: 1.3rem; font-weight: 800; margin: 0 0 .2rem; line-height: 1.35; }
.bv-kid-card__vi { color: var(--muted, rgba(15,23,42,.62)); margin: 0 0 .5rem; font-size: 1rem; }
.bv-kid-card__word { margin: 0; font-size: .95rem; }
.bv-kid-card__word strong { color: var(--kid-sky); }

/* ---- chặng 2: ghép đôi ---- */
/* Cả vòng phải lọt một khung hình, không phải cuộn. Ô tranh co theo CHIỀU CAO
   khung nhìn (vh) chứ không theo chiều rộng cột: trước đây 4 ảnh vuông xếp
   một cột, mỗi ảnh rộng gần nửa khung, cộng lại cao hơn 1500px. */
.bv-kid-match { --tile: clamp(64px, 15vh, 160px); }
.bv-kid-match__hint { font-weight: 700; margin: 0 0 .6rem; font-size: clamp(.85rem, 2.4vw, .98rem); }
.bv-kid-match__cols {
  display: grid; gap: .7rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;   /* câu co giãn, tranh vừa đúng 2 ô */
}
.bv-kid-match__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; align-content: start; }
.bv-kid-match__pics {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
  grid-template-columns: repeat(2, var(--tile));
}
.bv-kid-pic, .bv-kid-line {
  width: 100%; cursor: pointer; border-radius: 14px;
  border: 3px solid var(--kid-line); background: var(--kid-card); padding: .4rem;
}
.bv-kid-pic {
  width: var(--tile); height: var(--tile);
  display: flex; align-items: center; justify-content: center;
}
.bv-kid-pic img { width: 100%; height: 100%; object-fit: contain; }
.bv-kid-pic__word { font-size: clamp(.8rem, 2.4vw, 1rem); font-weight: 800; }
.bv-kid-line {
  text-align: left; font-weight: 700; line-height: 1.3; padding: .5rem .7rem;
  font-size: clamp(.92rem, 2.6vw, 1.05rem);
  min-height: var(--tile-line, 48px);
}
.bv-kid-line small { display: block; font-weight: 500; font-size: .8em; color: var(--muted, rgba(15,23,42,.62)); margin-top: .1rem; }
.bv-kid-line.is-picked { border-color: var(--kid-sun); box-shadow: 0 0 0 3px rgba(255, 183, 3, .25); }
.bv-kid-pic.is-right, .bv-kid-line.is-right { border-color: var(--kid-ok); }
.bv-kid-pic.is-wrong { border-color: var(--kid-no); box-shadow: 0 0 0 3px rgba(226, 87, 76, .2); }
.bv-kid-pic.is-done, .bv-kid-line.is-done { opacity: .5; cursor: default; }
.bv-kid-match__score { font-weight: 800; margin: .7rem 0 0; }

/* ---- chặng 3: kiểm tra ---- */
.bv-kid-quiz__at { font-weight: 700; color: var(--muted, rgba(15,23,42,.62)); margin: 0 0 .4rem; }
.bv-kid-quiz__q { font-size: 1.35rem; font-weight: 800; margin: 0 0 1rem; line-height: 1.35; }
.bv-kid-say { border: 0; background: none; cursor: pointer; font-size: 1.2rem; padding: 0 .2rem; }
/* Ghim be ngang: de tu do thi tren may ban moi o len toi 297px, to qua muc
   can thiet va lam khoi tra loi cao gan het khung. */
.bv-kid-quiz__opts {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 540px;
}
.bv-kid-opt {
  width: 100%; aspect-ratio: 1 / 1; cursor: pointer; border-radius: 18px; padding: .5rem;
  border: 3px solid var(--kid-line); background: var(--kid-card);
  display: flex; align-items: center; justify-content: center;
}
.bv-kid-opt img { width: 100%; height: 100%; object-fit: contain; }
.bv-kid-opt__word { font-size: 1.15rem; font-weight: 800; }
.bv-kid-opt.is-right { border-color: var(--kid-ok); box-shadow: 0 0 0 4px rgba(23, 145, 107, .2); }
.bv-kid-opt.is-wrong { border-color: var(--kid-no); box-shadow: 0 0 0 4px rgba(226, 87, 76, .2); }
.bv-kid-opt[disabled] { cursor: default; }

/* ---- chung ---- */
.bv-kid-done { font-size: 1.35rem; font-weight: 800; margin: 1rem 0; }
.bv-kid-btn {
  min-height: 48px; padding: .6rem 1.4rem; border-radius: 14px; cursor: pointer;
  border: 0; background: var(--kid-sky); color: #fff; font-size: 1rem; font-weight: 800;
}
.bv-kid-goal {
  margin: 1.6rem 0 0; padding: .9rem 1.1rem; border-radius: 16px;
  background: rgba(74, 168, 255, .1); font-size: .98rem;
}

@media (max-width: 640px) {
  /* Giữ HAI cột kể cả trên điện thoại. Xếp chồng thì chiều cao thành tổng của
     cả hai khối (~400px), còn để cạnh nhau thì chỉ bằng khối cao hơn (~280px). */
  .bv-kid-match { --tile: clamp(58px, 12vh, 104px); }
  .bv-kid-quiz__opts { gap: .5rem; }
  .bv-kid-card__en { font-size: 1.15rem; }
}

@media (max-width: 380px) {
  /* Van con thua chieu cao o co nay, nen uu tien o tranh to de tre nhan ra
     hinh -- 52px do duoc o ban truoc la qua nho. */
  .bv-kid-match { --tile: clamp(64px, 12vh, 92px); }
  .bv-kid-match__cols { gap: .5rem; }
  .bv-kid-line { font-size: .88rem; padding: .45rem .55rem; }
}

/* iPad ngang và màn thấp: chiều cao mới là thứ hiếm, không phải chiều rộng. */
@media (max-height: 560px) {
  .bv-kid-match { --tile: clamp(56px, 13vh, 96px); }
  .bv-kid-match__lines { gap: .35rem; }
  .bv-kid-line { padding: .35rem .6rem; }
}

/* ==========================================================================
   Chế độ "Bé chưa biết chữ" và hai trò đi kèm.

   Nguyên tắc xuyên suốt phần này: bé 3–5 tuổi không đọc được gì, nên mọi thứ
   phải nói bằng TRANH và CỠ. Ô chạm to hơn hẳn phần trên, và trong chế độ này
   mọi dòng chữ trong vùng bé chơi đều bị ẩn — kể cả câu tiếng Anh, vì để đó
   thì bé nhìn vào chữ chứ không nhìn tranh.
   ========================================================================== */

/* ---- nút bật chế độ (phụ huynh bấm, nên vẫn để chữ) ---- */
.bv-kid-mode { margin: 0 0 1.1rem; }
.bv-kid-mode__btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  min-height: 48px; padding: .55rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--kid-line); background: var(--kid-card);
  font-size: 1rem; font-weight: 800; color: var(--ink, #0f172a);
}
.bv-kid-mode__btn:hover { border-color: var(--kid-sun); }
.bv-kid-mode__ico { font-size: 1.35rem; line-height: 1; }
.bv-kid-mode__state {
  font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
  background: var(--soft, rgba(15,23,42,.06)); color: var(--muted, rgba(15,23,42,.62));
}
.bv-kid-mode__btn.is-on { background: var(--kid-sun); border-color: var(--kid-sun); color: #4a2c00; }
.bv-kid-mode__btn.is-on .bv-kid-mode__state { background: rgba(74, 44, 0, .16); color: #4a2c00; }
.bv-kid-mode__hint { margin: .45rem 0 0; font-size: .85rem; color: var(--muted, rgba(15,23,42,.62)); }

/* ---- nhãn chặng: hình to, chữ nhỏ (chữ là để bố mẹ đọc) ---- */
.bv-kid-step { display: inline-flex; align-items: center; gap: .45rem; }
.bv-kid-step__ico { font-size: 1.25rem; line-height: 1; }
.bv-kid-step__txt { font-size: .95rem; }

/* ---- ẩn chữ khi bật chế độ ---- */
.bv-kid.is-pre .bv-kid-patterns,
.bv-kid.is-pre .bv-kid-subtitle,
.bv-kid.is-pre .bv-kid-goal,
.bv-kid.is-pre .bv-kid-card__en,
.bv-kid.is-pre .bv-kid-card__vi,
.bv-kid.is-pre .bv-kid-card__word,
.bv-kid.is-pre .bv-kid-pill--pat { display: none; }   /* mẫu câu đã ẩn thì đếm nó cũng vô nghĩa */
/* Tranh chiếm hết thẻ khi không còn chữ kèm theo. */
.bv-kid.is-pre .bv-kid-card { padding-bottom: .6rem; }
.bv-kid.is-pre .bv-kid-nav__know { font-size: .9rem; }

/* ---- chấm tiến độ: thay cho dòng "Câu 3/8" mà bé không đọc được ---- */
.bv-kid-dots { display: flex; justify-content: center; gap: .4rem; margin: 0 0 .9rem; }
.bv-kid-dot {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--soft, rgba(15,23,42,.12));
}
.bv-kid-dot.is-done { background: var(--kid-ok); }
.bv-kid-dot.is-at { background: var(--kid-sun); transform: scale(1.35); }

.bv-kid-stars { text-align: center; font-size: 1.6rem; line-height: 1.5; margin: .2rem 0 1rem; word-break: break-word; }

/* ---- nút loa to giữa màn: thứ duy nhất bé cần bấm để nghe lại ---- */
.bv-kid-earbtn {
  display: block; margin: 0 auto 1.1rem; cursor: pointer;
  width: 96px; height: 96px; border-radius: 999px; font-size: 2.6rem; line-height: 1;
  border: 0; background: var(--kid-sky); color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.bv-kid-earbtn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }

/* ---- lưới tranh để chọn (dùng chung cho Nghe và chỉ + Cái gì biến mất) ---- */
.bv-kid-pickpics, .bv-kid-missrow, .bv-kid-misspick {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
}
.bv-kid-pickpic, .bv-kid-missrow__it, .bv-kid-misspick__it {
  display: block; cursor: pointer; padding: .35rem; border-radius: 20px;
  border: 3px solid var(--kid-line); background: var(--kid-card);
}
.bv-kid-pickpic img, .bv-kid-missrow__it img, .bv-kid-misspick__it img {
  display: block; width: var(--pick, clamp(96px, 26vw, 150px)); height: auto; border-radius: 14px;
}
.bv-kid-pickpic { --pick: clamp(110px, 33vw, 190px); }
.bv-kid-pickpic:hover, .bv-kid-misspick__it:hover { border-color: var(--kid-sky); }
.bv-kid-pickpic.is-right, .bv-kid-misspick__it.is-right {
  border-color: var(--kid-ok); box-shadow: 0 0 0 5px rgba(23, 145, 107, .22);
}
.bv-kid-pickpic.is-wrong, .bv-kid-misspick__it.is-wrong {
  border-color: var(--kid-no); animation: bv-kid-shake .45s;
}
.bv-kid-missrow__it[disabled], .bv-kid-pickpic[disabled] { cursor: default; }

/* ---- Cái gì biến mất ---- */
.bv-kid-miss__eyes { text-align: center; font-size: 2.4rem; margin: 0 0 .7rem; line-height: 1; }
.bv-kid-miss__sep { text-align: center; font-size: 1.6rem; margin: 1rem 0 .6rem; line-height: 1; }
/* Tranh đang được gọi tên nhấc lên một chút — bé nối được tiếng với tranh nào. */
.bv-kid-missrow__it.is-naming {
  border-color: var(--kid-sun); box-shadow: 0 0 0 5px rgba(255, 183, 3, .3);
  transform: translateY(-6px);
}
.bv-kid-missrow.is-hidden .bv-kid-missrow__it img { visibility: hidden; }
.bv-kid-missrow.is-hidden .bv-kid-missrow__it { background: var(--soft, rgba(15,23,42,.08)); }

/* ---- nhại theo + nghe vè ---- */
.bv-kid-nav__echo.is-turn { background: var(--kid-sun); border-color: var(--kid-sun); animation: bv-kid-pulse 1.3s infinite; }
.bv-kid-nav__chant.is-on { background: var(--kid-sky); border-color: var(--kid-sky); color: #fff; }

@keyframes bv-kid-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
@keyframes bv-kid-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, .55); }
  60% { box-shadow: 0 0 0 12px rgba(255, 183, 3, 0); }
}

/* Máy nào đặt "giảm chuyển động" thì bỏ hết hiệu ứng — vẫn phải nhìn ra
   đúng/sai bằng màu viền, nên không mất thông tin gì. */
@media (prefers-reduced-motion: reduce) {
  .bv-kid-pickpic.is-wrong, .bv-kid-misspick__it.is-wrong,
  .bv-kid-nav__echo.is-turn { animation: none; }
  .bv-kid-missrow__it.is-naming, .bv-kid-dot.is-at { transform: none; }
}

@media (max-width: 380px) {
  .bv-kid-earbtn { width: 84px; height: 84px; font-size: 2.2rem; }
  .bv-kid-pickpics, .bv-kid-missrow, .bv-kid-misspick { gap: .5rem; }
}