{"id":18154,"date":"2026-01-12T08:47:39","date_gmt":"2026-01-12T01:47:39","guid":{"rendered":"https:\/\/www.ivecr5.ac.th\/web2020\/?page_id=18154"},"modified":"2026-05-12T10:10:27","modified_gmt":"2026-05-12T03:10:27","slug":"%e0%b8%a3%e0%b8%b0%e0%b9%80%e0%b8%9a%e0%b8%b5%e0%b8%a2%e0%b8%9a%e0%b8%aa%e0%b8%ad%e0%b8%815","status":"publish","type":"page","link":"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b8%a3%e0%b8%b0%e0%b9%80%e0%b8%9a%e0%b8%b5%e0%b8%a2%e0%b8%9a%e0%b8%aa%e0%b8%ad%e0%b8%815\/","title":{"rendered":"\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e2a\u0e2d\u0e015"},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-ab4b42c7\" data-vce-do-apply=\"all el-ab4b42c7\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-49a8ddd0\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-49a8ddd0\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-49a8ddd0\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-539f4f5b\" data-vce-do-apply=\"all el-539f4f5b\"><a href=\"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b9%80%e0%b8%a1%e0%b8%99%e0%b8%b9%e0%b8%ad%e0%b8%ad%e0%b8%99%e0%b9%84%e0%b8%a5%e0%b8%99%e0%b9%8c\/\" class=\"base-card back-card\">\n        <div class=\"icon-box\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n                <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n            <\/svg>\n        <\/div>\n        <span class=\"text-label\">\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e40\u0e21\u0e19\u0e39<\/span>\n    <\/a>\n<style>\n    \/* \u0e19\u0e33 Font Kanit \u0e21\u0e32\u0e43\u0e0a\u0e49 *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600&display=swap');\n\n    .custom-wrapper {\n        font-family: 'Kanit', sans-serif;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 16px; \n        padding: 20px;\n        background: transparent;\n    }\n\n    \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 - \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e02\u0e2d\u0e07\u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a *\/\n    .base-card {\n        width: 100%;\n        max-width: 400px;\n        display: flex;\n        align-items: center;\n        padding: 20px 24px;\n        border-radius: 24px;\n        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n        text-decoration: none !important;\n        border: 2px solid #f1f5f9 !important; \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e19\u0e32\u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a *\/\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04); \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e07\u0e32\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 *\/\n        background: #ffffff;\n    }\n\n    .base-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n        text-decoration: none !important;\n    }\n\n    .icon-box {\n        padding: 14px;\n        border-radius: 18px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-right: 20px;\n        transition: all 0.3s ease;\n    }\n\n    .text-label {\n        font-size: 1.25rem;\n        font-weight: 600;\n        transition: all 0.3s ease;\n    }\n\n    \/* --- \u0e2a\u0e35\u0e1b\u0e38\u0e48\u0e21\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e17\u0e14\u0e25\u0e2d\u0e07: \u0e40\u0e19\u0e49\u0e19\u0e2a\u0e35 Amber\/Gold --- *\/\n    .report-card {\n        border-color: #fef3c7 !important; \/* \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e2a\u0e35\u0e17\u0e2d\u0e07\u0e2d\u0e48\u0e2d\u0e19 *\/\n    }\n    .report-card .icon-box {\n        background-color: #fbbf24; \/* Amber \u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19 *\/\n    }\n    .report-card .text-label {\n        color: #92400e; \/* \u0e19\u0e49\u0e33\u0e15\u0e32\u0e25\u0e40\u0e02\u0e49\u0e21 *\/\n    }\n    \/* \u0e40\u0e21\u0e37\u0e48\u0e2d Hover \u0e1b\u0e38\u0e48\u0e21\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19 - \u0e40\u0e19\u0e49\u0e19\u0e2a\u0e35\u0e43\u0e2b\u0e49\u0e0a\u0e31\u0e14 *\/\n    .report-card:hover {\n        background-color: #fffbeb !important;\n        border-color: #fbbf24 !important; \/* \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e0a\u0e35\u0e49 *\/\n    }\n\n    \/* --- \u0e2a\u0e35\u0e1b\u0e38\u0e48\u0e21\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a: \u0e40\u0e19\u0e49\u0e19\u0e2a\u0e35 Blue\/Sky --- *\/\n    .back-card {\n        border-color: #e0f2fe !important; \/* \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e2d\u0e48\u0e2d\u0e19 *\/\n    }\n    .back-card .icon-box {\n        background-color: #0ea5e9; \/* Sky \u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19 *\/\n    }\n    .back-card .text-label {\n        color: #075985; \/* \u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e40\u0e02\u0e49\u0e21 *\/\n    }\n    \/* \u0e40\u0e21\u0e37\u0e48\u0e2d Hover \u0e1b\u0e38\u0e48\u0e21\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a - \u0e40\u0e19\u0e49\u0e19\u0e2a\u0e35\u0e43\u0e2b\u0e49\u0e0a\u0e31\u0e14 *\/\n    .back-card:hover {\n        background-color: #f0f9ff !important;\n        border-color: #0ea5e9 !important; \/* \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e0a\u0e35\u0e49 *\/\n    }\n\n    \/* \u0e25\u0e1a\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e15\u0e49\u0e08\u0e32\u0e01 Theme *\/\n    .custom-wrapper a, \n    .custom-wrapper a:hover, \n    .custom-wrapper span {\n        text-decoration: none !important;\n        border-bottom: none !important;\n        box-shadow: none !important;\n    }\n<\/style><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-8fcae666\" data-vce-do-apply=\"all el-8fcae666\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-fd7025e0\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-fd7025e0\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-fd7025e0\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-c720887f\" data-vce-do-apply=\"all el-c720887f\">\n\n\n<meta charset=\"UTF-8\">\n<style>\n  \/* \u0e19\u0e33\u0e40\u0e02\u0e49\u0e32\u0e1f\u0e2d\u0e19\u0e15\u0e4c Kanit *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600&display=swap');\n\n  \/* Wrapper \u0e2b\u0e25\u0e31\u0e01 *\/\n  .modern-doc-wrapper {\n    font-family: 'Kanit', sans-serif !important;\n    max-width: 100%;\n    margin: 0 auto;\n    padding: 20px 0;\n    box-sizing: border-box;\n  }\n\n  .modern-doc-wrapper * {\n    box-sizing: border-box;\n  }\n\n  \/* \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e2b\u0e25\u0e31\u0e01\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2b\u0e21\u0e27\u0e14 *\/\n  .modern-doc-section {\n    margin-bottom: 40px;\n    background: #fff;\n    border-radius: 15px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n    overflow: hidden;\n    border: 1px solid #f0f0f0;\n  }\n\n  \/* \u0e41\u0e16\u0e1a\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d *\/\n  .modern-doc-header {\n    background: linear-gradient(135deg, #09164f 0%, #1e3c72 100%);\n    padding: 20px 30px;\n    color: #fff;\n    position: relative;\n  }\n\n  .modern-doc-header h2 {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: #fff !important;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-family: 'Kanit', sans-serif !important;\n  }\n\n  .modern-doc-header h2::before {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 24px;\n    background: #FFD700;\n    border-radius: 4px;\n  }\n\n  \/* \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 *\/\n  .modern-doc-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .modern-doc-item {\n    border-bottom: 1px solid #f0f0f0;\n    transition: all 0.3s ease;\n  }\n\n  .modern-doc-item:last-child {\n    border-bottom: none;\n  }\n\n  .modern-doc-item:hover {\n    background-color: #f9faff;\n    transform: translateX(5px);\n  }\n\n  .modern-doc-link {\n    display: flex;\n    align-items: flex-start;\n    padding: 18px 30px;\n    text-decoration: none !important;\n    color: #333 !important;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 1.6;\n    transition: color 0.2s;\n  }\n\n  .modern-doc-link:hover {\n    color: #09164f !important;\n  }\n\n  \/* \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e19\u0e49\u0e32\u0e25\u0e34\u0e07\u0e01\u0e4c *\/\n  .doc-icon-wrapper {\n    min-width: 35px;\n    height: 35px;\n    background: #eef2ff;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 15px;\n    color: #09164f;\n    font-size: 14px;\n    flex-shrink: 0;\n  }\n  \n  .icon-svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n  }\n\n  \/* \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 *\/\n  .loading-status {\n    text-align: center;\n    padding: 50px;\n    color: #666;\n    font-size: 18px;\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 768px) {\n    .modern-doc-header { padding: 15px 20px; }\n    .modern-doc-header h2 { font-size: 20px; }\n    .modern-doc-link { padding: 15px 20px; font-size: 15px; }\n  }\n<\/style>\n\n\n\n  <div id=\"document-container\" class=\"modern-doc-wrapper\">\n      <div class=\"loading-status\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23...<\/div>\n  <\/div>\n\n  <script>\n    \/\/ ********************************************************\n    \/\/ \u0e27\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c Web App URL (\u0e25\u0e07\u0e17\u0e49\u0e32\u0e22\u0e14\u0e49\u0e27\u0e22 \/exec) \u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01 Apps Script \u0e17\u0e35\u0e48\u0e19\u0e35\u0e48\n    \/\/ ********************************************************\n    const GAS_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbycqwhhvzw5O8kFVTUpyO4CjgeQCGIclT4z8heQAYSZG_gwP0OuOXvLn-PJiqkEliPz\/exec'; \n\n    document.addEventListener('DOMContentLoaded', () => {\n      \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e48\u0e32\u0e19 Fetch API \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\n      fetch(GAS_URL)\n        .then(response => response.json())\n        .then(data => {\n          renderDocuments(data);\n        })\n        .catch(error => {\n          console.error('Error fetching data:', error);\n          document.getElementById('document-container').innerHTML = '<div class=\"loading-status\" style=\"color:red;\">\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e1a\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49<\/div>';\n        });\n    });\n\n    function renderDocuments(data) {\n      const groupedData = {};\n      \n      \/\/ \u0e01\u0e25\u0e31\u0e1a\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 (\u0e2d\u0e22\u0e39\u0e48\u0e25\u0e48\u0e32\u0e07\u0e2a\u0e38\u0e14\u0e43\u0e19 Sheet) \u0e41\u0e2a\u0e14\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a\u0e41\u0e23\u0e01\n      const reversedData = [...data].reverse();\n\n      reversedData.forEach(row => {\n        const category = row['Category'];\n        const title = row['Title'];\n        const link = row['Link'];\n\n        if (!category || !title || !link) return; \n\n        if (!groupedData[category]) {\n          groupedData[category] = [];\n        }\n        groupedData[category].push({ title, link });\n      });\n\n      \/\/ \u0e14\u0e36\u0e07\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e14\u0e31\u0e49\u0e07\u0e40\u0e14\u0e34\u0e21 (\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e40\u0e23\u0e32 reverse \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27)\n      const orderedCategories = Object.keys(groupedData).reverse();\n\n      const container = document.getElementById('document-container');\n      container.innerHTML = ''; \n\n      let sectionIndex = 1;\n      \n      orderedCategories.forEach(category => {\n        const docs = groupedData[category];\n\n        let sectionHtml = `\n          <div class=\"modern-doc-section\" id=\"selec-${sectionIndex}\">\n            <div class=\"modern-doc-header\">\n              <h2>${category}<\/h2>\n            <\/div>\n            <ul class=\"modern-doc-list\">\n        `;\n\n        docs.forEach(doc => {\n          sectionHtml += `\n            <li class=\"modern-doc-item\">\n              <a class=\"modern-doc-link\" href=\"${doc.link}\" target=\"_blank\">\n                <div class=\"doc-icon-wrapper\">\n                  <svg class=\"icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\/><\/svg>\n                <\/div>\n                <span>${doc.title}<\/span>\n              <\/a>\n            <\/li>\n          `;\n        });\n\n        sectionHtml += `\n            <\/ul>\n          <\/div>\n        `;\n\n        container.innerHTML += sectionHtml;\n        sectionIndex++;\n      });\n    }\n  <\/script>\n\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<p>Views: 152<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e40\u0e21\u0e19\u0e39 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23&#8230; Views: 152<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-18154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/comments?post=18154"}],"version-history":[{"count":9,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18154\/revisions"}],"predecessor-version":[{"id":18374,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18154\/revisions\/18374"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=18154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}