{"id":30,"date":"2025-08-05T10:25:58","date_gmt":"2025-08-05T03:25:58","guid":{"rendered":"https:\/\/ksd.ac.th\/web\/?page_id=30"},"modified":"2026-08-24T14:15:04","modified_gmt":"2026-08-24T07:15:04","slug":"%e0%b9%81%e0%b8%9c%e0%b8%99%e0%b8%9c%e0%b8%b1%e0%b8%87%e0%b9%82%e0%b8%a3%e0%b8%87%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%99","status":"publish","type":"page","link":"https:\/\/ksd.ac.th\/web\/?page_id=30","title":{"rendered":"\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19"},"content":{"rendered":"\n<meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n  <meta name=\"description\" content=\"\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07 3 \u0e21\u0e34\u0e15\u0e34 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\">\n  <title>\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 | \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n  <style>\n    \/* KSD SCHOOL MAP \u2014 CSS is scoped to #ksd-school-map for safe embedding. *\/\n    #ksd-school-map{--blue:#075bb8;--blue2:#0b80dc;--orange:#f7941d;--ink:#172033;--muted:#64748b;--line:#dce8f5;--paper:#fff;--soft:#f3f8fd;font-family:\"Noto Sans Thai\",\"Leelawadee UI\",Tahoma,sans-serif;color:var(--ink);box-sizing:border-box;background:linear-gradient(145deg,#f7fbff,#eef7ff 52%,#fff8ed);padding:clamp(18px,4vw,54px);border-radius:28px;position:relative;overflow:hidden}\n    #ksd-school-map *{box-sizing:border-box}\n    #ksd-school-map:before,#ksd-school-map:after{content:\"\";position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}\n    #ksd-school-map:before{width:300px;height:300px;right:-120px;top:-150px;background:rgba(247,148,29,.14)}\n    #ksd-school-map:after{width:380px;height:380px;left:-190px;bottom:-230px;background:rgba(11,128,220,.12)}\n    .ksd-map-shell{max-width:1440px;margin:auto;position:relative;z-index:1}\n    .ksd-map-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}\n    .ksd-map-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e7f3ff;color:var(--blue);font-weight:800;border-radius:999px;padding:7px 13px;font-size:14px}\n    .ksd-map-eyebrow:before{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(247,148,29,.16)}\n    .ksd-map-title{margin:10px 0 3px;color:var(--blue);font-size:clamp(28px,4vw,48px);line-height:1.18;letter-spacing:-.4px}\n    .ksd-map-subtitle{margin:0;color:var(--muted);font-size:clamp(15px,2vw,19px)}\n    .ksd-map-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}\n    .ksd-map-btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.88);color:var(--blue);border-radius:14px;padding:11px 15px;font:700 15px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 7px 20px rgba(15,71,126,.08);transition:.18s ease;text-decoration:none}\n    .ksd-map-btn:hover{transform:translateY(-2px);border-color:#9ec8ee;box-shadow:0 11px 25px rgba(15,71,126,.14)}\n    .ksd-map-btn--primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-color:transparent}\n    .ksd-map-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.62fr);gap:22px;align-items:start}\n    .ksd-map-viewer,.ksd-map-panel{background:rgba(255,255,255,.93);border:1px solid rgba(181,210,236,.75);box-shadow:0 18px 50px rgba(30,85,135,.12);border-radius:22px}\n    .ksd-map-viewer{padding:10px;position:relative;overflow:hidden}\n    .ksd-map-image-wrap{position:relative;border-radius:15px;overflow:hidden;background:#fff;line-height:0}\n    .ksd-map-image{display:block;width:100%;height:auto;transition:transform .35s ease;transform-origin:center}\n    .ksd-map-viewer:hover .ksd-map-image{transform:scale(1.012)}\n    .ksd-map-hint{position:absolute;left:18px;bottom:18px;line-height:1.2;background:rgba(7,42,78,.84);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:9px 13px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.14);pointer-events:none}\n    .ksd-hotspot{position:absolute;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.01);cursor:pointer;transform:translate(-50%,-50%)}\n    .ksd-hotspot:focus-visible,.ksd-hotspot:hover{outline:3px solid #fff;box-shadow:0 0 0 7px rgba(247,148,29,.9);background:rgba(247,148,29,.22)}\n    .ksd-hotspot:after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(5px);line-height:1.3;white-space:nowrap;background:#11253b;color:#fff;padding:8px 11px;border-radius:9px;font-size:13px;font-weight:700;opacity:0;visibility:hidden;transition:.16s;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.2)}\n    .ksd-hotspot:hover:after,.ksd-hotspot:focus-visible:after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}\n    .ksd-map-panel{padding:18px;max-height:720px;overflow:auto;scrollbar-width:thin;scrollbar-color:#a9cae7 transparent}\n    .ksd-map-panel-head{position:sticky;top:-18px;z-index:3;background:linear-gradient(#fff 82%,rgba(255,255,255,0));padding:18px 0 15px}\n    .ksd-map-panel h2{font-size:20px;color:var(--blue);margin:0 0 12px}\n    .ksd-map-search{position:relative}\n    .ksd-map-search input{width:100%;height:43px;border:1px solid var(--line);border-radius:13px;padding:0 13px 0 39px;font:500 14px inherit;color:var(--ink);outline:none;background:#f9fcff}\n    .ksd-map-search input:focus{border-color:#76b6ee;box-shadow:0 0 0 4px rgba(11,128,220,.1)}\n    .ksd-map-search span{position:absolute;left:13px;top:10px;font-size:19px;line-height:1}\n    .ksd-place-list{display:grid;gap:9px}\n    .ksd-place{display:flex;gap:11px;align-items:center;width:100%;text-align:left;border:1px solid #e3edf6;background:#fff;border-radius:14px;padding:10px;cursor:pointer;color:var(--ink);font:700 14px\/1.38 inherit;transition:.16s}\n    .ksd-place:hover,.ksd-place:focus-visible,.ksd-place.is-active{background:#edf7ff;border-color:#8ac2f1;transform:translateX(2px);outline:0}\n    .ksd-place-no{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ef1f2d,#c9111e);color:#fff;font:800 14px\/1 inherit;box-shadow:0 5px 12px rgba(209,24,36,.22)}\n    .ksd-map-note{margin:18px 0 0;padding:13px 15px;border-radius:14px;background:#fff8e9;border:1px solid #f8dca9;color:#76501b;font-size:13px;line-height:1.6}\n    .ksd-map-modal{position:fixed;inset:0;z-index:999999;background:rgba(4,18,33,.92);padding:clamp(10px,3vw,30px);display:none;align-items:center;justify-content:center}\n    .ksd-map-modal.is-open{display:flex}\n    .ksd-map-modal img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 25px 80px rgba(0,0,0,.42)}\n    .ksd-map-close{position:absolute;right:18px;top:16px;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;cursor:pointer}\n    .ksd-map-empty{display:none;color:var(--muted);padding:18px 5px;text-align:center;font-size:14px}\n    @media(max-width:980px){.ksd-map-layout{grid-template-columns:1fr}.ksd-map-panel{max-height:none}.ksd-map-hero{align-items:flex-start}.ksd-map-actions{min-width:175px}}\n    @media(max-width:640px){#ksd-school-map{padding:18px 12px;border-radius:18px}.ksd-map-hero{display:block}.ksd-map-actions{margin-top:16px;justify-content:flex-start}.ksd-map-btn{flex:1;justify-content:center}.ksd-map-viewer{padding:6px;border-radius:17px}.ksd-map-hint{display:none}.ksd-hotspot{width:28px;height:28px}.ksd-map-panel{padding:14px}.ksd-map-panel-head{top:-14px;padding-top:14px}.ksd-map-title{font-size:30px}}\n    @media(prefers-reduced-motion:reduce){#ksd-school-map *{scroll-behavior:auto!important;transition:none!important}}\n  <\/style>\n\n\n\n<!-- ===== \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e33\u0e44\u0e1b\u0e1d\u0e31\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c ===== -->\n<section id=\"ksd-school-map\" aria-labelledby=\"ksd-map-title\">\n  <div class=\"ksd-map-shell\">\n    <header class=\"ksd-map-hero\">\n      <div>\n        <span class=\"ksd-map-eyebrow\">BAN KAENGSADAO SCHOOL<\/span>\n        <h1 class=\"ksd-map-title\" id=\"ksd-map-title\">\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/h1>\n        <p class=\"ksd-map-subtitle\">\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1a\u0e1a 3 \u0e21\u0e34\u0e15\u0e34<\/p>\n      <\/div>\n      <div class=\"ksd-map-actions\">\n        <button class=\"ksd-map-btn ksd-map-btn--primary\" type=\"button\" data-map-open=\"\">\u26f6 \u0e14\u0e39\u0e20\u0e32\u0e1e\u0e40\u0e15\u0e47\u0e21\u0e08\u0e2d<\/button>\n        <a class=\"ksd-map-btn\" href=\"https:\/\/ksd.ac.th\/images\/school-map-3d.png\" download=\"\">\u21e9 \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e20\u0e32\u0e1e<\/a>\n      <\/div>\n    <\/header>\n\n    <div class=\"ksd-map-layout\">\n      <div class=\"ksd-map-viewer\">\n        <div class=\"ksd-map-image-wrap\">\n          <img decoding=\"async\" class=\"ksd-map-image\" src=\"https:\/\/ksd.ac.th\/images\/school-map-3d.png\" alt=\"\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07 3 \u0e21\u0e34\u0e15\u0e34 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e41\u0e2a\u0e14\u0e07\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02 1 \u0e16\u0e36\u0e07 13\" loading=\"eager\">\n          <span class=\"ksd-map-hint\">\u0e41\u0e15\u0e30\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e19\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48<\/span>\n          <button class=\"ksd-hotspot\" style=\"left:37.5%;top:22%\" data-no=\"1\" data-name=\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\" aria-label=\"1 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:51.4%;top:15%\" data-no=\"2\" data-name=\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e2d\u0e19.2 - \u0e1b.6\" aria-label=\"2 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e2d\u0e19.2 - \u0e1b.6\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:22%;top:25%\" data-no=\"3\" data-name=\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\" aria-label=\"3 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:40.3%;top:16.5%\" data-no=\"4\" data-name=\"\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e32\u0e22\" aria-label=\"4 \u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e32\u0e22\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:43.8%;top:15.5%\" data-no=\"5\" data-name=\"\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e0d\u0e34\u0e07\" aria-label=\"5 \u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e0d\u0e34\u0e07\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:61.5%;top:11.5%\" data-no=\"6\" data-name=\"\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e04\u0e23\u0e39\" aria-label=\"6 \u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e04\u0e23\u0e39\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:18.8%;top:51%\" data-no=\"7\" data-name=\"\u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\" aria-label=\"7 \u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:6%;top:31%\" data-no=\"8\" data-name=\"\u0e1a\u0e48\u0e2d\u0e19\u0e49\u0e33\" aria-label=\"8 \u0e1a\u0e48\u0e2d\u0e19\u0e49\u0e33\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:55.3%;top:40.3%\" data-no=\"9\" data-name=\"\u0e2a\u0e19\u0e32\u0e21\u0e1f\u0e38\u0e15\u0e1a\u0e2d\u0e25\" aria-label=\"9 \u0e2a\u0e19\u0e32\u0e21\u0e1f\u0e38\u0e15\u0e1a\u0e2d\u0e25\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:72.5%;top:18%\" data-no=\"10\" data-name=\"\u0e42\u0e23\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e19\u0e31\u0e01\u0e01\u0e32\u0e23\u0e20\u0e32\u0e23\u0e42\u0e23\u0e07\" aria-label=\"10 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e19\u0e31\u0e01\u0e01\u0e32\u0e23\u0e20\u0e32\u0e23\u0e42\u0e23\u0e07\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:83.5%;top:31%\" data-no=\"11\" data-name=\"\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\" aria-label=\"11 \u0e41\u0e1b\u0e25\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:11.7%;top:52%\" data-no=\"12\" data-name=\"\u0e42\u0e23\u0e07\u0e01\u0e23\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e14\u0e37\u0e48\u0e21\" aria-label=\"12 \u0e42\u0e23\u0e07\u0e01\u0e23\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e14\u0e37\u0e48\u0e21\"><\/button>\n          <button class=\"ksd-hotspot\" style=\"left:31.3%;top:34.5%\" data-no=\"13\" data-name=\"\u0e42\u0e14\u0e21\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e41\u0e25\u0e30\u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\" aria-label=\"13 \u0e42\u0e14\u0e21\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e41\u0e25\u0e30\u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\"><\/button>\n        <\/div>\n      <\/div>\n\n      <aside class=\"ksd-map-panel\" aria-label=\"\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\">\n        <div class=\"ksd-map-panel-head\">\n          <h2>\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48<\/h2>\n          <label class=\"ksd-map-search\"><span aria-hidden=\"true\">\u2315<\/span><input type=\"search\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48...\" aria-label=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\" data-map-search=\"\"><\/label>\n        <\/div>\n        <div class=\"ksd-place-list\" data-map-list=\"\">\n          <button class=\"ksd-place\" data-no=\"1\"><span class=\"ksd-place-no\">1<\/span><span>\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"2\"><span class=\"ksd-place-no\">2<\/span><span>\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e2d\u0e19.2 &#8211; \u0e1b.6<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"3\"><span class=\"ksd-place-no\">3<\/span><span>\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"4\"><span class=\"ksd-place-no\">4<\/span><span>\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e32\u0e22<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"5\"><span class=\"ksd-place-no\">5<\/span><span>\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e49\u0e27\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2b\u0e0d\u0e34\u0e07<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"6\"><span class=\"ksd-place-no\">6<\/span><span>\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e04\u0e23\u0e39<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"7\"><span class=\"ksd-place-no\">7<\/span><span>\u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"8\"><span class=\"ksd-place-no\">8<\/span><span>\u0e1a\u0e48\u0e2d\u0e19\u0e49\u0e33<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"9\"><span class=\"ksd-place-no\">9<\/span><span>\u0e2a\u0e19\u0e32\u0e21\u0e1f\u0e38\u0e15\u0e1a\u0e2d\u0e25<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"10\"><span class=\"ksd-place-no\">10<\/span><span>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e19\u0e31\u0e01\u0e01\u0e32\u0e23\u0e20\u0e32\u0e23\u0e42\u0e23\u0e07<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"11\"><span class=\"ksd-place-no\">11<\/span><span>\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"12\"><span class=\"ksd-place-no\">12<\/span><span>\u0e42\u0e23\u0e07\u0e01\u0e23\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e14\u0e37\u0e48\u0e21<\/span><\/button>\n          <button class=\"ksd-place\" data-no=\"13\"><span class=\"ksd-place-no\">13<\/span><span>\u0e42\u0e14\u0e21\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e41\u0e25\u0e30\u0e25\u0e32\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e40\u0e19\u0e01\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c<\/span><\/button>\n        <\/div>\n        <div class=\"ksd-map-empty\" data-map-empty=\"\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/div>\n        <p class=\"ksd-map-note\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e08\u0e32\u0e01\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e15\u0e30\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e19\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n      <\/aside>\n    <\/div>\n  <\/div>\n\n  <div class=\"ksd-map-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u0e20\u0e32\u0e1e\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e1a\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e08\u0e2d\" data-map-modal=\"\">\n    <button class=\"ksd-map-close\" type=\"button\" aria-label=\"\u0e1b\u0e34\u0e14\u0e20\u0e32\u0e1e\u0e40\u0e15\u0e47\u0e21\u0e08\u0e2d\" data-map-close=\"\">\u00d7<\/button>\n    <img decoding=\"async\" src=\"https:\/\/ksd.ac.th\/images\/school-map-3d.png\" alt=\"\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07 3 \u0e21\u0e34\u0e15\u0e34 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\">\n  <\/div>\n<\/section>\n<!-- ===== \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e19\u0e33\u0e44\u0e1b\u0e1d\u0e31\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c ===== -->\n\n<script>\n(() => {\n  const root = document.querySelector('#ksd-school-map');\n  if (!root) return;\n  const modal = root.querySelector('[data-map-modal]');\n  const search = root.querySelector('[data-map-search]');\n  const places = [...root.querySelectorAll('.ksd-place')];\n  const hotspots = [...root.querySelectorAll('.ksd-hotspot')];\n  const empty = root.querySelector('[data-map-empty]');\n\n  const activate = no => {\n    places.forEach(p => p.classList.toggle('is-active', p.dataset.no === no));\n    const spot = hotspots.find(h => h.dataset.no === no);\n    if (spot) { spot.focus({preventScroll:true}); setTimeout(() => spot.blur(), 1800); }\n  };\n  places.forEach(p => p.addEventListener('click', () => activate(p.dataset.no)));\n  hotspots.forEach(h => h.addEventListener('click', () => activate(h.dataset.no)));\n\n  search.addEventListener('input', () => {\n    const q = search.value.trim().toLocaleLowerCase('th');\n    let shown = 0;\n    places.forEach(p => {\n      const match = p.textContent.toLocaleLowerCase('th').includes(q);\n      p.hidden = !match; shown += match ? 1 : 0;\n    });\n    empty.style.display = shown ? 'none' : 'block';\n  });\n\n  const open = () => { modal.classList.add('is-open'); document.body.style.overflow = 'hidden'; };\n  const close = () => { modal.classList.remove('is-open'); document.body.style.overflow = ''; };\n  root.querySelector('[data-map-open]').addEventListener('click', open);\n  root.querySelector('[data-map-close]').addEventListener('click', close);\n  modal.addEventListener('click', e => { if (e.target === modal) close(); });\n  document.addEventListener('keydown', e => { if (e.key === 'Escape') close(); });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 | \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 BAN KAENGSADAO S&#8230;<\/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-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":7,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}