/* =========================================================
   HỒNG HÀ SERVICE BAR
   Desktop: 5 item
   Mobile: horizontal swipe
   ========================================================= */

.hh-services {
    width: 100%;
    display: block;
    background: #fff;
}

.hh-ui-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    position:sticky;
}

.hh-services-list {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: stretch;

    box-sizing: border-box;
}


/* =========================================================
   ITEM
   ========================================================= */

.hh-service-item {
    min-width: 0;

    display: flex;
    align-items: center;

    padding: 15px 18px;

    box-sizing: border-box;

    text-decoration: none;
    color: #222;

    border-right: 1px solid #eeeeee;

    transition: background .2s ease;
}

.hh-service-item:last-child {
    border-right: none;
}

.hh-service-item:hover {
    background: #fafafa;
}


/* =========================================================
   ICON
   ========================================================= */

.hh-service-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 11px;

    border-radius: 50%;

    font-size: 19px;
}


/* màu icon */

.hh-service-icon.blue {
    background: #eaf3ff;
    color: #1677ff;
}

.hh-service-icon.orange {
    background: #fff3e8;
    color: #f28b22;
}

.hh-service-icon.green {
    background: #eaf8ef;
    color: #20a05a;
}

.hh-service-icon.red {
    background: #fff0f1;
    color: #d70018;
}

.hh-service-icon.purple {
    background: #f2edff;
    color: #7357d8;
}


/* =========================================================
   TEXT
   ========================================================= */

.hh-service-info {
    min-width: 0;
    flex: 1;
}

.hh-service-title {
    overflow: hidden;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.35;

    color: #222;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.hh-service-desc {
    margin-top: 3px;

    overflow: hidden;

    font-size: 12px;
    line-height: 1.35;

    color: #777;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .hh-ui-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hh-service-item {
        padding: 13px 11px;
    }

    .hh-service-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        margin-right: 8px;

        font-size: 17px;
    }

    .hh-service-title {
        font-size: 13px;
    }

    .hh-service-desc {
        font-size: 11px;
    }
}


/* =========================================================
   MOBILE
   <= 767px
   ========================================================= */

@media (max-width: 767px) {

    .hh-ui-container {
        width: 100%;
        padding: 0;
    }

    .hh-services-list {

        /*
         * Quan trọng:
         * Không dùng grid trên mobile
         */
        display: flex;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        /*
         * Vuốt mượt trên mobile
         */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;

        /*
         * Không cho item tự xuống dòng
         */
        flex-wrap: nowrap;

        /*
         * Ẩn scrollbar
         */
        scrollbar-width: none;

        box-sizing: border-box;
    }

    .hh-services-list::-webkit-scrollbar {
        display: none;
    }


    /* =====================================================
       MOBILE ITEM
       ===================================================== */

    .hh-service-item {

        /*
         * Khoảng 2.3 item trên màn hình
         */
        flex: 0 0 43%;

        width: 43%;
        min-width: 43%;

        min-height: 70px;

        padding: 10px 10px;

        border-right: 1px solid #eeeeee;

        box-sizing: border-box;

        background: #fff;
    }


    /* =====================================================
       ICON MOBILE
       ===================================================== */

    .hh-service-icon {

        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        margin-right: 8px;

        font-size: 15px;
    }


    /* =====================================================
       TEXT MOBILE
       ===================================================== */

    .hh-service-title {
        font-size: 12px;
        line-height: 1.3;
    }

    .hh-service-desc {
        margin-top: 2px;

        font-size: 10px;
        line-height: 1.3;
    }
}
/* =========================================
   TABLET
   Không cắt chữ, cho phép tiêu đề 2 dòng
   ========================================= */
@media (max-width: 1199px) and (min-width: 768px) {

    .hh-ui-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .hh-services-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
        gap:1px;
    }

    .hh-service-item {
        min-width: 0;
        padding: 12px 10px;
    }

    .hh-service-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        font-size: 17px;
    }

    .hh-service-title {
        font-size: 12px;
        line-height: 1.35;

        /* KHÔNG CẮT CHỮ */
        white-space: normal;
        overflow: visible;
        text-overflow: unset;

        /* tối đa 2 dòng */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hh-service-desc {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.3;

        /* KHÔNG CẮT CHỮ */
        white-space: normal;
        overflow: visible;
        text-overflow: unset;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* =========================================================
   MOBILE NHỎ
   <= 400px
   ========================================================= */

@media (max-width: 400px) {

    .hh-service-item {

        /*
         * Hiện khoảng 2.25 item
         */
        flex-basis: 45%;
        min-width: 45%;
    }

    .hh-service-icon {
        flex-basis: 34px;

        width: 34px;
        height: 34px;

        margin-right: 7px;

        font-size: 14px;
    }

    .hh-service-title {
        font-size: 11px;
    }

    .hh-service-desc {
        font-size: 9px;
    }
}