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

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

/* ==========================================================================
   Careers page
   ========================================================================== */

.page-careers {
  --careers-primary: #0098dc;
  --careers-muted: #a6a6a6;

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

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

.page-careers .utility-nav a[aria-current="page"] {
  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );
  font-weight: 600;
}

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

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

.page-careers .careers-breadcrumb__inner {
  display: flex;
  height: auto;
  align-items: flex-start;
  padding-block:
    var(--page-breadcrumb-top-space)
    var(--page-breadcrumb-bottom-space);
}

.page-careers .careers-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;

  font-family: var(--font-brand-medium);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.page-careers .careers-breadcrumb__home {
  color: var(--careers-muted);
  text-decoration: none;
  transition: color 180ms ease;
}

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

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

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

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

/* Banner
   ========================================================================== */

.page-careers .careers-banner {
  width: 100%;
  background: #ffffff;
}

/*
 * ซ่อนหัวข้อจากหน้าจอ
 * แต่ Screen Reader ยังคงสามารถอ่านได้
 */
.page-careers .careers-banner__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-careers .careers-banner__viewport {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1920 / 535;
  background: #f2f2f2;
}

.page-careers .careers-banner__viewport picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page-careers .careers-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ส่วนค้นหาตำแหน่งงาน
   ========================================================================== */

.page-careers .career-search {
  --career-card-height: clamp(294px, 21.7vw, 392px);
  --career-card-expanded-height: clamp(392px, 29.4vw, 504px);

  box-sizing: border-box;
  min-height: 0;
  padding-block: clamp(56px, 4vw, 72px);

  background: #ffffff;
}

/* ซ่อนหัวข้อหลักของ Section จากหน้าจอ */
.page-careers .career-search__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
 * วางการ์ดสองใบเป็นสองคอลัมน์
 * align-items: center ทำให้การ์ดที่ไม่ได้ Hover
 * อยู่กึ่งกลางแนวตั้งของการ์ดที่กำลังขยาย
 */
.page-careers .career-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding-inline: 0;
}

/* การ์ด */
.page-careers .career-search__card {
  display: flex;
  height: var(--career-card-height);
  align-items: center;
  margin: 0;
  background: var(--careers-primary);
  color: #ffffff;

  /*
   * ยืดและหดความสูงของการ์ดภายใน 0.4 วินาที
   */
  transition: height 0.5s ease;
}

/* เส้นแบ่งสีขาวระหว่างการ์ด */
.page-careers .career-search__card + .career-search__card {
  border-left: 1px solid rgba(255, 255, 255, 0.95);
}

/*
 * Hover ด้วยเมาส์ หรือ Focus ปุ่มด้วย Keyboard:
 * 1. เปลี่ยนเป็นสีฟ้าเข้มทันที
 * 2. ขยายความสูงเป็น 132% ภายใน 0.4 วินาที
 */
.page-careers .career-search__card:hover,
.page-careers .career-search__card:focus-within {
  height: var(--career-card-expanded-height);
  background: #007cb3;
}

/* กลุ่มเนื้อหาภายในการ์ด */
.page-careers .career-search__content {
  width: 65%;
  max-width: 500px;
  margin-inline: auto;

  /*
   * ยกกลุ่มเนื้อหาขึ้นเล็กน้อยให้ตรงต้นฉบับ
   */
  transform: translateY(-16px);
}

/*
 * เมื่อ Hover ให้ชุดหัวข้อ–เนื้อหา–ปุ่ม
 * กลับมาอยู่กึ่งกลางแนวตั้งของการ์ด
 */
@media (min-width: 801px) and (hover: hover) {
  .page-careers
    .career-search__card:hover
    .career-search__content,
  .page-careers
    .career-search__card:focus-within
    .career-search__content {
    transform: translateY(0);
  }
}

/* ชื่อสำนักงานใหญ่และสาขา */
.page-careers .career-search__title {
  margin: 0;
  color: #ffffff;

  font-family:
    var(
      --font-brand-medium,
      "MuangthaicapModern-Medium",
      sans-serif
    );
  font-size: clamp(32px, 2.2vw, 43px);
  font-weight: 500;
  line-height: 1.1;
}

/*
 * สถานะปกติ:
 * ซ่อนข้อความและยุบพื้นที่ข้อความ
 */
.page-careers .career-search__description {
  display: grid;
  grid-template-rows: 0fr;

  opacity: 0;
  visibility: hidden;

  /*
   * Fade-out ก่อน แล้วจึงยุบพื้นที่ข้อความ
   * ไม่มี Animation การกางหรือยุบของข้อความ
   */
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s,
    grid-template-rows 0s linear 0.5s;
}

/*
 * กล่องด้านในต้องมี min-height: 0 และ overflow: hidden
 * เพื่อให้ grid-template-rows ยุบเหลือศูนย์ได้จริง
 */
.page-careers .career-search__description-inner {
  min-height: 0;
  overflow: hidden;

  font-family: "MuangthaicapText-Regular", "MuangthaicapText", sans-serif;
  font-size: clamp(14px, 0.9vw, 18px);
  font-weight: 400;
  line-height: 1.75;
}

/*
 * ล้าง Margin มาตรฐานของ Paragraph ก่อน
 * เพื่อให้ควบคุมช่องว่างแต่ละตำแหน่งได้อย่างแน่นอน
 */
.page-careers .career-search__description p {
  margin: 0;
}

/*
 * ช่องว่างระหว่างหัวข้อกับข้อความย่อหน้าแรก
 */
.page-careers
  .career-search__description
  p:first-child {
  margin-top: 30px;
}

/*
 * ช่องว่างระหว่างย่อหน้าของสำนักงานใหญ่
 */
.page-careers
  .career-search__description
  p + p {
  margin-top: 18px;
}

/*
 * ช่องว่างระหว่างข้อความย่อหน้าสุดท้ายกับปุ่ม
 */
.page-careers
  .career-search__description
  p:last-child {
  margin-bottom: 30px;
}

/*
 * เมื่อ Hover หรือ Focus:
 * เปิดพื้นที่ทันที แล้วค่อย Fade-in เฉพาะข้อความ
 */
.page-careers
  .career-search__card:hover
  .career-search__description,
.page-careers
  .career-search__card:focus-within
  .career-search__description {
  grid-template-rows: 1fr;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.5s ease,
    visibility 0s,
    grid-template-rows 0s;
}

