/* Đường dẫn đầu trang rút gọn giữa trên điện thoại (mockup D của Quyết 26/10/2026).
   Markup: `core/templates/core/header_path.html`; hộp thả xuống và bàn phím: `core/js/header-crumbs.js`.
   Chỉ dưới 640px. Từ ba mục trở lên: mục đầu · nút "…" · mục cuối; các mục giữa ẩn khỏi dải, nằm trong hộp của nút.
   Từ 640px máy tính giữ đường dẫn đầy đủ, nút ẩn. Màu, viền, bo góc, nền là lớp Unfold trong template. */
.wl-crumb-more,
.wl-crumb-more-sep {
  display: none;
}
.wl-crumb-menu {
  display: none;
}

@media (max-width: 639.98px) {
  /* Mục giữa và dấu › của chúng rời khỏi dải. */
  .wl-crumb-mid {
    display: none;
  }
  .wl-crumb-more-sep {
    display: inline-block;
    flex: none;
  }
  /* Nút "…" nhô 12px ra mỗi bên; h1 cắt phần tràn nên nó cần chút đệm để vùng chạm không bị cắt (lề âm trả lại đúng
     chỗ cũ, dải không đổi). */
  h1:has(> .wl-crumb-more) {
    padding-inline: 12px;
    margin-inline: -12px;
  }
  /* Dấu › sát chữ: dải đường dẫn chỉ còn ~165px ở 390px khi trang có nút "+", mỗi px dành cho tên trang. */
  h1 .wl-crumb-sep {
    flex: none;
    margin-inline: 0;
    font-size: 14px;
    width: 14px;
  }
  /* Mục đầu co TRƯỚC mục cuối (hệ số co 20 so với 0,01) nhưng không dưới ~3 chữ; JS gấp luôn nó vào hộp khi chỉ còn
     thế mới đủ chỗ cho tên trang. */
  h1 .wl-crumb-first {
    flex: 0 20 auto;
    min-width: 3.5ch;
    max-width: 50%;
  }
  /* Chỗ hẹp quá: mục đầu và dấu › của nó nằm trong hộp (class do `header-crumbs.js` đặt). */
  h1.wl-crumbs-fold-first .wl-crumb-first,
  h1.wl-crumbs-fold-first .wl-crumb-first + .wl-crumb-sep {
    display: none;
  }
  /* Còn thiếu vài px cho tên trang sau khi gấp mục đầu: dấu › giữa "…" và tên trang cũng nhường. */
  h1.wl-crumbs-fold-sep .wl-crumb-more-sep {
    display: none;
  }
  /* Gấp hết mà vẫn tràn: tên trang co bằng "…" như thường. */
  h1.wl-crumbs-squeeze .wl-crumb-last {
    flex-shrink: 1;
  }
  /* Mục cuối: trang đang mở, đậm, không phải link (breadcrumbs.py bỏ link của mục cuối); co sau cùng, bằng "…". */
  h1 .wl-crumb-last {
    flex: 0 0.01 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }
  /* Nút "…": vùng chạm 44x44, chữ nhìn thấy chỉ chiếm ~20px (lề âm cho 12px mỗi bên chồng lên dấu › cạnh nó),
     không viền, như nút ☰ bên trái. */
  .wl-crumb-more {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    margin: 0 -12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .wl-crumb-more:hover,
  .wl-crumb-more[aria-expanded="true"] {
    background: var(--color-base-100);
  }
  .dark .wl-crumb-more:hover,
  .dark .wl-crumb-more[aria-expanded="true"] {
    background: var(--color-base-700);
  }
  .wl-crumb-more:focus-visible,
  .wl-crumb-menu-item:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: -2px;
  }

  /* Hộp liệt kê các mục giữa: thả xuống ngay dưới header, rộng ít nhất min(240px, bề ngang màn − 32px). Chép ra ngoài
     h1 lúc mở (h1 cắt phần tràn), nên đặt `fixed` theo hình chữ nhật của vùng đường dẫn mà JS đo. */
  .wl-crumb-menu {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
  }
  .wl-crumb-menu-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    overflow-wrap: anywhere;
  }
  .wl-crumb-menu-item + .wl-crumb-menu-item {
    border-top: 1px solid var(--color-base-100);
  }
  .dark .wl-crumb-menu-item + .wl-crumb-menu-item {
    border-top-color: var(--color-base-700);
  }
  /* Dấu › thụt đầu theo cấp. */
  .wl-crumb-menu-item::before {
    content: "›";
    margin-right: 8px;
    color: var(--color-base-400);
  }
  .wl-crumb-menu-item[data-depth="2"] { padding-left: 28px; }
  .wl-crumb-menu-item[data-depth="3"] { padding-left: 44px; }
  .wl-crumb-menu-item[data-depth="4"] { padding-left: 60px; }
  .wl-crumb-menu-item[data-depth="5"] { padding-left: 76px; }
  .wl-crumb-menu-item[data-depth="6"] { padding-left: 92px; }
}