{"id":8812,"date":"2026-09-01T13:02:40","date_gmt":"2026-09-01T06:02:40","guid":{"rendered":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/?page_id=8812"},"modified":"2026-09-14T13:16:33","modified_gmt":"2026-09-14T06:16:33","slug":"promotion","status":"publish","type":"page","link":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/promotion\/","title":{"rendered":"Offers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8812\" class=\"elementor elementor-8812\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1cd641a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"1cd641a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a704d54\" data-id=\"a704d54\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3852307 elementor-widget elementor-widget-html\" data-id=\"3852307\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\"\n                data-elementor-post-type=\"page\">\n                <div class=\"elementor-element elementor-element-218f2d9 e-con-full e-flex e-con e-parent e-lazyloaded\"\n                    data-id=\"218f2d9\" data-element_type=\"container\" data-e-type=\"container\">\n                    <div class=\"elementor-element elementor-element-ea60b91 elementor-widget elementor-widget-html\"\n                        data-id=\"ea60b91\" data-element_type=\"widget\" data-e-type=\"widget\"\n                        data-widget_type=\"html.default\">\n                        <!--\n  ===========================================================================\n  MRKC OFFERS \u2014 01 HERO  (banner + date picker overlay)\n  Requires: 00-base.html on the page.\n  ===========================================================================\n-->\n                        <style>\n                            .mrkc-offers-hero {\n                                position: relative;\n                                min-height: 700px;\n                                color: #fff;\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                overflow: hidden;\n                                font-family: var(--mrkc-sans);\n                            }\n\n                            .mrkc-offers-hero::before {\n                                content: '';\n                                position: absolute;\n                                inset: 0;\n                                background-image: url('https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/DJI_0906-1024x683-1.jpeg');\n                                \/* TODO swap to Media URL *\/\n                                background-size: cover;\n                                background-position: center;\n                                z-index: 0;\n                            }\n\n                            .mrkc-offers-hero::after {\n                                content: '';\n                                position: absolute;\n                                inset: 0;\n                                background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55) 100%);\n                                z-index: 1;\n                            }\n\n                            \/* Booking widget *\/\n                            .mrkc-booking {\n                                position: absolute;\n                                bottom: 60px;\n                                left: 50%;\n                                transform: translateX(-50%);\n                                z-index: 3;\n                                background: rgba(255, 255, 255, .96);\n                                backdrop-filter: blur(6px);\n                                padding: 18px 24px;\n                                display: grid;\n                                grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto;\n                                gap: 18px;\n                                align-items: center;\n                                border-radius: 6px;\n                                max-width: min(980px, calc(100% - 32px));\n                                width: 100%;\n                                box-shadow: 0 16px 40px rgba(0, 0, 0, .18);\n                            }\n\n                            .mrkc-booking label {\n                                display: block;\n                                font-size: 10px;\n                                letter-spacing: .22em;\n                                text-transform: uppercase;\n                                color: var(--mrkc-muted, #76777a);\n                                margin-bottom: 6px;\n                                font-weight: 400;\n                            }\n\n                            .mrkc-booking input {\n                                width: 100%;\n                                border: none;\n                                background: transparent;\n                                font-family: var(--mrkc-sans, inherit);\n                                font-size: 14px;\n                                color: #030303 !important;\n                                -webkit-text-fill-color: #030303 !important;\n                                padding: 0;\n                                outline: none;\n                            }\n\n                            \/* keep the date field's inner text readable on ALL browsers incl. iOS Safari *\/\n                            .mrkc-booking input[type=\"date\"] {\n                                color: #030303 !important;\n                                -webkit-text-fill-color: #030303 !important;\n                                min-height: 20px !important;\n                                line-height: 1.4 !important;\n                                opacity: 1 !important;\n                            }\n\n                            \/* iOS Safari paints the date text\/placeholder in ::-webkit-date-and-time-value *\/\n                            .mrkc-booking input::-webkit-date-and-time-value {\n                                color: #030303 !important;\n                                -webkit-text-fill-color: #030303 !important;\n                                text-align: left !important;\n                                opacity: 1 !important;\n                            }\n\n                            \/* Chrome \/ desktop pseudo-elements *\/\n                            .mrkc-booking input::-webkit-datetime-edit,\n                            .mrkc-booking input::-webkit-datetime-edit-fields-wrapper,\n                            .mrkc-booking input::-webkit-datetime-edit-text,\n                            .mrkc-booking input::-webkit-datetime-edit-month-field,\n                            .mrkc-booking input::-webkit-datetime-edit-day-field,\n                            .mrkc-booking input::-webkit-datetime-edit-year-field {\n                                color: #030303 !important;\n                                -webkit-text-fill-color: #030303 !important;\n                                opacity: 1 !important;\n                            }\n\n                            .mrkc-booking__field {\n                                border-right: 1px solid var(--mrkc-line, #e7e7e7);\n                                padding-right: 18px;\n                            }\n\n                            .mrkc-booking__field:last-of-type {\n                                border-right: none;\n                            }\n\n                            \/* Guests +\/- stepper *\/\n                            .mrkc-stepper {\n                                display: flex;\n                                align-items: center;\n                                gap: 14px;\n                            }\n\n                            .mrkc-stepper__btn {\n                                width: 32px;\n                                height: 32px;\n                                flex: 0 0 32px;\n                                display: inline-flex;\n                                align-items: center;\n                                justify-content: center;\n                                padding: 0 !important;\n                                margin: 0 !important;\n                                border: 1px solid var(--mrkc-brand, #0c6980) !important;\n                                background: transparent !important;\n                                color: var(--mrkc-brand, #0c6980) !important;\n                                -webkit-text-fill-color: var(--mrkc-brand, #0c6980) !important;\n                                border-radius: 50% !important;\n                                box-shadow: none !important;\n                                font-size: 18px;\n                                line-height: 1;\n                                font-weight: 500;\n                                cursor: pointer;\n                                transition: background .2s ease, color .2s ease, opacity .2s ease;\n                            }\n\n                            .mrkc-stepper__btn:hover {\n                                background: var(--mrkc-brand, #0c6980) !important;\n                                color: #fff !important;\n                                -webkit-text-fill-color: #fff !important;\n                                opacity: 1;\n                            }\n\n                            .mrkc-stepper__btn:disabled {\n                                opacity: .3;\n                                cursor: not-allowed;\n                            }\n\n                            .mrkc-stepper__val {\n                                min-width: 22px;\n                                text-align: center;\n                                font-size: 15px;\n                                font-weight: 600;\n                                color: #030303;\n                            }\n\n                            \/* Book Now button \u2014 gradient & lifted *\/\n                            .mrkc-booking .mrkc-btn {\n                                white-space: nowrap;\n                                padding: 15px 30px;\n                            }\n\n                            .mrkc-booking .mrkc-btn--solid {\n                                background: linear-gradient(180deg, #0e7d99 0%, #0c6980 100%) !important;\n                                border: none !important;\n                                color: #fff !important;\n                                -webkit-text-fill-color: #fff !important;\n                                font-weight: 600;\n                                letter-spacing: .16em;\n                                border-radius: 4px;\n                                box-shadow: 0 8px 18px rgba(12, 105, 128, .35);\n                                transition: background .25s ease, box-shadow .25s ease, transform .12s ease;\n                            }\n\n                            .mrkc-booking .mrkc-btn--solid:hover {\n                                background: linear-gradient(180deg, #0c6980 0%, #094e60 100%) !important;\n                                box-shadow: 0 10px 24px rgba(12, 105, 128, .45);\n                                transform: translateY(-1px);\n                                opacity: 1;\n                            }\n\n                            \/* ---- Responsive ---- *\/\n                            @media (max-width: 900px) {\n                                .mrkc-booking {\n                                    grid-template-columns: 1fr 1fr;\n                                    width: 100%;\n                                    max-width: calc(100% - 28px);\n                                    gap: 16px 18px;\n                                    bottom: 32px;\n                                }\n\n                                .mrkc-booking__field {\n                                    border-right: none;\n                                    padding-right: 0;\n                                }\n\n                                .mrkc-booking .mrkc-btn {\n                                    grid-column: 1 \/ -1;\n                                    width: 100%;\n                                }\n                            }\n\n                            @media (max-width: 520px) {\n                                .mrkc-booking {\n                                    grid-template-columns: 1fr;\n                                    bottom: 20px;\n                                    padding: 16px 18px;\n                                    gap: 14px;\n                                }\n                            }\n                        <\/style>\n\n                        <section class=\"mrkc-offers-hero\">\n                            <form action=\"https:\/\/reservation.travelanium.net\/propertyibe2\/\" target=\"_blank\" class=\"mrkc-booking\">\n                                <input type=\"hidden\" name=\"onlineId\" value=\"4\" \/>\n                                <input type=\"hidden\" name=\"propertyId\" value=\"603\" \/>\n                                <input type=\"hidden\" name=\"lang\" value=\"en\" \/>\n                                <input type=\"hidden\" name=\"currency\" value=\"THB\" \/>\n                                <input type=\"hidden\" name=\"accesscode\" value=\"member\" \/>\n\n                                <div class=\"mrkc-booking__field\">\n                                    <label for=\"mrkcCheckin\">Check-in<\/label>\n                                    <input type=\"date\" id=\"mrkcCheckin\" name=\"checkin\" required=\"\">\n                                <\/div>\n\n                                <div class=\"mrkc-booking__field\">\n                                    <label for=\"mrkcCheckout\">Check-out<\/label>\n                                    <input type=\"date\" id=\"mrkcCheckout\" name=\"checkout\" required=\"\">\n                                <\/div>\n\n                                <div class=\"mrkc-booking__field mrkc-booking__field--rooms\">\n                                    <label for=\"mrkcRooms\">Rooms<\/label>\n                                    <div class=\"mrkc-stepper\" data-min=\"1\" data-max=\"5\" data-for=\"mrkcRooms\">\n                                        <button type=\"button\" class=\"mrkc-stepper__btn\" data-step=\"-1\"\n                                            aria-label=\"Decrease rooms\">&minus;<\/button>\n                                        <span class=\"mrkc-stepper__val\" id=\"mrkcRoomsVal\">1<\/span>\n                                        <button type=\"button\" class=\"mrkc-stepper__btn\" data-step=\"1\" aria-label=\"Increase rooms\">+<\/button>\n                                        <input type=\"hidden\" id=\"mrkcRooms\" name=\"numofroom\" value=\"1\">\n                                    <\/div>\n                                <\/div>\n\n                                <div class=\"mrkc-booking__field mrkc-booking__field--guests\">\n                                    <label for=\"mrkcGuests\">Guests<\/label>\n                                    <div class=\"mrkc-stepper\" data-min=\"1\" data-max=\"12\" data-for=\"mrkcGuests\">\n                                        <button type=\"button\" class=\"mrkc-stepper__btn\" data-step=\"-1\"\n                                            aria-label=\"Decrease guests\">&minus;<\/button>\n                                        <span class=\"mrkc-stepper__val\" id=\"mrkcGuestsVal\">2<\/span>\n                                        <button type=\"button\" class=\"mrkc-stepper__btn\" data-step=\"1\" aria-label=\"Increase guests\">+<\/button>\n                                        <input type=\"hidden\" id=\"mrkcGuests\" name=\"numofadult\" value=\"2\">\n                                    <\/div>\n                                <\/div>\n\n                                <input type=\"hidden\" name=\"numofchild\" value=\"0\" \/>\n                                <button type=\"submit\" class=\"mrkc-btn mrkc-btn--solid\">Book Now<\/button>\n                            <\/form>\n\n                            <script>\n                                (function () {\n                                    var steppers = document.querySelectorAll('.mrkc-booking .mrkc-stepper');\n\n                                    steppers.forEach(function (stepper) {\n                                        var min = parseInt(stepper.getAttribute('data-min'), 10) || 1;\n                                        var max = parseInt(stepper.getAttribute('data-max'), 10) || 12;\n                                        var valEl = stepper.querySelector('.mrkc-stepper__val');\n                                        var inputId = stepper.getAttribute('data-for');\n                                        var input = document.getElementById(inputId);\n                                        var dec = stepper.querySelector('[data-step=\"-1\"]');\n                                        var inc = stepper.querySelector('[data-step=\"1\"]');\n\n                                        if (!input || !valEl || !dec || !inc) return;\n\n                                        function render() {\n                                            var v = parseInt(input.value, 10);\n                                            valEl.textContent = v;\n                                            dec.disabled = v <= min;\n                                            inc.disabled = v >= max;\n                                        }\n\n                                        [dec, inc].forEach(function (btn) {\n                                            btn.addEventListener('click', function () {\n                                                var v =\n                                                    parseInt(input.value, 10) +\n                                                    parseInt(btn.getAttribute('data-step'), 10);\n\n                                                v = Math.max(min, Math.min(max, v));\n\n                                                input.value = v;\n                                                render();\n                                            });\n                                        });\n\n                                        render();\n                                    });\n                                })();\n                            <\/script>\n                        <\/section>\n                    <\/div>\n                    <div class=\"elementor-element elementor-element-1c847b6 elementor-widget elementor-widget-html\"\n                        data-id=\"1c847b6\" data-element_type=\"widget\" data-e-type=\"widget\"\n                        data-widget_type=\"html.default\">\n                        <!--\n  ===========================================================================\n  MRKC OFFERS \u2014 02 INTRO  (supporting paragraph below hero headline)\n  Requires: 00-base.html on the page.\n  ===========================================================================\n-->\n                        <style>\n                            .mrkc-offers-intro {\n                                padding: 90px 24px 30px;\n                                text-align: center;\n                                background: var(--mrkc-bg);\n                                font-family: var(--mrkc-sans);\n                            }\n\n                            .mrkc-offers-intro__inner {\n                                max-width: 820px;\n                                margin: 0 auto;\n                            }\n\n                            .mrkc-offers-intro p.lead {\n                                color: var(--mrkc-muted);\n                                font-size: 17px;\n                                line-height: 1.85;\n                                margin: 0 auto;\n                                max-width: 740px;\n                            }\n                        <\/style>\n\n                        <section class=\"mrkc-offers-intro\">\n                            <div class=\"mrkc-offers-intro__inner\">\n                                <p class=\"lead\">Discover exclusive packages and seasonal promotions designed to make\n                                    your stay at Mida Resort Kanchanaburi even more memorable. From accommodation\n                                    savings to curated dining experiences along the River Kwai Yai, find an offer\n                                    perfect for your next escape.<\/p>\n                            <\/div>\n                        <\/section>\n                    <\/div>\n                    <div class=\"elementor-element elementor-element-63c0eb7 elementor-widget elementor-widget-html\"\n                        data-id=\"63c0eb7\" data-element_type=\"widget\" data-e-type=\"widget\"\n                        data-widget_type=\"html.default\">\n                        <!--\n  ===========================================================================\n  MRKC OFFERS \u2014 03 OFFERS LIST  (3-column grid + WordPress dynamic posts)\n  Requires: 00-base.html on the page.\n\n  WordPress integration \u2014 LIVE\n  ----------------------------\n  The cards in this grid are rendered from WordPress posts fetched through\n  the REST API at runtime. The endpoint resolves itself:\n\n    on midaresortkanchanaburi.com  \u2192  \/wp-json\/wp\/v2\/posts?_embed=1\n    anywhere else (local preview)  \u2192  https:\/\/www.midaresortkanchanaburi.com\/wp-json\/...\n\n  Editing the offers is done entirely in WordPress \u2014 no change to this file:\n\n    Title          \u2192 post title\n    Description    \u2192 post excerpt (falls back to the first ~180 chars of content)\n    Image          \u2192 featured image (large size preferred)\n    Link           \u2192 post permalink\n    Starting price \u2192 ACF \/ post-meta text field 'starting_price'\n                     (e.g. \"From THB 4,500++ \/ Room \/ Night\"); if absent, a\n                     \"THB \u2026\" line found in the post content is used\n    Room \/ Dining  \u2192 post category, matched against CATEGORY_MAP in the script\n                     room   : room, rooms, room-offers, accommodation\n                     dining : foods-beverage, food-beverage, dining,\n                              dining-offers, restaurant\n\n  Filter tabs with no matching posts hide themselves; the whole filter bar\n  hides when only \"All\" is left.\n\n  If the API call fails (offline preview, REST disabled) the static cards\n  below stay visible, so this file is always safe to open standalone.\n  ===========================================================================\n-->\n                        <style>\n                            .mrkc-offers {\n                                background: var(--mrkc-bg);\n                                padding: 40px 0 110px;\n                                font-family: var(--mrkc-sans);\n                            }\n\n                            \/* Filter tabs *\/\n                            .mrkc-offers__filter {\n                                display: flex;\n                                gap: 40px;\n                                justify-content: center;\n                                flex-wrap: wrap;\n                                padding: 0 24px 40px;\n                                border-bottom: 1px solid var(--mrkc-line);\n                                max-width: var(--mrkc-max);\n                                margin: 0 auto 70px;\n                            }\n\n                            .mrkc-offers__filter-btn {\n                                background: none;\n                                border: none;\n                                padding: 12px 0;\n                                font-family: var(--mrkc-sans);\n                                font-size: 12px;\n                                letter-spacing: .22em;\n                                text-transform: uppercase;\n                                color: var(--mrkc-muted);\n                                cursor: pointer;\n                                position: relative;\n                                transition: color .25s ease;\n                            }\n\n                            .mrkc-offers__filter-btn:hover,\n                            .mrkc-offers__filter-btn:focus,\n                            .mrkc-offers__filter-btn:active {\n                                background: none;\n                                outline: none;\n                            }\n\n                            .mrkc-offers__filter-btn::after {\n                                content: '';\n                                position: absolute;\n                                left: 0;\n                                right: 0;\n                                bottom: -14px;\n                                height: 2px;\n                                background: var(--mrkc-brand);\n                                transform: scaleX(0);\n                                transform-origin: left;\n                                transition: transform .35s ease;\n                            }\n\n                            .mrkc-offers__filter-btn.is-active {\n                                color: var(--mrkc-ink);\n                            }\n\n                            .mrkc-offers__filter-btn.is-active::after {\n                                transform: scaleX(1);\n                            }\n\n                            \/* 3-column grid *\/\n                            .mrkc-offers__grid {\n                                max-width: var(--mrkc-max);\n                                margin: 0 auto;\n                                padding: 0 24px;\n                                display: grid;\n                                grid-template-columns: 1fr;\n                                gap: 60px 32px;\n                            }\n\n                            @media (min-width: 768px) {\n                                .mrkc-offers__grid {\n                                    grid-template-columns: repeat(2, 1fr);\n                                }\n                            }\n\n                            @media (min-width: 1100px) {\n                                .mrkc-offers__grid {\n                                    grid-template-columns: repeat(3, 1fr);\n                                    gap: 70px 40px;\n                                }\n                            }\n\n                            \/* Card *\/\n                            .mrkc-offer-card {\n                                text-align: center;\n                                display: flex;\n                                flex-direction: column;\n                                transition: opacity .35s ease;\n                            }\n\n                            .mrkc-offer-card[hidden] {\n                                display: none !important;\n                            }\n\n                            .mrkc-offer-card__image {\n                                width: 100%;\n                                aspect-ratio: 4\/3;\n                                object-fit: cover;\n                                display: block;\n                                margin-bottom: 32px;\n                            }\n\n                            .mrkc-offer-card__name {\n                                font-family: var(--mrkc-serif);\n                                font-size: clamp(20px, 1.8vw, 24px);\n                                color: var(--mrkc-ink);\n                                margin: 0 0 18px;\n                                line-height: 1.3;\n                                text-transform: uppercase;\n                                letter-spacing: .08em;\n                                font-weight: 500;\n                            }\n\n                            .mrkc-offer-card__desc {\n                                color: var(--mrkc-muted);\n                                font-size: 15px;\n                                line-height: 1.75;\n                                margin: 0 0 22px;\n                                max-width: 340px;\n                                margin-left: auto;\n                                margin-right: auto;\n                            }\n\n                            .mrkc-offer-card__price {\n                                font-family: var(--mrkc-sans);\n                                font-size: 15px;\n                                color: var(--mrkc-ink);\n                                font-weight: 600;\n                                margin: 0 0 26px;\n                                line-height: 1.5;\n                            }\n\n                            .mrkc-offer-card__cta {\n                                margin-top: auto;\n                            }\n\n                            .mrkc-offer-card__cta a {\n                                font-family: var(--mrkc-sans);\n                                font-size: 12px;\n                                letter-spacing: .28em;\n                                text-transform: uppercase;\n                                color: var(--mrkc-gold);\n                                border-bottom: 1px solid var(--mrkc-gold);\n                                padding: 4px 0;\n                                font-weight: 500;\n                                transition: color .25s ease, border-color .25s ease;\n                                display: inline-block;\n                            }\n\n                            .mrkc-offer-card__cta a:hover {\n                                color: var(--mrkc-brand-dark);\n                                border-color: var(--mrkc-brand-dark);\n                            }\n\n                            \/* Loading state *\/\n                            .mrkc-offers__loading {\n                                text-align: center;\n                                padding: 40px 0;\n                                font-size: 13px;\n                                color: var(--mrkc-muted);\n                                letter-spacing: .2em;\n                                text-transform: uppercase;\n                                display: none;\n                            }\n\n                            .mrkc-offers.is-loading .mrkc-offers__loading {\n                                display: block;\n                            }\n\n                            .mrkc-offers.is-loading .mrkc-offers__grid {\n                                opacity: .35;\n                                pointer-events: none;\n                            }\n\n                            \/* Empty state *\/\n                            .mrkc-offers__empty {\n                                grid-column: 1 \/ -1;\n                                text-align: center;\n                                padding: 60px 24px;\n                                color: var(--mrkc-muted);\n                                font-size: 14px;\n                                letter-spacing: .12em;\n                            }\n                        <\/style>\n\n                        <section class=\"mrkc-offers\" id=\"mrkc-offers\">\n\n                            <!-- Filter tabs -->\n                            <div class=\"mrkc-offers__filter\" role=\"tablist\">\n                                <button type=\"button\" class=\"mrkc-offers__filter-btn is-active\"\n                                    data-filter=\"all\">All<\/button>\n                                <button type=\"button\" class=\"mrkc-offers__filter-btn\" data-filter=\"room\">Room\n                                    Offers<\/button>\n                                <button type=\"button\" class=\"mrkc-offers__filter-btn\" data-filter=\"dining\">Dining\n                                    Offers<\/button>\n                            <\/div>\n\n                            <p class=\"mrkc-offers__loading\">Loading offers\u2026<\/p>\n\n                            <!-- Offer cards grid \u2014 static fallback used until WordPress posts are fetched -->\n                            <div class=\"mrkc-offers__grid\" id=\"mrkc-offers-grid\">\n\n                                <!-- 1. Family Set Menu (Dining) -->\n                                <article class=\"mrkc-offer-card\" data-category=\"dining\">\n                                    <img decoding=\"async\" class=\"mrkc-offer-card__image\"\n                                        src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2026\/03\/MRKC-Family-Set-Menu-2026-web-01-1024x683.jpg\"\n                                        alt=\"Family Set Menu\">\n                                    <h3 class=\"mrkc-offer-card__name\">Family Set Menu<\/h3>\n                                    <div class=\"mrkc-offer-card__cta\">\n                                        <a href=\"https:\/\/www.midaresortkanchanaburi.com\/family-set-menu\/\"\n                                            target=\"_blank\" rel=\"noopener\" title=\"Family Set Menu\">Read More<\/a>\n                                    <\/div>\n                                <\/article>\n\n                                <!-- 2. Family Escape Package (Room) -->\n                                <article class=\"mrkc-offer-card\" data-category=\"room\">\n                                    <img decoding=\"async\" class=\"mrkc-offer-card__image\"\n                                        src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2026\/03\/Family-Escape-Package-1024x683.jpg\"\n                                        alt=\"Family Escape Package\">\n                                    <h3 class=\"mrkc-offer-card__name\">Family Escape Package<\/h3>\n                                    <p class=\"mrkc-offer-card__desc\">School Holiday Special! Bring your family for a\n                                        joyful escape. Stay a minimum of 2 nights \u2014 Grand Deluxe | Family Deluxe |\n                                        1-Bedroom Pool Villa.<\/p>\n                                    <p class=\"mrkc-offer-card__price\">From THB 4,678 \/ Room \/ 2 Nights<\/p>\n                                    <div class=\"mrkc-offer-card__cta\">\n                                        <a href=\"https:\/\/www.midaresortkanchanaburi.com\/family-escape-package\/\"\n                                            target=\"_blank\" rel=\"noopener\" title=\"Family Escape Package\">Read More<\/a>\n                                    <\/div>\n                                <\/article>\n\n                            <\/div>\n                        <\/section>\n\n                        <script>\n                            (function () {\n                                'use strict';\n\n                                \/* ---------------------------------------------------------------------\n                                 * WordPress configuration\n                                 * ---------------------------------------------------------------------\n                                 * Offers are pulled live from the WordPress REST API. Nothing needs to\n                                 * be changed when this widget is pasted into Elementor on the MRKC\n                                 * site \u2014 the endpoint is resolved automatically:\n                                 *\n                                 *   \u2022 On midaresortkanchanaburi.com  \u2192 \/wp-json\/wp\/v2\/<POST_TYPE>\n                                 *   \u2022 Anywhere else (local preview,\n                                 *     staging, other domain)         \u2192 WP_SITE + \/wp-json\/...\n                                 *\n                                 * To publish a new offer: create a WordPress post, assign it to one of\n                                 * the category slugs listed in CATEGORY_MAP, set a featured image, and\n                                 * (optionally) fill the ACF field named in ACF_PRICE_FIELD.\n                                 * ------------------------------------------------------------------- *\/\n                                var WP_SITE = 'https:\/\/www.midaresortkanchanaburi.com';\n                                var POST_TYPE = 'posts';               \/\/ 'posts', or a CPT rest_base e.g. 'offer'\n                                var FETCH_PER_PAGE = 24;\n                                var ACF_PRICE_FIELD = 'starting_price';    \/\/ ACF \/ post-meta text field (optional)\n                                var EXCERPT_MAX = 180;                  \/\/ chars, when falling back to content\n                                var PLACEHOLDER_IMG = 'https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/DJI_0906-1024x683-1.jpeg';\n\n                                \/* Filter tab  \u2192  WordPress category slugs that feed it.\n                                   Several slugs per tab so old and new taxonomies both work. *\/\n                                var CATEGORY_MAP = {\n                                    room: ['room', 'rooms', 'room-offers', 'accommodation'],\n                                    dining: ['foods-beverage', 'food-beverage', 'dining', 'dining-offers', 'restaurant']\n                                };\n                                var DEFAULT_CATEGORY = 'room';           \/\/ used when a post matches no slug above\n\n                                var root = document.getElementById('mrkc-offers');\n                                if (!root) return;\n\n                                var btns = root.querySelectorAll('.mrkc-offers__filter-btn');\n                                var grid = root.querySelector('#mrkc-offers-grid');\n\n                                \/* ---------- Filter (works for both static + WP-rendered cards) ----- *\/\n                                function applyFilter(cat) {\n                                    var cards = grid.querySelectorAll('.mrkc-offer-card');\n                                    var shown = 0;\n                                    cards.forEach(function (c) {\n                                        var show = (cat === 'all') || (c.dataset.category === cat);\n                                        c.hidden = !show;\n                                        if (show) shown++;\n                                    });\n                                    var empty = grid.querySelector('.mrkc-offers__empty');\n                                    if (empty) empty.hidden = (cards.length === 0) ? false : (shown > 0);\n                                }\n                                btns.forEach(function (b) {\n                                    b.addEventListener('click', function () {\n                                        btns.forEach(function (x) { x.classList.remove('is-active'); });\n                                        b.classList.add('is-active');\n                                        applyFilter(b.dataset.filter);\n                                    });\n                                });\n\n                                \/* Hide filter tabs that have no offers behind them. *\/\n                                function syncFilterTabs() {\n                                    var cards = grid.querySelectorAll('.mrkc-offer-card');\n                                    var present = {};\n                                    cards.forEach(function (c) { present[c.dataset.category] = true; });\n                                    var visible = 0;\n                                    btns.forEach(function (b) {\n                                        var f = b.dataset.filter;\n                                        var has = (f === 'all') || !!present[f];\n                                        b.hidden = !has;\n                                        if (has) visible++;\n                                    });\n                                    \/\/ A lone \"All\" tab is noise \u2014 hide the whole filter bar.\n                                    var bar = root.querySelector('.mrkc-offers__filter');\n                                    if (bar) bar.hidden = (visible <= 1);\n                                }\n\n                                \/* ---------- Helpers ------------------------------------------------ *\/\n                                function stripHtml(html) {\n                                    if (!html) return '';\n                                    \/\/ DOMParser keeps the markup inert (no image preloads, no script runs)\n                                    \/\/ and lets us drop Elementor's inline <style> blocks before reading text.\n                                    var doc = new DOMParser().parseFromString(String(html), 'text\/html');\n                                    var junk = doc.querySelectorAll('style, script, noscript');\n                                    for (var i = 0; i < junk.length; i++) junk[i].parentNode.removeChild(junk[i]);\n                                    return (doc.body.textContent || '')\n                                        .replace(\/\\s+\/g, ' ')\n                                        .replace(\/\\s*(Continue reading|Read more)\\s*[\u2026.]*\\s*$\/i, '')\n                                        .trim();\n                                }\n\n                                function esc(s) {\n                                    return String(s == null ? '' : s)\n                                        .replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;')\n                                        .replace(\/\"\/g, '&quot;').replace(\/'\/g, '&#39;');\n                                }\n\n                                function truncate(s, max) {\n                                    if (!s || s.length <= max) return s;\n                                    var cut = s.slice(0, max);\n                                    var sp = cut.lastIndexOf(' ');\n                                    return (sp > max * 0.6 ? cut.slice(0, sp) : cut).replace(\/[,;:.\\s]+$\/, '') + '\u2026';\n                                }\n\n                                function detectCategory(post) {\n                                    var terms = (post._embedded && post._embedded['wp:term']) || [];\n                                    var flat = [].concat.apply([], terms);\n                                    for (var i = 0; i < flat.length; i++) {\n                                        var slug = (flat[i].slug || '').toLowerCase();\n                                        for (var key in CATEGORY_MAP) {\n                                            if (CATEGORY_MAP[key].indexOf(slug) !== -1) return key;\n                                        }\n                                    }\n                                    return DEFAULT_CATEGORY;\n                                }\n\n                                function featuredImage(post) {\n                                    var m = post._embedded && post._embedded['wp:featuredmedia'] &&\n                                        post._embedded['wp:featuredmedia'][0];\n                                    if (!m) return PLACEHOLDER_IMG;\n                                    var sizes = m.media_details && m.media_details.sizes;\n                                    \/\/ Prefer a resized file over the full-size original.\n                                    var pick = sizes && (sizes.large || sizes.medium_large || sizes.medium);\n                                    return (pick && pick.source_url) || m.source_url || PLACEHOLDER_IMG;\n                                }\n\n                                function description(post) {\n                                    var ex = stripHtml(post.excerpt && post.excerpt.rendered);\n                                    if (ex) return truncate(ex, EXCERPT_MAX);\n                                    return truncate(stripHtml(post.content && post.content.rendered), EXCERPT_MAX);\n                                }\n\n                                function price(post) {\n                                    var v = (post.acf && post.acf[ACF_PRICE_FIELD]) ||\n                                        (post.meta && post.meta[ACF_PRICE_FIELD]) || '';\n                                    if (v) return stripHtml(String(v));\n                                    \/\/ Last resort: look for a \"From THB 4,678 \u2026\" line inside the content.\n                                    var body = stripHtml(post.content && post.content.rendered);\n                                    var m = body.match(\/(?:from\\s+)?(?:THB|\u0e3f|Baht)\\s?[\\d,]+(?:\\+\\+)?(?:\\s*(?:net|nett|per|\\\/)[^.|]{0,40})?\/i);\n                                    return m ? m[0].trim() : '';\n                                }\n\n                                function buildCard(post) {\n                                    var title = stripHtml(post.title && post.title.rendered);\n                                    var desc = description(post);\n                                    var link = post.link || '#';\n                                    var pr = price(post);\n                                    var article = document.createElement('article');\n\n                                    article.className = 'mrkc-offer-card';\n                                    article.dataset.category = detectCategory(post);\n                                    article.innerHTML =\n                                        '<img decoding=\"async\" loading=\"lazy\" class=\"mrkc-offer-card__image\" src=\"' +\n                                        esc(featuredImage(post)) + '\" alt=\"' + esc(title) + '\">' +\n                                        '<h3 class=\"mrkc-offer-card__name\">' + esc(title) + '<\/h3>' +\n                                        (desc ? '<p class=\"mrkc-offer-card__desc\">' + esc(desc) + '<\/p>' : '') +\n                                        (pr ? '<p class=\"mrkc-offer-card__price\">' + esc(pr) + '<\/p>' : '') +\n                                        '<div class=\"mrkc-offer-card__cta\">' +\n                                        '<a href=\"' + esc(link) + '\" title=\"' + esc(title) + '\">Read More<\/a>' +\n                                        '<\/div>';\n                                    return article;\n                                }\n\n                                function render(posts) {\n                                    grid.innerHTML = '';\n                                    if (!posts.length) {\n                                        grid.innerHTML = '<p class=\"mrkc-offers__empty\">No current offers \u2014 please check back soon.<\/p>';\n                                        syncFilterTabs();\n                                        return;\n                                    }\n                                    posts.forEach(function (p) { grid.appendChild(buildCard(p)); });\n                                    var empty = document.createElement('p');\n                                    empty.className = 'mrkc-offers__empty';\n                                    empty.hidden = true;\n                                    empty.textContent = 'No offers in this category right now.';\n                                    grid.appendChild(empty);\n\n                                    syncFilterTabs();\n                                    var active = root.querySelector('.mrkc-offers__filter-btn.is-active');\n                                    if (active && active.hidden) {\n                                        btns.forEach(function (x) { x.classList.remove('is-active'); });\n                                        active = root.querySelector('.mrkc-offers__filter-btn[data-filter=\"all\"]');\n                                        if (active) active.classList.add('is-active');\n                                    }\n                                    applyFilter(active ? active.dataset.filter : 'all');\n                                }\n\n                                \/* ---------- WordPress fetch ---------------------------------------- *\/\n                                var onSite = \/(^|\\.)midaresortkanchanaburi\\.com$\/i.test(location.hostname);\n                                var base = (onSite ? '' : WP_SITE) + '\/wp-json\/wp\/v2\/' + POST_TYPE;\n                                var url = base + '?_embed=1&per_page=' + FETCH_PER_PAGE +\n                                    '&orderby=date&order=desc&status=publish';\n\n                                root.classList.add('is-loading');\n\n                                fetch(url, { credentials: 'omit' })\n                                    .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })\n                                    .then(function (posts) {\n                                        if (!Array.isArray(posts)) throw new Error('Unexpected REST payload');\n                                        render(posts);\n                                    })\n                                    .catch(function (err) {\n                                        \/\/ Keep the static cards below so the page never renders empty.\n                                        console.warn('[MRKC Offers] WordPress fetch failed, keeping static cards:', err);\n                                    })\n                                    .then(function () { root.classList.remove('is-loading'); });\n                            })();\n                        <\/script>\n                    <\/div>\n                <\/div>\n                <div class=\"elementor-element elementor-element-cf29a19 e-con-full e-flex e-con e-parent\"\n                    data-id=\"cf29a19\" data-element_type=\"container\" data-e-type=\"container\">\n                    <div class=\"elementor-element elementor-element-a438256 elementor-widget elementor-widget-html\"\n                        data-id=\"a438256\" data-element_type=\"widget\" data-e-type=\"widget\"\n                        data-widget_type=\"html.default\">\n                        <!--\n  ===========================================================================\n  MRKC HOME \u2014 00 BASE \/ SHARED STYLES\n  Drop this once on the page (or in Elementor \u2192 Site Settings \u2192 Custom CSS\n  without the <style> tags). Defines brand colors, fonts, reset, and\n  shared .mrkc-btn-* button classes used by every section.\n  ===========================================================================\n-->\n                        <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n                        <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n                        <link\n                            href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600&amp;family=Inter:wght@300;400;500;600&amp;display=swap\"\n                            rel=\"stylesheet\">\n\n                        <style>\n                            :root {\n                                --mrkc-brand: #0c6980;\n                                \/* TODO change to MRKC official brand HEX *\/\n                                --mrkc-brand-dark: #094e60;\n                                --mrkc-gold: #0c6980;\n                                --mrkc-ink: #030303;\n                                --mrkc-muted: #76777a;\n                                --mrkc-bg: #ffffff;\n                                --mrkc-bg-ash: #f5f3ee;\n                                --mrkc-line: #e6e2d8;\n                                --mrkc-max: 1280px;\n                                --mrkc-serif: 'Cormorant Garamond', Georgia, serif;\n                                --mrkc-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n                            }\n\n                            \/* Scope reset to .mrkc-* containers so we don't break Elementor's own CSS *\/\n                            [class^=\"mrkc-\"],\n                            [class*=\" mrkc-\"] {\n                                box-sizing: border-box;\n                            }\n\n                            [class^=\"mrkc-\"] img,\n                            [class*=\" mrkc-\"] img {\n                                max-width: 100%;\n                                height: auto;\n                                display: block;\n                            }\n\n                            [class^=\"mrkc-\"] a,\n                            [class*=\" mrkc-\"] a {\n                                color: inherit;\n                                text-decoration: none;\n                            }\n\n                            [class^=\"mrkc-\"] h1,\n                            [class^=\"mrkc-\"] h2,\n                            [class^=\"mrkc-\"] h3,\n                            [class*=\" mrkc-\"] h1,\n                            [class*=\" mrkc-\"] h2,\n                            [class*=\" mrkc-\"] h3 {\n                                font-family: var(--mrkc-serif);\n                                font-weight: 500;\n                                line-height: 1.2;\n                                margin: 0 0 .5em;\n                                letter-spacing: .01em;\n                            }\n\n                            [class^=\"mrkc-\"] p,\n                            [class*=\" mrkc-\"] p {\n                                line-height: 1.7;\n                            }\n\n                            \/* Shared eyebrow \/ lead \/ title *\/\n                            .mrkc-eyebrow {\n                                font-family: var(--mrkc-sans);\n                                font-size: 12px;\n                                letter-spacing: .22em;\n                                text-transform: uppercase;\n                                color: var(--mrkc-gold);\n                                margin: 0 0 14px;\n                                font-weight: 500;\n                            }\n\n                            .mrkc-title {\n                                font-family: var(--mrkc-serif);\n                                font-size: clamp(28px, 4vw, 44px);\n                                margin: 0 0 16px;\n                                line-height: 1.2;\n                            }\n\n                            .mrkc-lead {\n                                max-width: 760px;\n                                margin: 0 auto 24px;\n                                font-size: 17px;\n                                color: var(--mrkc-muted);\n                                font-family: var(--mrkc-sans);\n                            }\n\n                            .mrkc-center {\n                                text-align: center;\n                            }\n\n                            \/* Shared buttons *\/\n                            .mrkc-btn {\n                                display: inline-block;\n                                padding: 14px 32px;\n                                font-family: var(--mrkc-sans);\n                                font-size: 12px;\n                                font-weight: 500;\n                                letter-spacing: .25em;\n                                text-transform: uppercase;\n                                border: 1px solid currentColor;\n                                background: transparent;\n                                color: var(--mrkc-ink);\n                                cursor: pointer;\n                                transition: all .25s ease;\n                                text-decoration: none;\n                            }\n\n                            .mrkc-btn:hover {\n                                background: var(--mrkc-ink);\n                                color: #fff;\n                            }\n\n                            .mrkc-btn--gold {\n                                color: var(--mrkc-gold);\n                                border-color: var(--mrkc-gold);\n                            }\n\n                            .mrkc-btn--gold:hover {\n                                background: var(--mrkc-gold);\n                                color: #fff;\n                            }\n\n                            .mrkc-btn--solid {\n                                background: var(--mrkc-brand);\n                                color: #fff;\n                                border-color: var(--mrkc-brand);\n                            }\n\n                            .mrkc-btn--solid:hover {\n                                background: var(--mrkc-brand-dark);\n                                border-color: var(--mrkc-brand-dark);\n                            }\n\n                            .mrkc-btn--link {\n                                border: none;\n                                padding: 6px 0;\n                                border-bottom: 1px solid var(--mrkc-gold);\n                                color: var(--mrkc-gold);\n                                letter-spacing: .25em;\n                                font-family: var(--mrkc-sans);\n                                font-size: 12px;\n                                text-transform: uppercase;\n                                font-weight: 500;\n                            }\n\n                            .mrkc-btn--link:hover {\n                                background: none;\n                                color: var(--mrkc-brand-dark);\n                                border-color: var(--mrkc-brand-dark);\n                            }\n                        <\/style>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/main>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Check-in Check-out Rooms &minus; 1 + Guests &minus; 2 + Book Now Discover exclusive packages and seasonal promotions designed to make your stay at Mida Resort Kanchanaburi even more memorable. From accommodation savings to curated dining experiences along the River Kwai Yai, find an offer perfect for your next escape. All Room Offers Dining Offers [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8812","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/8812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/comments?post=8812"}],"version-history":[{"count":8,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/8812\/revisions"}],"predecessor-version":[{"id":8906,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/8812\/revisions\/8906"}],"wp:attachment":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/media?parent=8812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}