/* Hallmark · genre: modern-minimal · scope: thẻ sản phẩm + ô danh mục (toàn site)
 * design-system: tokens.css · pre-emit critique: P5 H5 E5 S5 R5 V3
 */

/* =============================================================================
   Thẻ sản phẩm và ô danh mục — toàn site
   -----------------------------------------------------------------------------
   ⚠️ NẠP TRÊN MỌI TRANG, không chỉ trang chủ.

   Thẻ sản phẩm xuất hiện ở trang chủ, trang cửa hàng, mọi trang danh mục và
   khối "sản phẩm liên quan" dưới mỗi trang sản phẩm. Sửa riêng trang chủ sẽ
   cho ra nút đỏ ở một nơi và nút đen ở nơi khác — tệ hơn cả để nguyên.

   ---------------------------------------------------------------------------
   BỐN MÀU TRONG MỘT THẺ (đo trên Chrome 17/08/2026)

     nút "THÊM VÀO GIỎ HÀNG"   rgb(0, 0, 0)        đen tuyệt đối, 11,5px, weight 400
     giá                        rgb(181, 18, 18)    = #B51212
     dòng "đã bao gồm VAT"      rgb(16, 185, 129)   = xanh lá --ht-thanh-cong
     chữ tên sản phẩm           rgb(0, 0, 0)

   Ba vấn đề riêng biệt:

   1. HÀNH ĐỘNG CHÍNH KHÔNG MANG MÀU THƯƠNG HIỆU.
      Nút thêm vào giỏ là nút quan trọng nhất của một site thương mại, mà nó
      đen. Cả trang dùng đỏ Haliti cho mọi nhấn mạnh, riêng chỗ cần nhấn nhất
      thì không. Khi màu nhấn không đánh dấu hành động thì nó thôi là màu nhấn.

   2. #B51212 LÀ SẮC ĐỎ THỨ BA TRÊN SITE.
      Đỏ thương hiệu #D12124 · thanh nav #DD3333 (đã sửa ở đợt 3) · giá #B51212.
      Ba sắc đỏ lệch nhau vài độ — không ai gọi tên được, nhưng mắt đọc ra là
      trang thiếu chỉn chu.

   3. XANH LÁ DÙNG SAI NGỮ NGHĨA.
      --ht-thanh-cong là màu báo *thành công* (đã lưu, đã gửi). "Giá đã bao gồm
      VAT" là ghi chú thông tin, không phải kết quả của hành động nào. Tệ hơn:
      đặt xanh lá ngay cạnh đỏ là cặp màu tệ nhất cho người mù màu đỏ–lục
      (khoảng 8% nam giới), mà ở đây cặp đó lại chẳng mang thông tin gì.

   ---------------------------------------------------------------------------
   ⚠️ Ô XÁM SAU LOGO THƯƠNG HIỆU KHÔNG SỬA ĐƯỢC Ở ĐÂY.

   Đã truy chuỗi tổ tiên của logo: `.box-image`, `.image-zoom`, `.box-category`
   — tất cả đều `background: rgba(0,0,0,0)`. Màu xám nằm TRONG chính file ảnh
   (`logo-blackmagic-design.jpg` — định dạng JPG nên không có kênh trong suốt).
   CSS không chạm tới được. Muốn logo nổi trên nền trắng thì phải xuất lại ảnh
   dạng PNG/WebP nền trong suốt, hoặc nền trắng.
   ========================================================================== */

