/* --- ส่วนที่ 1: ตั้งค่า Font และพื้นฐาน (ใช้ร่วมกันทุกหน้า) --- */

/* ดึง Font 'Inter' จาก Google Fonts มาใช้ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

body {
    font-family: 'Inter', sans-serif; /* บังคับใช้ Font Inter กับทั้งหน้า */
    margin: 0;
    padding: 0;
    background-color: #0b0e14; /* สีพื้นหลังดำด้าน (Theme เดียวกับ Tailwind เดิมของคุณ) */
    color: #ffffff;
}

/* --- CSS สำหรับ Navbar (เมนูบาร์) --- */
.navbar {
    width: 100%;
    background-color: rgba(11, 14, 20, 0.95); /* สีพื้นหลังดำโปร่งแสง */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* เส้นขอบบางๆ */
    position: sticky; /* ให้เมนูติดอยู่ด้านบนตลอดเวลาเลื่อนจอ */
    top: 0;
    z-index: 1000; /* ให้อยู่ชั้นบนสุด */
    backdrop-filter: blur(10px); /* เอฟเฟกต์เบลอพื้นหลังกระจก */
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between; /* ดันโลโก้ไปซ้าย เมนูไปขวา */
    align-items: center;
}

/* โลโก้ */
.nav-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}

.nav-logo .highlight {
    background: linear-gradient(to right, #60a5fa, #a78bfa); /* สีฟ้า-ม่วง ตามธีมเว็บคุณ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ลิงก์เมนู */
.nav-menu {
    display: flex;
    gap: 30px; /* ระยะห่างระหว่างปุ่ม */
}

.nav-link {
    color: #9ca3af; /* สีเทาอ่อน */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.nav-link:hover {
    color: #ffffff; /* ชี้แล้วเปลี่ยนเป็นสีขาว */
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.6); /* เรืองแสงสีฟ้า */
}

/* --- ส่วนเสริม: รองรับ Mobile (ถ้าหน้าจอมือถือให้ซ่อนเมนูบางส่วนได้ในอนาคต) --- */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* ซ่อนเมนูก่อนในมือถือ (เดี๋ยวค่อยทำปุ่มกดทีหลัง) */
    }
}