/*
 * Breadcrumb — global, shared across all templates.
 * Design source: Figma 407:50035 (desktop), 407:51608 (mobile).
 */

.iw-breadcrumb {
  /* Fullwidth breakout — sits flush against the viewport like Hero/Banner. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f7f7f8;
  font-family: inherit;
  color: #3d3d3d;
  -webkit-font-smoothing: antialiased;
}

.iw-breadcrumb__list {
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 16px var(--iw-container-pad-x);
  list-style: none;
  /* Some themes (incl. Flatsome) ship `ol/ul { padding-inline-start: 40px }`.
     Force flush layout so the home crumb starts at the section padding. */
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 20px;
  font-weight: 590;
}

/* Flatsome ships `.col-inner ul li { margin-left: 1.3em }` and
   `.entry-content li { margin-bottom: .6em }`. The double-class selector
   raises specificity (0,0,2,0) past Flatsome's class+element (0,0,1,2)
   so the reset wins without `!important`. */
.iw-breadcrumb__list .iw-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: #888888;
  list-style: none;
}
.iw-breadcrumb__item--current { color: #3d3d3d; }

.iw-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
}
.iw-breadcrumb__link:hover,
.iw-breadcrumb__link:focus-visible {
  color: var(--iw-accent, #f24808);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.iw-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  /* Active page: bolder than non-current crumbs (Figma 407:51217). */
  font-weight: 700;
  color: #3d3d3d;
}

.iw-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888888;
}

.iw-breadcrumb__icon {
  display: block;
  flex: none;
}
.iw-breadcrumb__icon--arrow { width: 12px; height: 12px; }
.iw-breadcrumb__icon--home  { width: 14px; height: 14px; }

/* Desktop default: show "Trang chủ" text, hide the home icon. */
.iw-breadcrumb__home-icon { display: none; }
.iw-breadcrumb__home-text { display: inline; }

@media (max-width: 991px) {
  .iw-breadcrumb__list {
    /* Mobile padding 8px vertical, horizontal follows container token (Figma 407:51608). */
    padding: 8px var(--iw-container-pad-x);
    gap: 4px;
    /* Force single line — current title ellipsis ở rule dưới. */
    flex-wrap: nowrap;
  }

  /* Swap to home icon on mobile. */
  .iw-breadcrumb__home-icon { display: inline-flex; }
  .iw-breadcrumb__home-text { display: none; }

  /* Mobile gap between home icon and arrow group is 12px (Figma). */
  .iw-breadcrumb__item--home + .iw-breadcrumb__item { margin-left: 8px; }

  /* Ancestors không co — giữ nguyên text. */
  .iw-breadcrumb__list .iw-breadcrumb__item { flex: 0 0 auto; }

  /* Item hiện tại (cuối) co lại + truncate khi chật. min-width:0 cần thiết
     để flex item shrink dưới nội dung của nó (default min-width: auto). */
  .iw-breadcrumb__list .iw-breadcrumb__item--current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .iw-breadcrumb__current {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}