.header {
    position: relative; /* Ensure the header is positioned relative */
    background: rgba(0, 0, 0, 0.8); /* Black background with 80% opacity */
    padding: 15px; /* Optional: Add padding to the header */
    background: url('https://fis.ru.ac.th/home/images/bgfis.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.6.; /* Adjust the opacity level here */
	z-index: 10;
}

.header-inner {
    position: relative;
    z-index: 2; /* Ensure header content is above the background */
}

.header .header-inner a .bannd {
    position: relative; /* Ensure logo is positioned relative for stacking context */
    z-index: 3; /* Ensure the logo is above the background */
    color: #fff; /* Set logo text color to white */
    font-size: 24px; /* Adjust the font size as needed */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Add shadow to make the text pop */
    font-weight: bold;
}

.header .header-inner a .bannd image {
    border: 10px;
    display: block; /* Ensure image is displayed correctly */
    max-height: 100px; /* Optional: Set a max-height for the logo */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); /* Adds shadow to create a raised effect */
}

.header-search {
    position: relative;
    z-index: 2; /* Ensure search box is above the background */
}


/* Responsive */
@media (max-width: 768px) {
    .logo {
        height: 25%;
        width: 25%;
            /* ปรับขนาดโลโก้ตามต้องการ */
        border-radius: 16%;
    }
}