/* =========================================================
   Làng Ẩn Dật - BẢN 8E.13 FINAL PACKAGE CSS
   Gom các CSS vá cuối sau 8E.9 để index gọn hơn.
   Không đổi logic.
   ========================================================= */



/* ===== MERGED FROM assets/css/global-color-refine.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.10 GLOBAL COLOR REFINE
   Tinh chỉnh màu tổng thể: sang hơn, trong hơn, đồng bộ hơn.
   Chỉ CSS, không đổi logic.
   ========================================================= */

:root{
  --gcr-gold:#ffe7a3;
  --gcr-gold-strong:#ffd66b;
  --gcr-gold-deep:#b98028;
  --gcr-text:#fff6df;
  --gcr-muted:rgba(255,246,223,.70);
  --gcr-line:rgba(255,226,150,.22);
  --gcr-line-soft:rgba(255,226,150,.14);
  --gcr-glass:rgba(8,8,13,.24);
  --gcr-glass-warm:rgba(42,26,18,.15);
  --gcr-card:rgba(8,8,13,.18);
  --gcr-card-warm:rgba(42,26,18,.10);
}

/* 1) Nền: sáng hơn nhẹ để nhìn ảnh nền rõ nhưng vẫn đọc được chữ */
.bg-overlay{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,226,150,.030),transparent 34%),
    linear-gradient(90deg,rgba(0,0,0,.13),rgba(0,0,0,.010),rgba(0,0,0,.13)),
    linear-gradient(180deg,rgba(0,0,0,.010),rgba(0,0,0,.075))!important;
}

.bg-slide{
  filter:saturate(1.16) contrast(1.04) brightness(1.07)!important;
}

/* Nút vàng chính */
.home-action.primary,
.menu-btn.active,
.submit-btn,
#bcSaveSchedule,
#pfSave,
#adCreateUser,
#adAddDonate,
.bc-filter-btn.active{
  background:
    linear-gradient(180deg,#fff0b2 0%,#dbad45 54%,#ae7a27 100%)!important;
  color:#160e04!important;
  border-color:rgba(255,236,170,.68)!important;
  text-shadow:none!important;
}

/* Nút xanh */
#bcRegisterBtn,
#bcApprovePoint,
#adAddPoint,
.bc-success,
.admin-success,
.shop-success{
  background:linear-gradient(180deg,#45dfba,#1ba078)!important;
  color:#061510!important;
  border-color:rgba(125,255,220,.46)!important;
}

/* 7) Input/select: đồng bộ và dễ đọc */
input,
select,
textarea{
  background:rgba(4,4,8,.42)!important;
  color:var(--gcr-text)!important;
  border-color:rgba(255,226,150,.23)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(255,232,163,.55)!important;
  box-shadow:
    0 0 0 3px rgba(255,226,150,.09),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* 8) Badge/phái/point nhẹ hơn */
.identity-meta,
.identity-sect,
.profile-meta-pill,
.bc-team,
.bc-status,
.bc-x,
.rank-value,
.bc-count,
.shop-price,
.gift-price,
.shop-item-price{
  background:rgba(0,0,0,.13)!important;
  border-color:rgba(255,226,150,.17)!important;
}

/* 9) Tên RGB: đẹp vừa, không lóa */
.identity-char-name,
#pfDisplayName,
.admin-user-row .identity-char-name,
.bc-name .identity-char-name,
.rank-name .identity-char-name,
.rank-name-only .identity-char-name,
.donate-row .identity-char-name,
.shop-request .identity-char-name,
.shop-history-row .identity-char-name{
  filter:brightness(1.06) saturate(1.12)!important;
  text-shadow:
    0 0 2px rgba(90,220,255,.30),
    0 0 5px rgba(150,90,255,.16)!important;
}

/* TOP VIP sáng hơn chút nhưng không chói */
.rank-card.vip-rank-card .identity-char-name,
.donate-row.vip-rank-card .identity-char-name,
.rank-card:has(.vip-rank) .identity-char-name,
.donate-row:has(.vip-rank) .identity-char-name{
  filter:brightness(1.11) saturate(1.20)!important;
  text-shadow:
    0 0 3px rgba(90,230,255,.40),
    0 0 7px rgba(160,93,255,.22)!important;
}

/* 11) Scrollbar đồng bộ */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,226,150,.42) rgba(0,0,0,.10);
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-track{
  background:rgba(0,0,0,.10);
  border-radius:999px;
}

*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,232,163,.50),rgba(185,137,74,.38));
  border-radius:999px;
}

