.TopTitleAboutLifeSkill h4 {
    font-family: KodchasanB;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    background: var(--2, linear-gradient(180deg, #0C7844 0%, #53C858 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 19px;
    width: 358px;
}

.WidgetAboutLifeSkill .grid.wide {
    max-width: 1118px;
}

.TopTitleAboutLifeSkill span {
    display: block;
    color: #797979;
    font-family: QuicksandM;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    width: 415px;
}

.WdetailAboutLifeSkill {
    display: flex;
    margin-top: 20px;
}

.WDecorImgAboutLifeSkill {
    margin-left: 20px;
}

.WAboutLifeSkill {
    display: flex;
}

.WRightAboutLifeSkill {
    display: flex;
}

.WidgetAboutLifeSkill {
    padding-top: 106px;
    padding-bottom: 75px;
    position: relative;
}

    .WidgetAboutLifeSkill:after {
        content: "";
        position: absolute;
        background: url(/Design/GeciAcademy/KyNangSong/hand-shake-resized.png) no-repeat;
        background-size: cover;
        right: 0;
        top: calc(50% - 198px);
        width: 124px;
        height: 344px;
    }

.TopTitleAboutLifeSkill {
    position: relative;
}

    .TopTitleAboutLifeSkill:before {
        content: "";
        position: absolute;
        background: url(/Design/GeciAcademy/KyNangSong/DecorMatTroi.png) no-repeat;
        background-size: cover;
        left: -95px;
        top: -62px;
        width: 92px;
        height: 92px;
    }

.WDecorImgRAboutLifeSkill1 {
    padding-top: 10px;
    margin-left: -54px;
    position: relative;
}

.WDecorImgRAboutLifeSkill {
    position: relative;
}

    .WDecorImgRAboutLifeSkill:after {
        content: "";
        position: absolute;
        background: url(/Design/GeciAcademy/KyNangSong/May1.png) no-repeat;
        background-size: cover;
        bottom: 52px;
        right: 116px;
        width: 84px;
        height: 56px;
    }

.WDecorImgRAboutLifeSkill1:before {
    content: "";
    position: absolute;
    background: url(/Design/GeciAcademy/KyNangSong/May2.png) no-repeat;
    background-size: cover;
    top: -52px;
    right: 116px;
    width: 84px;
    height: 56px;
}

@media (min-width: 1024px) and (max-width: 1239px) {
    .TopTitleAboutLifeSkill h4 {
        font-size: 26px;
        width: 392px;
    }
}
/* Mobile & tablet */
@media (max-width: 1023px) {
    .TopTitleAboutLifeSkill h4 {
        font-family: KodchasanB;
        font-size: 24px;
    }

    .TopTitleAboutLifeSkill:before {
        left: -7px;
        top: -99px;
    }

    .WDecorImgRAboutLifeSkill1 img {
        width: 100%;
    }

    .WRightAboutLifeSkill {
        position: relative;
        z-index: 1;
    }

    .WDecorImgRAboutLifeSkill img {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 739px) {
    .WidgetAboutLifeSkill:after {
        content: "";
        position: absolute;
        background: url(/Design/GeciAcademy/KyNangSong/hand-shake-resized.png) no-repeat;
        background-size: cover;
        right: 0;
        top: calc(50% - 463px);
        width: 49px;
        height: 134px;
    }

    .WDecorImgRAboutLifeSkill1:before {
        display: none;
    }

    .TopTitleAboutLifeSkill h4 {
        font-size: 15px;
        width: 100%;
    }

    .TopTitleAboutLifeSkill span {
        width: 100%;
    }

    .WAboutLifeSkill {
        display: block;
    }

    .WRightAboutLifeSkill {
        display: block;
        padding-top: 15px;
    }

    .WDetailLinkAbout {
        width: 130px;
        height: 45px;
        margin-top: 0;
    }

    .WDecorImgAboutLifeSkill img {
        width: 72%;
        position: relative;
        top: -8px;
    }

    .WDecorImgAboutLifeSkill {
        text-align: center;
    }

    .WDetailLinkAbout a {
        font-size: 14px;
    }

    .WDecorImgRAboutLifeSkill1 {
        padding-top: 0;
        margin-left: 0;
        margin-top: -34px;
    }
}