<style>
/* ===== Rankings Sidebar MENU (premium) ===== */
.rk-sidebox{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 18px 16px;
  overflow: hidden;
  position: relative;
}

.rk-sidebox:after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-45%;
  height:70%;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,220,.18), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

/* server title -> giống "— MENU" */
.rk-sidebox .sidebox-title{
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 6px 0 14px;
  padding: 6px 2px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.rk-sidebox .sidebox-title:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:14px;
  height:2px;
  background: rgba(0,255,220,.7);
  transform: translateY(-50%);
  border-radius: 2px;
}

/* list */
.vs-cat-list1.rk-menu{ margin: 0; padding: 0; position:relative; z-index:1; }
.vs-cat-list1.rk-menu li{ list-style:none; margin: 10px 0; }

/* button-like item */
.vs-cat-list1.rk-menu .rk-item{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  transition: all .18s ease;
  position: relative;
}

/* icon box */
.vs-cat-list1.rk-menu .rk-ico{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,255,220,.10);
  border: 1px solid rgba(0,255,220,.22);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
  position: relative;
}

/* fallback glyph (no icon library needed) */
.vs-cat-list1.rk-menu .rk-ico:before{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(0,255,220,.75);
  box-shadow: 0 0 0 6px rgba(0,255,220,.10);
}

/* text */
.vs-cat-list1.rk-menu .rk-txt{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}

/* hover */
.vs-cat-list1.rk-menu .rk-item:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,220,.28);
  background: rgba(0,255,220,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
}

/* active */
.vs-cat-list1.rk-menu .rk-item.is-active{
  border-color: rgba(0,255,220,.45);
  background: rgba(0,255,220,.09);
  box-shadow: 0 18px 45px rgba(0,0,0,.50), 0 0 0 1px rgba(0,255,220,.14) inset;
}

/* divider between servers */
.rk-server-sep{
  height: 1px;
  margin: 14px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  position: relative;
  z-index: 1;
}

/* optional: different icon colors per type (nhẹ thôi) */
.rk-ico-player:before{ border-radius: 6px; }
.rk-ico-guild:before{ border-radius: 50%; }
.rk-ico-vote:before{ width:16px; height:16px; border-radius: 4px; }
.rk-ico-gens:before{ width:18px; height:18px; border-radius: 8px; }
.rk-ico-bc:before{ width:18px; height:18px; border-radius: 2px; }
.rk-ico-ds:before{ width:18px; height:18px; border-radius: 10px; }
.rk-ico-cc:before{ width:18px; height:18px; border-radius: 4px; }
.rk-ico-duel:before{ width:18px; height:18px; border-radius: 50%; }
.rk-ico-misc:before{ width:18px; height:18px; border-radius: 6px; opacity:.75; }
/* ===== Rankings Sidebar: COMPACT NAV ===== */

/* card gọn hơn */
.rk-sidebox{
  padding: 14px 12px !important;
  border-radius: 12px !important;
}

/* title nhỏ lại */
.rk-sidebox .sidebox-title{
  font-size: 13px !important;
  letter-spacing: .12em !important;
  padding: 6px 2px 10px 18px !important;
  margin: 6px 0 10px !important;
}
.rk-sidebox .sidebox-title:before{
  width: 10px !important;
}

/* list spacing gọn */
.vs-cat-list1.rk-menu li{
  margin: 8px 0 !important;
}

/* item nhỏ lại: dạng nav */
.vs-cat-list1.rk-menu .rk-item{
  padding: 10px 10px !important;
  border-radius: 12px !important;
  gap: 10px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}

