@import url('/login-final-v24.css?v=24');

/* v28: flat action rows. No nested grid/flex inheritance from legacy login styles. */
#login.login-v20 .login-v28-row{
  position:relative!important;
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  min-height:62px!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 9px!important;
  padding:9px 48px 9px 12px!important;
  overflow:hidden!important;
  border:1px solid #d9e4ef!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff 0%,#f2f7fb 100%)!important;
  color:#0a2d58!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
  text-decoration:none!important;
  text-align:left!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
#login.login-v20 .login-v28-row *{box-sizing:border-box!important}

#login.login-v20 .login-v28-icon{
  display:grid!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  background:#e7f3ff!important;
  color:#177be1!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}
#login.login-v20 .login-v28-zalo .login-v28-icon{
  background:#218cf4!important;
  color:#fff!important;
}

#login.login-v20 .login-v28-text{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:1 1 auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  color:#0a2d58!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.25!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-overflow:clip!important;
}

#login.login-v20 .login-v28-sub{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:2px 0 0!important;
  padding:0!important;
  color:#66798d!important;
  font-size:9.5px!important;
  font-weight:550!important;
  line-height:1.25!important;
  white-space:normal!important;
}

#login.login-v20 .login-v28-arrow{
  position:absolute!important;
  top:50%!important;
  right:12px!important;
  display:grid!important;
  width:30px!important;
  height:30px!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:9px!important;
  background:#e5eef6!important;
  color:#22527f!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1!important;
  transform:translateY(-50%)!important;
}

/* Highest-specificity fix for the first row: bypass any legacy anchor/span width rules. */
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row{
  display:block!important;
  min-height:68px!important;
  padding:0!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-icon{
  position:absolute!important;
  left:12px!important;
  top:50%!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{
  position:absolute!important;
  left:64px!important;
  right:52px!important;
  top:50%!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  color:#0a2d58!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.22!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-overflow:clip!important;
  transform:translateY(-50%)!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{
  font-size:0!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-title{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  color:#0a2d58!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-overflow:clip!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-sub{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:3px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  color:#66798d!important;
  font-size:9.5px!important;
  font-weight:550!important;
  line-height:1.2!important;
  white-space:normal!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-arrow{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
}


/* v28.2: keep the course-registration copy full-width and stable. */
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{
  left:64px!important;
  right:52px!important;
  width:calc(100% - 116px)!important;
  max-width:calc(100% - 116px)!important;
  min-width:0!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-title{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-sub{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:430px){
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row{
    min-height:78px!important;
  }
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{
    width:calc(100% - 100px)!important;
    max-width:calc(100% - 100px)!important;
  }
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-sub{
    white-space:normal!important;
    line-height:1.25!important;
  }
}

/* Force old action descendants out of the layout if a cached DOM survives. */
#login.login-v20 .login-v20-action-copy,
#login.login-v20 .login-v27-action-copy,
#login.login-v20 .login-v20-action-title,
#login.login-v20 .login-v27-action-title,
#login.login-v20 .login-v20-action-subtitle,
#login.login-v20 .login-v27-action-subtitle{
  max-width:none!important;
}

/* Hide assistant while login is visible. */
body.login-v20-active .ai-chat-launcher,
body.login-v20-active .ai-chat-panel{display:none!important}

@media(max-width:760px){
  #login.login-v20 .login-v28-row{
    min-height:66px!important;
    gap:10px!important;
    padding:9px 46px 9px 10px!important;
  }
  #login.login-v20 .login-v28-icon{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
  #login.login-v20 .login-v28-text{font-size:13px!important}
  #login.login-v20 .login-v28-sub{font-size:9.4px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row{min-height:70px!important;padding:0!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-icon{left:10px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{left:62px!important;right:48px!important;font-size:13px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-title{font-size:13px!important}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-sub{font-size:9.4px!important}
}

@media(max-width:430px){
  #login.login-v20 .login-v28-row{
    min-height:64px!important;
    gap:9px!important;
    padding-right:42px!important;
  }
  #login.login-v20 .login-v28-icon{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    font-size:17px!important;
  }
  #login.login-v20 .login-v28-text{font-size:12.2px!important}
  #login.login-v20 .login-v28-sub{font-size:9px!important}
  #login.login-v20 .login-v28-arrow{right:9px!important;width:28px!important;height:28px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-icon{left:9px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text{left:57px!important;right:43px!important;font-size:12.2px!important}
  #login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-title{font-size:12.2px!important}
#login.login-v20 #loginCourseRegistrationBtn.login-v28-row>.login-v28-text>.login-v28-sub{font-size:9px!important}
}