/* ==========================================================================
   Thien My - style chung của theme (ngoài Elementor element)
   1. Nền + font
   2. Header Blocksy: logo, menu in hoa có gạch chân, dropdown, CTA
   3. Menu mobile (offcanvas)
   4. Footer (Content Block Elementor) + thanh bản quyền
   5. Trang thường / archive / search của Blocksy
   ========================================================================== */

/* 1. Nền + font ------------------------------------------------------------ */
:root {
	--theme-font-family: var(--tm-font);
	--tm-header-h: 80px;
}

body {
	background: #FFFFFF;
	color: #2B3540;
	font-family: var(--tm-font);
	-webkit-font-smoothing: antialiased;
}

#main-container {
	overflow-x: clip;
}

::selection {
	background: #901010;
	color: #FFFFFF;
}

/* Elementor container: bỏ khoảng hở mặc định trên/dưới trang dựng bằng Elementor */
.tm-builder-page .site-main > .ct-container-full,
.tm-builder-page .site-main > article > .entry-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* Section có anchor: không bị header che khi nhảy tới */
.elementor [id] {
	scroll-margin-top: calc(var(--tm-header-h) + 16px);
}

html {
	scroll-behavior: smooth;
}

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

/* 2. Header ------------------------------------------------------------------ */
#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(226, 232, 240, .8);
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: box-shadow .3s;
}

.admin-bar #header.ct-header {
	top: var(--admin-bar, 32px);
}

#header [data-row] {
	background: transparent;
}

#header [data-row*="middle"] {
	--height: 80px;
}

/* Logo + tên + tagline */
#header .site-branding {
	gap: 14px;
}

#header .site-logo-container img,
#header .site-logo-container svg {
	width: 64px;
	height: auto;
	max-height: 42px;
	transition: transform .3s;
}

#header .site-branding:hover .site-logo-container img {
	transform: scale(1.05);
}

#header .site-title {
	margin: 0;
	font-family: var(--tm-font-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

#header .site-title a {
	color: #0F172A;
}

#header .site-description {
	margin-top: 3px;
	color: #B08A48;
	font-family: var(--tm-font-cond);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* Menu cấp 1 */
#header .header-menu-1 {
	--menu-items-spacing: 28px;
}

#header .header-menu-1 > ul > li {
	margin-inline: calc(var(--menu-items-spacing) / 2);
}

#header .header-menu-1 > ul > li > .ct-menu-link {
	position: relative;
	gap: 6px;
	height: auto;
	padding: 0 0 4px;
	color: #475569;
	font-family: var(--tm-font-cond);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .2s;
}

#header .header-menu-1 > ul > li > .ct-menu-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: #475569;
	transform: scaleX(1);
	transform-origin: left;
	transition: background-color .2s, transform .3s;
}

#header .header-menu-1 > ul > li:hover > .ct-menu-link,
#header .header-menu-1 > ul > li.current-menu-item > .ct-menu-link,
#header .header-menu-1 > ul > li.current-menu-ancestor > .ct-menu-link,
#header .header-menu-1 > ul > li.current-menu-parent > .ct-menu-link {
	color: #901010;
}

#header .header-menu-1 > ul > li:hover > .ct-menu-link::after,
#header .header-menu-1 > ul > li.current-menu-item > .ct-menu-link::after,
#header .header-menu-1 > ul > li.current-menu-ancestor > .ct-menu-link::after,
#header .header-menu-1 > ul > li.current-menu-parent > .ct-menu-link::after {
	background: #901010;
}

#header .header-menu-1 .ct-toggle-dropdown-desktop svg,
#header .header-menu-1 .ct-menu-link .ct-icon-container svg {
	width: 8px;
	height: 8px;
}

/* Dropdown */
#header .header-menu-1 .sub-menu {
	--dropdown-width: 270px;

	padding: 10px 0;
	border: 1px solid #E2E8F0;
	border-top: 2px solid #901010;
	border-radius: 0 0 6px 6px;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .3);
}

