body {
    margin: 0;
    font-family: Arial, sans-serif;
    /* font-family: 'AngsanaUPC', sans-serif; */
}

header {
    background-color: #003399; /* เปลี่ยนสี header เป็นสีน้ำเงินอ่อน */
    color: white;
    text-align: center;
    padding: 0.20rem; /* ลดขนาดของ header ลงอีก 30% */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 1rem;
    margin-bottom: 0.0rem; /* ปรับระยะห่างด้านล่างของ header */
}

header h1 {
    margin: 0;
    font-size: 110%; /* ลดขนาดตัวอักษรลง 30% */
}

.user-info {
    display: flex;
    align-items: center;
}

 .form-container input[type="button"] {
            background-color: #007BFF; /* สีพื้นหลังปุ่มเป็นสีฟ้า */
            color: white; /* สีตัวอักษร */
            transition: background-color 0.3s; /* เพิ่มการเปลี่ยนสีอย่างน้อย 0.3 วินาที */
        }

        .form-container input[type="button"]:hover {
            background-color: #0056b3; /* สีพื้นหลังปุ่มเปลี่ยนเป็นสีฟ้าเข้ม */
        }

        .form-container input[type="submit"] {
            background-color: #28a745; /* สีพื้นหลังปุ่มเป็นสีเขียว */
            color: white; /* สีตัวอักษร */
            transition: background-color 0.3s; /* เพิ่มการเปลี่ยนสีอย่างน้อย 0.3 วินาที */
        }

        .form-container input[type="submit"]:hover {
            background-color: #218838; /* สีพื้นหลังปุ่มเปลี่ยนเป็นสีเขียวเข้ม */
        }

.user-info span {
    margin-right: 1rem;
}

.user-info a {
    color: white;
    text-decoration: none;
    background-color: #ff4d4d;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.user-info a:hover {
    background-color: #ff1a1a;
}

.container {
    display: flex;
    flex-wrap: nowrap;
    height: calc(100vh - 35px); /* ปรับความสูงของ container ให้ตรงกับขนาดใหม่ของ header */
}

aside {
    width: 120px; /* ลดความกว้างของเมนูลง 30% จาก 200px */
    background-color: #f4f4f4;
    padding: 1rem;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    margin-top: 0.0rem; /* ปรับระยะห่างด้านบนของ aside */
}

main {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    margin-top: 0; /* ลดระยะห่างด้านบนของ main */
    padding-top: 0; /* เพิ่มการแก้ไขนี้เพื่อกำจัด padding บน */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0; /* ลด margin ของ ul เป็น 0 */
}

nav ul li {
    margin: 0.5rem 0;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem;
    display: block;
    background-color: #e4e4e4;
    border-radius: 4px;
    font-size: 0.8rem; /* ลดขนาดตัวอักษรของเมนูลง 20% */
}

nav ul li a:hover {
    background-color: #ddd;
}

/* เมนูย่อย */
nav ul ul {
    display: none; /* ซ่อนเมนูย่อย */
    list-style-type: none;
    padding-left: 1rem; /* เพิ่มการเยื้อง */
}

nav ul li.active > ul {
    display: block; /* แสดงเมนูย่อยเมื่อคลาส active ถูกเพิ่ม */
}

@media (max-width: 768px) {
    body {
        font-size: 0.875rem; /* ย่อตัวอักษรลงสำหรับหน้าจอมือถือ */
    }

    header {
        text-align: left;
        padding: 0.35rem 1rem;
    }

    .container {
        flex-direction: row; /* ทำให้ flex items จัดเรียงในแถวเดียวกัน */
        height: auto; /* ป้องกันความสูงเกินไปในมือถือ */
    }

    aside {
        width: 15%; /* กำหนดความกว้างของเมนูเป็น 15% ของหน้าจอ */
    }

    main {
        width: 85%; /* กำหนดความกว้างของเนื้อหาหลักเป็น 85% ของหน้าจอ */
        margin-top: 0; /* ลดระยะห่างด้านบนของ main ในหน้าจอมือถือ */
    }

    nav ul li a {
        font-size: 0.7rem; /* ลดขนาดตัวอักษรของเมนูลง 20% เพิ่มเติมในหน้าจอมือถือ */
    }
}

.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 2rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.login-container h2 {
    margin: 0 0 1rem 0;
    text-align: center;
}

.login-container form div {
    margin-bottom: 1rem;
}

.login-container label {
    display: block;
    margin-bottom: 0.5rem;
}

.login-container input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* เพิ่มการแก้ไขนี้เพื่อลบการตั้งค่าเพิ่มเติม */
    box-shadow: none; /* ลบเงา */
    background-color: white; /* ตั้งค่าสีพื้นหลัง */
}

.login-container button {
    width: 100%;
    padding: 0.5rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #45a049;
}