/**
 * Nutty Milk — webapp mobile.
 * Bảng màu lấy từ bản thiết kế: xanh lá thảo mộc trên nền kem.
 */

/* ---------- Tokens ---------- */
:root {
	--nm-bg:        #F7F6F1;
	--nm-surface:   #FFFFFF;
	--nm-mist:      #F0F3EA;
	--nm-green:     #5C8A3C;
	--nm-green-ink: #4A7230;
	--nm-green-pale:#E8EFE0;
	--nm-ink:       #2C2E28;
	--nm-ink-2:     #6E7268;
	--nm-ink-3:     #A3A79C;
	--nm-line:      #E6E5DE;

	--nm-sale:      #E4462B;
	--nm-sale-ink:  #B8341A;
	--nm-sale-pale: #FDE9E4;

	--nm-r-sm: 10px;
	--nm-r:    16px;
	--nm-r-lg: 20px;
	--nm-r-xl: 26px;

	--nm-pad: 18px;
	--nm-gap: 12px;

	--nm-shadow:    0 1px 2px rgba(44, 46, 40, .05), 0 6px 18px rgba(44, 46, 40, .05);
	--nm-shadow-lg: 0 8px 32px rgba(44, 46, 40, .14);

	--nm-tabs-h: 62px;
	--nm-top-h:  62px;

	--nm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nm-display: "Georgia", "Times New Roman", serif;

	--nm-safe-b: env(safe-area-inset-bottom, 0px);
	--nm-safe-t: env(safe-area-inset-top, 0px);
}

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

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

body.nm-body {
	margin: 0;
	background: var(--nm-bg);
	color: var(--nm-ink);
	font-family: var(--nm-sans);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, p { margin: 0; }

:focus-visible {
	outline: 2px solid var(--nm-green);
	outline-offset: 2px;
	border-radius: 4px;
}

.nm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--nm-green);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 var(--nm-r-sm) 0;
}
.nm-skip:focus { left: 0; }

/* ---------- Shell ---------- */
.nm-app {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--nm-bg);
	position: relative;
}

.nm-main {
	padding: 0 0 calc(var(--nm-tabs-h) + var(--nm-safe-b) + 20px);
}

/* ---------- Top bar ---------- */
.nm-top {
	position: sticky;
	top: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 8px;
	height: calc(var(--nm-top-h) + var(--nm-safe-t));
	padding: var(--nm-safe-t) 12px 0;
	background: rgba(247, 246, 241, .92);
	backdrop-filter: saturate(1.6) blur(12px);
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}
.nm-top.is-stuck { border-bottom-color: var(--nm-line); }

.nm-top__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--nm-ink);
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.nm-top__btn:active { background: var(--nm-mist); }

.nm-top__actions {
	display: flex;
	align-items: center;
	gap: 2px;
	justify-self: end;
}

.nm-brand {
	display: grid;
	justify-items: center;
	gap: 0;
	line-height: 1.15;
	min-width: 0;
}
.nm-brand__img { max-height: 42px; width: auto; }

.nm-brand__mark {
	color: var(--nm-green);
	margin-bottom: 3px;
	transform: rotate(-12deg);
	line-height: 0;
}

.nm-brand__name {
	font-family: var(--nm-display);
	font-style: italic;
	font-size: 25px;
	font-weight: 700;
	color: var(--nm-green);
	letter-spacing: -.3px;
	white-space: nowrap;
}

.nm-brand__tag {
	font-size: 11.5px;
	color: var(--nm-green);
	opacity: .85;
	white-space: nowrap;
}

.nm-cart { color: var(--nm-ink); }

.nm-cart__count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	background: var(--nm-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	border: 2px solid var(--nm-bg);
}
.nm-cart__count[data-count="0"] { display: none; }

/* ---------- Drawer ---------- */
.nm-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	visibility: hidden;
	pointer-events: none;
}
.nm-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.nm-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(44, 46, 40, .45);
	opacity: 0;
	transition: opacity .25s;
}
.nm-drawer.is-open .nm-drawer__scrim { opacity: 1; }

.nm-drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(300px, 82vw);
	background: var(--nm-surface);
	padding: calc(var(--nm-safe-t) + 22px) 20px 24px;
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.32, .72, 0, 1);
	overflow-y: auto;
	z-index: 1;
}
.nm-drawer.is-open .nm-drawer__panel { transform: none; }

.nm-drawer__close {
	position: absolute;
	top: calc(var(--nm-safe-t) + 12px);
	right: 12px;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--nm-ink-2);
	border-radius: 50%;
}

.nm-drawer__list {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}
.nm-drawer__list li { border-bottom: 1px solid var(--nm-line); }
.nm-drawer__list a {
	display: block;
	padding: 14px 2px;
	font-weight: 500;
}
.nm-drawer__list a:active { color: var(--nm-green); }

/* ---------- Section ---------- */
.nm-sec { padding: 22px var(--nm-pad) 0; }

.nm-sec__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.nm-sec__title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.25;
}

.nm-sec__date {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	color: var(--nm-green);
	font-size: 13.5px;
	font-weight: 500;
}

.nm-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 9px 15px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nm-ink);
	box-shadow: var(--nm-shadow);
}
.nm-pill:active { background: var(--nm-mist); }
.nm-pill .nm-i { color: var(--nm-green); }

/* ---------- Rail (hàng card cuộn ngang) ---------- */
.nm-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 43%;
	gap: var(--nm-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	margin: 0 calc(var(--nm-pad) * -1);
	padding-left: var(--nm-pad);
	padding-right: var(--nm-pad);
	scrollbar-width: none;
}
.nm-rail::-webkit-scrollbar { display: none; }
.nm-rail > * { scroll-snap-align: start; }

/* Kéo chuột để trượt (desktop không có cảm ứng) */
.nm-rail { cursor: grab; }
.nm-rail.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.nm-rail.is-dragging > * { pointer-events: none; }

/* ---------- Card ---------- */
.nm-card {
	position: relative;
	background: var(--nm-surface);
	border-radius: var(--nm-r);
	overflow: hidden;
	box-shadow: var(--nm-shadow);
	display: flex;
	flex-direction: column;
}

.nm-fav {
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--nm-ink-3);
	box-shadow: 0 1px 4px rgba(44, 46, 40, .1);
	transition: transform .15s, color .15s;
	-webkit-tap-highlight-color: transparent;
}
.nm-fav:active { transform: scale(.86); }
.nm-fav.is-busy { opacity: .5; pointer-events: none; }

.nm-fav.is-on {
	color: #C0453A;
}
.nm-fav.is-on .nm-i {
	fill: #C0453A;
	animation: nm-beat .4s;
}

@keyframes nm-beat {
	30% { transform: scale(1.28); }
	60% { transform: scale(.94); }
}

.nm-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: linear-gradient(168deg, #F5F2EC, #EDEFE6);
}

