/* =========================================================
   1. CẤU HÌNH CƠ BẢN (CORE)
   ========================================================= */
.the-document-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    position: relative;
}

    .the-document-body table thead,
    .the-document-body table tbody,
    .the-document-body table tfoot {
        display: table;
        width: 100%;
        min-width: 100%;
    }

    .the-document-body table td,
    .the-document-body table th {
        white-space: normal;
        word-break: break-word;
        min-width: 100px;
        box-sizing: border-box;
    }

    /* =========================================================
   2. SHARED STYLES (GOM NHÓM ::BEFORE VÀ ::AFTER)
   Định nghĩa giao diện chung cho cả hint trên và hint dưới
   ========================================================= */
    .the-document-body table::before,
    .the-document-body table::after {
        content: none;
        display: none;
        width: 100%;
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: #666;
        background: #f9f9f9;
        padding: 10px;
        position: sticky;
        left: 0;
        z-index: 5;
        box-sizing: border-box;
    }

    /* Định vị cụ thể: Before nằm trên, After nằm dưới */
    .the-document-body table::before {
        top: 0;
        border-bottom: 1px solid #eee; /* Đường kẻ ngăn cách với header */
    }

    .the-document-body table::after {
        bottom: 0;
        border-top: 1px solid #eee; /* Đường kẻ ngăn cách với footer */
    }

/* =========================================================
   3. LOGIC KÍCH HOẠT (TRIGGER)
   ========================================================= */

/* --- MOBILE (< 768px) --- */
@media (max-width: 768px) {
    /* Kích hoạt cả Before và After nếu bảng >= 4 cột */
    .the-document-body table:has(td:nth-child(4))::before,
    .the-document-body table:has(th:nth-child(4))::before,
    .the-document-body table:has(td:nth-child(4))::after,
    .the-document-body table:has(th:nth-child(4))::after {
        display: block;
        font-size: 12px;
        padding: 8px;
        content: "← Vuốt ngang để xem đầy đủ nội dung →";
    }
}

@media (min-width: 769px) {
    .the-document-body table::before,
    .the-document-body table::after {
        padding: 4px 10px;
        font-size: 12px;
        line-height: 1.4;
        color: #555;
    }

    /* Kích hoạt cả Before và After nếu bảng >= 8 cột */
    .the-document-body table:has(td:nth-child(8))::before,
    .the-document-body table:has(th:nth-child(8))::before,
    .the-document-body table:has(td:nth-child(8))::after,
    .the-document-body table:has(th:nth-child(8))::after {
        display: block;
        content: "Giữ Shift (⇧) + Lăn chuột (🖱️) để xem hết nội dung";
    }
}

/* =========================================================
   4. IN ẤN (PRINT)
   ========================================================= */
@media print {
    .the-document-body table {
        display: table;
        overflow: visible;
    }

        .the-document-body table::before,
        .the-document-body table::after {
            display: none !important;
        }
}