/* 1. Khóa chết khung gốc của trình duyệt */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Khóa hoàn toàn hành vi cuộn ở cấp độ trang web */
    overscroll-behavior-y: none; /* Chặn hiệu ứng kéo dãn pull-to-refresh */
    background-color: #e5e7eb;
    position: fixed; /* Mẹo "đặc trị" cho iOS để chống kéo toàn màn hình */
}

/* 2. Đảm bảo thẻ gốc của Blazor lấp đầy toàn bộ màn hình */
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 3. Tối ưu hóa vùng cuộn bên trong (Main Content) */
.main-content {
    /* Đã có flex: 1 và overflow-y: auto từ code trước, giờ thêm 2 dòng này: */
    -webkit-overflow-scrolling: touch; /* Bật gia tốc phần cứng giúp cuộn mượt mà như app thật trên iOS */
    overscroll-behavior-y: contain; /* Ngăn lực cuộn (scroll chaining) truyền ngược ra ngoài body */
}

/* Hiệu ứng trượt vào */
.page-fade-slide-in {
    animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(30px); /* Trượt từ phải sang 30px */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Ẩn thanh cuộn ngang để không bị giật/chớp layout khi trang trượt vào */
body {
    overflow-x: hidden;
}

/* --- TRƯỢT TỪ PHẢI QUA TRÁI (Khuyên dùng) --- */
.slide-from-right {
    /* Đặt nền trắng để khi trượt không bị lộ chữ đè lên nhau */
    background-color: #ffffff;
    width: 100%;
    animation: slideRightToLeft 0.25s ease-out forwards;
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* --- TRƯỢT TỪ TRÁI QUA PHẢI --- */
.slide-from-left {
    background-color: #ffffff;
    width: 100%;
    animation: slideLeftToRight 0.25s ease-out forwards;
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}