/* Mini-game (mẫu Trường học). Phòng = canvas lưới gốc phóng NEAREST xB; chữ là HTML thật đặt lên đúng toạ độ lưới. */
.mg{position:fixed;inset:0;z-index:300;background:#141228;color:#fff;display:flex;flex-direction:column;opacity:0;transition:opacity .25s;font-family:"Be Vietnam Pro",system-ui,sans-serif}
.mg.in{opacity:1}
html.mg-open #space-app .sp-nav,html.mg-open #space-app .sp-top{visibility:hidden}
.mg-top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.mg-title{font-weight:800;font-size:18px;margin:0}
.mg-steps{display:flex;gap:6px;flex:1}
.mg-steps i{font-style:normal;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#b9b6d6}
.mg-steps i.on{background:#ffd23f;color:#3b2f00}
.mg-steps i.done{color:#8fe0a8}
.mg-skip,.mg-out{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;color:#fff;background:rgba(255,255,255,.14)}
.mg-out{background:#fff;color:#1d1b3a}
.mg-body{flex:1;display:flex;gap:16px;padding:14px 16px;min-height:0}
.mg-stagewrap{position:relative;overflow:hidden;flex:none;align-self:flex-start}
.mg-stage{position:relative}
.mg-stage canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.mg-board{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--B)*1px);padding:0 calc(var(--B)*3px)}
.mg-board .chalk{margin:0;font-family:"Be Vietnam Pro",sans-serif;font-weight:700;font-size:calc(var(--B)*6px);line-height:1.15;color:#f4f1e6;text-shadow:0 0 1px #fff;opacity:0;animation:chalk .6s forwards;letter-spacing:.02em}
.mg-board .chalk::before{content:"✓ ";color:#ffd23f}
@keyframes chalk{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:.95;clip-path:inset(0 0 0 0)}}
.mg-ledger{position:absolute;color:#3a2b14;font-size:calc(var(--B)*3.6px);line-height:calc(var(--B)*8px);padding:0 calc(var(--B)*1px);overflow:hidden}
.mg-ledger b{display:block;font-size:calc(var(--B)*3.8px);text-align:center}
.mg-ledger ol{margin:0;padding:0;list-style:none}
.mg-ledger li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.mg-ledger li.new{color:#b3261e;animation:rowin .7s}
@keyframes rowin{from{background:#ffe27a;transform:translateX(-6px)}to{background:transparent;transform:none}}
.mg-clock{position:absolute;right:8px;top:calc(var(--B)*56px);font-weight:800;font-size:20px;background:rgba(10,10,30,.7);border-radius:10px;padding:2px 10px}
.mg-clock:empty{display:none}
.mg-phone{position:absolute;left:8px;bottom:8px;width:44px;height:64px;border-radius:9px;background:#24223a;border:3px solid #ffd23f;display:flex;align-items:flex-end;justify-content:center;font-size:11px;font-weight:800;padding-bottom:4px}
.mg-phone::before{content:"";position:absolute;inset:7px 5px 18px;border-radius:3px;background:#3b7bd8}
.mg-phone.ring{animation:ring .12s 10 alternate;border-color:#ff5a1f}
.mg-phone.ring::before{background:#8fd0ff}
@keyframes ring{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.mg-say{position:absolute;left:12px;right:12px;bottom:12px;margin:0;background:#fff;color:#1d1b3a;font-weight:600;font-size:15px;line-height:1.4;padding:10px 14px;border-radius:14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:.25s}
.mg-say.on{opacity:1;transform:none}
.mg-side{flex:1;min-width:280px;max-width:460px;display:flex;flex-direction:column;background:#fff;color:#1d1b3a;border-radius:16px;overflow:hidden}
.mg-chat-h{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0068ff;color:#fff;font-weight:700}
.mg-zalo{background:#fff;color:#0068ff;font-weight:900;font-size:12px;border-radius:6px;padding:1px 6px}
.mg-chat{flex:1;min-height:0;position:relative;contain:paint;overflow-y:auto;padding:10px;background:#e9f1fb;min-height:160px}
.mg-msg{display:flex;gap:6px;align-items:flex-end;margin:6px 0}
.mg-msg.me{flex-direction:row-reverse}
.mg-msg.sys{justify-content:center}
.mg-msg.sys .mg-b{background:#cfdcef;color:#36507a;font-size:12.5px;font-weight:700;padding:3px 10px}
.mg-av{width:32px;height:64px;object-fit:contain;object-position:bottom;image-rendering:pixelated;flex:none}
.mg-av.cham{width:36px;height:36px}
.mg-b{max-width:80%;background:#fff;border-radius:12px;padding:6px 10px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mg-msg.me .mg-b{background:#d6e9ff}
.mg-b p{margin:0;font-size:14.5px;line-height:1.4}
.mg-n{display:block;font-size:11.5px;font-weight:700;color:#5a6b8a}
.mg-tag{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px}
.mg-tag.row{background:#ddf6e7;color:#0b6b37}.mg-tag.fwd{background:#ffe6d6;color:#a3400f}.mg-tag.lock{background:#efe6ff;color:#5a2fb0}
.typing p{display:flex;gap:4px;padding:4px 0}.typing i{width:6px;height:6px;border-radius:50%;background:#7a8bb0;animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.mg-try{padding:10px 12px;border-top:1px solid #e3e6ef}
.mg-invite{margin:0 0 8px;font-weight:700;font-size:14.5px}
.mg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.mg-chip{font:inherit;font-size:13.5px;border:1px solid #0068ff;color:#0068ff;background:#fff;border-radius:999px;padding:5px 10px;cursor:pointer;text-align:left}
.mg-form{display:flex;gap:6px}
.mg-form input{flex:1;font:inherit;font-size:15px;border:1px solid #c9cfdd;border-radius:999px;padding:8px 12px;min-width:0}
.mg-form button{font:inherit;font-weight:800;border:0;border-radius:999px;padding:8px 16px;background:#0068ff;color:#fff;cursor:pointer}
.mg-note{margin:6px 0 0;font-size:12px;color:#6b6f80}
.mg-actions{padding:8px 12px}
.mg-zalo-btn{display:block;text-align:center;text-decoration:none;font-weight:800;color:#fff;background:linear-gradient(120deg,#ffb347,#ff5a1f 55%,#e6206e);border-radius:999px;padding:10px}
.mg-credit{margin:0;padding:6px 12px 10px;font-size:11.5px;color:#6b6f80;text-align:center}
.mg-mob .mg-body{flex-direction:column;padding:8px;gap:8px;overflow-y:auto}
.mg-mob .mg-stagewrap{width:100%}
.mg-mob .mg-side{max-width:none;min-width:0;flex:none}
.mg-mob .mg-chat{max-height:260px}
.mg-mob .mg-steps{order:3;flex-basis:100%}
.mg-mob .mg-say{font-size:13.5px}
.mg-mob .mg-clock{font-size:16px}