/* Kiểu tab HH cho widget Tabs (Nested Tabs) của Elementor — xem libs/nested-tabs-styles.php
 * Widget có class hh-tabs--line | --pill | --folder | --side | --tile.
 *
 * - Mọi màu / viền / bo góc / padding / chữ của tab là biến --hh-t-* (mỗi kiểu có giá trị mặc định riêng),
 *   mục "Kiểu tab HH" ở tab Style ghi đè các biến này cho từng widget.
 * - !important: widget Tabs mặc định in nền "accent" + font "accent" cho tiêu đề tab với selector rất dài.
 * - Tab thường = :not([aria-selected="true"]): Elementor 4.x chỉ gắn aria-selected="true" cho tab đang chọn,
 *   tab thường không có aria-selected (không dùng [aria-selected="false"]).
 */

.elementor-widget-n-tabs[class*="hh-tabs--"] {
	--hh-tabs-ink: #3e2f26;
	--hh-tabs-accent: #bb9b62;
	--hh-tabs-cream: #faf7f1;
	--hh-tabs-line: #e8e2d6;
	--hh-tabs-muted: #7a6d62;
	--hh-tabs-paper: #fff;
	--hh-tabs-gap: 22px;

	/* Tab: mặc định chung (từng kiểu ghi đè bên dưới) */
	--hh-t-color: var(--hh-tabs-muted);
	--hh-t-color-h: var(--hh-tabs-ink);
	--hh-t-color-a: var(--hh-tabs-ink);
	--hh-t-bg: transparent;
	--hh-t-bg-h: var(--hh-t-bg);
	--hh-t-bg-a: var(--hh-t-bg);
	--hh-t-bc: transparent;
	--hh-t-bc-h: var(--hh-t-bc);
	--hh-t-bc-a: var(--hh-t-bc);
	--hh-t-bw: 0px;
	--hh-t-r: 0px;
	--hh-t-pad: 10px 16px;
	--hh-t-gap: 8px;
	--hh-t-ff: Poppins, sans-serif;
	--hh-t-fs: 15px;
	--hh-t-fw: 500;
	--hh-t-fw-a: 600;
	--hh-t-tt: none;
	--hh-t-ls: normal;
	--hh-icon-color: var(--hh-tabs-accent);
	--hh-icon-color-a: var(--hh-tabs-accent);
	--hh-icon-size: 18px;

	/* Khung nội dung */
	--hh-c-bg: transparent;
	--hh-c-bc: var(--hh-tabs-line);
	--hh-c-bw: 0px;
	--hh-c-r: 0px;
	--hh-c-pad: 0px;

	/* Điện thoại / tablet: vẫn là tab (Elementor mặc định chuyển thành accordion). */
	--n-tabs-heading-display: flex !important;
	--n-tabs-content-display: flex !important;
	--n-tabs-direction: column !important;
	--n-tabs-heading-direction: row !important;
	--n-tabs-heading-width: auto !important;
}

.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs { gap: var(--hh-tabs-gap) !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-heading {
	position: relative;
	justify-content: var(--hh-tabs-justify, flex-start) !important;
	gap: var(--hh-t-gap) !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	scrollbar-width: none;
}

/* ---------- Tab (chung) ---------- */
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-heading > .e-n-tab-title {
	flex: 0 0 auto !important;
	gap: 10px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: var(--hh-t-pad) !important;
	border: var(--hh-t-bw) solid var(--hh-t-bc) !important;
	border-radius: var(--hh-t-r) !important;
	background: var(--hh-t-bg) !important;
	box-shadow: none;
	color: var(--hh-t-color) !important;
	font-family: var(--hh-t-ff) !important;
	font-size: var(--hh-t-fs) !important;
	font-style: normal !important;
	font-weight: var(--hh-t-fw) !important;
	letter-spacing: var(--hh-t-ls) !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: var(--hh-t-tt) !important;
	white-space: nowrap !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s !important;
}
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-heading > .e-n-tab-title:not([aria-selected="true"]):hover {
	background: var(--hh-t-bg-h) !important;
	border-color: var(--hh-t-bc-h) !important;
	color: var(--hh-t-color-h) !important;
}
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] {
	background: var(--hh-t-bg-a) !important;
	border-color: var(--hh-t-bc-a) !important;
	color: var(--hh-t-color-a) !important;
	font-weight: var(--hh-t-fw-a) !important;
}
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title .e-n-tab-title-text,
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title a {
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	text-align: start !important;
}
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title:focus-visible { outline: 2px solid var(--hh-tabs-accent); outline-offset: 2px; }

