.hn-product-wizard,
.hn-product-wizard * {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -1px;
	word-spacing: 3px;
	line-height: 1.4;
}

.hn-product-wizard:has(.step-panel.active[data-step="1"]) .hn-steps,
.hn-product-wizard:has(.step-panel.active[data-step="1"]) .hn-progress,
.hn-product-wizard:has(.step-panel.active[data-step="1"]) .hn-header {
	display: none;
}

/* ===================== CẬP NHẬT MÀU SẮC MỚI ===================== */
:root {
	--c-10: var(--primary);
	--c-20: #6c4a36;
	--c-10b: #b79683;
	--c-05: var(--accent);
	--c-55: #fff4f0;

	/* Thay đổi các biến màu chính */
	--bg: #e4e2e0;
	/* Màu nền wizard mới */
	--surface: #fff;
	--card: rgba(var(--primary-rgb), .06);
	--stroke: rgba(var(--primary-rgb), .18);
	--soft: rgba(var(--primary-rgb), .10);
	--text: var(--primary);
	/* Màu chữ chính mới */
	--text-dim: #6c4a36;
	--primary: var(--primary);
	/* Màu chủ đạo mới */
	--primary-2: var(--c-10b);
	--accent: var(--c-05);
	--danger: #b9382e;

	--radius-lg: 18px;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow-lg: 0 14px 40px rgba(var(--primary-rgb), .16);
	--shadow-sm: 0 6px 18px rgba(var(--primary-rgb), .10);
	--handle-size: 20px;
}



.hn-product-wizard .hn-btn:hover {
	background: linear-gradient(-45deg, var(--primary) 0%, #c4c2c0 50%, var(--primary) 100%);
	filter: none;
	/* Làm màu sáng hơn một chút khi hover */
	color: #fafaf9;
	/* Giữ nguyên màu chữ */
	transform: translateY(-2px);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	color: var(--c-10);
}

.hn-product-wizard .hn-btn.secondary:hover {
	background: #dcd5cf;
	/* Màu nền hơi sẫm hơn một chút */
	border-color: #c5b8b0;
	color: var(--primary);
	/* Giữ nguyên màu chữ */
}

#product-gallery-slider .main-product-slider {
	width: 100%;
	border-radius: var(--radius);
	margin-bottom: 10px;
}

#product-gallery-slider .swiper-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.swiper-wrapper {
	width: 1px;
}

#product-gallery-slider .swiper-button-next,
#product-gallery-slider .swiper-button-prev {
	color: var(--primary) !important;
}

#product-gallery-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: var(--stroke);
	opacity: 1;
	transition: width 0.2s ease;
}

#product-gallery-slider .swiper-pagination-bullet-active {
	background-color: var(--primary);
	width: 24px;
	border-radius: 999px;
}

.product-info h3 {
	font-size: clamp(20px, 4vw, 24px);
	font-weight: 600;
	color: var(--text);
}

.product-info .product-subtitle {
	margin-top: -5px;
	margin-bottom: 20px;
	color: var(--text-dim);
	font-size: 14px;
}

.product-info .price {
	font-size: clamp(24px, 6vw, 28px);
	font-weight: 700;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--primary);
}

.product-info .price span {
	font-weight: 600;
	font-size: 20px;
	color: var(--text);
}

.product-info .price .sub {
	font-weight: 400;
	font-size: 16px;
	bottom: 0;
	color: var(--text);
}

.product-info .price-note {
	margin-top: 0;
	font-size: 12px;
	color: #8a6e61;
	white-space: pre-wrap;
	/* Ensure line breaks are respected */
}

#step2-price-display {
	text-align: center;
	margin-top: 20px;
	font-size: 20px;
	font-weight: 400;
	color: var(--primary);
}

#step2-price-display .price {
	font-size: 22px;
	font-weight: 700;
}

.step-panel[data-step="1"] .step-buttons {
	margin: 25px 0;
}

.step-panel[data-step="1"] .step-buttons .hn-btn:hover {
	background: var(--primary);
	color: #fafafa;
	border: none;
}

.step-panel[data-step="1"] .step-buttons .hn-btn {
	width: 100%;
	max-width: 300px;
	font-size: clamp(14px, 4vw, 16px);
	padding: 14px 20px;
	transition: all 0.3s ease-in;
	color: var(--primary);
	background: #fafafa;
	border: 1px solid var(--primary);
}

.step-panel[data-step="1"] .hn-card {
	box-shadow: none;
}

.step-panel[data-step="1"] .hn-card:first-of-type {
	background: #ebebeb;
}

