/* =========================================================
   Làng Ẩn Dật - BẢN 8D.2 MOBILE REAL FIX
   Fix lỗi khi thu nhỏ như điện thoại:
   - Card không chồng nhau
   - Header không chiếm quá nhiều
   - Admin/Profile/Shop thành 1 cột thật
   - Nội dung scroll đúng bên trong
   Chỉ CSS, không đổi logic.
   ========================================================= */

/* Chỉ áp dụng mobile/tablet nhỏ */
@media(max-width:760px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .page-shell{
    position:fixed!important;
    inset:0!important;
    overflow:hidden!important;
  }

  .page{
    position:absolute!important;
    inset:0!important;
    overflow:hidden!important;
  }

  .page.active{
    display:block!important;
  }

  .close-page{
    width:100%!important;
    min-height:40px!important;
    position:static!important;
    transform:none!important;
  }

  /* Form 2 cột về 1 cột */
  .bc-form-grid,
  .scrim-form-grid,
  .profile-form.two,
  .admin-edit-grid,
  .admin-modal-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:42px!important;
  }

  textarea{
    min-height:88px!important;
  }

  /* ADMIN mobile: chống card chồng */
  .admin-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .admin-grid > .admin-card{
    grid-column:1/-1!important;
    margin:0!important;
  }

  .admin-user-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
  }

  .admin-user-row > *{
    grid-column:1/-1!important;
    width:100%!important;
    white-space:normal!important;
  }

  .admin-row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:8px!important;
  }

  .admin-row-actions button{
    width:100%!important;
  }

  .admin-table-head,
  .admin-list-head{
    display:none!important;
  }

  /* PROFILE mobile: avatar + stats không đè form */
  .profile-avatar-box{
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
  }

  .profile-avatar,
  #pfAvatarPreview{
    width:86px!important;
    height:86px!important;
    border-radius:18px!important;
  }

  .profile-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .profile-avatar-edit{
    display:grid!important;
    gap:10px!important;
  }

  .profile-avatar-preview-wrap{
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:10px!important;
  }

  .profile-avatar-actions,
  .profile-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .profile-avatar-actions button,
  .profile-actions button,
  .profile-btn,
  label.profile-btn{
    width:100%!important;
  }

  /* SHOP mobile: card quà không chồng lịch sử */
  .shop-items{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .shop-item,
  .gift-card{
    width:100%!important;
    max-width:100%!important;
  }

  .shop-item img,
  .gift-card img{
    height:150px!important;
    object-fit:contain!important;
  }

  .shop-actions,
  .shop-avatar-actions,
  .shop-image-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .shop-actions button,
  .shop-btn,
  label.shop-btn{
    width:100%!important;
  }

  /* BANG CHIẾN mobile */
  .bc-row,
  .bc-x-row{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
  }

  .bc-row > *,
  .bc-x-row > *{
    min-width:0!important;
  }

  .bc-phai,
  .bc-team,
  .bc-status,
  .bc-x{
    grid-column:2/-1!important;
    width:100%!important;
    justify-content:flex-start!important;
  }

  .bc-actions,
  .scrim-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .bc-actions button,
  .scrim-actions button{
    width:100%!important;
  }

  #bcSectCounts,
  #bcRegFilters,
  #bcXFilters{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }

  /* BXH mobile */
  .rank-panel{
    margin:0!important;
  }

  .rank-panel-list{
    min-height:180px!important;
    max-height:none!important;
  }

  .rank-card{
    display:grid!important;
    grid-template-columns:64px 42px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .rank-value{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* Menu nút hamburger không che tiêu đề quá nhiều */
  .mobile-menu-btn{
    top:8px!important;
    left:8px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border-radius:14px!important;
    z-index:260!important;
  }

  .mobile-menu-btn span,
  .mobile-menu-btn b{
    display:none!important;
  }
}

/* Siêu nhỏ 380px trở xuống */
@media(max-width:380px){
  .page-head h1,
  .scrim-head h1,
  .admin-head h1,
  .shop-head h1,
  .profile-head h1,
  .ranking-head h1{
    font-size:22px!important;
    padding-left:34px!important;
  }

  .profile-avatar-box{
    grid-template-columns:72px minmax(0,1fr)!important;
  }

  .profile-avatar,
  #pfAvatarPreview{
    width:72px!important;
    height:72px!important;
  }

  .admin-row-actions{
    grid-template-columns:1fr!important;
  }

  .rank-card{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }

  .rank-avatar,
  .rank-card img{
    margin:0 auto!important;
  }
}