/* ==================================== */
/* MÃ GỐC VÀ HOVER             */
/* ==================================== */

.home-detail {
    background: #BBE8B0;
    position: relative;
    z-index: -3;
    padding-bottom: 24px;
}

    .home-detail:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../../../Design/img/Group21.png);
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .home-detail:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../../../Design/img/Layer61.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        z-index: -3;
    }

    .home-detail .grid.wide {
    }

.home-detail-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.home-detail-left {
}

.home-detail-right {
    width: 53%;
}

.detail-sza {
    width: 87%;
    position: relative;
    /* Thêm transition cho hiệu ứng hover container */
    transition: transform 0.3s ease, z-index 0.3s;
}

    /* Hiệu ứng HOVER cho container bao quanh item */
    .detail-sza:hover {
        transform: scale(1.02);
        z-index: 10;
    }

    .detail-sza > .detail-sza:first-child {
    }

.home-detail-right-s {
    padding-top: 77px;
}

    .home-detail-right-s > .detail-sza:first-child {
        left: -19px;
    }

    .home-detail-right-s > .detail-sza:nth-child(2) {
        left: 84px;
    }

    .home-detail-right-s > .detail-sza:nth-child(3) {
        left: 138px;
    }

    .home-detail-right-s > .detail-sza:nth-child(4) {
        left: 84px;
    }

    .home-detail-right-s > .detail-sza:last-child {
        left: -19px;
    }

    .home-detail-right-s > .detail-sza .detail-right-item:first-child {
        /* margin-top: 13px; */
    }

    .home-detail-right-s .detail-right-title {
        color: #16a450;
        font-family: 'manB';
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

.detail-right-item:hover .detail-right-title {
    color: var(--default-color-4);
}

.detail-right-item:hover .detail-right-descript {
    color: #FFF
}

.home-detail-right-s .detail-right-descript {
    color: #000;
    font-family: monR;
    font-size: 16px;
    font-weight: unset;
}

.detail-right-item {
    padding: 20px 62px;
    background: #FFF;
    border-radius: 61px;
    margin-bottom: 11px;
    padding-top: 10px;
    /* Thêm transition cho hiệu ứng hover item */
    transition: all 0.3s ease;
    cursor: pointer;
}

    /* Hiệu ứng HOVER cho item chi tiết */
    .detail-right-item:hover {
        background: #1b7a4dc9;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        transform: translateY(-5px);
    }

/* ==================================== */
/* RESPONSIVE (TÙY BIẾN)        */
/* ==================================== */

/* 💻 Responsive cho màn hình TABLET NGANG (740px đến 1023px) */
@media (min-width: 740px) and (max-width: 1023px) {

    .home-detail-right {
        width: 65%; /* Tăng chiều rộng cột phải */
    }

    /* Giảm các offset phức tạp */
    .home-detail-right-s > .detail-sza:first-child {
        left: -40px;
    }

    .home-detail-right-s > .detail-sza:nth-child(3) {
        left: 30px;
    }

    .home-detail-right-s > .detail-sza:last-child {
        left: -40px;
    }

    /* Tối ưu lại mục chi tiết */
    .detail-right-item {
        padding: 18px 40px;
    }
}


/* 📱 Responsive cho màn hình MOBILE và TABLET DỌC (Dưới 739px) */
@media (max-width: 739px) {

    .home-detail-right-s {
        padding-top: 10px
    }

    .home-detail:before {
        display: none
    }
    /* 1. Thay đổi bố cục chính */
    .home-detail-container {
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px 0;
    }

    /* 2. Điều chỉnh chiều rộng các cột */
    .home-detail-left,
    .home-detail-right {
        width: 100%;
        padding: 0 15px;
    }

    /* 3. Đưa các mục chi tiết về vị trí mặc định */
    .home-detail-right-s > .detail-sza {
        left: 0 !important;
        position: static;
        width: 100%;
    }

    /* 4. Tối ưu lại mục chi tiết */
    .detail-right-item {
        padding: 15px 30px;
        border-radius: 30px;
        margin-bottom: 15px;
    }

    /* 5. Tối ưu Font và tiêu đề */
    .home-detail-right-s .detail-right-title {
        font-size: 18px;
    }

    .home-detail-right-s .detail-right-descript {
        font-size: 14px;
    }
}