/* Hero trang chủ: chỉ đổi kiểu chữ cho giống hero trang /offers/, giữ nguyên nội dung + slider */
body.home #content > .section:first-of-type {
	--hh-gold: var(--cb-gold);
}

/* Nền đen ấm + viền vàng nâu phía dưới */
body.home #content > .section:first-of-type .section-bg {
	background-color: var(--cb-black) !important;
}
body.home #content > .section:first-of-type {
	border-bottom: 3px solid var(--hh-gold);
}

/* Tiêu đề */
body.home #content > .section:first-of-type h1 {
	margin: 0 0 18px;
	max-width: 560px;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.15 !important; /* h1 có data-line-height="xs" của Flatsome (.85 !important) */
	letter-spacing: .35px;
	text-transform: uppercase;
	color: #fff;
}

/* Mô tả */
body.home #content > .section:first-of-type .hero-subheading {
	margin: 0 0 28px;
	max-width: 480px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .75) !important;
}
body.home #content > .section:first-of-type .hero-subheading strong {
	font-weight: 700;
	color: var(--hh-gold);
}

/* Nút */
body.home #content > .section:first-of-type .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0 10px 10px 0;
	padding: 0 28px !important;
	border: 2px solid var(--hh-gold);
	border-radius: 0;
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	transition: background .2s, color .2s, border-color .2s;
}
body.home #content > .section:first-of-type .button.secondary {
	background: var(--hh-gold);
	color: var(--cb-black);
}
body.home #content > .section:first-of-type .button.secondary:hover {
	background: transparent;
	color: var(--hh-gold);
}
body.home #content > .section:first-of-type .button.is-outline {
	background: transparent;
	border-color: var(--cb-cream);
	color: var(--cb-cream);
}
body.home #content > .section:first-of-type .button.is-outline:hover {
	background: var(--cb-cream);
	border-color: var(--cb-cream);
	color: var(--cb-black);
}
body.home #content > .section:first-of-type .button i {
	margin: 0;
	font-size: 1.1em;
	top: 0;
}

@media (max-width: 849px) {
	body.home #content > .section:first-of-type h1 {
		max-width: 100%;
		font-size: 30px;
		line-height: 1.15 !important;
		letter-spacing: .1px;
	}
	body.home #content > .section:first-of-type .hero-subheading {
		max-width: 100%;
		margin-bottom: 22px;
		font-size: 15px;
	}
}

@media (max-width: 549px) {
	body.home #content > .section:first-of-type .button {
		min-height: 44px;
		padding: 0 20px !important;
		font-size: 12px;
	}
}

/* =========================================================================
 * Split hero (khung ảnh kiểu Hyo Silver, phương án B): cả khối trong container của theme – chữ trái
 * (thẳng logo) · khung ảnh 785:685 rộng 50% + 100px (+ tràn phải tối đa 160px), thẳng mép phải container, cách trên 96px, lấn xuống section dưới 100px (kiểu Hyo). Dưới 1200px: chữ trên, ảnh dưới
 * (thụt trái 20px, lấn 32px).
 * ====================================================================== */
