@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url("../../fonts/roboto/roboto-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url("../../fonts/roboto/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cj-page {
    --cj-font: "Roboto", Arial, sans-serif;
    --cj-blue: #0a8fe8;
    --cj-blue-dark: #1579d6;
    --cj-cyan: #00a1dd;
    --cj-text: #293765;
    --cj-white: #fff;
    --cj-bg: #eaf7ff;
    --cj-container: 1270px;
    --cj-radius: 20px;
    --cj-title-size: 36px;
    --cj-title-size-mb: 34px;
    --cj-section-space: 72px;
    --cj-shadow-title: 2px 3px 0 rgba(255, 255, 255, .95), 0 3px 6px rgba(6, 120, 213, .26);
    font-family: var(--cj-font);
    color: var(--cj-text);
    overflow: hidden;
    background-color: var(--cj-bg);
    background-image: url("https://cdn.diemnhangroup.com/dentalinvietnam.com/2026/05/BG-HTKH-PC-scaled.webp");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
    padding-top: 50px;
}

.cj-page,
.cj-page h1,
.cj-page h2,
.cj-page h3,
.cj-page p,
.cj-page a,
.cj-page button,
.cj-page li,
.cj-page span,
.cj-page strong {
    font-family: "Roboto", Arial, sans-serif;
}

.cj-page *,
.cj-page *::before,
.cj-page *::after {
    box-sizing: border-box;
}

.cj-container {
    width: min(calc(100% - 120px), var(--cj-container));
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .cj-services > .cj-container,
    .cj-process > .cj-container,
    .cj-stories > .cj-container,
    .cj-commitments > .cj-container {
        width: min(calc(100% - 120px), 1270px);
    }
}

.cj-section-title {
    margin: 0;
    font-family: "Roboto", Arial, sans-serif;
    color: var(--cj-blue-dark);
    font-size: var(--cj-title-size);
    line-height: 1.08;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow: var(--cj-shadow-title);
}

.cj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 31px;
    border-radius: 7px;
    color: var(--cj-white);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    background: #079bd8;
    box-shadow: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.cj-services__more,
.cj-stories__more {
    font-weight: 500;
}

.cj-btn:hover {
    color: var(--cj-white);
    transform: translateY(-2px);
    box-shadow: none;
}

.cj-btn span {
    margin-left: 10px;
}

.cj-btn__icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.cj-page p,
.cj-page h1,
.cj-page h2,
.cj-page h3 {
    letter-spacing: 0;
}

@media (min-width: 850px) and (max-width: 1439px) {
    .cj-page {
        --cj-title-size: clamp(28px, 3.2vw, 36px);
    }

    .cj-container {
        width: min(calc(100% - 96px), var(--cj-container));
    }
}

@media (max-width: 849px) {
    .cj-page {
        --cj-title-size: 22px;
        --cj-section-space: 44px;
        background-image: url("https://cdn.diemnhangroup.com/dentalinvietnam.com/2026/05/BG-HTKH-Mobi-scaled.webp");
        background-size: 100% auto;
        padding-top: 10px;
    }

    .cj-container {
        width: min(calc(100% - 44px), 540px);
    }

    .cj-section-title {
        font-size: 20px;
        text-shadow: 1px 2px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(6, 120, 213, .22);
    }

    .cj-btn {
        min-height: 34px;
        padding: 0 17px;
        border-radius: 7px;
        font-size: 16px;
    }

    .cj-btn span {
        margin-left: 4px;
    }

    .cj-btn__icon {
        width: 20px;
        height: 20px;
    }
}