.step-panel[data-step="1"] .hn-card:last-of-type {
	background: #fafafa;
}

.hn-product-wizard.custom-product-tabs:has(.step-panel.active[data-step="1"]) {
	padding: 0;
	box-shadow: none;
}

.product-full-content {
	font-size: 14px;
	color: var(--text-dim);
	line-height: 1.7;
}

.related-products-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 10px;
}

.related-product-item {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
}

.related-product-item a {
	color: var(--text);
	text-decoration: none;
}

.related-product-item img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--stroke);
	margin-bottom: 6px;
}

/* ===================== CSS CŨ GIỮ NGUYÊN (VÀ ÁP DỤNG MÀU MỚI) ===================== */
.hn-product-wizard {
	color: var(--text);
	background: #fafaf9;
	border-radius: var(--radius-lg);
	padding: 22px;
	position: relative;
	overflow: hidden
}

.hn-product-wizard * {
	box-sizing: border-box
}

.hn-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px
}

.hn-title {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	letter-spacing: .2px;
	color: var(--text)
}

.hn-steps {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.5vw, 10px);
	margin: 10px 0 14px;
	flex-wrap: nowrap;
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.hn-steps::-webkit-scrollbar {
	height: 6px;
}

.hn-steps::-webkit-scrollbar-thumb {
	background: rgba(108, 74, 54, 0.3);
	border-radius: 6px;
}

.hn-step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: clamp(6px, 1vw, 8px) clamp(8px, 1.5vw, 10px);
	border-radius: 999px;
	/* 		background: rgba(233, 210, 199, 0.5); */
	background: #fafafa;
	border: 1px solid var(--primary);
	box-shadow: inset 0 2px 8px rgba(108, 74, 54, 0.08);
	transition: 0.25s;
	flex: 0 0 auto;
}

.hn-step.active {
	background: var(--primary);
	border-color: var(--primary);
}

.hn-step .dot {
	width: clamp(20px, 3vw, 22px);
	height: clamp(20px, 3vw, 22px);
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 2px solid rgba(108, 74, 54, 0.35);
	background: var(--primary);
	color: #fafafa;
	font-weight: 800;
	font-size: clamp(10px, 1.5vw, 11px);
}

.hn-step.active .dot {
	background: #fff;
	color: var(--primary);
	border-color: #fff;
}

.hn-step .label {
	font-size: clamp(11px, 1.5vw, 12px);
	font-weight: 700;
	color: var(--text-dim);
}

.hn-step.active .label {
	color: #fafaf9;
}

.hn-progress {
	height: 8px;
	width: 100%;
	background: var(--soft);
	border-radius: 999px;
	overflow: hidden;
	margin: 2px 0 18px;
	border: 1px solid var(--stroke)
}

.hn-progress>.bar {
	height: 100%;
	width: 0%;
	background: var(--primary);
	transition: width .35s ease
}

.step-panel {
	display: none;
	animation: fadeIn .22s ease both
}

.step-panel.active {
	display: block
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(6px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.hn-card {
	background: #e4e2e0;
	border: 2.5px solid var(--primary);
	border-radius: var(--radius);
	padding: 16px;
}

.hn-two-col {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 18px
}

#text-toolbar {
	display: none;
	/* Vẫn ẩn ban đầu */
	margin-top: 20px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid var(--stroke);
	box-shadow: var(--shadow-sm);
	background: var(--surface);
	justify-content: center;
	/* Căn giữa các item */
	position: relative;
}

#text-toolbar .tb-row {
	gap: 10px;
}

.step-panel[data-step="3"] .hn-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.step-panel[data-step="3"] .hn-two-col,
.step-panel[data-step="4"] .hn-two-col {
	grid-template-columns: 1fr;
}

.hn-img-frame {
	display: grid;
	place-items: center;
	border-radius: var(--radius);
	overflow: hidden
}

.hn-img {
	max-width: 100%;
	border-radius: 10px;
	border: 1px solid rgba(108, 74, 54, .18)
}

.hn-section-title {
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .45px;
	color: var(--text-dim);
	margin: 6px 0 10px;
}

.options-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

.opt {
	min-width: 88px;
	padding: 6px 16px;
	border-radius: 1000000px;
	background: #fafafa;
	border: 1px solid var(--primary);
	text-align: center;
	cursor: pointer;
	transition: .2s;
	font-weight: 400;
	font-size: 13px;
	color: var(--primary);
}

.opt:hover {
	transform: translateY(-1px);
	border-color: var(--c-20)
}