/* ปุ่มค้นหาตำแหน่งงาน */
.page-careers .career-search__button {
  display: inline-flex;
  box-sizing: border-box;

  /*
   * ลดจาก 292px เหลือประมาณ 234px
   * เพื่อให้ผลลัพธ์บนภาพอยู่ใกล้ 292px ตามต้นฉบับ
   */
  width: min(100%, 234px);
  min-height: 36px;

  align-items: center;
  justify-content: center;

  /*
   * ค่านี้ใช้กับฝั่งสาขาเป็นหลัก
   */
  margin-top: clamp(35px, 2.5vw, 44px);

  padding: 6px 18px;
  border: 0;
  border-radius: 6px;

  /*
   * สีเหลืองในต้นฉบับ
   */
  background: #fff03d;
  color: var(--careers-primary);
  text-decoration: none;

  font-family:
    var(
      --font-brand-regular,
      "Muangthaicap Modern",
      sans-serif
    );
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1;
}

/*
 * ในต้นฉบับ ปุ่มสำนักงานใหญ่มีระยะห่างจากหัวข้อมากกว่า
 */
.page-careers
  .career-search__card--head-office
  .career-search__button {
  margin-top: clamp(52px, 4vw, 58px);
}

.page-careers
  .career-search__card:hover
  .career-search__button,
.page-careers
  .career-search__card:focus-within
  .career-search__button {
  margin-top: 0;
}

/* Keyboard Focus ของปุ่ม */
.page-careers .career-search__button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* ส่วนแนะนำบริษัท: เราคือใคร
   ========================================================================== */

.page-careers .company-intro {
  box-sizing: border-box;
  width: 100%;

  padding-block: 65px 40px;

  background: #ffffff;
}

/*
 * ปรับระยะระหว่างส่วน “ใครเหมาะกับที่นี่?”
 * กับหัวข้อ “เรื่องราวของเรา”
 */
.page-careers .company-intro--reverse {
  padding-top: 23px;
  padding-bottom: 21.1px;
}

/*
 * จำกัดแต่ละคอลัมน์ไม่ให้กว้างเกิน 613px
 * และจัด Grid ทั้งชุดให้อยู่กึ่งกลางของ Container
 */
.page-careers .company-intro__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 613px));

  column-gap: clamp(80px, 7.8vw, 150px);

  justify-content: center;
  align-items: start;
}

/* กล่องรูปฝั่งซ้าย */
.page-careers .company-intro__media {
  box-sizing: border-box;
  width: 95%;

  /*
   * ยึดขอบขวาไว้ที่ตำแหน่งเดิม
   * พื้นที่ที่หายไปจึงอยู่ด้านซ้าย
   */
  justify-self: end;

  overflow: hidden;
  margin: 0;

  /*
   * รักษาสัดส่วนเดิม
   * ทำให้ความสูงหดจากด้านล่างโดยอัตโนมัติ
   */
  aspect-ratio: 613 / 471;

  border-top: 22.8px solid var(--careers-primary);
  border-radius: 5px;

  background: #f2f2f2;
}


/* รูปภาพภายใน */
.page-careers .company-intro__image {
  display: block;
  width: 100%;
  height: 100%;

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

  /*
   * ขยายเนื้อภาพขึ้น 5%
   * โดยยึดกึ่งกลางด้านล่างของรูปไว้กับขอบล่างของกรอบ
   */
  transform: scale(1.05);
  transform-origin: center bottom;
}

/* ชุดข้อความฝั่งขวา */
.page-careers .company-intro__content {
  box-sizing: border-box;
  width: 95%;

  justify-self: start;
  padding-top: 70px;
}

/* หัวข้อ “เราคือใคร?” */
.page-careers .company-intro__title {
  margin: 0;

  color: var(--careers-primary);

  font-family: "Muangthaicap Modern", sans-serif;
  font-size: 21.6px;
  font-weight: 400;
  line-height: 1.15;
}

/* เนื้อหาแนะนำบริษัท */
.page-careers .company-intro__description {
  margin: 20px 0 0;
  color: #4C4946;
  font-family: "MuangthaicapText-Regular", sans-serif;

  font-size: 14.5px;
  font-weight: 400;

  line-height: 25px;
  letter-spacing: normal;
}

/* ย่อหน้าแต่ละช่วงของข้อความ */
.page-careers .company-intro__paragraph {
  display: block;
}

/*
 * เว้นหนึ่งบรรทัดระหว่างข้อความสองช่วง
 * ใช้ค่าเดียวกับ line-height ของเนื้อหา
 */
.page-careers
  .company-intro__paragraph
  + .company-intro__paragraph {
  margin-top: 25px;
}

/* ส่วน “ใครเหมาะกับที่นี่?” แบบสลับซ้าย–ขวา */
.page-careers
  .company-intro--reverse
  .company-intro__grid {
  /*
   * จัดองค์ประกอบในแต่ละคอลัมน์
   * ให้อยู่กึ่งกลางกันในแนวตั้ง
   */
  align-items: center;
}

/* ย้ายรูปไปอยู่คอลัมน์ขวา */
.page-careers
  .company-intro--reverse
  .company-intro__media {
  grid-column: 2;
  grid-row: 1;

  /*
   * รูปส่วนแรกชิดขวาของคอลัมน์ซ้าย
   * รูปส่วนใหม่นี้จึงชิดซ้ายของคอลัมน์ขวา
   * เพื่อให้ Layout สะท้อนกัน
   */
  justify-self: start;
}

/* ย้ายชุดข้อความไปอยู่คอลัมน์ซ้าย */
.page-careers
  .company-intro--reverse
  .company-intro__content {
  grid-column: 1;
  grid-row: 1;

  width: 95%;
  justify-self: end;
  align-self: center;
  padding-top: 0;
}

/* เรื่องราวของเรา: คุณภาพชีวิตที่ดี
   ========================================================================== */

.page-careers .company-intro--story {
  /*
   * ส่วนก่อนหน้ามี padding-bottom 40px อยู่แล้ว
   * เมื่อนำมารวมกับ 23px จะได้ช่องว่างรวมประมาณ 63px
   */
  padding-top: 23px;
}

/*
 * หัวข้อหลัก “เรื่องราวของเรา”
 * วางนอก Grid เพื่อให้ชิดขอบซ้ายของ Container
 */
.page-careers .company-intro__section-title {
  margin: 0;

  color: var(--careers-primary);

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

  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: left;
}

/*
 * เว้นระยะระหว่างหัวข้อ “เรื่องราวของเรา”
 * กับชุดรูปและข้อความตามสัดส่วนในภาพตัวอย่าง
 */
.page-careers
  .company-intro--story
  .company-intro__grid {
  margin-top: 62.4px;
  align-items: center;
}

