/**
 * Tom Luxury — Chan trang (footer)
 * -----------------------------------------------------------------------------
 * Panel toi 5 cot: thuong hieu | lien he | lien ket nhanh | danh muc san pham |
 * fanpage, kem thanh duoi ban quyen + lien ket phap ly.
 *
 * Bo cuc dung flex-wrap thay vi grid co dinh so cot: chan trang phai dung dan
 * voi 1..5 cot vi cot thieu du lieu se bi bo han o phia PHP.
 *
 * Lop goc: .tl-footer
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. KHUNG
 *    Dinh nghia lai token trong pham vi chan trang de moi thanh phan con
 *    (.tl-btn, .tl-link, chu, vien...) tu doi sang he mau nen toi.
 * ========================================================================== */
.tl-footer {
	--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);
	position: relative;
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

.tl-footer__inner {
	padding-top: calc(var(--space-section) * .6);
	padding-bottom: calc(var(--space-section) * .5);
}

/* CHUAN HOA <span>
 * style.css cu co rule "body, p, li, span { font-family:'Lora'; color:#3A3A3A }".
 * base.css chi reset font cho p/li/td/label... — KHONG co span, nen moi <span>
 * ben trong component se bi doi sang serif + chu xam dam (gan nhu vo hinh tren
 * nen toi). Tra span ve ke thua trong pham vi chan trang.
 * Cac rule rieng ben duoi deu co it nhat 2 class de thang do dac hieu (0,1,1). */
.tl-footer span {
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* =============================================================================
 * 2. LUOI COT
 * ========================================================================== */
.tl-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl) var(--grid-gap);
	align-items: flex-start;
}

.tl-footer__col {
	flex: 1 1 190px;
	min-width: 0;
}

.tl-footer__col--brand {
	flex: 1.6 1 260px;
}

.tl-footer__col--contact {
	flex: 1.3 1 230px;
}

.tl-footer__col--fanpage {
	flex: 1.1 1 260px;
}

/* =============================================================================
 * 3. COT THUONG HIEU
 * ========================================================================== */
.tl-footer__logo {
	display: inline-block;
	max-width: 220px;
	margin-bottom: var(--space-sm);
}

.tl-footer .tl-footer__logo-img {
	display: block;
	width: auto;
	max-height: 72px;
	object-fit: contain;
}

.tl-footer .tl-footer__desc,
.tl-footer .tl-footer__desc p {
	max-width: 42ch;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
}

/* --- 3.1 Mang xa hoi ----------------------------------------------------- */
.tl-footer .tl-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}

.tl-footer .tl-footer__social-item {
	margin: 0;
	line-height: 1;
}

.tl-footer .tl-footer__social-item::before {
	content: none;
}

.tl-footer .tl-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	border: var(--rule-w) solid var(--color-border-dark);
	border-radius: var(--radius-sm);
	color: var(--color-on-dark);
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-footer .tl-footer__social-link:hover,
.tl-footer .tl-footer__social-link:focus-visible {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

/* span/svg trong nut phai la block, neu khong SVG se phinh het chieu rong */
.tl-footer .tl-footer__social-link > svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* =============================================================================
 * 4. TIEU DE COT
 * ========================================================================== */
.tl-footer .tl-footer__title {
	margin: 0 0 var(--space-md);
	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-wider);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--color-on-dark);
}

.tl-footer .tl-footer__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);
}

/* =============================================================================
 * 5. COT LIEN HE
 * ========================================================================== */
.tl-footer .tl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-footer .tl-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
}

.tl-footer .tl-footer__contact-item::before {
	content: none;
}

.tl-footer .tl-footer__contact-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 26px;
	color: var(--color-luxury-gold);
}

.tl-footer .tl-footer__contact-icon > svg {
	display: block;
	width: 18px;
	height: 18px;
}

.tl-footer .tl-footer__contact-text {
	min-width: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
	overflow-wrap: break-word;
}

.tl-footer .tl-footer__contact-text a {
	color: var(--color-on-dark);
	transition: color var(--dur-fast) var(--ease);
}

.tl-footer .tl-footer__contact-text a:hover,
.tl-footer .tl-footer__contact-text a:focus-visible {
	color: var(--color-gold-light);
}

/* =============================================================================
 * 6. COT MENU (lien ket nhanh + danh muc san pham)
 * ========================================================================== */
.tl-footer .tl-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-footer .tl-footer__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-footer .tl-footer__menu li::before {
	content: none;
}

.tl-footer .tl-footer__menu a {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: var(--tap-target);
	padding: 2px 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-snug);
	color: var(--color-on-dark-muted);
	transition: color var(--dur-fast) var(--ease),
		translate var(--dur-fast) var(--ease);
}

.tl-footer .tl-footer__menu a::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background-color: var(--color-gold-line);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: background-color var(--dur-fast) var(--ease);
}