.opt.selected {
	background: var(--primary);
	border-color: var(--primary);
	color: #fafaf9;
	box-shadow: 0 10px 26px rgba(108, 74, 54, .12)
}

#canvas-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	overflow: hidden;
	max-width: 520px;
}

#product-canvas {
	width: 100%;
	height: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 10px 26px rgba(108, 74, 54, 0.18);
	touch-action: none;
	display: block;
}

#text-toolbar select,
#text-toolbar input[type=number] {
	padding: 8px 10px;
	border: 1px solid rgba(108, 74, 54, .25);
	border-radius: 10px;
	background: #fff;
	color: var(--text);
	font-size: 13px
}

#text-toolbar button {
	border: none;
	background: var(--c-05);
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	transition: .18s;
	font-size: 13px;
	color: var(--c-20)
}

#text-toolbar button:hover {
	background: var(--c-10b);
	color: #fff
}

#tb-color-btn {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(108, 74, 54, .35);
	cursor: pointer;
	background: #000
}

#tb-color-popup {
	display: none;
	position: absolute;
	top: 42px;
	left: 0;
	background: #fff;
	border: 1px solid var(--stroke);
	border-radius: 10px;
	padding: 8px;
	box-shadow: var(--shadow-lg);
	flex-wrap: wrap;
	gap: 8px;
	z-index: 100
}

.tb-color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(108, 74, 54, .35)
}

.tb-color-swatch.selected {
	outline: 2px solid var(--c-20)
}

.step-buttons {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	justify-content: center
}

.hn-btn {
	padding: 11px 18px;
	border-radius: 15px;
	border: 0;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	color: #fafaf9;
	background: linear-gradient(-45deg, var(--primary) 0%, #c4c2c0 50%, var(--primary) 100%);
	;
	box-shadow: 0 10px 26px rgba(108, 74, 54, .20);
	transition: transform .12s ease, box-shadow .2s ease, filter .18s ease;
	text-transform: uppercase;
}

.hn-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.03)
}

.hn-btn.secondary {
	background: linear-gradient(-45deg, #fafaf9 0%, #c7c7c7 50%, #fafaf9 100%);
	color: var(--c-20);
	border: 1px solid var(--stroke);
	box-shadow: none
}

.hn-btn.secondary:hover {
	background: linear-gradient(-45deg, #fafaf9 0%, #c7c7c7 50%, #fafaf9 100%);
}

#hn-uploading {
	display: none;
	align-items: center;
	gap: 10px;
	justify-content: center;
	color: var(--text-dim);
	font-size: 13px;
	margin-top: 8px
}

.hn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(108, 74, 54, .18);
	border-top-color: var(--c-20);
	border-radius: 50%;
	animation: spin .8s linear infinite
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.hn-form-row {
	text-align: center;
	margin-top: 12px;
	width: 100%;
}

.hn-form-row input[type="text"] {
	background: #fff;
	border: 1px solid var(--stroke);
	color: var(--text);
	padding: 11px 12px;
	border-radius: 12px;
	width: 100%;
	max-width: 500px;
	box-shadow: 0 4px 12px rgba(108, 74, 54, .08) inset
}

.hn-form-row input[type="text"]::placeholder {
	color: #b08d7b
}

.hn-help {
	color: #8a6e61;
	font-size: 12px;
	margin-top: 6px;
	text-align: center
}

.hn-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	backdrop-filter: saturate(120%) blur(2px);
	display: none;
	z-index: 9990
}

.hn-modal {
	position: fixed;
	inset: 0;
	display: none;
	place-items: center;
	z-index: 9991
}

.hn-modal .hn-modal-box {
	width: min(920px, 94vw);
	max-height: 88vh;
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--stroke);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column
}

.hn-modal-head {
	padding: 14px 16px;
	border-bottom: 1px solid var(--stroke);
	display: flex;
	justify-content: space-between;
	align-items: center
}

.hn-modal-title {
	font-weight: 800;
	color: var(--c-20)
}

.hn-modal-close {
	border: 0;
	background: transparent;
	font-size: 20px;
	cursor: pointer;
	line-height: 1
}

.hn-modal-tabs {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--stroke)
}

.hn-tab-btn {
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--stroke);
	background: linear-gradient(180deg, #fff, var(--c-55));
	cursor: pointer;
	font-weight: 700
}

.hn-tab-btn.active {
	background: linear-gradient(135deg, var(--c-05), #fff);
	border-color: var(--c-20);
	color: var(--c-20)
}

.hn-modal-body {
	padding: 14px 16px;
	overflow: auto
}

.hn-icons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 12px
}

