/* ---------------------------------------------------------------------------
 * HIỆU ỨNG & TƯƠNG TÁC
 *
 * Nguyên tắc:
 *  - Mọi hiệu ứng hover đều nằm trong @media (hover:hover) and (pointer:fine),
 *    để máy cảm ứng không bị kẹt trạng thái hover sau khi chạm.
 *  - Máy cảm ứng dùng :active (phản hồi lúc nhấn) thay cho hover.
 *  - Chỉ animate transform và opacity - hai thuộc tính trình duyệt xử lý trên
 *    GPU, không gây reflow nên không giật.
 *  - Có :focus-visible cho người dùng bàn phím.
 *  - Tôn trọng prefers-reduced-motion của hệ điều hành.
 *
 * Muốn tắt toàn bộ: bỏ dòng enqueue 'dp-interactions' trong functions.php.
 * ------------------------------------------------------------------------- */

:root {
	--dp-ease: cubic-bezier(.4, 0, .2, 1);
	--dp-ease-out: cubic-bezier(.22, 1, .36, 1);
	--dp-fast: .18s;
	--dp-med: .28s;
	--dp-slow: .45s;

	--dp-shadow-sm: 0 2px 8px rgba(0, 61, 45, .06);
	--dp-shadow-md: 0 10px 24px rgba(0, 61, 45, .10);
	--dp-shadow-lg: 0 18px 40px rgba(0, 61, 45, .16);

	--dp-ring: 0 0 0 3px rgba(0, 122, 77, .18);
}


/* ===========================================================================
 * 1. TRẠNG THÁI NỀN (áp dụng cho mọi thiết bị)
 * ======================================================================== */

body.ducphat-site .product-card,
body.ducphat-site .category-card,
body.ducphat-site .project-card,
body.ducphat-site .news-card,
body.ducphat-site .dp-service-grid article,
body.ducphat-site .dp-why-grid article {
	transition:
		transform var(--dp-med) var(--dp-ease-out),
		box-shadow var(--dp-med) var(--dp-ease),
		border-color var(--dp-med) var(--dp-ease);
	box-shadow: var(--dp-shadow-sm);
	background-clip: padding-box;
}

body.ducphat-site .photo img {
	transition: transform var(--dp-slow) var(--dp-ease-out);
}

body.ducphat-site .btn,
body.ducphat-site .buy,
body.ducphat-site .filter,
body.ducphat-site .dp-solid,
body.ducphat-site .dp-ghost,
body.ducphat-site .dp-primary,
body.ducphat-site .dp-secondary,
body.ducphat-site .search button,
body.ducphat-site .woocommerce a.button,
body.ducphat-site .woocommerce button.button,
body.ducphat-site .woocommerce input.button {
	transition:
		background-color var(--dp-fast) var(--dp-ease),
		border-color var(--dp-fast) var(--dp-ease),
		color var(--dp-fast) var(--dp-ease),
		transform var(--dp-fast) var(--dp-ease),
		box-shadow var(--dp-fast) var(--dp-ease);
}

body.ducphat-site .more,
body.ducphat-site .card-text b,
body.ducphat-site .product-body h3,
body.ducphat-site .topbar a,
body.ducphat-site .footer a {
	transition: color var(--dp-fast) var(--dp-ease), transform var(--dp-fast) var(--dp-ease);
}

/* Gạch chân trượt cho menu chính — trừ nút "Danh mục sản phẩm" (nền đặc) */
body.ducphat-site nav.nav .nav-inner > a:not(.category-trigger) {
	position: relative;
}

body.ducphat-site nav.nav .nav-inner > a:not(.category-trigger)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--teal);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dp-med) var(--dp-ease-out);
}

body.ducphat-site nav.nav .nav-inner > a.active::after {
	transform: scaleX(1);
}


/* ===========================================================================
 * 2. HOVER — chỉ trên thiết bị thật sự có chuột
 * ======================================================================== */

