/* =====================================================================
   Blakletterpress — Trang khuyến mãi thiệp Tết 2026
   HOẠT ĐỘNG 2 — CSS cho phần DÙNG GenAI (chủ đề: Box model + Position).

   Khác với Hoạt động 1, ở đây trang trông GẦN NHƯ đúng: nhìn lướt qua thấy
   ổn, nhưng vẫn còn MỘT VÀI LỖI TINH VI về box model / position mà bạn phải
   phát hiện qua quan sát kỹ + DevTools (ví dụ: cuộn trang để kiểm tra menu,
   xem nhãn "-20%" có đủ trên mọi thẻ không, thu hẹp cửa sổ xem thẻ có bị
   rớt hàng không).

   QUAN TRỌNG: trong file này CŨNG có những đoạn code TRÔNG "thừa/lạ" nhưng
   thực ra ĐANG ĐÚNG và CẦN THIẾT. AI hay "sửa nhầm" chúng. Nhiệm vụ của bạn
   là chỉ sửa lỗi thật và BẢO VỆ những đoạn đúng (xem yêu cầu trong de-bai.md).
   ===================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", Arial, sans-serif;
	color: #222;
	background: #f4f1ea;
	line-height: 1.5;
}

a {
	color: inherit;
}

/* .page không dùng overflow-x: hidden để tránh làm hỏng position: sticky của .site-header */

/* ===== Header / thanh điều hướng ===== */
.site-header {
	background: #2b2b2b;
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
}

.main-nav ul {
	list-style: none;
	display: flex;
	gap: 24px;
}

.main-nav a {
	color: #ddd;
	text-decoration: none;
}

.main-nav a:hover {
	color: #fff;
}

/* ===== Hero ===== */
.hero {
	position: relative;
	height: 360px;
	overflow: hidden;
}

.hero-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
}

.hero-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 560px;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-overlay h1 {
	font-size: 34px;
	margin-bottom: 12px;
}

.hero-overlay p {
	font-size: 18px;
	margin-bottom: 20px;
}

.hero-btn {
	display: inline-block;
	padding: 12px 28px;
	background: #c0392b;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

/* ===== Khu sản phẩm ===== */
.products {
	max-width: 1000px;
	margin: -48px auto 48px;
	padding: 24px 24px 0;
	position: relative;
	z-index: 1;
	background: #f4f1ea;
	border-radius: 16px 16px 0 0;
}

.products h2 {
	margin-bottom: 24px;
	font-size: 28px;
}

.card-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.card {
	flex: 0 0 calc((100% - 48px) / 3);
	min-height: 320px;
	position: relative;
	background: #fff;
	border: 1px solid #e0d8c8;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #c0392b;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 20px;
}

.card img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 4px;
}

.card-body h3 {
	margin: 12px 0 8px;
	font-size: 20px;
}

.card-body p {
	margin-bottom: 8px;
	font-size: 15px;
	color: #555;
}

.card-body .price {
	color: #c0392b;
	font-weight: bold;
	font-size: 18px;
}

/* ===== Nút lên đầu trang ===== */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	background: #2b2b2b;
	color: #fff;
	text-align: center;
	line-height: 48px;
	font-size: 22px;
	text-decoration: none;
	border-radius: 50%;
	z-index: 200;
}

/* ===== Footer ===== */
.site-footer {
	padding: 32px 24px;
	background: #2b2b2b;
	color: #cfcfcf;
	text-align: center;
	font-size: 14px;
}