/*
Theme Name: Hạt Xốp - hatxop.com.vn
Theme URI: https://hatxop.com.vn/
Author: hatxop.com.vn
Author URI: https://hatxop.com.vn/
Description: Theme WordPress chuyển đổi từ landing page "Hạt Xốp Gối Lười" của hatxop.com.vn. Tích hợp công cụ tự động tính khối lượng hạt xốp, bảng giá sản phẩm (post type Sản phẩm), thư viện mẫu ghế lười, form nhận đơn hàng online (lưu vào CSDL + gửi email + gửi Zalo) và hiển thị bài viết / tin tức.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hatxop
Tags: blog, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
 * Lưu ý: Toàn bộ CSS giao diện được biên dịch từ Tailwind CSS và xuất ra
 * assets/css/hatxop.css (không phụ thuộc CDN https://cdn.tailwindcss.com
 * nên giao diện không còn bị lỗi khi chạy trực tiếp trên hosting).
 * File này chỉ chứa phần khai báo theme và một vài tiện ích nhỏ.
 */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f5f9;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip-path: none;
	color: #0f172a;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Hiển thị chỉnh sửa cho người quản trị */
.entry-content > * {
	margin-bottom: 1.25rem;
}

.entry-content h2 {
	font-size: 1.75rem;
	font-weight: 800;
	color: #0f172a;
	margin-top: 2rem;
}

.entry-content h3 {
	font-size: 1.35rem;
	font-weight: 700;
	color: #0f172a;
	margin-top: 1.5rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content ul li {
	list-style: disc;
	margin-bottom: 0.35rem;
}

.entry-content ol li {
	list-style: decimal;
	margin-bottom: 0.35rem;
}

.entry-content a {
	color: #059669;
	text-decoration: underline;
}

.entry-content blockquote {
	border-left: 4px solid #10b981;
	background: #ecfdf5;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	font-style: italic;
}

.entry-content img {
	border-radius: 1rem;
	height: auto;
}

/* ==========================================================================
   MENU ĐA CẤP (desktop xổ xuống, mobile accordion)
   ========================================================================== */

/* --- Menu desktop: hiển thị từ 1280px để các mục luôn cân đối, không chen chúc --- */
.hx-nav-wrap {
	display: none;
}

.hx-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	font-weight: 600;
}

.hx-nav li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-nav .hx-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	color: #334155;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.25;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.hx-nav .hx-link:hover,
.hx-nav .hx-link:focus-visible {
	background: #ecfdf5;
	color: #047857;
}

.hx-nav .hx-current > .hx-link {
	background: #d1fae5;
	color: #065f46;
}

.hx-nav .hx-ico {
	flex: 0 0 auto;
	width: 18px;
	text-align: center;
	font-size: 15px;
	color: #059669;
}

.hx-nav .hx-current > .hx-link .hx-ico {
	color: #047857;
}

