*{box-sizing:border-box}
:root{--gold:#ffd76a;--gold2:#b8902a;--bg:#0b0a14;--card:#16131f;--line:#3a2f45;--red:#c8323a;--txt:#eee}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:'Segoe UI',Arial,sans-serif;font-size:14px}
body{background:radial-gradient(ellipse at top,#2a1420 0%,#0b0a14 60%) fixed}
a{color:var(--gold)}
[hidden]{display:none!important}
.topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:linear-gradient(#24121a,#160c12);padding:8px 14px;border-bottom:2px solid var(--gold2);position:sticky;top:0;z-index:20}
.topbar .brand{color:var(--gold);letter-spacing:1px;font-size:15px}
.meinfo{font-size:13px}.grow{flex:1}
.btn{display:inline-block;background:linear-gradient(#f0b030,#c8801a);border:1px solid #ffd76a55;color:#1a1000;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer;margin:2px;text-decoration:none;font-size:14px;font-family:inherit}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}
.btn.small{padding:4px 9px;font-size:12px}
.btn.blue{background:linear-gradient(#3aa0ff,#1a6ad0);color:#fff}.btn.red{background:linear-gradient(#e5484d,#a8202a);color:#fff}
.btn.green{background:linear-gradient(#45d06a,#1f9a40);color:#04240c}
.btn.ghost{background:#231d30;color:#ddd;border-color:var(--line)}
.btn.off{opacity:.4;text-decoration:line-through}
.wrap{max-width:1320px;margin:0 auto;padding:12px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
@media(max-width:980px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.card h3,.card h4{margin:4px 0 8px;color:var(--gold)}
.stage-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:2px solid var(--gold2);border-radius:12px;overflow:hidden;user-select:none;-webkit-user-select:none}
.stage-wrap:fullscreen{border:0;border-radius:0;aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.stage-wrap:fullscreen #game{width:min(100vw,177.78vh);height:auto;aspect-ratio:16/9}
#game{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,3,10,.55);z-index:5;padding:12px}
.ov-bottom{align-items:flex-end;background:transparent}
.ov-box{background:rgba(22,16,30,.96);border:2px solid var(--gold2);border-radius:14px;padding:16px 20px;max-width:820px;width:100%;max-height:100%;overflow:auto;text-align:center;box-shadow:0 10px 40px #000a}
.ov-box h2{margin:4px 0;color:var(--gold);font-size:22px}.ov-box h3{margin:6px 0;color:#ffe9b0}
.small-box{max-width:340px}.small-box .btn{display:block;width:100%;margin:8px 0}
.sub{color:#b8aac8;font-size:12.5px}
.ok{color:#8dff7a}.warn{color:#ffb060}.bossname{color:#ff8a7a}
.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
@media(max-width:700px){.map-grid{grid-template-columns:repeat(2,1fr)}}
.stage-card{position:relative;background:linear-gradient(#2c2038,#1a1424);border:1px solid #5a4a6a;border-radius:10px;padding:10px 6px 8px;color:#eee;cursor:pointer;text-align:center;font-family:inherit;min-height:84px}
.stage-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.stage-card .num{position:absolute;top:4px;left:7px;color:var(--gold);font-weight:800;font-size:12px}
.stage-card b{display:block;font-size:13px;margin-top:6px}.stage-card small{display:block;color:#aaa;font-size:11px;margin-top:3px}
.stage-card.done{border-color:#8a7a2a}.stage-card.locked{opacity:.45;cursor:not-allowed}
.stars{color:#ffd24a;font-size:15px;letter-spacing:1px}.stars i{color:#555;font-style:normal}
.map-detail{margin-top:12px;padding:10px;border-top:1px solid var(--line);text-align:left}
.map-detail p{margin:6px 0}
.row-btn{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:8px 0}
.row-btn input{flex:1;min-width:160px}
.dlg{width:100%;max-width:860px;margin:0 auto 10px;background:linear-gradient(rgba(30,18,24,.95),rgba(14,10,20,.97));border:2px solid var(--gold2);border-radius:12px;padding:12px 16px;cursor:pointer}
.dlg-name{color:var(--gold);font-weight:800;font-size:17px;margin-bottom:4px}
.dlg-text{font-size:16px;line-height:1.5;min-height:48px}
.dlg-foot{display:flex;justify-content:space-between;align-items:center;color:#998;margin-top:4px}
.rewards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.rewards span{background:#2a2036;border:1px solid #5a4a6a;padding:4px 10px;border-radius:20px}
.outro{font-style:italic;color:#e8d8b0;max-width:640px;margin:10px auto}
h2.win{color:#ffe066;font-size:30px;text-shadow:0 0 18px #ffb000}h2.lose{color:#ff5a5a;font-size:28px}
.help{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:#b8aac8;margin:8px 2px}
kbd{background:#2a2236;border:1px solid #5a4a6a;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:11px;color:#fff;margin-right:2px}
.log{height:84px;overflow:auto;background:#09070f;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;color:#cbbfd8}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:10px}
.tab{background:#221b2e;color:#ddd;padding:7px 11px;border-radius:8px 8px 0 0;cursor:pointer;border:1px solid var(--line);border-bottom:0;font-family:inherit;font-size:13px}
.tab.active{background:var(--gold);color:#111;font-weight:800}
.panel{display:none}.panel.active{display:block}
input,select,textarea{background:#0f0c18;color:#eee;border:1px solid #4a3f5a;border-radius:8px;padding:8px;margin:4px 0;width:100%;font-family:inherit}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl td,.tbl th{border:1px solid var(--line);padding:6px;text-align:left}
.tbl th{background:#221b2e;color:var(--gold)}.tbl tr.me td{background:#3a2f10}
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:700px){.char-grid{grid-template-columns:1fr}}
.inv{display:flex;flex-wrap:wrap;gap:6px}.inv .it{background:#221b2e;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12.5px}
.skl>div{padding:6px 8px;border:1px solid var(--line);border-radius:8px;margin:4px 0;background:#1d1828}
.skl>div.lock{opacity:.5}.skl .g{font-family:KaiTi,STKaiti,SimSun,serif;color:var(--gold);font-size:20px;margin-right:6px}
.farm{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@media(max-width:600px){.farm{grid-template-columns:repeat(2,1fr)}}
.plot{background:linear-gradient(#4a3418,#2e200e);border:2px solid #7a5a2a;border-radius:10px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;min-height:96px;justify-content:center}
.plot.ready{background:linear-gradient(#2f7a2f,#1a4a1a);border-color:#7CFC00}
.plot .cd{color:#ffd76a;font-weight:700}
.li{padding:5px 0;border-bottom:1px solid #2a2236}
.chatbox{height:260px;overflow:auto;background:#09070f;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px;margin-top:6px}
.chatbox .msg{padding:2px 0;border-bottom:1px solid #1d1828;word-wrap:break-word}.chatbox b{color:var(--gold)}.chatbox b.me{color:#8dff7a}.chatbox .sys{opacity:.6}
.chat-in{display:flex;gap:6px;margin-top:6px}.chat-in input{margin:0}
.small-text{font-size:12.5px}.credits{color:#a898b8;line-height:1.6}
.toasts{position:fixed;top:64px;right:14px;z-index:100;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#221b2e;border:1px solid var(--gold2);color:#fff;padding:8px 14px;border-radius:8px;box-shadow:0 4px 20px #0008;transition:opacity .4s,transform .4s;max-width:320px}
.toast.ok{border-color:#3ac060}.toast.err{border-color:#e5484d}.toast.out{opacity:0;transform:translateX(30px)}
/* dieu khien cam ung */
.authbox{max-width:440px;margin:40px auto}.logo{text-align:center;font-size:26px;color:var(--gold);text-shadow:0 2px 0 #000;margin-top:20px}
.logo .cn{font-family:KaiTi,STKaiti,SimSun,serif;font-size:44px;display:block}
/* icon atlas (game-icons.net) */
.ico{display:inline-block;vertical-align:middle;background:url(../img/icons.png?v=7) no-repeat;border-radius:22%;flex:none}
.tab .ico,.btn .ico{margin-right:2px}
.inv .it .ico,.rewards .ico,.q-rw .ico{margin-right:4px}
/* nhiem vu */
.quest{background:#1d1828;border:1px solid var(--line);border-left:4px solid #5a4a6a;border-radius:10px;padding:8px 10px;margin:8px 0;text-align:left}
.quest.q-available{border-left-color:#ffd24a}.quest.q-active{border-left-color:#3a8aff}.quest.q-ready{border-left-color:#3ac060;background:#17261c}.quest.q-done{opacity:.55}.quest.q-locked{opacity:.6}
.q-head{display:flex;align-items:center;gap:8px}.q-head b{flex:1;color:#ffe9b0}
.q-st{font-size:11px;padding:2px 8px;border-radius:10px;background:#2a2236}.q-ready .q-st{background:#1f7a3a;color:#fff}.q-available .q-st{background:#7a5a10;color:#fff}
.q-desc{font-size:13px;margin:4px 0}
.q-bar{position:relative;height:14px;background:#0a0812;border-radius:7px;overflow:hidden;margin:4px 0}
.q-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9a3a,#ffd24a)}
.q-bar span{position:absolute;inset:0;text-align:center;font-size:10px;line-height:14px;color:#fff;text-shadow:0 1px 2px #000}
.q-rw{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0;font-size:12px}.q-rw span{background:#2a2236;border-radius:12px;padding:2px 8px 2px 3px;display:inline-flex;align-items:center}
.npc-box{max-width:620px;text-align:left}
.npc-head{display:flex;align-items:center;gap:12px}.npc-head h2{margin:0}
.npc-greet{font-style:italic;color:#e8d8b0;border-left:3px solid var(--gold2);padding-left:10px}
/* bang hoi */
.emb-pick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.emb{background:transparent;border:2px solid transparent;border-radius:12px;padding:2px;cursor:pointer}.emb.on{border-color:var(--gold);box-shadow:0 0 10px #ffd76a88}
.guild-li{display:flex;align-items:center;gap:10px}.guild-li>div{flex:1}.guild-li h3{margin:0;color:var(--gold)}
.notice{background:#221b2e;border-radius:8px;padding:6px 10px}
.rewards span{display:inline-flex;align-items:center}
/* ===== v5: game toan man hinh ===== */
body.game-page{background:#06040a}
.topbar.slim{padding:4px 10px;gap:6px;min-height:40px}
.topbar.slim .brand{font-size:14px}
.game-shell{display:flex;flex-direction:column;align-items:center;padding:4px 6px 0}
.game-page .stage-wrap{width:min(calc(100vw - 12px),calc((100vh - 52px) * 16 / 9));aspect-ratio:16/9;container-type:inline-size;border-width:2px;margin:0 auto}
.game-page .credits{max-width:1280px;color:#7a6a8a;padding:6px 8px;text-align:center;line-height:1.5}
/* chat dock */
.chat-dock{position:absolute;left:.8cqw;bottom:1cqw;width:22cqw;opacity:.85;z-index:3;display:flex;flex-direction:column;gap:.3cqw;font-size:max(11px,.92cqw)}
.chat-dock .log{height:3.6cqw;background:rgba(6,4,12,.45);border:0;border-radius:6px;padding:.3cqw .5cqw;font-size:inherit;color:#d8c8e8;overflow:auto}
.chat-dock .chatbox{height:5cqw;margin:0;background:rgba(6,4,12,.55);border:1px solid rgba(255,215,106,.18);border-radius:6px;padding:.3cqw .5cqw;font-size:inherit}
.chat-row{display:flex;gap:.3cqw;align-items:center}
.chat-row input{width:4cqw;margin:0;padding:.2cqw .4cqw;font-size:inherit}
.cbtn{background:rgba(30,24,46,.85);color:#ccc;border:1px solid #4a3f5a;border-radius:6px;padding:.15cqw .6cqw;font-size:inherit;cursor:pointer;font-family:inherit}
.cbtn.on{background:#c8901a;color:#111;border-color:#ffd76a;font-weight:700}
.cbtn.send{background:#1f9a40;color:#fff}
.chat-dock .chat-in{display:flex;gap:.3cqw;margin:0}
.chat-dock .chat-in input{margin:0;padding:.3cqw .5cqw;font-size:inherit;background:rgba(6,4,12,.7)}
/* thanh phim tat */
.hotbar{position:absolute;right:.8cqw;bottom:1cqw;z-index:3;display:grid;grid-template-columns:repeat(5,3.3cqw);gap:.35cqw}
.hotbar button{position:relative;width:3.3cqw;height:3.3cqw;padding:0;border:0;background:none;cursor:pointer;border-radius:22%}
.hotbar button .ico{width:100%!important;height:100%!important;display:block}
.hotbar button:hover{filter:brightness(1.25);transform:translateY(-2px)}
.hotbar kbd{position:absolute;right:-.2cqw;bottom:-.2cqw;font-size:max(9px,.75cqw);padding:0 .3cqw}
/* cua so */
.win-box{max-width:min(92cqw,1100px);width:92cqw;max-height:90%;display:flex;flex-direction:column;padding:10px 14px;text-align:left}
.win-head{display:flex;align-items:flex-start;gap:8px}.win-head .tabs{flex:1;margin:0}
.win-body{overflow:auto;padding-top:8px;flex:1}
.win-x{background:#3a2030;color:#fff;border:1px solid #8a4a5a;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px;flex:none}
.map-box{position:relative}.map-box .win-x{position:absolute;right:10px;top:10px}
.online-wrap{display:none}#p-pk.active~.online-wrap{display:block}
.tab kbd{font-size:10px;margin-left:4px}
.stage-card .tag{position:absolute;top:4px;right:6px;font-size:9px;background:#5a2a7a;color:#fff;padding:1px 5px;border-radius:8px}
.map-grid{grid-template-columns:repeat(5,1fr)}
.map-box{max-width:min(94cqw,1150px);width:94cqw;max-height:92%}
/* chon mon phai */
.sect-box{max-width:min(94cqw,1150px);width:94cqw;max-height:94%}
.sect-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:8px 0}
.sect-card{background:linear-gradient(#2c2038,#1a1424);border:2px solid #4a3a5a;border-top:4px solid var(--c);border-radius:10px;padding:6px 4px;color:#eee;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px}
.sect-card b{font-size:12.5px}.sect-card small{font-size:10px;color:#aaa;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sect-card:hover,.sect-card.on{border-color:var(--gold);box-shadow:0 0 12px #ffd76a66}
.sect-detail{border-top:1px solid var(--line);padding-top:8px;text-align:left}
.sect-detail h3{display:flex;align-items:center;gap:8px;margin:2px 0}
.sect-sk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.sect-sk span{display:flex;align-items:center;gap:6px;background:#1d1828;border-radius:8px;padding:4px 8px;font-size:12.5px}
.skl>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.keys-help{text-align:left;font-size:12px;color:#c8b8d8;margin-top:8px}.keys-help p{margin:4px 0}
.small-box{max-width:560px}
@media(max-width:900px){.sect-grid{grid-template-columns:repeat(4,1fr)}.map-grid{grid-template-columns:repeat(4,1fr)}.sect-sk{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.chat-dock{display:none}.sect-grid{grid-template-columns:repeat(2,1fr)}.map-grid{grid-template-columns:repeat(2,1fr)}.hotbar{grid-template-columns:repeat(10,5.5cqw);bottom:auto;top:12cqw;right:1cqw}.hotbar button{width:5.5cqw;height:5.5cqw}}
.stage-wrap:fullscreen{width:100vw;height:100vh}

/* ===== v7: nhan vat, hanh trang, lo ren, ban do the gioi, tien te ===== */
.cur{display:inline-flex;align-items:center;gap:3px;font-weight:700}.cur.gold{color:#ffd76a}.cur.ingot{color:#ff9ad8}
.meinfo .cur .ico{width:15px!important;height:15px!important}
.curbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:6px}
.curbar>span:not(.cur):not(.grow){font-size:12px;color:#bba}.curbar.small{font-size:12px;gap:12px}.curbar .grow{flex:1}
.char-v7{display:grid;grid-template-columns:220px 1fr 330px;gap:14px;align-items:start}
.char-portrait{position:relative;border-radius:14px;padding:6px;text-align:center;background:radial-gradient(circle at 50% 40%,#3a2c4e,#120e1a 75%);border:2px solid var(--c)}
.char-portrait canvas{display:block;margin:0 auto;width:170px;height:210px}
.char-name b{display:block;color:var(--gold);font-size:16px}.char-name small{display:inline-flex;align-items:center;gap:4px;color:#ddd}
.av-switch{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;justify-content:center}.av-switch .btn{padding:3px 6px;font-size:11px}
.lvbox{margin:6px 0}.lvbox b{color:#ffe9b0}
.xpbar,.rate{position:relative;height:16px;background:#0a0812;border-radius:8px;overflow:hidden;margin-top:3px;border:1px solid #3a2f4a}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#3a8aff,#7ad0ff)}
.rate i{display:block;height:100%;background:linear-gradient(90deg,#c0392b,#ffd24a,#3ac060)}
.xpbar span,.rate span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:16px;color:#fff;text-shadow:0 1px 2px #000}
.curbox{display:flex;flex-direction:column;gap:4px;font-size:12px;background:#1d1828;border-radius:8px;padding:6px 8px}
.stat-tbl td,.stat-tbl th{text-align:center;padding:4px 6px}.stat-tbl td:first-child{text-align:left}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{position:relative;background:linear-gradient(#211a2e,#16111f);border:2px dashed #4a3a5a;border-radius:10px;padding:18px 6px 6px;min-height:118px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.slot.full{border-style:solid;border-color:#7a5a2a}
.slot-name{position:absolute;top:2px;left:6px;font-size:10px;color:#a898b8;text-transform:uppercase;letter-spacing:.5px}
.slot small{font-size:10.5px;line-height:1.2}.slot .empty{color:#665;margin:8px 0}.slot .row-btn{margin-top:auto;gap:4px}.slot .btn{padding:2px 6px;font-size:11px}
.eq-ico{position:relative;display:inline-block;line-height:0}
.eq-ico em{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:10px;font-weight:700;line-height:1;background:#120e1a;color:#ffd76a;border:1px solid #ffd76a;border-radius:6px;padding:1px 3px}
.eqn{color:#f0e6d0}.eqn.pl1{color:#7ad07a}.eqn.pl2{color:#5ab0ff}.eqn.pl3{color:#d07aff;text-shadow:0 0 6px #a040ff88}.eqn.pl4{color:#ffb030;text-shadow:0 0 8px #ff800099}
.socks{display:inline-flex;gap:3px;margin-top:2px}
.sock{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid #6a5a7a;background:#0a0812;font-size:8px;font-style:normal;line-height:10px;text-align:center;color:#fff;font-weight:700}
.sock.on{background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,#000 130%);border-color:var(--c);box-shadow:0 0 5px var(--c)}
.eq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.eq-card{display:flex;align-items:center;gap:10px;background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:8px}
.eq-card.worn{border-color:#3ac060}
.eq-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.eq-info small{font-size:11px}
.eq-btns{display:flex;flex-direction:column;gap:4px}.eq-btns .btn{padding:3px 8px;font-size:11px;white-space:nowrap}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.inv-cell{background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.inv-cell b{font-size:12px;color:#ffe9b0}.inv-cell small{font-size:10px;color:#aaa;line-height:1.2}
.inv-cell .row-btn{gap:3px;margin-top:auto;justify-content:center}.inv-cell .btn{padding:2px 6px;font-size:10.5px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.shop-item{display:flex;gap:10px;align-items:flex-start;background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:8px}
.shop-item>div{flex:1}.shop-item small{font-size:11px}
.buy-row{display:inline-flex;align-items:center;gap:4px;margin:4px 10px 0 0}.buy-row .btn{padding:2px 7px;font-size:11px}
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.subtab{display:inline-flex;align-items:center;gap:4px;background:#241c30;color:#ddd;border:1px solid #4a3a5a;border-radius:18px;padding:5px 12px;cursor:pointer;font-family:inherit;font-size:13px}
.subtab.on{background:linear-gradient(#e0a020,#a86a10);color:#111;border-color:#ffd76a;font-weight:700}
.forge-split{display:grid;grid-template-columns:260px 1fr;gap:12px;align-items:start}
.forge-list{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow:auto;padding-right:4px}
.fl-item{display:flex;align-items:center;gap:8px;background:#1d1828;border:1px solid var(--line);border-radius:8px;padding:5px 8px;cursor:pointer;color:#eee;font-family:inherit;text-align:left;font-size:12px}
.fl-item.on{border-color:var(--gold);background:#2c2238;box-shadow:0 0 8px #ffd76a55}
.forge-main{position:relative;background:radial-gradient(circle at 50% 0%,#33264a,#16111f 70%);border:1px solid #5a4a6a;border-radius:12px;padding:12px 16px;min-height:260px}
.fm-head{display:flex;align-items:center;gap:12px;font-size:16px}
.enh-arrow{font-size:26px;text-align:center;margin:8px 0}
.forge-main .big{font-size:16px;padding:8px 22px;display:inline-flex;align-items:center;gap:6px}
.chk{display:flex;align-items:center;gap:6px;margin:6px 0;cursor:pointer;font-size:13px}.chk input{width:auto;margin:0}
.fx-ok{animation:fxok .9s ease-out}.fx-fail{animation:fxfail .6s ease-out}
@keyframes fxok{0%{box-shadow:0 0 0 #ffd76a}30%{box-shadow:0 0 50px 10px #ffd76acc;border-color:#ffd76a}100%{box-shadow:0 0 0 transparent}}
@keyframes fxfail{0%,100%{transform:none}20%{transform:translateX(-8px);border-color:#ff4040}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.sock-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.sock-big{width:120px;min-height:110px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#120e1a;border:2px dashed #5a4a6a;border-radius:12px;padding:6px;text-align:center}
.sock-big.on{border-style:solid;border-color:var(--c);box-shadow:inset 0 0 18px var(--c)}
.sock-big small{font-size:10.5px;line-height:1.2}.sock-big .btn{padding:2px 6px;font-size:10.5px;margin-top:auto}
.sock-big .hole{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#000 40%,#3a2f4a);border:2px solid #6a5a7a}
.stone-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.stone-it{display:flex;align-items:center;gap:8px;background:#1d1828;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:8px;padding:5px 8px}
.stone-it span{flex:1;font-size:12px}.stone-it .btn{padding:3px 8px;font-size:11px}
.btn.pulse{animation:pulse .5s infinite alternate}@keyframes pulse{to{filter:brightness(1.5)}}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.av-pick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.av-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1d1828;border:2px solid #4a3a5a;border-radius:12px;padding:4px 8px;cursor:pointer;color:#eee;font-family:inherit}
.av-card.on{border-color:var(--gold);box-shadow:0 0 12px #ffd76a77;background:#2c2238}.av-card b{font-size:12px}
.av-card canvas{width:96px;height:120px}
.wmap-wrap{border-radius:10px;overflow:hidden;box-shadow:0 6px 24px #000a;margin-top:6px;line-height:0}
#wmap{display:block;width:100%;height:auto;aspect-ratio:1200/560}
.map-detail{margin-top:8px}
.map-detail .here{color:#ff6a5a}
.map-list{margin-top:8px;text-align:left}.map-list summary{cursor:pointer;color:var(--gold);font-weight:700}
@media(max-width:1000px){.char-v7{grid-template-columns:200px 1fr}.char-right{grid-column:1/-1}.slots{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.char-v7{grid-template-columns:1fr}.forge-split{grid-template-columns:1fr}.forge-list{max-height:none;flex-direction:row;flex-wrap:wrap}.slots{grid-template-columns:1fr 1fr}}
.sect-detail{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}.sect-detail>p.sub{grid-column:1/-1}
.sect-av{text-align:center}.sect-av h4{margin:0 0 4px}.sect-av .av-pick{justify-content:center;margin:0 0 6px}
.sect-detail .sect-sk{grid-template-columns:repeat(2,1fr);margin:4px 0}
.wmap-wrap{max-width:68cqw;margin:6px auto 0}
@media(max-width:900px){.sect-detail{grid-template-columns:1fr}.wmap-wrap{max-width:none}}
.win-head .tab{padding:5px 9px;font-size:13px}.win-head .tabs{gap:4px}
/* ===== v8: tao nhan vat, PK, cong ===== */
.cc-box{max-width:min(96cqw,1240px);width:96cqw;max-height:96%}
.cc-wrap{display:grid;grid-template-columns:260px 1fr 380px;gap:14px;align-items:start;text-align:left}
.cc-portrait{position:relative;border-radius:16px;padding:8px;text-align:center;background:radial-gradient(circle at 50% 35%,#3a2c4e,#0e0a16 78%);border:2px solid var(--c);box-shadow:0 0 24px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.5)}
.cc-portrait canvas{display:block;margin:0 auto;width:230px;height:280px;max-width:100%}
.cc-name b{display:block;color:var(--gold);font-size:18px}.cc-name small{display:inline-flex;align-items:center;gap:4px;color:#ddd}
.cc-left .av-pick{justify-content:center;margin:8px 0}.cc-left .av-card{padding:3px 6px}.cc-left .av-card canvas{width:72px;height:90px}.cc-left .av-card small{font-size:10px;color:#aaa}
.av-desc{font-size:12px;text-align:center;margin:4px 0}
.cc-grid{grid-template-columns:repeat(4,1fr)!important;margin:0}
.cc-grid .sect-card{padding:8px 4px}.cc-grid .sect-card b{font-size:12px}
.sect-card.beat{box-shadow:0 0 0 2px #3ac060 inset}.sect-card.lose{box-shadow:0 0 0 2px #e5484d inset}
.cc-legend{margin:6px 0 0;font-size:11px}
.cc-right{border-top:0;padding-top:0;display:block!important;background:#160f20;border:1px solid var(--line);border-radius:12px;padding:10px 12px;max-height:calc(96cqw*0.36);overflow:auto}
.cc-right h3{margin:0 0 4px}.sd-desc{margin:2px 0 6px;font-size:13px}
.cc-right .sect-sk{grid-template-columns:1fr 1fr}.cc-right .sect-sk span{font-size:11.5px;padding:3px 6px}
.cc-ok{width:100%;margin:8px 0 4px;font-size:15px;padding:9px}
.sbars{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.sbar{display:grid;grid-template-columns:92px 1fr 48px;align-items:center;gap:6px;font-size:12px}
.sbar div{height:10px;background:#0a0812;border-radius:5px;overflow:hidden;border:1px solid #2f2640}.sbar i{display:block;height:100%;border-radius:5px;transition:width .3s}
.sbar b{text-align:right}
.ctr{font-size:12px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.chip{display:inline-flex;align-items:center;gap:3px;background:#221a2e;border:1px solid var(--c);border-radius:10px;padding:1px 6px 1px 2px;margin:0 3px 2px 0}
.ctr-ok b{color:#5ad07a}.ctr-bad b{color:#ff6a6a}
.av-note{display:block;text-align:center;margin:-2px 0 4px}
.pk-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.pk-mode{background:#1d1828;border:2px solid #4a3a5a;border-radius:10px;padding:8px;color:#eee;cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:2px}
.pk-mode small{color:#aaa;font-size:11px}.pk-mode.on.m0{border-color:#5ad07a;box-shadow:0 0 10px #5ad07a66}.pk-mode.on.m1{border-color:#d08aff;box-shadow:0 0 10px #d08aff66}.pk-mode.on.m2{border-color:#ff4a4a;box-shadow:0 0 10px #ff4a4a77}
.pk-stat{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#1d1828;border-radius:10px;padding:8px 10px}
.pk-stat .prov{flex:1;min-width:180px}.xpbar.prov i{background:linear-gradient(90deg,#ffb030,#ff3030)}
.orange{color:#ff9a3a}.purple{color:#d08aff}
@media(max-width:1000px){.cc-wrap{grid-template-columns:1fr 1fr}.cc-right{grid-column:1/-1;max-height:none}}
@media(max-width:640px){.cc-wrap{grid-template-columns:1fr}.cc-grid{grid-template-columns:repeat(3,1fr)!important}.pk-modes{grid-template-columns:1fr}}
.cc-left .av-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cc-left .av-card{padding:3px 2px;min-width:0}.cc-left .av-card canvas{width:100%;height:auto;aspect-ratio:72/90}.cc-left .av-card b{font-size:11px}
.cc-portrait canvas{width:200px;height:244px}
.cc-right{max-height:none}
.cc-left .cc-ok{margin-top:4px}
/* ===== v9: tuong tac nguoi choi, tin rieng, giao dich, da cuong hoa ===== */
.hotbar{grid-template-columns:repeat(6,3.3cqw)}
.hotbar button .badge{position:absolute;top:-.3cqw;left:-.3cqw;min-width:16px;height:16px;border-radius:8px;background:#e5484d;color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:700;padding:0 3px;box-shadow:0 0 6px #e5484d}
.pm-bar{position:absolute;top:7.5cqw;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;gap:6px;width:min(560px,60cqw);pointer-events:none}
.pm-card{pointer-events:auto;display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#5a1a5a,#2a1a40);border:2px solid #ff8ad8;border-radius:12px;padding:6px 10px;color:#fff;box-shadow:0 4px 18px rgba(255,90,200,.45);animation:pmin .3s ease-out;transition:opacity .4s,transform .4s;font-size:13px}
.pm-card b{color:#ffb8ec;white-space:nowrap}.pm-card span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-card.out{opacity:0;transform:translateY(-10px)}
.pm-x{background:none;border:0;color:#fff;cursor:pointer;font-size:14px;padding:0 4px}
@keyframes pmin{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.chat-dock .msg.pm b{color:#ff8ad8}.chat-dock .msg.pm{background:rgba(255,90,200,.12);border-radius:4px}
.chat-to{color:#ff8ad8;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9cqw}
.cbtn.blink{animation:pulse .6s infinite alternate;background:#a02a8a;color:#fff}
.pmenu{position:absolute;z-index:8;width:230px;background:#1a1226f2;border:2px solid #b8902a;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 28px #000c}
.pmenu>button,.pm-duel button{background:#2a2038;color:#eee;border:1px solid #4a3a5a;border-radius:8px;padding:6px 8px;text-align:left;cursor:pointer;font-family:inherit;font-size:13px}
.pmenu>button:hover,.pm-duel button:hover{background:#3a2c4e;border-color:#ffd76a}.pmenu>button[disabled]{opacity:.6;cursor:default}
.pm-head{display:flex;gap:6px;align-items:flex-start;margin-bottom:4px}.pm-head>div{flex:1;display:flex;flex-direction:column}.pm-head b{color:#ffd76a}.pm-head small{font-size:11px}
.pm-duel{display:flex;gap:4px;align-items:center}.pm-duel button{flex:1}.pm-duel input{width:70px;margin:0;padding:4px}.pm-duel small{font-size:10px;color:#aaa}
.plink{color:#9ad0ff;cursor:pointer;text-decoration:underline dotted}
.li.offer{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li.offer.duel{border-left:3px solid #ff6a5a}.li.offer.trade{border-left:3px solid #5ad07a}
.li .grow{flex:1}.li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:#666;display:inline-block}.dot.on{background:#3ad060;box-shadow:0 0 6px #3ad060}
.on-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.on-p{display:flex;align-items:center;gap:6px;background:#1d1828;border:1px solid var(--line);border-radius:8px;padding:6px;color:#eee;cursor:pointer;font-family:inherit;text-align:left}.on-p:hover{border-color:#ffd76a}
.duel-res{border-radius:12px;padding:10px;margin-bottom:8px}.duel-res.win{background:#16301c;border:2px solid #3ac060}.duel-res.lose{background:#30161a;border:2px solid #e5484d}
.duel-log{max-height:160px;overflow:auto;font-size:12px;color:#ddd;margin:6px 0}
.trade-box{max-width:min(92cqw,980px);width:92cqw;max-height:92%;position:relative;text-align:left}.trade-box .win-x{position:absolute;right:10px;top:10px}
.trade-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.tr-col{background:#1d1828;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.tr-col>label{display:flex;align-items:center;gap:6px}.tr-col>label input{width:130px;margin:0}
.tr-list{display:flex;flex-direction:column;gap:3px;max-height:28vh;overflow:auto}
.tr-it{display:flex;align-items:center;gap:6px;font-size:12px;background:#140f1c;border-radius:6px;padding:3px 6px}.tr-it span{flex:1}.tr-it input[type=number]{width:64px;margin:0;padding:3px}.tr-it input[type=checkbox]{width:auto;margin:0}
.eq-ico u.tier{position:absolute;left:-4px;top:-4px;text-decoration:none;font-size:10px;font-weight:700;background:#c8a050;color:#111;border-radius:6px;padding:0 4px;line-height:14px}
.stone-it.up{border-left-color:#c8a050}
.eqn.pl5{color:#ff4a4a;text-shadow:0 0 10px #ff2a2a}
@media(max-width:700px){.trade-grid{grid-template-columns:1fr}.pm-bar{width:92cqw;top:14cqw}}
@media(max-width:600px){.hotbar{grid-template-columns:repeat(11,5.5cqw)}}
.stone-it .eq-ico{flex:none}
/* ===== v10: cua so to hon, diem tiem nang, nhiem vu, canh ===== */
.win-box{max-width:min(97cqw,1500px);width:97cqw;max-height:95%;font-size:15px}
.win-body{font-size:15px}
.char-v7{grid-template-columns:260px 1fr 400px}
.char-portrait canvas{width:210px;height:260px}
.stat-tbl{font-size:14px}.stat-tbl td,.stat-tbl th{padding:6px 8px}
.inv-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.inv-cell b{font-size:13.5px}.inv-cell small{font-size:11px}
.inv-cell .eq-ico .ico{width:48px!important;height:48px!important}
.eq-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}.eq-card .eq-ico .ico{width:52px!important;height:52px!important}.eq-info small{font-size:12px}
.slot{min-height:132px}
.wing-ico{background:#120a1e url(../img/wings.png?v=10) no-repeat;background-size:500% 800%;border-radius:22%;box-shadow:inset 0 0 8px #000}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.attr{display:flex;align-items:center;gap:6px;background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.attr>div{flex:1;display:flex;flex-direction:column}.attr b{font-size:13.5px}.attr b em{font-style:normal;color:#ffd76a;margin-left:4px}.attr small{font-size:11px;color:#aaa}
.attr .a-ico{font-size:22px}.attr .btn{padding:3px 7px;font-size:11px}
.pts{font-size:12px;background:#333;border-radius:10px;padding:2px 8px;margin-left:6px}.pts.has{background:#c8901a;color:#111;animation:pulse .7s infinite alternate}
.qbadge{background:#e5484d;color:#fff;border-radius:8px;padding:0 6px;font-size:11px;margin-left:3px}
.q-main-head{background:#1d1828;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.q-cur .quest{border-left-color:#ffd24a;box-shadow:0 0 14px #ffd24a33;background:#221a10}
.q-all summary{cursor:pointer;color:var(--gold);font-weight:700;margin:6px 0}
@media(max-width:1100px){.char-v7{grid-template-columns:220px 1fr}.attrs{grid-template-columns:1fr}}
/* ===== v12: chu to, nhan duoi bieu tuong, nhiem vu de doc ===== */
html,body{font-size:16px}
.meinfo{font-size:15px}.topbar .brand{font-size:17px}
.btn{font-size:15px}.btn.small{font-size:14px;padding:5px 10px}
.sub{font-size:14.5px}
.win-body{font-size:17px}
.tab{font-size:15px}.subtab{font-size:15px}
.tbl{font-size:15px}
.quest{padding:12px 14px;margin:10px 0;border-left-width:6px}
.q-head{gap:10px}.q-head b{font-size:20px}.q-head .ico{width:28px!important;height:28px!important}
.q-st{font-size:14px;padding:3px 10px}
.q-desc{font-size:17px;line-height:1.5;margin:6px 0}
.q-desc small{font-size:15px}
.q-bar{height:22px;border-radius:11px}.q-bar span{font-size:14px;line-height:22px}
.q-rw{font-size:16px;gap:8px}.q-rw span{padding:4px 12px 4px 4px}
.quest .btn.small{font-size:16px;padding:7px 16px}
.q-main-head{font-size:17px}
.npc-greet{font-size:17px}.npc-box{max-width:820px}
.chat-dock{font-size:max(13px,1.05cqw)}
.hotbar{grid-template-columns:repeat(6,4.6cqw);gap:.5cqw .35cqw}
.hotbar button{width:4.6cqw;height:auto;display:flex;flex-direction:column;align-items:center}
.hotbar button .ico{width:3.3cqw!important;height:3.3cqw!important}
.hotbar kbd{right:.2cqw;bottom:auto;top:2.3cqw}
.hb-name{display:block;font-size:max(11px,.85cqw);color:#ffe9b0;text-shadow:0 1px 2px #000,0 0 3px #000;font-weight:700;white-space:nowrap;margin-top:1px;line-height:1.1}
.sect-card b{font-size:14px}.attr b{font-size:15px}.attr small{font-size:12.5px}
.inv-cell b{font-size:15px}.inv-cell small{font-size:12.5px}
.eq-info small{font-size:13.5px}.shop-item small{font-size:13px}
@media(max-width:600px){.hotbar{grid-template-columns:repeat(6,8cqw)}.hotbar button{width:8cqw}.hotbar button .ico{width:5.5cqw!important;height:5.5cqw!important}}
.credits-box{margin-top:10px;font-size:13px;color:#b8aac8;text-align:left}.credits-box summary{cursor:pointer;color:var(--gold)}
.hotbar{grid-template-columns:repeat(4,4.6cqw)}
@media(max-width:600px){.hotbar{grid-template-columns:repeat(6,8cqw)}}
/* ===== v13: dien thoai (html.mobile) - toan man hinh, can gat, cum nut chieu ===== */
.touch-help,.pause-extra,.rotate-hint{display:none}
html.mobile,html.mobile body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.mobile body{position:fixed;inset:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.mobile input,html.mobile textarea,html.mobile select{-webkit-user-select:text;user-select:text;font-size:16px}
html.mobile .topbar,html.mobile .game-page .credits{display:none}
html.mobile .game-shell{padding:0;height:100%}
html.mobile .stage-wrap{width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;margin:0}
html.mobile #game{object-fit:contain;cursor:default}
html.mobile kbd,html.mobile .keys-help{display:none}
/* lop dieu khien */
html.mobile .touch{display:block;position:absolute;inset:0;padding:0;z-index:4;pointer-events:none}
.touch.idle .joy,.touch.idle .tc-act,.touch.idle .tc-top{display:none}
.joy{position:absolute;left:0;bottom:0;width:42%;height:64%;pointer-events:auto;touch-action:none}
.joy-base{position:absolute;left:calc(env(safe-area-inset-left,0px) + 100px);top:calc(100% - 96px);width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 30%,rgba(16,10,26,.5));border:2px solid rgba(255,215,106,.5);opacity:.7;transition:opacity .15s;pointer-events:none}
.joy-base.on{opacity:1;border-color:#ffd76a}
.joy-knob{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c0,#d8a020 60%,#8a5a10);border:2px solid #fff8;box-shadow:0 3px 12px #000b}
.joy-l,.joy-r,.joy-d{position:absolute;color:#ffd76acc;font-size:16px;line-height:1;text-shadow:0 1px 3px #000}
.joy-l{left:9px;top:50%;margin-top:-8px}.joy-r{right:9px;top:50%;margin-top:-8px}.joy-d{bottom:7px;left:50%;margin-left:-6px}
.tc-act{position:absolute;right:calc(env(safe-area-inset-right,0px) + 6px);bottom:6px;width:432px;height:250px;transform-origin:100% 100%;transform:scale(var(--tcs,1));pointer-events:none}
.tb{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid #ffd76aaa;background:radial-gradient(circle at 50% 35%,rgba(70,50,90,.75),rgba(16,10,26,.82));color:#fff;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 3px 10px #0009;transition:transform .06s}
.tb.on{transform:scale(.92);background:radial-gradient(circle,rgba(255,215,106,.7),rgba(120,80,20,.85));border-color:#fff}
.tb b{font-size:26px;line-height:1;font-family:KaiTi,STKaiti,SimSun,serif;font-weight:400}
.tb small{font-size:11px;font-weight:700;color:#ffe9b0;text-shadow:0 1px 2px #000;line-height:1.1;white-space:nowrap}
.tb-atk{right:8px;bottom:10px;width:92px;height:92px;border-color:#ffd76a;border-width:3px;background:radial-gradient(circle at 50% 35%,rgba(200,60,40,.85),rgba(70,10,10,.9))}
.tb-atk b{font-size:40px;color:#fff3c0}.tb-atk small{font-size:13px}
.tb-jump{right:110px;bottom:6px;width:68px;height:68px}
.tb-dash{right:14px;bottom:112px;width:62px;height:62px}
.tb-talk{right:96px;bottom:88px;width:78px;height:58px;border-radius:16px;border-color:#7cf0ff;animation:pulse .7s infinite alternate}
.tb-talk b{font-size:22px}.tb-talk small{font-size:10.5px}
.tc-sk{position:absolute;right:186px;bottom:4px;width:186px;height:126px;pointer-events:none}
.tc-sk .tb{position:relative;float:left;width:58px;height:58px;margin:0 4px 6px 0;border-radius:14px;justify-content:flex-start;padding-top:3px}
.tc-sk .tb small{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;background:rgba(0,0,0,.6);padding:1px 2px;overflow:hidden;text-overflow:ellipsis}
.tc-ico{display:block;line-height:0;pointer-events:none}.tc-ico b{font-size:28px;line-height:34px}
.cdm{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:conic-gradient(rgba(0,0,0,.68) calc(var(--cd,0)*360deg),transparent 0)}
.cdt{position:absolute;left:0;right:0;top:50%;margin-top:-11px;font-style:normal;font-weight:800;font-size:16px;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000;pointer-events:none}
.tb.lock{filter:grayscale(1) brightness(.6)}.tb.lock .cdt{font-size:12px;color:#ddd}
.tb.nomp{border-color:#5a7ad0;filter:saturate(.5)}
.tc-pot{position:absolute;right:378px;bottom:4px;width:52px;height:120px;pointer-events:none}
.tc-pot .tb{position:relative;width:52px;height:52px;margin-bottom:8px;border-radius:14px;border-color:#7ab0ffaa}
.tc-pot .tb em{position:absolute;right:3px;top:1px;font-style:normal;font-size:11px;font-weight:800;color:#fff;text-shadow:0 0 3px #000}
.tc-pot .tb small{position:absolute;bottom:0;left:0;right:0;font-size:9.5px;background:rgba(0,0,0,.55)}
.tc-top{position:absolute;right:calc(env(safe-area-inset-right,0px) + 8px);top:calc(100vw * .049 + 4px);display:flex;gap:6px;pointer-events:none}
.tc-mini{position:relative;pointer-events:auto;width:58px;padding:3px 0 2px;border-radius:10px;border:1px solid #ffd76a88;background:rgba(16,10,26,.78);color:#fff;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 2px 8px #0008}
.tc-mini .tc-ico{font-size:18px;line-height:24px;height:24px}.tc-mini .tc-ico .ico{width:24px!important;height:24px!important}
.tc-mini small{font-size:10px;font-weight:700;color:#ffe9b0;white-space:nowrap}
.tc-mini:active{background:rgba(255,215,106,.5)}
.tc-badge{position:absolute;top:-5px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;font-style:normal;font-weight:800;line-height:18px;text-align:center;padding:0 4px;box-shadow:0 0 6px #e5484d}
@media (max-height:380px){.tc-act{--tcs:.86}.joy-base{transform:scale(.88)}}
@media (max-height:330px){.tc-act{--tcs:.74}}
@media (min-height:520px){html.mobile .tc-act{--tcs:1.15}}
@media (min-height:700px){html.mobile .tc-act{--tcs:1.3}}
/* menu (bang bieu tuong) + tro chuyen dang bang noi */
html.mobile .hotbar{display:none}
html.mobile .hotbar.open{display:grid;position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:7;grid-template-columns:repeat(4,96px);gap:10px 8px;background:rgba(14,10,22,.97);border:2px solid var(--gold2);border-radius:16px;padding:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
html.mobile .hotbar.open button{width:96px;height:auto;padding:6px 0;border-radius:12px;background:#221a30}
html.mobile .hotbar.open button:active{background:#4a3a20}
html.mobile .hotbar.open button .ico{width:48px!important;height:48px!important}
html.mobile .hotbar.open .hb-name{font-size:14px;margin-top:4px}
html.mobile .hotbar .badge{top:2px;left:auto;right:10px}
html.mobile .chat-dock{display:none}
html.mobile .chat-dock.open{display:flex;position:absolute;left:calc(env(safe-area-inset-left,0px) + 8px);top:8px;bottom:8px;width:min(420px,56vw);z-index:7;opacity:1;background:rgba(10,8,18,.95);border:2px solid var(--gold2);border-radius:12px;padding:8px;font-size:15px;gap:6px}
html.mobile .chat-dock.open .log{display:none}
html.mobile .chat-dock.open .chatbox{flex:1;height:auto;font-size:15px}
html.mobile .chat-dock .chat-row{flex-wrap:wrap;gap:5px}
html.mobile .chat-dock .cbtn{padding:6px 10px;font-size:14px}
html.mobile .chat-dock .chat-x{margin-left:auto;background:#5a2030;color:#fff}
html.mobile .chat-dock .chat-in input{padding:8px;font-size:16px}
html.mobile .chat-row input{width:70px}
html.mobile .chat-to{max-width:140px}
/* cua so, hop thoai */
html.mobile .ov{padding:6px calc(env(safe-area-inset-right,0px) + 6px) 6px calc(env(safe-area-inset-left,0px) + 6px)}
html.mobile .ov-box{padding:10px 12px;border-radius:12px}
html.mobile .win-box,html.mobile .map-box,html.mobile .sect-box,html.mobile .cc-box,html.mobile .trade-box{width:100%;max-width:none;max-height:100%}
html.mobile .win-head .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.mobile .win-head .tabs::-webkit-scrollbar{display:none}
html.mobile .win-head .tab{white-space:nowrap;flex:none;padding:9px 12px;font-size:15px}
html.mobile .win-x{width:42px;height:42px;font-size:18px}
html.mobile .win-body{font-size:15px;-webkit-overflow-scrolling:touch}
html.mobile .btn.small{padding:7px 11px}
html.mobile .wmap-wrap{max-width:calc((100dvh - 128px) * 2.14)}
html.mobile .map-box h2{font-size:18px;margin:0 40px 0 0}
html.mobile .map-box .sub{font-size:12.5px;margin:2px 0}
html.mobile .small-box{max-width:520px}
html.mobile .pause-extra{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
html.mobile .small-box .pause-extra .btn{margin:0;font-size:14px;padding:9px 6px}
html.mobile .touch-help{display:block;text-align:left;font-size:13.5px;color:#c8b8d8;line-height:1.45}
.touch-help p{margin:4px 0}
html.mobile .toasts{top:6px;right:50%;transform:translateX(50%);align-items:center}
html.mobile .toast{font-size:14px;padding:7px 12px;max-width:80vw}
html.mobile .pm-bar{top:calc(100vw * .1);width:min(520px,60vw)}
html.mobile .dlg{max-width:none;margin:0 6px 6px;padding:10px 14px}
html.mobile .dlg-text{font-size:17px}
html.mobile .pmenu{width:250px;max-height:calc(100% - 12px);overflow:auto}
html.mobile .pmenu>button{padding:10px}
@media (orientation:portrait){html.mobile .rotate-hint{display:flex;position:fixed;inset:0;z-index:300;background:#06040a;color:#ffd76a;align-items:center;justify-content:center;text-align:center;padding:24px}}
.rotate-hint b{display:block;font-size:64px;animation:rotph 1.8s ease-in-out infinite}
.rotate-hint p{font-size:22px;font-weight:800;margin:14px 0 8px}
.rotate-hint small{color:#b8aac8;font-size:14px}
@keyframes rotph{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
.npc-head .grow{flex:1}
html.mobile .key-hint{display:none}
/* ===== v14: man hinh nhan vat, tao nhan vat nam/nu, bai nhap mon phai cap 25 ===== */
.home-ov{background:radial-gradient(ellipse at 30% 40%,rgba(60,30,50,.85),rgba(5,3,10,.94))}
.home-box{max-width:min(96cqw,980px);width:96cqw;max-height:96%;text-align:left}
.home-wrap{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:center}
.home-left .cc-portrait canvas{width:230px;height:280px}
.home-right h2{margin:0 0 8px;font-size:26px}
.home-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0}
.home-stats>div{display:flex;flex-direction:column;align-items:center;background:#1d1828;border:1px solid var(--line);border-radius:12px;padding:8px 4px}
.home-stats span{font-size:22px}.home-stats small{color:#b8aac8;font-size:13px}.home-stats b{color:#ffe9b0;font-size:19px}
.home-sect{display:flex;align-items:center;gap:10px;background:#1d1828;border:1px solid var(--line);border-left:5px solid var(--c,#8a96aa);border-radius:12px;padding:10px 12px;margin:10px 0}
.home-sect>span{font-size:30px}.home-sect>div{flex:1;display:flex;flex-direction:column;gap:3px}
.home-sect b{color:#ffe9b0;font-size:17px}.home-sect small{color:#b8aac8;font-size:13.5px}
.home-sect.ready{border-left-color:#ffb030;background:#2a1e10;font-size:28px;animation:pulse .9s infinite alternate}
.home-cur{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:15px;margin:6px 0 10px}.home-cur span{color:#cde}
.home-play{display:block;width:100%;font-size:22px;padding:14px;letter-spacing:1px;margin:6px 0;animation:pulse 1.1s infinite alternate}
.home-right .row-btn{justify-content:flex-start}
.gender-box{text-align:center;max-width:min(96cqw,900px)}
.gender-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.g-card{display:flex;flex-direction:column;align-items:center;gap:5px;background:linear-gradient(#2c2038,#16111f);border:3px solid #4a3a5a;border-radius:16px;padding:12px;color:#eee;cursor:pointer;font-family:inherit;text-align:center}
.g-card canvas{width:200px;height:244px;max-width:100%;background:radial-gradient(circle at 50% 40%,#3a2c4e,#0e0a16 75%);border-radius:12px}
.g-card b{font-size:20px;color:var(--gold)}.g-card small{font-size:13.5px;color:#c8b8d8}
.g-card .sbars{width:100%;text-align:left}
.g-card:hover{border-color:#b8902a}.g-card.on{border-color:var(--gold);box-shadow:0 0 22px #ffd76a77;background:linear-gradient(#3a2a1a,#1a1424)}
.cc-later{width:100%;margin-top:4px}
@media(max-width:760px){.home-wrap{grid-template-columns:1fr}.home-left .cc-portrait canvas{width:150px;height:184px}}
html.mobile .home-wrap{grid-template-columns:200px 1fr;gap:12px}
html.mobile .home-left .cc-portrait canvas{width:170px;height:206px}
html.mobile .home-right h2{font-size:20px;margin:0 0 4px}
html.mobile .home-stats>div{padding:4px 2px}html.mobile .home-stats span{font-size:17px}html.mobile .home-stats b{font-size:16px}
html.mobile .home-sect{margin:6px 0;padding:6px 10px}
html.mobile .home-play{font-size:19px;padding:10px}
html.mobile .g-card canvas{width:130px;height:158px}
html.mobile .gender-grid{gap:10px;margin:6px 0}
html.mobile .g-card{padding:8px;gap:3px}
html.mobile .gender-box h2{font-size:20px}
html.mobile .g-card .sbars{display:none}
html.mobile .gender-box .sub{margin:2px 0;font-size:13px}
html.mobile .gender-box .cc-ok{margin:4px 0}
html.mobile .cc-wrap{grid-template-columns:178px 1fr;gap:10px}
html.mobile .cc-right{grid-column:2}
html.mobile .cc-left{position:sticky;top:0;align-self:start}
html.mobile .cc-left .cc-portrait canvas{width:130px;height:158px}
html.mobile .cc-left .cc-portrait{padding:4px}
html.mobile .cc-box>.sub{display:none}
html.mobile .cc-box h2{font-size:19px}
html.mobile .cc-grid{grid-template-columns:repeat(4,1fr)!important}
html.mobile .cc-ok{font-size:14px;padding:8px 4px}

/* ===== v16: tiem / hanh trang / nhan vat chia muc, theo cap ===== */
.cat-tabs{position:sticky;top:-8px;z-index:2;background:rgba(22,16,30,.97);padding:6px 0;margin-bottom:6px}
.cat-tabs .subtab{font-size:15px;padding:7px 14px}.cat-tabs .subtab small{background:#0006;border-radius:9px;padding:0 6px;margin-left:2px;font-size:12px}
.cat-tabs .subtab.on small{background:#0003}
.cat-h{margin:12px 0 6px;color:var(--gold);font-size:18px;border-bottom:1px solid var(--line);padding-bottom:4px}.cat-h small{color:#aaa;font-weight:400}
.lv-group{margin:8px 0;background:#18131f;border:1px solid var(--line);border-radius:12px;padding:4px 10px 8px}
.lv-group>summary{cursor:pointer;font-weight:800;color:#ffe9b0;font-size:17px;padding:6px 0}.lv-group>summary small{font-weight:400;color:#b8aac8;margin-left:6px}
.lvb{display:inline-block;background:#2a3a2a;color:#9dff6a;border-radius:8px;padding:0 7px;font-weight:700}.lvb.no{background:#3a2020;color:#ff8a8a}
.cmp{display:block;margin-top:2px;font-weight:700;color:#cbbfd8}.cmp.up{color:#6aff7a}.cmp.down{color:#ff7a6a}.cmp i{font-weight:400;font-style:normal;color:#9a8aa8;font-size:.9em}
.shop-item{position:relative;border-left:4px solid #5a4a6a}
.shop-item.locked{opacity:.55}.shop-item.rec{box-shadow:0 0 0 2px #ffd76a inset,0 0 14px #ffd76a55}
.rec-tag{position:absolute;top:-9px;right:10px;background:linear-gradient(#ffd76a,#c89020);color:#2a1800;font-size:12px;font-weight:800;border-radius:8px;padding:1px 8px}
.shop-item.t0,.eq-card.t0{border-left-color:#bfbfbf}.shop-item.t1,.eq-card.t1{border-left-color:#5ad07a}.shop-item.t2,.eq-card.t2{border-left-color:#4aa8ff}
.shop-item.t3,.eq-card.t3{border-left-color:#c47cff}.shop-item.t4,.eq-card.t4{border-left-color:#ffb030}.shop-item.t5,.eq-card.t5{border-left-color:#ff4a4a}.shop-item.t6,.eq-card.t6{border-left-color:#ff4ad8}
.eq-card{border-left-width:4px}
.slot-h{margin:10px 0 4px;color:#ffe9b0;font-size:15px}
.char-right .slots{margin-bottom:4px}
html.mobile .cat-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}html.mobile .cat-tabs::-webkit-scrollbar{display:none}
html.mobile .cat-tabs .subtab{flex:none;white-space:nowrap}