{"id":53,"date":"2026-01-13T23:52:27","date_gmt":"2026-01-13T16:52:27","guid":{"rendered":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/?page_id=53"},"modified":"2026-01-19T15:22:53","modified_gmt":"2026-01-19T08:22:53","slug":"vision","status":"publish","type":"page","link":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/vision\/","title":{"rendered":"\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c &#038; \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08"},"content":{"rendered":"\n<!-- \ud83d\udd25 ULTRA PREMIUM HEADER - \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) | Premium Glassmorphism + Particles -->\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;900&#038;display=swap\"\n    rel=\"stylesheet\">\n\n<style>\n    .agri-header-wrapper * {\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TOP BAR - Animated Gradient + Shimmer + Marquee\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-top-bar {\n        background: linear-gradient(135deg, #0d3b0e, #1b5e20, #2e7d32, #1b5e20, #0d3b0e);\n        background-size: 300% 300%;\n        animation: gradientFlow 6s ease infinite;\n        color: white;\n        text-align: center;\n        padding: 8px 20px;\n        position: relative;\n        overflow: hidden;\n        border-bottom: 2px solid rgba(255, 193, 7, 0.4);\n    }\n\n    .agri-top-bar::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 60%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), rgba(255, 255, 255, 0.2), rgba(255, 215, 0, 0.15), transparent);\n        animation: shimmerGold 4s ease-in-out infinite;\n    }\n\n    .agri-top-bar::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        background: linear-gradient(90deg, transparent, #ffd700, #ff8f00, #ffd700, transparent);\n        animation: glowLine 3s ease infinite;\n    }\n\n    .top-bar-content {\n        position: relative;\n        z-index: 2;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 15px;\n        flex-wrap: wrap;\n    }\n\n    .top-bar-icon {\n        font-size: 16px;\n        animation: pulse 2s ease-in-out infinite;\n    }\n\n    .top-bar-dept {\n        font-size: 14px;\n        font-weight: 600;\n        letter-spacing: 2px;\n        text-transform: uppercase;\n        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n    }\n\n    .top-bar-sep {\n        opacity: 0.3;\n        font-weight: 100;\n        font-size: 18px;\n    }\n\n    .top-bar-dept-en {\n        font-size: 12px;\n        font-weight: 300;\n        opacity: 0.85;\n        letter-spacing: 1.5px;\n        text-transform: uppercase;\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       MAIN HEADER - Background + Particles + Glassmorphism\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-main-header {\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: top center;\n        background-attachment: fixed;\n        padding: 50px 20px 90px;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n        min-height: 380px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    \/* Dark overlay for contrast *\/\n    .agri-main-header::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg,\n                rgba(0, 0, 0, 0.1) 0%,\n                rgba(0, 0, 0, 0.05) 40%,\n                rgba(27, 94, 32, 0.15) 100%);\n        z-index: 1;\n    }\n\n    \/* Particle Canvas Layer *\/\n    .agri-particles {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        pointer-events: none;\n    }\n\n    \/* Floating orbs decoration *\/\n    .agri-orb {\n        position: absolute;\n        border-radius: 50%;\n        filter: blur(40px);\n        opacity: 0.12;\n        z-index: 2;\n        animation: orbFloat 8s ease-in-out infinite;\n    }\n\n    .agri-orb-1 {\n        width: 350px;\n        height: 350px;\n        background: radial-gradient(circle, #4caf50, transparent);\n        top: -120px;\n        left: -80px;\n    }\n\n    .agri-orb-2 {\n        width: 250px;\n        height: 250px;\n        background: radial-gradient(circle, #ff9800, transparent);\n        bottom: -80px;\n        right: -60px;\n        animation-delay: -4s;\n    }\n\n    .agri-orb-3 {\n        width: 200px;\n        height: 200px;\n        background: radial-gradient(circle, #ffd700, transparent);\n        top: 50%;\n        left: 70%;\n        animation-delay: -2s;\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       HEADER CONTENT CARD - Premium Glassmorphism\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-header-content {\n        position: relative;\n        z-index: 10;\n        background: rgba(255, 255, 255, 0.65);\n        backdrop-filter: blur(20px) saturate(180%);\n        -webkit-backdrop-filter: blur(20px) saturate(180%);\n        padding: 35px 50px 30px;\n        border-radius: 24px;\n        display: inline-block;\n        box-shadow:\n            0 8px 32px rgba(0, 0, 0, 0.12),\n            0 2px 10px rgba(46, 125, 50, 0.08),\n            inset 0 1px 0 rgba(255, 255, 255, 0.6);\n        border: 1px solid rgba(255, 255, 255, 0.5);\n        animation: cardEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        opacity: 0;\n        max-width: 700px;\n    }\n\n    \/* Glowing border effect on hover *\/\n    .agri-header-content::before {\n        content: '';\n        position: absolute;\n        inset: -2px;\n        border-radius: 26px;\n        background: linear-gradient(135deg, rgba(46, 125, 50, 0.3), rgba(255, 193, 7, 0.3), rgba(46, 125, 50, 0.3));\n        background-size: 200% 200%;\n        z-index: -1;\n        opacity: 0;\n        transition: opacity 0.5s ease;\n        animation: borderGlow 4s ease infinite;\n    }\n\n    .agri-header-content:hover::before {\n        opacity: 1;\n    }\n\n    \/* Shine sweep effect *\/\n    .agri-header-content::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.15), transparent);\n        border-radius: 24px;\n        animation: shineSweep 6s ease-in-out infinite 2s;\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       DUAL LOGO - 3D Hover + Glow 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    .agri-logo-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 24px;\n        margin-bottom: 18px;\n    }\n\n    .agri-logo-wrapper {\n        position: relative;\n        perspective: 800px;\n    }\n\n    .agri-logo-img {\n        width: 100px;\n        height: 100px;\n        object-fit: contain;\n        filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.12));\n        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        opacity: 0;\n    }\n\n    .agri-logo-img.left {\n        animation-delay: 0.3s;\n    }\n\n    .agri-logo-img.right {\n        animation-delay: 0.5s;\n    }\n\n    .agri-logo-wrapper:hover .agri-logo-img {\n        transform: rotateY(10deg) scale(1.15);\n        filter: drop-shadow(0 10px 25px rgba(46, 125, 50, 0.35));\n    }\n\n    \/* Glow ring around logo *\/\n    .agri-logo-ring {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 115px;\n        height: 115px;\n        border-radius: 50%;\n        border: 2px solid transparent;\n        background: conic-gradient(from 0deg, transparent, rgba(46, 125, 50, 0.4), transparent, rgba(255, 193, 7, 0.4), transparent) border-box;\n        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n        -webkit-mask-composite: xor;\n        mask-composite: exclude;\n        animation: ringRotate 6s linear infinite;\n        opacity: 0;\n        transition: opacity 0.4s ease;\n    }\n\n    .agri-logo-wrapper:hover .agri-logo-ring {\n        opacity: 1;\n    }\n\n    \/* Logo divider *\/\n    .logo-divider {\n        width: 2px;\n        height: 65px;\n        position: relative;\n        overflow: hidden;\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;\n        opacity: 0;\n    }\n\n    .logo-divider::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, transparent, #43a047, #ffc107, #43a047, transparent);\n    }\n\n    .logo-divider::after {\n        content: '';\n        position: absolute;\n        top: -100%;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9), transparent);\n        animation: dividerGlow 2.5s ease-in-out infinite;\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       TITLE - Gradient Text + 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    .agri-main-title {\n        font-size: 36px;\n        font-weight: 800;\n        line-height: 1.3;\n        margin-bottom: 6px;\n        background: linear-gradient(135deg, #1b5e20, #2e7d32, #388e3c, #43a047);\n        background-size: 200% 200%;\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards, titleGradient 4s ease infinite 1.6s;\n        opacity: 0;\n        text-shadow: none;\n        position: relative;\n    }\n\n    .agri-main-title::after {\n        content: '\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        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #1b5e20, #2e7d32, #388e3c, #43a047);\n        background-size: 200% 200%;\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        filter: blur(12px);\n        opacity: 0.3;\n        z-index: -1;\n        animation: titleGradient 4s ease infinite;\n    }\n\n    .agri-subtitle {\n        color: #2e7d32;\n        font-size: 17px;\n        font-weight: 400;\n        letter-spacing: 3px;\n        text-transform: uppercase;\n        margin-bottom: 10px;\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;\n        opacity: 0;\n    }\n\n    .agri-province {\n        display: inline-flex;\n        align-items: center;\n        gap: 14px;\n        color: #558b2f;\n        font-size: 15px;\n        font-weight: 400;\n        letter-spacing: 2px;\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;\n        opacity: 0;\n    }\n\n    .agri-province .line {\n        width: 50px;\n        height: 2px;\n        background: linear-gradient(90deg, transparent, #43a047, #ffc107, #43a047, transparent);\n        border-radius: 2px;\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       BADGE STRIP - Quick Info with Icons\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-badge-strip {\n        display: flex;\n        justify-content: center;\n        gap: 12px;\n        margin-top: 18px;\n        flex-wrap: wrap;\n        animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;\n        opacity: 0;\n    }\n\n    .agri-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        padding: 5px 14px;\n        border-radius: 30px;\n        font-size: 12px;\n        font-weight: 500;\n        letter-spacing: 0.5px;\n        transition: all 0.3s ease;\n        cursor: default;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .agri-badge::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: 30px;\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n\n    .agri-badge:hover {\n        transform: translateY(-2px);\n    }\n\n    .agri-badge.green {\n        background: rgba(46, 125, 50, 0.12);\n        color: #1b5e20;\n        border: 1px solid rgba(46, 125, 50, 0.2);\n    }\n\n    .agri-badge.green:hover {\n        background: rgba(46, 125, 50, 0.2);\n        box-shadow: 0 4px 15px rgba(46, 125, 50, 0.15);\n    }\n\n    .agri-badge.orange {\n        background: rgba(255, 152, 0, 0.12);\n        color: #e65100;\n        border: 1px solid rgba(255, 152, 0, 0.2);\n    }\n\n    .agri-badge.orange:hover {\n        background: rgba(255, 152, 0, 0.2);\n        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.15);\n    }\n\n    .agri-badge.gold {\n        background: rgba(255, 193, 7, 0.12);\n        color: #f57f17;\n        border: 1px solid rgba(255, 193, 7, 0.2);\n    }\n\n    .agri-badge.gold:hover {\n        background: rgba(255, 193, 7, 0.2);\n        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.15);\n    }\n\n    .badge-icon {\n        font-size: 14px;\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       MULTI-LAYER WAVE SEPARATOR\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-waves {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 60px;\n        z-index: 5;\n    }\n\n    .agri-wave-layer {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 200%;\n        height: 100%;\n    }\n\n    .agri-wave-layer.wave-1 {\n        opacity: 0.3;\n        animation: waveSlide 8s linear infinite;\n    }\n\n    .agri-wave-layer.wave-2 {\n        opacity: 0.5;\n        animation: waveSlide 6s linear infinite reverse;\n    }\n\n    .agri-wave-layer.wave-3 {\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       ALL ANIMATIONS\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    @keyframes gradientFlow {\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    @keyframes shimmerGold {\n        0% {\n            left: -100%;\n        }\n\n        100% {\n            left: 200%;\n        }\n    }\n\n    @keyframes glowLine {\n\n        0%,\n        100% {\n            opacity: 0.5;\n        }\n\n        50% {\n            opacity: 1;\n        }\n    }\n\n    @keyframes pulse {\n\n        0%,\n        100% {\n            transform: scale(1);\n        }\n\n        50% {\n            transform: scale(1.15);\n        }\n    }\n\n    @keyframes orbFloat {\n\n        0%,\n        100% {\n            transform: translateY(0) scale(1);\n        }\n\n        33% {\n            transform: translateY(-25px) scale(1.05);\n        }\n\n        66% {\n            transform: translateY(15px) scale(0.95);\n        }\n    }\n\n    @keyframes cardEntrance {\n        from {\n            opacity: 0;\n            transform: translateY(40px) scale(0.95);\n            filter: blur(5px);\n        }\n\n        to {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n            filter: blur(0);\n        }\n    }\n\n    @keyframes logoEntry {\n        from {\n            opacity: 0;\n            transform: translateY(30px);\n        }\n\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    @keyframes ringRotate {\n        from {\n            transform: translate(-50%, -50%) rotate(0deg);\n        }\n\n        to {\n            transform: translate(-50%, -50%) rotate(360deg);\n        }\n    }\n\n    @keyframes dividerGlow {\n        0% {\n            top: -100%;\n        }\n\n        50% {\n            top: 100%;\n        }\n\n        100% {\n            top: 100%;\n        }\n    }\n\n    @keyframes shineSweep {\n        0% {\n            left: -100%;\n        }\n\n        30% {\n            left: 150%;\n        }\n\n        100% {\n            left: 150%;\n        }\n    }\n\n    @keyframes borderGlow {\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    @keyframes titleGradient {\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    @keyframes waveSlide {\n        0% {\n            transform: translateX(0);\n        }\n\n        100% {\n            transform: translateX(-50%);\n        }\n    }\n\n    @keyframes sparkle {\n\n        0%,\n        100% {\n            opacity: 0;\n            transform: scale(0);\n        }\n\n        50% {\n            opacity: 1;\n            transform: scale(1);\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       RESPONSIVE DESIGN\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: 768px) {\n        .agri-main-header {\n            padding: 35px 15px 70px;\n            min-height: 300px;\n        }\n\n        .agri-header-content {\n            padding: 25px 20px 20px;\n            border-radius: 18px;\n        }\n\n        .agri-logo-container {\n            gap: 14px;\n        }\n\n        .agri-logo-img {\n            width: 70px;\n            height: 70px;\n        }\n\n        .agri-logo-ring {\n            width: 85px;\n            height: 85px;\n        }\n\n        .logo-divider {\n            height: 45px;\n        }\n\n        .agri-main-title {\n            font-size: 22px;\n        }\n\n        .agri-main-title::after {\n            display: none;\n        }\n\n        .agri-subtitle {\n            font-size: 13px;\n            letter-spacing: 1.5px;\n        }\n\n        .agri-province .line {\n            width: 25px;\n        }\n\n        .agri-province {\n            font-size: 13px;\n        }\n\n        .top-bar-dept {\n            font-size: 12px;\n            letter-spacing: 1px;\n        }\n\n        .top-bar-dept-en {\n            font-size: 10px;\n        }\n\n        .agri-badge-strip {\n            gap: 8px;\n        }\n\n        .agri-badge {\n            font-size: 11px;\n            padding: 4px 10px;\n        }\n\n        .agri-waves {\n            height: 35px;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .agri-main-title {\n            font-size: 19px;\n        }\n\n        .agri-logo-img {\n            width: 60px;\n            height: 60px;\n        }\n\n        .agri-header-content {\n            padding: 20px 15px 18px;\n        }\n\n        .agri-badge-strip {\n            flex-direction: column;\n            align-items: center;\n        }\n    }\n<\/style>\n\n<div class=\"agri-header-wrapper\">\n    <!-- \u2550\u2550\u2550 Top Bar \u2550\u2550\u2550 -->\n    <div class=\"agri-top-bar\">\n        <div class=\"top-bar-content\">\n            <span class=\"top-bar-icon\">\ud83c\udf3e<\/span>\n            <span class=\"top-bar-dept\">\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\">\u2502<\/span>\n            <span class=\"top-bar-dept-en\">Department of Agricultural Extension<\/span>\n            <span class=\"top-bar-icon\">\ud83c\udf3e<\/span>\n        <\/div>\n    <\/div>\n\n    <!-- \u2550\u2550\u2550 Main Header \u2550\u2550\u2550 -->\n    <div class=\"agri-main-header\">\n        <!-- Floating orbs -->\n        <div class=\"agri-orb agri-orb-1\"><\/div>\n        <div class=\"agri-orb agri-orb-2\"><\/div>\n        <div class=\"agri-orb agri-orb-3\"><\/div>\n\n        <!-- Particle Canvas -->\n        <canvas class=\"agri-particles\" id=\"agriParticles\"><\/canvas>\n\n        <!-- Content Card -->\n        <div class=\"agri-header-content\">\n            <!-- Dual Logos -->\n            <div class=\"agri-logo-container\">\n                <div class=\"agri-logo-wrapper\">\n                    <div class=\"agri-logo-ring\"><\/div>\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 left\">\n                <\/div>\n                <div class=\"logo-divider\"><\/div>\n                <div class=\"agri-logo-wrapper\">\n                    <div class=\"agri-logo-ring\"><\/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\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\" class=\"agri-logo-img right\">\n                <\/div>\n            <\/div>\n\n            <!-- Title -->\n            <h1 class=\"agri-main-title\">\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\">Phutthamonthon District Agricultural Office<\/p>\n            <p class=\"agri-province\">\n                <span class=\"line\"><\/span>\n                \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21\n                <span class=\"line\"><\/span>\n            <\/p>\n\n            <!-- Info Badges -->\n            <div class=\"agri-badge-strip\">\n                <span class=\"agri-badge green\">\n                    <span class=\"badge-icon\">\ud83c\udf31<\/span> \u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                <\/span>\n                <span class=\"agri-badge orange\">\n                    <span class=\"badge-icon\">\ud83e\uddd1\u200d\ud83c\udf3e<\/span> \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\n                <\/span>\n                <span class=\"agri-badge gold\">\n                    <span class=\"badge-icon\">\ud83d\udccb<\/span> \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\n                <\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Multi-layer waves -->\n        <div class=\"agri-waves\">\n            <svg class=\"agri-wave-layer wave-1\" viewBox=\"0 0 2880 60\" preserveAspectRatio=\"none\">\n                <path fill=\"#2e7d32\" d=\"M0,30 C480,60 960,0 1440,30 C1920,60 2400,0 2880,30 L2880,60 L0,60 Z\" \/>\n            <\/svg>\n            <svg class=\"agri-wave-layer wave-2\" viewBox=\"0 0 2880 60\" preserveAspectRatio=\"none\">\n                <path fill=\"#43a047\"\n                    d=\"M0,35 C360,55 720,15 1080,35 C1440,55 1800,15 2160,35 C2520,55 2880,15 2880,35 L2880,60 L0,60 Z\" \/>\n            <\/svg>\n            <svg class=\"agri-wave-layer wave-3\" viewBox=\"0 0 1440 60\" preserveAspectRatio=\"none\">\n                <path fill=\"#ffffff\" d=\"M0,40 C240,55 480,20 720,40 C960,55 1200,25 1440,40 L1440,60 L0,60 Z\" \/>\n            <\/svg>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 Particle Animation Script \u2550\u2550\u2550 -->\n<script>\n    (function () {\n        const canvas = document.getElementById('agriParticles');\n        if (!canvas) return;\n        const ctx = canvas.getContext('2d');\n\n        function resize() {\n            const parent = canvas.parentElement;\n            canvas.width = parent.offsetWidth;\n            canvas.height = parent.offsetHeight;\n        }\n        resize();\n        window.addEventListener('resize', resize);\n\n        const particles = [];\n        const PARTICLE_COUNT = 40;\n        const COLORS = ['rgba(76,175,80,', 'rgba(255,193,7,', 'rgba(255,152,0,', 'rgba(139,195,74,'];\n\n        for (let i = 0; i < PARTICLE_COUNT; i++) {\n            particles.push({\n                x: Math.random() * canvas.width,\n                y: Math.random() * canvas.height,\n                size: Math.random() * 3 + 1,\n                speedX: (Math.random() - 0.5) * 0.4,\n                speedY: (Math.random() - 0.5) * 0.3 - 0.15,\n                color: COLORS[Math.floor(Math.random() * COLORS.length)],\n                alpha: Math.random() * 0.4 + 0.1,\n                alphaDir: Math.random() > 0.5 ? 0.005 : -0.005,\n            });\n        }\n\n        function draw() {\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n            particles.forEach(p => {\n                \/\/ Update alpha (twinkle)\n                p.alpha += p.alphaDir;\n                if (p.alpha > 0.5 || p.alpha < 0.05) p.alphaDir *= -1;\n\n                \/\/ Move\n                p.x += p.speedX;\n                p.y += p.speedY;\n\n                \/\/ Wrap\n                if (p.x < 0) p.x = canvas.width;\n                if (p.x > canvas.width) p.x = 0;\n                if (p.y < 0) p.y = canvas.height;\n                if (p.y > canvas.height) p.y = 0;\n\n                \/\/ Draw glow\n                ctx.beginPath();\n                ctx.arc(p.x, p.y, p.size * 2, 0, Math.PI * 2);\n                ctx.fillStyle = p.color + (p.alpha * 0.3) + ')';\n                ctx.fill();\n\n                \/\/ Draw core\n                ctx.beginPath();\n                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n                ctx.fillStyle = p.color + p.alpha + ')';\n                ctx.fill();\n            });\n\n            \/\/ Draw connection lines between nearby particles\n            for (let i = 0; i < particles.length; i++) {\n                for (let j = i + 1; j < particles.length; j++) {\n                    const dx = particles[i].x - particles[j].x;\n                    const dy = particles[i].y - particles[j].y;\n                    const dist = Math.sqrt(dx * dx + dy * dy);\n                    if (dist < 120) {\n                        ctx.beginPath();\n                        ctx.moveTo(particles[i].x, particles[i].y);\n                        ctx.lineTo(particles[j].x, particles[j].y);\n                        ctx.strokeStyle = 'rgba(76,175,80,' + (0.06 * (1 - dist \/ 120)) + ')';\n                        ctx.lineWidth = 0.5;\n                        ctx.stroke();\n                    }\n                }\n            }\n\n            requestAnimationFrame(draw);\n        }\n\n        draw();\n    })();\n<\/script>\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 & \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<!-- \ud83c\udfaf VISION & MISSION PAGE - \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\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap');\n\n    .vision-section * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        font-family: 'Prompt', sans-serif;\n    }\n\n    .vision-section {\n        background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);\n        padding: 60px 20px;\n        position: relative;\n        overflow: hidden;\n        min-height: 100vh;\n    }\n\n    .vision-section::before {\n        content: '';\n        position: absolute;\n        width: 600px;\n        height: 600px;\n        background: radial-gradient(circle, rgba(46, 125, 50, 0.1) 0%, transparent 70%);\n        top: -200px;\n        right: -200px;\n        border-radius: 50%;\n    }\n\n    .vision-section::after {\n        content: '';\n        position: absolute;\n        width: 400px;\n        height: 400px;\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    .vision-container {\n        max-width: 1000px;\n        margin: 0 auto;\n        position: relative;\n        z-index: 10;\n    }\n\n    .page-title {\n        text-align: center;\n        margin-bottom: 50px;\n        animation: fadeInUp 0.8s ease-out;\n    }\n\n    .page-title h2 {\n        font-size: 40px;\n        font-weight: 700;\n        background: linear-gradient(135deg, #1b5e20, #2e7d32, #43a047);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        margin-bottom: 10px;\n    }\n\n    .page-title p {\n        color: #558b2f;\n        font-size: 18px;\n    }\n\n    \/* Vision Card - Hero Style *\/\n    .vision-card {\n        background: linear-gradient(135deg, #1b5e20, #2e7d32);\n        border-radius: 24px;\n        padding: 50px;\n        margin-bottom: 30px;\n        text-align: center;\n        box-shadow: 0 20px 60px rgba(27, 94, 32, 0.3);\n        animation: fadeInUp 0.8s ease-out 0.2s backwards;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .vision-card::before {\n        content: '';\n        position: absolute;\n        width: 300px;\n        height: 300px;\n        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\n        top: -100px;\n        right: -100px;\n        border-radius: 50%;\n    }\n\n    .vision-card::after {\n        content: '';\n        position: absolute;\n        width: 200px;\n        height: 200px;\n        background: radial-gradient(circle, rgba(245, 124, 0, 0.15) 0%, transparent 70%);\n        bottom: -50px;\n        left: 10%;\n        border-radius: 50%;\n    }\n\n    .vision-icon {\n        width: 80px;\n        height: 80px;\n        background: linear-gradient(135deg, #f57c00, #ff9800);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0 auto 25px;\n        box-shadow: 0 10px 30px rgba(245, 124, 0, 0.4);\n        position: relative;\n        z-index: 1;\n    }\n\n    .vision-icon svg {\n        width: 40px;\n        height: 40px;\n        fill: white;\n    }\n\n    .vision-label {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 16px;\n        font-weight: 500;\n        letter-spacing: 3px;\n        text-transform: uppercase;\n        margin-bottom: 15px;\n        position: relative;\n        z-index: 1;\n    }\n\n    .vision-text {\n        color: white;\n        font-size: 32px;\n        font-weight: 600;\n        line-height: 1.6;\n        position: relative;\n        z-index: 1;\n    }\n\n    .vision-text span {\n        display: block;\n    }\n\n    \/* Motto Card *\/\n    .motto-card {\n        background: white;\n        border-radius: 20px;\n        padding: 40px;\n        margin-bottom: 30px;\n        text-align: center;\n        box-shadow: 0 10px 40px rgba(27, 94, 32, 0.12);\n        animation: fadeInUp 0.8s ease-out 0.4s backwards;\n        border-left: 5px solid #f57c00;\n        position: relative;\n    }\n\n    .motto-card::before {\n        content: '\"';\n        position: absolute;\n        top: 20px;\n        left: 30px;\n        font-size: 80px;\n        color: #e8f5e9;\n        font-family: Georgia, serif;\n        line-height: 1;\n    }\n\n    .motto-label {\n        display: inline-block;\n        background: linear-gradient(135deg, #f57c00, #ff9800);\n        color: white;\n        padding: 8px 24px;\n        border-radius: 20px;\n        font-size: 14px;\n        font-weight: 600;\n        margin-bottom: 20px;\n        letter-spacing: 2px;\n    }\n\n    .motto-text {\n        color: #1b5e20;\n        font-size: 24px;\n        font-weight: 500;\n        line-height: 1.8;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* Mission Card *\/\n    .mission-card {\n        background: white;\n        border-radius: 20px;\n        padding: 40px;\n        box-shadow: 0 10px 40px rgba(27, 94, 32, 0.12);\n        animation: fadeInUp 0.8s ease-out 0.6s backwards;\n    }\n\n    .mission-header {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        margin-bottom: 30px;\n    }\n\n    .mission-icon {\n        width: 60px;\n        height: 60px;\n        background: linear-gradient(135deg, #2e7d32, #43a047);\n        border-radius: 15px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 5px 20px rgba(46, 125, 50, 0.3);\n    }\n\n    .mission-icon svg {\n        width: 30px;\n        height: 30px;\n        fill: white;\n    }\n\n    .mission-title {\n        color: #1b5e20;\n        font-size: 28px;\n        font-weight: 700;\n    }\n\n    .mission-list {\n        list-style: none;\n    }\n\n    .mission-item {\n        display: flex;\n        align-items: flex-start;\n        gap: 20px;\n        padding: 25px;\n        background: linear-gradient(135deg, #f9fbe7 0%, #f1f8e9 100%);\n        border-radius: 16px;\n        margin-bottom: 15px;\n        transition: transform 0.3s, box-shadow 0.3s;\n        border-left: 4px solid #43a047;\n    }\n\n    .mission-item:hover {\n        transform: translateX(10px);\n        box-shadow: 0 10px 30px rgba(27, 94, 32, 0.15);\n        border-left-color: #f57c00;\n    }\n\n    .mission-item:last-child {\n        margin-bottom: 0;\n    }\n\n    .mission-number {\n        width: 45px;\n        height: 45px;\n        background: linear-gradient(135deg, #43a047, #66bb6a);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-size: 20px;\n        font-weight: 700;\n        flex-shrink: 0;\n        box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3);\n    }\n\n    .mission-item:hover .mission-number {\n        background: linear-gradient(135deg, #f57c00, #ff9800);\n    }\n\n    .mission-content {\n        flex: 1;\n    }\n\n    .mission-content p {\n        color: #2e7d32;\n        font-size: 18px;\n        line-height: 1.7;\n        font-weight: 500;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 768px) {\n        .page-title h2 {\n            font-size: 32px;\n        }\n\n        .vision-card {\n            padding: 30px;\n        }\n\n        .vision-text {\n            font-size: 24px;\n        }\n\n        .motto-text {\n            font-size: 20px;\n        }\n\n        .mission-item {\n            padding: 20px;\n        }\n\n        .mission-content p {\n            font-size: 16px;\n        }\n    }\n\n    @keyframes fadeInUp {\n        from {\n            opacity: 0;\n            transform: translateY(30px);\n        }\n\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n<\/style>\n\n<div class=\"vision-section\">\n    <div class=\"vision-container\">\n        <!-- Page Title -->\n        <div class=\"page-title\">\n            <h2>\ud83c\udfaf \u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c & \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08<\/h2>\n            <p>\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<\/p>\n        <\/div>\n\n        <!-- Vision Card -->\n        <div class=\"vision-card\">\n            <div class=\"vision-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path\n                        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.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" \/>\n                <\/svg>\n            <\/div>\n            <p class=\"vision-label\">\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c \/ Vision<\/p>\n            <h3 class=\"vision-text\">\n                <span>\"\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07 \u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e17\u0e35\u0e48\u0e14\u0e35<\/span>\n                <span>\u0e41\u0e25\u0e30\u0e21\u0e35\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e02\u0e36\u0e49\u0e19\"<\/span>\n            <\/h3>\n        <\/div>\n\n        <!-- Motto Card -->\n        <div class=\"motto-card\">\n            <span class=\"motto-label\">\u2728 \u0e04\u0e33\u0e02\u0e27\u0e31\u0e0d<\/span>\n            <p class=\"motto-text\">\n                \"\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c<br>\n                \u0e01\u0e49\u0e32\u0e27\u0e17\u0e31\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e01\u0e32\u0e23\u0e13\u0e4c \u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e14\u0e49\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e20\u0e32\u0e04\u0e20\u0e39\u0e21\u0e34\"\n            <\/p>\n        <\/div>\n\n        <!-- Mission Card -->\n        <div class=\"mission-card\">\n            <div class=\"mission-header\">\n                <div class=\"mission-icon\">\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                <\/div>\n                <h3 class=\"mission-title\">\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08<\/h3>\n            <\/div>\n\n            <ul class=\"mission-list\">\n                <li class=\"mission-item\">\n                    <div class=\"mission-number\">1<\/div>\n                    <div class=\"mission-content\">\n                        <p>\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e36\u0e48\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49<\/p>\n                    <\/div>\n                <\/li>\n\n                <li class=\"mission-item\">\n                    <div class=\"mission-number\">2<\/div>\n                    <div class=\"mission-content\">\n                        <p>\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e02\u0e35\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\n                            \u0e42\u0e14\u0e22\u0e22\u0e36\u0e14\u0e2b\u0e25\u0e31\u0e01\u0e15\u0e25\u0e32\u0e14\u0e19\u0e33\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15<\/p>\n                    <\/div>\n                <\/li>\n\n                <li class=\"mission-item\">\n                    <div class=\"mission-number\">3<\/div>\n                    <div class=\"mission-content\">\n                        <p>\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e41\u0e25\u0e30\u0e1c\u0e25\u0e34\u0e15\u0e1b\u0e31\u0e08\u0e08\u0e31\u0e22\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e41\u0e25\u0e30\u0e08\u0e33\u0e2b\u0e19\u0e48\u0e32\u0e22\u0e41\u0e01\u0e48\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\n                        <\/p>\n                    <\/div>\n                <\/li>\n\n                <li class=\"mission-item\">\n                    <div class=\"mission-number\">4<\/div>\n                    <div class=\"mission-content\">\n                        <p>\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e27\u0e34\u0e08\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e07\u0e32\u0e19\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e41\u0e25\u0e30\u0e1a\u0e39\u0e23\u0e13\u0e32\u0e01\u0e32\u0e23\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e20\u0e32\u0e04\u0e2a\u0e48\u0e27\u0e19<\/p>\n                    <\/div>\n                <\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n<\/div>\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 & \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 & \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>\ud83c\udfaf \u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c &#038; \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 \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 \u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c \/ Vision &#8220;\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07 \u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e17\u0e35\u0e48\u0e14\u0e35 \u0e41\u0e25\u0e30\u0e21\u0e35\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e02\u0e36\u0e49\u0e19&#8221; \u2728 \u0e04\u0e33\u0e02\u0e27\u0e31\u0e0d &#8220;\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c \u0e01\u0e49\u0e32\u0e27\u0e17\u0e31\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e01\u0e32\u0e23\u0e13\u0e4c \u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e14\u0e49\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e20\u0e32\u0e04\u0e20\u0e39\u0e21\u0e34&#8221; \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 1 \u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e36\u0e48\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49 2 [&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":"disabled","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-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/53","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=53"}],"version-history":[{"count":6,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":376,"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/pages\/53\/revisions\/376"}],"wp:attachment":[{"href":"https:\/\/nakhonpathom.doae.go.th\/phutthamonthon\/wp-json\/wp\/v2\/media?parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}