Gallery | Xen Hotel Nakhon Pathom<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600&family=Noto+Sans+Thai:wght@300;400&display=swap');\n\n :root {\n --xen-blue: #8dc8e8;\n --xen-blue-deep: #69b4da;\n --xen-blue-pale: #f3f9fc;\n --xen-ink: #54585b;\n --xen-muted: #777d80;\n --xen-line: #c6e0ec;\n --xen-white: #ffffff;\n --xen-display: 'Montserrat', Arial, sans-serif;\n --xen-body: 'Noto Sans Thai', Arial, sans-serif;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n margin: 0;\n overflow-x: hidden;\n background: var(--xen-white);\n color: var(--xen-ink);\n font-family: var(--xen-body);\n -webkit-font-smoothing: antialiased;\n }\n\n body.xen-lightbox-open {\n overflow: hidden;\n }\n\n button {\n color: inherit;\n font: inherit;\n }\n\n .xen-gallery {\n width: 100%;\n overflow: hidden;\n background: var(--xen-white);\n }\n\n .xen-gallery__hero {\n width: 100%;\n height: clamp(330px, 39vw, 560px);\n margin: 0;\n overflow: hidden;\n background: #e9f2f6;\n }\n\n .xen-gallery__hero img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center 54%;\n animation: xen-hero-arrive 1.1s ease-out both;\n }\n\n .xen-gallery__intro {\n padding: 76px 24px 43px;\n text-align: center;\n }\n\n .xen-gallery__title {\n margin: 0;\n color: var(--xen-ink);\n font-family: var(--xen-display);\n font-size: clamp(35px, 4.2vw, 48px);\n font-weight: 500;\n letter-spacing: .06em;\n line-height: 1.2;\n }\n\n .xen-gallery__rule {\n width: 74px;\n height: 1px;\n margin: 24px auto 0;\n border: 0;\n background: var(--xen-blue);\n }\n\n .xen-gallery__content {\n padding: 0 24px 112px;\n }\n\n .xen-gallery__filters {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 11px;\n width: min(1080px, 100%);\n margin: 0 auto 48px;\n }\n\n .xen-filter {\n min-height: 42px;\n padding: 10px 21px;\n border: 1px solid var(--xen-line);\n border-radius: 999px;\n background: var(--xen-white);\n color: var(--xen-muted);\n cursor: pointer;\n font-family: var(--xen-display);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: .13em;\n line-height: 1;\n text-transform: uppercase;\n transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;\n }\n\n .xen-filter:hover,\n .xen-filter:focus-visible {\n border-color: var(--xen-blue-deep);\n color: var(--xen-blue-deep);\n outline: none;\n transform: translateY(-2px);\n }\n\n .xen-filter[aria-pressed=\"true\"] {\n border-color: var(--xen-blue-deep);\n background: var(--xen-blue-deep);\n color: var(--xen-white);\n }\n\n .xen-gallery__grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 19px;\n width: min(1248px, 100%);\n margin-inline: auto;\n }\n\n .xen-gallery-card {\n min-width: 0;\n margin: 0;\n animation: xen-card-arrive .55s ease both;\n }\n\n .xen-gallery-card__button {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 3 \/ 2;\n padding: 0;\n overflow: hidden;\n border: 0;\n background: var(--xen-blue-pale);\n cursor: zoom-in;\n }\n\n .xen-gallery-card__button::before {\n position: absolute;\n inset: 0;\n z-index: 1;\n background: rgba(84, 88, 91, .2);\n content: '';\n opacity: 0;\n transition: opacity .35s ease;\n }\n\n .xen-gallery-card__button::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 2;\n width: 46px;\n height: 46px;\n border: 1px solid rgba(255, 255, 255, .88);\n border-radius: 50%;\n background: rgba(255, 255, 255, .92);\n color: var(--xen-blue-deep);\n content: '+';\n font-family: var(--xen-display);\n font-size: 27px;\n font-weight: 400;\n line-height: 43px;\n opacity: 0;\n transform: translate(-50%, -42%);\n transition: opacity .35s ease, transform .35s ease;\n }\n\n .xen-gallery-card__button:hover::before,\n .xen-gallery-card__button:focus-visible::before,\n .xen-gallery-card__button:hover::after,\n .xen-gallery-card__button:focus-visible::after {\n opacity: 1;\n }\n\n .xen-gallery-card__button:hover::after,\n .xen-gallery-card__button:focus-visible::after {\n transform: translate(-50%, -50%);\n }\n\n .xen-gallery-card__button:focus-visible {\n outline: 3px solid var(--xen-blue);\n outline-offset: 3px;\n }\n\n .xen-gallery-card__image {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform .65s ease;\n }\n\n .xen-gallery-card__button:hover .xen-gallery-card__image,\n .xen-gallery-card__button:focus-visible .xen-gallery-card__image {\n transform: scale(1.045);\n }\n\n .xen-gallery__empty {\n display: none;\n margin: 30px 0;\n color: var(--xen-muted);\n font-size: 15px;\n text-align: center;\n }\n\n .xen-lightbox[hidden] {\n display: none;\n }\n\n .xen-lightbox {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: grid;\n place-items: center;\n padding: 50px 88px 34px;\n background: rgba(24, 28, 30, .94);\n }\n\n .xen-lightbox__figure {\n display: grid;\n grid-template-rows: minmax(0, 1fr) auto;\n justify-items: center;\n width: min(1120px, 100%);\n height: min(82vh, 820px);\n margin: 0;\n }\n\n .xen-lightbox__image {\n display: block;\n width: auto;\n max-width: 100%;\n height: auto;\n max-height: 100%;\n align-self: center;\n object-fit: contain;\n box-shadow: 0 18px 60px rgba(0, 0, 0, .28);\n }\n\n .xen-lightbox__caption {\n margin-top: 18px;\n color: rgba(255, 255, 255, .88);\n font-family: var(--xen-display);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: .12em;\n line-height: 1.5;\n text-align: center;\n text-transform: uppercase;\n }\n\n .xen-lightbox__control {\n position: absolute;\n display: grid;\n width: 46px;\n height: 46px;\n place-items: center;\n padding: 0;\n border: 1px solid rgba(255, 255, 255, .42);\n border-radius: 50%;\n background: transparent;\n color: var(--xen-white);\n cursor: pointer;\n transition: background-color .25s ease, border-color .25s ease, transform .25s ease;\n }\n\n .xen-lightbox__control:hover,\n .xen-lightbox__control:focus-visible {\n border-color: var(--xen-white);\n background: rgba(255, 255, 255, .12);\n outline: none;\n }\n\n .xen-lightbox__control svg {\n width: 18px;\n height: 18px;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 1.7;\n }\n\n .xen-lightbox__close {\n top: 23px;\n right: 27px;\n }\n\n .xen-lightbox__close:hover,\n .xen-lightbox__close:focus-visible {\n transform: rotate(90deg);\n }\n\n .xen-lightbox__previous,\n .xen-lightbox__next {\n top: 50%;\n transform: translateY(-50%);\n }\n\n .xen-lightbox__previous {\n left: 25px;\n }\n\n .xen-lightbox__next {\n right: 25px;\n }\n\n .xen-lightbox__previous:hover,\n .xen-lightbox__previous:focus-visible,\n .xen-lightbox__next:hover,\n .xen-lightbox__next:focus-visible {\n transform: translateY(-50%) scale(1.05);\n }\n\n .xen-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n @keyframes xen-hero-arrive {\n from {\n opacity: .65;\n transform: scale(1.025);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes xen-card-arrive {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @media (max-width: 860px) {\n .xen-gallery__hero {\n height: clamp(300px, 54vw, 410px);\n }\n\n .xen-gallery__intro {\n padding-top: 62px;\n }\n\n .xen-gallery__filters {\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 36px;\n padding: 2px;\n }\n\n .xen-filter {\n flex: 0 0 auto;\n }\n\n .xen-gallery__grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .xen-lightbox {\n padding-inline: 66px;\n }\n\n .xen-lightbox__previous {\n left: 12px;\n }\n\n .xen-lightbox__next {\n right: 12px;\n }\n }\n\n @media (max-width: 560px) {\n .xen-gallery__hero {\n height: 270px;\n }\n\n .xen-gallery__hero img {\n object-position: 61% center;\n }\n\n .xen-gallery__intro {\n padding: 50px 20px 35px;\n }\n\n .xen-gallery__content {\n padding: 0 14px 74px;\n }\n\n .xen-gallery__filters {\n gap: 8px;\n margin-bottom: 25px;\n }\n\n .xen-filter {\n min-height: 38px;\n padding: 9px 17px;\n font-size: 10px;\n }\n\n .xen-gallery__grid {\n gap: 9px;\n }\n\n .xen-gallery-card__button::after {\n width: 38px;\n height: 38px;\n font-size: 22px;\n line-height: 35px;\n }\n\n .xen-lightbox {\n padding: 58px 14px 26px;\n }\n\n .xen-lightbox__figure {\n height: 78vh;\n }\n\n .xen-lightbox__close {\n top: 13px;\n right: 13px;\n }\n\n .xen-lightbox__previous,\n .xen-lightbox__next {\n top: auto;\n bottom: 16px;\n transform: none;\n }\n\n .xen-lightbox__previous {\n left: 14px;\n }\n\n .xen-lightbox__next {\n right: 14px;\n }\n\n .xen-lightbox__previous:hover,\n .xen-lightbox__previous:focus-visible,\n .xen-lightbox__next:hover,\n .xen-lightbox__next:focus-visible {\n transform: scale(1.05);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration: .01ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-duration: .01ms !important;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <main class=\"xen-gallery\">\n <figure class=\"xen-gallery__hero\" aria-label=\"Xen Hotel Nakhon Pathom exterior\">\n <img decoding=\"async\" src=\"https:\/\/www.xenhotel-nakhonpathom.com\/wp-content\/uploads\/2022\/03\/Exterior_7.jpg\"\n alt=\"Xen Hotel Nakhon Pathom exterior\" fetchpriority=\"high\">\n <\/figure>\n\n <section class=\"xen-gallery__intro\" aria-labelledby=\"gallery-title\">\n <h1 class=\"xen-gallery__title\" id=\"gallery-title\">GALLERY<\/h1>\n <hr class=\"xen-gallery__rule\">\n <\/section>\n\n <section class=\"xen-gallery__content\" aria-label=\"Hotel photo gallery\">\n <nav class=\"xen-gallery__filters\" aria-label=\"Gallery categories\">\n <button class=\"xen-filter\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"rooms\" aria-pressed=\"false\">Rooms<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"exterior\" aria-pressed=\"false\">Exterior<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"dining\" aria-pressed=\"false\">Dining<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"lobby\" aria-pressed=\"false\">Lobby<\/button>\n <\/nav>\n\n <div class=\"xen-gallery__grid\" id=\"gallery-grid\" aria-live=\"polite\"><\/div>\n <p class=\"xen-gallery__empty\" id=\"gallery-empty\">No photos are available in this category.<\/p>\n <\/section>\n <\/main>\n\n <div class=\"xen-lightbox\" id=\"gallery-lightbox\" role=\"dialog\" aria-modal=\"true\"\n aria-label=\"Gallery image viewer\" hidden>\n <button class=\"xen-lightbox__control xen-lightbox__close\" id=\"lightbox-close\" type=\"button\"\n aria-label=\"Close image viewer\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M5 5l14 14M19 5L5 19\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"xen-lightbox__control xen-lightbox__previous\" id=\"lightbox-previous\" type=\"button\"\n aria-label=\"Previous image\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M15 5l-7 7 7 7\"><\/path>\n <\/svg>\n <\/button>\n <figure class=\"xen-lightbox__figure\">\n <img decoding=\"async\" class=\"xen-lightbox__image\" id=\"lightbox-image\" src=\"data:,\" alt=\"\">\n <figcaption class=\"xen-lightbox__caption\" id=\"lightbox-caption\"><\/figcaption>\n <\/figure>\n <button class=\"xen-lightbox__control xen-lightbox__next\" id=\"lightbox-next\" type=\"button\"\n aria-label=\"Next image\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 5l7 7-7 7\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n\n <script>\n (() => {\n const imageRoot = 'https:\/\/www.xenhotel-nakhonpathom.com\/wp-content\/uploads\/2022\/03\/';\n const galleryGroups = [\n {\n category: 'rooms',\n caption: 'Superior Room',\n files: ['Superior-Room_Twin_1.jpg', 'Superior-Room_Twin_5.jpg', 'Superior-Room_Twin_3.jpg', 'Superior-Room_Twin_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Deluxe Room',\n files: ['Deluxe-Corner-Room_1.jpg', 'Deluxe-Corner-Room_6.jpg', 'Deluxe-Corner-Room_5.jpg', 'Deluxe-Corner-Room_4.jpg', 'Deluxe-Corner-Room_3.jpg', 'Deluxe-Corner-Room_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Deluxe Premium Room',\n files: ['Deluxe-Premium-Room_2.jpg', 'Deluxe-Premium-Room_7.jpg', 'Deluxe-Premium-Room_6.jpg', 'Deluxe-Premium-Room_5.jpg', 'Deluxe-Premium-Room_4.jpg', 'Deluxe-Premium-Room_3.jpg']\n },\n {\n category: 'rooms',\n caption: 'Mini Suite Room',\n files: ['Mini-Suite_1.jpg', 'Mini-Suite_7.jpg', 'Mini-Suite_6.jpg', 'Mini-Suite_5.jpg', 'Mini-Suite_4.jpg', 'Mini-Suite_3.jpg', 'Mini-Suite_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Xen Suite Room',\n files: ['Xen-Suite_1.jpg', 'Xen-Suite_4.jpg', 'Xen-Suite_3.jpg', 'Xen-Suite_2.jpg', 'Xen-Suite_5.jpg', 'Xen-Suite_6.jpg', 'Xen-Suite_7.jpg', 'Xen-Suite_8.jpg', 'Xen-Suite_9.jpg']\n },\n {\n category: 'exterior',\n caption: 'Hotel Exterior',\n files: ['Exterior_1.jpg', 'Exterior_2.jpg', 'Exterior_3.jpg', 'Exterior_4.jpg', 'Exterior_5.jpg', 'Exterior_6.jpg', 'Exterior_7.jpg', 'Exterior_8.jpg', 'Exterior_9.jpg']\n },\n {\n category: 'dining',\n caption: 'Xen Cafe',\n files: ['Xen-Cafe_1.jpg', 'Xen-Cafe_2.jpg', 'Xen-Cafe_3.jpg', 'Xen-Cafe_4.jpg', 'Xen-Cafe_5.jpg', 'Xen-Cafe_6.jpg', 'Xen-Cafe_7.jpg', 'Xen-Cafe_8.jpg', 'Xen-Cafe_9.jpg', 'Xen-Cafe_10.jpg']\n },\n {\n category: 'lobby',\n caption: 'Lobby',\n files: ['Lobby_4.jpg', 'ANW6181-3-1024x683-2.jpg', 'ANW6188-3-1024x683-2.jpg', 'ANW6173-1024x683-2.jpg']\n }\n ];\n\n const galleryItems = galleryGroups.flatMap((group) => group.files.map((file, index) => ({\n category: group.category,\n caption: group.caption,\n file,\n alt: `${group.caption} at Xen Hotel Nakhon Pathom, photo ${index + 1}`,\n src: imageRoot + file\n })));\n\n const grid = document.getElementById('gallery-grid');\n const emptyState = document.getElementById('gallery-empty');\n const filterButtons = Array.from(document.querySelectorAll('.xen-filter'));\n const lightbox = document.getElementById('gallery-lightbox');\n const lightboxImage = document.getElementById('lightbox-image');\n const lightboxCaption = document.getElementById('lightbox-caption');\n const closeButton = document.getElementById('lightbox-close');\n const previousButton = document.getElementById('lightbox-previous');\n const nextButton = document.getElementById('lightbox-next');\n\n let activeFilter = 'all';\n let visibleItems = galleryItems;\n let activeIndex = 0;\n let lastFocusedElement = null;\n\n const cardMarkup = (item, index) => `\n <figure class=\"xen-gallery-card\" style=\"animation-delay:${Math.min(index, 11) * 35}ms\">\n <button class=\"xen-gallery-card__button\" type=\"button\" data-gallery-index=\"${index}\"\n aria-label=\"Open ${item.alt}\">\n <img class=\"xen-gallery-card__image\" src=\"${item.src}\" alt=\"${item.alt}\"\n loading=\"${index < 6 ? 'eager' : 'lazy'}\" decoding=\"async\">\n <\/button>\n <\/figure>`;\n\n function renderGallery() {\n visibleItems = activeFilter === 'all'\n ? galleryItems\n : galleryItems.filter((item) => item.category === activeFilter);\n grid.innerHTML = visibleItems.map(cardMarkup).join('');\n emptyState.style.display = visibleItems.length ? 'none' : 'block';\n }\n\n function updateLightbox() {\n const item = visibleItems[activeIndex];\n if (!item) return;\n lightboxImage.src = item.src;\n lightboxImage.alt = item.alt;\n lightboxCaption.textContent = `${item.caption} \u00b7 ${activeIndex + 1} \/ ${visibleItems.length}`;\n }\n\n function openLightbox(index, trigger) {\n activeIndex = index;\n lastFocusedElement = trigger;\n updateLightbox();\n lightbox.hidden = false;\n document.body.classList.add('xen-lightbox-open');\n closeButton.focus();\n }\n\n function closeLightbox() {\n lightbox.hidden = true;\n lightboxImage.src = 'data:,';\n document.body.classList.remove('xen-lightbox-open');\n if (lastFocusedElement) lastFocusedElement.focus();\n }\n\n function moveLightbox(direction) {\n activeIndex = (activeIndex + direction + visibleItems.length) % visibleItems.length;\n updateLightbox();\n }\n\n filterButtons.forEach((button) => {\n button.addEventListener('click', () => {\n activeFilter = button.dataset.filter;\n filterButtons.forEach((item) => item.setAttribute('aria-pressed', String(item === button)));\n renderGallery();\n });\n });\n\n grid.addEventListener('click', (event) => {\n const trigger = event.target.closest('[data-gallery-index]');\n if (!trigger) return;\n openLightbox(Number(trigger.dataset.galleryIndex), trigger);\n });\n\n closeButton.addEventListener('click', closeLightbox);\n previousButton.addEventListener('click', () => moveLightbox(-1));\n nextButton.addEventListener('click', () => moveLightbox(1));\n lightbox.addEventListener('click', (event) => {\n if (event.target === lightbox) closeLightbox();\n });\n\n document.addEventListener('keydown', (event) => {\n if (lightbox.hidden) return;\n if (event.key === 'Escape') closeLightbox();\n if (event.key === 'ArrowLeft') moveLightbox(-1);\n if (event.key === 'ArrowRight') moveLightbox(1);\n if (event.key === 'Tab') {\n const controls = [closeButton, previousButton, nextButton];\n const currentIndex = controls.indexOf(document.activeElement);\n if (event.shiftKey && currentIndex <= 0) {\n event.preventDefault();\n controls[controls.length - 1].focus();\n } else if (!event.shiftKey && currentIndex === controls.length - 1) {\n event.preventDefault();\n controls[0].focus();\n }\n }\n });\n\n renderGallery();\n })();\n <\/script>\n<\/body>\n\n<\/html>\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>Gallery | Xen Hotel Nakhon Pathom GALLERY All Rooms Exterior Dining Lobby No photos are available in this category.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":10,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n \n \n Gallery | Xen Hotel Nakhon Pathom<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600&family=Noto+Sans+Thai:wght@300;400&display=swap');\n\n :root {\n --xen-blue: #8dc8e8;\n --xen-blue-deep: #69b4da;\n --xen-blue-pale: #f3f9fc;\n --xen-ink: #54585b;\n --xen-muted: #777d80;\n --xen-line: #c6e0ec;\n --xen-white: #ffffff;\n --xen-display: 'Montserrat', Arial, sans-serif;\n --xen-body: 'Noto Sans Thai', Arial, sans-serif;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n margin: 0;\n overflow-x: hidden;\n background: var(--xen-white);\n color: var(--xen-ink);\n font-family: var(--xen-body);\n -webkit-font-smoothing: antialiased;\n }\n\n body.xen-lightbox-open {\n overflow: hidden;\n }\n\n button {\n color: inherit;\n font: inherit;\n }\n\n .xen-gallery {\n width: 100%;\n overflow: hidden;\n background: var(--xen-white);\n }\n\n .xen-gallery__hero {\n width: 100%;\n height: clamp(330px, 39vw, 560px);\n margin: 0;\n overflow: hidden;\n background: #e9f2f6;\n }\n\n .xen-gallery__hero img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center 54%;\n animation: xen-hero-arrive 1.1s ease-out both;\n }\n\n .xen-gallery__intro {\n padding: 76px 24px 43px;\n text-align: center;\n }\n\n .xen-gallery__title {\n margin: 0;\n color: var(--xen-ink);\n font-family: var(--xen-display);\n font-size: clamp(35px, 4.2vw, 48px);\n font-weight: 500;\n letter-spacing: .06em;\n line-height: 1.2;\n }\n\n .xen-gallery__rule {\n width: 74px;\n height: 1px;\n margin: 24px auto 0;\n border: 0;\n background: var(--xen-blue);\n }\n\n .xen-gallery__content {\n padding: 0 24px 112px;\n }\n\n .xen-gallery__filters {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 11px;\n width: min(1080px, 100%);\n margin: 0 auto 48px;\n }\n\n .xen-filter {\n min-height: 42px;\n padding: 10px 21px;\n border: 1px solid var(--xen-line);\n border-radius: 999px;\n background: var(--xen-white);\n color: var(--xen-muted);\n cursor: pointer;\n font-family: var(--xen-display);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: .13em;\n line-height: 1;\n text-transform: uppercase;\n transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;\n }\n\n .xen-filter:hover,\n .xen-filter:focus-visible {\n border-color: var(--xen-blue-deep);\n color: var(--xen-blue-deep);\n outline: none;\n transform: translateY(-2px);\n }\n\n .xen-filter[aria-pressed=\"true\"] {\n border-color: var(--xen-blue-deep);\n background: var(--xen-blue-deep);\n color: var(--xen-white);\n }\n\n .xen-gallery__grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 19px;\n width: min(1248px, 100%);\n margin-inline: auto;\n }\n\n .xen-gallery-card {\n min-width: 0;\n margin: 0;\n animation: xen-card-arrive .55s ease both;\n }\n\n .xen-gallery-card__button {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 3 \/ 2;\n padding: 0;\n overflow: hidden;\n border: 0;\n background: var(--xen-blue-pale);\n cursor: zoom-in;\n }\n\n .xen-gallery-card__button::before {\n position: absolute;\n inset: 0;\n z-index: 1;\n background: rgba(84, 88, 91, .2);\n content: '';\n opacity: 0;\n transition: opacity .35s ease;\n }\n\n .xen-gallery-card__button::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 2;\n width: 46px;\n height: 46px;\n border: 1px solid rgba(255, 255, 255, .88);\n border-radius: 50%;\n background: rgba(255, 255, 255, .92);\n color: var(--xen-blue-deep);\n content: '+';\n font-family: var(--xen-display);\n font-size: 27px;\n font-weight: 400;\n line-height: 43px;\n opacity: 0;\n transform: translate(-50%, -42%);\n transition: opacity .35s ease, transform .35s ease;\n }\n\n .xen-gallery-card__button:hover::before,\n .xen-gallery-card__button:focus-visible::before,\n .xen-gallery-card__button:hover::after,\n .xen-gallery-card__button:focus-visible::after {\n opacity: 1;\n }\n\n .xen-gallery-card__button:hover::after,\n .xen-gallery-card__button:focus-visible::after {\n transform: translate(-50%, -50%);\n }\n\n .xen-gallery-card__button:focus-visible {\n outline: 3px solid var(--xen-blue);\n outline-offset: 3px;\n }\n\n .xen-gallery-card__image {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform .65s ease;\n }\n\n .xen-gallery-card__button:hover .xen-gallery-card__image,\n .xen-gallery-card__button:focus-visible .xen-gallery-card__image {\n transform: scale(1.045);\n }\n\n .xen-gallery__empty {\n display: none;\n margin: 30px 0;\n color: var(--xen-muted);\n font-size: 15px;\n text-align: center;\n }\n\n .xen-lightbox[hidden] {\n display: none;\n }\n\n .xen-lightbox {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: grid;\n place-items: center;\n padding: 50px 88px 34px;\n background: rgba(24, 28, 30, .94);\n }\n\n .xen-lightbox__figure {\n display: grid;\n grid-template-rows: minmax(0, 1fr) auto;\n justify-items: center;\n width: min(1120px, 100%);\n height: min(82vh, 820px);\n margin: 0;\n }\n\n .xen-lightbox__image {\n display: block;\n width: auto;\n max-width: 100%;\n height: auto;\n max-height: 100%;\n align-self: center;\n object-fit: contain;\n box-shadow: 0 18px 60px rgba(0, 0, 0, .28);\n }\n\n .xen-lightbox__caption {\n margin-top: 18px;\n color: rgba(255, 255, 255, .88);\n font-family: var(--xen-display);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: .12em;\n line-height: 1.5;\n text-align: center;\n text-transform: uppercase;\n }\n\n .xen-lightbox__control {\n position: absolute;\n display: grid;\n width: 46px;\n height: 46px;\n place-items: center;\n padding: 0;\n border: 1px solid rgba(255, 255, 255, .42);\n border-radius: 50%;\n background: transparent;\n color: var(--xen-white);\n cursor: pointer;\n transition: background-color .25s ease, border-color .25s ease, transform .25s ease;\n }\n\n .xen-lightbox__control:hover,\n .xen-lightbox__control:focus-visible {\n border-color: var(--xen-white);\n background: rgba(255, 255, 255, .12);\n outline: none;\n }\n\n .xen-lightbox__control svg {\n width: 18px;\n height: 18px;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 1.7;\n }\n\n .xen-lightbox__close {\n top: 23px;\n right: 27px;\n }\n\n .xen-lightbox__close:hover,\n .xen-lightbox__close:focus-visible {\n transform: rotate(90deg);\n }\n\n .xen-lightbox__previous,\n .xen-lightbox__next {\n top: 50%;\n transform: translateY(-50%);\n }\n\n .xen-lightbox__previous {\n left: 25px;\n }\n\n .xen-lightbox__next {\n right: 25px;\n }\n\n .xen-lightbox__previous:hover,\n .xen-lightbox__previous:focus-visible,\n .xen-lightbox__next:hover,\n .xen-lightbox__next:focus-visible {\n transform: translateY(-50%) scale(1.05);\n }\n\n .xen-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n @keyframes xen-hero-arrive {\n from {\n opacity: .65;\n transform: scale(1.025);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes xen-card-arrive {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @media (max-width: 860px) {\n .xen-gallery__hero {\n height: clamp(300px, 54vw, 410px);\n }\n\n .xen-gallery__intro {\n padding-top: 62px;\n }\n\n .xen-gallery__filters {\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 36px;\n padding: 2px;\n }\n\n .xen-filter {\n flex: 0 0 auto;\n }\n\n .xen-gallery__grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .xen-lightbox {\n padding-inline: 66px;\n }\n\n .xen-lightbox__previous {\n left: 12px;\n }\n\n .xen-lightbox__next {\n right: 12px;\n }\n }\n\n @media (max-width: 560px) {\n .xen-gallery__hero {\n height: 270px;\n }\n\n .xen-gallery__hero img {\n object-position: 61% center;\n }\n\n .xen-gallery__intro {\n padding: 50px 20px 35px;\n }\n\n .xen-gallery__content {\n padding: 0 14px 74px;\n }\n\n .xen-gallery__filters {\n gap: 8px;\n margin-bottom: 25px;\n }\n\n .xen-filter {\n min-height: 38px;\n padding: 9px 17px;\n font-size: 10px;\n }\n\n .xen-gallery__grid {\n gap: 9px;\n }\n\n .xen-gallery-card__button::after {\n width: 38px;\n height: 38px;\n font-size: 22px;\n line-height: 35px;\n }\n\n .xen-lightbox {\n padding: 58px 14px 26px;\n }\n\n .xen-lightbox__figure {\n height: 78vh;\n }\n\n .xen-lightbox__close {\n top: 13px;\n right: 13px;\n }\n\n .xen-lightbox__previous,\n .xen-lightbox__next {\n top: auto;\n bottom: 16px;\n transform: none;\n }\n\n .xen-lightbox__previous {\n left: 14px;\n }\n\n .xen-lightbox__next {\n right: 14px;\n }\n\n .xen-lightbox__previous:hover,\n .xen-lightbox__previous:focus-visible,\n .xen-lightbox__next:hover,\n .xen-lightbox__next:focus-visible {\n transform: scale(1.05);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration: .01ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-duration: .01ms !important;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <main class=\"xen-gallery\">\n <figure class=\"xen-gallery__hero\" aria-label=\"Xen Hotel Nakhon Pathom exterior\">\n <img decoding=\"async\" src=\"https:\/\/www.xenhotel-nakhonpathom.com\/wp-content\/uploads\/2022\/03\/Exterior_7.jpg\"\n alt=\"Xen Hotel Nakhon Pathom exterior\" fetchpriority=\"high\">\n <\/figure>\n\n <section class=\"xen-gallery__intro\" aria-labelledby=\"gallery-title\">\n <h1 class=\"xen-gallery__title\" id=\"gallery-title\">GALLERY<\/h1>\n <hr class=\"xen-gallery__rule\">\n <\/section>\n\n <section class=\"xen-gallery__content\" aria-label=\"Hotel photo gallery\">\n <nav class=\"xen-gallery__filters\" aria-label=\"Gallery categories\">\n <button class=\"xen-filter\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"rooms\" aria-pressed=\"false\">Rooms<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"exterior\" aria-pressed=\"false\">Exterior<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"dining\" aria-pressed=\"false\">Dining<\/button>\n <button class=\"xen-filter\" type=\"button\" data-filter=\"lobby\" aria-pressed=\"false\">Lobby<\/button>\n <\/nav>\n\n <div class=\"xen-gallery__grid\" id=\"gallery-grid\" aria-live=\"polite\"><\/div>\n <p class=\"xen-gallery__empty\" id=\"gallery-empty\">No photos are available in this category.<\/p>\n <\/section>\n <\/main>\n\n <div class=\"xen-lightbox\" id=\"gallery-lightbox\" role=\"dialog\" aria-modal=\"true\"\n aria-label=\"Gallery image viewer\" hidden>\n <button class=\"xen-lightbox__control xen-lightbox__close\" id=\"lightbox-close\" type=\"button\"\n aria-label=\"Close image viewer\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M5 5l14 14M19 5L5 19\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"xen-lightbox__control xen-lightbox__previous\" id=\"lightbox-previous\" type=\"button\"\n aria-label=\"Previous image\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M15 5l-7 7 7 7\"><\/path>\n <\/svg>\n <\/button>\n <figure class=\"xen-lightbox__figure\">\n <img decoding=\"async\" class=\"xen-lightbox__image\" id=\"lightbox-image\" src=\"data:,\" alt=\"\">\n <figcaption class=\"xen-lightbox__caption\" id=\"lightbox-caption\"><\/figcaption>\n <\/figure>\n <button class=\"xen-lightbox__control xen-lightbox__next\" id=\"lightbox-next\" type=\"button\"\n aria-label=\"Next image\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 5l7 7-7 7\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n\n <script>\n (() => {\n const imageRoot = 'https:\/\/www.xenhotel-nakhonpathom.com\/wp-content\/uploads\/2022\/03\/';\n const galleryGroups = [\n {\n category: 'rooms',\n caption: 'Superior Room',\n files: ['Superior-Room_Twin_1.jpg', 'Superior-Room_Twin_5.jpg', 'Superior-Room_Twin_3.jpg', 'Superior-Room_Twin_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Deluxe Room',\n files: ['Deluxe-Corner-Room_1.jpg', 'Deluxe-Corner-Room_6.jpg', 'Deluxe-Corner-Room_5.jpg', 'Deluxe-Corner-Room_4.jpg', 'Deluxe-Corner-Room_3.jpg', 'Deluxe-Corner-Room_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Deluxe Premium Room',\n files: ['Deluxe-Premium-Room_2.jpg', 'Deluxe-Premium-Room_7.jpg', 'Deluxe-Premium-Room_6.jpg', 'Deluxe-Premium-Room_5.jpg', 'Deluxe-Premium-Room_4.jpg', 'Deluxe-Premium-Room_3.jpg']\n },\n {\n category: 'rooms',\n caption: 'Mini Suite Room',\n files: ['Mini-Suite_1.jpg', 'Mini-Suite_7.jpg', 'Mini-Suite_6.jpg', 'Mini-Suite_5.jpg', 'Mini-Suite_4.jpg', 'Mini-Suite_3.jpg', 'Mini-Suite_2.jpg']\n },\n {\n category: 'rooms',\n caption: 'Xen Suite Room',\n files: ['Xen-Suite_1.jpg', 'Xen-Suite_4.jpg', 'Xen-Suite_3.jpg', 'Xen-Suite_2.jpg', 'Xen-Suite_5.jpg', 'Xen-Suite_6.jpg', 'Xen-Suite_7.jpg', 'Xen-Suite_8.jpg', 'Xen-Suite_9.jpg']\n },\n {\n category: 'exterior',\n caption: 'Hotel Exterior',\n files: ['Exterior_1.jpg', 'Exterior_2.jpg', 'Exterior_3.jpg', 'Exterior_4.jpg', 'Exterior_5.jpg', 'Exterior_6.jpg', 'Exterior_7.jpg', 'Exterior_8.jpg', 'Exterior_9.jpg']\n },\n {\n category: 'dining',\n caption: 'Xen Cafe',\n files: ['Xen-Cafe_1.jpg', 'Xen-Cafe_2.jpg', 'Xen-Cafe_3.jpg', 'Xen-Cafe_4.jpg', 'Xen-Cafe_5.jpg', 'Xen-Cafe_6.jpg', 'Xen-Cafe_7.jpg', 'Xen-Cafe_8.jpg', 'Xen-Cafe_9.jpg', 'Xen-Cafe_10.jpg']\n },\n {\n category: 'lobby',\n caption: 'Lobby',\n files: ['Lobby_4.jpg', 'ANW6181-3-1024x683-2.jpg', 'ANW6188-3-1024x683-2.jpg', 'ANW6173-1024x683-2.jpg']\n }\n ];\n\n const galleryItems = galleryGroups.flatMap((group) => group.files.map((file, index) => ({\n category: group.category,\n caption: group.caption,\n file,\n alt: `${group.caption} at Xen Hotel Nakhon Pathom, photo ${index + 1}`,\n src: imageRoot + file\n })));\n\n const grid = document.getElementById('gallery-grid');\n const emptyState = document.getElementById('gallery-empty');\n const filterButtons = Array.from(document.querySelectorAll('.xen-filter'));\n const lightbox = document.getElementById('gallery-lightbox');\n const lightboxImage = document.getElementById('lightbox-image');\n const lightboxCaption = document.getElementById('lightbox-caption');\n const closeButton = document.getElementById('lightbox-close');\n const previousButton = document.getElementById('lightbox-previous');\n const nextButton = document.getElementById('lightbox-next');\n\n let activeFilter = 'all';\n let visibleItems = galleryItems;\n let activeIndex = 0;\n let lastFocusedElement = null;\n\n const cardMarkup = (item, index) => `\n <figure class=\"xen-gallery-card\" style=\"animation-delay:${Math.min(index, 11) * 35}ms\">\n <button class=\"xen-gallery-card__button\" type=\"button\" data-gallery-index=\"${index}\"\n aria-label=\"Open ${item.alt}\">\n <img class=\"xen-gallery-card__image\" src=\"${item.src}\" alt=\"${item.alt}\"\n loading=\"${index < 6 ? 'eager' : 'lazy'}\" decoding=\"async\">\n <\/button>\n <\/figure>`;\n\n function renderGallery() {\n visibleItems = activeFilter === 'all'\n ? galleryItems\n : galleryItems.filter((item) => item.category === activeFilter);\n grid.innerHTML = visibleItems.map(cardMarkup).join('');\n emptyState.style.display = visibleItems.length ? 'none' : 'block';\n }\n\n function updateLightbox() {\n const item = visibleItems[activeIndex];\n if (!item) return;\n lightboxImage.src = item.src;\n lightboxImage.alt = item.alt;\n lightboxCaption.textContent = `${item.caption} \u00b7 ${activeIndex + 1} \/ ${visibleItems.length}`;\n }\n\n function openLightbox(index, trigger) {\n activeIndex = index;\n lastFocusedElement = trigger;\n updateLightbox();\n lightbox.hidden = false;\n document.body.classList.add('xen-lightbox-open');\n closeButton.focus();\n }\n\n function closeLightbox() {\n lightbox.hidden = true;\n lightboxImage.src = 'data:,';\n document.body.classList.remove('xen-lightbox-open');\n if (lastFocusedElement) lastFocusedElement.focus();\n }\n\n function moveLightbox(direction) {\n activeIndex = (activeIndex + direction + visibleItems.length) % visibleItems.length;\n updateLightbox();\n }\n\n filterButtons.forEach((button) => {\n button.addEventListener('click', () => {\n activeFilter = button.dataset.filter;\n filterButtons.forEach((item) => item.setAttribute('aria-pressed', String(item === button)));\n renderGallery();\n });\n });\n\n grid.addEventListener('click', (event) => {\n const trigger = event.target.closest('[data-gallery-index]');\n if (!trigger) return;\n openLightbox(Number(trigger.dataset.galleryIndex), trigger);\n });\n\n closeButton.addEventListener('click', closeLightbox);\n previousButton.addEventListener('click', () => moveLightbox(-1));\n nextButton.addEventListener('click', () => moveLightbox(1));\n lightbox.addEventListener('click', (event) => {\n if (event.target === lightbox) closeLightbox();\n });\n\n document.addEventListener('keydown', (event) => {\n if (lightbox.hidden) return;\n if (event.key === 'Escape') closeLightbox();\n if (event.key === 'ArrowLeft') moveLightbox(-1);\n if (event.key === 'ArrowRight') moveLightbox(1);\n if (event.key === 'Tab') {\n const controls = [closeButton, previousButton, nextButton];\n const currentIndex = controls.indexOf(document.activeElement);\n if (event.shiftKey && currentIndex <= 0) {\n event.preventDefault();\n controls[controls.length - 1].focus();\n } else if (!event.shiftKey && currentIndex === controls.length - 1) {\n event.preventDefault();\n controls[0].focus();\n }\n }\n });\n\n renderGallery();\n })();\n <\/script>\n<\/body>\n\n<\/html>\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>Gallery | Xen Hotel Nakhon Pathom GALLERY All Rooms Exterior Dining Lobby No photos are available in this category.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":10,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/pages\/31\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/mhg.co.th\/xenhotelnakhonpathom\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}