.faq-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: #020202;
    font-family: "Roboto", "Noto Sans Thai", sans-serif;
}

.faq-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 78% 42%, rgba(129, 78, 38, .18) 0%, transparent 50%), linear-gradient(180deg, #000000 0%, #030303 52%, #000000 100%);
    pointer-events: none;
}

.faq-hero {
    min-height: 196px;
    padding: 100px 0px 80px;
    text-align: center;
}

    .faq-hero h1 {
        margin: 0 0 10px;
        color: #ca9566;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .faq-hero p {
        font-size: 18px;
        font-weight: 200;
        line-height: 24px;
        letter-spacing: 0;
    }

.faq-content {
    max-width: 972px;
    margin: 0 auto;
    padding: 0px 16px 76px;
}

.faq-group + .faq-group {
    margin-top: 38px;
}

.faq-group h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.faq-item {
    overflow: hidden;
    border: 1px solid #49443e;
    border-radius: 14px;
}

    .faq-item + .faq-item {
        margin-top: 11px;
    }

    .faq-item[open] {
        border-color: #8a6939;
    }

    .faq-item summary {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 56px;
        padding: 17px 21px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        list-style: none;
        cursor: pointer;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::marker {
            content: "";
        }

        .faq-item summary::before {
            content: "+";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 21px;
            height: 21px;
            border: 1px solid #ac803e;
            border-radius: 50%;
            color: #c99b65;
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
        }

    .faq-item[open] summary::before {
        content: "\00d7";
        background: #c99b65;
        border-color: #c99b65;
        color: #302317;
    }

    .faq-item summary:hover {
        background: rgba(201,155,101,.06);
    }

    .faq-item summary:focus-visible {
        outline: 2px solid #e1b77f;
        outline-offset: -4px;
    }

.faq-answer {
    padding: 0 21px 21px 56px;
    color: #c7c3bd;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

    .faq-answer p {
        margin: 0;
    }

    .faq-answer a {
        color: #ca9566;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .faq-answer a:hover {
            color: #edc69c;
        }

.faq-risk {
    margin: 15px 0 0;
    color: #a8a09a;
    font-size: 10px;
    font-style: italic;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .faq-hero {
        padding: 36px 20px 44px;
        min-height: 180px;
    }

        .faq-hero h1 {
            font-size: 28px;
        }

    .faq-content {
        margin: 0 16px;
        padding: 48px 16px;
    }

    .faq-group h2 {
        font-size: 22px;
    }

    .faq-item summary {
        padding: 16px 14px;
        gap: 12px;
    }

    .faq-answer {
        padding: 0 14px 20px 47px;
    }
}