:root{--font:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --bg:#0e1412; --panel:#151d1a; --panel2:#1c2723; --line:#2c3b35; --line2:#4a5f55;
  --gold:#e6c67a; --gold2:#a8864a; --text:#e9e2d0; --dim:#98a397; --red:#c8321f; --hp:#b8322a; --mp:#2f64b8; --xp:#c9a23a;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050807;color:var(--text);font:14px/1.4 var(--font);overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button[disabled]{opacity:.4;cursor:default}
.hidden{display:none!important}
.dim{color:var(--dim)} .small{font-size:12px}
#app{position:relative;height:100dvh;width:min(100vw,calc(100dvh*9/16));margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px #000}

#top{display:flex;align-items:center;gap:8px;padding:calc(6px + var(--safe-t)) 10px 6px;background:linear-gradient(#1a2521,#0f1613);border-bottom:1px solid var(--gold2);z-index:3}
.lvbox{position:relative;width:46px;height:46px;border-radius:8px;border:2px solid var(--gold2);background:var(--pl, none) center 12%/auto 135% no-repeat,radial-gradient(#2c3a2f,#0c120f);image-rendering:pixelated;flex:none;overflow:visible}
.lvbox #lv{position:absolute;right:-6px;bottom:-6px;min-width:22px;height:22px;padding:0 4px;border-radius:11px;border:2px solid var(--gold2);background:#0c120f;display:grid;place-items:center;font-weight:700;color:var(--gold);font-size:12px}
.topmid{flex:1;min-width:0}
.topmid .row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.topmid b{color:var(--gold);font-family:var(--font)}
#stageLbl{color:var(--dim)}
.gold{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--gold);font-size:13px}
.coin{width:14px;height:10px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 40% 35%,#fbe9ad,#a7792b);box-shadow:0 0 0 1px #5a3d14}
.bar{position:relative;height:12px;background:#060908;border:1px solid var(--line2);border-radius:3px;overflow:hidden}
.bar i{position:absolute;inset:0;width:0;transition:width .15s linear}
.bar span{position:absolute;inset:0;font-size:9.5px;line-height:11px;text-align:center;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.bar.xp i{background:linear-gradient(#e0bd55,#8f6a1c)} .bar.hp i{background:linear-gradient(#e0503f,#7d1a12)} .bar.mp i{background:linear-gradient(#5a8fe6,#1d3f80)}

#battle{position:relative;flex:0 0 46%;overflow:hidden;background:#1a211b}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.85) brightness(.8);transition:background-image .6s}
#battle::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 55%,transparent 45%,#0009 100%)}
#arena{position:absolute;inset:0;width:100%;height:100%}
.enh{color:#7fe3ff;font-size:.85em;text-shadow:0 0 4px #2aa8ff}
/* Luyen Cong (survival.js) */
#svBtn{top:auto;bottom:66px;right:8px}
#svHud{pointer-events:none}
#svTopBar{position:absolute;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:auto}
#svGoldWrap{font-size:12px;color:#ffd24a;background:#000a;padding:2px 8px;border-radius:10px;border:1px solid #e6c67a44;}
#svHud #svPauseBtn{position:static;font-size:13px;padding:3px 10px}
#svPad{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:5;pointer-events:auto}
#svPad .pbtn{width:46px;height:46px;border-radius:50%;background:#1c2520dd;border:2px solid #e6c67a88;color:#fff;position:relative;overflow:hidden;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;user-select:none;box-shadow:0 3px 6px #0009}
#svPad .pbtn:active{transform:scale(0.95)}
#svPad .pbtn.ult{width:58px;height:58px;border-color:#e6c67a;;background:radial-gradient(circle,#2d3e33,#131a16)}
#svPad .pbtn.ult .lock{font-size:8px;color:#ff9865;font-weight:normal;line-height:1}
#svPad .pbtn.bomb{border-color:#ff7a45;background:#261814dd}
#svPad .pbtn:disabled{opacity:0.45;filter:grayscale(0.8);cursor:not-allowed}
#svPad .pbtn .cd{position:absolute;inset:0;pointer-events:none;background:conic-gradient(#000b var(--p, 0%), transparent 0)}
body.sv #panel,body.sv #tabs,body.sv #hud,body.sv #pad,body.sv #ctrlBtn,body.sv #svBtn,body.sv #townBar{display:none!important}
body.sv #battle{flex:1 1 auto}
.svopts{display:grid;gap:6px}
.svopt{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;gap:0 8px;align-items:center;text-align:left;padding:8px;border:1px solid var(--gold2);border-radius:8px;background:linear-gradient(#1f2a25,#121a16)}
.svopt:hover,.svopt:focus-visible{border-color:var(--gold);box-shadow:0 0 8px #e6c67a55}
.svopt img{grid-row:1/3;width:40px;height:40px;object-fit:contain}
.svopt b{color:var(--gold)} .svopt .new{font-style:normal;font-size:9px;padding:1px 4px;border-radius:3px;background:var(--red);color:#fff;vertical-align:1px} .svopt em{font-style:normal;color:#ffd24a;letter-spacing:1px} .svopt small{grid-column:2/4;color:var(--dim);font-size:11px}
.svtab{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0} .svtab th,.svtab td{padding:3px 4px;border-bottom:1px solid var(--line);text-align:right} .svtab th:first-child,.svtab td:first-child{text-align:left}
/* thanh chieu khi Luyen Cong: 6 o chu dong + 6 o bi dong, luon hien */
#svBar{position:absolute;left:4px;right:4px;top:38px;z-index:4;pointer-events:none}
.svrow{display:grid;grid-template-columns:repeat(6,38px);gap:4px;justify-content:center;margin-bottom:4px}
.svcell{position:relative;width:38px;height:38px;border:1px solid var(--gold2);border-radius:6px;background:#0b100ea8;overflow:hidden;pointer-events:auto}
.svcell img{width:100%;height:100%;object-fit:contain;display:block}
.svcell .star{position:absolute;left:1px;bottom:0;font-size:9px;letter-spacing:-1px;color:#ffd24a;text-shadow:0 0 3px #000}
.svcell .cd{position:absolute;inset:0;background:conic-gradient(#000c calc(var(--cd,0)*360deg),transparent 0)}
.svrow.pas .svcell{border-color:var(--line2)} .svrow.pas .svcell img{opacity:.85}
/* phan thuong (rewards.js) */
#giftBtn{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#3a2f1c,#120d06);font-size:16px;line-height:30px}
#giftBtn.on::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:#e0402a;box-shadow:0 0 0 2px #0f1613;animation:gpulse 1.2s infinite}
@keyframes gpulse{50%{transform:scale(1.3)}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.day{padding:6px 3px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);text-align:center;font-size:11px}
.day b{display:block;color:var(--gold);font-size:11px} .day small{display:block;color:var(--dim);font-size:9.5px;line-height:1.2}
.day.cur{border-color:var(--gold);box-shadow:0 0 6px #e6c67a55} .day.got{opacity:.5} .day.got b::after{content:" ✓"}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 8px;margin:4px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.qrow small{color:var(--dim);font-size:11px} .qrow span small{display:block} .qrow.lock{opacity:.5}
.petpick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-height:40vh;overflow:auto}
.petpick button{padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-size:10px}
.petpick button.on{border-color:var(--gold)} .petpick img{display:block;width:100%;height:44px;object-fit:contain} .petpick b{display:block;font-weight:500}
#hud{position:absolute;left:8px;right:8px;top:6px;display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;pointer-events:none}
#mainSk{grid-column:1/3;font-size:11px;color:var(--gold);text-shadow:0 0 3px #000}

#panel{flex:1;min-height:0;overflow:hidden;background:var(--panel);border-top:1px solid var(--gold2)}
.tab{height:100%;overflow-y:auto;padding:10px 10px 16px}
h3{font:400 14px var(--font);color:var(--gold);margin:12px 0 6px;display:flex;justify-content:space-between;align-items:baseline}
h3 small{font:12px var(--font);color:var(--dim)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.row{display:flex;gap:6px;align-items:center}
.btn{background:linear-gradient(#34483f,#1f2c27);border:1px solid var(--line2);border-radius:5px;padding:7px 12px;color:var(--text)}
.btn:active{transform:translateY(1px)} .btn.sm{padding:4px 10px;font-size:12px} .btn.on{border-color:var(--gold);color:var(--gold)}
.btn.red{background:linear-gradient(#5a2a22,#34160f)}
.btnrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center} .btnrow .btn{flex:1;max-width:200px}
.sp{flex:1}
.boss{color:#ff9a5a} .up{color:#9fe36a} .bad{color:#ff7b62}
.stagectl{display:flex;justify-content:space-between;align-items:center;gap:8px}
.log{max-height:150px;overflow:auto;font-size:12px;background:#0b100e;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.log div{padding:1px 0;border-bottom:1px solid #16201c}
.zlist{display:grid;gap:4px}
.zrow{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);text-align:left}
.zrow span{color:var(--dim);font-size:12px} .zrow.cur{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)} .zrow.lock b{color:var(--dim)}

.eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.slot{aspect-ratio:1;border:1px dashed var(--line2);border-radius:6px;display:grid;place-items:center;font-size:11px;color:var(--dim);text-align:center}
.attr{display:grid;grid-template-columns:1fr auto 64px;align-items:center;gap:8px;padding:3px 0}
.attr b{color:var(--gold)}
.plus{width:28px;height:26px;border-radius:5px;border:1px solid var(--gold2);color:var(--gold);font-weight:700;background:#26332d}
.stats{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px}
.stats span:nth-child(even){color:var(--gold);text-align:right}

.invbar{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:12px}
select,textarea{background:#0b100e;color:var(--text);border:1px solid var(--line2);border-radius:5px;padding:4px;font:12px var(--font);width:100%}
.invbar select{width:auto}
.invgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.it{position:relative;aspect-ratio:1;width:100%;border:1px solid var(--line2);border-radius:5px;background:#0c1210;display:grid;place-items:center;overflow:hidden}
.it img{max-width:88%;max-height:88%;image-rendering:auto}
.it i{position:absolute;right:2px;bottom:0;font:10px var(--font);color:var(--dim)}
.it em{position:absolute;left:2px;top:0;font:400 11px var(--font);color:#7f7}
.it.r1{border-color:#6aa8ff;box-shadow:inset 0 0 8px #3a6ab8} .it.r2{border-color:#ffd24a;box-shadow:inset 0 0 8px #a88420} .it.r3{border-color:#c77bff;box-shadow:inset 0 0 10px #7a3ab0}
.it.bad{filter:grayscale(.8)} .it.bad i{color:#f66}

.skl{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);margin-bottom:5px}
.skl.lock{opacity:.5} .skl.main{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.skl .sic{width:40px;height:40px;border-radius:5px;border:1px solid var(--line2)}
.skl .info small{display:block;color:var(--dim);font-size:11px}
.skl .lvl{color:var(--gold);font-size:12px}
.tag{font-size:10px;padding:1px 5px;border-radius:3px;background:#2a3a33;color:var(--dim)} .tag.attack{background:#4a2a1f;color:#ffb38a}

#tabs{display:grid;grid-template-columns:repeat(5,1fr);background:#0b100e;border-top:1px solid var(--gold2);padding-bottom:var(--safe-b)}
#tabs button{position:relative;padding:10px 2px;font-size:12px;color:var(--dim)} #tabs button.on{color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}
.dot{position:absolute;top:6px;right:12%;width:7px;height:7px;border-radius:50%;background:#f55;display:none} .dot.on{display:block}

#modal{position:absolute;inset:0;background:#000b;display:grid;place-items:center;z-index:10;padding:12px}
.mbox{position:relative;width:100%;max-height:92%;overflow:auto;background:var(--panel);border:1px solid var(--gold2);border-radius:8px;padding:14px}
.mx{position:absolute;right:8px;top:6px;color:var(--dim);font-size:16px}
.desc{color:var(--dim);font-size:13px;margin:4px 0 8px}
.idet{display:flex;gap:10px;align-items:center}
.idet .pic{width:56px;height:56px;border:1px solid var(--line2);border-radius:6px;display:grid;place-items:center;background:#0c1210}
.idet .pic img{max-width:90%;max-height:90%}
.idet h4{font:400 15px var(--font)}
.sl{margin:8px 0;font-size:13px} .sl .b{color:var(--text)} .sl .m{color:#8fb8ff} .sl .h{color:#6d756f} .sl .h.on{color:#8fe08a} .sl .r{color:var(--dim);font-size:12px}
.it b.s5{position:absolute;left:3px;bottom:3px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1px #000}
.cmp{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;opacity:.85}
.slotlist{display:grid;gap:8px}
.slotrow{display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--line2);border-radius:6px;background:var(--panel2)}
.slotrow.empty,.slotrow.del{grid-template-columns:1fr auto auto}
.slotrow img{width:44px;height:54px;object-fit:contain}
.slotrow small{display:block;color:var(--dim);font-size:11px}
.slotrow.del{border-color:#c44}
.facpick{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.facpick button{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:6px;border:1px solid var(--line2);border-radius:6px;background:var(--panel2);box-shadow:inset 3px 0 0 var(--c)}
.facpick img{grid-row:1/3;width:48px;height:60px;object-fit:contain}
.facpick b{font-family:var(--font);color:var(--gold)} .facpick small{color:var(--c)}
#toast{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);background:#000d;border:1px solid var(--gold2);padding:6px 12px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:11}
#toast.on{opacity:1}
.lootf{display:grid;gap:6px;font-size:13px} .lootf select{width:auto;display:inline-block}
.dtabs{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0} .dtabs button{padding:4px 10px;border:1px solid var(--line2);border-radius:14px;font-size:12px} .dtabs button.on{border-color:var(--gold);color:var(--gold)}
.shoplist{display:grid;gap:4px;max-height:55vh;overflow:auto}
.shoprow{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;text-align:left;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.shoprow img{width:36px;height:36px;object-fit:contain} .shoprow small{display:block;color:var(--dim);font-size:11px} .shoprow em{font-style:normal;color:var(--gold);font-size:12px}
.shoprow.bad{opacity:.55} .shoprow.own{border-color:var(--gold2)}
.chips{display:flex;flex-wrap:wrap;gap:4px} .chip2{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border:1px solid var(--line2);border-radius:12px;font-size:12px;background:#0b100e}
/* dieu khien: nut che do, o ky nang, thuoc, the do dia phu */
.chip{position:absolute;right:8px;top:34px;z-index:4;font-size:11px;padding:3px 9px;border-radius:12px;border:1px solid var(--gold2);background:#000a;color:var(--gold)}
.chip.on{background:#3a2a10;box-shadow:0 0 8px #e6c67a66}
#pad{position:absolute;right:8px;left:auto;bottom:8px;width:152px;height:auto;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;pointer-events:none}
.pbtn{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold2);background:#0c120f center/cover no-repeat;overflow:hidden;pointer-events:auto;touch-action:none;box-shadow:0 2px 6px #000b}
.pbtn i{position:absolute;inset:0;background:center/cover no-repeat}
.pbtn b{position:absolute;right:3px;bottom:0;font-size:9px;color:#fff;text-shadow:0 0 2px #000}
.pbtn.empty{border-style:dashed;opacity:.5} .pbtn.cur{border-color:#ffe07a;box-shadow:0 0 10px #ffd24a}
.pbtn:active{transform:scale(.92)}
.pbtn.pot{width:38px;height:38px;margin-top:6px} .pbtn.pot span{position:absolute;inset:0;display:grid;place-items:center;font:400 10px/1.05 var(--font);color:#fff;text-shadow:0 0 3px #000;text-align:center}
.pbtn.hp{background:radial-gradient(#b3342a,#3a0c08)} .pbtn.mp{background:radial-gradient(#3a6ad0,#0c1a40)} .pbtn.tp{background:radial-gradient(#c9a23a,#3a2a08)}
.pbtn .cd{position:absolute;inset:0;background:conic-gradient(#000b var(--p,0%),transparent 0);z-index:1}
#townBar{position:absolute;left:8px;right:8px;top:64px;z-index:5;display:flex;gap:6px;align-items:center;padding:6px 8px;background:#000c;border:1px solid var(--gold2);border-radius:6px}
#townBar b{flex:1;color:var(--gold);font-family:var(--font)}
.skl .slots{display:flex;gap:3px;grid-column:2/5} .skl .slots button{font-size:10px;padding:1px 6px;border:1px solid var(--line2);border-radius:4px}
.skl .slots button.on{border-color:var(--gold);color:var(--gold)}

/* ======== Giao dien goc JX (tools/extract_ui.py -> game/ui/*.png). Thieu anh thi giu kieu cu ben tren. ======== */
.mbox{border:14px solid transparent;border-image:url(ui/panel.png) 16 / 14px stretch;background-clip:padding-box}
.btn{background-image:url(ui/btn.png);background-size:400% 100%;background-position:0 0;border-color:#6d5a33;text-shadow:0 1px 2px #000}
.btn:hover{background-position:33.333% 0} .btn:active{background-position:66.666% 0} .btn[disabled]{background-position:100% 0}
.bar.hp i{background:url(ui/bar_hp.png) 0 0 / 100% 100%,linear-gradient(#e0503f,#7d1a12)}
.bar.mp i{background:url(ui/bar_mp.png) 0 0 / 100% 100%,linear-gradient(#5a8fe6,#1d3f80)}
.bar.xp i{background:url(ui/bar_xp.png) 0 0 / 100% 100%,linear-gradient(#e0bd55,#8f6a1c)}
#hud .bar{border-image:url(ui/bar_panel.png) 3 / 3px stretch}
#tabs{background:url(ui/tabbar.png) center / 100% 100%,linear-gradient(#1a2521,#0f1613)}
#tabs button{position:relative;padding:25px 2px 5px;font-size:11px;line-height:1.1}
#tabs button::before{content:"";position:absolute;left:50%;top:2px;width:20px;height:20px;margin-left:-10px;background-size:300% 100%;background-position:0 0}
#tabs button.on::before{background-position:50% 0}
#tabs button[data-t=log]::before{background-image:url(ui/ic_log.png)} #tabs button[data-t=char]::before{background-image:url(ui/ic_char.png)}
#tabs button[data-t=skill]::before{background-image:url(ui/ic_skill.png)} #tabs button[data-t=inv]::before{background-image:url(ui/ic_item.png)}
#tabs button[data-t=more]::before{background-image:url(ui/ic_more.png)}
#pad .pbtn.sk{background:url(ui/slot.png) center / 100% 100%,radial-gradient(#26302b,#0b100e)}
.facpick button{position:relative}
.s5b{position:absolute;right:8px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0008,0 0 6px var(--c)}   /* cham mau he ngu hanh */
.facpick button:hover .s5b{box-shadow:0 0 0 2px #0008,0 0 12px var(--c)}

/* ======== Chieu cao that cua man hinh (Safari / thanh cong cu dien thoai) + che do thu gon ======== */
html,body{overscroll-behavior:none}
#app{height:100vh;height:var(--app-h,100dvh)}
#tabs{position:relative;z-index:6;touch-action:manipulation}
#tabs button{touch-action:manipulation}
#compactBtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#26302b,#0b100e);color:var(--gold);font-size:15px;line-height:30px}
body.compact #panel,body.compact #tabs{display:none!important}
body.compact #battle{flex:1 1 auto}
body.compact #compactBtn{background:radial-gradient(#4a3a18,#1a1206);box-shadow:0 0 6px #e6c67a88}

/* ==== Man hinh ngang (landscape): san dau toan man hinh, bang thong tin ben phai ==== */
@media (orientation:landscape){
  #app{width:100vw;display:grid;grid-template-columns:1fr min(38vw,340px);grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "battle panel" "tabs panel"}
  #top{grid-area:top} #battle{grid-area:battle} #panel{grid-area:panel;border-top:0;border-left:1px solid var(--gold2)} #tabs{grid-area:tabs}
  #pad{bottom:52px}
  body.compact #app{grid-template-columns:1fr;grid-template-areas:"top" "battle" "tabs"}
}

/* IBM Plex Mono 400 cho toan bo game (khong dung dam, dung mau / co chu de nhan manh) */
html,body,button,input,select,textarea{font-family:var(--font)}
b,strong,h1,h2,h3,h4,th{font-weight:400}

/* nut doi chuot / joystick: chi hien tren may tinh man hinh ngang */
#inBtn{display:none;position:absolute;right:8px;top:70px;z-index:4}
body.deskland #inBtn{display:block}
body.sv #inBtn{top:44px}

.cmp2{margin:6px 0;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:#0b100e}
.cmpv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.cp{color:#7fe07f}.cn{color:#ff7a6a}
.reqbad{margin-top:6px;color:#ff9a8a;font-size:12px}
.reqnote{margin-top:6px;color:#e8c66a;font-size:12px}

#rotBtn{right:auto;left:8px;top:auto;bottom:132px}
#inBtn{right:auto!important;left:8px;top:auto!important;bottom:188px}
#svBtn{left:8px!important;right:auto!important;top:auto!important;bottom:160px}   /* cum nut trai: xoay chieu / luyen cong / chuot-joystick xep doc tren joystick, khong de len cum chieu thuc ben phai */
body.sv #rotBtn{display:none!important}

/* giao dien di dong nho di 20%: ung dung rong / cao 1,25 lan roi thu nho 0,8 (uiScale trong render.js) */
body.mob #app{transform:scale(.8);transform-origin:0 0;width:125vw!important;height:calc(var(--app-h,100dvh)*1.25)!important;margin:0!important;max-width:none}

/* cong / rut diem / thong tin */
.pm{display:inline-flex;gap:4px} .pm button{width:28px}
.minus{width:28px;height:26px;border-radius:5px;border:1px solid #a55;color:#f88;background:#2e2222;font-weight:700}
.minus:disabled{opacity:.35}
.skinfo{width:28px;height:26px;border-radius:5px;border:1px solid var(--line2);color:var(--dim);background:#1b2420;font-style:italic}
.skl .slots{grid-column:2/5}

/* co chu chinh duoc (the Khac > Tro nang): ap dung cho bang thong tin, the, hop thoai */
#panel,#modal .mbox,#tabs,#toast{zoom:var(--fs,1)}
.todo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;padding:6px 8px;border:1px solid var(--gold2);border-radius:6px;background:#1a1f16}
.todo b{color:var(--gold);font-size:12px;margin-right:2px}
.todochip{cursor:pointer;border:1px solid var(--gold2);background:#26301f;color:var(--text)}
.codex .card.lock{opacity:.55}
.mbox:focus{outline:none}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* ======== Bo cuc kieu ban moi: thanh tren co HP / MP / EXP, cong tac Auto, cum chieu vong cung, luoi nut tinh nang, thanh tab nut vang ======== */
#top{gap:8px;padding:calc(6px + var(--safe-t)) 8px 6px;background:linear-gradient(#151d1a,#0a100e)}
.lvbox{width:50px;height:50px;border-radius:4px}
.lvbox #lv{left:-5px;right:auto;bottom:-7px;min-width:26px;height:26px;border-radius:13px;font-size:12px;background:radial-gradient(#3a2f1c,#0c120f)}
.topmid .row{align-items:center;gap:10px;margin-bottom:5px;font-size:13px}
.topmid .row .gold{font-size:14px;flex:none}
#stageLbl{color:var(--text);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.coin{width:18px;height:11px;border-radius:3px 3px 50% 50%;background:radial-gradient(circle at 50% 20%,#fff2b8,#e0b040 45%,#8a5a12)}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.bars .bar{height:16px;border:1px solid #6d5a33;border-radius:2px;background:#0a0d0c}
.bars .bar em{position:absolute;left:0;top:0;bottom:0;z-index:1;padding:0 5px;font:400 9px/14px var(--font);font-style:normal;color:#fff;background:#000a;border-right:1px solid #6d5a33}
.bars .bar span{padding-left:22px;font-size:10px;line-height:14px}
.bars .bar.xp span{padding-left:26px}
#giftBtn,#compactBtn{width:40px;height:40px;border-radius:6px;border:1px solid var(--gold2);background:radial-gradient(#3a2f1c,#120d06);font-size:18px;line-height:38px;color:var(--gold)}
#giftBtn.on::after{top:-3px;right:-3px}
@media (orientation:portrait){ .bars{grid-template-columns:1fr 1fr} .bars .bar.xp{grid-column:1/3;height:12px} .bars .bar.xp em,.bars .bar.xp span{line-height:10px} }

/* san dau: cai dat + cong tac Auto goc phai tren (ban do nho ngay ben duoi) */
#autoWrap{position:absolute;top:8px;right:8px;z-index:4;display:flex;gap:6px;align-items:center}
#setBtn{width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:15px;border:1px solid var(--gold2);background:linear-gradient(#1c2420,#0a0e0c);box-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #0008;color:var(--gold);transition:border-color .15s,box-shadow .15s}
#setBtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:transform .4s}
#setBtn:hover{border-color:var(--gold);box-shadow:inset 0 1px 0 #ffffff14,0 0 8px #e6c67a66} #setBtn:hover svg{transform:rotate(60deg)}
#setBtn:active svg{transform:rotate(90deg) scale(.92)}
#ctrlBtn{display:flex;align-items:center;gap:8px;height:30px;padding:0 5px 0 12px;border-radius:15px;border:1px solid var(--gold2);background:#000b;color:var(--gold);font-size:12px}
#ctrlBtn i{position:relative;width:36px;height:20px;border-radius:10px;background:#3a3f3c;box-shadow:inset 0 1px 3px #000;transition:background .15s}
#ctrlBtn i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#bbb;box-shadow:0 1px 2px #000;transition:transform .15s}
#ctrlBtn.on i{background:linear-gradient(#f0d58a,#a8864a)} #ctrlBtn.on i::after{transform:translateX(16px);background:#fff}
body.sv #autoWrap{display:none!important}
.chip{font-size:12px;padding:4px 11px;border-radius:14px;background:#000b}
#svBtn{display:none!important}            /* Luyen Cong mo tu luoi nut tinh nang */

/* cum chieu: 1 2 3 / 4 HP MP / . . Ve thanh */
#pad{right:10px;bottom:12px;width:auto;display:grid;grid-template-columns:repeat(3,50px);gap:9px;justify-items:center;align-items:center}
.pbtn{overflow:visible}
.pbtn i,.pbtn .cd{border-radius:50%}
#pad .pbtn.sk{width:50px;height:50px;border:2px solid #c8a45a;box-shadow:0 0 0 2px #0008,0 3px 8px #000}
#pad .pbtn.sk b{right:-5px;top:-8px;bottom:auto;font-size:11px}
#pad .pbtn.cur{border-color:#ffe07a;box-shadow:0 0 12px #ffd24a}
#pad .pbtn.pot{width:44px;height:44px;margin:0;border:2px solid #c8a45a}
#pad .pbtn.hp{background:url(img/i/pot0.png) center 35%/auto 62% no-repeat,radial-gradient(#b3342a,#3a0c08)}
#pad .pbtn.mp{background:url(img/i/pot5.png) center 35%/auto 62% no-repeat,radial-gradient(#3a6ad0,#0c1a40)}
#pad .pbtn.hp span,#pad .pbtn.mp span{place-items:end center;padding-bottom:1px;font-size:9px}
.pbtn .cnt{position:absolute;right:-7px;top:-7px;z-index:2;min-width:18px;height:16px;padding:0 4px;border-radius:8px;background:#b02a1e;color:#fff;font:400 10px/16px var(--font);text-align:center;box-shadow:0 0 0 1px #000a}
.pbtn.mp .cnt{background:#1d4fa8} .pbtn .cnt:empty{display:none}
#pad #bTp{grid-column:3;width:46px;height:46px}
@media (orientation:landscape){ #pad{bottom:12px} }

/* the Giang ho: luoi nut tinh nang */
.feats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.feat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:5px 1px 4px;border:1px solid #3d4a44;border-radius:6px;background:linear-gradient(#1f2925,#111815);box-shadow:inset 0 1px 0 #ffffff12}
.feat:hover{border-color:var(--gold2)} .feat:active{transform:translateY(1px)}
.feat i{font-style:normal;font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px #000)}
.feat span{font-size:10px;line-height:1.15;color:var(--text);text-align:center}
.feat em{position:absolute;top:-6px;right:-4px;min-width:18px;height:16px;padding:0 4px;border-radius:8px;background:#c8321f;color:#fff;font:400 10px/16px var(--font);font-style:normal;box-shadow:0 0 0 1px #000a}
.stagectl{padding:10px}
.stagectl .stn{display:block;font-size:15px;color:var(--text);line-height:1.3;margin-bottom:3px}
.stagectl small{font-size:12px;line-height:1.5}
.stagectl .row{flex:none;gap:6px}
.btn.arr{padding:6px 9px}
.btn.push{min-width:54px;padding:6px 10px;font-size:13px;line-height:1.15;border-color:var(--gold)}
.btn.push.on{color:var(--gold);box-shadow:0 0 8px #e6c67a55}
.log{max-height:150px;border-color:#3d4a44;background:#0a0e0c}
.zrow{padding:10px 12px;background:linear-gradient(#18211d,#121916)} .zrow b{color:var(--text)} .zrow.lock b{color:var(--dim)}

/* thanh tab: the dang mo la nut vang */
#tabs{gap:6px;padding:6px 6px calc(6px + var(--safe-b));background:linear-gradient(#151d1a,#0a100e)}
#tabs button{padding:28px 2px 5px;border:1px solid transparent;border-radius:6px;font-size:12px;color:var(--dim)}
#tabs button::before{top:4px;width:24px;height:24px;margin-left:-12px}
#tabs button.on{color:#fff3d0;box-shadow:inset 0 1px 0 #fff6,0 0 8px #e6c67a44;background:linear-gradient(#c9a24f,#6e4f1c);border-color:#f0d58a;text-shadow:0 1px 2px #000}

/* the Khac: hang nhan + o nhap, nut nau vien vang theo do dai chu (khong gian het hang), o nhap toi bo goc */
#t-more h3{font-size:15px;margin:14px 0 8px} #t-more h3:first-child{margin-top:4px}
#t-more .card{padding:12px;border-color:#2f3b36;background:#141b18}
#t-more .card p.small{margin:4px 0 8px;line-height:1.5}
.frow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.frow label{flex:none}
.frow small{font-size:12px}
#t-more input[type=text],#t-more select,#t-more textarea{background:#0b100e;color:var(--text);border:1px solid #3d4a44;border-radius:6px;font:14px var(--font)}
#t-more input[type=text]{flex:1;min-width:0;padding:7px 10px}
#t-more select{width:auto;padding:6px 8px}
#t-more select:disabled{opacity:.6}
#t-more textarea{margin-top:10px;padding:8px 10px;resize:vertical}
#t-more input[type=text]:focus,#t-more textarea:focus,#t-more select:focus{outline:none;border-color:var(--gold2)}
#t-more .btnrow{justify-content:flex-start;margin-top:4px}
#t-more .btnrow .btn{flex:none;max-width:none}
#t-more .btn{padding:7px 16px;border:1px solid #c8a45a;border-radius:7px;background:linear-gradient(#7a5528,#4a3015 55%,#3a2410);color:#f6ead0;font-size:14px;box-shadow:inset 0 1px 0 #ffffff30,0 2px 4px #0008}
#t-more .btn:hover{background:linear-gradient(#8a6230,#55381a 55%,#422a12)}
#t-more .btn.red{border-color:#c8644a;background:linear-gradient(#7a3022,#4a1a10 55%,#3a140c)}

/* Thiet lap Auto (autocfg.js): khung vien vang, cong tac gat, nut chon pham vi, nut chinh % */
h3.aut{justify-content:center;font-size:17px;margin:0 0 10px}
.ausec{border:1px solid #8a6d35;border-radius:8px;padding:8px 12px 10px;margin-bottom:10px;background:#0f1513}
.ausec h4{font:400 14px var(--font);color:var(--gold);padding-bottom:4px;margin-bottom:6px;border-bottom:1px solid #4a3d22}
.aurow{display:flex;align-items:center;gap:10px;min-height:31px;font-size:14px}
.aurow>span{flex:1;min-width:0}
.aunote{margin-top:6px;font-size:11.5px;color:var(--dim);line-height:1.45}
.sw{position:relative;flex:none;width:44px;height:24px;border-radius:12px;background:#2e3532;border:1px solid #47504c;box-shadow:inset 0 1px 3px #000}
.sw i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#c9cbc9;box-shadow:0 1px 2px #000;transition:transform .15s}
.sw.on{background:linear-gradient(#c9a24f,#7a5a22);border-color:#e6c67a} .sw.on i{transform:translateX(20px);background:#fff7df}
.sw.sm{width:36px;height:20px} .sw.sm i{width:14px;height:14px} .sw.sm.on i{transform:translateX(16px)}
.auseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:0 1 66%}
.auseg button{padding:6px 4px;border:1px solid #6d5a33;border-radius:6px;background:linear-gradient(#1d2420,#131915);font-size:13px}
.auseg button.on{border-color:#f0d58a;color:#fff3d0;background:linear-gradient(#5a4520,#2e220e);box-shadow:0 0 8px #e6c67a55}
.aust{display:flex;align-items:center;flex:0 0 46%;max-width:220px;height:28px;border:1px solid #6d5a33;border-radius:6px;background:#0a0e0c;overflow:hidden}
.aust b{flex:1;text-align:center;font-size:13px}
.aust button{width:28px;height:100%;background:linear-gradient(#2a2416,#16120a);color:var(--gold);font-size:16px}
.auskills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 2px}
.ausk{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ausk .ic{width:44px;height:44px;border-radius:50%;border:2px solid #c8a45a;background:#0c120f center/cover no-repeat;box-shadow:0 2px 6px #000}
.ausk.empty .ic{border-style:dashed;opacity:.5}
.ausk small{font-size:10.5px;line-height:1.2;color:var(--dim);min-height:2.4em}
.aufoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.aufoot small{color:var(--dim);font-size:12px}

/* Cua so Nhan vat (charModal): tieu de giua co gach hai ben, hinh nhan vat ben trai, tiem nang / chi so ben phai; hep thi xep doc */
.mbox:has(.cwin){width:min(100%,660px);container-type:inline-size}
.mbox:has(.cwin) .mx{width:26px;height:26px;border-radius:50%;border:2px solid #d8d0bc;color:#fff;font-size:13px;line-height:22px;top:4px;right:6px;background:#3a3f3c}
.cwt{justify-content:center;align-items:center;gap:14px;font-size:16px;color:var(--text);margin:0 34px 10px}
.cwt::before,.cwt::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#a8864a)} .cwt::after{background:linear-gradient(90deg,#a8864a,transparent)}
.cbody{display:grid;grid-template-columns:262px 1fr;gap:12px;align-items:start}
@container (max-width:560px){ .cbody{grid-template-columns:1fr} .cleft{justify-self:center} }
.cleft{display:flex;flex-direction:column;align-items:center;gap:8px}
.cname{color:var(--gold);font-size:14px}
.doll{display:grid;grid-template-columns:56px 74px 56px;grid-template-rows:repeat(12,21px);gap:4px 16px;padding:14px 16px;border:1px solid #3a4540;border-radius:3px;background:radial-gradient(ellipse at 50% 40%,#18201c,#0b0f0d);
  grid-template-areas:". helm amulet" "cuff helm amulet" "cuff helm weapon" "cuff armor weapon" "ring1 armor weapon" "ring1 armor weapon" "ring2 armor weapon" "ring2 belt boot" "pendant belt boot" "pendant horse boot" "pendant horse ." "pendant horse ."}
.dslot{position:relative;display:grid;place-items:center;border:1px solid #39443f;border-radius:3px;background:#0d1210;box-shadow:inset 0 0 8px #000;font-size:11px;color:#5d6862;text-align:center;overflow:hidden}
.ds-cuff{grid-area:cuff} .ds-ring1{grid-area:ring1} .ds-ring2{grid-area:ring2} .ds-pendant{grid-area:pendant} .ds-helm{grid-area:helm} .ds-armor{grid-area:armor}
.ds-belt{grid-area:belt} .ds-horse{grid-area:horse} .ds-amulet{grid-area:amulet} .ds-weapon{grid-area:weapon} .ds-boot{grid-area:boot}
.dslot.r1{border-color:#3a6ab8} .dslot.r2{border-color:#b8962a} .dslot.r3{border-color:#8a4ac0} .dslot.r4{border-color:#e0a83a;box-shadow:inset 0 0 10px #8a5a1088} .dslot.r5{border-color:#cfe6f6}
.dslot .it{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none}
.dslot .it img{max-width:86%;max-height:86%}
.dslot .it i{right:3px;bottom:1px;font-size:10px;color:#ddd;text-shadow:0 0 2px #000}
.dslot .it b.s5{left:3px;bottom:3px}
.cbtns{display:flex;gap:6px;justify-content:center}
.cbtns .btn{padding:5px 8px;font-size:12px;white-space:nowrap}
.cright{display:flex;flex-direction:column;gap:6px;min-width:0}
.cbox{padding:8px 10px;border:1px solid #2f3b36;border-radius:3px;background:#121815}
.chead{display:flex;flex-direction:column;gap:2px;font-size:13px}
.chead small{color:var(--text);font-size:12px;margin-top:2px}
.cg{color:var(--gold)}
.cpow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:2px}
.cpow>div{display:flex;flex-direction:column} .cpow b{font-size:14px}
.cpow .btn{padding:5px 12px;font-size:13px}
.cbar{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #3a4540;border-radius:3px;background:linear-gradient(#1f2924,#141b17);color:var(--gold);font-size:14px}
.cbar>span{flex:1} .cbar b{color:var(--gold)}
.cbar .btn{padding:4px 12px;font-size:12px}
.cattr{display:grid;grid-template-columns:1fr auto 58px 26px 26px auto;align-items:center;gap:6px;min-height:28px;font-size:14px}
.camt{width:58px;padding:2px 5px;font:13px var(--font);text-align:right;color:var(--text);background:#0b100e;border:1px solid #4a5550;border-radius:3px}
.camt:focus{outline:none;border-color:var(--gold2)} .camt::placeholder{color:#5d6862}
.cmax{padding:2px 6px;font-size:11px;border:1px solid #6d5a33;border-radius:3px;color:#cbb88a;background:linear-gradient(#3a3020,#1d170c)} .cmax:disabled{opacity:.35}
.cattr b{color:var(--gold);text-align:right;min-width:40px}
.cpm{width:24px;height:20px;border-radius:3px;border:1px solid #c8a45a;background:linear-gradient(#a8833e,#5a4018);color:#fff3d0;font-size:13px;line-height:18px}
.cpm[data-m]{border-color:#6d5a33;background:linear-gradient(#3a3020,#1d170c);color:#cbb88a}
.cpm:disabled{opacity:.35}
.cstats{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 10px;font-size:12px;white-space:nowrap}
.cstats span{color:var(--dim)} .cstats b{color:var(--text)}

/* Cua so Ky nang (skillWin): the phai, luoi chieu theo cap, o chieu xam khi chua hoc, + do de cong diem */
.sktabs{display:flex;gap:4px;margin-bottom:-1px;position:relative;z-index:1}
.sktabs button{padding:5px 14px;border:1px solid #8a6d35;border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(#5a4520,#2e220e);color:#fff3d0;font-size:13px}
.skgrid{display:grid;gap:4px;padding:6px;border:1px solid #39443f;background:#0b0f0d}
.skh{text-align:center;font-size:11px;line-height:1.2;padding:4px 0;border:1px solid #3d4a44;border-radius:2px;background:linear-gradient(#26332e,#18201c);color:#d6e6e0;white-space:nowrap;overflow:hidden}
.skc{position:relative;aspect-ratio:1;padding:0;border:1px solid #333e39;border-radius:2px;background:#0e1311;box-shadow:inset 0 0 8px #000}
.skc i{position:absolute;inset:4px;background:center/contain no-repeat;filter:grayscale(1) brightness(.6)}
.skc.on i{filter:none}
.skc.lock i{filter:grayscale(1) brightness(.3)}
.skc[data-id]:hover,#skBasic:hover{border-color:var(--gold2)}
.skc.main{border-color:#f0d58a;box-shadow:0 0 8px #e6c67a88,inset 0 0 10px #e6c67a55}
.skc b{position:absolute;left:3px;bottom:1px;font-size:11px;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.skc u{position:absolute;left:3px;top:1px;text-decoration:none;font-size:10px;color:#ffe08a;text-shadow:0 0 2px #000,0 0 2px #000}
.skc em,.skhint em{display:inline-block;width:15px;height:15px;border:1px solid #ffffff88;border-radius:2px;background:#d42a1e;color:#fff;font:400 12px/13px var(--font);font-style:normal;text-align:center}
.skc em{position:absolute;right:2px;bottom:2px;cursor:pointer} .skc em:hover{background:#f04030}
.skfoot{display:flex;align-items:center;gap:8px;margin-top:8px}
.skfoot p{flex:1;font-size:12px;color:var(--dim);line-height:1.45}
.skfoot p a{color:var(--gold);cursor:pointer;text-decoration:underline}
.skfoot .btn{padding:4px 12px;font-size:12px;line-height:1.25}
.skpts{display:flex;flex-direction:column;font-size:14px;color:var(--gold);white-space:nowrap}
.skpts b{color:#ff5a4a}
.skhint{margin-top:6px;font-size:11px;color:var(--dim)}
.skslot{display:flex;align-items:center;gap:6px;margin:8px 0;font-size:13px}
.skslot button{width:28px;height:26px;border:1px solid var(--line2);border-radius:4px;background:#121815}
.skslot button.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 6px #e6c67a55}
@container (max-width:560px){ .skgrid{gap:2px;padding:4px} .skh{font-size:8.5px} .skc b{font-size:9px} .skc em{width:12px;height:12px;font-size:10px;line-height:10px} .skfoot{flex-wrap:wrap} .skfoot p{flex-basis:100%} }

/* Cua so Vat pham (invWin): hep nhu tui do JX, luoi 6 x 10 o toi, dong ngan luong, nut 2 cot */
.mbox:has(.invwin){width:min(100%,290px);padding:10px}
.invwin .cwt{margin:0 28px 8px}
.ivtop{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
.ivtop select{flex:1;width:auto;padding:4px 6px;font-size:13px;border-radius:3px;background:#0b100e;border:1px solid #4a5550}
.ivgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:3px;border:1px solid #3a4540;background:#050706}
.ivc{position:relative;aspect-ratio:1;background:#0a0d0c;border:1px solid #1c2421}
.ivc .it{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.ivc .it i{font-size:9px;right:2px}
.ivmoney{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;margin:6px 0;font-size:12.5px}
.ivmoney b{padding:2px 8px;border:1px solid #3a4540;background:#0a0d0c;color:#ffd24a;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ivmoney b.w{color:var(--text)}
.ivbtns{display:grid;grid-template-columns:1fr 1fr;gap:5px;justify-items:center}
.ivbtns .btn{width:100%;max-width:124px;padding:4px 6px;font-size:12px;white-space:nowrap}
.ivbtns .btn:last-child{grid-column:1/3}

/* Bo loc nhat (lootModal) + Kho Ren (fboxModal) */
.mbox:has(.lootwin){width:min(100%,780px)}
.mbox:has(.fboxwin){width:min(100%,460px)}
.lootwin .cwt,.fboxwin .cwt{margin:0 30px 8px}
.lfsec{padding:8px 10px;border:1px solid #2f3b36;background:#121815;margin-bottom:8px}
.lfsec h4{font:400 14px var(--font);color:var(--text);margin-bottom:2px}
.lfnote{font-size:11.5px;color:var(--dim);line-height:1.45;margin:2px 0 6px}
.lfck{display:flex;align-items:flex-start;gap:7px;margin:7px 0;font-size:13px;line-height:1.45;cursor:pointer}
.lfck input{margin-top:3px;flex:none;accent-color:#3a7bd5}
.lfck select,.lfrow select{width:auto;display:inline-block;padding:2px 6px;margin:0 3px;font-size:13px}
.lfrow{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.lfbar{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;border:1px solid #3a4540;border-bottom:0;background:linear-gradient(#26302b,#18201c)}
.lfbar b{color:var(--gold);font-size:14px} .lfbar small{color:var(--dim);font-size:12px}
.lftabs{display:flex;gap:4px;padding:4px 4px 0;border:1px solid #3a4540;border-bottom:0;background:#0b0f0d}
.lftabs button{padding:5px 14px;border:1px solid #3a4540;border-bottom:0;border-radius:3px 3px 0 0;background:#141b18;color:var(--dim);font-size:13px}
.lftabs button.on{background:linear-gradient(#6b5226,#3a2a10);color:#ffe9b0;border-color:#a8864a}
.lfmain{border-top-color:#a8864a}
.lfdesc{font-size:12.5px;line-height:1.55;margin:4px 0 8px}
.lfdesc .up{color:#7fe07f}
.lfuse{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;padding:5px 8px;border:1px dashed var(--gold2);font-size:12px;color:var(--gold)}
.lfsetrow{align-items:center;flex-wrap:wrap} .lfsetrow label{display:flex;gap:7px;align-items:flex-start;flex:1 1 300px}
.lfsetrow .btn{padding:3px 10px;font-size:12px}
.lfsets{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.lfset{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid #3a4540;border-radius:14px;background:#0d1210;font-size:12px;cursor:pointer}
.lfset b{color:var(--text)} .lfset small{color:var(--dim);font-size:10.5px} .lfset i{font-style:normal;color:var(--dim)}
.lfset.off{opacity:.55;cursor:default}
.lfset:has(input:checked){border-color:var(--gold2);background:#1e1a10}
.ivup{position:absolute;right:1px;top:-1px;z-index:2;text-decoration:none;font-size:10px;color:#7fe07f;text-shadow:0 0 3px #000;pointer-events:none}
.fbgrid{grid-template-columns:repeat(10,1fr)}
.fbbtns .btn:last-child{grid-column:auto}
.btnrow.left{justify-content:flex-start} .btnrow.left .btn{flex:none;max-width:none;padding:6px 16px;white-space:nowrap}

/* the Khac: hang cong tac gat (Tro nang, Dieu khien & Hien thi) */
.orow{display:flex;align-items:center;gap:12px;min-height:36px;padding:3px 0;font-size:14px;line-height:1.35}
.orow>span{flex:1;min-width:0}
/* nhat ky: gio ghi san trong moi dong, chi hien khi bat (body.logtime) */
.log time{display:none;margin-right:6px;color:#7d8a83;font-size:11px}
body.logtime .log time{display:inline}
/* vien sang do Hoang Kim / Bach Kim trong hanh trang, kho (body.goldglow) */
@keyframes goldglow{0%,100%{box-shadow:inset 0 0 6px #ffb52e88,0 0 3px #ffb52e66}50%{box-shadow:inset 0 0 12px #ffcf5acc,0 0 8px #ffb52eaa}}
@keyframes platglow{0%,100%{box-shadow:inset 0 0 6px #cfe6f688,0 0 3px #cfe6f666}50%{box-shadow:inset 0 0 12px #eaf6ffcc,0 0 8px #cfe6f6aa}}
.it.r4{border-color:#ffb52e} .it.r5{border-color:#eaf6ff}
body.goldglow .it.r4{animation:goldglow 1.6s ease-in-out infinite}
body.goldglow .it.r5{animation:platglow 1.6s ease-in-out infinite}
body.saver .it.r4,body.saver .it.r5{animation:none}
.it s.lk{position:absolute;right:1px;top:0;z-index:2;text-decoration:none;font-size:9px;line-height:1;filter:drop-shadow(0 0 1px #000)}
.ivc .it s.lk~.ivup,.ivc:has(s.lk) .ivup{display:none}

/* Chi tiet mon do (itemModal): dau muc icon + ten, khung so sanh toi co vien, hang nut to chia deu */
.mbox:has(.iwin){width:min(100%,1000px)}
.iwin .idet{gap:12px;padding-right:30px}
.iwin .idet .pic{width:54px;height:54px;border:1px solid #4a5550;border-radius:3px;background:#0a0d0c}
.iwin .idet .pic.r1{border-color:#3a6ab8} .iwin .idet .pic.r2{border-color:#b8962a} .iwin .idet .pic.r3{border-color:#8a4ac0} .iwin .idet .pic.r4{border-color:#e0a83a} .iwin .idet .pic.r5{border-color:#cfe6f6}
.iwin .idet h4{font-size:15px;margin-bottom:2px}
.iwin .sl{margin:10px 0;font-size:13.5px;line-height:1.6}
.iwin .sl .b{font-weight:700;color:var(--text)} .iwin .sl .m{color:#8fb8ff}
.iwin .cmp2{margin:8px 0 10px;padding:9px 12px;border:1px solid #3a4540;border-radius:3px;background:#0a0e0c;line-height:1.6}
.iwin .cmp2 .cmpv{font-size:12.5px;margin:2px 0 6px}
.iwin .reqbad,.iwin .reqnote{margin-top:8px;font-size:12.5px;line-height:1.55}
.iwin .reqnote b{color:#ffd24a}
.iwin .cmp{margin-top:6px;padding-top:12px;border-top:1px solid #3a4540;opacity:1}
.iwin .cmp>small{display:block;margin-bottom:6px}
.iwin .cmp .idet .pic{width:44px;height:44px}
.iwin .cmp .sl{font-size:12.5px;line-height:1.55}
.ibtns{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:14px}
.ibtns .btn{max-width:none!important;width:100%;min-height:52px;padding:8px 6px;font-size:14px;border-radius:4px;line-height:1.25}
.ibtns .btn[disabled]{opacity:.45}
.gdrow{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:13px}
.gdrow span{min-width:110px;text-align:right}
.gdrow .btn{padding:7px 18px;font-size:14px}

/* Cua so Nhiem vu · Pho ban (dungeon.js) */
.mbox:has(.questwin){width:min(100%,720px)}
.questwin .cwt{margin:0 30px 8px}
.dglist{display:grid;gap:6px}
.dgrow{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid #3a4540;border-radius:4px;background:linear-gradient(#18211d,#111815)}
.dgrow i{font-style:normal;font-size:24px;text-align:center}
.dgrow b{color:var(--gold)} .dgrow small{display:block;color:var(--dim);font-size:11.5px}
.dgrow em{font-style:normal;font-size:12px;color:var(--text);white-space:nowrap}
.dgrow.lock{opacity:.5}
.dgrow .btn{padding:6px 16px}
.dgnow{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:6px 0 10px;padding:8px 10px;border:1px dashed var(--gold2);color:var(--gold);font-size:13px}
.qcbox{padding:12px;border:1px solid #3a4540;border-radius:4px;background:#0f1513}
.qcstep{color:var(--dim);font-size:12.5px} .qcstep b{color:var(--gold);font-size:15px}
.qctask{font-size:16px;color:var(--text);margin:6px 0 8px}
.qcbar{height:16px;margin-bottom:8px}
.qcrew{font-size:12.5px;color:#9fe36a}

/* ======== Bo cuc PC kieu JX (pc.js, body.pc: may tinh man hinh ngang) ======== */
#pcTop,#pcChat,#pcMenu,#pcRot,#pcMain,#pcDrawHead{display:none}
body.pc #app{display:block!important;width:100vw;max-width:none}
body.pc #battle{position:absolute;inset:0}
body.pc #tabs,body.pc #compactBtn,body.pc #rotBtn{display:none!important}
/* thanh nhan vat giua tren */
body.pc #top{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(560px,46vw);z-index:6;border:1px solid var(--gold2);border-top:0;border-radius:0 0 10px 10px;padding:5px 10px 7px;background:linear-gradient(#151d1acc,#0a100ee6);box-shadow:0 3px 10px #0008}
body.pc #top .lvbox{width:42px;height:42px} body.pc #giftBtn{width:34px;height:34px;line-height:32px;font-size:16px}
/* goc phai: nut tron + chon ban do + ai (duoi ban do nho) */
body.pc #pcTop{display:flex;flex-direction:column;align-items:flex-end;gap:6px;position:absolute;top:158px;right:8px;z-index:5}
.pcround{display:flex;gap:6px}
.pcround button{width:50px;height:50px;border-radius:50%;border:2px solid #a8864a;background:radial-gradient(#3a2f1c,#120d06);color:#f3e6c4;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8.5px;line-height:1.05;box-shadow:0 2px 6px #000a}
.pcround button i{font-style:normal;font-size:15px;line-height:1.1}
.pcround button:hover{border-color:#f0d58a;box-shadow:0 0 8px #e6c67a88}
.pcmap select{width:210px;padding:4px 6px;font-size:12px;background:#0b100ee6;border:1px solid #6d5a33;border-radius:3px;color:var(--text)}
.pcstage{display:flex;gap:4px}
.pcstage button{padding:3px 8px;font-size:12px;border:1px solid #6d5a33;border-radius:3px;background:#0b100ee6;color:var(--text)}
.pcstage #pcPush{min-width:150px} .pcstage #pcPush.on{color:var(--gold);border-color:var(--gold)}
/* khung thong bao goc trai duoi */
body.pc #pcChat{display:flex;flex-direction:column;position:absolute;left:8px;bottom:8px;width:min(400px,34vw);height:190px;z-index:5;border:1px solid #3a4540;background:#050807cc;border-radius:4px}
#pcChat.min{height:auto} #pcChat.min #pcLog{display:none}
.pctabs{display:flex;gap:2px;padding:3px;border-bottom:1px solid #3a4540;background:#0b100ee6}
.pctabs button{padding:2px 7px;font-size:11px;border:1px solid #2c3632;border-radius:2px;color:var(--dim);background:#121815}
.pctabs button.on{color:#fff3d0;background:linear-gradient(#6b5226,#3a2a10);border-color:#a8864a}
#pcChatHide{margin-left:auto}
#pcLog{flex:1;overflow-y:auto;padding:4px 7px;font-size:12px;line-height:1.45}
#pcLog div{padding:1px 0}
#pcLog .c-loot{color:#cfe0ff} #pcLog .c-combat{color:#ffc9b0} #pcLog .c-quest{color:#e6d39a}
#pcLog time{display:none;margin-right:5px;color:#7d8a83;font-size:10.5px} body.logtime #pcLog time{display:inline}
body.pc #inBtn{bottom:206px!important}
/* thanh phim tat giua duoi: 1 2 3 thuoc | chieu chinh | F1-F4 */
body.pc #pad{display:flex!important;flex-wrap:nowrap;align-items:flex-end;gap:5px;left:50%;right:auto;bottom:8px;transform:translateX(-50%);width:auto;padding:7px 9px;background:#0b0f0de6;border:1px solid #6d5a33;border-radius:6px;box-shadow:0 3px 10px #000a}
body.pc #pad .pbtn{width:46px;height:46px;border-radius:5px;margin:0;border:1px solid #6d5a33;box-shadow:inset 0 0 8px #000}
body.pc #pad .pbtn i,body.pc #pad .pbtn .cd{border-radius:4px}
body.pc #pad .pbtn::after{content:attr(data-key);position:absolute;right:2px;top:0;z-index:3;font-size:9.5px;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
body.pc #pad .pbtn.sk b{display:none}
body.pc #bHp{order:1} body.pc #bMp{order:2} body.pc #bTp{order:3;width:46px;height:46px}
body.pc #pcMain{display:block;order:4;width:58px!important;height:58px!important;margin:0 6px!important;border:2px solid #c8a45a!important;background:#0c120f}
body.pc #pcMain i{position:absolute;inset:3px;background:center/cover no-repeat}
body.pc #pad .sk{order:5}
body.pc #pad .pbtn.cur{border-color:#ffe07a;box-shadow:0 0 8px #ffd24a}
body.pc #pcRot{display:flex;align-items:center;gap:5px;position:absolute;left:50%;transform:translateX(-50%);bottom:76px;z-index:5;padding:2px 8px;font-size:11.5px;border:1px solid #6d5a33;border-radius:3px;background:#0b0f0de6;color:var(--gold)}
/* hang icon menu goc phai duoi */
body.pc #pcMenu{display:flex;gap:4px;position:absolute;right:8px;bottom:8px;z-index:5;padding:5px;border:1px solid #6d5a33;border-radius:6px;background:#0b0f0de6}
#pcMenu button{width:40px;height:40px;border:1px solid #4a5550;border-radius:5px;background:linear-gradient(#26302b,#121815);display:grid;place-items:center}
#pcMenu button:hover{border-color:var(--gold)} #pcMenu button.on{border-color:#f0d58a;box-shadow:0 0 8px #e6c67a88} #pcMenu button.off{opacity:.45}
#pcMenu i{font-style:normal;font-size:19px;line-height:1}
#pcMenu .ic{width:26px;height:26px;background-size:300% 100%;background-position:0 0}
.ic-char{background-image:url(ui/ic_char.png)} .ic-item{background-image:url(ui/ic_item.png)} .ic-skill{background-image:url(ui/ic_skill.png)}
/* ngan keo ben phai: Giang ho / He thong */
body.pc #panel{display:flex!important;flex-direction:column;position:absolute;top:0;right:0;bottom:62px;width:min(400px,40vw);z-index:9;border-left:1px solid var(--gold2);box-shadow:-6px 0 18px #000a;transform:translateX(104%);transition:transform .2s}
body.pc.pcdraw #panel{transform:none}
body.pc #panel .tab{flex:1;height:auto;min-height:0}
body.pc #pcDrawHead{display:flex;gap:4px;align-items:center;padding:6px;border-bottom:1px solid #3a4540;background:#0b100e}
#pcDrawHead button{padding:4px 12px;font-size:12px;border:1px solid #3a4540;border-radius:3px;color:var(--dim)}
#pcDrawHead button.on{color:#fff3d0;border-color:#a8864a;background:linear-gradient(#6b5226,#3a2a10)}
/* Luyen Cong: an cac khung PC */
body.pc.sv #pcTop,body.pc.sv #pcMenu,body.pc.sv #pcRot,body.pc.sv #pcChat{display:none}
.rbnow{font-size:14px;margin:6px 0}

/* nut len / xuong ngua (bo cuc doc): canh nut Ve thanh, anh = ngua dang mac */
#pad #bRide{grid-column:2;width:44px;height:44px;margin:0;border:2px solid #8a7340;background:radial-gradient(#2b3a33,#0c120f)}
#pad #bRide i{inset:5px;background:center/contain no-repeat;border-radius:0}
#pad #bRide.on{border-color:#ffe07a;box-shadow:0 0 10px #ffd24a}
#pad #bRide.off i{filter:grayscale(1) brightness(.55)} #pad #bRide.off{opacity:.75}
body.pc #pad #bRide{display:none}

/* man hinh mo game + dau ban quyen (brand.js) */
#splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,#1c2a22 0%,#070a09 75%)}
#splash.hidden{display:none}
.spbox{width:min(560px,100%);text-align:center;padding:26px 22px 18px;border:1px solid #8a6d35;border-radius:10px;background:linear-gradient(#141c18f0,#0a0f0df0);box-shadow:0 0 40px #000,inset 0 0 30px #e6c67a10}
.sptitle{font-size:34px;letter-spacing:2px;color:#f0d58a;text-shadow:0 2px 0 #5a4018,0 0 18px #e6c67a66}
.spby{margin-top:4px;font-size:14px;color:var(--dim)} .spby b{color:#9fe36a;letter-spacing:2px}
.spask{margin:20px 0 10px;font-size:15px;color:var(--text)}
.spopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spopts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1px solid #4a5550;border-radius:8px;background:linear-gradient(#1f2a25,#111815);color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.spopts button:hover{border-color:var(--gold);box-shadow:0 0 14px #e6c67a55;transform:translateY(-2px)}
.spopts button.on{border-color:#f0d58a;box-shadow:inset 0 0 12px #e6c67a33}
.spopts i{font-style:normal;font-size:30px} .spopts b{font-size:17px;color:var(--gold)} .spopts small{font-size:12px;color:var(--dim);line-height:1.4}
.spnote{margin-top:12px;font-size:12px;color:var(--dim)}
.spcopy{margin-top:16px;padding-top:10px;border-top:1px solid #2f3b36;font-size:12px;color:#c8b98a;letter-spacing:.5px}
@media (max-width:480px){ .spopts{grid-template-columns:1fr} .sptitle{font-size:28px} }
#brandMark{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:4;font-size:10.5px;letter-spacing:.5px;color:#f3e6c4;opacity:.55;text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none;white-space:nowrap}
body.pc #brandMark{top:62px}
body.sv #brandMark{top:auto;bottom:4px}
#onlineTag{position:absolute;left:50%;top:19px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:5px;padding:1px 8px;font-size:11px;color:#bff5bf;background:#0008;border-radius:9px;text-shadow:0 0 3px #000;pointer-events:none;white-space:nowrap}
#onlineTag[hidden]{display:none}
#onlineTag i{width:7px;height:7px;border-radius:50%;background:#3ddc5a;box-shadow:0 0 6px #3ddc5a;animation:onl 2s ease-in-out infinite}
@keyframes onl{50%{opacity:.35}}
body.pc #onlineTag{top:77px}
body.sv #onlineTag{display:none}
.brandcard{font-size:13px;line-height:1.6} .brandcard b{color:var(--gold)}

/* tai khoan · luu dam may (cloud.js) */
.mbox:has(.cloudwin){width:min(100%,520px)}
.cloudwin .cwt{margin:0 30px 10px}
.cloudwin .frow label{min-width:110px}
.cloudwin input{flex:1;min-width:0;padding:7px 10px;background:#0b100e;color:var(--text);border:1px solid #3d4a44;border-radius:6px;font:14px var(--font)}
.cloudbtn{width:100%;max-width:none!important;padding:9px 12px}
#t-more .btnrow .cloudbtn{flex:1}
.crb{color:#f08cff}

/* Phong thu chieu (?thuchieu) */
.stpanel{position:fixed;left:8px;top:64px;z-index:9;width:250px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;background:rgba(14,18,16,.94);border:1px solid #6d5a33;border-radius:6px;box-shadow:0 4px 18px #000a;font-size:12px;color:var(--text)}
.stpanel .sthead{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid #3a3326;color:var(--gold2,#e6c67a)}
.stpanel .sthead small{color:#f08cff;flex:1}
.stpanel .sthead button{width:24px;height:22px;padding:0;border:1px solid #6d5a33;border-radius:3px;background:#1d170c;color:#cbb88a}
.stpanel.min .stbody{display:none}
.stpanel .stbody{display:flex;flex-direction:column;gap:6px;padding:8px;overflow:hidden;min-height:0}
.stpanel .strow{display:flex;align-items:center;gap:6px}.stpanel .strow label{width:44px;color:#9aa49e}
.stpanel select{flex:1;padding:3px;background:#0b100e;color:var(--text);border:1px solid #4a5550;border-radius:3px;font:inherit}
.stpanel .stspd{display:flex;gap:4px}.stpanel .stspd button{padding:2px 8px;border:1px solid #4a5550;border-radius:3px;background:#0b100e;color:#cbd}
.stpanel .stspd button.on{border-color:#e6c67a;color:#e6c67a}
.stpanel .stlist{display:flex;flex-direction:column;gap:3px;overflow:auto;min-height:0;flex:1}
.stpanel .stsk{display:flex;align-items:center;gap:6px;padding:3px 5px;text-align:left;border:1px solid #2c3530;border-radius:4px;background:#121815;color:var(--text);cursor:pointer}
.stpanel .stsk:hover{border-color:#6d5a33}.stpanel .stsk.on{border-color:#e6c67a;background:#2a2412}
.stpanel .stsk img{width:26px;height:26px;flex:none}.stpanel .stsk span{display:flex;flex-direction:column;min-width:0}
.stpanel .stsk b{font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stpanel .stsk small{color:#8a948e;font-size:10px}
.stpanel .sthint{margin:0;color:#8a948e;font-size:11px}.stpanel .stout{color:#ff9a8a;font-size:11px}
@media (max-width:700px){.stpanel{width:200px;top:56px}}

/* Luc chien (thanh tren cung) */
.lcbadge{margin-left:6px;padding:0 6px;font-size:11px;line-height:16px;white-space:nowrap;color:#d8c9a0;background:linear-gradient(#2a2412,#15110a);border:1px solid #6d5a33;border-radius:3px}
.lcbadge b{color:#ffd24a;font-weight:bold}
/* Bang xep hang */
.rankwin .rklist{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px}
.rkrow{display:grid;grid-template-columns:30px 34px 1fr auto;align-items:center;gap:8px;padding:5px 8px;background:#141a17;border:1px solid #2c3530;border-radius:5px}
.rkrow.top1{border-color:#e6c67a;background:linear-gradient(90deg,#3a2f12,#141a17)}.rkrow.top2{border-color:#b8c4cc}.rkrow.top3{border-color:#c98a52}
.rkpos{font-size:18px;text-align:center;color:#cbb88a}.rkrow img{width:34px;height:34px;object-fit:contain}
.rkname{display:flex;flex-direction:column;min-width:0}.rkname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e6c4}.rkname small,.rklv small{color:#8a948e;font-size:11px}
.rklv{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.rklv em{font-style:normal;color:#f08cff;font-size:11px}
.nmlock{color:#9fe36a;margin:6px 0 0}
/* Bao loi / gop y */
.fbwin textarea{width:100%;box-sizing:border-box;margin-top:8px;padding:8px;font:13px var(--font);color:var(--text);background:#0b100e;border:1px solid #4a5550;border-radius:4px;resize:vertical}
.fbwin .fbkind{display:flex;gap:16px}.fbwin .fbkind label{display:flex;align-items:center;gap:5px;cursor:pointer}
.fbwin .fbcount{text-align:right;font-size:11px;color:#8a948e}
.fbwin .frow input[type=text]{flex:1;min-width:0;padding:5px 8px;font:13px var(--font);color:var(--text);background:#0b100e;border:1px solid #4a5550;border-radius:4px}
.fbwin .frow input[type=text]:focus,.fbwin textarea:focus{outline:none;border-color:var(--gold2,#e6c67a)}

.skc b small.skplus{margin-left:1px;font-size:.8em;color:#9fe36a}   /* + cap ky nang tu trang bi */

/* Thong bao cap nhat */
.newswin h4{margin:10px 0 6px;color:#e6c67a;font-size:14px}.newswin h4 small{color:#8a948e;font-weight:normal;font-size:11px;margin-left:6px}
.newslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.newslist li{display:flex;gap:8px;padding:6px 8px;background:#141a17;border:1px solid #2c3530;border-radius:5px}
.newslist li i{font-style:normal;font-size:18px;line-height:22px}.newslist li div{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.newslist li b{color:#f3e6c4}.newslist li span{color:#c9c2b0}.newslist li span b{color:#9fe36a}
.newsfoot{margin:10px 0 4px;padding:8px 10px;border:1px dashed #6d5a33;border-radius:5px;color:#e6c67a;font-size:12.5px}
/* Top 20: dong gon hon */
.rankwin .rklist{gap:3px}.rkrow{padding:3px 8px;grid-template-columns:28px 28px 1fr auto}.rkrow img{width:28px;height:28px}.rkpos{font-size:15px}
.rklv{flex-direction:row;align-items:center;gap:8px}

.newswin .newsprev{margin:14px 0 4px;color:#9aa49e;font-size:12.5px;border-top:1px solid #2c3530;padding-top:8px}
.newsold{margin:4px 0;border:1px solid #2c3530;border-radius:5px;background:#101513}
.newsold summary{cursor:pointer;padding:6px 10px;color:#d8c9a0;font-size:12.5px}.newsold summary small{color:#8a948e;margin-left:6px}
.newsold[open] summary{border-bottom:1px solid #2c3530}.newsold .newsblk{padding:0 8px 8px}.newsold .newsblk h4{display:none}

/* BXH: the Cap do / Leo thap */
.rktabs{display:flex;gap:6px;margin:4px 0 8px}.rktabs button{flex:1;padding:6px;border:1px solid #4a5550;border-radius:4px;background:#121815;color:#cbd;cursor:pointer;font:inherit}
.rktabs button.on{border-color:#e6c67a;color:#e6c67a;background:linear-gradient(#2a2412,#15110a)}
.rklv em.tw{color:#7fd0ff;font-style:normal;font-weight:bold}

/* nut xuc xac ten ngau nhien */
.dice{flex:none;width:32px;height:28px;margin-left:6px;padding:0;font-size:17px;line-height:26px;border:1px solid #6d5a33;border-radius:4px;background:linear-gradient(#2a2412,#15110a);cursor:pointer}
.dice:hover{border-color:#e6c67a}.dice.roll{animation:diceroll .35s ease-out}
@keyframes diceroll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}

/* Hop thu */
#mailTag{position:absolute;left:50%;top:60px;transform:translateX(-50%);z-index:5;padding:3px 10px;font:12px var(--font);color:#1a1205;background:linear-gradient(#ffe08a,#e6b84a);border:1px solid #7a5a1a;border-radius:12px;box-shadow:0 0 10px #ffd24a88;cursor:pointer;animation:mailpulse 1.4s ease-in-out infinite}
#mailTag[hidden]{display:none}body.pc #mailTag{top:118px}body.sv #mailTag{display:none}
@keyframes mailpulse{50%{box-shadow:0 0 18px #ffd24acc}}
.mailwin .mthread{margin:8px 0;padding:8px;border:1px solid #2c3530;border-radius:6px;background:#121815}.mailwin .mthread.new{border-color:#e6c67a}
.mailwin .mhead{display:flex;align-items:center;gap:8px;margin-bottom:4px}.mailwin .mhead small{color:#8a948e}.mailwin .mnew{color:#1a1205;background:#e6c67a;border-radius:3px;padding:0 5px;font-size:11px}
.mailwin .mtag{font-size:12px}.mailwin .mmsg{margin:4px 0;padding:6px 9px;border-radius:6px;font-size:12.5px;line-height:1.45;max-width:88%;word-break:break-word}
.mailwin .mmsg small{display:block;color:#8a948e;font-size:10.5px;margin-bottom:2px}.mailwin .mmsg.me{background:#20251f;border:1px solid #3a4038}
.mailwin .mmsg.adm{margin-left:auto;background:#1f3a2a;border:1px solid #2f6a45}
.mailwin .mreply{display:flex;gap:6px;margin-top:6px}.mailwin .mreply textarea{flex:1;padding:6px;font:12.5px var(--font);color:var(--text);background:#0b100e;border:1px solid #4a5550;border-radius:4px;resize:vertical}

/* Chien truong */
.warwin .warcities{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.warwin .warcity{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 8px;background:#141a17;border:1px solid #2c3530;border-radius:5px}
.warwin .warcity i{font-style:normal;font-size:20px;text-align:center}.warwin .warcity span{display:flex;flex-direction:column}.warwin .warcity small{color:#8a948e;font-size:11px}
.warwin .warnow{border-color:#e6c67a}

/* Hom nay + Tu cay */
.todaywin .grindbtn{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;margin:4px 0 8px;font-size:15px}
.todaywin .grindbtn small{font-size:11px;color:#9aa49e}.todaywin .grindbtn.on{border-color:#5ee85e;box-shadow:0 0 10px #5ee85e55}.todaywin .grindbtn.on b{color:#7fef7f}
.todaywin .todaylist{display:flex;flex-direction:column;gap:5px}
.todaywin .todayrow{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 8px;background:#141a17;border:1px solid #2c3530;border-radius:5px}
.todaywin .todayrow.hot{border-color:#5ee85e}.todaywin .todayrow i{font-style:normal;font-size:20px;text-align:center}
.todaywin .todayrow span{display:flex;flex-direction:column;min-width:0}.todaywin .todayrow small{color:#9aa49e;font-size:11px}
.todaywin .grindbtn{background:linear-gradient(#2a2412,#15110a)!important;border:1px solid #6d5a33!important;border-image:none!important;border-radius:6px;color:#e6c67a;min-height:0;height:auto}
.todaywin .grindbtn small{color:#b8b0a0}

/* Bo vo hoc */
.buildwin .buildcard{display:flex;flex-direction:column;gap:3px;margin:6px 0;padding:8px 10px;background:#141a17;border:1px solid #2c3530;border-radius:6px}
.buildwin .buildcard.empty{opacity:.75}.buildwin .buildcard small{color:#9aa49e;font-size:11.5px}
.buildwin .bname{width:200px;padding:3px 6px;font:bold 13px var(--font);color:#e6c67a;background:#0b100e;border:1px solid #4a5550;border-radius:4px}

/* mau bo loc nhat + nhat ky 7 ngay */
.lftpl{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 6px}.lftpl .btn.sm{min-height:0;padding:3px 8px;font-size:12px}
.jrwin .jrtable{overflow-x:auto;margin:6px 0 10px}.jrwin table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
.jrwin th,.jrwin td{padding:5px 6px;border-bottom:1px solid #2c3530;text-align:right}.jrwin th:first-child,.jrwin td:first-child{text-align:left}
.jrwin th{color:#e6c67a;font-weight:normal;background:#141a17}.jrwin tr.today td{background:#1a2219}.jrwin tr.total td{border-top:1px solid #6d5a33;color:#e6c67a}
.jrwin td small{color:#8a948e;margin-left:3px}.jrwin .jr2{color:#ffd24a}.jrwin .jr3{color:#c77bff}.jrwin .jrs{color:#ffb52e}
.jrwin .jrdeaths{list-style:none;padding:0;margin:4px 0;font-size:12px;max-height:200px;overflow-y:auto}.jrwin .jrdeaths li{padding:4px 6px;border-bottom:1px solid #222a26}.jrwin .jrdeaths i{color:#ff8a7a;font-style:normal}

/* dot bien ngay / luat tuan / tam phap */
#modTag{position:absolute;left:50%;top:38px;transform:translateX(-50%);z-index:4;padding:1px 9px;font:11px var(--font);color:#ffe9b0;background:#0009;border:1px solid #6d5a3388;border-radius:9px;text-shadow:0 0 3px #000;cursor:pointer;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#modTag[hidden]{display:none}body.pc #modTag{top:96px}body.sv #modTag{display:none}
.modswin .modcard{display:flex;flex-direction:column;gap:3px;margin:6px 0;padding:8px 10px}.modswin .modcard b{color:#e6c67a}.modswin .modcard small{color:#8a948e;font-size:11px}
.modswin .chips{margin:4px 0 8px}.weekmods{font-size:12px;margin:6px 0;padding:5px 8px;background:#141a17;border:1px solid #2c3530;border-radius:5px;line-height:1.5}
.tpbox{margin-top:10px;padding:8px 10px;border:1px solid #6d5a33;border-radius:6px;background:#15130d}.tpbox h4{margin:0 0 4px;color:#e6c67a}.tpbox h4 small{font-weight:normal;margin-left:6px}
.tprow{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #2a2618}.tprow i{font-style:normal;font-size:20px;text-align:center}
.tprow span{display:flex;flex-direction:column;min-width:0}.tprow small{color:#9aa49e;font-size:11px}

/* treo may (afk.js) + giai tri (arcade.js) */
#afk{position:fixed;inset:0;z-index:2000;background:#030504;display:grid;place-items:center;padding:16px;cursor:pointer;user-select:none}
#afk.hidden{display:none}
#afk .afkbox{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#9aa49e;font-size:13px;line-height:1.6}
#afk .afkbox>b{color:#5ee85e;letter-spacing:2px;font-size:15px}#afk .afkclock{font-size:44px;color:#3f5a46;font-weight:300}
#afk .afkst{color:#c8c2b0}#afk .afkst b{color:#e6c67a}#afk small{color:#59635d;font-size:11px}
#arcade{position:fixed;inset:0;z-index:1500;background:#070a08;display:flex;flex-direction:column;color:#d8d0bc;user-select:none;touch-action:none}
#arcade .arctop{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0f1512;border-bottom:1px solid #2c3530;font-size:13px}
#arcade .arctop>b{flex:1;color:#e6c67a;font-size:14px}#arcade .arctop span b{color:#fff}#arcade .arctop .btn.sm{min-height:0;padding:4px 10px}
#arcade .arcmain{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:8px}
#arcade canvas{display:block;border-radius:4px;box-shadow:0 0 18px #000}
#arcade .arcmsg{position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:8px;background:#000a;text-align:center;padding:16px}
#arcade .arcmsg.on{display:grid}#arcade .arcmsg b{color:#e6c67a;font-size:18px}#arcade .arcmsg small{display:block;color:#9aa49e;font-size:12px}
#arcade .arcmsg .arcbig{font-size:34px;color:#fff}#arcade .arcmsg .btn{min-width:120px}
#arcade .archelp{text-align:center;font-size:11px;color:#6d766f;padding:6px}
#arcade .arcpad{display:grid;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0f1512;border-top:1px solid #2c3530}
#arcade .arcpad button{height:58px;border-radius:10px;border:1px solid #3a4a40;background:linear-gradient(#1e2924,#121a16);color:#e6c67a;font-size:24px;touch-action:none}
#arcade .arcpad button:active{background:#2d3d33}
#arcade .arcpad.snake{grid-template-columns:repeat(3,1fr);grid-template-areas:". u ." "l d r";max-width:300px;margin:0 auto;width:100%}
#arcade .arcpad.snake [data-c="3"]{grid-area:u}#arcade .arcpad.snake [data-c="2"]{grid-area:l}#arcade .arcpad.snake [data-c="1"]{grid-area:d}#arcade .arcpad.snake [data-c="0"]{grid-area:r}
#arcade .arcpad.tetris{grid-template-columns:repeat(5,1fr)}
.arcwin .arccard{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px;margin:6px 0;background:#141a17;border:1px solid #2c3530;border-radius:6px;cursor:pointer}
.arcwin .arccard.on{border-color:#e6c67a}.arcwin .arccard i{font-style:normal;font-size:30px;text-align:center}
.arcwin .arccard span{display:flex;flex-direction:column;gap:2px;min-width:0}.arcwin .arccard small{color:#9aa49e;font-size:11px}.arcwin .arccard small b{color:#e6c67a}
.arcwin .arcme{font-size:12px;margin:6px 0;padding-left:18px}
.arcwin .rktable{width:100%;border-collapse:collapse;font-size:12px;margin:4px 0}.arcwin .rktable th{color:#e6c67a;font-weight:normal;text-align:left;background:#141a17}
.arcwin .rktable th,.arcwin .rktable td{padding:4px 6px;border-bottom:1px solid #222a26}.arcwin .rktable td:last-child,.arcwin .rktable th:last-child{text-align:right}
/* thanh tuu (achieve.js) */
.achsum{padding:8px 10px;margin:4px 0 8px;background:#141a17;border:1px solid #2c3530;border-radius:6px;font-size:13px;line-height:1.6}.achsum b{color:#e6c67a}.achsum small{display:block;color:#9aa49e;font-size:11px}
.achchips{margin-bottom:6px}.achchips .chip2{cursor:pointer;border:1px solid #2c3530;background:#121815;color:#bcc;font:inherit;font-size:11px;padding:3px 8px;border-radius:12px}.achchips .chip2.on{border-color:#e6c67a;color:#e6c67a}
.achlist{display:flex;flex-direction:column;gap:5px}
.achrow{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;padding:7px 8px;background:#121815;border:1px solid #2a332e;border-left:3px solid var(--tc);border-radius:5px;opacity:.82}
.achrow.got{opacity:1;background:linear-gradient(90deg,#1d2018,#121815)}
.achrow .achtier{font-style:normal;font-size:10px;text-align:center;color:var(--tc);border:1px solid var(--tc);border-radius:10px;padding:2px 0}
.achrow span{display:flex;flex-direction:column;gap:2px;min-width:0}.achrow b{color:#e8dcc0}.achrow.got b{color:var(--tc)}.achrow small{color:#8f9993;font-size:11px}
.achbar{position:relative;display:block;height:14px;background:#0b0f0d;border:1px solid #2c3530;border-radius:7px;overflow:hidden;font-style:normal}
.achbar s{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#3c5a2c,#6a9a3c);text-decoration:none}.achrow.got .achbar s{background:linear-gradient(90deg,#6d5a33,#c9a24a)}
.achbar u{position:relative;display:block;text-align:center;font-size:10px;line-height:13px;color:#e8e0d0;text-decoration:none}

/* che Bach Kim: mon du cap */
#pkPool .btn.pkpair{border-color:#c9a24a}#pkPool .pkn{font-style:normal;margin-left:5px;padding:0 5px;border-radius:8px;background:#c9a24a;color:#1a1205;font-size:11px}

/* ung ho + bang vinh danh (donate.js) */
.dnwin .dnhead{display:flex;align-items:center;gap:10px;margin:0 0 8px}.dnwin .dnhead i{font-style:normal;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#ff8fb1;border:1px solid #ff8fb1;background:#3a1420;box-shadow:0 0 12px #ff5c8a55}
.dnwin .dnhead span{display:flex;flex-direction:column}.dnwin .dnhead small{font-size:10px;letter-spacing:2px;color:#ff8fb1}.dnwin .dnhead b{font-size:17px;color:#f3e6c4}
.dngive p{font-size:13px;line-height:1.65;margin:6px 0;color:#d8d0bc}.dngive p b{color:#ffd24a}
.dnqr{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px auto;padding:14px;max-width:300px;background:#fff;border-radius:12px;box-shadow:0 0 22px #ff5c8a33}
.dnqr img{width:100%;max-width:260px;display:block;border-radius:6px}.dnqrnone{width:220px;height:220px;display:grid;place-items:center;color:#777;border:2px dashed #ccc;border-radius:8px;font-size:13px}
.dnbank{color:#222;font-size:13px;text-align:center;line-height:1.5;font-weight:600}
.dngive .dnnote{background:#2a1620;border:1px solid #6a2a40;border-radius:6px;padding:8px 10px;color:#ffc2d4}
.dnwall .dnbanner{text-align:center;padding:12px 8px;margin:4px 0 12px;border-radius:8px;background:linear-gradient(135deg,#3a2408,#1d1305 45%,#3a1424);border:1px solid #8a6a2a;position:relative;overflow:hidden}
.dnwall .dnbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff3 50%,transparent 70%);transform:translateX(-100%);animation:dnshine 4s ease-in-out infinite}
.dnwall .dnbanner b{display:block;font-size:20px;color:#ffd24a;text-shadow:0 0 12px #ffb52e88;letter-spacing:1px}.dnwall .dnbanner small{color:#e8c9a0;font-size:12px}
@keyframes dnshine{60%,100%{transform:translateX(100%)}}
.dnpodium{display:grid;grid-template-columns:1fr;gap:20px;margin:22px 0 10px}   /* xep doc nhu dien thoai ca tren PC (gon, dep hon) */
#modal .mbox:has(.dnwin){max-width:520px}
.dnpod{--c:#ff8fb1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 8px 12px;border-radius:10px;text-align:center;background:linear-gradient(180deg,#1d1a14,#121410);border:1px solid var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent);min-width:0}
.dnpod.p1{order:-1;padding-top:34px;background:linear-gradient(180deg,#2e2410,#151209)}.dnpod.empty{display:none}
.dnpod .dncrown{position:absolute;top:-16px;font-style:normal;font-size:28px;filter:drop-shadow(0 0 6px #ffd24a)}.dnpod.p1 .dncrown{font-size:34px;top:-20px;animation:dnbob 2.4s ease-in-out infinite}
@keyframes dnbob{50%{transform:translateY(-4px)}}
.dnpod .dnname{font-size:15px;color:var(--c);word-break:break-word}.dnpod.p1 .dnname{font-size:18px}
.dntier{font-size:11px;padding:1px 8px;border-radius:10px;border:1px solid var(--c);color:var(--c);white-space:nowrap}
.dnamt{font-size:12px;color:#e6c67a}.dnpod q,.dnrow q{font-size:11px;color:#b9b2a2;font-style:italic;quotes:"“" "”";word-break:break-word}
.dnlist{display:flex;flex-direction:column;gap:5px}
.dnrow{--c:#ff8fb1;display:grid;grid-template-columns:30px 1fr auto auto;gap:8px;align-items:center;padding:7px 10px;border-radius:7px;background:#141815;border:1px solid #2a312c;border-left:3px solid var(--c)}
.dnrow em{font-style:normal;color:#8a948e;text-align:center}.dnrow span{display:flex;flex-direction:column;min-width:0}.dnrow b{color:var(--c)}
.t1{--c:#ff8fb1}.t2{--c:#d39a62}.t3{--c:#d8e2ea}.t4{--c:#ffd24a}.t5{--c:#7fe8ff}
.dnpod.t5,.dnrow.t5{background:linear-gradient(135deg,#10222a,#1b1030 60%,#10222a);background-size:200% 200%;animation:dngem 6s ease infinite}
@keyframes dngem{50%{background-position:100% 100%}}
.dnempty{text-align:center;color:#c9b8a8;padding:20px;line-height:1.8}
@media (max-width:520px){.dnrow{grid-template-columns:24px 1fr auto}.dnrow .dntier{display:none}}

/* than ma cac (thanma.js) */
.tmwin .tmcard{background:linear-gradient(180deg,#1d1a12,#121410);border:1px solid #5c4a26;border-radius:8px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:5px}
.tmwin .tmcard.got{border-color:#c9a24a;box-shadow:0 0 10px #c9a24a33}.tmwin .tmcard>b{color:#e6c67a}.tmwin .tmcard small{font-size:11px;color:#a9a290;line-height:1.5}
.tmwin .tmtop{flex-direction:row;align-items:center;gap:12px}.tmwin .tmtop i{font-style:normal;font-size:30px;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;border:1px solid #c9a24a;background:#2a2010}
.tmwin .tmtop span{display:flex;flex-direction:column;gap:3px}.tmwin .tmtop b{font-size:16px;color:#e6c67a}
.tmwin .tmgrp{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px;color:#e6c67a;border-bottom:1px solid #3a3326;padding-bottom:4px}.tmwin .tmgrp small{color:#8a948e;font-weight:normal;font-size:11px}
.tmwin .tmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}.tmwin .tmgrid .tmcard{margin:0}
.tmwin .tmhead{display:flex;gap:10px;align-items:center}.tmwin .tmhead img{width:46px;height:46px;object-fit:contain;background:#0b0f0d;border:1px solid #3a3326;border-radius:6px}
.tmwin .tmhead span{display:flex;flex-direction:column;min-width:0}.tmwin .tmhead b{color:#f3e6c4;font-size:14px}.tmwin .tmhead small{font-size:10px}
.tmwin .tmlv{font-style:normal;font-size:11px;color:#1a1205;background:#c9a24a;border-radius:8px;padding:0 5px}
.tmwin .tmstats{list-style:none;margin:2px 0;padding:6px 8px;background:#0e1210;border-radius:5px;font-size:11px;color:#c8c2b0;display:flex;flex-direction:column;gap:2px}.tmwin .tmstats .tmpw{color:#ffd27a}
.tmwin .tmfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}.tmwin .tmfoot .btn.sm{min-height:0;padding:4px 12px}
/* dong hanh (pets.js) */
.petpane{background:linear-gradient(180deg,#1c1f18,#121511);border:1px solid #3d4a33;border-radius:8px;padding:10px 12px;margin:8px 0 12px;display:flex;flex-direction:column;gap:8px}
.petpane .pethead{display:flex;align-items:center;gap:10px}.petpane .pethead img{width:48px;height:48px;object-fit:contain}
.petpane .pethead span{flex:1;display:flex;flex-direction:column}.petpane .pethead small{font-size:9px;letter-spacing:1px;color:#8a948e}.petpane .pethead b{color:#e6c67a;font-size:14px}
.petrole{border:1px solid #3d5a2c;border-radius:6px;padding:6px 8px;background:#141a12}.petrole small{font-size:9px;letter-spacing:1px;color:#9fe36a}.petrole p{margin:4px 0 0;font-size:12px}
.pettag{display:inline-block;font-size:10px;padding:1px 6px;margin:1px 2px 1px 0;border-radius:8px;border:1px solid #4a6a3a;color:#bfe8a0;background:#1a2416}
.petskills{display:grid;grid-template-columns:1fr 1fr;gap:6px}.petsk{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border:1px solid #2c3530;border-radius:6px;background:#101411}
.petsk b{color:#e6c67a;font-size:13px}.petsk small{color:#9aa49e;font-size:11px}.petsk.off{opacity:.55}
.petzone{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 6px;color:#e6c67a;border-bottom:1px solid #2c3530;padding-bottom:3px}.petzone small{color:#8a948e;font-weight:normal;font-size:11px}
.petgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.petcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border:1px solid #2c3530;border-radius:7px;background:#121614;color:#d8d0bc;cursor:pointer;font:inherit;text-align:center}
.petcard img{height:52px;max-width:100%;object-fit:contain}.petcard b{font-size:12px;color:#e8e0d0}.petcard small{font-size:10px;color:#7f8a84}
.petcard.on{border-color:#e6c67a;box-shadow:0 0 8px #e6c67a44}.petcard.mine{background:linear-gradient(180deg,#1e2414,#121614)}.petcard.lock{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
@media (max-width:520px){.petskills{grid-template-columns:1fr}.petgrid{grid-template-columns:repeat(2,1fr)}}
/* thap II (tower2.js) */
.t2win .t2rec{font-size:14px;margin:8px 0}.t2win h4{margin:14px 0 6px;color:#e6c67a}.t2win h4 small{font-weight:normal;font-size:11px}
.t2pt{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border:1px solid #2c3530;border-radius:6px;margin:4px 0;background:#121614}
.t2pt span{display:flex;flex-direction:column}.t2pt b{color:#e6c67a}.t2pt i{font-style:normal;color:#9fe36a;font-size:12px}.t2pt small{font-size:11px;color:#9aa49e}.t2pt .pm{flex-direction:row;gap:4px}
.sl.sksup{border-top:1px dashed #3a4a40;padding-top:6px}.sl.sksup .up{color:#7fe37f}.sl.sksup small{display:block;margin-top:2px}

/* ======== Giao dien JX PC (jxui.js, body.jxui): anh goc cat tu ui.pak (ui/jx, tools/extract_ui.py) ======== */
.jxo{display:none!important}
body.jxui{--jxl:#a9d3be;--jxt:#ffe9a0;--jxb:#5f7368}
/* khung cua so: goc nut that, hai suon xanh; nen hoa van toi; thanh tieu de da voi 2 dong tien */
body.jxui .mbox{border-style:solid;border-color:transparent;border-width:9px 15px;border-image:url(ui/jx/frame.png) 9 19 / 9px 15px stretch;border-radius:0;padding:0 12px 12px;background:linear-gradient(#0e1210f0,#0e1210f0),url(ui/jx/flor.png) 0 0/314px auto;background-clip:padding-box;box-shadow:0 8px 30px #000d}
body.jxui #mBody>h3:first-child,body.jxui #mBody>div:first-child>h3:first-child{position:sticky;top:0;z-index:4;display:flex;justify-content:center;align-items:center;gap:10px;height:32px;margin:0 -12px 10px;padding:0 60px;border:0 solid transparent;border-image:url(ui/jx/title.png) 0 86 0 88 fill / 0 78px 0 80px round;font:700 14px/1 Arial,Helvetica,sans-serif;color:#f6f0c8;text-shadow:0 0 3px #1d8a66,0 0 6px #0b4a37,0 1px 1px #000;letter-spacing:.3px;white-space:nowrap;overflow:hidden}
body.jxui #mBody>h3:first-child small,body.jxui #mBody>div:first-child>h3:first-child small{font:400 11px Arial,sans-serif;color:#d8e8dc;text-shadow:0 1px 1px #000}
body.jxui .cwt::before,body.jxui .cwt::after{display:none}
body.jxui .mbox .mx,body.jxui .mbox:has(.cwin) .mx{top:5px;right:5px;z-index:6;width:22px;height:22px;border-radius:50%;border:1px solid #c9d8cc;background:radial-gradient(#4a5a50,#141a17);color:#fff3d0;font-size:12px;line-height:20px;box-shadow:0 0 0 1px #000,0 0 6px #000}
body.jxui .mbox .mx:hover{background:radial-gradient(#7a4030,#2a0f08)}
body.pc.jxui #mBody>h3:first-child,body.pc.jxui #mBody>div:first-child>h3:first-child{cursor:move;user-select:none}
body.pc.jxui #modal{background:#0005}
/* dien thoai: cua so truot tu duoi len, rong het man hinh */
body.jxui:not(.pc) #modal{place-items:end center;padding:0}
body.jxui:not(.pc) #modal .mbox{width:100%;max-height:90%;animation:jxup .18s ease-out}
@keyframes jxup{from{transform:translateY(36px);opacity:.3}}
/* nut van da chu dam (nhu nut Dong / Tro lai cua JX) */
body.jxui .btn{background:url(ui/jx/marble.png) 0 50%/auto 100% repeat-x;border:1px solid #1c211d;border-radius:2px;box-shadow:inset 0 1px 0 #ffffff45,inset 0 -1px 0 #0007,0 1px 2px #000a;color:#17140a;font-weight:700;text-shadow:0 0 3px #f6efc8,0 0 1px #f6efc8}
body.jxui .btn:hover{background-position:0 50%;filter:brightness(1.13)} body.jxui .btn:active{filter:brightness(.9)}
body.jxui .btn[disabled]{filter:grayscale(1) brightness(.62);opacity:.75}
body.jxui .btn.on{border-color:#f0d58a;box-shadow:0 0 0 1px #f0d58a,0 0 8px #ffe08a88}
body.jxui .btn.red{background:linear-gradient(#8a2a1cd0,#4a1208d0),url(ui/jx/marble.png) 0 50%/auto 100%;color:#ffeccc;text-shadow:0 1px 2px #000}
body.jxui .card{border-color:#34413a;border-radius:2px;background:#0a0e0ccc}
/* the (tab) */
body.jxui .sktabs button,body.jxui .pctabs button,body.jxui #pcDrawHead button{background:url(ui/jx/tab.png) 100% 0/200% 100%;border:1px solid #232b26;border-radius:0;color:var(--jxl);text-shadow:0 1px 1px #000}
body.jxui .sktabs button.on,body.jxui .pctabs button.on,body.jxui #pcDrawHead button.on{background-position:0 0;color:#d1fbe6;text-shadow:0 0 2px #000,0 0 2px #000;border-color:#8ea596}
/* thanh nhan vat: khung da, o cap, thanh mau / noi luc / kinh nghiem dung anh goc */
body.jxui #top{background:linear-gradient(#0c110fe8,#0a0e0ce8),url(ui/jx/flor.png) 0 0/314px auto;border-bottom:2px solid var(--jxb)}
body.jxui .lvbox{border:2px solid #8ea596;border-radius:2px;box-shadow:0 0 0 1px #000,inset 0 0 6px #000}
body.jxui .lvbox #lv{border-color:#8ea596;background:radial-gradient(#26332d,#070a09);color:var(--jxt)}
body.jxui .bars .bar{border:1px solid #4b5d53;border-radius:0;background:#040605;box-shadow:inset 0 0 4px #000}
body.jxui .bars .bar.hp i{background:url(ui/jx/b_life.png) 0 0/100% 100%} body.jxui .bars .bar.mp i{background:url(ui/jx/b_mana.png) 0 0/100% 100%}
body.jxui .bars .bar.xp i{background:url(ui/jx/b_exp.png) 0 0/100% 100%}
body.jxui .bars .bar em{background:#000c;border-right:1px solid #4b5d53;color:var(--jxl)}
body.pc.jxui #top{border-style:solid;border-color:transparent;border-width:0 15px 9px;border-image:url(ui/jx/frame.png) 9 19 / 0 15px 9px stretch;border-radius:0;padding:4px 6px 4px;background-clip:padding-box;box-shadow:0 4px 12px #000a}
/* thanh the duoi (dien thoai): icon goc cua thanh cong cu JX */
body.jxui #tabs{background:linear-gradient(#0a0e0cee,#0a0e0cee),url(ui/jx/flor.png) 0 0/314px auto;border-top:2px solid var(--jxb)}
body.jxui #tabs button{padding-top:33px;border-radius:2px;color:var(--jxl)}
body.jxui #tabs button::before{top:3px;width:28px;height:28px;margin-left:-14px;background-size:300% 100%;background-position:0 0}
body.jxui #tabs button.on{background:linear-gradient(#23302acc,#101613cc);border-color:#8ea596;color:var(--jxt);box-shadow:inset 0 0 8px #000;text-shadow:0 1px 2px #000}
body.jxui #tabs button.on::before{background-position:100% 0}
body.jxui #tabs button[data-t=log]::before{background-image:url(ui/jx/tb_chat.png)} body.jxui #tabs button[data-t=char]::before{background-image:url(ui/jx/tb_char.png)}
body.jxui #tabs button[data-t=skill]::before{background-image:url(ui/jx/tb_skill.png)} body.jxui #tabs button[data-t=inv]::before{background-image:url(ui/jx/tb_item.png)}
body.jxui #tabs button[data-t=more]::before{background-image:url(ui/jx/tb_sys.png)}
body.jxui #panel{background:linear-gradient(#0e1210f2,#0e1210f2),url(ui/jx/flor.png) 0 0/314px auto;border-top:2px solid var(--jxb)}
/* o phim tat vuong (dien thoai) */
body.jxui:not(.pc) #pad .pbtn{border-radius:2px;border:1px solid #7d9387;box-shadow:0 0 0 1px #000,inset 0 0 8px #000,0 2px 6px #000a}
body.jxui:not(.pc) #pad .pbtn i,body.jxui:not(.pc) #pad .pbtn .cd{border-radius:1px}
body.jxui:not(.pc) #pad .pbtn.sk{background:#050806}
body.jxui:not(.pc) #pad .pbtn.cur{border-color:#ffe07a;box-shadow:0 0 0 1px #000,0 0 10px #ffd24a}
/* ---- PC: thanh phim tat goc 800x94 giua duoi, phong theo --hk ---- */
body.pc.jxui #pad,body.pc.jxui #pcMenu{display:block!important;position:absolute;left:50%;right:auto;bottom:0;width:800px;height:94px;padding:0;gap:0;border:0;border-radius:0;box-shadow:none;transform:translateX(-50%) scale(var(--hk,1));transform-origin:50% 100%;pointer-events:none}
body.pc.jxui #pad{background:url(ui/jx/hud.png) 0 0/800px 94px no-repeat;z-index:5}
body.pc.jxui #pcMenu{background:none;z-index:6}
body.pc.jxui #pad .pbtn{position:absolute;top:45px;width:34px!important;height:34px!important;margin:0!important;border:0!important;border-radius:0;background-color:transparent;box-shadow:none;pointer-events:auto}
body.pc.jxui #pad .pbtn i,body.pc.jxui #pad .pbtn .cd{border-radius:0}
body.pc.jxui #pad .pbtn::after{font:700 9px Arial,sans-serif;color:#cfe3d6;right:1px;top:0}
body.pc.jxui #pad .pbtn.cur{outline:1px solid #ffe07a;box-shadow:0 0 8px #ffd24a}
body.pc.jxui #bHp{left:16px} body.pc.jxui #bMp{left:54px} body.pc.jxui #bTp{left:92px}
body.pc.jxui #pad .sk[data-i="0"]{left:130px} body.pc.jxui #pad .sk[data-i="2"]{left:168px} body.pc.jxui #pad .sk[data-i="3"]{left:206px}
body.pc.jxui #pad .sk[data-i="1"]{top:24px;left:410px;background:#050806}
body.pc.jxui #pad #bRide{display:block;left:282px;border:0} body.pc.jxui #jxRot{display:block!important;left:321px}
body.pc.jxui #pad #pcMain{top:24px;left:373px;background:#050806} body.pc.jxui #pad #jxAuto{display:block!important;left:244px}
body.pc.jxui #pad .pbtn.hp,body.pc.jxui #pad .pbtn.mp{background-size:auto 70%;background-position:center 40%;background-repeat:no-repeat;background-color:transparent}
body.pc.jxui #pad .pbtn.hp{background-image:url(img/i/pot0.png)} body.pc.jxui #pad .pbtn.mp{background-image:url(img/i/pot5.png)}
body.pc.jxui #pad .pbtn.pot span{font:700 9px/1 Arial,sans-serif;place-items:end center;padding-bottom:2px}
body.pc.jxui #bTp{background:radial-gradient(#6b5420,#1a1406)}
body.pc.jxui #pad .pbtn .cnt{right:-4px;top:-9px}
body.pc.jxui #jxAuto span{position:absolute;inset:0;display:grid;place-items:center;font:700 10px Arial,sans-serif;color:#7d8a83}
body.pc.jxui #jxAuto.on span{color:#7cff7d;text-shadow:0 0 6px #2f9a3f}
body.pc.jxui #jxRot i{inset:2px;background:url(ui/jx/tb_run.png) 0 0/200% 100% no-repeat;filter:grayscale(1) brightness(.6)}
body.pc.jxui #jxRot.on i{background-position:100% 0;filter:none}
body.pc.jxui #pcRot{display:none}
/* 10 nut menu ben phai thanh (anh goc 3 khung: thuong / nhan / sang) */
body.pc.jxui #pcMenu button{position:absolute;top:53px;width:28px;height:28px;padding:0;border:0;border-radius:0;background:none 0 0/300% 100% no-repeat;pointer-events:auto;box-shadow:none}
body.pc.jxui #pcMenu button:hover{background-position:100% 0} body.pc.jxui #pcMenu button:active{background-position:50% 0}
body.pc.jxui #pcMenu button>i{display:none}
body.pc.jxui #pcMenu .jxo{display:block!important}
body.pc.jxui #pcMenu [data-pm=ride]{display:none}
body.pc.jxui #pcMenu [data-pm=char]{left:460px;background-image:url(ui/jx/tb_char.png)} body.pc.jxui #pcMenu [data-pm=inv]{left:491px;background-image:url(ui/jx/tb_item.png)}
body.pc.jxui #pcMenu [data-pm=forge]{left:522px;background-image:url(ui/jx/tb_bag.png)} body.pc.jxui #pcMenu [data-pm=skill]{left:553px;background-image:url(ui/jx/tb_skill.png)}
body.pc.jxui #pcMenu [data-pm=quest]{left:584px;background-image:url(ui/jx/tb_task.png)} body.pc.jxui #pcMenu [data-jx=pet]{left:615px;background-image:url(ui/jx/tb_team.png)}
body.pc.jxui #pcMenu [data-jx=guild]{left:646px;background-image:url(ui/jx/tb_guild.png)} body.pc.jxui #pcMenu [data-jx=rank]{left:677px;background-image:url(ui/jx/tb_friend.png)}
body.pc.jxui #pcMenu [data-pm=world]{left:708px;background-image:url(ui/jx/tb_chat.png)} body.pc.jxui #pcMenu [data-pm=sys]{left:739px;background-image:url(ui/jx/tb_sys.png)}
body.pc.jxui #pcMenu [data-jx=event]{left:726px;top:-10px;width:74px;height:61px;background-image:url(ui/jx/market.png)}
body.pc.jxui #pcChat{bottom:calc(94px * var(--hk,1) + 6px);border-color:#3b4a42;border-radius:0;background:#040706b8}
body.pc.jxui #panel{bottom:calc(94px * var(--hk,1))}
body.pc.jxui #inBtn{bottom:calc(94px * var(--hk,1) + 206px)!important}
body.pc.jxui .pcround button{border-color:#8ea596;background:radial-gradient(#2a3a33,#0a0f0d);color:#e8f0dc}
body.pc.jxui .pcmap select,body.pc.jxui .pcstage button{border-color:#5f7368;border-radius:0;background:#0a0e0ce6}
body.pc.jxui.sv #pcMenu{display:none!important}
body.pc.jxui #pad .pbtn.sk{background:transparent}
body.jxui .mbox,body.jxui .tab,body.jxui #pcLog{scrollbar-width:thin;scrollbar-color:#5f7368 #0a0e0c}
body.pc.jxui #modal{bottom:calc(94px * var(--hk,1))}
body.jxui .feat{border:1px solid #4e5f56;border-radius:2px;background:linear-gradient(#1b2420,#0b100e);box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 #ffffff12}
body.jxui .feat:hover{border-color:#a9c7b5} body.jxui .feat span{color:var(--jxl)}
/* ---- giai doan 4: the, o do, o nhap, o tich, thong bao, tieu de muc theo JX ---- */
body.jxui #mBody:not(:has(> h3:first-child,> div:first-child > h3:first-child)){padding-top:12px}
body.jxui .dtabs button,body.jxui .lftabs button,body.jxui .rktabs button{background:url(ui/jx/tab.png) 100% 0/200% 100%;border:1px solid #232b26;border-radius:0;color:var(--jxl);text-shadow:0 1px 1px #000;box-shadow:inset 0 0 0 1px #0006}
body.jxui .dtabs button:hover,body.jxui .lftabs button:hover,body.jxui .rktabs button:hover{color:#7cff7d}
body.jxui .dtabs button.on,body.jxui .lftabs button.on,body.jxui .rktabs button.on{background-position:0 0;color:#d1fbe6;font-weight:700;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 1px #000;border-color:#8ea596}
body.jxui .dtabs{gap:2px} body.jxui .lftabs{border-color:#34413a;background:#050706}
/* tieu de muc ben trong cua so / bang */
body.jxui .tab h3,body.jxui #mBody h3:not(:first-child),body.jxui .cwin h3:not(.cwt){color:var(--jxt);padding-bottom:3px;border-bottom:1px solid;border-image:linear-gradient(90deg,#8ea596,#8ea59600) 1;text-shadow:0 1px 2px #000}
body.jxui #mBody h4{color:var(--jxt)}
/* o do / o trang bi / o chieu: o vuong toi vien den nhu tui do JX */
body.jxui .it{border-radius:0;background:#1c1f1d;box-shadow:inset 0 0 0 1px #000,inset 0 0 8px #000}
body.jxui .ivc{background:#262826;border:1px solid #000;box-shadow:inset 0 0 0 1px #3c3f3c}
body.jxui .ivgrid{background:#4a4b47;padding:3px;border:1px solid #000;box-shadow:inset 0 0 0 1px #6c6e66}
body.jxui .dslot{border-radius:0;border-color:#000;background:#202321;box-shadow:inset 0 0 0 1px #3c3f3c,inset 0 0 8px #000;color:#6d7a72}
body.jxui .skc{border-radius:0;border-color:#000;background:#151816;box-shadow:inset 0 0 0 1px #3a3f3b,inset 0 0 8px #000}
body.jxui .skh{border-radius:0;border-color:#000;background:url(ui/jx/tab.png) 100% 0/200% 100%;color:var(--jxl)}
body.jxui .skgrid,body.jxui .doll{border-radius:0;border-color:#000;background:linear-gradient(#0c100ee0,#0c100ee0),url(ui/jx/flor.png) 0 0/314px auto;box-shadow:inset 0 0 0 1px #4a5a50}
body.jxui .cbox,body.jxui .cbar,body.jxui .cmp2{border-radius:0;border-color:#34413a;background:#070a09d0}
/* o nhap, chon */
body.jxui select,body.jxui textarea,body.jxui input[type=text],body.jxui input[type=number],body.jxui input[type=password],body.jxui .camt,body.jxui #t-more select,body.jxui #t-more input[type=text]{border-radius:0;border:1px solid #56665c;background:#030504;color:#e8e4c8;box-shadow:inset 0 1px 3px #000}
body.jxui select:focus,body.jxui input:focus,body.jxui textarea:focus{outline:none;border-color:#a9d3be}
/* o tich (anh goc 3 khung: trong / tich / sang) */
body.jxui input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:15px;height:15px;margin:0 4px 0 0;vertical-align:-3px;border:0;background:url(ui/jx/check.png) 0 0/300% 100% no-repeat;image-rendering:pixelated;cursor:pointer}
body.jxui input[type=checkbox]:checked{background-position:50% 0}
body.jxui input[type=checkbox]:disabled{opacity:.4}
/* cong tac bat / tat */
body.jxui .sw{border-radius:2px;background:#050706;border-color:#56665c}
body.jxui .sw i{border-radius:1px;background:url(ui/jx/marble.png) 0 0/auto 100%;box-shadow:0 0 0 1px #000}
body.jxui .sw.on{background:linear-gradient(#1f6a3f,#0c3a20);border-color:#7cff7d}
/* nut + / - cong diem */
body.jxui .cpm,body.jxui .plus{border-radius:0;border:1px solid #000;background:url(ui/jx/marble.png) 0 50%/auto 100%;color:#17140a;font-weight:700;text-shadow:0 0 2px #f6efc8;box-shadow:inset 0 1px 0 #ffffff40}
body.jxui .cpm[data-m],body.jxui .cmax{border-radius:0;border-color:#000;background:#2a2e2b;color:#cfd8cf}
/* the chip, nut Auto, thong bao nhanh */
body.jxui .chip,body.jxui #ctrlBtn{border-color:#8ea596;border-radius:3px;background:#050806d0;color:#e8f0dc}
body.jxui .chip.on{background:#14301f;color:#7cff7d;box-shadow:0 0 8px #2f9a3f66}
body.jxui #toast{border:1px solid #8ea596;border-radius:0;background:linear-gradient(#0d1210f2,#070a09f2);color:var(--jxt);box-shadow:0 0 0 1px #000,0 4px 14px #000c;text-shadow:0 1px 1px #000}
/* chon mon phai, the thong tin */
body.jxui .facpick button{border-radius:0;border-color:#4e5f56;background:linear-gradient(#1b2420,#0b100e)}
body.jxui .facpick button:hover{border-color:#a9c7b5}
/* chi tiet mon do: nen den trong nhu bang mo ta vat pham JX */
body.jxui .mbox:has(.iwin){background:linear-gradient(#040605f4,#040605f4),url(ui/jx/flor.png) 0 0/314px auto}
body.jxui .iwin .idet .pic{border-radius:0;background:#1c1f1d;box-shadow:inset 0 0 0 1px #000}
body.jxui .iwin .idet h4{font-family:Arial,Helvetica,sans-serif;font-weight:700;text-shadow:0 1px 2px #000}
body.jxui .iwin .cmp{border-top-color:#4a5a50}
body.jxui .chip2{border-radius:2px;border-color:#4e5f56;background:#070a09;color:var(--jxl)}
body.jxui .chip2.on{border-color:#a9c7b5;background:#1b2a23;color:#d1fbe6;box-shadow:0 0 6px #7cff7d33}
body.jxui .spbox{border-style:solid;border-color:transparent;border-width:9px 15px;border-image:url(ui/jx/frame.png) 9 19 / 9px 15px stretch;border-radius:0;background:linear-gradient(#0e1210f2,#0e1210f2),url(ui/jx/flor.png) 0 0/314px auto;background-clip:padding-box}
body.jxui #t-more .btn{padding:7px 16px;border:1px solid #1c211d;border-radius:2px;background:url(ui/jx/marble.png) 0 50%/auto 100% repeat-x;color:#17140a;text-shadow:0 0 3px #f6efc8,0 0 1px #f6efc8;box-shadow:inset 0 1px 0 #ffffff45,inset 0 -1px 0 #0007,0 1px 2px #000a}
body.jxui #t-more .btn.red{background:linear-gradient(#8a2a1cd0,#4a1208d0),url(ui/jx/marble.png) 0 50%/auto 100%;color:#ffeccc;text-shadow:0 1px 2px #000}
body.pc.jxui #panel{border-style:solid;border-color:transparent;border-width:0 0 0 15px;border-image:url(ui/jx/frame.png) 9 19 / 0 0 0 15px stretch}
body.pc.jxui #pcChat{border-style:solid;border-color:transparent;border-width:9px 15px;border-image:url(ui/jx/frame.png) 9 19 / 9px 15px stretch;background-clip:padding-box}
/* cum chon ai (the Giang ho): nut xanh dam chu sang nhu nut "Loi rao / Dinh gia" cua JX, de doc hon nen da */
body.jxui .btn.arr,body.jxui .btn.push{background:linear-gradient(#22332b,#0c1512);border:1px solid #8ea596;border-radius:2px;color:#d1fbe6;font-weight:700;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px 0 #ffffff1c,0 0 0 1px #000}
body.jxui .btn.arr{min-width:34px;font-size:14px}
body.jxui .btn.arr[disabled]{filter:none;opacity:.35}
body.jxui .btn.push{min-width:64px;font-size:13px}
body.jxui .btn.push.on{background:linear-gradient(#2c6a3c,#0f3a1c);border-color:#7cff7d;color:#eaffd8;text-shadow:0 0 4px #2f9a3f,0 1px 2px #000;box-shadow:0 0 0 1px #000,0 0 10px #7cff7d55}
/* nut kieu "Khoa / Loi rao / Dinh gia" cua JX (mau do tu anh goc): vien den, duong vien trong xam xanh, nen xanh den sang dan xuong duoi, chu sang */
body.jxui .btn,body.jxui #t-more .btn{background:linear-gradient(#020d0b,#0b1c19 45%,#19322e);border:1px solid #000;border-radius:0;box-shadow:inset 0 0 0 1px #3c4a43,0 1px 3px #000c;color:#d6eadf;font-weight:600;text-shadow:0 1px 1px #000,0 0 2px #000}
body.jxui .btn:hover,body.jxui #t-more .btn:hover{filter:none;color:#7cff7d;box-shadow:inset 0 0 0 1px #6f9a86,0 1px 3px #000c;background:linear-gradient(#04130f,#10261f 45%,#21423a)}
body.jxui .btn:active,body.jxui #t-more .btn:active{filter:none;background:linear-gradient(#19322e,#0b1c19 55%,#020d0b)}
body.jxui .btn.on{color:#7cff7d;box-shadow:inset 0 0 0 1px #7cff7d99,0 0 8px #7cff7d44}
body.jxui .btn.red,body.jxui #t-more .btn.red{background:linear-gradient(#140302,#3a0e08 50%,#5e1c12);color:#ffd8c8;box-shadow:inset 0 0 0 1px #7a4236,0 1px 3px #000c}
body.jxui .btn.red:hover,body.jxui #t-more .btn.red:hover{color:#fff0e0;box-shadow:inset 0 0 0 1px #c8644a,0 1px 3px #000c}
body.jxui .btn[disabled]{filter:none;opacity:.4;color:#9aa8a0}
body.jxui .cpm,body.jxui .plus{background:linear-gradient(#020d0b,#19322e);border:1px solid #000;box-shadow:inset 0 0 0 1px #3c4a43;color:#7cff7d;text-shadow:0 1px 1px #000}
/* cua so Ung ho (donate.js): giu kieu cu, khong dung khung / nut JX */
body.jxui #modal:has(.dnwin){place-items:center;padding:12px}
body.jxui #modal .mbox:has(.dnwin){border:14px solid transparent;border-image:url(ui/panel.png) 16 / 14px stretch;border-radius:8px;padding:14px;background:var(--panel);background-clip:padding-box;box-shadow:none;animation:none}
body.jxui #modal .mbox:has(.dnwin) .mx{top:6px;right:8px;width:auto;height:auto;border:0;border-radius:0;background:none;color:var(--dim);font-size:16px;line-height:normal;box-shadow:none}
body.jxui .dnwin .rktabs button{background:#121815;border:1px solid #4a5550;border-radius:4px;color:#cbd;font-weight:400;text-shadow:none;box-shadow:none}
body.jxui .dnwin .rktabs button:hover{color:#cbd}
body.jxui .dnwin .rktabs button.on{border-color:#e6c67a;color:#e6c67a;background:linear-gradient(#2a2412,#15110a)}
body.jxui .dnwin .btn{background:url(ui/btn.png) 0 0/400% 100%;border:1px solid #6d5a33;border-radius:5px;color:var(--text);font-weight:400;text-shadow:0 1px 2px #000;box-shadow:none}
body.jxui .dnwin .btn:hover{background-position:33.333% 0;color:var(--text);box-shadow:none} body.jxui .dnwin .btn:active{background-position:66.666% 0}
body.jxui .dnwin h3,body.jxui .dnwin h4{border:0;padding-bottom:0;color:var(--gold)}
/* server 2 · Do Xanh (server2.js) */
body.s2 .s2hide{display:none!important}
body.s2 #heroName::after{content:"S2 · Đồ Xanh";margin-left:6px;padding:0 5px;border:1px solid #3a6ab8;border-radius:2px;font:600 9.5px/14px Arial,sans-serif;color:#9cc8ff;background:#0a1830;vertical-align:1px;white-space:nowrap}
.srvtabs{margin:2px 0 8px} .srvtabs button{flex:1}
.srvdesc{color:#9cc8ff}
.spsrv button em{font-style:normal;font-size:11.5px;color:#9fe36a;margin-top:2px}
.spsrv button[data-srv="2"] b{color:#9cc8ff}
/* server 2: khong tu mac do -> dau ▲ (mon manh hon do dang mac) to va nhap nhay de de thay */
body.s2 .it em{left:1px;top:-1px;z-index:2;font:700 13px/1 Arial,sans-serif;color:#7cff7d;text-shadow:0 0 4px #000,0 0 6px #2f9a3f;animation:s2up 1.2s ease-in-out infinite}
body.s2 .it:has(em){box-shadow:inset 0 0 0 1px #7cff7d99,inset 0 0 10px #2f9a3f66}
@keyframes s2up{50%{transform:translateY(-2px);opacity:.75}}
/* ===== Bang xep hang (social.js rankModal): cua so gon, the nho, danh sach kieu bang JX (ca giao dien cu lan JX) ===== */
.mbox:has(.rankwin){width:min(100%,560px)}
.rankwin .srvtabs,body.jxui .rankwin .srvtabs{display:flex;gap:0;margin:0 0 6px;border:1px solid #000;box-shadow:inset 0 0 0 1px #3c4a43;background:#060908}
.rankwin .srvtabs button,body.jxui .rankwin .srvtabs button{flex:1;padding:6px 4px;border:0;border-radius:0;background:transparent;color:#8fa79a;font-size:12.5px;font-weight:600;text-shadow:0 1px 1px #000;box-shadow:none}
.rankwin .srvtabs button+button{border-left:1px solid #2c3832}
.rankwin .srvtabs button:hover,body.jxui .rankwin .srvtabs button:hover{color:#d1fbe6}
.rankwin .srvtabs button.on,body.jxui .rankwin .srvtabs button.on{background:linear-gradient(#1f3a30,#0b1712);color:#eaffd8;box-shadow:inset 0 -2px 0 #7cff7d}
.rankwin .rktabs,body.jxui .rankwin .rktabs{display:flex;gap:4px;margin:0 0 8px;padding:0 2px;border-bottom:1px solid #3c4a43}
.rankwin .rktabs button,body.jxui .rankwin .rktabs button{flex:none;margin-bottom:-1px;padding:5px 14px;border:1px solid #2c3832;border-bottom-color:#3c4a43;border-radius:3px 3px 0 0;background:#0a0f0d;color:#8fa79a;font-size:12.5px;font-weight:600;text-shadow:0 1px 1px #000;box-shadow:none}
.rankwin .rktabs button:hover,body.jxui .rankwin .rktabs button:hover{color:#d1fbe6}
.rankwin .rktabs button.on,body.jxui .rankwin .rktabs button.on{background:linear-gradient(#24332c,#101814);border-color:#8ea596;border-bottom-color:#101814;color:#ffe9a0}
.rankwin .rklist{gap:0;margin:0 0 8px;border:1px solid #000;box-shadow:inset 0 0 0 1px #2c3832;background:#070a09}
.rankwin .rkrow{grid-template-columns:30px 30px 1fr auto;gap:8px;padding:4px 10px 4px 8px;border:0;border-bottom:1px solid #18201c;border-left:3px solid transparent;border-radius:0;background:transparent}
.rankwin .rkrow:nth-child(even){background:#0c110f}
.rankwin .rkrow:hover{background:#13201a}
.rankwin .rkrow:last-child{border-bottom:0}
.rankwin .rkrow.top1{border-left-color:#ffd24a;background:linear-gradient(90deg,#3a2c0c,#16130a 45%,transparent)}
.rankwin .rkrow.top2{border-left-color:#cfd8de;background:linear-gradient(90deg,#283036,#121618 45%,transparent)}
.rankwin .rkrow.top3{border-left-color:#d08a52;background:linear-gradient(90deg,#33200f,#15100a 45%,transparent)}
.rankwin .rkpos{font:700 14px Arial,sans-serif;color:#7d8f85;text-align:center}
.rankwin .rkrow.top1 .rkpos,.rankwin .rkrow.top2 .rkpos,.rankwin .rkrow.top3 .rkpos{font-size:19px}
.rankwin .rkrow img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
.rankwin .rkname b{font-size:13.5px;color:#efe6cc}
.rankwin .rkrow.top1 .rkname b{color:#ffd86a} .rankwin .rkrow.top2 .rkname b{color:#e6eef2} .rankwin .rkrow.top3 .rkname b{color:#f0b07a}
.rankwin .rkname small{font-size:11px;color:#7d8f85}
.rankwin .rklv{flex-direction:row;align-items:center;gap:8px}
.rankwin .rklv b{min-width:62px;text-align:right;font:700 13px Arial,sans-serif;color:#e8e0c8}
.rankwin .rklv b.tw{color:#7fd0ff}
.rankwin .rklv small{font-size:11px;color:#7d8f85}
.rankwin .rklv em.cs{padding:1px 6px;border:1px solid #6a3a7a;border-radius:2px;background:#22102a;color:#f0a8ff;font:600 10.5px/1.4 Arial,sans-serif;font-style:normal}
@media (max-width:420px){ .rankwin .rkrow{grid-template-columns:24px 26px 1fr auto;gap:6px;padding:4px 6px} .rankwin .rkrow img{width:26px;height:26px} .rankwin .rklv{flex-direction:column;align-items:flex-end;gap:2px} .rankwin .rklv b{min-width:0} .rankwin .rktabs button{padding:5px 10px} }
/* PC: cua so chua dat do rong rieng thi toi da 640px (khong gian het man hinh); cua so co :has(...) rieng van theo rieng */
body.pc :where(#modal .mbox){width:min(100%,640px)}
/* ===== Dien thoai: the Nhan vat / Hanh trang gon vua khung (it phai keo) ===== */
body:not(.pc) #t-char>.card:first-child{padding:6px 10px;margin-bottom:6px;font-size:13px}
body:not(.pc) #t-char>.card:first-child br{display:none}
body:not(.pc) #t-char>.card:first-child small{margin-left:6px}
body:not(.pc) .eqgrid{grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px}
body:not(.pc) .eqgrid .slot{border-radius:3px;font-size:9.5px;line-height:1.1}
body:not(.pc) .eqgrid .slot .it i{font-size:9px}
body:not(.pc) #t-char>p.small{margin:2px 0 4px;font-size:10.5px;line-height:1.35}
body:not(.pc) #t-char h3{margin:6px 0 4px;font-size:13.5px}
body:not(.pc) #t-char h3 .btn.sm{padding:2px 8px;font-size:11.5px}
body:not(.pc) #t-char .card{padding:6px 8px;margin-bottom:6px}
body:not(.pc) #t-char .card:has(.attr){display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
body:not(.pc) #t-char .attr{grid-template-columns:1fr auto auto;gap:5px;padding:1px 0;font-size:12.5px}
body:not(.pc) #t-char .attr .pm{gap:3px}
body:not(.pc) #t-char .attr .plus,body:not(.pc) #t-char .attr .minus{width:24px;height:22px;font-size:13px;line-height:18px;padding:0}
body:not(.pc) #t-char .stats{grid-template-columns:auto 1fr auto 1fr;gap:2px 8px;font-size:11.5px}
body:not(.pc) #t-char .stats span:nth-child(even){text-align:left}
body:not(.pc) .invbar{flex-wrap:wrap;gap:4px;margin-bottom:5px}
body:not(.pc) .invbar .btn.sm{padding:3px 8px;font-size:11.5px}
body:not(.pc) .invgrid{grid-template-columns:repeat(8,1fr);gap:3px}
body:not(.pc) .invgrid .it i{font-size:9px}
body:not(.pc) #modal .invwin .ivgrid{grid-template-columns:repeat(10,1fr)}
body:not(.pc) .eqhint .eqx{display:none}
body:not(.pc) .eqgrid .slot{aspect-ratio:auto;height:46px}
body:not(.pc) .eqgrid .slot .it{aspect-ratio:auto;height:100%}
/* ===== Kenh chat (chat.js) ===== */
#chatBtn{right:auto;left:8px;top:auto;bottom:174px}
#chatBtn em,#pcChat .cbad{position:absolute;top:-7px;right:-7px;min-width:17px;height:16px;padding:0 4px;border-radius:8px;background:#c8321f;color:#fff;font:700 10px/16px Arial,sans-serif;font-style:normal;text-align:center}
#chatBtn em:empty,#pcChat .cbad:empty{display:none}
#pcChat .pctabs button{position:relative}
body.pc #chatBtn,body.sv #chatBtn{display:none}
.mbox:has(.chatwin){width:min(100%,560px)}
.chatlist{height:min(52vh,420px);overflow-y:auto;padding:6px 8px;border:1px solid #000;box-shadow:inset 0 0 0 1px #2c3832;background:#050806;font-size:13px;line-height:1.5}
.cm{padding:2px 0;word-break:break-word}
.cm time,#pcLog .cm time{display:inline;margin-right:5px;color:#6d7a72;font-size:10.5px}
.cm b{font-weight:700}
.cm small{margin-left:3px;color:#7d8f85;font-size:10px}
.cm.sys{color:#ffe08a} .cm.sys b{color:#ffb52e}
.chatin{display:flex;gap:6px;margin-top:6px}
.chatin input{flex:1;min-width:0;padding:6px 8px;font:13px var(--font);color:var(--text);background:#030504;border:1px solid #56665c}
.chatin.off{display:block;padding:6px 8px;font-size:12px;color:#9aa49e;border:1px dashed #3c4a43}
#pcChatIn .chatin{margin:0;padding:3px;border-top:1px solid #3a4540;background:#0b100ee6}
#pcChatIn .chatin input{padding:3px 6px;font-size:12px}
#pcChatIn .chatin.off{margin:0;border:0;border-top:1px solid #3a4540;font-size:11px;padding:4px 7px}
#pcChat .pctabs{flex-wrap:nowrap}
#pcChat .pctabs button{white-space:nowrap;padding:2px 5px}
body.pc #pcChat{width:min(440px,36vw)}
/* nut "Den ai..." (nhay toi ai bat ky) */
.stagectl:has(.stjump){display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}
.stagectl .stjump{grid-column:1;justify-self:start;margin-top:4px;padding:3px 10px;font-size:12px}
.jumpwin .frow input{width:120px;padding:6px 8px;font:15px var(--font)}
.mbox:has(.jumpwin){width:min(100%,420px)}
.pcstage #pcJump{white-space:nowrap}
.warlock{margin:0 0 8px;padding:8px 10px;border-color:#a8864a!important;background:#2a200c!important;color:#ffe9a0;font-size:13px}
/* bang ten nha tai tro bay ngang (donate.js dnFly) */
#dnFly{position:absolute;top:62px;left:0;z-index:7;display:flex;align-items:center;gap:14px;padding:6px 18px;white-space:nowrap;cursor:pointer;
  border:1px solid #ffd86a;border-radius:22px;background:linear-gradient(90deg,#5a0f3acc,#7a3a08e6 40%,#3a0f5ae6);box-shadow:0 0 14px #ffb52e99,inset 0 0 10px #ffe08a44;
  font:600 13px/1.3 Arial,sans-serif;color:#fff3d0;text-shadow:0 1px 2px #000;animation:dnfly 22s linear 1 forwards}
@keyframes dnfly{from{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}
#dnFly .dnft{color:#ffe08a;font-size:13.5px}
#dnFly .dnfi i{font-style:normal;color:#ffd86a} #dnFly .dnfi b{color:#fff} #dnFly .dnfi small{color:#ffc2d4;font-size:11px}
#dnFly .dnfi.t5 b{color:#9ee7ff} #dnFly .dnfi.t4 b{color:#ffd86a} #dnFly .thx{color:#ff9fbf}
body.pc #dnFly{top:96px;font-size:15px;padding:8px 22px}
.chatpin{position:sticky;top:-6px;z-index:2;margin:-6px -8px 6px;padding:6px 8px;border-bottom:1px solid #a8864a;background:linear-gradient(#3a2c0cf2,#21190af2);color:#ffe9a0;font-size:12.5px;line-height:1.45;word-break:break-word}
#pcLog .chatpin{margin:-4px -7px 4px;top:-4px}
.chatpin b{color:#ffb52e}
/* ghim chat: mac dinh 1 dong (bam de xem du); khung chat PC cao theo man hinh */
.chatpin{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatpin.open{white-space:normal;overflow:visible}
body.pc #pcChat{height:clamp(190px,30vh,320px)}
body.pc #pcChat.min{height:auto}