/* Bài 1: countable pictures stay still while a child observes. */
.lesson-one-tools{display:flex;gap:10px;justify-content:flex-end;margin:-8px 0 18px}
.lesson-bank-info{display:grid;gap:10px;background:#fff6df;border:2px solid #ffe0a2;border-radius:24px;padding:22px;color:#8b5e24;font-weight:800}
.recognition-tip h2{font-size:clamp(23px,4vw,33px);margin:24px 0;color:#126b9b;line-height:1.35;text-align:center}
.tip-counter{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:800;color:#56809a}
.tip-counter span{color:#996122;background:#fff1cf;border-radius:18px;padding:9px 16px}
.split-variants{display:flex;justify-content:center;gap:12px;margin:24px 0 12px;flex-wrap:wrap}
.split-variants .secondary{font-size:20px;padding:12px 22px;min-height:48px}
.split-variants .selected{background:#fff0cd;border-color:#ffbf59;color:#94601e;box-shadow:0 3px 0 #e7b967}
.tip-pagination{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:28px 0}
.tip-dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:25px 0}
.tip-dots button{width:34px;height:34px;border:2px solid #c7e7f6;background:#e9f7ff;color:#277ca2;border-radius:50%;padding:0}
.tip-dots button.selected{background:#ffbd55;border-color:#ffbd55;color:#704614}
.tip-number{display:block;margin:15px auto;background:#e3f5ff;color:#1170a2;border:3px solid #bbe3f6;border-radius:20px;font-size:36px;padding:7px 33px}
.count-scenes{display:grid;grid-template-columns:1fr;gap:12px;margin:22px auto;max-width:520px}
.count-scenes.multi{grid-template-columns:repeat(2,minmax(0,1fr))}
.count-group{min-width:0;position:relative;background:#edf8ff;border:2px solid #cbeafa;border-radius:24px;padding:12px 9px}
.count-group:nth-child(2n){background:#fff5df;border-color:#ffdfa6}
.count-objects{height:154px;width:100%;position:relative;min-width:0;max-width:400px;margin:auto}
.count-object{position:absolute;width:clamp(48px,9vw,76px);height:clamp(48px,9vw,76px);transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:15px;line-height:1}
.count-object img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.count-object:enabled:hover{transform:translate(-50%,-50%) scale(1.04);background:#fff8}
.count-object:enabled:active{transform:translate(-50%,-50%) scale(.95)}
.count-object.marked{background:#fff8}
.count-mark{position:absolute;top:-6px;right:-3px;display:grid;place-items:center;height:26px;width:26px;background:#ffb349;border:2px solid #fff;border-radius:50%;color:#674213;font:800 16px/1 'Trebuchet MS',sans-serif;box-shadow:0 2px 4px #99591122}
.count-objects.compact{height:112px}
.compact .count-object{width:clamp(27px,5.2vw,47px);height:clamp(27px,5.2vw,47px)}
.count-objects.covered{visibility:hidden}
.group-letter{display:block;color:#4988a9;font-size:15px;line-height:1;font-weight:800;text-align:left;padding:3px 5px}
.recognition-prompt{font-size:clamp(23px,4.5vw,33px);line-height:1.3;text-align:center;color:#126b9b;padding:24px 0 8px}
.recognition-answers{grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0}
.recognition-answers .answer-option{font-size:clamp(30px,7vw,45px);min-height:82px}
.picture-answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:25px 0}
.picture-answers .group-choice{padding:12px 10px;min-height:165px;overflow:hidden;min-width:0}
.group-choice .group-letter{font-size:19px}
.group-choice .count-objects{height:102px}
.group-choice .count-object{width:clamp(28px,6.8vw,49px);height:clamp(28px,6.8vw,49px)}
.recognition-quiz .quiz-card{overflow:hidden}
.recognition-quiz .check-count{display:block;margin:8px auto 20px;border:2px solid #d2eaf5;border-radius:18px;background:#f3faff;color:#397ba1;padding:12px 18px;font-size:16px}
.rearrange-button{display:block;margin:0 auto 20px}
.look-again{display:block;margin:12px auto 0}
.covered-message{color:#64869b;text-align:center;font-size:15px;margin:12px 0 -12px}
.match-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:24px 0}
.match-groups .count-objects{height:110px}
.match-groups .count-object{width:37px;height:37px}
.match-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0 4px}
.match-numbers button{background:#fff;border:2px solid #badff3;box-shadow:0 3px 0 #aacfe1;border-radius:13px;min-height:43px;font-size:23px;color:#23779f;padding:3px}
.match-numbers button.selected{background:#ffbf55;border-color:#eeb14e;color:#744512;box-shadow:0 3px 0 #d89a3c}
.confirm-answer{display:flex;margin:20px auto}
.confirm-answer:disabled{opacity:.45}
.build-frame{position:relative;display:grid;place-items:center;min-height:180px;border:3px dashed #a6d7ef;border-radius:26px;background:#edf9ff;margin:26px 0 20px}
.build-frame .count-objects{height:165px;max-width:320px}
.empty-frame{font-size:19px;color:#86a9bb}
.builder-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.object-source{border:2px solid #ffd99f;border-radius:22px;background:#fff3d9;padding:9px 17px;color:#916125;display:flex;align-items:center;gap:8px;font-size:17px}
.object-source img{object-fit:contain;width:50px;height:50px;pointer-events:none}
.object-source:disabled{opacity:.45}
.recognition-quiz .small-muted{text-align:center}
.independent-note{font-size:15px;color:#4882a0;margin:22px 0}
.answer-success .count-object img{animation:happy-hop .65s ease-in-out 1}
.recognition-quiz .quiz-tools .read-button{padding:10px;font-size:14px;white-space:nowrap}
@media(max-width:760px){
 .island-map{height:1320px}
 .count-scenes{margin:20px auto}.count-objects{height:145px}.count-object{width:60px;height:60px}
 .compact .count-object{width:33px;height:33px}.count-objects.compact{height:95px}
 .recognition-tip h2{font-size:25px}.tip-counter{font-size:16px;gap:9px}.tip-counter span{padding:8px 12px}
 .picture-answers{gap:12px}.picture-answers .group-choice{min-height:150px;padding:10px 5px}.group-choice .count-object{width:34px;height:34px}
 .match-groups{grid-template-columns:1fr;gap:15px}.match-groups .count-objects{height:88px;max-width:270px}.match-groups .count-object{width:53px;height:53px}
 .match-numbers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:290px;margin:4px auto}.match-numbers button{min-height:48px}
 .recognition-quiz .quiz-tools #quizClock{display:none}.recognition-quiz .quiz-tools{gap:6px}.recognition-quiz .quiz-tools .read-button{font-size:12px;padding:9px 7px}
 .recognition-prompt{font-size:25px;padding-top:18px}.recognition-answers .answer-option{min-height:77px}
 .tip-pagination .primary,.tip-pagination .secondary{font-size:17px;padding:12px 17px}.tip-dots{gap:7px}.tip-dots button{width:30px;height:30px;font-size:14px}
 .lesson-bank-info{display:none}.build-frame .count-object{width:55px;height:55px}.builder-controls .primary{font-size:18px;padding:12px 17px}
}
@media(max-width:360px){.recognition-prompt{font-size:23px}.group-choice .count-object{width:30px;height:30px}.count-object{width:53px;height:53px}.compact .count-object{width:29px;height:29px}.tip-counter{font-size:14px}.recognition-quiz .quiz-tools .read-button{font-size:11px;padding:9px 5px}}
@media(prefers-reduced-motion:reduce){.answer-success .count-object img{animation:none!important}}
/* Counting lesson: clear rows of five, stable pictures, normal counting gestures. */
.count-objects.many{height:210px}
.count-objects.many .count-object{width:min(16%,56px);height:auto;aspect-ratio:1}
.count-objects.compact.many{height:140px}
.compact.many .count-object{width:min(17%,38px);height:auto;aspect-ratio:1}
.build-frame .count-objects.many{height:215px}
.island-map{height:790px}
.map-cta{position:relative;left:auto;top:auto;transform:none;justify-content:center;margin:0 auto 22px}
@media(max-width:760px){.island-map{height:1650px}.count-objects.many{height:200px}.count-objects.compact.many{height:145px}.count-objects.compact.many .count-object{width:17%;height:auto}.match-groups .count-objects.many{height:175px}.match-groups .many .count-object{width:16%;height:auto}}
@media(max-width:760px){.counting-quiz .picture-answers{grid-template-columns:1fr}.counting-quiz .count-scenes.multi{grid-template-columns:1fr}.counting-quiz .group-choice .count-objects.many{height:160px}.counting-quiz .group-choice .count-object{width:52px;height:52px}.counting-quiz .group-choice .many .count-object{width:min(17%,50px);height:auto}.counting-quiz .count-scenes .compact .count-object{width:52px;height:52px}.counting-quiz .count-scenes .compact.many .count-object{width:min(17%,50px);height:auto}}