/* Base style */
.fade-section {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-section.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* Kiểu fade từ trái */
.fade-left {
  transform: translateX(-70px);
}

.fade-right {
  transform: translateX(70px);
}

.fade-up {
  transform: translateY(70px);
}

.fade-left.show,
.fade-right.show,
.fade-up.show {
  transform: translate(0, 0);
}

/* ...existing code... */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 9999;
  background: #222;
  color: #870707;
  border: none;
  outline: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: all;
  transition: opacity 0.4s, transform 0.3s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#backToTop:hover {
  background: #444;
  transform: scale(1.1);
}

/* ...existing code... */



    .wrap{
    max-width:1200px;
    margin:40px auto;
    padding:20px;
  }

  /* flipbook stage */
  .flipbook-stage{
    background:linear-gradient(180deg,#fff,#f8fbfa);
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
    padding:32px;
    position:relative;
    overflow:hidden;
  }

  /* controls top */
  .controls {
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:flex-end;
    margin-bottom:12px;
  }
  .controls .btn{
    background:var(--btn-bg);
    color:var(--btn-color);
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
  }
  .controls .btn:active{transform:scale(.98)}
  .controls .page-indicator{margin-right:auto; color:#555;font-size:14px;}

  /* book area */
  .book {
    width:100%;
    height:720px;
    max-height:72vh;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:2000px;
  }

  .book-inner {
    width:86%;
    max-width:960px;
    height:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:36px;
    align-items:center;
    justify-items:center;
    position:relative;
  }

  /* page panel (static backfaces) */
  .page-panel {
    width:100%;
    height:100%;
    background:var(--card);
    border-radius:10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .page-panel img {
    width:92%;
    height:auto;
    max-height:100%;
    object-fit:contain;
    display:block;
    user-select:none;
    pointer-events:none;
  }

  /* flipping page element (positioned above panels) */
  .flipper{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:calc(43%); /* one page width */
    height:88%;
    z-index:40;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    pointer-events:none;
  }
  .flipper .face {
    position:absolute;
    width:100%;
    height:100%;
    border-radius:10px;
    overflow:hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,0.25);
    transform-origin:left center;
    backface-visibility:hidden;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .flipper .face img{ width:100%; height:100%; object-fit:contain; }

  /* place flipper on right side when flipping to next (rotates Y -90 -> 0) */
  .flipper.right {
    right: calc(7% + 18px);
    transform-origin:right center;
  }
  .flipper.left {
    left: calc(7% + 18px);
    transform-origin:left center;
  }

  /* flip animations (we'll add classes via JS) */
  .flip-next-start{ transform-origin:right center; transform: rotateY(0deg); }
  .flip-next-active{ transform-origin:right center; transform: rotateY(-180deg); transition: transform 700ms cubic-bezier(.25,.9,.25,1); }
  .flip-prev-start{ transform-origin:left center; transform: rotateY(0deg); }
  .flip-prev-active{ transform-origin:left center; transform: rotateY(180deg); transition: transform 700ms cubic-bezier(.25,.9,.25,1); }

  /* small UI arrows inside book sides for click */
  .side-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;
    background:rgba(0,0,0,0.06); display:flex;align-items:center;justify-content:center;
    cursor:pointer; z-index:60;
  }
  .side-arrow.left{ left:8%; }
  .side-arrow.right{ right:8%; }

  /* fullscreen icon position top-right */
  .fs-toggle{
    position:absolute; right:18px; top:18px; z-index:80; background:rgba(0,0,0,0.06); border-radius:8px; padding:6px;
    cursor:pointer;
  }

  /* responsive */
  @media (max-width:900px){
    .book-inner { gap:18px; }
    .book { height:60vh; }
  }
  @media (max-width:600px){
    .book-inner { grid-template-columns: 1fr; }
    .flipper{ display:none; } /* single page on tiny devices */
  }

  /* simple button icon */
  .icon{ width:18px; height:18px; display:inline-block; }