:root {
	--tc-navy: #001D3D;
	--tc-navy-2: #003566;
	--tc-orange: #FFA300;
	--tc-orange-dark: #E69200;
	--tc-green: #057A3A;
	--tc-ink: #222529;
	--tc-muted: #69727D;
	--tc-surface: #F4F4F4;
	--tc-border: #E7E7E7;
	--tc-tint: #FFF8E6;
	--tc-tint-border: #FFE3A0;
	--tc-r: 16px;
	--tc-r-sm: 12px;
	--tc-lift: 0 8px 20px rgba(34, 37, 41, .22);
	--tc-pop: 0 12px 28px rgba(34, 37, 41, .16);
	--tc-font: Roboto, sans-serif;
	--tc-font-head: "Roboto", Roboto, sans-serif;
}

/* ---------- 1. TOPBAR ---------- */
body #header .main-menu > li.menu-item > a {
	padding: 22px 28px;
}

body #header .top-header.top-header {
	background-color: var(--tc-navy);
}

body #header .top-header .header-free-shipping .elementor-icon-list-text,
body #header .top-header ul.top-links > li > a {
	font-family: var(--tc-font);
	color: var(--tc-orange);
	transition: color .2s ease;
}

body #header .top-header ul.top-links > li > a {
	border-radius: 8px;
}

/* Elementor đặt màu hover cho "li.menu-item:hover > a" (1 id + 4 class) nên nhân đôi class */
body #header .top-header ul.top-links.top-links > li.menu-item.menu-item:hover > a,
body #header .top-header ul.top-links.top-links > li.menu-item.menu-item > a:hover {
	color: #fff;
}

body #header .top-header ul.top-links > li > a:focus-visible {
	outline: 2px solid var(--tc-orange);
	outline-offset: 2px;
}

/* ---------- 2. Ô TÌM KIẾM (desktop) ---------- */
/* Elementor đặt border-radius:5px bằng "#header .elementor-element-… .searchform-popup .searchform"
   (1 id + 3 class) nên thêm .searchform-popup và nhân đôi .searchform-cats. */
body #header .searchform-popup .searchform.searchform-cats.searchform-cats {
	border: 2px solid var(--tc-orange);
	border-radius: var(--tc-r-sm);
	background: #fff;
	overflow: visible;
	transition: box-shadow .2s ease, border-color .2s ease;
}

body #header .searchform-popup .searchform.searchform-cats.searchform-cats:focus-within {
	border-color: var(--tc-orange-dark);
	box-shadow: 0 0 0 4px rgba(255, 163, 0, .22);
}

body #header .searchform.searchform-cats input[type="text"],
body #header .searchform.searchform-cats input.porto-search-init {
	font-family: var(--tc-font);
	color: var(--tc-ink);
	border-radius: 10px 0 0 10px;
	box-shadow: none;
	outline: 0;
}

body #header .searchform.searchform-cats input::placeholder {
	color: var(--tc-muted);
	opacity: 1;
}

body #header .searchform.searchform-cats .selectric-wrapper.selectric-cat .selectric {
	border-left: 1px solid var(--tc-border);
}

body #header .searchform.searchform-cats .selectric .label {
	color: var(--tc-ink);
	font-weight: 500;
}

body #header .searchform.searchform-cats .selectric-wrapper:hover .selectric .label,
body #header .searchform.searchform-cats .selectric-wrapper.selectric-open .selectric .label {
	color: var(--tc-navy);
}

body #header .searchform.searchform-cats .btn.btn-special {
	background-color: var(--tc-orange);
	color: var(--tc-navy);
	border-radius: 0 10px 10px 0;
	transition: background-color .2s ease;
}

body #header .searchform.searchform-cats .btn.btn-special:hover {
	background-color: var(--tc-orange-dark);
	color: var(--tc-navy);
}

body #header .searchform.searchform-cats .btn.btn-special:focus-visible {
	outline: 2px solid var(--tc-navy);
	outline-offset: -4px;
}

/* dropdown danh mục trong ô tìm kiếm (selectric) */
/* child theme dùng "#header .searchform-popup .searchform .selectric-items li:hover"
   nên cần cùng chuỗi + nhân đôi .selectric-items để thắng. */
body #header .searchform-popup .searchform .selectric-items.selectric-items {
	margin-top: 8px;
	background: #fff;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-r-sm);
	box-shadow: var(--tc-pop);
	overflow: hidden;
}

