/* สไตล์ของ footer */
footer {
    font-family: 'Kanit', sans-serif; /* เรียกใช้ฟอนต์ Kanit */
    background-color: #61acfc; /* สีพื้นหลัง */
    padding: 0px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
    font-family: 'Sarabun', sans-serif;
    z-index: 1000; /* ให้อยู่ด้านบนสุด */
}

/* การจัดระเบียบเมนูใน footer */
footer nav {
    font-family: 'Kanit', sans-serif; 
    margin-bottom: 5px;
    margin-top: -10px;
    display: flex;
    justify-content: space-around; /* จัดระเบียบให้เป็นแถว */
    gap: 5px; /* เว้นระยะระหว่างไอคอน */
    align-items: center;
}

/* Navigation Links */
footer nav a {
    width: 50px;
    color: white; /* สีตัวอักษร */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    font-size: 8.5px;
    display: flex;
    flex-direction: column; /* ไอคอนอยู่บนข้อความ */
    align-items: center;
    gap: 5px; /* ระยะห่างระหว่างไอคอนและข้อความ */
    padding: 5px 12px;
    transition: color 0.3s, transform 0.2s;
    border-radius: 6px; /* ทำให้มุมมน */
}

/* เอฟเฟกต์เมื่อ hover */
footer nav a:hover {
    background-color: #007bff;
    color: #2600ff;
    transform: scale(1.1); /* ขยายเมื่อ hover */
}



footer nav i {
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    font-size: 20px; /* ขยายขนาดไอคอน */
}

/* สไตล์เมื่อเมนูเป็น active */
footer nav a.active {
    background-color: #007bff; /* สีที่เข้มขึ้นสำหรับตำแหน่งที่เลือก */
    transform: scale(1.05); /* ขยายเล็กน้อย */
    box-shadow: 0 0 10px #007bff(255, 111, 0, 0.8); /* เพิ่มเงาเพื่อให้เด่น */
}

/* เมื่อ footer เป็นแบบ responsive ขนาดเล็กลง */
@media (max-width: 768px) {
    footer nav {
        flex-direction: row; /* เปลี่ยนจากแถวเป็นแนวตั้ง */
        gap: 5px;
    }
}