/**
 * DS Elements — Menu danh mục (dropdown của Mega Menu)
 *
 * Xếp bằng multi-column (column-width = --ds-mt-min), KHÔNG dùng grid: mục có
 * term con (Tạp dề có 5 kiểu) cao gấp 4 mục thường, trong grid nó kéo cả hàng
 * cao theo và để lại khoảng trắng dưới 4 mục kia. Cột dọc thì các mục ngắn tự
 * lấp xuống. Số cột vẫn tự theo chỗ đứng (dropdown 1200 hay accordion mobile).
 */

.elementor-widget-ds-menu-terms {
	width: 100%;
	min-width: 0;
}

.ds-mt {
	--ds-mt-min: 200px;
	--ds-mt-thumb: 56px;
	--ds-mt-img-pos: center center;

	width: 100%;
}

.ds-mt *,
.ds-mt *::before,
.ds-mt *::after {
	box-sizing: border-box;
}

.ds-mt__grid {
	columns: var(--ds-mt-min) auto;
	column-gap: var(--ds-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-mt__item {
	min-width: 0;
	padding-bottom: var(--ds-space-3);
	break-inside: avoid;
}

.ds-mt__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	padding: var(--ds-space-2);
	border-radius: var(--ds-radius-md);
	transition: background-color var(--ds-transition);
}

/* <a> chỉ bọc chữ để anchor text đúng; ::after phủ kín thẻ nên bấm vào ảnh
   hay khoảng trống vẫn đi tới trang ngành. */
.ds-mt__link {
	color: var(--ds-mt-name-color, var(--ds-color-heading));
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-tight);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds-mt__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ds-mt__card:hover,
.ds-mt__card:focus-within,
.ds-mt__card.is-current {
	background: var(--ds-color-surface);
}

.ds-mt__card:hover .ds-mt__link,
.ds-mt__link:focus-visible,
.ds-mt__card.is-current .ds-mt__link {
	color: var(--ds-mt-hover, var(--ds-color-brand-light));
}

/* Term con nằm NGOÀI .ds-mt__card nên lớp phủ ::after không che được chúng. */

.ds-mt__thumb {
	flex: none;
	width: var(--ds-mt-thumb);
	height: var(--ds-mt-thumb);
	overflow: hidden;
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-surface);
}

/* aspect/size đặt thẳng trên img + height, khung có overflow:hidden (xem bẫy
   aspect-ratio trong CLAUDE.md) */
.ds-mt__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ds-mt-img-pos);
}

.ds-mt__name {
	min-width: 0;
}

.ds-mt__sub {
	margin: var(--ds-space-1) 0 0;
	padding: 0 0 0 calc(var(--ds-mt-thumb) + var(--ds-space-2) + var(--ds-space-3));
	list-style: none;
}

.ds-mt__sublink {
	display: block;
	padding: calc(var(--ds-space-1) / 2) 0;
	color: var(--ds-color-body);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds-mt__sublink:hover,
.ds-mt__sublink:focus-visible {
	color: var(--ds-mt-hover, var(--ds-color-brand-light));
}

.ds-mt__more {
	display: inline-block;
	margin-top: var(--ds-space-4);
	color: var(--ds-color-brand-light);
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-nav);
	text-transform: uppercase;
	text-decoration: none;
}

.ds-mt__more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Kiểu tabs: cột trái term cha, bảng phải banner + term con           */
/* ------------------------------------------------------------------ */

/* Đổi bố cục theo bề rộng CHỖ ĐỨNG (dropdown 1120 hay accordion 343),
   không theo màn hình — xem bẫy container query trong CLAUDE.md. */
.elementor-widget-ds-menu-terms {
	container-type: inline-size;
}

.ds-mt--tabs {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--ds-space-8);
	align-items: start;
}

.ds-mt__side {
	margin: 0;
	padding: 0 var(--ds-space-6) 0 0;
	border-right: 1px solid var(--ds-color-border);
	list-style: none;
}

