.research-story-section {
    background-color: #FFF9F9; /* 與上一組 Section 保持一致的淡粉色背景 */
    padding: 60px 0;
    overflow: hidden;
}

/* 研發故事 標籤裝飾線 */
.research-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.research-label-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #E80C7B, #B4E800);
    display: inline-block;
}

.research-label-text {
    color: #E80C7B;
    font-weight: bold;
    letter-spacing: 2px;
}

/* 主標題 */
.research-main-title {
    font-size: 55px;
    color: #CD7E3B; /* 淺橙粉色 */
    line-height: 75px;
    font-weight: 300;
    letter-spacing: 10px;
}

.research-main-title .highlight-title {
    font-weight: bold;
}

/* 研發簡述 裝飾框 */
.research-summary-box {
    display: inline-block;
    border-left: 5px solid #CD7E3B; /* 橙粉色裝飾線 */
    border-radius: 10px;
    padding: 25px 30px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(232, 12, 123, 0.05);
    max-width: 540px;
}

.research-summary-box p {
    margin-bottom: 0;
    font-size: 16px;
    color: #666666;
    line-height: 28px;
}

/* 右側圖片與裝飾背景 */
.research-image-wrapper {
    position: relative;
    text-align: center;
}

/* 背景裝飾：模仿設計稿中的燒瓶線條 */
.research-decoration-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border: 1px solid #FFDADA; /* 極細粉色裝飾線 */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* 不規則形狀感 */
    z-index: 1;
}

.research-hero-img {
    position: relative;
    z-index: 2;
    max-width: 60%;
    height: auto;
}

/* 桌面版寬度優化 */
@media (min-width: 992px) {
   
}

/* --- 手機版適配 (不影響桌面版) --- */
@media (max-width: 991px) {
    .research-story-section {
        padding: 40px 0;
    }

    /* 標籤置中 */
    .research-header {
        margin-bottom: 30px !important;
    }

    /* 主標題縮放與行高 */
    .research-main-title {
        font-size: 28px; /* 根據手機版截圖調細 */
        line-height: 40px;
        letter-spacing: 5px; /* 縮窄字母間距避免爆行 */
        margin-bottom: 30px !important;
        padding: 0 10px;
    }

    .research-main-title br {
        display: block; /* 保持換行 */
    }

    /* 文字框調整 */
    .research-summary-box {
        display: block; /* 手機版佔滿寬度 */
        margin: 0 auto 10px; /* 居中並與下方圖片拉開距離 */
        text-align: left; /* 內部文字維持向左對齊方便閱讀 */
        padding: 20px;
        max-width: 100%;
    }

    .research-summary-box p {
        font-size: 15px;
        line-height: 30px;
    }

    /* 圖片尺寸調整 */
    .research-image-wrapper {
        margin-top: 20px;
    }

    .research-hero-img {
        max-width: 60%; /* 手機版圖片比例加大，參考截圖 */
        margin: 0 auto;
    }

    /* 隱藏裝飾形狀 (如果手機版唔需要) 或調細 */
    .research-decoration-shape {
        width: 300px;
        height: 300px;
    }
}

.research-timeline-section {
    padding: 80px 0;
    background-color: #fff;
    overflow: hidden;
}

.timeline-container {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
}

/* 中間線 */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #CD7E3B;
    transform: translateX(-50%);
    z-index: 1;
}
/* 頂部圓點 */
.timeline-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: #CD7E3B;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* 向上偏移一半，剛好蓋在線頭 */
}



/* 圖片節點 (年份圓圈) */
.timeline-img-node {
    position: absolute;
    left: 100%;
    transform: translateX(-50%);
    width: 110px; /* 根據你 PNG 圖嘅闊度調整 */
    z-index: 10;
}

.timeline-img-node img {
    width: 100%;
    height: auto;
    display: block;
}

.timeline-img-node-right {
    position: absolute;
    left: 0%;
    transform: translateX(-50%);
    width: 110px; /* 根據你 PNG 圖嘅闊度調整 */
    z-index: 10;
}

.timeline-img-node-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* 項目佈局 */
.timeline-item {
    position: relative;
    width: 50%;
}