@media (min-width: 1200px) {
	body.home #content > .section:first-of-type {
		padding: 0 !important;
	}
	/* Cả khối nằm trong container của theme (như Hyo): chữ thẳng logo, ảnh thẳng icon giỏ hàng */
	body.home #content > .section:first-of-type > .section-content > .row {
		max-width: var(--punchy-container, 1280px) !important;
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
	}

	/* Cột chữ */
	body.home #content > .section:first-of-type > .section-content > .row > .col:first-child {
		display: flex;
		flex: 0 0 calc(50% - 100px);
		max-width: calc(50% - 100px);
		align-items: center;
		padding: 24px 40px 24px 0 !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:first-child > .col-inner {
		max-width: 540px;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Cột ảnh (như Hyo Silver): khung vuông 1:1, cách trên 40px,
	   sát mép phải, lấn xuống section dưới 64px */
	body.home #content > .section:first-of-type > .section-content > .row > .col:last-child > .col-inner {
		container-type: inline-size; /* để tính chiều cao ảnh theo bề ngang cột (cqw) */
	}
	/* Ảnh tràn tới mép màn hình: cắt phần thừa theo chiều ngang, vẫn cho lấn xuống section dưới */
	body.home #content > .section:first-of-type {
		overflow-x: clip !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:last-child {
		flex: 0 0 calc(50% + 100px);
		max-width: calc(50% + 100px);
		align-self: flex-start !important;
		padding: 96px 0 0 !important;
	}
	body.home #content > .section:first-of-type .slider-wrapper {
		/* Tràn ra ngoài mép phải container tối đa 160px; màn hẹp thì chạm sát mép màn hình (phần thừa bị cắt) */
		--hh-bleed: min(160px, max(0px, (100vw - var(--punchy-container, 1280px)) / 2 + 15px));
		/* Chiều cao cố định theo bề ngang cũ (cột + 60px) → tăng bề ngang không làm ảnh cao thêm */
		aspect-ratio: auto;
		height: calc((100cqw + 60px) * 685 / 785) !important;
		width: calc(100% + var(--hh-bleed));
		margin-left: 0 !important;
		margin-right: calc(-1 * var(--hh-bleed)) !important;
		margin-bottom: -100px !important; /* nền tối ngắn lại, ảnh lấn xuống section dưới ~100px */
		z-index: 5;
	}
	/* Section kế tiếp chừa chỗ cho phần ảnh lấn xuống */
	body.home #content > .section:first-of-type + .section {
		position: relative;
		z-index: 1;
		padding-top: 124px !important;
	}
	body.home #content > .section:first-of-type,
	body.home #content > .section:first-of-type > .section-content,
	body.home #content > .section:first-of-type > .section-content > .row,
	body.home #content > .section:first-of-type > .section-content > .row > .col,
	body.home #content > .section:first-of-type > .section-content > .row > .col > .col-inner {
		overflow: visible !important;
	}
	body.home #content > .section:first-of-type {
		z-index: 3;
	}

	body.home #content > .section:first-of-type .slider,
	body.home #content > .section:first-of-type .flickity-viewport,
	body.home #content > .section:first-of-type .flickity-slider,
	body.home #content > .section:first-of-type .flickity-slider > .img {
		height: 100% !important;
	}
}

/* Ảnh lấp đầy khung (cả desktop và mobile) */
body.home #content > .section:first-of-type .slider-wrapper {
	position: relative;
	margin: 0;
	overflow: hidden;
}
body.home #content > .section:first-of-type .flickity-slider > .img {
	width: 100%;
	margin: 0;
}
body.home #content > .section:first-of-type .flickity-slider > .img .img-inner {
	height: 100%;
	padding-top: 0 !important;
}
body.home #content > .section:first-of-type .flickity-slider > .img .img-inner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ẩn chấm điều hướng của slider (ảnh tự chuyển, vẫn vuốt được trên điện thoại) */
body.home #content > .section:first-of-type .flickity-page-dots {
	display: none !important;
}

/* Mobile: chữ trên, ảnh dưới (thụt trái 20px, sát mép phải), nút full chiều ngang */
@media (max-width: 1199px) {
	/* Tablet + mobile: xếp chồng, mỗi cột full chiều ngang */
	body.home #content > .section:first-of-type > .section-content > .row > .col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	body.home #content > .section:first-of-type {
		padding: 0 !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:last-child {
		order: 2;
		padding: 0 15px 36px !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:first-child {
		order: 1;
		padding: 32px 15px 24px !important;
	}
	body.home #content > .section:first-of-type .slider-wrapper {
		aspect-ratio: 1 / 1;
		z-index: 5;
	}
	body.home #content > .section:first-of-type,
	body.home #content > .section:first-of-type > .section-content,
	body.home #content > .section:first-of-type > .section-content > .row,
	body.home #content > .section:first-of-type > .section-content > .row > .col,
	body.home #content > .section:first-of-type > .section-content > .row > .col > .col-inner {
		overflow: visible !important;
	}
	body.home #content > .section:first-of-type {
		position: relative;
		z-index: 3;
	}

	body.home #content > .section:first-of-type .slider,
	body.home #content > .section:first-of-type .flickity-viewport,
	body.home #content > .section:first-of-type .flickity-slider,
	body.home #content > .section:first-of-type .flickity-slider > .img {
		height: 100% !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:first-child > .col-inner {
		margin: 0 !important;
		padding: 0 !important;
	}
	body.home #content > .section:first-of-type .row .row .col-inner {
		margin: 0 !important;
	}
	body.home #content > .section:first-of-type .row .row > .col {
		padding-bottom: 0 !important;
	}
}

