/* HK Category Chips ("Phần danh mục") */
.hk-cat-chips {
	--hk-chip-color: var(--hk-brown);
	--hk-chip-bg: transparent;
	--hk-chip-border: #DDDDDD;
	--hk-chip-active: var(--hk-orange);
}

.hk-cat-chips__heading {
	margin: 0 0 12px;
	color: var(--hk-orange);
	font-family: var(--hk-font);
	font-size: clamp(24px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
}

.hk-cat-chips__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-cat-chips--inline .hk-cat-chips__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.hk-cat-chips__list li {
	margin: 0;
	padding: 0;
}

.hk-cat-chips__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--hk-chip-border);
	border-radius: 8px;
	background: var(--hk-chip-bg);
	color: var(--hk-chip-color);
	font-family: var(--hk-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}

.hk-cat-chips__chip:hover,
.hk-cat-chips__chip:focus-visible {
	border-color: var(--hk-chip-active);
	color: var(--hk-chip-active);
}

.hk-cat-chips__chip.is-active {
	border-color: var(--hk-chip-active);
	background: var(--hk-chip-active);
	color: var(--hk-white);
}

@media (max-width: 1024px) {
	.hk-cat-chips__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}
}