{"id":2798,"date":"2023-11-10T10:06:21","date_gmt":"2023-11-10T03:06:21","guid":{"rendered":"https:\/\/natres.psu.ac.th\/main\/?page_id=2798"},"modified":"2026-09-02T11:56:15","modified_gmt":"2026-09-02T04:56:15","slug":"%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a7%e0%b8%81%e0%b8%b4%e0%b8%88%e0%b8%81%e0%b8%a3%e0%b8%a3%e0%b8%a1%e0%b8%97%e0%b8%b1%e0%b9%89%e0%b8%87%e0%b8%ab%e0%b8%a1%e0%b8%94","status":"publish","type":"page","link":"https:\/\/natres.psu.ac.th\/main\/?page_id=2798","title":{"rendered":"\u0e02\u0e48\u0e32\u0e27\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n#nrNewsPage,\n#nrNewsPage *{\n    box-sizing:border-box;\n}\n\n#nrNewsPage{\n    --nr-green:#008f83;\n    --nr-green-dark:#075d59;\n    --nr-green-soft:#e8f7f4;\n\n    --nr-blue:#308fc8;\n    --nr-blue-soft:#eaf5fc;\n\n    --nr-ink:#143d3c;\n    --nr-text:#536968;\n    --nr-muted:#809291;\n\n    --nr-border:#e4eeed;\n\n    position:relative;\n\n    width:100vw;\n    max-width:100vw;\n\n    margin-left:calc(50% - 50vw);\n    margin-right:calc(50% - 50vw);\n\n    overflow:hidden;\n\n    background:#fff;\n\n    font-family:\n        \"Sarabun\",\n        \"Noto Sans Thai\",\n        Arial,\n        sans-serif;\n\n    color:var(--nr-ink);\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.nrn-hero{\n\n    position:relative;\n    overflow:hidden;\n\n    min-height:560px;\n\n    display:flex;\n    align-items:center;\n\n    background:\n        radial-gradient(\n            circle at 88% 18%,\n            rgba(71,178,219,.22),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 15% 80%,\n            rgba(28,181,159,.12),\n            transparent 28%\n        ),\n        linear-gradient(\n            120deg,\n            #ffffff 0%,\n            #f5fbfc 45%,\n            #eaf7fb 100%\n        );\n\n    border-bottom:1px solid #e5efef;\n}\n\n\n.nrn-hero-inner{\n\n    width:min(1280px,calc(100% - 48px));\n\n    margin:0 auto;\n\n    padding:85px 0;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,1.15fr)\n        minmax(360px,.85fr);\n\n    align-items:center;\n\n    gap:90px;\n\n    position:relative;\n    z-index:2;\n}\n\n\n\/* decorative circle *\/\n\n.nrn-decor{\n\n    position:absolute;\n\n    border-radius:50%;\n\n    pointer-events:none;\n}\n\n.nrn-decor-1{\n\n    width:480px;\n    height:480px;\n\n    right:-180px;\n    top:-190px;\n\n    border:1px solid rgba(0,143,131,.12);\n}\n\n.nrn-decor-1::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    inset:70px;\n\n    border-radius:50%;\n\n    border:1px solid rgba(48,143,200,.13);\n}\n\n\n.nrn-decor-2{\n\n    width:290px;\n    height:290px;\n\n    left:-180px;\n    bottom:-130px;\n\n    background:rgba(0,143,131,.045);\n}\n\n\n\/* eyebrow *\/\n\n.nrn-eyebrow{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:9px;\n\n    padding:7px 13px;\n\n    border:1px solid #cceae6;\n\n    border-radius:100px;\n\n    background:rgba(255,255,255,.8);\n\n    color:#078b7f;\n\n    font-size:11px;\n    font-weight:800;\n\n    letter-spacing:1.5px;\n\n    margin-bottom:25px;\n}\n\n.nrn-dot{\n\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:#00a899;\n\n    box-shadow:\n        0 0 0 5px rgba(0,168,153,.10);\n}\n\n\n\/* hero title *\/\n\n.nrn-hero h1{\n\n    padding:0;\n    margin:0 0 22px;\n\n    color:#153b3a;\n\n    font-size:\n        clamp(52px,5vw,76px);\n\n    font-weight:800;\n\n    line-height:1.06;\n\n    letter-spacing:-2px;\n}\n\n\n.nrn-hero h1 span{\n\n    color:var(--nr-green);\n\n    position:relative;\n}\n\n\n\/* paragraph *\/\n\n.nrn-lead{\n\n    max-width:640px;\n\n    padding:0;\n    margin:0;\n\n    color:#5d7473;\n\n    font-size:17px;\n\n    line-height:1.9;\n\n    font-weight:400;\n}\n\n\n\/* actions *\/\n\n.nrn-hero-actions{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:28px;\n\n    flex-wrap:wrap;\n\n    margin-top:33px;\n}\n\n\n.nrn-btn-primary{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    gap:17px;\n\n    min-height:51px;\n\n    padding:0 21px;\n\n    border-radius:12px;\n\n    background:#087f76;\n\n    color:#fff !important;\n\n    font-size:14px;\n\n    font-weight:700;\n\n    text-decoration:none !important;\n\n    box-shadow:\n        0 10px 25px rgba(0,127,118,.17);\n\n    transition:.25s ease;\n}\n\n\n.nrn-btn-primary span{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    width:25px;\n    height:25px;\n\n    border-radius:7px;\n\n    background:rgba(255,255,255,.15);\n}\n\n\n.nrn-btn-primary:hover{\n\n    transform:translateY(-2px);\n\n    background:#066f67;\n\n    color:#fff !important;\n\n    box-shadow:\n        0 14px 32px rgba(0,127,118,.22);\n}\n\n\n\/* PSU label *\/\n\n.nrn-psu-label{\n\n    color:#4f6867;\n\n    font-size:13px;\n\n    font-weight:700;\n\n    line-height:1.45;\n}\n\n\n.nrn-psu-label small{\n\n    display:block;\n\n    color:#91a09f;\n\n    font-size:10px;\n\n    font-weight:500;\n\n    letter-spacing:.2px;\n}\n\n\n\/* =========================================================\n   RIGHT VISUAL\n========================================================= *\/\n\n.nrn-hero-visual{\n\n    display:flex;\n    justify-content:flex-end;\n}\n\n\n.nrn-visual-card{\n\n    width:min(100%,425px);\n\n    padding:27px;\n\n    background:\n        rgba(255,255,255,.82);\n\n    backdrop-filter:blur(15px);\n\n    border:1px solid rgba(255,255,255,.95);\n\n    border-radius:25px;\n\n    box-shadow:\n        0 25px 70px rgba(14,86,91,.11);\n\n    position:relative;\n}\n\n\n.nrn-visual-card::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    z-index:-1;\n\n    width:140px;\n    height:140px;\n\n    right:-30px;\n    bottom:-30px;\n\n    border-radius:50%;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(0,157,141,.12),\n            rgba(54,154,213,.12)\n        );\n}\n\n\n.nrn-visual-top{\n\n    display:flex;\n\n    justify-content:space-between;\n\n    align-items:center;\n\n    color:#7c9190;\n\n    font-size:10px;\n\n    font-weight:800;\n\n    letter-spacing:1.1px;\n}\n\n\n.nrn-status{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:6px;\n\n    color:#51a496;\n}\n\n\n.nrn-status i{\n\n    width:6px;\n    height:6px;\n\n    display:block;\n\n    border-radius:50%;\n\n    background:#42b6a4;\n}\n\n\n.nrn-visual-main{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:18px;\n\n    min-height:180px;\n}\n\n\n.nrn-big-icon{\n\n    flex:0 0 auto;\n\n    width:76px;\n    height:76px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:21px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #e3f6f2,\n            #eaf5fd\n        );\n\n    color:#078d81;\n}\n\n\n.nrn-big-icon svg{\n\n    width:38px;\n    height:38px;\n}\n\n\n.nrn-visual-title{\n\n    color:#173f3d;\n\n    font-size:25px;\n\n    font-weight:800;\n\n    letter-spacing:-.5px;\n}\n\n\n.nrn-visual-sub{\n\n    margin-top:4px;\n\n    color:#8a9a99;\n\n    font-size:13px;\n}\n\n\n.nrn-mini-grid{\n\n    display:grid;\n\n    grid-template-columns:1fr 1fr;\n\n    gap:10px;\n}\n\n\n.nrn-mini-grid > div{\n\n    padding:17px;\n\n    background:#f5faf9;\n\n    border:1px solid #edf3f2;\n\n    border-radius:15px;\n}\n\n\n.nrn-mini-grid strong{\n\n    display:block;\n\n    color:#087f76;\n\n    font-size:25px;\n\n    line-height:1.2;\n\n    font-weight:800;\n}\n\n\n.nrn-mini-grid span{\n\n    color:#8a9a99;\n\n    font-size:11px;\n}\n\n\n\/* =========================================================\n   DIRECTORY\n========================================================= *\/\n\n.nrn-directory{\n\n    padding:80px 0 100px;\n\n    background:#fff;\n}\n\n\n.nrn-container{\n\n    width:min(\n        1280px,\n        calc(100% - 48px)\n    );\n\n    margin:0 auto;\n}\n\n\n.nrn-section-head{\n\n    display:flex;\n\n    align-items:flex-end;\n\n    justify-content:space-between;\n\n    gap:30px;\n\n    margin-bottom:36px;\n}\n\n\n.nrn-section-label{\n\n    color:#03958a;\n\n    font-size:10px;\n\n    font-weight:800;\n\n    letter-spacing:1.8px;\n\n    margin-bottom:9px;\n}\n\n\n.nrn-section-head h2{\n\n    padding:0;\n    margin:0;\n\n    color:#153e3c;\n\n    font-size:\n        clamp(29px,3vw,39px);\n\n    font-weight:800;\n\n    line-height:1.3;\n\n    letter-spacing:-.6px;\n}\n\n\n.nrn-section-head p{\n\n    padding:0;\n    margin:7px 0 0;\n\n    color:#879796;\n\n    font-size:14px;\n}\n\n\n\/* search *\/\n\n.nrn-search{\n\n    width:290px;\n\n    height:48px;\n\n    flex:0 0 auto;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:10px;\n\n    padding:0 15px;\n\n    border:1px solid #dfeae9;\n\n    border-radius:12px;\n\n    background:#fff;\n\n    transition:.2s ease;\n}\n\n\n.nrn-search:focus-within{\n\n    border-color:#86cfc7;\n\n    box-shadow:\n        0 0 0 4px\n        rgba(0,143,131,.07);\n}\n\n\n.nrn-search svg{\n\n    flex:0 0 auto;\n\n    width:19px;\n    height:19px;\n\n    color:#8aa09e;\n}\n\n\n.nrn-search input{\n\n    width:100%;\n\n    border:0 !important;\n\n    outline:0 !important;\n\n    padding:0 !important;\n\n    margin:0 !important;\n\n    background:transparent !important;\n\n    box-shadow:none !important;\n\n    color:#35504f;\n\n    font-family:inherit;\n\n    font-size:13px;\n}\n\n\n\/* =========================================================\n   CATEGORY GRID\n========================================================= *\/\n\n.nrn-category-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap:17px;\n}\n\n\n.nrn-category-card{\n\n    position:relative;\n\n    min-width:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    padding:23px;\n\n    border:1px solid var(--nr-border);\n\n    border-radius:18px;\n\n    background:#fff;\n\n    overflow:hidden;\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease,\n        border-color .25s ease;\n}\n\n\n.nrn-category-card:hover{\n\n    transform:translateY(-4px);\n\n    border-color:#b9ded9;\n\n    box-shadow:\n        0 18px 42px\n        rgba(5,83,78,.085);\n}\n\n\n.nrn-card-top{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:13px;\n}\n\n\n.nrn-cat-icon{\n\n    width:43px;\n    height:43px;\n\n    flex:0 0 43px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:13px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #e8f7f4,\n            #f1faf9\n        );\n\n    color:#078b7f;\n\n    font-size:19px;\n}\n\n\n.nrn-cat-info{\n\n    min-width:0;\n}\n\n\n.nrn-category-title{\n\n    margin:0;\n\n    color:#214947;\n\n    font-size:16px;\n\n    line-height:1.45;\n\n    font-weight:700;\n}\n\n\n.nrn-count{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    margin-top:2px;\n\n    color:#849796;\n\n    font-size:11px;\n}\n\n\n.nrn-category-link{\n\n    position:absolute;\n\n    inset:0;\n\n    z-index:1;\n\n    font-size:0;\n}\n\n\n\/* children *\/\n\n.nrn-children{\n\n    position:relative;\n    z-index:2;\n\n    display:flex;\n\n    flex-wrap:wrap;\n\n    gap:6px;\n\n    margin-top:17px;\n\n    padding-top:14px;\n\n    border-top:1px solid #eef3f2;\n}\n\n\n.nrn-child-link{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    padding:5px 9px;\n\n    border-radius:7px;\n\n    background:#f5f9f9;\n\n    color:#647b79 !important;\n\n    font-size:10.5px;\n\n    line-height:1.4;\n\n    text-decoration:none !important;\n\n    transition:.2s ease;\n}\n\n\n.nrn-child-link:hover{\n\n    background:#e8f6f3;\n\n    color:#047e74 !important;\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.nrn-loading{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    flex-direction:column;\n\n    gap:13px;\n\n    min-height:220px;\n\n    color:#849795;\n\n    font-size:13px;\n}\n\n\n.nrn-spinner{\n\n    width:28px;\n    height:28px;\n\n    border:3px solid #e2efed;\n\n    border-top-color:#09978a;\n\n    border-radius:50%;\n\n    animation:nrSpin .7s linear infinite;\n}\n\n\n@keyframes nrSpin{\n\n    to{\n        transform:rotate(360deg);\n    }\n\n}\n\n\n.nrn-no-result{\n\n    padding:70px 20px;\n\n    text-align:center;\n\n    color:#849493;\n}\n\n\n\/* =========================================================\n   FOOT\n========================================================= *\/\n\n.nrn-foot{\n\n    background:#f5faf9;\n\n    border-top:1px solid #e6efee;\n}\n\n\n.nrn-foot-inner{\n\n    min-height:90px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:space-between;\n\n    gap:20px;\n}\n\n\n.nrn-foot strong{\n\n    display:block;\n\n    color:#365956;\n\n    font-size:12px;\n}\n\n\n.nrn-foot span{\n\n    display:block;\n\n    margin-top:2px;\n\n    color:#96a5a4;\n\n    font-size:10px;\n}\n\n\n.nrn-foot a{\n\n    color:#078b80 !important;\n\n    text-decoration:none !important;\n\n    font-size:11px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:1000px){\n\n    .nrn-hero-inner{\n\n        grid-template-columns:\n            minmax(0,1fr)\n            350px;\n\n        gap:45px;\n    }\n\n\n    .nrn-category-grid{\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n}\n\n\n\n@media(max-width:800px){\n\n    .nrn-hero{\n\n        min-height:auto;\n    }\n\n\n    .nrn-hero-inner{\n\n        grid-template-columns:1fr;\n\n        padding:65px 0;\n\n        gap:45px;\n    }\n\n\n    .nrn-hero-visual{\n\n        justify-content:flex-start;\n    }\n\n\n    .nrn-visual-card{\n\n        width:100%;\n        max-width:500px;\n    }\n\n\n    .nrn-section-head{\n\n        align-items:flex-start;\n\n        flex-direction:column;\n    }\n\n\n    .nrn-search{\n\n        width:100%;\n    }\n\n}\n\n\n\n@media(max-width:600px){\n\n    .nrn-hero-inner,\n    .nrn-container{\n\n        width:calc(100% - 32px);\n    }\n\n\n    .nrn-hero-inner{\n\n        padding:52px 0;\n    }\n\n\n    .nrn-hero h1{\n\n        font-size:44px;\n\n        letter-spacing:-1px;\n    }\n\n\n    .nrn-lead{\n\n        font-size:15px;\n\n        line-height:1.8;\n    }\n\n\n    .nrn-hero-actions{\n\n        align-items:flex-start;\n\n        flex-direction:column;\n\n        gap:18px;\n    }\n\n\n    .nrn-visual-card{\n\n        padding:20px;\n\n        border-radius:20px;\n    }\n\n\n    .nrn-visual-main{\n\n        min-height:150px;\n    }\n\n\n    .nrn-big-icon{\n\n        width:62px;\n        height:62px;\n\n        flex-basis:62px;\n    }\n\n\n    .nrn-visual-title{\n\n        font-size:21px;\n    }\n\n\n    .nrn-directory{\n\n        padding:58px 0 70px;\n    }\n\n\n    .nrn-category-grid{\n\n        grid-template-columns:1fr;\n\n        gap:12px;\n    }\n\n\n    .nrn-category-card{\n\n        padding:19px;\n    }\n\n\n    .nrn-section-head{\n\n        margin-bottom:26px;\n    }\n\n\n    .nrn-foot-inner{\n\n        padding:20px 0;\n\n        align-items:flex-start;\n\n        flex-direction:column;\n    }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction nrNewsInit(){\n\n    const page =\n        document.getElementById('nrNewsPage');\n\n    if(!page){\n        console.log('NATRES News: nrNewsPage not found');\n        return;\n    }\n\n    console.log('NATRES News: INIT OK');\n\n\n    const grid =\n        document.getElementById('nrCategoryGrid');\n\n    const loading =\n        document.getElementById('nrNewsLoading');\n\n    const search =\n        document.getElementById('nrCategorySearch');\n\n    const noResult =\n        document.getElementById('nrNoResult');\n\n    const totalNews =\n        document.getElementById('nrTotalNews');\n\n    const totalCategories =\n        document.getElementById('nrTotalCategories');\n\n\n    let categories = [];\n\n\n    \/* =====================================================\n       Icons\n    ===================================================== *\/\n\n    function getIcon(name){\n\n        const n =\n            (name || '').toLowerCase();\n\n        if(\n            n.includes('\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d') ||\n            n.includes('\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07')\n        ){\n            return '\u25a4';\n        }\n\n        if(n.includes('\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32')){\n            return '\u2659';\n        }\n\n        if(\n            n.includes('\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23') ||\n            n.includes('\u0e28\u0e36\u0e01\u0e29\u0e32')\n        ){\n            return '\u25ce';\n        }\n\n        if(\n            n.includes('\u0e1c\u0e25\u0e07\u0e32\u0e19') ||\n            n.includes('\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25')\n        ){\n            return '\u2606';\n        }\n\n        if(\n            n.includes('\u0e2a\u0e21\u0e31\u0e04\u0e23') ||\n            n.includes('\u0e07\u0e32\u0e19')\n        ){\n            return '\u25c7';\n        }\n\n        if(n.includes('\u0e27\u0e32\u0e23\u0e2a\u0e32\u0e23')){\n            return '\u25b1';\n        }\n\n        if(\n            n.includes('\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21') ||\n            n.includes('news')\n        ){\n            return '\u25cb';\n        }\n\n        return '\u25eb';\n    }\n\n\n    \/* =====================================================\n       Escape HTML\n    ===================================================== *\/\n\n    function esc(value){\n\n        const div =\n            document.createElement('div');\n\n        div.textContent =\n            value || '';\n\n        return div.innerHTML;\n    }\n\n\n    \/* =====================================================\n       Render Categories\n    ===================================================== *\/\n\n    function renderCategories(filterText=''){\n\n        const keyword =\n            filterText\n                .trim()\n                .toLowerCase();\n\n        grid.innerHTML = '';\n\n\n        const parents =\n            categories.filter(c =>\n                Number(c.parent) === 0\n            );\n\n\n        let shown = 0;\n\n\n        parents.forEach(cat => {\n\n            const children =\n                categories.filter(c =>\n                    Number(c.parent) ===\n                    Number(cat.id)\n                );\n\n\n            const searchable =\n                (\n                    cat.name +\n                    ' ' +\n                    children\n                        .map(x => x.name)\n                        .join(' ')\n                ).toLowerCase();\n\n\n            if(\n                keyword &&\n                !searchable.includes(keyword)\n            ){\n                return;\n            }\n\n\n            shown++;\n\n\n            const card =\n                document.createElement('article');\n\n            card.className =\n                'nrn-category-card';\n\n\n            let childHTML = '';\n\n\n            if(children.length){\n\n                childHTML =\n                    '<div class=\"nrn-children\">' +\n\n                    children.map(child => {\n\n                        return `\n                            <a\n                                class=\"nrn-child-link\"\n                                href=\"${child.link}\"\n                            >\n                                ${esc(child.name)}\n                                &nbsp;${child.count}\n                            <\/a>\n                        `;\n\n                    }).join('') +\n\n                    '<\/div>';\n            }\n\n\n            card.innerHTML = `\n\n                <div class=\"nrn-card-top\">\n\n                    <div class=\"nrn-cat-icon\">\n                        ${getIcon(cat.name)}\n                    <\/div>\n\n                    <div class=\"nrn-cat-info\">\n\n                        <h3 class=\"nrn-category-title\">\n                            ${esc(cat.name)}\n                        <\/h3>\n\n                        <span class=\"nrn-count\">\n                            ${Number(cat.count).toLocaleString('th-TH')}\n                            \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n                ${childHTML}\n\n                <a\n                    class=\"nrn-category-link\"\n                    href=\"${cat.link}\"\n                    aria-label=\"${esc(cat.name)}\"\n                ><\/a>\n            `;\n\n\n            grid.appendChild(card);\n\n        });\n\n\n        noResult.style.display =\n            shown ? 'none' : 'block';\n\n    }\n\n\n    \/* =====================================================\n       Load WordPress Categories\n    ===================================================== *\/\n\n    async function loadCategories(){\n\n        try{\n\n            const url =\n                window.location.origin +\n                '\/main\/?rest_route=\/wp\/v2\/categories' +\n                '&per_page=100' +\n                '&hide_empty=true' +\n                '&orderby=count' +\n                '&order=desc';\n\n\n            console.log(\n                'NATRES News API:',\n                url\n            );\n\n\n            const response =\n                await fetch(url,{\n                    credentials:'same-origin'\n                });\n\n\n            console.log(\n                'NATRES News HTTP:',\n                response.status\n            );\n\n\n            if(!response.ok){\n\n                throw new Error(\n                    'HTTP ' + response.status\n                );\n\n            }\n\n\n            categories =\n                await response.json();\n\n\n            console.log(\n                'NATRES Categories:',\n                categories\n            );\n\n\n            loading.style.display =\n                'none';\n\n\n            const parentCats =\n                categories.filter(c =>\n                    Number(c.parent) === 0\n                );\n\n\n            totalCategories.textContent =\n                parentCats.length\n                    .toLocaleString('th-TH');\n\n\n            const count =\n                parentCats.reduce(\n                    (sum,c) =>\n                        sum + Number(c.count || 0),\n                    0\n                );\n\n\n            totalNews.textContent =\n                count.toLocaleString('th-TH');\n\n\n            renderCategories();\n\n        }\n\n        catch(error){\n\n            console.error(\n                'NATRES News Error:',\n                error\n            );\n\n\n            loading.innerHTML = `\n                <div style=\"\n                    max-width:550px;\n                    text-align:center;\n                    line-height:1.8;\n                \">\n                    \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e02\u0e48\u0e32\u0e27\u0e44\u0e14\u0e49\u0e43\u0e19\u0e02\u0e13\u0e30\u0e19\u0e35\u0e49\n                    <br>\n                    <small>\n                        ${esc(error.message)}\n                    <\/small>\n                <\/div>\n            `;\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       Search\n    ===================================================== *\/\n\n    if(search){\n\n        search.addEventListener(\n            'input',\n            function(){\n\n                renderCategories(\n                    this.value\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* \u0e40\u0e23\u0e34\u0e48\u0e21\u0e42\u0e2b\u0e25\u0e14 *\/\n\n    loadCategories();\n\n}\n\n\n\/* =========================================================\n   \u0e2a\u0e33\u0e04\u0e31\u0e0d: \u0e23\u0e2d HTML \u0e02\u0e2d\u0e07 WordPress \u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e01\u0e48\u0e2d\u0e19\n========================================================= *\/\n\nif(document.readyState === 'loading'){\n\n    document.addEventListener(\n        'DOMContentLoaded',\n        nrNewsInit\n    );\n\n}else{\n\n    nrNewsInit();\n\n}\n<\/script>\n\n<!-- =========================================================\n     NATRES : NEWS & ACTIVITIES\n     Custom HTML Block - WordPress\n========================================================= -->\n\n<div id=\"nrNewsPage\">\n\n    <!-- HERO -->\n    <section class=\"nrn-hero\">\n\n        <div class=\"nrn-decor nrn-decor-1\"><\/div>\n        <div class=\"nrn-decor nrn-decor-2\"><\/div>\n\n        <div class=\"nrn-hero-inner\">\n\n            <div class=\"nrn-hero-content\">\n\n                <div class=\"nrn-eyebrow\">\n                    <span class=\"nrn-dot\"><\/span>\n                    NEWS &amp; ACTIVITIES\n                <\/div>\n\n                <h1>\n                    \u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e41\u0e25\u0e30<br>\n                    <span>\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/span>\n                <\/h1>\n\n                <p class=\"nrn-lead\">\n                    \u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23 \u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 \u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 \u0e1c\u0e25\u0e07\u0e32\u0e19\n                    \u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e08\u0e32\u0e01\u0e04\u0e13\u0e30\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e32\u0e01\u0e23\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34\n                    \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c\n                <\/p>\n\n                <div class=\"nrn-hero-actions\">\n\n                    <a href=\"#nrNewsDirectory\" class=\"nrn-btn-primary\">\n                        \u0e14\u0e39\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e02\u0e48\u0e32\u0e27\n                        <span>\u2193<\/span>\n                    <\/a>\n\n                    <div class=\"nrn-psu-label\">\n                        Faculty of Natural Resources\n                        <small>Prince of Songkla University<\/small>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- GRAPHIC -->\n            <div class=\"nrn-hero-visual\">\n\n                <div class=\"nrn-visual-card\">\n\n                    <div class=\"nrn-visual-top\">\n                        <span>NR \u00b7 PSU<\/span>\n                        <span class=\"nrn-status\">\n                            <i><\/i> UPDATED\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"nrn-visual-main\">\n\n                        <div class=\"nrn-big-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 4h16v16H4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><\/path>\n                                <path d=\"M7 8h10M7 12h10M7 16h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><\/path>\n                            <\/svg>\n                        <\/div>\n\n                        <div>\n                            <div class=\"nrn-visual-title\">\n                                News Center\n                            <\/div>\n                            <div class=\"nrn-visual-sub\">\n                                \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e23\u0e27\u0e21\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e04\u0e13\u0e30\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n\n                    <div class=\"nrn-mini-grid\">\n                        <div>\n                            <strong id=\"nrTotalCategories\">\u2014<\/strong>\n                            <span>\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e48\u0e32\u0e27<\/span>\n                        <\/div>\n\n                        <div>\n                            <strong id=\"nrTotalNews\">\u2014<\/strong>\n                            <span>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e02\u0e48\u0e32\u0e27<\/span>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n\n\n    <!-- DIRECTORY -->\n    <section class=\"nrn-directory\" id=\"nrNewsDirectory\">\n\n        <div class=\"nrn-container\">\n\n            <div class=\"nrn-section-head\">\n\n                <div>\n                    <div class=\"nrn-section-label\">\n                        EXPLORE NEWS\n                    <\/div>\n\n                    <h2>\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23<\/h2>\n\n                    <p>\n                        \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\n                    <\/p>\n                <\/div>\n\n\n                <!-- SEARCH -->\n                <div class=\"nrn-search\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"11\" cy=\"11\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><\/circle>\n\n                        <path d=\"M16 16l4 4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><\/path>\n                    <\/svg>\n\n                    <input type=\"text\" id=\"nrCategorySearch\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e48\u0e32\u0e27...\" autocomplete=\"off\">\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- LOADING -->\n            <div id=\"nrNewsLoading\" class=\"nrn-loading\">\n\n                <div class=\"nrn-spinner\"><\/div>\n\n                <span>\n                    \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e02\u0e48\u0e32\u0e27&#8230;\n                <\/span>\n\n            <\/div>\n\n\n            <!-- CATEGORY CARDS -->\n            <div id=\"nrCategoryGrid\" class=\"nrn-category-grid\">\n            <\/div>\n\n\n            <!-- NO RESULT -->\n            <div id=\"nrNoResult\" class=\"nrn-no-result\" style=\"display:none;\">\n\n                \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- FOOT -->\n    <section class=\"nrn-foot\">\n\n        <div class=\"nrn-container nrn-foot-inner\">\n\n            <div>\n                <strong>\n                    Faculty of Natural Resources\n                <\/strong>\n\n                <span>\n                    Prince of Songkla University\n                <\/span>\n            <\/div>\n\n            <a href=\"#\" onclick=\"window.scrollTo({top:0,behavior:'smooth'});return false;\">\n                \u0e01\u0e25\u0e31\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 \u2191\n            <\/a>\n\n        <\/div>\n\n    <\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>NEWS &amp; ACTIVITIE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","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-2798","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/pages\/2798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2798"}],"version-history":[{"count":9,"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/pages\/2798\/revisions"}],"predecessor-version":[{"id":8968,"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=\/wp\/v2\/pages\/2798\/revisions\/8968"}],"wp:attachment":[{"href":"https:\/\/natres.psu.ac.th\/main\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}