{"id":465,"date":"2026-01-26T16:04:44","date_gmt":"2026-01-26T09:04:44","guid":{"rendered":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/?page_id=465"},"modified":"2026-01-26T16:04:44","modified_gmt":"2026-01-26T09:04:44","slug":"agri-knowledge-hub","status":"publish","type":"page","link":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/agri-knowledge-hub\/","title":{"rendered":""},"content":{"rendered":"\n<!-- \ud83d\udd25 PREMIUM HEADER (COMPACT) - \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 \ud83d\udd25 -->\n<!-- Theme: Green, White, Orange (Agriculture) -->\n<!-- \u0e41\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48: \u0e08\u0e31\u0e14\u0e40\u0e23\u0e35\u0e22\u0e07\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19 (Horizontal Layout) -->\n\n<style>\n    .agri-header-wrapper-compact * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        font-family: 'Kanit', sans-serif;\n    }\n\n    \/* Top welcome bar *\/\n    .agri-top-bar-compact {\n        background: linear-gradient(90deg, #1b5e20, #2e7d32, #43a047, #2e7d32, #1b5e20);\n        background-size: 400% 400%;\n        animation: gradientShift 8s ease infinite;\n        color: white;\n        text-align: center;\n        padding: 6px 15px;\n        position: relative;\n        overflow: hidden;\n        font-size: 12px;\n    }\n\n    .top-bar-content-compact {\n        position: relative;\n        z-index: 2;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n        flex-wrap: wrap;\n    }\n\n    .top-bar-dept {\n        font-weight: 500;\n    }\n\n    .top-bar-dept-en {\n        font-weight: 300;\n        opacity: 0.9;\n    }\n\n    @keyframes gradientShift {\n        0% {\n            background-position: 0% 50%;\n        }\n\n        50% {\n            background-position: 100% 50%;\n        }\n\n        100% {\n            background-position: 0% 50%;\n        }\n    }\n\n    \/* Main header Compact *\/\n    .agri-main-header-compact {\n        background: url('https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-content\/uploads\/sites\/5\/2026\/01\/Gemini_Generated_Image_rjos0srjos0srjos.png');\n        background-size: cover;\n        background-position: center 30%;\n        padding: 15px 20px;\n        position: relative;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n        border-bottom: 4px solid #f57c00;\n    }\n\n    .agri-header-content-compact {\n        position: relative;\n        z-index: 10;\n        background: rgba(255, 255, 255, 0.9);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        padding: 15px 30px;\n        border-radius: 15px;\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        max-width: 1400px;\n        margin: 0 auto;\n        gap: 20px;\n    }\n\n    \/* Left Side: Logos + Titles *\/\n    .header-left-group {\n        display: flex;\n        align-items: center;\n        gap: 25px;\n    }\n\n    .agri-logo-container-compact {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n    }\n\n    .agri-logo-img-compact {\n        width: 70px;\n        height: 70px;\n        object-fit: contain;\n        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));\n        transition: transform 0.3s;\n    }\n\n    .agri-logo-img-compact:hover {\n        transform: scale(1.1);\n    }\n\n    .agri-logo-link {\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        color: inherit;\n        transition: opacity 0.3s;\n    }\n\n    .agri-logo-link:hover {\n        opacity: 0.9;\n    }\n\n    .logo-divider-compact {\n        width: 2px;\n        height: 50px;\n        background: #e0e0e0;\n    }\n\n    .agri-text-group {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .agri-main-title-compact {\n        font-size: 26px;\n        font-weight: 700;\n        line-height: 1.2;\n        background: linear-gradient(135deg, #1b5e20, #2e7d32, #43a047);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        margin-bottom: 2px;\n    }\n\n    .agri-subtitle-compact {\n        color: #388e3c;\n        font-size: 14px;\n        font-weight: 400;\n        letter-spacing: 0.5px;\n        text-transform: uppercase;\n    }\n\n    .agri-province-compact {\n        color: #558b2f;\n        font-size: 13px;\n        font-weight: 300;\n        margin-top: 2px;\n        display: none;\n        \/* Hide on compact to save noise, show if needed *\/\n    }\n\n    \/* Right Side: Decorative or Province *\/\n    .header-right-group {\n        display: flex;\n        align-items: center;\n    }\n\n    .province-badge {\n        background: linear-gradient(135deg, #f57c00, #ff9800);\n        color: white;\n        padding: 5px 15px;\n        border-radius: 20px;\n        font-size: 14px;\n        font-weight: 500;\n        box-shadow: 0 3px 10px rgba(245, 124, 0, 0.3);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 900px) {\n        .agri-header-content-compact {\n            flex-direction: column;\n            text-align: center;\n            gap: 15px;\n            padding: 20px;\n        }\n\n        .header-left-group {\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        .agri-main-title-compact {\n            font-size: 22px;\n        }\n\n        .header-right-group {\n            display: none;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .agri-logo-img-compact {\n            width: 55px;\n            height: 55px;\n        }\n\n        .agri-main-title-compact {\n            font-size: 18px;\n        }\n\n        .agri-subtitle-compact {\n            font-size: 12px;\n        }\n    }\n<\/style>\n\n<div class=\"agri-header-wrapper-compact\">\n    <!-- Top Bar -->\n    <div class=\"agri-top-bar-compact\">\n        <div class=\"top-bar-content-compact\">\n            <span class=\"top-bar-dept\">\ud83c\udf3e \u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23<\/span>\n            <span class=\"top-bar-sep\">|<\/span>\n            <span class=\"top-bar-dept-en\">Department of Agricultural Extension \ud83c\udf3e<\/span>\n        <\/div>\n    <\/div>\n\n    <!-- Main Header Compact -->\n    <div class=\"agri-main-header-compact\">\n        <div class=\"agri-header-content-compact\">\n            <!-- Left Side -->\n            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/\" class=\"header-left-group agri-logo-link\">\n                <!-- Logos -->\n                <div class=\"agri-logo-container-compact\">\n                    <img decoding=\"async\" src=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-content\/uploads\/sites\/5\/2026\/01\/LOGO_DOAE_PNG-0.png\"\n                        alt=\"\u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\" class=\"agri-logo-img-compact\">\n                    <div class=\"logo-divider-compact\"><\/div>\n                    <img decoding=\"async\" src=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-content\/uploads\/sites\/5\/2026\/01\/LOGO-DOAE.png\"\n                        alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e01\u0e23\u0e21\u0e2f\" class=\"agri-logo-img-compact\">\n                <\/div>\n\n                <!-- Text -->\n                <div class=\"agri-text-group\">\n                    <h1 class=\"agri-main-title-compact\">\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25<\/h1>\n                    <p class=\"agri-subtitle-compact\">Phutthamonthon District Agricultural Office<\/p>\n                <\/div>\n            <\/a>\n\n            <!-- Right Side (Optional for wider screens) -->\n            <div class=\"header-right-group\">\n                <span class=\"province-badge\">\ud83d\udccd \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<!-- \ud83e\udded PREMIUM NAVIGATION BAR - \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 -->\n<!-- Theme: Green, White, Orange (Agriculture) | Glassmorphism + Particles -->\n<!-- \u0e27\u0e32\u0e07\u0e44\u0e27\u0e49\u0e43\u0e15\u0e49 Header -->\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udf3f PREMIUM AGRI-NAV RESET & BASE\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .agri-nav *,\n    .agri-nav *::before,\n    .agri-nav *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .agri-nav {\n        font-family: 'Kanit', sans-serif;\n        position: sticky;\n        top: 0;\n        z-index: 1000;\n        margin-top: -30px;\n        \/* \u0e1b\u0e34\u0e14\u0e0a\u0e48\u0e2d\u0e07\u0e27\u0e48\u0e32\u0e07\u0e2a\u0e35\u0e02\u0e32\u0e27 *\/\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udfa8 ANIMATED GRADIENT BACKGROUND\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-bg-wrap {\n        background: linear-gradient(135deg, #0d3b0d 0%, #1b5e20 25%, #2e7d32 50%, #1b5e20 75%, #0d3b0d 100%);\n        background-size: 300% 300%;\n        animation: navGradientShift 8s ease infinite;\n        position: relative !important;\n        overflow: visible !important;\n        z-index: 999999 !important;\n        box-shadow:\n            0 4px 30px rgba(27, 94, 32, 0.4),\n            0 1px 0 rgba(255, 255, 255, 0.05) inset,\n            0 -1px 0 rgba(0, 0, 0, 0.2) inset;\n    }\n\n    @keyframes navGradientShift {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \u2728 FLOATING PARTICLE LAYER (CSS-only)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-particles {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        overflow: hidden;\n    }\n\n    .nav-particles .p {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0;\n        animation: particleFloat linear infinite;\n    }\n\n    .nav-particles .p:nth-child(1) {\n        width: 4px; height: 4px;\n        background: rgba(255, 200, 50, 0.5);\n        left: 10%; bottom: -10px;\n        animation-duration: 6s; animation-delay: 0s;\n    }\n    .nav-particles .p:nth-child(2) {\n        width: 3px; height: 3px;\n        background: rgba(255, 255, 255, 0.4);\n        left: 25%; bottom: -10px;\n        animation-duration: 8s; animation-delay: 1s;\n    }\n    .nav-particles .p:nth-child(3) {\n        width: 5px; height: 5px;\n        background: rgba(129, 199, 132, 0.5);\n        left: 45%; bottom: -10px;\n        animation-duration: 7s; animation-delay: 2s;\n    }\n    .nav-particles .p:nth-child(4) {\n        width: 3px; height: 3px;\n        background: rgba(255, 183, 77, 0.5);\n        left: 60%; bottom: -10px;\n        animation-duration: 9s; animation-delay: 0.5s;\n    }\n    .nav-particles .p:nth-child(5) {\n        width: 4px; height: 4px;\n        background: rgba(255, 255, 255, 0.3);\n        left: 75%; bottom: -10px;\n        animation-duration: 6.5s; animation-delay: 3s;\n    }\n    .nav-particles .p:nth-child(6) {\n        width: 6px; height: 6px;\n        background: rgba(76, 175, 80, 0.4);\n        left: 88%; bottom: -10px;\n        animation-duration: 10s; animation-delay: 1.5s;\n    }\n    .nav-particles .p:nth-child(7) {\n        width: 3px; height: 3px;\n        background: rgba(255, 235, 59, 0.4);\n        left: 35%; bottom: -10px;\n        animation-duration: 7.5s; animation-delay: 4s;\n    }\n    .nav-particles .p:nth-child(8) {\n        width: 4px; height: 4px;\n        background: rgba(255, 255, 255, 0.25);\n        left: 55%; bottom: -10px;\n        animation-duration: 8.5s; animation-delay: 2.5s;\n    }\n\n    @keyframes particleFloat {\n        0% { transform: translateY(0) scale(0); opacity: 0; }\n        10% { opacity: 1; transform: translateY(-10px) scale(1); }\n        90% { opacity: 0.6; }\n        100% { transform: translateY(-80px) scale(0.3); opacity: 0; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udd32 GLASSMORPHISM BOTTOM BORDER\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-glass-border {\n        height: 2px;\n        background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 183, 77, 0.6) 20%,\n            rgba(255, 152, 0, 0.9) 50%,\n            rgba(255, 183, 77, 0.6) 80%,\n            transparent 100%\n        );\n        animation: borderGlow 3s ease-in-out infinite;\n    }\n\n    @keyframes borderGlow {\n        0%, 100% { opacity: 0.7; }\n        50% { opacity: 1; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udce6 CONTAINER\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udccb DESKTOP NAVIGATION MENU\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-menu {\n        display: flex;\n        list-style: none;\n        gap: 2px;\n    }\n\n    .nav-item {\n        position: relative !important;\n        z-index: 999999 !important;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udd17 NAV LINKS \u2014 Glassmorphism Hover\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-link {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 18px 22px;\n        color: rgba(255, 255, 255, 0.92);\n        text-decoration: none;\n        font-size: 15px;\n        font-weight: 500;\n        letter-spacing: 0.3px;\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        position: relative;\n        overflow: hidden;\n        border-radius: 0;\n    }\n\n    \/* Hover glow background *\/\n    .nav-link::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15), transparent 70%);\n        opacity: 0;\n        transition: opacity 0.4s ease;\n    }\n\n    .nav-link:hover::before {\n        opacity: 1;\n    }\n\n    \/* Animated underline *\/\n    .nav-link::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: 0;\n        height: 3px;\n        background: linear-gradient(90deg, #ff9800, #ffb74d, #ff9800);\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        transform: translateX(-50%);\n        border-radius: 3px 3px 0 0;\n        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);\n    }\n\n    .nav-link:hover::after {\n        width: 70%;\n    }\n\n    .nav-link:hover {\n        color: #ffffff;\n        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);\n    }\n\n    \/* Active state *\/\n    .nav-link.active {\n        color: #ffffff;\n        background: rgba(255, 255, 255, 0.08);\n    }\n\n    .nav-link.active::after {\n        width: 70%;\n        background: linear-gradient(90deg, #ff6f00, #ff9800, #ffb74d);\n        box-shadow: 0 0 15px rgba(255, 152, 0, 0.6);\n    }\n\n    \/* Icon styling *\/\n    .nav-link .nav-icon {\n        width: 22px;\n        height: 22px;\n        fill: currentColor;\n        opacity: 0.85;\n        transition: all 0.4s ease;\n        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));\n    }\n\n    .nav-link:hover .nav-icon {\n        opacity: 1;\n        transform: translateY(-2px) scale(1.1);\n        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udd3d DROPDOWN ARROW\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .has-dropdown > .nav-link .dropdown-arrow {\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 5px solid rgba(255, 255, 255, 0.7);\n        margin-left: 4px;\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    }\n\n    .has-dropdown:hover > .nav-link .dropdown-arrow {\n        transform: rotate(180deg);\n        border-top-color: #ffb74d;\n    }\n\n    \/* Override the ::after for dropdown parents *\/\n    .has-dropdown > .nav-link::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        width: 0;\n        height: 3px;\n        background: linear-gradient(90deg, #ff9800, #ffb74d, #ff9800);\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        transform: translateX(-50%);\n        border-radius: 3px 3px 0 0;\n        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);\n    }\n\n    .has-dropdown:hover > .nav-link::after {\n        width: 70%;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udcc2 DROPDOWN MENU \u2014 Glassmorphism Card\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .dropdown-menu {\n        position: absolute !important;\n        top: calc(100% + 2px) !important;\n        left: 50% !important;\n        transform: translateX(-50%) translateY(10px) !important;\n        min-width: 260px !important;\n        background: rgba(255, 255, 255, 0.95) !important;\n        backdrop-filter: blur(20px) !important;\n        -webkit-backdrop-filter: blur(20px) !important;\n        border-radius: 16px !important;\n        box-shadow:\n            0 20px 60px rgba(27, 94, 32, 0.2),\n            0 0 0 1px rgba(255, 255, 255, 0.2),\n            0 1px 3px rgba(0, 0, 0, 0.08) !important;\n        opacity: 0 !important;\n        visibility: hidden !important;\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n        list-style: none !important;\n        overflow: hidden !important;\n        padding: 8px 0 !important;\n        z-index: 9999999 !important;\n        display: block !important;\n    }\n\n    .has-dropdown:hover .dropdown-menu,\n    .has-dropdown:focus-within .dropdown-menu {\n        opacity: 1 !important;\n        visibility: visible !important;\n        transform: translateX(-50%) translateY(0) !important;\n    }\n\n    \/* Dropdown top accent *\/\n    .dropdown-menu::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 3px;\n        background: linear-gradient(90deg, #2e7d32, #66bb6a, #ff9800, #66bb6a, #2e7d32);\n        border-radius: 16px 16px 0 0;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udccc DROPDOWN ITEMS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .dropdown-item {\n        position: relative;\n    }\n\n    .dropdown-item a {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 14px 22px;\n        color: #2e7d32;\n        text-decoration: none;\n        font-size: 14px;\n        font-weight: 400;\n        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        position: relative;\n        border-left: 3px solid transparent;\n        margin: 2px 8px;\n        border-radius: 10px;\n    }\n\n    .dropdown-item a::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: 10px;\n        background: linear-gradient(135deg, rgba(46, 125, 50, 0.08), rgba(255, 152, 0, 0.05));\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n\n    .dropdown-item a:hover {\n        color: #1b5e20;\n        padding-left: 28px;\n        border-left-color: #ff9800;\n        background: transparent;\n    }\n\n    .dropdown-item a:hover::before {\n        opacity: 1;\n    }\n\n    .dropdown-item a .dd-icon {\n        width: 20px;\n        height: 20px;\n        fill: #43a047;\n        transition: all 0.35s ease;\n        flex-shrink: 0;\n    }\n\n    .dropdown-item a:hover .dd-icon {\n        fill: #ff9800;\n        transform: scale(1.15) rotate(-5deg);\n        filter: drop-shadow(0 2px 4px rgba(255, 152, 0, 0.3));\n    }\n\n    \/* Stagger animation for dropdown items *\/\n    .dropdown-item:nth-child(1) { animation-delay: 0s; }\n    .dropdown-item:nth-child(2) { animation-delay: 0.05s; }\n    .dropdown-item:nth-child(3) { animation-delay: 0.1s; }\n    .dropdown-item:nth-child(4) { animation-delay: 0.15s; }\n    .dropdown-item:nth-child(5) { animation-delay: 0.2s; }\n\n    .has-dropdown:hover .dropdown-item {\n        animation: dropdownSlideIn 0.35s ease forwards;\n    }\n\n    @keyframes dropdownSlideIn {\n        from { opacity: 0; transform: translateX(-8px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udf1f CTA BUTTON \u2014 Pulsing Glow\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-cta {\n        background: linear-gradient(135deg, #e65100, #f57c00, #ff9800) !important;\n        border-radius: 50px !important;\n        margin-left: 12px;\n        padding: 14px 26px !important;\n        box-shadow:\n            0 4px 20px rgba(245, 124, 0, 0.4),\n            0 0 0 0 rgba(245, 124, 0, 0.3);\n        animation: ctaPulse 2.5s infinite;\n        position: relative;\n        overflow: visible !important;\n    }\n\n    .nav-cta::before {\n        display: none !important;\n    }\n\n    .nav-cta::after {\n        display: none !important;\n    }\n\n    \/* Shimmer effect *\/\n    .nav-cta .cta-shimmer {\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 70%;\n        height: 100%;\n        background: linear-gradient(90deg,\n            transparent,\n            rgba(255, 255, 255, 0.25),\n            transparent\n        );\n        animation: shimmerSlide 3s ease-in-out infinite;\n        pointer-events: none;\n        border-radius: 50px;\n    }\n\n    @keyframes shimmerSlide {\n        0% { left: -100%; }\n        50% { left: 130%; }\n        100% { left: 130%; }\n    }\n\n    @keyframes ctaPulse {\n        0% { box-shadow: 0 4px 20px rgba(245, 124, 0, 0.4), 0 0 0 0 rgba(245, 124, 0, 0.3); }\n        50% { box-shadow: 0 6px 25px rgba(245, 124, 0, 0.5), 0 0 0 8px rgba(245, 124, 0, 0); }\n        100% { box-shadow: 0 4px 20px rgba(245, 124, 0, 0.4), 0 0 0 0 rgba(245, 124, 0, 0); }\n    }\n\n    .nav-cta:hover {\n        transform: translateY(-3px) scale(1.03);\n        box-shadow: 0 8px 30px rgba(245, 124, 0, 0.5) !important;\n        animation: none;\n    }\n\n    .nav-cta .nav-icon {\n        animation: starSpin 4s ease-in-out infinite;\n    }\n\n    @keyframes starSpin {\n        0%, 100% { transform: rotate(0deg) scale(1); }\n        25% { transform: rotate(15deg) scale(1.2); }\n        50% { transform: rotate(0deg) scale(1); }\n        75% { transform: rotate(-15deg) scale(1.2); }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udcf1 MOBILE TOGGLE BUTTON\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .mobile-toggle {\n        display: none;\n        flex-direction: column;\n        gap: 5px;\n        padding: 15px 20px;\n        cursor: pointer;\n        background: none;\n        border: none;\n    }\n\n    .mobile-toggle span {\n        width: 26px;\n        height: 3px;\n        background: white;\n        border-radius: 3px;\n        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udff7\ufe0f NAV LOGO (Mobile only)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-logo {\n        display: none;\n        align-items: center;\n        gap: 10px;\n        padding: 12px 20px;\n        color: white;\n        font-weight: 600;\n        font-size: 16px;\n        text-decoration: none;\n    }\n\n    .nav-logo svg {\n        width: 32px;\n        height: 32px;\n        fill: white;\n        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83d\udcf1 MOBILE RESPONSIVE STYLES\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media (max-width: 960px) {\n        .nav-container {\n            justify-content: space-between;\n        }\n\n        .mobile-toggle {\n            display: flex;\n        }\n\n        .nav-logo {\n            display: flex;\n        }\n\n        \/* Hide particles on mobile *\/\n        .nav-particles {\n            display: none;\n        }\n\n        \/* \u2500\u2500 Mobile Slide-In Menu \u2500\u2500 *\/\n        .nav-menu {\n            position: fixed;\n            top: 0;\n            right: -320px;\n            width: 300px;\n            height: 100vh;\n            height: 100dvh;\n            background: linear-gradient(180deg, #0d3b0d 0%, #1b5e20 30%, #2e7d32 100%);\n            flex-direction: column;\n            gap: 0;\n            padding-top: 80px;\n            padding-bottom: 30px;\n            transition: right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);\n            overflow-y: auto;\n            border-left: 1px solid rgba(255, 255, 255, 0.05);\n        }\n\n        \/* Menu open state *\/\n        #nav-toggle:checked ~ .nav-menu {\n            right: 0;\n        }\n\n        \/* Backdrop overlay *\/\n        #nav-toggle:checked ~ .nav-backdrop {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        \/* Hamburger \u2192 X animation *\/\n        #nav-toggle:checked ~ .mobile-toggle span:nth-child(1) {\n            transform: rotate(45deg) translate(5px, 6px);\n            background: #ffb74d;\n        }\n        #nav-toggle:checked ~ .mobile-toggle span:nth-child(2) {\n            opacity: 0;\n            transform: scaleX(0);\n        }\n        #nav-toggle:checked ~ .mobile-toggle span:nth-child(3) {\n            transform: rotate(-45deg) translate(5px, -6px);\n            background: #ffb74d;\n        }\n\n        \/* Mobile nav links *\/\n        .nav-link {\n            padding: 16px 28px;\n            border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n            width: 100%;\n            border-radius: 0;\n            font-size: 15px;\n        }\n\n        .nav-link::after {\n            display: none;\n        }\n\n        .nav-link:hover {\n            background: rgba(255, 255, 255, 0.08);\n            padding-left: 34px;\n        }\n\n        .nav-link .nav-icon {\n            width: 20px;\n            height: 20px;\n        }\n\n        \/* Mobile dropdown *\/\n        .dropdown-menu {\n            position: static;\n            background: rgba(0, 0, 0, 0.15);\n            backdrop-filter: none;\n            box-shadow: none;\n            border-radius: 0;\n            max-height: 0;\n            overflow: hidden;\n            transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            padding: 0;\n            transform: none;\n            min-width: unset;\n        }\n\n        .dropdown-menu::before {\n            display: none;\n        }\n\n        .has-dropdown:focus-within .dropdown-menu,\n        .has-dropdown:hover .dropdown-menu {\n            max-height: 600px;\n            opacity: 1;\n            visibility: visible;\n            transform: none;\n        }\n\n        .dropdown-item a {\n            color: rgba(255, 255, 255, 0.85);\n            padding: 13px 28px 13px 48px;\n            font-size: 14px;\n            margin: 0;\n            border-radius: 0;\n            border-left: 3px solid transparent;\n        }\n\n        .dropdown-item a::before {\n            display: none;\n        }\n\n        .dropdown-item a:hover {\n            background: rgba(255, 255, 255, 0.08);\n            color: white;\n            padding-left: 54px;\n            border-left-color: #ff9800;\n        }\n\n        .dropdown-item a .dd-icon {\n            fill: rgba(255, 255, 255, 0.6);\n            width: 18px;\n            height: 18px;\n        }\n\n        .dropdown-item a:hover .dd-icon {\n            fill: #ffb74d;\n        }\n\n        \/* Mobile CTA *\/\n        .nav-cta {\n            margin: 20px 24px !important;\n            text-align: center;\n            justify-content: center;\n            border-radius: 14px !important;\n            animation: none;\n        }\n\n        \/* Mobile close button *\/\n        .mobile-close {\n            position: absolute;\n            top: 16px;\n            right: 16px;\n            width: 40px;\n            height: 40px;\n            background: rgba(255, 255, 255, 0.08);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 12px;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n        }\n\n        .mobile-close:hover {\n            background: rgba(255, 255, 255, 0.15);\n        }\n\n        .mobile-close svg {\n            width: 18px;\n            height: 18px;\n            fill: white;\n        }\n\n        \/* Dropdown arrow on mobile *\/\n        .has-dropdown > .nav-link .dropdown-arrow {\n            margin-left: auto;\n        }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udf3f BACKDROP OVERLAY (Mobile)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-backdrop {\n        display: none;\n    }\n\n    @media (max-width: 960px) {\n        .nav-backdrop {\n            display: block;\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.5);\n            backdrop-filter: blur(4px);\n            -webkit-backdrop-filter: blur(4px);\n            z-index: -1;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s ease;\n        }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \u2728 TOOLTIP BADGE for CTA (fun touch)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-badge {\n        position: absolute;\n        top: -4px;\n        right: -4px;\n        width: 12px;\n        height: 12px;\n        background: #ff1744;\n        border-radius: 50%;\n        border: 2px solid #1b5e20;\n        animation: badgePing 2s infinite;\n    }\n\n    @keyframes badgePing {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.3); opacity: 0.7; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \ud83c\udfad SMOOTH SCROLL SHADOW on sticky\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .agri-nav.scrolled .nav-bg-wrap {\n        box-shadow:\n            0 8px 40px rgba(0, 0, 0, 0.25),\n            0 2px 10px rgba(27, 94, 32, 0.3);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       \u267f ACCESSIBILITY \u2014 Focus Ring\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .nav-link:focus-visible,\n    .dropdown-item a:focus-visible {\n        outline: 2px solid #ffb74d;\n        outline-offset: -2px;\n    }\n<\/style>\n\n<nav class=\"agri-nav\" id=\"agriNav\">\n    <div class=\"nav-bg-wrap\">\n        <div class=\"nav-container\">\n\n            <!-- Pure CSS Toggle Checkbox (Hidden) -->\n            <input type=\"checkbox\" id=\"nav-toggle\" style=\"display:none;\">\n\n            <!-- Logo (Mobile) -->\n            <div class=\"nav-logo\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M12 22c4.97 0 9-4.03 9-9-4.97 0-9 4.03-9 9zM5.6 10.25c0 1.38 1.12 2.5 2.5 2.5.53 0 1.01-.16 1.42-.44l-.02.19c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5l-.02-.19c.4.28.89.44 1.42.44 1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.25 1.43-2.25 0-1.38-1.12-2.5-2.5-2.5-.53 0-1.01.16-1.42.44l.02-.19C14.5 2.12 13.38 1 12 1S9.5 2.12 9.5 3.5l.02.19c-.4-.28-.89-.44-1.42-.44-1.38 0-2.5 1.12-2.5 2.5 0 1 .59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25zM12 5.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zM3 13c0 4.97 4.03 9 9 9 0-4.97-4.03-9-9-9z\" \/>\n                <\/svg>\n                \u0e40\u0e01\u0e29\u0e15\u0e23\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25\n            <\/div>\n\n            <!-- Backdrop for mobile -->\n            <label for=\"nav-toggle\" class=\"nav-backdrop\"><\/label>\n\n            <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAVIGATION MENU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n            <ul class=\"nav-menu\" id=\"navMenu\">\n\n                <!-- \ud83c\udfe0 \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 -->\n                <li class=\"nav-item\">\n                    <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/\" class=\"nav-link active\">\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\" \/>\n                        <\/svg>\n                        \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\n                    <\/a>\n                <\/li>\n\n                <!-- \u2139\ufe0f \u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32 -->\n                <li class=\"nav-item has-dropdown\" onclick=\"void(0)\">\n                    <a href=\"#\" class=\"nav-link\">\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" \/>\n                        <\/svg>\n                        \u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32\n                        <span class=\"dropdown-arrow\"><\/span>\n                    <\/a>\n                    <ul class=\"dropdown-menu\">\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/vision\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z\" \/>\n                                <\/svg>\n                                \u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c &#038; \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/staff\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3z\" \/>\n                                <\/svg>\n                                \u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/structure\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\" \/>\n                                <\/svg>\n                                \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/li>\n\n                <!-- \ud83d\udcca \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 -->\n                <li class=\"nav-item has-dropdown\" onclick=\"void(0)\">\n                    <a href=\"#\" class=\"nav-link\">\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z\" \/>\n                        <\/svg>\n                        \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\n                        <span class=\"dropdown-arrow\"><\/span>\n                    <\/a>\n                    <ul class=\"dropdown-menu\">\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/farmer-information\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" \/>\n                                <\/svg>\n                                \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/land-use-data\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M14 6l-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22L14 6z\" \/>\n                                <\/svg>\n                                \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/soil-information\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M21 16H3V4c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v12zm0 2c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-1h18v1zm-2-8h-6v4h6v-4zm-8 4H5v-4h6v4z\" \/>\n                                <\/svg>\n                                \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e34\u0e19\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/water-sources\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M12 22c4.97 0 9-4.03 9-9 0-4.97-4.03-9-9-9C7.03 4 3 8.03 3 13c0 4.97 4.03 9 9 9zm0-16c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7z\" \/>\n                                <\/svg>\n                                \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e19\u0e49\u0e33\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/farmer-groups\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zM8 13c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" \/>\n                                <\/svg>\n                                \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/li>\n\n                <!-- \ud83d\udcf0 \u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23 -->\n                <li class=\"nav-item has-dropdown\" onclick=\"void(0)\">\n                    <a href=\"#\" class=\"nav-link\">\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\" \/>\n                        <\/svg>\n                        \u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\n                        <span class=\"dropdown-arrow\"><\/span>\n                    <\/a>\n                    <ul class=\"dropdown-menu\">\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/public-relations\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z\" \/>\n                                <\/svg>\n                                \u0e02\u0e48\u0e32\u0e27\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/activities\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z\" \/>\n                                <\/svg>\n                                \u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/li>\n\n                <!-- \ud83d\udcda \u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 -->\n                <li class=\"nav-item has-dropdown\" onclick=\"void(0)\">\n                    <a href=\"#\" class=\"nav-link\">\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72l5 2.73 5-2.73v3.72z\" \/>\n                        <\/svg>\n                        \u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\n                        <span class=\"dropdown-arrow\"><\/span>\n                    <\/a>\n                    <ul class=\"dropdown-menu\">\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/infographic\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8 13.5l2.5 3.01L14.5 12l4.5 6H5l3-4.5z\" \/>\n                                <\/svg>\n                                Infographic\n                            <\/a>\n                        <\/li>\n                        <li class=\"dropdown-item\">\n                            <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/agri-knowledge-hub\/\">\n                                <svg class=\"dd-icon\" viewBox=\"0 0 24 24\">\n                                    <path d=\"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z\" \/>\n                                <\/svg>\n                                \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e23\u0e27\u0e21\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/li>\n\n                <!-- \u2b50 \u0e02\u0e2d\u0e07\u0e14\u0e35\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 (CTA) -->\n                <li class=\"nav-item\" style=\"position:relative;\">\n                    <a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/phutthamonthon-famous\/\"\n                        class=\"nav-link nav-cta\">\n                        <span class=\"cta-shimmer\"><\/span>\n                        <svg class=\"nav-icon\" viewBox=\"0 0 24 24\">\n                            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" \/>\n                        <\/svg>\n                        \u0e02\u0e2d\u0e07\u0e14\u0e35\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25\n                        <span class=\"nav-badge\"><\/span>\n                    <\/a>\n                <\/li>\n            <\/ul>\n\n            <!-- Mobile Toggle (Label for Checkbox) -->\n            <label for=\"nav-toggle\" class=\"mobile-toggle\" aria-label=\"\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e21\u0e19\u0e39\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n            <\/label>\n        <\/div>\n\n        <!-- Floating Particles -->\n        <div class=\"nav-particles\">\n            <div class=\"p\"><\/div><div class=\"p\"><\/div><div class=\"p\"><\/div><div class=\"p\"><\/div>\n            <div class=\"p\"><\/div><div class=\"p\"><\/div><div class=\"p\"><\/div><div class=\"p\"><\/div>\n        <\/div>\n    <\/div>\n    <!-- Glowing bottom border -->\n    <div class=\"nav-glass-border\"><\/div>\n<\/nav>\n\n<!-- Minimal JS for scroll shadow effect -->\n<script>\n(function() {\n    var nav = document.getElementById('agriNav');\n    if (!nav) return;\n    var ticking = false;\n    window.addEventListener('scroll', function() {\n        if (!ticking) {\n            window.requestAnimationFrame(function() {\n                if (window.scrollY > 10) {\n                    nav.classList.add('scrolled');\n                } else {\n                    nav.classList.remove('scrolled');\n                }\n                ticking = false;\n            });\n            ticking = true;\n        }\n    });\n})();\n<\/script>\n\n\n\n<!-- \ud83d\udcda AGRICULTURAL KNOWLEDGE HUB - \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 -->\n<!-- Theme: Green, White, Orange (Agriculture) -->\n<!-- \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e0a\u0e49\u0e43\u0e19 WordPress Custom HTML Block -->\n\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&display=swap');\n\n    .agri-knowledge-hub * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .agri-knowledge-hub {\n        font-family: 'Kanit', sans-serif;\n        background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 50%, #fff8e1 100%);\n        padding: 60px 20px;\n        position: relative;\n        overflow: hidden;\n    }\n\n    \/* Decorative Background *\/\n    .agri-knowledge-hub::before {\n        content: '';\n        position: absolute;\n        width: 400px;\n        height: 400px;\n        background: radial-gradient(circle, rgba(67, 160, 71, 0.1) 0%, transparent 70%);\n        top: -150px;\n        right: -150px;\n        border-radius: 50%;\n    }\n\n    .agri-knowledge-hub::after {\n        content: '';\n        position: absolute;\n        width: 300px;\n        height: 300px;\n        background: radial-gradient(circle, rgba(245, 124, 0, 0.08) 0%, transparent 70%);\n        bottom: -100px;\n        left: -100px;\n        border-radius: 50%;\n    }\n\n    .knowledge-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        position: relative;\n        z-index: 10;\n    }\n\n    \/* Header *\/\n    .knowledge-header {\n        text-align: center;\n        margin-bottom: 45px;\n    }\n\n    .knowledge-header h2 {\n        color: #1b5e20;\n        font-size: 32px;\n        font-weight: 700;\n        margin-bottom: 12px;\n        display: inline-flex;\n        align-items: center;\n        gap: 15px;\n    }\n\n    .knowledge-header h2 svg {\n        width: 40px;\n        height: 40px;\n        fill: #43a047;\n    }\n\n    .knowledge-header p {\n        color: #558b2f;\n        font-size: 16px;\n        max-width: 600px;\n        margin: 0 auto;\n    }\n\n    \/* Category Section *\/\n    .category-section {\n        margin-bottom: 40px;\n    }\n\n    .category-header {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        margin-bottom: 20px;\n        padding-bottom: 15px;\n        border-bottom: 2px solid rgba(67, 160, 71, 0.2);\n    }\n\n    .category-icon {\n        width: 55px;\n        height: 55px;\n        border-radius: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 28px;\n        flex-shrink: 0;\n    }\n\n    .category-icon.green {\n        background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n    }\n\n    .category-icon.blue {\n        background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n    }\n\n    .category-icon.brown {\n        background: linear-gradient(135deg, #efebe9, #d7ccc8);\n    }\n\n    .category-icon.orange {\n        background: linear-gradient(135deg, #fff3e0, #ffe0b2);\n    }\n\n    .category-icon.purple {\n        background: linear-gradient(135deg, #f3e5f5, #e1bee7);\n    }\n\n    .category-icon.teal {\n        background: linear-gradient(135deg, #e0f2f1, #b2dfdb);\n    }\n\n    .category-title {\n        color: #1b5e20;\n        font-size: 22px;\n        font-weight: 600;\n    }\n\n    \/* Resource Cards Grid *\/\n    .resources-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n        gap: 20px;\n    }\n\n    @media (max-width: 768px) {\n        .resources-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    \/* Resource Card *\/\n    .resource-card {\n        background: white;\n        border-radius: 16px;\n        padding: 22px;\n        box-shadow: 0 6px 25px rgba(27, 94, 32, 0.08);\n        position: relative;\n        overflow: hidden;\n        transition: all 0.3s ease;\n        border: 1px solid rgba(200, 230, 201, 0.5);\n    }\n\n    .resource-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 35px rgba(27, 94, 32, 0.12);\n        border-color: rgba(67, 160, 71, 0.3);\n    }\n\n    .resource-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 3px;\n        background: linear-gradient(90deg, #43a047, #66bb6a);\n    }\n\n    .resource-card.accent-blue::before {\n        background: linear-gradient(90deg, #1976d2, #42a5f5);\n    }\n\n    .resource-card.accent-brown::before {\n        background: linear-gradient(90deg, #6d4c41, #8d6e63);\n    }\n\n    .resource-card.accent-orange::before {\n        background: linear-gradient(90deg, #f57c00, #ff9800);\n    }\n\n    .resource-card.accent-purple::before {\n        background: linear-gradient(90deg, #7b1fa2, #ab47bc);\n    }\n\n    .resource-card.accent-teal::before {\n        background: linear-gradient(90deg, #00897b, #26a69a);\n    }\n\n    .resource-name {\n        color: #1b5e20;\n        font-size: 17px;\n        font-weight: 600;\n        margin-bottom: 10px;\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n    }\n\n    .resource-name svg {\n        width: 22px;\n        height: 22px;\n        fill: #43a047;\n        flex-shrink: 0;\n        margin-top: 2px;\n    }\n\n    .resource-description {\n        color: #5d4037;\n        font-size: 14px;\n        line-height: 1.7;\n        margin-bottom: 15px;\n        padding-left: 32px;\n    }\n\n    .resource-link {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 10px 18px;\n        background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);\n        border-radius: 10px;\n        text-decoration: none;\n        color: #33691e;\n        font-weight: 500;\n        font-size: 13px;\n        transition: all 0.3s ease;\n        margin-left: 32px;\n    }\n\n    .resource-link:hover {\n        background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%);\n        color: #1b5e20;\n        transform: translateX(3px);\n    }\n\n    .resource-link svg {\n        width: 16px;\n        height: 16px;\n        fill: currentColor;\n    }\n\n    \/* App Badge *\/\n    .app-badge {\n        display: inline-block;\n        background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n        color: #1565c0;\n        font-size: 11px;\n        font-weight: 500;\n        padding: 3px 10px;\n        border-radius: 12px;\n        margin-left: 8px;\n        vertical-align: middle;\n    }\n\n    \/* Source Note *\/\n    .source-note {\n        text-align: center;\n        margin-top: 40px;\n        color: #7cb342;\n        font-size: 13px;\n        padding-top: 25px;\n        border-top: 1px solid rgba(139, 195, 74, 0.3);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 480px) {\n        .agri-knowledge-hub {\n            padding: 40px 15px;\n        }\n\n        .knowledge-header h2 {\n            font-size: 24px;\n        }\n\n        .category-title {\n            font-size: 18px;\n        }\n\n        .resource-card {\n            padding: 18px;\n        }\n\n        .resource-name {\n            font-size: 15px;\n        }\n\n        .resource-description {\n            font-size: 13px;\n            padding-left: 0;\n        }\n\n        .resource-link {\n            margin-left: 0;\n        }\n    }\n<\/style>\n\n<section class=\"agri-knowledge-hub\">\n    <div class=\"knowledge-container\">\n        <!-- Header -->\n        <div class=\"knowledge-header\">\n            <h2>\n                <svg viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z\" \/>\n                <\/svg>\n                \u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n            <\/h2>\n            <p>\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e17\u0e35\u0e48\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e16\u0e37\u0e2d\u0e44\u0e14\u0e49<\/p>\n        <\/div>\n\n        <!-- Category 1: \u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e1e\u0e37\u0e0a -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon green\">\ud83c\udf31<\/div>\n                <h3 class=\"category-title\">\u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e1e\u0e37\u0e0a (Plant Production)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 1.1 -->\n                <div class=\"resource-card\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z\" \/>\n                        <\/svg>\n                        \u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                    <\/div>\n                    <p class=\"resource-description\">\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e23\u0e27\u0e21 E-book \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e25\u0e39\u0e01\u0e1e\u0e37\u0e0a\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08 \u0e01\u0e32\u0e23\u0e2d\u0e32\u0e23\u0e31\u0e01\u0e02\u0e32\u0e1e\u0e37\u0e0a \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b\n                        \u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e41\u0e25\u0e30\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e15\u0e25\u0e2d\u0e14\u0e40\u0e27\u0e25\u0e32<\/p>\n                    <a href=\"https:\/\/www.doae.go.th\/\u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 1.2 -->\n                <div class=\"resource-card\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M18 4V3c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6h1v4H9v11c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-9h8V4h-3z\" \/>\n                        <\/svg>\n                        \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                    <\/div>\n                    <p class=\"resource-description\">\u0e23\u0e27\u0e21\u0e2a\u0e37\u0e48\u0e2d\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 \u0e41\u0e25\u0e30\u0e41\u0e1c\u0e48\u0e19\u0e1e\u0e31\u0e1a\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e17\u0e35\u0e48\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\n                        \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e0a\u0e23\u0e4c\u0e15\u0e48\u0e2d<\/p>\n                    <a href=\"https:\/\/esc.doae.go.th\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 1.3 -->\n                <div class=\"resource-card\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M17.2 3H6.8l-5.3 9 5.3 9h10.4l5.3-9-5.3-9zM12 17.5c-3.04 0-5.5-2.46-5.5-5.5S8.96 6.5 12 6.5s5.5 2.46 5.5 5.5-2.46 5.5-5.5 5.5z\" \/>\n                        <\/svg>\n                        \u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e02\u0e49\u0e32\u0e27 (Rice Knowledge Bank)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e02\u0e49\u0e32\u0e27 \u0e1e\u0e31\u0e19\u0e18\u0e38\u0e4c\u0e02\u0e49\u0e32\u0e27 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e32\u0e02\u0e49\u0e32\u0e27\n                        \u0e08\u0e32\u0e01\u0e01\u0e23\u0e21\u0e01\u0e32\u0e23\u0e02\u0e49\u0e32\u0e27<\/p>\n                    <a href=\"https:\/\/newwebs2.ricethailand.go.th\/webmain\/rkb3\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 1.4 -->\n                <div class=\"resource-card\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\" \/>\n                        <\/svg>\n                        \u0e04\u0e25\u0e31\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                    <\/div>\n                    <p class=\"resource-description\">\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e1b\u0e38\u0e4b\u0e22\/\u0e22\u0e32 \u0e41\u0e25\u0e30\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 GAP\/Organic<\/p>\n                    <a href=\"https:\/\/www.doa.go.th\/share\/archive\/index.php\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Category 2: \u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e21\u0e07 -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon blue\">\ud83d\udc04<\/div>\n                <h3 class=\"category-title\">\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e21\u0e07 (Livestock &#038; Fisheries)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 2.1 -->\n                <div class=\"resource-card accent-blue\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z\" \/>\n                        <\/svg>\n                        \u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e01\u0e23\u0e21\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\n                    <\/div>\n                    <p class=\"resource-description\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07\u0e2a\u0e31\u0e15\u0e27\u0e4c \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1f\u0e32\u0e23\u0e4c\u0e21 \u0e41\u0e25\u0e30\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e1f\u0e32\u0e23\u0e4c\u0e21\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c<\/p>\n                    <a href=\"https:\/\/breeding.dld.go.th\/index.php\/th\/khlang-khwam-ru\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 2.2 -->\n                <div class=\"resource-card accent-blue\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" \/>\n                        <\/svg>\n                        \u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e01\u0e23\u0e21\u0e1b\u0e23\u0e30\u0e21\u0e07\n                    <\/div>\n                    <p class=\"resource-description\">\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e32\u0e30\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e19\u0e49\u0e33 \u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e07 \u0e41\u0e25\u0e30\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e19\u0e49\u0e33<\/p>\n                    <a href=\"https:\/\/www4.fisheries.go.th\/dof\/list_link\/1\/s\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 2.3 -->\n                <div class=\"resource-card accent-blue\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5zM19 19H5V5h14v14zM6 15h12v2H6zm0-4h12v2H6zm0-4h12v2H6z\" \/>\n                        <\/svg>\n                        \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e1a\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2a\u0e31\u0e15\u0e27\u0e4c\n                    <\/div>\n                    <p class=\"resource-description\">\u0e23\u0e30\u0e1a\u0e1a e-Service \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e1a\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e41\u0e25\u0e30\u0e27\u0e31\u0e15\u0e16\u0e38\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\u0e14\u0e49\u0e32\u0e19\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\n                    <\/p>\n                    <a href=\"https:\/\/efeed.dld.go.th\/e-document\/public\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Category 3: \u0e14\u0e34\u0e19 \u0e19\u0e49\u0e33 \u0e41\u0e25\u0e30\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48 -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon brown\">\ud83d\uddfa\ufe0f<\/div>\n                <h3 class=\"category-title\">\u0e14\u0e34\u0e19 \u0e19\u0e49\u0e33 \u0e41\u0e25\u0e30\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48 (Soil, Water &#038; Maps)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 3.1 -->\n                <div class=\"resource-card accent-brown\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z\" \/>\n                        <\/svg>\n                        Agri-Map Online\n                    <\/div>\n                    <p class=\"resource-description\">\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e23\u0e38\u0e01 (Zoning)\n                        \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e21\u0e02\u0e2d\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e25\u0e39\u0e01\u0e1e\u0e37\u0e0a<\/p>\n                    <a href=\"https:\/\/agri-map-online.moac.go.th\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 3.2 -->\n                <div class=\"resource-card accent-brown\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" \/>\n                        <\/svg>\n                        \u0e01\u0e23\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e35\u0e48\u0e14\u0e34\u0e19 (\u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e14\u0e34\u0e19 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e1b\u0e38\u0e4b\u0e22\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c \u0e41\u0e25\u0e30\u0e2b\u0e0d\u0e49\u0e32\u0e41\u0e1d\u0e01<\/p>\n                    <a href=\"https:\/\/www.ldd.go.th\/hotbox\/?gp=2\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Category 4: \u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon orange\">\ud83d\udcb0<\/div>\n                <h3 class=\"category-title\">\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 (Economics &#038; Market)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 4.1 -->\n                <div class=\"resource-card accent-orange\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z\" \/>\n                        <\/svg>\n                        \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 (OAE)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e1e\u0e22\u0e32\u0e01\u0e23\u0e13\u0e4c\u0e1c\u0e25\u0e1c\u0e25\u0e34\u0e15 \u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e23\u0e32\u0e04\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23<\/p>\n                    <a href=\"https:\/\/oae.go.th\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 4.2 -->\n                <div class=\"resource-card accent-orange\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" \/>\n                        <\/svg>\n                        \u0e15\u0e25\u0e32\u0e14\u0e44\u0e17 (\u0e23\u0e32\u0e04\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e04\u0e32\u0e01\u0e25\u0e32\u0e07\u0e1c\u0e31\u0e01 \u0e1c\u0e25\u0e44\u0e21\u0e49 \u0e41\u0e25\u0e30\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2a\u0e31\u0e15\u0e27\u0e4c \u0e23\u0e32\u0e22\u0e27\u0e31\u0e19 (\u0e15\u0e25\u0e32\u0e14\u0e04\u0e49\u0e32\u0e2a\u0e48\u0e07)<\/p>\n                    <a href=\"https:\/\/talaadthai.com\/en\/products\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 4.3 -->\n                <div class=\"resource-card accent-orange\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" \/>\n                        <\/svg>\n                        \u0e15\u0e25\u0e32\u0e14\u0e2a\u0e35\u0e48\u0e21\u0e38\u0e21\u0e40\u0e21\u0e37\u0e2d\u0e07\n                    <\/div>\n                    <p class=\"resource-description\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e04\u0e32\u0e1c\u0e31\u0e01\u0e41\u0e25\u0e30\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e22\u0e2d\u0e14\u0e19\u0e34\u0e22\u0e21 \u0e23\u0e32\u0e22\u0e27\u0e31\u0e19<\/p>\n                    <a href=\"https:\/\/www.simummuangmarket.com\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 4.4 -->\n                <div class=\"resource-card accent-orange\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z\" \/>\n                        <\/svg>\n                        \u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\n                    <\/div>\n                    <p class=\"resource-description\">\u0e41\u0e1e\u0e25\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e0b\u0e37\u0e49\u0e2d\u0e02\u0e32\u0e22\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e01\u0e23\u0e14\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/p>\n                    <a href=\"https:\/\/www.\u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c.com\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Category 5: \u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon purple\">\ud83d\ude80<\/div>\n                <h3 class=\"category-title\">\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 (Innovation &#038; Tech)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 5.1 -->\n                <div class=\"resource-card accent-purple\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\" \/>\n                        <\/svg>\n                        HandySense (NECTEC)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e23\u0e30\u0e1a\u0e1a\u0e1f\u0e32\u0e23\u0e4c\u0e21\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30 (Smart Farm) \u0e41\u0e1a\u0e1a\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e15\u0e49\u0e19\u0e41\u0e1a\u0e1a (Open Source)<\/p>\n                    <a href=\"https:\/\/handysense.io\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 5.2 -->\n                <div class=\"resource-card accent-purple\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\" \/>\n                        <\/svg>\n                        KUBOTA (Agri) Solutions\n                    <\/div>\n                    <p class=\"resource-description\">\u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2a\u0e21\u0e31\u0e22\u0e43\u0e2b\u0e21\u0e48\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e31\u0e01\u0e23\u0e01\u0e25<\/p>\n                    <a href=\"https:\/\/kas.siamkubota.co.th\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 5.3 -->\n                <div class=\"resource-card accent-purple\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z\" \/>\n                        <\/svg>\n                        \u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e21.\u0e40\u0e01\u0e29\u0e15\u0e23\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c (KUKR)\n                    <\/div>\n                    <p class=\"resource-description\">\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e19\u0e34\u0e1e\u0e19\u0e18\u0e4c\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e0d\u0e48\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/p>\n                    <a href=\"http:\/\/kukr2.lib.ku.ac.th\/kukr_es\/kukr\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Category 6: \u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19 -->\n        <div class=\"category-section\">\n            <div class=\"category-header\">\n                <div class=\"category-icon teal\">\ud83d\udcf1<\/div>\n                <h3 class=\"category-title\">\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19 (Mobile Apps)<\/h3>\n            <\/div>\n            <div class=\"resources-grid\">\n                <!-- Resource 6.1 -->\n                <div class=\"resource-card accent-teal\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z\" \/>\n                        <\/svg>\n                        DOAE Farmbook\n                        <span class=\"app-badge\">\ud83d\udcf2 Mobile App<\/span>\n                    <\/div>\n                    <p class=\"resource-description\">\u0e2a\u0e21\u0e38\u0e14\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 \u0e41\u0e08\u0e49\u0e07\u0e1b\u0e25\u0e39\u0e01\/\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n                    <a href=\"https:\/\/esc.doae.go.th\/\u0e41\u0e2d\u0e1b-doae-farmbook\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e2d\u0e1b\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n\n                <!-- Resource 6.2 -->\n                <div class=\"resource-card accent-teal\">\n                    <div class=\"resource-name\">\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z\" \/>\n                        <\/svg>\n                        LDD Soil Guide\n                        <span class=\"app-badge\">\ud83d\udcf2 Mobile App<\/span>\n                    <\/div>\n                    <p class=\"resource-description\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e0a\u0e38\u0e14\u0e14\u0e34\u0e19\u0e41\u0e25\u0e30\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e1b\u0e38\u0e4b\u0e22\u0e23\u0e32\u0e22\u0e41\u0e1b\u0e25\u0e07<\/p>\n                    <a href=\"http:\/\/www1.ldd.go.th\/th-TH\/LDD-Soil-Guide\/\" target=\"_blank\" class=\"resource-link\" rel=\"noopener\">\n                        \u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e2d\u0e1b\n                        <svg viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Source Note -->\n        <p class=\"source-note\">\n            \u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e42\u0e14\u0e22 \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 | \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14: \u0e21\u0e01\u0e23\u0e32\u0e04\u0e21 2569\n        <\/p>\n    <\/div>\n<\/section>\n\n\n\n<!-- PREMIUM FOOTER - \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25 -->\n<!-- Light Theme | Pure CSS Only | WordPress Compatible -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@200;300;400;500;600;700;800&#038;display=swap\"\n    rel=\"stylesheet\">\n\n<style>\n    .ft * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        font-family: 'Kanit', sans-serif;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MAIN FOOTER (Clean & Premium)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft {\n        position: relative;\n        background: #fafcfb;\n        overflow: hidden;\n        border-top: 1px solid rgba(46, 125, 50, 0.1);\n    }\n\n    \/* Subtle mesh pattern *\/\n    .ft::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-image: radial-gradient(rgba(76, 175, 80, 0.07) 1px, transparent 1px);\n        background-size: 24px 24px;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Top accent bar - Slimmer and cleaner *\/\n    .ft-accent {\n        height: 4px;\n        background: linear-gradient(90deg, #2e7d32, #66bb6a, #ffca28, #ffb300, #ffca28, #66bb6a, #2e7d32);\n        background-size: 200% 100%;\n        animation: ftAccent 5s ease-in-out infinite alternate;\n        position: relative;\n        z-index: 2;\n    }\n\n    @keyframes ftAccent {\n        0% {\n            background-position: 0% 0;\n        }\n\n        100% {\n            background-position: 100% 0;\n        }\n    }\n\n    \/* Refined Floating orbs for soft glow *\/\n    .ft-orb {\n        position: absolute;\n        border-radius: 50%;\n        filter: blur(60px);\n        pointer-events: none;\n        z-index: 1;\n        opacity: 0.7;\n    }\n\n    .ft-orb-1 {\n        width: 350px;\n        height: 350px;\n        background: radial-gradient(circle, rgba(76, 175, 80, 0.12), transparent 70%);\n        top: -100px;\n        right: -50px;\n        animation: ftOrbMove1 12s ease-in-out infinite alternate;\n    }\n\n    .ft-orb-2 {\n        width: 300px;\n        height: 300px;\n        background: radial-gradient(circle, rgba(255, 179, 0, 0.08), transparent 70%);\n        bottom: -50px;\n        left: -50px;\n        animation: ftOrbMove2 15s ease-in-out infinite alternate;\n    }\n\n    @keyframes ftOrbMove1 {\n        0% {\n            transform: translate(0, 0) scale(1);\n        }\n\n        100% {\n            transform: translate(-30px, 40px) scale(1.1);\n        }\n    }\n\n    @keyframes ftOrbMove2 {\n        0% {\n            transform: translate(0, 0) scale(1);\n        }\n\n        100% {\n            transform: translate(40px, -30px) scale(1.05);\n        }\n    }\n\n    \/* Glassmorphism wrapper for content to sit on *\/\n    .ft-glass-wrapper {\n        position: relative;\n        z-index: 10;\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CONTENT GRID\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-content {\n        max-width: 1240px;\n        margin: 0 auto;\n        padding: 60px 30px 50px;\n        display: grid;\n        grid-template-columns: 1.4fr 1fr 1fr 1fr;\n        gap: 40px;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       ABOUT COLUMN\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-about {\n        display: flex;\n        flex-direction: column;\n        gap: 18px;\n    }\n\n    .ft-brand {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n    }\n\n    \/* Premium Logo Container *\/\n    .ft-logo {\n        width: 52px;\n        height: 52px;\n        background: linear-gradient(135deg, #ffffff, #f1f8e9);\n        border: 1px solid rgba(76, 175, 80, 0.3);\n        border-radius: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 8px 20px rgba(46, 125, 50, 0.08);\n        flex-shrink: 0;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .ft-logo::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 50%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);\n        animation: ftLogoShine 4s infinite 2s;\n    }\n\n    @keyframes ftLogoShine {\n        0% {\n            left: -100%;\n        }\n\n        20% {\n            left: 200%;\n        }\n\n        100% {\n            left: 200%;\n        }\n    }\n\n    .ft-logo-emoji {\n        font-size: 26px;\n        display: block;\n        transform: translateY(2px);\n    }\n\n    .ft-brand-text h3 {\n        color: #1b5e20;\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1.2;\n        letter-spacing: -0.3px;\n    }\n\n    .ft-brand-text span {\n        color: #689f38;\n        font-size: 12px;\n        font-weight: 500;\n        letter-spacing: 0.5px;\n    }\n\n    .ft-desc {\n        color: #555;\n        font-size: 14px;\n        line-height: 1.8;\n        font-weight: 300;\n    }\n\n    \/* Social - Minimalist *\/\n    .ft-social {\n        display: flex;\n        gap: 12px;\n        margin-top: 5px;\n    }\n\n    .ft-soc {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: #ffffff;\n        border: 1px solid rgba(46, 125, 50, 0.15);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-decoration: none;\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);\n    }\n\n    .ft-soc:hover {\n        transform: translateY(-5px);\n        background: #f1f8e9;\n        border-color: rgba(76, 175, 80, 0.4);\n        box-shadow: 0 8px 15px rgba(46, 125, 50, 0.1);\n    }\n\n    .ft-soc-emoji {\n        font-size: 18px;\n        opacity: 0.8;\n        transition: opacity 0.3s;\n    }\n\n    .ft-soc:hover .ft-soc-emoji {\n        opacity: 1;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION HEADERS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-col h4 {\n        color: #2e3a28;\n        font-size: 16px;\n        font-weight: 700;\n        margin-bottom: 22px;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        position: relative;\n    }\n\n    .ft-col h4::after {\n        content: '';\n        position: absolute;\n        bottom: -8px;\n        left: 0;\n        width: 30px;\n        height: 2px;\n        background: linear-gradient(90deg, #43a047, #ff9800);\n        border-radius: 2px;\n        transition: width 0.3s ease;\n    }\n\n    .ft-col:hover h4::after {\n        width: 45px;\n    }\n\n    .ft-h4-emoji {\n        font-size: 18px;\n        padding: 6px;\n        background: rgba(76, 175, 80, 0.1);\n        border-radius: 8px;\n        display: inline-flex;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       QUICK LINKS - Clean underlines\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-links {\n        list-style: none;\n    }\n\n    .ft-links li {\n        margin-bottom: 12px;\n    }\n\n    .ft-links a {\n        color: #555;\n        text-decoration: none;\n        font-size: 14px;\n        font-weight: 400;\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.3s ease;\n        position: relative;\n    }\n\n    .ft-links a::before {\n        content: '';\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: #a5d6a7;\n        margin-right: 10px;\n        transition: all 0.3s ease;\n    }\n\n    .ft-links a:hover {\n        color: #1b5e20;\n        transform: translateX(5px);\n    }\n\n    .ft-links a:hover::before {\n        background: #ffb300;\n        transform: scale(1.5);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       RELATED LINKS - Premium Glass Cards\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-related {\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n    }\n\n    .ft-related a {\n        color: #444;\n        text-decoration: none;\n        font-size: 13.5px;\n        font-weight: 500;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 10px 14px;\n        border-radius: 12px;\n        background: rgba(255, 255, 255, 0.8);\n        border: 1px solid rgba(76, 175, 80, 0.15);\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\n    }\n\n    .ft-related a:hover {\n        background: #ffffff;\n        border-color: rgba(76, 175, 80, 0.3);\n        color: #1b5e20;\n        transform: translateY(-2px);\n        box-shadow: 0 6px 15px rgba(46, 125, 50, 0.08);\n    }\n\n    .ft-related-emoji {\n        font-size: 18px;\n        width: 28px;\n        height: 28px;\n        background: rgba(245, 245, 245, 0.8);\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: transform 0.3s;\n    }\n\n    .ft-related a:hover .ft-related-emoji {\n        transform: scale(1.1) rotate(5deg);\n        background: rgba(241, 248, 233, 1);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       BOTTOM BAR\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .ft-bottom {\n        border-top: 1px solid rgba(46, 125, 50, 0.1);\n        padding: 24px 20px;\n        text-align: center;\n        position: relative;\n        z-index: 10;\n        background: rgba(255, 255, 255, 0.3);\n    }\n\n    .ft-bottom p {\n        font-size: 13px;\n        color: #777;\n        font-weight: 300;\n        letter-spacing: 0.3px;\n    }\n\n    .ft-bottom .ft-hl {\n        color: #2e7d32;\n        font-weight: 500;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       RESPONSIVE\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media (max-width: 1024px) {\n        .ft-content {\n            grid-template-columns: 1fr 1fr;\n            gap: 40px;\n            padding: 50px 25px 40px;\n        }\n    }\n\n    @media (max-width: 600px) {\n        .ft-content {\n            grid-template-columns: 1fr;\n            text-align: center;\n            gap: 35px;\n            padding: 40px 20px 30px;\n        }\n\n        .ft-brand {\n            justify-content: center;\n        }\n\n        .ft-social {\n            justify-content: center;\n        }\n\n        .ft-col h4 {\n            justify-content: center;\n        }\n\n        .ft-col h4::after {\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        .ft-links a {\n            justify-content: center;\n        }\n\n        .ft-links a::before {\n            display: none;\n        }\n\n        .ft-related a {\n            justify-content: center;\n        }\n\n        .ft-bottom {\n            padding: 20px 15px;\n        }\n\n        .ft-bottom p {\n            font-size: 12px;\n            line-height: 1.6;\n        }\n    }\n<\/style>\n\n<footer class=\"ft\">\n    <!-- Top accent -->\n    <div class=\"ft-accent\"><\/div>\n\n    <!-- BG decorations -->\n    <div class=\"ft-orb ft-orb-1\"><\/div>\n    <div class=\"ft-orb ft-orb-2\"><\/div>\n\n    <div class=\"ft-glass-wrapper\">\n        <div class=\"ft-content\">\n            <!-- About -->\n            <div class=\"ft-about\">\n                <div class=\"ft-brand\">\n                    <div class=\"ft-logo\">\n                        <span class=\"ft-logo-emoji\">\ud83c\udf3f<\/span>\n                    <\/div>\n                    <div class=\"ft-brand-text\">\n                        <h3>\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23<br>\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25<\/h3>\n                        <span>\u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23<\/span>\n                    <\/div>\n                <\/div>\n                <p class=\"ft-desc\">\n                    \u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23 \u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23<br>\n                    \u0e41\u0e25\u0e30\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\n                <\/p>\n                <div class=\"ft-social\">\n                    <a class=\"ft-soc fb\" title=\"Facebook\">\n                        <span class=\"ft-soc-emoji\">\ud83d\udcd8<\/span>\n                    <\/a>\n                    <a class=\"ft-soc ln\" title=\"Line\">\n                        <span class=\"ft-soc-emoji\">\ud83d\udc9a<\/span>\n                    <\/a>\n                    <a class=\"ft-soc yt\" title=\"YouTube\">\n                        <span class=\"ft-soc-emoji\">\ud83d\udcfa<\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Quick Links -->\n            <div class=\"ft-col\">\n                <h4><span class=\"ft-h4-emoji\">\ud83d\udd17<\/span> \u0e25\u0e34\u0e07\u0e01\u0e4c\u0e14\u0e48\u0e27\u0e19<\/h4>\n                <ul class=\"ft-links\">\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/vision\/\">\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c &#038; \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/structure\/\">\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/staff\/\">\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/public-relations\/\">\u0e02\u0e48\u0e32\u0e27\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/a>\n                    <\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/activities\/\">\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/a><\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Data & Knowledge -->\n            <div class=\"ft-col\">\n                <h4><span class=\"ft-h4-emoji\">\ud83d\udcda<\/span> \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 &#038; \u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49<\/h4>\n                <ul class=\"ft-links\">\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/farmer-information\/\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23<\/a>\n                    <\/li>\n                    <li><a\n                            href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/land-use-data\/\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c<\/a>\n                    <\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/soil-information\/\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e34\u0e19<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/water-sources\/\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e19\u0e49\u0e33<\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/infographic\/\">Infographic<\/a><\/li>\n                    <li><a\n                            href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/agri-knowledge-hub\/\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e23\u0e27\u0e21\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23<\/a>\n                    <\/li>\n                    <li><a\n                            href=\"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/phutthamonthon-famous\/\">\u0e02\u0e2d\u0e07\u0e14\u0e35\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25<\/a>\n                    <\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Related Sites -->\n            <div class=\"ft-col\">\n                <h4><span class=\"ft-h4-emoji\">\ud83c\udf10<\/span> \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/h4>\n                <ul class=\"ft-related\">\n                    <li><a href=\"https:\/\/www.doae.go.th\" target=\"_blank\">\n                            <span class=\"ft-related-emoji\">\ud83c\udf3e<\/span> \u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                        <\/a><\/li>\n                    <li><a href=\"https:\/\/www.moac.go.th\" target=\"_blank\">\n                            <span class=\"ft-related-emoji\">\ud83c\udfdb\ufe0f<\/span> \u0e01\u0e23\u0e30\u0e17\u0e23\u0e27\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2f\n                        <\/a><\/li>\n                    <li><a href=\"https:\/\/www.nakhonpathom.go.th\" target=\"_blank\">\n                            <span class=\"ft-related-emoji\">\ud83d\udccd<\/span> \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21\n                        <\/a><\/li>\n                    <li><a href=\"https:\/\/nakhonpathom.doae.go.th\" target=\"_blank\">\n                            <span class=\"ft-related-emoji\">\ud83c\udfe2<\/span> \u0e2a\u0e19\u0e07.\u0e40\u0e01\u0e29\u0e15\u0e23\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21\n                        <\/a><\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n\n        <!-- Bottom -->\n        <div class=\"ft-bottom\">\n            <p>\u00a9 2026 <span class=\"ft-hl\">\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e17\u0e18\u0e21\u0e13\u0e11\u0e25<\/span> \u00b7 \u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u00b7\n                \u0e01\u0e23\u0e30\u0e17\u0e23\u0e27\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e2b\u0e01\u0e23\u0e13\u0e4c<\/p>\n        <\/div>\n    <\/div>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e17\u0e35\u0e48\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e16\u0e37\u0e2d\u0e44\u0e14\u0e49 \ud83c\udf31 \u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e1e\u0e37\u0e0a (Plant Production) \u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e01\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e41\u0e2b\u0e25\u0e48\u0e07\u0e23\u0e27\u0e21 E-book \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e25\u0e39\u0e01\u0e1e\u0e37\u0e0a\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08 \u0e01\u0e32\u0e23\u0e2d\u0e32\u0e23\u0e31\u0e01\u0e02\u0e32\u0e1e\u0e37\u0e0a \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b \u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e41\u0e25\u0e30\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e15\u0e25\u0e2d\u0e14\u0e40\u0e27\u0e25\u0e32 \u0e40\u0e02\u0e49\u0e32\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e23\u0e27\u0e21\u0e2a\u0e37\u0e48\u0e2d\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 \u0e41\u0e25\u0e30\u0e41\u0e1c\u0e48\u0e19\u0e1e\u0e31\u0e1a\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e17\u0e35\u0e48\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e0a\u0e23\u0e4c\u0e15\u0e48\u0e2d [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-gutentor-canvas.php","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-465","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":1,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/465\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/465\/revisions\/466"}],"wp:attachment":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/media?parent=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}