fix: Embed CSS directly in BaseLayout

- Removed external CSS import
- CSS now directly in <style> tag
- Tailwind @import inline
- More reliable for static builds

src/layouts/BaseLayout.astro

@@ -26,6 +26,9 @@ const { title, description, image } = Astro.props;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
     
+    <!-- Tailwind CSS -->
+    <link rel="stylesheet" href="/_astro/globals.css" />
+    
     <!-- SEO -->
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description || 'Deal Plus Tech - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
@@ -41,5 +44,36 @@ const { title, description, image } = Astro.props;
 </html>
 
 <style is:global>
-  @import "../styles/globals.css";
+@import "tailwindcss";
+
+:root {
+  --color-primary-600: #22c55e;
+  --color-primary-700: #16a34a;
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  --color-accent-500: #eab308;
+}
+
+html {
+  font-family: 'Kanit', system-ui, sans-serif;
+}
+
+@media (min-width: 1280px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 1536px) {
+  html {
+    font-size: 20px;
+  }
+}
 </style>