/* === SECTION 1: HERO === */
.page-game-bai__hero-section{display:flex;flex-direction:column;padding-top:10px;margin-top:0;width:100%;overflow:hidden;background-color:#f8f9fa}
.page-game-bai__hero-image{width:100%;display:block}
.page-game-bai__hero-image img{width:100%;height:auto;display:block}
.page-game-bai__hero-content{padding:20px 16px;text-align:center;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box}
.page-game-bai__main-title{font-weight:700;line-height:1.3;letter-spacing:-0.5px;color:#26A9E0;margin-bottom:15px}
.page-game-bai__hero-desc{font-size:16px;line-height:1.6;color:#333333;margin-bottom:25px}
.page-game-bai__hero-cta{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.page-game-bai__btn{display:inline-block;padding:12px 30px;border-radius:8px;text-decoration:none;font-weight:600;font-size:16px;transition:all 0.3s ease;box-sizing:border-box;max-width:100%;white-space:normal;word-wrap:break-word}
.page-game-bai__btn--primary{background-color:#EA7C07;color:#FFFFFF;border:2px solid #EA7C07}
.page-game-bai__btn--primary:hover{background-color:#c96a06;border-color:#c96a06;transform:translateY(-2px);box-shadow:0 4px 10px rgba(234,124,7,0.3)}
.page-game-bai__btn--secondary{background-color:#26A9E0;color:#FFFFFF;border:2px solid #26A9E0}
.page-game-bai__btn--secondary:hover{background-color:#1e8bb8;border-color:#1e8bb8;transform:translateY(-2px);box-shadow:0 4px 10px rgba(38,169,224,0.3)}

/* === SECTION 2: INTRO === */
.page-game-bai__intro-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#FFFFFF}
.page-game-bai__intro-section h2{text-align:center;margin-bottom:20px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__intro-section p{font-size:16px;line-height:1.7;color:#333333;margin-bottom:15px;text-align:justify}

/* === SECTION 3: GAMESHOW === */
.page-game-bai__gameshow-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#f8f9fa}
.page-game-bai__gameshow-section h2{text-align:center;margin-bottom:30px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__gameshow-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}
.page-game-bai__gameshow-card{background-color:#FFFFFF;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.05);text-align:center;transition:transform 0.3s ease}
.page-game-bai__gameshow-card img{width:100%;height:auto;aspect-ratio:214/300;object-fit:cover;display:block}
.page-game-bai__gameshow-title{font-weight:600;color:#26A9E0;padding:10px 5px;font-size:1rem;margin:0}

/* === SECTION 4: OVERVIEW === */
.page-game-bai__overview-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#FFFFFF}
.page-game-bai__overview-section h2{text-align:center;margin-bottom:20px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__overview-section img{max-width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;margin:0 auto 20px auto;border-radius:10px}
.page-game-bai__overview-section p{font-size:16px;line-height:1.7;color:#333333;margin-bottom:15px;text-align:justify}

/* === SECTION 5: STRENGTHS === */
.page-game-bai__strengths-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#f8f9fa}
.page-game-bai__strengths-section h2{text-align:center;margin-bottom:30px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__strengths-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.page-game-bai__strength-item{background-color:#FFFFFF;padding:20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.page-game-bai__strength-title{font-weight:600;color:#26A9E0;margin-bottom:10px;font-size:1.2rem}
.page-game-bai__strength-item p{font-size:15px;line-height:1.6;color:#333333;margin:0}

/* === SECTION 6: LOBBIES === */
.page-game-bai__lobbies-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#FFFFFF}
.page-game-bai__lobbies-section h2{text-align:center;margin-bottom:20px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__lobbies-section img{max-width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;margin:0 auto 20px auto;border-radius:10px}
.page-game-bai__lobbies-section p{font-size:16px;line-height:1.7;color:#333333;margin-bottom:15px;text-align:justify}
.page-game-bai__lobby-list{list-style-type:disc;padding-left:20px;color:#333333;font-size:16px;line-height:1.7}
.page-game-bai__lobby-list li{margin-bottom:10px}

/* === SECTION 7: FAQ === */
.page-game-bai__faq-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#f8f9fa}
.page-game-bai__faq-section h2{text-align:center;margin-bottom:30px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__faq-list{max-width:800px;margin:0 auto}
.page-game-bai__faq-item{background-color:#FFFFFF;border-radius:8px;margin-bottom:15px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.page-game-bai__faq-question{font-weight:600;color:#26A9E0;padding:15px 20px;margin:0;cursor:pointer;position:relative;font-size:1.1rem}
.page-game-bai__faq-question::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:#26A9E0;transition:transform 0.3s ease}
.page-game-bai__faq-question.is-active::after{content:'-';transform:translateY(-50%) rotate(180deg)}
.page-game-bai__faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-out}
.page-game-bai__faq-answer p{margin:0;padding-bottom:15px;font-size:15px;line-height:1.6;color:#333333}

/* === SECTION 8: BLOG === */
.page-game-bai__blog-section{max-width:1100px;margin:0 auto;padding:40px 16px;background-color:#FFFFFF}
.page-game-bai__blog-section h2{text-align:center;margin-bottom:30px;color:#26A9E0;font-weight:700;font-size:1.8rem}
.page-game-bai__blog-track{display:flex;gap:20px;overflow:hidden;padding-bottom:10px}
.page-game-bai__blog-card{flex:0 0 calc(25% - 15px);background-color:#FFFFFF;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.05);transition:transform 0.3s ease}
.page-game-bai__blog-card img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.page-game-bai__blog-title{padding:15px;margin:0;font-size:1rem;line-height:1.4;text-align:center}
.page-game-bai__blog-title a{color:#26A9E0;text-decoration:none;font-weight:600;display:block}
.page-game-bai__blog-title a:hover{text-decoration:underline}

/* === RESPONSIVE (768px) === */
@media (max-width: 768px) {
  .page-game-bai__hero-content{padding:15px 10px}
  .page-game-bai__main-title{font-size:1.5rem}
  .page-game-bai__hero-desc{font-size:14px}
  .page-game-bai__hero-cta{flex-direction:column;gap:10px;width:100%;max-width:100%;overflow:hidden}
  .page-game-bai__btn{width:100%;max-width:100%;font-size:15px;padding:10px 15px}
  .page-game-bai__intro-section h2,.page-game-bai__gameshow-section h2,.page-game-bai__overview-section h2,.page-game-bai__strengths-section h2,.page-game-bai__lobbies-section h2,.page-game-bai__faq-section h2,.page-game-bai__blog-section h2{font-size:1.5rem}
  .page-game-bai__gameshow-grid{grid-template-columns:1fr 1fr;gap:10px}
  .page-game-bai__strengths-list{grid-template-columns:1fr}
  .page-game-bai__blog-track{flex-wrap:nowrap;overflow-x:auto;gap:15px;scroll-snap-type:x mandatory}
  .page-game-bai__blog-card{flex-basis:80%;scroll-snap-align:start}
  .page-game-bai__blog-title{font-size:0.9rem;padding:10px}
  .page-game-bai img{max-width:100%!important;height:auto!important;display:block}
  .page-game-bai__lobby-list{font-size:15px}
}