/* Tiên Giới Truyện 3D – V15.72.12: Fix tâm & đường kính avatar theo vòng trong từng mẫu VIP.
   Một hệ tọa độ duy nhất cho ảnh khung và avatar; chỉ thay CSS, không sửa dữ liệu.
   CSS đặt sau V15.72.11 và KHÔNG thay thế ảnh khung riêng của từng cấp. */

/* Các giá trị hole-x/y/size được đo trên ảnh WebP 512×512 của đúng từng cấp.
   Nhờ cùng hệ tọa độ, khi frame thu phóng thì avatar vẫn khớp. */
.tgvip-level-0{--vip-hole-x:48.047%;--vip-hole-y:51.562%;--vip-hole-size:53.516%;--vip-mini-x:-1.29px;--vip-mini-y:1.03px;}
.tgvip-level-1{--vip-hole-x:50.0%;--vip-hole-y:52.344%;--vip-hole-size:51.249%;--vip-mini-x:0.0px;--vip-mini-y:1.55px;}
.tgvip-level-2{--vip-hole-x:49.805%;--vip-hole-y:51.562%;--vip-hole-size:51.259%;--vip-mini-x:-0.13px;--vip-mini-y:1.03px;}
.tgvip-level-3{--vip-hole-x:50.0%;--vip-hole-y:50.977%;--vip-hole-size:51.172%;--vip-mini-x:0.0px;--vip-mini-y:0.64px;}
.tgvip-level-4{--vip-hole-x:50.0%;--vip-hole-y:50.977%;--vip-hole-size:51.172%;--vip-mini-x:0.0px;--vip-mini-y:0.64px;}
.tgvip-level-5{--vip-hole-x:50.977%;--vip-hole-y:51.367%;--vip-hole-size:52.344%;--vip-mini-x:0.64px;--vip-mini-y:0.9px;}
.tgvip-level-6{--vip-hole-x:47.07%;--vip-hole-y:58.398%;--vip-hole-size:52.899%;--vip-mini-x:-1.93px;--vip-mini-y:5.54px;}
.tgvip-level-7{--vip-hole-x:46.289%;--vip-hole-y:58.398%;--vip-hole-size:55.859%;--vip-mini-x:-2.45px;--vip-mini-y:5.54px;}
.tgvip-level-8{--vip-hole-x:48.242%;--vip-hole-y:58.594%;--vip-hole-size:54.301%;--vip-mini-x:-1.16px;--vip-mini-y:5.67px;}
.tgvip-level-9{--vip-hole-x:48.633%;--vip-hole-y:58.398%;--vip-hole-size:55.627%;--vip-mini-x:-0.9px;--vip-mini-y:5.54px;}
.tgvip-level-10{--vip-hole-x:48.633%;--vip-hole-y:58.203%;--vip-hole-size:52.508%;--vip-mini-x:-0.9px;--vip-mini-y:5.41px;}

/* Fix lỗi nguồn: khung trước đây nở ::before -25px nhưng avatar được căn theo tâm wrapper.
   Ở VIP 6–10, lòng khung thực tế thấp hơn tâm ảnh WebP khoảng 42 px. */
.tgvip-avatar-wrap{
  --vip-frame-size:230px;
  display:block!important;
  position:relative!important;
  width:var(--vip-frame-size)!important;
  height:var(--vip-frame-size)!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  margin:6px auto 30px!important;
  border-radius:0!important;
  overflow:visible!important;
  isolation:isolate;
  box-shadow:none!important;
  background:transparent!important;
  transform:none!important;
  flex-shrink:0;
}
.tgvip-avatar-wrap::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:var(--vip-art)!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  z-index:3!important;
  pointer-events:none!important;
  filter:drop-shadow(0 0 7px var(--vip-ambient));
  box-shadow:none!important;
}
.tgvip-avatar-wrap::after{
  inset:12%!important;
  pointer-events:none!important;
  z-index:-1!important;
}
/* Center on the INNER aperture, not on the 512px transparent canvas. */
.tgvip-avatar-wrap > .member-avatar,
.member-account-v9 .tgvip-avatar-wrap > .member-avatar,
.tgvip-avatar-wrap.tgvip-avatar-compact > .tgvip-demo-face{
  display:block!important;
  position:absolute!important;
  top:var(--vip-hole-y)!important;
  left:var(--vip-hole-x)!important;
  width:var(--vip-hole-size)!important;
  height:var(--vip-hole-size)!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  box-sizing:border-box!important;
  border:1px solid var(--vip-art-strong,var(--vip-color))!important;
  border-radius:50%!important;
  overflow:hidden!important;
  z-index:1!important;
  background:#151923!important;
  box-shadow:0 0 12px var(--vip-ambient)!important;
  object-fit:cover!important;
  object-position:center!important;
}
.tgvip-avatar-wrap > .member-avatar > img,
.member-account-v9 .tgvip-avatar-wrap > .member-avatar > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.tgvip-avatar-wrap > .tgvip-avatar-medallion{
  display:inline-block;
  position:absolute!important;
  right:0!important;
  bottom:10%!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  z-index:5!important;
  margin:0!important;
  max-width:76%;
  white-space:nowrap!important;
}
/* Compact frames in VIP library / administrator catalog. */
.tgvip-tier .tgvip-avatar-wrap,
.tgvip-avatar-wrap.tgvip-avatar-compact{
  --vip-frame-size:138px;
  margin:4px auto 9px!important;
}
.tgvip-tier .tgvip-avatar-wrap::before{inset:0!important;animation:none!important}
.tgvip-tier .tgvip-avatar-wrap > .tgvip-avatar-medallion{
  bottom:5%!important;
  right:0!important;
  padding:2px 6px!important;
  font-size:10px!important;
}
.tgvip-tier{overflow:visible!important}
/* Small image avatars in comments: frame stays 66px; avatar follows its actual hole. */
.tgvip-mini-frame>img{
  position:absolute!important;
  left:calc(50% + var(--vip-mini-x,0px))!important;
  top:calc(50% + var(--vip-mini-y,0px))!important;
  transform:translate(-50%,-50%)!important;
  width:35px!important;
  height:35px!important;
  aspect-ratio:1!important;
  object-fit:cover!important;
  border-radius:50%!important;
  z-index:1!important;
}
.tgvip-mini-frame::after{
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
@media(max-width:600px){
  .member-account-v9 .tgvip-avatar-wrap:not(.tgvip-avatar-compact){--vip-frame-size:clamp(185px,55vw,225px)}
  .tgvip-tier .tgvip-avatar-wrap,
  .tgvip-avatar-wrap.tgvip-avatar-compact{--vip-frame-size:min(132px,34vw)}
  .tgvip-tier .tgvip-avatar-wrap::before{inset:0!important}
}
@media(max-width:360px){
  .tgvip-tier .tgvip-avatar-wrap,
  .tgvip-avatar-wrap.tgvip-avatar-compact{--vip-frame-size:min(110px,33vw)}
}
@media(prefers-reduced-motion:reduce){
  .tgvip-avatar-wrap::before,.tgvip-avatar-wrap::after{animation:none!important}
}