.nm-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	transition: transform .3s;
}
.nm-card:active .nm-card__img { transform: scale(.97); }

.nm-badge {
	position: absolute;
	top: 9px;
	left: 9px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: var(--nm-green);
	letter-spacing: .1px;
}
.nm-badge--new { background: var(--nm-green); }
.nm-badge--out { background: var(--nm-ink-3); }

.nm-card__body {
	padding: 11px 12px 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.nm-card__name {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -.15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.64em;
}

.nm-card__vol {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--nm-ink-3);
}

.nm-card__usage {
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--nm-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nm-card__foot {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.nm-card__price {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.2px;
}

.nm-add {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nm-green);
	color: #fff;
	transition: transform .15s, background .15s;
	-webkit-tap-highlight-color: transparent;
}
.nm-add:active { transform: scale(.88); }
.nm-add:disabled { background: var(--nm-ink-3); cursor: not-allowed; }
.nm-add.is-busy { opacity: .6; pointer-events: none; }

.nm-add.is-done {
	background: var(--nm-green-ink);
	animation: nm-pop .35s;
}

@keyframes nm-pop {
	40% { transform: scale(1.22); }
}

/* Card ngày mai: nút nhạt hơn, chỉ đặt trước */
.nm-card--preorder .nm-add { background: #AEC49B; }
.nm-card--preorder .nm-add:active { background: var(--nm-green); }

.nm-card--off { opacity: .72; }

/* ---------- Nút rộng ---------- */
.nm-wide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	padding: 15px;
	background: var(--nm-mist);
	border-radius: var(--nm-r);
	color: var(--nm-green-ink);
	font-size: 14.5px;
	font-weight: 600;
}
.nm-wide:active { background: var(--nm-green-pale); }

/* ---------- Buttons ---------- */
.nm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--nm-green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(92, 138, 60, .3);
	transition: transform .12s;
}
.nm-btn:active { transform: scale(.96); }
.nm-btn--sm { padding: 10px 16px; font-size: 13.5px; }

.nm-link {
	color: var(--nm-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Promo đặt trước ---------- */
.nm-promo {
	position: relative;
	margin: 22px var(--nm-pad) 0;
	padding: 20px;
	background: var(--nm-green-pale);
	border-radius: var(--nm-r-lg);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"text art"
		"btn  btn";
	gap: 14px;
	align-items: center;
}

.nm-promo__text { grid-area: text; }

.nm-promo__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--nm-green-ink);
	letter-spacing: -.3px;
}

.nm-promo__desc {
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--nm-ink-2);
	line-height: 1.5;
}

.nm-promo__art {
	grid-area: art;
	color: var(--nm-green);
	opacity: .55;
}

.nm-promo .nm-btn { grid-area: btn; justify-self: end; }

/* ---------- Freeship ---------- */
.nm-ship {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px var(--nm-pad) 0;
	padding: 16px 18px;
	background: var(--nm-mist);
	border-radius: var(--nm-r-lg);
	position: relative;
}

/* Kẻ ngăn mảnh giữa Freeship và khối cam kết */
.nm-ship::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: -8px;
	height: 1px;
	background: var(--nm-line);
}

.nm-ship__art { color: var(--nm-green); flex-shrink: 0; }

.nm-ship__text { flex: 1; min-width: 0; }

.nm-ship__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--nm-green-ink);
	letter-spacing: -.2px;
}

.nm-ship__desc {
	font-size: 13px;
	color: var(--nm-ink-2);
	margin-top: 2px;
}

/* ---------- Trust ---------- */
.nm-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 14px var(--nm-pad) 0;
	padding: 16px 4px;
	background: var(--nm-surface);
	border-radius: var(--nm-r-lg);
	box-shadow: var(--nm-shadow);
}

.nm-trust__item {
	display: grid;
	justify-items: center;
	gap: 7px;
	padding: 4px 7px;
	text-align: center;
	border-right: 1px solid var(--nm-line);
}
.nm-trust__item:last-child { border-right: 0; }

.nm-trust__item .nm-i { color: var(--nm-green); }

.nm-trust__item p {
	font-size: 10.5px;
	line-height: 1.35;
	color: var(--nm-ink-2);
}

/* ---------- Empty ---------- */
.nm-empty {
	padding: 30px 18px;
	text-align: center;
	color: var(--nm-ink-2);
	background: var(--nm-surface);
	border-radius: var(--nm-r);
	font-size: 14px;
}
.nm-empty .nm-link { display: inline-block; margin-top: 10px; }

/* ---------- Bottom tabs ---------- */
.nm-tabs {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 50;
	width: 100%;
	max-width: 480px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--nm-line);
	padding-bottom: var(--nm-safe-b);
}

.nm-tab {
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 9px 2px 8px;
	color: var(--nm-ink-3);
	-webkit-tap-highlight-color: transparent;
}
.nm-tab.is-active { color: var(--nm-green); }
.nm-tab.is-active .nm-i { fill: rgba(92, 138, 60, .13); }

.nm-tab__label {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: -.1px;
}

/* ---------- Modal ---------- */
.nm-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}
.nm-modal.is-open { visibility: visible; pointer-events: auto; }

.nm-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(44, 46, 40, .45);
	opacity: 0;
	transition: opacity .25s;
}
.nm-modal.is-open .nm-modal__scrim { opacity: 1; }

.nm-modal__panel {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 100%);
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	background: var(--nm-bg);
	border-radius: var(--nm-r-xl) var(--nm-r-xl) 0 0;
	box-shadow: var(--nm-shadow-lg);
	display: flex;
	flex-direction: column;
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	padding-bottom: var(--nm-safe-b);
}
.nm-modal.is-open .nm-modal__panel { transform: translate(-50%, 0); }

.nm-modal__panel::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 38px;
	height: 4px;
	border-radius: 999px;
	background: var(--nm-line);
}

.nm-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px var(--nm-pad) 12px;
	flex-shrink: 0;
}

.nm-modal__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
}

.nm-modal__close {
	width: 34px;
	height: 34px;
	border: 0;
	background: var(--nm-mist);
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var(--nm-ink-2);
}

.nm-modal__body {
	padding: 4px var(--nm-pad) 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Chọn ngày trong modal ---------- */
.nm-days {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62px;
	gap: 8px;
	overflow-x: auto;
	padding: 4px var(--nm-pad) 14px;
	scrollbar-width: none;
	flex-shrink: 0;
}
.nm-days::-webkit-scrollbar { display: none; }

.nm-day {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 9px 4px;
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	background: var(--nm-surface);
	position: relative;
	transition: background .15s, border-color .15s;
}
.nm-day.is-active {
	background: var(--nm-green);
	border-color: var(--nm-green);
	color: #fff;
}
.nm-day.is-empty { opacity: .45; }

.nm-day__dow { font-size: 11px; font-weight: 500; }
.nm-day__num { font-size: 13px; font-weight: 700; }

.nm-day__dot {
	position: absolute;
	bottom: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--nm-green);
}
.nm-day.is-active .nm-day__dot { background: #fff; }

/* ---------- Đặt trước ---------- */
.nm-pre__date {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--nm-green);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 16px;
}

