/**
 * Shop catalog — Figma 03. About Products V3.
 */

.nn-shop {
	position: relative;
	background: var(--nn-page, #fff8e6);
	color: var(--nn-ink-2, #1d5c4b);
}

.nn-shop::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 165px;
	height: 225px;
	background: url("../images/shop/corner-tr.svg") right top / contain no-repeat;
	pointer-events: none;
}

.nn-shop-hero {
	position: relative;
	height: clamp(320px, 39vw, 750px);
	overflow: hidden;
	background: #f3efe4;
}

.nn-shop-hero .nn-hero-slide {
	background-position: center;
	background-size: cover;
}

.nn-shop-hero .nn-hero-nav,
.nn-shop-hero .nn-hero-dots {
	z-index: 3;
}

.nn-shop-filters {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 920px;
	margin: 110px auto;
	padding: 0 20px;
}

.nn-shop-filters button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 8px 22px;
	border: 1px solid #1d5c4b;
	border-radius: 999px;
	background: #fff8e6;
	color: #1d5c4b;
	font-family: var(--nn-sans, "Be Vietnam Pro", sans-serif);
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	appearance: none;
}

.nn-shop-filters button.is-active,
.nn-shop-filters button:hover {
	background: #1d5c4b;
	color: #fff;
}

.nn-shop-group {
	scroll-margin-top: 108px;
	padding: 0 0 170px;
}

.nn-shop .nn-gift-coming {
	display: block;
	position: relative;
	max-width: 640px;
	margin: 8px auto 0;
}

.nn-shop .nn-gift-coming__card {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	padding: 48px 40px 40px;
	border: 1px solid #faae42;
	border-radius: 16px;
	background: #fff4df;
	text-align: center;
}

.nn-shop .nn-gift-coming__card h3 {
	margin: 0 0 16px;
	color: #1d5c4b;
	font-family: "Beautique Display", Georgia, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.25;
}

.nn-shop .nn-gift-coming__card p {
	max-width: 460px;
	margin: 0 auto 24px;
	color: #1d5c4b;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.nn-shop .nn-gift-coming__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 64px;
    padding: 0 24px 0px;
    background: transparent url(../images/btn-zalo-mobile.svg) center / 100% 100% no-repeat;
    color: #fff;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 18px !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.nn-shop-group--jar {
	padding: 100px 0 56px;
	background-color: #e7f0e6;
	background-image: url("../images/bg-p1.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.nn-shop-heading {
	margin-bottom: 100px;
	text-align: center;
}
.nn-shop-group.nn-shop-group--jar .nn-shop-heading {
    margin-bottom: 50px;
    text-align: center;
}
.nn-shop-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	margin: 0 0 30px;
	padding: 6px 18px 6px 8px;
	border: 1px solid #faae42;
	border-radius: 999px;
	background: #fff4df;
	color: #1f4d44;
	font-family: "Be Vietnam Pro", var(--nn-sans, sans-serif);
	font-size: 19.381px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
}

.nn-shop-kicker__dot {
	display: inline-flex;
	flex: 0 0 29px;
	width: 29px;
	height: 29px;
}

.nn-shop-kicker__dot img {
	display: block;
	width: 29px;
	height: 29px;
}

.nn-shop-kicker__text {
	white-space: nowrap;
}

.nn-shop-title {
	margin: 0;
	color: #1d5c4b;
	font-family: "Beautique Display", var(--nn-serif, Georgia, serif);
	font-size: clamp(32px, 3vw, 45px);
	font-weight: 700;
	line-height: 1.25;
}

.nn-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

/* —— Jar section (Bóng Cá Sữa) — scoped —— */
.nn-shop-jar-slider {
	position: relative;
	width: 100%;
}

.nn-shop-jar-slider__viewport {
	overflow-x: clip;
	overflow-y: visible;
	width: 100%;
}

.nn-shop-jar-slider__track {
	display: flex;
	gap: 32px;
	transition: transform 0.4s ease;
	will-change: transform;
}

.nn-shop-group--jar .nn-shop-card {
	flex: 0 0 calc((100% - 64px) / 3);
	width: calc((100% - 64px) / 3);
	max-width: none;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	align-items: center;
	padding: 8px 12px 28px;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	background-image: none;
	box-shadow: none;
	text-align: center;
}