/* Tablet (550–1199px): chữ và ảnh thẳng lề logo (15px) */
@media (min-width: 550px) and (max-width: 1199px) {
	body.home #content > .section:first-of-type > .section-content > .row > .col:first-child {
		padding: 40px 15px 28px !important;
	}
	body.home #content > .section:first-of-type > .section-content > .row > .col:last-child {
		padding: 0 15px 44px !important;
	}
	body.home #content > .section:first-of-type .slider-wrapper {
		max-width: 560px;
	}
}

/* Điện thoại: nút full chiều ngang */
@media (max-width: 549px) {
	body.home #content > .section:first-of-type .button {
		display: flex;
		width: 100%;
		margin: 0 0 10px !important;
	}
}

/* =========================================================================
 * Section "Real Moments in the Arena" – bố cục hiện đại (nội dung giữ nguyên):
 * nền kem phẳng · tiêu đề + mô tả trái, 2 nút phải · lưới ảnh 3×2 đều, khe 12px.
 * ====================================================================== */
body.home #content > .section:first-of-type + .section {
	padding-bottom: 72px !important;
}
body.home #content > .section:first-of-type + .section > .section-bg {
	background-color: var(--cb-cream) !important;
}
body.home #content > .section:first-of-type + .section > .section-bg .section-bg-overlay {
	display: none;
}
body.home #content > .section:first-of-type + .section > .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title actions"
		"text actions"
		"gallery gallery";
	align-items: end;
	column-gap: 32px;
	max-width: var(--punchy-container, 1280px);
	margin: 0 auto;
	padding: 0 15px;
}

/* Tiêu đề: căn trái, bỏ 2 đường kẻ */
body.home #content > .section:first-of-type + .section .section-title-container {
	grid-area: title;
	max-width: none;
	margin: 0 0 8px !important;
	padding: 0;
}
body.home #content > .section:first-of-type + .section .section-title {
	justify-content: flex-start !important;
	margin: 0;
	text-align: left;
}
body.home #content > .section:first-of-type + .section .section-title b {
	display: none;
}
body.home #content > .section:first-of-type + .section .section-title-main {
	margin: 0;
	padding: 0;
	text-align: left !important;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--cb-black);
}

/* Mô tả */
body.home #content > .section:first-of-type + .section > .section-content > .text {
	grid-area: text;
	text-align: left !important;
}
body.home #content > .section:first-of-type + .section > .section-content > .text p {
	max-width: 620px;
	margin: 0;
	font-size: 16px;
	color: var(--cb-muted);
}

/* 2 nút: cùng hàng, bên phải */
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type {
	grid-area: actions;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end !important;
	gap: 20px;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 0;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type > .col {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type .col-inner {
	text-align: left !important;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type .button {
	margin: 0 !important;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type .button.expand {
	display: inline-flex;
	width: auto;
	min-height: 48px;
	padding: 0 28px !important;
	align-items: center;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type .button.is-underline {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-black) !important;
}

/* Lưới ảnh 3×2 */
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) {
	grid-area: gallery;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: none;
	margin: 36px 0 0 !important;
	padding: 0;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) > .col {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
	position: static !important;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .gallery-box {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--cb-black);
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .box-image {
	position: absolute;
	inset: 0;
	height: 100%;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .gallery-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 22, 18, .65), rgba(26, 22, 18, 0) 55%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
/* Icon phóng to */
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .gallery-box::before {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cb-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231a1612' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:hover .box-image img,
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:focus-visible .box-image img {
	transform: scale(1.06);
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:hover .gallery-box::after,
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:hover .gallery-box::before,
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:focus-visible .gallery-box::after,
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:focus-visible .gallery-box::before {
	opacity: 1;
	transform: none;
}
/* Chú thích ảnh: chỉ hiện khi rê chuột, góc dưới trái */
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .box-text {
	position: absolute;
	left: 16px;
	right: 64px;
	bottom: 14px;
	z-index: 2;
	padding: 0 !important;
	background: none !important;
	text-align: left !important;
	opacity: 0;
	transition: opacity .3s ease;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .box-text p {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}
body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) a:hover .box-text {
	opacity: 1;
}

/* Tablet + mobile */
@media (max-width: 849px) {
	body.home #content > .section:first-of-type + .section {
		padding-bottom: 48px !important;
	}
	body.home #content > .section:first-of-type + .section > .section-content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"text"
			"actions"
			"gallery";
	}
	body.home #content > .section:first-of-type + .section > .section-content > .row:last-of-type {
		justify-content: flex-start !important;
		margin-top: 20px !important;
	}
	body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 28px !important;
	}
	body.home #content > .section:first-of-type + .section > .section-content > .row:not(:last-of-type) .gallery-box::before {
		display: none;
	}
}

/* =========================================================================
 * Section "Our Custom Process" – nền tối, timeline 4 bước + nút "Start Your Custom Order":
 * tiêu đề trái (hiện cả mobile) · icon trong vòng tròn kem nối bằng đường tan ·
 * mô tả dễ đọc (line-height 1.6). Mobile: timeline dọc.
 * ====================================================================== */
body.home #content > .section:has(.process-step-number) {
	--proc-bg: var(--cb-black);
	padding: 80px 0 72px !important;
}
body.home #content > .section:has(.process-step-number) > .section-bg {
	background-color: var(--proc-bg) !important;
}
body.home #content > .section:has(.process-step-number) > .section-bg .section-bg-overlay {
	display: none;
}
body.home #content > .section:has(.process-step-number) > .section-content {
	max-width: var(--punchy-container, 1280px);
	margin: 0 auto;
	padding: 0 15px;
}
/* Tiêu đề */
body.home #content > .section:has(.process-step-number) > .section-content > .text {
	display: block !important;
	margin: 0 0 44px;
	text-align: left !important;
}
body.home #content > .section:has(.process-step-number) > .section-content > .text h2 {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
}