.hx-caret,
.hx-caret-r {
	flex: 0 0 auto;
	font-size: 10px;
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.hx-item-top:hover > .hx-link .hx-caret {
	transform: rotate(180deg);
}

.hx-item-sub:hover > .hx-slink .hx-caret-r {
	transform: translateX(2px);
}

/* Cấp 2 & cấp 3 */
.hx-nav .hx-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 258px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 22px 45px -18px rgba(15, 23, 42, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}

.hx-nav .hx-submenu-depth-2 {
	top: -9px;
	left: calc(100% - 6px);
}

.hx-nav .hx-item:hover > .hx-submenu,
.hx-nav .hx-item:focus-within > .hx-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hx-nav .hx-slink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	color: #334155;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.hx-nav .hx-slink:hover,
.hx-nav .hx-slink:focus-visible {
	background: #f1f5f9;
	color: #047857;
}

.hx-nav .hx-slink .hx-ico {
	width: 18px;
	font-size: 14px;
}

.hx-nav .hx-slink .hx-caret-r {
	margin-left: auto;
}

.hx-nav .hx-submenu .hx-current > .hx-slink {
	background: #ecfdf5;
	color: #047857;
}

@media (min-width: 1280px) {
	.hx-nav-wrap {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* --- Khối logo: luôn 1 dòng, mô tả ngắn tự thu gọn rồi ẩn khi menu desktop hiện ra --- */
.hx-logo-wrap,
.hx-logo,
.hx-logo-text {
	min-width: 0;
}

.hx-logo-brand {
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #0f172a;
	white-space: nowrap;
}

.hx-logo-tagline {
	display: block;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
}

@media (min-width: 640px) {
	.hx-logo-brand {
		font-size: 1.5rem;
	}

	.hx-logo-tagline {
		max-width: 260px;
	}
}

/* Từ 1280px menu desktop hiện ra -> ẩn mô tả dưới logo để không chồng chữ lên menu. */
@media (min-width: 1280px) {
	.hx-logo-brand {
		font-size: 1.25rem;
	}

	.hx-logo-tagline {
		display: none;
	}
}

/* --- Menu desktop: giữ đúng 1 dòng --- */
@media (min-width: 1280px) {
	.hx-nav {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.hx-nav .hx-txt {
		white-space: nowrap;
	}
}

/* --- 1280-1439px: thu gọn menu cấp 1 để không tràn ra ngoài header --- */
@media (min-width: 1280px) and (max-width: 1439px) {
	.hx-nav {
		gap: 0;
		font-size: 13.5px;
	}

	.hx-nav .hx-link {
		gap: 6px;
		padding: 9px 8px;
	}

	/* Ẩn icon ở menu cấp 1 cho gọn; icon trong menu xổ xuống vẫn giữ nguyên. */
	.hx-item-top > .hx-link > .hx-ico {
		display: none;
	}
}


/* --- Nút mở menu trên mobile --- */
.hx-burger {
	display: inline-flex;
}

@media (min-width: 1280px) {
	.hx-burger {
		display: none;
	}
}

/* --- Panel menu mobile (accordion đa cấp) --- */
.hx-mobile-panel {
	display: none;
	max-height: calc(100vh - 12rem);
	overflow-y: auto;
	background: #fff;
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 24px 35px -22px rgba(15, 23, 42, 0.45);
}

.hx-mobile-panel.is-open {
	display: block;
}

@media (min-width: 1280px) {
	.hx-mobile-panel,
	.hx-mobile-panel.is-open {
		display: none !important;
	}
}

.hx-mnav-title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
}

.hx-mnav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-mnav-item {
	margin: 0;
	border-bottom: 1px solid #f1f5f9;
	list-style: none;
}

.hx-mnav-item:last-child {
	border-bottom: 0;
}

.hx-mnav-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hx-mnav-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 13px 4px;
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
	text-decoration: none;
}

.hx-mnav-ico {
	flex: 0 0 auto;
	width: 20px;
	text-align: center;
	font-size: 14px;
	color: #059669;
}

.hx-mnav-toggle {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	color: #475569;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hx-mnav-toggle i {
	transition: transform 0.2s ease;
}

.hx-mnav-toggle[aria-expanded="true"] {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

.hx-mnav-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.hx-mnav-panel {
	display: none;
	margin: 0 0 10px 10px;
	padding: 0 0 2px 12px;
	border-left: 2px solid #d1fae5;
}

.hx-mnav-item.is-open > .hx-mnav-panel {
	display: block;
}

.hx-mnav-level-1 .hx-mnav-link {
	padding: 10px 4px;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
}

.hx-mnav-level-1 .hx-mnav-ico {
	font-size: 13px;
}

.hx-mnav-level-2 .hx-mnav-link {
	padding: 9px 4px;
	font-size: 13.5px;
	font-weight: 500;
	color: #475569;
}

.hx-mnav-item.is-current > .hx-mnav-row .hx-mnav-link {
	color: #047857;
	font-weight: 700;
}

.hx-mnav-footer {
	display: grid;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
}

.hx-mnav-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.hx-mnav-cta--call {
	background: #059669;
	color: #fff;
}

.hx-mnav-cta--zalo {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #047857;
}

/* --- Thông tin kho hàng / giờ làm việc trong menu di động --- */
.hx-mnav-info {
	display: grid;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
	font-size: 13px;
	line-height: 1.5;
	color: #475569;
}

.hx-mnav-info-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: inherit;
	text-decoration: none;
}

.hx-mnav-info-row i {
	margin-top: 3px;
	color: #0284c7;
}

.hx-mnav-info-note {
	margin: 0;
	font-size: 12px;
	color: #64748b;
}

/* --- Thanh thông tin trên cùng: luôn 1 dòng, ưu tiên hotline khi màn hình hẹp --- */
.hx-topbar {
	overflow: hidden;
}

.hx-topbar-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hx-topbar-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.hx-topbar-group--contact {
	justify-content: flex-end;
}

.hx-topbar-item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}

.hx-topbar-extra,
.hx-topbar-text,
.hx-topbar-badge {
	display: none;
}

.hx-topbar-extra {
	max-width: 460px;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 1024px) {
	.hx-topbar-text {
		display: inline-flex;
	}
}

@media (min-width: 1280px) {
	.hx-topbar-extra {
		display: inline-flex;
	}
}

@media (min-width: 1536px) {
	.hx-topbar-badge {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	.hx-topbar-tel-label {
		display: none;
	}
}

@media (max-width: 479px) {
	.hx-topbar-hours {
		display: none;
	}
}

/* --- Nút Zalo nổi (màu thương hiệu Zalo) --- */
.hx-zalo-btn {
	background-color: #0068ff;
	color: #fff;
}

.hx-zalo-btn:hover {
	background-color: #0056d6;
}

/* --- Khối liên hệ đặt trên cùng sidebar bài viết (luôn hiển thị) --- */
.hx-sidebar {
	min-width: 0;
}

.hx-sidebar-card {
	margin-bottom: 24px;
}

/* --- Khối "Combo Hạt Xốp Tươi Mới" ở hero trang chủ --- */
.hx-combo-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 2px solid #fff;
	border-radius: 14px;
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.6);
}