.nn-shop-group--jar .nn-shop-card__media-wrap {
	position: relative;
	width: min(100%, 480px);
	/* chừa chỗ cho translateY(60px) của lọ — tránh đè lên title/button */
	margin: 0 auto 30px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nn-shop-group--jar .nn-shop-card__media-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.nn-shop-group.nn-shop-group--gift a.nn-shop-more, button.nn-shop-more {
    font-size: 13.262px !important;
    text-align: center !important;
    line-height: 46px;
    padding: 0;
	font-weight: 400 !important;
}
.nn-shop-group--gift header.nn-shop-heading {
    margin-top: 110px;
    margin-bottom: 60px;
}
.nn-shop-group--jar .nn-shop-card--jar-green .nn-shop-card__media-wrap::before {
	background-image: url("../images/shop/jar-bg-green.svg");
}

.nn-shop-group--jar .nn-shop-card--jar-gold .nn-shop-card__media-wrap::before {
	background-image: url("../images/shop/jar-bg-gold.svg");
}

.nn-shop-group--jar .nn-shop-card__media {
    position: relative;
    z-index: 1;
    max-width: 288px;
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    transform: translateY(60px);
	-webkit-mask-image: none;
	mask-image: none;
}

.nn-shop-group--jar .nn-shop-card__media-wrap::after {
	content: none;
}

.nn-shop-group--jar .nn-shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0;
	filter: drop-shadow(0 10px 18px rgba(29, 92, 75, 0.12));
}

.nn-shop-group--jar .nn-shop-card__body {
	position: relative;
	z-index: 2;
	align-items: center;
	max-width: none;
	margin: 0;
	text-align: center;
}

