@font-face {
  font-family: "MuangthaicapModern-Regular";
  src:
    url("/assets/fonts/MuangthaicapModern-Regular.ttf")
    format("truetype");

  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MuangthaicapText-Regular";
  src:
    url("/assets/fonts/MuangthaicapText-Regular.ttf")
    format("truetype");

  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.page-contact {
  --contact-primary: #0098dc;
  --contact-text: #454644;
  --contact-muted: #a6a6a6;

  /*
   * ใช้ระยะเดียวกับ Navigation Path
   * ของหน้า “ร่วมงานกับเรา” ที่แนบมา
   */
  --page-breadcrumb-top-space: 21.4px;
  --page-breadcrumb-bottom-space: 42.24px;
}

/* ==========================================================================
   Active links บนแถบเมนูสีเหลือง
   ========================================================================== */

.page-contact
  .utility-nav
  .is-contact-section-active {
  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );

  font-weight: 600;
}

/* ==========================================================================
   Navigation Path
   ========================================================================== */

.page-contact .contact-breadcrumb {
  width: 100%;
  height: auto;
  background: #ffffff;
}

.page-contact .contact-breadcrumb__inner {
  display: flex;
  height: auto;
  align-items: flex-start;

  padding-block:
    var(--page-breadcrumb-top-space)
    var(--page-breadcrumb-bottom-space);
}

.page-contact .contact-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 3px;

  margin: 0;
  padding: 0;

  list-style: none;

  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );

  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.page-contact .contact-breadcrumb__home {
  color: var(--contact-muted);
  text-decoration: none;

  transition: color 180ms ease;
}

.page-contact .contact-breadcrumb__home:hover,
.page-contact .contact-breadcrumb__home:focus-visible {
  color: var(--contact-primary);
}

.page-contact .contact-breadcrumb__home:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.page-contact .contact-breadcrumb__separator {
  color: #404040;
}

.page-contact .contact-breadcrumb__current {
  color: var(--contact-primary);
}

/* ==========================================================================
   Contact information
   ========================================================================== */

.page-contact .contact-information {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding-bottom: clamp(64px, 5vw, 88px);

  background: #ffffff;
}

.page-contact .contact-information__inner {
  box-sizing: border-box;
  padding-top: 0;
}

/* หัวข้อ “ติดต่อเรา” */

.page-contact .contact-information__title {
  margin: 0;

  color: var(--contact-primary);
  text-align: center;

  font-family:
    "MuangthaicapModern-Regular",
    sans-serif;

  font-size: clamp(31.62px, 2.79vw, 37.2px);
  font-weight: 400;
  line-height: 1.1;
}

/* แบ่งข้อความฝั่งซ้ายและรูปภาพฝั่งขวา */

.page-contact .contact-information__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.97fr)
    minmax(0, 1fr);

  align-items: start;
  column-gap: 44px;

  margin-top: 57px;
}

/* ==========================================================================
   Content ฝั่งซ้าย
   ========================================================================== */

.page-contact .contact-information__content {
  min-width: 0;
  padding-top: 1px;

  color: var(--contact-text);

  font-family:
    "MuangthaicapModern-Regular",
    sans-serif;

  font-weight: 400;
}

.page-contact .contact-information__label {
  margin: 0;

  color: var(--contact-text);

  font-size: clamp(18px, 1.395vw, 18.9px);
  line-height: 1.2;
}

.page-contact .contact-information__company {
  margin: 21.8px 0 0;

  color: var(--contact-primary);

  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );

  font-size: clamp(26.1px, 2.07vw, 29.7px);
  font-weight: 500;
  line-height: 1.12;
}

.page-contact .contact-information__address {
  margin-top: 19.8px;

  color: var(--contact-text);

  font-family:
    "MuangthaicapText-Regular",
    sans-serif;

  font-size: 15.3px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
}

/* รายการโทรศัพท์ อีเมล และวันทำการ */

.page-contact .contact-information__list {
  display: grid;
  row-gap: 16.9px;

  margin: 20.6px 0 0;
  padding: 0;

  list-style: none;
}

.page-contact .contact-information__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;

  margin: 0;

  color: var(--contact-text);

  font-family:
    "MuangthaicapText-Regular",
    sans-serif;

  font-size: 15.3px;
  font-weight: 400;
  line-height: 1.4;
}

