{"id":4255,"date":"2026-01-27T17:03:08","date_gmt":"2026-01-27T10:03:08","guid":{"rendered":"https:\/\/coop.mcu.ac.th\/?page_id=4255"},"modified":"2026-01-27T17:03:08","modified_gmt":"2026-01-27T10:03:08","slug":"%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%84%e0%b8%b3%e0%b8%99%e0%b8%a7%e0%b8%93%e0%b9%80%e0%b8%87%e0%b8%b4%e0%b8%99%e0%b8%81%e0%b8%b9%e0%b9%89","status":"publish","type":"page","link":"https:\/\/coop.mcu.ac.th\/?page_id=4255","title":{"rendered":"\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e33\u0e19\u0e27\u0e13\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49"},"content":{"rendered":"\n    <!-- \u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e33\u0e19\u0e27\u0e13\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49 (WordPress Snippet Optimized) -->\n    <div id=\"loan-calc-container\" class=\"wp-block-custom-html\" style=\"all: initial; display: block; width: 100%;\">\n        <!-- Load Font & Tailwind -->\n        <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n        <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n        <style>\n            #loan-calc-container { font-family: 'Kanit', sans-serif !important; color: #1e293b; background: transparent; }\n            #loan-calc-container .card { background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; }\n            #loan-calc-container input::-webkit-outer-spin-button, \n            #loan-calc-container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n            #loan-calc-container .input-error { border-color: #ef4444 !important; background-color: #fef2f2; }\n            #loan-calc-container select, #loan-calc-container input { background-color: #ffffff !important; color: #1e293b !important; }\n            @media print { .no-print { display: none; } }\n        <\/style>\n\n        <div class=\"max-w-4xl mx-auto space-y-6 py-6 px-2\">\n            <header class=\"text-center py-4\">\n                <h2 class=\"text-3xl font-bold text-slate-800\" style=\"margin-bottom: 8px;\">\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e33\u0e19\u0e27\u0e13\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49<\/h2>\n                <p class=\"text-slate-500\">\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e01\u0e32\u0e23\u0e22\u0e2d\u0e14\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e15\u0e32\u0e21\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e2a\u0e2b\u0e01\u0e23\u0e13\u0e4c<\/p>\n            <\/header>\n\n            <!-- \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48 1: \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e01\u0e32\u0e23\u0e01\u0e39\u0e49 -->\n            <section class=\"card p-6\">\n                <h3 class=\"text-lg font-semibold mb-6 text-blue-600 flex items-center border-b pb-2\" style=\"margin-top: 0;\">\n                    <svg style=\"width:20px; height:20px; margin-right:8px;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4\"><\/path><\/svg>\n                    \u0e23\u0e30\u0e1a\u0e38\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e01\u0e39\u0e49\n                <\/h3>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49<\/label>\n                            <select id=\"loanType\" class=\"w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition-all\">\n                                <!-- Options populated by JS -->\n                            <\/select>\n                        <\/div>\n\n                        <div id=\"shareSection\" class=\"hidden\">\n                            <label class=\"block text-sm font-medium text-blue-700 mb-1\">\u0e21\u0e39\u0e25\u0e04\u0e48\u0e32\u0e2b\u0e38\u0e49\u0e19\u0e2a\u0e30\u0e2a\u0e21 (\u0e1a\u0e32\u0e17)<\/label>\n                            <input type=\"number\" id=\"shareAmount\" placeholder=\"\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2b\u0e38\u0e49\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\" class=\"w-full p-3 rounded-lg border border-blue-200 focus:ring-2 focus:ring-blue-500 outline-none\">\n                            <p class=\"text-[11px] text-blue-500 mt-1\">* \u0e01\u0e39\u0e49\u0e44\u0e14\u0e49\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 90% \u0e02\u0e2d\u0e07\u0e2b\u0e38\u0e49\u0e19\u0e2a\u0e30\u0e2a\u0e21<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e27\u0e07\u0e40\u0e07\u0e34\u0e19\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e01\u0e39\u0e49 (\u0e1a\u0e32\u0e17)<\/label>\n                            <input type=\"number\" id=\"principal\" value=\"100000\" class=\"w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none\">\n                            <p id=\"limitNote\" class=\"text-[11px] font-medium text-slate-500 mt-1\"><\/p>\n                        <\/div>\n\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30 (\u0e07\u0e27\u0e14)<\/label>\n                            <input type=\"number\" id=\"period\" value=\"12\" class=\"w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none\">\n                            <p id=\"periodNote\" class=\"text-[11px] font-medium text-slate-500 mt-1\"><\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div id=\"alertBox\" class=\"hidden mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-700 text-xs\"><\/div>\n            <\/section>\n\n            <!-- \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48 2: \u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25 -->\n            <section class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n                <div class=\"card p-6 border-l-4 border-blue-500\">\n                    <p class=\"text-sm text-slate-500\">\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e15\u0e48\u0e2d\u0e07\u0e27\u0e14<\/p>\n                    <div class=\"flex items-baseline space-x-1\">\n                        <span id=\"resMonthly\" class=\"text-3xl font-bold text-slate-800\">0.00<\/span>\n                        <span class=\"text-xs text-slate-400\">\u0e1a\u0e32\u0e17<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"card p-6 border-l-4 border-emerald-500\">\n                    <p class=\"text-sm text-slate-500\">\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e14\u0e2d\u0e01\u0e40\u0e1a\u0e35\u0e49\u0e22<\/p>\n                    <div class=\"flex items-baseline space-x-1\">\n                        <span id=\"resRate\" class=\"text-3xl font-bold text-slate-800\">0.00%<\/span>\n                        <span class=\"text-xs text-slate-400\">\u0e15\u0e48\u0e2d\u0e1b\u0e35<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"card p-6 border-l-4 border-amber-500\">\n                    <p class=\"text-sm text-slate-500\">\u0e23\u0e27\u0e21\u0e14\u0e2d\u0e01\u0e40\u0e1a\u0e35\u0e49\u0e22\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19<\/p>\n                    <div class=\"flex items-baseline space-x-1\">\n                        <span id=\"resTotalInterest\" class=\"text-3xl font-bold text-slate-800\">0.00<\/span>\n                        <span class=\"text-xs text-slate-400\">\u0e1a\u0e32\u0e17<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48 3: \u0e15\u0e32\u0e23\u0e32\u0e07 -->\n            <section class=\"card overflow-hidden\">\n                <div class=\"p-4 border-b border-slate-100 bg-white flex justify-between items-center\">\n                    <h3 class=\"font-semibold text-slate-700 flex items-center\" style=\"margin: 0;\">\n                        \u0e15\u0e32\u0e23\u0e32\u0e07\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30 (\u0e25\u0e14\u0e15\u0e49\u0e19\u0e25\u0e14\u0e14\u0e2d\u0e01)\n                    <\/h3>\n                    <button onclick=\"window.print()\" class=\"no-print text-xs font-medium text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border-none cursor-pointer\">\u0e1e\u0e34\u0e21\u0e1e\u0e4c<\/button>\n                <\/div>\n                <div class=\"overflow-x-auto\">\n                    <table class=\"w-full text-left text-sm\" style=\"border-collapse: collapse; margin: 0;\">\n                        <thead class=\"bg-slate-50 border-b\">\n                            <tr>\n                                <th class=\"p-4 font-medium text-slate-600\">\u0e07\u0e27\u0e14\u0e17\u0e35\u0e48<\/th>\n                                <th class=\"p-4 font-medium text-slate-600 text-right\">\u0e40\u0e07\u0e34\u0e19\u0e15\u0e49\u0e19\u0e04\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d<\/th>\n                                <th class=\"p-4 font-medium text-slate-600 text-right\">\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19\u0e15\u0e49\u0e19<\/th>\n                                <th class=\"p-4 font-medium text-slate-600 text-right\">\u0e14\u0e2d\u0e01\u0e40\u0e1a\u0e35\u0e49\u0e22<\/th>\n                                <th class=\"p-4 font-medium text-slate-600 text-right font-bold\">\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody id=\"scheduleBody\" class=\"divide-y divide-slate-100\"><\/tbody>\n                    <\/table>\n                <\/div>\n            <\/section>\n\n            <footer class=\"text-center text-slate-400 text-[10px] py-4\">\n                *\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38: \u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e01\u0e32\u0e23\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19\n            <\/footer>\n        <\/div>\n\n        <script>\n            (function() {\n                const loanData = [\n                    { id: 1, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19\", rate: 6.00, maxAmount: 100000, maxPeriod: 12 },\n                    { id: 2, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e2a\u0e32\u0e21\u0e31\u0e0d\", rate: 6.00, maxAmount: 1000000, maxPeriod: 150 },\n                    { id: 3, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e2a\u0e32\u0e21\u0e31\u0e0d (\u0e01\u0e39\u0e49\u0e2b\u0e38\u0e49\u0e19\u0e2a\u0e30\u0e2a\u0e21)\", rate: 3.50, maxAmount: null, maxPeriod: 150, shareLink: true },\n                    { id: 4, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0a\u0e33\u0e23\u0e30\u0e2b\u0e19\u0e35\u0e49\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\", rate: 5.50, maxAmount: 2000000, maxPeriod: 240 },\n                    { id: 5, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30\", rate: 5.50, maxAmount: 2000000, maxPeriod: 96 },\n                    { id: 6, name: \"\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e1b\u0e31\u0e19\u0e2a\u0e38\u0e02\", rate: 4.50, maxAmount: 200000, maxPeriod: 60 }\n                ];\n\n                const container = document.getElementById('loan-calc-container');\n                const loanTypeEl = container.querySelector('#loanType');\n                const shareSection = container.querySelector('#shareSection');\n                const shareAmountInput = container.querySelector('#shareAmount');\n                const principalInput = container.querySelector('#principal');\n                const periodInput = container.querySelector('#period');\n                const limitNote = container.querySelector('#limitNote');\n                const periodNote = container.querySelector('#periodNote');\n                const alertBox = container.querySelector('#alertBox');\n\n                function updateUI() {\n                    const loan = loanData.find(l => l.id == loanTypeEl.value);\n                    periodInput.max = loan.maxPeriod;\n                    periodNote.textContent = `\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14: ${loan.maxPeriod} \u0e07\u0e27\u0e14`;\n\n                    if (loan.shareLink) {\n                        shareSection.classList.remove('hidden');\n                        principalInput.removeAttribute('max');\n                        limitNote.textContent = `\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14: 90% \u0e02\u0e2d\u0e07\u0e2b\u0e38\u0e49\u0e19\u0e2a\u0e30\u0e2a\u0e21`;\n                    } else {\n                        shareSection.classList.add('hidden');\n                        principalInput.max = loan.maxAmount;\n                        limitNote.textContent = `\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14: ${loan.maxAmount.toLocaleString()} \u0e1a\u0e32\u0e17`;\n                    }\n                    validateAndCalculate();\n                }\n\n                function validateAndCalculate() {\n                    const loan = loanData.find(l => l.id == loanTypeEl.value);\n                    let p = parseFloat(principalInput.value) || 0;\n                    let n = parseInt(periodInput.value) || 0;\n                    let s = parseFloat(shareAmountInput.value) || 0;\n                    let errors = [];\n                    let maxP = loan.maxAmount;\n\n                    if (loan.shareLink) maxP = s * 0.9;\n                    if (p > maxP && maxP > 0) {\n                        principalInput.classList.add('input-error');\n                        errors.push(`* \u0e22\u0e2d\u0e14\u0e01\u0e39\u0e49\u0e40\u0e01\u0e34\u0e19\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c (${maxP.toLocaleString()} \u0e1a\u0e32\u0e17)`);\n                        p = maxP;\n                    } else principalInput.classList.remove('input-error');\n\n                    if (n > loan.maxPeriod) {\n                        periodInput.classList.add('input-error');\n                        errors.push(`* \u0e08\u0e33\u0e19\u0e27\u0e19\u0e07\u0e27\u0e14\u0e40\u0e01\u0e34\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14 (${loan.maxPeriod} \u0e07\u0e27\u0e14)`);\n                        n = loan.maxPeriod;\n                    } else periodInput.classList.remove('input-error');\n\n                    alertBox.innerHTML = errors.join('<br>');\n                    errors.length > 0 ? alertBox.classList.remove('hidden') : alertBox.classList.add('hidden');\n\n                    if (p <= 0 || n <= 0) { reset(); return; }\n                    \n                    const r = (loan.rate \/ 100) \/ 12;\n                    let pmt = (p * r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1);\n                    pmt = Math.ceil(pmt);\n\n                    container.querySelector('#resMonthly').textContent = pmt.toLocaleString(undefined, {minimumFractionDigits: 2});\n                    container.querySelector('#resRate').textContent = loan.rate.toFixed(2) + '%';\n                    \n                    let balance = p;\n                    let totalI = 0;\n                    let html = '';\n                    for (let i = 1; i <= n; i++) {\n                        let interest = Math.round((balance * r) * 100) \/ 100;\n                        let priPaid = pmt - interest;\n                        if (i === n || priPaid > balance) { priPaid = balance; pmt = priPaid + interest; balance = 0; }\n                        else balance -= priPaid;\n                        totalI += interest;\n                        html += `<tr class=\"hover:bg-slate-50 transition-colors\">\n                            <td class=\"p-4 text-slate-500 font-medium border-b border-slate-100\">${i}<\/td>\n                            <td class=\"p-4 text-right font-mono border-b border-slate-100\">${(balance + priPaid).toLocaleString(undefined, {minimumFractionDigits: 2})}<\/td>\n                            <td class=\"p-4 text-right text-emerald-600 border-b border-slate-100\">${priPaid.toLocaleString(undefined, {minimumFractionDigits: 2})}<\/td>\n                            <td class=\"p-4 text-right text-amber-600 border-b border-slate-100\">${interest.toLocaleString(undefined, {minimumFractionDigits: 2})}<\/td>\n                            <td class=\"p-4 text-right font-bold text-slate-700 border-b border-slate-100\">${pmt.toLocaleString(undefined, {minimumFractionDigits: 2})}<\/td>\n                        <\/tr>`;\n                    }\n                    container.querySelector('#scheduleBody').innerHTML = html;\n                    container.querySelector('#resTotalInterest').textContent = totalI.toLocaleString(undefined, {minimumFractionDigits: 2});\n                }\n\n                function reset() {\n                    container.querySelector('#resMonthly').textContent = '0.00';\n                    container.querySelector('#resTotalInterest').textContent = '0.00';\n                    container.querySelector('#scheduleBody').innerHTML = '<tr><td colspan=\"5\" class=\"p-12 text-center text-slate-400\">\u0e23\u0e30\u0e1a\u0e38\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e01\u0e39\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07<\/td><\/tr>';\n                }\n\n                \/\/ Initial Populating\n                loanData.forEach(l => {\n                    const opt = document.createElement('option');\n                    opt.value = l.id; opt.textContent = l.name;\n                    loanTypeEl.appendChild(opt);\n                });\n                loanTypeEl.onchange = updateUI;\n                principalInput.oninput = validateAndCalculate;\n                periodInput.oninput = validateAndCalculate;\n                shareAmountInput.oninput = validateAndCalculate;\n                updateUI();\n            })();\n        <\/script>\n    <\/div>\n\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-4255","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4255"}],"version-history":[{"count":1,"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4255\/revisions"}],"predecessor-version":[{"id":4258,"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4255\/revisions\/4258"}],"wp:attachment":[{"href":"https:\/\/coop.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}