.nm-slots {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.nm-slots legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-ink-2);
	margin-bottom: 9px;
	padding: 0;
	grid-column: 1 / -1;
}

.nm-slot {
	display: block;
	position: relative;
}

.nm-slot input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.nm-slot span {
	display: block;
	padding: 12px 8px;
	text-align: center;
	background: var(--nm-surface);
	border: 1.5px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	font-size: 13.5px;
	font-weight: 500;
	transition: all .15s;
}

.nm-slot input:checked + span {
	background: var(--nm-green-pale);
	border-color: var(--nm-green);
	color: var(--nm-green-ink);
	font-weight: 600;
}

.nm-slot input:focus-visible + span { outline: 2px solid var(--nm-green); outline-offset: 2px; }

.nm-pre__h {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 11px;
}

/* ---------- Toast ---------- */
.nm-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--nm-tabs-h) + var(--nm-safe-b) + 16px);
	transform: translate(-50%, 20px);
	z-index: 100;
	max-width: min(400px, 88vw);
	padding: 12px 20px;
	background: var(--nm-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	border-radius: 999px;
	box-shadow: var(--nm-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .25s;
}
.nm-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
.nm-toast.is-err { background: #A3402F; }

/* ---------- Breadcrumb Woo ---------- */
.woocommerce-breadcrumb {
	margin: 0 0 6px;
	padding: 20px var(--nm-pad) 0;
	font-size: 12.5px;
	color: var(--nm-ink-3);
	line-height: 1.4;
}
.woocommerce-breadcrumb a {
	color: var(--nm-ink-2);
	font-weight: 500;
}
.woocommerce-breadcrumb a:hover { color: var(--nm-green); }

/* ---------- Shop / archive Woo ---------- */
.nm-shop-head {
	padding: 10px var(--nm-pad) 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--nm-line);
}

.nm-shop-head h1 {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.4px;
}

.nm-shop-head .nm-sec__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 7px 13px;
	background: var(--nm-green-pale);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-green-ink);
}

.nm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nm-gap);
	padding: 0 var(--nm-pad);
	list-style: none;
	margin: 0;
}

.woocommerce-pagination {
	padding: 22px var(--nm-pad) 0;
	text-align: center;
}
.woocommerce-pagination ul {
	display: inline-flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	font-size: 14px;
	font-weight: 600;
}
.woocommerce-pagination .current {
	background: var(--nm-green);
	border-color: var(--nm-green);
	color: #fff;
}

/* ---------- Woo notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 12px var(--nm-pad);
	padding: 12px 16px;
	background: var(--nm-mist);
	border-left: 3px solid var(--nm-green);
	border-radius: var(--nm-r-sm);
	font-size: 14px;
	list-style: none;
}
.woocommerce-error { border-left-color: #A3402F; background: #FBEFEC; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Màn hình rộng: giữ khung app ở giữa ---------- */
@media (min-width: 481px) {
	body.nm-body {
		background: #EBEAE4;
	}
	.nm-app {
		box-shadow: 0 0 0 1px var(--nm-line), 0 20px 60px rgba(44, 46, 40, .1);
	}
}

/* ---------- Blog list ---------- */
.nm-posts {
	display: grid;
	gap: var(--nm-gap);
	padding: 0 var(--nm-pad);
}

.nm-post {
	display: flex;
	gap: 12px;
	background: var(--nm-surface);
	border-radius: var(--nm-r);
	overflow: hidden;
	box-shadow: var(--nm-shadow);
}

.nm-post__media {
	flex-shrink: 0;
	width: 108px;
	aspect-ratio: 1;
	background: var(--nm-mist);
}
.nm-post__media img { width: 100%; height: 100%; object-fit: cover; }

.nm-post__body { padding: 12px 12px 12px 0; min-width: 0; }

.nm-post__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.2px;
}

.nm-post__meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--nm-ink-3);
}

.nm-post__ex {
	margin-top: 6px;
	font-size: 13px;
	color: var(--nm-ink-2);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nm-single__media {
	margin: 0 var(--nm-pad);
	border-radius: var(--nm-r);
	overflow: hidden;
}

/* ---------- Prose ---------- */
.nm-prose {
	padding: 4px var(--nm-pad) 0;
	font-size: 15px;
	line-height: 1.68;
	color: var(--nm-ink);
}

.nm-prose > * + * { margin-top: 1em; }

.nm-prose h2 {
	font-size: 18px;
	font-weight: 700;
	margin-top: 1.5em;
	letter-spacing: -.3px;
}

.nm-prose h3 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 1.3em;
}

.nm-prose img { border-radius: var(--nm-r-sm); }

.nm-prose ul,
.nm-prose ol { padding-left: 1.25em; }

.nm-prose li + li { margin-top: .4em; }

.nm-prose a { color: var(--nm-green); text-decoration: underline; text-underline-offset: 2px; }

.nm-prose blockquote {
	margin-left: 0;
	padding: 4px 0 4px 14px;
	border-left: 3px solid var(--nm-green);
	color: var(--nm-ink-2);
	font-style: italic;
}

/* ---------- PDP ---------- */
.nm-pdp__media {
	position: relative;
	margin: 0 var(--nm-pad);
	aspect-ratio: 1;
	background: linear-gradient(168deg, #F5F2EC, #EDEFE6);
	border-radius: var(--nm-r-lg);
	overflow: hidden;
}
.nm-pdp__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
}
.nm-pdp__media .nm-badge { top: 12px; left: 12px; }
.nm-pdp__media .nm-fav { top: 12px; right: 12px; width: 36px; height: 36px; }

.nm-pdp__body { padding: 18px var(--nm-pad) 0; }

.nm-pdp__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.4px;
}

.nm-pdp__vol {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--nm-ink-3);
}

.nm-pdp__price {
	margin-top: 10px;
	font-size: 25px;
	font-weight: 700;
	color: var(--nm-green-ink);
	letter-spacing: -.5px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nm-pdp__price--old {
	font-size: 16px;
	font-weight: 500;
	color: var(--nm-ink-3);
	text-decoration: line-through;
}

.nm-pdp__price--sale { color: var(--nm-sale-ink); }

.nm-pdp__price .nm-badge--sale {
	position: static;
	font-size: 12px;
}

.nm-pdp__out {
	margin-top: 8px;
	font-size: 13.5px;
	color: #A3402F;
	font-weight: 500;
}

.nm-pdp__short {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--nm-ink-2);
}

.nm-pdp__when {
	margin-top: 16px;
	padding: 13px 15px;
	background: var(--nm-mist);
	border-radius: var(--nm-r);
	display: grid;
	gap: 8px;
}

