/* Thiết lập cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Nút điều khiển */
button {
    border: none;
    background-color: transparent;
    font-size: 2rem;
    cursor: pointer;
    margin: 20px;
    transition: transform 0.5s;
    z-index: 100;
}

button:focus {
    outline: none;
}

/* Kiểu dáng cuốn sách */
.book {
    position: relative;
    width: 600px; /* Chiều rộng một trang */
    height: 100%;
    transition: transform 0.5s;
    perspective: 2500px;
    margin: 0 auto;
}

.paper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: transform 0.5s;
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background-color: white;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 20px;*/
    /*border: 1px solid #ccc;*/
    color: #333;
}

.front, .front-content {
    z-index: 1;
    backface-visibility: hidden;
}
.front-content img, .back-content img{width: 100%}
.back-content img{transform: rotateY(180deg);}
.back, .back-content {
    transform: rotateY(0deg);
    z-index: 0;
}

/* Lật trang */
.flipped {
    transform: rotateY(180deg);
}

/* Sắp xếp z-index cho các trang giấy */
#p1 { z-index: 24; }
#p2 { z-index: 23; }
#p3 { z-index: 22; }
#p4 { z-index: 21; }
#p5 { z-index: 20; }
#p6 { z-index: 19; }
#p7 { z-index: 18; }
#p8 { z-index: 17; }
#p9 { z-index: 16; }
#p10 { z-index: 15; }
#p11 { z-index: 14; }
#p12 { z-index: 13; }
#p13 { z-index: 12; }
#p14 { z-index: 11; }
#p15 { z-index: 10; }
#p16 { z-index: 9; }
#p17 { z-index: 8; }
#p18 { z-index: 7; }
#p19 { z-index: 6; }
#p20 { z-index: 5; }
#p21 { z-index: 4; }
#p22 { z-index: 3; }
#p23 { z-index: 2; }
#p24 { z-index: 1; }
.Nextpay-aboutus #prev-btn{
    position: absolute;
    left: 0;
    top: 50%;
}
.Nextpay-aboutus #next-btn{
    position: absolute;
    right: 0;
    top: 50%;
}
.Na-mobile{display: none;}
@media (max-width: 900px) {
    .Na-desktop{display: none;}
    .Na-mobile{display: block;}
    body {
        /* Cho phép các item xuống dòng */
        flex-wrap: wrap;
        align-content: center;
    }

    .book {
        order: 1; /* Sách ở trên cùng */
        flex-basis: 100%; /* Sách chiếm toàn bộ chiều rộng, đẩy nút xuống dòng */
        width: 100%;
        max-width: none;
        perspective: 2000px; /* Giữ perspective của tablet */
        margin-bottom: 20px;
    }
    
    #prev-btn {
        order: 2; /* Nút lùi lại */
    }
    #next-btn {
        order: 3; /* Nút tiến lên */
    }

    /* Ghi đè lại JS style, không cho nút di chuyển ra 2 bên nữa */
    #prev-btn, #next-btn {
        transform: translateX(0px) !important;
        margin: 0 40px;
    }
}


/* --- Cho màn hình điện thoại (chiều rộng <= 533px) --- */
@media (max-width: 533px) {
    .book {
        perspective: 1400px;
    }
    .front, .back {
        /*padding: 15px; /* Giảm padding bên trong trang sách */*/
    }
    button {
        font-size: 1.8rem; /* Giảm kích thước nút */
    }
}

/* --- Cho màn hình iPhone 6/7/8 Plus, X (chiều rộng <= 414px) --- */
@media (max-width: 414px) {
    .book {
        perspective: 1200px; /* Giảm perspective cho màn hình hẹp hơn */
    }
    button {
        margin: 0 30px;
    }
}

/* --- Cho màn hình iPhone 6/7/8, SE (chiều rộng <= 375px) --- */
@media (max-width: 375px) {
    .book {
        perspective: 1100px;
    }
     .front, .back {
        padding: 10px; /* Giảm padding hơn nữa */
    }
    button {
        font-size: 1.7rem;
        margin: 0 25px;
    }
}