/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMB — dùng chung PDP máy in (.pdp) và PDP mực in (.ctg-pdp)

   Markup do woocommerce/loop/breadcrumbs.php render:
     .mitn-breadcrumb > nav.rank-math-breadcrumb > p >
        a (Trang chủ, có icon nhà) · span.separator · a (các cấp cha) ·
        span.last[aria-current="page"] (trang hiện tại, KHÔNG có link)

   Quy ước:
   - Điểm nhấn thuộc về mục CUỐI (trang hiện tại): đậm hơn, màu text chính,
     không link, có aria-current="page". Không dùng nền pill cho cấp cha —
     pill ở giữa chuỗi khiến người dùng tưởng đang đứng ở trang danh mục
     hoặc tưởng đó là tag/bộ lọc.
   - Các cấp cha: xám, chỉ gạch chân khi hover/focus.
   - Luôn 1 dòng, cuộn ngang khi tràn (chuỗi 5 cấp trên mobile).
   ══════════════════════════════════════════════════════════════════════ */

.mitn-breadcrumb .rank-math-breadcrumb p {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted, #4b5563);

    /* 1 dòng + cuộn ngang, ẩn thanh cuộn */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mitn-breadcrumb .rank-math-breadcrumb p::-webkit-scrollbar {
    display: none;
}

/* Không cho item nào co lại — nếu tràn thì cuộn, không xuống dòng */
.mitn-breadcrumb .rank-math-breadcrumb p > * {
    flex: 0 0 auto;
}

/* ── Các cấp cha ─────────────────────────────────────────────────────── */
.mitn-breadcrumb .rank-math-breadcrumb p a {
    color: var(--color-text-muted, #4b5563);
    text-decoration: none;
    transition: color 0.15s;
}
.mitn-breadcrumb .rank-math-breadcrumb p a:hover,
.mitn-breadcrumb .rank-math-breadcrumb p a:focus-visible {
    color: var(--color-brand-primary, #dd3333);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mitn-breadcrumb .rank-math-breadcrumb p a:focus-visible {
    outline: 2px solid var(--color-brand-primary, #dd3333);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Link đầu tiên bọc icon nhà + chữ */
.mitn-breadcrumb .rank-math-breadcrumb p a:first-of-type {
    display: inline-flex;
    align-items: center;
}

/* Icon nhà (PHP chèn sprite #icon-house vào <a> đầu tiên) */
.mitn-breadcrumb .rank-math-breadcrumb .mitn-icon--home {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
    color: inherit;
}

/* ── Dấu phân cách — giữ ký tự do Rank Math cấu hình ─────────────────── */
.mitn-breadcrumb .rank-math-breadcrumb .separator {
    color: #d1d5db;
    margin: 0 4px;
}

/* ── Mục cuối = trang hiện tại ───────────────────────────────────────── */
.mitn-breadcrumb .rank-math-breadcrumb p .last {
    color: var(--color-text-primary, #111111);
    font-weight: 600;
}

/* ── Mobile: chừa chỗ cuộn ở mép phải cho biết còn nội dung ──────────── */
@media (max-width: 768px) {
    .mitn-breadcrumb .rank-math-breadcrumb p {
        /* padding-right >= vùng fade để khi cuộn hết, chữ cuối không bị mờ */
        padding-right: 20px;
        /* Gợi ý còn nội dung bên phải bằng fade nhẹ */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    }
}