/* ==========================================================
   CKEDITOR 4 - MODERN TABLE + RESPONSIVE
   Dùng cho CKEditor và website SDGs-DTU
   Website: .description
   ========================================================== */

/* ==========================================================
   1. KHUNG NỘI DUNG
   ========================================================== */

.cke_editable,
.content-detail .box-detail,
.content-detail .description {
    box-sizing: border-box;
    min-width: 0;
}

.content-detail .description {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   2. BẢNG
   Không ép width: 100% để tránh ghi đè kích thước CKEditor
   ========================================================== */

.cke_editable table,
.description table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 18px 0;
    background-color: #ffffff;
    color: #263445;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}

/* Trong vùng soạn thảo */
.cke_editable table {
    max-width: 100%;
}

/* Bảng trên website */
.content-detail .description table {
    max-width: 100%;
}

/* ==========================================================
   3. Ô BẢNG
   ========================================================== */

.cke_editable table th,
.cke_editable table td,
.description table th,
.description table td {
    border: 1px solid #cbd3dc;
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
    background-color: #ffffff;
    color: #263445;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tiêu đề bảng */
.cke_editable table th,
.description table th {
    background-color: #eaf0f7;
    color: #17365d;
    font-weight: 700;
    text-align: center;
}

/* Hàng xen kẽ */
.cke_editable table tr:nth-child(even) td,
.description table tr:nth-child(even) td {
    background-color: #f7f9fc;
}

/* Hover chỉ trên website */
.description table tbody tr:hover td {
    background-color: #edf4fc;
}

/* ==========================================================
   4. NỘI DUNG TRONG Ô
   ========================================================== */

.cke_editable table p,
.description table p {
    margin-top: 0;
    margin-bottom: 8px;
}

    .cke_editable table p:last-child,
    .description table p:last-child {
        margin-bottom: 0;
    }

.cke_editable table ul,
.cke_editable table ol,
.description table ul,
.description table ol {
    margin-top: 4px;
    margin-bottom: 4px;
    padding-left: 22px;
}

.cke_editable table td,
.cke_editable table th {
    cursor: text;
}

/* ==========================================================
   5. HÌNH ẢNH TRONG BẢNG
   ========================================================== */

.cke_editable table img,
.content-detail .description table img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    object-fit: contain;
    vertical-align: middle;
}

/* Hình ảnh ngoài bảng */
.cke_editable img,
.content-detail .description img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Không để hình ảnh làm rộng vượt khung bài viết */
.content-detail .description img {
    max-width: 100%;
}

/* ==========================================================
   6. NỘI DUNG NHÚNG
   ========================================================== */

.content-detail .description iframe,
.content-detail .description video {
    max-width: 100%;
}

/* ==========================================================
   7. RESPONSIVE - DESKTOP LỚN
   ========================================================== */

@media (min-width: 1200px) {
    .content-detail .description {
        max-width: 100%;
    }

        .content-detail .description table {
            max-width: 100%;
        }
}

/* ==========================================================
   8. RESPONSIVE - LAPTOP VÀ TABLET NGANG
   ========================================================== */

@media (min-width: 769px) and (max-width: 1199px) {
    .description table th,
    .description table td {
        padding: 8px 10px;
    }
}

/* ==========================================================
   9. RESPONSIVE - TABLET VÀ ĐIỆN THOẠI
   ========================================================== */

@media (max-width: 768px) {
    .content-detail .description {
        overflow-x: auto;
    }

    .description table th,
    .description table td {
        padding: 6px 8px;
        font-size: 13px;
    }

    .description img {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================
   10. RESPONSIVE - ĐIỆN THOẠI NHỎ
   ========================================================== */

@media (max-width: 480px) {
    .description table th,
    .description table td {
        padding: 5px 6px;
        font-size: 12px;
    }
}

/* ==========================================================
   11. CHỐNG TRÀN NỘI DUNG
   ========================================================== */

.content-detail .box-detail,
.content-detail .description {
    min-width: 0;
    box-sizing: border-box;
}

    .content-detail .description a {
        overflow-wrap: anywhere;
    }

/* Không ép tất cả bảng thành width: 100%.
   Không ép mọi cột có cùng chiều rộng.
   Không đặt table-layout: fixed cho tất cả bảng.
   Các quy tắc này giúp hạn chế phá vỡ kích thước kéo chỉnh. */