.nm-pdp__when p {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
}
.nm-pdp__when-on  { color: var(--nm-green-ink); }
.nm-pdp__when-pre { color: var(--nm-green-ink); }
.nm-pdp__when-off { color: var(--nm-ink-2); }
.nm-pdp__when .nm-i { flex-shrink: 0; }

.nm-pdp__buy {
	margin-top: 16px;
	display: grid;
	gap: 9px;
}

.nm-btn--block {
	width: 100%;
	padding: 15px;
	font-size: 15px;
	border-radius: var(--nm-r);
}

.nm-btn--ghost {
	background: var(--nm-surface);
	color: var(--nm-green-ink);
	border: 1.5px solid var(--nm-green);
	box-shadow: none;
}
.nm-btn--ghost:active { background: var(--nm-green-pale); }

.nm-pdp__desc { padding-left: 0; padding-right: 0; margin-top: 22px; }

/* ---------- PDP: Thành phần / HSD / Công dụng / Lưu ý ---------- */
.nm-pdp__info {
	margin: 22px var(--nm-pad) 0;
	display: grid;
	gap: 10px;
}

.nm-pdp__info-item {
	padding: 14px 16px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
}

.nm-pdp__info-item h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--nm-green-ink);
	letter-spacing: -.2px;
}

.nm-pdp__info-text {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--nm-ink-2);
}
.nm-pdp__info-text > * + * { margin-top: .6em; }

/* ---------- Woo pages (cart/checkout/account) ---------- */
.nm-woo .woocommerce {
	padding: 18px var(--nm-pad) 0;
}

.nm-woo table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--nm-surface);
	border-radius: var(--nm-r);
	overflow: hidden;
	font-size: 14px;
}
.nm-woo table.shop_table th,
.nm-woo table.shop_table td {
	padding: 11px 12px;
	text-align: left;
	border-bottom: 1px solid var(--nm-line);
}
.nm-woo table.shop_table th { font-weight: 600; font-size: 13px; }

.nm-woo .button,
.nm-woo button.button,
.nm-woo input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	background: var(--nm-green);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}
.nm-woo .button:hover { background: var(--nm-green-ink); color: #fff; }

.nm-woo .checkout-button,
.nm-woo #place_order {
	width: 100%;
	padding: 16px;
	border-radius: var(--nm-r);
	font-size: 15.5px;
}

.nm-woo input[type="text"],
.nm-woo input[type="email"],
.nm-woo input[type="tel"],
.nm-woo input[type="password"],
.nm-woo input[type="number"],
.nm-woo textarea,
.nm-woo select {
	width: 100%;
	padding: 12px 14px;
	background: var(--nm-surface);
	border: 1.5px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--nm-ink);
}
.nm-woo input:focus,
.nm-woo textarea:focus,
.nm-woo select:focus {
	outline: none;
	border-color: var(--nm-green);
}

.nm-woo .form-row { margin-bottom: 13px; }
.nm-woo label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--nm-ink-2); }

/* App luôn là 1 cột dạng mobile (.nm-app giới hạn 480px) bất kể cửa sổ
   trình duyệt rộng bao nhiêu — ép float:none để không bị layout 2 cột mặc
   định của WooCommerce (chỉ tự xếp chồng dưới breakpoint riêng của WC). */
.nm-woo .woocommerce-MyAccount-navigation,
.nm-woo .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.nm-woo .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	gap: 7px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}
.nm-woo .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.nm-woo .woocommerce-MyAccount-navigation ul.is-dragging { cursor: grabbing; }
.nm-woo .woocommerce-MyAccount-navigation ul.is-dragging li { pointer-events: none; }
.nm-woo .woocommerce-MyAccount-navigation li {
	flex: 0 0 auto;
}
.nm-woo .woocommerce-MyAccount-navigation li a {
	display: block;
	white-space: nowrap;
	padding: 9px 15px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
}
.nm-woo .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--nm-green);
	border-color: var(--nm-green);
	color: #fff;
}

/* ---------- Trang con tài khoản: Địa chỉ giao hàng ---------- */

.nm-woo .woocommerce-Addresses {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nm-woo .woocommerce-Addresses.u-columns { float: none; }

.nm-woo .woocommerce-Address {
	float: none !important;
	width: 100% !important;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	padding: 14px 16px;
}

.nm-woo .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.nm-woo .woocommerce-Address-title h2 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--nm-ink);
}
.nm-woo .woocommerce-Address-title .edit {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nm-green-ink);
}

.nm-woo .woocommerce-Address address {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--nm-ink-2);
}

/* ---------- Trang con tài khoản: Thông tin tài khoản ---------- */

.nm-woo .woocommerce-EditAccountForm {
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	padding: 16px;
}

.nm-woo .woocommerce-EditAccountForm .form-row-first,
.nm-woo .woocommerce-EditAccountForm .form-row-last {
	float: none !important;
	width: 100% !important;
}

.nm-woo .woocommerce-EditAccountForm fieldset {
	margin-top: 8px;
	padding-top: 14px;
	border: 0;
	border-top: 1px solid var(--nm-line);
}
.nm-woo .woocommerce-EditAccountForm legend {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--nm-ink);
	margin-bottom: 8px;
	padding: 0;
}

.nm-woo .woocommerce-EditAccountForm .clear { display: none; }

/* ---------- Giỏ hàng / Thanh toán (WooCommerce Blocks) ----------
   Cart & Checkout ở bản Woo này render bằng block (wc-block-components-*),
   khác hẳn class cổ điển (.woocommerce-Input, table.shop_table) mà phần CSS
   "Woo pages" phía trên nhắm tới — nên cần bộ chọn riêng theo đúng class thật
   đã kiểm tra trên DOM. */

.nm-woo .wc-block-components-checkout-step {
	background: var(--nm-surface);
	border-radius: var(--nm-r);
	padding: 16px;
	margin-bottom: 14px;
	box-shadow: var(--nm-shadow);
}

.nm-woo .wc-block-components-checkout-step__title,
.nm-woo .wc-block-cart__totals-title,
.nm-woo .wc-block-components-checkout-order-summary__title-text {
	font-size: 16px;
	font-weight: 700;
	color: var(--nm-ink);
	letter-spacing: -.2px;
}

/* Input / select */
.nm-woo .wc-block-components-text-input input,
.nm-woo .wc-blocks-components-select__select {
	border: 1.5px solid var(--nm-line) !important;
	border-radius: var(--nm-r-sm) !important;
	background: var(--nm-surface) !important;
	font-size: 15px !important;
	box-shadow: none !important;
}
.nm-woo .wc-block-components-text-input input:focus,
.nm-woo .wc-blocks-components-select__select:focus {
	border-color: var(--nm-green) !important;
	box-shadow: none !important;
}
.nm-woo .wc-block-components-text-input label {
	color: var(--nm-ink-2);
}

