{"id":20582,"date":"2025-12-16T14:51:36","date_gmt":"2025-12-16T07:51:36","guid":{"rendered":"https:\/\/nu.cpru.ac.th\/thai\/?page_id=20582"},"modified":"2025-12-18T10:50:24","modified_gmt":"2025-12-18T03:50:24","slug":"%e0%b8%95%e0%b8%b3%e0%b8%a3%e0%b8%b2%e0%b8%a7%e0%b8%b4%e0%b8%8a%e0%b8%b2%e0%b8%81%e0%b8%b2%e0%b8%a3","status":"publish","type":"page","link":"https:\/\/nu.cpru.ac.th\/thai\/?page_id=20582","title":{"rendered":"\u0e15\u0e33\u0e23\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20582\" class=\"elementor elementor-20582\">\n\t\t\t\t<div class=\"elementor-element elementor-element-abecd7d e-flex e-con-boxed e-con e-parent\" data-id=\"abecd7d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34879f4 elementor-widget elementor-widget-html\" data-id=\"34879f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e15\u0e33\u0e23\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e04\u0e13\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e0a\u0e31\u0e22\u0e20\u0e39\u0e21\u0e34<\/title>\r\n    <!-- \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e2d\u0e19\u0e15\u0e4c Kanit \u0e08\u0e32\u0e01 Google Fonts -->\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n    <!-- \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49 Icon (FontAwesome) -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <style>\r\n        \/* --- \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e35\u0e41\u0e25\u0e30\u0e1f\u0e2d\u0e19\u0e15\u0e4c (CSS Variables) --- *\/\r\n        :root {\r\n            \/* \u0e2a\u0e35\u0e21\u0e48\u0e27\u0e07 \u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e0a\u0e31\u0e22\u0e20\u0e39\u0e21\u0e34 + \u0e2a\u0e35\u0e17\u0e2d\u0e07 *\/\r\n            --primary-color: #6a1b9a; \/* \u0e2a\u0e35\u0e21\u0e48\u0e27\u0e07\u0e40\u0e02\u0e49\u0e21 *\/\r\n            --primary-hover: #4a148c;\r\n            --secondary-color: #ffc107; \/* \u0e2a\u0e35\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e07\u0e17\u0e2d\u0e07 *\/\r\n            --accent-color: #e91e63; \/* \u0e2a\u0e35\u0e0a\u0e21\u0e1e\u0e39\u0e40\u0e02\u0e49\u0e21 (Accent \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25) *\/\r\n            --bg-color: #f8f9fa;\r\n            --text-color: #333;\r\n            --text-light: #6c757d;\r\n            --white: #ffffff;\r\n            --shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n            --shadow-hover: 0 10px 20px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        \/* --- Global Styles --- *\/\r\n        body {\r\n            font-family: 'Kanit', sans-serif;\r\n            margin: 0;\r\n            padding: 0;\r\n            background-color: var(--bg-color);\r\n            color: var(--text-color);\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        a { text-decoration: none; color: inherit; transition: 0.3s; }\r\n        ul { list-style: none; padding: 0; margin: 0; }\r\n\r\n        \/* --- Header \/ Navigation --- *\/\r\n        header {\r\n            background-color: var(--white);\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n            position: sticky;\r\n            top: 0;\r\n            z-index: 1000;\r\n            border-top: 5px solid var(--secondary-color); \/* \u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e17\u0e2d\u0e07\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 *\/\r\n        }\r\n\r\n        .navbar {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 15px 20px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .logo {\r\n            font-size: 1.4rem;\r\n            font-weight: 600;\r\n            color: var(--primary-color);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n        }\r\n        \r\n        .logo i { \r\n            font-size: 2rem; \r\n            color: var(--secondary-color);\r\n            text-shadow: 1px 1px 0 #6a1b9a;\r\n        }\r\n        \r\n        .logo-text span {\r\n            display: block;\r\n            font-size: 0.8rem;\r\n            color: #666;\r\n            font-weight: 400;\r\n        }\r\n\r\n        \/* --- Hero Section (Banner) --- *\/\r\n        .hero {\r\n            \/* Background \u0e21\u0e48\u0e27\u0e07\u0e44\u0e25\u0e48\u0e40\u0e09\u0e14 *\/\r\n            background: linear-gradient(135deg, var(--primary-color), #9c27b0);\r\n            color: var(--white);\r\n            padding: 80px 20px 100px;\r\n            text-align: center;\r\n            position: relative;\r\n        }\r\n\r\n        .hero h1 { margin: 0 0 10px; font-size: 2.2rem; font-weight: 600; }\r\n        .hero h2 { margin: 0 0 15px; font-size: 1.5rem; font-weight: 400; color: var(--secondary-color); }\r\n        .hero p { font-size: 1.1rem; opacity: 0.9; margin: 0; font-weight: 300; }\r\n\r\n        \/* --- Search & Filter --- *\/\r\n        .search-container {\r\n            max-width: 700px;\r\n            margin: -35px auto 40px;\r\n            padding: 0 20px;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        .search-box {\r\n            background: var(--white);\r\n            display: flex;\r\n            padding: 8px;\r\n            border-radius: 50px;\r\n            box-shadow: 0 10px 25px rgba(0,0,0,0.1);\r\n            align-items: center;\r\n        }\r\n\r\n        .search-box i.search-icon {\r\n            padding-left: 20px;\r\n            color: #aaa;\r\n        }\r\n\r\n        .search-box input {\r\n            border: none;\r\n            flex: 1;\r\n            padding: 15px;\r\n            font-size: 1rem;\r\n            outline: none;\r\n            font-family: 'Kanit';\r\n            color: var(--text-color);\r\n        }\r\n\r\n        .search-box button {\r\n            background: var(--primary-color);\r\n            border: none;\r\n            color: white;\r\n            padding: 12px 30px;\r\n            border-radius: 50px;\r\n            cursor: pointer;\r\n            font-family: 'Kanit';\r\n            font-weight: 500;\r\n            transition: 0.3s;\r\n        }\r\n        .search-box button:hover { background-color: var(--primary-hover); }\r\n\r\n        \/* --- Main Layout --- *\/\r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto 60px;\r\n            padding: 0 20px;\r\n            display: grid;\r\n            grid-template-columns: 260px 1fr;\r\n            gap: 40px;\r\n        }\r\n\r\n        \/* --- Sidebar (Categories) --- *\/\r\n        .sidebar h3 {\r\n            font-size: 1.2rem;\r\n            color: var(--primary-color);\r\n            margin-bottom: 20px;\r\n            border-bottom: 2px solid #e9ecef;\r\n            padding-bottom: 10px;\r\n            position: relative;\r\n        }\r\n        \r\n        .sidebar h3::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 50px;\r\n            height: 2px;\r\n            background-color: var(--secondary-color);\r\n        }\r\n\r\n        .category-list li {\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .category-list a {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            color: var(--text-light);\r\n            padding: 10px 15px;\r\n            border-radius: 8px;\r\n            transition: 0.2s;\r\n            background-color: #fff;\r\n            border: 1px solid #eee;\r\n        }\r\n\r\n        .category-list a:hover, .category-list a.active {\r\n            background-color: var(--primary-color);\r\n            color: white;\r\n            border-color: var(--primary-color);\r\n        }\r\n        \r\n        .category-count {\r\n            font-size: 0.75rem;\r\n            background: rgba(0,0,0,0.1);\r\n            padding: 2px 8px;\r\n            border-radius: 10px;\r\n        }\r\n\r\n        \/* --- Product Grid --- *\/\r\n        .content-area {\r\n            width: 100%;\r\n        }\r\n\r\n        .section-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n            padding-bottom: 15px;\r\n            border-bottom: 1px solid #eee;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            color: #333;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .section-title i { color: var(--accent-color); }\r\n\r\n        .sort-select {\r\n            padding: 8px 12px;\r\n            border: 1px solid #ddd;\r\n            border-radius: 6px;\r\n            font-family: 'Kanit';\r\n            color: #555;\r\n            outline: none;\r\n        }\r\n\r\n        .book-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        \/* --- Card Design --- *\/\r\n        .book-card {\r\n            background: var(--white);\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: all 0.3s ease;\r\n            border: 1px solid rgba(0,0,0,0.03);\r\n            display: flex;\r\n            flex-direction: column;\r\n            position: relative;\r\n        }\r\n\r\n        .book-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: var(--shadow-hover);\r\n        }\r\n\r\n        .badge {\r\n            position: absolute;\r\n            top: 15px;\r\n            left: 0;\r\n            background: var(--secondary-color);\r\n            color: #333;\r\n            padding: 4px 12px;\r\n            font-size: 0.75rem;\r\n            font-weight: 600;\r\n            border-radius: 0 4px 4px 0;\r\n            z-index: 2;\r\n            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .badge.rec { background-color: var(--accent-color); color: white; }\r\n\r\n        .book-img-wrapper {\r\n            position: relative;\r\n            padding-top: 140%; \/* Aspect Ratio 1:1.4 *\/\r\n            overflow: hidden;\r\n            background-color: #f1f3f5;\r\n            cursor: pointer; \/* \u0e41\u0e2a\u0e14\u0e07\u0e23\u0e39\u0e1b\u0e21\u0e37\u0e2d\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e0a\u0e35\u0e49 *\/\r\n        }\r\n\r\n        .book-img-wrapper img {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: transform 0.5s;\r\n        }\r\n        \r\n        .book-card:hover .book-img-wrapper img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .book-info {\r\n            padding: 15px;\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .book-category {\r\n            font-size: 0.75rem;\r\n            color: var(--primary-color);\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n            background-color: #f3e5f5;\r\n            display: inline-block;\r\n            padding: 2px 8px;\r\n            border-radius: 4px;\r\n            align-self: flex-start;\r\n        }\r\n\r\n        .book-title {\r\n            font-size: 1rem;\r\n            font-weight: 500;\r\n            margin-bottom: 5px;\r\n            color: var(--text-color);\r\n            line-height: 1.4;\r\n            display: -webkit-box;\r\n            -webkit-line-clamp: 2;\r\n            -webkit-box-orient: vertical;\r\n            overflow: hidden;\r\n            min-height: 2.8em;\r\n            margin-top: 5px;\r\n        }\r\n\r\n        .book-author {\r\n            font-size: 0.85rem;\r\n            color: var(--text-light);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .card-footer {\r\n            margin-top: auto;\r\n            display: flex;\r\n            justify-content: flex-end; \/* \u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e23\u0e32\u0e04\u0e32\u0e0a\u0e34\u0e14\u0e02\u0e27\u0e32 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1b\u0e38\u0e48\u0e21\u0e41\u0e25\u0e49\u0e27 *\/\r\n            align-items: center;\r\n            border-top: 1px solid #f1f1f1;\r\n            padding-top: 12px;\r\n        }\r\n\r\n        .price {\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            color: var(--accent-color);\r\n        }\r\n\r\n        \/* --- Modal Styles (\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14) --- *\/\r\n        .modal {\r\n            display: none; \/* \u0e0b\u0e48\u0e2d\u0e19\u0e44\u0e27\u0e49\u0e01\u0e48\u0e2d\u0e19 *\/\r\n            position: fixed;\r\n            z-index: 2000;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: rgba(0,0,0,0.6); \/* \u0e09\u0e32\u0e01\u0e2b\u0e25\u0e31\u0e07\u0e2a\u0e35\u0e14\u0e33\u0e08\u0e32\u0e07\u0e46 *\/\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 20px;\r\n            backdrop-filter: blur(5px);\r\n        }\r\n\r\n        .modal-content {\r\n            background-color: #fff;\r\n            border-radius: 15px;\r\n            max-width: 800px;\r\n            width: 100%;\r\n            display: grid;\r\n            grid-template-columns: 300px 1fr;\r\n            overflow: hidden;\r\n            box-shadow: 0 15px 40px rgba(0,0,0,0.2);\r\n            position: relative;\r\n            animation: slideUp 0.3s ease-out;\r\n        }\r\n\r\n        @keyframes slideUp {\r\n            from { transform: translateY(50px); opacity: 0; }\r\n            to { transform: translateY(0); opacity: 1; }\r\n        }\r\n\r\n        .modal-img-container {\r\n            background-color: #f0f0f0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 20px;\r\n        }\r\n\r\n        .modal-img-container img {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n            object-fit: contain;\r\n        }\r\n\r\n        .modal-details {\r\n            padding: 30px;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .close-btn {\r\n            position: absolute;\r\n            top: 15px;\r\n            right: 20px;\r\n            font-size: 1.8rem;\r\n            color: #aaa;\r\n            cursor: pointer;\r\n            transition: 0.2s;\r\n            background: none;\r\n            border: none;\r\n        }\r\n\r\n        .close-btn:hover { color: #333; }\r\n\r\n        .modal-title {\r\n            font-size: 1.5rem;\r\n            color: var(--primary-color);\r\n            margin-bottom: 20px;\r\n            padding-right: 30px;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .detail-row {\r\n            display: flex;\r\n            margin-bottom: 12px;\r\n            font-size: 1rem;\r\n            border-bottom: 1px solid #f8f9fa;\r\n            padding-bottom: 8px;\r\n        }\r\n\r\n        .detail-label {\r\n            font-weight: 600;\r\n            min-width: 110px;\r\n            color: #555;\r\n        }\r\n\r\n        .detail-value {\r\n            color: #333;\r\n            flex: 1;\r\n        }\r\n        \r\n        .detail-value.highlight {\r\n            color: var(--accent-color);\r\n            font-weight: 500;\r\n        }\r\n\r\n        \/* --- Responsive --- *\/\r\n        @media (max-width: 992px) {\r\n            .container { grid-template-columns: 1fr; } \r\n            .sidebar { display: none; }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .hero h1 { font-size: 1.8rem; }\r\n            .hero h2 { font-size: 1.2rem; }\r\n            .navbar { flex-direction: row; gap: 15px; }\r\n            .search-container { width: 90%; }\r\n            .book-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }\r\n            \r\n            \/* Modal Responsive *\/\r\n            .modal-content { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }\r\n            .modal-img-container { padding: 10px; height: 250px; }\r\n            .modal-img-container img { height: 100%; }\r\n            .modal-details { padding: 20px; }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .book-grid { grid-template-columns: 1fr; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- Header -->\r\n    <header>\r\n        <div class=\"navbar\">\r\n            <div class=\"logo\">\r\n                <i class=\"fas fa-university\"><\/i>\r\n                <div class=\"logo-text\">\r\n                    \u0e04\u0e13\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c CPRU\r\n                    <span>Chaiyaphum Rajabhat University<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!-- \u0e2a\u0e48\u0e27\u0e19\u0e15\u0e30\u0e01\u0e23\u0e49\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27 -->\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Hero Banner -->\r\n    <div class=\"hero\">\r\n        <h1>\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e15\u0e33\u0e23\u0e32\u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23<\/h1>\r\n        <h2>\u0e04\u0e13\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e0a\u0e31\u0e22\u0e20\u0e39\u0e21\u0e34<\/h2>\r\n        <p>\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e23\u0e27\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e41\u0e25\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28\u0e17\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23<\/p>\r\n    <\/div>\r\n\r\n    <!-- Search Bar -->\r\n    <div class=\"search-container\">\r\n        <form class=\"search-box\" onsubmit=\"event.preventDefault(); alert('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32...');\">\r\n            <i class=\"fas fa-search search-icon\"><\/i>\r\n            <input type=\"text\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e15\u0e33\u0e23\u0e32, \u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e1c\u0e39\u0e49\u0e41\u0e15\u0e48\u0e07, \u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32...\">\r\n            <button type=\"submit\">\u0e04\u0e49\u0e19\u0e2b\u0e32<\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <!-- Main Content -->\r\n    <div class=\"container\">\r\n        \r\n        <!-- Sidebar Filter -->\r\n        <aside class=\"sidebar\">\r\n            <h3>\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h3>\r\n            <ul class=\"category-list\">\r\n                <!-- \u0e1b\u0e23\u0e31\u0e1a\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a\u0e01\u0e25\u0e38\u0e48\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e04\u0e13\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c -->\r\n                <li><a href=\"#\" class=\"active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (All) <span class=\"category-count\">2<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e <span class=\"category-count\">0<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e22\u0e38 <span class=\"category-count\">1<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e21\u0e32\u0e23\u0e14\u0e32\u0e41\u0e25\u0e30\u0e17\u0e32\u0e23\u0e01 <span class=\"category-count\">0<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e40\u0e14\u0e47\u0e01\u0e41\u0e25\u0e30\u0e27\u0e31\u0e22\u0e23\u0e38\u0e48\u0e19 <span class=\"category-count\">0<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e08\u0e34\u0e15\u0e41\u0e25\u0e30\u0e08\u0e34\u0e15\u0e40\u0e27\u0e0a <span class=\"category-count\">0<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e0a\u0e38\u0e21\u0e0a\u0e19 <span class=\"category-count\">1<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 <span class=\"category-count\">0<\/span><\/a><\/li>\r\n                <li><a href=\"#\">\u0e27\u0e34\u0e08\u0e31\u0e22\/\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\/\u0e08\u0e23\u0e23\u0e22\u0e32\u0e1a\u0e23\u0e23\u0e13 <span class=\"category-count\">0<\/span><\/a><\/li>\r\n            <\/ul>\r\n        <\/aside>\r\n\r\n        <!-- Product Grid -->\r\n        <main class=\"content-area\">\r\n            <div class=\"section-header\">\r\n                <div class=\"section-title\"><i class=\"fas fa-book-medical\"><\/i> \u0e15\u0e33\u0e23\u0e32\u0e41\u0e19\u0e30\u0e19\u0e33\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e20\u0e32\u0e04\u0e40\u0e23\u0e35\u0e22\u0e19<\/div>\r\n                <select class=\"sort-select\">\r\n                    <option>\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21: \u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14<\/option>\r\n                    <option>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e1b\u0e35 1<\/option>\r\n                    <option>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e1b\u0e35 2<\/option>\r\n                    <option>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e1b\u0e35 3<\/option>\r\n                    <option>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e1b\u0e35 4<\/option>\r\n                <\/select>\r\n            <\/div>\r\n            \r\n            <div class=\"book-grid\">\r\n\r\n                <!-- Item 1 -->\r\n                <div class=\"book-card\">\r\n                    <span class=\"badge rec\">\u0e41\u0e19\u0e30\u0e19\u0e33<\/span> \r\n                    \r\n                    <div class=\"book-img-wrapper\" \r\n                         onclick=\"openModal(\r\n                            '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e27\u0e30\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e2d\u0e37\u0e49\u0e2d\u0e2d\u0e32\u0e17\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', \r\n                            '\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c \u0e14\u0e23. \u0e2a\u0e38\u0e27\u0e34\u0e21\u0e25\u0e23\u0e31\u0e15\u0e19\u0e4c \u0e23\u0e2d\u0e1a\u0e23\u0e39\u0e49\u0e40\u0e08\u0e19', \r\n                            '1', \r\n                            '\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c \u0e14\u0e23. \u0e2a\u0e38\u0e27\u0e34\u0e21\u0e25\u0e23\u0e31\u0e15\u0e19\u0e4c \u0e23\u0e2d\u0e1a\u0e23\u0e39\u0e49\u0e40\u0e08\u0e19', \r\n                            ' suwimolrat.1967@gmail.com', \r\n                            'https:\/\/nu.cpru.ac.th\/thai\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-17-105152.png'\r\n                         )\">\r\n                        <img decoding=\"async\" src=\"https:\/\/nu.cpru.ac.th\/thai\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-17-105152.png\" alt=\"\u0e1b\u0e01\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\">\r\n                    <\/div>\r\n                    \r\n                    <div class=\"book-info\">\r\n                        <div class=\"book-category\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e2d\u0e19\u0e32\u0e21\u0e31\u0e22\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/div>\r\n                        <h3 class=\"book-title\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e27\u0e30\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e2d\u0e37\u0e49\u0e2d\u0e2d\u0e32\u0e17\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25<\/h3>\r\n                        <div class=\"book-author\">\u0e1c\u0e28.\u0e14\u0e23.\u0e2a\u0e38\u0e27\u0e34\u0e21\u0e25\u0e23\u0e31\u0e15\u0e19\u0e4c \u0e23\u0e2d\u0e1a\u0e23\u0e39\u0e49\u0e40\u0e08\u0e19\/ \u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e01\u0e25\u0e38\u0e48\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e2d\u0e19\u0e32\u0e21\u0e31\u0e22\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/div>\r\n                        \r\n                        <div class=\"card-footer\">\r\n                            <span class=\"price\">\u0e3f450<\/span>\r\n                            <!-- \u0e1b\u0e38\u0e48\u0e21\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27 -->\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Item 2 -->\r\n                <div class=\"book-card\">\r\n                    <div class=\"book-img-wrapper\"\r\n                         onclick=\"openModal(\r\n                            '\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', \r\n                            '\u0e1c\u0e28.\u0e14\u0e23.\u0e44\u0e1e\u0e11\u0e39\u0e23\u0e22\u0e4c \u0e27\u0e38\u0e12\u0e34\u0e42\u0e2a', \r\n                            '1', \r\n                            '\u0e1c\u0e28.\u0e14\u0e23.\u0e44\u0e1e\u0e11\u0e39\u0e23\u0e22\u0e4c \u0e27\u0e38\u0e12\u0e34\u0e42\u0e2a', \r\n                            '\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d \u0e42\u0e17\u0e23 0615199426 , E-mail: g47377267@gmail.com', \r\n                            'https:\/\/nu.cpru.ac.th\/thai\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-17-105813.png'\r\n                         )\">\r\n                        <img decoding=\"async\" src=\"https:\/\/nu.cpru.ac.th\/thai\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-17-105813.png\" alt=\"\u0e1b\u0e01\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\">\r\n                    <\/div>\r\n                    <div class=\"book-info\">\r\n                        <div class=\"book-category\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e22\u0e38<\/div>\r\n                        <h3 class=\"book-title\">\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25<\/h3>\r\n                        <div class=\"book-author\">\u0e1c\u0e28.\u0e14\u0e23.\u0e44\u0e1e\u0e11\u0e39\u0e23\u0e22\u0e4c \u0e27\u0e38\u0e12\u0e34\u0e42\u0e2a\/ \u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e01\u0e25\u0e38\u0e48\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e1c\u0e39\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e22\u0e38<\/div>\r\n                        <div class=\"card-footer\">\r\n                            <span class=\"price\">\u0e3f300<\/span>\r\n                            <!-- \u0e1b\u0e38\u0e48\u0e21\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27 -->\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/main>\r\n    <\/div>\r\n\r\n    <!-- Modal (\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14) -->\r\n    <div id=\"bookModal\" class=\"modal\" onclick=\"if(event.target === this) closeModal()\">\r\n        <div class=\"modal-content\">\r\n            <span class=\"close-btn\" onclick=\"closeModal()\">&times;<\/span>\r\n            <div class=\"modal-img-container\">\r\n                <img decoding=\"async\" id=\"modal-img\" src=\"\" alt=\"Book Cover\">\r\n            <\/div>\r\n            <div class=\"modal-details\">\r\n                <h2 id=\"modal-title\" class=\"modal-title\">\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d<\/h2>\r\n                \r\n                <div class=\"detail-row\">\r\n                    <span class=\"detail-label\">\u0e1a\u0e23\u0e23\u0e13\u0e32\u0e18\u0e34\u0e01\u0e32\u0e23:<\/span>\r\n                    <span id=\"modal-editor\" class=\"detail-value\">-<\/span>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-row\">\r\n                    <span class=\"detail-label\">\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48:<\/span>\r\n                    <span id=\"modal-edition\" class=\"detail-value\">-<\/span>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-row\">\r\n                    <span class=\"detail-label\">\u0e08\u0e31\u0e14\u0e17\u0e33\u0e42\u0e14\u0e22:<\/span>\r\n                    <span id=\"modal-publisher\" class=\"detail-value\">-<\/span>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-row\">\r\n                    <span class=\"detail-label\">\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48:<\/span>\r\n                    <span id=\"modal-buy\" class=\"detail-value highlight\">-<\/span>\r\n                <\/div>\r\n                \r\n                <!-- \u0e1b\u0e38\u0e48\u0e21\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e43\u0e19 Modal \u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27 -->\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Scripts -->\r\n    <script>\r\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14 Modal \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n        function openModal(title, editor, edition, publisher, buyLocation, imgSrc) {\r\n            document.getElementById('modal-title').innerText = title;\r\n            document.getElementById('modal-editor').innerText = editor;\r\n            document.getElementById('modal-edition').innerText = edition;\r\n            document.getElementById('modal-publisher').innerText = publisher;\r\n            document.getElementById('modal-buy').innerText = buyLocation;\r\n            document.getElementById('modal-img').src = imgSrc;\r\n            \r\n            \/\/ \u0e41\u0e2a\u0e14\u0e07 Modal\r\n            document.getElementById('bookModal').style.display = 'flex';\r\n        }\r\n\r\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Modal\r\n        function closeModal() {\r\n            document.getElementById('bookModal').style.display = 'none';\r\n        }\r\n\r\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e16\u0e39\u0e01\u0e25\u0e1a\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e15\u0e33\u0e23\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e04\u0e13\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f<span class=\"more-link\"><a href=\"https:\/\/nu.cpru.ac.th\/thai\/?page_id=20582\">Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["entry","author-nurse","post-20582","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/pages\/20582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20582"}],"version-history":[{"count":40,"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/pages\/20582\/revisions"}],"predecessor-version":[{"id":20653,"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=\/wp\/v2\/pages\/20582\/revisions\/20653"}],"wp:attachment":[{"href":"https:\/\/nu.cpru.ac.th\/thai\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}