@media (min-width: 850px) {
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background: url('/images/login/loginwallpaper.png') no-repeat center center fixed;
        background-size: cover;
        height: 100vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .login-wrapper {
        width: 50%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-container {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        width: 350px;
        max-width: 100%;
    }
        .login-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: calc(100% - 24px);
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-container input[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

            .login-container input[type="submit"]:hover {
                background-color: #0056b3;
            }

        .login-container .footer {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #555;
        }

            .login-container .footer a {
                color: #007bff;
                text-decoration: none;
            }

                .login-container .footer a:hover {
                    text-decoration: underline;
                }

}
       
    .header-content {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .logoPTC {
        width: 50px;
        height: auto;
    }

    .time-display h1 {
        margin: 0;
        font-size: 18px;
        color: black;
    }

    .time-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p {
        margin: 0;
        font-size: 18px;
        color: black;
        display: block;
    }

@media (max-width: 768px) {
    /* Căn giữa nội dung cho màn hình nhỏ hơn 768px */
    /*body {
        font-size: 10px;
        justify-content: center;
        align-items: center;
    }*/
    body {
        background: url('/images/login/loginwallpaper.png') no-repeat center center fixed;
        background-size: cover;
        font-size: 10px;
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-wrapper {
        width: 90%; /* Chiếm 90% chiều rộng để phù hợp hơn với màn hình nhỏ */
        height: auto; /* Cho phép chiều cao tự động */
        background-color: rgba(255, 255, 255, 0.8); /* Đảm bảo nền sáng hơn nếu cần */
    }

    .login-container {
        width: 100%; /* Đảm bảo login-container chiếm toàn bộ chiều rộng của login-wrapper */
        max-width: none; /* Bỏ giới hạn chiều rộng tối đa */
        padding: 20px; /* Giảm padding cho màn hình nhỏ */
    }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: calc(100% - 50px);
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-container input[type="submit"] {
            width: 50% !important;
            padding: 12px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .login-container p {
            display: none;
        }

        .login-container .time-display {
            display: none;
        }

        .login-container .logoPTC {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

.alert-danger
{
    color: red;
}