/* VLI JX Classic HUD (mobile) — giao diện mặc định kiểu Võ Lâm Truyền Kỳ.
 * Chỉ áp dụng khi body có class "jxc" (máy cảm ứng / màn hình nhỏ). PC giữ nguyên.
 * Bỏ thanh thẻ dưới, sân đấu full màn hình; các thẻ mở thành cửa sổ khung VLTK. */

:root{
  --jx-frame:#77736a; --jx-frame2:#3c3a35; --jx-gold:#e9cf8a; --jx-text:#ece6d4;
  --jx-blue:#6fa8ff; --jx-red:#ff4a3d; --jx-grey:#8a8a86; --jx-cell:#151412;
}

/* ---------- bố cục: sân đấu full, ẩn thanh thẻ ---------- */
html body.jxc #tabs{display:none!important}
html body.jxc:not(.jxwin) #panel{display:none!important}
html body.jxc #app{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-areas:none!important}
html body.jxc #top{flex:0 0 auto}
html body.jxc #battle{flex:1 1 auto!important;width:100%!important;max-width:none!important;min-height:0}
html body.jxc #compactBtn{display:none!important}
html body.jxc #vli-arc-sw{display:none!important}
html body.jxc .jxc-hide{display:none!important}

/* ---------- nút menu ở thanh trên ---------- */
#jxc-menuBtn,html body.jxc #jxc-menuBtn{display:none!important}
html body.jxc #jxc-menuBtn{display:grid;place-items:center;position:relative;flex:0 0 auto;width:34px;height:34px;padding:0;margin-left:2px;border-radius:6px;
  border:1px solid #8b7a50;background:linear-gradient(#3a2f1a,#17120a);color:#ffe2a0;font:700 18px/1 Tahoma,Arial;box-shadow:inset 0 0 0 1px #0008}
#jxc-menuBtn .dot{position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 1px #000;display:none}
#jxc-menuBtn.has .dot{display:block}

/* ---------- ô chiêu + thuốc + nút góc phải dưới (dùng lại #pad) ---------- */
html body.jxc #pad{position:fixed!important;left:auto!important;top:auto!important;right:calc(6px + env(safe-area-inset-right))!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;transform:none!important;margin:0!important;width:auto!important;height:auto!important;
  display:grid!important;grid-template-columns:repeat(4,var(--jxs,50px));grid-auto-rows:var(--jxs,50px);gap:5px;
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;z-index:60!important}
html body.jxc #pad::before,html body.jxc #pad::after{display:none!important}
html body.jxc #pad .hb{display:contents!important}
html body.jxc #pad .pbtn,html body.jxc #pad .jxc-b{width:var(--jxs,50px)!important;height:var(--jxs,50px)!important;min-width:0!important;margin:0!important;
  border:1px solid #6b665c!important;border-radius:3px!important;background-color:rgba(12,11,9,.72)!important;box-shadow:inset 0 0 0 1px #000a,0 1px 4px #0009!important;position:relative}
html body.jxc #pad .pbtn i{position:absolute!important;inset:3px!important;width:auto!important;height:auto!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}
html body.jxc #pad .pbtn b{position:absolute;left:2px;top:1px;font:700 10px Tahoma;color:#fff;text-shadow:0 0 2px #000}
html body.jxc #pad .pbtn em{position:absolute;right:2px;bottom:1px;font:700 11px Tahoma;color:#7dff7d;text-shadow:0 0 2px #000,0 0 2px #000}
html body.jxc #pad .sk[data-i="0"]{order:1}html body.jxc #pad .sk[data-i="1"]{order:2}
html body.jxc #pad .sk[data-i="2"]{order:3}html body.jxc #pad .sk[data-i="3"]{order:4}
html body.jxc #pad #bMain{order:5;border-color:#c9a45a!important}
html body.jxc #pad #bHp{order:6}html body.jxc #pad #bMp{order:7}html body.jxc #pad #bTp{order:8}
html body.jxc #pad .jxc-x .jxc-b{order:9}
#pad .jxc-x{display:none}
html body.jxc #pad .jxc-b{display:grid;place-items:center;padding:0;color:#f3e6c4;cursor:pointer;}
html body.jxc #pad .jxc-b small{position:absolute;left:0;right:0;bottom:1px;font:700 9px/1 Tahoma;color:#f3e6c4;text-shadow:0 1px 2px #000;white-space:nowrap;text-align:center}
html body.jxc #pad .jxc-b.on{border-color:#e7c46a!important;box-shadow:0 0 8px #e7c46a77,inset 0 0 0 1px #000a!important}
@media (max-height:500px){html body.jxc{--jxs:42px}}

/* ---------- cụm nút trái dưới: Analog / Chat / Xoay chiêu ---------- */
#jxc-bl{display:none}
html body.jxc #jxc-bl{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:fixed;z-index:61;
  left:calc(8px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom))}
