/* ===== template-parts/gioi-thieu/section-banner/assets/styles.css ===== */
/* ============================================================== */
/* Section Banner — Giới thiệu                                   */
/* Desktop: 1600×678px — full-bleed video + gradient overlay      */
/* Mobile:  375×500px  — text (white bg) top + poster image below */
/* Figma desktop node: 2348:29067                                  */
/* Figma mobile  node: 2348:29782                                  */
/* ============================================================== */

/* Section wrapper */
.section-banner {
  position: relative;
  width: 100%;
  height: 42.375rem; /* 678 / 16 */
  overflow: hidden;
}
@media (min-width: 1024px) {
  .section-banner {
    height: calc(100vh - 7rem);
  }
  .section-banner__content {
    padding: 0 6.25rem 5rem 6.25rem !important;
  }
}

/* ---- Video background (desktop) ---- */

.section-banner__video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.section-banner__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Mobile poster image (hidden on desktop) ---- */

.section-banner__mobile-image {
  display: none; /* hidden desktop — shown mobile */
}

.section-banner__mobile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Gradient overlay (desktop only) ---- */

.section-banner__overlay {
  position: absolute;
  inset: 0;
  /* Figma: 180deg, from rgba(3,13,39,0.07) at top → rgba(4,18,50,0.70) at bottom */
  background: linear-gradient(
    180deg,
    rgba(3, 13, 39, 0.07) 0%,
    rgba(4, 18, 50, 0.7) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Content bar ---- */

.section-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 6.25rem 2.5rem 6.25rem; /* px-100/16 = 6.25rem, py-40/16 = 2.5rem (bottom only) */
  box-sizing: border-box;
  z-index: 2;
}

/* ---- Left block: breadcrumb + H1 stacked ---- */

.section-banner__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ---- Breadcrumbs ---- */

.section-banner__breadcrumbs {
  display: flex;
  align-items: center;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16 / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  margin-bottom: 1.25rem; /* gap 20px / 16 between breadcrumb and H1 */
  text-decoration: none;
}

.section-banner__breadcrumbs-home {
  color: #b8b8b8; /* Figma: Neutral/01 — #B8B8B8 */
  white-space: nowrap;
  flex-shrink: 0;
}

.section-banner__breadcrumbs-current {
  color: #ffffff;
  white-space: pre;
  flex-shrink: 0;
  margin-left: 0.625rem; /* gap 10 / 16 */
}

/* ---- H1 title ---- */

.section-banner__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 3.0625rem; /* 49 / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.0919rem; /* -1.47px / 16 */
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  margin-top: 1.25rem;
}

/* ---- Right block: subtitle / description ---- */

.section-banner__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 32.75rem; /* 524 / 16 */
  padding-bottom: 0.375rem; /* pb-[6px] / 16 */
  flex-shrink: 0;
}

.section-banner__description p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16 / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* ================================================================ */
/* Mobile overrides — only properties that differ from desktop       */
/* ================================================================ */
@media screen and (max-width: 639.98px) {
  /* Section becomes flex-column: content text on top, image below */
  .section-banner {
    position: relative;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  /* Mobile: video cũng hiển thị — đặt dưới khối text (giống vị trí ảnh trong Figma) */
  .section-banner__video-wrap {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto; /* 294 / 16 — Figma mobile image height */
    overflow: hidden;
    flex-shrink: 0;
    order: 2; /* video comes after content block */
    margin-top: 2rem;
  }

  .section-banner__bg-video {
    position: relative;
    inset: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* Poster image không dùng trên mobile nữa (đã thay bằng video) */
  .section-banner__mobile-image {
    display: none;
  }

  /* Hide gradient overlay on mobile */
  .section-banner__overlay {
    display: none;
  }

  /* Content: static, white bg, flex-col, text-dark, padded */
  .section-banner__content {
    position: relative;
    bottom: auto;
    left: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1rem 1rem 0.19rem 1rem; /* pt-16/16, px-16/16, pb-20/16 */
    background-color: #ffffff;
    order: 1; /* content above image */
    z-index: auto;
    width: 100%;
  }

  /* Left block: full width, margin-bottom between it and description */
  .section-banner__left {
    width: 100%;
    margin-bottom: 0.625rem; /* gap 10 / 16 */
  }

  /* Breadcrumbs on mobile: 14px, dark color, no letter-spacing */
  .section-banner__breadcrumbs {
    font-size: 0.875rem; /* 14 / 16 */
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    margin-bottom: 0.625rem; /* gap 10 / 16 — between breadcrumb and H1 */
  }

  .section-banner__breadcrumbs-home {
    color: rgba(19, 19, 19, 0.6);
  }

  .section-banner__breadcrumbs-current {
    color: #131313;
  }

  /* H1 on mobile */
  .section-banner__title {
    font-size: 1.5rem; /* 24 / 16 */
    letter-spacing: -0.03rem; /* -0.48px / 16 */
    color: #131313;
    white-space: normal;
    margin-top: 0.625rem;
  }

  /* Description on mobile: full width, 14px, rgba(19,19,19,0.8) */
  .section-banner__description {
    width: 100%;
    padding-bottom: 0;
  }

  .section-banner__description p {
    font-size: 0.875rem; /* 14 / 16 */
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    color: rgba(19, 19, 19, 0.8);
    text-align: justify;
  }
}


/* ===== template-parts/gioi-thieu/section-vision-mission/assets/styles.css ===== */
/* =============================================================================
   Section: Vision & Mission (Từ khởi nghiệp đến tập đoàn)
   Page: Giới thiệu
   Desktop base: 1600px • Mobile override: ≤ 639.98px
   rem divisor = 16 (fluid 1vw system)
   ============================================================================= */

.section-vision-mission {
  position: relative;
  width: 100%;
  /* Section total height 637px on desktop. Top padding leaves room for heading at y=127px. */
  padding-top: 7.9375rem; /* 127px / 16 */
  padding-bottom: 0;
  overflow: hidden;
}

/* ── Gray background strip ─────────────────────────────────────────────────── */
/* Positioned to fill the bottom portion of the section (y=406 → y=637 = 231px) */

.section-vision-mission__bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14.4375rem; /* 231px / 16 */
  background-color: #e7e7e7;
  z-index: 0;
}

/* ── Heading + Description row ─────────────────────────────────────────────── */

.section-vision-mission__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: 6.25rem; /* 100px / 16 */
  padding-right: 6.25rem;
  position: relative;
  z-index: 1;
}

.section-vision-mission__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -0.8px / 16 */
  text-transform: uppercase;
  color: #131313;
  /* white-space: nowrap; */
  margin-top: 0;
  margin-bottom: 0;
  width: 21.87rem;
}

.section-vision-mission__description {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  text-align: justify;
  color: #131313;
  width: 31.8125rem; /* 509px / 16 */
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Cards row ──────────────────────────────────────────────────────────────── */
/* Cards container: top=295px from section top, which means 295-127=168px gap from heading row */

.section-vision-mission__cards {
  display: flex;
  align-items: flex-start;
  padding-left: 6.25rem; /* 100px / 16 */
  padding-right: 6.25rem;
  margin-top: 4rem; /* 64px / 16 — gap from intro bottom (~231px) to cards top (295px) */
  position: relative;
  z-index: 1;
  padding-bottom: 4.81rem; /* breathing room above bg strip */
}

.section-vision-mission__card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 0.625rem; /* 10px / 16 */
  box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.08); /* 0 4px 32px */
  width: 43rem; /* 688px / 16 */
  padding-bottom: 2rem; /* 32px / 16 */
  padding-right: 1.5rem; /* 24px / 16 */
  overflow: hidden;
  flex-shrink: 0;
}