body #header .searchform-popup .searchform .selectric-items.selectric-items li {
	color: var(--tc-ink);
	font-family: var(--tc-font);
	font-size: 14px;
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease;
}

body #header .searchform-popup .searchform .selectric-items.selectric-items li.highlighted,
body #header .searchform-popup .searchform .selectric-items.selectric-items li:hover {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
}

body #header .searchform-popup .searchform .selectric-items.selectric-items li.selected,
body #header .searchform-popup .searchform .selectric-items.selectric-items li.selected:hover,
body #header .searchform-popup .searchform .selectric-items.selectric-items li.selected.highlighted {
	background-color: var(--tc-orange);
	color: var(--tc-navy);
	font-weight: 700;
}

/* ---------- 3. TÀI KHOẢN ---------- */
body #header ul.account-dropdown > li > a.my-account {
	color: var(--tc-ink);
	font-family: var(--tc-font);
	font-weight: 500;
	border-radius: var(--tc-r-sm);
	transition: color .2s ease, background-color .2s ease;
}

body #header ul.account-dropdown > li:hover > a.my-account,
body #header ul.account-dropdown > li > a.my-account:focus-visible {
	color: var(--tc-orange-dark);
}

body #header ul.account-dropdown > li > a.my-account:focus-visible {
	outline: 2px solid var(--tc-orange);
	outline-offset: 2px;
}

body #header ul.account-dropdown .popup .inner {
	background: #fff;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-r-sm);
	box-shadow: var(--tc-pop);
	overflow: hidden;
}

/* WooCommerce gắn is-active cho "Trang tài khoản" ở mọi trang, nên không tô cam;
   chỉ hover/focus mới có nền tint, giống các dropdown khác. */
body #header ul.account-dropdown .popup li.woocommerce-MyAccount-navigation-link > a {
	background-color: transparent;
	color: var(--tc-ink);
	font-family: var(--tc-font);
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body #header ul.account-dropdown .popup li.woocommerce-MyAccount-navigation-link > a:hover,
body #header ul.account-dropdown .popup li.woocommerce-MyAccount-navigation-link.is-active > a:hover,
body #header ul.account-dropdown .popup li.woocommerce-MyAccount-navigation-link > a:focus-visible {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
	box-shadow: inset 3px 0 0 var(--tc-orange);
}

/* ---------- 4. GIỎ HÀNG (trigger) ---------- */
body #header .mini-cart .cart-head {
	border-radius: var(--tc-r-sm);
}

body #header .mini-cart .cart-items {
	background-color: var(--tc-navy-2);
	color: #fff;
	font-family: var(--tc-font);
	font-weight: 700;
	box-shadow: 0 0 0 2px #fff;
}

body #header .mini-cart .cart-subtotal {
	color: var(--tc-muted);
	font-family: var(--tc-font);
}

body #header .mini-cart .cart-subtotal .cart-price,
body #header .mini-cart .cart-subtotal .amount {
	color: var(--tc-navy);
	font-weight: 700;
}

body #header .mini-cart .cart-head:hover .minicart-icon,
body #header .mini-cart .cart-head:hover .cart-subtotal .amount {
	color: var(--tc-orange-dark);
}

body #header .mini-cart .cart-head:focus-visible {
	outline: 2px solid var(--tc-orange);
	outline-offset: 2px;
}

/* ---------- 5. THANH MENU CHÍNH (desktop) ---------- */
body #header .header-main.header-main {
	background-color: var(--tc-orange);
	border-top: 0;
}

/* Elementor đặt màu chữ trắng cho li.active / li:hover bằng selector 1-id + 4 class,
   nên các rule dưới đây nhân đôi class (.main-menu.main-menu, .menu-item.menu-item)
   để thắng mà không cần !important. */
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item > a {
	color: var(--tc-navy);
	font-family: var(--tc-font-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .01em;
	text-transform: uppercase;
	position: relative;
	background-color: transparent;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* trang hiện tại: thanh navy dưới chân (khác hover = nền navy) */
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.active > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.current-menu-item > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.current-menu-ancestor > a {
	color: var(--tc-navy);
	box-shadow: inset 0 -4px 0 var(--tc-navy);
}

body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item:hover > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item > a:hover,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.sfHover > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.active:hover > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.current-menu-item:hover > a,
body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item.current-menu-ancestor:hover > a {
	background-color: var(--tc-navy);
	color: var(--tc-orange);
	box-shadow: inset 0 -4px 0 var(--tc-orange);
}

body #header .header-main ul.main-menu.main-menu > li.menu-item.menu-item > a:focus-visible {
	outline: 2px solid var(--tc-navy);
	outline-offset: -4px;
}

/* menu con (Giới thiệu, Catalogue) */
body #header .header-main ul.main-menu .popup .inner {
	background: #fff;
	border: 1px solid var(--tc-border);
	border-radius: 0 0 var(--tc-r-sm) var(--tc-r-sm);
	box-shadow: var(--tc-pop);
	overflow: hidden;
}

