/* ---------------------------
    Font Google + Reset, Base
-----------------------------*/
/* Import font Quicksand từ Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');

/* Reset, Base, Box-sizing */
* { box-sizing: border-box; margin:0; padding:0; }
body {
    background: linear-gradient(to right, #fce4ec, #f3e5f5);
    font-family: 'Quicksand', sans-serif;
    min-height: 100vh; 
    padding: 20px; 
    color: #333;
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: relative; 
    overflow-x: hidden;
}

/* -------------------------------------
    Wrapper chính chứa toàn bộ nội dung
-------------------------------------- */
#wrapper-love {
    background: #fff0f5;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    border-radius: 15px; text-align: center;
    max-width: 1050px; width: 100%; padding: 30px;
}
#wrapper {
    background: #fff0f5;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    border-radius: 15px; text-align: center;
    max-width: 1100px; width: 100%; padding: 30px;
}

/* ------------------------------
	Tiêu đề chính H1 có hiệu ứng
------------------------------- */
h1 {
    color: #ff4d88; font-size: 3rem; margin-bottom: 20px;
    transition: .3s;
}
h1:hover { color:#ff3366; transform:scale(1.1); }

/* ------------------------------------
	Button & Các nút chức năng chung
------------------------------------- */
button, 
#create-page-btn, #view-page-btn, #submit-btn, #home,
.copy-link-btn, #button-group button, #donate-buttons button, #closePopupFromBottomBtn {
    background: #ff3366; color: #fff; border: none;
    border-radius: 25px; cursor: pointer;
    transition: background .3s, color .3s, transform .2s;
    font-family: inherit;
}
button:disabled { background: #ccc; cursor: not-allowed; }
#create-page-btn, #view-page-btn, .copy-link-btn,
#submit-btn, #home, #home-love-btn, #button-group button, #donate-buttons button {
    padding: 10px 20px; font-size: 1rem;
    margin-bottom: 10px; min-width: 160px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#create-page-btn:hover, #view-page-btn:hover, #submit-btn:hover, 
#home:hover, .copy-link-btn:hover, #donate-buttons button:hover, #button-group button:hover,
#closePopupFromBottomBtn:hover { background: #e62e58; }

/* ----------------------------------------------------------
   5. Đồng hồ & Ngày tháng (khung bo tròn, màu hồng dễ thương)
----------------------------------------------------------- */
#clock-box { margin: 20px 0; }
#clock {
    display: inline-block;
    background: #ffe5ec;
    border: 3px solid #ffb6c1;
    border-radius: 38px;
    padding: 26px 48px;
    box-shadow: 0 4px 28px rgba(255,105,180,0.10);
    min-width: 320px;
    margin: 0 auto;
    text-align: center;
    transition: box-shadow .3s, transform .2s;
}
#clock:hover {
    box-shadow: 0 8px 32px rgba(255,105,180,0.17);
    transform: scale(1.02);
}
#clock date, #clock time {
    display: inline;
    background: none;
    border: none;
    padding: 0 12px;
    font-weight: bold;
    font-size: 2rem;
    color: #ff3366;
    box-shadow: none;
    margin: 0;
    transition: none;
}

/* ---------------------------------------------------
    Phần thông tin (avatar + tên người dùng)
---------------------------------------------------- */
#info {
    display: grid; gap: 20px; margin: 30px 0;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    justify-content: center; align-items: center;
}
#info .avt {
    width: 250px; height: 250px; border-radius: 50%;
    border: 3px solid #ffb6c1; object-fit: cover;
    transition: transform .3s;
}
#info .avt:hover { transform: scale(1.1); }
#info p {
    margin-top:10px; font-weight: bold; font-size:1.5rem; color:#ff3366;
    transition: .3s;
}
#info p:hover { transform: scale(1.1); color: #ff4d88; }

/* ---------------------------------------
    Văn bản trái tim nổi bật
---------------------------------------- */
#heart {
    font-size: 32px; color: red; font-weight: bold; margin: 15px 0;
    line-height: 1.6; padding: 0 10px; white-space: normal;
    text-shadow: 0 0 10px #ff4d88, 0 0 20px #ff4d88, 0 0 30px #ff4d88;
    transition: transform .3s;
}
#heart:hover { transform: scale(1.1); }

