/* =========================================================
   Làng Ẩn Dật - BẢN 8E.9 CLEAN FINAL OVERRIDES
   Gom CSS vá lẻ + tối ưu tên RGB không lóa/tràn.
   File cuối cùng, không đổi logic.
   ========================================================= */



/* ===== MERGED FROM assets/css/final-design-system.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.1 FINAL DESIGN SYSTEM
   RPG Glass Luxury toàn web.
   File cuối cùng để đồng bộ mỹ thuật, không đổi logic.
   ========================================================= */

:root{
  --fd-gold:#ffe8a3;
  --fd-gold-strong:#ffd66b;
  --fd-gold-deep:#b98228;
  --fd-ink:#07070c;
  --fd-glass:rgba(8,8,13,.26);
  --fd-glass-2:rgba(39,25,18,.18);
  --fd-card:rgba(8,8,13,.22);
  --fd-card-2:rgba(42,27,19,.14);
  --fd-line:rgba(255,226,150,.22);
  --fd-line-soft:rgba(255,226,150,.13);
  --fd-text:#fff7df;
  --fd-muted:rgba(255,247,223,.66);
  --fd-radius-xl:24px;
  --fd-radius-lg:18px;
  --fd-radius-md:14px;
  --fd-shadow:0 18px 56px rgba(0,0,0,.25);
  --fd-blur:8px;
}

/* Nền nhìn rõ, không bị phủ đen nâu quá dày */
.bg-overlay{
  background:
    radial-gradient(circle at 50% 16%, rgba(255,232,163,.045), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.01), rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(0,0,0,.012), rgba(0,0,0,.075))!important;
}

.bg-slide{
  filter:saturate(1.18) contrast(1.05) brightness(1.08)!important;
}

/* Inputs / selects */
input,
select,
textarea{
  background:rgba(3,4,8,.40)!important;
  color:var(--fd-text)!important;
  border:1px solid rgba(255,226,150,.22)!important;
  border-radius:var(--fd-radius-md)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

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

option{
  background:#111018!important;
  color:#fff7df!important;
}

/* Success jade */
#bcRegisterBtn,
#bcApprovePoint,
#adAddPoint,
.bc-success,
.admin-success,
.shop-success{
  background:linear-gradient(180deg,#49e4bd,#1da97d)!important;
  color:#061510!important;
  border-color:rgba(125,255,220,.54)!important;
}

/* Badge/pill */
.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,.18)!important;
  box-shadow:none!important;
}

/* Phái giữ màu riêng */
.identity-sect.sect-long-ngam{color:#83dcff!important}
.identity-sect.sect-cuu-linh{color:#c28cff!important}
.identity-sect.sect-to-van{color:#ff7fcb!important}
.identity-sect.sect-huyet-ha{color:#ff744f!important}
.identity-sect.sect-thiet-y{color:#ffd36f!important}
.identity-sect.sect-toai-mong{color:#63ffc7!important}
.identity-sect.sect-than-tuong{color:#86a8ff!important}

/* RGB tên nhân vật final */
@keyframes fdRgbFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
@keyframes fdRgbGlow{
  0%,100%{text-shadow:0 0 4px rgba(80,230,255,.42),0 0 8px rgba(160,93,255,.25)}
  50%{text-shadow:0 0 7px rgba(80,230,255,.60),0 0 13px rgba(160,93,255,.36),0 0 18px rgba(255,155,70,.18)}
}

.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{
  background-image:linear-gradient(90deg,#7df7ff 0%,#45b6ff 14%,#9b5cff 28%,#ff5ecb 43%,#ff9b48 58%,#fff08a 72%,#5dffb2 86%,#7df7ff 100%)!important;
  background-size:300% 100%!important;
  background-position:0% 50%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  animation:fdRgbFlow 3.8s linear infinite,fdRgbGlow 2.6s ease-in-out infinite!important;
  font-weight:1000!important;
  filter:brightness(1.12) saturate(1.28)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.identity-char-name:hover,
#pfDisplayName:hover{
  animation-duration:2.1s,1.8s!important;
  filter:brightness(1.25) saturate(1.45)!important;
}

/* Không để RGB lan */
.identity-meta,
.identity-sect,
.identity-sect *,
.profile-meta-pill,
.profile-meta-pill *,
.rank-badge,
.rank-value,
.bc-count,
.bc-team,
.bc-status,
.bc-x,
.admin-user-row > b:first-child,
button,
input,
select,
textarea{
  animation:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:initial!important;
}

/* BXH đẹp hơn */
.rank-panel-title{
  width:min(280px,80%)!important;
  margin:0 auto 14px!important;
  background:rgba(0,0,0,.12)!important;
}

.rank-card:nth-child(1){
  border-color:rgba(255,226,128,.42)!important;
  background:linear-gradient(90deg,rgba(255,215,100,.12),rgba(0,0,0,.12))!important;
}

/* Admin row gọn sang */
.admin-user-row{
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,.09))!important;
}

/* Bang Chiến row gọn */
.bc-row,
.bc-x-row{
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,.09))!important;
}

/* Scrollbar luxury */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,226,150,.46) 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,.58),rgba(185,137,74,.44));
  border-radius:999px;
}