body #header .header-main ul.main-menu .sub-menu a {
	color: var(--tc-ink);
	font-family: var(--tc-font);
	transition: background-color .15s ease, color .15s ease;
}

body #header .header-main ul.main-menu .sub-menu a:hover,
body #header .header-main ul.main-menu .sub-menu a:focus-visible {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
}

/* nút DANH MỤC SẢN PHẨM
   Elementor dùng #main-toggle-menu (1 id) + #header (1 id) cho :hover,
   nên dùng cùng #main-toggle-menu để ngang hàng. */
body #header .header-main .elementor-widget-porto_hb_toggle {
	border-color: rgba(0, 29, 61, .18);
}

body #header #main-toggle-menu .menu-title {
	color: var(--tc-navy);
	font-family: var(--tc-font-head);
	font-weight: 700;
	text-transform: uppercase;
	background-color: transparent;
	transition: background-color .2s ease, color .2s ease;
}

body #header #main-toggle-menu .menu-title * {
	color: inherit;
}

body #header #main-toggle-menu:hover .menu-title,
body #header #main-toggle-menu .menu-title:hover {
	background-color: var(--tc-navy);
	color: var(--tc-orange);
}

body #header #main-toggle-menu .toggle-menu-wrap {
	background: #fff;
	border: 1px solid var(--tc-border);
	border-top: 0;
	border-radius: 0 0 var(--tc-r-sm) var(--tc-r-sm);
	box-shadow: var(--tc-pop);
	overflow: hidden;
}

body #header #main-toggle-menu .sidebar-menu > li.menu-item > a {
	color: var(--tc-ink);
	font-family: var(--tc-font);
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body #header #main-toggle-menu .sidebar-menu > li.menu-item:hover,
body #header #main-toggle-menu .sidebar-menu > li.menu-item.active {
	background-color: var(--tc-tint);
}

body #header #main-toggle-menu .sidebar-menu > li.menu-item:hover > a,
body #header #main-toggle-menu .sidebar-menu > li.menu-item.active > a,
body #header #main-toggle-menu .sidebar-menu > li.menu-item > a:focus-visible {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
	box-shadow: inset 3px 0 0 var(--tc-orange);
}

/* ---------- 6. MOBILE / TABLET (≤991px) ---------- */
@media (max-width: 991px) {
	/* không đổi kích thước icon: ở 390px logo + 3 icon đã vừa khít */
	body #header .tolsen-header a.mobile-toggle,
	body #header .tolsen-header .search-toggle,
	body #header .tolsen-header .mini-cart .cart-head {
		color: var(--tc-navy);
		border-radius: 8px;
		transition: color .2s ease;
	}

	body #header .tolsen-header a.mobile-toggle:hover,
	body #header .tolsen-header .search-toggle:hover,
	body #header .tolsen-header .mini-cart .cart-head:hover {
		color: var(--tc-orange-dark);
	}

	body #header .tolsen-header a.mobile-toggle:focus-visible,
	body #header .tolsen-header .search-toggle:focus-visible,
	body #header .tolsen-header .mini-cart .cart-head:focus-visible {
		outline: 2px solid var(--tc-orange);
		outline-offset: 2px;
	}

	body #header .tolsen-header .mini-cart .cart-items {
		background-color: var(--tc-navy-2);
		color: #fff;
	}
}

/* panel menu bên trái */
/* khung bo tròn 25px màu xám nằm ở .searchform-fields, không phải ở input */
body #side-nav-panel .searchform .searchform-fields {
	background: #fff;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-r-sm);
	transition: border-color .2s ease, box-shadow .2s ease;
}

body #side-nav-panel .searchform .searchform-fields:focus-within {
	border-color: var(--tc-orange);
	box-shadow: 0 0 0 3px rgba(255, 163, 0, .25);
}