/* Checkbox (ghi nhớ đơn, điều khoản...) */
.nm-woo .wc-block-components-checkbox__mark { color: var(--nm-green); }
.nm-woo .wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark {
	color: var(--nm-green);
}

/* Nút bấm */
.nm-woo .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):not(.wc-block-cart__submit-button) {
	border-radius: 999px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}
.nm-woo .wc-block-components-button.contained {
	background: var(--nm-green) !important;
	color: #fff !important;
}
.nm-woo .wc-block-components-button.contained:hover { background: var(--nm-green-ink) !important; }

.nm-woo .wc-block-cart__submit-button,
.nm-woo .wc-block-components-checkout-place-order-button {
	width: 100% !important;
	padding: 16px !important;
	border-radius: var(--nm-r) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	background: var(--nm-green) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.nm-woo .wc-block-cart__submit-button:hover,
.nm-woo .wc-block-components-checkout-place-order-button:hover {
	background: var(--nm-green-ink) !important;
}

/* Danh sách sản phẩm trong giỏ — gọn gàng hơn: ẩn mô tả dư thừa, thu nhỏ
   dòng phụ (ngày giao/biến thể), giá đơn vị mờ đi để giá tổng bên phải nổi bật. */
.nm-woo .wc-block-cart-items__row {
	border-bottom: 1px solid var(--nm-line);
	padding: 14px 0;
}
.nm-woo .wc-block-cart-item__image img {
	border-radius: var(--nm-r-sm);
	background: var(--nm-mist);
}
.nm-woo .wc-block-components-product-name {
	color: var(--nm-ink);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	text-decoration: none;
}

/* Mô tả ngắn của sản phẩm — dư thừa trong ngữ cảnh giỏ hàng. */
.nm-woo .wc-block-components-product-metadata__description {
	display: none;
}

.nm-woo .wc-block-cart-item__prices {
	margin: 3px 0;
}
.nm-woo .wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--nm-ink-3);
}

.nm-woo .wc-block-components-product-details {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 10px;
	margin-top: 2px;
}
.nm-woo .wc-block-components-product-details > span {
	font-size: 11.5px;
	color: var(--nm-ink-2);
}
.nm-woo .wc-block-components-product-details__name {
	color: var(--nm-ink-3);
	font-weight: 500;
}

.nm-woo .wc-block-cart-item__quantity {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.nm-woo .wc-block-components-quantity-selector {
	height: 32px;
}
.nm-woo .wc-block-components-quantity-selector__input {
	font-size: 13px;
}
.nm-woo .wc-block-cart-item__remove-link {
	color: var(--nm-ink-3);
}

.nm-woo .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--nm-ink);
}
.nm-woo .wc-block-components-quantity-selector {
	border: 1px solid var(--nm-line) !important;
	border-radius: 999px !important;
	overflow: hidden;
}

/* Khối tổng tiền / sidebar order summary */
.nm-woo .wc-block-components-sidebar,
.nm-woo .wc-block-components-totals-wrapper {
	background: var(--nm-mist);
	border-radius: var(--nm-r);
}
.nm-woo .wc-block-components-totals-item__label,
.nm-woo .wc-block-components-totals-item__value {
	font-size: 14px;
	color: var(--nm-ink);
}
.nm-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.nm-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
	font-size: 17px;
	color: var(--nm-green-ink);
}

/* ---------- Đăng nhập / Đăng ký ---------- */
.nm-woo__account-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.3px;
	margin: 4px 0 16px;
	text-align: center;
}

/* Mặc định Woo hiện 2 cột song song — ép về xếp dọc cho vừa khung app hẹp. */
.nm-woo #customer_login.u-columns {
	display: block;
}
.nm-woo #customer_login .u-column1,
.nm-woo #customer_login .u-column2 {
	float: none;
	width: 100%;
}
.nm-woo #customer_login .u-column2 {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--nm-line);
}

.nm-woo .woocommerce-form-login,
.nm-woo .woocommerce-form-register {
	background: var(--nm-surface);
	border-radius: var(--nm-r-lg);
	box-shadow: var(--nm-shadow);
	padding: 20px 18px;
}

.nm-woo .woocommerce-form-login h2,
.nm-woo .woocommerce-form-register h2 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 14px;
}

.nm-woo .woocommerce-form-row { margin-bottom: 13px; }

.nm-woo .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--nm-ink-2);
	margin: 0 0 16px;
}
.nm-woo .woocommerce-form-login__rememberme input { width: auto; }

.nm-woo .woocommerce-form-login__submit,
.nm-woo .woocommerce-Button--register {
	width: 100%;
}

.nm-woo .woocommerce-LostPassword {
	margin-top: 14px;
	font-size: 13.5px;
	text-align: center;
}
.nm-woo .woocommerce-LostPassword a { color: var(--nm-green); font-weight: 600; }

/* ---------- Trạng thái đơn hàng — bảng "Đơn hàng của tôi" ---------- */
/* Woo 10.x không bọc trạng thái trong thẻ riêng, chỉ gắn class theo trạng thái
   lên <tr>, nên tô màu trực tiếp ô "Trạng thái" theo class của dòng đó. */
.nm-woo .woocommerce-orders-table__cell-order-status {
	font-weight: 700;
}
.nm-woo .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.nm-woo .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--nm-green-ink);
}
.nm-woo .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.nm-woo .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
	color: var(--nm-sale-ink);
}
.nm-woo .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.nm-woo .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.nm-woo .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: var(--nm-ink-2);
}

/* Dùng ở trang chi tiết khách hàng trong wp-admin (admin/customers-page.php) */
.nm-order-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--nm-mist);
	color: var(--nm-ink-2);
	white-space: nowrap;
}
.nm-order-status.status-completed,
.nm-order-status.status-processing {
	background: var(--nm-green-pale);
	color: var(--nm-green-ink);
}
.nm-order-status.status-cancelled,
.nm-order-status.status-failed {
	background: var(--nm-sale-pale);
	color: var(--nm-sale-ink);
}

.nm-linkpages {
	padding: 16px var(--nm-pad) 0;
	display: flex;
	gap: 7px;
	font-size: 14px;
}

/* ---------- Banner đầu trang (slider) ---------- */
.nm-hero {
	position: relative;
	margin-bottom: 4px;
}

.nm-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}
.nm-hero__track::-webkit-scrollbar { display: none; }
.nm-hero__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.nm-hero__track.is-dragging .nm-hero__slide { pointer-events: none; }

.nm-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 16 / 9;
	background: var(--nm-mist);
}
.nm-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px var(--nm-pad) 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
	color: #fff;
}

.nm-hero__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.3px;
}

.nm-hero__sub {
	margin-top: 4px;
	font-size: 13px;
	opacity: .92;
}

.nm-hero__overlay .nm-btn { margin-top: 12px; }

