/** Shopify CDN: Minification failed

Line 674:0 Expected "}" to go with "{"

**/
.story {
  position: relative;
  padding: 8rem 0;
  /* background: var(--background-from); */
  /* overflow: hidden; */
  color: #fff;
  margin-top: 180px;
}
html.is-scroll-locked,
body.is-scroll-locked {
  overflow: hidden;
  height: 100%;
}


.story-section{
  display:flex;
  align-items: center;
}
.story-indicator{
  position: absolute;
  right: 0px; /* chỉnh theo layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'Noto Serif', serif;
  color:rgb(244, 232, 214); /* vàng nhạt */
}

/* Diamond */
.indicator-dot {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.indicator-line {
  width: 1px;
  height: 48px;
  background: currentColor;
  opacity: 0.5;
}

/* Number */
.indicator-number {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.story::before{
      content: "";
    position: absolute;
    /* left: 0; */
    right: 0;
    /* bottom: 0; */
    height: 100%;
    width: 333px;
    translate: 0 50px;
background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity:.5;
    background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/langbac_1_1.png");
}

.story::after{
      content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
    width: 100px;
    translate: 450px;
    transform: scale(-1);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    pointer-events: none;
    z-index: 20;
    opacity: .2;
  /* background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/doan1.png"); */
}

@media(max-width: 768px){
.story {
  margin-top: 0px;
}
.story::before{
content: "";
    position: absolute;
    /* left: 0; */
    right: 0;
    bottom: 0;
    height: 100%;
    width: 333px;
    translate: -25px 200px;
background-repeat: no-repeat;
   background-position: bottom center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity:.5;
    background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/langbac2_1.png");
}

.story::after{
  content: "";
  position: absolute;
  /* left: 0; */
  right: 0;
  bottom: 0;
  height: 100%;
  width: 120px;
  translate: 40px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity:.5;
  background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/line_2_1.png");
}
}

.story-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}


.story-rotate {
 position: absolute;
 width:120%;
 height:80%;
 top:10%;
 translate:-100px;
 overflow:hidden
}
.story-rotate::before{

  content: "";
    position: absolute;
    left: 100px;
    top: 0;
    height: 200px;
    width: 200px;
    /* translate: -100px 70px; */
    transform:scaleX(-1.3);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
    z-index: 100;
    opacity: 1;
  background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/hac2.png");
}

@media(max-width:768px){
.story-indicator{
  display:none;
}
  
.story-rotate {
 position: absolute;
 width:100%;
 height:100%;
 z-index:0;
 translate:-100px;
 overflow:visible
}
  .story-rotate::before{
        content: "";
    position: absolute;
    left: 100px;
    top: 0;
    height: 200px;
    width: 200px;
    translate: 0px -300px;
    transform: scaleX(-1.3);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
    z-index: 100;
    opacity: 1;
  }
}

/* Decorative blobs */
.blob {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  filter: blur(80px);
}

.blob-pink {
  top: 80px;
  left: 40px;
  background: rgba(255, 120, 170, 0.25);
}

.blob-green {
  bottom: 80px;
  right: 40px;
  background: rgba(90, 180, 120, 0.25);
}

/* Header */
.story-header {
  text-align: center;
  margin-bottom: 5rem;
}
/* .story-header::before{
content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 434px;
    width: 100%;
    background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/doan1.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    pointer-events: none;
    z-index: 20;
} */

.story-title {
  font-size: 48px;
  color: var(--vn-golden);
  font-weight: 400;
  margin-bottom: 1rem;
  font-family: 'Noto Serif', serif;
}

.story-desc {
  max-width: 700px;
  margin: 0 auto;
  font-size: 20px;
  opacity: 0.75;
}

/* Scroll section */


.story-image-sticky {
  position: sticky;
  top: 120px;
  width: 40%;
  height: 400px;
}

.story-main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.story-main-image.active {
  opacity: 1;
}

.story-text-list {

    height: 70vh;
  overflow-y: auto;
  padding: 3rem 0;
}
.story-content-2{
  overflow: hidden;
    
  width: 60%;
  position: relative;
}

@media(min-width:768px){
  .story-content-2{
    height: 300px;
  }
}

.story-main-image {
  opacity: 0;
  transform: translateX(-80px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}

.story-main-image.active {
  opacity: 1;
  transform: translateX(0);
}
.story-item-text {
  opacity: 0;
  /* transform: translateX(80px); */
  transition:
    opacity 0.6s ease;
    /* transform 0.6s cubic-bezier(.22,.61,.36,1); */
  will-change:  opacity;
}

.story-item-text.is-active {
  opacity: 1;
  /* transform: translateX(0); */
}



.story-text-list::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}
.story-item-text {
  min-height: 50vh;
}

.story-item-text:last-child {
  min-height: 60vh; /* hoặc unset */
}


.story-item-text {
  opacity: 0.25;
  /* transform: translateY(20px); */
  transition: opacity 0.8s ease, transform 1.8s ease;
  will-change: opacity, transform;
}

.story-item-text.is-active {
  opacity: 1;
  /* transform: translateY(0); */
}



/* Fade edges */
.fade-top,
.fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  z-index: 7;
}