.page-contact .contact-information__item--workday {
  align-items: start;
}

.page-contact .contact-information__icon {
  display: block;
  width: 24px;
  height: 24px;

  object-fit: contain;
}

.page-contact
  .contact-information__item--workday
  .contact-information__icon {
  margin-top: 2px;
}

.page-contact .contact-information__link {
  width: fit-content;

  color: inherit;
  text-decoration: none;

  transition: color 180ms ease;
}

.page-contact .contact-information__link:hover,
.page-contact .contact-information__link:focus-visible {
  color: var(--contact-primary);
}

.page-contact .contact-information__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.page-contact .contact-information__workday {
  margin: 0;

  color: var(--contact-text);
  text-align: left;
  line-height: 1.67;
}

.page-contact .contact-information__link,
.page-contact .contact-information__workday {
  font-family:
    "MuangthaicapText-Regular",
    sans-serif;

  font-weight: 400;
}

/* ==========================================================================
   รูปภาพฝั่งขวา
   ========================================================================== */

.page-contact .contact-information__media {
  width: 100%;
  overflow: hidden;
  margin-top: 3px;

  aspect-ratio: 7 / 5;

  border-radius: 10px;
  background: #f2f2f2;
}

.page-contact .contact-information__image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

/* ==========================================================================
   Contact channels
   ========================================================================== */

.page-contact .contact-channels {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;

  background: #ffffff;
}

.page-contact .contact-channels__inner {
  box-sizing: border-box;
  display: grid;

  /*
   * อัตราส่วนนี้ทำให้พื้นที่แผนที่กว้างกว่า
   * Content ฝั่งขวาเล็กน้อยตามภาพตัวอย่าง
   */
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(0, 1fr);

  align-items: center;
  column-gap: clamp(24px, 2vw, 34px);
  min-height: 0;
  padding-block: clamp(64px, 5vw, 88px);
}

/* ==========================================================================
   Google Maps ฝั่งซ้าย
   ========================================================================== */

.page-contact .contact-channels__map {
  width: 100%;
  overflow: hidden;

  /*
   * ภาพตัวอย่างมีอัตราส่วนใกล้เคียง 4:3
   */
  aspect-ratio: 4 / 3;

  background: #eeeeee;
}

.page-contact .contact-channels__map-frame {
  display: block;
  width: 100%;
  height: 100%;

  border: 0;
}

/* ==========================================================================
   Content ฝั่งขวา
   ========================================================================== */

.page-contact .contact-channels__content {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;

  padding-left: clamp(0px, 0.75vw, 12px);
}

.page-contact .contact-channels__title {
  margin: 0;

  color: var(--contact-primary);

  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );

  font-size: clamp(19.5px, 1.3975vw, 22.1px);
  font-weight: 500;
  line-height: 1.1;
}

/* รายการ Social Media */

.page-contact .contact-channels__list {
  display: grid;
  width: 100%;
  row-gap: clamp(22px, 3vh, 26px);

  margin: clamp(38px, 5.2vh, 46px) 0 0;
  padding: 0;

  list-style: none;
}

.page-contact .contact-channels__item {
  min-width: 0;
  margin: 0;
}

