.vip-page {
  min-height: 100vh;
  background: var(--theme-app-backgroud-color, #f4f4f4);
  color: var(--heading-color, #222);
}

.vip-page__body {
  padding: min(2.133333vw, 11.52px);
  padding-bottom: min(8vw, 43.2px);
}

.vip-level-panel,
.vip-rebate-card,
.vip-privilege-card {
  margin-bottom: min(2.844444vw, 15.36px);
  border-radius: min(3.555556vw, 19.2px);
  background: #fff;
  box-shadow: 0 min(1.066667vw, 5.76px) min(3.2vw, 17.28px) rgba(88, 60, 10, 0.06);
}

.vip-level-panel {
  padding: min(3.555556vw, 19.2px);
  overflow: hidden;
}

.vip-level-panel h2 {
  margin: 0 0 min(2.666667vw, 14.4px);
  color: var(--text-color-3, #777);
  font-size: min(3.466667vw, 18.72px);
}

.vip-pills {
  display: inline-flex;
  gap: min(2.488889vw, 13.44px);
  padding: 0;
  width: max-content;
  min-width: 100%;
}

.vip-pills button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(1.066667vw, 5.76px);
  flex: 0 0 auto;
  min-width: min(19.555556vw, 105.6px);
  height: min(7.111111vw, 38.4px);
  border: min(0.266667vw, 1.44px) solid #eadfca;
  border-radius: min(4.444444vw, 24px);
  color: #8b7444;
  background: #fbfdff;
  font-size: min(3.022222vw, 16.32px);
  font-weight: 700;
}

.vip-pills button.active {
  color: #8b5a00;
  border-color: #e5c06a;
  background: #fff8e7;
  box-shadow: 0 min(0.711111vw, 3.84px) min(2.133333vw, 11.52px) rgba(189, 149, 52, 0.12);
}

.vip-pill-icon {
  width: min(4.444444vw, 24px);
  height: min(4.444444vw, 24px);
  border-radius: min(0.711111vw, 3.84px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #f4cf74, #b98318);
  font-size: min(2.311111vw, 12.48px);
  font-weight: 800;
}

.vip-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: min(2.844444vw, 15.36px);
  padding: min(10.666667vw, 57.6px) min(4.444444vw, 24px) min(4.266667vw, 23.04px);
  border-radius: min(3.555556vw, 19.2px);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 218, 115, 0.22), transparent 38%),
    linear-gradient(135deg, #2a1900 0%, #6d4304 100%);
}

.vip-status-badge {
  position: absolute;
  top: min(2.133333vw, 11.52px);
  left: min(3.555556vw, 19.2px);
  padding: min(1.066667vw, 5.76px) min(2.488889vw, 13.44px);
  border-radius: min(3.555556vw, 19.2px);
  color: #8b5a00;
  background: #fff;
  font-size: min(2.844444vw, 15.36px);
  font-weight: 700;
}

.vip-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 min(3.555556vw, 19.2px);
  font-size: min(7.111111vw, 38.4px);
  line-height: 1;
  color: #f6d77f;
  text-shadow: 0 min(0.533333vw, 2.88px) min(1.066667vw, 5.76px) rgba(20, 11, 0, 0.25);
}

.vip-hero-progress {
  position: relative;
  z-index: 1;
  display: inline-grid;
  gap: min(1.244444vw, 6.72px);
  text-align: left;
}

.vip-hero-progress div {
  display: grid;
  grid-template-columns: min(18.666667vw, 100.8px) 1fr;
  gap: min(2.133333vw, 11.52px);
  align-items: center;
  font-size: min(3.2vw, 17.28px);
}

.vip-hero-progress span {
  color: #ead8ae;
  font-weight: 700;
}

.vip-hero-progress strong {
  color: #fff;
  font-weight: 800;
}

