/* ===== Reo Accordion Video v1.7 (Original Button Style) ===== */
.reo-vid{ --gap:32px; --muted:#999; --accent:#000814; --divider:rgba(0,0,0,.08); --arrow:#0a0f1a; --circle-muted:#b5b7bc; --panel:#222; background:transparent }

.reo-vid__inner { display: flex; flex-wrap: wrap; width: 100%; align-items: stretch; gap: 0; }
.reo-vid__content, .reo-vid__media { min-width: 0; box-sizing: border-box; }

.reo-vid.right-accordion .reo-vid__content{order:2}
.reo-vid.right-accordion .reo-vid__media{order:1}

.reo-vid__title{margin:0 0 16px;font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:var(--accent)}
.reo-vid__list{display:flex;flex-direction:column;gap:0;overflow:hidden}
.reo-vid__item + .reo-vid__item{border-top:1px solid var(--divider)}
.reo-vid__item{background:#fff}
.reo-vid__item-header{all:unset;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:18px 20px}
.reo-vid__item-text{font-size:18px;line-height:1.3;color:var(--muted);font-weight:700;transition:color .2s ease}
.reo-vid__item.is-active .reo-vid__item-text{color:var(--accent)}

.reo-vid__chev{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%}

/* Ring Animation */
.reo-vid__circle { display: block; overflow: visible; }
.reo-vid__circle .base { stroke: var(--circle-muted); }
.reo-vid__circle .progress { 
    stroke: currentColor; 
    stroke-linecap: round; 
    opacity: 0; 
    will-change: stroke-dashoffset; 
    transform: rotate(-90deg); 
    transform-origin: 17px 17px; 
}

.reo-vid__item.is-active .reo-vid__chev svg { transform: rotate(180deg); transition: transform 0.3s ease; }

.reo-vid__panel{overflow:hidden;transition:max-height .28s ease}
.reo-vid__panel-inner{padding:0 20px 18px;color:var(--panel)}
.reo-vid__panel-inner p{margin:.5em 0}

/* CTA */
.reo-vid__cta-wrap{padding:14px 12px 4px}
.reo-vid__cta{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  color:#0b5bd3;text-decoration:none;background:#eef4ff;transition:background .2s ease;
}
.reo-vid__cta:hover{ background:#e3ecff }

/* Media Area */
.reo-vid__media { position: relative; }
.reo-vid__media-inner { position: relative; width: 100%; overflow: hidden; background: #000; }
.reo-vid__media-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 0.2s ease; }
.reo-vid__video, .reo-vid__poster, .reo-vid iframe { width: 100%; height: 100%; display: block; object-fit: cover; }

/* === VIDEO BUTTON: FLEXBOX CENTER (From Original File) === */
.reo-vid__video-btn {
    position: absolute;
    z-index: 10;
    
    /* Flexbox Center */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Clear interference */
    padding: 0; margin: 0; border: none; line-height: 1;
    
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    
    /* Default fallback position (Bottom Right) */
    bottom: 20px; right: 20px; left: auto; top: auto;
}

/* === 5 POSITIONS FIX (Hard Reset with !important) === */
.reo-vid-vbtn-pos-top-left .reo-vid__video-btn { 
    top: 20px; left: 20px; bottom: auto !important; right: auto !important; 
}
.reo-vid-vbtn-pos-top-right .reo-vid__video-btn { 
    top: 20px; right: 20px; bottom: auto !important; left: auto !important; 
}
.reo-vid-vbtn-pos-bottom-left .reo-vid__video-btn { 
    bottom: 20px; left: 20px; top: auto !important; right: auto !important; 
}
.reo-vid-vbtn-pos-bottom-right .reo-vid__video-btn { 
    bottom: 20px; right: 20px; top: auto !important; left: auto !important; 
}

/* === Center Position Logic (CALC METHOD - MOST ROBUST) === */
.reo-vid-vbtn-pos-center .reo-vid__video-btn {
    /* Use CSS Variable from PHP, fallback 40px */
    top: calc(50% - (var(--reo-btn-sz, 40px) / 2)) !important;
    left: calc(50% - (var(--reo-btn-sz, 40px) / 2)) !important;
    
    bottom: auto !important;
    right: auto !important;
    transform: none !important; /* No translate needed */
}

/* Hover State */
.reo-vid-vbtn-pos-center .reo-vid__video-btn:hover {
    transform: scale(1.1) !important;
}

/* === ICON STYLE === */
.reo-vid__video-btn svg { display: block; transition: fill 0.2s ease; }

/* Mobile Stack - บังคับให้ Video อยู่ล่างสุดเสมอเมื่อจอเล็กกว่า 767px */
@media (max-width: 767px) {
    /* Explicitly set flex-direction to column to ensure stacking */
    .reo-vid__inner { flex-direction: column; }

    /* Force full width and reset flex basis */
    .reo-vid__content, .reo-vid__media { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    
    /* ENFORCED ORDER: Content Top (1), Media Bottom (2) */
    .reo-vid__content { order: 1 !important; }
    .reo-vid__media { order: 2 !important; margin-top: 24px; display: block; }
}