/* Hàng 4 bước */
body.home #content > .section:has(.process-step-number) .row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}
/* Đường nối các vòng tròn */
body.home #content > .section:has(.process-step-number) .row::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 32px;
	right: 0;
	height: 2px;
	background: var(--cb-gold);
	z-index: 0;
}
body.home #content > .section:has(.process-step-number) .row > .col {
	position: relative;
	z-index: 1;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.process-step-number) .row > .col > .col-inner {
	padding: 0 !important;
}
body.home #content > .section:has(.process-step-number) .row > .col::before,
body.home #content > .section:has(.process-step-number) .row > .col::after {
	display: none !important;
}

/* Icon trong vòng tròn + nhãn STEP */
body.home #content > .section:has(.process-step-number) .process-step-number {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .16em !important;
	line-height: 1 !important;
	text-transform: uppercase;
	color: var(--cb-gold) !important;
}
body.home #content > .section:has(.process-step-number) .process-step-number img {
	flex: none;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	padding: 15px;
	border-radius: 50%;
	background: var(--cb-cream);
	box-shadow: 0 0 0 6px var(--proc-bg);
	object-fit: contain;
}
/* Nền trắng sau nhãn để che đường nối */
body.home #content > .section:has(.process-step-number) .process-step-number {
	width: max-content;
	padding-right: 12px;
	background: var(--proc-bg);
}

body.home #content > .section:has(.process-step-number) .col h3 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
body.home #content > .section:has(.process-step-number) .col p:not(.process-step-number) {
	margin: 0 0 10px;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, .72) !important;
}
body.home #content > .section:has(.process-step-number) .col p strong {
	font-weight: 700;
	color: #fff;
}
body.home #content > .section:has(.process-step-number) .col p a {
	color: var(--cb-gold);
}
body.home #content > .section:has(.process-step-number) .col p a strong {
	color: var(--cb-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Nút "Start Your Custom Order" */
body.home #content > .section:has(.process-step-number) .process-cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	margin: 20px 0 0 !important;
	padding: 0 32px !important;
	border-radius: 0;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}
body.home #content > .section:has(.process-step-number) .process-cta::after {
	content: "→";
	margin-left: 12px;
	font-size: 16px;
	letter-spacing: 0;
	transition: transform .2s;
}
body.home #content > .section:has(.process-step-number) .process-cta:hover::after {
	transform: translateX(4px);
}

/* Tablet: 2 × 2, bỏ đường nối ngang */
@media (max-width: 1199px) {
	body.home #content > .section:has(.process-step-number) .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 40px;
	}
	body.home #content > .section:has(.process-step-number) .row::before {
		display: none;
	}
}