html body.jxc.vli-arc #jxc-bl{bottom:calc(200px + env(safe-area-inset-bottom))}
@media (max-height:500px){html body.jxc.vli-arc #jxc-bl{left:auto;right:calc(220px + env(safe-area-inset-right));bottom:6px;flex-direction:row}}
#jxc-bl button{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid #6b665c;border-radius:3px;
  background:rgba(12,11,9,.78);color:#f3e6c4;font:700 12px Tahoma,Arial;box-shadow:inset 0 0 0 1px #000a,0 1px 4px #0009;cursor:pointer}
#jxc-bl button.on{border-color:#5fbf6a;color:#c9ffd0}
#jxc-bl button .n{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d33;color:#fff;font-size:10px;line-height:16px;display:none}
#jxc-bl button .n.on{display:inline-block}

/* ---------- cửa sổ khung VLTK (dùng lại #panel) ---------- */
#jxc-wh,#jxc-wf{display:none}
html body.jxc.jxwin #panel{display:flex!important;flex-direction:column;position:fixed!important;z-index:9500!important;
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;top:calc(52px + env(safe-area-inset-top))!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;
  width:min(96vw,440px)!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important;
  background:rgba(14,13,11,.95)!important;border:2px solid var(--jx-frame)!important;outline:1px solid #000;box-shadow:0 0 0 3px var(--jx-frame2),0 8px 30px #000e!important;border-radius:0!important}
@media (orientation:landscape) and (max-height:520px){
  html body.jxc.jxwin #panel{top:4px!important;bottom:4px!important;width:min(94vw,700px)!important}
}
html body.jxc.jxwin #jxc-wh{display:flex;flex:0 0 auto;align-items:center;position:relative;height:40px;padding:0 44px;
  background:url(ui/jx1/ornt.png) center top/auto 12px repeat-x,linear-gradient(#55524b,#34322d 55%,#24221f);border-bottom:2px solid #000;box-shadow:inset 0 -1px 0 #8f8a7e}
#jxc-wh .t{flex:1;text-align:center;margin-top:6px;font:700 19px/1 "Times New Roman",Georgia,serif;letter-spacing:2px;text-transform:uppercase;color:#f4e7c2;text-shadow:0 0 2px #000,0 2px 2px #000}
#jxc-wh .t::before,#jxc-wh .t::after{content:'❂';display:inline-block;margin:0 12px;color:#a59b84;font-size:15px;vertical-align:1px}
#jxc-wh .x{position:absolute;right:6px;top:50%;transform:translateY(-40%);width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #8b8678;
  background:radial-gradient(#5d5a53,#26241f);color:#f3ead0;font:700 15px/1 Tahoma;cursor:pointer}
html body.jxc.jxwin #panel>.tab{flex:1 1 auto;min-height:0;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:8px!important;margin:0!important;height:auto!important;max-height:none!important;background:transparent!important}
html body.jxc.jxwin #panel>.tab.hidden{display:none!important}
html body.jxc.jxwin #jxc-wf{display:flex;flex:0 0 auto;justify-content:center;gap:8px;padding:6px 8px 8px;
  background:url(ui/jx1/ornb.png) center bottom/auto 10px repeat-x,linear-gradient(#2a2824,#3d3a34);border-top:2px solid #000;box-shadow:inset 0 1px 0 #8f8a7e}
.jxc-btn{min-width:84px;height:30px;padding:0 12px;border:1px solid #7d776a;border-radius:2px;background:linear-gradient(#3b4a3a,#1c241b);
  color:#efe3c0;font:700 13px Tahoma,Arial;text-shadow:0 1px 1px #000;box-shadow:inset 0 0 0 1px #000c;cursor:pointer}
.jxc-btn:active{filter:brightness(1.3)}
.jxc-btn.red{background:linear-gradient(#5a2a22,#2a110d)}
.jxc-btn:disabled{opacity:.45}

/* nội dung trong cửa sổ: tông VLTK */
html body.jxc.jxwin #panel .card,html body.jxc.jxwin #panel .u2box{background:rgba(0,0,0,.35)!important;border:1px solid #4a463e!important;border-radius:0!important}
html body.jxc.jxwin #panel h3{color:var(--jx-gold)}

/* Hành trang: lưới 6 cột ô tối viền xám như VLTK */
html body.jxc.jxwin #t-inv .u2bagrow{display:block!important}
html body.jxc.jxwin #t-inv .u2bag{width:100%!important;max-width:none!important}
html body.jxc.jxwin #t-inv .invgrid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:2px!important;padding:3px!important;
  background:#0b0a09!important;border:1px solid #000!important;box-shadow:0 0 0 1px #6d685e!important;width:auto!important}
html body.jxc.jxwin #t-inv .invgrid .it{width:auto!important;height:auto!important;aspect-ratio:1/1!important;background:var(--jx-cell)!important;border:1px solid #3d3b36!important;border-radius:0!important}
html body.jxc.jxwin #t-inv .invgrid .it{position:relative!important;overflow:hidden!important;padding:0!important}
html body.jxc.jxwin #t-inv .invgrid .it img{position:absolute!important;left:8%!important;top:8%!important;width:84%!important;height:84%!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;object-fit:contain!important}
html body.jxc.jxwin #t-inv .u2bh{color:#d8cfb6}
html body.jxc.jxwin #t-inv .u2money{display:flex!important;justify-content:center;gap:8px;margin:8px 0!important;font:700 14px "Times New Roman",Georgia,serif;color:#d8cfb6}
html body.jxc.jxwin #t-inv .u2money b{background:transparent!important;border:0!important;color:#f3e7c4!important;padding:0!important}
html body.jxc.jxwin #panel .u2act{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:5px}
html body.jxc.jxwin #panel .u2act .btn{background:linear-gradient(#3b4a3a,#1c241b)!important;border:1px solid #7d776a!important;color:#efe3c0!important;border-radius:2px!important}

/* Trang bị & thuộc tính: ô trang bị tối, nhãn vàng; ngang thì thuộc tính bên trái như VLTK */
html body.jxc.jxwin #t-char .u2char{display:flex!important;flex-direction:column;align-items:center;gap:8px}
html body.jxc.jxwin #t-char .u2dollw{margin:0 auto}
html body.jxc.jxwin #t-char .u2info{width:100%}
html body.jxc.jxwin #t-char .u2s{background:rgba(10,10,9,.75)!important;border:1px solid #57534a!important;box-shadow:inset 0 0 0 1px #000!important}
html body.jxc.jxwin #t-char .u2s span{color:#7f7a6d}
html body.jxc.jxwin #t-char .u2nm{color:#f4e7c2;font:700 16px "Times New Roman",Georgia,serif;text-align:center}
html body.jxc.jxwin #t-char .u2a span,html body.jxc.jxwin #t-char .u2kv span,html body.jxc.jxwin #t-char .u2st span:nth-child(odd){color:var(--jx-gold)!important}
html body.jxc.jxwin #t-char .u2a b,html body.jxc.jxwin #t-char .u2st span:nth-child(even){background:#0b0a09;border:1px solid #3d3b36;padding:0 5px;color:#fff!important}
@media (orientation:landscape) and (max-height:520px){
  html body.jxc.jxwin #t-char .u2char{flex-direction:row-reverse!important;align-items:flex-start}
  html body.jxc.jxwin #t-char .u2info{flex:1 1 auto;min-width:0}
}

/* ---------- menu chức năng ---------- */
#jxc-menu{position:fixed;inset:0;z-index:9600;background:#0007;display:none}
#jxc-menu.on{display:block}
#jxc-menu .w{position:absolute;right:calc(6px + env(safe-area-inset-right));top:calc(50px + env(safe-area-inset-top));width:min(92vw,320px);
  background:rgba(14,13,11,.96);border:2px solid var(--jx-frame);box-shadow:0 0 0 3px var(--jx-frame2),0 8px 30px #000e}
#jxc-menu .h{height:30px;display:flex;align-items:center;justify-content:center;font:700 15px "Times New Roman",Georgia,serif;letter-spacing:2px;color:#f4e7c2;
  background:url(ui/jx1/ornt.png) center top/auto 9px repeat-x,linear-gradient(#55524b,#24221f);border-bottom:2px solid #000;text-transform:uppercase}
#jxc-menu .g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}
#jxc-menu .g button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:62px;padding:4px 2px;
  border:1px solid #57534a;background:rgba(0,0,0,.45);color:#efe3c0;font:700 10.5px/1.1 Tahoma,Arial;cursor:pointer;border-radius:2px}
#jxc-menu .g button .ic{font-size:24px;line-height:1;margin-bottom:auto;margin-top:4px}
#jxc-menu .g button .dot{position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#ff3b30;display:none}
#jxc-menu .g button .dot.on{display:block}
#jxc-menu .g button.on{border-color:#e7c46a;color:#ffe9a8}

/* ---------- tooltip đồ kiểu VLTK ---------- */
#jxc-tip{position:fixed;inset:0;z-index:100500;display:none;align-items:center;justify-content:center;background:#0005;padding:10px}
#jxc-tip.on{display:flex}
#jxc-tip .bx{max-width:min(92vw,340px);max-height:calc(100% - 20px);overflow-y:auto;background:rgba(6,8,10,.9);border:1px solid #5d5d5a;box-shadow:0 0 0 1px #000,0 6px 22px #000c;
  padding:10px 12px 8px;text-align:center;font:13px/1.45 Tahoma,Arial,sans-serif;color:#e9e9e6}
#jxc-tip .ic{width:44px;height:44px;margin:0 auto 4px;display:grid;place-items:center}
#jxc-tip .ic img{max-width:44px;max-height:44px;image-rendering:auto}
#jxc-tip .nm{font-weight:700;font-size:14px;margin-bottom:2px}
#jxc-tip .ty{color:#bdb7a6;font-size:12px;margin-bottom:4px}
#jxc-tip .sl>div{white-space:pre-wrap}
#jxc-tip .sl .b{color:#ececea}
#jxc-tip .sl .in{color:#d9d2bd;font-style:normal}
#jxc-tip .sl .rq{color:var(--jx-red)}
#jxc-tip .sl .m{color:var(--jx-blue)}
#jxc-tip .sl .h{color:var(--jx-grey)}
#jxc-tip .sl .h.on{color:var(--jx-blue)}
#jxc-tip .sl .r{color:#e9cf8a}
#jxc-tip .sl .rng{color:#8d8a80;font-size:11px}
#jxc-tip .cmp{margin-top:6px;padding-top:5px;border-top:1px solid #3a3a37;font-size:12px;color:#cfc8b2}
#jxc-tip .cmp .cp{color:#69e06f}#jxc-tip .cmp .cn{color:#ff6a5a}
#jxc-tip .bt{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:8px}
#jxc-tip .bt .jxc-btn{min-width:64px;height:28px;font-size:12px;padding:0 8px}

/* ---------- khi mở cửa sổ: ẩn HUD dưới cho gọn ---------- */
html body.jxc.jxwin #pad,html body.jxc.jxwin #jxc-bl,html body.jxc.jxwin #vli-arc,html body.jxc.jxwin #vli-arc-joy{display:none!important}
html body.jxc #jxc-wh .t{font-size:clamp(14px,4.6vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.jxc.jxwin #panel .u2act .btn{width:auto!important;flex:0 0 auto!important;min-width:0!important;padding:0 8px!important;height:28px!important}

/* ---------- khung chat: ẩn, bấm nút Chat mới hiện ---------- */
html body.jxc:not(.jxchat) #u20log,html body.jxc #vli-yh-fab{display:none!important}
html body.jxc.jxchat #u20log{display:flex!important;flex-direction:column;position:fixed!important;z-index:62!important;top:auto!important;right:auto!important;
  left:calc(6px + env(safe-area-inset-left))!important;bottom:calc(118px + env(safe-area-inset-bottom))!important;width:min(82vw,360px)!important;height:min(44vh,360px)!important;max-height:none!important}
html body.jxc.jxchat #u20log #u20lines{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow-y:auto!important}
html body.jxc.jxchat.vli-arc #u20log{bottom:calc(310px + env(safe-area-inset-bottom))!important;height:min(34vh,300px)!important}
@media (orientation:landscape) and (max-height:520px){
  html body.jxc.jxchat #u20log{bottom:calc(46px + env(safe-area-inset-bottom))!important;width:min(46vw,420px)!important;height:calc(100% - 120px)!important}
  html body.jxc #jxc-bl{flex-direction:row}
  html body.jxc.jxchat.vli-arc #u20log{bottom:auto!important;top:60px!important;left:auto!important;right:6px!important;height:calc(100% - 200px)!important}
}

html body.jxc.vli-arc #pad{display:none!important}
#jxc-menu .g button .ic{margin-top:2px}
html body.jxc.jxwin #t-inv .invgrid{grid-template-columns:repeat(6,minmax(0,58px))!important;justify-content:center}
@media (orientation:landscape) and (max-height:520px){
  html body.jxc.jxchat #u20log{left:calc(54px + env(safe-area-inset-left))!important}
  html body.jxc.jxwin #t-inv .invgrid{grid-template-columns:repeat(6,minmax(0,50px))!important}
}

/* icon sprite 3 khung (60x20): chỉ hiện khung đầu */
.jxc-b.sp::before,#jxc-menu .g button.sp::before{content:'';position:absolute;left:50%;top:5px;width:30px;height:30px;margin-left:-15px;
  background:var(--ic) 0 0/90px 30px no-repeat;image-rendering:pixelated;pointer-events:none}
#jxc-menu .g button.sp::before{top:8px}
html body.jxc.jxchat #u20log{left:calc(54px + env(safe-area-inset-left))!important;width:min(calc(100vw - 64px),360px)!important}
@media (orientation:portrait),(max-width:600px){
  html body.jxc #jxc-menuBtn{position:fixed;z-index:63;top:calc(100px + env(safe-area-inset-top));right:calc(94px + env(safe-area-inset-right));margin:0;width:36px;height:36px;border-radius:50%}
}
/* #app bị scale (transform) nên tạo lớp riêng: khi mở cửa sổ / hộp thoại thì nâng cả #app lên trên các nút nổi (Thổ Địa, Kỳ Trân, Chợ…) */
html body.jxc.jxwin #app,html body.jxc.modal-open #app{z-index:9550!important}
@media (orientation:portrait){html body.jxc.jxchat:not(.vli-arc) #u20log{bottom:calc(182px + env(safe-area-inset-bottom))!important;height:min(40vh,340px)!important}}
/* màn ngang trên điện thoại (bố cục vli-mob-land): dùng chế độ Analog, ẩn lưới nút dọc */
html body.jxc.vli-mob-land #pad,html body.jxc.vli-mob-land #jxc-bl,html body.jxc.vli-mob-land #jxc-menuBtn{display:none!important}

/* tooltip: nút ✕, màu dòng HK/BK vàng, Tím tím */
#jxc-tip .bx{position:relative}
#jxc-tip .bx.jxc-compare{width:720px;max-width:94vw;box-sizing:border-box}
.jxc-compare-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;clear:both}
.jxc-compare-grid>section{min-width:0;padding:10px;border:1px solid #655538;border-radius:4px;overflow-wrap:anywhere}
.jxc-compare-grid h3{margin:0 0 10px;color:#e6cb8c;font-size:14px;text-align:center}
#jxc-tip .cmp2 .cp{color:#72df87}#jxc-tip .cmp2 .cn{color:#ff8585}
@media(max-width:540px){.jxc-compare-grid{grid-template-columns:minmax(0,1fr)}}
#jxc-tip .tx{position:sticky;top:0;float:right;margin:-4px -6px 0 0;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #8b8678;
  background:radial-gradient(#5d5a53,#26241f);color:#f3ead0;font:700 15px/1 Tahoma;cursor:pointer;z-index:2}
#jxc-tip .sl.opt-gold>.m{color:#ffd24a}
#jxc-tip .sl.opt-vio>.m{color:#d48bff}
/* hành trang: ô nhỏ hơn để thấy nhiều ô */
html body.jxc.jxwin #t-inv .invgrid{grid-template-columns:repeat(6,minmax(0,44px))!important}
html body.jxc.jxwin #t-inv .invgrid .it i{font-size:9px!important}
@media (orientation:landscape) and (max-height:520px){html body.jxc.jxwin #t-inv .invgrid{grid-template-columns:repeat(10,minmax(0,40px))!important}}

/* thanh kỹ năng 120 riêng: bỏ (kỹ năng 120 gán vào ô bùa B1–B4 / ô bùa Analog) */
html body.jxc #vli120Bar{display:none!important}
/* hàng ô bùa / buff B1–B4 trên cùng lưới nút */
#pad .jxc-bfr{display:none}
html body.jxc #pad .jxc-bfr .jxc-bf{order:0}
html body.jxc #pad .jxc-bf{position:relative;width:var(--jxs,50px);height:var(--jxs,50px);padding:0;margin:0;border:1px solid #4f6d86;border-radius:50%;
  background:rgba(12,14,18,.72);box-shadow:inset 0 0 0 1px #000a,0 1px 4px #0009;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
html body.jxc #pad .jxc-bf .ico{position:absolute;inset:4px;border-radius:50%;background:center/contain no-repeat}
html body.jxc #pad .jxc-bf b{position:absolute;left:50%;top:1px;transform:translateX(-50%);font:700 9px Tahoma;color:#9fd0ff;text-shadow:0 0 2px #000}
html body.jxc #pad .jxc-bf .tm{position:absolute;left:0;right:0;bottom:2px;text-align:center;font:800 11px Tahoma;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000}
html body.jxc #pad .jxc-bf.empty .ico::after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#8fb8d8;font:700 20px Tahoma}
html body.jxc #pad .jxc-bf.on{border-color:#7fe0ff;box-shadow:0 0 10px #7fe0ff88,inset 0 0 0 1px #000a}
@media (orientation:portrait){html body.jxc.jxchat:not(.vli-arc) #u20log{bottom:calc(240px + env(safe-area-inset-bottom))!important;height:min(36vh,320px)!important}}
html body.jxc.jxwin #t-inv .u2rx{margin-top:8px;padding-top:6px;border-top:1px solid #3d3b36}

/* tab rương cạnh nút Mở rộng */
html body.jxc #t-inv .u2bh{flex-wrap:wrap}
html body.jxc:not(.pc23) #t-inv .u2bh:has(.jxc-rx){display:grid!important;grid-template-columns:max-content max-content minmax(0,1fr);gap:5px;align-items:center}
html body.jxc:not(.pc23) #t-inv .u2bh>.sp{display:none}
html body.jxc:not(.pc23) #t-inv .u2bh>#iSort{grid-column:1/-1;width:100%;max-width:none!important;min-width:0;margin:0}
html body.jxc:not(.pc23) #t-inv .u2bh>.jxc-rx{display:flex;flex-wrap:nowrap;gap:2px;min-width:0}
html body.jxc:not(.pc23) #t-inv .u2bh>.jxc-rx button{flex:1 1 0;min-width:0!important;padding:0 2px!important;font-size:11px;white-space:nowrap}
.jxc-rx{display:inline-flex;gap:3px;flex-wrap:wrap}
.jxc-rx button{min-width:30px;height:26px;padding:0 6px;border:1px solid #6b665c;border-radius:2px;background:#16140f;color:#d8cfb6;font:700 12px Tahoma;cursor:pointer}
.jxc-rx button.on{border-color:#e7c46a;color:#ffe9a8;background:#3a2f16}
.jxc-rx button.lk{color:#8a857a}
html body.jxc #t-inv .u2rx{display:none!important}
/* ngân lượng / KNB: nhãn + ô số dễ đọc */
html body.jxc.jxwin #t-inv .u2money{display:grid!important;grid-template-columns:auto 1fr;gap:5px 8px!important;align-items:center;margin:8px auto!important;max-width:300px;font:700 13px Tahoma,Arial,sans-serif!important}
html body.jxc.jxwin #t-inv .u2money span{color:var(--jx-gold)!important;white-space:nowrap}
html body.jxc.jxwin #t-inv .u2money b{display:block;background:#0b0a09!important;border:1px solid #57534a!important;box-shadow:inset 0 0 0 1px #000!important;
  padding:4px 10px!important;text-align:right;color:#fff3c4!important;font:700 14px Tahoma,Arial,sans-serif!important;letter-spacing:.3px}

/* ---------- cửa sổ xem trang bị người khác (cùng khung VLTK với Trang Bị) ---------- */
#jxc-iw{position:fixed;inset:0;z-index:99000;background:#0006;display:flex;align-items:stretch;justify-content:center;padding:calc(52px + env(safe-area-inset-top)) 0 calc(6px + env(safe-area-inset-bottom))}
#jxc-iw .iw{display:flex;flex-direction:column;width:min(96vw,440px);background:rgba(14,13,11,.96);border:2px solid var(--jx-frame);outline:1px solid #000;box-shadow:0 0 0 3px var(--jx-frame2),0 8px 30px #000e}
@media (orientation:landscape) and (max-height:520px){#jxc-iw{padding:4px 0}#jxc-iw .iw{width:min(94vw,700px)}}
#jxc-iw .wh{display:flex;align-items:center;position:relative;flex:0 0 auto;height:40px;padding:0 44px;
  background:url(ui/jx1/ornt.png) center top/auto 12px repeat-x,linear-gradient(#55524b,#34322d 55%,#24221f);border-bottom:2px solid #000;box-shadow:inset 0 -1px 0 #8f8a7e}
#jxc-iw .wh .t{flex:1;text-align:center;margin-top:6px;font:700 clamp(14px,4.4vw,18px)/1 "Times New Roman",Georgia,serif;letter-spacing:1.5px;text-transform:uppercase;color:#f4e7c2;text-shadow:0 0 2px #000,0 2px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jxc-iw .wh .x{position:absolute;right:6px;top:50%;transform:translateY(-40%);width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #8b8678;background:radial-gradient(#5d5a53,#26241f);color:#f3ead0;font:700 15px/1 Tahoma;cursor:pointer}
#jxc-iw .bd{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px}
#jxc-iw .wf{flex:0 0 auto;display:flex;justify-content:center;gap:8px;padding:6px 8px 8px;background:url(ui/jx1/ornb.png) center bottom/auto 10px repeat-x,linear-gradient(#2a2824,#3d3a34);border-top:2px solid #000;box-shadow:inset 0 1px 0 #8f8a7e}
#jxc-iw .u2char{display:flex;flex-direction:column;align-items:center;gap:8px}
@media (orientation:landscape) and (max-height:520px){#jxc-iw .u2char{flex-direction:row-reverse;align-items:flex-start}#jxc-iw .u2info{flex:1 1 auto;min-width:0}}
#jxc-iw .u2info{width:100%}
#jxc-iw .u2nm{color:#f4e7c2;font:700 16px "Times New Roman",Georgia,serif;text-align:center;margin-bottom:4px}
#jxc-iw .jxc-doll{position:relative;width:252px;height:300px;margin:0 auto;background:radial-gradient(ellipse at 50% 45%,#2b2a26,#0f0e0c 70%);border:1px solid #3d3b36}
#jxc-iw .u2s{position:absolute;background:rgba(10,10,9,.75);border:1px solid #57534a;box-shadow:inset 0 0 0 1px #000}
#jxc-iw .u2s span{font-size:10px;line-height:11px;color:#7f7a6d;text-align:center}
#jxc-iw .jxc-is{cursor:pointer}


#jxc-iw .u2box{background:rgba(0,0,0,.35);border:1px solid #4a463e;padding:5px 7px;margin-bottom:4px;color:#ece6d4;font:13px Tahoma,Arial}
#jxc-iw .u2h{color:var(--jx-gold);font:700 13px Tahoma;margin:6px 0 3px}
#jxc-iw .u2kv,#jxc-iw .u2st{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:3px 6px;font-size:12px;margin-top:4px}
#jxc-iw .u2kv{grid-template-columns:auto 1fr}
#jxc-iw .u2kv span,#jxc-iw .u2st span:nth-child(odd){color:var(--jx-gold)}
#jxc-iw .u2st span:nth-child(even){background:#0b0a09;border:1px solid #3d3b36;padding:0 5px;color:#fff;text-align:right}
#jxc-iw .jxc-sk{display:flex;flex-wrap:wrap;gap:4px}
#jxc-iw .jxc-sk i{font-style:normal;font-size:11px;padding:2px 6px;border:1px solid #3d3b36;background:#0b0a09}
#jxc-iw .jxc-sk b{color:#ffd24a}
#jxc-bl button[data-k="ride"].on{border-color:#e7c46a;color:#ffe9a8}
/* hồi chiêu: quét tối theo vòng + giây còn lại; thiếu nội lực: phủ xanh */
.jxc-cd{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;display:grid;place-items:center;
  background:conic-gradient(rgba(0,0,0,.72) var(--p,100%),rgba(0,0,0,.15) 0)}
.jxc-cd em{font:800 13px/1 Tahoma,Arial;font-style:normal;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000}
.jxc-cd.mp{background:rgba(20,50,120,.55)}
.jxc-cd.mp em{color:#9fd0ff;font-size:11px}
#vli-arc .ab.main .jxc-cd em{font-size:17px}
html body.jxc #pad .pbtn .jxc-cd em{position:static!important;color:#fff!important;font:800 14px/1 Tahoma,Arial!important;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000!important}
html body.jxc #pad .pbtn .jxc-cd.mp em{color:#9fd0ff!important;font-size:11px!important}

#jxc-iw .u2s>span{position:absolute;inset:0;display:grid;place-items:center}

/* iOS (WebKit) không chạy animation của biến @property → JS xoay góc --jxga (html.jxga) */
html.jxga .it.r3::before,html.jxga .it.r4::before,html.jxga .it.r5::before,
html.jxga .vsx-slot.r3::before,html.jxga .vsx-slot.r4::before,html.jxga .vsx-slot.r5::before,
html.jxga .vli-r3::before,html.jxga .vli-r4::before,html.jxga .vli-r5::before{
  animation:none!important;
  background:conic-gradient(from var(--jxga,0deg),
      transparent 0deg 40deg, var(--vli-gc2) 80deg, var(--vli-gc) 112deg, #fff 118deg, transparent 121deg 220deg,
      var(--vli-gc2) 260deg, var(--vli-gc) 292deg, #fff 298deg, transparent 301deg 360deg)!important}

/* khoá cuộn trang (iPhone hay tự kéo cả trang khi kéo cần analog / chạm sân) */
html.jxc-lock,html.jxc-lock body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none!important;-webkit-overflow-scrolling:auto}
html.jxc-lock body{touch-action:none}
html.jxc-lock #panel .tab,html.jxc-lock #jxc-iw .bd,html.jxc-lock #jxc-tip .bx,html.jxc-lock #u20lines,html.jxc-lock #mBody,html.jxc-lock #vli-arc-pick,html.jxc-lock .mbox{touch-action:pan-y;overscroll-behavior:contain}
html body.jxc.vli-arc #jxc-bl [data-k="ride"]{display:none}

html body.jxc #actBtn{display:none!important}
html body.jxc #top .topmid{flex:0 0 auto!important;min-width:56px!important;max-width:85px!important;overflow:hidden}
html body.jxc #top .topmid #heroName{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.jxc #top .topmid #stageLbl{display:block;font-size:9.5px;color:#a09780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.jxc #top .gold .gold-pw-ic{grid-row:3;grid-column:1;font-size:10px;line-height:1;color:#ff9d3a;text-align:center}
html body.jxc #top .gold #heroPower{grid-row:3;grid-column:2;color:#ffd870!important;font-weight:700;font-size:10.5px;line-height:1;white-space:nowrap;text-shadow:0 1px 2px #000}

/* Keep the world visible through chat without fading the text or controls. */
html body.jxc.jxchat #u20log{background:transparent!important}
html body.jxc.jxchat:not(.vli-yh) #u20log #u20lines,
html body.jxc.jxchat:not(.vli-yh) #u20ct,
html body.jxc.jxchat:not(.vli-yh) #u20in{background:rgba(0,0,0,.4)!important}
html body.jxc.jxchat.vli-yh #u20log #u20lines{background:#fff!important}
@media (orientation:portrait) and (max-width:900px){
  html body.jxc.jxchat #u20log{left:calc(4px + env(safe-area-inset-left))!important;right:auto!important;width:min(88vw,600px)!important;height:clamp(144px,20vh,180px)!important;box-sizing:border-box}
  html body.jxc.jxchat.u2kb #u20log{bottom:var(--jxc-chat-kb,4px)!important;height:clamp(124px,35vh,180px)!important}
}

/* Compact channel geometry; Yahoo retains its original purple/white skin. */
html body.jxc.jxchat #u20ct{display:flex!important;align-items:center!important;flex-wrap:nowrap;gap:4px;padding:4px 6px!important;min-height:0;box-sizing:border-box}
html body.jxc.jxchat #u20ct button[data-lt]{position:relative;flex:0 1 auto;min-width:0;height:26px;min-height:26px;margin:0;padding:0 8px!important;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font:700 11px/1 Tahoma,Arial!important}
html body.jxc.jxchat #u20ct .ctn{font:700 9px/13px Tahoma!important}
html body.jxc.jxchat #u20onl{font:10px Tahoma;padding:0 3px}
html body.jxc.jxchat #u20hide{position:static!important;flex:none;align-self:center;width:28px;height:26px!important;min-width:28px!important;min-height:26px!important;margin-left:auto!important;padding:0!important;font:700 19px/24px Tahoma!important}
html body.jxc.jxchat #u20log #u20lines{font:12px/1.4 Tahoma,Arial!important;padding:5px 7px!important}
html body.jxc.jxchat #vli-yh-tb{min-height:20px;padding:1px 5px}
html body.jxc.jxchat #vli-yh-tb button{height:20px;min-width:22px;padding:0 4px;font-size:10px}
html body.jxc.jxchat #u20in{padding:4px!important;margin:0!important}
html body.jxc.jxchat:not(.vli-yh) #u20ct{background:rgba(22,29,22,.86)!important;border:1px solid #82734c!important;border-bottom-color:#82734c66!important;border-radius:4px 4px 0 0!important}
html body.jxc.jxchat:not(.vli-yh) #u20ct::before{display:none!important}
html body.jxc.jxchat:not(.vli-yh) #u20ct button[data-lt]{background:rgba(0,0,0,.18)!important;border:1px solid transparent!important;border-radius:3px!important;color:#c6bea4!important;text-shadow:0 1px 1px #000!important;box-shadow:none!important}
html body.jxc.jxchat:not(.vli-yh) #u20ct button[data-lt].on{background:linear-gradient(#c8ad68,#94763a)!important;color:#21190b!important;border-color:#d4bc81!important;text-shadow:none!important}
html body.jxc.jxchat:not(.vli-yh) #u20ct .ctn{background:#ab3b2d!important;color:#fff!important;box-shadow:0 0 0 1px #34291c}
html body.jxc.jxchat:not(.vli-yh) #u20onl{color:#98bd8e!important}
html body.jxc.jxchat:not(.vli-yh) #u20hide{background:rgba(0,0,0,.2)!important;border:1px solid #82734c88!important;border-radius:3px!important;color:#e8d6a1!important}
html body.jxc.jxchat:not(.vli-yh) #u20log{filter:none!important;border-radius:4px;box-shadow:0 2px 8px #0005}
html body.jxc.jxchat:not(.vli-yh) #u20log #u20lines{background:rgba(0,0,0,.4)!important;color:#eee6cd!important;text-shadow:0 1px 2px #000!important;border-left:1px solid #82734c66!important;border-right:1px solid #82734c66!important}
html body.jxc.jxchat:not(.vli-yh) #u20lines .cl{color:#eee6cd!important}
html body.jxc.jxchat:not(.vli-yh) #u20lines .cl.sys,html body.jxc.jxchat:not(.vli-yh) #u20lines .cl.syl{color:#c5bd9f!important}
html body.jxc.jxchat:not(.vli-yh) #vli-yh-tb{background:rgba(22,29,22,.7)!important;border:1px solid #82734c66;border-top:0;border-bottom:0}
html body.jxc.jxchat:not(.vli-yh) #vli-yh-tb button{color:#d8c58f}
html body.jxc.jxchat:not(.vli-yh) #u20in{background:rgba(22,29,22,.86)!important;border:1px solid #82734c!important;border-top-color:#82734c66!important;border-radius:0 0 4px 4px!important}
html body.jxc.jxchat:not(.vli-yh) #u20txt{background:rgba(0,0,0,.35)!important;color:#eee6cd!important;border:1px solid #82734c88!important;border-radius:3px!important;box-shadow:none!important;font:12px Tahoma!important}
html body.jxc.jxchat:not(.vli-yh) #u20txt::placeholder{color:#b3ab94!important}
html body.jxc.jxchat:not(.vli-yh) #u20go{background:linear-gradient(#c8ad68,#94763a)!important;border:1px solid #d4bc81!important;border-radius:3px!important;color:#21190b!important;font:700 11px Tahoma!important;padding:0 10px!important}
html body.jxc #jxc-bl button.jxc-chat-button[data-k="chat"]{position:fixed;display:block!important;width:clamp(44px,12vw,54px)!important;height:clamp(44px,12vw,54px)!important;box-sizing:border-box;right:auto!important;bottom:auto!important;padding:0!important;border:1px solid #82734c!important;border-radius:4px!important;background:linear-gradient(#29372be8,#101b16ed)!important;box-shadow:inset 0 0 0 1px #0009,0 2px 5px #0007!important;touch-action:none;user-select:none;overflow:visible}
html body.jxc #jxc-bl .jxc-chat-button .game-icon{position:absolute;left:50%;top:5px;margin:0;transform:translateX(-50%);width:27px!important;height:27px!important;color:#ddc78f}
html body.jxc #jxc-bl .jxc-chat-button .chat-label{position:absolute;left:0;right:0;bottom:3px;color:#eee0b4;font:700 8px/10px Tahoma;text-align:center;pointer-events:none}
html body.jxc #jxc-bl .jxc-chat-button .n{position:absolute;right:-6px;top:-6px;min-width:16px;height:16px;box-sizing:content-box;padding:0 3px;border:1px solid #f0c297;border-radius:9px;background:#b73b2c;color:#fff;font:700 10px/16px Tahoma;box-shadow:0 1px 3px #0009;pointer-events:none}
html body.jxc #jxc-bl .jxc-chat-button .n.on{display:block}
html body.jxc #jxc-bl .jxc-chat-button.on{border-color:#c9b272!important}