#contact-info {
  padding: 51px 0 74px;
}

#contact-info .wrap {
  max-width: 533px;
  margin: 0 auto;
}

#contact-info dl {
  font-weight: bold;
  line-height: 1.4;
}

#contact-info dl dt {
  font-size: 14px;
}

#contact-info dl dd {
  font-size: 32px;
}

#contact-info dl dd img {
  width: 32px;
  margin: -5px 5px 0 0;
}

@media screen and (max-width: 767px) {
  #contact-info {
    padding: 20px 0;
  }
  #contact-info .wrap {
    max-width: unset;
  }
  #contact-info dl dt {
    font-size: 12px;
  }
  #contact-info dl dd {
    font-size: 20px;
  }
  #contact-info dl dd img {
    width: 22px;
    margin: -3px 3px 0 0;
  }
}

#contact-form {
  padding: 105px 0;
}

#contact-form .tabs-switch {
  background: var(--white);
  border-radius: 4px;
  max-width: 994px;
  margin: 0 auto;
  padding: 80px 20px;
}

#contact-form .tab-link {
  border-radius: 35px;
  background: var(--primary);
  max-width: 788px;
  margin: 0 auto;
}

#contact-form .tab-link li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 70px;
  gap: 7.5px;
  border-radius: 35px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: bold;
}

#contact-form .tab-link li::before {
  content: '';
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: auto;
  aspect-ratio: 1/1;
}

#contact-form .tab-link li small {
  display: block;
  color: var(--black-secondary);
  font-size: 10px;
  line-height: 1.6;
  font-weight: 400;
}

#contact-form .tab-link li:nth-child(1)::before {
  background-image: url("../img/contact/icon_mail.svg");
}

#contact-form .tab-link li:nth-child(2)::before {
  background-image: url("../img/contact/icon_user.svg");
}

#contact-form .tab-link li.active {
  background: var(--secondary);
  color: var(--white);
}

#contact-form .tab-link li.active small {
  color: var(--white);
}

#contact-form .tab-link li:nth-child(1).active::before {
  background-image: url("../img/contact/icon_mail2.svg");
}

#contact-form .tab-link li:nth-child(2).active::before {
  background-image: url("../img/contact/icon_user2.svg");
}

#contact-form .tab-content {
  max-width: 788px;
  margin: 40px auto 0;
}

#contact-form h2 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 33px;
}

#contact-form h2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary);
  width: 34px;
  height: 2px;
}

#contact-form h2 span {
  display: block;
  text-align: center;
  line-height: 1.4;
}

#contact-form h2 .eng {
  font-family: 'Krona One';
  color: var(--primary);
  font-size: 32px;
}

#contact-form h2 .jp {
  margin-top: -16px;
  font-size: 24px;
  font-weight: bold;
}

#contact-form .form-body .form-row + .form-row {
  margin-top: 48px;
}

#contact-form .tab2-form1, #contact-form .tab2-form2, #contact-form .tab2-form3 {
	margin-top: 48px;
}

#contact-form .tab2-form2 .list,
#contact-form .form-intro-list {
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}

#contact-form .tab2-form2 .list li,
#contact-form .form-intro-list li {
	font-size: 15px;
	line-height: 1.8;
	color: #222222;
	font-weight: 500;
}

#contact-form .tab2-form2 .txt,
#contact-form .tab2-form3 .txt,
#contact-form .form-intro-txt {
	font-size: 14px;
	line-height: 1.9;
	color: #333333;
	margin: 0;
	letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
	#contact-form .tab2-form1, #contact-form .tab2-form2, #contact-form .tab2-form3 {
		margin-top: 32px;
	}
	#contact-form .tab2-form2 .list li,
	#contact-form .form-intro-list li {
		font-size: 14px;
		line-height: 1.7;
	}
	#contact-form .tab2-form2 .txt,
	#contact-form .tab2-form3 .txt,
	#contact-form .form-intro-txt {
		font-size: 13px;
		line-height: 1.8;
	}
}

#contact-form .form-body .form-group {
  width: calc(50% - 16px);
}

#contact-form .form-body .half-width {
  width: calc(50% - 16px);
}