.timeline-item.left {
    text-align: left;
    margin-left: 0;
}

.timeline-item.right {
    padding-left: 30px;
    text-align: left;
    margin-left: auto;
}

.card-body p {
    font-size: 16px;
    line-height: 32px;
    color:#666666;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.btn-more {
    background-color: #CD7E3B;
    color: #fff !important;
    padding: 12px 60px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    box-shadow: 0 4px 15px rgba(227, 148, 131, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

/* 卡片樣式 */
.timeline-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-top: 5px solid #CD7E3B;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: inline-block;
    width: 100%;
    max-width: 628px;
}

/* 內容排版 */
.card-title {
    color: #CD7E3B;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.timeline-item.left .card-title { justify-content: flex-start; }
.timeline-item.right .card-title { justify-content: flex-start; }

.title-icon {
    width: 27px;
    margin-right: 10px;
}

/* 最後一個項目嘅產品圖排版 */
.card-flex-layout {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left; /* 內部文字統一向左 */
}

.timeline-prod-img {
    width: 80px;
    flex-shrink: 0;
}

.timeline-bottom-dot {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: #CD7E3B;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* --- Timeline 手機版適配 (中間直落版) --- */
@media (max-width: 991px) {
    .research-timeline-section {
        padding: 40px 0;
    }

    /* 1. 容器與線條設定 */
    .timeline-container {
        padding-left: 0; /* 移除之前靠左的設定 */
        overflow: hidden; /* 防止內容溢出 */
    }

    /* 線條保持在正中間 */
    .timeline-line {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-line::before,
    .timeline-bottom-dot {
        left: 50%; /* 確保頭尾圓點都置中 */
        transform: translateX(-50%) !important;
    }
    
  

    /* 2. 項目容器：改為垂直堆疊並置中 */
    .timeline-item {
        width: 100% !important;
        padding: 0 !important; /* 移除左右 padding */
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內部所有元素水平置中 */
    }

    /* 3. 圖片節點 (年份圓圈) */
    /* 無論原本係 left 定 right，手機版全部重置為相對定位並置中 */
    .timeline-img-node, 
    .timeline-img-node-right {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: 30px !important;
        transform: none !important;
        z-index: 3; /* 確保壓住條線 */
    }

    /* 4. 卡片樣式：置中且有最大寬度 */
    .timeline-card {
        width: 95%; /* 留邊 */
        max-width: 400px; /* 唔好太闊 */
        margin: 0 auto; /* 確保卡片本身置中 */
        position: relative;
        z-index: 2; /* 確保壓住條線 */
    }

    /* 標題置中 */
    .card-title {
        font-size: 18px;
    }

    /* 內文維持左對齊 (閱讀感較好) */
    .card-body {
        text-align: left;
    }

    .card-body p {
        font-size: 14px;
        line-height: 26px;
    }

    /* 按鈕置中 */
    .btn-more {
        display: block;
        width: fit-content;
        margin: 15px auto 0;
        text-align: center;
    }

    /* 5. 2014年產品圖排版 */
    .card-flex-layout {
        flex-direction: column;
        text-align:left;
    }

    .card-flex-layout .card-text-content {
        text-align: left; /* 文字內容維持左對齊 */
    }
    
    .timeline-prod-img {
        width: 80px;
    }
}

/* Section 基礎設定 */
.video-gallery-section {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 60px;
    background-color: #fff; /* 保持白色背景 */
}

/* 影片響應式容器 (重要！確保 16:9 比例) */
.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例的關鍵 (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* 影片載入前的黑色背景 */
    border-radius: 10px; /* 如果想影片有圓角可以加，唔要就刪除 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 影片標題樣式 */
.video-caption {
    text-align: center;
    color: #CD7E3B; /* 使用 Timeline 用過的棕橙色 */
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    line-height: 1.5;
}

/* --- 手機版適配 --- */
@media (max-width: 991px) {
    .video-gallery-section {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 40px;
    }

    /* 手機版影片標題稍微調細 */
    .video-caption {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    /* 調整左側(上方)影片與下方影片的距離 */
    .col-lg-6.mb-5 {
        margin-bottom: 20px !important; /* 確保兩條片之間有足夠呼吸位 */
    }
}