.nm-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.nm-hero__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	pointer-events: auto;
	transition: width .2s, background .2s;
}
.nm-hero__dot.is-active {
	width: 18px;
	background: #fff;
}

/* ---------- Câu hỏi thường gặp (FAQ) ---------- */
.nm-faq {
	margin: 22px var(--nm-pad) 0;
}

.nm-faq__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
	margin-bottom: 12px;
}

.nm-faq__item {
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	margin-bottom: 10px;
	overflow: hidden;
}

.nm-faq__item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 14px 42px 14px 16px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.4;
}
.nm-faq__item summary::-webkit-details-marker { display: none; }
.nm-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 21px;
	font-weight: 400;
	color: var(--nm-green);
}
.nm-faq__item[open] summary::after { content: "−"; }

.nm-faq__answer {
	padding: 0 16px 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--nm-ink-2);
}
.nm-faq__answer > * + * { margin-top: .6em; }

/* ---------- Sale cuối ngày ---------- */
.nm-flash {
	margin: 20px var(--nm-pad) 0;
	padding: 18px 18px 4px;
	background: linear-gradient(135deg, var(--nm-sale) 0%, #C1341C 100%);
	border-radius: var(--nm-r-lg);
	box-shadow: 0 10px 28px rgba(228, 70, 43, .28);
}

/* Chữ trắng chỉ áp cho tiêu đề/đếm ngược của banner — không đặt color trên
   .nm-flash để tránh kế thừa xuống card sản phẩm bên trong (từng khiến tên
   món/thông tin bị trắng trên nền trắng, không đọc được). */
.nm-flash__title,
.nm-flash__sub,
.nm-countdown { color: #fff; }

/* Phòng vệ thêm: card trong banner sale luôn giữ màu chữ bình thường. */
.nm-flash .nm-card { color: var(--nm-ink); }

.nm-flash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 14px;
}

.nm-flash__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.3px;
}

.nm-flash__sub {
	margin-top: 3px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .85);
}

.nm-countdown {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.nm-countdown__box {
	display: grid;
	justify-items: center;
	gap: 1px;
	min-width: 38px;
	padding: 5px 4px 4px;
	background: rgba(0, 0, 0, .22);
	border-radius: var(--nm-r-sm);
}

.nm-countdown__box span {
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.nm-countdown__box small {
	font-size: 8.5px;
	color: rgba(255, 255, 255, .8);
	text-transform: uppercase;
	letter-spacing: .3px;
}

.nm-countdown__sep {
	font-weight: 700;
	opacity: .85;
}

/* Rail bên trong banner sale: nền trong suốt, card giữ nguyên nền trắng */
.nm-flash .nm-rail {
	margin-left: -18px;
	margin-right: -18px;
	padding-left: 18px;
	padding-right: 18px;
}

/* ---------- Giá sale (card + badge) ---------- */
.nm-badge--sale { background: var(--nm-sale); }

.nm-card__price--old {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 500;
	color: var(--nm-ink-3);
	text-decoration: line-through;
}

.nm-card__price--sale {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--nm-sale-ink);
}

/* ---------- Thanh tiến trình "đã bán" của Sale ---------- */
.nm-progress {
	margin-top: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--nm-sale-pale);
	overflow: hidden;
}

.nm-progress__bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nm-sale) 0%, #FF8A3D 100%);
	transition: width .3s;
}

.nm-progress__label {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--nm-sale-ink);
}

.nm-progress--lg {
	height: 10px;
	margin-top: 10px;
}
.nm-progress--lg + .nm-progress__label {
	font-size: 13px;
	margin-top: 6px;
}

/* ---------- Chọn biến thể (Dung tích / Đường) ---------- */
.nm-variant { padding: 4px 0; }
.nm-variant__vol,
.nm-variant__sugar,
.nm-variant__slot { margin-bottom: 16px; }

.nm-variant__price {
	margin: 4px 0 14px;
	font-size: 20px;
	font-weight: 700;
	color: var(--nm-green-ink);
	min-height: 1.3em;
}

/* ---------- Điểm đánh giá gọn trên card / PDP ---------- */
.nm-card__rating {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	color: #B8860B;
}

.nm-pdp__rating {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: #B8860B;
}
.nm-pdp__rating span {
	margin-left: 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--nm-ink-2);
}

/* ---------- Danh sách + form đánh giá trên PDP ---------- */
.nm-pdp__reviews { margin: 26px var(--nm-pad) 0; }

.nm-pdp__reviews-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.nm-pdp__reviews-head h2 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
}

.nm-pdp__reviews-summary {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #B8860B;
}
.nm-pdp__reviews-summary span {
	margin-left: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--nm-ink-2);
}

.nm-review-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.nm-review-item {
	padding: 14px 16px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
}

.nm-review-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.nm-review-item__name {
	font-size: 14px;
	font-weight: 600;
}

.nm-stars {
	font-size: 13px;
	letter-spacing: 1px;
	color: #B8860B;
	flex-shrink: 0;
}

.nm-review-item__content {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--nm-ink-2);
}

.nm-review-item__date {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--nm-ink-3);
}

/* ---------- Form viết đánh giá ---------- */
.nm-field { display: block; margin-bottom: 14px; }
.nm-field span {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--nm-ink-2);
	margin-bottom: 5px;
}
.nm-field input,
.nm-field textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--nm-surface);
	border: 1.5px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--nm-ink);
}
.nm-field input:focus,
.nm-field textarea:focus { outline: none; border-color: var(--nm-green); }

.nm-review-form__err {
	min-height: 1em;
	margin: -6px 0 14px;
	font-size: 13px;
	color: #A3402F;
}

/* Sao chọn điểm — CSS thuần, input ẩn nhưng vẫn trong luồng để dùng ~ */
.nm-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}
.nm-rating input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.nm-rating label {
	font-size: 30px;
	line-height: 1;
	color: var(--nm-line);
	cursor: pointer;
	transition: color .15s;
}
.nm-rating input:checked ~ label,
.nm-rating label:hover,
.nm-rating label:hover ~ label {
	color: #E0A106;
}
.nm-rating input:focus-visible + label {
	outline: 2px solid var(--nm-green);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Honeypot chống bot — ẩn ngoài màn hình, không display:none */
.nm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Thông báo (chuông header + trang Tài khoản) ---------- */
.nm-notify-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.nm-notify-item a {
	display: block;
	padding: 12px 14px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	position: relative;
}
.nm-notify-item.is-unread a {
	border-color: var(--nm-green);
	background: var(--nm-green-pale);
}
.nm-notify-item.is-unread a::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nm-green);
}

.nm-notify-item strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 3px;
	padding-right: 18px;
}

.nm-notify-item p {
	font-size: 13px;
	color: var(--nm-ink-2);
	line-height: 1.5;
}

.nm-notify-item time {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--nm-ink-3);
}

