/* Thanh dieu khien vo lam PC: sat duoi 800x94, cua so ben phai. */
body.pc.jxui{--jxl:#a9d3be;--jxt:#ffe9a0;--jxb:#5f7368;--hk:1}

body.pc.jxui #app{display:block!important;width:100vw!important;height:100vh!important;max-width:none!important;transform:none!important;margin:0!important}
body.pc.jxui #battle{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;flex:none!important}
body.pc.jxui #tabs,body.pc.jxui #compactBtn,body.pc.jxui #topCtl,body.pc.jxui #u20menu,body.pc.jxui #u20r,body.pc.jxui #u20side,body.pc.jxui #u20gold,body.pc.jxui #u20trk,body.pc.jxui #u20wh{display:none!important}

body.pc.jxui #top{
  display:flex!important;position:absolute!important;top:0!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;width:min(640px,72vw)!important;z-index:7!important;
  border-style:solid!important;border-color:transparent!important;border-width:0 15px 9px!important;
  border-image:url(ui/jx/frame.png) 9 19 / 0 15px 9px stretch!important;border-radius:0!important;
  padding:4px 8px!important;background:linear-gradient(#0c110fe8,#0a0e0ce6),url(ui/jx/flor.png) 0 0/314px auto!important;
  background-clip:padding-box!important;box-shadow:0 4px 12px #000a!important;
}
body.pc.jxui .lvbox{width:42px!important;height:42px!important;border:2px solid #8ea596!important;border-radius:2px!important;background:#070a09!important}
body.pc.jxui .lvbox #lv{color:#ffe9a0!important;background:radial-gradient(#26332d,#070a09)!important;border-color:#8ea596!important}
body.pc.jxui #heroName{color:#ffe9a0!important}
body.pc.jxui #ktcBtn{
  position:fixed!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;
  z-index:80!important;margin:0!important;width:auto!important;height:auto!important;
  padding:6px 12px!important;border-radius:16px!important;white-space:nowrap!important;
}
body.pc.jxui #vliAccBtn{right:132px!important}

body.pc.jxui #hud{
  display:flex!important;position:absolute!important;left:50%!important;right:auto!important;top:62px!important;
  transform:translateX(-50%)!important;width:min(520px,56vw)!important;z-index:6!important;
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0 8px!important;
}
body.pc.jxui #hud .bar{border:1px solid #4b5d53!important;border-radius:0!important;background:#040605!important}
body.pc.jxui #hpBar{background:url(ui/jx/b_life.png) 0 0/100% 100%!important}
body.pc.jxui #mpBar{background:url(ui/jx/b_mana.png) 0 0/100% 100%!important}
body.pc.jxui #xpBar{background:url(ui/jx/b_exp.png) 0 0/100% 100%!important}

