/* ====== Nuôi Thú v2 – giao diện game di động bóng bẩy ====== */
@font-face{font-family:'Baloo 2';src:url('../fonts/Baloo2.ttf') format('truetype');font-weight:400 800;font-display:swap}
@font-face{font-family:'BalooLogo';src:url('../fonts/Baloo2-XBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'NunitoV';src:url('../fonts/Nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--cream:#fff8ea;--cream2:#fdf0d5;--brown:#5a3416;--brown2:#7a4a22;--green:#58b52b;--green-d:#3a8a17;--orange:#f7931e;--orange-d:#c9640a;--blue:#2f8fe8;--blue-d:#1a63b5;--purple:#8e4fd1;--purple-d:#61309c;--red:#ec4a3c;--red-d:#b02a1f;--yellow:#ffc928;--yellow-d:#d99a06;--pink:#ef6fa0;--pink-d:#c24476;
  --u:min(1vw,0.5625vh);/* đơn vị thiết kế dọc */}
@media (orientation:landscape){:root{--u:min(0.5625vw,1vh)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#7cc35a;font-family:'Baloo 2','NunitoV',system-ui,sans-serif;color:var(--brown);user-select:none;-webkit-user-select:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font-family:inherit;font-size:16px}
#app{position:fixed;inset:0;overflow:hidden}
.scr{position:absolute;inset:0;overflow:hidden}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Cảnh phủ kín (giữ tỉ lệ để thú đứng đúng chuồng) */
.scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,56.25vh);height:max(100vh,177.78vw);background-size:100% 100%}
@media (orientation:landscape){.scene{width:max(100vw,177.78vh);height:max(100vh,56.25vw)}}
.bg-zoo{background-image:url(../assets/bg/bg_zoo_p.webp)}.bg-home{background-image:url(../assets/bg/bg_home_p.webp)}.bg-map{background-image:url(../assets/bg/bg_map_p.webp)}
@media (orientation:landscape){.bg-zoo{background-image:url(../assets/bg/bg_zoo_l.webp)}.bg-home{background-image:url(../assets/bg/bg_home_l.webp)}.bg-map{background-image:url(../assets/bg/bg_map_l.webp)}}
.dim::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.08);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* ====== Logo ====== */
.logo{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u)*3);text-align:center;z-index:5;pointer-events:none;white-space:nowrap}
.logo .t{font-weight:800;font-size:calc(var(--u)*17);line-height:.95;letter-spacing:calc(var(--u)*.3);display:inline-block;position:relative}
.logo .t span{display:inline-block;-webkit-text-stroke:calc(var(--u)*1.6) #5a2d0c;paint-order:stroke fill;filter:drop-shadow(0 calc(var(--u)*1) 0 #3d1d05) drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.5) rgba(0,0,0,.35))}
.logo .n1{background:linear-gradient(#fff35c 10%,#ffc21a 45%,#ff8a00 95%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-3deg)}
.logo .n2{background:linear-gradient(#d9ff6b 10%,#79d321 45%,#3c9a0f 95%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(2deg);margin-left:calc(var(--u)*2.5)}
.logo .paw{position:absolute;right:calc(var(--u)*-9);top:calc(var(--u)*-2);width:calc(var(--u)*10);transform:rotate(18deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.logo .rib{margin:calc(var(--u)*-1) auto 0;display:inline-block;position:relative;background:linear-gradient(#a56be8,#7a3fc4);color:#fff;font-weight:800;font-size:calc(var(--u)*4.6);padding:calc(var(--u)*.3) calc(var(--u)*6);border-radius:calc(var(--u)*1.2);border:calc(var(--u)*.5) solid #f3e4ff;box-shadow:0 calc(var(--u)*.8) 0 #4f2390;letter-spacing:.02em}
.logo .rib::before,.logo .rib::after{content:'';position:absolute;top:30%;width:calc(var(--u)*5);height:80%;background:#6a33ad;z-index:-1}
.logo .rib::before{left:calc(var(--u)*-3.5);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,35% 50%)}.logo .rib::after{right:calc(var(--u)*-3.5);clip-path:polygon(0 0,100% 0,65% 50%,100% 100%,0 100%)}
.logo.small .t{font-size:calc(var(--u)*13)}
/* ====== Thanh trên: xu, chuỗi lửa, i ====== */
.hud{position:absolute;left:0;right:0;top:calc(var(--u)*36);display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*3);z-index:6;padding:0 calc(var(--u)*3)}
.pill{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);background:linear-gradient(#fffdf6,#f6e8cc);border:calc(var(--u)*.6) solid #fff;border-radius:999px;box-shadow:0 calc(var(--u)*.8) 0 rgba(120,70,20,.35),0 calc(var(--u)*1) calc(var(--u)*2) rgba(0,0,0,.2);font-weight:800;font-size:calc(var(--u)*5.6);height:calc(var(--u)*11);padding:0 calc(var(--u)*1.4) 0 0;color:#4a2a10;white-space:nowrap}
.pill .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);margin:calc(var(--u)*-1) 0 calc(var(--u)*-1) calc(var(--u)*-1.5);object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
.pill .plus{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:linear-gradient(#8ee05a,#3fa318);color:#fff;font-size:calc(var(--u)*7);line-height:calc(var(--u)*7.6);text-align:center;border:calc(var(--u)*.5) solid #fff;box-shadow:0 2px 0 #2a7a0c}
.pill.coin{min-width:calc(var(--u)*40)}.pill.coin .v{flex:1;text-align:center}
.pill.flame{background:linear-gradient(#ffb04a,#ff7a1a);color:#fff;border-color:#ffe4bd;padding-right:calc(var(--u)*1.2)}
.pill.flame .v{font-size:calc(var(--u)*6.4);text-shadow:0 2px 0 #b24a00}
.pill.flame .of{background:#7a3a12;color:#fff;border-radius:999px;padding:0 calc(var(--u)*2);font-size:calc(var(--u)*4.6);line-height:calc(var(--u)*7.5)}
.ibtn{width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:linear-gradient(#b277f0,#7b3fd0);color:#fff;font-weight:800;font-size:calc(var(--u)*7);border:calc(var(--u)*.6) solid #fff;box-shadow:0 calc(var(--u)*.8) 0 #4f2390;font-family:Georgia,serif;font-style:italic;line-height:1}
/* ====== Nút bóng bẩy ====== */
.gbtn{--c1:#7fd84a;--c2:#3e9b18;--cd:#2a7210;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(var(--c1),var(--c2));color:#fff;font-weight:800;border:calc(var(--u)*.8) solid #fffbea;border-radius:calc(var(--u)*5);box-shadow:0 calc(var(--u)*1.4) 0 var(--cd),0 calc(var(--u)*2) calc(var(--u)*3) rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .08s}
.gbtn::before{content:'';position:absolute;left:8%;right:8%;top:5%;height:36%;border-radius:calc(var(--u)*4) calc(var(--u)*4) 50% 50%/calc(var(--u)*4) calc(var(--u)*4) 30% 30%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.05));pointer-events:none}
.gbtn:active{transform:translateY(3px) scale(.98)}
.gbtn.green{--c1:#8be052;--c2:#45a51c;--cd:#2b7310}.gbtn.orange{--c1:#ffb547;--c2:#f27b10;--cd:#b45207}.gbtn.blue{--c1:#5cb8ff;--c2:#1f7de0;--cd:#13529c}.gbtn.purple{--c1:#b07af0;--c2:#7a3cd0;--cd:#4f2390}.gbtn.red{--c1:#ff7a6a;--c2:#e2392b;--cd:#9c1f15}.gbtn.yellow{--c1:#ffe36a;--c2:#ffbd12;--cd:#c98a00;color:#5a3416;text-shadow:0 1px 0 rgba(255,255,255,.5)}.gbtn.pink{--c1:#ff9cc4;--c2:#e9518d;--cd:#a92d61}.gbtn.grey{--c1:#c9ccd3;--c2:#8e939e;--cd:#5d626c}.gbtn.cream{--c1:#fffdf5;--c2:#f3e3c3;--cd:#c7a77a;color:#5a3416;text-shadow:none}
.gbtn[disabled]{filter:grayscale(.7) brightness(1.05);opacity:.75}
.menu{position:absolute;left:0;right:0;bottom:calc(var(--u)*3);display:flex;justify-content:center;gap:calc(var(--u)*2.6);z-index:8;padding:0 calc(var(--u)*2)}
.menu .gbtn{width:calc(var(--u)*23);height:calc(var(--u)*24);font-size:calc(var(--u)*5);line-height:1;padding-top:calc(var(--u)*1)}
.menu .gbtn img{width:calc(var(--u)*13);height:calc(var(--u)*11);object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.menu .gbtn .em{font-size:calc(var(--u)*10);line-height:1.05;text-shadow:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.menu .gbtn b{font-weight:800;letter-spacing:.01em}
.side{position:absolute;right:calc(var(--u)*2.5);top:calc(var(--u)*50);display:flex;flex-direction:column;gap:calc(var(--u)*2.4);z-index:7}
.side.left{right:auto;left:calc(var(--u)*2.5)}
.rbtn{width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:50%;background:radial-gradient(circle at 50% 30%,#fffef8,#f4dfb5);border:calc(var(--u)*.6) solid #fff;box-shadow:0 calc(var(--u)*.9) 0 #b88e55,0 calc(var(--u)*1.4) calc(var(--u)*2) rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;position:relative}
.rbtn img{width:72%;height:72%;object-fit:contain}.rbtn .em{font-size:calc(var(--u)*7)}
.rbtn small{position:absolute;bottom:calc(var(--u)*-3.6);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:calc(var(--u)*3.2);font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.rbtn .dot{position:absolute;top:-2px;right:-2px;width:calc(var(--u)*4);height:calc(var(--u)*4);background:#ff3b30;border:2px solid #fff;border-radius:50%}
/* Thanh menu dọc (ngang màn hình) */
@media (orientation:landscape){
  .menu.zoo{flex-direction:column;left:calc(var(--u)*3);right:auto;top:calc(var(--u)*5);bottom:auto;gap:calc(var(--u)*2.5)}
  .menu.zoo .gbtn{width:calc(var(--u)*19);height:calc(var(--u)*16.5);font-size:calc(var(--u)*3.8)}
  .menu.zoo .gbtn img{width:calc(var(--u)*10);height:calc(var(--u)*7.5)}
  .menu.zoo .gbtn .em{font-size:calc(var(--u)*7)}
  .logo{top:calc(var(--u)*1.5)}.logo .t{font-size:calc(var(--u)*13)}.logo .rib{font-size:calc(var(--u)*3.6)}
  .hud{justify-content:flex-end;top:calc(var(--u)*4);right:calc(var(--u)*3);left:auto;padding:0}
  .side{top:auto;bottom:calc(var(--u)*4);right:calc(var(--u)*3);flex-direction:row}
  .side .rbtn{width:calc(var(--u)*12);height:calc(var(--u)*12)}
}
/* ====== Vườn thú ====== */
.pen{position:absolute;transform:translate(-50%,-88%);width:calc(var(--u)*34);display:flex;flex-direction:column;align-items:center;z-index:3}
.pen .tag{position:absolute;bottom:calc(var(--u)*-13);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:0 calc(var(--u)*3) 0 calc(var(--u)*1);height:calc(var(--u)*9.5);border-radius:999px;border:calc(var(--u)*.6) solid #fff6dd;color:#fff;font-weight:800;font-size:calc(var(--u)*4.8);white-space:nowrap;box-shadow:0 calc(var(--u)*.9) 0 rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.pen .tag i{width:calc(var(--u)*7.2);height:calc(var(--u)*7.2);border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:calc(var(--u)*4.6);overflow:hidden}
.pen .tag i img{width:110%;height:110%;object-fit:cover;object-position:top}
.tag.c0{background:linear-gradient(#ffc444,#f39a0b)}.tag.c1{background:linear-gradient(#7ad04b,#3c9a17)}.tag.c2{background:linear-gradient(#ff8cb3,#e1557f)}.tag.c3{background:linear-gradient(#8f8af2,#5a4fd0)}
.pen .who{position:absolute;top:calc(var(--u)*-6);background:rgba(255,248,234,.92);border-radius:999px;padding:0 calc(var(--u)*2);font-size:calc(var(--u)*3.6);font-weight:800;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.pen.empty{opacity:.95}.pen.empty .add{width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;border:calc(var(--u)*1) dashed #fff;background:rgba(255,255,255,.35);color:#fff;font-size:calc(var(--u)*12);font-weight:800;text-shadow:0 2px 3px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;margin-top:calc(var(--u)*10)}
.board{position:absolute;z-index:6;background:linear-gradient(#f8e3b6,#eccb8a);border:calc(var(--u)*1) solid #8a5427;border-radius:calc(var(--u)*3);box-shadow:0 calc(var(--u)*1) 0 #5d3415,0 4px 10px rgba(0,0,0,.3);padding:calc(var(--u)*2) calc(var(--u)*3);font-weight:800;color:#4a2a10}
.board h4{margin:0 0 calc(var(--u)*1);text-align:center;font-size:calc(var(--u)*4);background:#8a5427;color:#fff6dd;border-radius:calc(var(--u)*2);padding:0 calc(var(--u)*2)}
.board .r{display:flex;align-items:center;gap:calc(var(--u)*1.5);font-size:calc(var(--u)*3.8);padding:calc(var(--u)*.6) 0;border-bottom:1px solid rgba(138,84,39,.25)}
.board .r:last-child{border:0}.board .r .rk{width:calc(var(--u)*5.5);height:calc(var(--u)*5.5);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#5a3416;font-size:calc(var(--u)*3.4)}
.rk1{background:linear-gradient(#ffe57a,#f2b705)}.rk2{background:linear-gradient(#f2f4f7,#b9c0cc)}.rk3{background:linear-gradient(#f7c28a,#c97a2c)}.rk4{background:#fff3d6}
.zoo-board{display:none}
@media (orientation:landscape){.zoo-board{display:block;right:calc(var(--u)*3);top:calc(var(--u)*16);width:calc(var(--u)*40)}}
/* ====== Thú cưng + hoạt ảnh ====== */
.pet{position:relative;display:inline-block;transform-origin:50% 100%;--s:1}
.pet .body{display:block;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.pet .sway{display:block;transform-origin:50% 100%;animation:sway 4.6s ease-in-out infinite}
.pet img.pi{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(var(--u)*1.4) calc(var(--u)*1) rgba(40,30,10,.35));pointer-events:none}
.pet .bob{display:block;animation:bob 2.6s ease-in-out infinite}
.pet::after{content:'';position:absolute;left:18%;right:18%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(rgba(30,40,10,.38),rgba(30,40,10,0) 70%);z-index:-1;animation:shadow 2.6s ease-in-out infinite}
.pet.hop .bob{animation:hop .9s cubic-bezier(.3,.7,.4,1) 1}
.pet.jump .bob{animation:jump 1s cubic-bezier(.3,.7,.4,1) 1}
.pet.sad .body{animation:breathe 4.6s ease-in-out infinite}.pet.sad .bob{animation:droop 4s ease-in-out infinite}.pet.sad .sway{animation:sway 7s ease-in-out infinite}
.pet.sad img.pi{filter:saturate(.78) brightness(.98) drop-shadow(0 calc(var(--u)*1.4) calc(var(--u)*1) rgba(40,30,10,.35))}
.pet.egg .sway{animation:wobble 2.4s ease-in-out infinite}
.pet .wear{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.pet .glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(rgba(255,230,120,.55),rgba(255,230,120,0) 65%);z-index:-1;animation:pulse 2s ease-in-out infinite}
.pet .zz{position:absolute;right:-4%;top:6%;font-size:calc(var(--u)*5);opacity:.9;animation:float 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg) skewX(.8deg)}50%{transform:rotate(1.6deg) skewX(-.8deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5%)}}
@keyframes shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9);opacity:.8}}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.08,.9)}45%{transform:translateY(-22%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.06,.93)}85%{transform:translateY(-4%)}100%{transform:translateY(0)}}
@keyframes jump{0%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.1,.88)}40%{transform:translateY(-34%) rotate(-6deg) scale(.95,1.07)}60%{transform:translateY(-34%) rotate(6deg)}82%{transform:translateY(0) scale(1.08,.92)}100%{transform:translateY(0)}}
@keyframes droop{0%,100%{transform:translateY(1%) rotate(-1deg)}50%{transform:translateY(2.5%) rotate(1deg)}}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fx{position:fixed;pointer-events:none;z-index:999;will-change:transform,opacity}
.fx.heart{font-size:30px;animation:heartUp 1.4s ease-out forwards}
@keyframes heartUp{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1;transform:translate(0,-10px) scale(1.1)}100%{transform:translate(var(--dx),-140px) scale(.9);opacity:0}}
.fx.coin{width:34px;height:34px;transition:transform .9s cubic-bezier(.4,-.3,.6,1),opacity .9s}
.fx.coinpop{font-weight:800;font-size:30px;color:#fff;text-shadow:0 2px 0 #b07a00,0 0 6px #b07a00;animation:pop 1.6s ease-out forwards}
@keyframes pop{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-10px) scale(1.2);opacity:1}100%{transform:translateY(-80px) scale(1);opacity:0}}
/* ====== Nhà ====== */
.home-top{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*7);display:flex;align-items:center;gap:calc(var(--u)*2);z-index:6;flex-wrap:wrap;justify-content:space-between}
.namepill{background:linear-gradient(#fffdf6,#f5e5c4);border:calc(var(--u)*.6) solid #fff;border-radius:calc(var(--u)*3.4);padding:0 calc(var(--u)*3.4);height:calc(var(--u)*11);display:flex;align-items:center;font-weight:800;font-size:calc(var(--u)*5.4);box-shadow:0 calc(var(--u)*.8) 0 rgba(120,70,20,.35);white-space:nowrap;max-width:calc(var(--u)*46);overflow:hidden;text-overflow:ellipsis}
.home-top .pill{font-size:calc(var(--u)*4.6);height:calc(var(--u)*9.5)}.home-top .pill .ic{width:calc(var(--u)*10.5);height:calc(var(--u)*10.5)}.home-top .pill.coin{min-width:calc(var(--u)*29)}.home-top .ibtn{width:calc(var(--u)*9.5);height:calc(var(--u)*9.5);font-size:calc(var(--u)*6)}
.stats{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*22);display:flex;justify-content:space-between;gap:calc(var(--u)*2);z-index:6}
.stat{flex:1;position:relative;height:calc(var(--u)*8.4);border-radius:999px;background:#5a3416;border:calc(var(--u)*.5) solid #fff6dd;box-shadow:0 calc(var(--u)*.7) 0 rgba(0,0,0,.25);overflow:visible;margin-left:calc(var(--u)*4)}
.stat i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;font-style:normal}
.stat b{position:relative;display:block;text-align:center;color:#fff;font-size:calc(var(--u)*4.2);line-height:calc(var(--u)*7.6);padding-left:calc(var(--u)*5);text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}
.stat .ic{position:absolute;left:calc(var(--u)*-5);top:50%;transform:translateY(-50%);font-size:calc(var(--u)*8.6);z-index:2;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.stat.full i{background:linear-gradient(#c57a4a,#8a4a22)}.stat.happy i{background:linear-gradient(#8ad94c,#4ea21d)}.stat.health i{background:linear-gradient(#b47af2,#7a3ccf)}
.lvstar{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*36);width:calc(var(--u)*22);height:calc(var(--u)*22);z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column}
.lvstar::before{content:'';position:absolute;inset:0;background:linear-gradient(#ffe36a,#f5a70c);clip-path:polygon(50% 2%,62% 35%,98% 36%,69% 58%,80% 95%,50% 74%,20% 95%,31% 58%,2% 36%,38% 35%);filter:drop-shadow(0 3px 0 #b36d00)}
.lvstar b{position:relative;font-size:calc(var(--u)*5);color:#7a3a00;margin-top:calc(var(--u)*4)}
.home-pet{position:absolute;left:50%;bottom:calc(var(--u)*50);transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center}
.home-toy{position:absolute;right:calc(var(--u)*6);bottom:calc(var(--u)*46);width:calc(var(--u)*18);z-index:4;animation:bob 3s ease-in-out infinite}
.mood{position:absolute;left:calc(var(--u)*4);bottom:calc(var(--u)*34);z-index:6;background:rgba(255,248,234,.95);border-radius:calc(var(--u)*4);padding:calc(var(--u)*1.5) calc(var(--u)*3);font-weight:700;font-size:calc(var(--u)*4);box-shadow:0 3px 8px rgba(0,0,0,.2);max-width:calc(var(--u)*60)}
@media (orientation:landscape){
 .home-top{top:calc(var(--u)*3);left:calc(var(--u)*4);right:calc(var(--u)*4)}
 .stats{top:calc(var(--u)*17);left:calc(var(--u)*6);right:auto;width:calc(var(--u)*120)}
 .home-pet{bottom:calc(var(--u)*10);left:52%}
 .lvstar{top:calc(var(--u)*30);right:calc(var(--u)*30)}
 .home-toy{right:calc(var(--u)*50);bottom:calc(var(--u)*14)}
 .menu.home{flex-direction:column;left:auto;right:calc(var(--u)*4);bottom:calc(var(--u)*5);gap:calc(var(--u)*2.4)}
 .menu.home .gbtn{width:calc(var(--u)*20);height:calc(var(--u)*16.5);font-size:calc(var(--u)*3.8)}
 .menu.home .gbtn .em{font-size:calc(var(--u)*7)}.menu.home .gbtn img{width:calc(var(--u)*10);height:calc(var(--u)*7.5)}
 .mood{bottom:calc(var(--u)*6)}
 .side.home{left:calc(var(--u)*4);right:auto;top:calc(var(--u)*30);bottom:auto;flex-direction:column}
}
/* ====== Bản đồ tuần ====== */
.tabs{position:absolute;left:0;right:0;top:calc(var(--u)*27);display:flex;justify-content:center;gap:calc(var(--u)*2);z-index:6}
.tabs .gbtn{font-size:calc(var(--u)*5);height:calc(var(--u)*11);padding:0 calc(var(--u)*4);border-radius:calc(var(--u)*3.4);flex-direction:row}
.tabs .gbtn.off{filter:saturate(.55) brightness(1.05);opacity:.85;transform:scale(.94)}
.node{position:absolute;transform:translate(-50%,-50%);width:calc(var(--u)*27);height:calc(var(--u)*20);z-index:4}
.node .disc{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--u)*5.2);color:#4a2a10}
.node .disc::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:50%;z-index:-1}
.node .top{position:absolute;left:8%;right:8%;top:0;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1}
.node.lock .top{background:radial-gradient(circle at 40% 30%,#8a8f99,#3b3f47 70%);color:#fff}
.node.lock .disc::before{background:linear-gradient(#5aa2ff,#2a62c4)}
.node.cur .top{background:radial-gradient(circle at 40% 25%,#fff7b0,#ffcc1f 45%,#f0a100 85%);color:#7a3a00;box-shadow:0 0 calc(var(--u)*8) calc(var(--u)*3) rgba(255,230,90,.85)}
.node.cur .disc::before{background:linear-gradient(#ffd34d,#d38a00)}
.node.cur{animation:nodeGlow 1.6s ease-in-out infinite}
@keyframes nodeGlow{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.node.done .top{background:radial-gradient(circle at 40% 25%,#c6f59a,#5bbf2b 55%,#3a8f14 90%);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.node.done .disc::before{background:linear-gradient(#ffd34d,#d38a00)}
.node.chal .top{background:radial-gradient(circle at 40% 25%,#f3d1ff,#b06af0 55%,#6b2bb5 90%);color:#fff}
.node.chal .disc::before{background:linear-gradient(#ffd34d,#d38a00)}
.node .lk{width:calc(var(--u)*6);margin-top:calc(var(--u)*1)}
.node .chain{position:absolute;left:4%;right:4%;top:28%;height:calc(var(--u)*3);background:repeating-linear-gradient(90deg,#d8dbe0 0 calc(var(--u)*2.4),#8b9099 calc(var(--u)*2.4) calc(var(--u)*3));border-radius:4px;transform:rotate(-8deg);opacity:.95}
.node .st{position:absolute;left:50%;top:calc(var(--u)*-6);transform:translateX(-50%);white-space:nowrap;font-size:calc(var(--u)*7.6);letter-spacing:calc(var(--u)*-1.2);line-height:1}
.node .st span{display:inline-block;filter:drop-shadow(0 2px 0 #b06d00)}.node .st span:nth-child(2){transform:translateY(calc(var(--u)*-2))}.node .st .off{filter:grayscale(1) opacity(.45)}
.node small{font-size:calc(var(--u)*3.2);font-weight:700;margin-top:2px}
.popup{position:absolute;z-index:9;background:linear-gradient(#fffdf6,#f8ecd2);border:calc(var(--u)*.8) solid #fff;border-radius:calc(var(--u)*5);box-shadow:0 calc(var(--u)*1.4) 0 rgba(140,90,30,.35),0 8px 24px rgba(0,0,0,.35);padding:calc(var(--u)*4);text-align:center;width:calc(var(--u)*76)}
.popup h3{margin:0;font-size:calc(var(--u)*8);line-height:1.1;background:linear-gradient(#3cb7ff,#1767c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.popup h3 em{font-style:normal;background:linear-gradient(#ffb547,#f27b10);-webkit-background-clip:text;background-clip:text}
.popup .topic{font-size:calc(var(--u)*3.7);font-weight:600;color:#7a5a3a;margin:calc(var(--u)*1) 0 calc(var(--u)*2);line-height:1.25}
.popup .gbtn{width:100%;height:calc(var(--u)*19);font-size:calc(var(--u)*6.4);line-height:1.05;margin-top:calc(var(--u)*2.6)}
.popup .gbtn small{font-size:calc(var(--u)*5);font-weight:700}
.popup .x{position:absolute;right:calc(var(--u)*-2);top:calc(var(--u)*-2);width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:linear-gradient(#ff7a6a,#e2392b);color:#fff;border:3px solid #fff;font-weight:800;font-size:calc(var(--u)*5);box-shadow:0 2px 0 #9c1f15}
.popup .note{font-size:calc(var(--u)*3.2);color:#8a6a4a;margin-top:calc(var(--u)*2);font-weight:600}
.mascot{position:absolute;z-index:5;pointer-events:none;animation:bob 2.8s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.mascot.wave{right:calc(var(--u)*-3);bottom:calc(var(--u)*12);width:calc(var(--u)*34)}
.gradechip{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);z-index:7}
.back{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);z-index:10;width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:linear-gradient(#fffdf6,#f2deb8);border:calc(var(--u)*.6) solid #fff;box-shadow:0 calc(var(--u)*.8) 0 #b88e55;font-size:calc(var(--u)*6);font-weight:800;color:#7a4a22;display:flex;align-items:center;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,248,234,.95);border:2px solid #fff;border-radius:999px;padding:0 calc(var(--u)*3);height:calc(var(--u)*8.4);font-weight:800;font-size:calc(var(--u)*4);box-shadow:0 2px 0 rgba(120,70,20,.3)}
@media (orientation:landscape){.tabs{top:calc(var(--u)*24)}.mascot.wave{right:calc(var(--u)*4);bottom:calc(var(--u)*2);width:calc(var(--u)*26)}.popup{width:calc(var(--u)*66)}}
/* ====== Câu hỏi ====== */
.qbar{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*7);display:flex;align-items:center;gap:calc(var(--u)*2);z-index:6}
.hearts{display:flex;align-items:flex-end;margin-right:calc(var(--u)*-6);z-index:2;position:relative}
.hearts span{font-size:calc(var(--u)*8);line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3));margin-right:calc(var(--u)*-2.4)}
.hearts span:nth-child(2){transform:translateY(calc(var(--u)*-3)) scale(1.1)}.hearts span.off{filter:grayscale(1) opacity(.4)}
.qtitle{flex:1;height:calc(var(--u)*11);background:linear-gradient(#fffdf6,#f3e5c8);border:calc(var(--u)*.6) solid #fff;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--u)*5.2);box-shadow:0 calc(var(--u)*.8) 0 rgba(120,70,20,.35);padding:0 calc(var(--u)*4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:50%;background:conic-gradient(#5a3416 calc(var(--p)*1%),#d8c3a0 0);display:flex;align-items:center;justify-content:center;border:calc(var(--u)*.6) solid #fff;box-shadow:0 calc(var(--u)*.8) 0 rgba(120,70,20,.4)}
.timer b{width:76%;height:76%;border-radius:50%;background:#5a3416;color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*5);font-weight:800}
.timer.low b{background:#c0392b}
.qwrap{position:absolute;left:0;right:0;top:calc(var(--u)*22);bottom:0;padding:0 calc(var(--u)*4) calc(var(--u)*40);overflow-y:auto;z-index:5}
.card{background:linear-gradient(#fffdf6,#fbf1dc);border:calc(var(--u)*.8) solid #fff;border-radius:calc(var(--u)*6);box-shadow:0 calc(var(--u)*1.2) 0 rgba(150,100,40,.3),0 6px 18px rgba(0,0,0,.18);padding:calc(var(--u)*4) calc(var(--u)*5);position:relative}
.qcard{min-height:calc(var(--u)*34);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:calc(var(--u)*7);line-height:1.25;white-space:pre-line}
.qcard.long{font-size:calc(var(--u)*5.2);text-align:left;justify-content:flex-start}
.qcard.xl{font-size:calc(var(--u)*11)}
.spk{position:absolute;right:calc(var(--u)*-1.5);top:calc(var(--u)*-3);width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:linear-gradient(#5cb8ff,#1f7de0);border:3px solid #fff;box-shadow:0 2px 0 #13529c;display:flex;align-items:center;justify-content:center;z-index:3}
.spk img{width:70%;filter:brightness(10)}.spk.on{animation:pulse 1s infinite}
.lvtag{position:absolute;left:calc(var(--u)*4);top:calc(var(--u)*-3.5);background:linear-gradient(#ff8cb3,#e1557f);color:#fff;font-size:calc(var(--u)*3.4);font-weight:800;border-radius:999px;padding:0 calc(var(--u)*3);border:2px solid #fff;white-space:nowrap}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*4);margin-top:calc(var(--u)*7)}
.answers.three{grid-template-columns:1fr}
.ans{min-height:calc(var(--u)*24);font-size:calc(var(--u)*8.4);padding:calc(var(--u)*2) calc(var(--u)*3);line-height:1.15;text-align:center;border-radius:calc(var(--u)*5.6)}
.ans.small{font-size:calc(var(--u)*5.4)}.ans.tiny{font-size:calc(var(--u)*4.4)}
.answers.three .ans{min-height:calc(var(--u)*15);font-size:calc(var(--u)*5.4);flex-direction:row;justify-content:flex-start;gap:calc(var(--u)*3);text-align:left}
.answers.three .ans .k{width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:rgba(255,255,255,.9);color:#5a3416;display:inline-flex;align-items:center;justify-content:center;flex:none;text-shadow:none}
.ans.right{box-shadow:0 0 0 calc(var(--u)*1.2) #fff36b,0 0 calc(var(--u)*8) calc(var(--u)*3) rgba(255,240,120,.95),0 calc(var(--u)*1.4) 0 var(--cd)!important;animation:shine .8s ease-in-out 2}
.ans.wrong{animation:shake .45s;filter:saturate(.6)}
.ans.fade{opacity:.55}
@keyframes shine{50%{transform:scale(1.04)}}@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.helper{position:absolute;right:calc(var(--u)*-2);bottom:0;z-index:6;width:calc(var(--u)*36);pointer-events:none}
.helper img{width:100%;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.bubble{position:absolute;z-index:7;right:calc(var(--u)*34);bottom:calc(var(--u)*14);background:#fffdf6;border-radius:calc(var(--u)*8);padding:calc(var(--u)*2) calc(var(--u)*5);font-weight:800;font-size:calc(var(--u)*7.4);color:#e2621b;box-shadow:0 4px 12px rgba(0,0,0,.25);white-space:nowrap;transform-origin:100% 100%;animation:bubbleIn .35s cubic-bezier(.3,1.6,.6,1)}
.bubble::after{content:'';position:absolute;right:calc(var(--u)*-3);bottom:calc(var(--u)*3);border:calc(var(--u)*3) solid transparent;border-left:calc(var(--u)*5) solid #fffdf6}
.bubble.sad{color:#2f6fc9;font-size:calc(var(--u)*5.6)}
@keyframes bubbleIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.explain{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*4.4);font-weight:600;line-height:1.35;text-align:left}
.explain b{color:#2b8a12}.explain .bad{color:#c0392b}
.nextbar{position:fixed;left:0;right:0;bottom:0;padding:calc(var(--u)*3) calc(var(--u)*4) calc(var(--u)*5);z-index:20;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);background:linear-gradient(rgba(255,248,234,0),rgba(255,248,234,.98) 25%);animation:slideUp .3s ease-out}
.nextbar .fb{font-weight:600;font-size:calc(var(--u)*4.3);line-height:1.35;max-width:calc(var(--u)*94);width:100%;max-height:30vh;overflow:auto}
.nextbar .fb .h{font-size:calc(var(--u)*6);font-weight:800}.nextbar .fb .h.ok{color:#2b8a12}.nextbar .fb .h.no{color:#d0442c}
.nextbar .gbtn{width:calc(var(--u)*70);height:calc(var(--u)*14);font-size:calc(var(--u)*6.4)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.bigbtn{display:flex;margin:calc(var(--u)*5) auto 0;width:calc(var(--u)*68);height:calc(var(--u)*16);font-size:calc(var(--u)*7.4);letter-spacing:.03em}
/* Đọc hiểu */
.scrollp{position:relative;margin:calc(var(--u)*2) calc(var(--u)*1) 0;padding:calc(var(--u)*7) calc(var(--u)*7) calc(var(--u)*6);background:linear-gradient(90deg,#e9cf98,#f8e8c2 12%,#fbefd2 50%,#f8e8c2 88%,#e9cf98);border-radius:calc(var(--u)*2);box-shadow:inset 0 0 calc(var(--u)*5) rgba(150,100,30,.35),0 6px 14px rgba(0,0,0,.25)}
.scrollp::before,.scrollp::after{content:'';position:absolute;left:calc(var(--u)*-2.5);right:calc(var(--u)*-2.5);height:calc(var(--u)*6);border-radius:999px;background:linear-gradient(#d9a95c,#a8702a 60%,#7a4a17);box-shadow:0 3px 4px rgba(0,0,0,.3)}
.scrollp::before{top:calc(var(--u)*-2.5)}.scrollp::after{bottom:calc(var(--u)*-2.5)}
.scrollp h4{margin:0 0 calc(var(--u)*2);text-align:center;font-size:calc(var(--u)*6);color:#8a3c0c}
.scrollp p{margin:0;font-size:calc(var(--u)*5);line-height:1.5;font-weight:600;white-space:pre-line;color:#4a2a10}
.subjpill{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);margin:calc(var(--u)*5) 0 calc(var(--u)*2);background:linear-gradient(#5cb8ff,#1f7de0);color:#fff;font-weight:800;font-size:calc(var(--u)*4.4);padding:calc(var(--u)*.6) calc(var(--u)*4);border-radius:999px;border:2px solid #fff;box-shadow:0 2px 0 #13529c}
.readq{font-weight:800;font-size:calc(var(--u)*5.8);line-height:1.3;margin:calc(var(--u)*2) 0}
.read-grid{display:block}
@media (orientation:landscape){
 .qwrap{top:calc(var(--u)*20);padding:0 calc(var(--u)*30) calc(var(--u)*30)}
 .read-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(var(--u)*8);align-items:start}
 .qwrap.reading{padding:0 calc(var(--u)*6) calc(var(--u)*24)}
 .qwrap.reading .read-grid>div:first-child{max-height:calc(100vh - var(--u)*32);overflow:auto;padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*4)}
 .helper{width:calc(var(--u)*28)}.bubble{right:calc(var(--u)*26)}
 .qbar{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*4)}
 .answers .ans{min-height:calc(var(--u)*18)}
}
/* Toán có lời văn */
.wcard{display:flex;gap:calc(var(--u)*3);align-items:center}
.wcard .txt{flex:1;font-weight:700;font-size:calc(var(--u)*5.4);line-height:1.4}
.wcard .pic{width:calc(var(--u)*26);flex:none;text-align:center;position:relative}
.wcard .pic img{width:100%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.ansbox{margin-top:calc(var(--u)*4);display:flex;align-items:center;gap:calc(var(--u)*2);background:#fff;border:calc(var(--u)*.6) solid #ead7b4;border-radius:calc(var(--u)*4);height:calc(var(--u)*15);padding:0 calc(var(--u)*4);font-weight:800;font-size:calc(var(--u)*6);box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.ansbox .val{flex:1;font-size:calc(var(--u)*8);min-height:1em;letter-spacing:.04em}
.ansbox .val::after{content:'';display:inline-block;width:3px;height:.9em;background:#5a3416;margin-left:3px;vertical-align:-.1em;animation:blink 1s steps(1) infinite}
.ansbox .unit{color:#9a8060;font-size:calc(var(--u)*5.4)}
@keyframes blink{50%{opacity:0}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*3);margin:calc(var(--u)*5) calc(var(--u)*1) 0}
.keypad .gbtn{height:calc(var(--u)*15);font-size:calc(var(--u)*10);border-radius:calc(var(--u)*4)}
.keypad .zero{grid-column:span 2;flex-direction:row;gap:calc(var(--u)*10)}
.keypad .wide{grid-column:1/-1}
.wrow{display:flex;align-items:center;gap:calc(var(--u)*4);margin-top:calc(var(--u)*4)}
.hintbtn{width:calc(var(--u)*19);height:calc(var(--u)*19);border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff1a1,#ffc928 55%,#e59a00);border:calc(var(--u)*.7) solid #fff;box-shadow:0 calc(var(--u)*1) 0 #b87700;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--u)*3.8);color:#6a3a00;flex:none}
.hintbtn img{height:calc(var(--u)*9)}
.hintbox{margin-top:calc(var(--u)*3);background:#fff7cf;border:2px dashed #e5b52a;border-radius:calc(var(--u)*3);padding:calc(var(--u)*2) calc(var(--u)*3);font-weight:700;font-size:calc(var(--u)*4.4)}
@media (orientation:landscape){.word-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(var(--u)*6);align-items:start}.keypad{margin-top:0}.keypad .gbtn{height:calc(var(--u)*13)}.qwrap.word{padding:0 calc(var(--u)*30) calc(var(--u)*10) calc(var(--u)*8)}}
/* Nối */
.match{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--u)*16);row-gap:calc(var(--u)*3.4);margin-top:calc(var(--u)*4)}
.match svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.mcard{position:relative;z-index:2;min-height:calc(var(--u)*20);display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(#fffdf6,#f8ecd3);border:calc(var(--u)*.7) solid #fff;border-radius:calc(var(--u)*4.4);box-shadow:0 calc(var(--u)*1) 0 rgba(150,100,40,.35),0 4px 10px rgba(0,0,0,.15);font-weight:800;font-size:calc(var(--u)*6.4);padding:calc(var(--u)*1.5);line-height:1.15;transition:transform .1s}
.mcard.emo{font-size:calc(var(--u)*12)}.mcard.sm{font-size:calc(var(--u)*4.6)}
.mcard.sel{box-shadow:0 0 0 calc(var(--u)*1.2) #ffcf2e,0 calc(var(--u)*1) 0 rgba(150,100,40,.35);transform:scale(1.04)}
.mcard.linked{background:linear-gradient(#f2fff0,#dff5d4)}
.mcard.bad{background:linear-gradient(#ffecec,#ffd2d2)}
.mcard .num{position:absolute;top:calc(var(--u)*-2);left:calc(var(--u)*-2);width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;color:#fff;font-size:calc(var(--u)*3.8);display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.instr{font-weight:800;font-size:calc(var(--u)*4.6);text-align:center;background:rgba(255,248,234,.92);border-radius:999px;padding:calc(var(--u)*1) calc(var(--u)*4);margin:0 auto calc(var(--u)*2);display:table;box-shadow:0 2px 6px rgba(0,0,0,.15)}
/* Sắp xếp */
.slots{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);min-height:calc(var(--u)*30);align-content:flex-start;padding:calc(var(--u)*2)}
.slot{min-width:calc(var(--u)*16);height:calc(var(--u)*12);border-radius:calc(var(--u)*3);background:#fff;border:2px solid #ead7b4;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.tiles{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2.4);justify-content:center;margin-top:calc(var(--u)*4)}
.tile{height:calc(var(--u)*12);padding:0 calc(var(--u)*3.4);border-radius:calc(var(--u)*3);background:linear-gradient(#ffe773,#ffc21a);border:calc(var(--u)*.5) solid #fff7d0;box-shadow:0 calc(var(--u)*1) 0 #c98a00;font-weight:800;font-size:calc(var(--u)*5.6);color:#5a3416;white-space:nowrap}
.tile.used{visibility:hidden}
.slots .tile{background:linear-gradient(#fffdf6,#f1e2c4);box-shadow:0 calc(var(--u)*.8) 0 #c7a77a}
/* Kết quả */
.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--u)*4);z-index:6;text-align:center}
.result .card{width:min(92vw,calc(var(--u)*92))}
.result h2{margin:0;font-size:calc(var(--u)*8.4);line-height:1.1;color:#e2621b}
.bigstars{font-size:calc(var(--u)*16);line-height:1;margin:calc(var(--u)*2) 0}
.bigstars span{display:inline-block;animation:starIn .5s cubic-bezier(.3,1.8,.5,1) both;filter:drop-shadow(0 3px 0 #b36d00)}.bigstars span:nth-child(2){animation-delay:.25s;transform:translateY(-15%)}.bigstars span:nth-child(3){animation-delay:.5s}.bigstars .off{filter:grayscale(1) opacity(.35)}
@keyframes starIn{from{transform:scale(0) rotate(-90deg)}}
.rewards{display:flex;justify-content:center;gap:calc(var(--u)*2);flex-wrap:wrap;margin:calc(var(--u)*2) 0}
.rewards .chip{font-size:calc(var(--u)*5);height:calc(var(--u)*10)}
.lines{font-size:calc(var(--u)*4);font-weight:600;line-height:1.35;text-align:left;margin:calc(var(--u)*2) 0}
.btnrow{display:flex;gap:calc(var(--u)*3);justify-content:center;flex-wrap:wrap;margin-top:calc(var(--u)*3)}
.btnrow .gbtn{height:calc(var(--u)*13);padding:0 calc(var(--u)*5);font-size:calc(var(--u)*5);flex-direction:row}
/* ====== Trang dạng bảng (cửa hàng, bộ sưu tập, …) ====== */
.panel-scr{position:absolute;inset:0;display:flex;flex-direction:column;z-index:5}
.ptitle{margin:calc(var(--u)*4) auto 0;background:linear-gradient(#ffb547,#f27b10);color:#fff;font-weight:800;font-size:calc(var(--u)*7);padding:0 calc(var(--u)*8);border-radius:calc(var(--u)*4);border:calc(var(--u)*.8) solid #fff3d6;box-shadow:0 calc(var(--u)*1.2) 0 #b45207;text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap}
.ptitle.purple{background:linear-gradient(#b07af0,#7a3cd0);box-shadow:0 calc(var(--u)*1.2) 0 #4f2390}.ptitle.green{background:linear-gradient(#8be052,#45a51c);box-shadow:0 calc(var(--u)*1.2) 0 #2b7310}.ptitle.blue{background:linear-gradient(#5cb8ff,#1f7de0);box-shadow:0 calc(var(--u)*1.2) 0 #13529c}
.pbody{flex:1;overflow-y:auto;padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*36)}
.ttabs{display:flex;justify-content:center;gap:calc(var(--u)*2);margin:calc(var(--u)*3) 0}
.ttabs .gbtn{height:calc(var(--u)*11);font-size:calc(var(--u)*4.6);padding:0 calc(var(--u)*3.4);border-radius:calc(var(--u)*3.4);flex-direction:row}
.ttabs .gbtn.off{--c1:#fffdf5;--c2:#efdcb8;--cd:#c7a77a;color:#7a5030;text-shadow:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*3)}
@media (orientation:landscape){.grid3{grid-template-columns:repeat(5,1fr)}.pbody{padding:calc(var(--u)*3) calc(var(--u)*12) calc(var(--u)*10)}}
.icard{position:relative;background:linear-gradient(#fffdf6,#f8ecd3);border:calc(var(--u)*.7) solid #fff;border-radius:calc(var(--u)*4.4);box-shadow:0 calc(var(--u)*1) 0 rgba(150,100,40,.35),0 4px 10px rgba(0,0,0,.15);padding:calc(var(--u)*2) calc(var(--u)*1.5) calc(var(--u)*2.4);text-align:center;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6)}
.icard img{height:calc(var(--u)*16);max-width:90%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}
.icard .nm{font-weight:800;font-size:calc(var(--u)*4);line-height:1.1}
.icard .ds{font-size:calc(var(--u)*3.2);font-weight:600;color:#8a6a4a;line-height:1.1}
.price{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(#ffe36a,#ffbd12);border:2px solid #fff;border-radius:999px;padding:0 calc(var(--u)*2.4) 0 calc(var(--u)*.6);font-weight:800;font-size:calc(var(--u)*4.4);box-shadow:0 2px 0 #c98a00;color:#5a3416}
.price img{width:calc(var(--u)*6);height:calc(var(--u)*6)}
.icard.locked img{filter:grayscale(1) brightness(1.3) opacity(.45)}
.icard .own{position:absolute;top:calc(var(--u)*-1.6);right:calc(var(--u)*-1.6);background:#45a51c;color:#fff;border-radius:999px;font-size:calc(var(--u)*3.2);font-weight:800;padding:0 calc(var(--u)*2);border:2px solid #fff}
.stall{position:relative;height:calc(var(--u)*50);margin-top:calc(var(--u)*-2)}
.stall img.st{position:absolute;left:50%;transform:translateX(-56%);height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.stall img.fx2{position:absolute;right:calc(var(--u)*4);bottom:0;height:72%;animation:bob 2.6s ease-in-out infinite}
@media (orientation:landscape){.stall{height:calc(var(--u)*34)}}
.note{font-size:calc(var(--u)*3.8);font-weight:600;color:#7a5a3a;text-align:center;margin:calc(var(--u)*2) 0}
.lockmsg{background:#fff1d0;border:2px dashed #e7a43a;border-radius:calc(var(--u)*3);padding:calc(var(--u)*2.4);text-align:center;font-weight:700;font-size:calc(var(--u)*4.2);margin:calc(var(--u)*2) 0}
/* Nhiệm vụ */
.task{display:flex;align-items:center;gap:calc(var(--u)*3);margin-bottom:calc(var(--u)*3)}
.task .ck{width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;border:calc(var(--u)*.8) solid #d6c09a;background:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*7);color:#fff;flex:none}
.task.done .ck{background:linear-gradient(#8be052,#45a51c);border-color:#fff;box-shadow:0 2px 0 #2b7310}
.task .tx{flex:1;font-weight:800;font-size:calc(var(--u)*5)}.task .tx small{display:block;font-weight:600;color:#8a6a4a;font-size:calc(var(--u)*3.6)}
.task .gbtn{height:calc(var(--u)*10);padding:0 calc(var(--u)*3);font-size:calc(var(--u)*4);flex-direction:row}
.chestbox{text-align:center;margin-top:calc(var(--u)*4)}
.chestbox img{width:calc(var(--u)*46);filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.chestbox img.ready{animation:wobble 1.4s ease-in-out infinite;cursor:pointer}
.chestbox img.locked{filter:grayscale(.6) brightness(.95) drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.prog{height:calc(var(--u)*6);background:#ead7b4;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.15)}
.prog i{display:block;height:100%;background:linear-gradient(#8be052,#45a51c);border-radius:999px}
/* Bộ sưu tập */
.album-sec h3{margin:calc(var(--u)*4) 0 calc(var(--u)*2);font-size:calc(var(--u)*5.6);color:#fff;text-shadow:0 2px 0 #5a3416,0 0 4px #5a3416}
.stagerow{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*1.6);margin-bottom:calc(var(--u)*3)}
.stagerow .icard img{height:calc(var(--u)*13)}
.mile{display:flex;align-items:center;gap:calc(var(--u)*2);margin:calc(var(--u)*1.4) 0;font-weight:700;font-size:calc(var(--u)*4)}
.mile .prog{flex:1}
.rare img{filter:drop-shadow(0 0 8px gold)}
/* Bảng xếp hạng */
.lb{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.lbrow{display:flex;align-items:center;gap:calc(var(--u)*3);padding:calc(var(--u)*2.4) calc(var(--u)*3)}
.lbrow .rk{width:calc(var(--u)*11);height:calc(var(--u)*11);font-size:calc(var(--u)*6);font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.lbrow .av{width:calc(var(--u)*16);height:calc(var(--u)*16);object-fit:contain;flex:none}
.lbrow .nm{flex:1;font-weight:800;font-size:calc(var(--u)*5.4);line-height:1.1}.lbrow .nm small{display:block;font-weight:600;font-size:calc(var(--u)*3.6);color:#8a6a4a}
.lbrow .sc{font-weight:800;font-size:calc(var(--u)*6.4);color:#e2621b;text-align:right;line-height:1}.lbrow .sc small{display:block;font-size:calc(var(--u)*3.2);color:#8a6a4a}
.mark{display:inline-block;background:linear-gradient(#b07af0,#7a3cd0);color:#fff;border-radius:999px;font-size:calc(var(--u)*3);padding:0 calc(var(--u)*1.8);margin-left:4px;vertical-align:middle}
/* Đấu */
.duel{position:absolute;inset:0;display:flex;flex-direction:column}
.duel .half{flex:1;position:relative;padding:calc(var(--u)*3);display:flex;flex-direction:column;justify-content:center;border:0}
.duel .half.top{transform:rotate(180deg);background:rgba(90,170,255,.22)}.duel .half.bot{background:rgba(255,150,80,.22)}
.duel .mid{height:calc(var(--u)*10);display:flex;align-items:center;justify-content:center;background:linear-gradient(#ffe36a,#ffbd12);font-weight:800;font-size:calc(var(--u)*5);color:#5a3416;border-top:3px solid #fff;border-bottom:3px solid #fff;z-index:2;gap:calc(var(--u)*4)}
@media (orientation:landscape){.duel{flex-direction:row}.duel .half.top{transform:none;background:rgba(90,170,255,.22)}.duel .mid{width:calc(var(--u)*14);height:auto;flex-direction:column;border:0;border-left:3px solid #fff;border-right:3px solid #fff}}
.duel .who{display:flex;align-items:center;gap:calc(var(--u)*2);font-weight:800;font-size:calc(var(--u)*4.6)}
.duel .who img{width:calc(var(--u)*12)}
.duel .q{font-size:calc(var(--u)*6.4);font-weight:800;text-align:center;margin:calc(var(--u)*2) 0;line-height:1.2}
.duel .answers{margin-top:calc(var(--u)*2);gap:calc(var(--u)*2.4)}.duel .ans{min-height:calc(var(--u)*13);font-size:calc(var(--u)*5)}
.duel .score{margin-left:auto;background:#fff;border-radius:999px;padding:0 calc(var(--u)*3);font-size:calc(var(--u)*5.4)}
/* ====== Phụ huynh (pastel) ====== */
.parent{position:absolute;inset:0;overflow-y:auto;background:linear-gradient(#fbf7ec,#f1f4e4);font-family:'NunitoV','Baloo 2',sans-serif;color:#3d3326;padding:16px 16px 60px}
.parent .ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.parent .ph .lg{width:64px;height:64px;border-radius:16px;background:#fde8c8;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.parent .ph .lg img{width:90%}
.parent h1{margin:0;font-family:'Baloo 2';font-size:28px;line-height:1;color:#4a3420;letter-spacing:.02em}
.parent h1+div{font-weight:700;color:#6c6150}.parent h1+div b{color:#6aa84f}
.parent .kids{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.parent .kid{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid #ece6d6;border-radius:14px;padding:4px 12px 4px 4px;font-weight:800;color:#5c6b3a}
.parent .kid img{width:34px;height:34px;object-fit:contain;background:#fdf3e1;border-radius:50%}
.parent .kid.on{background:#eef7e2;border-color:#9ccf7c}
.parent .home{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #ece6d6;font-size:22px}
.pgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media (min-width:900px){.pgrid{grid-template-columns:1fr 1fr 1fr}.pgrid .wide{grid-column:span 2}.pgrid .full{grid-column:1/-1}}
.pcard{background:#fffdf8;border:1.5px solid #ece4d2;border-radius:18px;padding:14px 16px;box-shadow:0 2px 8px rgba(120,100,60,.08);position:relative}
.pcard h3{margin:0 0 10px;font-size:18px;display:flex;align-items:center;gap:8px;font-family:'Baloo 2';color:#3d3326}
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:0 4px 0 26px;position:relative;border-bottom:1.5px solid #cfc6b0;margin-bottom:22px}
.chart .yl{position:absolute;left:0;font-size:11px;color:#8a8070;transform:translateY(50%)}
.chart .gl{position:absolute;left:22px;right:0;border-top:1px dashed #e4dccb}
.chart .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;z-index:1}
.chart .b i{display:block;width:70%;max-width:34px;background:linear-gradient(#a7d88a,#7fbf5e);border-radius:5px 5px 0 0;min-height:2px}
.chart .b.today i{background:linear-gradient(#ffcf7a,#f2a33a)}
.chart .b span{font-size:12px;font-weight:800;margin-bottom:2px}.chart .b em{position:absolute;bottom:-20px;font-style:normal;font-size:12px;font-weight:700;color:#6c6150}
.okbox{background:#eef7e2;border-radius:12px;padding:8px 12px;font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center}
.skill{display:flex;align-items:center;gap:10px;margin:10px 0}
.skill .si{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.skill .sb{flex:1}.skill .sb b{font-size:14px;display:block;margin-bottom:4px}
.skill .bar{height:9px;border-radius:9px;background:#efe9dc;overflow:hidden}.skill .bar i{display:block;height:100%;border-radius:9px}
.skill .pc{font-weight:800;font-size:14px;width:42px;text-align:right}
.tip{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f0e9da}.tip:last-of-type{border:0}
.tip .ti{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.tip b{font-size:14.5px;display:block}.tip span{font-size:13px;color:#6c6150}
.pbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#8fbf6a;color:#fff;font-weight:800;font-size:17px;border-radius:12px;padding:10px;box-shadow:0 3px 0 #6c9a4c;margin-top:10px;font-family:'Baloo 2'}
.pbtn.sec{background:#fff;color:#5c6b3a;border:2px solid #cfe3bd;box-shadow:none}.pbtn.warn{background:#e57373;box-shadow:0 3px 0 #b84b4b}.pbtn.inl{display:inline-flex;width:auto;padding:8px 16px}
.wrongq{background:#fdf1ee;border-radius:14px;padding:10px 12px;margin-bottom:8px}
.wrongq .q{font-weight:800;margin-bottom:6px;white-space:pre-line}
.wrongq .pair{display:flex;gap:8px;flex-wrap:wrap}.wrongq .pair span{border-radius:10px;padding:2px 10px;font-weight:800;font-size:14px}
.wrongq .ok{background:#e4f4d8;color:#3c7d20;border:1.5px solid #b9dea0}.wrongq .no{background:#fde4e2;color:#c0392b;border:1.5px solid #f3b6b0}
.wrongq .ex{font-size:13.5px;margin-top:6px;color:#5d5345}
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.ptabs button{background:#fff;border:2px solid #ece6d6;border-radius:12px;padding:6px 14px;font-weight:800;color:#6c6150;font-family:'Baloo 2';font-size:15px}.ptabs button.on{background:#8fbf6a;border-color:#8fbf6a;color:#fff}
.form label{display:block;font-weight:700;margin:8px 0 3px;font-size:14px}
.form input,.form select,.form textarea{width:100%;padding:8px 10px;border-radius:10px;border:1.5px solid #ddd3bd;background:#fff}
.form textarea{min-height:70px}
.form .row{display:flex;gap:8px}.form .row>*{flex:1}
.parent-fox{position:fixed;right:10px;bottom:6px;width:110px;pointer-events:none;z-index:3;opacity:.95}
.parent-fox .say{position:absolute;right:96px;bottom:70px;background:#fff;border-radius:16px;padding:6px 10px;font-size:12.5px;font-weight:700;width:150px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.list-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f0e9da;font-size:14px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #f0e9da;font-weight:700}
.switch input{width:22px;height:22px}
/* Cổng phụ huynh, hộp thoại */
.modal{position:fixed;inset:0;background:rgba(40,25,10,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:fadeIn .2s}
.modal>.card{max-width:min(92vw,460px);width:100%;max-height:88vh;overflow:auto;font-size:17px;animation:bubbleIn .3s cubic-bezier(.3,1.4,.6,1)}
.modal h2{margin:0 0 8px;color:#e2621b;font-size:26px;line-height:1.15}
.modal p{margin:6px 0;font-weight:600;line-height:1.4}
.modal .btnrow .gbtn{height:48px;font-size:18px;padding:0 18px}
.modal input,.modal select{width:100%;font-size:20px;padding:8px 12px;border-radius:12px;border:2px solid #e2cfa8;margin:6px 0;font-weight:700;color:#5a3416;background:#fff}
@keyframes fadeIn{from{opacity:0}}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#5a3416;color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.3);animation:bubbleIn .3s;max-width:92vw;text-align:center}
.petpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0}
.petpick button{background:#fff;border:3px solid #ead7b4;border-radius:14px;padding:4px;display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:12px}
.petpick button.on{border-color:#45a51c;background:#effbe6}.petpick img{width:100%;height:60px;object-fit:contain}
.profiles{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*4);z-index:6;padding-top:calc(var(--u)*30)}
.profiles .pc{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*4);width:calc(var(--u)*88)}
.profiles .pcard2{display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*3)}
.profiles .pcard2 img{height:calc(var(--u)*22)}.profiles .pcard2 b{font-size:calc(var(--u)*5.4)}.profiles .pcard2 small{font-size:calc(var(--u)*3.8);font-weight:700;color:#8a6a4a}
.overlay-time{position:fixed;inset:0;z-index:150;background:rgba(40,25,10,.75);display:flex;align-items:center;justify-content:center;padding:20px}
/* ====== Báo cáo in ====== */
.report{position:absolute;inset:0;overflow:auto;background:#fff;color:#222;font-family:'NunitoV','Baloo 2',sans-serif;padding:24px}
.report .sheet{max-width:820px;margin:0 auto}
.report h1{font-family:'Baloo 2';margin:0;font-size:28px;color:#e2621b}
.report table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}.report th,.report td{border:1px solid #ddd;padding:6px 8px;text-align:left}.report th{background:#f6f1e4}
.report h2{font-family:'Baloo 2';font-size:20px;margin:18px 0 6px;color:#4a3420;border-bottom:2px solid #f0e2c4}
.report .noprint{margin-bottom:12px;display:flex;gap:8px}
.report .rbar{display:inline-block;height:10px;background:#8fbf6a;border-radius:5px;vertical-align:middle}
@media print{html,body{overflow:visible;height:auto;background:#fff}#app{position:static}.report{position:static;overflow:visible;padding:0}.noprint{display:none!important}}
.hide{display:none!important}
/* ---- tinh chỉnh sau khi so mockup (vòng 1) ---- */
.pen .who{top:auto;bottom:calc(var(--u)*-19);font-size:calc(var(--u)*3.4);z-index:2}
.side.zoo{right:auto;left:calc(var(--u)*47);transform:translateX(-50%);top:calc(var(--u)*56);gap:calc(var(--u)*5.4)}
.side.zoo .rbtn{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.board .r .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .r img{width:calc(var(--u)*6);height:calc(var(--u)*6);object-fit:contain}
@media (orientation:landscape){
  .logo{left:calc(var(--u)*27);transform:none}
  .zoo-board{width:calc(var(--u)*36);top:calc(var(--u)*17);padding:calc(var(--u)*1.4) calc(var(--u)*2.4)}
  .zoo-board h4{font-size:calc(var(--u)*3.6)}
  .zoo-board .r{font-size:calc(var(--u)*3.4);padding:calc(var(--u)*.3) 0}
  .side.zoo{left:50%;top:auto;bottom:calc(var(--u)*5);transform:translateX(-50%);flex-direction:row;gap:calc(var(--u)*7)}
}
@media (orientation:landscape){
  .zoo-board{width:calc(var(--u)*32)}
  .zoo-board h4{white-space:nowrap;font-size:calc(var(--u)*3.3);padding:0 calc(var(--u)*1)}
  .pen .who{bottom:auto;top:calc(var(--u)*-5)}
  .pen{width:calc(var(--u)*30)}
}
@media (orientation:landscape){
  .logo{transform:translateX(0)}
  .zoo-board{width:calc(var(--u)*34)}
  .zoo-board .r img{display:none}
  .pen .who{top:calc(var(--u)*-8)}
}
/* Logo: lớp viền nằm sau lớp chữ gradient */
.logo .t span{position:relative;-webkit-text-stroke:0;background:none!important;color:inherit;filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.2) rgba(0,0,0,.35))}
.logo .t span::before{content:attr(data-t);position:absolute;left:0;top:0;color:#5a2d0c;-webkit-text-stroke:calc(var(--u)*2.6) #5a2d0c;text-shadow:0 calc(var(--u)*1.4) 0 #3d1d05}
.logo .t span b{position:relative;font-weight:800;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:calc(var(--u)*.35) rgba(255,255,255,.55)}
.logo .n1 b{background-image:linear-gradient(#fff36a 12%,#ffc21a 50%,#ff8a00 92%)}
.logo .n2 b{background-image:linear-gradient(#e2ff7a 12%,#7cd423 50%,#3c9a0f 92%)}
.logo .t span b{-webkit-text-stroke:0}
.logo .t span::before{-webkit-text-stroke-width:calc(var(--u)*2.2)}
.logo .t{font-variation-settings:'wght' 800}
.logo .t{font-family:'BalooLogo','Baloo 2',sans-serif;font-variation-settings:normal}
/* Nhà – vòng 2 */
.home-top{flex-wrap:nowrap;gap:calc(var(--u)*1.5)}
.home-top .namepill{flex:0 1 auto;min-width:0;font-size:calc(var(--u)*4.4);padding:0 calc(var(--u)*2.6);height:calc(var(--u)*10)}
.home-top .pill{font-size:calc(var(--u)*4.2);height:calc(var(--u)*9);flex:0 0 auto}.home-top .pill.coin{min-width:calc(var(--u)*24)}
.home-top .pill .ic{width:calc(var(--u)*9.5);height:calc(var(--u)*9.5)}.home-top .pill.flame .v{font-size:calc(var(--u)*5)}.home-top .pill.flame .of{font-size:calc(var(--u)*3.6);line-height:calc(var(--u)*6);padding:0 calc(var(--u)*1.4)}
.home-top .ibtn{flex:0 0 auto;width:calc(var(--u)*8.5);height:calc(var(--u)*8.5);font-size:calc(var(--u)*5.4)}
.stat.full i{background:linear-gradient(#ffa95c,#e2621c)}
.home-pet{bottom:calc(var(--u)*42)}
.side.home{top:calc(var(--u)*62)}
.mood{bottom:auto;top:calc(var(--u)*34);left:calc(var(--u)*4);max-width:calc(var(--u)*62);font-size:calc(var(--u)*3.8);padding:calc(var(--u)*1.2) calc(var(--u)*2.6)}
@media (orientation:landscape){.mood{top:auto;bottom:calc(var(--u)*6)}.side.home{top:calc(var(--u)*30)}.home-pet{bottom:calc(var(--u)*8)}}
@media (orientation:landscape){.mood{left:calc(var(--u)*22);max-width:calc(var(--u)*62);bottom:calc(var(--u)*4)}}
/* Bản đồ – vòng 2 */
.node{width:calc(var(--u)*31);height:calc(var(--u)*23)}
.node .top{font-size:calc(var(--u)*5.6)}
.node.lock .top span{font-size:calc(var(--u)*4.4);margin-top:calc(var(--u)*-1)}
.node .lk{position:absolute;bottom:calc(var(--u)*1);width:calc(var(--u)*7)}
.node .st{top:calc(var(--u)*-7);font-size:calc(var(--u)*9)}
.logo.small{top:calc(var(--u)*2)}
.bg-map~.tabs,.scr .tabs{top:calc(var(--u)*31)}
.popup{width:calc(var(--u)*70);padding:calc(var(--u)*3) calc(var(--u)*4)}
.popup .gbtn{height:calc(var(--u)*16);margin-top:calc(var(--u)*2)}
.popup .topic{margin:calc(var(--u)*.6) 0 calc(var(--u)*.6)}
@media (orientation:landscape){.scr .tabs{top:calc(var(--u)*4)}.node{width:calc(var(--u)*27);height:calc(var(--u)*20)}}
.node .top{font-weight:800;color:#fff!important;text-shadow:0 calc(var(--u)*.5) 0 rgba(90,45,10,.55),0 0 calc(var(--u)*1) rgba(90,45,10,.5)}
.node.cur .top{text-shadow:0 calc(var(--u)*.5) 0 #b06400,0 0 calc(var(--u)*1.2) #b06400}
.node.lock .top>span{display:none}
.node.lock .lk{position:static;width:calc(var(--u)*8);margin-top:calc(var(--u)*3);position:relative;z-index:2}
.mapchips{position:absolute;left:calc(var(--u)*3);top:59%;z-index:7;display:flex;flex-direction:column;gap:calc(var(--u)*2);align-items:flex-start}
.mapchips .chip{font-size:calc(var(--u)*3.6)}
.mapgrade{position:absolute;left:0;right:0;bottom:calc(var(--u)*1.2);text-align:center;z-index:6;font-size:calc(var(--u)*3);font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.popup{z-index:12}
@media (orientation:landscape){.mapchips{top:calc(var(--u)*22)}.mapchips .chip{font-size:calc(var(--u)*3.8)}}
/* Câu hỏi – vòng 2 */
.qwrap{top:calc(var(--u)*24);padding-top:calc(var(--u)*5)}
.qwrap>.qcard:first-child{margin-top:calc(var(--u)*4)}
.ans{min-height:calc(var(--u)*26)}
.ans.fade{opacity:.8;filter:saturate(.45) brightness(1.05)}
.helper{z-index:21}
.bubble{z-index:22}
.nextbar{align-items:flex-start;padding-right:calc(var(--u)*34)}
.nextbar .gbtn{width:100%}
.nextbar .fb{max-height:22vh}
@media (orientation:landscape){.qwrap{top:calc(var(--u)*15)}.qwrap>.qcard:first-child{margin-top:0}.ans,.answers .ans{min-height:calc(var(--u)*18)}.nextbar{padding-right:calc(var(--u)*30);padding-left:calc(var(--u)*30)}}
.bubble{right:calc(var(--u)*6);bottom:calc(var(--u)*41)}
.bubble::after{right:calc(var(--u)*10);bottom:calc(var(--u)*-4.5);border:calc(var(--u)*3) solid transparent;border-top:calc(var(--u)*5) solid #fffdf6}
@media (orientation:landscape){.bubble{right:calc(var(--u)*3);bottom:calc(var(--u)*33)}}
.qtitle{padding-left:calc(var(--u)*6.5)!important;padding-right:calc(var(--u)*2);font-size:calc(var(--u)*4.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:calc(var(--u)*9.8);text-align:center}
@media (orientation:landscape){.qtitle{font-size:calc(var(--u)*5)}
 .qwrap{top:calc(var(--u)*20)}
 .qwrap.reading{top:calc(var(--u)*17)}
 .qwrap.reading .read-grid>div:first-child{max-height:none;overflow:visible;padding-top:0}
 .qwrap.reading .scrollp{padding:calc(var(--u)*5) calc(var(--u)*6) calc(var(--u)*4)}
 .qwrap.reading .scrollp p{max-height:calc(100vh - var(--u)*48);overflow:auto;font-size:calc(var(--u)*4.4)}
 .qwrap.reading .scrollp h4{font-size:calc(var(--u)*5.4);margin-bottom:calc(var(--u)*1)}
 .qwrap.reading .qcard{min-height:calc(var(--u)*18);font-size:calc(var(--u)*5.2)}
 .qwrap.reading .answers{margin-top:calc(var(--u)*3);gap:calc(var(--u)*2.2)}
 .qwrap.reading .answers.three .ans,.qwrap.reading .ans{min-height:calc(var(--u)*11);font-size:calc(var(--u)*4.6);padding:calc(var(--u)*1) calc(var(--u)*3)}
 .qwrap.reading .answers.three .ans .k{width:calc(var(--u)*7);height:calc(var(--u)*7)}
 .qwrap.reading .subjpill{display:none}
}
@media (orientation:landscape){
 .qwrap.word{top:calc(var(--u)*16);padding-top:calc(var(--u)*5)}
 .keypad{gap:calc(var(--u)*2.4)}
 .qwrap.word .keypad .gbtn{height:calc(var(--u)*11.5);font-size:calc(var(--u)*8)}
 .qwrap.word .wrow{margin-top:calc(var(--u)*3)}
 .qwrap.word .hintbtn{width:calc(var(--u)*15);height:calc(var(--u)*15)}
 .qwrap.word #check{height:calc(var(--u)*13)!important}
}
.mcard{min-height:calc(var(--u)*23)}
.match{row-gap:calc(var(--u)*4);margin-top:calc(var(--u)*5)}
.slots{border:calc(var(--u)*.6) dashed #e2c896;border-radius:calc(var(--u)*3);background:rgba(255,255,255,.45)}
@media (orientation:portrait){.qwrap .bigbtn{position:relative;z-index:7}}
@media (orientation:landscape){.mcard{min-height:calc(var(--u)*14)}.match{row-gap:calc(var(--u)*2.4);margin-top:calc(var(--u)*2)}}
.ttabs .gbtn{white-space:nowrap;font-size:calc(var(--u)*4.1);padding:0 calc(var(--u)*2.6)}
.lb~.note,.pbody>.note{background:rgba(255,253,246,.92);border-radius:calc(var(--u)*3);padding:calc(var(--u)*2.4) calc(var(--u)*3.4);max-width:calc(var(--u)*110);margin:calc(var(--u)*3) auto 0;color:#6a4a2a}
.skill .sb{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.skill .bar{display:block;width:100%}
.parent-fox{position:relative;right:auto;bottom:auto;margin:6px 10px 10px auto;display:block}
.okbox{display:block}
@media (max-width:640px){
 .parent .ph{gap:10px}
 .parent .ph .lg{width:48px;height:48px}
 .parent .kids{margin-left:0;flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px}
 .parent .kid{flex:none;padding:3px 10px 3px 3px;font-size:14px}.parent .kid img{width:28px;height:28px}
 .ptabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.ptabs button{flex:none;font-size:14px;padding:5px 10px}
}
@media (orientation:landscape){.duel .mid{gap:calc(var(--u)*3);font-size:calc(var(--u)*6)}.duel .mid #dq{font-size:calc(var(--u)*6)}}

/* name tags: explicit centring so JS clamp shifts exactly */
.pen .who{left:50%;transform:translateX(-50%)}

/* ===== Bộ đề cả năm: màn tải bài, bản đồ 35 tuần ===== */
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5;padding:calc(var(--u)*6);color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.45)}
.loading .mascot-l{width:calc(var(--u)*42);animation:bob 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.loading h2{font-size:calc(var(--u)*7.5);margin:calc(var(--u)*3) 0 calc(var(--u)*1)}
.loading p{font-size:calc(var(--u)*4.4);margin:0 0 calc(var(--u)*3);font-weight:700}
.loading .gbtn{min-width:calc(var(--u)*50);height:calc(var(--u)*13);font-size:calc(var(--u)*5.5);margin-top:calc(var(--u)*2)}
.loading .dots{display:flex;gap:calc(var(--u)*2)}
.loading .dots i{width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);border-radius:50%;background:#fff;animation:ldot 1s infinite ease-in-out}
.loading .dots i:nth-child(2){animation-delay:.15s}.loading .dots i:nth-child(3){animation-delay:.3s}
@keyframes ldot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(calc(var(--u)*-2.4));opacity:1}}
.map-scr .tabs{top:calc(var(--u)*4)}
.map-scr .tabs .gbtn{font-size:calc(var(--u)*4.6);padding:0 calc(var(--u)*3.2)}
.mappager{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u)*17.5);z-index:7;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1)}
.mappager .row{display:flex;align-items:center;gap:calc(var(--u)*2)}
.mappager .pg{width:calc(var(--u)*10);height:calc(var(--u)*10);border-radius:50%;border:calc(var(--u)*.6) solid #fff;background:linear-gradient(#ffd34d,#f29a00);color:#fff;font-size:calc(var(--u)*7);font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 calc(var(--u)*.8) 0 #b06400,0 3px 8px rgba(0,0,0,.3);text-shadow:0 2px 0 #b06400;padding:0 0 calc(var(--u)*.8)}
.mappager .pg:disabled{filter:grayscale(1);opacity:.45}
.mappager .hk{display:flex;background:rgba(255,255,255,.88);border-radius:calc(var(--u)*5);padding:calc(var(--u)*.8);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.mappager .hk button{border:0;background:none;font-weight:800;font-size:calc(var(--u)*3.8);color:#8a6a4a;padding:calc(var(--u)*1.6) calc(var(--u)*3);border-radius:calc(var(--u)*4);white-space:nowrap}
.mappager .hk button.on{background:linear-gradient(#a56cf0,#7a3cd0);color:#fff;box-shadow:0 calc(var(--u)*.6) 0 #4d1f94}
.mappager .lbl{display:flex;align-items:center;gap:calc(var(--u)*2);font-weight:800;font-size:calc(var(--u)*3.8);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);background:rgba(60,35,10,.45);padding:calc(var(--u)*.8) calc(var(--u)*3);border-radius:calc(var(--u)*4)}
.mappager .dots{display:flex;gap:calc(var(--u)*1.4)}
.mappager .dots i{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.mappager .dots i.sw{box-shadow:0 0 0 calc(var(--u)*.5) #ffcc1f}
.mappager .dots i.on{background:#fff;transform:scale(1.25)}
.mappager .tonow{border:0;background:#fff;color:#c86a00;font-weight:800;font-size:calc(var(--u)*3.2);border-radius:calc(var(--u)*3);padding:calc(var(--u)*.6) calc(var(--u)*2)}
.node.open .top{background:radial-gradient(circle at 40% 25%,#fff3c4,#ffd457 50%,#e9a520 90%);color:#7a3a00}
.node.open .disc::before{background:linear-gradient(#ffd34d,#d38a00)}
.node.open .top{text-shadow:0 calc(var(--u)*.5) 0 #a35a00,0 0 calc(var(--u)*1.2) #a35a00}
.node .now{position:absolute;left:50%;top:calc(var(--u)*-6.5);transform:translateX(-50%);white-space:nowrap;background:linear-gradient(#ff7a6a,#e2392b);color:#fff;font-weight:800;font-size:calc(var(--u)*3.2);padding:calc(var(--u)*.6) calc(var(--u)*2.2);border-radius:calc(var(--u)*3);border:2px solid #fff;z-index:3}
.node .wn{position:absolute;right:8%;top:2%;background:#3b3f47;color:#fff;border:2px solid #fff;border-radius:calc(var(--u)*3);font-weight:800;font-size:calc(var(--u)*3.4);padding:0 calc(var(--u)*1.5);z-index:3}
.popup .topic2{font-size:calc(var(--u)*3.3);color:#9a7a5a;margin:calc(var(--u)*-.4) 0 calc(var(--u)*1);font-weight:600}
@media (orientation:landscape){.map-scr .tabs{top:calc(var(--u)*3)}.mappager{top:calc(var(--u)*16)}.mappager .hk button{font-size:calc(var(--u)*3.6)}}
/* bản đồ: tránh nút quay lại (dọc) và ô xu (ngang) */
@media (orientation:portrait){.map-scr .tabs{left:calc(var(--u)*13);right:calc(var(--u)*1.5);gap:calc(var(--u)*1.5)}.map-scr .tabs .gbtn{font-size:calc(var(--u)*4.3);padding:0 calc(var(--u)*2.6)}}
@media (orientation:landscape){.map-scr .tabs{justify-content:flex-start;left:calc(var(--u)*20);right:auto}}
.mappager .lbl,.mappager .tonow{white-space:nowrap}.mappager .lbl{max-width:96vw}
@media (orientation:portrait){.qwrap.reading~.helper{width:calc(var(--u)*20);right:calc(var(--u)*-3)}}
.icard.wlock>img{filter:grayscale(.6) opacity(.7)}.icard .own.glock{background:#8a6cd6;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
/* v1.2 lời mời thách đấu */
.ibadge{position:absolute;top:-6px;right:-6px;min-width:1.5em;height:1.5em;padding:0 .35em;border-radius:999px;background:linear-gradient(#ff6b5e,#e2241a);color:#fff;font:800 12px/1.5em system-ui,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.3);z-index:3;pointer-events:none;animation:ibpop .4s ease}
.rbtn .ibadge{font-size:calc(var(--u)*3.2)}
.fcard{position:relative}.fcard>.ibadge{top:-4px;right:-4px}
@keyframes ibpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.ichal{display:inline-block;margin-top:3px;background:linear-gradient(#ffd36b,#ff9a1f);color:#7a3500;font-weight:800;font-size:.8em;border:2px solid #fff;border-radius:999px;padding:1px 8px;box-shadow:0 2px 0 #c66a00;animation:ichal 1.2s ease-in-out infinite}
@keyframes ichal{50%{transform:scale(1.06)}}
.invpop{text-align:center}.invpop .invav{width:84px;height:84px;margin:0 auto 4px;border-radius:50%;background:radial-gradient(#fff,#ffe3b0);border:4px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;animation:ichal 1s ease-in-out infinite}.invpop .invav img{width:90%;height:90%;object-fit:contain}
.odwait .owbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,460px);background:linear-gradient(#fffdf6,#f8ecd3);border:5px solid #fff;border-radius:24px;box-shadow:0 8px 0 rgba(150,100,40,.35),0 10px 30px rgba(0,0,0,.3);padding:16px;text-align:center}
.odwait .owvs{display:flex;align-items:center;justify-content:center;gap:12px}.odwait .owvs>div{display:flex;flex-direction:column;align-items:center;width:40%}.odwait .owvs b{font-size:14px}
.odwait .owthem img{width:80px;height:80px;object-fit:contain;animation:ichal 1.4s ease-in-out infinite}
.odwait .vs{font:900 28px system-ui;color:#e2241a;text-shadow:0 2px 0 #fff}
.odwait h2{margin:8px 0 4px;font-size:20px;color:#7a3a00}.odwait .owhint{opacity:.7;font-size:13px;margin:4px 0 10px}
.owdots{display:flex;gap:6px;justify-content:center}.owdots i{width:10px;height:10px;border-radius:50%;background:#f28a2e;animation:owd 1.2s infinite}.owdots i:nth-child(2){animation-delay:.2s}.owdots i:nth-child(3){animation-delay:.4s}
@keyframes owd{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}
.owcd{font:900 96px/1 system-ui;color:#ff7a1a;text-shadow:0 5px 0 #b34a00,0 0 20px #fff;margin:10px 0;animation:ibpop .5s ease}