.nm-notify-readall {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-green);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* ---------- Theo dõi trạng thái đơn hàng ---------- */
.nm-tracker {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin-top: 10px;
}

.nm-tracker__step {
	flex: 1;
	text-align: center;
	position: relative;
}
.nm-tracker__step::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--nm-line);
	z-index: 0;
}
.nm-tracker__step:first-child::before { display: none; }
.nm-tracker__step.is-done::before { background: var(--nm-green); }

.nm-tracker__dot {
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: var(--nm-line);
	position: relative;
	z-index: 1;
}
.nm-tracker__step.is-done .nm-tracker__dot { background: var(--nm-green); }
.nm-tracker__step.is-current .nm-tracker__dot {
	box-shadow: 0 0 0 3px var(--nm-green-pale);
}

.nm-tracker__label {
	font-size: 10.5px;
	color: var(--nm-ink-3);
}
.nm-tracker__step.is-done .nm-tracker__label { color: var(--nm-ink); font-weight: 600; }

.nm-tracker__failed {
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-sale-ink);
	background: var(--nm-sale-pale);
	padding: 8px 12px;
	border-radius: var(--nm-r-sm);
	margin-top: 8px;
}

/* ---------- Dashboard tài khoản: thẻ hồ sơ ---------- */
.nm-acct-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	margin-bottom: 14px;
}

.nm-acct-header__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--nm-green-pale);
	color: var(--nm-green-ink);
}

.nm-acct-header__info { flex: 1; min-width: 0; }
.nm-acct-header__greet {
	font-size: 14.5px;
	color: var(--nm-ink);
}
.nm-acct-header__since {
	font-size: 12px;
	color: var(--nm-ink-3);
	margin-top: 2px;
}

.nm-acct-header__stats {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nm-acct-header__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--nm-green-ink);
	white-space: nowrap;
}
.nm-acct-header__stat .nm-i { color: var(--nm-green); }

/* ---------- Dashboard tài khoản: danh sách chức năng ---------- */
.nm-acct-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.nm-acct-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
}
.nm-acct-row:active { background: var(--nm-mist); }

.nm-acct-row__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--nm-green-pale);
	color: var(--nm-green-ink);
}

.nm-acct-row__label {
	flex: 1;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nm-ink);
}

.nm-acct-row .nm-i--chevron {
	flex: 0 0 auto;
	color: var(--nm-ink-3);
}

/* ---------- Dashboard tài khoản: đơn gần đây + thông báo ---------- */
.nm-acct-card {
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
	padding: 16px;
	margin-top: 16px;
}

.nm-acct-card__title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

.nm-acct-order {
	padding: 12px 0;
	border-bottom: 1px solid var(--nm-line);
}
.nm-acct-order:last-of-type { border-bottom: 0; }

.nm-acct-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 600;
}
.nm-acct-order__head a { color: var(--nm-green); }
.nm-acct-order__total { color: var(--nm-ink); }

/* ---------- Bảng tin: đăng bài trực tiếp ---------- */

.nm-feed-composer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 18px 16px;
	padding: 14px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r);
}

.nm-feed-composer__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.nm-feed-composer__head textarea { flex: 1; }

.nm-feed-avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--nm-green-pale);
	color: var(--nm-green-ink);
}

.nm-feed-composer textarea,
.nm-feed-post-edit textarea {
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--nm-ink);
	resize: vertical;
	width: 100%;
}

.nm-feed-composer__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nm-feed-composer__img {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--nm-line);
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--nm-ink-2);
	cursor: pointer;
}
.nm-feed-composer__img input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.nm-feed-composer__filename {
	font-size: 12px;
	color: var(--nm-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nm-feed-composer__products summary {
	font-size: 12.5px;
	color: var(--nm-green-ink);
	cursor: pointer;
}
.nm-feed-composer__products-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 180px;
	overflow-y: auto;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--nm-line);
	font-size: 13px;
	color: var(--nm-ink);
}

.nm-feed-composer__err {
	min-height: 1em;
	margin: 0;
	font-size: 12.5px;
	color: #C0453A;
}

.nm-feed-composer .nm-btn {
	align-self: flex-start;
	padding: 8px 22px;
}

.nm-feed-post-edit:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
	padding: 12px;
	background: var(--nm-mist);
	border-radius: var(--nm-r-sm);
}
.nm-feed-post-edit__actions {
	display: flex;
	gap: 10px;
}
.nm-feed-post-edit-cancel {
	background: none;
	border: 1px solid var(--nm-line);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	color: var(--nm-ink-2);
}

/* ---------- Bảng tin: dải Story ---------- */

.nm-stories-row {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 14px 18px;
	scrollbar-width: none;
	cursor: grab;
}
.nm-stories-row.is-dragging { cursor: grabbing; }
.nm-stories-row::-webkit-scrollbar { display: none; }

.nm-story-avatar {
	display: grid;
	justify-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 68px;
	background: none;
	border: 0;
	padding: 0;
}

.nm-story-avatar__thumb {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	padding: 2.5px;
	background: linear-gradient(135deg, var(--nm-green), var(--nm-green-pale));
	overflow: hidden;
}
.nm-story-avatar__thumb img,
.nm-story-avatar__thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--nm-surface);
	display: block;
	pointer-events: none;
}