/* --- Ẩn nút thêm vào giỏ trên thẻ danh sách -----------------------------
   Yêu cầu người dùng 18/08/2026: "chỉ để giá, bỏ nút".

   ⚠️ ẨN CHỨ KHÔNG GỠ Ở PHP — CÓ LÝ DO.
   Nút vẫn phải xuất hiện trong khối Flash sale (xem cuối file). Gỡ bằng filter
   `woocommerce_loop_add_to_cart_link` thì mất ở mọi nơi, muốn bật lại cho một
   khối phải viết thêm điều kiện theo ngữ cảnh — phức tạp hơn hẳn so với một
   dòng CSS bật lại.

   Ba lý do bỏ nút, không chỉ vì gọn:

   1. **Nút đang vỡ.** Đo trên hàng "Đang bán chạy": thẻ hẹp hơn hàng NEW
      ARRIVALS nên nhãn "THÊM VÀO GIỎ HÀNG" xuống HAI DÒNG. Chữ bấm được xuống
      hai dòng là lỗi kỷ luật responsive — người đọc không biết ngắt dòng đó có
      chủ ý hay hỏng. (Lỗi này do chính đợt trước gây ra: nâng cỡ chữ nút từ
      11,5px lên 14px mà không kiểm lại ở thẻ hẹp.)

   2. **Phần lớn hàng của Haliti là "Liên hệ".** Đo được: 4/6 thẻ ở hàng
      "Đang bán chạy" hiện "Liên hệ" thay vì giá. Nút "Thêm vào giỏ" bên cạnh
      một sản phẩm không có giá là lời mời không thực hiện được.

   3. **Đây là site B2B.** Thiết bị vài chục tới vài trăm triệu hiếm khi được
      mua bằng một cú bấm từ trang danh sách. Đường đi thật là: xem thẻ → vào
      trang sản phẩm → đọc thông số → gọi hoặc gửi phiếu tư vấn.
   ------------------------------------------------------------------------ */

.product-small .add-to-cart-button,
.woocommerce ul.products li.product .add-to-cart-button {
	display: none;
}

/*
 * Khối Flash sale là ngoại lệ DUY NHẤT — ở đó nút quay lại.
 * Hàng giảm giá có thời hạn là đúng bối cảnh cho một cú bấm nhanh: giá đã rõ,
 * khách đã biết mình muốn gì, và sự khan hiếm mới là thứ thúc hành động.
 *
 * Khi dựng khối đó, đặt class `.ht-flash-sale` lên section bao ngoài.
 */
.ht-flash-sale .add-to-cart-button {
	display: block;
}

/* --- Nút thêm vào giỏ: về màu thương hiệu --------------------------------
   Giữ nguyên phần khai báo bên dưới: nút vẫn cần đúng màu và đúng cỡ cho
   khối Flash sale, và cho trang sản phẩm đơn lẻ.
   ------------------------------------------------------------------------ */

.add-to-cart-button .button,
.product-small .button.primary,
.woocommerce .button.add_to_cart_button {
	background-color: var(--ht-nhan);
	border-color: var(--ht-nhan);
	color: var(--ht-chu-tren-nhan);

	/* 11,52px là 0.72em thừa kế — quá nhỏ cho hành động chính, và weight 400
	   làm nó đọc như một dòng chữ chứ không như một nút. */
	font-size: var(--ht-co-nho);
	font-weight: var(--ht-dam-vua);
	letter-spacing: 0;
	border-radius: var(--ht-bo-goc-nho);

	transition: background-color var(--ht-nhanh) var(--ht-ra);
}

.add-to-cart-button .button:hover,
.product-small .button.primary:hover,
.woocommerce .button.add_to_cart_button:hover,
.add-to-cart-button .button:focus-visible,
.product-small .button.primary:focus-visible {
	background-color: var(--ht-nhan-hover);
	border-color: var(--ht-nhan-hover);
	color: var(--ht-chu-tren-nhan);
}

/*
 * Bỏ lớp bóng của Flatsome (`.is-gloss` phủ một dải gradient trắng mờ lên nút).
 * Vệt bóng giả là hiệu ứng nút kiểu 2010 — nó cũng làm màu đỏ thật của nút
 * nhạt đi ở nửa trên, nên nút không còn đúng màu thương hiệu nữa.
 */
.add-to-cart-button .button.is-gloss,
.woocommerce .button.is-gloss {
	background-image: none;
	box-shadow: none;
}

/* --- Giá: một sắc đỏ duy nhất trên toàn site ----------------------------- */

.price,
.price .amount,
.price bdi,
.price ins .amount,
.woocommerce-Price-amount {
	color: var(--ht-nhan);
	font-weight: var(--ht-dam-tieu-de);

	/* Chữ số dạng bảng: cột giá thẳng hàng nhau khi xếp lưới, không so le. */
	font-variant-numeric: tabular-nums;
}

