/* ==========================================================================
   Thien My - design system dùng chung cho mọi widget
   Token lấy từ CSS của bản mẫu (thienmyindustries.vercel.app). Có thể override trong
   Elementor > Site Settings > Custom CSS, ví dụ: :root { --tm-red: #8a0f0f; }
   ========================================================================== */
:root {
	--tm-red: #901010;
	--tm-red-light: #a51c1c;
	--tm-red-dark: #6b0808;
	--tm-red-bright: #E31B23;
	--tm-carbon: #101820;
	--tm-navy: #0A0F18;
	--tm-navy-2: #0A1324;
	--tm-panel: #18212B;          /* thẻ trên nền tối */
	--tm-panel-line: rgba(255, 255, 255, .1);
	--tm-brass: #B08A48;
	--tm-steel: #5B646B;
	--tm-slate: #475569;
	--tm-ink: #0F172A;
	--tm-line: #E2E8F0;
	--tm-light-steel: #E8EEF3;
	--tm-mist: #F5F7F8;
	--tm-mist-2: #FAFBFB;
	--tm-paper: #FAFAF8;
	--tm-white: #FFFFFF;

	/* Font mặc định; giá trị thật do inc/fonts.php (Customizer) in ra. */
	--tm-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tm-font-cond: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
	--tm-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

	--tm-radius-sm: 4px;
	--tm-radius: 8px;
	--tm-radius-lg: 12px;
	--tm-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px -1px rgba(15, 23, 42, .08);
	--tm-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
	--tm-shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, .35);
	--tm-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------------
   Chữ
   ------------------------------------------------------------------------ */
.tm-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	color: var(--tm-red);
	font-family: var(--tm-font-cond);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.tm-eyebrow--brass,
.tm-dark .tm-eyebrow {
	color: var(--tm-brass);
}

.tm-eyebrow--pill {
	padding: 6px 12px;
	border: 1px solid rgba(144, 16, 16, .45);
	border-radius: 2px;
	background: rgba(144, 16, 16, .22);
	color: #E9B8B8;
	letter-spacing: .14em;
}

.tm-title {
	margin: 0;
	color: var(--tm-carbon);
	font-family: var(--tm-font-serif);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.01em;
}

.tm-title--upper {
	text-transform: uppercase;
	letter-spacing: 0;
}

.tm-dark .tm-title {
	color: var(--tm-white);
}

.tm-hl {
	color: var(--tm-red);
}

.tm-it {
	font-style: italic;
}

.tm-dark .tm-hl {
	color: #C8262C;
}

.tm-text {
	margin: 0;
	color: var(--tm-steel);
	font-family: var(--tm-font);
	font-size: 15px;
	line-height: 1.65;
}

.tm-dark .tm-text {
	color: #AEB8C2;
}

.tm-divider {
	display: block;
	width: 48px;
	height: 3px;
	margin: 22px 0 0;
	background: var(--tm-red);
}

.tm-center {
	text-align: center;
}

