/* ==========================================================================
   Nền cho 2 trang sản phẩm — bản scope của figma mcp/css/base.css

   Đây là file VIẾT TAY (không sinh tự động như 3 file còn lại) vì base.css gốc
   reset ở cấp toàn cục (`*`, `html`, `body`, `h1`…`h6`, `p`, `ul`, `a`, `img`,
   `button`). Nếu nạp nguyên bản, nó phá giao diện Flatsome + WooCommerce ở mọi
   trang khác. Ở đây mọi rule được bọc trong `.tbtc-page`.

   Bỏ khỏi bản gốc: `.container`, `.section`, `.display-1/2/3`, `.text-desc`,
   `.text-meta` — hai trang sản phẩm không dùng (đã kiểm: 0 lần xuất hiện).
   ========================================================================== */

.tbtc-page,
.tbtc-page *,
.tbtc-page *::before,
.tbtc-page *::after {
	box-sizing: border-box;
}

.tbtc-page {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-regular);
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tbtc-page h1,
.tbtc-page h2,
.tbtc-page h3,
.tbtc-page h4,
.tbtc-page h5,
.tbtc-page h6,
.tbtc-page p,
.tbtc-page figure,
.tbtc-page blockquote,
.tbtc-page dl,
.tbtc-page dd {
	margin: 0;
	padding: 0;
	/* Flatsome đặt text-transform/letter-spacing cho heading — trả lại mặc định
	   để tiêu đề khớp thiết kế. */
	text-transform: none;
	letter-spacing: normal;
}

.tbtc-page ul,
.tbtc-page ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbtc-page li {
	margin: 0;
	list-style: none;
}

.tbtc-page a {
	color: inherit;
	text-decoration: none;
}

.tbtc-page a:hover {
	color: inherit;
}

.tbtc-page img,
.tbtc-page svg,
.tbtc-page video {
	display: block;
	max-width: 100%;
	height: auto;
}

.tbtc-page button,
.tbtc-page input,
.tbtc-page select,
.tbtc-page textarea {
	font: inherit;
	color: inherit;
	/* Flatsome cho mọi field `margin-bottom` + `box-shadow` inset + `height`
	   cố định. Thiết kế không có, và margin-bottom đẩy lệch cả thanh sắp xếp
	   ở trang danh mục. Đo được: select cao 35.09px, margin-bottom 14px,
	   box-shadow inset — cả ba đều của Flatsome. */
	margin-bottom: 0;
	box-shadow: none;
	height: auto;
	min-height: 0;
	min-width: 0;
}

.tbtc-page button {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	/* Flatsome cho button min-height/min-width/line-height riêng. `min-width`
	   là thứ làm chấm chỉ trang của băng chuyền méo: chấm đặt 8×8 nhưng
	   Flatsome ép min-width 24px nên thành 24×8. */
	min-height: 0;
	min-width: 0;
	/* Flatsome còn cho button `margin-right: 1em` (đo được 14px). Mọi cụm
	   button trong thiết kế giãn cách bằng `gap`, nên 14px này chỉ làm dãn
	   sai khoảng — ví dụ dải tab lọc thành 22px thay vì 8px. */
	margin-right: 0;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	border-radius: 0;
}

.tbtc-page button:hover,
.tbtc-page button:focus {
	box-shadow: none;
}

/* Flatsome cho <label> display:block, 12.6px, bold, màu #222 và margin-bottom
   5px. Thiết kế muốn label kế bên ô select, chữ 14px thường, màu --c-text. */
.tbtc-page label {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/* Flatsome có SẴN class `.section-title` cho shortcode của nó:
   `display:flex; flex-flow:row wrap; justify-content:space-between` — trùng tên
   với class tiêu đề section của thiết kế. Hệ quả trên frontend: tiêu đề nhiều
   dòng (mỗi dòng một <span>, ví dụ "Giải pháp tối ưu / cho mọi doanh nghiệp")
   biến thành các flex item xếp hàng rồi rớt dòng, canh TRÁI thay vì căn giữa.
   Ta chỉ cần trả về block — các thuộc tính flex còn lại tự vô hiệu. */
.tbtc-page .section-title {
	display: block;
	width: auto;
}

/* Thẻ danh mục thiếu mô tả — xem inc/elements/categories.php.
   Khối chữ vốn đặt cứng ở top:263px để chừa 2 dòng mô tả; không có mô tả thì
   dồn xuống sát link cho khỏi hở. Nhập "Mô tả" cho danh mục trong WooCommerce
   là thẻ tự trở lại đúng thiết kế. */
.tbtc-page .card-product--no-desc .card-product__text {
	top: auto;
	bottom: 60px;
}

.tbtc-page hr {
	margin: 0;
	border: 0;
}

.tbtc-page :focus-visible {
	outline: 2px solid var(--c-blue);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* Cuộn mượt khi bấm mục lục ở trang chi tiết sản phẩm. Phải đặt trên <html>
   mới có tác dụng với cuộn trang — đây là rule toàn cục duy nhất của file. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.tbtc-page *,
	.tbtc-page *::before,
	.tbtc-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}