{"id":5354,"date":"2025-08-24T10:53:09","date_gmt":"2025-08-24T03:53:09","guid":{"rendered":"https:\/\/nya.ac.th\/?page_id=5354"},"modified":"2025-08-25T09:37:36","modified_gmt":"2025-08-25T02:37:36","slug":"%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%88%e0%b8%ad%e0%b8%87%e0%b9%80%e0%b8%8b%e0%b9%87%e0%b8%95%e0%b8%ad%e0%b8%b2%e0%b8%ab%e0%b8%b2%e0%b8%a3%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%87","status":"publish","type":"page","link":"https:\/\/nya.ac.th\/?page_id=5354","title":{"rendered":"\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5354\" class=\"elementor elementor-5354\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d53ba28 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d53ba28\" data-element_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-a14f3f5\" data-id=\"a14f3f5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1219c89 elementor-widget elementor-widget-html\" data-id=\"1219c89\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n  <style>\r\n\r\n    \/* \u0e1b\u0e38\u0e48\u0e21 toggle \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d *\/\r\n    .toggle-btn {\r\n      display: inline-block;\r\n      padding: 12px 25px;\r\n      background: #6a4baf;\r\n      color: #fff;\r\n      border-radius: 10px;\r\n      font-size: 16px;\r\n      cursor: pointer;\r\n      margin-bottom: 20px;\r\n      transition: background 0.3s;\r\n    }\r\n    .toggle-btn:hover {\r\n      background: #4b2e83;\r\n    }\r\n\r\n    \/* \u0e01\u0e25\u0e48\u0e2d\u0e07\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d *\/\r\n    .guide {\r\n      max-height: 0;\r\n      overflow: hidden;\r\n      transition: max-height 0.6s ease;\r\n      text-align: left;\r\n    }\r\n\r\n    .guide.open {\r\n      max-height: 1000px; \/* \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07\u0e1e\u0e2d\u0e17\u0e35\u0e48\u0e08\u0e30\u0e42\u0e0a\u0e27\u0e4c\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 *\/\r\n    }\r\n\r\n    .step {\r\n      margin-bottom: 15px;\r\n      padding: 15px;\r\n      border-left: 6px solid #6a4baf;\r\n      background: #f8f6fb;\r\n      border-radius: 12px;\r\n    }\r\n    .step h2 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n      color: #4b2e83;\r\n    }\r\n    .step p {\r\n      margin: 8px 0 0;\r\n      font-size: 15px;\r\n      color: #444;\r\n    }\r\n\r\n    \/* \u0e1b\u0e38\u0e48\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 *\/\r\n    .btn-start {\r\n      display: block;\r\n      width: 100%;\r\n      max-width: 300px;\r\n      margin: 30px auto 0;\r\n      padding: 15px;\r\n      text-align: center;\r\n      background: #6a4baf;\r\n      color: #fff;\r\n      text-decoration: none;\r\n      border-radius: 12px;\r\n      font-size: 18px;\r\n      transition: background 0.3s;\r\n      cursor: pointer;\r\n    }\r\n    .btn-start:hover {\r\n      background: #4b2e83;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"container\">\r\n    <!-- \u0e1b\u0e38\u0e48\u0e21 toggle -->\r\n    <div class=\"toggle-btn\" onclick=\"toggleGuide()\">\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07<\/div>\r\n\r\n    <!-- \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d -->\r\n    <div class=\"guide\" id=\"guide\">\r\n      <div class=\"step\">\r\n        <h2>\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 1: \u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49<\/h2>\r\n        <p>\u0e43\u0e2a\u0e48\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e25\u0e30\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07<\/p>\r\n      <\/div>\r\n      <div class=\"step\">\r\n        <h2>\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 2: \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07<\/h2>\r\n        <p>\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e41\u0e25\u0e30\u0e02\u0e19\u0e21\u0e15\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e04\u0e32<\/p>\r\n      <\/div>\r\n      <div class=\"step\">\r\n        <h2>\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 3: \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e31\u0e19\u0e40\u0e27\u0e25\u0e32\u0e41\u0e25\u0e30\u0e08\u0e33\u0e19\u0e27\u0e19<\/h2>\r\n        <p>\u0e23\u0e30\u0e1a\u0e38\u0e27\u0e31\u0e19\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\u0e43\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a \u0e41\u0e25\u0e30\u0e01\u0e23\u0e2d\u0e01\u0e08\u0e33\u0e19\u0e27\u0e19\u0e0a\u0e38\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\r\n      <\/div>\r\n      <div class=\"step\">\r\n        <h2>\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 4: \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19<\/h2>\r\n        <p>\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e48\u0e2d\u0e19\u0e01\u0e14\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19 \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e49\u0e27 \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    function toggleGuide() {\r\n      const guide = document.getElementById(\"guide\");\r\n      guide.classList.toggle(\"open\");\r\n    }\r\n\r\n    function hideGuide() {\r\n      const guide = document.getElementById(\"guide\");\r\n      guide.classList.remove(\"open\"); \/\/ \u0e22\u0e38\u0e1a\u0e01\u0e25\u0e31\u0e1a\r\n    }\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1001a71 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1001a71\" data-element_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-4c4283b\" data-id=\"4c4283b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-31339ee elementor-widget elementor-widget-html\" data-id=\"31339ee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <title>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07<\/title>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n  <style>\r\n    :root{\r\n      --brand:#ff9800;\r\n      --brand-2:#ff6f00;\r\n    }\r\n    body {\r\n      font-family: \"Prompt\", system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\";\r\n      background: linear-gradient(135deg, #fffaf4, #ffe5c2);\r\n      margin: 0; padding: 40px;\r\n    }\r\n    .booking-container {\r\n      max-width: 980px; margin: auto; background: #fff;\r\n      padding: 32px; border-radius: 24px; box-shadow: 0 8px 28px rgba(0,0,0,.08);\r\n    }\r\n    h1 { text-align:center; color:#b86a00; margin:0 0 6px }\r\n    .subtitle { text-align:center; color:#555; margin:0 0 24px }\r\n\r\n    .field { margin: 14px 0 18px }\r\n    .label { font-weight: 600; color:#444; margin-bottom:6px; display:block }\r\n    .control input[type=\"text\"],\r\n    .control input[type=\"tel\"],\r\n    .control input[type=\"date\"],\r\n    .control input[type=\"time\"],\r\n    .control input[type=\"number\"]{\r\n      width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid #ddd; font-size:1rem;\r\n    }\r\n\r\n    \/* Grid \u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07 *\/\r\n    .snack-grid{\r\n      display:grid; grid-template-columns: repeat(4, 1fr);\r\n      gap:24px; margin-top:10px; justify-items:center;\r\n    }\r\n    .snack-item{ text-align:center; cursor:pointer; user-select:none }\r\n    .snack-item input[type=\"radio\"]{ display:none }\r\n\r\n    .card{\r\n      width: 180px; padding: 14px 12px 12px; border-radius:16px;\r\n      border:1px solid #eee; background:#fff; transition: box-shadow .25s ease, transform .25s ease;\r\n    }\r\n    .snack-item:hover .card{ transform: translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08) }\r\n\r\n    .thumb{\r\n      width:160px; height:160px; border-radius:12px; object-fit:cover;\r\n      display:block; margin: 0 auto; border: 2px solid transparent;\r\n      transition: transform .25s ease, box-shadow .25s ease, border .25s ease;\r\n    }\r\n    .snack-item:hover .thumb{\r\n      transform: scale(1.06);\r\n      box-shadow: 0 8px 18px rgba(0,0,0,.18);\r\n    }\r\n    .snack-item input:checked + .card .thumb{\r\n      border:3px solid var(--brand);\r\n    }\r\n\r\n    .title{ margin-top:10px; font-weight:700; color:#333; }\r\n    .price{ margin-top:4px; color:#ff5722; font-weight:600 }\r\n\r\n    .total{\r\n      font-size: 18px; font-weight: 800; color:#d32f2f; margin-top: 2px;\r\n      background:#fff7e6; padding:10px 14px; border-radius:12px; border:1px solid #ffd699;\r\n      display:inline-block;\r\n    }\r\n\r\n    .btn{\r\n      display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n      padding: 12px 16px; border-radius:12px; border:none; cursor:pointer; font-weight:700; font-size:1rem;\r\n    }\r\n    .btn-primary{\r\n      width:100%;\r\n      background: linear-gradient(135deg, var(--brand), var(--brand-2));\r\n      color:#fff;\r\n    }\r\n    .btn-ghost{ background:#e6e6e6 }\r\n    .btn-success{ background:#28a745; color:#fff }\r\n\r\n    \/* Review *\/\r\n    .review-container{ display:none }\r\n    .review-box{ background:#fff7e6; padding:20px; border-radius:16px; border:1px solid #ffd699 }\r\n    .review-row{ display:grid; grid-template-columns: 160px 1fr; gap:10px; padding:6px 0; border-bottom:1px dashed #ffd699 }\r\n    .review-row:last-child{ border-bottom:none }\r\n    .review-actions{ display:flex; gap:12px; margin-top:16px }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 900px){\r\n      .snack-grid{ grid-template-columns: repeat(3, 1fr); }\r\n    }\r\n    @media (max-width: 640px){\r\n      .snack-grid{ grid-template-columns: repeat(2, 1fr); }\r\n      .card{ width: 100%; }\r\n      .thumb{ width:100%; height: 46vw; max-height: 200px }\r\n      .review-row{ grid-template-columns: 1fr; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"booking-container\">\r\n    <h1>\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07<\/h1>\r\n    <p class=\"subtitle\">\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e0b\u0e47\u0e15 \u0e23\u0e30\u0e1a\u0e38\u0e08\u0e33\u0e19\u0e27\u0e19 \u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e48\u0e2d\u0e19\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19<\/p>\r\n\r\n    <!-- \u0e1f\u0e2d\u0e23\u0e4c\u0e21 -->\r\n    <form id=\"bookingForm\">\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e08\u0e2d\u0e07<\/label>\r\n        <div class=\"control\"><input type=\"text\" name=\"name\" required placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e01\u0e19\u0e01\u0e1e\u0e23 \u0e43\u0e08\u0e14\u0e35\" \/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/label>\r\n        <div class=\"control\"><input type=\"tel\" name=\"phone\" required placeholder=\"08XXXXXXXX\" pattern=\"[0-9]{9,10}\" \/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e27\u0e31\u0e19\/\u0e40\u0e14\u0e37\u0e2d\u0e19\/\u0e1b\u0e35<\/label>\r\n        <div class=\"control\"><input type=\"date\" name=\"date\" required \/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e40\u0e27\u0e25\u0e32<\/label>\r\n        <div class=\"control\"><input type=\"time\" name=\"time\" required \/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07<\/label>\r\n\r\n        <div class=\"snack-grid\">\r\n          <!-- A -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"A\" data-price=\"50\" required>\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/a-scaled.jpg\" alt=\"Set A\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 A<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 50 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- B -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"B\" data-price=\"55\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/b-scaled.jpg\" alt=\"Set B\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 B<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 55 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- C -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"C\" data-price=\"60\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/c-scaled.jpg\" alt=\"Set C\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 C<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 60 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- D -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"D\" data-price=\"65\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/d-scaled.jpg\" alt=\"Set D\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 D<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 65 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- E -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"E\" data-price=\"50\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/e-scaled.jpg\" alt=\"Set E\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 E<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 50 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- F -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"F\" data-price=\"55\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/f-scaled.jpg\" alt=\"Set F\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 F<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 55 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- G -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"G\" data-price=\"60\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/g-scaled.jpg\" alt=\"Set G\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 G<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 60 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- H -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"H\" data-price=\"65\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/h-scaled.jpg\" alt=\"Set H\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 H<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 65 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- I -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"I\" data-price=\"50\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/i-scaled.jpg\" alt=\"Set I\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 I<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 50 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- J -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"J\" data-price=\"55\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/j-scaled.jpg\" alt=\"Set J\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 J<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 55 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- K -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"K\" data-price=\"60\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/k-scaled.jpg\" alt=\"Set K\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 K<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 60 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n          <!-- L -->\r\n          <label class=\"snack-item\">\r\n            <input type=\"radio\" name=\"snack_set\" value=\"L\" data-price=\"65\">\r\n            <div class=\"card\">\r\n              <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/nya.ac.th\/wp-content\/uploads\/2025\/08\/l-scaled.jpg\" alt=\"Set L\">\r\n              <div class=\"title\">\u0e40\u0e0b\u0e47\u0e15 L<\/div>\r\n              <div class=\"price\">\u0e23\u0e32\u0e04\u0e32 65 \u0e1a\u0e32\u0e17<\/div>\r\n            <\/div>\r\n          <\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"field\">\r\n        <label class=\"label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e0b\u0e47\u0e15\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/label>\r\n        <div class=\"control\"><input type=\"number\" id=\"quantity\" name=\"quantity\" min=\"1\" value=\"1\" required><\/div>\r\n        <div class=\"total\">\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21: <span id=\"totalPrice\">0<\/span> \u0e1a\u0e32\u0e17<\/div>\r\n      <\/div>\r\n\r\n      <button type=\"submit\" class=\"btn btn-primary\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07<\/button>\r\n    <\/form>\r\n\r\n    <!-- \u0e2b\u0e19\u0e49\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 -->\r\n    <div class=\"review-container\" id=\"reviewContainer\">\r\n      <h2 style=\"margin:18px 0 8px;\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e48\u0e2d\u0e19\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19<\/h2>\r\n      <div class=\"review-box\" id=\"reviewBox\"><\/div>\r\n      <div class=\"review-actions\">\r\n        <button class=\"btn btn-ghost\" id=\"btnEdit\">\u0e41\u0e01\u0e49\u0e44\u0e02<\/button>\r\n        <button class=\"btn btn-success\" id=\"btnConfirm\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/\/ ======= \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 =======\r\n    const form = document.getElementById('bookingForm');\r\n    const totalPriceEl = document.getElementById('totalPrice');\r\n    const qtyEl = document.getElementById('quantity');\r\n    const reviewContainer = document.getElementById('reviewContainer');\r\n    const reviewBox = document.getElementById('reviewBox');\r\n    const btnEdit = document.getElementById('btnEdit');\r\n    const btnConfirm = document.getElementById('btnConfirm');\r\n\r\n    \/\/ ======= \u0e04\u0e33\u0e19\u0e27\u0e13\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21 =======\r\n    function updateTotal(){\r\n      const selected = document.querySelector('input[name=\"snack_set\"]:checked');\r\n      const qty = parseInt(qtyEl.value || '0', 10);\r\n      if(!selected){ totalPriceEl.textContent = 0; return; }\r\n      const price = parseInt(selected.dataset.price, 10);\r\n      totalPriceEl.textContent = (price * qty).toString();\r\n    }\r\n    document.querySelectorAll('input[name=\"snack_set\"]').forEach(r => r.addEventListener('change', updateTotal));\r\n    qtyEl.addEventListener('input', updateTotal);\r\n    window.addEventListener('load', updateTotal);\r\n\r\n    \/\/ ======= Submit \u2192 \u0e42\u0e2b\u0e21\u0e14 Review =======\r\n    form.addEventListener('submit', (e)=>{\r\n      e.preventDefault();\r\n      const fd = new FormData(form);\r\n      const chosen = document.querySelector('input[name=\"snack_set\"]:checked');\r\n      if(!chosen){ alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07'); return; }\r\n\r\n      const price = parseInt(chosen.dataset.price, 10);\r\n      const qty = parseInt(fd.get('quantity'), 10);\r\n      const total = price * qty;\r\n\r\n      const snackName = chosen.value;\r\n      const imgEl = chosen.closest('.snack-item').querySelector('.thumb');\r\n      const imgSrc = imgEl ? imgEl.getAttribute('src') : '';\r\n\r\n      reviewBox.innerHTML = `\r\n        <div class=\"review-row\"><div><b>\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e08\u0e2d\u0e07<\/b><\/div><div>${fd.get('name')}<\/div><\/div>\r\n        <div class=\"review-row\"><div><b>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/b><\/div><div>${fd.get('phone')}<\/div><\/div>\r\n        <div class=\"review-row\"><div><b>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/b><\/div><div>${fd.get('date')}<\/div><\/div>\r\n        <div class=\"review-row\"><div><b>\u0e40\u0e27\u0e25\u0e32<\/b><\/div><div>${fd.get('time')}<\/div><\/div>\r\n        <div class=\"review-row\">\r\n          <div><b>\u0e40\u0e0b\u0e47\u0e15\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01<\/b><\/div>\r\n          <div>\u0e40\u0e0b\u0e47\u0e15 ${snackName} (\u0e23\u0e32\u0e04\u0e32 ${price} \u0e1a\u0e32\u0e17\/\u0e40\u0e0b\u0e47\u0e15)<\/div>\r\n        <\/div>\r\n        <div class=\"review-row\"><div><b>\u0e08\u0e33\u0e19\u0e27\u0e19<\/b><\/div><div>${qty} \u0e40\u0e0b\u0e47\u0e15<\/div><\/div>\r\n        <div class=\"review-row\">\r\n          <div><b>\u0e23\u0e39\u0e1b\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07<\/b><\/div>\r\n          <div><img decoding=\"async\" src=\"${imgSrc}\" alt=\"preview\" style=\"width:120px;height:120px;border-radius:12px;object-fit:cover;border:1px solid #eee;\"><\/div>\r\n        <\/div>\r\n        <div class=\"review-row\"><div><b>\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21<\/b><\/div><div><span class=\"total\">${total} \u0e1a\u0e32\u0e17<\/span><\/div><\/div>\r\n      `;\r\n\r\n      form.style.display = 'none';\r\n      reviewContainer.style.display = 'block';\r\n      window.scrollTo({ top: 0, behavior: 'smooth' });\r\n    });\r\n\r\n    \/\/ ======= \u0e41\u0e01\u0e49\u0e44\u0e02 \u2192 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e1f\u0e2d\u0e23\u0e4c\u0e21 =======\r\n    btnEdit.addEventListener('click', ()=>{\r\n      reviewContainer.style.display = 'none';\r\n      form.style.display = 'block';\r\n      window.scrollTo({ top: 0, behavior: 'smooth' });\r\n    });\r\n\r\n    \/\/ ======= \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19 \u2192 \u0e2a\u0e48\u0e07\u0e40\u0e02\u0e49\u0e32 Google Sheet =======\r\n  btnConfirm.addEventListener('click', async () => {\r\n  const chosen = document.querySelector('input[name=\"snack_set\"]:checked');\r\n  const fd = new FormData(form);\r\n  const price = parseInt(chosen.dataset.price, 10);\r\n  const qty = parseInt(fd.get('quantity'), 10);\r\n  const total = price * qty;\r\n\r\n  fd.append('snack_set', chosen.value);\r\n  fd.append('unit_price', price);\r\n  fd.append('total', total);\r\n\r\n  const url = \"https:\/\/script.google.com\/macros\/s\/AKfycbxhOU96VHKgyo8FS9qy43YIENvSuoV7KsgGkNgzBZG8t94t4LajwWEa9-ABkt0C6yJ3JA\/exec\";\r\n\r\n  btnConfirm.disabled = true;\r\n  btnConfirm.textContent = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01...';\r\n\r\n  try {\r\n    const res = await fetch(url, {\r\n      method: \"POST\",\r\n      body: fd \/\/ \u2705 \u0e43\u0e0a\u0e49 FormData \u0e41\u0e17\u0e19 JSON\r\n    });\r\n    const text = await res.text();\r\n    if (res.ok && \/SUCCESS\/i.test(text)) {\r\n      alert('\u2705 \u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e41\u0e25\u0e30\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e49\u0e27');\r\n      window.location.reload();\r\n    } else {\r\n      alert('\u26a0\ufe0f \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08: ' + text);\r\n      btnConfirm.disabled = false;\r\n      btnConfirm.textContent = '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19';\r\n    }\r\n  } catch (err) {\r\n    alert('\u274c \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d: ' + err.message);\r\n    btnConfirm.disabled = false;\r\n    btnConfirm.textContent = '\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19';\r\n  }\r\n});\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e2d\u0e07\u0e40\u0e0b\u0e47\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e27\u0e48\u0e32\u0e07 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17 [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5354","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/nya.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5354"}],"version-history":[{"count":121,"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5354\/revisions"}],"predecessor-version":[{"id":5502,"href":"https:\/\/nya.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5354\/revisions\/5502"}],"wp:attachment":[{"href":"https:\/\/nya.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}