.vip-hero-track {
  position: relative;
  z-index: 1;
  width: 56%;
  height: min(1.066667vw, 5.76px);
  margin: min(3.2vw, 17.28px) auto 0;
  border-radius: min(1.066667vw, 5.76px);
  background: rgba(189, 149, 52, 0.35);
  overflow: hidden;
}

.vip-hero-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f6d77f;
}

.vip-hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 219, 125, 0.12);
}

.vip-hero-bg-circle--one {
  width: min(31.111111vw, 168px);
  height: min(31.111111vw, 168px);
  right: min(17.777778vw, 96px);
  bottom: max(-9.777778vw, -52.8px);
}

.vip-hero-bg-circle--two {
  width: min(40vw, 216px);
  height: min(40vw, 216px);
  right: max(-11.555556vw, -62.4px);
  top: max(-10.666667vw, -57.6px);
}

.vip-rebate-card {
  padding: 0;
  overflow: hidden;
}

.vip-scroll-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-color: #c7b17a transparent;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.vip-scroll-wrap::-webkit-scrollbar {
  height: min(1.244444vw, 6.72px);
}

.vip-scroll-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.vip-scroll-wrap::-webkit-scrollbar-thumb {
  border-radius: min(1.244444vw, 6.72px);
  background: #c7b17a;
}

.vip-level-scroll {
  padding-bottom: min(0.711111vw, 3.84px);
}

.vip-table-scroll {
  padding-bottom: min(1.066667vw, 5.76px);
}

.vip-table-wrap {
  width: max-content;
  min-width: 100%;
}

.vip-table-wrap table {
  width: max-content;
  border-collapse: collapse;
  color: #6b5a36;
  font-size: min(2.844444vw, 15.36px);
}

.vip-table-wrap th,
.vip-table-wrap td {
  min-width: min(17.777778vw, 96px);
  padding: min(2.488889vw, 13.44px) min(2.133333vw, 11.52px);
  border: min(0.177778vw, 0.96px) solid #eadfca;
  text-align: center;
  white-space: nowrap;
}

.vip-table-wrap th {
  color: #6f5a2d;
  background: #fbf4e4;
  font-weight: 800;
}

.vip-table-wrap td:first-child,
.vip-table-wrap th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: min(21.333333vw, 115.2px);
  color: #6f5a2d;
  background: #fffaf0;
  font-weight: 800;
}

.vip-privilege-card {
  padding: min(5.333333vw, 28.8px) min(4.266667vw, 23.04px) min(4.266667vw, 23.04px);
}

.vip-privilege-card h2 {
  margin: 0;
  color: #bd9534;
  text-align: center;
  font-size: min(4.266667vw, 23.04px);
}

.vip-title-line {
  width: min(17.777778vw, 96px);
  height: min(0.711111vw, 3.84px);
  margin: min(2.844444vw, 15.36px) auto min(4.444444vw, 24px);
  border-radius: min(0.711111vw, 3.84px);
  background: #bd9534;
}

.vip-privilege-main {
  display: flex;
  gap: min(2.666667vw, 14.4px);
  align-items: flex-start;
  padding: min(2.666667vw, 14.4px) 0 min(4.266667vw, 23.04px);
  border-bottom: 0;
}

.vip-level-badge {
  flex: 0 0 min(7.466667vw, 40.32px);
  height: min(7.466667vw, 40.32px);
  border-radius: min(2.133333vw, 11.52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #f4cf74, #b98318);
  font-weight: 800;
}

.vip-privilege-main h3 {
  margin: 0 0 min(2.133333vw, 11.52px);
  color: var(--heading-color, #222);
  font-size: min(4.266667vw, 23.04px);
}

.vip-privilege-main p {
  margin: 0 0 min(1.777778vw, 9.6px);
  color: #7b6c4b;
  font-size: min(3.111111vw, 16.8px);
  line-height: 1.5;
}

.vip-privilege-main p strong {
  color: #bd9534;
}

.vip-loading {
  text-align: center;
  color: #999;
}