/* === AWARDS RIBBON === */
    .awards-ribbon {
        position: relative;
        margin: 26px auto 60px;
        width: 100%;
        overflow: hidden;
        --gap: clamp(14px, 2.2vw, 28px);
    }

    .ribbon-track,
    .ribbon-track-ghost {
        display: flex;
        align-items: center;
        gap: var(--gap);
        will-change: transform, opacity;
        transition: opacity .4s ease;
        /* ใช้กับ crossfade */
    }

    /* แทร็กเงา (ซ้อนทับเพื่อ crossfade) */
    .ribbon-track-ghost {
        position: absolute;
        inset: 0 auto 0 0;
        /* วางทับจากซ้าย */
        opacity: 0;
        /* เริ่มมองไม่เห็น */
        pointer-events: none;
        /* ไม่บังการลาก */
    }

    /* ขอบเฟดนุ่ม ๆ แทนกรอบสี่เหลี่ยม */
    .ribbon-fade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 11%;
        pointer-events: none;
        z-index: 2;
    }

    .ribbon-fade--left {
        left: 0;
        background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .ribbon-fade--right {
        right: 0;
        background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .ribbon-track {
        display: flex;
        align-items: center;
        gap: var(--gap);
        will-change: transform;
        flex-shrink: 0;
    }

    .ribbon-item {
        flex-shrink: 0;
        flex: 0 0 auto;
        width: clamp(120px, 20vw, 290px);
        aspect-ratio: 4 / 3;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
        position: relative;
        padding: clamp(10px, 1.6vw, 14px);
        transition: transform .25s ease, box-shadow .25s ease;
        border: 1px solid rgba(246, 218, 106, .6);
        /* ทองบาง ๆ */
    }

    .ribbon-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
    }

    .ribbon-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .06));
    }

    /* แคปชันปีแบบป้ายทองเล็ก ๆ */
    .ribbon-year {
        position: absolute;
        bottom: 6px;
        right: 8px;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: .5px;
        font-size: clamp(14px, 2.8vw, 18px);
        color: #111;
        background: linear-gradient(180deg, #FFE178, #FFC600);
        border: 1px solid #E8C758;
        padding: 3px 8px;
        border-radius: 999px;
        box-shadow: inset 0 1px 0 #fff7cc, 0 2px 6px rgba(0, 0, 0, .08);
    }

    .awards-ribbon:not(.is-paused) .ribbon-track.is-animated {
        animation: ribbon-scroll 28s linear infinite;
    }

    /* หยุดเมื่อ hover/โฟกัส */
    .awards-ribbon:hover .ribbon-track.is-animated,
    .awards-ribbon:focus-within .ribbon-track.is-animated {
        animation-play-state: paused;
    }

    /* ลด motion */
    @media (prefers-reduced-motion: reduce) {
        .awards-ribbon .ribbon-track {
            animation: none !important;
        }
    }

    /* ===== Headings / Awards ===== */
    .section-heading {
        margin: 100px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative
    }


    .section-heading::before {
        content: "";
        position: absolute;
        /* top: 50%; */
        left: 0;
        right: 0;
        border-top: 1px solid #F6DA6A;
        z-index: 1
    }

    .title-wrap {
        position: relative;
        z-index: 2
    }

    .heading-title {
        display: inline-block;
        background: #fff;
        border: 1px solid #F6DA6A;
        line-height: 1;
        padding: 20px 20px;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 1px;
        color: #FFC600;
        font-size: clamp(36px, 6vw, 72px);
    }

    .award-quote {
        font-family: auto;
        text-align: center;
        margin: 26px auto 10px;
        color: #333;
        font-size: clamp(14px, 2.2vw, 30px);
        line-height: 1.8;
        will-change: opacity, transform, filter;

    }

    /*
    .awards-grid {
        width: 100%;
        margin: 10px auto 60px;
        padding: 170px;
        border: #F6DA6A solid 1px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 200px;
        justify-items: center;
        align-items: center
    }

    .award-item img {
        max-width: 160px;
        max-height: 120px;
        object-fit: contain;
        display: block
    } */

    /* ===== Branch Heading Badge ===== */
    .branches-heading {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 100px 0;
    }

    .branches-badge {
        position: absolute;
        top: -50px;
        left: 450px;
        font-family: 'Daughter', cursive;
        font-style: italic;
        font-size: clamp(28px, 3.2vw, 44px);
        line-height: 1;
        color: #000;
        white-space: nowrap
    }

    .branches-badge .num {
        font-family: 'Daughter';
        font-weight: 900;
        font-size: clamp(42px, 4.8vw, 64px);
        margin-right: -8px;
        color: #000
    }

    .branches-title {
        display: inline-block;
        padding: 10px 40px;
        line-height: 1;
        font-family: 'Bebas Neue', sans-serif;
        font-weight: 800;
        letter-spacing: 1px;
        color: #FFC600;
        font-size: clamp(45px, 6vw, 72px)
    }

    .brand-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .brand-row {
        margin-top: 26px;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap
    }

    .brand-card {
        position: relative;
        width: 280px;
        height: 280px;
        overflow: visible;
        --thick: 20px;
        /* ความหนาวงแหวน*/
    }

    .brand-front {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ring) center/cover no-repeat;
        /* รูปสาขาเป็นพื้นหลัง */
        transition: transform .35s ease, opacity .35s ease, filter .35s ease;
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .16));
    }

    .brand-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
    }

    .brand-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--ring) center/cover no-repeat;
        /* วงแหวนรูป */
        filter: brightness(.95) saturate(1.06);
    }

    .brand-ring::after {
        content: "";
        position: absolute;
        inset: var(--thick);
        /* “วงกลมขาว” ภายใน */
        background: #fff;
        border-radius: inherit;
    }

    .brand-logo {
        position: relative;
        z-index: 2;
        width: 58%;
        height: auto;
        display: block;
        background: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
    }

    .brand-panel {
        --inset: 32%;
        --radius: 50%;
        /* มุมโค้งแบบวงกลม */
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 20px;
        text-align: center;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .18);


        clip-path: inset(var(--inset) round var(--radius));
        opacity: 0;
        transform: translateY(6px) scale(.98);
        pointer-events: none;
        transition:
            clip-path .45s ease,
            opacity .35s ease,
            transform .35s ease;
        background: var(--ring) center/cover no-repeat;
        /* ใช้ภาพ branch */
    }


    /* --- เอฟเฟกต์ Hover --- */
    .brand-card:hover .brand-front {
        transform: scale(.96);
        opacity: .25;
        /* filter: blur(1px) drop-shadow(0 6px 16px rgba(0, 0, 0, .12)); */
    }

    .brand-card:hover .brand-panel {
        --inset: 0%;
        --radius: 18px;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }


    .brand-info {
        font-family: 'Prompt', sans-serif;
        background: #fff;
        border-radius: 12px;
        padding: 28px 0;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .brand-info-logo {
        width: 90px;
        height: 90px;
        object-fit: contain;
        display: block;
        margin: 0 0 0 70px;
        border-radius: 50%;
        background: #fff;

    }

    .brand-info h3 {
        font-size: 17px;
        font-weight: 700;
        margin: 6px 0 10px;
    }

    .brand-info .address,
    .brand-info .hours,
    .brand-info .phones {
        font-size: 14px;
        color: #333;
        margin: 4px 0;
    }

    /* ลด movement กรณี prefers-reduced-motion */
    /* @media (prefers-reduced-motion: reduce) {

        .brand-panel,
        .brand-front {
            transition: none !important;
        }
    } */


    /* ===== Reveal on scroll (ใช้คลาสเดิม) =====
    .reveal {
        opacity: 0;
        transform: translateY(18px) scale(.98);
        filter: blur(2px)
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
        transition: opacity .6s ease, transform .6s ease, filter .6s ease
    } */
    /* .awards {
        padding: 20px 0 30px
    } */

    /* ===== Fade on scroll ===== */
    .fade-on-scroll {
        opacity: 0;
        transform: translateY(16px) scale(.98);
        filter: blur(2px);
        transition: opacity .6s ease, transform .6s ease, filter .6s ease;
        will-change: opacity, transform, filter;
    }

    .fade-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    /* ตัวเลือกเสริม */
    .fade-on-scroll.fade-up {
        transform: translateY(18px);
    }

    .fade-on-scroll.fade-down {
        transform: translateY(-18px);
    }

    .fade-on-scroll.fade-left {
        transform: translateX(18px);
    }

    .fade-on-scroll.fade-right {
        transform: translateX(-18px);
    }

    /* ลด motion */
    @media (prefers-reduced-motion: reduce) {
        .fade-on-scroll {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }
    }

    /* บังคับเอฟเฟกต์เหมือนตอน :hover ด้วยคลาส .is-hovering */
    .brand-card.is-hovering .brand-front {
        transform: scale(.96);
        opacity: .25;
    }

    .brand-card.is-hovering .brand-panel {
        --inset: 0%;
        --radius: 18px;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* ===== Responsive ===== */
    @media (max-width:1024px) {
        .brand-card {
            --w: 230px;
            --h: 350px;
            --thick: 20px
        }

        .brand-info-logo {
            width: 96px
        }
    }

    @media (max-width:900px) {
        .awards-grid {
            gap: 60px
        }
    }

    @media (max-width:768px) {
        .section-heading {
            margin: 80px 0;
        }

        .brand-info-logo {
            margin: 0 0 0 60px;
        }

        .branches-badge {
            top: -30px;
            left: 250px
        }

        .awards-grid {
            width: 90%;
            padding: 30px
        }

        .award-item img {
            max-height: 60px
        }

        .brand-card {
            --w: 175px;
            --h: 270px;
            --thick: 15px
        }

        .brand-info {
            padding: 15px;
            height: 230px;
        }

        .brand-info h3 {
            font-size: 15px;
            margin: 0 0 4px
        }

        .brand-info .address,
        .brand-info .hours,
        .brand-info .phones {
            font-size: 14px;
            padding: 4px;
            margin: 0
        }

        .brand-info-logo {
            width: 90px
        }
    }

    @media (max-width:430px) {
        .branches-heading {
            margin: 35px 0;
        }

        .section-heading {
            margin: 30px 0;
        }

        .branches-badge {
            left: 72px;
        }

        /* layout เป็น 1 คอลัมน์ */
        .brand-row.brand-row--rings {
            display: grid !important;
            grid-template-columns: repeat(1, 1fr);
            gap: 5px;
            justify-items: center;
        }

        .brand-card {
            width: 100% !important;
            max-width: 320px;
            height: auto !important;
            margin: 0 auto;
        }

        .brand-front {
            display: none !important;
        }


        .brand-panel {
            position: static !important;
            inset: auto !important;
            clip-path: none !important;
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;

            /* background:#fff !important; */
            border-radius: 20px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .08) !important;
            padding: 16px !important;
            height: auto !important;
        }


        .brand-info {
            width: 100%;
            height: 245px;
            padding: 18px;
            border: none;
            /* background:transparent; */
            box-shadow: none;
            text-align: center;
        }


        .brand-info-logo {
            display: block;
        width: 86px;
        height: 89px;
            object-fit: contain;
            margin: 0 auto 0 !important;
            border-radius: 0;
            background: transparent;
        }

        .brand-info h3 {
            font-size: 16px;
            font-weight: 800;
            margin: 0 0 0;
        }

        .brand-info .address {
            font-size: 13px;
            line-height: 1.5;
            color: #111;
            margin: 0 0 6px;
        }

        .brand-info .phones {
            font-size: 12px;
            font-weight: 400;
            color: #111;
            margin: 2px 0 0;
        }
    }

    @media (max-width:390px) {
        .section-heading {
            margin: 10px 0;
        }


        .heading-title {
            padding: 20px 20px;
        }

        .brand-info h3 {
            font-size: 12px;
        }

        .brand-info-logo {
            margin: 0 0 0 50px;
            height: 70px;
        }

        .brand-row {
            gap: 6px
        }

        .awards-grid {
            gap: 48px 10px
        }

        .branches-badge {
            top: -25px;
            left: 60px
        }

        .brand-info {
            height: 220px;
        }

    }

    @media (max-width:320px) {
        .branches-title {
            padding: 15px 25px;
            font-size: clamp(39px, 6vw, 72px);
        }

        .heading-title {
            padding: 15px 15px;
            font-size: clamp(30px, 6vw, 72px);
        }

        .branches-badge {
            top: -25px;
            left: 32px
        }

        .brand-info {
            height: 210px;
        }

        .brand-info-logo {
            margin: 0px 0 0 30px;
        }

        .brand-info h3 {
            font-size: 11px;
        }

        .brand-info .address {
            font-size: 11px;
        }
    }