/*# v8: thế giới, bản đồ, phòng nhân vật, nhận quà */
/* ===== v8: giao diện thế giới, bản đồ, phòng nhân vật, nhận quà ===== */
html[data-theme=boy]{--wc:#1E6FE0;--wc2:#5BB2FF;--wcs:#DDEEFF;--wci:#0B3E8F}
html[data-theme=girl]{--wc:#E8478F;--wc2:#FF9CCB;--wcs:#FFE3F1;--wci:#8E1F57}
.v8full{position:relative;min-height:100vh;min-height:100dvh;margin:0 auto;max-width:560px;overflow:hidden}
.v8bg{position:absolute;inset:0;background-size:cover;background-position:center top;z-index:0}
.v8in{position:relative;z-index:1;padding:14px 14px calc(120px + var(--sab,0px))}
.v8center{display:flex;flex-direction:column;align-items:center;text-align:center}
.v8btnimg{background:none;border:0;padding:0;cursor:pointer;transition:transform .15s}
.v8btnimg:active{transform:scale(.95)}
.v8btnimg img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
/* splash */
.sp-logo{width:86%;max-width:420px;margin-top:6px;animation:v8float 4s ease-in-out infinite}
.sp-slogan{width:92%;max-width:440px;margin-top:-4px}
.sp-owls{width:64%;max-width:330px;margin:4px 0 2px}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:470px}
.sp-gear{position:absolute;top:12px;right:12px;width:58px;z-index:3}
.sp-hint{margin-top:10px;font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.45)}
@keyframes v8float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* pick */
.pk-sign{width:94%;max-width:460px;margin:0 auto 6px;display:block}
.pk-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.pk-tabs .v8btnimg{opacity:.55;filter:saturate(.7)}
.pk-tabs .v8btnimg.on{opacity:1;filter:none;transform:scale(1.03)}
.pk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.pk-card{position:relative;border-radius:22px;padding:6px;background:rgba(255,255,255,.55)}
.pk-card.on{background:#fff;box-shadow:0 0 0 4px var(--wc),0 10px 20px rgba(0,0,0,.2)}
.pk-card.off{opacity:.5;filter:grayscale(.4)}
.pk-card img{width:100%;display:block}
.pk-box{background:#FFF8EA;border:3px solid #E7C98C;border-radius:22px;padding:12px;margin-top:12px;box-shadow:0 6px 0 #D6B06A}
.pk-box h3{margin:0 0 8px;font-size:1.15rem;color:#7A4A12}
.avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.avgrid button{border:0;padding:3px;border-radius:16px;background:transparent;cursor:pointer}
.avgrid button.on{background:var(--wc);box-shadow:0 0 0 2px #fff inset}
.avgrid img{width:100%;display:block;border-radius:13px}
.story{display:flex;gap:10px;align-items:flex-start;background:#fff;border:3px solid var(--wc2);border-radius:20px;padding:10px 12px;margin:10px 0;text-align:left}
.story img{width:62px;flex:none}
.story p{margin:0;font-size:1rem;line-height:1.45}
/* header thế giới */
.wtop{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--wc2),var(--wc));border:3px solid #fff;border-radius:24px;padding:8px 12px;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18);margin-bottom:10px}
.wtop .av{width:52px;height:52px;border-radius:50%;border:3px solid #fff;overflow:hidden;flex:none;background:#fff}
.wtop .av img{width:100%;height:100%;object-fit:cover}
.wtop .tt{flex:1;min-width:0}
.wtop b{display:block;font-size:1.15rem;line-height:1.1;text-shadow:0 2px 0 var(--wci);font-weight:900}
.wtop small{display:block;font-size:.85rem;opacity:.95;font-weight:700}
.wtop .star{background:#fff;color:#7A4A12;border-radius:999px;padding:4px 10px;font-weight:900;display:flex;align-items:center;gap:4px;white-space:nowrap}
.wtop .ib{background:rgba(255,255,255,.25);border:2px solid #fff;color:#fff;border-radius:50%;width:42px;height:42px;font-size:1.3rem;font-weight:900;cursor:pointer;flex:none}
/* bản đồ */
.wmap{position:relative;width:100%;border-radius:26px;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.wmap>img{display:block;width:100%;height:auto}
html[data-theme=boy] .wmap{background:linear-gradient(180deg,#8FD3FF,#CDEBFF 60%,#9FDBFF)}
.zbtn{position:absolute;width:45%;display:flex;gap:6px;align-items:center;text-align:left;background:linear-gradient(180deg,#FFFDF5,#FFE9C2);border:3px solid #C98A3A;border-radius:18px;padding:6px 8px 6px 6px;box-shadow:0 5px 0 #A86A22,0 10px 16px rgba(0,0,0,.25);cursor:pointer;font:inherit;color:#5A3208;animation:v8bob 3.2s ease-in-out infinite}
html[data-theme=girl] .zbtn{background:linear-gradient(180deg,#FFF8FC,#FFD7EA);border-color:#E06AA3;box-shadow:0 5px 0 #B9447F,0 10px 16px rgba(0,0,0,.2);color:#7A1F4E}
.zbtn:active{transform:translateY(3px)}
.zbtn .no{flex:none;width:28px;height:28px;font-size:1rem!important;border-radius:50%;background:linear-gradient(180deg,#FFE680,#FFB000);border:3px solid #fff;display:grid;place-items:center;font-weight:900;font-size:1.15rem;color:#7A4A12;box-shadow:0 2px 0 #B07800}
.zbtn b{display:block;font-size:.9rem;line-height:1.1;font-weight:900}
.zbtn small{display:block;font-size:.72rem;line-height:1.15;font-weight:700;opacity:.9}
.zbtn .pg{height:7px;border-radius:9px;background:rgba(0,0,0,.12);margin-top:4px;overflow:hidden}
.zbtn .pg i{display:block;height:100%;background:linear-gradient(90deg,#5CC98B,#2E9E5B)}
.zbtn.done{border-color:#2E9E5B}
@keyframes v8bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
html.calm .zbtn,html.calm .sp-logo{animation:none}
.v8cta{margin-top:12px}
/* vùng: danh sách bài */
.zhead{position:relative;border-radius:24px;overflow:hidden;border:4px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.2);margin-bottom:10px;background:var(--wcs)}
.zhead .art{height:170px;background-size:cover;background-repeat:no-repeat}
.zhead .ttl{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:linear-gradient(180deg,#B5733A,#8A4E1E);border:3px solid #FFD27A;color:#FFE680;border-radius:16px;padding:6px 18px;text-align:center;white-space:nowrap;box-shadow:0 5px 10px rgba(0,0,0,.3)}
html[data-theme=girl] .zhead .ttl{background:linear-gradient(180deg,#F57CB4,#D2387F);border-color:#fff;color:#fff}
.zhead .ttl b{display:block;font-size:1.35rem;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.zhead .ttl small{display:block;font-size:.85rem;color:#fff;font-weight:800}
.zhead .back{position:absolute;top:10px;left:10px;width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:var(--wc);color:#fff;font-size:1.4rem;font-weight:900;cursor:pointer}
.lrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:linear-gradient(180deg,#FFFDF7,#FFF0D6);border:3px solid #E2B76C;border-radius:18px;padding:8px 10px;margin-bottom:8px;cursor:pointer;font:inherit;color:#4A2E0C;box-shadow:0 4px 0 #C9954A}
html[data-theme=girl] .lrow{background:linear-gradient(180deg,#FFFAFD,#FFE4F1);border-color:#F2A3C8;box-shadow:0 4px 0 #D97BA9;color:#5E1A3D}
.lrow.lock{filter:grayscale(.65);opacity:.75}
.lrow .bn{flex:none;background:var(--wc);color:#fff;font-weight:900;border-radius:12px;padding:6px 8px;font-size:.95rem;min-width:58px;text-align:center}
.lrow .tx{flex:1;min-width:0}
.lrow .tx b{display:block;font-size:1.02rem;line-height:1.2}
.lrow .st{display:flex}
.lrow .st svg{width:20px;height:20px}
.lrow .go{flex:none;width:42px;height:42px;border-radius:50%;background:var(--wc);color:#fff;display:grid;place-items:center;font-size:1.2rem;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.lrow .rw{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;border:2px dashed #E2B76C;display:grid;place-items:center;position:relative}
.lrow .rw img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.lrow .rw.lk img{filter:brightness(.15) opacity(.45)}
.lrow .rw.ok{border-style:solid;border-color:#2E9E5B}
.lrow .rw.ok:after{content:"✓";position:absolute;right:-6px;bottom:-6px;background:#2E9E5B;color:#fff;border-radius:50%;width:20px;height:20px;font-size:.8rem;display:grid;place-items:center;font-weight:900}
.lrow.boss{background:linear-gradient(180deg,#FFE9E9,#FFC9C9);border-color:#E36464;box-shadow:0 4px 0 #B83E3E}
.lrow.boss .bn{background:#E5484D}
/* thanh điều hướng 4 nút */
nav.bar4{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:0 10px calc(8px + var(--sab,0px));pointer-events:none}
nav.bar4 .in{pointer-events:auto;width:100%;max-width:540px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:linear-gradient(180deg,var(--wc2),var(--wc));border:3px solid #fff;border-radius:26px;padding:5px;box-shadow:0 8px 18px rgba(0,0,0,.28)}
nav.bar4 button{border:0;background:transparent;border-radius:20px;padding:4px 2px 6px;color:#fff;font:inherit;font-weight:900;font-size:.82rem;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;text-shadow:0 1px 0 var(--wci)}
nav.bar4 button img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
nav.bar4 button.av img{border-radius:50%;border:2px solid #fff;background:#fff;object-fit:cover}
nav.bar4 button.on{background:#fff;color:var(--wci);text-shadow:none}
/* phòng nhân vật */
.rm-sign{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rm-sign h1{flex:1;margin:0;text-align:center;font-size:1.6rem;font-weight:900;color:#FFE680;background:linear-gradient(180deg,#B5733A,#8A4E1E);border:3px solid #FFD27A;border-radius:18px;padding:4px 10px;text-shadow:0 2px 0 #5A3208;box-shadow:0 5px 10px rgba(0,0,0,.3)}
html[data-theme=girl] .rm-sign h1{background:linear-gradient(180deg,#F57CB4,#D2387F);border-color:#fff;color:#fff;text-shadow:0 2px 0 #8E1F57}
.rm-sign .star{background:#fff;color:#7A4A12;border-radius:999px;padding:6px 10px;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.2);white-space:nowrap}
.rm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--wc);border:3px solid #fff;border-radius:18px;padding:4px;margin-bottom:8px}
.rm-tabs button{border:0;border-radius:13px;background:transparent;color:#fff;font:inherit;font-weight:900;font-size:.9rem;padding:8px 2px;cursor:pointer}
.rm-tabs button.on{background:#fff;color:var(--wci)}
.rm-stage{position:relative;height:min(62vh,430px);border-radius:24px;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 22px rgba(0,0,0,.25);background-size:cover;background-position:center 30%}
html[data-theme=girl] .rm-stage{background-color:#FFD9EC}
.rm-hero{position:absolute;left:50%;bottom:6%;height:80%;transform:translateX(-50%);filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));transition:transform .25s}
.rm-pet{position:absolute;right:5%;bottom:5%;height:34%;filter:drop-shadow(0 8px 6px rgba(0,0,0,.3));animation:v8float 3s ease-in-out infinite}
.rm-eq{position:absolute;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.92);border:3px solid var(--wc2);display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.rm-eq img{width:56px;height:56px;object-fit:contain;border-radius:50%}

.rm-eq span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);background:var(--wc);color:#fff;font-size:.68rem;font-weight:900;border-radius:8px;padding:1px 6px;white-space:nowrap}
.rm-arw{position:absolute;top:44%;width:52px;height:52px;border:0;background:none;padding:0;cursor:pointer;z-index:2}
.rm-arw img{width:100%}
.rm-arw.l{left:6px}.rm-arw.r{right:6px}
.rm-name{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:rgba(255,255,255,.95);border:3px solid var(--wc);color:var(--wci);border-radius:14px;padding:3px 12px;font-weight:900;white-space:nowrap}
.rm-list{background:rgba(255,255,255,.96);border:3px solid var(--wc2);border-radius:22px;padding:10px;margin-top:10px}
.rm-list h3{margin:2px 4px 8px;font-size:1.05rem;color:var(--wci)}
.rm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rm-it{position:relative;border:3px solid var(--wc2);background:var(--wcs);border-radius:16px;padding:4px 4px 6px;font:inherit;font-size:.72rem;font-weight:800;color:var(--wci);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;min-height:104px}
.rm-it img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:11px}
.rm-it.on{border-color:#FFB000;background:#FFF6D6;box-shadow:0 0 0 3px #FFD23F}
.rm-it.on:after{content:"✓";position:absolute;top:-8px;right:-8px;background:#2E9E5B;color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-weight:900;border:2px solid #fff}
.rm-it.lk{background:#EEE;border-color:#CCC;color:#888}
.rm-it.lk img{filter:brightness(0) opacity(.25)}
.rm-it.lk:before{content:"🔒";position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:1.4rem;z-index:1}
.rm-it.nw:before{content:"MỚI";position:absolute;top:-8px;left:-6px;background:#E5484D;color:#fff;font-size:.65rem;border-radius:8px;padding:1px 5px;z-index:1}
html[lang=en] .rm-it.nw:before{content:"NEW"}
.rm-count{font-size:.85rem;color:#666;font-weight:700;margin:-4px 4px 8px}
.rm-act{display:flex;gap:8px;margin-top:10px}
.rm-act .btn{flex:1}
/* nhận quà */
.gift{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(10,20,50,.6);animation:pop .3s}
.gift .gbox{position:relative;width:min(94vw,440px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:30px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:4px solid #FFD23F;box-shadow:0 20px 50px rgba(0,0,0,.5);background-size:cover;background-position:center}
html[data-theme=girl] .gift .gbox{background:radial-gradient(circle at 50% 45%,#FFF6C8 0,#FFC2E0 40%,#C778E8 100%)!important;border-color:#fff}
.gift .gin{padding:16px 16px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.gift .gt{width:min(92%,38vh);margin-top:4px}
.gift .gstage{position:relative;width:min(78%,36vh);margin-top:6px}
.gift .gchest{width:100%;display:block}
.gift .gitem{position:absolute;left:50%;top:-6%;width:52%;transform:translateX(-50%);filter:drop-shadow(0 0 16px #FFE680) drop-shadow(0 8px 8px rgba(0,0,0,.35));animation:v8rise 1s cubic-bezier(.2,1.4,.4,1) both;border-radius:16px}
@keyframes v8rise{from{transform:translate(-50%,60%) scale(.3);opacity:0}to{transform:translate(-50%,0) scale(1);opacity:1}}
.gift .gmsg{background:rgba(255,255,255,.95);border-radius:18px;padding:8px 14px;margin-top:6px;font-weight:800;color:#1F2A44;border:3px solid #FFD23F}
.gift .gmsg b{display:block;font-size:1.3rem;color:#C2410C;text-transform:uppercase}
.gift .gbtns{display:grid;grid-template-columns:1fr;gap:6px;width:80%;margin-top:10px}
.gift .gbtns .v8btnimg{width:100%;max-width:min(100%,46vh)}
.gift .gbtns .v8btnimg img{max-height:15vh;width:auto;max-width:100%;display:block;margin:0 auto}
.gift .glink{background:rgba(255,255,255,.9);border:2px solid #fff;border-radius:14px;padding:8px;font:inherit;font-weight:800;color:#1F2A44;cursor:pointer}
.gift .gcount{position:absolute;top:10px;right:12px;background:#E5484D;color:#fff;font-weight:900;border-radius:12px;padding:2px 8px;font-size:.85rem}

@media (min-width:500px){.zbtn b{font-size:1.05rem}.zbtn small{font-size:.8rem}}


/* v9.0.1: nút ✕ luôn thấy ở góc; bấm nền, ✕, Esc hoặc nút Back đều đóng quà */
.gift .gclose{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:rgba(20,30,60,.82);color:#fff;font:900 1.3rem/1 Nunito,sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.gift .gclose:focus-visible{outline:3px solid #FFD23F}
/* màn hình thấp (cửa sổ máy tính, điện thoại xoay ngang, máy nhỏ): thu nhỏ hình, nút dính đáy khung, khung cuộn được */
@media (max-height:700px){
 .gift .gt{width:min(78%,22vh)}
 .gift .gstage{width:min(62%,30vh)}
 .gift .gin{padding:8px 12px 0}
 .gift .gmsg{padding:5px 10px;margin-top:4px}
 .gift .gmsg b{font-size:1.1rem}
 .gift .gbtns{position:sticky;bottom:0;margin-top:6px;padding:8px 0 10px;width:100%;background:linear-gradient(rgba(10,20,50,0),rgba(10,20,50,.88) 28%)}
 .gift .gbtns .v8btnimg,.gift .gbtns .glink{width:80%;margin:0 auto}
 .gift .gbtns .v8btnimg img{max-height:11vh}
}