/* ==========================================================================
   About Us page
   ========================================================================== */

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

  /*
   * ระยะของ Navigation Path
   */
  --page-breadcrumb-top-space: 21.4px;
  --page-breadcrumb-bottom-space: 42.24px;
}

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

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

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

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

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

.page-about-us .about-us-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-about-us .about-us-breadcrumb__home {
  color: var(--about-us-muted);
  text-decoration: none;
  transition: color 180ms ease;
}

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

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

.page-about-us .about-us-breadcrumb__separator {
  color: #404040;
}

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

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

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

.page-about-us .about-us-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-about-us .about-us-banner__viewport {
  width: 100%;
  aspect-ratio: 1920 / 535;
  overflow: hidden;
  background: #f2f2f2;
}

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

/* แนะนำบริษัท
   ========================================================================== */

.page-about-us .company-introduction {
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  box-sizing: border-box;
  padding-block: clamp(64px, 4vw, 84px);
  background: #ffffff;
}

.page-about-us .company-introduction__inner {
  display: grid;
  width: min(87.5%, 1660px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(20.7px, 1.495vw, 29.9px);
}

.page-about-us .company-introduction__content {
  min-width: 0;
  text-align: left;
}

.page-about-us .company-introduction__title {
  margin: 0 0 clamp(21.8px, 1.45vw, 26.6px);

  font-family: var(--font-brand-medium);
  font-size: clamp(29.8px, 2.186vw, 41.9px);
  font-weight: 500;
  line-height: 1.12;
  color: var(--about-us-primary);
}

.page-about-us .company-introduction__subtitle {
  margin: 0 0 clamp(18.15px, 1.21vw, 21.78px);

  font-family: var(--font-brand-regular);
  font-size: clamp(21.6px, 1.332vw, 25.2px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--about-us-primary);
}

.page-about-us .company-introduction__highlight {
  margin:
    0
    0
    clamp(28px, 2.4vw, 44px);

  font-family: var(--font-brand-medium);
  font-size: clamp(21.3px, 1.377vw, 26.2px);
  font-weight: 500;
  line-height: 1.28;
  color: #4e4c4b;
}

.page-about-us .company-introduction__description {
  max-width: 100%;
  margin: 0;

  font-family: var(--font-brand-regular);
  font-size: clamp(17.1px, 1.14vw, 21.9px);
  font-weight: 400;
  line-height: 1.32;
  color: #4e4c4b;
}

/* ภาพปกวิดีโอ
   ========================================================================== */

.page-about-us .company-introduction__media {
  min-width: 0;
  transform: translateY(9px);
}

.page-about-us .company-video-trigger {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  background: #151515;
  cursor: pointer;
}

.page-about-us .company-video-trigger::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  content: "";
  transition: background-color 350ms ease;
}

.page-about-us .company-video-trigger:hover::after,
.page-about-us .company-video-trigger:focus-visible::after {
  background: rgba(0, 0, 0, 0.55);
}

.page-about-us .company-video-trigger:focus-visible {
  outline: 4px solid var(--about-us-primary);
  outline-offset: 5px;
}

.page-about-us .company-video-trigger__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-about-us .company-video-trigger__icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(54px, 4.4vw, 78px);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-about-us .company-video-trigger__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.page-about-us .company-video-trigger__icon path {
  fill: #fff03d;
  stroke: #fff03d;
  stroke-width: 5px;
  stroke-linejoin: round;
}

/* ประวัติและ Timeline บริษัท
   ========================================================================== */