/*
 * จัดชุดข้อความให้อยู่กึ่งกลางแนวตั้งของรูป
 * โดยยกเลิก padding-top 70px ของรูปแบบส่วนแรก
 */
.page-careers
  .company-intro--story
  .company-intro__content {
  align-self: center;
  padding-top: 0;
}

/* เรื่องราวของเรา: เติบโตอย่างมั่นคง
   ========================================================================== */

.page-careers .company-intro--final {
  /*
   * ส่วนที่ 4 มี padding-bottom 21.1px
   * เมื่อนำมารวมกับ padding-top 41.9px
   * จะได้ช่องว่างทั้งหมด 63px
   * เท่ากับช่องว่างก่อนส่วนที่ 4
   */
  padding-top: 41.9px;

  /*
   * เพิ่มพื้นที่หลังจบส่วนสุดท้ายตามภาพตัวอย่าง
   * มากกว่า padding-bottom 40px ของส่วนปกติ
   */
  padding-bottom: 100px;
}

/*
 * จัดรูปและชุดข้อความให้อยู่กึ่งกลางกันในแนวตั้ง
 */
.page-careers
  .company-intro--final
  .company-intro__grid {
  align-items: center;
}

/*
 * ยกเลิก padding-top 70px ของรูปแบบส่วนแรก
 * เพราะใช้การจัดกึ่งกลางแนวตั้งแทน
 */
.page-careers
  .company-intro--final
  .company-intro__content {
  align-self: center;
  padding-top: 0;
}

/* บอกเล่าจากเพื่อนพนักงาน
   ========================================================================== */

.page-careers .employee-stories {
  box-sizing: border-box;
  width: 100%;

  min-height: auto;

  /*
   * ด้านบนคงเดิม 58px
   * ด้านล่างเพิ่มจาก 32.4px เป็น 42.12px
   */
  padding-block: 58px 42.12px;

  background: #f5f5f7;
}

/* ส่วนหัว
   ========================================================================== */

.page-careers .employee-stories__title {
  margin: 0;
  color: var(--careers-primary);

  font-family: "Muangthaicap Modern", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}

.page-careers .employee-stories__description {
  max-width: 100%;
  margin: 30px 0 0;

  color: #4c4946;

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

  font-size: 14.25px;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
}

/* Carousel
   ========================================================================== */

.page-careers .employee-stories__carousel {
  position: relative;
  margin-top: 52px;
}

.page-careers .employee-stories__viewport {
  width: 100%;
  overflow: hidden;
}

.page-careers .employee-stories__panels {
  position: relative;
  height: 500px;
}

/*
 * Panel ทั้งสามซ้อนอยู่ตำแหน่งเดียวกัน
 * JavaScript จะเคลื่อนเฉพาะ Panel ปัจจุบันและ Panel เป้าหมาย
 */
.page-careers .employee-stories__panel {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  height: 500px;

  will-change: transform;
}

.page-careers .employee-stories__panel[hidden] {
  display: none;
}

/* การ์ด
   ========================================================================== */

.page-careers .employee-story-card {
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  height: 500px;

  flex-direction: column;
  align-items: center;

  padding: 23px 32px 20px;
  border-radius: 10px;

  background: #ffffff;
  text-align: center;
}

/* รูปวงกลม */

.page-careers .employee-story-card__photo-frame {
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  overflow: hidden;

  border-radius: 50%;
  background: #ceccd2;
}

.page-careers .employee-story-card__photo {
  display: block;
  width: 100%;
  height: 100%;

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

/* ชื่อพนักงาน */

.page-careers .employee-story-card__name {
  margin: 26px 0 0;

  color: #4d4d4d;

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

  font-size: 17.1px;
  font-weight: 500;
  line-height: 1.2;
}

/* พื้นที่ตำแหน่งคงที่ 2 บรรทัด */

.page-careers .employee-story-card__position {
  min-height: 40px;

  /*
   * เพิ่มระยะระหว่าง Name และ Position อีก 15%
   * 2.2px × 1.15 = 2.53px
   */
  margin: 2.53px 0 0;

  color: #555555;

  font-family: "Muangthaicap Modern", sans-serif;

  /*
   * ลดขนาด Position อีก 10%
   * 12.6px × 0.90 = 11.34px
   */
  font-size: 11.34px;

  font-weight: 400;
  line-height: 20px;
}

/* เส้นสีฟ้าและวงกลมปลายเส้น */

.page-careers .employee-story-card__divider {
  position: relative;

  display: block;
  width: 100%;
  height: 1px;
  flex: 0 0 1px;

  margin-top: 25px;

  background: var(--careers-primary);
}

.page-careers .employee-story-card__divider::before,
.page-careers .employee-story-card__divider::after {
  position: absolute;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--careers-primary);

  content: "";
  transform: translateY(-50%);
}

.page-careers .employee-story-card__divider::before {
  left: -1px;
}

.page-careers .employee-story-card__divider::after {
  right: -1px;
}

/* พื้นที่ข้อความบอกเล่าคงที่ 3 บรรทัด */

.page-careers .employee-story-card__story {
  min-height: 81px;
  margin: 29px 0 0;

  color: var(--careers-primary);

  font-family: "Muangthaicap Modern", sans-serif;
  font-size: 16.2px;
  font-weight: 400;
  line-height: 27px;
}

/* งานอดิเรกและสถาบัน */

.page-careers .employee-story-card__details {
  min-height: 36px;
  margin-top: auto;

  color: #7e7e7e;

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

  font-size: 10.8px;
  font-weight: 400;
  line-height: 18px;
}

.page-careers .employee-story-card__details p {
  margin: 0;
}

/* ปุ่มลูกศร
   ========================================================================== */

.page-careers .employee-stories__arrow {
  position: absolute;
  top: 250px;
  z-index: 3;

  display: inline-flex;
  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: var(--careers-primary);
  color: #fff03d;
  cursor: pointer;

  transform: translateY(-50%);

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

.page-careers .employee-stories__arrow--previous {
  left: -62px;
}

.page-careers .employee-stories__arrow--next {
  right: -62px;
}

.page-careers .employee-stories__arrow svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-careers .employee-stories__arrow:hover,
.page-careers .employee-stories__arrow:focus-visible {
  background: #fff03d;
  color: var(--careers-primary);
}

.page-careers .employee-stories__arrow:focus-visible,
.page-careers .employee-stories__dot:focus-visible {
  outline: 3px solid rgba(0, 152, 220, 0.35);
  outline-offset: 4px;
}

/* ปุ่มวงกลมด้านล่าง
   ========================================================================== */

.page-careers .employee-stories__pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin-top: 51px;
}

