/* =====================================================================
   TÀI KHOẢN & THANH TOÁN
   ===================================================================== */
.acct { display: flex; align-items: center; position: relative; }
.acct-login {
  height: 44px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #06121d; border: 0; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.acct-login svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.acct-login:hover { background: var(--accent-2); }
.acct-btn {
  height: 44px; padding: 0 12px 0 5px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); white-space: nowrap;
}
.acct-btn:hover { border-color: var(--accent); }
.acct-bal { font-weight: 700; font-size: 13px; color: var(--gold); }
.av { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; }
.av.lg { width: 44px; height: 44px; border-radius: 12px; }
.av.xl { width: 72px; height: 72px; border-radius: 18px; }
.av-letter { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #06121d; font-weight: 800; }
.av.xl.av-letter { font-size: 30px; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 60;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55); display: grid; gap: 2px;
}
.acct-menu[hidden] { display: none; }
.acct-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-head b { display: block; font-size: 14px; }
.acct-head small { color: var(--muted); font-size: 12px; }
.acct-head em { font-style: normal; color: var(--gold); font-weight: 700; }
.acct-menu a, .acct-menu button {
  display: flex; justify-content: space-between; align-items: center; text-align: left; width: 100%;
  padding: 10px; border-radius: 9px; background: none; border: 0; font-size: 14px; color: var(--text);
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--card); }
.acct-menu a span { font-size: 12px; color: var(--muted); }
.acct-menu .danger { color: #ff9b9b; }

/* ---------- Khung thanh toán ---------- */
.pay-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.pay-backdrop { position: absolute; inset: 0; background: rgba(2,6,10,.84); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.pay-card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); transform: translateY(14px); opacity: 0; transition: .25s ease;
}
.pay-card::before { content: ""; position: sticky; top: 0; display: block; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); }
.pay-modal.show .pay-backdrop { opacity: 1; }
.pay-modal.show .pay-card { transform: none; opacity: 1; }
.pay-x { position: absolute; top: 14px; right: 14px; z-index: 4; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 22px; line-height: 1; }
.pay-body { padding: 26px 28px 24px; display: grid; gap: 14px; }
.pay-eyebrow { margin: 0; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.pay-title { margin: 0; font: 900 clamp(24px, 4vw, 32px)/1.1 var(--serif); padding-right: 40px; }
.pay-title.center, .pay-sub.center { text-align: center; padding-right: 0; }
.pay-sub { margin: 0; color: var(--muted); font-size: 14px; }
.pay-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.pay-note a { color: var(--accent-2); }
.gold { color: var(--gold); }
.pay-game { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pay-game .cover { width: 92px; aspect-ratio: 16 / 10; border-radius: 8px; flex: none; }
.pay-game .cover-gen { font-size: 10px; padding: 6px; }
.pay-game .cover-gen small { display: none; }
.pay-game b { display: block; font-size: 14px; line-height: 1.3; }
.pay-game small { color: var(--muted); font-size: 12px; }
.pay-line { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; }
.pay-line b { font: 900 26px/1 var(--serif); }
.pay-balance { border: 1px solid #3f5f7a; background: linear-gradient(135deg, rgba(106,159,208,.12), rgba(106,159,208,.03)); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; }
.pay-balance > div { display: flex; justify-content: space-between; align-items: baseline; }
.pay-balance small { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.pay-balance b { font: 900 24px/1 var(--serif); }
.pay-balance p { margin: 0; font-size: 13px; color: var(--muted); }
.link-btn { justify-self: start; background: none; border: 0; padding: 0; color: var(--gold); font-weight: 700; font-size: 13px; text-decoration: underline; }
.pay-actions { display: grid; gap: 10px; }
.pay-actions.row { grid-template-columns: 1fr 1fr; }
.pay-warn { border-left: 3px solid var(--gold); background: rgba(227,189,106,.08); padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: 13px; color: #d9d2bf; }
.qr-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.qr-img { position: relative; background: #fff; border-radius: 12px; padding: 8px; }
.qr-img img { width: 100%; display: block; }
.qr-img.expired img { filter: blur(4px) grayscale(1); opacity: .4; }
.qr-timer { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 700 13px/1 var(--sans); color: var(--accent-2); }
.qr-info { margin: 0; display: grid; gap: 2px; }
.qr-info div { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.qr-info div:last-child { border-bottom: 0; }
.qr-info dt { font-size: 12px; color: var(--muted); }
.qr-info dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.qr-info dd.big { font: 900 20px/1.1 var(--serif); }
.qr-info dd.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
button.copy { margin: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font: 600 11.5px/1 var(--sans); color: var(--muted); transition: .15s; flex: none; }
button.copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.copy:hover { border-color: var(--accent); color: var(--text); }
button.copy.ok { border-color: var(--accent); color: var(--accent-2); background: rgba(106,159,208,.12); }
.qr-status { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px; border-radius: 10px; background: var(--card); color: var(--muted); font-size: 14px; margin-top: 6px; }
.pass-ok { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 0 0 8px rgba(106,159,208,.12); }
.pass-ok svg { width: 32px; height: 32px; fill: none; stroke: #06121d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pass-box { border: 1px dashed #3f5f7a; border-radius: 12px; padding: 14px; background: var(--card); text-align: center; }
.pass-box small { color: var(--muted); font-size: 12px; }
.pass-val { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.pass-val code { font: 800 22px/1.2 ui-monospace, Consolas, monospace; color: var(--accent-2); word-break: break-all; }
.pass-val.small { justify-content: flex-start; }
.pass-val.small code { font-size: 16px; }
.login-list { display: grid; gap: 10px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 1px solid var(--line); }
.login-btn svg { width: 22px; height: 22px; }
.login-btn.google { background: #fff; color: #1f1f1f; border-color: #fff; }
.login-btn.discord { background: #5865f2; color: #fff; border-color: #5865f2; }
.login-btn.dev { background: var(--card); color: var(--muted); border-style: dashed; }
.login-btn:hover { filter: brightness(1.06); }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.amt { height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.amt.on, .amt:hover { border-color: var(--accent); background: #0f2236; color: var(--accent-2); }
.amt-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; height: 46px; background: var(--card); }
.amt-input span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.amt-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 700 16px var(--sans); text-align: right; }
.amt-input em { font-style: normal; color: var(--muted); }

/* ---------- Trang tài khoản ---------- */
.acc-login { max-width: 460px; text-align: center; padding: 90px 0 40px; display: grid; gap: 14px; }
.acc-login h1 { margin: 0; font: 900 32px/1.1 var(--serif); }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 40px; }
.acc-user { display: flex; gap: 16px; align-items: center; }
.acc-user h1 { margin: 0; font: 900 28px/1.1 var(--serif); }
.acc-user p { margin: 4px 0 0; }
.acc-wallet { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid #3f5f7a; background: linear-gradient(135deg, rgba(106,159,208,.14), rgba(106,159,208,.03)); }
.acc-wallet small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.acc-wallet b { font: 900 28px/1.1 var(--serif); }
.owned { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.owned-item { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.owned-cover .cover { width: 120px; aspect-ratio: 16 / 10; border-radius: 10px; }
.owned-cover .cover-gen { font-size: 11px; padding: 8px; }
.owned-cover .cover-gen small { display: none; }
.owned-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.owned-info b { font-size: 14px; line-height: 1.3; }
.owned-info small { color: var(--muted); font-size: 12px; }
.owned-dl { display: flex; gap: 12px; font-size: 13px; }
.owned-dl a { color: var(--accent-2); font-weight: 600; }
.hist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hist-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; background: var(--bg-2); }
.hist-row:last-child { border-bottom: 0; }
.hist-row span:first-child { color: var(--muted); font-size: 13px; }
.hist-row .plus { color: var(--accent-2); }
.hist-row .minus { color: #ffb4a8; }

@media (max-width: 640px) {
  .pay-modal { padding: 0; align-items: end; }
  .pay-card { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .pay-body { padding: 22px 18px 20px; }
  .qr-wrap { grid-template-columns: 1fr; }
  .qr-img { width: min(240px, 80%); margin: 0 auto 10px; }
  .acct-bal { display: none; }
  .acct-login span { display: none; }
  .acct-login { padding: 0 12px; }
  .owned { grid-template-columns: 1fr; }
  .owned-cover .cover { width: 96px; }
  .hist-row { grid-template-columns: 1fr auto; }
  .hist-row span:first-child { grid-column: 1 / -1; }
  .amounts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Bước quét QR (bản mới) ---------- */
.pay-card.wide { width: min(780px, 100%); }
.qr-head { display: grid; gap: 8px; }
.qr2 { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: stretch; }
.qr2-left { display: grid; gap: 12px; align-content: start; }
.qr2-frame {
  position: relative; background: #fff; border-radius: 18px; padding: 16px; aspect-ratio: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45), 0 0 60px rgba(106,159,208,.12);
}
.qr2-frame img { width: 100%; height: 100%; display: block; object-fit: contain; transition: .3s; }
.qr2-frame .c { position: absolute; width: 22px; height: 22px; border: 3px solid var(--accent); }
.qr2-frame .tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.qr2-frame .tr { top: -5px; right: -5px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.qr2-frame .bl { bottom: -5px; left: -5px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.qr2-frame .br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.qr2-expired { position: absolute; inset: 0; display: none; place-items: center; font: 800 16px/1 var(--serif); color: #20303a; }
.qr2-frame.expired img { filter: blur(5px) grayscale(1); opacity: .25; }
.qr2-frame.expired .qr2-expired { display: grid; }
.qr2-timer { display: grid; gap: 7px; text-align: center; font-size: 12.5px; color: var(--muted); }
.qr2-timer b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.qr2-bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qr2-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s linear; }
.qr2-right { display: grid; gap: 12px; align-content: start; }
.qr2-amount, .qr2-field { border-radius: 14px; padding: 13px 15px; display: grid; gap: 6px; }
.qr2-amount { background: linear-gradient(135deg, rgba(227,189,106,.14), rgba(227,189,106,.03)); border: 1px solid rgba(227,189,106,.32); }
.qr2-field { background: linear-gradient(135deg, rgba(106,159,208,.13), rgba(106,159,208,.03)); border: 1px solid rgba(106,159,208,.35); }
.qr2-amount small, .qr2-field small { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.qr2-amount > div, .qr2-field > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qr2-amount b { font: 900 30px/1 var(--serif); color: var(--gold); letter-spacing: -.01em; }
.qr2-field code { font: 800 19px/1.2 ui-monospace, Consolas, monospace; color: var(--blue-2); letter-spacing: .05em; word-break: break-all; }
.qr2-rows { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 2px 15px; }
.qr2-rows div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qr2-rows div:last-child { border-bottom: 0; }
.qr2-rows dt { font-size: 12.5px; color: var(--muted); }
.qr2-rows dd { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; text-align: right; }
.qr2-warn { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #d6cfbd; line-height: 1.5; }
.qr2-warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qr2-warn b { color: var(--gold); }
.qr2-status { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.qr2-status .btn { margin-left: auto; flex: none; }
.qr2-status-text { display: grid; gap: 2px; font-size: 14px; }
.qr2-status-text small { color: var(--muted); font-size: 12px; }
.qr2-pulse { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--accent); }
.qr2-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); animation: qrPulse 1.6s ease-out infinite; }
@keyframes qrPulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.qr2-status.off .qr2-pulse { background: var(--muted); }
.qr2-status.off .qr2-pulse::after { display: none; }
@media (max-width: 720px) {
  .qr2 { grid-template-columns: 1fr; gap: 16px; }
  .qr2-left { width: min(270px, 86%); margin: 0 auto; }
  .qr2-amount b { font-size: 26px; }
  .qr2-status { flex-wrap: wrap; }
  .qr2-status .btn { margin-left: 0; width: 100%; }
}