body #side-nav-panel .searchform input[type="text"] {
	background: transparent;
	color: var(--tc-ink);
	font-family: var(--tc-font);
	box-shadow: none;
	outline: 0;
}

body #side-nav-panel .searchform .btn {
	color: var(--tc-navy);
}

body #side-nav-panel .mobile-tab-items .mobile-tab-item {
	font-family: var(--tc-font-head);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tc-muted);
	border-bottom: 3px solid transparent;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

body #side-nav-panel .mobile-tab-items .mobile-tab-item:hover {
	color: var(--tc-navy);
	background-color: var(--tc-tint);
}

body #side-nav-panel .mobile-tab-items .mobile-tab-item.active {
	color: var(--tc-navy);
	border-bottom-color: var(--tc-orange);
}

body #side-nav-panel .mobile-tab-items .mobile-tab-item.active a,
body #side-nav-panel .mobile-tab-items .mobile-tab-item a {
	color: inherit;
}

/* theme dùng "#side-nav-panel .accordion-menu li.menu-item.current-menu-item > a" (3 class)
   nên thêm .accordion-menu + nhân đôi .menu-item để ngang hoặc hơn. */
body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item > a {
	color: var(--tc-ink);
	font-family: var(--tc-font);
	font-weight: 500;
	min-height: 44px;
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item.current-menu-item > a,
body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item > a.current {
	color: var(--tc-navy);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--tc-orange);
}

body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item > a:hover,
body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item > a:focus-visible,
body #side-nav-panel ul.mobile-menu.accordion-menu li.menu-item.menu-item.current-menu-item > a:hover {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
	box-shadow: inset 3px 0 0 var(--tc-orange);
}

body #side-nav-panel .share-links a {
	border-radius: var(--tc-r-sm);
}

/* search toàn màn hình trên mobile */
/* viền cam bọc cả ô nhập + nút kính lúp (trước đây chỉ bọc ô nhập, nút bị lệch ra ngoài) */
body #header .searchform.search-layout-overlay .searchform-fields {
	background: #fff;
	border: 2px solid var(--tc-orange);
	border-radius: var(--tc-r-sm);
	overflow: hidden;
}

body #header .searchform.search-layout-overlay .text {
	background: transparent;
	border: 0;
}

body #header .searchform.search-layout-overlay input.porto-search-init {
	border: 0;
	color: var(--tc-ink);
	font-family: var(--tc-font);
	box-shadow: none;
}

body #header .searchform.search-layout-overlay .btn.btn-special {
	color: var(--tc-navy);
	background: var(--tc-orange);
}

body #header .searchform.search-layout-overlay a.btn-close-search-form {
	background-color: var(--tc-navy);
	color: var(--tc-orange);
	border-radius: var(--tc-r-sm);
	transition: background-color .2s ease;
}

body #header .searchform.search-layout-overlay a.btn-close-search-form:hover {
	background-color: var(--tc-navy-2);
}

/* Porto đặt .popup { left:-15px } nên hộp thả xuống lệch trái 15px so với tab.
   Căn mép trái trùng tab, rộng tối thiểu bằng tab (và ≥ 220px). */
body #header .header-main ul.main-menu.main-menu > li.menu-item > .popup {
	left: 0;
	min-width: max(100%, 220px);
}

body #header .header-main ul.main-menu.main-menu > li.menu-item > .popup .inner {
	background: #fff;
	border: 1px solid var(--tc-border);
	border-top: 0;
	border-radius: 0 0 var(--tc-r-sm) var(--tc-r-sm);
	box-shadow: var(--tc-pop);
	overflow: hidden;
}

body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu {
	min-width: 0;
	width: 100%;
}

body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item {
	border-bottom: 1px solid var(--tc-border);
}

body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item:last-child {
	border-bottom: 0;
}

/* padding-left 28px trùng chữ của tab phía trên */
body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item > a {
	display: block;
	padding: 14px 28px;
	color: var(--tc-ink);
	font-family: var(--tc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item:hover > a,
body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item > a:hover,
body #header .header-main ul.main-menu.main-menu .porto-narrow-sub-menu > li.menu-item > a:focus-visible {
	background-color: var(--tc-tint);
	color: var(--tc-navy);
	box-shadow: inset 3px 0 0 var(--tc-orange);
}

/* ---------- 7. GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion: reduce) {
	body #header *,
	body #side-nav-panel * {
		transition-duration: .01ms;
	}
}