/* Chi tiết danh mục dịch vụ: các khối ảnh và nội dung xen kẽ theo reference. */

.gc-service-detail {
    padding: 6px 0 64px;
}

.gc-service-detail__intro {
    max-width: 940px;
    margin: 0 auto 34px;
    color: var(--project-color-text);
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
}

.gc-service-detail__intro > :last-child,
.gc-service-detail__copy > :last-child {
    margin-bottom: 0;
}

.gc-service-detail__list {
    display: grid;
    gap: 50px;
}

.gc-service-detail__item {
    display: grid;
    min-width: 0;
    align-items: start;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}

.gc-service-detail__item--reverse {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.gc-service-detail__item--reverse .gc-service-detail__media {
    order: 2;
}

.gc-service-detail__item--reverse .gc-service-detail__content {
    order: 1;
}

.gc-service-detail__media {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 760 / 520;
    border-radius: var(--project-radius-image);
    background: var(--project-color-surface);
}

.gc-service-detail__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-service-detail__content {
    min-width: 0;
    padding-top: 2px;
    color: var(--project-color-text);
    font-size: 14px;
    line-height: 1.72;
}

.gc-service-detail__content h3 {
    margin: 0 0 12px;
    color: var(--project-color-text);
    font-size: 18px;
    font-weight: var(--project-font-weight-semibold);
    line-height: 1.45;
}

.gc-service-detail__copy img,
.gc-service-detail__copy iframe,
.gc-service-detail__copy table {
    max-width: 100%;
}

.gc-service-detail__footer {
    margin-top: 48px;
}

.gc-service-detail__footer .share:first-child {
    margin-top: 0;
}

@media (max-width: 991px) {
    .gc-service-detail {
        padding-bottom: 50px;
    }

    .gc-service-detail__list {
        gap: 42px;
    }

    .gc-service-detail__item,
    .gc-service-detail__item--reverse {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .gc-service-detail {
        padding-top: 2px;
        padding-bottom: 40px;
    }

    .gc-service-detail__intro {
        margin-bottom: 26px;
        font-size: 14px;
        text-align: left;
    }

    .gc-service-detail__list {
        gap: 36px;
    }

    .gc-service-detail__item,
    .gc-service-detail__item--reverse {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .gc-service-detail__item--reverse .gc-service-detail__media,
    .gc-service-detail__item--reverse .gc-service-detail__content {
        order: initial;
    }

    .gc-service-detail__content {
        padding-top: 0;
    }

    .gc-service-detail__content h3 {
        font-size: 17px;
    }

    .gc-service-detail__footer {
        margin-top: 34px;
    }
}