.hx-combo-body {
	flex: 1 1 auto;
	min-width: 0;
}

.hx-combo-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 700;
	color: #047857;
	text-decoration: none;
}

.hx-combo-link:hover {
	text-decoration: underline;
}

.hx-combo-price {
	flex: 0 0 auto;
	padding: 6px 12px;
	background: #059669;
	border-radius: 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 420px) {
	.hx-combo-thumb {
		width: 60px;
		height: 60px;
	}

	.hx-combo-price {
		padding: 6px 10px;
		font-size: 11px;
	}
}
/* ==========================================================================
   BẢNG ĐỊNH MỨC & BẢNG TỶ LỆ NẠP THÊM HẠT XỐP (#nap-them)
   ========================================================================== */

.hx-topup-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.hx-topup-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

/* --- Sắp xếp: bảng định mức (trái) + máy tính châm thêm (phải) cùng hàng;
       bảng tỷ lệ nạp thêm trải full chiều rộng ngay bên dưới --- */
@media (min-width: 1280px) {
	.hx-topup-layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: start;
	}
}

/* --- Khung bảng có thể cuộn ngang --- */
.hx-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 12px 26px -22px rgba(15, 23, 42, 0.35);
}

.hx-table-scroll {
	max-height: 430px;
	overflow-y: auto;
}

.hx-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
}

.hx-table th,
.hx-table td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}

.hx-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f8fafc;
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hx-table tbody tr:last-child td {
	border-bottom: 0;
}

.hx-table tbody tr:hover {
	background: #f8fafc;
}

.hx-table .hx-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hx-table .hx-strong {
	color: #047857;
	font-weight: 700;
}

.hx-table .hx-table-sub {
	display: block;
	margin-top: 2px;
	color: #64748b;
	font-size: 12px;
	font-weight: 500;
}

.hx-table .hx-pill {
	display: inline-block;
	padding: 4px 10px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 999px;
	color: #047857;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Bảng định mức: giữ cột tên mẫu ghế đủ rộng để các cột số không bị dồn --- */
.hx-table tbody td:first-child {
	min-width: 210px;
}

.hx-table-wrap::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.hx-table-wrap::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
}

/* --- Dòng thông tin liên hệ gọn: mỗi mục 1 dòng (nhãn + giá trị) --- */
.hx-contact-line {
	overflow-wrap: anywhere;
	line-height: 1.55;
}

/* --- Trường nhập trong panel tối của máy tính châm thêm --- */
.hx-topup-label {
	display: block;
	margin-bottom: 6px;
	color: #a7f3d0;
	font-size: 13px;
	font-weight: 600;
}

.hx-topup-field {
	width: 100%;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	outline: none;
}