.page-about-us .company-history {
  --history-edge-space: clamp(40px, 3vw, 58px);
  --history-axis-size: 10px;

  width: 100%;
  background-image:
    url("https://muangthaicap.com/mtc-public/assets/images/about-us/company-history/company-history-background.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.page-about-us .company-history__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-about-us .company-history__inner {
  display: grid;
  width: min(75%, 1440px);
  min-height: 0;

  box-sizing: border-box;
  margin-inline: auto;
  padding-block: var(--history-edge-space);

  grid-template-columns:
    clamp(280px, 22.8vw, 438px)
    minmax(0, 1fr);
  column-gap: clamp(44px, 3.7vw, 71px);
  align-items: stretch;
}

/* เมนูเลือกช่วงปี
   ========================================================================== */

.page-about-us .company-history__periods {
  align-self: start;
}

.page-about-us .company-history__period-list {
  display: grid;
  gap: clamp(8px, 0.52vw, 10px);
}

.page-about-us .company-history__period-button {
  display: grid;
  width: 100%;
  min-height: clamp(48px, 3.2vw, 60px);
  box-sizing: border-box;
  padding: 6px 16px;
  border: 1px solid var(--about-us-primary);
  border-radius: clamp(4px, 0.26vw, 5px);
  place-items: center;

  background: #ffffff;
  color: var(--about-us-primary);
  cursor: pointer;

  font-family: var(--font-brand-medium);
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 500;
  line-height: 1;

  transition:
    background-color 350ms ease,
    color 350ms ease,
    border-color 350ms ease;
}

.page-about-us
  .company-history__period-button[aria-selected="true"] {
  background: var(--about-us-primary);
  color: #ffffff;
}

.page-about-us
  .company-history__period-button:not(
    [aria-selected="true"]
  ):hover {
  background: var(--about-us-primary);
  color: #ffffff;
}

.page-about-us
  .company-history__period-button:focus-visible {
  outline: 3px solid #fff03d;
  outline-offset: 3px;
}

/* Panel และเส้น Timeline
   ========================================================================== */

.page-about-us .company-history__panel {
  position: relative;
  min-width: 0;
  padding-left: clamp(40px, 3.15vw, 61px);
}

.page-about-us .company-history__panel[hidden] {
  display: none;
}

.page-about-us .company-history__axis {
  position: absolute;
  top: calc(var(--history-axis-size) / 2);
  bottom: calc(var(--history-axis-size) / 2);
  left: 0;
  width: 1px;
  background: var(--about-us-primary);
}

.page-about-us .company-history__axis::before,
.page-about-us .company-history__axis::after {
  position: absolute;
  left: 50%;
  width: var(--history-axis-size);
  height: var(--history-axis-size);
  border-radius: 50%;
  background: var(--about-us-primary);
  content: "";
  transform: translateX(-50%);
}

.page-about-us .company-history__axis::before {
  top: calc(var(--history-axis-size) / -2);
}

.page-about-us .company-history__axis::after {
  bottom: calc(var(--history-axis-size) / -2);
}

/* รายการแต่ละปี
   ========================================================================== */

.page-about-us .company-history__entries {
  display: grid;
  gap: clamp(16px, 1.05vw, 20px);
}

.page-about-us .company-history__entry {
  display: grid;
  min-width: 0;

  grid-template-columns:
    clamp(180px, 14.45vw, 277px)
    minmax(0, 1fr);
  column-gap: clamp(28px, 2.1vw, 40px);
  align-items: center;
}

.page-about-us .company-history__media {
  width: 100%;
  overflow: hidden;
  margin: 0;
  border-radius: clamp(8px, 0.63vw, 12px);
  aspect-ratio: 3 / 2;
  background: #ffffff;
  align-self: start;
}

.page-about-us .company-history__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * ใช้กับรูป Logo หรือภาพที่ไม่ควรถูก Crop
 */
.page-about-us .company-history__image--contain {
  box-sizing: border-box;
  padding: 6%;
  object-fit: contain;
}

.page-about-us .company-history__content {
  min-width: 0;
}

.page-about-us .company-history__year {
  margin: 0 0 clamp(10px, 0.75vw, 14px);

  font-family: var(--font-brand-medium);
  font-size: clamp(21.6px, 1.26vw, 24.3px);
  font-weight: 500;
  line-height: 1;
  color: var(--about-us-primary);
}

.page-about-us .company-history__description,
.page-about-us .company-history__details {
  margin: 0;

  font-family: var(--font-brand-regular);
  font-size: clamp(16px, 0.9vw, 18px);
  font-weight: 400;
  line-height: 1.28;
  color: #4e4c4b;
}

/* ลดเฉพาะข้อความ Description ลง 13% */
.page-about-us .company-history__description {
  font-size: clamp(13.92px, 0.783vw, 15.66px);
}

.page-about-us .company-history__details {
  padding: 0;
  list-style: none;
}

.page-about-us .company-history__details li {
  position: relative;
  padding-left: 0.8em;
}

.page-about-us .company-history__details li + li {
  margin-top: 0.15em;
}

.page-about-us .company-history__details li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
}

