* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #e8f5e9;
        }

        header {
            background-color: #006633;
            color: white;
            /*padding: 20px 0;*/
            /*position: fixed;*/
            width: 100%;
            top: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            text-align: center;
        }
        
        .header-wrapper {
            max-width: 75%;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
        
        }
        
        .container0 {
            display: flex;
            gap: 10px;
            max-width: 950px;
            margin: 15px auto 0;
            justify-content: flex-start; /* Căn theo lề trái */
            padding-left: 20px; /* Đảm bảo thẳng với nội dung */
        }

        .container0 button {
            background-color: #2e7d32;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .container0 button:hover {
            background-color: #1b5e20;
        }

        .container0 button.active {
            background-color: #f1f858;
            color: black;
        }
        .semester-tag {
            margin-bottom: 20px;
            margin-top: 20px;
            
        }
        .container {
            display: none;
            grid-template-columns: repeat(3, 1fr);
            /*padding: 50px 20px 80px;*/
            max-width: 950px;
            margin: 0 auto;
        }

        .container.active {
            display: grid;
        }

        .subject-column {
            padding: 20px;
            border-radius: 10px;
        }

        .subject-column h2 {
            color: #2e7d32;
            margin-bottom: 15px;
            padding-bottom: 10px;
        }

        .exam-list li {
            margin-bottom: 10px;
        }
        a {
            text-decoration: underline; /* Thêm gạch chân */
            color: black; /* Màu chữ phù hợp với giao diện */
            cursor: pointer;
        }
        
        a:hover {
            color: #1b5e20; /* Màu khi di chuột vào */
            text-decoration: none; /* Loại bỏ gạch chân khi hover */
            font-weight: bold; /* Làm đậm chữ nếu cần */
        }
       .new-tag {
            color: #e53935; /* Màu vàng */
            font-weight: bold;
            font-size: 0.9em;
            margin-left: 8px;
            background-color: #fff9e6; /* Nền vàng nhạt */
            padding: 2px 8px;
            border-radius: 4px;
            animation: blink 1s infinite ease-in-out; /* Hiệu ứng nhấp nháy */
            border: 1px solid #ffd700;
        }
        .loading, .error {
            padding: 2rem;
            text-align: center;
            font-size: 1.2rem;
            color: #666;
        }
        
        .error {
            color: #d32f2f;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        footer {
            background-color: #e1e1e1;
            color: #444;
            text-align: center;
            padding: 15px;
            /*position: fixed;*/
            bottom: 0;
            width: 100%;
        }
.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
@media(max-width: 768px) {
    .auth-buttons a { display: none; }
    .menu-toggle { display: block; }
    .auth-buttons.open a { display: block; margin: 10px 0; }
    .auth-form-container { padding: 20px; }
}
.auth-form-container {
    max-width: 400px;
    margin: 50px 200px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.auth-form label {
    display: block;
    margin: 10px 0 5px;
}
.auth-form input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.auth-form .btn {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    border: none;
    border-radius: 4px;
    background: #4CAF50;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

       @media (max-width: 768px) {
        .container0 {
            flex-wrap: wrap;
            justify-content: flex-start;
            padding-left: 0;
            margin: 15px 20px 0;
        }
    
        .container {
            grid-template-columns: 1fr;
            padding: 20px;
        }
    
        .subject-column {
            padding: 15px;
        }
    
        .exam-list {
            padding-left: 20px;
        }
    }