/*
 * Menu doc "Danh muc san pham" o sidebar trang cua hang.
 *
 * Chi CHINH SUA hinh thuc: phan cap, chuyen muc dang chon, icon cap 1. Co che
 * gap/mo (nut toggle, class active, CSS ".active>ul.children{display:block
 * !important}") la cua flatsome.js/flatsome.css, khong dung lai o day.
 *
 * --bioseed-primary khai bao trong assets/css/shop.css — file do nap o MOI
 * trang nen bien nay luon co san truoc khi file nay chay tren cung trang.
 */

#shop-sidebar .product-categories,
#shop-sidebar .product-categories ul.children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Border trai luon chiem cho san (mac dinh trong suot) thay vi chi them khi
 * .current-cat — doi mau khong lam noi dung xe dich sang phai vai px.
 *
 * Rieng cap 1 (xem ly do o khoi ".current-cat" ben duoi): vach nam tren <li>
 * chu khong tren <a>, nen khong khai o day.
 */
#shop-sidebar .product-categories > li > a,
#shop-sidebar .product-categories .children li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 4px;
	color: #444;
	line-height: 1.35;
	transition: background-color .15s, color .15s, border-color .15s;
}
#shop-sidebar .product-categories .children li > a {
	border-left: 3px solid transparent;
}
#shop-sidebar .product-categories > li {
	border-left: 3px solid transparent;
}
#shop-sidebar .product-categories > li > a:hover,
#shop-sidebar .product-categories .children li > a:hover {
	background: #f2f6ee;
	color: var(--bioseed-primary);
}

/* Cap 2: khong co nut toggle canh tranh, to mau ngay tren <a> nhu binh thuong. */
#shop-sidebar .product-categories .children li.current-cat > a {
	background: #eaf3e1;
	border-left-color: var(--bioseed-primary);
	color: var(--bioseed-primary-dark);
	font-weight: 700;
}

/*
 * Cap 1: to mau tren CA <li>, khong chi <a>. Chuyen muc cap 1 dang chon co
 * the vua la cha (co nut mui ten toggle nam SAU <a>, la phan tu anh em cung
 * cap trong <li> — xem flatsome.js) — to rieng <a> se dung ngay truoc nut do,
 * nhin nhu bi cat cut giua chung. <li> la flex row-wrap chua ca <a> lan nut
 * toggle (Flatsome tu dat display:flex cho .has-child) nen to mau o day moi
 * phu duoc het chieu ngang, ke ca phan nut mui ten.
 */
#shop-sidebar .product-categories > li.current-cat {
	background: #eaf3e1;
	border-left-color: var(--bioseed-primary);
}
#shop-sidebar .product-categories > li.current-cat > a {
	color: var(--bioseed-primary-dark);
	font-weight: 700;
}
#shop-sidebar .product-categories > li.current-cat > .toggle {
	color: var(--bioseed-primary-dark);
}

/* ------------------------------------------------------------------
 * Cap 1
 * ------------------------------------------------------------------ */

#shop-sidebar .product-categories > li {
	margin-bottom: 2px;
}
#shop-sidebar .product-categories > li > a {
	font-size: 14.5px;
	font-weight: 600;
}

.bioseed-cat-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--bioseed-primary);
}
.bioseed-cat-icon svg {
	width: 100%;
	height: 100%;
}
/* Chuyen muc cap 1 dang chon: icon nhuom theo chu, khong giu mau primary co dinh. */
#shop-sidebar .product-categories li.current-cat > a .bioseed-cat-icon {
	color: inherit;
}

/*
 * <li> co con duoc flatsome.js them class has-child va tu dat display:flex
 * (xem .has-child trong flatsome.css). O day chi dinh vi lai hai phan tu ben
 * trong: <a> chiem het cho con lai, <ul class="children"> xuong dong rieng.
 */
#shop-sidebar .product-categories > li.has-child > a {
	flex: 1 1 auto;
	min-width: 0;
}
#shop-sidebar .product-categories > li.has-child > ul.children {
	flex: 1 0 100%;
}

/* ------------------------------------------------------------------
 * Cap 2 — thut vao, co vach doc the hien dang o trong chuyen muc cha nao.
 * ------------------------------------------------------------------ */

#shop-sidebar .product-categories .children {
	margin: 2px 0 8px 11px; /* 11px = tam giua icon 22px cap 1, vach thang hang duoi icon */
	padding-left: 12px;
	border-left: 2px solid #e3e6ea;
}
#shop-sidebar .product-categories .children li > a {
	padding: 7px 10px;
	font-size: 13px;
	color: #666;
}