/* ==========================================================================
   Vina Agri Group – hệ thống tương tác (micro-interactions)
   Lớp bổ sung trên theme: không đổi bố cục, màu, nội dung.
   Chỉ animate transform / opacity (GPU), tôn trọng prefers-reduced-motion.
   ========================================================================== */

:root {
	--ux-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* deceleration tự nhiên */
	--ux-ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);  /* nhấn xuống */
	--ux-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* nảy nhẹ, không quá đà */
	--ux-t-press: 110ms;
	--ux-t-release: 240ms;
	--ux-t-micro: 160ms;
	--ux-t-pop: 220ms;
	--ux-t-panel: 320ms;
	--ux-t-reveal: 620ms;
	--ux-scale-press: 0.97;
	--ux-scale-press-soft: 0.985;
	--ux-scale-press-icon: 0.9;
	--ux-scrim: rgba(2, 44, 34, 0.38);
	--ux-touch-min: 44px;
}

html { -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--size-header) + 12px); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---------- 1. Phần tử bấm được: phản hồi ngay khi chạm ---------- */
.button-primary, .button-dark, .box-link, .tab-project, .steps-nav, .play-button, .social-link, .chip, a.product-chip,
.cart-link, .call-box, .nav-toggle, .card-news-media, .feature-post-media, .card-category, .post-row,
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button, .faq-toggle {
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	transition:
		transform var(--ux-t-release) var(--ux-ease),
		box-shadow var(--ux-t-release) var(--ux-ease),
		background-color var(--ux-t-micro) ease,
		color var(--ux-t-micro) ease,
		border-color var(--ux-t-micro) ease,
		opacity var(--ux-t-micro) ease,
		filter var(--ux-t-micro) ease;
}

/* Trạng thái đang nhấn (JS thêm .ux-pressed ngay khi pointerdown; giữ tối thiểu ~90ms) */
.ux-pressed {
	transform: scale(var(--ux-scale-press)) !important;
	transition-duration: var(--ux-t-press) !important;
	transition-timing-function: var(--ux-ease-press) !important;
}
.card-news-media.ux-pressed, .feature-post-media.ux-pressed, .card-category.ux-pressed, .post-row.ux-pressed, .tab-project.ux-pressed {
	transform: scale(var(--ux-scale-press-soft)) !important;
}
.steps-nav.ux-pressed, .social-link.ux-pressed, .nav-toggle.ux-pressed, .play-button.ux-pressed {
	transform: scale(var(--ux-scale-press-icon)) !important;
}
.button-primary.ux-pressed { box-shadow: 0 0 0 1px var(--color-lime-glow) !important; filter: brightness(0.97); }
.button-dark.ux-pressed { filter: brightness(1.15); }

/* Link chữ: mờ nhẹ khi nhấn (kiểu iOS), không scale để không làm xô dòng chữ */
.menu a, .footer-menu a, .breadcrumb a, .product-title, .card-news-title a, .feature-post-title a, .footer-contact-item a { transition: color var(--ux-t-micro) ease, opacity var(--ux-t-micro) ease, border-color var(--ux-t-micro) ease, padding var(--ux-t-micro) ease; }
.ux-dim { opacity: 0.55; transition-duration: 60ms !important; }

/* FAQ: nhấn vào câu hỏi -> nút +/× co nhẹ */
.faq-question.ux-pressed { transform: none !important; }
.faq-question.ux-pressed .faq-toggle { transform: scale(var(--ux-scale-press-icon)); }
.faq-item.is-open .faq-question.ux-pressed .faq-toggle { transform: rotate(var(--rotate-open)) scale(var(--ux-scale-press-icon)); }
.faq-toggle { transition: transform var(--ux-t-panel) var(--ux-ease-spring), background-color var(--ux-t-micro) ease; }

/* Hover chỉ trên thiết bị có chuột/trackpad: tránh "hover dính" trên màn cảm ứng */
@media (hover: none) {
	.button-primary:hover, .button-dark:hover, .box-link:hover, .card-category:hover img { transform: none; }
	.button-primary:hover .button-icon, .button-dark:hover .button-icon, .box-link:hover .box-link-icon { transform: none; }
	.card-news:hover .card-news-media img, .feature-post-media:hover img { transform: none; }
	.footer-menu a:hover { padding-left: 0; }
}
@media (hover: hover) and (pointer: fine) {
	.button-primary:hover { box-shadow: var(--shadow-button), 0 10px 24px var(--color-shadow-card); }
	.button-dark:hover { box-shadow: 0 10px 24px var(--color-shadow-card); }
	.box-link:hover { box-shadow: 0 14px 30px var(--color-shadow-card); }
	.steps-nav:hover:not([aria-disabled="true"]) { transform: translateY(-2px); }
	.social-link:hover { transform: translateY(-2px); }
}