/* วิสัยทัศน์
   ========================================================================== */

.page-about-us .company-vision {
  display: grid;
  width: 100%;

  /*
   * ใช้อัตราส่วนเดียวกับ about-us-banner__viewport
   * ทำให้ Section สูงเท่ากับ Banner ในทุกความกว้างหน้าจอ
   */
  aspect-ratio: 1920 / 535;
  overflow: hidden;

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

  background: #ffffff;
}

/* Content ฝั่งซ้าย */
.page-about-us .company-vision__content {
  display: flex;
  min-width: 0;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(32px, 2.6vw, 50px)
    clamp(36px, 4.2vw, 80px)
    clamp(32px, 2.6vw, 50px)
    clamp(72px, 9.8vw, 188px);

  background: var(--about-us-primary);
  color: #ffffff;
}

.page-about-us .company-vision__title {
  margin:
    0
    0
    clamp(22px, 2vw, 38px);

  font-family: var(--font-brand-medium);
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.page-about-us .company-vision__statement {
  margin: 0;

  font-family: var(--font-brand-regular);
  font-size: clamp(24px, 1.8vw, 34.5px);
  font-weight: 400;
  line-height: 1.35;
  color: #ffffff;
}

/* รูปภาพฝั่งขวา */
.page-about-us .company-vision__media {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: #f2f2f2;
}

.page-about-us .company-vision__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* พันธกิจ
   ========================================================================== */

.page-about-us .company-mission {
  display: flex;
  width: 100%;
  min-height: 0;

  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding-block: clamp(56px, 4vw, 76px);

  background: #ffffff;
}

.page-about-us .company-mission__inner {
  width: min(75%, 1440px);
  margin-inline: auto;
}

/* หัวข้อ “พันธกิจ” */
.page-about-us .company-mission__title {
  margin:
    0
    0
    clamp(22px, 1.6vw, 30px);

  font-family: var(--font-brand-medium);
  font-size: clamp(28.8px, 2.25vw, 43.2px);
  font-weight: 500;
  line-height: 1;
  color: var(--about-us-primary);
}

/* รายการพันธกิจ */
.page-about-us .company-mission__list {
  display: grid;
  gap: clamp(2px, 0.2vw, 4px);
  margin: 0;
  padding: 0;

  counter-reset: company-mission-item;
  list-style: none;

  font-family: var(--font-brand-regular);
  font-size: clamp(16.2px, 1.188vw, 22.5px);
  font-weight: 400;
  line-height: 1.32;
  color: #4e4c4b;
}

/*
 * แยกเลขข้อและเนื้อหาออกเป็นคนละคอลัมน์
 * ทำให้บรรทัดที่ตัดลงมาเริ่มตรงกับข้อความบรรทัดแรก
 */
.page-about-us .company-mission__item {
  display: grid;

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

  column-gap: 0.18em;
  align-items: start;

  counter-increment: company-mission-item;
}

.page-about-us .company-mission__item::before {
  content: counter(company-mission-item) ".";
  text-align: right;
}

.page-about-us .company-mission__item span {
  min-width: 0;
}

/* สารจากประธานกรรมการบริหาร
   ========================================================================== */

.page-about-us .company-chairman-message {
  display: flex;
  width: 100%;
  min-height: 0;

  box-sizing: border-box;
  align-items: flex-start;

  padding-block: clamp(40px, 3vw, 56px);

  background: var(--about-us-primary);
  color: #ffffff;
}

.page-about-us .company-chairman-message__inner {
  display: grid;

  /*
   * ที่หน้าจอกว้างประมาณ 1,898px:
   * 75.9% จะได้ประมาณ 1,440px
   */
  width: min(75.9%, 1440px);
  margin-inline: auto;

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

  /*
   * เมื่อพื้นที่รวมกว้าง 1,440px:
   * รูปประมาณ 696px
   * ช่องว่างประมาณ 48px
   * ข้อความประมาณ 696px
   */
  column-gap: clamp(44px, 2.5vw, 48px);
  align-items: start;
}

/* รูปภาพฝั่งซ้าย */
.page-about-us .company-chairman-message__media {
  width: 100%;
  height: auto;

  /*
   * รักษาสัดส่วนเดียวกับไฟล์ต้นฉบับ 950 × 1000px
   * เมื่อรูปกว้างประมาณ 696px จะสูงประมาณ 733px
   */
  aspect-ratio: 950 / 1000;

  overflow: hidden;

  margin:
    clamp(48px, 5.6vh, 56px)
    0
    0;

  border-radius: clamp(10px, 0.8vw, 16px);
  background: #f2f2f2;
}

.page-about-us .company-chairman-message__image {
  display: block;
  width: 100%;
  height: 100%;

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

/* Content ฝั่งขวา */
.page-about-us .company-chairman-message__content {
  min-width: 0;
  color: #ffffff;
}

.page-about-us .company-chairman-message__title {
  margin:
    0
    0
    clamp(43.2px, 2.52vw, 48.6px);

  font-family: var(--font-brand-medium);
  font-size: clamp(32px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.page-about-us .company-chairman-message__quote {
  margin:
    0
    0
    clamp(52.2px, 3.015vw, 57.6px);

  font-family: var(--font-brand-regular);
  font-size: clamp(19px, 1.3775vw, 25.65px);
  font-weight: 400;
  line-height: 1.25;
  color: #ffffff;
}

/* เนื้อหาจำนวน 3 วรรค */
.page-about-us .company-chairman-message__body {
  display: grid;
  gap: clamp(18px, 1.05vw, 20px);

  font-family: var(--font-brand-regular);
  font-size: clamp(14.28px, 0.91vw, 17.13px);
  font-weight: 400;
  line-height: 1.45;
  color: #ffffff;
}

.page-about-us .company-chairman-message__body p {
  margin: 0;
}

/* ประโยคนำของแต่ละวรรค */
.page-about-us .company-chairman-message__lead {
  font-family: var(--font-brand-medium);
  font-weight: 500;
  color: #ffffff;
}

/* ชื่อและตำแหน่ง */
.page-about-us .company-chairman-message__signature {
  margin-top: clamp(36px, 2.5vw, 48px);
  text-align: right;
  color: #ffffff;
}

.page-about-us .company-chairman-message__name {
  margin: 0;

  font-family: var(--font-brand-medium);
  font-size: clamp(16px, 0.95vw, 18px);
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
}

.page-about-us .company-chairman-message__position {
  margin:
    clamp(2px, 0.2vw, 4px)
    0
    0;

  font-family: var(--font-brand-regular);
  font-size: clamp(14.25px, 0.855vw, 16.15px);
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
}

/* รางวัลและความภาคภูมิใจ
   ========================================================================== */

.page-about-us .company-awards {
  display: flex;
  width: 100%;
  min-height: 0;

  box-sizing: border-box;

  background:
    #ffffff
    url("https://muangthaicap.com/mtc-public/assets/images/about-us/company-awards/company-awards-background.svg")
    center center / cover
    no-repeat;

  color: var(--about-us-primary);
}

.page-about-us .company-awards__inner {
  width: min(78%, 1480px);
  min-width: 0;
  margin-inline: auto;
  padding:
    clamp(58px, 4vw, 72px)
    0
    clamp(38px, 3vw, 52px);

  box-sizing: border-box;
}

/*
 * ใช้ Font Family, Font Size, Font Weight และ Line Height
 * เดียวกับหัวข้อ “พันธกิจ”
 */
.page-about-us .company-awards__title {
  width: 90%;
  margin: 0 auto;

  font-family: var(--font-brand-medium);
  font-size: clamp(28.8px, 2.25vw, 43.2px);
  font-weight: 500;
  line-height: 1;
  color: var(--about-us-primary);
}

/* รูปรวมรางวัล */
.page-about-us .company-awards__showcase {
  display: flex;

  /*
   * 90% ของ Inner ขนาด 78%
   * เท่ากับพื้นที่ประมาณ 70% ของหน้าจอ
  */
  width: 90%;
  height: clamp(300px, 25vw, 480px);

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

  margin:
    clamp(44px, 3.5vw, 60px)
    auto
    0;
}

.page-about-us .company-awards__showcase-image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;

  /*
   * ขยายเฉพาะภาพที่มองเห็นขึ้น 5%
   * โดยไม่เปลี่ยนขนาดพื้นที่ใน Layout
   */
  transform: scale(1.05);
  transform-origin: center center;
}

/* Carousel */
.page-about-us .company-awards__carousel {
  display: grid;
  width: 100%;

  grid-template-columns:
    clamp(38px, 3vw, 42px)
    minmax(0, 1fr)
    clamp(38px, 3vw, 42px);

  column-gap: clamp(20px, 1.8vw, 28px);
  align-items: center;

  /*
  * ความสูงรวมเพิ่มประมาณ 27.4px
  * จึงขยับชุด Carousel ขึ้นครึ่งหนึ่งประมาณ 13.7px
  */
  margin-top:
    calc(
      clamp(22px, 3.3vh, 30px) - 13.7px
    );
}

.page-about-us .company-awards__viewport {
  min-width: 0;
  overflow: hidden;
}

.page-about-us .company-awards__track {
  display: flex;
  width: 100%;

  transform: translate3d(0, 0, 0);

  /*
   * Animation การเปลี่ยนชุดการ์ดใช้เวลา 1 วินาที
   */
  transition: transform 1s ease;

  will-change: transform;
}

/*
 * ปิด Transition ชั่วคราวระหว่าง:
 *
 * 1. จัดชุดปัจจุบันกับชุดเป้าหมายก่อนเริ่ม Animation
 * 2. คืนชุดจริงทั้ง 6 ชุดหลัง Animation จบ
 */
.page-about-us .company-awards__track.is-jump {
  transition: none;
}

/* การ์ด 1 ชุด มี 3 ใบ */
.page-about-us .company-awards__page {
  display: grid;
  flex: 0 0 100%;

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

  gap: clamp(20px, 1.7vw, 26px);

  min-width: 0;
  margin: 0;
  padding: 0;

  list-style: none;
}

.page-about-us .company-awards__card {
  position: relative;

  display: flex;
  min-width: 0;
  min-height: clamp(48px, 6.525vh, 57px);

  box-sizing: border-box;
  align-items: center;
  justify-content: center;

  padding-block: clamp(10.4px, 0.7vw, 10.9px);
  padding-inline: clamp(10px, 1vw, 15.5px);

  border-style: solid;
  border-width: 11.2px 8px;
  border-color: rgba(255, 255, 255, 0.96);
  border-radius: 5.6px;

  box-shadow:
    inset 0 0 0 1px var(--about-us-primary);

  background: #ffffff;

  font-family: var(--font-brand-regular);
  font-size: clamp(12px, 0.92vw, 14.4px);
  font-weight: 400;
  line-height: 1.35;

  text-align: center;
  color: var(--about-us-primary);

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

.page-about-us .company-awards__card-title {
  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  margin: 0;

  color: inherit;
  text-align: center;

  pointer-events: none;
}

.page-about-us .company-awards__card-link {
  position: absolute;
  z-index: 2;
  inset: 0;

  display: block;
  border-radius: inherit;

  color: inherit;
  text-decoration: none;
}

.page-about-us .company-awards__card:hover {
  background: var(--about-us-primary);
  color: #ffffff;
}

.page-about-us .company-awards__card-link:focus-visible {
  outline: 3px solid var(--about-us-primary);
  outline-offset: -5px;
}

/* ปุ่มลูกศร */
.page-about-us .company-awards__arrow {
  display: inline-flex;
  width: clamp(38px, 3vw, 42px);
  aspect-ratio: 1;

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

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

  background: var(--about-us-primary);
  color: #fff03d;

  cursor: pointer;
}

/*
 * ไม่กำหนด transition หรือ transform ที่ Hover
 * จึงเปลี่ยนเฉพาะ Cursor ตามเงื่อนไข
 */
.page-about-us .company-awards__arrow svg {
  display: block;
  width: 50%;
  height: 50%;
}

.page-about-us .company-awards__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-about-us .company-awards__arrow:focus-visible {
  outline: 3px solid #fff03d;
  outline-offset: 4px;
}

/* Pagination */
.page-about-us .company-awards__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 0.8vw, 13px);

  /*
   * ลดลง 20%
   * 26px  × 0.8 = 20.8px
   * 3.8vh × 0.8 = 3.04vh
   * 34px  × 0.8 = 27.2px
   */
  margin-top: clamp(20.8px, 3.04vh, 27.2px);
}

.page-about-us .company-awards__dot {
  width: clamp(10px, 0.8vw, 12px);
  aspect-ratio: 1;

  flex: 0 0 auto;

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

  background: var(--about-us-primary);

  cursor: pointer;

  transition: background-color 0.3s ease;
}

/* Active และ Hover เป็นสีเหลือง */
.page-about-us .company-awards__dot[aria-current="true"],
.page-about-us .company-awards__dot:hover {
  background: #fff03d;
}

.page-about-us .company-awards__dot:focus-visible {
  outline: 2px solid var(--about-us-primary);
  outline-offset: 4px;
}

/* ซ่อนด้วยสายตา แต่ Screen Reader ยังอ่านได้ */
.page-about-us .company-awards__status {
  position: absolute;

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

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

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

.page-about-us #company-awards {
  scroll-margin-top: 100px;
}

/* YouTube Modal
   ========================================================================== */

.page-about-us.company-video-modal-open {
  overflow: hidden;
}

.page-about-us .company-video-modal[hidden] {
  display: none;
}

.page-about-us .company-video-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: clamp(54px, 7vh, 90px) clamp(20px, 5vw, 80px);
  place-items: center;
  background: rgba(0, 0, 0, 0.75);
}

.page-about-us .company-video-modal__dialog {
  position: relative;
  width: min(1120px, 100%);
  background: #000000;
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.45);
}

