.contact-page {
   background: #fafafa;
   color: var(--sdn-color-text);
}

.contact-page__surface {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 58%);
   border-radius: 0 0 12rem 12rem;
   box-shadow: 0 4rem 4rem rgba(0, 0, 0, .05);
   min-height: 121.6rem;
   padding: 4rem 0 11rem;
   position: relative;
}

.contact-page__surface::before {
   background: radial-gradient(circle 63.1rem at -13.7rem 63.1rem, rgba(37, 167, 223, .25), rgba(37, 167, 223, 0));
   bottom: 0;
   content: '';
   left: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: 20rem;
}

.contact-page__surface::after {
   background: radial-gradient(circle 63.1rem at calc(100% + 6.9rem) 24.8rem, rgba(255, 145, 46, .25), rgba(255, 145, 46, 0));
   content: '';
   height: 87.9rem;
   max-height: 100%;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: -12rem;
   width: max(56.2rem, 100%);
}

main:has(.contact-page) {
   overflow: visible;
}

.contact-page .container {
   max-width: 124.8rem;
   position: relative;
   z-index: 1;
}

.contact-page__breadcrumb {
   align-items: center;
   display: flex;
   gap: 1.2rem;
   justify-content: center;
   margin-top: 2.2rem;
}

.contact-page__breadcrumb-link {
   display: block;
}

.contact-page__breadcrumb-link img {
   display: block;
   height: 2.4rem;
   width: 2.4rem;
}

.contact-page__breadcrumb-sep {
   background: #999;
   border-radius: 50%;
   display: block;
   height: .4rem;
   width: .4rem;
}

