.hero-model {position: relative;padding: 0.25rem 0.5rem; background: url('/images/maker/all-maker.webp') center no-repeat;background-size: cover; background-size: 125%;background-position: 80% center; padding-bottom: 50px;}
/* lớp phủ màu bên trái */
.hero-model .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, #0000009D);}
/* nội dung text */
.hero-model .content {position: relative;z-index: 2;color: #fff;}

/*.car-model{ display: flex; flex-direction: column;}
.car-model.searching{ flex-direction: column-reverse;}*/
/*.car-model.searching .cartype-wrapper .section-button{ display: none;}*/

.car-model h1 {font-size: 1.6rem;font-weight: 500;}
.car-model h2 { font-size: 1.4rem; font-weight: 500;}
.car-model h3 { font-size: 1.2rem; font-weight: 500;}
/* Brand Grid */
.car-model .section-title {position: relative;font-size: 1.2rem;font-weight: 500;color: var(--bs-danger);text-transform: uppercase; margin-bottom: 0.5rem; padding-bottom: 0.25rem;}
/* đường line xám mờ full */
.car-model .section-title::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #ddd;}
/* đoạn gạch đỏ highlight */
.car-model .section-title::after {content: "";position: absolute;left: 0;bottom: 0;width: 350px;height: 1px;background: var(--bs-danger);}
.car-model .section-title img { width: 40px; }
.car-model .model-grid { display: grid;  grid-template-columns: repeat(2, 1fr); gap: 1.0rem; text-align: center; }

.car-model .model-item {gap: 1.0em;}
.car-model .model-item {margin: auto; width: 100%; height: 100%; transition: all 0.3s ease; position: relative;}
.car-model .model-item:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transform: translateY(-5px);}
.car-model .model-item:hover h6{ color: var(--bs-danger) !important;}

.car-model .model-item.active {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transition: transform 0.3s ease;}

.car-model .model-item.active h6{ color: var(--bs-danger) !important;}
.car-model .model-item .img-equal { width: 100%; height: 128px; margin: 0 auto; object-fit: cover; background: var(--bs-light); transition: transform 0.3s ease;}

/*map data*/
.map-wrapper .badge { transform: skew(-20deg); }
.map-wrapper .badge span, .section-newpart .badge::before, .section-newpart .badge::after { transform: skew(20deg); display: inline-block; }
.map-wrapper .part-img {position: relative;width: 100%;aspect-ratio: 1 / 1;overflow: hidden;}
.map-wrapper .part-img img {width: 100%;height: 100%;object-fit: cover;}
.map-wrapper .card:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transform: translateY(-5px);}
/*dùng chung*/
.category-item.active::after, .model-item.active::after {content: ' \2713';position: absolute;top: 0.375rem;right: 0.375rem;color: var(--bs-white);
	width: 16px;height: 16px;border-radius: 8px;background: var(--bs-danger);font-weight: 500;font-size: 0.75rem;}

@media(min-width: 768px) {
	.hero-model {background-position: 80% center; padding-bottom: 0;}
	.car-model .model-grid {grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
    .car-model .model-item .img-equal{ height: 100%; max-height: 160px;}
}

@media(min-width: 992px) {
	.hero-model {background-size: 100%; background-position: right center; padding-bottom: 0;}
	.hero-model h1{ font-size: 1.6rem;}
	.car-model .model-grid {grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
    .car-model .model-item .img-equal {height: 100%; max-height: 200px;}

	

}