/*
 * 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; }

/* ── Search tin tức trong thanh breadcrumb ─────────────────────────────
   Nút icon luôn hiện; ô input width 0 → mở ra khi .is-open. Đẩy sang phải
   bằng margin-left:auto nên không phụ thuộc số lượng crumb. */
.iw-breadcrumb__list .iw-breadcrumb__item--search {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
}

.iw-breadcrumb__search {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  background: transparent;
  /* Viền vẽ bằng inset shadow (không phải border) để đóng/mở không nhảy layout. */
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.iw-breadcrumb__search.is-open {
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e3e6, 0 1px 2px rgba(16, 16, 20, 0.05);
}
/* Focus ring dịu, chỉ khi con trỏ đang trong ô. */
.iw-breadcrumb__search.is-open:focus-within {
  box-shadow: inset 0 0 0 1px var(--iw-accent, #f24808),
              0 0 0 3px rgba(242, 72, 8, 0.12);
}

.iw-breadcrumb__search input.iw-breadcrumb__search-input {
  width: 0;
  min-width: 0;
  /* Chốt height: Flatsome set height/margin cho input[type=search] toàn site,
     không khoá lại thì thanh breadcrumb bị đội cao khi mở ô. */
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #3d3d3d;
  opacity: 0;
  /* Khi đóng: KHÔNG bắt click. Nếu chỉ có width:0 thì vùng trống cạnh icon
     vẫn focus được vào input → ô bung ra dù chưa bấm kính lúp. */
  visibility: hidden;
  pointer-events: none;
  transition: width 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
  /* Ẩn nút "x" mặc định của input[type=search] (WebKit) — nút đóng riêng. */
  -webkit-appearance: none;
  appearance: none;
}
/* Flatsome có `input[type=search]:focus{background:#fff;box-shadow:0 0 5px #ccc}`
   — specificity (0,2,1), BẰNG rule base ở trên, mà flatsome-main.css lại nạp
   SAU file này trong <head> nên hoà là Flatsome thắng → khi focus hiện một ô
   vuông trắng + quầng xám tràn ra ngoài viên thuốc. Rule dưới (0,3,1) mới dứt
   điểm được. Viền/ring do form vẽ, input luôn trong suốt. */
.iw-breadcrumb__search input.iw-breadcrumb__search-input:focus,
.iw-breadcrumb__search input.iw-breadcrumb__search-input:focus-visible {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  outline: 0;
  color: #3d3d3d;
}

.iw-breadcrumb__search input.iw-breadcrumb__search-input::-webkit-search-cancel-button { display: none; }
.iw-breadcrumb__search input.iw-breadcrumb__search-input::placeholder { color: #888888; opacity: 1; }

.iw-breadcrumb__search.is-open input.iw-breadcrumb__search-input {
  width: 240px;
  padding: 0 6px 0 14px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.iw-breadcrumb__search button.iw-breadcrumb__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #6b6b70;
  cursor: pointer;
  line-height: 0;
  transition: color 0.14s ease, background-color 0.14s ease;
}
/* Trạng thái đóng: chỉ là icon trần, hover mới hiện nền tròn nhạt. */
.iw-breadcrumb__search button.iw-breadcrumb__search-btn:hover,
.iw-breadcrumb__search button.iw-breadcrumb__search-btn:focus-visible {
  color: #3d3d3d;
  background: rgba(16, 16, 20, 0.06);
}
/* Trạng thái mở: nút thành nút "tìm" chính, tô accent. */
.iw-breadcrumb__search.is-open button.iw-breadcrumb__search-btn {
  color: #fff;
  background: var(--iw-accent, #f24808);
}
.iw-breadcrumb__search.is-open button.iw-breadcrumb__search-btn:hover,
.iw-breadcrumb__search.is-open button.iw-breadcrumb__search-btn:focus-visible {
  color: #fff;
  filter: brightness(0.94);
}
.iw-breadcrumb__icon--search { width: 24px; height: 24px; }

/* Đang mở: các crumb nhường chỗ cho ô nhập. Desktop chỉ cần crumb cuối co
   lại; mobile thì ẩn hẳn crumb để ô chiếm trọn hàng (thanh quá hẹp).
   Class do JS gắn — KHÔNG dùng position:absolute vì form sẽ tràn ra ngoài
   thanh và đè lên nội dung phía dưới. */
.iw-breadcrumb__list--searching {
  flex-wrap: nowrap;
}
.iw-breadcrumb__list--searching .iw-breadcrumb__item--current {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.iw-breadcrumb__list--searching .iw-breadcrumb__current {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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;
  }

  /* Mobile: thanh quá hẹp để vừa crumb vừa ô nhập → khi mở thì ẩn hẳn crumb,
     ô chiếm trọn hàng. Vẫn nằm trong flow nên thanh không bị đè lên ảnh
     phía dưới (bản trước dùng position:absolute nên tràn ra ngoài). */
  .iw-breadcrumb__list .iw-breadcrumb__item--search { padding-left: 4px; }

  .iw-breadcrumb__list--searching .iw-breadcrumb__item {
    display: none;
  }
  .iw-breadcrumb__list--searching .iw-breadcrumb__item--search {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
  }
  .iw-breadcrumb__list--searching .iw-breadcrumb__search {
    width: 100%;
  }
  .iw-breadcrumb__list--searching .iw-breadcrumb__search.is-open input.iw-breadcrumb__search-input {
    width: auto;
    flex: 1 1 auto;
  }
}