.hx-topup-field:focus {
	border-color: #34d399;
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

.hx-topup-field option {
	color: #0f172a;
}

/* --- Panel tối của máy tính châm thêm (bản Tailwind build thiếu sm:p-8) --- */
.hx-topup-panel {
	padding: 24px;
	background-image: linear-gradient(to bottom right, #064e3b, #0f172a);
	border-radius: 24px;
	color: #fff;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
}

/* --- Khối bảng tỷ lệ nạp thêm: nằm full chiều rộng dưới 2 khối trên --- */
.hx-topup-ratio {
	margin-top: 28px;
}

.hx-topup-ratio .hx-table td {
	vertical-align: top;
}

.hx-topup-ratio .hx-table td:nth-child(2) {
	white-space: nowrap;
}

@media (min-width: 640px) {
	.hx-topup-panel {
		padding: 32px;
	}
}

/* --- Bù các utility Tailwind chưa có trong bản build (dùng chung toàn theme) --- */
[class~="mt-12"] {
	margin-top: 3rem;
}

[class~="mb-5"] {
	margin-bottom: 1.25rem;
}

[class~="hover:underline"]:hover {
	text-decoration: underline;
}

[class~="active:scale-95"]:active {
	transform: scale(0.95);
}

[class~="w-9"] {
	width: 2.25rem;
}

[class~="h-9"] {
	height: 2.25rem;
}

[class~="list-none"] {
	list-style: none;
}

[class~="m-0"] {
	margin: 0;
}

[class~="p-0"] {
	padding: 0;
}

[class~="min-w-0"] {
	min-width: 0;
}

[class~="gap-x-6"] {
	column-gap: 1.5rem;
}

[class~="gap-y-3"] {
	row-gap: 0.75rem;
}

.hx-table button:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.hx-table {
		font-size: 13px;
	}

	.hx-table th,
	.hx-table td {
		padding: 9px 10px;
	}
}


/* ==========================================================================
   GIÁ BÁN & CHẤT LƯỢNG (giá so sánh, huy hiệu chất lượng, khối so sánh)
   ========================================================================== */

/* --- Giá tham khảo gạch ngang cạnh giá bán lẻ --- */
.hx-price-compare {
	margin-left: 6px;
	color: inherit;
	font-size: 0.82em;
	font-weight: 600;
	opacity: 0.6;
	text-decoration: line-through;
}

.hx-save-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 999px;
	color: #047857;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

/* --- Huy hiệu chất lượng ở khối Hero --- */
.hx-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

@media (min-width: 1024px) {
	.hx-badge-row {
		justify-content: flex-start;
	}
}

.hx-badge-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 999px;
	color: #065f46;
	font-size: 13px;
	font-weight: 600;
}

.hx-badge-chip i {
	color: #059669;
}

/* --- Ghi chú đơn giá dưới tiêu đề bảng nạp thêm --- */
.hx-topup-price-note {
	margin-top: 10px;
	padding: 10px 14px;
	background: #fff;
	border: 1px dashed #a7f3d0;
	border-radius: 14px;
	color: #334155;
	font-size: 14px;
	font-weight: 600;
}

.hx-topup-price-note i {
	margin-right: 6px;
	color: #059669;
}

/* --- Khối "Chất lượng": so sánh hạt nguyên sinh với hàng giá rẻ --- */
.hx-quality {
	padding: 64px 0;
	background: #fff;
	border-top: 1px solid #e2e8f0;
}

.hx-quality-head {
	max-width: 800px;
	margin: 0 auto 40px;
	text-align: center;
}

.hx-quality-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: #ecfdf5;
	border-radius: 999px;
	color: #047857;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hx-quality-head h2 {
	margin: 14px 0 0;
	color: #0f172a;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.25;
}

.hx-quality-head p {
	margin: 10px 0 0;
	color: #475569;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.hx-quality-head h2 {
		font-size: 2.25rem;
	}
}

.hx-quality-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 1024px) {
	.hx-quality-grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: start;
	}
}

.hx-quality-card {
	padding: 26px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
}

.hx-quality-card h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: #0f172a;
	font-size: 1.15rem;
	font-weight: 800;
}

.hx-quality-card h3 i {
	color: #059669;
}

.hx-quality-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-quality-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #334155;
	font-size: 15px;
	line-height: 1.55;
}

.hx-quality-list li i {
	margin-top: 4px;
	color: #059669;
}

.hx-quality-card--cost {
	background: linear-gradient(to bottom right, #064e3b, #0f172a);
	border-color: #064e3b;
	color: #e2e8f0;
}

.hx-quality-cost-label {
	color: #a7f3d0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hx-quality-cost-total {
	margin-top: 6px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1.1;
}

.hx-quality-cost-note {
	margin: 8px 0 16px;
	color: #cbd5e1;
	font-size: 14px;
}

.hx-quality-cost-month {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
}

.hx-quality-month-value {
	color: #6ee7b7;
	font-size: 1.35rem;
	font-weight: 900;
}

.hx-quality-month-label {
	color: #cbd5e1;
	font-size: 13px;
}

.hx-quality-cost-warn {
	margin: 14px 0 18px;
	color: #fde68a;
	font-size: 13.5px;
	line-height: 1.55;
}

.hx-quality-cost-warn i {
	margin-right: 6px;
}

.hx-quality-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	background: #10b981;
	border-radius: 16px;
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s ease;
}