/* Icon: Elementor in 2 icon (thường + đang chọn); tab thường chỉ hiện icon đầu */
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title .e-n-tab-icon :is(i, svg) { color: var(--hh-icon-color) !important; fill: var(--hh-icon-color) !important; font-size: var(--hh-icon-size) !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title .e-n-tab-icon svg { width: var(--hh-icon-size) !important; height: var(--hh-icon-size) !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title[aria-selected="true"] .e-n-tab-icon :is(i, svg) { color: var(--hh-icon-color-a) !important; fill: var(--hh-icon-color-a) !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title:not([aria-selected="true"]) .e-n-tab-icon > :last-child:not(:first-child) { display: none !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title[aria-selected="true"] .e-n-tab-icon > :first-child:not(:last-child) { display: none !important; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title .e-n-tab-icon > * { transform: none !important; height: auto; opacity: 1 !important; }

/* "Tên | mô tả" */
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title-text:has(.hh-tab-sub) { flex-direction: column; align-items: flex-start; }
.elementor-widget-n-tabs[class*="hh-tabs--"] .hh-tab-sub { display: block; margin-top: 2px; color: var(--hh-tabs-muted); font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.35; text-transform: none; white-space: normal; opacity: .9; }
.elementor-widget-n-tabs:is(.hh-tabs--line, .hh-tabs--pill, .hh-tabs--folder) .e-n-tab-title-text:has(.hh-tab-sub) { flex-direction: row; align-items: baseline; gap: 6px; }
.elementor-widget-n-tabs:is(.hh-tabs--line, .hh-tabs--pill, .hh-tabs--folder) .hh-tab-sub { margin: 0; white-space: nowrap; }
.elementor-widget-n-tabs:is(.hh-tabs--pill, .hh-tabs--tile) .e-n-tab-title[aria-selected="true"] .hh-tab-sub { color: inherit; opacity: .75; }

/* ---------- Khung nội dung (chỉnh được cho mọi kiểu; mặc định chỉ kiểu Thẻ hồ sơ có khung) ---------- */
.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-content {
	padding: var(--hh-c-pad);
	border: var(--hh-c-bw) solid var(--hh-c-bc);
	border-radius: var(--hh-c-r);
	background: var(--hh-c-bg);
}

/* ---------- 1. Gạch chân trượt ---------- */
.elementor-widget-n-tabs.hh-tabs--line { --hh-t-pad: 10px 0 12px; --hh-t-gap: 28px; }
.elementor-widget-n-tabs.hh-tabs--line .e-n-tabs-heading { box-shadow: inset 0 -1px 0 var(--hh-tabs-line); }
/* Chưa có JS: gạch tĩnh dưới tab đang chọn */
.elementor-widget-n-tabs.hh-tabs--line .e-n-tabs-heading:not(.hh-bar) > .e-n-tab-title[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--hh-tabs-accent); }
.elementor-widget-n-tabs.hh-tabs--line .e-n-tabs-heading.hh-bar::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--hh-w, 0);
	height: 2px;
	background: var(--hh-tabs-accent);
	transform: translateX(var(--hh-x, 0));
	transition: transform .3s cubic-bezier(.3, .7, .3, 1), width .3s cubic-bezier(.3, .7, .3, 1);
	pointer-events: none;
}

/* ---------- 2. Viên thuốc ---------- */
.elementor-widget-n-tabs.hh-tabs--pill {
	--hh-t-pad: 8px 18px;
	--hh-t-gap: 4px;
	--hh-t-r: 999px;
	--hh-t-fs: 14px;
	--hh-t-bg-a: var(--hh-tabs-ink);
	--hh-t-color-a: #fff;
	--hh-icon-color-a: #fff;
	--hh-bar-bg: var(--hh-tabs-cream);
	--hh-bar-bc: var(--hh-tabs-line);
}
.elementor-widget-n-tabs.hh-tabs--pill .e-n-tabs-heading {
	align-self: var(--hh-tabs-self, flex-start);
	max-width: 100%;
	padding: 5px;
	border: 1px solid var(--hh-bar-bc);
	border-radius: 999px;
	background: var(--hh-bar-bg);
}
.elementor-widget-n-tabs.hh-tabs--pill .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] { box-shadow: 0 2px 6px rgba(62, 47, 38, .25); }

/* ---------- 3. Thẻ hồ sơ ---------- */
.elementor-widget-n-tabs.hh-tabs--folder {
	--hh-tabs-gap: 0px;
	--hh-t-pad: 10px 20px;
	--hh-t-gap: 4px;
	--hh-t-fs: 14px;
	--hh-t-r: 8px 8px 0 0;
	--hh-t-bw: 1px;
	--hh-t-bc: var(--hh-tabs-line);
	--hh-t-bg: var(--hh-tabs-cream);
	--hh-t-bg-a: var(--hh-tabs-paper);
	--hh-c-bg: var(--hh-tabs-paper);
	--hh-c-bw: 1px;
	--hh-c-r: 0 0 8px 8px;
	--hh-c-pad: 22px;
}
.elementor-widget-n-tabs.hh-tabs--folder .e-n-tabs-heading { align-items: flex-end; padding-left: 8px; box-shadow: inset 0 calc(-1 * var(--hh-c-bw)) 0 var(--hh-c-bc); }
/* Tab thường cao hơn đường kẻ 1 chút; tab đang mở phủ lên đường kẻ, liền với khung nội dung */
.elementor-widget-n-tabs.hh-tabs--folder .e-n-tabs-heading > .e-n-tab-title { border-bottom-width: 0 !important; margin-bottom: var(--hh-c-bw) !important; }
.elementor-widget-n-tabs.hh-tabs--folder .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] { margin-bottom: 0 !important; box-shadow: inset 0 3px 0 var(--hh-tabs-accent); }
.elementor-widget-n-tabs.hh-tabs--folder .e-n-tabs-content { border-top: 0; }

