﻿/* Premium and Pro variants for the core Table block. */
.wp-block-table.is-style-premium,
.wp-block-table.is-style-pro {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table.is-style-premium table,
.wp-block-table.is-style-pro table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: #10243a;
	background: #fff;
	font-size: clamp(.875rem, .82rem + .2vw, 1rem);
	line-height: 1.55;
}

.wp-block-table.is-style-premium th,
.wp-block-table.is-style-premium td,
.wp-block-table.is-style-pro th,
.wp-block-table.is-style-pro td {
	padding: clamp(.8rem, 1.5vw, 1.1rem) clamp(.85rem, 2vw, 1.25rem);
	vertical-align: middle;
	overflow-wrap: anywhere;
}

.wp-block-table.is-style-premium figcaption,
.wp-block-table.is-style-pro figcaption {
	padding: .75rem 1rem 0;
	margin: 0;
	color: #607386;
	font-size: .8125rem;
	font-style: normal;
	text-align: left;
}

/* Premium: deep RECO blue, warm accent and elevated card treatment. */
.wp-block-table.is-style-premium {
	border: 1px solid rgba(10, 85, 151, .16);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 18px 46px rgba(6, 57, 99, .13), 0 3px 10px rgba(6, 57, 99, .06);
}

.wp-block-table.is-style-premium::before {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	border-radius: 1rem 1rem 0 0;
	content: "";
	background: linear-gradient(90deg, #f5831f, #ffad5f 38%, #0a5597 100%);
	pointer-events: none;
}

.wp-block-table.is-style-premium thead th {
	padding-top: calc(clamp(.8rem, 1.5vw, 1.1rem) + 4px);
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 2px solid #f5831f;
	color: #fff;
	background: linear-gradient(135deg, #063963, #0a5597);
	font-weight: 700;
	letter-spacing: -.01em;
}

.wp-block-table.is-style-premium thead th:last-child {
	border-right: 0;
}

.wp-block-table.is-style-premium tbody td {
	border: 0;
	border-right: 1px solid #e3ebf2;
	border-bottom: 1px solid #e3ebf2;
	background: transparent;
}

.wp-block-table.is-style-premium tbody td:last-child {
	border-right: 0;
}

.wp-block-table.is-style-premium tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-premium tbody tr:nth-child(even) {
	background: #f4f8fb;
}

.wp-block-table.is-style-premium tbody tr:hover {
	background: #eaf3f9;
}

.wp-block-table.is-style-premium tfoot td {
	border: 0;
	border-top: 2px solid #b9ccdc;
	color: #063963;
	background: #edf4f8;
	font-weight: 700;
}

/* Pro: crisp corporate grid with restrained hierarchy. */
.wp-block-table.is-style-pro {
	border: 1px solid #cbd9e5;
	border-radius: .75rem;
	background: #fff;
	box-shadow: 0 8px 24px rgba(16, 36, 58, .08);
}

.wp-block-table.is-style-pro thead th {
	border: 0;
	border-right: 1px solid #c8dceb;
	border-bottom: 2px solid #0a5597;
	color: #063963;
	background: linear-gradient(180deg, #f3f8fc, #e5f0f7);
	font-weight: 700;
}

.wp-block-table.is-style-pro thead th:first-child {
	box-shadow: inset 4px 0 0 #f5831f;
}

.wp-block-table.is-style-pro thead th:last-child {
	border-right: 0;
}

.wp-block-table.is-style-pro tbody td {
	border: 0;
	border-right: 1px solid #dbe5ee;
	border-bottom: 1px solid #dbe5ee;
}

.wp-block-table.is-style-pro tbody td:last-child {
	border-right: 0;
}

.wp-block-table.is-style-pro tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-pro tbody tr:nth-child(even) td {
	background: #f7f9fb;
}

.wp-block-table.is-style-pro tbody tr:hover td {
	background: #eef5fa;
}

.wp-block-table.is-style-pro tfoot td {
	border: 0;
	border-top: 2px solid #0a5597;
	color: #063963;
	background: #f3f8fc;
	font-weight: 700;
}

@media (max-width: 700px) {
	.wp-block-table.is-style-premium table:has(tr > :nth-child(4)),
	.wp-block-table.is-style-pro table:has(tr > :nth-child(4)) {
		min-width: 640px;
	}

	.wp-block-table.is-style-premium:has(table tr > :nth-child(4)),
	.wp-block-table.is-style-pro:has(table tr > :nth-child(4)) {
		display: block;
		width: 100%;
		padding-bottom: 1.75rem;
		overflow-x: scroll !important;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
		overscroll-behavior-x: contain;
		scrollbar-color: #0a5597 #e6eef4;
		scrollbar-width: thin;
	}

	.wp-block-table.is-style-premium:has(table tr > :nth-child(4))::after,
	.wp-block-table.is-style-pro:has(table tr > :nth-child(4))::after {
		position: absolute;
		bottom: .35rem;
		left: 50%;
		z-index: 2;
		transform: translateX(-50%);
		content: "← Vuốt ngang để xem thêm →";
		color: #406077;
		font-size: .75rem;
		font-style: normal;
		font-weight: 600;
		letter-spacing: .01em;
		pointer-events: none;
		white-space: nowrap;
	}

	.wp-block-table.is-style-premium:has(table tr > :nth-child(4))::-webkit-scrollbar,
	.wp-block-table.is-style-pro:has(table tr > :nth-child(4))::-webkit-scrollbar {
		height: 8px;
	}

	.wp-block-table.is-style-premium:has(table tr > :nth-child(4))::-webkit-scrollbar-track,
	.wp-block-table.is-style-pro:has(table tr > :nth-child(4))::-webkit-scrollbar-track {
		background: #e6eef4;
	}

	.wp-block-table.is-style-premium:has(table tr > :nth-child(4))::-webkit-scrollbar-thumb,
	.wp-block-table.is-style-pro:has(table tr > :nth-child(4))::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: #0a5597;
	}
.wp-block-table.is-style-premium th,
	.wp-block-table.is-style-premium td,
	.wp-block-table.is-style-pro th,
	.wp-block-table.is-style-pro td {
		padding: .75rem .8rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-table.is-style-premium tbody tr,
	.wp-block-table.is-style-pro tbody td {
		transition: background-color 160ms ease;
	}
}
