{"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":"    <style>\n        .cm-calc-container {\n            font-family: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;\n            max-width: 900px;\n            margin: 20px auto;\n            background: #ffffff;\n            border-radius: 12px;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n            padding: 30px;\n            color: #333;\n        }\n        .cm-calc-title {\n            text-align: center;\n            color: #1a5632;\n            margin-bottom: 25px;\n            font-size: 24px;\n            font-weight: 600;\n        }\n        .cm-calc-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 20px;\n        }\n        @media (max-width: 768px) {\n            .cm-calc-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n        .cm-calc-group {\n            display: flex;\n            flex-direction: column;\n            margin-bottom: 15px;\n        }\n        .cm-calc-group label {\n            font-weight: 500;\n            margin-bottom: 8px;\n            color: #555;\n        }\n        .cm-calc-group input, .cm-calc-group select {\n            padding: 10px 14px;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            font-size: 16px;\n            outline: none;\n            transition: border-color 0.2s;\n        }\n        .cm-calc-group input:focus, .cm-calc-group select:focus {\n            border-color: #1a5632;\n        }\n        .cm-btn-submit {\n            grid-column: span 2;\n            background: #1a5632;\n            color: #fff;\n            border: none;\n            padding: 14px;\n            font-size: 18px;\n            font-weight: 600;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: background 0.2s;\n            text-align: center;\n            margin-top: 15px;\n        }\n        @media (max-width: 768px) {\n            .cm-btn-submit {\n                grid-column: span 1;\n            }\n        }\n        .cm-btn-submit:hover {\n            background: #123d23;\n        }\n        .cm-error {\n            background: #fdf2f2;\n            border-left: 4px solid #f05252;\n            color: #c81e1e;\n            padding: 15px;\n            border-radius: 6px;\n            margin-bottom: 20px;\n            font-size: 15px;\n        }\n        .cm-summary-boxes {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 15px;\n            margin: 30px 0;\n        }\n        @media (max-width: 600px) {\n            .cm-summary-boxes {\n                grid-template-columns: 1fr;\n            }\n        }\n        .cm-box {\n            background: #f4fbf7;\n            border: 1px solid #e1f4ea;\n            border-radius: 8px;\n            padding: 20px;\n            text-align: center;\n        }\n        .cm-box-title {\n            font-size: 14px;\n            color: #666;\n            margin-bottom: 8px;\n        }\n        .cm-box-value {\n            font-size: 20px;\n            font-weight: 700;\n            color: #1a5632;\n        }\n        .cm-table-responsive {\n            overflow-x: auto;\n            margin-top: 25px;\n        }\n        .cm-table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 15px;\n            text-align: center;\n        }\n        .cm-table th {\n            background: #f2f7f4;\n            color: #1a5632;\n            padding: 12px;\n            border-bottom: 2px solid #e1e9e4;\n            font-weight: 600;\n        }\n        .cm-table td {\n            padding: 10px;\n            border-bottom: 1px solid #eee;\n        }\n        .cm-table tbody tr:hover {\n            background: #fafafa;\n        }\n    <\/style>\n\n    <div class=\"cm-calc-container\">\n        <h2 class=\"cm-calc-title\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e33\u0e25\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49 (\u0e41\u0e1a\u0e1a\u0e25\u0e14\u0e15\u0e49\u0e19\u0e25\u0e14\u0e14\u0e2d\u0e01)<\/h2>\n        \n        \n        <form method=\"POST\" action=\"\">\n            <div class=\"cm-calc-grid\">\n                <div class=\"cm-calc-group\">\n                    <label for=\"loan_amount\">\u0e27\u0e07\u0e40\u0e07\u0e34\u0e19\u0e01\u0e39\u0e49 (\u0e1a\u0e32\u0e17)<\/label>\n                    <input type=\"number\" id=\"loan_amount\" name=\"loan_amount\" value=\"500000\" step=\"any\" required>\n                <\/div>\n\n                <div class=\"cm-calc-group\">\n                    <label for=\"interest_rate\">\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e14\u0e2d\u0e01\u0e40\u0e1a\u0e35\u0e49\u0e22\u0e15\u0e48\u0e2d\u0e1b\u0e35 (%)<\/label>\n                    <input type=\"number\" id=\"interest_rate\" name=\"interest_rate\" value=\"5.5\" step=\"0.01\" required>\n                <\/div>\n\n                <div class=\"cm-calc-group\">\n                    <label for=\"calc_by\">\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e38\u0e04\u0e48\u0e32\u0e07\u0e27\u0e14<\/label>\n                    <select id=\"calc_by\" name=\"calc_by\">\n                        <option value=\"periods\"  selected='selected'>\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e33\u0e19\u0e27\u0e19\u0e07\u0e27\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1c\u0e48\u0e2d\u0e19<\/option>\n                        <option value=\"payment\" >\u0e23\u0e30\u0e1a\u0e38\u0e22\u0e2d\u0e14\u0e40\u0e07\u0e34\u0e19\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e07\u0e27\u0e14<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"cm-calc-group\" id=\"group_periods\">\n                    <label for=\"periods\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e07\u0e27\u0e14\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e2d\u0e19\u0e0a\u0e33\u0e23\u0e30 (\u0e40\u0e14\u0e37\u0e2d\u0e19)<\/label>\n                    <input type=\"number\" id=\"periods\" name=\"periods\" value=\"120\">\n                <\/div>\n\n                <div class=\"cm-calc-group\" id=\"group_payment\" style=\"display:none;\">\n                    <label for=\"monthly_payment\">\u0e04\u0e48\u0e32\u0e07\u0e27\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1c\u0e48\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e40\u0e14\u0e37\u0e2d\u0e19 (\u0e1a\u0e32\u0e17)<\/label>\n                    <input type=\"number\" id=\"monthly_payment\" name=\"monthly_payment\" value=\"5000\">\n                <\/div>\n\n                <div class=\"cm-calc-group\">\n                    <label for=\"start_date\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e01\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e33\u0e19\u0e27\u0e13\u0e14\u0e2d\u0e01\u0e40\u0e1a\u0e35\u0e49\u0e22<\/label>\n                    <input type=\"date\" id=\"start_date\" name=\"start_date\" value=\"2026-08-27\" required>\n                <\/div>\n\n                <div class=\"cm-calc-group\">\n                    <label for=\"payment_type\">\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30<\/label>\n                    <select id=\"payment_type\" name=\"payment_type\">\n                        <option value=\"equal_total\"  selected='selected'>\u0e0a\u0e33\u0e23\u0e30\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e19\u0e17\u0e38\u0e01\u0e07\u0e27\u0e14<\/option>\n                        <option value=\"equal_principal\" >\u0e0a\u0e33\u0e23\u0e30\u0e15\u0e49\u0e19\u0e40\u0e07\u0e34\u0e19\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e19\u0e17\u0e38\u0e01\u0e07\u0e27\u0e14<\/option>\n                    <\/select>\n                <\/div>\n\n                <button type=\"submit\" name=\"cm_calc_submit\" class=\"cm-btn-submit\">\u0e04\u0e33\u0e19\u0e27\u0e13\u0e2a\u0e34\u0e19\u0e40\u0e0a\u0e37\u0e48\u0e2d<\/button>\n            <\/div>\n        <\/form>\n\n            <\/div>\n\n    <!-- \u0e2a\u0e04\u0e23\u0e34\u0e1b\u0e15\u0e4c\u0e2a\u0e25\u0e31\u0e1a\u0e1f\u0e34\u0e25\u0e14\u0e4c\u0e14\u0e49\u0e27\u0e22 JS \u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e21\u0e2d\u0e1a\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e14\u0e35 -->\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const calcBySelect = document.getElementById('calc_by');\n            const periodsGroup = document.getElementById('group_periods');\n            const paymentGroup = document.getElementById('group_payment');\n            const paymentTypeSelect = document.getElementById('payment_type');\n\n            function toggleFields() {\n                if (calcBySelect.value === 'periods') {\n                    periodsGroup.style.display = 'flex';\n                    paymentGroup.style.display = 'none';\n                    paymentTypeSelect.disabled = false;\n                } else {\n                    periodsGroup.style.display = 'none';\n                    paymentGroup.style.display = 'flex';\n                    \/\/ \u0e2b\u0e32\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e04\u0e33\u0e19\u0e27\u0e13\u0e08\u0e32\u0e01\u0e22\u0e2d\u0e14\u0e0a\u0e33\u0e23\u0e30 \u0e08\u0e30\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e43\u0e0a\u0e49\u0e15\u0e23\u0e23\u0e01\u0e30\u0e41\u0e1a\u0e1a\u0e0a\u0e33\u0e23\u0e30\u0e22\u0e2d\u0e14\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e19 (Annuity) \u0e44\u0e1b\u0e43\u0e19\u0e15\u0e31\u0e27\n                    paymentTypeSelect.value = 'equal_total';\n                    paymentTypeSelect.disabled = true;\n                }\n            }\n\n            calcBySelect.addEventListener('change', toggleFields);\n            toggleFields(); \/\/ \u0e23\u0e31\u0e19\u0e15\u0e23\u0e27\u0e08\u0e04\u0e23\u0e31\u0e49\u0e07\u0e41\u0e23\u0e01\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e42\u0e2b\u0e25\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e2a\u0e23\u0e47\u0e08\n        });\n    <\/script>\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}]}}