.tl-footer .tl-footer__menu a:hover,
.tl-footer .tl-footer__menu a:focus-visible {
	color: var(--color-gold-light);
	translate: 3px 0;
}

.tl-footer .tl-footer__menu a:hover::before,
.tl-footer .tl-footer__menu a:focus-visible::before {
	background-color: var(--color-gold-light);
}

.tl-footer .tl-footer__menu .current-menu-item > a {
	color: var(--color-gold-light);
}

/* =============================================================================
 * 7. COT FANPAGE
 * ========================================================================== */
.tl-footer__embed {
	max-width: 340px;
	overflow: hidden;
	background-color: var(--color-surface-dark);
	border: var(--rule-w) solid var(--color-border-dark);
	border-radius: var(--radius-md);
}

.tl-footer__embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* =============================================================================
 * 8. THANH DUOI
 * ========================================================================== */
.tl-footer__bottom {
	border-top: var(--rule-w) solid var(--color-border-dark);
}

.tl-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-md);
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.tl-footer .tl-footer__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: .03em;
	color: var(--color-on-dark-muted);
}

.tl-footer .tl-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-footer .tl-footer__legal-menu li {
	position: relative;
	margin: 0;
	list-style: none;
}

.tl-footer .tl-footer__legal-menu li::before {
	content: none;
}

.tl-footer .tl-footer__legal-menu li + li::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--space-md) / -2);
	width: 1px;
	height: 12px;
	translate: 0 -50%;
	background-color: var(--color-border-dark);
}

.tl-footer .tl-footer__legal-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: .03em;
	color: var(--color-on-dark-muted);
	transition: color var(--dur-fast) var(--ease);
}

.tl-footer .tl-footer__legal-menu a:hover,
.tl-footer .tl-footer__legal-menu a:focus-visible {
	color: var(--color-gold-light);
}

/* =============================================================================
 * 9. FOCUS
 * ========================================================================== */
.tl-footer a:focus-visible {
	outline: var(--focus-w) solid var(--color-gold-light);
	outline-offset: var(--focus-offset);
}

/* =============================================================================
 * 10. RESPONSIVE — 1920 / 1440 / 1366 / 1024 / 820 / 768 / 430 / 390 / 360
 * ========================================================================== */

/* Man hinh rat rong: gian cot deu hon */
@media (min-width: 1600px) {

	.tl-footer__grid {
		gap: var(--space-2xl) var(--space-xl);
	}
}

/* 1366 / 1280 */
@media (max-width: 1366px) {

	.tl-footer__col--brand {
		flex-basis: 240px;
	}

	.tl-footer__col--fanpage {
		flex-basis: 240px;
	}
}

/* 1024 / 820 / 768 — chuyen ve 2 cot */
@media (max-width: 1024px) {

	.tl-footer__grid {
		gap: var(--space-xl) var(--grid-gap);
	}

	.tl-footer__col {
		flex: 1 1 calc(50% - var(--grid-gap));
	}

	.tl-footer__col--brand {
		flex-basis: 100%;
	}

	.tl-footer .tl-footer__desc,
	.tl-footer .tl-footer__desc p {
		max-width: 58ch;
	}
}

/* 640 / 430 / 390 / 360 — mot cot */
@media (max-width: 640px) {

	.tl-footer__grid {
		gap: var(--space-lg);
	}

	.tl-footer__col,
	.tl-footer__col--brand,
	.tl-footer__col--contact,
	.tl-footer__col--fanpage {
		flex: 1 1 100%;
	}

	.tl-footer .tl-footer__title {
		margin-bottom: var(--space-sm);
		font-size: var(--font-size-lg);
	}

	.tl-footer__bottom-inner {
		justify-content: flex-start;
	}

	.tl-footer .tl-footer__legal-menu {
		gap: var(--space-2xs) var(--space-sm);
	}

	.tl-footer .tl-footer__legal-menu li + li::after {
		left: calc(var(--space-sm) / -2);
	}
}

@media (max-width: 430px) {

	.tl-footer__embed {
		max-width: 100%;
	}

	.tl-footer__logo {
		max-width: 180px;
	}
}

@media (max-width: 360px) {

	.tl-footer .tl-footer__social-link {
		width: var(--tap-target);
		height: var(--tap-target);
	}
}

/* =============================================================================
 * 11. GIAM CHUYEN DONG
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.tl-footer .tl-footer__menu a,
	.tl-footer .tl-footer__social-link,
	.tl-footer .tl-footer__contact-text a,
	.tl-footer .tl-footer__legal-menu a {
		transition: none;
	}

	.tl-footer .tl-footer__menu a:hover,
	.tl-footer .tl-footer__menu a:focus-visible {
		translate: none;
	}
}

/* =============================================================================
 * 12. IN AN
 * ========================================================================== */
@media print {

	.tl-footer {
		background: none;
		color: #000;
	}

	.tl-footer__embed,
	.tl-footer .tl-footer__social {
		display: none;
	}
}