.hx-quality-cta:hover,
.hx-quality-cta:focus-visible {
	background: #059669;
	color: #fff;
	text-decoration: none;
}

.hx-quality-table-wrap {
	margin-top: 28px;
}

.hx-quality-table {
	min-width: 680px;
}

.hx-quality-table td {
	vertical-align: top;
}

.hx-quality-criteria {
	color: #0f172a;
	font-weight: 700;
}

.hx-quality-good,
.hx-quality-bad {
	font-size: 14px;
	line-height: 1.55;
}

.hx-quality-good i,
.hx-quality-bad i {
	margin-right: 7px;
}

.hx-quality-good {
	background: #f0fdf4;
	color: #065f46;
}

.hx-quality-good i {
	color: #059669;
}

.hx-quality-bad {
	color: #64748b;
}

.hx-quality-bad i {
	color: #f87171;
}

/* ==========================================================================
   CỘT BÊN BÀI VIẾT (.hx-sidebar) & WIDGET CARD (.hx-widget)
   ========================================================================== */

.hx-sidebar {
	min-width: 0;
}

.hx-sidebar__inner {
	display: grid;
	gap: 18px;
}

@media (min-width: 1024px) {
	.hx-sidebar__inner {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 116px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 4px;
		scrollbar-width: thin;
		scrollbar-color: #cbd5e1 transparent;
	}

	.hx-sidebar__inner::-webkit-scrollbar {
		width: 6px;
	}

	.hx-sidebar__inner::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 999px;
	}
}

/* Khung card dùng chung cho mọi widget (kể cả widget mặc định của WordPress). */
.hx-widget {
	padding: 18px 18px 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hx-widget__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid #eef2f7;
	color: #0f172a;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
}

.hx-widget__title::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 18px;
	border-radius: 999px;
	background: linear-gradient(180deg, #34d399, #047857);
}

.hx-widget__more {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed #e2e8f0;
}

.hx-widget__more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #047857;
	font-size: 13.5px;
	font-weight: 800;
	text-decoration: none;
}

.hx-widget__more a i {
	transition: transform 0.2s ease;
}

.hx-widget__more a:hover {
	color: #065f46;
	text-decoration: none;
}

.hx-widget__more a:hover i,
.hx-widget__more a:focus-visible i {
	transform: translateX(3px);
}

.hx-widget__empty {
	margin: 0;
	color: #94a3b8;
	font-size: 14px;
}

/* --- Danh sách bài viết / sản phẩm trong widget --- */
.hx-widget .hx-wlist {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-widget .hx-wpost,
.hx-widget .hx-wprod {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.hx-widget .hx-wpost__thumb,
.hx-widget .hx-wprod__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 14px;
	background: #f1f5f9;
}

.hx-widget .hx-wpost__thumb img,
.hx-widget .hx-wprod__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hx-widget .hx-wpost:hover img,
.hx-widget .hx-wprod:hover img {
	transform: scale(1.08);
}

.hx-widget .hx-wpost__body,
.hx-widget .hx-wprod__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.hx-widget .hx-wpost__title,
.hx-widget .hx-wprod__title {
	display: -webkit-box;
	overflow: hidden;
	color: #1e293b;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hx-widget .hx-wpost__title:hover,
.hx-widget .hx-wprod__title:hover {
	color: #047857;
	text-decoration: none;
}

.hx-widget .hx-wpost__meta,
.hx-widget .hx-wprod__size {
	color: #94a3b8;
	font-size: 12px;
	font-weight: 600;
}

.hx-widget .hx-wpost__meta i,
.hx-widget .hx-wprod__size i {
	margin-right: 5px;
}

.hx-widget .hx-wprod__price {
	color: #047857;
	font-size: 14px;
	font-weight: 800;
}

.hx-widget .hx-wprod__price span {
	color: #64748b;
	font-size: 12px;
	font-weight: 600;
}

/* --- Chuyên mục kèm chip số lượng --- */
.hx-widget .hx-wcats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-widget .hx-wcats .cat-item {
	margin: 0;
}

.hx-widget .hx-wcats .cat-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 12px;
	color: #334155;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.hx-widget .hx-wcats .cat-item a:hover,
.hx-widget .hx-wcats .cat-item a:focus-visible {
	background: #f0fdf4;
	color: #047857;
	text-decoration: none;
}

.hx-widget .hx-wcats__name i {
	margin-right: 7px;
	color: #34d399;
}

.hx-widget .hx-wcats__count {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 2px 8px;
	background: #f1f5f9;
	border-radius: 999px;
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
}

/* --- Từ khoá dạng chip --- */
.hx-widget .hx-wchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hx-widget .hx-wchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #475569;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.hx-widget .hx-wchip:hover,
.hx-widget .hx-wchip:focus-visible {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
	text-decoration: none;
}

.hx-widget .hx-wchip__count {
	color: #94a3b8;
	font-size: 11px;
	font-weight: 800;
}

/* --- Widget đặt hàng nhanh --- */
.hx-widget.hx-widget-cta,
.hx-widget.hx-widget--cta {
	padding: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #f6fdf9 100%);
	border-color: #bbf7d0;
}

.hx-widget .hx-wcta__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
}

.hx-widget .hx-wcta__amount {
	color: #047857;
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1.1;
}

.hx-widget .hx-wcta__amount span {
	color: #059669;
	font-size: 0.85rem;
	font-weight: 700;
}

.hx-widget .hx-wcta__note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0 0 14px;
	color: #475569;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.hx-widget .hx-wcta__note i {
	margin-top: 3px;
	color: #10b981;
}

