/* 1. Khung chứa nội dung tổng */
.showTextDetail {
    line-height: 1.6;
}

/* 2. Cấu hình cho thẻ Figure */
.showTextDetail figure.image {
    display: table; /* CKEditor 5 dùng display table để bao quanh ảnh và caption */
    margin: 1em 0;
    clear: both; /* Đảm bảo không bị dính vào các phần float trước đó */
}

/* 3. Xử lý căn trái/phải - CKEditor dùng class này */
.showTextDetail figure.image.image-style-align-left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    clear: none; /* Cho phép chữ chảy bao quanh */
}

.showTextDetail figure.image.image-style-align-right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    clear: none;
}

/* 4. QUAN TRỌNG: Xử lý kích thước ảnh */
/* Loại bỏ width: 100% !important ở thẻ figure bọc ngoài nếu nó không có class image_resized */
.showTextDetail figure.image img {
    display: block;
    height: auto;
    max-width: 100%; /* Đảm bảo không tràn khung hình */
    /* KHÔNG dùng width: 100% !important ở đây vì nó sẽ kéo giãn ảnh nhỏ thành to */
}

/* 5. Giữ đúng kích thước khi người dùng resize trong CKEditor */
/* Khi resize, CKEditor bọc thêm class .image_resized vào figure */
.showTextDetail figure.image.image_resized {
    /* Đảm bảo width của figure tuân thủ theo thuộc tính style="width:..." mà CKEditor tự sinh ra */
    max-width: 100%;
    display: block; 
}

/* Nếu bạn muốn ảnh căn giữa mặc định khi không float */
.showTextDetail figure.image:not(.image-style-align-left):not(.image-style-align-right) {
    margin-left: auto;
    margin-right: auto;
}

/* Clearfix */
.showTextDetail::after {
    content: "";
    display: table;
    clear: both;
}
.grecaptcha-badge { 
    visibility: hidden; 
}

