/* =============================================================================
   Component: Breadcrumb (tái sử dụng)
   Chuẩn: blog-detail (section-banner). Dùng trên banner tối full-bleed.
   - Link: trắng mờ 60% | Current: trắng đầy đủ | Separator: chevron inline SVG 60%.
   - Enqueue toàn cục (condition => true) trong import-assets/import-css-js.php.
   ============================================================================= */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%; /* không vượt quá bề rộng container (parent dùng align-items:flex-start) */
  margin-bottom: 1.1875rem; /* 19 / 16 */
}

/* Khoảng cách 8px giữa các phần tử — dùng margin (KHÔNG gap) */
.breadcrumb > * {
  margin-right: 0.5rem; /* 8 / 16 */
}
.breadcrumb > *:last-child {
  margin-right: 0;
}

/* Text chung cho link + current */
.breadcrumb__link,
.breadcrumb__current {
  font-family: "Averta Std CY", sans-serif;
  font-size: 0.875rem; /* 14 / 16 */
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Link — trắng mờ 60%. Không co (giữ nguyên "Trang chủ", "Danh sách sản phẩm") */
.breadcrumb__link {
  opacity: 0.6;
  text-decoration: none;
  flex-shrink: 0;
}

/* Specificity fix: thắng global `a, a:link, a:visited { color: inherit; display: block; width: 100% }`.
   `.breadcrumb a:link` = (0,2,1) thắng (0,1,1). Lưu ý wrapper là `.breadcrumb` (không chứa
   chuỗi "__breadcrumb") nên rule global `[class*="__breadcrumb"] a { width:auto }` KHÔNG áp dụng. */
.breadcrumb a.breadcrumb__link,
.breadcrumb a.breadcrumb__link:link,
.breadcrumb a.breadcrumb__link:visited {
  color: #ffffff;
  width: auto;
  display: inline-flex;
}

/* Current — trắng đầy đủ + truncate "..." khi dài.
   display:block (KHÔNG inline-flex) để text-overflow:ellipsis hoạt động.
   min-width:0 + flex-shrink:1 cho phép co lại dưới kích thước nội dung trong flex row. */
.breadcrumb__current {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 37.5rem; /* 600 / 16 — chặn trên, flex sẽ co nhỏ hơn khi cần */
}

/* Separator chevron — inline SVG, stroke=currentColor → đổi màu qua `color` */
.breadcrumb__sep {
  width: 0.4717rem; /* ~7.5 / 16 */
  height: 0.4717rem;
  flex-shrink: 0;
  /*opacity: 0.6;*/
  color: #ffffff;
}

/* Hover — chỉ desktop */
@media (min-width: 1024px) {
  .breadcrumb a.breadcrumb__link:hover {
    opacity: 1;
    transition: opacity 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
  }
}

.breadcrumb__link:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}

/* Mobile */
@media screen and (max-width: 639.98px) {
  .breadcrumb {
    margin-bottom: 0.5rem;
  }
  /* Khoảng cách giữa text và icon nhỏ lại */
  .breadcrumb > * {
    margin-right: 0.35rem;
  }
  .breadcrumb__link,
  .breadcrumb__current {
    font-size: 0.5625rem; /* 9 / 16 */
  }
  .breadcrumb__current {
    max-width: 12rem;
  }
}