/* ===== Trang Nạp Thẻ ===== */
/* Dùng lại .hero + .account (khung kem + sidebar + panel nâu) từ account.css.
   File này chỉ định nghĩa khu nạp thẻ .topup bên trong panel. */

.topup {
  /* Khung nền kem bo góc viền cam (Rectangle 100) bao quanh nội dung nạp thẻ */
  background: #fdf6e3;
  border: 1px solid #e0b878;
  border-radius: 0;
  margin: 0;
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
}

/* Pane nội dung theo tab: xếp dọc, cách đều các phần (form / nút / lưu ý) */
.topup__pane {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.2vw, 26px);
}
/* Ẩn pane không active (display:flex ở trên đè mất [hidden] mặc định) */
.topup__pane[hidden] { display: none; }

/* ===== 2 tab: Chuyển khoản / Nạp thẻ (pill toggle) ===== */
/* Thanh nâu bo tròn (Rectangle 91) bao 2 tab; tab active là viên nhộng trắng
   (Rectangle 92) chữ nâu đậm, tab còn lại nền nâu chữ trắng. */
.topup__tabs {
  display: inline-flex;
  background: #4a2410;
  border-radius: 999px;
  padding: 5px;
}
.topup-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: clamp(10px, 1.4vw, 14px) clamp(24px, 3.5vw, 44px);
  border-radius: 999px;
  transition: background 0.15s ease;
}
/* Chữ tab bằng ảnh: ...__on (nâu) khi active, ...__off (trắng) khi thường */
.topup-tab img {
  display: block;
  height: clamp(15px, 1.7vw, 18px);
  width: auto;
}
.topup-tab .topup-tab__on { display: none; }
.topup-tab.is-active {
  background: #fff;
}
.topup-tab.is-active .topup-tab__on { display: block; }
.topup-tab.is-active .topup-tab__off { display: none; }

/* ===== Mã nạp bạc ===== */
.topup__code {
  margin: 0;
  color: #4a2410;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
}
.topup__code-value { color: #e0413a; }

/* ===== Ô nhập số tiền ===== */
.topup__form {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  width: 100%;
  max-width: 620px;
}
.topup__label {
  color: #4a2410;
  font-size: clamp(14px, 1.5vw, 17px);
  white-space: nowrap;
}
.topup__input {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 6px;
  background: #2a1a0f;
  padding: 0 18px;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 16px);
}
.topup__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.topup__input:focus { outline: 2px solid #c98a4a; }

/* ===== Nút CHUYỂN KHOẢN ===== */
.topup__submit {
  border: 0;
  cursor: pointer;
  background: #2a1a0f;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 14px clamp(24px, 3vw, 40px);
  border-radius: 6px;
  transition: filter 0.15s ease;
}
.topup__submit:hover { filter: brightness(1.2); }
/* Biến thể nút bằng ảnh (bỏ nền/padding, chỉ hiện ảnh) */
.topup__submit--img {
  background: none;
  padding: 0;
  border-radius: 0;
}
.topup__submit--img img {
  display: block;
  width: clamp(200px, 26vw, 310px);
  height: auto;
}

/* ===== Hộp lưu ý ===== */
.topup__note {
  width: 100%;
  background: #fdeec2;
  border: 1px solid #d8a860;
  border-radius: 10px;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.5vw, 28px);
  color: #4a3016;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.55;
}
.topup__note p { margin: 0; font-weight: 600; }
.topup__note--red { color: #d8322a; }
/* Khoảng cách giữa các đoạn (mô phỏng dòng trống trong text gốc) */
.topup__note--gap { margin-top: 14px; }
.topup__note a { color: #b8332a; font-weight: 700; }

/* ===== Popup QR thanh toán ===== */
/* Dùng lại overlay .login-modal; khung giấy qr-frame.png (tỉ lệ 705:919). */
.qr-modal[hidden] { display: none; }
.qr-modal__panel {
  position: relative;
  width: 420px;
  max-width: 92vw;
  aspect-ratio: 705 / 919;
}
.qr-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
}
/* Nội dung nằm trong lòng khung giấy */
.qr-modal__content {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 9%;
  right: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.5%, 20px);
  text-align: center;
}
.qr-modal__title {
  margin: 0;
  color: #4a2410;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.qr-modal__img {
  width: 62%;
  height: auto;
  display: block;
}
/* Khối thông tin: mỗi dòng label + value căn giữa */
.qr-modal__info {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qr-modal__info > div {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.qr-modal__info dt,
.qr-modal__info dd {
  margin: 0;
  color: #3a2416;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700;
}
.qr-modal .login-modal__close {
  position: absolute;
  top: 4%;
  right: 6%;
  z-index: 2;
}

/* ===== Popup Nạp thẻ thành công ===== */
/* Dùng lại overlay .login-modal; khung cuộn success-scroll.png (948:512). */
.card-modal[hidden] { display: none; }
.card-modal__panel {
  position: relative;
  width: 560px;
  max-width: 92vw;
  aspect-ratio: 948 / 512;
}
.card-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
}
.card-modal .login-modal__close {
  position: absolute;
  top: 6%;
  right: 8%;
  z-index: 2;
}
/* Nội dung nằm trong lòng khung cuộn */
.card-modal__content {
  position: absolute;
  inset: 12% 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2%, 16px);
  text-align: center;
}
.card-modal__title {
  margin: 0;
  color: #4a2410;
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.card-modal__check {
  width: clamp(56px, 12%, 84px);
  height: auto;
  display: block;
}
.card-modal__text {
  margin: 0;
  color: #4a2410;
  font-size: clamp(13px, 1.7vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}

/* ===== Mobile ===== */
@media (max-width: 760px) {
  .topup__form { flex-direction: column; align-items: stretch; }
  .topup__label { text-align: left; }
  .topup__input { flex: none; } /* cột dọc: tránh flex:1 làm ô bị ép dẹt */
}