/*
 * Bảng trong bài viết trên điện thoại.
 *  - Bảng từ 3 cột trở lên, cấu trúc đơn giản: mỗi hàng thành một "thẻ", tiêu đề thẻ là ô đầu, các ô còn lại có nhãn là tên cột
 *    (giống danh sách gạch đầu dòng, không phải vuốt ngang).
 *  - Bảng khác (ô gộp, không có hàng tiêu đề...): cuộn ngang, có dòng nhắc "Vuốt ngang để xem thêm".
 * JS (article-tables.js) gắn nhãn data-label và các lớp mc-stack / mc-scrolls; máy tính để bàn không bị ảnh hưởng.
 */
.mc-table-scroll { position: relative; margin: 0; }
.mc-table-scroll > .mc-table-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E5E7EB; border-radius: 10px; margin: 18px 0 0; }
.mc-table-scroll table { margin: 0 !important; }
/* the wrapper scrolls, not the table itself (the news theme makes tables display:block with their own scrollbar) */
.mc-table-inner table:not(.mc-stack), .mc-table-wrap table:not(.mc-stack), #mc-main .mc-table-inner table:not(.mc-stack), #mc-main .mc-table-wrap table:not(.mc-stack) { display: table !important; width: auto !important; min-width: 100% !important; overflow: visible !important; }
.mc-table-inner table:not(.mc-stack) th, .mc-table-inner table:not(.mc-stack) td, .mc-table-wrap table:not(.mc-stack) th, .mc-table-wrap table:not(.mc-stack) td { min-width: 96px; }
.mc-table-hint { display: none; font-size: 12.5px; color: #6B7280; margin: 6px 2px 0; }

@media (max-width: 768px) {
  .mc-table-scroll.mc-scrolls .mc-table-hint, .mc-table-hint.mc-show { display: block; }
  .mc-table-scroll.mc-scrolls > .mc-table-inner { box-shadow: inset -14px 0 10px -10px rgba(17, 24, 39, .18); }

  .mc-wrap-stack { border: 0 !important; overflow: visible !important; box-shadow: none !important; background: transparent !important; margin: 16px 0 !important; }
  table.mc-stack { min-width: 0 !important; margin: 0 !important; }
  table.mc-stack, table.mc-stack tbody { display: block !important; width: 100% !important; border: 0 !important; background: transparent !important; }
  table.mc-stack thead { display: none !important; }
  table.mc-stack tr { display: block !important; margin: 0 0 12px !important; border: 1px solid #D5E9DC !important; border-radius: 12px !important; overflow: hidden !important; background: #fff !important; }
  table.mc-stack td, table.mc-stack th { display: block !important; width: auto !important; border: 0 !important; border-bottom: 1px solid #F1F5F9 !important; padding: 8px 12px !important; text-align: left !important; background: transparent !important; color: #1F2937 !important; white-space: normal !important; font-size: 14px !important; line-height: 1.55 !important; }
  table.mc-stack td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: #14612f; letter-spacing: .2px; margin-bottom: 2px; }
  table.mc-stack td:first-child, table.mc-stack th:first-child { background: #E3F3E9 !important; color: #14612f !important; font-weight: 700 !important; font-size: 14.5px !important; border-bottom: 1px solid #D5E9DC !important; }
  table.mc-stack td:first-child::before { content: none; }
  table.mc-stack td:last-child { border-bottom: 0 !important; }
  table.mc-stack td[data-label=""]::before { content: none; }
}
