/*
 * Nội dung bài viết — yêu cầu của Elite ngày 27/09/2026.
 * Nạp bởi function-inc/function-noi-dung-bai-viet.php, chỉ ở trang bài viết,
 * cho cả site VI và EN. Viết CSS thuần (không qua SCSS) — xem lý do trong file PHP.
 *
 * Neo bằng #primary #post-content-mdetail (2 ID) để thắng luật cũ trong
 * single-post.css, vốn viết dài `.single.single-post … #primary … article table td`
 * (1 ID + 5 class). Hai chỗ luật cũ dùng !important cho padding nên ở đây cũng phải có.
 *
 * Màu lấy đúng bộ màu của theme (single-post.scss):
 *   #b01f8e  $primary-color  — nền hàng tiêu đề
 *   #701659  màu tiêu đề h2/h3 trong bài — chữ các hàng phân nhóm
 *   #fbf3f9 / #f6e4f0  hồng nhạt pha từ #b01f8e — dòng xen kẽ / hàng phân nhóm
 */

/* ---------------------------------------------------------------------------
 * 1. Căn đều hai bên
 * Đoạn văn đã căn đều sẵn; bổ sung cho danh sách (single-post.css ép `ol li`
 * căn trái). Dòng nào người viết tự căn giữa (chú thích ảnh) dùng style ngay
 * trên thẻ nên vẫn giữ nguyên căn giữa.
 * ------------------------------------------------------------------------ */
#primary #post-content-mdetail p,
#primary #post-content-mdetail ul li,
#primary #post-content-mdetail ol li {
  text-align: justify;
}

/* ---------------------------------------------------------------------------
 * 2. Bảng
 * ------------------------------------------------------------------------ */
#primary #post-content-mdetail table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ecd3e5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

#primary #post-content-mdetail table th,
#primary #post-content-mdetail table td {
  padding: 12px 14px !important;
  border: 0;
  border-right: 1px solid #f1e1ec;
  border-bottom: 1px solid #f1e1ec;
  text-align: left;
  vertical-align: middle;
  color: #2a2f38;
  background: transparent;
}

#primary #post-content-mdetail table tr > :last-child {
  border-right: 0;
}

#primary #post-content-mdetail table tr:last-child > th,
#primary #post-content-mdetail table tr:last-child > td {
  border-bottom: 0;
}

/* Trong ô bảng không căn đều: cột hẹp mà căn đều thì chữ giãn lỗ chỗ. */
#primary #post-content-mdetail table p,
#primary #post-content-mdetail table li {
  margin-bottom: 0;
  text-align: inherit;
}

#primary #post-content-mdetail table p + p {
  margin-top: 8px;
}

/* Dòng xen kẽ. */
#primary #post-content-mdetail table tbody tr:nth-child(even) > td,
#primary #post-content-mdetail table tbody tr:nth-child(even) > th {
  background: #fbf3f9;
}

/* Hàng tiêu đề: <thead>/<th> nếu bài có; phần lớn bài soạn bằng trình soạn thảo
 * không có <thead> mà dùng hàng đầu tiên làm tiêu đề — coi hàng đầu là tiêu đề. */
#primary #post-content-mdetail table thead th,
#primary #post-content-mdetail table thead td,
#primary #post-content-mdetail table:not(:has(thead)) > tbody > tr:first-child > td,
#primary #post-content-mdetail table:not(:has(thead)) > tbody > tr:first-child > th {
  background: #b01f8e;
  color: #fff;
  font-family: "SVN Poppins Semibold", "SVN Poppins Bold", sans-serif;
  font-weight: 600;
  text-align: center;
  border-right-color: rgba(255, 255, 255, 0.25);
  border-bottom: 0;
}

#primary #post-content-mdetail table thead *,
#primary #post-content-mdetail table:not(:has(thead)) > tbody > tr:first-child > td *,
#primary #post-content-mdetail table:not(:has(thead)) > tbody > tr:first-child > th * {
  color: #fff !important;
}

/* Hàng phân nhóm: một ô trải hết chiều ngang bảng (như "Hạn mức", "Kỳ hạn" trong
 * mẫu khách gửi) — căn giữa, chữ đậm, nền hồng nhạt. */
#primary #post-content-mdetail table tbody tr:not(:first-child) > td[colspan]:only-child {
  background: #f6e4f0;
  color: #701659;
  font-family: "SVN Poppins Semibold", "SVN Poppins Bold", sans-serif;
  font-weight: 600;
  text-align: center;
}

/* Liên kết trong bảng giữ màu thương hiệu. */
#primary #post-content-mdetail table tbody tr:not(:first-child) a {
  color: #b01f8e;
}

/* Điện thoại: chữ nhỏ lại; bảng rộng thì kéo ngang trong khung thay vì tràn
 * trang. Trừ .table-price-implant — bảng đó có bố cục riêng trên điện thoại
 * (hàng .row-style-custom đặt tuyệt đối), đổi display là vỡ. */
@media screen and (max-width: 767px) {
  #primary #post-content-mdetail table {
    font-size: 14px;
  }

  #primary #post-content-mdetail table th,
  #primary #post-content-mdetail table td {
    padding: 8px 10px !important;
  }

  /* Chỉ bảng không có <thead>: có <thead> mà tách thành hai khối thì cột của
   * tiêu đề và thân bảng lệch nhau. */
  #primary #post-content-mdetail table:not(.table-price-implant):not(:has(thead)) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #primary #post-content-mdetail table:not(.table-price-implant):not(:has(thead)) > tbody {
    display: table;
    width: 100%;
  }
}