{"id":1431,"date":"2025-12-22T12:58:23","date_gmt":"2025-12-22T05:58:23","guid":{"rendered":"https:\/\/math.msu.ac.th\/?page_id=1431"},"modified":"2025-12-22T13:07:05","modified_gmt":"2025-12-22T06:07:05","slug":"%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1%e0%b8%b9%e0%b8%a5%e0%b8%9e%e0%b8%b7%e0%b9%89%e0%b8%99%e0%b8%90%e0%b8%b2%e0%b8%99","status":"publish","type":"page","link":"https:\/\/math.msu.ac.th\/?page_id=1431","title":{"rendered":"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19"},"content":{"rendered":"<div id=\"tdi_1\" class=\"tdc-zone\"><div class=\"tdc_zone tdi_2  wpb_row td-pb-row\"  >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_2{\r\n                    min-height: 0;\r\n                }\n<\/style><div id=\"tdi_3\" class=\"tdc-row\"><div class=\"vc_row tdi_4  wpb_row td-pb-row\" >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_4,\r\n                .tdi_4 .tdc-columns{\r\n                    min-height: 0;\r\n                }.tdi_4,\r\n\t\t\t\t.tdi_4 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_4 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}\n<\/style><div class=\"vc_column tdi_6  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_6{\r\n                    vertical-align: baseline;\r\n                }.tdi_6 > .wpb_wrapper,\r\n\t\t\t\t.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .vc_row_inner{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\" ><div class=\"wpb_wrapper td_block_wrap vc_raw_html tdi_8 \"><div class=\"td-fix-index\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    .stat-dashboard {\r\n        font-family: 'Kanit', sans-serif;\r\n        background-color: #ffffff;\r\n        padding: 50px 20px;\r\n        max-width: 1000px;\r\n        margin: auto;\r\n    }\r\n\r\n    \/* \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e01\u0e23\u0e30\u0e1e\u0e23\u0e34\u0e1a \u0e02\u0e19\u0e32\u0e14 28px \u0e15\u0e32\u0e21\u0e2a\u0e31\u0e48\u0e07 *\/\r\n    .animated-header {\r\n        font-size: 28px;\r\n        font-weight: 700;\r\n        color: #444;\r\n        text-align: center;\r\n        margin-bottom: 30px;\r\n        animation: smooth-blink 3s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes smooth-blink {\r\n        0%, 100% { opacity: 1; }\r\n        50% { opacity: 0.3; }\r\n    }\r\n\r\n    \/* \u0e40\u0e2a\u0e49\u0e19\u0e04\u0e31\u0e48\u0e19\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2b\u0e23\u0e39 *\/\r\n    .custom-divider {\r\n        display: flex;\r\n        align-items: center;\r\n        margin: 40px 0;\r\n        color: #ddd;\r\n    }\r\n    .custom-divider::before, .custom-divider::after {\r\n        content: \"\";\r\n        flex: 1;\r\n        border-bottom: 1px dashed #ccc;\r\n    }\r\n    .custom-divider i { padding: 0 15px; font-size: 14px; }\r\n\r\n    \/* \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02 *\/\r\n    .stat-row {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 25px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .stat-box-modern {\r\n        background: #fff;\r\n        border-radius: 20px;\r\n        padding: 30px 15px;\r\n        text-align: center;\r\n        border: 1px solid #f0f0f0;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n        transition: all 0.3s ease;\r\n    }\r\n    .stat-box-modern:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }\r\n\r\n    \/* \u0e2a\u0e35\u0e15\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 *\/\r\n    .text-blue { color: #1a73e8; }\r\n    .text-red { color: #d93025; }\r\n    .text-green { color: #1e8e3e; }\r\n\r\n    .stat-box-blue { border-top: 5px solid #1a73e8; }\r\n    .stat-box-red { border-top: 5px solid #d93025; }\r\n    .stat-box-green { border-top: 5px solid #1e8e3e; }\r\n\r\n    .stat-number {\r\n        font-size: 50px;\r\n        font-weight: 700;\r\n        display: block;\r\n        line-height: 1.2;\r\n    }\r\n    .stat-label {\r\n        font-size: 15px;\r\n        color: #666;\r\n        margin-top: 10px;\r\n        display: block;\r\n    }\r\n\r\n    \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c Progress Bar *\/\r\n    .progress-section {\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n    }\r\n    .progress-item { margin-bottom: 20px; }\r\n    .progress-info {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        font-size: 14px;\r\n        margin-bottom: 8px;\r\n        font-weight: 400;\r\n    }\r\n    .progress-bg {\r\n        background: #eee;\r\n        height: 14px;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n    }\r\n    .progress-bar {\r\n        height: 100%;\r\n        background: linear-gradient(90deg, #4285f4, #34a853);\r\n        width: 0%;\r\n        border-radius: 10px;\r\n        transition: width 2.5s cubic-bezier(0.1, 0.5, 0.5, 1);\r\n    }\r\n<\/style>\r\n\r\n<div class=\"stat-dashboard\">\r\n    <div class=\"animated-header\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/div>\r\n    <div class=\"stat-row\">\r\n        <div class=\"stat-box-modern\">\r\n            <span class=\"stat-number text-blue\" data-val=\"2\">0<\/span>\r\n            <span class=\"stat-label\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35<\/span>\r\n        <\/div>\r\n        <div class=\"stat-box-modern\">\r\n            <span class=\"stat-number text-blue\" data-val=\"4\">0<\/span>\r\n            <span class=\"stat-label\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17<\/span>\r\n        <\/div>\r\n        <div class=\"stat-box-modern\">\r\n            <span class=\"stat-number text-blue\" data-val=\"1\">0<\/span>\r\n            <span class=\"stat-label\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"custom-divider\"><i>\u2605<\/i><\/div>\r\n\r\n    <div class=\"animated-header\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e34\u0e2a\u0e34\u0e15<\/div>\r\n    <div class=\"stat-row\">\r\n        <div class=\"stat-box-modern stat-box-blue\">\r\n            <span class=\"stat-number text-blue\" data-val=\"433\">0<\/span>\r\n            <span class=\"stat-label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e34\u0e2a\u0e34\u0e15\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\r\n        <\/div>\r\n        <div class=\"stat-box-modern stat-box-red\">\r\n            <span class=\"stat-number text-red\" data-val=\"409\">0<\/span>\r\n            <span class=\"stat-label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e34\u0e2a\u0e34\u0e15\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35<\/span>\r\n        <\/div>\r\n        <div class=\"stat-box-modern stat-box-green\">\r\n            <span class=\"stat-number text-green\" data-val=\"24\">0<\/span>\r\n            <span class=\"stat-label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e34\u0e2a\u0e34\u0e15\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e28\u0e36\u0e01\u0e29\u0e32<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"custom-divider\"><i>\u2605<\/i><\/div>\r\n\r\n    <div class=\"animated-header\">\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e17\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23<\/div>\r\n    <div class=\"progress-section\">\r\n        <div class=\"progress-item\">\r\n            <div class=\"progress-info\"><span>Assoc. Prof. (9 \u0e17\u0e48\u0e32\u0e19)<\/span><span>27%<\/span><\/div>\r\n            <div class=\"progress-bg\"><div class=\"progress-bar\" style=\"width: 27%;\"><\/div><\/div>\r\n        <\/div>\r\n        <div class=\"progress-item\">\r\n            <div class=\"progress-info\"><span>Asst. Prof. (18 \u0e17\u0e48\u0e32\u0e19)<\/span><span>63%<\/span><\/div>\r\n            <div class=\"progress-bg\"><div class=\"progress-bar\" style=\"width: 63%;\"><\/div><\/div>\r\n        <\/div>\r\n        <div class=\"progress-item\">\r\n            <div class=\"progress-info\"><span>Lecture (3 \u0e17\u0e48\u0e32\u0e19)<\/span><span>10%<\/span><\/div>\r\n            <div class=\"progress-bg\"><div class=\"progress-bar\" style=\"width: 10%;\"><\/div><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e19\u0e31\u0e1a\u0e40\u0e25\u0e02\u0e27\u0e34\u0e48\u0e07\u0e41\u0e1a\u0e1a\u0e19\u0e38\u0e48\u0e21\u0e19\u0e27\u0e25\u0e41\u0e25\u0e30\u0e0a\u0e49\u0e32\u0e25\u0e07\r\n    function runCounter() {\r\n        const counters = document.querySelectorAll('.stat-number');\r\n        counters.forEach(c => {\r\n            const target = +c.getAttribute('data-val');\r\n            let current = 0;\r\n            \/\/ \u0e1b\u0e23\u0e31\u0e1a\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49 (3000 = 3 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35)\r\n            const duration = 3000; \r\n            const stepTime = 50; \r\n            const increment = target \/ (duration \/ stepTime);\r\n\r\n            const timer = setInterval(() => {\r\n                current += increment;\r\n                if (current >= target) {\r\n                    c.innerText = target;\r\n                    clearInterval(timer);\r\n                } else {\r\n                    c.innerText = Math.floor(current);\r\n                }\r\n            }, stepTime);\r\n        });\r\n    }\r\n\r\n    \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e33\u0e07\u0e32\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\u0e2b\u0e19\u0e49\u0e32\r\n    window.onload = runCounter;\r\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1431","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1431"}],"version-history":[{"count":5,"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1431\/revisions"}],"predecessor-version":[{"id":1436,"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1431\/revisions\/1436"}],"wp:attachment":[{"href":"https:\/\/math.msu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}