/* Style riêng trang our-people, gom từ các khối <style> inline trong public/view/our-people.html cũ. */
@media (max-width: 2400px) {
                    #item3 {
                        top: 56rem;
                    }
                    #item2 {
                        right: -20rem;
                        top: 15rem;
                    }
                }
                @media (max-width: 1900px) {
                    #item3 {
                        top: 45rem;
                    }
                    #item2 {
                        top: 8rem;
                    }
                }
                
                @media (max-width: 1579px) {
                    #item3 {
                        top: 39rem;
                    }
                }
                /* Đồng bộ với breakpoint mobile 767px bên dưới, tránh khoảng
                   701-767px #item3 vẫn dùng toạ độ desktop. Giá trị giữ nguyên. */
                @media (max-width: 767px) {
                    #item3 {
                        left: 14% !important;
                        top: 73% !important;
                    }
                }
                @media (max-width: 430px) {
                    #item3 {
                        left: 13% !important;
                        top: 73% !important;
                    }
                }

@keyframes fadeInFromLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes fadeInFromRight {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
  }

  /* Make the decorative line span the entire viewport width while staying centered.
    Using negative margin centers the 100vw‐wide image without affecting the layout
    of the container, so the absolute-positioned child elements keep their original
    coordinates. */
  .full-bleed-line {
      width: 100vw;            /* always as wide as the browser viewport */
      max-width: none;         /* remove Tailwind's max-width constraint */
      height: auto;
      margin-left: calc(50% - 50vw); /* center the 100vw element inside the narrower container */
  }

  #text-wrapper-video {
    width: 318px;
    margin-top: 40px;
    margin-right: 40px;
    font-size: 20px;
    line-height: 160%;
    color: #000000;
    font-weight: 400;
  }

  /* Optionally scale up a little on very wide screens so the image doesn't look
    too thin; tweak the factor to taste. */
  @media (min-width: 1600px) {
      .full-bleed-line {
          transform: scale(1.1);
      }
  }

  /* 767px = ngay dưới breakpoint `md` của Tailwind (768px), nơi bố cục đổi từ
     mobile sang desktop. Trước đây khối này dừng ở 430px nên khoảng 431-767px
     không có luật mobile nào: các item vẫn giữ kích thước desktop trong khung
     absolute và bị `overflow-x: hidden` cắt mất -> cả phần này biến mất.
     Toàn bộ giá trị bên trong giữ nguyên như thiết kế gốc. */
  @media (max-width: 767px) {
      /* Override decorative line behaviour on mobile to prevent horizontal scroll */
      .full-bleed-line {
          width: 100% !important;
          height: 100% !important;
          margin-left: 0 !important;
      }
      #item1 img,
      #item3 img {
          width: 146px !important;
          height: 94px !important;
      }

      /* people_sub_2.jpg is a portrait photo (922x1152), unlike the landscape
         photos in item1/item3, so it needs its own aspect ratio here instead
         of being squeezed into the shared 146x94 landscape box. */
      #item2 img {
          width: 110px !important;
          height: 137px !important;
          object-fit: cover !important;
      }

      #item1 p {
          width: 146px !important;
          font-size: 10px !important;
          line-height: 150% !important;
      }

      /* Adjust three-row section layout on mobile */
      #end-section > div {
          width: 330px !important;
          margin: 0 auto !important;
          gap: 16px !important; /* smaller gap between rows */
      }
      #end-section .gap-8 {
          flex-direction: column !important;
          align-items: center !important;
          gap: 1.5rem !important;
      }
      #end-section .gap-4 img:nth-child(2) {
          display: none !important; /* hide second image */
      }
      #end-section .gap-4 img {
          width: 330px !important;
          height: 173px !important;
      }
      #end-section .gap-4 img:nth-child(1) {
          display: none !important; /* hide first image */
      }
      #end-section .gap-4 img.mobile-img {
          display: block !important; /* show replacement images */
      }
      #end-section .gap-8 > .flex.gap-4 {
          order: 2; /* ensure image appears after text */
      }
      #end-section .gap-8 > :not(.flex) {
          width: 100% !important;
      }
      #item1 {
          left: 12% !important;
      }
      #item2 {
          right: 15% !important;
          top: 25% !important;
      }
      #item1 > div {
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important; /* smaller space between image and text */
          align-items: flex-end; /* preserve right alignment */
      }
      /* Keep #item2 image before text on mobile */
      #item2 > div {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important; /* smaller space between image and text */
          align-items: flex-end; /* preserve right alignment */
      }
      #item3 > div {
          display: flex !important;
          gap: 8px !important; /* smaller space between image and text */
          align-items: flex-start !important; /* preserve right alignment */
      }
      #item2 p {
          font-size: 10px !important;
          line-height: 150% !important;
          width: 100% !important;
      }
      #item3 p {
          font-size: 10px !important;
          line-height: 150% !important;
          width: 34% !important;
          margin: 0 !important;
          align-items: flex-start !important;
      }
      #line-mobile {
          display: block !important;
          object-fit: cover !important;
      }
      #line-desktop {
          display: none !important;
      }
      /* Reorder video + text section so text appears above video on mobile */
      #end-section > div {
          flex-direction: column !important;
          align-items: center !important;
      }
      #video-wrapper {
          order: 2 !important; /* video below text */
          width: 80% !important;
          height: 196px !important;
      }
      #video-wrapper > #player {
          width: 80% !important;
          height: 196px !important;
      }
      #text-wrapper-video {
        width: 80% !important;
        margin-top: 0px !important;
        margin-right: 0px !important;
        font-size: 14px !important;
        line-height: 160% !important;
        color: #000000 !important;
        font-weight: 400 !important;
      }
      #text-intro {
        width: 268px !important;
        font-size: 14px !important;
        line-height: 150% !important;
        font-weight: 500 !important;
      }
      #behind-title {
        display: none !important;
      }
      #behind-title-mobile {
        display: block !important;
      }
    }

    @media (max-width: 350px) {
        #item1 {
            left: -55% !important;
        }
    }