/**
 * AUDIMAC Component Library
 * ----------------------------------------------------------------------
 * File: assets/css/components.css
 * Phụ thuộc: tokens.css, base.css, layout.css phải load trước.
 * Namespace: .audm-*  — KHÔNG ghi đè selector gốc của theme Moderno
 * (không style lại .c-product__title, .woocommerce-Price-amount, v.v.)
 * và KHÔNG ghi đè class Elementor (.elementor-*, .eicon-*...).
 * Chỉ override theo breakpoint nằm ở responsive.css.
 */

/* ============================================================
   1. BUTTON SYSTEM
   Variant: Primary / Secondary / Outline / Text / Dark
   State:   Normal / Hover / Focus / Disabled
   ============================================================ */
.audm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--audm-space-2);
	padding: var(--audm-space-3) var(--audm-space-6);
	border-radius: var(--audm-radius-sm);
	border: 1px solid transparent;
	font-family: var(--audm-font-family);
	font-size: var(--audm-font-size-sm);
	font-weight: var(--audm-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--audm-transition), color var(--audm-transition), border-color var(--audm-transition);
}

.audm-btn:focus-visible {
	outline: 2px solid var(--audm-color-primary);
	outline-offset: 2px;
}

/* Primary — CTA chính của AUDIMAC */
.audm-btn--primary {
	background: var(--audm-color-primary);
	border-color: var(--audm-color-primary);
	color: var(--audm-color-white);
}
.audm-btn--primary:hover { background: var(--audm-color-primary-hover); border-color: var(--audm-color-primary-hover); }

/* Secondary — nhấn nhẹ hơn Primary, vẫn thuộc hệ xanh thương hiệu */
.audm-btn--secondary {
	background: var(--audm-color-primary-light);
	border-color: var(--audm-color-primary-light);
	color: var(--audm-color-primary-hover);
}
.audm-btn--secondary:hover { background: #D7F0DD; border-color: #D7F0DD; }

/* Outline */
.audm-btn--outline {
	background: transparent;
	border-color: var(--audm-color-dark);
	color: var(--audm-color-dark);
}
.audm-btn--outline:hover { background: var(--audm-color-dark); border-color: var(--audm-color-dark); color: var(--audm-color-white); }

/* Text — không border/nền, chỉ chữ */
.audm-btn--text {
	background: transparent;
	border-color: transparent;
	color: var(--audm-color-primary);
	text-transform: none;
	letter-spacing: normal;
	padding-inline: var(--audm-space-1);
}
.audm-btn--text:hover { color: var(--audm-color-primary-hover); text-decoration: underline; }

/* Dark — dùng trên nền sáng cạnh section tối, hoặc nhấn mạnh thứ cấp trên nền trắng */
.audm-btn--dark {
	background: var(--audm-color-dark);
	border-color: var(--audm-color-dark);
	color: var(--audm-color-white);
}
.audm-btn--dark:hover { background: var(--audm-color-dark-hover); border-color: var(--audm-color-dark-hover); }

/* Disabled — áp dụng chung cho mọi variant */
.audm-btn:disabled,
.audm-btn[aria-disabled="true"],
.audm-btn.is-disabled {
	background: var(--audm-color-disabled-bg);
	border-color: var(--audm-color-disabled-bg);
	color: var(--audm-color-disabled-text);
	cursor: not-allowed;
	pointer-events: none;
}

.audm-btn--block { width: 100%; }
.audm-btn--sm { padding: var(--audm-space-2) var(--audm-space-4); font-size: var(--audm-font-size-xs); }
.audm-btn--lg { padding: var(--audm-space-4) var(--audm-space-8); font-size: var(--audm-font-size-md); }

/* ============================================================
   2. BREADCRUMB — audm-breadcrumb
   ============================================================ */
.audm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--audm-space-2);
	list-style: none;
	margin: 0 0 var(--audm-space-6);
	padding: 0;
	font-size: var(--audm-font-size-xs);
	color: var(--audm-color-gray);
	overflow-x: auto; /* không để breadcrumb dài gây vỡ layout mobile */
	white-space: nowrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.audm-breadcrumb::-webkit-scrollbar { display: none; }

.audm-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--audm-space-2); }

.audm-breadcrumb a {
	color: var(--audm-color-gray);
	text-decoration: none;
	transition: color var(--audm-transition);
}
.audm-breadcrumb a:hover { color: var(--audm-color-primary); }
.audm-breadcrumb a:focus-visible { outline: 2px solid var(--audm-color-primary); outline-offset: 2px; border-radius: var(--audm-radius-sm); }

.audm-breadcrumb__sep { color: var(--audm-color-gray-light); }

.audm-breadcrumb__current {
	color: var(--audm-color-dark);
	font-weight: var(--audm-font-weight-medium);
}