@media (hover: hover) and (pointer: fine) {

	/* --- Thẻ: nhấc lên + đổ bóng --- */
	body.ducphat-site .product-card:hover,
	body.ducphat-site .category-card:hover,
	body.ducphat-site .project-card:hover,
	body.ducphat-site .news-card:hover,
	body.ducphat-site .dp-service-grid article:hover,
	body.ducphat-site .dp-why-grid article:hover {
		transform: translateY(-6px);
		box-shadow: var(--dp-shadow-lg);
		border-color: rgba(0, 122, 77, .35);
	}

	/* Ảnh phóng nhẹ trong thẻ (design.css mới chỉ có cho danh mục & dự án) */
	body.ducphat-site .product-card:hover .photo img,
	body.ducphat-site .news-card:hover .photo img,
	body.ducphat-site .category-card:hover .photo img,
	body.ducphat-site .project-card:hover .photo img {
		transform: scale(1.045);
	}

	/* Tiêu đề trong thẻ đổi màu theo */
	body.ducphat-site .product-card:hover .product-body h3,
	body.ducphat-site .category-card:hover .card-text b,
	body.ducphat-site .project-card:hover .card-text b,
	body.ducphat-site .news-card:hover .card-text b {
		color: var(--teal);
	}

	/* --- Nút: nhấc nhẹ + bóng --- */
	/* box-shadow phải có !important: forms.css đặt box-shadow:none!important cho
	   .btn / .buy / .field... để xoá style mặc định của Flatsome, nên bóng ở
	   trạng thái hover sẽ bị nuốt nếu không ghi đè lại. */
	body.ducphat-site .btn:hover,
	body.ducphat-site .dp-solid:hover,
	body.ducphat-site .dp-primary:hover,
	body.ducphat-site .woocommerce a.button:hover,
	body.ducphat-site .woocommerce button.button:hover,
	body.ducphat-site .woocommerce input.button:hover {
		transform: translateY(-2px);
		box-shadow: var(--dp-shadow-md) !important;
	}

	body.ducphat-site .buy:hover {
		transform: translateY(-1px);
		box-shadow: var(--dp-shadow-sm) !important;
	}

	/* --- Link "Xem thêm →": mũi tên nhích sang phải --- */
	body.ducphat-site .more:hover {
		transform: translateX(3px);
	}

	/* --- Menu: gạch chân trượt từ trái --- */
	body.ducphat-site nav.nav .nav-inner > a:not(.category-trigger):hover::after {
		transform: scaleX(1);
	}

	/* --- Footer & topbar --- */
	body.ducphat-site .footer a:hover {
		color: #fff;
		transform: translateX(2px);
	}

	/* --- Ảnh sản phẩm trang chi tiết --- */
	body.ducphat-site .dp-thumbs button:hover {
		border-color: var(--teal);
	}

	/* --- Giỏ hàng --- */
	body.ducphat-site .quantity .minus:hover,
	body.ducphat-site .quantity .plus:hover {
		background: var(--teal);
		color: #fff;
	}

	body.ducphat-site table.shop_table .product-remove .remove:hover {
		transform: rotate(90deg);
	}

	body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item:hover {
		background: #fafcfb;
	}
}


/* ===========================================================================
 * 3. NHẤN — phản hồi tức thì, quan trọng nhất trên điện thoại
 * ======================================================================== */

body.ducphat-site .btn:active,
body.ducphat-site .buy:active,
body.ducphat-site .filter:active,
body.ducphat-site .dp-solid:active,
body.ducphat-site .dp-ghost:active,
body.ducphat-site .dp-primary:active,
body.ducphat-site .dp-secondary:active,
body.ducphat-site .search button:active,
body.ducphat-site .woocommerce a.button:active,
body.ducphat-site .woocommerce button.button:active,
body.ducphat-site .woocommerce input.button:active {
	transform: translateY(0) scale(.97);
	box-shadow: none;
	transition-duration: .06s;
}

body.ducphat-site .product-card:active,
body.ducphat-site .category-card:active,
body.ducphat-site .project-card:active,
body.ducphat-site .news-card:active {
	transform: scale(.995);
	transition-duration: .08s;
}

