/* hoc.css — trang /hoc "Bé mới chơi". Vùng chạm >=88px (bé <5 tuổi). Ảnh vuông, nền trắng hoà vào thẻ trắng bo góc. */
:root{--bg:#fff7e6;--ink:#3b2a14;--card:#fff;--main:#ff8a3d;--alt:#2f9e8f;--soft:#ffe9c7;--hit:88px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
#app{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--hit)}
.bar .sp{flex:1}
.btn{min-width:var(--hit);min-height:var(--hit);border-radius:26px;background:var(--card);box-shadow:0 3px 0 #e8d3ac;font-size:28px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 14px}
.btn.on{background:var(--alt);color:#fff;box-shadow:0 3px 0 #1f7266}
.voice{font-size:16px;min-width:var(--hit)}
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:0}
.foot{font-size:12px;line-height:1.4;color:#6b5a40;text-align:center;padding:10px 4px 14px;max-width:560px;margin:0 auto}
/* màn Play / REST */
.big{width:min(70vw,60vh,300px);height:min(70vw,60vh,300px);border-radius:50%;background:var(--main);color:#fff;font-size:min(30vw,110px);box-shadow:0 8px 0 #cc6a22;display:flex;align-items:center;justify-content:center}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.cap{font-size:14px;color:#6b5a40;text-align:center;margin:6px 0}
/* 4 ô bộ */
.sets{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:560px}
.tile{background:var(--card);border-radius:30px;box-shadow:0 5px 0 #e8d3ac;padding:10px 10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:var(--hit)}
.tile .pic{width:min(100%,26vh,190px)}
.tile .vi{font-size:15px;font-weight:700;color:#6b5a40}
/* ảnh */
.pic{aspect-ratio:1/1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;border-radius:24px;overflow:hidden;background:#fff}
.pic.n1 .im{width:100%;height:100%}
.pic.n2 .im,.pic.n3 .im{width:50%;height:50%}
.im{display:block;object-fit:contain;background:#fff}
.im.fb{border-radius:50%;background:var(--tint,#ffe0b8);transform:scale(.8)}
/* thẻ học / tìm */
.card{background:var(--card);border-radius:34px;box-shadow:0 6px 0 #e8d3ac;padding:10px;display:block;border:0}
.card.learn{width:min(100vw - 164px,100vh - 190px,360px)}
.card .pic{width:100%}
.row{display:flex;gap:12px;justify-content:center;align-items:center;width:100%}
.card.find{width:min((100vw - 48px) / var(--n,2),100vh - 190px,300px)}
.bounce{animation:bounce .6s ease}
@keyframes bounce{30%{transform:translateY(-14px) scale(1.06)}60%{transform:translateY(0) scale(.98)}}
.shake{animation:shake .45s ease}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.glow{animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 10px #ffd23f,0 6px 0 #e8d3ac}}
.star{position:fixed;font-size:34px;pointer-events:none;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),-90px) scale(1.4);opacity:0}}
.wave{font-size:min(40vw,45vh,220px);animation:pulse 1s ease-in-out infinite}
@media (orientation:landscape) and (max-height:520px){.sets{grid-template-columns:repeat(4,1fr);max-width:none}.tile .pic{width:min(100%,32vh)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
a.btn{text-decoration:none}

/* ---- theme kẹo pastel (joy.css): chỉ nâng màu/bo góc/font/nền; bố cục + vùng chạm >=88px giữ nguyên ---- */
:root{--bg:#FFF8EC;--ink:#3B2A20;--main:#FF9F7A;--alt:#1F7A6B;--soft:#FFE9C7}
html,body{font-family:var(--joy-font);background:var(--joy-bg);background-attachment:fixed}
.btn,.tile,.card{border:3px solid #fff;box-shadow:0 6px 0 rgba(120,80,40,.25),0 10px 18px rgba(120,80,40,.12);transition:transform .08s ease-out,box-shadow .08s ease-out}
.btn:active,.tile:active,.card:active,.big:active{transform:translateY(4px) scale(.98);box-shadow:0 2px 0 rgba(120,80,40,.25)}
.btn.on{background:var(--alt);color:#fff;box-shadow:0 5px 0 #145549}
.tile{border-radius:32px;background:#fff}
.tile:nth-child(4n+1){background:#FFE9E0}.tile:nth-child(4n+2){background:#E1F6EE}.tile:nth-child(4n+3){background:#E3F3FF}.tile:nth-child(4n+4){background:#FFF4C2}
.tile .vi{font-size:18px;font-weight:700;color:var(--ink)}
.card{border-radius:36px}
.big{background:radial-gradient(circle at 35% 30%,#FFC2A8,var(--main) 60%);border:6px solid #fff;box-shadow:0 10px 0 #E27C57,0 16px 24px rgba(120,80,40,.2)}
.cap,.foot{color:var(--joy-ink-soft)}
.pic{border-radius:26px}
.bar .joy-host{align-self:center}
.bar{gap:6px}.voice{padding:0 8px}
.bar .joy-host{margin-top:14px}