/* style/casino.css */

/* Biến màu sắc */
:root {
  --primary-color: #FFD700;
  --secondary-color: #DC143C;
  --dark-bg-color: #222;
  --light-text-color: #ffffff;
  --dark-text-color: #333333;
  --card-bg-dark: rgba(255, 255, 255, 0.1);
  --card-bg-light: #ffffff;
  --border-color: #e0e0e0;
}

/* Các kiểu chung cho trang casino */
.page-casino {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--light-text-color); /* Body background is dark (#222), so use light text */
  background-color: var(--dark-bg-color);
}

.page-casino__section {
  padding: 60px 0;
  text-align: center;
}

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

.page-casino__section-title {
  font-size: 36px;
  color: var(--primary-color);
  margin-bottom: 40px;
  font-weight: bold;
  text-transform: uppercase;
}

.page-casino__text-block {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--light-text-color);
}

.page-casino__text-block a {
  color: var(--primary-color);
  text-decoration: none;
}

.page-casino__text-block a:hover {
  text-decoration: underline;
}

.page-casino__keyword {
  color: var(--primary-color);
  font-weight: bold;
}

/* HERO Section */
.page-casino__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  padding-top: var(--header-offset, 120px);
  background: linear-gradient(135deg, var(--dark-bg-color) 0%, rgba(0,0,0,0.8) 50%, var(--dark-bg-color) 100%);
}

.page-casino__hero-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-casino__hero-image {
  width: 100%;
  margin-bottom: 30px;
}

.page-casino__hero-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-casino__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 15px;
}

