/* === Reset scoped & base === */
.page-index-tham-gia{
    background:#0A0A0A;
    color:#FFF6D6;
    max-width:100%;
    overflow-x:hidden;
}
.page-index-tham-gia__container{
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
    box-sizing:border-box;
}
.page-index-tham-gia__container img,
.page-index-tham-gia img{
    max-width:100%;
    height:auto;
}
.page-index-tham-gia__button{
    display:inline-block;
    padding:16px 36px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    font-size:1rem;
    line-height:1.2;
    text-align:center;
    transition:transform .2s ease,box-shadow .2s ease;
    border:none;
    cursor:pointer;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    overflow-wrap:break-word;
}
.page-index-tham-gia__button--primary{
    background:linear-gradient(180deg,#FFD86A 0%,#DDA11D 100%);
    color:#111111;
    box-shadow:0 4px 15px rgba(255,211,107,.3);
}
.page-index-tham-gia__button--secondary{
    background:transparent;
    color:#FFF6D6;
    border:1px solid #FFD36B;
}
.page-index-tham-gia__button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(242,193,78,.35);
}

/* === Hero Banner (image on top, text below) === */
.page-index-tham-gia__hero-section{
    padding-top:10px;
    background:#0A0A0A;
    text-align:center;
}
.page-index-tham-gia__hero-image{
    width:100%;
}
.page-index-tham-gia__hero-image img{
    width:100%;
    height:auto;
    aspect-ratio:17/5;
    object-fit:cover;
    display:block;
    border-radius:16px;
    max-width:1400px;
    margin:0 auto;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.page-index-tham-gia__hero-content{
    padding:24px 16px;
    max-width:1000px;
    margin:0 auto;
    box-sizing:border-box;
}
.page-index-tham-gia__hero-title{
    font-weight:800;
    line-height:1.25;
    color:#FFF6D6;
    letter-spacing:.25px;
    text-shadow:0 2px 8px rgba(242,193,78,.2);
    font-size:clamp(1.5rem, 4vw, 2.6rem);
    max-width:800px;
    margin:0 auto 12px;
    text-align:center;
}
.page-index-tham-gia__hero-subtitle{
    font-size:clamp(.98rem, 1.2vw, 1.18rem);
    color:#FFF6D6;
    line-height:1.6;
    margin:0 auto 28px;
    opacity:.9;
    max-width:820px;
    text-align:center;
}
.page-index-tham-gia__hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    align-items:center;
    max-width:100%;
}
.page-index-tham-gia__hero-actions .page-index-tham-gia__button{
    flex:0 1 auto;
    min-width:160px;
    margin:4px 0;
}