/* ============================================================
   3. BADGE / LABEL
   ============================================================ */
.audm-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--audm-space-3);
	border-radius: var(--audm-radius-full);
	background: var(--audm-color-bg-alt);
	color: var(--audm-color-gray);
	font-size: var(--audm-font-size-xs);
	font-weight: var(--audm-font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

/* Product Badge (NHẬP KHẨU / MỚI — nhấn mạnh) */
.audm-badge--product {
	background: var(--audm-color-primary-light);
	color: var(--audm-color-primary-hover);
}

/* Category Badge (GHẾ HỘI TRƯỜNG...) */
.audm-badge--category {
	background: var(--audm-color-bg-alt);
	color: var(--audm-color-dark);
}

/* Solution Badge */
.audm-badge--solution {
	background: var(--audm-color-dark);
	color: var(--audm-color-white);
}

/* Project Badge */
.audm-badge--project {
	background: transparent;
	border: 1px solid var(--audm-color-border);
	color: var(--audm-color-gray);
}

/* Technical Badge (CAD / 3D / BIM) */
.audm-badge--technical {
	background: var(--audm-color-white);
	border: 1px solid var(--audm-color-primary);
	color: var(--audm-color-primary-hover);
}

/* Neutral Badge (trạng thái trung tính, vd "Sắp ra mắt") */
.audm-badge--neutral {
	background: var(--audm-color-bg-alt);
	border: 1px solid var(--audm-color-border);
	color: var(--audm-color-gray);
}

/* ============================================================
   4. CARD SYSTEM — base + Product / Project / Solution
   ============================================================ */
.audm-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--audm-color-white);
	border: 1px solid var(--audm-color-border);
	border-radius: var(--audm-radius-md);
	overflow: hidden;
	transition: box-shadow var(--audm-transition), border-color var(--audm-transition);
}
.audm-card:hover,
.audm-card:focus-within {
	box-shadow: var(--audm-shadow-md);
	border-color: var(--audm-color-border);
}

.audm-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--audm-color-bg-alt);
}
.audm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.audm-card__badges {
	position: absolute;
	top: var(--audm-space-3);
	left: var(--audm-space-3);
	display: flex;
	gap: var(--audm-space-2);
	flex-wrap: wrap;
}

.audm-card__body {
	padding: var(--audm-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--audm-space-2);
	flex: 1;
}

.audm-card__eyebrow {
	font-size: var(--audm-font-size-xs);
	color: var(--audm-color-primary);
	font-weight: var(--audm-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.audm-card__title {
	font-size: var(--audm-font-size-md);
	font-weight: var(--audm-font-weight-semibold);
	color: var(--audm-color-dark);
	margin: 0;
	line-height: var(--audm-line-height-tight);
}
.audm-card__title a {
	color: inherit;
	text-decoration: none;
}
.audm-card__title a::after { /* mở rộng vùng click ra toàn bộ card, giữ 1 link duy nhất cho a11y/SEO */
	content: "";
	position: absolute;
	inset: 0;
}
.audm-card { position: relative; }
.audm-card__title a:hover { color: var(--audm-color-primary); }
.audm-card__title a:focus-visible { outline: 2px solid var(--audm-color-primary); outline-offset: 2px; }

.audm-card__desc {
	font-size: var(--audm-font-size-sm);
	color: var(--audm-color-gray);
	line-height: var(--audm-line-height-base);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.audm-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--audm-space-1) var(--audm-space-3);
	color: var(--audm-color-gray);
	font-size: var(--audm-font-size-xs);
}
.audm-card__meta-item { display: inline-flex; align-items: center; gap: var(--audm-space-1); }

.audm-card__footer {
	margin-top: auto;
	padding-top: var(--audm-space-3);
	position: relative; /* nằm trên lớp link phủ toàn card để CTA phụ (nếu có) vẫn bấm được riêng */
	z-index: 1;
}

/* Card variant riêng — hiện tại dùng chung layout base, để mở hook style riêng sau này */
.audm-card--product {}
.audm-card--project {}
.audm-card--solution {}

/* ============================================================
   5. SPECIFICATION TABLE
   ============================================================ */
.audm-spec-wrap__title { margin-bottom: var(--audm-space-4); }

.audm-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--audm-font-size-sm);
}
.audm-spec tbody tr { border-bottom: 1px solid var(--audm-color-border); }
.audm-spec tbody tr:last-child { border-bottom: none; }
.audm-spec th,
.audm-spec td {
	text-align: left;
	padding: var(--audm-space-3) var(--audm-space-4);
	vertical-align: top;
}
.audm-spec th {
	width: 32%;
	color: var(--audm-color-gray);
	font-weight: var(--audm-font-weight-medium);
}
.audm-spec td {
	color: var(--audm-color-dark);
	font-weight: var(--audm-font-weight-medium);
}
.audm-spec tbody tr:nth-child(odd) { background: var(--audm-color-bg-alt); }

