#pdfModal {
    perspective: 2000px;
}

#pdfModal .pdf-content {
   position: relative;
}

#pdfModal .pdf-pages {
   transform-style: preserve-3d;
   perspective: 2000px;
}

#leftPageWrapper,
#rightPageWrapper {
    transition: transform 0.65s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

#leftPageWrapper {
    transform-origin: right center;
}

#rightPageWrapper {
    transform-origin: left center;
}

/* NAVIGATION BUTTON */
#prevBtn,
#nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.95);
    color: #024e97;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    z-index: 999;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

#prevBtn {
    left: 8px;
}

#nextBtn {
    right: 8px;
}

#prevBtn:hover:not(:disabled),
#nextBtn:hover:not(:disabled) {
   background: #024e97;
   color: white;
   transform: translateY(-50%) scale(1.05);
}

#prevBtn:disabled,
#nextBtn:disabled {
   opacity: 0.3;
   cursor: default;
}

#prevBtn svg,
#nextBtn svg {
    width: 20px;
    height: 20px;
    stroke: #024e97 !important; 
    fill: none !important;
    transition: stroke 0.2s ease;
}

#prevBtn:hover:not(:disabled) svg,
#nextBtn:hover:not(:disabled) svg {
    stroke: #ffffff !important; 
}

#prevBtn:hover:not(:disabled),
#nextBtn:hover:not(:disabled) {
    background: #024e97;
    color: white;
    transform: translateY(-50%) scale(1.05);
}
@media (max-width: 1368px) {
    #pdfModal {
        padding: 0 !important;
        align-items: stretch !important;
    }

    #pdfModal > div {
         width: 100% !important;
         max-width: 100% !important;
         height: 100% !important;
         max-height: 100% !important;
         border-radius: 0 !important;
    }

    /* Header */
    #pdfModal .pdf-header {
        min-height: 52px;
        padding: 7px 10px !important;
        border-radius: 0 !important;
    }

    #pdfModal .pdf-header .font-semibold {
       font-size: 12px !important;
    }

    /* PDF CONTENT */
    #pdfModal .pdf-content {
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* PDF PAGES */
    #pdfModal .pdf-pages {
        width: 100% !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        min-height: 100%;
    }

    /* Divider */
    #pdfModal .pdf-pages > .page-divider {
        display: none !important;
    }

    /* LEFT PAGE (Hiển thị 1 trang duy nhất) */
    #leftPageWrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        transform-origin: center center;
        overflow: hidden !important;
        cursor: default;
    }

    #canvasLeft {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* RIGHT PAGE (Ẩn trang bên phải) */
    #rightPageWrapper {
        display: none !important;
    }

    /* MOBILE & IPAD BACK / NEXT - Đưa xuống bottom nằm giữa */
    #prevBtn,
    #nextBtn {
        position: fixed !important;
        bottom: 20px !important;
        top: auto !important;
        transform: none !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.96) !important; /* Nền trắng */
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 9999px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        opacity: 1 !important;
    }

    #prevBtn {
        left: 5px !important; /* Canh nút lùi sang trái một chút quanh tâm dưới */
    }

    #nextBtn {
        right: 5px !important; /* Canh nút tiến sang phải quanh tâm dưới */
    }

    /* Định nghĩa màu icon SVG mặc định (có thể bấm được) -> Sáng màu #024e97 */
    #prevBtn svg,
    #nextBtn svg,
    #prevBtn svg *,
    #nextBtn svg * {
        width: 16px !important;
        height: 16px !important;
        stroke: #024e97 !important;
        fill: none !important;
    }

    /* Hiệu ứng khi hover (đổi sang nền xanh, icon trắng) */
    #prevBtn:hover:not(:disabled),
    #nextBtn:hover:not(:disabled) {
        background: #024e97 !important;
        transform: scale(1.08) !important;
    }

    #prevBtn:hover:not(:disabled) svg,
    #prevBtn:hover:not(:disabled) svg *,
    #nextBtn:hover:not(:disabled) svg,
    #nextBtn:hover:not(:disabled) svg * {
        stroke: #ffffff !important;
    }

    /* Trạng thái Disable (hết trang) -> Làm mờ đi */
    #prevBtn:disabled,
    #nextBtn:disabled {
        background: rgba(255, 255, 255, 0.5) !important;
        opacity: 0.3 !important;
        cursor: default !important;
    }

    /* PAGE INFO */
    #pageInfo {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }
}