/* jx-trade.css — khung Giao dich / Oan tu ti (js/jx-trade.js), ve trong hop thoai JX (jx-dialog.css). */
.jtx { display: flex; flex-direction: column; gap: 8px; }
/* khung giao dich kieu Vo Lam: trai = doi phuong (tren) + ban than (duoi), moi ben 12 o co dinh; phai = hanh trang + xem mon */
#modal.jxd .mbox:has(.jtx2) { width: min(100%, 760px); }
.jtx2 { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.jtx-deal { display: flex; flex-direction: column; gap: 8px; }
.jtx-party { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 8px; border: 1px solid #4a3f28; background: rgba(0, 0, 0, .38); }
.jtx-party.me { border-color: #6e5c34; }
.jtx-party header, .jtx-bag header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgb(255, 217, 78); }
.jtx-bag header small { color: #a89c80; font-size: 11px; }
.jtx-b { font-style: normal; font-size: 11px; padding: 0 5px; border: 1px solid #6e5c34; color: #a89c80; }
.jtx-b.lock { color: #ffd24a; border-color: #b8952f; }
.jtx-b.ok { color: #7dff7a; border-color: #3f9b3c; }
.jtx-box { position: relative; }
.jtx-slots { display: grid; grid-template-columns: repeat(6, 46px); gap: 3px; }
.jtx-slot { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #2c271d; background: #0b0a08; box-shadow: inset 0 0 6px #000; }
.jtx-slot.has { cursor: pointer; }
.jtx-slot .it { width: 42px; height: 42px; pointer-events: none; }
.jtx-slot.has:hover, .jtx-slot.has:focus-visible { border-color: #8a7240; outline: none; }
.jtx-slot.on { border-color: rgb(255, 217, 78); box-shadow: inset 0 0 0 1px #000, 0 0 6px #ffd24a88; }
.jtx-party.locked .jtx-slots { filter: grayscale(.55) brightness(.7); }
.jtx-lockmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); padding: 2px 12px; border: 2px solid #b8952f; background: rgba(20, 14, 6, .85);
  color: #ffd24a; font: 700 14px/1.3 var(--jx-font, Tahoma, sans-serif); letter-spacing: 1px; pointer-events: none; }
.jtx-party.locked .jtx-lockmark { pointer-events: none; }
.jtx-party.locked .jtx-slot.has { pointer-events: auto; }
.jtx-money { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #2c271d; background: #080706; color: #c9a24e; }
.jtx-money b { flex: 1; text-align: right; color: #ffd94e; font-weight: 400; }
.jtx-money small { color: #a89c80; font-size: 11px; }
.jtx-money input { flex: 1; min-width: 0; height: 22px; padding: 0 6px; border: 1px solid #6e5c34; background: rgba(0, 0, 0, .5); color: #f3ead3; font: 12px var(--jx-font, inherit); text-align: right; }
.jtx-coin { width: 15px; height: 12px; }
.jtx-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jtx-bag { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 8px; border: 1px solid #4a3f28; background: rgba(0, 0, 0, .38); }
.jtx-baggrid { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 3px; max-height: 150px; overflow: auto; }
.jtx-info { width: auto; max-height: 230px; overflow: auto; }
.jtx-info.empty { color: #8f866f; padding: 16px 10px; }
.jtx-info .jtx-who { display: block; margin-bottom: 2px; color: #a89c80; font-size: 11px; }
.jtx-info .btnrow { justify-content: center; margin-top: 6px; }
.jtx-hint { margin: 2px 0 0; color: #a89c80; font-size: 12px; }
.jtx-btns { display: flex; justify-content: center; gap: 8px; }
.jtx-btns .btn { min-width: 92px; }
@media (max-width: 640px), (orientation: portrait) {
  .jtx2 { grid-template-columns: 1fr; }
  .jtx-slots { grid-template-columns: repeat(6, minmax(0, 46px)); }
  .jtx-slot { width: auto; aspect-ratio: 1; height: auto; }
  .jtx-baggrid { max-height: 110px; }
  .jtx-info { max-height: 180px; }
}
.jtx-baggrid .jtx-empty { grid-column: 1 / -1; }
.jtx-empty { color: #8f866f; font-size: 12px; padding: 14px 0; text-align: center; }
.jtx-pot { text-align: center; color: rgb(255, 217, 78); }
.jtx-rps { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.jtx-picks { display: flex; justify-content: center; gap: 12px; }
.jtx-pk { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 8px 0; border: 1px solid #8a7240; background: linear-gradient(#4a3c22, #241c10); color: #f3ead3; font: 13px var(--jx-font, inherit); cursor: pointer; }
.jtx-pk span { font-size: 34px; line-height: 1.1; }
.jtx-pk:hover:not(:disabled) { border-color: rgb(255, 217, 78); }
.jtx-pk.on { border-color: rgb(255, 217, 78); box-shadow: 0 0 8px #ffd24a88; }
.jtx-pk:disabled:not(.on) { opacity: .45; }
.jtx-last { color: #ffd24a; }
.jtx-reveal { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 22px; }
.jtx-reveal b { font-size: 13px; color: #a89c80; }
.jtx-reveal span { display: flex; flex-direction: column; align-items: center; }
.jtx-reveal small { font-size: 11px; color: #a89c80; }
.jtx-end { text-align: center; font-size: 14px; }
.jtx-end.ok { color: #7dff7a; }
#jtxChip { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 4px 12px; border: 1px solid #b8952f; background: rgba(16, 13, 9, .92); color: rgb(255, 217, 78); font: 12px var(--jx-font, inherit); cursor: pointer; }
#jtxChip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .jtx-pk { transition: none; } }

/* ---------- san dau oan tu ti (kieu Vo Lam: vong ngoc ringc, hinh tay nhuom dong, an do, dong tien vuong lo; khong dung chu Han) ---------- */
.jrps { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: min(520px, 84vw); }
.jrps-pot { color: #e8dcc0; font-size: 12px; text-align: center; }
.jrps-pot b { color: rgb(255, 217, 78); }
.jrps-arena { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; padding: 14px 8px 10px;
  border: 1px solid #6e5c34; background: radial-gradient(ellipse at 50% 60%, rgba(120, 90, 40, .22), rgba(0, 0, 0, .55) 70%), rgba(0, 0, 0, .35); overflow: hidden; }
.jrps-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jrps-name { color: rgb(255, 217, 78); font: 700 13px/1.2 var(--jx-font, inherit); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrps-pips { display: flex; gap: 5px; }
.jrps-pips i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid #8a7240; background: rgba(0, 0, 0, .5); }
.jrps-pips i.on { background: radial-gradient(circle, #fff3b0, #d9a520 60%, #7a5a10); border-color: #ffd24a; box-shadow: 0 0 6px #ffd24a; }
.jrps-ring { position: relative; display: grid; place-items: center; width: 96px; height: 96px; background: url('ui/jx1/hud/ringc.webp') center / 100% 100% no-repeat; }
.jrps-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: radial-gradient(circle, #2a2216, #0d0a06); z-index: -1; }
.jrps-g { display: block; width: 100%; text-align: center; font: 40px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; color: #d8c79a;
  filter: sepia(1) saturate(1.7) hue-rotate(-12deg) brightness(.92) drop-shadow(1px 2px 0 #000); }
.jrps-g.q { font: 700 40px/1 var(--jx-font, Tahoma, sans-serif); filter: none; text-shadow: 2px 2px 0 #000; color: #8f866f; }
.jrps-lbl { min-height: 16px; color: #e8dcc0; font: 12px var(--jx-font, inherit); }
.jrps-ring.think .jrps-g { color: #7c7058; animation: jrps-think 1.6s ease-in-out infinite; }
.jrps-ring.picked .jrps-g.q { color: rgb(255, 217, 78); }
.jrps-side.op .jrps-ring.picked .jrps-g.q { color: #7c7058; }
.jrps-side.op .jrps-ring.picked::after { content: "Đã ra"; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); white-space: nowrap; font: 10px/1.3 var(--jx-font, Tahoma, sans-serif); color: #fff; background: #8b1a12; padding: 0 4px; border: 1px solid #d24a3a; }
.jrps-ring.shake { animation: jrps-shake .42s ease-in-out 3; }
.jrps-ring.shake .jrps-g { color: #e8dcc0; }
.jrps-ring.reveal .jrps-g { animation: jrps-pop .35s ease-out; }
.jrps-ring.win { filter: drop-shadow(0 0 10px #ffd24a) drop-shadow(0 0 4px #ffb000); }
.jrps-ring.win .jrps-g { filter: sepia(1) saturate(2.6) hue-rotate(-8deg) brightness(1.15) drop-shadow(1px 2px 0 #000); }
.jrps-ring.lose { filter: grayscale(1) brightness(.55); }
.jrps-ring.tie .jrps-g { color: #c8bfa8; }
.jrps-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; }
.jrps-round { color: #a89c80; font: 12px var(--jx-font, inherit); }
.jrps-call { min-height: 30px; color: rgb(255, 217, 78); font: 700 22px/1.3 var(--jx-font, inherit); text-shadow: 2px 2px 0 #000, 0 0 8px #000; white-space: nowrap; }
.jrps-call.beat.go { animation: jrps-beat .38s ease-out; }
.jrps-call.res { font-size: 17px; }
.jrps-call.res.win { color: #ffe680; }
.jrps-call.res.lose { color: #c85a4a; }
.jrps-status { min-height: 20px; color: #e8dcc0; font-size: 12px; text-align: center; }
.jrps-status b { color: rgb(255, 217, 78); }
.jrps-picks { display: flex; justify-content: center; gap: 12px; }
.jrps-pk { display: flex; flex-direction: column; align-items: center; gap: 0; width: 76px; padding: 6px 0 5px; border: 1px solid #8a7240; background: linear-gradient(#4a3c22, #241c10); color: #e8dcc0; font: 12px var(--jx-font, inherit); cursor: pointer; }
.jrps-pk span { font: 30px/1.2 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; filter: sepia(1) saturate(1.7) hue-rotate(-12deg) brightness(.85); }
.jrps-pk:hover:not(:disabled) { border-color: rgb(255, 217, 78); background: linear-gradient(#6a5126, #2e220f); }
.jrps-pk:hover:not(:disabled) span, .jrps-pk.on span { filter: sepia(1) saturate(2.6) hue-rotate(-8deg) brightness(1.1); }
.jrps-pk.on { border-color: rgb(255, 217, 78); box-shadow: 0 0 8px #ffd24a66; }
.jrps-pk:disabled:not(.on) { opacity: .4; cursor: default; }
/* an do THANG / THUA dong xuong giua san */
.jrps-seal { position: absolute; left: 50%; top: 50%; width: 96px; height: 52px; margin: -26px 0 0 -48px; display: grid; place-items: center;
  font: 700 20px/1 var(--jx-font, Tahoma, sans-serif); letter-spacing: 1px; border: 4px double; transform: rotate(-9deg); animation: jrps-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.jrps-seal.win { color: #ffe9d0; background: rgba(150, 20, 12, .92); border-color: #f0b090; box-shadow: 0 0 18px #b01a0e; }
.jrps-seal.lose { color: #b8b0a0; background: rgba(40, 36, 30, .92); border-color: #6e665a; }
.jrps-seal.draw { color: #f3ead3; background: rgba(70, 58, 30, .92); border-color: #b8952f; }
/* dong tien vuong lo bay ve phia nguoi thang (ben trai = ban) */
.jrps-coin { position: absolute; left: 78%; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff1a8 0 20%, #d9a520 45%, #7a5a10 100%);
  box-shadow: 0 0 4px #ffd24a; opacity: 0; animation: jrps-coin .9s ease-in var(--d) forwards; }
.jrps-coin::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; background: #2a1e08; }
@keyframes jrps-think { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes jrps-shake { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }
@keyframes jrps-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes jrps-beat { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
@keyframes jrps-stamp { 0% { transform: rotate(-9deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }
@keyframes jrps-coin { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; left: 18%; transform: translate(0, var(--y)) scale(1); } }
@media (max-width: 560px) {
  .jrps { min-width: 0; width: 100%; }
  .jrps-ring { width: 78px; height: 78px; }
  .jrps-g, .jrps-g.q { font-size: 32px; }
  .jrps-mid { min-width: 70px; }
  .jrps-call { font-size: 18px; }
  .jrps-pk { width: 66px; }
}
@media (prefers-reduced-motion: reduce) { .jrps-ring, .jrps-ring .jrps-g, .jrps-call, .jrps-seal, .jrps-coin { animation: none !important; } }