.hx-widget .hx-wcta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-bottom: 8px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hx-widget .hx-wcta__btn--primary {
	background: #059669;
	color: #fff;
	box-shadow: 0 10px 18px -12px rgba(5, 150, 105, 0.9);
}

.hx-widget .hx-wcta__btn--primary:hover,
.hx-widget .hx-wcta__btn--primary:focus-visible {
	background: #047857;
	color: #fff;
	text-decoration: none;
}

.hx-widget .hx-wcta__btn--ghost {
	background: #fff;
	border-color: #e2e8f0;
	color: #1e293b;
}

.hx-widget .hx-wcta__btn--ghost:hover,
.hx-widget .hx-wcta__btn--ghost:focus-visible {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
	text-decoration: none;
}

.hx-widget .hx-wcta__btn--zalo {
	background: #0068ff;
	color: #fff;
}

.hx-widget .hx-wcta__btn--zalo:hover,
.hx-widget .hx-wcta__btn--zalo:focus-visible {
	background: #0056d6;
	color: #fff;
	text-decoration: none;
}

.hx-widget .hx-wcta__info {
	display: grid;
	gap: 7px;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed #a7f3d0;
	list-style: none;
}

.hx-widget .hx-wcta__info li,
.hx-widget .hx-wcta__info li a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #475569;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
}

.hx-widget .hx-wcta__info i {
	margin-top: 2px;
	color: #059669;
}

.hx-widget .hx-wcta__info a:hover {
	color: #047857;
}

/* --- Dự phòng: widget khối / widget mặc định của WordPress vẫn gọn trong card --- */
.hx-widget .wp-block-heading {
	margin: 0 0 12px;
	color: #0f172a;
	font-size: 1rem;
	font-weight: 800;
}

.hx-widget .wp-block-group__inner-container > * + * {
	margin-top: 10px;
}

.hx-widget ul.wp-block-latest-posts__list,
.hx-widget ul.wp-block-archives-list,
.hx-widget ul.wp-block-categories-list,
.hx-widget ul.wp-block-latest-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-widget ul.wp-block-latest-posts__list li,
.hx-widget ul.wp-block-archives-list li,
.hx-widget ul.wp-block-categories-list li,
.hx-widget ul.wp-block-latest-comments li {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px dashed #eef2f7;
	font-size: 14px;
	line-height: 1.5;
}

.hx-widget ul.wp-block-latest-posts__list li:last-child,
.hx-widget ul.wp-block-archives-list li:last-child,
.hx-widget ul.wp-block-categories-list li:last-child,
.hx-widget ul.wp-block-latest-comments li:last-child {
	border-bottom: 0;
}

.hx-widget ul.wp-block-latest-posts__list a,
.hx-widget ul.wp-block-archives-list a,
.hx-widget ul.wp-block-categories-list a,
.hx-widget ul.wp-block-latest-comments a {
	color: #334155;
	font-weight: 700;
	text-decoration: none;
}

.hx-widget ul.wp-block-latest-posts__list a:hover,
.hx-widget ul.wp-block-archives-list a:hover,
.hx-widget ul.wp-block-categories-list a:hover,
.hx-widget ul.wp-block-latest-comments a:hover {
	color: #047857;
}

.hx-widget .wp-block-categories-list .cat-item {
	color: #94a3b8;
}

.hx-widget .wp-block-search__label {
	display: none;
}

.hx-widget .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 0;
	border: 0;
}

.hx-widget .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #1e293b;
	font-size: 14px;
}