#contact-form .form-body .label-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
}

#contact-form .form-body .label-wrapper .form-label {
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
}

#contact-form .form-body .label-wrapper .required {
  text-align: center;
  background: #F15050;
  color: var(--white);
  border-radius: 4px;
  width: 48px;
  font-size: 10px;
  line-height: 21px;
}

#contact-form .form-body .custom-select {
  position: relative;
}

#contact-form .form-body .custom-select:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: var(--black-primary);
  width: 11px;
  height: 7px;
}

#contact-form .form-body .custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  background: #F3F1ED;
  border: 1px solid #D5CFC3;
  outline: none;
  width: 100%;
  border-radius: 4px;
  padding: 16px 15px;
  font-size: 14px;
  line-height: 1.4;
}

#contact-form .form-body .custom-input,
#contact-form .form-body .custom-textarea {
  display: block;
  border: none;
  outline: none;
  background: #f3f1ed;
  width: 100%;
  border-radius: 4px;
  padding: 17px 16px;
  font-size: 14px;
  line-height: 1.4;
}

#contact-form .form-body .custom-input::placeholder,
#contact-form .form-body .custom-textarea::placeholder {
  color: var(--black-thirdly);
}

#contact-form .form-body .custom-textarea {
  min-height: 120px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #222;
}

/* 3. Style ô checkbox mặc định của Contact Form 7 */
.custom-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1px solid #dcd6cd; /* Màu viền xám kem nhẹ */
  border-radius: 4px;       /* Bo góc ô vuông */
  background-color: #fff;
  cursor: pointer;
  position: relative;
	top: -1px;
  outline: none;
  transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:hover {
  border-color: #c5bebd;
}

.custom-checkbox input[type="checkbox"]:checked {
  background-color: #555;   /* Màu nền ô khi tích */
  border-color: #555;
}

.custom-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#contact-form .form-body .form-check-box {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

#contact-form .form-body .file-upload-box {
  text-align: center;
  border: 1px dashed #D5CFC3;
  border-radius: 4px;
  padding: 35px 0;
}

#contact-form .form-body .file-upload-box .file-upload-note {
  font-size: 14px;
}

#contact-form .form-body .file-upload-box .file-upload-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--secondary);
  color: var(--white);
  border-radius: 44px;
  width: 221px;
  height: 52px;
  padding-left: 22px;
  margin: 10px auto 0;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
}

#contact-form .form-body .file-upload-box .file-upload-btn:after {
  content: '';
  background: url("../img/contact/icon_upload.svg") no-repeat center/contain;
  width: 18px;
  height: auto;
  aspect-ratio: 18/16;
}

#contact-form .form-body .file-upload-box .file-upload-btn:hover {
  opacity: 0.8;
}

#contact-form .form-body .sub-text {
  margin-top: 13px;
  color: var(--black-thirdly);
  font-size: 12px;
}

#contact-form .form-body .privacy-box {
  text-align: center;
  border: 1px dashed #d5cfc3;
  border-radius: 4px;
  padding: 36px 36px 32px;
  margin-top: 47px;
}

#contact-form .form-body .privacy-box .privacy-text {
  margin-bottom: 14px;
  font-size: 14px;
}

#contact-form .form-body .privacy-box .privacy-text a {
  text-decoration: underline;
}

#contact-form .form-body .privacy-box .privacy-text a:hover {
  text-decoration: none;
}

#contact-form .form-body .privacy-box .privacy-checkbox-label {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

#contact-form .form-body .submit-wrapper {
  margin-top: 48px;
}

#contact-form .form-body .submit-wrapper .submit-btn {
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 44px;
  position: relative;
  background: var(--blue);
  color: var(--white);
  width: 100%;
  height: 73px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: bold;
  transition: 0.3s;
}

#contact-form .form-body .submit-wrapper .submit-btn:after {
  content: '';
  background: url("../img/shared/icon_arrow2.svg") no-repeat center/contain;
  width: 12px;
  height: auto;
  aspect-ratio: 12/11;
  filter: brightness(0) invert(1);
}

#contact-form .form-body .submit-wrapper .submit-btn:hover {
  opacity: 0.8;
}