/* icon nhỏ lại (hoặc có thể ẩn) */
.vs-cat-list1.rk-menu .rk-ico{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.vs-cat-list1.rk-menu .rk-ico:before{
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 0 5px rgba(0,255,220,.10) !important;
}

/* text nhỏ lại, gọn */
.vs-cat-list1.rk-menu .rk-txt{
  font-size: 12px !important;
  letter-spacing: .10em !important;
  font-weight: 800 !important;
}

/* hover nhẹ thôi (đừng như button) */
.vs-cat-list1.rk-menu .rk-item:hover{
  transform: none !important;
  background: rgba(0,255,220,.045) !important;
  border-color: rgba(0,255,220,.20) !important;
  box-shadow: none !important;
}

/* ACTIVE: định vị “đang ở đâu” thật rõ */
.vs-cat-list1.rk-menu .rk-item.is-active{
  background: rgba(0,255,220,.08) !important;
  border-color: rgba(0,255,220,.35) !important;
  position: relative;
}

/* thanh marker bên trái */
.vs-cat-list1.rk-menu .rk-item.is-active:before{
  content:"";
  position:absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: rgba(0,255,220,.85);
}

/* divider giữa các server gọn lại */
.rk-server-sep{
  margin: 12px 0 14px !important;
}
.vs-cat-list1.rk-menu .rk-ico{ display:none !important; }
.vs-cat-list1.rk-menu .rk-item{ padding-left: 12px !important; }
/* ===== Rankings Sidebar: PURE LIST MODE ===== */

/* card giữ nhẹ thôi */
.rk-sidebox{
  padding: 16px 14px !important;
  border-radius: 14px !important;
}

/* title */
.rk-sidebox .sidebox-title{
  font-size: 13px !important;
  letter-spacing: .14em !important;
  padding: 6px 0 12px 16px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.rk-sidebox .sidebox-title:before{
  width: 8px !important;
}

/* list spacing */
.vs-cat-list1.rk-menu{
  margin: 0;
  padding: 0;
}

.vs-cat-list1.rk-menu li{
  list-style: none;
  margin: 6px 0 !important;
}

/* ITEM = chỉ text */
.vs-cat-list1.rk-menu .rk-item{
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 0 !important;
  display: block !important;
  font-size: 13px !important;
  letter-spacing: .10em !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.65) !important;
  transition: all .15s ease;
}

/* Ẩn icon luôn */
.vs-cat-list1.rk-menu .rk-ico{
  display: none !important;
}

/* Hover nhẹ */
.vs-cat-list1.rk-menu .rk-item:hover{
  color: #00ffe0 !important;
  padding-left: 6px !important;
}

/* ACTIVE STATE = rõ nhưng tinh tế */
.vs-cat-list1.rk-menu .rk-item.is-active{
  color: #00ffe0 !important;
  font-weight: 800 !important;
  position: relative;
  padding-left: 14px !important;
}

/* Thanh marker nhỏ bên trái */
.vs-cat-list1.rk-menu .rk-item.is-active:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#00ffe0;
}
.vs-cat-list1.rk-menu .rk-item{
  position: relative;
  padding-left: 14px !important;
}

.vs-cat-list1.rk-menu .rk-item:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:14px;
  background:rgba(255,255,255,.15);
  transition:all .2s ease;
}

.vs-cat-list1.rk-menu .rk-item:hover:before{
  background:#00ffe0;
}

.vs-cat-list1.rk-menu .rk-item.is-active:before{
  background:#00ffe0;
  height:18px;
}

/* ===== TOP 3 PODIUM ===== */
.rk-podium{
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.rk-podium:after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-55%;
  height:90%;
  background: radial-gradient(circle at 50% 100%, rgba(0,255,220,.14), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
}

.rk-podium-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr; /* #1 nổi bật hơn */
  gap: 12px;
  align-items:end;
  position: relative;
  z-index: 1;
}

.rk-pcard{
  border-radius: 14px;
  padding: 12px 12px 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  text-align:center;
  overflow:hidden;
  position:relative;
}
.rk-pcard[data-rank="1"]{ transform: translateY(-6px); }

.rk-medal{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  margin: 0 auto 10px;
  color: rgba(0,0,0,.85);
}

.rk-ava{
  width: 70px; height: 70px;
  border-radius: 16px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  overflow:hidden;
}
.rk-pcard[data-rank="1"] .rk-ava{ width: 80px; height: 80px; }

.rk-ava img{ width: 100%; height: 100%; object-fit: cover; }

.rk-name{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}
.rk-meta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.rk-lv{
  margin-top: 10px;
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

/* metals */
.rk-gold{ border-color: rgba(201,164,78,.35); }
.rk-gold .rk-medal{ background: linear-gradient(180deg,#e6c36a,#b88a2c); }
.rk-silver{ border-color: rgba(180,190,210,.25); }
.rk-silver .rk-medal{ background: linear-gradient(180deg,#d7dde7,#9aa6b6); }
.rk-bronze{ border-color: rgba(195,130,84,.25); }
.rk-bronze .rk-medal{ background: linear-gradient(180deg,#d9a37a,#9a5b34); }

@media (max-width: 991px){
  .rk-podium-grid{ grid-template-columns: 1fr; }
  .rk-pcard[data-rank="1"]{ transform: none; }
}
</style>