/**
 * Header VDC – 2 tầng (Top: Logo + Search + Utils | Nav: Tất cả danh mục + Menu + Khuyến mãi, Đã xem, Tư vấn)
 * Dùng lại widget search (product-search-suggest) và mega menu (Tất cả danh mục).
 */
.vdc-header {
	width: 100%;
	background: #1565c0;
	color: #fff;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ---- Thanh trên (Logo + Search + Utils) ---- */
.vdc-header-top {
	display: none; /* Ảnh chỉ có 2 tầng: main + nav; không dùng top rỗng */
}

.vdc-header-main {
	background: #1565c0;
	padding: 12px 24px;
}

.vdc-header-main__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto;
}

/* Logo */
.vdc-header-logo__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}
.vdc-header-logo__link:hover {
	color: #fff;
	opacity: 0.9;
}
.vdc-header-logo__img {
	height: 40px;
	width: auto;
	display: block;
}
.vdc-header-logo__icon {
	display: inline-flex;
	color: #90caf9;
}
.vdc-header-logo__icon svg {
	width: 32px;
	height: 32px;
}
.vdc-header-logo__text {
	color: #fff;
}

/* Ô search – dùng lại .vdc-product-search-suggest, đặt giữa */
.vdc-header-search {
	flex: 1;
	min-width: 0;
	max-width: 560px;
	margin: 0 16px;
}
.vdc-header-search .vdc-product-search-suggest {
	--vdc-pss-bg: #e8e8e8;
	--vdc-pss-border: #ddd;
	--vdc-pss-radius: 9999px;
	--vdc-pss-input-height: 44px;
	--vdc-pss-font-size: 14px;
}
.vdc-header-search .vdc-pss-wrap {
	height: 44px;
	background: #e8e8e8;
	border-color: transparent;
}
.vdc-header-search .vdc-pss-input::placeholder {
	color: #666;
}
/* Fallback form khi không có product-search-suggest */
.vdc-header-search-fallback {
	display: flex;
	align-items: center;
	width: 100%;
	height: 44px;
	background: #e8e8e8;
	border-radius: 9999px;
	overflow: hidden;
	padding: 0 16px 0 18px;
	gap: 10px;
}
.vdc-header-search-fallback input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: #111;
	outline: none;
}
.vdc-header-search-fallback input::placeholder {
	color: #666;
}
.vdc-header-search-fallback button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #555;
	cursor: pointer;
}
.vdc-header-search-fallback button:hover {
	color: #1565c0;
}

/* Utils (info, delivery, cart, account) */
.vdc-header-utils {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}
.vdc-header-utils-text {
	max-width: 360px;
	overflow: hidden;
}
.vdc-header-utils-text-inner {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	white-space: nowrap;
}
/* Marquee: duplicate content, seamless infinite scroll (0 → -50%) */
.vdc-header-utils-text--marquee .vdc-header-utils-text-inner {
	gap: 0;
	will-change: transform;
	animation: vdc-header-marquee var(--vdc-header-marquee-duration, 20s) linear infinite;
	padding-left: 24px;
	padding-right: 24px;
}
.vdc-header-marquee-copy {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	white-space: nowrap;
	flex-shrink: 0;
	padding-left: 12px;
	padding-right: 12px;
}
/* Icon trong marquee: màu sáng (trắng/xanh nhạt) cho đồng bộ với chữ */
.vdc-header-utils-text .vdc-header-util__icon,
.vdc-header-utils-text .vdc-header-util--marquee-item .vdc-header-util__icon {
	color: #e3f2fd;
}
.vdc-header-utils-text .vdc-header-util__icon svg,
.vdc-header-utils-text .vdc-header-util--marquee-item .vdc-header-util__icon svg {
	fill: currentColor;
	stroke: currentColor;
}
.vdc-header-utils-text .vdc-header-util__icon i,
.vdc-header-utils-text .vdc-header-util--marquee-item .vdc-header-util__icon i {
	color: inherit;
}
.vdc-header-utils-text--marquee:hover .vdc-header-utils-text-inner {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.vdc-header-utils-text--marquee .vdc-header-utils-text-inner {
		animation: none;
	}
}
.vdc-header-util {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}
.vdc-header-util:hover {
	color: #fff;
	opacity: 0.9;
}
.vdc-header-util__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}
.vdc-header-util__icon svg {
	width: 18px;
	height: 18px;
}
.vdc-header-util__text {
	color: #fff;
}
/* Ẩn chữ "Giỏ hàng" trên desktop nếu muốn chỉ hiện icon + số (giống ảnh) */
.vdc-header-util__text--cart {
	display: none;
}
@media (min-width: 992px) {
	.vdc-header-util__text--cart {
		display: inline;
	}
}

