.bodyCenter{ display: flex; flex-direction: column; justify-content: space-between; height: 100vh;}
.bgLogin{ display: grid; grid-template-columns: 1fr 1fr; max-width: 850px; margin: 30px auto 0;
    width: 100%; grid-gap: 15px;}

@supports (gap:30px){
    .bodyCenter{ gap: 30px;}
}

@supports not(gap:30px){
    .bodyCenter{ grid-gap: 30px;}
}

@media (max-width:991px){
    .bgLogin{ grid-template-columns: 1fr;}
}

/* left */
.loginLeft{ display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 25px 15px; background: var(--clWhite); 
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); border-radius: 10px;}

.loginSocial{ display: flex; align-items: center; justify-content: center; gap: 15px;}
.loginSocial li{ text-align: center;}
.loginSocial a{ display: flex; align-items: center; justify-content: center; text-decoration: none; width: 50px; height: 50px; 
    border: 1px solid var(--clBlackGray); border-radius: 50%; padding: 15px; color: var(--clBlackGray);}
.loginSocial a:hover{ color: var(--clWhite);}

.loginSocial a.facebook:hover{ background: #4267b2; border: 1px solid #4267b2;}
.loginSocial a.google:hover{ background: #d93025; border: 1px solid #d93025;}
.loginSocial a.linkedin:hover{ background: #2977c9; border: 1px solid #2977c9;}

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

.flexForm{ display: flex; width: 100%;}
.form-control-feed{ position: absolute; top: 10px; left: 10px;}
.form-control-back{ padding-left: 30px; border-radius: 50px;}
.hasJobbkk{ width: 100%; position: relative;}

.enterBack{ display: flex; align-items: center; justify-content: center; width: 100%; gap: 15px;}
.enterBack button{ background: var(--clRed); border: 1px solid var(--clRed); color: var(--clWhite); border-radius: 50px; padding: 5px 20px;}
.enterBack a{ display: inline-block; background: var(--clWhite); border: 1px solid var(--clBlackGray); border-radius: 50px; 
    color: var(--clBlackGray); padding: 5px 20px; text-decoration: none;}

.enterBack button:hover{ background: var(--clRedHover); border: 1px solid var(--clRedHover);}
.enterBack a{ display: inline-block; background: var(--clWhite); border: 1px solid var(--clRed); border-radius: 50px; 
    color: var(--clRed); padding: 5px 20px; text-decoration: none;}
.enterBack a:hover{ background: var(--clRedHover); color: var(--clWhite); border: 1px solid var(--clRedHover);}

.forget{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 15px;}
.forget a.clickRegis{ color: var(--clRed);}
.forget a:hover{ text-decoration: underline !important;}

/* right */
.loginRight{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 25px 15px;}
.picApplicant{ margin-top: 70px; width: 100%; display: flex; align-items: center; justify-content: center;}
.picApplicant img.imgTwo{ max-width: 30rem;}

@media (max-width:991px){
    .picApplicant{ margin-top: 0;}
}

.theStep{ display: flex; flex-direction: column;}
.theStep li:first-child{ line-height: 2.5;}
.theStep li.stepTwo{ color: var(--clRed); font-weight: 900;}

.ready{ border: 1px dashed var(--clBlackGray); padding: 10px; border-radius: 10px; width: 100%;}
.ready span{ color: var(--clRed); font-weight: 900;}

.home a{ color: var(--clBlackGray);}
.home a:hover{ text-decoration: underline !important;}