.frame-child {
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 579px;
    z-index: 2
}

.frame-wrapper {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 100%;
    padding: 0 0 0 var(--padding-12xs);
    width: 814px
}

.image-1-icon {
    display: none;
    height: 146.7px;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 814px
}

.welcome-btn-title {
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    line-height: 50px;
    padding: 25px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1
}

.welcome-btn {
    align-items: flex-start;
    align-self: stretch;
    background-image: url(/images/button.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
    max-width: 500px;
    width: 100%;
    z-index: 2
}

.image-1-icon1 {
    display: none;
    height: 146.7px;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 814px
}

.welcome-controls {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 22.7px;
    max-width: 100%;
    width: 814px
}

.main,.welcome {
    display: flex;
    justify-content: flex-start;
    position: relative
}

.main {
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-24xl);
    max-width: 100%;
    padding-top: 100px
}

.login-form,.main {
    align-items: center
}

.login-form {
    aspect-ratio: 1/1;
    background-image: url(/images/khung-1@2x.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    flex-direction: column;
    gap: var(--gap-9xl);
    justify-content: flex-start;
    margin: auto;
    max-width: 800px;
    padding: var(--padding-8xl-5) var(--padding-11xl) 52.2px var(--padding-18xl);
    width: 90%;
    z-index: 2
}

.frame-title {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    max-width: 100%
}

.form-input,.form-input-wrapper {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
    max-width: 100%
}

.form-input {
    align-items: center;
    background-color: var(--color-saddlebrown);
    border: 1.1px solid var(--color-papayawhip-200);
    border-radius: 40.48px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: row;
    gap: var(--gap-xl-6);
    margin: auto;
    max-width: 400px;
    overflow: hidden;
    padding: 5px 10px;
    z-index: 3
}

.form-input-wrapper,.frame-title {
    align-self: stretch
}

.form-input-wrapper {
    box-sizing: border-box;
    flex-direction: row;
    padding: 0 var(--padding-37xl) 0 var(--padding-36xl)
}

.frame-title {
    flex-direction: column;
    gap: 4.7px
}

.title-wrapper,.wrapper-rectangle-9575-group {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 100%
}

.input-icon {
    aspect-ratio: 1/1;
    flex-shrink: 0;
    height: 80%;
    overflow: hidden;
    position: relative;
    width: 30px
}

.wrapper-rectangle-9575-group {
    flex: 1;
    position: relative
}

.title-wrapper {
    align-self: stretch;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    z-index: 3
}

.wrapper-rectangle-9575-item {
    height: 100%;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 0;
    transform: scale(1.459);
    width: 100%
}

.khung-copy-11 {
    flex: 1;
    height: 40.8px;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.login-title {
    color: var(--color-cornsilk);
    font-family: var(--font-svn-hemi-head);
    font-size: var(--font-size-19xl-7);
    letter-spacing: .02em;
    margin: 0!important;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 223px;
    z-index: 2
}

.login-btn-title,.login-title {
    display: inline-block;
    text-transform: uppercase;
    white-space: nowrap
}

.login-btn-title {
    color: var(--color-white);
    font-family: var(--font-sf-pro-display);
    font-size: 29.6px;
    font-weight: 600;
    line-height: 35px;
    padding: 25px;
    position: relative;
    text-align: left;
    text-align: center;
    width: 175px;
    z-index: 1
}

.login-btn,.login-controls {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    max-width: 100%
}

.login-btn {
    background-color: transparent;
    background-image: url(/images/button.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    cursor: pointer;
    flex: 1;
    justify-content: center;
    z-index: 3
}

.login-controls {
    align-self: stretch;
    justify-content: flex-start;
    padding: 0 var(--padding-38xl) 0 var(--padding-36xl)
}

.checkbox-tick,.remember {
    position: relative;
    z-index: 3
}

.checkbox-tick {
    height: 25px;
    margin: 0;
    width: 25px
}

.remember {
    align-self: stretch;
    cursor: pointer;
    display: inline-block;
    height: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap
}

.remember-wrapper {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5.9px 0 0
}

.checkbox-tick-parent,.login-remember {
    align-items: flex-start;
    display: flex;
    flex-direction: row
}

.checkbox-tick-parent {
    gap: 6.1px;
    justify-content: flex-start
}

.login-remember {
    align-self: stretch;
    color: #f5ec01;
    font-size: var(--font-size-base);
    justify-content: center;
    padding: 0 3px 0 0
}

.register-link {
    color: var(--color-khaki-100);
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    letter-spacing: .02em;
    min-width: 115px;
    position: relative;
    text-decoration: underline;
    white-space: nowrap;
    z-index: 3
}

.login-register-wrapper {
    flex-direction: row;
    gap: 4.5px;
    justify-content: center
}

.login-form,.login-register-wrapper {
    align-items: flex-start;
    display: flex;
    max-width: 100%
}

.login-form {
    box-sizing: border-box
}

.login-register {
    font-size: var(--font-size-7xl);
    padding: 0 var(--padding-11xs) 0 0;
    text-align: center;
    width: 100%
}

input.input {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    height: 100%;
    outline: none
}

.input:-webkit-autofill,.input:-webkit-autofill:active,.input:-webkit-autofill:focus,.input:-webkit-autofill:hover {
    background: none;
    -webkit-transition: none;
    transition: none
}

@media screen and (max-width: 900px) {
    .modal {
        width:90%
    }

    .welcome-btn-title {
        font-size: var(--font-size-14xl)
    }

    .main {
        box-sizing: border-box;
        padding-bottom: 181px;
        padding-top: 197px
    }
}

@media screen and (max-width: 450px) {
    form.login-form {
        background-size:cover;
        padding: 0 0 100px
    }

    .title-wrapper {
        margin-top: 10px
    }

    .login-title {
        font-size: 30px;
        top: 15px
    }

    .login-controls {
        padding: 15px 15px 0
    }

    img.input-icon {
        width: 30px
    }

    .login-btn-title {
        font-size: 20px;
        padding: 20px
    }

    .login-remember {
        font-size: 15px
    }

    .login-register-text {
        font-size: 20px
    }

    .welcome-btn-title {
        font-size: var(--font-size-2xl);
        padding: 20px
    }

    .main {
        box-sizing: border-box;
        gap: var(--gap-2xl);
        padding-bottom: 118px;
        padding-top: 128px
    }

    .welcome-btn {
        padding: 0
    }

    .frame-wrapper {
        padding: 20px
    }
}