/* Hallmark · genre: modern-minimal · scope: cổng /san-pham/
 * design-system: tokens.css (có dự phòng) · pre-emit critique: P5 H5 E5 S5 R4 V3
 */

/* =============================================================================
   Cổng sản phẩm — nội dung trang /san-pham/
   -----------------------------------------------------------------------------
   ⚠️ FILE NÀY NẰM TRONG PLUGIN, KHÔNG NẰM TRONG THEME — CÓ LÝ DO.

   Live đang chạy `flatsome-child`, còn bộ theme mới `haliti-2026` (nơi có
   `tokens.css`) mới chỉ ở dev. Đặt CSS trong theme thì cổng chỉ chạy được ở dev,
   mà danh mục thật lại nằm ở live. Đặt trong plugin thì chạy ở cả hai.

   Hệ quả: KHÔNG được dùng thẳng `var(--ht-*)`. Trên live các biến đó không tồn
   tại, mọi màu sẽ rỗng và bố cục vỡ. Nên toàn bộ giá trị đi qua một lớp biến
   riêng khai báo ngay dưới đây, mỗi biến kèm giá trị dự phòng:

       --htc-nhan: var(--ht-nhan, #D12124);

   Theme mới lên live thì `--ht-nhan` có mặt và thắng; chưa lên thì rơi về mã màu
   cứng. Sửa màu thương hiệu chỉ cần sửa ở một chỗ trong khối này.

   ---------------------------------------------------------------------------
   53,5% KHÁCH DÙNG ĐIỆN THOẠI

   Trang này có mười khối và gần sáu mươi ô. Trên màn hình 375px, mỗi ô một hàng
   thì riêng phần ô đã dài hơn mười lăm màn hình cuộn. Nên lưới dùng `auto-fill`:
   điện thoại ra hai cột, máy tính bảng ba đến bốn, desktop sáu. Ô là chữ chứ
   không phải ảnh nên hai cột vẫn đọc thoải mái.

   Mục lục nhảy khối ở đầu trang cũng vì lý do đó — đo trên 375px, cả trang cao
   gần mười màn hình cuộn; không có mục lục thì muốn tới khối thứ mười phải cuộn
   qua chín khối trước.
   ========================================================================== */