.page-careers .employee-stories__dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: #bdbdbd;
  cursor: pointer;

  transition: background-color 0.35s ease;
}

.page-careers .employee-stories__dot:hover,
.page-careers .employee-stories__dot:focus-visible,
.page-careers .employee-stories__dot.is-active {
  background: var(--careers-primary);
}

/*
 * ป้องกันการกดซ้ำระหว่างที่การ์ดกำลังเคลื่อนที่
 */
.page-careers
  .employee-stories__carousel[data-animating="true"]
  button {
  pointer-events: none;
}

/* ซ่อนข้อความสำหรับ Screen Reader */

.page-careers .employee-stories__sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  overflow: hidden;

  margin: -1px;
  padding: 0;
  border: 0;

  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ส่วนหนึ่งของความสำเร็จ
   ========================================================================== */

.page-careers .employee-success {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;

  /*
   * อ้างอิงระยะจากภาพ:
   * ด้านบน 58px
   * ด้านล่าง 72px
   */
  padding-block: 58px 72px;

  background: var(--careers-primary);
}

/* หัวข้อหลักสีเหลือง */

.page-careers .employee-success__title {
  margin: 0;

  color: #fff03d;

  font-family: "Muangthaicap Modern", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}

/* กรอบวิดีโอ */

.page-careers .employee-success__video-frame {
  width: 100%;
  overflow: hidden;

  /*
   * เว้นระยะจากหัวข้อลงมาประมาณ 36px
   * และรักษาสัดส่วนวิดีโอ YouTube 16:9
   */
  margin-top: 36px;
  aspect-ratio: 16 / 9;

  background: #000000;
}

/* ตัว YouTube iframe */

.page-careers .employee-success__video {
  display: block;
  width: 100%;
  height: 100%;

  border: 0;
}

/* ชุดข้อความด้านล่างวิดีโอ */

.page-careers .employee-success__content {
  margin-top: 26px;
}

/* หัวข้อรองสีขาว */

