/* VISION + MISSION SECTION */
.hero-home .stack > * {
  --stack-gap: 0rem !important;
}

.hero-title-12 * {
  font-size: 12rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vision-mission-title * {
  font-size: 6rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .hero-home .hero-title-12 * {
    font-size: 6rem !important;
  }

  .vision-mission-title * {
    font-size: 4rem !important;
  }
}
/* =========================================
   MOBILE NHỎ: <= 480px
   GIỮ NGUYÊN HERO 16:9
   ========================================= */

@media (max-width: 480px) {
  .hero-home .hero-title-12 * {
    font-size: 4rem !important;
  }

  .vision-mission-title * {
    font-size: 3rem !important;
  }
}

@media (max-width: 320px) {
  .hero-home .hero-title-12 * {
    font-size: 3rem !important;
  }

  .vision-mission-title * {
    font-size: 2rem !important;
  }
}


.vision-mission-section {
  width: 100vw !important;
  max-width: 100vw !important;

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

  padding: 0 !important;

  box-sizing: border-box !important;
}

.vision-mission-section .row {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  box-sizing: border-box !important;
}

.vision-mission-section .row + .row {
  margin-top: 0 !important;
}

.vision-mission-section .col {
  width: 50% !important;
  max-width: 50% !important;

  padding: 0 !important;
  margin: 0 !important;

  box-sizing: border-box !important;
}

.vision-mission-section .vision-image,
.vision-mission-section .mission-image {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 2rem !important;
}

.vision-mission-section .vision-image img,
.vision-mission-section .mission-image img {
  width: 100% !important;
  height: auto !important;

  object-fit: cover !important;

  display: block !important;

  margin: 0 !important;
  border-radius: 2rem !important;
}

.vision-mission-section .vision-text-column {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.vision-mission-section .vision-text-column .col-inner {
  width: 100% !important;
  height: 100% !important;

  padding-left: 3rem !important;
  padding-right: max(3rem, calc((100vw - 1050px) / 2)) !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vision-mission-section .mission-text-column .col-inner {
  width: 100% !important;
  height: 100% !important;

  padding-left: max(3rem, calc((100vw - 1050px) / 2)) !important;
  padding-right: 3rem !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vision-mission-section .mission-description,
.vision-mission-section .vision-description {
  width: 100% !important;
  max-width: none !important;

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

/* VISION + MISSION - JUSTIFY TEXT */
/* .vision-mission-section .vision-description,
.vision-mission-section .mission-description {
  text-align: justify !important;
  text-justify: inter-word;
} */
.vision-mission-section .vision-mission-section .row {
  align-items: stretch !important;
}

@media (max-width: 768px) {
  .vision-mission-section .row {
    flex-direction: column !important;
  }

  .vision-mission-section .col {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ẢNH - chừa 2 bên */
  .vision-mission-section .vision-image {
    width: calc(100% - 6rem) !important;
    margin: 1.5rem 3rem !important;
  }

  .vision-mission-section .mission-image {
    width: calc(100% - 6rem) !important;
    margin: 1.5rem 3rem !important;
  }

  .vision-mission-section .vision-image img,
  .vision-mission-section .mission-image img {
    width: 100% !important;
    border-radius: 2rem !important;
  }

  .vision-mission-section .mission-image {
    order: 1 !important;
  }

  .vision-mission-section .mission-text-column {
    order: 2 !important;
    margin-bottom: 1.5rem !important;
  }

  .vision-mission-section .vision-text-column .col-inner,
  .vision-mission-section .mission-text-column .col-inner {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .vision-mission-section .vision-description,
  .vision-mission-section .mission-description {
    width: 100% !important;
    max-width: 100% !important;

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

/* =========================================================
   VISION / MISSION HOVER EFFECT
   ========================================================= */

/* =========================================
   IMAGE WRAPPER
   ========================================= */

.vision-mission-section .vision-image,
.vision-mission-section .mission-image {
  position: relative !important;
  overflow: hidden !important;
}

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

.vision-mission-section .vision-image img,
.vision-mission-section .mission-image img {
  transform: scale(1);

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease !important;

  will-change: transform;
}

/* =========================================
   OVERLAY
   ========================================= */

.vision-mission-section .vision-image::after,
.vision-mission-section .mission-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.12);

  opacity: 0;

  transition: opacity 0.45s ease;

  pointer-events: none;

  z-index: 2;
}

/* =========================================
   IMAGE HOVER
   ========================================= */

.vision-mission-section .vision-image:hover img,
.vision-mission-section .mission-image:hover img {
  transform: scale(1.04) !important;

  filter: brightness(0.94) !important;
}

/* Hiện overlay */
.vision-mission-section .vision-image:hover::after,
.vision-mission-section .mission-image:hover::after {
  opacity: 1;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {

  /* VISION */
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column h1,
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column h2,
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column h3,
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column h4,
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column .vision-description,
  .vision-mission-section .row:has(.vision-image:hover) .vision-text-column p {
    color: #ff4b18 !important;
  }

  /* MISSION */
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column h1,
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column h2,
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column h3,
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column h4,
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column .mission-description,
  .vision-mission-section .row:has(.mission-image:hover) .mission-text-column p {
    color: #ff4b18 !important;
  }
}

/* =========================================================
   TEXT TRANSITION
   ========================================================= */

.vision-mission-section .vision-text-column h1,
.vision-mission-section .vision-text-column h2,
.vision-mission-section .vision-text-column h3,
.vision-mission-section .vision-text-column h4,
.vision-mission-section .vision-text-column p,
.vision-mission-section .mission-text-column h1,
.vision-mission-section .mission-text-column h2,
.vision-mission-section .mission-text-column h3,
.vision-mission-section .mission-text-column h4,
.vision-mission-section .mission-text-column p {
  transition: color 0.45s ease !important;
}

/* =========================================
   STYLE CARDS - SECTION
   ========================================= */

.style-cards-section {
  width: 100vw !important;
  max-width: 100vw !important;

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

  padding: 0 !important;

  box-sizing: border-box !important;
}

.style-cards-section .row {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  column-gap: 2rem !important;
  row-gap: 0 !important;

  box-sizing: border-box !important;
}

.style-cards-section .style-card {
  flex: 0 0 calc((100% - 4rem) / 3) !important;

  width: calc((100% - 4rem) / 3) !important;
  max-width: calc((100% - 4rem) / 3) !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

.style-cards-section .style-card .col-inner {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 1.2rem !important;

  box-sizing: border-box !important;
}

.style-cards-section .style-card-image {
  position: relative !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 1 !important;
}

.style-cards-section .style-card-image img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  aspect-ratio: 1 / 1 !important;

  object-fit: cover !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 1.2rem !important;
}

/* =========================================
   STYLE CARD - TITLE + DESCRIPTION OVER IMAGE
   ========================================= */

/* TITLE */
/* =========================================
   STYLE CARD - CONTENT OVER IMAGE
   ========================================= */

/* =========================================
   STYLE CARD - CONTENT
   ========================================= */

.style-cards-section .style-card-content {
  position: absolute !important;

  left: 2.2rem !important;
  right: 2.2rem !important;

  /* KHÔNG neo từ bottom nữa */
  bottom: auto !important;

  /* Neo cùng một vị trí từ trên */
  top: 60% !important;

  width: auto !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;

  z-index: 20 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/* =========================================
   TITLE
   ========================================= */

.style-cards-section .style-card-title {
  position: static !important;

  width: 100% !important;

  /* Title ngắn vẫn chiếm cùng vùng */
  min-height: 4rem !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

.style-cards-section .style-card-title p {
  margin: 0 !important;
}

/* =========================================
   DESCRIPTION
   ========================================= */

.style-cards-section .style-card-description {
  position: static !important;

  width: 100% !important;

  /* Nội dung dài tự tăng chiều cao */
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .style-cards-section {
    padding: 0 3rem !important;
  }

  .style-cards-section .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    column-gap: 0 !important;
    row-gap: 1.5rem !important;
  }

  /* 1 CARD / HÀNG */
  .style-cards-section .style-card {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  /* CONTENT */
  .style-cards-section .style-card-content {
    left: 2.5rem !important;
    right: 2.5rem !important;

    top: 60% !important;
    bottom: auto !important;

    height: auto !important;
  }

  /* Không cần ép title cao bằng nhau nữa */
  .style-cards-section .style-card-title {
    min-height: 0 !important;
    height: auto !important;
  }

  .style-cards-section .style-card-description {
    height: auto !important;
  }
}

@media (max-width: 480px) {

  .style-cards-section .row {
    flex-direction: column !important;

    column-gap: 0 !important;
    row-gap: 1.5rem !important;
  }

  /* 1 CARD / HÀNG */
  .style-cards-section .style-card {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  .style-cards-section .style-card-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* CONTENT */
  .style-cards-section .style-card-content {
    left: 1.8rem !important;
    right: 1.8rem !important;

    top: 60% !important;
    bottom: auto !important;

    height: auto !important;
  }

  .style-cards-section .style-card-title {
    min-height: 0 !important;
  }
}
/* =========================================
   INNER STYLING - 4 KEY POINTS
   ========================================= */
/* CỘT TRÁI */
.inner-styling-points-section .inner-styling-intro {
  display: flex !important;
  align-items: stretch !important;

  padding: 0 !important;
  box-sizing: border-box !important;
}

/* COL-INNER */
.inner-styling-points-section .inner-styling-intro > .col-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: center !important; /* giữa theo chiều dọc */
  align-items: center !important; /* giữa theo chiều ngang */
  box-sizing: border-box !important;
}

/* TEXT BÊN TRONG */
.inner-styling-points-section .inner-styling-intro .text {
  width: 100% !important;
  margin: 0 !important;
}

.inner-styling-points-section .inner-styling-points .point-1,
.inner-styling-points-section .inner-styling-points .point-2,
.inner-styling-points-section .inner-styling-points .point-3,
.inner-styling-points-section .inner-styling-points .point-4 {
  position: relative !important;

  width: 100% !important;

  display: grid !important;

  grid-template-columns: 4.8rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;

  column-gap: 2rem !important;
  row-gap: 0.8rem !important;

  margin: 0 !important;

  /* khoảng cách từ border-left tới nội dung */
  padding: 2rem 0 1rem 3rem !important;

  box-sizing: border-box !important;

  /* đường dọc bên trái của từng Stack */
  border-left: 1px solid #b8b8b8 !important;

  /* đường ngang dưới mỗi Stack */
  border-bottom: 1px solid #d0d0d0 !important;

  /* Flatsome Stack có gap mặc định -> tắt */
  --stack-gap: 0 !important;
}

/* POINT CUỐI */
.inner-styling-points-section .inner-styling-points .point-4 {
  border-bottom: none !important;
}

/* NUMBER */
.inner-styling-points-section .inner-styling-points .point-number {
  grid-column: 1 !important;
  grid-row: 1 !important;

  align-self: stretch !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: left !important;
}

.inner-styling-points-section .point-number p {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  font-size: inherit !important;
  line-height: 1 !important;

  color: inherit !important;
}

/* TITLE */
.inner-styling-points-section .inner-styling-points .point-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.inner-styling-points-section .point-title * {
  padding: 0 !important;
}

/* DESCRIPTION */
.inner-styling-points-section .inner-styling-points .point-description {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

.inner-styling-points-section .point-description * {
  margin: 0 0 1rem !important;
  padding: 0 !important;
}

.inner-styling-points-section .point-description *:last-of-type {
  margin-bottom: 0 !important;
}

.inner-styling-points-section .point-4 .point-description {
  padding-bottom: 1.5rem !important;
}

@media (max-width: 480px) {
  /* SECTION */
  .inner-styling-points-section {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 1.5rem !important;

    box-sizing: border-box !important;
  }

  /* ROW → 1 CỘT */
  .inner-styling-points-section .row {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
  }

  .inner-styling-points-section .inner-styling-intro {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;

    display: flex !important;

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

    box-sizing: border-box !important;
  }

  .inner-styling-points-section .inner-styling-intro .col-inner {
    width: 100% !important;

    display: flex !important;

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

    text-align: center !important;
  }

  .inner-styling-points-section .inner-styling-points {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;

    box-sizing: border-box !important;
  }

  .inner-styling-points-section .inner-styling-points::before {
    display: none !important;
  }

.inner-styling-points-section .inner-styling-points .point-1,
.inner-styling-points-section .inner-styling-points .point-2,
.inner-styling-points-section .inner-styling-points .point-3,
.inner-styling-points-section .inner-styling-points .point-4 {
    width: 100% !important;

    grid-template-columns: 3rem minmax(0, 1fr) !important;

    column-gap: 1.4rem !important;
    row-gap: 0.7rem !important;

    margin: 0 !important;
    padding: 0 0 1.5rem !important;

    border-left: none !important;
    border-bottom: none !important;

    box-sizing: border-box !important;
}

/* Chỉ Point 1 có padding phía trên */
.inner-styling-points-section .inner-styling-points .point-1 {
    padding-top: 1.5rem !important;
}

  /* DESCRIPTION MOBILE */
  .inner-styling-points-section .point-description * {
    margin: 0 !important;
  }

  .inner-styling-points-section .inner-styling-points .point-4 {
    border-bottom: none !important;
  }

  .inner-styling-points-section .point-4 .point-description {
    padding-bottom: 0rem !important;
  }
}