.journey-hero {
    padding: clamp(42px, 4.2vw, 72px) 0 clamp(18px, 2.4vw, 32px);
    position: relative;
    isolation: isolate;
}

.journey-hero::before,
.journey-hero__halo {
    display: none;
}

.journey-hero__header {
    margin: 0 auto clamp(14px, 1.8vw, 24px);
    position: relative;
    z-index: 2;
    text-align: center;
}

.journey-page .journey-hero__eyebrow {
    margin: 0 0 6px;
    padding-bottom: 0;
    color: var(--journey-primary) !important;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 800;
    line-height: 1.14;
}

.journey-hero__title {
    margin: 0;
    padding-top: 0;
    font-family: "Roboto", Arial, sans-serif;
    color: var(--journey-primary) !important;
    font-size: clamp(30px, 2.65vw, 44px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
}

.journey-hero__title span {
    color: inherit !important;
}

.journey-page .journey-hero__service {
    width: fit-content;
    min-width: min(100%, 500px);
    margin: clamp(8px, 0.8vw, 12px) auto 0;
    padding: clamp(6px, 0.5vw, 9px) clamp(22px, 1.6vw, 30px) clamp(7px, 0.55vw, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.8vw, 12px);
    border-radius: 999px;
    color: var(--journey-white) !important;
    background: linear-gradient(180deg, #2aa8f4 0%, #1179d8 100%);
    box-shadow: 0 4px 0 rgba(255, 255, 255, 0.92), 0 8px 16px rgba(12, 115, 210, 0.24);
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: clamp(21px, 2vw, 31px);
    line-height: 1;
}

.journey-page .journey-hero__service::before {
    content: "";
    width: clamp(44px, 3.7vw, 60px);
    height: clamp(36px, 3vw, 48px);
    flex: 0 0 auto;
    margin: -3px 0 -3px -14px;
    border-radius: 999px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 12.7c-3.35-3.45-8.8-4-12.38-.82-3.96 3.52-3.45 10.42-1.18 16.07 1.24 3.1 2.26 6.15 2.76 9.38.5 3.2 1.68 5.82 4.06 5.82 2.46 0 3.04-2.72 3.78-5.74.6-2.45 1.34-4.44 2.96-4.44s2.36 1.99 2.96 4.44c.74 3.02 1.32 5.74 3.78 5.74 2.38 0 3.56-2.62 4.06-5.82.5-3.23 1.52-6.28 2.76-9.38 2.27-5.65 2.78-12.55-1.18-16.07-3.58-3.18-9.03-2.63-12.38.82Z' fill='%231689e6'/%3E%3Cpath d='M16.6 18.2c1.2-2.04 3.26-3 5.74-2.72' stroke='white' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 56%;
}

.journey-page .journey-hero__service span,
.journey-page .journey-hero__service strong {
    color: var(--journey-white) !important;
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 1em;
    line-height: 1;
}

.journey-page .journey-hero__service span {
    font-weight: 500;
}

.journey-page .journey-hero__service strong {
    font-weight: 900;
}

.journey-compare {
    width: min(100%, 1340px);
    margin: 0 auto;
    padding: clamp(38px, 3.45vw, 58px) clamp(52px, 5vw, 78px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.1vw, 18px);
    position: relative;
    z-index: 1;
    border-radius: 42px;
    background: transparent;
}

.journey-compare::before {
    content: "";
    position: absolute;
    inset: -24px -54px -58px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 24px 60px rgba(37, 142, 223, 0.08);
    pointer-events: none;
    z-index: -1;
}

.journey-compare__card {
    padding: clamp(34px, 3vw, 48px) clamp(34px, 3.2vw, 52px) clamp(38px, 3.4vw, 54px);
    display: flex;
    flex-direction: column;
    border-radius: var(--journey-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 46px rgba(42, 157, 236, 0.10);
}

.journey-compare__photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.journey-compare__photos img {
    width: 100%;
    aspect-ratio: 493 / 552;
    object-fit: cover;
    object-position: center;
    border-radius: 22px;
    background: #eef1f5;
}

.journey-compare__title {
    width: fit-content;
    min-width: min(100%, 310px);
    margin: 0 auto 24px;
    padding: 10px 32px 12px;
    order: -1;
    position: relative;
    z-index: 1;
    border-radius: 999px;
    background: var(--journey-primary);
    color: var(--journey-white) !important;
    font-size: clamp(24px, 2.05vw, 34px);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.journey-compare__list {
    margin: 0;
    padding: 0 0 0 26px;
    color: var(--journey-text);
    font-size: clamp(19px, 1.55vw, 25px);
    font-weight: 500;
    line-height: 1.42;
}

.journey-compare__list li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.journey-compare__list--before li::marker {
    content: "\00d7 ";
    color: var(--journey-text);
    font-size: 1.08em;
    font-weight: 800;
}

.journey-compare__list--after li::marker {
    content: "\2713 ";
    color: var(--journey-text);
    font-size: 0.95em;
    font-weight: 900;
}

@media (min-width: 768px) {
    .journey-hero {
        padding-top: clamp(38px, 3.8vw, 64px);
    }

    .journey-compare {
        --journey-photo-gap: 8px;
        width: min(100%, 820px);
        padding: clamp(12px, 1.1vw, 16px);
        row-gap: 4px;
        column-gap: var(--journey-photo-gap);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "before-photos after-photos"
            "before-title after-title"
            "before-list after-list";
        border-radius: 38px;
        background: rgba(255, 255, 255, 0.42);
        box-shadow: 0 24px 60px rgba(37, 142, 223, 0.08);
    }

    .journey-compare::before {
        display: none;
    }

    .journey-compare::after {
        content: "";
        width: 34px;
        height: 34px;
        display: block;
        position: absolute;
        top: clamp(196px, 16vw, 286px);
        left: 50%;
        transform: translate(-50%, -50%);
        border: 4px solid #fff;
        border-radius: 50%;
        background-color: var(--journey-primary);
        background-image: url("https://cdn.diemnhangroup.com/dentalinvietnam.com/2026/05/arrow.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 58%;
        box-shadow: 0 5px 12px rgba(22, 137, 230, 0.26);
        z-index: 2;
    }

    .journey-compare__card {
        display: contents;
    }

    .journey-compare__card:first-child .journey-compare__photos {
        grid-area: before-photos;
    }

    .journey-compare__card:last-child .journey-compare__photos {
        grid-area: after-photos;
    }

    .journey-compare__card:first-child .journey-compare__title {
        grid-area: before-title;
    }

    .journey-compare__card:last-child .journey-compare__title {
        grid-area: after-title;
    }

    .journey-compare__card:first-child .journey-compare__list {
        grid-area: before-list;
    }

    .journey-compare__card:last-child .journey-compare__list {
        grid-area: after-list;
    }

    .journey-compare__photos,
    .journey-compare__title,
    .journey-compare__list {
        position: relative;
        z-index: 1;
    }

    .journey-compare__list {
        min-height: clamp(112px, 8.8vw, 148px);
        margin: 0;
        padding: clamp(54px, 4vw, 66px) clamp(16px, 1.5vw, 24px) clamp(18px, 1.7vw, 26px) clamp(30px, 2.5vw, 42px);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 42px rgba(42, 157, 236, 0.08);
    }

    .journey-compare__list::before {
        content: "";
        position: absolute;
        inset: -52px 0 auto;
        height: 62px;
        background: rgba(255, 255, 255, 0.98);
        z-index: -1;
    }

    .journey-compare__card:first-child .journey-compare__list {
        border-radius: 28px;
    }

    .journey-compare__card:first-child .journey-compare__list::before {
        display: none;
    }

    .journey-compare__card:last-child .journey-compare__list {
        border-radius: 28px;
        border-left: 1px solid rgba(46, 59, 104, 0.14);
    }

    .journey-compare__card:last-child .journey-compare__list::before {
        display: none;
    }

    .journey-compare__title {
        min-width: min(100%, 220px);
        margin: clamp(16px, 1.3vw, 22px) auto clamp(-56px, -3.1vw, -38px);
        padding: 9px 22px 9px;
        font-size: clamp(17px, 1.35vw, 22px);
        z-index: 3;
    }

    .journey-compare__photos {
        grid-template-columns: 1fr;
        gap: var(--journey-photo-gap);
        margin: 0;
    }

    .journey-compare__photos img {
        border-radius: 12px;
    }

    .journey-compare__photos img:first-child {
        aspect-ratio: 493 / 552;
    }

    .journey-compare__photos img:nth-child(2) {
        aspect-ratio: 493 / 229;
    }

    .journey-compare__list {
        font-size: clamp(14px, 1.05vw, 16px);
        line-height: 1.48;
    }
}

@media (max-width: 767px) {
    .journey-hero {
        min-height: auto;
        padding: 78px 0 26px;
    }

    .journey-hero__header {
        margin-bottom: 0;
    }

    .journey-hero__eyebrow {
        margin-bottom: 6px;
        font-size: clamp(24px, 6vw, 30px);
        line-height: 1.16;
    }

    .journey-hero__title {
        max-width: 100%;
        margin-inline: auto;
        font-size: clamp(30px, 7vw, 38px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .journey-page .journey-hero__service {
        min-width: 0;
        width: auto;
        max-width: calc(100% - 28px);
        margin-inline: 14px;
        margin-top: 12px;
        padding: 10px 16px 12px;
        gap: 8px;
        border-radius: 16px;
        font-size: clamp(18px, 4.4vw, 23px);
        line-height: 1.18;
        white-space: normal;
    }

    .journey-page .journey-hero__service::before {
        display: none;
    }

    .journey-page .journey-hero__service span,
    .journey-page .journey-hero__service strong {
        display: inline;
        line-height: inherit;
    }

    .journey-compare {
        width: auto;
        max-width: none;
        margin-top: 14px;
        margin-inline: 0;
        padding: 0 0 24px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "before-photos after-photos"
            "before-title before-title"
            "before-list before-list"
            "after-title after-title"
            "after-list after-list";
        gap: 6px;
        border-radius: 26px;
        background: transparent;
        box-shadow: none;
    }

    .journey-compare::before {
        content: "";
        display: block;
        position: absolute;
        inset: clamp(264px, calc(100vw - 84px), 336px) 0 0;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 24px 48px rgba(42, 157, 236, 0.10);
        pointer-events: none;
        z-index: -1;
    }

    .journey-compare::after {
        content: "";
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: clamp(194px, calc(68vw), 276px);
        left: 50%;
        transform: translate(-50%, -50%);
        border: 3px solid #fff;
        border-radius: 50%;
        background-color: var(--journey-primary);
        background-image: url("https://cdn.diemnhangroup.com/dentalinvietnam.com/2026/05/arrow.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 58%;
        box-shadow: 0 5px 12px rgba(22, 137, 230, 0.26);
        z-index: 2;
    }

    .journey-compare__card {
        display: contents;
    }

    .journey-compare__card:first-child .journey-compare__photos {
        grid-area: before-photos;
    }

    .journey-compare__card:last-child .journey-compare__photos {
        grid-area: after-photos;
    }

    .journey-compare__card:first-child .journey-compare__title {
        grid-area: before-title;
        margin-top: 34px;
        margin-inline: auto;
    }

    .journey-compare__card:last-child .journey-compare__title {
        grid-area: after-title;
        margin-top: 16px;
        margin-inline: auto;
    }

    .journey-compare__card:first-child .journey-compare__list {
        grid-area: before-list;
        margin-inline: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(46, 59, 104, 0.22);
    }

    .journey-compare__card:last-child .journey-compare__list {
        grid-area: after-list;
        margin-inline: 18px;
    }

    .journey-compare__photos {
        grid-template-columns: 1fr;
        gap: 5px;
        margin: 0;
    }

    .journey-compare__photos img {
        border-radius: 10px;
    }

    .journey-compare__photos img:first-child {
        aspect-ratio: 493 / 552;
    }

    .journey-compare__photos img:nth-child(2) {
        aspect-ratio: 493 / 229;
    }

    .journey-compare__title {
        min-width: 0;
        margin-inline: auto;
        padding: 9px 20px 10px;
        font-size: clamp(21px, 5.4vw, 26px);
    }

    .journey-compare__list {
        padding-left: 22px;
        padding-right: 8px;
        font-size: clamp(15px, 3.7vw, 18px);
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
}