.design-contruct {
    position: relative;
    background-image: url(../../../Design/img/bg-pro_02.png);
    background-size: cover;
    background-repeat: repeat;
}

    .design-contruct .grid.wide {
        position: relative;
        /* max-width: 1324px; */
    }

    .design-contruct .container {
    }

    .design-contruct .decor {
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: none;
    }

    .design-contruct .container .item {
        padding: 66px 0;
        position: relative;
    }

        .design-contruct .container .item .df-bg {
            background-color: rgb(233 233 233 / 40%);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }


        .design-contruct .container .item:nth-child(even) .df-bg {
            display: block;
        }

        .design-contruct .container .item .heading {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .design-contruct .container .item .title {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 12px 0;
            padding-left: 16px;
            border-left: 4px solid var(--bg-selection);
        }

            .design-contruct .container .item .title span {
                z-index: 1;
                font-size: 35px;
                font-family: 'OpenB';
                color: #2a2f35;
                line-height: 100%;
            }


            .design-contruct .container .item .title h3 {
                margin: 0;
                line-height: 100%;
                z-index: 1;
                color: #5D5D5D;
                font-size: 17px;
                font-weight: 100;
                margin-top: 5px;
                margin-left: 1px;
            }

        .design-contruct .container .item .btn-more {
            font-size: 14px;
            color: #4A4A4A;
            position: relative;
            padding: 14px 13px;
            height: 42px;
            overflow: hidden;
            margin-top: 12px;
            line-height: 100%;
            user-select: none;
            transition: all linear .2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .design-contruct .container .item .btn-more:hover .decor {
                right: -194px;
            }

            .design-contruct .container .item .btn-more::before {
                content: '';
                position: absolute;
                width: 99%;
                height: 95%;
                pointer-events: none;
                user-select: none;
                border: 1px solid #b8b8b8;
            }

            .design-contruct .container .item .btn-more:hover span {
                color: #fff;
            }

            .design-contruct .container .item .btn-more span {
                position: relative;
                color: #4A4A4A;
                z-index: 1;
                transition: all linear .2s;
                font-weight: bold;
            }

            .design-contruct .container .item .btn-more .decor {
                width: 255%;
                height: 400%;
                top: -147px;
                transform: rotate(-34deg);
                position: absolute;
                right: -319px;
                background-color: #022155;
                transition: all ease-in-out .3s;
            }

            .design-contruct .container .item .btn-more i {
                padding-left: 35px;
                position: relative;
                z-index: 1;
            }


        .design-contruct .container .item .title span::selection,
        .design-contruct .container .item .title h3::selection {
            background-color: var(--bg-selection-2);
            color: var(--color-selection);
        }

        .design-contruct .container .item .content .col {
            padding: 0 10px;
        }

            .design-contruct .container .item .content .col:nth-child(1) {
                padding-left: 0;
            }

            .design-contruct .container .item .content .col:nth-child(4) {
                padding-right: 0;
            }
.pro.content-item {
    background-color: #fafafa;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pro.content-item:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px);
}
.pro.content-item:hover .pro.content-item .wrap .wrap-title{
    
}

/* Ảnh */
.pro .img {
    display: block;
    overflow: hidden;
}
.pro .img img.fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-bottom: 1px solid #e6e6e6;
}
.pro:hover .img img.fill {
    transform: scale(1.07);
}

/* Nội dung */
.pro .wrap {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Tiêu đề */
.wrap-title {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.4;
}
.wrap-title:hover {
    color: #0d6efd;
}

/* Mô tả ngắn */
.project-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-top: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}