

/* V67 - Popup đăng ký giữa màn hình, nền rất nhẹ, vẫn cuộn và thao tác trang phía sau */

button#formdangky{

  position:fixed;

  left:50%;

  right:auto;

  bottom:20px;

  z-index:9998;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-height:44px;

  margin:0;

  padding:0 20px;

  border:0;

  border-radius:999px;

  background:linear-gradient(135deg,#0b7bdc 0%,#075eae 100%);

  color:#fff;

  font:800 13px/1 "Segoe UI",Arial,sans-serif;

  letter-spacing:.15px;

  text-transform:uppercase;

  cursor:pointer;

  box-shadow:0 10px 26px rgba(6,72,132,.3);

  transform:translateX(-50%);

  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;

}

button#formdangky:hover{

  transform:translate(-50%,-2px);

  background:linear-gradient(135deg,#0c86ee 0%,#075ca6 100%);

  box-shadow:0 14px 32px rgba(6,72,132,.36);

}

button#formdangky:focus-visible{

  outline:3px solid rgba(11,123,220,.25);

  outline-offset:3px;

}

button#formdangky .uk-icon{display:inline-flex;color:#fff;line-height:0}

button#formdangky .uk-icon svg{width:18px;height:18px;fill:none;stroke:currentColor}



.formdangky{

  position:fixed;

  inset:0;

  z-index:100000000000;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:24px;

  overflow:visible;

  background:rgba(7,25,45,.08);

  -webkit-backdrop-filter:none;

  backdrop-filter:none;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  touch-action:pan-y;

  transition:opacity .25s ease,visibility .25s ease;

}

.formdangky.formxuathien{

  opacity:1;

  visibility:visible;

  pointer-events:none;

}

body.vn-register-modal-open{overflow-y:auto!important}

body.vn-register-modal-open button#formdangky{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}



.chuaformvanuttat{

  position:relative;

  width:min(470px,calc(100vw - 32px));

  max-height:calc(100vh - 48px);

  margin:auto;

  padding:0;

  overflow-y:auto;

  overscroll-behavior:contain;

  pointer-events:auto;

  touch-action:auto;

  transform:translateY(18px) scale(.985);

  opacity:.75;

  scrollbar-width:thin;

  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .25s ease;

}

.formxuathien .chuaformvanuttat{

  transform:translateY(0) scale(1);

  opacity:1;

}

.chuaform{

  position:relative;

  overflow:hidden;

  border:1px solid rgba(8,116,209,.2);

  border-radius:20px;

  background:#fff;

  box-shadow:0 24px 70px rgba(3,25,49,.3);

}

.vn-register-head{

  padding:26px 64px 23px 27px;

  background:linear-gradient(135deg,#0d3a76 0%,#0a65b6 100%);

  color:#fff;

}

.vn-register-kicker{

  display:block;

  margin:0 0 6px;

  color:#bfe5ff;

  font:800 10px/1.2 "Segoe UI",Arial,sans-serif;

  letter-spacing:1.3px;

  text-transform:uppercase;

}

.vn-register-head h3{

  margin:0 0 7px;

  color:#fff;

  font:800 25px/1.25 "Segoe UI",Arial,sans-serif;

  text-align:left;

}

.vn-register-head p{

  margin:0;

  color:rgba(255,255,255,.86);

  font:400 13px/1.55 "Segoe UI",Arial,sans-serif;

}

button.tatform{

  position:absolute;

  top:13px;

  right:13px;

  z-index:6;

  display:flex;

  align-items:center;

  justify-content:center;

  width:38px;

  height:38px;

  margin:0;

  padding:0;

  border:1px solid rgba(255,255,255,.32);

  border-radius:50%;

  background:rgba(255,255,255,.14);

  color:#fff;

  font:800 18px/1 "Segoe UI",Arial,sans-serif;

  cursor:pointer;

  transition:background .18s ease,transform .18s ease;

}

button.tatform:hover{background:rgba(255,255,255,.25);transform:rotate(3deg)}

button.tatform:focus-visible{outline:3px solid rgba(255,255,255,.3);outline-offset:2px}



.chuaform form{

  display:block;

  margin:0;

  padding:23px 27px 26px;

}

.chuaform .form-control{

  display:block;

  width:100%;

  height:48px;

  margin:0 0 12px;

  padding:0 14px;

  border:1px solid #cfdeea;

  border-radius:9px;

  background:#f9fbfd;

  color:#20384d;

  font:500 14px/1.4 "Segoe UI",Arial,sans-serif;

  text-indent:0;

  box-shadow:none;

  outline:0;

  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;

}

.chuaform .form-control::placeholder{color:#8295a7;opacity:1}

.chuaform .form-control:focus{

  border-color:#1682dc;

  background:#fff;

  box-shadow:0 0 0 3px rgba(22,130,220,.13);

}

.chuaform input[type='submit'].form-control{

  height:48px;

  margin:4px 0 0;

  border:0;

  background:linear-gradient(135deg,#0b7bdc 0%,#075eae 100%);

  color:#fff;

  font-weight:800;

  letter-spacing:.2px;

  cursor:pointer;

  box-shadow:0 8px 20px rgba(7,94,174,.22);

}

.chuaform input[type='submit'].form-control:hover{

  background:linear-gradient(135deg,#0d88ee 0%,#075ca6 100%);

}

.vn-register-hotline{

  margin:14px 0 0!important;

  color:#5c7285!important;

  font:500 12px/1.5 "Segoe UI",Arial,sans-serif!important;

  text-align:center;

}

.vn-register-hotline a{color:#0874d1!important;font-weight:800;text-decoration:none!important}



.hidden-message.alert-box.success{

  display:none;

  margin:0;

  padding:34px 28px 30px;

  background:#fff;

  color:#26445d;

  text-align:center;

  font:500 14px/1.65 "Segoe UI",Arial,sans-serif;

}

.hidden-message.alert-box.success strong{

  display:block;

  margin-bottom:7px;

  color:#0a65b6;

  font-size:20px;

}

.vn-register-done{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:120px;

  height:42px;

  margin-top:18px;

  padding:0 18px;

  border:0;

  border-radius:8px;

  background:#0874d1;

  color:#fff;

  font:800 13px/1 "Segoe UI",Arial,sans-serif;

  cursor:pointer;

}



button.nutgoidien{

  position:fixed;

  bottom:26px;

  left:3px;

  z-index:1000;

  padding:0 8px;

}

.nutgoidien{display:none}

button.nutgoidien a{color:#fff}

.uk-button-danger{background:#ff3547;color:#fff;border:1px solid transparent}



@media(max-width:1024px){

  .nutgoidien{display:block}

  .formdangky{align-items:center;justify-content:center;padding:20px}

  .chuaformvanuttat{width:min(500px,calc(100vw - 32px));max-height:calc(100vh - 40px)}

}

@media(max-width:576px){

  button#formdangky{left:50%;right:auto;bottom:14px;min-height:42px;padding:0 16px;font-size:12px;transform:translateX(-50%)}

  button#formdangky:hover{transform:translate(-50%,-2px)}

  .formdangky{align-items:center;justify-content:center;padding:12px;background:rgba(7,25,45,.07);-webkit-backdrop-filter:none;backdrop-filter:none}

  .chuaformvanuttat{width:calc(100vw - 24px);max-height:calc(100vh - 24px)}

  .chuaform{border-radius:18px}

  .vn-register-head{padding:22px 58px 19px 20px}

  .vn-register-head h3{font-size:21px}

  .chuaform form{padding:19px 20px 22px}

  .chuaform .form-control{height:46px;margin-bottom:10px}

}

