{"id":1883,"date":"2025-08-27T15:35:13","date_gmt":"2025-08-27T08:35:13","guid":{"rendered":"https:\/\/sdgs.srru.ac.th\/?page_id=1883"},"modified":"2025-10-20T11:08:08","modified_gmt":"2025-10-20T04:08:08","slug":"%e0%b8%a7%e0%b8%b4%e0%b8%88%e0%b8%b1%e0%b8%a2","status":"publish","type":"page","link":"https:\/\/sdgs.srru.ac.th\/?page_id=1883","title":{"rendered":"\u0e27\u0e34\u0e08\u0e31\u0e22"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Title Section&#8221; _builder_version=&#8221;4.27.4&#8243; background_color=&#8221;#f7f7f7&#8243; background_enable_pattern_style=&#8221;on&#8221; background_pattern_style=&#8221;inverted-chevrons&#8221; background_pattern_color=&#8221;rgba(0,0,0,0.03)&#8221; custom_padding=&#8221;60px||60px||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; header_font=&#8221;|700|||||||&#8221; header_text_align=&#8221;center&#8221; header_font_size=&#8221;42px&#8221; header_line_height=&#8221;1.3em&#8221; header_font_size_tablet=&#8221;36px&#8221; header_font_size_phone=&#8221;30px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>\u0e04\u0e25\u0e31\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Content Section&#8221; _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;Shortcode for Archive&#8221; _builder_version=&#8221;4.27.4&#8243; global_colors_info=&#8221;{}&#8221;]            <style>\r\n                * {\r\n                    box-sizing: border-box;\r\n                }\r\n\r\n                .research-archive-container {\r\n                    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n                }\r\n\r\n                .research-archive-header {\r\n                    display: flex;\r\n                    justify-content: space-between;\r\n                    align-items: center;\r\n                    margin-bottom: 2.5em;\r\n                    flex-wrap: wrap;\r\n                    gap: 20px;\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 50%, #A855C9 100%);\r\n                    padding: 35px 40px;\r\n                    border-radius: 16px;\r\n                    box-shadow: 0 10px 35px rgba(91, 124, 230, 0.35);\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                }\r\n\r\n                .research-archive-header::before {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: -50%;\r\n                    right: -50%;\r\n                    width: 300px;\r\n                    height: 300px;\r\n                    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\r\n                    border-radius: 50%;\r\n                }\r\n\r\n                .research-archive-header::after {\r\n                    content: '';\r\n                    position: absolute;\r\n                    bottom: -30%;\r\n                    left: -20%;\r\n                    width: 250px;\r\n                    height: 250px;\r\n                    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);\r\n                    border-radius: 50%;\r\n                }\r\n\r\n                .research-title-icon {\r\n                    font-size: 2em;\r\n                    vertical-align: middle;\r\n                    margin-right: 0.3em;\r\n                    animation: pulse 2s ease-in-out infinite;\r\n                }\r\n\r\n                @keyframes pulse {\r\n\r\n                    0%,\r\n                    100% {\r\n                        transform: scale(1);\r\n                    }\r\n\r\n                    50% {\r\n                        transform: scale(1.1);\r\n                    }\r\n                }\r\n\r\n                .page-title {\r\n                    font-size: 2em;\r\n                    font-weight: 700;\r\n                    color: white;\r\n                    margin: 0;\r\n                    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);\r\n                    position: relative;\r\n                    z-index: 2;\r\n                }\r\n\r\n                .filter-buttons {\r\n                    display: flex;\r\n                    gap: 10px;\r\n                    flex-wrap: wrap;\r\n                    position: relative;\r\n                    z-index: 2;\r\n                }\r\n\r\n                .filter-buttons a,\r\n                .filter-tabs a {\r\n                    display: inline-block;\r\n                    padding: 12px 24px;\r\n                    background: rgba(255, 255, 255, 0.95);\r\n                    color: #5B7CE6;\r\n                    text-decoration: none;\r\n                    border-radius: 30px;\r\n                    font-weight: 600;\r\n                    transition: all 0.3s ease;\r\n                    border: 2px solid transparent;\r\n                    backdrop-filter: blur(10px);\r\n                    font-size: 0.95em;\r\n                }\r\n\r\n                .filter-buttons a:hover,\r\n                .filter-tabs a:hover {\r\n                    background: white;\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 6px 20px rgba(91, 124, 230, 0.3);\r\n                }\r\n\r\n                .filter-buttons a.active,\r\n                .filter-tabs a.active {\r\n                    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);\r\n                    color: white;\r\n                    border-color: rgba(255, 255, 255, 0.3);\r\n                    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.4);\r\n                }\r\n\r\n                .filter-tabs {\r\n                    margin-bottom: 2em;\r\n                    padding: 20px 25px;\r\n                    background: linear-gradient(135deg, #F0F3FF 0%, #E8EDFF 100%);\r\n                    border-radius: 12px;\r\n                    display: flex;\r\n                    gap: 12px;\r\n                    flex-wrap: wrap;\r\n                    box-shadow: 0 4px 15px rgba(91, 124, 230, 0.12);\r\n                    border: 2px solid rgba(91, 124, 230, 0.1);\r\n                }\r\n\r\n                .research-search-form {\r\n                    margin-bottom: 2em;\r\n                    position: relative;\r\n                }\r\n\r\n                .research-search-form input[type=text] {\r\n                    width: 100%;\r\n                    max-width: 600px;\r\n                    padding: 15px 20px;\r\n                    border: 3px solid #e0e0e0;\r\n                    border-radius: 50px;\r\n                    font-size: 1em;\r\n                    transition: all 0.3s ease;\r\n                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\r\n                }\r\n\r\n                .research-search-form input[type=text]:focus {\r\n                    outline: none;\r\n                    border-color: #5B7CE6;\r\n                    box-shadow: 0 6px 25px rgba(91, 124, 230, 0.3);\r\n                    transform: translateY(-2px);\r\n                }\r\n\r\n                .research-search-form input[type=submit] {\r\n                    padding: 15px 40px;\r\n                    border: none;\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 100%);\r\n                    color: white;\r\n                    border-radius: 50px;\r\n                    cursor: pointer;\r\n                    font-weight: 600;\r\n                    font-size: 1em;\r\n                    transition: all 0.3s ease;\r\n                    box-shadow: 0 4px 20px rgba(91, 124, 230, 0.35);\r\n                    margin-left: 10px;\r\n                }\r\n\r\n                .research-search-form input[type=submit]:hover {\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 8px 30px rgba(91, 124, 230, 0.45);\r\n                    background: linear-gradient(135deg, #4A6AD5 0%, #6A58B6 100%);\r\n                }\r\n\r\n                .research-table {\r\n                    width: 100%;\r\n                    border-collapse: separate;\r\n                    border-spacing: 0;\r\n                    font-size: 0.95em;\r\n                    background: white;\r\n                    border-radius: 12px;\r\n                    overflow: hidden;\r\n                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n                }\r\n\r\n                .research-table th,\r\n                .research-table td {\r\n                    padding: 16px 12px;\r\n                    text-align: left;\r\n                }\r\n\r\n                .research-table th {\r\n                    background: linear-gradient(135deg, #01b847ff 0%, #02d854ff 50%, #02d854ff 100%);\r\n                    color: #ffffffff;\r\n                    font-weight: 700;\r\n                    text-align: center;\r\n                    font-size: 1.05em;\r\n                    letter-spacing: 0.8px;\r\n                    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);\r\n                    text-transform: uppercase;\r\n                }\r\n\r\n                .research-table tbody tr {\r\n                    transition: all 0.3s ease;\r\n                    border-bottom: 1px solid #f0f0f0;\r\n                }\r\n\r\n                .research-table tbody tr:hover {\r\n                    background: linear-gradient(90deg, #f8f9ff 0%, #fff 100%);\r\n                    transform: scale(1.01);\r\n                    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.15);\r\n                }\r\n\r\n                .research-table td:first-child {\r\n                    width: 5%;\r\n                    text-align: center;\r\n                    font-weight: 600;\r\n                    color: #667eea;\r\n                }\r\n\r\n                .research-table td:nth-child(2) {\r\n                    width: 65%;\r\n                }\r\n\r\n                .research-table td:nth-child(2) a {\r\n                    color: #2c3e50;\r\n                    text-decoration: none;\r\n                    font-weight: 500;\r\n                    transition: all 0.3s;\r\n                }\r\n\r\n                .research-table td:nth-child(2) a:hover {\r\n                    color: #667eea;\r\n                    padding-left: 5px;\r\n                }\r\n\r\n                .research-table td:nth-child(3),\r\n                .research-table td:nth-child(4) {\r\n                    width: 15%;\r\n                    text-align: center;\r\n                    color: #666;\r\n                }\r\n\r\n                .research-results-container {\r\n                    position: relative;\r\n                    margin-bottom: 2em;\r\n                }\r\n\r\n                .research-results-container.loading::after {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: 0;\r\n                    right: 0;\r\n                    bottom: 0;\r\n                    background: rgba(255, 255, 255, 0.8);\r\n                    z-index: 10;\r\n                }\r\n\r\n                .loading-overlay {\r\n                    text-align: center;\r\n                    padding: 3em;\r\n                    font-weight: 600;\r\n                    color: #5B7CE6;\r\n                    font-size: 1.1em;\r\n                }\r\n\r\n                .research-controls {\r\n                    display: flex;\r\n                    justify-content: space-between;\r\n                    align-items: center;\r\n                    margin-top: 2em;\r\n                    flex-wrap: wrap;\r\n                    gap: 20px;\r\n                    padding: 25px 30px;\r\n                    background: linear-gradient(135deg, #F0F3FF 0%, #E8EDFF 100%);\r\n                    border-radius: 12px;\r\n                    box-shadow: 0 4px 15px rgba(91, 124, 230, 0.12);\r\n                }\r\n\r\n                .research-per-page-selector label {\r\n                    margin-right: 10px;\r\n                    font-weight: 600;\r\n                    color: #555;\r\n                }\r\n\r\n                .research-per-page-selector select {\r\n                    padding: 8px 15px;\r\n                    border: 2px solid #ddd;\r\n                    border-radius: 8px;\r\n                    background: white;\r\n                    font-size: 0.95em;\r\n                    cursor: pointer;\r\n                    transition: all 0.3s;\r\n                }\r\n\r\n                .research-per-page-selector select:hover {\r\n                    border-color: #5B7CE6;\r\n                }\r\n\r\n                .research-pagination .page-numbers {\r\n                    display: inline-block;\r\n                    padding: 10px 16px;\r\n                    margin: 0 3px;\r\n                    text-decoration: none;\r\n                    border: 2px solid #ddd;\r\n                    color: #555;\r\n                    border-radius: 8px;\r\n                    font-weight: 600;\r\n                    transition: all 0.3s ease;\r\n                    background: white;\r\n                }\r\n\r\n                .research-pagination .page-numbers.current,\r\n                .research-pagination .page-numbers:hover {\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 100%);\r\n                    color: white;\r\n                    border-color: #5B7CE6;\r\n                    transform: translateY(-2px);\r\n                    box-shadow: 0 5px 15px rgba(91, 124, 230, 0.35);\r\n                }\r\n\r\n                .research-pagination ul {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0;\r\n                    display: flex;\r\n                    flex-wrap: wrap;\r\n                    gap: 5px;\r\n                }\r\n\r\n                .research-pagination li {\r\n                    display: inline;\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    .research-archive-header {\r\n                        flex-direction: column;\r\n                        text-align: center;\r\n                    }\r\n\r\n                    .filter-buttons,\r\n                    .filter-tabs {\r\n                        justify-content: center;\r\n                    }\r\n\r\n                    .research-search-form input[type=text] {\r\n                        max-width: 100%;\r\n                    }\r\n\r\n                    .research-search-form input[type=submit] {\r\n                        margin: 10px 0 0 0;\r\n                    }\r\n                }\r\n            <\/style>\r\n\r\n            <div class=\"research-archive-container\" id=\"research-archive-container\">\r\n                <div class=\"research-archive-header\">\r\n                    <h1 class=\"page-title\"><span class=\"research-title-icon\">\ud83d\udcd6<\/span> <span id=\"archive-title\">\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span><\/h1>\r\n                    <div class=\"filter-buttons ajax-filter-group\" data-filter-key=\"year_filter\">\r\n                        <a href=\"#\" data-filter-value=\"last5\" class=\"\">5 \u0e1b\u0e35\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14<\/a>\r\n                        <a href=\"#\" data-filter-value=\"older\" class=\"\">\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 5 \u0e1b\u0e35<\/a>\r\n                        <a href=\"#\" data-filter-value=\"all\" class=\"active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <form role=\"search\" method=\"post\" id=\"research-ajax-form\">\r\n                    <div class=\"research-search-form\">\r\n                        <input type=\"text\" value=\"\" name=\"research_s\" placeholder=\"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e08\u0e32\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07, \u0e1c\u0e39\u0e49\u0e41\u0e15\u0e48\u0e07, \u0e1b\u0e35, \u0e27\u0e32\u0e23\u0e2a\u0e32\u0e23...\">\r\n                        <input type=\"submit\" value=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\">\r\n                    <\/div>\r\n\r\n                    <input type=\"hidden\" name=\"year_filter\" id=\"year_filter_input\" value=\"all\">\r\n                    <input type=\"hidden\" name=\"type_filter\" id=\"type_filter_input\" value=\"\">\r\n                    <input type=\"hidden\" name=\"action\" value=\"research_ajax_search\">\r\n                    <input type=\"hidden\" id=\"nonce\" name=\"nonce\" value=\"dd31b1d618\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F1883\" \/>                <\/form>\r\n\r\n                <div class=\"filter-tabs ajax-filter-group\" data-filter-key=\"type_filter\">\r\n                    <a href=\"#\" data-filter-value=\"\" class=\"active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/a>\r\n                    <a href=\"#\" data-filter-value=\"article\" class=\"\">\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e27\u0e34\u0e08\u0e31\u0e22<\/a>                <\/div>\r\n\r\n                <div class=\"research-results-container\">\r\n                    <table class=\"research-table\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th>#<\/th>\r\n                                <th>\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/th>\r\n                                <th>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17<\/th>\r\n                                <th>\u0e1b\u0e35\u0e17\u0e35\u0e48\u0e15\u0e35\u0e1e\u0e34\u0e21\u0e1e\u0e4c<\/th>\r\n                            <\/tr>\r\n                        <\/thead>\r\n                        <tbody id=\"research-results-tbody\">\r\n                            <tr>\r\n                                <td colspan=\"4\" class=\"loading-overlay\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/td>\r\n                            <\/tr>\r\n                        <\/tbody>\r\n                    <\/table>\r\n                <\/div>\r\n\r\n                <div class=\"research-controls\">\r\n                    <div class=\"research-per-page-selector\">\r\n                        <label for=\"posts_per_page_select\">\u0e41\u0e2a\u0e14\u0e07:<\/label>\r\n                        <select name=\"posts_per_page\" id=\"posts_per_page_select\">\r\n                            <option value=\"10\" selected>10 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"20\">20 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"50\">50 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"-1\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"research-pagination\" id=\"research-pagination-container\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <script>\r\n                jQuery(document).ready(function($) {\r\n                    const form = $('#research-ajax-form');\r\n                    const resultsTbody = $('#research-results-tbody');\r\n                    const resultsContainer = $('.research-results-container');\r\n                    const titleSpan = $('#archive-title');\r\n                    const paginationContainer = $('#research-pagination-container');\r\n                    const perPageSelect = $('#posts_per_page_select');\r\n                    let searchTimeout;\r\n\r\n                    function perform_ajax_search(page = 1) {\r\n                        resultsContainer.addClass('loading');\r\n                        resultsTbody.html('<tr><td colspan=\"4\" class=\"loading-overlay\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32...<\/td><\/tr>');\r\n\r\n                        let formData = form.serializeArray();\r\n                        formData.push({\r\n                            name: 'paged',\r\n                            value: page\r\n                        });\r\n                        formData.push({\r\n                            name: 'posts_per_page',\r\n                            value: perPageSelect.val()\r\n                        });\r\n\r\n                        $.ajax({\r\n                            url: 'https:\/\/sdgs.srru.ac.th\/wp-admin\/admin-ajax.php',\r\n                            type: 'POST',\r\n                            data: $.param(formData),\r\n                            dataType: 'json',\r\n                            success: function(response) {\r\n                                if (response.success) {\r\n                                    resultsTbody.html(response.data.html);\r\n                                    paginationContainer.html(response.data.pagination);\r\n                                } else {\r\n                                    resultsTbody.html('<tr><td colspan=\"4\" style=\"text-align:center; padding: 2em;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32<\/td><\/tr>');\r\n                                }\r\n                            },\r\n                            error: function() {\r\n                                resultsTbody.html('<tr><td colspan=\"4\" style=\"text-align:center; padding: 2em;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c<\/td><\/tr>');\r\n                            },\r\n                            complete: function() {\r\n                                resultsContainer.removeClass('loading');\r\n                            }\r\n                        });\r\n                    }\r\n\r\n                    perform_ajax_search();\r\n\r\n                    form.on('submit', function(e) {\r\n                        e.preventDefault();\r\n                        clearTimeout(searchTimeout);\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    $('.ajax-filter-group a').on('click', function(e) {\r\n                        e.preventDefault();\r\n                        const link = $(this),\r\n                            group = link.closest('.ajax-filter-group'),\r\n                            filterKey = group.data('filter-key'),\r\n                            filterValue = link.data('filter-value');\r\n                        $('#' + filterKey + '_input').val(filterValue);\r\n                        group.find('a').removeClass('active');\r\n                        link.addClass('active');\r\n                        if (filterKey === 'year_filter') {\r\n                            let newTitle = link.text().replace('\u0e14\u0e39', '').trim();\r\n                            titleSpan.text(newTitle);\r\n                        }\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    $('input[name=\"research_s\"]').on('keyup', function() {\r\n                        clearTimeout(searchTimeout);\r\n                        searchTimeout = setTimeout(function() {\r\n                            perform_ajax_search(1);\r\n                        }, 500);\r\n                    });\r\n\r\n                    perPageSelect.on('change', function() {\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    paginationContainer.on('click', 'a.page-numbers', function(e) {\r\n                        e.preventDefault();\r\n                        let pageUrl = $(this).attr('href');\r\n                        let pageNum = 1;\r\n                        if (pageUrl) {\r\n                            let match = pageUrl.match(\/paged=(\\d+)\/);\r\n                            if (match) {\r\n                                pageNum = match[1];\r\n                            }\r\n                        }\r\n                        perform_ajax_search(pageNum);\r\n                        $('html, body').animate({\r\n                            scrollTop: $('#research-archive-container').offset().top - 100\r\n                        }, 500);\r\n                    });\r\n                });\r\n            <\/script>\r\n        [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e25\u0e31\u0e07\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22            <style>\r\n                * {\r\n                    box-sizing: border-box;\r\n                }\r\n\r\n                .research-archive-container {\r\n                    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n                }\r\n\r\n                .research-archive-header {\r\n                    display: flex;\r\n                    justify-content: space-between;\r\n                    align-items: center;\r\n                    margin-bottom: 2.5em;\r\n                    flex-wrap: wrap;\r\n                    gap: 20px;\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 50%, #A855C9 100%);\r\n                    padding: 35px 40px;\r\n                    border-radius: 16px;\r\n                    box-shadow: 0 10px 35px rgba(91, 124, 230, 0.35);\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                }\r\n\r\n                .research-archive-header::before {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: -50%;\r\n                    right: -50%;\r\n                    width: 300px;\r\n                    height: 300px;\r\n                    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\r\n                    border-radius: 50%;\r\n                }\r\n\r\n                .research-archive-header::after {\r\n                    content: '';\r\n                    position: absolute;\r\n                    bottom: -30%;\r\n                    left: -20%;\r\n                    width: 250px;\r\n                    height: 250px;\r\n                    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);\r\n                    border-radius: 50%;\r\n                }\r\n\r\n                .research-title-icon {\r\n                    font-size: 2em;\r\n                    vertical-align: middle;\r\n                    margin-right: 0.3em;\r\n                    animation: pulse 2s ease-in-out infinite;\r\n                }\r\n\r\n                @keyframes pulse {\r\n\r\n                    0%,\r\n                    100% {\r\n                        transform: scale(1);\r\n                    }\r\n\r\n                    50% {\r\n                        transform: scale(1.1);\r\n                    }\r\n                }\r\n\r\n                .page-title {\r\n                    font-size: 2em;\r\n                    font-weight: 700;\r\n                    color: white;\r\n                    margin: 0;\r\n                    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);\r\n                    position: relative;\r\n                    z-index: 2;\r\n                }\r\n\r\n                .filter-buttons {\r\n                    display: flex;\r\n                    gap: 10px;\r\n                    flex-wrap: wrap;\r\n                    position: relative;\r\n                    z-index: 2;\r\n                }\r\n\r\n                .filter-buttons a,\r\n                .filter-tabs a {\r\n                    display: inline-block;\r\n                    padding: 12px 24px;\r\n                    background: rgba(255, 255, 255, 0.95);\r\n                    color: #5B7CE6;\r\n                    text-decoration: none;\r\n                    border-radius: 30px;\r\n                    font-weight: 600;\r\n                    transition: all 0.3s ease;\r\n                    border: 2px solid transparent;\r\n                    backdrop-filter: blur(10px);\r\n                    font-size: 0.95em;\r\n                }\r\n\r\n                .filter-buttons a:hover,\r\n                .filter-tabs a:hover {\r\n                    background: white;\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 6px 20px rgba(91, 124, 230, 0.3);\r\n                }\r\n\r\n                .filter-buttons a.active,\r\n                .filter-tabs a.active {\r\n                    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);\r\n                    color: white;\r\n                    border-color: rgba(255, 255, 255, 0.3);\r\n                    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.4);\r\n                }\r\n\r\n                .filter-tabs {\r\n                    margin-bottom: 2em;\r\n                    padding: 20px 25px;\r\n                    background: linear-gradient(135deg, #F0F3FF 0%, #E8EDFF 100%);\r\n                    border-radius: 12px;\r\n                    display: flex;\r\n                    gap: 12px;\r\n                    flex-wrap: wrap;\r\n                    box-shadow: 0 4px 15px rgba(91, 124, 230, 0.12);\r\n                    border: 2px solid rgba(91, 124, 230, 0.1);\r\n                }\r\n\r\n                .research-search-form {\r\n                    margin-bottom: 2em;\r\n                    position: relative;\r\n                }\r\n\r\n                .research-search-form input[type=text] {\r\n                    width: 100%;\r\n                    max-width: 600px;\r\n                    padding: 15px 20px;\r\n                    border: 3px solid #e0e0e0;\r\n                    border-radius: 50px;\r\n                    font-size: 1em;\r\n                    transition: all 0.3s ease;\r\n                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\r\n                }\r\n\r\n                .research-search-form input[type=text]:focus {\r\n                    outline: none;\r\n                    border-color: #5B7CE6;\r\n                    box-shadow: 0 6px 25px rgba(91, 124, 230, 0.3);\r\n                    transform: translateY(-2px);\r\n                }\r\n\r\n                .research-search-form input[type=submit] {\r\n                    padding: 15px 40px;\r\n                    border: none;\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 100%);\r\n                    color: white;\r\n                    border-radius: 50px;\r\n                    cursor: pointer;\r\n                    font-weight: 600;\r\n                    font-size: 1em;\r\n                    transition: all 0.3s ease;\r\n                    box-shadow: 0 4px 20px rgba(91, 124, 230, 0.35);\r\n                    margin-left: 10px;\r\n                }\r\n\r\n                .research-search-form input[type=submit]:hover {\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 8px 30px rgba(91, 124, 230, 0.45);\r\n                    background: linear-gradient(135deg, #4A6AD5 0%, #6A58B6 100%);\r\n                }\r\n\r\n                .research-table {\r\n                    width: 100%;\r\n                    border-collapse: separate;\r\n                    border-spacing: 0;\r\n                    font-size: 0.95em;\r\n                    background: white;\r\n                    border-radius: 12px;\r\n                    overflow: hidden;\r\n                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n                }\r\n\r\n                .research-table th,\r\n                .research-table td {\r\n                    padding: 16px 12px;\r\n                    text-align: left;\r\n                }\r\n\r\n                .research-table th {\r\n                    background: linear-gradient(135deg, #01b847ff 0%, #02d854ff 50%, #02d854ff 100%);\r\n                    color: #ffffffff;\r\n                    font-weight: 700;\r\n                    text-align: center;\r\n                    font-size: 1.05em;\r\n                    letter-spacing: 0.8px;\r\n                    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);\r\n                    text-transform: uppercase;\r\n                }\r\n\r\n                .research-table tbody tr {\r\n                    transition: all 0.3s ease;\r\n                    border-bottom: 1px solid #f0f0f0;\r\n                }\r\n\r\n                .research-table tbody tr:hover {\r\n                    background: linear-gradient(90deg, #f8f9ff 0%, #fff 100%);\r\n                    transform: scale(1.01);\r\n                    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.15);\r\n                }\r\n\r\n                .research-table td:first-child {\r\n                    width: 5%;\r\n                    text-align: center;\r\n                    font-weight: 600;\r\n                    color: #667eea;\r\n                }\r\n\r\n                .research-table td:nth-child(2) {\r\n                    width: 65%;\r\n                }\r\n\r\n                .research-table td:nth-child(2) a {\r\n                    color: #2c3e50;\r\n                    text-decoration: none;\r\n                    font-weight: 500;\r\n                    transition: all 0.3s;\r\n                }\r\n\r\n                .research-table td:nth-child(2) a:hover {\r\n                    color: #667eea;\r\n                    padding-left: 5px;\r\n                }\r\n\r\n                .research-table td:nth-child(3),\r\n                .research-table td:nth-child(4) {\r\n                    width: 15%;\r\n                    text-align: center;\r\n                    color: #666;\r\n                }\r\n\r\n                .research-results-container {\r\n                    position: relative;\r\n                    margin-bottom: 2em;\r\n                }\r\n\r\n                .research-results-container.loading::after {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: 0;\r\n                    right: 0;\r\n                    bottom: 0;\r\n                    background: rgba(255, 255, 255, 0.8);\r\n                    z-index: 10;\r\n                }\r\n\r\n                .loading-overlay {\r\n                    text-align: center;\r\n                    padding: 3em;\r\n                    font-weight: 600;\r\n                    color: #5B7CE6;\r\n                    font-size: 1.1em;\r\n                }\r\n\r\n                .research-controls {\r\n                    display: flex;\r\n                    justify-content: space-between;\r\n                    align-items: center;\r\n                    margin-top: 2em;\r\n                    flex-wrap: wrap;\r\n                    gap: 20px;\r\n                    padding: 25px 30px;\r\n                    background: linear-gradient(135deg, #F0F3FF 0%, #E8EDFF 100%);\r\n                    border-radius: 12px;\r\n                    box-shadow: 0 4px 15px rgba(91, 124, 230, 0.12);\r\n                }\r\n\r\n                .research-per-page-selector label {\r\n                    margin-right: 10px;\r\n                    font-weight: 600;\r\n                    color: #555;\r\n                }\r\n\r\n                .research-per-page-selector select {\r\n                    padding: 8px 15px;\r\n                    border: 2px solid #ddd;\r\n                    border-radius: 8px;\r\n                    background: white;\r\n                    font-size: 0.95em;\r\n                    cursor: pointer;\r\n                    transition: all 0.3s;\r\n                }\r\n\r\n                .research-per-page-selector select:hover {\r\n                    border-color: #5B7CE6;\r\n                }\r\n\r\n                .research-pagination .page-numbers {\r\n                    display: inline-block;\r\n                    padding: 10px 16px;\r\n                    margin: 0 3px;\r\n                    text-decoration: none;\r\n                    border: 2px solid #ddd;\r\n                    color: #555;\r\n                    border-radius: 8px;\r\n                    font-weight: 600;\r\n                    transition: all 0.3s ease;\r\n                    background: white;\r\n                }\r\n\r\n                .research-pagination .page-numbers.current,\r\n                .research-pagination .page-numbers:hover {\r\n                    background: linear-gradient(135deg, #5B7CE6 0%, #7B68C7 100%);\r\n                    color: white;\r\n                    border-color: #5B7CE6;\r\n                    transform: translateY(-2px);\r\n                    box-shadow: 0 5px 15px rgba(91, 124, 230, 0.35);\r\n                }\r\n\r\n                .research-pagination ul {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0;\r\n                    display: flex;\r\n                    flex-wrap: wrap;\r\n                    gap: 5px;\r\n                }\r\n\r\n                .research-pagination li {\r\n                    display: inline;\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    .research-archive-header {\r\n                        flex-direction: column;\r\n                        text-align: center;\r\n                    }\r\n\r\n                    .filter-buttons,\r\n                    .filter-tabs {\r\n                        justify-content: center;\r\n                    }\r\n\r\n                    .research-search-form input[type=text] {\r\n                        max-width: 100%;\r\n                    }\r\n\r\n                    .research-search-form input[type=submit] {\r\n                        margin: 10px 0 0 0;\r\n                    }\r\n                }\r\n            <\/style>\r\n\r\n            <div class=\"research-archive-container\" id=\"research-archive-container\">\r\n                <div class=\"research-archive-header\">\r\n                    <h1 class=\"page-title\"><span class=\"research-title-icon\">\ud83d\udcd6<\/span> <span id=\"archive-title\">\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span><\/h1>\r\n                    <div class=\"filter-buttons ajax-filter-group\" data-filter-key=\"year_filter\">\r\n                        <a href=\"#\" data-filter-value=\"last5\" class=\"\">5 \u0e1b\u0e35\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14<\/a>\r\n                        <a href=\"#\" data-filter-value=\"older\" class=\"\">\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 5 \u0e1b\u0e35<\/a>\r\n                        <a href=\"#\" data-filter-value=\"all\" class=\"active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <form role=\"search\" method=\"post\" id=\"research-ajax-form\">\r\n                    <div class=\"research-search-form\">\r\n                        <input type=\"text\" value=\"\" name=\"research_s\" placeholder=\"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e08\u0e32\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07, \u0e1c\u0e39\u0e49\u0e41\u0e15\u0e48\u0e07, \u0e1b\u0e35, \u0e27\u0e32\u0e23\u0e2a\u0e32\u0e23...\">\r\n                        <input type=\"submit\" value=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\">\r\n                    <\/div>\r\n\r\n                    <input type=\"hidden\" name=\"year_filter\" id=\"year_filter_input\" value=\"all\">\r\n                    <input type=\"hidden\" name=\"type_filter\" id=\"type_filter_input\" value=\"\">\r\n                    <input type=\"hidden\" name=\"action\" value=\"research_ajax_search\">\r\n                    <input type=\"hidden\" id=\"nonce\" name=\"nonce\" value=\"dd31b1d618\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F1883\" \/>                <\/form>\r\n\r\n                <div class=\"filter-tabs ajax-filter-group\" data-filter-key=\"type_filter\">\r\n                    <a href=\"#\" data-filter-value=\"\" class=\"active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/a>\r\n                    <a href=\"#\" data-filter-value=\"article\" class=\"\">\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e27\u0e34\u0e08\u0e31\u0e22<\/a>                <\/div>\r\n\r\n                <div class=\"research-results-container\">\r\n                    <table class=\"research-table\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th>#<\/th>\r\n                                <th>\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/th>\r\n                                <th>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17<\/th>\r\n                                <th>\u0e1b\u0e35\u0e17\u0e35\u0e48\u0e15\u0e35\u0e1e\u0e34\u0e21\u0e1e\u0e4c<\/th>\r\n                            <\/tr>\r\n                        <\/thead>\r\n                        <tbody id=\"research-results-tbody\">\r\n                            <tr>\r\n                                <td colspan=\"4\" class=\"loading-overlay\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/td>\r\n                            <\/tr>\r\n                        <\/tbody>\r\n                    <\/table>\r\n                <\/div>\r\n\r\n                <div class=\"research-controls\">\r\n                    <div class=\"research-per-page-selector\">\r\n                        <label for=\"posts_per_page_select\">\u0e41\u0e2a\u0e14\u0e07:<\/label>\r\n                        <select name=\"posts_per_page\" id=\"posts_per_page_select\">\r\n                            <option value=\"10\" selected>10 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"20\">20 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"50\">50 \u0e41\u0e16\u0e27<\/option>\r\n                            <option value=\"-1\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"research-pagination\" id=\"research-pagination-container\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <script>\r\n                jQuery(document).ready(function($) {\r\n                    const form = $('#research-ajax-form');\r\n                    const resultsTbody = $('#research-results-tbody');\r\n                    const resultsContainer = $('.research-results-container');\r\n                    const titleSpan = $('#archive-title');\r\n                    const paginationContainer = $('#research-pagination-container');\r\n                    const perPageSelect = $('#posts_per_page_select');\r\n                    let searchTimeout;\r\n\r\n                    function perform_ajax_search(page = 1) {\r\n                        resultsContainer.addClass('loading');\r\n                        resultsTbody.html('<tr><td colspan=\"4\" class=\"loading-overlay\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32...<\/td><\/tr>');\r\n\r\n                        let formData = form.serializeArray();\r\n                        formData.push({\r\n                            name: 'paged',\r\n                            value: page\r\n                        });\r\n                        formData.push({\r\n                            name: 'posts_per_page',\r\n                            value: perPageSelect.val()\r\n                        });\r\n\r\n                        $.ajax({\r\n                            url: 'https:\/\/sdgs.srru.ac.th\/wp-admin\/admin-ajax.php',\r\n                            type: 'POST',\r\n                            data: $.param(formData),\r\n                            dataType: 'json',\r\n                            success: function(response) {\r\n                                if (response.success) {\r\n                                    resultsTbody.html(response.data.html);\r\n                                    paginationContainer.html(response.data.pagination);\r\n                                } else {\r\n                                    resultsTbody.html('<tr><td colspan=\"4\" style=\"text-align:center; padding: 2em;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32<\/td><\/tr>');\r\n                                }\r\n                            },\r\n                            error: function() {\r\n                                resultsTbody.html('<tr><td colspan=\"4\" style=\"text-align:center; padding: 2em;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c<\/td><\/tr>');\r\n                            },\r\n                            complete: function() {\r\n                                resultsContainer.removeClass('loading');\r\n                            }\r\n                        });\r\n                    }\r\n\r\n                    perform_ajax_search();\r\n\r\n                    form.on('submit', function(e) {\r\n                        e.preventDefault();\r\n                        clearTimeout(searchTimeout);\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    $('.ajax-filter-group a').on('click', function(e) {\r\n                        e.preventDefault();\r\n                        const link = $(this),\r\n                            group = link.closest('.ajax-filter-group'),\r\n                            filterKey = group.data('filter-key'),\r\n                            filterValue = link.data('filter-value');\r\n                        $('#' + filterKey + '_input').val(filterValue);\r\n                        group.find('a').removeClass('active');\r\n                        link.addClass('active');\r\n                        if (filterKey === 'year_filter') {\r\n                            let newTitle = link.text().replace('\u0e14\u0e39', '').trim();\r\n                            titleSpan.text(newTitle);\r\n                        }\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    $('input[name=\"research_s\"]').on('keyup', function() {\r\n                        clearTimeout(searchTimeout);\r\n                        searchTimeout = setTimeout(function() {\r\n                            perform_ajax_search(1);\r\n                        }, 500);\r\n                    });\r\n\r\n                    perPageSelect.on('change', function() {\r\n                        perform_ajax_search(1);\r\n                    });\r\n\r\n                    paginationContainer.on('click', 'a.page-numbers', function(e) {\r\n                        e.preventDefault();\r\n                        let pageUrl = $(this).attr('href');\r\n                        let pageNum = 1;\r\n                        if (pageUrl) {\r\n                            let match = pageUrl.match(\/paged=(\\d+)\/);\r\n                            if (match) {\r\n                                pageNum = match[1];\r\n                            }\r\n                        }\r\n                        perform_ajax_search(pageNum);\r\n                        $('html, body').animate({\r\n                            scrollTop: $('#research-archive-container').offset().top - 100\r\n                        }, 500);\r\n                    });\r\n                });\r\n            <\/script>\r\n        <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1883","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1883"}],"version-history":[{"count":7,"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1883\/revisions"}],"predecessor-version":[{"id":2859,"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1883\/revisions\/2859"}],"wp:attachment":[{"href":"https:\/\/sdgs.srru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}