/* =========================================================
   THIEPVUI - CSS NỀN TẢNG (dùng chung cho mọi mẫu thiệp)
   ========================================================= */

.thiepvui-wrapper {
	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	color: #222;
}

/* ---------- BÌ THƯ ---------- */
.thiepvui-bi-thu {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 20px;
}
.thiepvui-loi-moi {
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 8px;
}
.thiepvui-ten-khach {
	font-size: 32px;
	margin: 0 0 32px;
}
.thiepvui-btn-mo {
	padding: 14px 36px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.thiepvui-btn-mo:hover {
	transform: scale(1.04);
}

/* ---------- NỘI DUNG CHÍNH ---------- */
.thiepvui-noi-dung-chinh {
	padding: 32px 20px 60px;
}

.thiepvui-hero {
	text-align: center;
	margin-bottom: 32px;
}
.thiepvui-hero-nhan {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 4px;
}
.thiepvui-hero-ten {
	font-size: 30px;
	margin: 0 0 20px;
}
.thiepvui-hero-anh {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin: 0 auto;
}

section {
	margin-bottom: 32px;
}
section h2 {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.7;
	margin-bottom: 16px;
}

/* ---------- THÔNG TIN TIỆC ---------- */
.thiepvui-info-item {
	text-align: center;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.thiepvui-info-label {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.6;
}
.thiepvui-info-value {
	font-size: 17px;
	font-weight: 600;
}
.thiepvui-info-address {
	font-size: 14px;
	opacity: 0.8;
}
.thiepvui-info-map-link {
	font-size: 13px;
	text-decoration: underline;
	margin-top: 2px;
}

/* ---------- BẢN ĐỒ NHÚNG ---------- */
.thiepvui-map-embed {
	margin-top: 12px;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
.thiepvui-map-embed iframe {
	width: 100%;
	height: 220px;
	border: 0;
	display: block;
}
.thiepvui-map-open-link {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ---------- LỊCH MINI ---------- */
.thiepvui-lich-mini-section {
	text-align: center;
}
.thiepvui-mini-lich {
	max-width: 320px;
	margin: 0 auto;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 14px;
	overflow: hidden;
}
.thiepvui-mini-lich-thang {
	padding: 14px;
	font-weight: 700;
	border-bottom: 2px solid rgba(0,0,0,0.1);
}
.thiepvui-mini-lich-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 8px;
}
.thiepvui-mini-lich-header span {
	font-size: 12px;
	opacity: 0.6;
	padding: 6px 0;
}
.thiepvui-mini-lich-grid span {
	padding: 8px 0;
	font-size: 14px;
}
.thiepvui-mini-lich-ngay-dac-biet {
	background: #e8899b;
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
}

/* ---------- ĐẾM NGƯỢC ---------- */
.thiepvui-countdown-so {
	display: flex;
	justify-content: center;
	gap: 24px;
}
.thiepvui-countdown-item {
	text-align: center;
}
.thiepvui-countdown-num {
	font-size: 28px;
	font-weight: 700;
	display: block;
}
.thiepvui-countdown-label {
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.65;
}

/* ---------- ALBUM ẢNH ---------- */
.thiepvui-album-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.thiepvui-album-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ---------- Bố cục thông minh theo SỐ LƯỢNG ảnh (kiểu Ivy) - ảnh luôn
   nằm gọn trong ô vuông/chữ nhật, không méo, tự đổi cách sắp xếp:
   1 ảnh = 1 ô vuông lớn; 2 ảnh = chia đôi bằng nhau; 3 ảnh = 1 ảnh to bên
   trái + 2 ảnh nhỏ xếp chồng bên phải; từ 4 ảnh trở lên = lưới 2 cột đều. ---------- */

/* Đúng 1 ảnh */
.thiepvui-album-grid:has(> :only-child) {
	grid-template-columns: 1fr;
}

/* Đúng 2 ảnh */
.thiepvui-album-grid:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

/* ---------- Nguyên tắc chung cho các bố cục nhiều ảnh bên dưới: ô "nhỏ"
   (2 ảnh xếp chồng cạnh 1 ảnh to) dùng tỷ lệ 2:1 (chữ nhật nằm ngang, thấp
   hơn nửa so với ô vuông) - để khi CỘNG chiều cao 2 ô nhỏ lại, tổng vừa
   đúng bằng 1 ô vuông, khiến ô "to" bên cạnh tự nhiên trở thành hình vuông
   đẹp mà không cần tự đặt tỷ lệ cố định (linh hoạt theo mọi chiều rộng). ---------- */

/* Đúng 3 ảnh - ảnh đầu to (vuông, chiếm 2 hàng), 2 ảnh sau nhỏ xếp chồng */
.thiepvui-album-grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.thiepvui-album-grid:has(> :nth-child(3):last-child) > :nth-child(1) {
	grid-row: 1 / 3;
	aspect-ratio: auto;
	height: 100%;
}
.thiepvui-album-grid:has(> :nth-child(3):last-child) > :nth-child(2),
.thiepvui-album-grid:has(> :nth-child(3):last-child) > :nth-child(3) {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* Đúng 4 ảnh - 3 ảnh đầu theo mẫu "1 to + 2 nhỏ" (giống 3 ảnh), ảnh thứ 4
   nằm full-width ngay bên dưới (đúng theo Ivy). */
.thiepvui-album-grid:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(2, 1fr);
}
.thiepvui-album-grid:has(> :nth-child(4):last-child) > :nth-child(1) {
	grid-row: 1 / 3;
	grid-column: 1;
	aspect-ratio: auto;
	height: 100%;
}
.thiepvui-album-grid:has(> :nth-child(4):last-child) > :nth-child(2) {
	grid-column: 2; grid-row: 1;
	aspect-ratio: 4 / 3; height: auto;
}
.thiepvui-album-grid:has(> :nth-child(4):last-child) > :nth-child(3) {
	grid-column: 2; grid-row: 2;
	aspect-ratio: 4 / 3; height: auto;
}
.thiepvui-album-grid:has(> :nth-child(4):last-child) > :nth-child(4) {
	grid-column: 1 / 3;
	grid-row: 3;
	/* Ảnh to bên trái (ảnh #1) cao bằng chiều rộng 1 cột (hình vuông, do 2
	   ảnh nhỏ 2:1 cộng lại). Ảnh #4 full-width phải THẤP HƠN ảnh #1 (đúng
	   theo Ivy) - dùng tỷ lệ rộng hơn 2:1 một chút cho chắc chắn thấp hơn. */
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Đúng 5 ảnh - khối 3 ảnh (to + 2 nhỏ) phía trên, 2 ảnh vuông bằng nhau phía dưới. */
.thiepvui-album-grid:has(> :nth-child(5):last-child) {
	grid-template-columns: repeat(2, 1fr);
}
.thiepvui-album-grid:has(> :nth-child(5):last-child) > :nth-child(1) {
	grid-row: 1 / 3;
	grid-column: 1;
	aspect-ratio: auto;
	height: 100%;
}
.thiepvui-album-grid:has(> :nth-child(5):last-child) > :nth-child(2) {
	grid-column: 2; grid-row: 1;
	aspect-ratio: 4 / 3; height: auto;
}
.thiepvui-album-grid:has(> :nth-child(5):last-child) > :nth-child(3) {
	grid-column: 2; grid-row: 2;
	aspect-ratio: 4 / 3; height: auto;
}
.thiepvui-album-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 1; grid-row: 3; }
.thiepvui-album-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 2; grid-row: 3; }

/* Từ 6 ảnh trở lên - lặp lại đúng nhịp "cứ 3 ảnh thì 1 to + 2 nhỏ" liên
   tục xuống dưới (không cần biết chính xác tổng bao nhiêu ảnh, CSS Grid tự
   xếp theo nhịp lặp nhờ auto-placement). */
.thiepvui-album-grid:has(> :nth-child(6)) {
	grid-template-columns: repeat(2, 1fr);
}
.thiepvui-album-grid:has(> :nth-child(6)) > :nth-child(3n+1) {
	grid-row: span 2;
	aspect-ratio: auto;
	height: 100%;
}
.thiepvui-album-grid:has(> :nth-child(6)) > :nth-child(3n+2),
.thiepvui-album-grid:has(> :nth-child(6)) > :nth-child(3n+3) {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* ---------- LỜI NHẮN ---------- */
.thiepvui-loi-nhan {
	text-align: center;
	font-style: italic;
	padding: 0 12px;
	opacity: 0.9;
}

/* ---------- SỔ LỜI CHÚC ---------- */
.thiepvui-form-loi-chuc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}
.thiepvui-form-loi-chuc input,
.thiepvui-form-loi-chuc textarea {
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.15);
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 44px;
}
.thiepvui-form-loi-chuc textarea {
	min-height: 80px;
}
.thiepvui-form-loi-chuc button {
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
}
.thiepvui-form-loi-chuc-thongbao {
	font-size: 13px;
	text-align: center;
}

.thiepvui-loi-chuc-item {
	padding: 14px 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.thiepvui-loi-chuc-item strong {
	font-size: 14px;
}
.thiepvui-loi-chuc-ngay {
	font-size: 12px;
	opacity: 0.55;
	margin-left: 8px;
}
.thiepvui-loi-chuc-item p {
	margin: 4px 0 0;
	font-size: 14px;
}
.thiepvui-chua-co-loi-chuc {
	text-align: center;
	opacity: 0.6;
	font-size: 14px;
}

/* ---------- FOOTER ---------- */
.thiepvui-footer {
	text-align: center;
	opacity: 0.4;
	font-size: 12px;
	margin-top: 40px;
}

/* ---------- HỘP QUÀ (bấm mở, xổ ngay tại chỗ - không popup) ---------- */
.thiepvui-hop-qua-section {
	text-align: center;
}
.thiepvui-hop-qua-trigger {
	padding: 14px 32px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	cursor: pointer;
}
.thiepvui-hop-qua-noi-dung-inline {
	background: #fff;
	border-radius: 16px;
	padding: 28px 20px;
	margin-top: 16px;
	text-align: center;
}
.thiepvui-hop-qua-noi-dung-inline h2 {
	font-size: 20px;
	letter-spacing: 2px;
	margin-bottom: 8px;
}
.thiepvui-hop-qua-mung {
	opacity: 0.7;
	margin-bottom: 20px;
}
.thiepvui-hop-qua-qr img {
	width: 100%;
	max-width: 220px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.1);
}
.thiepvui-hop-qua-ten-tk {
	font-weight: 700;
	margin: 12px 0 0;
}
.thiepvui-hop-qua-so-tk {
	opacity: 0.75;
	margin: 2px 0;
}
.thiepvui-hop-qua-huong-dan {
	font-style: italic;
	font-size: 13px;
	opacity: 0.6;
}
.thiepvui-hop-qua-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	opacity: 0.5;
	font-size: 13px;
}
.thiepvui-hop-qua-divider::before,
.thiepvui-hop-qua-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
}
.thiepvui-wishlist-tieu-de {
	margin-bottom: 2px;
}
.thiepvui-wishlist-phu-de {
	font-size: 13px;
	opacity: 0.6;
	margin-bottom: 12px;
}
.thiepvui-wishlist-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
.thiepvui-wishlist-list li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 14px;
}

