/* ------------------------------------------------------------------
 * Icon
 *
 * Mỗi icon là một file SVG trong assets/icons/<tông>/ và được nhúng bằng
 * thẻ <img>. Thẻ <img> KHÔNG ăn CSS `color`, nên màu được nướng sẵn vào
 * file; liuer_icon() chọn tông lúc render.
 *
 * Hai trạng thái làm icon đổi màu được mô phỏng lại ở cuối file:
 *   - mega menu hover/active  → lật sang trắng bằng `filter`
 *   - danh mục cột trái hover → tráo sang bản accent bằng `content`
 *
 * Riêng 5 chỗ icon lặp nhiều lần (nút giỏ hàng, dấu tick, mũi tên "Xem tất
 * cả", "Đọc thêm") vẽ thẳng bằng ::before/::after với `mask`, không tốn thẻ.
 * URL cho chúng do PHP sinh trong :root — xem liuer_icon_root_css().
 *
 * Quy ước: `.shop-icon--<tên-icon>` chỉ để tráo icon. Modifier kích thước
 * dùng MỘT gạch (.shop-icon-inline, .shop-icon-topbar, .shop-icon-catalog)
 * để không đụng namespace với tên icon.
 * ------------------------------------------------------------------ */

.shop-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	object-fit: contain;
	vertical-align: middle;
}

.shop-uploaded-icon.shop-icon-tone--white {
	filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
 * Icon vẽ thẳng bằng ::before / ::after — không tốn thẻ HTML nào.
 * `mask` bỏ qua màu của file nên dùng lại bản gốc nét đen.
 * ------------------------------------------------------------------ */

.shop-add-cart::before,
.shop-about__check::before,
.shop-section__head a::after,
.shop-flash__all::after,
.shop-about__cta::after,
.shop-news-card__more::after,
.shop-review-card::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.shop-add-cart.shop-add-cart--select.shop-add-cart--catalog::before {
	--icon: var(--i-arrow-right);
}

/* ------------------------------------------------------------------
 * Trạng thái 1 — mega menu: nền chuyển xanh, icon phải trắng.
 * brightness(0) làm icon đen tuyền, invert(1) lật thành trắng.
 * ------------------------------------------------------------------ */

.shop-category-menu > .menu-item.is-active > a .shop-icon,
.shop-category-menu > .menu-item:hover > a .shop-icon,
.shop-category-menu > .current-menu-item > a .shop-icon,
.shop-category-menu > .current-menu-ancestor > a .shop-icon {
	filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
 * Trạng thái 2 — danh mục cột trái: hover thì icon xanh accent.
 * Không lọc màu được, nên tráo hẳn sang file bản accent.
 * ------------------------------------------------------------------ */

.shop-side-catalog a:hover .shop-icon {
	content: var(--icon-hover);
}

.shop-icon--cable {
	--icon-hover: var(--i-hover-cable);
}

.shop-icon--gift {
	--icon-hover: var(--i-hover-gift);
}

.shop-icon--laptop {
	--icon-hover: var(--i-hover-laptop);
}

.shop-icon--message-circle {
	--icon-hover: var(--i-hover-message-circle);
}

.shop-icon--phone {
	--icon-hover: var(--i-hover-phone);
}

.shop-icon--refresh {
	--icon-hover: var(--i-hover-refresh);
}

.shop-icon--repeat {
	--icon-hover: var(--i-hover-repeat);
}

.shop-icon--tablet {
	--icon-hover: var(--i-hover-tablet);
}

.shop-icon--watch {
	--icon-hover: var(--i-hover-watch);
}