.page-careers .employee-success__subtitle {
  margin: 0;

  color: #ffffff;

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

  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

/* ข้อความเนื้อหา */

.page-careers .employee-success__description {
  max-width: 100%;
  margin: 8px 0 0;

  color: #ffffff;

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

  font-size: 14.25px;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
}

/* ที่ทำงานของเรา
   ========================================================================== */

.page-careers .workplace {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;

  padding-block: 58px 72px;

  /* พื้นที่สีขาวตามภาพอ้างอิง */
  background: #ffffff;
}

/* ส่วนหัว
   ========================================================================== */

.page-careers .workplace__title {
  margin: 0;

  color: var(--careers-primary);

  font-family: "Muangthaicap Modern", sans-serif;
  font-size: 28.5px;
  font-weight: 400;
  line-height: 1.15;
}

.page-careers .workplace__description {
  margin: 25px 0 0;

  color: #4a4944;

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

  font-size: 15.68px;
  font-weight: 400;
  line-height: 1.65;
}

/* Carousel
   ========================================================================== */

.page-careers .workplace-carousel {
  position: relative;

  /*
   * ระยะจากข้อความคำอธิบายลงมาถึงการ์ด
   * อ้างอิงจากภาพประมาณ 43–45px
   */
  margin-top: 44px;
}

.page-careers .workplace-carousel__viewport {
  width: 100%;
  overflow: hidden;

  border-radius: 10px;
}

/*
 * ใช้ Grid ซ้อนการ์ดไว้ในตำแหน่งเดียวกัน
 * ทำให้ความสูงของ Carousel ปรับตามการ์ดได้บน Mobile
 */
.page-careers .workplace-carousel__panels {
  display: grid;
  width: 100%;
}

/* การ์ด
   ========================================================================== */

.page-careers .workplace-card {
  grid-area: 1 / 1;

  display: grid;
  grid-template-columns: 60.2% 39.8%;

  width: 100%;
  min-height: 652px;
  overflow: hidden;

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

  will-change: transform;
}

.page-careers .workplace-card[hidden] {
  display: none;
}

/* เนื้อหาฝั่งซ้าย */

.page-careers .workplace-card__copy {
  display: flex;
  min-width: 0;

  align-items: center;

  /*
   * จากภาพ พื้นที่ซ้ายของ Content ประมาณ 60px
   * และด้านขวาประมาณ 120px
   */
  padding: 60px 120px 60px 60px;

  background: #f2f2f2;
}

.page-careers .workplace-card__copy-inner {
  width: 100%;
  max-width: 510px;
}

/* หัวข้อภายในการ์ด */

.page-careers .workplace-card__title {
  margin: 0;

  color: var(--careers-primary);

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

  font-size: 23.4px;
  font-weight: 500;
  line-height: 1.4;
}

/* เส้นแบ่ง */

.page-careers .workplace-card__divider {
  width: 100%;
  height: 1px;

  margin: 15px 0 20px;
  padding: 0;
  border: 0;

  background: #dfdfdf;
}

/* เนื้อหาภายในการ์ด */

.page-careers .workplace-card__body {
  color: #4f4f4f;

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

  font-size: 12.09px;
  font-weight: 400;
  line-height: 1.55;
}

.page-careers .workplace-card__body p {
  margin: 0;
}

.page-careers .workplace-card__body p + p {
  margin-top: 19px;
}

/* Bullet รางวัล */

.page-careers .workplace-card__awards {
  margin: 19px 0;
  padding-left: 18px;
}

.page-careers .workplace-card__awards li {
  padding-left: 2px;
}

.page-careers .workplace-card__awards li + li {
  margin-top: 4px;
}

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

.page-careers .workplace-card__media {
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  background: #dedede;
}

.page-careers .workplace-card__image {
  display: block;
  width: 100%;
  height: 100%;

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

/* ปุ่มลูกศร
   ========================================================================== */

/*
 * สี ขนาด และ Hover รับมาจาก
 * .employee-stories__arrow เดิม
 * ส่วนนี้กำหนดเฉพาะตำแหน่งของปุ่มใน Carousel ใหม่
 */

.page-careers .workplace-carousel__arrow {
  top: 50%;
}

.page-careers .workplace-carousel__arrow--previous {
  left: -62px;
}

.page-careers .workplace-carousel__arrow--next {
  right: -62px;
}

/*
 * ป้องกันการกดปุ่มซ้ำระหว่าง Animation
 */
.page-careers
  .workplace-carousel[data-animating="true"]
  button {
  pointer-events: none;
}

/* Responsive
   ========================================================================== */

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

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

  .page-careers .careers-breadcrumb__list {
    gap: 9px;
    font-size: 15px;
  }
}

/* ส่วนค้นหางานบน Tablet แนวตั้งและ Mobile
   ========================================================================== */

@media (max-width: 800px), (hover: none) {
  .page-careers .career-search {
    min-height: auto;
    padding-block: 32px;
  }

  .page-careers .career-search__grid {
    grid-template-columns: 1fr;
  }

  /*
   * บนอุปกรณ์สัมผัสไม่มี Hover ที่แน่นอน
   * จึงแสดงรายละเอียดของทั้งสองการ์ดตลอดเวลา
   */
  .page-careers .career-search__card,
  .page-careers .career-search__card:hover,
  .page-careers .career-search__card:focus-within {
    height: auto;
    min-height: 308px;
    padding-block: 39.2px;
  }

  .page-careers .career-search__card + .career-search__card {
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    border-left: 0;
  }

  .page-careers .career-search__content {
    width: min(82%, 500px);
    transform: none;
  }

  .page-careers .career-search__description {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
  }

  .page-careers .career-search__title {
    font-size: clamp(34px, 8vw, 44px);
  }

  .page-careers .career-search__description-inner {
    font-size: 18px;
  }

  .page-careers
    .career-search__card
    .career-search__button,
  .page-careers
    .career-search__card:hover
    .career-search__button,
  .page-careers
    .career-search__card:focus-within
    .career-search__button {
    margin-top: 32px;
  }
}


/* Body copy: +5% on responsive sizes below notebook/desktop.
 * More specific ranges below continue to set their own proportional sizes.
 */
@media (max-width: 800px) {
  .page-careers .career-search__description-inner {
    font-size: 18.9px;
  }
}

/* Career cards: responsive sizing refinements
   ========================================================================== */

/* Large monitor: keep typography at the same size as a normal notebook/desktop. */
@media (min-width: 1441px) {
  .page-careers .career-search__title {
    font-size: 32px;
  }

  .page-careers .career-search__description-inner {
    font-size: 14px;
  }

  .page-careers .career-search__button {
    font-size: 14px;
  }
}

/* Smaller than notebook, but larger than Mobile Portrait: reduce title/body by 35%.
 * The CTA button intentionally keeps its existing size.
 */
@media (min-width: 801px) and (max-width: 1024px) {
  .page-careers .career-search__title {
    font-size: clamp(20.8px, 1.43vw, 27.95px);
  }

  .page-careers .career-search__description-inner {
    font-size: clamp(9.555px, 0.61425vw, 12.285px);
  }
}

@media (min-width: 521px) and (max-width: 800px) {
  .page-careers .career-search__title {
    font-size: clamp(22.1px, 5.2vw, 28.6px);
  }

  .page-careers .career-search__description-inner {
    font-size: 12.285px;
  }
}

/* Mobile Portrait: reduce title/body by 25%, keep CTA button size unchanged. */
@media (max-width: 520px) and (orientation: portrait) {
  .page-careers .careers-banner__viewport {
    aspect-ratio: auto;
  }

  .page-careers .careers-banner__viewport picture {
    height: auto;
  }

  .page-careers .careers-banner__image {
    height: auto;
    object-fit: contain;
  }

  .page-careers .career-search__title {
    font-size: clamp(31.875px, 7.5vw, 41.25px);
  }

  .page-careers .career-search__description-inner {
    font-size: 14.175px;
  }
}

/* Keep the touch version compact enough to realize the requested 30% card-height reduction. */
@media (max-width: 800px), (hover: none) {
  .page-careers .career-search__description p:first-child {
    margin-top: 21px;
  }

  .page-careers .career-search__description p + p {
    margin-top: 12.6px;
  }

  .page-careers .career-search__description p:last-child {
    margin-bottom: 21px;
  }

  .page-careers .career-search__card .career-search__button,
  .page-careers .career-search__card:hover .career-search__button,
  .page-careers .career-search__card:focus-within .career-search__button {
    margin-top: 22.4px;
  }
}


/* Career cards: tablet touch normalization
   --------------------------------------------------------------------------
   Scope is intentionally limited to tablet-class touch devices only.
   Desktop/notebook, large monitor, and Mobile Portrait keep their current
   typography and sizing unchanged.
*/

/* iPad Pro / large tablet: reduce oversized touch typography and card height. */
@media (hover: none) and (min-width: 1025px) and (max-width: 1440px) {
  .page-careers .career-search__card,
  .page-careers .career-search__card:hover,
  .page-careers .career-search__card:focus-within {
    min-height: 260px;
    padding-block: 28px;
  }

  .page-careers .career-search__title {
    font-size: 32px;
  }

  .page-careers .career-search__description-inner {
    font-size: 14px;
  }
}

/* iPad Mini / tablet: restore readable type while keeping cards more compact. */
@media (hover: none) and (min-width: 700px) and (max-width: 1024px) {
  .page-careers .career-search__card,
  .page-careers .career-search__card:hover,
  .page-careers .career-search__card:focus-within {
    min-height: 260px;
    padding-block: 28px;
  }

  .page-careers .career-search__title {
    font-size: clamp(30px, 3.2vw, 32px);
  }

  .page-careers .career-search__description-inner {
    font-size: clamp(14px, 1.4vw, 14.5px);
  }
}


/* Career cards: tablet touch layout + spacing balance
   --------------------------------------------------------------------------
   iPad Pro keeps the approved tablet typography but uses the desktop-style
   two-column presentation. Touch devices show the descriptions permanently.
   iPad Mini remains stacked. In both tablet groups, the vertical relationship
   is normalized to approximately A:B = 55:45 (30px : 24px).
*/

/* iPad Pro / large tablet: desktop-style two-column cards, content always visible. */
@media (hover: none) and (min-width: 1025px) and (max-width: 1440px) {
  .page-careers .career-search__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-careers .career-search__card,
  .page-careers .career-search__card:hover,
  .page-careers .career-search__card:focus-within {
    height: auto;
    min-height: 300px;
    padding-block: 28px;
  }

  .page-careers .career-search__card + .career-search__card {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.95);
  }

  .page-careers .career-search__content {
    width: 82%;
    max-width: 500px;
    transform: none;
  }

  .page-careers .career-search__description p:first-child {
    margin-top: 30px;
  }

  .page-careers .career-search__description p:last-child {
    margin-bottom: 24px;
  }

  .page-careers .career-search__card .career-search__button,
  .page-careers .career-search__card:hover .career-search__button,
  .page-careers .career-search__card:focus-within .career-search__button {
    margin-top: 0;
  }
}

