/**
 * Tom Luxury — Header
 * -----------------------------------------------------------------------------
 * Header do Flatsome + menu WordPress quan ly. File nay CHI restyle output san co
 * va tao mot component moi: cum nut hanh dong .tl-header-actions.
 *
 * CASCADE: nap o wp_enqueue_scripts priority 210, tuc sau flatsome-main (100),
 * sau style.css cu va sau base.css/components.css (200). Cac rule co ancestor
 * .tl-theme (class tren body) de vuot do dac hieu cua style.css cu ma khong
 * can !important.
 *
 * Lop goc: .tl-header-actions
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. NEN HEADER + TRANG THAI CUON (.stuck cua Flatsome)
 *    Flatsome tu gan/go class .stuck tren .header-wrapper — KHONG viet JS moi.
 * ========================================================================== */
.tl-theme .header-wrapper {
	transition: box-shadow var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}

.tl-theme .header-bg-color {
	background-color: var(--color-surface);
	transition: background-color var(--dur) var(--ease);
}

.tl-theme .header-wrapper.stuck {
	box-shadow: var(--shadow-card);
}

.tl-theme .header-wrapper.stuck .header-bg-color {
	background-color: var(--color-surface);
}

/* Duong ke vang manh duoi header — thay cho vien gradient 3px cua style.css cu */
.tl-theme #masthead {
	border-bottom-style: solid;
	border-bottom-width: var(--rule-w);
	border-image: linear-gradient(
		90deg,
		transparent,
		var(--color-gold-line) 24%,
		var(--color-gold-light) 50%,
		var(--color-gold-line) 76%,
		transparent
	) 1;
	border-image-slice: 1;
}

.tl-theme .header-wrapper.stuck #masthead {
	border-image: linear-gradient(90deg, var(--color-gold-line), var(--color-gold-line)) 1;
}

/* Logo doi chieu cao muot khi header dinh */
.tl-theme #logo img {
	transition: max-height var(--dur) var(--ease);
}

/* =============================================================================
 * 2. HEADER TRONG SUOT TREN TRANG CO HERO
 *    Chi bat khi quan tri vien tick "Header trong suot" (body.tl-header-transparent).
 * ========================================================================== */
.tl-theme.tl-header-transparent .header.has-transparent {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: var(--z-header);
	width: 100%;
}

/* Xoa moi lop nen cua header o trang thai trong suot: Flatsome to nen o
   .header-bg-color, con .header-wrapper / .header-main / .header-bottom co the
   duoc to rieng qua Customizer hoac style.css cu. */
.tl-theme.tl-header-transparent .header.transparent .header-bg-color,
.tl-theme.tl-header-transparent .header.transparent .header-bg-image,
.tl-theme.tl-header-transparent .header.transparent .header-top {
	background-color: transparent;
	background-image: none;
}

/* NGOAI LE !important — chi dung o DUY NHAT trang thai header trong suot.
 * Ba lop nen duoi day dang duoc to bang !important boi ma KHONG thuoc quyen
 * sua cua nhom nay:
 *   1. style.css (child, dong ~985): .header-bottom{background-color:#4b372e!important}
 *   2. CSS sinh tu Flatsome Customizer (tuy chon "header_bg_transparent"):
 *      .transparent .header-wrapper{background-color:#0a0a0a!important}
 *   3. CSS noi tuyen "global-styles-inline-css" cua website:
 *      div#masthead, body, html, #main, #wrapper{background-color:#fff!important}
 *      -> phai dung ca #masthead moi du do dac hieu (1,5,1 > 1,0,1).
 * Khong co cach nao thang !important bang do dac hieu don thuan. Pham vi da bo
 * hep toi da: chi ap dung khi quan tri vien BAT header trong suot VA Flatsome
 * dang gan class .transparent (dang o dau trang, chua cuon). Khi cuon, Flatsome
 * tu go .transparent -> cac rule nay ngung ap dung, nen dac hien lai binh thuong. */
.tl-theme.tl-header-transparent .header.transparent .header-wrapper,
.tl-theme.tl-header-transparent .header.transparent .header-bottom,
.tl-theme.tl-header-transparent .header.transparent div#masthead {
	background-color: transparent !important;
}

