/**
 * Tom Luxury — Trang danh sach san pham (plan §28.2)
 * -----------------------------------------------------------------------------
 * Pham vi: /cua-hang/, danh muc san pham, the san pham.
 * Enqueue tai inc/elements/page-shop-archive.php o wp_enqueue_scripts priority 210
 * (sau tl_enqueue_assets 200) nen thang moi rule cu cua style.css va Flatsome.
 *
 * Moi mau / khoang cach deu tham chieu bien trong tokens.css. Khong viet hex.
 *
 * !important CHI xuat hien o 3 nhom, va ca 3 deu la de ghi de mot rule DA CO
 * !important san trong style.css cu / flatsome.css — khong the thang bang do dac hieu:
 *   1. .medium-text-center{text-align:center!important}  (Flatsome, <=849px)
 *   2. .box-push .box-text{background/color:...!important} (style.css cu, the nau dam)
 *   3. .hide-for-medium{display:none!important}          (Flatsome, cot phai)
 * Ngoai ba nhom nay tuyet doi khong dung !important.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 0. BIEN CUC BO
 * ========================================================================== */
.tl-shop-page {
	--tl-shop-cols: 4;
	--tl-shop-gap: 40px;
	--tl-shop-card-gap: 20px;
	--tl-shop-hero-h: 180px;
}

.tl-shop-page.tl-shop-cols-3 { --tl-shop-cols: 3; }
.tl-shop-page.tl-shop-cols-4 { --tl-shop-cols: 4; }
.tl-shop-page.tl-shop-cols-5 { --tl-shop-cols: 5; }

/* Chan tran ngang o moi breakpoint (plan §10) */
.tl-shop-page #content.page-wrapper {
	overflow-x: clip;
	background-color: var(--color-background);
}

/* =============================================================================
 * 1. BANG DAU TRANG
 * ========================================================================== */
.tl-shop-hero {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	min-height: var(--tl-shop-hero-h);
	margin: 0;
	padding: var(--space-lg) 0;
	background-color: var(--color-primary);
	overflow: hidden;
}

.tl-shop-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	background-color: var(--color-primary);
}

.tl-shop-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Lop phu toi: bao dam chu trang dat AA tren moi anh nen */
.tl-shop-hero__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background:
		linear-gradient(90deg, rgba(16, 13, 11, .82) 0%, rgba(16, 13, 11, .66) 55%, rgba(16, 13, 11, .58) 100%);
}

.tl-shop-hero .page-title-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-lg);
	min-height: 0;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	text-align: left;
}

.tl-shop-hero .flex-col {
	text-align: left;
}

/* Flatsome dat ".medium-text-center{text-align:center!important}" tu <=849px.
   Mau da duyet luon can ve trai, nen day la truong hop bat buoc dung !important. */
@media (max-width: 849px) {

	.tl-shop-hero .page-title-inner .flex-col.medium-text-center {
		text-align: left !important;
	}
}

/* style.css cu co ".category-page-title .shop-page-title{text-align:center}" —
   mau da duyet can ve trai theo container, nen ghi de o do dac hieu cao hon. */
.tl-shop-hero.category-page-title h1.shop-page-title {
	text-align: left;
}

.tl-shop-hero h1.shop-page-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.625rem, 2.6vw, 2.375rem);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-surface);
	overflow-wrap: break-word;
}

/* --- Breadcrumb --------------------------------------------------------- */
/* style.css cu an breadcrumb bang ".category-page-title .woocommerce-breadcrumb{display:none}".
   Mau da duyet yeu cau hien breadcrumb — hien lai o do dac hieu cao hon,
   GIU NGUYEN danh sach muc va duong dan do WooCommerce sinh ra (plan §22). */
.tl-shop-hero.category-page-title .breadcrumbs.woocommerce-breadcrumb {
	display: block;
}

.tl-shop-hero .breadcrumbs,
.tl-shop-hero .woocommerce-breadcrumb {
	margin-top: var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-regular);
	line-height: 1.6;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba(255, 255, 255, .78);
}

.tl-shop-hero .breadcrumbs a,
.tl-shop-hero .woocommerce-breadcrumb a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.tl-shop-hero .breadcrumbs a:hover,
.tl-shop-hero .breadcrumbs a:focus-visible {
	color: var(--color-gold-light);
	text-decoration: underline;
}

.tl-shop-hero .breadcrumbs .divider {
	margin: 0 var(--space-3xs);
	color: rgba(255, 255, 255, .5);
}

/* Muc cuoi cung mau vang */
.tl-shop-hero .tl-crumbs .tl-crumb:last-child {
	color: var(--color-gold-light);
	font-weight: var(--weight-medium);
}

/* Nut loc cua Flatsome chi hien tren may tinh bang tro xuong — giu nguyen chuc nang */
.tl-shop-hero .category-filtering {
	margin-top: var(--space-2xs);
}

.tl-shop-hero .category-filtering .filter-button,
.tl-shop-hero .category-filtering .filter-button strong {
	color: var(--color-surface);
}

.tl-shop-hero .is-large {
	font-size: 1em;
}

/* =============================================================================
 * 2. BO CUC 2 COT
 * ========================================================================== */
.tl-shop-page .tl-shop__row {
	display: grid;
	grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
	gap: var(--tl-shop-gap);
	width: 100%;
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.tl-shop-page .tl-shop__row > .col {
	max-width: none;
	flex-basis: auto;
	width: auto;
	padding: 0;
	margin: 0;
}

.tl-shop-page .tl-shop__main {
	min-width: 0;
}

.tl-shop-page .tl-shop__aside {
	min-width: 0;
}

.tl-shop-page .tl-shop__aside .sidebar-inner {
	padding: 0;
}

.tl-shop-page .tl-shop__main .shop-container {
	margin: 0;
}

/* =============================================================================
 * 3. DAU COT TRAI — H2 + MO TA
 * ========================================================================== */
.tl-shop__intro {
	margin-bottom: var(--space-lg);
}

.tl-shop__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
	overflow-wrap: break-word;
}

.tl-shop__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-top: var(--space-xs);
	background-color: var(--color-luxury-gold);
	border-radius: var(--radius-pill);
}

.tl-shop__desc {
	position: relative;
	max-width: 72ch;
	margin-top: var(--space-sm);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

.tl-shop__desc p,
.tl-shop__desc .term-description p {
	margin: 0 0 var(--space-2xs);
	color: inherit;
}

.tl-shop__desc p:last-child {
	margin-bottom: 0;
}

/* Thu gon 3 dong — JS chi them nut khi noi dung that su dai hon */
.tl-shop__desc .tl-shop__desc-inner {
	overflow: hidden;
}

.tl-shop__desc.is-clamped .tl-shop__desc-inner {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* =============================================================================
 * 4. THANH CONG CU
 * ========================================================================== */
.tl-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-2xs);
	border-bottom: var(--rule-w) solid var(--color-border);
}

.tl-shop__views {
	display: flex;
	flex: none;
	gap: var(--space-3xs);
}

/* Khong co JS thi nut doi che do khong lam gi — an di cho khoi gay hieu nham */
.tl-shop__views {
	display: none;
}

.tl-js .tl-shop__views {
	display: flex;
}

.tl-shop__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-shop__view:hover {
	border-color: var(--color-gold-line);
	color: var(--color-luxury-gold);
}

.tl-shop__view.is-active,
.tl-shop__view[aria-pressed="true"] {
	background-color: var(--color-gold-soft);
	border-color: var(--color-luxury-gold);
	color: var(--color-luxury-gold);
}

.tl-shop__view-icon {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.tl-shop__count {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	line-height: 1.5;
	color: var(--color-muted);
	text-align: center;
}

.tl-shop__sort {
	flex: none;
}

.tl-shop__ordering {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
}

.tl-shop__ordering-label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
	white-space: nowrap;
}

.tl-shop__ordering-select {
	min-height: var(--tap-target);
	max-width: 100%;
	margin: 0;
	padding: 0 var(--space-lg) 0 var(--space-xs);
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

.tl-shop__ordering-select:hover {
	border-color: var(--color-gold-line);
}

.tl-shop__ordering-go {
	min-height: var(--tap-target);
	padding: 0 var(--space-sm);
}

/* =============================================================================
 * 5. LUOI SAN PHAM
 * ========================================================================== */
.tl-shop-page .products.row {
	display: grid;
	grid-template-columns: repeat(var(--tl-shop-cols), minmax(0, 1fr));
	gap: var(--tl-shop-card-gap);
	max-width: none;
	margin: 0;
	padding: 0;
}

.tl-shop-page .products.row::before,
.tl-shop-page .products.row::after {
	content: none;
}

.tl-shop-page .products.row > .col {
	max-width: none;
	flex-basis: auto;
	width: auto;
	margin: 0;
	padding: 0;
}

/* style.css cu ep "height:auto!important" cho .col-inner/.box trong .category-page-row,
   nen khong dung duoc height:100%. Dung chuoi flex de the van cao bang nhau. */
.tl-shop-page .products > .col {
	display: flex;
	flex-direction: column;
}

.tl-shop-page .products .col-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.tl-shop-page .products .product-small.box {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.tl-shop-page .products .product-small.box:hover,
.tl-shop-page .products .product-small.box:focus-within {
	border-color: var(--color-gold-line);
	box-shadow: var(--shadow-card);
}

/* --- Anh 1:1 ------------------------------------------------------------ */
.tl-shop-page .products .box-image {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	background-color: var(--color-shade);
}

/* CHU Y: .box-image co 3 div con (anh + 2 khoi .image-tools rong).
   Chi div dau tien moi duoc ep ty le 1:1, neu khong hai khoi rong kia
   se phinh thanh hai o vuong trong giua the. */
.tl-shop-page .products .box-image > div:first-child {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tl-shop-page .products .box-image > .image-tools {
	position: absolute;
	aspect-ratio: auto;
}

.tl-shop-page .products .box-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.tl-shop-page .products .product-small.box:hover .box-image img {
	transform: scale(1.05);
}

/* Lop phu toi mac dinh cua Flatsome dat qua thuoc tinh style — vo hieu bang opacity */
.tl-shop-page .products .box-image .overlay {
	opacity: 0;
}

/* --- Than the ----------------------------------------------------------- */
.tl-shop-page .products .box-text {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	column-gap: var(--space-2xs);
	max-width: 100%;
	margin: 0;
	padding: var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-regular);
	text-align: left;
	text-transform: none;
	border-radius: 0;
}

/* style.css cu to nen nau dam + chu trang + dau "+" cho ".box-push .box-text"
   bang !important. Mau da duyet la the trang chu toi, nen buoc phai ghi de bang
   !important — day la truong hop bat buoc, khong phai lam dung (plan §25). */
.tl-shop-page .products .box-push .box-text {
	background-color: var(--color-surface) !important;
	color: var(--color-text) !important;
}

.tl-shop-page .products .box-push .box-text a {
	color: var(--color-primary) !important;
}

.tl-shop-page .products .box-push .box-text a:hover,
.tl-shop-page .products .box-push .box-text a:focus-visible {
	color: var(--color-luxury-gold) !important;
}

.tl-shop-page .products .box-push .box-text a.tl-shop-card__go {
	color: var(--color-luxury-gold) !important;
}

.tl-shop-page .products .product-small.box:hover .box-push .box-text a.tl-shop-card__go {
	color: var(--color-surface) !important;
}

.tl-shop-page .products .box-push .box-text .name.product-title {
	color: var(--color-primary) !important;
	margin: 0;
}

.tl-shop-page .products .box-push .box-text::after {
	content: none;
}

/* flex-basis 0 de tieu de dai khong day mui ten xuong dong duoi. */
.tl-shop-page .products .box-text .title-wrapper {
	flex: 1 1 0%;
	order: 1;
	min-width: 0;
}

.tl-shop-page .products .box-text .price-wrapper {
	flex: 1 0 100%;
	order: 3;
	min-width: 0;
	margin-top: var(--space-3xs);
}

.tl-shop-page .products .box-text .price-wrapper:empty {
	display: none;
}

.tl-shop-page .products .product-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-medium);
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

.tl-shop-page .products .product-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--color-primary);
	text-decoration: none;
	overflow-wrap: break-word;
}

.tl-shop-page .products .product-title a:hover,
.tl-shop-page .products .product-title a:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-shop-page .products .box-text .category {
	display: none;
}

.tl-shop-page .products .price {
	font-size: var(--font-size-sm);
}

/* --- Mui ten tron ------------------------------------------------------- */
.tl-shop-card__go {
	position: relative;
	display: block;
	flex: none;
	order: 2;
	align-self: center;
	width: 34px;
	height: 34px;
	border: var(--rule-w) solid var(--color-gold-line);
	border-radius: var(--radius-pill);
	color: var(--color-luxury-gold);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

/* Mo rong vung cham len 44px ma khong lam to vong tron (plan §21) */
.tl-shop-card__go::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: var(--tap-target);
	height: var(--tap-target);
}

/* Dat tuyet doi thay vi dua vao flex de khong bi rule cu cua style.css lam lech. */
.tl-shop-card__go-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 16px;
	height: 8px;
	margin: -4px 0 0 -8px;
	background-color: currentColor;
	clip-path: polygon(
		0 calc(50% - .75px),
		calc(100% - 6px) calc(50% - .75px),
		calc(100% - 6px) 0,
		100% 50%,
		calc(100% - 6px) 100%,
		calc(100% - 6px) calc(50% + .75px),
		0 calc(50% + .75px)
	);
	transition: translate var(--dur-fast) var(--ease);
}

.tl-shop-page .products .product-small.box:hover .tl-shop-card__go {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-surface);
}

.tl-shop-page .products .product-small.box:hover .tl-shop-card__go-icon {
	translate: 3px 0;
}

/* Nhan het hang giu nguyen chuc nang, chi doi tong mau */
.tl-shop-page .products .out-of-stock-label {
	background-color: var(--color-overlay);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* =============================================================================
 * 6. CHE DO DANH SACH
 * ========================================================================== */
.tl-shop-view-list.tl-shop-page .products.row {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
}

.tl-shop-view-list.tl-shop-page .products .product-small.box {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: stretch;
}

.tl-shop-view-list.tl-shop-page .products .box-image > div:first-child {
	aspect-ratio: 4 / 3;
	height: 100%;
}

.tl-shop-view-list.tl-shop-page .products .box-text {
	align-content: center;
	padding: var(--space-md) var(--space-lg);
}

.tl-shop-view-list.tl-shop-page .products .product-title {
	font-size: var(--font-size-base);
}

.tl-shop-view-list.tl-shop-page .products .product-title a {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* =============================================================================
 * 7. PHAN TRANG
 * ========================================================================== */
.tl-shop-page .woocommerce-pagination {
	margin-top: var(--space-xl);
}

.tl-shop-page .woocommerce-pagination > .container,
.tl-shop-page .woocommerce-pagination .container {
	max-width: none;
	padding: 0;
}

.tl-shop-page ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.tl-shop-page ul.page-numbers li {
	margin: 0;
	border: 0;
}

.tl-shop-page ul.page-numbers li > a,
.tl-shop-page ul.page-numbers li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-target);
	min-height: var(--tap-target);
	padding: 0 var(--space-2xs);
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-shop-page ul.page-numbers li > a:hover,
.tl-shop-page ul.page-numbers li > a:focus-visible {
	border-color: var(--color-luxury-gold);
	color: var(--color-luxury-gold);
}

.tl-shop-page ul.page-numbers li > span.current,
.tl-shop-page ul.page-numbers li > a.current {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
}

.tl-shop-page ul.page-numbers li > span.dots {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-muted);
}

/* Mui ten truoc / sau: ve bang clip-path thay cho icon font cua Flatsome
   (icon font khong co ky tu mui ten thang nen phai tu ve). */
.tl-shop-page ul.page-numbers li > a.next i,
.tl-shop-page ul.page-numbers li > a.prev i {
	display: none;
}

.tl-shop-page ul.page-numbers li > a.next,
.tl-shop-page ul.page-numbers li > a.prev {
	position: relative;
}

