{"id":12,"date":"2017-08-22T12:24:11","date_gmt":"2017-08-22T05:24:11","guid":{"rendered":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/?page_id=12"},"modified":"2026-09-01T12:42:46","modified_gmt":"2026-09-01T05:42:46","slug":"best-relaxing-boutique-resort-in-kanchanaburi","status":"publish","type":"page","link":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a323b4 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"1a323b4\" 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-ea836ff\" data-id=\"ea836ff\" 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-4e5f733 elementor-widget elementor-widget-html\" data-id=\"4e5f733\" 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<!--\n  ===========================================================================\n  MRKC HOME \u2014 01 HERO  (full-screen image + booking widget overlay)\n  Requires: 00-base.html on the page.\n  Image:    images\/01-hero.jpg  (change to a Media Library URL when uploaded)\n  ===========================================================================\n-->\n<style>\n    \/* Common Buttons *\/\n    .mrkc-btn {\n        display: inline-block;\n        font-family: var(--mrkc-sans, inherit);\n        font-size: 13px;\n        letter-spacing: .12em;\n        text-transform: uppercase;\n        padding: 12px 28px;\n        border: 1px solid var(--mrkc-ink, #030303);\n        background: transparent;\n        color: var(--mrkc-ink, #030303);\n        cursor: pointer;\n        transition: all .25s ease;\n        text-decoration: none;\n    }\n\n    .mrkc-btn:hover {\n        background: var(--mrkc-ink, #030303);\n        color: #fff;\n    }\n\n    .mrkc-btn--gold {\n        color: var(--mrkc-gold, #0c6980);\n        border-color: var(--mrkc-gold, #0c6980);\n    }\n\n    .mrkc-btn--gold:hover {\n        background: var(--mrkc-gold, #0c6980);\n        color: #fff;\n    }\n\n    .mrkc-btn--solid {\n        background: var(--mrkc-brand, #0c6980);\n        color: #fff;\n        border-color: var(--mrkc-brand, #0c6980);\n    }\n\n    .mrkc-btn--solid:hover {\n        background: var(--mrkc-brand-dark, #094e60);\n        border-color: var(--mrkc-brand-dark, #094e60);\n    }\n\n    .mrkc-btn--link {\n        border: none;\n        padding: 6px 0;\n        border-bottom: 1px solid var(--mrkc-gold, #0c6980);\n        color: var(--mrkc-gold, #0c6980);\n        letter-spacing: .25em;\n        font-family: var(--mrkc-sans, inherit);\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, #094e60);\n        border-color: var(--mrkc-brand-dark, #094e60);\n    }\n\n    \/* Hero Section *\/\n    .mrkc-hero {\n        position: relative;\n        min-height: 100vh;\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-hero::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-image: url('https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2025\/11\/Mida-Resort-Kanchanaburi-banner-hotel.jpg');\n        \/* TODO: change to absolute URL after uploading to Media *\/\n        background-size: cover;\n        background-position: center;\n        z-index: 0;\n    }\n\n    .mrkc-hero::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55) 100%);\n        z-index: 1;\n    }\n\n    .mrkc-hero__content {\n        position: relative;\n        z-index: 2;\n        text-align: center;\n        padding: 120px 24px 60px;\n        max-width: 900px;\n    }\n\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-hero\">\n\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\n\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 02 INTRO  (about the resort)\n  Requires: 00-base.html on the page.\n  ===========================================================================\n-->\n<style>\n    .mrkc-intro {\n        padding: 110px 24px 70px;\n        text-align: center;\n        background: var(--mrkc-bg);\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-intro__inner {\n        max-width: var(--mrkc-max);\n        margin: 0 auto;\n    }\n\n    .mrkc-intro p {\n        margin: 0 auto 1em;\n        max-width: 820px;\n        color: var(--mrkc-muted);\n        font-size: 17px;\n    }\n<\/style>\n\n<section class=\"mrkc-intro\">\n    <div class=\"mrkc-intro__inner\">\n        <p class=\"mrkc-eyebrow\">Mida Resort Kanchanaburi<\/p>\n        <h2 class=\"mrkc-title\">A Riverside Sanctuary on the River Kwai<\/h2>\n        <p>Discover true serenity at Mida Resort Kanchanaburi, a Thai-contemporary hotel &amp; resort in Kanchanaburi\n            with beautiful views of the River Kwai Yai. Set in a peaceful riverside location, the resort combines\n            comfort, nature, and warm hospitality for a relaxing getaway.<\/p>\n        <p>Mida Resort Kanchanaburi is committed to sustainability, with eco-friendly practices and an organic vegetable\n            farm that helps preserve the natural beauty of the area.<\/p>\n        <p>Guests can enjoy outdoor activities such as rafting and bicycling, or unwind at <em>River Romance<\/em>, our\n            signature riverside dining experience with stunning river views. Whether you are planning a romantic escape,\n            family holiday, or nature retreat, Mida Resort Kanchanaburi offers a memorable stay in one of the best\n            resort destinations in Kanchanaburi.<\/p>\n    <\/div>\n<\/section>\n\n\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 02 SANCTUARY  (intro + rooms slider, combined)\n  Requires: 00-base.html on the page.\n  Layout:   2-column  \u2192  LEFT = intro text,  RIGHT = slider + tabs below\n  ===========================================================================\n-->\n<style>\n    .mrkc-sanctuary {\n        padding: 90px 0 110px;\n        background: var(--mrkc-bg);\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-sanctuary__wrap {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 40px;\n        max-width: 1500px;\n        margin: 0 auto;\n        align-items: center;\n    }\n\n    @media (min-width: 1024px) {\n        .mrkc-sanctuary__wrap {\n            grid-template-columns: 1fr 1.45fr;\n            gap: 60px;\n        }\n    }\n\n    \/* LEFT: text *\/\n    .mrkc-sanctuary__text {\n        padding: 60px 32px 0;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        text-align: center;\n    }\n\n    @media (min-width: 1024px) {\n        .mrkc-sanctuary__text {\n            text-align: left;\n            padding: 80px 32px 80px 80px;\n            align-items: flex-start;\n        }\n    }\n\n    .mrkc-sanctuary__text .mrkc-eyebrow {\n        margin-bottom: 14px;\n    }\n\n    .mrkc-sanctuary__text h2 {\n        font-size: clamp(28px, 3.4vw, 40px);\n        line-height: 1.25;\n        margin-bottom: 24px;\n        max-width: 460px;\n    }\n\n    .mrkc-sanctuary__text p {\n        color: var(--mrkc-muted);\n        font-size: 16px;\n        line-height: 1.85;\n        max-width: 460px;\n        margin: 0 0 16px;\n    }\n\n    .mrkc-sanctuary__text .mrkc-sanctuary__btn {\n        margin-top: 20px;\n        align-self: center;\n        color: #fff;\n    }\n\n    @media (min-width: 1024px) {\n        .mrkc-sanctuary__text .mrkc-sanctuary__btn {\n            align-self: flex-start;\n        }\n    }\n\n    \/* RIGHT: media (slider + tabs) *\/\n    .mrkc-sanctuary__media {\n        display: flex;\n        flex-direction: column;\n        padding: 0 32px;\n    }\n\n    @media (min-width: 1024px) {\n        .mrkc-sanctuary__media {\n            padding: 0 60px 0 0;\n        }\n    }\n\n    \/* Slider *\/\n    .mrkc-sanctuary__slider {\n        position: relative;\n        overflow: hidden;\n        background: #ddd;\n        aspect-ratio: 16 \/ 11;\n        min-height: 360px;\n    }\n\n    .mrkc-sanctuary__slide {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        transition: opacity .6s ease;\n        pointer-events: none;\n    }\n\n    .mrkc-sanctuary__slide.is-active {\n        opacity: 1;\n        pointer-events: auto;\n    }\n\n    .mrkc-sanctuary__slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n    }\n\n    .mrkc-sanctuary__slide::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35) 100%);\n    }\n\n    .mrkc-sanctuary__nav {\n        position: absolute;\n        top: 50%;\n        right: 20px;\n        transform: translateY(-50%);\n        z-index: 3;\n        width: 44px;\n        height: 44px;\n        border-radius: 50%;\n        background: #fff;\n        border: none;\n        box-shadow: 0 6px 18px rgba(0, 0, 0, .18);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #2b2b2b;\n        transition: background .25s ease, color .25s ease;\n        padding: 0;\n    }\n\n    .mrkc-sanctuary__nav:hover {\n        background: var(--mrkc-brand, #5b6b3a);\n        color: #fff;\n    }\n\n    .mrkc-sanctuary__nav.is-prev {\n        right: auto;\n        left: 20px;\n    }\n\n    .mrkc-sanctuary__nav svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n        fill: none;\n        stroke: currentColor;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n    }\n\n    .mrkc-sanctuary__nav svg * {\n        fill: none;\n        stroke: currentColor;\n    }\n\n    .mrkc-sanctuary__dots {\n        position: absolute;\n        left: 50%;\n        top: 24px;\n        transform: translateX(-50%);\n        z-index: 3;\n        display: flex;\n        gap: 8px;\n    }\n\n    .mrkc-sanctuary__dots span {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, .55);\n        cursor: pointer;\n        transition: background .25s ease, transform .25s ease;\n    }\n\n    .mrkc-sanctuary__dots span.is-active {\n        background: #fff;\n        transform: scale(1.3);\n    }\n\n    \/* Tabs (centered below slider) *\/\n    .mrkc-sanctuary__tabs {\n        display: flex;\n        gap: 48px;\n        margin-top: 36px;\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .mrkc-sanctuary__tab {\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-sanctuary__tab:hover,\n    .mrkc-sanctuary__tab:focus,\n    .mrkc-sanctuary__tab:active {\n        background: none;\n        outline: none;\n        color: var(--mrkc-muted);\n    }\n\n    .mrkc-sanctuary__tab::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\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-sanctuary__tab.is-active {\n        color: var(--mrkc-ink);\n    }\n\n    .mrkc-sanctuary__tab.is-active::after {\n        transform: scaleX(1);\n    }\n\n    @media (max-width: 1023px) {\n        .mrkc-sanctuary__nav.is-next {\n            right: 10px;\n        }\n\n        .mrkc-sanctuary__nav.is-prev {\n            left: 10px;\n        }\n\n        .mrkc-sanctuary__tabs {\n            gap: 24px;\n        }\n    }\n<\/style>\n\n<section class=\"mrkc-sanctuary\" id=\"mrkc-sanctuary\">\n    <div class=\"mrkc-sanctuary__wrap\">\n\n        <!-- LEFT: intro text -->\n        <div class=\"mrkc-sanctuary__text\">\n            <p class=\"mrkc-eyebrow\">Mida Resort Kanchanaburi<\/p>\n            <h2>A Riverside Sanctuary on the River Kwai<\/h2>\n            <p>Discover true serenity at Mida Resort Kanchanaburi, a Thai-contemporary hotel &amp; resort with beautiful\n                views of the River Kwai Yai. Set in a peaceful riverside location, the resort combines comfort, nature,\n                and warm hospitality for a relaxing getaway.<\/p>\n            <p>Committed to sustainability with eco-friendly practices and an organic vegetable farm, the resort offers\n                outdoor activities such as rafting and bicycling, or unwind at <em>River Romance<\/em>, our signature\n                riverside dining experience.<\/p>\n            <a class=\"mrkc-btn mrkc-btn--solid mrkc-sanctuary__btn\"\n                href=\"rooms.html\" class=\"mrkc-btn mrkc-btn--gold\">All\n                Rooms &amp; Villas<\/a>\n        <\/div>\n\n        <!-- RIGHT: slider + tabs -->\n        <div class=\"mrkc-sanctuary__media\">\n\n            <div class=\"mrkc-sanctuary__slider\">\n                <div class=\"mrkc-sanctuary__dots\">\n                    <span class=\"is-active\" data-slide=\"0\" aria-label=\"Slide 1\"><\/span>\n                    <span data-slide=\"1\" aria-label=\"Slide 2\"><\/span>\n                    <span data-slide=\"2\" aria-label=\"Slide 3\"><\/span>\n                <\/div>\n\n                <div class=\"mrkc-sanctuary__slide is-active\" data-slide=\"0\">\n                    <img decoding=\"async\" src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/2-Bedroom-Pool-Villa_02.jpg\"\n                        alt=\"2-Bedroom Pool Villa\">\n                <\/div>\n                <div class=\"mrkc-sanctuary__slide\" data-slide=\"1\">\n                    <img decoding=\"async\" src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/Tent-River-Front-View_04.jpg\"\n                        alt=\"Riverside Tent\">\n                <\/div>\n                <div class=\"mrkc-sanctuary__slide\" data-slide=\"2\">\n                    <img decoding=\"async\" src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2025\/11\/Mida-Resort-Kanchanaburi-banner-hotel.jpg\"\n                        alt=\"Resort View\">\n                <\/div>\n\n                <button type=\"button\" class=\"mrkc-sanctuary__nav is-prev\" aria-label=\"Previous slide\">\n                    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n                    <\/svg>\n                <\/button>\n                <button type=\"button\" class=\"mrkc-sanctuary__nav is-next\" aria-label=\"Next slide\">\n                    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                    <\/svg>\n                <\/button>\n            <\/div>\n\n            <div class=\"mrkc-sanctuary__tabs\">\n                <button type=\"button\" class=\"mrkc-sanctuary__tab is-active\" data-slide=\"0\">Our Villas<\/button>\n                <button type=\"button\" class=\"mrkc-sanctuary__tab\" data-slide=\"1\">Our Tents<\/button>\n                <button type=\"button\" class=\"mrkc-sanctuary__tab\" data-slide=\"2\">Our Rooms<\/button>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n    (function () {\n        var root = document.getElementById('mrkc-sanctuary');\n        if (!root) return;\n        var slides = root.querySelectorAll('.mrkc-sanctuary__slide');\n        var tabs = root.querySelectorAll('.mrkc-sanctuary__tab');\n        var dots = root.querySelectorAll('.mrkc-sanctuary__dots span');\n        var prev = root.querySelector('.mrkc-sanctuary__nav.is-prev');\n        var next = root.querySelector('.mrkc-sanctuary__nav.is-next');\n        var current = 0, total = slides.length, timer = null;\n\n        function go(idx) {\n            idx = (idx + total) % total;\n            slides.forEach(function (s, i) { s.classList.toggle('is-active', i === idx); });\n            tabs.forEach(function (t, i) { t.classList.toggle('is-active', i === idx); });\n            dots.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });\n            current = idx;\n        }\n        function restart() {\n            if (timer) clearInterval(timer);\n            timer = setInterval(function () { go(current + 1); }, 6000);\n        }\n        tabs.forEach(function (t) { t.addEventListener('click', function () { go(+t.dataset.slide); restart(); }); });\n        dots.forEach(function (d) { d.addEventListener('click', function () { go(+d.dataset.slide); restart(); }); });\n        if (prev) prev.addEventListener('click', function () { go(current - 1); restart(); });\n        if (next) next.addEventListener('click', function () { go(current + 1); restart(); });\n        restart();\n    })();\n<\/script>\n\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 04 INNER BANNER  (\"Wake Up to Nature\" parallax)\n  Requires: 00-base.html on the page.\n  Image:    images\/02-wake-up-to-nature.jpg\n  ===========================================================================\n-->\n<style>\n    .mrkc-banner {\n        position: relative;\n        min-height: 70vh;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        background-image: url('https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2023\/05\/DJI_0177-scaled.jpg');\n        \/* TODO swap to Media URL *\/\n        background-size: cover;\n        background-position: center;\n        background-attachment: fixed;\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-banner::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);\n    }\n\n    .mrkc-banner__content {\n        position: relative;\n        z-index: 1;\n        padding: 80px 24px;\n        max-width: 760px;\n    }\n\n    .mrkc-banner__content h2 {\n        color: #fff;\n        font-size: clamp(28px, 4vw, 48px);\n        margin-bottom: 12px;\n    }\n\n    .mrkc-banner__content .mrkc-eyebrow {\n        color: rgba(255, 255, 255, .85);\n    }\n\n    .mrkc-banner__content p {\n        color: rgba(255, 255, 255, .9);\n        margin: 0 auto;\n        max-width: 580px;\n    }\n<\/style>\n\n<section class=\"mrkc-banner\">\n    <div class=\"mrkc-banner__content\">\n        <p class=\"mrkc-eyebrow\">Kanchanaburi's Finest Riverside Retreat<\/p>\n        <h2>Wake Up to Nature<\/h2>\n        <p>A peaceful riverside setting by the River Kwai, surrounded by the natural beauty of Kanchanaburi.<\/p>\n    <\/div>\n<\/section>\n\n\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 05 OFFERS  (3 cards on a soft background)\n  Requires: 00-base.html on the page.\n  Image:    images\/03-offers.jpg as background\n  ===========================================================================\n-->\n<style>\n    .mrkc-offers {\n        background: url('..\/images\/03-offers.jpg') center\/cover no-repeat;\n        \/* TODO swap to Media URL *\/\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-offers__inner {\n        background: rgba(255, 255, 255, .92);\n        padding: 90px 0;\n    }\n\n    .mrkc-offers__header {\n        text-align: center;\n        margin-bottom: 50px;\n        padding: 0 24px;\n    }\n\n    .mrkc-offers__grid {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 28px;\n        padding: 0 24px;\n        max-width: var(--mrkc-max);\n        margin: 0 auto;\n    }\n\n    @media (min-width: 768px) {\n        .mrkc-offers__grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    .mrkc-offer {\n        text-align: left;\n    }\n\n    .mrkc-offer__img {\n        aspect-ratio: 4 \/ 3;\n        overflow: hidden;\n        background: var(--mrkc-bg-ash);\n    }\n\n    .mrkc-offer__img img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform .8s ease;\n    }\n\n    .mrkc-offer:hover .mrkc-offer__img img {\n        transform: scale(1.05);\n    }\n\n    .mrkc-offer__body {\n        padding: 22px 4px 8px;\n    }\n\n    .mrkc-offer__cat {\n        display: inline-block;\n        font-size: 11px;\n        letter-spacing: .15em;\n        text-transform: uppercase;\n        color: var(--mrkc-gold);\n        margin-bottom: 8px;\n    }\n\n    .mrkc-offer__body h3 {\n        font-size: 22px;\n        margin-bottom: 10px;\n    }\n\n    .mrkc-offer__body p {\n        color: var(--mrkc-muted);\n        font-size: 15px;\n        margin: 0 0 14px;\n    }\n\n    .mrkc-offer__price {\n        font-family: var(--mrkc-sans);\n        font-size: 13px;\n        letter-spacing: .12em;\n        color: var(--mrkc-ink);\n        margin-bottom: 14px;\n        font-weight: 500;\n    }\n\n    .mrkc-offers__cta {\n        text-align: center;\n        margin-top: 50px;\n        padding: 0 24px;\n    }\n<\/style>\n\n<section class=\"mrkc-offers\" id=\"offers\">\n    <div class=\"mrkc-offers__inner\">\n        <div class=\"mrkc-offers__header\">\n            <p class=\"mrkc-eyebrow\">Special Deals<\/p>\n            <h2 class=\"mrkc-title\">Offers<\/h2>\n            <p class=\"mrkc-lead\">The best resort deals for a memorable stay in Kanchanaburi.<\/p>\n        <\/div>\n\n        <div id=\"mrkc-dynamic-offers\" class=\"mrkc-offers__grid\">\n            <p style=\"text-align:center; padding:40px; color:var(--mrkc-muted);\">Loading offers...<\/p>\n        <\/div>\n\n        <div class=\"mrkc-offers__cta\"><a href=\"offer.html\" class=\"mrkc-btn mrkc-btn--gold\">All Offers<\/a><\/div>\n    <\/div>\n<\/section>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        \/\/ TODO: Change this URL to the exact WP REST API endpoint for Offers (e.g., custom post type 'offers' or specific category)\n        const WP_API_URL = \"https:\/\/www.midaresortkanchanaburi.com\/wp-json\/wp\/v2\/posts?per_page=2&_embed\";\n        const offersContainer = document.getElementById('mrkc-dynamic-offers');\n\n        fetch(WP_API_URL)\n            .then(response => response.json())\n            .then(posts => {\n                if (posts && posts.length > 0) {\n                    offersContainer.innerHTML = \"\"; \/\/ Clear loading text\n                    posts.forEach(post => {\n                        \/\/ Extract data\n                        const title = post.title ? post.title.rendered : \"Special Offer\";\n                        const link = post.link || \"#\";\n                        \n                        \/\/ Clean HTML from excerpt for display\n                        let excerpt = \"\";\n                        if (post.excerpt && post.excerpt.rendered) {\n                            const tmp = document.createElement(\"DIV\");\n                            tmp.innerHTML = post.excerpt.rendered;\n                            excerpt = tmp.textContent || tmp.innerText || \"\";\n                            if (excerpt.length > 100) excerpt = excerpt.substring(0, 100) + \"...\";\n                        }\n                        \n                        \/\/ Extract featured image\n                        let imgUrl = \"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2026\/03\/Family-Escape-Package-1024x683.jpg\"; \/\/ Fallback image\n                        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0] && post._embedded['wp:featuredmedia'][0].source_url) {\n                            imgUrl = post._embedded['wp:featuredmedia'][0].source_url;\n                        }\n\n                        \/\/ Try to get category\n                        let category = \"Offer\";\n                        if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]) {\n                            category = post._embedded['wp:term'][0][0].name;\n                        }\n\n                        \/\/ Build HTML\n                        const article = document.createElement('article');\n                        article.className = \"mrkc-offer\";\n                        article.innerHTML = `\n                            <div class=\"mrkc-offer__img\">\n                                <a href=\"${link}\" target=\"_blank\" rel=\"noopener\">\n                                    <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${title}\">\n                                <\/a>\n                            <\/div>\n                            <div class=\"mrkc-offer__body\">\n                                <span class=\"mrkc-offer__cat\">${category}<\/span>\n                                <h3>${title}<\/h3>\n                                <p>${excerpt}<\/p>\n                                <a href=\"${link}\" target=\"_blank\" rel=\"noopener\" class=\"mrkc-btn mrkc-btn--link\">Read More \u2192<\/a>\n                            <\/div>\n                        `;\n                        offersContainer.appendChild(article);\n                    });\n                } else {\n                    offersContainer.innerHTML = \"<p style='text-align:center; padding:40px; color:var(--mrkc-muted);'>No offers available at the moment.<\/p>\";\n                }\n            })\n            .catch(error => {\n                console.error(\"Error fetching offers:\", error);\n                offersContainer.innerHTML = \"<p style='text-align:center; padding:40px; color:var(--mrkc-muted);'>Unable to load offers.<\/p>\";\n            });\n    });\n<\/script>\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 06 DINING  (parallax banner + 3 restaurant cards)\n  Requires: 00-base.html on the page.\n  Image:    images\/04-dining.jpg\n  ===========================================================================\n-->\n<style>\n    .mrkc-dining-banner {\n        background-image: url('https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2020\/02\/65563089_2333822106905218_7303496903646248960_o.jpg');\n        \/* TODO swap to Media URL *\/\n        background-size: cover;\n        background-position: center;\n        min-height: 40vh;\n        margin-bottom: -100px;\n        position: relative;\n    }\n\n    .mrkc-dining-banner::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .4) 100%);\n    }\n\n    .mrkc-dining {\n        padding: 140px 0 90px;\n        background: var(--mrkc-bg-ash);\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-dining__header {\n        text-align: center;\n        margin-bottom: 50px;\n        padding: 0 24px;\n    }\n\n    .mrkc-dining__grid {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 28px;\n        padding: 0 24px;\n        max-width: var(--mrkc-max);\n        margin: 0 auto;\n    }\n\n    @media (min-width: 768px) {\n        .mrkc-dining__grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    @media (min-width: 1100px) {\n        .mrkc-dining__grid {\n            grid-template-columns: repeat(3, 1fr);\n        }\n    }\n\n    .mrkc-restaurant {\n        text-align: left;\n    }\n\n    .mrkc-restaurant__img {\n        aspect-ratio: 4 \/ 3;\n        overflow: hidden;\n        background: var(--mrkc-bg-ash);\n    }\n\n    .mrkc-restaurant__img img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform .8s ease;\n    }\n\n    .mrkc-restaurant:hover .mrkc-restaurant__img img {\n        transform: scale(1.05);\n    }\n\n    .mrkc-restaurant__body {\n        padding: 22px 4px 8px;\n    }\n\n    .mrkc-restaurant__body h3 {\n        font-size: 22px;\n        margin-bottom: 10px;\n    }\n\n    .mrkc-restaurant__body p {\n        color: var(--mrkc-muted);\n        font-size: 15px;\n        margin: 0 0 14px;\n    }\n\n    .mrkc-dining__cta {\n        text-align: center;\n        margin-top: 50px;\n        padding: 0 24px;\n    }\n<\/style>\n\n<div class=\"mrkc-dining-banner\"><\/div>\n\n<section class=\"mrkc-dining\" id=\"dining\">\n    <div class=\"mrkc-dining__header\">\n        <p class=\"mrkc-eyebrow\">Dining<\/p>\n        <h2 class=\"mrkc-title\">Flavors by the River<\/h2>\n        <p class=\"mrkc-lead\">Discover a variety of dining experiences, from all-day meals by the river to casual\n            favorites and romantic fine dining beside the River Kwai. Fresh ingredients, scenic views, and warm\n            hospitality make every meal memorable.<\/p>\n    <\/div>\n\n    <div class=\"mrkc-dining__grid\">\n        <article class=\"mrkc-restaurant\">\n            <div class=\"mrkc-restaurant__img\"><img decoding=\"async\"\n                    src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/M-Cafe-Breakfast_08.jpg\"\n                    alt=\"M Caf\u00e9\"><\/div>\n            <div class=\"mrkc-restaurant__body\">\n                <h3>M Caf\u00e9<\/h3>\n                <p>A warm all-day caf\u00e9 for casual meals, freshly brewed coffee, and light bites \u2014 open from morning to\n                    evening.<\/p>\n                <a href=\"dining.html\" class=\"mrkc-btn mrkc-btn--link\">View More \u2192<\/a>\n            <\/div>\n        <\/article>\n\n        <article class=\"mrkc-restaurant\">\n            <div class=\"mrkc-restaurant__img\"><img decoding=\"async\"\n                    src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/The_terace4.jpg\"\n                    alt=\"The Terrace\"><\/div>\n            <div class=\"mrkc-restaurant__body\">\n                <h3>The Terrace<\/h3>\n                <p>An open-air poolside restaurant serving Thai and international favorites, perfect for relaxed lunches\n                    and sunset dinners.<\/p>\n                <a href=\"dining.html\" class=\"mrkc-btn mrkc-btn--link\">View More \u2192<\/a>\n            <\/div>\n        <\/article>\n\n        <article class=\"mrkc-restaurant\">\n            <div class=\"mrkc-restaurant__img\"><img decoding=\"async\"\n                    src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/River-Romance_16.jpg\"\n                    alt=\"River Romance\"><\/div>\n            <div class=\"mrkc-restaurant__body\">\n                <h3>River Romance<\/h3>\n                <p>Our signature fine-dining experience right on the River Kwai. Intimate, candlelit, and unforgettable.\n                <\/p>\n                <a href=\"dining.html\" class=\"mrkc-btn mrkc-btn--link\">View More \u2192<\/a>\n            <\/div>\n        <\/article>\n    <\/div>\n\n    <div class=\"mrkc-dining__cta\"><a href=\"dining.html\" class=\"mrkc-btn mrkc-btn--gold\">All Restaurants<\/a><\/div>\n<\/section>\n\n<!--\n  ===========================================================================\n  MRKC HOME \u2014 07 WELLNESS  (parallax bg + split: photo left \/ white card right)\n  Requires: 00-base.html on the page.\n  Image:    images\/05-wellness.jpg  (parallax bg)\n             images\/05-wellness-spa.jpg  (left photo \u2014 TODO: add spa photo)\n  ===========================================================================\n-->\n<style>\n    .mrkc-wellness {\n        position: relative;\n        min-height: 700px;\n        display: flex;\n        align-items: flex-end;\n        font-family: var(--mrkc-sans);\n        overflow: hidden;\n    }\n\n    .mrkc-wellness__parallax {\n        position: absolute;\n        inset: -20% 0;\n        background: url('https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/Exterior_12.jpg') center\/cover no-repeat;\n        background-attachment: fixed;\n        z-index: 0;\n    }\n\n    @supports (-webkit-overflow-scrolling: touch) {\n        .mrkc-wellness__parallax {\n            background-attachment: scroll;\n        }\n    }\n\n    .mrkc-wellness__inner {\n        position: relative;\n        z-index: 1;\n        display: grid;\n        grid-template-columns: 1fr;\n        width: 70%;\n        margin: 0;\n        padding: 0;\n        gap: 0;\n        align-items: stretch;\n    }\n\n    @media (min-width: 900px) {\n        .mrkc-wellness__inner {\n            grid-template-columns: 1fr 1.2fr;\n            width: 65%;\n        }\n    }\n\n    .mrkc-wellness__photo {\n        min-height: 460px;\n        overflow: hidden;\n    }\n\n    .mrkc-wellness__photo img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n    }\n\n    .mrkc-wellness__card {\n        background: #fff;\n        padding: 60px 48px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n    }\n\n    @media (min-width: 900px) {\n        .mrkc-wellness__card {\n            padding: 80px 60px;\n        }\n    }\n\n    .mrkc-wellness__card h2 {\n        font-size: clamp(26px, 3vw, 38px);\n        text-transform: uppercase;\n        letter-spacing: .08em;\n        margin: 0 0 28px;\n    }\n\n    .mrkc-wellness__card p {\n        color: var(--mrkc-muted);\n        margin: 0 0 8px;\n        max-width: 420px;\n        font-size: 16px;\n        line-height: 1.8;\n    }\n<\/style>\n\n<section class=\"mrkc-wellness\">\n    <div class=\"mrkc-wellness__parallax\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"mrkc-wellness__inner\">\n        <div class=\"mrkc-wellness__photo\">\n            <img decoding=\"async\" src=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-content\/uploads\/sites\/4\/2026\/05\/Gemini_Generated_Image_r1h8w1r1h8w1r1h8.jpeg\"\n                alt=\"Spa and wellness therapy at Mida Resort Kanchanaburi\">\n        <\/div>\n\n        <div class=\"mrkc-wellness__card\">\n            <p class=\"mrkc-eyebrow\">Spa &amp; Wellness<\/p>\n            <h2>Mindful<br>Wellness<\/h2>\n            <p>Discover complete relaxation and restore balance through soothing therapies designed to refresh your body\n                and calm your mind.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<!--\n  ===========================================================================\n  MRKC EXPERIENCES \u2014 02 INTRO  (supporting paragraph below hero headline)\n  Requires: 00-base.html on the page.\n  Note:     Brief copy had typo \"servies\" \u2192 fixed to \"services\".\n  ===========================================================================\n-->\n<style>\n    .mrkc-exp-intro {\n        padding: 90px 24px 50px;\n        text-align: center;\n        background: var(--mrkc-bg);\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-exp-intro__inner {\n        max-width: 820px;\n        margin: 0 auto;\n    }\n\n    .mrkc-exp-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-exp-intro\">\n    <div class=\"mrkc-exp-intro__inner\">\n        <p class=\"lead\">Enjoy a comfortable and convenient stay with a range of services designed to support both\n            business and leisure travelers. From signature riverside activities and organic farm visits to nearby\n            historical landmarks and waterfalls, Kanchanaburi offers a rich blend of nature and culture \u2014 and Mida\n            Resort is your gateway to all of it.<\/p>\n    <\/div>\n<\/section>\n\n<!--\n  ===========================================================================\n  MRKC EXPERIENCES \u2014 03 GRID  (3-column grid, real MRKC facilities data)\n  Requires: 00-base.html on the page.\n  Source:   Real content from mhg.co.th\/midaresortkanchanaburi\/facilities\/\n  ===========================================================================\n-->\n<style>\n    .mrkc-exp-list {\n        background: var(--mrkc-bg);\n        padding: 30px 0 110px;\n        font-family: var(--mrkc-sans);\n    }\n\n    .mrkc-exp-list__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-exp-list__grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    @media (min-width: 1100px) {\n        .mrkc-exp-list__grid {\n            grid-template-columns: repeat(3, 1fr);\n            gap: 70px 40px;\n        }\n    }\n\n    \/* Card *\/\n    .mrkc-exp-card {\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .mrkc-exp-card__image {\n        width: 100%;\n        aspect-ratio: 4\/3;\n        object-fit: cover;\n        display: block;\n        margin-bottom: 28px;\n    }\n\n    .mrkc-exp-card__meta {\n        font-size: 11px;\n        letter-spacing: .25em;\n        text-transform: uppercase;\n        color: var(--mrkc-gold);\n        margin: 0 0 10px;\n        font-weight: 500;\n    }\n\n    .mrkc-exp-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 8px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        letter-spacing: .06em;\n        font-weight: 500;\n    }\n\n    .mrkc-exp-card__name-th {\n        font-family: var(--mrkc-sans);\n        font-size: 13px;\n        color: var(--mrkc-muted);\n        margin: 0 0 16px;\n        font-weight: 400;\n    }\n\n    .mrkc-exp-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    \/* Info row (hours \/ location \/ price) *\/\n    .mrkc-exp-card__info {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n        padding: 18px 0;\n        border-top: 1px solid var(--mrkc-line);\n        border-bottom: 1px solid var(--mrkc-line);\n        margin: 0 auto 22px;\n        width: 90%;\n        max-width: 320px;\n        flex: 1;\n    }\n\n    .mrkc-exp-card__info-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 13px;\n        color: var(--mrkc-ink);\n        line-height: 1.5;\n    }\n\n    .mrkc-exp-card__info-item svg {\n        width: 14px;\n        height: 14px;\n        fill: none;\n        stroke: var(--mrkc-brand);\n        stroke-width: 1.6;\n        flex-shrink: 0;\n    }\n\n    .mrkc-exp-card__price-list {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        margin-top: 4px;\n        font-size: 12px;\n        color: var(--mrkc-muted);\n    }\n\n    .mrkc-exp-card__price-list span {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n    }\n\n    .mrkc-exp-card__price-list span::before {\n        content: '';\n        width: 4px;\n        height: 4px;\n        background: var(--mrkc-brand);\n        border-radius: 50%;\n        flex-shrink: 0;\n        opacity: .6;\n    }\n\n    .mrkc-exp-card__cta {\n        margin-top: auto;\n    }\n\n    .mrkc-exp-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-exp-card__cta a:hover {\n        color: var(--mrkc-brand-dark);\n        border-color: var(--mrkc-brand-dark);\n    }\n<\/style>\n\n<section class=\"mrkc-exp-list\">\n    <div class=\"mrkc-exp-list__grid\">\n\n        <!-- 1. Swimming Pool \u2013 M Building -->\n        <article class=\"mrkc-exp-card\">\n            <img decoding=\"async\" class=\"mrkc-exp-card__image\"\n                src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2023\/06\/47E7CF76-4540-44E3-A89C-2F56447A410A-scaled.jpeg\"\n                alt=\"Swimming Pool \u2014 M Building\">\n            <p class=\"mrkc-exp-card__meta\">Swimming Pool<\/p>\n            <h3 class=\"mrkc-exp-card__name\">Swimming Pool \u2014 M Building<\/h3>\n            <p class=\"mrkc-exp-card__name-th\">\u0e2a\u0e23\u0e30\u0e27\u0e48\u0e32\u0e22\u0e19\u0e49\u0e33\u0e15\u0e36\u0e01 M<\/p>\n            <p class=\"mrkc-exp-card__desc\">Located next to M Caf\u00e9 with mountain and nature views \u2014 enjoy a refreshing\n                swim while taking in the scenery.<\/p>\n            <div class=\"mrkc-exp-card__info\">\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <polyline points=\"12 6 12 12 16 14\" \/>\n                    <\/svg>\n                    07:00 \u2013 20:00\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\n                    <\/svg>\n                    Near M Caf\u00e9\n                <\/span>\n            <\/div>\n            <div class=\"mrkc-exp-card__cta\">\n                <a href=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/facilities\/\" target=\"_blank\" rel=\"noopener\"\n                    title=\"Swimming Pool M Building\">View More<\/a>\n            <\/div>\n        <\/article>\n\n        <!-- 2. Swimming Pool \u2013 A Building -->\n        <article class=\"mrkc-exp-card\">\n            <img decoding=\"async\" class=\"mrkc-exp-card__image\"\n                src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2023\/06\/29E6CB27-DF7E-41DB-A166-01774312801C-scaled.jpeg\"\n                alt=\"Swimming Pool \u2014 A Building\">\n            <p class=\"mrkc-exp-card__meta\">Swimming Pool<\/p>\n            <h3 class=\"mrkc-exp-card__name\">Swimming Pool \u2014 A Building<\/h3>\n            <p class=\"mrkc-exp-card__name-th\">\u0e2a\u0e23\u0e30\u0e27\u0e48\u0e32\u0e22\u0e19\u0e49\u0e33\u0e15\u0e36\u0e01 A<\/p>\n            <p class=\"mrkc-exp-card__desc\">Pool in the Superior zone, complete with a water slide \u2014 fun for both\n                children and adults.<\/p>\n            <div class=\"mrkc-exp-card__info\">\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <polyline points=\"12 6 12 12 16 14\" \/>\n                    <\/svg>\n                    07:00 \u2013 20:00\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\n                    <\/svg>\n                    Near Lobby\n                <\/span>\n            <\/div>\n            <div class=\"mrkc-exp-card__cta\">\n                <a href=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/facilities\/\" target=\"_blank\" rel=\"noopener\"\n                    title=\"Swimming Pool A Building\">View More<\/a>\n            <\/div>\n        <\/article>\n\n        <!-- 3. Bamboo Rafting -->\n        <article class=\"mrkc-exp-card\">\n            <img decoding=\"async\" class=\"mrkc-exp-card__image\"\n                src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/DJI_0906-1024x683-1.jpeg\"\n                alt=\"Bamboo Rafting\">\n            <p class=\"mrkc-exp-card__meta\">Activity<\/p>\n            <h3 class=\"mrkc-exp-card__name\">Bamboo Rafting<\/h3>\n            <p class=\"mrkc-exp-card__name-th\">\u0e25\u0e48\u0e2d\u0e07\u0e41\u0e1e\u0e40\u0e1b\u0e35\u0e22\u0e01<\/p>\n            <p class=\"mrkc-exp-card__desc\">Float down the River Kwai Yai on a traditional bamboo raft and feel the\n                refreshing cool of the river. <em>(Availability depends on weather and water level.)<\/em><\/p>\n            <div class=\"mrkc-exp-card__info\">\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <polyline points=\"12 6 12 12 16 14\" \/>\n                    <\/svg>\n                    10:00 \u2013 17:00\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\n                    <\/svg>\n                    5 km route\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\" \/>\n                        <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\" \/>\n                    <\/svg>\n                    THB 350 \/ person\n                <\/span>\n            <\/div>\n            <div class=\"mrkc-exp-card__cta\">\n                <a href=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/facilities\/\" target=\"_blank\" rel=\"noopener\"\n                    title=\"Bamboo Rafting\">View More<\/a>\n            <\/div>\n        <\/article>\n\n        <!-- 4. Thai & Foot Massage -->\n        <article class=\"mrkc-exp-card\">\n            <img decoding=\"async\" class=\"mrkc-exp-card__image\"\n                src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/Massage-Room_01.jpg\"\n                alt=\"Thai & Foot Massage\">\n            <p class=\"mrkc-exp-card__meta\">Wellness<\/p>\n            <h3 class=\"mrkc-exp-card__name\">Thai &amp; Foot Massage<\/h3>\n            <p class=\"mrkc-exp-card__name-th\">\u0e19\u0e27\u0e14\u0e44\u0e17\u0e22 - \u0e19\u0e27\u0e14\u0e40\u0e17\u0e49\u0e32<\/p>\n            <p class=\"mrkc-exp-card__desc\">Relax body and mind with authentic Thai massage from skilled therapists.\n                Refresh your stay with a touch of well-being.<\/p>\n            <div class=\"mrkc-exp-card__info\">\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <polyline points=\"12 6 12 12 16 14\" \/>\n                    <\/svg>\n                    12:00 \u2013 21:00\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\n                    <\/svg>\n                    Opposite Reception\n                <\/span>\n                <div class=\"mrkc-exp-card__price-list\">\n                    <span>Aroma Massage \u2014 THB 800 \/ hr<\/span>\n                    <span>Thai Massage \u2014 THB 500 \/ hr<\/span>\n                    <span>Foot Massage \u2014 THB 500 \/ hr<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"mrkc-exp-card__cta\">\n                <a href=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/facilities\/\" target=\"_blank\" rel=\"noopener\"\n                    title=\"Thai and Foot Massage\">View More<\/a>\n            <\/div>\n        <\/article>\n\n        <!-- 5. Bicycle Rental -->\n        <article class=\"mrkc-exp-card\">\n            <img decoding=\"async\" class=\"mrkc-exp-card__image\"\n                src=\"https:\/\/www.midaresortkanchanaburi.com\/wp-content\/uploads\/2022\/03\/DSC08967-1024x683-1.jpeg\"\n                alt=\"Bicycle Rental\">\n            <p class=\"mrkc-exp-card__meta\">Activity<\/p>\n            <h3 class=\"mrkc-exp-card__name\">Bicycle Rental<\/h3>\n            <p class=\"mrkc-exp-card__name-th\">\u0e08\u0e31\u0e01\u0e23\u0e22\u0e32\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e0a\u0e48\u0e32<\/p>\n            <p class=\"mrkc-exp-card__desc\">Cycle through the resort grounds and enjoy fresh air and beautiful scenery\n                along the way. Available daily.<\/p>\n            <div class=\"mrkc-exp-card__info\">\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <polyline points=\"12 6 12 12 16 14\" \/>\n                    <\/svg>\n                    Available Daily\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\n                    <\/svg>\n                    Reception Area\n                <\/span>\n                <span class=\"mrkc-exp-card__info-item\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\" \/>\n                        <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\" \/>\n                    <\/svg>\n                    THB 50 \/ hour \/ person\n                <\/span>\n            <\/div>\n            <div class=\"mrkc-exp-card__cta\">\n                <a href=\"https:\/\/mhg.co.th\/midaresortkanchanaburi\/facilities\/\" target=\"_blank\" rel=\"noopener\"\n                    title=\"Bicycle Rental\">View More<\/a>\n            <\/div>\n        <\/article>\n\n    <\/div>\n<\/section>\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 Mida Resort Kanchanaburi A Riverside Sanctuary on the River Kwai Discover true serenity at Mida Resort Kanchanaburi, a Thai-contemporary hotel &amp; resort in Kanchanaburi with beautiful views of the River Kwai Yai. Set in a peaceful riverside location, the resort combines comfort, nature, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/12","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":219,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":8800,"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/pages\/12\/revisions\/8800"}],"wp:attachment":[{"href":"https:\/\/mhg.co.th\/midaresortkanchanaburi\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}