WCMS - \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/title>\r\n\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <script id=\"tailwind-config\">\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n colors: {\r\n \"primary\": \"#f2f20d\",\r\n \"background-light\": \"#f8f8f5\",\r\n \"background-dark\": \"#181811\",\r\n },\r\n fontFamily: {\r\n \"display\": [\"Prompt\", \"sans-serif\"],\r\n \"sans\": [\"Sarabun\", \"sans-serif\"]\r\n },\r\n borderRadius: {\"DEFAULT\": \"0.25rem\", \"lg\": \"0.5rem\", \"xl\": \"0.75rem\", \"full\": \"9999px\"},\r\n },\r\n },\r\n }\r\n <\/script>\r\n\r\n <style type=\"text\/tailwindcss\">\r\n body { font-family: 'Sarabun', sans-serif; }\r\n h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Prompt', sans-serif; }\r\n .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\r\n a, a:hover, a:focus, a:visited {\r\n text-decoration: none !important;\r\n }\r\n a[x-apple-data-detectors],\r\n a[x-apple-data-detectors]:hover,\r\n a[x-apple-data-detectors]:focus,\r\n a[x-apple-data-detectors]:visited {\r\n color: inherit !important;\r\n text-decoration: none !important;\r\n -webkit-text-decoration: none !important;\r\n border-bottom: 0 !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"bg-background-light dark:bg-background-dark text-[#181811] dark:text-white transition-colors duration-200\">\r\n <div class=\"relative flex h-auto min-h-screen w-full flex-col group\/design-root overflow-x-hidden\">\r\n\r\n \r\n <div class=\"w-full bg-white dark:bg-zinc-900 border-b border-[#e6e6db] dark:border-white\/10\">\r\n <div class=\"max-w-[1280px] mx-auto px-4 @container\">\r\n <div class=\"flex flex-col items-start justify-between gap-4 py-3 @[480px]:flex-row @[480px]:items-center\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-primary\">location_on<\/span>\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-[#181811] dark:text-white text-sm font-bold leading-tight\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\r\n <p id=\"topBranchHint\" class=\"text-[#8a8a60] dark:text-gray-400 text-xs font-normal leading-normal\">\r\n \u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button id=\"btnManualTop\"\r\n class=\"flex min-w-[170px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary text-[#181811] text-sm font-bold leading-normal hover:bg-opacity-90 transition-all\">\r\n <span class=\"truncate\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07<\/span>\r\n <\/button>\r\n\r\n <div class=\"hidden @[640px]:flex items-center gap-2 px-2 border-l border-gray-200 dark:border-white\/10 ml-2\">\r\n <span class=\"text-sm text-gray-600 uppercase font-extrabold\">\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e21\u0e35:<\/span>\r\n <span class=\"text-sm font-semibold px-2.5 py-1 bg-gray-100 dark:bg-white\/5 rounded\">\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35<\/span>\r\n <span class=\"text-sm font-semibold px-2.5 py-1 bg-gray-100 dark:bg-white\/5 rounded\">\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n\r\n <main class=\"flex-grow\">\r\n \r\n <section class=\"w-full py-0\">\r\n <div class=\"w-full @container\">\r\n <div class=\"w-full\">\r\n <div class=\"flex min-h-screen w-full flex-col gap-8 bg-cover bg-center bg-no-repeat items-start justify-center px-6 py-12 md:px-16\"\r\n style='background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%), url(\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuAw8FcKIQVsB23kAx-dtvIyrz_FzgItbipH-tuejyfEsRwIFMca1zYc8VZJJuVmtvwg0OXmjBCQwsT4-RvL8IWDSZkFdB4UHVbKPE-DRzre0DIDsXd41zCbVC7IKyVao7fnN5Bk9dPPG-TxwN6R6FTM4RD9BtWOfbQuerX70o3kQP8vbfPzfLb3UHE_p-g6-GekJS0x4JrJ92Roju8E_L_3V7bmTDX84JwxouZpNu2FkenuGibSVQZ-fUtfaRtrW4xVJVczbT1xOAs\");'>\r\n <div class=\"flex flex-col gap-4 max-w-2xl\">\r\n <span class=\"bg-primary text-[#181811] text-xs font-bold px-3 py-1 rounded w-fit uppercase tracking-widest\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e40\u0e0a\u0e48\u0e32\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21<\/span>\r\n <h1 class=\"text-white text-5xl md:text-7xl font-black leading-tight\">\r\n \u0e22\u0e01\u0e44\u0e14\u0e49... \u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a <br \/><span class=\"text-primary\">\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04\u0e40\u0e04\u0e23\u0e19<\/span>\r\n <\/h1>\r\n <p class=\"text-gray-200 text-lg md:text-xl font-normal leading-relaxed max-w-lg\">\r\n \u0e1c\u0e39\u0e49\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e22\u0e01\u0e41\u0e25\u0e30\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e22\u0e49\u0e32\u0e22\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e2b\u0e19\u0e31\u0e01 \u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\u0e41\u0e25\u0e30\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e40\u0e04\u0e35\u0e22\u0e07 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e44\u0e14\u0e49\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2a\u0e32\u0e01\u0e25\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-226\/\"\r\n class=\"flex min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-8 bg-primary text-[#181811] text-base font-bold leading-normal hover:bg-[#d9d90c] transition-colors shadow-xl\">\r\n \u0e14\u0e39\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n<\/a>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-221\/\"\r\n class=\"group flex min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-8 bg-white\/10 backdrop-blur-md border border-white\/20 text-white text-base font-bold leading-normal hover:bg-white\/20 hover:text-white transition-colors\">\r\n <span class=\"truncate text-white group-hover:text-white\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/span>\r\n<\/a>\r\n <\/div>\r\n\r\n <div class=\"flex gap-8 mt-4\">\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-primary text-2xl font-bold\">200+<\/span>\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <div class=\"w-px h-10 bg-white\/20\"><\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-primary text-2xl font-bold\">50+<\/span>\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22<\/span>\r\n <\/div>\r\n <div class=\"w-px h-10 bg-white\/20\"><\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e25\u0e2d\u0e14 24 \u0e0a\u0e21.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-white dark:bg-zinc-900\/50\">\r\n <div class=\"max-w-[1280px] mx-auto px-4 md:px-10\">\r\n <div class=\"flex flex-col items-center mb-10\">\r\n <h4 class=\"text-[#8a8a60] dark:text-primary text-sm font-bold leading-normal tracking-[0.2em] px-4 py-2 text-center uppercase\">\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e44\u0e27\u0e49\u0e27\u0e32\u0e07\u0e43\u0e08\u0e40\u0e23\u0e32<\/h4>\r\n <div class=\"w-12 h-1 bg-primary mt-2\"><\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"max-w-[1280px] mx-auto px-4 md:px-10 py-10\">\r\n <div class=\"flex flex-col items-start gap-2 mb-6\">\r\n <h2 class=\"text-2xl md:text-3xl font-black text-[#181811] dark:text-white\">\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/h2>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e01\u0e25\u0e49\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e41\u0e25\u0e30\u0e01\u0e14 \u201c\u0e19\u0e33\u0e17\u0e32\u0e07\u201d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e1b\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch\">\r\n \r\n <div class=\"rounded-xl overflow-hidden border border-[#e6e6db] dark:border-white\/10 bg-white dark:bg-zinc-900 shadow-sm\">\r\n <iframe id=\"branchMap\" class=\"w-full h-[360px]\" src=\"https:\/\/www.google.com\/maps?q=Work%20Crane%20Machinery%20and%20Service%20Co.,LTD&output=embed\"><\/iframe>\r\n <\/div>\r\n\r\n \r\n <div class=\"rounded-xl border border-[#e6e6db] dark:border-white\/10 bg-white dark:bg-zinc-900 shadow-sm p-6 flex flex-col justify-between\">\r\n <div>\r\n <h3 id=\"branchName\" class=\"text-2xl md:text-3xl font-black text-[#181811] dark:text-white\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026<\/h3>\r\n <div class=\"h-[2px] bg-[#eef2f8] dark:bg-white\/10 rounded-full my-4\"><\/div>\r\n <p id=\"branchAddress\" class=\"text-[#181811] dark:text-gray-200 text-base md:text-lg\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Location) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/p>\r\n <p id=\"branchDistance\" class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-2\"><\/p>\r\n <\/div>\r\n\r\n <div class=\"mt-6 flex flex-wrap gap-3\">\r\n <a id=\"btnDirections\" class=\"flex-1 min-w-[180px] h-12 rounded-lg bg-primary text-[#181811] font-bold flex items-center justify-center hover:bg-opacity-90 transition-all\"\r\n href=\"#\" target=\"_blank\" rel=\"noopener\">\u0e19\u0e33\u0e17\u0e32\u0e07\u0e44\u0e1b\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e35\u0e49<\/a>\r\n <a id=\"btnCall\"\r\n class=\"group flex-1 min-w-[180px] h-12 rounded-lg\r\n bg-blue-600 text-white font-bold flex items-center justify-center\r\n hover:bg-blue-700 hover:text-white\r\n transition-all duration-300\"\r\n href=\"#\">\r\n <span id=\"btnCallText\" class=\"text-white group-hover:text-white\">\u0e42\u0e17\u0e23\u0e2b\u0e32\u0e40\u0e23\u0e32<\/span>\r\n<\/a>\r\n <\/div>\r\n\r\n <button id=\"btnManual\" class=\"mt-4 h-11 rounded-lg bg-primary text-[#181811] text-sm font-bold hover:bg-[#d9d90c] transition-colors\" type=\"button\">\r\n \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07\r\n <\/button>\r\n\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"max-w-[1280px] mx-auto px-4 md:px-10 py-16\">\r\n <div class=\"flex items-center justify-between mb-8 px-4\">\r\n <div>\r\n <h2 class=\"text-3xl font-black text-[#181811] dark:text-white\">\u0e23\u0e16\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h2>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400\">\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e31\u0e01\u0e23\u0e17\u0e35\u0e48\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22\u0e41\u0e25\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e16\u0e37\u0e2d\u0e44\u0e14\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button id=\"equipPrev\"\r\n class=\"p-2 border border-[#e6e6db] dark:border-white\/10 rounded-lg hover:bg-primary transition-colors group\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-white group-hover:text-[#181811]\">chevron_left<\/span>\r\n <\/button>\r\n <button id=\"equipNext\"\r\n class=\"p-2 border border-[#e6e6db] dark:border-white\/10 rounded-lg hover:bg-primary transition-colors group\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-white group-hover:text-[#181811]\">chevron_right<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"equipSlider\"\r\n class=\"overflow-x-auto scroll-smooth [-ms-scrollbar-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\r\n <div class=\"flex items-stretch p-4 gap-6\">\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__24952847_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 16 \u0e15\u0e31\u0e19 <\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC160C<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1024\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__10354837.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 25 \u0e15\u0e31\u0e19 4 \u0e25\u0e49\u0e2d<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 SRC250C<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1066\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/53538_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 25 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC250<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1084\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__98541643_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 35 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC350T4<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1089\/\"\r\n\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/423186_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 60 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\"> \u0e23\u0e38\u0e48\u0e19 STC600T5<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1146\/\"\r\n\r\n \r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <footer class=\"bg-black text-white py-16\">\r\n <div class=\"max-w-[1280px] mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6 flex flex-col gap-6\">\r\n <div class=\"flex items-center gap-2 text-primary\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 48 48\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z\" fill=\"currentColor\"><\/path>\r\n <\/svg>\r\n <span class=\"text-2xl font-black\">WCMS<\/span>\r\n <\/div>\r\n <p class=\"text-gray-300 text-sm leading-relaxed\">\r\n \u0e1c\u0e39\u0e49\u0e19\u0e33\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e48\u0e32\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e41\u0e25\u0e30\u0e42\u0e0b\u0e25\u0e39\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e01\u0e43\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u0e40\u0e23\u0e32\u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e17\u0e38\u0e01\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\r\n <\/p>\r\n \r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e40\u0e21\u0e19\u0e39\u0e17\u0e32\u0e07\u0e25\u0e31\u0e14<\/h5>\r\n <ul class=\"flex flex-col gap-4 text-sm text-gray-300\">\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-221\/\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-226\/\">\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/portfolio\/\">\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/about\/\">\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/articles\/\">\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/contact\/\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-301\/\">\u0e02\u0e2d\u0e43\u0e1a\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e32\u0e04\u0e32<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/h5>\r\n <ul class=\"flex flex-col gap-4 text-sm text-gray-300\">\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <span>\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35, \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">call<\/span>\r\n <span>063-939-1515<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">mail<\/span>\r\n <span>tamonpat@workcrane.co.th<\/span>\r\n <\/li>\r\n <br>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <span>\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23, \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">call<\/span>\r\n <span>088-079-5555, 034-136-209<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">mail<\/span>\r\n <span>workcrane2017@gmail.com<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e40\u0e27\u0e25\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23<\/h5>\r\n <div class=\"bg-white\/8 border border-white\/10 p-4 rounded-lg\">\r\n <div class=\"flex justify-between text-xs mb-2\">\r\n <span>\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c - \u0e40\u0e2a\u0e32\u0e23\u0e4c:<\/span>\r\n <span class=\"text-primary font-bold\">08:00 - 18:00<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-xs\">\r\n <span>\u0e2d\u0e32\u0e17\u0e34\u0e15\u0e22\u0e4c:<\/span>\r\n <span class=\"text-gray-500\">\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e01\u0e23\u0e13\u0e35\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/footer>\r\n <\/div>\r\n\r\n\r\n<div id=\"branchPickerModal\"\r\n class=\"fixed inset-0 z-[9999] hidden items-center justify-center p-4\">\r\n \r\n <div class=\"absolute inset-0 bg-black\/70\"><\/div>\r\n\r\n \r\n <div class=\"relative w-full max-w-md rounded-2xl bg-white dark:bg-zinc-900 border border-[#e6e6db] dark:border-white\/10 shadow-2xl overflow-hidden\">\r\n <div class=\"p-6\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <h3 class=\"text-xl font-black text-[#181811] dark:text-white\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07<\/h3>\r\n <\/div>\r\n\r\n <p class=\"mt-2 text-sm text-[#8a8a60] dark:text-gray-400\">\r\n \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32 (\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01 1 \u0e2a\u0e32\u0e02\u0e32)\r\n <\/p>\r\n\r\n <div class=\"mt-5 grid grid-cols-1 gap-3\">\r\n <button id=\"pickPathum\"\r\n class=\"h-12 rounded-xl bg-primary text-[#181811] text-lg font-black hover:bg-opacity-90 transition\">\r\n \u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n <\/button>\r\n\r\n <button id=\"pickSamut\"\r\n class=\"h-12 rounded-xl bg-blue-600 border border-blue-500 text-white text-lg font-black hover:bg-blue-700 transition\">\r\n \u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"mt-5 text-xs text-[#8a8a60] dark:text-gray-400\">\r\n *\u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n \r\n \r\n \r\n<script>\r\n \/\/ =========================\r\n \/\/ A) BRANCH AUTO PICK\r\n \/\/ =========================\r\n\r\n const BRANCHES = [\r\n {\r\n id: \"pathum\",\r\n name: \"\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 (\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04\u0e40\u0e04\u0e23\u0e19 \u0e41\u0e21\u0e0a\u0e0a\u0e35\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c \u0e41\u0e2d\u0e19\u0e14\u0e4c \u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e27\u0e34\u0e2a \u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35)\",\r\n address: \"70\/9 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15.\u0e1a\u0e32\u0e07\u0e04\u0e39\u0e27\u0e31\u0e14 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 \u0e08.\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 12000\",\r\n \/\/ \u2705 \u0e43\u0e2a\u0e48\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e08\u0e23\u0e34\u0e07\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e19\u0e27\u0e13\u0e43\u0e01\u0e25\u0e49\u0e2a\u0e38\u0e14\u0e41\u0e21\u0e48\u0e19 100%\r\n lat: 13.957159501123638, \/\/ <-- \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e44\u0e14\u0e49\r\n lng: 100.49536458912769, \/\/ <-- \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e44\u0e14\u0e49\r\n phone: \"063-939-1515\",\r\n directionsUrl: (lat, lng) => `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${lat},${lng}`,\r\n embedUrl: (lat, lng) => `https:\/\/www.google.com\/maps?q=${lat},${lng}&output=embed`,\r\n },\r\n {\r\n id: \"samut\",\r\n name: \"\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23 (Work Crane Machinery and Service Co., LTD)\",\r\n address: \"99 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 3 \u0e15.\u0e04\u0e25\u0e2d\u0e07\u0e21\u0e30\u0e40\u0e14\u0e37\u0e48\u0e2d \u0e2d.\u0e01\u0e23\u0e30\u0e17\u0e38\u0e48\u0e21\u0e41\u0e1a\u0e19 \u0e08.\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23 74110\",\r\n lat: 13.645920875895362,\r\n lng:100.28090888499764,\r\n phone: \"088-079-5555,034-136-209\",\r\n directionsUrl: (lat, lng) =>\r\n `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${lat},${lng}`,\r\n embedUrl: (lat, lng) =>\r\n `https:\/\/www.google.com\/maps?q=${lat},${lng}&output=embed`,\r\n }\r\n ];\r\n\r\n function toRad(deg) { return deg * Math.PI \/ 180; }\r\n function haversineKm(lat1, lon1, lat2, lon2) {\r\n const R = 6371;\r\n const dLat = toRad(lat2 - lat1);\r\n const dLon = toRad(lon2 - lon1);\r\n const a =\r\n Math.sin(dLat \/ 2) ** 2 +\r\n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon \/ 2) ** 2;\r\n return 2 * R * Math.asin(Math.sqrt(a));\r\n }\r\n function formatDistance(km) {\r\n if (km < 1) return `${Math.round(km * 1000)} \u0e21.`;\r\n return `${km.toFixed(1)} \u0e01\u0e21.`;\r\n }\r\n\r\n function setBranchUI(branch, distanceKm) {\r\n const nameEl = document.getElementById(\"branchName\");\r\n const addrEl = document.getElementById(\"branchAddress\");\r\n const distEl = document.getElementById(\"branchDistance\");\r\n const mapEl = document.getElementById(\"branchMap\");\r\n const dirEl = document.getElementById(\"btnDirections\");\r\n const callEl = document.getElementById(\"btnCall\");\r\n const topHint = document.getElementById(\"topBranchHint\");\r\n\r\n if (nameEl) nameEl.textContent = branch.name;\r\n if (addrEl) addrEl.textContent = branch.address;\r\n\r\n if (distEl) {\r\n distEl.textContent = (typeof distanceKm === \"number\")\r\n ? `\u0e23\u0e30\u0e22\u0e30\u0e17\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13: ${formatDistance(distanceKm)}`\r\n : \"\";\r\n }\r\n\r\n if (dirEl) dirEl.href = branch.directionsUrl(branch.lat, branch.lng);\r\n if (callEl) callEl.href = `tel:${branch.phone}`;\r\n\r\n if (mapEl) {\r\n if (branch.embedFixed) mapEl.src = branch.embedFixed;\r\n else mapEl.src = branch.embedUrl(branch.lat, branch.lng);\r\n }\r\n\r\n if (topHint) {\r\n topHint.textContent = `\u0e40\u0e23\u0e32\u0e1e\u0e1a\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e01\u0e25\u0e49${branch.id === \"pathum\" ? \"\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\" : \"\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\"}`;\r\n }\r\n updateCallButton(branch);\r\n }\r\n\r\n function pickNearestBranch(userLat, userLng) {\r\n let best = null;\r\n for (const b of BRANCHES) {\r\n if (typeof b.lat !== \"number\" || typeof b.lng !== \"number\") continue;\r\n const d = haversineKm(userLat, userLng, b.lat, b.lng);\r\n if (!best || d < best.distanceKm) best = { branch: b, distanceKm: d };\r\n }\r\n return best;\r\n }\r\n\r\n function locateAndAutoPick() {\r\n const addrEl = document.getElementById(\"branchAddress\");\r\n const distEl = document.getElementById(\"branchDistance\");\r\n const topHint = document.getElementById(\"topBranchHint\");\r\n\r\n if (!navigator.geolocation) {\r\n if (addrEl) addrEl.textContent = \"\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e38\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Geolocation)\";\r\n return;\r\n }\r\n\r\n if (addrEl) addrEl.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u2026\";\r\n if (distEl) distEl.textContent = \"\";\r\n if (topHint) topHint.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026\";\r\n\r\n navigator.geolocation.getCurrentPosition(\r\n (pos) => {\r\n const { latitude, longitude } = pos.coords;\r\n const nearest = pickNearestBranch(latitude, longitude);\r\n if (!nearest) {\r\n if (addrEl) addrEl.textContent = \"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2a\u0e32\u0e02\u0e32\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1e\u0e2d\";\r\n return;\r\n }\r\n setBranchUI(nearest.branch, nearest.distanceKm);\r\n },\r\n () => {\r\n if (addrEl) {\r\n addrEl.textContent =\r\n \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Location) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\";\r\n }\r\n if (distEl) distEl.textContent = \"\";\r\n \/\/ fallback: \u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n setBranchUI(BRANCHES[0], null);\r\n },\r\n { enableHighAccuracy: true, timeout: 8000, maximumAge: 60000 }\r\n );\r\n }\r\n\r\n\r\n function isMobileDevice() {\r\n return \/Android|iPhone|iPad|iPod\/i.test(navigator.userAgent);\r\n}\r\n\r\nfunction normalizeTel(phone) {\r\n return String(phone).replace(\/[^\\d+]\/g, \"\");\r\n}\r\n\r\nfunction updateCallButton(branch) {\r\n const callEl = document.getElementById(\"btnCall\");\r\n const textEl = document.getElementById(\"btnCallText\");\r\n if (!callEl || !textEl) return;\r\n\r\n const phones = Array.isArray(branch.phone) ? branch.phone : [branch.phone];\r\n const first = phones[0] || \"\";\r\n const tel = normalizeTel(first);\r\n\r\n if (isMobileDevice()) {\r\n \/\/ \u2705 \u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d: \u0e01\u0e14\u0e42\u0e17\u0e23\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\r\n callEl.href = tel ? `tel:${tel}` : \"#\";\r\n callEl.target = \"\"; \/\/ \u0e01\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e41\u0e17\u0e47\u0e1a\u0e43\u0e2b\u0e21\u0e48\r\n callEl.rel = \"\";\r\n textEl.textContent = \"\u0e42\u0e17\u0e23\u0e2b\u0e32\u0e40\u0e23\u0e32\";\r\n callEl.onclick = null; \/\/ \u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35 handler\r\n } else {\r\n \/\/ \u2705 Windows\/Desktop: \u0e41\u0e2a\u0e14\u0e07\u0e40\u0e1a\u0e2d\u0e23\u0e4c (\u0e41\u0e25\u0e30\u0e01\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01)\r\n callEl.href = \"#\";\r\n callEl.target = \"\";\r\n callEl.rel = \"\";\r\n textEl.textContent = `\u0e42\u0e17\u0e23: ${first}`;\r\n\r\n callEl.onclick = async (e) => {\r\n e.preventDefault();\r\n try {\r\n await navigator.clipboard.writeText(first);\r\n textEl.textContent = `\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27: ${first}`;\r\n setTimeout(() => (textEl.textContent = `\u0e42\u0e17\u0e23: ${first}`), 1200);\r\n } catch {\r\n window.prompt(\"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49:\", first);\r\n }\r\n };\r\n }\r\n}\r\n \/\/ =========================\r\n \/\/ A2) MANUAL BRANCH PICKER (\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e01\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01)\r\n \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35 HTML modal \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32:\r\n \/\/ #branchPickerModal, #pickPathum, #pickSamut\r\n \/\/ =========================\r\n function bindManualBranchButtons() {\r\n const btnManual = document.getElementById(\"btnManual\");\r\n const btnManualTop = document.getElementById(\"btnManualTop\");\r\n\r\n const modal = document.getElementById(\"branchPickerModal\");\r\n const pickPathum = document.getElementById(\"pickPathum\");\r\n const pickSamut = document.getElementById(\"pickSamut\");\r\n\r\n \/\/ \u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e2a\u0e48 modal \u0e08\u0e30\u0e44\u0e21\u0e48\u0e17\u0e33\u0e07\u0e32\u0e19 (\u0e01\u0e31\u0e19 error)\r\n if (!modal || !pickPathum || !pickSamut) return;\r\n\r\n const pathum = BRANCHES.find(b => b.id === \"pathum\");\r\n const samut = BRANCHES.find(b => b.id === \"samut\");\r\n\r\n function openModal() {\r\n modal.classList.remove(\"hidden\");\r\n modal.classList.add(\"flex\");\r\n document.body.style.overflow = \"hidden\"; \/\/ \u0e25\u0e47\u0e2d\u0e01 scroll\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.add(\"hidden\");\r\n modal.classList.remove(\"flex\");\r\n document.body.style.overflow = \"\";\r\n }\r\n\r\n btnManual?.addEventListener(\"click\", openModal);\r\n btnManualTop?.addEventListener(\"click\", openModal);\r\n\r\n pickPathum.addEventListener(\"click\", () => {\r\n setBranchUI(pathum, null);\r\n closeModal();\r\n });\r\n\r\n pickSamut.addEventListener(\"click\", () => {\r\n setBranchUI(samut, null);\r\n closeModal();\r\n });\r\n\r\n \/\/ \u0e01\u0e31\u0e19\u0e1b\u0e34\u0e14\u0e14\u0e49\u0e27\u0e22 ESC\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (!modal.classList.contains(\"hidden\") && e.key === \"Escape\") {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n });\r\n\r\n \/\/ \u0e04\u0e25\u0e34\u0e01 backdrop \u0e44\u0e21\u0e48\u0e1b\u0e34\u0e14 (\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)\r\n modal.addEventListener(\"click\", (e) => {\r\n e.stopPropagation();\r\n });\r\n }\r\n\r\n \/\/ =========================\r\n \/\/ B) EQUIPMENT SLIDER\r\n \/\/ =========================\r\n function initEquipmentSlider() {\r\n const slider = document.getElementById(\"equipSlider\");\r\n const btnNext = document.getElementById(\"equipNext\");\r\n const btnPrev = document.getElementById(\"equipPrev\");\r\n if (!slider || !btnNext || !btnPrev) return;\r\n\r\n const cards = slider.querySelectorAll(\".equip-card\");\r\n const SCROLL_AMOUNT = 344; \/\/ 320 + gap(24)\r\n\r\n if (cards.length > 3) {\r\n btnNext.disabled = false;\r\n btnPrev.disabled = false;\r\n\r\n btnNext.addEventListener(\"click\", () => {\r\n slider.scrollBy({ left: SCROLL_AMOUNT, behavior: \"smooth\" });\r\n });\r\n btnPrev.addEventListener(\"click\", () => {\r\n slider.scrollBy({ left: -SCROLL_AMOUNT, behavior: \"smooth\" });\r\n });\r\n } else {\r\n btnNext.classList.add(\"opacity-30\", \"cursor-not-allowed\");\r\n btnPrev.classList.add(\"opacity-30\", \"cursor-not-allowed\");\r\n btnNext.disabled = true;\r\n btnPrev.disabled = true;\r\n }\r\n }\r\n\r\n \/\/ =========================\r\n \/\/ INIT\r\n \/\/ =========================\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n bindManualBranchButtons();\r\n locateAndAutoPick();\r\n initEquipmentSlider();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdfff34 e-flex e-con-boxed e-con e-parent\" data-id=\"bdfff34\" 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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WCMS – \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","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":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-118","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":120,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118\/revisions"}],"predecessor-version":[{"id":1660,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118\/revisions\/1660"}],"wp:attachment":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/media?parent=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n WCMS - \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/title>\r\n\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <script id=\"tailwind-config\">\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n colors: {\r\n \"primary\": \"#f2f20d\",\r\n \"background-light\": \"#f8f8f5\",\r\n \"background-dark\": \"#181811\",\r\n },\r\n fontFamily: {\r\n \"display\": [\"Prompt\", \"sans-serif\"],\r\n \"sans\": [\"Sarabun\", \"sans-serif\"]\r\n },\r\n borderRadius: {\"DEFAULT\": \"0.25rem\", \"lg\": \"0.5rem\", \"xl\": \"0.75rem\", \"full\": \"9999px\"},\r\n },\r\n },\r\n }\r\n <\/script>\r\n\r\n <style type=\"text\/tailwindcss\">\r\n body { font-family: 'Sarabun', sans-serif; }\r\n h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Prompt', sans-serif; }\r\n .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\r\n a, a:hover, a:focus, a:visited {\r\n text-decoration: none !important;\r\n }\r\n a[x-apple-data-detectors],\r\n a[x-apple-data-detectors]:hover,\r\n a[x-apple-data-detectors]:focus,\r\n a[x-apple-data-detectors]:visited {\r\n color: inherit !important;\r\n text-decoration: none !important;\r\n -webkit-text-decoration: none !important;\r\n border-bottom: 0 !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"bg-background-light dark:bg-background-dark text-[#181811] dark:text-white transition-colors duration-200\">\r\n <div class=\"relative flex h-auto min-h-screen w-full flex-col group\/design-root overflow-x-hidden\">\r\n\r\n \r\n <div class=\"w-full bg-white dark:bg-zinc-900 border-b border-[#e6e6db] dark:border-white\/10\">\r\n <div class=\"max-w-[1280px] mx-auto px-4 @container\">\r\n <div class=\"flex flex-col items-start justify-between gap-4 py-3 @[480px]:flex-row @[480px]:items-center\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-primary\">location_on<\/span>\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-[#181811] dark:text-white text-sm font-bold leading-tight\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\r\n <p id=\"topBranchHint\" class=\"text-[#8a8a60] dark:text-gray-400 text-xs font-normal leading-normal\">\r\n \u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button id=\"btnManualTop\"\r\n class=\"flex min-w-[170px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary text-[#181811] text-sm font-bold leading-normal hover:bg-opacity-90 transition-all\">\r\n <span class=\"truncate\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07<\/span>\r\n <\/button>\r\n\r\n <div class=\"hidden @[640px]:flex items-center gap-2 px-2 border-l border-gray-200 dark:border-white\/10 ml-2\">\r\n <span class=\"text-sm text-gray-600 uppercase font-extrabold\">\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e21\u0e35:<\/span>\r\n <span class=\"text-sm font-semibold px-2.5 py-1 bg-gray-100 dark:bg-white\/5 rounded\">\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35<\/span>\r\n <span class=\"text-sm font-semibold px-2.5 py-1 bg-gray-100 dark:bg-white\/5 rounded\">\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n\r\n <main class=\"flex-grow\">\r\n \r\n <section class=\"w-full py-0\">\r\n <div class=\"w-full @container\">\r\n <div class=\"w-full\">\r\n <div class=\"flex min-h-screen w-full flex-col gap-8 bg-cover bg-center bg-no-repeat items-start justify-center px-6 py-12 md:px-16\"\r\n style='background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%), url(\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuAw8FcKIQVsB23kAx-dtvIyrz_FzgItbipH-tuejyfEsRwIFMca1zYc8VZJJuVmtvwg0OXmjBCQwsT4-RvL8IWDSZkFdB4UHVbKPE-DRzre0DIDsXd41zCbVC7IKyVao7fnN5Bk9dPPG-TxwN6R6FTM4RD9BtWOfbQuerX70o3kQP8vbfPzfLb3UHE_p-g6-GekJS0x4JrJ92Roju8E_L_3V7bmTDX84JwxouZpNu2FkenuGibSVQZ-fUtfaRtrW4xVJVczbT1xOAs\");'>\r\n <div class=\"flex flex-col gap-4 max-w-2xl\">\r\n <span class=\"bg-primary text-[#181811] text-xs font-bold px-3 py-1 rounded w-fit uppercase tracking-widest\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e40\u0e0a\u0e48\u0e32\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21<\/span>\r\n <h1 class=\"text-white text-5xl md:text-7xl font-black leading-tight\">\r\n \u0e22\u0e01\u0e44\u0e14\u0e49... \u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a <br \/><span class=\"text-primary\">\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04\u0e40\u0e04\u0e23\u0e19<\/span>\r\n <\/h1>\r\n <p class=\"text-gray-200 text-lg md:text-xl font-normal leading-relaxed max-w-lg\">\r\n \u0e1c\u0e39\u0e49\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e22\u0e01\u0e41\u0e25\u0e30\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e22\u0e49\u0e32\u0e22\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e2b\u0e19\u0e31\u0e01 \u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\u0e41\u0e25\u0e30\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e40\u0e04\u0e35\u0e22\u0e07 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e44\u0e14\u0e49\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2a\u0e32\u0e01\u0e25\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-226\/\"\r\n class=\"flex min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-8 bg-primary text-[#181811] text-base font-bold leading-normal hover:bg-[#d9d90c] transition-colors shadow-xl\">\r\n \u0e14\u0e39\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n<\/a>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-221\/\"\r\n class=\"group flex min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-8 bg-white\/10 backdrop-blur-md border border-white\/20 text-white text-base font-bold leading-normal hover:bg-white\/20 hover:text-white transition-colors\">\r\n <span class=\"truncate text-white group-hover:text-white\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/span>\r\n<\/a>\r\n <\/div>\r\n\r\n <div class=\"flex gap-8 mt-4\">\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-primary text-2xl font-bold\">200+<\/span>\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <div class=\"w-px h-10 bg-white\/20\"><\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-primary text-2xl font-bold\">50+<\/span>\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22<\/span>\r\n <\/div>\r\n <div class=\"w-px h-10 bg-white\/20\"><\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-white\/60 text-xs font-medium uppercase tracking-tighter\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e25\u0e2d\u0e14 24 \u0e0a\u0e21.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 bg-white dark:bg-zinc-900\/50\">\r\n <div class=\"max-w-[1280px] mx-auto px-4 md:px-10\">\r\n <div class=\"flex flex-col items-center mb-10\">\r\n <h4 class=\"text-[#8a8a60] dark:text-primary text-sm font-bold leading-normal tracking-[0.2em] px-4 py-2 text-center uppercase\">\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e44\u0e27\u0e49\u0e27\u0e32\u0e07\u0e43\u0e08\u0e40\u0e23\u0e32<\/h4>\r\n <div class=\"w-12 h-1 bg-primary mt-2\"><\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"max-w-[1280px] mx-auto px-4 md:px-10 py-10\">\r\n <div class=\"flex flex-col items-start gap-2 mb-6\">\r\n <h2 class=\"text-2xl md:text-3xl font-black text-[#181811] dark:text-white\">\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/h2>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e01\u0e25\u0e49\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e41\u0e25\u0e30\u0e01\u0e14 \u201c\u0e19\u0e33\u0e17\u0e32\u0e07\u201d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e1b\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch\">\r\n \r\n <div class=\"rounded-xl overflow-hidden border border-[#e6e6db] dark:border-white\/10 bg-white dark:bg-zinc-900 shadow-sm\">\r\n <iframe id=\"branchMap\" class=\"w-full h-[360px]\" src=\"https:\/\/www.google.com\/maps?q=Work%20Crane%20Machinery%20and%20Service%20Co.,LTD&output=embed\"><\/iframe>\r\n <\/div>\r\n\r\n \r\n <div class=\"rounded-xl border border-[#e6e6db] dark:border-white\/10 bg-white dark:bg-zinc-900 shadow-sm p-6 flex flex-col justify-between\">\r\n <div>\r\n <h3 id=\"branchName\" class=\"text-2xl md:text-3xl font-black text-[#181811] dark:text-white\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026<\/h3>\r\n <div class=\"h-[2px] bg-[#eef2f8] dark:bg-white\/10 rounded-full my-4\"><\/div>\r\n <p id=\"branchAddress\" class=\"text-[#181811] dark:text-gray-200 text-base md:text-lg\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Location) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/p>\r\n <p id=\"branchDistance\" class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-2\"><\/p>\r\n <\/div>\r\n\r\n <div class=\"mt-6 flex flex-wrap gap-3\">\r\n <a id=\"btnDirections\" class=\"flex-1 min-w-[180px] h-12 rounded-lg bg-primary text-[#181811] font-bold flex items-center justify-center hover:bg-opacity-90 transition-all\"\r\n href=\"#\" target=\"_blank\" rel=\"noopener\">\u0e19\u0e33\u0e17\u0e32\u0e07\u0e44\u0e1b\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e35\u0e49<\/a>\r\n <a id=\"btnCall\"\r\n class=\"group flex-1 min-w-[180px] h-12 rounded-lg\r\n bg-blue-600 text-white font-bold flex items-center justify-center\r\n hover:bg-blue-700 hover:text-white\r\n transition-all duration-300\"\r\n href=\"#\">\r\n <span id=\"btnCallText\" class=\"text-white group-hover:text-white\">\u0e42\u0e17\u0e23\u0e2b\u0e32\u0e40\u0e23\u0e32<\/span>\r\n<\/a>\r\n <\/div>\r\n\r\n <button id=\"btnManual\" class=\"mt-4 h-11 rounded-lg bg-primary text-[#181811] text-sm font-bold hover:bg-[#d9d90c] transition-colors\" type=\"button\">\r\n \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07\r\n <\/button>\r\n\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"max-w-[1280px] mx-auto px-4 md:px-10 py-16\">\r\n <div class=\"flex items-center justify-between mb-8 px-4\">\r\n <div>\r\n <h2 class=\"text-3xl font-black text-[#181811] dark:text-white\">\u0e23\u0e16\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h2>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400\">\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e31\u0e01\u0e23\u0e17\u0e35\u0e48\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22\u0e41\u0e25\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e16\u0e37\u0e2d\u0e44\u0e14\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button id=\"equipPrev\"\r\n class=\"p-2 border border-[#e6e6db] dark:border-white\/10 rounded-lg hover:bg-primary transition-colors group\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-white group-hover:text-[#181811]\">chevron_left<\/span>\r\n <\/button>\r\n <button id=\"equipNext\"\r\n class=\"p-2 border border-[#e6e6db] dark:border-white\/10 rounded-lg hover:bg-primary transition-colors group\">\r\n <span class=\"material-symbols-outlined text-[#181811] dark:text-white group-hover:text-[#181811]\">chevron_right<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"equipSlider\"\r\n class=\"overflow-x-auto scroll-smooth [-ms-scrollbar-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\r\n <div class=\"flex items-stretch p-4 gap-6\">\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__24952847_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 16 \u0e15\u0e31\u0e19 <\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC160C<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1024\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__10354837.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 25 \u0e15\u0e31\u0e19 4 \u0e25\u0e49\u0e2d<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 SRC250C<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1066\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/53538_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 25 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC250<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1084\/\"\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/S__98541643_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 35 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\">\u0e23\u0e38\u0e48\u0e19 STC350T4<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1089\/\"\r\n\r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"equip-card flex h-full flex-col rounded-xl min-w-[320px] bg-white dark:bg-zinc-900 shadow-sm border border-[#e6e6db] dark:border-white\/5 overflow-hidden group\">\r\n <div class=\"w-full bg-center bg-no-repeat aspect-[4\/3] bg-cover flex flex-col relative overflow-hidden\"\r\n style='background-image: url(\"https:\/\/workcrane.co.th\/wp-content\/uploads\/2026\/02\/423186_0.jpg\");'>\r\n <div class=\"absolute inset-0 bg-primary\/0 group-hover:bg-primary\/10 transition-colors\"><\/div>\r\n <\/div>\r\n <div class=\"p-5 flex flex-1 flex-col\">\r\n <h3 class=\"text-xl font-bold text-[#181811] dark:text-white\">\u0e40\u0e04\u0e23\u0e19 60 \u0e15\u0e31\u0e19<\/h3>\r\n <p class=\"text-[#8a8a60] dark:text-gray-400 text-sm mt-1\"> \u0e23\u0e38\u0e48\u0e19 STC600T5<\/p>\r\n <a href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-1146\/\"\r\n\r\n \r\n class=\"mt-auto flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-bold text-[#181811] transition-colors hover:bg-[#d9d90c]\">\r\n \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <footer class=\"bg-black text-white py-16\">\r\n <div class=\"max-w-[1280px] mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6 flex flex-col gap-6\">\r\n <div class=\"flex items-center gap-2 text-primary\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 48 48\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z\" fill=\"currentColor\"><\/path>\r\n <\/svg>\r\n <span class=\"text-2xl font-black\">WCMS<\/span>\r\n <\/div>\r\n <p class=\"text-gray-300 text-sm leading-relaxed\">\r\n \u0e1c\u0e39\u0e49\u0e19\u0e33\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e48\u0e32\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e41\u0e25\u0e30\u0e42\u0e0b\u0e25\u0e39\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e01\u0e43\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u0e40\u0e23\u0e32\u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e17\u0e38\u0e01\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\r\n <\/p>\r\n \r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e40\u0e21\u0e19\u0e39\u0e17\u0e32\u0e07\u0e25\u0e31\u0e14<\/h5>\r\n <ul class=\"flex flex-col gap-4 text-sm text-gray-300\">\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-221\/\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-226\/\">\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/portfolio\/\">\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/about\/\">\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/articles\/\">\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/contact\/\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/a><\/li>\r\n <li><a class=\"no-underline hover:no-underline hover:text-primary transition-colors\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-301\/\">\u0e02\u0e2d\u0e43\u0e1a\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e32\u0e04\u0e32<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/h5>\r\n <ul class=\"flex flex-col gap-4 text-sm text-gray-300\">\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <span>\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35, \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">call<\/span>\r\n <span>063-939-1515<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">mail<\/span>\r\n <span>tamonpat@workcrane.co.th<\/span>\r\n <\/li>\r\n <br>\r\n\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <span>\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23, \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">call<\/span>\r\n <span>088-079-5555, 034-136-209<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">mail<\/span>\r\n <span>workcrane2017@gmail.com<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl border border-white\/10 bg-white\/[0.03] p-6\">\r\n <h5 class=\"text-lg font-bold mb-6 text-primary\">\u0e40\u0e27\u0e25\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23<\/h5>\r\n <div class=\"bg-white\/8 border border-white\/10 p-4 rounded-lg\">\r\n <div class=\"flex justify-between text-xs mb-2\">\r\n <span>\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c - \u0e40\u0e2a\u0e32\u0e23\u0e4c:<\/span>\r\n <span class=\"text-primary font-bold\">08:00 - 18:00<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-xs\">\r\n <span>\u0e2d\u0e32\u0e17\u0e34\u0e15\u0e22\u0e4c:<\/span>\r\n <span class=\"text-gray-500\">\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e01\u0e23\u0e13\u0e35\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/footer>\r\n <\/div>\r\n\r\n\r\n<div id=\"branchPickerModal\"\r\n class=\"fixed inset-0 z-[9999] hidden items-center justify-center p-4\">\r\n \r\n <div class=\"absolute inset-0 bg-black\/70\"><\/div>\r\n\r\n \r\n <div class=\"relative w-full max-w-md rounded-2xl bg-white dark:bg-zinc-900 border border-[#e6e6db] dark:border-white\/10 shadow-2xl overflow-hidden\">\r\n <div class=\"p-6\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"material-symbols-outlined text-primary\">location_on<\/span>\r\n <h3 class=\"text-xl font-black text-[#181811] dark:text-white\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e14\u0e49\u0e27\u0e22\u0e15\u0e19\u0e40\u0e2d\u0e07<\/h3>\r\n <\/div>\r\n\r\n <p class=\"mt-2 text-sm text-[#8a8a60] dark:text-gray-400\">\r\n \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32 (\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01 1 \u0e2a\u0e32\u0e02\u0e32)\r\n <\/p>\r\n\r\n <div class=\"mt-5 grid grid-cols-1 gap-3\">\r\n <button id=\"pickPathum\"\r\n class=\"h-12 rounded-xl bg-primary text-[#181811] text-lg font-black hover:bg-opacity-90 transition\">\r\n \u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n <\/button>\r\n\r\n <button id=\"pickSamut\"\r\n class=\"h-12 rounded-xl bg-blue-600 border border-blue-500 text-white text-lg font-black hover:bg-blue-700 transition\">\r\n \u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"mt-5 text-xs text-[#8a8a60] dark:text-gray-400\">\r\n *\u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n \r\n \r\n \r\n<script>\r\n \/\/ =========================\r\n \/\/ A) BRANCH AUTO PICK\r\n \/\/ =========================\r\n\r\n const BRANCHES = [\r\n {\r\n id: \"pathum\",\r\n name: \"\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 (\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04\u0e40\u0e04\u0e23\u0e19 \u0e41\u0e21\u0e0a\u0e0a\u0e35\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c \u0e41\u0e2d\u0e19\u0e14\u0e4c \u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e27\u0e34\u0e2a \u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35)\",\r\n address: \"70\/9 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15.\u0e1a\u0e32\u0e07\u0e04\u0e39\u0e27\u0e31\u0e14 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 \u0e08.\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35 12000\",\r\n \/\/ \u2705 \u0e43\u0e2a\u0e48\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e08\u0e23\u0e34\u0e07\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e19\u0e27\u0e13\u0e43\u0e01\u0e25\u0e49\u0e2a\u0e38\u0e14\u0e41\u0e21\u0e48\u0e19 100%\r\n lat: 13.957159501123638, \/\/ <-- \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e44\u0e14\u0e49\r\n lng: 100.49536458912769, \/\/ <-- \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e44\u0e14\u0e49\r\n phone: \"063-939-1515\",\r\n directionsUrl: (lat, lng) => `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${lat},${lng}`,\r\n embedUrl: (lat, lng) => `https:\/\/www.google.com\/maps?q=${lat},${lng}&output=embed`,\r\n },\r\n {\r\n id: \"samut\",\r\n name: \"\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23 (Work Crane Machinery and Service Co., LTD)\",\r\n address: \"99 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 3 \u0e15.\u0e04\u0e25\u0e2d\u0e07\u0e21\u0e30\u0e40\u0e14\u0e37\u0e48\u0e2d \u0e2d.\u0e01\u0e23\u0e30\u0e17\u0e38\u0e48\u0e21\u0e41\u0e1a\u0e19 \u0e08.\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23 74110\",\r\n lat: 13.645920875895362,\r\n lng:100.28090888499764,\r\n phone: \"088-079-5555,034-136-209\",\r\n directionsUrl: (lat, lng) =>\r\n `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${lat},${lng}`,\r\n embedUrl: (lat, lng) =>\r\n `https:\/\/www.google.com\/maps?q=${lat},${lng}&output=embed`,\r\n }\r\n ];\r\n\r\n function toRad(deg) { return deg * Math.PI \/ 180; }\r\n function haversineKm(lat1, lon1, lat2, lon2) {\r\n const R = 6371;\r\n const dLat = toRad(lat2 - lat1);\r\n const dLon = toRad(lon2 - lon1);\r\n const a =\r\n Math.sin(dLat \/ 2) ** 2 +\r\n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon \/ 2) ** 2;\r\n return 2 * R * Math.asin(Math.sqrt(a));\r\n }\r\n function formatDistance(km) {\r\n if (km < 1) return `${Math.round(km * 1000)} \u0e21.`;\r\n return `${km.toFixed(1)} \u0e01\u0e21.`;\r\n }\r\n\r\n function setBranchUI(branch, distanceKm) {\r\n const nameEl = document.getElementById(\"branchName\");\r\n const addrEl = document.getElementById(\"branchAddress\");\r\n const distEl = document.getElementById(\"branchDistance\");\r\n const mapEl = document.getElementById(\"branchMap\");\r\n const dirEl = document.getElementById(\"btnDirections\");\r\n const callEl = document.getElementById(\"btnCall\");\r\n const topHint = document.getElementById(\"topBranchHint\");\r\n\r\n if (nameEl) nameEl.textContent = branch.name;\r\n if (addrEl) addrEl.textContent = branch.address;\r\n\r\n if (distEl) {\r\n distEl.textContent = (typeof distanceKm === \"number\")\r\n ? `\u0e23\u0e30\u0e22\u0e30\u0e17\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13: ${formatDistance(distanceKm)}`\r\n : \"\";\r\n }\r\n\r\n if (dirEl) dirEl.href = branch.directionsUrl(branch.lat, branch.lng);\r\n if (callEl) callEl.href = `tel:${branch.phone}`;\r\n\r\n if (mapEl) {\r\n if (branch.embedFixed) mapEl.src = branch.embedFixed;\r\n else mapEl.src = branch.embedUrl(branch.lat, branch.lng);\r\n }\r\n\r\n if (topHint) {\r\n topHint.textContent = `\u0e40\u0e23\u0e32\u0e1e\u0e1a\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e01\u0e25\u0e49${branch.id === \"pathum\" ? \"\u0e2a\u0e32\u0e02\u0e32\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\" : \"\u0e2a\u0e32\u0e02\u0e32\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\"}`;\r\n }\r\n updateCallButton(branch);\r\n }\r\n\r\n function pickNearestBranch(userLat, userLng) {\r\n let best = null;\r\n for (const b of BRANCHES) {\r\n if (typeof b.lat !== \"number\" || typeof b.lng !== \"number\") continue;\r\n const d = haversineKm(userLat, userLng, b.lat, b.lng);\r\n if (!best || d < best.distanceKm) best = { branch: b, distanceKm: d };\r\n }\r\n return best;\r\n }\r\n\r\n function locateAndAutoPick() {\r\n const addrEl = document.getElementById(\"branchAddress\");\r\n const distEl = document.getElementById(\"branchDistance\");\r\n const topHint = document.getElementById(\"topBranchHint\");\r\n\r\n if (!navigator.geolocation) {\r\n if (addrEl) addrEl.textContent = \"\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e38\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Geolocation)\";\r\n return;\r\n }\r\n\r\n if (addrEl) addrEl.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u2026\";\r\n if (distEl) distEl.textContent = \"\";\r\n if (topHint) topHint.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e43\u0e01\u0e25\u0e49\u0e04\u0e38\u0e13\u2026\";\r\n\r\n navigator.geolocation.getCurrentPosition(\r\n (pos) => {\r\n const { latitude, longitude } = pos.coords;\r\n const nearest = pickNearestBranch(latitude, longitude);\r\n if (!nearest) {\r\n if (addrEl) addrEl.textContent = \"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2a\u0e32\u0e02\u0e32\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1e\u0e2d\";\r\n return;\r\n }\r\n setBranchUI(nearest.branch, nearest.distanceKm);\r\n },\r\n () => {\r\n if (addrEl) {\r\n addrEl.textContent =\r\n \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (Location) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\";\r\n }\r\n if (distEl) distEl.textContent = \"\";\r\n \/\/ fallback: \u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35\r\n setBranchUI(BRANCHES[0], null);\r\n },\r\n { enableHighAccuracy: true, timeout: 8000, maximumAge: 60000 }\r\n );\r\n }\r\n\r\n\r\n function isMobileDevice() {\r\n return \/Android|iPhone|iPad|iPod\/i.test(navigator.userAgent);\r\n}\r\n\r\nfunction normalizeTel(phone) {\r\n return String(phone).replace(\/[^\\d+]\/g, \"\");\r\n}\r\n\r\nfunction updateCallButton(branch) {\r\n const callEl = document.getElementById(\"btnCall\");\r\n const textEl = document.getElementById(\"btnCallText\");\r\n if (!callEl || !textEl) return;\r\n\r\n const phones = Array.isArray(branch.phone) ? branch.phone : [branch.phone];\r\n const first = phones[0] || \"\";\r\n const tel = normalizeTel(first);\r\n\r\n if (isMobileDevice()) {\r\n \/\/ \u2705 \u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d: \u0e01\u0e14\u0e42\u0e17\u0e23\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\r\n callEl.href = tel ? `tel:${tel}` : \"#\";\r\n callEl.target = \"\"; \/\/ \u0e01\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e41\u0e17\u0e47\u0e1a\u0e43\u0e2b\u0e21\u0e48\r\n callEl.rel = \"\";\r\n textEl.textContent = \"\u0e42\u0e17\u0e23\u0e2b\u0e32\u0e40\u0e23\u0e32\";\r\n callEl.onclick = null; \/\/ \u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35 handler\r\n } else {\r\n \/\/ \u2705 Windows\/Desktop: \u0e41\u0e2a\u0e14\u0e07\u0e40\u0e1a\u0e2d\u0e23\u0e4c (\u0e41\u0e25\u0e30\u0e01\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01)\r\n callEl.href = \"#\";\r\n callEl.target = \"\";\r\n callEl.rel = \"\";\r\n textEl.textContent = `\u0e42\u0e17\u0e23: ${first}`;\r\n\r\n callEl.onclick = async (e) => {\r\n e.preventDefault();\r\n try {\r\n await navigator.clipboard.writeText(first);\r\n textEl.textContent = `\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27: ${first}`;\r\n setTimeout(() => (textEl.textContent = `\u0e42\u0e17\u0e23: ${first}`), 1200);\r\n } catch {\r\n window.prompt(\"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e19\u0e35\u0e49:\", first);\r\n }\r\n };\r\n }\r\n}\r\n \/\/ =========================\r\n \/\/ A2) MANUAL BRANCH PICKER (\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e01\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01)\r\n \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35 HTML modal \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32:\r\n \/\/ #branchPickerModal, #pickPathum, #pickSamut\r\n \/\/ =========================\r\n function bindManualBranchButtons() {\r\n const btnManual = document.getElementById(\"btnManual\");\r\n const btnManualTop = document.getElementById(\"btnManualTop\");\r\n\r\n const modal = document.getElementById(\"branchPickerModal\");\r\n const pickPathum = document.getElementById(\"pickPathum\");\r\n const pickSamut = document.getElementById(\"pickSamut\");\r\n\r\n \/\/ \u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e43\u0e2a\u0e48 modal \u0e08\u0e30\u0e44\u0e21\u0e48\u0e17\u0e33\u0e07\u0e32\u0e19 (\u0e01\u0e31\u0e19 error)\r\n if (!modal || !pickPathum || !pickSamut) return;\r\n\r\n const pathum = BRANCHES.find(b => b.id === \"pathum\");\r\n const samut = BRANCHES.find(b => b.id === \"samut\");\r\n\r\n function openModal() {\r\n modal.classList.remove(\"hidden\");\r\n modal.classList.add(\"flex\");\r\n document.body.style.overflow = \"hidden\"; \/\/ \u0e25\u0e47\u0e2d\u0e01 scroll\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.add(\"hidden\");\r\n modal.classList.remove(\"flex\");\r\n document.body.style.overflow = \"\";\r\n }\r\n\r\n btnManual?.addEventListener(\"click\", openModal);\r\n btnManualTop?.addEventListener(\"click\", openModal);\r\n\r\n pickPathum.addEventListener(\"click\", () => {\r\n setBranchUI(pathum, null);\r\n closeModal();\r\n });\r\n\r\n pickSamut.addEventListener(\"click\", () => {\r\n setBranchUI(samut, null);\r\n closeModal();\r\n });\r\n\r\n \/\/ \u0e01\u0e31\u0e19\u0e1b\u0e34\u0e14\u0e14\u0e49\u0e27\u0e22 ESC\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (!modal.classList.contains(\"hidden\") && e.key === \"Escape\") {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n });\r\n\r\n \/\/ \u0e04\u0e25\u0e34\u0e01 backdrop \u0e44\u0e21\u0e48\u0e1b\u0e34\u0e14 (\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)\r\n modal.addEventListener(\"click\", (e) => {\r\n e.stopPropagation();\r\n });\r\n }\r\n\r\n \/\/ =========================\r\n \/\/ B) EQUIPMENT SLIDER\r\n \/\/ =========================\r\n function initEquipmentSlider() {\r\n const slider = document.getElementById(\"equipSlider\");\r\n const btnNext = document.getElementById(\"equipNext\");\r\n const btnPrev = document.getElementById(\"equipPrev\");\r\n if (!slider || !btnNext || !btnPrev) return;\r\n\r\n const cards = slider.querySelectorAll(\".equip-card\");\r\n const SCROLL_AMOUNT = 344; \/\/ 320 + gap(24)\r\n\r\n if (cards.length > 3) {\r\n btnNext.disabled = false;\r\n btnPrev.disabled = false;\r\n\r\n btnNext.addEventListener(\"click\", () => {\r\n slider.scrollBy({ left: SCROLL_AMOUNT, behavior: \"smooth\" });\r\n });\r\n btnPrev.addEventListener(\"click\", () => {\r\n slider.scrollBy({ left: -SCROLL_AMOUNT, behavior: \"smooth\" });\r\n });\r\n } else {\r\n btnNext.classList.add(\"opacity-30\", \"cursor-not-allowed\");\r\n btnPrev.classList.add(\"opacity-30\", \"cursor-not-allowed\");\r\n btnNext.disabled = true;\r\n btnPrev.disabled = true;\r\n }\r\n }\r\n\r\n \/\/ =========================\r\n \/\/ INIT\r\n \/\/ =========================\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n bindManualBranchButtons();\r\n locateAndAutoPick();\r\n initEquipmentSlider();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdfff34 e-flex e-con-boxed e-con e-parent\" data-id=\"bdfff34\" 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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WCMS – \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e23 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","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":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-118","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":120,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118\/revisions"}],"predecessor-version":[{"id":1660,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/118\/revisions\/1660"}],"wp:attachment":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/media?parent=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}