.hn-icon-item {
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: 10px;
	display: grid;
	place-items: center;
	background: var(--primary);
	cursor: pointer;
	transition: .15s
}

.hn-icon-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(108, 74, 54, .12)
}

.hn-icon-item img {
	max-width: 100%;
	height: 72px;
	object-fit: contain
}

.hn-empty {
	padding: 20px;
	color: #856c5d;
	background: var(--c-55);
	border: 1px dashed var(--stroke);
	border-radius: 12px;
	text-align: center
}

.hn-grid-thumb {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px
}

.hn-thumb {
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: 6px;
	display: grid;
	place-items: center;
	background: #fff;
	cursor: pointer;
	transition: .15s
}

.hn-thumb:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(108, 74, 54, .12)
}

.hn-thumb img {
	max-width: 100%;
	max-height: 64px;
	object-fit: contain
}

.hn-thumb.selected {
	outline: 2px solid var(--c-20)
}

#text-toolbar .tb-row {
	display: flex;
	align-items: center;
	gap: 8px
}

#text-toolbar .tb-input {
	width: 70px;
	padding: 8px 10px;
	border: 1px solid var(--stroke);
	border-radius: 10px;
	background: #fff
}

#text-toolbar .tb-btn {
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--c-05);
	border: 1px solid var(--stroke);
	font-weight: 700;
	cursor: pointer
}

#text-toolbar .tb-btn.danger {
	background: #fff1f1;
	border-color: #ffdede
}

#text-toolbar .tb-chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--stroke);
	background: #fff;
	font-weight: 700
}

#text-toolbar .tb-sep {
	width: 1px;
	height: 22px;
	background: var(--stroke)
}

#text-toolbar .tb-flex {
	flex: 1 1 auto
}

#tb-color-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .2);
	vertical-align: -2px;
	margin: 0 4px
}

.tb-popover {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
	width: 380px;
	max-height: 380px;
	overflow: auto;
	z-index: 1000;
}

.tb-popover[hidden] {
	display: none !important;
}

.tb-pop-body {
	padding: 8px;
}

.tb-list {
	display: block;
}

#tb-font-grid .hn-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
}

#tb-font-grid .hn-thumb.selected {
	outline: 2px solid #6c4a36;
}

#tb-color-grid .hn-thumb {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 6px 10px;
	margin-bottom: 8px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
}

#tb-color-grid .hn-thumb .sw {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .15);
}

#tb-color-grid .hn-thumb.selected {
	outline: 2px solid #6c4a36;
}

.tb-fonts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px
}

.tb-fonts .hn-thumb {
	height: 52px;
	padding: 6px
}

.tb-colors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px
}

.tb-colors .hn-thumb {
	height: 60px;
	padding: 8px;
	grid-template-columns: 44px 1fr
}

#text-toolbar .tb-chip {
	padding: 6px 10px;
	font-size: 13px
}

#text-toolbar .tb-btn {
	padding: 6px 8px;
	font-size: 13px
}

#text-toolbar .tb-input {
	width: 60px;
	padding: 6px 8px;
	font-size: 13px
}

#tb-color-dot {
	width: 12px;
	height: 12px
}

.tb-fonts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	align-content: start
}

.tb-fonts .hn-thumb {
	height: 64px;
	display: grid;
	place-items: center;
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: 8px;
	background: #fff;
	cursor: pointer
}

.tb-fonts .hn-thumb.selected {
	outline: 2px solid var(--c-20)
}

.tb-fonts .hn-thumb small {
	opacity: .7
}

.tb-colors {
	display: grid;
	grid-auto-rows: 56px;
	gap: 10px;
	align-content: start
}

.tb-colors .hn-thumb {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: 6px;
	background: #fff;
	cursor: pointer
}

.tb-colors .hn-thumb div.sw {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .15)
}

.tb-colors .hn-thumb.selected {
	outline: 2px solid var(--c-20)
}

#canvas-wrapper {
	position: relative;
	padding: 0;
	margin: 0;
}

#tb-color-popover {
	width: 420px;
	max-height: 520px;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
	border: 1px solid rgba(0, 0, 0, .08);
	overflow: auto;
}

#tb-color-popover .tb-pop-body {
	padding: 8px;
}

#tb-color-search {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	margin-bottom: 8px;
	font-size: 12px;
}

#tb-color-grid.large {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px;
	padding: 8px;
}

#tb-color-grid.large .hn-thumb,
#tb-icon-color-grid .hn-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 110px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 12px;
	cursor: pointer;
	background: #fff;
	padding: 6px;
	overflow: visible;
}

