/* Ẩn UI mặc định xấu của Google Website Translator, tránh layout shift. */
.goog-te-banner-frame.skiptranslate {
	display: none !important;
}

body {
	top: 0 !important;
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

.hithean-google-translate-element {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* Segmented toggle "VI | EN" — cùng ngôn ngữ hình khối/màu với nav (Oswald,
   letter-spacing, xanh đậm mặc định của theme) thay vì 1 nút đổi label. */
.hithean-lang-switch {
	display: inline-flex;
	align-items: center;
	margin-left: 12px;
	padding: 2px;
	border: 1px solid var(--default-color-green-dark, #00843d);
	border-radius: 999px;
	background: var(--default-color-white, #fff);
	line-height: 1;
}

.hithean-lang-switch__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--default-color-green-dark, #00843d);
	font-family: "Oswald", sans-serif;
	font-size: 11px;
	font-weight: var(--default-button-font-weight, 500);
	letter-spacing: 1px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hithean-lang-switch__option[aria-pressed="true"] {
	background: var(--default-color-green-dark, #00843d);
	color: var(--default-color-white, #fff);
	cursor: default;
}

.hithean-lang-switch__option[aria-pressed="false"]:hover {
	background: var(--default-color-green-light, #d3e6e0);
}

/*
 * Bản trong nav (--inline) bị 2 layout header gộp vào `.row`, phần này thu
 * vào hamburger menu trên mobile nên không hiện được cho tới khi mở menu.
 * Bản --mobile-fixed render riêng vào wp_footer (ngoài toàn bộ nav/hamburger)
 * nên luôn hiện được; ẩn nó ở desktop vì bản --inline đã đủ ở đó.
 *
 * Lưu ý: layout-custom.php đặt icon hamburger bên phải (class "right"),
 * layout-center-standard.php đặt bên trái — nếu site đang dùng layout-custom,
 * chỉnh lại `right` bên dưới cho khỏi đè lên icon hamburger.
 */
.hithean-lang-switch--mobile-fixed {
	display: none;
}

@media (max-width: 768px) {
	.hithean-lang-switch--inline {
		display: none;
	}

	.hithean-lang-switch--mobile-fixed {
		display: inline-flex !important;
		position: fixed !important;
		top: 12px !important;
		right: 12px !important;
		z-index: 2147483647 !important;
		margin-left: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	}
}

/*
 * Fallback khi trang không có bản --inline nào trong nav (JS tự thêm class
 * này — xem ensureToggleVisible() trong js/language-switcher.js). Trang chủ
 * có thể dùng 1 header layout khác (của theme cha, ngoài tầm sửa của child
 * theme) không gọi hook `hithean_top_bar_after`; trường hợp đó hiện luôn bản
 * fixed góc trên-phải này kể cả ở desktop, thay vì không có toggle nào.
 */
.hithean-lang-switch--force-visible {
	display: inline-flex !important;
	position: fixed !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 2147483647 !important;
	margin-left: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/*
 * Header trên trang chủ đặt language switcher trong cột icon rất hẹp. Một
 * z-index lớn không giúp khi phần tử đã bị header cắt/che, vì vậy dùng đúng
 * bản render ở footer (ngoài header) và chỉ hiển thị bản này trên trang chủ.
 */
.hithean-lang-switch--homepage-inline {
	display: none !important;
}

.hithean-lang-switch--homepage-fixed {
	display: inline-flex !important;
	position: fixed !important;
	top: max(12px, env(safe-area-inset-top)) !important;
	right: 12px !important;
	z-index: 2147483647 !important;
	margin-left: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Non-blocking Material-style acknowledgement while Google Translate loads. */
.hithean-translation-status {
	position: fixed;
	top: 64px;
	right: 12px;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 4px;
	background: #263238;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hithean-translation-status.is-visible {
	opacity: 1;
	transform: translateY(0);
}