/* Mobile: timeline dọc – vòng tròn bên trái, đường nối dọc */
@media (max-width: 549px) {
	body.home #content > .section:has(.process-step-number) {
		padding: 56px 0 !important;
	}
	body.home #content > .section:has(.process-step-number) > .section-content > .text {
		margin-bottom: 32px;
	}
	body.home #content > .section:has(.process-step-number) .row {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	body.home #content > .section:has(.process-step-number) .row > .col > .col-inner {
		position: relative;
		padding-left: 84px !important;
		min-height: 64px;
	}
	/* Đoạn nối dọc từ vòng tròn này xuống vòng tròn kế tiếp */
	body.home #content > .section:has(.process-step-number) .row > .col:not(:last-child) > .col-inner::before {
		content: "";
		position: absolute;
		top: 70px;
		bottom: -26px;
		left: 31px;
		width: 2px;
		background: var(--cb-gold);
	}
	body.home #content > .section:has(.process-step-number) .process-step-number {
		min-height: 64px;
		margin-bottom: 4px !important;
		background: none;
	}
	body.home #content > .section:has(.process-step-number) .process-step-number img {
		position: absolute;
		top: 0;
		left: 0;
	}
	body.home #content > .section:has(.process-step-number) .col h3 {
		font-size: 18px;
	}
	body.home #content > .section:has(.process-step-number) .process-cta {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 12px !important;
	}
}

/* -------------------------------------------------------------------------
 * "Our Custom Process" – bản gọn: tiêu đề + nút cùng hàng, icon/chữ nhỏ hơn.
 * (ghi đè các rule phía trên)
 * ---------------------------------------------------------------------- */
body.home #content > .section:has(.process-step-number) {
	padding: 64px 0 28px !important;
}
/* Giữ cụm chữ in đậm trên 1 dòng (vd. "approximately 4–5 weeks") */
body.home #content > .section:has(.process-step-number) .col p strong {
	white-space: nowrap;
}
body.home #content > .section:has(.process-step-number) > .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title cta"
		"steps steps";
	align-items: center;
	column-gap: 32px;
}
body.home #content > .section:has(.process-step-number) > .section-content > .text {
	grid-area: title;
	margin: 0 0 36px;
}
body.home #content > .section:has(.process-step-number) > .section-content > .row {
	grid-area: steps;
	gap: 32px;
}
body.home #content > .section:has(.process-step-number) > .section-content > .process-cta {
	grid-area: cta;
	align-self: start;
	margin: 0 0 36px !important;
}
body.home #content > .section:has(.process-step-number) .row::before {
	top: 26px;
	left: 26px;
}
body.home #content > .section:has(.process-step-number) .process-step-number {
	gap: 12px;
	margin-bottom: 16px !important;
	font-size: 11px !important;
}
body.home #content > .section:has(.process-step-number) .process-step-number img {
	width: 52px !important;
	height: 52px !important;
	padding: 12px;
	box-shadow: 0 0 0 5px var(--proc-bg);
}
body.home #content > .section:has(.process-step-number) .col h3 {
	margin-bottom: 8px;
	font-size: 18px;
}
body.home #content > .section:has(.process-step-number) .col p:not(.process-step-number) {
	margin-bottom: 6px;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

@media (max-width: 849px) {
	body.home #content > .section:has(.process-step-number) > .section-content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"steps"
			"cta";
	}
	body.home #content > .section:has(.process-step-number) > .section-content > .process-cta {
		margin: 28px 0 0 !important;
	}
}
@media (max-width: 549px) {
	body.home #content > .section:has(.process-step-number) {
		padding: 48px 0 !important;
	}
	body.home #content > .section:has(.process-step-number) > .section-content > .text {
		margin-bottom: 28px;
	}
	body.home #content > .section:has(.process-step-number) .row {
		gap: 24px;
	}
	body.home #content > .section:has(.process-step-number) .row > .col > .col-inner {
		padding-left: 68px !important;
		min-height: 52px;
	}
	body.home #content > .section:has(.process-step-number) .process-step-number {
		min-height: 52px;
		margin-bottom: 0 !important;
	}
	body.home #content > .section:has(.process-step-number) .row > .col:not(:last-child) > .col-inner::before {
		top: 58px;
		bottom: -18px;
		left: 25px;
	}
	body.home #content > .section:has(.process-step-number) .col h3 {
		font-size: 17px;
	}
}

