.section-story {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Hiệu ứng ảnh đứng im (Parallax) */
.story-bg {
  position: absolute;
  inset: 0;
  background-color: var(--green-deep);
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* Mặc định: scroll bình thường trên mobile/tablet */
  z-index: 0;
}

/* background-attachment: fixed gần như không được mobile hỗ trợ đúng
   (đặc biệt Safari iOS, và Chrome Android trong nhiều trường hợp) — nhất là
   khi phần tử cha có overflow:hidden + isolation:isolate như .section-story
   đang có. Kết quả hay gặp: ảnh không hiện, chỉ còn lại background-color
   (hoặc tệ hơn, hiện xám/trắng bất thường). Vì vậy CHỈ bật hiệu ứng "đứng im"
   ở desktop, nơi nó chạy ổn định — mobile giữ scroll bình thường. */
@media (min-width: 1024px) {
  .story-bg {
    background-attachment: fixed;
  }
}

/* Mobile/tablet: card chiếm gần hết bề ngang, phần ảnh lộ ra 2 bên/trên dưới
   khá "busy" (nhiều chi tiết) cạnh card trắng sạch -> blur nhẹ cho êm mắt,
   giống hiệu ứng ambient blur hay dùng ở landing page luxury.
   scale(1.1) để che phần rìa bị mờ do filter blur lấy mẫu ra ngoài mép ảnh. */
@media (max-width: 1023px) {
  .story-bg {
    filter: blur(6px);
    transform: scale(1.1);
  }
}

.story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 42, 33, 0.12) 0%,
    rgba(15, 42, 33, 0.22) 100%
  );
  z-index: 1;
}

.story-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: clamp(64px, 10vw, 120px) 16px;
}

/* FIX LAYOUT MOBILE: Tự động co theo màn hình, không bị tràn */
.story-card {
  background: var(--cream);
  border-radius: clamp(20px, 3vw, 24px);
  padding: clamp(28px, 6vw, 56px);
  width: 100%;
  max-width: 600px;
  box-shadow: 0 20px 50px rgba(15, 42, 33, 0.2);
}

/* Các thuộc tính còn lại giữ nguyên... */
.story-icon {
  width: clamp(40px, 5vw, 52px);
  margin-bottom: 24px;
}
.story-icon svg {
  width: 100%;
  display: block;
}
.story-title {
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  color: var(--green-deep);
  margin-bottom: 28px;
}
.story-text p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 20px;
}
.story-cta {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--cream);
  text-decoration: none;
}

@media (min-width: 768px) {
  .story-container {
    justify-content: flex-end;
    padding-right: 5vw;
  }
}