/* Khi cuon (Flatsome go class .transparent va gan .stuck) thi nen dac tro lai */
.tl-theme.tl-header-transparent .header-wrapper.stuck,
.tl-theme.tl-header-transparent .header-wrapper.stuck .header-main {
	background-color: var(--color-surface);
}

/* Lop phu mo dan giup chu tren anh sang van doc duoc */
.tl-theme.tl-header-transparent .header.transparent .header-bg-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--color-overlay-soft), transparent);
	pointer-events: none;
}

.tl-theme.tl-header-transparent .header.transparent #masthead {
	border-image: none;
	border-bottom-color: var(--color-border-dark);
}



.tl-theme #header.transparent .nav > li > a:hover,
.tl-theme #header.transparent .nav > li.active > a,
.tl-theme #header.transparent .nav > li.current-menu-item > a {
	color: var(--color-gold-light);
}

.tl-theme #header.transparent .nav > li > a::after {
	background-color: var(--color-gold-light);
}

/* Cac rule mau chu duoi day co do dac hieu (1,3,0) — bat buoc phai co #header
   vi tren website nay co CSS cua ben thu ba dung selector kem ID gan mau #000
   cho phan tu ben trong header, thang moi rule chi gom class. */
.tl-theme #header.transparent .tl-header-actions__hotline,
.tl-theme #header.transparent .tl-header-actions__text,
.tl-theme #header.transparent .tl-header-actions__number {
	color: var(--color-on-dark);
}

.tl-theme #header.transparent .tl-header-actions__hotline {
	border-color: var(--color-gold-light);
}

.tl-theme #header.transparent .tl-header-actions__note {
	color: var(--color-on-dark-muted);
}

/* Trang thai nen sang (mac dinh + sau khi cuon): Flatsome go class .transparent */
.tl-theme #header .tl-header-actions__text,
.tl-theme #header .tl-header-actions__number {
	color: var(--color-text);
}

.tl-theme #header .tl-header-actions__note {
	color: var(--color-muted);
}

.tl-theme #header .tl-header-actions__hotline:hover .tl-header-actions__note,
.tl-theme #header .tl-header-actions__hotline:hover .tl-header-actions__number,
.tl-theme #header .tl-header-actions__hotline:focus-visible .tl-header-actions__note,
.tl-theme #header .tl-header-actions__hotline:focus-visible .tl-header-actions__number {
	color: var(--color-primary);
}

.tl-theme #header .tl-header-actions .tl-btn--primary .tl-btn__label {
	color: var(--color-primary);
}

/* =============================================================================
 * 3. MENU CHINH — bo sung cho base.css (muc dang xem gach chan vang)
 * ========================================================================== */
.tl-theme #header .nav > li.current-menu-ancestor > a,
.tl-theme #header .nav > li.current-menu-parent > a,
.tl-theme #header .nav > li.current_page_ancestor > a,
.tl-theme #header .nav > li.current_page_parent > a {
	color: var(--color-luxury-gold);
}

.tl-theme #header .nav > li.current-menu-ancestor > a::after,
.tl-theme #header .nav > li.current-menu-parent > a::after,
.tl-theme #header .nav > li.current_page_ancestor > a::after,
.tl-theme #header .nav > li.current_page_parent > a::after {
	transform: scaleX(1);
}

/* Dropdown: bo goc + vien mo, mau nen toi da co o base.css */
.tl-theme #header .nav-dropdown,
.tl-theme #header .header-nav-main .nav-dropdown-default {
	border-radius: var(--radius-md);
	overflow: hidden;
}

.tl-theme #header .nav-dropdown > li > a,
.tl-theme #header .nav-dropdown .nav-column li > a {
	border-left: 2px solid transparent;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-theme #header .nav-dropdown > li > a:hover,
.tl-theme #header .nav-dropdown > li > a:focus-visible,
.tl-theme #header .nav-dropdown .nav-column li > a:hover {
	border-left-color: var(--color-luxury-gold);
}

/* Vung cham >= 44px cho menu di dong cua Flatsome (khong doi cau truc) */
.tl-theme .nav-sidebar > li > a,
.tl-theme .mobile-nav > li > a {
	min-height: var(--tap-target);
}