/* Mobile: giữ tương phản cao hơn nhẹ */
@media(max-width:760px){
  .side-menu,
  .home-donate-card,
  .scrim-shell,
  .admin-shell,
  .shop-shell,
  .profile-shell,
  .ranking-shell{
    background:
      linear-gradient(135deg,rgba(8,8,13,.30),rgba(42,26,18,.19))!important;
  }

  .identity-char-name,
  #pfDisplayName{
    text-shadow:0 0 2px rgba(90,220,255,.25)!important;
    filter:brightness(1.03) saturate(1.08)!important;
  }
}


/* ===== MERGED FROM assets/css/final-mobile-pass.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.11 FINAL MOBILE PASS
   Rà mobile toàn web lần cuối.
   Chỉ CSS mobile/tablet, không đổi logic.
   ========================================================= */

/* Chống tràn ngang toàn web */
@media(max-width:900px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box!important;
  }

  img,
  video,
  canvas{
    max-width:100%!important;
  }
}

/* Tablet/mobile chung */
@media(max-width:760px){
  .scrim-page,
  .admin-page,
  .shop-page,
  .profile-page,
  .ranking-page{
    padding:7px!important;
  }

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

  input,
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:41px!important;
    font-size:16px!important; /* iPhone không tự zoom input */
  }

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

/* Trang chủ mobile */
@media(max-width:760px){
  .home-center{
    width:min(310px,calc(100vw - 28px))!important;
    gap:10px!important;
    top:35%!important;
  }

  .home-action{
    min-height:53px!important;
    font-size:15px!important;
    border-radius:17px!important;
  }

  .home-donate-card{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    max-height:42vh!important;
    padding:12px!important;
    border-radius:18px!important;
    overflow:auto!important;
  }

  .donate-main{
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:9px!important;
  }

  .qr-img{
    width:82px!important;
    height:82px!important;
  }

  .donate-row{
    min-height:34px!important;
    padding:7px 9px!important;
    gap:7px!important;
  }
}

