{"id":4608,"date":"2026-02-05T08:30:00","date_gmt":"2026-02-05T08:30:00","guid":{"rendered":"https:\/\/em.co.th\/?p=4608"},"modified":"2026-07-10T06:55:17","modified_gmt":"2026-07-10T06:55:17","slug":"designforsustainability","status":"publish","type":"post","link":"https:\/\/em.co.th\/en\/designforsustainability\/","title":{"rendered":"EM Design \u0e09\u0e35\u0e01\u0e01\u0e0e\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e14\u0e34\u0e21\u0e46 \u0e14\u0e49\u0e27\u0e22\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e17\u0e35\u0e48\u0e17\u0e33\u0e01\u0e33\u0e44\u0e23\u0e43\u0e2b\u0e49\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e04\u0e38\u0e13"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4608\" class=\"elementor elementor-4608\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f84f3d9 e-flex e-con-boxed e-con e-parent\" data-id=\"f84f3d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-645ee88 e-flex e-con-boxed e-con e-parent\" data-id=\"645ee88\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-666ca4f elementor-widget elementor-widget-html\" data-id=\"666ca4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\" class=\"scroll-smooth\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>EM Design - Visionary Architecture<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@200;300;400;500;600;700&family=Oswald:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    colors: {\r\n                        'em-dark': '#1a1a1a',\r\n                        'em-grey': '#333333',\r\n                        'em-main': '#fbb040', \/* Changed Main Color to Orange *\/\r\n                        'em-red': '#EC1C24',\r\n                    },\r\n                    fontFamily: {\r\n                        'sans': ['Kanit', 'sans-serif'],\r\n                        'display': ['Oswald', 'sans-serif'],\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        body { background-color: #1a1a1a; color: #f3f4f6; overflow-x: hidden; }\r\n        \r\n        \/* Custom Scrollbar *\/\r\n        ::-webkit-scrollbar { width: 8px; }\r\n        ::-webkit-scrollbar-track { background: #1a1a1a; }\r\n        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }\r\n        ::-webkit-scrollbar-thumb:hover { background: #fbb040; }\r\n\r\n        \/* Text Stroke Effect *\/\r\n        .text-stroke {\r\n            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);\r\n            color: transparent;\r\n        }\r\n        \r\n        \/* Floating Animation *\/\r\n        .float-slow { animation: float 6s ease-in-out infinite; }\r\n        @keyframes float {\r\n            0% { transform: translateY(0px); }\r\n            50% { transform: translateY(-20px); }\r\n            100% { transform: translateY(0px); }\r\n        }\r\n        \r\n        .pulse-shadow {\r\n            box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.7);\r\n            animation: pulse-green 2s infinite;\r\n        }\r\n        @keyframes pulse-green {\r\n            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.7); }\r\n            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(6, 199, 85, 0); }\r\n            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }\r\n        }\r\n\r\n        \/* Image Reveal Block *\/\r\n        .reveal-block::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: #1a1a1a;\r\n            transform-origin: left;\r\n            animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;\r\n            z-index: 20;\r\n        }\r\n        @keyframes reveal {\r\n            0% { transform: scaleX(1); }\r\n            100% { transform: scaleX(0); }\r\n        }\r\n\r\n        \/* Category Filter Animations *\/\r\n        .filter-btn.active {\r\n            border-color: #EC1C24;\r\n            color: #EC1C24;\r\n            background-color: rgba(236, 28, 36, 0.1);\r\n        }\r\n        .gallery-item {\r\n            transition: all 0.5s ease-in-out;\r\n        }\r\n        .gallery-item.hidden {\r\n            display: none;\r\n            opacity: 0;\r\n            transform: scale(0.9);\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"antialiased relative\">\r\n\r\n    <!-- Floating Line Button (Sticky CTA) -->\r\n    <a href=\"https:\/\/lin.ee\/JDzbjpk\" target=\"_blank\" class=\"fixed bottom-6 right-6 z-50 bg-[#06C755] w-16 h-16 rounded-full flex items-center justify-center text-white text-3xl pulse-shadow hover:scale-110 transition-transform cursor-pointer group\">\r\n        <i class=\"fa-brands fa-line relative z-10\"><\/i>\r\n        <span class=\"absolute right-14 bg-white text-black text-xs font-bold px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap shadow-lg\">\u0e17\u0e31\u0e01\u0e41\u0e0a\u0e17\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32\u0e1f\u0e23\u0e35<\/span>\r\n    <\/a>\r\n\r\n    <!-- Hero Section: Impact & Vision -->\r\n    <header class=\"relative min-h-screen flex items-center justify-center overflow-hidden px-6 pt-20\">\r\n        <!-- Background Video\/Image Placeholder -->\r\n        <div class=\"absolute inset-0 z-0 opacity-40\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop\" class=\"w-full h-full object-cover grayscale\" alt=\"Architecture Background\">\r\n            <div class=\"absolute inset-0 bg-gradient-to-b from-[#1a1a1a] via-transparent to-[#1a1a1a]\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"relative z-10 container mx-auto grid md:grid-cols-12 gap-8 items-end\">\r\n            <div class=\"md:col-span-8\">\r\n                <div class=\"inline-block border-l-4 border-em-main pl-4 mb-6\">\r\n                    <p class=\"text-white text-sm tracking-[0.2em] font-medium uppercase\">Industrial & Commercial Architecture<\/p>\r\n                <\/div>\r\n                <h1 class=\"font-display text-6xl md:text-8xl font-bold leading-[0.9] mb-8 uppercase\">\r\n                    Design <span class=\"text-stroke\">For<\/span><br>\r\n                    <span class=\"text-em-main\">Profitability<\/span>\r\n                <\/h1>\r\n                <p class=\"text-gray-400 max-w-xl text-lg font-light leading-relaxed mb-10\">\r\n                    \u0e09\u0e35\u0e01\u0e01\u0e0e\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e14\u0e34\u0e21\u0e46 \u0e14\u0e49\u0e27\u0e22\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e17\u0e35\u0e48\u0e17\u0e33\u0e01\u0e33\u0e44\u0e23\u0e43\u0e2b\u0e49\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e04\u0e38\u0e13 \u0e1c\u0e2a\u0e32\u0e19 <span class=\"text-white font-medium\">Passive Design<\/span> \u0e41\u0e25\u0e30 <span class=\"text-white font-medium\">BIM Technology<\/span> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\r\n                <\/p>\r\n                \r\n                <!-- New Hero CTAs -->\r\n                <div class=\"flex flex-col sm:flex-row gap-4\">\r\n                    <a href=\"https:\/\/lin.ee\/JDzbjpk\" target=\"_blank\" class=\"bg-em-main text-black px-8 py-4 text-lg font-bold uppercase tracking-wider hover:bg-white hover:text-em-main transition-all transform hover:-translate-y-1 shadow-lg shadow-orange-500\/20 flex items-center justify-center gap-3\">\r\n                        <i class=\"fa-regular fa-comments\"><\/i> \u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32\u0e2a\u0e16\u0e32\u0e1b\u0e19\u0e34\u0e01\u0e1f\u0e23\u0e35\r\n                    <\/a>\r\n                    <a href=\"#projects\" class=\"border border-white\/30 text-white px-8 py-4 text-lg font-bold uppercase tracking-wider hover:border-white hover:bg-white\/10 transition-all flex items-center justify-center\">\r\n                        \u0e14\u0e39\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"md:col-span-4 flex flex-col items-end justify-end pb-4 hidden md:flex\">\r\n                <div class=\"w-full h-px bg-gray-700 mb-6\"><\/div>\r\n                <div class=\"grid grid-cols-2 gap-8 text-right\">\r\n                    <div>\r\n                        <div class=\"text-3xl font-display font-bold text-white\">100%<\/div>\r\n                        <div class=\"text-xs text-gray-500 uppercase tracking-wider mt-1\">BIM Accuracy<\/div>\r\n                    <\/div>\r\n                    <div>\r\n                        <div class=\"text-3xl font-display font-bold text-white\">70%<\/div>\r\n                        <div class=\"text-xs text-gray-500 uppercase tracking-wider mt-1\">Energy Saving<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Scroll Indicator -->\r\n        <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 flex flex-col items-center gap-2 opacity-50 animate-bounce cursor-pointer\" onclick=\"document.getElementById('projects').scrollIntoView({behavior: 'smooth'})\">\r\n            <span class=\"text-[10px] uppercase tracking-widest text-gray-400\">Scroll<\/span>\r\n            <div class=\"w-px h-12 bg-gradient-to-b from-em-main to-transparent\"><\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Marquee Strip -->\r\n    <div class=\"bg-em-main py-3 overflow-hidden transform -rotate-1 relative z-20 shadow-lg shadow-orange-900\/50\">\r\n        <div class=\"whitespace-nowrap animate-marquee flex gap-8 items-center text-black font-display font-bold text-xl uppercase tracking-wider\">\r\n            <span>\u2022 SUSTAINABLE ARCHITECTURE<\/span>\r\n            <span>\u2022 ZERO ENERGY BUILDING<\/span>\r\n            <span>\u2022 COST EFFECTIVE DESIGN<\/span>\r\n            <span>\u2022 BIM INTEGRATION<\/span>\r\n            <span>\u2022 LEED & TREES STANDARD<\/span>\r\n            <span>\u2022 SUSTAINABLE ARCHITECTURE<\/span>\r\n            <span>\u2022 ZERO ENERGY BUILDING<\/span>\r\n            <span>\u2022 COST EFFECTIVE DESIGN<\/span>\r\n            <span>\u2022 BIM INTEGRATION<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Selected Works (Showcase) -->\r\n    <section id=\"projects\" class=\"py-24 bg-[#1a1a1a] relative scroll-mt-20\">\r\n        <div class=\"container mx-auto px-6 mb-20 flex flex-col md:flex-row justify-between items-end gap-6\">\r\n            <div>\r\n                <!-- Removed \"Selected Projects\" heading -->\r\n                <h3 class=\"text-4xl md:text-5xl font-bold text-white\">\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a <span class=\"text-em-main italic\">Masterpiece<\/span><\/h3>\r\n            <\/div>\r\n            <a href=\"#\" class=\"text-sm text-em-main border-b border-em-main pb-1 hover:text-white hover:border-white transition-all\">View All Projects<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"container mx-auto px-6 space-y-32\">\r\n            \r\n            <!-- Project 01: Future Lab -->\r\n            <div class=\"group relative grid md:grid-cols-12 gap-8 items-center\">\r\n                <div class=\"md:col-span-7 relative reveal-block cursor-pointer\" onclick=\"window.open('https:\/\/lin.ee\/JDzbjpk', '_blank')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/em.co.th\/wp-content\/uploads\/2025\/09\/img96-1.jpg\" alt=\"Future Lab\" class=\"w-full h-[500px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out\">\r\n                    <div class=\"absolute -bottom-6 -right-6 w-32 h-32 border-r-2 border-b-2 border-em-main hidden md:block\"><\/div>\r\n                <\/div>\r\n                <div class=\"md:col-span-5 md:-ml-12 z-10 relative pointer-events-none\">\r\n                    <div class=\"bg-[#222] p-8 md:p-12 shadow-2xl border-l-4 border-em-main\">\r\n                        <div class=\"text-em-main font-display text-6xl font-bold opacity-20 absolute top-4 right-4\">01<\/div>\r\n                        <h4 class=\"text-3xl font-bold text-white mb-4\">Future Lab <br><span class=\"text-lg font-light text-gray-400\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22 \u0e21.\u0e40\u0e01\u0e29\u0e15\u0e23\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/span><\/h4>\r\n                        <div class=\"flex flex-wrap gap-2 mb-6\">\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">ZEB Standard<\/span>\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">Education<\/span>\r\n                        <\/div>\r\n                        <p class=\"text-gray-400 text-sm leading-relaxed mb-8\">\r\n                            \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e15\u0e49\u0e19\u0e41\u0e1a\u0e1a Zero Energy Building (ZEB) \u0e2a\u0e39\u0e07 11 \u0e0a\u0e31\u0e49\u0e19 \u0e17\u0e35\u0e48\u0e1e\u0e34\u0e2a\u0e39\u0e08\u0e19\u0e4c\u0e41\u0e25\u0e49\u0e27\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e44\u0e1f\u0e44\u0e14\u0e49\u0e08\u0e23\u0e34\u0e07\u0e01\u0e27\u0e48\u0e32 50% \u0e04\u0e37\u0e19\u0e17\u0e38\u0e19\u0e44\u0e27\u0e20\u0e32\u0e22\u0e43\u0e19 5 \u0e1b\u0e35 \u0e1c\u0e2a\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 Smart Building \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e17\u0e35\u0e48\u0e14\u0e35\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Project 02: Chiangmai Ram 2 -->\r\n            <div class=\"group relative grid md:grid-cols-12 gap-8 items-center\">\r\n                <div class=\"md:col-span-5 md:-mr-12 z-10 order-2 md:order-1 relative pointer-events-none\">\r\n                    <div class=\"bg-[#222] p-8 md:p-12 shadow-2xl border-r-4 border-white text-right\">\r\n                        <div class=\"text-white font-display text-6xl font-bold opacity-10 absolute top-4 left-4\">02<\/div>\r\n                        <h4 class=\"text-3xl font-bold text-white mb-4\">\u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e43\u0e2b\u0e21\u0e48 \u0e23\u0e32\u0e21 2 <br><span class=\"text-lg font-light text-gray-400\">Healthcare Facility<\/span><\/h4>\r\n                        <div class=\"flex flex-wrap gap-2 mb-6 justify-end\">\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">BIM FULL LOOP<\/span>\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">MEP Design<\/span>\r\n                        <\/div>\r\n                        <p class=\"text-gray-400 text-sm leading-relaxed mb-8\">\r\n                            Mega Project \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e27\u0e48\u0e32 118,000 \u0e15\u0e23.\u0e21. \u0e43\u0e0a\u0e49 BIM 100% \u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25 \u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e01\u0e31\u0e1a Reun Design Studio \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e23\u0e31\u0e01\u0e29\u0e32\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"md:col-span-7 relative reveal-block order-1 md:order-2 cursor-pointer\" onclick=\"window.open('https:\/\/lin.ee\/JDzbjpk', '_blank')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/em.co.th\/wp-content\/uploads\/2025\/09\/LINE_ALBUM_HOSPITAL_CHIANGMAI-RAM-2_%E0%B9%92%E0%B9%94%E0%B9%90%E0%B9%95%E0%B9%92%E0%B9%98_8-1024x493.jpg\" alt=\"Hospital Project\" class=\"w-full h-[500px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out\" style=\"object-position: 50% center;\">\r\n                    <div class=\"absolute -top-6 -left-6 w-32 h-32 border-l-2 border-t-2 border-em-main hidden md:block\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Project 03: Mitsubishi -->\r\n            <div class=\"group relative grid md:grid-cols-12 gap-8 items-center\">\r\n                <div class=\"md:col-span-7 relative reveal-block cursor-pointer\" onclick=\"window.open('https:\/\/lin.ee\/JDzbjpk', '_blank')\">\r\n                    <!-- Adjusted object-position to 25% center for better framing -->\r\n                    <img decoding=\"async\" src=\"https:\/\/em.co.th\/wp-content\/uploads\/2025\/09\/EmbeddedImage-1-1-1024x534.jpg\" alt=\"Office Project\" class=\"w-full h-[500px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out\" style=\"object-position: 25% center;\">\r\n                    <div class=\"absolute -bottom-6 -right-6 w-32 h-32 border-r-2 border-b-2 border-em-main hidden md:block\"><\/div>\r\n                <\/div>\r\n                <div class=\"md:col-span-5 md:-ml-12 z-10 relative pointer-events-none\">\r\n                    <div class=\"bg-[#222] p-8 md:p-12 shadow-2xl border-l-4 border-em-main\">\r\n                        <div class=\"text-em-main font-display text-6xl font-bold opacity-20 absolute top-4 right-4\">03<\/div>\r\n                        <h4 class=\"text-3xl font-bold text-white mb-4\">Mitsubishi Motor Head Office <br><span class=\"text-lg font-light text-gray-400\">Corporate Office<\/span><\/h4>\r\n                        <div class=\"flex flex-wrap gap-2 mb-6\">\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">LEED Concept<\/span>\r\n                            <span class=\"px-2 py-1 bg-white\/5 text-[10px] text-gray-300 uppercase tracking-wide\">Daylighting<\/span>\r\n                        <\/div>\r\n                        <p class=\"text-gray-400 text-sm leading-relaxed mb-8\">\r\n                            \u0e2a\u0e38\u0e19\u0e17\u0e23\u0e35\u0e22\u0e20\u0e32\u0e1e\u0e41\u0e2b\u0e48\u0e07\u0e41\u0e2a\u0e07\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e1c\u0e2a\u0e32\u0e19\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e31\u0e19\u0e04\u0e27\u0e32\u0e21\u0e23\u0e49\u0e2d\u0e19 (Shading Device) \u0e25\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 \u0e15\u0e2d\u0e1a\u0e42\u0e08\u0e17\u0e22\u0e4c Corporate Identity \u0e17\u0e35\u0e48\u0e43\u0e2a\u0e48\u0e43\u0e08\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- View More Projects Button (Replaced Gallery) -->\r\n        <div class=\"container mx-auto px-6 mt-24 text-center\">\r\n            <p class=\"text-gray-400 mb-6 font-light\">\u0e22\u0e31\u0e07\u0e21\u0e35\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e2d\u0e35\u0e01\u0e01\u0e27\u0e48\u0e32 <span class=\"text-white font-bold\">100+ \u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/span> \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e20\u0e39\u0e21\u0e34\u0e43\u0e08\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d<\/p>\r\n             <a href=\"https:\/\/em.co.th\/insights\/#ins-em-design\" target=\"_blank\" class=\"inline-flex items-center gap-4 border border-em-main text-white px-12 py-5 text-lg font-bold uppercase tracking-widest hover:bg-em-main hover:text-black hover:border-em-main transition-all group rounded-sm\">\r\n                \u0e14\u0e39\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 <i class=\"fa-solid fa-arrow-right-long group-hover:translate-x-2 transition-transform\"><\/i>\r\n            <\/a>\r\n        <\/div>\r\n\r\n        <!-- Mid-Section CTA -->\r\n        <div class=\"container mx-auto px-6 mt-32\">\r\n            <div class=\"bg-gradient-to-r from-em-grey to-em-dark border border-white\/10 rounded-2xl p-10 flex flex-col md:flex-row items-center justify-between gap-8 hover:border-em-main\/50 transition-colors group\">\r\n                <div>\r\n                    <h3 class=\"text-2xl font-bold text-white mb-2\">\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08\u0e43\u0e19\u0e07\u0e32\u0e19\u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\u0e43\u0e0a\u0e48\u0e44\u0e2b\u0e21?<\/h3>\r\n                    <p class=\"text-gray-400\">\u0e2d\u0e22\u0e48\u0e32\u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e43\u0e2b\u0e49\u0e44\u0e2d\u0e40\u0e14\u0e35\u0e22\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e04\u0e48\u0e04\u0e27\u0e32\u0e21\u0e1d\u0e31\u0e19 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e04\u0e38\u0e22\u0e01\u0e31\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e19\u0e34\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/p>\r\n                <\/div>\r\n                <a href=\"https:\/\/lin.ee\/JDzbjpk\" target=\"_blank\" class=\"flex-shrink-0 bg-white text-black px-8 py-4 font-bold uppercase rounded-full hover:bg-em-main hover:text-black transition-all flex items-center gap-2 group-hover:scale-105\">\r\n                    \u0e41\u0e2d\u0e14\u0e44\u0e25\u0e19\u0e4c\u0e19\u0e31\u0e14\u0e04\u0e38\u0e22\u0e07\u0e32\u0e19 <i class=\"fa-brands fa-line text-xl\"><\/i>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Why Us: Icons Grid -->\r\n    <section class=\"py-24 bg-gradient-to-b from-[#1a1a1a] to-[#222]\">\r\n        <div class=\"container mx-auto px-6\">\r\n            <div class=\"grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-white\/10 border-t border-b border-white\/10\">\r\n                <div class=\"p-10 text-center hover:bg-white\/5 transition-all group\">\r\n                    <div class=\"text-5xl text-gray-600 mb-6 group-hover:text-white transition-colors\"><i class=\"fa-solid fa-cube\"><\/i><\/div>\r\n                    <h4 class=\"text-xl font-bold text-white mb-2\">BIM Integrated<\/h4>\r\n                    <p class=\"text-sm text-gray-500 group-hover:text-gray-400\">Zero Clash. Zero Error. 100% Control.<\/p>\r\n                <\/div>\r\n                <div class=\"p-10 text-center hover:bg-white\/5 transition-all group\">\r\n                    <div class=\"text-5xl text-gray-600 mb-6 group-hover:text-em-main transition-colors\"><i class=\"fa-solid fa-leaf\"><\/i><\/div>\r\n                    <h4 class=\"text-xl font-bold text-white mb-2\">Passive Intelligence<\/h4>\r\n                    <p class=\"text-sm text-gray-500 group-hover:text-gray-400\">Design with Nature to reduce cost.<\/p>\r\n                <\/div>\r\n                <div class=\"p-10 text-center hover:bg-white\/5 transition-all group\">\r\n                    <div class=\"text-5xl text-gray-600 mb-6 group-hover:text-em-red transition-colors\"><i class=\"fa-solid fa-chart-pie\"><\/i><\/div>\r\n                    <h4 class=\"text-xl font-bold text-white mb-2\">Feasibility First<\/h4>\r\n                    <p class=\"text-sm text-gray-500 group-hover:text-gray-400\">We design based on your ROI.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- The Ecosystem (Diagrammatic Section) -->\r\n    <section class=\"py-32 px-6 bg-[#111] overflow-hidden relative\">\r\n        <div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-em-main\/5 rounded-full blur-[100px] pointer-events-none\"><\/div>\r\n        <div class=\"container mx-auto max-w-5xl relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-4\">Total Building <span class=\"text-em-main\">Ecosystem<\/span><\/h2>\r\n                <p class=\"text-gray-400\">\u0e42\u0e0b\u0e25\u0e39\u0e0a\u0e31\u0e19\u0e04\u0e23\u0e1a\u0e27\u0e07\u0e08\u0e23 \u0e08\u0e32\u0e01\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e08\u0e19\u0e16\u0e36\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e33\u0e44\u0e23<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"relative\">\r\n                <!-- Center Core -->\r\n                <div class=\"hidden md:block absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[400px] h-[400px] border border-dashed border-white\/10 rounded-full animate-spin-slow\"><\/div>\r\n                \r\n                <div class=\"grid md:grid-cols-3 gap-8 relative\">\r\n                    <!-- Card 1: EM Design -->\r\n                    <div class=\"bg-[#1a1a1a] p-8 rounded-2xl border border-white\/5 hover:border-em-main\/50 transition-all hover:-translate-y-2 relative group overflow-hidden\">\r\n                        <div class=\"absolute top-0 left-0 w-1 h-full bg-white group-hover:bg-em-main transition-colors\"><\/div>\r\n                        <div class=\"text-6xl text-white\/5 absolute -right-4 -bottom-4 group-hover:text-white\/10 transition-colors\"><i class=\"fa-solid fa-compass-drafting\"><\/i><\/div>\r\n                        <h3 class=\"text-xl font-bold text-white mb-1\">EM Design<\/h3>\r\n                        <p class=\"text-xs font-bold text-em-main uppercase tracking-widest mb-4\">The Architect<\/p>\r\n                        <p class=\"text-sm text-gray-400\">\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e14\u0e49\u0e27\u0e22 BIM \u0e41\u0e25\u0e30 Feasibility Study \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14<\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Card 2: EM Energy -->\r\n                    <div class=\"bg-[#1a1a1a] p-8 rounded-2xl border border-white\/5 hover:border-em-main\/50 transition-all hover:-translate-y-2 relative group overflow-hidden mt-8 md:mt-0\">\r\n                        <div class=\"absolute top-0 left-0 w-1 h-full bg-gray-600 group-hover:bg-em-main transition-colors\"><\/div>\r\n                        <div class=\"text-6xl text-white\/5 absolute -right-4 -bottom-4 group-hover:text-white\/10 transition-colors\"><i class=\"fa-solid fa-solar-panel\"><\/i><\/div>\r\n                        <h3 class=\"text-xl font-bold text-white mb-1\">EM Energy<\/h3>\r\n                        <p class=\"text-xs font-bold text-white uppercase tracking-widest mb-4\">Energy Expert<\/p>\r\n                        <p class=\"text-sm text-gray-400\">\u0e27\u0e32\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19 Solar Cell \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u0e43\u0e2b\u0e49\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e01\u0e25\u0e37\u0e19\u0e44\u0e1b\u0e01\u0e31\u0e1a\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e<\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Card 3: ZE Build -->\r\n                    <div class=\"bg-[#1a1a1a] p-8 rounded-2xl border border-white\/5 hover:border-em-red\/50 transition-all hover:-translate-y-2 relative group overflow-hidden md:mt-16\">\r\n                        <div class=\"absolute top-0 left-0 w-1 h-full bg-gray-600 group-hover:bg-em-red transition-colors\"><\/div>\r\n                        <div class=\"text-6xl text-white\/5 absolute -right-4 -bottom-4 group-hover:text-white\/10 transition-colors\"><i class=\"fa-solid fa-helmet-safety\"><\/i><\/div>\r\n                        <h3 class=\"text-xl font-bold text-white mb-1\">ZE Build<\/h3>\r\n                        <p class=\"text-xs font-bold text-em-red uppercase tracking-widest mb-4\">The Builder<\/p>\r\n                        <p class=\"text-sm text-gray-400\">\u0e01\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e27\u0e34\u0e28\u0e27\u0e01\u0e23\u0e23\u0e21 \u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e1a\u0e32\u0e19\u0e1b\u0e25\u0e32\u0e22<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"mt-12 text-center\">\r\n                 <a href=\"https:\/\/lin.ee\/JDzbjpk\" target=\"_blank\" class=\"inline-block border border-white\/30 text-white px-8 py-3 rounded-full hover:bg-white hover:text-black transition-all text-sm uppercase tracking-widest\">\r\n                    \u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32\u0e42\u0e0b\u0e25\u0e39\u0e0a\u0e31\u0e19\u0e04\u0e23\u0e1a\u0e27\u0e07\u0e08\u0e23\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Call to Action (Big Bold) -->\r\n    <section class=\"py-32 bg-em-main text-black text-center relative overflow-hidden\">\r\n        <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/carbon-fibre.png')] opacity-10\"><\/div>\r\n        <div class=\"container mx-auto px-6 relative z-10\">\r\n            <div class=\"inline-block bg-black text-white px-4 py-1 mb-6 text-xs font-bold uppercase tracking-[0.2em]\">Limited Offer<\/div>\r\n            <h2 class=\"font-display text-5xl md:text-7xl font-bold uppercase mb-6 tracking-tight\">\r\n                Start Your Project <br> With <span class=\"text-white\">Confidence<\/span>\r\n            <\/h2>\r\n            <p class=\"text-xl opacity-90 mb-12 font-medium max-w-2xl mx-auto\">\r\n                \u0e2d\u0e22\u0e48\u0e32\u0e40\u0e2a\u0e35\u0e48\u0e22\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e21\u0e35\u0e41\u0e1c\u0e19\u0e01\u0e33\u0e44\u0e23 \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e0a\u0e48\u0e27\u0e22\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1b\u0e44\u0e14\u0e49\u0e02\u0e2d\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13 (Feasibility Check) \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\r\n            <\/p>\r\n            <a href=\"https:\/\/lin.ee\/JDzbjpk\" target=\"_blank\" class=\"inline-flex items-center gap-3 bg-black text-white px-12 py-6 text-xl font-bold uppercase tracking-widest hover:bg-white hover:text-black transition-all transform hover:scale-105 shadow-2xl\">\r\n                \u0e23\u0e31\u0e1a\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1f\u0e23\u0e35 <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n            <\/a>\r\n            <p class=\"mt-6 text-xs font-bold uppercase tracking-widest opacity-60\">*\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e21\u0e35\u0e42\u0e09\u0e19\u0e14\u0e17\u0e35\u0e48\u0e14\u0e34\u0e19\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Removed JS for gallery filters since gallery is removed -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e1e\u0e32\u0e13\u0e34\u0e0a\u0e22\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30\u0e02\u0e19\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/p>\n<p> EM Design \u0e04\u0e39\u0e48\u0e04\u0e34\u0e14\u0e14\u0e49\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e27\u0e34\u0e28\u0e27\u0e01\u0e23\u0e23\u0e21\u0e04\u0e23\u0e1a\u0e27\u0e07\u0e08\u0e23 (One-Stop Service) <\/p>\n<p>\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e43\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25 30-100+ \u0e40\u0e15\u0e35\u0e22\u0e07 \u0e41\u0e25\u0e30\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19 \u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e14\u0e49\u0e27\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e08\u0e32\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e0a\u0e31\u0e49\u0e19\u0e19\u0e33\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28<\/p>","protected":false},"author":1,"featured_media":4613,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[43],"class_list":["post-4608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-em-design","tag-news"],"acf":[],"_links":{"self":[{"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/posts\/4608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/comments?post=4608"}],"version-history":[{"count":13,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/posts\/4608\/revisions"}],"predecessor-version":[{"id":5490,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/posts\/4608\/revisions\/5490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/media\/4613"}],"wp:attachment":[{"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/media?parent=4608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/categories?post=4608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em.co.th\/en\/wp-json\/wp\/v2\/tags?post=4608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}