/* === Logo grid: first 4 col, items 5 & 6 centered below === */
.page-index-tham-gia__logo-section{
    padding:28px 16px;
    background:#0A0A0A;
}
.page-index-tham-gia__logo-title{
    text-align:center;
    font-weight:700;
    color:#FFF6D6;
    margin:0 0 24px;
    font-size:clamp(1.4rem, 2vw, 2rem);
}
.page-index-tham-gia__logo-title::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    border-radius:2px;
    background:linear-gradient(90deg,#F2C14E,#FFD36B);
    margin:10px auto 0;
}
.page-index-tham-gia__logo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px 20px;
    max-width:1080px;
    margin:0 auto;
    padding:8px 0;
}
.page-index-tham-gia__logo-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    background:#111111;
    border:1px solid #3A2A12;
    border-radius:14px;
    padding:18px;
    box-sizing:border-box;
    transition:all .25s ease;
    justify-content:space-between;
}
.page-index-tham-gia__logo-item:hover{
    border-color:#FFD36B;
    box-shadow:0 6px 18px rgba(242,193,78,.15);
}
.page-index-tham-gia__logo-image{
    width:100%;
    height:auto;
    aspect-ratio:2/1;
    object-fit:contain;
    display:block;
    border-radius:8px;
    background:#1a1a1a;
    padding:6px;
}
.page-index-tham-gia__logo-cta{
    display:inline-block;
    padding:10px 22px;
    border-radius:30px;
    background:linear-gradient(180deg,#FFD86A 0%,#DDA11D 100%);
    color:#111111;
    font-weight:700;
    text-decoration:none;
    font-size:.9rem;
    line-height:1.2;
    text-align:center;
    transition:all .2s;
}
.page-index-tham-gia__logo-cta:hover{
    transform:scale(1.04);
    box-shadow:0 4px 10px rgba(242,193,78,.3);
}
.page-index-tham-gia__logo-item:nth-child(5){
    grid-column:2;
}
.page-index-tham-gia__logo-item:nth-child(6){
    grid-column:3;
}

/* === Guide steps (blog style) === */
.page-index-tham-gia__guide-section{
    background:#0A0A0A;
    padding-top:20px;
}
.page-index-tham-gia__guide-inner{
    max-width:960px;
    margin:0 auto;
    padding:24px 16px 48px;
    box-sizing:border-box;
}
.page-index-tham-gia__guide-title{
    text-align:center;
    color:#FFF6D6;
    font-size:clamp(1.5rem,2.3vw,2rem);
    margin:0 0 16px;
    text-shadow:0 2px 10px rgba(242,193,78,.2);
}
.page-index-tham-gia__guide-title::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:linear-gradient(90deg,#F2C14E,#FFD36B);
    margin:12px auto 0;
    border-radius:4px;
}
.page-index-tham-gia__guide-intro{
    text-align:center;
    color:#FFF6D6;
    line-height:1.6;
    max-width:700px;
    margin:0 auto 32px;
    font-size:1rem;
    opacity:.88;
}
.page-index-tham-gia__guide-article{
    background:#111111;
    border:1px solid #3A2A12;
    border-radius:16px;
    padding:28px 28px 24px;
    margin:0 0 32px;
    box-sizing:border-box;
    overflow:hidden;
}
.page-index-tham-gia__guide-article h3{
    color:#F2C14E;
    font-size:1.25rem;
    margin:0 0 16px;
    line-height:1.4;
}
.page-index-tham-gia__guide-article p{
    color:#FFF6D6;
    font-size:1rem;
    line-height:1.75;
    margin:12px 0 0;
    opacity:.95;
}
.page-index-tham-gia__guide-article p strong{
    color:#FFD36B;
    font-weight:700;
}
.page-index-tham-gia__guide-article .page-index-tham-gia__guide-figure{
    margin:0 0 16px;
}
.page-index-tham-gia__guide-figure img{
    width:100%;
    max-width:760px;
    aspect-ratio:2/1;
    object-fit:cover;
    border-radius:10px;
    display:block;
    margin:0 auto;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
    border:1px solid #3A2A12;
}

/* === FAQ === */
.page-index-tham-gia__faq-section{
    max-width:760px;
    margin:10px auto 0;
    border-top:1px solid #3A2A12;
    padding-top:16px;
}
.page-index-tham-gia__faq-section h3{
    color:#FFF6D6;
    font-size:1.4rem;
    text-align:center;
    margin:0 0 16px;
}
.page-index-tham-gia__faq-item{
    background:#111111;
    border:1px solid #3A2A12;
    border-radius:10px;
    padding:8px;
    margin:10px 0;
}
.page-index-tham-gia__faq-item summary{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    padding:10px;
    font-weight:600;
    color:#FFF6D6;
    list-style:none;
    outline:none;
    border-radius:8px;
    background:transparent;
    transition:background .2s;
}
.page-index-tham-gia__faq-item summary::-webkit-details-marker{
    display:none;
}
.page-index-tham-gia__faq-item summary:hover{
    background:rgba(242,193,78,.08);
}
.page-index-tham-gia__faq-toggle{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#FFD86A 0%,#DDA11D 100%);
    color:#111111;
    border-radius:50%;
    font-weight:900;
    font-size:1rem;
    line-height:1;
    transition:background .2s;
}
.page-index-tham-gia__faq-item p{
    padding:8px 14px 12px;
    margin:0;
    line-height:1.6;
    color:#FFF6D6;
    font-size:.98rem;
    border-top:1px solid #3A2A12;
}

/* === Bottom CTA === */
.page-index-tham-gia__cta-bottom{
    max-width:760px;
    margin:36px auto 0;
}
.page-index-tham-gia__cta-inner{
    background:#111111;
    border:1px solid #3A2A12;
    border-radius:16px;
    padding:36px 28px;
    text-align:center;
    color:#FFF6D6;
    position:relative;
    overflow:hidden;
}
.page-index-tham-gia__cta-inner::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#F2C14E,#FFD36B);
}
.page-index-tham-gia__cta-inner h3{
    color:#FFD36B;
    font-size:clamp(1.25rem,2vw,1.5rem);
    margin:0 0 12px;
}
.page-index-tham-gia__cta-inner p{
    line-height:1.6;
    opacity:.9;
    margin:0 0 24px;
}
.page-index-tham-gia__cta-inner .page-index-tham-gia__button--primary{
    padding:16px 48px;
    font-size:1.05rem;
}