/* ---------- 4. Dọc có icon ---------- */
.elementor-widget-n-tabs.hh-tabs--side {
	--hh-tabs-gap: 32px;
	--hh-t-pad: 12px 14px;
	--hh-t-gap: 2px;
	--hh-t-r: 6px 0 0 6px;
	--hh-t-bg-h: var(--hh-tabs-cream);
	--hh-t-bg-a: var(--hh-tabs-cream);
	--n-tabs-direction: row !important;
	--n-tabs-heading-direction: column !important;
	--n-tabs-heading-width: var(--hh-tabs-side-w, 240px) !important;
}
/* Tab chạm sát đường kẻ dọc (bo góc chỉ bên trái); --hh-side-gap / --hh-side-line chỉnh ở tab Style */
.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading { padding-right: var(--hh-side-gap, 0px); overflow: visible !important; box-shadow: inset -1px 0 0 var(--hh-side-line, var(--hh-tabs-line)); }
.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading > .e-n-tab-title { justify-content: flex-start !important; align-items: center !important; white-space: normal !important; text-align: start; }
.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--hh-tabs-accent); }

/* ---------- 5. Ô lớn ---------- */
.elementor-widget-n-tabs.hh-tabs--tile {
	--hh-t-pad: 14px;
	--hh-t-gap: 10px;
	--hh-t-r: 8px;
	--hh-t-bw: 1px;
	--hh-t-fs: 14px;
	--hh-t-fw: 600;
	--hh-t-color: var(--hh-tabs-ink);
	--hh-t-color-a: #fff;
	--hh-t-bg: var(--hh-tabs-paper);
	--hh-t-bg-a: var(--hh-tabs-ink);
	--hh-t-bc: var(--hh-tabs-line);
	--hh-t-bc-h: var(--hh-tabs-accent);
	--hh-t-bc-a: var(--hh-t-bg-a);
	--hh-icon-size: 24px;
}
.elementor-widget-n-tabs.hh-tabs--tile .e-n-tabs-heading { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: visible !important; }
.elementor-widget-n-tabs.hh-tabs--tile .e-n-tabs-heading > .e-n-tab-title {
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	min-width: 0;
	white-space: normal !important;
	text-align: start;
}
.elementor-widget-n-tabs.hh-tabs--tile .e-n-tab-title .e-n-tab-icon { order: -1 !important; }

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
	.elementor-widget-n-tabs[class*="hh-tabs--"] { --hh-tabs-gap: 18px; }
	.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tabs-heading { justify-content: flex-start !important; }
	.elementor-widget-n-tabs:is(.hh-tabs--line, .hh-tabs--pill, .hh-tabs--folder) .hh-tab-sub { display: none; }
	.elementor-widget-n-tabs.hh-tabs--line { --hh-t-gap: 22px; }
	.elementor-widget-n-tabs.hh-tabs--pill { --hh-t-pad: 7px 14px; }
	.elementor-widget-n-tabs.hh-tabs--folder { --hh-tabs-gap: 0px; --hh-t-pad: 9px 14px; --hh-c-pad: 16px; }
	.elementor-widget-n-tabs.hh-tabs--folder .e-n-tabs-heading { padding-left: 0; }

	/* Dọc → hàng ngang vuốt được, gạch vàng dưới tab đang chọn */
	.elementor-widget-n-tabs.hh-tabs--side {
		--hh-tabs-gap: 18px;
		--hh-t-pad: 9px 12px;
		--hh-t-gap: 4px;
		--hh-t-r: 0px;
		--hh-t-fs: 14px;
		--hh-t-bg-h: transparent;
		--hh-t-bg-a: transparent;
		--n-tabs-direction: column !important;
		--n-tabs-heading-direction: row !important;
		--n-tabs-heading-width: auto !important;
	}
	.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading { padding: 0; overflow-x: auto !important; box-shadow: inset 0 -1px 0 var(--hh-side-line, var(--hh-tabs-line)); }
	.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading > .e-n-tab-title { white-space: nowrap !important; }
	.elementor-widget-n-tabs.hh-tabs--side .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--hh-tabs-accent); }
	.elementor-widget-n-tabs.hh-tabs--side .hh-tab-sub { display: none; }

	/* Ô lớn → hàng ô vuốt ngang */
	.elementor-widget-n-tabs.hh-tabs--tile .e-n-tabs-heading { display: flex !important; overflow-x: auto !important; padding-bottom: 2px; }
	.elementor-widget-n-tabs.hh-tabs--tile .e-n-tabs-heading > .e-n-tab-title { flex: 0 0 140px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-n-tabs[class*="hh-tabs--"] .e-n-tab-title,
	.elementor-widget-n-tabs.hh-tabs--line .e-n-tabs-heading.hh-bar::after { transition: none !important; }
}