/* ===================== BẢN 3: bổ sung ===================== */
/* trang chủ: 3 khu học + cột phần thưởng / kiểm tra */
.zcol{display:grid;grid-template-rows:1fr 1fr;gap:1.4rem;min-height:0}
.zone.small{flex-direction:column;gap:.2rem;padding:.4rem .6rem;justify-content:center;text-align:center;overflow:hidden}
.zone.small .ze{width:5rem;height:5rem;font-size:3rem;border-radius:1.3rem;flex-shrink:0}
.zone.small h2{font-size:1.7rem;line-height:1.15;margin:0}
.zone.small p{font-size:1.15rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-test{background:linear-gradient(160deg,#63e6be,#12b886);box-shadow:0 .6rem 0 #087f5b}
.giftbtn{animation:wiggle 1.2s ease-in-out infinite;background:#fff3bf}
/* lưới trò chơi */
.games{grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:1.1rem}
.gcard{position:relative;padding:.8rem .5rem}
.gcard .gi{width:6.8rem;height:6.8rem;font-size:4.2rem;border-radius:2rem}
.gcard .gn{font-size:1.8rem;min-height:4rem}
.gcard .gs{font-size:1.7rem}
.tagc{position:absolute;top:.5rem;right:.5rem;font-size:1.1rem;font-weight:800;background:#40c057;color:#fff;border-radius:1rem;padding:0 .6rem}
.tagc.tagm{background:#fa5252}
.tag5{position:absolute;top:.5rem;left:.5rem}
/* thẻ to dùng cho trò nói */
.bigl{height:15rem;display:grid;place-items:center}.bigl .hw{font-size:8.5rem;line-height:1;color:#d6336c}.chalk .numl{font-size:14rem;line-height:1.1;color:#fff;text-shadow:0 0 .4rem rgba(255,255,255,.35)}
.bign{font-size:12rem;font-weight:800;line-height:1;color:#e8590c}
.bigs{font-size:2.6rem;font-weight:700;color:#868e96;display:flex;align-items:center;gap:.6rem}
.bigs .emo{font-size:4rem}.bigs .hw{font-size:2.8rem}
.pcard.spk{min-width:24rem;min-height:24rem}
.pcard.spk .pimg{width:18rem;height:15rem}
.dotn{font-size:1.9rem;letter-spacing:.15rem;line-height:1.2;color:#e8590c;max-width:8rem;word-break:break-all;text-align:center}
.enw{font-size:2.2rem;font-weight:800;color:#364fc7;word-break:break-word;text-align:center;line-height:1.1}
/* hứng sao rơi */
.stage.sky{background:linear-gradient(180deg,#1b1f5e,#3b2a8a 60%,#6741d9)}
.twk{position:absolute;width:.4rem;height:.4rem;border-radius:50%;background:#fff;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2;transform:scale(.5)}}
.star-i{position:absolute;width:15rem;height:15rem;border:none;background:none;animation:drop var(--d) linear infinite;display:grid;place-items:center;cursor:pointer}
@keyframes drop{from{top:-30%}to{top:100%}}
.st5{position:absolute;inset:0;--c:#ffd43b;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:radial-gradient(circle at 40% 35%,#fff9db,var(--c) 65%);filter:drop-shadow(0 .4rem .8rem rgba(0,0,0,.25));animation:spinSlow 7s linear infinite}
@keyframes spinSlow{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.stl{position:relative;z-index:2;max-width:11.5rem;text-align:center;color:#1c1e21;font-weight:800;line-height:1.15;word-break:break-word;pointer-events:none;padding:.2rem;text-shadow:0 1px 3px rgba(255,255,255,.9)}
.stl .hw{font-size:3.2rem}.stl .numl{font-size:4rem}.stl .emo{font-size:3.8rem}.stl .qt{font-size:1.8rem!important;color:#183153}
.stl img{width:4.8rem;height:4.8rem;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 .2rem .5rem rgba(0,0,0,.15)}
.star-i.popped .st5{animation:popb .35s forwards!important}
.st5.hint{animation:glow 1s infinite}
/* ếch qua sông */
.stage.river{background:linear-gradient(180deg,#69db7c 0,#8ce99a 19%,#74c0fc 20%,#4dabf7 50%,#339af0 85%,#8ce99a 86%)}
.bank{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:10rem;font-size:3.8rem;z-index:2}
.btop{top:0;height:22%;display:block;background:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 1.4rem,rgba(47,158,68,.12) 1.4rem 1.8rem);border-bottom:.5rem solid #51cf66;overflow:visible}
.bbot{bottom:0;height:14%}
.goal-flower{display:inline-block;filter:drop-shadow(0 .4rem .5rem rgba(0,0,0,.25));animation:bounce 1.6s infinite;vertical-align:middle}
.wave{position:absolute;width:5rem;height:1rem;border-top:.35rem solid rgba(255,255,255,.55);border-radius:50%;animation:wob 3s ease-in-out infinite}
.frog{position:absolute;left:50%;top:91%;transform:translate(-50%,-50%);font-size:7rem;transition:left .5s ease-out,top .5s ease-out;z-index:4;filter:drop-shadow(0 .5rem .3rem rgba(0,0,0,.25))}
.frog.hop{animation:hop .5s}
@keyframes hop{50%{font-size:9.5rem}}
.pad{position:absolute;transform:translate(-50%,-50%);width:14rem;height:11rem;border:none;border-radius:50%;background:radial-gradient(circle at 50% 45%,#8ce99a,#2f9e44 70%);box-shadow:0 .6rem 0 rgba(0,60,120,.35);animation:bob 2.6s ease-in-out infinite;display:grid;place-items:center;transition:transform .3s;z-index:2}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-.8rem}}
.padl{background:#fff;border-radius:1.4rem;min-width:7rem;max-width:12.5rem;min-height:6.5rem;display:grid;place-items:center;padding:.4rem .8rem;box-shadow:0 .3rem 0 #2b8a3e;word-break:break-word;text-align:center}
.padl .hw{font-size:3.8rem;color:#d6336c}.padl .numl{font-size:4.4rem;color:#e8590c}.padl .emo{font-size:4.4rem}.padl .qt{font-size:1.8rem!important;color:#183153}
.padl img{width:5.5rem;height:5.5rem;object-fit:contain}
.pad.sink{transform:translate(-50%,-50%) scale(.6);opacity:.4}
.pad.hint .padl{animation:glow 1s infinite}
/* camera */
.stage.cam{background:#111}
.camv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.95}
.camtip{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:1.9rem;font-weight:800;padding:.4rem 2rem;border-radius:2rem;white-space:nowrap;z-index:10;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.4)}
.camnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.96);font-size:2.2rem;font-weight:800;padding:1.4rem 2.4rem;border-radius:2rem;text-align:center;max-width:85%;box-shadow:0 1rem 3rem rgba(0,0,0,.35);z-index:20}
.cbub{--c:#4dabf7;--p:0%;position:absolute;margin:-7.5rem 0 0 -7.5rem;width:15rem;height:15rem;border:none;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.92) 0 10%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.12) 65%);box-shadow:0 .8rem 2.5rem rgba(0,0,0,.3),inset 0 0 0 .5rem var(--c),inset 0 0 2rem rgba(255,255,255,.5);display:grid;place-items:center;animation:wob 3s ease-in-out infinite;transition:transform .2s,box-shadow .2s;z-index:5}
.cring{position:absolute;inset:-.8rem;border-radius:50%;background:conic-gradient(#ffd43b var(--p),transparent 0);-webkit-mask:radial-gradient(circle,transparent 64%,#000 65%);mask:radial-gradient(circle,transparent 64%,#000 65%)}
.clab{background:#fff;border-radius:50%;width:10.5rem;height:10.5rem;display:grid;place-items:center;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.25);padding:.6rem;text-align:center;word-break:break-word}
.clab .hw{font-size:4.2rem;color:#d6336c}.clab .numl{font-size:4.8rem;color:#e8590c}.clab .emo{font-size:4.8rem}.clab .qt{font-size:1.7rem!important;color:#183153}
.clab img{width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover}
.cbub.touch{transform:scale(1.08);box-shadow:inset 0 0 0 .6rem #ffd43b,0 0 3rem 1.5rem rgba(255,212,59,.9)}
.cbub.popped{animation:popb .4s forwards}
.cbub.hint{animation:glow 1s infinite}
.huntring{--c:#ff4d4f;--p:0%;position:absolute;left:50%;top:50%;margin:-10rem 0 0 -10rem;width:20rem;height:20rem;border-radius:50%;border:.8rem dashed var(--c);background:conic-gradient(rgba(255,255,255,.45) var(--p),transparent 0);animation:pulse 2s infinite;z-index:5}
.huntwant,.huntseen{position:absolute;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);border-radius:2.5rem;padding:.4rem 2rem;font-size:2.2rem;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:.8rem;z-index:10;box-shadow:0 .4rem 1.4rem rgba(0,0,0,.25)}
.huntwant{top:1.5rem}.huntseen{bottom:1.5rem;font-size:2rem}
.huntwant i,.huntseen i{display:inline-block;width:2.8rem;height:2.8rem;border-radius:50%;border:.25rem solid #fff;box-shadow:0 0 0 .15rem #ced4da}
.huntskip{position:absolute;right:1.5rem;bottom:1.5rem;z-index:12}
.huntfb{position:absolute;left:0;right:0;top:55%;z-index:10}
/* nói to thổi bóng */
.loudcol{align-items:center;width:min(34rem, 45vw);gap:0.8rem;display:flex;flex-direction:column}
.loudwrap{min-height:min(30rem, 48vh);width:100%;display:grid;place-items:center;overflow:visible;position:relative}
.bb.loudb{width:min(20rem, 30vw);height:min(24rem, 36vh);border-radius:50% 50% 46% 46%/56% 56% 44% 44%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.4rem;transition:transform .12s;transform-origin:50% 80%;overflow:visible;box-shadow:inset -1rem -1.2rem 0 rgba(0,0,0,.12),0 .6rem 2rem rgba(0,0,0,.15);cursor:pointer}
.bb.loudb .hw{font-size:clamp(4.5rem, 8vh, 7rem);line-height:1.1;color:#fff;text-shadow:0 .25rem .5rem rgba(0,0,0,.35)}
.bb.loudb .numl{font-size:clamp(5.5rem, 9.5vh, 8rem);line-height:1;color:#fff;text-shadow:0 .25rem .5rem rgba(0,0,0,.35)}
.bb.loudb .emo{font-size:clamp(5rem, 8.5vh, 7.5rem)}
.bb.loudb span{font-size:clamp(1.8rem, 3vh, 2.5rem);line-height:1.25;color:#fff;text-align:center;word-break:break-word;text-shadow:0 .2rem .4rem rgba(0,0,0,.35)}
.bb.loudb img{width:min(12rem, 18vh);height:min(12rem, 18vh);object-fit:contain}
.bb.loudb.blow{filter:brightness(1.15) drop-shadow(0 0 1.5rem rgba(255,212,59,.6))}
.bb.loudb.boom{animation:popb .4s forwards!important}
.meter{width:min(26rem, 40vw);height:2.2rem;border-radius:1.1rem;background:#fff;box-shadow:inset 0 .2rem .4rem rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.08);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#51cf66,#fcc419,#ff6b6b);transition:width .1s}
/* bàn phím mật khẩu */
.pinv{font-size:3rem;letter-spacing:1rem;min-height:3.6rem;line-height:1.2;color:#4c6ef5;font-weight:800}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.key{border:none;background:#e7f5ff;border-radius:1.2rem;font-size:2.4rem;font-weight:800;padding:0;line-height:1.7;box-shadow:0 .35rem 0 #a5d8ff}
.key:active{transform:translateY(.25rem);box-shadow:0 .1rem 0 #a5d8ff}
.mbox{max-height:96%;overflow-y:auto}
/* phần thưởng */
.rbody{flex:1;min-height:0;display:flex;flex-direction:column}
.albums{display:grid;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));gap:1.4rem;flex:1;min-height:0;overflow-y:auto;padding-bottom:1.2rem}
.album{border-radius:2rem;padding:1.2rem;max-height:36rem;overflow-y:auto;box-shadow:0 .4rem 0 rgba(0,0,0,.06)}
.album h3{font-size:1.7rem;white-space:nowrap;margin-bottom:.6rem}.album h3 small{color:#868e96}
.album .stk-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem}
.album .stk{font-size:2.2rem;background:rgba(255,255,255,.75);border-radius:1rem}
.petwrap{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;flex:1;min-height:0}
.petbox,.petside{background:rgba(255,255,255,.92);border-radius:1.6rem;padding:.9rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;overflow-y:auto}
.petname{font-size:2.3rem;font-weight:800;color:#7950f2}
.pet{font-size:10rem;line-height:1;animation:bounce 2s ease-in-out infinite;cursor:pointer}
.pet.egg{animation:wiggle 1.6s ease-in-out infinite}
.petbar{width:80%;height:1.6rem;border-radius:1rem;background:#f1f3f5;overflow:hidden}
.petbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd43b,#ff922b)}
.foods{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;justify-items:center;width:100%;max-width:25rem}
.food{border:none;background:#fff4e6;border-radius:1.2rem;font-size:3rem;width:5rem;height:5rem;box-shadow:0 .3rem 0 #ffd8a8;display:grid;place-items:center;position:relative}
.zoo{display:flex;flex-wrap:wrap;gap:.35rem;font-size:3rem;justify-content:center}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.7rem;flex:1;min-height:0;overflow-y:auto;padding:.3rem .4rem 1rem;width:100%;max-width:100%;box-sizing:border-box}
.badge{background:#fff;border-radius:1.3rem;padding:.6rem .35rem .5rem;text-align:center;font-weight:800;box-shadow:0 .3rem 0 #e5dbff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.badge .be{font-size:3.4rem;line-height:1.15}
.badge .bn{font-size:1.25rem;line-height:1.2;margin-top:.3rem;color:#343a40}
.badge.no{opacity:.45;filter:grayscale(1)}
.booth{display:grid;grid-template-columns:1fr 22.5rem;gap:1rem;flex:1;min-height:0}
.bstage{position:relative;border-radius:1.6rem;overflow:hidden;background:#c5e8ff;min-height:22rem;touch-action:none}
.bside{background:rgba(255,255,255,.92);border-radius:1.6rem;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.55rem;overflow-y:auto}
.props{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem}
.prop{border:none;background:#f3f0ff;border-radius:.8rem;font-size:2.4rem;aspect-ratio:1}
.sprop{position:absolute;transform:translate(-50%,-50%);font-size:7rem;line-height:1;cursor:grab;touch-action:none;filter:drop-shadow(0 .3rem .3rem rgba(0,0,0,.25))}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.photos img{width:100%;border-radius:1rem;cursor:pointer}
.flash{position:absolute;inset:0;background:#fff;animation:flash .5s forwards}
@keyframes flash{to{opacity:0}}
/* góc bố mẹ */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vcard{min-width:0;overflow:hidden;border:.3rem solid #e9ecef;border-radius:1.6rem;padding:.8rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;background:#fff}
.vcard.on{border-color:#4c6ef5;background:#edf2ff}
.vhead{display:flex;align-items:center;gap:.8rem;font-size:2rem}
.vradio{width:2.4rem;height:2.4rem;border-radius:50%;border:.3rem solid #adb5bd;flex-shrink:0}
.vcard.on .vradio{border-color:#4c6ef5;background:radial-gradient(circle,#4c6ef5 45%,#fff 50%)}
.vcard .tin{min-width:0}
.sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.sliders label{display:flex;flex-direction:column;font-size:1.8rem;font-weight:700}
.sliders input{width:100%;height:3rem;accent-color:#4c6ef5}
.cachebox{border:.3rem dashed #ffd8a8;border-radius:1.6rem;padding:1rem;background:#fff9f0;display:flex;flex-direction:column;gap:.6rem;font-size:1.8rem}
.tlist{display:flex;flex-direction:column;gap:.6rem}
.trow{display:flex;align-items:center;gap:.8rem;background:#f8f9fa;border:.25rem solid #e9ecef;border-radius:1.4rem;padding:.5rem 1rem;font-size:1.8rem}
.trow.on{border-color:#40c057;background:#ebfbee}
.tinfo{flex:1;min-width:0}
.trow .tag5{position:static}
.esec{border:.25rem solid #e9ecef;border-radius:1.6rem;padding:.8rem 1.2rem;display:flex;flex-direction:column;gap:.6rem}
.esec h4{font-size:2rem}
.ezone{display:flex;gap:1rem;align-items:flex-start}
.ezone>b{width:11rem;flex-shrink:0;font-size:1.9rem;padding-top:.3rem}
.tg{display:flex;align-items:center;border:.25rem solid #e9ecef;border-radius:1.2rem;background:#fff;overflow:hidden}
.tg.on{border-color:#40c057;background:#ebfbee}
.tgn{border:none;background:none;font-size:1.7rem;font-weight:700;padding:.1rem .8rem}
.stp{display:flex;align-items:center;gap:.3rem;background:#d3f9d8;padding:0 .3rem}
.stp button{border:none;background:#fff;border-radius:.8rem;width:2.8rem;height:2.8rem;font-size:2rem;font-weight:800}
.stp b{min-width:2rem;text-align:center;font-size:1.9rem}
.ewords{max-height:26rem;overflow-y:auto;border-radius:1rem}
.sticky{position:sticky;bottom:-1.2rem;background:rgba(255,255,255,.97);padding:.8rem 0;border-top:.2rem solid #e9ecef}
.tin.num{min-width:0;flex:0 0 12rem}
.pzwrap{display:flex;gap:2rem;align-items:center}
.pzrows{flex:1;display:flex;flex-direction:column;gap:.6rem}
.pzrow{display:flex;gap:.6rem;align-items:center}
.pzrow .tin.num{flex:0 0 8rem}
.pzc{width:2.4rem;height:2.4rem;border-radius:50%;flex-shrink:0}
.pzpct{width:5rem;text-align:right;font-size:2rem;color:#4c6ef5}
.pzprev{flex-shrink:0}
/* kiểm tra cuối tuần */
.tintro{flex:1;display:grid;grid-template-columns:1fr 26rem;gap:2rem;align-items:center;min-height:0}
.tparts{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem;align-content:center}
.tpart{background:#fff;border-radius:2rem;padding:.8rem;display:flex;flex-direction:column;align-items:center;box-shadow:0 .5rem 0 #c5d3f0;animation:fadeIn .4s both;text-align:center}
.tpart .gi{width:6rem;height:6rem;border-radius:1.8rem;display:grid;place-items:center;font-size:3.6rem}
.tpart b{font-size:1.8rem;line-height:1.1}.tpart small{font-size:1.3rem;color:#868e96;font-weight:700}
.tside{background:rgba(255,255,255,.93);border-radius:2.4rem;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;align-items:center}
.wheelmini{font-size:6rem;animation:spin 6s linear infinite;line-height:1}
.tinter{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;animation:grow .6s both}
.tstep{font-size:2.6rem;font-weight:800;color:#fff;background:#12b886;border-radius:3rem;padding:.2rem 2rem;box-shadow:0 .4rem 0 #087f5b}
.gi.big{width:16rem;height:16rem;border-radius:4rem;display:grid;place-items:center;font-size:10rem;box-shadow:0 .6rem 0 rgba(0,0,0,.12)}
.tinter h2{font-size:4.4rem;color:#fff;text-shadow:0 .3rem 0 rgba(0,0,0,.18)}
.tscore{font-size:8rem;font-weight:800;line-height:1;color:#12b886}.tscore small{font-size:4rem}
/* vòng quay */
.wwrap{flex:1;display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;justify-items:center;min-height:0}
.wbox2{position:relative;display:grid;place-items:center}
.wbox2 canvas{filter:drop-shadow(0 1rem 1rem rgba(0,0,0,.25))}
.wptr{position:absolute;top:-2.6rem;left:50%;transform:translateX(-50%);font-size:5rem;color:#e03131;z-index:2;text-shadow:0 .3rem 0 #fff,0 .6rem .4rem rgba(0,0,0,.25);line-height:1}
.wbtn{position:absolute;left:50%;top:50%;margin:-4.25rem 0 0 -4.25rem;width:8.5rem;height:8.5rem;border-radius:50%;border:.6rem solid #fff;background:radial-gradient(circle at 40% 35%,#ffa94d,#e8590c);color:#fff;font-size:2.2rem;font-weight:800;box-shadow:0 .5rem 1rem rgba(0,0,0,.3);animation:pulse 1.4s infinite}
.wlist{background:rgba(255,255,255,.93);border-radius:2rem;padding:1.4rem 2rem;display:flex;flex-direction:column;gap:.6rem;min-width:26rem}
.wlist h3{font-size:2.4rem}
.wli{display:flex;align-items:center;gap:1rem;font-size:2.1rem;font-weight:700}
.wli i{width:2.4rem;height:2.4rem;border-radius:50%;flex-shrink:0}
@media (orientation:portrait){
 .zones{grid-template-columns:1fr 1fr}.albums,.petwrap,.booth,.tintro,.wwrap,.vgrid{grid-template-columns:1fr}
}

.vcard select.tin{width:100%;flex:1}
.tabs .tab{font-size:1.7rem;padding:.25rem 1.1rem}
.opt.num:nth-child(4n+1){color:#f03e3e}.opt.num:nth-child(4n+2){color:#1c7ed6}.opt.num:nth-child(4n+3){color:#2f9e44}.opt.num:nth-child(4n+4){color:#ae3ec9}
.mf.front .numl{font-size:5.4rem;color:#e8590c}.mf.front img{width:85%;height:70%;object-fit:contain}
.tside .ptxt{font-size:1.5rem}.tside{gap:.6rem;padding:1.2rem}
.tparts{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
#test .rbox{gap:.6rem;padding:1.2rem}#test .rbox h2{font-size:3.2rem}#test .rstars{font-size:5rem}
#mbox:has(.keypad){padding:1.2rem 2rem;gap:.5rem}#mbox:has(.keypad) h3{font-size:2.2rem}#mbox:has(.keypad) p{font-size:1.6rem!important}

/* ---- v3.1: chọn màu sắc trong Góc bố mẹ ---- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem;margin-top:1rem}
.cchip{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem .8rem;border-radius:1.8rem;border:4px solid #e9ecef;background:#fff;font-family:inherit;cursor:pointer;opacity:.5;transition:opacity .15s,transform .15s}
.cchip:active{transform:scale(.95)}
.cchip.on{opacity:1;border-color:#40c057;box-shadow:0 .5rem 0 #2f9e44}
.cchip .cdot{width:6.5rem;height:6.5rem;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(0,0,0,.15),0 .3rem .6rem rgba(0,0,0,.15)}
.cchip b{font-size:2.2rem;color:#343a40}
.cchip small{font-size:1.6rem;color:#868e96}
.cchip i{position:absolute;top:.5rem;right:.8rem;font-style:normal;font-weight:900;color:#40c057;font-size:2.4rem;display:none}
.cchip.on i{display:block}
/* màu trắng / nhạt vẫn nhìn rõ */
.paint{outline:4px solid rgba(0,0,0,.14);outline-offset:-4px}
.huntwant i,.huntseen i{box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}

/* ===== Lớp 1-5 & trò nghiêng đầu ===== */
.ages{grid-template-columns:repeat(4,1fr)!important}.age{font-size:1.9rem!important}.age b{font-size:2.6rem!important}
.gq{display:none;flex-shrink:0;align-self:center;max-width:92%;background:#fff;border-radius:1.6rem;padding:.5rem 2rem;font-weight:800;text-align:center;color:#1c3d7a;box-shadow:0 .4rem 0 rgba(80,110,180,.25);line-height:1.3}
.gq.on{display:block}
.qt{display:block;text-align:center;line-height:1.1;font-weight:800;color:#1c3d7a;word-break:break-word;padding:0 .3rem;font-family:'Baloo 2',sans-serif}
.bb .qt,.flab .qt{color:#fff;text-shadow:0 .15rem .3rem rgba(0,0,0,.45)}
.opt.qa{min-width:16rem;min-height:9rem;padding:.4rem 1.6rem}
.tpan{--p:0%;position:absolute;top:10%;bottom:20%;width:38%;border:.5rem solid #fff;border-radius:3rem;background:rgba(255,255,255,.88);display:grid;place-items:center;overflow:hidden;box-shadow:0 .6rem 0 rgba(0,0,0,.25);transition:transform .12s}
.tpan.l{left:3%}.tpan.r{right:3%}
.tfill{position:absolute;inset:0;background:linear-gradient(to top,#ffd43b var(--p),transparent var(--p));opacity:.85}
.tarrow{position:absolute;top:.6rem;left:0;right:0;text-align:center;font-size:3rem}
.tlab{position:relative;z-index:1;max-width:92%}
.tlab .hw{font-size:7rem;color:#d6336c}.tlab .numl{font-size:8rem;color:#e8590c}.tlab .emo{font-size:7rem}.tlab img{width:12rem;height:12rem;object-fit:contain;border-radius:1rem}
.tpan.touch{transform:scale(1.04);border-color:#ffd43b}
.tpan.hint{animation:glow 1s infinite}
.thead{position:absolute;left:50%;bottom:3.8rem;width:9rem;height:9rem;margin-left:-4.5rem;font-size:6.5rem;display:grid;place-items:center;background:rgba(255,255,255,.85);border-radius:50%;transition:transform .08s}
.thead.lost{opacity:.35;filter:grayscale(1)}

/* ===== ⭐ Trò chơi yêu thích, tìm kiếm từ vựng & quản lý trò chơi ===== */
.favstar{position:absolute;top:.4rem;left:.4rem;font-size:1.8rem;line-height:1;background:rgba(255,255,255,.85);border:none;border-radius:50%;width:3rem;height:3rem;display:grid;place-items:center;cursor:pointer;opacity:.45;transition:all .2s;z-index:2;box-shadow:0 .2rem .4rem rgba(0,0,0,.15)}
.favstar:hover,.favstar.on{opacity:1;transform:scale(1.15);background:#fff9db;color:#f59f00;filter:drop-shadow(0 .2rem .5rem rgba(245,159,0,.5))}
.gcard.fav{border:2.5px solid #ffd43b!important;background:linear-gradient(180deg,#fffdf0,#fff)!important;box-shadow:0 .6rem 0 #f59f00!important}
.tagfav{position:absolute;bottom:.5rem;right:.5rem;font-size:1.05rem;font-weight:800;background:#f59f00;color:#fff;border-radius:.8rem;padding:.1rem .6rem;box-shadow:0 .2rem 0 #d9480f}
.search-bar{display:flex;gap:.8rem;align-items:center;margin-bottom:1.4rem;flex-wrap:wrap;background:#f8f9fa;padding:.8rem 1.2rem;border-radius:1.4rem;border:1px solid #dee2e6}
.search-in{flex:1;min-width:20rem;font-size:1.8rem;padding:.8rem 1.4rem;border:2px solid #adb5bd;border-radius:1rem;outline:none}
.search-in:focus{border-color:#339af0}
.grade-sel{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.grade-btn{padding:.7rem 1.4rem;border-radius:1.2rem;border:2px solid #ced4da;background:#fff;font-size:1.7rem;font-weight:800;cursor:pointer;transition:all .15s}
.grade-btn.cur{border-color:#4dabf7;background:#e7f5ff;color:#1971c2;transform:scale(1.05)}
.topic-card{border:2px solid #e9ecef;border-radius:1.2rem;padding:1rem 1.4rem;margin-bottom:.8rem;background:#fff;display:flex;align-items:center;gap:1.2rem;cursor:pointer;transition:all .15s}
.topic-card.on{border-color:#51cf66;background:#f4fce3}
.topic-card input{width:2.2rem;height:2.2rem;cursor:pointer}
.topic-info h4{font-size:1.8rem;margin:0;color:#212529}
.topic-info p{font-size:1.4rem;margin:.2rem 0 0;color:#495057}
.gamemg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(27rem,1fr));gap:.8rem;margin-top:.8rem}
.gamemg-card{border:1.5px solid #dee2e6;border-radius:1.1rem;padding:.6rem .9rem;background:#fff;display:flex;align-items:center;gap:.8rem;transition:all .15s;min-height:4.8rem}
.gamemg-card:hover{border-color:#adb5bd;box-shadow:0 .2rem .6rem rgba(0,0,0,.04)}
.gamemg-card.fav{border-color:#fcc419;background:#fff9db}
.gamemg-icon{width:3.6rem;height:3.6rem;border-radius:.9rem;font-size:2.2rem;display:grid;place-items:center;flex-shrink:0}
.gamemg-info{flex:1;min-width:0;padding:0 .2rem}
.gamemg-info h4{font-size:1.6rem!important;font-weight:800!important;margin:0;color:#111827!important;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;white-space:normal!important}
.gamemg-acts{display:flex;gap:.4rem;align-items:center;flex-shrink:0;margin-left:auto}
.gamemg-acts .btn{padding:.35rem .65rem!important;font-size:1.25rem!important;border-radius:.8rem!important;white-space:nowrap;line-height:1.2}

/* ===== 🏪 Cửa hàng đổi quà & 📸 Bộ lọc camera ===== */
.stk-sell-btn:hover{transform:scale(1.18);border-color:#7950f2!important;background:#ede9fe!important;box-shadow:0 .4rem 1.2rem rgba(121,80,242,.25)}
.stk-sell-btn:active{transform:scale(.95)}
.gift-card{transition:transform .2s,box-shadow .2s}
.gift-card:hover{transform:translateY(-.3rem);box-shadow:0 .8rem 2rem rgba(0,0,0,.08)}
.img-pick-btn:hover{transform:scale(1.08);box-shadow:0 .4rem 1rem rgba(0,0,0,.15)}
.filter-bar button.chip{border:none;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .15s}
.filter-bar button.chip:hover{background:rgba(255,255,255,.35)}
.filter-bar button.chip.on{background:#ffd43b;color:#212529;font-weight:800;box-shadow:0 .2rem .6rem rgba(0,0,0,.3)}

/* ===== 📸 Avatar bé bằng ảnh chụp thật ===== */
.av-photo {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  background: #fff;
}
.meface .av-photo {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
}
#gAv .av-photo {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
}
.bigav .av-photo {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border-width: 4px;
}
.avw.has-photo .hat {
  position: absolute;
  left: 50%;
  top: -0.32em;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 0.72em;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.cam-avatar-box {
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 1.5rem auto;
  border: 5px solid #ffd43b;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  background: #000;
}
.cam-avatar-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}




/* ===== Ếch qua sông: bờ bên kia sinh động ===== */
.rdecor{position:absolute;top:68%;transform:translate(-50%,-50%);font-size:3.8rem;line-height:1;filter:drop-shadow(0 .25rem .3rem rgba(0,0,0,.2));animation:rdecor-sway 3s ease-in-out infinite;pointer-events:none;z-index:1}
.rdecor.big{font-size:4.6rem}
.rdecor.tiny{font-size:2.2rem;animation:flutter 2.4s ease-in-out infinite}
.rdecor .goal-flower{width:5.2rem;height:5.2rem}
.rgrass{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:3.4rem;opacity:.9;pointer-events:none}
.lotus{position:absolute;transform:translate(-50%,-50%);font-size:3.6rem;opacity:.9;animation:bob 3s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes rdecor-sway{0%,100%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-50%) rotate(4deg)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes flutter{0%,100%{margin-top:0}50%{margin-top:-1.2rem}}

/* ===== Trò Câu cá: Rong biển đung đưa dưới đáy nước êm ả, không bị giật/nhảy ===== */
.sea .weed{position:absolute;bottom:-0.6rem;font-size:5rem;opacity:.88;transform-origin:bottom center;animation:seaweed-sway 3.2s ease-in-out infinite;pointer-events:none;user-select:none;z-index:1}
@keyframes seaweed-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.gq{white-space:pre-line}

.food{position:relative}.food:disabled{opacity:.3;filter:grayscale(1);box-shadow:none}
.fcnt{position:absolute;top:-.4rem;right:-.4rem;background:#ff6b6b;color:#fff;font-size:1rem;min-width:1.7rem;height:1.7rem;line-height:1.7rem;border-radius:1rem;font-family:inherit}

/* ===== 🎨 Icon Picker & Gift Dialog Modal ===== */
.icon-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  animation: ipFadeIn .15s ease-out;
}
@keyframes ipFadeIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.icon-picker-box {
  background: #fff;
  border-radius: 1.8rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  width: 100%;
  max-width: 54rem;
  max-height: 94vh;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1.5px solid rgba(0,0,0,.08);
}
.icon-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.8rem;
  background: #f8f9fa;
  border-bottom: 1.5px solid #dee2e6;
}
.icon-picker-close {
  background: none;
  border: none;
  font-size: 2.4rem;
  font-weight: bold;
  color: #868e96;
  cursor: pointer;
  padding: .2rem .7rem;
  border-radius: .8rem;
  line-height: 1;
}
.icon-picker-close:hover {
  background: #e9ecef;
  color: #212529;
}
.icon-picker-quick {
  display: flex;
  gap: .6rem;
  padding: .6rem 1.4rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid #f1f3f5;
  scrollbar-width: thin;
}
.ip-quick-btn {
  background: #f1f3f5;
  border: 1.5px solid #dee2e6;
  border-radius: 1rem;
  font-size: 2.2rem;
  padding: .4rem .8rem;
  cursor: pointer;
  line-height: 1;
  transition: transform .1s, background .1s;
}
.ip-quick-btn:hover {
  background: #ffe066;
  transform: scale(1.12);
}
.ip-quick-btn.cur {
  background: #ffd43b;
  border-color: #f59f00;
}
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: .8rem;
  padding: 1.4rem;
  overflow-y: auto;
  max-height: 48vh;
}
.ip-item {
  background: #f8f9fa;
  border: 1.5px solid #e9ecef;
  border-radius: 1.2rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  cursor: pointer;
  transition: all .12s;
  padding: 0;
}
.ip-item:hover {
  background: #fff3bf;
  border-color: #fab005;
  transform: scale(1.14);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.ip-item.cur {
  background: #ffe066;
  border-color: #f59f00;
}
.ip-emoji {
  line-height: 1;
  user-select: none;
}

/* ===== 🎯 Daily Quest Bar & Modal ===== */
.daily-quest-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: linear-gradient(135deg, #fff9db 0%, #fff3bf 100%);
  border: 1.5px solid #fcc419;
  border-radius: 1.4rem;
  padding: .8rem 1.4rem;
  margin: .8rem 1.4rem 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 159, 0, .14);
  transition: transform .15s, box-shadow .15s;
}
.daily-quest-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 159, 0, .22);
}
.dq-icon {
  font-size: 2.8rem;
  line-height: 1;
}
.dq-info {
  flex: 1;
  min-width: 0;
}
.dq-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #d9480f;
  margin-bottom: .4rem;
}
.dq-progress {
  height: .8rem;
  background: rgba(0,0,0,.08);
  border-radius: 1rem;
  overflow: hidden;
}
.dq-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff922b, #fab005);
  border-radius: 1rem;
  transition: width .3s ease;
}
.dq-btn {
  font-size: 1.4rem;
  font-weight: 800;
  padding: .5rem 1.2rem;
  border-radius: 1rem;
  background: #ff922b;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(255, 146, 43, .35);
}
.dq-btn.pulse-btn {
  background: linear-gradient(135deg, #51cf66, #2b8a3e);
  animation: pulse 1s infinite alternate;
}

/* ===== 🦉💤 Eye-Care Modal ===== */
.eyecare-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, .92);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  animation: ipFadeIn .3s ease-out;
}
.eyecare-box {
  background: linear-gradient(180deg, #1c2333 0%, #0f172a 100%);
  border: 2px solid #3b82f6;
  border-radius: 2.4rem;
  padding: 2.4rem 2.8rem;
  max-width: 48rem;
  width: 100%;
  text-align: center;
  color: #f8fafc;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.eyecare-owl {
  font-size: 6.4rem;
  line-height: 1;
  margin-bottom: 1.2rem;
  animation: float 2.5s infinite ease-in-out;
}
.eyecare-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #93c5fd;
  margin-bottom: 1rem;
}
.eyecare-desc {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 2rem;
}
.eyecare-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== ✍️ Tracing Game ===== */
.chalk-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.trace-btn-chalk {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  padding: .65rem 1.6rem !important;
  border-radius: 1.6rem !important;
  background: linear-gradient(135deg, #ff922b, #f76707) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(247,103,7,.3) !important;
  cursor: pointer;
  transition: transform .15s;
}
.trace-btn-chalk:active {
  transform: scale(0.96);
}
.trace-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: none;
}
.trace-picker-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  max-width: 44rem;
  width: 100%;
  padding: .4rem .3rem;
  margin-bottom: .6rem;
  -webkit-overflow-scrolling: touch;
}
.trace-picker-strip::-webkit-scrollbar {
  display: none;
}
.trace-chip {
  flex-shrink: 0;
  min-width: 3.6rem;
  height: 3.6rem;
  border-radius: 1rem;
  border: 2px solid #dee2e6;
  background: #fff;
  color: #343a40;
  font-size: 1.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 .4rem;
  transition: all .15s;
}
.trace-chip.cur {
  border-color: #f76707;
  background: #fff4e6;
  color: #d9480f;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(247,103,7,.25);
}
.trace-canvas-wrap {
  position: relative;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 3.5px solid #d0ebff;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.trace-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 44rem;
  margin-bottom: .6rem;
  padding: 0 .4rem;
  gap: .6rem;
  flex-wrap: wrap;
}
.trace-tools {
  display: flex;
  gap: .6rem;
  align-items: center;
}
.trace-start-hint {
  font-size: 1.35rem;
  color: #2b8a3e;
  font-weight: 800;
  background: #ebfbee;
  padding: .35rem .9rem;
  border-radius: 2rem;
  border: 1.5px solid #b2f2bb;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* ===== 🏆 Leaderboard & Topbar Styles ===== */
.trophybtn {
  background: linear-gradient(135deg, #ffd43b, #fab005) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(250, 176, 5, .35) !important;
}
.bgmbtn {
  background: #e7f5ff !important;
  border: 1.5px solid #a5d8ff !important;
}

/* Ẩn bong bóng chào bị tràn dọc ở thanh topbar chính */
#home .greet {
  display: none !important;
}
@media (min-width: 1200px) {
  #home .greet {
    display: flex !important;
    flex: 1;
    min-width: 0;
  }
  #home .greet .bubble {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.5rem;
    padding: .4rem 1.2rem;
  }
}

/* 8 tabs trong trang phần thưởng hiển thị đều đẹp */
.tabs.rtabs {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: .35rem !important;
  padding: .15rem 0 !important;
}
.tabs.rtabs .tab {
  font-size: 1.2rem !important;
  padding: .35rem .15rem !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px;
}

/* ===== 🐱 Pet Playground Enhanced Styles ===== */
.pet-box-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.pet-bubble {
  position: absolute;
  top: -3.8rem;
  background: #fff;
  color: #d9480f;
  font-size: 1.45rem;
  font-weight: 800;
  padding: .5rem 1.2rem;
  border-radius: 1.6rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  border: 2px solid #ffd8a8;
  white-space: nowrap;
  pointer-events: none;
  animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 10;
}
.pet-bubble::after {
  content: '';
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  border-width: .6rem .6rem 0;
  border-style: solid;
  border-color: #ffd8a8 transparent;
}
.pet-touch-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff0f6;
  color: #d6336c;
  font-size: 1.35rem;
  font-weight: 700;
  padding: .35rem 1rem;
  border-radius: 2rem;
  border: 1.5px solid #fcc2d7;
  cursor: pointer;
  margin-top: .4rem;
  transition: all .2s;
}
.pet-touch-badge:active {
  transform: scale(0.95);
}
.pet.pet-petted {
  animation: petBounce .45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes petBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.28) rotate(-6deg); }
  70% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.fly-heart {
  position: fixed;
  font-size: 2.8rem;
  pointer-events: none;
  z-index: 99999;
  animation: flyHeartAnim 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes flyHeartAnim {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  50% { transform: translate(-50%, -120%) scale(1.3); opacity: 0.9; }
  100% { transform: translate(calc(-50% + 20px), -200%) scale(1.1); opacity: 0; }
}

/* ===== 📊 Sổ theo dõi tiến bộ của bé (Parent Insights) ===== */
.insight-box {
  background: linear-gradient(135deg, #f8f9fa, #f1f3f5);
  border: 2px solid #e9ecef;
  border-radius: 2rem;
  padding: 1.6rem 2rem;
  margin-top: 1.2rem;
}
.insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.insight-head h4 {
  font-size: 2rem;
  font-weight: 800;
  color: #343a40;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.insight-card-item {
  background: #fff;
  border-radius: 1.4rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  border: 1.5px solid #f1f3f5;
}
.insight-card-val {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.1;
  color: #1971c2;
}
.insight-card-lbl {
  font-size: 1.3rem;
  color: #495057;
  font-weight: 600;
  margin-top: .4rem;
}
.insight-comment {
  background: #fff9db;
  border: 1.5px solid #ffe066;
  border-radius: 1.4rem;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.insight-comment-icon {
  font-size: 2.6rem;
  line-height: 1;
}
.insight-comment-txt {
  font-size: 1.45rem;
  line-height: 1.5;
  color: #744210;
}
.insight-comment-txt b {
  color: #d9480f;
}

/* ===== 🦉💤 Screen Limit Chips ===== */
.screen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .8rem;
}
.screen-chip {
  padding: .7rem 1.4rem;
  border-radius: 2rem;
  border: 2px solid #dee2e6;
  background: #fff;
  color: #495057;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.screen-chip:hover {
  border-color: #adb5bd;
}
.screen-chip.cur {
  border-color: #1971c2;
  background: #e7f5ff;
  color: #1864ab;
  box-shadow: 0 2px 8px rgba(24,100,171,.15);
}

/* ===== 🔔 Toast thông báo luôn nổi trên mọi modal ===== */
.toast {
  position: fixed !important;
  left: 50% !important;
  top: 3.5rem !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  background: rgba(33, 37, 41, 0.96) !important;
  color: #fff !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  padding: 0.9rem 2.4rem !important;
  border-radius: 2rem !important;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.45) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  z-index: 2147483640 !important;
  pointer-events: none;
  animation: fadeIn 0.3s ease-out !important;
}

@keyframes clawFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

/* ===== 🎪 Cột 3 thẻ: Khu Giải Trí, Phần Thưởng, Kiểm Tra Cuối Tuần (Chống tràn, không khuất chữ) ===== */
.zcol {
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: .5rem !important;
  min-height: 0 !important;
  height: 100% !important;
}

.zone.small {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: .35rem .75rem !important;
  gap: .65rem !important;
  border-radius: 1.6rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.zone.small .ze {
  width: 3.8rem !important;
  height: 3.8rem !important;
  min-width: 3.8rem !important;
  font-size: 2.2rem !important;
  border-radius: 1.1rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: none !important;
}

.zone.small h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  overflow: visible !important;
}

.zone.small h2.zh-test {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.4px !important;
}

.z-fun {
  background: linear-gradient(135deg, #fff0f6 0%, #ffdeeb 100%) !important;
  border: 3px solid #f783ac !important;
}
.z-fun .ze {
  background: #f06595 !important;
  color: #fff !important;
}

/* ===== 💡 Môn Kỹ Năng Sống & Layout 5 cột cân đối ===== */
.z-skills {
  background: linear-gradient(160deg, #20c997 0%, #0ca678 100%) !important;
  box-shadow: 0 .6rem 0 #099268 !important;
}
.z-skills .ze {
  background: rgba(255, 255, 255, .28) !important;
}

.zones {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.1rem !important;
  min-height: 0 !important;
  padding-bottom: .6rem !important;
}

@media (max-width: 1050px) and (orientation: landscape) {
  .zones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr) !important;
    gap: .7rem !important;
  }
  .zcol {
    grid-column: 5 !important;
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    grid-template-columns: none !important;
    gap: .5rem !important;
    height: 100% !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .zones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr) !important;
    gap: .5rem !important;
  }
  .zcol {
    grid-column: 5 !important;
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    grid-template-columns: none !important;
    gap: .4rem !important;
    height: 100% !important;
  }
}

@media (orientation: portrait) {
  .zones {
    grid-template-columns: 1fr 1fr !important;
  }
  .zcol {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: none !important;
    height: auto !important;
  }
}
.z-fun h2 {
  color: #d6336c !important;
}

/* Topbar trang chủ cân đối, chống xô lệch */
.topbar.home-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  flex-shrink: 0 !important;
}

.topbar-actions .icon-btn {
  width: 4.4rem !important;
  height: 4.4rem !important;
  min-width: 4.4rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  border-radius: 50% !important;
  font-size: 2.2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 .35rem 0 #b7c7e6 !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: transform .1s !important;
}

.topbar-actions .icon-btn .topbar-badge {
  position: absolute !important;
  top: -0.35rem !important;
  right: -0.35rem !important;
  background: #fa5252 !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  min-width: 1.7rem !important;
  height: 1.7rem !important;
  padding: 0 0.35rem !important;
  border-radius: 999px !important;
  border: 2px solid #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.topbar-actions .icon-btn:active {
  transform: translateY(2px) !important;
}

.topbar-actions .star-pill {
  padding: .35rem 1.2rem !important;
  font-size: 1.85rem !important;
  box-shadow: 0 .35rem 0 #b7c7e6 !important;
  background: #fff !important;
  font-weight: 800 !important;
  color: #f08c00 !important;
  border-radius: 3rem !important;
  white-space: nowrap !important;
}

/* Responsive cho Máy gắp thú Tab 1 (Bảng điều khiển bên cạnh) */
@media (max-width: 768px), (orientation: portrait) {
  .claw-game-view {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }
  .claw-game-view .claw-cabinet {
    height: 28rem !important;
  }
}






/* ========================================================
   CÁC TRÒ CHƠI MỚI (4 NEW GAMES: FRUIT, VOICE RACE, SHADOW/DOTS, CHEF)
   ======================================================== */

/* 1. HÁI TRÁI CÂY / HỨNG QUẢ RƠI (AR CAMERA & TOUCH) */
.stage.fruit-stage {
  background: linear-gradient(180deg, #74c0fc 0%, #a9e34b 65%, #5c940d 100%);
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.stage.fruit-stage .camtip {
  bottom: auto;
  top: 1.2rem;
  z-index: 25;
}
.fruit-canopy {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6rem;
  background: radial-gradient(ellipse at 50% 0%, #2f9e44 60%, transparent 75%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}
.falling-fruit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.1s linear;
  will-change: transform, top, left;
  transform: translate(-50%, -50%);
}
.fruit-body {
  font-size: 5rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  line-height: 1;
}
.fruit-label {
  background: rgba(255, 255, 255, 0.95);
  color: #1c7ed6;
  font-weight: 900;
  font-size: 2rem;
  padding: 0.2rem 1rem;
  border-radius: 1.2rem;
  border: 2.5px solid #339af0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  margin-top: -0.6rem;
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.fruit-basket {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
  cursor: grab;
  transition: transform 0.08s ease-out;
}
.basket-body {
  font-size: 7.2rem;
  line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}
.basket-pill {
  background: #fff;
  color: #e67700;
  font-size: 1.4rem;
  font-weight: 800;
  padding: 0.3rem 1.2rem;
  border-radius: 2rem;
  border: 2px solid #ffd43b;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.fruit-splat {
  animation: fruitPop 0.4s ease-out forwards;
}
@keyframes fruitPop {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4) rotate(15deg); opacity: 0.8; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* 2. ĐUA XE GIỌNG NÓI & NĂNG LƯỢNG (VOICE TURBO RACER) */
.stage.race-stage {
  background: linear-gradient(180deg, #4dabf7 0%, #b2f2bb 45%, #69db7c 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.race-scenery {
  position: absolute;
  top: 0; left: 0; right: 0; height: 35%;
  pointer-events: none;
}
.race-track-road {
  position: absolute;
  bottom: 6rem;
  left: 2rem; right: 2rem;
  height: 14rem;
  background: #343a40;
  border-radius: 2rem;
  border: 4px solid #ced4da;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.road-lane-stripes {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0.6rem;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #fff 0, #fff 3rem, transparent 3rem, transparent 6rem);
}
.finish-flag-line {
  position: absolute;
  right: 2.5rem; top: 0; bottom: 0;
  width: 2.4rem;
  background: repeating-linear-gradient(180deg, #fff 0, #fff 1.2rem, #000 1.2rem, #000 2.4rem);
  box-shadow: -2px 0 6px rgba(0,0,0,0.3);
  z-index: 2;
}
.racing-car {
  position: absolute;
  left: 3rem;
  display: flex;
  align-items: center;
  transition: left 0.15s cubic-bezier(0.1, 0.9, 0.2, 1);
  z-index: 5;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}
.car-icon {
  font-size: 7.5rem;
  line-height: 1;
}
.car-fire {
  font-size: 3.5rem;
  margin-left: -1.5rem;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.racing-car.boosting .car-fire {
  opacity: 1;
  animation: fireFlicker 0.2s infinite alternate;
}
@keyframes fireFlicker {
  0% { transform: scaleX(-1) scale(0.9); }
  100% { transform: scaleX(-1) scale(1.3); }
}
.race-dash-bottom {
  position: absolute;
  bottom: 0.8rem;
  left: 2rem; right: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  z-index: 10;
}
.turbo-gauge-wrap {
  flex: 1;
  background: rgba(255,255,255,0.92);
  padding: 0.6rem 1.4rem;
  border-radius: 1.6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.turbo-meter-bar {
  flex: 1;
  height: 2.2rem;
  background: #e9ecef;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.turbo-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff922b, #ff6b6b, #fa5252);
  transition: width 0.1s ease-out;
  border-radius: 1.2rem;
}
.race-tap-btn {
  background: linear-gradient(135deg, #ff922b, #f76707);
  color: #fff;
  border: none;
  font-size: 1.65rem;
  font-weight: 900;
  padding: 0.8rem 1.8rem;
  border-radius: 1.6rem;
  box-shadow: 0 4px 12px rgba(247,103,7,0.4);
  cursor: pointer;
  white-space: nowrap;
}
.race-tap-btn:active {
  transform: scale(0.96);
}

/* 3. GHÉP HÌNH BÓNG MỜ (SHADOW SILHOUETTE MATCH - 3-5 TUỔI) */
.stage.shadow-stage {
  background: linear-gradient(135deg, #fff9db 0%, #ffe8cc 50%, #ffdeeb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.shadow-match-wrap {
  width: 100%;
  max-width: 84rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: auto;
}
.shadow-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.shadow-card {
  background: #fff;
  border: 3.5px solid #e9ecef;
  border-radius: 1.8rem;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-height: 8.5rem;
  user-select: none;
}
.shadow-card:active {
  transform: scale(0.97);
}
.shadow-card.selected {
  border-color: #ff922b;
  background: #fff4e6;
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(255,146,43,0.3);
}
.shadow-card.matched {
  border-color: #51cf66;
  background: #ebfbee;
  cursor: default;
  transform: none;
}
.shadow-card.matched .shadow-img {
  filter: none !important;
  opacity: 1 !important;
  animation: popIn 0.35s ease-out;
}
.shadow-card.is-shadow .shadow-img {
  filter: brightness(0) contrast(200%) drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  opacity: 0.85;
}
.shadow-img {
  font-size: 5rem;
  line-height: 1;
  transition: filter 0.3s ease;
}
.shadow-label {
  font-size: 2.2rem;
  font-weight: 800;
  color: #343a40;
}

/* 4. NỐI SỐ TẠO HÌNH (CONNECT THE DOTS - 5-10 TUỔI) */
.stage.dots-stage {
  background: linear-gradient(135deg, #182848 0%, #4b6cb7 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.dots-board {
  position: relative;
  width: min(85vw, 55rem);
  height: min(65vh, 45rem);
  background: rgba(255,255,255,0.06);
  border-radius: 2.4rem;
  border: 2px dashed rgba(255,255,255,0.2);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.dots-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.dot-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #fff;
  border: 3.5px solid #339af0;
  color: #1864ab;
  font-weight: 900;
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 5;
  transition: transform 0.2s, background 0.2s;
  user-select: none;
}
.dot-node.active-target {
  background: #ffd43b;
  border-color: #f59f00;
  color: #d9480f;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 18px #ffd43b;
  animation: pulseDot 1s infinite alternate;
}
.dot-node.connected {
  background: #40c057;
  border-color: #2f9e44;
  color: #fff;
  transform: translate(-50%, -50%) scale(0.9);
}
@keyframes pulseDot {
  0% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1.3); }
}
.dots-shape-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  border-radius: 2.4rem;
  z-index: 15;
  animation: popIn 0.4s ease-out;
}

/* 5. KHU ẨM THỰC: ĐẦU BẾP NHÍ (LÀM PIZZA & BÁNH SINH NHẬT) */
.chef-kitchen-root {
  max-width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1rem;
}
.chef-tabs-bar {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.chef-tab-btn {
  background: #fff;
  border: 3px solid #dee2e6;
  border-radius: 1.4rem;
  padding: 0.8rem 1.6rem;
  font-size: 1.65rem;
  font-weight: 800;
  color: #495057;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  transition: all 0.15s;
}
.chef-tab-btn.active {
  border-color: #f76707;
  background: #fff4e6;
  color: #d9480f;
  box-shadow: 0 4px 12px rgba(247,103,7,0.2);
}
.chef-workspace {
  display: grid;
  grid-template-columns: 1fr 34rem;
  gap: 1.6rem;
}
@media (max-width: 768px) {
  .chef-workspace {
    grid-template-columns: 1fr;
  }
}
.chef-stage-board {
  background: #fff;
  border: 4px solid #ffe8cc;
  border-radius: 2.4rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  overflow: hidden;
}
.chef-plate {
  width: min(75vw, 34rem);
  height: min(75vw, 34rem);
  background: #f8f9fa;
  border: 6px solid #e9ecef;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1), inset 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.chef-base-item {
  position: absolute;
  inset: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.chef-topping-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.placed-topping {
  position: absolute;
  font-size: 3.8rem;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  animation: dropTopping 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
  cursor: pointer;
}
@keyframes dropTopping {
  0% { transform: translate(-50%, -70%) scale(1.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.chef-tray-side {
  background: #fff;
  border: 3px solid #ffe3e3;
  border-radius: 2.2rem;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.chef-tray-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-height: 32rem;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.chef-topping-btn {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 1.4rem;
  padding: 0.8rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.15s;
}
.chef-topping-btn:active {
  transform: scale(0.92);
}
.chef-topping-btn:hover {
  background: #fff4e6;
  border-color: #ffd8a8;
}
.chef-topping-btn span:first-child {
  font-size: 3rem;
  line-height: 1;
}
.chef-topping-btn span:last-child {
  font-size: 1.15rem;
  font-weight: 700;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.chef-actions-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ========================================================
   CÁC TRÒ CHƠI NÂNG CAO MỚI (HIGHWAY RACER, ZOMBIE DEFENSE, PUZZLE, SORT, MAZE, CANDLE, PET CARE, COLOR LAB)
   ======================================================== */

/* 1. ĐUA XE CHUYỂN LÀN LIÊN TỤC (HIGHWAY RUNNER) */
.stage.highway-stage {
  background: linear-gradient(180deg, #38d9a9 0%, #74c0fc 25%, #40c057 50%, #2b8a3e 100%);
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.highway-horizon {
  position: absolute;
  top: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, #74c0fc 0%, #a9e34b 95%, #2f9e44 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.highway-sun {
  position: absolute;
  top: 15%; right: 18%;
  width: 6rem; height: 6rem;
  background: #ffd43b;
  border-radius: 50%;
  box-shadow: 0 0 25px #ffd43b;
}
.highway-road-3d {
  position: absolute;
  top: 28%; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 65rem;
  background: #343a40;
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.highway-center-line {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1.2rem;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #fff 0, #fff 4rem, transparent 4rem, transparent 8rem);
  animation: roadScroll 0.6s linear infinite;
}
.highway-curb-left, .highway-curb-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 2.2rem;
  animation: roadScroll 0.6s linear infinite;
}
.highway-curb-left {
  left: 0;
  background: repeating-linear-gradient(180deg, #ff6b6b 0, #ff6b6b 3rem, #fff 3rem, #fff 6rem);
}
.highway-curb-right {
  right: 0;
  background: repeating-linear-gradient(180deg, #ff6b6b 0, #ff6b6b 3rem, #fff 3rem, #fff 6rem);
}
@keyframes roadScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(8rem); }
}
.highway-car-player {
  position: absolute;
  bottom: 8.5rem;
  width: 9rem; height: 9rem;
  transform: translateX(-50%);
  transition: left 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.16s ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.45));
}
.highway-car-player.steer-left {
  transform: translateX(-50%) rotate(-8deg);
}
.highway-car-player.steer-right {
  transform: translateX(-50%) rotate(8deg);
}
.highway-car-player .car-emoji {
  font-size: 7.2rem;
  line-height: 1;
}
.highway-car-player .turbo-flame {
  font-size: 3.2rem;
  margin-top: -1.2rem;
  display: none;
  animation: firePulse 0.15s infinite alternate;
}
@keyframes firePulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 1; }
}
.highway-gate {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  will-change: top, left, transform;
}
.highway-gate-sign {
  background: #fff;
  border: 4px solid #339af0;
  border-radius: 1.6rem;
  padding: 0.5rem 1.4rem;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 900;
  color: #1864ab;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  white-space: normal;
  max-width: 28rem;
  line-height: 1.25;
  text-align: center;
}
.highway-controls-bar {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem; right: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  z-index: 30;
}
.highway-steer-btn {
  flex: 1;
  max-width: 28rem;
  height: 6.8rem;
  border-radius: 2rem;
  border: 4px solid #fff;
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  transition: transform 0.1s;
  user-select: none;
}
.highway-steer-btn.left {
  background: linear-gradient(135deg, #4dabf7, #1c7ed6);
}
.highway-steer-btn.right {
  background: linear-gradient(135deg, #ff922b, #e8590c);
}
.highway-steer-btn:active {
  transform: scale(0.94);
}

/* 2. BẮN ZOMBIE NHÍ (ZOMBIE DEFENSE / WATER BLASTER) */
.stage.zombie-stage {
  background: linear-gradient(180deg, #182848 0%, #2b3a4a 45%, #2b8a3e 50%, #237032 100%);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.zombie-lanes-area {
  position: absolute;
  top: 15%; bottom: 12rem;
  left: 2rem; right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 5;
}
.zombie-track-row {
  position: relative;
  height: 8.5rem;
  background: rgba(0,0,0,0.18);
  border-radius: 2rem;
  border: 2px dashed rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
}
.zombie-monster-item {
  position: absolute;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
  will-change: right, transform;
}
.zombie-sprite {
  font-size: 5.5rem;
  line-height: 1;
  animation: zombieWobble 0.6s infinite alternate ease-in-out;
}
@keyframes zombieWobble {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
.zombie-answer-bubble {
  background: #fff;
  border: 3.5px solid #ff6b6b;
  border-radius: 1.4rem;
  padding: 0.4rem 1.2rem;
  font-size: clamp(1.3rem, 2vw, 2.1rem);
  font-weight: 900;
  color: #c92a2a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: normal;
  max-width: 26rem;
  line-height: 1.2;
}
.zombie-blaster-turret {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  z-index: 20;
}
.water-cannon-icon {
  font-size: 6.5rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}
.zombie-blast-missile {
  position: absolute;
  font-size: 3.5rem;
  z-index: 15;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

/* 3. XẾP HÌNH TRANH GHÉP (JIGSAW PUZZLE) */
.stage.puzzle-stage {
  background: linear-gradient(135deg, #e7f5ff 0%, #fff4e6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.puzzle-board-container {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.puzzle-frame-grid {
  display: grid;
  background: #fff;
  border: 5px solid #339af0;
  border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
}
.puzzle-slot {
  border: 2px dashed #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background: rgba(248,249,250,0.8);
  transition: background 0.15s;
}
.puzzle-slot.active-target {
  background: #e7f5ff;
  border-color: #339af0;
}
.puzzle-slot.filled {
  border-style: solid;
  border-color: #51cf66;
  background: #fff;
}
.puzzle-piece-tray {
  display: grid;
  gap: 1rem;
  background: #fff;
  border: 3.5px solid #ffd43b;
  border-radius: 2rem;
  padding: 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  max-width: 38rem;
}
.puzzle-piece-btn {
  background: #f8f9fa;
  border: 2.5px solid #dee2e6;
  border-radius: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}
.puzzle-piece-btn.selected {
  border-color: #f76707;
  background: #fff4e6;
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(247,103,7,0.3);
}

/* 4. PHÂN LOẠI & DỌN DẸP ĐỒ VẬT (SORTING GAME) */
.stage.sort-stage {
  background: linear-gradient(180deg, #d3f9d8 0%, #fff9db 50%, #ffe8cc 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
}
.sort-item-conveyor {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}
.sort-active-card {
  background: #fff;
  border: 5px solid #ff922b;
  border-radius: 2.4rem;
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  cursor: grab;
  animation: popIn 0.3s ease-out;
}
.sort-bins-row {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 80rem;
  flex-wrap: wrap;
}
.sort-bin-target {
  flex: 1;
  min-width: 18rem;
  max-width: 26rem;
  background: #fff;
  border-radius: 2.2rem;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.15s;
  border: 4px solid #ced4da;
}
.sort-bin-target:active {
  transform: scale(0.95);
}

/* 5. MÊ CUNG KỲ THÚ (MAZE RUNNER) */
.stage.maze-stage {
  background: linear-gradient(135deg, #1098ad 0%, #0c8599 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.maze-board {
  display: grid;
  background: #fff;
  border: 6px solid #ffd43b;
  border-radius: 2rem;
  padding: 0.8rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  gap: 0.4rem;
}
.maze-cell {
  width: 4.8rem; height: 4.8rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  user-select: none;
}
.maze-cell.wall {
  background: #343a40;
  border-radius: 0.8rem;
}
.maze-cell.path {
  background: #e9ecef;
}
.maze-cell.player {
  background: #ffec99;
  animation: pulse 0.8s infinite alternate;
}
.maze-nav-pad {
  display: grid;
  grid-template-columns: repeat(3, 5.4rem);
  grid-template-rows: repeat(2, 5.4rem);
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.maze-arrow-btn {
  background: #fff;
  border: 3px solid #ced4da;
  border-radius: 1.4rem;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.maze-arrow-btn:active {
  transform: scale(0.9);
}

/* 6. THỔI NẾN SINH NHẬT (CANDLE BLOWOUT) */
.stage.candle-stage {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.candle-cake-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.candles-row-top {
  display: flex;
  gap: 1.6rem;
  margin-bottom: -1.2rem;
  z-index: 10;
}
.cake-single-candle {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.candle-flame {
  font-size: 3rem;
  animation: flameFlicker 0.2s infinite alternate;
}
@keyframes flameFlicker {
  0% { transform: scale(0.9) rotate(-3deg); }
  100% { transform: scale(1.15) rotate(3deg); }
}
.candle-body-stick {
  width: 1.4rem; height: 5.5rem;
  background: repeating-linear-gradient(180deg, #ff6b6b 0, #ff6b6b 0.8rem, #ffd43b 0.8rem, #ffd43b 1.6rem);
  border-radius: 0.6rem;
}
.cake-base-giant {
  font-size: 14rem;
  line-height: 1;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5));
}


/* ========================================================
   CĂN CHỈNH VỪA KHÍT MÀN HÌNH - KHÔNG CUỘN DỌC (VIEWPORT FIT SYSTEM)
   ======================================================== */

/* 1. MÀN HÌNH GAME HỌC TẬP TỰ ĐỘNG KHÓA VỪA VIEWPORT */
#game.active {
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0.6rem 1.4rem 0.6rem !important;
  gap: 0.5rem !important;
  box-sizing: border-box !important;
}

#game #play {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* TẤT CẢ SÂN KHẤU TRÒ CHƠI PHẢI FULL KHUNG KHÔNG TRÀN */
.stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 2rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 2. ĐUA XE CAO TỐC CHUYỂN LÀN (HIGHWAY RUNNER) */
.stage.highway-stage {
  display: block !important;
  overflow: hidden !important;
}
.highway-horizon {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 25% !important;
}
.highway-road-3d {
  position: absolute !important;
  top: 20% !important;
  bottom: 6.6rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 92% !important;
  max-width: 65rem !important;
}
.highway-car-player {
  bottom: 7.2rem !important;
  width: 7.5rem !important;
  height: 7.5rem !important;
}
.highway-car-player .car-emoji {
  font-size: 6rem !important;
}
.highway-controls-bar {
  position: absolute !important;
  bottom: 0.6rem !important;
  left: 1.5rem !important; right: 1.5rem !important;
}
.highway-steer-btn {
  height: 5.2rem !important;
  font-size: 1.8rem !important;
  border-radius: 1.6rem !important;
}
.highway-q-banner {
  top: 0.6rem !important;
  font-size: 1.9rem !important;
  padding: 0.4rem 1.6rem !important;
  border-radius: 1.6rem !important;
}

/* 3. BẮN ZOMBIE NHÍ (ZOMBIE DEFENSE) */
.stage.zombie-stage {
  display: block !important;
  overflow: hidden !important;
}
.zombie-lanes-area {
  position: absolute !important;
  top: 10% !important;
  bottom: 7.5rem !important;
  left: 1.5rem !important; right: 1.5rem !important;
}
.zombie-track-row {
  height: min(9.5vh, 6.2rem) !important;
}
.zombie-sprite {
  font-size: 4.5rem !important;
}
.zombie-answer-bubble {
  font-size: 1.75rem !important;
  padding: 0.2rem 1rem !important;
  border-radius: 1.2rem !important;
}
.zombie-blaster-turret {
  bottom: 0.8rem !important;
}
.water-cannon-icon {
  font-size: 3.8rem !important;
}

/* 4. MÊ CUNG KỲ THÚ (MAZE RUNNER) */
.stage.maze-stage {
  overflow: hidden !important;
  padding: 0.6rem !important;
}
.maze-container-flex {
  display: flex !important;
  flex-direction: row !important;
  gap: 2.5rem !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto !important;
}
.maze-board {
  display: grid !important;
  background: #fff !important;
  border: 5px solid #ffd43b !important;
  border-radius: 1.8rem !important;
  padding: 0.6rem !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  gap: 0.4rem !important;
}
.maze-cell {
  width: min(6.8vh, 3.8rem) !important;
  height: min(6.8vh, 3.8rem) !important;
  border-radius: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2rem !important;
}
.maze-nav-pad {
  display: grid !important;
  grid-template-columns: repeat(3, min(6.8vh, 4.4rem)) !important;
  gap: 0.6rem !important;
}
.maze-arrow-btn {
  width: min(6.8vh, 4.4rem) !important;
  height: min(6.8vh, 4.4rem) !important;
  border-radius: 1.2rem !important;
  font-size: 2.2rem !important;
}

/* 5. TRANH GHÉP HÌNH (JIGSAW PUZZLE) */
.stage.puzzle-stage {
  overflow: hidden !important;
  padding: 0.6rem !important;
}
.puzzle-board-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 2rem !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  margin: auto !important;
}
.puzzle-frame-grid, .puzzle-piece-tray {
  width: min(44vh, 26rem) !important;
  height: min(44vh, 26rem) !important;
}

/* 6. PHÂN LOẠI ĐỒ VẬT (SORTING GAME) */
.stage.sort-stage {
  overflow: hidden !important;
  padding: 0.6rem !important;
  justify-content: space-between !important;
}
.sort-prompt {
  padding: 0.4rem 1.4rem !important;
  font-size: 1.55rem !important;
}
.sort-active-card {
  padding: 0.8rem 1.8rem !important;
  min-height: 10.5rem !important;
}
.sort-active-card > div:first-child {
  font-size: 4.8rem !important;
}
.sort-bins-row {
  gap: 1.2rem !important;
}
.sort-bin-target {
  padding: 0.8rem 1.2rem !important;
  min-width: 13rem !important;
}

/* 7. THỔI NẾN SINH NHẬT (CANDLE BLOWOUT) */
.stage.candle-stage {
  overflow: hidden !important;
}
.candle-prompt {
  top: 0.8rem !important;
  padding: 0.4rem 1.8rem !important;
  font-size: 1.6rem !important;
}
.candle-cake-wrapper {
  margin-top: 2.2rem !important;
}
.cake-base-giant {
  font-size: min(15vh, 9.5rem) !important;
}
.candles-row-top {
  gap: 1.2rem !important;
  margin-bottom: -1rem !important;
}
.candle-flame {
  font-size: 2.2rem !important;
}
.candle-body-stick {
  width: 0.8rem !important;
  height: 3.2rem !important;
}

/* 8. GHÉP BÓNG & NỐI ĐIỂM (SHADOW & DOTS) */
.stage.shadow-stage {
  overflow: hidden !important;
  padding: 0.6rem !important;
}
.shadow-match-wrap {
  max-width: 76rem !important;
  gap: 1.4rem !important;
  margin: auto !important;
}
.shadow-card {
  padding: 0.6rem 1.2rem !important;
  min-height: 5.6rem !important;
  font-size: 3.4rem !important;
}
.stage.dots-stage {
  overflow: hidden !important;
}
.dots-board {
  width: min(72vw, 46rem) !important;
  height: min(52vh, 32rem) !important;
}
.dots-prompt {
  top: 0.6rem !important;
  padding: 0.4rem 1.4rem !important;
  font-size: 1.5rem !important;
}

/* 9. ÂM THANH CON VẬT & KARAOKE (ANIMAL SOUND & KARAOKE) */
.sound-q-box {
  padding: 0.6rem 1.8rem !important;
  margin: 0.4rem auto !important;
  gap: 0.3rem !important;
}
.sound-opts-row {
  gap: 1.2rem !important;
  margin-top: 0.8rem !important;
}
.karaoke-title-box {
  padding: 0.4rem 1.6rem !important;
  font-size: 1.7rem !important;
  margin: 0.4rem auto !important;
}
.karaoke-stage-view {
  padding: 1.2rem 1.8rem !important;
  gap: 0.8rem !important;
  max-width: 62rem !important;
  margin: auto !important;
}

/* ========================================================
   CĂN CHỈNH KHU GIẢI TRÍ & ARCADE VỪA KHÍT VIEWPORT
   ======================================================== */

#arcade:not(.active) {
  display: none !important;
}

/* Lưới thẻ trò chơi Khu Vui Chơi tự co giãn responsive tuyệt đối */
.arcade-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.arcade-card {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.2rem 1.4rem !important;
  gap: 0.8rem !important;
  border-radius: 1.8rem !important;
  border-width: 3px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.arcade-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.arcade-card > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  min-width: 0 !important;
}

.arcade-card > div:first-child > div:first-child {
  width: 4.6rem !important;
  height: 4.6rem !important;
  font-size: 2.8rem !important;
  border-radius: 1.2rem !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.arcade-card h3 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.arcade-card span {
  font-size: 1.15rem !important;
  padding: 0.15rem 0.6rem !important;
  border-radius: 0.6rem !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  display: inline-block !important;
  max-width: 100% !important;
  word-break: break-word !important;
}

.arcade-card p {
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
  color: #495057 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.arcade-card .btn {
  font-size: 1.45rem !important;
  padding: 0.65rem 1.2rem !important;
  border-radius: 1.2rem !important;
  margin-top: auto !important;
  font-weight: bold !important;
  width: 100% !important;
  text-align: center !important;
}

/* KHUNG VIEWPORT TẤT CẢ TRÒ CHƠI ARCADE */
.chef-kitchen-root {
  height: calc(100vh - 6.5rem) !important;
  height: calc(100dvh - 6.5rem) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  padding: 0.2rem !important;
  max-width: 98rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.chef-tabs-bar {
  padding-bottom: 0.2rem !important;
  gap: 0.6rem !important;
  flex-shrink: 0 !important;
}
.chef-tab-btn {
  padding: 0.5rem 1.2rem !important;
  font-size: 1.45rem !important;
  border-radius: 1.2rem !important;
}
.chef-workspace {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 28rem !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.chef-stage-board {
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.8rem 1.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.chef-plate {
  width: min(34vh, 20rem) !important;
  height: min(34vh, 20rem) !important;
}
.chef-actions-bar {
  margin-top: 0.4rem !important;
  gap: 0.6rem !important;
  flex-shrink: 0 !important;
}
.chef-actions-bar .btn {
  font-size: 1.4rem !important;
  padding: 0.5rem 1.2rem !important;
}
.chef-tray-side {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0.8rem !important;
  display: flex !important;
  flex-direction: column !important;
}
.chef-tray-grid {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: unset !important;
  overflow-y: auto !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
}

/* PET CARE VIEWPORT ROOT */
.pet-viewport-root {
  height: calc(100vh - 6.5rem) !important;
  height: calc(100dvh - 6.5rem) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  padding: 0.2rem !important;
  max-width: 98rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.pet-workspace {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 28rem !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.pet-stage-board {
  background: #fff !important;
  border: 3.5px solid #ffc9c9 !important;
  border-radius: 2rem !important;
  padding: 1rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}
.pet-food-tray {
  background: #fff !important;
  border: 3px solid #ffd8a8 !important;
  border-radius: 2rem !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* COLOR LAB VIEWPORT ROOT */
.lab-viewport-root {
  height: calc(100vh - 6.5rem) !important;
  height: calc(100dvh - 6.5rem) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  padding: 0.2rem !important;
  max-width: 98rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.lab-workspace {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 28rem !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.lab-stage-board {
  background: #fff !important;
  border: 3.5px solid #d0bfff !important;
  border-radius: 2rem !important;
  padding: 1rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}
.lab-tubes-rack {
  background: #fff !important;
  border: 3px solid #b197fc !important;
  border-radius: 2rem !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* PIANO VIEWPORT FIT */
#arcade .piano-keys-row, #arcade [data-note] {
  user-select: none !important;
}



/* ========================================================
   ARCADE ZERO-SCROLL PRECISION RULES
   ======================================================== */

/* 1. THỜI TRANG BÚP BÊ VỪA KHÍT VIEWPORT */

/* 2. THỜI TRANG BÚP BÊ VỪA KHÍT VIEWPORT */

/* 3. ĐÀN PIANO VỪA KHÍT VIEWPORT */

/* 4. TÔ MÀU & VẼ TRANH VỪA KHÍT VIEWPORT */



/* TIÊU ĐỀ BANNER KHU VUI CHƠI */
#arcade:has(.arcade-cards-grid) > div:nth-child(2) > div:first-child h2 {
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
}
#arcade:has(.arcade-cards-grid) > div:nth-child(2) > div:first-child div {
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
}


/* TỐI ƯU CHIỀU CAO BẢNG MÀU TÔ TRANH */


/* ========================================================
   TOÀN DIỆN: CHỐNG CHỒNG HÌNH, VƯỢT KHUNG & VỪA KHÍT VIEWPORT
   Ưu tiên mọi trò chơi vừa khít màn hình, không cần kéo chuột
   ======================================================== */

/* 0. Đảm bảo màn hình không active luôn ẩn tuyệt đối */
.screen:not(.active) {
  display: none !important;
}

/* 1. Mở pointer-events cho nút nghe lại trong đua xe */
.race-scenery > * {
  pointer-events: auto !important;
}

/* 2. Khóa cứng toàn bộ màn chơi #game và #play vừa khít viewport */
#game.active {
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.4rem 1.2rem 0.4rem !important;
  gap: 0.35rem !important;
}

#game #play {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 3. Đảm bảo toàn bộ sân khấu các trò chơi vừa khít 100% chiều cao */
.stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 4. Tối ưu kích thước các phần tử học tập chống vượt khung */
.bignum {
  font-size: min(10.5rem, 15vh) !important;
  line-height: 1 !important;
}
.bignum small {
  font-size: min(2.5rem, 4vh) !important;
}

.bunny {
  font-size: min(8rem, 13vh) !important;
  line-height: 1 !important;
}
.bunny .need {
  font-size: min(2.6rem, 4.5vh) !important;
  width: min(4.4rem, 6.5vh) !important;
  height: min(4.4rem, 6.5vh) !important;
}

.plate {
  width: min(18rem, 36vw) !important;
  min-height: min(7.5rem, 11vh) !important;
  padding: 0.4rem 1rem !important;
}

.pile {
  width: min(25rem, 45vw) !important;
  min-height: min(9rem, 14vh) !important;
  padding: 0.6rem !important;
}

.basket {
  width: min(32rem, 45vw) !important;
  min-height: min(22rem, 38vh) !important;
  max-height: min(36rem, 58vh) !important;
  font-size: min(4.5rem, 7.5vh) !important;
  padding: 1rem !important;
}

.meadow {
  max-width: min(65rem, 90vw) !important;
  min-height: min(18rem, 32vh) !important;
  max-height: min(36rem, 56vh) !important;
  padding: 1rem !important;
}
.meadow.few .item {
  font-size: min(7.5rem, 12vh) !important;
}
.meadow .item {
  font-size: min(5rem, 8.5vh) !important;
}

.chalk {
  min-width: min(28rem, 42vw) !important;
  min-height: min(30rem, 55vh) !important;
  max-height: min(45rem, 72vh) !important;
  padding: 1.4rem 2.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.2rem !important;
}
.chalk .hw {
  font-size: min(12.5rem, 20vh) !important;
}

.pcard {
  min-width: min(28rem, 42vw) !important;
  min-height: min(30rem, 55vh) !important;
  max-height: min(45rem, 72vh) !important;
  padding: 1.5rem 2.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4rem !important;
}
.pcard.spk {
  min-width: min(30rem, 44vw) !important;
  min-height: min(32rem, 58vh) !important;
  max-height: min(46rem, 74vh) !important;
  padding: 1.8rem 2.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4rem !important;
}
.pcard.spk .bigl {
  height: auto !important;
  min-height: 10rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.pcard.spk .bigl .hw {
  font-size: min(10.5rem, 16vh) !important;
  line-height: 1.1 !important;
}
.pcard.spk .bign {
  font-size: min(12rem, 18vh) !important;
  line-height: 1 !important;
}
.pcard.spk .bigs {
  margin-top: 0.8rem !important;
  font-size: min(3.2rem, 5vh) !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.2rem !important;
}
.pcard.spk .bigs .emo {
  font-size: min(5rem, 8vh) !important;
}
.pcard.spk .bigs .hw {
  font-size: min(3.2rem, 5vh) !important;
}
.pcard.spk .pimg {
  width: min(24rem, 34vw) !important;
  height: min(20rem, 28vh) !important;
  font-size: min(12rem, 17vh) !important;
}

.mic {
  width: min(11rem, 17vh) !important;
  height: min(11rem, 17vh) !important;
  font-size: min(5.5rem, 8.5vh) !important;
}

/* 5. Tối ưu chế độ xoay dọc (Portrait) cho màn hình di động */
@media (orientation: portrait), (max-width: 768px) {
  .split, .learn {
    flex-direction: column !important;
    gap: 0.8rem !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  .split .optcol {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.6rem !important;
  }
  .chalk {
    min-width: min(22rem, 88vw) !important;
    min-height: min(20rem, 32vh) !important;
    max-height: min(26rem, 40vh) !important;
    padding: 0.8rem 1.6rem !important;
  }
  .chalk .hw {
    font-size: min(9rem, 15vh) !important;
  }
  .pcard {
    min-width: min(20rem, 84vw) !important;
    min-height: min(18rem, 30vh) !important;
    max-height: min(25rem, 38vh) !important;
    padding: 0.8rem 1.4rem !important;
  }
  .pcard.spk {
    min-width: min(22rem, 86vw) !important;
    min-height: min(20rem, 32vh) !important;
    max-height: min(26rem, 40vh) !important;
    padding: 0.8rem 1.4rem !important;
  }
  .pcard.spk .bigl .hw {
    font-size: min(7.5rem, 12vh) !important;
  }
  .pcard.spk .pimg {
    width: min(18rem, 36vw) !important;
    height: min(14rem, 22vh) !important;
    font-size: min(9rem, 14vh) !important;
  }
  .puzzle-board-container {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .puzzle-frame-grid, .puzzle-piece-tray {
    width: min(34vh, 22rem) !important;
    height: min(34vh, 22rem) !important;
  }
  .maze-container-flex {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .maze-cell {
    width: min(6vh, 3.6rem) !important;
    height: min(6vh, 3.6rem) !important;
    font-size: 2rem !important;
  }
  .maze-nav-pad {
    grid-template-columns: repeat(3, min(6vh, 4rem)) !important;
    gap: 0.4rem !important;
  }
  .maze-arrow-btn {
    width: min(6vh, 4rem) !important;
    height: min(6vh, 4rem) !important;
    font-size: 2rem !important;
  }
  .shadow-match-wrap {
    max-width: 95% !important;
    gap: 0.8rem !important;
  }
  .shadow-card {
    padding: 0.5rem 1rem !important;
    min-height: 5.4rem !important;
  }
  .shadow-img {
    font-size: 3.8rem !important;
  }
}

/* 5b. Điện thoại ngang (landscape + chiều cao ≤6 00px): giữ .split chia 2 cột ngang,
       thu nhỏ thẻ bài, bóng bay, nút mic cho vừa viewport thấp.
       Ghi đè block 'orientation: portrait | max-width: 768px' ở trên. */
@media (orientation: landscape) and (max-height: 600px) {
  .split, .learn {
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .split .optcol {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .pcard {
    min-width: min(16rem, 32vw) !important;
    min-height: min(14rem, 68vh) !important;
    max-height: min(22rem, 82vh) !important;
    padding: 0.6rem 1rem !important;
    gap: 0.6rem !important;
  }
  .pcard.spk {
    min-width: min(18rem, 34vw) !important;
    min-height: min(16rem, 70vh) !important;
    max-height: min(24rem, 84vh) !important;
    padding: 0.6rem 1.2rem !important;
    gap: 0.6rem !important;
  }
  .pcard.spk .bigl .hw {
    font-size: min(7rem, 42vh) !important;
  }
  .pcard.spk .bign {
    font-size: min(8rem, 44vh) !important;
  }
  .pcard.spk .pimg {
    width: min(14rem, 20vw) !important;
    height: min(10rem, 36vh) !important;
    font-size: min(7rem, 30vh) !important;
  }
  .pcard.spk .bigs {
    font-size: min(2.6rem, 10vh) !important;
    margin-top: 0.2rem !important;
  }
  .pcard.spk .bigs .emo {
    font-size: min(3.5rem, 16vh) !important;
  }
  .pcard.spk .bigs .hw {
    font-size: min(2.4rem, 10vh) !important;
  }
  .pcard .emo {
    font-size: min(5.5rem, 32vh) !important;
  }
  .pcard .hw {
    font-size: min(3rem, 14vh) !important;
  }
  .mic {
    width: min(8rem, 20vh) !important;
    height: min(8rem, 20vh) !important;
    font-size: min(4rem, 10vh) !important;
  }
  .loudcol {
    width: min(30rem, 50vw) !important;
  }
  .bvh-balloon-body {
    width: min(22vw, 14rem, 35vh) !important;
    height: min(26vw, 16rem, 42vh) !important;
  }
  .bvh-balloon-string {
    height: min(4rem, 6vh) !important;
  }
  .bvh-balloon-inner-text {
    font-size: clamp(2rem, 7vh, 4rem) !important;
  }
  .meter {
    width: min(20rem, 40vw) !important;
  }
  .puzzle-board-container {
    flex-direction: row !important;
    gap: 0.8rem !important;
  }
  .maze-container-flex {
    flex-direction: row !important;
    gap: 0.8rem !important;
  }
}

/* 6. Màn hình phần thưởng không tràn trang */
#reward.active {
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0.6rem 1.4rem !important;
}
#reward .rgrid {
  height: 100% !important;
  max-height: 100% !important;
  align-items: center !important;
}
@media (max-height: 620px), (orientation: portrait) {
  #reward .rbox {
    padding: 0.8rem 1.2rem !important;
    gap: 0.4rem !important;
  }
  #reward .rbox h2 {
    font-size: min(2.8rem, 4.8vh) !important;
  }
  #reward .rstars {
    font-size: min(4.6rem, 7.5vh) !important;
  }
  #reward .chest-area {
    min-height: min(18rem, 28vh) !important;
  }
  #reward .chest {
    font-size: min(8.5rem, 13vh) !important;
  }
  #reward .rbtns .btn {
    font-size: 1.5rem !important;
    padding: 0.35rem 1.2rem !important;
  }
}


/* ==================== BẢN NÂNG CẤP V22: KHẮC PHỤC KHOẢNG TRỐNG & TỐI ƯU GIAO DIỆN ==================== */

/* 1. Nghe và chọn (T_listen): Khi có 2 lựa chọn, thẻ to rõ rệt, ngập tràn không gian */
.row.few-opts {
  gap: min(5.5rem, 8vw) !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem 0 !important;
}
.row.few-opts .opt.letter {
  width: min(32rem, 38vw) !important;
  height: min(36rem, 54vh) !important;
  border-radius: 3rem !important;
  box-shadow: 0 1.2rem 0 #e0b97a !important;
  background: #fff8e1 !important;
}
.row.few-opts .opt.letter .hw {
  font-size: min(18rem, 26vh) !important;
  line-height: 1 !important;
}
.row.few-opts .opt.num {
  width: min(32rem, 38vw) !important;
  height: min(36rem, 54vh) !important;
  font-size: min(18rem, 26vh) !important;
  border-radius: 3rem !important;
  box-shadow: 0 1.2rem 0 #c5d3f0 !important;
}
.row.few-opts .opt.pic {
  width: min(32rem, 38vw) !important;
  height: min(36rem, 54vh) !important;
  font-size: min(18rem, 26vh) !important;
  border-radius: 3rem !important;
  box-shadow: 0 1.2rem 0 #c5d3f0 !important;
}

/* 2. Nói to thổi bóng (T_loud): Không bị cắt cụt trên đầu, không tràn dưới đáy */
.loudcol {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  max-height: 100% !important;
  gap: 0.5rem !important;
  width: min(38rem, 45vw) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.loudwrap {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-height: min(34rem, 46vh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
}
.bb.loudb {
  width: min(22rem, 28vw) !important;
  height: min(25rem, 33vh) !important;
  border-radius: 50% 50% 48% 48% / 54% 54% 46% 46% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.2rem !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  box-shadow: inset -1rem -1.2rem 0 rgba(0,0,0,.15), 0 10px 25px rgba(0,0,0,0.2) !important;
}
.bb.loudb .hw {
  font-size: clamp(6rem, 10vh, 9rem) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  text-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.35) !important;
}
.meter {
  width: min(24rem, 34vw) !important;
  height: 1.8rem !important;
  border-radius: 1rem !important;
  margin: 0.2rem 0 !important;
  flex-shrink: 0 !important;
}
.loudcol .mic-status {
  font-size: min(1.6rem, 2.8vh) !important;
  margin: 0 !important;
  padding: 0.2rem 1rem !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 3. Đua xe chuyển làn (T_highway): Xe ở giữa, đáp án xa ra, dừng trước cổng */
.highway-road-3d {
  perspective: 450px !important;
}
.highway-car-player {
  position: absolute !important;
  bottom: 4% !important;
  transform: translateX(-50%) !important;
  transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 15 !important;
}
.highway-car-player .car-emoji {
  font-size: min(13vh, 8.5rem) !important;
}
.highway-gate-sign {
  min-width: min(22rem, 30vw) !important;
  max-width: min(44rem, 46vw) !important;
  padding: 1.2rem 1.8rem 1.4rem !important;
  font-size: 1.8rem !important;
  border-radius: 2.4rem !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease !important;
}
.highway-gate-sign .cq-icl {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
}
.highway-gate-sign .cq-emo,
.highway-gate-sign .emo {
  font-size: 3.8rem !important;
  line-height: 1 !important;
  display: block !important;
}
.highway-gate-sign .qt {
  font-size: clamp(1.4rem, 2vw, 1.95rem) !important;
  font-weight: 800 !important;
  color: #1864ab !important;
  line-height: 1.35 !important;
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  padding: 0 0.4rem !important;
}
.highway-gate-sign .cq-ans-speak-btn {
  margin-top: 0.6rem !important;
  margin-bottom: 0.2rem !important;
  font-size: 2.4rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  cursor: pointer !important;
  transition: transform 0.15s !important;
}
.highway-gate-sign .cq-ans-speak-btn:hover {
  transform: scale(1.2) !important;
}

/* Banner câu hỏi Đua xe chuyển làn: Tự co giãn theo độ dài câu, không bị cụt */
.highway-q-banner {
  top: 0.6rem !important;
  font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
  max-width: 92% !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  padding: 0.6rem 1.6rem !important;
  border-radius: 2rem !important;
  text-align: center !important;
}

/* Ẩn banner đề bài toàn cục gQ trong Đua xe chuyển làn để không bị lặp 2 dòng câu hỏi */
#game:has(.highway-stage) #gQ,
.stage.highway-stage ~ #gQ {
  display: none !important;
}

/* Tối ưu Nghe và chọn (T_listen) cho Kỹ năng sống: 2 đáp án dài rộng rãi, thoáng mắt */
.row.few-opts .opt.qa {
  min-width: min(30rem, 42vw) !important;
  max-width: min(44rem, 46vw) !important;
  min-height: min(20rem, 32vh) !important;
  padding: 1.6rem 2rem !important;
  border-radius: 2.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0.8rem 0 #b2f2bb !important;
  background: #ffffff !important;
}
.row.few-opts .opt.qa .cq-icl {
  gap: 0.8rem !important;
}
.row.few-opts .opt.qa .cq-emo,
.row.few-opts .opt.qa .emo {
  font-size: 5.2rem !important;
}
.row.few-opts .opt.qa .qt {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
.row.few-opts .opt.qa .cq-ans-speak-btn {
  font-size: 2.6rem !important;
  margin-top: 0.6rem !important;
}

/* Tối ưu Ếch qua sông (T_frog) cho Kỹ năng sống: Lá sen rộng chứa trọn câu tình huống */
.stage.river .pad:has(.qt),
.stage.river .pad:has(.cq-icl) {
  width: min(24rem, 28vw) !important;
  height: min(15rem, 18vh) !important;
  border-radius: 2.6rem !important;
}
.stage.river .pad:has(.qt) .padl,
.stage.river .pad:has(.cq-icl) .padl {
  min-width: min(18rem, 24vw) !important;
  max-width: min(22rem, 26vw) !important;
  min-height: 8rem !important;
  padding: 0.8rem 1.2rem !important;
  border-radius: 1.8rem !important;
}
.stage.river .pad:has(.qt) .qt,
.stage.river .pad:has(.cq-icl) .qt {
  font-size: clamp(1.3rem, 1.8vw, 1.65rem) !important;
  line-height: 1.3 !important;
}

/* Tối ưu Câu cá (runFish) cho Kỹ năng sống: Cá to chứa trọn câu tình huống */
.stage.sea .fish:has(.qt),
.stage.sea .fish:has(.cq-icl) {
  width: min(26rem, 32vw) !important;
  height: 11.5rem !important;
}
.stage.sea .fish:has(.qt) .fbody,
.stage.sea .fish:has(.cq-icl) .fbody {
  width: min(21rem, 27vw) !important;
  height: 11.5rem !important;
  border-radius: 50% !important;
}
.stage.sea .fish:has(.qt) .flab,
.stage.sea .fish:has(.cq-icl) .flab {
  width: min(17rem, 23vw) !important;
  height: 11.5rem !important;
  left: 4.5rem !important;
}
.stage.sea .fish:has(.qt) .qt,
.stage.sea .fish:has(.cq-icl) .qt {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem) !important;
  line-height: 1.25 !important;
}

/* Tối ưu Đập chuột chũi (stage.mole): Bảng to cao, không bị khuyết đỉnh chữ, hiện trọn vẹn icon & nút loa */
.stage.mole .win {
  top: -16rem !important;
  bottom: 2.2rem !important;
  height: auto !important;
  overflow: hidden !important;
}
.stage.mole .hole {
  width: clamp(17rem, 24vw, 24rem) !important;
  height: clamp(15rem, 20vh, 18rem) !important;
}
.stage.mole .sign {
  width: 95% !important;
  min-width: min(15rem, 22vw) !important;
  max-width: min(24rem, 28vw) !important;
  min-height: 8rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: 1.6rem !important;
  overflow: visible !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}
.stage.mole .sign .cq-icl {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  width: 100% !important;
}
.stage.mole .sign .cq-emo,
.stage.mole .sign .emo {
  font-size: 3.6rem !important;
  line-height: 1 !important;
  display: block !important;
}
.stage.mole .sign .qt {
  font-size: clamp(1.3rem, 1.6vw, 1.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #183153 !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
}
.stage.mole .sign .cq-ans-speak-btn {
  margin-top: 0.2rem !important;
  font-size: 2rem !important;
  display: inline-flex !important;
}

/* Ếch qua sông (stage.river): Chuyển động lá sen êm dịu, không chóng mặt */
.stage.river .pad {
  animation-duration: 4.2s !important;
}



/* 4. Xếp hình tranh ghép (T_puzzle): Chiếm trọn không gian, không còn trống trải */
.puzzle-board-container {
  display: flex !important;
  gap: min(4.5rem, 6vw) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0.8rem !important;
}
.puzzle-frame-grid, .puzzle-piece-tray {
  width: min(65vh, 40rem) !important;
  height: min(65vh, 40rem) !important;
  border-radius: 2.6rem !important;
  border: 4px solid #ced4da !important;
  padding: 0.8rem !important;
}
.puzzle-slot {
  font-size: min(5rem, 8vh) !important;
  border-radius: 1.8rem !important;
}
.puzzle-piece-btn {
  font-size: min(4.5rem, 7vh) !important;
  border-radius: 1.8rem !important;
}

/* 5. Mê cung kỳ thú (T_maze): Bảng to, ô to, thỏ và cà rốt sắc nét */
.maze-container-flex {
  display: flex !important;
  gap: min(5.5rem, 7vw) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
.maze-board {
  gap: 0.8rem !important;
  padding: 1.2rem !important;
  border-radius: 2.4rem !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}
.maze-cell {
  width: min(12.5vh, 7.8rem) !important;
  height: min(12.5vh, 7.8rem) !important;
  font-size: min(7.5vh, 4.8rem) !important;
  border-radius: 1.8rem !important;
}
.maze-nav-pad {
  grid-template-columns: repeat(3, min(11vh, 7.2rem)) !important;
  gap: 0.9rem !important;
}
.maze-arrow-btn {
  width: min(11vh, 7.2rem) !important;
  height: min(11vh, 7.2rem) !important;
  font-size: min(5.5vh, 3.6rem) !important;
  border-radius: 2rem !important;
}

/* 6. Hái trái cây (T_fruit): Rổ to, trái cây to hấp dẫn */
.fruit-basket {
  position: absolute !important;
  bottom: 0.8rem !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 10 !important;
  cursor: grab !important;
}
.fruit-basket .basket-body {
  font-size: min(15vh, 9.5rem) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)) !important;
}
.fruit-basket .basket-pill {
  font-size: min(1.8rem, 2.8vh) !important;
  padding: 0.4rem 1.8rem !important;
  border-radius: 1.8rem !important;
  font-weight: 900 !important;
  background: rgba(255,255,255,0.96) !important;
  color: #d9480f !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.falling-fruit .fruit-body {
  font-size: min(13vh, 8.5rem) !important;
  line-height: 1 !important;
}
.falling-fruit .fruit-label {
  font-size: min(3.8rem, 6vh) !important;
  font-weight: 900 !important;
  padding: 0.35rem 1.4rem !important;
  border-radius: 1.6rem !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* 7. Thổi nến sinh nhật (T_candle): Bánh kem khổng lồ, nến to rực rỡ */
.candle-cake-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0.5rem !important;
}
.cake-base-giant {
  font-size: min(35vh, 23rem) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,0.4)) !important;
}
.candles-row-top {
  display: flex !important;
  gap: min(3.2rem, 4vw) !important;
  margin-bottom: -1.8rem !important;
  z-index: 5 !important;
}
.candle-flame {
  font-size: min(10.5vh, 7rem) !important;
}
.candle-body-stick {
  width: 2.2rem !important;
  height: min(9vh, 6rem) !important;
  border-radius: 0.8rem !important;
}

/* 8. Bé làm ca sĩ (T_karaoke): Lời bài hát đầy đủ, hiển thị rõ ràng */
.karaoke-lyrics-board {
  background: rgba(0,0,0,0.42) !important;
  border: 3px solid rgba(255,255,255,0.3) !important;
  border-radius: 2.4rem !important;
  padding: 1.4rem 2.4rem !important;
  max-width: 68rem !important;
  width: 90% !important;
  margin: 0.6rem auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
.karaoke-lyrics-board .k-line {
  font-size: min(2.5rem, 4vh) !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.7) !important;
  transition: all 0.25s ease-out !important;
  text-align: center !important;
  padding: 0.2rem 0 !important;
}
.karaoke-lyrics-board .k-line.active {
  color: #ffd43b !important;
  font-size: min(3rem, 5vh) !important;
  font-weight: 900 !important;
  transform: scale(1.08) !important;
  text-shadow: 0 0 20px #ff922b, 0 2px 5px #000 !important;
}

/* ===== 🌊 CHUYỂN CÂU MƯỢT MÀ, KHÔNG BỊ KHỰNG (CONTINUOUS GAMEPLAY) ===== */
.fish-layer, .balloon-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.fish.swimming-away {
  opacity: 0 !important;
  transform: translateX(140px) scale(0.65) !important;
  transition: opacity 0.55s ease-out, transform 0.55s ease-out !important;
  pointer-events: none !important;
}
.fish.l.swimming-away {
  transform: scaleX(-1) translateX(140px) scale(0.65) !important;
}

@keyframes padFloatIn {
  0% { opacity: 0; transform: translate(-50%, -90%) scale(0.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pad.entering {
  animation: padFloatIn 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.river-cam-flow {
  animation: riverCamPan 0.7s ease-in-out;
}
@keyframes riverCamPan {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.15) saturate(1.2); }
  100% { filter: brightness(1); }
}

@keyframes cardPopIn {
  0% { opacity: 0; transform: scale(0.85) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.few-opts .opt {
  animation: cardPopIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}

.fruit-drop-area {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}


/* ===== 🌟 CHUYỂN CẢNH SIÊU MƯỢT CHO TOÀN BỘ CÁC TRÒ CHƠI ===== */
.scene-exit {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transform: scale(0.96) !important;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.scene-enter {
  animation: sceneEnterAnim 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards !important;
  z-index: 2 !important;
}

@keyframes sceneEnterAnim {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/*BVH_ARCADE_GRID*/
@media (max-width: 1100px) { .arcade-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px)  { .arcade-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }




/*BVH_AP*/
#arcade .ap-top .ztitle{font-size:2.1rem}
#arcade .ap-ibtn{font-size:2.3rem}
#arcade .ap-main{flex:1 1 0;min-height:0;width:100%;max-width:150rem;margin:0 auto;display:flex;gap:1rem;align-items:stretch;box-sizing:border-box}
#arcade .ap-stage{flex:1 1 0;min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.9);border-radius:2.2rem;box-shadow:0 .6rem 1.8rem rgba(0,0,0,.12);padding:1rem;overflow:hidden;box-sizing:border-box}
#arcade .ap-fit{flex:1 1 0;min-height:0;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center;position:relative}
#arcade .ap-col{flex:0 0 auto;display:flex;flex-direction:column;gap:1rem;justify-content:center}
#arcade .ap-tab{width:clamp(5rem,12vh,8.5rem);aspect-ratio:1;border-radius:1.8rem;border:.35rem solid transparent;background:#fff;font-size:clamp(2.8rem,7vh,5rem);line-height:1;padding:0;box-shadow:0 .4rem 0 #b7c7e6;cursor:pointer;transition:transform .15s}
#arcade .ap-tab.on{border-color:#ff922b;background:#fff4e6;transform:scale(1.08)}
#arcade .ap-side{flex:0 0 auto;width:clamp(15rem,30vw,34rem);display:grid;gap:.9rem;align-content:center;background:rgba(255,255,255,.8);border-radius:2.2rem;padding:1rem;box-sizing:border-box;overflow:auto}
#arcade .ap-grid3{grid-template-columns:repeat(3,1fr)}
#arcade .ap-grid2{grid-template-columns:repeat(2,1fr)}
#arcade .ap-item{aspect-ratio:1;width:100%;border-radius:1.8rem;border:.3rem solid #ffd8a8;background:#fff;font-size:clamp(2.8rem,9vh,6rem);line-height:1;padding:0;cursor:pointer;box-shadow:0 .4rem 0 #ffc078;display:flex;align-items:center;justify-content:center;transition:transform .1s}
#arcade .ap-item:active,#arcade .ap-act:active,#arcade .ap-arrow:active{transform:scale(.9)}
#arcade .ap-acts{flex:0 0 auto;display:flex;justify-content:center;gap:1.4rem;padding-top:.6rem}
#arcade .ap-act{width:clamp(5rem,12vh,8rem);aspect-ratio:1;border-radius:50%;border:none;background:var(--c);font-size:clamp(2.4rem,6vh,4rem);line-height:1;padding:0;box-shadow:0 .45rem 0 rgba(0,0,0,.18);cursor:pointer}
#arcade .ap-float{position:absolute;left:50%;top:45%;font-size:18cqmin;line-height:1;pointer-events:none;z-index:9;animation:apFloat 1.1s ease-out forwards}
#arcade .ap-float.big{font-size:26cqmin}
#arcade .ap-float.eat{animation:apEat 1s ease-in forwards}
@keyframes apFloat{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}25%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{transform:translate(-50%,-160%) scale(1.1);opacity:0}}
@keyframes apEat{0%{transform:translate(120%,-120%) scale(.8);opacity:1}70%{transform:translate(-50%,-10%) scale(.6);opacity:1}100%{transform:translate(-50%,-10%) scale(0);opacity:0}}
@keyframes apBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.15) rotate(-6deg)}70%{transform:scale(.95) rotate(4deg)}}
@keyframes apPop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
#arcade .ap-bounce{animation:apBounce .5s ease}
/* chef */
#arcade .ap-plate{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;container-type:size;border-radius:50%;background:radial-gradient(circle,#fff 0 66%,#e9ecef 67% 70%,#fff 71%);box-shadow:0 1rem 2.4rem rgba(0,0,0,.18)}
#arcade .ap-base{position:absolute;inset:10%;border-radius:50%;box-shadow:inset 0 .5rem 1.6rem rgba(0,0,0,.18);transition:filter .4s}
#arcade .ap-base.baked{filter:brightness(1.08) saturate(1.25) drop-shadow(0 0 2.5cqw rgba(255,146,43,.8))}
#arcade .ap-tops{position:absolute;inset:0}
#arcade .ap-tp{position:absolute;transform:translate(-50%,-50%);font-size:12cqw;line-height:1;cursor:pointer;animation:apPop .25s ease-out;user-select:none}
/* pet */
#arcade .ap-pet-av{position:relative;font-size:66cqmin;line-height:1;cursor:pointer;user-select:none;filter:drop-shadow(0 1.2rem 2rem rgba(0,0,0,.18))}
#arcade .ap-pet-badge{position:absolute;right:-12%;top:-6%;font-size:.38em;line-height:1}
/* lab */
#arcade .ap-eq{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:1.2rem;font-size:clamp(2.4rem,6vh,4rem);color:#495057}
#arcade .ap-dot{width:clamp(3.6rem,10vh,6.5rem);aspect-ratio:1;border-radius:50%;border:.35rem dashed #adb5bd;display:flex;align-items:center;justify-content:center;font-size:.7em;box-sizing:border-box;transition:background .4s}
#arcade .ap-dot.big{width:clamp(4.6rem,13vh,8.5rem);border-style:solid}
#arcade .ap-flask-svg{height:min(92cqh,75cqw);aspect-ratio:.83;filter:drop-shadow(0 .8rem 2rem rgba(0,0,0,.12))}
#arcade #apLiq1, #arcade #apLiq2, #arcade #apStream{transition:all .4s cubic-bezier(.2,.9,.3,1)}
#arcade #apBubbles circle{animation:apBubbleFloat 1.2s infinite alternate ease-in-out}
@keyframes apBubbleFloat{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}
#arcade .ap-color{border-radius:50%;border:.45rem solid rgba(0,0,0,.12);box-shadow:0 .45rem 0 rgba(0,0,0,.15)}
/* lab colors compact */
#arcade .ap-lab .ap-side {
  width: min(22vw, 19rem);
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  padding: 1rem;
  align-content: center;
  justify-items: center;
  max-height: 90cqh;
  overflow: hidden;
}
#arcade .ap-lab .ap-color {
  width: min(7.5cqw, 7.8cqh, 5.8rem) !important;
  height: min(7.5cqw, 7.8cqh, 5.8rem) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  border: 3.5px solid #ffffff !important;
  outline: 2px solid #dee2e6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12), inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28), outline-color 0.15s;
}
#arcade .ap-lab .ap-color:hover, #arcade .ap-lab .ap-color:active {
  transform: scale(1.15);
  outline-color: #fab005;
}
/* candle */
#arcade .ap-party{background:radial-gradient(circle at 50% 30%,#5f3dc4,#2b1a5e 75%)}
#arcade .ap-nums{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;padding-bottom:.4rem}
#arcade .ap-nums button{min-width:4.2rem;height:4.2rem;border-radius:1.2rem;border:none;background:rgba(255,255,255,.25);color:#fff;font-size:2rem;font-weight:900;cursor:pointer}
#arcade .ap-nums button.on{background:#ffd43b;color:#5f3dc4}
#arcade .ap-cakewrap{display:flex;flex-direction:column;align-items:center}
#arcade .ap-candles{display:flex;justify-content:center;align-items:flex-end;gap:1.2cqw;position:relative;z-index:2;margin-bottom:-6cqh}
#arcade .ap-cd{display:flex;flex-direction:column;align-items:center;cursor:pointer}
#arcade .ap-flame{font-size:var(--fs);line-height:1;animation:apFlick .6s ease-in-out infinite alternate;transform-origin:50% 90%}
#arcade .ap-flame.off{animation:none}
#arcade .ap-stick{display:block;width:calc(var(--fs) * .3);height:calc(var(--fs) * .85);border-radius:.6rem .6rem .2rem .2rem;background:repeating-linear-gradient(45deg,#ff8787 0 .7rem,#fff 0 1.4rem)}
#arcade .ap-cake{font-size:min(50cqh,62cqw);line-height:1;filter:drop-shadow(0 1.6rem 3rem rgba(0,0,0,.45))}
#arcade .ap-win{animation:apBounce .8s ease infinite}
@keyframes apFlick{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.12) rotate(3deg)}}
/* maze */
#arcade .ap-maze .ap-stage{background:linear-gradient(135deg,#d3f9d8,#e6fcf5)}
#arcade .ap-mz{width:min(100cqw,100cqh);aspect-ratio:1;display:grid;gap:1.2%;padding:1.5%;box-sizing:border-box;container-type:size;background:#fff;border-radius:1.8rem;box-shadow:0 .8rem 2rem rgba(0,0,0,.12)}
#arcade .ap-mc{border-radius:14%;display:flex;align-items:center;justify-content:center;font-size:13cqw;line-height:1;user-select:none}
#arcade .ap-mc.path{background:#fff9db;cursor:pointer}
#arcade .ap-mc.wall{background:#69db7c;font-size:10cqw}
#arcade .ap-mc.near{background:#d0ebff;box-shadow:inset 0 0 0 .3rem #74c0fc}
#arcade .ap-pad{grid-template-columns:repeat(3,1fr);width:clamp(15rem,26vw,30rem)}
#arcade .ap-arrow{aspect-ratio:1;width:100%;border-radius:1.8rem;border:.35rem solid #0ca678;background:#fff;font-size:clamp(2.6rem,8vh,5rem);line-height:1;padding:0;cursor:pointer;box-shadow:0 .45rem 0 #96f2d7}
#arcade .ap-pad-c{display:flex;align-items:center;justify-content:center;font-size:clamp(2.4rem,7vh,4.4rem)}
/* puzzle */
#arcade .ap-pz-left{flex:1.25 1 0}
#arcade .ap-pz-board{position:relative;width:min(96cqw,96cqh);aspect-ratio:1;display:grid;container-type:size;background:#fff;border-radius:1rem;outline:.5rem solid #339af0;outline-offset:.3rem;overflow:hidden}
#arcade .ap-pz-ghost{position:absolute;inset:0;font-size:80cqh;line-height:100cqh;text-align:center;opacity:.2;filter:grayscale(1);pointer-events:none;white-space:nowrap}
#arcade .ap-pz-board.ap-full .ap-pz-ghost{opacity:0}
#arcade .ap-pz-slot{position:relative;overflow:hidden;container-type:size;outline:.25rem dashed rgba(51,154,240,.6);outline-offset:-.15rem;cursor:pointer;z-index:1}
#arcade .ap-pz-slot.done,#arcade .ap-full .ap-pz-slot{outline:none}
#arcade .ap-pz-tray{width:min(96cqw,96cqh);aspect-ratio:1;display:grid;gap:5%}
#arcade .ap-pz-piece{position:relative;overflow:hidden;container-type:size;background:#fff;border-radius:1rem;box-shadow:0 0 0 .3rem #ffa94d,0 .6rem 1rem rgba(0,0,0,.15);cursor:pointer;transition:transform .15s}
#arcade .ap-pz-piece.sel{transform:scale(1.08);box-shadow:0 0 0 .5rem #2f9e44,0 1rem 1.6rem rgba(0,0,0,.25);z-index:2}
#arcade .ap-pz-img{position:absolute;text-align:center;white-space:nowrap;pointer-events:none;user-select:none}
#arcade .ap-hint{animation:apBounce .5s ease}
/* shadow */
#arcade .ap-sh{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:4%}
#arcade .ap-sh-col{display:grid;gap:1rem;min-height:0}
#arcade .ap-sh-card{container-type:size;min-height:0;border-radius:2rem;background:#fff;border:.4rem solid #dee2e6;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;box-shadow:0 .4rem 1rem rgba(0,0,0,.08)}
#arcade .ap-sh-card span{font-size:80cqmin;line-height:1;user-select:none;transition:filter .4s}
#arcade .ap-sh-card.dark{background:#f1f3f5;border-style:dashed}
#arcade .ap-sh-card.dark span{filter:brightness(0) opacity(.8)}
#arcade .ap-sh-card.sel{border-color:#ff922b;transform:scale(1.03);box-shadow:0 0 0 .4rem #ffd8a8}
#arcade .ap-sh-card.ok{border-color:#51cf66;border-style:solid;background:#ebfbee}
/* portrait / narrow */
@media (max-aspect-ratio:1/1){
  #arcade .ap-main{flex-direction:column}
  #arcade .ap-col{flex-direction:row}
  #arcade .ap-side{width:auto;align-self:stretch}
  #arcade .ap-grid3{grid-template-columns:repeat(5,1fr)}
  #arcade .ap-grid2{grid-template-columns:repeat(5,1fr)}
  #arcade .ap-pad{width:min(80vw,34vh);align-self:center}
  #arcade .ap-item{font-size:clamp(2.4rem,7vw,5rem)}
}
/*BVH_AP_END*/
/*BVH_ARCADE_CARD*/
/* Thẻ trò chơi Khu giải trí: bố cục dọc, gọn cho 4 trò/hàng, tên hiện đầy đủ không bị cắt */
#arcade .arcade-card { padding: 1.1rem 1rem 1rem !important; gap: .6rem !important; align-items: stretch !important; text-align: center !important; }
#arcade .arcade-card > div:first-child { flex-direction: column !important; align-items: center !important; gap: .5rem !important; text-align: center !important; }
#arcade .arcade-card > div:first-child > div:first-child { width: 5.4rem !important; height: 5.4rem !important; font-size: 3.4rem !important; border-radius: 1.4rem !important; }
#arcade .arcade-card > div:first-child > div:last-child { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .35rem !important; min-width: 0 !important; width: 100% !important; }
#arcade .arcade-card h3 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 1.6rem !important; line-height: 1.2 !important; text-align: center !important; word-break: normal !important; overflow-wrap: anywhere !important; }
#arcade .arcade-card > div:first-child span { font-size: 1.1rem !important; line-height: 1.3 !important; white-space: normal !important; text-align: center !important; padding: .2rem .7rem !important; }
#arcade .arcade-card p { display: none !important; }
#arcade .arcade-card .btn { margin-top: auto !important; width: 100% !important; white-space: nowrap !important; font-size: 1.35rem !important; padding: .6rem .5rem !important; border-radius: 1.2rem !important; overflow: hidden !important; text-overflow: clip !important; }
@media (max-width: 760px) {
  #arcade .arcade-card h3 { font-size: 1.45rem !important; }
  #arcade .arcade-card .btn { font-size: 1.25rem !important; }
}


/*BVH_GAME_ENHANCEMENTS*/
/* 1. LOUD BALLOON GAME REDESIGN */
.bvh-balloon-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(46vh, 32rem);
  width: 100%;
}
.bvh-balloon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform-origin: center 85%;
  transition: transform 0.12s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bvh-balloon-body {
  width: min(30vw, 19rem);
  height: min(36vw, 23rem);
  border-radius: 50% 50% 50% 50% / 44% 44% 56% 56%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--bcolor, #ff6b6b) 32%, var(--bshadow, #c92a2a) 100%);
  box-shadow: inset -0.8rem -1rem 2rem rgba(0,0,0,0.22), 0 1.2rem 2.5rem rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bvh-balloon-shine {
  position: absolute;
  top: 10%;
  left: 18%;
  width: 32%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(-30deg);
  pointer-events: none;
}
.bvh-balloon-inner-text {
  font-size: clamp(3.2rem, 7.5vw, 6rem);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.35), 0 0 1.5rem rgba(255,255,255,0.6);
  z-index: 2;
  text-align: center;
  padding: 0.5rem;
}
.bvh-balloon-knot {
  width: 2rem;
  height: 1.3rem;
  background: var(--bshadow, #c92a2a);
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
  margin-top: -0.2rem;
  z-index: 1;
}
.bvh-balloon-string {
  width: 3rem;
  height: 6rem;
  margin-top: -0.2rem;
  animation: bvhStringWave 2s ease-in-out infinite alternate;
}
@keyframes bvhStringWave {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
.bvh-balloon.blowing {
  animation: bvhBalloonWobble 0.14s infinite alternate ease-in-out;
}
@keyframes bvhBalloonWobble {
  0% { transform: scale(var(--bscale, 0.4)) rotate(-2deg); }
  100% { transform: scale(var(--bscale, 0.4)) rotate(2deg); }
}
.bvh-balloon.popped .bvh-balloon-body {
  animation: bvhBalloonPop 0.28s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes bvhBalloonPop {
  0% { transform: scale(1.1); opacity: 1; }
  35% { transform: scale(1.4); opacity: 0.85; filter: brightness(1.7); }
  100% { transform: scale(0.1); opacity: 0; }
}
.bvh-balloon-frag {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50% 20% 50% 20%;
  pointer-events: none;
  animation: bvhFragFly 0.45s ease-out forwards;
}
@keyframes bvhFragFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)) scale(0.2) rotate(180deg); opacity: 0; }
}
/* Bóng bay: co theo chiều cao màn hình để dòng trạng thái + thanh đo luôn nhìn thấy (điện thoại ngang) */
.bvh-balloon-wrap { min-height: 0; max-height: 52vh; flex: 0 1 auto; }
.bvh-balloon-body { width: min(30vw, 19rem, 27vh); height: min(36vw, 23rem, 32vh); }
.bvh-balloon-string { height: min(6rem, 8vh); }
.loudcol .mic-status { white-space: normal !important; text-align: center; line-height: 1.25; }
@media (max-height: 520px) {
  .bvh-balloon-inner-text { font-size: clamp(2.2rem, 9vh, 4.5rem); }
  .loudcol .loud-spk { font-size: 2.4rem !important; }
}

/* 2. ZOMBIE DEFENSE FORTRESS & BULLETS */
.zombie-fortress {
  position: absolute;
  left: 1.2rem;
  top: 15%;
  bottom: 12%;
  width: 9rem;
  background: rgba(255, 255, 255, 0.92);
  border: 3.5px solid #69db7c;
  border-radius: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0.8rem 0.4rem;
  z-index: 10;
}
.fortress-roof {
  font-size: 4.8rem;
  animation: pulse 1.5s infinite alternate;
}
.fortress-garden {
  font-size: 2.2rem;
  letter-spacing: 0.2rem;
}
.fortress-fence {
  font-size: 2.4rem;
  letter-spacing: 0.1rem;
}
.zombie-bullet-fx {
  position: fixed;
  font-size: 3.2rem;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 4px 8px rgba(34, 139, 230, 0.6));
}
.water-splash-fx {
  position: fixed;
  font-size: 3.8rem;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  animation: fadeIn 0.35s ease-out;
  filter: drop-shadow(0 4px 10px rgba(34, 139, 230, 0.55));
}

/* 3. FRUIT CATCHER SVG BASKET & CLEAN STAGE */
.fc-stage {
  background: linear-gradient(180deg, #74c0fc 0%, #a9e34b 68%, #5c940d 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.fc-sky {
  position: absolute;
  top: 0; left: 0; right: 0; height: 35%;
  background: radial-gradient(circle at 85% 20%, rgba(255,236,153,0.8) 0%, transparent 40%);
  pointer-events: none;
}
.fc-tree {
  position: absolute;
  top: -8%; left: 0; right: 0; height: 32%;
  display: flex; justify-content: space-around;
  pointer-events: none;
}
.fc-tree i {
  width: 24%; height: 100%;
  background: #40c057;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 0 6px 14px rgba(43,138,62,0.4);
}
.fc-grass {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 14%;
  background: #2b8a3e;
  border-top: 4px solid #51cf66;
}
.fc-area {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fc-fruit {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.1s;
}
.fc-fruit.wobble {
  animation: fruitWobble 0.25s infinite alternate ease-in-out;
}
@keyframes fruitWobble {
  0% { transform: translate(-50%, -50%) rotate(-8deg); }
  100% { transform: translate(-50%, -50%) rotate(8deg); }
}
.fc-ico {
  font-size: min(10vh, 6.5rem);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}
.fc-lbl {
  background: rgba(255,255,255,0.96);
  color: #212529;
  font-size: 2.2rem;
  font-weight: 900;
  padding: 0.3rem 1.4rem;
  border-radius: 1.4rem;
  border: 2.5px solid #ffd43b;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  margin-top: -0.5rem;
}
.fc-basket {
  position: absolute;
  bottom: 6%;
  transform: translateX(-50%);
  width: min(24vw, 16rem);
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.bvh-basket {
  width: 100%;
  height: auto;
  display: block;
}
.fc-basket.fc-pop {
  animation: basketPop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes basketPop {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.18); }
  100% { transform: translateX(-50%) scale(1); }
}

/* 4. SORTING GAME (BỎ VÀO GIỎ) */
.sb-stage {
  background: linear-gradient(180deg, #fff9db 0%, #ffe8cc 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}
.sb-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
}
.sb-item {
  background: #ffffff;
  border: 4px solid #ced4da;
  border-radius: 2.4rem;
  padding: 1.4rem 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb-item.sb-grab {
  cursor: grabbing;
  box-shadow: 0 16px 36px rgba(0,0,0,0.2);
  z-index: 99;
}
.sb-item .sb-ico {
  font-size: min(12vh, 8rem);
  line-height: 1;
}
.sb-item .sb-cap {
  font-size: 2.4rem;
  font-weight: 900;
  color: #343a40;
}
.sb-item .sb-txt {
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900;
  color: #1971c2;
}
.sb-bins {
  display: flex;
  justify-content: center;
  gap: min(5vw, 3.6rem);
  width: 100%;
  margin-bottom: 1.8rem;
}
.sb-bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(25vw, 15.5rem);
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  position: relative;
}
.sb-bin.sb-over {
  transform: scale(1.08) translateY(-4px);
  filter: drop-shadow(0 0 1.2rem rgba(255, 146, 43, 0.8));
}
.sb-bin.sb-pop, .sb-bin.correct {
  animation: sbBasketCatch 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
@keyframes sbBasketCatch {
  0% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
  }
  25% {
    transform: scale(1.12, 0.88) translateY(8px);
    filter: drop-shadow(0 0 18px rgba(81, 207, 102, 0.8));
  }
  50% {
    transform: scale(0.95, 1.1) translateY(-10px);
    filter: drop-shadow(0 0 24px rgba(81, 207, 102, 0.95));
  }
  75% {
    transform: scale(1.04, 0.98) translateY(2px);
    filter: drop-shadow(0 0 12px rgba(81, 207, 102, 0.6));
  }
  100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
  }
}
.sb-sign {
  background: #ffffff;
  border: 3.5px solid;
  border-radius: 1.8rem;
  padding: 0.3rem 1.6rem;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1.2;
  font-weight: 900;
  margin-top: -2.8rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 5. ANIMAL SOUND GUESSING */
.animal-sound-stage {
  background: linear-gradient(180deg, #e7f5ff 0%, #d0ebff 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.8rem !important;
}
.animal-prompt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.animal-sound-speaker-btn {
  background: linear-gradient(135deg, #ffd43b 0%, #fcc419 100%);
  border: 4px solid #fab005;
  border-radius: 2.2rem;
  padding: 1.2rem 3rem;
  font-size: 2rem;
  font-weight: 900;
  color: #343a40;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(250, 176, 5, 0.35);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.15s, box-shadow 0.15s;
}
.animal-sound-speaker-btn:hover, .animal-sound-speaker-btn:active {
  transform: scale(1.05);
}
.spk-wave {
  font-size: 3.6rem;
  animation: pulse 0.8s infinite alternate;
}
.animal-prompt-bubble {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #74c0fc;
  border-radius: 1.8rem;
  padding: 0.6rem 2.2rem;
  font-size: 2.2rem;
  font-weight: 900;
  color: #1971c2;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.animal-options-row {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.animal-opt-card {
  background: #ffffff;
  border: 4px solid #ced4da;
  border-radius: 2.4rem;
  padding: 1.6rem 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.1);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.animal-opt-card:hover {
  transform: translateY(-4px) scale(1.03);
}
.animal-opt-card.correct {
  border-color: #51cf66 !important;
  background: #ebfbee !important;
}
.animal-opt-icon {
  font-size: min(13vh, 8.5rem);
  line-height: 1;
}
.animal-opt-name {
  font-size: 2.4rem;
  font-weight: 900;
  color: #343a40;
}
/*BVH_GAME_ENHANCEMENTS_END*/

.zombie-tip-pill {
  background: rgba(255,255,255,0.95) !important;
  padding: 0.5rem 1.6rem !important;
  border-radius: 1.6rem !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: #1864ab !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border: 2.5px solid #a5d8ff !important;
}

/* ==========================================================
   CÂU HỎI TỰ SOẠN & KỸ NĂNG SỐNG - CHUẨN GIAO DIỆN BÉ VUI HỌC
   ========================================================== */
.cq-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.6rem !important;
  width: 100% !important;
  max-width: 96rem !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.cq-stats-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.4rem !important;
  background: linear-gradient(135deg, #e6fcf5, #c3fae8) !important;
  border: 2.5px solid #20c997 !important;
  border-radius: 2.2rem !important;
  padding: 1.6rem 2.2rem !important;
  box-shadow: 0 8px 24px rgba(32, 201, 151, 0.16) !important;
}

.cq-stat-main {
  display: flex !important;
  align-items: center !important;
  gap: 1.4rem !important;
}

.cq-stat-icon {
  font-size: 3.6rem !important;
  width: 5.4rem !important;
  height: 5.4rem !important;
  border-radius: 50% !important;
  background: #20c997 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3) !important;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
}

.cq-stat-title {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #0ca678 !important;
}

.cq-stat-sub {
  font-size: 1.4rem !important;
  color: #2b8a3e !important;
  font-weight: 600 !important;
  margin-top: 0.3rem !important;
}

.cq-badges-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
}

.cq-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: 9999px !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  font-family: inherit !important;
}

.cq-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  border-radius: 2rem !important;
  padding: 1.2rem 1.8rem !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
}

.cq-filters-card {
  background: #f8f9fa !important;
  padding: 1.2rem 1.6rem !important;
  border-radius: 2rem !important;
  border: 1.5px solid #e9ecef !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.cq-card {
  background: #ffffff !important;
  border: 2px solid #b2f2bb !important;
  border-radius: 2rem !important;
  padding: 1.6rem 2rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.cq-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

.cq-card.disabled {
  opacity: 0.65 !important;
  border-color: #dee2e6 !important;
  background: #fdfdfd !important;
}

.cq-card.selected {
  border-color: #e03131 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.2) !important;
}

.cq-bulk-bar {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  background: #fff0f6 !important;
  border: 2px dashed #f783ac !important;
  border-radius: 1.6rem !important;
  padding: 0.9rem 1.6rem !important;
  margin-top: 1rem !important;
}

.cq-bulk-select-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #c2255c !important;
  cursor: pointer !important;
}

.cq-bulk-actions {
  display: flex;
  align-items: center !important;
  gap: 0.8rem !important;
  flex-wrap: wrap !important;
}

.cq-ans-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 1.2rem !important;
  font-size: 1.4rem !important;
  background: #f8f9fa !important;
  border: 1.5px solid #dee2e6 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.cq-ans-pill.cq-ans-correct {
  background: #ebfbee !important;
  border-color: #8ce99a !important;
  color: #2b8a3e !important;
}

.cq-ans-pill.cq-ans-wrong {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #495057 !important;
}

.cq-ans-thumb {
  width: 3.8rem !important;
  height: 3.8rem !important;
  min-width: 3.8rem !important;
  max-width: 3.8rem !important;
  max-height: 3.8rem !important;
  object-fit: contain !important;
  border-radius: 0.6rem !important;
  background: #ffffff !important;
  border: 1px solid #ced4da !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.cq-ans-emo {
  font-size: 2rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.cq-card-speak-btn, .cq-ans-speak-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  min-width: 3.2rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #ff922b !important;
  color: #e8590c !important;
  font-size: 1.6rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  margin-left: 0.6rem !important;
  transition: transform 0.12s, background 0.15s !important;
  vertical-align: middle !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.cq-card-speak-btn:hover, .cq-ans-speak-btn:hover {
  transform: scale(1.15) !important;
  background: #fff4e6 !important;
}

.cq-card-speak-btn:active, .cq-ans-speak-btn:active {
  transform: scale(0.92) !important;
}

.cq-icl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  flex-wrap: wrap !important;
}

.cq-ans-img {
  width: 6.5rem !important;
  height: 6.5rem !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border-radius: 0.9rem !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}

.cq-emo, .emo, .cq-stat-icon {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
  line-height: 1 !important;
}

/* Modal rộng thoáng cho Kho câu hỏi mẫu, Nhập Excel và Phê duyệt */
.mbox.mbox-wide,
.mbox.cq-modal-wide {
  width: min(1120px, 96vw) !important;
  max-width: 96vw !important;
  height: min(95vh, 920px) !important;
  max-height: 95vh !important;
  overflow: hidden !important;
  padding: 1.1rem 1.4rem !important;
  border-radius: 2rem !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

.cq-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1.5px solid #e9ecef !important;
  padding-bottom: 0.5rem !important;
  flex-shrink: 0 !important;
}

.cq-modal-title {
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  color: #e8590c !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

.cq-modal-sub {
  font-size: 1.25rem !important;
  color: #868e96 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.cq-modal-close-btn {
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-width: 3.4rem !important;
  border-radius: 50% !important;
  border: 1.5px solid #dee2e6 !important;
  background: #f8f9fa !important;
  color: #495057 !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}

.cq-modal-close-btn:hover {
  background: #ffe3e3 !important;
  border-color: #ffa8a8 !important;
  color: #e03131 !important;
  transform: scale(1.08) !important;
}

.cq-modal-close-btn:active {
  transform: scale(0.92) !important;
}

.sc-q-item {
  background: #ffffff !important;
  border: 1.5px solid #dee2e6 !important;
  border-radius: 1.3rem !important;
  padding: 0.75rem 1.1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
  transition: all 0.15s !important;
}

.sc-q-item:hover {
  border-color: #74c0fc !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Tabs môn học trong Modal */
.cq-modal-tabs {
  display: flex !important;
  gap: 0.4rem !important;
  background: #f1f3f5 !important;
  padding: 0.4rem !important;
  border-radius: 1.2rem !important;
  border: 1.5px solid #dee2e6 !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}

.cq-modal-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  margin: 0.2rem 0 !important;
}

.cq-modal-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: #ffffff !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 1.2rem !important;
  padding: 0.45rem 1rem !important;
  flex: 1 !important;
  min-width: 240px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.cq-modal-search-box:focus-within {
  border-color: #339af0 !important;
  box-shadow: 0 0 0 3px rgba(51,154,240,0.15) !important;
}

.cq-modal-search-box input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 1.35rem !important;
  width: 100% !important;
  color: #212529 !important;
}

.cq-modal-bulk-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  background: #f1f8ff !important;
  border: 1.5px solid #b3d7ff !important;
  border-radius: 1.4rem !important;
  padding: 0.6rem 1.2rem !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

/* Khung kéo thả file Excel */
.cq-excel-dropzone {
  border: 2.5px dashed #4dabf7 !important;
  background: #f8faff !important;
  border-radius: 1.8rem !important;
  padding: 2.2rem 1.6rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
}

.cq-excel-dropzone:hover,
.cq-excel-dropzone.dragover {
  border-color: #1971c2 !important;
  background: #e7f5ff !important;
  transform: translateY(-2px) !important;
}

.cq-excel-dropzone-icon {
  font-size: 4.8rem !important;
  line-height: 1 !important;
}

.cq-excel-dropzone-txt {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #1864ab !important;
}

.cq-excel-dropzone-sub {
  font-size: 1.3rem !important;
  color: #868e96 !important;
}

/* Thẻ xem trước danh sách câu hỏi đọc được từ file Excel */
.cq-preview-table-wrap {
  max-height: 38vh !important;
  overflow-y: auto !important;
  border: 1.5px solid #dee2e6 !important;
  border-radius: 1.4rem !important;
  background: #ffffff !important;
  margin-top: 1rem !important;
}

/* Huy hiệu trạng thái duyệt */
.cq-approval-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 9999px !important;
}
.cq-approval-badge.pending {
  background: #fff3bf !important;
  color: #d9480f !important;
  border: 1px solid #ffd43b !important;
}
.cq-approval-badge.approved {
  background: #d3f9d8 !important;
  color: #2b8a3e !important;
  border: 1px solid #8ce99a !important;
}

/* Phân loại Môn học & Khối lớp trong Kho câu hỏi tự thêm */
.cq-sub-tabs-bar {
  margin-top: 1.2rem;
}
.cq-sub-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.6rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cq-sub-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 0.4rem !important;
  font-size: clamp(1.15rem, 1.2vw, 1.38rem) !important;
  font-weight: 700 !important;
  border-radius: 1.2rem !important;
  border: 2px solid transparent !important;
  background: #f1f3f5 !important;
  color: #495057 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  min-width: 0 !important;
}
.cq-sub-tab:hover {
  background: #e9ecef !important;
  transform: translateY(-1px) !important;
}
.cq-sub-tab.active, .cq-sub-tab.on {
  color: #fff !important;
}
.cq-sub-tab[data-sub="all"].active {
  background: #1971c2 !important;
  box-shadow: 0 4px 14px rgba(25, 113, 194, 0.35) !important;
}
.cq-sub-tab[data-sub="letters"].active {
  background: #e03131 !important;
  box-shadow: 0 4px 14px rgba(224, 49, 49, 0.35) !important;
}
.cq-sub-tab[data-sub="numbers"].active {
  background: #2b8a3e !important;
  box-shadow: 0 4px 14px rgba(43, 138, 62, 0.35) !important;
}
.cq-sub-tab[data-sub="english"].active {
  background: #f76707 !important;
  box-shadow: 0 4px 14px rgba(247, 103, 7, 0.35) !important;
}
.cq-sub-tab[data-sub="general"].active {
  background: #0ca678 !important;
  box-shadow: 0 4px 14px rgba(12, 166, 120, 0.35) !important;
}

@media (max-width: 640px) {
  .cq-sub-tabs {
    display: flex !important;
    overflow-x: auto !important;
    padding-bottom: 0.4rem !important;
    scrollbar-width: thin !important;
  }
  .cq-sub-tab {
    flex: 0 0 auto !important;
    padding: 0.6rem 1.2rem !important;
  }
}

.cq-grade-bar {
  margin-top: 0.8rem !important;
  background: #f8f9fa !important;
  padding: 0.9rem 1.4rem !important;
  border-radius: 1.6rem !important;
  border: 1.5px solid #e9ecef !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cq-grade-pills-row, .cq-grade-pills {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cq-grade-label {
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  color: #495057 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.cq-grade-pills-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  flex: 1 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.cq-grade-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.4rem 0.2rem !important;
  font-size: clamp(1.1rem, 1.12vw, 1.25rem) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  border: 1.5px solid #dee2e6 !important;
  background: #fff !important;
  color: #495057 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
  min-width: 0 !important;
}
.cq-grade-pill:hover {
  background: #f1f3f5 !important;
  border-color: #ced4da !important;
}
.cq-grade-pill.active {
  background: #1864ab !important;
  color: #fff !important;
  border-color: #1864ab !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(24, 100, 171, 0.28) !important;
}

@media (max-width: 768px) {
  .cq-grade-pills-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .cq-grade-pills-grid {
    display: flex !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding-bottom: 0.3rem !important;
    scrollbar-width: thin !important;
  }
  .cq-grade-pill {
    flex: 0 0 auto !important;
    padding: 0.35rem 0.85rem !important;
  }
}

.cq-grade-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  padding-top: 0.7rem !important;
  border-top: 1px dashed #dee2e6 !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* Ưu tiên Responsive cho màn hình dọc (Portrait) & điện thoại ngang thấp (sau khối V22) */
@media (orientation: portrait), (max-width: 768px) {
  .puzzle-board-container {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .puzzle-frame-grid, .puzzle-piece-tray {
    width: min(34vh, 22rem) !important;
    height: min(34vh, 22rem) !important;
  }
  .maze-container-flex {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .maze-cell {
    width: min(6vh, 3.6rem) !important;
    height: min(6vh, 3.6rem) !important;
    font-size: 2rem !important;
  }
  .maze-nav-pad {
    grid-template-columns: repeat(3, min(6vh, 4rem)) !important;
    gap: 0.4rem !important;
  }
  .maze-arrow-btn {
    width: min(6vh, 4rem) !important;
    height: min(6vh, 4rem) !important;
    font-size: 2rem !important;
  }
  .cake-base-giant {
    width: min(84vw, 32rem) !important;
  }
  .candle-body-stick {
    height: min(7vh, 5.2rem) !important;
  }
  .ages {
    grid-template-columns: repeat(auto-fit, minmax(7.8rem, 1fr)) !important;
  }
  .zone.small b {
    font-size: 1.3rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .puzzle-board-container {
    flex-direction: row !important;
    gap: 0.8rem !important;
  }
  .puzzle-frame-grid, .puzzle-piece-tray {
    width: min(56vh, 24rem) !important;
    height: min(56vh, 24rem) !important;
  }
  .maze-container-flex {
    flex-direction: row !important;
    gap: 0.8rem !important;
  }
  .maze-cell {
    width: min(10.5vh, 5.2rem) !important;
    height: min(10.5vh, 5.2rem) !important;
  }
}

/* ==========================================================================
   MODERN BENTO GRID REDESIGN CHO GÓC CÀI ĐẶT (#parent) & ĐẤU TRƯỜNG PK
   ========================================================================== */
#parent {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.p-header-card {
  max-width: 114rem !important;
  width: 95% !important;
  margin: 0.5rem auto 0 !important;
  background: #ffffff !important;
  border-radius: 1.8rem !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
  border: 1.5px solid #e2e8f0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#parent .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0.3rem 1.2rem !important;
  min-height: 3.2rem !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#parent .topbar .icon-btn {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  width: 2.9rem !important;
  height: 2.9rem !important;
  font-size: 1.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.16s ease !important;
}

#parent .topbar .icon-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px);
}

#parent .topbar .ztitle {
  color: #0f172a !important;
  text-shadow: none !important;
  font-size: 1.48rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  flex: 1 !important;
}

#parent .tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0.35rem !important;
  padding: 0.32rem 0.8rem 0.42rem !important;
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}

#parent .tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#parent .tabs .tab {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  border-radius: 9999px !important;
  padding: 0.28rem 0.72rem !important;
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#parent .tabs[data-count="13"] .tab,
#parent .tabs[data-count="14"] .tab {
  flex: 0 0 auto !important;
  padding: 0.26rem 0.65rem !important;
  font-size: 1.1rem !important;
  border-radius: 9999px !important;
}

@media (max-width: 1100px) {
  #parent .tabs .tab,
  #parent .tabs[data-count="13"] .tab,
  #parent .tabs[data-count="14"] .tab {
    padding: 0.26rem 0.62rem !important;
    font-size: 1.08rem !important;
  }
}

@media (max-width: 767px) {
  #parent .tabs .tab,
  #parent .tabs[data-count="13"] .tab,
  #parent .tabs[data-count="14"] .tab {
    padding: 0.24rem 0.54rem !important;
    font-size: 1.05rem !important;
  }
}

#parent .tabs .tab:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px);
}

#parent .tabs .tab.on {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.28) !important;
  transform: translateY(-1px);
}

#parent > .pbody {
  max-width: 114rem !important;
  width: 95% !important;
  margin: 0.6rem auto 2.2rem !important;
  background: #ffffff !important;
  border-radius: 1.8rem !important;
  padding: 1.1rem 1.3rem !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

#parent .pbody > *,
#parent [id^="tSec_"],
#parent [id^="tSec_"] > *,
#teacherClassListContainer {
  flex-shrink: 0 !important;
  height: auto !important;
}

/* ==========================================================================
   TYPOGRAPHIC SCALE NORMALIZATION CHO GÓC CÀI ĐẶT (#parent)
   Đảm bảo tất cả chữ bên dưới có kích thước cân đối với tiêu đề (1.45rem - 1.5rem),
   tuyệt đối không bị quá to hay choán chỗ màn hình.
   ========================================================================== */
#parent h2,
#parent h3 {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#parent h4 {
  font-size: 1.25rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

#parent .ptxt {
  font-size: 1.12rem !important;
  line-height: 1.4 !important;
}

#parent .prow > b {
  font-size: 1.32rem !important;
  font-weight: 800 !important;
}

#parent .btn {
  font-size: 1.14rem !important;
}

#parent .btn.sm {
  font-size: 1.08rem !important;
  padding: 0.3rem 0.65rem !important;
}

#parent .chip {
  font-size: 1.12rem !important;
  padding: 0.28rem 0.68rem !important;
}

#parent .tag {
  font-size: 1.05rem !important;
}

#parent input.tin,
#parent select.tin,
#parent textarea.tin {
  font-size: 1.15rem !important;
  padding: 0.38rem 0.7rem !important;
}

#parent table {
  font-size: 1.15rem !important;
}

#parent table th {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  padding: 0.55rem 0.75rem !important;
}

#parent table td {
  font-size: 1.15rem !important;
  padding: 0.55rem 0.75rem !important;
}

#teacherClassListContainer table th,
#teacherClassListContainer table td {
  padding: 0.42rem 0.32rem !important;
  font-size: 1.06rem !important;
}

#teacherClassListContainer .btn.sm {
  font-size: 0.98rem !important;
  padding: 0.2rem 0.45rem !important;
}

.bvh-profile-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 2px solid #bfdbfe;
  border-radius: 1.6rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.06);
}

#parent .esec,
#parent .pcard {
  background: #ffffff !important;
  border: 1.8px solid #e2e8f0 !important;
  border-radius: 1.5rem !important;
  padding: 1.1rem 1.3rem !important;
  margin-bottom: 1.1rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#parent .esec:hover,
#parent .pcard:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

#parent .trow {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 1.4rem !important;
  padding: 1.1rem 1.4rem !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

#parent .trow.on {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
}

#parent .grade-sel {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  background: #f1f5f9 !important;
  padding: 0.45rem !important;
  border-radius: 1.4rem !important;
  border: 1.5px solid #e2e8f0 !important;
  margin-bottom: 1.2rem !important;
  overflow: visible !important;
}

#parent .grade-btn {
  flex: 1 1 auto !important;
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  border-radius: 9999px !important;
  padding: 0.32rem 0.75rem !important;
  font-size: 1.14rem !important;
  font-weight: 800 !important;
  border: 1.5px solid transparent !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
}

#parent .grade-btn.cur {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 8px rgba(234, 88, 12, 0.28) !important;
  transform: none !important;
}

#parent .topic-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
}

#parent .topic-card {
  border-radius: 1.5rem !important;
  padding: 1.1rem 1.3rem !important;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
}

#parent .topic-card.on {
  background: #f0fdf4 !important;
  border-color: #4ade80 !important;
}

#parent .vgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1.1rem !important;
  margin-bottom: 1.4rem !important;
}

#parent .vcard {
  border-radius: 1.6rem !important;
  padding: 1.3rem 1.5rem !important;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#parent .vcard.on {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
}

/* Hiệu ứng đóng băng 3 giây trong PK */
.pk-frozen-btn {
  animation: pkIcePulse 1s infinite alternate !important;
}

@keyframes pkIcePulse {
  0% { filter: drop-shadow(0 0 4px rgba(34, 184, 207, 0.35)); }
  100% { filter: drop-shadow(0 0 10px rgba(21, 170, 191, 0.75)); }
}

/* ==========================================
   6 CHẾ ĐỘ TRÒ CHƠI NGẪU NHIÊN TRONG PK ARENA
   ========================================== */
.pk-game-arena {
  position: relative;
  border-radius: 2rem;
  padding: 1.35rem 1.15rem;
  min-height: 13.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.15rem;
  align-items: stretch;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.pk-game-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 1rem;
  border-radius: 99px;
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 0.65rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* 1. 🎈 Bắn Bóng Bay */
.pk-game-arena.mode-balloon {
  background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 65%, #fef9c3 100%);
  border: 3px solid #7dd3fc;
  padding-bottom: 1.8rem;
}
.pk-game-arena.mode-balloon .pk-opt-btn {
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44% !important;
  min-height: 9.8rem !important;
  position: relative;
  animation: pkBalloonFloat 2.6s ease-in-out infinite alternate;
}
.pk-game-arena.mode-balloon .pk-opt-btn:nth-child(2) { animation-delay: -0.6s; }
.pk-game-arena.mode-balloon .pk-opt-btn:nth-child(3) { animation-delay: -1.2s; }
.pk-game-arena.mode-balloon .pk-opt-btn:nth-child(4) { animation-delay: -1.8s; }
.pk-game-arena.mode-balloon .pk-opt-btn::after {
  content: "🎈";
  position: absolute;
  top: 0.35rem;
  right: 0.65rem;
  font-size: 1.55rem;
  opacity: 0.85;
  pointer-events: none;
}

@keyframes pkBalloonFloat {
  0% { transform: translateY(4px) rotate(-1.5deg); }
  100% { transform: translateY(-7px) rotate(1.5deg); }
}

/* 2. 🎣 Câu Cá Đại Dương */
.pk-game-arena.mode-fish {
  background: linear-gradient(180deg, #bae6fd 0%, #38bdf8 45%, #0284c7 100%);
  border: 3px solid #0369a1;
}
.pk-game-arena.mode-fish .pk-opt-btn {
  border-radius: 2.6rem 1.4rem 2.6rem 1.4rem !important;
  min-height: 8.6rem !important;
  position: relative;
  animation: pkFishSwim 2.4s ease-in-out infinite alternate;
}
.pk-game-arena.mode-fish .pk-opt-btn:nth-child(even) {
  animation-direction: alternate-reverse;
}
.pk-game-arena.mode-fish .pk-opt-btn::before {
  content: "🐠";
  position: absolute;
  top: 0.4rem;
  left: 0.7rem;
  font-size: 1.55rem;
  pointer-events: none;
}

@keyframes pkFishSwim {
  0% { transform: translateX(-6px) translateY(3px); }
  100% { transform: translateX(6px) translateY(-3px); }
}

/* 3. 🐹 Đập Chuột Chũi */
.pk-game-arena.mode-mole {
  background: linear-gradient(180deg, #dcfce7 0%, #86efac 45%, #b45309 100%);
  border: 3px solid #15803d;
}
.pk-game-arena.mode-mole .pk-opt-btn {
  border-radius: 2.6rem 2.6rem 1.2rem 1.2rem !important;
  min-height: 9rem !important;
  border-bottom-width: 7px !important;
  position: relative;
  animation: pkMolePop 2.1s ease-in-out infinite alternate;
}
.pk-game-arena.mode-mole .pk-opt-btn:nth-child(2) { animation-delay: -0.5s; }
.pk-game-arena.mode-mole .pk-opt-btn:nth-child(3) { animation-delay: -1.1s; }
.pk-game-arena.mode-mole .pk-opt-btn:nth-child(4) { animation-delay: -1.6s; }
.pk-game-arena.mode-mole .pk-opt-btn::before {
  content: "🐹";
  position: absolute;
  top: 0.35rem;
  right: 0.7rem;
  font-size: 1.6rem;
  pointer-events: none;
}

@keyframes pkMolePop {
  0% { transform: translateY(5px) scale(0.98); }
  100% { transform: translateY(-5px) scale(1.01); }
}

/* 4. 🌠 Hứng Sao Rơi */
.pk-game-arena.mode-star {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
  border: 3px solid #818cf8;
}
.pk-game-arena.mode-star .pk-opt-btn {
  border-radius: 2rem !important;
  min-height: 8.6rem !important;
  position: relative;
  animation: pkStarTwinkle 2.2s ease-in-out infinite alternate;
}
.pk-game-arena.mode-star .pk-opt-btn::before {
  content: "🌟";
  position: absolute;
  top: 0.4rem;
  right: 0.7rem;
  font-size: 1.55rem;
  pointer-events: none;
}

@keyframes pkStarTwinkle {
  0% { transform: translateY(-4px) scale(0.99); }
  100% { transform: translateY(4px) scale(1.02); }
}

/* 5. 🐸 Ếch Qua Sông (Nhảy Lá Sen) */
.pk-game-arena.mode-frog {
  background: linear-gradient(180deg, #ccfbf1 0%, #5eead4 50%, #14b8a6 100%);
  border: 3px solid #0f766e;
}
.pk-game-arena.mode-frog .pk-opt-btn {
  border-radius: 2.8rem !important;
  min-height: 8.6rem !important;
  position: relative;
  animation: pkLilyPadRipple 2.5s ease-in-out infinite alternate;
}
.pk-game-arena.mode-frog .pk-opt-btn::before {
  content: "🐸🪷";
  position: absolute;
  top: 0.35rem;
  left: 0.7rem;
  font-size: 1.35rem;
  pointer-events: none;
}

@keyframes pkLilyPadRipple {
  0% { transform: translateY(3px); }
  100% { transform: translateY(-4px); }
}




/* ==================== BẢN NÂNG CẤP V38: CHIA Ô ĐÁP ÁN CÂN XỨNG TOÀN DIỆN (2 Ô / 3 Ô / 4 Ô 2x2) + ĐUA XE & ĐẬP CHUỘT ==================== */

/* 1. Chuẩn hóa lưới đáp án cân xứng tuyệt đối:
   - 2 đáp án: 2 cột bằng nhau (1 hàng x 2 cột)
   - 3 đáp án: 3 cột bằng nhau (1 hàng x 3 cột)
   - 4 đáp án: 2 cột x 2 hàng cân xứng bằng nhau
   (Không áp dụng lên .split để giữ nguyên bố cục trò Có bao nhiêu?, Chữ đầu tiên, Tập nói...) */
#play > .row,
.row.ans-grid,
.ans-grid,
#pkOptsGrid,
#teacherAnsGrid,
.animal-options-row,
.sb-shelf {
  display: grid !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 96% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 2 đáp án -> 2 cột bằng nhau */
#play > .row.opts-2,
.row.ans-grid.opts-2,
.ans-grid.opts-2,
#pkOptsGrid.opts-2,
#teacherAnsGrid.opts-2,
#play > .row:has(> :nth-child(2):last-child),
.animal-options-row:has(> :nth-child(2):last-child),
.sb-shelf:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 58rem !important;
  gap: clamp(1.2rem, 2.5vw, 2.2rem) !important;
}

/* 3 đáp án -> 3 cột bằng nhau trên 1 hàng */
#play > .row.cols-3,
#play > .row.opts-3,
.row.ans-grid.cols-3,
.row.ans-grid.opts-3,
.ans-grid.cols-3,
.ans-grid.opts-3,
#pkOptsGrid.cols-3,
#pkOptsGrid.opts-3,
#teacherAnsGrid.cols-3,
#teacherAnsGrid.opts-3,
#play > .row:has(> :nth-child(3):last-child),
.animal-options-row:has(> :nth-child(3):last-child),
.sb-shelf:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 78rem !important;
  gap: clamp(0.85rem, 1.8vw, 1.5rem) !important;
}

/* 4 đáp án -> 2 cột x 2 hàng cân xứng */
#play > .row.opts-4,
.row.ans-grid.opts-4,
.ans-grid.opts-4,
#pkOptsGrid.opts-4,
#teacherAnsGrid.opts-4,
#play > .row:has(> :nth-child(4):last-child),
.animal-options-row:has(> :nth-child(4):last-child),
.sb-shelf:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  max-width: 66rem !important;
  gap: clamp(0.85rem, 1.6vw, 1.35rem) !important;
}

/* Đảm bảo mọi ô lựa chọn con giãn đều 100% chiều rộng và chiều cao của ô lưới, không lệch kích thước */
#play > .row > .opt,
#play > .row > .paint,
#play > .row > .basket,
#play > .row > button,
.row.ans-grid > .opt,
.row.ans-grid > button,
.ans-grid > .opt,
.ans-grid > button,
#pkOptsGrid > .pk-opt-btn,
#teacherAnsGrid > .teacher-opt-btn,
.animal-options-row > .animal-opt-card,
.sb-shelf > .sb-item {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bảo vệ chiều cao & cỡ chữ viết tay (.hw) cho chế độ 2 thẻ lớn (.few-opts / .opts-2) không bao giờ cắt nét trên/dưới (b, h, k, l, q, g, y, p) */
#play > .row.opts-2 > .opt.letter,
#play > .row.opts-2 > .opt.num,
#play > .row.opts-2 > .opt.pic,
#play > .row.few-opts > .opt.letter,
#play > .row.few-opts > .opt.num,
#play > .row.few-opts > .opt.pic {
  height: min(34rem, 50vh) !important;
  min-height: min(30rem, 46vh) !important;
  padding: 1.2rem 1rem !important;
}
#play > .row.opts-2 > .opt.letter .hw,
#play > .row.few-opts > .opt.letter .hw,
.row.few-opts .opt.letter .hw {
  font-size: min(11rem, 15.5vh) !important;
  line-height: 1.55 !important;
  padding: 0.1em 0.2em !important;
  display: inline-block !important;
}
#play > .row.opts-2 > .opt.letter .hw.hw-desc,
#play > .row.few-opts > .opt.letter .hw.hw-desc,
.row.few-opts .opt.letter .hw.hw-desc {
  font-size: min(10rem, 14vh) !important;
  line-height: 1.55 !important;
  transform: translateY(-14%) !important;
}

/* Tinh chỉnh chiều cao & cỡ chữ viết tay vừa vặn cho lưới 3 ô và 4 ô (2x2) */
#play > .row.opts-4 > .opt,
.row.ans-grid.opts-4 > .opt,
#play > .row:has(> :nth-child(4):last-child) > .opt {
  min-height: clamp(7.2rem, 13.5vh, 11.2rem) !important;
  padding: 0.75rem 1rem !important;
}
/* Bảo vệ chiều cao ô Màu sắc (.paint) và Giỏ so sánh (.basket) trong lưới .ans-grid không bị xẹp thành vạch trắng */
#play > .row > .paint,
.row.ans-grid > .paint,
.ans-grid > .paint {
  height: clamp(13rem, 34vh, 19rem) !important;
  min-height: clamp(13rem, 34vh, 19rem) !important;
  width: 100% !important;
}
#play > .row.opts-4 > .paint,
.row.ans-grid.opts-4 > .paint,
.ans-grid.opts-4 > .paint,
#play > .row:has(> :nth-child(4):last-child) > .paint {
  height: clamp(9.5rem, 21vh, 13.5rem) !important;
  min-height: clamp(9.5rem, 21vh, 13.5rem) !important;
}
#play > .row > .basket,
.row.ans-grid > .basket,
.ans-grid > .basket {
  min-height: clamp(12.5rem, 30vh, 18rem) !important;
  padding: 1.2rem !important;
}
#play > .row.opts-3 > .opt.letter,
#play > .row.opts-4 > .opt.letter,
.row.ans-grid.opts-3 > .opt.letter,
.row.ans-grid.opts-4 > .opt.letter {
  min-height: clamp(11.5rem, 20vh, 14.5rem) !important;
  padding: 0.8rem 1rem !important;
}
#play > .row.opts-3 > .opt.letter .hw,
#play > .row.opts-4 > .opt.letter .hw,
.row.ans-grid.opts-3 > .opt.letter .hw,
.row.ans-grid.opts-4 > .opt.letter .hw {
  font-size: clamp(4.8rem, 8.2vh, 6.2rem) !important;
  line-height: 1.5 !important;
}
#play > .row.opts-3 > .opt.letter .hw.hw-desc,
#play > .row.opts-4 > .opt.letter .hw.hw-desc,
.row.ans-grid.opts-3 > .opt.letter .hw.hw-desc,
.row.ans-grid.opts-4 > .opt.letter .hw.hw-desc {
  font-size: clamp(4.3rem, 7.4vh, 5.5rem) !important;
  line-height: 1.5 !important;
  transform: translateY(-14%) !important;
}

/* 2. Đua Xe Chuyển Làn (T_highway): Lớp hiển thị xe & cổng đáp án cân xứng 2 bên, đi từ xa đến điểm dừng hợp lý */
.highway-road-actors {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 95% !important;
  max-width: 78rem !important;
  height: 78% !important;
  pointer-events: none !important;
  overflow: visible !important;
  clip-path: none !important;
  z-index: 18 !important;
}
.highway-road-actors .highway-gate {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 20 !important;
}
.highway-road-actors .highway-car-player {
  pointer-events: auto !important;
  bottom: 6.4rem !important;
  z-index: 25 !important;
}
.highway-gate-sign {
  width: clamp(22rem, 28vw, 26.5rem) !important;
  min-width: clamp(22rem, 28vw, 26.5rem) !important;
  max-width: clamp(22rem, 28vw, 26.5rem) !important;
  min-height: 6.4rem !important;
  font-size: clamp(1.8rem, 2.3vw, 2.4rem) !important;
  padding: 0.7rem 1.15rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.highway-gate-sign .cq-icl {
  gap: 0.3rem !important;
  width: 100% !important;
}
.highway-gate-sign .cq-emo,
.highway-gate-sign .emo {
  font-size: 2.5rem !important;
  line-height: 1.1 !important;
}
.highway-gate-sign .qt {
  font-size: clamp(1.35rem, 1.75vw, 1.7rem) !important;
  line-height: 1.25 !important;
}
.highway-gate-sign .cq-ans-speak-btn {
  font-size: 1.7rem !important;
  margin-top: 0.25rem !important;
}

/* 2B. Bắn Zombie Nhí (T_zombie): Không để right: 2rem ép hẹp chiều rộng khi dùng left: posX% */
.zombie-monster-item {
  right: auto !important;
  width: max-content !important;
  max-width: 34rem !important;
  transform: translateX(-50%) !important;
}
.zombie-answer-bubble {
  white-space: nowrap !important;
  width: max-content !important;
  max-width: 24rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(1.5rem, 2vw, 2rem) !important;
  padding: 0.35rem 1.2rem !important;
}

/* 3. Đập Chuột Chũi (runMoles): Căn giữa tuyệt đối và hỗ trợ 3, 4, 5, 6 hang chuột không bị cắt chữ viết tay */
.stage.mole .holes.holes-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 74rem !important;
  width: 96% !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 1.2rem !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 1.4rem !important;
  justify-items: center !important;
}
.stage.mole .holes.holes-3 .sign {
  min-height: 5.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.stage.mole .holes.holes-3 .sign .hw {
  font-size: clamp(2.6rem, 4.2vh, 3.2rem) !important;
  line-height: 1.45 !important;
}
.stage.mole .holes.holes-3 .sign .hw.hw-desc {
  font-size: clamp(2.35rem, 3.8vh, 2.9rem) !important;
  line-height: 1.45 !important;
  transform: translateY(-14%) !important;
}
.stage.mole .holes.holes-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 56rem !important;
  width: 94% !important;
  left: 0 !important;
  right: 0 !important;
  top: 3.6rem !important;
  bottom: 0.4rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 1.4rem 1.8rem !important;
  justify-items: center !important;
}
.stage.mole .holes.holes-5,
.stage.mole .holes.holes-6 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 76rem !important;
  width: 96% !important;
  left: 0 !important;
  right: 0 !important;
  top: 3.6rem !important;
  bottom: 0.4rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 1.4rem 1.2rem !important;
  justify-items: center !important;
}
.stage.mole .holes.holes-4 .hole,
.stage.mole .holes.holes-5 .hole,
.stage.mole .holes.holes-6 .hole {
  width: clamp(16rem, 23vw, 22rem) !important;
  height: clamp(9.2rem, 13vh, 10.8rem) !important;
}
.stage.mole .holes.holes-4 .pit,
.stage.mole .holes.holes-5 .pit,
.stage.mole .holes.holes-6 .pit {
  height: 2.8rem !important;
}
.stage.mole .holes.holes-4 .win,
.stage.mole .holes.holes-5 .win,
.stage.mole .holes.holes-6 .win {
  top: -4.6rem !important;
  bottom: 1.1rem !important;
  height: auto !important;
}
.stage.mole .holes.holes-4 .m,
.stage.mole .holes.holes-5 .m,
.stage.mole .holes.holes-6 .m {
  min-height: 0 !important;
  padding: 0.15rem 0.25rem 0.5rem !important;
  gap: 0.1rem !important;
}
.stage.mole .holes.holes-4 .sign,
.stage.mole .holes.holes-5 .sign,
.stage.mole .holes.holes-6 .sign {
  min-height: 4.5rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.stage.mole .holes.holes-4 .sign .hw,
.stage.mole .holes.holes-5 .sign .hw,
.stage.mole .holes.holes-6 .sign .hw {
  font-size: clamp(2.1rem, 3.3vh, 2.55rem) !important;
  line-height: 1.45 !important;
}
.stage.mole .holes.holes-4 .sign .hw.hw-desc,
.stage.mole .holes.holes-5 .sign .hw.hw-desc,
.stage.mole .holes.holes-6 .sign .hw.hw-desc {
  font-size: clamp(1.9rem, 3vh, 2.3rem) !important;
  line-height: 1.45 !important;
  transform: translateY(-14%) !important;
}
.stage.mole .holes.holes-4 .sign .cq-icl,
.stage.mole .holes.holes-5 .sign .cq-icl,
.stage.mole .holes.holes-6 .sign .cq-icl {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25rem 0.4rem !important;
}
.stage.mole .holes.holes-4 .sign .cq-emo,
.stage.mole .holes.holes-4 .sign .emo,
.stage.mole .holes.holes-5 .sign .cq-emo,
.stage.mole .holes.holes-5 .sign .emo,
.stage.mole .holes.holes-6 .sign .cq-emo,
.stage.mole .holes.holes-6 .sign .emo {
  font-size: 1.9rem !important;
  display: inline-block !important;
}
.stage.mole .holes.holes-4 .sign .qt,
.stage.mole .holes.holes-5 .sign .qt,
.stage.mole .holes.holes-6 .sign .qt {
  font-size: clamp(1.15rem, 1.35vw, 1.38rem) !important;
  line-height: 1.15 !important;
}
.stage.mole .holes.holes-4 .sign .cq-ans-speak-btn,
.stage.mole .holes.holes-5 .sign .cq-ans-speak-btn,
.stage.mole .holes.holes-6 .sign .cq-ans-speak-btn {
  font-size: 1.35rem !important;
  margin-top: 0 !important;
}
.stage.mole .holes.holes-4 .mface,
.stage.mole .holes.holes-5 .mface,
.stage.mole .holes.holes-6 .mface {
  font-size: 2.6rem !important;
  line-height: 1 !important;
}

/* ===== 📢 Bảng Phát Thông Báo & Xem Thử Popup (Chống chồng ô input & nổi trên modal) ===== */
#bvhBroadcastModal .tin {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#bvhBroadcastPopup {
  z-index: 2147483500 !important;
}

/* ===== 📋 Làm gọn bảng Học Sinh Đang Chơi (.sa-active-tbl) & Bản Quyền Máy (.bvh-lic-tbl) ===== */
#parent > .pbody,
#parent > .p-header-card {
  max-width: 126rem !important;
  width: 96% !important;
}

#parent .bvh-lic-wrap {
  overflow-x: auto !important;
  border-radius: 1.2rem !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

#parent .bvh-lic-tbl,
#parent .sa-active-tbl {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  font-size: 1.12rem !important;
}

#parent .bvh-lic-tbl th,
#parent .sa-active-tbl th {
  padding: 0.5rem 0.55rem !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#parent .bvh-lic-tbl td,
#parent .sa-active-tbl td,
#parent #saActiveTbody td {
  padding: 0.42rem 0.52rem !important;
  font-size: 1.08rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#parent .bvh-lic-tbl .acts,
#parent .sa-act-btns {
  display: inline-flex !important;
  gap: 0.22rem !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

#parent .bvh-lic-tbl .acts .btn.sm,
#parent .sa-act-btns .btn.sm {
  font-size: 0.98rem !important;
  padding: 0.22rem 0.48rem !important;
  border-radius: 0.65rem !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#saActiveTbody tr:hover,
.bvh-lic-tbl tbody tr:hover {
  background-color: #f8fafc !important;
}




/* ==========================================================================
   📱 BẢN DI ĐỘNG CẦM DỌC (PORTRAIT MODE) - CĂN CHỈNH KHÔNG BỊ TRÙNG NHAU
   LƯU Ý: Giữ nguyên 100% giao diện xoay ngang (Landscape) hiện tại
   ========================================================================== */

/* Nút Toàn màn hình & Xoay ngang */
.icon-btn.fsbtn {
  background: #e7f5ff !important;
  color: #1971c2 !important;
  border: 1.5px solid #74c0fc !important;
  font-size: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .12s, background .15s !important;
}
.icon-btn.fsbtn:active {
  transform: scale(0.92) !important;
  background: #d0ebff !important;
}

/* Nút nổi hỗ trợ xoay ngang trên web di động */
.bvh-quick-fs-btn {
  display: none;
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 9999;
  background: linear-gradient(135deg, #ff922b, #fd7e14);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 99px;
  padding: 0.65rem 1.2rem;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(253, 126, 20, 0.45);
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  animation: pulse 1.8s infinite alternate;
}

@media (orientation: portrait) {
  /* Hiển thị nút nhắc xoay ngang khi đang ở màn dọc trên web */
  .bvh-quick-fs-btn {
    display: flex !important;
  }

  /* 1. Trang chính và các màn hình: Cho phép cuộn dọc mượt mà, không bị che khuất */
  .screen {
    padding: 0.8rem 0.9rem 2.4rem !important;
    gap: 0.75rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2. Topbar trang chủ: Căn chỉnh 2 hàng gọn gàng, không bị chồng chéo nút */
  .topbar.home-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
    padding: 0.2rem 0 !important;
  }

  .topbar.home-topbar .me {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    width: 100% !important;
  }

  .topbar.home-topbar .me .meface {
    font-size: 3.6rem !important;
    line-height: 1 !important;
  }

  .topbar.home-topbar .me .nm {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  .topbar.home-topbar .me .ag {
    font-size: 1.15rem !important;
    color: #495057 !important;
  }

  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .topbar-actions .icon-btn {
    width: 3.7rem !important;
    height: 3.7rem !important;
    min-width: 3.7rem !important;
    font-size: 1.85rem !important;
    box-shadow: 0 2px 0 #b7c7e6 !important;
  }

  .star-pill {
    font-size: 1.3rem !important;
    padding: 0.25rem 0.7rem !important;
    border-radius: 99px !important;
    margin-left: auto !important;
  }

  /* 3. Nhiệm vụ ngày */
  .daily-quest-bar, .quest-bar {
    margin: 0.1rem 0 0.4rem !important;
    padding: 0.45rem 0.8rem !important;
    font-size: 1.15rem !important;
    border-radius: 1.1rem !important;
  }

  /* 4. Khối 4 môn học & 3 thẻ tiện ích: Bố trí lưới 2 cột thông thoáng */
  .zones {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 2rem !important;
  }

  .zone {
    min-height: 10.5rem !important;
    padding: 0.85rem 0.6rem !important;
    border-radius: 1.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .zone .ze {
    font-size: 3.6rem !important;
    margin-bottom: 0.25rem !important;
  }

  .zone h2 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    margin: 0.1rem 0 !important;
  }

  .zone p {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* 3 thẻ: Khu giải trí, Phần thưởng, Kiểm tra */
  .zcol {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 0.5rem !important;
    height: auto !important;
    margin-top: 0.2rem !important;
  }

  .zone.small {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.65rem 0.35rem !important;
    gap: 0.35rem !important;
    min-height: 7.2rem !important;
    border-radius: 1.3rem !important;
  }

  .zone.small .ze {
    width: 3.2rem !important;
    height: 3.2rem !important;
    min-width: 3.2rem !important;
    font-size: 2rem !important;
    margin: 0 auto !important;
  }

  .zone.small h2 {
    font-size: 1.18rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .zone.small h2.zh-test {
    font-size: 1.05rem !important;
  }

  /* 5. Màn hình chơi game câu hỏi (#game) */
  #game.active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  .gtop {
    gap: 0.5rem !important;
    padding: 0.25rem 0 !important;
    align-items: center !important;
  }

  .gprompt {
    gap: 0.4rem !important;
  }

  .pav {
    font-size: 3rem !important;
  }

  .bubble {
    font-size: 1.25rem !important;
    padding: 0.45rem 0.75rem !important;
  }

  .gq {
    font-size: clamp(1.75rem, 4.5vw, 2.4rem) !important;
    margin: 0.6rem 0 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
  }

  #play {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.4rem 0 !important;
  }

  /* Đáp án: Lưới 2x2 to rõ, không chồng chéo */
  #play > .row,
  .ans-grid,
  #pkOptsGrid,
  #teacherAnsGrid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    max-width: 44rem !important;
    margin: 0 auto !important;
  }

  #play > .row > .opt,
  .ans-grid > .opt,
  #pkOptsGrid > .opt,
  #teacherAnsGrid > .opt {
    width: 100% !important;
    min-height: 6.6rem !important;
    font-size: 1.65rem !important;
    padding: 0.6rem 0.75rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #play > .row > .paint,
  .ans-grid > .paint {
    width: 100% !important;
    height: clamp(9.5rem, 26vh, 14rem) !important;
    min-height: clamp(9.5rem, 26vh, 14rem) !important;
  }

  #play > .row > .basket,
  .ans-grid > .basket {
    width: 100% !important;
    min-height: clamp(9rem, 24vh, 13.5rem) !important;
    padding: 0.8rem !important;
  }

  /* 6. Màn Chào Mừng (#welcome) */
  .wgrid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .wleft {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    text-align: center !important;
  }

  .wleft .logo {
    font-size: 3.2rem !important;
  }

  .wleft .mascot {
    font-size: 4.8rem !important;
    margin: 0 !important;
  }

  .ages {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.45rem !important;
  }

  /* 7. Màn Đấu trường PK (#arcade) */
  .ap-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .ap-col {
    width: 100% !important;
  }
}

/* Ẩn thanh chọn hàng loạt khi không có quyền hoặc chưa chọn */
.cq-bulk-bar[style*="display:none"], .cq-bulk-bar[style*="display: none"], .cq-bulk-actions[style*="display:none"], .cq-bulk-actions[style*="display: none"] {
  display: none !important;
}