:root {
	--color-primary: #dc3545;
	/* Màu Đỏ chính */
	--color-dark: #212529;
	/* Màu Đen đậm */
	--color-secondary: #6c757d;
	/* Màu Xám phụ */
	--color-light-bg: #f0f4fa;
	/* Màu nền Event Card */
	--font-title: 'Cormorant Garamond', serif;
	--font-script: 'Dancing Script', cursive;
	--primary-dark: #1a1a1a;
	--accent-pink: #ff69b4;
	--button-gray: rgba(90, 90, 90, 0.8);
}

/* Cấu hình cơ bản */
body {
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	background: #f4f4f4;
	font-size: 16px;
	animation: revealBackground 2s ease-in-out 1s forwards;
}

/* ---------------------------SECTION 1  BANNER --------------------------- */
.section-1-banner .hero-banner {
	position: relative;
	width: 100%;
	/* Đặt chiều cao 100% viewport trên mọi thiết bị */
	height: 100vh;
	/* Cập nhật theo yêu cầu: Chiều cao 100vh, lặp lại theo trục X */
	background-size: auto 100vh;
	background-repeat: repeat-x;
	/* ĐÃ THÊM LẠI: Lặp lại theo chiều ngang */
	background-position: center;
	overflow: hidden;
}

/* Lớp Overlay Mờ */
.section-1-banner .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Độ mờ 50% */
}

/* --------------------------- PHÔNG CHỮ VÀ TYPOGRAPHY --------------------------- */
.section-1-banner .banner-title {
	font-family: 'Dancing Script', cursive;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	/* Mặc định cho màn hình >= 992px */
	font-size: 4.5rem;
	line-height: 1.2;
}

/* ---------------------------SECTION 2 SAVE THE DATE --------------------------- */
.section-2-save-the-date .heart-icon {
	color: #ff6b6b;
	animation: pulseSection2SaveTheDate 2s infinite;
}

@keyframes pulseSection2SaveTheDate {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

.fade-in {
	animation: fadeInSection2SaveTheDate 1s ease-in-out;
}

@keyframes fadeInSection2SaveTheDate {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* TAB BUTTONS (Đỏ/Trắng) */
.section-2-save-the-date .tab-button {
	border-color: #ff6b6b !important;
	color: #ff6b6b !important;
}

.section-2-save-the-date .tab-button.active {
	background-color: #f38375;
	color: white !important;
	border-color: #f38375 !important;
}

.section-2-save-the-date .tab-button.active i.fa-heart {
	color: white !important;
}

/* NÚT BẤM CHUNG */
.section-2-save-the-date .btn-custom {
	transition: transform 0.3s ease-in-out;
}

.section-2-save-the-date .btn-custom:hover {
	transform: scale(1.05);
}

.section-2-save-the-date .floating-btn-custom {
	transition: transform 0.3s ease-in-out;
}

.section-2-save-the-date .floating-btn-custom:hover {
	transform: scale(1.1);
}

.section-2-save-the-date .font-great-vibes {
	font-family: 'Great Vibes', cursive;
}

.section-2-save-the-date .save-date-box {
	bottom: 33%;
	/* vị trí 1/3 dưới ảnh */
	left: 50%;
	transform: translate(-50%, 50%);
	position: absolute;
}

.section-2-save-the-date .save-date-title {
	font-size: 3.4rem;
	/* chữ lớn hơn */
	margin-bottom: 0.5rem;
}

.section-2-save-the-date .couple-names,
.section-2-save-the-date .event-details,
.section-2-save-the-date .btn-map-bride,
.section-2-save-the-date .btn-map-groom,
.section-2-save-the-date .img-decor-tab
 {display:none !important}

.section-2-save-the-date .couple-names.active,
.section-2-save-the-date .event-details.active,
.section-2-save-the-date .btn-map-bride.active,
.section-2-save-the-date .btn-map-groom.active,
.section-2-save-the-date .img-decor-tab.active {display: block !important}

.section-2-save-the-date .decor-line {
	width: 50%;
	/* chỉnh to nhỏ đường kẻ */
	margin: 0.75rem auto;
	display: block;
}

.section-2-save-the-date .date-text {
	font-size: 1.3rem;
	/* chữ ngày tháng to hơn */
}

.section-2-save-the-date .decor-line-text {
	font-size: 1.5rem;
	margin: 0.3rem auto;
	color: white;
	/* hoặc đổi sang màu bạn muốn */
}

/* ICON SONG HỶ */
.section-2-save-the-date .song-hy-icon {
	font-size: 2rem;
	/* GIẢM từ 3.5rem xuống 3rem */
	color: var(--color-primary);
	margin: 0.5rem 0;
	/* GIẢM margin */
	font-family: Arial, sans-serif;
	font-weight: bold;
	display: block;
}

/* EVENT CARD STYLING & TEXT HIERARCHY */
.section-2-save-the-date .event-card {
	background: var(--color-light-bg);
	line-height: 1.2;
}

/* 1. Tiêu đề LỚN (Great Vibes - Đỏ) */
.section-2-save-the-date .event-card h2.title-great-vibes {
	font-family: 'Great Vibes', cursive;
	font-size: 2rem;
	/* GIẢM từ 2.2rem xuống 2rem */
	font-weight: 400;
	color: var(--color-primary);
	margin-bottom: 0.4rem;
	/* GIẢM margin */
}

/* Tên Cô Dâu Chú Rể (Great Vibes - Đỏ) */
.section-2-save-the-date .event-card h4.names-great-vibes {
	font-family: 'Great Vibes', cursive;
	font-size: 2.2rem;
	/* GIẢM từ 2.5rem xuống 2.2rem */
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.5rem 0;
	/* GIẢM margin */
}

/* 2. Tiêu đề PHỤ (Quicksand - Đen đậm) */
.section-2-save-the-date .event-card h3.subtitle-dark {
	font-size: 1rem;
	/* GIẢM từ 1.1rem xuống 1rem */
	font-weight: 700;
	color: var(--color-dark);
}

/* Tiêu đề Sự Kiện/Thời Gian Chính (Quicksand - Đen đậm) */
.section-2-save-the-date .event-card h5.detail-heading {
	font-size: 1rem;
	/* GIẢM từ 1.1rem xuống 1rem */
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 0.1rem;
	/* GIẢM margin */
}

/* 3. Thông tin CHI TIẾT (Quicksand - Xám mờ) */
.section-2-save-the-date .event-card p.detail-info {
	font-size: 0.85rem;
	/* GIẢM từ 0.9rem xuống 0.85rem */
	font-weight: 500;
	color: var(--color-secondary);
	margin-bottom: 0.2rem;
}

/* Mô tả lời mời và lời kết (Quicksand - Xám mờ) */
.section-2-save-the-date .event-card p.text-description {
	font-size: 0.7rem;
	/* GIẢM từ 0.95rem xuống 0.9rem */
	color: var(--color-secondary);
	margin-bottom: 0;
	margin-top: 0;
}

/* Responsive font sizes for main title (Đã giữ nguyên) */
.section-2-save-the-date .responsive-title {
	font-size: 6vw;
	font-weight: 400;
}

.section-2-save-the-date .responsive-subtitle {
	font-size: 1.2vw;
}

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* Responsive layout for the main content cards */
.section-2-save-the-date .main-card {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	display: flex;
	border-radius: 1rem;
	overflow: hidden;
}

.section-2-save-the-date .image-card,
.section-2-save-the-date .event-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

/* ---------------------------SECTION 3 wedding timeline --------------------------- */
.section-3-wedding-timeline .section-wedding-timeline {
	position: relative;
	width: 100%;
	overflow: hidden;

	/* Đảm bảo căn giữa cho nội dung con */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Mặc định desktop */
	height: 90vh;
	background-repeat: repeat-x;
	background-size: auto 90vh;
	background-position: center;
}

/* Overlay mờ */
.section-3-wedding-timeline .section-wedding-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 90vh;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 1;
	/* Quan trọng để overlay nằm dưới nội dung chính */
}

/* ------------------- Nội dung Timeline (ĐÃ CẬP NHẬT CĂN GIỮA) ------------------- */
.section-3-wedding-timeline .wedding-timeline-content {
	/* Đã bỏ position: absolute; để sử dụng Flexbox của .section-wedding-timeline */
	z-index: 150;
	/* Đặt trên overlay */
	width: 768px;
	padding: 20px;
	box-sizing: border-box;
	color: #fff;
	text-align: left;
	/* Animation */
	opacity: 0;
	animation: fadeInUpSection3WeddingTimeline 1s forwards 0.5s;
	/* Đảm bảo căn giữa ngang khi không dùng absolute */
	margin: 0 70px;
}

.section-3-wedding-timeline .timeline-title {
	text-align: center;
	font-family: "Dancing Script", cursive;
	font-size: 4rem;
	margin-top: 0;
	margin-bottom: 20px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	color: #ffcccc;
	/* Màu chữ hồng nhạt */
}

.section-3-wedding-timeline .content-wrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Căn trên đầu cho các cột */
	gap: 40px;
}

