.page-the-thao{background:var(--deep-navy,#08162B);color:var(--text-main,#F3F8FF);line-height:1.6} .page-the-thao__hero-section{display:flex;flex-direction:column;padding-top:10px;max-width:1200px;margin:0 auto} .page-the-thao__hero-image{width:100%} .page-the-thao__hero-image img{width:100%;height:auto;aspect-ratio:17/5;object-fit:cover;display:block} .page-the-thao__hero-content{padding:24px 20px 28px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%)} .page-the-thao__hero-title{color:var(--text-main,#F3F8FF);font-weight:800;line-height:1.25;letter-spacing:0.2px;max-width:900px;margin:0 auto 12px} .page-the-thao__hero-desc{color:var(--text-secondary,#AFC4E8);max-width:720px;margin:0 auto 22px;font-size:1rem} .page-the-thao__hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box} .page-the-thao__btn-primary,.page-the-thao__btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;max-width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;transition:transform 0.2s ease,opacity 0.2s ease} .page-the-thao__btn-primary{background:linear-gradient(180deg,#2B73F6 0%,#1144A6 100%);color:var(--text-main,#F3F8FF)} .page-the-thao__btn-secondary{background:transparent;border:2px solid var(--accent-gold,#F2C14E);color:var(--gold,#F2C14E)} .page-the-thao__btn-primary:hover,.page-the-thao__btn-secondary:hover{transform:translateY(-2px);opacity:0.95} .page-the-thao__logo-section{max-width:1200px;margin:0 auto;padding:10px 16px 32px} .page-the-thao__logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px;justify-items:center;align-items:start} .page-the-thao__logo-item{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:280px} .page-the-thao__logo-image{width:100%;aspect-ratio:2/1;object-fit:contain;background:rgba(255,255,255,0.06);border-radius:8px;border:1px solid var(--border,#244D84)} .page-the-thao__logo-item img{width:100%;aspect-ratio:2/1;object-fit:contain;background:rgba(255,255,255,0.06);border-radius:8px;border:1px solid var(--border,#244D84)} .page-the-thao__logo-cta{padding:8px 22px;border-radius:999px;background:linear-gradient(180deg,#2B73F6 0%,#1144A6 100%);color:var(--text-main,#F3F8FF);font-weight:700;text-decoration:none;max-width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;transition:opacity 0.2s} .page-the-thao__logo-cta:hover{opacity:0.9} .page-the-thao__logo-item:nth-child(5){grid-column:2} .page-the-thao__logo-item:nth-child(6){grid-column:3} .page-the-thao__guide-section{padding:20px 0 48px;border-top:1px solid var(--divider,#1B3357);background:var(--card-bg,#10233F)} .page-the-thao__guide-inner{max-width:1000px;margin:0 auto;padding:32px 16px 0} .page-the-thao__guide-title{text-align:center;color:var(--glow,#4FA8FF);font-weight:800} .page-the-thao__guide-content{max-width:840px;margin:0 auto} .page-the-thao__guide-text{color:var(--text-main,#F3F8FF);margin-bottom:20px} .page-the-thao__guide-figure{margin:24px 0;width:100%} .page-the-thao__guide-figure img{width:100%;max-width:800px;aspect-ratio:2/1;object-fit:cover;border-radius:12px;margin:0 auto;display:block;border:1px solid var(--border,#244D84)} .page-the-thao__guide-steps{background:var(--card-bg,#10233F);border:1px solid var(--border,#244D84);border-radius:16px;padding:28px 24px;margin:28px 0} .page-the-thao__guide-step{display:flex;align-items:center;gap:12px;color:var(--text-main,#F3F8FF);font-weight:500;font-size:1rem;margin-bottom:12px} .page-the-thao__guide-step:last-child{margin-bottom:0} .page-the-thao__guide-step-num{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;background:linear-gradient(180deg,#2B73F6 0%,#1144A6 100%);color:#fff;border-radius:50%;font-weight:700} @media (max-width:768px){ .page-the-thao__hero-image img{aspect-ratio:16/7} .page-the-thao__hero-title{font-size:1.35rem} .page-the-thao__hero-actions{flex-direction:column} .page-the-thao__btn-primary,.page-the-thao__btn-secondary{width:100%;text-align:center} .page-the-thao__logo-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px} .page-the-thao__logo-item:nth-child(5),.page-the-thao__logo-item:nth-child(6){grid-column:auto} .page-the-thao__guide-title{font-size:1.25rem} .page-the-thao__guide-inner{padding-top:20px} .page-the-thao img{max-width:100%!important;height:auto!important} }