/* iPad Mini / tablet: keep stacked layout, only normalize A:B spacing. */
@media (hover: none) and (min-width: 700px) and (max-width: 1024px) {
  .page-careers .career-search__description p:first-child {
    margin-top: 30px;
  }

  .page-careers .career-search__description p:last-child {
    margin-bottom: 24px;
  }

  .page-careers .career-search__card .career-search__button,
  .page-careers .career-search__card:hover .career-search__button,
  .page-careers .career-search__card:focus-within .career-search__button {
    margin-top: 0;
  }
}

/* ส่วนแนะนำบริษัทบน Tablet
   ========================================================================== */

@media (max-width: 1024px) {
  .page-careers .company-intro__grid {
    column-gap: 56px;
  }

  .page-careers .company-intro__content {
    padding-top: 28px;
  }

  .page-careers .company-intro__description {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.55;
  }

  .page-careers .company-intro__section-title {
    font-size: 27px;
  }

  .page-careers
    .company-intro--story
    .company-intro__grid {
    margin-top: 41.6px;
  }
}

/* ส่วนแนะนำบริษัทบน Mobile
   ========================================================================== */

@media (max-width: 800px) {
  .page-careers .company-intro__desktop-break {
    display: none;
  }

  .page-careers .company-intro {
    padding-block: 40px 48px;
  }

  /*
   * ลดช่องว่างระหว่างสองส่วนบน Mobile ลง 40%
   */
  .page-careers .company-intro--reverse {
    padding-top: 4.8px;
    padding-bottom: 26.4px;
  }

  .page-careers .company-intro--story {
    padding-top: 24px;
  }

  .page-careers .company-intro--final {
    padding-top: 26.4px;
    padding-bottom: 72px;
  }

  .page-careers .company-intro__section-title {
    font-size: clamp(24px, 6.75vw, 30px);
  }

  .page-careers
    .company-intro--story
    .company-intro__grid {
    margin-top: 25.6px;
  }

  .page-careers .company-intro__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /*
   * Reset การสลับคอลัมน์ของส่วนที่สอง
   */
  .page-careers
    .company-intro--reverse
    .company-intro__media,
  .page-careers
    .company-intro--reverse
    .company-intro__content {
    grid-column: 1;
    grid-row: auto;
  }

  .page-careers
    .company-intro--reverse
    .company-intro__media {
    justify-self: stretch;
  }

  .page-careers .company-intro__media {
    width: 100%;
    max-width: 613px;
    margin-inline: auto;

    border-top-width: 16px;
  }

  .page-careers .company-intro__content {
    width: 100%;
    max-width: 613px;
    margin-inline: auto;
    padding-top: 0;
  }

  .page-careers .company-intro__title {
    font-size: clamp(27px, 7.5vw, 32px);
  }

  .page-careers .company-intro__description {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.6;
  }
}

/* บอกเล่าจากเพื่อนพนักงานบนหน้าจอขนาดกลาง
   ========================================================================== */

@media (max-width: 1280px) {
  .page-careers .employee-stories__arrow--previous {
    left: 8px;
  }

  .page-careers .employee-stories__arrow--next {
    right: 8px;
  }
}

@media (max-width: 1024px) {
  .page-careers .employee-story-card {
    padding-inline: 20px;
  }

  .page-careers .employee-story-card__photo-frame {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }

  .page-careers .employee-story-card__name {
    /* 17px ลดลง 5% */
    font-size: 16.15px;
  }

  .page-careers .employee-story-card__story {
    /* 16px ลดลง 10% */
    font-size: 14.4px;
    line-height: 25px;
  }
}

/*
 * บน Mobile ยังแบ่งเป็นชุดละ 3 การ์ดเหมือนเดิม
 * แต่สามารถปัดดูการ์ดภายในแต่ละชุดในแนวนอนได้
 */
@media (max-width: 800px) {
  .page-careers .employee-stories {
    min-height: auto;

    /*
     * ด้านบนคงเดิม 48px
     * ด้านล่างเพิ่มจาก 28.8px เป็น 37.44px
     */
    padding-block: 48px 37.44px;
  }

  .page-careers .employee-stories__title {
    font-size: clamp(27px, 7.5vw, 32px);
  }

  .page-careers .employee-stories__description {
    margin-top: 22px;

    /* 17px ลดลง 5% */
    font-size: 16.15px;

    line-height: 1.6;
  }

  .page-careers .employee-stories__carousel {
    margin-top: 40px;
  }

  .page-careers .employee-stories__panel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 360px);

    justify-content: start;
    gap: 16px;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .page-careers .employee-stories__panel::-webkit-scrollbar {
    display: none;
  }

  .page-careers .employee-story-card {
    scroll-snap-align: center;
  }

  .page-careers .employee-stories__arrow {
    top: 250px;
    width: 38px;
    height: 38px;
  }

  .page-careers .employee-stories__arrow--previous {
    left: 6px;
  }

  .page-careers .employee-stories__arrow--next {
    right: 6px;
  }

  .page-careers .employee-stories__pagination {
    margin-top: 38px;
  }
}

/* ส่วนหนึ่งของความสำเร็จบนหน้าจอขนาดกลาง
   ========================================================================== */

@media (max-width: 1024px) {
  .page-careers .employee-success {
    padding-block: 48px 64px;
  }

  .page-careers .employee-success__title {
    font-size: 28px;
  }

  .page-careers .employee-success__video-frame {
    margin-top: 32px;
  }

  .page-careers .employee-success__content {
    margin-top: 24px;
  }

  .page-careers .employee-success__subtitle {
    font-size: 18px;
  }

  .page-careers .employee-success__description {
    font-size: 14px;
  }
}

/* ส่วนหนึ่งของความสำเร็จบน Mobile
   ========================================================================== */

@media (max-width: 800px) {
  .page-careers .employee-success {
    /*
     * บน Mobile ให้ความสูงขยายตามวิดีโอและข้อความ
     * เพื่อป้องกันพื้นที่ว่างท้าย Section มากเกินไป
     */
    min-height: auto;
    padding-block: 48px 52px;
  }

  .page-careers .employee-success__title {
    font-size: clamp(27px, 7.5vw, 32px);
  }

  .page-careers .employee-success__video-frame {
    margin-top: 28px;
  }

  .page-careers .employee-success__content {
    margin-top: 22px;
  }

  .page-careers .employee-success__subtitle {
    font-size: 19px;
    line-height: 1.35;
  }

  .page-careers .employee-success__description {
    margin-top: 10px;
    font-size: 16.15px;
    line-height: 1.6;
  }
}

