.img-responsive {

  max-width: 100%;

  height: auto;

}

.btn-reg {

  padding-top: 8px;

}

.btn_fixed {

  position: fixed;

  bottom: 35px;

  right: 30px;

  cursor: pointer;

  z-index: 99;

}

.btn_fixed img {

  margin: 0 auto;

}

/*Form Đăng Ký Pop-up*/

.form-dk {

  position: relative;

  /*background: url(../images/pc/Khung-DangKy-1.png) no-repeat top center;*/

  margin: 0 auto;

  flex: 0 0 auto;

  height: 100%;

  width: auto;

  z-index: 90;

}

.form-group {

  text-align: center;

}

.info-form-dk {

  flex: 0 0 auto;

  width: 100%;

}

.form-horizontal {

  padding: 0 0px;

  color: black;

  width: 80%;

  margin: 0 auto;

  text-align: center;

}

.form-title_pop {

  padding-bottom: 10px;

  padding-top: 10px;

}

.form-title_pop span {

  color: red;

  font-size: 28px;

  font-weight: 700;

  font-family: ui-sans-serif;

}

.form-buttonpc {

  /* top: 91%; */

  position: relative;

  text-align: center;

  margin: 0 auto;

  bottom: 0px;

}

/*form-dk-frame-1*/

.signup-form {

  display: grid;

  grid-auto-rows: auto;

  grid-row-gap: 1rem;

  align-items: center;

  padding: 0 2rem;

}

.signup-form input,

.signup-form select {

  display: block;

}

.signup-form select {

  height: 100%;

  display: block;

}

.signup-form input:not([type='checkbox']),

.signup-form select {

  border: 1px solid #006eac;

  border-radius: 8px;

  padding: 0.7rem 0.5rem;

  font: inherit;

}

.signup-form input[type='text'],

.signup-form input[type='tel'],

.signup-form select {

  width: 100%;

  height: 2.7rem;

  font-size: 1rem;

}

/* The Modal*/

.modal,

.modal_popup {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 9999999; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0, 0, 0); /* Fallback color */

  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

}

/* Modal Content */

.modal-content {

  position: relative;

  margin: auto;

  padding: 0;

  max-width: 470px;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

  -webkit-animation-name: animatetop;

  -webkit-animation-duration: 0.4s;

  animation-name: animatetop;

  animation-duration: 0.4s;

  border-radius: 25px;

}

/* Add Animation */

@-webkit-keyframes animatetop {

  from {

    top: -300px;

    opacity: 0;

  }

  to {

    top: 0;

    opacity: 1;

  }

}

@keyframes animatetop {

  from {

    top: -300px;

    opacity: 0;

  }

  to {

    top: 0;

    opacity: 1;

  }

}

/* The Close Button */

.close,

.close_popup,

.close_popup_auto {

  color: red;

  font-size: 32px;

  font-weight: bold;

  position: absolute;

  right: 20px;

  top: 7px;

  z-index: 3;

}

.close:hover,

.close:focus,

.close_popup:hover,

.close_popup:focus,

.close_popup_auto:hover,

.close_popup_auto:focus  {

  color: #fff;

  text-decoration: none;

  cursor: pointer;

}

.modal-header {

  background: #005395;

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

  padding: 15px;

  border-bottom: 1px solid #e5e5e5;

}

.modal-header h2 {

  text-align: center;

  color: #ffffff;

  font-size: 20px;

}

.modal-body {

  position: relative;

  /*background: url(../images/daihoi/bg-form-pc.png.webp) no-repeat top center;*/

  background-color: white;

  padding: 15px 25px;

  text-align: center;

  border-radius: 25px;

}

.modal-body .form-title {

  margin-bottom: 1rem;

}

span.title-form-popup {

  font-weight: bold;

  font-size: 1.3rem;

  color: #ac020b;

}

span.title-form-popup-1 {

  font-size: 1.5rem;

  color: #ac020b;

  font-weight: 600;

  line-height: 1.8rem;

  letter-spacing: 0.3rem;

}

.frm-title {

  margin-top: 1rem;

  font-size: 1.2rem;

  font-weight: 700;

  color: rgb(35, 129, 195);

}

form#frmContactPop {

  margin-top: 20px;

}

.container_1 {

  max-width: 100%;

}

.frame-flex-col {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.frame-flex-row {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

@media all and (max-width: 600px) {

  .frame-flex-row {

    flex-direction: column;

  }

}

div#errPositon {

  color: #004a96;

  transform: translateY(-10px);

}

/* Hien thi backgroup form dang ky */

.form-background {

  background: #f5f5f5;

  margin: 0 auto;

  width: 26rem;

  height: 17rem;

  min-height: 17rem;

  min-width: 26rem;

  display: block;

  text-align: center;

  position: relative;

  border-radius: 20px;

  z-index: 999;

  padding: 1rem 0 0;

  transform: translateY(0px);

}

img.image-title-km-3 {

  padding: 0 1rem 1rem;

}

.parallax {

  /* The image used */

  /* background: url(../images/pc-fix/ldp-sacdepmynu-desktop-07.webp); */

  background-image: linear-gradient(to bottom right, #003870, #006eac);

  /* background-image: radial-gradient(#003870, #006eac); */

  /* Full height */

  height: auto;

  /* Create the parallax scrolling effect */

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

}

.parallax-mb {

  /* The image used */

  /* background: url(../images/mb-fix/cutcode-hoithaoniengrang-mobi-05.webp); */

  background-image: linear-gradient(to bottom right, #003870, #006eac);

  /* background-image: radial-gradient(#003870, #006eac); */

  /* Full height */

  -webkit-background-size: cover;

  -moz-background-size: cover;

  background-size: cover;

  position: fixed;

  top: 0;

  width: 100vw;

  height: 200vh;

  z-index: -1;

}

.frameOne,

.frameTwo,

.frameThree,

.frameFour,

.frameFive,

.frameSix,

.frameSeven {

  position: relative;

  max-width: 430px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

  flex-direction: column;

}

.frameTwo {

  margin: 0 auto;

}

img.frameTwo-hieuung {

  position: absolute;

  top: -20px;

}

.frameThree {

    z-index: 1;

    margin: -18rem auto 0 auto;

}

img.frameThree-title {

    margin-top: 4.5rem;

    cursor: pointer;

}

.frameFour {

    margin: -5px auto -2px auto;

    cursor: pointer;

    z-index: 0;

}

.vongxoay {

    margin: -36rem auto 0 auto;

    transform: translate(-100px, 0px);

    width: 96%;

}

img.frameFour-footer {

    position: absolute;

    z-index: 2;

    bottom: 15px;

    cursor: pointer;

}

img.frameThree-hieuung {

    position: absolute;

    top: 7px;

}

/* Lazy load */

.lazy {

  filter: blur(10px); /* Apply a blur effect to the placeholder */

  transition: filter 0.3s; /* Add a transition effect when the image is loaded */

}

.lazy-loaded {

  filter: blur(0); /* Remove the blur effect when the image is loaded */

}

/*Vong quay*/

.circle {

  text-align: center;

  width: 100%;

  position: relative;

  margin: 0 auto;

  padding-top: 45px;

  padding-bottom: 30px;

  z-index: 2;

}

.rotate {

  margin: 0 auto;

}

.pointer {

  width: 100px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 8;

  cursor: pointer;

}