/* =========================================================================
   towel.vn — CSS của child theme
   -------------------------------------------------------------------------
   File này gom toàn bộ CSS trước đây được echo bằng thẻ <style> giữa <body>
   trong functions.php. Nhờ nằm ở file riêng, CSS được trình duyệt cache lại,
   không còn chặn render giữa trang và không lặp trên mỗi lần render sản phẩm.

   LƯU Ý: style nền của .sticky-contact, .pumb-circle và .xuong-khan-header
   đang nằm trong Customizer (Flatsome > Custom CSS), không phải ở đây.
   File này chỉ BỔ SUNG các quy tắc về hỗ trợ tiếp cận và ổn định bố cục cho
   những khối đó, cố tình không ghi đè phần trang trí.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. ĐẶT CHỖ CHO SLIDER HERO TRANG CHỦ — CHỐNG DỊCH CHUYỂN BỐ CỤC
   -------------------------------------------------------------------------
   Đo trực tiếp bằng Layout Instability API trong Chrome (mạng 4G chậm, CPU
   chậm 4×) cho thấy: quanh mốc 4.3 giây, slider hero co chiều cao về 0 rồi
   bung lại 600px. Toàn bộ nội dung bên dưới bị đẩy xuống 600px rồi kéo ngược
   lên — riêng hai lần này đã chiếm 1.03 trên tổng CLS 1.05 của trang chủ.

   Nguyên nhân: Flickity chạy với imagesLoaded + lazyLoad + adaptiveHeight.
   Trong lúc chờ ảnh, chiều cao slide chưa xác định nên khung slider sập xuống.

   Khai báo min-height bằng đúng chiều cao banner để trình duyệt giữ sẵn chỗ
   ngay từ khi dựng bố cục, trước cả khi JavaScript chạy. Giá trị này không
   làm đổi giao diện vì đó cũng chính là chiều cao khi slider đã ổn định.

   ĐO ĐƯỢC: CLS 1.0544 -> 0.0403

   ⚠ 600px lấy từ `#banner-xxx { padding-top: 600px }` mà UX Builder sinh ra.
   Nếu sau này đổi chiều cao banner hero trong UX Builder, phải sửa lại con số
   ở đây cho khớp, nếu không sẽ thừa hoặc thiếu khoảng trắng.
   ---------------------------------------------------------------------- */

#content > .slider-wrapper {
	min-height: 600px;
}

/* -------------------------------------------------------------------------
   1. KHỐI TIÊU ĐỀ H1
   ---------------------------------------------------------------------- */

.towel-heading {
	text-align: center;
}

.category-h1-wrapper {
	margin-bottom: 20px;
}

.universal-shop-h1-wrapper {
	margin-bottom: 25px;
	padding: 0 15px;
}

.custom-page-title-wrap {
	margin: 30px 0 20px;
}

.universal-shop-h1-wrapper .entry-title,
.custom-page-title-wrap .page-title {
	margin-bottom: 0;
	color: #333;
	font-weight: 800;
	/* clamp() giúp tiêu đề tự co giãn, không cần media query riêng */
	font-size: clamp(24px, 5vw, 30px);
	text-transform: uppercase;
}

.h1-divider,
.page-title-divider {
	height: 3px;
	margin: 12px auto 0;
}

.h1-divider {
	width: 60px;
	background-color: #4caf50;
}

.page-title-divider {
	width: 50px;
	background-color: #d32f2f;
}

/* -------------------------------------------------------------------------
   2. GIÁ "LIÊN HỆ"
   ---------------------------------------------------------------------- */

/*
 * Màu cũ #e67e22 chỉ đạt tỉ lệ tương phản ~3.0:1 trên nền trắng — không đạt
 * chuẩn WCAG AA (tối thiểu 4.5:1) và bị Lighthouse báo lỗi
 * "Background and foreground colors do not have a sufficient contrast ratio".
 * #c2410c đạt ~5.2:1 mà vẫn giữ đúng sắc cam cháy của thiết kế cũ.
 */
.contact-for-price {
	color: #c2410c;
	font-weight: 700;
	font-size: 1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   3. TRANG SẢN PHẨM — ẨN GIỎ HÀNG, HIỆN NÚT BÁO GIÁ
   -------------------------------------------------------------------------
   Các quy tắc ẩn được giới hạn trong .single-product. Bản cũ đặt chúng ở
   phạm vi toàn cục nên nếu file CSS này áp dụng mọi trang thì ô số lượng
   (.quantity) ở trang giỏ hàng cũng bị ẩn theo.
   ---------------------------------------------------------------------- */

.single-product .single_add_to_cart_button,
.single-product .quantity,
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability {
	display: none !important;
}

.single-product .variations_form {
	margin-bottom: 5px !important;
	padding-bottom: 0 !important;
}

.single-product .variations {
	margin-bottom: 0 !important;
}

.zalo-quote-wrapper {
	margin-top: 0;
	margin-bottom: 25px;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f1f1f1;
}

.btn-zalo-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 350px;
	/* Cao tối thiểu 48px: đạt tiêu chí "Tap targets are sized appropriately" */
	min-height: 48px;
	padding: 12px 25px;
	border-radius: 4px;
	background: #0068ff; /* Tương phản với chữ trắng ~4.8:1 — đạt WCAG AA */
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none !important;
}

