<!doctype html>

  <style>

#story-list-Renamed5 {
  display: flex;
  gap: 20px; /* Giảm khoảng cách trên điện thoại */
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  justify-content: flex-start; 
  overflow-x: auto;
  -ms-overflow-style: none; /* Loại bỏ thanh cuộn trên IE và Edge */
  scrollbar-width: none; /* Loại bỏ thanh cuộn trên Firefox */
}

#story-list-Renamed5::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}


#story-list-Renamed5 {
  display: flex;
  gap: 15px; /* Giảm khoảng cách giữa các truyện */
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  -ms-overflow-style: none; /* Loại bỏ thanh cuộn trên IE và Edge */
  scrollbar-width: none; /* Loại bỏ thanh cuộn trên Firefox */
}

.story-container-Renamed5 {
  flex: 0 0 calc(100px + 22px);
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  scroll-snap-align: start;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.story-container-Renamed5.visible {
  opacity: 1;
  transform: scale(1);
}



.story-title-Renamed5 {
  text-align: center;
  font-size: 14px; /* Nhỏ hơn trên điện thoại */
  font-weight: bold;
  color: var(--bodyC);
  margin-top: 8px;
  display: -webkit-box; /* Sử dụng để áp dụng -webkit-line-clamp */
  -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */
  -webkit-box-orient: vertical; /* Hướng dọc */
  overflow: hidden; /* Ẩn nội dung dư thừa */
  text-overflow: ellipsis; /* Thêm dấu "..." nếu văn bản bị cắt */
  width: 100%;
  height: 33px; /* Chiều cao cố định cho 2 dòng (tùy chỉnh theo font-size và line-height) */
  line-height: 1.2; /* Điều chỉnh khoảng cách dòng */
}

.story-title-Renamed5:hover {
  color: var(--linkB);
}

    .story-cover-Renamed5 {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 10px;
      z-index: 1;
    }
    .story-cover-Renamed5 img {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 10px;
      transition: transform 0.3s ease;
      z-index: 1;
    }
    .story-cover-Renamed5 img:hover {
      transform: scale(1.1);
    }

    /* Ribbon Styles */
.ribbon-Renamed5 {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #FFA726, #FB8C00);
  color: white;
  font-size: 5px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5.2px 8px 5.2px 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.ribbon-Renamed5 span {
  font-size: 7px;
  margin-right: 14px;
  display: block;
  font-weight: bold;
}

/* Circle Styles */
.circle-Renamed5 {
  position: absolute;
  top: -3px; 
  right: -5px; /* Điều chỉnh vị trí vòng tròn theo trục ngang */
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.circle-Renamed5 svg {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  margin-left: -4px;
}
/* Danh sách truyện */
#story-list-Renamed5 {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  -ms-overflow-style: none; /* Loại bỏ thanh cuộn trên IE và Edge */
  scrollbar-width: none; /* Loại bỏ thanh cuộn trên Firefox */
}

#story-list-Renamed5::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}

/* Nút cuộn */
.scroll-button-Renamed5 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none; /* Loại bỏ nền */
  border: none;
  padding: 0; /* Loại bỏ khoảng cách bên trong */
  cursor: pointer;
  z-index: 10;
  display: none;
}
.scroll-button-Renamed5.active {
  display: block; /* Hiển thị khi thêm class "active" */
}
.scroll-button-Renamed5.left {
  left: 10px; /* Đặt nút bên trái */
}

.scroll-button-Renamed5.right {
  right: 10px; /* Đặt nút bên phải */
}

.scroll-button-Renamed5 svg {
  width: 24px;
  height: 24px;
  fill: white; /* Màu của biểu tượng SVG */
}

.scroll-button-Renamed5:hover svg {
  fill: #555; /* Đổi màu khi hover */
}

/* Ẩn nút cuộn trên màn hình nhỏ */
@media (max-width: 1024px) {
  .scroll-button-Renamed5.active {
    display: none;
  }
}
.loader-Renamed5 {
  display: none;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--linkB);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: loader 1s linear infinite;
  margin: 0 auto;
}

@keyframes loader-Renamed5 {
  to { transform: rotate(360deg); }
}

  </style>


<div style="position: relative; width: 100%; overflow: hidden;">
  <div class="loader-Renamed5"></div> <!-- Loader -->
  <div id="story-list-Renamed5"></div>
  <button class="scroll-button-Renamed5 left" onclick="scrollStoryListRenamed5('left')">
<svg class='line' width="100%" height="100%" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path class='c' d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </path></svg>
  </button>
  <button class="scroll-button-Renamed5 right" onclick="scrollStoryListRenamed5('right')">
<svg class='line' width="100%" height="100%" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path class='c' d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </path></svg>
  </button>
</div>


  

  <script>
    const apiUrlRenamed5 = "https://script.google.com/macros/s/AKfycbxOOHp5RYr8mkbbEO9taOOESqLlqwrZqiQ-rnvU6sMEqQt0Goln_2zlHlREkgXfmX6cOg/exec?tab=BTV lựa chọn";

