:root {
    --gold: #ffcf5e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Chặn hành vi chạm giữ để bôi đen text trên điện thoại giúp app mượt hơn */
    -webkit-user-select: none;
    user-select: none;
}

/* Cho phép bôi đen ở các ô nhập liệu và link */
input, textarea, #link {
    -webkit-user-select: text;
    user-select: text;
}

body {
    /* Sử dụng svh để tránh lỗi thanh địa chỉ trình duyệt trên điện thoại che mất nội dung */
    height: 100svh; 
    font-family: 'Quicksand', sans-serif;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, 1)),
                url("assets/img/bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Sửa lỗi click trên iOS */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

canvas#snow {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}

/* --- KHUNG CHÍNH (MAIN CARD) --- */
.main {
    width: 95%; /* Chiếm 95% chiều ngang màn hình đt */
    max-width: 900px;
    height: 90svh; /* Cao 90% màn hình */
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 30px; /* Bo góc nhỏ hơn xíu cho đt */
    box-shadow: 0 0 120px rgba(0, 0, 0, .9);
    border: 1px solid rgba(255, 207, 94, .2);
    display: flex;
    flex-direction: column;
    z-index: 5;
    position: relative;
}

header {
    text-align: center;
    padding: 20px 10px; /* Giảm padding */
    flex-shrink: 0; /* Không cho header bị co lại */
}

header h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 2.8rem; /* Giảm size chữ tiêu đề cho đt */
    color: var(--gold);
    text-shadow: 0 0 25px rgba(255, 207, 94, .6);
    line-height: 1.2;
}

/* --- THANH MENU --- */
.tabs {
    display: flex;
    justify-content: center;
    gap: 15px; /* Khoảng cách các nút gần hơn */
    padding: 12px;
    background: rgba(0, 0, 0, .5);
    border-radius: 15px;
    margin: 0 15px;
    flex-shrink: 0;
}

.tab {
    cursor: pointer;
    font-size: .8rem; /* Chữ menu nhỏ lại */
    letter-spacing: 1px;
    opacity: .5;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 5px;
    transition: 0.3s;
    white-space: nowrap; /* Không cho xuống dòng */
}

.tab.active {
    opacity: 1;
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
}

body.has-content .tab-create {
    display: none !important;
}

/* --- KHUNG NỘI DUNG CUỘN --- */
.content {
    flex: 1; /* Chiếm toàn bộ phần còn lại */
    padding: 20px; /* Padding trong nhỏ hơn */
    overflow-y: auto;
    /* Thanh cuộn mượt */
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
}

/* Ẩn thanh cuộn nhưng vẫn cuộn được (cho đẹp trên mobile) */
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background-color: var(--gold); border-radius: 10px; }

.section { display: none; padding-bottom: 60px; /* Để chừa chỗ cho nội dung không bị sát đáy */ }
.section.active { display: block; animation: fade .8s; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- TÂM THƯ --- */
.typing {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; /* Chữ thư nhỏ lại dễ đọc trên đt */
    line-height: 1.8;
    text-align: justify; /* Căn đều 2 bên cho đẹp */
    position: relative;
    white-space: pre-wrap;
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}

.santa {
    position: absolute;
    inset: 0; margin: auto;
    width: 80%; /* Santa chiếm 80% chiều ngang */
    opacity: .1;
    z-index: -1;
    pointer-events: none;
}

/* --- ĐIỀU ƯỚC (GRID) --- */
.wish-grid {
    display: grid;
    /* Tự động chỉnh cột: Trên đt là 1 cột, trên máy tính là 2 cột */
    grid-template-columns: 1fr; 
    gap: 20px;
}

.wish {
    position: relative;
    height: 200px; /* Chiều cao thẻ ngắn lại chút cho vừa đt */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transition: .3s;
    border: 1px solid rgba(255,255,255,0.1);
}

.wish:active { transform: scale(0.98); } /* Hiệu ứng khi chạm vào */

.wish-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: brightness(.6); transition: 0.5s;
}

.wish-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent); }
.wish-text { position: absolute; bottom: 20px; left: 20px; right: 20px; }
.wish-text h3 { font-family: 'Playfair Display'; color: var(--gold); font-size: 1.3rem; margin-bottom: 5px; }
.wish-text p { font-size: 0.9rem; line-height: 1.4; color: #ddd; }

/* --- TẠO QUÀ --- */
.creator { text-align: center; width: 100%; margin: auto; }
.creator img {
    width: 150px; /* Giảm kích thước ảnh trên mobile cho đỡ chật */
    margin-bottom: 15px;
    animation: pulse 1.6s infinite alternate;
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

input, textarea {
    width: 100%; padding: 12px; border-radius: 12px;
    background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 207, 94, .3);
    color: #fff; margin-bottom: 12px; font-family: 'Quicksand', sans-serif;
    outline: none; font-size: 16px; /* Size 16px để iOS không tự zoom khi nhập */
}

button {
    width: 100%; padding: 15px; background: var(--gold);
    border: none; border-radius: 50px; font-weight: 800;
    font-size: 1rem; cursor: pointer; color: #000;
    box-shadow: 0 5px 20px rgba(255, 207, 94, 0.4);
}
button:active { transform: scale(0.95); }

#link {
    margin-top: 15px; color: var(--gold); font-size: .85rem;
    word-break: break-all; background: rgba(0,0,0,0.8);
    padding: 10px; border-radius: 10px; display: none;
    border: 1px dashed var(--gold);
}

/* --- NÚT NHẠC --- */
.music {
    position: fixed; right: 20px; bottom: 20px;
    width: 50px; height: 50px; background: var(--gold);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 0 20px var(--gold);
    cursor: pointer; z-index: 100; font-size: 1.2rem;
    animation: spin 4s linear infinite; animation-play-state: paused;
    opacity: 0.8; /* Làm mờ nhẹ để không che nội dung */
}
.music.playing { animation-play-state: running; opacity: 1; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* --- RESPONSIVE CHO MÁY TÍNH (MÀN HÌNH LỚN) --- */
@media (min-width: 768px) {
    .main { height: 85vh; padding: 20px; }
    header h1 { font-size: 3.5rem; }
    .tabs { gap: 30px; }
    .tab { font-size: 1rem; }
    .content { padding: 40px; }
    .typing { font-size: 1.2rem; text-align: center; }
    .wish-grid { grid-template-columns: 1fr 1fr; gap: 25px; } /* Lên máy tính thành 2 cột */
    .wish { height: 260px; }
    .creator img { width: 220px; } /* Lên máy tính ảnh to lại */
    input, textarea { padding: 15px; }
}