/* === Responsive: Large Tablet === */
@media (max-width:1024px){
    .page-index-tham-gia__hero-image img{
        border-radius:12px;
    }
    .page-index-tham-gia__logo-grid{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
        max-width:760px;
        padding:0 12px;
    }
    .page-index-tham-gia__logo-item:nth-child(5),
    .page-index-tham-gia__logo-item:nth-child(6){
        grid-column:auto;
    }
    .page-index-tham-gia__hero-title{
        max-width:720px;
    }
    .page-index-tham-gia__guide-intro{
        font-size:.98rem;
    }
}

/* === Responsive: Mobile === */
@media (max-width:768px){
    .page-index-tham-gia{
        overflow-x:hidden;
    }
    .page-index-tham-gia__hero-section{
        padding:0 12px;
    }
    .page-index-tham-gia__hero-image img{
        width:100%;
        height:auto;
        aspect-ratio:2/1;
        border-radius:12px;
    }
    .page-index-tham-gia__hero-content{
        padding:20px 8px;
    }
    .page-index-tham-gia__hero-title{
        font-size:clamp(1.4rem,5.5vw,1.9rem);
        margin-bottom:10px;
    }
    .page-index-tham-gia__hero-subtitle{
        font-size:.95rem;
        line-height:1.5;
        margin-bottom:18px;
    }
    .page-index-tham-gia__hero-actions{
        flex-direction:column;
        gap:12px;
        align-items:center;
    }
    .page-index-tham-gia__hero-actions .page-index-tham-gia__button{
        width:auto;
        min-width:0;
        max-width:100%;
        padding:16px 36px;
    }
    .page-index-tham-gia__logo-section{
        padding:20px 8px;
    }
    .page-index-tham-gia__logo-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px 12px;
        max-width:100%;
        padding:0 4px;
        width:100%;
    }
    .page-index-tham-gia__logo-item{
        padding:12px;
        width:100%;
        box-sizing:border-box;
    }
    .page-index-tham-gia__logo-item:nth-child(5),
    .page-index-tham-gia__logo-item:nth-child(6){
        grid-column:auto;
    }
    .page-index-tham-gia__guide-section{
        padding-top:12px;
    }
    .page-index-tham-gia__guide-inner{
        padding:16px 8px 40px;
    }
    .page-index-tham-gia__guide-title::after{
        margin-bottom:12px;
    }
    .page-index-tham-gia__guide-article{
        padding:18px 16px 16px;
        margin-bottom:24px;
        width:100%;
        box-sizing:border-box;
    }
    .page-index-tham-gia__guide-article h3{
        font-size:1.15rem;
    }
    .page-index-tham-gia__faq-section h3{
        font-size:1.2rem;
    }
    .page-index-tham-gia__cta-inner{
        padding:24px 16px;
    }
    .page-index-tham-gia__cta-inner .page-index-tham-gia__button{
        padding:14px 32px;
        width:auto;
        max-width:100%;
    }
    .page-index-tham-gia img{
        max-width:100%;
        height:auto;
    }
}

/* === Additional small phone safety === */
@media (max-width:480px){
    .page-index-tham-gia__hero-content .page-index-tham-gia__button{
        font-size:.95rem;
    }
    .page-index-tham-gia__hero-actions{
        width:100%;
        box-sizing:border-box;
    }
    .page-index-tham-gia__hero-actions .page-index-tham-gia__button{
        width:100%;
        box-sizing:border-box;
        white-space:normal;
        text-align:center;
    }
    .page-index-tham-gia__logo-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .page-index-tham-gia__cta-bottom{
        padding:0 4px;
    }
}