body {
 /* Thêm linear-gradient vào trước url, ngăn cách bằng dấu phẩy: Cho hinh nen toi mau */
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url('../img/background-login.jpg');   
    background-repeat: no-repeat;
    background-size: cover;
    color: white !important;

    /* Các thuộc tính bổ sung để đảm bảo nền hiển thị đẹp trên toàn trang */
    background-attachment: fixed; /* Giữ nền cố định khi cuộn trang */
    min-height: 100vh;         /* Đảm bảo body chiếm ít nhất toàn bộ chiều cao màn hình */	
	/* Cần thêm position: relative để định vị logo-container theo nó */
    position: relative;
}
/* --- CSS CHO LOGO THÊM VÀO --- */
/* Container chứa các logo */
.logo-container {
    position: absolute; /* Định vị tuyệt đối so với body */
    top: 2rem;          /* Khoảng cách từ trên xuống (ví dụ: 32px) */
    left: 2rem;         /* Khoảng cách từ trái qua (ví dụ: 32px) */
    display: flex;      /* Dùng flexbox để dễ dàng sắp xếp */
    flex-direction: row; /* Sắp xếp các logo theo chiều dọc (cái trên, cái dưới=Column) */
    gap: 1.5rem;          /* Khoảng cách giữa 2 logo */
    z-index: 10;        /* Đảm bảo logo luôn nổi lên trên các phần tử khác */
}

/* Kiểu cho mỗi logo bên trong container */
.logo-container .logo {
    width: 150px;     /* Chiều rộng của mỗi logo, bạn có thể thay đổi */
    height: auto;     /* Chiều cao tự động điều chỉnh để không bị méo ảnh */
}
.login-panel {
    background-color: #ff9a68; /*#8BC34A; --> Xanh la #ff9a68: Mau tuong cua UTS*/
    padding: 15px;
    padding: 15px;
    border-radius: 3%;
}
.container {
    position: relative;
    top: 35%;
    transform: translateY(-50%);
	/* Thêm dòng này để dịch sang trái */
    left: 10px; /* Dịch sang trái gia tri<0. Sang phai: > 0 */
    /* --- THU NHỎ CHIỀU NGANG --- */
    width: 80%;      /* Đặt chiều rộng bằng 80% so với phần tử cha */
    max-width: 600px; /* Đặt chiều rộng tối đa là 800px. Dù màn hình lớn hơn, nó cũng không rộng ra nữa.
                         Đây là cách tốt để đảm bảo responsive. */
    
    /* --- GIẢM CHIỀU CAO --- */
    height: 480px;    /* Đặt chiều cao cố định là 400px. */

    /* --- Thuộc tính bổ sung hữu ích --- */
    margin: 0 auto;  /* Tự động căn giữa container theo chiều ngang sau khi đã thu nhỏ chiều rộng */
    overflow: auto;  /* Nếu nội dung bên trong dài hơn chiều cao 400px, thanh cuộn sẽ xuất hiện */	
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .container {
        max-width: 100% !important;
		top: 55%;
    }
    .div-login {
        max-width: 100%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .container {
		width: 80%;
		max-width: 100% !important;
		top: 50%;
    }
    .div-login {
        max-width: 100%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .container {
		width: 80%;
        max-width: 100% !important;
		top: 45%;
    }
    .div-login {
        max-width: 100%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .container {
		width: 80%;
        max-width: 70% !important;
		top: 45%;
    }
    .div-login {
        max-width: 40%;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .container {
		width: 100%;
        max-width: 80% !important;
		top: 40%;
    }
    .div-login {
        max-width: 40%;
    }
}