#tb-color-grid.large .hn-thumb img,
#tb-icon-color-grid .hn-thumb img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	border-radius: 10px;
}

#tb-color-grid.large .hn-thumb.selected {
	outline: 3px solid var(--c-20);
	outline-offset: 0;
}

#tb-color-grid.large .hn-thumb .meta,
#tb-color-grid.large .hn-thumb .tick {
	display: none !important;
}

#tb-color-grid .hn-thumb {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 8px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	background: #fff;
	transition: border-color .12s ease, background .12s ease;
	margin-bottom: 6px;
}

#tb-color-grid .hn-thumb:hover {
	background: #faf7f6;
	border-color: rgba(0, 0, 0, .16);
}

#tb-color-grid .hn-thumb.selected {
	outline: 2px solid var(--c-20);
	background: linear-gradient(180deg, #fff, var(--c-55));
}

#tb-color-grid .hn-thumb .sw {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .15);
}

#tb-color-grid .hn-thumb .meta .name {
	font-weight: 700;
	font-size: 13px;
}

#tb-color-grid .hn-thumb .meta .hex {
	font-size: 11px;
	color: #8a6e61;
	margin-top: 1px;
}

#tb-color-grid .hn-thumb .tick {
	font-weight: 900;
	opacity: 0;
	padding: 0 4px;
	color: var(--c-20);
}

#tb-color-grid .hn-thumb.selected .tick {
	opacity: 1;
}

#tb-color-popover .tb-pop-body {
	scrollbar-width: thin;
}

#tb-color-popover::-webkit-scrollbar {
	width: 8px;
}

#tb-color-popover::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .18);
	border-radius: 8px;
}

#text-toolbar {
	overflow: visible !important;
}

#tb-color-popover,
#tb-font-popover {
	box-sizing: border-box;
}

.custom-product-tabs,
.custom-product-tabs :where(.elementor-widget-container, .elementor-container, .elementor-widget-wrap, .hn-card, .hn-img-frame) {
	overflow: visible !important;
	z-index: 1;
}

#tb-color-grid .hn-thumb img {
	max-height: 64px;
	object-fit: contain;
}

.color-text-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
}

.color-text-option img {
	width: 48px;
	height: auto;
	border-radius: 6px;
	object-fit: cover;
}

.color-text-option .label {
	font-size: 14px;
	line-height: 1.4;
}

.color-text-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
}

.color-text-option img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 6px;
}

.color-text-option .label {
	font-size: 13px;
	text-align: center;
}

#tb-font-popover,
#tb-color-popover {
	width: auto;
	max-width: min(92vw, 520px);
	min-width: clamp(240px, 60vw, 380px);
}

#tb-color-grid.large .hn-thumb {
	grid-template-columns: 1fr;
	align-items: start;
	gap: 8px;
	min-height: auto;
	padding: 10px;
}

#tb-color-grid.large .hn-thumb img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	border-radius: 12px;
	display: block;
}

#tb-color-grid.large .hn-thumb .meta {
	margin-top: 6px;
}

#design-summary {
	background: #fafafa;
}

#object-toolbar {
	position: absolute;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(30, 30, 30, 0.92);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(6px);
	transform: translate(-50%, -100%);
	transition: opacity 0.15s ease, transform 0.15s ease;
	opacity: 0;
	pointer-events: none;
}

#object-toolbar.show {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 920px) {
	.hn-two-col {
		grid-template-columns: 1fr
	}

	.hn-product-wizard:has(.step-panel.active[data-step="1"]) .hn-two-col {
		gap: 0;
	}

	.hn-product-wizard:has(.step-panel.active[data-step="1"]) .hn-card {
		border: none;
	}

	.step-panel[data-step="1"] .hn-card:last-of-type {
		border-radius: 0;
	}

	.step-panel[data-step="1"] .hn-card {
		padding: 10px;
	}

	.product-info h3 {
		margin-bottom: 8px;
	}

	.product-info .price {
		margin: 0;
	}

	.hn-product-wizard {
		padding: 10px;
	}
}

