/* Style riêng trang our-touchpoints, gom từ các khối <style> inline trong public/view/our-touchpoints.html cũ. */
.active {
        font-weight: 600;
    }
    /* Indicator dots styling */
    .tab-indicator {
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        background-color: transparent;
        border: 2px solid #000;
        transition: background-color 0.3s ease;
    }

    .tab-indicator.active {
        background-color: #000;
    }

    .tab-indicator:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Add active state background for tab-link */
    .tab-link.active {
        background-image: url('/images/our-touchpoints/border.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Smooth hover effect */
    .tab-link {
        transition: all 0.2s ease;
        white-space: nowrap; /* Prevent wrap */
        cursor: pointer;
    }
    .tab-link:hover {
        color: #333;
        transform: scale(1.02);
    }
    
    /* Smooth transitions for tab content */
    .tab-pane {
        transition: opacity 0.2s ease, transform 0.2s ease;
        opacity: 1;
        transform: translateY(0);
    }
    
    .tab-pane.hidden {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        position: absolute;
        visibility: hidden;
    }
    
    /* Optimize for mobile tab switching */
    @media (max-width: 430px) {
        .tab-pane {
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        
        .tab-link {
            transition: all 0.15s ease;
        }
    }

@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #animation2 {
    width: 450px; height: 219px; font-size: 20px; line-height: 160%; font-weight: 400; text-align: justify; margin-top: 2rem;
  }
  #luanPhien {
    width: 583px; height: 319px; font-size: 20px; line-height: 160%; font-weight: 400; text-align: justify; margin-top: 2rem;
  }
  #vector_section_text {
    color: #F6E7D7; font-size: 20px; font-weight: 600; line-height: 160%; letter-spacing: 0%; text-align: center; width: 860px;
  }
  #poem_picture {
    width: 386px;
    height: 386px;
  }
  .poem-line-right {
    margin-bottom: 0.2rem;
  }
  .poem-line-left {
    margin-bottom: 0.2rem;
  }
  .tabs-container {
      display: flex !important;
      flex-direction: column;
      align-items: center;
    }
  @media (max-width: 430px) {
    #picture-left {
      display: none;
    }
    #animation1 {
      content: url('/images/our-touchpoints/our_touchpoint_mobile.png');
      width: auto;
    }
    #animation2 {
      margin-top: 1rem;
      width: 75%;
      height: 103px;
      font-size: 14px;
    }
    #poem_title {
      display: none;
    }
    #poem_picture {
      display: none;
    }
    .poem_line_right {
      font-size: 14px !important;
      line-height: 150%;
    }
    #poem_picture2_mobile {
      display: block;
    }
    /* --- Tabs Section Mobile Layout --- */
    .tabs-container {
      display: flex !important;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .tabs-nav {
      width: 33.3333%;
      margin-bottom: 0;
    }

    .tabs-nav ul {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .tabs-content-wrapper {
      width: 66.6667%;
    }

    /* Adjust tab link typography */
    .tab-link {
      font-size: 14px !important;
    }

    /* Reduce border background size on active tab */
    .tab-link.active {
      background-size: 90% 90%;
    }

    /* Indicators under content */
    .tabs-indicators {
      position: absolute;
      margin-left: 46%;
      top: 88%;
      justify-content: flex-start;
      order: 2;
    }
    /* Optional: smaller indicator dots */
    .tab-indicator {
      width: 10px;
      height: 10px;
    }

    /* --- Tab Content adjustments --- */
    .tabs-content-wrapper .flex {
      flex-direction: column !important;
    }

    /* Uniform smaller typography inside tab content */
    .tabs-content-wrapper,
    .tabs-content-wrapper * {
      font-size: 14px !important;
    }

    /* Remove previously set large top margins */
    .tabs-content-wrapper [style*="margin-top: 6rem"] {
      margin-top: 0 !important;
    }

    /* Width constraint for p & img inside tab content */
    .tabs-content-wrapper p,
    .tabs-content-wrapper img {
      width: 199px !important;
      max-width: 100%;
      height: auto;
    }

    /* Specific smaller size for title images */
    .tabs-content-wrapper img[src*="_title"],
    img[src*="_title"] {
      width: 100px !important;
    }
    #luanPhien {
      width: 75%; font-size: 14px; line-height: 150%;
    }
    #animation3 {
      display: none;
    }
    /* Vector section image cropping */
    img[src*="vector_section"] {
      width: 100%;
      height: 178px;
      object-fit: cover;
    }
    #vector_section_text {
      width: 450px;
      font-size: 12px !important;
      line-height: 150% !important;
      font-weight: 600;
    }
  }