/* Vùng chạm tối thiểu 44×44 trên màn cảm ứng */
@media (pointer: coarse) {
	.steps-nav, .social-link, .nav-toggle { min-width: var(--ux-touch-min); min-height: var(--ux-touch-min); }
	.cart-link, .call-box { min-height: var(--ux-touch-min); }
	.footer-menu a, .footer-contact-item a { display: inline-flex; align-items: center; min-height: var(--ux-touch-min); }
}

/* ---------- 2. Xuất hiện khi cuộn: cùng một đường cong chuyển động ---------- */
.js .reveal {
	transition:
		opacity var(--ux-t-reveal) var(--ux-ease) var(--delay, 0s),
		transform var(--ux-t-reveal) var(--ux-ease) var(--delay, 0s),
		background var(--speed), color var(--speed);
}

/* ---------- 3. Menu mobile: trượt mở/đóng, nền mờ, khóa cuộn, vuốt lên để đóng ---------- */
.ux-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-header) - 1);
	background: var(--ux-scrim);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ux-t-panel) var(--ux-ease);
}
.ux-scrim.is-visible { opacity: 1; pointer-events: auto; }
/* Khóa cuộn KHÔNG dùng overflow:hidden (trên iOS/WebView nó làm header mất sticky).
   JS chặn touchmove/wheel trên scrim và ở mép menu; ở đây chặn cuộn lan truyền. */
html.ux-scroll-lock { overscroll-behavior: none; }
.ux-scrim { touch-action: none; overscroll-behavior: contain; }

@media (max-width: 1180px) {
	.site-nav.is-open {
		max-height: calc(100svh - var(--size-header));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		animation: ux-sheet-down var(--ux-t-panel) var(--ux-ease) both;
		transform-origin: top center;
	}
	.site-nav.is-open.ux-closing { animation: ux-sheet-up 220ms var(--ux-ease-press) both; }
	.site-nav.is-open.ux-dragging { animation: none; transition: none; }
	.site-nav.is-open .menu > li, .site-nav.is-open .header-actions > * {
		animation: ux-item-in 380ms var(--ux-ease) both;
		animation-delay: calc(var(--ux-i, 0) * 32ms + 40ms);
	}
	.site-nav.is-open.ux-closing .menu > li, .site-nav.is-open.ux-closing .header-actions > * { animation: none; }
	.nav-toggle-line { transition: transform var(--ux-t-panel) var(--ux-ease), opacity var(--ux-t-micro) ease; transform-origin: center; }
	.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) { transform: translateY(calc(var(--space-3xs) + var(--border-medium))) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) { transform: translateY(calc((var(--space-3xs) + var(--border-medium)) * -1)) rotate(-45deg); }
	.site-header.is-open { box-shadow: var(--shadow-header); }
}
@keyframes ux-sheet-down { from { opacity: 0; transform: translateY(-10px) scaleY(0.98); } to { opacity: 1; transform: none; } }
@keyframes ux-sheet-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes ux-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 4. FAQ: mở/đóng mượt theo chiều cao thật ---------- */
.faq-answer.ux-collapsible {
	display: grid;
	grid-template-rows: 0fr;
	padding-bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows var(--ux-t-panel) var(--ux-ease),
		opacity 200ms ease,
		padding-bottom var(--ux-t-panel) var(--ux-ease),
		visibility 0s linear var(--ux-t-panel);
}
.faq-item.is-open .faq-answer.ux-collapsible {
	grid-template-rows: 1fr;
	padding-bottom: var(--space-md);
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows var(--ux-t-panel) var(--ux-ease),
		opacity 260ms ease 60ms,
		padding-bottom var(--ux-t-panel) var(--ux-ease),
		visibility 0s;
}
.ux-collapse-inner { min-height: 0; overflow: hidden; }