@media (max-width: 768px) {
	:root {
		--handle-size: 28px
	}

	.step-panel[data-step="1"] .hn-card:first-of-type {
		border-radius: 0;
	}

	#txt-input,
	#text-toolbar .tb-input {
		font-size: 16px;
	}

	/* 2. Làm nhỏ thanh công cụ */
	#text-toolbar {
		padding: 8px;
	}

	#text-toolbar .tb-chip {
		padding: 6px 10px;
		font-size: 13px;
	}

	#text-toolbar .tb-btn {
		padding: 6px 8px;
		font-size: 13px;
	}

	#text-toolbar .tb-input {
		width: 60px;
		padding: 6px 8px;
	}

	#tb-color-dot,
	#tb-icon-color-dot {
		width: 12px;
		height: 12px;
	}

	.hn-icons-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.options-grid {
		gap: 8px;
	}

	.opt {
		min-width: 75px;
		padding: 6px 16px;
		font-size: 12px;
		border-radius: 10000000px;
	}

	.hn-btn {
		padding: 10px 16px;
		font-size: 14px;
	}

	#tb-font-popover .tb-pop-body {
		padding: 6px;
	}

	#tb-font-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	#tb-font-grid .hn-thumb {
		padding: 6px;
		min-height: auto;
		margin-bottom: 0;
	}

	#tb-font-grid .hn-thumb img {
		max-height: 36px;
	}
}

@media (max-width: 480px) {

	#tb-font-popover,
	#tb-color-popover {
		max-width: calc(100vw - 16px);
		min-width: auto;
		border-radius: 12px;
	}

	#tb-font-grid .hn-thumb {
		min-height: 44px;
		padding: 8px 10px;
	}

	.step-panel[data-step="2"] .hn-two-col {
		grid-template-columns: 1fr;
	}
}

/* ===== FIXED SLOTS PANEL (BƯỚC 3) ===== */

#fixed-slots-interface {
	margin-top: 16px;
	padding: 14px 14px 10px;
	border-radius: 16px;
	border: 1px solid #f3e3d3;
	background: #fdf7f2;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	position: relative;
}

/* Tiêu đề + mô tả tự sinh bằng ::before / ::after */
#fixed-slots-interface::before {
	content: "Nội dung cố định trên sản phẩm";
	grid-column: 1 / -1;
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #6c4a36;
	margin-bottom: 2px;
}

#fixed-slots-interface::after {
	content: "Bạn chỉ cần nhập nội dung hoặc tải ảnh, vị trí & tỉ lệ đã được Homenest căn sẵn.";
	grid-column: 1 / -1;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #8b6b50;
	margin-bottom: 6px;
}

/* Mỗi slot (text / image) */
#fixed-slots-interface .hn-form-row {
	background: #ffffff;
	border-radius: 12px;
	padding: 10px 12px;
	border: 1px solid #f0e0d1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
	flex-direction: column;
	gap: 6px;
}

/* Label của slot */
#fixed-slots-interface .hn-form-row label {
	font-size: 13px;
	font-weight: 600;
	color: #6c4a36;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Nhỏ nhỏ hiển thị slot-id trong ngoặc */
#fixed-slots-interface .hn-form-row label::after {
	content: attr(data-slot-label);
}

/* Input text */
#fixed-slots-interface .hn-form-row input[type="text"] {
	border-radius: 999px;
	border: 1px solid #e4d5c5;
	padding: 7px 10px;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#fixed-slots-interface .hn-form-row input[type="text"]:focus {
	border-color: #c8946b;
	box-shadow: 0 0 0 2px rgba(200, 148, 107, 0.15);
}

/* Slot hình ảnh */
#fixed-slots-interface .fixed-image-slot {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* Nút upload ảnh */
#fixed-slots-interface .fixed-image-slot .upload-btn {
	border-radius: 999px;
	border: 1px solid #6c4a36;
	background: #6c4a36;
	color: #fdf7f2;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
	flex: 0;
}

#fixed-slots-interface .fixed-image-slot .upload-btn:hover {
	background: #8a6547;
}

#fixed-slots-interface .fixed-image-slot .upload-btn:active {
	transform: translateY(1px);
}

/* Ảnh preview nhỏ bên phải */
#fixed-slots-interface .fixed-image-slot img {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid #e4d5c5;
	background: #fff;
}

/* Giữa chữ và nút cho image slot */
#fixed-slots-interface .fixed-image-slot label {
	flex: 1;
	margin-right: 12px;
}

/* Desktop: chia 2 cột cho slot, tiêu đề vẫn span full */
@media (min-width: 768px) {
	#fixed-slots-interface {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#fixed-slots-interface::before,
	#fixed-slots-interface::after {
		grid-column: 1 / -1;
	}
}

/* Mobile: full-width, khoảng cách thoáng hơn tí */
@media (max-width: 767px) {
	#fixed-slots-interface {
		padding: 12px 10px 8px;
		border-radius: 14px;
	}
}

.hn-side-toggle {
	display: flex;
	gap: 6px;
	width: 100%;
}

.step-panel[data-step="3"] .hn-side-toggle {
	max-width: 520px;
}