.page-about-us .company-video-modal__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-about-us .company-video-modal__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.page-about-us .company-video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.page-about-us .company-video-modal__close {
  position: fixed;
  z-index: 1;
  top: 18px;
  right: 24px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  place-items: center;
  background: rgba(15, 15, 15, 0.9);
  color: #ffffff;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.page-about-us .company-video-modal__close:hover {
  background: #000000;
  transform: scale(1.05);
}

.page-about-us .company-video-modal__close:focus-visible {
  outline: 3px solid #fff03d;
  outline-offset: 3px;
}

.page-about-us .company-video-modal__close svg {
  width: 31px;
  height: 31px;
}

.page-about-us .company-video-modal__close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
}

@media (max-width: 1100px) {
  .page-about-us .company-introduction {
    min-height: auto;
    padding-block: 64px;
  }

  .page-about-us .company-introduction__inner {
    width: min(88%, 820px);
    grid-template-columns: 1fr;
    row-gap: 55.2px;
  }

  .page-about-us .company-introduction__media {
    transform: none;
  }
}

@media (max-width: 700px) {
  .page-about-us .company-introduction {
    padding-block: 48px 56px;
  }

  .page-about-us .company-introduction__inner {
    width: calc(100% - 48px);
    row-gap: 39.1px;
  }

  .page-about-us .company-introduction__title {
    font-size: 28.8px;
  }

  .page-about-us .company-introduction__subtitle {
    font-size: 21.6px;
  }

  .page-about-us .company-introduction__highlight {
    margin-bottom: 25px;
    font-size: 21.3px;
  }

  .page-about-us .company-introduction__description {
    font-size: 17.1px;
    line-height: 1.4;
  }

  .page-about-us .company-video-trigger {
    border-radius: 10px;
  }

  .page-about-us .company-video-modal {
    padding: 64px 12px 24px;
  }

  .page-about-us .company-video-modal__close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 1100px) {
  .page-about-us .company-history__inner {
    width: min(88%, 900px);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    row-gap: 42px;
  }

  .page-about-us .company-history__period-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about-us .company-history__panel {
    padding-left: 42px;
  }

  .page-about-us .company-history__entry {
    grid-template-columns:
      minmax(190px, 32%)
      minmax(0, 1fr);
  }

  .page-about-us .company-mission__inner {
    width: min(87.5%, 960px);
  }
}

