/* Style riêng trang Chuyện Phiên, gom từ các khối <style> inline trong public/view/our-story.html cũ. */
.mission-indicator.active {
        background-color: #F6E7D7 !important;
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
      } 

      .mission-inner{
        margin:auto;
        top: 15% !important;
      }

      /* Mobile-only adjustments for the mission vector image */
      @media (max-width: 640px) {
        .mission-img-mobile {
          /* Increase height by ~50px and a little more scale for mobile */
          height: calc(130% + 70px) !important;
          transform: scaleY(1.4) !important;
        }
        .mission-inner {
          top: -5% !important;
        }
        #missionCarousel {
          top: -17% !important;
        }
      }

#out_story_animation2 {
  font-size: 20px; line-height: 160%; font-weight: 400; width: 503px;
}
      @media screen and (max-width: 450px) {
        #out_story_hero-mobile {
      display: block;
  }
  #out_story_hero {
      display: none;
  }
  #out_story_animation1 {
      font-size: 14px;
  }
  #out_story_animation2 {
      font-size: 14px;
      line-height: 150%;
      font-weight: 400;
      text-align: left;
      width: 80%;
  }
  #out_story_animation3 {
      width: 200px;
      height: 161px;
  }
.relative.py-16.bg-beige .flex.flex-col {
      flex-direction: column;
      align-items: center;
      text-align: center;
  }
  
  .relative.py-16.bg-beige .text-justify {
      margin: 0 !important;
      text-align: center !important;
      max-width: 100% !important;
  }
  
  .relative.py-16.bg-beige .justify-center {
      display: flex;
      justify-content: center;
  }
  
  /* Vision Section Mobile Layout */
  .relative.py-20.bg-beige .mx-auto.px-6.flex.flex-col.items-center {
      align-items: center !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.items-start.mb-12 {
      margin-bottom: 0 !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.items-start .min-w-140px {
      width: 100% !important;
      text-align: center !important;
      flex-shrink: 0 !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.items-start .flex-1 {
      width: 100% !important;
      max-width: 100% !important;
      flex-shrink: 0 !important;
      text-align: center !important;
  }
  
  .relative.py-20.bg-beige .fade-in-element {
      text-align: justify !important;
      font-size: 14px !important;
      width: 100% !important;
      line-height: 160% !important;
  }
  
  /* Hide creative and combine images on mobile */
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-center .flex.flex-col.items-center:first-child {
      display: none !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-center .flex.flex-col.items-center:last-child {
      display: none !important;
  }
  
  
  .relative.py-20.bg-beige .flex.flex-col.items-center span {
      font-size: 14px !important;
      text-align: center !important;
      margin-top: 10px !important;
  }
  
  /* Hide manual.png label on mobile */
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-center .flex.flex-col.items-center:nth-child(2) span {
      display: none !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-between .flex-1:first-child {
      width: 100% !important;
      max-width: 100% !important;
      flex-shrink: 0 !important;
      text-align: center !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-between .flex-1:first-child p {
      text-align: justify !important;
      font-size: 14px !important;
      line-height: 160% !important;
      width: 100% !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-between .flex-1:last-child {
      width: 100% !important;
      max-width: 100% !important;
      flex-shrink: 0 !important;
      text-align: center !important;
  }
  
  .relative.py-20.bg-beige .w-full.flex.flex-row.justify-between .flex-1 img {
      width: 287px !important;
      height: 280px !important;
      object-fit: cover !important;
  }
  
  /* Mission Section Mobile Centering */
  .relative.flex.flex-col.items-center.justify-center {
      min-height: 240px !important;
      padding: 40px 0 !important;
  }
  
  .relative.flex.flex-col.items-center.justify-center .relative.flex.items-center.justify-center {
      max-width: 400px !important;
  }
  
  .relative.flex.flex-col.items-center.justify-center .relative.w-full {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 20px;
  }
  
  .relative.flex.flex-col.items-center.justify-center .text-base.leading-relaxed.text-black {
      text-align: left !important;
      font-size: 14px !important;
  }
  
  .relative.flex.flex-col.items-center.justify-center .absolute.inset-0 {
      padding: 20px 8px 20px 8px !important;
  }
  
  .relative.flex.flex-col.items-center.justify-center #missionCarousel {
      padding-top: 0px !important;
  }
  
  .relative.flex.flex-col.items-center.justify-center .overflow-hidden {
      height: 60px !important;
  }
  
  /* Mission Title Mobile */
  #mission_title_desktop {
      display: none !important;
  }
  #mission_title_mobile {
      display: block !important;
  }
  
  /* Mission Subtitle Mobile */
  #mission_subtitle_desktop {
      display: none;
  }
  #mission_subtitle_mobile {
      display: block;
  }
}