/* custom.css */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Sarabun:wght@400;500&display=swap');

/* กำหนด font หลักของเว็บเป็น Kanit */
body {
    font-family: 'Kanit', sans-serif;
}

.font-display {
    font-family: 'Kanit', sans-serif;
}

header, footer {
    font-family: 'Kanit', sans-serif;
}

/* ===== ส่วนที่แก้ไข/เพิ่มเข้ามาใหม่ (สำคัญที่สุด) ===== */
/* สร้าง Class ของเราเองเพื่อแทนที่ .prose */
.content-styles * {
    font-family: 'Kanit', sans-serif !important;
}
.content-styles p {
    margin-bottom: 1rem; /* ระยะห่างระหว่างย่อหน้า */
}
.content-styles ul {
    list-style-type: disc; /* ทำให้ list เป็นจุด */
    padding-left: 1.5rem; /* ย่อหน้า list เข้ามา */
    margin-bottom: 1rem;
}
.content-styles ol {
    list-style-type: decimal; /* ทำให้ list เป็นตัวเลข */
    padding-left: 1.5rem; /* ย่อหน้า list เข้ามา */
    margin-bottom: 1rem;
}
.content-styles li {
    margin-bottom: 0.5rem; /* ระยะห่างระหว่างข้อ */
}
/* ================================================= */


@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-spu-pink: #ee5ba0;
  }
}

.text-spu-pink { color: var(--color-spu-pink); }
.border-spu-pink { border-color: var(--color-spu-pink); }
.bg-spu-pink { background-color: var(--color-spu-pink); }

/* ไอคอน Social บน Top Bar */
.social-icon {
    @apply h-6 w-6 rounded-full flex items-center justify-center bg-gray-700 hover:bg-spu-pink transition-colors duration-300;
}
.social-icon i {
    @apply text-xs text-white;
}

/* ไอคอน Social ใน Footer */
.footer-social-icon {
    @apply h-10 w-10 rounded-full flex items-center justify-center text-white text-xl hover:opacity-80 transition-opacity;
}
.instagram-bg {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}