\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8;\n }\n .map-container {\n position: relative;\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n .map-image {\n width: 100%;\n height: auto;\n display: block;\n }\n .building-marker {\n position: absolute;\n background-color: #3b82f6;\n color: white;\n font-weight: bold;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 2px solid #fff;\n transition: transform 0.2s, background-color 0.2s;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n }\n .building-marker:hover {\n transform: scale(1.1);\n background-color: #2563eb;\n }\n .modal {\n display: none;\n position: fixed;\n z-index: 100;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(5px);\n justify-content: center;\n align-items: center;\n }\n .modal-content {\n background-color: #ffffff;\n margin: 15% auto;\n padding: 24px;\n border-radius: 12px;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);\n max-width: 600px;\n transform: scale(0.95);\n opacity: 0;\n animation: fadeInScale 0.3s forwards cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n @keyframes fadeInScale {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n .close-button {\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n }\n .close-button:hover,\n .close-button:focus {\n color: #333;\n text-decoration: none;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body class=\"p-8\">\n\n <div class=\"container mx-auto p-4 md:p-8 bg-white rounded-xl shadow-lg\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-center text-gray-800 mb-6\">\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c<\/h1>\n <p class=\"text-center text-gray-600 mb-8\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e19\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e2d\u0e07\u0e2d\u0e32\u0e04\u0e32\u0e23<\/p>\n\n <div class=\"map-container\" id=\"map-container\">\n \n <img src=\"https:\/\/img2.pic.in.th\/pic\/Screenshot-2025-08-04-221117.png\" alt=\"\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c\" class=\"map-image\" id=\"map-image\">\n\n \n <button class=\"building-marker\" data-building=\"1\" style=\"top:50%; left: 25%;\">1<\/button>\n <button class=\"building-marker\" data-building=\"2\" style=\"top: 45%; left: 35%;\">2<\/button>\n <button class=\"building-marker\" data-building=\"3\" style=\"top: 20%; left: 35%;\">3<\/button>\n <button class=\"building-marker\" data-building=\"4\" style=\"top: 45%; left: 70%;\">4<\/button>\n <button class=\"building-marker\" data-building=\"5\" style=\"top: 15%; left: 45%;\">5<\/button>\n <button class=\"building-marker\" data-building=\"6\" style=\"top: 2%; left: 80%;\">6<\/button>\n <button class=\"building-marker\" data-building=\"7\" style=\"top: 60%; left: 15%;\">7<\/button>\n <button class=\"building-marker\" data-building=\"8\" style=\"top: 70%; left: 45%;\">8<\/button>\n <button class=\"building-marker\" data-building=\"9\" style=\"top: 45%; left: 22%;\">9<\/button>\n <button class=\"building-marker\" data-building=\"10\" style=\"top: 35%; left: 95%;\">10<\/button>\n <\/div>\n \n <div class=\"mt-12\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4 text-center\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2d\u0e32\u0e04\u0e32\u0e23<\/h2>\n <div id=\"building-cards-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"building-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-button\">×<\/span>\n <h2 id=\"modal-title\" class=\"text-2xl font-bold text-gray-800 mb-4\"><\/h2>\n \n <img id=\"modal-image\" class=\"w-full h-auto rounded-lg mt-4\" style=\"display: none;\" onerror=\"this.style.display='none'\" \/>\n <p id=\"modal-description\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for each building, including a new image property\n const buildingData = {\n 1: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 1: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1c\u0e19\u0e01\u0e0a\u0e48\u0e32\u0e07\u0e01\u0e25\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e43\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0360-1024x683.jpg\"\n },\n 2: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 2: \u0e42\u0e23\u0e07\u0e1d\u0e36\u0e01\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e0a\u0e48\u0e32\u0e07\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1d\u0e36\u0e01\u0e1d\u0e19\u0e17\u0e31\u0e01\u0e29\u0e30\u0e14\u0e49\u0e32\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0362-1-1024x683.jpg\"\n },\n 3: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 3: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e22\u0e19\u0e15\u0e4c\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e22\u0e19\u0e15\u0e4c\",\n image: \"https:\/\/img5.pic.in.th\/file\/secure-sv1\/IMG_0363-1024x683.jpg\"\n },\n 4: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 4: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\",\n description: \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1d\u0e48\u0e32\u0e22\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0364-1024x683.jpg\"\n },\n 5: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 5: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21\u0e2a\u0e32\u0e21\u0e31\u0e0d\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21\u0e2a\u0e32\u0e21\u0e31\u0e0d\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0355-1-1024x683.jpg\"\n },\n 6: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 6: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1c\u0e19\u0e01\u0e27\u0e34\u0e0a\u0e32\",\n description: \"\u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 1 \u0e0a\u0e48\u0e32\u0e07\u0e44\u0e1f\u0e1f\u0e49\u0e32\u0e01\u0e33\u0e25\u0e31\u0e07 \u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 2 \u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 3 \u0e41\u0e1c\u0e19\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e21\u0e04\u0e04\u0e32\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c\",\n image: \"https:\/\/img5.pic.in.th\/file\/secure-sv1\/DJI_0218-1024x576.jpg\"\n },\n 7: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 7: \u0e42\u0e23\u0e07\u0e08\u0e2d\u0e14\u0e23\u0e16\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e08\u0e2d\u0e14\u0e23\u0e16\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\"\n },\n 8: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 8: \u0e42\u0e14\u0e21\",\n description: \"\u0e42\u0e14\u0e21\u0e40\u0e2d\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e02\u0e2d\u0e07\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\"\n },\n 9: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 9: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e34\u0e18\u0e35\u0e15\u0e48\u0e32\u0e07\u0e46\"\n },\n 10: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 10: \u0e42\u0e23\u0e07\u0e2d\u0e32\u0e2b\u0e32\u0e23\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e30\u0e17\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\"\n }\n };\n\n const modal = document.getElementById('building-modal');\n const closeButton = document.querySelector('.close-button');\n const modalTitle = document.getElementById('modal-title');\n const modalDescription = document.getElementById('modal-description');\n const modalImage = document.getElementById('modal-image');\n const buildingCardsContainer = document.getElementById('building-cards-container');\n\n \/\/ Function to create and append building cards\n function createBuildingCards() {\n for (const id in buildingData) {\n const data = buildingData[id];\n const card = document.createElement('div');\n card.className = \"bg-white p-6 rounded-xl shadow-md border border-gray-200 transition-transform duration-200 hover:scale-105 cursor-pointer\";\n card.innerHTML = `\n <div class=\"flex items-center mb-2\">\n <span class=\"bg-blue-500 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4\">${id}<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">${data.title}<\/h3>\n <\/div>\n <p class=\"text-gray-600\">${data.description}<\/p>\n `;\n card.addEventListener('click', () => {\n modalTitle.textContent = data.title;\n modalDescription.textContent = data.description;\n \n if (data.image) {\n modalImage.src = data.image;\n modalImage.style.display = 'block';\n } else {\n modalImage.style.display = 'none';\n }\n\n modal.style.display = 'flex';\n });\n buildingCardsContainer.appendChild(card);\n }\n }\n\n \/\/ Initialize cards when the page loads\n createBuildingCards();\n\n \/\/ Get all building markers for the map\n const markers = document.querySelectorAll('.building-marker');\n\n markers.forEach(marker => {\n marker.addEventListener('click', () => {\n const buildingId = marker.getAttribute('data-building');\n const data = buildingData[buildingId];\n\n if (data) {\n modalTitle.textContent = data.title;\n modalDescription.textContent = data.description;\n \n if (data.image) {\n modalImage.src = data.image;\n modalImage.style.display = 'block';\n } else {\n modalImage.style.display = 'none';\n }\n\n modal.style.display = 'flex';\n }\n });\n });\n\n \/\/ Close the modal when the close button is clicked\n closeButton.addEventListener('click', () => {\n modal.style.display = 'none';\n });\n\n \/\/ Close the modal when the user clicks anywhere outside of the modal content\n window.addEventListener('click', (event) => {\n if (event.target === modal) {\n modal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<div class=\"pvc_clear\"><\/div><p class=\"pvc_stats all \" data-element-id=\"5211\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> 2,751 total views, 2 views today<\/p><div class=\"pvc_clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\u0e40\u0e21\u0e37\u0e48\u0e2d 11<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"5211\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> 2,751 total views, 2 views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"spay_email":""},"_links":{"self":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211"}],"collection":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5211"}],"version-history":[{"count":11,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211\/revisions"}],"predecessor-version":[{"id":9234,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211\/revisions\/9234"}],"wp:attachment":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5211,"date":"2020-10-26T09:27:53","date_gmt":"2020-10-26T09:27:53","guid":{"rendered":"http:\/\/bamnet.ac.th\/bm\/?page_id=5211"},"modified":"2025-08-04T22:51:07","modified_gmt":"2025-08-04T15:51:07","slug":"%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1%e0%b8%b9%e0%b8%a5%e0%b8%ad%e0%b8%b2%e0%b8%84%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%96%e0%b8%b2%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88-2","status":"publish","type":"page","link":"https:\/\/bamnet.ac.th\/?page_id=5211","title":{"rendered":"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48"},"content":{"rendered":"\n

\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\u0e40\u0e21\u0e37\u0e48\u0e2d 11 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2567<\/p>\n\n\n\n

\n\n\n\n

\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e17\u0e35\u0e48\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/strong>
80 \u0e44\u0e23\u0e48 \u2013 \u0e07\u0e32\u0e19 \u2013 \u0e15\u0e32\u0e23\u0e32\u0e07\u0e27\u0e32\u0e21\u0e35\u0e2d\u0e32\u0e04\u0e32\u0e23 \u0e23\u0e27\u0e21 9 \u0e2b\u0e25\u0e31\u0e07 \u0e21\u0e35\u0e2b\u0e49\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19 60 \u0e2b\u0e49\u0e2d\u0e07 \u0e44\u0e14\u0e49\u0e41\u0e01\u0e48
1. \u0e42\u0e23\u0e07\u0e1d\u0e36\u0e01\u0e07\u0e32\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e01\u0e25\u0e42\u0e23\u0e07\u0e07\u0e32\u0e19 \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 4 \u0e2b\u0e49\u0e2d\u0e07
2. \u0e42\u0e23\u0e07\u0e1d\u0e36\u0e01\u0e07\u0e32\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 4 \u0e2b\u0e49\u0e2d\u0e07
3. \u0e42\u0e23\u0e07\u0e1d\u0e36\u0e01\u0e07\u0e32\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e22\u0e19\u0e15\u0e4c \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 7 \u0e2b\u0e49\u0e2d\u0e07
4. \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e14\u0e35\u0e48\u0e22\u0e27 \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 5 \u0e2b\u0e49\u0e2d\u0e07
5. \u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 1 \u0e2b\u0e49\u0e2d\u0e07
6. \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 8 \u0e2b\u0e49\u0e2d\u0e07
7. \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23 \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 20 \u0e2b\u0e49\u0e2d\u0e07
8. \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e48\u0e21\u0e40\u0e1e\u0e32\u0e30 \u0e08\u0e33\u0e19\u0e27\u0e19 1 \u0e2b\u0e25\u0e31\u0e07 10 \u0e2b\u0e49\u0e2d\u0e07
9. \u0e23\u0e49\u0e32\u0e19\u0e01\u0e32\u0e41\u0e1f\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e48\u0e21\u0e40\u0e1e\u0e32\u0e30 1 \u0e2b\u0e25\u0e31\u0e07 1 \u0e2b\u0e49\u0e2d\u0e07<\/p>\n\n\n\n\n\n\n \n \n \u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8;\n }\n .map-container {\n position: relative;\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n .map-image {\n width: 100%;\n height: auto;\n display: block;\n }\n .building-marker {\n position: absolute;\n background-color: #3b82f6;\n color: white;\n font-weight: bold;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 2px solid #fff;\n transition: transform 0.2s, background-color 0.2s;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n }\n .building-marker:hover {\n transform: scale(1.1);\n background-color: #2563eb;\n }\n .modal {\n display: none;\n position: fixed;\n z-index: 100;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(5px);\n justify-content: center;\n align-items: center;\n }\n .modal-content {\n background-color: #ffffff;\n margin: 15% auto;\n padding: 24px;\n border-radius: 12px;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);\n max-width: 600px;\n transform: scale(0.95);\n opacity: 0;\n animation: fadeInScale 0.3s forwards cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n @keyframes fadeInScale {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n .close-button {\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n }\n .close-button:hover,\n .close-button:focus {\n color: #333;\n text-decoration: none;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body class=\"p-8\">\n\n <div class=\"container mx-auto p-4 md:p-8 bg-white rounded-xl shadow-lg\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-center text-gray-800 mb-6\">\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c<\/h1>\n <p class=\"text-center text-gray-600 mb-8\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e19\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e2d\u0e07\u0e2d\u0e32\u0e04\u0e32\u0e23<\/p>\n\n <div class=\"map-container\" id=\"map-container\">\n \n <img src=\"https:\/\/img2.pic.in.th\/pic\/Screenshot-2025-08-04-221117.png\" alt=\"\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e33\u0e40\u0e2b\u0e19\u0e47\u0e08\u0e13\u0e23\u0e07\u0e04\u0e4c\" class=\"map-image\" id=\"map-image\">\n\n \n <button class=\"building-marker\" data-building=\"1\" style=\"top:50%; left: 25%;\">1<\/button>\n <button class=\"building-marker\" data-building=\"2\" style=\"top: 45%; left: 35%;\">2<\/button>\n <button class=\"building-marker\" data-building=\"3\" style=\"top: 20%; left: 35%;\">3<\/button>\n <button class=\"building-marker\" data-building=\"4\" style=\"top: 45%; left: 70%;\">4<\/button>\n <button class=\"building-marker\" data-building=\"5\" style=\"top: 15%; left: 45%;\">5<\/button>\n <button class=\"building-marker\" data-building=\"6\" style=\"top: 2%; left: 80%;\">6<\/button>\n <button class=\"building-marker\" data-building=\"7\" style=\"top: 60%; left: 15%;\">7<\/button>\n <button class=\"building-marker\" data-building=\"8\" style=\"top: 70%; left: 45%;\">8<\/button>\n <button class=\"building-marker\" data-building=\"9\" style=\"top: 45%; left: 22%;\">9<\/button>\n <button class=\"building-marker\" data-building=\"10\" style=\"top: 35%; left: 95%;\">10<\/button>\n <\/div>\n \n <div class=\"mt-12\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4 text-center\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2d\u0e32\u0e04\u0e32\u0e23<\/h2>\n <div id=\"building-cards-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"building-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-button\">×<\/span>\n <h2 id=\"modal-title\" class=\"text-2xl font-bold text-gray-800 mb-4\"><\/h2>\n \n <img id=\"modal-image\" class=\"w-full h-auto rounded-lg mt-4\" style=\"display: none;\" onerror=\"this.style.display='none'\" \/>\n <p id=\"modal-description\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for each building, including a new image property\n const buildingData = {\n 1: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 1: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1c\u0e19\u0e01\u0e0a\u0e48\u0e32\u0e07\u0e01\u0e25\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e43\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0360-1024x683.jpg\"\n },\n 2: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 2: \u0e42\u0e23\u0e07\u0e1d\u0e36\u0e01\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e0a\u0e48\u0e32\u0e07\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1d\u0e36\u0e01\u0e1d\u0e19\u0e17\u0e31\u0e01\u0e29\u0e30\u0e14\u0e49\u0e32\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0362-1-1024x683.jpg\"\n },\n 3: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 3: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e22\u0e19\u0e15\u0e4c\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e48\u0e32\u0e07\u0e22\u0e19\u0e15\u0e4c\",\n image: \"https:\/\/img5.pic.in.th\/file\/secure-sv1\/IMG_0363-1024x683.jpg\"\n },\n 4: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 4: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\",\n description: \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1d\u0e48\u0e32\u0e22\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0364-1024x683.jpg\"\n },\n 5: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 5: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21\u0e2a\u0e32\u0e21\u0e31\u0e0d\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21\u0e2a\u0e32\u0e21\u0e31\u0e0d\",\n image: \"https:\/\/img2.pic.in.th\/pic\/IMG_0355-1-1024x683.jpg\"\n },\n 6: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 6: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1c\u0e19\u0e01\u0e27\u0e34\u0e0a\u0e32\",\n description: \"\u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 1 \u0e0a\u0e48\u0e32\u0e07\u0e44\u0e1f\u0e1f\u0e49\u0e32\u0e01\u0e33\u0e25\u0e31\u0e07 \u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 2 \u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e0a\u0e31\u0e49\u0e19\u0e17\u0e35\u0e48 3 \u0e41\u0e1c\u0e19\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e21\u0e04\u0e04\u0e32\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c\",\n image: \"https:\/\/img5.pic.in.th\/file\/secure-sv1\/DJI_0218-1024x576.jpg\"\n },\n 7: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 7: \u0e42\u0e23\u0e07\u0e08\u0e2d\u0e14\u0e23\u0e16\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e08\u0e2d\u0e14\u0e23\u0e16\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\"\n },\n 8: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 8: \u0e42\u0e14\u0e21\",\n description: \"\u0e42\u0e14\u0e21\u0e40\u0e2d\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e02\u0e2d\u0e07\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\"\n },\n 9: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 9: \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\",\n description: \"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e34\u0e18\u0e35\u0e15\u0e48\u0e32\u0e07\u0e46\"\n },\n 10: {\n title: \"\u0e2d\u0e32\u0e04\u0e32\u0e23 10: \u0e42\u0e23\u0e07\u0e2d\u0e32\u0e2b\u0e32\u0e23\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e30\u0e17\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\"\n }\n };\n\n const modal = document.getElementById('building-modal');\n const closeButton = document.querySelector('.close-button');\n const modalTitle = document.getElementById('modal-title');\n const modalDescription = document.getElementById('modal-description');\n const modalImage = document.getElementById('modal-image');\n const buildingCardsContainer = document.getElementById('building-cards-container');\n\n \/\/ Function to create and append building cards\n function createBuildingCards() {\n for (const id in buildingData) {\n const data = buildingData[id];\n const card = document.createElement('div');\n card.className = \"bg-white p-6 rounded-xl shadow-md border border-gray-200 transition-transform duration-200 hover:scale-105 cursor-pointer\";\n card.innerHTML = `\n <div class=\"flex items-center mb-2\">\n <span class=\"bg-blue-500 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4\">${id}<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">${data.title}<\/h3>\n <\/div>\n <p class=\"text-gray-600\">${data.description}<\/p>\n `;\n card.addEventListener('click', () => {\n modalTitle.textContent = data.title;\n modalDescription.textContent = data.description;\n \n if (data.image) {\n modalImage.src = data.image;\n modalImage.style.display = 'block';\n } else {\n modalImage.style.display = 'none';\n }\n\n modal.style.display = 'flex';\n });\n buildingCardsContainer.appendChild(card);\n }\n }\n\n \/\/ Initialize cards when the page loads\n createBuildingCards();\n\n \/\/ Get all building markers for the map\n const markers = document.querySelectorAll('.building-marker');\n\n markers.forEach(marker => {\n marker.addEventListener('click', () => {\n const buildingId = marker.getAttribute('data-building');\n const data = buildingData[buildingId];\n\n if (data) {\n modalTitle.textContent = data.title;\n modalDescription.textContent = data.description;\n \n if (data.image) {\n modalImage.src = data.image;\n modalImage.style.display = 'block';\n } else {\n modalImage.style.display = 'none';\n }\n\n modal.style.display = 'flex';\n }\n });\n });\n\n \/\/ Close the modal when the close button is clicked\n closeButton.addEventListener('click', () => {\n modal.style.display = 'none';\n });\n\n \/\/ Close the modal when the user clicks anywhere outside of the modal content\n window.addEventListener('click', (event) => {\n if (event.target === modal) {\n modal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<div class=\"pvc_clear\"><\/div><p class=\"pvc_stats all \" data-element-id=\"5211\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> 2,751 total views, 2 views today<\/p><div class=\"pvc_clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e17\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\u0e40\u0e21\u0e37\u0e48\u0e2d 11<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"5211\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> 2,751 total views, 2 views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"spay_email":""},"_links":{"self":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211"}],"collection":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5211"}],"version-history":[{"count":11,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211\/revisions"}],"predecessor-version":[{"id":9234,"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/5211\/revisions\/9234"}],"wp:attachment":[{"href":"https:\/\/bamnet.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}