TF smartSD Login - Professional White<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=K2D:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n <style>\n :root {\n --mama-red: #D32F2F; \/* \u0e41\u0e14\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32 - Professional Red *\/\n --mama-gold: #FBC02D; \/* \u0e17\u0e2d\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32 - Quality\/Medal *\/\n --corporate-navy: #0F172A; \/* \u0e40\u0e02\u0e35\u0e22\u0e27\u0e40\u0e02\u0e49\u0e21\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21 *\/\n --bg-page: #FFFFFF;\n --text-dark: #1A1A1A;\n --text-muted: #666666;\n --border-light: #E2E8F0;\n --high-radius: 20px; \/* \u0e02\u0e2d\u0e1a\u0e21\u0e25\u0e2a\u0e39\u0e07 *\/\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--bg-page);\n color: var(--text-dark);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n font-size: 1.05rem;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n overflow: hidden;\n }\n\n h1, h2, h3, h4 {\n font-family: 'K2D', sans-serif;\n color: var(--corporate-navy);\n margin-top: 0;\n line-height: 1.3;\n }\n\n \/* --- TCFD Particle Stream Animation (Interactive Header) --- *\/\n .particle-header {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100px;\n overflow: hidden;\n z-index: 0;\n opacity: 0.15; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1a\u0e32\u0e07\u0e46 \u0e44\u0e21\u0e48\u0e41\u0e22\u0e48\u0e07\u0e0b\u0e35\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 *\/\n }\n\n .data-stream {\n fill: none;\n stroke-width: 2;\n stroke-dasharray: 10 10; \/* \u0e40\u0e2a\u0e49\u0e19\u0e1b\u0e23\u0e30 *\/\n animation: moveStream 15s linear infinite; \/* \u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e43\u0e2b\u0e49\u0e44\u0e2b\u0e25 *\/\n }\n\n .stream-mama-red { stroke: var(--mama-red); }\n .stream-corporate-navy { stroke: var(--corporate-navy); }\n\n @keyframes moveStream {\n 0% { stroke-dashoffset: 200; }\n 100% { stroke-dashoffset: 0; }\n }\n\n \/* --- Login Card Section --- *\/\n .login-wrapper {\n max-width: 500px;\n width: 100%;\n padding: 4rem 3rem;\n border: 1px solid #eee;\n border-radius: var(--high-radius);\n position: relative;\n z-index: 10;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);\n background-color: white;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n .login-wrapper.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .brand-logo-area {\n text-align: center;\n margin-bottom: 3.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n\n .brand-text {\n font-family: 'K2D', sans-serif;\n font-size: 1.8rem;\n font-weight: 700;\n letter-spacing: -1px;\n color: var(--corporate-navy);\n }\n\n .sd-text {\n font-weight: 400;\n color: var(--mama-red);\n margin-left: 2px;\n }\n\n .login-title {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 1.2rem;\n color: #444;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n\n \/* --- Form Inputs with Professional Interactivity --- *\/\n .form-group {\n margin-bottom: 2.2rem;\n position: relative;\n }\n\n .form-input {\n width: 100%;\n padding: 1rem 1.5rem 1rem 3.5rem;\n border-radius: var(--high-radius);\n border: 1px solid #ddd;\n background-color: #FAFAFA;\n color: var(--text-dark);\n font-family: 'Sarabun', sans-serif;\n font-size: 1rem;\n box-sizing: border-box;\n transition: all 0.3s ease;\n }\n\n .form-input:focus {\n border-color: var(--mama-red);\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);\n background-color: white;\n outline: none;\n }\n\n \/* Floating Label Effect *\/\n .floating-label {\n position: absolute;\n top: 1rem;\n left: 3.5rem;\n color: var(--text-muted);\n font-size: 1rem;\n pointer-events: none;\n transition: all 0.3s ease;\n }\n\n .form-input:focus + .floating-label,\n .form-input:not(:placeholder-shown) + .floating-label {\n top: -0.8rem;\n left: 1rem;\n font-size: 0.8rem;\n color: var(--mama-red);\n background-color: white;\n padding: 0 8px;\n font-weight: 600;\n }\n\n \/* Icon in Input *\/\n .input-icon {\n position: absolute;\n top: 50%;\n left: 1.2rem;\n transform: translateY(-50%);\n font-size: 1.4rem;\n color: #bbb;\n transition: color 0.3s ease;\n }\n\n .form-input:focus ~ .input-icon {\n color: var(--mama-red);\n }\n\n \/* --- CTA Button & Footer Links with Interaction --- *\/\n .btn-mama {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n padding: 1.1rem;\n border-radius: var(--high-radius);\n background-color: var(--mama-red);\n color: white;\n font-family: 'K2D', sans-serif;\n font-weight: 600;\n font-size: 1.1rem;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15);\n }\n\n .btn-mama:hover {\n background-color: #B22222; \/* \u0e41\u0e14\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32\u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e0a\u0e35\u0e49 *\/\n box-shadow: 0 6px 20px rgba(211, 47, 47, 0.25);\n transform: translateY(-2px);\n }\n\n .btn-mama:active {\n transform: translateY(1px);\n box-shadow: 0 2px 10px rgba(211, 47, 47, 0.2);\n }\n\n .login-footer {\n margin-top: 3.5rem;\n text-align: center;\n font-size: 0.95rem;\n color: var(--text-muted);\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .footer-link {\n color: var(--corporate-navy);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n position: relative;\n }\n\n .footer-link:hover {\n color: var(--mama-gold);\n }\n\n .footer-link::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 0;\n height: 1px;\n background-color: var(--mama-gold);\n transition: width 0.3s ease;\n }\n\n .footer-link:hover::after {\n width: 100%;\n }\n\n .copyright-text {\n color: #94A3B8;\n font-size: 0.85rem;\n margin-top: 2rem;\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"particle-header\">\n <svg width=\"100%\" height=\"100%\" viewbox=\"0 0 1000 100\">\n <path class=\"data-stream stream-corporate-navy\" d=\"M0,50 C20,50 40,30 60,30 S100,70 120,70 S160,30 180,30 S220,70 240,70 S280,30 300,30 S340,70 360,70 S400,30 420,30 S460,70 480,70 S520,30 540,30 S580,70 600,70 S640,30 660,30 S700,70 720,70 S760,30 780,30 S820,70 840,70 S880,30 900,30 S940,70 960,70 S1000,50 1020,50\" \/>\n <path class=\"data-stream stream-mama-red\" d=\"M10,50 C30,50 50,70 70,70 S110,30 130,30 S170,70 190,70 S230,30 250,30 S290,70 310,70 S350,30 370,30 S410,70 430,70 S470,30 490,30 S530,70 550,70 S590,30 610,30 S650,70 670,70 S710,30 730,30 S770,70 790,70 S830,30 850,30 S890,70 910,70 S950,30 970,30 S1010,50 1030,50\" \/>\n <\/svg>\n <\/div>\n\n <div class=\"login-wrapper\" id=\"loginCard\">\n \n <div class=\"brand-logo-area\">\n <i class=\"ph-bold ph-strategy\" style=\"font-size: 2.2rem; color: var(--corporate-navy);\"><\/i>\n <h1 class=\"brand-text\">TF smart<span class=\"sd-text\">SD<\/span><\/h1>\n <\/div>\n\n <h3 class=\"login-title\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a \/ SD Platform<\/h3>\n \n <form action=\"\">\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-input\" id=\"username\" placeholder=\" \" required>\n <label for=\"username\" class=\"floating-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e2b\u0e23\u0e37\u0e2d \u0e2d\u0e35\u0e40\u0e21\u0e25<\/label>\n <i class=\"ph-bold ph-identification-card input-icon\"><\/i>\n <\/div>\n \n <div class=\"form-group\">\n <input type=\"password\" class=\"form-input\" id=\"password\" placeholder=\" \" required>\n <label for=\"password\" class=\"floating-label\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19<\/label>\n <i class=\"ph-bold ph-shield-check input-icon\"><\/i>\n <\/div>\n \n <button type=\"submit\" class=\"btn-mama\">\n <i class=\"ph-fill ph-arrow-circle-right\" style=\"font-size: 1.4rem;\"><\/i>\n <span>\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a smartSD<\/span>\n <\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n <div class=\"login-footer\">\n <a href=\"#\" class=\"footer-link\">\u0e25\u0e37\u0e21\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?<\/a>\n <p>\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? <a href=\"#\" class=\"footer-link\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (Admin)<\/a><\/p>\n <p class=\"copyright-text\">© 2026 Thai President Foods Public Company Limited | <a href=\"#\" class=\"footer-link\" style=\"color: inherit; font-size: 0.8rem; font-weight: 300;\">\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 (PDPA)<\/a><\/p>\n <\/div>\n\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n setTimeout(function() {\n document.getElementById('loginCard').classList.add('show');\n }, 100); \/\/ \u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e19\u0e34\u0e14\u0e19\u0e36\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e15\u0e2d\u0e19\u0e42\u0e2b\u0e25\u0e14\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>TF smartSD Login – Professional White TF smartSD \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a \/ SD Platform \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e2b\u0e23\u0e37\u0e2d \u0e2d\u0e35\u0e40\u0e21\u0e25 \u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a smartSD \u0e25\u0e37\u0e21\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (Admin) © 2026 Thai President Foods Public Company Limited | \u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 (PDPA)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"redux-templates_canvas","meta":{"footnotes":""},"class_list":["post-5563","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/comments?post=5563"}],"version-history":[{"count":4,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563\/revisions"}],"predecessor-version":[{"id":5568,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563\/revisions\/5568"}],"wp:attachment":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/media?parent=5563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\t\t\t

\r\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n TF smartSD Login - Professional White<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=K2D:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n <style>\n :root {\n --mama-red: #D32F2F; \/* \u0e41\u0e14\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32 - Professional Red *\/\n --mama-gold: #FBC02D; \/* \u0e17\u0e2d\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32 - Quality\/Medal *\/\n --corporate-navy: #0F172A; \/* \u0e40\u0e02\u0e35\u0e22\u0e27\u0e40\u0e02\u0e49\u0e21\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21 *\/\n --bg-page: #FFFFFF;\n --text-dark: #1A1A1A;\n --text-muted: #666666;\n --border-light: #E2E8F0;\n --high-radius: 20px; \/* \u0e02\u0e2d\u0e1a\u0e21\u0e25\u0e2a\u0e39\u0e07 *\/\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--bg-page);\n color: var(--text-dark);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n font-size: 1.05rem;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n overflow: hidden;\n }\n\n h1, h2, h3, h4 {\n font-family: 'K2D', sans-serif;\n color: var(--corporate-navy);\n margin-top: 0;\n line-height: 1.3;\n }\n\n \/* --- TCFD Particle Stream Animation (Interactive Header) --- *\/\n .particle-header {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100px;\n overflow: hidden;\n z-index: 0;\n opacity: 0.15; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1a\u0e32\u0e07\u0e46 \u0e44\u0e21\u0e48\u0e41\u0e22\u0e48\u0e07\u0e0b\u0e35\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 *\/\n }\n\n .data-stream {\n fill: none;\n stroke-width: 2;\n stroke-dasharray: 10 10; \/* \u0e40\u0e2a\u0e49\u0e19\u0e1b\u0e23\u0e30 *\/\n animation: moveStream 15s linear infinite; \/* \u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e43\u0e2b\u0e49\u0e44\u0e2b\u0e25 *\/\n }\n\n .stream-mama-red { stroke: var(--mama-red); }\n .stream-corporate-navy { stroke: var(--corporate-navy); }\n\n @keyframes moveStream {\n 0% { stroke-dashoffset: 200; }\n 100% { stroke-dashoffset: 0; }\n }\n\n \/* --- Login Card Section --- *\/\n .login-wrapper {\n max-width: 500px;\n width: 100%;\n padding: 4rem 3rem;\n border: 1px solid #eee;\n border-radius: var(--high-radius);\n position: relative;\n z-index: 10;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);\n background-color: white;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n .login-wrapper.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .brand-logo-area {\n text-align: center;\n margin-bottom: 3.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n\n .brand-text {\n font-family: 'K2D', sans-serif;\n font-size: 1.8rem;\n font-weight: 700;\n letter-spacing: -1px;\n color: var(--corporate-navy);\n }\n\n .sd-text {\n font-weight: 400;\n color: var(--mama-red);\n margin-left: 2px;\n }\n\n .login-title {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 1.2rem;\n color: #444;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n\n \/* --- Form Inputs with Professional Interactivity --- *\/\n .form-group {\n margin-bottom: 2.2rem;\n position: relative;\n }\n\n .form-input {\n width: 100%;\n padding: 1rem 1.5rem 1rem 3.5rem;\n border-radius: var(--high-radius);\n border: 1px solid #ddd;\n background-color: #FAFAFA;\n color: var(--text-dark);\n font-family: 'Sarabun', sans-serif;\n font-size: 1rem;\n box-sizing: border-box;\n transition: all 0.3s ease;\n }\n\n .form-input:focus {\n border-color: var(--mama-red);\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);\n background-color: white;\n outline: none;\n }\n\n \/* Floating Label Effect *\/\n .floating-label {\n position: absolute;\n top: 1rem;\n left: 3.5rem;\n color: var(--text-muted);\n font-size: 1rem;\n pointer-events: none;\n transition: all 0.3s ease;\n }\n\n .form-input:focus + .floating-label,\n .form-input:not(:placeholder-shown) + .floating-label {\n top: -0.8rem;\n left: 1rem;\n font-size: 0.8rem;\n color: var(--mama-red);\n background-color: white;\n padding: 0 8px;\n font-weight: 600;\n }\n\n \/* Icon in Input *\/\n .input-icon {\n position: absolute;\n top: 50%;\n left: 1.2rem;\n transform: translateY(-50%);\n font-size: 1.4rem;\n color: #bbb;\n transition: color 0.3s ease;\n }\n\n .form-input:focus ~ .input-icon {\n color: var(--mama-red);\n }\n\n \/* --- CTA Button & Footer Links with Interaction --- *\/\n .btn-mama {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n padding: 1.1rem;\n border-radius: var(--high-radius);\n background-color: var(--mama-red);\n color: white;\n font-family: 'K2D', sans-serif;\n font-weight: 600;\n font-size: 1.1rem;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15);\n }\n\n .btn-mama:hover {\n background-color: #B22222; \/* \u0e41\u0e14\u0e07\u0e21\u0e32\u0e21\u0e48\u0e32\u0e40\u0e02\u0e49\u0e21\u0e02\u0e36\u0e49\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e0a\u0e35\u0e49 *\/\n box-shadow: 0 6px 20px rgba(211, 47, 47, 0.25);\n transform: translateY(-2px);\n }\n\n .btn-mama:active {\n transform: translateY(1px);\n box-shadow: 0 2px 10px rgba(211, 47, 47, 0.2);\n }\n\n .login-footer {\n margin-top: 3.5rem;\n text-align: center;\n font-size: 0.95rem;\n color: var(--text-muted);\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .footer-link {\n color: var(--corporate-navy);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n position: relative;\n }\n\n .footer-link:hover {\n color: var(--mama-gold);\n }\n\n .footer-link::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 0;\n height: 1px;\n background-color: var(--mama-gold);\n transition: width 0.3s ease;\n }\n\n .footer-link:hover::after {\n width: 100%;\n }\n\n .copyright-text {\n color: #94A3B8;\n font-size: 0.85rem;\n margin-top: 2rem;\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"particle-header\">\n <svg width=\"100%\" height=\"100%\" viewbox=\"0 0 1000 100\">\n <path class=\"data-stream stream-corporate-navy\" d=\"M0,50 C20,50 40,30 60,30 S100,70 120,70 S160,30 180,30 S220,70 240,70 S280,30 300,30 S340,70 360,70 S400,30 420,30 S460,70 480,70 S520,30 540,30 S580,70 600,70 S640,30 660,30 S700,70 720,70 S760,30 780,30 S820,70 840,70 S880,30 900,30 S940,70 960,70 S1000,50 1020,50\" \/>\n <path class=\"data-stream stream-mama-red\" d=\"M10,50 C30,50 50,70 70,70 S110,30 130,30 S170,70 190,70 S230,30 250,30 S290,70 310,70 S350,30 370,30 S410,70 430,70 S470,30 490,30 S530,70 550,70 S590,30 610,30 S650,70 670,70 S710,30 730,30 S770,70 790,70 S830,30 850,30 S890,70 910,70 S950,30 970,30 S1010,50 1030,50\" \/>\n <\/svg>\n <\/div>\n\n <div class=\"login-wrapper\" id=\"loginCard\">\n \n <div class=\"brand-logo-area\">\n <i class=\"ph-bold ph-strategy\" style=\"font-size: 2.2rem; color: var(--corporate-navy);\"><\/i>\n <h1 class=\"brand-text\">TF smart<span class=\"sd-text\">SD<\/span><\/h1>\n <\/div>\n\n <h3 class=\"login-title\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a \/ SD Platform<\/h3>\n \n <form action=\"\">\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-input\" id=\"username\" placeholder=\" \" required>\n <label for=\"username\" class=\"floating-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e2b\u0e23\u0e37\u0e2d \u0e2d\u0e35\u0e40\u0e21\u0e25<\/label>\n <i class=\"ph-bold ph-identification-card input-icon\"><\/i>\n <\/div>\n \n <div class=\"form-group\">\n <input type=\"password\" class=\"form-input\" id=\"password\" placeholder=\" \" required>\n <label for=\"password\" class=\"floating-label\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19<\/label>\n <i class=\"ph-bold ph-shield-check input-icon\"><\/i>\n <\/div>\n \n <button type=\"submit\" class=\"btn-mama\">\n <i class=\"ph-fill ph-arrow-circle-right\" style=\"font-size: 1.4rem;\"><\/i>\n <span>\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a smartSD<\/span>\n <\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n <div class=\"login-footer\">\n <a href=\"#\" class=\"footer-link\">\u0e25\u0e37\u0e21\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?<\/a>\n <p>\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? <a href=\"#\" class=\"footer-link\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (Admin)<\/a><\/p>\n <p class=\"copyright-text\">© 2026 Thai President Foods Public Company Limited | <a href=\"#\" class=\"footer-link\" style=\"color: inherit; font-size: 0.8rem; font-weight: 300;\">\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 (PDPA)<\/a><\/p>\n <\/div>\n\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n setTimeout(function() {\n document.getElementById('loginCard').classList.add('show');\n }, 100); \/\/ \u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e19\u0e34\u0e14\u0e19\u0e36\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e15\u0e2d\u0e19\u0e42\u0e2b\u0e25\u0e14\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>TF smartSD Login – Professional White TF smartSD \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a \/ SD Platform \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e2b\u0e23\u0e37\u0e2d \u0e2d\u0e35\u0e40\u0e21\u0e25 \u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a smartSD \u0e25\u0e37\u0e21\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e43\u0e0a\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (Admin) © 2026 Thai President Foods Public Company Limited | \u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 (PDPA)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"redux-templates_canvas","meta":{"footnotes":""},"class_list":["post-5563","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/comments?post=5563"}],"version-history":[{"count":4,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563\/revisions"}],"predecessor-version":[{"id":5568,"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/pages\/5563\/revisions\/5568"}],"wp:attachment":[{"href":"https:\/\/sustainability.mama.co.th\/en\/wp-json\/wp\/v2\/media?parent=5563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}