/* สไตล์พื้นฐานของ body */
body {
    font-family: 'Sriracha', cursive; /* ใช้ฟอนต์ Sriracha */
    margin: 0; /* ไม่มีระยะขอบ */
    padding-top: 60px; /* เว้นระยะด้านบนสำหรับแถบเมนู */
}

/* เมนูหลัก */
.navbar {
    background: linear-gradient(90deg, #008F7A, #00e6b8); /* เพิ่มไล่สีให้เมนู */
    color: white; /* สีของข้อความ */
    width: 80%; /* กำหนดความกว้างเมนู */
    position: fixed; /* ตำแหน่งเมนูให้อยู่ที่ด้านบนสุด */
    top: 10px; /* ระยะห่างด้านบน */
    left: 10%; /* ระยะห่างด้านซ้าย */
    right: 10%; /* ระยะห่างด้านขวา */
    z-index: 1000; /* ทำให้เมนูอยู่ด้านหน้าสุด */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
    border-radius: 10px; /* มุมโค้งของเมนู */
    transition: background-color 0.3s ease, transform 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนแปลงสีและการขยับ */
}

/* เมื่อเมนูอยู่ในสถานะติดหนึบ */
body.scrolled .navbar {
    top: 0; /* ชิดขอบบนเมื่อเลื่อน */
    transition: top 0.3s ease;
}

/* เนื้อหาของเมนู */
.navbar-content {
    display: flex; /* ใช้ Flexbox จัดเรียง */
    justify-content: space-between; /* จัดให้อยู่ห่างกัน */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
    padding: 8px 20px; /* ระยะห่างภายในเมนู */
}

/* โลโก้ที่สามารถคลิกได้ */
.logo-link {
    display: inline-block; /* ทำให้คลิกได้ */
}

.logo {
    height: 40px; /* ความสูงของโลโก้ */
    transition: transform 0.3s ease; /* เพิ่มเอฟเฟกต์การขยับ */
}

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

/* ลิงก์ในเมนู */
.nav-links {
    display: flex; /* ใช้ Flexbox จัดเรียง */
    gap: 20px; /* ระยะห่างระหว่างลิงก์ */
}

.nav-link {
    color: white; /* สีข้อความ */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    font-size: 1rem; /* ขนาดฟอนต์ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีและการขยับ */
}

.nav-link:hover {
    color: #006F5A; /* เปลี่ยนสีเมื่อ hover */
    transform: translateY(-3px); /* ขยับขึ้นเล็กน้อยเมื่อ hover */
}

.submit-tool-button {
    background-color: #ff5733; /* สีพื้นหลังโดดเด่น */
    color: white;
    padding: 4px 10px; /* ลดขนาด padding */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem; /* ลดขนาดฟอนต์ */
    margin-left: 10px; /* ลดระยะห่างจากเมนู */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.submit-tool-button:hover {
    background-color: #e74c3c; /* สีเมื่อ hover */
    transform: scale(1.05); /* ขยายเล็กน้อยเมื่อ hover */
}

/* ปุ่มสลับโหมด */
.theme-toggle {
    background: none; /* ไม่มีพื้นหลัง */
    border: none; /* ไม่มีกรอบ */
    color: white; /* สีข้อความ */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
    font-size: 24px; /* ขนาดฟอนต์ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีและการหมุน */
}

.theme-toggle:hover {
    color: #00e6b8; /* เปลี่ยนสีเมื่อ hover */
    transform: rotate(20deg); /* หมุนเล็กน้อยเมื่อ hover */
}

/* เมนู dropdown */
.dropdown {
    position: relative; /* ตำแหน่งแบบสัมพันธ์ */
}

.dropdown .nav-link {
    display: inline-block; /* ทำให้แสดงเป็นบล็อก */
}

.dropdown-content {
    display: none; /* ซ่อนเมนู dropdown */
    position: absolute; /* ตำแหน่งแบบสัมบูรณ์ */
    top: 100%; /* เริ่มจากด้านล่างของลิงก์ */
    left: 0; /* ตำแหน่งด้านซ้าย */
    background-color: #008F7A; /* พื้นหลัง */
    min-width: 200px; /* ความกว้างขั้นต่ำ */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
    border-radius: 5px; /* มุมโค้ง */
    z-index: 1001; /* ให้อยู่เหนือเมนูอื่น */
    flex-direction: column; /* จัดเรียงแนวตั้ง */
    overflow: hidden; /* ซ่อนส่วนที่เกิน */
    opacity: 0; /* เริ่มจากโปร่งใส */
    transform: translateY(10px); /* ขยับลงเล็กน้อย */
    transition: opacity 0.3s ease, transform 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนความโปร่งใสและการขยับ */
}

.dropdown-content a {
    color: white; /* สีข้อความ */
    padding: 12px 16px; /* ระยะห่างภายใน */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    display: block; /* แสดงเป็นบล็อก */
    transition: background-color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีพื้นหลัง */
}

.dropdown-content a:hover {
    background-color: #006F5A; /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

/* แสดง dropdown เมื่อ hover */
.dropdown:hover .dropdown-content {
    display: block; /* แสดงเมนู */
    opacity: 1; /* ทำให้มองเห็นได้ */
    transform: translateY(0); /* ขยับขึ้น */
}

/* Hamburger Menu */
.hamburger {
    display: none; /* ซ่อน hamburger ในหน้าจอปกติ */
    flex-direction: column; /* จัดเรียงแนวตั้ง */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
    gap: 4px; /* ระยะห่างระหว่างเส้น */
    transition: transform 0.3s ease; /* เพิ่มเอฟเฟกต์การหมุน */
}

.hamburger div {
    width: 25px; /* ความกว้างของเส้น */
    height: 3px; /* ความสูงของเส้น */
    background-color: white; /* สีของเส้น */
    transition: background-color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

/* เมนูลิงก์ที่ไม่แสดงในหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* ซ่อนเมนู */
        flex-direction: column; /* จัดเรียงแนวตั้ง */
        position: absolute; /* ตำแหน่งสัมบูรณ์ */
        top: 60px; /* เว้นระยะด้านบน */
        left: 0; /* ตำแหน่งด้านซ้าย */
        background-color: #008F7A; /* พื้นหลัง */
        width: 100%; /* ความกว้างเต็ม */
        padding: 20px 0; /* ระยะห่างภายใน */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
        border-radius: 0 0 10px 10px; /* มุมโค้งด้านล่าง */
    }

    .nav-links.active {
        display: flex; /* แสดงเมนูเมื่อ active */
        align-items: center; /* จัดให้อยู่กลาง */
        gap: 10px; /* ระยะห่างระหว่างลิงก์ */
    }

    .hamburger {
        display: flex; /* แสดง hamburger */
    }

    .hamburger:hover {
        transform: rotate(90deg); /* หมุน hamburger เมื่อ hover */
    }

    .navbar {
        width: 90%; /* ความกว้างเมนูในหน้าจอขนาดเล็ก */
        left: 5%; /* ระยะห่างด้านซ้าย */
        right: 5%; /* ระยะห่างด้านขวา */
    }
}

/* โหมดมืด */
body.dark-mode .navbar {
    background: linear-gradient(90deg, #333, #444); /* เปลี่ยนสีพื้นหลังในโหมดมืด */
}

body.dark-mode .nav-link {
    color: #f0f0f0; /* สีข้อความ */
}

body.dark-mode .nav-link:hover {
    color: #bbbbbb; /* สีข้อความเมื่อ hover */
}

body.dark-mode .theme-toggle {
    color: #f0f0f0; /* สีปุ่มสลับโหมด */
}

body.dark-mode .dropdown-content {
    background-color: #444; /* สีพื้นหลังของ dropdown */
}

body.dark-mode .dropdown-content a:hover {
    background-color: #555; /* สีพื้นหลังของเมนูเมื่อ hover */
}

body.dark-mode .hamburger div {
    background-color: #f0f0f0; /* สีเส้นของ hamburger */
}