body.pc.jxui #pad{
  display:block!important;position:absolute!important;left:50%!important;right:auto!important;bottom:0!important;
  width:800px!important;height:94px!important;padding:0!important;margin:0!important;gap:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  transform:translateX(-50%) scale(var(--hk,1))!important;transform-origin:50% 100%!important;
  background:url(ui/jx/hud.png) 0 0/800px 94px no-repeat!important;z-index:30!important;pointer-events:none!important;
}
body.pc.jxui #pad .hb{display:contents!important}
body.pc.jxui #pad .pbtn{
  position:absolute!important;top:45px!important;width:34px!important;height:34px!important;margin:0!important;
  border:0!important;border-radius:0!important;background-color:transparent!important;box-shadow:none!important;
  pointer-events:auto!important;padding:0!important;
}
body.pc.jxui #pad .pbtn i,body.pc.jxui #pad .pbtn .cd{border-radius:0!important}
body.pc.jxui #pad .pbtn.sk b,body.pc.jxui #pad .pbtn .pk{display:none!important}
body.pc.jxui #bHp{left:16px!important}
body.pc.jxui #bMp{left:54px!important}
body.pc.jxui #bTp{left:92px!important}
body.pc.jxui #pad .sk[data-i="0"]{left:130px!important}
body.pc.jxui #pad .sk[data-i="2"]{left:168px!important}
body.pc.jxui #pad .sk[data-i="3"]{left:206px!important}
body.pc.jxui #jxAuto{display:block!important;left:244px!important}
body.pc.jxui #bRide{display:block!important;left:282px!important}
body.pc.jxui #jxRot{display:block!important;left:321px!important}
body.pc.jxui #pad #bMain,body.pc.jxui #pad .sk[data-i="1"]{top:24px!important;width:36px!important;height:36px!important;background:#050806cc!important}
body.pc.jxui #pad #bMain{left:373px!important}
body.pc.jxui #pad .sk[data-i="1"]{left:410px!important}
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{position:absolute;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 #pcMenu{
  display:block!important;position:absolute!important;left:50%!important;right:auto!important;bottom:0!important;
  width:800px!important;height:94px!important;padding:0!important;margin:0!important;border:0!important;background:none!important;
  transform:translateX(-50%) scale(var(--hk,1))!important;transform-origin:50% 100%!important;
  z-index:31!important;pointer-events:none!important;
}
body.pc.jxui #pcMenu button{
  position:absolute!important;top:53px!important;width:28px!important;height:28px!important;padding:0!important;
  border:0!important;border-radius:0!important;background-color:transparent!important;background-repeat:no-repeat!important;
  background-position:0 0!important;background-size:300% 100%!important;pointer-events:auto!important;box-shadow:none!important;
}
body.pc.jxui #pcMenu button:hover{background-position:100% 0!important}
body.pc.jxui #pcMenu button:active,body.pc.jxui #pcMenu button.on{background-position:50% 0!important}
body.pc.jxui #pcMenu [data-pm=char]{left:460px!important;background-image:url(ui/jx/tb_char.png)!important}
body.pc.jxui #pcMenu [data-pm=inv]{left:491px!important;background-image:url(ui/jx/tb_item.png)!important}
body.pc.jxui #pcMenu [data-pm=forge]{left:522px!important;background-image:url(ui/jx/tb_bag.png)!important}
body.pc.jxui #pcMenu [data-pm=skill]{left:553px!important;background-image:url(ui/jx/tb_skill.png)!important}
body.pc.jxui #pcMenu [data-pm=quest]{left:584px!important;background-image:url(ui/jx/tb_task.png)!important}
body.pc.jxui #pcMenu [data-jx=pet]{left:615px!important;background-image:url(ui/jx/tb_team.png)!important}
body.pc.jxui #pcMenu [data-jx=guild]{left:646px!important;background-image:url(ui/jx/tb_guild.png)!important}
body.pc.jxui #pcMenu [data-jx=rank]{left:677px!important;background-image:url(ui/jx/tb_friend.png)!important}
body.pc.jxui #pcMenu [data-pm=world]{left:708px!important;background-image:url(ui/jx/tb_chat.png)!important}
body.pc.jxui #pcMenu [data-pm=sys]{left:739px!important;background-image:url(ui/jx/tb_sys.png)!important}

body.pc.jxui #panel{
  display:flex!important;flex-direction:column!important;position:absolute!important;
  top:0!important;right:0!important;left:auto!important;bottom:calc(94px * var(--hk, 1))!important;
  width:min(420px,38vw)!important;max-height:none!important;height:auto!important;z-index:12!important;
  transform:translateX(104%)!important;transition:transform .2s!important;
  border-style:solid!important;border-color:transparent!important;border-width:0 0 0 15px!important;
  border-image:url(ui/jx/frame.png) 9 19 / 0 0 0 15px stretch!important;
  background:linear-gradient(#0e1210f2,#0e1210f2),url(ui/jx/flor.png) 0 0/314px auto!important;
  box-shadow:-8px 0 18px #000a!important;
}
body.pc.jxui.pcdraw #panel{transform:none!important}
body.pc.jxui #pcDrawHead{display:flex!important;align-items:center;justify-content:space-between;height:28px;padding:0 8px;color:#ffe9a0;background:#101612}
body.pc.jxui #pcDrawHead button{height:22px;padding:0 8px;border:1px solid #000;background:linear-gradient(#020d0b,#19322e);color:#d6eadf;cursor:pointer}
body.pc.jxui #panel .tab{flex:1;min-height:0;overflow:auto}

body.pc.jxui #vliTown{left:12px!important;right:auto!important;bottom:calc(94px * var(--hk, 1) + 8px)!important;top:auto!important;z-index:20!important}
body.pc.jxui .mbox{
  border-style:solid!important;border-color:transparent!important;border-width:9px 15px!important;
  border-image:url(ui/jx/frame.png) 9 19 / 9px 15px stretch!important;border-radius:0!important;
  background:linear-gradient(#0e1210f0,#0e1210f0),url(ui/jx/flor.png) 0 0/314px auto!important;background-clip:padding-box!important;
}
body.pc.jxui .btn{background:linear-gradient(#020d0b,#0b1c19 45%,#19322e)!important;border:1px solid #000!important;border-radius:0!important;color:#d6eadf!important}
body.pc.jxui .it{border-radius:0!important;background:#1c1f1d!important}