.page-casino__hero-title {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.page-casino__hero-description {
  font-size: 20px;
  color: var(--light-text-color);
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-casino__cta-button {
  display: inline-block;
  padding: 15px 40px;
  background: var(--primary-color);
  color: var(--dark-text-color);
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: none;
}

.page-casino__cta-button:hover {
  background: var(--secondary-color);
  color: var(--light-text-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.page-casino__cta-button--large {
  padding: 18px 50px;
  font-size: 22px;
}

/* Introduction Section */
.page-casino__introduction-section {
  background-color: var(--dark-bg-color);
  color: var(--light-text-color);
}

/* Games Section */
.page-casino__games-section {
  background-color: #1a1a1a;
}

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

.page-casino__card {
  background: var(--card-bg-dark);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  padding-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-casino__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.page-casino__card-image {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover;
  margin-bottom: 20px;
}

.page-casino__card-title {
  font-size: 24px;
  color: var(--primary-color);
  margin-bottom: 10px;
  padding: 0 15px;
}

.page-casino__card-link {
  color: var(--primary-color);
  text-decoration: none;
}

.page-casino__card-link:hover {
  text-decoration: underline;
}

.page-casino__card-text {
  font-size: 16px;
  color: var(--light-text-color);
  padding: 0 15px;
  margin-bottom: 20px;
}

.page-casino__btn-secondary {
  display: inline-block;
  padding: 10px 25px;
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page-casino__btn-secondary:hover {
  background: var(--primary-color);
  color: var(--dark-text-color);
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

/* Why Choose Section */
.page-casino__why-choose-section {
  background-color: var(--primary-color);
  color: var(--dark-text-color);
}

.page-casino__why-choose-section .page-casino__section-title {
  color: var(--dark-text-color);
}

.page-casino__why-choose-section .page-casino__text-block {
  color: var(--dark-text-color);
}

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

.page-casino__feature-item {
  background: rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  transition: background-color 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.page-casino__feature-item:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.page-casino__feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.page-casino__feature-title {
  font-size: 22px;
  color: var(--dark-text-color);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-casino__feature-text {
  font-size: 16px;
  color: var(--dark-text-color);
}

.page-casino__feature-text a {
  color: var(--secondary-color);
  text-decoration: none;
}

.page-casino__feature-text a:hover {
  text-decoration: underline;
}

.page-casino__btn-primary {
  display: inline-block;
  padding: 15px 40px;
  background: var(--secondary-color);
  color: var(--light-text-color);
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: none;
}

.page-casino__btn-primary:hover {
  background: #a8102f; /* Slightly darker red */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.page-casino__button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* How to Start Section */
.page-casino__how-to-start-section {
  background-color: var(--dark-bg-color);
  color: var(--light-text-color);
}

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

.page-casino__step-item {
  background: var(--card-bg-dark);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-casino__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--dark-text-color);
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.page-casino__step-title {
  font-size: 22px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.page-casino__step-text {
  font-size: 16px;
  color: var(--light-text-color);
}

.page-casino__step-text a {
  color: var(--primary-color);
  text-decoration: none;
}

.page-casino__step-text a:hover {
  text-decoration: underline;
}

/* Tips Section */
.page-casino__tips-section {
  background-color: #1a1a1a;
  color: var(--light-text-color);
}

.page-casino__tips-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 40px auto 0 auto;
  text-align: left;
}

.page-casino__tips-list li {
  background: var(--card-bg-dark);
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 8px;
  font-size: 17px;
  color: var(--light-text-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-left: 5px solid var(--primary-color);
}

.page-casino__tips-list li strong {
  color: var(--primary-color);
}

.page-casino__tips-list li a {
  color: var(--primary-color);
  text-decoration: none;
}

.page-casino__tips-list li a:hover {
  text-decoration: underline;
}

/* FAQ Section */
.page-casino__faq-section {
  background-color: var(--dark-bg-color);
  color: var(--light-text-color);
}

.page-casino__faq-list {
  max-width: 900px;
  margin: 40px auto 0 auto;
}

/* FAQ容器样式 */
.page-casino__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--card-bg-dark);
}

/* FAQ默认状态 - 答案隐藏 */
.page-casino__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 15px;
  opacity: 0;
  color: var(--light-text-color);
  text-align: left;
}

.page-casino__faq-answer p {
  margin: 0;
  padding-bottom: 5px;
}

.page-casino__faq-answer a {
  color: var(--primary-color);
  text-decoration: none;
}

.page-casino__faq-answer a:hover {
  text-decoration: underline;
}

/* FAQ展开状态 - 🚨 使用!important và đủ lớn max-height để đảm bảo có thể mở rộng */
.page-casino__faq-item.active .page-casino__faq-answer {
  max-height: 2000px !important; /* 🚨 Sử dụng!important để đảm bảo ưu tiên, giá trị đủ lớn để chứa mọi nội dung */
  padding: 20px 15px !important;
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 5px 5px;
}

/* Câu hỏi样式 */
.page-casino__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: var(--card-bg-dark);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  text-align: left;
}

.page-casino__faq-question:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-color);
}

.page-casino__faq-question:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Tiêu đề câu hỏi样式 */
.page-casino__faq-question h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none; /* Ngăn h3 chặn sự kiện click */
  color: var(--primary-color);
}

/* Chuyển đổi biểu tượng */
.page-casino__faq-toggle {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: var(--primary-color);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
  pointer-events: none; /* Ngăn biểu tượng chặn sự kiện click */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.page-casino__faq-item.active .page-casino__faq-toggle {
  color: var(--secondary-color);
  transform: rotate(45deg); /* Thêm hiệu ứng xoay cho dấu '+' thành 'x' */
}

/* Call to Action Section */
.page-casino__call-to-action-section {
  background-color: var(--secondary-color);
  color: var(--light-text-color);
  padding: 80px 0;
}

.page-casino__call-to-action-section .page-casino__section-title {
  color: var(--light-text-color);
}

.page-casino__call-to-action-section .page-casino__text-block {
  color: var(--light-text-color);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .page-casino__hero-section {
    padding-top: var(--header-offset, 120px) !important;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .page-casino__hero-title {
    font-size: 32px;
  }

  .page-casino__hero-description {
    font-size: 16px;
  }

  .page-casino__cta-button {
    padding: 12px 30px;
    font-size: 16px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-left: auto;
    margin-right: auto;
  }

  .page-casino__cta-button--large {
    padding: 15px 40px;
    font-size: 18px;
  }

  .page-casino__section {
    padding: 40px 0;
  }

  .page-casino__section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .page-casino__text-block {
    font-size: 16px;
  }

  .page-casino__container {
    padding: 0 15px;
  }

  .page-casino__game-cards,
  .page-casino__features-grid,
  .page-casino__steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-casino__card-image {
    height: 180px;
  }

  .page-casino__card-title {
    font-size: 20px;
  }

  .page-casino__btn-secondary,
  .page-casino__btn-primary {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-casino__button-group {
    flex-direction: column;
    gap: 15px;
  }

  .page-casino__faq-question {
    padding: 15px;
    flex-wrap: wrap;
  }
  
  .page-casino__faq-question h3 {
    font-size: 15px;
    margin-bottom: 0;
    width: calc(100% - 40px);
  }
  
  .page-casino__faq-toggle {
    margin-left: 10px;
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
  
  .page-casino__faq-answer {
    padding: 0 15px;
  }
  
  .page-casino__faq-item.active .page-casino__faq-answer {
    padding: 15px !important;
  }

  /* Responsive images */
  .page-casino img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .page-casino__section,
  .page-casino__card,
  .page-casino__container,
  .page-casino__game-cards,
  .page-casino__features-grid,
  .page-casino__steps-grid,
  .page-casino__button-group,
  .page-casino__faq-list,
  .page-casino__faq-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-casino__tips-list {
    padding: 0 15px;
  }
}

/* Ensure images retain original colors */
.page-casino img {
  filter: none; /* Absolutely no CSS filters to change image colors */
}

/* Content area images CSS size lower bound (by scope, not class name) */
.page-casino img {
  min-width: 200px;
  min-height: 200px;
  object-fit: cover;
}

/* Override for smaller icons in feature sections to meet min-size requirement, if they are content images */
/* If these are truly icons, they would be handled by shared or SVG. Assuming they are small content images, they must meet 200x200. */
/* However, the prompt specifically allows 64x64 for feature icons if they are not content images. Re-reading, the 64x64 for feature-icon is from the example, so I should ensure it's not a small icon, or replace it if it's meant to be a content image. The prompt says '禁止所有小图标'. I'll make sure the imageRequirements for icons are 200x200 if they are content. If they are decorative and small, they should be SVG or removed. Given the prompt's strong stance against small images, I will make the feature icons larger to meet the 200x200 minimum, or remove them if they are purely decorative and can't be large. The current example uses 64x64. I'll make the `width` and `height` attributes 64x64 but ensure the `imageRequirements` specifies a larger image to be generated, then CSS will scale it down if needed, or I should use a different approach if they are truly decorative. The prompt is very strict on 'any width or height less than 200 pixels'. I will adjust the feature-icon to be 200x200 in the `img` tag and `imageRequirements` to be safe. */

.page-casino__feature-icon {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  object-fit: contain;
  filter: none; /* Ensure no filter is applied */
}