.hn-side-btn {
	border: 1px solid var(--primary);
	background: #fafafa;
	color: var(--primary);
	padding: 12px 10px;
	font-size: 16px;
	cursor: pointer;
	width: 50%;
}

.hn-side-btn.active {
	background: var(--primary);
	color: #fff;
}

.hn-two-sides {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hn-two-sides .hn-img-frame {
	flex: 1 1 150px;
}

.hn-side-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #6c4a36;
}

/* ƯU TIÊN CANVAS (NÚT ROTATE) NẰM TRÊN PANEL UPLOAD ẢNH Ở STEP 3 */
.step-panel[data-step="3"] #canvas-wrapper {
	position: relative;
	z-index: 5;
	/* cao hơn fixed-slots */
}

.step-panel[data-step="3"] #fixed-slots-interface {
	position: relative;
	z-index: 1;
	/* thấp hơn canvas */
}

@media (max-width: 768px) {
	.step-panel[data-step="3"] #canvas-wrapper {
		z-index: 10;
	}
}

#canvas-wrapper {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	touch-action: none;
	position: relative;
}

#product-canvas {
	touch-action: none;
	/* vẫn chặn pinch-zoom page trên canvas */
	transform-origin: 0 0;
	/* dễ tính toán hơn (top-left) */
	display: block;
	will-change: transform;
}

#hn-adjust-rule {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 30;

	max-width: 250px;
	padding: 8px 12px;
	border-radius: 10px;
	white-space: wrap;
	font-size: 18px;
	line-height: 1.35;
	text-align: center;

	color: #fff;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	pointer-events: none;
	/* không chặn thao tác canvas */
}

/* iOS-friendly: KHÔNG dùng display:none */
.hn-file-ios {
	position: absolute;
	top: 0;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	z-index: 999;
}

.hn-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: #6c4a36;
	color: #fff;
	padding: 8px 12px;
	font-size: 13px;
	border-radius: 6px;
	white-space: nowrap;
	z-index: 20;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.hn-tooltip.show {
	opacity: 1;
	transform: translateX(-50%) translateY(-12px);
}

.hn-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0;
	border-style: solid;
	border-color: #6c4a36 transparent transparent;
}

.hn-notes p {
	white-space: pre-wrap;
}

/* Force override for Step 1 hover state per request */
.step-panel[data-step='1'] .step-buttons .hn-btn:hover {
	background: var(--primary) !important;
	color: #fafafa !important;
	border-color: var(--primary) !important;
}

/* ==========================================================================
   WIZARD PANEL LAYOUT (CUSTOM FOR Huy-Product)
   ========================================================================== */
/* ==========================================================================
   WIZARD PANEL LAYOUT (STATIC DESIGN PANEL v2)
   ========================================================================== */

/* 1. Pill Buttons at Top */
.panel-top-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
}

.pill-btn {
	padding: 12px 30px;
	border-radius: 100px;
	border: none;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.2s;
}

.pill-btn.primary {
	background: #f0f0f1;
	color: #1a1a1a;
}

.pill-btn.secondary {
	background: #f0f0f1;
	color: #1a1a1a;
}

.pill-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	background: #fff;
}

/* 2. Main Panel Card */
.layout-panel {
	border-radius: 25px;
	border: none !important;
	text-align: center;
	max-width: 100%;
}

.panel-main-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 20px 0;
}

