/**
 * HatXop - CSS bổ sung (style gốc của bản thiết kế nằm trong style.css).
 *
 * @package HatXop
 */

/* Logo */
.hx-logo { display: inline-flex; align-items: center; gap: .5rem; }
.hx-logo-text { line-height: 1.1; }

/* Breadcrumb của Rank Math / Breadcrumb NavXT trên nền sáng */
.hx-breadcrumb-wrap { padding-top: 1.5rem; }
.hx-breadcrumb-wrap a { color: #0284c7; text-decoration: none; }
.hx-breadcrumb-wrap .breadcrumb-trail,
.hx-breadcrumb-wrap .rank-math-breadcrumb { font-size: .875rem; color: #64748b; }

/* Trang bài viết / trang tĩnh: nội dung không tràn */
.hx-entry iframe,
.hx-entry video { max-width: 100%; border-radius: .75rem; }
.hx-entry .wp-block-image img { border-radius: .75rem; }

/* -------------------------------------------------------------------------
 * CHỐNG TRÀN NGANG TRÊN MOBILE
 * Các bài cũ dùng [caption width="640"] nên WordPress in ra
 *   <figure class="wp-caption aligncenter" style="width: 640px">
 * width cứng này làm cả cột nội dung (grid) rộng tối thiểu 640px => cả trang
 * rộng ~706px: ảnh tràn ra ngoài khung điện thoại, header/footer và thanh liên
 * hệ nhanh bị kéo dãn, phải cuộn ngang mới xem hết.
 * => Bỏ width cứng, chặn mọi phần tử con rộng quá khung.
 * ---------------------------------------------------------------------- */
.hx-entry img,
.hx-entry iframe,
.hx-entry video,
.hx-entry table { max-width: 100%; }

.hx-entry figure,
.hx-entry .wp-caption,
.hx-entry .gallery,
.hx-entry .gallery-item,
.hx-entry .wp-block-image { max-width: 100%; }

/* width tính bằng px do inline style / thẻ <style> của shortcode caption-gallery */
.hx-entry figure[style*="width"],
.hx-entry .wp-caption { width: auto !important; }

/* Gallery của bài cũ: ảnh luôn nằm trong khung, không đẩy cột rộng ra */
.hx-entry .gallery-item img { max-width: 100%; height: auto; }
.hx-entry pre {
	background: #0f172a;
	color: #e2e8f0;
	padding: 1rem;
	border-radius: .75rem;
	overflow-x: auto;
	font-size: .875rem;
}
.hx-entry code { background: #f1f5f9; padding: .1em .4em; border-radius: .35rem; font-size: .9em; }
.hx-entry pre code { background: transparent; padding: 0; }

/* Bảng dài trong bài viết thì cho cuộn ngang */
.hx-table-scroll table { margin: 0; }

/* -------------------------------------------------------------------------
 * MENU CHÍNH (thanh ngang gọn + dropdown nhiều cấp)
 * ---------------------------------------------------------------------- */
.hx-main-nav { justify-content: flex-end; }

.hx-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	font-weight: 600;
	color: #475569;
}

.hx-nav .hx-nav-item { position: relative; }

.hx-nav .hx-nav-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .5rem .6rem;
	border-radius: .6rem;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}

.hx-nav .hx-nav-link:hover,
.hx-nav .hx-has-sub:hover > .hx-nav-link,
.hx-nav .hx-current > .hx-nav-link { color: #0284c7; background-color: #f0f9ff; }
.hx-nav .hx-current > .hx-nav-link { font-weight: 700; }

/* Menu con cấp 1: xổ xuống dưới */
.hx-nav .hx-sub-menu {
	position: absolute;
	top: calc(100% + .3rem);
	left: 0;
	z-index: 60;
	min-width: 15rem;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: .9rem;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

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

/* Menu con cấp 2 trở đi: xổ sang phải */
.hx-nav .hx-sub-menu .hx-sub-menu { top: -.35rem; left: 100%; }

/* Mục "Xem thêm" nằm sát mép phải: mở dropdown canh phải để không tràn màn hình */
.hx-nav .hx-more-item > .hx-sub-menu { left: auto; right: 0; }
.hx-nav .hx-more-item .hx-sub-menu .hx-sub-menu { left: auto; right: 100%; }

.hx-nav .hx-nav-sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .45rem .6rem;
	border-radius: .6rem;
	color: #475569;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}

.hx-nav .hx-nav-sub-link:hover,
.hx-nav .hx-current > .hx-nav-sub-link { color: #0369a1; background-color: #f0f9ff; }

/* Icon trước mỗi mục menu: mỗi mục một icon KHÁC NHAU (xem hx_menu_icon()) */
.hx-nav .hx-nav-ico {
	width: 1.05rem;
	min-width: 1.05rem;
	font-size: .8rem;
	line-height: 1;
	text-align: center;
	color: #0284c7;
	opacity: .85;
	transition: opacity .15s ease;
}

.hx-nav .hx-nav-text { flex: 1 1 auto; }

.hx-nav .hx-nav-sub-link .hx-nav-ico {
	width: .95rem;
	min-width: .95rem;
	font-size: .72rem;
	color: #0369a1;
	opacity: .7;
}

/* Icon rõ hơn khi hover / khi mục đang được chọn */
.hx-nav .hx-nav-link:hover .hx-nav-ico,
.hx-nav .hx-has-sub:hover > .hx-nav-link .hx-nav-ico,
.hx-nav .hx-current > .hx-nav-link .hx-nav-ico,
.hx-nav .hx-nav-sub-link:hover .hx-nav-ico,
.hx-nav .hx-current > .hx-nav-sub-link .hx-nav-ico { opacity: 1; }

.hx-caret { font-size: .5rem; opacity: .5; transition: transform .15s ease; }

/* Menu fallback (chưa gán menu) do wp_list_pages sinh ra */
.hx-nav .page_item > a {
	display: inline-flex;
	align-items: center;
	padding: .5rem .6rem;
	border-radius: .6rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.hx-nav .page_item > a:hover { color: #0284c7; background-color: #f0f9ff; }

/* -------------------------------------------------------------------------
 * MENU MOBILE: ẩn mặc định, mở bằng nút hamburger, menu con dạng accordion
 * (chỉ áp dụng dưới 1280px - từ 1280px trở lên dùng menu ngang)
 * ---------------------------------------------------------------------- */
@media ( max-width: 1279.98px ) {
	.hx-mobile-menu { display: none; }
	.hx-mobile-menu.is-open { display: block; }

	.hx-nav-mobile {
		display: block;
		font-size: .95rem;
		font-weight: 600;
	}
	.hx-nav-mobile .hx-nav-item { position: static; }

	.hx-nav-mobile .hx-nav-link,
	.hx-nav-mobile .hx-nav-sub-link {
		display: flex;
		justify-content: space-between;
		gap: .5rem;
		width: 100%;
		padding: .65rem .25rem;
		border: 0;
		border-bottom: 1px solid #f1f5f9;
		border-radius: 0;
		background: none;
		color: #334155;
		font-size: .95rem;
		font-weight: 600;
	}

	.hx-nav-mobile .hx-nav-sub-link { padding-left: .85rem; font-weight: 500; color: #475569; }

	.hx-nav-mobile .hx-nav-ico {
		width: 1.35rem;
		min-width: 1.35rem;
		font-size: .95rem;
	}

	.hx-nav-mobile .hx-nav-sub-link .hx-nav-ico {
		width: 1.15rem;
		min-width: 1.15rem;
		font-size: .85rem;
	}

	.hx-nav-mobile .hx-sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: .15rem 0 .35rem .85rem;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hx-nav-mobile .hx-has-sub.hx-open > .hx-sub-menu { display: block; }
	.hx-nav-mobile .hx-has-sub.hx-open > .hx-nav-link .hx-caret { transform: rotate(180deg); }
}

/* -------------------------------------------------------------------------
 * NÚT GỌI HOTLINE TRONG HEADER
 * Dưới 1536px: chỉ hiện icon gọn (không lặp lại số điện thoại đã có ở nút Zalo).
 * Từ 1536px: hiện đủ icon + số điện thoại.
 * ---------------------------------------------------------------------- */
.hx-hotline-link {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 9999px;
	color: #334155;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.hx-hotline-link .hx-hotline-num { display: none; }
.hx-hotline-link:hover { color: #0284c7; background-color: #f8fafc; border-color: #bae6fd; }

@media ( min-width: 768px ) {
	.hx-hotline-link { display: inline-flex; }
}

@media ( min-width: 1536px ) {
	.hx-hotline-link { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; }
	.hx-hotline-link .hx-hotline-num { display: inline; }
	.hx-hotline-link:hover { background-color: transparent; border-color: transparent; }
}

/* Khối widget trong sidebar */
#sidebar .widget { margin-bottom: 1.5rem; }
#sidebar ul { list-style: none; margin: 0; padding: 0; }
#sidebar ul li { padding: .4rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; }
#sidebar ul li a { color: #334155; text-decoration: none; }
#sidebar ul li a:hover { color: #0284c7; }

/* Nút liên hệ khi chạm trên thiết bị cảm ứng */
@media ( hover: none ) {
	.hx-sc-btn:active,
	.zalo-btn:active { transform: scale( .96 ); }
}

/* Đảm bảo iframe map không tràn */
.hx-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: 1rem; }

/* -------------------------------------------------------------------------
 * WIDGET TRONG SIDEBAR
 * Widget "Tìm kiếm" và widget "Sản phẩm" của WooCommerce in HTML mặc định nên
 * cần style lại: trước đây ảnh 300x300 xếp dọc, giá <del>/<ins> trôi nổi,
 * ô tìm kiếm không có kiểu dáng (nhìn như lỗi).
 * ---------------------------------------------------------------------- */

/* Tìm kiếm */
#sidebar .search-form { display: flex; gap: .5rem; }
#sidebar .search-form label { flex: 1 1 auto; min-width: 0; margin: 0; }
#sidebar .search-form .search-field {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid #cbd5e1;
	border-radius: .75rem;
	font-size: .9rem;
	color: #0f172a;
	background: #fff;
}
#sidebar .search-form .search-field:focus {
	outline: none;
	border-color: #38bdf8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, .2);
}
#sidebar .search-form .search-submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: #0284c7;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	padding: .6rem .9rem;
	border-radius: .75rem;
}
#sidebar .search-form .search-submit:hover { background: #0369a1; }

/* Widget "Sản phẩm" (WooCommerce): mỗi sản phẩm là 1 thẻ hàng ngang gọn */
#sidebar ul.product_list_widget li {
	display: block;
	margin: 0 0 .65rem;
	padding: .55rem;
	border: 1px solid #e2e8f0;
	border-radius: .9rem;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#sidebar ul.product_list_widget li:last-child { margin-bottom: 0; }
#sidebar ul.product_list_widget li:hover {
	border-color: #7dd3fc;
	box-shadow: 0 12px 24px -16px rgba(2, 132, 199, .65);
	transform: translateY(-1px);
}
#sidebar ul.product_list_widget li a {
	display: flex;
	align-items: center;
	gap: .7rem;
	float: none;
	text-decoration: none;
}
#sidebar ul.product_list_widget li img {
	float: none;
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	object-fit: cover;
	margin: 0;
	border: 1px solid #eef2f7;
	border-radius: .7rem;
}
#sidebar ul.product_list_widget .product-title {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.4;
	color: #0f172a;
}
#sidebar ul.product_list_widget li a:hover .product-title { color: #0284c7; }

/* Giá: giá đang bán đậm màu đỏ, giá gạch bỏ nhỏ và mờ.
   Thụt lề 76px (= 64px ảnh + khe hở) để giá thẳng hàng với tên sản phẩm. */
#sidebar ul.product_list_widget ins { text-decoration: none; }
#sidebar ul.product_list_widget del { display: inline-block; margin-left: 76px; }
#sidebar ul.product_list_widget .woocommerce-Price-amount {
	font-size: .9rem;
	font-weight: 800;
	color: #dc2626;
}
#sidebar ul.product_list_widget del,
#sidebar ul.product_list_widget del .woocommerce-Price-amount {
	color: #94a3b8;
	font-size: .78rem;
	font-weight: 600;
	text-decoration: line-through;
}

