/* ===== Nâng cấp ảnh nổi bật – ưu tiên mobile ===== */
html, body { overflow-x: hidden; }
body { background: #2a1830; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }

/* --- Trang 1: avatar có viền hồng phát sáng --- */
.page1-lovexhj1 img[alt="Sĩ Đường"],
.page1-lovexhj1 img[alt="Bích Quyên"] {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px #ff8fb1, 0 8px 24px rgba(255, 80, 140, .45);
    animation: avatarGlow 2.4s ease-in-out infinite;
}
@keyframes avatarGlow {
    50% { box-shadow: 0 0 0 5px #ffb3cb, 0 10px 32px rgba(255, 80, 140, .7); }
}

/* --- Trang 2: ảnh dòng thời gian kiểu polaroid lớn --- */
.swiper-container-lovexhj2 .swiper-wrapper .swiper-slide {
    width: 340px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    align-items: flex-start;
}
.page2-box {
    width: 100%;
    padding: 14px 14px 18px;
    box-sizing: border-box;
}
.page2-box img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 0 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.page2-box p { font-size: 15px; line-height: 1.5; color: #444; padding: 0 4px; }
.page2-box p b { font-size: 19px; color: #e0457b; }
.page2-box p:nth-of-type(2) { color: #999; font-size: 13px; }
.swiper-container-lovexhj2 { height: auto; padding: 100px 0 60px; }

/* --- Trang 4: album ảnh to, bo góc, viền trắng --- */
.swiper-container-lovexhj3 .swiper-wrapper .swiper-slide {
    height: 480px;
}
.swiper-container-lovexhj3 .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 6px solid #fff;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.page4-text { line-height: 1.6; }

/* ===== Mobile (điện thoại) ===== */
@media screen and (max-width: 730px) {
    .page, .title { height: auto; min-height: 100vh; }
    .title { display: flex; align-items: center; }
    .title p { margin-top: 0; font-size: 26px; padding: 18px 12px; }

    .swiper-container { padding-top: 70px; }

    /* Trang 1 */
    .swiper-container-lovexhj1 { width: calc(100% - 32px); height: 460px; padding: 60px 0 40px; }
    .page1-lovexhj1 { padding: 0 14px; }
    .page1-lovexhj1 p { font-size: 15px; line-height: 1.6; }
    .page1-lovexhj1 img[alt="Sĩ Đường"],
    .page1-lovexhj1 img[alt="Bích Quyên"] { width: 80px; height: 80px; }
    .page1 .cat { width: 120px; }

    /* Trang 2: thẻ ảnh chiếm ~82% màn hình */
    .swiper-container-lovexhj2 { padding: 60px 0 50px; }
    .swiper-container-lovexhj2 .swiper-wrapper .swiper-slide { width: 82vw; max-width: 360px; }
    .page2-box { width: 100%; padding: 12px 12px 16px; }
    .page2-box p { font-size: 14px; }
    .page2-box p b { font-size: 18px; }

    /* Trang 3 */
    .page3 { padding: 60px 16px; box-sizing: border-box; }
    #talkToXHJ { width: auto; padding: 24px 20px; font-size: 15px; line-height: 1.7; box-sizing: border-box; }
    #talkToXHJ b { font-size: 20px; }

    /* Trang 4 */
    .page4 { height: auto; padding-bottom: 40px; }
    .page4-box { width: calc(100% - 32px); height: auto; overflow: hidden; }
    .page4-img { float: none; width: 100%; }
    .swiper-container-lovexhj3 { margin-top: 40px; height: auto; padding-top: 0; }
    .swiper-container-lovexhj3 .swiper-wrapper .swiper-slide { height: 125vw; max-height: 560px; }
    .page4-text { float: none; width: auto; margin: 24px 0 0; padding: 20px; }
    .footer { height: 160px; }

    .xhjIsPig .pig1, .pig2 { width: 90px; }
}

/* Ảnh chụp màn hình tin nhắn: hiện đủ, không cắt */
.page2-box img.chat { aspect-ratio: auto; object-fit: contain; background: #f4f4f6; }

/* Album trang 4: khung và ảnh cùng kích thước, không tràn */
.page4-img { overflow: visible; }
.swiper-container-lovexhj3 { height: 480px !important; padding: 0 !important; margin-top: 60px; overflow: visible; }
.swiper-container-lovexhj3 .swiper-wrapper .swiper-slide {
    height: 100% !important;
    background: transparent !important;
}
.swiper-container-lovexhj3 .swiper-slide-shadow-left,
.swiper-container-lovexhj3 .swiper-slide-shadow-right { display: none; }
@media screen and (max-width: 730px) {
    .swiper-container-lovexhj3 { height: min(125vw, 560px) !important; margin-top: 40px; }
}

/* Dòng thời gian: thẻ tự cao theo ảnh + chữ, không bị che */
.page2 { height: auto !important; min-height: 100vh; }
.swiper-container-lovexhj2 { height: auto !important; }
.swiper-container-lovexhj2 .swiper-wrapper { height: auto !important; align-items: flex-start; }
.swiper-container-lovexhj2 .swiper-wrapper .swiper-slide { height: auto !important; }
.page2-box { height: auto !important; }
.swiper-container-lovexhj2 .swiper-pagination { bottom: 15px; }

/* ===== Font tiếng Việt + sửa thẻ dòng thời gian (bản cuối) ===== */
*, body { font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", sans-serif; }
.title p, .page2-box p b, .page4-text h1 { font-family: "Dancing Script", cursive; }
.title p { font-size: 44px; }
.page2-box p b { font-size: 26px; font-weight: 700; }

.swiper-container-lovexhj2 .swiper-wrapper .swiper-slide {
    display: block !important;
    height: auto !important;
    overflow: hidden;
}
.page2-box { padding: 12px 12px 20px !important; }
.page2-box p { margin: 0 0 6px; }
.page2-box p:nth-of-type(2) { font-size: 13px; color: #a0a0a0; font-style: italic; }
.page2-box p:nth-of-type(3) { font-size: 15px; color: #555; line-height: 1.55; }
@media screen and (max-width: 730px) {
    .title p { font-size: 34px; }
    .page2-box p b { font-size: 24px; }
}

/* ===== Trang 2: dòng thời gian dạng thẻ xếp dọc ===== */
.timeline {
    height: auto !important;
    padding: 70px 16px 60px;
    background: linear-gradient(180deg, rgba(255,182,210,.25), rgba(140,110,220,.25));
}
.tl-heading {
    font-family: "Dancing Script", cursive;
    text-align: center;
    color: #fff;
    font-size: 40px;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    margin-bottom: 28px;
}
.tl-card {
    max-width: 420px;
    margin: 0 auto 28px;
    background: #fff;
    border-radius: 20px;
    padding: 12px 12px 22px;
    box-shadow: 0 16px 36px rgba(0,0,0,.3);
    text-align: center;
}
.tl-card:nth-child(odd)  { transform: rotate(-1.2deg); }
.tl-card:nth-child(even) { transform: rotate(1.2deg); }
.tl-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
}
.tl-card img.chat { aspect-ratio: auto; object-fit: contain; background: #f4f4f6; }
.tl-card h3 {
    font-family: "Dancing Script", cursive;
    font-size: 28px;
    color: #e0457b;
    margin: 14px 0 6px;
}
.tl-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    padding: 0 10px;
}