/* ── หน้าคำถามที่พบบ่อย (faq) — ยกมาจาก faq.php ของเว็บเดิมแบบตรงตัว เพื่อให้ UI ไม่ขยับ ── */

    .how-img {
        max-width: 800px;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .btn-link,
    .btn-link:hover,
    .btn-link:active {
        font-weight: 400;
        color: #f6690d;
        text-decoration: none;
        font-size: 16px !important;
        width: 100%;
        text-align: left;
    }


    .faq-toggle {
        position: relative;
        padding-right: 32px;
    }

    /* ตอนปิด (ลูกศรลง) */
    .faq-toggle::after {
        content: "\276F";
        position: absolute;
        right: 20px;
        top: 30%;
        transform: translateY(-50%);
        font-size: 14px;
        transition: transform 0.2s ease;
        rotate: 90deg;
    }

    /* ตอนเปิด (ลูกศรขึ้น) */
    .faq-toggle[aria-expanded="true"]::after {
        content: "\276E";
        rotate: 90deg;
    }

    .btn.faq-toggle {
        height: auto;
        line-height: 30px;

    }

    .card-body {
        line-height: 30px;

        a {
            color: #ff6500;
            text-decoration: none;
        }
    }

/* ── โครงหน้า — เดิมเป็น inline style + utility class บนมาร์กอัป ยกมาไว้ที่นี่ ──
   .page-faq      = <div class="pt-3" style="padding-top:60px!important;background:#fff">
   .faq-row       = <div class="row pt-4 pb-4" style="min-height:500px;line-height:40px">
   .faq-list      = <div class="col-12 pt-2">
   .faq-header    = <div class="pb-3 text-center"> + <h1 style="font-size:24px">
   .faq-group-title = <h3 class="mb-4 mt-4">                                    */
.page-faq {
    padding-top: 60px;
    background-color: #fff;
}

.faq-row {
    padding-top: 24px;
    padding-bottom: 24px;
    min-height: 500px;
    line-height: 40px;
}

.faq-list {
    padding-top: 8px;
}

.faq-header {
    padding-bottom: 16px;
    text-align: center;
}

.faq-header h1 {
    font-size: 24px;
}

.faq-group-title {
    margin-top: 24px;
    margin-bottom: 24px;
}