.ds-mt__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-2);
	padding: var(--ds-space-2) var(--ds-space-3);
	border-radius: var(--ds-radius-md);
	color: var(--ds-mt-name-color, var(--ds-color-heading));
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-base);
	text-decoration: none;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ds-mt__tab::after {
	content: "›";
	color: var(--ds-color-muted);
	font-size: var(--ds-fs-h4);
	line-height: 1;
}

.ds-mt__tab.is-active,
.ds-mt__tab:focus-visible {
	background: var(--ds-color-surface);
	color: var(--ds-mt-hover, var(--ds-color-brand-light));
}

.ds-mt__tab.is-active::after {
	color: inherit;
}

/* Con hiện ngay dưới cha chỉ ở accordion hẹp (xem @container cuối file) */
.ds-mt__sub--inline {
	display: none;
}

.ds-mt__panel {
	display: none;
}

.ds-mt__panel.is-active {
	display: block;
}

.ds-mt__banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 200px;
	overflow: hidden;
	border-radius: var(--ds-radius-md);
	background: var(--ds-color-brand);
	color: var(--ds-color-white);
	text-decoration: none;
}

/* Ảnh hero danh mục: ngang, người ở mép phải -> neo phải; khung có
   overflow:hidden và ảnh position:absolute nên không dính bẫy aspect-ratio */
.ds-mt__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* Phủ navy bên trái để chữ đọc được, cùng tinh thần lớp phủ hero */
.ds-mt__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--ds-color-brand) 30%, color-mix(in srgb, var(--ds-color-brand) 0%, transparent) 70%);
}

.ds-mt__banner-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ds-space-2);
	max-width: 50%;
	padding: var(--ds-space-6) var(--ds-space-8);
}

.ds-mt__banner-title {
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
	text-transform: uppercase;
}

.ds-mt__banner-desc {
	color: var(--ds-color-on-dark-muted);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-mt__banner-btn {
	margin-top: var(--ds-space-2);
	padding: var(--ds-space-2) var(--ds-space-4);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-accent);
	color: var(--ds-color-white);
	font-size: var(--ds-fs-button);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-button);
	line-height: var(--ds-lh-button);
	text-transform: uppercase;
	transition: background-color var(--ds-transition);
}

.ds-mt__banner:hover .ds-mt__banner-btn {
	background: var(--ds-color-accent-dark);
}

.ds-mt__children {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ds-space-3);
	margin: var(--ds-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.ds-mt__child {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	height: 100%;
	padding: var(--ds-space-2) var(--ds-space-3);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-md);
	color: var(--ds-mt-name-color, var(--ds-color-heading));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-tight);
	text-decoration: none;
	transition: border-color var(--ds-transition), color var(--ds-transition);
}

.ds-mt__child.is-noimg {
	min-height: 56px;
}

.ds-mt__child:hover,
.ds-mt__child:focus-visible {
	border-color: var(--ds-color-brand-light);
	color: var(--ds-mt-hover, var(--ds-color-brand-light));
}

.ds-mt__child .ds-mt__thumb {
	--ds-mt-thumb: 40px;
}

/* Accordion của menu mobile/tablet (rộng ≤ 788px): bỏ bảng phải — màn cảm ứng
   không rê chuột được — con hiện ngay dưới cha. Dropdown desktop rộng 1120. */
@container (max-width: 900px) {
	.ds-mt--tabs {
		display: block;
	}

	.ds-mt__side {
		padding: 0;
		border-right: 0;
	}

	.ds-mt__tab::after {
		content: none;
	}

	.ds-mt__tab.is-active {
		background: none;
		color: var(--ds-mt-name-color, var(--ds-color-heading));
	}

	.ds-mt__sub--inline {
		display: block;
		margin: 0 0 var(--ds-space-2);
		padding-left: var(--ds-space-6);
	}

	.ds-mt__panels {
		display: none;
	}
}

/* Đang đứng ở trang danh mục nào thì tên danh mục đó tô xanh */
.ds-mt__tab.is-current {
	color: var(--ds-mt-hover, var(--ds-color-brand-light));
}