/* ============================================================
   Section Breadcrumb — Checkout
   Figma node: 5430:26469
   Design: 1600 × 183px
   padding-top: 130px, padding-bottom: 28px, padding-left/right: 100px
   Breadcrumb instance: 5430:26399
   ============================================================ */
main {
    background-color: #f9f9f9;
}

.section-breadcrumb {
    max-width: 87.5rem;
    margin: 0 auto;
    width: 100%;
    padding-top: 8.125rem;
    /* 130px / 16 — chừa chỗ cho navbar */
    padding-bottom: 1.75rem;
    /* 28px / 16 */
}

/* Breadcrumb nav row — flex, items centered, spacing via margin on children */
/* Figma component 5430:26399: gap 12px between all children */
.section-breadcrumb__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

/* Item wrapper */
.section-breadcrumb__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Separator — margin-left từ item trước, Figma gap: 12px → 0.75rem */
.section-breadcrumb__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.375rem;
    /* 6px / 16 */
    height: 0.375rem;
    /* 6px / 16 */
    margin-left: 0.75rem;
    /* 12px / 16 — Figma gap: item → separator */
}

/* Item sau separator — Figma gap: 12px → 0.75rem */
.section-breadcrumb__separator+.section-breadcrumb__item {
    margin-left: 0.75rem;
    /* 12px / 16 */
}

/* Link — inactive breadcrumb (Trang chủ) */
/* Font: SVN-Gilroy Medium 500, 16px → 1rem, line-height 1.5, color rgba(66,66,66,0.6) */
.section-breadcrumb__link {
    font-family: "SVN-Gilroy", sans-serif;
    font-size: 1rem;
    /* 16px / 16 */
    font-weight: 500;
    /* Medium */
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(66, 66, 66, 0.6);
    text-decoration: none;
    white-space: nowrap;
    transition: color 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

.section-breadcrumb__link:focus-visible {
    color: rgba(66, 66, 66, 0.9);
    text-decoration: underline;
    outline: none;
}

@media (min-width: 1024px) {
    .section-breadcrumb__link:hover {
        color: rgba(66, 66, 66, 0.9);
    }
}

/* Current item — Checkout (active, no link) */
/* Font: SVN-Gilroy SemiBold 600, 16px → 1rem, line-height 1.5, color #424242 full opacity */
.section-breadcrumb__current {
    font-family: "SVN-Gilroy", sans-serif;
    font-size: 1rem;
    /* 16px / 16 */
    font-weight: 600;
    /* SemiBold */
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    color: #424242;
    white-space: nowrap;
}

/* Separator dot — 6px × 6px circle, color #424242 */
/* Figma: SVG circle fill #424242 — rendered via CSS border-radius */
.section-breadcrumb__separator-dot {
    display: block;
    width: 0.375rem;
    /* 6px / 16 */
    height: 0.375rem;
    /* 6px / 16 */
    border-radius: 50%;
    background-color: #424242;
    flex-shrink: 0;
}

/* ============================================================
   Mobile — max-width: 639.98px
   ============================================================ */
@media screen and (max-width: 639.98px) {
    .section-breadcrumb {
        padding-top: 6.25rem;
        /* 70px / 16 — mobile navbar spacing */
        padding-bottom: 0.62rem;
        /* 16px / 16 */
        padding-left: 0.88rem;
        /* 20px / 16 */
        padding-right: 0.88rem;
        /* 20px / 16 */
    }

    .section-breadcrumb__link,
    .section-breadcrumb__current {
        font-size: 0.875rem;
        /* 14px / 16 — mobile scale-down */
    }
}