.fade-top {
  /* top: 0; */
  transform:translateY(-1px);
  /* background: linear-gradient(to bottom, var(--background-from), transparent); */
}

.fade-bottom {
  bottom: -1px;
  /* background: linear-gradient(to top, var(--background-from), transparent); */
}

/* Story items */
.story-list {
  display: flex;
  flex-direction: row;
      align-items: center;
  gap: 80px;
}

@media (max-width:720px){
  .story-list{
    flex-direction:column;
  }
}

.story-item {
  position: relative;
  z-index:5;
}

.story-content {
  justify-content:center;
  display: flex;
  align-items: center;
  gap: 3rem;
}




.story-text{
      width: 50%;
}
@media (max-width:720px){
  .story-content {
  flex-direction: column !important;
}

.story-text{
      width: 100%;
}
}
.story-item.reverse .story-content {
  flex-direction: row-reverse;
}

/* Images */
.story-main-image {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

/* Text */
.story-text h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 500;
  font-family: 'Noto Serif', serif;
}

.story-text p {
  font-size: 1.05rem;
  opacity: 0.8;
  line-height: 1.7;
}

/* Floating decorative images */
.decor-img {
  position: absolute;
  width: 240px;
  border-radius: 24px;
  top: -140px;
  opacity: 0.9;
}

@media (max-width:720px){


  .story-content-2{
    overflow:visible;
  }
  .decor-img {
    top: -800px;
      
  }
  .decor-img.right {
      right: -50px;
      transform: scaleX(-1);
    }

  .decor-img.left {
    left: -50px;
  }
}

.decor-img.right {
  right: 0;
  transform: scaleX(-1);
}

.decor-img.left {
  left: 0;
}

.nen::before{
      content: "";
    position: absolute;
    /* right: 0; */
    bottom: -200px;
    height: 100%;
    width: 100px;
    transform: scaleY(1);
    translate: 40px 0px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
  background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/line_2_1.png");
}

.nen{
  /* width: 400px; */
    height: 300px;
    position: absolute;
    /* background-image: url(https://693bbe7a1a982bbbd01a26ee.imgix.net/chua1vot.png); */
    /* background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .1;
    z-index: 2; */
}

@media(min-width:768px){
  .nen2::before{
     content: "";
        position: absolute;
        bottom: 0px;
        left: 400px;
        height: 500px;
        width: 950px;
        transform:  translate(0px, -90px);
        translate: 60px 0px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
        opacity: .5;
  background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/line_2.png");
}

.nen2::after{
     content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 300px;
    width: 300px;
    transform: scaleX(-1);
    transform: translate(10px, 100px);
    translate: 160px 0px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
    z-index: 20;
    opacity: .4;
  background-image: url("https://693bbe7a1a982bbbd01a26ee.imgix.net/thaprua_1_1.png");
}
}

.nen2{
  /* width: 400px; */
    height: 300px;
    position: absolute;
    /* right:-10px;
    top: -50px; */
    /* background-image: url(https://693bbe7a1a982bbbd01a26ee.imgix.net/langbac.png); */
    /* background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .1;
    z-index: 2; */
}

@media (max-width: 768px) {

  /* Layout dọc */
  .story-list {
    flex-direction: column;
    gap: 48px;
  }

  /* BỎ sticky */
  .story-image-sticky {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
  }

  /* Image hiện hết */
  .story-main-image {
    position: relative;
    opacity: 1 !important;
    transform: none;
    height: auto;
    max-height: none;
    margin-bottom: 16px;
  }

  /* BỎ scroll con */
  .story-text-list {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .story-content-2 {
    width: 100%;
  }

  /* Text item không cần giữ khung */
  .story-item-text {
    min-height: auto;
    padding: 24px 0;
    opacity: 1 !important;
    transform: none;
  }

  /* Fade overlay không cần */
  .fade-top,
  .fade-bottom {
    display: none;
  }

  /* Decorative nặng thì tắt */
  .nen,
  .nen2 {
    display: none;
  }
}

@media (max-width: 768px) {

  /* Ẩn cột image sticky */
  .story-image-sticky {
    display: none;
  }

  /* Image clone trong text */
  .story-item-text img {
    display: block;
    max-width: 100%;
    border-radius: 16px;
    /* box-shadow: 0 16px 32px rgba(0,0,0,.25); */
  }

  /* Text luôn hiện */
  .story-item-text {
    opacity: 1 !important;
    transform: none !important;
    min-height: auto;
    padding: 24px;
  }

  /* Bỏ fade */
  .fade-top,
  .fade-bottom {
    display: none;
  }

  .story-item-text h3 {
  text-align: center;       /* hoặc center nếu bạn thích */
  text-wrap: balance;     /* cực quan trọng – chia dòng đẹp */
}

.story-item-text p {
  text-align: justify;
  hyphens: auto;
}