{"id":159,"date":"2022-01-27T13:07:29","date_gmt":"2022-01-27T13:07:29","guid":{"rendered":"https:\/\/mhg.co.th\/aceofhuahinresort\/?page_id=159"},"modified":"2026-09-03T15:33:39","modified_gmt":"2026-09-03T15:33:39","slug":"promotion","status":"publish","type":"page","link":"https:\/\/mhg.co.th\/aceofhuahinresort\/promotion\/","title":{"rendered":"PROMOTION"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"159\" class=\"elementor elementor-159\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76421e4 e-con-full e-flex e-con e-parent\" data-id=\"76421e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7528948 elementor-widget elementor-widget-html\" data-id=\"7528948\" 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<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');\n\n  [class^=\"mrkc-\"],\n  [class*=\" mrkc-\"],\n  [class^=\"aohh-\"],\n  [class*=\" aohh-\"],\n  [class^=\"mrkc-\"] *,\n  [class*=\" mrkc-\"] *,\n  [class^=\"aohh-\"] *,\n  [class*=\" aohh-\"] * {\n    font-family: 'Noto Sans Thai', sans-serif !important;\n  }\n<\/style>\n<div class=\"page-content\">\n  <div class=\"elementor\">\n\n    <!--\n  ===========================================================================\n  AOHH OFFERS \u2014 01 HERO  (inner-page banner + booking date picker overlay)\n  Requires: 00-base.html on the page.\n  Image:    full-bleed beachfront banner\n  ===========================================================================\n-->\n    <style>\n      .aohh-offers-hero {\n        position: relative;\n        height: 720px;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        font-family: var(--aohh-sans);\n      }\n\n      .aohh-offers-hero::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-image: url('https:\/\/mhg.co.th\/aceofhuahinresort\/wp-content\/uploads\/2026\/10\/mhg-20261001-img0132.jpg');\n        background-size: cover;\n        background-position: center;\n        z-index: 0;\n      }\n\n      .aohh-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\n      \/* Booking widget (date picker) \u2014 same pattern as Home hero *\/\n      .aohh-offers-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      .aohh-offers-booking label {\n        display: block;\n        font-size: 10px;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        color: var(--aohh-muted);\n        margin-bottom: 6px;\n        font-weight: 400;\n      }\n\n      .aohh-offers-booking input {\n        width: 100%;\n        border: none;\n        background: transparent;\n        font-family: var(--aohh-sans);\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 (not sinking into the white form) *\/\n      .aohh-offers-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 (NOT the datetime-edit-* pseudos) *\/\n      .aohh-offers-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      .aohh-offers-booking input::-webkit-datetime-edit,\n      .aohh-offers-booking input::-webkit-datetime-edit-fields-wrapper,\n      .aohh-offers-booking input::-webkit-datetime-edit-text,\n      .aohh-offers-booking input::-webkit-datetime-edit-month-field,\n      .aohh-offers-booking input::-webkit-datetime-edit-day-field,\n      .aohh-offers-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      .aohh-offers-booking__field {\n        border-right: 1px solid var(--aohh-line);\n        padding-right: 18px;\n        min-width: 0;\n      }\n\n      .aohh-offers-booking__field:last-of-type {\n        border-right: none;\n      }\n\n      \/* Guests +\/- stepper (replaces the dropdown) *\/\n      .aohh-offers-stepper {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n      }\n\n      .aohh-offers-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(--aohh-primary) !important;\n        background: transparent !important;\n        color: var(--aohh-primary) !important;\n        -webkit-text-fill-color: var(--aohh-primary) !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      .aohh-offers-stepper__btn:hover {\n        background: var(--aohh-primary) !important;\n        color: #fff !important;\n        -webkit-text-fill-color: #fff !important;\n        opacity: 1;\n      }\n\n      .aohh-offers-stepper__btn:disabled {\n        opacity: .3;\n        cursor: not-allowed;\n      }\n\n      .aohh-offers-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 brighter & lifted (no longer \"sunken\") *\/\n      .aohh-offers-booking .aohh-btn {\n        white-space: nowrap;\n        padding: 15px 30px;\n      }\n\n      .aohh-offers-booking .aohh-btn--solid {\n        background: linear-gradient(180deg, #2a8fd0 0%, #1d77b5 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(29, 119, 181, .35);\n        transition: background .25s ease, box-shadow .25s ease, transform .12s ease;\n      }\n\n      .aohh-offers-booking .aohh-btn--solid:hover {\n        background: linear-gradient(180deg, #1d77b5 0%, #155e91 100%) !important;\n        box-shadow: 0 10px 24px rgba(29, 119, 181, .45);\n        transform: translateY(-1px);\n        opacity: 1;\n      }\n\n      \/* ---- Responsive ---- *\/\n      @media (max-width: 900px) {\n        .aohh-offers-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        .aohh-offers-booking__field {\n          border-right: none;\n          padding-right: 0;\n        }\n\n        .aohh-offers-booking__field--guests {\n          grid-column: 1 \/ -1;\n        }\n\n        .aohh-offers-booking .aohh-btn {\n          grid-column: 1 \/ -1;\n          width: 100%;\n        }\n      }\n\n      @media (max-width: 520px) {\n        .aohh-offers-booking {\n          grid-template-columns: 1fr;\n          bottom: 20px;\n          padding: 16px 18px;\n          gap: 14px;\n        }\n      }\n    <\/style>\n\n    <section class=\"aohh-offers-hero\">\n      <form action=\"https:\/\/reservation.travelanium.net\/propertyibe2\/\" target=\"_blank\" class=\"aohh-offers-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        <input type=\"hidden\" name=\"numofchild\" value=\"0\" \/>\n\n        <div class=\"aohh-offers-booking__field\">\n          <label for=\"aohhOffersCheckin\">Check-in<\/label>\n          <input type=\"date\" id=\"aohhOffersCheckin\" name=\"checkin\" required=\"\">\n        <\/div>\n        <div class=\"aohh-offers-booking__field\">\n          <label for=\"aohhOffersCheckout\">Check-out<\/label>\n          <input type=\"date\" id=\"aohhOffersCheckout\" name=\"checkout\" required=\"\">\n        <\/div>\n        <div class=\"aohh-offers-booking__field aohh-offers-booking__field--rooms\">\n          <label for=\"aohhOffersRooms\">Rooms<\/label>\n          <div class=\"aohh-offers-stepper\" data-min=\"1\" data-max=\"5\" data-for=\"aohhOffersRooms\">\n            <button type=\"button\" class=\"aohh-offers-stepper__btn\" data-step=\"-1\"\n              aria-label=\"Decrease rooms\">&minus;<\/button>\n            <span class=\"aohh-offers-stepper__val\" id=\"aohhOffersRoomsVal\">1<\/span>\n            <button type=\"button\" class=\"aohh-offers-stepper__btn\" data-step=\"1\" aria-label=\"Increase rooms\">+<\/button>\n            <input type=\"hidden\" id=\"aohhOffersRooms\" name=\"numofroom\" value=\"1\">\n          <\/div>\n        <\/div>\n        <div class=\"aohh-offers-booking__field aohh-offers-booking__field--guests\">\n          <label for=\"aohhOffersGuests\">Guests<\/label>\n          <div class=\"aohh-offers-stepper\" data-min=\"1\" data-max=\"12\" data-for=\"aohhOffersGuests\">\n            <button type=\"button\" class=\"aohh-offers-stepper__btn\" data-step=\"-1\"\n              aria-label=\"Decrease guests\">&minus;<\/button>\n            <span class=\"aohh-offers-stepper__val\" id=\"aohhOffersGuestsVal\">2<\/span>\n            <button type=\"button\" class=\"aohh-offers-stepper__btn\" data-step=\"1\" aria-label=\"Increase guests\">+<\/button>\n            <input type=\"hidden\" id=\"aohhOffersGuests\" name=\"numofadult\" value=\"2\">\n          <\/div>\n        <\/div>\n        <button type=\"submit\" class=\"aohh-btn aohh-btn--solid\">Book Now<\/button>\n      <\/form>\n    <\/section>\n\n    <script>\n      (function () {\n        var steppers = document.querySelectorAll('.aohh-offers-booking .aohh-offers-stepper');\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('.aohh-offers-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 = parseInt(input.value, 10) + parseInt(btn.getAttribute('data-step'), 10);\n              v = Math.max(min, Math.min(max, v));\n              input.value = v;\n              render();\n            });\n          });\n          render();\n        });\n      })();\n    <\/script>\n\n    <!--\n  ===========================================================================\n  AOHH OFFERS \u2014 02 FILTER + GRID\n  Layout: filter tabs \u2192 3-column card grid (stacked vertically, no carousel)\n  Categories: All | Room Offers | Dining Offers\n  ===========================================================================\n-->\n    <style>\n      .aohh-offers {\n        padding: 80px 24px 100px;\n        background: var(--aohh-bg);\n        font-family: var(--aohh-sans);\n      }\n\n      .aohh-offers__inner {\n        max-width: var(--aohh-max, 1280px);\n        margin: 0 auto;\n      }\n\n      .aohh-offers__head {\n        text-align: center;\n        margin-bottom: 48px;\n      }\n\n      .aohh-offers__head .aohh-eyebrow {\n        margin-bottom: 12px;\n      }\n\n      .aohh-offers__head h2 {\n        font-family: var(--aohh-serif);\n        font-size: clamp(26px, 3vw, 32px);\n        font-weight: 400;\n        color: var(--aohh-ink);\n        margin: 0 0 16px;\n        text-transform: uppercase;\n        letter-spacing: .04em;\n      }\n\n      \/* Filter tabs *\/\n      .aohh-offers__filters {\n        display: flex;\n        gap: 8px;\n        justify-content: center;\n        flex-wrap: wrap;\n        margin-bottom: 56px;\n      }\n\n      .aohh-offers__filter-btn {\n        background: none;\n        border: 1px solid currentColor;\n        padding: 10px 24px;\n        font-family: var(--aohh-sans);\n        font-size: 12px;\n        letter-spacing: .2em;\n        text-transform: uppercase;\n        color: inherit;\n        opacity: .4;\n        cursor: pointer;\n        border-radius: 0;\n        transition: opacity .25s ease;\n      }\n\n      .aohh-offers__filter-btn:hover {\n        opacity: .75;\n      }\n\n      .aohh-offers__filter-btn.is-active {\n        opacity: 1;\n      }\n\n      \/* Offer grid *\/\n      .aohh-offers__grid {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 36px;\n      }\n\n      @media (min-width: 640px) {\n        .aohh-offers__grid {\n          grid-template-columns: repeat(2, 1fr);\n        }\n      }\n\n      @media (min-width: 1024px) {\n        .aohh-offers__grid {\n          grid-template-columns: repeat(3, 1fr);\n        }\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\n      .aohh-offer-card:hover {\n        box-shadow: 0 12px 36px rgba(0, 0, 0, .10);\n        transform: translateY(-3px);\n      }\n\n      .aohh-offer-card[hidden] {\n        display: none;\n      }\n\n      .aohh-offer-card__img-wrap {\n        position: relative;\n        overflow: hidden;\n        aspect-ratio: 4 \/ 3;\n      }\n\n      .aohh-offer-card__img-wrap img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform .55s ease;\n      }\n\n      .aohh-offer-card:hover .aohh-offer-card__img-wrap img {\n        transform: scale(1.04);\n      }\n\n      .aohh-offer-card__badge {\n        position: absolute;\n        top: 16px;\n        left: 16px;\n        background: var(--aohh-brand, #1d77b5);\n        color: #fff;\n        font-size: 9px;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        padding: 5px 12px;\n        border-radius: 2px;\n      }\n\n      .aohh-offer-card__body {\n        padding: 28px 28px 24px;\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .aohh-offer-card__title {\n        font-family: var(--aohh-serif);\n        font-size: 20px;\n        font-weight: 400;\n        color: var(--aohh-ink);\n        margin: 0 0 12px;\n        line-height: 1.35;\n      }\n\n      .aohh-offer-card__desc {\n        font-size: 14px;\n        color: var(--aohh-muted, #777);\n        line-height: 1.75;\n        margin: 0 0 24px;\n        flex: 1;\n      }\n\n      .aohh-offer-card__link {\n        display: inline-block;\n        font-size: 11px;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        color: var(--aohh-brand, #1d77b5);\n        text-decoration: none;\n        border-bottom: 1px solid var(--aohh-brand, #1d77b5);\n        padding-bottom: 2px;\n        align-self: flex-start;\n        transition: opacity .2s ease;\n      }\n\n      .aohh-offer-card__link:hover {\n        opacity: .7;\n      }\n    <\/style>\n\n    <section class=\"aohh-offers\">\n      <div class=\"aohh-offers__inner\">\n\n        <div class=\"aohh-offers__head\">\n          <h2>OFFERS<\/h2>\n        <\/div>\n\n        <!-- Filter tabs -->\n        <div class=\"aohh-offers__filters\" role=\"tablist\">\n          <button class=\"aohh-offers__filter-btn is-active\" data-filter=\"all\" role=\"tab\"\n            aria-selected=\"true\">All<\/button>\n          <button class=\"aohh-offers__filter-btn\" data-filter=\"room\" role=\"tab\" aria-selected=\"false\">Room\n            Offers<\/button>\n          <button class=\"aohh-offers__filter-btn\" data-filter=\"dining\" role=\"tab\" aria-selected=\"false\">Dining\n            Offers<\/button>\n        <\/div>\n\n        <!-- Offer cards grid -->\n        <div class=\"aohh-offers__grid\" id=\"aohhOffersGrid\">\n\n\n          <div id=\"aohhOffersLoader\" style=\"text-align:center; padding: 40px; color: #777; grid-column: 1 \/ -1;\">\n            \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e0a\u0e31\u0e48\u0e19...\n          <\/div>\n        <\/div><!-- \/.aohh-offers__grid -->\n      <\/div><!-- \/.aohh-offers__inner -->\n    <\/section>\n\n    <script>\n      (function () {\n        var CACHE_KEY = 'mhg-offers-20261002-mhg-images-20260922-aceofhuahinresort-aohh_offers_cache';\n        var CACHE_TIME_KEY = 'mhg-offers-20261002-mhg-images-20260922-aceofhuahinresort-aohh_offers_timestamp';\n        var CACHE_DURATION = 3600 * 1000; \/\/ 1 hour in ms\n        var API_URL = 'https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/posts?_embed=true&per_page=100';\n\n        var grid = document.getElementById('aohhOffersGrid');\n        var loader = document.getElementById('aohhOffersLoader');\n        var btns = document.querySelectorAll('.aohh-offers__filter-btn');\n\n        function initFilter() {\n          var cards = document.querySelectorAll('.aohh-offer-card');\n          btns.forEach(function (btn) {\n            btn.addEventListener('click', function () {\n              var filter = this.getAttribute('data-filter');\n\n              btns.forEach(function (b) {\n                b.classList.remove('is-active');\n                b.setAttribute('aria-selected', 'false');\n              });\n              this.classList.add('is-active');\n              this.setAttribute('aria-selected', 'true');\n\n              cards.forEach(function (card) {\n                if (filter === 'all' || card.getAttribute('data-category') === filter) {\n                  card.removeAttribute('hidden');\n                } else {\n                  card.setAttribute('hidden', '');\n                }\n              });\n            });\n          });\n        }\n\n        function mhgUniqueOffers20261002(posts) {\n var translations = {\"2711\":[\"1556\",\"en\"],\"2717\":[\"1556\",\"th\"],\"3436\":[\"1557\",\"zh\"],\"3437\":[\"1556\",\"zh\"],\"3438\":[\"1555\",\"zh\"],\"6093\":[\"1724\",\"en\"],\"6754\":[\"1724\",\"th\"],\"6828\":[\"1784\",\"zh\"],\"7205\":[\"1823\",\"zh\"],\"7375\":[\"1834\",\"en\"],\"7395\":[\"1835\",\"en\"],\"7409\":[\"1837\",\"en\"],\"7420\":[\"1839\",\"en\"],\"7421\":[\"1840\",\"en\"],\"7494\":[\"1840\",\"th\"],\"7498\":[\"1839\",\"th\"],\"7515\":[\"1837\",\"th\"],\"7516\":[\"1835\",\"th\"],\"7665\":[\"1850\",\"th\"],\"7682\":[\"1854\",\"th\"],\"7688\":[\"1854\",\"en\"],\"7692\":[\"1850\",\"en\"],\"7849\":[\"1871\",\"en\"],\"7872\":[\"1871\",\"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 renderOffers(posts) {\n posts = mhgUniqueOffers20261002(posts);\n\n          if (loader) loader.style.display = 'none';\n\n          var html = '';\n          posts.forEach(function (post) {\n            \/\/ Categories: 21 (Rooms), 22 (Culinary)\n            var isRoom = (post.categories || []).some(function(c){return [55, 51, 54, 26, 21, 32, 49, 50, 19].indexOf(c)!==-1;});\n            var isDining = (post.categories || []).some(function(c){return [22, 33, 25].indexOf(c)!==-1;});\n\n            \/\/ Only render room and dining offers\n            if (!isRoom && !isDining) return;\n\n            var categoryFilter = isRoom ? 'room' : 'dining';\n            var badgeText = isRoom ? 'Room Offer' : 'Dining Offer';\n\n            var title = post.title && post.title.rendered ? post.title.rendered : '';\n            var link = post.link || '#';\n\n            \/\/ Strip html from excerpt\n            var excerpt = '';\n            if (post.excerpt && post.excerpt.rendered) {\n              var tmp = document.createElement('div');\n              tmp.innerHTML = post.excerpt.rendered;\n              excerpt = tmp.textContent || tmp.innerText || '';\n            }\n\n            \/\/ Feature Image\n            var imgSrc = '';\n            if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n              imgSrc = post._embedded['wp:featuredmedia'][0].source_url;\n            } else {\n              \/\/ Use the published offer image when REST omits the media embed.\n              var offerDoc = new DOMParser().parseFromString(post.content && post.content.rendered || '', 'text\/html');\n              var offerImage = offerDoc.querySelector('img[src*=\"\/wp-content\/uploads\/\"]');\n              \/\/ Placeholder fallback\n              imgSrc = offerImage ? offerImage.getAttribute('src') : 'https:\/\/mhg.co.th\/aceofhuahinresort\/wp-content\/uploads\/2023\/08\/AceofHuaHinResort_atmosphere-03.webp';\n            }\n\n            html += `\n      <article class=\"aohh-offer-card\" data-category=\"${categoryFilter}\">\n        <div class=\"aohh-offer-card__img-wrap\">\n          <img decoding=\"async\" src=\"${imgSrc}\" alt=\"${title}\" loading=\"lazy\">\n          <span class=\"aohh-offer-card__badge\">${badgeText}<\/span>\n        <\/div>\n        <div class=\"aohh-offer-card__body\">\n          <h3 class=\"aohh-offer-card__title\">${title}<\/h3>\n          <p class=\"aohh-offer-card__desc\">${excerpt}<\/p>\n          <a class=\"aohh-offer-card__link\" href=\"${link}\" target=\"_self\">View Offer<\/a>\n        <\/div>\n      <\/article>\n        `;\n          });\n\n          if (html === '') {\n            html = '<div style=\"grid-column: 1 \/ -1; text-align:center; padding:40px; color:#777;\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e0a\u0e31\u0e48\u0e19\u0e43\u0e19\u0e02\u0e13\u0e30\u0e19\u0e35\u0e49<\/div>';\n          }\n          grid.innerHTML = html;\n          initFilter();\n        }\n\n        function fetchOffers() {\n          var cached = localStorage.getItem(CACHE_KEY);\n          var timestamp = localStorage.getItem(CACHE_TIME_KEY);\n          var now = new Date().getTime();\n\n          if (cached && timestamp && (now - timestamp < CACHE_DURATION)) {\n            try {\n              var posts = JSON.parse(cached);\n              renderOffers(posts);\n              return;\n            } catch (e) {\n              console.error('Error parsing cache', e);\n            }\n          }\n\n          fetch(API_URL)\n            .then(function (response) {\n              if (!response.ok) throw new Error('Network response was not ok');\n              return response.json();\n            })\n            .then(function (posts) {\n              localStorage.setItem(CACHE_KEY, JSON.stringify(posts));\n              localStorage.setItem(CACHE_TIME_KEY, now);\n              renderOffers(posts);\n            })\n            .catch(function (error) {\n              console.error('Error fetching offers:', error);\n              if (loader) loader.innerHTML = '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e0a\u0e31\u0e48\u0e19\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07';\n            });\n        }\n\n        fetchOffers();\n\n      }());\n    <\/script>\n\n    <!--\n  ===========================================================================\n  AOHH OFFERS \u2014 03 CTA BANNER  (reservation call-to-action)\n  ===========================================================================\n-->\n    <style>\n      .aohh-offers-cta {\n        padding: 90px 24px;\n        text-align: center;\n        background: var(--aohh-brand, #1d77b5);\n        color: #fff;\n        font-family: var(--aohh-sans);\n      }\n\n      .aohh-offers-cta__eyebrow {\n        font-size: 11px;\n        letter-spacing: .32em;\n        text-transform: uppercase;\n        opacity: .75;\n        margin: 0 0 18px;\n      }\n\n      .aohh-offers-cta h2 {\n        font-family: var(--aohh-serif);\n        font-size: clamp(24px, 3vw, 32px);\n        font-weight: 400;\n        color: #fff;\n        margin: 0 0 32px;\n        line-height: 1.3;\n      }\n    <\/style>\n\n    <div class=\"aohh-reserve\"><span class=\"overline\">Begin Your Stay<\/span><h2>Ace of Hua Hin Resort<\/h2><a class=\"aohh-cta\" href=\"https:\/\/reservation.travelanium.net\/propertyibe2\/?propertyId=603&amp;onlineId=4&amp;accesscode=member\" target=\"_blank\" rel=\"noopener\" data-mhg-no-i18n translate=\"no\">Book Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/a><\/div>\n\n    <!--\n      ===========================================================================\n      AOHH HOME \u2014 00 BASE \/ SHARED STYLES  (shared by every AOHH page)\n      ===========================================================================\n    -->\n    <style>\n      :root {\n        --aohh-primary: #1d77b5;\n        --aohh-secondary: #565a5a;\n        --aohh-accent: #9a9b9f;\n        --aohh-brand: #1d77b5;\n        --aohh-brand-dark: #155e91;\n        --aohh-gold: #9a9b9f;\n        --aohh-ink: inherit;\n        --aohh-muted: #565a5a;\n        --aohh-bg: transparent;\n        --aohh-bg-ash: #f6f6f6;\n        --aohh-line: rgba(3, 3, 3, .12);\n        --aohh-max: 1600px;\n        --aohh-serif: inherit;\n        --aohh-sans: inherit;\n      }\n\n      \/* Scope reset to .aohh-* containers so we don't break Elementor's own CSS *\/\n      [class^=\"aohh-\"],\n      [class*=\" aohh-\"] {\n        box-sizing: border-box;\n      }\n\n      [class^=\"aohh-\"] img,\n      [class*=\" aohh-\"] img {\n        max-width: 100%;\n        display: block;\n      }\n\n      [class^=\"aohh-\"] a,\n      [class*=\" aohh-\"] a {\n        color: inherit;\n        text-decoration: none;\n      }\n\n      [class^=\"aohh-\"] h1,\n      [class^=\"aohh-\"] h2,\n      [class^=\"aohh-\"] h3,\n      [class*=\" aohh-\"] h1,\n      [class*=\" aohh-\"] h2,\n      [class*=\" aohh-\"] h3 {\n        font-family: var(--aohh-serif);\n        font-weight: 300;\n        line-height: 1.2;\n        margin: 0 0 .5em;\n        letter-spacing: .01em;\n      }\n\n      [class^=\"aohh-\"] p,\n      [class*=\" aohh-\"] p {\n        line-height: 1.7;\n      }\n\n      \/* Shared eyebrow \/ lead \/ title *\/\n      .aohh-eyebrow {\n        font-family: var(--aohh-sans);\n        font-size: 12px;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        color: var(--aohh-gold);\n        margin: 0 0 14px;\n        font-weight: 400;\n      }\n\n      .aohh-title {\n        font-family: var(--aohh-serif);\n        font-size: clamp(28px, 4vw, 44px);\n        margin: 0 0 16px;\n        line-height: 1.2;\n      }\n\n      .aohh-lead {\n        max-width: 760px;\n        margin: 0 auto 24px;\n        font-size: 17px;\n        color: var(--aohh-muted);\n        font-family: var(--aohh-sans);\n      }\n\n      .aohh-center {\n        text-align: center;\n      }\n\n      \/* Shared buttons \u2014 sharp, 1px currentColor, soft opacity hover *\/\n      .aohh-btn {\n        display: inline-block;\n        padding: 14px 34px;\n        font-family: var(--aohh-sans);\n        font-size: 13px;\n        font-weight: 400;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        border: 1px solid currentColor;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n        transition: opacity .35s ease;\n        text-decoration: none;\n      }\n\n      .aohh-btn:hover {\n        opacity: .7;\n      }\n\n      .aohh-btn--gold {\n        color: var(--aohh-accent);\n        border-color: var(--aohh-accent);\n      }\n\n      .aohh-btn--gold:hover {\n        opacity: .7;\n      }\n\n      .aohh-btn--solid {\n        background: var(--aohh-primary);\n        color: #fff !important;\n        border-color: var(--aohh-primary);\n      }\n\n      .aohh-btn--solid:hover {\n        opacity: .85;\n      }\n\n      .aohh-btn--link {\n        border: none;\n        padding: 6px 0;\n        border-bottom: 1px solid currentColor;\n        color: inherit;\n        opacity: .75;\n        letter-spacing: .22em;\n        font-family: var(--aohh-sans);\n        font-size: 12px;\n        text-transform: uppercase;\n        font-weight: 400;\n      }\n\n      .aohh-btn--link:hover {\n        opacity: .45;\n        background: none;\n      }\n\n      \/* ===== FULL WIDTH =====\n         Make every section stretch edge-to-edge across the viewport, even when this\n         block is pasted into a boxed Elementor HTML widget \/ column.\n         (Cleanest alternative: set the Elementor Section\/Container to Full Width with 0 padding.) *\/\n      .aohh-offers-hero,\n      .aohh-offers,\n      .aohh-offers-cta {\n        width: 100vw;\n        max-width: 100vw;\n        margin-left: calc(50% - 50vw);\n        margin-right: calc(50% - 50vw);\n      }\n\n      \/* Guard against a horizontal scrollbar caused by 100vw *\/\n      html,\n      body {\n        overflow-x: hidden;\n      }\n    <\/style>\n\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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 OFFERS All Room Offers Dining Offers \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e0a\u0e31\u0e48\u0e19&#8230; Reservations Ace of Hua Hin Resort Booking<\/p>\n","protected":false},"author":1,"featured_media":6694,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-159","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/pages\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":406,"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/pages\/159\/revisions"}],"predecessor-version":[{"id":8726,"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/pages\/159\/revisions\/8726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/media\/6694"}],"wp:attachment":[{"href":"https:\/\/mhg.co.th\/aceofhuahinresort\/wp-json\/wp\/v2\/media?parent=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}