/* =========================================================================
 * Section trang sức (tab Jewelry) – bố cục hiện đại, nội dung giữ nguyên:
 * nền kem · tiêu đề trái + tab ngang dạng pill bên phải · lưới 4 sản phẩm thẻ sạch.
 * ====================================================================== */
body.home #content > .section:has(.tabbed-content) {
	padding: 72px 0 64px !important;
}
body.home #content > .section:has(.tabbed-content) > .section-bg {
	background-color: var(--cb-cream) !important;
}
body.home #content > .section:has(.tabbed-content) > .section-bg .section-bg-overlay {
	display: none;
}
/* Bỏ khối trắng + viền cột cũ */
body.home #content > .section:has(.tabbed-content) .section-content > .row {
	max-width: var(--punchy-container, 1280px) !important;
	margin: 0 auto !important;
	padding: 0 15px;
}
body.home #content > .section:has(.tabbed-content) .section-content > .row > .col {
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .section-content > .row > .col::before,
body.home #content > .section:has(.tabbed-content) .section-content > .row > .col::after {
	display: none !important;
}
body.home #content > .section:has(.tabbed-content) .section-content > .row > .col > .col-inner {
	padding: 0 !important;
	background: transparent !important;
	text-align: left !important;
}

/* Tiêu đề + tab cùng hàng */
body.home #content > .section:has(.tabbed-content) .tabbed-content {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"title tabs"
		"panels panels";
	align-items: center;
	column-gap: 32px;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > h4 {
	grid-area: title;
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--cb-black);
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav {
	grid-area: tabs;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 1px solid var(--cb-line) !important;
	border-radius: 999px;
	background: #fff !important;
	color: var(--cb-black) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background .2s, color .2s, border-color .2s;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li > a::before,
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li > a::after,
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li::before {
	display: none !important;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li > a:hover {
	border-color: var(--cb-black) !important;
}
body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li.active > a {
	background: var(--cb-black) !important;
	border-color: var(--cb-black) !important;
	color: var(--cb-gold) !important;
}

/* Khu sản phẩm */
body.home #content > .section:has(.tabbed-content) .tab-panels {
	grid-area: panels;
	float: none !important;
	width: 100% !important;
	margin: 32px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .panel {
	padding: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels {
	background: transparent !important;
}
/* Bỏ viền cột kiểu "solid" của Flatsome trên từng thẻ sản phẩm */
body.home #content > .section:has(.tabbed-content) .tab-panels .product-small.col::before,
body.home #content > .section:has(.tabbed-content) .tab-panels .product-small.col::after {
	display: none !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .product-small.col {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	border: 0 !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .product-small.col > .col-inner {
	height: 100%;
	background: #fff;
	transition: box-shadow .25s ease, transform .25s ease;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .product-small.col > .col-inner:hover {
	box-shadow: 0 14px 30px rgba(26, 22, 18, .1);
	transform: translateY(-3px);
}
body.home #content > .section:has(.tabbed-content) .tab-panels .box-image {
	aspect-ratio: 1 / 1;
	background: #fff;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .box-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .box-text {
	padding: 4px 18px 20px !important;
	text-align: left !important;
	border-top: 1px solid var(--cb-line);
	padding-top: 14px !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .product-title,
body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cb-black);
}
body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .price,
body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .price .amount {
	font-size: 15px;
	font-weight: 400 !important;
	color: var(--cb-muted) !important;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .product-sku {
	display: none;
}

/* "View All" dưới lưới, căn phải, có mũi tên */
body.home #content > .section:has(.tabbed-content) .tab-panels .stack {
	justify-content: flex-end !important;
	margin-top: 20px;
}
body.home #content > .section:has(.tabbed-content) .tab-panels .stack .button {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cb-black) !important;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--cb-gold);
}
body.home #content > .section:has(.tabbed-content) .tab-panels .stack .button::after {
	content: " →";
}
body.home #content > .section:has(.tabbed-content) .tab-panels .stack .button::before {
	display: none !important;
}