.page-contact .contact-channels__link {
  display: grid;
  grid-template-columns: 28.8px minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;

  width: fit-content;
  max-width: 100%;

  color: #252525;
  text-decoration: none;

  font-family:
    "MuangthaicapModern-Regular",
    sans-serif;

  font-size: clamp(14.4px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.3;

  transition:
    color 250ms ease,
    opacity 250ms ease;
}

.page-contact .contact-channels__link:hover {
  color: var(--contact-primary);
}

.page-contact .contact-channels__link:focus-visible {
  color: var(--contact-primary);
  outline: 2px solid var(--color-focus);
  outline-offset: 5px;
}

/* ==========================================================================
   Social media icons
   ========================================================================== */

.page-contact .contact-channels__icon {
  display: block;
  width: 28.8px;
  height: 28.8px;

  background-color: currentColor;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-contact .contact-channels__icon--facebook {
  color: #1877f2;

  -webkit-mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-facebook.svg");
  mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-facebook.svg");
}

.page-contact .contact-channels__icon--line {
  color: #06c755;

  -webkit-mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-line.svg");
  mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-line.svg");
}

.page-contact .contact-channels__icon--youtube {
  color: #ff0000;

  -webkit-mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-youtube.svg");
  mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-youtube.svg");
}

.page-contact .contact-channels__icon--tiktok {
  color: #000000;

  -webkit-mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-tiktok.svg");
  mask-image:
    url("https://muangthaicap.com/mtc-public/assets/images/contact/contact-tiktok.svg");
}

/* ==========================================================================
   ปุ่มค้นหาสาขา
   ========================================================================== */

.page-contact .contact-channels__branch-button {
  display: inline-flex;
  width: min(100%, 425px);
  min-height: 56px;
  align-items: center;
  justify-content: center;
  align-self: center;

  transform: scale(0.8);
  transform-origin: center center;

  box-sizing: border-box;
  margin-top: clamp(48px, 4vw, 64px);
  padding: 10px 24px;

  border-radius: 5px;
  background-color: #fff033;
  color: var(--contact-primary);
  text-decoration: none;

  font-family:
    "MuangthaicapModern-Regular",
    sans-serif;

  font-size: clamp(19px, 1.4vw, 21px);
  font-weight: 400;
  line-height: 1.2;

  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}

.page-contact .contact-channels__branch-button:hover,
.page-contact .contact-channels__branch-button:focus-visible {
  background-color: var(--contact-primary);
  color: #ffffff;
}

.page-contact .contact-channels__branch-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 5px;
}

/* ==========================================================================
   หน้าจอขนาดกลาง
   ========================================================================== */

@media (max-width: 1024px) {
  .page-contact {
    --page-breadcrumb-bottom-space: 38.72px;
  }

  .page-contact .contact-information__inner {
    padding-top: 0;
  }

  .page-contact .contact-information__layout {
    column-gap: 28px;
    margin-top: 44px;
  }

  .page-contact .contact-information__company {
    font-size: clamp(24.3px, 2.7vw, 27.9px);
  }

  .page-contact .contact-information__address,
  .page-contact .contact-information__item {
    font-size: 14.4px;
  }

  .page-contact .contact-channels__inner {
    column-gap: 24px;
    padding-block: 60px;
  }

  .page-contact .contact-channels__title {
    font-size: clamp(17.55px, 1.95vw, 20.15px);
  }

  .page-contact .contact-channels__list {
    row-gap: 20px;
    margin-top: 34px;
  }

  .page-contact .contact-channels__link {
    grid-template-columns: 25.6px minmax(0, 1fr);
    column-gap: 15px;

    font-size: 13.6px;
  }

  .page-contact .contact-channels__icon {
    width: 25.6px;
    height: 25.6px;
  }

  .page-contact .contact-channels__branch-button {
    min-height: 52px;
    margin-top: 48px;

    font-size: 18px;
  }
}

/* ==========================================================================
   Mobile และ Tablet แนวตั้ง
   ========================================================================== */

@media (max-width: 800px) {
  .page-contact {
    --page-breadcrumb-bottom-space: 36.08px;
  }

  .page-contact .contact-breadcrumb__list {
    font-size: 11px;
  }

  .page-contact .contact-information {
    min-height: auto;
    padding-bottom: 48px;
  }

  .page-contact .contact-information__inner {
    padding-top: 0;
  }

  .page-contact .contact-information__title {
    font-size: clamp(27.9px, 7.44vw, 33.48px);
  }

  /*
   * เปลี่ยนจากสองคอลัมน์เป็น
   * ข้อความด้านบนและรูปภาพด้านล่าง
   */
  .page-contact .contact-information__layout {
    grid-template-columns: 1fr;
    row-gap: 36px;

    margin-top: 36px;
  }

  .page-contact .contact-information__label {
    font-size: 18.9px;
  }

  .page-contact .contact-information__company {
    margin-top: 18px;
    font-size: clamp(23px, 5.9vw, 27px);
  }

  .page-contact .contact-information__address {
    margin-top: 18px;
    font-size: 14.4px;
  }

  .page-contact .contact-information__list {
    margin-top: 18px;
    row-gap: 16px;
  }

  .page-contact .contact-information__item {
    font-size: 14.4px;
  }

  .page-contact .contact-information__media {
    width: 100%;
    margin-top: 0;
    aspect-ratio: 7 / 5;
  }

  .page-contact .contact-channels {
    min-height: auto;
  }

  .page-contact .contact-channels__inner {
    grid-template-columns: 1fr;
    row-gap: 36px;

    min-height: 0;
    padding-block: 48px;
  }

  .page-contact .contact-channels__map {
    aspect-ratio: 4 / 3;
  }

  .page-contact .contact-channels__content {
    width: 100%;
    padding-left: 0;
  }

  .page-contact .contact-channels__title {
    font-size: clamp(17.55px, 4.55vw, 20.8px);
  }

  .page-contact .contact-channels__list {
    row-gap: 20px;
    margin-top: 28px;
  }

  .page-contact .contact-channels__link {
    grid-template-columns: 25.6px minmax(0, 1fr);
    column-gap: 15px;

    font-size: 13.6px;
  }

  .page-contact .contact-channels__icon {
    width: 25.6px;
    height: 25.6px;
  }

  .page-contact .contact-channels__branch-button {
    width: min(100%, 425px);
    min-height: 52px;
    margin-top: 40px;

    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .page-contact {
    --page-breadcrumb-top-space: 18px;
    --page-breadcrumb-bottom-space: 30px;
  }

  .page-contact .contact-information {
    padding-bottom: 40px;
  }

  .page-contact .contact-information__title {
    font-size: clamp(27px, 7.5vw, 31px);
  }

  .page-contact .contact-information__layout {
    row-gap: 30px;
    margin-top: 30px;
  }

  .page-contact .contact-information__label {
    font-size: 17px;
  }

  .page-contact .contact-information__company {
    margin-top: 14px;
    font-size: clamp(22px, 6vw, 25px);
    line-height: 1.18;
  }

  .page-contact .contact-information__address,
  .page-contact .contact-information__item {
    font-size: 14px;
  }

  .page-contact .contact-information__item {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 9px;
  }

  .page-contact .contact-information__icon {
    width: 22px;
    height: 22px;
  }

  .page-contact .contact-channels__inner {
    row-gap: 32px;
    padding-block: 40px;
  }

  .page-contact .contact-channels__map {
    aspect-ratio: 1 / 1;
  }

  .page-contact .contact-channels__list {
    row-gap: 18px;
    margin-top: 24px;
  }

  .page-contact .contact-channels__link {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    font-size: 13px;
  }

  .page-contact .contact-channels__icon {
    width: 24px;
    height: 24px;
  }

  .page-contact .contact-channels__branch-button {
    min-height: 48px;
    margin-top: 34px;
    transform: none;
    font-size: 17px;
  }
}

/* ==========================================================================\n   Portrait up to iPad Mini: mobile contact flow and divider spacing\n   ========================================================================== */
@media (max-width: 800px) and (orientation: portrait) {
  /* Keep the mobile ordering: image first, then head-office details. */
  .page-contact .contact-information__media {
    grid-row: 1;
  }

  .page-contact .contact-information__content {
    grid-row: 2;
  }

  .page-contact .contact-information__item--workday {
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e4e4;
  }

  /*
   * The divider-to-channels-title gap used to be 80px on mobile
   * (40px + 40px). Reduce the combined space by 60% => 32px total.
   */
  .page-contact .contact-information {
    padding-bottom: 16px;
  }

  .page-contact .contact-channels__inner {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    padding-top: 16px;
  }

  .page-contact .contact-channels__content {
    display: contents;
  }

  .page-contact .contact-channels__title {
    order: 1;
    width: 100%;
  }

  .page-contact .contact-channels__list {
    order: 2;
    width: 100%;
  }

  .page-contact .contact-channels__map {
    order: 3;
    width: 100%;
    margin-top: 40px;
  }

  .page-contact .contact-channels__branch-button {
    order: 4;
    align-self: center;
  }

  .page-contact .contact-channels__inner::after {
    content: "";
    order: 5;
    width: 100%;
    margin-top: 24px;
    border-top: 1px solid #e4e4e4;
  }
}