.section-3-wedding-timeline .timeline-column {
	position: relative;
	width: 380px;
	padding-left: 0;
}

.section-3-wedding-timeline .timeline-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 80px;
	width: 2px;
	background: rgba(255, 255, 255, 0.6);
}

.section-3-wedding-timeline .timeline-item {
	position: relative;
	margin-bottom: 50px;
}

.section-3-wedding-timeline .timeline-icon {
	position: absolute;
	left: -15px;
	top: 10px;
	width: 60px;
	height: 60px;

	display: flex;
	justify-content: center;
	align-items: center;

}

.section-3-wedding-timeline .timeline-icon img {
	width: 60px;
	height: 50px;
}

.section-3-wedding-timeline .heart {
	position: absolute;
	left: 73px;
	/* chỉnh theo vị trí đường timeline */
	top: 35px;
	/* chỉnh theo chiều dọc */
	width: 16px;
	height: 16px;
	background-color: white;
	transform: rotate(-45deg);
	display: inline-block;
}

.section-3-wedding-timeline .heart::before,
.section-3-wedding-timeline .heart::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: white;
	border-radius: 50%;
}

.section-3-wedding-timeline .heart::before {
	top: -8px;
	left: 0;
}

.section-3-wedding-timeline .heart::after {
	left: 8px;
	top: 0;
}


.section-3-wedding-timeline .timeline-text {
	margin-left: 120px;
}

.section-3-wedding-timeline .timeline-text h3 {
	font-family: "Dancing Script", cursive;
	font-size: 1.6rem;
	margin: 5px 0;
	color: #ffdbdb;
}

.section-3-wedding-timeline .timeline-text p {
	margin: 0;
	font-size: 1rem;
}

/* Cột Card */
.section-3-wedding-timeline .card-column {
	width: 300px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	/* Đẩy xuống để căn ngang với item thứ 2 của timeline */
	margin-top: 0;
}

.section-3-wedding-timeline .calendar-card,
.photo-card {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	color: #333;
	text-align: left;
}

.section-3-wedding-timeline .calendar-card {
	background: linear-gradient(135deg, #fff 0%, #ffe0e6 100%);
	/* Gradient hồng nhạt */
	border: 1px solid #ffcccc;
}

.section-3-wedding-timeline .calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.section-3-wedding-timeline .calendar-header h4 {
	font-family: "Dancing Script", cursive;
	font-size: 3rem;
	margin: 0;
	color: #e94e77;
	/* Màu hồng đậm */
}

.section-3-wedding-timeline .calendar-header img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	aspect-ratio: 1 / 1;
}

.section-3-wedding-timeline .calendar-dates {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
	font-size: 0.85rem;
}

