{"id":144,"date":"2026-08-11T10:54:55","date_gmt":"2026-08-11T03:54:55","guid":{"rendered":"https:\/\/rkk.ac.th\/?page_id=144"},"modified":"2026-08-11T12:35:32","modified_gmt":"2026-08-11T05:35:32","slug":"%e0%b8%94%e0%b8%b2%e0%b8%a7%e0%b9%82%e0%b8%ab%e0%b8%a5%e0%b8%94%e0%b9%80%e0%b8%ad%e0%b8%81%e0%b8%aa%e0%b8%b2%e0%b8%a3-2","status":"publish","type":"page","link":"https:\/\/rkk.ac.th\/?page_id=144","title":{"rendered":"\u0e14\u0e32\u0e27\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull\" style=\"padding-top:0vw;padding-right:0vw;padding-bottom:0vw;padding-left:0vw;min-height:66vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-accent-6-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div id=\"rkk-download-system\">\n\n    <!-- HERO -->\n    <section class=\"rkk-dl-hero\">\n        <div class=\"rkk-dl-hero-inner\">\n\n            <img decoding=\"async\"\n                class=\"rkk-dl-logo\"\n                src=\"https:\/\/lh3.googleusercontent.com\/d\/1qCwC756tTgKxhjIz48VVebVJMF-APxJu\"\n                alt=\"\u0e15\u0e23\u0e32\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e48\u0e21\u0e40\u0e01\u0e25\u0e49\u0e32 \u0e01\u0e32\u0e0d\u0e08\u0e19\u0e1a\u0e38\u0e23\u0e35\"\n            >\n\n            <div class=\"rkk-dl-live\">\n                <span class=\"rkk-dl-live-dot\"><\/span>\n                \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 Google Drive\n            <\/div>\n\n            <h2>\u0e04\u0e25\u0e31\u0e07\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/h2>\n\n            <p>\n                \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21 \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\n                \u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35\n            <\/p>\n\n        <\/div>\n    <\/section>\n\n\n    <!-- MAIN -->\n    <main class=\"rkk-dl-main\">\n\n        <!-- FILTER -->\n        <section class=\"rkk-dl-filter\">\n\n            <div class=\"rkk-dl-category\">\n\n                <label for=\"rkkDlCategory\">\n                    \u0e01\u0e25\u0e38\u0e48\u0e21\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19:\n                <\/label>\n\n                <select id=\"rkkDlCategory\">\n                    <option value=\"all\">\n                        \u0e41\u0e2a\u0e14\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e38\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\n                    <\/option>\n                <\/select>\n\n            <\/div>\n\n\n            <div class=\"rkk-dl-search-wrap\">\n\n                <span class=\"rkk-dl-search-icon\">\n                    \u2315\n                <\/span>\n\n                <input\n                    id=\"rkkDlSearch\"\n                    type=\"text\"\n                    placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c...\"\n                >\n\n            <\/div>\n\n        <\/section>\n\n\n        <!-- TOOLBAR -->\n        <section class=\"rkk-dl-toolbar\">\n\n            <div>\n                \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\n                <strong id=\"rkkDlCount\">0<\/strong>\n                \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\n            <\/div>\n\n\n            <div class=\"rkk-dl-toolbar-right\">\n\n                <div class=\"rkk-dl-view-switch\">\n\n                    <button\n                        id=\"rkkDlTableButton\"\n                        class=\"active\"\n                        type=\"button\"\n                    >\n                        \u2630 \u0e15\u0e32\u0e23\u0e32\u0e07\n                    <\/button>\n\n                    <button\n                        id=\"rkkDlCardButton\"\n                        type=\"button\"\n                    >\n                        \u25a6 \u0e01\u0e32\u0e23\u0e4c\u0e14\n                    <\/button>\n\n                <\/div>\n\n\n                <div\n                    id=\"rkkDlStatus\"\n                    class=\"rkk-dl-status\"\n                >\n                    \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25&#8230;\n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n\n        <!-- LOADING -->\n        <section\n            id=\"rkkDlLoading\"\n            class=\"rkk-dl-loading\"\n        >\n\n            <div class=\"rkk-dl-spinner\"><\/div>\n\n            <p>\n                \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c\u0e08\u0e32\u0e01 Google Drive&#8230;\n            <\/p>\n\n        <\/section>\n\n\n        <!-- TABLE -->\n        <section\n            id=\"rkkDlTableView\"\n            class=\"rkk-dl-table-box\"\n        >\n\n            <div class=\"rkk-dl-table-scroll\">\n\n                <table>\n\n                    <thead>\n                        <tr>\n\n                            <th>\n                                \u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\n                            <\/th>\n\n                            <th>\n                                \u0e01\u0e25\u0e38\u0e48\u0e21\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\n                            <\/th>\n\n                            <th>\n                                \u0e02\u0e19\u0e32\u0e14\n                            <\/th>\n\n                            <th>\n                                \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\n                            <\/th>\n\n                            <th class=\"rkk-dl-center\">\n                                \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\n                            <\/th>\n\n                        <\/tr>\n                    <\/thead>\n\n                    <tbody id=\"rkkDlTableBody\">\n                    <\/tbody>\n\n                <\/table>\n\n            <\/div>\n\n        <\/section>\n\n\n        <!-- CARD -->\n        <section\n            id=\"rkkDlCardView\"\n            class=\"rkk-dl-card-grid\"\n        >\n        <\/section>\n\n\n        <!-- EMPTY -->\n        <section\n            id=\"rkkDlEmpty\"\n            class=\"rkk-dl-empty\"\n        >\n\n            <div class=\"rkk-dl-empty-icon\">\n                \u25eb\n            <\/div>\n\n            <strong>\n                \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e04\u0e49\u0e19\u0e2b\u0e32\n            <\/strong>\n\n            <span>\n                \u0e25\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32 \u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e2d\u0e37\u0e48\u0e19\n            <\/span>\n\n        <\/section>\n\n\n        <!-- PAGINATION -->\n        <nav\n            id=\"rkkDlPagination\"\n            class=\"rkk-dl-pagination\"\n        >\n        <\/nav>\n\n    <\/main>\n\n\n    <!-- FOOTER -->\n    <footer class=\"rkk-dl-footer\">\n\n        <strong>\n            \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e48\u0e21\u0e40\u0e01\u0e25\u0e49\u0e32 \u0e01\u0e32\u0e0d\u0e08\u0e19\u0e1a\u0e38\u0e23\u0e35 (\u0e43\u0e19\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e14\u0e33\u0e23\u0e34)\n        <\/strong>\n\n        <span>\n            \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\n        <\/span>\n\n    <\/footer>\n\n\n    <!-- TOAST -->\n    <div\n        id=\"rkkDlToast\"\n        class=\"rkk-dl-toast\"\n    >\n        <span id=\"rkkDlToastText\">\n            \u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e41\u0e25\u0e49\u0e27\n        <\/span>\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =====================================================\n   BASE\n   ===================================================== *\/\n\n#rkk-download-system,\n#rkk-download-system * {\n    box-sizing: border-box;\n}\n\n#rkk-download-system {\n\n    --navy-950: #080d1a;\n    --navy-900: #0f1738;\n    --navy-800: #141f4b;\n    --navy-700: #182760;\n    --navy-600: #1c3177;\n\n    --blue-50: #eff6ff;\n    --blue-100: #dbeafe;\n    --blue-200: #bfdbfe;\n    --blue-600: #2563eb;\n    --blue-700: #1d4ed8;\n\n    --slate-50: #f8fafc;\n    --slate-100: #f1f5f9;\n    --slate-200: #e2e8f0;\n    --slate-300: #cbd5e1;\n    --slate-400: #94a3b8;\n    --slate-500: #64748b;\n    --slate-600: #475569;\n    --slate-700: #334155;\n    --slate-800: #1e293b;\n\n    font-family:\n        \"Prompt\",\n        \"Sarabun\",\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n\n    width: 100%;\n\n    background:\n        var(--slate-50) !important;\n\n    color:\n        var(--slate-800) !important;\n\n    overflow: hidden;\n}\n\n\n\n\/* =====================================================\n   HERO\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-hero {\n\n    padding:\n        58px 20px;\n\n    background-color:\n        var(--navy-950) !important;\n\n    background-image:\n        radial-gradient(\n            rgba(255,255,255,.11) 1px,\n            transparent 1px\n        ) !important;\n\n    background-size:\n        20px 20px !important;\n\n    color:\n        #fff !important;\n}\n\n\n#rkk-download-system .rkk-dl-hero-inner {\n\n    max-width:\n        900px;\n\n    margin:\n        0 auto;\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    align-items:\n        center;\n\n    text-align:\n        center;\n\n    gap:\n        14px;\n}\n\n\n#rkk-download-system .rkk-dl-logo {\n\n    width:\n        125px;\n\n    height:\n        auto;\n\n    margin-bottom:\n        4px;\n\n    filter:\n        drop-shadow(\n            0 10px 20px\n            rgba(0,0,0,.65)\n        );\n}\n\n\n#rkk-download-system .rkk-dl-live {\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    gap:\n        8px;\n\n    padding:\n        7px 15px;\n\n    border:\n        1px solid\n        rgba(96,165,250,.32);\n\n    border-radius:\n        999px;\n\n    background:\n        #131d38 !important;\n\n    color:\n        #bfdbfe !important;\n\n    font-size:\n        11px;\n\n    font-weight:\n        500;\n}\n\n\n#rkk-download-system .rkk-dl-live-dot {\n\n    width:\n        8px;\n\n    height:\n        8px;\n\n    border-radius:\n        50%;\n\n    background:\n        #60a5fa !important;\n\n    box-shadow:\n        0 0 10px\n        rgba(96,165,250,.8);\n\n    animation:\n        rkkDlPulse 2s infinite;\n}\n\n\n@keyframes rkkDlPulse {\n\n    50% {\n        opacity: .4;\n    }\n\n}\n\n\n#rkk-download-system .rkk-dl-hero h2 {\n\n    margin:\n        2px 0 0;\n\n    color:\n        #fff !important;\n\n    font-size:\n        29px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.3;\n}\n\n\n#rkk-download-system .rkk-dl-hero p {\n\n    margin:\n        0;\n\n    color:\n        var(--slate-300) !important;\n\n    font-size:\n        13px;\n\n    line-height:\n        1.7;\n}\n\n\n\n\/* =====================================================\n   MAIN\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-main {\n\n    width:\n        min(\n            1280px,\n            calc(100% - 36px)\n        );\n\n    margin:\n        0 auto;\n\n    padding:\n        30px 0 45px;\n}\n\n\n\n\/* =====================================================\n   FILTER\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-filter {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        space-between;\n\n    gap:\n        15px;\n\n    padding:\n        15px;\n\n    border:\n        1px solid\n        var(--slate-200);\n\n    border-radius:\n        17px;\n\n    background:\n        #fff !important;\n\n    box-shadow:\n        0 5px 18px\n        rgba(15,23,42,.04);\n}\n\n\n#rkk-download-system .rkk-dl-category {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    gap:\n        9px;\n}\n\n\n#rkk-download-system .rkk-dl-category label {\n\n    color:\n        var(--slate-700) !important;\n\n    font-size:\n        12px;\n\n    font-weight:\n        600;\n\n    white-space:\n        nowrap;\n}\n\n\n#rkk-download-system #rkkDlCategory {\n\n    min-width:\n        260px;\n\n    height:\n        42px;\n\n    padding:\n        0 35px 0 12px;\n\n    border:\n        1px solid\n        var(--slate-200) !important;\n\n    border-radius:\n        11px;\n\n    background:\n        var(--slate-50) !important;\n\n    color:\n        var(--slate-700) !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        12px;\n\n    outline:\n        none;\n}\n\n\n#rkk-download-system .rkk-dl-search-wrap {\n\n    position:\n        relative;\n\n    width:\n        300px;\n}\n\n\n#rkk-download-system .rkk-dl-search-icon {\n\n    position:\n        absolute;\n\n    left:\n        13px;\n\n    top:\n        50%;\n\n    transform:\n        translateY(-50%);\n\n    color:\n        var(--slate-400) !important;\n\n    font-size:\n        23px;\n\n    pointer-events:\n        none;\n}\n\n\n#rkk-download-system #rkkDlSearch {\n\n    width:\n        100%;\n\n    height:\n        42px;\n\n    margin:\n        0;\n\n    padding:\n        0 13px 0 41px;\n\n    border:\n        1px solid\n        var(--slate-200) !important;\n\n    border-radius:\n        11px;\n\n    background:\n        var(--slate-50) !important;\n\n    color:\n        var(--slate-700) !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        12px;\n\n    outline:\n        none;\n}\n\n\n#rkk-download-system #rkkDlSearch:focus,\n#rkk-download-system #rkkDlCategory:focus {\n\n    border-color:\n        var(--blue-600) !important;\n\n    box-shadow:\n        0 0 0 3px\n        rgba(37,99,235,.1);\n}\n\n\n\n\/* =====================================================\n   TOOLBAR\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-toolbar {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        space-between;\n\n    gap:\n        15px;\n\n    padding:\n        14px 7px 9px;\n\n    color:\n        var(--slate-500) !important;\n\n    font-size:\n        11px;\n}\n\n\n#rkk-download-system .rkk-dl-toolbar strong {\n\n    color:\n        var(--slate-800) !important;\n}\n\n\n#rkk-download-system .rkk-dl-toolbar-right {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    gap:\n        12px;\n}\n\n\n#rkk-download-system .rkk-dl-view-switch {\n\n    display:\n        flex;\n\n    padding:\n        3px;\n\n    border-radius:\n        11px;\n\n    background:\n        var(--slate-200) !important;\n}\n\n\n#rkk-download-system .rkk-dl-view-switch button {\n\n    padding:\n        7px 10px;\n\n    margin:\n        0;\n\n    border:\n        0 !important;\n\n    border-radius:\n        8px;\n\n    background:\n        transparent !important;\n\n    color:\n        var(--slate-600) !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        11px;\n\n    cursor:\n        pointer;\n}\n\n\n#rkk-download-system .rkk-dl-view-switch button.active {\n\n    background:\n        #fff !important;\n\n    color:\n        var(--blue-600) !important;\n\n    box-shadow:\n        0 2px 5px\n        rgba(15,23,42,.1);\n\n    font-weight:\n        600;\n}\n\n\n#rkk-download-system .rkk-dl-status {\n\n    color:\n        #059669 !important;\n\n    font-size:\n        10px;\n\n    white-space:\n        nowrap;\n}\n\n\n#rkk-download-system .rkk-dl-status.error {\n\n    color:\n        #dc2626 !important;\n}\n\n\n\n\/* =====================================================\n   LOADING\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-loading {\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    padding:\n        65px 20px;\n\n    color:\n        var(--slate-500) !important;\n\n    font-size:\n        12px;\n}\n\n\n#rkk-download-system .rkk-dl-loading.hidden {\n\n    display:\n        none;\n}\n\n\n#rkk-download-system .rkk-dl-spinner {\n\n    width:\n        38px;\n\n    height:\n        38px;\n\n    margin-bottom:\n        12px;\n\n    border:\n        4px solid\n        var(--blue-100);\n\n    border-top-color:\n        var(--blue-600);\n\n    border-radius:\n        50%;\n\n    animation:\n        rkkDlSpin .8s linear infinite;\n}\n\n\n@keyframes rkkDlSpin {\n\n    to {\n        transform:\n            rotate(360deg);\n    }\n\n}\n\n\n\n\/* =====================================================\n   TABLE\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-table-box {\n\n    overflow:\n        hidden;\n\n    border:\n        1px solid\n        var(--slate-200);\n\n    border-radius:\n        17px;\n\n    background:\n        #fff !important;\n\n    box-shadow:\n        0 5px 18px\n        rgba(15,23,42,.04);\n}\n\n\n#rkk-download-system .rkk-dl-table-scroll {\n\n    overflow-x:\n        auto;\n}\n\n\n#rkk-download-system table {\n\n    width:\n        100%;\n\n    margin:\n        0;\n\n    border-collapse:\n        collapse;\n\n    background:\n        #fff !important;\n}\n\n\n#rkk-download-system thead {\n\n    background:\n        var(--slate-50) !important;\n}\n\n\n#rkk-download-system th {\n\n    padding:\n        14px 16px;\n\n    border:\n        0;\n\n    border-bottom:\n        1px solid\n        var(--slate-200);\n\n    background:\n        transparent !important;\n\n    color:\n        var(--slate-600) !important;\n\n    font-size:\n        11px;\n\n    font-weight:\n        600;\n\n    text-align:\n        left;\n\n    white-space:\n        nowrap;\n}\n\n\n#rkk-download-system td {\n\n    padding:\n        14px 16px;\n\n    border:\n        0;\n\n    border-bottom:\n        1px solid\n        var(--slate-100);\n\n    background:\n        transparent !important;\n\n    color:\n        var(--slate-600) !important;\n\n    font-size:\n        12px;\n\n    vertical-align:\n        middle;\n}\n\n\n#rkk-download-system tbody tr {\n\n    background:\n        #fff !important;\n\n    transition:\n        .15s ease;\n}\n\n\n#rkk-download-system tbody tr:hover {\n\n    background:\n        #f8fbff !important;\n}\n\n\n#rkk-download-system .rkk-dl-center {\n\n    text-align:\n        center;\n}\n\n\n\n\/* =====================================================\n   FILE\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-file {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    gap:\n        11px;\n\n    min-width:\n        240px;\n}\n\n\n#rkk-download-system .rkk-dl-icon {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    flex:\n        0 0 42px;\n\n    width:\n        42px;\n\n    height:\n        42px;\n\n    border-radius:\n        11px;\n\n    font-size:\n        10px;\n\n    font-weight:\n        700;\n}\n\n\n#rkk-download-system .rkk-dl-icon-pdf {\n\n    background:\n        #fef2f2 !important;\n\n    color:\n        #dc2626 !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-word {\n\n    background:\n        #eff6ff !important;\n\n    color:\n        #2563eb !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-excel {\n\n    background:\n        #ecfdf5 !important;\n\n    color:\n        #059669 !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-image {\n\n    background:\n        #faf5ff !important;\n\n    color:\n        #9333ea !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-zip {\n\n    background:\n        #fffbeb !important;\n\n    color:\n        #d97706 !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-video {\n\n    background:\n        #fff1f2 !important;\n\n    color:\n        #e11d48 !important;\n}\n\n\n#rkk-download-system .rkk-dl-icon-other {\n\n    background:\n        var(--slate-100) !important;\n\n    color:\n        var(--slate-600) !important;\n}\n\n\n#rkk-download-system .rkk-dl-file-name {\n\n    color:\n        var(--slate-800) !important;\n\n    font-size:\n        12px;\n\n    font-weight:\n        600;\n\n    line-height:\n        1.45;\n\n    word-break:\n        break-word;\n}\n\n\n#rkk-download-system .rkk-dl-group {\n\n    display:\n        inline-flex;\n\n    padding:\n        5px 9px;\n\n    border:\n        1px solid\n        var(--blue-100);\n\n    border-radius:\n        8px;\n\n    background:\n        var(--blue-50) !important;\n\n    color:\n        var(--blue-700) !important;\n\n    font-size:\n        10px;\n\n    font-weight:\n        500;\n\n    white-space:\n        nowrap;\n}\n\n\n\n\/* =====================================================\n   BUTTON\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-actions {\n\n    display:\n        flex;\n\n    justify-content:\n        center;\n\n    align-items:\n        center;\n\n    gap:\n        6px;\n}\n\n\n#rkk-download-system .rkk-dl-download {\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        5px;\n\n    padding:\n        7px 11px;\n\n    border:\n        0 !important;\n\n    border-radius:\n        10px;\n\n    background:\n        var(--blue-600) !important;\n\n    color:\n        #fff !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        10px;\n\n    font-weight:\n        600;\n\n    text-decoration:\n        none !important;\n\n    white-space:\n        nowrap;\n\n    transition:\n        .15s ease;\n}\n\n\n#rkk-download-system .rkk-dl-download:hover {\n\n    background:\n        var(--blue-700) !important;\n\n    color:\n        #fff !important;\n\n    transform:\n        translateY(-1px);\n}\n\n\n#rkk-download-system .rkk-dl-copy {\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    width:\n        34px;\n\n    height:\n        34px;\n\n    margin:\n        0;\n\n    padding:\n        0;\n\n    border:\n        0 !important;\n\n    border-radius:\n        9px;\n\n    background:\n        var(--slate-100) !important;\n\n    color:\n        var(--slate-500) !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        14px;\n\n    cursor:\n        pointer;\n}\n\n\n\n\/* =====================================================\n   CARD VIEW\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-card-grid {\n\n    display:\n        none;\n\n    grid-template-columns:\n        repeat(\n            3,\n            minmax(0,1fr)\n        );\n\n    gap:\n        17px;\n}\n\n\n#rkk-download-system .rkk-dl-card-grid.active {\n\n    display:\n        grid;\n}\n\n\n#rkk-download-system .rkk-dl-card {\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    min-height:\n        220px;\n\n    padding:\n        18px;\n\n    border:\n        1px solid\n        var(--slate-200);\n\n    border-radius:\n        17px;\n\n    background:\n        #fff !important;\n\n    box-shadow:\n        0 5px 16px\n        rgba(15,23,42,.04);\n\n    transition:\n        .2s ease;\n}\n\n\n#rkk-download-system .rkk-dl-card:hover {\n\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 12px 24px\n        rgba(37,99,235,.09);\n}\n\n\n#rkk-download-system .rkk-dl-card-head {\n\n    display:\n        flex;\n\n    align-items:\n        flex-start;\n\n    justify-content:\n        space-between;\n\n    gap:\n        10px;\n\n    margin-bottom:\n        14px;\n}\n\n\n#rkk-download-system .rkk-dl-card-title {\n\n    flex:\n        1;\n\n    color:\n        var(--slate-800) !important;\n\n    font-size:\n        13px;\n\n    font-weight:\n        600;\n\n    line-height:\n        1.6;\n\n    word-break:\n        break-word;\n}\n\n\n#rkk-download-system .rkk-dl-card-meta {\n\n    display:\n        flex;\n\n    flex-wrap:\n        wrap;\n\n    gap:\n        7px 13px;\n\n    margin-top:\n        12px;\n\n    color:\n        var(--slate-500) !important;\n\n    font-size:\n        10px;\n}\n\n\n#rkk-download-system .rkk-dl-card-bottom {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    gap:\n        7px;\n\n    margin-top:\n        auto;\n\n    padding-top:\n        15px;\n\n    border-top:\n        1px solid\n        var(--slate-100);\n}\n\n\n#rkk-download-system .rkk-dl-card-bottom .rkk-dl-download {\n\n    flex:\n        1;\n}\n\n\n\n\/* =====================================================\n   EMPTY\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-empty {\n\n    display:\n        none;\n\n    flex-direction:\n        column;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    padding:\n        70px 20px;\n\n    border:\n        1px dashed\n        var(--slate-300);\n\n    border-radius:\n        17px;\n\n    background:\n        #fff !important;\n\n    color:\n        var(--slate-400) !important;\n\n    text-align:\n        center;\n\n    gap:\n        6px;\n}\n\n\n#rkk-download-system .rkk-dl-empty.active {\n\n    display:\n        flex;\n}\n\n\n#rkk-download-system .rkk-dl-empty-icon {\n\n    font-size:\n        40px;\n}\n\n\n#rkk-download-system .rkk-dl-empty strong {\n\n    color:\n        var(--slate-700) !important;\n\n    font-size:\n        14px;\n}\n\n\n#rkk-download-system .rkk-dl-empty span {\n\n    font-size:\n        11px;\n}\n\n\n\n\/* =====================================================\n   PAGINATION\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-pagination {\n\n    display:\n        flex;\n\n    justify-content:\n        center;\n\n    align-items:\n        center;\n\n    flex-wrap:\n        wrap;\n\n    gap:\n        6px;\n\n    padding-top:\n        22px;\n}\n\n\n#rkk-download-system .rkk-dl-page {\n\n    min-width:\n        35px;\n\n    height:\n        35px;\n\n    padding:\n        0 9px;\n\n    border:\n        1px solid\n        var(--slate-200) !important;\n\n    border-radius:\n        9px;\n\n    background:\n        #fff !important;\n\n    color:\n        var(--slate-600) !important;\n\n    font-family:\n        inherit;\n\n    font-size:\n        11px;\n\n    cursor:\n        pointer;\n}\n\n\n#rkk-download-system .rkk-dl-page.active {\n\n    border-color:\n        var(--blue-600) !important;\n\n    background:\n        var(--blue-600) !important;\n\n    color:\n        #fff !important;\n\n    font-weight:\n        600;\n}\n\n\n\n\/* =====================================================\n   FOOTER\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-footer {\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    align-items:\n        center;\n\n    gap:\n        2px;\n\n    padding:\n        24px 15px;\n\n    background:\n        var(--navy-900) !important;\n\n    color:\n        var(--slate-400) !important;\n\n    font-size:\n        11px;\n\n    text-align:\n        center;\n}\n\n\n#rkk-download-system .rkk-dl-footer strong {\n\n    color:\n        var(--slate-200) !important;\n\n    font-weight:\n        500;\n}\n\n\n\n\/* =====================================================\n   TOAST\n   ===================================================== *\/\n\n#rkk-download-system .rkk-dl-toast {\n\n    position:\n        fixed;\n\n    z-index:\n        9999999;\n\n    right:\n        20px;\n\n    bottom:\n        20px;\n\n    transform:\n        translateY(90px);\n\n    opacity:\n        0;\n\n    padding:\n        11px 16px;\n\n    border:\n        1px solid\n        var(--slate-700);\n\n    border-radius:\n        11px;\n\n    background:\n        var(--slate-800) !important;\n\n    color:\n        #fff !important;\n\n    font-size:\n        11px;\n\n    box-shadow:\n        0 15px 35px\n        rgba(0,0,0,.25);\n\n    transition:\n        .25s ease;\n\n    pointer-events:\n        none;\n}\n\n\n#rkk-download-system .rkk-dl-toast.active {\n\n    transform:\n        translateY(0);\n\n    opacity:\n        1;\n}\n\n\n\n\/* =====================================================\n   RESPONSIVE\n   ===================================================== *\/\n\n@media (max-width: 1000px) {\n\n    #rkk-download-system .rkk-dl-filter {\n\n        flex-direction:\n            column;\n\n        align-items:\n            stretch;\n    }\n\n\n    #rkk-download-system .rkk-dl-search-wrap {\n\n        width:\n            100%;\n    }\n\n\n    #rkk-download-system .rkk-dl-card-grid {\n\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0,1fr)\n            );\n    }\n\n}\n\n\n@media (max-width: 720px) {\n\n    #rkk-download-system .rkk-dl-hero {\n\n        padding:\n            42px 15px;\n    }\n\n\n    #rkk-download-system .rkk-dl-logo {\n\n        width:\n            95px;\n    }\n\n\n    #rkk-download-system .rkk-dl-hero h2 {\n\n        font-size:\n            23px;\n    }\n\n\n    #rkk-download-system .rkk-dl-hero p {\n\n        font-size:\n            11px;\n    }\n\n\n    #rkk-download-system .rkk-dl-main {\n\n        width:\n            calc(100% - 20px);\n\n        padding-top:\n            18px;\n    }\n\n\n    #rkk-download-system .rkk-dl-category {\n\n        flex-direction:\n            column;\n\n        align-items:\n            stretch;\n    }\n\n\n    #rkk-download-system #rkkDlCategory {\n\n        width:\n            100%;\n\n        min-width:\n            0;\n    }\n\n\n    #rkk-download-system .rkk-dl-toolbar {\n\n        align-items:\n            flex-start;\n\n        flex-direction:\n            column;\n    }\n\n\n    #rkk-download-system .rkk-dl-toolbar-right {\n\n        width:\n            100%;\n\n        justify-content:\n            space-between;\n    }\n\n\n    #rkk-download-system .rkk-dl-card-grid {\n\n        grid-template-columns:\n            1fr;\n    }\n\n\n    #rkk-download-system th:nth-child(2),\n    #rkk-download-system td:nth-child(2),\n    #rkk-download-system th:nth-child(3),\n    #rkk-download-system td:nth-child(3),\n    #rkk-download-system th:nth-child(4),\n    #rkk-download-system td:nth-child(4) {\n\n        display:\n            none;\n    }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       CONFIG\n       ===================================================== *\/\n\n    const API_URL =\n        window.location.origin +\n        \"\/?rest_route=\/rkk\/v1\/downloads\";\n\n    const ITEMS_PER_PAGE =\n        20;\n\n\n    \/* =====================================================\n       STATE\n       ===================================================== *\/\n\n    let files =\n        [];\n\n    let filteredFiles =\n        [];\n\n    let currentPage =\n        1;\n\n    let currentView =\n        \"table\";\n\n\n    \/* =====================================================\n       HELPER\n       ===================================================== *\/\n\n    function el(id) {\n\n        return document.getElementById(id);\n\n    }\n\n\n    function escapeHTML(value) {\n\n        const temp =\n            document.createElement(\"div\");\n\n        temp.textContent =\n            value == null\n                ? \"\"\n                : String(value);\n\n        return temp.innerHTML;\n\n    }\n\n\n    function escapeAttr(value) {\n\n        return String(\n            value == null\n                ? \"\"\n                : value\n        )\n        .replace(\/&\/g, \"&amp;\")\n        .replace(\/\"\/g, \"&quot;\")\n        .replace(\/<\/g, \"&lt;\")\n        .replace(\/>\/g, \"&gt;\");\n\n    }\n\n\n    \/* =====================================================\n       INIT\n       ===================================================== *\/\n\n    function init() {\n\n        if (\n            !el(\n                \"rkk-download-system\"\n            )\n        ) {\n            return;\n        }\n\n\n        el(\"rkkDlSearch\")\n            .addEventListener(\n                \"input\",\n                filterFiles\n            );\n\n\n        el(\"rkkDlCategory\")\n            .addEventListener(\n                \"change\",\n                filterFiles\n            );\n\n\n        el(\"rkkDlTableButton\")\n            .addEventListener(\n                \"click\",\n                function () {\n                    switchView(\n                        \"table\"\n                    );\n                }\n            );\n\n\n        el(\"rkkDlCardButton\")\n            .addEventListener(\n                \"click\",\n                function () {\n                    switchView(\n                        \"card\"\n                    );\n                }\n            );\n\n\n        loadFiles();\n\n    }\n\n\n\n    \/* =====================================================\n       API\n       ===================================================== *\/\n\n    async function loadFiles() {\n\n        setLoading(\n            true\n        );\n\n\n        setStatus(\n            \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d...\"\n        );\n\n\n        try {\n\n            const response =\n                await fetch(\n                    API_URL,\n                    {\n                        method:\n                            \"GET\",\n\n                        cache:\n                            \"no-store\",\n\n                        headers: {\n                            \"Accept\":\n                                \"application\/json\"\n                        }\n                    }\n                );\n\n\n            if (\n                !response.ok\n            ) {\n\n                throw new Error(\n                    \"HTTP \" +\n                    response.status\n                );\n\n            }\n\n\n            const result =\n                await response.json();\n\n\n            if (\n                !result ||\n                result.success !== true ||\n                !Array.isArray(\n                    result.data\n                )\n            ) {\n\n                throw new Error(\n                    result &&\n                    result.message\n                        ?\n                        result.message\n                        :\n                        \"\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 API \u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\"\n                );\n\n            }\n\n\n            files =\n                result.data.map(\n                    normalizeFile\n                );\n\n\n            sortFiles();\n\n\n            buildCategories();\n\n\n            filteredFiles =\n                [...files];\n\n\n            currentPage =\n                1;\n\n\n            setStatus(\n                \"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\"\n            );\n\n\n            render();\n\n\n        }\n\n        catch (error) {\n\n            console.error(\n                \"RKK DOWNLOAD ERROR:\",\n                error\n            );\n\n\n            files =\n                [];\n\n            filteredFiles =\n                [];\n\n\n            setStatus(\n                \"\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\",\n                true\n            );\n\n\n            render();\n\n        }\n\n        finally {\n\n            setLoading(\n                false\n            );\n\n        }\n\n    }\n\n\n\n    function normalizeFile(file) {\n\n        return {\n\n            id:\n                String(\n                    file.id ||\n                    \"\"\n                ),\n\n            name:\n                String(\n                    file.name ||\n                    \"\"\n                ).trim(),\n\n            group:\n                String(\n                    file.group ||\n                    \"\u0e2d\u0e37\u0e48\u0e19 \u0e46\"\n                ).trim(),\n\n            size:\n                String(\n                    file.size ||\n                    \"-\"\n                ),\n\n            bytes:\n                Number(\n                    file.bytes ||\n                    0\n                ),\n\n            mimeType:\n                String(\n                    file.mimeType ||\n                    \"\"\n                ),\n\n            lastUpdated:\n                String(\n                    file.lastUpdated ||\n                    \"-\"\n                ),\n\n            downloadUrl:\n                String(\n                    file.downloadUrl ||\n                    \"\"\n                ),\n\n            previewUrl:\n                String(\n                    file.previewUrl ||\n                    \"\"\n                )\n\n        };\n\n    }\n\n\n\n    \/* =====================================================\n       SORT\n       ===================================================== *\/\n\n    function sortFiles() {\n\n        files.sort(\n            function (a, b) {\n\n                return a.name.localeCompare(\n                    b.name,\n                    \"th\"\n                );\n\n            }\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       CATEGORY\n       ===================================================== *\/\n\n    function buildCategories() {\n\n        const categories =\n            [\n                ...new Set(\n                    files\n                        .map(\n                            function (file) {\n\n                                return file.group;\n\n                            }\n                        )\n                        .filter(Boolean)\n                )\n            ];\n\n\n        categories.sort(\n            function (a, b) {\n\n                return a.localeCompare(\n                    b,\n                    \"th\"\n                );\n\n            }\n        );\n\n\n        const select =\n            el(\n                \"rkkDlCategory\"\n            );\n\n\n        select.innerHTML =\n            '<option value=\"all\">\ud83d\udcc2 \u0e41\u0e2a\u0e14\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e38\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19<\/option>';\n\n\n        categories.forEach(\n            function (category) {\n\n                const option =\n                    document.createElement(\n                        \"option\"\n                    );\n\n\n                option.value =\n                    category;\n\n\n                option.textContent =\n                    category;\n\n\n                select.appendChild(\n                    option\n                );\n\n            }\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       FILTER\n       ===================================================== *\/\n\n    function filterFiles() {\n\n        const query =\n            el(\"rkkDlSearch\")\n            .value\n            .trim()\n            .toLowerCase();\n\n\n        const category =\n            el(\"rkkDlCategory\")\n            .value;\n\n\n        filteredFiles =\n            files.filter(\n                function (file) {\n\n                    const searchMatch =\n                        !query ||\n                        file.name\n                            .toLowerCase()\n                            .includes(\n                                query\n                            ) ||\n                        file.group\n                            .toLowerCase()\n                            .includes(\n                                query\n                            );\n\n\n                    const categoryMatch =\n                        category === \"all\" ||\n                        file.group ===\n                        category;\n\n\n                    return (\n                        searchMatch &&\n                        categoryMatch\n                    );\n\n                }\n            );\n\n\n        currentPage =\n            1;\n\n\n        render();\n\n    }\n\n\n\n    \/* =====================================================\n       RENDER\n       ===================================================== *\/\n\n    function render() {\n\n        const total =\n            filteredFiles.length;\n\n\n        el(\"rkkDlCount\")\n            .textContent =\n            total;\n\n\n        const totalPages =\n            Math.max(\n                1,\n                Math.ceil(\n                    total \/\n                    ITEMS_PER_PAGE\n                )\n            );\n\n\n        if (\n            currentPage >\n            totalPages\n        ) {\n\n            currentPage =\n                totalPages;\n\n        }\n\n\n        const start =\n            (\n                currentPage -\n                1\n            ) *\n            ITEMS_PER_PAGE;\n\n\n        const pageFiles =\n            filteredFiles.slice(\n                start,\n                start +\n                ITEMS_PER_PAGE\n            );\n\n\n        renderTable(\n            pageFiles\n        );\n\n\n        renderCards(\n            pageFiles\n        );\n\n\n        renderPagination(\n            totalPages\n        );\n\n\n        if (\n            total === 0\n        ) {\n\n            el(\"rkkDlEmpty\")\n                .classList\n                .add(\n                    \"active\"\n                );\n\n\n            el(\"rkkDlTableView\")\n                .style.display =\n                \"none\";\n\n\n            el(\"rkkDlCardView\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n        }\n\n        else {\n\n            el(\"rkkDlEmpty\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n\n            applyView();\n\n        }\n\n    }\n\n\n\n    \/* =====================================================\n       TABLE\n       ===================================================== *\/\n\n    function renderTable(\n        list\n    ) {\n\n        const body =\n            el(\n                \"rkkDlTableBody\"\n            );\n\n\n        body.innerHTML =\n            \"\";\n\n\n        list.forEach(\n            function (file) {\n\n                const info =\n                    fileInfo(\n                        file\n                    );\n\n\n                const row =\n                    document.createElement(\n                        \"tr\"\n                    );\n\n\n                row.innerHTML =\n\n                    '<td>' +\n\n                        '<div class=\"rkk-dl-file\">' +\n\n                            '<div class=\"rkk-dl-icon ' +\n                                info.className +\n                            '\">' +\n                                escapeHTML(\n                                    info.label\n                                ) +\n                            '<\/div>' +\n\n                            '<div class=\"rkk-dl-file-name\">' +\n                                escapeHTML(\n                                    file.name\n                                ) +\n                            '<\/div>' +\n\n                        '<\/div>' +\n\n                    '<\/td>' +\n\n\n                    '<td>' +\n\n                        '<span class=\"rkk-dl-group\">' +\n                            escapeHTML(\n                                file.group\n                            ) +\n                        '<\/span>' +\n\n                    '<\/td>' +\n\n\n                    '<td>' +\n                        escapeHTML(\n                            file.size\n                        ) +\n                    '<\/td>' +\n\n\n                    '<td>' +\n                        escapeHTML(\n                            file.lastUpdated\n                        ) +\n                    '<\/td>' +\n\n\n                    '<td class=\"rkk-dl-center\">' +\n\n                        actionButtons(\n                            file\n                        ) +\n\n                    '<\/td>';\n\n\n                body.appendChild(\n                    row\n                );\n\n            }\n        );\n\n\n        bindButtons();\n\n    }\n\n\n\n    \/* =====================================================\n       CARD\n       ===================================================== *\/\n\n    function renderCards(\n        list\n    ) {\n\n        const grid =\n            el(\n                \"rkkDlCardView\"\n            );\n\n\n        grid.innerHTML =\n            \"\";\n\n\n        list.forEach(\n            function (file) {\n\n                const info =\n                    fileInfo(\n                        file\n                    );\n\n\n                const card =\n                    document.createElement(\n                        \"article\"\n                    );\n\n\n                card.className =\n                    \"rkk-dl-card\";\n\n\n                card.innerHTML =\n\n                    '<div class=\"rkk-dl-card-head\">' +\n\n                        '<div class=\"rkk-dl-icon ' +\n                            info.className +\n                        '\">' +\n                            escapeHTML(\n                                info.label\n                            ) +\n                        '<\/div>' +\n\n                        '<span class=\"rkk-dl-group\">' +\n                            escapeHTML(\n                                file.group\n                            ) +\n                        '<\/span>' +\n\n                    '<\/div>' +\n\n\n                    '<div class=\"rkk-dl-card-title\">' +\n\n                        escapeHTML(\n                            file.name\n                        ) +\n\n                    '<\/div>' +\n\n\n                    '<div class=\"rkk-dl-card-meta\">' +\n\n                        '<span>' +\n                            '\u0e02\u0e19\u0e32\u0e14: ' +\n                            escapeHTML(\n                                file.size\n                            ) +\n                        '<\/span>' +\n\n                        '<span>' +\n                            '\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15: ' +\n                            escapeHTML(\n                                file.lastUpdated\n                            ) +\n                        '<\/span>' +\n\n                    '<\/div>' +\n\n\n                    '<div class=\"rkk-dl-card-bottom\">' +\n\n                        actionButtons(\n                            file\n                        ) +\n\n                    '<\/div>';\n\n\n                grid.appendChild(\n                    card\n                );\n\n            }\n        );\n\n\n        bindButtons();\n\n    }\n\n\n\n    \/* =====================================================\n       FILE TYPE\n       ===================================================== *\/\n\n    function fileInfo(file) {\n\n        const name =\n            file.name\n                .toLowerCase();\n\n\n        const extension =\n            name.includes(\".\")\n                ?\n                name.split(\".\")\n                    .pop()\n                :\n                \"\";\n\n\n        if (\n            extension ===\n            \"pdf\"\n        ) {\n\n            return {\n                label: \"PDF\",\n                className:\n                    \"rkk-dl-icon-pdf\"\n            };\n\n        }\n\n\n        if (\n            [\n                \"doc\",\n                \"docx\"\n            ].includes(\n                extension\n            )\n        ) {\n\n            return {\n                label: \"DOC\",\n                className:\n                    \"rkk-dl-icon-word\"\n            };\n\n        }\n\n\n        if (\n            [\n                \"xls\",\n                \"xlsx\",\n                \"csv\"\n            ].includes(\n                extension\n            )\n        ) {\n\n            return {\n                label: \"XLS\",\n                className:\n                    \"rkk-dl-icon-excel\"\n            };\n\n        }\n\n\n        if (\n            [\n                \"jpg\",\n                \"jpeg\",\n                \"png\",\n                \"gif\",\n                \"svg\",\n                \"webp\"\n            ].includes(\n                extension\n            )\n        ) {\n\n            return {\n                label: \"IMG\",\n                className:\n                    \"rkk-dl-icon-image\"\n            };\n\n        }\n\n\n        if (\n            [\n                \"zip\",\n                \"rar\",\n                \"7z\",\n                \"tar\"\n            ].includes(\n                extension\n            )\n        ) {\n\n            return {\n                label: \"ZIP\",\n                className:\n                    \"rkk-dl-icon-zip\"\n            };\n\n        }\n\n\n        if (\n            [\n                \"mp4\",\n                \"avi\",\n                \"mov\",\n                \"mkv\"\n            ].includes(\n                extension\n            )\n        ) {\n\n            return {\n                label: \"VID\",\n                className:\n                    \"rkk-dl-icon-video\"\n            };\n\n        }\n\n\n        return {\n            label:\n                extension\n                    ?\n                    extension\n                        .substring(\n                            0,\n                            4\n                        )\n                        .toUpperCase()\n                    :\n                    \"FILE\",\n\n            className:\n                \"rkk-dl-icon-other\"\n        };\n\n    }\n\n\n\n    \/* =====================================================\n       ACTIONS\n       ===================================================== *\/\n\n    function actionButtons(\n        file\n    ) {\n\n        return (\n\n            '<div class=\"rkk-dl-actions\">' +\n\n                '<a ' +\n                    'class=\"rkk-dl-download\" ' +\n                    'href=\"' +\n                        escapeAttr(\n                            file.downloadUrl\n                        ) +\n                    '\" ' +\n                    'target=\"_blank\" ' +\n                    'rel=\"noopener noreferrer\">' +\n\n                    '\u2193 \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14' +\n\n                '<\/a>' +\n\n\n                '<button ' +\n                    'type=\"button\" ' +\n                    'class=\"rkk-dl-copy\" ' +\n                    'data-rkk-file=\"' +\n                        escapeAttr(\n                            file.id\n                        ) +\n                    '\" ' +\n                    'title=\"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c\">' +\n\n                    '\u29c9' +\n\n                '<\/button>' +\n\n            '<\/div>'\n\n        );\n\n    }\n\n\n\n    function bindButtons() {\n\n        document\n            .querySelectorAll(\n                \"#rkk-download-system .rkk-dl-copy\"\n            )\n            .forEach(\n                function (button) {\n\n                    button.onclick =\n                        function () {\n\n                            copyFileLink(\n                                button.getAttribute(\n                                    \"data-rkk-file\"\n                                )\n                            );\n\n                        };\n\n                }\n            );\n\n    }\n\n\n\n    \/* =====================================================\n       COPY\n       ===================================================== *\/\n\n    function copyFileLink(\n        fileId\n    ) {\n\n        const file =\n            files.find(\n                function (item) {\n\n                    return (\n                        item.id ===\n                        fileId\n                    );\n\n                }\n            );\n\n\n        if (\n            !file ||\n            !file.downloadUrl\n        ) {\n\n            showToast(\n                \"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e44\u0e1f\u0e25\u0e4c\"\n            );\n\n            return;\n\n        }\n\n\n        if (\n            navigator.clipboard &&\n            window.isSecureContext\n        ) {\n\n            navigator.clipboard\n                .writeText(\n                    file.downloadUrl\n                )\n                .then(\n                    function () {\n\n                        showToast(\n                            \"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e25\u0e49\u0e27\"\n                        );\n\n                    }\n                )\n                .catch(\n                    function () {\n\n                        fallbackCopy(\n                            file.downloadUrl\n                        );\n\n                    }\n                );\n\n        }\n\n        else {\n\n            fallbackCopy(\n                file.downloadUrl\n            );\n\n        }\n\n    }\n\n\n\n    function fallbackCopy(\n        text\n    ) {\n\n        const input =\n            document.createElement(\n                \"textarea\"\n            );\n\n\n        input.value =\n            text;\n\n\n        input.style.position =\n            \"fixed\";\n\n\n        input.style.opacity =\n            \"0\";\n\n\n        document.body\n            .appendChild(\n                input\n            );\n\n\n        input.select();\n\n\n        document.execCommand(\n            \"copy\"\n        );\n\n\n        input.remove();\n\n\n        showToast(\n            \"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e25\u0e49\u0e27\"\n        );\n\n    }\n\n\n\n    function showToast(\n        message\n    ) {\n\n        const toast =\n            el(\n                \"rkkDlToast\"\n            );\n\n\n        el(\"rkkDlToastText\")\n            .textContent =\n            message;\n\n\n        toast.classList\n            .add(\n                \"active\"\n            );\n\n\n        window.setTimeout(\n            function () {\n\n                toast.classList\n                    .remove(\n                        \"active\"\n                    );\n\n            },\n            2400\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       VIEW\n       ===================================================== *\/\n\n    function switchView(\n        view\n    ) {\n\n        currentView =\n            view;\n\n\n        applyView();\n\n    }\n\n\n\n    function applyView() {\n\n        if (\n            currentView ===\n            \"table\"\n        ) {\n\n            el(\"rkkDlTableView\")\n                .style.display =\n                \"block\";\n\n\n            el(\"rkkDlCardView\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n\n            el(\"rkkDlTableButton\")\n                .classList\n                .add(\n                    \"active\"\n                );\n\n\n            el(\"rkkDlCardButton\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n        }\n\n        else {\n\n            el(\"rkkDlTableView\")\n                .style.display =\n                \"none\";\n\n\n            el(\"rkkDlCardView\")\n                .classList\n                .add(\n                    \"active\"\n                );\n\n\n            el(\"rkkDlTableButton\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n\n            el(\"rkkDlCardButton\")\n                .classList\n                .add(\n                    \"active\"\n                );\n\n        }\n\n    }\n\n\n\n    \/* =====================================================\n       PAGINATION\n       ===================================================== *\/\n\n    function renderPagination(\n        totalPages\n    ) {\n\n        const container =\n            el(\n                \"rkkDlPagination\"\n            );\n\n\n        container.innerHTML =\n            \"\";\n\n\n        if (\n            totalPages <=\n            1\n        ) {\n\n            return;\n\n        }\n\n\n        for (\n            let page = 1;\n            page <= totalPages;\n            page++\n        ) {\n\n            const button =\n                document.createElement(\n                    \"button\"\n                );\n\n\n            button.type =\n                \"button\";\n\n\n            button.className =\n                \"rkk-dl-page\" +\n                (\n                    page ===\n                    currentPage\n                        ?\n                        \" active\"\n                        :\n                        \"\"\n                );\n\n\n            button.textContent =\n                page;\n\n\n            button.onclick =\n                function () {\n\n                    currentPage =\n                        page;\n\n\n                    render();\n\n\n                    const main =\n                        el(\n                            \"rkkDlTableView\"\n                        );\n\n\n                    if (\n                        main\n                    ) {\n\n                        window.scrollTo(\n                            {\n                                top:\n                                    main\n                                    .getBoundingClientRect()\n                                    .top +\n                                    window.scrollY -\n                                    100,\n\n                                behavior:\n                                    \"smooth\"\n                            }\n                        );\n\n                    }\n\n                };\n\n\n            container.appendChild(\n                button\n            );\n\n        }\n\n    }\n\n\n\n    \/* =====================================================\n       STATUS \/ LOADING\n       ===================================================== *\/\n\n    function setLoading(\n        loading\n    ) {\n\n        if (\n            loading\n        ) {\n\n            el(\"rkkDlLoading\")\n                .classList\n                .remove(\n                    \"hidden\"\n                );\n\n\n            el(\"rkkDlTableView\")\n                .style.display =\n                \"none\";\n\n\n            el(\"rkkDlCardView\")\n                .classList\n                .remove(\n                    \"active\"\n                );\n\n        }\n\n        else {\n\n            el(\"rkkDlLoading\")\n                .classList\n                .add(\n                    \"hidden\"\n                );\n\n        }\n\n    }\n\n\n\n    function setStatus(\n        message,\n        error\n    ) {\n\n        const status =\n            el(\n                \"rkkDlStatus\"\n            );\n\n\n        status.textContent =\n            message;\n\n\n        if (\n            error\n        ) {\n\n            status.classList\n                .add(\n                    \"error\"\n                );\n\n        }\n\n        else {\n\n            status.classList\n                .remove(\n                    \"error\"\n                );\n\n        }\n\n    }\n\n\n\n    \/* =====================================================\n       START\n       ===================================================== *\/\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            init\n        );\n\n    }\n\n    else {\n\n        init();\n\n    }\n\n})();\n\n<\/script>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-144","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rkk.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=144"}],"version-history":[{"count":1,"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/rkk.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/rkk.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}