/* Responsive: chuyển bảng thành list 1 cột — xem responsive.css */

/* ============================================================
   6. FAQ ACCORDION — native <details>/<summary>, không phụ thuộc JS
   ============================================================ */
.audm-faq { border-top: 1px solid var(--audm-color-border); }

.audm-faq__item {
	border-bottom: 1px solid var(--audm-color-border);
}

.audm-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--audm-space-3);
	padding: var(--audm-space-4) var(--audm-space-2);
	font-size: var(--audm-font-size-md);
	font-weight: var(--audm-font-weight-medium);
	color: var(--audm-color-dark);
	cursor: pointer;
	list-style: none; /* ẩn marker mặc định của trình duyệt */
}
.audm-faq__item > summary::-webkit-details-marker { display: none; }

.audm-faq__item > summary:focus-visible {
	outline: 2px solid var(--audm-color-primary);
	outline-offset: -2px;
}

.audm-faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}
.audm-faq__icon::before,
.audm-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--audm-color-gray);
	transition: transform var(--audm-transition);
}
.audm-faq__icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.audm-faq__icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.audm-faq__item[open] > summary .audm-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.audm-faq__answer {
	padding: 0 var(--audm-space-2) var(--audm-space-4);
	color: var(--audm-color-gray);
	font-size: var(--audm-font-size-sm);
	line-height: var(--audm-line-height-relaxed);
}

/* ============================================================
   7. TECHNICAL DOWNLOAD BOX
   ============================================================ */
.audm-download-box {
	display: grid;
	gap: var(--audm-space-4);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	padding: var(--audm-space-6);
	background: var(--audm-color-bg-alt);
	border: 1px solid var(--audm-color-border);
	border-radius: var(--audm-radius-md);
}

.audm-download-box__title {
	grid-column: 1 / -1;
	margin: 0 0 var(--audm-space-2);
}

.audm-download-item {
	display: flex;
	align-items: flex-start;
	gap: var(--audm-space-3);
	padding: var(--audm-space-4);
	background: var(--audm-color-white);
	border: 1px solid var(--audm-color-border);
	border-radius: var(--audm-radius-sm);
	transition: border-color var(--audm-transition), box-shadow var(--audm-transition);
}
.audm-download-item:hover { border-color: var(--audm-color-primary); box-shadow: var(--audm-shadow-sm); }

.audm-download-item__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--audm-radius-sm);
	background: var(--audm-color-primary-light);
	color: var(--audm-color-primary-hover);
	font-size: var(--audm-font-size-xs);
	font-weight: var(--audm-font-weight-bold);
}

.audm-download-item__body { flex: 1; min-width: 0; }

.audm-download-item__label {
	display: block;
	font-size: var(--audm-font-size-sm);
	font-weight: var(--audm-font-weight-semibold);
	color: var(--audm-color-dark);
	margin: 0 0 2px;
}
.audm-download-item__format {
	display: block;
	font-size: var(--audm-font-size-xs);
	color: var(--audm-color-gray);
	margin: 0 0 var(--audm-space-2);
}
.audm-download-item__link {
	font-size: var(--audm-font-size-xs);
	font-weight: var(--audm-font-weight-semibold);
	color: var(--audm-color-primary);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.audm-download-item__link:hover { color: var(--audm-color-primary-hover); text-decoration: underline; }
.audm-download-item__link:focus-visible { outline: 2px solid var(--audm-color-primary); outline-offset: 2px; }

/* ============================================================
   8. CTA SECTION
   ============================================================ */
.audm-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--audm-space-6);
	padding: var(--audm-space-8);
	background: var(--audm-color-dark);
	border-radius: var(--audm-radius-lg);
	color: var(--audm-color-white);
}
.audm-cta__content { max-width: 640px; }
.audm-cta__title {
	font-size: var(--audm-font-size-xl);
	font-weight: var(--audm-font-weight-bold);
	color: var(--audm-color-white);
	margin: 0 0 var(--audm-space-2);
}
.audm-cta__desc {
	font-size: var(--audm-font-size-sm);
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}
.audm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--audm-space-3);
	flex-shrink: 0;
}

/* Biến thể nền sáng (dùng trong section đã có nền tối/ảnh sẵn) */
.audm-cta--light {
	background: var(--audm-color-bg-alt);
	color: var(--audm-color-dark);
}
.audm-cta--light .audm-cta__title { color: var(--audm-color-dark); }
.audm-cta--light .audm-cta__desc { color: var(--audm-color-gray); }

/* ============================================================
   9. SECTION HEADER
   ============================================================ */