.nm-story-avatar__label {
	font-size: 11px;
	color: var(--nm-ink-2);
	max-width: 68px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Bảng tin: trình xem Story toàn màn hình ---------- */

.nm-story-viewer {
	position: fixed;
	inset: 0;
	z-index: 95;
	visibility: hidden;
	pointer-events: none;
	background: #000;
}
.nm-story-viewer.is-open { visibility: visible; pointer-events: auto; }

.nm-story-slide {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.nm-story-slide__close {
	position: absolute;
	top: max(14px, env(safe-area-inset-top));
	right: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,.4);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

.nm-story-slide__admin {
	position: absolute;
	top: max(14px, env(safe-area-inset-top));
	left: 14px;
	z-index: 2;
	display: flex;
	gap: 8px;
}
.nm-story-slide__admin button {
	background: rgba(0,0,0,.4);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
}

.nm-story-edit:not([hidden]) {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
	margin: 10px 16px 0;
}
.nm-story-edit input {
	flex: 1;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: var(--nm-r-sm);
	padding: 8px 12px;
	background: rgba(255,255,255,.1);
	color: #fff;
	font-size: 13px;
}
.nm-story-edit .nm-btn { padding: 8px 16px; }

.nm-story-slide__media {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.nm-story-slide__media img,
.nm-story-slide__media video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nm-story-slide__caption {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 13.5px;
	padding: 10px 16px 4px;
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.nm-story-slide__nav {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 1;
}
.nm-story-slide__prev,
.nm-story-slide__next { flex: 1; }

.nm-story-slide__actions {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 14px;
	padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
}
.nm-story-slide__actions .nm-feed-like,
.nm-story-slide__actions .nm-feed-comment-open {
	color: #fff;
}
.nm-story-slide__actions .nm-feed-comments {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	max-height: 50vh;
	overflow-y: auto;
	background: rgba(0,0,0,.75);
	padding: 14px 16px;
}
.nm-story-slide__actions .nm-feed-comment-form input,
.nm-story-slide__actions .nm-feed-comment-form textarea {
	background: rgba(255,255,255,.1);
	color: #fff;
	border-color: rgba(255,255,255,.3);
}

/* ---------- Bảng tin: danh sách bài đăng ---------- */

.nm-feed-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 0 16px;
}

.nm-feed-post {
	position: relative;
	background: var(--nm-surface);
	border-top: 1px solid var(--nm-line);
	border-bottom: 1px solid var(--nm-line);
	padding: 14px 18px;
	transition: background-color .6s ease;
}
.nm-feed-post.is-highlighted { background-color: var(--nm-green-pale); }

.nm-feed-post__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.nm-feed-post__headinfo {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.nm-feed-post__brand {
	font-weight: 700;
	font-size: 14px;
	color: var(--nm-ink);
}
.nm-feed-post__head time {
	font-size: 12px;
	color: var(--nm-ink-3);
}

.nm-feed-menu {
	position: relative;
	flex: 0 0 auto;
}
.nm-feed-menu__toggle {
	background: none;
	border: 0;
	font-size: 18px;
	line-height: 1;
	padding: 4px 8px;
	color: var(--nm-ink-3);
}
.nm-feed-menu__list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 5;
	min-width: 120px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	box-shadow: 0 6px 18px rgba(0,0,0,.1);
	overflow: hidden;
}
.nm-feed-menu__list button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 9px 14px;
	font-size: 13px;
	color: var(--nm-ink);
}
.nm-feed-menu__list button:active { background: var(--nm-mist); }
.nm-feed-menu__list .nm-feed-post-delete { color: #C0453A; }

.nm-feed-post__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nm-feed-pinned-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	color: var(--nm-green-ink);
	background: var(--nm-green-pale);
	padding: 2px 8px;
	border-radius: 999px;
}

.nm-feed-post.is-pinned {
	border-left: 3px solid var(--nm-green);
}

.nm-feed-post__media {
	margin: 10px -18px 10px;
}
.nm-feed-post__media img {
	width: 100%;
	display: block;
}

.nm-feed-post__title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--nm-ink);
}

.nm-feed-post__content-wrap { position: relative; }

.nm-feed-post__content {
	font-size: 13.5px;
	color: var(--nm-ink-2);
	line-height: 1.55;
}
.nm-feed-post__content p { margin-bottom: 8px; }
.nm-feed-post__content p:last-child { margin-bottom: 0; }

.nm-feed-post__content.is-collapsed {
	max-height: 96px;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.nm-feed-post__toggle {
	display: block;
	margin-top: 4px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nm-green-ink);
}

.nm-feed-post__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.nm-feed-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--nm-mist);
	border-radius: var(--nm-r-sm);
	text-decoration: none;
}
.nm-feed-chip img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
}
.nm-feed-chip__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.nm-feed-chip__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nm-feed-chip__price {
	font-size: 12.5px;
	color: var(--nm-green-ink);
	font-weight: 600;
}

/* ---------- Bảng tin: CTA gọi/nhắn tin đặt đơn ---------- */

.nm-feed-cta {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.nm-feed-cta__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	background: var(--nm-green);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.nm-feed-cta__btn:active { background: var(--nm-green-ink); }

.nm-feed-cta__msg {
	position: relative;
	flex: 1;
	display: flex;
}
.nm-feed-cta__msg-toggle { width: 100%; }
.nm-feed-cta__msg-list {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	margin-bottom: 6px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	overflow: hidden;
}
.nm-feed-cta__msg-list a {
	display: block;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--nm-ink);
	text-decoration: none;
}
.nm-feed-cta__msg-list a:active { background: var(--nm-mist); }

.nm-feed-post__actions {
	display: flex;
	align-items: stretch;
	margin-top: 12px;
	padding-top: 6px;
	border-top: 1px solid var(--nm-line);
}

.nm-feed-like,
.nm-feed-comment-open,
.nm-feed-share__toggle {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 9px 4px;
	border-radius: var(--nm-r-sm);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nm-ink-2);
}
.nm-feed-like:active,
.nm-feed-comment-open:active,
.nm-feed-share__toggle:active { background: var(--nm-mist); }
.nm-feed-like.is-on { color: #C0453A; }
.nm-feed-like.is-on .nm-i {
	fill: #C0453A;
	animation: nm-beat .4s;
}

.nm-feed-share {
	position: relative;
	flex: 1;
}
.nm-feed-share__toggle { width: 100%; }
.nm-feed-share__list {
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 5;
	min-width: 170px;
	margin-bottom: 6px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	overflow: hidden;
}
.nm-feed-share__list button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--nm-ink);
}
.nm-feed-share__list button:active { background: var(--nm-mist); }

.nm-feed-comments {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--nm-line);
}

.nm-feed-comment {
	padding: 8px 0;
	border-bottom: 1px solid var(--nm-line);
	font-size: 13px;
}
.nm-feed-comment:last-child { border-bottom: 0; }
.nm-feed-comment strong {
	display: block;
	font-size: 12.5px;
	color: var(--nm-ink);
}
.nm-feed-comment p { margin: 2px 0; color: var(--nm-ink-2); }
.nm-feed-comment__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}
.nm-feed-comment__meta time { font-size: 11px; color: var(--nm-ink-3); }
.nm-feed-comment-reply,
.nm-feed-comment-delete {
	background: none;
	border: 0;
	padding: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--nm-green-ink);
}
.nm-feed-comment-delete { color: #C0453A; }

.nm-feed-comment__replies {
	margin-top: 8px;
	padding-left: 16px;
	border-left: 2px solid var(--nm-line);
}
.nm-feed-comment--reply {
	padding: 6px 0;
	border-bottom: 0;
}

.nm-feed-reply-hint:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--nm-mist);
	border-radius: var(--nm-r-sm);
	font-size: 12px;
	color: var(--nm-ink-2);
}
.nm-feed-reply-cancel {
	background: none;
	border: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--nm-green-ink);
}

.nm-feed-comment-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}
.nm-feed-comment-form input,
.nm-feed-comment-form textarea {
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-r-sm);
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	background: var(--nm-surface);
	color: var(--nm-ink);
}
.nm-feed-comment-form textarea { resize: vertical; }
.nm-feed-comment-form__err {
	min-height: 1em;
	margin: -2px 0 0;
	font-size: 12.5px;
	color: #C0453A;
}
.nm-feed-comment-form .nm-btn {
	align-self: flex-start;
	padding: 8px 20px;
}