/* ==========================================================================
   Dải breadcrumb + banner tiêu đề trang — mẫu trang "Page - Container - Center Title"
   inc/chrome/page-header.php · flatsome-child/page-blank-title-center.php

   VIẾT TAY. Cùng hình thức với banner của phần blog (assets/css/pages/blog.css,
   khối `.tbtc-blog .archive-header`) nhưng KHÔNG dùng lại được vì file đó scope
   trong `.tbtc-blog`, còn trang thường không mang class ấy.

   Mọi selector đều bám class riêng `.tbtc-page-header` chứ không để `.archive-header`
   trần — tên đó quá chung, để trần sẽ đụng các khối khác của Flatsome.
   ========================================================================== */

/* ==========================================================================
   Dải breadcrumb — nằm NGAY TRÊN banner
   ========================================================================== */

.tbtc-page-crumbs {
	padding: var(--sp-3) 0;
	background-color: var(--c-blue-50);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--c-navy);
}

/* Bám tokens của site (1312px) chứ không theo tuỳ chọn Container Width của
   Flatsome, để thẳng hàng với banner và các trang khác. +30px là phần padding
   15px mỗi bên của .container Flatsome. */
.tbtc-page-crumbs .container {
	max-width: calc(var(--container-w) + 30px);
}

/* Luôn một dòng: tên trang dài thì cắt bằng "…" chứ không đẩy cao dải. */
.tbtc-page-crumbs .crumbs {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tbtc-page-crumbs a {
	color: var(--c-meta);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.tbtc-page-crumbs a:hover {
	color: var(--c-blue);
}

.tbtc-page-crumbs .brd {
	color: var(--c-desc);
}

.tbtc-page-crumbs .brd svg {
	vertical-align: middle;
	fill: currentColor;
}

.tbtc-page-crumbs .current {
	color: var(--c-navy);
}

/* ==========================================================================
   Banner
   ========================================================================== */

.tbtc-page-header {
	position: relative;
	padding-top: var(--sp-20);
	padding-bottom: var(--sp-20);
	background-size: cover;
	background-position: center;
	text-align: center;
	color: var(--c-white);
}

/* Lớp phủ: ảnh nền do người biên tập chọn có thể sáng, chữ trắng sẽ mất đọc. */
.tbtc-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(111, 46, 125, 0.62) 0%, var(--c-navy-overlay) 100%);
	pointer-events: none;
}

.tbtc-page-header > * {
	position: relative;
	z-index: 1;
}

/* Khai đủ font-size + line-height + color + text-transform: Flatsome đặt cả ba
   cho heading (h1 màu #555, line-height theo TỈ LỆ 1.3 nên ra số lẻ) —
   xem CLAUDE.md mục 12.7. */
.tbtc-page-header h1 {
	max-width: var(--container-w);
	margin: 0 auto;
	padding-inline: var(--sp-5);
	font-size: var(--fs-display-1);
	line-height: var(--lh-display-1);
	font-weight: var(--fw-bold);
	color: var(--c-white);
	text-transform: uppercase;
	letter-spacing: normal;
}

@media (max-width: 767px) {
	.tbtc-page-header {
		padding-top: var(--sp-12);
		padding-bottom: var(--sp-12);
	}

	.tbtc-page-header h1 {
		font-size: var(--fs-display-3);
		line-height: var(--lh-display-3);
	}
}