/* ส่วนของ footer */
.footer {
    color: white; /* สีของข้อความใน footer */
    padding: 30px; /* ระยะขอบภายใน footer */
    width: 80%; /* ความกว้างของ footer */
    margin: 20px auto; /* การตั้งค่ามาร์จิ้นให้กึ่งกลาง */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* เงาของ footer */
    border-radius: 10px; /* มุมโค้งของ footer */
    display: flex;
    flex-direction: column; /* จัดเรียงเนื้อหาในแนวคอลัมน์ */
    align-items: center; /* จัดแนวรายการในแนวนอนให้กึ่งกลาง */
    transition: background-color 0.3s ease, transform 0.3s ease; /* การเปลี่ยนแปลงสีพื้นหลังและการแปลงแบบเนียน */
}

/* เนื้อหาใน footer */
.footer-content {
    display: flex;
    justify-content: space-between; /* กระจายเนื้อหาให้ห่างกันอย่างเท่าเทียม */
    width: 95%; /* ความกว้างของเนื้อหาใน footer */
    margin-bottom: 10px; /* ระยะห่างด้านล่างของเนื้อหา */
}

/* ส่วนด้านซ้ายของ footer */
.footer-left {
    display: flex;
    flex-direction: column; /* จัดเรียงเนื้อหาในแนวคอลัมน์ */
    align-items: center; /* จัดแนวรายการในแนวนอนให้กึ่งกลาง */
    width: 23%; /* ความกว้างของส่วนด้านซ้าย */
    margin-bottom: 20px; /* ระยะห่างด้านล่างของส่วนด้านซ้าย */
}

/* คำอธิบายโลโก้ */
.logo-description {
    display: flex;
    flex-direction: column; /* จัดเรียงเนื้อหาในแนวคอลัมน์ */
    align-items: center; /* จัดแนวรายการในแนวนอนให้กึ่งกลาง */
}

/* โลโก้ใน footer */
.footer-logo {
    margin-top: 17px; /* ระยะห่างด้านบนของโลโก้ */
    height: 45px; /* ความสูงของโลโก้ */
    margin-bottom: 5px; /* ระยะห่างด้านล่างของโลโก้ */
    transition: transform 0.3s ease; /* การแปลงแบบเนียนเมื่อ hover */
}

/* การขยายโลโก้เมื่อ hover */
.footer-logo-link:hover .footer-logo {
    transform: scale(1.1); /* ขยายขนาดโลโก้เมื่อ hover */
}

/* คำอธิบายเพิ่มเติมใน footer */
.footer-description {
    font-size: 0.9rem; /* ขนาดตัวอักษรของคำอธิบาย */
    margin-top: 20px; /* ไม่มีระยะห่างด้านบน */
    margin-bottom: 10px; /* ระยะห่างด้านล่างของคำอธิบาย */
    color: #f0f0f0; /* สีของคำอธิบาย */
    text-align: center; /* จัดแนวข้อความให้อยู่กึ่งกลาง */
}

/* ไอคอนโซเชียลใน footer */
.social-icons {
    display: flex;
    justify-content: center; /* จัดแนวไอคอนให้อยู่กึ่งกลาง */
    gap: 10px; /* ระยะห่างระหว่างไอคอน */
    margin-top: 5px; /* ระยะห่างด้านบนของไอคอน */
}

/* ลิงก์โซเชียลใน footer */
.social-link {
    color: white; /* สีของลิงก์โซเชียล */
    font-size: 1.2rem; /* ขนาดตัวอักษรของลิงก์โซเชียล */
    text-decoration: none; /* ไม่มีเส้นใต้สำหรับลิงก์ */
    transition: color 0.3s ease, transform 0.3s ease; /* การเปลี่ยนแปลงสีและการแปลงแบบเนียนเมื่อ hover */
}

/* การเปลี่ยนสีและขนาดเมื่อ hover ลิงก์โซเชียล */
.social-link:hover {
    color: #00e6b8; /* สีของลิงก์โซเชียลเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดลิงก์โซเชียลเมื่อ hover */
}

/* ส่วนด้านขวาของ footer */
.footer-right {
    display: flex;
    flex-wrap: wrap; /* ห่อเนื้อหาเมื่อพื้นที่ไม่พอ */
    width: 70%; /* ความกว้างของส่วนด้านขวา */
}

/* คอลัมน์ใน footer */
.footer-columns {
    display: flex;
    flex-wrap: wrap; /* ห่อเนื้อหาเมื่อพื้นที่ไม่พอ */
    gap: 10px; /* ระยะห่างระหว่างคอลัมน์ */
    width: 100%; /* ความกว้างของคอลัมน์ทั้งหมด */
}

