/* สำหรับเมนูหลัก - headerdash จะทำหน้าที่เป็นแถบ Navbar ที่อยู่ด้านบนสุด */
.headerdash {
    background-color: #111827; /* สีพื้นหลังของแถบเมนู */
    padding: 10px 0;
    position: ; /* ทำให้ Navbar อยู่ด้านบนเสมอ */
    width: 100%;
    top: 0;
    left: 0; /* เพิ่ม left: 0; เพื่อให้ติดขอบซ้าย */
    z-index: 1000;
    border-bottom: 2px solid #00ff93;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Container ภายใน headerdash สำหรับจัดเรียง Hamburger, Title, และ Menu */
.headerdash .row {
    max-width: 1200px; /* ความกว้างสูงสุดของเนื้อหาในแถบเมนู */
    margin: 0 auto; /* จัดกึ่งกลาง */
    display: flex; /* ใช้ Flexbox จัดเรียงรายการในแนวนอน */
    justify-content: space-between; /* กระจายองค์ประกอบ (Hamburger/Title กับ Menu) */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    padding: 0 10px; /* เพิ่ม padding ด้านข้าง */
}

/* -------------------------------------------------------------------------- */
/* --- สไตล์สำหรับ Hamburger Icon (ซ่อนบน Desktop, แสดงบน Mobile) --- */
/* -------------------------------------------------------------------------- */
.hamburger-menu {
    display: none; /* ซ่อนไอคอนแฮมเบอร์เกอร์บน Desktop */
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    z-index: 1001; /* ให้อยู่เหนือเมนูที่เปิด */
}

.hamburger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: #00ff93; /* สีของขีดแฮมเบอร์เกอร์ */
    margin: 4px 0;
    transition: all 0.3s ease;
    border-radius: 5px;
}

/* Animation สำหรับ Hamburger Icon เมื่อ active/open */
.hamburger-menu.change .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.change .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.change .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -------------------------------------------------------------------------- */
/* --- สไตล์สำหรับชื่อเมนู Dashboard (ซ่อนบน Desktop, แสดงบน Mobile) --- */
/* -------------------------------------------------------------------------- */
.headerdash .row h3 {
    display: none; /* ซ่อนชื่อ "Menu Dashboard" บน Desktop */
    color: #00ff93;
    margin: 0;
    font-size: 1.5em;
}


/* -------------------------------------------------------------------------- */
/* --- สไตล์สำหรับ Navigation Menu (แสดงบน Desktop, ซ่อนบน Mobile) --- */
/* -------------------------------------------------------------------------- */
#nav-menu { /* ใช้ ID เพื่อความเฉพาะเจาะจง */
    display: flex; /* แสดงเมนูแบบ Flex ในแนวนอนสำหรับ Desktop */
    list-style: none; /* หากเดิมใช้ ul */
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    gap: 20px; /* ระยะห่างระหว่างลิงก์ */
}

#nav-menu a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

#nav-menu a:hover {
    color: #00ff93;
    border-radius: 5px;
    text-shadow: 0 0 3px #00ff93, 0 0 5px #00ff93;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
}

/* -------------------------------------------------------------------------- */
/* --- Media Queries สำหรับหน้าจอขนาดเล็ก (Mobile View) --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .headerdash {
        padding: 8px 0; /* ปรับ padding สำหรับ Mobile */
    }

    .headerdash .row {
        justify-content: space-between; /* จัดเรียง Hamburger และ Title */
        padding: 0 15px; /* เพิ่ม padding ด้านข้าง */
    }

    /* แสดง Hamburger Icon บน Mobile */
    .hamburger-menu {
        display: flex;
    }

    /* แสดงชื่อ "Menu Dashboard" บน Mobile */
    .headerdash .row h3 {
        display: block; /* แสดงชื่อ "Menu Dashboard" */
        margin-right: auto; /* ดันชื่อไปทางซ้าย (ถ้า Hamburger อยู่ขวา) */
        padding-left: 10px; /* เพิ่มระยะห่างจากโลโก้/ขอบ */
    }
    
    /* ซ่อนเมนูปกติบน Mobile และจัดเรียงแนวตั้งเมื่อเปิด */
    #nav-menu {
        display: none; /* ซ่อนเมนูปกติบนมือถือ */
        flex-direction: column; /* วางรายการเมนูในแนวตั้ง */
        width: 100%;
        background-color: #111827; /* สีพื้นหลังของเมนูที่เปิด */
        position: absolute; /* จัดตำแหน่งเมนูที่เปิดขึ้นมา */
        top: 60px; /* ปรับค่านี้ตามความสูงของ headerdash */
        left: 0;
        padding: 10px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 999;
        border-radius: 0 0 8px 8px;
        max-height: calc(100vh - 60px); /* จำกัดความสูงไม่ให้ล้นจอ */
        overflow-y: auto; /* มี scrollbar ถ้าเมนูยาวเกิน */
    }

    /* แสดงเมนูเมื่อมีคลาส 'open' (JavaScript จะเพิ่ม/ลบ) */
    #nav-menu.open {
        display: flex;
    }

    /* สไตล์สำหรับลิงก์แต่ละตัวในเมนูมือถือ */
    #nav-menu a {
        padding: 12px 20px;
        text-align: left;
        border-bottom: 1px solid #333; /* เส้นแบ่งระหว่างลิงก์ */
        width: auto; /* ไม่ต้องกำหนด width: 100% เพราะ flex-direction: column */
    }
    #nav-menu a:last-child {
        border-bottom: none; /* ลบเส้นแบ่งที่ลิงก์สุดท้าย */
    }
    #nav-menu a:hover {
        background-color: #00ff93;
        color: #111827;
    }

    /* สไตล์สำหรับปุ่ม mute ใน Mobile */
    #muteButton {
        top: 20px; /* ปรับตำแหน่งตามต้องการ */
        right: 50px; /* ปรับตำแหน่งให้ห่างจาก Hamburger */
        padding: 8px 12px;
        font-size: 0.9em;
        gap: 5px;
    }
    #muteButton i {
        font-size: 1em;
    }

    /* ปรับโลโก้ TDK ใน Mobile (ถ้ามันอยู่ภายใน headerdash.row) */
    /* จาก HTML ของคุณ โลโก้อยู่ข้างนอก headerdash.row ดังนั้น CSS นี้อาจไม่จำเป็น */
    /* .navbar_menu .row .logo {
        margin-right: auto;
        padding-left: 5px;
    } */
}

/* ปรับ body padding-top ให้สอดคล้องกับ Navbar fixed */
body {
    /* ... โค้ดเดิม ... */
    padding-top: 80px; /* ปรับค่านี้ให้มากกว่าความสูงของ headerdash เล็กน้อย */
}

/* สไตล์สำหรับ nav-menuse (ปุ่มเติมเงิน) - ปรับตามความเหมาะสม */
.nav-menuse {
    text-align: center;
    margin-top: 20px; /* ระยะห่างจาก Navbar */
    /* เพิ่มสไตล์อื่นๆ ตามต้องการ */
}

/* สไตล์สำหรับ Slider และอื่นๆ ที่คุณมีอยู่เดิม */
/* ... (โค้ด CSS สำหรับ Slider และอื่นๆ ที่คุณมีอยู่เดิม) ... */