/* Bang Chiến mobile */
@media(max-width:760px){
  .bc-row,
  .bc-x-row{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
  }

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

  .bc-name{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

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

  #bcSectCounts,
  #bcRegFilters,
  #bcXFilters,
  .bc-filter-row,
  .bc-chip-row{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  .bc-filter-btn,
  .bc-sect-chip{
    min-height:30px!important;
    font-size:9px!important;
  }

  #bcRegisterBtn{
    width:min(190px,78%)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Admin mobile */
@media(max-width:760px){
  .admin-table-head,
  .admin-list-head{
    display:none!important;
  }

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

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

  .admin-row-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .admin-row-actions button{
    min-height:36px!important;
    font-size:9px!important;
  }
}

/* Shop mobile */
@media(max-width:760px){
  .shop-items{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

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

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

  .shop-history-row,
  .shop-request{
    overflow-wrap:anywhere!important;
  }
}

/* Profile mobile */
@media(max-width:760px){
  .profile-avatar-box{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
  }

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

  #pfDisplayName{
    font-size:20px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  #pfDisplayMeta{
    gap:5px!important;
  }

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

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

  .profile-avatar-small,
  #pfAvatarEditPreview{
    width:64px!important;
    height:64px!important;
  }
}

@media(max-width:760px){
    display:grid!important;
    gap:11px!important;
  }
}

/* BXH mobile */
@media(max-width:760px){
  .rank-panel{
    margin:0!important;
    padding:12px!important;
  }

  .rank-panel-title{
    width:100%!important;
    min-height:36px!important;
    font-size:15px!important;
  }

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

  .rank-card{
    display:grid!important;
    grid-template-columns:60px 40px minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px!important;
    min-height:66px!important;
  }

  .rank-avatar,
  .rank-card img{
    width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }

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

  .rank-name,
  .rank-name-only{
    min-width:0!important;
  }

  .rank-name .identity-char-name,
  .rank-name-only .identity-char-name{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* Menu mobile giữ ổn, không sửa phức tạp */
@media(max-width:760px){
  .mobile-menu-toggle,
  .mobile-menu-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:13px!important;
    z-index:260!important;
  }

  .side-menu{
    max-width:78vw!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .menu-btn{
    min-height:36px!important;
  }
}

/* Màn rất nhỏ */
@media(max-width:390px){
  .scrim-page,
  .admin-page,
  .shop-page,
  .profile-page,
  .ranking-page{
    padding:5px!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;
  }

  .rank-badge{
    justify-self:center!important;
  }
}

/* Màn thấp */
@media(max-height:650px) and (max-width:760px){
  .home-center{
    top:32%!important;
  }

  .home-donate-card{
    max-height:40vh!important;
  }
}


/* ===== MERGED FROM assets/css/mobile-menu-final-fix.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.12 MOBILE MENU FINAL FIX
   Fix cột menu mobile:
   - Drawer không quá rộng.
   - Nút không cách xa nhau.
   - Logo gọn.
   - Login/account gọn, không chiếm đáy.
   Chỉ CSS.
   ========================================================= */

@media(max-width:760px){
  .side-menu{
    width:188px!important;
    max-width:74vw!important;
    height:auto!important;
    min-height:auto!important;
    max-height:calc(100vh - 10px)!important;
    top:5px!important;
    bottom:auto!important;
    left:0!important;
    padding:10px 9px!important;
    gap:7px!important;
    border-radius:0 19px 19px 0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .side-logo{
    width:108px!important;
    margin:0 auto 8px!important;
  }

  .side-logo img{
    width:108px!important;
    max-height:88px!important;
    object-fit:contain!important;
  }

  .side-links{
    display:grid!important;
    gap:7px!important;
    width:100%!important;
  }

  .menu-btn{
    width:100%!important;
    height:35px!important;
    min-height:35px!important;
    padding:0 10px!important;
    border-radius:11px!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.025em!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
  }

  /* Nếu menu chưa có icon thì không chừa khoảng icon */
  .menu-btn::before{
    display:none!important;
    content:none!important;
  }

  .side-user{
    margin-top:8px!important;
    width:100%!important;
  }

  .account-pill{
    width:100%!important;
    min-height:42px!important;
    height:42px!important;
    padding:5px 8px!important;
    border-radius:15px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    gap:8px!important;
    align-items:center!important;
  }

  .avatar-dot{
    display:none!important;
  }

  .account-name{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:9px!important;
    line-height:1!important;
    color:#fff0b0!important;
  }

  .power-dot{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    font-size:13px!important;
  }
}

/* Màn hình rất thấp: thu thêm, tránh chạm đáy */
@media(max-width:760px) and (max-height:700px){
  .side-menu{
    padding:8px 8px!important;
    gap:6px!important;
  }

  .side-logo{
    width:92px!important;
    margin-bottom:5px!important;
  }

  .side-logo img{
    width:92px!important;
    max-height:68px!important;
  }

  .side-links{
    gap:5px!important;
  }

  .menu-btn{
    height:31px!important;
    min-height:31px!important;
    font-size:8.5px!important;
    border-radius:10px!important;
  }

  .account-pill{
    min-height:38px!important;
    height:38px!important;
  }

  .power-dot{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
}

/* Siêu nhỏ */
@media(max-width:390px){
  .side-menu{
    width:176px!important;
    max-width:76vw!important;
  }

  .menu-btn{
    height:30px!important;
    min-height:30px!important;
  }
}