.footer-column {
    display: flex;
    flex-direction: column; /* จัดเรียงเนื้อหาในแนวคอลัมน์ */
    align-items: flex-start; /* จัดแนวรายการในแนวนอนให้เริ่มจากซ้าย */
    width: 20%; /* ความกว้างของแต่ละคอลัมน์ */
    min-width: 150px; /* ความกว้างขั้นต่ำของคอลัมน์ */
    gap: 5px; /* ระยะห่างระหว่างรายการในคอลัมน์ */
}

.footer-column h4 {
    margin-bottom: 3px; /* ระยะห่างด้านล่างของหัวข้อ */
    font-size: 1rem; /* ขนาดตัวอักษรของหัวข้อ */
    color: #ffffff; /* สีของหัวข้อ */
}

/* ลิงก์ใน footer */
.footer-link {
    color: white; /* สีของลิงก์ */
    text-decoration: none; /* ไม่มีเส้นใต้สำหรับลิงก์ */
    font-size: 0.85rem; /* ขนาดตัวอักษรของลิงก์ */
    transition: color 0.3s ease, transform 0.3s ease; /* การเปลี่ยนแปลงสีและการแปลงแบบเนียนเมื่อ hover */
}

/* การเปลี่ยนสีและการย้ายตำแหน่งเมื่อ hover ลิงก์ */
.footer-link:hover {
    color: #006F5A; /* สีของลิงก์เมื่อ hover */
    transform: translateY(-3px); /* ย้ายตำแหน่งลิงก์ขึ้นเมื่อ hover */
}

/* ลิงก์พิเศษใน footer */
.footer-link-special {
    color: black; /* สีของลิงก์พิเศษ */
    text-decoration: none; /* ไม่มีเส้นใต้สำหรับลิงก์พิเศษ */
    transition: color 0.3s ease; /* การเปลี่ยนแปลงสีแบบเนียนเมื่อ hover */
}

.footer-link-special:hover {
    color: #00e6b8; /* สีของลิงก์พิเศษเมื่อ hover */
}

/* ข้อความลิขสิทธิ์ใน footer */
.footer-copyright {
    text-align: center; /* จัดแนวข้อความให้อยู่กึ่งกลาง */
    margin-top: 15px; /* ระยะห่างด้านบนของข้อความลิขสิทธิ์ */
    font-size: 0.85rem; /* ขนาดตัวอักษรของข้อความลิขสิทธิ์ */
    color: #f0f0f0; /* สีของข้อความลิขสิทธิ์ */
}

/* สไตล์สำหรับอุปกรณ์ขนาดเล็ก */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* จัดเรียงเนื้อหาในแนวคอลัมน์สำหรับหน้าจอเล็ก */
        align-items: center; /* จัดแนวรายการให้อยู่กึ่งกลาง */
    }

    .footer-left,
    .footer-right {
        width: 100%; /* ความกว้างของส่วนด้านซ้ายและขวาเต็มความกว้าง */
    }

    .footer-columns {
        flex-direction: column; /* จัดเรียงคอลัมน์ในแนวคอลัมน์สำหรับหน้าจอเล็ก */
        align-items: center; /* จัดแนวรายการให้อยู่กึ่งกลาง */
    }

    .footer-column {
        width: 100%; /* ความกว้างของแต่ละคอลัมน์เต็มความกว้าง */
        margin-bottom: 15px; /* ระยะห่างด้านล่างของแต่ละคอลัมน์ */
    }
}

/* สไตล์โหมดมืดสำหรับ footer */
body.dark-mode .footer {
    background: linear-gradient(90deg, #333, #444); /* พื้นหลังแบบไล่สีสำหรับโหมดมืด */
    color: #f0f0f0; /* สีของข้อความใน footer ในโหมดมืด */
}

body.dark-mode .footer-link {
    color: #f0f0f0; /* สีของลิงก์ในโหมดมืด */
}

body.dark-mode .footer-link:hover {
    color: #bbbbbb; /* สีของลิงก์เมื่อ hover ในโหมดมืด */
}

body.dark-mode .footer-description {
    color: #d0d0d0; /* สีของคำอธิบายในโหมดมืด */
}

body.dark-mode .social-link {
    color: #f0f0f0; /* สีของลิงก์โซเชียลในโหมดมืด */
}

body.dark-mode .social-link:hover {
    color: #bbbbbb; /* สีของลิงก์โซเชียลเมื่อ hover ในโหมดมืด */
}

body.dark-mode .footer-column h4 {
    color: #ffffff; /* สีของหัวข้อในคอลัมน์เมื่ออยู่ในโหมดมืด */
}

body.dark-mode .footer-link-special {
    color: #f0f0f0; /* สีของลิงก์พิเศษในโหมดมืด */
}

body.dark-mode .footer-link-special:hover {
    color: #00e6b8; /* สีของลิงก์พิเศษเมื่อ hover ในโหมดมืด */
}

body.dark-mode .footer-copyright {
    color: #d0d0d0; /* สีของข้อความลิขสิทธิ์ในโหมดมืด */
}