.container-login {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container-login .login {
    width: 95%;
    display: flex;
    padding: 20px 20px;
    border-radius: 10px;
    background-color: var(--background-color);
    border: 1px solid #0000001c;
    max-width: 550px;
    flex-direction: column;
    align-items: center;
}

.container-login .register {
    width: 95%;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-top: 10px;
    justify-content: center;
    gap: 3px;
    background-color: var(--background-color);
    border: 1px solid #0000001c;
    max-width: 550px;
    border-radius: 10px;
}

.text-login.h1 {
    font-size: 25px;
    color: var(--color-theme);
    font-family: var(--font-mod);
}
.text-login.span {
    text-align: center;
    font-family: var(--font-mod);
}

.btn-login.a1 {
    width: 100%;
    padding: 10px;
    border: none;
    background: var(--color-theme);
    color: #fff;
    border-radius: 7px;
    margin-top: 7px;
    cursor: pointer;
    font-family: var(--font-mod);
    transition: all linear .3s;
}

.btn-login.a1:hover {
    background: var(--color-theme);
    color: #fff;
    transform: translateY(-2px);
}
.container-login .login .input.email {
    transition: all linear .2;
    width: 100%;
    border-radius: 8px;
    margin: 7px 0;
    border: 2px solid #00000017;
    padding: 10px;
    background: #f5f3f366;
}
.container-login .login .input.username {
    transition: all linear .2;
    width: 100%;
    border-radius: 8px;
    margin: 7px 0;
    border: 2px solid #00000017;
    padding: 10px;
    background: #f5f3f366;
}
.container-login .login .input.password {
    transition: all linear .2s;
    width: 100%;
    border-radius: 8px;
    margin: 10px 0;
    border: 2px solid #00000017;
    padding: 10px;
    background: #f5f3f366;
}
.container-login .login .input.password:focus,
.container-login .login .input.username:focus,
.container-login .login .input.email:focus {
    border: 2px solid var(--color-theme);
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* CSS cho Desktop */
@media (min-width: 1024px) {

}

/* CSS cho Laptop */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* CSS cho Tablet */
@media (min-width: 600px) and (max-width: 768px) {

}

/* CSS cho Điện thoại */
@media (max-width: 600px) {

}