.section-vision-mission__card + .section-vision-mission__card {
  margin-left: 1.5rem; /* 24px / 16 — gap between cards */
}

/* ── Card: Orange tab header ───────────────────────────────────────────────── */

.section-vision-mission__card-tab {
  position: relative;
  height: 5.4375rem; /* 87px / 16 */
  width: 25.4375rem; /* 407px / 16 */
  overflow: hidden;
  flex-shrink: 0;
}

.section-vision-mission__tab-shape {
  position: absolute;
  top: 0;
  left: -1.2rem; /* -8px / 16 — matches Figma left=-8px offset */
  width: 25.9375rem; /* 415px / 16 */
  height: 5.4375rem; /* 87px / 16 */
  display: block;
}

.section-vision-mission__card-title-wrap {
  position: absolute;
  top: 1.5rem; /* 24px / 16 */
  left: 0.125rem; /* 2px / 16 */
  display: flex;
  align-items: center;
  padding-left: 1.5rem; /* 24px / 16 */
  padding-right: 1.5rem;
}

.section-vision-mission__card-title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.9375rem; /* 31px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03875rem; /* -0.62px / 16 */
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  margin: 0;
}

/* ── Card: Quote content area ──────────────────────────────────────────────── */
/* Figma: content starts after tab (87px), padding px=24px */

.section-vision-mission__card-content {
  position: relative;
  padding-left: 1.5rem; /* 24px / 16 */
  padding-right: 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 7.125rem; /* 114px / 16 */
  margin-top: 2rem; /* 32px / 16 — gap between tab and content (from Figma flex gap=32px) */
}

/* Open quote: absolute in card at left=31px, top=106px from card top */
/* In our DOM: it's inside .card-content, so top is relative to that container */
/* Card content margin-top from tab = gap 32px. Tab height = 87px. */
/* So card-content top = 87+32 = 119px from card top. Quote icon top = 106px from card top */
/* → quote icon is at 106 - 119 = -13px from card-content top */

.section-vision-mission__quote-open {
  position: absolute;
  left: 2rem; /* 31px from card left - 24px content padding = 7px / 16 = 0.4375rem */
  top: -0.8125rem; /* -13px / 16 — above content div, overlapping gap area */
  width: 2rem; /* 32px / 16 */
  height: 1.9051rem; /* 30.482px / 16 */
  display: block;
}

/* Quote text: left=100px from card left; content padding-left=24px; so inner offset = 76px = 4.75rem */
.section-vision-mission__quote-text {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.5rem; /* 24px / 16 */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.045rem; /* -0.72px / 16 */
  text-align: justify;
  color: #131313;
  margin: 0;
  padding-left: 6.25rem; /* 76px / 16 — offset within content to reach 100px from card left */
  width: 100%;
  box-sizing: border-box;
  width: 34rem;
}

/* Close quote: left=600px from card left (688px card). In card-content: 600-24=576px from content left */
/* top=84px within content area (from Figma node 2348:29099 top=84px relative to content) */
.section-vision-mission__quote-close {
  position: absolute;
  left: 38.895rem;
  bottom: 0rem;
  width: 2rem; /* 32px / 16 */
  height: 1.9051rem; /* 30.482px / 16 */
  display: block;
}

/* ============================================================== */
/* Mobile overrides — only properties that differ from desktop    */
/* ============================================================== */

@media screen and (max-width: 639.98px) {
  .section-vision-mission {
    padding-top: 3rem; /* 48px / 16 */
    padding-left: 1rem; /* 16px / 16 */
    padding-right: 1rem;
    padding-bottom: 2.625rem; /* 48px / 16 */
    min-height: 35.5625rem; /* 569px / 16 — match Figma mobile total height */
  }

  /* ── BG strip: taller on mobile ─────────────────────────── */

  .section-vision-mission__bg {
    height: 18.375rem; /* 294px / 16 */
    bottom: 0;
  }

  /* ── Intro: stacked column on mobile ────────────────────── */

  .section-vision-mission__intro {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  .section-vision-mission__heading {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px / 16 */
    text-align: left;
    white-space: normal;
    width: 100%;
  }

  .section-vision-mission__description {
    font-size: 0.875rem; /* 14px / 16 */
    font-weight: 300;
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    width: 100%;
    margin-top: 0.5rem; /* 8px / 16 — gap between heading and description */
  }

  /* ── Cards: stacked column ─────────────────────────────── */

  .section-vision-mission__cards {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    margin-top: 1.25rem; /* 20px / 16 — gap from subsection container to cards */
    padding-bottom: 0;
    width: 100%;
  }

  .section-vision-mission__card {
    width: 100%;
    border-radius: 0.375rem; /* 6px / 16 */
    box-shadow: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.08); /* 0 4px 24px */
    padding-bottom: 1rem; /* 16px / 16 */
    padding-right: 0;
  }

  .section-vision-mission__card + .section-vision-mission__card {
    margin-left: 0;
    margin-top: 0.75rem; /* 12px / 16 */
  }

  /* ── Card tab: mobile size ──────────────────────────────── */

  .section-vision-mission__card-tab {
    height: 3.375rem; /* 54px / 16 */
    width: 12.5rem; /* 200px / 16 */
  }

  .section-vision-mission__tab-shape {
    left: -0.6125rem; /* -5px / 16 */
    width: 12.8125rem; /* 205px / 16 */
    height: 3.375rem; /* 54px / 16 */
  }

  .section-vision-mission__card-title-wrap {
    top: 0.6875rem; /* 11px / 16 */
    left: 0;
    padding-left: 0.75rem; /* 12px / 16 */
    padding-right: 0.75rem;
    justify-content: flex-start;
  }

  .section-vision-mission__card-title {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px / 16 */
  }

  /* ── Card content: mobile dimensions ────────────────────── */
  /* Mobile card content starts after 54px tab + 16px gap = 70px from card top */
  /* Mobile quote-open is at card absolute left=11px, top=62px */
  /* card-content top = 54+16 = 70px → quote icon top relative to content = 62-70 = -8px */

  .section-vision-mission__card-content {
    padding-left: 0.75rem; /* 12px / 16 */
    min-height: 3.9375rem; /* 63px / 16 */
    margin-top: 1rem; /* 16px / 16 — gap between tab and content on mobile */
  }

  .section-vision-mission__quote-open {
    left: 0.75rem; /* 11px from card left - 12px content padding = -1px → ~0 */
    top: -0.5rem; /* -8px / 16 */
    width: 1.125rem;
    height: 1.07163rem;
  }

  /* Mobile quote text: left=37px from content area start (px-12), so inner offset = 37-12 = 25px */
  .section-vision-mission__quote-text {
    width: 19.9475rem;
    font-size: 0.875rem; /* 14px / 16 */
    line-height: 1.5;
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    padding-left: 2.31rem;
    padding-right: 1.44rem;
    text-align: left;
    letter-spacing: -0.0175rem;
  }

  /* Mobile quote-close: at left=11px, top=61px within card, width=319px spans almost full width */
  /* In card-content: close icon at bottom-right of the quote text area */
  .section-vision-mission__quote-close {
    left: auto;
    right: 0.75rem; /* inside content right padding area */
    bottom: -0.25rem;
    width: 1.125rem;
    height: 1.07163rem;
  }
}


/* ===== template-parts/gioi-thieu/section-core-values/assets/styles.css ===== */
/* ============================================================
   section-core-values — Desktop base
   Figma desktop node 2348:29115  (1600×776px)
   rem = figma_px / 16 (fluid 1vw system)
   ============================================================ */

