/* Dang nhap / dang ky kieu JX1 — xem js/jx-auth.js. Man tai (#jxBoot) co CSS noi tuyen trong index.html. */
.jxb-view { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); }

/* khung dang nhap goc ui3 282x185 (ui/jx1/dangnhap.png), phong to giu ti le; o nhap / nut dat theo % */
.jxa-login { --w: min(423px, calc(100vw - 24px)); position: relative; width: var(--w); aspect-ratio: 282 / 185;
  background: var(--bg) center / 100% 100% no-repeat; image-rendering: auto; box-shadow: 0 8px 30px #000c; }
/* #jxBoot: thang kieu input chung cua game (style.css) — o nhap ve san tren anh, chi de chu toi len tren */
#jxBoot .jxa-login input { position: absolute; left: 32%; width: 55.6%; height: 10.4%; min-height: 0; box-sizing: border-box; margin: 0; padding: 0 6px;
  border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: #16100a; font: 700 16px/1 Tahoma, Arial, sans-serif; text-shadow: none; }
#jxBoot .jxa-login input:focus { box-shadow: inset 0 0 0 1px #6b4a12, 0 0 6px #fff3b0; }
.jxa-acc { top: 31.2%; }
.jxa-pass { top: 52.9%; }
.jxa-hit { position: absolute; top: 83.5%; height: 16.5%; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.jxa-hit:hover { background: rgba(255, 240, 160, .18); }
.jxa-hit:disabled { cursor: wait; }
.jxa-ok { left: 0; }
.jxa-cancel { left: 50%; }

.jxa-remember { display: flex; align-items: center; gap: 8px; color: #f3dfa2; cursor: pointer; user-select: none; }
.jxa-remember input { width: 18px; height: 18px; accent-color: #c9a24e; }
.jxa-err { margin: 0; padding: 6px 10px; max-width: 100%; border: 1px solid #8a3a28; background: rgba(40, 8, 4, .85); color: #ffb4a0; text-align: center; }
.jxa-links, .jxa-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jxa-btn { min-height: 34px; min-width: 120px; padding: 4px 14px; border: 1px solid #8a7240; border-radius: 0; cursor: pointer;
  background: linear-gradient(#4a3c22, #241c10); color: #f3dfa2; font: 13px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0008; }
.jxa-btn:hover:not(:disabled) { filter: brightness(1.25); }
.jxa-btn:disabled { opacity: .5; cursor: default; }
.jxa-main { color: #ffe27a; border-color: #c9a24e; }

/* khung dang ky / quen mat khau / ma khoi phuc: cung khung 9 manh voi cua so JX */
.jxa-win { position: relative; isolation: isolate; width: 100%; padding: 63px 20px 26px; }
.jxa-win::before { content: ""; position: absolute; inset: 10px 8px 8px; background: rgba(16, 13, 9, .95); z-index: -1; }
.jxa-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-style: solid; border-width: 63px 44px 21px;
  border-image: url('ui/jx1/khung9.png') 63 44 21 44 round; }
.jxa-title { position: absolute; z-index: 2; left: 58px; right: 58px; top: 29px; height: 26px; display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 Tahoma, Arial, sans-serif; letter-spacing: .5px; color: #24180a; text-shadow: 0 1px 0 #fff6d6, 0 0 2px #fff3c4; }
.jxa-form { display: flex; flex-direction: column; gap: 8px; }
.jxa-form p { margin: 0; }
.jxa-form label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; }
.jxa-form label.jxa-remember { display: flex; }
.jxa-form label span { color: #f3dfa2; }
#jxBoot .jxa-form input:not([type=checkbox]) { box-sizing: border-box; width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid #6e5c34; border-radius: 0; box-shadow: none; background: #0d0b07; color: #fff;
  font: 16px Tahoma, Arial, sans-serif; }
.jxa-form input:focus { outline: 1px solid #c9a24e; }
.jxa-form small { margin: -4px 0 0 118px; color: #9d927a; font-size: 11px; }
.jxa-code { padding: 10px; border: 1px dashed #c9a24e; background: #0d0b07; color: rgb(255, 217, 78); text-align: center;
  font: 700 20px/1.3 Consolas, "Courier New", monospace; letter-spacing: 2px; word-break: break-all; user-select: all; }

.jxa-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; padding: 8px 10px;
  border: 1px solid #6e5c34; background: rgba(0, 0, 0, .35); }

@media (max-width: 420px) {
  .jxa-win { padding: 60px 14px 24px; }
  .jxa-form label { grid-template-columns: 1fr; gap: 4px; }
  .jxa-form small { margin-left: 0; }
}