/* ===== Badge/Tag Component (mc-badge) ===== */
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px; /* mặc định rounded */
}

/* ---- Size ---- */
.mc-badge--sm { padding: 3px 8px; font-size: 11px; }
.mc-badge--md { padding: 4px 10px; font-size: 12px; }
.mc-badge--lg { padding: 7px 13px; font-size: 14px; }

/* ---- Shape ---- */
.mc-badge--rounded { border-radius: 6px; }
.mc-badge--pill     { border-radius: 999px; }

/* ---- Uppercase ---- */
.mc-badge--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Icon dot phát sáng ---- */
.mc-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  flex-shrink: 0;
}
.mc-badge__icon svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ============ Color tones × variant ============ */

/* --- cyan --- */
.mc-badge--solid.mc-badge--cyan   { background:#06b6d4; color:#ffffff; }
.mc-badge--tinted.mc-badge--cyan  { background:rgba(6,182,212,0.12); color:#0e7490; }
.mc-badge--outline.mc-badge--cyan { background:transparent; color:#0e7490; border-color:#06b6d4; }

/* --- emerald --- */
.mc-badge--solid.mc-badge--emerald   { background:#10b981; color:#ffffff; }
.mc-badge--tinted.mc-badge--emerald  { background:rgba(16,185,129,0.12); color:#047857; }
.mc-badge--outline.mc-badge--emerald { background:transparent; color:#047857; border-color:#10b981; }

/* --- blue --- */
.mc-badge--solid.mc-badge--blue   { background:#3b82f6; color:#ffffff; }
.mc-badge--tinted.mc-badge--blue  { background:rgba(59,130,246,0.12); color:#1d4ed8; }
.mc-badge--outline.mc-badge--blue { background:transparent; color:#1d4ed8; border-color:#3b82f6; }

/* --- amber (chữ tối vì nền sáng, trắng sẽ mất tương phản) --- */
.mc-badge--solid.mc-badge--amber   { background:#f59e0b; color:#78350f; }
.mc-badge--tinted.mc-badge--amber  { background:rgba(245,158,11,0.14); color:#b45309; }
.mc-badge--outline.mc-badge--amber { background:transparent; color:#b45309; border-color:#f59e0b; }

/* --- neutral --- */
.mc-badge--solid.mc-badge--neutral   { background:#6b7280; color:#ffffff; }
.mc-badge--tinted.mc-badge--neutral  { background:rgba(107,114,128,0.12); color:#374151; }
.mc-badge--outline.mc-badge--neutral { background:transparent; color:#374151; border-color:#6b7280; }

/* ============ Tag riêng (kế thừa mc-badge + nút xoá) ============ */
.mc-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0,0,0,0.08);
  transition: background .15s ease;
}
.mc-tag__remove:hover { background: rgba(0,0,0,0.18); }
.mc-tag__remove svg { width: 8px; height: 8px; }

.mc-tag.is-removing {
  animation: mc-tag-out .18s ease forwards;
}
@keyframes mc-tag-out {
  to { opacity: 0; transform: scale(0.85); }
}