/*
 * Nét Xinh — kiểu trình bày.
 *
 * Màu và số đo lấy đúng theo bản mẫu (đo bằng Playwright, xem _tools/do-mau/).
 * Bản mẫu dựng bằng Tailwind nên các mốc ở đây theo thang của Tailwind:
 * khung rộng tối đa 1280, lề 16px (từ 1024px trở lên là 32px),
 * điểm gãy: 640 (sm) · 768 (md) · 1024 (lg).
 */

/* ---------- Phông chữ ---------- */

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-400-vietnamese.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-500-vietnamese.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-600-vietnamese.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-700-vietnamese.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Be Vietnam Pro';
	src: url('../fonts/BeVietnamPro-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/*
 * Baloo 2 thay cho Fredoka của bản mẫu: cùng chất chữ tròn nhưng có đủ dấu
 * tiếng Việt. Fredoka thiếu bộ ký tự tiếng Việt nên trên bản mẫu, chữ có dấu
 * rơi về phông của hệ điều hành, mỗi máy hiện một kiểu.
 */
@font-face {
	font-family: 'Baloo 2';
	src: url('../fonts/Baloo2-vietnamese.woff2') format('woff2');
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Baloo 2';
	src: url('../fonts/Baloo2-latin-ext.woff2') format('woff2');
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Baloo 2';
	src: url('../fonts/Baloo2-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-display: swap;
}

/* ---------- Biến ---------- */

:root {
	/* Màu lấy nguyên từ bản mẫu. */
	--nx-nen: oklch(97.1% 0.006 84.6);
	--nx-chu: oklch(25% 0.039 292);
	--nx-the: oklch(100% 0 0);
	--nx-chinh: oklch(71.3% 0.181 20.1);
	--nx-chinh-chu: oklch(100% 0 0);
	--nx-phu: oklch(93.9% 0.031 15.3);
	--nx-phu-chu: oklch(42.4% 0.144 22.8);
	--nx-mo: oklch(90.2% 0.017 84.6);
	--nx-mo-chu: oklch(52.4% 0.041 292);
	--nx-mint: oklch(89.6% 0.051 162.9);
	--nx-khoi: oklch(90.2% 0.017 84.6);
	--nx-tim: oklch(83% 0.075 300);
	--nx-dam: oklch(25% 0.039 292);
	--nx-dam-chu: oklch(100% 0 0);
	--nx-vien: oklch(91.9% 0.011 89.7);

	--nx-r: 12px;
	--nx-r-lon: 16px;
	--nx-r-the: 14px;

	--nx-khung: 1280px;
	--nx-le: 16px;
	--nx-chu-tieu-de: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif;
	--nx-chu-than: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Nền chung ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--nx-nen);
	color: var(--nx-chu);
	font-family: var(--nx-chu-than);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--nx-chu-tieu-de);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}

