/**
 * CSS thành phần của plugin.
 *
 * Mọi màu sắc và hình khối lấy từ CSS custom property do Theme Registry sinh ra
 * (uploads/apc/theme-{hash}.css), nên đổi màu trong admin là đổi được toàn site.
 */

/* ----------------------------------------------------------------- Nút */

.apc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}

.apc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--apc-radius, 8px);
	background: var(--apc-primary, #0b5cab);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.apc-btn:hover,
.apc-btn:focus-visible {
	color: #fff;
	filter: brightness( 0.94 );
}

.apc-btn--secondary {
	background: var(--apc-secondary, #1f2937);
}

.apc-btn--submit {
	background: var(--apc-btn-submit, #0b5cab);
}

/* ----------------------------------------------------- Mã phụ tùng, nhãn */

.apc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.apc-chip {
	padding: 2px 8px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: 999px;
	background: var(--apc-surface, #f9fafb);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.82em;
}

.apc-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--apc-radius, 8px);
	background: var(--apc-accent, #f59e0b);
	color: #111;
	font-size: 0.82em;
}

.apc-muted {
	color: var(--apc-text-muted, #6b7280);
}

/* ------------------------------------------------------------ Trang sản phẩm */

.apc-product__title {
	margin: 0 0 8px;
	font-size: clamp( 1.3rem, 2.4vw, 1.75rem );
}

.apc-product__codes {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.apc-product__codes-label {
	color: var(--apc-text-muted, #6b7280);
	font-size: 0.9em;
}

.apc-product__price {
	margin: 8px 0;
	color: var(--apc-btn-buy, #ee4d2d);
	font-size: 1.5rem;
	font-weight: 700;
}

.apc-specs {
	width: 100%;
	border-collapse: collapse;
}

.apc-specs th,
.apc-specs td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--apc-border, #e5e7eb);
	text-align: left;
	vertical-align: top;
}

.apc-specs th {
	width: 34%;
	color: var(--apc-text-muted, #6b7280);
	font-weight: 500;
}

/* ------------------------------------------------------------------ Tab */

.apc-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid var(--apc-border, #e5e7eb);
}

.apc-tab {
	padding: 10px 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	background: none;
	color: var(--apc-text-muted, #6b7280);
	font: inherit;
	cursor: pointer;
}

.apc-tab[aria-selected="true"] {
	border-bottom-color: var(--apc-primary, #0b5cab);
	color: var(--apc-text, #111827);
	font-weight: 600;
}

.apc-panel {
	padding: 16px 0;
}

/* --------------------------------------------------------- Lưới và thẻ */

.apc-grid {
	display: grid;
	gap: 16px;
}

.apc-grid--products {
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
}

.apc-grid--posts {
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
}

.apc-grid--tiles {
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
}

.apc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
	background: var(--apc-bg, #fff);
	box-shadow: var(--apc-shadow, none);
}

.apc-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.apc-card__noimage {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--apc-surface, #f9fafb);
}

.apc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
}

.apc-card__title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.apc-card__title a {
	color: inherit;
	text-decoration: none;
}

.apc-card__price {
	margin-top: auto;
	color: var(--apc-btn-buy, #ee4d2d);
	font-weight: 700;
}

.apc-card__fav {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	cursor: pointer;
}

.apc-card__fav::before {
	content: "♡";
	font-size: 16px;
}

.apc-card__fav.is-active::before {
	content: "♥";
	color: var(--apc-danger, #d63638);
}

.apc-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.apc-tile__count {
	color: var(--apc-text-muted, #6b7280);
	font-size: 0.8em;
}

/* --------------------------------------------------------------- Tìm kiếm */

.apc-search {
	position: relative;
	display: flex;
	gap: 8px;
}

.apc-search input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
}

.apc-search__suggest {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 4px );
	right: 0;
	left: 0;
	overflow: hidden;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
	background: var(--apc-bg, #fff);
	box-shadow: 0 8px 24px rgba( 17, 24, 39, 0.12 );
}

.apc-search__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
}

.apc-search__item:hover {
	background: var(--apc-surface, #f9fafb);
}

/* --------------------------------------------------------------- Biểu mẫu */

.apc-form__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( 2, 1fr );
}

.apc-form__row--full {
	grid-column: 1 / -1;
}

.apc-form__row label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}

.apc-form input,
.apc-form textarea,
.apc-form select {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
	font: inherit;
}

.apc-form textarea {
	min-height: 88px;
}

.apc-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0;
	font-size: 0.9em;
}

.apc-form__consent input {
	width: auto;
	min-height: 0;
	margin-top: 3px;
}

.apc-form__error {
	display: block;
	min-height: 1em;
	color: var(--apc-danger, #d63638);
	font-size: 0.85em;
}

.apc-form__message.is-success {
	color: var(--apc-success, #00a32a);
	font-weight: 600;
}

.apc-required {
	color: var(--apc-danger, #d63638);
}

/* Honeypot: ẩn nhưng không dùng display:none để bot khó nhận ra. */
.apc-hp {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* --------------------------------------------------------------- Nút nổi */

.apc-float {
	position: fixed;
	z-index: 90;
	bottom: var(--apc-float-bottom, 80px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.apc-float--right {
	right: 16px;
}

.apc-float--left {
	left: 16px;
}

.apc-float__btn {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--apc-float-color, #0b5cab);
	box-shadow: 0 4px 14px rgba( 17, 24, 39, 0.25 );
	color: #fff;
	text-decoration: none;
}

.apc-float__btn.is-pulse {
	animation: apc-pulse 2.2s infinite;
}

.apc-float__label {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect( 1px, 1px, 1px, 1px );
}

.apc-icon {
	width: 24px;
	height: 24px;
}

@keyframes apc-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba( 11, 92, 171, 0.45 );
	}

	70% {
		box-shadow: 0 0 0 14px rgba( 11, 92, 171, 0 );
	}

	100% {
		box-shadow: 0 0 0 0 rgba( 11, 92, 171, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.apc-float__btn.is-pulse {
		animation: none;
	}
}

/* --------------------------------------------------------------- Chia sẻ */

.apc-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

.apc-share__btn {
	padding: 6px 12px;
	border: 1px solid var(--apc-border, #e5e7eb);
	border-radius: var(--apc-radius, 8px);
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.apc-share__btn.is-copied::after {
	content: " ✓";
	color: var(--apc-success, #00a32a);
}

/* ----------------------------------------------------------------- Video */

.apc-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--apc-radius, 8px);
	background: #000;
}

.apc-video img,
.apc-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.apc-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	cursor: pointer;
	transform: translate( -50%, -50% );
}

.apc-video__play::before {
	content: "▶";
	font-size: 22px;
}

/* ------------------------------------------------------------ Khối chung */

.apc-block {
	margin: 32px 0;
}

.apc-block__title {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

.apc-cta {
	padding: 24px;
	border-radius: var(--apc-radius, 8px);
	margin: 32px 0;
	background: var(--apc-surface, #f9fafb);
}

/* ------------------------------------------------------------- Di động */

@media ( max-width: 767px ) {
	.apc-form__grid {
		grid-template-columns: 1fr;
	}

	.apc-buttons .apc-btn {
		flex: 1 1 100%;
	}

	.apc-grid--products {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ------------------------------------------------ Bộ lọc và kết quả tìm */

.apc-facet + .apc-facet {
	padding-top: 16px;
	border-top: 1px solid var( --apc-border, #e5e7eb );
	margin-top: 16px;
}

.apc-facet__title {
	margin: 0 0 8px;
	font-size: 0.9375rem;
}

.apc-facet__list {
	max-height: 260px;
	padding: 0;
	margin: 0;
	list-style: none;
	overflow-y: auto;
}

.apc-facet__option {
	display: flex;
	align-items: center;
	padding: 6px 0;
	gap: 8px;
	cursor: pointer;
}

.apc-facet__label {
	flex: 1;
}

.apc-facet__count {
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.8125rem;
}

.apc-facet__range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.apc-facet__range input {
	width: 100%;
	min-width: 0;
	min-height: 36px;
	padding: 0 8px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
}

.apc-facet__clear {
	width: 100%;
	margin-top: 16px;
}

.apc-btn--ghost {
	border: 1px solid var( --apc-border, #e5e7eb );
	background: none;
	color: inherit;
}

.apc-facets__skeleton span {
	display: block;
	height: 14px;
	border-radius: 4px;
	margin-bottom: 12px;
	background: var( --apc-surface, #f3f4f6 );
}

.apc-card-skeleton {
	aspect-ratio: 3 / 4;
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-surface, #f3f4f6 );
}

.apc-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.apc-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.apc-sort select {
	min-height: 40px;
	padding: 0 8px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
}

.apc-archive__count {
	color: var( --apc-text-muted, #6b7280 );
}

.apc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
	gap: 6px;
}

.apc-page {
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: none;
	cursor: pointer;
	font: inherit;
	transition: background var( --apc-motion-fast, 120ms ) ease-out;
}

.apc-page:hover {
	background: var( --apc-surface, #f9fafb );
}

.apc-page.is-current {
	border-color: var( --apc-primary, #0b5cab );
	background: var( --apc-primary, #0b5cab );
	color: #fff;
}

/* ============================================================ PLC-04
   Lọc theo thiết bị và đối tượng ở phía trình duyệt.

   Trang có thể nằm trong bộ nhớ đệm và phục vụ cho nhiều người khác nhau,
   nên máy chủ không được quyết định hai điều kiện này lúc render.
   Thiết bị xử lý hoàn toàn bằng media query — không cần JS, không có nhấp nháy.
   ========================================================================= */

@media (max-width: 767px) {
	[data-apc-devices]:not([data-apc-devices~='mobile']) {
		display: none !important;
	}
}

@media (min-width: 768px) {
	[data-apc-devices]:not([data-apc-devices~='desktop']) {
		display: none !important;
	}
}

/* Đối tượng phải chờ JS đọc cookie đăng nhập, nên ẩn trước để không lộ nhầm.
   Mục dành cho "mọi người" không mang thuộc tính này nên hiện ngay. */
[data-apc-audience] {
	display: none !important;
}

[data-apc-audience].is-audience-ok {
	display: revert !important;
}

/* ===================================================== Tài khoản (ACC)
   Trang đăng nhập, đăng ký và trang tài khoản.
   ==================================================================== */

.apc-account {
	max-width: 720px;
	margin: 32px auto;
}

.apc-auth__form {
	padding: 24px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-bg, #fff );
}

.apc-auth__title {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

.apc-auth__help {
	margin: 0 0 16px;
	color: var( --apc-text-muted, #6b7280 );
}

.apc-auth__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 0;
}

.apc-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: var( --apc-primary, #0b5cab );
	cursor: pointer;
	text-decoration: underline;
}

/* Bẫy spam: ẩn khỏi mắt người nhưng vẫn nằm trong DOM cho bot điền vào. */
.apc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.apc-account__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.apc-account__hello {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.apc-account__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	border-bottom: 1px solid var( --apc-border, #e5e7eb );
}

.apc-account__tab {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
	transition: color var( --apc-motion-fast, 120ms ) var( --apc-ease, ease-out ),
		border-color var( --apc-motion-fast, 120ms ) var( --apc-ease, ease-out );
}

.apc-account__tab.is-active {
	border-bottom-color: var( --apc-primary, #0b5cab );
	color: var( --apc-primary, #0b5cab );
	font-weight: 600;
}

.apc-account__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apc-account__item {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var( --apc-border, #e5e7eb );
}

.apc-account__table {
	width: 100%;
	border-collapse: collapse;
}

.apc-account__table th,
.apc-account__table td {
	padding: 12px;
	border-bottom: 1px solid var( --apc-border, #e5e7eb );
	text-align: left;
}

.apc-empty {
	padding: 32px 0;
	color: var( --apc-text-muted, #6b7280 );
	text-align: center;
}

/* Khối nguy hiểm: tách hẳn để không bấm nhầm khi đang đổi mật khẩu. */
.apc-danger {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid #d63638;
	border-radius: var( --apc-radius, 8px );
}

.apc-danger h3 {
	margin: 0 0 8px;
	color: #d63638;
}

.apc-btn--danger {
	background: #d63638;
	color: #fff;
}

@media ( max-width: 600px ) {
	.apc-account__tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* ===================================================== Khối nội dung (CNT)
   Mega menu, cây danh mục, chọn xe.
   ======================================================================= */

.apc-menu__item--mega {
	position: static;
}

.apc-mega {
	display: none;
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	gap: 16px 24px;
	padding: 24px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-bg, #fff );
	box-shadow: var( --apc-shadow, 0 8px 24px rgba( 17, 24, 39, .12 ) );
	grid-template-columns: repeat( var( --apc-mega-cols, 4 ), minmax( 0, 1fr ) );
}

.apc-menu__item--mega:hover > .apc-mega,
.apc-menu__item--mega:focus-within > .apc-mega {
	display: grid;
}

.apc-mega__head {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.apc-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apc-mega__list a {
	display: block;
	padding: 4px 0;
	color: var( --apc-text-muted, #6b7280 );
}

.apc-mega__list a:hover,
.apc-mega__list a:focus-visible {
	color: var( --apc-primary, #0b5cab );
}

/* Trên điện thoại menu là ngăn kéo dọc, mega menu trải thành danh sách thường. */
@media ( max-width: 900px ) {
	.apc-mega {
		display: grid;
		position: static;
		padding: 8px 0 8px 16px;
		border: 0;
		box-shadow: none;
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------- Cây danh mục */

.apc-tree-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apc-tree-list .apc-tree-list {
	padding-left: 16px;
}

.apc-tree-list__item {
	padding: 4px 0;
}

.apc-tree-list__count {
	margin-left: 8px;
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

/* ----------------------------------------------------------- Chọn xe */

.apc-vehicle {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.apc-vehicle .apc-field {
	flex: 1 1 180px;
	margin: 0;
}

.apc-vehicle select {
	width: 100%;
	min-height: 44px;
}

.apc-vehicle__hint {
	flex: 1 1 100%;
	margin: 0;
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

.apc-tile--media.is-video .apc-tile__name::before {
	content: '▶ ';
}

/* --------------------------------------------------------- Bản đồ (CNT-02) */

.apc-map {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
	min-height: var( --apc-map-height, 360px );
	padding: 24px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-surface, #f9fafb );
}

.apc-map.is-loaded {
	padding: 0;
	border: 0;
}

.apc-map iframe {
	width: 100%;
	height: var( --apc-map-height, 360px );
	border: 0;
	border-radius: var( --apc-radius, 8px );
}

.apc-map__address {
	margin: 0;
	font-weight: 600;
}

.apc-map__note {
	margin: 0;
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

/* ------------------------------------------------- Album ảnh và video (MED) */

.apc-grid--albums {
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
}

.apc-grid--media {
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
}

.apc-tile--album {
	padding: 0;
	overflow: hidden;
	align-items: stretch;
	text-align: left;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.apc-tile--album:hover,
.apc-tile--album:focus-visible {
	box-shadow: var( --apc-shadow, 0 6px 16px rgba( 17, 24, 39, 0.12 ) );
	transform: translateY( -2px );
}

.apc-tile__media img,
.apc-media-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apc-tile__media,
.apc-media-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var( --apc-surface, #f9fafb );
}

.apc-tile__noimage,
.apc-video__noimage {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: var( --apc-surface, #f9fafb );
}

.apc-tile__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
}

.apc-tile__name {
	font-weight: 600;
}

/* Ô ảnh / video trong album */

.apc-media-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-bg, #fff );
}

.apc-media-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.apc-media-card__title {
	display: block;
	padding: 10px 12px;
	font-size: 0.925rem;
	line-height: 1.35;
}

.apc-media-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apc-media-card__play::before {
	content: "▶";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.72 );
	color: #fff;
	font-size: 18px;
	transition: transform 200ms ease;
}

.apc-media-card:hover .apc-media-card__play::before {
	transform: scale( 1.08 );
}

.apc-chip--products {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var( --apc-bg, #fff );
	font-size: 0.75rem;
}

/* Phân trang album */

.apc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0;
}

.apc-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	color: inherit;
	text-decoration: none;
}

.apc-page.is-current {
	border-color: var( --apc-primary, #0b5cab );
	background: var( --apc-primary, #0b5cab );
	color: #fff;
}

.apc-tab__count {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --apc-surface, #f9fafb );
	font-size: 0.75rem;
}

/* Facade video: iframe chỉ nạp khi bấm phát (MED-05) */

.apc-video {
	position: relative;
	overflow: hidden;
	border-radius: var( --apc-radius, 8px );
	background: #000;
	aspect-ratio: 16 / 9;
}

.apc-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apc-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: rgba( 17, 24, 39, 0.24 );
	cursor: pointer;
}

.apc-video__play span::before {
	content: "▶";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.78 );
	color: #fff;
	font-size: 22px;
	transition: transform 200ms ease;
}

.apc-video__play:hover span::before,
.apc-video__play:focus-visible span::before {
	transform: scale( 1.08 );
}

.apc-video__source {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.72 );
	color: #fff;
	font-size: 0.75rem;
}

.apc-video.is-playing .apc-video__source {
	display: none;
}

.apc-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.apc-media-single img {
	max-width: 100%;
	height: auto;
	border-radius: var( --apc-radius, 8px );
}

/* Lightbox */

.apc-noscroll {
	overflow: hidden;
}

.apc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.apc-lightbox[hidden] {
	display: none;
}

.apc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, 0.88 );
}

.apc-lightbox__figure {
	position: relative;
	margin: 0;
	max-width: min( 1100px, 92vw );
	max-height: 86vh;
	animation: apc-lightbox-in 200ms ease;
}

.apc-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 76vh;
	object-fit: contain;
	border-radius: var( --apc-radius, 8px );
	background: #000;
}

.apc-lightbox__caption,
.apc-lightbox__counter {
	position: relative;
	margin: 12px 0 0;
	color: #fff;
	text-align: center;
}

.apc-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.16 );
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}

.apc-lightbox__btn:hover,
.apc-lightbox__btn:focus-visible {
	background: rgba( 255, 255, 255, 0.3 );
}

.apc-lightbox__btn--close {
	top: 16px;
	right: 16px;
}

.apc-lightbox__btn--close::before {
	content: "✕";
}

.apc-lightbox__btn--prev {
	top: 50%;
	left: 16px;
	transform: translateY( -50% );
}

.apc-lightbox__btn--prev::before {
	content: "‹";
	font-size: 30px;
}

.apc-lightbox__btn--next {
	top: 50%;
	right: 16px;
	transform: translateY( -50% );
}

.apc-lightbox__btn--next::before {
	content: "›";
	font-size: 30px;
}

@keyframes apc-lightbox-in {
	from {
		opacity: 0;
		transform: scale( 0.98 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.apc-tile--album,
	.apc-media-card__play::before,
	.apc-video__play span::before {
		transition: none;
	}

	.apc-tile--album:hover,
	.apc-tile--album:focus-visible {
		transform: none;
	}

	.apc-lightbox__figure {
		animation: none;
	}
}

/* ------------------------------- Khối sản phẩm gắn kèm và chiều ngược (REL) */

.apc-related {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apc-related__item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var( --apc-border, #e5e7eb );
}

.apc-related__note,
.apc-rel-item__note {
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

.apc-related__price {
	font-weight: 600;
	white-space: nowrap;
}

.apc-rel-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.apc-rel-item__note {
	margin: 0;
}

/* ------------------------------------------------- Nút chia sẻ (SHR-01, SHR-05) */

.apc-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.apc-share__list[hidden] {
	display: none;
}

.apc-share__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-bg, #fff );
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-decoration: none;
}

.apc-share__btn:hover,
.apc-share__btn:focus-visible {
	border-color: var( --apc-primary, #0b5cab );
	color: var( --apc-primary, #0b5cab );
}

.apc-share__btn--web_share {
	border-color: var( --apc-primary, #0b5cab );
	background: var( --apc-primary, #0b5cab );
	color: #fff;
}

.apc-share__btn--web_share:hover,
.apc-share__btn--web_share:focus-visible {
	color: #fff;
	filter: brightness( 0.94 );
}

.apc-share__btn.is-copied {
	border-color: #00733c;
	color: #00733c;
}

.apc-share__status {
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

/* ------------------------------------ Chọn xe và "Xe của tôi" (FIT-03, FIT-04) */

.apc-fitment {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0;
	padding: 8px 14px;
	border-radius: var( --apc-radius, 8px );
	font-weight: 600;
}

.apc-fitment.is-match {
	background: #edfaef;
	color: #00733c;
}

.apc-fitment.is-match::before {
	content: "✔";
}

.apc-fitment.is-mismatch,
.apc-fitment.is-unknown {
	background: var( --apc-surface, #f9fafb );
	color: var( --apc-text-muted, #6b7280 );
	font-weight: 400;
}

.apc-fitment:empty {
	display: none;
}

.apc-card__fit {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #00733c;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.apc-card.is-fit {
	border-color: #00733c;
}

.apc-vehicle__remember {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	flex: 1 1 100%;
	color: var( --apc-text-muted, #6b7280 );
	font-size: 0.875rem;
}

.apc-vehicle__mine {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid var( --apc-border, #e5e7eb );
	border-radius: var( --apc-radius, 8px );
	background: var( --apc-surface, #f9fafb );
}

.apc-vehicle__mine[hidden] {
	display: none;
}

.apc-vehicle__label {
	flex: 1;
	font-weight: 600;
}

.apc-btn--ghost {
	background: none;
	color: var( --apc-text-muted, #6b7280 );
}

.apc-btn--ghost:hover,
.apc-btn--ghost:focus-visible {
	color: var( --apc-primary, #0b5cab );
}

.apc-vehicle select:disabled {
	opacity: 0.6;
}