/**
 * Menu mobile fullscreen trắng + drill-down submenu (#003c81).
 */
@media (max-width: 767px) {
	#brx-header .bricks-mobile-menu-overlay,
	.brxe-nav-menu .bricks-mobile-menu-overlay {
		background: rgba(255, 255, 255, 0.72) !important;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	#brx-header .bricks-mobile-menu-wrapper,
	.brxe-nav-menu .bricks-mobile-menu-wrapper,
	.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper,
	.brxe-nav-menu .bricks-mobile-menu-wrapper.left,
	.brxe-nav-menu .bricks-mobile-menu-wrapper.right,
	#brx-header .bricks-mobile-menu-wrapper.qk-mobile-menu-modern,
	.brxe-nav-menu .bricks-mobile-menu-wrapper.qk-mobile-menu-modern {
		--qk-menu-bg: #ffffff;
		--qk-menu-text: #0f1f3d;
		--qk-menu-muted: #94a3b8;
		--qk-menu-brand: #003c81;
		--qk-menu-brand-soft: #eef4fc;
		--qk-menu-brand-hover: #0a4d9c;
		--qk-menu-cta-text: #ffffff;

		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: calc(var(--bricks-vh, 1vh) * 100) !important;
		max-height: calc(var(--bricks-vh, 1vh) * 100) !important;
		min-height: calc(var(--bricks-vh, 1vh) * 100) !important;
		margin: 0 !important;
		padding:
			max(1.25rem, env(safe-area-inset-top, 0px))
			clamp(1.25rem, 5vw, 1.75rem)
			max(1.1rem, env(safe-area-inset-bottom, 0px)) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		align-content: stretch !important;
		flex-wrap: nowrap !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		background: var(--qk-menu-bg) !important;
		border: 0 !important;
		box-shadow: none !important;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.28s ease,
			visibility 0.28s ease;
		z-index: 100000 !important;
	}

	.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper,
	.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper.left,
	.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper.right {
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#brx-header .bricks-mobile-menu-wrapper::before,
	.brxe-nav-menu .bricks-mobile-menu-wrapper::before {
		display: none !important;
	}

	.qk-mobile-menu-stage {
		position: relative;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	#brx-header .bricks-mobile-menu-wrapper .brxe-section,
	#brx-header .bricks-mobile-menu-wrapper .brxe-container,
	#brx-header .bricks-mobile-menu-wrapper .brxe-block,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-section,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-container,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-block {
		min-height: 0 !important;
		height: auto !important;
		flex-grow: 0 !important;
		background: transparent !important;
	}

	#brx-header .bricks-mobile-menu,
	.brxe-nav-menu .bricks-mobile-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: clamp(0.15rem, 1.2vw, 0.35rem) !important;
		flex: 1 1 auto !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: clamp(0.35rem, 1.5vw, 0.65rem) 0 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		list-style: none !important;
		-webkit-overflow-scrolling: touch;
	}

	#brx-header .bricks-mobile-menu > li,
	.brxe-nav-menu .bricks-mobile-menu > li {
		flex: 0 0 auto !important;
		width: 100% !important;
		margin: 0 !important;
		border: 0 !important;
	}

	#brx-header .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta),
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) {
		border-bottom: 0 !important;
	}

	#brx-header .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > a,
	#brx-header .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > .brx-submenu-toggle > a,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > a,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > .brx-submenu-toggle > a {
		display: flex !important;
		align-items: center !important;
		gap: clamp(0.85rem, 3.5vw, 1.05rem) !important;
		width: 100% !important;
		min-height: 3.75rem;
		padding: clamp(0.55rem, 2vw, 0.75rem) 0 !important;
		font-size: clamp(1.02rem, 4.4vw, 1.12rem) !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		letter-spacing: -0.018em;
		color: var(--qk-menu-text) !important;
		text-decoration: none !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0.85rem;
		box-shadow: none !important;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	@media (hover: hover) {
		#brx-header .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > a:hover,
		#brx-header .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > .brx-submenu-toggle > a:hover,
		.brxe-nav-menu .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > a:hover,
		.brxe-nav-menu .bricks-mobile-menu > li.menu-item:not(.qk-mobile-menu-cta) > .brx-submenu-toggle > a:hover {
			color: var(--qk-menu-brand) !important;
			background: var(--qk-menu-brand-soft) !important;
		}
	}

	.qk-mobile-menu-item__icon {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.65rem;
		height: 2.65rem;
		border-radius: 0.85rem;
		color: #ffffff;
	}

	.qk-mobile-menu-item__icon svg {
		width: 1.25rem;
		height: 1.25rem;
		display: block;
	}

	.qk-mobile-menu-item__icon--about {
		background: linear-gradient(145deg, #2563eb, #60a5fa);
		box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.8);
	}

	.qk-mobile-menu-item__icon--services {
		background: linear-gradient(145deg, #6d28d9, #a78bfa);
		box-shadow: 0 10px 22px -12px rgba(109, 40, 217, 0.8);
	}

	.qk-mobile-menu-item__icon--knowledge {
		background: linear-gradient(145deg, #0f766e, #5eead4);
		box-shadow: 0 10px 22px -12px rgba(15, 118, 110, 0.8);
	}

	.qk-mobile-menu-item__icon--contact {
		background: linear-gradient(145deg, #ea580c, #fdba74);
		box-shadow: 0 10px 22px -12px rgba(234, 88, 12, 0.8);
	}

	.qk-mobile-menu-item__icon--default {
		background: linear-gradient(145deg, #003c81, #2f6cc2);
		box-shadow: 0 10px 22px -12px rgba(0, 60, 129, 0.8);
	}

	.qk-mobile-menu-item__label {
		flex: 1 1 auto;
		min-width: 0;
	}

	.qk-mobile-menu-item__chevron {
		flex: 0 0 auto;
		width: 0.48rem;
		height: 0.48rem;
		margin-right: 0.35rem;
		border-right: 2px solid var(--qk-menu-muted);
		border-bottom: 2px solid var(--qk-menu-muted);
		opacity: 0.65;
		transform: rotate(-45deg);
	}

	#brx-header .bricks-mobile-menu > li.menu-item.current-menu-item:not(.qk-mobile-menu-cta) > a,
	#brx-header .bricks-mobile-menu > li.menu-item.current-menu-ancestor:not(.qk-mobile-menu-cta) > a,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item.current-menu-item:not(.qk-mobile-menu-cta) > a,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item.current-menu-ancestor:not(.qk-mobile-menu-cta) > a {
		color: var(--qk-menu-brand) !important;
		background: var(--qk-menu-brand-soft) !important;
	}

	#brx-header .bricks-mobile-menu > li.menu-item.current-menu-item:not(.qk-mobile-menu-cta) .qk-mobile-menu-item__chevron,
	#brx-header .bricks-mobile-menu > li.menu-item.current-menu-ancestor:not(.qk-mobile-menu-cta) .qk-mobile-menu-item__chevron,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item.current-menu-item:not(.qk-mobile-menu-cta) .qk-mobile-menu-item__chevron,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item.current-menu-ancestor:not(.qk-mobile-menu-cta) .qk-mobile-menu-item__chevron {
		border-color: var(--qk-menu-brand);
		opacity: 1;
	}

	/* Drill-down submenu — full trắng, trượt từ phải */
	#brx-header .bricks-mobile-menu > li.menu-item-has-children.qk-mobile-menu-drill-active,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item-has-children.qk-mobile-menu-drill-active {
		position: static !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
		visibility: visible !important;
		pointer-events: none !important;
	}

	#brx-header .bricks-mobile-menu > li.menu-item-has-children > .sub-menu,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item-has-children > .sub-menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: clamp(0.15rem, 1.2vw, 0.35rem) !important;
		margin: 0 !important;
		padding:
			max(1.25rem, env(safe-area-inset-top, 0px))
			clamp(1.25rem, 5vw, 1.75rem)
			max(1.1rem, env(safe-area-inset-bottom, 0px)) !important;
		list-style: none !important;
		background: #ffffff !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.24s ease,
			visibility 0.24s ease;
		z-index: 100001 !important;
		pointer-events: none;
		box-sizing: border-box;
	}

	#brx-header .bricks-mobile-menu > li.menu-item-has-children.qk-mobile-menu-drill-active > .sub-menu,
	.brxe-nav-menu .bricks-mobile-menu > li.menu-item-has-children.qk-mobile-menu-drill-active > .sub-menu {
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.qk-mobile-menu-drill-open #brx-header .bricks-mobile-menu > li.qk-mobile-menu-cta,
	.qk-mobile-menu-drill-open .brxe-nav-menu .bricks-mobile-menu > li.qk-mobile-menu-cta,
	.qk-mobile-menu-drill-open #brx-header .bricks-mobile-menu > li:not(.qk-mobile-menu-drill-active),
	.qk-mobile-menu-drill-open .brxe-nav-menu .bricks-mobile-menu > li:not(.qk-mobile-menu-drill-active) {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.qk-mobile-menu-back {
		list-style: none !important;
		margin: 0 0 clamp(0.35rem, 1.5vw, 0.55rem) !important;
		padding: 0 !important;
	}

	.qk-mobile-menu-back__btn {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.35rem 0.15rem 0.65rem;
		border: 0;
		background: transparent;
		color: var(--qk-menu-brand);
		font: inherit;
		font-size: clamp(0.98rem, 4vw, 1.05rem);
		font-weight: 700;
		cursor: pointer;
	}

	.qk-mobile-menu-back__chevron {
		width: 0.48rem;
		height: 0.48rem;
		border-left: 2px solid var(--qk-menu-brand);
		border-bottom: 2px solid var(--qk-menu-brand);
		transform: rotate(45deg);
		margin-left: 0.15rem;
	}

	#brx-header .bricks-mobile-menu .brx-submenu-toggle > button,
	.brxe-nav-menu .bricks-mobile-menu .brx-submenu-toggle > button {
		display: none !important;
	}

	#brx-header .bricks-mobile-menu > li.qk-mobile-menu-cta,
	.brxe-nav-menu .bricks-mobile-menu > li.qk-mobile-menu-cta {
		display: flex !important;
		justify-content: stretch !important;
		margin-top: auto !important;
		padding-top: clamp(1rem, 4vw, 1.35rem) !important;
		border-top: 0 !important;
		list-style: none !important;
		flex-shrink: 0;
	}

	#brx-header .bricks-mobile-menu > li.qk-mobile-menu-cta > a,
	#brx-header .bricks-mobile-menu > li.qk-mobile-menu-cta > .brx-submenu-toggle > a,
	.brxe-nav-menu .bricks-mobile-menu > li.qk-mobile-menu-cta > a,
	.brxe-nav-menu .bricks-mobile-menu > li.qk-mobile-menu-cta > .brx-submenu-toggle > a,
	#brx-header .bricks-mobile-menu-wrapper .brxe-button,
	#brx-header .bricks-mobile-menu-wrapper .brxe-button a,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-button,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-button a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.55rem !important;
		width: 100% !important;
		max-width: 100%;
		min-height: 3.15rem !important;
		margin: 0 !important;
		padding: clamp(0.82rem, 3.2vw, 0.95rem) clamp(1.1rem, 4vw, 1.35rem) !important;
		font-size: clamp(0.96rem, 3.8vw, 1.03rem) !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		color: var(--qk-menu-cta-text) !important;
		background: linear-gradient(135deg, var(--qk-menu-brand), #1565c0) !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow: 0 14px 32px -16px rgba(0, 60, 129, 0.9) !important;
		text-decoration: none !important;
		white-space: nowrap;
	}

	.qk-mobile-menu-cta__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.35rem;
		height: 1.35rem;
		color: #ffffff;
	}

	.qk-mobile-menu-cta__icon svg {
		width: 1.15rem;
		height: 1.15rem;
		display: block;
	}

	#brx-header .bricks-mobile-menu > li.qk-mobile-menu-cta > a:hover,
	.brxe-nav-menu .bricks-mobile-menu > li.qk-mobile-menu-cta > a:hover,
	#brx-header .bricks-mobile-menu-wrapper .brxe-button:hover,
	#brx-header .bricks-mobile-menu-wrapper .brxe-button a:hover,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-button:hover,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-button a:hover {
		background: linear-gradient(135deg, var(--qk-menu-brand-hover), #1976d2) !important;
		color: var(--qk-menu-cta-text) !important;
		opacity: 1 !important;
	}

	#brx-header .bricks-mobile-menu-wrapper .brxe-button,
	.brxe-nav-menu .bricks-mobile-menu-wrapper .brxe-button {
		display: flex !important;
		justify-content: center !important;
		margin-top: auto !important;
		width: 100% !important;
		flex-shrink: 0;
	}

	.brxe-offcanvas[data-direction="left"] .brx-offcanvas-inner,
	.brxe-offcanvas[data-direction="right"] .brx-offcanvas-inner {
		--qk-menu-bg: #ffffff;
		--qk-menu-brand: #003c81;

		width: 100% !important;
		max-width: 100% !important;
		height: calc(var(--bricks-vh, 1vh) * 100) !important;
		min-height: calc(var(--bricks-vh, 1vh) * 100) !important;
		max-height: calc(var(--bricks-vh, 1vh) * 100) !important;
		padding:
			max(1.25rem, env(safe-area-inset-top, 0px))
			clamp(1.25rem, 5vw, 1.75rem)
			max(1.1rem, env(safe-area-inset-bottom, 0px)) !important;
		background-color: var(--qk-menu-bg) !important;
		align-items: stretch;
		align-content: stretch;
		flex-wrap: nowrap;
		overflow: hidden;
		box-sizing: border-box;
	}

	.brx-offcanvas-inner > * {
		flex: 0 0 auto !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.brx-offcanvas-inner .brxe-section,
	.brx-offcanvas-inner .brxe-container,
	.brx-offcanvas-inner .brxe-block,
	.brx-offcanvas-inner .brxe-div {
		min-height: 0 !important;
		height: auto !important;
		flex-grow: 0 !important;
	}
}