@media (max-width: 1023px) {
	body.home #content > .section:has(.tabbed-content) .tab-panels .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 849px) {
	body.home #content > .section:has(.tabbed-content) .tabbed-content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"tabs"
			"panels";
	}
	/* Tab: 1 hàng cuộn ngang */
	body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 20px -15px 0 !important;
		padding: 0 15px 4px !important;
		overflow-x: auto;
		scrollbar-width: none;
	}
	body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav::-webkit-scrollbar {
		display: none;
	}
	body.home #content > .section:has(.tabbed-content) .tabbed-content > .nav > li {
		flex: none;
	}
	body.home #content > .section:has(.tabbed-content) .tab-panels {
		margin-top: 20px !important;
	}
}
@media (max-width: 549px) {
	body.home #content > .section:has(.tabbed-content) {
		padding: 48px 0 44px !important;
	}
	body.home #content > .section:has(.tabbed-content) .tab-panels .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body.home #content > .section:has(.tabbed-content) .tab-panels .box-image img {
		padding: 10px;
	}
	body.home #content > .section:has(.tabbed-content) .tab-panels .box-text {
		padding: 12px 12px 14px !important;
	}
	body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .product-title,
	body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .name,
	body.home #content > .section:has(.tabbed-content) .tab-panels .box-text .price {
		font-size: 14px;
	}
}

/* =========================================================================
 * Section "Custom Jewelry" (thay banner Personalized Bracelets):
 * nền tối · lưới 2×2 ảnh mẫu trái · chữ + 2 nút phải.
 * Nút "View Designs" tự ẩn khi chưa điền link app (link="#").
 * ====================================================================== */
body.home .custom-jewelry-section {
	padding: 80px 0 !important;
}
body.home .custom-jewelry-section > .section-bg {
	background-color: var(--cb-black) !important;
}
body.home .custom-jewelry-section > .section-content > .row {
	max-width: var(--punchy-container, 1280px) !important;
	margin: 0 auto !important;
	padding: 0 15px;
	align-items: center;
}
body.home .custom-jewelry-section .cj-media {
	padding: 0 32px 0 0 !important;
}
body.home .custom-jewelry-section .cj-text {
	padding: 0 0 0 32px !important;
}
body.home .custom-jewelry-section .cj-media .row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 !important;
}
body.home .custom-jewelry-section .cj-media .row > .col {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
}
body.home .custom-jewelry-section .cj-media .gallery-box {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
}
body.home .custom-jewelry-section .cj-media .box-image {
	height: 100%;
}
body.home .custom-jewelry-section .cj-media .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
body.home .custom-jewelry-section .cj-media a:hover .box-image img {
	transform: scale(1.05);
}
body.home .custom-jewelry-section .cj-text .col-inner {
	text-align: left !important;
}
body.home .custom-jewelry-section .cj-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cb-gold);
}
body.home .custom-jewelry-section .cj-title {
	margin: 0 0 6px;
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
body.home .custom-jewelry-section .cj-subtitle {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 400;
	color: var(--cb-gold);
}
body.home .custom-jewelry-section .cj-desc {
	max-width: 480px;
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .75);
}
body.home .custom-jewelry-section .cj-app,
body.home .custom-jewelry-section .cj-request {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	margin: 0 10px 10px 0 !important;
	padding: 0 28px !important;
	border-radius: 0;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}
/* Chưa có link app → ẩn nút View Designs */
body.home .custom-jewelry-section a.cj-app[href="#"],
body.home .custom-jewelry-section a.cj-app:not([href]) {
	display: none !important;
}

@media (max-width: 849px) {
	body.home .custom-jewelry-section {
		padding: 56px 0 !important;
	}
	body.home .custom-jewelry-section .cj-media {
		padding: 0 !important;
		margin-bottom: 32px;
	}
	body.home .custom-jewelry-section .cj-text {
		padding: 0 !important;
	}
}
@media (max-width: 549px) {
	body.home .custom-jewelry-section .cj-media .row {
		gap: 8px;
	}
	body.home .custom-jewelry-section .cj-app,
	body.home .custom-jewelry-section .cj-request {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-right: 0 !important;
	}
}
/* Nút viền trên nền tối: chữ + viền tan (ghi đè buttons.css) */
html body.home .custom-jewelry-section a.cj-request.button.is-outline {
	background: transparent !important;
	border: 2px solid var(--cb-gold) !important;
	color: var(--cb-gold) !important;
}
html body.home .custom-jewelry-section a.cj-request.button.is-outline:hover {
	background: var(--cb-gold) !important;
	color: var(--cb-black) !important;
}