/**
 * Thủy Bích Vĩnh Long — Scoped Content Table
 * File: css/tb-content-table.css
 *
 * Owner:
 * - Tables inside blog/article/content body only.
 * - Replacement for unsafe global `table { ... }` Custom CSS block.
 *
 * Not owner:
 * - WooCommerce variation tables.
 * - Product listing/product card/PDP layout tables.
 * - Header, footer, newsletter, shop filters, checkout/cart tables.
 *
 * Phase 12D rule:
 * - This file is safe only when the old global table block is removed or disabled.
 */

/* 00. Optional wrapper for manually inserted content tables */
.tb-content-table {
	width: 100%;
	max-width: 100%;
	margin: 24px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tb-content-table table {
	margin: 0;
}

/* 01. Blog/article content tables */
:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	background: var(--tb-bg, #fff);
	border: 1px solid var(--tb-line-soft, #e5e7eb);
	color: var(--tb-text, #1E2320);
	font-family: var(--tb-font, "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 15px;
	line-height: 1.72;
	margin: 24px 0;
}

:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table thead tr.table-title th {
	padding: 18px 20px;
	background: var(--tb-text-strong, #080C0A);
	border: 1px solid var(--tb-text-strong, #080C0A);
	color: var(--tb-on-primary, #fff);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .02em;
}

:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table thead tr:not(.table-title) th {
	padding: 15px 18px;
	background: var(--tb-bg, #fff);
	border: 1px solid var(--tb-line-soft, #e5e7eb);
	color: var(--tb-text, #1E2320);
	font-weight: 650;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table tbody td {
	padding: 15px 18px;
	border: 1px solid var(--tb-line-soft, #e5e7eb);
	color: var(--tb-text, #1E2320);
	text-align: center;
	vertical-align: middle;
}

:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table tbody tr:nth-child(even) {
	background: var(--tb-surface, #F7F8F6);
}

:is(
	.single-post .tb-blog-single__content-inner,
	.page .entry-content .tb-content-table,
	.tb-content-table
) table caption {
	caption-side: bottom;
	padding: 12px 8px 0;
	color: var(--tb-muted, #5D655F);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	text-align: center;
}

/* 02. Mobile horizontal scroll, scoped only */
@media (max-width: 768px) {
	:is(
		.single-post .tb-blog-single__content-inner,
		.page .entry-content .tb-content-table,
		.tb-content-table
	) table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 14px;
	}

	:is(
		.single-post .tb-blog-single__content-inner,
		.page .entry-content .tb-content-table,
		.tb-content-table
	) table thead th,
	:is(
		.single-post .tb-blog-single__content-inner,
		.page .entry-content .tb-content-table,
		.tb-content-table
	) table tbody td {
		padding: 14px 16px;
	}

	:is(
		.single-post .tb-blog-single__content-inner,
		.page .entry-content .tb-content-table,
		.tb-content-table
	) table caption {
		white-space: normal;
	}
}