/* WRAPPER CHUNG */
.aho-slider-wrapper {
    position: relative; width: 100%; 
    background: #fff; border-radius: 8px; 
    overflow: hidden; font-family: sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 20px 0; border: 1px solid #eee;
}

/* FULLSCREEN BUTTON */
.aho-fullscreen-btn {
    position: absolute; top: 15px; right: 15px; z-index: 100;
    width: 36px; height: 36px;
    background: #fff; border: 1px solid #eee; border-radius: 50%;
    color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.aho-fullscreen-btn:hover { background: #6a5acd; color: #fff; border-color: #6a5acd; }

/* SLIDER */
.aho-slider-container { width: 100%; position: relative; }
.aho-main-slider { width: 100%; height: 500px; background: #fff; }

.aho-main-slider .swiper-slide {
    display: flex; justify-content: center; align-items: center;
    background: #fff; overflow: hidden;
}

/* LAYOUT FIXER - QUAN TRỌNG */
.aho-slide-center {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    padding: 20px; box-sizing: border-box; /* Padding để ảnh không sát mép */
}

/* KHUNG BAO ẢNH (WRAPPER) */
.aho-img-box {
    position: relative;
    display: block;
    /* Giới hạn kích thước wrapper không bao giờ vượt quá cha */
    max-width: 100%; 
    max-height: 100%;
    
    /* Do đã có aspect-ratio từ PHP, width/height sẽ tự tính toán */
    margin: 0 auto;
}

.aho-img-box img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover; /* Lấp đầy khung aspect-ratio đã định sẵn */
    border-radius: 6px;
}

/* HOTSPOTS */
.aho-hotspots-layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10; pointer-events: none;
}

.aho-hotspot {
    position: absolute;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
    
    /* Style: Tím, Tròn, Trong suốt 50% */
    background: rgba(106, 90, 205, 0.5); 
    border: 2px solid #fff; border-radius: 50%;
    color: #fff;
    
    cursor: pointer; pointer-events: auto; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.aho-hotspot:hover {
    background: rgba(106, 90, 205, 1); /* Đậm 100% khi hover */
    transform: translate(-50%, -50%) scale(1.1);
}

.aho-hotspot .dashicons { font-size: 20px; width: 20px; height: 20px; }

/* Playing State */
.aho-hotspot.playing {
    background: rgba(106, 90, 205, 1);
    animation: pulse-purple 1.5s infinite;
}
@keyframes pulse-purple {
    0% { box-shadow: 0 0 0 0 rgba(106, 90, 205, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(106, 90, 205, 0); }
    100% { box-shadow: 0 0 0 0 rgba(106, 90, 205, 0); }
}

/* THUMBS */
.aho-thumbs-slider { height: 90px; background: #f9f9f9; padding: 10px 0; border-top: 1px solid #eee; }
.aho-thumbs-slider .swiper-slide { width: 90px; opacity: 0.6; cursor: pointer; transition: 0.2s; }
.aho-thumbs-slider .swiper-slide-thumb-active { opacity: 1; transform: translateY(-2px); }
.aho-thumb-inner { width: 100%; height: 100%; border-radius: 4px; border: 2px solid transparent; overflow: hidden; }
.aho-thumbs-slider .swiper-slide-thumb-active .aho-thumb-inner { border-color: #6a5acd; }
.aho-thumbs-slider img { width: 100%; height: 100%; object-fit: cover; }

/* NAVIGATION */
.swiper-button-next, .swiper-button-prev {
    width: 40px; height: 40px; background: rgba(0,0,0,0.05); color: #6a5acd; border-radius: 50%;
}
.swiper-button-next:hover, .swiper-button-prev:hover { background: rgba(106, 90, 205, 0.1); }

/* FULLSCREEN FIX */
.aho-slider-wrapper.is-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999; margin: 0; border-radius: 0; border: none;
}
.aho-slider-wrapper.is-fullscreen .aho-main-slider {
    height: calc(100vh - 100px); /* Chừa chỗ cho thumb */
}
/* Trong fullscreen, giới hạn ảnh tối đa nhưng vẫn giữ aspect ratio */
.aho-slider-wrapper.is-fullscreen .aho-img-box {
    max-width: 100vw; 
    max-height: calc(100vh - 140px);
}
.aho-slider-wrapper.is-fullscreen .aho-thumbs-slider { background: #fff; }