/* ---------------------------
    Phần nhạc & playlist
---------------------------- */
#music {
    margin: 20px auto; padding: 20px; border-radius: 50px;
    background: #fff0f5; box-shadow: 0 4px 12px rgba(0,0,0,.1);
    text-align: center; max-width: 800px; border: 6px solid #ffccd9;
}
.controls {
    background: #ff85a2; padding: 10px; border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,.15);
    border: 2px solid #ff99bb; margin-bottom: 10px;
}
audio {
    width: 100%; border-radius: 50px; border: 2px solid #ff4d88;
    transition: border-color .3s, box-shadow .3s;
}
audio:hover { border-color: #ff3366; box-shadow: 0 0 8px rgba(255,51,102,.5); }
#playlist-display {
    list-style: none; padding: 0; margin-top: 15px;
}
#playlist-display li {
    padding: 10px; border-radius: 50px; border-bottom: 1px solid #ffc0cb;
    font-size: 1rem; cursor: pointer; transition: .3s;
}
#playlist-display li:hover { background: #ffe6f0; color: #ec407a; }
#playlist-display li.active { background: #ff4d88; color: #fff; font-weight: bold; }

/* ----------------------------
   Responsive - Giao diện mobile/tablet
---------------------------------------- */
@media (max-width: 768px) {
    body { 
        padding: 10px; 
    }
    #wrapper, #wrapper-love { 
        padding: 20px; 
    }
    h1 { 
        font-size: 2.5rem; 
    }
    #clock {
        padding: 14px 5px;
        min-width: 0;
        font-size: 1rem;
    }
    #clock date, #clock time {
        font-size: 1.1rem;
        padding: 0 4px;
    }
    #info { 
        grid-template-columns: 1fr; 
    }
    #info .avt { 
        width: 150px; 
        height: 150px; 
    }
    #info p { 
        font-size: 1.2rem; 
    }
    #heart { 
        font-size: 28px; 
    }
    footer { 
        font-size: 1rem; 
    }
    #create-page-btn { 
        font-size: 15px;
        padding: 8px 16px; 
    }
    #form-wrapper { 
        padding: 20px; 
    }
    .form-group input { 
        padding: 8px; 
    }
    #submit-btn { 
        padding: 10px 20px; 
        font-size: 1rem; 
    }
    .dashboard-title { 
        font-size: 1.8rem; 
    }
    #dashboard-content { 
        padding: 20px; 
    }
    .love-page-item { 
        padding: 10px 15px; 
        font-size: 1.1rem; 
    }
    #button-group button { 
        padding: 10px 20px; 
        font-size: 1rem;
        width: 100%;
        margin-bottom: 15px; 
    }
    #button-group { 
        flex-direction: column; 
        align-items: center; 
        gap: 0; 
    }
    .video-list {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 18px;
        margin: 12px 0;
        max-width: 100vw;
        align-items: center;
    }
    .mess-video-bubble {
        max-width: 100vw; /* Gần sát mép màn hình */
        min-width: unset;
        border-radius: 24px;
        padding: 8px 2vw; /* Padding ngang mềm mại */
        box-shadow: 0 2px 14px rgba(255, 105, 180, 0.14), 0 0 0 2px #ffb6c1;
    }
    .mess-video-bubble video {
        border-radius: 18px;
    }
    .video-title {
        font-size: 1rem;
        padding: 2px 0;
    }
}

@media (max-width: 600px) {
    #donate-section { 
        padding: 20px 8px; 
        border-radius: 10px 10px 0 0; 
        margin-top: 20px;
    }
    #donate-info h2 { 
        font-size: 1.3rem;
    }
    #donate-info p { 
        font-size: 1rem; 
        margin-bottom: 10px;
    }
    #donate-buttons { 
        flex-direction: column; 
        gap: 12px; 
        margin-top: 14px;
    }
    #donate-buttons button { 
        width: 100%; 
        font-size: 1rem; 
        padding: 12px 0; 
        border-radius: 18px;
    }
    #create-page-btn, #view-page-btn {
        width: 100%; 
        font-size: 1.2rem; 
        padding: 12px 0; 
        border-radius: 15px; 
        margin-bottom: 12px;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }
    #create-page-btn:hover, #view-page-btn:hover { 
        background: #ff1a52; 
    }
}

