.containersach {
     
        justify-content: center;
        align-items: center;
      /*  width: 100vw; */
    }
  
    
   .box-out {
  z-index: -99;
  width: auto; /* Để chiều rộng tự động điều chỉnh theo nội dung */
  
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 140px;
  white-space: nowrap; /* Ngăn các phần tử con xuống dòng */
}
    
    
    
    .book {
        width: 160px; /* Giảm kích thước chiều rộng một chút */
        height: 226px; /* Giảm kích thước chiều cao tương ứng */
        background-color: rgb(62, 71, 152);
        transition: all .3s ease-in-out;
        transform-origin: left center 0px;
        transform-style: preserve-3d;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        
        display:inline-flex;
        justify-content: center;justify-content: center;
        align-items: center;
    }
    
    .box-out .book::after {
        content: " ";
        display:inline-flex;
        opacity: 0;
        width: 152px; /* Điều chỉnh chiều rộng của phần tử giả ::after */
  height: 226px; /* Điều chỉnh chiều cao của phần tử giả ::after */
        position: relative;
        left: 6px; /* Điều chỉnh vị trí */
        transition: all .3s ease;
    }
    
    .box-out .book::before {
        content: " ";
        z-index: 999;
        display:inline-flex;
        width: 20px;
        height: 100px;
        opacity: 0;
        position: absolute;
        top: -12px;
        right: 8px;
        transition: all .25s;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABhCAYAAABh23lYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHCSURBVHgB7dxPTsJAHMXxN7Xu3UhigobxJHACvQFwAr2BcgO8AZxE7uGiDZiQyEIW7oSOUyKbKgLS8u+9b9JNF818fum0XdWUhy9VEDZBGIdBGD6DsFM3bQYgTnjWhGdNeNaEZ0141oRnTXjWhGdNeNaEZ0141oRnTXjWhGdNeNaEZ0141oRnTXjWhGdNeNaEZ0141oRnTXjWhGdNeNaEZ0141oRnTXjWhGdNeNaEZ0141oRnTXjWhGdNeNZ2hR/7o+UcmnCIsaNCbLcU/RR8oB1bO/4+17l8ixoGeIBBBVvMXI0ih+L7Df2j8iiqnvgh+AVVUXDOTZvF4tNb2qC7DJ1tNgSDO78tblFQxeE92l+0NSjZDjaoMowqyYl7hDF15JzL+x+YHtxLgFq/ZO2m8LT4wsb90nUjmMD61XaRc7ng5+jBua29ntsecq6oIWyELxqdLe8h/GvPp+h0T28D/FezZ8Ip7pHgZt3X5NoPvH1BZ5sNIUTDL7C+6hBWxxt0gk+00tsOe96qH0zL8GO4pBtMg/YhoLMtG8Ii/EpfY4fSoiFk8UeFzpYdwhz/jiNGZ0uHEBjUEzftohJFZyAsdX8BM0/amLC3spYAAAAASUVORK5CYII=');
        background-size: 16px;
        background-repeat: no-repeat;
    }
    
    /*------ background-pic ------*/
    
    .books-1 {
        background: url('https://i.pinimg.com/736x/22/57/e8/2257e8f62e62fa7b62ef6ad26b6d2b33.jpg');
        background-size: 180px 255px;
    }
    
    .books-2 {
        background: url('https://i.pinimg.com/736x/cd/7d/bd/cd7dbda183946730cb4f76652a69f5d3.jpg');
        background-size: 180px 255px;
    }
    
    .books-3 {
        background: url('https://upload-images.jianshu.io/upload_images/3433202-564e196e8b409f16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
        background-size: 180px 255px;
    }
    
    
    /* ----- book-blur ----- */
    
    
    
    
    
    /* ----- hover ----- */
    
    .book:hover {
        cursor: pointer;
        transform: rotateY(-28deg) rotateZ(-2deg) scale(1.02);
       
        box-shadow: 1px 3px 2px #353d85, 20px 8px 0 #525dc4;
        /* transform: scale(1.02); */
    }
    
    .book:hover::after {
        content: " ";
        display:inline-flex;
        opacity: 1;
        width: 144px; /* Điều chỉnh chiều rộng khi hover */
        height: 226px; /* Điều chỉnh chiều cao khi hover */
        position: relative;
        left: 6px; /* Điều chỉnh vị trí khi hover */
        background: linear-gradient(-180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 60%);
    }
    
    .book:hover::before {
        transform: translateY(9px);
        opacity: 1;
      
    }