/**
 * DS Elements — Hero danh mục sản phẩm
 *
 * Ảnh nền nằm ở lớp riêng (.ds-hero__bg) chứ không phải background của section:
 * lớp phủ gradient là ::after của cùng phần tử đó, nên đổi vị trí ảnh hay độ phủ
 * không đụng gì tới nội dung bên trên. Chữ nằm ở z-index cao hơn cả hai.
 *
 * Mọi thuộc tính chỉnh được trong tab Style đều viết dạng
 *   var(--ds-hero-X, var(--ds-token))
 * Control để trống thì biến không được set và token quyết định.
 */

.elementor-widget-ds-archive-hero {
	width: 100%;
	min-width: 0;
}

.ds-hero {
	position: relative;
	width: 100%;
	min-width: 0;
	isolation: isolate;

	--ds-hero-min-height: 560px;
	--ds-hero-pad-y: var(--ds-space-16);
	--ds-hero-content-width: 52%;
	--ds-hero-feat-cols: 3;
	--ds-hero-stats-cols: 5;

	/* Gradient phủ: đặc tới mốc solid, tan hết ở mốc fade. */
	--ds-hero-overlay-solid: 42%;
	--ds-hero-overlay-fade: 78%;

	background: var(--ds-hero-overlay, var(--ds-color-brand));
}

.ds-hero *,
.ds-hero *::before,
.ds-hero *::after {
	box-sizing: border-box;
}

/* --- Ảnh nền + lớp phủ -------------------------------------------------- */

.ds-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Phủ từ trái sang: che kín vùng chữ rồi tan dần để lộ ảnh bên phải. */
.ds-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--ds-hero-overlay, var(--ds-color-brand)) 0,
		var(--ds-hero-overlay, var(--ds-color-brand)) var(--ds-hero-overlay-solid),
		transparent var(--ds-hero-overlay-fade)
	);
}

/* --- Khung nội dung ----------------------------------------------------- */

.ds-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ds-max-width);
	min-height: var(--ds-hero-min-height);
	margin: 0 auto;
	padding: var(--ds-hero-pad-y) var(--ds-gutter);

	display: flex;
	align-items: center;
}

.ds-hero__content {
	width: var(--ds-hero-content-width);
	min-width: 0;
}

/* --- Tiêu đề ------------------------------------------------------------ */

.ds-hero__title {
	margin: 0;
	color: var(--ds-hero-title-color, var(--ds-color-white));
	font-size: var(--ds-fs-h1);
	font-weight: var(--ds-fw-black);
	line-height: var(--ds-lh-h1);
	text-transform: uppercase;
}

/* Có dòng trên thì hai phần xếp thành hai dòng riêng, phần tên tô màu nhấn —
   "ĐỒNG PHỤC" trắng ở trên, "QUÁN CAFE" vàng ở dưới. */
.ds-hero__title-prefix,
.ds-hero__title-main {
	display: block;
}

.ds-hero__title-main {
	color: var(--ds-hero-title-accent, var(--ds-color-accent));
}

.ds-hero__tagline {
	margin: var(--ds-space-4) 0 0;
	color: var(--ds-hero-tagline-color, var(--ds-color-accent));
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-regular);
	font-style: italic;
	line-height: var(--ds-lh-h3);
}

/* --- Tính năng ---------------------------------------------------------- */

.ds-hero__features {
	margin: var(--ds-space-8) 0 0;
	padding: 0;
	list-style: none;

	display: grid;
	grid-template-columns: repeat(var(--ds-hero-feat-cols), minmax(0, auto));
	justify-content: start;
	gap: var(--ds-space-4) var(--ds-space-8);
}

.ds-hero__feature {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	min-width: 0;

	color: var(--ds-hero-feat-color, var(--ds-color-white));
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-small);
}

.ds-hero__feature-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--ds-hero-feat-icon-color, var(--ds-color-white));
}

.ds-hero__feature-icon svg {
	width: 22px;
	height: 22px;
	display: block;

	/* Elementor in icon ra dạng SVG. Không khai fill thì nó lấy fill mặc định
	   của SVG là ĐEN, mặc kệ color của khối bọc — icon đen thui trên nền navy.
	   Mọi widget khác trong bộ đều có dòng này, riêng hero sót. */
	fill: currentColor;
}

/* Dấu tích mặc định do widget tự vẽ là NÉT VIỀN, không phải hình đặc.
   fill="none" viết thẳng trên thẻ <svg> chỉ là "presentation attribute" — thứ
   nằm dưới đáy thứ tự ưu tiên và THUA mọi rule CSS, kể cả rule một lớp. Nên
   quy tắc fill: currentColor ở trên (thêm vào để icon Font Awesome của
   Elementor khỏi đen thui) tô đặc luôn khung vuông: ô trắng kín trên nền navy,
   dấu tích trắng trên nền trắng nên tàng hình.
   Phải trừ ra bằng CSS, không trông cậy được vào thuộc tính trên thẻ.
   Specificity .ds-hero__feature-icon .ds-hero__check (0,2,0) hơn
   .ds-hero__feature-icon svg (0,1,1), khỏi cần !important. */
