/* 1. ÉP HÌNH ẢNH VÀO KHUÔN KHỔ */
img, 
.wp-block-image img, 
figure img, 
.wp-block-image {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* 2. SỬA LỖI TRÀN KHUNG VIDEO YOUTUBE (EMBED) TRÊN DI ĐỘNG */
.wp-block-embed-youtube,
.wp-block-embed,
.embed-youtube,
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tự động tính toán lại tỉ lệ khung hình 16:9 cho video không bị bóp méo */
.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Tỉ lệ chuẩn 16:9 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 3. KHÓA CHẶT HIỆN TƯỢNG TRÀN NỀN TOÀN BỘ WEBSITE */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important; /* Triệt tiêu thanh cuộn ngang khó chịu trên điện thoại */
}
/* ĐẶC TRỊ ÉP ẢNH GỐC (FULL SIZE) KHÔNG ĐƯỢC TRÀN KHUNG */

/* 1. Reset bề ngang của thẻ hình ảnh về tỷ lệ màn hình */
img.size-full,
img[class*="wp-image-"],
.wp-block-image img,
article img,
div img {
    width: 100% !important;
    max-width: 100% !important; /* Không cho phép ảnh vượt quá chiều rộng màn hình */
    min-width: 0 !important;      /* Triệt tiêu thuộc tính khóa co nhỏ của Flexbox */
    height: auto !important;     /* Giữ đúng tỷ lệ, không làm méo ảnh gốc */
}

/* 2. Ép tất cả các thẻ bao bọc ảnh phải tự động xuống dòng và co lại */
.wp-block-image, 
figure, 
.entry-content div,
.post-content div {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;    /* Phá vỡ chế độ inline/flexbox ép chiều ngang */
    box-sizing: border-box !important;
}
/* TỰ ĐỘNG ĐỊNH DẠNG CHÚ THÍCH ẢNH (CAPTION) */
figcaption, 
.wp-block-image figcaption, 
.wp-caption-text, 
.gallery-caption {
    font-size: 14px !important;       /* Thu nhỏ chữ lại một chút (văn bản thường là 16px-18px) */
    font-style: italic !important;     /* Biến chữ thành in nghiêng */
    text-align: center !important;     /* Căn chữ chú thích luôn nằm chính giữa */
    color: #666666 !important;        /* Chuyển màu chữ sang xám nhẹ để tinh tế hơn */
    margin-top: 8px !important;        /* Tạo khoảng cách nhỏ vừa phải giữa ảnh và chữ chú thích */
    line-height: 1.4 !important;       /* Giúp khoảng cách dòng của chú thích thoáng hơn */
}
