/* ===== Bổ sung cho các trang con portal =====
   Những thứ design TL09 chưa vẽ nhưng dữ liệu thật cần: câu lỗi form, trạng
   thái đang tải / rỗng / lỗi, popup quên mật khẩu, popup bắt cập nhật SĐT,
   pane chuyển khoản chưa mở, phân trang lịch sử nạp.

   Tách file riêng thay vì sửa CSS design: cập nhật bản design mới thì chép đè
   file của họ mà không mất phần này. */

/* Câu lỗi dưới form đăng nhập / đăng ký / quên mật khẩu (landing-auth.js ghi) */
.form-error {
  margin: 0;
  min-height: 1.2em;
  color: #c62828;
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 15px);
  text-align: center;
  line-height: 1.35;
}
.form-error--ok { color: #2e7d32; }

/* Link "Quên mật khẩu?" dưới nút đăng nhập */
.portal-forgot-link {
  color: #734A36;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Popup quên mật khẩu: 5 ô nên khung cao hơn popup đăng ký một chút */
#forgotModal .login-modal__form {
  width: 70%;
  margin-top: 1%;
  gap: clamp(3px, 0.6vh, 6px);
}
#forgotModal .login-field { grid-template-columns: 40% 1fr; }
#forgotModal .login-field label { white-space: nowrap; }
#forgotModal .login-field input { padding: clamp(4px, 0.8vh, 7px) 10px; }
.forgot-title {
  margin: 1% 0 0;
  color: #4a1c14;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 24px);
  text-align: center;
}
.forgot-sub {
  margin: 0.5% 0 0;
  color: #734A36;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  text-align: center;
}

/* ===== Trạng thái tải / rỗng / lỗi (dùng chung) ===== */
.portal-state {
  padding: 18px 12px;
  text-align: center;
  color: #7a5a34;
  font-weight: 600;
  font-size: clamp(13px, 1.3vw, 16px);
}
.portal-state--error { color: #c62828; }
.portal-state a { color: #b8332a; font-weight: 700; }
/* Bảng tin trang chủ: dòng trạng thái nằm trong <ul> */
.news-row--state { list-style: none; }

/* Khung xương khi đang tải: dải kem nhấp nháy thay vì bảng trắng */
.portal-skeleton {
  height: 1.1em;
  margin: 10px 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(120, 80, 40, 0.12), rgba(120, 80, 40, 0.24), rgba(120, 80, 40, 0.12));
  background-size: 200% 100%;
  animation: portal-shimmer 1.2s ease-in-out infinite;
}
@keyframes portal-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-skeleton { animation: none; }
}

/* Carousel chỉ có ảnh mặc định: ẩn mũi tên + chấm (không có gì để chuyển) */
.carousel--single .carousel__arrow,
.carousel--single .carousel__dots { visibility: hidden; }

.newslist__pager[hidden] { display: none; }

/* Nội dung bài viết từ CMS: ảnh không tràn khung giấy */
.article-body img { max-width: 100%; height: auto; }
.article-body h2, .article-body h3 { margin: 14px 0 8px; color: #4a1c14; }
.article-body ul, .article-body ol { margin: 0 0 8px 22px; }

/* ===== Trang tài khoản ===== */
.account-form__error {
  margin: 4px 0 0;
  min-height: 1.2em;
  color: #e0413a;
  font-weight: 700;
  text-align: center;
}
.account-login-needed {
  padding: 40px 16px;
  text-align: center;
  color: #f3e3c3;
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 18px);
}
.account-login-needed button {
  margin-top: 14px;
  padding: 8px 22px;
  border: 0;
  border-radius: 6px;
  background: #c98a4a;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Popup xác minh: ô thừa của luồng ít ô thì ẩn hẳn, không chiếm chỗ */
.verify-field[hidden] { display: none; }
.verify-modal__submit:disabled,
.unlock__submit:disabled,
.topup__submit:disabled,
.login-modal__submit:disabled,
.lm__submit:disabled { opacity: 0.6; cursor: wait; }

/* Popup bắt cập nhật SĐT: không có nút đóng, thêm hàng nút phụ */
.verify-modal__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: clamp(12px, 1.2vw, 14px);
}
.verify-modal__foot a { color: #b8332a; font-weight: 700; }
.verify-modal__logout {
  border: 0;
  background: none;
  color: #6b4a1f;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.verify-modal__note {
  margin: 0;
  text-align: center;
  color: #6b4a1f;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 600;
}

/* ===== Nạp thẻ ===== */
.topup__code[hidden],
.topup__bank-info[hidden],
.topup__promo[hidden] { display: none; }
.topup__closed {
  width: 100%;
  padding: 28px 16px;
  border-radius: 10px;
  background: #fdeec2;
  border: 1px solid #d8a860;
  color: #4a2410;
  text-align: center;
  font-weight: 700;
}
.topup__error { margin: 0; text-align: center; color: #e0413a; font-weight: 700; min-height: 1.2em; }
.card-modal__amount { margin-top: 6px; font-weight: 800; color: #4a1c14; }

/* ===== Lịch sử nạp ===== */
.history__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: #4a2410;
  font-weight: 700;
}
.history__pager[hidden] { display: none; }
.history__pager button {
  padding: 6px 14px;
  border: 1px solid #9a6a44;
  border-radius: 6px;
  background: #fff;
  color: #4a2410;
  font-weight: 700;
  cursor: pointer;
}
.history__pager button:disabled { opacity: 0.45; cursor: default; }
.history__status--pending { color: #c98a1a; }

/* ===== Mở khóa ===== */
.unlock__message { margin: 0; min-height: 1.2em; text-align: center; font-weight: 700; color: #e0413a; }

/* ===== Mobile: popup xác minh cần cao hơn khung ảnh để chứa 3 ô ===== */
@media (max-width: 760px) {
  .verify-modal__panel {
    aspect-ratio: auto;
    min-height: 420px;
  }
  .verify-modal__content { left: 7%; right: 7%; }
  .verify-field { grid-template-columns: 1fr; gap: 4px; }
}

/* Popup quên mật khẩu trên mobile dùng panel .lm như đăng nhập */
@media (max-width: 768px) {
  #forgotModal .login-modal__panel,
  #forgotModal .login-modal__gifts { display: none; }
  #forgotModal .lm { display: block; width: 100%; }
  /* 5 ô + tiêu đề trong khung cuộn tỉ lệ gốc (ảnh SVG không giãn được):
     thu nhỏ chữ + ô cho vừa. Đo ở 390px ngày 26/09. */
  /* Ảnh cuộn trong suốt ~20% phía trên: nội dung bắt đầu từ mép giấy. */
  #forgotModal .lm__content { top: 21%; bottom: 5%; }
  #forgotModal .lm__close { margin-top: 0; top: 17%; }
  #forgotModal .forgot-title { font-size: 15px; margin: 0; }
  #forgotModal .lm__form { margin-top: 1%; }
  #forgotModal .lm__hint { margin-top: 1%; font-size: 13px; }
  #forgotModal .lm__submit { width: 110px; margin-top: 0; }
  #forgotModal .lm__input { margin-bottom: 2px; padding: 4px 10px; font-size: 14px; }
  #forgotModal .lm__label { margin-bottom: 0; font-size: 12px; }
}

/* Nút gửi popup quên mật khẩu: ảnh "Cập Nhật" thay vì "Đăng Nhập" */
.login-modal__submit.forgot-submit,
.lm__submit.forgot-submit {
  background: url("../assets/article/verify-btn.png?v=ccf63a17") center/contain no-repeat;
  aspect-ratio: 370 / 108;
}
.portal-skeleton--title { display: block; width: 60%; height: 1.4em; }

/* Popup nhiều ô hơn mẫu design (design 948:512 cho 3 ô, không có dòng ghi chú
   + hàng nút phụ): kéo khung cao ra, ảnh cuộn giãn theo (width/height 100%).
   Không nới là tiêu đề + hàng "Đăng xuất" lòi ra ngoài khung — đo 26/09. */
#requirePhoneModal .verify-modal__panel { aspect-ratio: 948 / 700; }
#verifyModal .verify-modal__panel { aspect-ratio: 948 / 600; }
.verify-modal__content { justify-content: center; }

/* Nội dung trang con cao ít nhất bằng màn hình.
   scroll-to-content.js tự cuộn xuống `main.article`; nội dung ngắn (tab tin
   rỗng, form tài khoản) thì trang hết chỗ cuộn trước khi tới nơi, hero còn
   chiếm nửa trên màn và người chơi vẫn tưởng chưa chuyển trang. */
main.article {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.article > .article-footer { margin-top: auto; }