.nn-shop-group--jar .nn-shop-card__title-row {
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.nn-shop-group--jar .nn-shop-name {
	min-height: 0;
	text-align: center;
	font-family: "Beautique Display", var(--nn-serif, Georgia, serif);
	font-size: clamp(20px, 1.5vw, 26px);
	font-weight: 500;
	line-height: 1.3;
}

.nn-shop-group--jar .nn-shop-name a,
.nn-shop-group--jar .nn-shop-name__btn {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.nn-shop-group--jar .nn-shop-spec {
    margin-top: 6px;
    min-height: 0;
    text-align: center;
    white-space: normal;
    color: #6a7f76;
    font-size: 15px;
    color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Be Vietnam Pro";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}
.nn-shop-group--jar .nn-shop-card__foot {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	padding-top: 0;
}

.nn-shop-group--jar .nn-shop-more {
	width: 167px;
	min-width: 167px;
	height: 61px;
	min-height: 61px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	color: #fff;
	background-color: transparent;
	background-image: url("../images/shop/btn-more-jar.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	box-shadow: none;
	font-size: 18px !important;
	font-weight: 500;
	line-height: 61px;
	padding-top: 0;
}
.nn-shop-group--meal .nn-shop-name a, .nn-shop-group--meal .nn-shop-name__btn {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
	color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Bricolage Grotesque";
    font-size: 28px;
    font-style: normal;
	text-align: left;
    font-weight: 600;
    line-height: 127%;
}
.nn-shop-group--jar .nn-shop-more:hover {
	color: #fff;
	background-color: transparent;
	filter: brightness(0.96);
}

.nn-shop-jar-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px;
	width: 60px;
	height: 14px;
	margin: 36px auto 0;
}

.nn-shop-jar-dot {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d8eee3;
	cursor: pointer;
}

.nn-shop-jar-dot.is-active {
	background: #529d8a;
}

button.nn-shop-jar-dot {
	appearance: none;
}

.nn-shop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 375.317px;
	max-width: 100%;
	height: 524.025px;
	min-height: 524.025px;
	aspect-ratio: auto;
	padding: 18px 18px 22px;
	border: 0;
	border-radius: 0;
	background-image: url("../images/shop/card-bg.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	box-shadow: none;
	text-align: left;
	box-sizing: border-box;
	overflow: hidden;
}

.nn-shop-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin-top: 8px;
    text-align: left;
    max-width: 308px;
    margin: 0 auto;
}

.nn-shop-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
}

.nn-shop-price__was {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.nn-shop-off {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 4px;
	background: #f6d7c5;
	color: #b63726;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.nn-shop-card__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

.nn-shop-fav {
	position: static;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin-top: 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.15s ease;
}

.nn-shop-fav svg {
	display: block;
	width: 33px;
	height: 33px;
}

.nn-shop-fav:hover {
	transform: scale(1.06);
}

.nn-shop-fav[aria-pressed="true"] {
	filter: saturate(1.15);
}

.nn-shop-fav[aria-pressed="true"] path[fill] {
	fill: #e08a20;
}

.nn-shop-card__media-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
}

.nn-shop-card__media-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("../images/shop/card-media-frame.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

.nn-shop-card__media {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 331 / 288;
	height: auto;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
	font: inherit;
	color: inherit;
	-webkit-mask-image: url("../images/shop/card-media-mask.svg");
	mask-image: url("../images/shop/card-media-mask.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.nn-shop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.nn-shop-group--gift .nn-shop-card__media {
	aspect-ratio: 330 / 287;
	border-radius: 0;
	overflow: hidden;
	-webkit-mask-image: url("../images/shop/gift-card-mask.svg");
	mask-image: url("../images/shop/gift-card-mask.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
}
.nn-shop-group--gift .nn-shop-card__media-wrap::after {
	content: none;
}
button.nn-shop-card__media {
	background: transparent !important	;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font: inherit !important;
	cursor: pointer !important;
	color: inherit !important;
	text-decoration: none !important;
	text-align: inherit !important;
}
.nn-shop-group--gift a, .nn-shop-group--gift .nn-shop-name__btn {
	color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Bricolage Grotesque";
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 127%;
    text-align: left !important;
}
a.nn-shop-more,
button.nn-shop-more {
	color: var(--Color-Xanh-m, #1d5c4b);
	text-align: center;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 13.262px;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	line-height: 46px;
}
.nn-shop-price s {
	display: inline;
	margin: 0;
	color: var(--Color-Xanh-m, #1D5C4B);
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 125%;
	text-decoration-line: line-through;
}
.nn-shop-tags {
	position: absolute;
	top: 18px;
	right: 18px;
	left: 18px;
	z-index: 2;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 0;
	pointer-events: none;
}

.nn-shop-tags span {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid #1D5C4B;
    border-radius: 999px;
    background: transparent;
    color: #1D5C4B;
    font-family: Questrial, "Be Vietnam Pro", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); */
}
.nn-shop-group.nn-shop-group--gift .nn-shop-tags span { 
	color:#fff;
	border: 1px solid #fff;
}
.nn-shop-group.nn-shop-group--gift .nn-shop-tags { 
    justify-content: flex-start;
}
.nn-shop-name {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	min-height: calc(1.27em * 2);
	color: #1d5c4b;
	font-family: "Bricolage Grotesque", var(--nn-sans, sans-serif);
	font-size: clamp(18px, 1.35vw, 24px);
	font-weight: 600;
	line-height: 1.27;
}

.nn-shop-name a,
.nn-shop-name__btn {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
    color: var(--Color-Xanh-m, #1D5C4B);
    text-align: center;
    font-family: "Bricolage Grotesque";
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
}

.nn-shop-spec {
	margin: 4px 0 0;
	min-height: 1.35em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.nn-shop-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	color: var(--Color, #B63726);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 125%;
}

.nn-shop-price__now {
	display: block;
	color: inherit;
	font: inherit;
}

.nn-shop-more {
	display: inline-block;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 124px;
	min-width: 124px;
	height: 45px;
	min-height: 45px;
	/* (45 - 29.797) / 2 ≈ 7.6px — để line-height Figma thật sự quyết định ô chữ */
	padding: 7.6px 10px 0;
	border: 0;
	border-radius: 0;
	color: #1d5c4b;
	background-color: transparent;
	background-image: url("../images/shop/btn-more.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	font-family: "Bricolage Grotesque", var(--nn-sans, "Be Vietnam Pro", sans-serif);
	font-size: 13.262px;
	font-weight: 400;
	line-height: 29.797px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease, color 0.15s ease;
}

.nn-shop-group--meal .nn-shop-more:hover,
.nn-shop-group--gift .nn-shop-more:hover {
	color: #fff4df;
	filter: none;
	background-color: transparent;
	background-image: url("../images/shop/btn-more-hover.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

@media (max-width: 1100px) {
	.nn-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nn-shop-group--jar .nn-shop-card {
		flex: 0 0 calc((100% - 32px) / 2);
		width: calc((100% - 32px) / 2);
	}
}

/* Laptop / tablet: 768px–1550px. Desktop above 1550px keeps the 4-column frame. */
@media (max-width: 1550px) and (min-width: 761px) {
	.nn-shop .nn-shop-filters {
		gap: 10px 12px;
		max-width: 100%;
		margin: clamp(36px, 5vw, 72px) auto;
		padding: 0 24px;
	}

	.nn-shop .nn-shop-filters button {
		min-height: 46px;
		padding: 8px 18px;
		font-size: clamp(14px, 1.3vw, 16px);
	}

	.nn-shop .nn-shop-group {
		padding-bottom: clamp(56px, 7vw, 120px);
	}

	.nn-shop .nn-shop-group--jar {
		padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
	}

	.nn-shop .nn-shop-heading {
		margin-bottom: clamp(28px, 4vw, 64px);
	}

	.nn-shop .nn-shop-group.nn-shop-group--jar .nn-shop-heading {
		margin-bottom: clamp(20px, 3vw, 40px);
	}

	.nn-shop .nn-shop-group--gift header.nn-shop-heading {
		margin-top: clamp(40px, 6vw, 80px);
		margin-bottom: clamp(24px, 3.5vw, 48px);
	}

	.nn-shop .nn-shop-kicker {
		max-width: calc(100% - 32px);
		font-size: clamp(15px, 1.4vw, 19px);
	}

	.nn-shop .nn-shop-kicker__text {
		white-space: normal;
	}

	.nn-shop .nn-shop-title {
		font-size: clamp(28px, 3vw, 40px);
		padding: 0 16px;
	}

	.nn-shop .nn-shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(16px, 1.8vw, 24px);
	}

	.nn-shop .nn-shop-card {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		min-height: 0;
	}

	.nn-shop .nn-shop-card__body {
		max-width: min(100%, 340px);
	}

	.nn-shop .nn-shop-name {
		min-height: 0;
	}

	.nn-shop .nn-shop-name a,
	.nn-shop .nn-shop-name__btn,
	.nn-shop .nn-shop-group--meal .nn-shop-name a,
	.nn-shop .nn-shop-group--meal .nn-shop-name__btn,
	.nn-shop .nn-shop-group--gift a,
	.nn-shop .nn-shop-group--gift .nn-shop-name__btn {
		font-size: clamp(18px, 1.7vw, 26px) !important;
		line-height: 1.25 !important;
	}

	.nn-shop .nn-shop-spec {
		font-size: clamp(13px, 1.2vw, 16px);
	}

	.nn-shop .nn-shop-card__foot {
		align-items: center;
		gap: 8px;
	}

	.nn-shop .nn-shop-price,
	.nn-shop .nn-shop-price__now {
		min-width: 0;
		font-size: clamp(20px, 1.9vw, 28px);
	}

	.nn-shop .nn-shop-price s {
		font-size: clamp(13px, 1.1vw, 15px);
	}

	.nn-shop .nn-shop-more {
		width: 116px;
		min-width: 116px;
		height: 42px;
		min-height: 42px;
		padding: 0 8px;
		line-height: 42px;
	}

	.nn-shop a.nn-shop-more,
	.nn-shop button.nn-shop-more,
	.nn-shop .nn-shop-group--gift a.nn-shop-more,
	.nn-shop .nn-shop-group--gift button.nn-shop-more {
		font-size: 13px !important;
		line-height: 42px !important;
	}

	.nn-shop .nn-shop-group--jar .nn-shop-more {
		width: 167px;
		min-width: 167px;
		height: 61px;
		min-height: 61px;
		padding: 0 18px;
		font-size: 18px !important;
		line-height: 61px !important;
	}

	.nn-shop .nn-shop-group--jar .nn-shop-card__media-wrap {
		width: min(100%, 420px);
		margin-bottom: clamp(12px, 2vw, 24px);
	}

	.nn-shop .nn-shop-group--jar .nn-shop-card__media {
		max-width: min(240px, 62%);
		transform: translateY(clamp(20px, 3vw, 48px));
	}

	.nn-shop .nn-shop-group--jar .nn-shop-name {
		font-size: clamp(20px, 1.8vw, 26px);
	}

	.nn-shop .nn-shop-group--jar .nn-shop-spec {
		font-size: clamp(14px, 1.3vw, 18px);
	}

	.nn-shop .nn-cta-section {
		height: auto;
		min-height: 0;
		padding: clamp(48px, 6vw, 72px) 0 clamp(36px, 5vw, 56px);
		margin-bottom: 0;
	}

	.nn-shop .nn-cta-frame {
		width: min(920px, calc(100% - 48px));
		height: auto;
		min-height: 320px;
		padding: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 40px);
	}

	.nn-shop .nn-cta-title {
		font-size: clamp(28px, 3vw, 40px);
		line-height: 1.25;
	}

	.nn-shop .nn-cta-desc {
		max-width: 520px;
		font-size: clamp(16px, 1.5vw, 20px);
		line-height: 1.5;
	}
}

@media (max-width: 1100px) and (min-width: 761px) {
	.nn-shop .nn-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.nn-shop::before {
		top: 0;
		right: 0;
		width: min(165px, 42vw);
		height: min(225px, 57vw);
	}

	.nn-shop-hero {
		position: relative;
		z-index: 1;
		height: auto;
		aspect-ratio: 393 / 340;
		min-height: 240px;
	}

	.nn-shop-hero .nn-hero-slide {
		background-position: center 42%;
		background-size: cover;
	}

	.nn-shop-filters {
		gap: 10px 12px;
		margin: 22px auto 6px;
		padding: 0 16px;
	}

	.nn-shop-filters button {
		min-height: 40px;
		padding: 8px 16px;
		font-size: 14px;
	}

	.nn-shop-filters button.is-active,
	.nn-shop-filters button:hover {
		border-color: #b63726;
		background: #b63726;
		color: #fff8e6;
	}

	.nn-shop-filters button[data-nn-shop-coming],
	.nn-shop-filters button[data-nn-shop-coming].is-active,
	.nn-shop-filters button[data-nn-shop-coming]:hover {
		border-color: #d5ddd8;
		background: transparent;
		color: #b7c4bc;
		pointer-events: none;
		cursor: default;
	}

	.nn-shop .nn-shop-group.is-coming .nn-shop-grid {
		display: none;
	}

	.nn-shop .nn-shop-group.is-coming .nn-gift-coming {
		display: block;
		position: relative;
		left: 50%;
		width: 100vw;
		margin: 8px 0 0 -50vw;
		padding: 20px 20px 64px;
		overflow: hidden;
		background-image: none;
	}

	.nn-shop .nn-shop-group.is-coming .nn-gift-coming::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 50%;
		background-color: transparent;
		pointer-events: none;
	}

	.nn-shop .nn-shop-group.is-coming .nn-gift-coming::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		height: 50%;
		background-color: #5e9c86;
		background-image: url("../images/home/reviews-bg-mobile.svg");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		pointer-events: none;
	}

	.nn-shop .nn-gift-coming__card {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		padding: 32px 22px 28px;
		border: 0.374px solid #faae42;
		border-radius: 9.362px;
		background: #fff4df;
		text-align: center;
	}

	.nn-shop .nn-gift-coming__card h3 {
		margin: 0 0 16px;
		color: #1d5c4b;
		font-family: "Beautique Display", Georgia, serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 26.971px;
	}

	.nn-shop .nn-gift-coming__card p {
		max-width: 297px;
		margin: 0 auto 20px;
		color: #1d5c4b;
		font-family: "Be Vietnam Pro", sans-serif;
		font-size: 15px;
		font-weight: 400;
		line-height: 21px;
	}

	.nn-shop .nn-gift-coming__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 196px;
        height: 56px;
        padding: 0 18px 0px;
        background: transparent url(../images/btn-zalo-mobile.svg) center / 100% 100% no-repeat;
        color: #fff;
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 16px;
        text-decoration: none;
    }

	.nn-shop-group {
		padding: 10px 0 28px;
	}

	.nn-shop-group--jar {
		padding: 36px 0 20px;
		background-position: center top;
		border: 0.426px solid #FAAE42;
        background: var(--G10, linear-gradient(107deg, #E8EEDD 2.52%, #E6EFDB 37.16%, #FFF4DF 71.8%));
	}

	.nn-shop-heading {
		margin-bottom: 16px;
	}

	.nn-shop-group.nn-shop-group--jar .nn-shop-heading {
		margin-bottom: 4px;
	}

	.nn-shop-group--gift header.nn-shop-heading {
		margin-top: 8px;
		margin-bottom: 16px;
	}

	.nn-shop-kicker {
		min-height: 34px;
		margin-bottom: 10px;
		padding: 4px 14px 4px 6px;
		font-size: 14px;
	}

	.nn-shop-kicker__dot,
	.nn-shop-kicker__dot img {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}

	.nn-shop-title {
		color: #1F4D44;
        font-family: "Beautique Display";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 37.377px;
	}

	.nn-shop-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.nn-shop-card {
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 15px;
	}

	.nn-shop-card__body {
		max-width: none;
		margin-top: 4px;
		padding: 0px 15px;
	}

	.nn-shop-card__title-row {
		margin-top: 12px;
		gap: 8px;
	}

	.nn-shop-name {
		min-height: 0;
	}

	.nn-shop-name a,
	.nn-shop-name__btn,
	.nn-shop-group--meal .nn-shop-name a,
	.nn-shop-group--meal .nn-shop-name__btn,
	.nn-shop-group--gift a,
	.nn-shop-group--gift .nn-shop-name__btn {
		color: var(--Color-Xanh-m, #1D5C4B);
        font-family: "Bricolage Grotesque";
        font-size: 21px !important;
        font-style: normal;
        font-weight: 600;
        line-height: 115%;
	}
	.nn-shop-price__now {
		color: var(--Color, #B63726);
		font-family: "Bricolage Grotesque";
		font-size: 22px;
		font-style: normal;
		font-weight: 600;
		line-height: 125%;
	}
	.nn-shop-spec {
		white-space: normal;
        color: var(--Color-Xanh-m, #1D5C4B);
        font-family: "Be Vietnam Pro";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
	}

	.nn-shop-price {
		font-size: 22px;
	}

	.nn-shop-price s {
		font-size: 13px;
	}

	.nn-shop-off {
		padding: 1px 6px;
        border-radius: 2.543px;
        background: #FFE1A9;
        color: var(--Color, #B63726);
        font-family: "Be Vietnam Pro";
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 125%;
	}

	.nn-shop-card__foot {
		align-items: center;
		gap: 8px;
		padding-top: 8px;
	}

	.nn-shop-fav,
	.nn-shop-fav svg {
		width: 28px;
		height: 28px;
	}

	.nn-shop-jar-slider__viewport {
		overflow: visible;
	}

	.nn-shop-jar-slider__track {
		flex-direction: column;
		gap: 8px;
		transform: none !important;
	}

	.nn-shop-group--jar .nn-shop-card {
		flex: none;
		width: 100% !important;
		max-width: 320px;
		margin: 0 auto;
		padding: 0 8px 4px;
	}

	.nn-shop-group--jar .nn-shop-card__media-wrap {
		width: min(100%, 250px);
		margin: 0 auto 6px;
	}

	.nn-shop-group--jar .nn-shop-card__media {
		max-width: 168px;
		transform: translateY(22px);
	}

	.nn-shop-group--jar .nn-shop-name {
		font-size: 22px;
	}

	.nn-shop-group--jar .nn-shop-spec {
		color: var(--Color-Xanh-m, #1D5C4B);
        text-align: center;
        font-family: "Be Vietnam Pro";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
	}

	.nn-shop-group--jar .nn-shop-card__foot {
		margin-top: 10px;
	}

	.nn-shop-group--jar .nn-shop-more {
		width: 148px;
		min-width: 148px;
		height: 48px;
		min-height: 48px;
		font-size: 15px !important;
		line-height: 48px;
	}

	.nn-shop-jar-dots {
		display: none;
	}

	.nn-shop .nn-cta-frame {
		width: 363.57px;
		max-width: 100%;
		height: 321.844px;
		min-height: 321.844px;
		margin-right: auto;
		margin-left: auto;
	}

	.nn-shop .nn-cta-frame__bg {
		width: 100%;
		height: 100%;
		object-fit: fill;
	}
}