.section-core-values {
  background-color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.5rem; /* 72px / 16 */
  /* padding-bottom: 4.5rem; */
}

/* ---- Heading ---- */
.section-core-values__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -0.8px / 16 */
  text-transform: uppercase;
  color: #131313;
  text-align: center;
  margin-bottom: 3rem; /* 48px gap between heading and grid (from Figma gap-48) */
}

/* ---- Grid container ---- */
.section-core-values__grid {
  width: 100%;
  padding-left: 6.25rem; /* 100px / 16 */
  padding-right: 6.25rem; /* 100px / 16 */
  display: flex;
  flex-direction: column;
}

/* ---- Each row of 3 cards ---- */
.section-core-values__row {
  display: flex;
  align-items: stretch;
}

.section-core-values__row + .section-core-values__row {
  margin-top: 1.5rem; /* 24px / 16 (Figma flex col gap-24 between rows) */
}

/* ---- Individual card ---- */
.section-core-values__card {
  height: 18.125rem;
  flex: 1 0 0;
  min-width: 0;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 1rem; /* 16px / 16 */
}

.section-core-values__card + .section-core-values__card {
  margin-left: 1.25rem; /* 20px / 16 (Figma row gap-20 between cards) */
}

/* ---- Icon wrapper ---- */
.section-core-values__icon {
  width: 6.25rem; /* 100px / 16 */
  height: 6.25rem; /* 100px / 16 */
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem; /* 20px / 16 (Figma gap-20 between icon and text block) */
}

.section-core-values__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Text block ---- */
.section-core-values__text {
  display: flex;
  flex-direction: column;
  color: #131313;
  width: 100%;
}

/* ---- Card title (H4) ---- */
.section-core-values__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.5625rem; /* 25px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #131313;
  margin-bottom: 0.53rem; /* 10px / 16 (Figma gap-10 between title and desc) */
}

/* ---- Card description ---- */
.section-core-values__desc {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  text-align: justify;
  color: #131313;
}

/* ---- Mobile-only swiper wrapper — hidden on desktop ---- */
.section-core-values__swiper-wrap {
  display: none;
}
.js-core-values-next {
  margin-left: 0.375rem;
}

/* ============================================================
   Mobile overrides — max-width 639.98px
   Figma mobile node 2348:29816 (375×463px)
   ============================================================ */
@media screen and (max-width: 639.98px) {
  .section-core-values {
    padding-top: 2.5rem; /* 40px / 16 */
    padding-bottom: 3rem; /* 48px / 16 */
  }

  .section-core-values__heading {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px / 16 */
    margin-bottom: 1.5rem; /* 24px / 16 (Figma mobile gap-24) */
  }

  /* Hide desktop grid, show swiper */
  .section-core-values__grid {
    display: none;
  }

  .section-core-values__swiper-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Swiper container */
  .section-core-values__swiper {
    width: 100%;
    overflow: hidden;
    padding: 0 1rem;
  }

  /* Individual mobile card */
  .section-core-values__slide {
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;
    padding-top: 1rem; /* 16px / 16 */
    padding-bottom: 1rem; /* 16px / 16 */
    padding-left: 0.75rem; /* 12px / 16 */
    padding-right: 0.75rem; /* 12px / 16 */
    min-height: 16.1875rem; /* 259px / 16 (Figma card height) */
  }

  /* Mobile icon: 60×60px */
  .section-core-values__slide .section-core-values__icon {
    width: 3.75rem; /* 60px / 16 */
    height: 3.75rem; /* 60px / 16 */
    margin-bottom: 1.25rem; /* 20px / 16 */
  }

  /* Mobile title: 20px */
  .section-core-values__slide .section-core-values__title {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px / 16 */
    margin-bottom: 0.625rem; /* 10px / 16 */
  }

  /* Mobile description: 14px */
  .section-core-values__slide .section-core-values__desc {
    font-size: 0.875rem; /* 14px / 16 */
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
  }

  /* ---- Navigation bar ---- */
  .section-core-values__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem; /* 40px / 16 */
    margin-top: 1.25rem; /* 20px / 16 gap between swiper and nav */
    padding: 0 1rem;
  }

  .section-core-values__counter {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem; /* 14px / 16 */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: #131313;
  }

  .section-core-values__arrows {
    display: flex;
    align-items: center;
  }

  .section-core-values__arrows
    .section-core-values__arrow
    + .section-core-values__arrow {
    margin-left: 0.375rem; /* 6px / 16 */
  }

  /* Arrow button */
  .section-core-values__arrow {
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem; /* 10px / 16 */
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 2.5rem; /* 40px / 16 (10px pad × 2 + 20px icon) */
    height: 2.5rem; /* 40px / 16 */
    flex-shrink: 0;
  }

  .section-core-values__arrow img {
    width: 1.25rem; /* 20px / 16 */
    height: 1.25rem; /* 20px / 16 */
    display: block;
  }

  /* Prev arrow is visually rotated 180deg */
  .section-core-values__arrow--prev img {
    transform: scaleX(-1);
  }

  /* Focus visible */
  .section-core-values__arrow:focus-visible {
    outline: 2px solid #fa6900;
    outline-offset: 2px;
  }
}


/* ===== template-parts/gioi-thieu/section-history/assets/styles.css ===== */
/* =============================================================
   Section: History
   Desktop-first. Mobile overrides at @media (max-width: 639.98px)
   rem = figma_px / 16 | No gap | No aspect-ratio | No px (except 1px borders)
   ============================================================= */

/* ------------------------------------------------------------------
   Section wrapper
   Desktop: bg white, padding 7.5rem top/bottom, 6.25rem left/right
   ------------------------------------------------------------------ */
.section-history {
  background-color: #ffffff;
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  padding-left: 6.25rem;
  padding-right: 6.25rem;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Inner: Side-by-side layout — content left, media right
   Desktop: flex row, align center, space-between
   ------------------------------------------------------------------ */
.section-history__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.75rem;
}

/* ------------------------------------------------------------------
   Content panel area (left col)
   Desktop width: ~663px content → 41.4375rem
   ------------------------------------------------------------------ */
.section-history__content {
  flex: 0 0 auto;
  width: 41.4375rem;
  position: relative;
}

/* Individual panels — hidden by default, shown when .is-active */
.section-history__panel {
  display: none;
  flex-direction: column;
}

.section-history__panel.is-active {
  display: flex;
}

/* Year number — 92px / 600 / lh 1.3 / orange #FA6900 */
.section-history__year {
  font-family: "Lexend Deca", sans-serif;
  font-size: 5.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.1725rem;
  color: #fa6900;
  display: block;
}

/* Section H2 title — 25px H4 style: 600 / lh 1.3 / uppercase / #131313 */
.section-history__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #131313;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Description — 16px / 400 / lh 1.5 / #131313 80% opacity */
.section-history__description {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: rgba(19, 19, 19, 0.8);
  margin-top: 0;
  margin-bottom: 0;
  max-width: 37rem;
}

/* ------------------------------------------------------------------
   Media panel area (right col)
   Desktop: image 663×375px = 41.4375rem × 23.4375rem
   ------------------------------------------------------------------ */
.section-history__media {
  flex: 0 0 auto;
  width: 41.4375rem;
  height: 23.4375rem;
  position: relative;
  overflow: hidden;
  /* border-radius: 0.75rem; */
}

/* Image wrappers — hidden by default, shown when .is-active */
.section-history__image-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
  pointer-events: none;
}