/* ที่ทำงานของเราบนหน้าจอขนาดกลาง
   ========================================================================== */

@media (max-width: 1280px) {
  .page-careers .workplace-carousel__arrow--previous {
    left: 8px;
  }

  .page-careers .workplace-carousel__arrow--next {
    right: 8px;
  }
}

@media (max-width: 1024px) {
  .page-careers .workplace {
    padding-block: 48px 64px;
  }

  .page-careers .workplace__title {
    font-size: 26.6px;
  }

  .page-careers .workplace-card {
    grid-template-columns: 57% 43%;
    min-height: 620px;
  }

  .page-careers .workplace-card__copy {
    padding: 44px 70px 44px 40px;
  }

  .page-careers .workplace-card__title {
    font-size: 19.8px;
  }

  .page-careers .workplace-card__body {
    font-size: 11.63px;
  }
}

/* ที่ทำงานของเราบน Mobile
   ========================================================================== */

@media (max-width: 800px) {
  .page-careers .workplace {
    /*
     * Mobile ให้ความสูงขยายตาม Content
     * เพื่อไม่ให้ 131vh สร้างพื้นที่ว่างมากเกินไป
     */
    min-height: auto;
    padding-block: 48px 52px;
  }

  .page-careers .workplace__title {
    font-size: clamp(25.65px, 7.125vw, 30.4px);
  }

  .page-careers .workplace__description {
    margin-top: 22px;
    font-size: 17.77px;
    line-height: 1.6;
  }

  .page-careers .workplace-carousel {
    margin-top: 40px;
  }

  /*
   * เปลี่ยนจากสองฝั่งเป็นเนื้อหาด้านบน
   * และรูปภาพด้านล่าง
   */
  .page-careers .workplace-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .page-careers .workplace-card__copy {
    padding: 36px 28px 40px;
  }

  .page-careers .workplace-card__copy-inner {
    max-width: none;
  }

  .page-careers .workplace-card__title {
    font-size: 20.7px;
    line-height: 1.35;
  }

  .page-careers .workplace-card__body {
    font-size: 14.88px;
    line-height: 1.65;
  }

  .page-careers .workplace-card__media {
    height: min(92vw, 480px);
    min-height: 320px;
  }

  .page-careers .workplace-carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .page-careers .workplace-carousel__arrow--previous {
    left: 6px;
  }

  .page-careers .workplace-carousel__arrow--next {
    right: 6px;
  }
}

/* Career cards: final iPad Pro height + Mobile Portrait A:B spacing refinement
   --------------------------------------------------------------------------
   Scope intentionally limited to:
   1) iPad Pro / large tablet touch (1025–1440px): +7% card min-height only.
   2) Mobile Portrait (<=520px): normalize heading-to-body vs body-to-CTA spacing.
*/

/* iPad Pro / large tablet: increase card height by 7% (300px -> 321px).
   Existing flex centering keeps the complete content group vertically centered. */
@media (hover: none) and (min-width: 1025px) and (max-width: 1440px) {
  .page-careers .career-search__card,
  .page-careers .career-search__card:hover,
  .page-careers .career-search__card:focus-within {
    min-height: 321px;
  }
}

/* Mobile Portrait: match the approved A:B spacing ratio used on tablets.
   Space A = 30px, Space B = 24px. Remove the touch-rule CTA margin so B is not doubled. */
@media (max-width: 520px) and (orientation: portrait) {
  .page-careers .career-search__description p:first-child {
    margin-top: 30px;
  }

  .page-careers .career-search__description p:last-child {
    margin-bottom: 24px;
  }

  .page-careers .career-search__card .career-search__button,
  .page-careers .career-search__card:hover .career-search__button,
  .page-careers .career-search__card:focus-within .career-search__button {
    margin-top: 0;
  }
}

/* Careers company-intro typography: iPad Mini + mobile touch only
   --------------------------------------------------------------------------
   Match the heading/body sizes used by the blue career-search cards at the
   same viewport sizes. Large monitor, notebook/desktop, and iPad Pro (>1024px)
   intentionally remain untouched.
*/

/* iPad Mini + mobile landscape/tablet touch: same type scale as career cards. */
@media (hover: none) and (min-width: 700px) and (max-width: 1024px) {
  .page-careers .company-intro__title,
  .page-careers .company-intro__section-title {
    font-size: clamp(30px, 3.2vw, 32px);
  }

  .page-careers .company-intro__description {
    font-size: clamp(14px, 1.4vw, 14.5px);
  }
}

/* Smaller mobile landscape / compact touch widths: mirror the blue cards. */
@media (hover: none) and (min-width: 521px) and (max-width: 699px) {
  .page-careers .company-intro__title,
  .page-careers .company-intro__section-title {
    font-size: clamp(22.1px, 5.2vw, 28.6px);
  }

  .page-careers .company-intro__description {
    font-size: 12.285px;
  }
}

/* Mobile Portrait: match the approved blue-card typography exactly. */
@media (hover: none) and (max-width: 520px) and (orientation: portrait) {
  .page-careers .company-intro__title,
  .page-careers .company-intro__section-title {
    font-size: clamp(31.875px, 7.5vw, 41.25px);
  }

  .page-careers .company-intro__description {
    font-size: 14.175px;
  }
}

/* Employee stories carousel: drag + responsive presentation refinement
   --------------------------------------------------------------------------
   Scope: employee-stories only.
   - Desktop / large monitor: keep 3-card pages + arrows + page dots; add drag.
   - Touch widths >800px: keep 3-card pages + page dots; hide arrows; add drag.
   - <=800px: flatten all 9 cards into one continuous track + 9 card dots.
   - Touch <=1024px: reduce card height only; existing typography is preserved.
*/
.page-careers .employee-stories__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}

.page-careers .employee-stories__viewport::-webkit-scrollbar {
  display: none;
}

.page-careers .employee-stories__panels {
  position: relative;
  display: flex;
  width: 100%;
  height: 500px;
}

