/* Base Styles & Typography */
.page-the-thao {
  font-family: Arial, sans-serif;
  color: #1F2D3D; /* Text Main */
  line-height: 1.6;
  background-color: #F4F7FB; /* Background */
}

.page-the-thao__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-the-thao__section-title {
  font-size: 2.5em;
  color: #2F6BFF; /* Main Color */
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
}

.page-the-thao__card-title {
  font-size: 1.5em;
  color: #1F2D3D; /* Text Main */
  margin-bottom: 15px;
}

.page-the-thao p {
  margin-bottom: 15px;
  font-size: 1.1em;
}

.page-the-thao__list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}

.page-the-thao__list-item {
  margin-bottom: 10px;
  font-size: 1.1em;
}

.page-the-thao__mt-20 {
  margin-top: 20px;
}

/* Buttons */
.page-the-thao__btn-primary,
.page-the-thao__btn-secondary {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-the-thao__btn-primary {
  background: linear-gradient(180deg, #4A8BFF 0%, #2F6BFF 100%); /* Button Gradient */
  color: #ffffff; /* White text for contrast */
  border: none;
}

.page-the-thao__btn-primary:hover {
  background: linear-gradient(180deg, #2F6BFF 0%, #4A8BFF 100%);
  box-shadow: 0 4px 15px rgba(47, 107, 255, 0.4);
}

.page-the-thao__btn-secondary {
  background-color: #ffffff; /* Card BG */
  color: #2F6BFF; /* Main Color */
  border: 2px solid #2F6BFF; /* Main Color border */
  margin-left: 15px;
}

.page-the-thao__btn-secondary:hover {
  background-color: #2F6BFF;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(47, 107, 255, 0.2);
}

/* Hero Section */
.page-the-thao__hero-section {
  position: relative;
  padding-top: 10px; /* Small top padding, relying on body for header offset */
  margin-bottom: 50px;
  background-color: #F4F7FB;
}

.page-the-thao__hero-image-wrapper {
  position: relative;
  width: 100%;
  max-height: 675px; /* Limit height for large screens */
  overflow: hidden;
}

.page-the-thao__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.8); /* Slightly darken image for text contrast */
}

.page-the-thao__hero-content {
  max-width: 900px;
  margin: 40px auto 0 auto;
  text-align: center;
  padding: 0 20px;
}

.page-the-thao__main-title {
  font-size: 3.2em;
  color: #1F2D3D; /* Text Main */
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.page-the-thao__description {
  font-size: 1.3em;
  color: #333333; /* Darker text for readability */
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-the-thao__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* General Content Sections */
.page-the-thao__introduction-section,
.page-the-thao__features-section,
.page-the-thao__sport-types-section,
.page-the-thao__guide-section,
.page-the-thao__promotions-section,
.page-the-thao__faq-section,
.page-the-thao__contact-cta-section {
  padding: 50px 0;
  margin-bottom: 30px;
  background-color: #ffffff; /* Card BG */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.page-the-thao__features-section {
  background-color: #F4F7FB; /* Background */
  box-shadow: none;
}

.page-the-thao__content-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 30px auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Features Grid */
.page-the-thao__feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.page-the-thao__feature-card {
  background-color: #ffffff; /* Card BG */
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  border: 1px solid #D6E2FF; /* Border */
}

.page-the-thao__feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* FAQ Section */
.page-the-thao__faq-list {
  margin-top: 30px;
}

.page-the-thao__faq-item {
  background-color: #ffffff; /* Card BG */
  border: 1px solid #D6E2FF; /* Border */
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-the-thao__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2em;
  font-weight: bold;
  color: #1F2D3D; /* Text Main */
  cursor: pointer;
  background-color: #F4F7FB; /* Background */
  transition: background-color 0.3s ease;
  list-style: none; /* For details/summary */
}

.page-the-thao__faq-question::-webkit-details-marker {
  display: none; /* Hide default marker */
}

.page-the-thao__faq-item[open] .page-the-thao__faq-question {
  background-color: #E0E7F5;
}

.page-the-thao__faq-item[open] .page-the-thao__faq-toggle {
  transform: rotate(45deg);
}

.page-the-thao__faq-question:hover {
  background-color: #E0E7F5;
}

.page-the-thao__faq-qtext {
  flex-grow: 1;
}

.page-the-thao__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
  margin-left: 15px;
}

.page-the-thao__faq-answer {
  padding: 20px 25px;
  font-size: 1.05em;
  color: #333333;
  border-top: 1px solid #D6E2FF; /* Border */
  background-color: #ffffff; /* Card BG */
}

/* Contact CTA Section */
.page-the-thao__contact-cta-section {
  text-align: center;
  background-color: #2F6BFF; /* Main Color */
  color: #ffffff; /* White text for contrast */
  padding: 60px 0;
  border-radius: 12px;
  margin-bottom: 50px;
  box-shadow: 0 8px 30px rgba(47, 107, 255, 0.3);
}

.page-the-thao__contact-cta-section .page-the-thao__section-title {
  color: #ffffff;
}

.page-the-thao__contact-cta-section .page-the-thao__description {
  color: #f0f0f0;
  margin-bottom: 30px;
}

.page-the-thao__contact-cta-section .page-the-thao__btn-primary {
  background: #ffffff;
  color: #2F6BFF;
}

.page-the-thao__contact-cta-section .page-the-thao__btn-primary:hover {
  background: #f0f0f0;
  color: #2F6BFF;
}

.page-the-thao__contact-cta-section .page-the-thao__btn-secondary {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.page-the-thao__contact-cta-section .page-the-thao__btn-secondary:hover {
  background: #ffffff;
  color: #2F6BFF;
}

/* Responsive Design */
/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .page-the-thao {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-the-thao__container {
    padding: 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-the-thao__hero-section {
    padding-top: 10px; /* Small top padding */
    margin-bottom: 30px;
  }

  .page-the-thao__hero-content {
    margin-top: 20px;
    padding: 0 15px;
  }

  .page-the-thao__main-title {
    font-size: clamp(2em, 8vw, 2.5em); /* Responsive font size for H1 */
    margin-bottom: 15px;
  }

  .page-the-thao__description {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .page-the-thao__cta-buttons {
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px;
    padding: 0 15px;
  }

  .page-the-thao__btn-primary,
  .page-the-thao__btn-secondary {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important; /* Remove margin for stacked buttons */
  }

  .page-the-thao__section-title {
    font-size: 2em;
    margin-bottom: 30px;
  }

  .page-the-thao__feature-grid {
    grid-template-columns: 1fr; /* Single column for features */
    gap: 20px;
  }

  .page-the-thao__feature-card {
    padding: 20px;
  }

  .page-the-thao__content-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-the-thao__faq-question {
    padding: 15px 20px;
    font-size: 1em;
  }

  .page-the-thao__faq-answer {
    padding: 15px 20px;
    font-size: 0.95em;
  }

  .page-the-thao__contact-cta-section {
    padding: 40px 0;
  }
}

/* General image and container responsive rules */
.page-the-thao img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-the-thao__section,
.page-the-thao__card,
.page-the-thao__container {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 768px) {
  .page-the-thao img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-the-thao__section,
  .page-the-thao__card,
  .page-the-thao__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Placeholder styles for elements not used in this specific page but required by general rules */
.page-the-thao__home-content { /* Long text gold frame area */
  border: 1px solid #D6E2FF; /* Border */
  border-radius: 10px;
  padding: 30px;
  background-color: #ffffff; /* Card BG */
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .page-the-thao__home-content {
    padding: 20px;
    font-size: 1em;
  }
}

.page-the-thao__slider-wrapper,
.page-the-thao__slider-track,
.page-the-thao__game-slide,
.page-the-thao__banners-top-wrapper,
.page-the-thao__banner-item,
.page-the-thao__blog-masonry,
.page-the-thao__blog-card-link,
.page-the-thao__btn-outline,
.page-the-thao__blog-slider-track,
.page-the-thao__blog-slide {
  /* These classes are not actively used in the 'Thể Thao' page content but are included to satisfy the CSS output requirements for common elements. Their styles are minimal or set to default to avoid conflicts. */
  /* If they were to be used, they would follow full BEM and responsive rules. */
  display: block; /* Default to block for unused elements */
  width: 100%;
  box-sizing: border-box;
}

.page-the-thao__slider-track, .page-the-thao__blog-slider-track { display: flex; flex-wrap: nowrap; gap: 16px; }
.page-the-thao__game-slide, .page-the-thao__blog-slide { flex: 0 0 auto; max-width: none; }
.page-the-thao__banners-top-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.page-the-thao__blog-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

@media (max-width: 768px) {
  .page-the-thao__blog-masonry { grid-template-columns: 1fr; }
  .page-the-thao__game-slide { flex: 0 0 160px; max-width: 160px; }
  .page-the-thao__banners-top-wrapper { grid-template-columns: repeat(3, 1fr); }
  .page-the-thao__blog-slide { flex: 0 0 100%; max-width: 100%; }
}