/*!
 * Thắng Decor – CSS bổ trợ cho Salient 14.0.2.
 *
 * Chỉ chứa phần Salient Options / WPBakery không có tùy chọn tương ứng. Màu nền, font,
 * header, footer, nút và section cấu hình trong Salient (xem SALIENT_MAPPING.md).
 * Palette cuối: Gold #D6A84B (điểm nhấn ~10%), Charcoal #20211F, White #FFFFFF,
 * Off-white #F8F7F2. Không gradient. Mọi selector nằm trong body.td-theme.
 *
 * 1. Biến màu
 * 2. Chữ charcoal trên nền vàng (nút Salient)
 * 3. Vòng focus bàn phím
 * 4. Giảm chuyển động (prefers-reduced-motion)
 * 5. Thanh CTA mobile (chỉ xuất hiện khi THANGDECOR_MOBILE_CTA = true)
 * 6. In ấn
 */

/* 1. Biến màu ---------------------------------------------------------------- */

:root {
	--td-gold: #d6a84b;
	--td-charcoal: #20211f;
	--td-white: #fff;
	--td-offwhite: #f8f7f2;
	--td-line: rgba(32, 33, 31, 0.14);    /* charcoal 14% – viền mảnh */
	--td-mobile-cta-h: 68px;
}

body.td-theme .td-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 2. Chữ charcoal trên nền vàng -------------------------------------------------
 * Salient 14.0.2 luôn dùng chữ trắng cho nút kiểu Regular (đo trên live: trắng trên
 * #D6A84B = 2.20:1, không đạt WCAG AA). Tùy chọn màu chữ của nút (data-color-override /
 * data-hover-text-color-override) chỉ áp dụng cho kiểu See Through, nên không cấu hình
 * được trong Salient. Charcoal trên #D6A84B = 7.33:1.
 * !important để thắng màu chữ Salient đặt bằng !important / JS inline khi hover.
 * Chỉ áp dụng cho nút nền Accent (vàng); nút màu khác giữ nguyên của Salient.
 */

body.td-theme .nectar-button.regular.accent-color,
body.td-theme .nectar-button.regular.accent-color:hover,
body.td-theme .nectar-button.regular.accent-color:focus,
body.td-theme .nectar-button.regular.accent-color span,
body.td-theme .nectar-button.regular.accent-color i,
body.td-theme .nectar-button.regular-button.accent-color,
body.td-theme .nectar-button.regular-button.accent-color:hover,
body.td-theme .nectar-button.regular-button.accent-color span,
body.td-theme #header-outer #top nav > ul > li.button_solid_color > a,
body.td-theme #header-outer #top nav > ul > li.button_solid_color > a:hover,
body.td-theme #header-outer #top nav > ul > li.button_solid_color > a .sf-sub-indicator i {
	color: var(--td-charcoal) !important;
}

/* 3. Vòng focus bàn phím -----------------------------------------------------------
 * Salient đặt outline: none cho link menu/nội dung (đo trên live: mất viền từ phím Tab
 * thứ 3). Vòng hai lớp: charcoal sát phần tử (16:1 trên nền trắng) + vàng bên ngoài
 * (7.36:1 trên nền charcoal). Chỉ hiện khi dùng bàn phím (:focus-visible).
 */

body.td-theme :focus-visible,
body.td-theme #header-outer :focus-visible,
body.td-theme #slide-out-widget-area :focus-visible,
body.td-theme #footer-outer :focus-visible {
	outline: 3px solid var(--td-gold);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--td-charcoal);
}

/* 4. Giảm chuyển động ---------------------------------------------------------------
 * Áp dụng cả cho animation/parallax của Salient khi người dùng bật "giảm chuyển động".
 */

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

	body.td-theme *,
	body.td-theme *::before,
	body.td-theme *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 5. Thanh CTA mobile -----------------------------------------------------------------
 * Nền trắng, viền mảnh; vàng chỉ ở nút Gọi (CTA chính); Zalo và Báo giá dùng màu trung tính.
 */

body.td-theme .td-mobile-cta,
body.td-theme .td-mobile-cta * {
	box-sizing: border-box;
}

