.fb-wrap {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
            background: #fff;
            display: flex;
            justify-content: center;
        }

        .fb-wrap iframe {
            width: 340px !important;
            max-width: 100%;
            border: 0;
        }

        :root {
            --ink: #133a31;
            --bg: #e2ede7;
            --card: #fff;
            --muted: #6c757d;
            --navh: 110px;
            /* fallback */
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--navh) + 16px);
        }

        body {
            background-color: var(--bg);
            color: var(--ink);
            font-family: 'Mitr', sans-serif
        }

        /* ✅ กัน anchor โดน navbar ทับ (ยืดหยุ่นตามความสูง navbar จริง) */
        section,
        header {
            scroll-margin-top: calc(var(--navh) + 16px);
        }

        header {
            position: relative;
            color: var(--ink);
            z-index: 0;
            min-height: 400px;
            display: flex;
            align-items: center;
            background: linear-gradient(to bottom, rgba(226, 237, 231, .9), rgba(255, 255, 255, .5))
        }

        header .container {
            position: relative;
            z-index: 2
        }

        #review,
        #navhead {
            background: #ccd6d1
        }

        .nav-item {
            font-size: large;
            margin: 5px
        }

        .nav-tabs {
            border-bottom: 2px solid #e2ede7;
            margin-bottom: 5px;
            gap: .3rem
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 4rem;
            background-color: #e2ede7;
            color: var(--ink);
            margin-right: .5rem;
            transition: background-color .3s, color .3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
            margin-bottom: 5px
        }

        .nav-tabs .nav-link:hover {
            background-color: #ccd6d1
        }

        .nav-tabs .nav-link:active {
            background-color: #0f2d26;
            color: #fff;
            transform: scale(.98);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5)
        }

        /* ✅ ให้แท็บที่ active เป็นสีเข้มจริง (ไม่ใช่แค่ตอนกดค้าง) */
        .nav-tabs .nav-link.active {
            background-color: #0f2d26;
            color: #fff;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25)
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
            transition: transform .25s ease, box-shadow .25s ease;
            background-color: #fff;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .12)
        }

        @media (max-width:576px) {
            .card:hover {
                transform: none
            }
        }

        @media (prefers-reduced-motion:reduce) {

            .card,
            .nav-tabs .nav-link {
                transition: none !important
            }
        }

        /* ✅ ทำให้ object-fit cover ทำงานจริง + รูปสูงเท่ากันทุกการ์ด */
        .card-img-top {
            width: 100%;
            height: 320px;
            object-fit: cover;
        }

        @media (max-width:576px) {
            .card-img-top {
                height: 240px;
            }
        }

        .card-body {
            flex-grow: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 180px
        }

        .card-text {
            font-size: 1.05rem;
            color: #4B4B4B;
            font-weight: 500;
            margin-bottom: 1rem;
            font-style: italic
        }

        .btn-primary {
            background-color: var(--ink);
            border: none;
            color: #fff
        }

        .btn-primary:hover {
            background-color: #0f2d26
        }

        .btn-success {
            background-color: #6FCF97;
            color: #fff;
            border: none
        }

        .btn-success:hover {
            background-color: #5AB882
        }

        .btn-light {
            background-color: #ccd6d1;
            color: var(--ink);
            border: none
        }

        .btn-light:hover {
            background-color: #b0c2bb;
            color: #fff
        }

        .content {
            background: #fff;
            padding: 30px;
            margin: 30px auto;
            max-width: 1200px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
            border-radius: 20px
        }

        .social-Icon {
            margin: 0 10px
        }

        footer .mb-3 a {
            text-decoration: none
        }

        .social-Icon:hover {
            transform: scale(1.1);
            transition: transform .3s ease
        }

        .accordion-body {
            background-color: #f7e8ce
        }

        #backToTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: none;
            z-index: 9999;
            cursor: pointer;
            background: #ffffff;
            border: none;
            border-radius: 999px;
            padding: 6px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .2)
        }

        #backToTop img {
            width: 50px;
            height: 50px;
            transition: transform .3s ease
        }

        #backToTop:hover img {
            transform: scale(1.1)
        }

        .cta-fab {
            position: fixed;
            right: 16px;
            bottom: 16px;
            z-index: 10000;
            background: #133a31;
            color: #fff;
            border: none;
            border-radius: 999px;
            padding: 12px 18px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
            text-decoration: none
        }

        .cta-fab:hover {
            color: #fff;
            opacity: .9
        }

        .hero-cover {
            position: relative;
            overflow: hidden
        }

        .hero-video {
            position: relative;
            width: 100%;
            z-index: 1;
            pointer-events: none;
            aspect-ratio: 16 / 9
        }

        .text-ink {
            color: #133a31
        }

        .coach-section {
            background:
                radial-gradient(1200px 600px at 10% 0%, #e8f2ed 0%, rgba(226, 237, 231, .6) 40%, transparent 70%),
                radial-gradient(900px 500px at 100% 10%, #f6efe2 0%, rgba(246, 239, 226, .5) 45%, transparent 70%),
                #f7f9f8
        }

        .coach-card {
            background: rgba(255, 255, 255, .78);
            backdrop-filter: blur(6px);
            border-radius: 20px;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .coach-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .12)
        }

        .bg-tag {
            background-color: #ccd6d1 !important;
            color: #133a31 !important
        }

        .object-fit-cover {
            object-fit: cover
        }

        .howto {
            background: #f7f9f7;
            border: 1px solid #e4ebe7;
            border-radius: 12px;
            padding: 12px 14px;
            color: #2c3e36;
            display: inline-block;
            text-align: left;
            max-width: 520px
        }

        .howto-steps {
            list-style: none;
            counter-reset: step;
            padding-left: 0;
            margin: 0
        }

        .howto-steps li {
            margin: .2rem 0;
            position: relative;
            padding-left: 1.4rem
        }

        .howto-steps li::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            border-radius: 999px;
            border: 1px solid #cfe0d8;
            font-size: .78rem;
            font-weight: 700;
            color: #133a31
        }

        :root {
            --pager-bg: #e2ede7;
            --pager-ink: var(--ink);
            --pager-hover: #b0c2bb;
            --pager-active: #0f2d26
        }

        #review .pagination .page-link {
            background: var(--pager-bg);
            color: var(--pager-ink);
            border: none;
            border-radius: 999px;
            margin: 0 .25rem;
            padding: .35rem .75rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .10)
        }

        #review .pagination .page-link:hover {
            background: var(--pager-hover);
            color: #fff
        }

        #review .pagination .page-item.active .page-link {
            background: var(--pager-active);
            color: #fff;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25)
        }

        #review .pagination .page-item.disabled .page-link {
            opacity: .5;
            pointer-events: none
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #133a31;
            color: #fff;
            padding: 8px 16px;
            z-index: 10000;
            border-radius: 0 0 8px 0;
            text-decoration: none;
            font-size: 1rem;
            transition: top .3s
        }

        .skip-link:focus {
            top: 0
        }

        #article img {
            transition: opacity .25s ease
        }

        #article img.d-none {
            opacity: 0
        }

        #article img.img-fluid:not(.d-none) {
            opacity: 1
        }

        .review-zoom {
            display: block;
            cursor: zoom-in;
        }

        .review-zoom img {
            transition: transform 0.2s ease;
        }

        .review-zoom:hover img {
            transform: scale(1.02);
        }

        #article .blog-thumb {
            height: 260px;
            object-fit: contain;
            background: #f7f9f8;
            padding: 10px;
        }

        @media (max-width: 576px) {
            #article .blog-thumb {
                height: 220px;
            }
        }