/* Chữ cho thẻ câu hỏi trên web bé học: thang cỡ chữ thống nhất + chống chồng chéo.
   Chỉ áp dụng dưới body.kid (tờ in / print.html không bị ảnh hưởng).
   Thang cỡ:  prompt  22 (điện thoại 20) – 24 (iPad, laptop) – 26 (màn lớn)
              nội dung 19 (điện thoại 18) – 21 (iPad, laptop) – 22/24 (màn lớn)
              đáp án (ô điền, nút chọn)  >= cỡ nội dung
              nhãn nhỏ  >= 14px
   Font: Baloo 2 cho đề bài/tiêu đề; Nunito cho nội dung và đáp án. Dòng chữ 1.45. */
body.kid {
  --t-prompt: 22px; --t-body: 19px; --t-label: 14px; --t-lh: 1.45;
}
@media (max-width: 600px) { body.kid { --t-prompt: 20px; --t-body: 18px; } }
@media (min-width: 700px) { body.kid { --t-prompt: 24px; --t-body: 21px; } }
@media (min-width: 1500px) { body.kid { --t-prompt: 26px; --t-body: 22px; } }
@media (min-width: 1800px) { body.kid { --t-prompt: 29px; --t-body: 24px; } }

body.kid .qhead .prompt { font-family: var(--font-d); font-size: var(--t-prompt); font-weight: 700; line-height: 1.35; }
body.kid #qbody { font-family: var(--font-b); font-size: var(--t-body); line-height: var(--t-lh); font-weight: 600; }
body.kid #qbody :is(input, select, button, textarea) { font-family: var(--font-b); }
body.kid #qbody :is(.eq, .cmp, .opq, .lg-eq, .seq) { font-size: calc(var(--t-body) + 3px); }
body.kid #qbody .eq.big { font-size: calc(var(--t-body) + 6px); }

/* ô điền và nút chọn đáp án: không nhỏ hơn chữ của bài */
body.kid #qbody :is(.choice, .mopt) { font-size: calc(var(--t-body) + 1px); line-height: 1.3; }
body.kid #qbody input.blank { font-size: calc(var(--t-body) + 3px); font-weight: 800; }
body.kid #qbody .tapsel .ts-cue { font-size: 14px; }

/* nhãn nhỏ >= 14px (chữ chú thích dưới hình, thẻ, nhãn phụ) */
body.kid #qbody :is(small, figcaption, .m3-cap, .m3-exl, .vs-tag, .shp-hint, .lg-end, .lg-cap, .v3-lab, .v3-note) { font-size: var(--t-label); line-height: 1.3; }
body.kid #qbody .vs-cell figcaption, body.kid #qbody .shp-cell figcaption { font-size: var(--t-label); }
body.kid #qbody .m3-cap { font-weight: 700; color: #4a4a5e; }
body.kid #qbody svg text { font-family: var(--font-b); }
body.kid #qbody svg .ex-num { font-size: 14px; }
body.kid #qbody svg .pm-lbl { font-size: 14px; }

/* ---- Chống chồng chéo ---- */
/* hàng phép tính dài (so sánh, điền dấu): xếp dòng tự do, mỗi phép tính chiếm vừa đủ rộng,
   không còn ô lưới cố định 210px khiến chữ nowrap tràn đè sang phép tính bên cạnh */
body.kid #qbody .cmpgrid { display: flex; flex-wrap: wrap; gap: 4px 34px; }
body.kid #qbody .cmpgrid > :is(.cmp, .opq) { flex: 0 1 auto; max-width: 100%; }
body.kid #qbody .eqgrid { display: flex; flex-wrap: wrap; gap: 4px 34px; }
body.kid #qbody .eqgrid > .eq { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 600px) {
  body.kid #qbody :is(.eq, .cmp, .opq, .lg-eq) { white-space: normal; }
  body.kid #qbody .cmpgrid, body.kid #qbody .eqgrid { gap: 0 24px; }
}

/* dãy hình lặp / hàng chữ-số: xuống dòng thay vì cuộn ngang trên màn nhỏ */
body.kid #qbody .lg-row { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
@media (max-width: 600px) {
  body.kid #qbody table.lg-strip td { width: 30px; height: 36px; font-size: 18px; }
  body.kid #qbody table.lg-strip .blank { width: 28px; height: 30px; min-width: 0; min-height: 0; font-size: 18px; padding: 0; }
}
/* chuồng (lgpens) trên điện thoại: chuồng hẹp lại để đủ 5-6 chuồng một hàng */
@media (max-width: 600px) {
  body.kid #qbody .lg-pens { gap: 6px; }
  body.kid #qbody .lg-pen { width: 44px; }
  body.kid #qbody .lg-roof { left: -5px; border-left-width: 27px; border-right-width: 27px; }
}
/* phép tính xuống dòng trên điện thoại: giãn dòng vừa phải (không để hở to giữa hai dòng) */
@media (max-width: 600px) { body.kid #qbody :is(.eq, .cmp, .opq, .lg-eq) { line-height: 2; } }
