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

body {
    font-family: Arial, Helvetica, sans-serif;
    /* Đổi nền thành gradient tỏa sáng từ giữa ra viền */
    background: radial-gradient(circle at center, #ffffff 0%, #f4eae1 100%); 
    color: #333;
    overflow-x: hidden;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    min-height: 100vh;
}

/* --- Hero Section --- */
.hero {
    text-align: center;
    margin-bottom: 20px;
}
.hero-image-container {
    max-width: 520px;
    margin: 0 auto 15px auto;
}
.hero-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.hero-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 5px;
}
.hero-subtitle {
    font-size: 1rem;
    color: #777;
    font-style: italic;
}

/* --- Envelope Mechanics --- */
.envelope-wrapper {
    position: relative;
    width: 240px; 
    height: 150px;
    /* TĂNG margin-top từ 30px lên 100px để chừa không gian cho nắp lật lên */
    margin-top: 100px; 
    margin-bottom: 40px;
    transition: opacity 0.5s ease;
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
}

.envelope-back {
    position: absolute;
    inset: 0;
    background-color: #d1bfae;
    border-radius: 5px;
    z-index: 1;
}

.envelope-front {
    position: absolute;
    inset: 0;
    background-color: #e1cebc;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 50%, 0 0);
    z-index: 3;
    border-radius: 5px;
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ecdac8;
    clip-path: polygon(0 0, 100% 0, 50% 50%);
    transform-origin: top;
    z-index: 4;
    transition: transform 0.6s ease-in-out;
}

.seal {
    position: absolute;
    top: 55px; /* Điều chỉnh lại vị trí con dấu cho vừa phong bì mới */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #9c4c4c;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.seal:hover {
    background-color: #7a3a3a;
    transform: translateX(-50%) scale(1.05);
}

.envelope.open .envelope-flap {
    transform: rotateX(180deg);
}

.envelope.open .seal {
    opacity: 0;
    pointer-events: none;
}

.handwritten-letter {
    width: 100%;
    /* GIẢM max-width xuống 520px để bằng đúng với chiều rộng của ảnh */
    max-width: 520px; 
    margin: 0 auto;
    padding: 0 10px 50px 10px; /* Thu nhỏ padding lại một chút cho cân đối */
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #2c3e50;
}

.handwritten-letter p {
    margin-bottom: 15px;
    text-align: justify;
}

/* Cursor nhấp nháy tạo cảm giác đang viết */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: #2c3e50;
    vertical-align: middle;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* Thiết kế hình dạng bằng hình ảnh PNG */
.crane {
    position: absolute;
    /* --- THAY ĐỔI Ở ĐÂY: Dùng url trỏ tới file PNG --- */
    background-image: url('crane.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- ANIMATIONS BAY QUA LẠI (Giữ nguyên) --- */
@keyframes flyRight {
    0% { transform: translateX(-10vw) translateY(0) rotate(15deg); }
    33% { transform: translateX(30vw) translateY(-20px) rotate(5deg); }
    66% { transform: translateX(70vw) translateY(15px) rotate(10deg); }
    100% { transform: translateX(110vw) translateY(-10px) rotate(15deg); }
}

@keyframes flyLeft {
    0% { transform: translateX(110vw) translateY(0) rotate(-15deg) scaleX(-1); }
    50% { transform: translateX(50vw) translateY(-30px) rotate(-5deg) scaleX(-1); }
    100% { transform: translateX(-10vw) translateY(20px) rotate(-15deg) scaleX(-1); }
}

/* --- PHÂN BỔ 10 CON HẠC VỚI KÍCH THƯỚC VÀ ĐỘ TRỄ KHÁC NHAU --- */

/* Lớp 1: Bay nhanh, ở gần (To và nét) */
.crane-1 { width: 55px; height: 55px; top: 15%; left: -10vw; animation: flyRight 12s ease-in-out infinite; opacity: 0.9; }
.crane-2 { width: 45px; height: 45px; bottom: 20%; right: -10vw; animation: flyLeft 14s ease-in-out infinite 3s; opacity: 0.8; }
.crane-3 { width: 60px; height: 60px; top: 50%; left: -10vw; animation: flyRight 11s ease-in-out infinite 7s; opacity: 1; }

/* Lớp 2: Bay tốc độ vừa, ở tầm trung */
.crane-4 { width: 35px; height: 35px; top: 30%; right: -10vw; animation: flyLeft 18s ease-in-out infinite 1s; opacity: 0.6; filter: blur(0.5px); }
.crane-5 { width: 30px; height: 30px; bottom: 35%; left: -10vw; animation: flyRight 16s ease-in-out infinite 4s; opacity: 0.7; }
.crane-6 { width: 40px; height: 40px; top: 10%; right: -10vw; animation: flyLeft 19s ease-in-out infinite 8s; opacity: 0.5; filter: blur(1px); }
.crane-7 { width: 38px; height: 38px; bottom: 15%; left: -10vw; animation: flyRight 17s ease-in-out infinite 11s; opacity: 0.6; }

/* Lớp 3: Bay rất chậm, tuốt phía xa (Nhỏ và mờ) */
.crane-8 { width: 20px; height: 20px; top: 40%; right: -10vw; animation: flyLeft 25s ease-in-out infinite 0s; opacity: 0.3; filter: blur(2px); }
.crane-9 { width: 25px; height: 25px; bottom: 45%; left: -10vw; animation: flyRight 22s ease-in-out infinite 6s; opacity: 0.4; filter: blur(1.5px); }
.crane-10 { width: 18px; height: 18px; top: 25%; right: -10vw; animation: flyLeft 28s ease-in-out infinite 13s; opacity: 0.2; filter: blur(2px); }