/* Mobile refinement giữ không lỗi bản 8D.2 */
@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(39,25,18,.20))!important;
    border-radius:18px!important;
  }

  .identity-char-name,
  #pfDisplayName{
    animation-duration:4.8s,3.4s!important;
  }
}


/* ===== MERGED FROM assets/css/admin-action-fix.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.2 ADMIN ACTION FIX
   Fix cột thao tác danh sách thành viên:
   PC: Sửa / Reset / Xóa nằm ngang gọn.
   Mobile: vẫn co an toàn.
   ========================================================= */

/* PC/tablet rộng: thao tác nằm ngang trong 1 cột */
@media(min-width:761px){
  .admin-user-row{
    grid-template-columns:
      minmax(105px,.78fr)
      minmax(140px,1fr)
      minmax(82px,.55fr)
      minmax(125px,.82fr)
      minmax(72px,.45fr)
      minmax(78px,.45fr)
      minmax(74px,.45fr)
      minmax(238px,1.15fr)!important;
    min-height:76px!important;
    align-items:center!important;
  }

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

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

  .admin-table-head,
  .admin-list-head{
    grid-template-columns:
      minmax(105px,.78fr)
      minmax(140px,1fr)
      minmax(82px,.55fr)
      minmax(125px,.82fr)
      minmax(72px,.45fr)
      minmax(78px,.45fr)
      minmax(74px,.45fr)
      minmax(238px,1.15fr)!important;
  }
}

/* Màn hình vừa: nếu thiếu ngang thì vẫn cho thao tác ngang và xuống dưới gọn */
@media(min-width:761px) and (max-width:1050px){
  .admin-user-row{
    grid-template-columns:1fr 1fr!important;
  }

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

/* Mobile nhỏ: giữ dạng card, nút có thể nằm ngang nếu đủ, quá nhỏ thì dọc */
@media(max-width:760px){
  .admin-user-row > .admin-row-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }

  .admin-row-actions button{
    width:100%!important;
    min-height:38px!important;
  }
}

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


/* ===== MERGED FROM assets/css/point-rank-button-fix.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.3 POINT RANK + REGISTER BUTTON
   - Đăng ký tham gia căn giữa, nhỏ gọn hơn.
   - CSS only for button layout.
   ========================================================= */

/* Nút Đăng ký tham gia trong card đăng ký Bang Chiến */
#bcRegisterBtn{
  width:auto!important;
  min-width:150px!important;
  max-width:190px!important;
  min-height:38px!important;
  padding:0 18px!important;
  margin:10px auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  font-size:10px!important;
  letter-spacing:.045em!important;
}

/* Nếu nút nằm trong actions thì vẫn căn giữa */
.scrim-card #bcRegisterBtn,
.bc-register-card #bcRegisterBtn{
  justify-self:center!important;
  align-self:center!important;
}

/* Mobile vẫn dễ bấm nhưng không kéo full ngang */
@media(max-width:760px){
  #bcRegisterBtn{
    width:min(190px,75%)!important;
    min-width:145px!important;
  }
}


/* ===== MERGED FROM assets/css/vip-top-text.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.4 VIP TOP TEXT
   TOP 1-5 dùng chữ TOP màu riêng, không icon.
   Scope nhỏ để tránh chồng CSS rộng.
   ========================================================= */

/* Badge TOP trong BXH */
.rank-badge.vip-rank,
.home-rank-badge.vip-rank{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:0 13px!important;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  line-height:1!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 14px rgba(255,255,255,.08)!important;
}

