/* jx-hud.css — HUD kieu JX1 (Zar 2), xem js/jx-hud.js
   Anh lay tu client VNG (\spr\UI3\主界面, \Spr\Ui3\小地图) -> ui/jx1/hud/*.webp:
   life/mana/exp = ruot thanh mau, slot = o phim tat (khung anh dai dien),
   horse/sys/mm_switch/mm_world = nut (nhieu khung xep ngang: thuong / nhan / re chuot). */
body.jx-ui {
  --hud-jade: #4f8a79; --hud-jade-hi: #9fd3c1; --hud-jade-lo: #1c3a32; --hud-ink: #050807;
  --hud-text: #e8f2ec; --hud-gold: #f2d27a; --hud-green: #3dff6a;
}

/* ---------- thanh tren (#top): theo 顶部控制条 / 新血条面板 cua JX1 ----------
   Nen den, o Cap xanh dam (16,81,57) co chu trang, moi thanh nam trong ranh vien xanh (ranh rong = dai xam, ruot = anh client),
   mep duoi la dai hoa van ngoc cua thanh phim tat (edge.webp). Bo cuc (vi tri tung khoi tren dien thoai / may tinh) giu nguyen. */
body.jx-ui #top { position: relative; background: #000; border-bottom: 0; box-shadow: none; padding-bottom: 14px; }
body.jx-ui #top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none;
  background: url(ui/jx1/hud/edge.webp) 0 0 / auto 100% repeat-x; box-shadow: 0 -1px 0 #2e5e50, 0 3px 5px #000c; }
