.modal {
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  position: fixed; /* Stay in place */
  z-index: 99999999999999999; /* Sit on top */
  padding-top: 40px; /* 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;
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  width: 774px;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.popup-editpass {
	position: relative;
}

/* The Close Button */
.close {
  color: #333333;
  font-size: 40px;
  font-weight: 400;
  position: absolute;
    top: 6px;
    right: 26px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
.title-modal {
  background: var(--color1);
  padding: 15px 20px 15px 20px;
  font-size: 16px;
  color: #fff;
  float: left;
  width: 100%;
}
.title-modal span:first-child {
  float: left;
}
.form-modal form {
  padding: 20px 15px 0px 15px;
}
.form-modal form p {
  margin-bottom: 3px;
  margin-top: 0px;
}
.form-modal form input {
  font-family: "Roboto", sans-serif;
  width: 100%;
  padding: 15px;
  border: 1px solid #cacaca;
  border-radius: 3px;
  font-size: 12px;
}
.form-modal form select {
  font-family: "Roboto", sans-serif;
  width: 100%;
  padding: 15px;
  border: 1px solid #cacaca;
  border-radius: 3px;
  font-size: 12px;
}
.form-modal form .name-ct,
.form-modal form .address,
.form-modal form .names,
.form-modal form .phone,
.form-modal form .email,
.form-modal form .dv {
  width: 50%;
  padding: 10px 15px;
  float: left;
}
.form-modal form .note {
  width: 100%;
  padding: 10px 15px;
  float: left;
}
.form-modal form textarea {
  width: 100%;
  padding: 10px 15px;
}
.sm {
  padding: 10px 15px 40px 15px;
  float: left;
}
.form-modal form input[type="submit"] {
  border: none;
  outline: none;
  background: var(--color1);
  padding: 15px;
  color: white;

  border-radius: 3px;
}
.form-modal form select {
  padding: 18px;
}
.form-modal form b {
  color: red;
}
.form-modal input[type="text"]::-webkit-input-placeholder,
.form-modal input[type="email"]::-webkit-input-placeholder,
.form-modal textarea::-webkit-input-placeholder,
.form-modal input[type="password"]::-webkit-input-placeholder {
  color: #cacaca;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
}
.form-modal select {
  color: black;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
#mydathang .sm-login {
  width: 120px;
}
@media (max-width: 792px) {
  .modal-content {
    width: 500px;
  }
}
@media (max-width: 575px) {
  .modal-content {
    width: 100%;
  }
  .form-modal form .name-ct,
  .form-modal form .address,
  .form-modal form .names,
  .form-modal form .phone,
  .form-modal form .email,
  .form-modal form .dv {
    width: 100%;
  }
}

#login {
  cursor: pointer;
}
#myLogin {
  display: none;
  padding: 30px 0;
}
#myLogin .modal-content {
  max-width: 95%;
  width: 400px;
}
.name-dn,
.email-dn,
.sm-login {
  padding: 0px 15px;
  margin: 20px 0px;
}
.link-quen {
  margin: 0;
  padding: 0px 15px;
}
.link-pace {
	margin-top: 32px;
}
#myLogin .form-modal .sm-dk input[type="submit"] {
  width: 100%;
  cursor: pointer;
}
#myLogin .form-modal form {
  padding: 15px 15px 40px 15px;
  font-size: 12px;
}
#myLogin .form-modal p {
  font-size: 14px;
}
#myLogin .link-quen a {
  color: #2F80ED;
  font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
.modal .form-modal {
  float: left;
  width: 100%;
  background: #fff;
}

#dk {
  cursor: pointer;
}
#mydk {
  display: none;
  padding: 30px 0;
}
#mydk .modal-content {
  max-width: 95%;
  width: 400px;
}
#mydk .name-dk,
.email-dk,
.matkhau-dk,
.matkhau-dk,
.sm-dk,
.link-login {
  padding: 0px 15px;
  margin: 20px 0px;
}
.link-login {
  margin: 20px 0px 0px 0px;
  padding: 0px 15px;
}
#mydk .form-modal .sm-dk input[type="submit"] {
  width: 100%;
  cursor: pointer;
}
#mydk .form-modal form {
  padding: 15px 15px 30px 15px;
  font-size: 12px;
}
#mydk .form-modal p {
  font-size: 14px;
}
#mydk .link-login a {
  color: #2F80ED;
}

@media (max-width: 575px) {
  .name-dh,
  .phone-dh,
  .email-dh,
  .sp-dh,
  .qc-sp,
  .sm-login {
    width: 100%;
  }
}
.errorMessage {
  padding: 3px 0 0 10px;
}
.box-dn {
  margin-bottom: 20px;
}
.popup-editpass form .box-dn .form-group {
  margin-bottom: 0;
}
.form-modal label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 14px;
}
.sm-dk #btn-register,
.sm-login #btn-login {
  color: #fff;
  background: var(--color1);
  font-size: 16px;
}
.btn {
  cursor: pointer;
}
.btn.active input {
  width: fit-content;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}

.btn.active:hover input {
  color: var(--color1);
}

.with-login {
  margin-top: 33px;
}
.with-login .title-or {
  position: relative;
  margin-top: 23px;
  text-align: center;
  z-index: 1;
}
.with-login .title-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f1f1;
  transform: translate(0, -50%);
  z-index: -1;
}
.with-login .title-or span {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #666666;
  padding: 0 10px;
  background: #ffffff;
}
.with-login .login-with {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  background: #f1f1f1;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  padding: 15px;
  margin-top: 20px;
}
.with-login .login-with span {
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  color: #333333;
}
.with-login .login-with .icon {
  width: 24px;
  height: 24px;
}
.with-login .login-with .icon img {
  width: 100%;
  height: 100%;
}
.bottom-register {
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.bottom-register::before,
.bottom-register::after {
  display: none;
}

.bottom-register .btn {
	width: 179px;
}