.hx-widget .wp-block-search__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px;
	background: #059669;
	border: 0;
	border-radius: 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.hx-widget .wp-block-search__button:hover {
	background: #047857;
}

.hx-widget .tagcloud a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px 0;
	padding: 5px 11px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #475569;
	font-size: 12.5px !important;
	font-weight: 600;
	text-decoration: none;
}

.hx-widget .tagcloud a:hover {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

/* ==========================================================================
   PHÂN TRANG DANH SÁCH (.hx-pagination) — liên kết thật, có rel prev/next
   ========================================================================== */

.hx-pagination {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-top: 40px;
}

.hx-pagination__status {
	margin: 0;
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
}

.hx-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	color: #334155;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.hx-page:hover,
a.hx-page:focus-visible {
	background: #ecfdf5;
	border-color: #6ee7b7;
	color: #047857;
	text-decoration: none;
}

.hx-page--current {
	background: #059669;
	border-color: #059669;
	color: #fff;
	box-shadow: 0 10px 18px -14px rgba(5, 150, 105, 1);
	cursor: default;
}

.hx-pagination__gap {
	padding: 0 2px;
	color: #94a3b8;
	font-weight: 700;
}

@media (max-width: 479px) {
	.hx-page {
		min-width: 38px;
		height: 38px;
		padding: 0 9px;
		font-size: 13px;
	}

	.hx-pagination__list {
		gap: 6px;
	}
}


/* ==========================================================================
   CÔNG CỤ TÍNH: Ô TỰ NHẬP ĐƯỜNG KÍNH GHẾ & GỢI Ý NẠP THÊM
   (dùng CSS thuần vì bản Tailwind build không có utility màu cam/đỏ)
   ========================================================================== */

/* --- Ô tự nhập đường kính: luôn nổi bật bằng màu cam để khách dễ thấy --- */
.hx-diam {
	position: relative;
	margin-top: 4px;
	padding: 14px 16px 16px;
	background: #fff7ed;
	border: 2px dashed #fb923c;
	border-radius: 18px;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hx-diam__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.hx-diam__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: #ea580c;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: hx-diam-pulse 2s ease-in-out infinite;
}

.hx-diam__label {
	margin: 0;
	color: #9a3412;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hx-diam__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.hx-diam__field {
	position: relative;
	flex: 1 1 150px;
	max-width: 230px;
}

.hx-diam__input {
	width: 100%;
	padding: 12px 46px 12px 14px;
	background: #fff;
	border: 2px solid #fb923c;
	border-radius: 12px;
	color: #7c2d12;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.hx-diam__input::-webkit-outer-spin-button,
.hx-diam__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.hx-diam__input::placeholder {
	color: #fdba74;
	font-size: 16px;
	font-weight: 600;
}

.hx-diam__input:focus {
	border-color: #ea580c;
	box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.3);
}

.hx-diam__unit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: #ea580c;
	font-size: 14px;
	font-weight: 800;
	pointer-events: none;
}

.hx-diam__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #fdba74;
	border-radius: 12px;
	color: #c2410c;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hx-diam__clear:hover,
.hx-diam__clear:focus-visible {
	background: #ffedd5;
	border-color: #fb923c;
}

.hx-diam__hint {
	margin: 10px 0 0;
	color: #9a3412;
	font-size: 12px;
	line-height: 1.55;
}

.hx-diam__result {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 10px;
	color: #7c2d12;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.hx-diam__warn {
	margin: 6px 0 0;
	color: #c2410c;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

/* Nút "Xoá" và dòng ghi chú dùng thuộc tính hidden -> phải ép ẩn (CSS class mạnh hơn hidden). */
.hx-diam [hidden] {
	display: none !important;
}

/* Đang tính theo đường kính tự nhập: viền liền, nền đậm hơn. */
.hx-diam.is-active {
	background: #ffedd5;
	border-style: solid;
	border-color: #ea580c;
	box-shadow: 0 16px 30px -20px rgba(234, 88, 12, 0.7);
}

.hx-diam.is-active .hx-diam__tag {
	animation: none;
}

/* Nhập sai khoảng đường kính: chuyển sang cảnh báo đỏ. */
.hx-diam.is-invalid {
	background: #fef2f2;
	border-color: #dc2626;
}

.hx-diam.is-invalid .hx-diam__tag {
	background: #dc2626;
	animation: none;
}

.hx-diam .hx-diam__input.is-invalid {
	border-color: #dc2626;
	color: #991b1b;
}

.hx-diam.is-invalid .hx-diam__result {
	color: #b91c1c;
}

/* Danh sách mẫu ghế mờ đi khi đường kính tự nhập đang được dùng. */
#preset-chair.is-overridden {
	opacity: 0.5;
}

