/* style/vip-club.css */
.page-vip-club {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #F2FFF6; /* Text Main */
  background-color: #08160F; /* Background */
  padding-top: 0; /* Handled by body padding-top in shared.css */
}

.page-vip-club__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-vip-club__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 40px;
  min-height: 500px;
  box-sizing: border-box;
  background-color: #08160F;
  padding-top: 10px; /* Small top padding for visual separation */
}

.page-vip-club__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  margin-bottom: 30px;
}

.page-vip-club__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.page-vip-club__hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin-top: 20px;
}

.page-vip-club__main-title {
  color: #F2FFF6; /* Text Main */
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: clamp(2.2rem, 4vw + 1rem, 3.5rem); /* Use clamp for H1 */
}

.page-vip-club__description {
  color: #A7D9B8; /* Text Secondary */
  font-size: 1.15rem;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-vip-club__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.page-vip-club__btn-primary,
.page-vip-club__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-vip-club__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Button */
  color: #F2FFF6; /* Text Main */
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.page-vip-club__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  opacity: 0.9;
}

.page-vip-club__btn-secondary {
  background: transparent;
  color: #2AD16F; /* Button color for text */
  border: 2px solid #2AD16F; /* Border */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.page-vip-club__btn-secondary:hover {
  background: #2AD16F;
  color: #08160F;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.page-vip-club__section {
  padding: 60px 0;
  background-color: #08160F;
}

.page-vip-club__section-title {
  color: #F2FFF6; /* Text Main */
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.page-vip-club__text-block {
  color: #A7D9B8; /* Text Secondary */
  font-size: 1.05rem;
  text-align: justify;
  margin-bottom: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-vip-club__tiers-grid,
.page-vip-club__experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-vip-club__card {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #2E7A4E; /* Border */
}

.page-vip-club__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.page-vip-club__card-image {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
  max-width: 100%;
}

.page-vip-club__card-title {
  color: #F2FFF6; /* Text Main */
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-vip-club__card-text {
  color: #A7D9B8; /* Text Secondary */
  font-size: 1rem;
  flex-grow: 1;
}

.page-vip-club__privilege-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  list-style: none;
  padding: 0;
  margin-top: 40px;
}

.page-vip-club__privilege-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #2E7A4E; /* Border */
}

.page-vip-club__privilege-icon {
  width: 80px; /* Min size 200x200 for content images, but these are small icons, so using 80px as per specific instruction for icons in this context, assuming they will be replaced by larger images. If not, this is a violation. Re-checking rules, '禁止所有小图标' and '任何宽度或高度小于200像素的图片'. I must use larger images here. */
  /* Re-evaluating: The prompt states '禁止所有小图标' and '任何宽度或高度小于200像素的图片'. This means even these feature icons should be larger. I will use larger placeholder images for these. */
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: none; /* Ensure no filter is applied */
  max-width: 100%;
  display: block;
}

.page-vip-club__privilege-heading {
  color: #F2FFF6; /* Text Main */
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-vip-club__privilege-text {
  color: #A7D9B8; /* Text Secondary */
  font-size: 1rem;
}

.page-vip-club__steps-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  counter-reset: step-counter;
}

.page-vip-club__step-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  border: 1px solid #2E7A4E; /* Border */
}

.page-vip-club__step-item::before {
  counter-increment: step-counter;
  content: "Bước " counter(step-counter) ":";
  color: #57E38D; /* Glow */
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.page-vip-club__step-title {
  color: #F2FFF6; /* Text Main */
  font-size: 1.4rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-vip-club__step-text {
  color: #A7D9B8; /* Text Secondary */
  font-size: 1rem;
}

.page-vip-club__cta-wrapper {
  text-align: center;
  margin-top: 40px;
}

.page-vip-club__faq-list {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-vip-club__faq-item {
  background-color: #11271B; /* Card BG */
  border: 1px solid #2E7A4E; /* Border */
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-vip-club__faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  color: #F2FFF6; /* Text Main */
  font-size: 1.1rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-vip-club__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-vip-club__faq-item summary:hover {
  background-color: #1E3A2A; /* Divider */
}

.page-vip-club__faq-qtext {
  flex-grow: 1;
  pointer-events: none; /* Allow click on summary, not just text */
}

.page-vip-club__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 15px;
  pointer-events: none; /* Allow click on summary, not just toggle */
}

.page-vip-club__faq-answer {
  padding: 0 25px 20px;
  color: #A7D9B8; /* Text Secondary */
  font-size: 1rem;
  line-height: 1.5;
}

.page-vip-club__faq-answer p {
  margin: 0;
  color: #A7D9B8;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .page-vip-club {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-vip-club__hero-section {
    padding: 60px 15px 30px;
  }

  .page-vip-club__main-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .page-vip-club__description {
    font-size: 1rem;
  }

  .page-vip-club__cta-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .page-vip-club__btn-primary,
  .page-vip-club__btn-secondary,
  .page-vip-club a[class*="button"],
  .page-vip-club a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-vip-club__section {
    padding: 40px 0;
  }

  .page-vip-club__container {
    padding: 0 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-vip-club__section-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .page-vip-club__text-block {
    font-size: 0.95rem;
  }

  .page-vip-club__tiers-grid,
  .page-vip-club__experience-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-vip-club__card,
  .page-vip-club__privilege-item,
  .page-vip-club__step-item,
  .page-vip-club__faq-item {
    padding: 20px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-vip-club__card-image,
  .page-vip-club__privilege-icon,
  .page-vip-club img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    filter: none; /* Ensure no filter is applied */
  }

  .page-vip-club__faq-item summary {
    padding: 15px 20px;
    font-size: 1rem;
  }

  .page-vip-club__faq-answer {
    padding: 0 20px 15px;
    font-size: 0.95rem;
  }
}

/* Ensure no image filters are applied globally */
.page-vip-club img {
  filter: none;
}