/* sensitive-content-overlay/assets/css/sensitive-content.css */
/* Version 1.1.2 - Updated for play icon */ 

.sensitive-content-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.reveal-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Loại bỏ các thuộc tính liên quan đến văn bản */
    /* padding: 15px 30px; */
    /* font-size: 18px; */
    /* white-space: nowrap; */
    /* font-weight: bold; */
    /* text-align: center; */

    /* Thêm style cho icon tam giác trong vòng tròn */
    width: 60px; /* Kích thước vòng tròn */
    height: 60px; /* Kích thước vòng tròn */
    border-radius: 50%; /* Làm tròn thành hình tròn */
    background-color: rgba(0, 0, 0, 0.8); /* Nền tối của vòng tròn */
    color: white; /* Màu cho icon bên trong (nếu dùng font icon, không cần với border triangle) */
    border: none;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex; /* Dùng flexbox để căn giữa icon tam giác */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.reveal-button:hover {
    background-color: rgba(0, 0, 0, 0.95);
    transform: translate(-50%, -50%) scale(1.05); /* Tăng nhẹ scale khi hover */
}

/* Style cho icon tam giác bên trong nút */
.reveal-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* Cạnh trên tam giác trong suốt */
    border-bottom: 10px solid transparent; /* Cạnh dưới tam giác trong suốt */
    border-left: 15px solid white; /* Cạnh trái tạo thành tam giác màu trắng */
    margin-left: 3px; /* Dịch sang phải một chút để trông cân đối hơn trong vòng tròn */
}


.sensitive-content-item {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Đảm bảo nội dung vừa vặn mà không bị cắt */
    filter: blur(10px);
    transition: filter 0.5s ease, transform 0.5s ease;
    transform: scale(1.02); /* Phóng to nhẹ để che đi viền mờ */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: filter, transform;
}

.sensitive-content-item.is-revealed {
    filter: none;
    transform: scale(1);
}

.sensitive-video-wrapper video {
    background-color: #000;
    display: block;
}

/* Đảm bảo hình ảnh/video bên trong wrapper không bị các style mặc định của WP ghi đè */
.wp-block-image .sensitive-content-wrapper,
.wp-block-video .sensitive-content-wrapper {
    margin-left: auto;
    margin-right: auto;
    /* Có thể cần reset thêm các thuộc tính khác của block nếu có xung đột */
}