@font-face {
    font-family: 'LexendDeca';
    src: url('/Content/font/LexendDeca-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('/Content/font/LexendDeca-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('/Content/font/LexendDeca-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'LexendDeca';
    src: url('/Content/font/LexendDeca-Light.ttf') format('truetype');
    font-weight: 200;
}
@font-face {
    font-family: 'LexendDeca';
    src: url('/Content/font/LexendDeca-Thin.ttf') format('truetype');
    font-weight: 100;
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #feeeff;
    font-family: 'LexendDeca', sans-serif;
    background-color: none;
    background: url('/Images/home/Background-Login.png') no-repeat center;
    background-repeat: no-repeat;
    background-size: cover;
}
a {
    text-decoration: none;
    cursor: pointer;
}
    /* Lưới tím neon */
    body::before {
/*        content: "";*/
        position: fixed;
        inset: 0;
        background-size: 140px 140px;
        opacity: .35;
        pointer-events: none;
    }

    /* Aurora tím */
    body::after {
/*        content: "";*/
        position: fixed;
        inset: 0;
        filter: blur(120px);
        opacity: .8;
    }
#login {
    width: 500px;
    overflow: hidden;
    position: relative;
/*    background: transparent !important;*/
}
.form-control {
    border: 1px solid rgba(151,125,255,0.35); /* #977dff */
    background: rgba(255,255,255,0.07);
    color: #feeeff;
}

    .form-control:focus {
        border-color: #b34ff6;
        box-shadow: 0 0 18px #b34ff666; /* #b34ff6 glow */
    }

/* BACKGROUND */
.login-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #f5f7fb, #e9edf5);
    position: relative;
    overflow: hidden;
}

/* CARD */
.login-card {
    width: 508px;
    min-height: 584px;
    border-radius: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: transparent;
    /* Căn chỉnh nội dung */
    display: flex;
    flex-direction: column;

}
.login-card-inner {
    position: absolute;
    width: 100%;
    height: 593.73px;
    z-index: 1;
    background: rgba(200, 235, 255, 0.12);
    border-radius: 32px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: none;
    box-sizing: border-box;
}
    .login-card-inner.register-part{
        height:100% !important;
    }
    .login-card-content, .register-card-content {
        position: relative;
        z-index: 5;
        width: 100%;
        height: 100%;
        padding: 44px 81px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 32px;
    }
.login-card-content{
    height:593.73px !important;
}
    .login-card-content::after, .register-card-content:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 32px;
        pointer-events: none;
        border: 2px solid transparent;
        background: linear-gradient(to bottom, rgba(154, 188, 214, 0) 0%, rgba(154, 188, 214, 0) 30%, rgba(154, 188, 214, 0.9) 100% ) border-box;
        -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }


/* LOGO */
    .login-card-content .logo {
        width: 180px;
        margin-bottom: 32px;
    }
    .register-card-content .logo {
        width: 180px;
        margin-bottom: 13px;
    }

/* TITLE */
    .login-card-content h2 {
        margin-bottom: 32px;
        font-size: 22px;
        color: black;
        font-weight: 500;
    }
.register-card-content h2 {
    margin-bottom: 13px;
    font-size: 22px;
    color: black;
    font-weight: 500;
}

/* INPUT */
.login-card input {
    color:black;
    width: 100%;
    padding: 12px;
/*    margin-bottom: 12px;*/
    border-radius: 4px;
    border: 1px solid #ddd;
    outline: none;
    font-size: 12px;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius:4px !important;
}

.input-group {
    position: relative; 
    background: transparent;
    width:100%;
    margin-bottom:12px;
}
    .input-group input, .account-type-group select {
        width: 100%;
        padding: 12px;
        color: black;
        font-family: "Lexend Deca", sans-serif;
        font-size: 12px;
        font-weight: 300;
        line-height: 1.2;
        box-sizing: border-box;
        height: 42px;
        outline: none;
        border: 1px solid #ccc;
        display: block;
    }
.toggle-password {
    position: absolute;
    right: 10px;
    top: 20px;
    border-radius: 8px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #888;
    transition: 0.2s;
}

    .toggle-password:hover {
        opacity: 1;
    }

/* error */
.error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

/* FORGOT */
.forgot {
    width:100%;
    text-align: right !important;
    font-size: 12px;
    color: #777;
    margin-bottom: 15px;
    display:flex;
    justify-content:right;
}
.forgot button{
    color: #777;
    text-decoration: none;
    border:none;
    background-color:transparent;
}

/* BUTTON */
.btn-primary {
    width: 100%;
    max-height:48px;
    padding: 14px;
    border-radius: 4px;
    border: none;
    background: linear-gradient(88deg, var(--Azure-5, #3556B6) -4.03%, var(--Light-Blue-5, #4CA3EC) 106.57%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* DIVIDER */
.divider {
    margin: 5px 0;
    font-size: 12px;
    color: #888;
}

/* SOCIAL */
.social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.3s;
}

    .social-btn svg {
        width: 20px;
        height: 20px;
    }

    /* hover */
    .social-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

/* SIGNUP */
.signup {
    margin-top: 52px;
    margin-bottom:0px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
}
/*.signup{
    margin-top: 20px;
    font-size: 13px;
    color: #666;
}*/

    .signup span {
        color: var(--Azure-6, #2A4592);
        font-weight: 600;
    }


#auth {
    width: 500px;
    overflow: hidden;
}

.auth-container {
    display: flex;
    width: 200%;
    transition: transform 0.5s ease;
}

.auth-box {
    width: 50%;
    flex-shrink: 0;
}

/* slide qua register */
.auth-container.active {
    transform: translateX(-50%);
    background: transparent !important;
}

/*Custom tab*/
.custom-tab .tab-nav {
    display: inline-flex;
    padding: 4px;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    background: var(--grey-1-5);
    margin-bottom:26px !important;
}

    .custom-tab .tab-nav .tab-btn {
        display: flex;
        padding: 9px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 46px;
        background: transparent;
        color: var(--grey-10);
        font-size: 12px !important;
    }

        .custom-tab .tab-nav .tab-btn.active {
            display: flex;
            padding: 9px 20px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 46px;
            background: var(--azure-0);
            border: none;
        }
        .tab-pane{
            background:transparent;
        }

/* toggle tab*/
.toggle-tab {
    position: relative;
    width: 100%;
    min-height: 100px; /* Đảm bảo có chiều cao tối thiểu */
}

    /* Mặc định ẩn cả hai */
    .toggle-tab .left,
    .toggle-tab .right {
        display: none;
        width: 100%;
        animation: fadeIn 0.4s ease; /* Thêm hiệu ứng chuyển cảnh */
    }

        /* Chỉ hiển thị thẻ có class active */
        .toggle-tab .left.active,
        .toggle-tab .right.active {
            display: block; /* Hoặc flex tùy layout bên trong */
        }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* custom validate error*/
.ict-validate-error, .match-pw-error{
    font-size:12px;
    color:red;
    text-align:start;
}

/* Select */
.login-card select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Responsive */
@media(max-width:425px) {
    #login{
        width:95% !important;
        margin-top:40px;
    }
    .login-card-content {
        padding: 0px 34px;
    }
    .register-card-content{
        padding:22px 34px;
    }

}
#login-btn .btn-loading,
#login .register-btn .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    #login-btn .btn-loading .spinner,
    #login .register-btn .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }