/**
 * Tom Luxury — Components
 * -----------------------------------------------------------------------------
 * Lop dung chung cho moi section trang chu. Quy uoc BEM voi tien to tl-.
 * File nay KHONG chua CSS rieng cua bat ky section nao — moi section co file
 * rieng tai assets/css/sections/<ten>.css.
 *
 * Cac bien dieu khien ma section duoc phep dat:
 *   .tl-grid    --tl-cols  --tl-cols-md  --tl-cols-sm  --tl-gap
 *   .tl-ratio   --tl-ratio
 *   .tl-slider  --tl-slide-visible  --tl-slide-visible-md  --tl-slide-visible-sm
 *   .tl-reveal  --tl-delay (JS dat tu data-tl-delay)
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. SECTION
 * ========================================================================== */
.tl-section {
	position: relative;
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
	background-color: var(--color-background);
	color: var(--color-text);
}

.tl-section--surface {
	background-color: var(--color-surface);
}

.tl-section--alt {
	background-color: var(--color-gold-soft);
}

/* Panel toi: dinh nghia lai token o pham vi section de moi thanh phan con
   (nut, link, the, van ban...) tu dong doi mau — khong can viet lai tung rule.
   Khong ghi de --color-primary o day vi chinh no la mau nen cua panel. */
.tl-section--dark {
	--color-text: var(--color-on-dark);
	--color-muted: var(--color-on-dark-muted);
	--color-border: var(--color-border-dark);
	--color-surface: var(--color-surface-dark);
	--color-focus: var(--color-gold-light);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

.tl-section--dark h1,
.tl-section--dark h2,
.tl-section--dark h3,
.tl-section--dark h4,
.tl-section--dark h5,
.tl-section--dark h6,
.tl-section--dark .tl-heading__title,
.tl-section--dark .tl-card__title,
.tl-section--dark .tl-card__title a {
	color: var(--color-on-dark);
}

.tl-section--tight {
	padding-top: calc(var(--space-section) * .55);
	padding-bottom: calc(var(--space-section) * .55);
}

.tl-section--flush-top {
	padding-top: 0;
}

.tl-section--flush-bottom {
	padding-bottom: 0;
}

/* =============================================================================
 * 2. CONTAINER
 * ========================================================================== */
.tl-container {
	width: 100%;
	max-width: var(--container-md);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.tl-container--sm {
	max-width: var(--container-sm);
}

.tl-container--lg {
	max-width: var(--container-lg);
}

.tl-container--full {
	max-width: none;
}

.tl-container--flush {
	padding-inline: 0;
}

/* =============================================================================
 * 3. GRID
 * ========================================================================== */
.tl-grid {
	display: grid;
	gap: var(--tl-gap, var(--grid-gap));
	grid-template-columns: repeat(var(--tl-cols, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {

	.tl-grid {
		grid-template-columns: repeat(var(--tl-cols-md, 2), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {

	.tl-grid {
		grid-template-columns: repeat(var(--tl-cols-sm, 1), minmax(0, 1fr));
	}
}

/* =============================================================================
 * 4. TY LE ANH
 * ========================================================================== */
.tl-ratio {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--tl-ratio, 4 / 3);
	background-color: var(--color-shade);
	border-radius: inherit;
}

.tl-ratio > img,
.tl-ratio > picture,
.tl-ratio > picture > img,
.tl-ratio > video,
.tl-ratio > iframe,
.tl-ratio > a > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.tl-ratio--contain > img,
.tl-ratio--contain > picture > img {
	object-fit: contain;
}

/* =============================================================================
 * 5. TIEU DE SECTION
 * ========================================================================== */
.tl-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-xl);
	text-align: center;
}

.tl-heading__eyebrow {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-luxury-gold);
}

.tl-heading__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	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-heading__desc {
	max-width: 62ch;
	margin: 0;
	font-size: var(--font-size-lg);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

/* --- 5.1 Bien the CAN GIUA (mac dinh): hai ben tieu de co duong ke manh
 *         ket thuc bang hinh thoi vang. Duong ke + hinh thoi ve bang mot
 *         pseudo-element duy nhat qua clip-path, khong can anh hay SVG.
 * ------------------------------------------------------------------------ */
.tl-heading:not(.tl-heading--left) .tl-heading__title {
	display: flex;
	/* width:100% de phan chu khong bi co lai va xuong dong som khi con cho */
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

.tl-heading:not(.tl-heading--left) .tl-heading__title::before,
.tl-heading:not(.tl-heading--left) .tl-heading__title::after {
	content: "";
	flex: 0 1 var(--ornament-line);
	height: var(--diamond);
	background: linear-gradient(to right, transparent, var(--color-luxury-gold) 62%);
	clip-path: polygon(
		0 calc(50% - (var(--rule-w) / 2)),
		calc(100% - var(--diamond)) calc(50% - (var(--rule-w) / 2)),
		calc(100% - (var(--diamond) / 2)) 0,
		100% 50%,
		calc(100% - (var(--diamond) / 2)) 100%,
		calc(100% - var(--diamond)) calc(50% + (var(--rule-w) / 2)),
		0 calc(50% + (var(--rule-w) / 2))
	);
}

.tl-heading:not(.tl-heading--left) .tl-heading__title::after {
	transform: scaleX(-1);
}

/* --- 5.2 Bien the CAN TRAI: gach vang ngan ben duoi tieu de --------------- */
.tl-heading--left {
	position: relative;
	align-items: flex-start;
	text-align: left;
}

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

.tl-heading--left .tl-heading__desc {
	max-width: 58ch;
}

/* --- 5.3 Trang tri doc lap (khi template xuat ra the __ornament rieng) ---- */
.tl-heading__ornament {
	display: block;
	width: clamp(120px, 22vw, 190px);
	height: var(--diamond);
	margin: var(--space-3xs) auto 0;
	background: linear-gradient(to right,
		transparent,
		var(--color-luxury-gold) 28%,
		var(--color-luxury-gold) 72%,
		transparent);
	clip-path: polygon(
		0 calc(50% - (var(--rule-w) / 2)),
		calc(50% - (var(--diamond) / 2)) calc(50% - (var(--rule-w) / 2)),
		50% 0,
		calc(50% + (var(--diamond) / 2)) calc(50% - (var(--rule-w) / 2)),
		100% calc(50% - (var(--rule-w) / 2)),
		100% calc(50% + (var(--rule-w) / 2)),
		calc(50% + (var(--diamond) / 2)) calc(50% + (var(--rule-w) / 2)),
		50% 100%,
		calc(50% - (var(--diamond) / 2)) calc(50% + (var(--rule-w) / 2)),
		0 calc(50% + (var(--rule-w) / 2))
	);
}

.tl-heading--left .tl-heading__ornament {
	width: clamp(80px, 12vw, 140px);
	margin-inline: 0;
}

/* --- 5.4 Link "Xem tat ca" o goc phai tieu de ---------------------------- */
.tl-heading__link {
	margin-top: var(--space-3xs);
}

@media (min-width: 1025px) {

	.tl-heading--left:has(.tl-heading__link) {
		padding-right: clamp(160px, 18vw, 240px);
	}

	.tl-heading--left .tl-heading__link {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 0;
	}
}

/* Man hinh nho: bo duong ke hai ben cho tieu de khong bi bop */
@media (max-width: 640px) {

	.tl-heading {
		margin-bottom: var(--space-lg);
	}

	.tl-heading:not(.tl-heading--left) .tl-heading__title::before,
	.tl-heading:not(.tl-heading--left) .tl-heading__title::after {
		display: none;
	}

	.tl-heading__desc {
		font-size: var(--font-size-base);
	}
}

/* =============================================================================
 * 6. NUT
 * ========================================================================== */
.tl-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: var(--tap-target);
	padding: var(--space-xs) var(--space-lg);
	background-color: transparent;
	border: var(--rule-w) solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.tl-btn:active {
	transform: translateY(1px);
}

.tl-btn > svg {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

.tl-btn[aria-disabled="true"],
.tl-btn:disabled {
	opacity: .5;
	pointer-events: none;
}

.tl-btn--primary {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

.tl-btn--primary:hover,
.tl-btn--primary:focus-visible {
	background-color: var(--color-gold-light);
	border-color: var(--color-gold-light);
	color: var(--color-primary);
	box-shadow: var(--shadow-card);
}

.tl-btn--ghost {
	border-color: var(--color-luxury-gold);
	color: var(--color-text);
}

.tl-btn--ghost:hover,
.tl-btn--ghost:focus-visible {
	background-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

.tl-btn--dark {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-dark);
}

.tl-btn--dark:hover,
.tl-btn--dark:focus-visible {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-gold-light);
}

.tl-btn--block {
	display: flex;
	width: 100%;
}

/* Trong panel toi, nut dark phai doi sang nen sang de con tuong phan */
.tl-section--dark .tl-btn--dark {
	background-color: var(--color-on-dark);
	border-color: var(--color-on-dark);
	color: var(--color-primary);
}

.tl-section--dark .tl-btn--dark:hover,
.tl-section--dark .tl-btn--dark:focus-visible {
	background-color: var(--color-gold-light);
	border-color: var(--color-gold-light);
	color: var(--color-primary);
}

/* =============================================================================
 * 7. LINK CO MUI TEN
 * ========================================================================== */
.tl-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: var(--tap-target);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
	transition: color var(--dur-fast) var(--ease);
}

.tl-link::after {
	content: "";
	flex: none;
	width: 20px;
	height: 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)
	);
	transition: translate var(--dur-fast) var(--ease);
}

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

.tl-link:hover::after,
.tl-link:focus-visible::after {
	translate: 5px 0;
}

.tl-link--gold {
	color: var(--color-luxury-gold);
}

.tl-section--dark .tl-link {
	color: var(--color-gold-light);
}

/* =============================================================================
 * 8. THE (CARD)
 * ========================================================================== */
.tl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.tl-card:hover,
.tl-card:focus-within {
	border-color: var(--color-gold-line);
	box-shadow: var(--shadow-soft);
	transform: translateY(-4px);
}

.tl-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--color-shade);
}

.tl-card__media img {
	transition: transform var(--dur-slow) var(--ease-out);
}

.tl-card:hover .tl-card__media img,
.tl-card:focus-within .tl-card__media img {
	transform: scale(1.05);
}

.tl-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
}

.tl-card__meta {
	order: -1;
	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);
}

.tl-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-primary);
}

.tl-card__title a {
	color: inherit;
}

.tl-card__title a:hover {
	color: var(--color-luxury-gold);
}

.tl-card__excerpt {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

.tl-card__footer {
	margin-top: auto;
	padding-top: var(--space-2xs);
}

/* Bien link phu kin the — van giu duoc mot the <a> that su cho ban phim */
.tl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tl-card--plain {
	background-color: transparent;
	border-color: transparent;
	border-radius: 0;
}

.tl-card--plain:hover,
.tl-card--plain:focus-within {
	box-shadow: none;
	border-color: transparent;
}

.tl-card--plain .tl-card__body {
	padding-inline: 0;
	padding-bottom: 0;
}

/* =============================================================================
 * 9. TRANG THAI RONG (chi hien voi quan tri vien)
 * ========================================================================== */
.tl-empty {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	width: 100%;
	padding: var(--space-md);
	background-color: var(--color-gold-soft);
	border: var(--rule-w) dashed var(--color-luxury-gold);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-secondary);
	text-align: left;
}

.tl-empty::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background-color: var(--color-luxury-gold);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* =============================================================================
 * 10. HIEU UNG XUAT HIEN
 *     Chi an noi dung khi JS da chay (html.tl-js) de trang van doc duoc
 *     neu JS loi hoac bi chan.
 * ========================================================================== */
.tl-js .tl-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
	transition-delay: var(--tl-delay, 0ms);
}

.tl-js .tl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* JS gan .tl-no-motion khi nguoi dung chon giam chuyen dong hoac khi moi truong
   khong ve duoc khung hinh (Chrome headless chup anh QA). Khong duoc de noi dung
   ket lai o trang thai an. */
.tl-js.tl-no-motion .tl-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.tl-js .tl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================================================
 * 11. SLIDER (scroll-snap ngang, khong thu vien ngoai)
 * ========================================================================== */
.tl-slider {
	display: flex;
	gap: var(--tl-gap, var(--grid-gap));
	margin: 0;
	padding: 0 0 var(--space-2xs);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tl-slider::-webkit-scrollbar {
	display: none;
}

.tl-slider > * {
	flex: 0 0 auto;
	min-width: 0;
	scroll-snap-align: start;
	width: calc(
		(100% - (var(--tl-slide-visible, 3) - 1) * var(--tl-gap, var(--grid-gap)))
		/ var(--tl-slide-visible, 3)
	);
}

.tl-slider:focus-visible {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

@media (max-width: 1024px) {

	.tl-slider {
		--tl-slide-visible: var(--tl-slide-visible-md, 2);
	}
}

@media (max-width: 640px) {

	.tl-slider {
		--tl-slide-visible: var(--tl-slide-visible-sm, 1);
	}
}

.tl-slider__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	margin-top: var(--space-md);
	padding: 0;
	list-style: none;
}

.tl-slider__dot {
	position: relative;
	display: block;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tl-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 8px;
	height: 8px;
	background-color: var(--color-shade-strong);
	border-radius: var(--radius-pill);
	transition: width var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}

.tl-slider__dot:hover::before {
	background-color: var(--color-gold-line);
}

.tl-slider__dot.is-active::before {
	width: 26px;
	background-color: var(--color-luxury-gold);
}

/* Nhieu item: thu hep be ngang nut nhung giu chieu cao vung cham */
.tl-slider__dots--many .tl-slider__dot {
	width: 24px;
}

.tl-section--dark .tl-slider__dot::before {
	background-color: var(--color-border-dark);
}

/* =============================================================================
 * 12. NUT LIEN HE NOI + VE DAU TRANG
 * ========================================================================== */
.tl-float {
	position: fixed;
	right: clamp(10px, 2vw, 20px);
	bottom: clamp(14px, 4vh, 28px);
	z-index: var(--z-float);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.tl-float__btn,
.tl-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h);
	height: var(--control-h);
	padding: 0;
	background-color: var(--color-primary);
	border: var(--rule-w) solid var(--color-border-dark);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	color: var(--color-on-dark);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease),
		visibility var(--dur-fast) var(--ease);
}

.tl-float__btn:hover,
.tl-float__btn:focus-visible,
.tl-to-top:hover,
.tl-to-top:focus-visible {
	background-color: var(--color-luxury-gold);
	color: var(--color-primary);
	transform: translateY(-2px);
}

/* span/i la inline: bat buoc dat block cho wrapper icon, neu khong SVG se phinh */
.tl-float__btn > svg,
.tl-float__btn > span,
.tl-float__btn > i,
.tl-to-top > svg,
.tl-to-top > span,
.tl-to-top > i {
	display: block;
	width: 22px;
	height: 22px;
	line-height: 1;
	fill: currentColor;
}

.tl-float__label {
	position: absolute;
	right: calc(100% + 10px);
	white-space: nowrap;
	padding: 6px 12px;
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease),
		visibility var(--dur-fast) var(--ease);
}

.tl-float__btn {
	position: relative;
}

.tl-float__btn:hover .tl-float__label,
.tl-float__btn:focus-visible .tl-float__label {
	opacity: 1;
	visibility: visible;
}

/* Nut ve dau trang dung doc lap */
.tl-to-top {
	position: fixed;
	right: clamp(10px, 2vw, 20px);
	bottom: clamp(14px, 4vh, 28px);
	z-index: var(--z-float);
	opacity: 0;
	visibility: hidden;
	translate: 0 10px;
}

.tl-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

/* Khi nam trong cot nut noi thi khong fixed rieng nua */
.tl-float .tl-to-top {
	position: static;
	right: auto;
	bottom: auto;
	translate: none;
}

@media (max-width: 640px) {

	.tl-float,
	.tl-to-top {
		bottom: clamp(10px, 3vh, 18px);
	}

	.tl-float__btn,
	.tl-to-top {
		width: var(--tap-target);
		height: var(--tap-target);
	}
}

/* =============================================================================
 * 13. HA TANG VIDEO FACADE (tao boi tomluxury.js — section tu trang tri them)
 * ========================================================================== */
.tl-video__frame {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
}

.tl-video__frame > iframe,
.tl-video__frame > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: var(--color-primary);
}

.tl-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	background-color: var(--color-luxury-gold);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}

.tl-video__play:hover,
.tl-video__play:focus-visible {
	background-color: var(--color-gold-light);
	transform: scale(1.06);
}

.tl-video__play > svg,
.tl-video__play > span,
.tl-video__play > i {
	display: block;
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.tl-video__frame.is-playing .tl-video__play,
.tl-video__frame.is-playing .tl-video__poster {
	display: none;
}

/* =============================================================================
 * 14. BOC TRANG CHU — bao dam section chay full-bleed
 * ========================================================================== */
.tl-home,
#content.tl-home {
	margin: 0;
	padding: 0;
	background-color: var(--color-background);
	overflow-x: clip;
}

.tl-home > * {
	max-width: none;
}

.tl-home .tl-section {
	width: 100%;
}

/* =============================================================================
 * 15. TIEN ICH HIEN / AN
 * ========================================================================== */
@media (max-width: 640px) {

	.tl-hide-mobile {
		display: none;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {

	.tl-hide-tablet {
		display: none;
	}
}

@media (min-width: 1025px) {

	.tl-hide-desktop {
		display: none;
	}
}