#contact-form .form-body .txt {
  font-size: 14px;
  line-height: 1.6;
}

#contact-form .form-body .list {
  margin-bottom: 24px;
}

#contact-form .form-body .list li {
  font-size: 14px;
  line-height: 1.6;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
}
.confirm-btn-group{
	flex-wrap: wrap;
}
.confirm-btn-group .btn-back, input.wpcf7-previous{
	height: 73px;
}
.confirm-btn-group .btn-back, input.wpcf7-previous,
#contact-form .form-body .submit-wrapper.confirm-btn-group .submit-btn{
	width: calc(50% - 24px);
}
@media screen and (max-width: 767px) {
  #contact-form {
    background: var(--white);
    padding: 0 0 80px;
  }
  #contact-form .tabs-switch {
    border-radius: 0;
    padding: 0;
  }
  #contact-form .tab-link {
    border-radius: 4px;
  }
  #contact-form .tab-link li {
    height: 80px;
    gap: 4px;
    border-radius: 0;
    font-size: 12px;
  }
  #contact-form .tab-link li::before {
    width: 32px;
  }
	
	#contact-form .tab-link li:nth-child(1) {
		border-radius: 4px 0 0 4px;
	}
	
	#contact-form .tab-link li:nth-child(2) {
		border-radius: 0 4px 4px 0;
	}
	
  #contact-form .tab-content {
    margin: 32px 20px 0;
  }
  #contact-form h2 {
    padding-bottom: 14px;
    margin-bottom: 24px;
  }
  #contact-form h2 .jp {
    margin-top: -13px;
    font-size: 18px;
  }
  #contact-form .form-body .form-group {
    width: calc(50% - 2.5px);
  }
  #contact-form .form-body .df-pc .form-group {
    width: 100%;
  }
  #contact-form .form-body .df-pc .form-group + .form-group {
    margin-top: 48px;
  }
  #contact-form .form-body .half-width {
    width: 100%;
  }
  #contact-form .form-body .label-wrapper {
    gap: 8px;
    margin-bottom: 9px;
  }
  #contact-form .form-body .label-wrapper .form-label {
    font-size: 12px;
  }
  #contact-form .form-body .label-wrapper .required {
    width: 36px;
  }
  #contact-form .form-body .custom-select select {
    padding: 14.5px;
    font-size: 12px;
  }
  #contact-form .form-body .custom-input,
  #contact-form .form-body .custom-textarea {
    padding: 15.5px;
    font-size: 12px;
  }
  #contact-form .form-body .custom-textarea {
    min-height: 104px;
  }
  #contact-form .form-body .form-check-box {
    flex-direction: column;
  }
  #contact-form .form-body .file-upload-box .file-upload-note {
    font-size: 12px;
  }
  #contact-form .form-body .file-upload-box .file-upload-btn {
    width: 207px;
    height: 49px;
    padding-left: 20px;
    margin-top: 9px;
    font-size: 12px;
  }
  #contact-form .form-body .sub-text {
    margin-top: 18px;
    font-size: 10px;
  }
  #contact-form .form-body .privacy-box {
    padding: 35px 0;
    margin-top: 48px;
  }
  #contact-form .form-body .privacy-box .privacy-text {
    font-size: 12px;
  }
  #contact-form .form-body .submit-wrapper {
    width: 202px;
    margin-left: auto;
    margin-right: auto;
  }
  #contact-form .form-body .submit-wrapper .submit-btn {
    height: 47px;
    font-size: 12px;
  }
	.confirm-btn-group{
		flex-direction: column;
	}
	.confirm-btn-group .btn-back, input.wpcf7-previous{
		height: 47px;
		font-size: 12px;
	}
	.confirm-btn-group .btn-back, input.wpcf7-previous, #contact-form .form-body .submit-wrapper.confirm-btn-group .submit-btn{
		width: 100%;
	}
	.confirm-btn-group .submit-btn, input.wpcf7-submit{
		min-width: auto !important;
	}
	.confirm-btn-group .btn-back, input.wpcf7-previous{
		font-size: 12px !important;
	}
}


.wpcf7 input[type="file"] {
  display: none !important;
}