.section-3-wedding-timeline .calendar-dates div {
	padding: 6px 2px;
	border-radius: 4px;
	z-index: 500;
}

.section-3-wedding-timeline .calendar-dates .day-header {
	color: #e94e77;
	font-weight: bold;
	padding-bottom: 5px;
}

.section-3-wedding-timeline .calendar-dates .highlight {
	background: none;
	color: white;
	font-weight: bold;
	position: relative;
	z-index: 400;
}

.section-3-wedding-timeline .calendar-dates .highlight::before,
.section-3-wedding-timeline .calendar-dates .highlight::after {
	content: "";
	position: absolute;
	width: 21px;
	height: 31px;
	background: red;
	border-radius: 50px 50px 0 0;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	left: 8%;
	z-index: 49;
}

.section-3-wedding-timeline .calendar-dates .highlight::after {
	left: calc(50% - 6px);
	transform: translateY(-50%) rotate(45deg);
}

.section-3-wedding-timeline .calendar-dates .highlight span {
	position: relative;
	z-index: 50;
}


.section-3-wedding-timeline .photo-card {
	padding: 10px;
}

.section-3-wedding-timeline .photo-card img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ------------------- CSS gốc của bạn ------------------- */
.section-3-wedding-timeline .mobile-layout {
	display: none;
}


@keyframes fadeInUpSection3WeddingTimeline {
	from {
		/* Đã loại bỏ các transform liên quan đến vị trí */
		opacity: 0;
	}

	to {
		/* Đã loại bỏ các transform liên quan đến vị trí */
		opacity: 1;
	}
}

/* ---------------------------SECTION 4 wedding  --------------------------- */
.section-4-wedding .script-font {
	font-family: 'Great Vibes', cursive;
	font-weight: 400;
	/* Great Vibes thường chỉ có một độ đậm */
	font-size: 60px;
	color: white;
}


/* Định nghĩa hiệu ứng cắt cung cho hình ảnh */
.section-4-wedding .shadow {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50% 50% 0 0 / 25% 25% 0 0;
	height: 26rem;
	width: 20rem;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	/* căn ngang */
	align-items: center;
	/* căn dọc */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	/* thêm đổ bóng mềm */
}

.section-4-wedding .image-arch-clip {
	border-radius: 50% 50% 0 0 / 25% 25% 0 0;
	height: 24rem;
	width: 18rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	/* căn ngang */
	align-items: center;
	/* căn dọc */
}

.section-4-wedding .image-arch-clip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* hoặc contain nếu muốn ảnh không bị crop */
	object-position: center center;
	/* căn chính giữa */
}

.section-4-wedding .image-arch-clip:hover {
	transform: scale(1.03);
}

/* Custom gradient overlay cho nền mờ */
.section-4-wedding .overlay-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
	z-index: 1;
	/* Đặt trên lớp nền ảnh */
}

/* Màu và kiểu chữ đặc trưng */
.section-4-wedding .text-pink-600 {
	color: #db2777;
	/* Màu hồng đậm */
}

.section-4-wedding .fullname {
	font-size: 40px;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
}

.section-4-wedding .text-slogan {
	color: white;
	white-space: normal;
}

.section-4-wedding .image-wedding {
	width: 100px;
	height: auto;
}

/* ---------------------------SECTION 5 countdown  --------------------------- */

.section-5-countdown .title-text {
	font-family: var(--font-title);
	letter-spacing: 0.5em;
	/* Độ giãn chữ rộng */
	font-weight: 400;
	line-height: 1.1;
	transform: scaleY(1.1);
	/* Kéo dãn nhẹ theo chiều dọc để trông mảnh và cao hơn */
}

/* Định dạng chữ ký (Mặc định cho Desktop) */
.section-5-countdown .signature-text {
	font-family: var(--font-script);
	font-size: 3rem;
	line-height: 1.2;
	color: #333;
}

.section-5-countdown .countdown-title {
	font-size: 1.75rem;
}

.section-5-countdown .countdown-box {
	background-color: #4b4b4b;
	/* Màu xám đậm */
	color: white;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	width: 75px;
	/* Chiều rộng cố định cho desktop */
	text-align: center;
	margin: 0 0.25rem;
	/* Khoảng cách nhỏ giữa các hộp */
}

/* Bố cục ảnh phức tạp (Mặc định cho Desktop) */
.section-5-countdown .image-container {
	position: relative;
	width: 800px;
	/* Chiều rộng tổng thể tương đối của khu vực ảnh trên desktop */
	margin: 0 auto;
}

/* Đảm bảo ảnh 1 và 2 có cùng chiều cao */
.section-5-countdown .img-placeholder {
	/* Sử dụng flex-basis để mô phỏng width: 38% và height: 400px */
	flex-basis: 38%;
	height: 400px;
	/* Chiều cao cố định cho desktop */
	background-color: #f0f0f0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	/* Border trắng và không bo tròn */
	border-radius: 0;
	border: 5px solid #ffffff;

	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

/* Ảnh 3 (nhỏ hơn, nằm giữa, hơi chồng lên) */
.section-5-countdown .img-placeholder.center-overlap {
	width: 250px;
	height: 300px;
	z-index: 20;
	margin-top: -150px;
	/* Dịch chuyển lên để chồng lên 2 ảnh kia */
}

/* Icon nhẫn */
.section-5-countdown .ring-icon {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
	filter: drop-shadow(0 0 8px rgba(180, 150, 0, 0.7));
	z-index: 30;
}

/* --------------------------- section 6 love story --------------------------- */

.section-6-lovestory {
	position: relative;
	width: 100%;
	overflow: hidden;
	color: #fff;

	/* --- Yêu cầu về Background Image --- */
	background-repeat: repeat-x;
	/* Bắt buộc: Repeat theo trục X */
	background-position: center;
	/* Chiều cao của ảnh nền co giãn 100% theo chiều cao của banner */
	background-size: auto 100%;

	/* Đặt min-height để đảm bảo banner luôn có kích thước đủ lớn */
	min-height: 550px;
	/* Tăng min-height để chứa nội dung 3 cột */
}

/* 2. Overlay mờ (Sử dụng pseudo-element như bản gốc) */
.section-6-lovestory::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	/* Độ mờ tăng nhẹ để nội dung nổi bật hơn */
	pointer-events: none;
	z-index: 1;
	/* Lớp dưới nội dung */
}