/* anh dai dien: khung o JX */
body.jx-ui .lvbox, body.jx-ui .lvbox.avatar-live { border: 0; border-radius: 0; padding: 3px;
  background: url(ui/jx1/hud/slot.webp) 0 0 / 100% 100% no-repeat, #000; }
body.jx-ui .lvbox::after { display: none; }
body.jx-ui .lvbox canvas { border-radius: 0; }
/* "✥ Cap [o xanh]" nhu 新血条面板 */
body.jx-ui .hero-level { gap: 3px; padding: 0; border: 0; background: none; color: #fff; font-size: 10px; text-shadow: 1px 1px 0 #000; }
body.jx-ui .hero-level > span::before { content: "✥ "; }
body.jx-ui .hero-level > b { min-width: 26px; height: 15px; border: 0; background: #105139; box-shadow: inset 0 0 0 1px #0a3626; color: #fff; font-size: 10px; text-shadow: 1px 1px 0 #000; }
/* ten, ai, luc chien: chu JX (ten vang, chu phu xanh ngoc), khong khung trang tri */
body.jx-ui .topmid b, body.jx-ui .hero-identity b { color: #f2d27a; text-shadow: 1px 1px 0 #000; }
body.jx-ui .top-power { border: 1px solid #1d5a44; background: #000; color: #9fd3c1; }
body.jx-ui .top-power > b { color: #fff; }
body.jx-ui #stageLbl { border-left: 0; padding-left: 0; color: #9fd3c1; }
/* khung chua 3 thanh: bo khung vang cu */
body.jx-ui #hud.status-frame { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
/* tung thanh = ranh JX: vien xanh 1px, ruot den, dai xam khi rong */
body.jx-ui #hud .bar { height: 13px; border-radius: 0; border: 1px solid #1d5a44; padding: 0;
  background: linear-gradient(180deg, #000 0 2px, #b4b6b5 2px, #8d8f8e 5px, #5b5d5c 9px, #000 9px); box-shadow: 0 0 0 1px #000; }
body.jx-ui #hud .bar i { inset: 2px auto 2px 0; border-radius: 0; box-shadow: none; background-size: 100% 100%; background-repeat: no-repeat; }
body.jx-ui #hud .bar.hp i { background-image: url(ui/jx1/hud/life.webp); }
body.jx-ui #hud .bar.mp i { background-image: url(ui/jx1/hud/mana.webp); }
body.jx-ui #hud .bar.xp i { background-image: url(ui/jx1/hud/exp.webp); }
body.jx-ui #hud .bar > span:not(.bar-label) { line-height: 11px; color: #fff; font-weight: 600; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000; }
body.jx-ui #hud .bar .bar-label, body.jx-ui #hud .bar.hp .bar-label, body.jx-ui #hud .bar.mp .bar-label {
  inset: 0 auto 0 0; min-width: 0; padding: 0 4px; border: 0; border-right: 1px solid #1d5a44; border-radius: 0;
  background: #000; box-shadow: none; color: #fff; font-size: 8px; }
/* KNB, qua, thu gon: nut tron vien ngoc */
body.jx-ui .gold { color: #f2d27a; text-shadow: 1px 1px 0 #000; }
body.jx-ui #giftBtn, body.jx-ui #compactBtn { border: 2px solid var(--hud-jade); background: radial-gradient(circle at 50% 38%, #2b4d43, #050807 72%);
  box-shadow: 0 0 0 1px #000, inset 0 0 5px #000; }
body.jx-ui #compactBtn { color: var(--hud-jade-hi); }

/* ---------- Auto + cai dat (co le -> nut He thong banh rang cua JX1) ---------- */
body.jx-ui #autoSettingsBtn { width: 30px; height: 30px; flex-basis: 30px; border: 0; border-radius: 0; box-shadow: 0 1px 3px #000c;
  background: url(ui/jx1/hud/sys.webp) 0 0 / 300% 100% no-repeat; }
body.jx-ui #autoSettingsBtn:hover { background-position: 100% 0; box-shadow: 0 1px 3px #000c; }
body.jx-ui #autoSettingsBtn:active { background-position: 50% 0; }
body.jx-ui #autoSettingsBtn img { display: none; }
body.jx-ui #ctrlBtn.autotoggle { height: 30px; border-radius: 0; border: 1px solid var(--hud-jade); background: linear-gradient(180deg, #14211d, #050807); color: var(--hud-text); box-shadow: 0 0 0 1px #000, 0 1px 3px #000c; }
body.jx-ui #ctrlBtn.autotoggle.on, body.jx-ui #ctrlBtn[aria-checked="true"] { color: var(--hud-green); border-color: var(--hud-jade-hi); }
body.jx-ui #ctrlBtn .ios-switch { border-radius: 0; border-color: #5c625f; background: #000; }
body.jx-ui #ctrlBtn .ios-switch i { border-radius: 0; background: #8a948f; }
body.jx-ui #ctrlBtn[aria-checked="true"] .ios-switch { border-color: var(--hud-jade-hi); background: #123a2b; box-shadow: inset 0 0 4px #3dff6a55; }
body.jx-ui #ctrlBtn[aria-checked="true"] .ios-switch i { background: var(--hud-green); }

/* ---------- ban do nho: nut DOM duoi ban do (ve tren canvas, xem drawMinimapLayer trong jx-hud.js) ---------- */
#jxMiniBtns { position: absolute; z-index: 4; display: none; gap: 2px; }
body.jx-ui #jxMiniBtns.on { display: flex; }
#jxMiniBtns button { width: 18px; height: 18px; padding: 0; border: 0; background: 0 0 / 300% 100% no-repeat; cursor: pointer; touch-action: manipulation; image-rendering: pixelated; }
#jxMiniBtns button:hover { background-position: 100% 0; }
#jxMiniBtns button:active { background-position: 50% 0; }
#jxMiniBtns .mm-zoom { background-image: url(ui/jx1/hud/mm_switch.webp); }
#jxMiniBtns .mm-world { background-image: url(ui/jx1/hud/mm_world.webp); }

/* ---------- o chieu + binh mau (#pad) ----------
   Dai ca 06/10/2026: khung phuong an C (ringc.webp = vong ngoc day, van da + vien bac lay tu khung thanh phim tat
   快捷栏800x600_vn.spr), nen trong nut mau than am nhu than cua so JX1 (khung9.png ~ #262622).
   Bo cuc: chieu 1 to o goc phai duoi, chieu 2-3-4 xep vong cung quanh chieu 1 (trai, cheo tren-trai, tren);
   binh HP / MP nam ngang ben trai; Ngua + Ve thanh phia tren binh. Moi so do theo --u (dien thoai to hon). */
body.jx-ui #pad {
  --u: 1px; display: block; width: calc(232 * var(--u)); height: calc(176 * var(--u)); right: 6px; bottom: 6px; gap: 0; flex-wrap: nowrap;
}
body.jx-ui.mob #pad { --u: 1.1px; }   /* #app thu 0.8 -> nut chieu 1 ~ 60px that; khong de len nut Tan gau */
body.jx-ui #pad .pbtn { position: absolute; margin: 0; flex: none; transform: none; border: 0; border-radius: 50%; overflow: visible;
  background: radial-gradient(circle at 50% 40%, #3b3a34 0, #1b1a17 58%, #0b0a09 70%, transparent 71%); box-shadow: 0 2px 5px #000d; }
body.jx-ui #pad .pbtn:active { transform: scale(.94); }
body.jx-ui #pad .pbtn::after { content: ""; position: absolute; inset: -4%; z-index: 3; pointer-events: none;
  background: url(ui/jx1/hud/ringc.webp) 0 0 / 100% 100% no-repeat; }
/* kich thuoc + vi tri (tinh tu goc phai duoi khung 216 x 176) */
body.jx-ui #pad .pbtn.sk[data-i="0"] { width: calc(68 * var(--u)); height: calc(68 * var(--u)); right: 0; bottom: 0; }
body.jx-ui #pad .pbtn.sk[data-i="1"], body.jx-ui #pad .pbtn.sk[data-i="2"], body.jx-ui #pad .pbtn.sk[data-i="3"] { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
body.jx-ui #pad .pbtn.sk[data-i="1"] { right: calc(80 * var(--u)); bottom: calc(11 * var(--u)); }     /* trai */
body.jx-ui #pad .pbtn.sk[data-i="2"] { right: calc(62 * var(--u)); bottom: calc(62 * var(--u)); }     /* cheo tren-trai */
body.jx-ui #pad .pbtn.sk[data-i="3"] { right: calc(11 * var(--u)); bottom: calc(84 * var(--u)); }     /* tren */
body.jx-ui #pad .pbtn.pot.hp, body.jx-ui #pad .pbtn.pot.mp { width: calc(40 * var(--u)); height: calc(40 * var(--u)); bottom: calc(14 * var(--u)); }
body.jx-ui #pad .pbtn.pot.mp { right: calc(146 * var(--u)); }   /* cach chieu 2 khoang 20 (dai ca 06/10/2026: HP / MP cach xa 4 chieu) */
body.jx-ui #pad .pbtn.pot.hp { right: calc(190 * var(--u)); }
/* dien thoai doc: hang ngang HP-MP cham nut Tan gau (nut nay chua cho joystick nen khong dich trai duoc) -> HP chong len tren MP */
@media (orientation: portrait) { body.jx-ui.mob #pad .pbtn.pot.hp { right: calc(146 * var(--u)); bottom: calc(62 * var(--u)); } }
body.jx-ui #pad .pbtn.ride, body.jx-ui #pad .pbtn.pot.tp { width: calc(36 * var(--u)); height: calc(36 * var(--u)); bottom: calc(66 * var(--u)); }
body.jx-ui #pad .pbtn.pot.tp { right: calc(132 * var(--u)); }
body.jx-ui #pad .pbtn.ride { right: calc(176 * var(--u)); }
/* ben trong */
body.jx-ui #pad .pbtn.sk i, body.jx-ui #pad .pbtn.sk .cd, body.jx-ui #pad .pbtn.pot .cd { inset: 15%; border-radius: 50%; overflow: hidden; }
body.jx-ui #pad .pbtn.sk.empty { opacity: 1; }
body.jx-ui #pad .pbtn.sk.empty::after { opacity: .8; }
body.jx-ui #pad .pbtn.sk.cur { box-shadow: 0 0 10px 3px #ffd24abb, 0 2px 5px #000d; }
body.jx-ui #pad .pbtn.sk.cur::after { filter: sepia(.9) saturate(2.6) hue-rotate(5deg) brightness(1.2); }
body.jx-ui #pad .pbtn.sk > b { z-index: 4; right: auto; left: 50%; top: auto; bottom: -3px; transform: translateX(-50%); font-size: 10px; color: #f2d27a; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
body.jx-ui #pad .pbtn.pot.hp { background: radial-gradient(circle at 50% 40%, #4a1a14 0, #1a0806 58%, #0b0a09 70%, transparent 71%); }
body.jx-ui #pad .pbtn.pot.mp { background: radial-gradient(circle at 50% 40%, #182b52 0, #070b18 58%, #0b0a09 70%, transparent 71%); }
body.jx-ui #pad .pbtn.pot .potion-icon { inset: 16%; width: 68%; height: 68%; }
body.jx-ui #pad .pbtn.pot > span { z-index: 4; }
body.jx-ui #pad .pbtn.pot .potion-count { z-index: 5; border-color: var(--hud-jade); background: #000; color: var(--hud-text); box-shadow: 0 1px 2px #000; }
body.jx-ui #pad .pbtn.ride { background: url(ui/jx1/hud/horse.webp) 0 0 / 200% 100% no-repeat; }
body.jx-ui #pad .pbtn.ride:hover { background-position: 100% 0; }
body.jx-ui #pad .pbtn.ride img { display: none; }
body.jx-ui #pad .pbtn.pot.tp span { inset: 15%; color: var(--hud-gold); font-size: 8px; text-shadow: 1px 1px 0 #000; }

/* ---------- bang theo doi nhiem vu (#jxQuest, duoi ban do nho) ----------
   Kieu bang 任务记事 JX1: nen den trong, vien xanh ngoc, ten nhiem vu vang, noi lam chu xanh la nhu ten ban do. */
#jxQuest { position: absolute; z-index: 4; width: 172px; color: #e8f2ec; font: 11px/1.3 var(--font);
  background: #000000c4; border: 1px solid #4f8a79; box-shadow: 0 0 0 1px #000, 0 2px 6px #000b; }
#jxQuest[hidden] { display: none; }
#jxQuest button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; touch-action: manipulation; }
#jxQuest .jq-head { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 24px; padding: 3px 6px; background: linear-gradient(180deg, #1f3a33, #0a1512); border-bottom: 1px solid #1d5a44; }
#jxQuest .jq-head b { flex: 1; color: #f2d27a; font-weight: 700; text-shadow: 1px 1px 0 #000; }
#jxQuest .jq-mini { display: none; color: #9fd3c1; }
#jxQuest .jq-head i { width: 0; height: 0; border: 5px solid transparent; border-top-color: #9fd3c1; border-bottom: 0; transition: transform .15s ease; }
#jxQuest.min .jq-head { border-bottom: 0; }
#jxQuest.min .jq-head i { transform: rotate(-90deg); }
#jxQuest.min .jq-mini { display: inline; }
#jxQuest.min .jq-body { display: none; }
/* man thap: khong du cho tren cum nut chieu -> chi con dong tieu de (co tien do); bam de mo xem tam (.peek) */
#jxQuest.cramp:not(.peek) .jq-body { display: none; }
#jxQuest.cramp:not(.peek) .jq-mini { display: inline; }
#jxQuest.cramp:not(.peek) .jq-head { border-bottom: 0; }
#jxQuest .jq-head b, #jxQuest .jq-mini { white-space: nowrap; }
#jxQuest.cramp { min-width: 160px; }   /* ban do da thu nho cho vua man thap: khung tieu de van du cho tien do */
#jxQuest.cramp.peek { z-index: 8; }
#jxQuest .jq-body { display: grid; gap: 4px; padding: 5px 6px 6px; }
#jxQuest .jq-item { display: grid; gap: 2px; width: 100%; }
#jxQuest .jq-item:hover .jq-txt, #jxQuest .jq-item:focus-visible .jq-txt { text-decoration: underline; }
#jxQuest .jq-from { color: #9fd3c1; font-size: 10px; }
#jxQuest .jq-txt { color: #fff; font-weight: 600; text-shadow: 1px 1px 0 #000; }
#jxQuest .jq-where { color: #3dff6a; font-size: 10px; text-shadow: 1px 1px 0 #000; }
#jxQuest .jq-bar { position: relative; display: block; height: 11px; margin-top: 2px; background: #000; border: 1px solid #1d5a44; }
#jxQuest .jq-bar i { position: absolute; inset: 1px auto 1px 0; background: url(ui/jx1/hud/exp.webp) 0 0 / 100% 100% no-repeat; }
#jxQuest .jq-bar em { position: absolute; inset: 0; font: 600 9px/9px var(--font); font-style: normal; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
#jxQuest .jq-act { justify-self: stretch; min-height: 26px; padding: 3px 8px; text-align: center; border: 1px solid #c9a24e; background: linear-gradient(180deg, #5a4520, #2a1f0e); color: #f2d27a; font-weight: 700; }
#jxQuest .jq-act[hidden] { display: none; }
#jxQuest .jq-act:hover { filter: brightness(1.2); }
#jxQuest[data-state="done"] { border-color: #f2d27a; box-shadow: 0 0 0 1px #000, 0 0 8px #ffd24a88; }
#jxQuest[data-state="done"] .jq-mini { color: #f2d27a; }
#jxQuest :focus-visible { outline: 1px solid #f2d27a; outline-offset: 1px; }
body.jx-ui.mob #jxQuest { width: 150px; font-size: 12px; }
body.jx-ui.mob #jxQuest .jq-head { min-height: 30px; }
body.jx-ui.mob #jxQuest .jq-act { min-height: 32px; }
@media (prefers-reduced-motion: reduce) { #jxQuest .jq-head i { transition: none; } }

/* ---------- hop thoai NPC Da Tau (#mBody .jxn): loi thoai + danh sach lua chon nhu NPC JX1 ---------- */
#mBody .jxn { display: grid; gap: 10px; }
#mBody .jxn-say { margin: 0; line-height: 1.55; color: #e8f2ec; }
#mBody .jxn-say > b:first-child { color: #f2d27a; }
#mBody .jxn-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#mBody .jxn-opt { display: block; width: 100%; min-height: 32px; padding: 6px 10px; text-align: left; font: inherit; color: #ffe08a; cursor: pointer;
  background: transparent; border: 1px solid transparent; touch-action: manipulation; }
#mBody .jxn-opt::before { content: "◆ "; color: #4f8a79; }
#mBody .jxn-opt:hover:not(:disabled), #mBody .jxn-opt:focus-visible { color: #fff; border-color: #4f8a79; background: #1f3a33aa; outline: none; }
#mBody .jxn-opt:disabled { color: #6f7a75; cursor: not-allowed; }

/* ---------- thanh tac vu nhanh trong thanh (#townBar): cot doc mep trai, nen muc vien ngoc ----------
   Nut = mat NPC trong vong ngoc (ringc) + ten ngan (jx-npc.js tao .jxq); nut cu Cua hang / Kho chung / Ban do an di. */
body.jx-ui #townBar { left: 6px; right: auto; top: 46px; width: 70px; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 3px 5px;
  border: 1px solid var(--hud-jade); border-radius: 0; background: linear-gradient(180deg, #121a17e6, #050807e6);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, inset 0 0 0 2px var(--hud-jade-lo), 0 3px 8px #000b; }
body.jx-ui #townBar > b { flex: none; color: var(--hud-green); font-size: 11px; line-height: 1.2; text-align: center; text-shadow: 1px 1px 0 #000; }
body.jx-ui #townBar #bShop, body.jx-ui #townBar #bStashT, body.jx-ui #townBar #bSellTown { display: none; }
body.jx-ui #townBar .jxq { display: flex; flex-direction: column; gap: 2px; }
body.jx-ui #townBar .jxq-b { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0; border: 0; background: none;
  color: var(--hud-text); font: 10px/1.15 var(--font); text-shadow: 1px 1px 0 #000; cursor: pointer; touch-action: manipulation; }
body.jx-ui #townBar .jxq-b i { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%;
  background-color: #1b1a17; background-repeat: no-repeat; background-position: 0 0; }
body.jx-ui #townBar .jxq-b i::after { content: ""; position: absolute; inset: -12%; background: url(ui/jx1/hud/ringc.webp) 0 0 / 100% 100% no-repeat; }
body.jx-ui #townBar .jxq-sell i { background-size: 70% auto; background-position: center; }
body.jx-ui #townBar .jxq-b:hover span, body.jx-ui #townBar .jxq-b:focus-visible span { color: var(--hud-gold); }
body.jx-ui #townBar .jxq-b:hover i::after { filter: sepia(.9) saturate(2.6) hue-rotate(5deg) brightness(1.2); }
body.jx-ui #townBar .jxq-b:active i { transform: scale(.94); }
body.jx-ui #townBar .jxq-tog { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
body.jx-ui #townBar .jxq-tog i { display: block; width: 0; height: 0; margin: 5px auto 0; border: 5px solid transparent; border-top-color: #9fd3c1; border-bottom: 0; transition: transform .15s ease; }
body.jx-ui #townBar.min .jxq-tog i { transform: rotate(-90deg); }
body.jx-ui #townBar.min .jxq { display: none; }
body.jx-ui #townBar > b { padding-right: 10px; }
@media (prefers-reduced-motion: reduce) { body.jx-ui #townBar .jxq-tog i { transition: none; } }
body.jx-ui #townBar #bBack { margin-top: 2px; padding: 4px 2px; font-size: 10px; white-space: normal; line-height: 1.2; }
body.jx-ui #townBar .btn { border-radius: 0; border: 1px solid var(--hud-jade); background: linear-gradient(180deg, #1f3a33, #0a1512); color: var(--hud-text); box-shadow: inset 0 1px 0 #ffffff1a; }
body.jx-ui #townBar .btn:hover { border-color: var(--hud-jade-hi); color: #fff; }
body.jx-ui #townBar .btn.on { border-color: #c9a24e; background: linear-gradient(180deg, #5a4520, #2a1f0e); color: var(--hud-gold); }

/* ---------- bang ten ban do / thong bao (thay ve tren canvas) ---------- */
#jxBanner { position: absolute; left: 0; right: 0; top: 30%; z-index: 4; display: grid; justify-items: center; gap: 4px; padding: 10px 16px 12px;
  pointer-events: none; text-align: center; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(90deg, transparent, #000b 22%, #000b 78%, transparent); }
#jxBanner.on { opacity: 1; }
#jxBanner::before, #jxBanner::after { content: ""; position: absolute; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--hud-jade, #4f8a79), transparent); }
#jxBanner::before { top: 0; } #jxBanner::after { bottom: 0; }
#jxBanner b { font: 700 22px/1.15 var(--font); letter-spacing: .04em; color: #f2d27a; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 12px #000; }
#jxBanner small { font: 12px/1.3 var(--font); color: #9fd3c1; text-shadow: 1px 1px 0 #000; }
#jxBanner small:empty { display: none; }
@media (prefers-reduced-motion: reduce) { #jxBanner { transition: none; } }

/* ---------- dien thoai: #app bi thu 0.8 (body.mob) -> nut ban do nho to hon cho de bam ---------- */
body.jx-ui.mob #jxMiniBtns button { width: 24px; height: 24px; }
@media (max-height: 460px) {
  #jxBanner b { font-size: 18px; }
}

/* ---------- vien o do theo do hiem (nhu ban cu volamidle v263, jx1ui2.css 113-117) ----------
   r1 Xanh vien xanh duong, r2 Hiem (ngua hiem) cam, r3 Tim, r4 Hoang Kim vang + sang ngoai, r5 Bach Kim (file cu).
   !important de thang vien chung cua o tui JX (#jx1Bag #t-inv .it) va .it.r1 xanh la cu trong style.css. */
body.jx-ui .it.r1 { border-color: #4a86e8 !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 8px #2a5ab0 !important; }
body.jx-ui .it.r2 { border-color: #ff9a3c !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 8px #a85a10 !important; }
body.jx-ui .it.r3 { border-color: #c77bff !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 10px #7a3ab0 !important; }
body.jx-ui .it.r4 { border-color: #ffcc00 !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 10px #b08000, 0 0 5px #ffcc0099 !important; }
body.jx-ui .it.r5 { border-color: #9fe8ff !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 10px #4a9ab8, 0 0 5px #9fe8ff99 !important; }

/* ---------- Ve thanh + Len ngua o goc tren phai, cung hang nut Auto (js/jx-hud.js cuoi file; dai ca 06/10/2026) ---------- */
/* nut vuong 30 x 30 nhu nut cai dat Auto (sys.webp): khung o vuong vien ngoc JX1 (slot.webp) — dai ca 06/10/2026 "lam nut vuong cho khop" */
#utilBtns { display: flex; align-items: center; gap: 6px; }
body.jx-ui #utilBtns .pbtn { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; flex: 0 0 30px; border: 0; border-radius: 0; overflow: hidden;
  background: url(ui/jx1/hud/slot.webp) 0 0 / 100% 100% no-repeat; box-shadow: 0 1px 3px #000c; cursor: pointer; }
body.jx-ui #utilBtns .pbtn::after { content: none; }
body.jx-ui #utilBtns .pbtn:hover { filter: brightness(1.3); }
body.jx-ui #utilBtns .pbtn:active { transform: scale(.94); }
body.jx-ui #utilBtns .pbtn.ride img { display: block; width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(1px 1px 0 #000); }
body.jx-ui #utilBtns .pbtn.pot.tp { margin-top: 0; }
body.jx-ui #utilBtns .pbtn.pot.tp span { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--hud-gold); font-size: 9px; line-height: 1.05; text-align: center; text-shadow: 1px 1px 0 #000; }
body.jx-ui #utilBtns .pbtn .cd { position: absolute; inset: 2px; pointer-events: none; background: conic-gradient(#000b var(--p, 0%), transparent 0); }