/* ============ BÉ HỌC VUI — kiểu sách tranh vẽ tay ============ */
:root {
  --giay: #fbf5e6;
  --giay-trang: #fffdf7;
  --muc: #3b2a20;
  --muc-nhat: #8a7663;
  --bong: 3px 4px 0 rgba(59, 42, 32, .16);
  --chu-tay: "Mali", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --vien-tay: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --vien-tay2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --thanh: 72px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--chu-tay); font-weight: 500; color: var(--muc);
  background-color: var(--giay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font-family: inherit; font-weight: 700; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { opacity: .3; cursor: default; }
button:focus-visible { outline: 3px dashed var(--muc); outline-offset: 4px; }

/* Hình vẽ tay */
.ve { display: block; width: 100%; height: auto; overflow: visible; }
.ve.nho { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.35em; }
.ve-chu { font-family: var(--chu-tay); font-weight: 700; }

/* Khung vẽ tay dùng chung */
.giay, .o-muc, .o-chu, .the-giua, .khung-so, .o-so, .khung-dem, .ben, .o-noi, .o-convat, .khung-3d, .khung-mau, .o-vat,
.khung-to, .the-do, .o-chon, .san-khau, .o-cham, .cua-ph, .ph, .nut-nghe, .nut-lon, .mui-ten, #nutNha, #nutLui, #sao, .bong-noi {
  border: 3px solid var(--muc); border-radius: var(--vien-tay); box-shadow: var(--bong);
}
.o-muc:nth-child(even), .o-chu:nth-child(even), .o-vat:nth-child(even), .o-chon:nth-child(even), .o-so:nth-child(even) { border-radius: var(--vien-tay2); }

/* ---------- Thanh trên ---------- */
#thanh {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: calc(var(--thanh) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px;
  background: var(--giay); border-bottom: 3px solid var(--muc);
}
#thanh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; background: repeating-linear-gradient(90deg, #f6cf57 0 18px, transparent 18px 26px); opacity: .7; }
#nutNha { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 16px 0 8px; background: #f6cf57; font-size: 19px; }
#nutNha .ic { width: 42px; height: 42px; }
#nutNha:active, #nutLui:active, .nut-nghe:active, .nut-lon:active, .mui-ten:active { transform: translate(2px, 3px); box-shadow: none; }
#nutLui { width: 58px; height: 58px; flex: none; padding: 8px; background: var(--giay-trang); }
#tieuDe { flex: 1; margin: 0; font-size: clamp(20px, 4.5vw, 30px); font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sao { display: flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; background: var(--giay-trang); font-size: 22px; font-weight: 700; }
#sao i { width: 30px; height: 30px; display: block; }
#sao.nay { animation: nay .6s; }
body.o-nha #nutNha { visibility: hidden; width: 0; padding: 0; border: 0; box-shadow: none; margin-right: -10px; }
body.o-nha #tieuDe::before { content: "Bé Học Vui"; }
@media (max-width: 520px) { #nutNha .chu { display: none; } #nutNha { padding: 0 8px; } }

.man { min-height: 100%; padding: calc(var(--thanh) + env(safe-area-inset-top) + 22px) max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); max-width: 1100px; margin: 0 auto; }

