/* Toán theo tranh (gen/picmath.js + tranh gen/art.js) — tiền tố class: .pm- */

/* khung tranh: co theo bề ngang thẻ bài, không phóng to quá cỡ gốc */
.pm-scene { display: block; width: 100%; height: auto; margin: 6px auto 10px; overflow: visible; }
.pm-pic { margin: 0 0 4px; }
.pm-box { fill: #fffdf7; stroke: #c9b79c; stroke-width: 2.5; }
.pm-div { stroke: #b9a688; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; }

/* nền câu chuyện */
.pm-bg-sky { fill: #e6f5ff; stroke: #7fb8da; stroke-width: 2.5; }
.pm-bg-pond { fill: #daf1f6; stroke: #5fa8b8; stroke-width: 2.5; }
.pm-bg-grass { fill: #eaf7e0; stroke: #86b86a; stroke-width: 2.5; }
.pm-bg-plate { fill: #fff4e0; stroke: #d4a373; stroke-width: 2.5; }
.pm-zone { fill: #fff; stroke: #8d99a6; stroke-width: 2; stroke-dasharray: 6 5; }
.pm-grass { fill: none; stroke: #6aa84f; stroke-width: 2; stroke-linejoin: round; }
.pm-wave { fill: none; stroke: #5fa8b8; stroke-width: 2.5; stroke-linecap: round; }
.pm-branch { fill: none; stroke: #a0764b; stroke-width: 6; stroke-linecap: round; }
.pm-plate { fill: none; stroke: #d4a373; stroke-width: 2.5; }
.pm-arrow { fill: none; stroke: #e76f51; stroke-width: 5; stroke-linecap: round; }
.pm-ah { fill: #e76f51; }
.pm-lbl { font-size: 13px; font-weight: 700; fill: #e76f51; text-anchor: middle; }

/* túi che (tách – gộp) */
.pm-bag { fill: #e9c46a; stroke: #3d2b1f; stroke-width: 4; stroke-linejoin: round; }
.pm-bagt { fill: none; stroke: #3d2b1f; stroke-width: 4; stroke-linecap: round; }
.pm-bagq { font-size: 40px; font-weight: 800; fill: #3d2b1f; text-anchor: middle; font-family: "Segoe UI", Arial, sans-serif; }

/* khung 10 ô và hộp */
.pm-tf { fill: #fff; stroke: #3d2b1f; stroke-width: 3; }
.pm-tfl { stroke: #3d2b1f; stroke-width: 1.6; }
.pm-crate { fill: #f6e7cf; stroke: #a9713d; stroke-width: 3; }

/* câu hỏi */
.pm-qs { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.pm-line { font-size: 20px; line-height: 2.1; }
.pm-hint { font-size: 15px; color: var(--muted, #6b6f85); margin-top: 4px; }
.pm-tag { display: inline-block; min-width: 3.2em; font-size: 15px; font-weight: 700; color: #118ab2; }
.pm-cap { font-weight: 700; color: #118ab2; font-size: 16px; margin: 6px 0 0; }
.pm-num { display: inline-block; min-width: 2.2em; padding: 2px 6px; text-align: center; font-weight: 700; font-size: 22px;
  border: 2px solid #3d2b1f; border-radius: 8px; background: #fff3c4; }
.choice svg.art { vertical-align: middle; }

/* sơ đồ tách – gộp dưới tranh */
.pm-bond { display: flex; flex-direction: column; align-items: center; width: 230px; max-width: 100%; margin: 4px auto 6px; }
.pm-bond.pm-b3 { width: 280px; }
.pm-bl { display: block; width: 70%; height: 26px; }
.pm-bl line { stroke: #3d2b1f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pm-bb { display: flex; justify-content: space-between; width: 100%; }
.pm-bb > span { flex: 1; text-align: center; }

/* nhiều hộp / nhiều tranh cạnh nhau */
.pm-flex, .pm-panels { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: flex-start; }
.pm-cell { flex: 1 1 140px; max-width: 210px; text-align: center; }
.pm-panel { flex: 1 1 130px; max-width: 220px; text-align: center; }
.pm-cell .pm-line { font-size: 18px; }

@media (max-width: 480px) {
  .pm-line { font-size: 18px; }
  .pm-cell { flex-basis: 30%; min-width: 96px; }
  .pm-panel { flex-basis: 44%; min-width: 130px; }
}

@media print {
  .pm-scene, .pm-bond, .pm-flex, .pm-panels { break-inside: avoid; }
  .pm-bg-sky, .pm-bg-pond, .pm-bg-grass, .pm-bg-plate { fill: #fff; }
}

/* điện thoại: tranh không co nhỏ hơn mức đếm được (cuộn ngang nếu cần) */
/* tranh luôn co vừa bề ngang (không cuộn, không bị cắt) */
.pm-scene { min-width: 0; max-width: 100%; }