.tl-shop-page ul.page-numbers li > a.next::after,
.tl-shop-page ul.page-numbers li > a.prev::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 9px;
	margin: -4.5px 0 0 -9px;
	background-color: currentColor;
	clip-path: polygon(
		0 calc(50% - .75px),
		calc(100% - 7px) calc(50% - .75px),
		calc(100% - 7px) 0,
		100% 50%,
		calc(100% - 7px) 100%,
		calc(100% - 7px) calc(50% + .75px),
		0 calc(50% + .75px)
	);
}

.tl-shop-page ul.page-numbers li > a.prev::after {
	transform: scaleX(-1);
}

/* =============================================================================
 * 8. COT PHAI — WIDGET
 * ========================================================================== */
.tl-shop-page .tl-shop__aside .widget,
.tl-swidget {
	display: block;
	margin: 0 0 var(--space-md);
	padding: 20px;
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
}

.tl-shop-page .tl-shop__aside .widget:last-child,
.tl-swidget:last-child {
	margin-bottom: 0;
}

.tl-swidget__title,
.tl-shop-page .tl-shop__aside .widget-title,
.tl-shop-page .tl-shop__aside .widget-title span {
	display: block;
	margin: 0 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
}

.tl-shop-page .tl-shop__aside .widget-title span {
	margin: 0;
}

.tl-shop-page .tl-shop__aside .is-divider {
	display: none;
}

.tl-swidget__title::after,
.tl-shop-page .tl-shop__aside .widget-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: var(--space-2xs);
	background-color: var(--color-luxury-gold);
	border-radius: var(--radius-pill);
}

/* --- Bai viet moi -------------------------------------------------------- */
.tl-swidget__posts {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-swidget__post {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	margin: 0;
	padding: 0 0 var(--space-sm);
	border-bottom: var(--rule-w) solid var(--color-border);
}

.tl-swidget__post:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tl-swidget__thumb {
	display: block;
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background-color: var(--color-shade);
	border-radius: var(--radius-sm);
}

.tl-swidget__thumb-img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.tl-swidget__post-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-3xs);
	min-width: 0;
}

.tl-swidget__post-link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-medium);
	line-height: 1.45;
	color: var(--color-primary);
	text-decoration: none;
	overflow-wrap: break-word;
}

.tl-swidget__post-link:hover,
.tl-swidget__post-link:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-swidget__date {
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* --- Danh muc san pham --------------------------------------------------- */
.tl-swidget__cats,
.tl-shop-page .tl-shop__aside .widget_product_categories ul.product-categories {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-swidget__cat,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item {
	margin: 0;
	padding: 0;
	border-bottom: var(--rule-w) solid var(--color-border);
	list-style: none;
}

.tl-swidget__cat:last-child,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item:last-child {
	border-bottom: 0;
}

.tl-swidget__cat-link,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	min-height: var(--tap-target);
	padding: var(--space-2xs) 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

.tl-swidget__cat-link:hover,
.tl-swidget__cat-link:focus-visible,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item > a:hover {
	color: var(--color-luxury-gold);
}

.tl-swidget__cat-name {
	min-width: 0;
	overflow-wrap: break-word;
}

.tl-swidget__badge,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item .count {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 var(--space-2xs);
	background-color: var(--color-shade);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-medium);
	line-height: 1;
	color: var(--color-muted);
}

/* CHU Y: widget goc cua WooCommerce dat <span class="count"> LA ANH EM cua <a>,
   khong nam ben trong <a>. Vi vay selector phai bat tu <li>. */
.tl-swidget__cat.is-current > .tl-swidget__cat-link,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item.current-cat > a {
	color: var(--color-luxury-gold);
	font-weight: var(--weight-semibold);
}

.tl-swidget__cat.is-current .tl-swidget__badge,
.tl-shop-page .tl-shop__aside .widget_product_categories li.cat-item.current-cat .count {
	background-color: var(--color-luxury-gold);
	color: var(--color-surface);
}

/* Widget khac quan tri vien keo vao van hien binh thuong */
.tl-shop-page .tl-shop__aside .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-shop-page .tl-shop__aside .widget li {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
}

/* =============================================================================
 * 9. VUNG VAN BAN SEO + TRANG THAI RONG
 * ========================================================================== */
.tl-shop__seo {
	max-width: 78ch;
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: var(--rule-w) solid var(--color-border);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-text);
}

