{"id":18168,"date":"2026-01-12T09:04:23","date_gmt":"2026-01-12T02:04:23","guid":{"rendered":"https:\/\/www.ivecr5.ac.th\/web2020\/?page_id=18168"},"modified":"2026-05-07T09:42:53","modified_gmt":"2026-05-07T02:42:53","slug":"%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%81%e0%b8%b2%e0%b8%a8%e0%b8%99%e0%b8%a8","status":"publish","type":"page","link":"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%81%e0%b8%b2%e0%b8%a8%e0%b8%99%e0%b8%a8\/","title":{"rendered":"\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e19\u0e28"},"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-017e27ce\" data-vce-do-apply=\"all el-017e27ce\"><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-95de28ac\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-95de28ac\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-95de28ac\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-b1a96dbe\" data-vce-do-apply=\"all el-b1a96dbe\"><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-7f1cb83a\" data-vce-do-apply=\"all el-7f1cb83a\"><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-bed05da5\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-bed05da5\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-bed05da5\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-9ec77cc3\" data-vce-do-apply=\"all el-9ec77cc3\">\n\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32<\/title>\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        \/* Container \u0e2b\u0e25\u0e31\u0e01 *\/\n        .modern-announcement-wrapper {\n            font-family: 'Kanit', sans-serif !important;\n            box-sizing: border-box;\n            padding: 30px 15px; \/* \u0e40\u0e1e\u0e34\u0e48\u0e21 padding \u0e14\u0e49\u0e32\u0e19\u0e02\u0e49\u0e32\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d *\/\n            max-width: 1200px; \/* \u0e08\u0e33\u0e01\u0e31\u0e14\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 *\/\n            margin: 0 auto; \/* \u0e08\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07 *\/\n            background-color: transparent;\n        }\n\n        .modern-announcement-wrapper * {\n            font-family: 'Kanit', sans-serif !important;\n        }\n\n        \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e2b\u0e25\u0e31\u0e01 *\/\n        .section-header {\n            text-align: center;\n            color: #000080;\n            margin-bottom: 40px;\n            font-weight: 600;\n            font-size: 28px;\n            position: relative;\n            padding-bottom: 15px;\n        }\n        \n        .section-header::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 80px;\n            height: 4px;\n            background: #ffc107;\n            border-radius: 2px;\n        }\n\n        \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 *\/\n        .year-header {\n            color: #333;\n            font-size: 20px;\n            font-weight: 600;\n            margin: 40px 0 15px 0;\n            padding-left: 15px;\n            border-left: 4px solid #ffc107;\n            display: flex;\n            align-items: center;\n        }\n\n        \/* Grid Layout *\/\n        .announcement-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 15px;\n            margin-bottom: 20px;\n        }\n\n        @media (min-width: 768px) {\n            .announcement-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e43\u0e1a *\/\n        .announcement-card {\n            background: #ffffff;\n            border-radius: 12px;\n            padding: 20px;\n            display: flex;\n            align-items: flex-start;\n            text-decoration: none !important;\n            color: #333;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n            border-left: 5px solid #000080;\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .announcement-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 20px rgba(0, 0, 128, 0.15);\n            border-left-color: #ffc107;\n        }\n\n        \/* \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e14\u0e49\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32 *\/\n        .card-icon {\n            flex-shrink: 0;\n            width: 40px;\n            height: 40px;\n            background: #f0f4ff;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 15px;\n            color: #000080;\n            transition: transform 0.3s ease;\n        }\n\n        .announcement-card:hover .card-icon {\n            background: #000080;\n            color: #ffffff;\n            transform: rotate(360deg);\n        }\n\n        \/* \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 *\/\n        .card-content {\n            flex-grow: 1;\n            padding-right: 15px; \/* \u0e40\u0e27\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e49\u0e25\u0e39\u0e01\u0e28\u0e23 *\/\n        }\n\n        .card-title {\n            font-size: 16px;\n            font-weight: 500;\n            line-height: 1.5;\n            color: #000080;\n            margin: 0;\n        }\n\n        .announcement-card:hover .card-title {\n            color: #000;\n        }\n\n        \/* \u0e44\u0e2d\u0e04\u0e2d\u0e19 SVG *\/\n        .icon-svg {\n            width: 20px;\n            height: 20px;\n            fill: currentColor;\n        }\n\n        \/* \u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e1b\u0e38\u0e48\u0e21 Download \u0e40\u0e25\u0e47\u0e01\u0e46 \u0e21\u0e38\u0e21\u0e02\u0e27\u0e32 *\/\n        .action-icon {\n            opacity: 0;\n            transition: opacity 0.3s ease, transform 0.3s ease;\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            color: #ccc;\n            font-weight: bold;\n        }\n        \n        .announcement-card:hover .action-icon {\n            opacity: 1;\n            transform: translate(-5px, 5px);\n            color: #000080;\n        }\n\n        \/* \u0e42\u0e2b\u0e25\u0e14\u0e14\u0e34\u0e49\u0e07 State *\/\n        .loading-state {\n            text-align: center;\n            padding: 50px;\n            color: #666;\n            font-size: 18px;\n        }\n        .spinner {\n            border: 4px solid #f3f3f3;\n            border-top: 4px solid #000080;\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            animation: spin 1s linear infinite;\n            margin: 0 auto 15px auto;\n        }\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n    <\/style>\n\n\n\n<div class=\"modern-announcement-wrapper\">\n    <h2 class=\"section-header\">\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32<\/h2>\n    \n    <!-- \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 (\u0e08\u0e30\u0e16\u0e39\u0e01\u0e41\u0e17\u0e19\u0e17\u0e35\u0e48\u0e14\u0e49\u0e27\u0e22 Javascript) -->\n    <div id=\"announcement-container\">\n        <div class=\"loading-state\">\n            <div class=\"spinner\"><\/div>\n            \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28...\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ ==========================================\n    \/\/ 1. \u0e19\u0e33 URL \u0e02\u0e2d\u0e07 Web App \u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01 Google Apps Script \u0e21\u0e32\u0e43\u0e2a\u0e48\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49\n    \/\/ ==========================================\n    const GOOGLE_SHEET_API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzlS_Id44bBgC-Hq3aRHPKb4y2G9r_94csgqz046kJ1hUxsz9s5QIA-zdaJQ5MUEgvKBQ\/exec'; \n\n    \/\/ ==========================================\n    \/\/ 2. \u0e04\u0e25\u0e31\u0e07\u0e44\u0e2d\u0e04\u0e2d\u0e19 SVG (\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e04\u0e33\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e25\u0e07\u0e43\u0e19\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c Icon \u0e43\u0e19 Sheet \u0e44\u0e14\u0e49)\n    \/\/ ==========================================\n    const icons = {\n        calendar: '<path d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M16,18H8V16H16V18M16,14H8V12H16V14M13,9V3.5L18.5,9H13Z\" \/>', \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e15\u0e48\u0e32\u0e07\u0e46\n        date: '<path d=\"M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z\" \/>', \/\/ \u0e40\u0e1b\u0e34\u0e14-\u0e1b\u0e34\u0e14\u0e40\u0e17\u0e2d\u0e21\n        grad: '<path d=\"M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z\" \/>', \/\/ \u0e1c\u0e39\u0e49\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\n        doc: '<path d=\"M21,17H7V3H21M21,1H7A2,2 0 0,0 5,3V17A2,2 0 0,0 7,19H21A2,2 0 0,0 23,17V3A2,2 0 0,0 21,1M3,5H1V21A2,2 0 0,0 3,23H19V21H3V5Z\" \/>', \/\/ \u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\n        globe: '<path d=\"M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z\" \/>', \/\/ \u0e1c\u0e25\u0e20\u0e32\u0e29\u0e32\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29\n        people: '<path d=\"M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z\" \/>', \/\/ \u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\n        default: '<path d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M16,18H8V16H16V18M16,14H8V12H16V14M13,9V3.5L18.5,9H13Z\" \/>' \/\/ \u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e16\u0e49\u0e32\u0e44\u0e21\u0e48\u0e43\u0e2a\u0e48\n    };\n\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 HTML\n    async function fetchAndRenderAnnouncements() {\n        const container = document.getElementById('announcement-container');\n\n        \/\/ \u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e2a\u0e48 URL \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\n        if (GOOGLE_SHEET_API_URL === 'YOUR_WEB_APP_URL_HERE') {\n            container.innerHTML = '<div style=\"color:red; text-align:center; padding: 20px;\">\u0e42\u0e1b\u0e23\u0e14\u0e43\u0e2a\u0e48 URL \u0e02\u0e2d\u0e07 Web App \u0e08\u0e32\u0e01 Google Apps Script \u0e43\u0e19\u0e42\u0e04\u0e49\u0e14\u0e01\u0e48\u0e2d\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e04\u0e23\u0e31\u0e1a<\/div>';\n            return;\n        }\n\n        try {\n            \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 API\n            const response = await fetch(GOOGLE_SHEET_API_URL);\n            const data = await response.json();\n\n            if (data.length === 0) {\n                container.innerHTML = '<div style=\"text-align:center; padding:20px;\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28<\/div>';\n                return;\n            }\n\n            \/\/ \u0e08\u0e31\u0e14\u0e01\u0e25\u0e38\u0e48\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e32\u0e21\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\n            const groupedData = data.reduce((acc, item) => {\n                const year = item.Year || '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e1b\u0e35';\n                if (!acc[year]) acc[year] = [];\n                acc[year].push(item);\n                return acc;\n            }, {});\n\n            \/\/ \u0e40\u0e23\u0e35\u0e22\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e1b\u0e35\u0e08\u0e32\u0e01\u0e21\u0e32\u0e01\u0e44\u0e1b\u0e19\u0e49\u0e2d\u0e22 (\u0e40\u0e0a\u0e48\u0e19 2568 -> 2567)\n            const sortedYears = Object.keys(groupedData).sort((a, b) => {\n                \/\/ \u0e1e\u0e22\u0e32\u0e22\u0e32\u0e21\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e35\u0e22\u0e07 \u0e16\u0e49\u0e32\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\n                return isNaN(b - a) ? b.localeCompare(a) : b - a;\n            });\n\n            \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 HTML\n            let htmlContent = '';\n\n            sortedYears.forEach(year => {\n                \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\n                htmlContent += `<h3 class=\"year-header\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 ${year}<\/h3>`;\n                htmlContent += `<div class=\"announcement-grid\">`;\n\n                \/\/ \u0e27\u0e19\u0e25\u0e39\u0e1b\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e1b\u0e35\n                groupedData[year].forEach(item => {\n                    \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e16\u0e49\u0e32\u0e44\u0e21\u0e48\u0e21\u0e35\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49 default\n                    let iconKey = (item.Icon || '').toLowerCase().trim();\n                    let svgPath = icons[iconKey] || icons.default;\n                    let link = item.Link || '#';\n\n                    htmlContent += `\n                        <a href=\"${link}\" target=\"_blank\" class=\"announcement-card\">\n                            <div class=\"card-icon\">\n                                <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">${svgPath}<\/svg>\n                            <\/div>\n                            <div class=\"card-content\">\n                                <p class=\"card-title\">${item.Title}<\/p>\n                            <\/div>\n                            <div class=\"action-icon\">\u2b07<\/div>\n                        <\/a>\n                    `;\n                });\n\n                htmlContent += `<\/div>`; \/\/ \u0e1b\u0e34\u0e14 announcement-grid\n            });\n\n            \/\/ \u0e19\u0e33 HTML \u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\n            container.innerHTML = htmlContent;\n\n        } catch (error) {\n            console.error('Error fetching data:', error);\n            container.innerHTML = '<div style=\"color:red; text-align:center; padding: 20px;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e42\u0e1b\u0e23\u0e14\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Google Sheet<\/div>';\n        }\n    }\n\n    \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e33\u0e07\u0e32\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\n    document.addEventListener('DOMContentLoaded', fetchAndRenderAnnouncements);\n\n<\/script>\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<p>Views: 89<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e40\u0e21\u0e19\u0e39 \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e19\u0e31 [&hellip;]<\/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-18168","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18168","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=18168"}],"version-history":[{"count":4,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18168\/revisions"}],"predecessor-version":[{"id":18366,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/18168\/revisions\/18366"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=18168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}