{"id":38,"date":"2023-08-02T00:54:35","date_gmt":"2023-08-01T17:54:35","guid":{"rendered":"https:\/\/p-vec.ac.th\/2023\/?page_id=38"},"modified":"2026-10-13T17:51:07","modified_gmt":"2026-10-13T10:51:07","slug":"home","status":"publish","type":"page","link":"https:\/\/p-vec.ac.th\/2023\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"38\" class=\"elementor elementor-38\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-073b874 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"073b874\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4a5629f\" data-id=\"4a5629f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dfafdf3 elementor-widget elementor-widget-html\" data-id=\"dfafdf3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Quick Access Block (Responsive \/ WordPress HTML Block Ready) -->\r\n<style>\r\n:root{\r\n  --qa-primary:#0d6efd;\r\n  --qa-primary-hover:#0b5ed7;\r\n  --qa-border:#dbe4f0;\r\n  --qa-bg:#ffffff;\r\n  --qa-text:#222;\r\n  --qa-shadow:0 4px 12px rgba(0,0,0,.08);\r\n  --qa-radius:16px;\r\n}\r\n\r\n.quick-access{\r\n    max-width:1200px;\r\n    margin:20px auto;\r\n    padding:20px;\r\n    background:#f8f9fc;\r\n    border:2px solid var(--qa-border);\r\n    border-radius:20px;\r\n    box-shadow:var(--qa-shadow);\r\n    box-sizing: border-box;\r\n}\r\n\r\n.quick-access h2{\r\n    margin:0 0 18px;\r\n    text-align:center;\r\n    color:#0d47a1;\r\n    font-size:1.5rem;\r\n    font-weight:700;\r\n}\r\n\r\n\/* \ud83d\udccc \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19 3 \u0e01\u0e25\u0e48\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e07\u0e41\u0e16\u0e27\u0e40\u0e2a\u0e21\u0e2d (3 Columns) *\/\r\n.qa-grid{\r\n    display:grid;\r\n    grid-template-columns: repeat(3, 1fr); \/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a 3 \u0e0a\u0e48\u0e2d\u0e07\u0e40\u0e2a\u0e21\u0e2d *\/\r\n    gap:15px;\r\n}\r\n\r\n.qa-item{\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    justify-content:center;\r\n    text-align:center;\r\n    text-decoration:none;\r\n    color:var(--qa-text);\r\n\r\n    background:var(--qa-bg);\r\n    border:2px solid var(--qa-border);\r\n    border-radius:var(--qa-radius);\r\n    padding:18px 12px;\r\n    min-height:160px;\r\n    box-sizing: border-box;\r\n\r\n    transition:.3s ease;\r\n}\r\n\r\n.qa-item:hover{\r\n    transform:translateY(-6px);\r\n    border-color:var(--qa-primary);\r\n    box-shadow:0 10px 22px rgba(13,110,253,.25);\r\n    background:#f4f9ff;\r\n}\r\n\r\n.qa-item img{\r\n    width:70px;\r\n    height:70px;\r\n    object-fit:contain;\r\n    margin-bottom:12px;\r\n}\r\n\r\n.qa-title{\r\n    font-size:1rem;\r\n    font-weight:700;\r\n    line-height:1.4;\r\n}\r\n\r\n.qa-item:hover .qa-title{\r\n    color:var(--qa-primary);\r\n}\r\n\r\n\/* \ud83d\udccc \u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e22\u0e48\u0e2d\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e08\u0e2d\u0e40\u0e25\u0e47\u0e01 (\u0e41\u0e15\u0e48\u0e22\u0e31\u0e07\u0e04\u0e07\u0e40\u0e23\u0e35\u0e22\u0e07 [ ][ ][ ] 3 \u0e01\u0e25\u0e48\u0e2d\u0e07\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e40\u0e14\u0e34\u0e21) *\/\r\n@media (max-width:768px){\r\n    .quick-access{\r\n        padding:12px;\r\n    }\r\n\r\n    .qa-grid{\r\n        gap:8px; \/* \u0e25\u0e14\u0e0a\u0e48\u0e2d\u0e07\u0e27\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e01\u0e25\u0e48\u0e2d\u0e07 *\/\r\n    }\r\n\r\n    .qa-item{\r\n        min-height: auto; \/* \u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07\u0e22\u0e48\u0e2d\u0e15\u0e32\u0e21\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 *\/\r\n        padding: 10px 4px;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .qa-item img{\r\n        width: 45px;\r\n        height: 45px;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .qa-title{\r\n        font-size: 0.8rem;\r\n        line-height: 1.2;\r\n    }\r\n}\r\n\r\n\/* \ud83d\udccc \u0e08\u0e2d\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d\u0e02\u0e19\u0e32\u0e14\u0e40\u0e25\u0e47\u0e01\u0e21\u0e32\u0e01 (\u0e40\u0e0a\u0e48\u0e19 Smart Phone) *\/\r\n@media (max-width:420px){\r\n    .quick-access{\r\n        padding: 8px 5px;\r\n    }\r\n\r\n    .quick-access h2{\r\n        font-size: 1.1rem;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .qa-grid{\r\n        gap: 5px; \/* \u0e0a\u0e48\u0e2d\u0e07\u0e27\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e02\u0e19\u0e32\u0e14\u0e40\u0e25\u0e47\u0e01\u0e1e\u0e34\u0e40\u0e28\u0e29 *\/\r\n    }\r\n\r\n    .qa-item{\r\n        padding: 8px 2px;\r\n        border-radius: 8px;\r\n        border-width: 1px; \/* \u0e25\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e19\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a *\/\r\n    }\r\n\r\n    .qa-item img{\r\n        width: 32px; \/* \u0e22\u0e48\u0e2d\u0e42\u0e25\u0e42\u0e01\u0e49\u0e25\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d ~45% *\/\r\n        height: 32px;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .qa-title{\r\n        font-size: 0.65rem; \/* \u0e22\u0e48\u0e2d\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1e\u0e2d\u0e14\u0e35\u0e43\u0e19\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e40\u0e25\u0e47\u0e01 *\/\r\n        line-height: 1.15;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"quick-access\">\r\n\r\n <h2>\ud83c\udf10 E-Services<\/h2>\r\n\r\n    <div class=\"qa-grid\">\r\n\r\n        <!-- \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 1 -->\r\n        <a class=\"qa-item\"\r\n           href=\"https:\/\/std2018.vec.go.th\/web\/\"\r\n           target=\"_blank\">\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2026\/07\/vec1.png\" alt=\"\u0e28\u0e1802\">\r\n\r\n            <div class=\"qa-title\">\r\n                \u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e28\u0e18.02 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e20\u0e32\u0e04\u0e23\u0e31\u0e10\r\n            <\/div>\r\n\r\n        <\/a>\r\n\r\n        <!-- \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 2 -->\r\n        <a class=\"qa-item\"\r\n           href=\"https:\/\/rms.p-vec.ac.th\/\"\r\n           target=\"_blank\">\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2026\/07\/rms-icon.png\" alt=\"RMS\">\r\n\r\n            <div class=\"qa-title\">\r\n                \u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32 (RMS) \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n            <\/div>\r\n\r\n        <\/a>\r\n\r\n        <!-- \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48 3 -->\r\n        <a class=\"qa-item\"\r\n           href=\"http:\/\/pvec.vlcloud.net\/\"\r\n           target=\"_blank\">\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2026\/07\/logo1.png\" alt=\"Library\">\r\n\r\n            <div class=\"qa-title\">\r\n                \u0e23\u0e30\u0e1a\u0e1a E-Library (\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c) \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n            <\/div>\r\n\r\n        <\/a>\r\n\r\n        <!-- \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49 -->\r\n        <!--\r\n        <a class=\"qa-item\"\r\n           href=\"https:\/\/example.com\"\r\n           target=\"_blank\">\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/yourwebsite.com\/logo.png\" alt=\"Logo\">\r\n\r\n            <div class=\"qa-title\">\r\n                \u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e30\u0e1a\u0e1a\r\n            <\/div>\r\n\r\n        <\/a>\r\n        -->\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8978304 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8978304\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3040eef\" data-id=\"3040eef\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0fc216b elementor-widget elementor-widget-html\" data-id=\"0fc216b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"catalog-wrapper\">\r\n    <div class=\"catalog-tabs\" id=\"catalogTabs\"><\/div>\r\n\r\n    <div id=\"catalogContent\" class=\"catalog-content\">\r\n        <div class=\"loading\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"catalogLoading\" class=\"catalog-loading\">\r\n    <div class=\"loading-box\">\r\n        <div class=\"spinner\"><\/div>\r\n        <div>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n.catalog-wrapper{\r\n    width:100%;\r\n    max-width:900px;\r\n    margin:auto;\r\n    font-family:Arial,\"Tahoma\",sans-serif;\r\n}\r\n\r\n\/* TAB *\/\r\n.catalog-tabs{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:0;\r\n    background:#f5f5f5;\r\n    border:1px solid #ccc;\r\n    border-bottom:none;\r\n    border-radius:10px 10px 0 0;\r\n    overflow:hidden;\r\n    box-shadow:0 3px 8px rgba(0,0,0,.12);\r\n}\r\n\r\n.catalog-tab{\r\n    flex:1;\r\n    min-width:150px;\r\n    padding:12px 10px;\r\n    background:#e9e9e9;\r\n    border-right:1px solid #ccc;\r\n    border-bottom:1px solid #ccc;\r\n    text-align:center;\r\n    cursor:pointer;\r\n    font-weight:bold;\r\n    color:#333;\r\n    transition:.25s;\r\n}\r\n\r\n.catalog-tab:last-child{\r\n    border-right:none;\r\n}\r\n\r\n.catalog-tab:hover{\r\n    background:#eaf4ff;\r\n    color:#0066cc;\r\n}\r\n\r\n.catalog-tab.active{\r\n    background:#fff;\r\n    color:#0066cc;\r\n    border-bottom:1px solid #fff;\r\n}\r\n\r\n\r\n\/* CONTENT *\/\r\n.catalog-content{\r\n    background:#fff;\r\n    border:1px solid #ccc;\r\n    border-radius:0 0 10px 10px;\r\n    padding:15px;\r\n    margin-top:-1px;\r\n    min-height:100px;\r\n    box-shadow:0 3px 8px rgba(0,0,0,.12);\r\n}\r\n\r\n\r\n\/* ARTICLE *\/\r\n.article-item{\r\n    margin-bottom:8px;\r\n    background:#fafafa;\r\n    border:1px solid #ddd;\r\n    border-radius:8px;\r\n    overflow:hidden;\r\n    transition:.25s;\r\n}\r\n\r\n.article-item:hover{\r\n    background:#eaf4ff;\r\n    border-color:#0066cc;\r\n    transform:translateX(3px);\r\n    box-shadow:0 3px 8px rgba(0,102,204,.25);\r\n}\r\n\r\n.article-item a{\r\n    display:block;\r\n    padding:14px;\r\n    text-decoration:none;\r\n    color:#222;\r\n    font-size:16px;\r\n    line-height:1.5;\r\n}\r\n\r\n.article-item a:hover{\r\n    color:#0056b3;\r\n}\r\n\r\n\r\n\/* BUTTON *\/\r\n.catalog-button{\r\n    width:100%;\r\n    margin-top:15px;\r\n    padding:12px;\r\n    border:none;\r\n    border-radius:8px;\r\n    background:#0066cc;\r\n    color:#fff;\r\n    font-size:16px;\r\n    cursor:pointer;\r\n}\r\n\r\n.catalog-button:hover{\r\n    background:#004999;\r\n}\r\n\r\n\r\n\/* LOADING TEXT *\/\r\n.loading{\r\n    text-align:center;\r\n    padding:30px;\r\n    color:#666;\r\n}\r\n\r\n\r\n\/* MODAL LOADING *\/\r\n.catalog-loading{\r\n    display:none;\r\n    position:fixed;\r\n    top:0;\r\n    left:0;\r\n    width:100%;\r\n    height:100%;\r\n    background:rgba(255,255,255,.75);\r\n    z-index:9999;\r\n    align-items:center;\r\n    justify-content:center;\r\n}\r\n\r\n.loading-box{\r\n    background:#fff;\r\n    padding:25px 35px;\r\n    border-radius:12px;\r\n    box-shadow:0 5px 20px rgba(0,0,0,.2);\r\n    text-align:center;\r\n    color:#333;\r\n    font-size:16px;\r\n}\r\n\r\n.spinner{\r\n    width:40px;\r\n    height:40px;\r\n    margin:0 auto 15px;\r\n    border:4px solid #ddd;\r\n    border-top:4px solid #0066cc;\r\n    border-radius:50%;\r\n    animation:spin .8s linear infinite;\r\n}\r\n\r\n@keyframes spin{\r\n    from{\r\n        transform:rotate(0deg);\r\n    }\r\n    to{\r\n        transform:rotate(360deg);\r\n    }\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n@media(max-width:600px){\r\n\r\n    .catalog-tabs{\r\n        display:grid;\r\n        grid-template-columns:repeat(2,1fr);\r\n    }\r\n\r\n    .catalog-tab{\r\n        min-width:auto;\r\n        font-size:14px;\r\n        padding:10px 5px;\r\n    }\r\n\r\n    .article-item a{\r\n        font-size:15px;\r\n        padding:12px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\nconst catalogTabs=[\r\n    {\r\n        name:\"\u0e02\u0e48\u0e32\u0e27\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\",\r\n        categoryID:6,\r\n        show:6\r\n    },\r\n    {\r\n        name:\"\u0e02\u0e48\u0e32\u0e27\u0e41\u0e08\u0e49\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19-\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\",\r\n        categoryID:5,\r\n        show:6\r\n    },\r\n    {\r\n        name:\"\u0e02\u0e48\u0e32\u0e27\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d-\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07\",\r\n        categoryID:7,\r\n        show:6\r\n    },\r\n    {\r\n        name:\"\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e07\u0e1a\u0e17\u0e14\u0e25\u0e2d\u0e07\",\r\n        categoryID:1,\r\n        show:6\r\n    }\r\n];\r\n\r\n\r\nlet currentTab=0;\r\nlet isLoading=false;\r\nlet loadingBox;\r\n\r\n\r\n\/*\r\n\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e15\u0e48\u0e25\u0e30 Tab\r\n*\/\r\nlet tabCache={};\r\n\r\n\/*\r\n\u0e2d\u0e48\u0e32\u0e19\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02 Tab \u0e08\u0e32\u0e01 URL\r\n\u0e40\u0e0a\u0e48\u0e19 ?tab=3\r\n*\/\r\nfunction getTabFromURL(){\r\n\r\n    const params = new URLSearchParams(window.location.search);\r\n\r\n    const tab = parseInt(params.get(\"tab\"),10);\r\n\r\n    if(!isNaN(tab) && tab>=1 && tab<=catalogTabs.length){\r\n\r\n        return tab-1;\r\n\r\n    }\r\n\r\n    return 0;\r\n\r\n}\r\n\r\nconst tabBox=document.getElementById(\"catalogTabs\");\r\n\r\n\r\ncatalogTabs.forEach((tab,index)=>{\r\n\r\n    let button=document.createElement(\"div\");\r\n\r\n    button.className=\"catalog-tab\";\r\n\r\n    button.innerHTML=tab.name;\r\n\r\n    button.onclick=function(){\r\n\r\n        loadTab(index);\r\n\r\n    };\r\n\r\n    tabBox.appendChild(button);\r\n\r\n});\r\n\r\n\r\n\r\nfunction showLoading(){\r\n\r\n    if(loadingBox){\r\n        loadingBox.style.display=\"flex\";\r\n    }\r\n\r\n}\r\n\r\n\r\nfunction hideLoading(){\r\n\r\n    if(loadingBox){\r\n        loadingBox.style.display=\"none\";\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/*\r\n\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Cache\r\n*\/\r\nfunction renderTab(){\r\n\r\n    let data=tabCache[currentTab];\r\n\r\n\r\n    let buttonHTML=\"\";\r\n\r\n\r\n    if(!data.finished){\r\n\r\n        buttonHTML=`\r\n\r\n        <button class=\"catalog-button\" onclick=\"loadMore()\">\r\n\r\n            \u0e42\u0e2b\u0e25\u0e14\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e40\u0e01\u0e48\u0e32\r\n\r\n        <\/button>\r\n\r\n        `;\r\n\r\n    }\r\n\r\n\r\n\r\n    document\r\n    .getElementById(\"catalogContent\")\r\n    .innerHTML=\r\n\r\n    `\r\n\r\n    <div id=\"articleList\">\r\n\r\n        ${data.html}\r\n\r\n    <\/div>\r\n\r\n    ${buttonHTML}\r\n\r\n    `;\r\n\r\n}\r\n\r\n\r\n\r\n\/*\r\n\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 Tab\r\n*\/\r\nfunction loadTab(index){\r\n\r\n\r\n    currentTab=index;\r\n\r\n\r\n    document.querySelectorAll(\".catalog-tab\")\r\n    .forEach((el,i)=>{\r\n\r\n        el.classList.toggle(\r\n            \"active\",\r\n            i===index\r\n        );\r\n\r\n    });\r\n\r\n\r\n\r\n    if(tabCache[index]){\r\n\r\n\r\n        renderTab();\r\n\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n\r\n    loadArticles(false);\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/*\r\n\u0e42\u0e2b\u0e25\u0e14\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n*\/\r\nfunction loadArticles(append){\r\n\r\n\r\n    if(isLoading){\r\n        return;\r\n    }\r\n\r\n\r\n    isLoading=true;\r\n\r\n    showLoading();\r\n\r\n\r\n\r\n    let tab=catalogTabs[currentTab];\r\n\r\n\r\n\r\n    if(!tabCache[currentTab]){\r\n\r\n\r\n        tabCache[currentTab]={\r\n\r\n            html:\"\",\r\n\r\n            page:1,\r\n\r\n            finished:false\r\n\r\n        };\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    let data=tabCache[currentTab];\r\n\r\n\r\n    let page=data.page;\r\n\r\n\r\n\r\n    if(append){\r\n\r\n        page++;\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n    let url=\r\n\r\n    `${window.location.origin}\/2023\/wp-json\/wp\/v2\/posts?categories=${tab.categoryID}&per_page=${tab.show}&page=${page}`;\r\n\r\n\r\n\r\n    fetch(url)\r\n\r\n\r\n    .then(response=>{\r\n\r\n\r\n        if(!response.ok){\r\n\r\n\r\n            if(append){\r\n\r\n                return [];\r\n\r\n            }\r\n\r\n\r\n            throw new Error();\r\n\r\n        }\r\n\r\n\r\n        return response.json();\r\n\r\n\r\n    })\r\n\r\n\r\n    .then(posts=>{\r\n\r\n\r\n        \/*\r\n        \u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\r\n        *\/\r\n        if(append && posts.length===0){\r\n\r\n\r\n            data.finished=true;\r\n\r\n\r\n            renderTab();\r\n\r\n\r\n            hideLoading();\r\n\r\n            isLoading=false;\r\n\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n        let html=\"\";\r\n\r\n\r\n\r\n        posts.forEach(post=>{\r\n\r\n\r\n            html+=`\r\n\r\n            <div class=\"article-item\">\r\n\r\n                <a href=\"${post.link}\">\r\n                    ${post.title.rendered}\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n            `;\r\n\r\n\r\n        });\r\n\r\n\r\n\r\n\r\n        \/*\r\n        \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e48\u0e2d\u0e17\u0e49\u0e32\u0e22\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e21\r\n        \u0e44\u0e21\u0e48\u0e22\u0e38\u0e48\u0e07\u0e01\u0e31\u0e1a\u0e1b\u0e38\u0e48\u0e21\r\n        *\/\r\n\r\n        data.html += html;\r\n\r\n\r\n\r\n        data.page=page;\r\n\r\n\r\n\r\n        renderTab();\r\n\r\n\r\n\r\n        hideLoading();\r\n\r\n        isLoading=false;\r\n\r\n\r\n\r\n    })\r\n\r\n\r\n\r\n    .catch(()=>{\r\n\r\n\r\n        hideLoading();\r\n\r\n        isLoading=false;\r\n\r\n\r\n\r\n        if(!append){\r\n\r\n\r\n            document\r\n            .getElementById(\"catalogContent\")\r\n            .innerHTML=\r\n\r\n            `\r\n\r\n            <div class=\"loading\">\r\n\r\n                \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n\r\n            <\/div>\r\n\r\n            `;\r\n\r\n        }\r\n\r\n\r\n    });\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\nfunction loadMore(){\r\n\r\n\r\n    if(tabCache[currentTab].finished){\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    loadArticles(true);\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"DOMContentLoaded\",()=>{\r\n\r\n    loadingBox=\r\n    document.getElementById(\"catalogLoading\");\r\n\r\n    loadTab(getTabFromURL());\r\n\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5f057b9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5f057b9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-05a5b7d\" data-id=\"05a5b7d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-759c425 anwp-pg-widget-header-style--b anwp-pg-post-teaser__post-icon--size-16 elementor-arrows-position-inside elementor-widget elementor-widget-anwp-pg-simple-slider\" data-id=\"759c425\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"anwp-pg-simple-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"anwp-pg-wrap\">\n\n\t\n\t<!-- Slider main container -->\n\t<div\n\t\tclass=\"anwp-pg-simple-slider anwp-pg-swiper-wrapper position-relative swiper swiper-container anwp-pg-no-transform\"\n\t\tdata-pg-slides-per-view=\"5\"\n\t\tdata-pg-slides-per-view-mobile=\"1\"\n\t\tdata-pg-slides-per-view-tablet=\"2\"\n\t\tdata-pg-slides-per-group=\"1\"\n\t\tdata-pg-slides-per-group-mobile=\"1\"\n\t\tdata-pg-slides-per-group-tablet=\"1\"\n\t\tdata-pg-autoplay=\"no\"\n\t\tdata-pg-autoplay-delay=\"\"\n\t\tdata-pg-space-between=\"10\"\n\t\tdata-pg-effect=\"slide\"\n\t\tdata-pg-enable-observer=\"no\"\n\t\tdata-pg-loop=\"yes\"\n\t\tdir=\"ltr\"\n\t>\n\t\t<!-- Additional required wrapper -->\n\t\t<div class=\"swiper-wrapper\">\n\t\t\t<!-- Slides -->\n\t\t\t<div class=\"anwp-pg-post-teaser anwp-pg-post-teaser--layout-a swiper-slide\">\n\t<div class=\"anwp-pg-post-teaser__thumbnail position-relative\">\n\n\t\t\n\t\t\t\t\t<img loading=\"lazy\" class=\"anwp-pg-post-teaser__thumbnail-img d-block anwp-pg-height-150 anwp-object-cover m-0 w-100\"\n\t\t\t\talt=\"\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21 2568\"\n\t\t\t\tsrc=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2025\/08\/hilight-cover-150x150.jpg\" \/>\n\t\t\n\t\t<div class=\"anwp-pg-post-teaser__muted_bg\"><\/div>\n\t\t<div class=\"anwp-pg-post-teaser__thumbnail-bg anwp-position-cover\"><\/div>\n\n\t\t<div class=\"anwp-pg-post-teaser__content d-flex flex-column anwp-position-cover\">\n\t\t\t<div class=\"anwp-pg-post-teaser__top-meta d-flex mb-2\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"anwp-pg-post-teaser__title anwp-font-heading mt-auto mb-1\">\n\t\t\t\t\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21 2568\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"anwp-pg-post-teaser__bottom-meta mt-1 position-relative mb-2\">\n\t\t\t\t\t<span class=\"posted-on m-0\"><span class=\"screen-reader-text\">Posted on<\/span><time class=\"anwp-pg-published\" datetime=\"2025-05-08T17:59:00+07:00\">8 \u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21 2025<\/time><time class=\"anwp-pg-updated\" datetime=\"2025-08-15T18:05:26+07:00\">15 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2025<\/time><\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t<a class=\"anwp-position-cover anwp-link-without-effects\" href=\"https:\/\/p-vec.ac.th\/2023\/hilight\/%e0%b8%88%e0%b8%94%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%9e%e0%b8%a4%e0%b8%a9%e0%b8%a0%e0%b8%b2%e0%b8%84%e0%b8%a1-2\/\" aria-hidden=\"true\" ><\/a>\n\t<\/div>\n<\/div>\n<div class=\"anwp-pg-post-teaser anwp-pg-post-teaser--layout-a swiper-slide\">\n\t<div class=\"anwp-pg-post-teaser__thumbnail position-relative\">\n\n\t\t\n\t\t\t\t\t<img loading=\"lazy\" class=\"anwp-pg-post-teaser__thumbnail-img d-block anwp-pg-height-150 anwp-object-cover m-0 w-100\"\n\t\t\t\talt=\"\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19 2568\"\n\t\t\t\tsrc=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2025\/08\/hilight-cover-150x150.jpg\" \/>\n\t\t\n\t\t<div class=\"anwp-pg-post-teaser__muted_bg\"><\/div>\n\t\t<div class=\"anwp-pg-post-teaser__thumbnail-bg anwp-position-cover\"><\/div>\n\n\t\t<div class=\"anwp-pg-post-teaser__content d-flex flex-column anwp-position-cover\">\n\t\t\t<div class=\"anwp-pg-post-teaser__top-meta d-flex mb-2\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"anwp-pg-post-teaser__title anwp-font-heading mt-auto mb-1\">\n\t\t\t\t\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19 2568\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"anwp-pg-post-teaser__bottom-meta mt-1 position-relative mb-2\">\n\t\t\t\t\t<span class=\"posted-on m-0\"><span class=\"screen-reader-text\">Posted on<\/span><time class=\"anwp-pg-published\" datetime=\"2025-04-08T17:57:00+07:00\">8 \u0e40\u0e21\u0e29\u0e32\u0e22\u0e19 2025<\/time><time class=\"anwp-pg-updated\" datetime=\"2025-08-15T18:05:33+07:00\">15 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2025<\/time><\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t<a class=\"anwp-position-cover anwp-link-without-effects\" href=\"https:\/\/p-vec.ac.th\/2023\/hilight\/%e0%b8%88%e0%b8%94%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b9%80%e0%b8%a1%e0%b8%a9%e0%b8%b2%e0%b8%a2%e0%b8%99-2568\/\" aria-hidden=\"true\" ><\/a>\n\t<\/div>\n<\/div>\n<div class=\"anwp-pg-post-teaser anwp-pg-post-teaser--layout-a swiper-slide\">\n\t<div class=\"anwp-pg-post-teaser__thumbnail position-relative\">\n\n\t\t\n\t\t\t\t\t<img loading=\"lazy\" class=\"anwp-pg-post-teaser__thumbnail-img d-block anwp-pg-height-150 anwp-object-cover m-0 w-100\"\n\t\t\t\talt=\"\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 2568\"\n\t\t\t\tsrc=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2025\/08\/hilight-cover-150x150.jpg\" \/>\n\t\t\n\t\t<div class=\"anwp-pg-post-teaser__muted_bg\"><\/div>\n\t\t<div class=\"anwp-pg-post-teaser__thumbnail-bg anwp-position-cover\"><\/div>\n\n\t\t<div class=\"anwp-pg-post-teaser__content d-flex flex-column anwp-position-cover\">\n\t\t\t<div class=\"anwp-pg-post-teaser__top-meta d-flex mb-2\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"anwp-pg-post-teaser__title anwp-font-heading mt-auto mb-1\">\n\t\t\t\t\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 2568\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"anwp-pg-post-teaser__bottom-meta mt-1 position-relative mb-2\">\n\t\t\t\t\t<span class=\"posted-on m-0\"><span class=\"screen-reader-text\">Posted on<\/span><time class=\"anwp-pg-published\" datetime=\"2025-03-05T13:15:00+07:00\">5 \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 2025<\/time><time class=\"anwp-pg-updated\" datetime=\"2025-08-15T13:19:48+07:00\">15 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2025<\/time><\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t<a class=\"anwp-position-cover anwp-link-without-effects\" href=\"https:\/\/p-vec.ac.th\/2023\/hilight\/%e0%b8%88%e0%b8%94%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%a1%e0%b8%b5%e0%b8%99%e0%b8%b2%e0%b8%84%e0%b8%a1-2568\/\" aria-hidden=\"true\" ><\/a>\n\t<\/div>\n<\/div>\n<div class=\"anwp-pg-post-teaser anwp-pg-post-teaser--layout-a swiper-slide\">\n\t<div class=\"anwp-pg-post-teaser__thumbnail position-relative\">\n\n\t\t\n\t\t\t\t\t<img loading=\"lazy\" class=\"anwp-pg-post-teaser__thumbnail-img d-block anwp-pg-height-150 anwp-object-cover m-0 w-100\"\n\t\t\t\talt=\"\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c 2568\"\n\t\t\t\tsrc=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2025\/08\/hilight-cover-150x150.jpg\" \/>\n\t\t\n\t\t<div class=\"anwp-pg-post-teaser__muted_bg\"><\/div>\n\t\t<div class=\"anwp-pg-post-teaser__thumbnail-bg anwp-position-cover\"><\/div>\n\n\t\t<div class=\"anwp-pg-post-teaser__content d-flex flex-column anwp-position-cover\">\n\t\t\t<div class=\"anwp-pg-post-teaser__top-meta d-flex mb-2\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"anwp-pg-post-teaser__title anwp-font-heading mt-auto mb-1\">\n\t\t\t\t\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c 2568\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"anwp-pg-post-teaser__bottom-meta mt-1 position-relative mb-2\">\n\t\t\t\t\t<span class=\"posted-on m-0\"><span class=\"screen-reader-text\">Posted on<\/span><time class=\"anwp-pg-published\" datetime=\"2025-02-07T17:52:00+07:00\">7 \u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c 2025<\/time><time class=\"anwp-pg-updated\" datetime=\"2025-08-15T17:58:24+07:00\">15 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2025<\/time><\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t<a class=\"anwp-position-cover anwp-link-without-effects\" href=\"https:\/\/p-vec.ac.th\/2023\/hilight\/%e0%b8%88%e0%b8%94%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%81%e0%b8%b8%e0%b8%a1%e0%b8%a0%e0%b8%b2%e0%b8%9e%e0%b8%b1\/\" aria-hidden=\"true\" ><\/a>\n\t<\/div>\n<\/div>\n<div class=\"anwp-pg-post-teaser anwp-pg-post-teaser--layout-a swiper-slide\">\n\t<div class=\"anwp-pg-post-teaser__thumbnail position-relative\">\n\n\t\t\n\t\t\t\t\t<img loading=\"lazy\" class=\"anwp-pg-post-teaser__thumbnail-img d-block anwp-pg-height-150 anwp-object-cover m-0 w-100\"\n\t\t\t\talt=\"\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21 2568\"\n\t\t\t\tsrc=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2025\/08\/hilight-cover-150x150.jpg\" \/>\n\t\t\n\t\t<div class=\"anwp-pg-post-teaser__muted_bg\"><\/div>\n\t\t<div class=\"anwp-pg-post-teaser__thumbnail-bg anwp-position-cover\"><\/div>\n\n\t\t<div class=\"anwp-pg-post-teaser__content d-flex flex-column anwp-position-cover\">\n\t\t\t<div class=\"anwp-pg-post-teaser__top-meta d-flex mb-2\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"anwp-pg-post-teaser__title anwp-font-heading mt-auto mb-1\">\n\t\t\t\t\u0e08\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e48\u0e32\u0e27\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21 2568\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"anwp-pg-post-teaser__bottom-meta mt-1 position-relative mb-2\">\n\t\t\t\t\t<span class=\"posted-on m-0\"><span class=\"screen-reader-text\">Posted on<\/span><time class=\"anwp-pg-published\" datetime=\"2025-02-03T13:09:00+07:00\">3 \u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c 2025<\/time><time class=\"anwp-pg-updated\" datetime=\"2025-08-15T17:55:24+07:00\">15 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2025<\/time><\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t<a class=\"anwp-position-cover anwp-link-without-effects\" href=\"https:\/\/p-vec.ac.th\/2023\/hilight\/%e0%b8%88%e0%b8%94%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%a1%e0%b8%81%e0%b8%a3%e0%b8%b2%e0%b8%84%e0%b8%a1-2568\/\" aria-hidden=\"true\" ><\/a>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\">\n\t\t\t\t\t<svg class=\"anwp-pg-icon anwp-pg-icon--feather anwp-pg-icon--s28\">\n\t\t\t\t\t\t<use xlink:href=\"#icon-anwp-pg-chevron-left\"><\/use>\n\t\t\t\t\t<\/svg>\n\t\t\t\t\t<span class=\"elementor-screen-only\">Previous<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\">\n\t\t\t\t\t<svg class=\"anwp-pg-icon anwp-pg-icon--feather anwp-pg-icon--s28\">\n\t\t\t\t\t\t<use xlink:href=\"#icon-anwp-pg-chevron-right\"><\/use>\n\t\t\t\t\t<\/svg>\n\t\t\t\t\t<span class=\"elementor-screen-only\">Next<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cfb1154 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cfb1154\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-01b9ca7\" data-id=\"01b9ca7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8ec873b elementor-widget elementor-widget-menu-anchor\" data-id=\"8ec873b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"01\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e8e295a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e8e295a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ba33ca9\" data-id=\"ba33ca9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-adab410 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"adab410\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-63e2853\" data-id=\"63e2853\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6bead5f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6bead5f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa30c56\" data-id=\"fa30c56\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b3c96d5 elementor-widget elementor-widget-html\" data-id=\"b3c96d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Activity Gallery Block (Responsive \/ 3x3 Grid \/ Year & Month Filter Ready) -->\r\n<style>\r\n:root {\r\n  --ag-primary: #0d6efd;\r\n  --ag-primary-hover: #0b5ed7;\r\n  --ag-border: #dbe4f0;\r\n  --ag-bg: #ffffff;\r\n  --ag-text: #222;\r\n  --ag-subtext: #555;\r\n  --ag-shadow: 0 4px 12px rgba(0,0,0,.08);\r\n  --ag-radius: 10px;\r\n}\r\n\r\n.activity-gallery {\r\n  max-width: 1200px;\r\n  margin: 6px auto !important;\r\n  padding: 10px 14px;\r\n  background: #f8f9fc;\r\n  border: 1.5px solid var(--ag-border);\r\n  border-radius: 16px;\r\n  box-shadow: var(--ag-shadow);\r\n  box-sizing: border-box;\r\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n\/* \ud83d\udccc Header & Year Selector Style *\/\r\n.ag-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 8px;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n}\r\n\r\n.ag-header h2 {\r\n  margin: 0 !important;\r\n  color: #0d47a1;\r\n  font-size: 1.15rem;\r\n  font-weight: 700;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.ag-year-picker-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  background: #ffffff;\r\n  padding: 2px 8px;\r\n  border: 1.5px solid var(--ag-primary);\r\n  border-radius: 20px;\r\n  box-shadow: 0 2px 6px rgba(13,110,253,0.15);\r\n}\r\n\r\n.ag-year-label {\r\n  font-size: 0.78rem;\r\n  font-weight: 600;\r\n  color: var(--ag-primary);\r\n}\r\n\r\n.ag-year-select {\r\n  border: none;\r\n  background: transparent;\r\n  font-size: 0.85rem;\r\n  font-weight: 700;\r\n  color: #0d47a1;\r\n  cursor: pointer;\r\n  outline: none;\r\n  padding: 2px 4px;\r\n}\r\n\r\n\/* \ud83d\udccc \u0e15\u0e32\u0e23\u0e32\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 3x3 *\/\r\n.ag-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n}\r\n\r\n.ag-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--ag-bg);\r\n  border: 1.5px solid var(--ag-border);\r\n  border-radius: var(--ag-radius);\r\n  padding: 6px;\r\n  text-decoration: none;\r\n  color: var(--ag-text);\r\n  box-sizing: border-box;\r\n  transition: transform .2s ease, border-color .2s ease;\r\n  position: relative;\r\n  cursor: pointer;\r\n  min-width: 0;\r\n}\r\n\r\n.ag-card:hover {\r\n  transform: translateY(-3px);\r\n  border-color: var(--ag-primary);\r\n  box-shadow: 0 4px 12px rgba(13,110,253,.15);\r\n  background: #f4f9ff;\r\n}\r\n\r\n.ag-img-wrapper {\r\n  width: 100%;\r\n  aspect-ratio: 16 \/ 9;\r\n  border-radius: calc(var(--ag-radius) - 3px);\r\n  overflow: hidden;\r\n  background: #e9ecef;\r\n  margin-bottom: 4px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ag-img-wrapper img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform .3s ease;\r\n}\r\n\r\n.ag-card:hover .ag-img-wrapper img {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.ag-date-tag {\r\n  font-size: 0.65rem;\r\n  color: #0d6efd;\r\n  font-weight: 600;\r\n  margin-bottom: 2px;\r\n}\r\n\r\n.ag-title {\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  line-height: 1.25;\r\n  margin-bottom: 2px;\r\n  color: var(--ag-text);\r\n  word-break: break-word;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.ag-card:hover .ag-title {\r\n  color: var(--ag-primary);\r\n}\r\n\r\n.ag-desc {\r\n  font-size: 0.7rem;\r\n  color: var(--ag-subtext);\r\n  line-height: 1.2;\r\n  word-break: break-word;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 1;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n.ag-btn-container {\r\n  text-align: center;\r\n  margin-top: 8px !important;\r\n}\r\n\r\n.ag-view-all-btn {\r\n  background: var(--ag-primary);\r\n  color: #fff;\r\n  border: none;\r\n  padding: 6px 18px;\r\n  font-size: 0.82rem;\r\n  font-weight: 600;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  transition: .2s ease;\r\n  box-shadow: 0 2px 6px rgba(13,110,253,.2);\r\n}\r\n\r\n.ag-view-all-btn:hover {\r\n  background: var(--ag-primary-hover);\r\n  transform: translateY(-1px);\r\n}\r\n\r\n\/* \ud83d\udccc Modal \u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e21\u0e40\u0e14\u0e37\u0e2d\u0e19 *\/\r\n.ag-modal {\r\n  display: none;\r\n  position: fixed;\r\n  top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n  background: rgba(0,0,0,0.6);\r\n  backdrop-filter: blur(4px);\r\n  z-index: 9999;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 12px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ag-modal.active { display: flex; }\r\n\r\n.ag-modal-content {\r\n  background: #fff;\r\n  border-radius: 16px;\r\n  max-width: 850px;\r\n  width: 100%;\r\n  max-height: 88vh;\r\n  overflow-y: auto;\r\n  padding: 18px;\r\n  position: relative;\r\n  box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n}\r\n\r\n.ag-modal-close {\r\n  position: absolute;\r\n  top: 10px; right: 14px;\r\n  font-size: 1.6rem;\r\n  font-weight: bold;\r\n  color: #888;\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n.ag-modal-close:hover { color: #000; }\r\n\r\n.ag-month-section {\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.ag-month-title {\r\n  font-size: 1rem;\r\n  font-weight: 700;\r\n  color: #0d47a1;\r\n  padding-bottom: 4px;\r\n  border-bottom: 2px solid #dbe4f0;\r\n  margin-bottom: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.ag-modal-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.ag-modal-list .ag-card {\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 6px;\r\n}\r\n\r\n.ag-modal-list .ag-img-wrapper {\r\n  width: 110px;\r\n  aspect-ratio: 16 \/ 9;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ag-modal-list .ag-card-info {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n.ag-empty-state {\r\n  text-align: center;\r\n  padding: 20px;\r\n  color: #888;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n\/* \ud83d\udcf1 Responsive *\/\r\n@media (max-width: 768px) {\r\n  .activity-gallery { padding: 8px 10px; }\r\n  .ag-grid { gap: 6px; }\r\n  .ag-card { padding: 5px; }\r\n  .ag-title { font-size: 0.72rem; }\r\n  .ag-desc { display: none; } \/* \u0e0b\u0e48\u0e2d\u0e19\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e31\u0e49\u0e19\u0e1a\u0e19\u0e08\u0e2d\u0e40\u0e25\u0e47\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48 *\/\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .ag-header h2 { font-size: 1rem; }\r\n  .ag-grid { gap: 4px; }\r\n  .ag-card { padding: 4px; border-radius: 6px; }\r\n  .ag-date-tag { font-size: 0.55rem; }\r\n  .ag-title { font-size: 0.65rem; -webkit-line-clamp: 2; }\r\n  .ag-modal-list .ag-img-wrapper { width: 80px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"activity-gallery\">\r\n  <div class=\"ag-header\">\r\n    <h2>\ud83d\udcf8 \u0e20\u0e32\u0e1e\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/h2>\r\n    <!-- \ud83d\udccc Dropdown \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35 -->\r\n    <div class=\"ag-year-picker-wrapper\" title=\"\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35 \u0e1e.\u0e28.\">\r\n      <span class=\"ag-year-label\">\ud83d\udcc5 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35:<\/span>\r\n      <select class=\"ag-year-select\" id=\"agYearSelect\" onchange=\"onYearChange(this.value)\">\r\n        <!-- \u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35\u0e08\u0e30\u0e16\u0e39\u0e01\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e49\u0e27\u0e22 JS -->\r\n      <\/select>\r\n    <\/div>\r\n  <\/div>\r\n  \r\n  <!-- \u0e15\u0e32\u0e23\u0e32\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 3x3 (\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 9 \u0e0a\u0e48\u0e2d\u0e07) -->\r\n  <div class=\"ag-grid\" id=\"agGrid\"><\/div>\r\n\r\n  <!-- \u0e1b\u0e38\u0e48\u0e21\u0e01\u0e14\u0e14\u0e39\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 -->\r\n  <div class=\"ag-btn-container\" id=\"agBtnContainer\" style=\"display: none;\">\r\n    <button class=\"ag-view-all-btn\" id=\"agViewAllBtn\" onclick=\"openAgModal()\">\u0e14\u0e39\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e02\u0e2d\u0e07\u0e1b\u0e35\u0e19\u0e35\u0e49<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Modal \u0e41\u0e2a\u0e14\u0e07\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e40\u0e14\u0e37\u0e2d\u0e19 -->\r\n<div class=\"ag-modal\" id=\"agModal\" onclick=\"closeAgModalOutside(event)\">\r\n  <div class=\"ag-modal-content\">\r\n    <button class=\"ag-modal-close\" onclick=\"closeAgModal()\">&times;<\/button>\r\n    <h2 id=\"agModalHeaderTitle\" style=\"color:#0d47a1; margin-top:0; font-size: 1.2rem;\">\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h2>\r\n    <div id=\"agModalMonthContainer\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \ud83d\udccc \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 (\u0e23\u0e30\u0e1a\u0e38 id: YYYY-MM-XXX \u0e41\u0e25\u0e30 date: YYYY-MM-DD)\r\nconst activityData = [\r\n  {\r\n    id: \"2569-10-001\",\r\n    date: \"2569-10-10\",\r\n    title: \"\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 Fix it Center \u0e0a\u0e48\u0e27\u0e22\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e20\u0e31\u0e22\u0e19\u0e49\u0e33\u0e17\u0e48\u0e27\u0e21 \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 10-11 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2569\",\r\n    desc: \"\u0e13 \u0e2b\u0e21\u0e39\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e1f\u0e49\u0e32\u0e04\u0e23\u0e32\u0e21\u0e19\u0e04\u0e23 \u0e04\u0e25\u0e2d\u0e072 \u0e15.\u0e04\u0e39\u0e04\u0e15 \u0e2d.\u0e25\u0e33\u0e25\u0e39\u0e01\u0e01\u0e32 \u0e08.\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\",\r\n    driveImg: \"https:\/\/drive.google.com\/file\/d\/10hNSU961bd2XeMT5PyiPSGelsGzL0zOj\/view\",\r\n    link: \"https:\/\/drive.google.com\/drive\/folders\/1C1kmgNNpcIa5ewyWVdU_ByUC01KbNwNL\"\r\n  },\r\n  {\r\n    id: \"2569-10-002\",\r\n    date: \"2569-10-12\",\r\n    title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e07\u0e32\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 12 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2569\",\r\n    desc: \"\u0e13 \u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1a\u0e31\u0e27\u0e0a\u0e21\u0e1e\u0e39\",\r\n    driveImg: \"https:\/\/drive.google.com\/file\/d\/1op0zUtDUk__vqKTO3CA4GNuAc_JAK_pn\/view\",\r\n    link: \"https:\/\/drive.google.com\/drive\/folders\/1oc5FLNVHvwLrX_Gv_RxsYquMQFGMJzEe\"\r\n  },\r\n  {\r\n    id: \"2569-10-003\",\r\n    date: \"2569-10-12\",\r\n    title: \"\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e32\u0e23\u0e37\u0e2d\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19 \u0e01\u0e32\u0e23\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e20\u0e32\u0e04\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48 2\/2569 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 12 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2569\",\r\n    desc: \"\u0e13 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\",\r\n    driveImg: \"https:\/\/drive.google.com\/file\/d\/1bOG_k7j2u5nYZigJS_bdlhRJgupoiFJD\/view\",\r\n    link: \"https:\/\/drive.google.com\/drive\/folders\/1rzaPKCKms6f_CckoOJqQDrXNENtFMEoT\"\r\n  },\r\n  {\r\n    id: \"2569-10-004\",\r\n    date: \"2569-10-12\",\r\n    title: \"\u0e01\u0e32\u0e23\u0e23\u0e48\u0e27\u0e21\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e22\u0e34\u0e19\u0e14\u0e35 \u0e01\u0e31\u0e1a\u0e04\u0e23\u0e39\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08 \u0e2a\u0e07\u0e27\u0e19\u0e43\u0e08 \u0e43\u0e19\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e44\u0e14\u0e49\u0e22\u0e49\u0e32\u0e22\u0e44\u0e1b\u0e14\u0e33\u0e23\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 \u0e13 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e25\u0e33\u0e1b\u0e32\u0e07 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 12 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2569\",\r\n    desc: \"\u0e13 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\",\r\n    driveImg: \"https:\/\/drive.google.com\/file\/d\/10Wk5FwWEfs1wN9APQxLx5hhCzvMmNSAi\/view\",\r\n    link: \"https:\/\/drive.google.com\/drive\/folders\/17M3o3mWZPAsC5nO98vdX4EMRrouo4DBL\"\r\n  },\r\n  {\r\n    id: \"2569-10-005\",\r\n    date: \"2569-10-13\",\r\n    title: \"\u0e1e\u0e34\u0e18\u0e35\u0e27\u0e32\u0e07\u0e1e\u0e27\u0e07\u0e21\u0e32\u0e25\u0e32\u0e41\u0e25\u0e30\u0e16\u0e27\u0e32\u0e22\u0e23\u0e32\u0e0a\u0e2a\u0e14\u0e38\u0e14\u0e35 \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e1e\u0e23\u0e30\u0e1a\u0e23\u0e21\u0e09\u0e32\u0e22\u0e32\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c \u0e1e\u0e23\u0e30\u0e1a\u0e32\u0e17\u0e2a\u0e21\u0e40\u0e14\u0e47\u0e08\u0e1e\u0e23\u0e30\u0e1a\u0e23\u0e21\u0e0a\u0e19\u0e01\u0e32\u0e18\u0e34\u0e40\u0e1a\u0e28\u0e23 \u0e21\u0e2b\u0e32\u0e20\u0e39\u0e21\u0e34\u0e1e\u0e25\u0e2d\u0e14\u0e38\u0e25\u0e22\u0e40\u0e14\u0e0a\u0e21\u0e2b\u0e32\u0e23\u0e32\u0e0a \u0e1a\u0e23\u0e21\u0e19\u0e32\u0e16\u0e1a\u0e1e\u0e34\u0e15\u0e23 \u0e43\u0e19 '\u0e27\u0e31\u0e19\u0e19\u0e27\u0e21\u0e34\u0e19\u0e17\u0e23\u0e21\u0e2b\u0e32\u0e23\u0e32\u0e0a' 13 \u0e15\u0e38\u0e25\u0e32\u0e04\u0e21 2569\",\r\n    desc: \"\u0e13 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e28\u0e32\u0e25\u0e32\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e1b\u0e17\u0e38\u0e21 \u0e0a\u0e31\u0e49\u0e19 2 \u0e28\u0e32\u0e25\u0e32\u0e01\u0e25\u0e32\u0e07\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\",\r\n    driveImg: \"https:\/\/drive.google.com\/file\/d\/1Gihq5Ry-9ej3FCdxdhEKSAHzpM4gYaPv\/view\",\r\n    link: \"https:\/\/drive.google.com\/drive\/folders\/1zatytjC85I-UTm5tVjPwB42X7jFZJLcw\"\r\n  }\r\n];\r\n\r\nconst thaiMonths = [\r\n  \"\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21\", \"\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c\", \"\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21\", \"\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19\", \"\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21\", \"\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19\",\r\n  \"\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21\", \"\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21\", \"\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19\", \"\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21\", \"\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19\", \"\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21\"\r\n];\r\n\r\nlet selectedYear = \"\";\r\n\r\n\/\/ \ud83d\udccc \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07 Direct Thumbnail URL \u0e08\u0e32\u0e01 Google Drive \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e30\u0e1a\u0e38\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e27\u0e02\u0e36\u0e49\u0e19\r\nfunction formatDriveUrl(url) {\r\n  const match = url.match(\/\\\/d\\\/([a-zA-Z0-9_-]+)\/) || url.match(\/id=([a-zA-Z0-9_-]+)\/);\r\n  if (match && match[1]) {\r\n    return `https:\/\/lh3.googleusercontent.com\/d\/${match[1]}=w400`; \/\/ \u0e22\u0e48\u0e2d\u0e23\u0e39\u0e1b\u0e02\u0e19\u0e32\u0e14 w400 \u0e42\u0e2b\u0e25\u0e14\u0e44\u0e27\r\n  }\r\n  return url;\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e41\u0e1b\u0e25\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e44\u0e17\u0e22\u0e2a\u0e31\u0e49\u0e19\r\nfunction formatThaiDate(dateStr) {\r\n  if (!dateStr) return \"\";\r\n  const parts = dateStr.split('-');\r\n  if (parts.length < 3) return dateStr;\r\n  const day = parseInt(parts[2], 10);\r\n  const monthIdx = parseInt(parts[1], 10) - 1;\r\n  const year = parts[0];\r\n  return `${day} ${thaiMonths[monthIdx]} ${year}`;\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e14\u0e36\u0e07\u0e1b\u0e35\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e17\u0e35\u0e48\u0e21\u0e35\u0e43\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\nfunction getAvailableYears() {\r\n  const years = new Set();\r\n  activityData.forEach(item => {\r\n    const yr = item.date ? item.date.split('-')[0] : item.id.split('-')[0];\r\n    if (yr) years.add(yr);\r\n  });\r\n  return Array.from(years).sort().reverse();\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e2a\u0e23\u0e49\u0e32\u0e07 Dropdown \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35\r\nfunction initYearPicker() {\r\n  const yearSelect = document.getElementById('agYearSelect');\r\n  const years = getAvailableYears();\r\n  \r\n  if (years.length === 0) {\r\n    yearSelect.innerHTML = `<option value=\"\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/option>`;\r\n    return;\r\n  }\r\n  \r\n  yearSelect.innerHTML = years.map(yr => `<option value=\"${yr}\">\u0e1e.\u0e28. ${yr}<\/option>`).join('');\r\n  selectedYear = years[0]; \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e35\u0e43\u0e2b\u0e21\u0e48\u0e2a\u0e38\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e31\u0e01\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e2a\u0e23\u0e49\u0e32\u0e07 HTML \u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14 3x3\r\nfunction createCardHTML(item) {\r\n  const imgUrl = formatDriveUrl(item.driveImg);\r\n  const dateFormatted = formatThaiDate(item.date);\r\n  return `\r\n    <a href=\"${item.link}\" target=\"_blank\" class=\"ag-card\" id=\"${item.id}\">\r\n      <div class=\"ag-img-wrapper\">\r\n        <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${item.title}\" loading=\"lazy\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x169?text=Image+Error'\">\r\n      <\/div>\r\n      <div class=\"ag-date-tag\">\ud83d\udcc5 ${dateFormatted}<\/div>\r\n      <div class=\"ag-title\" title=\"${item.title}\">${item.title}<\/div>\r\n      <div class=\"ag-desc\" title=\"${item.desc}\">${item.desc}<\/div>\r\n    <\/a>\r\n  `;\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e2a\u0e23\u0e49\u0e32\u0e07 HTML \u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e43\u0e19 Modal List\r\nfunction createModalCardHTML(item) {\r\n  const imgUrl = formatDriveUrl(item.driveImg);\r\n  const dateFormatted = formatThaiDate(item.date);\r\n  return `\r\n    <a href=\"${item.link}\" target=\"_blank\" class=\"ag-card\" id=\"modal-${item.id}\">\r\n      <div class=\"ag-img-wrapper\">\r\n        <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${item.title}\" loading=\"lazy\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x169?text=Image+Error'\">\r\n      <\/div>\r\n      <div class=\"ag-card-info\">\r\n        <div class=\"ag-date-tag\">\ud83d\udcc5 ${dateFormatted}<\/div>\r\n        <div class=\"ag-title\" title=\"${item.title}\">${item.title}<\/div>\r\n        <div class=\"ag-desc\" title=\"${item.desc}\">${item.desc}<\/div>\r\n      <\/div>\r\n    <\/a>\r\n  `;\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e01\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e32\u0e21\u0e1b\u0e35 \u0e41\u0e25\u0e30\u0e40\u0e23\u0e35\u0e22\u0e07\u0e08\u0e32\u0e01\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e1b\u0e40\u0e01\u0e48\u0e32\r\nfunction getFilteredDataByYear(year) {\r\n  return activityData\r\n    .filter(item => {\r\n      const yr = item.date ? item.date.split('-')[0] : item.id.split('-')[0];\r\n      return yr === year;\r\n    })\r\n    .sort((a, b) => b.date.localeCompare(a.date)); \/\/ \u0e43\u0e2b\u0e21\u0e48 -> \u0e40\u0e01\u0e48\u0e32\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01 (3x3 = \u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 9 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23)\r\nfunction renderMainGrid() {\r\n  const gridContainer = document.getElementById('agGrid');\r\n  const btnContainer = document.getElementById('agBtnContainer');\r\n  const viewAllBtn = document.getElementById('agViewAllBtn');\r\n  \r\n  const yearData = getFilteredDataByYear(selectedYear);\r\n  const displayItems = yearData.slice(0, 9); \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 9 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 (3x3)\r\n\r\n  if (displayItems.length === 0) {\r\n    gridContainer.innerHTML = `<div class=\"ag-empty-state\" style=\"grid-column: span 3;\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e43\u0e19\u0e1b\u0e35 \u0e1e.\u0e28. ${selectedYear}<\/div>`;\r\n    btnContainer.style.display = 'none';\r\n    return;\r\n  }\r\n\r\n  gridContainer.innerHTML = displayItems.map(item => createCardHTML(item)).join('');\r\n\r\n  if (yearData.length > 9) {\r\n    viewAllBtn.innerText = `\u0e14\u0e39\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e43\u0e19\u0e1b\u0e35 ${selectedYear} (${yearData.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23)`;\r\n    btnContainer.style.display = 'block';\r\n  } else {\r\n    btnContainer.style.display = 'none';\r\n  }\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e1b\u0e35\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e32\u0e01 Dropdown\r\nfunction onYearChange(year) {\r\n  selectedYear = year;\r\n  renderMainGrid();\r\n}\r\n\r\n\/\/ \ud83d\udccc \u0e40\u0e1b\u0e34\u0e14 Modal \u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e31\u0e49\u0e07 12 \u0e40\u0e14\u0e37\u0e2d\u0e19 (\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25)\r\nfunction openAgModal() {\r\n  const monthContainer = document.getElementById('agModalMonthContainer');\r\n  const modalHeaderTitle = document.getElementById('agModalHeaderTitle');\r\n  \r\n  modalHeaderTitle.innerText = `\ud83d\udcf8 \u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 \u0e1e.\u0e28. ${selectedYear}`;\r\n  const yearData = getFilteredDataByYear(selectedYear);\r\n  \r\n  \/\/ \u0e08\u0e31\u0e14\u0e01\u0e25\u0e38\u0e48\u0e21\u0e15\u0e32\u0e21\u0e40\u0e14\u0e37\u0e2d\u0e19 (01-12)\r\n  const monthGroups = {};\r\n  yearData.forEach(item => {\r\n    const monthStr = item.date ? item.date.split('-')[1] : \"00\";\r\n    if (!monthGroups[monthStr]) monthGroups[monthStr] = [];\r\n    monthGroups[monthStr].push(item);\r\n  });\r\n\r\n  \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 HTML \u0e40\u0e09\u0e1e\u0e32\u0e30\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (\u0e40\u0e23\u0e35\u0e22\u0e07\u0e08\u0e32\u0e01\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 12 -> 01)\r\n  let modalHTML = \"\";\r\n  const sortedMonths = Object.keys(monthGroups).sort().reverse();\r\n\r\n  if (sortedMonths.length === 0) {\r\n    modalHTML = `<div class=\"ag-empty-state\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e43\u0e19\u0e1b\u0e35\u0e19\u0e35\u0e49<\/div>`;\r\n  } else {\r\n    sortedMonths.forEach(mStr => {\r\n      const monthIdx = parseInt(mStr, 10) - 1;\r\n      const monthName = thaiMonths[monthIdx] || `\u0e40\u0e14\u0e37\u0e2d\u0e19 ${mStr}`;\r\n      const itemsInMonth = monthGroups[mStr]; \/\/ \u0e40\u0e23\u0e35\u0e22\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e1b\u0e40\u0e01\u0e48\u0e32\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\r\n\r\n      modalHTML += `\r\n        <div class=\"ag-month-section\">\r\n          <div class=\"ag-month-title\">\ud83d\udcc5 \u0e40\u0e14\u0e37\u0e2d\u0e19${monthName} (${itemsInMonth.length} \u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21)<\/div>\r\n          <div class=\"ag-modal-list\">\r\n            ${itemsInMonth.map(item => createModalCardHTML(item)).join('')}\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n    });\r\n  }\r\n\r\n  monthContainer.innerHTML = modalHTML;\r\n  document.getElementById('agModal').classList.add('active');\r\n  document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeAgModal() {\r\n  document.getElementById('agModal').classList.remove('active');\r\n  document.body.style.overflow = '';\r\n}\r\n\r\nfunction closeAgModalOutside(e) {\r\n  if (e.target.id === 'agModal') {\r\n    closeAgModal();\r\n  }\r\n}\r\n\r\n\/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  initYearPicker();\r\n  renderMainGrid();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7ab036 elementor-widget elementor-widget-html\" data-id=\"c7ab036\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Facebook Page Feed Block (Centered Strictly with CSS Force) -->\r\n<style>\r\n\/* \u0e25\u0e49\u0e32\u0e07 CSS \u0e40\u0e14\u0e34\u0e21\u0e02\u0e2d\u0e07 Container \u0e2b\u0e25\u0e31\u0e01 *\/\r\ndiv.fb-feed-block {\r\n  max-width: 1200px !important;\r\n  margin: 4px auto !important;\r\n  padding: 12px 14px !important;\r\n  background: #f8f9fc !important;\r\n  border: 1.5px solid #dbe4f0 !important;\r\n  border-radius: 16px !important;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;\r\n  box-sizing: border-box !important;\r\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif !important;\r\n  \r\n  height: auto !important;\r\n  text-align: center !important; \/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e23\u0e30\u0e14\u0e31\u0e1a Container *\/\r\n}\r\n\r\ndiv.fb-feed-block h2 {\r\n  margin: 0 0 10px !important;\r\n  text-align: center !important;\r\n  color: #0d47a1 !important;\r\n  font-size: 1.25rem !important;\r\n  font-weight: 700 !important;\r\n  width: 100% !important;\r\n}\r\n\r\n\/* \u0e04\u0e2d\u0e19\u0e40\u0e17\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e04\u0e23\u0e2d\u0e1a iframe \u0e08\u0e31\u0e14 Center *\/\r\ndiv.fb-iframe-wrapper {\r\n  width: 100% !important;\r\n  display: block !important;\r\n  text-align: center !important; \/* \u0e08\u0e31\u0e14 inline\/iframe \u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07 *\/\r\n  height: auto !important;\r\n  margin: 0 auto !important;\r\n}\r\n\r\n\/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a iframe \u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07\u0e40\u0e14\u0e47\u0e14\u0e02\u0e32\u0e14\u0e14\u0e49\u0e27\u0e22 !important *\/\r\niframe.fb-iframe-responsive {\r\n  display: block !important;\r\n  margin-left: auto !important;\r\n  margin-right: auto !important;\r\n  float: none !important; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14 float \u0e0b\u0e49\u0e32\u0e22 *\/\r\n  width: 100% !important;\r\n  max-width: 500px !important;\r\n  height: 900px !important;\r\n  border: none !important;\r\n  overflow: hidden !important;\r\n  border-radius: 10px !important;\r\n  background: #ffffff !important;\r\n}\r\n\r\n\/* \ud83d\udcf1 Responsive \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e17\u0e47\u0e1a\u0e40\u0e25\u0e47\u0e15\u0e41\u0e25\u0e30\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d *\/\r\n@media (max-width: 768px) {\r\n  div.fb-feed-block {\r\n    margin: 3px auto !important;\r\n    padding: 10px 12px !important;\r\n  }\r\n  div.fb-feed-block h2 {\r\n    font-size: 1.1rem !important;\r\n    margin-bottom: 8px !important;\r\n  }\r\n  iframe.fb-iframe-responsive {\r\n    height: 700px !important;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  div.fb-feed-block {\r\n    margin: 2px auto !important;\r\n    padding: 8px !important;\r\n    border-radius: 12px !important;\r\n  }\r\n  div.fb-feed-block h2 {\r\n    font-size: 1rem !important;\r\n    margin-bottom: 6px !important;\r\n  }\r\n  iframe.fb-iframe-responsive {\r\n    height: 650px !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"fb-feed-block\">\r\n  <h2>\ud83d\udcd8 \u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e08\u0e32\u0e01 Facebook<\/h2>\r\n  <div class=\"fb-iframe-wrapper\">\r\n    <iframe \r\n      class=\"fb-iframe-responsive\"\r\n      style=\"margin: 0 auto !important; display: block !important; float: none !important;\"\r\n      src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2F100064570274683%2F&amp;tabs=timeline&amp;width=500&amp;height=900&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=false&amp;appId\" \r\n      scrolling=\"no\" \r\n      frameborder=\"0\" \r\n      allowfullscreen=\"true\" \r\n      allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\">\r\n    <\/iframe>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a7fbfc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a7fbfc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5983e97\" data-id=\"5983e97\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2da1900 elementor-widget elementor-widget-spacer\" data-id=\"2da1900\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e7aa726\" data-id=\"e7aa726\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3d8ff81 elementor-widget elementor-widget-html\" data-id=\"3d8ff81\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--<iframe style=\"border: none; overflow: hidden; height: 750px; width: 500px;\" src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2F100064570274683\/%2F&amp;tabs=timeline&amp;width=500&amp;height=750&amp;small_header=false&amp;adapt_container_width=false&amp;hide_cover=false&amp;show_facepile=false&amp;appId\" width=\"500\" height=\"750\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>-->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-bd43413\" data-id=\"bd43413\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3692c86 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3692c86\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8bd5d1c\" data-id=\"8bd5d1c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-edcbacd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"edcbacd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4d96eca\" data-id=\"4d96eca\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3455e8 elementor-widget elementor-widget-html\" data-id=\"e3455e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Modal \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e Overlay<\/title>\r\n\r\n<style>\r\n    \/* Overlay *\/\r\n    .modal-overlay1 {\r\n   \tdisplay: flex;\r\n            display: none !important; \/* \u2190 \u0e21\u0e35\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e19\u0e35\u0e49 = \u0e0b\u0e48\u0e2d\u0e19 \/ \u0e25\u0e1a = \u0e41\u0e2a\u0e14\u0e07 *\/\r\n        position: fixed;\r\n        inset: 0;\r\n        background: rgba(0,0,0,.8);\r\n        backdrop-filter: blur(10px);\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 9999;\r\n    }\r\n\r\n    \/* \u0e01\u0e25\u0e48\u0e2d\u0e07 Modal *\/\r\n    .modal-content1 {\r\n        background: #fff;\r\n        border-radius: 8px;\r\n        padding: 10px;\r\n\r\n        display: inline-flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n\r\n        width: fit-content;\r\n        max-width: 90vw;\r\n\r\n        overflow: visible;\r\n        text-align: center;\r\n        position: relative;\r\n    }\r\n\r\n    \/* \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e *\/\r\n    .modal-image1 {\r\n        display: block;\r\n        width: auto;\r\n        height: auto;\r\n\r\n        max-width: 90vw;\r\n        max-height: calc(100vh - 180px);\r\n\r\n        object-fit: contain;\r\n\r\n        border-radius: 8px;\r\n        box-shadow: 0 4px 10px rgba(0,0,0,.2);\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    \/* \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 *\/\r\n    .modal-text1{\r\n        margin-top:5px;\r\n    }\r\n\r\n    .modal-text1 p{\r\n        margin:6px 0;\r\n    }\r\n\r\n    .modal-text1 a{\r\n        color:#007bff;\r\n        text-decoration:none;\r\n    }\r\n\r\n    .modal-text1 a:hover{\r\n        text-decoration:underline;\r\n    }\r\n\r\n    \/* \u0e1b\u0e38\u0e48\u0e21 *\/\r\n    .close-btn{\r\n        font-size:14px;\r\n        color:#fff;\r\n        background:#007bff;\r\n        border:none;\r\n        border-radius:5px;\r\n        padding:8px 20px;\r\n        cursor:pointer;\r\n        margin-bottom:10px;\r\n    }\r\n\r\n    .close-btn:hover{\r\n        background:#0056b3;\r\n    }\r\n\r\n    \/* Tablet *\/\r\n    @media (max-width:768px){\r\n\r\n        .modal-content1{\r\n            max-width:95vw;\r\n            padding:8px;\r\n        }\r\n\r\n        .modal-image1{\r\n            max-width:95vw;\r\n            max-height:calc(100vh - 170px);\r\n        }\r\n    }\r\n\r\n    \/* Mobile *\/\r\n    @media (max-width:480px){\r\n\r\n        .modal-content1{\r\n            max-width:98vw;\r\n            padding:5px;\r\n        }\r\n\r\n        .modal-image1{\r\n            max-width:98vw;\r\n            max-height:calc(100vh - 160px);\r\n        }\r\n\r\n        .modal-text1{\r\n            font-size:14px;\r\n        }\r\n\r\n        .close-btn{\r\n            padding:6px 15px;\r\n            font-size:13px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<\/head>\r\n<body>\r\n    <!-- Modal Overlay -->\r\n    <div id=\"modalOverlay\" class=\"modal-overlay1\">\r\n        <div class=\"modal-content1\">\r\n\r\n            <!-- \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e43\u0e19 Modal -->\r\n            <img decoding=\"async\" src=\"https:\/\/p-vec.ac.th\/2023\/wp-content\/uploads\/2026\/07\/280769.jpg\" alt=\"\u0e20\u0e32\u0e1e\u0e43\u0e19 Modal\" class=\"modal-image1\">\r\n\r\n            <!-- \u0e1b\u0e38\u0e48\u0e21 Close -->\r\n            <button id=\"closeModalBtn\" class=\"close-btn\">[\u0e1b\u0e34\u0e14]<\/button>\r\n\r\n            <!-- \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e15\u0e49\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e -->\r\n            <div class=\"modal-text1\">\r\n                <p>\u0e02\u0e2d\u0e40\u0e0a\u0e34\u0e0d\u0e23\u0e48\u0e27\u0e21\u0e25\u0e07\u0e19\u0e32\u0e21\u0e16\u0e27\u0e32\u0e22\u0e1e\u0e23\u0e30\u0e1e\u0e23\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<a href=\"https:\/\/wellwishes.royaloffice.th\/?fbclid=IwVERDUATT8JJwZG9mBWZkaWQWULXU4ropyJv8IWQyJkl1io-9gxaRLmV4dG4DYWVtAjExAHNydGMGYXBwX2lkCjY2Mjg1NjgzNzkAAR5ZhZIZmTWt9slLON33zL8lOFzVr0vI60l1tp63z9OMMog0dGRS6VOVks-wLA_aem_PvwJqbonj1Ug1wk2aFgSTg\" target=\"_blank\"><b>[\u0e23\u0e48\u0e27\u0e21\u0e25\u0e07\u0e19\u0e32\u0e21\u0e16\u0e27\u0e32\u0e22\u0e1e\u0e23\u0e30\u0e1e\u0e23]<\/b><\/a><\/p>\r\n            <\/div>\r\n            <div class=\"modal-text1\">\r\n                <p>\u0e02\u0e2d\u0e40\u0e0a\u0e34\u0e0d\u0e23\u0e48\u0e27\u0e21\u0e25\u0e07\u0e19\u0e32\u0e21\u0e16\u0e27\u0e32\u0e22\u0e2a\u0e31\u0e15\u0e22\u0e4c\u0e1b\u0e0f\u0e34\u0e0d\u0e32\u0e13\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e14\u0e35<a href=\"https:\/\/formyking.ocsc.go.th\/gorvernment.php\" target=\"_blank\"><b>[\u0e23\u0e48\u0e27\u0e21\u0e25\u0e07\u0e19\u0e32\u0e21\u0e16\u0e27\u0e32\u0e22\u0e2a\u0e31\u0e15\u0e22\u0e4c\u0e1b\u0e0f\u0e34\u0e0d\u0e32\u0e13]<\/b><\/a><\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ \u0e23\u0e2d\u0e43\u0e2b\u0e49\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2a\u0e23\u0e47\u0e08\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const modalOverlay = document.getElementById('modalOverlay');\r\n            const closeModalBtn = document.getElementById('closeModalBtn');\r\n\r\n            \/\/ \u0e41\u0e2a\u0e14\u0e07 Modal \u0e17\u0e31\u0e19\u0e17\u0e35\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2a\u0e23\u0e47\u0e08\r\n            modalOverlay.style.display = 'flex';\r\n\r\n            \/\/ \u0e1b\u0e34\u0e14 Modal \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21 Close\r\n            closeModalBtn.addEventListener('click', function () {\r\n                modalOverlay.style.display = 'none';\r\n            });\r\n\r\n            \/\/ \u0e1b\u0e34\u0e14 Modal \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48 Overlay (\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07)\r\n            modalOverlay.addEventListener('click', function (event) {\r\n                if (event.target === modalOverlay) {\r\n                    modalOverlay.style.display = 'none';\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf10 E-Services \u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e28\u0e18.02 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e16 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"plain-container","ast-site-content-layout":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/p-vec.ac.th\/2023\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"\ud83c\udf10 E-Services \u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e28\u0e18.02 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e16&hellip;","_links":{"self":[{"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":593,"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":2349,"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/pages\/38\/revisions\/2349"}],"wp:attachment":[{"href":"https:\/\/p-vec.ac.th\/2023\/wp-json\/wp\/v2\/media?parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}