/* Vừa một màn hình iPad: câu hỏi + ô trả lời + nút Kiểm tra không phải cuộn (cả dọc lẫn ngang).
   Chỉ áp dụng dưới body.kid (tờ in / print.html không bị ảnh hưởng). Đo bằng tools/test-fit.js.
   Quy tắc chung: hình minh hoạ bị giới hạn chiều cao theo màn hình (vh), giữ tỉ lệ; mỗi vật đếm được >= ~22px;
   ô trả lời và chữ KHÔNG bị thu nhỏ. */

/* ---------- 1. Khung trang gọn hơn khi màn thấp (iPad ngang) ---------- */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 540px) and (max-height: 900px) {
  body.kid .kwrap { padding-top: 8px; }
  /* hàng ◀ Câu n ▶ dời lên thanh trên (chỗ trống giữa tên bài và các huy hiệu) để khỏi chiếm thêm một hàng */
  body.kid .qnav { position: fixed; top: 10px; right: 345px; width: 300px; z-index: 21; margin: 0; min-height: 0; gap: 8px; }
  body.kid .qn-btn { width: 44px; height: 44px; font-size: 20px; }
  body.kid .qnav .qn-mid { font-size: 15px; }
  body.kid .qnav.rv .qn-mid { padding: 2px 8px; border-radius: 12px; font-size: 14px; }
  body.kid .qnav .qn-mid small { font-size: 14px; }
  body.kid .card.qcard { margin: 6px 0 0; padding: 12px 22px 14px; }
  body.kid .qhead { margin-bottom: 8px; padding-bottom: 8px; }
  body.kid .qhead .qicon, body.kid .qhead .speak { width: 46px; height: 46px; font-size: 24px; }
  body.kid .feedback { min-height: 30px; margin: 6px auto; }
  body.kid .actions { margin-top: 0; }
  body.kid .actions .kbtn.big { min-height: 52px; }
}

/* ---------- 2. Hình cảnh (SVG) co theo chiều cao màn hình, giữ tỉ lệ ---------- */
/* hình cảnh của piccount/picbond/pichalf/picframe/picstory (pm-scene) và m3remove/m3code (m3-scene):
   cỡ tự nhiên, không phóng to quá bề ngang, cao tối đa ~36% màn hình */
@media (min-width: 600px) {
  body.kid #qbody svg:is(.pm-scene, .m3-scene) {
    width: auto; height: auto; max-width: 100%; max-height: min(36vh, 380px);
    margin-left: auto; margin-right: auto;
  }
}
/* cân thăng bằng: không phóng to theo bề ngang thẻ (trước đây 740px rộng x 350px cao cho MỘT cân) */
body.kid #qbody .sc-svg { width: auto; height: auto; max-width: 100%; max-height: min(26vh, 240px); margin-top: -18px; } /* -18px: bỏ phần trống phía trên thanh cân */
/* nhiều cân: xếp 2 cân một hàng thay vì chồng dọc */
@media (min-width: 600px) {
  body.kid #qbody:has(> figure.sc-fig ~ figure.sc-fig) { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: 16px; row-gap: 0; }
  body.kid #qbody:has(> figure.sc-fig ~ figure.sc-fig) > * { flex: 1 0 100%; min-width: 0; grid-column: auto; grid-row: auto; }
  body.kid #qbody:has(> figure.sc-fig ~ figure.sc-fig) > figure.sc-fig { flex: 0 0 calc(50% - 8px); margin: 2px 0 4px; }
  body.kid #qbody:has(> figure.sc-fig ~ figure.sc-fig) .sc-svg { width: 100%; max-width: 380px; max-height: none; }
}

/* ---------- 3. iPad ngang: gọn từng dạng ---------- */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 540px) and (max-height: 900px) {
  body.kid #qbody .q { margin: 4px 0 6px; }
  body.kid #qbody .ansline { margin-top: 8px; }
  body.kid #qbody :is(.choices, .multi) { margin-top: 8px; gap: 10px; }
  body.kid #qbody .choice, body.kid #qbody .mopt { padding-top: 6px; padding-bottom: 6px; }
  /* nối cột: hàng thấp hơn */
  body.kid #qbody .match { margin: 4px 0; }
  body.kid #qbody .mcol { gap: 6px; }
  body.kid #qbody .mrow { min-height: 46px; padding-top: 3px; padding-bottom: 3px; }
  body.kid #qbody .mhint { margin: 0 0 6px; }
  /* vietcautao / viet bộ 3: hàng tách tiếng gọn */
  body.kid #qbody .v3-rows { gap: 5px; }
  body.kid #qbody .v3-row { padding: 2px 12px; gap: 4px 12px; }
  body.kid #qbody .v3-big { font-size: 28px; }
  body.kid #qbody .v3-row .tapsel { min-height: 50px; }
  body.kid #qbody .v3-parts { margin: 2px 0 6px; }
  /* cân thăng bằng: nhiều cân thì thấp hơn một chút; 4 phương án nhóm quả vừa một hàng */
  body.kid #qbody:has(> figure.sc-fig ~ figure.sc-fig) .sc-svg { max-height: 138px; margin: -14px auto -10px; }
  body.kid #qbody .choices:has(.sc-grp) { gap: 8px; }
  body.kid #qbody .choices:has(.sc-grp) > .choice { padding-left: 10px; padding-right: 10px; }
  /* m3group: 4 khung một hàng, nhãn A./B. nằm bên trái khung (không phải trên đầu) */
  body.kid #qbody .multi:has(> .mopt > svg.m3-grp) { gap: 8px; }
  body.kid #qbody .multi > .mopt:has(> svg.m3-grp) { flex: 0 0 calc(25% - 6px); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 6px; min-width: 0; }
  body.kid #qbody .mopt > svg.m3-grp { margin: 0; flex: 0 1 auto; min-width: 0; }
  /* m3triangle: 4 tam giác một hàng */
  body.kid #qbody .m3-figs:has(> .m3-figw:nth-child(4)) { gap: 6px 6px; flex-wrap: nowrap; }
  body.kid #qbody .m3-figs:has(> .m3-figw:nth-child(4)) > .m3-figw { zoom: .88; }
  /* lgpens: dãy chuồng nằm ngang phía trên, đề và gợi ý chia hai cột bên dưới */
  body.kid #qbody:has(> .lg-pens) > .lg-pens { grid-column: 1 / -1; grid-row: 1; margin: 22px auto 4px; }
  body.kid #qbody:has(> .lg-pens) > .q { grid-column: 1; grid-row: 2; }
  body.kid #qbody:has(> .lg-pens) > .lg-clues { grid-column: 2; grid-row: 2 / span 2; margin-top: 4px; }
  body.kid #qbody:has(> .lg-pens) > .ansline { grid-column: 1; grid-row: auto; }
}