.message-container {
    padding: 18px 5px !important; /* Giảm padding, khung gọn lại */
    font-size: 1em; /* Chữ vừa phải cho mobile */
    margin-top: 14px !important; /* Đẩy sát lên trên */
    min-height: unset; /* Không bắt buộc chiều cao tối thiểu */
    max-width: 99vw; /* Đảm bảo không bị tràn */
    box-sizing: border-box;
    word-break: break-word;
    word-wrap: break-word; /* Đảm bảo văn bản không bị cắt */
}

.typing-effect {
    font-size: 1em !important;
    word-break: break-word;
    max-width: 99vw;
    white-space: normal !important;
    max-height: 2000px !important; /* Đủ dài để không che */
}

/* -----------------------------------
    Hiệu ứng trái tim rơi lãng mạn
------------------------------------- */
@keyframes heart-fall {
  0% { transform: translateY(-100px) scale(0.5); opacity: 1; }
  100% { transform: translateY(100vh) scale(1); opacity: 0; }
}

.heart {
    position: absolute; top: -50px; font-size:24px; color:#ff4d88;
    animation: heart-fall 5s linear infinite; pointer-events:none; z-index:9999;
}
.heart:nth-child(odd){animation-duration:4s;animation-delay:1s;}
.heart:nth-child(even){animation-duration:6s;animation-delay:2s;}

/* Định nghĩa animation */
@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------
    Message-container + typing-effect (hiệu ứng gõ chữ)
----------------------------------------------------- */
.message-container {
    background:#ffe0e6; border-radius:15px; padding:30px 35px; margin:60px auto 30px;
    max-width:700px; text-align:center; font-size:1.1em; line-height:1.6; color:#4a4a4a;
    position:relative; word-break:break-word; white-space:normal; min-height:150px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08), 0 0 0 5px #ff9aa2;
}
.message-container::before {
    content:''; position:absolute; top:-15px; left:-15px; width:45px; height:45px;
    background: url('https://png.pngtree.com/png-vector/20230105/ourmid/pngtree-pink-heart-png-image_6552165.png') no-repeat center/contain;
    z-index:3; pointer-events:none; transform:rotate(-10deg);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.05));
}
.message-container * { max-width:100%; box-sizing:border-box; }
.typing-effect {
    display:block; overflow:hidden; animation: reveal-text 4s steps(200,end) forwards;
    max-width:100%; white-space:normal;
}
@keyframes reveal-text { from{max-height:0;} to{max-height:300px;} }


.message-container {
    margin-top: 0vh !important;
    margin-bottom: 30px;
}
/* --------------------------------------------------
	Trái tim lớn nhịp đập, ngày ở giữa trái tim
--------------------------------------------------- */
.big-heart {
    position: relative;
    display: inline-block;
    font-size: 170px;
    animation: heartbeat 1.1s infinite cubic-bezier(0.6, 0, 0.4, 1);
    line-height: 1;
    width: 1.15em;
    height: 1.15em;
    text-align: center;
}

.big-heart::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url('/image/heart.svg') no-repeat center/contain;
    background-size: contain;
}

.heart-date {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 3px 14px #ff4d88, 0 0 18px #ff4d88;
    pointer-events: none;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    animation: heart-date-beat 1.1s infinite cubic-bezier(0.6, 0, 0.4, 1);
}
/* Hiệu ứng nhịp đập cho trái tim lớn */
@keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.18); }
    20% { transform: scale(1.32); }
    30% { transform: scale(1.22); }
    40% { transform: scale(1); }
    50% { transform: scale(1.15); }
    60% { transform: scale(1.3); }
    70% { transform: scale(1.18); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}
