/* Bảng dữ liệu trong nội dung bài viết, bộ sưu tập và trang tĩnh. */

.prose-table{
    position:relative;
    margin:26px 0 32px;
    overflow-x:auto;
    border:1px solid #ecd9bd;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(103,54,14,.07);
    -webkit-overflow-scrolling:touch;
    /* Bóng mờ hai mép chỉ hiện khi bảng thật sự tràn khỏi khung. */
    background-image:
        linear-gradient(to right,#fff 32%,rgba(255,255,255,0)),
        linear-gradient(to left,#fff 32%,rgba(255,255,255,0)),
        radial-gradient(farthest-side at 0 50%,rgba(87,45,20,.16),rgba(87,45,20,0)),
        radial-gradient(farthest-side at 100% 50%,rgba(87,45,20,.16),rgba(87,45,20,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:42px 100%,42px 100%,15px 100%,15px 100%;
    background-attachment:local,local,scroll,scroll;
}
.prose-table:focus-visible{outline:2px solid var(--mmtl-gold,#d69a19);outline-offset:2px}

.prose-table table{
    width:100%;
    min-width:560px;
    margin:0;
    border-collapse:collapse;
    background:transparent;
    font-size:15.5px;
    line-height:1.6;
}

.prose-table th,
.prose-table td{
    padding:13px 16px;
    border-bottom:1px solid #f2e4d0;
    text-align:left;
    vertical-align:top;
}

.prose-table thead th{
    position:sticky;
    top:0;
    z-index:1;
    background:#fdf0da;
    color:#6d3417;
    font-weight:800;
    font-size:14px;
    letter-spacing:.01em;
    white-space:nowrap;
    border-bottom:2px solid #e9d2ac;
}

.prose-table tbody tr:nth-child(even) td{background:#fffaf2}
.prose-table tbody tr:last-child td{border-bottom:0}
.prose-table tbody tr:hover td{background:#fff4e2}

/* Cột đầu là cột nhãn: in đậm hơn để mắt bám được khi đọc ngang. */
.prose-table tbody td:first-child{color:#4c2719;font-weight:650}
.prose-table td strong{color:#48251b}
.prose-table a{color:#a80710;font-weight:700}

.prose-table caption{
    padding:12px 16px;
    color:var(--mmtl-muted,#745f53);
    text-align:left;
    font-size:14px;
    caption-side:bottom;
}

/* Bên trong khung nội dung bài viết đã có nền trắng, giảm bớt đổ bóng. */
.article-prose .prose-table{box-shadow:0 6px 18px rgba(103,54,14,.06)}

@media (max-width:760px){
    .prose-table table{min-width:520px;font-size:15px}
    .prose-table th,
    .prose-table td{padding:11px 13px}
    .prose-table thead th{font-size:13px}
}

@media (max-width:560px){
    .prose-table{margin:20px 0 26px;border-radius:12px}
    .prose-table table{min-width:480px;font-size:14.5px}
    .prose-table th,
    .prose-table td{padding:10px 12px}

    /* Ghim cột nhãn để không mất ngữ cảnh khi cuộn ngang trên điện thoại. */
    .prose-table thead th:first-child,
    .prose-table tbody td:first-child{
        position:sticky;
        left:0;
        z-index:2;
        box-shadow:1px 0 0 #f0dfc9;
    }
    .prose-table thead th:first-child{background:#fdedd6;z-index:3}
    .prose-table tbody tr:nth-child(odd) td:first-child{background:#fff}
    .prose-table tbody tr:nth-child(even) td:first-child{background:#fffaf2}
    .prose-table tbody tr:hover td:first-child{background:#fff4e2}
}