.section-history__image-wrap.is-active {
  opacity: 1;
  pointer-events: auto;
}

.section-history__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* border-radius: 0.75rem; */
}

/* ------------------------------------------------------------------
   Timeline section
   ------------------------------------------------------------------ */
.section-history__timeline {
  position: relative;
  /* padding-top: 1.5rem; */
  margin-top: 4.5rem;
}

/* Track: horizontal line connecting all dots — đi qua TÂM dot.
   top = timeline padding-top (1.5rem) + nửa chiều cao marker (0.5rem) = 2rem.
   left/right = nửa 1 cột (100%/12) để line nối đúng tâm marker đầu↔cuối (6 cột flex:1). */
.section-history__timeline-track {
  position: absolute;
  top: 1.25rem;
  width: 100%;
  height: 0.125rem; /* 2px */
  background-image: repeating-linear-gradient(
    to right,
    #ddd 0 0.75rem,
    transparent 0.75rem 1.2rem
  );
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  z-index: 0;
}

/* Progress fill — width driven by JS via custom property --progress */
.section-history__timeline-progress {
  height: 100%;
  background-color: #fa6900;
  width: var(--progress, 0);
  transition: width 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}
.arrow-end {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-44%);
}

/* Dots container */
.section-history__dots {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}

/* Individual dot button — flex:1 để 6 cột đều nhau, marker căn giữa mỗi cột */
.section-history__dot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Dot marker — vòng tròn vẽ bằng CSS (không dùng ảnh).
   Nền trắng + z-index để "cắt" đường line tại tâm dot. */
.section-history__dot-marker {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  background: transparent;
  flex-shrink: 0;
  /* animation: dotOpacity 1.6s ease-in-out infinite; */
  z-index: 1;
  transition: all 300ms ease;
}

/* Chấm tròn bên trong marker */
.section-history__dot-marker::after {
  content: "";
  position: absolute;
  inset: 0.625rem;
  border-radius: 50%;
  transition: all 300ms ease;
  background: #d0d0d0;

  z-index: 2;
  opacity: 1;
}
.section-history__dot-marker::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border-radius: 50%;
  animation: dotOpacity 1.6s ease-in-out infinite;
  /* background: rgba(250, 104, 0, 0.2); */
  transition: all 300ms ease;
}

/* Active: viền + ring cam, chấm trong cam */
.section-history__dot.is-active .section-history__dot-marker {
  background: rgba(250, 104, 0, 0.4);
  /* box-shadow: 0 0 0 0.25rem rgba(250, 105, 0, 0.12); */
}
.section-history__dot.is-active .section-history__dot-marker::before {
  background: rgba(250, 104, 0, 0.2);
}
.section-history__dot.is-active .section-history__dot-marker::after {
  background-color: #fa6900;
}

/* Year label under dot */
.section-history__dot-year {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0625rem;
  color: rgba(19, 19, 19, 0.4);
  transition: color 300ms ease;
  color: var(--Body-Black-40, rgba(19, 19, 19, 0.4));
  text-align: center;

  /* PC/Heading/H4 */
  font-family: "Lexend Deca";
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 2.03125rem */
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes dotOpacity {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}
.section-history__dot.is-active .section-history__dot-year {
  color: #fa6900;
  font-weight: 600;
}

/* Hover state (desktop only) */
@media (min-width: 640px) {
  .section-history__dot:hover .section-history__dot-year {
    color: #fa6900;
  }

  .section-history__dot:focus-visible {
    outline: 0.125rem solid #fa6900;
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
  }
}

/* ================================================================
   Mobile overrides — only properties that differ from desktop
   @media screen and (max-width: 639.98px)
   ================================================================ */
@media screen and (max-width: 639.98px) {
  /* Section padding: 2.5rem top/bottom, 1rem left/right */
  .section-history {
    padding-top: 0;
    padding-bottom: 3rem;
    padding-left: 0;
    padding-right: 0;
  }

  /* Inner: stack vertically — content first, then media */
  .section-history__inner {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
    padding: 0 1rem;
  }

  /* Content: full width */
  .section-history__content {
    width: 100%;
    order: 1;
    margin-bottom: 1.25rem;
  }

  /* Year — mobile: 48px / lh 1.3 */
  .section-history__year {
    font-size: 3rem;
    font-size: 3.0625rem;
    letter-spacing: -0.09188rem;
    margin-bottom: 0.75rem;
  }

  /* Title — mobile: H4 at 18px */
  .section-history__title {
    font-size: 1.125rem;
    line-height: 1.6;
    letter-spacing: -0.03375rem;
    margin-bottom: 0.75rem;
  }

  /* Description — mobile: 14px */
  .section-history__description {
    font-size: 0.875rem;
    max-width: 100%;
    text-align: justify;
    font-weight: 300;
    letter-spacing: -0.0175rem;
  }
  .section-history__timeline--wrapper {
    overflow-x: auto;
    scrollbar-width: none;

    /* IE, Edge cũ */
    -ms-overflow-style: none;
  }
  .section-history__timeline--wrapper::-webkit-scrollbar {
    display: none;
  }
  .section-history__timeline {
    margin-top: 1.5rem;
    width: fit-content;
  }
  /* Media: full width, below content */
  .section-history__media {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /* 16:9 ratio fallback — actual mobile image may crop to portrait */
    order: 2;
    /* border-radius: 0.5rem; */
  }

  .section-history__image-wrap {
    border-radius: 0.5rem;
  }

  /* .section-history__img {
    border-radius: 0.5rem;
  } */
  .section-history__dot {
    width: 4.08331rem;
    margin-right: 0.75rem;
  }
  .section-history__dot:last-child {
    margin-right: 0;
  }
  /* .section-history__dots {
    gap: 0.75rem;
  } */

  /* Timeline track — căn qua tâm marker mobile.
       top = padding-top timeline (1.5rem) + nửa marker mobile (0.4375rem) = 1.9375rem */
  .section-history__timeline-track {
    top: 0.875rem;
    background-image: repeating-linear-gradient(
      to right,
      #ddd 0 0.35rem,
      transparent 0.35rem 0.55rem
    );
  }

  /* Dot marker — nhỏ hơn chút trên mobile (0.875rem = 14px) */
  .section-history__dot-marker {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.5rem;
  }
  .section-history__dot-marker::after {
    width: 0.875rem;
    height: 0.875rem;
    inset: 50%;
    transform: translate(-50%, -50%);
  }

  /* Year label smaller on mobile */
  .section-history__dot-year {
    font-size: 0.6875rem;
    letter-spacing: -0.03125rem;
    color: var(--Body-Black-40, rgba(19, 19, 19, 0.4));
    text-align: center;

    /* MB/16/16-SM-140 */
    font-family: "Lexend Deca";
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 1.4rem */
    text-transform: uppercase;
  }
}


/* ===== template-parts/gioi-thieu/section-production/assets/styles.css ===== */
/* ============================================================== */
/* Section Production — Desktop Base                               */
/* ============================================================== */

.section-production {
  position: relative;
  width: 100%;

  padding-bottom: 0;
  overflow: hidden;
  background-color: #ffffff;
}

/* Khối dưới (cards + nav) — containing block cho dải nền cam */
.section-production__lower {
  position: relative;
}

/* Orange background strip — kéo từ đáy ảnh card xuống hết nav.
   Dùng top + bottom thay cho height cố định → dải cam cao đúng bằng nội dung thật,
   nên card text dài bao nhiêu nền cam cũng phủ đủ (chữ trắng không tràn ra nền trắng).
   left/right âm = bleed ra ngoài padding của container cho full-bleed
   (.section-production đã có overflow: hidden nên không sinh scroll ngang). */
.section-production__bg-strip {
  position: absolute;
  top: 17.375rem; /* = .section-production__card-img-wrap height (278px / 16) */
  bottom: 0;
  left: -6.25rem; /* = padding-left của .section-production__container */
  right: -6.25rem;
  background-color: #fa6900;
  z-index: 0;
}

/* Cards + nav nằm trên dải cam */
.section-production__swiper,
.section-production__nav {
  position: relative;
  z-index: 1;
}

.section-production__container {
  position: relative;
  z-index: 1;
  padding-left: 6.25rem; /* 100px / 16 */
  padding-right: 6.25rem; /* 100px / 16 */
}

/* Heading block */
.section-production__heading-block {
  text-align: center;
  margin-bottom: 0.75rem; /* 12px / 16 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-production__title {
  position: relative;
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -2px / 16 */
  text-transform: uppercase;
  color: #131313;
  margin: 0 0 1rem 0;
  width: 48rem;
}

/* Title color accent: last word or line */
.section-production__title-accent {
  color: #fa6900;
}

.section-production__subtitle {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.125rem; /* 18px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(19, 19, 19, 0.8);
  max-width: 50rem; /* ~800px */
  margin: 0 auto 1.5rem auto; /* 60px / 16 */
  width: 43.13rem;
}

/* Cards area + Swiper wrapper */
.section-production__swiper {
  width: 100%;
  overflow: hidden;
  padding: 0 1rem;
}

.section-production__swiper-wrapper {
  display: flex;
  align-items: flex-start;
}

/* Each slide — Swiper tự set width theo slidesPerView + spaceBetween.
   KHÔNG set width cứng ở đây (gây xung đột làm Swiper không nhận overflow). */
.section-production__slide {
  flex-shrink: 0;
  height: auto;
}

/* Card */
.section-production__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  /* border-radius: 0.5rem; */
}