.btn-zalo-quote:hover,
.btn-zalo-quote:focus {
	background: #0055d4;
	color: #fff !important;
}

/*
 * Kích thước icon được khai báo cố định để trình duyệt dành sẵn chỗ,
 * tránh Cumulative Layout Shift khi font/SVG hoàn tất tải.
 */
.btn-zalo-quote__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

/* -------------------------------------------------------------------------
   4. NÚT LIÊN HỆ CỐ ĐỊNH (footer)
   -------------------------------------------------------------------------
   Chỉ bổ sung phần hỗ trợ tiếp cận + ổn định bố cục.
   ---------------------------------------------------------------------- */

.sticky-contact .contact-item {
	/* Vùng chạm tối thiểu 44x44px theo khuyến nghị WCAG 2.5.5 */
	min-width: 44px;
	min-height: 44px;
}

/*
 * Vòng tròn nền đã có màu (#0084ff cho Zalo, #ff0000 cho nút gọi — đặt trong
 * Customizer), nên icon bên trong bắt buộc phải trắng.
 *
 * SVG khai báo fill="currentColor", mà màu chữ kế thừa của site là #000000 —
 * icon đen trên nền xanh/đỏ nhìn như bị hỏng. Đặt màu ở đây thay vì sửa trong
 * SVG: quy tắc CSS luôn thắng thuộc tính fill viết thẳng trong thẻ, và sau này
 * đổi màu chỉ cần sửa một chỗ.
 */
.sticky-contact .contact-icon {
	color: #fff;
}

.sticky-contact .contact-icon svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: #fff;
}

/*
 * Nút Zalo dùng wordmark chữ nên khung phải rộng và thấp, không vuông như
 * icon ống nghe. Khai báo cả width lẫn height để trình duyệt biết trước tỉ lệ,
 * tránh nhảy layout lúc font hoàn tất tải.
 */
.sticky-contact .zalo-button .contact-icon svg {
	width: 36px;
	height: 17px;
}

/* -------------------------------------------------------------------------
   4b. TƯƠNG PHẢN CHỮ Ở DẢI CUỐI TRANG (absolute footer)
   -------------------------------------------------------------------------
   Lighthouse báo 5 phần tử không đạt tương phản, tất cả nằm ở dải cuối trang:

     menu phụ (#menu-secondary)   #999999 trên nền trắng = 2.84:1
     dòng bản quyền               #808080 trên nền trắng = 3.94:1

   Chuẩn WCAG AA yêu cầu tối thiểu 4.5:1 cho chữ thường.

   Điều đáng nói: hai màu này KHÔNG được khai báo ở đâu cả — tìm chuỗi
   "999999" trong mã nguồn trang không ra kết quả nào. Chúng là kết quả của
   hai lớp trong suốt chồng lên nhau trong CSS của Flatsome:

     .absolute-footer    { color: rgba(0,0,0,.5) }   -> ra #808080
     .absolute-footer ul { opacity: .8 }             -> nhân tiếp, ra #999999

   Nên phải xử lý cả hai: đặt màu đặc thay cho màu có alpha, và bỏ lớp
   opacity phủ lên danh sách menu.

   #6b6b6b trên nền trắng đạt 5.33:1 — vượt chuẩn AA mà vẫn giữ sắc xám nhạt
   của thiết kế gốc.

   Dùng :not(.dark) để nếu sau này bạn đổi footer sang nền tối trong
   Customizer thì quy tắc này tự nhường chỗ, không làm chữ trắng thành xám.
   ---------------------------------------------------------------------- */

.absolute-footer:not(.dark),
.absolute-footer:not(.dark) .copyright-footer,
.absolute-footer:not(.dark) a {
	color: #6b6b6b;
}

.absolute-footer:not(.dark) ul {
	opacity: 1;
}

.absolute-footer:not(.dark) a:hover,
.absolute-footer:not(.dark) a:focus {
	color: #111;
}

/* -------------------------------------------------------------------------
   5. TIÊU ĐIỂM BÀN PHÍM (keyboard focus)
   -------------------------------------------------------------------------
   Lighthouse kiểm tra "Interactive elements indicate their purpose and
   state". Dùng :focus-visible nên viền chỉ hiện khi điều hướng bằng bàn
   phím, không ảnh hưởng người dùng chuột.
   ---------------------------------------------------------------------- */

.btn-zalo-quote:focus-visible,
.sticky-contact .contact-item:focus-visible,
.woocommerce-loop-product__title a:focus-visible {
	outline: 3px solid #0068ff;
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   6. TÔN TRỌNG TUỲ CHỌN GIẢM CHUYỂN ĐỘNG
   -------------------------------------------------------------------------
   Hiệu ứng nhấp nháy .pumb-circle chạy vô hạn ở góc màn hình. Với người
   nhạy cảm tiền đình (rối loạn tiền đình, chứng đau nửa đầu) đây là yếu tố
   gây khó chịu — WCAG 2.3.3 yêu cầu cho phép tắt.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sticky-contact .pumb-circle {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