/* Focus ro rang trong header */
.tl-theme #header a:focus-visible,
.tl-theme #header button:focus-visible {
	outline: var(--focus-w) solid var(--color-luxury-gold);
	outline-offset: 2px;
}

/* =============================================================================
 * 4. CUM NUT HANH DONG [tl_header_actions]
 * ========================================================================== */
.tl-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-width: 0;
}

.tl-header-actions--empty .tl-empty {
	padding: var(--space-3xs) var(--space-2xs);
	font-size: var(--font-size-xs);
	line-height: 1.3;
}

/* CHUAN HOA <span>
 * style.css cu co rule "body, p, li, span { font-family:'Lora'; color:#3A3A3A }"
 * ma base.css khong reset span, nen moi <span> ben trong component (ke ca
 * .tl-btn__label) bi doi sang serif + xam dam. Tra ve ke thua trong pham vi
 * cum nut header. Cac rule rieng ben duoi deu dung 2 class de thang (0,1,1). */
.tl-header-actions span {
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* --- 4.1 Nut hotline dang vien thuoc ------------------------------------- */
/* Mau chu de nguyen theo .tl-btn--ghost (var(--color-text)) de nut tu doi mau
   khi nam trong pham vi nen toi — khong khoa cung mau o day. */
.tl-header-actions__hotline {
	gap: var(--space-2xs);
	padding: var(--space-3xs) var(--space-sm);
	border-radius: var(--radius-pill);
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.tl-header-actions__icon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

.tl-header-actions .tl-header-actions__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-family: var(--font-body);
	line-height: 1.15;
	text-align: left;
}

.tl-header-actions .tl-header-actions__note {
	font-size: var(--font-size-xs);
	font-weight: var(--weight-regular);
	line-height: 1.3;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
	transition: color var(--dur-fast) var(--ease);
}

.tl-header-actions .tl-header-actions__number {
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: .01em;
}

.tl-header-actions .tl-header-actions__hotline:hover .tl-header-actions__note,
.tl-header-actions .tl-header-actions__hotline:focus-visible .tl-header-actions__note {
	color: inherit;
}

/* --- 4.2 Nut CTA vang dac ------------------------------------------------ */
.tl-header-actions__cta {
	padding: var(--space-3xs) var(--space-md);
	white-space: nowrap;
}

/* Trong header cua Flatsome, cum nut nam trong <li class="html custom"> */
.tl-theme #header li.html .tl-header-actions {
	margin: 0;
}

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

/* Man hinh rat rong: gian nhe khoang cach hai nut */
@media (min-width: 1600px) {

	.tl-header-actions {
		gap: var(--space-xs);
	}
}

/* 1366 / 1280: bo chu nho phia tren so de menu du cho */
@media (max-width: 1366px) {

	.tl-header-actions__note {
		display: none;
	}

	.tl-header-actions__hotline {
		padding-inline: var(--space-xs);
	}
}

/* 1024 / 820 / 768: thu gon nut CTA */
@media (max-width: 1024px) {

	.tl-header-actions {
		gap: var(--space-3xs);
	}

	.tl-header-actions__cta {
		padding-inline: var(--space-sm);
	}

	.tl-header-actions__number {
		font-size: var(--font-size-sm);
	}
}

/* Tu breakpoint "medium" cua Flatsome tro xuong: hotline chi con bieu tuong,
   van giu van ban cho trinh doc man hinh (clip thay vi display:none). */
@media (max-width: 849px) {

	.tl-header-actions__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.tl-header-actions__hotline {
		width: var(--tap-target);
		min-width: var(--tap-target);
		padding-inline: 0;
	}
}

/* 430 / 390 / 360 */
@media (max-width: 430px) {

	.tl-header-actions__cta {
		padding-inline: var(--space-xs);
		font-size: var(--font-size-xs);
		letter-spacing: var(--tracking-wide);
	}
}

@media (max-width: 360px) {

	.tl-header-actions__cta .tl-btn__label {
		overflow: hidden;
		max-width: 13ch;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

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

	.tl-theme .header-wrapper,
	.tl-theme .header-bg-color,
	.tl-theme #logo img,
	.tl-header-actions__note {
		transition: none;
	}
}

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

	.tl-header-actions {
		display: none;
	}
}