/* ---------- NHẠC NỀN ---------- */
.thiepvui-nhac-nen-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 500;
	padding: 12px 18px;
	border: none;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	font-size: 13px;
	cursor: pointer;
}
.thiepvui-nhac-nen-frame {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------- HẾT HẠN DÙNG THỬ / BANNER CHỦ THIỆP ---------- */
.thiepvui-het-han { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.thiepvui-het-han-box { text-align: center; max-width: 420px; }
.thiepvui-het-han-box h1 { font-size: 24px; margin-bottom: 12px; }
.thiepvui-het-han-box p { opacity: 0.7; }
.thiepvui-banner-chu { background: #fff3cd; color: #7a5c00; padding: 12px 16px; text-align: center; font-size: 14px; line-height: 1.5; }
.thiepvui-banner-chu a { color: #c0392b; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---------- THANH PREVIEW CỐ ĐỊNH (chỉ chủ thiệp thấy) ---------- */
.thiepvui-preview-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: #fff;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	gap: 12px;
}
.thiepvui-preview-bar-btn {
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.thiepvui-preview-bar-btn.outline {
	border: 1.5px solid rgba(0,0,0,0.2);
	color: #333;
}
.thiepvui-preview-bar-btn.primary {
	background: #e8899b;
	color: #fff;
	font-weight: 600;
}
.thiepvui-preview-bar-center {
	flex: 1;
	text-align: center;
}
.thiepvui-preview-bar-status {
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 999px;
	display: inline-block;
}
.thiepvui-preview-bar-status.da-tt { background: #e6f7ed; color: #1a7a43; }
.thiepvui-preview-bar-status.dung-thu { background: #fff3cd; color: #7a5c00; }
.thiepvui-preview-bar-status.het-han { background: #fdecea; color: #c0392b; }

/* Cột chứa nút "Xuất bản thiệp" + dòng chú thích ngay bên dưới nó */
.thiepvui-preview-bar-cot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.thiepvui-preview-bar-chuthich { font-size: 12px; opacity: 0.75; }
@media (max-width: 600px) { .thiepvui-preview-bar-chuthich { display: none; } }

/* Đẩy footer lên để không bị thanh preview che khuất */
.thiepvui-footer { padding-bottom: 80px; }

/* ---------- BÌ THƯ - PHIÊN BẢN ĐẦY ĐỦ (bối cảnh sự kiện + lời chào cá nhân) ---------- */
.thiepvui-bt-nhan { font-size: 13px; letter-spacing: 2px; opacity: 0.6; margin-bottom: 8px; }
.thiepvui-bt-suKien { font-size: 26px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.thiepvui-bt-cua { font-size: 13px; opacity: 0.5; margin: 4px 0; }
.thiepvui-bt-nhanvat { font-size: 30px; margin: 4px 0 20px; }
.thiepvui-bt-divider { margin: 16px auto 20px; opacity: 0.4; font-size: 18px; }