/* Bỏ highlight xanh mặc định của trình duyệt trên Android */
body.ducphat-site a,
body.ducphat-site button {
	-webkit-tap-highlight-color: rgba(0, 122, 77, .12);
}


/* ===========================================================================
 * 4. BÀN PHÍM — viền focus rõ ràng, không làm xô lệch bố cục
 * ======================================================================== */

body.ducphat-site a:focus-visible,
body.ducphat-site button:focus-visible,
body.ducphat-site input:focus-visible,
body.ducphat-site select:focus-visible,
body.ducphat-site textarea:focus-visible,
body.ducphat-site [tabindex]:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Thẻ sản phẩm/danh mục là một thẻ <a> lớn - cho viền ôm sát thẻ */
body.ducphat-site .category-card:focus-visible,
body.ducphat-site .product-card a:focus-visible {
	outline-offset: 2px;
}

/* Ô nhập liệu: viền + quầng sáng, giữ nguyên chiều cao để không nhảy chữ */
body.ducphat-site .field:focus,
body.ducphat-site textarea:focus,
body.ducphat-site .tp-field:focus,
body.ducphat-site .dp-quote-form input:focus,
body.ducphat-site .dp-quote-form select:focus,
body.ducphat-site .dp-quote-form textarea:focus,
body.ducphat-site .woocommerce form .form-row input.input-text:focus,
body.ducphat-site .woocommerce form .form-row textarea:focus {
	/* !important vì forms.css khoá border và box-shadow của .field / .search
	   bằng !important (để dọn style mặc định của Flatsome). */
	border-color: var(--teal) !important;
	box-shadow: var(--dp-ring) !important;
	outline: none;
}

body.ducphat-site .search:focus-within {
	border-color: var(--teal) !important;
	box-shadow: var(--dp-ring) !important;
}

/* Nhảy nhanh tới nội dung chính khi dùng bàn phím */
body.ducphat-site .dp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: var(--navy);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 5px 0;
	font-weight: 700;
}

body.ducphat-site .dp-skip-link:focus {
	left: 0;
}


/* ===========================================================================
 * 5. CHI TIẾT NHỎ
 * ======================================================================== */

/* Con trỏ đúng ngữ nghĩa */
body.ducphat-site .filter,
body.ducphat-site .mobile-toggle,
body.ducphat-site .dp-nav-close,
body.ducphat-site .quantity button {
	cursor: pointer;
}

/* Ảnh chưa tải xong thì nền xám, tránh nhấp nháy trắng */
body.ducphat-site .photo {
	background-color: #eef4f1;
}

/* Nút đang chờ xử lý */
body.ducphat-site .btn[disabled],
body.ducphat-site button[disabled],
body.ducphat-site .woocommerce .button.loading {
	opacity: .6;
	cursor: wait;
	transform: none !important;
	box-shadow: none !important;
}

/* Kéo chọn chữ dùng màu thương hiệu */
body.ducphat-site ::selection {
	background: rgba(0, 122, 77, .18);
	color: var(--navy);
}


/* ===========================================================================
 * 6. TÔN TRỌNG "GIẢM CHUYỂN ĐỘNG" CỦA HỆ ĐIỀU HÀNH
 *
 * Người bị say chuyển động bật tuỳ chọn này trong Windows/macOS/iOS. Khi đó
 * tắt hết chuyển động nhưng GIỮ phản hồi bằng màu sắc và đổ bóng.
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.ducphat-site *,
	body.ducphat-site *::before,
	body.ducphat-site *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	body.ducphat-site .product-card:hover,
	body.ducphat-site .category-card:hover,
	body.ducphat-site .project-card:hover,
	body.ducphat-site .news-card:hover,
	body.ducphat-site .btn:hover,
	body.ducphat-site .buy:hover,
	body.ducphat-site .more:hover,
	body.ducphat-site .footer a:hover {
		transform: none !important;
	}

	body.ducphat-site .photo img {
		transform: none !important;
	}
}