/* Card image */
.section-production__card-img-wrap {
  width: 100%;
  height: 17.375rem; /* 278px / 16 */
  overflow: hidden;
  flex-shrink: 0;
  /* border-radius: 0.5rem 0.5rem 0 0;  */
}

.section-production__card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body — on top of orange bg */
.section-production__card-body {
  padding: 1.12rem 1rem 0 1rem;
  /* 24px / 16 top/bottom, 20px / 16 left/right */
  width: 100%;
  background-color: transparent;
}

.section-production__card-title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.25rem; /* 20px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01875rem;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.75rem 0; /* 12px / 16 */
}

.section-production__card-desc {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -2px / 16 */
  color: #fff;
  margin: 0;
}

/* Navigation area — bars + counter (trái) | prev/next (phải) */
.section-production__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.875rem;
  padding-bottom: 2.5rem;
}

/* Left cluster: progress bars + counter */
.section-production__nav-left {
  display: flex;
  align-items: center;
}

/* Progress bars (Swiper pagination bullets render vào đây) */
.section-production__bars {
  display: flex;
  align-items: center;
}

.section-production__bar {
  display: block;
  width: 2.5rem; /* 40px inactive */
  height: 0.1875rem; /* 3px */
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  /* border-radius: 0.0938rem; */
  cursor: pointer;
  transition: width 400ms cubic-bezier(0.47, 0, 0.01, 1.01),
    background-color 400ms ease;
}

.section-production__bar + .section-production__bar {
  margin-left: 0.375rem; /* 6px / 16 */
}

.section-production__bar.is-active {
  width: 6.25rem; /* 100px active */
  background-color: #ffffff;
}
.js-production-next {
  margin-left: 0.375rem;
}
.section-production__nav-counter {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem; /* 14px / 16 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0625rem;
  color: #ffffff;
  letter-spacing: -0.00875rem;
  margin-left: 0.75rem; /* gap 12px so với bars */
  white-space: nowrap;
}

/* Right cluster: prev/next (2 nút trong w-96px → gap 8px) */
.section-production__nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.section-production__nav-btn {
  width: 2.75rem; /* 44px / 16 — Figma Icon button */
  height: 2.75rem;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #131313; /* màu mũi tên (currentColor) */
  transition: background-color 300ms ease, color 300ms ease;
}

.section-production__nav-btn:focus-visible {
  outline: 0.125rem solid #131313;
  outline-offset: 0.125rem;
}

.section-production__nav-btn svg {
  width: 1.375rem; /* 22px / 16 */
  height: 1.375rem;
  display: block;
  flex-shrink: 0;
}

.section-production__nav-next {
  margin-left: 0.5rem; /* 8px / 16 — khoảng cách 2 nút trong cụm 96px */
}

/* Disabled state khi tới đầu/cuối (Swiper thêm class) */
.section-production__nav-btn.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Hover on nav buttons — desktop only */
@media (min-width: 1024px) {
  .section-production__nav-btn:not(.swiper-button-disabled):hover {
    background-color: #131313;
    color: #ffffff;
  }
}

/* ============================================================== */
/* Mobile overrides — only properties that differ from desktop    */
/* ============================================================== */
@media screen and (max-width: 639.98px) {
  .section-production {
    padding-top: 1rem; /* 60px / 16 */
  }

  .section-production__bg-strip {
    top: 13.224rem; /* = chiều cao ảnh card mobile */
    left: 0; /* container mobile không có padding ngang */
    right: 0;
  }

  .section-production__container {
    padding-left: 0; /* 16px / 16 */
    padding-right: 0; /* 16px / 16 */
  }

  /* Bỏ padding ngang để overflow cắt đúng mép slide — tránh lộ viền slide cũ khi vuốt */
  .section-production__swiper {
    padding: 0;
  }

  .section-production__card-body {
    padding: 1.12rem 0rem 0 0rem;
  }

  .section-production__title {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.0375rem;
    width: 19.6875rem;
  }
  .section-production__heading-block {
    margin-bottom: 0;
    padding: 0 1rem;
  }

  .section-production__subtitle {
    font-size: 0.875rem; /* 14px / 16 */
    margin-bottom: 1.75rem; /* 40px / 16 */
    width: auto;
    font-weight: 300;
    letter-spacing: -0.0175rem;
  }

  .section-production__card-img-wrap {
    height: 13.224rem;
    width: 21.44rem;
  }

  .section-production__card-title {
    font-size: 1rem; /* 16px / 16 */
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 0.375rem;
  }

  .section-production__card-desc {
    font-size: 0.875rem; /* 14px / 16 */
    letter-spacing: 0;
    padding-left: 1rem;padding-right: 1rem;
  }

  /* Mobile nav: chỉ counter (trái) + 2 nút (phải) — Figma không có bars */
  .section-production__nav {
    padding: 0 1rem;
    padding-top: 1.5rem; /* 24px / 16 */
    padding-bottom: 3.03rem; /* 40px / 16 */
  }

  .section-production__bars {
    display: none; /* ẩn progress bars trên mobile */
  }

  .section-production__nav-counter {
    margin-left: 0; /* không còn bars phía trước */
    letter-spacing: 0;
  }

  /* Nút nhỏ hơn trên mobile (40px) */
  .section-production__nav-btn {
    width: 2.5rem; /* 40px / 16 */
    height: 2.5rem;
  }

  .section-production__nav-btn svg {
    width: 1.25rem; /* 20px / 16 */
    height: 1.25rem;
  }
}


