:root{--button-gradient:linear-gradient(180deg,#2B73F6 0%,#1144A6 100%)}
.page-ban-ca{color:#F3F8FF;background-color:#08162B;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;max-width:100%;overflow-x:hidden}

/* HERO section */
.page-ban-ca__hero-section{display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#0B1A33 0%,#10233F 100%);padding:0 0 24px}
.page-ban-ca__hero-image-wrapper{display:flex;justify-content:center;width:100%}
.page-ban-ca__hero-image{width:100%;max-width:1200px;height:auto;aspect-ratio:1020/300;object-fit:cover;display:block;margin:0 auto}
.page-ban-ca__hero-content{text-align:center;max-width:1100px;margin:24px auto 0;padding:0 20px}
.page-ban-ca__hero-title{color:#F3F8FF;font-weight:800;line-height:1.3;letter-spacing:0.3px;max-width:850px;margin:0 auto 16px}
.page-ban-ca__hero-description{color:#AFC4E8;max-width:850px;line-height:1.8;margin:0 auto 24px;font-size:1.05rem}
.page-ban-ca__hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.page-ban-ca__btn{display:inline-block;padding:14px 30px;border-radius:999px;text-decoration:none;font-weight:700;transition:opacity .3s,transform .3s;box-sizing:border-box;text-align:center}
.page-ban-ca__btn--primary{background:var(--button-gradient);color:#fff;box-shadow:0 4px 14px rgba(47,113,229,.6)}
.page-ban-ca__btn--secondary{background:transparent;color:#4FA8FF;border:1px solid #4FA8FF}
.page-ban-ca__btn:hover,.page-ban-ca__btn--secondary:hover{opacity:.85;transform:translateY(-2px)}
.page-ban-ca__accent-text{color:#F2C14E;font-weight:700}

/* intro */
.page-ban-ca__intro-section{padding:32px 16px;background-color:#0B1A33}
.page-ban-ca__container{max-width:1100px;margin:0 auto}
.page-ban-ca__intro-text{color:#AFC4E8;line-height:1.9;max-width:1000px;margin:0 auto}

/* section header */
.page-ban-ca__section-header{text-align:center;max-width:900px;margin:0 auto;padding:12px 16px}
.page-ban-ca__section-title{color:#F3F8FF;font-size:1.9rem;font-weight:700;letter-spacing:.2px}
.page-ban-ca__section-subtitle{color:#AFC4E8;margin-top:8px;font-size:1.05rem}

/* games grid */
.page-ban-ca__featured-game-section{padding:32px 16px;background:#08162B}
.page-ban-ca__game-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1200px;margin:0 auto}
.page-ban-ca__game-card{background-color:#10233F;border:1px solid #244D84;border-radius:20px;overflow:hidden;flex:0 1 340px;display:flex;flex-direction:column;max-width:calc(33.33% - 16px);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.page-ban-ca__card-image{width:100%;height:auto;max-width:400px;aspect-ratio:400/225;object-fit:cover;border-bottom:1px solid #1B3357}
.page-ban-ca__card-body{padding:20px 16px}
.page-ban-ca__card-title{color:#F3F8FF;font-size:1.3rem;font-weight:600;margin-bottom:10px}
.page-ban-ca__card-desc{color:#AFC4E8;font-size:0.95rem;line-height:1.6;margin-bottom:16px}
.page-ban-ca__text-link{display:inline-block;color:#F2C14E;font-weight:600;text-decoration:none}
.page-ban-ca__text-link:hover{color:#4FA8FF;text-decoration:underline}

/* guide section */
.page-ban-ca__guide-section{padding:28px 16px 36px}
.page-ban-ca__guide-inner{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;align-items:center;background:#0B1A33;padding:20px;border-radius:16px;border:1px solid #244D84}
.page-ban-ca__guide-figure{flex:1 1 380px;max-width:440px;margin:0 auto;width:100%}
.page-ban-ca__guide-figure img{width:100%;height:auto;aspect-ratio:800/400;object-fit:cover;max-width:800px;display:block;border-radius:16px}
.page-ban-ca__guide-text{flex:1 1 420px;color:#AFC4E8;line-height:1.8}
.page-ban-ca__guide-text p{margin-bottom:14px}

/* why choose */
.page-ban-ca__why-choose-section{background:#0B1A33;padding:30px 16px}
.page-ban-ca__why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto}
.page-ban-ca__why-card{background:#10233F;border:1px solid #244D84;border-radius:16px;padding:24px}
.page-ban-ca__why-title{font-size:1.1rem;font-weight:700;color:#F2C14E;margin-bottom:10px;letter-spacing:.2px}
.page-ban-ca__why-desc{color:#AFC4E8;line-height:1.7;font-size:0.95rem}

/* FAQ */
.page-ban-ca__faq-section{max-width:950px;margin:0 auto;padding:24px 16px;box-sizing:border-box}
.page-ban-ca__faq-title{color:#F3F8FF;font-size:1.8rem;text-align:center;margin-bottom:20px}
.page-ban-ca__faq-item{display:block;background-color:#10233F;border:1px solid #244D84;border-radius:14px;margin:0 0 16px;padding:0 16px;overflow:hidden}
.page-ban-ca__faq-item summary{cursor:pointer;color:#F3F8FF;font-weight:600;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.page-ban-ca__faq-item[open] summary{border-bottom:0.5px solid #1B3357}
.page-ban-ca__faq-toggle{color:#F2C14E;font-size:1.4rem;font-weight:600;margin-left:16px}
.page-ban-ca__faq-item p{color:#AFC4E8;line-height:1.9;padding-bottom:12px}

/* CTA banner */
.page-ban-ca__banner-section{text-align:center;background:linear-gradient(180deg, #10233F 0%, #0B1A33 100%);padding:48px 16px;border-top:1px solid #244D84}
.page-ban-ca__banner-title{font-size:1.7rem;color:#F3F8FF;margin-bottom:20px}
.page-ban-ca__banner-btn{display:inline-block;background:var(--button-gradient);color:#fff;padding:16px 36px;border-radius:30px;font-weight:700;text-decoration:none;font-size:1.1rem;box-shadow:0 6px 18px rgba(34,100,80,.2)}
.page-ban-ca__banner-btn:hover{opacity:.9;transform:translateY(-2px)}

/* mobile + tablet */
@media(max-width:1024px){
    .page-ban-ca__page-ban-ca__hero-title{font-size:26px}
    .page-ban-ca__why-grid{grid-template-columns:repeat(2,1fr)}
    .page-ban-ca__game-card{flex:1 1 calc(50% - 20px);max-width:calc(50% - 20px)}
    .page-ban-ca__hero-image{aspect-ratio:4/1}
}

@media(max-width:768px){
    .page-ban-ca__container,
    .page-ban-ca__section-header,
    .page-ban-ca__hero-image-wrapper,
    .page-ban-ca__guide-inner,
    .page-ban-ca__hero-content,
    .page-ban-ca__game-grid,
    .page-ban-ca__why-grid,
    .page-ban-ca__faq-section{width:100%;max-width:100%}
    .page-ban-ca__hero-section,
    .page-ban-ca__intro-section,
    .page-ban-ca__featured-game-section,
    .page-ban-ca__guide-section,
    .page-ban-ca__why-choose-section{overflow:hidden;box-sizing:border-box}
    .page-ban-ca__why-grid{grid-template-columns:1fr}
    .page-ban-ca__game-grid{display:block}
    .page-ban-ca__game-card{max-width:100%;margin-bottom:18px;flex:1 1 auto;box-sizing:border-box}
    .page-ban-ca__hero-section{padding-top:0;padding-bottom:20px}
    .page-ban-ca__hero-image{aspect-ratio:2/1;width:100%;height:auto;max-width:100%}
    .page-ban-ca__img,
    .page-ban-ca img{max-width:100%!important;height:auto!important}
    .page-ban-ca__hero-title{font-size:24px}
    .page-ban-ca__hero-description{font-size:1rem;line-height:1.6}
    .page-ban-ca__hero-actions{display:block;max-width:100%}
    .page-ban-ca__btn{display:block;max-width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;margin-bottom:12px}
    .page-ban-ca__guide-inner{flex-direction:column}
    .page-ban-ca__guide-text,
    .page-ban-ca__guide-figure{max-width:100%;flex:1}
    .page-ban-ca__banner-section{max-width:100%}
    .page-ban-ca__banner-btn{max-width:100%;box-sizing:border-box;white-space:normal;word-break:break-word}
    .page-ban-ca__section-title,.page-ban-ca__faq-title{font-size:1.5rem}
    .page-ban-ca__game-card,.page-ban-ca__why-card,.page-ban-ca__faq-item{width:100%}
}