/* =========================================================
   POLISH LAYOUT
   Auto consolidated in Bản 8D.1
   ========================================================= */



/* ===== SOURCE: assets/css/frame-layout.css ===== */
/* =========================================================
   Làng Ẩn Dật - BẢN 8A FRAME LAYOUT CLEAN
   Làm lại bộ khung/layout tổng từ file v6 sạch.
   Chỉ chỉnh bố cục, khoảng cách, responsive.
   Không đổi logic, không đổi ID, không đổi event.
   ========================================================= */

:root{
  --frame-menu-w:178px;
  --frame-donate-w:292px;
  --frame-gap:18px;
  --frame-pad:18px;
  --frame-radius:20px;
  --frame-page-max:1440px;
  --frame-line:rgba(245,213,137,.24);
  --frame-bg:rgba(12,11,16,.62);
  --frame-bg-soft:rgba(20,16,18,.48);
  --frame-shadow:0 18px 54px rgba(0,0,0,.34);
}

/* Reset chống tràn ngang */
html,
body{
  width:100%;
  min-height:100%;
  overflow:hidden!important;
}

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

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

/* Page shell */
.page-shell{
  position:fixed!important;
  inset:0!important;
  z-index:10!important;
  overflow:hidden!important;
}

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

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

/* =========================================================
   TRANG CHỦ / MENU / TOP DONATE
   ========================================================= */

/* Menu PC */
@media(min-width:1101px){
  body[data-page="home"] .side-menu{
    display:flex!important;
    position:fixed!important;
    left:16px!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:var(--frame-menu-w)!important;
    height:auto!important;
    max-height:calc(100vh - 32px)!important;
    padding:12px 10px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    overflow:visible!important;
    border-radius:22px!important;
  }

  body:not([data-page="home"]) .side-menu{
    display:none!important;
  }

  body[data-page="home"] .home-donate-card{
    display:block!important;
    position:fixed!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:var(--frame-donate-w)!important;
    max-height:calc(100vh - 36px)!important;
    overflow:auto!important;
    padding:16px!important;
  }

  body:not([data-page="home"]) .home-donate-card{
    display:none!important;
  }

  body[data-page="home"] .home-center{
    position:absolute!important;
    left:calc(var(--frame-menu-w) + ((100vw - var(--frame-menu-w) - var(--frame-donate-w)) / 2))!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:min(460px,calc(100vw - var(--frame-menu-w) - var(--frame-donate-w) - 110px))!important;
    min-width:330px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:16px!important;
    align-items:center!important;
  }
}

/* Menu logo/nút user gọn */
.side-logo{
  width:104px!important;
  margin:0 auto 8px!important;
  flex:0 0 auto!important;
}

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

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

.menu-btn{
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 12px!important;
  font-size:10px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.side-user,
.user-pill,
.account-box{
  width:100%!important;
  min-width:0!important;
}

/* Trang chủ CTA */
.home-action{
  min-height:58px!important;
  padding:0 22px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Top Donate */
.donate-head,
.card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}

.donate-main{
  display:grid!important;
  grid-template-columns:108px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
}

.qr-img{
  width:108px!important;
  height:108px!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
}

.bank-info{
  min-width:0!important;
  word-break:break-word!important;
}

/* =========================================================
   BANG CHIẾN
   ========================================================= */
.scrim-grid{
  display:grid!important;
  grid-template-columns:minmax(300px,.92fr) minmax(0,1.35fr)!important;
  align-items:start!important;
}

.bc-form-grid,
.scrim-form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.bc-form-grid input,
.bc-form-grid select,
.bc-form-grid textarea,
.scrim-form-grid input,
.scrim-form-grid select,
.scrim-form-grid textarea{
  width:100%!important;
}

.bc-filter-row,
.scrim-filter-row,
.bc-chip-row,
#bcRegFilters,
#bcXFilters,
#bcSectCounts{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  align-items:center!important;
  margin-bottom:10px!important;
}

.bc-row,
.bc-x-row,
.bc-reg-row{
  min-width:0!important;
  align-items:center!important;
}

/* =========================================================
   ADMIN
   ========================================================= */
.admin-grid{
  display:grid!important;
  grid-template-columns:minmax(290px,.9fr) minmax(0,1.4fr)!important;
  align-items:start!important;
}

.admin-card form,
.admin-form,
.admin-tools{
  display:grid!important;
  gap:10px!important;
}

.admin-user-row,
.admin-row{
  min-width:0!important;
}

.admin-list,
.member-list,
.log-list{
  min-height:0!important;
  overflow:auto!important;
}