@keyframes hx-diam-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5);
	}

	50% {
		box-shadow: 0 0 0 6px rgba(234, 88, 12, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hx-diam__tag {
		animation: none;
	}
}

/* --- Gợi ý nạp thêm về sau (sau ~6 tháng, ~12 tháng) trong thẻ kết quả --- */
.hx-suggest {
	margin-top: 16px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(110, 231, 183, 0.45);
	border-radius: 18px;
}

.hx-suggest__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hx-suggest__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-suggest__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 9px 12px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
}

.hx-suggest__label {
	flex: 1 1 150px;
	color: #e2e8f0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.hx-suggest__pct {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	background: rgba(52, 211, 153, 0.2);
	border-radius: 999px;
	color: #6ee7b7;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

.hx-suggest__value {
	text-align: right;
	white-space: nowrap;
}

.hx-suggest__kg {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.hx-suggest__cost {
	display: block;
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 700;
}

.hx-suggest__note {
	margin: 10px 0 0;
	color: #cbd5e1;
	font-size: 12px;
	line-height: 1.55;
}

.hx-suggest__link {
	margin-left: 4px;
	color: #6ee7b7;
	font-weight: 700;
	text-decoration: underline;
}

.hx-suggest__link:hover,
.hx-suggest__link:focus-visible {
	color: #a7f3d0;
}


/* ==========================================================================
   KHỐI "NỘI DUNG ĐƠN HÀNG ĐÃ CHỌN": Ô TỰ SỬA SỐ KG MUỐN MUA
   (chỉ nhận số kg chẵn; giá tạm tính chưa gồm phí vận chuyển)
   ========================================================================== */

.hx-kg-edit {
	margin-top: 12px;
	padding: 12px 14px 14px;
	background: #fff7ed;
	border: 1px dashed #fdba74;
	border-radius: 14px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hx-kg-edit__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.hx-kg-edit__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #9a3412;
	font-size: 14px;
	font-weight: 700;
}

.hx-kg-edit__field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.hx-kg-edit__input {
	width: 6.5rem;
	padding: 9px 40px 9px 10px;
	background: #fff;
	border: 2px solid #fb923c;
	border-radius: 12px;
	color: #7c2d12;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.hx-kg-edit__input::-webkit-outer-spin-button,
.hx-kg-edit__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.hx-kg-edit__input:focus {
	border-color: #ea580c;
	box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.28);
}

.hx-kg-edit__unit {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: #ea580c;
	font-size: 14px;
	font-weight: 800;
	pointer-events: none;
}

.hx-kg-edit__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #fdba74;
	border-radius: 10px;
	color: #c2410c;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hx-kg-edit__reset:hover,
.hx-kg-edit__reset:focus-visible {
	background: #ffedd5;
	border-color: #fb923c;
}

/* Nút "Tính lại theo công cụ" + dòng ghi chú/cảnh báo dùng hidden -> phải ép ẩn. */
.hx-kg-edit [hidden] {
	display: none !important;
}

.hx-kg-edit__note {
	margin: 10px 0 0;
	color: #9a3412;
	font-size: 12px;
	line-height: 1.55;
}

.hx-kg-edit__note i {
	margin-right: 4px;
	color: #ea580c;
}

.hx-kg-edit__ship {
	display: block;
	margin-top: 2px;
	color: #b45309;
	font-weight: 700;
}

/* Dòng thông báo đã làm tròn / đã trả về số kg công cụ tính (màu hổ phách). */
.hx-kg-edit__hint,
.hx-kg-edit__warn {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.hx-kg-edit__hint {
	color: #b45309;
}

/* Số kg vượt mức cho phép -> cảnh báo đỏ. */
.hx-kg-edit__warn {
	color: #b91c1c;
}

/* Chỉ là nhắc nhở (đã làm tròn số lẻ, trả về số kg công cụ tính) -> màu hổ phách. */
.hx-kg-edit__warn.is-info {
	color: #b45309;
}

/* Khách đã tự sửa số kg -> nhấn mạnh bằng viền liền, nền đậm hơn. */
.hx-kg-edit.is-overridden {
	background: #ffedd5;
	border-style: solid;
	border-color: #fb923c;
}

.hx-kg-edit.is-invalid {
	background: #fef2f2;
	border-color: #fca5a5;
}

.hx-kg-edit.is-invalid .hx-kg-edit__input {
	border-color: #dc2626;
	color: #991b1b;
}