@media (max-width: 700px) {
  .page-about-us .company-history {
    --history-edge-space: 42px;
  }

  .page-about-us .company-history__inner {
    width: calc(100% - 48px);
    row-gap: 36px;
  }

  .page-about-us .company-history__period-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about-us .company-history__period-button {
    min-height: 48px;
    padding-inline: 10px;
    font-size: 17px;
  }

  .page-about-us .company-history__panel {
    padding-left: 28px;
  }

  .page-about-us .company-history__entry {
    grid-template-columns: 1fr;
    row-gap: 18px;
    align-items: start;
  }

  .page-about-us .company-history__entries {
    gap: 38px;
  }

  .page-about-us .company-history__media {
    width: min(100%, 520px);
  }

  .page-about-us .company-history__year {
    font-size: 23.4px;
  }

  .page-about-us .company-history__description,
  .page-about-us .company-history__details {
    font-size: 17px;
    line-height: 1.4;
  }

  .page-about-us .company-history__description {
    font-size: 14.79px;
  }

  .page-about-us .company-mission {
    min-height: auto;
    padding: 56px 24px;
  }

  .page-about-us .company-mission__inner {
    width: 100%;
  }

  .page-about-us .company-mission__title {
    margin-bottom: 24px;
    font-size: 28.8px;
  }

  .page-about-us .company-mission__list {
    gap: 10px;
    font-size: 16.2px;
    line-height: 1.45;
  }

  .page-about-us .company-mission__item {
    grid-template-columns:
      1.1em
      minmax(0, 1fr);

    column-gap: 0.25em;
  }

  .page-about-us #company-awards {
    scroll-margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about-us .company-history__period-button,
  .page-about-us .company-awards__track,
  .page-about-us .company-awards__card,
  .page-about-us .company-awards__dot {
    transition: none;
  }
}

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

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

