/* ═══════════════════════════════════════════════════════════════
   RUY BĂNG — ribbon-addon.css
   Thêm sau style.css, KHÔNG sửa style.css
   ═══════════════════════════════════════════════════════════════ */

.ribbon-anchor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(80px, 55%, 230px);
  aspect-ratio: 548 / 519;
  pointer-events: none;
  overflow: visible;
  transform: translate(-14.3%, 26%);
  z-index: 2;
}

.ribbon-anchor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* Tab Hội Viên — thu nhỏ + kéo xuống để cân bằng với các tab khác
   Ảnh gốc có nhân vật cao hơn ~18% so với Hoa Tươi / Chọn Hoa */
[data-tab="members"] .nvb-img {
  transform: translateY(5px) scale(1.1);
  transform-origin: center bottom;
}

[data-tab="flowers"] .nvb-img {
  transform: translateY(4.4px) scale(1.05);
  transform-origin: center bottom;
}

[data-tab="rank"] .nvb-img {
  transform: translateY(-0.5px) scale(1.02);
  transform-origin: center bottom;
}

/* Chỉ dùng ruy băng trên zoom-card */
.zoom-card .ribbon-anchor {
  width: clamp(200px, 72%, 320px);
  z-index: 4;
  transform: translate(-14.7%, 26.7%);
}