.flipbook-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

/* =========================
   BOOK WRAPPER
========================= */

.book-wrapper {
    position: relative;
    width: 1500px; /* TO HƠN */
    max-width: 100%;
    height: 920px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 6000px;
    overflow: visible;
}

/* =========================
   BOOK
========================= */

.book {
    position: relative;
    width: 640px; /* TO HƠN */
    height: 860px; /* TO HƠN */
    transform-style: preserve-3d;
    transition: transform .8s ease;
}

/* =========================
   PAGE
========================= */

.page {
    position: absolute;
    width: 640px;
    height: 860px;
    top: 0;
    left: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(.77,0,.175,1), z-index .4s;
}

    .page.flipped {
        transform: rotateY(-180deg);
    }

/* =========================
   FRONT / BACK
========================= */

.page-front,
.page-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    backface-visibility: hidden;
    background: #fff;
    box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 10px 20px rgba(0,0,0,.12);
}

    /* =========================
   IMAGE
========================= */

    .page-front img,
    .page-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: auto;
    }

    /* =========================
   PAGE SHADOW
========================= */

    .page-front::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 100%;
        background: linear-gradient( to left, rgba(0,0,0,.18), rgba(0,0,0,.08), transparent );
    }

/* BACK */
.page-back {
    transform: rotateY(180deg);
}

/* =========================
   PAGE NUMBER
========================= */

.page-number {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    z-index: 10;
}

/* =========================
   SHADOW
========================= */

.book-shadow {
    position: absolute;
    width: 900px;
    height: 60px;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.22);
    filter: blur(30px);
    border-radius: 50%;
    z-index: -1;
}

/* =========================
   BUTTONS
========================= */

.controls {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.btn-book {
    border: none;
    background: #025e5c;
    color: #fff;
    padding: 14px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    cursor: pointer;
}

    .btn-book:hover {
        background: #1e293b;
        transform: translateY(-3px);
    }

/* =========================
   POSITION STATES
========================= */

/* 1 TRANG */
.book.start-position {
    transform: translateX(0px);
}

/* 2 TRANG */
.book.middle-position {
    transform: translateX(270px);
}

/* CUỐI */
.book.end-position {
    transform: translateX(640px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1400px) {

    .book-wrapper {
        height: 820px;
    }

    .book,
    .page {
        width: 560px;
        height: 760px;
    }

        .book.middle-position {
            transform: translateX(240px);
        }

        .book.end-position {
            transform: translateX(560px);
        }

    .book-shadow {
        width: 800px;
    }
}

@media(max-width:1200px) {

    .book-wrapper {
        height: 720px;
    }

    .book,
    .page {
        width: 500px;
        height: 680px;
    }

        .book.middle-position {
            transform: translateX(220px);
        }

        .book.end-position {
            transform: translateX(500px);
        }

    .book-shadow {
        width: 720px;
    }
}

@media(max-width:991px) {

    .book-wrapper {
        height: 620px;
    }

    .book,
    .page {
        width: 420px;
        height: 580px;
    }

        .book.middle-position {
            transform: translateX(0px);
        }

        .book.end-position {
            transform: translateX(420px);
        }

    .book-shadow {
        width: 620px;
    }
}

@media(max-width:768px) {

    .flipbook-container {
        min-height: auto;
        padding: 30px 0 60px;
    }

    .book-wrapper {
        height: 520px;
    }

    .book,
    .page {
        width: 340px;
        height: 480px;
    }

        .book.middle-position {
            transform: translateX(0px);
        }

        .book.end-position {
            transform: translateX(340px);
        }

    .book-shadow {
        width: 500px;
    }

    .controls {
        flex-wrap: wrap;
    }

    .btn-book {
        padding: 12px 18px;
        font-size: 13px;
    }
}

@media(max-width:480px) {

    .book-wrapper {
        height: 430px;
    }

    .book,
    .page {
        width: 270px;
        height: 390px;
    }

        .book.middle-position {
            transform: translateX(0px);
        }

        .book.end-position {
            transform: translateX(270px);
        }

    .book-shadow {
        width: 380px;
    }
}
/* =========================
   PAGE
========================= */

.page {
    position: absolute;
    width: 640px;
    height: 860px;
    top: 0;
    left: 0;

    /* GIỮ NGUYÊN TÂM LẬT */
    transform-origin: left center;

    transform-style: preserve-3d;

    transition:
        transform 1.2s cubic-bezier(.77,0,.175,1),
        z-index .4s;

    will-change: transform;
}

/* =========================
   HIỆU ỨNG LẬT
========================= */

.page.flipped {
    transform: rotateY(-180deg);
}

/* =========================
   TẠO CẢM GIÁC CUỘN TRANG
========================= */

.page-front,
.page-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    backface-visibility: hidden;
    background: #fff;

    box-shadow:
        0 24px 50px rgba(0,0,0,.22),
        0 10px 20px rgba(0,0,0,.12);
}

/* =========================
   GÓC CUỘN GIẤY
========================= */

.page-front::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 5;

    background:
        radial-gradient(
            circle at bottom right,
            rgba(0,0,0,.20),
            transparent 70%
        );

    opacity: .35;

    transition:
        transform .9s ease,
        opacity .9s ease;
}

/* KHI LẬT → GÓC CUỘN MẠNH HƠN */

.page.flipped .page-front::before {

    transform:
        scale(1.35)
        rotate(-12deg);

    opacity: .55;
}

/* =========================
   ÁNH SÁNG CONG GIẤY
========================= */

.page::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    pointer-events: none;
    z-index: 10;

    background: linear-gradient(
        to left,
        rgba(255,255,255,.18),
        rgba(255,255,255,.05),
        transparent
    );

    opacity: 0;
    transition: opacity .6s ease;
}

.page.flipped::after {
    opacity: 1;
}

/* =========================
   IMAGE
========================= */

.page-front img,
.page-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

/* =========================
   PAGE SHADOW
========================= */

.page-front::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;

    background: linear-gradient(
        to left,
        rgba(0,0,0,.18),
        rgba(0,0,0,.08),
        transparent
    );
}

/* BACK */
.page-back {
    transform: rotateY(180deg);
}