@media (max-width: 700px) {
  .page-about-us .about-us-breadcrumb__list {
    gap: 9px;
    font-size: 15px;
  }

  .page-about-us {
    --page-breadcrumb-bottom-space: 36.08px;
  }

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

@media (max-width: 1100px) {
  .page-about-us .company-vision {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
  }

  .page-about-us .company-vision__content {
    min-height: 320px;
    padding:
      56px
      clamp(36px, 8vw, 88px);
  }

  .page-about-us .company-vision__media {
    height: auto;
    aspect-ratio: 960 / 535;
  }

  .page-about-us .company-chairman-message {
    min-height: 0;
    padding-block: 64px;
  }

  .page-about-us .company-chairman-message__inner {
    width: min(87.5%, 820px);
    grid-template-columns: 1fr;
    row-gap: 44px;
  }

  .page-about-us .company-chairman-message__media {
    height: auto;
    margin-top: 0;
    aspect-ratio: 16 / 10;
  }

  .page-about-us .company-chairman-message__image {
    object-position: center 22%;
  }

  .page-about-us .company-chairman-message__signature {
    margin-top: 40px;
  }

  .page-about-us .company-awards__inner {
    width: min(87.5%, 920px);
  }

  .page-about-us .company-awards__showcase {
    width: min(82%, 780px);
    height: clamp(220px, 34vw, 340px);
    margin-top: 48px;
  }

  .page-about-us .company-awards__carousel {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      42px;

    column-gap: 16px;
  }

  .page-about-us .company-awards__page {
    gap: 16px;
  }

  .page-about-us .company-awards__card {
    padding-block: 10.28px;
    padding-inline:
      clamp(10px, 1vw, 14.6px);

    border-width: 10.47px 8px;

    font-size: 11.2px;
    line-height: 1.35;
  }

  .page-about-us .company-awards__arrow {
    width: 42px;
  }
}

@media (max-width: 700px) {
  .page-about-us .company-vision__content {
    min-height: 280px;
    padding: 48px 24px;
  }

  .page-about-us .company-vision__title {
    margin-bottom: 22px;
    font-size: 32px;
  }

  .page-about-us .company-vision__statement {
    font-size: 24px;
    line-height: 1.4;
  }

  .page-about-us .company-chairman-message {
    min-height: auto;
    padding: 48px 24px 56px;
  }

  .page-about-us .company-chairman-message__inner {
    width: 100%;
    row-gap: 36px;
  }

  .page-about-us .company-chairman-message__media {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
  }

  .page-about-us .company-chairman-message__title {
    margin-bottom: 18px;
    font-size: 28.8px;
    line-height: 1.1;
  }

  .page-about-us .company-chairman-message__quote {
    margin-bottom: 30.6px;
    font-size: 19px;
    line-height: 1.3;
  }

  .page-about-us .company-chairman-message__body {
    gap: 20px;
    font-size: 13.6px;
    line-height: 1.5;
  }

  .page-about-us .company-chairman-message__signature {
    margin-top: 34px;
  }

  .page-about-us .company-chairman-message__name {
    font-size: 17px;
  }

  .page-about-us .company-chairman-message__position {
    font-size: 15.2px;
  }

  .page-about-us .company-awards {
    min-height: auto;
    background-position: center top;
  }

  .page-about-us .company-awards__inner {
    width: 100%;
    padding: 48px 24px 56px;
  }

  .page-about-us .company-awards__title {
    font-size: 28.8px;
    line-height: 1.1;
  }

  .page-about-us .company-awards__showcase {
    width: 100%;
    height: clamp(180px, 52vw, 260px);
    margin-top: 32px;
  }

  .page-about-us .company-awards__carousel {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px;

    column-gap: 10px;
    /*
    * ความสูง Mobile เพิ่มประมาณ 21.5px
    * ขยับขึ้นครึ่งหนึ่งประมาณ 10.7px
    */
    margin-top: 17.3px;
  }

  /*
   * Mobile แสดงการ์ดของแต่ละชุดเรียงลงมา 3 ใบ
   * ดังนั้น 1 วงกลมยังคงแทน 3 การ์ดเหมือน Desktop
   */
  .page-about-us .company-awards__page {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-about-us .company-awards__card {
    min-height: 43.5px;

    /*
     * เพิ่มพื้นที่ด้านบนและล่าง
     * โดยยังคงความกว้างด้านซ้ายและขวาเดิม
     */
    padding-block: 9.46px;
    padding-inline: 9.6px;

    /*
     * ทำให้ความสูงรวมของกรอบขาว
     * เพิ่มขึ้นใกล้เคียง 37.5%
     */
    border-width: 7.32px 6.4px;

    font-size: 11.2px;
    line-height: 1.35;
  }

  .page-about-us .company-awards__arrow {
    width: 38px;
  }

  .page-about-us .company-awards__pagination {
    margin-top: 19.2px;
  }

  .page-about-us .company-awards__dot {
    width: 10px;
  }
}


/* Mobile portrait: dedicated About Us banner + compact introduction typography
   ========================================================================== */
@media (max-width: 520px) and (orientation: portrait) {
  .page-about-us .about-us-banner__viewport {
    aspect-ratio: auto;
  }

  .page-about-us .about-us-banner__viewport picture {
    display: block;
    width: 100%;
  }

  .page-about-us .about-us-banner__image {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .page-about-us .company-introduction__title {
    font-size: 24.48px;
  }

  .page-about-us .company-introduction__subtitle {
    font-size: 18.36px;
  }

  .page-about-us .company-introduction__highlight {
    font-size: 18.105px;
  }

  .page-about-us .company-introduction__description {
    font-size: 14.535px;
  }
}

/* Mobile portrait: let the company description wrap naturally without forced line breaks */
@media (max-width: 520px) and (orientation: portrait) {
  .page-about-us .company-introduction__description br {
    display: none;
  }
}