fix: Convert CSS to Tailwind v4 syntax

- Uses @theme for custom colors (Tailwind v4)
- Plain CSS for components (no @layer/@apply)
- CSS variables from @theme
- All old classes preserved (.btn-primary, .card, etc.)
- Fully compatible with Tailwind v4

src/layouts/BaseLayout.astro

@@ -26,9 +26,6 @@ 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 - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
@@ -44,36 +41,5 @@ const { title, description, image } = Astro.props;
 </html>
 
 <style is:global>
-@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;
-  }
-}
+  @import "../styles/globals.css";
 </style>