/*
  GLOBAL INSTRUCTIONS FOR CSS FIELD (FROM PROMPT):
  The following homepage-specific media queries for 1023px and 1024px are included as per global instructions, even though this is not the homepage. 
  They define layout for game trial, hero brand, and jackpot sections, which are not present on this 'Tin Tức' page. 
  The 768px media queries below are for general responsive elements applicable to all pages, including this one.
*/

/* Homepage-specific game trial layout reset for tablets (max-width: 1023px) - GLOBAL INSTRUCTION */
@media (max-width: 1023px) {
  .page-news__home-hero {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .page-news__hero-brand,
  .page-news__hero-jackpot {
    display: none !important;
  }
  .page-news__game-trial {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 auto;
    padding: 0 0 12px !important;
    box-sizing: border-box;
  }
  .page-news__game-trial-shell {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-news__game-trial-topbar,
  .page-news__game-trial-bottombar {
    display: none !important;
  }
  .page-news__game-trial-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 768;
    flex: none !important;
    min-height: 240px;
    max-height: none !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-news__game-trial-frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    border: none;
    z-index: 1;
    overflow: hidden;
  }
  .page-news__game-trial-overlay {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .page-news__game-trial-start {
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

/* Homepage-specific game trial layout for desktops (min-width: 1024px) - GLOBAL INSTRUCTION */
@media (min-width: 1024px) {
  .page-news__home-hero {
    display: grid;
    grid-template-columns: 26% 48% 26%;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 24px;
    box-sizing: border-box;
  }
  .page-news__hero-brand,
  .page-news__hero-jackpot,
  .page-news__game-trial {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-news__game-trial {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-news__game-trial-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 300px;
    box-sizing: border-box;
  }
  .page-news__game-trial-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
  }
  .page-news__game-trial-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
  }
  .page-news__hero-jackpot-claim {
    background: #c62828 !important;
    color: #fff !important;
  }
  /* Placeholder for other PC-specific modules if this were the homepage */
  .page-news__promo-strip {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
  }
  .page-news__promo-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .page-news__promo-card-image {
    width: 100px;
    height: auto;
    margin-right: 15px;
  }
  .page-news__hot-games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
  }
  .page-news__hot-games-card {
    text-align: center;
  }
  .page-news__hot-games-name,
  .page-news__hot-games-rtp,
  .page-news__hot-games-desc {
    display: block;
  }
}

/* General page styles for 'Tin Tức' */
.page-news {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--text-main-color, #FFF6D6); /* Default text color for dark background */
  background-color: var(--background-color, #0A0A0A);
}

.page-news__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.page-news__section-spacing {
  padding: 40px 0;
}

/* Hero Section */
.page-news__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 450px;
  overflow: hidden;
  padding-top: 10px; /* Small padding-top as shared.css handles body padding */
}

.page-news__hero-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.page-news__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5); /* Slightly darken image for text readability */
}

.page-news__hero-content-wrapper {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 15px;
  color: #FFF6D6;
  max-width: 900px;
}

