/* DLB Category Hero (dlb-category-hero-ch92) — thêm 2026-08-30, đối chiếu demo-ui. */

.dlb-category-hero {
	background: var(--dlb-ch-bg, #e8f1ed);
	padding: 56px 24px;
}

.dlb-category-hero__inner {
	max-width: var(--dlb-max-width, 1200px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
}

.dlb-category-hero__info {
	flex: 1 1 auto;
	min-width: 0;
}

.dlb-category-hero__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dlb-ch-eyebrow-color, #006d4c);
	margin-bottom: 12px;
}

.dlb-category-hero__heading {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--dlb-ch-heading-color, #111111);
	margin: 0 0 18px;
}

.dlb-category-hero__desc {
	font-size: 17px;
	line-height: 1.7;
	color: var(--dlb-ch-desc-color, #374151);
	max-width: 640px;
	margin: 0 0 22px;
}

.dlb-category-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}
.dlb-category-hero__feature {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--dlb-ch-feature-bg, #ffffff);
	color: var(--dlb-ch-feature-text, #111111);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	box-shadow: var(--dlb-ch-feature-shadow, 0 2px 8px rgba(17,17,17,.08));
}
.dlb-category-hero__feature svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--dlb-ch-feature-icon, #006d4c);
}

.dlb-category-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.dlb-category-hero__cta-primary,
.dlb-category-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 8px;
	transition: filter .15s ease, background .15s ease, color .15s ease;
}
.dlb-category-hero__cta-primary {
	background: var(--dlb-ch-cta-bg, #fcb900);
	color: var(--dlb-ch-cta-text, #111111);
}
.dlb-category-hero__cta-primary:hover {
	filter: brightness(0.94);
}
.dlb-category-hero__cta-secondary {
	background: transparent;
	color: var(--dlb-ch-cta2-color, #111111);
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.dlb-category-hero__cta-secondary:hover {
	background: rgba(17, 17, 17, .06);
}

.dlb-category-hero__image-wrap {
	flex: 0 0 auto;
	width: clamp(220px, 26vw, 320px);
}
.dlb-category-hero__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--dlb-ch-image-border, #fcb900), 0 20px 40px rgba(17, 17, 17, .12);
}

@media (max-width: 900px) {
	.dlb-category-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}
	.dlb-category-hero--with-image .dlb-category-hero__image-wrap {
		align-self: center;
		width: clamp(180px, 50vw, 240px);
	}
}

@media (max-width: 600px) {
	.dlb-category-hero {
		padding: 40px 18px;
	}
	.dlb-category-hero__desc {
		font-size: 15px;
	}
	.dlb-category-hero__cta-primary,
	.dlb-category-hero__cta-secondary {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ==========================================================================
   Thanh chip danh mục (dưới hero) — thêm 2026-08-30, đối chiếu demo-ui. Đặt
   CSS ở đây (không phải file riêng + enqueue is_page(...)) vì stylesheet này
   đã tự động nạp sẵn ở đúng 4 trang danh mục (nơi block dlb-category-hero-ch92
   xuất hiện), không cần thêm điều kiện enqueue mới. Markup dùng block "Nút"
   (core/buttons) thường — không cần block dlb- riêng cho việc này, xem
   templates/archive-product.html (trang /shop/) đã dùng đúng cách này trước.
   ========================================================================== */
.dlb-cat-chips {
	max-width: var(--dlb-max-width, 1200px);
	margin: 0 auto 32px;
	gap: 10px;
}
.dlb-cat-chip .wp-block-button__link {
	background: #ffffff !important;
	color: #111111 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
}
.dlb-cat-chip .wp-block-button__link:hover {
	border-color: #006d4c !important;
	color: #006d4c !important;
}
.dlb-cat-chip--active .wp-block-button__link {
	background: #006d4c !important;
	color: #ffffff !important;
	border-color: #006d4c !important;
}
.dlb-cat-chip--active .wp-block-button__link:hover {
	color: #ffffff !important;
}

/* Mobile — thêm 2026-09-01 theo yêu cầu người dùng "thu nhỏ phần trên hình
   lại, hiển thị trên cùng 1 hàng": 5 nút với nhãn dài nhất "Chất Làm Mềm Quần
   Áo" KHÔNG thể vừa 1 hàng trong ~390px dù chữ nhỏ tới đâu (đã tính: kể cả cỡ
   chữ rất nhỏ vẫn tràn) — nên thu nhỏ cỡ chữ/đệm TỐI ĐA có thể ĐỌC ĐƯỢC, đồng
   thời ép "flex-wrap:nowrap" (không xuống dòng nữa, đúng "1 hàng" theo yêu
   cầu) + cho cuộn ngang (overflow-x:auto) — mẫu UX chuẩn cho thanh lọc nhiều
   nút trên di động (vuốt ngang xem hết, không cần thấy hết cùng lúc). Nhắm
   đúng ".wp-block-buttons" bên trong (container flex THẬT SỰ chứa 5 nút, khác
   ".dlb-cat-chips" ngoài chỉ bọc 1 con duy nhất là khối buttons đó). */
@media (max-width: 782px) {
	/* Breadcrumb "Trang chủ / Tên danh mục" — thêm 2026-09-01 theo yêu cầu người
	   dùng gửi ảnh "phần đường dẫn nhỏ lại" (đang tràn 2 dòng trên mobile).
	   Nguyên nhân: cỡ chữ "font-size:25px" đặt CỨNG ngay trong style="" của khối
	   (chọn thủ công trong editor lúc dựng trang danh mục ban đầu), không có bản
	   riêng cho di động — 25px quá to nên "Trang chủ /" và tên danh mục không đủ
	   chỗ chung 1 dòng. Style inline có độ ưu tiên rất cao nên phải dùng
	   "!important" mới ghi đè được. Khối này (.wp-block-breadcrumbs KHÔNG có
	   class riêng dlb-) chỉ xuất hiện đúng ở 4 trang danh mục dùng file CSS
	   này — không ảnh hưởng breadcrumb ở trang Sản phẩm/Cửa hàng (dùng class
	   .dlb-sp__breadcrumbs/.dlb-shop__breadcrumbs riêng, file CSS khác). */
	.wp-block-breadcrumbs {
		font-size: 14px !important;
	}
	.dlb-cat-chips {
		margin-bottom: 20px;
	}
	.dlb-cat-chips .wp-block-buttons {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px !important;
		padding-bottom: 2px;
	}
	.dlb-cat-chips .wp-block-buttons::-webkit-scrollbar {
		display: none;
	}
	.dlb-cat-chip {
		flex-shrink: 0;
	}
	.dlb-cat-chip .wp-block-button__link {
		font-size: 12px !important;
		padding: 8px 14px !important;
		white-space: nowrap;
	}

	/* Thu gọn phần giới thiệu danh mục (hero) trên mobile — thêm 2026-09-01 theo
	   yêu cầu người dùng (gửi ảnh, xác nhận qua hỏi lại): tiêu đề+mô tả+3 mục
	   tick+2 nút+ảnh tròn cộng lại quá dài, phải cuộn nhiều mới tới thanh chip/
	   sản phẩm. Riêng tiêu đề dùng "clamp(32px,4vw,48px)" — ở 390px thì 4vw chỉ
	   ~15.6px, luôn bị kẹp về SÀN 32px (giống lỗi clamp() đã gặp ở banner/CTA
	   trước đó, không co lại chút nào trên di động dù nhìn tưởng responsive) —
	   đặt thẳng cỡ nhỏ hơn hẳn cho mobile thay vì dựa vào clamp(). Giảm đều
	   khoảng cách dọc (margin) giữa các phần để cộng dồn lại ngắn hơn nhiều. */
	.dlb-category-hero {
		padding: 28px 18px !important;
	}
	.dlb-category-hero__eyebrow {
		font-size: 11px !important;
		margin-bottom: 6px !important;
	}
	.dlb-category-hero__heading {
		font-size: 24px !important;
		margin: 0 0 8px !important;
	}
	.dlb-category-hero__desc {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin: 0 0 12px !important;
	}
	.dlb-category-hero__features {
		gap: 6px !important;
		margin-bottom: 14px !important;
	}
	.dlb-category-hero__feature {
		font-size: 11px !important;
		padding: 6px 12px !important;
	}
	.dlb-category-hero__feature svg {
		width: 13px !important;
		height: 13px !important;
	}
	.dlb-category-hero__cta {
		gap: 8px !important;
	}
	.dlb-category-hero__cta-primary,
	.dlb-category-hero__cta-secondary {
		font-size: 13px !important;
		padding: 10px 18px !important;
	}
	.dlb-category-hero__inner {
		gap: 14px !important;
	}
	.dlb-category-hero--with-image .dlb-category-hero__image-wrap {
		width: clamp(110px, 30vw, 150px) !important;
	}

	/* THỬ NGHIỆM đã bị HUỶ (2026-09-01) — người dùng yêu cầu "thử trình bày đem
	   ảnh dưới lên bên trái nội dung trên bên phải cùng hàng", đã triển khai
	   thật (flex-direction:row + order:-1 cho ảnh + thu ảnh còn 96px) rồi chụp
	   ảnh gửi xem thử. KẾT QUẢ: ảnh "trôi" lơ lửng giữa đoạn văn (không thẳng
	   hàng đầu với tiêu đề vì ảnh thấp hơn nhiều so với cả khối chữ), và vì chỉ
	   còn ~70% chiều ngang cho chữ nên tiêu đề/mô tả xuống dòng nhiều hơn hẳn —
	   CẢ KHỐI HERO CAO HƠN bản xếp dọc cũ, đi ngược lại chính việc "thu gọn hero
	   mobile" đã làm trước đó theo yêu cầu người dùng. Người dùng xem ảnh xong
	   chọn "Giữ nguyên bản cũ" qua AskUserQuestion — giữ lại đoạn code dưới đây
	   dạng COMMENT (không xoá hẳn) làm bằng chứng đã thử + lý do không dùng,
	   phòng khi có ý tưởng tương tự sau này khỏi thử lại từ đầu.
	.dlb-category-hero__inner {
		flex-direction: row !important;
		align-items: flex-start !important;
	}
	.dlb-category-hero--with-image .dlb-category-hero__image-wrap {
		order: -1;
		width: clamp(72px, 24vw, 96px) !important;
		flex-shrink: 0;
	}
	.dlb-category-hero__info {
		min-width: 0;
	}
	*/

	/* Bố cục mới THAY THẾ (2026-09-01) — người dùng gửi ảnh khoanh + giải thích rõ
	   bằng chữ ngay sau: "3 tab trắng sắp dọc bên trái, bên phải là hình ảnh
	   khoanh đỏ, cân nhau. 2 nút dời xuống dưới cùng. Nội dung bên trên canh đều
	   2 bên vẫn giữ nguyên vậy." — khác hẳn bản THỬ NGHIỆM đã huỷ ở trên (bản đó
	   đảo NGUYÊN KHỐI info+ảnh sang hàng ngang, đẩy chữ vào cột hẹp) — bố cục này
	   CHỈ ghép riêng 3 tick (cột dọc) với ảnh (cùng 1 hàng, cân nhau), còn
	   eyebrow/tiêu đề/mô tả vẫn full-width phía trên như cũ, nút CTA full-width
	   dời hẳn xuống DƯỚI CÙNG — không đụng gì tới phần "giữ nguyên vậy".
	   Dùng CSS Grid trên ".inner" + "display:contents" trên ".info" (làm hộp
	   ".info" biến mất khỏi layout, các con của nó — eyebrow/heading/desc/
	   features/cta — trở thành con TRỰC TIẾP của ".inner", xếp chung lưới với
	   ".image-wrap" vốn là anh em của ".info" chứ không phải con) — kỹ thuật
	   CHUẨN để "nhấc" các phần tử lồng sâu ra xếp lưới chung mà không cần sửa
	   PHP/cấu trúc HTML gốc. */
	.dlb-category-hero__inner {
		display: grid !important;
		/* Đổi cột (2026-09-01, theo yêu cầu tiếp "đổi hình qua trái 3 tab qua
		   phải" ngay sau khi xem bản đầu) — chỉ hoán vị thứ tự 2 cột/2 vùng, mọi
		   phần còn lại (kích thước, canh giữa, "cân nhau") giữ nguyên như đã
		   giải thích ở trên. */
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"eyebrow  eyebrow"
			"heading  heading"
			"desc     desc"
			"image    features"
			"cta      cta";
		column-gap: 16px;
		row-gap: 4px;
	}
	.dlb-category-hero__info {
		display: contents;
	}
	.dlb-category-hero__eyebrow { grid-area: eyebrow; }
	.dlb-category-hero__heading { grid-area: heading; }
	.dlb-category-hero__desc { grid-area: desc; }
	.dlb-category-hero__features {
		grid-area: features;
		/* "3 tab trắng sắp dọc" — đổi từ 2 mục/hàng (flex-wrap cũ) sang XẾP DỌC
		   1 cột, mỗi tick 1 hàng riêng. */
		flex-direction: column !important;
		align-items: flex-start;
		align-self: center;
		margin-bottom: 0 !important;
	}
	.dlb-category-hero__cta {
		grid-area: cta;
		margin-top: 14px;
	}
	.dlb-category-hero--with-image .dlb-category-hero__image-wrap {
		grid-area: image;
		/* "Cân nhau" — canh giữa ảnh theo chiều dọc trong đúng hàng chung với cột
		   tick (hàng grid tự cao bằng phần tử cao nhất trong 2 bên), KHÔNG kéo
		   giãn ảnh tròn theo chiều cao cột chữ (sẽ méo hình vì ảnh có
		   aspect-ratio:1/1 cố định) — align-self:center giữ đúng tỉ lệ tròn, chỉ
		   nằm cân đối ở giữa theo chiều dọc so với cột tick bên cạnh. */
		align-self: center;
		width: clamp(96px, 30vw, 130px) !important;
	}
}