.content-section {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 60px 0;
}

.content-section>.content-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 60px 0;
}

.description-group {
    width: 100%;
    padding: 60px;
    box-sizing: border-box;
    background-color: var(--colorPrimary100);
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    justify-content: space-between;
    gap: 0 60px;
}

.left-desc {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px 0;
}

.hot {
    font-size: var(--fontSizeSm);
    font-weight: var(--fontWeightExtrabold);
    line-height: var(--lineHeightSm);
    color: var(--colorPrimary);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--colorPrimary);
    background-color: var(--colorWhite);
}

.left-desc .item-title {
    font-size: var(--fontSize2Xl);
    line-height: var(--lineHeight2Xl);
}

.right-desc {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px 0;
}

.right-desc>p {
    display: flex;
    align-items: center;
    gap: 0 10px;
    font-size: var(--fontSizeLg);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightLg);
}

.right-desc>p span {
    font-size: var(--fontSize3Xl);
    font-weight: var(--fontWeightExtrabold);
    line-height: var(--lineHeight4Xl);
}

.right-desc>span {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
}

.type-group {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px 0;
}

.service-box {
    width: 100%;
}

.service-box>ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 20px;
}

.service-box>ul>li {
    padding: 50px 40px;
    box-sizing: border-box;
    border: 1px solid var(--colorGray400);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 25px 0;
}

.service-box>ul>li>p {
    font-size: var(--fontSizeXl);
    font-weight: var(--fontWeightExtrabold);
    line-height: var(--lineHeightXl);
}

.service-box>ul>li .btn-group {
    width: 100%;
    margin-top: 5px;
}

.banner-group {
    width: 100%;
    background-color: var(--colorGray100);
    padding: 40px 0;
}

.banner-group .content-inner {
    align-items: center;
    justify-content: space-between;
}

.banner-group .title-group {
    gap: 10px 0;
}

.banner-group .title-group p {
    font-size: var(--fontSizeXl);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightXl);
}

.banner-group .desc {
    font-size: var(--fontSizeSm);
    line-height: var(--lineHeightSm);
}

.banner-group .btn.secondary{
    background-color: var(--colorWhite);
}

.tariff-group {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px 0;
}

.tariff-box {
    width: 100%;
}

.tariff-box ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tariff-box ul li {
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 0 40px;
    box-sizing: border-box;
    border: 1px solid var(--colorGray400);
}

.tariff-price-group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.tariff-price-group>span {
    font-size: var(--fontSizeBase);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightBase);
}

.tariff-price-group>p {
    display: flex;
    align-items: center;
    gap: 0 15px;
    font-size: var(--fontSize3Xl);
    font-weight: var(--fontWeightExtrabold);
    line-height: var(--lineHeight4Xl);
}

.tariff-price-group>p span {
    font-size: var(--fontSizeLg);
    font-weight: var(--fontWeightMedium);
    line-height: var(--lineHeightLg);
    text-decoration: line-through;
}





/* responsive css */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .description-group {
        padding: 40px;
        grid-template-columns: 1fr;
        gap: 25px 0;
    } 
     
    .right-desc {
        align-items: center;
        flex-direction: row;
        gap: 0 4px;
    }

    .service-box>ul {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .banner-group .btn-group{
        width: auto;
    }

    .tariff-box ul {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }
}

@media screen and (max-width: 767px) {
    .description-group {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 40px 20px;
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .hot {
        width: 48px;
        height: 22px;
        padding: 0;
        font-size: var(--fontSizeXs);
        line-height: var(--lineHeightXs);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .left-desc .item-title {
        font-size: var(--fontSizeXl);
        line-height: var(--lineHeightXl);
    }

    .right-desc {
        align-items: center;
        flex-direction: row;
        gap: 0 4px;
    }

    .right-desc>p {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightBase);
    }

    .right-desc>p span {
        font-size: var(--fontSizeXl);
        line-height: var(--lineHeightXl);
    }

    .right-desc>span {
        font-size: var(--fontSizeXs);
        line-height: var(--lineHeightXs);
    }

    .type-group {
        gap: 20px 0;
    }

    .service-box>ul {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }

    .service-box>ul>li {
        padding: 30px 20px;
        gap: 15px 0;
    }

    .service-box>ul>li>p {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightBase);
    }

    .banner-group {
        padding: 35px 0;
    }

    .banner-group .content-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px 0;
    }

    .banner-group .title-group p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightMd);
    }

    .banner-group .desc {
        font-size: var(--fontSizeXs);
        line-height: var(--lineHeightXs);
    }

    .tariff-group {
        gap: 20px 0;
    }

    .tariff-box ul {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }

    .tariff-box ul li {
        padding: 30px 20px;
        gap: 0 20px;
    }

    .tariff-box ul li img {
        width: 60px;
    }

    .tariff-price-group>span {
        font-size: var(--fontSizeXs);
        line-height: var(--lineHeightXs);
    }

    .tariff-price-group>p {
        gap: 0 10px;
        font-size: var(--fontSizeXl);
        line-height: var(--lineHeightXl);
        flex-wrap: wrap;
    }

    .tariff-price-group>p span {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .guide-group {
        margin-top: -20px;
    }
}