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

.section-part{}
.section-part h1 {font-size: 1.6rem;font-weight: 500;}
.section-part h2 { font-size: 1.4rem; font-weight: 500;}
.section-part h3 { font-size: 1.2rem; font-weight: 500;}

/* Part Image*/
.part-gallery {width: 100%;}
.part-gallery .thumb-swiper .swiper-slide {opacity: 0.5;cursor: pointer;}
.part-gallery .thumb-swiper .swiper-slide-thumb-active {opacity: 1;border: 2px solid var(--bs-primary);border-radius: 0.25rem;}
/* Brand Grid */
.section-part .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 */
.section-part .section-title::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #ddd;}
/* đoạn gạch đỏ highlight */
.section-part .section-title::after {content: "";position: absolute;left: 0;bottom: 0;width: 350px;height: 1px;background: var(--bs-danger);}
.section-part .section-title img { width: 40px; }
.part-note{ line-height: 1.8rem;}

.shopping-wrapper button{ padding: 0.5rem 0.5rem;}
.shopping-wrapper #qty-input.form-control {width: 40px; padding: 0.25rem 0.5rem; font-size: 1.2rem; font-weight: bold;}
.shopping-wrapper .qty-group .btn-plus { border-radius: 0 0.25rem 0.25rem 0 !important;}
.shopping-wrapper .qty-group .btn-minus { border-radius: 0.25rem 0 0 0.25rem !important;}

.part-oem{}
.part-oem .car-models {overflow: hidden;}
.part-oem .car-models.collapsed {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.part-oem .car-models.collapsed {position: relative;}
.part-oem .car-models.collapsed::after {content: "";position: absolute;bottom: 0;right: 0;width: 100%;height: 20px;background: linear-gradient(to bottom, transparent, white);}
.part-oem .btn-show-more {display: block; text-decoration: none;}
/**/
.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;}

.model-wrapper .model-grid { display: grid;  grid-template-columns: repeat(2, 1fr); gap: 1.0rem; text-align: center; }
.model-wrapper .model-item {gap: 1.0em;}
.model-wrapper .model-item {margin: auto; width: 100%; height: 100%; transition: all 0.3s ease; position: relative;}
.model-wrapper .model-item:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transform: translateY(-5px);}
.model-wrapper .model-item:hover h6{ color: var(--bs-danger) !important;}
.model-wrapper .model-item.active {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transition: transform 0.3s ease;}
.model-wrapper .model-item.active h6{ color: var(--bs-danger) !important;}
.model-wrapper .model-item .img-equal { width: 100%; height: 128px; margin: 0 auto; object-fit: cover; background: var(--bs-light); transition: transform 0.3s ease;}
/*SUPPORT*/
@keyframes shake {0% {transform: rotate(0deg);}25% {transform: rotate(-6deg);}50% {transform: rotate(6deg);}75% {transform: rotate(-6deg);}100% {transform: rotate(0deg);}}
.support-wrapper{ width: 100%;}
.support-wrapper .fas.fa-phone-square{ font-size: 1.6rem;}
.support-wrapper div > p{ font-size: 1.2rem;}
.support-wrapper .icon-headset {display: inline-block;animation: shake 1s infinite;color: #28a745;text-shadow: 0 0 5px rgba(40,167,69,0.6), 0 0 10px rgba(40,167,69,0.4);}
/*MAP DATA*/
.map-wrapper {width: 100%;position: relative;}
.map-wrapper canvas {cursor: pointer;position: relative;}
.map-wrapper #canvas {transform: scale(1);transform-origin: top left;}
.map-wrapper .map-panel {cursor: pointer;position: relative;min-height: 40vh;}
.map-wrapper .map-panel div.map-item {border: none;cursor: pointer;position: absolute;z-index: 1;}
.map-wrapper .map-panel div.map-item.active { border: 3px solid #F00;}
.map-wrapper .map-item { cursor: pointer;}
.map-wrapper .map-item.active td {color: var(--bs-danger);}
.map-wrapper .part-list{ max-height: 30vh; overflow-y: auto;}
.map-wrapper .part-list table tr:last-child td{ border-bottom: 0 !important;}
.map-wrapper .zoom-wrapper {position: absolute;right: 20px;top: 5px;z-index: 999;border: 1px solid #ccc;line-height: 100%;padding: 0.5rem 0.75rem;border-radius: 0.5rem;background: #FFF;}
.map-wrapper .zoom-wrapper .btn-zoom { padding: 0; margin: 0;position: relative;transition: transform 0.15s ease, box-shadow 0.15s ease;}
.map-wrapper .zoom-wrapper .btn-zoom .fas{ font-size: 1.8rem;}
.map-wrapper .zoom-wrapper .btn-zoom:hover { transform: scale(1.1);}
/* Star rating */
#starRating i {font-size: 24px;color: #ccc;cursor: pointer;}
#starRating i.active {color: gold;}
/*dùng chung*/
.part-wrapper .part-oem{width: 100%; overflow-x: auto;}

@media(min-width: 768px) {
	.hero-part {background-position: 80% center; padding-bottom: 0;}
	.support-wrapper .fas.fa-phone-square{ font-size: 1.8rem;}
    .support-wrapper div > p{ font-size: 1.6rem;}
	.car-model .model-grid {grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
    .car-model .model-item .img-equal{ height: 100%; max-height: 160px;}
    .model-wrapper .model-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1.0rem;text-align: center;}
	.model-wrapper  .model-item .img-equal{ height: 100%; max-height: 160px;}
}

@media(min-width: 992px) {
	.hero-part {background-size: 100%; background-position: right center;}
	.hero-part h1{ font-size: 1.6rem;}
	.support-wrapper .fas.fa-phone-square{ font-size: 1.6rem;}
    .support-wrapper div > p{ font-size: 1.4rem;}
	.map-wrapper .map-panel {min-height: 60vh;}
	.map-wrapper .part-list{ max-height: 75vh; overflow-y: auto;}
	.map-wrapper .zoom-wrapper {right: 35px; padding: 0.375rem 0.5rem;}
	.map-wrapper .zoom-wrapper .btn-zoom .fas{ font-size: 1.5rem;}
	.map-wrapper .part-list .table{ font-size: 0.875rem;}
	.car-model .model-grid {grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
    .car-model .model-item .img-equal {height: 100%; max-height: 200px;}

	.model-wrapper .model-grid {grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
    .model-wrapper .model-item .img-equal {height: 100%; max-height: 260px;}
}

@media(min-width: 1400px) {
    .shopping-wrapper #qty-input.form-control { height: 39px;}
}