/* Nhãn nhỏ. <span class="vo-badge">Street Food</span>; biến thể --solid --outline --on-image (trên ảnh) --label (chữ hoa nhỏ + chấm vàng, không nền).
   Dùng thẻ <a> để badge bấm được. */

.vo-badge {
	/* Chỉnh ở đây */
	--_bg: var(--vo-hover);
	--_ink: var(--vo-primary);
	--_bd: transparent;

	display: inline-flex;
	align-items: center;
	gap: var(--vo-space-1);
	max-width: 100%;
	min-height: 24px;
	padding: 2px var(--vo-space-3);
	border: 1px solid var(--_bd);
	border-radius: var(--vo-radius-pill);
	background: var(--_bg);
	color: var(--_ink);
	font-size: var(--vo-fs-xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.vo-badge .vo-icon { font-size: 1.1em; }

.vo-badge--solid    { --_bg: var(--vo-primary); --_ink: var(--vo-on-primary); }
.vo-badge--outline  { --_bg: transparent; --_bd: var(--vo-divider); }
.vo-badge--label {   /* nhãn loại món / "best for": chữ hoa nhỏ + chấm vàng, không nền (hợp cả nền trắng lẫn ô xám) */
	--_bg: transparent;
	min-height: 0;
	padding: 0;
	gap: var(--vo-space-2);
	border-radius: 0;
	color: var(--vo-muted);
	font-size: var(--vo-fs-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: normal;   /* nhãn dài thì xuống dòng, không cắt ... */
	overflow: visible;
	text-overflow: clip;
	line-height: 1.3;
}
.vo-badge--label::before { content: ""; flex: none; align-self: flex-start; margin-top: .3em; width: 6px; height: 6px; border-radius: 50%; background: var(--vo-accent); }
.vo-badge--on-image {
	--_bg: var(--vo-glass);
	box-shadow: var(--vo-shadow-sm);
}

/* Badge link nằm trên link phủ card nên bấm được riêng */
a.vo-badge {
	position: relative;
	z-index: var(--vo-z-card);
	cursor: pointer;
	transition: background-color var(--vo-dur-fast) ease, border-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	a.vo-badge:hover { --_bg: var(--vo-hover-active); text-decoration: none; }
	a.vo-badge.vo-badge--solid:hover { --_bg: var(--vo-primary-hover); }
	a.vo-badge.vo-badge--outline:hover { --_bd: var(--vo-line); --_bg: var(--vo-hover); }
}
a.vo-badge:focus-visible { outline: 2px solid var(--vo-primary); outline-offset: 2px; }

/* Nhãn "New" ở góc nút icon / ô lối tắt: <button class="vo-icon-btn" data-badge="New"> (PHP in chữ) */
.vo-icon-btn[data-badge], .vo-menu__tile[data-badge] { position: relative; }
.vo-icon-btn[data-badge]::after, .vo-menu__tile[data-badge]::after {
	content: attr(data-badge);
	position: absolute;
	top: var(--vo-space-1);
	right: calc(-1 * var(--vo-space-1));
	z-index: 1;
	display: grid;
	place-items: center;
	height: calc(var(--vo-fs-2xs) + var(--vo-space-1));
	padding: calc(var(--vo-text-drop) * 2) var(--vo-space-1) 0;   /* hạ chữ cho đúng tâm */
	border-radius: var(--vo-radius-pill);
	background: var(--vo-accent);
	color: var(--vo-on-accent);
	font-size: var(--vo-fs-2xs);
	font-weight: 600;
	line-height: 1;
	box-sizing: border-box;
	pointer-events: none;
}
.vo-menu__tile[data-badge]::after { top: var(--vo-space-2); right: var(--vo-space-2); }

.vo-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;   /* nhãn chấm vàng (không viền) cạnh badge viền cao hơn: canh giữa */
	gap: var(--vo-space-2);
}