/* ===== template-parts/gioi-thieu/section-leadership/assets/styles.css ===== */
/* =============================================================================
   Section: Ban lãnh đạo (Leadership) — Giới thiệu
   Desktop node: 2348:29203 (1600×921px)
   Mobile node:  2348:29857 (375×749px)
   rem divisor: 16 | Breakpoint: 639.98px
   ============================================================================= */

/* ============================================================ */
/* Desktop base                                                  */
/* ============================================================ */

.section-leadership {
  background-color: #ffffff;
  padding-top: 6.25rem; /* 100px / 16 */
  padding-bottom: 6.25rem;
}

.section-leadership__container {
  max-width: 87.5rem; /* 1400px / 16 — 1600px - 2×100px padding */
  margin-left: auto;
  margin-right: auto;
}

/* -------- Header row -------- */

.section-leadership__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem; /* 60px / 16 */
}

.section-leadership__header-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.section-leadership__header-right {
  max-width: 32.75rem; /* 524px / 16 */
  padding-bottom: 0.25rem;
}

/* -------- Tagline (orange dot + label) -------- */

.section-leadership__tagline {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1rem; /* 12px / 16 */
}

.section-leadership__tagline-dot {
  display: inline-block;
  width: 1rem; /* 16px / 16 */
  height: 1rem;
  border-radius: 50%;
  background-color: #fa6900;
  margin-right: 0.75rem; /* 8px / 16 */
  flex-shrink: 0;
}

.section-leadership__tagline-text {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #131313;
}

/* -------- H2 heading -------- */

.section-leadership__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  color: #131313;
  margin: 0;
}

/* -------- Description -------- */

.section-leadership__description {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: rgba(19, 19, 19, 0.8);
  margin: 0;
}

/* -------- Swiper wrapper (desktop: behaves as normal flex row) -------- */

.section-leadership__swiper {
  overflow: visible; /* desktop cards fully visible */
}

.section-leadership__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* -------- Leader card -------- */

.section-leadership__card {
  flex: 1 1 0;
  min-width: 0;
}

.section-leadership__card + .section-leadership__card {
  margin-left: 1.75rem; /* 20px / 16 — gutter between cards */
}

/* Portrait image wrapper — fixed height, overflow hidden, no aspect-ratio */
.section-leadership__card-image-wrap {
  width: 100%;
  height: 25.125rem; /* 402px / 16 */
  overflow: hidden;
  /* border-radius: 0.5rem 0.5rem 0 0;  */
}

.section-leadership__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 0 30%;
}

/* Card body */
.section-leadership__card-body {
  padding-top: 1.2rem; /* 16px / 16 */
  padding-bottom: 1rem;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}

.section-leadership__card-info {
  margin-bottom: 0.75rem; /* 12px / 16 */
}

.section-leadership__card-name {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.125rem; /* 18px / 16 */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: #131313;
  /* margin: 0 0 0.25rem; */
}

.section-leadership__card-position {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: #131313;
  margin: 0;
}

.section-leadership__card-quote {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: #131313;
  margin: 0 0 1rem;
  text-align: justify;
}

/* Social icons row */
.section-leadership__card-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: auto;
}

.section-leadership__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px / 16 */
  height: 1.5rem;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.section-leadership__social-link:hover {
  opacity: 0.7;
}

.section-leadership__social-link:focus-visible {
  outline: 2px solid #fa6900;
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.section-leadership__social-link + .section-leadership__social-link {
  margin-left: 0.75rem; /* 12px / 16 */
}

.section-leadership__social-icon {
  width: 1.5rem; /* 24px / 16 */
  height: 1.5rem;
  display: block;
}

/* Swiper pagination — hidden on desktop */
.section-leadership__pagination {
  display: none;
}

/* =============================================================================
   Mobile overrides — only properties that differ from desktop
   ============================================================================= */
.section-leadership__nav--wrapper {
  display: none;
}
@media screen and (max-width: 639.98px) {
  .section-leadership {
    padding-top: 3rem; /* 60px / 16 */
    padding-bottom: 1.5rem;
  }

  .section-leadership__container {
    padding-left: 0; /* 16px / 16 */
    padding-right: 0;
    max-width: 100%;
  }

  /* Header row → stacked column */
  .section-leadership__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5rem; /* 32px / 16 */
    padding: 0 1rem;
  }

  .section-leadership__header-right {
    max-width: 100%;
    margin-top: 0.75rem;
    padding-bottom: 0;
  }

  .section-leadership__tagline {
    margin-bottom: 0.75rem;
  }

  .section-leadership__tagline-text {
    font-size: 0.75rem; /* 12px / 16 */
    line-height: 1.3;
  }

  .section-leadership__tagline-dot {
    width: 0.75rem; /* 12px / 16 */
    height: 0.75rem;
    margin-right: 0.5rem;
  }

  .section-leadership__heading {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem;
  }
  .section-leadership__header-right {
    display: none;
  }
  .section-leadership__description {
    display: none;
    font-size: 0.875rem; /* 14px / 16 */
  }

  /* Swiper overrides for mobile carousel */
  .section-leadership__swiper {
    overflow: hidden; /* Swiper needs overflow hidden to clip slides */
    padding: 0; /* KHÔNG padding ngang ở đây — vùng padding không bị overflow cắt nên lộ viền slide cũ khi vuốt */
  }

  .section-leadership__list {
    /* Swiper manages flex layout of slides */
  }

  .section-leadership__card {
    /* Swiper sets width; we force full width via Swiper config */
    flex: 0 0 100%;
    max-width: 100%;
    /* Gutter 1rem nằm trong slide (không phải trên swiper) → ảnh width:100% = 21.4375rem, không lộ viền */
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Remove left margin on cards (Swiper handles spacing) */
  .section-leadership__card + .section-leadership__card {
    margin-left: 0;
  }

  .section-leadership__card-image-wrap {
    height: 20.58431rem; /* ~354px — slightly shorter on mobile, fits 375px card */
    /* border-radius: 0.5rem 0.5rem 0 0; */
  }

  .section-leadership__card-name {
    text-align: justify;

    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 1.8rem */
    letter-spacing: -0.03375rem;
    margin: 0;
  }

  .section-leadership__card-position {
    font-size: 0.875rem;
    letter-spacing: 0;
  }
  .section-leadership__divide {
    width: auto;
    height: 1px;
    background: #e7e7e7;
    margin: 0.25rem 1rem 1.25rem 1rem; /* gutter 1rem 2 bên (trước đây lấy từ padding của swiper) */
  }
  .section-leadership__nav--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem; /* gutter 1rem 2 bên (trước đây lấy từ padding của swiper) */
    padding-right: 1rem;
  }
  .section-leadership__nav {
    display: flex;
  }
  .section-leadership__fraction {
    color: var(--Body-Black-100, #131313);

    /* MB/14/14-M-150 */
    font-family: "Lexend Deca";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 1.3125rem */
  }
  .js-leadership-next {
    margin-left: 0.375rem;
  }
  .section-leadership__card-quote {
    font-size: 0.875rem;
    letter-spacing: 0;
    font-weight: 400;
    text-align: justify;
  }

  /* Show pagination bullets on mobile */
  .section-leadership__pagination {
    display: block;
    text-align: center;
    margin-top: 1.5rem; /* 24px / 16 */
  }

  /* Swiper bullet styles */
  .section-leadership__pagination.swiper-pagination .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgba(19, 19, 19, 0.2);
    opacity: 1;
    border-radius: 50%;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .section-leadership__pagination.swiper-pagination
    .swiper-pagination-bullet-active {
    background-color: #fa6900;
    width: 1.5rem;
    border-radius: 0.25rem;
  }
}


/* ===== template-parts/gioi-thieu/section-culture/assets/styles.css ===== */
/* =============================================================
   Section Culture — Desktop base (1600px design)
   rem = figma_px / 16, 4 decimal places
   ============================================================= */

.section-culture {
  background-color: #ffffff;
  padding-bottom: 9.81rem; /* 150px */
  padding-top: 2.125rem;
  overflow: hidden;
}

/* ---- Header ---- */
.section-culture__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  /* gap entre h2 e subtitle = 14px → margin */
}

