.page-wrapper:has(.founder-image) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Container chứa ảnh */
.founder-image {
  width: 100vw !important;
  max-width: none !important;

  aspect-ratio: 2.7 / 1 !important;
  height: auto !important;
  min-height: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden !important;
  position: relative !important;
}

/* Thằng cha của Row */
.founder-image > .section-content {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Row */
.founder-image > .section-content > .row {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Column */
.founder-image > .section-content > .row > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.founder-image .bg-fill {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.founder-image .founder-text-1 * {
  font-size: 8rem !important;
}

/* FOUNDER */
.founder-image .founder-text-2 * {
  font-size: 6rem;
}

/* TABLET */
@media (max-width: 768px) {
  .founder-image .founder-text-1 * {
    font-size: 6rem !important;
  }

  .founder-image .founder-left-column {
    display: none !important;
  }

  .founder-image .founder-right-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .founder-text-1 *,
  .founder-text-2 * {
    text-align: center !important;
  }
}

/* MOBILE */
@media (max-width: 480px) {
  .founder-image .founder-text-1,
  .founder-image .founder-text-2 {
    padding-right: 0 !important;
  }

  .founder-image .founder-text-1 * {
    font-size: 4rem !important;
  }

  .gap-0 {
    padding-top: 0 !important;
  }
}

/* OUR STORY FRONTEND*/

.inner-story-wrapper {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: rgb(241, 232, 227);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inner-story-wrapper .container,
.inner-story-wrapper .row {
  width: 100% !important;
  max-width: none !important;
}

.inner-story-pages {
  position: relative !important;
  width: 100%;
  overflow: hidden !important;
}

.inner-story-page {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 1050px !important;

  margin: 0 auto;

  min-height: 0 !important;
  height: auto !important;

  padding: 1.5rem 0;

  box-sizing: border-box;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(0);

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.65s ease !important;

  will-change: transform, opacity;

  pointer-events: none !important;
}

.inner-story-layout,
.inner-story-footer {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* PAGE ĐANG HIỂN THỊ */

.inner-story-page.is-active {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0);
  pointer-events: auto !important;
}

/* =========================================================
   OUR STORY - IMAGE LAYOUT
   ========================================================= */

.inner-story-layout {
  width: 100%;
  display: grid;

  grid-template-columns:
    16%
    minmax(0, 1fr)
    27%;

  column-gap: 3rem;

  align-items: start;
}

/* =========================================================
   LEFT IMAGES
   ========================================================= */

.inner-story-left {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 3rem;

  height: auto;
  min-height: 0;
}

.inner-story-image {
  width: 100%;

  overflow: hidden;

  flex: none !important;
}

/* ẢNH TRÁI TRÊN - 9:16 */

.inner-story-image-top {
  width: 100%;

  aspect-ratio: 9 / 16;

  height: auto !important;
  border-radius: 1.8rem;
}

/* ẢNH TRÁI DƯỚI - 1:1 */

.inner-story-image-bottom {
  width: 100%;

  aspect-ratio: 1 / 1;

  height: auto !important;
  border-radius: 1.8rem;
}

/* IMAGE */

.inner-story-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.inner-story-image:hover img {
  transform: scale(1.05);
}

/* =========================================================
   CENTER CONTENT
   ========================================================= */

.inner-story-content {
  width: 100%;

  padding-top: 0;

  min-width: 0;
}

.inner-story-heading,
.inner-story-heading * {
  margin: 0!important;
  line-height: 1.2;
}

.inner-story-divider {
  width: 15rem;
  height: 1px;
  background: #000;
  margin: 1.5rem 0;
}

.inner-story-text {
  width: 100%;
  text-align: justify;
}

.inner-story-text p {
  line-height: 1.5;
  margin-bottom: 0;
}

.inner-story-right {
  width: 100%;

  height: auto;

  min-height: 0;
}

.inner-story-image-right {
  width: 100%;

  aspect-ratio: 9 / 16;

  height: auto !important;

  min-height: 0;

  overflow: hidden;
  border-radius: 1.8rem;
}

.inner-story-image-right img {
  width: 100%;
  height: 100%;

  display: block;

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

.inner-story-footer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
}

.inner-story-line {
  height: 1px;
  background: #555;
  flex: 1;
}

.inner-story-page-number {
  font-size: 1.4rem;
  white-space: nowrap;
}

.inner-story-navigation {
  position: absolute;

  /* đưa ra ngoài bên phải ảnh right */
  right: -8rem;

  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 3rem;

  z-index: 10;
}
.inner-story-navigation button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.inner-story-navigation button span {
  width: 3rem;
  height: 3rem;

  border: 1px solid #222;
  border-radius: 50%;

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

  font-size: 2.4rem;
  line-height: 1;

  /* chỉnh optical alignment của ‹ › */
  padding-bottom: 0.3rem;
  box-sizing: border-box;

  margin-top: 0.6rem;
}

.inner-story-next,
.inner-story-back {
  opacity: 0.6;
  margin: 0;
}

.inner-story-next span,
.inner-story-back span {
  margin-top: 0 !important;

  margin-bottom: 0.6rem;
}

.inner-story-page.story-slide-next {
  opacity: 0 !important;
  transform: translateX(4rem) !important;
}

.inner-story-page.story-slide-out-left {
  opacity: 0 !important;
  transform: translateX(-4rem) !important;
}

.inner-story-page.story-slide-back {
  opacity: 0 !important;
  transform: translateX(-4rem) !important;
}

.inner-story-page.story-slide-out-right {
  opacity: 0 !important;
  transform: translateX(4rem) !important;
}

.inner-story-quote {
  position: relative !important;

  margin-top: 1.5rem !important;
  padding-left: 3rem !important;
  line-height: 1 !important;
}

.inner-story-quote::before {
  content: "”" !important;

  position: absolute !important;
  left: 0 !important;
  top: -0.5rem !important;

  display: inline-block !important;

  font-family: Arial, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  transform: scaleX(-1) !important;
  transform-origin: center !important;
}

.inner-story-quote p {
  margin: 0 !important;
}

/* =========================================================
   TABLET - <= 768px
   ========================================================= */

@media (max-width: 768px) {
  .inner-story-page {
    position: absolute !important;
    min-height: auto;
    box-sizing: border-box;
    padding: 1.5rem 3rem;
  }

  .inner-story-page.is-active {
    position: relative !important;
  }

  /* =========================
     MAIN LAYOUT
     ========================= */

  .inner-story-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .inner-story-left {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 2rem;

    height: auto;

    order: 1;
  }

  /* Mỗi ảnh 1 hàng */

  .inner-story-image {
    width: 100%;

    height: auto !important;

    flex: none !important;

    border-radius: 1.4rem;

    overflow: hidden;
  }

  /* Ảnh trên = 9:16 */

  .inner-story-image-top {
    width: 100%;

    aspect-ratio: 3 / 4 !important;

    height: auto !important;
  }

  /* Ảnh dưới = 1:1 */

  .inner-story-image-bottom {
    width: 100%;

    aspect-ratio: 3 / 4 !important;

    height: auto !important;
  }

  .inner-story-image img {
    width: 100%;
    height: 100%;

    display: block;

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

  /* =========================
     CENTER CONTENT
     ========================= */

  .inner-story-content {
    width: 100%;

    min-width: 0;

    order: 2;
  }

  /* .inner-story-heading,
  .inner-story-heading p {
    font-size: 2.8rem;
    line-height: 1.15;
  } */

  /* .inner-story-text {
    font-size: 1.6rem;
  } */

  .inner-story-quote {
    /*margin-top: 2.5rem !important;*/
    padding-left: 3rem !important;
    /* font-size: 1.6rem !important; */
  }

  .inner-story-quote::before {
    /*font-size: 5.5rem !important;*/
    top: -5px !important;
  }

  /* =========================
     RIGHT IMAGE
     XUỐNG DƯỚI
     ========================= */

  .inner-story-right {
    width: 100%;

    height: auto;

    order: 3;
  }

  .inner-story-image-right {
    width: 100%;

    max-width: none;

    aspect-ratio: 3 / 4;

    height: auto !important;

    margin: 0;

    border-radius: 1.4rem;

    overflow: hidden;
  }

  .inner-story-image-right img {
    width: 100%;
    height: 100%;

    display: block;

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

  /* =========================
     FOOTER / NAV
     ========================= */

  .inner-story-navigation {
    position: static;

    transform: none;

    flex-direction: row;

    justify-content: flex-end;

    gap: 2rem;

    margin-top: 1.5rem;
  }
  /* =========================
   RESPONSIVE NAV BUTTON
   icon trên - chữ dưới
   ========================= */

  .inner-story-navigation button {
    display: flex;

    /* CHỮ + SPAN CÙNG 1 HÀNG */
    flex-direction: row !important;

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

    gap: 0.8rem;
  }

  .inner-story-back {
    order: 1;
    flex-direction: row !important;
  }

  .inner-story-next {
    order: 2;
    flex-direction: row !important;
  }

  .inner-story-navigation button span {
    margin: 0 !important;
  }
}

/* =========================================================
   MOBILE - <= 480px
   ========================================================= */

@media (max-width: 480px) {
  /* =========================
     1 COLUMN
     ========================= */

  /* .inner-story-layout {
    display: grid;

    grid-template-columns: 1fr;

    gap: 2.5rem;

    align-items: start;
  } */

  /* =========================
     LEFT IMAGES
     1 IMAGE / ROW
     ========================= */

  .inner-story-left {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    height: auto;

    order: 1;
  }

  .inner-story-image {
    width: 100%;

    height: auto !important;

    flex: none !important;

    border-radius: 1.4rem;
  }

  /* Top = 9:16 */

  .inner-story-image-top {
    width: 100%;

    aspect-ratio: 3 / 4;
  }

  /* Bottom = 1:1 */

  .inner-story-image-bottom {
    width: 100%;

    aspect-ratio: 3 / 4;
  }

  .inner-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
  }

  /* =========================
     CONTENT
     ========================= */

  .inner-story-content {
    width: 100%;

    order: 2;
  }
  /* .inner-story-heading,
  .inner-story-heading p {
    font-size: 2.2rem;

    line-height: 1.2;
  } */

  .inner-story-divider {
    width: 15rem;
  }

  /* .inner-story-text {
    font-size: 1.6rem;

    line-height: 1.7;
  } */

  /* .inner-story-quote {
    font-size: 1.6rem !important;
  } */

  /*.inner-story-quote::before {*/
  /*  font-size: 5rem !important;*/
  /*}*/

  /* =========================
     RIGHT IMAGE
     ========================= */

  .inner-story-right {
    width: 100%;

    height: auto;

    order: 3;
  }

  .inner-story-image-right {
    width: 100%;

    aspect-ratio: 3 / 4;

    height: auto !important;

    border-radius: 1.4rem;
  }

  .inner-story-image-right img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }
}