/* Widget văn bản / danh mục / bài mới */
#sidebar img { max-width: 100%; height: auto; }
#sidebar .textwidget { font-size: .875rem; line-height: 1.7; color: #475569; }
#sidebar .textwidget p { margin: 0 0 .6rem; }
#sidebar .textwidget a { color: #0284c7; text-decoration: none; }
#sidebar .textwidget a:hover { text-decoration: underline; }
#sidebar ul li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
 * DẢI CTA NGAY DƯỚI TIÊU ĐỀ BÀI VIẾT (tăng tỉ lệ gọi/mua)
 * ---------------------------------------------------------------------- */
.hx-cta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 70%);
	border: 1px solid #bae6fd;
	border-left: 4px solid #0284c7;
	border-radius: 1rem;
	padding: .85rem 1rem;
	margin: 0 0 1.75rem;
}
.hx-cta-text { flex: 1 1 260px; margin: 0; font-size: .9rem; line-height: 1.55; color: #334155; }
.hx-cta-text-icon { color: #0284c7; margin-right: .35rem; }
.hx-cta-price { color: #dc2626; font-weight: 900; }
.hx-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hx-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .58rem .85rem;
	border-radius: .75rem;
	font-size: .85rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}
.hx-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hx-cta-btn-call { background: #f59e0b; color: #1e293b; }
.hx-cta-btn-zalo { background: #0068ff; color: #fff; }
.hx-cta-btn-order { background: #0f172a; color: #fff; }

@media ( max-width: 640px ) {
	.hx-cta-actions { width: 100%; }
	.hx-cta-btn { flex: 1 1 0; justify-content: center; }
}

/* -------------------------------------------------------------------------
 * THẺ CTA TRONG SIDEBAR (in trước các widget)
 * ---------------------------------------------------------------------- */
.hx-sidebar-cta {
	background: linear-gradient(160deg, #0284c7 0%, #0c4a6e 100%);
	border-radius: 1.25rem;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	color: #e2e8f0;
	box-shadow: 0 18px 36px -24px rgba(12, 74, 110, .9);
}
.hx-sidebar-cta-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 800; color: #fff; }
.hx-sidebar-cta-price { margin: 0; font-size: 1.85rem; font-weight: 900; line-height: 1.1; color: #fbbf24; }
.hx-sidebar-cta-unit { font-size: .95rem; font-weight: 700; color: #fde68a; }
.hx-sidebar-cta-note { margin: .5rem 0 1rem; font-size: .8rem; line-height: 1.6; color: #bae6fd; }
.hx-sidebar-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem .9rem;
	margin-bottom: .5rem;
	border-radius: .85rem;
	font-size: .875rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}
.hx-sidebar-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hx-sidebar-cta-call { background: #f59e0b; color: #1e293b; }
.hx-sidebar-cta-zalo { background: #0068ff; color: #fff; }
.hx-sidebar-cta-order {
	margin-bottom: 0;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
}
.hx-sidebar-cta-hint { margin: .9rem 0 0; font-size: .75rem; color: #bae6fd; }

/* -------------------------------------------------------------------------
 * THANH LIÊN HỆ NHANH TRƯỢT THEO TRANG (Hotline - Zalo - Đặt hàng)
 * Mặc định (dưới 1440px, gồm cả mobile): 3 nút cố định ở đáy màn hình.
 * ---------------------------------------------------------------------- */

.hx-sc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	padding-bottom: env( safe-area-inset-bottom );
}
.hx-sc-list { display: flex; margin: 0; padding: 0; list-style: none; }
.hx-sc-cell { flex: 1 1 0; min-width: 0; }
.hx-sc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	height: 3.25rem;
	padding: 0 .5rem;
	font-size: .9rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, .5);
	transition: background-color .15s ease, transform .15s ease;
}
.hx-sc-icon { font-size: 1.05rem; line-height: 1; }
.hx-sc-label small { display: none; }
.hx-sc-call { background: #0284c7; color: #fff; }
.hx-sc-zalo { background: #0068ff; color: #fff; }
.hx-sc-order { background: #f59e0b; color: #1e293b; }
.hx-sc-call:hover { background: #0369a1; }
.hx-sc-zalo:hover { background: #0052cc; }
.hx-sc-order:hover { background: #fbbf24; }

/* Thanh dưới đáy dùng cho tới 1439px: ở khoảng 1280 - 1439px cột nội dung chiếm
   gần hết chiều ngang nên ray dọc bên phải sẽ đè lên sidebar (che nút, khó bấm). */
@media ( max-width: 1439px ) {
	.hx-footer { padding-bottom: 5.5rem; }
}

/* Từ 1440px: đã có khoảng trống hai bên (nội dung tối đa 1280px) nên chuyển sang
   ray dọc bên phải, nút tròn, hiện nhãn khi hover/focus. */
@media ( min-width: 1440px ) {
	.hx-sc { left: auto; right: .6rem; top: 50%; bottom: auto; padding-bottom: 0; transform: translateY(-50%); }
	.hx-sc-list { flex-direction: column; gap: .7rem; }
	.hx-sc-cell { flex: 0 0 auto; }
	.hx-sc-btn {
		position: relative;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border-radius: 9999px;
		box-shadow: 0 14px 28px -12px rgba(15, 23, 42, .5);
	}
	.hx-sc-btn:hover { transform: translateY(-2px); }
	.hx-sc-label {
		position: absolute;
		right: calc( 100% + .65rem );
		top: 50%;
		display: flex;
		align-items: center;
		gap: .35rem;
		transform: translateY(-50%) translateX(.4rem);
		padding: .45rem .7rem;
		border-radius: .6rem;
		background: #0f172a;
		color: #fff;
		font-size: .8rem;
		font-weight: 700;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .75);
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	}
	.hx-sc-label small { display: inline; color: #fbbf24; }
	.hx-sc-btn:hover .hx-sc-label,
	.hx-sc-btn:focus-visible .hx-sc-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
	.hx-sc-call { animation: hxScRing 2.4s ease-in-out infinite; }
}

@keyframes hxScRing {
	0%, 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, .55), 0 14px 28px -12px rgba(15, 23, 42, .5); }
	50% { box-shadow: 0 0 0 .5rem rgba(2, 132, 199, 0), 0 14px 28px -12px rgba(15, 23, 42, .5); }
}

/* Không in thanh liên hệ ra giấy */
@media print {
	.hx-sc { display: none; }
}

/* -------------------------------------------------------------------------
 * CHÂN TRANG: 4 CỘT (thêm cột "Liên kết hữu ích" - chống trang mồ côi)
 * ---------------------------------------------------------------------- */
.hx-footer-cols {
	max-width: 80rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media ( min-width: 768px ) {
	.hx-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media ( min-width: 1200px ) {
	.hx-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hx-footer-links { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.hx-footer-links li { margin-bottom: .6rem; }
.hx-footer-links a { color: #cbd5e1; text-decoration: none; transition: color .15s ease; }
.hx-footer-links a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
 * KHỐI "WEBSITE GIỚI THIỆU" (BACKLINK) - thu gọn ngay trên dòng bản quyền
 * Quản lý tại Giao diện → Liên kết Footer (thêm/sửa/xoá/đổi thứ tự).
 * ---------------------------------------------------------------------- */
.hx-fl-wrap { max-width: 80rem; margin: 2.5rem auto 0; }
.hx-fl {
	border: 1px solid #1e293b;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .035);
	overflow: hidden;
}
.hx-fl-summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 1.15rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color .15s ease;
}
.hx-fl-summary::-webkit-details-marker { display: none; }
.hx-fl-summary::marker { content: ''; }
.hx-fl-summary:hover { background: rgba(255, 255, 255, .045); }
.hx-fl-title {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #e2e8f0;
}
.hx-fl-title i { color: #38bdf8; font-size: .85rem; }
.hx-fl-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .4rem;
	border-radius: 9999px;
	background: rgba(56, 189, 248, .16);
	border: 1px solid rgba(56, 189, 248, .32);
	color: #7dd3fc;
	font-size: .7rem;
	font-weight: 800;
	line-height: 1;
}
.hx-fl-caret {
	width: .5rem;
	height: .5rem;
	margin-left: auto;
	border-right: 2px solid #38bdf8;
	border-bottom: 2px solid #38bdf8;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
	flex: none;
}
.hx-fl[open] .hx-fl-caret { transform: rotate(-135deg) translateY(-2px); }
.hx-fl-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .15rem 1.5rem;
	margin: 0;
	padding: .35rem 1.15rem 1rem;
	list-style: none;
	border-top: 1px solid #1e293b;
}
.hx-fl-list li { min-width: 0; }
.hx-fl-list a {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	padding: .28rem 0;
	color: #94a3b8;
	font-size: .8125rem;
	line-height: 1.45;
	text-decoration: none;
	transition: color .15s ease;
}
.hx-fl-list a::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 9999px;
	background: #38bdf8;
	opacity: .55;
	flex: none;
	transform: translateY(-2px);
}
.hx-fl-list a:hover { color: #fff; text-decoration: underline; }
.hx-fl-list a:hover::before { opacity: 1; }
@media ( max-width: 1023px ) {
	.hx-fl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media ( max-width: 767px ) {
	.hx-fl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media ( max-width: 480px ) {
	.hx-fl-wrap { margin-top: 2rem; }
	.hx-fl-summary { padding: .8rem .9rem; }
	.hx-fl-title { font-size: .75rem; letter-spacing: .05em; }
	.hx-fl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; padding: .3rem .9rem .9rem; }
	.hx-fl-list a { font-size: .78rem; }
}
@media ( max-width: 359px ) {
	.hx-fl-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * HỘP TÁC GIẢ (E-E-A-T: người thật, kinh nghiệm, kênh liên hệ)
 * ---------------------------------------------------------------------- */
.hx-author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
}
.hx-author-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid #e0f2fe;
	background: #f1f5f9;
}
.hx-author-body { flex: 1 1 auto; min-width: 0; }
.hx-author-label {
	margin: 0;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0284c7;
}
.hx-author-name { margin: .15rem 0 .4rem; font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.hx-author-name a { color: inherit; text-decoration: none; }
.hx-author-name a:hover { color: #0284c7; }
.hx-author-bio { margin: 0; font-size: .875rem; line-height: 1.7; color: #475569; }
.hx-author-meta,
.hx-author-contact { margin: .5rem 0 0; font-size: .8rem; color: #64748b; }
.hx-author-meta i,
.hx-author-contact i { color: #0284c7; margin-right: .35rem; }
.hx-author-contact a { color: #0369a1; font-weight: 700; text-decoration: none; }
.hx-author-contact a:hover { text-decoration: underline; }
.hx-author-sep { margin: 0 .35rem; color: #cbd5e1; }

/* -------------------------------------------------------------------------
 * KHỐI FAQ (dùng <details> nên không cần JavaScript, kèm FAQPage schema)
 * ---------------------------------------------------------------------- */
.hx-faq { margin-top: 2rem; }
.hx-faq-title { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.hx-faq-intro { margin: 0 0 1rem; font-size: .9rem; color: #64748b; }
.hx-faq-list { display: grid; gap: .6rem; }
.hx-faq-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: .9rem;
	padding: .1rem .2rem;
	overflow: hidden;
}
.hx-faq-item[open] { background: #fff; border-color: #bae6fd; }
.hx-faq-q {
	cursor: pointer;
	padding: .8rem 1rem;
	font-weight: 700;
	font-size: .92rem;
	color: #0f172a;
	list-style: none;
	position: relative;
	padding-right: 2.4rem;
}
.hx-faq-q::-webkit-details-marker { display: none; }
.hx-faq-q::after {
	content: "+";
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #0284c7;
	font-weight: 900;
	font-size: 1.1rem;
}
.hx-faq-item[open] .hx-faq-q::after { content: "–"; }
.hx-faq-q:hover { color: #0284c7; }
.hx-faq-a {
	padding: 0 1rem .9rem;
	font-size: .875rem;
	line-height: 1.75;
	color: #475569;
}
.hx-faq-a p:first-child { margin-top: 0; }
.hx-faq-a p:last-child { margin-bottom: 0; }

/* Trang chủ: khối FAQ nằm trên nền xám nên cho thẻ trắng nổi lên */
.home .hx-faq-item,
.home .hx-faq-item[open] { background: #fff; }

@media ( max-width: 640px ) {
	.hx-author-box { flex-direction: column; }
}

/* -------------------------------------------------------------------------
 * TRÌNH BÀY LẠI TRÊN MOBILE ( ≤ 640px )
 * Chỉ ảnh hưởng điện thoại, desktop giữ nguyên:
 *   1. Khối CTA cuối bài viết/trang tĩnh: 3 nút xếp dọc full-width (trước đây
 *      `flex-wrap` làm nút "Đặt hàng online" đứng riêng một hàng, hai nút còn
 *      lại lệch nhau ở hàng dưới).
 *   2. Chân trang: các khối xếp dọc được ngăn bằng vạch mảnh; "Liên kết hữu
 *      ích" chia 2 cột nên chân trang ngắn hơn, đỡ phải cuộn dài trên mobile.
 *   3. Thanh liên hệ dưới đáy: nút 2 dòng để hiện lại dòng phụ (số điện thoại,
 *      "phản hồi 1 phút", giá) - trước đây bị ẩn hết trên mobile.
 * ---------------------------------------------------------------------- */
@media ( max-width: 640px ) {
	/* 1. Nút CTA cuối bài viết / trang tĩnh */
	.hx-post-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.hx-post-cta-actions a {
		display: block;
		width: 100%;
	}

	/* 2. Chân trang gọn và rõ ràng hơn khi xếp dọc */
	.hx-footer-cols { gap: 0; }
	.hx-footer-cols > div + div {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
		border-top: 1px solid #1e293b;
	}
	.hx-footer-cols h4 { margin-bottom: .8rem; }
	.hx-footer-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		font-size: .82rem;
		line-height: 1.45;
	}
	.hx-footer-links li { margin-bottom: .45rem; }

	/* 3. Thanh liên hệ dưới đáy: 2 dòng, có dòng thông tin phụ */
	.hx-sc-btn {
		flex-direction: column;
		gap: .15rem;
		height: 3.9rem;
		padding: 0 .35rem;
		font-size: .85rem;
	}
	.hx-sc-label {
		display: flex;
		flex-direction: column;
		gap: .05rem;
		line-height: 1.15;
	}
	.hx-sc-label small { display: block; font-size: .68rem; font-weight: 700; opacity: .95; }
	.hx-sc-icon { font-size: 1rem; }
}

/* ==========================================================================
   5. KÊNH FACEBOOK CHÍNH THỨC (thêm 16/10/2026, port từ 1.3.7/1.3.8 sang
      giao diện XANH DA TRÒI của hatxop.net — bản 1.3.9)
   Gồm: hàng nút mạng xã hội ở footer, khối "Theo dõi hoạt động xưởng" trên
   trang chủ, nút Facebook ở ray liên hệ + thẻ CTA sidebar + hộp tác giả.
   ========================================================================== */

/* 5.1 Hàng nút mạng xã hội ở cột đầu của footer (dưới mô tả + địa chỉ) */
.hx-footer-social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.hx-footer-social-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .85rem;
	border-radius: 9999px;
	font-size: .8125rem;
	font-weight: 800;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s ease, transform .15s ease;
}
.hx-footer-social-link:hover { transform: translateY(-1px); }
.hx-footer-social-fb { background: #1877f2; color: #fff; }
.hx-footer-social-fb:hover { background: #0b5ed7; color: #fff; }
.hx-footer-social-zalo { background: #0068ff; color: #fff; }
.hx-footer-social-zalo:hover { background: #0052cc; color: #fff; }

/* 5.2 Khối "Theo dõi hoạt động xưởng trên Facebook" (trang chủ) */
.hx-fb-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem .7rem;
	border-radius: 9999px;
	background: rgba(24, 119, 242, .18);
	border: 1px solid rgba(24, 119, 242, .45);
	color: #93c5fd;
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.hx-fb-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hx-fb-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem 1.1rem;
	border-radius: .9rem;
	background: #1877f2;
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.hx-fb-btn:hover { background: #0b5ed7; color: #fff; transform: translateY(-1px); }
.hx-fb-btn span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.hx-fb-btn small { font-size: .7rem; font-weight: 700; opacity: .85; }
.hx-fb-btn-zalo { background: #0068ff; }
.hx-fb-btn-zalo:hover { background: #0052cc; }
.hx-fb-hint { margin: 1rem 0 0; font-size: .78rem; line-height: 1.6; color: #cbd5e1; }
.hx-fb-hint i { color: #fbbf24; margin-right: .35rem; }

.hx-fb-points {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	background: rgba(255, 255, 255, .03);
	border-left: 1px solid #1e293b;
}
.hx-fb-point { display: flex; gap: .85rem; align-items: flex-start; }
.hx-fb-point i { color: #93c5fd; font-size: 1.15rem; margin-top: .15rem; }
.hx-fb-point h4 { margin: 0; font-size: .95rem; font-weight: 800; color: #fff; }
.hx-fb-point p { margin: .25rem 0 0; font-size: .8rem; line-height: 1.65; color: #cbd5e1; }

@media ( max-width: 767px ) {
	.hx-fb-points { padding: 1.5rem; border-left: 0; border-top: 1px solid #1e293b; }
}

/* 5.3 Nút Facebook trong thẻ CTA sidebar */
.hx-sidebar-cta-fb { background: #1877f2; color: #fff; }
.hx-sidebar-cta-fb:hover { background: #0b5ed7; color: #fff; }

/* 5.4 Ray liên hệ nay có 4 nút (thêm "Theo dõi FB"): giữ cho không tràn ngang */
.hx-sc { width: 100%; max-width: 100vw; }
.hx-sc-list { width: 100%; }
.hx-sc-cell { min-width: 0; max-width: 100%; }
.hx-sc-fb { background: #1877f2; color: #fff; }
.hx-sc-fb:hover { background: #0b5ed7; }

@media ( max-width: 640px ) {
	/* Trên điện thoại mỗi ô chỉ còn ~90px: chữ nhỏ lại và dòng phụ (tên fanpage,
	   số điện thoại) tự cắt bằng "..." chứ không xuống dòng làm thanh cao thêm. */
	.hx-sc-btn { font-size: .8rem; }
	.hx-sc-label { min-width: 0; max-width: 100%; }
	.hx-sc-label small {
		display: block;
		font-size: .62rem;
		font-weight: 700;
		opacity: .95;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media ( min-width: 1440px ) {
	/* Phải TRẢ `width`/`max-width` về auto: rule gốc ở trên đặt width:100% cho
	   thanh dưới đáy, nếu không reset thì ở >= 1440px khung ray rộng đúng 100vw,
	   bị `right: .6rem` đẩy lòi sang trái ~10px => các nút tròn dồn về mép TRÁI
	   và bị cắt mất một nửa (nhãn hover cũng nằm ngoài màn hình). */
	.hx-sc { width: auto; max-width: none; }
	.hx-sc-list { width: auto; }
}