/* =========================================================
   MODAL-MOBILE-FIX.CSS — YẾU TIẾNG TRUNG
   Fix toàn bộ modal/popup hiển thị trên mọi màn hình.
   CÁCH DÙNG: Thêm vào index.html SAU tất cả các file CSS khác:
   <link rel="stylesheet" href="css/modal-mobile-fix.css">
   ========================================================= */

/* =========================================================
   PHẦN 1 — BASE MODAL: Chống tràn, chống vỡ layout
   Áp dụng cho mọi kích thước màn hình
   ========================================================= */

/* Tất cả overlay đảm bảo scroll được khi nội dung dài */
.modal-overlay,
.all-news-overlay,
.news-popup-overlay,
.detail-modal-overlay,
.exit-popup-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Scroll mượt trên iOS */
}

/* auth-box không bao giờ rộng hơn viewport */
.auth-box {
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* =========================================================
   PHẦN 2 — PROFILE MODAL
   Fix: profile-left bị chiếm 30% cứng, layout đổ vỡ trên mobile
   ========================================================= */

/* Desktop (mặc định): 2 cột ngang */
.profile-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 25px;
  width: 100%;
  box-sizing: border-box;
}

.profile-left {
  width: 30% !important;
  min-width: 160px;
  flex-shrink: 0;
}

.profile-right {
  flex: 1;
  min-width: 0; /* Ngăn flex item tràn ra ngoài */
  overflow: hidden;
}

/* Avatar không bao giờ to hơn container */
#avatar-container,
.pro-avatar-box {
  box-sizing: border-box;
  max-width: 100%;
}

/* EXP bar không tràn ra ngoài */
.exp-bar-container {
  max-width: 100%;
  overflow: hidden;
}

/* =========================================================
   PHẦN 3 — SHOP MODAL
   Fix: tabs tràn, grid không xuống dòng
   ========================================================= */

.shop-box {
  box-sizing: border-box;
  overflow: hidden;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap; /* Tabs tự xuống dòng thay vì tràn */
}

.shop-grid-container {
  box-sizing: border-box;
}

/* =========================================================
   PHẦN 4 — RANK / LEADERBOARD MODAL
   Fix: bảng xếp hạng tràn ngang
   ========================================================= */

.rank-box {
  box-sizing: border-box;
}

.leaderboard-container {
  overflow-x: hidden;
}