/* Cart badge */
.vdc-header-util__icon--cart {
	position: relative;
}
.vdc-header-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f44336;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	line-height: 1;
}

/* Nút Đăng Nhập – viền trắng, chữ trắng */
.vdc-header-util--account.vdc-header-util--login {
	padding: 8px 18px;
	border: 1px solid #fff;
	border-radius: 6px;
	background: transparent;
}
.vdc-header-util--account.vdc-header-util--login:hover {
	background: rgba(255, 255, 255, 0.15);
}
.vdc-header-util--account.vdc-header-util--login .vdc-header-util__icon {
	display: none;
}

/* Icon user (khi đã đăng nhập): nền trắng, tròn, icon xanh */
.vdc-header-util--account:not(.vdc-header-util--login) .vdc-header-util__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	color: #1976d2;
}
.vdc-header-util--account:not(.vdc-header-util--login) .vdc-header-util__icon svg {
	width: 18px;
	height: 18px;
}

/* ---- Thanh menu (Nav) ---- */
.vdc-header-nav {
	background: #1565c0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 0 24px;
}
.vdc-header-nav__inner {
	display: flex;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	min-height: 48px;
}

.vdc-header-nav__left {
	flex-shrink: 0;
}
/* Nút TẤT CẢ DANH MỤC – xanh nhạt hơn một chút (trong header) */
.vdc-header-nav .vdc-mega-menu-wrap .vdc-mega-menu-trigger {
	background: #1976d2;
	height: 100%;
	min-height: 48px;
	border-radius: 0;
	padding: 0px 20px;
}
.vdc-header-nav .vdc-mega-menu-wrap .vdc-mega-menu-trigger:hover,
.vdc-header-nav .vdc-mega-menu-wrap.is-open .vdc-mega-menu-trigger {
	background: #1e88e5;
}
.vdc-header-nav .vdc-header-all-cats-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	min-height: 48px;
	background: #1976d2;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.vdc-header-nav .vdc-header-all-cats-btn:hover {
	background: #1e88e5;
	color: #fff;
}

