.card-grid-1 {
    position: relative;
    border-radius: 10px;
    border: 0.88px solid $color-border-2;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
    background: $background-5;
    text-align: center;
    padding: 30px;
}

.card-shadow {
    box-shadow: $box-shadow-2;
}

// new JB
.card-time {
    font-size: $font-xs;
    color: $color-text-muted;
    display: inline-block;
    padding: 0px 15px 0px 15px;
    background: url(../imgs/template/icons/time.svg) no-repeat 0px 5px;
}

.card-briefcase {
    font-size: $font-xs;
    color: $color-text-muted;
    display: inline-block;
    padding: 0px 15px 0px 15px;
    background: url(../imgs/template/icons/briefcase.svg) no-repeat 0px 6px;
}

.card-location {
    font-size: $font-xs;
    color: $color-text-muted;
    display: inline-block;
    padding: 0px 0px 0px 20px;
    background: url(../imgs/template/icons/location.svg) no-repeat 0px 6px;
    line-height: 24px;
}

// new
.card-grid-2 {
    border-radius: 8px;
    border: 1px solid $color-border-2;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    background: $background-5;

    i {
        font-size: $font-xl;
        color: $color-text-muted;
        margin-left: 5px;

        &.fi-rr-marker {
            margin-left: 0;
        }
    }

    .btn-apply-now {
        color: var(--primary-color);
    }

    &:hover {
        border-color: $color-border-1;
        background-color: $background-white;

        .btn-apply-now {
            color: $color-white;
            background-color: $color-brand-2;
        }
    }

    a {
        text-decoration: none;
        color: $color-brand;

        &:hover {
            color: $color-brand-2;
        }
    }

    .card-grid-2-image-rd {
        padding: 0px 15px 0px 0px;
        display: inline-block;
        width: 30%;
        min-width: 115px;
        max-width: 115px;

        figure {
            position: relative;
            display: inline-block;

            img {
                border-radius: 50%;
                height: 100px;
                width: 100px;
            }
        }

        &.online {
            figure {
                &::before {
                    height: 18px;
                    width: 18px;
                    border-radius: 50%;
                    content: "";
                    position: absolute;
                    bottom: 13px;
                    right: 9px;
                    background: $background-success;
                }
            }
        }
    }

    &.grid-bd-16 {
        background-color: $background-white;
        border-radius: 16px;

        .lbl-hot {
            position: absolute;
            top: 25px;
            left: 25px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0px 10px;
            height: 24px;
            background: $color-brand-2;
            border-radius: 5px;
            color: $color-white;
            min-width: 42px;
            font-size: $font-xs;
            line-height: 18px;
        }

        .card-block-info {
            .card-text-price {
                font-size: 16px;
                line-height: 26px;
            }
        }
    }

    .card-grid-2-image {
        position: relative;
        padding: 10px;

        .tag {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 12;
        }

        figure {
            display: block;

            img {
                width: 100%;
                border-radius: 12px;
            }
        }
    }

    .card-block-info {
        display: inline-block;
        width: 100%;
        padding: 5px 10px 20px 10px;

        .card-2-img-text {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding: 4px 0px 4px 40px;
            font-size: $font-sm;
            max-width: 90%;
            min-height: 44px;

            .card-grid-2-img-small {
                background: #e4e4e4;
                border-radius: 50%;
                padding: 5px;
                height: 32px;
                width: 32px;
                float: left;
                margin-right: 8px;
                position: absolute;
                top: 0px;
                left: 0px;
                text-align: center;
                line-height: 30px;
            }

            span {
                display: inline-block;
                color: $color-brand;
                font-size: $font-sm;
            }

            img {
                max-width: 100%;
            }
        }

        .card-text-price {
            color: $color-brand-2;
            font-family: $font-heading;
            font-weight: bold;
            font-size: 22px;

            span {
                font-size: $font-sm;
                color: $color-text-paragraph;
                font-weight: 400;
            }
        }

        .card-2-bottom {
            position: relative;

            .btn-grey-small {
                margin-right: 5px;
            }

            .btn-tags-sm {
                margin-bottom: 5px;
            }

            &.card-2-bottom-candidate {
                .btn-brand-hover {
                    padding: 15px 33px;
                    border: thin solid $border-color-1-hover;
                    font-size: 14px;

                    &:hover {
                        color: $color-white;
                    }
                }
            }
        }

        .card-grid-2-img-medium {
            padding-left: 55px;
            font-size: $font-sm;
            font-weight: 600;
            font-family: $font-heading;
            color: #151515;
            line-height: 17px;

            .card-grid-2-img-small {
                background-color: $background-13;
                height: 44px;
                width: 44px;
                border-radius: 8px;
            }
        }

        .card-profile {
            text-align: center;

            strong {
                font-size: $font-lg;
                color: $color-brand;
                line-height: 18px;
                font-weight: bold;
                font-family: $font-heading;
                display: block;
                padding-bottom: 5px;

                &:hover {
                    color: $color-brand;
                }
            }

            > span {
                color: $color-text-paragraph;
            }

            .rate-reviews-small {
                span {
                    display: inline-block;
                    vertical-align: middle;

                    img {
                        height: 13px;
                        display: flex;
                    }
                }
            }
        }
    }

    .employers-info {
        border-top: 1px solid $color-border-2;
        padding-top: 20px;
    }

    // new
    .flash {
        position: absolute;
        top: 15px;
        right: 15px;
        height: 25px;
        width: 25px;
        background: url(../imgs/template/icons/flash.svg) no-repeat 0px 0px;
    }

    .card-grid-2-image-left {
        padding: 30px 20px 15px 20px;
        display: flex;
        position: relative;

        .image-box {
            min-width: 52px;
            padding-right: 15px;
            max-width: 120px;
        }

        .right-info {
            .name-job {
                font-size: $font-lg;
                line-height: 26px;
                color: $color-brand;
                font-weight: bold;
                display: block;

                &:hover {
                    color: $color-brand-2;
                }
            }

            .location-small {
                background: url(../imgs/template/icons/location.svg) no-repeat 0px 5px;
                display: inline-block;
                padding: 0px 0px 0px 20px;
                font-size: $font-xs;
                color: $color-text-muted;
            }
        }
    }
}