.leaderboard-item {
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Rank list trong Guide modal */
.rank-row {
  flex-wrap: wrap;
  gap: 4px;
}

/* =========================================================
   PHẦN 5 — GUIDE MODAL (BÍ KÍP TU LUYỆN)
   Fix: chiều cao quá lớn trên màn nhỏ
   ========================================================= */

.xianxia-guide-wrapper {
  box-sizing: border-box;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guide-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   PHẦN 6 — QUIZ MODAL
   Fix: modal quá to, nội dung tràn
   ========================================================= */

#quizModal .auth-box {
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   PHẦN 7 — WHEEL MODAL (VÒNG QUAY)
   Fix: wheel bị cắt trên màn nhỏ
   ========================================================= */

.wheel-popup {
  box-sizing: border-box;
  overflow: hidden;
  max-width: 100vw;
}

.wheel-container {
  max-width: 100%;
  overflow: hidden;
}

/* =========================================================
   === RESPONSIVE OVERRIDES ===
   Từ đây trở xuống là các override theo breakpoint
   ========================================================= */

/* =========================================================
   TABLET (768px – 991px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  /* Profile: vẫn 2 cột nhưng left rộng hơn */
  .profile-left {
    width: 35% !important;
  }

  /* Auth box nhỏ lại */
  .auth-box {
    padding: 28px 22px !important;
  }

  /* Shop modal */
  .shop-box {
    min-height: auto !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Rank modal */
  .rank-box {
    min-height: auto !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Guide modal */
  .guide-scroll-area {
    max-height: 55vh;
  }
}

/* =========================================================
   MOBILE (< 768px) — Tất cả modal chuyển sang 1 cột dọc
   ========================================================= */
@media (max-width: 767px) {
  /* ----- 7.1 OVERLAY: Full screen, scroll dọc ----- */
  .modal-overlay,
  .all-news-overlay,
  .news-popup-overlay,
  .detail-modal-overlay,
  .exit-popup-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* auth-box bọc ngoài: full width, sát cạnh */
  .auth-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    padding: 20px 16px !important;
    margin: 0 !important;
  }

  /* Close button: đủ lớn để bấm */
  .close-modal {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 26px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }

  /* [CLEANUP 2026-04-26] #profileModal rules removed — modal đã bị xóa.
     .profile-container / .profile-left / .profile-right được giữ lại (có thể dùng cho ho-so.html). */

  /* Profile container: xếp dọc, full width */
  .profile-container {
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 0 0 20px 20px !important;
    padding: 0 !important;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Profile LEFT: full width, bỏ viền phải */
  .profile-left {
    width: 100% !important;
    min-width: unset !important;
    border-right: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 24px 20px 20px !important;
    text-align: center !important;
  }

  /* [CLEANUP 2026-04-26] #profileModal label.avatar-wrapper removed — modal đã bị xóa. */


  /* Equip slider: giới hạn chiều rộng */
  #pro-equip-slider-wrapper {
    width: 100% !important;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Profile RIGHT: full width */
  .profile-right {
    width: 100% !important;
    padding: 20px 16px !important;
  }

  /* Tab bar profile */
  .profile-tabs {
    gap: 5px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  /* Inventory grid: 2 cột */
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-height: 45vh !important;
  }

  /* Nút Tìm Bạn / Tin Nhắn */
  .profile-left > div:has(button) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  /* ----- 7.3 SHOP MODAL ----- */
  .shop-box {
    min-height: auto !important;
    max-height: 95vh;
    border-radius: 0 0 20px 20px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Shop tabs: cuộn ngang thay vì wrap */
  .shop-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 4px !important;
    /* Ẩn scrollbar nhưng vẫn scroll được */
    scrollbar-width: none;
  }
  .shop-tabs::-webkit-scrollbar {
    display: none;
  }

  .shop-tab-btn {
    flex-shrink: 0; /* Không bị co lại */
    font-size: 0.78rem;
    padding: 7px 10px;
    white-space: nowrap;
  }

  /* Shop grid: 2 cột trên mobile */
  .shop-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ----- 7.4 RANK MODAL ----- */
  .rank-box {
    min-height: auto !important;
    max-height: 95vh;
    border-radius: 0 0 20px 20px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-container {
    max-height: 65vh !important;
  }

  /* Leaderboard item: font nhỏ hơn */
  .leaderboard-item {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  /* ----- 7.5 GUIDE MODAL (BÍ KÍP) ----- */
  #guideModal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  #guideModal > div {
    max-width: 100% !important;
    width: 100% !important;
  }

  .xianxia-guide-wrapper {
    max-width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    max-height: 100vh;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
  }

  .guide-title {
    font-size: 2rem;
    margin-top: 20px;
  }

  .guide-scroll-area {
    max-height: 75vh;
    padding: 0 16px 20px;
  }

  /* Rank rows trong guide: font nhỏ hơn */
  .rank-row {
    font-size: 0.8rem;
    padding: 10px 12px;
  }
  .rank-name {
    width: 38%;
  }
  .rank-exp {
    width: 28%;
    font-size: 0.75rem;
  }
  .rank-hsk {
    width: 34%;
    font-size: 0.75rem;
  }

  /* ----- 7.6 QUIZ MODAL ----- */
  #quizModal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  #quizModal .auth-box {
    border-radius: 0 0 20px 20px !important;
    max-height: 100vh;
    padding: 16px 14px !important;
  }

  /* Quiz start screen */
  #quiz-start-screen {
    padding: 30px 16px !important;
  }

  #quiz-start-screen h2 {
    font-size: 1.5rem !important;
  }

  #quiz-start-screen p {
    font-size: 0.95rem !important;
  }

  /* Icon grid trong quiz start */
  #quiz-start-screen > div:nth-child(4) {
    gap: 15px !important;
    flex-wrap: wrap;
  }

  /* Quiz scroll area */
  #quiz-scroll-area {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Quiz header */
  .quiz-pro-header {
    padding: 12px 16px !important;
    font-size: 0.9rem;
  }

  /* ----- 7.7 HISTORY MODAL (Nhật Ký Tu Luyện) ----- */
  #historyModal .auth-box {
    max-width: 100% !important;
  }

  #history-list {
    max-height: 55vh !important;
  }

  /* ----- 7.8 INBOX MODAL (Truyền Âm Phù) ----- */
  #inboxModal .auth-box {
    max-width: 100% !important;
  }

  #inbox-list {
    max-height: 55vh !important;
  }

  /* ----- 7.9 SOCIAL MODAL (Tìm Đạo Hữu) ----- */
  #socialModal .auth-box {
    max-width: 100% !important;
  }

  /* ----- 7.10 LOGIN MODAL ----- */
  #loginModal .auth-box {
    max-width: 100% !important;
  }

  /* Form đăng ký: date + gender xếp dọc */
  #loginModal #reg-dob,
  #loginModal #reg-gender {
    min-width: unset;
  }

  /* ----- 7.11 WHEEL MODAL (Vòng Quay) ----- */
  .wheel-popup {
    padding: 15px !important;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wheel-container {
    transform: scale(0.85);
    transform-origin: top center;
  }

  /* ----- 7.12 EXIT POPUP ----- */
  .exit-popup-overlay {
    padding: 16px !important;
  }
}

/* =========================================================
   MOBILE NHỎ (< 480px) — Tinh chỉnh thêm
   ========================================================= */
@media (max-width: 479px) {
  /* Auth box padding còn ít hơn */
  .auth-box {
    padding: 18px 14px !important;
  }

  /* [CLEANUP 2026-04-26] #profileModal label.avatar-wrapper (<480px) removed — modal đã bị xóa. */

  /* Inventory grid: vẫn 2 cột nhưng nhỏ hơn */
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Shop: 1 cột trên màn siêu nhỏ */
  .shop-grid-container {
    grid-template-columns: 1fr !important;
  }

  /* Rank table nhỏ hơn */
  .rank-row {
    font-size: 0.75rem;
    padding: 9px 10px;
  }

  /* Wheel thu nhỏ hơn */
  .wheel-container {
    transform: scale(0.72);
    transform-origin: top center;
  }

  /* Guide title */
  .guide-title {
    font-size: 1.6rem;
  }

  /* Quiz start */
  #quiz-start-screen h2 {
    font-size: 1.3rem !important;
  }

  /* Profile name chữ nhỏ */
  #pro-name {
    font-size: 1.1rem !important;
  }
}