.audm-section-header {
	max-width: 720px;
	margin-bottom: var(--audm-space-8);
}
.audm-section-header--center { margin-inline: auto; text-align: center; }

.audm-section-header__eyebrow {
	display: inline-block;
	color: var(--audm-color-primary);
	font-size: var(--audm-font-size-sm);
	font-weight: var(--audm-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--audm-space-2);
}
.audm-section-header__title {
	color: var(--audm-color-dark);
	font-size: var(--audm-font-size-2xl);
	font-weight: var(--audm-font-weight-bold);
	line-height: var(--audm-line-height-tight);
	margin: 0 0 var(--audm-space-3);
}
.audm-section-header__desc {
	color: var(--audm-color-gray);
	font-size: var(--audm-font-size-md);
	line-height: var(--audm-line-height-relaxed);
	margin: 0;
}
.audm-section-header__cta { margin-top: var(--audm-space-4); }

/* ============================================================
   10. IMAGE SYSTEM
   ============================================================ */
.audm-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.audm-img--ratio-4-3 { aspect-ratio: 4 / 3; }
.audm-img--ratio-16-9 { aspect-ratio: 16 / 9; }
.audm-img--ratio-1-1 { aspect-ratio: 1 / 1; }
.audm-img--ratio-3-4 { aspect-ratio: 3 / 4; } /* dùng cho ảnh ghế dạng đứng nếu cần */

.audm-hero-img { width: 100%; height: auto; display: block; } /* LCP: KHÔNG gắn loading="lazy" ở PHP cho ảnh này */

/* ============================================================
   11. FORM VISUAL SYSTEM (chỉ style, chưa nối backend)
   ============================================================ */
.audm-form__group { margin-bottom: var(--audm-space-5); }

.audm-input,
.audm-textarea,
.audm-select {
	width: 100%;
	padding: var(--audm-space-3) var(--audm-space-4);
	border: 1px solid var(--audm-color-border);
	border-radius: var(--audm-radius-sm);
	background: var(--audm-color-white);
	color: var(--audm-color-dark);
	font-family: var(--audm-font-family);
	font-size: var(--audm-font-size-md);
	line-height: var(--audm-line-height-base);
	transition: border-color var(--audm-transition), box-shadow var(--audm-transition);
}
.audm-textarea { min-height: 120px; resize: vertical; }

.audm-input:focus,
.audm-textarea:focus,
.audm-select:focus {
	outline: none;
	border-color: var(--audm-color-primary);
	box-shadow: 0 0 0 3px var(--audm-color-primary-light);
}

.audm-input::placeholder,
.audm-textarea::placeholder { color: var(--audm-color-gray-light); }

.audm-input:disabled,
.audm-textarea:disabled,
.audm-select:disabled {
	background: var(--audm-color-disabled-bg);
	color: var(--audm-color-disabled-text);
	cursor: not-allowed;
}

.audm-input.is-error,
.audm-textarea.is-error { border-color: #C13B3B; }
.audm-form__message { display: block; font-size: var(--audm-font-size-xs); margin-top: var(--audm-space-2); }
.audm-form__message--error { color: #C13B3B; }
.audm-form__message--success { color: var(--audm-color-primary-hover); }

/* Checkbox / Radio — giữ control gốc trình duyệt, chỉ chỉnh khoảng cách + label để đảm bảo a11y tối đa */
.audm-check {
	display: inline-flex;
	align-items: center;
	gap: var(--audm-space-2);
	font-size: var(--audm-font-size-sm);
	color: var(--audm-color-dark);
	cursor: pointer;
}
.audm-check input[type="checkbox"],
.audm-check input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--audm-color-primary);
	cursor: pointer;
}

/* ============================================================
   12. STICKY MOBILE CTA (Product/Solution — chỉ hiện khi .is-active)
   ============================================================ */
.audm-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--audm-z-sticky-cta);
	display: none;
	gap: var(--audm-space-2);
	padding: var(--audm-space-3) var(--audm-space-4);
	background: var(--audm-color-white);
	border-top: 1px solid var(--audm-color-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.audm-sticky-cta .audm-btn { flex: 1; }

/* Kích hoạt hiển thị theo breakpoint — xem responsive.css */

/* ============================================================
   13. PRODUCT DETAIL WRAPPER (Phase 3)
   ============================================================ */
.audm-product-detail {
	border-top: 1px solid var(--audm-color-border);
	padding-block: var(--audm-space-12);
	display: flex;
	flex-direction: column;
	gap: var(--audm-space-8);
}

/* ============================================================
   14. UTILITY (tối thiểu — tránh utility-class tràn lan)
   ============================================================ */
.audm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.audm-text-muted { color: var(--audm-color-gray); }
.audm-text-center { text-align: center; }