/* ---------- Trang chủ ---------- */
.chao { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.be-to { padding: 0; width: clamp(130px, 30vw, 200px); flex: none; }
.be-to.nhun { animation: nhay .7s; }
.bong-noi { position: relative; background: var(--giay-trang); padding: 14px 18px; font-size: clamp(18px, 3.6vw, 24px); font-weight: 700; max-width: 380px; line-height: 1.35; }
.luoi-muc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 16px; }
.o-muc {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 170px; padding: 16px 10px 12px; background: var(--mau); transition: transform .12s;
}
.o-muc:nth-child(3n+1) { transform: rotate(-1.2deg); } .o-muc:nth-child(3n+2) { transform: rotate(.8deg); } .o-muc:nth-child(3n) { transform: rotate(-.4deg); }
.o-muc::before { content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 253, 247, .75); border-left: 2px dashed rgba(59, 42, 32, .15); border-right: 2px dashed rgba(59, 42, 32, .15); }
.o-muc:active { transform: translate(2px, 3px) !important; box-shadow: none; }
.o-muc .hinh { width: clamp(84px, 19vw, 116px); }
.o-muc .ten { font-size: clamp(21px, 4.4vw, 27px); font-weight: 700; text-align: center; line-height: 1.2; }
.o-muc.da::after, .o-convat.da::after, .o-chu.da::after { content: "★"; position: absolute; top: 4px; right: 10px; font-size: 24px; color: #e9a93a; }
.luoi-con .o-muc { min-height: 210px; }
.luoi-kp .ten { font-size: clamp(18px, 3.6vw, 23px); }
.nut-ph { display: block; margin: 30px auto 0; font-size: 15px; font-weight: 500; color: var(--muc-nhat); text-decoration: underline dashed; padding: 10px; }

/* ---------- Mây Bông ---------- */
.may-bong { width: 100%; height: auto; display: block; overflow: visible; }
.may-bong .mb-troi { animation: troiMay 3.2s ease-in-out infinite; }
.may-bong .mb-mat { animation: chop 4s infinite; transform-origin: 115px 112px; }
.may-bong .mb-z { animation: zz 2.4s ease-in-out infinite; }
@keyframes troiMay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes chop { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes zz { 0%, 100% { opacity: .3; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes nhay { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(-3deg); } 70% { transform: translateY(0) scale(1.04, .94); } }
@keyframes nay { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes lac { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px) rotate(-2deg); } 40%, 80% { transform: translateX(10px) rotate(2deg); } }

#beVui { position: fixed; right: 10px; bottom: -200px; width: 150px; z-index: 40; pointer-events: none; }
#beVui.hien { animation: beLen 1.8s ease-out; }
@keyframes beLen { 0% { bottom: -200px; } 25%, 70% { bottom: 6px; transform: rotate(-5deg); } 45% { transform: rotate(5deg); } 100% { bottom: -200px; } }

#phao { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
#phao span { position: absolute; top: -60px; width: 28px; animation: roiPhao 1.9s ease-in forwards; }
#phao span.manh { width: 11px; height: 15px; border: 2px solid rgba(59, 42, 32, .5); }
@keyframes roiPhao { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }

/* ---------- Màn bắt đầu + nghỉ mắt ---------- */
#batDau, #nghi { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: inherit; background-color: var(--giay); text-align: center; padding: 20px; }
#batDau .be-bd { width: 230px; margin: 0 auto; }
#batDau h1 { font-size: 48px; font-weight: 700; margin: 4px 0 16px; text-shadow: 3px 3px 0 #f4a6b8; }
#batDau button { width: 120px; height: 120px; padding: 26px 22px 26px 30px; background: #8cc084; border: 3px solid var(--muc); border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; box-shadow: var(--bong); animation: tho 1.6s infinite; }
#batDau p { font-size: 19px; color: var(--muc-nhat); }
@keyframes tho { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#nghi { background-color: #e7eef8; }
.nghi-trong .may-bong { width: 220px; margin: 0 auto; }
.nghi-trong h2 { font-size: 32px; margin: 10px 0; }
.nghi-trong p { font-size: 21px; }
.dem-nguoc { font-size: 60px; font-weight: 700; }

/* ---------- Nút dùng chung ---------- */
.nut-nghe { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 16px; padding: 10px 20px; background: var(--giay-trang); font-size: clamp(19px, 3.8vw, 24px); }
.man > .nut-nghe { display: flex; }
.cham-mau { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--muc); }
.nut-lon { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--mau); font-size: clamp(18px, 3.8vw, 23px); }
.hang-nut { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.mui-ten { width: 68px; height: 68px; flex: none; padding: 12px; background: var(--giay-trang); }
.mui-ten .ve.nho { width: 100%; height: 100%; }
.vong { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.vong i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--muc); background: var(--giay-trang); }
.vong i.xong { background: #f6cf57; }
.goi-y { font-size: 18px; color: var(--muc-nhat); }
.lac { animation: lac .45s; }

/* ---------- Ô chọn đáp án ---------- */
.luoi-chon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 680px; margin: 0 auto; }
.o-chon { aspect-ratio: 1; padding: 12%; background: var(--giay-trang); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: clamp(56px, 14vw, 100px); font-weight: 700; line-height: 1; }
.o-chon.chu, .o-chon.so { text-shadow: 4px 4px 0 var(--mau); }
.o-chon small { font-size: .55em; }
.o-chon:active { transform: translate(2px, 3px); box-shadow: none; }
.o-chon.dung, .o-vat.dung, .ben.dung { background: #e3f1d9; animation: nay .6s; }
.o-chon.mo { opacity: .3; }
.nut-tiep { display: flex; align-items: center; gap: 8px; margin: 22px auto 0; padding: 14px 30px; background: #8cc084; border: 3px solid var(--muc); border-radius: var(--vien-tay); box-shadow: var(--bong); font-size: 26px; animation: tho 1.3s infinite; }

/* ---------- Chữ cái ---------- */
.luoi-chu { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; }
.o-chu { aspect-ratio: 1; background: var(--mau); font-size: 46px; font-weight: 700; position: relative; display: flex; align-items: baseline; justify-content: center; padding-top: 16px; gap: 2px; }
.o-chu small { font-size: 30px; }
.o-chu.da::after { top: -4px; right: 4px; font-size: 20px; }
.the-chu { display: flex; align-items: center; gap: 12px; justify-content: center; }
.the-giua { flex: 1; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 18px 14px; background: var(--giay-trang); position: relative; }
.the-giua::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 22px; transform: translateX(-50%) rotate(2deg); background: color-mix(in srgb, var(--mau) 70%, transparent); }
.chu-to { font-size: clamp(100px, 24vw, 160px); font-weight: 700; line-height: 1; text-shadow: 6px 6px 0 var(--mau); }
.chu-thuong { font-size: .6em; margin-left: 12px; }
.hinh-to { width: clamp(140px, 34vw, 210px); }
.hinh-to.nay { animation: nhay .7s; }
.tu { font-size: clamp(32px, 7.5vw, 50px); font-weight: 700; }
.tu .nhan { color: #c2410c; text-decoration: underline wavy var(--mau); text-underline-offset: 8px; }
@media (max-width: 560px) { .the-chu .mui-ten { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; } .the-chu .mui-ten:first-child { left: 16px; } .the-chu .mui-ten:last-child { right: 16px; } .the-giua { margin-bottom: 84px; } }

/* ---------- Số ---------- */
.khung-so { display: flex; align-items: center; gap: 14px; background: var(--giay-trang); padding: 12px 18px; margin-bottom: 18px; min-height: 150px; }
.so-to { font-size: clamp(76px, 17vw, 110px); font-weight: 700; text-shadow: 5px 5px 0 #7fb3e0; min-width: 1.4em; text-align: center; }
.khung-vat { flex: 1; display: flex; align-items: center; justify-content: center; }
.trong { font-size: 21px; color: var(--muc-nhat); }
.luoi-so { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
@media (max-width: 560px) { .luoi-so { grid-template-columns: repeat(5, 1fr); } }
.o-so { aspect-ratio: 1; background: var(--mau); font-size: clamp(26px, 6vw, 40px); }
.o-so.chon { background: var(--giay-trang); animation: nay .4s; }
.nhom-vat { display: grid; grid-template-columns: repeat(5, 1em); gap: 6px 8px; justify-content: center; font-size: clamp(32px, 7.5vw, 48px); }
.nhom-vat span { width: 1em; height: 1em; display: block; }
.nhom-vat.nhieu { font-size: clamp(26px, 6vw, 38px); }
.khung-dem { background: var(--giay-trang); padding: 18px; margin-bottom: 8px; }
.khung-dem .nhom-vat { font-size: clamp(50px, 14vw, 80px); gap: 8px 12px; }
.khung-dem .nhom-vat.nhieu { font-size: clamp(38px, 10vw, 58px); gap: 6px 8px; }
.dem-duoc span { cursor: pointer; position: relative; transition: transform .15s; }
.dem-duoc span.da { transform: scale(.85); opacity: .5; }
.dem-duoc span.da::after { content: "✓"; position: absolute; right: -4px; bottom: -6px; font-size: .5em; color: #3f7d3a; font-weight: 700; }
.so-dem-dc { text-align: center; font-size: 34px; font-weight: 700; color: #3f7d3a; margin-bottom: 8px; }
.hai-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ben { position: relative; min-height: 260px; padding: 16px 8px; background: var(--giay-trang); display: flex; align-items: center; justify-content: center; }
.ben:nth-child(2) { border-radius: var(--vien-tay2); }
.ben .nhom-vat { grid-template-columns: repeat(3, 1em); font-size: clamp(36px, 8.5vw, 58px); }
.nhan-so { position: absolute; top: 6px; right: 12px; font-size: 40px; font-weight: 700; text-shadow: 3px 3px 0 #7fb3e0; }
.khung-noi { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: clamp(50px, 12vw, 140px); max-width: 760px; margin: 0 auto; }
.day-noi { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.cot { display: flex; flex-direction: column; gap: 16px; }
.o-noi { background: var(--giay-trang); min-height: 110px; }
.o-noi.so { font-size: 58px; text-shadow: 4px 4px 0 var(--mau); }
.o-noi.hinh .nhom-vat { font-size: clamp(26px, 6.4vw, 40px); }
.o-noi.dang { outline: 4px dashed #7fb3e0; outline-offset: 4px; animation: tho 1s infinite; }
.o-noi.xong { background: #e3f1d9; }

/* ---------- Con vật ---------- */
.luoi-convat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.o-convat { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px; background: var(--mau); }
.o-convat .hinh { width: 96px; }
.o-convat .ten { font-size: 23px; }
.xem-3d { position: relative; }
.khung-3d { position: relative; height: min(56vh, 520px); overflow: hidden; background: linear-gradient(#d9ecf7 0%, #f1f6ee 62%, #e3efd5 100%); touch-action: none; }
.khung-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.dang-mo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; text-align: center; }
.cho-mo { display: inline-block; width: 160px; animation: tho 1.2s infinite; }
.huong-dan-xoay { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(255, 253, 247, .92); border: 2px solid var(--muc); border-radius: 20px; padding: 6px 14px; font-size: 15px; width: max-content; max-width: 88%; text-align: center; pointer-events: none; transition: opacity .6s; }
.huong-dan-xoay.an { opacity: 0; }
.xem-3d .mui-ten { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.xem-3d .mui-ten.trai { left: 10px; } .xem-3d .mui-ten.phai { right: 10px; }
.xem-3d .mui-ten:active { transform: translateY(calc(-50% + 3px)); }
.thong-tin-convat { text-align: center; margin-top: 12px; }
.ten-convat { font-size: clamp(30px, 7vw, 42px); font-weight: 700; }
.gioi-thieu { font-size: 18px; color: var(--muc-nhat); max-width: 620px; margin: 12px auto 0; line-height: 1.55; }

/* ---------- Màu ---------- */
.khung-mau { display: flex; align-items: center; gap: 18px; background: var(--giay-trang); padding: 16px; margin-bottom: 18px; min-height: 160px; }
.vet-mau { width: 120px; height: 120px; flex: none; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; background: #eee; border: 3px solid var(--muc); filter: url(#sap); }
.vet-mau.nay { animation: nay .5s; }
.vi-du { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vi-du b { font-size: clamp(28px, 6.5vw, 40px); }
.vi-du span:not(.goi-y) { display: flex; gap: 6px; }
.vi-du span .ve { width: 58px; }
.luoi-mau { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.o-mau, .but-mau { aspect-ratio: 1; background: var(--mau); border: 3px solid var(--muc); border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; box-shadow: var(--bong); }
.o-mau.chon { transform: scale(1.12) rotate(-6deg); outline: 4px dashed var(--muc); outline-offset: 4px; }
.luoi-timmau { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 620px; margin: 0 auto; }
.o-vat { aspect-ratio: 1; padding: 14%; background: var(--giay-trang); position: relative; }
.o-vat.dung::after { content: "✓"; position: absolute; top: 2px; right: 10px; font-size: 30px; color: #3f7d3a; font-weight: 700; }
.khung-to { background: #fff; overflow: hidden; max-width: 620px; margin: 0 auto; }
.khung-to svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.khung-to .vung { stroke: var(--muc); stroke-width: 5; stroke-linejoin: round; cursor: pointer; transition: fill .2s; }
.bang-mau { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.but-mau { width: 56px; height: 56px; aspect-ratio: auto; }
.but-mau.chon { transform: translateY(-8px) scale(1.12); outline: 4px dashed var(--muc); outline-offset: 3px; }

/* ---------- Câu đố ---------- */
.the-do { text-align: center; background: var(--giay-trang); padding: 14px 16px 16px; margin-bottom: 20px; }
.goi-y-do { display: flex; flex-direction: column; align-items: center; }
.goi-y-do small { font-size: 17px; color: var(--muc-nhat); }
.goi-y-do span { display: flex; gap: 8px; justify-content: center; }
.goi-y-do span .ve { width: clamp(76px, 17vw, 104px); }
.the-do .nut-nghe { margin: 8px auto; }
.cau-hoi { font-size: clamp(18px, 3.8vw, 23px); margin: 6px 0 0; color: var(--muc-nhat); line-height: 1.4; }

/* ---------- Khám phá ---------- */
.san-khau { position: relative; height: min(50vh, 440px); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.nen-dat { background: linear-gradient(#dcebf5 0 62%, #b98a62 62% 100%); }
.nen-bien { background: linear-gradient(#dcebf5 0 55%, #8fbce0 55% 100%); }
.nen-troi { background: linear-gradient(#cfe3f3, #f1f6fa); }
.nen-duong { background: linear-gradient(#dcebf5 0 62%, #c9c4b8 62% 100%); }
.nen-dem { background: radial-gradient(circle at 70% 30%, #4a5a8c, #262c4a); }
.nen-vutru { background: radial-gradient(circle at 50% 50%, #2f3557, #15182a); }
.vat-canh { width: calc(clamp(96px, 22vw, 150px) * var(--to)); }
.vat-canh.tren { position: absolute; top: 12px; right: 18px; width: clamp(64px, 14vw, 96px); }
.roi { animation: roi 2.2s ease-in infinite; }
.moc { animation: moc 1.6s ease-out both; transform-origin: bottom center; }
.xoay { animation: xoay 14s linear infinite; }
.vat-canh.nay { animation: nayCham 2s ease-in-out infinite; }
.song { animation: song 2.4s ease-in-out infinite; }
.bay { animation: bay 2.6s ease-out infinite; }
.troi { animation: troi 6s ease-in-out infinite; } .troi2 { animation: troi 7s ease-in-out infinite reverse; }
.lung { animation: lung 1.4s ease-in-out infinite; }
.vat-canh.tho { animation: tho 3s ease-in-out infinite; }
@keyframes roi { 0% { transform: translateY(-90px); opacity: .6; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(30px); opacity: .6; } }
@keyframes moc { from { transform: scale(.35); } to { transform: scale(1); } }
@keyframes xoay { to { transform: rotate(360deg); } }
@keyframes nayCham { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes song { 0%, 100% { transform: translateX(-18px); } 50% { transform: translateX(18px); } }
@keyframes bay { 0% { transform: translateY(80px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes troi { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }
@keyframes lung { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.luoi-cham { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 10px; }
.o-cham { width: clamp(96px, 24vw, 140px); aspect-ratio: 1; padding: 10px; background: rgba(255, 253, 247, .9); display: flex; align-items: center; justify-content: center; }
.o-cham .ve, .o-vat .ve, .o-chon .ve { width: 100%; height: 100%; }
.o-vat { display: flex; align-items: center; justify-content: center; }
.o-cham.nay { animation: nhay .7s; }
.loi-ke { font-size: clamp(19px, 4vw, 25px); text-align: center; margin: 16px auto; max-width: 700px; line-height: 1.45; }
.hang-trang { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hang-trang .nut-nghe { margin: 0; width: 68px; height: 68px; justify-content: center; padding: 12px; }
.hang-trang .nut-nghe .ve.nho { width: 100%; height: 100%; }
.so-trang { font-size: 19px; color: var(--muc-nhat); }

/* ---------- Bố mẹ ---------- */
.cua-ph, .ph { max-width: 640px; margin: 0 auto; background: var(--giay-trang); padding: 20px; }
.cua-ph { text-align: center; }
.phep { font-size: 42px; font-weight: 700; margin: 12px 0; }
.luoi-dap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.luoi-dap button, .chon-hen button, .xoa-td { padding: 12px 8px; border-radius: 14px; border: 2.5px solid var(--muc); background: var(--giay); font-size: 19px; }
.ph section { border-bottom: 2px dashed #e4d6bd; padding: 8px 0 16px; }
.ph section:last-child { border: 0; }
.ph h3 { margin: 8px 0; font-size: 21px; }
.ph p, .ph li { font-size: 17px; line-height: 1.55; font-weight: 500; }
.chon-hen { display: flex; flex-wrap: wrap; gap: 8px; }
.chon-hen button { padding: 8px 14px; font-size: 17px; }
.chon-hen button.chon { background: #f6cf57; }
.xoa-td { font-size: 15px; background: #fbe4df; margin-top: 8px; }
.ky { display: inline-block; padding: 0 6px; border: 2px solid #ccc; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------- Bản 2: đếm hình to hơn, cảnh khám phá đứng trên đất, tiếng Anh ---------- */
.nhom-vat { grid-template-columns: repeat(var(--cot, 5), 1em); }
.khung-dem .nhom-vat, .khung-dem .nhom-vat.nhieu { font-size: min(112px, calc((100vw - 120px) / var(--cot, 5))); gap: 10px 12px; }
.ben .nhom-vat { grid-template-columns: repeat(3, 1em); font-size: min(76px, calc((50vw - 60px) / 3)); }
.o-noi.hinh .nhom-vat { font-size: min(46px, calc((60vw - 60px) / var(--cot, 5))); }
.san-khau.nen-dat:not(.co-cham), .san-khau.nen-duong:not(.co-cham) { align-items: flex-end; padding-bottom: calc(min(50vh, 440px) * 0.36); }
.san-khau.nen-dat .vat-canh.roi { align-self: center; }
.choi-anh { width: 100%; min-height: 130px; flex-direction: row; gap: 18px; }
.choi-anh .hinh { width: 80px; }
.luoi-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.the-anh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; background: var(--giay-trang); border: 3px solid var(--muc); border-radius: var(--vien-tay); box-shadow: var(--bong); }
.the-anh:nth-child(even) { border-radius: var(--vien-tay2); }
.the-anh .hinh { width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; }
.the-anh b { font-size: 28px; color: #c2410c; }
.the-anh small { font-size: 16px; color: var(--muc-nhat); font-weight: 500; }
.the-anh.nay { animation: nay .5s; }
.vet-anh { display: block; width: 76px; height: 76px; border: 3px solid var(--muc); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
.so-anh { font-size: 64px; line-height: 1; text-shadow: 4px 4px 0 #bcd8f0; }
.o-chon .vet-anh { width: 80%; height: 80%; }
.o-chon .so-anh { font-size: 1em; }

/* ---------- Bản 3: câu đố tình huống ---------- */
.cau-hoi.lon { font-size: clamp(21px, 4.6vw, 28px); color: var(--muc); font-weight: 700; margin: 4px 0 10px; }
.tinh-huong { grid-template-columns: repeat(var(--so, 3), 1fr); }
.o-chon.co-chu { flex-direction: column; aspect-ratio: auto; padding: 12px 8px; gap: 6px; box-shadow: 4px 6px 0 var(--mau); }
.o-chon.co-chu .ve { width: 78%; height: auto; }
.o-chon.co-chu span { font-size: clamp(15px, 3.6vw, 20px); line-height: 1.25; }
.vat-canh { width: calc(clamp(100px, 26vw, 170px) * var(--to)); }