#header .header-menu-1 .sub-menu .ct-menu-link {
	padding: 9px 20px;
	color: #334155;
	font-family: var(--tm-font-cond);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	transition: color .2s, background-color .2s, padding .2s;
}

#header .header-menu-1 .sub-menu .ct-menu-link:hover,
#header .header-menu-1 .sub-menu .current-menu-item > .ct-menu-link {
	padding-left: 24px;
	background: #F8FAFC;
	color: #901010;
}

#header .header-menu-1 .sub-menu .menu-item.tm-sub-indent > .ct-menu-link {
	padding-left: 34px;
	color: #64748B;
	font-size: 13px;
}

#header .header-menu-1 .sub-menu .menu-item.tm-sub-indent > .ct-menu-link::before {
	content: "—";
	margin-right: 6px;
	color: #CBD5E1;
}

#header .header-menu-1 .sub-menu .menu-item.tm-sub-cta {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #F1F5F9;
}

#header .header-menu-1 .sub-menu .menu-item.tm-sub-cta > .ct-menu-link {
	color: #901010;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
}

/* CTA "Request a Quote" */
#header .ct-header-cta .ct-button {
	--theme-button-min-height: 40px;

	min-height: 40px;
	padding: 10px 20px;
	border: 1px solid #901010;
	border-radius: 2px;
	background: #901010;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	color: #FFFFFF;
	font-family: var(--tm-font-cond);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .25s, transform .25s;
}

#header .ct-header-cta .ct-button:hover {
	border-color: #A51C1C;
	background: #A51C1C;
	color: #FFFFFF;
	transform: translateY(-1px);
}

#header .ct-header-cta .ct-button::before {
	display: none;
}

/* Desktop: logo | menu | CTA, menu thu khoảng cách trên màn hình hẹp */
@media (max-width: 1360px) {
	#header .header-menu-1 {
		--menu-items-spacing: 20px;
	}
}

@media (max-width: 1220px) {
	#header .header-menu-1 {
		--menu-items-spacing: 14px;
	}

	#header .header-menu-1 > ul > li > .ct-menu-link {
		font-size: 11px;
	}

	#header .site-title {
		font-size: 16px;
	}
}

/* 3. Menu mobile ------------------------------------------------------------- */
#header .ct-header-trigger {
	--toggle-button-background: transparent;
	--theme-icon-color: #101820;
}

#offcanvas .ct-panel-inner {
	background: #101820;
}

#offcanvas .ct-panel-actions .ct-toggle-close {
	--toggle-button-background: #901010;
	--toggle-button-border-color: #901010;
	--theme-icon-color: #FFFFFF;

	border-radius: 2px;
}

#offcanvas .mobile-menu .ct-menu-link {
	color: #E2E8F0;
	font-family: var(--tm-font-cond);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

#offcanvas .mobile-menu .sub-menu .ct-menu-link {
	color: #AEB8C2;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}

#offcanvas .mobile-menu .current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu .ct-menu-link:hover {
	color: #D7A35B;
}

#offcanvas .mobile-menu li {
	border-color: rgba(255, 255, 255, .08);
}

#offcanvas .ct-toggle-dropdown-mobile {
	--toggle-button-background: rgba(255, 255, 255, .06);
	--theme-icon-color: #E2E8F0;
}

#offcanvas .ct-header-cta .ct-button {
	width: 100%;
	min-height: 48px;
	border-radius: 2px;
	background: #901010;
	color: #FFFFFF;
	font-family: var(--tm-font-cond);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media (max-width: 999.98px) {
	#header .site-title {
		font-size: 15px;
	}

	#header .site-logo-container img {
		width: 52px;
	}

	#header [data-row*="middle"] {
		--height: 68px;
	}

	:root {
		--tm-header-h: 68px;
	}
}

/* 4. Footer ------------------------------------------------------------------ */
#footer.ct-footer {
	background: #101820;
}

.ct-footer [data-row] {
	--theme-border-top: none;

	background: transparent;
}