.ht-cong {
	/* Màu */
	--htc-chu:      var(--ht-chu, #1A1A1A);
	--htc-chu-mo:   var(--ht-chu-mo, #6B7280);
	--htc-nhan:     var(--ht-nhan, #D12124);
	--htc-nhan-dam: var(--ht-nhan-hover, #A81B1E);
	--htc-nen:      var(--ht-nen, #FFFFFF);
	--htc-vien:     var(--ht-duong-vien, #E0E2E6);

	/* Khoảng cách */
	--htc-c1: var(--ht-cach-1, 4px);
	--htc-c2: var(--ht-cach-2, 8px);
	--htc-c3: var(--ht-cach-3, 12px);
	--htc-c4: var(--ht-cach-4, 16px);
	--htc-c5: var(--ht-cach-5, 24px);
	--htc-c6: var(--ht-cach-6, 32px);
	--htc-c7: var(--ht-cach-7, 48px);
	--htc-c8: var(--ht-cach-8, 64px);

	/* Chữ */
	--htc-font:      var(--ht-font-than, 'Be Vietnam Pro', system-ui, sans-serif);
	--htc-font-td:   var(--ht-font-tieu-de, 'Be Vietnam Pro', system-ui, sans-serif);
	--htc-co-display: var(--ht-co-display, clamp(2.125rem, 3.6vw + 0.75rem, 3.75rem));
	--htc-co-h2:     var(--ht-co-h2, clamp(1.5rem, 1.1vw + 1.05rem, 2rem));
	--htc-co-than:   var(--ht-co-than, 1rem);
	--htc-co-nho:    var(--ht-co-nho, 0.875rem);
	--htc-co-nhan:   var(--ht-co-nhan, 0.75rem);
	--htc-dam-td:    var(--ht-dam-tieu-de, 700);
	--htc-dam-vua:   var(--ht-dam-vua, 600);
	--htc-dam-nhan:  var(--ht-dam-nhan, 500);
	--htc-dam-than:  var(--ht-dam-than, 400);
	--htc-cao-dong:  var(--ht-cao-dong, 1.6);
	--htc-cao-td:    var(--ht-cao-dong-tieu-de, 1.15);
	--htc-gian-td:   var(--ht-gian-tieu-de, -0.02em);

	/* Hình khối */
	--htc-goc-the:  var(--ht-bo-goc-the, 8px);
	--htc-goc-tron: var(--ht-bo-goc-tron, 999px);
	--htc-vien-manh: var(--ht-vien-manh, 1px);
	--htc-bong:     var(--ht-do-bong, 0 1px 3px rgba(26, 26, 26, 0.08));
	--htc-ra:       var(--ht-ra, cubic-bezier(0.16, 1, 0.3, 1));

	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--htc-c5);
	padding-block: var(--htc-c6) var(--htc-c8);
	font-family: var(--htc-font);
	color: var(--htc-chu);
}

/* --- Câu mở ------------------------------------------------------------- */

/* --- H1 của trang /thuong-hieu/ ------------------------------------------
   Chỉ cổng thương hiệu cần khối này. `/san-pham/` là archive shop nên Flatsome
   đã in sẵn `h1.shop-page-title`; còn `/thuong-hieu/` là Trang thường mà cả
   `flatsome-child` (live) lẫn `haliti-2026` (dev) đều không in tiêu đề trang —
   đo ngày 23/08 thấy cả hai bên đều 0 thẻ H1. Cổng tự in H1 của mình.

   Đặt NGOÀI `.ht-cong__mo` vì khối đó bó 60ch cho đoạn văn; tiêu đề bị bó theo
   thì xuống dòng sớm hơn cần thiết. */
.ht-cong__tieu-de {
	margin: 0 0 var(--htc-c4);
	font-family: var(--htc-font-td);
	font-size: var(--htc-co-display);
	font-weight: var(--htc-dam-td);
	letter-spacing: var(--ht-gian-display, -0.03em);
	line-height: var(--htc-cao-td);
	color: var(--htc-chu);
}

.ht-cong__mo {
	max-width: 60ch;
	margin-bottom: var(--htc-c6);
}

.ht-cong__dan-chung {
	margin: 0;
	font-size: var(--htc-co-than);
	line-height: var(--htc-cao-dong);
	color: var(--htc-chu-mo);
}

.ht-cong__dan-chung a {
	color: var(--htc-nhan);
	font-weight: var(--htc-dam-vua);
}

.ht-cong__dan-chung a:hover {
	color: var(--htc-nhan-dam);
}

/* --- Lưới mười nhóm ở đầu trang ----------------------------------------
   Năm cột trên máy tính nên mười nhóm rơi đúng hai dòng — cân đối và không phải
   cuộn. Trước đây chỗ này là một hàng chip chữ cuộn ngang: gọn hơn thật, nhưng
   chữ không nói được "nhóm này bán cái gì", còn ảnh thì nói ngay.

   Ảnh lấy tự động từ hàng thật trong nhóm (xem haliti_cong_anh_nhom) chứ không
   chờ ai upload đủ mười tấm — đo ngày 23/08 chỉ 2 trong 11 danh mục đại diện có
   ảnh riêng. */

.ht-cong__luoi-nhom {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--htc-c4);
	margin-bottom: var(--htc-c7);
	padding-bottom: var(--htc-c7);
	border-bottom: var(--htc-vien-manh) solid var(--htc-vien);
}

.ht-cong__the-nhom {
	display: flex;
	flex-direction: column;
	gap: var(--htc-c2);
	padding: var(--htc-c3);
	border: var(--htc-vien-manh) solid var(--htc-vien);
	border-radius: var(--htc-goc-the);
	background: var(--htc-nen);
	text-decoration: none;
	transition: border-color 160ms var(--htc-ra), box-shadow 160ms var(--htc-ra);
}

.ht-cong__the-nhom:hover,
.ht-cong__the-nhom:focus-visible {
	border-color: var(--htc-nhan);
	box-shadow: var(--htc-bong);
}

/* Khung ảnh vuông cố định: ảnh sản phẩm trên site đủ mọi tỷ lệ, không ghim
   khung thì mười thẻ cao thấp so le. */
.ht-cong__the-anh {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--ht-nen-nhat, #F3F4F6);
	border-radius: var(--htc-goc-the);
	overflow: hidden;
}

.ht-cong__the-anh img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ht-cong__the-ten {
	font-size: var(--htc-co-than);
	font-weight: var(--htc-dam-vua);
	line-height: 1.3;
	color: var(--htc-chu);
}

.ht-cong__the-nhom:hover .ht-cong__the-ten {
	color: var(--htc-nhan);
}

.ht-cong__the-so {
	font-size: var(--htc-co-nhan);
	color: var(--htc-chu-mo);
}

/* --- Một nhóm ------------------------------------------------------------ */

.ht-cong__nhom {
	margin-bottom: var(--htc-c8);
	/* Chừa chỗ cho đầu trang dính khi nhảy tới #nhom-N. */
	scroll-margin-top: var(--htc-c8);
}

.ht-cong__ten {
	margin: 0 0 var(--htc-c3);
	font-family: var(--htc-font-td);
	font-size: var(--htc-co-h2);
	font-weight: var(--htc-dam-td);
	letter-spacing: var(--htc-gian-td);
	line-height: var(--htc-cao-td);
	color: var(--htc-chu);
}

/* Đoạn dẫn giới hạn 65ch: dài hơn thì mắt khó bắt đầu dòng kế tiếp. */
.ht-cong__dan {
	max-width: 65ch;
	margin: 0 0 var(--htc-c5);
	font-size: var(--htc-co-than);
	line-height: var(--htc-cao-dong);
	color: var(--htc-chu-mo);
}

/* --- Lưới ô -------------------------------------------------------------- */

.ht-cong__luoi {
	display: grid;
	/* 170px chứ không 150px: đo trên 1280px, đáy 150 cho ra bảy cột rộng 154px,
	   đủ hẹp để "Bộ chuyển đổi tín hiệu" xuống ba dòng trong khi ô bên cạnh chỉ
	   một dòng — chênh nhau 43px chiều cao giữa các hàng. 170px ra sáu cột và
	   nhãn dài nhất dừng ở hai dòng. */
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--htc-c3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ht-cong__o {
	margin: 0;
}

.ht-cong__o-lien-ket {
	display: flex;
	flex-direction: column;
	gap: var(--htc-c1);
	height: 100%;
	padding: var(--htc-c4);
	background: var(--htc-nen);
	border: var(--htc-vien-manh) solid var(--htc-vien);
	border-radius: var(--htc-goc-the);
	text-decoration: none;
	transition: border-color 160ms var(--htc-ra), box-shadow 160ms var(--htc-ra);
}

.ht-cong__o-lien-ket:hover,
.ht-cong__o-lien-ket:focus-visible {
	border-color: var(--htc-nhan);
	box-shadow: var(--htc-bong);
}

.ht-cong__o-nhan {
	font-size: var(--htc-co-than);
	font-weight: var(--htc-dam-vua);
	line-height: 1.35;
	color: var(--htc-chu);
}

.ht-cong__o-lien-ket:hover .ht-cong__o-nhan {
	color: var(--htc-nhan);
}

.ht-cong__o-so {
	font-size: var(--htc-co-nhan);
	font-weight: var(--htc-dam-than);
	color: var(--htc-chu-mo);
}

/* --- Ô thương hiệu có logo ----------------------------------------------
   Chỉ dùng ở trang /thuong-hieu/. Khách tìm theo hãng thì nhận ra logo nhanh
   hơn đọc tên, nên logo đứng trên, tên và số sản phẩm ở dưới.

   Khung logo nền TRẮNG chứ không xám: phần lớn file logo trên site là JPG,
   không có kênh trong suốt, nền trắng sẵn trong ảnh — đặt lên nền xám thì lộ
   ra một ô trắng vuông lệch hẳn khỏi thẻ. */

.ht-cong__o--logo {
	align-items: stretch;
	padding: var(--htc-c3);
}

/* Ô thương hiệu rộng hơn ô danh mục thường: logo cần chỗ, và tên hãng vốn ngắn
   nên không sợ xuống dòng như "Bộ chuyển đổi tín hiệu". */
.ht-cong--th .ht-cong__luoi {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.ht-cong__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Khung cao 104px chứ không 56px như bản đầu. File logo gốc là 165×110px —
	 * khung 56px ép nó xuống còn khoảng 84px ngang, chữ trong logo nhỏ tới mức
	 * phải nhìn kỹ mới đọc ra hãng, tức là mất đúng cái lợi của việc đặt logo.
	 * 104px cho logo hiện gần cỡ gốc, ngang với hàng "Thương hiệu nổi bật" ở
	 * trang chủ.
	 */
	height: 104px;
	margin-bottom: var(--htc-c3);
	/*
	 * Đệm 4px, không phải 12px.
	 * Ô ngoài đã có đệm 12px rồi; thêm 12px nữa ở đây thành 24px mỗi bên, cộng
	 * với việc ảnh bị chặn chiều cao nên chỉ rộng 120px trong khung 150px —
	 * logo bơi giữa một mảng trắng rộng.
	 */
	padding: 4px;
	background: #FFFFFF;
	border-radius: var(--htc-goc-nho, 4px);
}

/*
 * `width/height: 100%` + `object-fit: contain` thay cho `max-width/max-height`:
 * cách cũ để ảnh giữ nguyên cỡ gốc rồi mới thu nhỏ nếu tràn, nên logo nhỏ hơn
 * khung thì cứ nhỏ vậy. Cách này cho ảnh giãn tới sát cạnh khung mà vẫn giữ
 * đúng tỷ lệ.
 */
.ht-cong__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Thương hiệu chưa có logo: hiện tên viết hoa thay vì ô trống. */
.ht-cong__logo-chu {
	font-size: var(--htc-co-nho);
	font-weight: var(--htc-dam-td);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--htc-chu-mo);
	text-align: center;
	line-height: 1.2;
}

/* --- Câu hỏi thường gặp --------------------------------------------------
   Dùng <details> chứ không dựng accordion bằng JS: mở/đóng là hành vi sẵn có
   của trình duyệt, đọc được bằng trình đọc màn hình, và tìm-trong-trang của
   Chrome mở được cả mục đang đóng.

   Bố cục theo khối FAQ mua hàng của Haliti, để hai chỗ nhìn ra là cùng một hệ:
   mảng nền xám bọc ngoài, tiêu đề có thanh dọc đỏ, mỗi câu là một THẺ TRẮNG
   riêng (không phải các dòng ngăn bằng đường kẻ), nút tròn +/× bên phải, và thẻ
   đang mở được viền đỏ. */

.ht-cong__faq {
	max-width: 1000px;
	margin-top: var(--htc-c7);
	padding: var(--htc-c5) var(--htc-c5) var(--htc-c4);
	background: #E8EBEE;
	border-radius: 12px;
	border-top: 0;
}

/* Thanh dọc đỏ trước tiêu đề. */
.ht-cong__faq > .ht-cong__ten {
	position: relative;
	margin: 0 0 var(--htc-c5);
	padding-left: var(--htc-c3);
	font-size: var(--htc-co-h2-muc, 1.5rem);
}

.ht-cong__faq > .ht-cong__ten::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 2px;
	background: var(--htc-nhan);
}

/* Mỗi câu là một thẻ trắng độc lập. */
.ht-cong__hoi {
	margin-bottom: var(--htc-c3);
	background: var(--htc-nen);
	border: var(--htc-vien-manh) solid transparent;
	border-radius: var(--htc-goc-the);
	transition: border-color 160ms var(--htc-ra);
}

.ht-cong__hoi:last-child {
	margin-bottom: 0;
}

.ht-cong__hoi[open] {
	border-color: var(--htc-nhan);
}

.ht-cong__hoi-tieu-de {
	padding: var(--htc-c4) 56px var(--htc-c4) var(--htc-c5);
	position: relative;
	font-size: var(--htc-co-than);
	font-weight: var(--htc-dam-td);
	line-height: 1.45;
	color: var(--htc-chu);
	cursor: pointer;
	list-style: none;
}

.ht-cong__hoi-tieu-de::-webkit-details-marker {
	display: none;
}

/* Nút tròn +/× bên phải.
   Dấu vẽ bằng hai gạch chồng nhau (::after là gạch dọc, xoay đi khi mở) chứ
   không dùng ký tự "+" — ký tự phụ thuộc phông, máy thiếu phông thì lệch tâm. */
.ht-cong__hoi-tieu-de::after {
	content: '';
	position: absolute;
	right: var(--htc-c5);
	top: 50%;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	border-radius: 50%;
	/*
	 * Viết tách từng thuộc tính, KHÔNG dùng `background` viết tắt.
	 * Ở dạng viết tắt nhiều lớp, màu nền chỉ hợp lệ khi nằm ở lớp CUỐI; đặt lên
	 * đầu là cả khai báo bị bỏ — lần đầu tôi viết vậy nên dấu cộng biến mất, chỉ
	 * còn vòng tròn của quy tắc [open] (quy tắc đó dùng background-color riêng
	 * nên vẫn hợp lệ).
	 */
	background-color: #FCEBEC;
	background-image:
		linear-gradient(var(--htc-nhan), var(--htc-nhan)),
		linear-gradient(var(--htc-nhan), var(--htc-nhan));
	background-size: 10px 2px, 2px 10px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 160ms var(--htc-ra), background-color 160ms var(--htc-ra);
}

/* Mở: xoay 45° nên dấu cộng thành dấu nhân. */
.ht-cong__hoi[open] .ht-cong__hoi-tieu-de::after {
	transform: translateY(-50%) rotate(45deg);
	background-color: #FADCDD;
}

.ht-cong__hoi-tieu-de:hover {
	color: var(--htc-nhan);
}

.ht-cong__hoi-dap {
	margin: 0;
	padding: 0 var(--htc-c5) var(--htc-c4);
	font-size: var(--htc-co-than);
	line-height: var(--htc-cao-dong);
	color: var(--htc-chu-mo);
}

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

@media (max-width: 640px) {
	.ht-cong {
		padding-inline: var(--htc-c4);
		padding-block: var(--htc-c5) var(--htc-c7);
	}

	.ht-cong__nhom {
		margin-bottom: var(--htc-c7);
	}

	.ht-cong__luoi {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: var(--htc-c2);
	}

	/* Hai cột trên điện thoại: mười nhóm thành năm dòng, vẫn thấy được
	   khoảng nửa lưới trong màn hình đầu. */
	.ht-cong__luoi-nhom {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--htc-c3);
		margin-bottom: var(--htc-c6);
		padding-bottom: var(--htc-c6);
	}

	.ht-cong__o-lien-ket {
		padding: var(--htc-c3);
	}

	.ht-cong__logo {
		height: 80px;
		padding: 4px;
	}

	.ht-cong--th .ht-cong__luoi {
		grid-template-columns: repeat(2, 1fr);
	}

	.ht-cong__faq {
		padding: var(--htc-c4) var(--htc-c3) var(--htc-c3);
	}

	.ht-cong__hoi-tieu-de {
		padding: var(--htc-c3) 48px var(--htc-c3) var(--htc-c4);
	}

	.ht-cong__hoi-tieu-de::after {
		right: var(--htc-c3);
	}

	.ht-cong__hoi-dap {
		padding: 0 var(--htc-c4) var(--htc-c3);
	}
}

/* Người bật giảm chuyển động: bỏ hiệu ứng, giữ nguyên trạng thái đích. */
@media (prefers-reduced-motion: reduce) {
	.ht-cong__muc-luc-nut,
	.ht-cong__o-lien-ket,
	.ht-cong__hoi-tieu-de::after {
		transition: none;
	}
}