/* Input + Delete Row */
.section-input {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.input-dashed-wrapper {
	flex: 1;
	border: 2px dashed #000;
	border-radius: 20px;
	display: flex;
	align-items: center;
}

.panel-txt-input {
	border: none !important;
	background: transparent !important;
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #333;
	outline: none !important;
}

.panel-square-btn {
	background: #f0f0f1;
	border: none;
	border-radius: 18px;
	padding: 12px 14px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #666;
	min-width: 65px;
	height: 100%;
	/* Match input height */
	transition: all 0.2s ease;
}

.panel-square-btn:hover {
	background: #e0e0e1;
	color: #333;
	transform: translateY(-2px);
}

.panel-square-btn.danger {
	background: transparent;
	color: #a84a4a;
	padding: 0;
}

.panel-square-btn.danger:hover {
	background: #ecc5c5;
	color: #8f3838;
}

.btn-icon {
	font-size: 20px;
	line-height: 1;
}

.btn-label {
	font-weight: 700;
	font-size: 11px;
}

/* Control Buttons Row */
.section-triggers {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.panel-control-btn {
	/* flex: 1; Removed */
	padding: 12px 24px;
	border-radius: 100px;
	border: none;
	background: #f0f0f1;
	font-weight: 700;
	font-size: 1rem;
	color: #1a1a1a;
	cursor: pointer;
	transition: all 0.2s;
	min-width: 120px;
	/* Consistent width */
}

.panel-control-btn:hover {
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* 3. Colors Grid (3 COLUMNS based on image) */
.panel-color-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px 15px;
	justify-items: center;
	max-height: 210px;
	/* Limit to approx 2 rows */
	overflow-y: auto;
	/* Scrollable */
	overflow-x: hidden;
	padding-right: 5px;
	/* Spacing for scrollbar */
}

#text-toolbar input[type=number] {
	max-width: 60px;
}

.panel-color-item {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.panel-color-item .color-swatch-wrapper {
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
}

.panel-color-item .color-swatch-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.panel-color-item .color-name {
	font-size: 12px;
	color: #666;
	font-weight: 600;
}

.panel-hint {
	font-weight: 800;
	margin-bottom: 20px;
	color: #1a1a1a;
	font-size: 1.1rem;
}

.panel-hint-en {
	font-style: italic;
	font-size: 0.9rem;
	color: #888;
	margin-top: 25px;
}

/* Bottom Finish Button Styling */
#btn-done-design {
	margin-top: 20px;
	padding: 20px;
	font-size: 1.3rem;
	font-weight: 800;
	border-radius: 100px;
}

/* Responsive */
@media (max-width: 600px) {
	.panel-color-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.color-swatch-wrapper {
		width: 50px;
		height: 50px;
	}
}

/* ==========================================================================
   MISSING STYLES RECOVERY
   ========================================================================== */
/* Styling for #free-design-controls buttons (Add Text / Add Icon core buttons) */
#free-design-controls .step-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 15px;
	margin-bottom: 10px;
}

#free-design-controls .step-buttons button {
	padding: 10px 24px;
	border-radius: 99px;
	border: 1px solid var(--stroke);
	background: #ffffff;
	color: var(--primary);
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

#free-design-controls .step-buttons button:hover {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.15);
}

/* Ensure Input row spacing */
#free-design-controls .hn-form-row {
	margin-bottom: 10px;
}

/* ==========================================================================
   MOBILE LAYOUT (Max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

	/* Mobile Panel - Single Column Stack */
	.layout-panel {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 15px;
		align-items: center;
		padding: 20px 15px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Constrain Input Width */
	.panel-section.section-input {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	/* Center Controls */
	.panel-section.section-triggers {
		display: flex;
		justify-content: center;
		gap: 12px;
		flex-wrap: wrap;
	}

	/* Font/Size toolbar */
	.panel-section.section-triggers+.panel-section {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding: 12px 15px;
		border-radius: 15px;
		width: max-content;
		max-width: 100%;
	}

	/* Color Grid - Fewer columns on mobile */
	.panel-color-grid {
		grid-template-columns: repeat(4, 1fr);
		max-height: 200px;
	}

	.panel-control-btn {
		width: auto;
		min-width: 110px;
		flex: initial;
	}

	.input-dashed-wrapper {
		min-height: 50px;
	}

	/* Override toolbar width on mobile */
	#hn-static-design-panel #text-toolbar {
		width: max-content !important;
	}
}

/* ==========================================================================
   DESKTOP GRID LAYOUT (Min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {

	/* Main Panel - Single Column Stack */
	.layout-panel {
		display: grid;
		grid-template-columns: 1fr;
		/* Single column */
		justify-items: center;
		/* Center items horizontally, prevent full width */
		gap: 20px;
		align-items: center;
		/* Narrower for single column */
		margin-left: auto;
		margin-right: auto;
	}

	/* 1. Constrain Input Width & Center It */
	.panel-section.section-input {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}

	/* 2. Center Controls */
	.panel-section.section-triggers {
		display: flex;
		justify-content: center;
		gap: 20px;
	}

	/* 3. Font/Size should also center if it exists */
	.panel-section.section-triggers+.panel-section {
		display: flex;
		justify-content: center;
		gap: 12px;
		padding: 15px 20px;
		/* Reduce padding */
		border-radius: 20px;
		width: max-content;
		max-width: max-content;
	}

	/* 4. Color Grid */
	.panel-color-grid {
		grid-template-columns: repeat(8, 1fr);
		max-height: 250px;
	}

	.panel-control-btn {
		width: auto;
		min-width: 130px;
		flex: initial;
	}

	.input-dashed-wrapper {
		min-height: 55px;
	}

	/* Override tb-row width in docked toolbar */
	#hn-static-design-panel #text-toolbar {
		width: max-content !important;
	}
}