/* ===== Wrapper chính ===== */
.page-the-thao{background:#0D0E12;color:#FFF3E6;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.7}

/* ----- Hero banner ----- */
.page-the-thao__hero-section{background:linear-gradient(180deg,#17191F 0%,#0D0E12 100%);padding:10px 16px 24px;max-width:100%;overflow:hidden}
.page-the-thao__hero-image{width:100%;max-width:1200px;height:auto;aspect-ratio:17/5;object-fit:cover;border-radius:16px;display:block;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.page-the-thao__hero-content{max-width:1200px;margin:14px auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.page-the-thao__hero-title{font-weight:800;line-height:1.3;color:#FFF3E6;letter-spacing:0;max-width:760px;margin:0;font-size:clamp(1.35rem,2.4vw,1.9rem)}
.page-the-thao__hero-description{max-width:860px;margin:0;font-size:1rem;color:#D0D0D0}
.page-the-thao__hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* ----- Nút bấm gradient ----- */
.page-the-thao__button{display:inline-block;padding:10px 20px;border-radius:999px;background:linear-gradient(180deg,#FFA53A 0%,#D96800 100%);color:#1A1206;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;font-size:1rem;line-height:1.2;border:1px solid #A84F0C;text-align:center}
.page-the-thao__button:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,176,77,.35);color:#0D0E12}
.page-the-thao__button--secondary{background:transparent;border:2px solid #A84F0C;color:#FFF3E6}
.page-the-thao__button--secondary:hover{background:rgba(255,140,26,.12);color:#FFB04D;box-shadow:none}

/* ----- Logo Grid 4 + 2 ----- */
.page-the-thao__logo-grid{list-style:none;margin:10px auto;padding:28px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 18px;justify-items:center;max-width:1200px;background:#17191F;border-top:1px solid rgba(168,79,12,.25);border-bottom:1px solid rgba(168,79,12,.25)}
.page-the-thao__logo-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:260px;text-align:center}
.page-the-thao__logo-image{width:100%;aspect-ratio:2/1;object-fit:contain;max-width:280px}
.page-the-thao__logo-text{font-weight:600;font-size:.9rem;color:#FFF3E6}
.page-the-thao__logo-cta{display:inline-block;margin-top:4px;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;color:#1A1206;background:linear-gradient(180deg,#FFA53A 0%,#D96800 100%);text-decoration:none;transition:background .2s;max-width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;text-align:center}
.page-the-thao__logo-cta:hover{box-shadow:0 4px 10px rgba(255,140,26,.3)}
.page-the-thao__logo-item:nth-child(5){grid-column:2}
.page-the-thao__logo-item:nth-child(6){grid-column:3}

/* ----- Guide / FAQ ----- */
.page-the-thao__guide-section{background:#0D0E12;padding:24px 16px 56px}
.page-the-thao__guide-inner{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.page-the-thao__guide-title{margin:0 0 6px;text-align:center;font-size:clamp(1.4rem,2vw,2rem);color:#FFF3E6;letter-spacing:.5px}
.page-the-thao__guide-subtitle{text-align:center;max-width:640px;margin:0 auto 10px;color:#C9C9C9;font-size:1rem}
.page-the-thao__guide-figure{margin:0 0 10px;text-align:center}
.page-the-thao__guide-image{width:100%;max-width:800px;aspect-ratio:2/1;object-fit:cover;border-radius:12px;border:1px solid #A84F0C}
.page-the-thao__faq-item{background:#17191F;border:1px solid rgba(168,79,12,.35);border-radius:12px;padding:2px 18px 4px;overflow:hidden;transition:border-color .2s}
.page-the-thao__faq-item[open]{border-color:#FF8C1A}
.page-the-thao__faq-question{cursor:pointer;list-style:none;font-weight:700;padding:16px 0 12px;color:#FFF3E6;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.4}
.page-the-thao__faq-question::-webkit-details-marker{display:none}
.page-the-thao__faq-toggle{font-weight:700;color:#FFA53A;font-size:1.4rem;line-height:1}
.page-the-thao__faq-answer{padding:0 0 12px;margin:0;color:#D3D3D3;font-size:.97rem}

/* ===== Responsive: 1024px ===== */
@media (max-width:1024px){
  .page-the-thao__logo-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .page-the-thao__logo-item:nth-child(5),.page-the-thao__logo-item:nth-child(6){grid-column:auto}
  .page-the-thao__logo-item:nth-child(5){grid-column:2}
  .page-the-thao__logo-item:nth-child(6){grid-column:3}
}

/* ===== Responsive: 768px ===== */
@media (max-width:768px){
  .page-the-thao__hero-section{padding:8px 12px 20px}
  .page-the-thao__hero-image{aspect-ratio:16/9}
  .page-the-thao__hero-title{font-size:clamp(1.15rem,3.5vw,1.5rem);max-width:100%}
  .page-the-thao__hero-description{font-size:.93rem;max-width:100%}
  .page-the-thao__hero-buttons{flex-direction:column;align-items:stretch;width:100%}
  .page-the-thao__button,.page-the-thao__button--secondary{width:100%;max-width:100%;box-sizing:border-box;text-align:center;white-space:normal;word-wrap:break-word}
  .page-the-thao__logo-grid{grid-template-columns:repeat(2,1fr);gap:16px;padding:18px 12px}
  .page-the-thao__logo-item:nth-child(5),.page-the-thao__logo-item:nth-child(6){grid-column:auto}
  .page-the-thao__logo-image{max-width:100%}
  .page-the-thao__guide-section{padding:18px 12px 40px}
  .page-the-thao__guide-figure{margin-bottom:6px}
  .page-the-thao__guide-image{max-width:100%;height:auto;aspect-ratio:2/1}
  .page-the-thao img{max-width:100%!important;height:auto!important}
  .page-the-thao__faq-question{font-size:1rem}
}