/* Menu giữa – Giới thiệu | Sản phẩm | Tin tức | Liên hệ */
.vdc-header-nav__center {
	flex: 1;
	display: flex;
	justify-content: flex-start;
}
.vdc-header-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vdc-header-nav-menu li {
	margin: 0;
}
.vdc-header-nav-menu a {
	display: block;
	padding: 12px 18px;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.vdc-header-nav-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
/* Phân cách dọc giữa các mục (tùy chọn) */
.vdc-header-nav-menu li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* Bên phải nav – Khuyến mãi, Đã xem, Tư vấn (icon tròn xanh nhạt) */
.vdc-header-nav__right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}
.vdc-header-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
}
.vdc-header-nav__link:hover {
	color: #fff;
	opacity: 0.9;
}
.vdc-header-nav__link svg {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	box-sizing: border-box;
}
.vdc-header-nav__consult {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}
.vdc-header-nav__label {
	color: #fff;
}
.vdc-header-nav__phone {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.vdc-header-nav__phone:hover {
	color: #ffcdd2;
}
.vdc-header-nav__phone-num {
	color: #ff1744;
	font-weight: 700;
}
/* Icon headset cho Tư vấn – vòng tròn xanh nhạt giống Khuyến mãi, Đã xem */
.vdc-header-nav__consult {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.vdc-header-nav__consult-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	flex-shrink: 0;
}
.vdc-header-nav__consult-icon svg {
	width: 18px;
	height: 18px;
}

/* Responsive */
@media (max-width: 991px) {
	.vdc-header-main__inner {
		flex-wrap: wrap;
		gap: 12px;
	}
	.vdc-header-search {
		order: 3;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	.vdc-header-utils .vdc-header-util--info .vdc-header-util__text,
	.vdc-header-utils .vdc-header-util--delivery .vdc-header-util__text {
		display: none;
	}
	.vdc-header-nav__inner {
		flex-wrap: wrap;
	}
	.vdc-header-nav__center {
		width: 100%;
		order: 3;
		padding: 8px 0;
	}
	.vdc-header-nav-menu {
		flex-wrap: wrap;
		justify-content: center;
	}
	.vdc-header-nav__link span {
		display: none;
	}
	.vdc-header-nav__consult .vdc-header-nav__label {
		display: none;
	}
}

@keyframes vdc-header-marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Mobile: 2 hàng chính (Top + Search) + 1 hàng Nav (<768px) */
@media (max-width: 767px) {
	/* ========== Hàng 1 (Top row): Logo trái, icon phải – KHÔNG có search ========== */
	.vdc-header-main {
		padding: 10px 12px 8px;
	}
	.vdc-header-main__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 12px;
		row-gap: 10px;
	}
	/* Chỉ hàng 1: logo + utils (search đẩy xuống hàng 2 nhờ order + width 100%) */
	.vdc-header-logo {
		order: 1;
		flex: 0 0 auto;
	}
	.vdc-header-logo__link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.vdc-header-logo__img,
	.vdc-header-logo__icon svg {
		height: 32px;
		width: auto;
	}
	.vdc-header-utils {
		order: 2;
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
		flex-shrink: 0;
	}
	.vdc-header-utils-text {
		display: none;
	}
	.vdc-header-util {
		padding: 0;
	}
	.vdc-header-util__text {
		display: none;
	}
	.vdc-header-util--account.vdc-header-util--login {
		padding: 0;
		border: 0;
		border-radius: 50%;
	}
	/* Hiện lại nút Đăng nhập trên mobile (chỉ ẩn text với các util khác) */
	.vdc-header-util--account.vdc-header-util--login .vdc-header-util__text {
		display: inline;
		padding: 6px 10px;
		border-radius: 999px;
		border: 1px solid rgba(255, 255, 255, 0.9);
		font-size: 12px;
	}

	/* ========== Hàng 2 (Search row): full width, pill, icon bên phải – bàn phím hiện khi tap ========== */
	.vdc-header-search {
		order: 3;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex-basis: 100%;
		margin: 0;
		position: relative;
		z-index: 10;
	}
	.vdc-header-search .vdc-product-search-suggest {
		--vdc-pss-input-height: 40px;
		--vdc-pss-font-size: 14px;
		--vdc-pss-radius: 9999px;
	}
	.vdc-header-search .vdc-pss-wrap,
	.vdc-header-search .vdc-header-search-fallback {
		height: 40px;
		min-height: 44px;
		border-radius: 9999px;
		touch-action: manipulation;
		pointer-events: auto;
	}
	.vdc-header-search .vdc-pss-input,
	.vdc-header-search .vdc-pss-wrap input,
	.vdc-header-search input {
		touch-action: manipulation;
		pointer-events: auto;
		-webkit-user-select: text;
		user-select: text;
	}
	.vdc-header-search .vdc-pss-input::placeholder {
		color: #666;
	}

	/* ========== Mobile header nav row (<768px): hamburger + menu CÙNG MỘT DÒNG ========== */
	.vdc-header-nav {
		padding: 0 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.vdc-header-nav__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 10px;
		min-height: 44px;
	}
	/* 1) Left: small square hamburger icon button only */
	.vdc-header-nav__left {
		order: 1;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	/* Div chứa icon danh mục: cố định 40×40px */
	.vdc-header-nav .vdc-mega-menu-wrap {
		display: inline-block;
		width: 40px;
		max-width: 40px;
		flex-shrink: 0;
	}
	.vdc-header-nav .vdc-mega-menu-trigger,
	.vdc-header-nav .vdc-header-all-cats-btn {
		width: 40px !important;
		min-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-width: 40px;
		max-height: 40px;
		padding: 22px !important;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
		background: #0d47a1;
		color: #fff;
		display: inline-flex;
		box-sizing: border-box;
	}
	.vdc-header-nav .vdc-mega-menu-trigger:hover,
	.vdc-header-nav .vdc-mega-menu-wrap.is-open .vdc-mega-menu-trigger {
		background: #08306b;
	}
	.vdc-header-nav .vdc-mega-menu-trigger:focus,
	.vdc-header-nav .vdc-mega-menu-trigger:focus-visible,
	.vdc-header-nav .vdc-header-all-cats-btn:focus,
	.vdc-header-nav .vdc-header-all-cats-btn:focus-visible {
		color: #fff;
	}
	.vdc-header-nav .vdc-mega-menu-trigger:focus .vdc-mega-menu-trigger-icon,
	.vdc-header-nav .vdc-mega-menu-trigger:focus-visible .vdc-mega-menu-trigger-icon,
	.vdc-header-nav .vdc-header-all-cats-btn:focus .vdc-mega-menu-trigger-icon,
	.vdc-header-nav .vdc-header-all-cats-btn:focus .vdc-header-all-cats-btn__icon,
	.vdc-header-nav .vdc-header-all-cats-btn:focus-visible .vdc-mega-menu-trigger-icon,
	.vdc-header-nav .vdc-header-all-cats-btn:focus-visible .vdc-header-all-cats-btn__icon {
		color: #fff;
	}
	.vdc-header-nav .vdc-mega-menu-trigger:focus .vdc-mega-menu-trigger-icon svg,
	.vdc-header-nav .vdc-mega-menu-trigger:focus-visible .vdc-mega-menu-trigger-icon svg,
	.vdc-header-nav .vdc-header-all-cats-btn:focus .vdc-mega-menu-trigger-icon svg,
	.vdc-header-nav .vdc-header-all-cats-btn:focus .vdc-header-all-cats-btn__icon svg,
	.vdc-header-nav .vdc-header-all-cats-btn:focus-visible .vdc-mega-menu-trigger-icon svg,
	.vdc-header-nav .vdc-header-all-cats-btn:focus-visible .vdc-header-all-cats-btn__icon svg {
		fill: currentColor;
		stroke: currentColor;
	}
	/* 5) Mega menu trigger: hide text and arrow on mobile; only show icon */
	.vdc-header-nav .vdc-mega-menu-trigger-text,
	.vdc-header-nav .vdc-header-all-cats-btn__text,
	.vdc-header-nav .vdc-mega-menu-trigger-arrow,
	.vdc-header-nav .vdc-header-all-cats-btn__arrow {
		display: none !important;
	}
	/* 3) Hide all right-side links on mobile */
	.vdc-header-nav__right {
		display: none !important;
	}
	/* 2) Main menu on same row, to the right of hamburger (override 991px: no full width) */
	.vdc-header-nav__center {
		order: 2;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 0;
		overflow: hidden;
	}
	/* 4) Menu: horizontal, single line, no wrap; overflow-x auto + hide scrollbar */
	.vdc-header-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 4px 0;
		margin: 0 -12px 0 0;
	}
	.vdc-header-nav-menu::-webkit-scrollbar {
		display: none;
	}
	.vdc-header-nav-menu li {
		white-space: nowrap;
		flex-shrink: 0;
	}
	.vdc-header-nav-menu li + li {
		border-left: 1px solid rgba(255, 255, 255, 0.4);
	}
	.vdc-header-nav-menu a {
		color: #fff;
		padding: 0px 10px;
		font-size: 13px;
		position: relative;
		display: block;
	}
	.vdc-header-nav-menu a:hover {
		background: transparent;
	}
	.vdc-header-nav-menu .current-menu-item > a::after,
	.vdc-header-nav-menu a:focus-visible::after {
		content: "";
		position: absolute;
		left: 18%;
		right: 18%;
		bottom: 4px;
		height: 2px;
		background: #fff;
		border-radius: 999px;
	}
}