.card-bg-white {
    .card-grid-2 {
        background-color: $background-white;
    }
}

.card-image-top {
    border: 1px solid $color-border-2;
    padding: 12px 12px 20px 12px;
    border-radius: 16px;
    margin-bottom: 24px;

    .image {
        overflow: hidden;
        position: relative;
        margin-bottom: 15px;
        height: 261px;
        width: 100%;
        border-radius: 10px;
        background-color: $color-border-1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0px 0px;

        .lbl-hot {
            position: absolute;
            top: 20px;
            left: 15px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0px 10px;
            height: 24px;
            background: $color-border-2;
            border-radius: 5px;
            color: $color-brand-2;
            min-width: 42px;
        }

        img {
            border-radius: 0px;
            width: 100%;
        }
    }

    .informations {
        position: relative;
        padding: 0 5px;

        h5 {
            margin-bottom: 5px;
        }
    }

    &:hover {
        box-shadow: $box-shadow-2;
    }
}

.card-grid-3 {
    border-radius: 16px;
    border: 1px solid $color-border-2;
    overflow: hidden;
    margin-bottom: 0px;
    background: $background-white;

    &:hover {
        box-shadow: $box-shadow-2;
        border-color: $color-border-1;
    }

    a {
        text-decoration: none;
    }

    .card-grid-3-image {
        position: relative;
        padding: 10px;

        figure {
            display: block;

            img {
                width: 100%;
                border-radius: 13px;
            }
        }
    }

    h5 {
        a {
            color: $color-brand;

            &:hover {
                color: $color-brand-2;
            }
        }
    }

    .card-block-info {
        display: inline-block;
        width: 100%;
        padding: 0px 18px 18px 18px;

        .card-block-rating {
            span {
                display: inline-block;
                margin: 0px 2px;
            }
        }

        .card-2-img-text {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding: 4px 0px 4px 40px;
            font-size: $font-sm;

            .card-grid-2-img-small {
                background: #e4e4e4;
                border-radius: 50%;
                padding: 5px;
                height: 32px;
                width: 32px;
                float: left;
                margin-right: 8px;
                position: absolute;
                top: 0px;
                left: 0px;
                text-align: center;
                line-height: 30px;
            }

            span {
                display: inline-block;
                color: $color-brand;
                font-size: $font-sm;
            }

            img {
                max-width: 100%;
            }
        }

        .card-time {
            font-size: $font-sm;
            display: inline-block;
            padding: 0px 15px 0px 25px;
            background: url(../imgs/template/icons/time.svg) no-repeat 0px 3px;
        }

        .card-text-price {
            color: $color-brand-2;
            font-family: $font-heading;
            font-weight: bold;
            font-size: 22px;

            span {
                font-size: $font-sm;
                color: $color-text-paragraph;
                font-weight: 400;
            }
        }

        .card-2-bottom {
            position: relative;

            .img-rounded {
                border-radius: 50%;
                height: 35px;
                width: 35px;
                margin: 6px 10px 0px 0px;
                vertical-align: middle;
                display: inline-block;
            }

            .info-right-img {
                line-height: 22px;

                .font-sm {
                    line-height: 18px !important;
                }
            }
        }

        .card-profile {
            strong {
                font-size: $font-lg;
                color: $color-brand;
                font-family: $font-heading;
                font-weight: bold;
                display: block;
            }

            span {
                font-size: $font-md;
                color: $color-text-paragraph;
            }
        }
    }

    .card-grid-3-image-circle {
        padding-top: 35px;

        figure {
            img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }
    }
}