.page-news__main-title {
  font-size: clamp(2em, 4vw, 3.5em);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #FFD36B;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.page-news__intro-text {
  font-size: 1.1em;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Button */
.page-news__cta-button {
  display: inline-block;
  padding: 14px 30px;
  background: linear-gradient(180deg, #FFD86A 0%, #DDA11D 100%);
  color: #111111; /* Dark text for light button */
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1em;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-news__cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-news__cta-button--secondary {
  background: transparent;
  border: 2px solid #FFD36B;
  color: #FFF6D6;
}

.page-news__cta-button--secondary:hover {
  background: rgba(255, 211, 107, 0.1);
}

/* Section Titles */
.page-news__section-title {
  font-size: 2.5em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #FFD36B;
}

.page-news__section-title--light {
  color: #FFF6D6;
}

/* News Grid */
.page-news__news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.page-news__news-card {
  background: var(--card-bg-color, #111111); /* Dark card background */
  border: 1px solid var(--border-color, #3A2A12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.page-news__news-card:hover {
  transform: translateY(-5px);
}

.page-news__card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.page-news__card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.page-news__card-content {
  padding: 20px;
  color: #FFF6D6; /* Light text for dark card */
}

.page-news__card-title {
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 10px;
  color: #FFD36B;
}

.page-news__card-meta {
  font-size: 0.9em;
  color: #AAA;
  margin-bottom: 15px;
}

.page-news__card-excerpt {
  font-size: 1em;
  color: #E0E0E0;
}

.page-news__view-all-wrapper {
  text-align: center;
}

/* About Section */
.page-news__about-section {
  background: var(--main-color, #F2C14E);
  color: #111111; /* Dark text for light background */
  padding: 60px 0;
  text-align: center;
}

.page-news__about-text {
  font-size: 1.15em;
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 1.8;
  color: #333333;
}

.page-news__about-cta .page-news__cta-button {
  background: #111111;
  color: #FFD36B;
}

.page-news__about-cta .page-news__cta-button:hover {
  background: #333333;
}

/* FAQ Section */
details.page-news__faq-item {
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #3A2A12);
  overflow: hidden;
  background: var(--card-bg-color, #111111);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
details.page-news__faq-item summary.page-news__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.3s ease;
  color: #FFD36B;
  font-weight: 600;
}
details.page-news__faq-item summary.page-news__faq-question::-webkit-details-marker {
  display: none;
}
details.page-news__faq-item summary.page-news__faq-question:hover {
  background: rgba(255, 211, 107, 0.05);
}
.page-news__faq-qtext {
  flex: 1;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: left;
}
.page-news__faq-toggle {
  font-size: 28px;
  font-weight: bold;
  color: #FFD36B;
  flex-shrink: 0;
  margin-left: 15px;
  width: 30px;
  text-align: center;
}
details.page-news__faq-item .page-news__faq-answer {
  padding: 0 25px 20px;
  background: rgba(17, 17, 17, 0.8); /* Slightly lighter dark background for answer */
  border-radius: 0 0 10px 10px;
  color: #E0E0E0;
  font-size: 1em;
}

/* Mobile Responsive (max-width: 768px) */
@media (max-width: 768px) {
  .page-news__hero-section {
    min-height: 300px;
    padding-top: 10px; /* Ensure small top padding */
  }

  .page-news__main-title {
    font-size: clamp(1.8em, 7vw, 2.5em);
    margin-bottom: 15px;
  }

  .page-news__intro-text {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .page-news__cta-button {
    padding: 12px 20px;
    font-size: 1em;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-bottom: 10px; /* Add some spacing if multiple buttons stack */
  }

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

  .page-news__news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .page-news__card-title {
    font-size: 1.2em;
  }

  .page-news__card-meta,
  .page-news__card-excerpt {
    font-size: 0.85em;
  }

  .page-news__about-text {
    font-size: 1em;
  }

  details.page-news__faq-item summary.page-news__faq-question {
    padding: 15px 20px;
  }

  .page-news__faq-qtext {
    font-size: 1em;
  }

  .page-news__faq-toggle {
    font-size: 24px;
    width: 24px;
  }

  details.page-news__faq-item .page-news__faq-answer {
    padding: 0 20px 15px;
  }

  /* Mobile image specific rules */
  .page-news img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-news__section,
  .page-news__container,
  .page-news__news-card,
  .page-news__about-section,
  .page-news__faq-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-news__cta-buttons,
  .page-news__button-group,
  .page-news__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
    display: flex; /* Ensure flex context for wrap */
    flex-direction: column; /* Stack buttons vertically on mobile */
  }
}

/* Additional CSS for homepage-specific elements that might be globally included by instruction (as per prompt) */
.page-news__game-trial-overlay {
  z-index: 5;
  pointer-events: auto;
}
.page-news__game-trial-overlay.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
.page-news__game-trial-start {
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
}
.page-news__game-trial-shell {
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 10px;
  overflow: hidden;
}
.page-news__reward-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.page-news__reward-modal-close {
  /* Styles for the close button in the reward modal */
  position: absolute;
  top: 15px;
  right: 15px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}