/* Định nghĩa các biến màu sắc và kích thước để tiện sử dụng sau này*/
:root{
--primary: #2196f3;
--primary-dark: #1565c0; /*màu dùng khi hover*/
--primary-light: #bbdefb; /*làm nền cho các phần tử hoạt động*/
--primary-mid:#90caf9;
--accent: #ff5722;/* màu dùng cho các phần tử nổi bật như nút bấm, liên kết, v.v. */
--accent2: #f44336; /* màu dùng cho các phần tử nổi bật như nút báo lỗi hoặc xóa */
--text:black; /* màu chữ chính */
--text-sub: gray; /* màu chữ phụ */
--white: #ffffff; /* màu trắng thuần */
--bg: #f4f8ff; /* màu nền chính */
--card-bg: #ffffff; /* màu nền cho các thẻ */
--border: #dce8fa; /* màu dùng cho các đường viền, phân cách */
--shadow: 0 4px 24px rgba(33,150,243,0.10); /* màu và độ mờ cho bóng đổ */
--radius: 14px; /* độ bo góc lớn */
--radius-sm: 8px; /* độ bo góc nhỏ */
}


.login-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: auto;
    background: #ffffff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: 0 100px;
}
.login-layout a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-sub);
    margin: 20px 0 0 20px;
}
.login-layout a:hover {
    color: var(--primary);
}


.login-form {
    display: grid;
    place-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.login-form-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: var(--shadow); 
}

.login-form h2 {
    margin-top: 10px;
}
.login-form h4 {
    color: var(--text-sub);
    font-style: regular;
    font-weight: 200;
    margin-top: 5px;
}
.login-form table {
    margin-top: 20px;
    justify-self: start; /* Ép riêng bảng table nhảy về sát bên trái */
    width: 100%;
}

.login-form table tr td {
    padding: 0px;
    color: var(--text);
}
.login-form table tr:nth-child(5) td {
    color: var(--text-sub);
}
.login-form table tr td ::placeholder {
   font-size: 15px;
   color: var(--text-sub);
}
.login-form table tr:nth-child(9) td,
.login-form table tr:nth-child(3) td,
.login-form table tr:nth-child(5) td {
    padding-top: 15px;
}
.login-form table tr:nth-child(9) td a {
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
    text-align: left;
}
.login-form table tr:nth-child(9) td {
    text-align: center;
}
.login-form input[type="text"],input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.login-form table tr td a {
    text-decoration: none;
    color: var(--primary);
    font-size: 13px;
    text-align: center;
}
.login-form table tr td.forgot-pass {
    text-align: right;
}
.btn-login {
    width: 100%;
    height: 50px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
}
.btn-google {
    width: 100%;
    height: 50px;
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}
.btn-facebook {
    width: 100%;
    height: 50px;
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}