/*
 * Gợi ý quà tặng — [goi_y_qua_tang]
 * Dùng biến :root của style-nanggio.css (nạp trước, làm dependency).
 * Tông earthy: nền kem, chữ nâu mộc, nhấn cam thương hiệu, nút Zalo xanh Zalo.
 */

.ng-qua {
	--qua-vien: #ffe0cc;
	color: var(--text-rustic, #5D4037);
	max-width: 1080px;
	margin: 1.5rem auto;
}

/* ---- Bộ lọc ---- */
.ng-qua-loc {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	background: linear-gradient(135deg, #fff3ec, var(--white, #fff));
	border: 1px solid var(--qua-vien);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.4rem;
}
.ng-qua-nhom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.7rem;
}
.ng-qua-nhom-nhan {
	flex: 0 0 92px;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--brand-cam-dam, #c2410c);
}
.ng-qua-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.ng-qua-chip {
	cursor: pointer;
	margin: 0;
}
.ng-qua-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ng-qua-chip span {
	display: inline-block;
	padding: 0.34rem 0.8rem;
	border: 1px solid var(--qua-vien);
	border-radius: 999px;
	background: var(--white, #fff);
	font-size: 0.88rem;
	line-height: 1.3;
	color: var(--text-rustic, #5D4037);
	transition: background .15s, border-color .15s, color .15s;
}
.ng-qua-chip:hover span {
	border-color: var(--brand-cam, #ea580c);
}
.ng-qua-chip input:checked + span {
	background: var(--brand-cam, #ea580c);
	border-color: var(--brand-cam, #ea580c);
	color: var(--white, #fff);
	font-weight: 600;
}
.ng-qua-chip input:focus-visible + span {
	outline: 2px solid var(--brand-cam-dam, #c2410c);
	outline-offset: 2px;
}

/* ---- Lưới sản phẩm ---- */
.ng-qua-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.1rem;
}
.ng-qua-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--qua-vien);
	border-radius: 14px;
	overflow: hidden;
	background: var(--white, #fff);
	transition: box-shadow .18s, transform .18s;
}
.ng-qua-card:hover {
	box-shadow: 0 8px 22px rgba(93, 64, 55, 0.13);
	transform: translateY(-2px);
}
.ng-qua-card[hidden] { display: none; }

.ng-qua-anh {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff3ec;
}
.ng-qua-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ng-qua-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 0.85rem 0.9rem;
	flex: 1 1 auto;
}
.ng-qua-ten {
	font-size: 0.98rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 600;
}
.ng-qua-ten a {
	color: var(--text-rustic, #5D4037);
	text-decoration: none;
}
.ng-qua-ten a:hover { color: var(--brand-cam, #ea580c); }

.ng-qua-gia {
	font-weight: 700;
	color: var(--brand-red, #E31E24);
	font-size: 1.02rem;
	margin-top: auto;
}
.ng-qua-gia del { color: #9a8f8a; font-weight: 400; font-size: 0.86em; }
.ng-qua-gia ins { text-decoration: none; }

.ng-qua-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.5rem 0.7rem;
	border-radius: 10px;
	background: var(--zalo-blue, #0068FF);
	color: var(--white, #fff);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: filter .15s;
}
.ng-qua-zalo:hover { filter: brightness(0.93); color: var(--white, #fff); }

/* ---- Thông báo ---- */
.ng-qua-trong,
.ng-qua-rong {
	text-align: center;
	color: #7a6a62;
	background: #fff3ec;
	border: 1px dashed var(--qua-vien);
	border-radius: 12px;
	padding: 1.1rem;
	margin: 0.6rem 0;
}

/* ---- Toast copy lời nhắn ---- */
.ng-qua-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(12px);
	background: #1f2937;
	color: #fff;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	max-width: 90vw;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 9999;
}
.ng-qua-toast.is-hien {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
	.ng-qua-nhom-nhan { flex-basis: 100%; }
	.ng-qua-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
	.ng-qua-ten { font-size: 0.9rem; }
}