/* 1. รีเซ็ตพื้นฐาน */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 2. สไตล์ของแถบเมนูหลัก (navbar) */
.navbar {
    background-color: #333; /* สีพื้นหลังแถบเมนู */
    overflow: hidden; /* ป้องกันเนื้อหาทะลุ */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ดูมีมิติ */
}

/* 3. จัดเรียงรายการเมนู (ul) */
.navbar ul {
    list-style-type: none; /* ลบสัญลักษณ์หัวข้อ (จุด) ออก */
    margin: 0;
    padding: 0;
    display: flex; /* จัดเรียงเมนูในแนวนอน */
    justify-content: flex-start; /* จัดให้เริ่มต้นจากซ้าย */
}

/* 4. สไตล์ของแต่ละรายการเมนู (li) */
.navbar li {
    /* li จะจัดเรียงตาม display: flex ใน ul */
}

/* 5. สไตล์ของลิงก์เมนู (a) */
.navbar li a {
    display: block; /* ทำให้ลิงก์ครอบคลุมพื้นที่ทั้งหมดของ li */
    color: white; /* สีข้อความปกติ */
    text-align: center;
    padding: 14px 20px; /* เว้นระยะห่างภายใน */
    text-decoration: none; /* ลบขีดเส้นใต้ลิงก์ */
    transition: background-color 0.3s, color 0.3s; /* เพิ่ม Transition เพื่อให้การเปลี่ยนสีดูนุ่มนวล */
}

/* 6. สไตล์เมื่อนำเมาส์ไปชี้ (Hover Effect) */
.navbar li a:hover {
    background-color: #555; /* สีพื้นหลังเมื่อเมาส์ชี้ */
    color: #ffd700; /* สีข้อความเมื่อเมาส์ชี้ (สีทอง) */
}

/* 7. สไตล์สำหรับเมนูที่ใช้งานอยู่ (Active Link) */
.navbar li a.active {
    background-color: #04AA6D; /* สีพื้นหลังสำหรับเมนูที่กำลังใช้งาน */
    color: white;
}