.tm-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	color: #6F7B87;
	font-family: var(--tm-font-cond);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tm-footer-bottom a,
.elementor .tm-footer-bottom a {
	color: #8C97A3;
	text-decoration: none;
	transition: color .2s;
}

.tm-footer-bottom a:hover,
.elementor .tm-footer-bottom a:hover {
	color: #FFFFFF;
}

.tm-footer-bottom nav {
	display: flex;
	gap: 24px;
}

.tm-footer-bottom p,
.tm-footer-main .elementor-widget-text-editor p {
	margin: 0;
}

.tm-footer-main .elementor-widget-text-editor {
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Content Block footer: Blocksy áp khoảng cách nội dung bài viết (margin-bottom 24px) cho
   .entry-content > .elementor -> dải trắng dưới footer. Bỏ margin của mọi lớp bọc. */
#footer .entry-content,
#footer .entry-content > *,
#footer article,
#footer .elementor {
	margin-top: 0;
	margin-bottom: 0;
}

/* Content Block footer: bỏ margin/padding mặc định của entry */
.ct-footer .ct-container-full,
[data-block*="footer"] > .ct-container-full,
.ct-content-block {
	margin: 0;
}

/* 5. Trang thường / archive / search ------------------------------------------- */
.page:not(.tm-builder-page) .hero-section .page-title,
.single-post:not(.tm-builder-page) .hero-section .page-title,
.archive .hero-section .page-title,
.search .hero-section .page-title {
	color: #101820;
	font-family: var(--tm-font-serif);
	font-weight: 700;
}

.entry-content h2,
.entry-content h3 {
	color: #101820;
	font-family: var(--tm-font-serif);
}

.entry-content a {
	color: #901010;
}

/* functions.php dequeue global-styles + wp-block-library nên mất CSS "constrained layout"
   của block theme: bù lại để trang Gutenberg/classic không tràn full màn hình. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.elementor)) {
	max-width: var(--wp--style--global--content-size, var(--theme-block-max-width, 860px));
	margin-inline: auto;
}

/* Nút submit/search mặc định của Blocksy theo màu thương hiệu */
.ct-search-form button,
.search-form .search-submit {
	background: #901010;
}

/* Cột dính khi cuộn (sidebar Resources) */
@media (min-width: 1025px) {
	.e-con.tm-sticky-col {
		position: sticky;
		top: calc(var(--tm-header-h) + 24px);
		align-self: flex-start;
	}
}

/* Chuyển ngôn ngữ (Blocksy Language Switcher + Polylang): EN | VI */
#header .ct-language-switcher {
	--theme-link-initial-color: #64748B;
	--theme-link-hover-color: #901010;
	--theme-link-active-color: #901010;

	margin-inline-end: 22px;
}

#header .ct-language-switcher ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#header .ct-language-switcher li {
	display: flex;
	align-items: center;
}

#header .ct-language-switcher li + li::before {
	content: "";
	width: 1px;
	height: 12px;
	margin-inline: 8px;
	background: #CBD5E1;
}

#header .ct-language-switcher a,
#header .ct-language-switcher li > span {
	padding: 2px 0;
	color: #64748B;
	font-family: var(--tm-font-cond);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s;
}

#header .ct-language-switcher a:hover,
#header .ct-language-switcher .current-lang > *,
#header .ct-language-switcher [aria-current] {
	color: #901010;
}

@media (max-width: 999.98px) {
	#header .ct-language-switcher {
		margin-inline-end: 12px;
	}
}

/* Tiếng Việt: line-height cho chữ có dấu ở header / trang thường */
:lang(vi) #header .site-title {
	line-height: 1.3;
}

:lang(vi) #header .header-menu-1 .sub-menu .ct-menu-link {
	line-height: 1.45;
}

:lang(vi) .entry-content h2,
:lang(vi) .entry-content h3,
:lang(vi) .hero-section .page-title {
	line-height: 1.4;
}