.card-grid-4 {
    background-color: $background-white;
    padding: 40px 30px 35px 30px;
    border-radius: 10px;
    border: thin solid $color-border-2;
    margin-bottom: 30px;

    &:hover {
        border-color: $color-border-1;
        box-shadow: $box-shadow-3;
    }

    a {
        text-decoration: none;
    }

    .image-top-feature {
        figure {
            img {
                height: 126px;
                border-radius: 50%;
                width: 126px;
            }
        }
    }

    .card-grid-4-info {
        display: inline-block;
        width: 100%;
        padding: 10px 0px 0px 0px;
    }

    .btn-readmore {
        color: $color-brand;
        font-size: 18px;
        font-family: $font-heading;
        font-weight: 400;
        text-decoration: none;

        &:hover {
            color: $color-brand-2;
        }
    }
}

.card-grid-5 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 575px;
    background-size: cover;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;

    .category {
        background: url(../imgs/page/blog/picture-icon.svg) center no-repeat;
        position: absolute;
        top: 15px;
        right: 15px;
        height: 47px;
        width: 47px;
        z-index: 3;
        background-color: $background-white;
        border-radius: 50%;
        display: none;
    }

    &:hover {
        .category {
            display: inline-block;
        }
    }

    .box-cover-img {
        position: absolute;
        bottom: 0px;
        top: 10%;
        width: 100%;
        background: url(../imgs/page/blog/bg-black-trans.png) repeat-x center bottom;
        z-index: 2;

        .content-bottom {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
    }

    .img-main {
        width: 100%;
        height: auto;
    }

    .author {
        img {
            max-width: 36px;
        }
    }
}

.card-grid-6 {
    position: relative;

    .card-text-desc {
        border: 1px solid $color-border-2;
        padding: 20px;
        border-radius: 4px;
        position: relative;
        margin-bottom: 35px;

        &::before {
            content: "";
            height: 30px;
            width: 33px;
            background: $background-white url(../imgs/page/about/arrow.png) no-repeat;
            bottom: -29px;
            left: 20px;
            position: absolute;
            z-index: 2;
        }
    }

    .card-image {
        display: flex;
        padding-left: 5px;

        .image {
            min-width: 75px;

            img {
                width: 64px;
                height: 64px;
                border-radius: 50%;
            }
        }

        .card-profile {
            width: 100%;
            padding-top: 5px;
        }
    }
}

.card-grid-border {
    border: 1px solid $color-border-2;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;

    &:hover {
        box-shadow: $box-shadow-2;
    }

    .link-arrow {
        display: inline-block;
        padding: 0px 35px 0px 0px;
        background: url(../imgs/template/icons/arrow-right.svg) no-repeat right top 2px;
        color: $color-brand-2;
        font-size: $font-sm;
        line-height: 22px;
    }
}

.card-list-4 {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0px 0px 15px 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid $color-border-2;

    .image {
        min-width: 60px;
        padding-right: 10px;
    }

    .info-text {
        width: 100%;
        margin-top: -4px;
    }

    .card-price {
        font-size: 16px;
        line-height: 26px;
        padding-top: 0px;
        display: inline-block;
        color: $color-brand-2;

        span {
            font-size: 12px;
            line-height: 12px;
            color: $color-text-paragraph;
            font-weight: 500;
        }
    }
}

ul {
    li {
        &:last-child {
            padding-bottom: 0px !important;

            .card-list-4 {
                border-bottom: 0px;
                padding-bottom: 0px;
            }
        }
    }
}

.box-radius-8 {
    border-radius: 8px;
    background-color: $background-urgent;
    padding: 30px;
    display: flex;
    box-shadow: $box-shadow-2;
    border: 1px solid $color-border-2;

    .image {
        display: inline-block;
        min-width: 176px;
        padding-right: 25px;
    }

    .text-info {
        display: inline-block;
        width: 100%;
    }
}

.card-category {
    height: 255px;

    .box-cover-img {
        top: 0px;
    }
}

.card-review-1 {
    border: 1px solid $color-border-2;
    border-radius: 10px;
    padding: 0px 25px 25px 25px;
    position: relative;
    margin: 45px 0px 0px 0px;

    .image-review {
        text-align: center;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: #f1f1f1;
        margin: -44px auto 0;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .review-info {
        .review-comment {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            min-height: 96px;
            display: -webkit-box;
            white-space: normal;
        }
    }

    .review-name {
        text-align: center;
        border-bottom: 1px solid $color-border-2;
        padding-bottom: 15px;
        padding-top: 10px;
        margin-bottom: 15px;
    }

    .review-rating {
        margin-bottom: 10px;

        img {
            margin-right: 5px;
        }
    }
}

div.paginations {
    .pager {
        li {
            a.pager-number {
                height: 48px;
                width: 48px;
                text-align: center;
                line-height: 48px;
                padding: 0;
                background-color: var(--border-color-2);
                color: var(--primary-color);
                border-radius: 50%;
                font-weight: normal;

                &:hover {
                    color: #ffffff;
                    background-color: var(--primary-color);
                }

                &:before {
                    display: none;
                }
            }
        }
    }
}