/* Bank transfer sheet (js/pay.js): VietQR on the left, transfer details on the right, live payment status. */
.pay-wrap { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 12px; background: rgba(12, 18, 34, 0.62); backdrop-filter: blur(6px); animation: payIn 0.2s both; }
@keyframes payIn { from { opacity: 0; } }
.pay-box { position: relative; display: flex; gap: calc(var(--u) * 3); align-items: center; width: min(calc(var(--fw) - 24px), 760px); max-height: calc(var(--fh) - 24px); overflow: auto;
  padding: calc(var(--u) * 3.2); border-radius: 22px; background: #fff; color: #1d2540; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); font-family: inherit; }
.pay-x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef2fa; color: #4a5578; font-size: 24px; line-height: 1; cursor: pointer; }
.pay-qr { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; }
.pay-qr img { width: min(calc(var(--fh) * 0.62), 300px); aspect-ratio: 1 / 1.08; object-fit: contain; border-radius: 14px; background: #f5f7fc; }
.pay-qr small { color: #6b7596; font-size: 13px; }
.pay-info { flex: 1 1 auto; min-width: 0; }
.pay-title { display: block; font-size: 20px; margin-bottom: 8px; padding-right: 40px; }
.pay-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15px; align-items: center; }
.pay-info dt { color: #6b7596; }
.pay-info dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.pay-info dd button { flex: 0 0 auto; min-height: 30px; padding: 4px 10px; border: 1px solid #c9d3ea; border-radius: 8px; background: #f3f6fd; color: #2b62e3; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pay-amt { font-size: 22px; color: #d1302a; }
.pay-code { font-size: 20px; letter-spacing: 1px; color: #2b62e3; }
.pay-warn { margin: 10px 0 8px; padding: 8px 10px; border-radius: 10px; background: #fff6df; color: #8a5a00; font-size: 13px; }
.pay-state { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #1d2540; }
.pay-state em { font-style: normal; color: #6b7596; font-weight: 600; margin-left: 4px; }
.pay-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #c9d3ea; border-top-color: #2b62e3; animation: paySpin 0.9s linear infinite; }
@keyframes paySpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .pay-box { flex-direction: column; } }