/**
 * Flatsome: submenu cấp 3 trong header (ul.sub-menu.nav-column).
 * Anchor: chỉ áp desktop; mobile giữ UX slide của theme.
 */

@media screen and (min-width: 850px) {

	.header-nav .nav-dropdown li.menu-item-has-children:has(> ul.sub-menu.nav-column) {
		position: relative;
	}

	/*
	 * Fix dropdown cấp 2 bị chia cột (nav-dropdown-col = table-cell) khi menu có cấp 3.
	 * Đưa về dạng dropdown 1 cột; cấp 3 sẽ fly-out theo rule bên dưới.
	 */
	.header-nav .nav-dropdown:not(.nav-dropdown-full) > li.nav-dropdown-col {
		display: block;
		width: auto;
		min-width: 0;
		white-space: normal;
		border-right: 0 !important;
	}

	.header-nav .nav-dropdown:not(.nav-dropdown-full) > li.nav-dropdown-col > a {
		color: inherit;
		font-weight: 500;
		font-size: 0.9em;
		text-transform: none;
	}

	/* Pan con cấp 3+: fly-out sang phải, khớp stacking với dropdown gốc */
	.header-nav .nav-dropdown li.menu-item-has-children > ul.sub-menu.nav-column {
		position: absolute;
		left: calc(100% - 6px);
		top: 0;
		z-index: 19;
		min-width: 200px;
		margin: 0 !important;
		padding: 10px 0 !important;
		white-space: normal;
		text-align: left;
		display: block;
		list-style: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(6px);
		transition:
			opacity 0.22s ease,
			visibility 0.22s ease,
			transform 0.22s ease;
		background-color: #fff;
		box-shadow:
			0 8px 24px rgba(0, 0, 0, 0.08),
			0 0 1px rgba(0, 0, 0, 0.06);
		border-radius: 4px;
	}

	html[dir="rtl"] .header-nav .nav-dropdown li.menu-item-has-children > ul.sub-menu.nav-column {
		left: auto;
		right: calc(100% - 6px);
		transform: translateX(-6px);
		text-align: right;
	}

	html[dir="rtl"] .header-nav .nav-dropdown li.menu-item-has-children:hover > ul.sub-menu.nav-column,
	html[dir="rtl"] .header-nav .nav-dropdown li.menu-item-has-children.current-dropdown > ul.sub-menu.nav-column {
		transform: translateX(0);
	}

	.header-nav .nav-dropdown.nav-dropdown-bold li.menu-item-has-children > ul.sub-menu.nav-column {
		padding: 8px !important;
	}

	.header-nav .nav-dropdown li.menu-item-has-children:hover > ul.sub-menu.nav-column,
	.header-nav .nav-dropdown li.menu-item-has-children.current-dropdown > ul.sub-menu.nav-column {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
	}

	/* Link cấp 3: không dùng style heading như nhãn cột */
	.header-nav .nav-dropdown li.menu-item-has-children > ul.sub-menu.nav-column > li > a {
		font-weight: 500;
		font-size: 0.9em;
		text-transform: none;
		padding: 8px 16px !important;
		margin: 0 8px !important;
		line-height: 1.35;
	}

	.header-nav .nav-dropdown.nav-dropdown-bold li.menu-item-has-children > ul.sub-menu.nav-column > li > a {
		border-radius: 6px;
	}

	/* Dropdown tối (Customizer / preset dark) */
	.header-nav .nav-dropdown.dark li.menu-item-has-children > ul.sub-menu.nav-column {
		background-color: #2d2d2d;
		color: #ececec;
		box-shadow:
			0 8px 28px rgba(0, 0, 0, 0.35),
			0 0 1px hsla(0, 0%, 100%, 0.06);
	}

	.header-nav .nav-dropdown.dark li.menu-item-has-children > ul.sub-menu.nav-column > li > a {
		color: hsla(0, 0%, 100%, 0.82);
	}

}