{"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-10-22T17:00:12","modified_gmt":"2026-10-22T10:00:12","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:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-content\/uploads\/2026\/10\/Banner-page-website-Mida-Resort-Kanchanaburi.jpg');\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, #005a64) !important;\n                                background: transparent !important;\n                                color: var(--mrkc-brand, #005a64) !important;\n                                -webkit-text-fill-color: var(--mrkc-brand, #005a64) !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, #005a64) !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, #005a64 0%, #005a64 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, #005a64 0%, #005a64 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=\"470\" \/>\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                        \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, without truncation or extra content\/price extraction\n    Image          \u2192 featured image (large size preferred)\n    Link           \u2192 post permalink\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      * { font-family: 'Noto Sans Thai', sans-serif !important; }\n  .aohh-offers {\n    padding: 5rem 1.5rem 6.25rem;\n    background: var(--aohh-bg);\n    font-family: var(--mrkc-sans);\n  }\n  .aohh-offers__inner {\n    max-width: var(--aohh-max, 80rem);\n    margin: 0 auto;\n  }\n\n  .aohh-offers__head {\n    text-align: center;\n    margin-bottom: 3rem;\n  }\n  .aohh-offers__head .aohh-eyebrow { margin-bottom: 0.75rem; }\n  .aohh-offers__head :is(h1,h2) {\n    font-family: var(--aohh-serif);\n    font-size: clamp(1.625rem, 3vw, 2rem);\n    font-weight: 400;\n    color: var(--aohh-ink);\n    margin: 0 0 1rem;\n    text-transform: uppercase;\n    letter-spacing: .04em;\n  }\n\n  \/* Filter tabs *\/\n  .aohh-offers__filters {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: center;\n    flex-wrap: wrap;\n    margin-bottom: 3.5rem;\n  }\n  .aohh-offers__filter-btn {\n    background: none;\n    border: 1px solid currentColor;\n    padding: 0.625rem 1.5rem;\n    font-family: var(--mrkc-sans);\n    font-size: 0.75rem;\n    letter-spacing: .2em;\n    text-transform: uppercase;\n    color: inherit; opacity: .4;\n    cursor: pointer;\n    border-radius: 0;\n    transition: opacity .25s ease;\n  }\n  .aohh-offers__filter-btn:hover { opacity: .75; }\n  .aohh-offers__filter-btn.is-active { opacity: 1; }\n\n  \/* Offer grid *\/\n  .aohh-offers__grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2.25rem;\n  }\n  @media (min-width: 640px) {\n    .aohh-offers__grid { grid-template-columns: repeat(2, 1fr); }\n  }\n  @media (min-width: 1024px) {\n    .aohh-offers__grid { grid-template-columns: repeat(3, 1fr); }\n  }\n\n  \/* Offer card *\/\n  .aohh-offer-card {\n    background: #fff;\n    border: 1px solid var(--aohh-line, #e0ddd8);\n    display: flex;\n    flex-direction: column;\n    transition: box-shadow .25s ease, transform .25s ease;\n  }\n  .aohh-offer-card:hover {\n    box-shadow: 0 0.75rem 2.25rem rgba(0,0,0,.10);\n    transform: translateY(-3px);\n  }\n  .aohh-offer-card[hidden] { display: none; }\n\n  .aohh-offer-card__img-wrap {\n    position: relative;\n    overflow: hidden;\n    aspect-ratio: 4 \/ 3;\n  }\n  .aohh-offer-card__img-wrap img {\n    width: 100%; height: 100%;\n    object-fit: cover; display: block;\n    transition: transform .55s ease;\n  }\n  .aohh-offer-card:hover .aohh-offer-card__img-wrap img {\n    transform: scale(1.04);\n  }\n  .aohh-offer-card__badge {\n    position: absolute;\n    top: 1rem; left: 1rem;\n    background: var(--aohh-brand, #0c6980);\n    color: #fff;\n    font-size: 0.5625rem;\n    letter-spacing: .22em;\n    text-transform: uppercase;\n    padding: 0.3125rem 0.75rem;\n    border-radius: 0.125rem;\n  }\n\n  .aohh-offer-card__body {\n    padding: 1.75rem 1.75rem 1.5rem;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .aohh-offer-card__title {\n    font-family: var(--aohh-serif);\n    font-size: 1.25rem;\n    font-weight: 400;\n    color: var(--aohh-ink);\n    margin: 0 0 0.75rem;\n    line-height: 1.35;\n  }\n  .aohh-offer-card__desc {\n    font-size: 0.875rem;\n    color: var(--aohh-muted, #777);\n    line-height: 1.75;\n    margin: 0 0 1.5rem;\n    flex: 1;\n  }\n  .aohh-offer-card__link {\n    display: inline-block;\n    font-size: 0.6875rem;\n    letter-spacing: .22em;\n    text-transform: uppercase;\n    color: var(--aohh-brand, #0c6980);\n    text-decoration: none;\n    border-bottom: 1px solid var(--aohh-brand, #0c6980);\n    padding-bottom: 0.125rem;\n    align-self: flex-start;\n    transition: opacity .2s ease;\n  }\n  .aohh-offer-card__link:hover { opacity: .7; }\n\n\/* Use the De Sea Offers presentation with Kanchanaburi's own content feed. *\/\n#mrkc-offers {\n --aohh-brand:var(--mhg-all-ci,#005a64);--aohh-gold:var(--mhg-all-ci,#005a64);\n --aohh-muted:#565a5a;--mrkc-muted:#565a5a;--aohh-ink:#333;\n --aohh-bg:transparent;--aohh-line:rgba(3,3,3,.12);--aohh-max:100rem;\n --aohh-serif:inherit;--mrkc-sans:'Noto Sans Thai',sans-serif;\n width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);\n}\n#mrkc-offers,#mrkc-offers *{box-sizing:border-box;}\n#mrkc-offers .aohh-eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aohh-gold);margin:0 0 .75rem;line-height:1.7;}\n#mrkc-offers .aohh-offers__head :is(h1,h2){line-height:1.2;letter-spacing:.01em;}\n#mrkc-offers .aohh-lead{max-width:47.5rem;margin:0 auto 1.5rem;font-size:1.0625rem;line-height:1.7;color:var(--mrkc-muted);}\n#mrkc-offers .aohh-offer-card__title{line-height:1.2;letter-spacing:.01em;margin-bottom:.625rem;}\n#mrkc-offers .aohh-offer-card__desc{line-height:1.7;}\n#mrkc-offers .aohh-offer-card__price{font-size:.875rem;line-height:1.7;margin:0 0 1.5rem;}\n#mrkc-offers .aohh-offer-card__link{color:var(--aohh-brand);text-decoration:none;}\n#mrkc-offers .aohh-offer-card__img-wrap img{max-width:100%;margin:0;}\n#mrkc-offers .aohh-offers__loading{display:none;text-align:center;padding:2.5rem 0;color:var(--aohh-muted);}\n#mrkc-offers.is-loading .aohh-offers__loading{display:block;}\n#mrkc-offers.is-loading .aohh-offers__grid{opacity:.35;pointer-events:none;}\n#mrkc-offers .aohh-offers__empty{grid-column:1\/-1;text-align:center;padding:2.5rem 1.5rem;color:var(--aohh-muted);}\n#mrkc-offers .aohh-offers__filters[hidden],#mrkc-offers .aohh-offers__filter-btn[hidden],#mrkc-offers .aohh-offers__empty[hidden]{display:none!important;}\n<\/style>\n\n                        <section class=\"aohh-offers\" id=\"mrkc-offers\"><div class=\"aohh-offers__inner\"><div class=\"aohh-offers__head\"><p class=\"aohh-eyebrow\">Special Deals<\/p><h1 id=\"mrkc-offers-page-title\">OFFERS<\/h1><p class=\"aohh-lead\">The best hotel deals for your memorable stay in Kanchanaburi.<\/p><\/div>\n\n                            <!-- Filter tabs -->\n                            <div class=\"aohh-offers__filters\" role=\"tablist\">\n                                <button type=\"button\" class=\"aohh-offers__filter-btn is-active\" data-filter=\"all\" role=\"tab\" aria-selected=\"true\">All<\/button>\n                                <button type=\"button\" class=\"aohh-offers__filter-btn\" data-filter=\"room\" role=\"tab\" aria-selected=\"false\">Room Offers<\/button>\n                                <button type=\"button\" class=\"aohh-offers__filter-btn\" data-filter=\"dining\" role=\"tab\" aria-selected=\"false\">Dining Offers<\/button>\n                            <\/div>\n\n                            <p class=\"aohh-offers__loading\">Loading offers\u2026<\/p>\n\n                            <!-- Offer cards grid \u2014 static fallback used until WordPress posts are fetched -->\n                            <div class=\"aohh-offers__grid\" id=\"mrkc-offers-grid\">\n\n                                <!-- 1. Family Set Menu (Dining) -->\n                                <article class=\"aohh-offer-card\" data-category=\"dining\"><div class=\"aohh-offer-card__img-wrap\"><img decoding=\"async\" \n                                        src=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-content\/uploads\/2026\/03\/MRKC-Family-Set-Menu-2026-web-01-1024x683.jpg\"\n                                        alt=\"Family Set Menu\"><span class=\"aohh-offer-card__badge\">Dining Offer<\/span><\/div><div class=\"aohh-offer-card__body\"><h3 class=\"aohh-offer-card__title\">Family Set Menu<\/h3><p class=\"aohh-offer-card__desc\"><\/p><a class=\"aohh-offer-card__link\" href=\"https:\/\/www.midaresortkanchanaburi.com\/family-set-menu\/\"\n                                            target=\"_self\" rel=\"noopener\" title=\"Family Set Menu\">View Offer<\/a><\/div><\/article>\n\n                                <!-- 2. Family Escape Package (Room) -->\n                                <article class=\"aohh-offer-card\" data-category=\"room\"><div class=\"aohh-offer-card__img-wrap\"><img decoding=\"async\" \n                                        src=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-content\/uploads\/2026\/03\/Family-Escape-Package-1024x683.jpg\"\n                                        alt=\"Family Escape Package\"><span class=\"aohh-offer-card__badge\">Room Offer<\/span><\/div><div class=\"aohh-offer-card__body\"><h3 class=\"aohh-offer-card__title\">Family Escape Package<\/h3><p class=\"aohh-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><p class=\"aohh-offer-card__price\">From THB 4,678 \/ Room \/ 2 Nights<\/p><a class=\"aohh-offer-card__link\" href=\"https:\/\/www.midaresortkanchanaburi.com\/family-escape-package\/\"\n                                            target=\"_self\" rel=\"noopener\" title=\"Family Escape Package\">View Offer<\/a><\/div><\/article>\n\n                            <\/div>\n                        <\/div><\/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                                 * fill the post Excerpt with the summary to display.\n                                 * ------------------------------------------------------------------- *\/\n                                var WP_SITE = 'https:\/\/mhg.co.th\/midaresortkanchanaburi';\n                                var POST_TYPE = 'posts';               \/\/ 'posts', or a CPT rest_base e.g. 'offer'\n                                var FETCH_PER_PAGE = 24;\n                                var PLACEHOLDER_IMG = 'https:\/\/mhg.co.th\/midaresortkanchanaburi\/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('.aohh-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('.aohh-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('.aohh-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'); x.setAttribute('aria-selected','false'); });\n                                        b.classList.add('is-active'); b.setAttribute('aria-selected','true');\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('.aohh-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('.aohh-offers__filters');\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 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                                    return stripHtml(post.excerpt && post.excerpt.rendered);\n                                }\n\n                                function buildCard(post) {\n var title=stripHtml(post.title&&post.title.rendered),desc=description(post),link=post.link||'#';\n var category=detectCategory(post),badge=category==='room'?'Room Offer':'Dining Offer';\n var article=document.createElement('article');\n article.className='aohh-offer-card';article.dataset.postId=String(post.id||'');article.dataset.category=category;\n article.innerHTML='<div class=\"aohh-offer-card__img-wrap\">'+\n '<img decoding=\"async\" loading=\"lazy\" src=\"'+esc(featuredImage(post))+'\" alt=\"'+esc(title)+'\">'+\n '<span class=\"aohh-offer-card__badge\">'+badge+'<\/span><\/div>'+\n '<div class=\"aohh-offer-card__body\"><h3 class=\"aohh-offer-card__title\">'+esc(title)+'<\/h3>'+\n '<p class=\"aohh-offer-card__desc\">'+esc(desc)+'<\/p>'+\n '<a class=\"aohh-offer-card__link\" href=\"'+esc(link)+'\" title=\"'+esc(title)+'\">View Offer<\/a><\/div>';\n return article;\n}\n\n                                function uniqueOffers(posts) {\n                                    var seenLinks = Object.create(null);\n                                    var seenIds = Object.create(null);\n                                    return posts.filter(function (post) {\n                                        if (!post || typeof post !== 'object') return false;\n                                        var id = post.id == null ? '' : String(post.id);\n                                        var link = String(post.link || '').trim();\n                                        if (link && link !== '#') {\n                                            try {\n                                                var canonical = new URL(link, WP_SITE + '\/');\n                                                canonical.hash = '';\n                                                canonical.pathname = canonical.pathname.replace(\/\\\/+$\/, '') || '\/';\n                                                link = canonical.href;\n                                            } catch (e) { \/* Keep the original link for comparison. *\/ }\n                                        } else { link = ''; }\n                                        if ((id && seenIds[id]) || (link && seenLinks[link])) return false;\n                                        if (id) seenIds[id] = true;\n                                        if (link) seenLinks[link] = true;\n                                        return true;\n                                    });\n                                }\n\n                                function mhgUniqueOffers20261002(posts) {\n var translations = {\"8693\":[\"25396\",\"en\"],\"8698\":[\"25396\",\"th\"]};\n var requested = new URLSearchParams(location.search).get('lang') || document.documentElement.lang || 'en';\n var lang = requested.toLowerCase().split('-')[0];\n var selected = Object.create(null), order = [];\n function key(p) {\n  if (translations[p.id]) return 'translation:' + translations[p.id][0];\n  if (p.link) { try { var u = new URL(p.link,location.href); return 'url:' + u.origin + u.pathname.replace(\/\\\/+$\/, ''); } catch(e) {} }\n  return 'id:' + p.id;\n }\n function rank(p) {var l=translations[p.id] && translations[p.id][1]; return l===lang?3:l==='en'?2:1;}\n (Array.isArray(posts)?posts:[]).forEach(function(p){if(!p||!p.id)return;var k=key(p);if(!selected[k]){selected[k]=p;order.push(k);}else if(rank(p)>rank(selected[k]))selected[k]=p;});\n return order.map(function(k){return selected[k];});\n}\n\nfunction render(posts) {\n posts = mhgUniqueOffers20261002(posts);\n\n                                    posts = uniqueOffers(posts);\n                                    grid.innerHTML = '';\n                                    if (!posts.length) {\n                                        grid.innerHTML = '<p class=\"aohh-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      \/\/ MHG 2026-10-21: stable Room Offers first, then Dining Offers.\n      \/\/ Move the existing nodes so filter handlers and accessible order agree.\n      (function () {\n        var cards = Array.prototype.filter.call(grid.children, function (card) {\n          return card.tagName === 'ARTICLE';\n        });\n        function isRoom(card) {\n          return (card.getAttribute('data-category') || card.getAttribute('data-xen-offer-category')) === 'room';\n        }\n        cards.filter(isRoom).concat(cards.filter(function (card) { return !isRoom(card); }))\n          .forEach(function (card) { grid.appendChild(card); });\n      }());\n\n                                    var empty = document.createElement('p');\n                                    empty.className = 'aohh-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('.aohh-offers__filter-btn.is-active');\n                                    if (active && active.hidden) {\n                                        btns.forEach(function (x) { x.classList.remove('is-active'); x.setAttribute('aria-selected','false'); });\n                                        active = root.querySelector('.aohh-offers__filter-btn[data-filter=\"all\"]');\n                                        if (active) { active.classList.add('is-active'); active.setAttribute('aria-selected','true'); }\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: #005a64;\n                                \/* TODO change to MRKC official brand HEX *\/\n                                --mrkc-brand-dark: #005a64;\n                                --mrkc-gold: #005a64;\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>\n\n\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 Special Deals OFFERS The best hotel deals for your memorable stay in Kanchanaburi. All Room Offers Dining Offers Loading offers\u2026 Dining Offer Family Set Menu View Offer Room Offer Family Escape Package School Holiday Special! Bring your family for a joyful escape. Stay [&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":14,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/8812\/revisions"}],"predecessor-version":[{"id":9045,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/8812\/revisions\/9045"}],"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}]}}