/* ──────────────────────────────────────────────────────────────────────────
 * post-content-extra.css
 * Supplemental prose styles for the blog DETAIL page (loaded by
 * app/Views/storefront/blog/show.php). Kept OUT of blog.desktop.css /
 * blog.mobile.css on purpose (those files are list-page owned by another task).
 *
 * Base table styling (border / zebra / mobile overflow-x) already lives in
 * blog.{desktop,mobile}.css under .post-content table & .prose-table.
 * Here we only refine the comparison-table header to the brand tint.
 * ────────────────────────────────────────────────────────────────────────── */

/* Brand-red light header for in-content comparison tables */
.post-content table thead th,
.post-content .prose-table > table thead th {
  background: rgba(200, 16, 46, 0.07);              /* --color-primary @ ~7% (light red) */
  color: var(--color-primary, #C8102E);
  border-bottom: 2px solid rgba(200, 16, 46, 0.18);
}

/* First column (Tiêu chí) reads as a row label */
.post-content table tbody td:first-child,
.post-content .prose-table > table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text, #1F2937);
  white-space: normal;
}

/* Comparison tables should wrap text on wide viewports, scroll on narrow.
 * The .prose-table wrapper already provides overflow-x:auto for mobile. */
.post-content .prose-table > table.comparison-table th,
.post-content .prose-table > table.comparison-table td {
  white-space: normal;
}