/* =========================================================
   ĐỔI QUÀ
   ========================================================= */
.shop-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr)!important;
  align-items:start!important;
}

.shop-items{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;
  gap:12px!important;
}

.shop-item,
.gift-card{
  min-width:0!important;
  overflow:hidden!important;
}

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

/* =========================================================
   PROFILE
   ========================================================= */
.profile-grid{
  display:grid!important;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.25fr)!important;
  align-items:start!important;
}

.profile-avatar-card,
.profile-summary,
.profile-form{
  min-width:0!important;
}

.profile-avatar,
#pfAvatarPreview{
  width:120px!important;
  height:120px!important;
  object-fit:cover!important;
}

/* =========================================================
   BXH
   ========================================================= */
.ranking-content,
.rank-two-content{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:stretch!important;
}

.rank-panel-list{
  min-height:360px!important;
  overflow:auto!important;
}

.rank-card{
  min-width:0!important;
  grid-template-columns:78px 44px minmax(0,1fr) minmax(108px,140px)!important;
  gap:10px!important;
}

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

.rank-name b,
.rank-name span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */
@media(max-width:1100px){
  body .side-menu{
    display:none!important;
  }

  .mobile-menu-btn{
    display:flex!important;
  }

  body.drawer-open .side-menu{
    display:flex!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(290px,86vw)!important;
    height:100vh!important;
    max-height:none!important;
    transform:none!important;
    padding:18px 14px!important;
    z-index:220!important;
    justify-content:flex-start!important;
    overflow:auto!important;
  }

  body .home-donate-card{
    position:absolute!important;
    right:12px!important;
    left:12px!important;
    bottom:12px!important;
    top:auto!important;
    transform:none!important;
    width:auto!important;
    max-height:34vh!important;
    padding:14px!important;
  }

  body .home-center{
    position:absolute!important;
    left:50%!important;
    top:42%!important;
    transform:translate(-50%,-50%)!important;
    width:min(420px,calc(100vw - 24px))!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }

  .close-page{
    width:100%!important;
  }

  .bc-form-grid,
  .scrim-form-grid{
    grid-template-columns:1fr!important;
  }

  .rank-panel-list{
    min-height:220px!important;
  }
}

