<style id="elementor-post-146">.elementor-146 .elementor-element.elementor-element-4aee7b1{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-bed0da5{width:100%;max-width:100%;}.elementor-146 .elementor-element.elementor-element-bed0da5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-146 .elementor-element.elementor-element-e7d17e0{width:100%;}}</style>{"id":146,"date":"2023-02-03T06:05:20","date_gmt":"2023-02-03T06:05:20","guid":{"rendered":"http:\/\/localhost\/sosd2023\/?page_id=146"},"modified":"2026-10-26T10:05:23","modified_gmt":"2026-10-26T03:05:23","slug":"%e0%b9%82%e0%b8%84%e0%b8%a3%e0%b8%87%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%ab%e0%b8%99%e0%b9%88%e0%b8%a7%e0%b8%a2%e0%b8%87%e0%b8%b2%e0%b8%99","status":"publish","type":"page","link":"https:\/\/science.mahidol.ac.th\/sosd\/?page_id=146","title":{"rendered":"\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"146\" class=\"elementor elementor-146\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4aee7b1 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4aee7b1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e7d17e0\" data-id=\"e7d17e0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bed0da5 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"bed0da5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n.dtw{--bg:#eef6fb;--card:rgba(255,255,255,.82);--ink:#12263f;--mute:#5b6b80;--line:#3a82a3;--shadow:0 22px 56px rgba(18,38,63,.14);\r\nposition:relative;left:50%;width:100vw;max-width:100vw;margin-left:-50vw;background:var(--bg);color:var(--ink);font-family:\"Prompt\",\"Noto Sans Thai\",\"Sarabun\",system-ui,sans-serif;overflow:hidden;line-height:1.5}\r\n.dtw,.dtw *{box-sizing:border-box}\r\n.dtw *{margin:0}\r\n.hero{position:relative;background:linear-gradient(135deg,#0e6fa3,#138bc4 55%,#3a43a0);background-size:200% 200%;animation:shift 14s ease-in-out infinite;color:#fff;text-align:center;padding:64px 20px 140px;overflow:hidden}\r\n@keyframes shift{50%{background-position:100% 100%}}\r\n.hero small{display:inline-block;background:rgba(255,255,255,.16);padding:4px 16px;border-radius:99px;letter-spacing:.5px}\r\n.hero h1{font-size:clamp(1.6rem,4.6vw,2.7rem);font-weight:600;margin-top:12px;position:relative}\r\n.blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.09);animation:drift 12s ease-in-out infinite}\r\n.b1{width:240px;height:240px;left:-70px;top:-70px}.b2{width:150px;height:150px;right:7%;top:26px;animation-delay:-4s}.b3{width:90px;height:90px;left:26%;bottom:34px;animation-delay:-8s}.b4{width:60px;height:60px;right:26%;bottom:50px;animation-delay:-2s}\r\n@keyframes drift{50%{transform:translate(24px,18px) scale(1.12)}}\r\n.wave{position:absolute;bottom:-1px;left:0;width:100%;height:70px}.wave path{fill:var(--bg)}\r\n.board{position:relative;max-width:1180px;margin:-80px auto 60px;padding:44px 24px 48px;background:var(--card);backdrop-filter:blur(10px);border-radius:28px;box-shadow:var(--shadow);display:grid;justify-items:center;overflow:hidden}\r\n.board:before{content:\"\";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(58,130,163,.18),transparent 70%);top:-120px;right:-100px;animation:drift 14s ease-in-out infinite}\r\n.node{position:relative;display:flex;align-items:center;gap:12px;color:#fff;font-weight:500;padding:10px 26px 10px 10px;border-radius:99px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 10px 24px color-mix(in srgb,var(--c) 45%,transparent);opacity:0;animation:pop .7s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:var(--d);transition:transform .25s}\r\n.node:hover{transform:translateY(-5px) scale(1.04)}\r\n.node i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);flex:none}\r\n.node svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}\r\n.node:after{content:\"\";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--c);opacity:0;animation:ring 3s ease-out infinite;animation-delay:calc(var(--d) + 1s)}\r\n@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.8)}to{opacity:1;transform:none}}\r\n@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}\r\n.link{position:relative;width:3px;height:44px;background:var(--line);opacity:.55;transform:scaleY(0);transform-origin:top;animation:draw .5s ease forwards;animation-delay:var(--d)}\r\n.link:after{content:\"\";position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--line);box-shadow:0 0 10px var(--line);animation:run 2s linear infinite;animation-delay:calc(var(--d) + .6s);opacity:0}\r\n@keyframes draw{to{transform:scaleY(1)}}\r\n@keyframes run{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}\r\n.branch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;padding-top:34px;justify-items:center}\r\n.branch:before{content:\"\";position:absolute;top:0;left:16.66%;right:16.66%;height:3px;background:var(--line);opacity:.55;transform:scaleX(0);animation:hdraw .7s ease forwards;animation-delay:2.1s}\r\n@keyframes hdraw{to{transform:scaleX(1)}}\r\n.leaf{position:relative;display:grid;justify-items:center}\r\n.leaf:before{content:\"\";position:absolute;left:50%;top:-34px;width:3px;height:34px;margin-left:-1.5px;background:var(--line);opacity:.55;transform:scaleY(0);transform-origin:top;animation:draw .4s ease forwards;animation-delay:2.6s}\r\n.leaf .node{white-space:nowrap;padding-right:30px}\r\n.note{margin-top:34px;color:var(--mute);font-size:.9rem;text-align:center;opacity:0;animation:pop .8s ease forwards;animation-delay:3.2s}\r\n@media(max-width:1100px){.branch{grid-template-columns:1fr;gap:34px;padding-top:0}.branch:before,.leaf:first-child:before{display:none}}\r\n@media(max-width:760px){.board{margin:-80px 14px 40px;padding:34px 16px}.branch{grid-template-columns:1fr;gap:34px;padding-top:0}.branch:before{display:none}.leaf:first-child:before{display:none}.leaf .node{font-size:.85rem;padding-right:20px;gap:10px}.link{height:34px}.leaf:first-child{margin-top:0}}\r\n@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.node,.note{opacity:1}.link,.branch:before,.leaf:before{transform:none}}\r\nhtml,body{overflow-x:hidden}\r\n<\/style>\r\n<div class=\"dtw\">\r\n<svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\r\n<symbol id=\"dt-p\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7\"\/><\/symbol>\r\n<symbol id=\"dt-m\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\"\/><path d=\"M8 20h8M12 16v4\"\/><\/symbol>\r\n<symbol id=\"dt-c\" viewBox=\"0 0 24 24\"><path d=\"M9 7l-5 5 5 5M15 7l5 5-5 5\"\/><\/symbol>\r\n<symbol id=\"dt-v\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"6\" width=\"13\" height=\"12\" rx=\"2\"\/><path d=\"M16 10l5-3v10l-5-3z\"\/><\/symbol>\r\n<\/svg>\r\n<header class=\"hero\">\r\n<div class=\"blob b1\"><\/div><div class=\"blob b2\"><\/div><div class=\"blob b3\"><\/div><div class=\"blob b4\"><\/div>\r\n<small>\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/small>\r\n<h1>\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u201c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u201d<\/h1>\r\n<svg class=\"wave\" viewBox=\"0 0 1440 70\" preserveAspectRatio=\"none\"><path d=\"M0 40C240 80 480 0 720 30s480 50 720 10V70H0Z\"\/><\/svg>\r\n<\/header>\r\n<main class=\"board\">\r\n<div class=\"node\" style=\"--c:#3a43a0;--d:.2s\"><i><svg><use href=\"#dt-p\"\/><\/svg><\/i>\u0e04\u0e13\u0e1a\u0e14\u0e35\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/div>\r\n<div class=\"link\" style=\"--d:.7s\"><\/div>\r\n<div class=\"node\" style=\"--c:#a3843d;--d:1s\"><i><svg><use href=\"#dt-p\"\/><\/svg><\/i>\u0e23\u0e2d\u0e07\u0e04\u0e13\u0e1a\u0e14\u0e35\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/div>\r\n<div class=\"link\" style=\"--d:1.4s\"><\/div>\r\n<div class=\"node\" style=\"--c:#3aa563;--d:1.7s\"><i><svg><use href=\"#dt-p\"\/><\/svg><\/i>\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25<\/div>\r\n<div class=\"link\" style=\"--d:2.1s\"><\/div>\r\n<div class=\"branch\">\r\n<div class=\"leaf\"><div class=\"node\" style=\"--c:#a3693d;--d:2.9s\"><i><svg><use href=\"#dt-m\"\/><\/svg><\/i>\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23<\/div><\/div>\r\n<div class=\"leaf\"><div class=\"node\" style=\"--c:#3a82a3;--d:3.05s\"><i><svg><use href=\"#dt-c\"\/><\/svg><\/i>\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c<\/div><\/div>\r\n<div class=\"leaf\"><div class=\"node\" style=\"--c:#a33a5e;--d:3.2s\"><i><svg><use href=\"#dt-v\"\/><\/svg><\/i>\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e39\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/div><\/div>\r\n<\/div>\r\n<\/main>\r\n<\/div>\r\n\t\t\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<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u201c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u201d \u0e04\u0e13\u0e1a\u0e14\u0e35\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e23\u0e2d\u0e07\u0e04\u0e13\u0e1a\u0e14\u0e35\u0e04\u0e13\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e42\u0e2a\u0e15\u0e17\u0e31\u0e28\u0e19\u0e39\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":27,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=146"}],"version-history":[{"count":30,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":7633,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions\/7633"}],"up":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/27"}],"wp:attachment":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}