.section-culture__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -0.8px / 16 */
  text-transform: uppercase;
  color: #131313;
  text-align: center;
  margin: 0;
}

.section-culture__subtitle {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  color: #131313;
  text-align: center;
  margin-top: 0.875rem; /* 14px */
  margin-bottom: 0;
}

/* ---- Marquee container ---- */
.section-culture__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 2.94rem;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* ---- Individual row ---- */
.section-culture__row {
  width: 100%;
  overflow: hidden;
}

.section-culture__row--2 {
  margin-top: 0.625rem; /* 10px — gap between rows */
}

/* ---- Row inner (animated strip) ---- */
.section-culture__row-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* will-change set in JS */
}

/* ---- Image wrappers ---- */
.section-culture__img-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* Row 1 image sizes */
.section-culture__row--1 .section-culture__img-wrap {
  width: 22.3125rem; /* 357px */
  height: 13rem; /* 208px */
}

.section-culture__row--1
  .section-culture__img-wrap
  + .section-culture__img-wrap {
  margin-left: 0.625rem; /* 10px gap */
}

/* Row 2 image sizes */
.section-culture__row--2 .section-culture__img-wrap {
  width: 32.5625rem; /* 521px */
  height: 17.625rem; /* 282px */
}

.section-culture__row--2
  .section-culture__img-wrap
  + .section-culture__img-wrap {
  margin-left: 0.625rem; /* 10px gap */
}

/* ---- Image itself ---- */
.section-culture__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  display: block;
}

/* ---- Dark overlay on each image ---- */
.section-culture__img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ---- Gradient fade overlays (left / right) ---- */
.section-culture__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11rem; /* 176px */
  pointer-events: none;
  z-index: 2;
}

.section-culture__fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.section-culture__fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

/* =============================================================
   Mobile overrides — only deltas vs desktop
   breakpoint: max-width 639.98px  (375px design)
   ============================================================= */
@media screen and (max-width: 639.98px) {
  .section-culture {
    padding-top: 2.5rem; /* 40px */
    padding-bottom: 3rem; /* 48px */
  }

  /* Header: left-aligned, padded */
  .section-culture__header {
    align-items: center;
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
  }

  .section-culture__heading {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px / 16 */
    text-align: left;
  }

  .section-culture__subtitle {
    font-size: 0.875rem; /* 14px */
    font-weight: 300;
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    text-align: left;
    margin-top: 0.5rem; /* 12px */
  }

  /* Marquee */
  .section-culture__marquee {
    margin-top: 1.75rem; /* 28px */
  }

  .section-culture__row--2 {
    margin-top: 0.390625rem; /* 6.25px */
  }

  /* Row 1 mobile image sizes: (1116.25 - 4×6.25) / 5 = 218.25px → 13.640625rem */
  .section-culture__row--1 .section-culture__img-wrap {
    width: 13.640625rem; /* 218.25px */
    height: 8.125rem; /* 130px */
  }

  .section-culture__row--1
    .section-culture__img-wrap
    + .section-culture__img-wrap {
    margin-left: 0.390625rem; /* 6.25px */
  }

  /* Row 2 mobile image sizes: (1302.5 - 3×6.25) / 4 = 320.9375px → 20.0585rem */
  .section-culture__row--2 .section-culture__img-wrap {
    width: 20.0585rem; /* 320.94px */
    height: 11.015625rem; /* 176.25px */
  }

  .section-culture__row--2
    .section-culture__img-wrap
    + .section-culture__img-wrap {
    margin-left: 0.390625rem; /* 6.25px */
  }

  /* Gradient fade narrower on mobile */
  .section-culture__fade {
    width: 2.75rem; /* 44px */
  }
}


/* ===== template-parts/gioi-thieu/section-partners/assets/styles.css ===== */
/* =============================================================
   Section Partners — Desktop base (1600px design)
   rem = figma_px / 16, 4 decimal places
   ============================================================= */

.section-partners {
  background-color: #ffffff; /* 150px — symmetric with padding-bottom from Figma */
  padding-bottom: 9.375rem; /* 150px */
  overflow: hidden;
}

/* ---- Contained heading block ---- */
.section-partners__container {
  padding-left: 6.25rem; /* 100px */
  padding-right: 6.25rem; /* 100px */
}
.section-partners__heading br {
  display: none;
}
/* ---- H2 Heading ---- */
.section-partners__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -2px / 16 */
  text-transform: uppercase;
  color: #131313;
  text-align: center;
  margin: 0 0 3rem 0; /* 40px below heading before marquee */
  padding-top: 0.25rem;
}

/* ---- Marquee wrapper ---- */
.section-partners__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ---- Gradient fade overlays (left / right) ---- */
.section-partners__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9.375rem; /* 150px */
  pointer-events: none;
  z-index: 2;
}

.section-partners__fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.section-partners__fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

/* ---- Individual row ---- */
.section-partners__row {
  width: 100%;

  overflow: hidden;
}

/* Row 2 — hidden on desktop, shown on mobile */
.section-partners__row--1 {
  display: none;
}

/* ---- Row inner (animated strip) ---- */
.section-partners__row-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* will-change set in JS */
}

/* ---- Logo wrapper ---- */
.section-partners__logo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 9.875rem; /* 158px */
  height: 4.6875rem; /* 75px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-partners__logo-wrap + .section-partners__logo-wrap {
  margin-left: 2.6875rem; /* 43px — gap from Figma annotation */
}

/* ---- Logo image ---- */
.section-partners__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =============================================================
   Mobile overrides — only deltas vs desktop
   breakpoint: max-width 639.98px  (375px design)
   ============================================================= */
@media screen and (max-width: 639.98px) {
  .section-partners__heading br {
    display: block;
  }
  .section-partners {
    padding-top: 0; /* 60px */
    padding-bottom: 3.75rem; /* 60px */
  }
  .section-partners__row {
    height: 3.3125rem;
  }
  .section-partners__row-inner {
    height: 100%;
  }
  .section-partners__container {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
  }

  .section-partners__heading {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    letter-spacing: -0.1875rem; /* -3px / 16 */
    margin-bottom: 1.5rem; /* 28px */
    letter-spacing: -0.0375rem;
  }

  /* Gradient narrower on mobile */
  .section-partners__fade {
    width: 2.75rem; /* 44px */
  }

  /* Show row 2 on mobile */
  .section-partners__row--2 {
    margin-top: 1rem; /* 16px between rows */
  }
  .section-partners__row--1 {
    display: block;
  }

  /* Un-hide row 2 (aria-hidden still present — decorative duplicate) */
  .section-partners__row--2 .section-partners__row-inner {
    /* row 2 scrolls right — JS handles direction */
  }

  /* Mobile logo sizes: Figma mobile 375px — logos ~4.6875rem × 2.5rem  (75×40px) */
  .section-partners__logo-wrap {
    width: 5.9375rem; /* 95px — fits more per row on 375px */
    height: 2.8125rem; /* 45px */
  }

  .section-partners__logo-wrap + .section-partners__logo-wrap {
    margin-left: 1.25rem; /* 20px on mobile */
  }
}


