.detail-pro-b {
    background: linear-gradient(180deg, rgb(228 233 231) 0%, rgb(203 221 214) 100%);
}

.detail-pro-b-container {
}

.detail-pro-b .grid.wide {
}

.detail-pro-b .detal-pro-b-contanier {
}

    .detail-pro-b .detal-pro-b-contanier .pro-b-back {
    }

    .detail-pro-b .detal-pro-b-contanier .pro-b-font {
    }

.detal-pro-b-contanier .pro-b-font .pro-b-left {
}

.detail-pro-b-container .pro-b-font {
    display: flex;
    padding: 51px 0;
    gap: 28px;
}

    .detail-pro-b-container .pro-b-font .pro-b-right {
        width: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .detail-pro-b-container .pro-b-font .pro-b-left {
        display: flex;
        flex-direction: column;
        /* gap: 29px; */
        /* margin: 0 50px; */
        /* margin-top: 40px; */
        text-align: left;
        width: 66%;
    }

.pro-b-font .pro-b-left .b-left-title {
}

    .pro-b-font .pro-b-left .b-left-title span {
    }

    .pro-b-font .pro-b-left .b-left-title h3 {
        margin: 0;
        display: flex;
        flex-direction: column;
        color: rgba(32, 32, 32, 0.8);
        font-family: 'interB';
    }


.pro-b-font .pro-b-left .b-left-title {
    font-weight: 700;
    font-size: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(27 27 27 / var(--tw-text-opacity));
    line-height: 1;
}

.pro-b-font .pro-b-left .b-left-descript {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / 67%);
}

.pro-b-font .pro-b-right .b-right-img {
    width: 100%;
}

    .pro-b-font .pro-b-right .b-right-img img {
        width: 100%;
    }

.detail-pro-b .pro-b-back {
    perspective: 200px;
    opacity: 0.2;
    overflow: hidden;
    width: 100%;
    height: 32%;
    position: absolute;
    pointer-events: none;
}

    .detail-pro-b .pro-b-back .pro-b-animation {
        transform: rotateX(var(--grid-angle));
        --grid-angle: 19deg;
    }

        .detail-pro-b .pro-b-back .pro-b-animation .b-animation-detail {
            width: 600vw;
            transform-origin: 100% 0 0;
            margin-left: -52%;
            height: 300vh;
            background-size: 60px 60px;
            background-repeat: repeat;
            background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 1px, transparent 0), linear-gradient(to bottom, rgba(0, 0, 0, .3) 1px, transparent 0);
            animation: grid 15s linear infinite;
        }

@keyframes grid {
    0% {
        transform: translateY(-50%)
    }

    to {
        transform: translateY(0)
    }
}

@media (max-width: 768px) { /* Tablet */
    .pro-b-font {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .pro-b-left {
        padding: 10px 0;
        width: 100% !important;
    }

    .pro-b-right {
        width: 100%;
        padding: 15px;
    }

    .b-right-img img {
        max-width: 392px;
    }

    .b-left-title h3 {
        font-size: 1.5rem;
    }

    .meteor {
        width: 10px;
        height: 80px; /* Nhỏ hơn trên tablet */
    }
}

@media (max-width: 480px) { /* Mobile */
    .pro-b-font {
    }

    .pro-b-left {
        /* padding: 0px; */
        /* gap: 15px; */
        /* margin: 34px !important; */
    }

    .pro-b-right {
        padding: 10px;
    }


    .b-left-title h3 {
        font-size: 1.25rem;
    }

    .pro-list h3 {
        font-size: 27px !important;
    }

    .pro-list .pro-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .b-left-descript {
        font-size: 0.9rem;
    }

    .meteor {
        width: 8px;
        height: 60px; /* Nhỏ hơn trên mobile */
    }
}