﻿.home-detail {
    Colors Color format Hex Background colors #F2FCF5;
    padding-top: 64px;
    padding-bottom: 89px;
    background: url(../../../Design/img/h2.png) no-repeat;
    background-size: 100% 86%;
    position: relative;
    z-index: 1;
    padding-bottom: 281px;
    /* background: #FFFF; */
}

.home-detail-container {
    Colors Color format Hex Background colors #F2FCF5;
}

.home-list-detailer {
    display: grid;
    grid-auto-rows: minmax(min-content,max-content);
    column-gap: 40px;
    grid-template-columns: repeat(4,minmax(0,1fr));
    row-gap: 20px;
}

.home-detail:before {
    z-index: -6;
    content: "";
    position: absolute;
    width: 100%;
    height: 36%;
    background: url(../../../Design/img/homeproduct.png) no-repeat;
    bottom: -86px;
    background-size: 100%;
}

.home-item-detailer:before {
    content: "";
    width: 106%;
    height: 104%;
    position: absolute;
    top: -12px;
    left: -7px;
    background: #D1FAE0;
    z-index: -1;
    border-radius: 60px 10px 60px 10px;
}

.home-item-detailer:hover img.dssa {
    transform: scale(1.05); /* phóng nhẹ ảnh */
    transition: transform 0.4s ease;
}

.home-item-detailer:hover .detailt-title .dkhjakaaaa {
    color: var(--default-color-5); /* đổi màu tiêu đề */
    transition: color 0.3s ease;
}

/* Loại trừ .bmxlz không bị ảnh hưởng */
.home-item-detailer:hover .bmxlz {
    color: #FF6600; /* giữ nguyên */
}

    .home-item-detailer:hover .bmxlz svg path {
        fill: #FF6600; /* giữ nguyên màu icon */
    }

.home-item-detailer {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

    .home-item-detailer img {
        border-radius: 60px 10px 60px 10px;
        transition: transform 0.4s ease; /* thêm transition ở trạng thái gốc */
        transform: scale(1); /* trạng thái ban đầu */
    }

.askja {
    margin-top: -34px;
}

    .askja .aksjdasd {
        font-size: 14px;
        text-align: center;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

.detailt-title {
    display: flex;
    justify-content: center;
    position: relative;
    width: 80%;
    left: 28px;
    top: -45px;
}

    .detailt-title .dkhjakaaaa {
        color: #FFF;
        text-align: center;
        font-family: 'OswaB';
        font-size: 17px;
        font-style: normal;
        line-height: normal;
        font-weight: unset;
        padding: 10px 29px;
        text-transform: uppercase;
        border-radius: 10px 5px 5px 10px;
        border: 3px solid #D1FAE0;
        background: linear-gradient(96deg, #00C05F 1.4%, #009C4D 100%);
    }

.aslkd {
}

.bmxlz:hover, .bmxlz1:hover, .bmxlz2:hover {
    color: #FF6600; /* đổi màu chữ */
    text-decoration-color: #FF6600; /* underline đổi màu */
}

    .bmxlz:hover svg path, .bmxlz1:hover svg path, .bmxlz2:hover svg path {
        fill: #FF6600; /* đổi màu icon */
        transition: fill 0.3s ease;
    }

.bmxlz, .bmxlz1, .bmxlz2 {
    color: #1C1D28;
    font-family: 'interR';
    font-size: 17.274px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-align: center;
    padding-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    cursor: pointer; /* đổi chuột dạng link */
    transition: all 0.3s ease; /* mượt mà khi hover */
    padding-bottom: 26px;
}

    .bmxlz svg {
    }

        .bmxlz svg path {
        }

@media (max-width: 739px) {
    .home-detail {
        /* padding-top: 56px; */
        padding-bottom: 94px;
        background-size: 100% 100%;
    }

    .bmxlz2 {
        font-size: 14px;
        gap: 5px;
        margin-top: -22px;
    }

    .home-detail-container {
    }

    .aslkd {
    }

    .home-list-detailer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 23px;
        row-gap: 87px;
    }


    .home-item-detailer {
        height: 81%;
    }

        .home-item-detailer img {
        }

    .detailt-title {
        left: 16px;
    }

        .detailt-title .dkhjakaaaa {
            font-size: 14px;
            padding: 5px 10px;
        }

    .home-list-detailer > :last-child .detailt-title {
    }

        .home-list-detailer > :last-child .detailt-title .dkhjakaaaa {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        }


    .bmxlz svg {
    }

        .bmxlz svg path {
        }

    .bmxlz, .bmxlz1 {
        font-size: 12px;
        gap: 5px;
    }

    .askja {
    }

        .askja .aksjdasd {
            font-size: 12px;
            text-align: center;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }

    .home-detail:before {
        display: none
    }
}
