.hero-category {position: relative;padding: 0.25rem 0.5rem; background: url('/images/category/hero-banner.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-category .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, #0000009D);}
/* nội dung text */
.hero-category .content {position: relative;z-index: 2;color: #fff;}

.car-category{}
.car-category h1 {font-size: 1.6rem;font-weight: 500;}
.car-category h2 { font-size: 1.4rem; font-weight: 500;}
.car-category h3 { font-size: 1.2rem; font-weight: 500;}
/* Brand Grid */
.car-category .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-category .section-title::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #ddd;}
/* đoạn gạch đỏ highlight */
.car-category .section-title::after {content: "";position: absolute;left: 0;bottom: 0;width: 350px;height: 1px;background: var(--bs-danger);}
.car-category .section-title img { width: 40px; }
.car-category .model-grid { display: grid;  grid-template-columns: repeat(2, 1fr); gap: 1.0rem; text-align: center; }

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

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

.car-category .model-item.active h6{ color: var(--bs-danger) !important;}
.car-category .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*/
.section-mapdata .badge { transform: skew(-20deg); }
.section-mapdata .badge span, .section-newpart .badge::before, .section-newpart .badge::after { transform: skew(20deg); display: inline-block; }
.section-mapdata .part-img {position: relative;width: 100%;aspect-ratio: 1 / 1;overflow: hidden;}
.section-mapdata .part-img img {width: 100%;height: 100%;object-fit: cover;}
.section-mapdata .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-category {background-position: 80% center; padding-bottom: 0;}
	.car-category .model-grid {grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
    .car-category .model-item .img-equal{ height: 160px;}
}

@media(min-width: 992px) {
	.hero-category {background-size: 100%; background-position: right center;}
	.hero-category h1{ font-size: 1.6rem;}
	.car-category .model-grid {grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem;}
    .car-category .model-item .img-equal {height: 160px;}
}