/*
Theme Name: News
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

add_action('wp_head', 'add_custom_table_styles');

function add_custom_table_styles() {
    echo '
    <style>
    /* --- Bắt đầu CSS cho bảng đáp ứng --- */

    /* Container để bọc bảng, giúp cuộn ngang trên màn hình nhỏ */
    .responsive-table-container {
        width: 100%;
        overflow-x: auto; /* Đây là thuộc tính quan trọng nhất! */
        margin: 2em 0;
        -webkit-overflow-scrolling: touch; /* Giúp cuộn mượt hơn trên iOS */
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
    }

    /* CSS chính cho bảng */
    .custom-styled-table {
        width: 100%;
        border-collapse: collapse; /* Gộp các đường viền lại */
        min-width: 600px; /* Đặt chiều rộng tối thiểu để bảng không bị co quá nhỏ */
        font-family: "Inter", sans-serif; /* Sử dụng font chữ hiện đại */
    }

    /* Style cho các ô trong bảng (cả th và td) */
    .custom-styled-table th,
    .custom-styled-table td {
        padding: 14px 18px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
        white-space: nowrap; /* Ngăn không cho chữ bị xuống dòng, giúp cuộn ngang tốt hơn */
    }

    /* Style riêng cho tiêu đề bảng (thead) */
    .custom-styled-table thead th {
        background-color: #f8f9fa; /* Màu nền xám nhạt cho tiêu đề */
        font-weight: 600;
        font-size: 14px;
        color: #333;
        text-transform: uppercase; /* Viết hoa tiêu đề */
        letter-spacing: 0.5px;
        position: sticky; /* Giúp tiêu đề dính lại khi cuộn */
        top: 0;
        z-index: 1;
    }

    /* Style cho các dòng của bảng (tbody) */
    .custom-styled-table tbody td {
        color: #555;
        font-size: 15px;
    }

    /* Hiệu ứng "zebra" - các dòng chẵn lẻ có màu khác nhau để dễ đọc */
    .custom-styled-table tbody tr:nth-child(even) {
        background-color: #fdfdfd;
    }

    /* Hiệu ứng khi di chuột vào một dòng */
    .custom-styled-table tbody tr:hover {
        background-color: #f1f3f5;
        cursor: pointer;
    }

    /* Bỏ đường viền dưới của dòng cuối cùng */
    .custom-styled-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* --- Kết thúc CSS cho bảng đáp ứng --- */
    </style>';
}