@media(max-width:620px){
  :root{
    --frame-pad:8px;
  }

  body .home-center{
    top:38%!important;
    grid-template-columns:1fr!important;
  }

  .home-action{
    min-height:52px!important;
  }

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

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

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

  .shop-items{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .shop-item img,
  .gift-card img{
    height:118px!important;
  }

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

  .rank-value{
    grid-column:1/-1!important;
  }
}

@media(max-width:420px){
  .shop-items{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   BẢN 8A.1 - PROFILE FRAME FIX
   Tách User / ID / Phái; bỏ Avatar Link khỏi giao diện.
   ========================================================= */
#pfDisplayMeta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  align-items:center!important;
  margin-top:7px!important;
}

.profile-meta-pill{
  min-height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(245,213,137,.22)!important;
  background:rgba(0,0,0,.24)!important;
  color:#fff5d8!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.profile-meta-pill img{
  width:16px!important;
  height:16px!important;
  object-fit:contain!important;
  display:block!important;
}

.profile-meta-pill.profile-username,
.profile-meta-pill.profile-charid{
  color:#e9e0c8!important;
  text-shadow:none!important;
}

.profile-meta-pill.profile-sect{
  font-weight:950!important;
}

.profile-meta-pill.sect-long-ngam{color:#83dcff!important;border-color:rgba(131,220,255,.55)!important}
.profile-meta-pill.sect-cuu-linh{color:#c28cff!important;border-color:rgba(194,140,255,.58)!important}
.profile-meta-pill.sect-to-van{color:#ff7fcb!important;border-color:rgba(255,127,203,.62)!important}
.profile-meta-pill.sect-huyet-ha{color:#ff744f!important;border-color:rgba(255,116,79,.62)!important}
.profile-meta-pill.sect-thiet-y{color:#ffd36f!important;border-color:rgba(255,211,111,.58)!important}
.profile-meta-pill.sect-toai-mong{color:#63ffc7!important;border-color:rgba(99,255,199,.60)!important}
.profile-meta-pill.sect-than-tuong{color:#86a8ff!important;border-color:rgba(134,168,255,.60)!important}

#pfAvatar[type="hidden"]{
  display:none!important;
}

@media(max-width:620px){
  #pfDisplayMeta{
    gap:6px!important;
  }
  .profile-meta-pill{
    font-size:10px!important;
    padding:0 8px!important;
  }
}


/* =========================================================
   BẢN 8A.3 - REMOVE MUSIC UI
   Ẩn toàn bộ nút/khung nhạc nếu còn sót.
   ========================================================= */
[id*="music" i],
[class*="music" i],
[id*="audio" i],
[class*="audio" i],
[id*="bgm" i],
[class*="bgm" i],
[id*="sound" i],
[class*="sound" i]{
  display:none!important;
}

*{
  min-width:0;
}

input,
select,
textarea{
  min-height:38px;
}

/* Select native mở xấu là giới hạn trình duyệt, nhưng ô đóng phải đồng bộ */
select{
  appearance:auto;
  padding-right:30px!important;
}

/* Identity không lan vào badge TOP / số point */
.rank-badge,
.rank-value,
.bc-count,
.profile-stats b{
  -webkit-text-fill-color:initial!important;
  background-clip:initial!important;
  -webkit-background-clip:initial!important;
}

/* Bang Chiến: tránh filter và empty dính nhau */
#bcRegFilters,
#bcXFilters,
.bc-filter-row,
.bc-chip-row{
  margin-bottom:12px!important;
}

/* Admin/Bang Chiến rows nếu quá dài thì xuống dòng đẹp hơn ở tablet */
@media(max-width:1050px){
  .admin-user-row > *,
  .bc-row > *,
  .bc-x-row > *{
    overflow-wrap:anywhere;
  }
}

/* Mobile final */
@media(max-width:700px){
  .scrim-page,
  .admin-page,
  .shop-page,
  .profile-page,
  .ranking-page{
    padding:8px!important;
  }

  .identity-char-name{
    white-space:normal!important;
  }

  .identity-meta,
  .identity-sect,
  .profile-meta-pill{
    max-width:100%;
  }
}

/* Siêu nhỏ */
@media(max-width:380px){
  .home-center{
    width:calc(100vw - 20px)!important;
  }

  .donate-main{
    grid-template-columns:1fr!important;
  }

  .qr-img{
    margin:0 auto!important;
  }

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

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


/* =========================================================
   BẢN 8B.11 - FINAL SELECT/OPTION READABILITY
   Cải thiện ô select native, không đổi logic.
   ========================================================= */
option{
  background:#111018!important;
  color:#fff7df!important;
}

select option:checked{
  background:#d4a33c!important;
  color:#1b1004!important;
}

/* Chống badge identity làm row cao bất thường */
.identity-meta,
.identity-sect,
.profile-meta-pill{
  flex-shrink:1;
}



/* ===== SOURCE: assets/css/visual-bugfix-v8B12.css ===== */
/* =========================================================
   Làng Ẩn Dật - BẢN 8B.12 VISUAL BUGFIX
   Fix lỗi nhìn thấy từ ảnh test:
   - Admin card Cộng Donate bị chồng layout
   - Input number hiện spinner xấu
   - Bang Chiến row bị kéo giãn quá rộng
   Chỉ CSS, không đổi logic.
   ========================================================= */

/* 1) Tắt spinner input number mặc định gây xấu */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}

input[type="number"]{
  -moz-appearance:textfield!important;
  appearance:textfield!important;
}

/* 2) ADMIN: dọn lại layout top tools, không cho card chồng nhau */
.admin-content{
  overflow:auto!important;
}

.admin-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  align-items:start!important;
}

/* Dãy tool phía trên Admin: create / point / donate */
.admin-grid > .admin-card:nth-child(1),
.admin-grid > .admin-card:nth-child(2),
.admin-grid > .admin-card:nth-child(3){
  min-width:0!important;
}

/* Khi có 3 card đầu, ép thành hàng 3 cột bằng CSS grid an toàn */
@media(min-width:1180px){
  .admin-grid{
    grid-template-columns:1.02fr 1.34fr 1.05fr!important;
  }

  .admin-grid > .admin-card:nth-child(4),
  .admin-grid > .admin-card:nth-child(5),
  .admin-grid > .admin-card:nth-child(n+6){
    grid-column:1/-1!important;
  }
}

@media(min-width:820px) and (max-width:1179px){
  .admin-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .admin-grid > .admin-card:nth-child(3){
    grid-column:1/-1!important;
  }

  .admin-grid > .admin-card:nth-child(n+4){
    grid-column:1/-1!important;
  }
}

@media(max-width:819px){
  .admin-grid{
    grid-template-columns:1fr!important;
  }

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

/* Cấm donate card tràn lên trên create user */
.admin-card{
  contain:layout paint!important;
  overflow:hidden!important;
}

.admin-card h2,
.admin-card h3{
  line-height:1.12!important;
}

/* Form trong Admin không được tự kéo âm / absolute */
.admin-card form,
.admin-card .admin-form,
.admin-card .admin-tools{
  position:relative!important;
  width:100%!important;
}

/* Row danh sách admin: đưa nút thao tác về đúng cột, không nhảy xuống username */
.admin-user-row{
  grid-template-columns:minmax(110px,.75fr) minmax(150px,1fr) minmax(88px,.55fr) minmax(130px,.85fr) minmax(78px,.45fr) minmax(86px,.45fr) minmax(160px,.9fr)!important;
}

.admin-user-row > *{
  align-self:center!important;
}

.admin-row-actions,
.admin-user-row .admin-actions{
  justify-content:flex-end!important;
}

/* 3) BANG CHIẾN: làm row gọn lại, không kéo giãn quá thưa */
.bc-row,
.bc-x-row{
  align-items:center!important;
  gap:10px!important;
}

/* Desktop: tên / phái / team / trạng thái cân hơn */
@media(min-width:901px){
  .bc-row{
    grid-template-columns:34px minmax(160px,1.05fr) minmax(150px,.8fr) minmax(130px,.72fr) minmax(130px,.72fr)!important;
  }

  .bc-x-row{
    grid-template-columns:34px minmax(160px,1.05fr) minmax(150px,.8fr) minmax(130px,.7fr) minmax(110px,.58fr) minmax(120px,.62fr)!important;
  }

  .bc-phai .identity-sect,
  .bc-team,
  .bc-status,
  .bc-x{
    width:100%!important;
    justify-content:center!important;
  }
}

/* Trạng thái / team nhìn như pill nhưng không quá dài */
.bc-team,
.bc-status,
.bc-x{
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:0 10px!important;
  background:rgba(0,0,0,.18)!important;
  border:1px solid rgba(245,213,137,.14)!important;
  font-size:11px!important;
  font-weight:900!important;
}

/* Danh sách không tham gia: đỏ vừa phải, không chói */
.bc-x-row .bc-status,
.bc-status.absent{
  background:rgba(255,80,110,.15)!important;
  border-color:rgba(255,110,130,.26)!important;
  color:#ffb4c0!important;
}

.bc-x{
  color:#ff7fcb!important;
}

/* Filter phái không bị quá nhỏ / khó nhìn */
.bc-filter-btn,
.bc-sect-chip{
  line-height:1!important;
  white-space:nowrap!important;
}

.bc-filter-btn.active{
  transform:none!important;
}

/* 4) Identity badge không làm bảng bị đội / vỡ */
.identity-sect,
.identity-meta{
  min-width:0!important;
  max-width:100%!important;
}

.identity-sect span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* 5) Mobile final cho Admin + Bang Chiến */
@media(max-width:700px){
  .admin-user-row{
    grid-template-columns:1fr!important;
  }

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

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

  .bc-row,
  .bc-x-row{
    grid-template-columns:34px minmax(0,1fr)!important;
  }

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

@media(max-width:420px){
  .admin-row-actions,
  .admin-user-row .admin-actions{
    grid-template-columns:1fr!important;
  }
}



/* ===== SOURCE: assets/css/real-layout-fix-v8B13.css ===== */
/* =========================================================
   Làng Ẩn Dật - BẢN 8B.13 REAL LAYOUT FIX
   Fix theo ảnh test thật:
   - Admin row 8 cột, nút thao tác không rớt xuống username
   - BXH tiêu đề/cụm top căn giữa hơn
   - Bang Chiến bỏ pill đen ngoài phái, chỉ giữ badge phái
   Chỉ CSS, không đổi logic.
   ========================================================= */

/* ================= ADMIN TABLE REAL FIX ================= */

/* Header và row phải cùng 8 cột */
.admin-table-head,
.admin-list-head{
  display:grid!important;
  grid-template-columns:
    minmax(100px,.78fr)
    minmax(130px,1fr)
    minmax(80px,.55fr)
    minmax(125px,.85fr)
    minmax(70px,.45fr)
    minmax(80px,.48fr)
    minmax(78px,.48fr)
    minmax(150px,.82fr)!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 10px!important;
}

.admin-user-row{
  display:grid!important;
  grid-template-columns:
    minmax(100px,.78fr)
    minmax(130px,1fr)
    minmax(80px,.55fr)
    minmax(125px,.85fr)
    minmax(70px,.45fr)
    minmax(80px,.48fr)
    minmax(78px,.48fr)
    minmax(150px,.82fr)!important;
  align-items:center!important;
  gap:8px!important;
}

/* Bảo đảm đúng thứ tự 8 cột */
.admin-user-row > b:nth-child(1){grid-column:1!important}
.admin-user-row > span:nth-child(2){grid-column:2!important}
.admin-user-row > span:nth-child(3){grid-column:3!important}
.admin-user-row > span:nth-child(4){grid-column:4!important}
.admin-user-row > span:nth-child(5){grid-column:5!important}
.admin-user-row > span:nth-child(6){grid-column:6!important}
.admin-user-row > span:nth-child(7){grid-column:7!important}
.admin-user-row > .admin-row-actions{grid-column:8!important}

.admin-user-row > *{
  width:100%!important;
  min-width:0!important;
  align-self:center!important;
}

.admin-row-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  justify-content:stretch!important;
  align-items:center!important;
}

.admin-row-actions .admin-btn,
.admin-row-actions button{
  width:100%!important;
  min-width:0!important;
  min-height:34px!important;
  padding:0 8px!important;
  font-size:9px!important;
}

/* Username không ôm nút nữa */
.admin-user-row > b:first-child{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Tablet: gom thành card nhưng vẫn giữ nút dưới cùng */
@media(max-width:1050px){
  .admin-table-head,
  .admin-list-head{
    display:none!important;
  }

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

  .admin-user-row > b:nth-child(1),
  .admin-user-row > span:nth-child(2),
  .admin-user-row > span:nth-child(3),
  .admin-user-row > span:nth-child(4),
  .admin-user-row > span:nth-child(5),
  .admin-user-row > span:nth-child(6),
  .admin-user-row > span:nth-child(7){
    grid-column:auto!important;
  }

  .admin-user-row > .admin-row-actions{
    grid-column:1/-1!important;
  }
}

@media(max-width:620px){
  .admin-user-row{
    grid-template-columns:1fr!important;
  }

  .admin-user-row > *{
    grid-column:1/-1!important;
  }

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

/* ================= BANG CHIẾN PHÁI PILL REAL FIX ================= */

/* Không tạo 2 lớp pill đen ở cột phái */
.bc-phai{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  min-height:auto!important;
}

.bc-phai .identity-sect{
  width:max-content!important;
  max-width:100%!important;
  min-width:128px!important;
  justify-content:center!important;
  background:rgba(0,0,0,.18)!important;
}

/* Với filter/tổng phái vẫn giữ badge nhỏ gọn */
.bc-filter-btn .identity-sect,
.bc-sect-chip .identity-sect{
  min-width:0!important;
  width:auto!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}

/* Desktop row Bang Chiến bớt thưa, nhìn gọn như bảng */
@media(min-width:901px){
  .bc-row{
    grid-template-columns:34px minmax(170px,1fr) minmax(145px,.75fr) minmax(135px,.70fr) minmax(120px,.62fr)!important;
  }

  .bc-x-row{
    grid-template-columns:34px minmax(170px,1fr) minmax(145px,.75fr) minmax(135px,.68fr) minmax(110px,.55fr) minmax(115px,.58fr)!important;
  }

  .bc-phai,
  .bc-team,
  .bc-status,
  .bc-x{
    width:100%!important;
    justify-content:center!important;
  }
}

/* ================= BXH REAL FIX ================= */

/* Tiêu đề trang ở giữa thật, nút về menu nằm góc phải */
.ranking-head{
  position:relative!important;
  display:block!important;
  text-align:center!important;
  padding-right:150px!important;
  padding-left:150px!important;
}

.ranking-head > div{
  width:100%!important;
  text-align:center!important;
}

.ranking-head h1,
.ranking-head p{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.ranking-head .close-page,
.ranking-head button.close-page{
  position:absolute!important;
  right:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  min-width:108px!important;
}

/* Tiêu đề TOP nằm giữa khung, không lệch trái */
.rank-panel-title{
  width:min(280px,80%)!important;
  margin:0 auto 14px!important;
}

/* Card BXH cân hàng hơn */
.rank-card{
  grid-template-columns:78px 46px minmax(0,1fr) minmax(118px,145px)!important;
}

.rank-card .rank-value{
  justify-self:end!important;
  width:100%!important;
  max-width:145px!important;
}

@media(max-width:700px){
  .ranking-head{
    display:grid!important;
    padding:14px!important;
  }

  .ranking-head .close-page,
  .ranking-head button.close-page{
    position:static!important;
    transform:none!important;
    width:100%!important;
  }

  .rank-panel-title{
    width:100%!important;
  }
}