/* Giá gạch bỏ (hàng giảm giá) phải MỜ đi, không mang màu nhấn — nó là thông
   tin phụ, và tô đỏ cả hai giá thì mắt không biết giá nào đang có hiệu lực. */
.price del,
.price del .amount,
.price del bdi {
	color: var(--ht-chu-mo);
	font-weight: var(--ht-dam-than);
	text-decoration: line-through;
}

/* --- Ghi chú VAT: về chữ mờ, bỏ xanh lá ---------------------------------- */

.haliti-vat-notice {
	color: var(--ht-chu-mo);
	font-size: var(--ht-co-nhan);
	font-weight: var(--ht-dam-than);
	display: block;
	margin-top: var(--ht-cach-1);
}

/* --- Bảo hành + Xuất xứ trên thẻ ----------------------------------------
   Markup do haliti-core/modules/woocommerce/12-thong-tin-tren-the.php sinh ra.

   Xếp ngang, phân tách bằng dấu chấm giữa — chiếm đúng một dòng, không đẩy
   thẻ cao lên. Chữ nhỏ và mờ để không tranh chỗ với giá: đây là thông tin phụ
   trợ cho quyết định, giá mới là thứ mắt dừng lại.
   ------------------------------------------------------------------------ */

.ht-the-phu {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--ht-cach-2);
	list-style: none;
	margin: var(--ht-cach-1) 0 0;
	padding: 0;
	font-size: var(--ht-co-nhan);
	line-height: 1.5;
	color: var(--ht-chu-mo);
}

/* Dấu chấm giữa làm dải phân cách, không dùng viền — viền giữa hai mẩu chữ
   ngắn tạo ra nhiều đường kẻ nhỏ hơn là nhịp. */
.ht-the-phu__muc + .ht-the-phu__muc::before {
	content: "·";
	margin-inline-end: var(--ht-cach-2);
	color: var(--ht-duong-vien);
}

/* Nhãn "BH" đậm hơn một bậc để đọc ra là nhãn, không phải một phần giá trị. */
.ht-the-phu__nhan {
	font-weight: var(--ht-dam-nhan);
	color: var(--ht-chu);
}

/* --- Ô danh mục: viền mảnh thay vì thẻ nổi ------------------------------- */

.box-category .box-image {
	border-radius: var(--ht-bo-goc);
	overflow: hidden;
}

/*
 * Nhãn dưới ô danh mục: bỏ chữ hoa toàn phần của Flatsome.
 * "TRUYỀN KHÔNG DÂY - WIRELESS SYSTEM" viết hoa hết thì dấu tiếng Việt chồng
 * lên nhau và dòng dài ra đáng kể — tên danh mục tiếng Việt thường dài gấp
 * rưỡi tiếng Anh nên chữ hoa hại nhiều hơn lợi.
 */
.box-category .box-text .header-title,
.box-category .box-text h5 {
	text-transform: none;
	font-size: var(--ht-co-nho);
	font-weight: var(--ht-dam-vua);
	letter-spacing: 0;
	color: var(--ht-chu);
}

/* --- Tên sản phẩm -------------------------------------------------------- */

.product-small .name a,
.product-small .product-title a {
	color: var(--ht-chu);
	font-weight: var(--ht-dam-nhan);
	transition: color var(--ht-nhanh) var(--ht-ra);
}

.product-small .name a:hover,
.product-small .name a:focus-visible {
	color: var(--ht-nhan);
}

/* --- Vòng focus ---------------------------------------------------------- */

.product-small a:focus-visible,
.box-category a:focus-visible,
.add-to-cart-button .button:focus-visible {
	outline: 2px solid var(--ht-focus);
	outline-offset: 2px;
}

/* --- Điện thoại ---------------------------------------------------------- */

@media (max-width: 40rem) {
	/* Nút thêm vào giỏ phải đạt vùng bấm 44px theo WCAG — đây là nút được bấm
	   nhiều nhất trên di động. */
	.add-to-cart-button .button,
	.product-small .button.primary {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}