/* ===== template-parts/gioi-thieu/section-contact/assets/styles.css ===== */
/* ============================================================== */
/* Section Contact — Desktop Base                                  */
/* ============================================================== */

/*
 * Desktop layout: CSS Grid, 2 columns.
 *   Col 1 = 42.5625rem (681px) — text-block / contacts / cta stacked
 *   Col 2 = 1fr         — map spans all 3 rows
 *
 * Mobile layout: flex-direction column with explicit `order`:
 *   order 1 → .text-block
 *   order 2 → .map
 *   order 3 → .contacts
 *   order 4 → .cta
 */

.section-contact {
  width: 100%;
  background-color: #f6f7f9;
  padding-top: 6.25rem; /* 100px / 16 */
  padding-bottom: 6.25rem; /* 100px / 16 */
  padding-left: 6.25rem; /* 100px / 16 */
  padding-right: 6.25rem; /* 100px / 16 */
}

.section-contact__inner {
  display: grid;
  grid-template-columns: 42.5625rem 1fr; /* 681px left, remaining right */
  /* grid-template-rows: auto auto auto; */
  align-items: start;
  column-gap: 6.25rem;
}

/* ===================== Grid col 1 — Left Children ===================== */

.section-contact__text-block {
  grid-column: 1;
  grid-row: 1;
}

.section-contact__contacts {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 3.75rem; /* 40px / 16 */
}

.section-contact__cta {
  grid-column: 1;
  grid-row: 3;
  padding-right: 5rem; /* 80px / 16 */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: start;
  width: fit-content;
}

/* ===================== Heading & Description ===================== */

.section-contact__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -2px / 16 */
  text-transform: uppercase;
  color: #131313;
  margin: 1.25rem 0 0.75rem 0;
}

.section-contact__description {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -2px / 16 */
  color: #131313;
  margin: 0 0 2.5rem 0; /* 40px / 16 */
}

/* ===================== Contact Blocks ===================== */

.section-contact__contact-block {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* .section-contact__contact-block + .section-contact__contact-block {
  margin-left: 3.75rem; 
} */

.section-contact__contact-icon-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0.5rem; /* 12px / 16 */
}

.section-contact__contact-icon {
  width: 1.5rem; /* 24px / 16 */
  height: 1.5rem; /* 24px / 16 */
  flex-shrink: 0;
  display: block;
}

.section-contact__contact-label {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -2px / 16 */
  color: #131313;
  margin-left: 0.625rem; /* 8px / 16 */
}

.section-contact__contact-helper {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 14px / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -2px / 16 */
  color: #131313;
  margin: 0 0 1rem 0; /* 8px / 16 */
}

.section-contact__contact-value {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1.5625rem; /* 25px / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: #131313;
  text-decoration: underline;
  text-underline-offset: 0.1875rem; /* 3px / 16 */
  display: inline-block;
  transition: color 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

@media (min-width: 1024px) {
  .section-contact__contact-value:hover {
    color: #fa6900;
  }
}

.section-contact__contact-value:focus-visible {
  outline: 2px solid #fa6900;
  outline-offset: 2px;
}

/* ===================== CTA Button ===================== */

.section-contact__cta {
  background-color: #fa6900;
  border: none;
  cursor: pointer;
  padding-left: 4rem;
  padding-right: 4rem;
  text-decoration: none;
  transition: background-color 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
  height: 3.5rem;
}

@media (min-width: 1024px) {
  .section-contact__cta:hover {
    background-color: #ff7b1c;
  }
}

.section-contact__cta:focus-visible {
  outline: 2px solid #fa6900;
  outline-offset: 2px;
}

.section-contact__cta-text {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px / 16 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.0625rem; /* -1px / 16 */
  text-transform: uppercase;
  color: #ffffff;
}

.section-contact__cta-icon {
  width: 1.5rem; /* 24px / 16 */
  height: 1.5rem; /* 24px / 16 */
  margin-left: 0.5rem; /* 8px / 16 */
  flex-shrink: 0;
  display: block;
}

/* ===================== Grid col 2 — Map ===================== */
/* Spans all 3 rows on desktop — fills full height of left column */

.section-contact__map {
  grid-column: 2;
  grid-row: 1 / 5; /* span rows 1–3 */
  overflow: hidden;

  height: 24.25rem;
}

.section-contact__map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================== */
/* Mobile Overrides — max-width: 639.98px                         */
/* ============================================================== */

@media screen and (max-width: 639.98px) {
  .section-contact {
    padding-top: 3rem; /* 16px / 16 */
    padding-bottom: 3rem; /* 16px / 16 */
    padding-left: 1rem; /* 16px / 16 */
    padding-right: 1rem; /* 16px / 16 */
  }

  /* Switch from grid to flex-column for ordered stacking */
  .section-contact__inner {
    display: flex;
    flex-direction: column;
  }

  /* Mobile order: text → map → contacts → cta */
  .section-contact__text-block {
    order: 1;
  }
  .section-contact__map {
    order: 2;
  }
  .section-contact__contacts {
    order: 3;
  }
  .section-contact__cta {
    order: 4;
  }

  /* Reset desktop grid padding-right on all left children */
  .section-contact__text-block,
  .section-contact__contacts,
  .section-contact__cta {
    padding-right: 0;
  }

  /* Heading adjustments */
  .section-contact__heading {
    font-size: 1.25rem; /* 20px / 16 */
    line-height: 1.6;
    letter-spacing: -0.0375rem;
    margin: 0;
    margin-bottom: 0.75rem; /* 12px / 16 */
  }
  .section-contact__contact-helper {
    color: var(--Body-Black-100, #131313);

    /* MB/14/14-R-150 */
    font-family: "Lexend Deca";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.3125rem */
    letter-spacing: 0;
    margin: 0 0 0.5rem 0;
  }
  .section-contact__contact-label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0;
  }
  .section-contact__contact-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .section-contact__description {
    letter-spacing: 0;
    font-size: 0.875rem; /* 14px / 16 */
    margin-bottom: 1.5rem; /* 20px / 16 */
  }

  /* Map: fixed height, bottom margin before contacts */
  .section-contact__map {
    grid-row: unset;
    width: 100%;
    height: 13.4375rem; /* 215px / 16 */
    margin-bottom: 1.5rem; /* 24px / 16 */
  }

  .section-contact__map-img {
    height: 13.4375rem; /* 215px / 16 */
  }

  /* Contacts: stacked vertically */
  .section-contact__contacts {
    flex-direction: column;
    padding-bottom: 1.5rem; /* 24px / 16 */
  }

  .section-contact__contact-block + .section-contact__contact-block {
    margin-left: 0;
    margin-top: 2rem; /* 24px / 16 */
  }

  .section-contact__contact-value {
    font-size: 1rem; /* 18px / 16 */
  }

  /* CTA: full width */
  .section-contact__cta {
    width: 100%;
    justify-content: center;
    padding-right: 1.5rem; /* 24px / 16 — restore button padding */
    height: 2.625rem;
    width: fit-content;
    padding: 0.75rem 1.5rem;
  }
  .section-contact__cta-icon {
    width: 1rem;
    height: 1rem;
  }
  .section-contact__cta-text {
    color: var(--Body-White-100, #fff);

    /* Buttons/14-M */
    font-family: "Lexend Deca";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 1.1375rem */
    letter-spacing: -0.00875rem;
    text-transform: uppercase;
  }
}


/* ===== template-parts/gioi-thieu/assets/styles.css ===== */
/* Giới thiệu page — section CSS imports (order theo PLAN.md) */