/* 3. Văn bản và Nội dung Timeline */
.section-6-lovestory .banner-content {
	position: relative;
	z-index: 2;
	text-align: center;
	/* Padding lớn để tạo không gian cho banner co giãn */
	padding: 80px 15px 100px;
}

.section-6-lovestory .banner-content h1.love-story-title {
	font-family: "Dancing Script", cursive;
	font-size: 6.5rem;
	/* Desktop size */
	color: #ffcc00;
	/* Màu vàng Gold */
	margin-bottom: 2rem;
	line-height: 1.2;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
	opacity: 0;
	animation: fadeInUpSection6Lovestory 3s ease forwards;
}

.section-6-lovestory .timeline-item {
	padding: 20px;
	margin-bottom: 20px;
	/* Tạo đường viền giả lập khung */
	border: 2px solid rgba(255, 204, 0, 0.5);
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.4);
	/* Nền tối nhẹ cho từng cột */
	transition: all 0.3s ease;
}

.section-6-lovestory .timeline-item:hover {
	background-color: rgba(0, 0, 0, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.section-6-lovestory .timeline-item h2 {
	font-family: "Dancing Script", cursive;
	font-size: 2rem;
	color: #ffd700;
	margin-bottom: 0.5rem;
}

.section-6-lovestory .timeline-item h3 {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.section-6-lovestory .timeline-item .date {
	font-style: italic;
	color: #ccc;
	margin-bottom: 10px;
	display: block;
}

.section-6-lovestory .timeline-item p {
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.6;
	color: #e0e0e0;
}

/* Animation Keyframes */
@keyframes fadeInUpSection6Lovestory {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------- section 7 video --------------------------- */
.section-7-video {
	background-color: #fcfcfc;
	/* Nền trắng/kem cho phần này */
	padding: 80px 0;
	text-align: center;
}

.section-7-video .video-title {
	font-family: "Dancing Script", cursive;
	font-size: 4.5rem;
	color: #d4a017;
	/* Màu vàng nâu */
	margin-bottom: 1rem;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.section-7-video .video-caption {
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	color: #6c757d;
	margin-bottom: 2rem;
	font-weight: 300;
}

.section-7-video .heart-deco {
	color: #ff69b4;
	font-size: 1.5rem;
	margin: 0 10px;
}

/* Video Embed Container */
.section-7-video .video-wrapper {
	max-width: 600px;
	margin: 0 auto;
	/* Bootstrap responsive embed 16:9 ratio */
	position: relative;
	width: 100%;
	height: 50%;
	padding-bottom: 30%;
	/* 16:9 Aspect Ratio */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	overflow: hidden;
}

/* Áp dụng cho cả iframe (nếu có) và thẻ video */
.section-7-video .video-wrapper iframe,
.section-7-video .video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* --------------------------- section8 + 9 albulm --------------------------- */
.section-8-album .title-font {
	font-family: 'Great Vibes', cursive;
}

.section-8-album .gallery-card {
	overflow: hidden;
	transition: box-shadow 0.3s ease;
	cursor: pointer;
}

.section-8-album .gallery-card:hover {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
	/* Lớn hơn shadow-lg */
}

.section-8-album .gallery-card img {
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.section-8-album .gallery-card:hover img {
	transform: scale(1.05);
}

.section-8-album .main-container {
	/* Tái tạo padding và shadow của div chứa chính */
	padding: 2rem;
	/* p-6 sm:p-12 */
}

.section-9-loingo {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.section-9-loingo .main-container {
	/* Tái tạo padding, shadow và căn giữa */
	padding: 2rem;
}

/* --------------------------- section8 + 10 wedding invite --------------------------- */
.section-10-wedding-invite {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.section-10-wedding-invite .title-font {
	font-family: 'Great Vibes', cursive;
}

.section-10-wedding-invite .rsvp-card {
	padding: 2rem;
}

.section-10-wedding-invite .form-control:focus,
.section-10-wedding-invite .form-select:focus {
	border-color: #c98e40;
	/* Màu nhấn */
	box-shadow: 0 0 0 0.25rem rgba(201, 142, 64, 0.25);
}

.section-10-wedding-invite .btn-custom {
	background-color: #8B4513;
	/* Màu nâu đậm */
	border-color: #8B4513;
	color: white;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.section-10-wedding-invite .btn-custom:hover {
	background-color: #A0522D;
	/* Màu nâu sáng hơn khi hover */
	border-color: #A0522D;
	color: white;
}

/* --------------------------- section8 + 11 lời chúc --------------------------- */
.section-11-loichuc {
	position: relative;
	width: 100%;
	overflow: hidden;
	color: #fff;

	/* --- Yêu cầu về Background Image --- */
	/* Placeholder cho ảnh nền lặp */
	background-repeat: repeat-x;
	/* Bắt buộc: Repeat theo trục X */
	background-position: center;
	background-size: auto 100%;

	/* Đặt min-height để đảm bảo banner luôn có kích thước đủ lớn */
	display: flex;
	align-items: center;
	/* Căn giữa nội dung theo chiều dọc */
}


/* 3. Văn bản và Nội dung Form */
.section-11-loichuc .banner-content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 40px 15px;
	/* Padding cho nội dung */
}

.section-11-loichuc .wishes-card {
	background-color: rgba(255, 255, 255, 0.9);
	/* Nền mờ trắng cho form */
	border-radius: 1rem;
	padding: 2rem;
	color: #4a4a4a;
	/* Màu chữ mặc định */
	max-width: 500px;
}

.section-11-loichuc .title-dancing {
	font-family: "Dancing Script", cursive;
	font-size: 2.5rem;
	color: #2c4a4f;
	/* Màu tiêu đề đậm */
	text-align: center;
	margin-bottom: 2rem;
	font-weight: 700;
}

.form-control:focus,
.form-select:focus {
	border-color: #f7a8b8;
	/* Màu hồng nhạt */
	box-shadow: 0 0 0 0.25rem rgba(247, 168, 184, 0.4);
}

.section-11-loichuc .btn-custom {
	background-color: #8B4513;
	/* Màu nâu đậm */
	border-color: #8B4513;
	color: white;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition: background-color 0.3s ease;
	width: 100%;
}

.section-11-loichuc .btn-custom:hover {
	background-color: #A0522D;
	/* Màu nâu sáng hơn khi hover */
	border-color: #A0522D;
	color: white;
}

.section-11-loichuc .small-text-logo {
	font-size: 0.7rem;
	color: #ccc;
}

/* --------------------------- section8 +12 wish --------------------------- */
.section-12-wish {
	/* THAY ĐỔI: Sử dụng min-height để tự động co giãn theo nội dung */
	position: relative;
	min-height: 80vh;
	/* Chiều cao tối thiểu 80% màn hình */
	padding-top: 4rem;
	padding-bottom: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;

	/* Tái tạo hiệu ứng ảnh nền mờ và tối */
	/* background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/1.jpg'); */
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
	background-position: center center;
	/* ĐÃ CẬP NHẬT: Ảnh nền lặp lại theo chiều ngang và chiều cao 100% */
	background-repeat: repeat-x;
	background-size: auto 100%;
}

.section-12-wish .hero-content {
	z-index: 10;
	color: #fff;
	/* Tạo hiệu ứng chuyển màu cho vùng nội dung */
	background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.05));
	/* backdrop-filter: blur(2px); (Hiệu ứng này có thể không hoạt động trên một số trình duyệt) */
	padding: 2.5rem;
	border-radius: 12px;
	max-width: 90%;
}

.section-12-wish .main-title {
	/* Giữ Times New Roman cho tiêu đề lớn để có độ tương phản và phong cách trang trọng */
	font-family: 'Times New Roman', serif;
	font-size: 3.5rem;
	margin-bottom: 0.5rem;
	color: white;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.section-12-wish .subtitle {
	font-size: 1.1rem;
	color: #f7f7f7;
	margin-bottom: 2rem;
}

/* Nút Quà Tặng Tùy Chỉnh */
.section-12-wish .gift-button {
	width: 150px;
	height: 100px;
	background-color: var(--button-gray);
	border: 2px solid #ccc;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.section-12-wish .gift-button:hover {
	background-color: rgba(110, 110, 110, 0.9);
	transform: scale(1.05);
}

.section-12-wish .gift-icon {
	font-size: 3rem;
	color: #fff;
}

#commonPopupContent img {
    max-width: 250px;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,255,255,0.15);
}

/* Hiệu ứng trái tim */
.section-12-wish .heart {
	position: absolute;
	color: var(--accent-pink);
	font-size: 1.5rem;
	animation: pulseSection12Wish 2s infinite alternate;
	text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

@keyframes pulseSection12Wish {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}

	100% {
		transform: scale(1.2);
		opacity: 1;
	}
}

/* Đặt vị trí cho các trái tim (tương đối) */
.section-12-wish .heart-1 {
	top: 10%;
	left: 20%;
	font-size: 1.8rem;
}

.section-12-wish .heart-2 {
	top: 35%;
	left: 35%;
}

.section-12-wish .heart-3 {
	top: 25%;
	right: 15%;
}

.section-12-wish .heart-4 {
	bottom: 30%;
	left: 5%;
	font-size: 1.3rem;
}

.section-13-thanksyou {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	/* Căn giữa theo chiều dọc */
	justify-content: center;
	/* Căn giữa theo chiều ngang */
	overflow-x: hidden;
	position: relative;
}

.section-13-thanksyou .container-custom {
	padding: 20px;
	text-align: center;
}

/* Vùng nội dung chính */
.section-13-thanksyou .card-wedding {
	padding: 30px 15px;
	position: relative;
	z-index: 10;
}

/* Style cho chữ tên cô dâu chú rể */
.section-13-thanksyou .names {
	font-family: 'Dancing Script', cursive;
	font-size: 1.5rem;
	/* Đã giảm kích thước chữ */
	color: #333333;
	margin-top: 10px;
	margin-bottom: 20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Container cho ảnh cưới và hiệu ứng khói */
.section-13-thanksyou .photo-container {
	position: relative;
	display: inline-block;
	margin: 20px 0;
}

/* Ảnh khói màu hồng làm viền (sử dụng placeholder) */
.section-13-thanksyou .smoke-border {
	width: 300px;
	/* Kích thước ảnh khói */
	height: 300px;
	max-width: 90vw;
	/* Đảm bảo responsive */
	max-height: 90vw;
	/* PLACEHOLDER CHO ẢNH KHÓI HỒNG */
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	/* Làm cho viền khói tròn */
	position: relative;
	overflow: hidden;
	/* Che đi phần ảnh bị tràn ra ngoài viền */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ảnh cô dâu chú rể */
.section-13-thanksyou .couple-photo {
	width: 50%;
	/* Ảnh nhỏ hơn viền khói một chút */
	height: 50%;
	object-fit: cover;
	border-radius: 50%;
	/* Viền đỏ mỏng xung quanh ảnh cô dâu chú rể */
	border: 3px solid #e75a7c;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Chữ Wedding Logo */
.section-13-thanksyou .wedding-logo {
	width: 150px;
	height: auto;
	margin-bottom: 10px;
}

/* Chữ Thank You */
.section-13-thanksyou .thank-you-image {
	width: 200px;
	height: auto;
	margin-top: 20px;
}


/* Responsive breakpoints (max-width) */
@media (min-width: 992px) {
	.section-2-save-the-date .main-card {
		flex-direction: row;
	}

	.section-2-save-the-date .image-card {
		width: 458px;
		height: 700px;
	}

	.section-2-save-the-date .event-card h2 {
		font-size: 1.75rem;
	}

	.section-2-save-the-date .event-card h2 {
		font-size: 1.75rem;
	}

	.section-2-save-the-date .event-card {
		width: 501px;
		height: 700px;
		padding: 1.5rem !important;
		/* GIẢM padding từ p-4/p-5 xuống 1.5rem */
	}

	.section-2-save-the-date .responsive-title {
		font-size: 5rem;
	}

	.section-2-save-the-date .responsive-subtitle {
		font-size: 1rem;
	}
}

/* Màn hình nhỏ hơn 992px (màn hình lớn, laptop) */
@media (max-width: 992px) {
	.section-1-banner .banner-title {
		font-size: 3.5rem;
	}

	.section-2-save-the-date .main-card {
		display: grid;
		grid-template-columns: 45% 55%;
		width: 95vw;
		height: auto;
	}

	.section-2-save-the-date .image-card {
		width: 100%;
		height: auto;
		padding-bottom: 150%;
	}

	.section-2-save-the-date .responsive-title {
		font-size: 4rem;
	}

	.section-2-save-the-date .responsive-subtitle {
		font-size: 0.9rem;
	}

	.section-2-save-the-date .event-card {
		padding: 1.5rem !important;
		/* GIẢM padding thêm */
		text-align: center !important;
	}

	/* Điều chỉnh Font Size cho Event Card (Compact) */
	.section-2-save-the-date .event-card h2.text-description {
		font-size: 1.2rem;
	}

	.section-2-save-the-date .event-card h2.title-great-vibes {
		font-size: 1.2rem;
	}

	.section-2-save-the-date .event-card h4.names-great-vibes {
		font-size: 1.5rem;
		margin: 0.4rem 0.2rem;
	}

	.section-2-save-the-date .event-card h3.subtitle-dark {
		font-size: 0.85rem;
	}

	.section-2-save-the-date .event-card h5.detail-heading {
		font-size: 0.85rem;
	}

	.section-2-save-the-date .event-card p.detail-info {
		font-size: 0.7rem;
	}

	.section-2-save-the-date .event-card p.text-description {
		font-size: 0.6rem;
		margin-bottom: 0;
		margin-top: 0
	}

	.section-2-save-the-date .event-card .d-flex.gap-3.mt-4 {
		gap: 0.5rem !important;
		margin-top: 1rem !important;
	}

	/* Điều chỉnh Save The Date trên ảnh */
	.section-2-save-the-date .image-card .position-absolute.bottom-0.start-0.text-white.p-4 {
		padding: 1rem !important;
	}

	.section-2-save-the-date .image-card .font-great-vibes.fs-1 {
		font-size: 2rem !important;
	}

	.section-2-save-the-date .image-card .fw-semibold.fs-5 {
		font-size: 1rem !important;
	}

	.section-2-save-the-date .btn-savethedate {
		font-size: 0.7rem;
		padding: 5px 0;
	}

	.section-6-lovestory .banner-content {
		padding: 50px 15px 70px;
		/* Giảm padding */
	}

	.section-6-lovestory .banner-content h1.love-story-title {
		font-size: 3.5rem;
		/* Size nhỏ hơn */
		margin-bottom: 1.5rem;
	}

	.section-6-lovestory .timeline-item h2 {
		font-size: 1.5rem;
	}

	.section-6-lovestory .timeline-item h3 {
		font-size: 0.75rem;
	}

	.section-6-lovestory .timeline-item {
		/* Xóa margin dưới cho item cuối cùng trên mobile/tablet */
		margin-bottom: 30px;
	}

	.section-7-video .video-wrapper {
		padding-bottom: 56.25%;
		/* 16:9 Aspect Ratio */
	}

	.section-10-wedding-invite .image-container {
		display: none;
	}
}

/* Màn hình nhỏ hơn 768px (Tablet) */
@media (max-width: 768px) {
	.section-1-banner .banner-title {
		font-size: 2.5rem;
	}

	.section-2-save-the-date .main-card {
		display: flex;
		flex-direction: column;
		width: 95vw;
	}

	.section-2-save-the-date .image-card,
	.section-2-save-the-date .event-card {
		width: 100%;
	}

	.section-2-save-the-date .event-card {
		padding: 1rem !important;
		/* GIẢM padding */
		text-align: center;
	}

	.section-2-save-the-date .image-card {
		width: 100%;
		padding-bottom: 150%;
		/* tạo chiều cao giả giống tablet */
		position: relative;
		/* giữ ảnh tuyệt đối trong */
	}

	.section-2-save-the-date .responsive-title {
		font-size: 8vw;
	}

	.section-2-save-the-date .responsive-subtitle {
		font-size: 3vw;
	}

	/* Điều chỉnh Font Size cho Event Card (Mobile) */
	.section-2-save-the-date .event-card h2.title-great-vibes {
		font-size: 1.7rem;
	}

	.section-2-save-the-date .event-card h4.names-great-vibes {
		font-size: 2rem;
		margin: 0.4rem 0.2rem;
	}

	.section-2-save-the-date .event-card h3.subtitle-dark {
		font-size: 0.95rem;
	}

	.section-2-save-the-date .event-card h5.detail-heading {
		font-size: 0.95rem;
	}

	.section-2-save-the-date .event-card p.detail-info {
		font-size: 0.8rem;
	}

	.section-2-save-the-date .event-card p.text-description {
		font-size: 0.8rem;
		margin-bottom: 0;
		margin-top: 0
	}

	.section-2-save-the-date .tab-button {
		font-size: 1rem;
	}

	.section-3-wedding-timeline .section-wedding-timeline {
		/* bỏ background desktop */
		height: auto;
		position: relative;
		/* Điều chỉnh để nội dung mới nằm trên mobile-layout */
		flex-direction: column;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	/* Ẩn .wedding-timeline-content trên mobile để ưu tiên mobile-layout */


	.section-3-wedding-timeline .mobile-layout {
		position: absolute;
		width: 95vw;
		height: 95%;
		display: block;
		top: 1%;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border: 2px solid #fff;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
	}

	.section-3-wedding-timeline .mobile-layout .small-img {

		/* căn giữa ngang */

		height: 100%;
		/* fix theo chiều cao khung */
		width: 100%;
		/* fix chiều rộng */
		object-fit: cover;
		/* crop 2 bên */


		z-index: 100;
	}

	.section-3-wedding-timeline .mobile-layout::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 95vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}

	.section-3-wedding-timeline .wedding-timeline-content {
		margin-top: 3.6%;
		padding: 0;
	}

	.section-3-wedding-timeline .timeline-title {
		font-size: clamp(32px, 5vw, 80px);
	}

	.section-3-wedding-timeline .content-wrapper {
		flex-direction: column;
		/* đổi từ hàng ngang -> dọc */
		align-items: center;
		/* căn trái */
		gap: 30px;
		padding-left: 5px;
		padding-right: 5px;
		/* chừa khoảng cho đường line bên trái */
		position: relative;
	}

	.section-3-wedding-timeline .timeline-column,
	.section-3-wedding-timeline .card-column {
		width: 90vw;
		max-width: 500px;
		padding-left: 0;
	}

	.section-3-wedding-timeline .timeline-text {
		margin-left: 23vw;
		/* cách line một đoạn nhỏ */
		text-align: left;
		font-size: 2rem;
	}

	.section-3-wedding-timeline .timeline-item {
		margin-bottom: 15px;
		display: flex;
		flex-direction: row;
	}

	/* Đường line sang trái */
	.section-3-wedding-timeline .timeline-line {
		left: 16.5vw;
		/* cách mép trái 20px */
		transform: none;
	}

	.section-3-wedding-timeline .timeline-icon {
		width: 6vw;
		height: 6vw;
		left: 6vw;
		transform: translateX(-50%);
		/* giữ icon bám line */
	}

	.section-3-wedding-timeline .timeline-icon img {
		width: 7vw;
		height: 6vw;
	}

	.section-3-wedding-timeline .heart {
		left: 16.5vw;
		top: 4vw;
		transform: translateX(-50%) rotate(-45deg);
	}

	.section-3-wedding-timeline .calendar-header h4 {
		font-size: 2rem;

	}

	.section-3-wedding-timeline .calendar-dates .highlight::before {

		left: 13%;

	}

	.section-3-wedding-timeline .calendar-dates .highlight::after {

		left: 33%;

	}

	.section-4-wedding .fullname {
		font-size: 4vw;
		/* chữ co theo màn hình, không bị tràn */
		white-space: nowrap;
		/* giữ nguyên trên 1 dòng */
	}

	.section-4-wedding .text-slogan {
		font-size: 4vw;
		white-space: normal;
		/* slogan vẫn xuống dòng tự nhiên như màn lớn */
		line-height: 1.5;
	}

	.section-4-wedding .script-font {
		font-size: 7vw;
	}

	.section-5-countdown .signature-wrapper {
		/* Đảm bảo căn giữa cho màn hình nhỏ */
		justify-content: center !important;
	}

	/* 2. THU NHỎ KHỐI ẢNH (GIỮ BỐ CỤC HÀNG NGANG VÀ TỶ LỆ) */
	.section-5-countdown .image-container {
		width: 95%;
		/* Chiếm gần hết chiều rộng màn hình */
		/* Đã loại bỏ flex-direction: column; để giữ bố cục hàng ngang */
	}

	.section-5-countdown .img-placeholder {
		/* SỬ DỤNG VW (Viewport Width) để chiều cao thay đổi theo chiều rộng màn hình, 
                   giúp khối ảnh giữ tỷ lệ. ~60vw tương đương tỷ lệ 3:4 cho 47% width. */
		height: 60vw;
		flex-basis: 47%;
		/* Giữ tỷ lệ gần 50% để nằm cạnh nhau */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		/* Giảm độ bóng */
	}

	/* 3. THU NHỎ VÀ ĐIỀU CHỈNH ẢNH GIỮA (ẢNH 3) - CŨNG DÙNG VW */
	.section-5-countdown .img-placeholder.center-overlap {
		/* Kích thước theo VW để giữ tỷ lệ 5:6 */
		width: 40vw;
		height: 48vw;
		z-index: 20;
		/* Dịch chuyển lên bằng nửa chiều cao của nó */
		margin-top: calc(-1 * 24vw);
	}

	/* 4. THU NHỎ CHỮ KÝ VÀ TIÊU ĐỀ */
	.section-5-countdown .signature-text {
		font-size: 2rem;
		/* Thu nhỏ chữ ký chính */
	}

	.section-5-countdown .countdown-title {
		font-size: 1rem;
	}

	.section-6-lovestory .timeline-item h2 {
		font-size: 2rem;
	}

	.section-6-lovestory .timeline-item h3 {
		font-size: 1rem;
	}

	.section-7-video .video-title {
		font-size: 3rem;
	}

	.section-7-video .video-caption {
		font-size: 1rem;
	}

	.section-11-loichuc .title-dancing {
		font-size: 3rem;
	}

}

/* Màn hình nhỏ hơn 600px (Mobile ngang/Tablet nhỏ) */
@media (max-width: 600px) {
	.section-1-banner .banner-title {
		font-size: 2rem;
	}

	.section-1-banner .hero-banner {
		height: auto;
		/* sẽ set bằng JS */
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: top center;
	}

	.section-8-album .main-container {
		padding: 3rem;
	}

	.section-9-loingo .main-container {
		padding: 3rem;
	}
}

/* Màn hình nhỏ hơn 426px (Mobile lớn) */
@media (max-width: 426px) {
	.section-1-banner .banner-title {
		font-size: 1.8rem;
	}

	.section-2-save-the-date .main-card {
		width: 95xw;
	}

	.section-2-save-the-date .image-card {
		width: 100%;
		padding-bottom: 150%;
		/* tạo chiều cao giả giống tablet */
		position: relative;
		/* giữ ảnh tuyệt đối trong */
	}

	.section-2-save-the-date .tab-button {
		font-size: 0.75rem;
	}

	.section-2-save-the-date .event-card h2.title-great-vibes {
		font-size: 1.5rem;
	}

	.section-2-save-the-date .event-card h4.names-great-vibes {
		font-size: 1.8rem;
	}

	.section-2-save-the-date .event-card h3.subtitle-dark {
		font-size: 0.75rem;
	}

	.section-2-save-the-date .event-card h5.detail-heading {
		font-size: 0.75rem;
	}

	.section-2-save-the-date .event-card p.detail-info {
		font-size: 0.6rem;
	}

	.section-2-save-the-date .event-card p.text-description {
		font-size: 0.6rem;
	}
}

/* Màn hình nhỏ hơn 375px (Mobile nhỏ) */
@media (max-width: 375px) {
	.section-1-banner .banner-title {
		font-size: 1.5rem;
	}

	.section-2-save-the-date .event-card h2.text-description {
		font-size: 1.2rem;
	}
}

.section-1-banner .banner-subtitle {
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
}

/* --------------------------- ANIMATION --------------------------- */
@keyframes fadeInUpSection1Banner {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-1-banner .animate-fade-in-up {
	opacity: 0;
	animation-name: fadeInUpSection1Banner;
	animation-duration: 3s;
	animation-delay: 0.5s;
	/* Bắt đầu sau một chút */
	animation-fill-mode: forwards;
}

/* ================================================= */

/* Placeholder image styles (replace with actual image URLs if needed) 
.section-5-countdown #img1 {
	background-image: url('images/1.jpg');
}

.section-5-countdown #img2 {
	background-image: url('images/2.jpg');
}

.section-5-countdown #img3 {
	background-image: url('images/3.jpg');
}
*/
/* Container để chứa và căn giữa hai ảnh */
/* Container chứa hai ảnh (Lớp phủ cố định - OVERLAY) */
.door-image-container {
	display: flex;
	position: fixed;
	/* Giữ nó ở trên cùng, che phủ toàn bộ trang */
	top: 0;
	left: 0;
	width: 100%;
	justify-content: center;
	align-items: center;
	height: 100vh;
	z-index: 1000;
	/* Đảm bảo nó nằm trên mọi nội dung khác */

	/* Thêm transition cho opacity để việc ẩn đi mượt mà hơn */
	transition: opacity 0.5s ease-out;
}

/* Định dạng cho từng ảnh */
.door-image {
	height: 100vh;
	width: auto;
	object-fit: cover;
}

/* --- HIỆU ỨNG MỞ CỬA --- */

/* Áp dụng animation cho ảnh bên trái */
#left-door {
	animation: slideLeft 2s ease-in-out 1s forwards;
}

/* Áp dụng animation cho ảnh bên phải */
#right-door {
	animation: slideRight 2s ease-in-out 1s forwards;
}

/* Định nghĩa chuyển động trượt trái */
@keyframes slideLeft {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100vw);
	}
}

/* Định nghĩa chuyển động trượt phải */
@keyframes slideRight {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100vw);
	}
}

@keyframes revealBackground {
	from {
		background-color: #1a1a1a;
	}

	to {
		background-color: #f7f7f7;
	}

	/* Chuyển sang màu sáng */
}

@-webkit-keyframes snowflakes-fall {
    0% {top:-10%}
    100% {top:100%}
  }
  @-webkit-keyframes snowflakes-shake {
    0%,100% {-webkit-transform:translateX(0);transform:translateX(0)}
    50% {-webkit-transform:translateX(80px);transform:translateX(80px)}
  }
  @keyframes snowflakes-fall {
    0% {top:-10%}
    100% {top:100%}
  }
  @keyframes snowflakes-shake {
    0%,100%{ transform:translateX(0)}
    50% {transform:translateX(80px)}
  }
  .snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running;
  }
  .snowflake:nth-of-type(0){
    left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s
  }
  .snowflake:nth-of-type(1){
    left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s
  }
  .snowflake:nth-of-type(2){
    left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s
  }
  .snowflake:nth-of-type(3){
    left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s
  }
  .snowflake:nth-of-type(4){
    left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s
  }
  .snowflake:nth-of-type(5){
    left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s
  }
  .snowflake:nth-of-type(6){
    left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s
  }
  .snowflake:nth-of-type(7){
    left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s
  }
  .snowflake:nth-of-type(8){
    left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s
  }
  .snowflake:nth-of-type(9){
    left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s
  }
  .snowflake:nth-of-type(10){
    left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s
  }
  .snowflake:nth-of-type(11){
    left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s
  }
  
/* CSS music */
  .music-toggle-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid #e8cfa5; /* vàng pastel sang trọng */
    backdrop-filter: blur(4px);
    color: #a77b4e; /* màu vàng nâu ấm */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s ease;
}

.music-toggle-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #d4b17a;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(212, 177, 122, 0.6);
}

#musicIcon {
    font-size: 22px;
    color: #a77b4e; /* đồng bộ màu biểu tượng */
    transition: color .3s ease;
}

.music-toggle-btn:hover #musicIcon {
    color: #8b5e2e;
}