.contact-page__breadcrumb-current {
   background: var(--sdn-color-secondary-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-size: 1.4rem;
   line-height: 2rem;
}

.contact-page__hero {
   align-items: start;
   display: grid;
   grid-template-columns: 1fr 48.6rem;
   margin-top: 7.2rem;
   min-height: 27.2rem;
}

.contact-page__heading {
   padding-top: 4.6rem;
}

.contact-page__title-row {
   align-items: center;
   display: flex;
   gap: 1.2rem;
}

.contact-page__title,
.contact-page__lead {
   font-family: 'Be Vietnam Pro', sans-serif;
   font-size: 6.4rem;
   font-weight: 600;
   letter-spacing: 0;
   line-height: 7.6rem;
   margin: 0;
}

.contact-page__mascot {
   border-radius: 50%;
   height: 10rem;
   object-fit: cover;
   width: 10rem;
}

.contact-page__title strong,
.contact-page__lead strong {
   background: var(--sdn-color-primary-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font: inherit;
}

.contact-page__visual {
   height: 27.2rem;
   position: relative;
}

.contact-page__visual-main {
   border-radius: 1.2rem;
   box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .05);
   height: 25.8rem;
   object-fit: cover;
   position: absolute;
   right: 0;
   top: 0;
   width: 45.8rem;
}

.contact-page__marker {
   bottom: 0;
   height: 2.8rem;
   left: 1.4rem;
   position: absolute;
   width: 2.8rem;
}

.contact-page__body {
   display: grid;
   gap: 3.2rem;
   grid-template-columns: minmax(0, 1fr);
   margin-top: 7.2rem;
   padding-bottom: 8rem;
}

.contact-page__body--form-only {
   grid-template-columns: minmax(0, 69.6rem);
}

.contact-page__info {
   align-self: start;
   background: #fff;
   border-radius: 2.4rem;
   box-shadow: 0 .8rem 1.2rem rgba(0, 0, 0, .1);
   padding: 4rem;
}

.contact-page__info-title {
   color: #031732;
   font-size: 2rem;
   font-weight: 600;
   line-height: 2.8rem;
   margin: 0 0 2.4rem;
}

.contact-page__info-list {
   display: grid;
   gap: 1.6rem;
}

.contact-page__info-list p,
.contact-page__info-list a {
   align-items: flex-start;
   color: var(--sdn-color-text);
   display: flex;
   font-size: 1.4rem;
   gap: .8rem;
   line-height: 2rem;
   margin: 0;
   text-decoration: none;
}

.contact-page__info-list a:hover {
   color: var(--sdn-color-primary);
}

.contact-page__info-icon {
   flex: 0 0 2.4rem;
   height: 2.4rem;
   width: 2.4rem;
}

.contact-page__socials {
   display: flex;
   flex-wrap: wrap;
   gap: 1.6rem;
   margin-top: 2rem;
}

.contact-page__socials-link {
   align-items: center;
   color: var(--sdn-color-primary);
   display: flex;
   font-size: 1.4rem;
   font-weight: 600;
   height: 2rem;
   justify-content: center;
   text-decoration: none;
   width: 2rem;
}

.contact-page__socials-link:not(:has(img)) {
   width: auto;
}

.contact-page__socials-link img {
   display: block;
   height: 2rem;
   object-fit: contain;
   width: 2rem;
}

.contact-page__form {
   min-width: 0;
   padding-top: .1rem;
}

.contact-page__notice {
   color: #656565;
   font-size: 1.4rem;
}

.contact-page__form .wpcf7-form {
   display: grid;
   gap: 4rem 5.6rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-page__form .wpcf7-form>p {
   margin: 0;
}

.contact-page__form .wpcf7-form>p:nth-of-type(5),
.contact-page__form .wpcf7-form>p:nth-of-type(6) {
   grid-column: 1 / -1;
}

.contact-page__form .wpcf7-form>p:last-of-type,
.contact-page__form .wpcf7-form>input[type='submit'] {
   grid-column: 1 / -1;
   justify-self: start;
}

/* Nút submit + spinner xếp cùng hàng, căn giữa theo chiều dọc */
.contact-page__form .wpcf7-form>p:last-of-type {
   align-items: center;
   display: flex;
   gap: 2rem;
}

/* common.css đang đặt `form input { width: 100% }` — trong flex row phải
   trả nút submit về kích thước nội dung, không thì nó sẽ ép spinner teo lại. */
.contact-page__form .wpcf7-form>p:last-of-type input[type='submit'] {
   flex: 0 0 auto;
   width: auto;
}

.contact-page__form label {
   color: #131313;
   display: block;
   font-size: 1.4rem;
   line-height: 2rem;
}

.contact-page__form label>span:not([class]) {
   color: #c33025;
}

.contact-page__form label .wpcf7-form-control-wrap {
   display: block;
   margin-top: .8rem;
}

.contact-page__form input:not([type='submit']),
.contact-page__form textarea,
.contact-page__form select {
   background: transparent;
   border: 0;
   border-bottom: 1px solid #f0f0f0;
   border-radius: 0;
   box-sizing: border-box;
   color: var(--sdn-color-text);
   font: inherit;
   font-size: 1.4rem;
   height: 4.8rem;
   outline: 0;
   padding: 1.2rem 2.4rem;
   width: 100%;
}

.contact-page__form select {
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5L12 15.5L18 9.5' stroke='%23131313' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-position: right 1.2rem center;
   background-repeat: no-repeat;
   background-size: 2.4rem 2.4rem;
   cursor: pointer;
   padding-right: 4.8rem;
}

.contact-page__form select:has(option:first-child:checked) {
   color: #999;
   font-style: italic;
}

.contact-page__form textarea {
   height: 12rem;
   padding-left: 2rem;
   resize: none;
}

.contact-page__form input:focus,
.contact-page__form textarea:focus,
.contact-page__form select:focus {
   border-bottom-color: #656565;
}

.contact-page__form input::placeholder,
.contact-page__form textarea::placeholder {
   color: #999;
   font-style: italic;
}

.contact-page__form input[type='submit'] {
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(168deg, #ffc76c 3.69%, #ff8110 96.89%);
   background-position: right 2.4rem center, 0 0;
   background-repeat: no-repeat, no-repeat;
   background-size: 2.4rem 2.4rem, 100% 100%;
   border: 0;
   border-radius: 4rem;
   color: #fff;
   cursor: pointer;
   font: 600 1.8rem/2.4rem 'Be Vietnam Pro', sans-serif;
   min-height: 5.6rem;
   padding: 1.6rem 6.8rem 1.6rem 3.2rem;
}

.contact-page__form input[type='submit']:hover {
   filter: brightness(.97);
}

/* Spinner loading khi submit — CF7 tự thêm/bỏ class `submitting` trên <form> */
.contact-page__form .wpcf7-spinner {
   background-color: rgba(255, 129, 16, .18);
   display: none;
   flex: none;
   margin: 0;
   opacity: 1;
}

.contact-page__form form.submitting .wpcf7-spinner {
   display: inline-block;
}

.contact-page__form .wpcf7-spinner::before {
   background-color: #ff8110;
}

.contact-page__form .wpcf7-response-output {
   border: 0;
   box-shadow: inset 0 0 0 1px #f0f0f0;
   font-size: 1.4rem;
   grid-column: 1 / -1;
   line-height: 1.6;
   margin: 0;
   padding: 1.6rem 2rem;
}

.contact-page__form .wpcf7-not-valid-tip,
.contact-page__form .wpcf7-response-output {
   font-size: 1.2rem;
}

@media (min-width: 900px) {
   .contact-page__body:not(.contact-page__body--form-only) {
      gap: 6.4rem;
      grid-template-columns: 45.6rem minmax(0, 1fr);
   }
}

@media (max-width: 991px) {
   .contact-page__hero {
      grid-template-columns: 1fr;
      margin-top: 7rem;
   }

   .contact-page__visual {
      margin: 4rem auto 0;
      max-width: 48.6rem;
      width: 100%;
   }

   .contact-page__title,
   .contact-page__lead {
      font-size: 5rem;
      line-height: 1.15;
   }
}

@media (max-width: 767px) {
   .contact-page__surface {
      border-radius: 0 0 5rem 5rem;
      min-height: 0;
      padding-bottom: 6rem;
   }

   .contact-page__breadcrumb {
      margin-top: 1rem;
   }

   .contact-page__hero {
      margin-top: 4rem;
   }

   .contact-page__heading {
      padding-top: 0;
   }

   .contact-page__title,
   .contact-page__lead {
      font-size: 3.6rem;
      line-height: 1.2;
   }

   .contact-page__mascot {
      height: 6rem;
      width: 6rem;
   }

   .contact-page__visual {
      height: 19rem;
   }

   .contact-page__visual-main {
      height: 17.6rem;
      width: calc(100% - 2rem);
   }

   .contact-page__body {
      margin-top: 3rem;
   }

   .contact-page__body--form-only {
      grid-template-columns: 1fr;
   }

   .contact-page__info {
      padding: 2.4rem;
   }

   .contact-page__form .wpcf7-form {
      gap: 2.4rem;
      grid-template-columns: 1fr;
   }

   .contact-page__form .wpcf7-form>p {
      grid-column: auto !important;
   }
}