p {
	margin: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nx-ic {
	flex: 0 0 auto;
}

/* Thuộc tính hidden phải thắng mọi kiểu display khai báo bên dưới. */
[hidden] {
	display: none !important;
}

.screen-reader-text,
.nx-bay {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.nx-bo-qua {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	padding: 10px 18px;
	border-radius: 0 0 var(--nx-r) 0;
}

.nx-bo-qua:focus {
	left: 0;
}

.nx-khung {
	width: 100%;
	max-width: var(--nx-khung);
	margin: 0 auto;
	padding-left: var(--nx-le);
	padding-right: var(--nx-le);
}

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

.nx-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: var(--nx-r);
	font-family: var(--nx-chu-tieu-de);
	font-weight: 600;
	font-size: 15px;
	padding: 0.75rem 1.5rem;
	transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
}

.nx-nut--chinh {
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-nut--chinh:hover {
	opacity: 0.92;
}

.nx-nut--chinh:active {
	transform: translateY(1px);
}

.nx-nut--phu {
	border: 1.5px solid var(--nx-chu);
	padding: calc(0.75rem - 1.5px) calc(1.5rem - 1.5px);
}

.nx-nut--phu:hover {
	background: rgba(0, 0, 0, 0.04);
}

.nx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 999px;
	border: 1px solid var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	font-size: 13px;
	font-weight: 500;
	padding: 0.375rem 0.875rem;
	white-space: nowrap;
}

/* ---------- Thanh thông báo + đầu trang ---------- */

.nx-thong-bao {
	background: var(--nx-dam);
	color: var(--nx-dam-chu);
}

.nx-thong-bao p {
	max-width: var(--nx-khung);
	margin: 0 auto;
	padding: 8px var(--nx-le);
	text-align: center;
	font-size: 11px;
}

/*
 * Đầu trang phải nằm TRÊN lớp phủ của menu điện thoại (z-index 60). Để thấp hơn
 * thì lớp phủ che mất chính cái nút vừa mở nó, khách bấm đóng không được, phải
 * bấm bừa vào một mục nào đó mới thoát ra.
 */
.nx-dau-trang {
	position: sticky;
	top: 0;
	z-index: 70;
	border-bottom: 1px solid var(--nx-vien);
	background: color-mix(in oklab, var(--nx-nen) 95%, transparent);
	backdrop-filter: blur(8px);
}

.nx-dau-trang__trong {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.nx-nut-menu {
	display: inline-flex;
	padding: 0;
}

.nx-logo {
	font-family: var(--nx-chu-tieu-de);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	white-space: nowrap;
}

.nx-logo__cuoi {
	color: var(--nx-chinh);
}

.nx-logo--anh {
	display: inline-flex;
	align-items: center;
}

.nx-logo--anh img {
	display: block;
	width: auto;
	height: 44px;
}

@media (max-width: 640px) {
	.nx-logo--anh img {
		height: 36px;
	}
}

.nx-menu {
	display: none;
	margin-left: 24px;
}

.nx-menu__ds {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nx-menu__ds a {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 500;
	color: color-mix(in oklab, var(--nx-chu) 85%, transparent);
	transition: color 0.2s;
}

.nx-menu__ds a:hover,
.nx-menu__ds .current-menu-item > a {
	color: var(--nx-chinh);
}

.nx-hanh-dong {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nx-nut-tron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 999px;
	position: relative;
	transition: background-color 0.2s;
}

.nx-nut-tron:hover {
	background: color-mix(in oklab, var(--nx-mo) 60%, transparent);
}

/*
 * Số đếm nhỏ ở góc nút. Giỏ và yêu thích dùng chung kiểu nhưng KHÁC tên lớp:
 * WooCommerce thay cả thẻ `span.nx-dem-gio` mỗi lần thêm giỏ, để chung tên là
 * số yêu thích bị nuốt mất.
 */
.nx-dem,
.nx-dem-gio {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.nx-dem--trong,
.nx-dem-gio--trong {
	display: none;
}

.nx-o-tim {
	border-top: 1px solid var(--nx-vien);
	background: var(--nx-the);
	padding: 12px 0;
}

/* ---------- Ô tìm kiếm + khung gợi ý ---------- */

.nx-tim {
	position: relative;
	display: flex;
	gap: 8px;
}

/*
 * Ô tìm trên đầu trang không kéo hết bề ngang 1280: khung gợi ý bám theo bề rộng
 * ô nhập, để rộng quá thì tên món và giá dạt về hai mép, mắt phải chạy ngang.
 */
.nx-o-tim .nx-tim {
	max-width: 640px;
	margin: 0 auto;
}

/*
 * Ô nhập của trình duyệt có bề rộng tối thiểu riêng, để cột co giãn kiểu auto
 * là nó nở ra và tràn ngang màn hình điện thoại.
 */
.nx-tim__o {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.nx-tim__nhap {
	width: 100%;
	height: 44px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	padding: 0 40px 0 14px;
	font: inherit;
	font-size: 14px;
	background: var(--nx-nen);
	color: var(--nx-chu);
}

.nx-tim__nhap:focus {
	outline: 2px solid var(--nx-chinh);
	outline-offset: 1px;
}

/* Bỏ nút xoá sẵn có của trình duyệt vì đã có nút riêng. */
.nx-tim__nhap::-webkit-search-cancel-button {
	display: none;
}

.nx-tim__xoa {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	color: var(--nx-mo-chu);
}

.nx-tim__xoa:hover {
	background: var(--nx-mo);
	color: var(--nx-chu);
}

.nx-tim__gui {
	flex: 0 0 auto;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	border-radius: var(--nx-r);
	padding: 0 18px;
	font-family: var(--nx-chu-tieu-de);
	font-weight: 600;
	font-size: 14px;
}

.nx-goi-y {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: min(72vh, 560px);
	overflow-y: auto;
	background: var(--nx-the);
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	padding: 8px;
}

.nx-goi-y__nhom + .nx-goi-y__nhom {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--nx-vien);
}

.nx-goi-y__nhan {
	margin: 0;
	padding: 6px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nx-mo-chu);
}

.nx-goi-y__chip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 8px 8px;
}

.nx-goi-y__mon--sp {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--nx-r);
}

.nx-goi-y__mon--chon,
.nx-goi-y__mon--sp:hover {
	background: var(--nx-phu);
}

.nx-goi-y__mon--muc.nx-goi-y__mon--chon {
	background: var(--nx-chinh);
	border-color: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-goi-y__anh {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--nx-mo);
}

.nx-goi-y__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-goi-y__than {
	flex: 1 1 auto;
	min-width: 0;
}

.nx-goi-y__ten {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

.nx-goi-y__hieu {
	display: block;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-goi-y__gia {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-chinh);
}

.nx-goi-y__trong {
	margin: 0;
	padding: 12px 8px 6px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

/*
 * Dòng "Xem tất cả" dính đáy khung: danh sách dài hơn khung là nó bị đẩy khuất,
 * mà đây lại đúng là chỗ khách cần bấm để sang trang kết quả đầy đủ.
 */
.nx-goi-y__tat-ca {
	position: sticky;
	bottom: -8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 4px -8px -8px;
	padding: 12px 16px;
	border-top: 1px solid var(--nx-vien);
	border-radius: 0 0 var(--nx-r-lon) var(--nx-r-lon);
	background: var(--nx-the);
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-chinh);
}

.nx-goi-y__tat-ca.nx-goi-y__mon--chon,
.nx-goi-y__tat-ca:hover {
	background: var(--nx-phu);
}

.nx-goi-y__dang-tim {
	margin: 0;
	padding: 10px 8px 4px;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-menu-dien-thoai {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--nx-nen);
	padding: 76px 20px 32px;
	overflow-y: auto;
}

.nx-menu-dien-thoai .nx-menu__ds {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.nx-menu-dien-thoai .nx-menu__ds a {
	display: block;
	padding: 14px 4px;
	font-size: 17px;
	border-bottom: 1px solid var(--nx-vien);
	color: var(--nx-chu);
}

body.nx-khoa-cuon {
	overflow: hidden;
}

/* ---------- Màn hình đầu ---------- */

.nx-hero {
	padding: 40px 0;
}

.nx-hero__luoi {
	display: grid;
	gap: 32px;
	align-items: center;
}

.nx-hero__tieu-de {
	margin-top: 16px;
	font-size: 30px;
	line-height: 1.25;
}

.nx-hero__mo-ta {
	margin-top: 16px;
	max-width: 448px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-hero__nut {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nx-hero__anh {
	border-radius: var(--nx-r-lon);
	border: 1px solid var(--nx-vien);
	background: var(--nx-khoi);
	overflow: hidden;
}

.nx-hero__anh img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------- Dải 4 cam kết ---------- */

.nx-cam-ket {
	border-top: 1px solid var(--nx-vien);
	border-bottom: 1px solid var(--nx-vien);
	background: var(--nx-the);
}

.nx-cam-ket__luoi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.nx-cam-ket__o {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.nx-cam-ket__ic {
	margin-top: 2px;
	color: var(--nx-chinh);
}

.nx-cam-ket__ten {
	font-size: 13px;
	font-weight: 600;
}

.nx-cam-ket__phu {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

/* ---------- Khung mục chung ---------- */

.nx-muc {
	padding-top: 48px;
	padding-bottom: 48px;
}

.nx-muc-ban-chay,
.nx-muc-uu-dai,
.nx-muc-danh-gia {
	padding-top: 0;
}

.nx-muc__tieu-de {
	font-size: 20px;
}

.nx-muc__dau {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.nx-xem-tat-ca {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 500;
	color: var(--nx-chinh);
	white-space: nowrap;
}

/* ---------- Danh mục nổi bật ---------- */

.nx-dm__dai {
	margin-top: 24px;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.nx-dm__dai::-webkit-scrollbar {
	display: none;
}

.nx-dm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 96px;
	flex: 0 0 auto;
}

.nx-dm__tron {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	border: 1px solid var(--nx-vien);
	background: var(--nx-khoi);
	overflow: hidden;
	display: block;
}

.nx-dm__tron img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.nx-dm:hover .nx-dm__tron img {
	transform: scale(1.05);
}

.nx-dm__ten {
	text-align: center;
	font-family: var(--nx-chu-tieu-de);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
}

/* ---------- Lưới sản phẩm + thẻ ---------- */

.nx-luoi-sp {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.nx-the {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-the);
	overflow: hidden;
	transition: box-shadow 0.25s, transform 0.25s;
}

.nx-the:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.45);
}

.nx-the__anh {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nx-khoi);
}

.nx-the__hinh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.nx-the:hover .nx-the__hinh {
	transform: scale(1.04);
}

.nx-nhan {
	position: absolute;
	left: 8px;
	top: 8px;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-nhan--moi {
	background: var(--nx-mint);
	color: var(--nx-chu);
}

.nx-nhan--giam-gia {
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-nhan--sap-het {
	background: var(--nx-tim);
	color: var(--nx-chu);
}

.nx-the__tim {
	position: absolute;
	right: 8px;
	top: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--nx-the) 90%, transparent);
	opacity: 0;
	transition: opacity 0.2s, color 0.2s;
	z-index: 2;
}

.nx-the:hover .nx-the__tim,
.nx-the__tim:focus-visible {
	opacity: 1;
}

.nx-the__tim.nx-da-thich {
	opacity: 1;
	color: var(--nx-chinh);
}

.nx-the__tim.nx-da-thich .nx-ic {
	fill: currentColor;
}

.nx-the__than {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px;
}

.nx-the__hieu {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--nx-mo-chu);
}

.nx-the__ten {
	margin-top: 4px;
	font-family: var(--nx-chu-than);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.375;
	letter-spacing: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nx-the__sao {
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-the__sao .nx-ic {
	color: var(--nx-chinh);
}

.nx-the__diem {
	font-weight: 500;
	color: var(--nx-chu);
}

.nx-the__gia {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.nx-gia {
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 600;
}

.nx-gia-gach {
	font-size: 12px;
	color: var(--nx-mo-chu);
	text-decoration: line-through;
}

.nx-gia bdi,
.nx-gia-gach bdi {
	font: inherit;
}

.nx-nut-gio-nhanh {
	margin-top: 10px;
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--nx-r);
	border: 1px solid var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 8px 12px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.nx-nut-gio-nhanh:hover {
	background: color-mix(in oklab, var(--nx-phu) 70%, transparent);
}

.nx-nut-gio-nhanh.loading {
	opacity: 0.6;
	pointer-events: none;
}

.nx-nut-gio-nhanh.added::after {
	content: '✓';
	font-weight: 700;
}

/* WooCommerce tự chèn liên kết "Xem giỏ hàng" sau khi thêm — cho nó hợp kiểu. */
.nx-the .added_to_cart {
	margin-top: 8px;
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--nx-chinh);
}

/* ---------- Trang danh mục ---------- */

.nx-trang-dm {
	padding-top: 24px;
	padding-bottom: 48px;
}

.nx-duong-dan {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-duong-dan a:hover {
	color: var(--nx-chinh);
}

.nx-duong-dan span {
	color: var(--nx-chu);
}

.nx-dm-dau {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.nx-dm-dau__ten {
	font-size: 24px;
}

.nx-dm-dau__phu {
	margin-top: 4px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-dm-dau__chon {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
}

.nx-sap-xep {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.nx-sap-xep::-webkit-scrollbar {
	display: none;
}

/* Chip ở trang danh mục: mặc định viền mờ, bật thì đổi màu như bản mẫu. */
.nx-bo-loc .nx-chip,
.nx-sap-xep .nx-chip,
.nx-nut-loc {
	border-color: var(--nx-vien);
	background: transparent;
	color: var(--nx-chu);
	font-weight: 400;
	cursor: pointer;
}

.nx-bo-loc .nx-chip:hover,
.nx-sap-xep .nx-chip:hover,
.nx-nut-loc:hover {
	border-color: var(--nx-chinh);
}

.nx-chip--bat {
	border-color: var(--nx-chinh) !important;
	background: var(--nx-phu) !important;
	color: var(--nx-phu-chu) !important;
	font-weight: 500 !important;
}

.nx-dm-than {
	margin-top: 24px;
}

.nx-bo-loc {
	display: none;
	margin-bottom: 24px;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 20px;
}

.nx-bo-loc.nx-mo {
	display: block;
}

.nx-bo-loc__nhom + .nx-bo-loc__nhom {
	margin-top: 24px;
}

.nx-bo-loc__nhom h2 {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-bo-loc__ds {
	margin-top: 12px;
	display: grid;
	gap: 6px;
	font-size: 14px;
}

.nx-bo-loc__ds a {
	color: var(--nx-mo-chu);
	transition: color 0.2s;
}

.nx-bo-loc__ds a:hover {
	color: var(--nx-chinh);
}

.nx-bo-loc__ds .nx-dang-o {
	color: var(--nx-chinh);
	font-weight: 600;
}

.nx-bo-loc__chip {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nx-xoa-loc {
	display: inline-block;
	margin-top: 24px;
	font-size: 14px;
	color: var(--nx-mo-chu);
	text-decoration: underline;
}

.nx-xoa-loc:hover {
	color: var(--nx-chinh);
}

.nx-dm-mo-ta {
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-luoi-sp--dm {
	margin-top: 0;
}

.nx-trong {
	border: 1px dashed var(--nx-vien);
	border-radius: var(--nx-r-lon);
	padding: 48px 24px;
	text-align: center;
}

.nx-trong__chu {
	font-size: 15px;
	color: var(--nx-mo-chu);
	margin-bottom: 16px;
}

/* ---------- Trang kết quả tìm kiếm ---------- */

.nx-tim-lai {
	max-width: 560px;
	margin: 16px 0 4px;
}

.nx-trong__meo {
	list-style: none;
	margin: 0 auto 20px;
	padding: 0;
	max-width: 420px;
	text-align: left;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-trong__meo li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
}

.nx-trong__meo li::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 4px;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--nx-chinh);
}

.nx-trong__chip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
}

.nx-trong .nx-nut {
	margin-top: 16px;
}

/* ---------- Chữ trong trang tĩnh (giới thiệu, chính sách, trang khách tự thêm) ---------- */

.nx-noi-dung {
	font-size: 15.5px;
	line-height: 1.8;
	color: color-mix(in oklab, var(--nx-chu) 90%, transparent);
}

.nx-noi-dung p {
	margin: 0 0 18px;
}

.nx-noi-dung h2 {
	font-family: var(--nx-chu-tieu-de);
	font-size: 22px;
	font-weight: 700;
	margin: 36px 0 12px;
	color: var(--nx-chu);
}

.nx-noi-dung h3 {
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 600;
	margin: 26px 0 10px;
	color: var(--nx-chu);
}

.nx-noi-dung > *:first-child {
	margin-top: 0;
}

.nx-noi-dung ul,
.nx-noi-dung ol {
	margin: 0 0 18px;
	padding-left: 22px;
	list-style: disc;
}

.nx-noi-dung ol {
	list-style: decimal;
}

.nx-noi-dung li {
	margin-bottom: 8px;
}

.nx-noi-dung a {
	color: var(--nx-chinh);
	font-weight: 500;
	text-decoration: underline;
}

.nx-noi-dung strong {
	color: var(--nx-chu);
}

.nx-noi-dung img {
	border-radius: var(--nx-r-lon);
}

/* Bảng dài phải cuộn ngang trong khung của nó, không đẩy tràn cả trang. */
.nx-noi-dung table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.nx-noi-dung th,
.nx-noi-dung td {
	border: 1px solid var(--nx-vien);
	padding: 8px 12px;
	text-align: left;
}

/* ---------- Trang Giới thiệu ---------- */

.nx-trang-gt,
.nx-trang-lh,
.nx-trang-cs {
	padding: 24px 0 56px;
}

.nx-gt-dau {
	display: grid;
	gap: 28px;
	align-items: center;
	margin: 8px 0 36px;
}

.nx-gt-dau__nhan {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-chinh);
}

.nx-gt-dau__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 14px;
}

.nx-gt-dau__mo {
	margin: 0 0 22px;
	font-size: 16px;
	color: var(--nx-mo-chu);
}

.nx-gt-dau__nut {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nx-gt-dau__anh img {
	width: 100%;
	border-radius: var(--nx-r-lon);
	object-fit: cover;
}

.nx-gt-so {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 40px;
}

.nx-gt-so__o {
	padding: 18px 14px;
	border-radius: var(--nx-r-lon);
	background: var(--nx-phu);
	text-align: center;
}

.nx-gt-so__con {
	display: block;
	font-family: var(--nx-chu-tieu-de);
	font-size: 26px;
	font-weight: 700;
	color: var(--nx-phu-chu);
	line-height: 1.2;
}

.nx-gt-so__nhan {
	display: block;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-gt-chu {
	max-width: 720px;
}

.nx-gt-cam-ket {
	margin: 44px 0;
	padding-top: 36px;
	border-top: 1px solid var(--nx-vien);
}

.nx-gt-cam-ket__ten,
.nx-gt-moi__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 22px;
}

.nx-gt-cam-ket__luoi {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.nx-gt-o {
	padding: 20px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
}

.nx-gt-o__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--nx-mint);
	color: var(--nx-chu);
}

.nx-gt-o__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 6px;
}

.nx-gt-o__chu {
	margin: 0;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-gt-moi {
	padding: 32px 24px;
	border-radius: var(--nx-r-lon);
	background: var(--nx-khoi);
	text-align: center;
}

.nx-gt-moi__ten {
	margin-bottom: 8px;
}

.nx-gt-moi__chu {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--nx-mo-chu);
}

.nx-gt-moi .nx-gt-dau__nut {
	justify-content: center;
}

/* ---------- Trang Liên hệ ---------- */

.nx-lh-dau {
	margin: 8px 0 28px;
	max-width: 620px;
}

.nx-lh-dau__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 10px;
}

.nx-lh-dau__chu {
	margin: 0;
	font-size: 15px;
	color: var(--nx-mo-chu);
}

.nx-lh-cach {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-bottom: 40px;
}

.nx-lh-the {
	display: block;
	padding: 20px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
}

.nx-lh-the:hover {
	border-color: var(--nx-chinh);
}

.nx-lh-the__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-lh-the__ten {
	display: block;
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 600;
}

.nx-lh-the__gia {
	display: block;
	margin: 2px 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nx-chinh);
	word-break: break-word;
}

.nx-lh-the__chu {
	display: block;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-lh-than {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.nx-lh-muc__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 6px;
}

.nx-lh-muc__chu {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-lh-bao {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--nx-r);
	border: 1px solid var(--nx-vien);
	font-size: 14px;
}

.nx-lh-bao--xong {
	border-color: var(--nx-mint);
	background: color-mix(in oklab, var(--nx-mint) 45%, transparent);
}

.nx-lh-bao--loi {
	border-color: var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-lh-form textarea {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-nen);
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--nx-chu);
	resize: vertical;
}

.nx-lh-form textarea:focus {
	outline: 2px solid var(--nx-chinh);
	outline-offset: 1px;
}

.nx-lh-ben {
	display: grid;
	gap: 14px;
	align-content: start;
}

.nx-lh-dia-chi {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.7;
}

.nx-lh-gio {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.9;
}

.nx-lh-ben__nut {
	margin: 14px 0 0;
}

.nx-lh-ben__nut .nx-nut {
	font-size: 14px;
	padding: 0.5rem 1.125rem;
}

.nx-lh-ban-do {
	margin-top: 44px;
}

.nx-lh-ban-do__khung {
	overflow: hidden;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	/* Cao theo bề ngang nhưng chặn trần, không thì ở màn rộng bản đồ chiếm gần
	   hết một màn hình. */
	height: min(56vw, 400px);
	background: var(--nx-mo);
}

.nx-lh-ban-do__khung iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Trang chính sách ---------- */

.nx-cs-than {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin-top: 8px;
}

.nx-cs-ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 8px;
}

.nx-cs-ngay {
	margin: 0 0 28px;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-cs-noi-dung {
	max-width: 680px;
}

.nx-cs-hoi {
	max-width: 680px;
	margin: 36px 0 0;
	padding: 16px 20px;
	border-radius: var(--nx-r-lon);
	background: var(--nx-khoi);
	font-size: 14px;
}

.nx-cs-hoi a {
	font-weight: 600;
	color: var(--nx-chinh);
	text-decoration: underline;
}

.nx-cs-ben {
	align-self: start;
	padding: 20px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
}

.nx-cs-ben__ten {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nx-mo-chu);
}

.nx-cs-ben__ds {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nx-cs-ben__ds a {
	display: block;
	padding: 8px 0;
	font-size: 14.5px;
	border-bottom: 1px solid var(--nx-vien);
}

.nx-cs-ben__ds li:last-child a {
	border-bottom: 0;
}

.nx-cs-ben__ds a:hover {
	color: var(--nx-chinh);
}

.nx-cs-ben__ds a.nx-dang-o {
	font-weight: 600;
	color: var(--nx-chinh);
}

/* Liên kết nhanh ở chân trang */

.nx-chan__nhanh {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 16px 0 0;
	padding: 0;
	font-size: 14px;
}

.nx-chan__thu {
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.75;
}

/* ---------- Khu tài khoản ---------- */

.nx-trang-tk {
	padding: 24px 0 56px;
}

.nx-tk__dau {
	margin-bottom: 24px;
}

.nx-tk__chao {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-tk__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 30px;
	font-weight: 700;
	margin: 0;
}

.nx-tk__than {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.nx-tk__noi-dung {
	min-width: 0;
}

/* Menu tài khoản */

.nx-tk-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nx-tk-menu__muc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--nx-vien);
	border-radius: 999px;
	background: var(--nx-the);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.nx-tk-menu__muc:hover {
	border-color: var(--nx-chinh);
	color: var(--nx-phu-chu);
}

.nx-tk-menu__muc.nx-dang-o {
	background: var(--nx-chinh);
	border-color: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-tk-menu__muc--ra {
	color: var(--nx-mo-chu);
}

/* Ba con số ở trang tổng quan */

.nx-tk-so {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 28px;
}

.nx-tk-so__o {
	padding: 16px 12px;
	border-radius: var(--nx-r-lon);
	background: var(--nx-phu);
	text-align: center;
}

.nx-tk-so__con {
	display: block;
	font-family: var(--nx-chu-tieu-de);
	font-size: 26px;
	font-weight: 700;
	color: var(--nx-phu-chu);
	line-height: 1.2;
}

.nx-tk-so__nhan {
	display: block;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-tk-khoi {
	margin-bottom: 32px;
}

.nx-tk-khoi__dau {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.nx-tk-khoi__ten,
.nx-tk-the__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 19px;
	font-weight: 600;
	margin: 0;
}

.nx-tk-khoi__them {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-chinh);
	white-space: nowrap;
}

.nx-tk-the {
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
	padding: 20px;
}

.nx-tk-the__mo,
.nx-tk-mo {
	margin: 0;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-tk-mo {
	margin-bottom: 20px;
}

.nx-tk-dia-chi {
	margin: 12px 0 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
}

.nx-tk-quay-lai {
	margin: 0 0 16px;
	font-size: 14px;
}

.nx-tk-quay-lai a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--nx-mo-chu);
}

.nx-tk-quay-lai a:hover {
	color: var(--nx-chinh);
}

/* Danh sách đơn */

.nx-don-ds {
	display: grid;
	gap: 14px;
}

.nx-don-the {
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
	padding: 18px;
}

.nx-don-the__dau {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.nx-don-the__ma {
	margin: 0;
	font-family: var(--nx-chu-tieu-de);
	font-size: 17px;
	font-weight: 600;
}

.nx-don-the__ngay {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-don-trang-thai {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--nx-mo);
	color: var(--nx-chu);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.nx-don-trang-thai--processing,
.nx-don-trang-thai--dang-giao {
	background: var(--nx-mint);
}

.nx-don-trang-thai--completed {
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-don-trang-thai--cancelled,
.nx-don-trang-thai--refunded,
.nx-don-trang-thai--failed {
	background: var(--nx-mo);
	color: var(--nx-mo-chu);
}

.nx-don-the__than {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0;
}

.nx-don-the__anh {
	display: flex;
	gap: 6px;
}

.nx-don-the__anh img {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--nx-mo);
}

.nx-don-the__tin {
	margin: 0;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-don-the__tin strong {
	color: var(--nx-chu);
}

.nx-don-the__nut {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.nx-don-the__nut .nx-nut {
	font-size: 14px;
	padding: 0.5rem 1.125rem;
}

.nx-don-the__theo-doi {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-chinh);
}

.nx-don-trang {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 24px;
	font-size: 14px;
}

.nx-don-trang__so {
	color: var(--nx-mo-chu);
}

.nx-don-nhan {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.nx-don-nhan li {
	padding: 12px 0;
	border-top: 1px solid var(--nx-vien);
	font-size: 14px;
}

.nx-don-nhan time {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-don-nhan p {
	margin: 0;
}

/* Biểu mẫu trong tài khoản */

.nx-tk-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nx-tk-form .nx-tt-o,
.nx-tk-form .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.nx-tk-form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.nx-tk-form label {
	font-size: 13px;
	font-weight: 500;
}

.nx-tk-form label .required {
	color: var(--nx-chinh);
	text-decoration: none;
	border: 0;
}

.nx-tk-form input[type='text'],
.nx-tk-form input[type='tel'],
.nx-tk-form input[type='email'],
.nx-tk-form input[type='password'],
.nx-tk-form select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-nen);
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--nx-chu);
}

.nx-tk-form input:focus,
.nx-tk-form select:focus {
	outline: 2px solid var(--nx-chinh);
	outline-offset: 1px;
}

/* Shop chỉ bán trong nước nên ô quốc gia luôn là Việt Nam — không cần hiện. */
.nx-tk-form p.nx-o-an,
.nx-tk-form #billing_country_field {
	display: none;
}

.nx-tk-form__mo {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-tk-form__nut {
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 12px !important;
}

/* Đăng nhập / đăng ký / quên mật khẩu */

.nx-vao {
	max-width: 520px;
	margin: 0 auto;
}

.nx-vao__tieu-de {
	font-family: var(--nx-chu-tieu-de);
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 20px;
}

.nx-vao__the {
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
	background: var(--nx-the);
	padding: 24px;
}

.nx-vao__the--xong {
	text-align: center;
}

.nx-vao__tab {
	display: flex;
	gap: 6px;
	padding: 4px;
	margin-bottom: 20px;
	border-radius: 999px;
	background: var(--nx-nen);
}

.nx-vao__nut {
	flex: 1 1 0;
	padding: 9px 12px;
	border-radius: 999px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 15px;
	font-weight: 600;
	color: var(--nx-mo-chu);
}

.nx-vao__nut.nx-dang-o {
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-vao__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.nx-vao__chu {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-vao__hang {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
}

/*
 * WooCommerce tự kẻ khung và chèn lề cho `form.login` / `form.register` bằng
 * CSS của nó — để nguyên thì biểu mẫu hiện ra như một cái hộp trong hộp.
 */
.nx-vao__form.login,
.nx-vao__form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.nx-vao__nho {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.nx-vao__nho input {
	width: 16px;
	height: 16px;
	accent-color: var(--nx-chinh);
}

.nx-vao__quen {
	font-weight: 600;
	color: var(--nx-chinh);
}

.nx-vao__dieu-khoan {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-vao__ngoai {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-vao__ngoai a {
	font-weight: 600;
	color: var(--nx-chinh);
	text-decoration: underline;
}

.woocommerce-message,
.woocommerce-info {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-the);
	font-size: 14px;
	list-style: none;
}

.woocommerce-message {
	border-color: var(--nx-mint);
	background: color-mix(in oklab, var(--nx-mint) 45%, transparent);
}

/*
 * Lời mời xác nhận email của WooCommerce có kèm một cái nút mang lớp `.button`
 * của riêng nó. Không nắn lại thì nút xám xịt và đè lên chữ ở khổ điện thoại.
 */
.woocommerce-info,
.woocommerce-message {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Bỏ cái biểu tượng WooCommerce vẽ bằng phông riêng — phông đó mình không nạp,
   nên nó hiện thành ô vuông rỗng trông như lỗi. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none !important;
	content: none !important;
}

/* Nút của WooCommerce khai bằng `.woocommerce a.button` nên phải viết đủ mạnh
   mới đè được, không thì nút xám xịt lạc hẳn khỏi nhận diện. */
.woocommerce-info a.button,
.woocommerce-message a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	padding: 8px 16px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.woocommerce-info a.button:hover,
.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover {
	background: var(--nx-phu-chu);
	color: var(--nx-chinh-chu);
}

/* ---------- Trang yêu thích ---------- */

.nx-trang-thich {
	padding: 24px 0 56px;
}

.nx-thich-nut {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nx-thich-nut .nx-nut {
	font-size: 14px;
	padding: 0.625rem 1.125rem;
}

.nx-thich-bao {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--nx-r);
	background: var(--nx-mint);
	font-size: 14px;
}

.nx-thich-bao__lien-ket {
	font-weight: 600;
	text-decoration: underline;
}

.nx-thich-trong__chu {
	max-width: 460px;
	margin: 0 auto 20px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-trong a:not(.nx-nut):not(.nx-chip) {
	color: var(--nx-chinh);
	font-weight: 600;
	text-decoration: underline;
}

.nx-tim-goi-them,
.nx-tim-bai {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--nx-vien);
}

.nx-tim-goi-them__ten,
.nx-tim-bai__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 20px;
}

/* Phân trang */
.nx-trang-dm .navigation.pagination {
	margin-top: 32px;
}

.nx-trang-dm .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.nx-trang-dm .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-the);
	font-size: 14px;
	font-weight: 500;
}

.nx-trang-dm .page-numbers.current {
	border-color: var(--nx-chinh);
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

.nx-trang-dm .page-numbers:hover:not(.current) {
	border-color: var(--nx-chinh);
	color: var(--nx-chinh);
}

.nx-trang-dm .screen-reader-text {
	position: absolute !important;
}

/* ---------- Trang chi tiết sản phẩm ---------- */

.nx-trang-sp {
	padding-top: 20px;
	padding-bottom: 48px;
}

.nx-duong-dan__cuoi {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-sp-luoi {
	margin-top: 20px;
}

/* Bộ ảnh */
/*
 * `flex: 1` là bắt buộc: mọi tấm ảnh lớn đều đặt tuyệt đối nên khung không có
 * chiều rộng tự nhiên — thiếu dòng này thì ở khổ máy tính khung co về 0 và
 * ảnh lớn biến mất.
 */
.nx-sp-anh__khung {
	flex: 1 1 auto;
	min-width: 0;
}

.nx-sp-anh__lon {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--nx-r-lon);
	overflow: hidden;
	background: var(--nx-khoi);
}

.nx-sp-anh__tam {
	margin: 0;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s;
}

.nx-sp-anh__tam.nx-dang-o {
	opacity: 1;
}

.nx-sp-anh__tam img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-sp-giam {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	border-radius: 999px;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
}

.nx-sp-anh__nho {
	order: 1;
	margin-top: 12px;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.nx-sp-anh__nho::-webkit-scrollbar {
	display: none;
}

.nx-sp-anh__nut {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--nx-r);
	border: 2px solid var(--nx-vien);
	padding: 0;
	transition: border-color 0.2s;
}

.nx-sp-anh__nut img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-sp-anh__nut.nx-dang-o {
	border-color: var(--nx-chinh);
}

.nx-sp-anh__cham {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.nx-cham {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--nx-mo);
	padding: 0;
	transition: width 0.25s, background-color 0.25s;
}

.nx-cham.nx-dang-o {
	width: 20px;
	background: var(--nx-chinh);
}

/* Cột thông tin */
.nx-sp-tin {
	margin-top: 28px;
}

.nx-sp-hieu {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--nx-mo-chu);
}

.nx-sp-ten {
	margin-top: 4px;
	font-size: 20px;
	font-weight: 700;
}

.nx-sp-diem {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-sp-diem__sao {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--nx-phu-chu);
}

.nx-sp-diem__so {
	font-weight: 600;
	color: var(--nx-chu);
}

.nx-sp-gia {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.nx-sp-gia__nay {
	font-family: var(--nx-chu-tieu-de);
	font-size: 30px;
	font-weight: 700;
	color: var(--nx-phu-chu);
}

.nx-sp-gia__cu {
	font-size: 14px;
	color: var(--nx-mo-chu);
	text-decoration: line-through;
}

.nx-sp-gia__giam {
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
}

.nx-sp-phan-loai,
.nx-sp-mo-ta {
	margin-top: 24px;
}

.nx-sp-phan-loai h2,
.nx-sp-sl h2,
.nx-sp-mo-ta h2 {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-sp-phan-loai__chip {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nx-sp-phan-loai .nx-chip {
	border-color: var(--nx-vien);
	background: transparent;
	color: var(--nx-chu);
	font-weight: 400;
	cursor: pointer;
}

.nx-sp-sl {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.nx-so-luong {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--nx-vien);
	border-radius: 999px;
}

.nx-so-luong__nut {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	transition: background-color 0.2s;
}

.nx-so-luong__nut:hover {
	background: color-mix(in oklab, var(--nx-mo) 60%, transparent);
}

.nx-so-luong__o {
	width: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-chu);
	-moz-appearance: textfield;
	appearance: textfield;
}

.nx-so-luong__o::-webkit-outer-spin-button,
.nx-so-luong__o::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nx-sp-kho {
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-sp-kho--het {
	color: var(--nx-chinh);
}

.nx-sp-cam-ket {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 12px;
	text-align: center;
}

.nx-sp-cam-ket > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.nx-sp-cam-ket .nx-ic {
	color: var(--nx-chinh);
}

.nx-sp-cam-ket span {
	font-size: 11px;
	line-height: 1.25;
	color: var(--nx-mo-chu);
}

.nx-sp-mo-ta__chu {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--nx-mo-chu);
}

.nx-sp-mo-ta__chu p {
	margin: 0 0 8px;
}

.nx-sp-mo-ta__chu p:last-child {
	margin-bottom: 0;
}

.nx-sp-mo-ta__chu.nx-thu-gon {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nx-sp-mo-ta__them {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--nx-chinh);
	text-decoration: underline;
}

.nx-sp-tong-diem {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	border-radius: var(--nx-r-lon);
	background: color-mix(in oklab, var(--nx-phu) 60%, transparent);
	padding: 20px;
}

.nx-sp-tong-diem__lon {
	font-family: var(--nx-chu-tieu-de);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--nx-phu-chu);
}

.nx-sp-tong-diem__phu {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-sp-tong-diem__so {
	text-align: center;
}

.nx-sp-tong-diem__chu {
	margin-top: 4px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-sp-nut {
	display: none;
	margin-top: 24px;
	gap: 12px;
}

.nx-nut-them {
	flex: 1;
	border: 1.5px solid var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	border-radius: var(--nx-r);
	padding: 12px 20px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 15px;
	font-weight: 600;
	transition: opacity 0.2s;
}

.nx-nut-them:hover {
	opacity: 0.9;
}

.nx-sp-nut .nx-nut {
	flex: 1;
}

.nx-sp-het {
	display: block;
	border: 1px dashed var(--nx-vien);
	border-radius: var(--nx-r);
	padding: 14px;
	text-align: center;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

/* Đánh giá */
.nx-sp-danh-gia,
.nx-sp-lien-quan {
	margin-top: 48px;
}

.nx-sp-muc-ten {
	font-size: 18px;
	font-weight: 600;
}

.nx-sp-danh-gia__ds {
	margin-top: 16px;
	display: grid;
	gap: 12px;
}

.nx-nx {
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 16px;
}

.nx-nx__dau {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nx-nx__chu-cai {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--nx-mint);
	color: var(--nx-chu);
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-nx__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-nx__hang {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nx-nx__ngay {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-nx__chu {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--nx-mo-chu);
}

.nx-luoi-sp--lq {
	margin-top: 16px;
}

/* Thanh mua dính đáy — chỉ trên điện thoại */
.nx-thanh-mua {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 8px;
	border-top: 1px solid var(--nx-vien);
	background: color-mix(in oklab, var(--nx-nen) 95%, transparent);
	backdrop-filter: blur(8px);
	padding: 12px;
}

.nx-thanh-mua__gia {
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 700;
	color: var(--nx-phu-chu);
	white-space: nowrap;
}

.nx-thanh-mua__nut {
	flex: 1;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 14px;
	white-space: nowrap;
}

/* Trang sản phẩm chừa chỗ cho thanh mua dính đáy */
body.single-product {
	padding-bottom: 72px;
}

/* ---------- Trang giỏ hàng ---------- */

.nx-khung--hep {
	max-width: 1152px;
}

.nx-trang-gio {
	padding-top: 32px;
	padding-bottom: 112px;
}

.nx-gio-tieu-de {
	font-size: 24px;
	font-weight: 700;
}

.nx-gio-tieu-de span {
	color: var(--nx-mo-chu);
	font-weight: 600;
}

.nx-thong-diep:empty {
	display: none;
}

.nx-thong-diep .woocommerce-message,
.nx-thong-diep .woocommerce-info,
.nx-thong-diep .woocommerce-error {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var(--nx-r);
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	font-size: 14px;
	list-style: none;
}

.nx-thong-diep .woocommerce-error {
	border-color: var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-thong-diep .woocommerce-message {
	border-color: var(--nx-mint);
	background: color-mix(in oklab, var(--nx-mint) 45%, transparent);
}

.nx-thong-diep a {
	font-weight: 600;
	text-decoration: underline;
}

.nx-gio-luoi {
	margin-top: 24px;
	display: grid;
	gap: 24px;
}

.nx-gio-ds {
	display: grid;
	gap: 12px;
	align-content: start;
}

/* Thanh tiến trình freeship */
.nx-freeship {
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 16px;
}

.nx-freeship__chu {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.nx-freeship__chu .nx-ic {
	color: var(--nx-chinh);
}

.nx-freeship__chu strong {
	color: var(--nx-phu-chu);
}

.nx-freeship__thanh {
	margin-top: 12px;
	height: 8px;
	border-radius: 999px;
	background: var(--nx-mo);
	overflow: hidden;
}

.nx-freeship__thanh span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--nx-chinh);
	transition: width 0.3s;
}

/* Một món trong giỏ */
.nx-gio-mon {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 12px;
}

.nx-gio-mon--dang-sua {
	opacity: 0.55;
	pointer-events: none;
}

.nx-gio-mon__anh img {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
}

.nx-gio-mon__ten {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nx-gio-mon__phan-loai {
	margin-top: 2px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-gio-mon__gia {
	margin-top: 4px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-phu-chu);
}

.nx-gio-mon__thanh-tien {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-gio-mon__thao-tac {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.nx-so-luong--nho .nx-so-luong__nut {
	width: 32px;
	height: 32px;
}

.nx-so-luong__so {
	width: 28px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.nx-so-luong__nut[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.nx-gio-xoa {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--nx-mo-chu);
	transition: color 0.2s;
}

.nx-gio-xoa:hover {
	color: var(--nx-chinh);
}

/* Cột phải */
.nx-gio-ben {
	display: grid;
	gap: 12px;
	align-content: start;
}

.nx-gio-the {
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 20px;
}

.nx-gio-the__ten {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 600;
}

.nx-gio-ma__form {
	margin-top: 12px;
	display: flex;
	gap: 8px;
}

.nx-gio-ma__form input {
	min-width: 0;
	flex: 1;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-nen);
	padding: 8px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--nx-chu);
}

.nx-gio-ma__form input:focus {
	outline: none;
	border-color: var(--nx-chinh);
}

.nx-gio-ma__form .nx-nut {
	padding: 8px 16px;
	font-size: 14px;
}

.nx-gio-ma__ds {
	margin-top: 12px;
	display: grid;
	gap: 6px;
}

.nx-gio-ma__ds li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-radius: var(--nx-r);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
}

.nx-gio-ma__bo {
	font-size: 12px;
	font-weight: 500;
	text-decoration: underline;
}

.nx-gio-dong {
	margin: 16px 0 0;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.nx-gio-dong > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nx-gio-dong dt {
	color: var(--nx-mo-chu);
}

.nx-gio-dong dd {
	margin: 0;
	font-weight: 500;
}

.nx-gio-dong__free {
	color: var(--nx-phu-chu);
	font-weight: 600;
}

.nx-gio-dong__giam {
	color: var(--nx-chinh);
}

.nx-gio-tong {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--nx-vien);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-gio-tong__so {
	font-size: 24px;
	font-weight: 700;
	color: var(--nx-chinh);
}

.nx-gio-nut-thanh-toan {
	margin-top: 16px;
	display: flex;
	width: 100%;
}

.nx-gio-ghi-chu {
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

/* Giỏ trống */
.nx-gio-trong {
	margin-top: 24px;
	border: 1px dashed var(--nx-vien);
	border-radius: var(--nx-r-lon);
	padding: 56px 24px;
	text-align: center;
}

.nx-gio-trong__ic {
	display: inline-grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-gio-trong__ten {
	margin-top: 16px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 20px;
	font-weight: 600;
}

.nx-gio-trong__chu {
	margin-top: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

/* Thanh tổng tiền dính đáy trên điện thoại */
.nx-thanh-gio {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--nx-vien);
	background: color-mix(in oklab, var(--nx-nen) 95%, transparent);
	backdrop-filter: blur(8px);
	padding: 12px 16px;
}

.nx-thanh-gio__tien p {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-thanh-gio__so {
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 700;
	color: var(--nx-chinh);
}

.nx-thanh-gio .nx-nut {
	margin-left: auto;
	flex: 1;
	max-width: 60%;
}

/* ---------- Trang thanh toán ---------- */

.nx-dau-trang--gon .nx-dau-trang__trong {
	gap: 12px;
}

.nx-dau-trang__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 700;
}

.nx-dau-trang__logo {
	margin-left: auto;
	display: none;
}

.woocommerce-checkout .nx-trang-gio,
.woocommerce-checkout .entry-content {
	padding-top: 0;
}

.nx-trang-tt {
	padding-top: 24px;
	padding-bottom: 128px;
}

/*
 * `minmax(0, 1fr)` chứ không để cột tự co: ô nhập bên trong có bề rộng tối
 * thiểu riêng, cột grid kiểu tự động sẽ nở theo chúng và làm tràn ngang màn
 * hình điện thoại.
 */
.nx-tt-luoi {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.nx-tt-trai {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-content: start;
	min-width: 0;
}

.nx-tt-phai {
	min-width: 0;
}

.nx-tt-the {
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-the);
	padding: 16px;
}

.nx-tt-the__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nx-tt-the__ten {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-tt-the__ten .nx-ic {
	color: var(--nx-chinh);
}

.nx-tt-lien-ket {
	font-size: 12px;
	color: var(--nx-mo-chu);
	text-decoration: underline;
}

.nx-tt-lien-ket:hover {
	color: var(--nx-chinh);
}

/* Ô nhập */
.nx-tt-o-nhap {
	margin-top: 12px;
}

.nx-tt-o-nhap h3,
.nx-tt-o-nhap .woocommerce-billing-fields h3,
.nx-tt-o-nhap .woocommerce-additional-fields h3 {
	display: none;
}

.nx-tt-o-nhap .woocommerce-billing-fields__field-wrapper,
.nx-tt-o-nhap .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.nx-tt-o-nhap p.form-row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Ô nhập của trình duyệt có bề rộng tối thiểu theo thuộc tính size — không gỡ
   thì nó kéo cả khối rộng ra và làm tràn ngang màn hình điện thoại. */
.nx-tt-o-nhap input,
.nx-tt-o-nhap select,
.nx-tt-ghi-chu textarea {
	min-width: 0;
	max-width: 100%;
}

.nx-tt-o-nhap p.form-row.nx-o-rong,
.nx-tt-o-nhap p.form-row-wide {
	grid-column: 1 / -1;
}

/* Shop chỉ bán trong nước nên ô quốc gia luôn là Việt Nam — không cần hiện. */
.nx-tt-o-nhap p.form-row.nx-o-an,
.nx-tt-o-nhap #billing_country_field {
	display: none;
}

.nx-tt-o-nhap label {
	font-size: 13px;
	font-weight: 500;
}

.nx-tt-o-nhap label .required {
	color: var(--nx-chinh);
	text-decoration: none;
	border: 0;
}

.nx-tt-o-nhap .optional {
	color: var(--nx-mo-chu);
	font-weight: 400;
}

.nx-tt-o-nhap input[type='text'],
.nx-tt-o-nhap input[type='tel'],
.nx-tt-o-nhap input[type='email'],
.nx-tt-o-nhap select,
.nx-tt-o-nhap .select2-container .select2-selection--single,
.nx-tt-ghi-chu textarea {
	width: 100%;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-nen);
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--nx-chu);
	height: auto;
}

.nx-tt-o-nhap input:focus,
.nx-tt-o-nhap select:focus,
.nx-tt-ghi-chu textarea:focus {
	outline: none;
	border-color: var(--nx-chinh);
}

.nx-tt-o-nhap .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.nx-tt-o-nhap .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--nx-chu);
}

.nx-tt-o-nhap .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 8px;
}

.nx-tt-ghi-chu label {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-tt-ghi-chu textarea {
	margin-top: 12px;
	resize: vertical;
}

/* Danh sách sản phẩm */
.nx-tt-mon {
	margin-top: 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.nx-tt-mon li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.nx-tt-mon img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	flex: 0 0 auto;
}

.nx-tt-mon__tin {
	min-width: 0;
	flex: 1;
}

.nx-tt-mon__ten {
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-tt-mon__sl {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-tt-mon__gia {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-phu-chu);
	white-space: nowrap;
}

/* Dòng chọn: cách giao và cách thanh toán */
.nx-tt-giao,
.nx-tt-tra {
	margin-top: 12px;
	display: grid;
	gap: 8px;
}

.nx-tt-chon,
.nx-tt-tra .wc_payment_method label {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	padding: 12px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.nx-tt-chon:hover,
.nx-tt-tra .wc_payment_method label:hover {
	border-color: var(--nx-chinh);
}

.nx-tt-chon input[type='radio'],
.nx-tt-tra input[type='radio'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nx-tt-chon__dau,
.nx-tt-tra .wc_payment_method label::before {
	content: '';
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 2px solid color-mix(in oklab, var(--nx-mo-chu) 50%, transparent);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.nx-tt-chon--bat,
.nx-tt-tra .wc_payment_method input:checked + label {
	border-color: var(--nx-chinh);
	background: color-mix(in oklab, var(--nx-phu) 45%, transparent);
}

.nx-tt-chon--bat .nx-tt-chon__dau,
.nx-tt-tra .wc_payment_method input:checked + label::before {
	border-color: var(--nx-chinh);
	box-shadow: inset 0 0 0 3px var(--nx-nen);
	background: var(--nx-chinh);
}

.nx-tt-chon__tin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.nx-tt-chon__ten {
	font-size: 14px;
	font-weight: 500;
}

.nx-tt-chon__mo-ta {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-tt-chon__gia {
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.nx-tt-nhac {
	margin-top: 12px;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

/* Khối cách thanh toán do WooCommerce in ra */
.nx-tt-tra ul.wc_payment_methods {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nx-tt-tra .wc_payment_method label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.nx-tt-tra .payment_box {
	margin: 0;
	padding: 12px;
	border-radius: var(--nx-r);
	background: color-mix(in oklab, var(--nx-mo) 45%, transparent);
	font-size: 13px;
	color: var(--nx-mo-chu);
}

.nx-tt-tra .payment_box p {
	margin: 0 0 6px;
}

.nx-tt-tra .payment_box p:last-child {
	margin-bottom: 0;
}

.nx-tt-tra .woocommerce-privacy-policy-text,
.nx-tt-tra .woocommerce-terms-and-conditions-wrapper {
	margin-top: 12px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

/* Nút đặt hàng mặc định của WooCommerce nằm trong khối thanh toán — ẩn đi,
   vì nút thật đặt ở cột tóm tắt và ở thanh dính đáy. */
.nx-tt-tra #place_order {
	display: none;
}

/* Cột tóm tắt */
.nx-tt-tien {
	margin-top: 12px;
}

.nx-tt-nut-dat {
	margin-top: 16px;
	display: flex;
	width: 100%;
}

/* Thanh đặt hàng dính đáy trên điện thoại */
.nx-thanh-dat {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--nx-vien);
	background: color-mix(in oklab, var(--nx-nen) 95%, transparent);
	backdrop-filter: blur(8px);
	padding: 12px 16px;
}

.nx-thanh-dat__tien p {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-thanh-dat__so {
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 700;
	color: var(--nx-chinh);
}

.nx-thanh-dat .nx-nut {
	margin-left: auto;
	flex: 1;
	max-width: 58%;
}

/* Lỗi WooCommerce báo khi thiếu thông tin */
.woocommerce-NoticeGroup,
.woocommerce-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--nx-chinh);
	border-radius: var(--nx-r);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	font-size: 14px;
	list-style: none;
}

.woocommerce-error li {
	margin-top: 4px;
}

.woocommerce-error li:first-child {
	margin-top: 0;
}

/* ---------- Trang đặt hàng thành công ---------- */

.nx-trang-xong {
	padding-top: 40px;
	padding-bottom: 48px;
}

.nx-trang-xong .nx-khung {
	max-width: 768px;
}

.nx-xong__the {
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 24px;
	text-align: center;
}

.nx-xong__vong {
	display: inline-grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
}

.nx-xong__vong--loi {
	background: var(--nx-mo);
	color: var(--nx-chinh);
}

.nx-xong__ten {
	margin-top: 20px;
	font-size: 24px;
	font-weight: 700;
}

.nx-xong__chu {
	margin: 8px auto 0;
	max-width: 448px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-xong__chu a {
	color: var(--nx-chinh);
	font-weight: 600;
}

.nx-xong__ma {
	margin: 20px auto 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px dashed var(--nx-chinh);
	border-radius: var(--nx-r);
	background: color-mix(in oklab, var(--nx-phu) 45%, transparent);
	padding: 10px 18px;
}

.nx-xong__ma span {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-xong__ma strong {
	font-family: var(--nx-chu-tieu-de);
	font-size: 20px;
	font-weight: 700;
	color: var(--nx-phu-chu);
}

.nx-xong__nhac {
	margin: 12px auto 0;
	max-width: 480px;
	font-size: 13px;
	color: var(--nx-mo-chu);
}

/* Lời dặn riêng của từng cách thanh toán (COD, chuyển khoản, ví) in ở đây. */
.nx-xong__the > p:not(.nx-xong__chu):not(.nx-xong__nhac) {
	margin: 16px auto 0;
	max-width: 480px;
	padding-top: 16px;
	border-top: 1px solid var(--nx-vien);
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-xong__tom-tat {
	margin-top: 20px;
	display: grid;
	gap: 16px;
}

.nx-xong__tien {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--nx-vien);
}

.nx-xong__tin {
	margin: 12px 0 0;
	display: grid;
	gap: 10px;
	font-size: 14px;
}

.nx-xong__tin > div {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
}

.nx-xong__tin dt {
	color: var(--nx-mo-chu);
}

.nx-xong__tin dd {
	margin: 0;
}

.nx-xong__nut {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* WooCommerce in bảng thông tin chuyển khoản ở đây */
.nx-xong .woocommerce-bacs-bank-details {
	margin-top: 16px;
	text-align: left;
	border-radius: var(--nx-r);
	background: color-mix(in oklab, var(--nx-mo) 45%, transparent);
	padding: 16px;
	font-size: 14px;
}

.nx-xong .woocommerce-bacs-bank-details h2,
.nx-xong .woocommerce-bacs-bank-details h3 {
	font-size: 15px;
	margin-bottom: 8px;
}

.nx-xong .wc-bacs-bank-details {
	list-style: none;
	display: grid;
	gap: 4px;
}

/* ---------- Trang theo dõi đơn hàng ---------- */

.nx-trang-tra-cuu {
	padding-top: 24px;
	padding-bottom: 48px;
}

.nx-tra-cuu {
	max-width: 512px;
	margin: 0 auto;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 20px;
}

.nx-tra-cuu__ten {
	font-family: var(--nx-chu-tieu-de);
	font-size: 20px;
	font-weight: 700;
}

.nx-tra-cuu__chu {
	margin-top: 4px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-tra-cuu__o {
	margin-top: 16px;
	display: grid;
	gap: 12px;
}

.nx-tra-cuu__o label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}

.nx-tra-cuu__o input {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-nen);
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--nx-chu);
}

.nx-tra-cuu__o input:focus {
	outline: none;
	border-color: var(--nx-chinh);
}

.nx-tra-cuu__o .nx-nut {
	width: 100%;
}

.nx-tra-cuu__loi {
	margin-top: 12px;
	border-radius: var(--nx-r);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 10px 14px;
	font-size: 14px;
}

.nx-ket-qua {
	margin-top: 24px;
	display: grid;
	gap: 16px;
}

.nx-tra-cuu__ngay {
	font-size: 12px;
	color: var(--nx-mo-chu);
}

/* Dải chặng đường của đơn */
.nx-chang {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.nx-chang__muc {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-chang__cham {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 2px solid var(--nx-vien);
	background: var(--nx-the);
	color: var(--nx-chinh-chu);
}

/* Đường nối giữa các chặng */
.nx-chang__muc::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 22px;
	width: 2px;
	height: 16px;
	background: var(--nx-vien);
}

.nx-chang__muc:last-child::before {
	display: none;
}

.nx-chang__muc--qua {
	color: var(--nx-chu);
}

.nx-chang__muc--qua .nx-chang__cham {
	border-color: var(--nx-chinh);
	background: var(--nx-chinh);
}

.nx-chang__muc--qua::before {
	background: var(--nx-chinh);
}

.nx-chang__muc--dang .nx-chang__ten {
	font-weight: 600;
	color: var(--nx-phu-chu);
}

.nx-chang__muc--dang::before {
	background: var(--nx-vien);
}

.nx-tra-cuu__tinh-trang {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--nx-vien);
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-tra-cuu__tinh-trang strong {
	color: var(--nx-chu);
}

.nx-tra-cuu__huy {
	margin-top: 16px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-tra-cuu__huy a {
	color: var(--nx-chinh);
	font-weight: 600;
}

.nx-ket-qua .nx-gio-tong,
.nx-ket-qua .nx-xong__tin {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--nx-vien);
}

.nx-goi-y {
	margin-top: 40px;
}

/* ---------- Blog Sổ Tay Số ---------- */

.nx-trang-blog {
	padding-top: 32px;
	padding-bottom: 48px;
}

.nx-blog-dau {
	text-align: left;
}

.nx-blog-dau__nhan {
	font-family: var(--nx-chu-tieu-de);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--nx-chinh);
}

.nx-blog-dau__ten {
	margin-top: 8px;
	font-size: 30px;
	font-weight: 700;
}

.nx-blog-dau__chu {
	margin-top: 8px;
	max-width: 560px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-blog-the__ic {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 8px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--nx-the) 75%, transparent);
	color: var(--nx-phu-chu);
}

.nx-blog-the {
	margin-top: 32px;
}

.nx-blog-the__ten {
	font-size: 18px;
}

.nx-blog-the__luoi {
	margin-top: 16px;
	display: grid;
	gap: 16px;
}

.nx-blog-the__o {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: var(--nx-r-lon);
	padding: 20px;
	transition: transform 0.2s;
}

.nx-blog-the__o:hover {
	transform: translateY(-2px);
}

.nx-blog-the__hoi {
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 600;
}

.nx-blog-the__mo-ta {
	font-size: 14px;
	color: color-mix(in oklab, var(--nx-chu) 70%, transparent);
}

/*
 * Bản mẫu để cột chủ đề chồng lên khung bài ở màn rộng nên chữ bị khuất.
 * Ở đây hai phần tách hẳn: chủ đề một cột, danh sách bài một cột.
 */
.nx-blog-than {
	margin-top: 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.nx-blog-tab {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.nx-blog-tab::-webkit-scrollbar {
	display: none;
}

.nx-blog-tab__muc {
	flex: 0 0 auto;
	border: 1px solid var(--nx-vien);
	border-radius: 999px;
	background: var(--nx-the);
	padding: 8px 16px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.2s, background-color 0.2s;
}

.nx-blog-tab__muc:hover {
	border-color: var(--nx-chinh);
}

.nx-blog-tab__muc.nx-dang-o {
	border-color: var(--nx-chinh);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	font-weight: 600;
}

.nx-blog-luoi {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

/* Thẻ bài kiểu ảnh dán */
.nx-bai-the {
	min-width: 0;
}

.nx-bai-the__anh {
	position: relative;
	display: block;
	border-radius: var(--nx-r);
	overflow: hidden;
	background: var(--nx-khoi);
	border: 1px solid var(--nx-vien);
	box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
	transform: rotate(-1.2deg);
	transition: transform 0.3s;
}

.nx-bai-the:nth-child(even) .nx-bai-the__anh {
	transform: rotate(1.2deg);
}

.nx-bai-the:hover .nx-bai-the__anh {
	transform: rotate(0deg);
}

.nx-bai-the__anh img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Mẩu washi tape dán góc ảnh */
.nx-bai-the__tape {
	position: absolute;
	left: 50%;
	top: -10px;
	width: 84px;
	height: 26px;
	transform: translateX(-50%) rotate(-3deg);
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, var(--nx-mint) 85%, transparent),
		color-mix(in oklab, var(--nx-mint) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-phu) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-phu) 85%, transparent) 12px
	);
	opacity: 0.9;
}

.nx-bai-the:nth-child(3n) .nx-bai-the__tape {
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, var(--nx-tim) 75%, transparent),
		color-mix(in oklab, var(--nx-tim) 75%, transparent) 6px,
		color-mix(in oklab, var(--nx-khoi) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-khoi) 85%, transparent) 12px
	);
}

.nx-bai-the__than {
	margin-top: 16px;
}

.nx-bai-the__chu-de {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nx-chinh);
	font-weight: 600;
}

.nx-bai-the__ten {
	margin-top: 6px;
	font-size: 17px;
	line-height: 1.35;
}

.nx-bai-the__ten a:hover {
	color: var(--nx-chinh);
}

.nx-bai-the__tom-tat {
	margin-top: 8px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-bai-the__chan {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-bai-the__chan span::after {
	content: '·';
	margin-left: 10px;
}

.nx-trang-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 4px;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	background: var(--nx-the);
	font-size: 14px;
}

.nx-trang-blog .page-numbers.current {
	border-color: var(--nx-chinh);
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
}

/* ---------- Trang bài viết ---------- */

.nx-khung--bai {
	max-width: 768px;
}

.nx-trang-bai {
	padding-top: 24px;
	padding-bottom: 48px;
}

.nx-bai-dau {
	margin-top: 20px;
}

.nx-bai-dau__chu-de {
	display: inline-block;
	border: 1px solid var(--nx-vien);
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 500;
}

.nx-bai-dau__ten {
	margin-top: 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

.nx-bai-dau__meta {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

.nx-bai-dau__doc,
.nx-doc-tiep__doc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
}

/* Ảnh bìa có hai mẩu washi tape dán hai góc trên */
.nx-bai-bia {
	position: relative;
	margin: 24px 0 0;
}

.nx-bai-bia img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r-lon);
}

.nx-bai-bia__tape {
	position: absolute;
	top: -12px;
	z-index: 2;
	width: 112px;
	height: 28px;
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, var(--nx-mint) 85%, transparent),
		color-mix(in oklab, var(--nx-mint) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-phu) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-phu) 85%, transparent) 12px
	);
	opacity: 0.92;
}

.nx-bai-bia__tape--trai {
	left: -8px;
	transform: rotate(-6deg);
}

.nx-bai-bia__tape--phai {
	right: -8px;
	transform: rotate(6deg);
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, var(--nx-tim) 70%, transparent),
		color-mix(in oklab, var(--nx-tim) 70%, transparent) 6px,
		color-mix(in oklab, var(--nx-khoi) 85%, transparent) 6px,
		color-mix(in oklab, var(--nx-khoi) 85%, transparent) 12px
	);
}

/* Thân bài */
.nx-bai-than {
	margin-top: 32px;
	font-size: 15px;
	line-height: 1.75;
	color: color-mix(in oklab, var(--nx-chu) 90%, transparent);
}

.nx-bai-than p {
	margin: 0 0 16px;
}

.nx-bai-than h2 {
	margin: 32px 0 12px;
	font-size: 20px;
}

.nx-bai-than h3 {
	margin: 24px 0 10px;
	font-size: 17px;
}

.nx-bai-than ul,
.nx-bai-than ol {
	margin: 0 0 16px;
	padding-left: 22px;
	list-style: disc;
}

.nx-bai-than ol {
	list-style: decimal;
}

.nx-bai-than li {
	margin-bottom: 6px;
}

.nx-bai-than img {
	border-radius: var(--nx-r-lon);
	border: 1px solid var(--nx-vien);
}

.nx-bai-than figure {
	margin: 28px 0;
}

.nx-bai-than figcaption,
.nx-bai-than .nx-chu-thich {
	margin-top: 8px;
	font-size: 13px;
	color: var(--nx-mo-chu);
	font-style: italic;
}

.nx-bai-than blockquote {
	margin: 28px 0;
	border-radius: var(--nx-r);
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	padding: 16px 20px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.nx-bai-than blockquote p {
	margin: 0;
}

.nx-bai-than a {
	color: var(--nx-chinh);
	text-decoration: underline;
}

/*
 * Nút và thẻ sản phẩm trong bài không theo luật màu chữ ở trên — thiếu đoạn
 * này thì chữ trên nút nền coral cũng thành màu coral, nhìn như nút trống.
 */
.nx-bai-than .nx-nut,
.nx-bai-than .nx-khoi-sp a {
	text-decoration: none;
}

.nx-bai-than .nx-nut--chinh {
	color: var(--nx-chinh-chu);
}

.nx-bai-than .nx-nut--phu {
	color: var(--nx-chu);
}

.nx-bai-than .nx-khoi-sp__ten,
.nx-bai-than .nx-khoi-sp__gia {
	color: inherit;
}

/* Đọc tiếp theo mood này */
.nx-doc-tiep {
	margin-top: 56px;
}

.nx-doc-tiep__ten {
	font-size: 20px;
}

.nx-doc-tiep__luoi {
	margin-top: 16px;
	display: grid;
	gap: 20px;
}

.nx-doc-tiep__the {
	display: block;
	background: var(--nx-the);
	border: 1px solid var(--nx-vien);
	border-radius: var(--nx-r);
	padding: 10px;
	box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
	rotate: var(--nx-nghieng, 0deg);
	transition: rotate 0.3s, transform 0.3s;
}

.nx-doc-tiep__the:hover {
	rotate: 0deg;
	transform: translateY(-4px);
}

.nx-doc-tiep__the img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.nx-doc-tiep__the h3 {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nx-doc-tiep__doc {
	margin-top: 8px;
	color: var(--nx-mo-chu);
}

/* Khối sản phẩm chèn giữa bài */
.nx-khoi-sp {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	border-radius: var(--nx-r-lon);
	padding: 16px;
	margin: 24px 0;
}

.nx-khoi-sp__anh img {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
}

.nx-khoi-sp__tin {
	flex: 1;
	min-width: 160px;
}

.nx-khoi-sp__ten {
	font-size: 14px;
	font-weight: 500;
}

.nx-khoi-sp__gia {
	margin-top: 4px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 16px;
	font-weight: 600;
	color: var(--nx-phu-chu);
}

.nx-khoi-sp__nut {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.nx-khoi-sp__nut .nx-nut {
	padding: 8px 16px;
	font-size: 13px;
}

/* ---------- Ba thẻ ưu đãi ---------- */

.nx-uu-dai__luoi {
	display: grid;
	gap: 16px;
}

.nx-uu-dai {
	display: block;
	border-radius: var(--nx-r-lon);
	padding: 24px;
	transition: transform 0.2s;
}

.nx-uu-dai:hover {
	transform: translateY(-2px);
}

.nx-uu-dai h3 {
	font-size: 18px;
	font-weight: 600;
}

.nx-uu-dai p {
	margin-top: 4px;
	font-size: 14px;
	color: color-mix(in oklab, var(--nx-chu) 70%, transparent);
}

.nx-uu-dai__nut {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-nen-secondary {
	background: var(--nx-phu);
}

.nx-nen-mint {
	background: var(--nx-mint);
}

.nx-nen-neutral-block {
	background: var(--nx-khoi);
}

.nx-nen-lavender {
	background: var(--nx-tim);
}

/* ---------- Đánh giá khách ---------- */

.nx-dg__luoi {
	margin-top: 24px;
	display: grid;
	gap: 16px;
}

.nx-dg {
	border-radius: var(--nx-r-lon);
	border: 1px solid var(--nx-vien);
	background: var(--nx-the);
	padding: 20px;
}

.nx-dg__dau {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nx-dg__chu-cai {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--nx-phu);
	color: var(--nx-phu-chu);
	font-family: var(--nx-chu-tieu-de);
	font-size: 14px;
	font-weight: 600;
}

.nx-dg__ten {
	font-size: 14px;
	font-weight: 600;
}

.nx-dg__nghe {
	font-size: 11px;
	color: var(--nx-mo-chu);
}

.nx-dg__sao {
	margin-top: 12px;
	display: flex;
	gap: 2px;
	color: var(--nx-chinh);
}

.nx-sao--mo {
	color: color-mix(in oklab, var(--nx-mo-chu) 40%, transparent);
}

.nx-dg__noi-dung {
	margin-top: 12px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

/* ---------- Dải thương hiệu ---------- */

.nx-dai-hieu {
	border-top: 1px solid var(--nx-vien);
	border-bottom: 1px solid var(--nx-vien);
	background: var(--nx-the);
}

.nx-dai-hieu__trong {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 40px;
	padding-top: 32px;
	padding-bottom: 32px;
}

.nx-dai-hieu__trong span {
	font-family: var(--nx-chu-tieu-de);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: var(--nx-mo-chu);
}

/* ---------- Đăng ký nhận tin ---------- */

.nx-tin {
	border-radius: var(--nx-r-lon);
	background: var(--nx-dam);
	color: var(--nx-dam-chu);
	padding: 40px 24px;
}

.nx-tin__trong {
	max-width: 576px;
	margin: 0 auto;
	text-align: center;
}

.nx-tin__tieu-de {
	font-size: 20px;
	color: var(--nx-dam-chu);
}

.nx-tin__mo-ta {
	margin-top: 8px;
	font-size: 14px;
	color: color-mix(in oklab, var(--nx-dam-chu) 70%, transparent);
}

.nx-tin__form {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nx-tin__form input[type='email'] {
	height: 48px;
	flex: 1;
	border-radius: var(--nx-r);
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.1);
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
	color: var(--nx-dam-chu);
}

.nx-tin__form input[type='email']::placeholder {
	color: color-mix(in oklab, var(--nx-dam-chu) 50%, transparent);
}

.nx-tin__form input[type='email']:focus {
	outline: 2px solid var(--nx-chinh);
	outline-offset: 0;
}

.nx-tin__form .nx-nut {
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

.nx-tin__bao {
	margin-top: 12px;
	font-size: 13px;
	color: var(--nx-mint);
}

/* Khối đăng ký nhận tin nền tối nên dùng hồng nhạt cho dễ đọc, không dùng coral. */
.nx-tin__bao--loi {
	color: var(--nx-phu);
}

/* ---------- Chân trang ---------- */

.nx-chan {
	border-top: 1px solid var(--nx-vien);
	background: var(--nx-nen);
}

.nx-chan__luoi {
	display: grid;
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 48px;
}

.nx-chan__gioi-thieu {
	margin-top: 12px;
	max-width: 320px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-chan__mxh {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

.nx-chan__mxh a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--nx-vien);
	transition: background-color 0.2s;
}

.nx-chan__mxh a:hover {
	background: var(--nx-phu);
}

.nx-chan__cot h3 {
	font-family: var(--nx-chu-than);
	font-size: 14px;
	font-weight: 600;
}

.nx-chan__ds {
	margin-top: 12px;
	display: grid;
	gap: 8px;
	font-size: 14px;
	color: var(--nx-mo-chu);
}

.nx-chan__ds a {
	transition: color 0.2s;
}

.nx-chan__ds a:hover {
	color: var(--nx-chinh);
}

.nx-chan__day {
	border-top: 1px solid var(--nx-vien);
}

.nx-chan__day p {
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
	font-size: 12px;
	color: var(--nx-mo-chu);
}

/* ---------- Nút liên hệ nổi ---------- */

.nx-lien-he-noi {
	position: fixed;
	right: 16px;
	bottom: 88px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.nx-lien-he-noi__nut {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--nx-chinh);
	color: var(--nx-chinh-chu);
	box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s;
}

.nx-lien-he-noi__nut:hover {
	transform: scale(1.05);
}

.nx-lien-he-noi__nut[aria-expanded='true'] .nx-ic {
	transform: rotate(45deg);
	transition: transform 0.3s;
}

.nx-lien-he-noi__ds {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.nx-lien-he-noi__muc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--nx-the);
	border: 1px solid var(--nx-vien);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.5);
}

.nx-lien-he-noi__muc:hover {
	background: var(--nx-phu);
}

/* ---------- Từ 640px (sm) ---------- */

@media (min-width: 640px) {
	.nx-thong-bao p {
		font-size: 12px;
	}

	.nx-hanh-dong {
		gap: 8px;
	}

	.nx-hero__tieu-de {
		font-size: 36px;
	}

	.nx-hero__mo-ta {
		font-size: 16px;
	}

	.nx-muc__tieu-de {
		font-size: 24px;
	}

	.nx-cam-ket__ten {
		font-size: 14px;
	}

	.nx-cam-ket__phu {
		font-size: 12px;
	}

	.nx-dm__dai {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow: visible;
	}

	.nx-dm {
		width: auto;
	}

	.nx-dm__tron {
		width: 112px;
		height: 112px;
	}

	.nx-dm__ten {
		font-size: 14px;
	}

	.nx-luoi-sp {
		gap: 16px;
	}

	.nx-the__ten {
		font-size: 14px;
	}

	.nx-dm-dau__ten {
		font-size: 30px;
	}

	.nx-tin {
		padding-left: 40px;
		padding-right: 40px;
	}

	.nx-tin__tieu-de {
		font-size: 24px;
	}

	.nx-tin__form {
		flex-direction: row;
	}

	.nx-chan__luoi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-lien-he-noi {
		right: 20px;
		bottom: 20px;
	}

	.nx-sp-ten {
		font-size: 24px;
	}

	.nx-sp-cam-ket span {
		font-size: 12px;
	}

	.nx-gio-tieu-de {
		font-size: 30px;
	}

	.nx-xong__the {
		padding: 40px;
	}

	.nx-xong__ten {
		font-size: 30px;
	}

	.nx-xong__nut {
		flex-direction: row;
		justify-content: center;
	}

	/* Từ 640px mới đủ chỗ xếp ô nhập thành hai cột. */
	.nx-tt-o-nhap .woocommerce-billing-fields__field-wrapper,
	.nx-tt-o-nhap .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-gio-mon {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		gap: 16px;
	}

	.nx-gio-mon__anh img {
		width: 80px;
		height: 80px;
	}

	.nx-sp-muc-ten {
		font-size: 20px;
	}

	.nx-luoi-sp--lq {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Từ 768px (md) ---------- */

@media (min-width: 768px) {
	.nx-cam-ket__luoi {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nx-luoi-sp {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nx-uu-dai__luoi,
	.nx-dg__luoi,
	.nx-blog-the__luoi {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nx-blog-luoi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-doc-tiep__luoi {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nx-bai-dau__ten {
		font-size: 36px;
	}
}

/* ---------- Trang danh mục: từ 1024px thì bộ lọc thành cột trái ---------- */

@media (min-width: 1024px) {
	.nx-trang-dm {
		padding-top: 40px;
	}

	.nx-nut-loc {
		display: none;
	}

	.nx-dm-than {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	.nx-bo-loc {
		display: block;
		margin-bottom: 0;
		border: 0;
		background: transparent;
		padding: 0;
	}

	/*
	 * Hai lớp cùng lúc để thắng luật 5 cột của lưới trang chủ — luật đó khai báo
	 * ở khối 1024px phía dưới nên nếu chỉ dùng một lớp thì nó sẽ đè lên.
	 */
	.nx-luoi-sp.nx-luoi-sp--dm {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* ----- Trang sản phẩm: hai cột, thanh mua đáy nhường chỗ cho hai nút ----- */

	.nx-trang-sp {
		padding-top: 40px;
	}

	.nx-sp-luoi {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
		align-items: start;
	}

	.nx-sp-anh {
		display: flex;
		gap: 16px;
	}

	.nx-sp-anh__nho {
		order: 0;
		margin-top: 0;
		width: 80px;
		flex: 0 0 auto;
		flex-direction: column;
		overflow: visible;
	}

	.nx-sp-anh__nut {
		width: 80px;
		height: 80px;
	}

	.nx-sp-tin {
		margin-top: 0;
	}

	.nx-sp-ten {
		font-size: 30px;
	}

	.nx-sp-nut {
		display: flex;
	}

	.nx-thanh-mua {
		display: none;
	}

	body.single-product {
		padding-bottom: 0;
	}

	.nx-luoi-sp.nx-luoi-sp--lq {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* ----- Blog: chủ đề thành cột dọc bên trái, tách hẳn khỏi danh sách bài ----- */

	.nx-blog-than {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 40px;
	}

	.nx-blog-tab {
		position: sticky;
		top: 84px;
		flex-direction: column;
		overflow: visible;
	}

	.nx-blog-tab__muc {
		border-radius: var(--nx-r);
		text-align: left;
	}

	.nx-blog-dau__ten {
		font-size: 40px;
	}

	/* ----- Thanh toán: hai cột, cột tóm tắt dính theo màn hình ----- */

	.nx-dau-trang__logo {
		display: block;
	}

	.nx-dau-trang__ten {
		font-size: 20px;
	}

	.nx-trang-tt {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.nx-tt-luoi {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.nx-tt-the {
		padding: 20px;
	}

	.nx-tt-phai {
		position: sticky;
		top: 84px;
	}

	.nx-thanh-dat {
		display: none;
	}

	/* ----- Giỏ hàng: hai cột, bỏ thanh tổng tiền dính đáy ----- */

	.nx-trang-gio {
		padding-bottom: 48px;
	}

	.nx-gio-luoi {
		grid-template-columns: minmax(0, 1fr) 340px;
	}

	.nx-thanh-gio {
		display: none;
	}
}

@media (min-width: 1280px) {
	.nx-luoi-sp.nx-luoi-sp--dm {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Từ 1024px (lg) ---------- */

@media (min-width: 1024px) {
	:root {
		--nx-le: 32px;
	}

	.nx-nut-menu {
		display: none;
	}

	.nx-menu {
		display: block;
	}

	.nx-hero {
		padding: 64px 0;
	}

	.nx-hero__luoi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px;
	}

	.nx-hero__tieu-de {
		font-size: 48px;
	}

	.nx-dm__tron {
		width: 128px;
		height: 128px;
	}

	.nx-luoi-sp {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.nx-chan__luoi {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nx-lien-he-noi__nut {
		width: 60px;
		height: 60px;
	}
}

/* ---------- Trang nội dung ở màn rộng ---------- */

@media (min-width: 640px) {
	.nx-gt-so {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nx-gt-cam-ket__luoi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-lh-cach {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.nx-gt-dau {
		grid-template-columns: 1fr 1fr;
		gap: 44px;
	}

	.nx-gt-dau__ten {
		font-size: 42px;
	}

	.nx-gt-cam-ket__luoi {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nx-lh-than {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 44px;
	}

	.nx-cs-than {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 48px;
	}
}

/* ---------- Khu tài khoản ở màn rộng ---------- */

@media (min-width: 640px) {
	.nx-tk-form .nx-tt-o,
	.nx-tk-form .woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-tk-form .nx-o-rong,
	.nx-tk-form p.form-row-wide,
	.nx-tk-form p.form-row-first,
	.nx-tk-form p.form-row-last {
		grid-column: 1 / -1;
	}

	.nx-tk-form .nx-o-nua,
	.nx-tk-form p.nx-o-nua {
		grid-column: auto;
	}

	.nx-don-the__dau {
		flex-wrap: nowrap;
	}
}

@media (min-width: 900px) {
	.nx-tk__than {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.nx-tk-menu ul {
		flex-direction: column;
		gap: 4px;
	}

	.nx-tk-menu__muc {
		display: flex;
		border-color: transparent;
		background: transparent;
		border-radius: var(--nx-r);
		padding: 11px 14px;
	}

	.nx-tk-menu__muc:hover {
		background: var(--nx-the);
		border-color: var(--nx-vien);
	}

	.nx-tk-so {
		gap: 16px;
	}

	.nx-tk-so__con {
		font-size: 30px;
	}

	.nx-tk-so__nhan {
		font-size: 13px;
	}
}

/* ---------- Ai tắt hiệu ứng chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}