.tm-center .tm-divider {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Nút (Barlow Condensed in hoa, góc vuông nhẹ)
   ------------------------------------------------------------------------ */
.tm-btn {
	--tm-btn-color: var(--tm-white);
	--tm-btn-bg: var(--tm-red);
	--tm-btn-border: var(--tm-red);
	--tm-btn-hover-bg: var(--tm-red-light);
	--tm-btn-hover-color: var(--tm-btn-color);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 14px 30px;
	border: 1px solid var(--tm-btn-border);
	border-radius: var(--tm-radius-sm);
	background: var(--tm-btn-bg);
	box-shadow: var(--tm-shadow-sm);
	color: var(--tm-btn-color);
	font-family: var(--tm-font-cond);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s var(--tm-ease), border-color .25s var(--tm-ease), color .25s var(--tm-ease), transform .25s var(--tm-ease), box-shadow .25s var(--tm-ease);
}

.tm-btn:hover,
.tm-btn:focus-visible {
	border-color: var(--tm-btn-hover-bg);
	background: var(--tm-btn-hover-bg);
	color: var(--tm-btn-hover-color);
	transform: translateY(-1px);
	box-shadow: var(--tm-shadow);
}

.tm-btn:focus-visible {
	outline: 2px solid var(--tm-brass);
	outline-offset: 3px;
}

.tm-btn__icon {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .25s var(--tm-ease);
}

.tm-btn:hover .tm-btn__icon {
	transform: translateX(3px);
}

.tm-btn .tm-icon--arrow-up-right {
	width: 14px;
	height: 14px;
}

.tm-btn:hover .tm-icon--arrow-up-right {
	transform: translate(2px, -2px);
}

.tm-btn--dark {
	--tm-btn-bg: var(--tm-carbon);
	--tm-btn-border: var(--tm-carbon);
	--tm-btn-hover-bg: #26313c;
}

.tm-btn--outline-light {
	--tm-btn-bg: transparent;
	--tm-btn-border: rgba(255, 255, 255, .85);
	--tm-btn-hover-bg: var(--tm-white);
	--tm-btn-hover-color: var(--tm-carbon);

	box-shadow: none;
}

.tm-btn--outline-dark {
	--tm-btn-color: var(--tm-carbon);
	--tm-btn-bg: transparent;
	--tm-btn-border: var(--tm-carbon);
	--tm-btn-hover-bg: var(--tm-carbon);
	--tm-btn-hover-color: var(--tm-white);

	box-shadow: none;
}

.tm-btn--ghost-dark {
	--tm-btn-bg: #26313c;
	--tm-btn-border: rgba(255, 255, 255, .2);
	--tm-btn-hover-bg: #34414e;
}

.tm-btn--link {
	--tm-btn-color: var(--tm-brass);
	--tm-btn-bg: transparent;
	--tm-btn-border: transparent;
	--tm-btn-hover-bg: transparent;
	--tm-btn-hover-color: var(--tm-white);

	min-height: 0;
	padding: 0 0 4px;
	border-width: 0 0 1px;
	border-bottom-color: currentColor;
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
}

.tm-btn--link:hover {
	border-color: currentColor;
	box-shadow: none;
}

.tm-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.tm-center .tm-btns {
	justify-content: center;
}

/* Link chữ nhỏ "View technical details >" / "Read article ↗" */
.tm-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tm-red);
	font-family: var(--tm-font-cond);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s var(--tm-ease), gap .2s var(--tm-ease);
}

.tm-more .tm-icon {
	width: 14px;
	height: 14px;
}

.tm-more:hover {
	gap: 10px;
	color: var(--tm-red-light);
}

/* ---------------------------------------------------------------------------
   Danh sách check, nhãn, icon tròn
   ------------------------------------------------------------------------ */
.tm-checks {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-checks li {
	position: relative;
	padding-left: 24px;
	color: var(--tm-slate);
	font-size: 14px;
	line-height: 1.5;
}

.tm-checks li::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 14px;
	height: 14px;
	background: var(--tm-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tm-dark .tm-checks li {
	color: #D5DCE3;
}

.tm-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.tm-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid rgba(144, 16, 16, .18);
	border-radius: var(--tm-radius);
	background: #FBF1F1;
	color: var(--tm-red);
}

.tm-icon-box .tm-icon {
	width: 22px;
	height: 22px;
}

.tm-dark .tm-icon-box {
	border-color: var(--tm-panel-line);
	background: rgba(255, 255, 255, .06);
	color: #D7A35B;
}

.tm-num {
	color: var(--tm-red);
	font-family: var(--tm-font-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.tm-tag {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .95);
	color: var(--tm-carbon);
	font-family: var(--tm-font-cond);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Ảnh phủ khung */
.tm-cover {
	position: relative;
	overflow: hidden;
}

.tm-cover > img,
.tm-cover > picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--tm-ease);
}

/* Nút slider */
.tm-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--tm-line);
	border-radius: 50%;
	background: var(--tm-white);
	color: var(--tm-carbon);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.tm-nav:hover {
	background: var(--tm-red);
	border-color: var(--tm-red);
	color: var(--tm-white);
}

.tm-nav .tm-icon {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------------
   Hiệu ứng xuất hiện khi cuộn
   html.tm-motion được gắn trong <head>; tm-base.js thêm .is-revealed khi phần tử vào màn hình.
     data-tm-reveal="up"     : mờ -> rõ + trượt lên
     data-tm-reveal="stagger": các con trực tiếp lần lượt trượt lên
     data-tm-reveal="fade"   : chỉ mờ -> rõ
   ------------------------------------------------------------------------ */
[data-tm-reveal] {
	--tm-reveal-y: 28px;
	--tm-reveal-dur: .7s;
	--tm-reveal-delay: 0s;
	--tm-reveal-ease: cubic-bezier(.25, .6, .3, 1);
}

.tm-motion [data-tm-reveal="up"],
.tm-motion [data-tm-reveal="fade"] {
	transition: opacity var(--tm-reveal-dur) var(--tm-reveal-ease) var(--tm-reveal-delay), transform var(--tm-reveal-dur) var(--tm-reveal-ease) var(--tm-reveal-delay);
}

.tm-motion [data-tm-reveal="up"]:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--tm-reveal-y), 0);
}