.ds-hero__feature-icon .ds-hero__check {
	fill: none;
	stroke: currentColor;
}

.ds-hero__feature-icon i {
	font-size: 18px;
	line-height: 1;
}

/* --- Nút ---------------------------------------------------------------- */

.ds-hero__actions {
	margin-top: var(--ds-space-8);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-4);
}

.ds-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ds-space-4) var(--ds-space-8);
	min-width: 200px;

	border: 1px solid transparent;
	border-radius: var(--ds-hero-btn-radius, var(--ds-radius-sm));

	font-size: var(--ds-fs-button);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-button);
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
	text-decoration: none;

	transition: background var(--ds-transition), color var(--ds-transition),
		border-color var(--ds-transition);
}

.ds-hero__btn--primary {
	background: var(--ds-hero-btn1-bg, var(--ds-color-accent));
	color: var(--ds-hero-btn1-color, var(--ds-color-white));
}

.ds-hero__btn--primary:hover {
	background: var(--ds-color-accent-dark);
	color: var(--ds-hero-btn1-color, var(--ds-color-white));
}

.ds-hero__btn--secondary {
	background: var(--ds-hero-btn2-bg, var(--ds-color-white));
	color: var(--ds-hero-btn2-color, var(--ds-color-brand));
}

.ds-hero__btn--secondary:hover {
	background: var(--ds-hero-btn2-bg, var(--ds-color-white));
	color: var(--ds-color-brand-light);
}

.ds-hero__btn:focus-visible {
	outline: 2px solid var(--ds-color-white);
	outline-offset: 3px;
}

/* --- Cụm chứng thực ----------------------------------------------------- */

.ds-hero__proof {
	margin-top: var(--ds-space-8);
	display: flex;
	align-items: center;
	gap: var(--ds-space-4);
}

/* Ảnh chồng mép nhau: margin âm trên mọi ảnh trừ ảnh đầu. */
.ds-hero__avatars {
	display: flex;
	flex: 0 0 auto;
}

.ds-hero__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--ds-radius-pill);
	border: 2px solid var(--ds-color-white);
	object-fit: cover;
	background: var(--ds-color-surface);
}

.ds-hero__avatar + .ds-hero__avatar {
	margin-left: -14px;
}

.ds-hero__proof-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-hero__proof-number {
	color: var(--ds-color-white);
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-hero__proof-caption {
	color: var(--ds-color-on-dark-muted);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Dải chỉ số --------------------------------------------------------- */

.ds-hero__stats {
	position: relative;
	z-index: 1;
	background: var(--ds-hero-stats-bg, var(--ds-color-brand));
}

.ds-hero__stats-inner {
	max-width: var(--ds-max-width);
	margin: 0 auto;
	padding: var(--ds-space-6) var(--ds-gutter);

	display: grid;
	grid-template-columns: repeat(var(--ds-hero-stats-cols), minmax(0, 1fr));
	gap: var(--ds-space-6);
}

.ds-hero__stat {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	min-width: 0;
}

.ds-hero__stat-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--ds-hero-stat-icon-color, var(--ds-color-white));
}

.ds-hero__stat-icon svg {
	width: var(--ds-hero-stat-icon-size, 32px);
	height: var(--ds-hero-stat-icon-size, 32px);
	display: block;
	fill: currentColor;
}

.ds-hero__stat-icon i {
	font-size: var(--ds-hero-stat-icon-size, 32px);
	line-height: 1;
}

.ds-hero__stat-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-hero__stat-value {
	color: var(--ds-hero-stat-value-color, var(--ds-color-white));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-hero__stat-label {
	color: var(--ds-hero-stat-label-color, var(--ds-color-on-dark-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ds-hero {
		--ds-hero-min-height: 460px;
		--ds-hero-content-width: 68%;
		/* Ảnh lùi hẳn ra sau: cột chữ rộng ra thì vùng lộ ảnh không còn đủ. */
		--ds-hero-overlay-solid: 62%;
		--ds-hero-overlay-fade: 96%;
	}
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
	.ds-hero {
		--ds-hero-min-height: 0px;
		--ds-hero-pad-y: var(--ds-space-12);
		--ds-hero-content-width: 100%;
		/* Không còn chỗ để khoe ảnh cạnh chữ — phủ kín, ảnh làm nền mờ. */
		--ds-hero-overlay-solid: 100%;
		--ds-hero-overlay-fade: 100%;
	}

	.ds-hero__bg::after {
		/* Phủ kín nhưng chừa lại chút ảnh, nếu không nền thành một mảng navy phẳng. */
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--ds-hero-overlay, var(--ds-color-brand)) 88%, transparent) 0,
			var(--ds-hero-overlay, var(--ds-color-brand)) 100%
		);
	}

	.ds-hero__tagline {
		font-size: var(--ds-fs-h4);
	}

	.ds-hero__btn {
		flex: 1 1 100%;
		min-width: 0;
	}
}