/* ---------- 5. Tab Giải pháp: chuyển cảnh có hướng + vuốt để đổi tab ---------- */
.card-project { touch-action: pan-y; }
.card-project.is-active { animation: ux-panel-in var(--ux-t-panel) var(--ux-ease) both; }
.card-project.is-active.ux-from-right { animation-name: ux-panel-in-right; }
.card-project.is-active.ux-from-left { animation-name: ux-panel-in-left; }
.card-project.ux-dragging { animation: none; transition: none; }
.card-project.ux-settle { transition: transform var(--ux-t-panel) var(--ux-ease-spring), opacity var(--ux-t-micro) ease; }
@keyframes ux-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ux-panel-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ux-panel-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.tab-project .button-icon { transition: transform var(--ux-t-panel) var(--ux-ease), background-color var(--ux-t-micro) ease, color var(--ux-t-micro) ease; }
.tab-project.is-active .button-icon { animation: ux-pop var(--ux-t-panel) var(--ux-ease-spring); }

/* ---------- 6. Slider Quy trình / Đánh giá: kéo bằng chuột, trạng thái đầu/cuối ---------- */
.steps-track { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
@media (hover: hover) and (pointer: fine) {
	.steps-track { cursor: grab; }
	.steps-track.ux-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
	.steps-track.ux-grabbing * { pointer-events: none; }
}
.steps-track img { -webkit-user-drag: none; user-select: none; }
.steps-nav[aria-disabled="true"] { opacity: 0.35; cursor: default; box-shadow: none; }

/* ---------- 7. Trạng thái đang xử lý / thành công (không nhảy bố cục) ---------- */
.button-icon { position: relative; }
.ux-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 46%;
	height: 46%;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--ux-t-micro) ease, transform var(--ux-t-micro) var(--ux-ease);
}
.is-loading .button-icon > svg, .add_to_cart_button.loading .button-icon > svg { opacity: 0; transform: scale(0.6); transition: opacity var(--ux-t-micro) ease, transform var(--ux-t-micro) ease; }
.is-loading .ux-spinner, .add_to_cart_button.loading .ux-spinner { opacity: 1; transform: none; animation: ux-spin 0.75s linear infinite; }
.is-loading, .add_to_cart_button.loading { cursor: progress; }
.button-primary.is-loading, .button-dark.is-loading { filter: saturate(0.9); }
.add_to_cart_button.added .button-icon, .ux-success .button-icon { animation: ux-pop 380ms var(--ux-ease-spring); }
.cart-count.ux-bump { animation: ux-pop 420ms var(--ux-ease-spring); }
.notice-box { animation: ux-notice-in 420ms var(--ux-ease) both; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
@keyframes ux-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ux-notice-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Disabled: rõ ràng, không phản hồi ảo */
.button-primary:disabled, .button-dark:disabled, .button-primary[aria-disabled="true"], .button-dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* ---------- 8. Ảnh: hiện dần khi tải xong (không đổi kích thước) ---------- */
img.ux-img-pending { opacity: 0; }
img.ux-img-loaded { opacity: 1; transition: opacity 420ms var(--ux-ease); }

/* ---------- 9. Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	.ux-pressed, .card-news-media.ux-pressed, .steps-nav.ux-pressed { transform: none !important; }
	.ux-pressed { opacity: 0.7; }
	.ux-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
	img.ux-img-pending { opacity: 1; }
}

/* ---------- 10. Tiêu đề H1 trang chủ vừa màn hình ----------
 * Kit Elementor từng ép h1 = 60px mọi màn hình (đã gỡ). Đặt thêm cỡ chữ theo màn hình cho hero. */
@media (max-width: 1023px) {
	.hero-title { font-size: clamp(26px, 6.4vw, 46px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
}
@media (max-width: 480px) {
	.hero-title { font-size: clamp(26px, 7.4vw, 32px); }
}

/* ---------- 11. Tab Giải pháp: hàng ngang trên điện thoại / tablet ---------- */
@media (max-width: 1023px) {
	.projects { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-md); min-width: 0; }
	.project-tabs {
		flex: none;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--space-2xs);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		/* Không dùng scroll-snap: khi panel đổi chiều cao, trình duyệt re-snap về chip cũ và hủy thao tác căn giữa */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-block: var(--space-3xs);
		margin-inline: calc(var(--space-sm) * -1);
		padding-inline: var(--space-sm);
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-sm), #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--space-sm), #000 calc(100% - 28px), transparent 100%);
	}
	.project-tabs::-webkit-scrollbar { display: none; }
	.tab-project {
		flex: 0 0 auto;
		min-height: var(--ux-touch-min);
		padding: var(--space-2xs) var(--space-sm);
		font-size: var(--fs-md);
		white-space: nowrap;
		gap: var(--space-2xs);
	}
	.tab-project .button-icon { display: none; }
	.project-panels { min-width: 0; }
}