/* book */
.book {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      position: relative;
        margin-bottom: 20px;
    }

    /* Swiper container */
    .swiper {
      flex: 1;
      width: 100%;
      background: #fff;
    }

    .swiper-slide {
      display: flex!important;
      justify-content: center;
      align-items: center;
      background: #fff;
    }

    .swiper-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Page panel */
    .page-panel {
      position: absolute;
      top: 40px;
      left: -300px;
      width: 200px;
      background: #fff;
      overflow-y: auto;
      transition: left 0.3s ease;
      z-index: 20;
      padding: 10px;
      height: 75%;
      display: flex;
      flex-direction: column;
            border: 1px dashed;
    }
    .page-panel.open {
            top: 40px;
      left: 0;
      height: 75%; /* Chiều cao bằng .book, nhưng sẽ giới hạn bằng #swiperContainer */
    }
    .page-panel .close-btn {
      align-self: flex-end;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
    .page-panel button {
      display: block;
      width: 100%;
      margin: 5px 0;
      padding: 8px;
      text-align: left;
      background: #f2f2f2;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      margin-bottom: 10px;
    z-index: 999;
    }
    .page-panel button:hover {
      background: #e6e6e6;
    }
    .page-panel button.active-page {
      background: #ffcc01;
      color: #000;
      font-weight: bold;
      margin-bottom: 10px;
    z-index: 999;
    }

    /* Bottom controls */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f8f8f8;
      border-top: 1px dotted #000;
      padding: 5px 10px;
      font-size: 16px;
    }
    .controls {
  position: relative;
  background: #f9f9f9;
  padding: 5px 10px;
  height: 40px;
    border: 1px dashed;
    margin-bottom: 20px;
}

.controls-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
    display: flex;
}

.controls-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    display: flex;
}

.controls-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#wib_exitFullscreenBtn{margin-bottom:20px;}
    .material-icons {
      cursor: pointer;
      font-size: 24px;
      vertical-align: middle;
    }
.fiximg {width:35px; border: 1px dashed #000;}
.highlight .fiximg {border: 1px dashed;}
.word.fixword {font-size:1px;}
/* end book */