/* ===================================================
   Responsive CSS - Responsive styles
   =================================================== */

/* ===================================================
   TABLET: 768px - 1023px
   =================================================== */

@media (max-width: 1023px) {
	/* Container */
	.acc-container {
		padding: 0 24px;
	}

	/* Section spacing */
	.acc-section {
		padding: 56px 0;
	}

	.acc-section__heading {
		font-size: 32px;
	}

	.acc-section__title {
		font-size: 28px;
	}

	/* HEADER */
	.acc-header__nav {
		display: none;
	}

	.acc-header__toggle {
		display: flex;
	}

	/* Keep Nhận báo giá button visible on mobile */
	.acc-header__actions .acc-btn--pulse {
		display: flex;
		font-size: 12px;
		padding: 10px 16px;
	}

	/* Mobile menu */
	.acc-header__nav--open {
		display: block;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: var(--acc-white);
		box-shadow: var(--acc-shadow-lg);
		padding: 16px 24px;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}

	.acc-header__nav--open .acc-header__menu {
		flex-direction: column;
		gap: 0;
	}

	.acc-header__nav--open .acc-header__menu-link {
		padding: 12px 16px;
		font-size: 15px;
		border-bottom: 1px solid var(--acc-gray-100);
	}

	/* HERO */
	.acc-hero__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-hero__slider {
		height: 480px;
	}

	.acc-hero__thumbs {
		flex-direction: row;
		gap: 8px;
		justify-content: center;
		padding: 8px 16px;
	}

	.acc-hero__thumb {
		aspect-ratio: auto;
		width: 80px;
		height: 48px;
	}

	button.acc-hero__prev,
	button.acc-hero__next {
		width: 40px;
		height: 40px;
	}

	button.acc-hero__prev {
		left: 12px;
	}

	button.acc-hero__next {
		right: 12px;
	}

	/* MODELS */
	.acc-models__grid {
		grid-template-columns: 1fr;
	}

	.acc-models__card-inner {
		flex-direction: column;
		text-align: center;
		padding: 32px 24px;
	}

	.acc-models__image {
		width: 100%;
		border-radius: 15px;
	}
.acc-models__image img {border-radius: 15px; }
	.acc-models__actions {
		justify-content: center;
	}

	.acc-models__name {
		font-size: 26px;
	}

	/* WHY */
	.acc-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* EXTERIOR */
	.acc-exterior__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-exterior__thumbs {
		flex-direction: row;
		justify-content: center;
		order: 3;
		margin-top: 16px;
	}

	.acc-exterior__thumb {
		width: 64px;
		height: 44px;
	}

	/* INTERIOR */
	.acc-interior__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-interior__thumbs {
		flex-direction: row;
		justify-content: center;
		order: 3;
		margin-top: 16px;
	}

	.acc-interior__thumb {
		width: 64px;
		height: 44px;
	}

	/* TECHNOLOGY */
	.acc-technology__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-technology__thumbs {
		flex-direction: row;
		justify-content: center;
		order: 3;
		margin-top: 16px;
	}

	.acc-technology__thumb {
		width: 64px;
		height: 44px;
	}

	/* SAFETY */
	.acc-safety__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-safety__thumbs {
		flex-direction: row;
		justify-content: center;
		order: 3;
		margin-top: 16px;
	}

	.acc-safety__thumb {
		width: 64px;
		height: 44px;
	}

	/* PRICING */
	.acc-pricing__slide {
		width: calc((100% - 24px) / 2);
	}

	/* PROMO */
	.acc-promo__banner {
		flex-direction: column;
		text-align: center;
		padding: 48px 32px;
		border-radius: var(--acc-radius-lg);
	}

	.acc-promo__content {
		max-width: 100%;
	}

	.acc-promo__heading {
		font-size: 36px;
	}

	/* DELIVERY */
	.acc-delivery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* DEALER */
	.acc-dealer__card {
		grid-template-columns: 1fr;
		padding: 32px;
		gap: 32px;
	}

	/* FINAL CTA */
	.acc-final-cta__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* FOOTER */
	.acc-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* ===================================================
   MOBILE: <= 767px
   =================================================== */

@media (max-width: 767px) {
	/* Container */
	.acc-container {
		padding: 0 16px;
	}

	/* Section */
	.acc-section {
		padding: 40px 0;
	}

	.acc-section__heading {
		font-size: 26px;
	}

	.acc-section__title {
		font-size: 24px;
	}

	.acc-section__header {
		margin-bottom: 32px;
	}

	.acc-section__label {
		font-size: 11px;
	}

	/* HEADER */
	.acc-header {
		height: 60px;
	}

	.acc-header__inner {
		height: 60px;
	}

	.acc-header__logo-img {
		height: 32px;
	}

	.acc-header__nav--open {
		top: 60px;
		max-height: calc(100vh - 60px);
	}

	/* MAIN */
	.acc-main {
		padding-top: 60px;
	}

	/* HERO */
	.acc-hero__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.acc-hero__slider {
		height: 360px;
	}

	.acc-hero__thumbs {
		flex-direction: row;
		gap: 6px;
		justify-content: center;
		padding: 6px 12px;
	}

	.acc-hero__thumb {
		aspect-ratio: auto;
		width: 64px;
		height: 40px;
	}

	button.acc-hero__prev,
	button.acc-hero__next {
		width: 36px;
		height: 36px;
	}

	button.acc-hero__prev {
		left: 8px;
	}

	button.acc-hero__next {
		right: 8px;
	}

	.acc-hero__thumb {
		width: 90px;
		height: 52px;
	}

	.acc-hero__dots {
		bottom: 16px;
		gap: 8px;
	}

	.acc-hero__dot {
		width: 10px;
		height: 10px;
	}

	/* MODELS */
	.acc-models {
		padding: 40px 0 56px;
	}

	.acc-models__card-inner {
		padding: 24px 16px;
	}

	.acc-models__name {
		font-size: 22px;
	}

	.acc-models__image {
		width: 100%;
		border-radius: 15px;
	}

	.acc-models__actions {
		flex-direction: column;
		align-items: center;
	}

	.acc-models__actions .acc-btn {
		width: 100%;
	}

	/* WHY */
	.acc-why__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.acc-why__item {
		padding: 24px 12px 16px;
	}

	.acc-why__icon-circle {
		width: 52px;
		height: 52px;
	}

	.acc-why__icon-circle svg {
		width: 22px;
		height: 22px;
	}

	.acc-why__text {
		font-size: 12px;
	}

	/* EXTERIOR */
	.acc-exterior__slide img {
		height: 240px;
	}

	.acc-exterior__info .acc-section__heading {
		font-size: 26px;
	}

	/* INTERIOR */
	.acc-interior__slide img {
		height: 240px;
	}

	.acc-interior__info .acc-section__heading {
		font-size: 26px;
	}

	/* TECHNOLOGY */
	.acc-technology__slide img {
		height: 240px;
	}

	.acc-technology__info .acc-section__heading {
		font-size: 26px;
	}

	.acc-technology__features li {
		font-size: 13px;
	}

	/* SAFETY */
	.acc-safety__slide img {
		height: 240px;
	}

	.acc-safety__info .acc-section__heading {
		font-size: 26px;
	}

	.acc-safety__features li {
		font-size: 13px;
	}

	/* PRICING */
	.acc-pricing__slider {
		padding: 0 15px;
	}

	.acc-pricing__track {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.acc-pricing__track::-webkit-scrollbar {
		display: none;
	}

	.acc-pricing__slide {
		flex-shrink: 0;
		width: 100%;
		scroll-snap-align: start;
	}

	.acc-pricing__card-name {
		font-size: 14px;
	}

	.acc-pricing__card-img {
		height: 140px;
	}

	.acc-pricing__card-body {
		padding: 16px;
	}

	/* PROMO */
	.acc-promo__banner {
		padding: 40px 24px;
		border-radius: var(--acc-radius);
	}

	.acc-promo__heading {
		font-size: 28px;
	}

	.acc-promo__small {
		font-size: 12px;
	}

	.acc-promo__desc {
		font-size: 14px;
	}

	.acc-promo .acc-btn--gold {
		font-size: 14px;
		padding: 14px 28px;
	}

	/* DELIVERY */
	.acc-delivery__grid {
		grid-template-columns: 1fr;
	}

	/* DEALER */
	.acc-dealer__card {
		padding: 24px;
	}

	.acc-dealer__name {
		font-size: 22px;
	}

	.acc-dealer__list li {
		font-size: 13px;
	}

	.acc-dealer__map {
		min-height: 200px;
	}

	/* FINAL CTA */
	.acc-final-cta__form-wrap {
		padding: 24px;
	}

	.acc-final-cta__title {
		font-size: 22px;
	}

	/* FOOTER */
	.acc-footer {
		padding: 48px 0 0;
	}

	.acc-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.acc-footer__title {
		font-size: 16px;
		margin-bottom: 12px;
	}

	.acc-footer__bottom {
		margin-top: 32px;
		padding: 20px 0;
	}

	/* POPUP */
	.acc-popup__box {
		padding: 32px 20px 28px;
		margin: 16px;
		border-radius: var(--acc-radius);
	}

	.acc-popup__heading {
		font-size: 20px;
	}

	.acc-popup__close {
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
	}

	/* BUTTONS */
	.acc-btn {
		padding: 12px 24px;
		font-size: 13px;
	}
}

/* ===================================================
   SMALL MOBILE: <= 400px
   =================================================== */

@media (max-width: 400px) {
	.acc-hero__slider {
		height: 280px;
	}

	.acc-section__heading {
		font-size: 22px;
	}

	.acc-section__title {
		font-size: 20px;
	}

	.acc-models__name {
		font-size: 20px;
	}

	.acc-promo__heading {
		font-size: 22px;
	}

	.acc-why__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ===================================================
   BODY NO SCROLL (for popup)
   =================================================== */

body.acc-no-scroll {
	overflow: hidden;
}