## 3. ระบบ Design — ทำ Dark Graphite UI

### Tailwind Config

```typescript
// tailwind.config.ts
const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        graphite: {
          bg: "#050505",             // main background
          card: "#0B0B0B",           // card background
          border: "rgba(255,255,255,0.08)",  // border
          soft: "rgba(255,255,255,0.05)",     // subtle overlay
        },
      },
      boxShadow: {
        graphite: "0 24px 80px rgba(0,0,0,0.45)",
      },
    },
  },
  plugins: [],
};
```

### globals.css — สิ่งที่ทำให้รู้สึก "MIMO"

ของจริงใช้ CSS pseudo-elements สร้าง Texture หลายชั้น:

```css
/* 1) Body background — รูปพื้นหลังแบบ luxury */
body {
  background:
    linear-gradient(180deg, rgba(5,5,5,0.82), rgba(5,5,5,0.94)),
    url("/images/home/mimo-luxury-hero.jpg") center top / cover fixed no-repeat,
    #050505;
}

/* 2) Ambient gold light + grid scanline */
body::before {
  background-image:
    linear-gradient(135deg, rgba(245,184,49,0.1), transparent 18%, transparent 82%, rgba(245,184,49,0.08)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.018) 0,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 4px);
  mix-blend-mode: screen;
  opacity: 0.22;
}

/* 3) Radial gold spots + gradient overlay */
body::after {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(245,184,49,0.18), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(245,184,49,0.16), transparent 16%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,0.035) 58.1%, transparent 58.35%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.5) 340px, rgba(0,0,0,0.72));
}

/* 4) Grid pattern สำหรับ section */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 44px 44px;
}
```

> 🔑 **หัวใจของ Design:** ไม่ใช่แค่สีดำเรียบ ๆ แต่มี Texture หลายชั้น — gold ambient light, grid scanline, radial glow — ทำให้รู้สึก Premium
>
> 🤔 **ทำไมไม่ใช้ UI Library สำเร็จรูป?** — เช่น Tailwind UI หรือ Shadcn
> - ควบคุม pixel ทุกจุดได้เอง
> - ไม่มี dependency เปลือง bundle size
> - design แตกต่าง ไม่ซ้ำใคร
> - UI Library ใช้ CSS variables + classes เราสามารถสร้างของเราเองได้ไม่ยาก
> ข้อเสีย: ใช้เวลาเริ่มต้นนานกว่า แต่คุ้มเมื่อ scale