body.td-theme .td-mobile-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	display: flex;
	gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
	background-color: var(--td-white);
	/* Đường viền trên vẽ bằng box-shadow để chiều cao thanh đúng bằng --td-mobile-cta-h. */
	box-shadow: 0 -1px 0 var(--td-line), 0 -4px 16px rgba(32, 33, 31, 0.08);
}

body.td-theme .td-mobile-cta .td-mobile-cta__item {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 52px;
	padding: 6px 10px;
	border: 2px solid transparent;
	border-radius: 8px;
	color: var(--td-charcoal);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

body.td-theme .td-mobile-cta .td-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

body.td-theme .td-mobile-cta__label {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.td-theme .td-mobile-cta__meta {
	font-size: 12.5px;
	font-weight: 400;
	white-space: nowrap;
}

/* CTA chính: nền vàng, chữ charcoal (7.33:1). */
body.td-theme .td-mobile-cta .td-mobile-cta__item--call {
	background-color: var(--td-gold);
	color: var(--td-charcoal);
}

/* Zalo: trung tính – nền off-white, viền mảnh. */
body.td-theme .td-mobile-cta .td-mobile-cta__item--zalo {
	border-color: var(--td-line);
	background-color: var(--td-offwhite);
	color: var(--td-charcoal);
}

/* Báo giá: trung tính – viền charcoal trên nền trắng. */
body.td-theme .td-mobile-cta .td-mobile-cta__item--quote {
	border-color: var(--td-charcoal);
	background-color: var(--td-white);
	color: var(--td-charcoal);
}

body.td-theme .td-mobile-cta .td-mobile-cta__item:hover {
	box-shadow: inset 0 0 0 1px var(--td-charcoal);
	color: var(--td-charcoal);
}

/* Điện thoại có đủ 3 nút (khi bật Zalo): icon nằm trên chữ, ẩn dòng số phụ để không tràn. */
@media (max-width: 479px) {
	body.td-theme .td-mobile-cta .td-mobile-cta__item:first-child:nth-last-child(3),
	body.td-theme .td-mobile-cta .td-mobile-cta__item:first-child:nth-last-child(3) ~ .td-mobile-cta__item {
		flex-direction: column;
		gap: 3px;
		padding: 4px;
		font-size: 13px;
		text-align: center;
	}

	body.td-theme .td-mobile-cta .td-mobile-cta__item:first-child:nth-last-child(3) .td-mobile-cta__meta {
		display: none;
	}
}

/* Màn ≤ 374px có 3 nút: bỏ icon để nhãn 2 dòng vẫn nằm trong nút cao 52px. */
@media (max-width: 374px) {
	body.td-theme .td-mobile-cta .td-mobile-cta__item:first-child:nth-last-child(3) .td-icon,
	body.td-theme .td-mobile-cta .td-mobile-cta__item:first-child:nth-last-child(3) ~ .td-mobile-cta__item .td-icon {
		display: none;
	}
}

@media (forced-colors: active) {
	body.td-theme .td-mobile-cta .td-mobile-cta__item {
		border-color: ButtonText;
	}
}

/* Salient 14.0.2: menu mobile/off-canvas hiện ở < 1000px (body data-header-breakpoint="1000"). */
@media (max-width: 999px) {
	body.td-theme.td-has-mobile-cta {
		padding-bottom: calc(var(--td-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
	}

	/* Nút "Back to top" của Salient (#to-top, hiện đang tắt trên live) không bị thanh CTA che. */
	body.td-theme.td-has-mobile-cta #to-top {
		bottom: calc(var(--td-mobile-cta-h) + 16px + env(safe-area-inset-bottom, 0px));
	}

	/* Salient thêm body.material-ocm-open khi menu off-canvas mở (đã kiểm tra trên live). */
	body.td-theme.material-ocm-open .td-mobile-cta {
		visibility: hidden;
	}
}

@media (min-width: 1000px) {
	body.td-theme .td-mobile-cta {
		display: none;
	}
}

/* 6. In ấn ------------------------------------------------------------------------------ */

@media print {
	body.td-theme .td-mobile-cta {
		display: none !important;
	}

	body.td-theme.td-has-mobile-cta {
		padding-bottom: 0;
	}
}