.tl-shop__seo-inner {
	overflow: hidden;
}

.tl-shop__seo.is-clamped .tl-shop__seo-inner {
	max-height: 210px;
	-webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.tl-shop__seo h2,
.tl-shop__seo h3,
.tl-shop__seo h4 {
	margin: var(--space-md) 0 var(--space-2xs);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-transform: none;
	color: var(--color-primary);
}

.tl-shop__seo h2 { font-size: var(--font-size-2xl); }
.tl-shop__seo h3 { font-size: var(--font-size-xl); }
.tl-shop__seo h4 { font-size: var(--font-size-lg); }

.tl-shop__seo p,
.tl-shop__seo li {
	margin: 0 0 var(--space-2xs);
	color: inherit;
}

.tl-shop__seo hr {
	display: none;
}

/* Nut xem them / thu gon do JS tao */
.tl-shop__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-height: var(--tap-target);
	margin-top: var(--space-2xs);
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-luxury-gold);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tl-shop__more:hover,
.tl-shop__more:focus-visible {
	color: var(--color-secondary);
}

.tl-shop__blank {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-xl);
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-sm);
}

.tl-shop__blank-text {
	max-width: 60ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

/* =============================================================================
 * 10. RESPONSIVE — plan §10
 * ========================================================================== */
@media (max-width: 1200px) {

	.tl-shop-page {
		--tl-shop-cols: 3;
	}

	.tl-shop-page.tl-shop-cols-3,
	.tl-shop-page.tl-shop-cols-4,
	.tl-shop-page.tl-shop-cols-5 {
		--tl-shop-cols: 3;
	}
}

@media (max-width: 1024px) {

	.tl-shop-page {
		--tl-shop-gap: 32px;
	}

	.tl-shop-page .tl-shop__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Cot phai xuong duoi thay vi bi an.
	   .hide-for-medium cua Flatsome dung !important nen buoc phai doi lai bang !important. */
	.tl-shop-page .tl-shop__row > .tl-shop__aside.hide-for-medium {
		display: block !important;
	}

	.tl-shop-page .tl-shop__aside .is-sticky-column,
	.tl-shop-page .tl-shop__aside .is-sticky-column__inner {
		position: static;
		top: auto;
	}
}

@media (max-width: 900px) {

	.tl-shop-view-list.tl-shop-page .products .product-small.box {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.tl-shop-view-list.tl-shop-page .products .box-text {
		padding: var(--space-sm);
	}
}

@media (max-width: 768px) {

	.tl-shop-page,
	.tl-shop-page.tl-shop-cols-3,
	.tl-shop-page.tl-shop-cols-4,
	.tl-shop-page.tl-shop-cols-5 {
		--tl-shop-cols: 2;
	}

	.tl-shop-page {
		--tl-shop-hero-h: 130px;
		--tl-shop-card-gap: 14px;
	}

	.tl-shop-hero h1.shop-page-title {
		font-size: clamp(1.375rem, 5.4vw, 1.75rem);
	}

	.tl-shop__toolbar {
		justify-content: flex-start;
	}

	.tl-shop__count {
		order: 3;
		flex: 1 1 100%;
		text-align: left;
	}

	.tl-shop__sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tl-shop__ordering {
		justify-content: flex-end;
	}

	.tl-shop__ordering-select {
		min-width: 0;
	}

	.tl-shop-page .tl-shop__row {
		gap: var(--space-xl);
	}

	.tl-shop__blank {
		padding: var(--space-lg);
	}
}

@media (max-width: 560px) {

	.tl-shop-view-list.tl-shop-page .products .product-small.box {
		grid-template-columns: 116px minmax(0, 1fr);
	}
}

@media (max-width: 430px) {

	.tl-shop-page,
	.tl-shop-page.tl-shop-cols-3,
	.tl-shop-page.tl-shop-cols-4,
	.tl-shop-page.tl-shop-cols-5 {
		--tl-shop-cols: 2;
	}

	.tl-shop-page .products .box-text {
		padding: var(--space-xs);
	}

	.tl-shop-card__go {
		width: 30px;
		height: 30px;
	}

	.tl-shop__ordering-label {
		display: none;
	}
}