function getRibbonRenamed5(status) {
  let background, gradientId, svgPath, label;

switch (status) {
  case "Đang viết":
  case "Hoàn thành":
  case "Tạm ngừng": // Dùng chung thiết kế
    gradientId = "gradient-status";
    svgPath = `
<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#003C61;" d="M437.02,74.98C388.667,26.628,324.25,0,255.87,0S123.333,26.628,74.98,74.98 C26.628,123.333,0,187.62,0,256s26.628,132.667,74.98,181.02C123.333,485.372,187.49,512,255.87,512s132.797-26.628,181.15-74.98 C485.372,388.667,512,324.38,512,256S485.372,123.333,437.02,74.98z"></path> <path style="fill:#0066A6;" d="M255.87,0.003C187.58,0.067,123.275,26.686,74.98,74.98C26.628,123.333,0,187.62,0,256 s26.628,132.667,74.98,181.02c48.295,48.294,112.6,74.915,180.89,74.978V0.003z"></path> <path style="fill:#005A95;" d="M398.454,113.546c-38.051-38.052-88.772-59.007-142.584-59.007s-104.273,20.955-142.325,59.007 C75.494,151.597,54.539,202.188,54.539,256s20.955,104.403,59.007,142.454c38.05,38.052,88.511,59.007,142.324,59.007 s104.534-20.955,142.584-59.007c38.052-38.051,59.007-88.642,59.007-142.454S436.506,151.597,398.454,113.546z"></path> <path style="fill:#31AAEF;" d="M255.87,54.542c-53.721,0.063-104.331,21.01-142.325,59.004 C75.494,151.597,54.539,202.188,54.539,256s20.955,104.403,59.006,142.454c37.994,37.993,88.603,58.94,142.325,59.004V54.542z"></path> <path style="fill:#79C6BF;" d="M225.38,368.767c-10.332,0-20.241-4.105-27.547-11.41l-68.094-68.094 c-15.213-15.213-15.213-39.879,0-55.093c15.214-15.212,39.88-15.213,55.093,0l40.547,40.547l101.936-101.936 c15.214-15.213,39.879-15.213,55.093,0c15.213,15.213,15.213,39.879,0,55.092L252.926,357.357 C245.621,364.663,235.711,368.767,225.38,368.767z"></path> <path style="fill:#E4F3F6;" d="M255.87,244.227l-30.491,30.491l-40.547-40.547c-15.213-15.213-39.879-15.213-55.093,0 c-15.213,15.213-15.213,39.879,0,55.093l68.094,68.094c7.306,7.306,17.214,11.41,27.547,11.41c10.331,0,20.241-4.105,27.547-11.41 l2.944-2.944L255.87,244.227L255.87,244.227z"></path> </g></svg>

`; // SVG o day
    background = "linear-gradient(#003C61, #31AAEF, #000000, #0066A6)"; // Gradient ánh bạc -> xanh đen -> tím than
    label =
      status === "Đang viết"
        ? "BTV lựa chọn"
        : status === "Hoàn thành"
        ? "Hoàn thành"
        : "Tạm ngừng";
    break;
}


  return `
    <div class="ribbon-Renamed5" style="background: ${background}">
      <span>${label}</span>
    </div>
    <div class="circle-Renamed5">
      ${svgPath}
    </div>
  `;
}

async function fetchBooksRenamed5() {
  const loader = document.querySelector('.loader-Renamed5');
  const scrollButtons = document.querySelectorAll('.scroll-button-Renamed5'); // Lấy tất cả nút cuộn

  try {
    loader.style.display = 'block'; // Hiển thị loader
    const response = await fetch(apiUrlRenamed5);
    const books = await response.json();

    // Chọn ngẫu nhiên 21 bộ truyện
    const randomBooks = books.sort(() => 0.5 - Math.random()).slice(0, 21);

    const storyList = document.getElementById('story-list-Renamed5');
    storyList.innerHTML = '';

    randomBooks.forEach(book => {
      const storyContainer = document.createElement('div');
      storyContainer.className = 'story-container-Renamed5 visible';

      // Lấy trạng thái tiến độ từ API
      const progressStatus = "Đang viết";

      storyContainer.innerHTML = `
        <div class="story-cover-Renamed5">
          <a href="${book.cotJ}" target="_self">
            <img src="${book.urlBia}" alt="${book.tacPham}">
            ${getRibbonRenamed5(progressStatus)}
          </a>
        </div>
        <a href="${book.cotJ}" target="_self" class="story-title-Renamed5">${book.tacPham}</a>
      `;
      storyList.appendChild(storyContainer);
    });

    // Hiển thị nút cuộn sau khi tải xong
    scrollButtons.forEach(button => button.classList.add('active'));
  } catch (error) {
    console.error("Lỗi khi tải dữ liệu:", error);
  } finally {
    loader.style.display = 'none'; // Ẩn loader
  }
}


fetchBooksRenamed5();

    function scrollStoryListRenamed5(direction) {
  const storyList = document.getElementById('story-list-Renamed5');
  const scrollAmount = 300; // Độ dài cuộn mỗi lần nhấp (pixel)

  if (direction === 'left') {
    storyList.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  } else if (direction === 'right') {
    storyList.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
}

  </script>

</!doctype>