/* 5 màu VIP */
.rank-badge.vip-top-1,
.home-rank-badge.vip-top-1{
  background:linear-gradient(180deg,#fff4b8,#e7b63e 55%,#a97218)!important;
  color:#1a1004!important;
  border:1px solid rgba(255,236,170,.70)!important;
  box-shadow:0 0 18px rgba(255,210,85,.24), inset 0 1px 0 rgba(255,255,255,.36)!important;
}

.rank-badge.vip-top-2,
.home-rank-badge.vip-top-2{
  background:linear-gradient(180deg,#f4fbff,#9fd4ff 55%,#4d6f95)!important;
  color:#07131e!important;
  border:1px solid rgba(200,235,255,.70)!important;
  box-shadow:0 0 16px rgba(130,210,255,.22), inset 0 1px 0 rgba(255,255,255,.34)!important;
}

.rank-badge.vip-top-3,
.home-rank-badge.vip-top-3{
  background:linear-gradient(180deg,#ffd9a5,#d9853b 55%,#8f431f)!important;
  color:#180b03!important;
  border:1px solid rgba(255,188,120,.68)!important;
  box-shadow:0 0 16px rgba(255,136,60,.20), inset 0 1px 0 rgba(255,255,255,.30)!important;
}

.rank-badge.vip-top-4,
.home-rank-badge.vip-top-4{
  background:linear-gradient(180deg,#d7c3ff,#8d6cff 55%,#4a2c9c)!important;
  color:#fff7ff!important;
  border:1px solid rgba(198,170,255,.66)!important;
  box-shadow:0 0 16px rgba(150,105,255,.24), inset 0 1px 0 rgba(255,255,255,.25)!important;
}

.rank-badge.vip-top-5,
.home-rank-badge.vip-top-5{
  background:linear-gradient(180deg,#ffb199,#ff684d 55%,#a8271c)!important;
  color:#fff8f2!important;
  border:1px solid rgba(255,145,110,.66)!important;
  box-shadow:0 0 16px rgba(255,88,55,.24), inset 0 1px 0 rgba(255,255,255,.25)!important;
}

/* TOP 6-10 bình thường */
.rank-badge.normal-rank{
  background:rgba(0,0,0,.16)!important;
  color:#ffe8a3!important;
  border:1px solid rgba(255,226,150,.18)!important;
  box-shadow:none!important;
}

/* Card TOP 1-5 trong BXH nổi nhẹ theo màu */
.rank-card:has(.vip-top-1){
  border-color:rgba(255,226,128,.42)!important;
  background:linear-gradient(90deg,rgba(255,210,80,.13),rgba(0,0,0,.10))!important;
}
.rank-card:has(.vip-top-2){
  border-color:rgba(160,215,255,.34)!important;
  background:linear-gradient(90deg,rgba(120,190,255,.10),rgba(0,0,0,.10))!important;
}
.rank-card:has(.vip-top-3){
  border-color:rgba(255,155,82,.32)!important;
  background:linear-gradient(90deg,rgba(255,130,60,.10),rgba(0,0,0,.10))!important;
}
.rank-card:has(.vip-top-4){
  border-color:rgba(160,110,255,.32)!important;
  background:linear-gradient(90deg,rgba(135,90,255,.10),rgba(0,0,0,.10))!important;
}
.rank-card:has(.vip-top-5){
  border-color:rgba(255,95,70,.30)!important;
  background:linear-gradient(90deg,rgba(255,80,60,.09),rgba(0,0,0,.10))!important;
}

/* Khung tên của TOP 1-5 nổi hơn nhưng không tạo viền đen */
.rank-card:has(.vip-rank) .identity-char-name,
.donate-row:has(.vip-rank) .identity-char-name{
  filter:brightness(1.22) saturate(1.45)!important;
  text-shadow:
    0 0 6px rgba(80,230,255,.56),
    0 0 12px rgba(160,93,255,.34)!important;
}

/* Top Donate ngoài trang chủ */
.home-rank-badge{
  margin-right:7px!important;
  vertical-align:middle!important;
}

.donate-row:has(.vip-top-1),
.donate-row:has(.vip-top-2),
.donate-row:has(.vip-top-3),
.donate-row:has(.vip-top-4),
.donate-row:has(.vip-top-5){
  border-color:rgba(255,226,150,.22)!important;
}

/* Mobile */
@media(max-width:620px){
  .rank-badge.vip-rank,
  .home-rank-badge.vip-rank{
    min-height:30px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }

  .home-rank-badge{
    margin-right:5px!important;
  }
}


/* ===== MERGED FROM assets/css/vip-top-frame.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.5 VIP TOP FRAME
   Làm nền khung TOP 1-5 nổi bật hơn.
   Scope nhỏ: chỉ rank-card và donate-row có vip badge.
   ========================================================= */

/* Nền chung cho TOP 1-5 trong BXH */
.rank-card:has(.vip-rank),
.donate-row:has(.vip-rank){
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-width:1px!important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

.rank-card:has(.vip-rank)::before,
.donate-row:has(.vip-rank)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.88;
}

.rank-card:has(.vip-rank)::after,
.donate-row:has(.vip-rank)::after{
  content:"";
  position:absolute;
  inset:-60%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%);
  transform:translateX(-55%) rotate(10deg);
  animation:vipTopSweep 4.8s ease-in-out infinite;
  opacity:.35;
}

@keyframes vipTopSweep{
  0%,35%{transform:translateX(-55%) rotate(10deg)}
  70%,100%{transform:translateX(55%) rotate(10deg)}
}

/* TOP 1: vàng kim */
.rank-card:has(.vip-top-1),
.donate-row:has(.vip-top-1){
  border-color:rgba(255,224,120,.70)!important;
  box-shadow:
    0 0 0 1px rgba(255,224,120,.16),
    0 16px 38px rgba(0,0,0,.24),
    0 0 24px rgba(255,200,70,.22),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.rank-card:has(.vip-top-1)::before,
.donate-row:has(.vip-top-1)::before{
  background:
    radial-gradient(circle at 18% 50%,rgba(255,240,170,.30),transparent 34%),
    linear-gradient(90deg,rgba(255,209,70,.26),rgba(103,68,15,.18),rgba(0,0,0,.10))!important;
}

/* TOP 2: bạc xanh */
.rank-card:has(.vip-top-2),
.donate-row:has(.vip-top-2){
  border-color:rgba(180,225,255,.62)!important;
  box-shadow:
    0 0 0 1px rgba(180,225,255,.13),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(110,190,255,.20),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.rank-card:has(.vip-top-2)::before,
.donate-row:has(.vip-top-2)::before{
  background:
    radial-gradient(circle at 18% 50%,rgba(210,240,255,.26),transparent 34%),
    linear-gradient(90deg,rgba(112,188,255,.20),rgba(32,69,106,.16),rgba(0,0,0,.10))!important;
}

/* TOP 3: đồng cam */
.rank-card:has(.vip-top-3),
.donate-row:has(.vip-top-3){
  border-color:rgba(255,165,92,.58)!important;
  box-shadow:
    0 0 0 1px rgba(255,165,92,.12),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(255,118,55,.18),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}
.rank-card:has(.vip-top-3)::before,
.donate-row:has(.vip-top-3)::before{
  background:
    radial-gradient(circle at 18% 50%,rgba(255,180,95,.24),transparent 34%),
    linear-gradient(90deg,rgba(255,126,55,.18),rgba(96,45,20,.16),rgba(0,0,0,.10))!important;
}

/* TOP 4: tím xanh */
.rank-card:has(.vip-top-4),
.donate-row:has(.vip-top-4){
  border-color:rgba(170,125,255,.56)!important;
  box-shadow:
    0 0 0 1px rgba(170,125,255,.12),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(140,95,255,.18),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.rank-card:has(.vip-top-4)::before,
.donate-row:has(.vip-top-4)::before{
  background:
    radial-gradient(circle at 18% 50%,rgba(190,150,255,.22),transparent 34%),
    linear-gradient(90deg,rgba(130,90,255,.18),rgba(55,35,112,.15),rgba(0,0,0,.10))!important;
}

/* TOP 5: đỏ cam */
.rank-card:has(.vip-top-5),
.donate-row:has(.vip-top-5){
  border-color:rgba(255,105,80,.54)!important;
  box-shadow:
    0 0 0 1px rgba(255,105,80,.12),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(255,75,55,.17),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.rank-card:has(.vip-top-5)::before,
.donate-row:has(.vip-top-5)::before{
  background:
    radial-gradient(circle at 18% 50%,rgba(255,125,90,.20),transparent 34%),
    linear-gradient(90deg,rgba(255,74,55,.17),rgba(104,30,24,.15),rgba(0,0,0,.10))!important;
}

/* Khung tên TOP 1-5 nổi bật hơn nhưng vẫn sạch */
.rank-card:has(.vip-rank) .rank-name,
.donate-row:has(.vip-rank) b{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.rank-card:has(.vip-rank) .identity-char-name,
.donate-row:has(.vip-rank) .identity-char-name{
  padding:2px 8px!important;
  border-radius:999px!important;
  background-image:linear-gradient(90deg,#7df7ff 0%,#45b6ff 14%,#9b5cff 28%,#ff5ecb 43%,#ff9b48 58%,#fff08a 72%,#5dffb2 86%,#7df7ff 100%)!important;
  box-shadow:0 0 14px rgba(92,220,255,.18)!important;
}

/* TOP 6-10 giữ bình thường, không frame mạnh */
.rank-card:not(:has(.vip-rank)){
  border-color:rgba(255,226,150,.14)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Mobile */
@media(max-width:620px){
  .rank-card:has(.vip-rank)::after,
  .donate-row:has(.vip-rank)::after{
    opacity:.22;
  }

  .rank-card:has(.vip-rank) .identity-char-name,
  .donate-row:has(.vip-rank) .identity-char-name{
    padding:1px 6px!important;
  }
}


/* ===== MERGED FROM assets/css/vip-top-stronger.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.6 VIP TOP STRONGER
   TOP 1-5 đậm hơn, nổi hơn, có chớp nhẹ.
   Scope nhỏ: chỉ rank-card / donate-row VIP.
   ========================================================= */

@keyframes vipSoftBlink{
  0%,100%{
    filter:brightness(1) saturate(1.08);
  }
  50%{
    filter:brightness(1.18) saturate(1.28);
  }
}

@keyframes vipBorderPulse{
  0%,100%{
    opacity:.72;
    transform:scaleX(.96);
  }
  50%{
    opacity:1;
    transform:scaleX(1);
  }
}

/* TOP VIP đậm nền hơn */
.rank-card:has(.vip-rank),
.donate-row:has(.vip-rank){
  animation:vipSoftBlink 2.8s ease-in-out infinite!important;
  border-width:1.5px!important;
}

/* Thêm vệt sáng đáy card VIP */
.rank-card:has(.vip-rank)::after,
.donate-row:has(.vip-rank)::after{
  opacity:.52!important;
}

/* Đường sáng trên đầu card VIP */
.rank-card:has(.vip-rank) .rank-name::before,
.donate-row:has(.vip-rank) b::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:4px;
  height:2px;
  border-radius:999px;
  transform-origin:center;
  animation:vipBorderPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

/* Đảm bảo phần tên có relative để pseudo chạy đúng */
.rank-card:has(.vip-rank) .rank-name,
.donate-row:has(.vip-rank) b{
  position:relative!important;
}

/* TOP 1 mạnh hơn */
.rank-card:has(.vip-top-1),
.donate-row:has(.vip-top-1){
  border-color:rgba(255,226,120,.92)!important;
  box-shadow:
    0 0 0 1px rgba(255,226,120,.28),
    0 18px 44px rgba(0,0,0,.30),
    0 0 34px rgba(255,205,70,.38),
    inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.rank-card:has(.vip-top-1)::before,
.donate-row:has(.vip-top-1)::before{
  opacity:1!important;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,245,175,.46),transparent 35%),
    linear-gradient(90deg,rgba(255,212,70,.40),rgba(150,94,20,.26),rgba(0,0,0,.14))!important;
}
.rank-card:has(.vip-top-1) .rank-name::before,
.donate-row:has(.vip-top-1) b::before{
  background:linear-gradient(90deg,transparent,#fff1a8,transparent);
}

/* TOP 2 */
.rank-card:has(.vip-top-2),
.donate-row:has(.vip-top-2){
  border-color:rgba(190,232,255,.84)!important;
  box-shadow:
    0 0 0 1px rgba(190,232,255,.22),
    0 18px 40px rgba(0,0,0,.28),
    0 0 30px rgba(115,200,255,.34),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.rank-card:has(.vip-top-2)::before,
.donate-row:has(.vip-top-2)::before{
  opacity:1!important;
  background:
    radial-gradient(circle at 15% 50%,rgba(220,245,255,.38),transparent 35%),
    linear-gradient(90deg,rgba(100,190,255,.34),rgba(36,78,120,.24),rgba(0,0,0,.14))!important;
}
.rank-card:has(.vip-top-2) .rank-name::before,
.donate-row:has(.vip-top-2) b::before{
  background:linear-gradient(90deg,transparent,#c9edff,transparent);
}

/* TOP 3 */
.rank-card:has(.vip-top-3),
.donate-row:has(.vip-top-3){
  border-color:rgba(255,170,95,.78)!important;
  box-shadow:
    0 0 0 1px rgba(255,170,95,.20),
    0 18px 40px rgba(0,0,0,.28),
    0 0 30px rgba(255,120,55,.30),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.rank-card:has(.vip-top-3)::before,
.donate-row:has(.vip-top-3)::before{
  opacity:1!important;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,190,105,.34),transparent 35%),
    linear-gradient(90deg,rgba(255,120,55,.30),rgba(116,50,20,.23),rgba(0,0,0,.14))!important;
}
.rank-card:has(.vip-top-3) .rank-name::before,
.donate-row:has(.vip-top-3) b::before{
  background:linear-gradient(90deg,transparent,#ffb06b,transparent);
}

/* TOP 4 */
.rank-card:has(.vip-top-4),
.donate-row:has(.vip-top-4){
  border-color:rgba(180,135,255,.76)!important;
  box-shadow:
    0 0 0 1px rgba(180,135,255,.20),
    0 18px 40px rgba(0,0,0,.28),
    0 0 30px rgba(145,95,255,.32),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.rank-card:has(.vip-top-4)::before,
.donate-row:has(.vip-top-4)::before{
  opacity:1!important;
  background:
    radial-gradient(circle at 15% 50%,rgba(205,165,255,.30),transparent 35%),
    linear-gradient(90deg,rgba(135,88,255,.30),rgba(58,35,130,.22),rgba(0,0,0,.14))!important;
}
.rank-card:has(.vip-top-4) .rank-name::before,
.donate-row:has(.vip-top-4) b::before{
  background:linear-gradient(90deg,transparent,#bea0ff,transparent);
}

/* TOP 5 */
.rank-card:has(.vip-top-5),
.donate-row:has(.vip-top-5){
  border-color:rgba(255,115,88,.74)!important;
  box-shadow:
    0 0 0 1px rgba(255,115,88,.20),
    0 18px 40px rgba(0,0,0,.28),
    0 0 30px rgba(255,80,55,.30),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.rank-card:has(.vip-top-5)::before,
.donate-row:has(.vip-top-5)::before{
  opacity:1!important;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,140,100,.28),transparent 35%),
    linear-gradient(90deg,rgba(255,78,55,.28),rgba(116,32,24,.22),rgba(0,0,0,.14))!important;
}
.rank-card:has(.vip-top-5) .rank-name::before,
.donate-row:has(.vip-top-5) b::before{
  background:linear-gradient(90deg,transparent,#ff8468,transparent);
}

/* Badge TOP đậm hơn */
.rank-badge.vip-rank,
.home-rank-badge.vip-rank{
  font-weight:1000!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 0 18px rgba(255,255,255,.18)!important;
}

/* Tên trong TOP VIP sáng hơn */
.rank-card:has(.vip-rank) .identity-char-name,
.donate-row:has(.vip-rank) .identity-char-name{
  filter:brightness(1.35) saturate(1.58)!important;
  text-shadow:
    0 0 7px rgba(80,230,255,.68),
    0 0 15px rgba(160,93,255,.44),
    0 0 22px rgba(255,155,70,.20)!important;
}

/* Tôn nền khung panel TOP nhẹ hơn để card VIP nổi */
.rank-panel{
  background:linear-gradient(135deg,rgba(8,8,13,.30),rgba(42,27,19,.18))!important;
}

@media(max-width:620px){
  .rank-card:has(.vip-rank),
  .donate-row:has(.vip-rank){
    animation-duration:3.8s!important;
  }

  .rank-card:has(.vip-rank)::after,
  .donate-row:has(.vip-rank)::after{
    opacity:.34!important;
  }
}


/* ===== MERGED FROM assets/css/vip-top-direct-class.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.7 VIP TOP DIRECT CLASS
   Fix chắc chắn: TOP 1-5 dùng class trực tiếp, không phụ thuộc :has().
   ========================================================= */

.rank-card.vip-rank-card,
.donate-row.vip-rank-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-width:1.5px!important;
  animation:vipSoftBlink 2.8s ease-in-out infinite!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.rank-card.vip-rank-card::before,
.donate-row.vip-rank-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:1;
}

.rank-card.vip-rank-card::after,
.donate-row.vip-rank-card::after{
  content:"";
  position:absolute;
  inset:-60%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-55%) rotate(10deg);
  animation:vipTopSweep 4.8s ease-in-out infinite;
  opacity:.52;
}

/* TOP 1 */
.rank-card.vip-top-card-1,
.donate-row.vip-top-card-1{
  border-color:rgba(255,226,120,.95)!important;
  box-shadow:
    0 0 0 1px rgba(255,226,120,.30),
    0 18px 46px rgba(0,0,0,.32),
    0 0 36px rgba(255,205,70,.42),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.rank-card.vip-top-card-1::before,
.donate-row.vip-top-card-1::before{
  background:
    radial-gradient(circle at 15% 50%,rgba(255,245,175,.50),transparent 35%),
    linear-gradient(90deg,rgba(255,212,70,.44),rgba(150,94,20,.28),rgba(0,0,0,.14))!important;
}

/* TOP 2 */
.rank-card.vip-top-card-2,
.donate-row.vip-top-card-2{
  border-color:rgba(190,232,255,.88)!important;
  box-shadow:
    0 0 0 1px rgba(190,232,255,.24),
    0 18px 42px rgba(0,0,0,.30),
    0 0 34px rgba(115,200,255,.38),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.rank-card.vip-top-card-2::before,
.donate-row.vip-top-card-2::before{
  background:
    radial-gradient(circle at 15% 50%,rgba(220,245,255,.42),transparent 35%),
    linear-gradient(90deg,rgba(100,190,255,.38),rgba(36,78,120,.26),rgba(0,0,0,.14))!important;
}

/* TOP 3 */
.rank-card.vip-top-card-3,
.donate-row.vip-top-card-3{
  border-color:rgba(255,170,95,.82)!important;
  box-shadow:
    0 0 0 1px rgba(255,170,95,.22),
    0 18px 42px rgba(0,0,0,.30),
    0 0 34px rgba(255,120,55,.34),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.rank-card.vip-top-card-3::before,
.donate-row.vip-top-card-3::before{
  background:
    radial-gradient(circle at 15% 50%,rgba(255,190,105,.38),transparent 35%),
    linear-gradient(90deg,rgba(255,120,55,.34),rgba(116,50,20,.25),rgba(0,0,0,.14))!important;
}

/* TOP 4 */
.rank-card.vip-top-card-4,
.donate-row.vip-top-card-4{
  border-color:rgba(180,135,255,.80)!important;
  box-shadow:
    0 0 0 1px rgba(180,135,255,.22),
    0 18px 42px rgba(0,0,0,.30),
    0 0 34px rgba(145,95,255,.36),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.rank-card.vip-top-card-4::before,
.donate-row.vip-top-card-4::before{
  background:
    radial-gradient(circle at 15% 50%,rgba(205,165,255,.34),transparent 35%),
    linear-gradient(90deg,rgba(135,88,255,.34),rgba(58,35,130,.24),rgba(0,0,0,.14))!important;
}

/* TOP 5 */
.rank-card.vip-top-card-5,
.donate-row.vip-top-card-5{
  border-color:rgba(255,115,88,.78)!important;
  box-shadow:
    0 0 0 1px rgba(255,115,88,.22),
    0 18px 42px rgba(0,0,0,.30),
    0 0 34px rgba(255,80,55,.34),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.rank-card.vip-top-card-5::before,
.donate-row.vip-top-card-5::before{
  background:
    radial-gradient(circle at 15% 50%,rgba(255,140,100,.32),transparent 35%),
    linear-gradient(90deg,rgba(255,78,55,.32),rgba(116,32,24,.24),rgba(0,0,0,.14))!important;
}

/* Chữ TOP không icon, nổi rõ */
.rank-badge.vip-rank,
.home-rank-badge.vip-rank{
  color:#160e04!important;
  min-width:76px!important;
}

/* Tên TOP nổi hơn */
.rank-card.vip-rank-card .identity-char-name,
.donate-row.vip-rank-card .identity-char-name{
  filter:brightness(1.38) saturate(1.62)!important;
  text-shadow:
    0 0 7px rgba(80,230,255,.72),
    0 0 15px rgba(160,93,255,.46),
    0 0 22px rgba(255,155,70,.22)!important;
}

/* TOP thường không bị dính */
.rank-card:not(.vip-rank-card),
.donate-row:not(.vip-rank-card){
  animation:none!important;
}

/* Mobile giảm chớp */
@media(max-width:620px){
  .rank-card.vip-rank-card,
  .donate-row.vip-rank-card{
    animation-duration:3.8s!important;
  }
  .rank-card.vip-rank-card::after,
  .donate-row.vip-rank-card::after{
    opacity:.32;
  }
}


/* ===== MERGED FROM assets/css/vip-top-line-fix.css ===== */

/* =========================================================
   Làng Ẩn Dật - BẢN 8E.8 VIP TOP LINE FIX
   Xóa vệt vàng dài trong card TOP VIP.
   Giữ nền VIP, badge TOP, glow tên.
   ========================================================= */

/* Tắt đường sáng dài sinh ra từ rank-name/b */
.rank-card.vip-rank-card .rank-name::before,
.donate-row.vip-rank-card b::before,
.rank-card:has(.vip-rank) .rank-name::before,
.donate-row:has(.vip-rank) b::before{
  content:none!important;
  display:none!important;
}

/* Giữ tên nổi nhưng không có thanh kéo dài */
.rank-card.vip-rank-card .rank-name,
.donate-row.vip-rank-card b{
  position:static!important;
  background:transparent!important;
}

/* Badge TOP tự nổi bật, không cần line phụ */
.rank-badge.vip-rank,
.home-rank-badge.vip-rank{
  position:relative!important;
  z-index:2!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 16px rgba(255,226,150,.22)!important;
}

/* Khung tên gọn lại, không tạo nền dài */
.rank-card.vip-rank-card .identity-char-name,
.donate-row.vip-rank-card .identity-char-name{
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
}

/* Card VIP vẫn nổi bật bằng nền/viền */
.rank-card.vip-rank-card,
.donate-row.vip-rank-card{
  border-width:1.5px!important;
}

/* TOP Donate ngoài trang chủ gọn hơn */
.donate-row.vip-rank-card{
  min-height:42px!important;
  padding:8px 10px!important;
}

.donate-row.vip-rank-card b{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}

/* BXH card gọn hơn */
.rank-card.vip-rank-card{
  min-height:62px!important;
}

@media(max-width:620px){
  .donate-row.vip-rank-card b{
    gap:6px!important;
  }
}


/* =========================================================
   8E.9 - RGB NAME CLEAN FINAL
   Tên nhân vật sáng đẹp nhưng không lóa, không tràn glow.
   ========================================================= */

/* Giới hạn vùng tên để glow không tràn ra ngoài hàng/card */
.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{
  display:inline-block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  vertical-align:middle!important;
  line-height:1.16!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:brightness(1.06) saturate(1.12)!important;
  text-shadow:
    0 0 2px rgba(90,220,255,.32),
    0 0 5px rgba(150,90,255,.18)!important;
  -webkit-text-stroke:0!important;
}

/* Hover sáng vừa phải, không bung glow */
.identity-char-name:hover,
#pfDisplayName:hover,
.admin-user-row .identity-char-name:hover,
.bc-name .identity-char-name:hover,
.rank-name .identity-char-name:hover,
.rank-name-only .identity-char-name:hover,
.donate-row .identity-char-name:hover{
  filter:brightness(1.14) saturate(1.22)!important;
  text-shadow:
    0 0 3px rgba(90,220,255,.42),
    0 0 7px rgba(150,90,255,.24)!important;
}

/* TOP VIP tên vẫn nổi hơn một chút nhưng không lóa */
.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.12) saturate(1.22)!important;
  text-shadow:
    0 0 3px rgba(90,230,255,.42),
    0 0 7px rgba(160,93,255,.24),
    0 0 10px rgba(255,180,80,.10)!important;
}

/* Không cho text glow kéo card rộng/cao */
.rank-name,
.rank-name-only,
.bc-name,
.donate-row b,
.admin-user-row span{
  overflow:hidden!important;
  min-width:0!important;
}

/* Profile tên lớn giảm chói */
#pfDisplayName{
  font-size:clamp(20px, 2.2vw, 28px)!important;
}

/* Badge, phái, point tuyệt đối không dính animation/glow RGB */
.identity-meta,
.identity-sect,
.identity-sect *,
.profile-meta-pill,
.profile-meta-pill *,
.rank-badge,
.rank-value,
.bc-count,
.bc-team,
.bc-status,
.bc-x,
.admin-user-row > b:first-child,
.profile-stats b,
button,
input,
select,
textarea{
  animation:none!important;
  text-shadow:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:initial!important;
}

/* Riêng phái giữ màu class */
.identity-sect,
.identity-sect span{
  background:none!important;
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* Mobile giảm animation và glow thêm */
@media(max-width:760px){
  .identity-char-name,
  #pfDisplayName{
    animation-duration:6s,4.2s!important;
    text-shadow:0 0 2px rgba(90,220,255,.28)!important;
    filter:brightness(1.03) saturate(1.08)!important;
  }
}

/* ===== USER ACCOUNT CARD: avatar trên, tên giữa, đăng xuất ẩn/hiện ===== */
.side-user{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.account-card{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(245,213,137,.28);
  background:rgba(8,8,14,.62);
  color:var(--gold-2,#f5d589);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.26);
}

.account-card:hover{
  border-color:rgba(245,213,137,.52);
  background:rgba(18,20,28,.78);
}

.account-card .account-avatar{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(245,213,137,.36);
  background:rgba(0,0,0,.30);
  background-size:cover;
  background-position:center;
  font-weight:950;
  font-size:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}

.account-card .account-name{
  width:100%;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
  line-height:1.2;
  font-weight:950;
  text-transform:none;
  letter-spacing:.02em;
}

.logout-btn{
  width:88%;
  min-height:30px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#ff5a78,#ad1232);
  color:#fff;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}

.logout-btn:hover{
  filter:brightness(1.08);
}

.logout-btn.hidden{
  display:none!important;
}


/* Sync fix: user block stays compact and safe on narrow mobile screens */
.side-user,
.account-card,
.logout-btn{
  box-sizing:border-box;
  max-width:100%;
}

.account-card .account-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:420px){
  .side-menu{
    width:158px!important;
    left:8px!important;
    padding:10px 8px!important;
  }

  .side-logo,
  .side-logo img{
    width:96px!important;
    max-height:96px!important;
  }

  .menu-btn{
    min-height:34px!important;
    height:34px!important;
    font-size:9px!important;
    padding:0 10px!important;
  }

  .account-card{
    padding:8px 6px!important;
    border-radius:20px!important;
    gap:5px!important;
  }

  .account-card .account-avatar{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  .account-card .account-name{
    font-size:9.5px!important;
  }

  .logout-btn{
    width:92%!important;
    min-height:29px!important;
    font-size:9px!important;
  }
}