/* CSky Mall + chế độ đặt đồ trang trí */
.mall{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:rgba(6,4,14,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mall.on .ml-box{animation:mlin .55s cubic-bezier(.2,1.2,.3,1) both}
@keyframes mlin{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.ml-box{position:relative;width:min(1180px,100%);height:min(760px,100%);border-radius:30px;overflow:hidden;display:grid;grid-template-columns:200px 1fr 300px;grid-template-rows:auto 1fr;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font-family:"Be Vietnam Pro","Inter",system-ui,sans-serif}
#mlBg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ml-box>*:not(canvas){position:relative;z-index:1}
.ml-head{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:18px 22px 12px}
.ml-logo{display:flex;align-items:baseline;gap:8px}
.ml-logo b{font-family:"Fraunces","Be Vietnam Pro",serif;font-size:30px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(100deg,#ffe9a8,#ff9fd0 45%,#9ff4ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(255,120,200,.35))}
.ml-logo small{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ml-wal{margin-left:auto;display:flex;gap:10px;position:relative}
.ml-wal span{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;padding:8px 14px;border-radius:18px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ml-wal span .ic{grid-row:span 2;width:22px;height:22px;color:#ffd34e}
.ml-wal span.fund .ic{color:#7cf2ff}
.ml-wal b{font-size:17px;font-variant-numeric:tabular-nums}.ml-wal small{font-size:10.5px;color:rgba(255,255,255,.6)}
.ml-coin{position:absolute;top:10px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c4,#f2c14e 55%,#c98a1a);animation:coinup 1.1s ease-out forwards;pointer-events:none}
@keyframes coinup{from{transform:translateY(0) scale(.6);opacity:1}to{transform:translateY(-70px) scale(1.2) rotate(240deg);opacity:0}}
.ml-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}.ml-x:hover{background:rgba(255,255,255,.22)}.ml-x .ic{width:18px;height:18px}
.ml-tabs{display:flex;flex-direction:column;gap:6px;padding:8px 12px 18px}
.ml-tabs button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;color:rgba(255,255,255,.72);font-weight:600;font-size:14px;transition:all .3s cubic-bezier(.2,.8,.2,1)}
.ml-tabs button .ic{width:20px;height:20px}
.ml-tabs button:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(3px)}
.ml-tabs button.on{background:linear-gradient(120deg,rgba(255,159,208,.35),rgba(159,244,255,.22));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 10px 30px -12px rgba(255,120,200,.6)}
.ml-main{display:flex;flex-direction:column;min-height:0;padding:0 6px 18px}
.ml-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 8px 12px}
.ml-subs{display:flex;gap:6px;flex-wrap:wrap}
.ml-subs button,.ml-pay button{height:32px;padding:0 14px;border-radius:16px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);transition:all .25s}
.ml-subs button.on,.ml-pay button.on{background:#fff;color:#2a1640}
.ml-pay{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.65)}
.ml-pay button.on[data-pay=fund]{background:#7cf2ff;color:#062a3a}
.ml-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:4px 8px 10px;align-content:start;scrollbar-width:thin}
.ml-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 12px;border-radius:22px;text-align:center;
  background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  animation:cardin .5s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--i) * 28ms);transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.ml-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 18px 40px -18px rgba(0,0,0,.7)}
.ml-card.sel{box-shadow:inset 0 0 0 2px #ffd34e,0 18px 40px -16px rgba(255,211,78,.55)}
.ml-card.lux{background:linear-gradient(170deg,rgba(255,226,140,.28),rgba(255,140,200,.1))}
.ml-cv{width:100px;height:100px;image-rendering:pixelated;border-radius:16px;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.18),transparent 70%)}
.ml-card b{font-size:13px;font-weight:600;line-height:1.25;min-height:32px;display:flex;align-items:center}
.ml-price{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#ffe08a}.ml-price .ic{width:15px;height:15px}
.ml-tag{position:absolute;top:9px;left:9px;font-style:normal;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;background:linear-gradient(90deg,#ffd34e,#ff9fd0);color:#3a1530}
.ml-tag.own{left:auto;right:9px;background:rgba(110,231,160,.95);color:#0a3a1e}
.ml-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:rgba(255,255,255,.6)}
.ml-side{padding:4px 18px 18px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;overflow:auto}
#mlAv{width:200px;height:250px;image-rendering:pixelated;flex:none;border-radius:26px;background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.2),transparent 65%)}
.ms-info{width:100%;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center;padding:14px;border-radius:22px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ms-info b{font-size:18px;font-weight:700}.ms-info small{color:rgba(255,255,255,.66);font-size:12px;line-height:1.45}
.ms-grp{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px!important}
.ms-price{display:flex;justify-content:center;align-items:center;gap:6px;font-size:16px;font-weight:700;color:#ffe08a}.ms-price .ic{width:18px;height:18px}
.ml-btn{height:42px;border-radius:14px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.16);color:#fff;transition:transform .2s,filter .2s}
.ml-btn .ic{width:17px;height:17px}.ml-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.12)}.ml-btn:disabled{opacity:.55;cursor:default}
.ml-btn.gold{background:linear-gradient(100deg,#ffd34e,#ff9f6b 55%,#ff6fa8);color:#3a1530;box-shadow:0 10px 28px -10px rgba(255,140,120,.8)}
.ml-btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ml-btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:10px}
.ml-link{font-size:12px;color:rgba(255,255,255,.65);text-decoration:underline;text-underline-offset:3px}.ml-link:hover{color:#fff}
.ms-dirs{display:flex;justify-content:center;gap:6px}.ms-dirs button{width:34px;height:30px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:12px}
.iv{grid-column:1/-1;display:flex;flex-direction:column;gap:16px}
.iv section{padding:14px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.iv section.fund{background:rgba(124,242,255,.08)}
.iv h4{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 8px}.iv h4 .ic{width:18px;height:18px}.iv h4 em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:9px;background:rgba(255,255,255,.14)}.iv h4 small{font-weight:500;color:rgba(255,255,255,.6)}
.iv-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px}.iv-row:hover{background:rgba(255,255,255,.06)}
.iv-cv{width:52px;height:52px;image-rendering:pixelated;border-radius:12px;background:rgba(255,255,255,.08);flex:none}
.iv-t{flex:1;min-width:0;display:flex;flex-direction:column}.iv-t b{font-size:13.5px}.iv-t small{font-size:11.5px;color:rgba(255,255,255,.6)}.iv-t i{color:#6ee7a0;font-style:normal}
.iv-b{display:flex;align-items:center;gap:10px}
.iv-none{color:rgba(255,255,255,.55);font-size:12.5px;padding:6px 4px}
/* thanh chế độ đặt đồ + menu */
.decobar{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:22px;color:#fff;
  background:linear-gradient(120deg,rgba(60,24,90,.88),rgba(20,40,80,.88));box-shadow:0 18px 50px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);max-width:calc(100% - 24px)}
.decobar.on{animation:dbin .5s cubic-bezier(.2,1.3,.4,1) both}@keyframes dbin{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
.decobar div{display:flex;flex-direction:column}.decobar b{font-size:14px}.decobar small{font-size:11.5px;color:rgba(255,255,255,.7)}
.db-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#ff9fd0,#7cf2ff);color:#2a1640;flex:none}.db-ic .ic{width:19px;height:19px}
.db-btn{height:34px;padding:0 16px;border-radius:12px;background:#fff;color:#2a1640;font-weight:700;font-size:13px;flex:none}.db-btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.decomenu{position:fixed;z-index:41;min-width:190px;padding:8px;border-radius:18px;display:flex;flex-direction:column;gap:2px;color:#fff;background:rgba(24,18,40,.92);box-shadow:0 16px 40px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:dbin2 .25s ease both}
@keyframes dbin2{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.decomenu b{font-size:13px;padding:4px 8px 0}.decomenu small{font-size:11px;color:rgba(255,255,255,.6);padding:0 8px 6px}
.decomenu button{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;font-size:13px;color:#fff;text-align:left}.decomenu button:hover{background:rgba(255,255,255,.1)}.decomenu button .ic{width:16px;height:16px}
@media (max-width:900px){.ml-box{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr}.ml-tabs{flex-direction:row;overflow-x:auto;padding:0 12px 8px}.ml-tabs button{flex:none;padding:9px 12px}.ml-tabs button span{font-size:12.5px}.ml-side{order:3;flex-direction:row;padding:0 12px 8px;align-items:flex-start}#mlAv{width:120px;height:150px}.ms-info{padding:10px}.ml-main{order:4}.ml-head{padding:14px 14px 8px}.ml-logo b{font-size:22px}.ml-wal span{padding:6px 10px}.ml-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.ml-cv{width:76px;height:76px}}

/* quầy phần mềm */
.sw-card{background:linear-gradient(160deg,color-mix(in srgb,var(--g1) 22%,transparent),color-mix(in srgb,var(--g3) 22%,transparent))!important}
.sw-ico{position:relative;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;margin:8px auto 4px;background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:0 14px 30px -12px var(--g2),inset 0 2px 0 rgba(255,255,255,.5);overflow:hidden}
.sw-ico i{font-style:normal;font-size:40px}.sw-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw-ico.big{width:110px;height:110px;border-radius:30px;margin:0 0 6px}
.sw-tag{display:block;font-size:11.5px;opacity:.7;margin-bottom:4px}
.sw-pts{margin:8px 0 10px 18px;font-size:12.5px;line-height:1.6;opacity:.85}
.sw-key{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:rgba(255,211,78,.12);box-shadow:inset 0 0 0 1px rgba(255,211,78,.4)}
.sw-key code{font:700 14px ui-monospace,monospace;letter-spacing:.06em;color:#ffd34e;user-select:all}
.sw-adm{margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);font-size:12.5px}
.sw-adm summary{cursor:pointer;font-weight:700}.sw-adm form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sw-adm .rf{display:flex;justify-content:space-between;gap:8px;align-items:center}.sw-adm input[type=number]{width:110px}
.sw-dp{display:flex;flex-wrap:wrap;gap:6px 12px}