.tm-motion [data-tm-reveal="fade"]:not(.is-revealed) {
	opacity: 0;
}

.tm-motion [data-tm-reveal="stagger"] > * {
	transition: opacity var(--tm-reveal-dur) var(--tm-reveal-ease), transform var(--tm-reveal-dur) var(--tm-reveal-ease);
	transition-delay: calc(var(--tm-reveal-delay) + var(--tm-stagger-i, 0) * .08s);
}

.tm-motion [data-tm-reveal="stagger"]:not(.is-revealed) > * {
	opacity: 0;
	transform: translate3d(0, var(--tm-reveal-y), 0);
}

/* Trong Elementor editor luôn hiện đầy đủ */
.elementor-editor-active [data-tm-reveal] *,
.elementor-editor-active [data-tm-reveal] {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-tm-reveal],
	[data-tm-reveal] *,
	.tm-btn,
	.tm-cover > img {
		transition: none !important;
	}
}

/* Khối tiêu đề section (render_section_heading) */
.tm-head.tm-center {
	max-width: 780px;
	margin-inline: auto;
}

.tm-head__text {
	margin-top: 16px;
}

.tm-head .tm-eyebrow:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Slider vuốt ngang trên mobile: lưới có [data-tm-snap] (control "Slider vuốt ngang trên mobile")
   Thẻ kế tiếp lộ một phần để gợi ý vuốt; chấm vị trí do tm-base.js tạo (.tm-snap-dots).
   ------------------------------------------------------------------------ */
.tm-snap-dots {
	display: none;
}

@media (max-width: 767px) {
	[data-tm-snap] {
		--tm-snap-w: 84%;
		--tm-snap-gutter: 20px;

		display: flex !important;
		gap: 14px !important;
		margin-inline: calc(var(--tm-snap-gutter) * -1);
		padding: 6px var(--tm-snap-gutter) 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--tm-snap-gutter);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	[data-tm-snap]::-webkit-scrollbar {
		display: none;
	}

	[data-tm-snap] > * {
		flex: 0 0 var(--tm-snap-w);
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Không nhấc thẻ khi chạm (bị cắt bởi overflow) */
	[data-tm-snap] > *:hover {
		transform: none;
	}

	.tm-snap-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 6px;
	}

	.tm-snap-dots button {
		width: 7px;
		height: 7px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: #CBD5E1;
		box-shadow: none;
		cursor: pointer;
		transition: width .3s var(--tm-ease), background-color .3s;
	}

	.tm-snap-dots button::before {
		display: none;
	}

	.tm-snap-dots button.is-active {
		width: 22px;
		background: var(--tm-red);
	}

	.tm-dark .tm-snap-dots button {
		background: rgba(255, 255, 255, .25);
	}

	.tm-dark .tm-snap-dots button.is-active {
		background: var(--tm-brass);
	}
}

/* ---------------------------------------------------------------------------
   Tiếng Việt: dấu chồng trên/dưới (ầ, ặ, ữ, ợ...) cần line-height lớn hơn tiếng Anh,
   nếu không dòng trên chạm dòng dưới. Chỉ áp cho trang lang="vi" để bản EN giữ đúng demo.
   ------------------------------------------------------------------------ */
:lang(vi) .tm-hero__title {
	line-height: 1.3;
}

:lang(vi) .tm-title,
:lang(vi) .tm-cta__title,
:lang(vi) .tm-post-head__title {
	line-height: 1.32;
}

:lang(vi) .tm-title--upper {
	line-height: 1.36;
}

:lang(vi) .tm-card__title,
:lang(vi) .tm-post-card__title,
:lang(vi) .tm-post-row__title,
:lang(vi) .tm-timeline__title,
:lang(vi) .tm-form__title,
:lang(vi) .tm-split__callout strong,
:lang(vi) .tm-split__item strong,
:lang(vi) .tm-card__steps strong,
:lang(vi) .tm-catbar__title,
:lang(vi) .tm-faq__q button {
	line-height: 1.42;
}

:lang(vi) .tm-post-content h2,
:lang(vi) .tm-post-content h3 {
	line-height: 1.4;
}

:lang(vi) .tm-eyebrow,
:lang(vi) .tm-card__label,
:lang(vi) .tm-card__subtitle,
:lang(vi) .tm-card__list-title {
	line-height: 1.45;
}

:lang(vi) .tm-btn,
:lang(vi) .tm-more {
	line-height: 1.35;
}