.d-wrap {
    flex-wrap: wrap;
}
.d-flex {
    display: flex;
}
.d-al-center {
    align-items: center;
}
.d-center {
    justify-content: center;
}
.d-space {
    justify-content: space-between;
}
.mrb-0 {
    margin-bottom: 0;
}
.pdb-0{
    padding-bottom: 0;
}

.gap-10 {
    gap: 10px;
}

.list-sp_hot .item-sp{
	width: 26%;
	border-radius: 10px;
}
.list-sp_hot .item-sp .threed-card {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 2500px;
}
.list-sp_hot .item-sp .threed-card .threed-wrapper{
	transition: all 0.5s;
    width: 100%;
    z-index: -1;
}
.list-sp_hot .item-sp .threed-card .threed-wrapper::before, .list-sp_hot .item-sp .threed-card .threed-wrapper::after {
	content: "";
	opacity: 0;
	width: 100%;
	height: 80px;
	transition: all 0.5s;
	position: absolute;
	left: 0;
}
.list-sp_hot .item-sp .threed-card .threed-wrapper::before {
	top: 0;
	height: 100%;
	background-image: linear-gradient(to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19, 0.8) 97%);
}
.list-sp_hot .item-sp .threed-card .threed-wrapper::after {
	bottom: 0;
	opacity: 1;
	background-image: linear-gradient(to bottom, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19, 0.8) 97%);
}
.list-sp_hot .item-sp .threed-card:hover .threed-wrapper::before, .list-sp_hot .item-sp .threed-wrapper::after{
	opacity: 1;
}
.list-sp_hot .item-sp  .threed-hover-img {
	opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
}
.list-sp_hot .item-sp .threed-card:hover .threed-wrapper {
	transform: perspective(900px) translateY(-5%) rotateX(30deg) translateZ(0);
	box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.list-sp_hot .item-sp .threed-card:hover .threed-wrapper::after {
	height: 120px;
}
.list-sp_hot .item-sp .threed-card:hover .threed-hover-img {
	opacity: 1;
	transform: translate3d(0, -50%, 0);
}
.box-text {
	text-align: justify;
}

.list-sp_hot .item-sp {
    width: calc(33.333% - 10px);
    border-radius: 10px;
}

/* Mobile: chuyển sang cuộn ngang */
@media (max-width: 768px) {
    .list-sp_hot {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* ẩn thanh cuộn trên Firefox */
    }
    .list-sp_hot::-webkit-scrollbar {
        display: none; /* ẩn thanh cuộn trên Chrome/Safari */
    }

    .list-sp_hot .item-sp {
        flex: 0 0 80%; /* mỗi sp chiếm 80% màn hình để dễ xem */
        width: auto;
    }
}