/* VuiSpace — Design System (mục 16A) */
:root{
  --primary:#7C5CFF; --primary-600:#6847F5; --primary-50:#F1EDFF;
  --secondary:#63C7FF; --secondary-50:#E8F7FF;
  --accent:#FFD45A; --accent-600:#F2B51D;
  --success:#72D99A; --warning:#FFB85C; --danger:#FF7185;
  --ink:#2B2552; --ink-2:#5B5684; --ink-3:#8D89AE; --line:rgba(124,92,255,.14);
  --card:rgba(255,255,255,.86); --card-solid:#fff; --glass:rgba(255,255,255,.62);
  --bg-grad:linear-gradient(160deg,#E9F6FF 0%,#F3EEFF 45%,#FDF3FF 100%);
  --r-card:20px; --r-btn:14px; --r-hero:28px; --r-pill:999px;
  --sh-soft:0 10px 30px -12px rgba(92,70,200,.28),0 2px 6px rgba(92,70,200,.06);
  --sh-pop:0 24px 60px -18px rgba(92,70,200,.45);
  --font:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;
  --sidebar:248px; --topbar:68px; --bottomnav:68px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;background:#F5F0FF}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg-grad) fixed;min-height:100vh;font-size:15px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,3vw,2.2rem)} h2{font-size:1.35rem} h3{font-size:1.1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--ink-2)} .small{font-size:.84rem} .tiny{font-size:.74rem} .center{text-align:center}
.row{display:flex;align-items:center;gap:10px} .row.wrap{flex-wrap:wrap} .grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- App shell ---------- */
.app{min-height:100vh}
.sidebar{position:fixed;inset:14px auto 14px 14px;width:var(--sidebar);border-radius:26px;padding:18px 14px;display:flex;flex-direction:column;gap:6px;z-index:30;
  background:linear-gradient(180deg,rgba(84,62,190,.92),rgba(60,44,150,.94));color:#fff;box-shadow:var(--sh-pop);overflow-y:auto;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;color:#fff}
.logo-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#FFB86B,#FF7AA8);display:grid;place-items:center;box-shadow:0 6px 16px rgba(255,122,168,.45)}
.logo-mark svg{width:28px;height:28px}
.logo-text{font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:.95}
.logo-text small{display:block;font-size:.8rem;letter-spacing:.25em;color:#FFE38A;text-align:center}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:rgba(255,255,255,.88);font-weight:600;font-size:.95rem;transition:background .2s,transform .15s}
.nav-item .ni{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.nav-item .ni .ic{width:18px;height:18px}
.nav-item:hover{background:rgba(255,255,255,.1)}
.nav-item.active{background:linear-gradient(90deg,#FFE7F6,#F3E6FF);color:var(--primary-600);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.nav-item.active .ni{background:linear-gradient(135deg,var(--primary),#A68BFF);color:#fff}
.nav-sep{height:1px;background:rgba(255,255,255,.14);margin:8px 6px}
.install-cta{margin-top:auto;padding:12px;border-radius:16px;background:linear-gradient(135deg,#FF8BD0,#B07CFF);color:#fff;text-align:center;font-weight:700;box-shadow:0 10px 24px rgba(255,120,200,.4);border:0;cursor:pointer}
.install-cta small{display:block;font-weight:500;opacity:.9;font-size:.75rem}

.topbar{position:sticky;top:0;z-index:20;height:var(--topbar);display:flex;align-items:center;gap:12px;padding:10px 22px 10px calc(var(--sidebar) + 42px);
  background:linear-gradient(180deg,rgba(240,246,255,.85),rgba(240,246,255,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.85);padding:0 16px 0 44px;outline:none;transition:box-shadow .2s}
.search input:focus{box-shadow:0 0 0 4px rgba(124,92,255,.15)}
.search .ic{position:absolute;left:15px;top:12px;color:var(--ink-3)}
.search-pop{position:absolute;top:50px;left:0;right:0;background:#fff;border-radius:18px;box-shadow:var(--sh-pop);padding:8px;max-height:60vh;overflow:auto;display:none}
.search-pop.open{display:block}
.search-pop a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;color:var(--ink)}
.search-pop a:hover{background:var(--primary-50)}
.search-pop h6{margin:6px 10px 2px;font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.tb-spacer{flex:1}
.icon-btn{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:transform .15s}
.icon-btn:active{transform:scale(.94)}
.dot{position:absolute;top:6px;right:6px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.wallet-chip{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);border:1px solid var(--line);font-weight:800;font-family:var(--font-display);font-size:1.02rem}
.wallet-chip .coin{width:28px;height:28px}
.wallet-chip .plus{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.wallet-chip .plus .ic{width:16px;height:16px}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#FFF4C2,#FFD45A 45%,#E6A100);box-shadow:inset 0 -2px 0 rgba(160,100,0,.35),0 2px 6px rgba(230,161,0,.35);position:relative}
.coin::after{content:"";position:absolute;inset:26%;border-radius:50%;border:2px solid rgba(255,255,255,.65)}
.gem{display:inline-block;width:18px;height:18px;background:linear-gradient(135deg,#9BE7FF,#3FA9FF);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%)}
.profile-btn{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);border:1px solid var(--line);cursor:pointer}
.profile-btn b{display:block;font-size:.9rem;line-height:1.1}
.profile-btn span{font-size:.75rem;color:var(--ink-2)}
.menu-pop{position:absolute;right:22px;top:64px;width:240px;background:#fff;border-radius:18px;box-shadow:var(--sh-pop);padding:8px;display:none;z-index:40}
.menu-pop.open{display:block}
.menu-pop a,.menu-pop button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}
.menu-pop a:hover,.menu-pop button:hover{background:var(--primary-50)}
.tb-mobile{display:none}

.content{padding:8px 22px 40px calc(var(--sidebar) + 42px);max-width:calc(1440px + var(--sidebar) + 64px);margin:0 auto;animation:pageIn .22s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bottomnav{display:none}

/* ---------- Cards & primitives ---------- */
.card{background:var(--card);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:18px;position:relative}
.card.glass{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card.hover{transition:transform .2s var(--ease),box-shadow .2s}
@media (hover:hover){.card.hover:hover{transform:translateY(-3px);box-shadow:var(--sh-pop)}}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-h h3{margin:0;display:flex;align-items:center;gap:8px}
.link-more{font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:4px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn);border:0;cursor:pointer;font-weight:700;font-size:.95rem;
  background:linear-gradient(135deg,var(--primary),#9B82FF);color:#fff;box-shadow:0 8px 18px -6px rgba(124,92,255,.6);transition:transform .12s,filter .2s,box-shadow .2s;white-space:nowrap;touch-action:manipulation;user-select:none}
.btn:active{transform:scale(.96)}
.btn:disabled,.btn.is-loading{opacity:.6;cursor:not-allowed}
.btn.is-loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.gold{background:linear-gradient(135deg,#FFE27A,#FFC53D);color:#6B4300;box-shadow:0 8px 18px -6px rgba(242,181,29,.7)}
.btn.sky{background:linear-gradient(135deg,#7FD6FF,#4DB4FF);box-shadow:0 8px 18px -6px rgba(77,180,255,.6)}
.btn.ghost{background:rgba(255,255,255,.9);color:var(--primary-600);box-shadow:none;border:1px solid var(--line)}
.btn.soft{background:var(--primary-50);color:var(--primary-600);box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#FF8FA0,var(--danger));box-shadow:0 8px 18px -6px rgba(255,113,133,.6)}
.btn.success{background:linear-gradient(135deg,#8FE6B1,#4CC77E)}
.btn.sm{min-height:36px;padding:0 12px;font-size:.84rem;border-radius:11px}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;background:var(--primary-50);color:var(--primary-600);white-space:nowrap}
.chip.gold{background:#FFF5D1;color:#9A6A00} .chip.sky{background:var(--secondary-50);color:#1E86C2}
.chip.ok{background:#E3F8EB;color:#22844A} .chip.warn{background:#FFF0DC;color:#B26A00} .chip.bad{background:#FFE7EB;color:#C42F48}
.chip.gray{background:#EEEEF5;color:#6A6790}
.reward{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:#9A6A00;font-size:.86rem}
.reward .coin{width:16px;height:16px}
.xp-tag{font-weight:800;color:var(--primary);font-size:.8rem}
.input,.textarea,.select{width:100%;min-height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:10px 14px;outline:none;transition:border .2s,box-shadow .2s}
.textarea{min-height:96px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
label.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.88rem}
label.field .hint{font-weight:400;color:var(--ink-3);font-size:.78rem}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:20px;background:#D9D6EC;transition:.2s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s}
.switch input:checked+span{background:var(--primary)} .switch input:checked+span::before{transform:translateX(20px)}
.tabs{display:flex;gap:6px;padding:5px;background:rgba(255,255,255,.7);border-radius:16px;border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;min-height:40px;padding:0 14px;border-radius:12px;border:0;background:none;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;font-size:.9rem}
.tab.active{background:linear-gradient(135deg,var(--primary),#9B82FF);color:#fff;box-shadow:0 6px 14px -6px rgba(124,92,255,.7)}
.tab .count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:rgba(255,255,255,.3);font-size:.72rem;margin-left:6px;padding:0 5px}
.tab:not(.active) .count{background:var(--primary-50);color:var(--primary)}
.progress{height:12px;border-radius:10px;background:#E9E5FA;overflow:hidden;position:relative}
.progress>i{position:absolute;inset:0 auto 0 0;border-radius:10px;background:linear-gradient(90deg,#9B82FF,var(--primary));transition:width .8s var(--ease)}
.progress.gold>i{background:linear-gradient(90deg,#FFE27A,#F2B51D)} .progress.sky>i{background:linear-gradient(90deg,#9BE2FF,#3FA9FF)}
.progress.green>i{background:linear-gradient(90deg,#A9F0C6,#4CC77E)} .progress.pink>i{background:linear-gradient(90deg,#FFC0D6,#FF7AA8)}
.page-head{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.page-head h1{margin:0;font-size:1.6rem}
.back-btn{width:42px;height:42px;border-radius:14px;border:0;background:#fff;box-shadow:var(--sh-soft);display:grid;place-items:center;cursor:pointer;color:var(--primary)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.section-title h2{margin:0;font-size:1.2rem}

/* avatar + frame overlay (Upgrade Spec mục 9) */
.avatar{--s:44px;position:relative;display:inline-block;vertical-align:middle;width:var(--s);height:var(--s);flex:none}
.avatar .avatar-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#F3EEFF;display:block}
.avatar:not(.has-frame) .avatar-photo{box-shadow:0 0 0 2px #fff,0 3px 10px rgba(90,60,200,.25)}
.avatar{--fw:calc(var(--s) * min(var(--fit,1.707),1.707))}
.avatar.has-frame .avatar-photo{position:absolute;left:50%;top:50%;width:calc(var(--fw) / var(--fit,1.707));height:calc(var(--fw) / var(--fit,1.707));transform:translate(-50%,-50%)}
.avatar .avatar-frame{position:absolute;left:50%;top:50%;width:var(--fw);height:var(--fw);max-width:none;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.avatar.fa-glow .avatar-frame{filter:drop-shadow(0 0 calc(var(--s) * .08) rgba(255,212,90,.9))}
.avatar.fa-spin .avatar-frame{animation:frameSpin 14s linear infinite}
.avatar.fa-float .avatar-frame{animation:frameFloat 3s ease-in-out infinite}
@keyframes frameSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes frameFloat{50%{transform:translate(-50%,-54%)}}
.avatar .lv{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),#A68BFF);color:#fff;font-size:.62rem;font-weight:800;padding:1px 6px;border-radius:8px;border:2px solid #fff;white-space:nowrap;z-index:2}
.avatar.has-frame .lv{bottom:calc(var(--s) * -0.28)}
.title-img{display:inline-block;vertical-align:middle;width:auto;max-width:100%;filter:drop-shadow(0 2px 4px rgba(60,30,140,.18))}
.title-img.ta-shine{animation:titleShine 3s ease-in-out infinite}
@keyframes titleShine{50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.9)) brightness(1.08)}}
.title-chip{font-size:.74rem;font-weight:800;padding:2px 9px;border-radius:8px;color:#fff;display:inline-block}
/* ---------- v6: FX khung theo rarity (Asset Deployment Spec 4.1) ---------- */
.avatar.fr-rare.fa-glowfx .avatar-frame{filter:drop-shadow(0 0 calc(var(--s) * .05) rgba(176,150,255,.75))}
.avatar.fr-epic.fa-glowfx .avatar-frame{filter:drop-shadow(0 0 calc(var(--s) * .06) rgba(200,120,255,.8))}
.avatar.fr-legendary .avatar-frame{animation:framePulse 3.2s ease-in-out infinite}
.avatar.fr-limited.fa-glowfx .avatar-frame{filter:drop-shadow(0 0 calc(var(--s) * .06) rgba(255,190,90,.8))}
@keyframes framePulse{0%,100%{filter:drop-shadow(0 0 calc(var(--s) * .04) rgba(255,214,110,.7))}50%{filter:drop-shadow(0 0 calc(var(--s) * .13) rgba(255,214,110,1)) brightness(1.06)}}
.fa-sparks{position:absolute;inset:0;pointer-events:none;z-index:2}
.fa-sparks b{position:absolute;left:50%;top:50%;width:calc(var(--s) * .11);height:calc(var(--s) * .11);margin:calc(var(--s) * -.055);background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #fff);opacity:0;animation:spark 2.6s ease-in-out infinite}
.fa-sparks b:nth-child(1){transform:rotate(20deg) translateY(calc(var(--fw) * -.4))}
.fa-sparks b:nth-child(2){transform:rotate(95deg) translateY(calc(var(--fw) * -.43));animation-delay:.45s}
.fa-sparks b:nth-child(3){transform:rotate(160deg) translateY(calc(var(--fw) * -.38));animation-delay:.9s}
.fa-sparks b:nth-child(4){transform:rotate(215deg) translateY(calc(var(--fw) * -.44));animation-delay:1.35s}
.fa-sparks b:nth-child(5){transform:rotate(280deg) translateY(calc(var(--fw) * -.4));animation-delay:1.8s}
.fa-sparks b:nth-child(6){transform:rotate(335deg) translateY(calc(var(--fw) * -.36));animation-delay:2.2s}
.avatar.fr-epic .fa-sparks b:nth-child(n+5){display:none}
.avatar.fr-epic .fa-sparks b{background:#F4E6FF}
.avatar.fr-legendary .fa-sparks b{background:#FFF3C4;animation-duration:2s}
.avatar.fr-limited .fa-sparks b{background:#FFE2B0}
.avatar.fr-limited .fa-sparks b:nth-child(n+5){display:none}
@keyframes spark{0%,100%{opacity:0}45%{opacity:1}60%{opacity:.85}}
/* ---------- v6: Title plate = ảnh nền + chữ HTML (spec 6) ---------- */
.title-plate{--h:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--h);max-width:100%;vertical-align:middle;flex:none}
.title-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 2px 4px rgba(60,30,140,.16))}
.title-plate .tp-text{position:relative;z-index:1;max-width:74%;padding:0 2px;font-weight:900;font-size:calc(var(--h) * .36);line-height:1;color:var(--tc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;text-shadow:0 1px 0 #fff,0 0 4px rgba(255,255,255,.9)}
.title-plate.tr-legendary .tp-text,.title-plate.tr-limited .tp-text{background:linear-gradient(90deg,var(--tc),#7A3A00 50%,var(--tc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 #fff)}
.title-plate.ta-shine::after{content:"";position:absolute;inset:8% 6%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:40% 100%;background-position:-60% 0;mix-blend-mode:soft-light;animation:plateShine 3.6s ease-in-out infinite;border-radius:40px}
.title-plate.tr-rare.ta-shine::after{opacity:.6}
.title-plate.ta-glow img{filter:drop-shadow(0 0 5px rgba(190,140,255,.7))}
.title-plate.tr-legendary.ta-glow img{filter:drop-shadow(0 0 7px rgba(255,200,90,.9))}
.title-plate.tr-limited.ta-glow img{filter:drop-shadow(0 0 7px rgba(255,140,90,.85))}
@keyframes plateShine{0%,30%{background-position:-60% 0}70%,100%{background-position:160% 0}}
.badge-fam{margin-bottom:14px}.badge-fam .bf-h{display:flex;align-items:center;gap:10px}.badge-fam h3{margin:0}
.badge-grid.bf-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:640px){.badge-grid.bf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.bf-grid .badge-card{padding:8px 2px;border-radius:12px}.bf-grid .badge-card img{width:44px;height:44px}.bf-grid .badge-card b{font-size:.62rem}.bf-grid .badge-card .rar{display:none}.bf-grid .badge-card.locked::after{font-size:.6rem;top:3px;right:4px}}
@media (prefers-reduced-motion:reduce){.avatar .avatar-frame,.title-img,.title-plate::after,.fa-sparks b{animation:none!important}.fa-sparks{display:none}}

/* ---------- Home ---------- */
.home-top{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:18px}
.hero{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:400px;box-shadow:var(--sh-pop);background:#BFE3FF}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,rgba(43,37,82,.55),transparent);pointer-events:none}
.hero-body{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:#fff}
.hero-greet{text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-greet .season{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:4px 12px;border-radius:20px;font-weight:700;font-size:.8rem;margin-bottom:8px}
.hero-greet h2{font-size:1.6rem;margin:0}
.hero-greet p{margin:2px 0 0;opacity:.95}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.sparkles i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.8);opacity:0;animation:twinkle 4s infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
.quest-panel{display:flex;flex-direction:column;background:linear-gradient(180deg,#FFFDF6,#FFF6E0);border:2px solid #F6DFA6;border-radius:var(--r-hero);padding:18px}
.quest-panel .card-h h3{font-size:1.15rem}
.qp-count{font-family:var(--font-display);font-weight:800;color:#B07A00;display:flex;align-items:center;gap:6px}
.quest-mini{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 4px 14px -8px rgba(160,110,0,.35);margin-bottom:10px}
.quest-mini .grow b{display:block;font-size:.9rem;line-height:1.25}
.qicon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff}
.qicon .ic{width:22px;height:22px}
.q-facebook{background:linear-gradient(135deg,#5AA0FF,#1877F2)} .q-youtube{background:linear-gradient(135deg,#FF7A7A,#FF2D2D)}
.q-tiktok{background:linear-gradient(135deg,#3A3A3A,#000)} .q-weplay{background:linear-gradient(135deg,#7FE0FF,#2EB6F0)}
.q-arcade{background:linear-gradient(135deg,#B28CFF,#7046F2)} .q-cavoang{background:linear-gradient(135deg,#FF9BC8,#FF6FA3)}
.q-event{background:linear-gradient(135deg,#7FE0FF,#2EB6F0)} .q-default{background:linear-gradient(135deg,#9B82FF,#7C5CFF)}
.quick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:18px 0}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:20px;background:var(--card);box-shadow:var(--sh-soft);font-weight:700;font-size:.86rem;color:var(--ink);transition:transform .2s var(--ease)}
@media (hover:hover){.qa:hover{transform:translateY(-3px)}}
.qa .qai{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 16px -8px currentColor}
.qa .qai .ic{width:26px;height:26px}
.c-violet{background:linear-gradient(135deg,#A68BFF,#7C5CFF)} .c-gold{background:linear-gradient(135deg,#FFE27A,#F2A91D)} .c-pink{background:linear-gradient(135deg,#FFB0D2,#FF6FA3)}
.c-green{background:linear-gradient(135deg,#9BE8B9,#3FBF73)} .c-sky{background:linear-gradient(135deg,#9BE2FF,#3FA9FF)} .c-red{background:linear-gradient(135deg,#FF9F9F,#FF5C6C)} .c-teal{background:linear-gradient(135deg,#8FF0E0,#22B8A5)}
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.level-card{display:flex;gap:16px;align-items:center}
.level-badge{width:96px;flex:none;filter:drop-shadow(0 8px 14px rgba(124,92,255,.35))}
.level-badge-wrap{position:relative;flex:none}
.level-badge-wrap{display:inline-block;filter:drop-shadow(0 10px 16px rgba(124,92,255,.35))}
.level-badge-wrap .lvnum{position:absolute;left:0;right:4%;top:0;bottom:4%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(60,30,160,.7);line-height:1}
.event-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.event-item:last-child{border:0}
.ev-date{width:52px;height:56px;border-radius:14px;background:linear-gradient(180deg,#FF8FB8,#FF6FA3);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;flex:none}
.ev-date small{font-size:.65rem;font-weight:700;opacity:.9}
.ev-date b{font-size:1.3rem;font-family:var(--font-display)}
.countdown{font-variant-numeric:tabular-nums;font-weight:800;color:var(--primary)}
.mini-lb{display:flex;align-items:center;gap:10px;padding:8px 0}
.rank-n{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:800;background:#F1EDFF;color:var(--primary);flex:none;font-size:.85rem}
.rank-1{background:linear-gradient(135deg,#FFE27A,#F2B51D);color:#6B4300}.rank-2{background:linear-gradient(135deg,#EEF1F7,#B8C0D4);color:#3D4660}.rank-3{background:linear-gradient(135deg,#FFD3B0,#E08C4F);color:#5C2E0C}
.pet-mini{display:flex;gap:14px;align-items:center}
.pet-mini img{width:96px;height:96px;object-fit:cover;border-radius:20px}
.push-card{background:linear-gradient(135deg,#F3EEFF,#E6F6FF);border:2px dashed rgba(124,92,255,.35)}
.push-card ul{list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;font-weight:600;font-size:.88rem}
.push-card li::before{content:"✓ ";color:var(--success);font-weight:800}

/* ---------- Tasks ---------- */
.task-card{display:flex;align-items:center;gap:14px;padding:14px 16px}
.task-card .qicon{width:48px;height:48px;border-radius:15px}
.task-card .t-main{flex:1;min-width:0}
.task-card .t-main b{display:block;font-size:.98rem;line-height:1.3}
.task-card .t-desc{color:var(--ink-2);font-size:.84rem;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.task-card .t-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.task-card .t-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.code-card{background:linear-gradient(135deg,#E3F6FF,#F1EDFF);border:2px solid #CFEAFF}
.code-input{display:flex;gap:10px}
.code-input .input{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-family:var(--font-display);font-size:1.1rem}
.uploader{border:2px dashed rgba(124,92,255,.35);border-radius:18px;padding:18px;text-align:center;background:#FBFAFF;cursor:pointer;transition:background .2s}
.uploader.drag{background:var(--primary-50)}
.uploader .preview{max-height:220px;margin:0 auto 10px;border-radius:12px}
.status-box{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px}
.status-box.ok{background:#E9FAF0} .status-box.warn{background:#FFF4E5} .status-box.bad{background:#FFEDF0} .status-box.info{background:var(--secondary-50)}

/* ---------- Achievements / Leaderboard ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.badge-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px;border-radius:18px;background:#fff;border:1px solid var(--line);cursor:pointer;position:relative}
.badge-card img{width:72px;height:72px;object-fit:contain}
.badge-card b{font-size:.84rem;line-height:1.2}
.badge-card.locked img{filter:grayscale(1);opacity:.35}
.badge-card.locked::after{content:"🔒";position:absolute;top:8px;right:10px;font-size:.9rem}
.ms-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.ms-row:last-child{border:0}
.ms-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-50);font-size:1.2rem;flex:none}
.ms-row.done .ms-icon{background:#E3F8EB}
.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.frame-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:18px;background:#fff;border:2px solid transparent;cursor:pointer;font-weight:700;font-size:.82rem;text-align:center}
.frame-opt.equipped{border-color:var(--primary);background:var(--primary-50)}
.frame-opt.locked{opacity:.5}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:12px;padding:10px 4px 0}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.pod .avatar{--s:72px}
.pod.first .avatar{--s:96px}
.pod .crown{font-size:1.8rem;margin-bottom:-12px;z-index:1;filter:drop-shadow(0 4px 6px rgba(242,181,29,.5))}
.pod-stand{width:100%;border-radius:18px 18px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 4px;color:#fff;font-family:var(--font-display);font-weight:800}
.pod.first .pod-stand{height:120px;background:linear-gradient(180deg,#FFD45A,#F2A91D)}
.pod.second .pod-stand{height:92px;background:linear-gradient(180deg,#C9D2E6,#8E9AB8)}
.pod.third .pod-stand{height:76px;background:linear-gradient(180deg,#FFC59B,#D9824A)}
.pod-stand big{font-size:2rem;line-height:1}
.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:#fff;margin-bottom:8px;border:1px solid var(--line)}
.lb-row.me{background:linear-gradient(90deg,#F1EDFF,#E8F7FF);border:2px solid var(--primary)}
.lb-me-sticky{position:sticky;bottom:calc(var(--bottomnav) + 10px);z-index:5}
@media(min-width:1024px){.lb-me-sticky{bottom:12px}}

/* ---------- World ---------- */
.world-map{position:relative;border-radius:var(--r-hero);overflow:hidden;box-shadow:var(--sh-pop);aspect-ratio:591/425;background:#BFE3FF}
.world-map>img{width:100%;height:100%;object-fit:cover}
.clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.clouds span{position:absolute;width:220px;height:70px;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));border-radius:50%;animation:drift 38s linear infinite;opacity:.85}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.island{position:absolute;transform:translate(-50%,-50%);width:20%;aspect-ratio:1.4;border-radius:40%;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.island:focus-visible{outline:3px solid #fff}
.island .tap{position:absolute;inset:0;border-radius:40%;transition:background .2s,box-shadow .2s}
@media (hover:hover){.island:hover .tap{background:rgba(255,255,255,.16);box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 40px rgba(255,255,255,.6)}}
.island .pin{position:relative;transform:translateY(60%);background:rgba(43,37,82,.78);color:#fff;font-weight:700;font-size:.72rem;padding:3px 9px;border-radius:12px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.island.locked .tap{background:rgba(40,30,80,.45);backdrop-filter:grayscale(1)}
.island.locked .pin{background:#5B5684}
.pet-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
.pet-stage{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:360px;background:linear-gradient(180deg,#CDEBFF,#F9E8FF);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-soft)}
.pet-stage img.pet-art.small{width:min(52%,220px)}
.pet-stage img.pet-art{width:min(78%,420px);aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 20px 40px -20px rgba(70,40,160,.5);animation:idle 3.2s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.015)}}
.pet-stage .aura{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(30px);opacity:.65}
.stage-1 .aura{background:#BFF2D1} .stage-2 .aura{background:#9BDDFF} .stage-3 .aura{background:#FFD45A}
.pet-name-card{position:absolute;top:16px;right:16px;background:rgba(43,37,82,.72);color:#fff;border-radius:16px;padding:10px 16px;text-align:center;backdrop-filter:blur(6px)}
.pet-name-card b{font-family:var(--font-display);font-size:1.2rem;display:block}
.stars{color:#FFD45A;letter-spacing:2px}
.pet-actions{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px}
.pet-actions button{width:64px;padding:8px 4px;border-radius:16px;border:0;background:rgba(255,255,255,.92);box-shadow:var(--sh-soft);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;cursor:pointer;color:var(--ink)}
.pet-actions button .ic{color:var(--primary)}
.pet-carousel{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory}
.pet-thumb{flex:none;width:76px;height:76px;border-radius:20px;border:3px solid #fff;box-shadow:var(--sh-soft);overflow:hidden;cursor:pointer;scroll-snap-align:start;background:#fff;position:relative}
.pet-thumb img{width:100%;height:100%;object-fit:cover}
.pet-thumb.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,255,.3)}
.rarity-common{color:#3FBF73} .rarity-rare{color:#3FA9FF} .rarity-epic{color:#9B5CFF} .rarity-legendary{color:#E2A400}
.egg{width:64px;height:80px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;position:relative;box-shadow:inset -8px -10px 0 rgba(0,0,0,.08),0 10px 18px -10px rgba(0,0,0,.4);margin:0 auto}
.egg::after{content:"";position:absolute;width:14px;height:20px;border-radius:50%;background:rgba(255,255,255,.7);top:14px;left:14px;transform:rotate(20deg)}
.egg.hatching{animation:wobble 1.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.stat-bar{display:grid;grid-template-columns:70px 1fr 36px;gap:8px;align-items:center;font-size:.82rem;font-weight:700}
.garden-scene{position:relative;border-radius:var(--r-hero);overflow:hidden;box-shadow:var(--sh-pop);aspect-ratio:2/1;max-height:340px;width:100%}
.garden-scene>img{width:100%;height:100%;object-fit:cover}
.garden-scene .decor{position:absolute;font-size:1.8rem;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.plots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;margin:0 auto}
.plot{position:relative;aspect-ratio:1.25;border-radius:20px;border:0;cursor:pointer;background:linear-gradient(180deg,#B9825A,#8E5B38);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 10px 18px -12px rgba(80,40,10,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:8px;overflow:hidden}
.plot::before{content:"";position:absolute;inset:10px;border-radius:14px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 8px,transparent 8px 16px)}
.plot .plant{position:relative;font-size:2.4rem;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.plot .plant.s1{font-size:1.4rem}.plot .plant.s2{font-size:2rem}
.plot.ready{box-shadow:0 0 0 3px var(--accent),0 0 24px rgba(255,212,90,.8)}
.plot.ready .plant{animation:idle 1.6s ease-in-out infinite}
.plot .ptime{position:relative;font-size:.72rem;font-weight:800;background:rgba(0,0,0,.35);padding:2px 8px;border-radius:10px;margin-top:6px}
.plot.empty .plant{opacity:.9}.plot.empty .plant .ic{width:30px;height:30px;stroke:#fff;stroke-width:3}
.plot.lockedplot{background:linear-gradient(180deg,#CFC8DC,#A79FBD)}
.plot.selected{outline:3px solid var(--primary);outline-offset:2px}
.action-bar{position:sticky;bottom:calc(var(--bottomnav) + 10px);z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:22px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:var(--sh-pop);margin-top:16px}
@media(min-width:1024px){.action-bar{bottom:14px}}
.action-bar button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:60px;border-radius:16px;border:0;background:none;font-weight:700;font-size:.8rem;cursor:pointer;color:var(--ink)}
.action-bar button .ab{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem}
.action-bar button.active{background:var(--primary-50);color:var(--primary-600)}

/* ---------- Shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.shop-card{display:flex;flex-direction:column;padding:12px;text-align:center;gap:6px}
.shop-card .thumb{aspect-ratio:1;border-radius:16px;background:linear-gradient(180deg,#F7F4FF,#EAF6FF);display:grid;place-items:center;overflow:hidden;position:relative}
.shop-card .thumb img{width:80%;height:80%;object-fit:contain}
.shop-card .thumb .emo{font-size:4rem}
.shop-card.premium{background:linear-gradient(180deg,#FFFDF5,#FFF3D6);border:2px solid #F6DFA6}
.shop-card.premium .thumb{background:radial-gradient(circle at 50% 40%,#FFF,#FFE9B0)}
.shop-card .ribbon{position:absolute;top:10px;left:10px}
.shop-card b{font-size:1rem}
.price{display:inline-flex;align-items:center;gap:6px;justify-content:center;font-weight:800;font-family:var(--font-display);color:#9A6A00;font-size:1.05rem}
.ticket{border-radius:22px;background:linear-gradient(135deg,#7C5CFF,#63C7FF);color:#fff;padding:22px;text-align:center;position:relative;overflow:hidden}
.ticket .tcode{white-space:nowrap;font-family:var(--font-display);font-size:clamp(1.2rem,6vw,1.9rem);letter-spacing:.12em;font-weight:800;background:rgba(255,255,255,.2);border-radius:14px;padding:6px 14px;display:inline-block;margin:8px 0;user-select:all}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:28px;height:28px;border-radius:50%;background:var(--card-solid);transform:translateY(-50%)}
.ticket::before{left:-14px}.ticket::after{right:-14px}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;border-radius:2px;background:linear-gradient(var(--primary),var(--secondary))}
.tl-item{position:relative;padding:4px 0 16px}
.tl-item::before{content:"";position:absolute;left:-24px;top:8px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--primary)}
.status-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.status-steps .st{padding:6px 12px;border-radius:12px;background:#EEEEF5;color:#6A6790;font-weight:700;font-size:.78rem}
.status-steps .st.on{background:var(--primary);color:#fff}

/* ---------- Community & Profile ---------- */
.post{display:flex;flex-direction:column;gap:10px}
.post-h{display:flex;gap:10px;align-items:center}
.post-content{white-space:pre-wrap;word-wrap:break-word}
.reacts{display:flex;gap:6px;flex-wrap:wrap}
.react-btn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 10px;cursor:pointer;font-size:.9rem;min-height:34px}
.react-btn.mine{background:var(--primary-50);border-color:var(--primary)}
.id-card{position:relative;border-radius:var(--r-hero);overflow:hidden;background:linear-gradient(135deg,#7C5CFF,#63C7FF 60%,#FFC0E0);color:#fff;padding:26px;box-shadow:var(--sh-pop)}
.id-card::after{content:"";position:absolute;inset:0;background:url("img/hero.webp") center/cover;opacity:.12;mix-blend-mode:screen;pointer-events:none}
.id-card>*{position:relative;z-index:1}
.id-card .avatar{--s:120px}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{background:rgba(255,255,255,.18);border-radius:16px;padding:10px;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:1.4rem;line-height:1.1}
.stat span{font-size:.75rem;opacity:.9}
.stat.light{background:#fff;box-shadow:var(--sh-soft);color:var(--ink)}
.stat.light b{color:var(--primary)}
.council-hero{border-radius:var(--r-hero);padding:28px;color:#fff;background:radial-gradient(circle at 80% 0%,rgba(255,212,90,.35),transparent 50%),linear-gradient(135deg,#2D1F6E,#5B3BD6 60%,#7C5CFF);box-shadow:var(--sh-pop);position:relative;overflow:hidden}
.council-hero h1{color:#FFE38A;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.council-hero .crest{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:6rem;opacity:.25}
.admin-card{text-align:center;padding:22px 16px;overflow:hidden}
.admin-card .avatar{display:block;margin:14px auto 22px}
.admin-card::before{content:"";position:absolute;inset:0 0 auto 0;height:64px;background:var(--role-grad,linear-gradient(135deg,#A68BFF,#7C5CFF));opacity:.9}
.admin-card>*{position:relative}
.role-owner{--role-grad:linear-gradient(135deg,#FFE27A,#F2A91D)} .role-super_admin{--role-grad:linear-gradient(135deg,#B28CFF,#6847F5)}
.role-mission_admin{--role-grad:linear-gradient(135deg,#9BE2FF,#3FA9FF)} .role-reward_admin{--role-grad:linear-gradient(135deg,#FFB0D2,#FF6FA3)}
.role-event_admin{--role-grad:linear-gradient(135deg,#8FF0E0,#22B8A5)} .role-moderator{--role-grad:linear-gradient(135deg,#C9D2E6,#8E9AB8)}
.perm-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--ink-2)}
.perm-list li::before{content:"🛡 "}
.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(114,217,154,.25)}
.online-dot.off{background:#C5C1DA;box-shadow:none}

/* ---------- Landing ---------- */
.landing-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}
.landing-hero .art{border-radius:var(--r-hero);overflow:hidden;box-shadow:var(--sh-pop)}
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pillar{text-align:center;padding:18px 10px}
.pillar .qai{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;margin:0 auto 10px}
.loop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.loop span{padding:8px 14px;border-radius:14px;background:#fff;box-shadow:var(--sh-soft);font-weight:700;font-size:.86rem}
.loop i{color:var(--primary);font-style:normal;font-weight:800}
.auth-wrap{max-width:440px;margin:20px auto}
.auth-art{height:150px;border-radius:22px;overflow:hidden;margin:-4px -4px 16px}
.auth-art img{width:100%;height:100%;object-fit:cover;object-position:center 35%}

/* ---------- Overlay: modal / sheet / toast / reward ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(43,37,82,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:26px;box-shadow:var(--sh-pop);padding:22px;position:relative;animation:springIn .32s var(--ease)}
.modal.wide{width:min(820px,100%)}
@keyframes springIn{0%{opacity:0;transform:scale(.92) translateY(10px)}70%{transform:scale(1.01)}100%{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;border:0;background:#F3F1FA;cursor:pointer;display:grid;place-items:center;z-index:2}
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bottomnav) + 18px);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
@media(min-width:1024px){.toast-wrap{bottom:24px}}
.toast{pointer-events:auto;background:#2B2552;color:#fff;padding:12px 16px;border-radius:16px;box-shadow:var(--sh-pop);display:flex;align-items:center;gap:10px;font-weight:600;animation:toastIn .25s var(--ease);width:100%}
.toast.ok{background:linear-gradient(135deg,#3FBF73,#2EA05E)} .toast.err{background:linear-gradient(135deg,#FF7185,#E24A62)} .toast.info{background:linear-gradient(135deg,#7C5CFF,#5B8BFF)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fly-coin{position:fixed;z-index:300;width:26px;height:26px;pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.3,.3,1),opacity .7s}
.levelup{text-align:center;padding:30px 20px}
.levelup .burst{position:relative;width:180px;height:180px;margin:0 auto 10px;display:grid;place-items:center}
.levelup .burst::before{content:"";position:absolute;inset:-20px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,212,90,.6),transparent 30%,rgba(124,92,255,.5),transparent 60%,rgba(99,199,255,.55),transparent);animation:spin 5s linear infinite;filter:blur(6px)}
.levelup .burst>*{position:relative;animation:reveal .7s var(--ease)}
.levelup .burst img{mix-blend-mode:normal}
@keyframes reveal{0%{transform:scale(.2) rotate(-20deg);opacity:0}70%{transform:scale(1.1)}100%{transform:none;opacity:1}}

/* states */
.empty{text-align:center;padding:34px 16px;color:var(--ink-2)}
.empty .em{font-size:3rem;margin-bottom:6px}
.skel{border-radius:14px;background:linear-gradient(90deg,#EEEBFA 25%,#F8F6FF 50%,#EEEBFA 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.locked-box{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:#F1EFF8;color:#6A6790;font-weight:600;font-size:.86rem}

/* admin */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.admin-tabs a{padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:.85rem;color:var(--ink-2)}
.admin-tabs a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid #F0EEF8;vertical-align:top}
.tbl th{background:#FAF9FF;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.kpi{padding:16px}
.kpi b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--primary)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
.evidence-img{max-width:100%;max-height:360px;border-radius:12px;border:1px solid var(--line)}
code.k{background:#F3F1FA;padding:2px 6px;border-radius:6px;font-size:.82rem;word-break:break-all}

/* ---------- Responsive ---------- */
@media (max-width:1439px){.quick{gap:10px}}
@media (max-width:1279px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023px){
  :root{--topbar:60px}
  .sidebar{display:none}
  .topbar{padding:8px 14px;gap:8px}
  .topbar .search,.topbar .tb-desk{display:none}
  .tb-mobile{display:flex}
  .content{padding:6px 16px calc(var(--bottomnav) + 28px)}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--bottomnav);z-index:50;border-radius:22px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-pop);padding:6px}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.7rem;font-weight:700;color:var(--ink-3);border-radius:16px;min-height:44px}
  .bottomnav a .ic{width:22px;height:22px}
  .bottomnav a.active{color:var(--primary);background:var(--primary-50)}
  .home-top{grid-template-columns:1fr}
  .hero{min-height:300px}
  .quick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pet-hero{grid-template-columns:1fr}
  .landing-hero{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body{font-size:14.5px}
  .home-grid,.g2,.g3{grid-template-columns:1fr}
  .quick{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:14px -16px;padding:4px 16px 8px;scrollbar-width:none}
  .quick::-webkit-scrollbar{display:none}
  .qa{flex:0 0 88px;scroll-snap-align:start}
  .hero{min-height:0;display:flex;flex-direction:column;background:linear-gradient(135deg,#7C5CFF,#9B82FF 55%,#63C7FF)}
  .hero>img{position:relative;inset:auto;height:auto;aspect-ratio:16/11}
  .hero::after{display:none}
  .hero .sparkles{bottom:auto;height:60%}
  .hero-body{position:relative;left:auto;right:auto;bottom:auto;padding:14px 16px 16px;align-items:center}
  .hero-greet h2{font-size:1.2rem}
  .hero-greet .season{display:none}
  .hero-greet p{font-size:.85rem}
  .page-head .back-btn{display:none}
  .tab{padding:0 10px;font-size:.84rem;min-height:38px}
  .task-card{flex-wrap:wrap;padding:12px}
  .task-card .t-cta{flex-direction:row;width:100%;justify-content:space-between;align-items:center}
  .task-card .t-cta .btn{flex:1}
  .overlay.sheet-mobile{padding:0;align-items:flex-end}
  .overlay.sheet-mobile .modal{width:100%;max-height:100dvh;height:100dvh;border-radius:0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));animation:sheetUp .25s var(--ease)}
  .overlay .modal.bottom{width:100%;border-radius:26px 26px 0 0}
  .overlay:has(.modal.bottom){padding:0;align-items:flex-end}
  @keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .podium .avatar{--s:58px}.pod.first .avatar{--s:74px}
  .pod.first .pod-stand{height:96px}.pod.second .pod-stand{height:74px}.pod.third .pod-stand{height:60px}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .badge-card img{width:56px;height:56px}
  .plots{gap:8px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .id-card{padding:18px}.id-card .avatar{--s:92px}
  .push-card ul{grid-template-columns:1fr}
  .page-head h1{font-size:1.35rem}
  .code-input{flex-direction:column}
  .pet-stage{min-height:300px}
}
@media (max-width:389px){.qa{flex-basis:78px}.content{padding-left:12px;padding-right:12px}.shop-grid{gap:8px}.hero-greet .season{display:none}}
@media (min-width:1440px){.content{padding-left:calc(var(--sidebar) + 54px);padding-right:32px}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important}
@media (max-width:1023px){.toast-wrap{bottom:auto;top:calc(12px + env(safe-area-inset-top))}}

/* ============ v4: Homepage CMS ============ */
.hp{display:flex;flex-direction:column;gap:22px}
.hp-sec{margin:0}
.btn.big{min-height:54px;padding:0 26px;font-size:1.02rem;border-radius:16px;letter-spacing:.02em}
.hp-hero{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:clamp(440px,42vw,620px);display:flex;align-items:center;box-shadow:var(--sh-pop);background:#EEF4FF}
.hp-hero-art{position:absolute;inset:0}
.hp-hero-art img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hp-hero .sparkles{z-index:1}
.hp-hero-text{position:relative;z-index:2;max-width:min(560px,46%);padding:40px clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hp-hero-text h1{font-size:clamp(2rem,3.6vw,3.2rem);margin:0;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
.hp-hero-text p{margin:0;font-size:1.08rem;color:var(--ink-2)}
.hp-cta{display:flex;gap:12px;flex-wrap:wrap}
.hp-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hp-game{padding:0;overflow:hidden;color:inherit;display:flex;flex-direction:column}
.hp-game img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.hp-game-cap{display:flex;align-items:center;gap:12px;padding:14px 16px}
.hp-game-cap b{display:block;font-family:var(--font-display);font-size:1.15rem}
.hp-game-cap span:not(.btn){display:block;color:var(--ink-2);font-size:.86rem}
.hp-banner{position:relative;display:block;border-radius:var(--r-hero);overflow:hidden;box-shadow:var(--sh-pop);color:#fff;background:#6C47F5}
.hp-banner-art img{width:100%;aspect-ratio:8/3;object-fit:cover;display:block}
.hp-banner-text{position:absolute;inset:0 auto 0 0;width:min(54%,640px);padding:28px clamp(22px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:10px;align-items:flex-start}
.hp-banner-text h2{font-size:clamp(1.4rem,2.6vw,2.3rem);margin:0;line-height:1.1;text-shadow:0 3px 10px rgba(40,10,120,.35)}
.hp-banner-text p{margin:0;opacity:.95}
.hp-install{background:#EEE6FF;color:var(--ink)}
.hp-install .hp-banner-text h2{text-shadow:none;color:#4B2FD0}
.hp-install .hp-banner-text p{color:var(--ink-2)}
.hp-lb{padding:0;overflow:hidden}
.hp-lb-head{min-height:170px;background-size:cover;background-position:center right;display:flex;align-items:center;padding:20px 26px;color:#fff}
.hp-lb-head h2{margin:0;font-size:1.6rem;text-shadow:0 2px 8px rgba(0,0,0,.3)}.hp-lb-head p{margin:4px 0 0;opacity:.9}
.hp-lb-list{padding:8px 18px}
.hp-lb-list .mini-lb{border-bottom:1px dashed var(--line)}
.hp-ref{display:flex;align-items:center;gap:16px;color:inherit}
.hp-promos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;border-radius:var(--r-hero)}
.hp-promos::-webkit-scrollbar{display:none}
.hp-promo{flex:0 0 100%;scroll-snap-align:start;position:relative;border-radius:var(--r-hero);overflow:hidden}
.hp-promo img{width:100%;aspect-ratio:8/3;object-fit:cover;display:block}
.hp-promo-cap{position:absolute;left:16px;bottom:14px;background:rgba(43,37,82,.7);color:#fff;padding:6px 12px;border-radius:12px;font-size:.86rem}
.install-strip{display:flex;align-items:center;gap:14px;color:inherit;margin-bottom:18px;background:linear-gradient(90deg,#FFF8DF,#F3EEFF);border:2px solid #F6DFA6}
.install-reward{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:linear-gradient(90deg,#FFF8DF,#fff);border:2px solid #F6DFA6}
.code-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:var(--primary-50);color:var(--primary-600);font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:.12em;cursor:pointer;border:2px dashed rgba(124,92,255,.4)}
.code-pill .small{font-family:var(--font);letter-spacing:0;font-weight:700;display:inline-flex;gap:4px;align-items:center}
/* rarity */
.rar{display:inline-block;font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:7px;text-transform:uppercase;letter-spacing:.04em}
.rar-common{background:#E6F4FF;color:#1C6FB8}.rar-rare{background:#EFE8FF;color:#5B36E0}.rar-epic{background:#FFE3F0;color:#C8247A}.rar-legendary{background:linear-gradient(90deg,#FFF0B0,#FFD45A);color:#7A4A00}.rar-limited{background:#FFE0D6;color:#B3122E}
.frame-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.frame-opt{gap:10px;padding:26px 8px 14px}
.frame-opt .avatar{margin:10px auto 14px}
.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.title-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:18px;background:#fff;border:2px solid transparent;cursor:pointer}
.title-opt.equipped{border-color:var(--primary);background:var(--primary-50)}
.title-opt.locked .title-img,.title-opt.locked .title-plate{filter:grayscale(1);opacity:.45}.title-opt.locked .title-plate::after{display:none}
.badge-card .rar{margin-top:-2px}
.av-pick.picked{box-shadow:0 0 0 3px var(--primary);border-radius:50%}
/* invite */
.invite-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-radius:var(--r-hero);padding:26px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,212,90,.35),transparent 45%),linear-gradient(135deg,#6C47F5,#9B5CFF 55%,#FF7AB8);box-shadow:var(--sh-pop)}
.invite-hero h1{color:#fff}
.invite-code{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.2rem);font-weight:800;letter-spacing:.16em;background:rgba(255,255,255,.18);border:2px dashed rgba(255,255,255,.6);border-radius:18px;padding:4px 18px;margin:6px 0 14px;display:inline-block;user-select:all}
.invite-hero .btn.ghost{background:rgba(255,255,255,.92)}
.invite-stat{min-width:180px;text-align:center;background:rgba(255,255,255,.16);border-radius:22px;padding:18px}
.invite-stat b{display:block;font-family:var(--font-display);font-size:3.4rem;line-height:1}
.invite-stat small{display:block;opacity:.85;margin-top:4px}
.ref-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ref-ms{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 8px 12px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:var(--sh-soft)}
.ref-ms.reached{border-color:#F6DFA6}.ref-ms.claimed{border-color:#9BE3B4;background:#F4FFF8}
.ref-n{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-weight:800;border-radius:10px;padding:1px 10px;font-size:.8rem}
.ref-ms.claimed .ref-n{background:#3FBF73}
.ref-prev{height:56px;display:grid;place-items:center;font-size:2.2rem}.ref-prev img{max-height:56px;max-width:100%}
.event-banner{position:relative;border-radius:var(--r-hero);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh-pop)}
.event-banner img{width:100%;aspect-ratio:8/3;object-fit:cover;display:block}
.event-banner-cap{position:absolute;left:0;top:0;bottom:0;width:55%;padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;background:linear-gradient(90deg,rgba(43,37,82,.75),transparent)}
.event-banner-cap h2{margin:0;color:#fff}
@media (max-width:1023px){.ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .hp{gap:18px}
  .hp-hero{flex-direction:column;align-items:stretch;min-height:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  .hp-hero-text{max-width:none;padding:6px 2px 14px;align-items:stretch;text-align:left}
  .hp-hero-text h1{font-size:2rem}
  .hp-hero-text p{font-size:.98rem}
  .hp-cta{flex-direction:column}
  .hp-cta .btn{width:100%}
  .hp-hero-art{position:relative;inset:auto;border-radius:24px;overflow:hidden;box-shadow:var(--sh-pop)}
  .hp-hero-art img{aspect-ratio:1080/1350;height:auto;object-position:center top}
  .hp-hero .sparkles{display:none}
  .hp-games{grid-template-columns:1fr;gap:14px}
  .hp-banner{display:flex;flex-direction:column;color:#fff}
  .hp-banner-art img{aspect-ratio:auto}
  .hp-banner-text{position:static;width:auto;padding:16px 18px 20px}
  .hp-banner-text h2{font-size:1.35rem}
  .hp-install .hp-banner-art img{aspect-ratio:1080/700}
  .hp-lb-head{min-height:120px;padding:16px}
  .hp-lb-head h2{font-size:1.3rem}
  .hp-ref{flex-direction:column;text-align:center}
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invite-hero{padding:20px}
  .invite-stat{width:100%}
  .event-banner-cap{width:100%;padding:16px}
  .title-grid{grid-template-columns:1fr}
}
@media (min-width:768px){.hp-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(243,240,255,.96) 0%,rgba(243,240,255,.85) 30%,rgba(243,240,255,0) 52%);pointer-events:none}.hp-hero-text{max-width:min(540px,44%)}}
.pod .avatar.has-frame{margin-bottom:16px}.pod{gap:10px}

.hero .hero-pic{position:absolute;inset:0}.hero .hero-pic img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
@media (max-width:767px){.hero .hero-pic{position:relative;inset:auto}.hero .hero-pic img{height:auto;aspect-ratio:4/3;object-position:center 10%}}

/* v5: giới tính + thông tin cá nhân */
.gender-pick{display:flex;gap:10px}
.gender-pick label{flex:1;cursor:pointer}
.gender-pick input{position:absolute;opacity:0;pointer-events:none}
.gender-pick span{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:700}
.gender-pick input:checked+span{border-color:var(--primary);background:var(--primary-50);color:var(--primary-600);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.gender-pick input:focus-visible+span{outline:2px solid var(--primary)}
.req{color:var(--danger)}
.bd-wrap{position:relative;display:flex}
.bd-wrap .input{padding-right:52px;letter-spacing:.06em;font-weight:600}
.bd-cal{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:36px;border:0;background:var(--primary-50);border-radius:10px;color:transparent;cursor:pointer}
.bd-cal::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer;margin:0 auto}
.hobby-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hb-chip{min-height:38px;padding:0 14px;border-radius:20px;border:1.5px solid var(--line);background:#fff;font-weight:600;cursor:pointer}
.hb-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.first-task{position:relative;display:flex;align-items:center;gap:14px;color:inherit;margin-bottom:18px;background:linear-gradient(90deg,#F1EDFF,#FFF8DF);border:2px solid #D9CCFF;padding-top:22px}
.ft-badge{position:absolute;top:-10px;left:16px;background:linear-gradient(135deg,#FF8FB8,#7C5CFF);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:10px}
.profile-info-link{display:flex;align-items:center;gap:12px}
@media (max-width:767px){.first-task{flex-wrap:wrap}.first-task .btn{width:100%}}
.id-card .avatar.has-frame{margin:calc((var(--fw) - var(--s)) / 2 - 6px)}
@media (max-width:640px){.badge-grid.bf-grid .badge-card .tiny{font-size:.54rem;letter-spacing:-.02em}}
/* ---------- v7: linh thú 3 hình thái · xu theo giờ · mảnh ghép · mã TOP ---------- */
.pet-stage img.pet-art.v7{width:min(72%,380px);aspect-ratio:1;object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 24px rgba(70,40,160,.25))}
.pet-thumb img{object-fit:contain}
.pet-thumb .pt-rate{position:absolute;left:0;right:0;bottom:0;font-size:.6rem;font-weight:800;text-align:center;background:linear-gradient(90deg,#FFC93C,#FF9F1C);color:#5A3300;line-height:1.5}
.income-card{margin-bottom:16px;background:linear-gradient(135deg,#FFF8E1,#FFFFFF 55%,#F3EEFF)}
.income-amt{font-size:1.6rem;font-weight:900;color:#B97800;margin-bottom:4px;font-variant-numeric:tabular-nums}
.evo-track{display:flex;align-items:center;gap:6px;justify-content:space-between;background:#FAF8FF;border-radius:16px;padding:10px}
.evo-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.evo-step img{width:64px;height:64px;object-fit:contain}
.evo-step b{font-size:.72rem;line-height:1.2}
.evo-step.locked img{filter:brightness(0) opacity(.25)}
.evo-step.on{background:#fff;border-radius:12px;box-shadow:0 0 0 2px var(--primary);padding:4px 2px}
.evo-arrow{color:#B9A8FF;font-weight:900}
.evo-preview{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}
.evo-preview img{width:110px;height:110px;object-fit:contain}
.evo-preview img.next{width:140px;height:140px;filter:drop-shadow(0 0 14px rgba(255,200,80,.8))}
.evo-preview span{font-size:1.6rem;color:var(--primary)}
.egg-img{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto}
.egg-img.hatching{animation:wobble 1.6s ease-in-out infinite}
.egg-img.big,.burst .egg.big{width:150px;height:150px}
.mycode,.frag-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.mycode img,.frag-row img{width:42px;height:42px;object-fit:contain;flex:none}
.frag-row .emo{font-size:1.8rem;width:42px;text-align:center}
.mycode code{font-weight:800;letter-spacing:.04em}
.frag-mini{width:100%;display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#8A6400}
.frag-mini .progress{flex:1;height:6px}
@media (prefers-reduced-motion:reduce){.egg-img.hatching{animation:none}}
@media (max-width:640px){.pet-name-card{left:12px;right:auto;top:12px;padding:8px 12px;max-width:62%}.pet-name-card b{font-size:1rem}.pet-name-card div{font-size:.78rem}.pet-stage img.pet-art.v7{width:min(66%,300px);margin-right:40px}}
/* ---------- v8: thương hiệu, pet care, garden ---------- */
.logo-mark.has-img{background:#fff;padding:0;overflow:hidden}
.logo-mark.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.pet-alert{background:#FFF0F3;border:1px solid #FFC7D4;color:#8A1F3D;border-radius:14px;padding:10px 12px;font-size:.88rem}
.pet-alert.soft{background:#FFF8E5;border-color:#FFE3A1;color:#7A5200}
.mood-bubble{position:absolute;left:18px;bottom:18px;z-index:3;font-size:2rem;background:#fff;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;box-shadow:var(--sh-soft);animation:idle 2.6s ease-in-out infinite}
.pet-stage.mood-sad img.pet-art,.pet-stage.mood-very_sad img.pet-art{animation:petSad 3.6s ease-in-out infinite;filter:saturate(.6) drop-shadow(0 18px 24px rgba(70,40,160,.2))}
.pet-stage.mood-sick img.pet-art{animation:petSad 5s ease-in-out infinite;filter:saturate(.35) hue-rotate(-15deg) drop-shadow(0 18px 24px rgba(70,40,160,.2))}
.pet-stage.mood-sad,.pet-stage.mood-very_sad,.pet-stage.mood-sick{background:linear-gradient(180deg,#C9D3E8,#E9E3F5)}
.pet-stage.mood-happy img.pet-art{animation:petHappy 1.8s ease-in-out infinite}
@keyframes petSad{0%,100%{transform:translateY(6px) rotate(-2deg) scaleY(.96)}50%{transform:translateY(10px) rotate(2deg) scaleY(.94)}}
@keyframes petHappy{0%,100%{transform:translateY(0)}35%{transform:translateY(-14px)}55%{transform:translateY(0)}70%{transform:translateY(-6px)}}
.stat-bar{grid-template-columns:96px 1fr 64px}
.stat-bar>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.care-grid{gap:10px}
.care-grid .btn{flex-direction:column;line-height:1.2}
.item-pick{box-shadow:none;border:1px solid var(--line);cursor:pointer;text-align:left;gap:10px}
.item-pick.none{opacity:.55;cursor:not-allowed}
.chip.pink{background:#FFE3F0;color:#C8247A}
.evo-cond{padding:6px 10px;border-radius:10px;background:#F4FBF6;font-size:.88rem}
.evo-cond.no{background:#FFF1F1}
.garden-scene.night>img{filter:brightness(.62) saturate(.9) hue-rotate(10deg)}
.garden-scene .decor img{width:52px;height:52px;object-fit:contain}
.gs-chips{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px)}
.gs-chips .chip{background:rgba(255,255,255,.88);font-size:.72rem}
.garden-top{margin-top:14px;gap:12px}
.garden-top .card{padding:14px}
.plot.g8{flex-direction:column;justify-content:flex-end;padding:0 0 8px;overflow:visible}
.plot.g8 .pimg{position:absolute;left:50%;bottom:12%;width:100%;max-width:190px;aspect-ratio:1;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));z-index:1;pointer-events:none}
.plot.g8 .plant{position:absolute;top:28%;z-index:1}
.plot.g8 .ptime{z-index:2;margin-top:0;font-size:.66rem}
.plot.g8 .pbars{position:relative;z-index:2;width:70%;height:6px;border-radius:6px;background:rgba(0,0,0,.25);overflow:hidden;margin-bottom:4px}
.plot.g8 .pbars i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#7ED957,#C8F7A0);border-radius:6px}
.plot.g8 .pbug{position:absolute;right:8%;top:14%;font-size:1.4rem;z-index:3;animation:bug 1.2s ease-in-out infinite}
.plot.g8 .pdry{position:absolute;left:8%;top:14%;font-size:1.1rem;z-index:3;opacity:.9;animation:idle 1.4s ease-in-out infinite}
.plot.g8 .pcoin{position:absolute;right:6%;bottom:30%;z-index:3;font-size:.7rem;font-weight:900;color:#5A3300;background:linear-gradient(135deg,#FFE27A,#FFB800);border-radius:10px;padding:1px 6px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.plot.g8 .pfx{position:absolute;left:50%;bottom:22%;width:80%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0}
.plot.g8.rar-rare .pfx{background:radial-gradient(circle,rgba(127,211,255,.35),transparent 65%)}
.plot.g8.rar-epic .pfx{background:radial-gradient(circle,rgba(183,155,255,.5),transparent 65%);animation:pulseFx 3s ease-in-out infinite}
.plot.g8.rar-legendary .pfx{background:radial-gradient(circle,rgba(255,212,90,.6),transparent 65%);animation:pulseFx 2.4s ease-in-out infinite}
.plot.g8.fx-aura .pfx{box-shadow:0 0 30px 8px rgba(255,226,122,.55)}
.plot.g8.fx-wind .pimg,.plot.g8.fx-bloom .pimg{animation:sway 3.2s ease-in-out infinite;transform-origin:50% 100%}
.plot.g8.dry .pimg{filter:saturate(.6) brightness(.95) drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.plot.g8.stopped .pimg{filter:grayscale(.8) drop-shadow(0 6px 6px rgba(0,0,0,.25))}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) rotate(2deg)}}
@keyframes pulseFx{0%,100%{opacity:.6;transform:translateX(-50%) scale(.92)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
@keyframes bug{0%,100%{transform:translateX(0) rotate(-8deg)}50%{transform:translateX(4px) rotate(8deg)}}
.plots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-width:900px}
.plots .plot{aspect-ratio:.95}
.shop-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.shop-chips .chip{cursor:pointer;background:#fff;border:1px solid var(--line)}
@media (max-width:640px){.plots{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-bar{grid-template-columns:84px 1fr 56px;font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.pet-stage img.pet-art,.plot.g8 .pimg,.plot.g8 .pfx,.plot.g8 .pbug,.mood-bubble{animation:none!important}}
.grid.g2.care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.garden-top{grid-template-columns:repeat(2,minmax(0,1fr))}.garden-top .card:first-child{grid-column:1/-1}.care-grid .btn{padding:8px 6px;font-size:.84rem}}
/* ---- v9 Túi Mù & Vé Số ---- */
.luck-hero,.lot-hero{margin-top:14px;border-radius:22px;padding:16px 18px;color:#fff;background:linear-gradient(135deg,#7B5CFF,#FF6FA5);display:flex;flex-direction:column;gap:4px}
.luck-hero b{font-size:1.2rem}
.lot-hero{text-align:center;background:radial-gradient(circle at 50% 0,#FFD45A55,transparent 60%),linear-gradient(135deg,#3B1E8F,#B3122E)}
.lot-jp-l{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FFE27A;margin-top:6px}
.lot-jp{font-size:2.6rem;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;text-shadow:0 0 18px #FFD45A;animation:jpPulse 2.4s ease-in-out infinite}
@keyframes jpPulse{50%{transform:scale(1.04)}}
.bag-grid,.lot-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
.lot-types{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.bag-card,.lot-type{display:flex;flex-direction:column;gap:6px;text-align:center;align-items:stretch}
.bag-art{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle,#F1EBFF,#FAF9FF)}
.bag-card.k-premium .bag-art{background:radial-gradient(circle,#FFF2C2,#FFFBEF)}.bag-card.k-event .bag-art{background:radial-gradient(circle,#FFE0D0,#FFF7F2)}
.bag-art img{animation:bagFloat 3s ease-in-out infinite}@keyframes bagFloat{50%{transform:translateY(-6px) rotate(-2deg)}}
.bag-cd{position:absolute;top:8px;left:8px}
.lrar{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.72rem;font-weight:800;color:#fff;background:#8C93A8}
.lrar.r-rare{background:#3E8BFF}.lrar.r-epic{background:#9D4BFF}.lrar.r-legendary{background:linear-gradient(90deg,#FFB300,#FF7A00)}.lrar.r-limited{background:linear-gradient(90deg,#FF3E7A,#9D4BFF)}
.rate-bars{display:flex;flex-direction:column;gap:6px;margin:10px 0}.rate-row{display:grid;grid-template-columns:90px 1fr 56px;align-items:center;gap:8px}.rate-row .progress i{display:block}
.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.pool-it{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;background:#FAF9FF;border:2px solid #E6E3F3;text-align:center}
.pool-it.r-rare,.open-it.r-rare{border-color:#3E8BFF}.pool-it.r-epic,.open-it.r-epic{border-color:#9D4BFF}.pool-it.r-legendary,.open-it.r-legendary{border-color:#FFB300;box-shadow:0 0 12px #FFB30066}.pool-it.r-limited,.open-it.r-limited{border-color:#FF3E7A;box-shadow:0 0 12px #FF3E7A66}
.open-stage{position:relative;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.open-bag{width:170px;height:170px;animation:bagShake .18s linear 5;transition:transform .5s,opacity .5s}
@keyframes bagShake{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.open-aura{position:absolute;inset:10% 15%;border-radius:50%;opacity:0;transition:opacity .6s;background:radial-gradient(circle,#B79BFF,transparent 70%)}
.open-stage.glow .open-aura{opacity:1;animation:auraSpin 2s linear infinite}.open-stage.glow .open-bag{filter:drop-shadow(0 0 22px #fff) brightness(1.15)}
.fx-rare .open-aura{background:radial-gradient(circle,#3E8BFFaa,transparent 70%)}.fx-epic .open-aura{background:radial-gradient(circle,#9D4BFFcc,transparent 70%)}
.fx-legendary .open-aura,.fx-limited .open-aura{background:conic-gradient(from 0deg,#FFD45A,#FF7A59,#FF6FA5,#9D7BFF,#FFD45A);filter:blur(18px)}
@keyframes auraSpin{to{transform:rotate(360deg)}}
.open-stage.opened .open-bag{transform:scale(1.5);opacity:0;position:absolute}
.open-res{position:relative;width:100%}.open-title{font-size:2rem;font-weight:900;animation:popIn .4s}
.open-items{display:flex;justify-content:center;margin-top:8px}.open-items.multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.open-it{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:16px;background:#fff;border:2px solid #E6E3F3;animation:popIn .45s both}
@keyframes popIn{from{transform:scale(.3);opacity:0}70%{transform:scale(1.08)}to{transform:none;opacity:1}}
.lot-nums{display:flex;flex-wrap:wrap;gap:6px}.lot-num{font-family:'Courier New',monospace;font-weight:800;padding:4px 10px;border-radius:10px;background:#F1EBFF;color:#4B2BB8;letter-spacing:.12em}
.lot-num.big{font-size:1.3rem}.lot-num.win{background:#FFF2C2;color:#8A5A00}
.lot-result{display:flex;gap:6px;margin:6px 0}.lot-result span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.2rem;color:#fff;background:radial-gradient(circle at 35% 30%,#FF9FBE,#E0245E)}
/* ---- v10 Minigames ---- */
.mg-hero{border-radius:22px;padding:18px;color:#fff;background:linear-gradient(135deg,#2D1F6E,#7C5CFF 60%,#FF6FA5);display:flex;flex-direction:column;gap:2px}
.mg-hero b{font-size:1.35rem;letter-spacing:.06em}.mg-hero span{opacity:.9}
.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-top:14px}
.mg-gcard{position:relative;display:flex;flex-direction:column;gap:6px;text-align:center;color:inherit;border-top:5px solid var(--mg);transition:transform .2s}
.mg-gcard:hover{transform:translateY(-4px) rotate(-.4deg)}
.mg-gart{aspect-ratio:1.4;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle,color-mix(in srgb,var(--mg) 22%,#fff),#FAF9FF)}
.mg-gart img{width:62%;height:auto;max-height:90%;object-fit:contain;transition:transform .3s}.mg-gcard:hover .mg-gart img{transform:scale(1.08) rotate(-4deg)}.mg-gart span{font-size:3.2rem}
.mg-desc{min-height:2.4em}.mg-scores{display:flex;justify-content:space-around;font-size:.8rem;color:var(--ink-3)}.mg-scores b{color:var(--ink)}
.mg-badge{position:absolute;top:10px;right:10px;z-index:1;font-size:.7rem;font-weight:800;color:#fff;padding:2px 9px;border-radius:99px;background:#7B5CFF}.mg-badge.b-hot{background:#FF4F7B}.mg-badge.b-new{background:#3DBE7A}.mg-badge.b-event{background:#FFB300}
.mg-rank{width:42px;text-align:center;font-weight:900;color:var(--ink-3)}
.mg-shell{display:flex;flex-direction:column;gap:10px}
.mg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mg-title{flex:1;min-width:120px}
.mg-stats{display:flex;gap:12px;font-size:.85rem;color:var(--ink-3)}.mg-stats b{color:var(--ink);font-size:1rem}
.mg-stage{position:relative;min-height:420px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--mg) 14%,#fff),#FAF9FF);background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.mg-loading{color:var(--ink-3)}
.mg-ov[hidden],.mg-top [hidden]{display:none}
.mg-ov{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(43,31,74,.35);backdrop-filter:blur(3px);padding:14px}
.mg-card{background:#fff;border-radius:24px;padding:22px 20px;text-align:center;max-width:360px;width:100%;box-shadow:0 20px 50px rgba(43,31,74,.25);animation:popIn .35s}
.mg-card.rec{background:radial-gradient(circle at 50% 0,#FFF2C2,#fff 60%)}
.mg-ov-ic{width:110px;height:110px;object-fit:contain}.mg-big{font-size:2.6rem;font-weight:900;color:var(--mg)}
.mg-diffs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mg-preview{text-align:center;font-size:.8rem;color:#8A5A00;background:#FFF2C2;border-radius:12px;padding:4px}
.mg-snake{display:flex;flex-direction:column;align-items:center;gap:10px}.mg-snake canvas{border-radius:14px;box-shadow:0 8px 24px rgba(43,31,74,.15);background:#fff}
.mg-pad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,46px);gap:6px}.mg-pad button{border:0;border-radius:14px;background:#fff;box-shadow:0 3px 0 #E0D9F7;font-size:1.1rem;color:var(--ink);cursor:pointer}
.mg-pad [data-d=U]{grid-column:2}.mg-pad [data-d=L]{grid-column:1;grid-row:2}.mg-pad [data-d=D]{grid-column:2;grid-row:2}.mg-pad [data-d=R]{grid-column:3;grid-row:2}
@media (hover:hover) and (pointer:fine){.mg-pad{display:none}}
.mg-fly{border-radius:18px;box-shadow:0 8px 24px rgba(43,31,74,.15);cursor:pointer}
.mg-2048{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.g2-board{--n:4;width:min(100%,440px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px;padding:10px;border-radius:20px;background:#E9DFC6;background-size:cover}
.g2-cell{position:relative;border-radius:12px;background:rgba(255,255,255,.45)}.g2-cell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}
.g2-tile{position:absolute;inset:0;border-radius:12px;display:grid;place-items:center;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.08);overflow:hidden}.g2-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.g2-tile.new{animation:popIn .2s}.g2-tile.merge{animation:g2m .18s}@keyframes g2m{50%{transform:scale(1.14)}}
.mg-match{width:100%;max-width:560px}.m2-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}.m2-bar .progress{flex:1}
.m2-grid{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:8px}
.m2-card{aspect-ratio:3/4;border:0;padding:0;background:none;perspective:600px;cursor:pointer;position:relative}
.m2-in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}.m2-card.flip .m2-in{transform:rotateY(180deg)}
.m2-back,.m2-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;overflow:hidden;box-shadow:0 4px 0 rgba(75,43,184,.18)}
.m2-back{background:linear-gradient(160deg,#B79BFF,#6A45E8);color:#fff;font-size:1.6rem}.m2-back img{width:100%;height:100%;object-fit:cover}
.m2-face{background:#fff;transform:rotateY(180deg);border:3px solid #E6E3F3}.m2-face img{width:84%;height:84%;object-fit:contain}.m2-face span{font-size:2.2rem}.m2-face .m2-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.m2-card.ok .m2-face{border-color:#3DBE7A;animation:g2m .3s}
.m2-fx{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:3;font-weight:900;color:#B97800;pointer-events:none;animation:m2fx .7s forwards;white-space:nowrap}.m2-fx img{width:90px}
@keyframes m2fx{to{opacity:0;transform:translate(-50%,-120%)}}
/* ---- v10 Donate ---- */
.dn-hero{display:flex;gap:14px;align-items:center;border-radius:22px;padding:18px;color:#fff;background:linear-gradient(135deg,#FF6FA5,#B57BFF)}.dn-hero h2{color:#fff;margin:0 0 4px}.dn-hero p{margin:0;opacity:.95}.dn-hero img{width:120px;max-height:110px;object-fit:contain}
.dn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-top:14px}
.dn-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:center}.dn-card.hot{box-shadow:0 0 0 3px #FFD45A,0 10px 30px rgba(255,180,0,.2)}
.dn-badge{position:absolute;top:10px;right:10px;font-size:.7rem;font-weight:800;color:#8A5A00;background:#FFE27A;padding:2px 9px;border-radius:99px}
.dn-ic{height:96px;display:grid;place-items:center}.dn-ic img{height:92px;width:92px;object-fit:contain}.dn-ic span{font-size:3rem}
.dn-amt{font-size:1.5rem;font-weight:900;color:#C2185B}.dn-gifts{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.dn-pay{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin:14px 0}
.dn-qr{background:#fff;border-radius:18px;padding:10px;box-shadow:0 0 0 2px #F0EEF8;display:flex;flex-direction:column;gap:8px;align-items:center}.dn-qr svg{display:block;width:240px;height:240px}.dn-qrimg{width:240px;height:240px;object-fit:contain}
.dn-info{display:flex;flex-direction:column;gap:8px}.dn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dn-row>span{min-width:96px;color:var(--ink-3);font-size:.85rem}
.dn-amt2{font-size:1.4rem;color:#C2185B}.dn-code{font-family:'Courier New',monospace;font-size:1.2rem;letter-spacing:.06em;background:#FFF2C2;padding:2px 8px;border-radius:8px}
.dn-done{text-align:center;padding:20px 0}
@media (max-width:640px){.dn-pay{grid-template-columns:1fr;justify-items:center}.dn-qr svg,.dn-qrimg{width:220px;height:220px}}

/* ===== v11 ===== */
/* Home: spacing giữa các khung */
.home-grid{gap:16px}
.home-grid + *, .home-grid ~ .card, .home-grid ~ section{margin-top:16px}
.home-grid > .card + .card{margin-top:0}
@media (max-width:767px){.home-grid{gap:13px}.home-grid + *, .home-grid ~ .card, .home-grid ~ section{margin-top:13px}}
/* Level badge 5 bậc */
.level-badge-wrap.lvt-1 .lvnum{text-shadow:0 2px 4px rgba(30,90,40,.75)}
.level-badge-wrap.lvt-2 .lvnum{text-shadow:0 2px 4px rgba(20,60,140,.75)}
.level-badge-wrap.lvt-3 .lvnum{text-shadow:0 2px 4px rgba(90,30,150,.75)}
.level-badge-wrap.lvt-4 .lvnum{text-shadow:0 2px 4px rgba(150,70,0,.8)}
.level-badge-wrap.lvt-5 .lvnum{text-shadow:0 2px 5px rgba(150,0,40,.85)}
/* Tabs gọn hơn */
.tab{min-height:35px;padding:0 12px;border-radius:11px}
.tabs{padding:4px;gap:4px}
@media (max-width:767px){.tab{min-height:33px;padding:0 10px}}
button.chip{border:0;cursor:pointer;font:inherit}
.loading-soft{opacity:.55;pointer-events:none;transition:opacity .15s}
.mg-ftabs{max-width:420px}
/* Garden items */
.g-items .g-grp{margin-top:10px}
.g-items .g-grp > b{display:block;margin-bottom:6px}
.g-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.g-it{position:relative;flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center;line-height:1.15}
.g-it:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(80,60,160,.5)}
.g-it .tiny{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-q{position:absolute;top:4px;right:6px;font-size:.7rem;font-weight:800;color:var(--primary)}
/* Cây trưởng thành */
.plot{position:relative;overflow:visible}
.plot.mature .maura{position:absolute;inset:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--mc,rgba(120,220,120,.55)) 0%,transparent 70%);animation:maura 2.6s ease-in-out infinite;z-index:0}
.plot.mature .pimg{position:relative;z-index:1}
.plot.mature.rar-rare{--mc:rgba(80,160,255,.55)}
.plot.mature.rar-epic{--mc:rgba(180,100,255,.6)}
.plot.mature.rar-legendary{--mc:rgba(255,190,40,.7)}
.plot.mature .mcoins{position:absolute;inset:0;pointer-events:none;z-index:2}
.plot.mature .mcoins i{position:absolute;bottom:30%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF3B0,#F5B700 60%,#C98A00);box-shadow:0 0 6px rgba(255,200,0,.8);opacity:0;animation:mcoin 2.4s ease-out infinite}
.plot.mature .mcoins i:nth-child(1){left:25%}
.plot.mature .mcoins i:nth-child(2){left:48%;animation-delay:.8s}
.plot.mature .mcoins i:nth-child(3){left:70%;animation-delay:1.6s}
@keyframes maura{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes mcoin{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-48px) scale(1);opacity:0}}
/* Action FX */
.afx{position:absolute;inset:0;pointer-events:none;z-index:5}
.afx i{position:absolute;left:50%;top:55%;width:10px;height:10px;border-radius:50%;opacity:0;animation:afx .9s ease-out forwards}
.afx i:nth-child(1){--dx:-34px;--dy:-40px}.afx i:nth-child(2){--dx:30px;--dy:-46px;animation-delay:.05s}.afx i:nth-child(3){--dx:-12px;--dy:-60px;animation-delay:.1s}
.afx i:nth-child(4){--dx:16px;--dy:-30px;animation-delay:.15s}.afx i:nth-child(5){--dx:-40px;--dy:-14px;animation-delay:.2s}.afx i:nth-child(6){--dx:40px;--dy:-18px;animation-delay:.25s}
.afx-water i{background:#5BC0FF;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.afx-leaf i{background:#6BD66B;border-radius:0 70% 0 70%}
.afx-grow i{background:#B7F36B;box-shadow:0 0 8px #B7F36B}
.afx-hit i{background:#FF6B6B;width:7px;height:7px}
.afx-coin i{background:radial-gradient(circle at 35% 35%,#FFF3B0,#F5B700 60%,#C98A00);width:12px;height:12px}
@keyframes afx{0%{opacity:1;translate:0 0;scale:.6}100%{opacity:0;translate:var(--dx) var(--dy);scale:1.1}}
@media (prefers-reduced-motion:reduce){.plot.mature .maura,.plot.mature .mcoins i,.afx i{animation:none!important}.plot.mature .maura{opacity:.7}.afx{display:none}}
/* Kim Cương */
.gem-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#E6F7FF,#D9E8FF);color:#1F5FBF;font-weight:800;font-size:.85rem;border:0;cursor:pointer}
/* Bộ sưu tập tượng */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.st-card{position:relative;padding:8px;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:center}
.st-card img{width:100%;aspect-ratio:1;object-fit:contain}
.st-card.locked img{filter:grayscale(1) brightness(.5) opacity(.45)}
.st-card .st-lv{position:absolute;top:6px;left:6px;font-size:.7rem;font-weight:800;padding:1px 6px;border-radius:8px;background:var(--primary);color:#fff}
.st-card.l2 .st-lv{background:#2E8BFF}.st-card.l3 .st-lv{background:linear-gradient(135deg,#FFB800,#FF6A00)}
.st-card .st-q{position:absolute;top:6px;right:8px;font-size:.72rem;font-weight:800;color:var(--ink-2)}
.st-reveal{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px;border-radius:12px;background:#FAF7FF;text-align:left}
.st-reveal img{width:52px;height:52px;object-fit:contain}
.home > .home-grid, * + .home-grid{margin-top:16px}
@media (max-width:767px){* + .home-grid{margin-top:13px}}

/* no-zoom (mobile) */
html,body{touch-action:manipulation;-ms-touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{touch-action:manipulation}
@media (max-width:900px){input,select,textarea{font-size:16px!important}}

.ic.img-override{width:1em;height:1em;object-fit:contain;vertical-align:-.14em;border-radius:4px}.ic.img-override.fill{fill:none}

/* v1105 · Minigames polish: khung cố định, icon giữa, joystick, sudoku liền mạch */
.mg-top{flex-wrap:nowrap!important;min-height:40px}
.mg-title{min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-stats{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;gap:10px!important;align-items:baseline}
.mg-stats>span{display:inline-flex;align-items:baseline;gap:3px}
.mg-stats b{display:inline-block;min-width:2.6ch;text-align:right}
.mg-stats [data-extra]{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.mg-stats [data-extra]:empty{display:none}
@media (max-width:560px){.mg-top{gap:6px}.mg-top .mg-title{font-size:.88rem}.mg-stats{font-size:.72rem;gap:7px!important}.mg-stats b{font-size:.88rem}.mg-stats [data-extra]{max-width:70px}.mg-top .btn.sm{padding-left:8px;padding-right:8px}}
.mg-stage{contain:layout}
.mg-ov-ic{display:block;margin:0 auto 6px}
.mg-ov .mg-card{text-align:center}
.mg-pad{display:none!important}
.mg-snake canvas{touch-action:none}
.mg-joy{position:relative;width:148px;height:148px;border-radius:50%;flex:none;display:none;touch-action:none;background:radial-gradient(circle at 50% 38%,#FFFFFF,#ECE5FF 70%);box-shadow:inset 0 -6px 0 rgba(124,92,255,.14),inset 0 0 0 2px rgba(124,92,255,.12),0 10px 24px rgba(43,31,74,.16)}
@media (pointer:coarse){.mg-joy{display:block}}
.mg-joy i{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:linear-gradient(180deg,#A48BFF,#6A45F0);box-shadow:0 6px 14px rgba(106,69,240,.45),inset 0 3px 0 rgba(255,255,255,.4);transition:transform .07s;pointer-events:none}
.mg-joy span{position:absolute;color:#C3B5F5;font-size:13px;line-height:1;pointer-events:none;transition:color .1s}
.mg-joy .u{top:11px;left:50%;transform:translateX(-50%)}.mg-joy .d{bottom:11px;left:50%;transform:translateX(-50%)}.mg-joy .l{left:12px;top:50%;transform:translateY(-50%)}.mg-joy .r{right:12px;top:50%;transform:translateY(-50%)}
.mg-joy[data-on=U] .u,.mg-joy[data-on=D] .d,.mg-joy[data-on=L] .l,.mg-joy[data-on=R] .r{color:#6A45F0}
.sdk-bar{flex-wrap:nowrap!important;font-variant-numeric:tabular-nums}
.sdk-board{gap:0!important;padding:6px!important;border-radius:20px!important;background:linear-gradient(160deg,#A58FFF,#7B5CFF)!important}
.sdk-board .sdk-c{border-radius:0!important;box-shadow:none!important;background:#fff!important;border:0!important;border-right:1px solid #E6DEFF!important;border-bottom:1px solid #E6DEFF!important;color:#6A45F0!important;font-weight:800!important;font-size:clamp(17px,5.2vw,25px)!important;position:relative;transition:background-color .15s;padding:0!important;min-width:0}
.sdk-board .sdk-c.g{color:#2B1F4A!important;background:#F8F6FF!important}
.sdk-board .sdk-c.br{border-right:3px solid #9479FF!important}
.sdk-board .sdk-c.bb{border-bottom:3px solid #9479FF!important}
.sdk-board .sdk-c:nth-child(9n){border-right:0!important}
.sdk-board .sdk-c:nth-child(n+73){border-bottom:0!important}
.sdk-board .sdk-c:nth-child(1){border-top-left-radius:14px!important}.sdk-board .sdk-c:nth-child(9){border-top-right-radius:14px!important}.sdk-board .sdk-c:nth-child(73){border-bottom-left-radius:14px!important}.sdk-board .sdk-c:nth-child(81){border-bottom-right-radius:14px!important}
.sdk-board .sdk-c.hl{background:#F0EAFF!important}
.sdk-board .sdk-c.same{background:#DCD0FF!important;color:#4B2BD6!important}
.sdk-board .sdk-c.sel{background:linear-gradient(180deg,#FFF1BF,#FFD873)!important;color:#2B1F4A!important;box-shadow:inset 0 0 0 2px #F2B52B!important;z-index:1}
.sdk-board .sdk-c.bad{color:#E5484D!important;background:#FFE9EC!important;animation:sdkShake .35s}
.sdk-board .sdk-c.pop{animation:sdkPop .3s ease-out}
.sdk-board .sdk-c.bad.pop{animation:sdkShake .35s}
.sdk-board .sdk-c.wave{animation:sdkPulse .7s ease-out}.sdk-board .sdk-c.wave::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(110,231,160,.85),rgba(72,214,140,.35));animation:sdkWave .7s ease-out forwards;pointer-events:none}
@keyframes sdkPop{0%{transform:scale(.55)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes sdkShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes sdkWave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}@keyframes sdkPulse{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}

.mg-ov .mg-ov-ic{width:148px!important;height:148px!important;object-fit:cover!important;border-radius:28px;box-shadow:0 10px 24px rgba(91,47,184,.25),0 0 0 4px #fff;margin:0 auto 10px!important}