:root {
    --primary-red: #d1122a;
    --dark-red: #a40d21;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - fix thanh trình duyệt trên mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, var(--primary-red) 0%, #750715 100%);
    /* Nền đỏ gradient bên ngoài chuẩn màu đậm dần ra ngoài KV */
    font-family: sans-serif;
    overflow: hidden;
    position: fixed; /* Chống scroll trên mobile browser */
    top: 0;
    left: 0;
    /* Ngăn chặn cuộn trang */
}

.kv-frame {
    position: relative;
    width: 95vw;
    height: calc(95vw * 9 / 16);
    max-width: calc(95vh * 16 / 9);
    max-height: 95vh;
    background-color: var(--primary-red);
    border-radius: 25px;
    /* Giữ bo góc để thấy rõ khung */
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

.sunburst-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    /* Giảm bớt độ gắt của màu tâm (#fd3c4b -> #e62032) để khi hòa trộn overlay không bị cháy sáng */
    background-image: url('../assets/img/sunnn.webp'), radial-gradient(circle at 50% 40%, #e62032 0%, var(--primary-red) 50%, #900c19 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: overlay;
    /* Hoà trộn màu của hình với sắc đỏ gradient nền chữ */
    z-index: 1;
}

.kv-item {
    position: absolute;
    z-index: 5;
}

/* Các vật phẩm tĩnh nền tảng */
.logo-left {
    top: 6%;
    left: 4%;
    width: 12%;
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    animation: popIn 0.8s forwards;
}

.logo-right {
    top: 5%;
    right: 4%;
    width: 15%;
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.tagline {
    top: 10%;
    left: 50%;
    width: 36%;
    z-index: 6;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
    /* Pop vào màn hình sau đó chuyển qua trạng thái lơ lửng mãi mãi */
    animation: popInTagline 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, floatTagline 3.5s ease-in-out 0.8s infinite;
}

/* Phần rương được thu nhỏ lại để không chặn mất chữ và logo */
.chest {
    bottom: 5%;
    left: 50%;
    width: 50%;
    z-index: 10;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
    /* Trồi lên sau đó chuyển qua bồng bềnh mãi mãi */
    animation: popInChest 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, floatChest 4s ease-in-out 0.8s infinite;
}

.footer-container {
    position: absolute;
    bottom: -1%;
    /* Tràn xuống dưới 1 tí để không lộ viền đỏ do scale rải rác */
    left: 0;
    width: 100%;
    z-index: 2;
}

.footer-bg {
    width: 100%;
    display: block;
}

/* Keyframes */
@keyframes shake {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

/* Căn lại translate của rương không dùng animation đè lên transform origin ngang */
@keyframes popInChest {
    0% {
        transform: translateX(-50%) scale(0.8) translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes popInTagline {
    0% {
        transform: translateX(-50%) scale(0.8) translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scale(1) translateY(0);
        opacity: 1;
    }
}

/* Hiệu ứng bồng bềnh liên tục cho Tagline */
@keyframes floatTagline {

    0%,
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    50% {
        transform: translateX(-50%) translateY(-6px) scale(1.02);
    }
}

/* Hiệu ứng bồng bềnh liên tục cho Rương đồ */
@keyframes floatChest {

    0%,
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.01);
    }
}

/* ==================================================
   MOBILE / PORTRAIT RESPONSIVE
================================================== */
@media (max-aspect-ratio: 1/1) {
    /* Khung dọc 9:16, ưu tiên chiều cao 95% viewport, giữ viền khung giống desktop */
    .kv-frame {
        height: 95vh;
        height: 95dvh;
        width: calc(95vh * 9 / 16);
        width: calc(95dvh * 9 / 16);
        max-width: 95vw;
        max-height: 95vh;
        max-height: 95dvh;
        border-radius: 25px; /* Giữ viền khung giống desktop */
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    }

    /* Kéo cụm chữ dịch xuống giữa thân khung */
    .tagline {
        top: 26%;
        width: 85%;
    }

    /* Giữ rương ở vùng không gian bên dưới */
    .chest {
        bottom: 17%;
        width: 97%;
    }

    /* Phóng to logo hai bên và đẩy dịch xuống khỏi mép trên */
    .logo-left {
        top: 8%;
        left: 5%;
        width: 25%;
    }

    .logo-right {
        top: 7%;
        right: 5%;
        width: 30%;
    }

    /* Map footer phải cao lên bù lại */
    .footer-bg {
        width: 100%;
        height: 25vh;
        height: 25dvh;
        object-fit: cover;
        object-position: center bottom;
    }
}