.page-careers .employee-stories__panel {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  width: 100%;
  height: 500px;
  overflow: visible;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-careers .employee-stories__carousel[data-dragging="true"]
  .employee-stories__viewport {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.page-careers .employee-story-card__photo,
.page-careers .employee-story-card {
  -webkit-user-drag: none;
}

.page-careers .employee-stories__pagination--cards {
  display: none;
}

/* iPad Pro / iPad Mini landscape and other touch tablets:
   drag replaces the arrow controls while the 3 page dots remain. */
@media (hover: none) and (min-width: 801px) {
  .page-careers .employee-stories__arrow {
    display: none;
  }
}

/* iPad Mini landscape downward: reduce excess vertical whitespace without
   touching any font sizes. 500px -> 440px (-12%). */
@media (hover: none) and (max-width: 1024px) {
  .page-careers .employee-stories__panels,
  .page-careers .employee-stories__panel,
  .page-careers .employee-story-card {
    height: 440px;
  }
}

/* iPad Mini portrait / compact screens: one continuous 9-card carousel. */
@media (max-width: 800px) {
  .page-careers .employee-stories__arrow {
    display: none;
  }

  .page-careers .employee-stories__panels {
    gap: 16px;
  }

  .page-careers .employee-stories__panel {
    display: contents;
  }

  .page-careers .employee-story-card {
    width: min(84vw, 360px);
    flex: 0 0 min(84vw, 360px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .page-careers .employee-stories__pagination--pages {
    display: none;
  }

  .page-careers .employee-stories__pagination--cards {
    display: flex;
    gap: 8px;
  }
}


/* Employee stories carousel: direct-drag geometry refinement (2026-10-28)
   Scope: employee-stories only.
   - Equal gap between every 3-card page on page mode.
   - Disable smooth scrolling while dragging for true 1:1 pointer movement.
   - Compact mode centres the active card and keeps side peeks visible.
*/
.page-careers .employee-stories__panels {
  gap: 20px;
}

.page-careers
  .employee-stories__carousel[data-dragging="true"]
  .employee-stories__viewport {
  scroll-behavior: auto !important;
  scroll-snap-type: none;
}

@media (max-width: 800px) {
  .page-careers .employee-stories__viewport {
    --employee-story-card-width: min(84vw, 360px);
    scroll-padding-inline: calc(
      (100% - var(--employee-story-card-width)) / 2
    );
  }

  .page-careers .employee-stories__panels {
    box-sizing: border-box;
    gap: 16px;
    padding-inline: calc(
      (100% - var(--employee-story-card-width)) / 2
    );
  }

  .page-careers .employee-story-card {
    width: var(--employee-story-card-width);
    flex: 0 0 var(--employee-story-card-width);
    scroll-snap-align: center;
  }
}

/* Careers section-heading/body typography normalization
   --------------------------------------------------------------------------
   Scope intentionally limited to the section heading + introductory/body copy
   for Employee Stories, Employee Success, and Workplace.

   Font family, weight, color, line-height, spacing, card copy, and the
   employee-success subtitle are intentionally untouched.

   Sizes mirror the blue Career Search cards ("สำนักงานใหญ่ / สาขา") at the
   same responsive breakpoints.
*/

/* Notebook / normal desktop reference scale. */
.page-careers .employee-stories__title,
.page-careers .employee-success__title,
.page-careers .workplace__title {
  font-size: clamp(32px, 2.2vw, 43px);
}

.page-careers .employee-stories__description,
.page-careers .employee-success__description,
.page-careers .workplace__description {
  font-size: clamp(14px, 0.9vw, 18px);
}

/* Large monitor: same fixed size as the blue cards. */
@media (min-width: 1441px) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: 32px;
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: 14px;
  }
}

/* Non-touch / generic intermediate width: mirror the blue-card rules. */
@media (min-width: 801px) and (max-width: 1024px) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: clamp(20.8px, 1.43vw, 27.95px);
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: clamp(9.555px, 0.61425vw, 12.285px);
  }
}

@media (min-width: 521px) and (max-width: 800px) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: clamp(22.1px, 5.2vw, 28.6px);
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: 12.285px;
  }
}

/* iPad Pro / large touch tablet: same approved size as the blue cards. */
@media (hover: none) and (min-width: 1025px) and (max-width: 1440px) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: 32px;
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: 14px;
  }
}

/* iPad Mini / tablet touch: same approved scale as the blue cards. */
@media (hover: none) and (min-width: 700px) and (max-width: 1024px) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: clamp(30px, 3.2vw, 32px);
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: clamp(14px, 1.4vw, 14.5px);
  }
}

/* Mobile Portrait: same approved scale as the blue cards. */
@media (max-width: 520px) and (orientation: portrait) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: clamp(31.875px, 7.5vw, 41.25px);
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: 14.175px;
  }
}

/* Very narrow landscape fallback: mirrors the blue-card touch rule. */
@media (max-width: 520px) and (orientation: landscape) {
  .page-careers .employee-stories__title,
  .page-careers .employee-success__title,
  .page-careers .workplace__title {
    font-size: clamp(34px, 8vw, 44px);
  }

  .page-careers .employee-stories__description,
  .page-careers .employee-success__description,
  .page-careers .workplace__description {
    font-size: 18.9px;
  }
}

/* Workplace carousel: drag/swipe + responsive dots/image order (2026-10-28)
   --------------------------------------------------------------------------
   Scope intentionally limited to the "ที่ทำงานของเรา / Our workplace" carousel.
   Typography inside workplace cards is intentionally untouched.
*/
.page-careers .workplace-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}

.page-careers .workplace-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.page-careers .workplace-carousel__panels {
  display: flex;
  width: 100%;
  gap: 20px;
}

.page-careers .workplace-card {
  grid-area: auto;
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-careers .workplace-carousel[data-dragging="true"] {
  user-select: none;
}

.page-careers
  .workplace-carousel[data-dragging="true"]
  .workplace-carousel__viewport {
  scroll-behavior: auto !important;
  scroll-snap-type: none;
  cursor: grabbing;
}

/* Dots are requested only below the normal desktop experience. */
.page-careers .workplace-carousel__pagination {
  display: none;
  margin-top: 30px;
}

/* iPad Pro / tablets / mobile: no arrows, show the 2-position dots instead. */
@media (max-width: 1024px), (hover: none) and (max-width: 1440px) {
  .page-careers .workplace-carousel__arrow {
    display: none;
  }

  .page-careers .workplace-carousel__pagination {
    display: flex;
  }
}

/* iPad Mini portrait down to phone portrait:
   put the image above the copy and give it a little more vertical room. */
@media (max-width: 800px) and (orientation: portrait) {
  .page-careers .workplace-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .page-careers .workplace-card__media {
    grid-row: 1;
    height: min(100vw, 520px);
    min-height: 350px;
  }

  .page-careers .workplace-card__copy {
    grid-row: 2;
  }
}

/* Workplace card copy alignment — portrait iPad Mini down to mobile (2026-10-28)
   Keep the existing image-first layout and typography; only top-align the copy
   within its allocated copy area so shorter cards do not vertically center. */
@media (max-width: 800px) and (orientation: portrait) {
  .page-careers .workplace-card__copy {
    align-items: flex-start;
  }
}