/* ============================================
   RS Tang Video Carousel
   
   autoWidth + gap:50 + CSS-only 尺寸控制
   預設 inner: 412×232（side）
   .is-active inner: 714×397（active）
   所有間距統一 50px（Splide gap）
   ============================================ */

/* Wrapper */
.rs-tang-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: opacity 0.3s ease !important;
}

.rs-tang-wrapper *,
.rs-tang-wrapper *::before,
.rs-tang-wrapper *::after {
    box-sizing: border-box !important;
}

/* Splide */
.rs-tang-wrapper .rs-tang-splide.splide {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rs-tang-wrapper .rs-tang-splide .splide__track {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rs-tang-wrapper .rs-tang-splide .splide__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
}

/* ---- Slide 容器（autoWidth，寬度 = inner 寬度） ---- */
.rs-tang-wrapper .rs-tang-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    /* margin-right 由 Splide gap 控制，不覆蓋 */
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
    overflow: visible !important;
}

/* ---- Slide Inner 預設（side 尺寸） ---- */
.rs-tang-wrapper .rs-tang-slide-inner {
    width: 412px !important;
    height: 232px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #000 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    /* 不加 transition — 尺寸變化由 refresh 瞬間完成 */
    transition: none !important;
}

.rs-tang-wrapper .rs-tang-slide-inner iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ---- Active slide ---- */
.rs-tang-wrapper .rs-tang-slide.is-active .rs-tang-slide-inner {
    width: 714px !important;
    height: 397px !important;
    border-radius: 15px !important;
    box-shadow: 1px 1px 10px #DFCCBF !important;
}

/* ---- 控制區 ---- */
.rs-tang-wrapper .rs-tang-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---- 箭頭 ---- */
.rs-tang-wrapper .rs-tang-arrow {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 64px !important;
    height: 44px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    background: rgba(18, 17, 39, 0.04) !important;
    color: #121127 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

.rs-tang-wrapper .rs-tang-arrow:hover {
    background: rgba(18, 17, 39, 0.04) !important;
    color: #121127 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.rs-tang-wrapper .rs-tang-arrow:focus {
    background: rgba(18, 17, 39, 0.04) !important;
    color: #121127 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.rs-tang-wrapper .rs-tang-arrow svg {
    width: 22px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.rs-tang-wrapper .rs-tang-arrow:active {
    background: #937C70 !important;
    color: #FFFFFF !important;
}

/* ---- 導航點 ---- */
.rs-tang-wrapper .rs-tang-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rs-tang-wrapper .rs-tang-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #D9D9D9 !important;
    border-radius: 9999px !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.rs-tang-wrapper .rs-tang-dot:hover {
    border: none !important;
    box-shadow: none !important;
}

.rs-tang-wrapper .rs-tang-dot:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.rs-tang-wrapper .rs-tang-dot.is-active {
    width: 15px !important;
    height: 15px !important;
    background: #8A7E7E !important;
}

/* ============================================
   RWD 手機版 ≤ 767px
   ============================================ */
@media (max-width: 767px) {

    .rs-tang-wrapper .rs-tang-slide-inner {
        width: 353px !important;
        height: 253px !important;
        border-radius: 10px !important;
    }

    .rs-tang-wrapper .rs-tang-slide.is-active .rs-tang-slide-inner {
        width: 353px !important;
        height: 253px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }
}