@keyframes heart-date-beat {
    0% { transform: translate(-50%, -50%) scale(1);}
    10% { transform: translate(-50%, -50%) scale(1.08);}
    20% { transform: translate(-50%, -50%) scale(1.13);}
    30% { transform: translate(-50%, -50%) scale(1.07);}
    40% { transform: translate(-50%, -50%) scale(1);}
    50% { transform: translate(-50%, -50%) scale(1.07);}
    60% { transform: translate(-50%, -50%) scale(1.12);}
    70% { transform: translate(-50%, -50%) scale(1.06);}
    80% { transform: translate(-50%, -50%) scale(1);}
    100% { transform: translate(-50%, -50%) scale(1);}
}

/* ---------------------------------------
	Hiệu ứng ánh sáng chạy ngang
---------------------------------------- */
.shine-text {
  font-size: 36px; /* Hoặc tùy ý */
  font-weight: bold;
  background: linear-gradient(
    120deg,
    #ff4d88 0%,
    #ff4d88 40%,
    #fff 48%,
    #ff4d88 56%,
    #ff4d88 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
.shine-text h2{
	font-size: 3rem;
}
/* ---------------------------------------
   20. Menu chính (Main menu)
--------------------------- */
#container {
    display: flex;
    flex-direction: column;
    align-items: center; /* căn giữa ngang */
    justify-content: flex-start; /* bắt đầu từ trên xuống */
    width: 100%;
}

#main-menu {
    background: #ffccd9;
    padding: 15px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(255,77,136,0.3);
    margin-bottom: 20px;
}

#main-menu ul li a.active {
    background-color: #ff007f;
    color: #fff;
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.3);
    transform: scale(1.1);
}

#main-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
}

#main-menu ul li a {
    color: #ff3366;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 25px;
    transition: background-color 0.3s, transform 0.3s;
    
    display: flex; /* chuyển sang flexbox */
    align-items: center; /* căn giữa dọc */
    justify-content: center; /* căn giữa ngang */
    text-align: center; /* căn giữa chữ khi xuống dòng */
    white-space: normal; /* cho phép xuống dòng */
    word-break: break-word; /* nếu từ quá dài thì bẻ từ */
    max-width: 120px; /* giới hạn chiều rộng nút, bạn có thể chỉnh theo ý */
	width: auto; /* cho phép chiều rộng tự động tăng */
    min-width: 150px; /* chiều rộng tối thiểu của nút */
}

#main-menu ul li a:hover {
    background-color: #ff85a2;
    color: #fff;
    transform: scale(1.1);
}

#main-menu {
    opacity: 0;
    transform: translateY(-20px);
    animation: slideDown 0.8s ease forwards;
}

/* ---------------------------------------
   23. 
----------------------------------------*/

.video-list {
    display: flex;
    gap: 20px; /* Khoảng cách giữa các video */
    justify-content: center; /* Căn giữa các video */
    align-items: center; /* Căn giữa theo chiều dọc */
    flex-wrap: nowrap; /* Đảm bảo video không xuống dòng */
    margin: 0 auto;
    max-width: 1000px; /* Giới hạn độ rộng của danh sách video */
    width: 100%;
}

.mess-video-bubble {
    position: relative;
    z-index: 1;
    border-radius: 50px; /* Bo tròn khung video cực kỳ mềm mại */
    background: #fff0f5;
    padding: 10px;
    width: 100%;
    max-width: 475px; /* Giảm độ rộng tối đa của mỗi video để 2 video vừa trong một hàng */
    margin: 15px;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.2), 0 0 0 6px #ff3366; /* Hiệu ứng bóng đổ nhẹ nhàng */
    flex-shrink: 0;
    transition: box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
}


.mess-video-bubble iframe {
    width: 100%;
    border-radius: 50px; /* Bo tròn góc của iframe */
    background: #fff;
    display: block;
    border: none; /* Loại bỏ viền của iframe */
}

.mess-video-bubble:hover {
    box-shadow: 0 8px 32px rgba(255, 105, 180, 0.3), 0 0 0 6px #ff4d88; /* Hiệu ứng hover với bóng đổ mạnh hơn */
    transform: scale(1.05); /* Hiệu ứng phóng to khi hover */
}

.video-title {
    font-size: 1.2rem;
    color: #ff3366;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.1px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.9;
    transition: color 0.2s;
}

.mess-video-bubble:hover .video-title {
    color: #e62e58; /* Thay đổi màu tiêu đề khi hover */
}

/* ---------------------------------------

---------------------------------------- */