<!doctype html>

  <style>

#story-list-RenamedBTV {
  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-RenamedBTV::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}


#story-list-RenamedBTV {
  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-RenamedBTV {
  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-RenamedBTV.visible {
  opacity: 1;
  transform: scale(1);
}



.story-title-RenamedBTV {
  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-RenamedBTV:hover {
  color: var(--linkB);
}

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

    /* Ribbon Styles */
.ribbon-RenamedBTV {
  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-RenamedBTV span {
  font-size: 7px;
  margin-right: 14px;
  display: block;
  font-weight: bold;
}

/* Circle Styles */
.circle-RenamedBTV {
  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: #000; /* Solid black background */
background: linear-gradient(135deg, #121212, #333333, #880E4F); /* Subtle dark gradient with ruby pink */

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.circle-RenamedBTV svg {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  margin-left: -4px;
}
/* Danh sách truyện */
#story-list-RenamedBTV {
  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-RenamedBTV::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}

/* Nút cuộn */
.scroll-button-RenamedBTV {
  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-RenamedBTV.active {
  display: block; /* Hiển thị khi thêm class "active" */
}
.scroll-button-RenamedBTV.left {
  left: 10px; /* Đặt nút bên trái */
}

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

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

.scroll-button-RenamedBTV: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-RenamedBTV.active {
    display: none;
  }
}
.loader-RenamedBTV {
  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 {
  to { transform: rotate(360deg); }
}

  </style>


<div style="position: relative; width: 100%; overflow: hidden;">
  <div class="loader-RenamedBTV"></div> <!-- Loader -->
  <div id="story-list-RenamedBTV"></div>
  <button class="scroll-button-RenamedBTV left" onclick="scrollStoryListRenamedBTV('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-RenamedBTV right" onclick="scrollStoryListRenamedBTV('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 apiUrlRenamedBTV = "https://script.google.com/macros/s/AKfycbxo2ps4MkecKr_Qj9P5NOHvGVOLF6gW_HsP5TOy7ka2H7Cg5lQ3pRlZiKz5N6TYk_D1/exec?tab=BTV lựa chọn";

function getRibbonRenamedBTV(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 viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet" fill="#000000">
  <defs>
    <linearGradient id="beautifulGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" style="stop-color:#000000;stop-opacity:1" />
      <stop offset="40%" style="stop-color:#880E4F;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#D32F2F;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#F06292;stop-opacity:1" />
    </linearGradient>
  </defs>
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
  <g id="SVGRepo_iconCarrier">
    <path fill="url(#beautifulGradient)" d="M41 4H23L2 20.1L32 60l30-39.9z"></path>
    <g fill="#AD1457">
      <path d="M32 60l12.5-39.9H18.8z"></path>
      <path d="M9.5 9.5L2 20.1h16.8L23 4z"></path>
      <path d="M54.5 9.5L41 4l3.5 16.1H62z"></path>
    </g>
  </g>
</svg>


`;
    background = "linear-gradient(#880E4F, #AD1457, #C2185B, #F06292)"; // Gradient hồng ruby
    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-RenamedBTV" style="background: ${background}">
      <span>${label}</span>
    </div>
    <div class="circle-RenamedBTV">
      ${svgPath}
    </div>
  `;
}

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

  try {
    loader.style.display = 'block'; // Hiển thị loader
    const response = await fetch(apiUrlRenamedBTV);
    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-RenamedBTV');
    storyList.innerHTML = '';

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

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

      storyContainer.innerHTML = `
        <div class="story-cover-RenamedBTV">
          <a href="${book.cotJ}" target="_self">
            <img src="${book.urlBia}" alt="${book.tacPham}">
            ${getRibbonRenamedBTV(progressStatus)}
          </a>
        </div>
        <a href="${book.cotJ}" target="_self" class="story-title-RenamedBTV">${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
  }
}


fetchBooksRenamedBTV();

    function scrollStoryListRenamedBTV(direction) {
  const storyList = document.getElementById('story-list-RenamedBTV');
  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>