/* =============================================================================
 * 9. CHONG XUONG DONG MENU CHINH
 * Menu cua site co 8 muc cap 1 va Flatsome dat nav-spacing-xlarge. Cong voi
 * letter-spacing cua design system, tong be ngang vuot cho trong o 1440 ->
 * <ul> xuong 2 hang (do 88px) trong khi header chi cao 70px, hang thu hai
 * de len hero. Khong sua theme option cua khach; siet khoang cach o day.
 * ========================================================================== */
.tl-theme #header .header-nav-main {
	flex-wrap: nowrap;
}

.tl-theme #header .header-nav-main > li {
	flex: 0 0 auto;
}

.tl-theme #header .header-nav-main > li > a {
	white-space: nowrap;
}

@media (max-width: 1699px) {
	.tl-theme #header .header-nav-main.nav-spacing-xlarge > li > a {
		padding-left: .7rem;
		padding-right: .7rem;
	}
}

@media (max-width: 1439px) {
	.tl-theme #header .header-nav-main.nav-spacing-xlarge > li > a {
		padding-left: .5rem;
		padding-right: .5rem;
		font-size: var(--font-size-xs);
		letter-spacing: .06em;
	}

	.tl-theme #header .header-nav-main > li > a::after {
		left: 5px;
		right: 5px;
	}
}

@media (max-width: 1199px) {
	.tl-theme #header .header-nav-main.nav-spacing-xlarge > li > a {
		padding-left: .35rem;
		padding-right: .35rem;
		letter-spacing: .03em;
	}
}

/* =============================================================================
 * 10. CAN BANG BE NGANG HEADER
 * Header cua site gom: logo + menu 8 muc + khoi .info-bar (2 muc thong tin +
 * nut bao gia). Tong be ngang > 1385px o man 1440 nen menu de len .info-bar.
 * Mockup chi giu "so dien thoai + nut CTA" o ben phai, nen an dan cac phan
 * it quan trong theo breakpoint thay vi de chong chu.
 * Khong sua noi dung HTML cua khach — chi an bang CSS, van doc duoc bang
 * trinh doc man hinh neu can thi bo rule nay.
 * ========================================================================== */
.tl-theme #header .flex-col.flex-right {
	flex: 0 0 auto;
}

.tl-theme #header .header-nav-main.nav-left {
	min-width: 0;
}

.tl-theme #header .info-bar {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.2vw, 1.25rem);
}

.tl-theme #header .info-bar .info-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
}

/* An khoi "HE THONG PHAN PHOI" truoc — it gia tri chuyen doi nhat. */
@media (max-width: 1600px) {
	.tl-theme #header .info-bar .info-item:first-child {
		display: none;
	}
}

/* Hep hon nua: bo dong gio lam viec, chi giu so dien thoai. */
@media (max-width: 1279px) {
	.tl-theme #header .info-bar .info-item .label {
		display: none;
	}
}

/* =============================================================================
 * 11. HEADER MOT HANG (khach dat header_elements_left = nav)
 * Do thuc te o 1440: nav 8 muc = 1129px + khoi phai 354px = 1528px > 1425px
 * viewport -> nut CTA bi cat 103px. Siet lai de vua, uu tien giu nut CTA va
 * so dien thoai vi day la hai diem chuyen doi chinh.
 * ========================================================================== */
@media (max-width: 1600px) {
	.tl-theme #header .header-nav-main.nav-spacing-xlarge > li > a {
		padding-left: .38rem;
		padding-right: .38rem;
		font-size: var(--font-size-xs);
		letter-spacing: .035em;
	}

	.tl-theme #header .header-nav-main > li > a::after {
		left: 4px;
		right: 4px;
	}

	/* Bo dong "MO - FR: 9:00 - 18:00", giu lai so dien thoai. */
	.tl-theme #header .info-bar .info-item .label {
		display: none;
	}

	.tl-theme #header .info-bar .info-item .value {
		line-height: 1.2;
	}

	.tl-theme #header .info-bar {
		gap: .5rem;
	}
}

/* Duoi 1360 thi bo luon khoi so dien thoai, chi giu nut CTA — nguoi dung van
   bam duoc hotline o nut noi va o chan trang. */
@media (max-width: 1360px) {
	.tl-theme #header .info-bar .info-item {
		display: none;
	}
}