<!doctype html>

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

.story-container-RenamedNew {
  flex: 0 0 calc(100px + 3px);
  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-RenamedNew.visible {
  opacity: 1;
  transform: scale(1);
}

.story-title-RenamedNew {
  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: 40px; /* 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-RenamedNew:hover {
  color: var(--linkB);
}

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

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

.ribbon-RenamedNew span {
    font-size: 8px;
    margin-right: 13px;
    display: block;
    font-weight: bold;
}

/* Circle Styles */
.circle-RenamedNew {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.circle-RenamedNew svg {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    margin-left: -4px;
}

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

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

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

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


.story-info-RenamedNew {
  display: flex; /* Sử dụng flexbox để các phần tử nằm trên cùng một hàng */
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa các số liệu */
  overflow-x: auto; /* Thêm cuộn ngang khi nội dung vượt quá chiều rộng */
  white-space: nowrap; /* Ngăn không cho nội dung bị xuống dòng */
  scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
  -ms-overflow-style: none; 
  max-width: 100%; 
}

.story-info-RenamedNew::-webkit-scrollbar {
  display: none;
}

.story-info-RenamedNew span {
  display: flex; /* Làm cho span hiển thị giống như phần tử block nhưng trên một dòng */
  align-items: center; /* Căn giữa nội dung của span theo chiều dọc */
}

.story-info-RenamedNew svg {
  width: 12px; /* Thu nhỏ kích thước SVG */
  height: 12px;
  fill: currentColor; /* Đảm bảo màu sắc của SVG đồng bộ với màu của văn bản */
  margin-right: 5px; /* Khoảng cách giữa SVG và số liệu */
}

.story-title-RenamedNew {
  font-size: 16px;
  font-weight: bold;
}


/* Ẩn nút cuộn trên màn hình nhỏ */
@media (max-width: 1024px) {
  .scroll-button-RenamedNew.active {
    display: none;
  }
}
.loader-RenamedNew {
  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-RenamedNew"></div> <!-- Loader -->
  <div id="story-list-RenamedNew"></div>
  <button class="scroll-button-RenamedNew left" onclick="scrollStoryListRenamedNew('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-RenamedNew right" onclick="scrollStoryListRenamedNew('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 apiUrlRenamedNew = "https://script.google.com/macros/s/AKfycbxo2ps4MkecKr_Qj9P5NOHvGVOLF6gW_HsP5TOy7ka2H7Cg5lQ3pRlZiKz5N6TYk_D1/exec?tab22=true";

function getRibbonRenamedNew(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 48 48" xmlns="http://www.w3.org/2000/svg" fill="none">
  <defs>
    <linearGradient id="goldGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
      <stop offset="40%" style="stop-color:#FFB900;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#FF8C00;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#FF6F00;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">
    <title>new-star</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="invisible_box" data-name="invisible box">
        <rect width="48" height="48" fill="none"></rect>
      </g>
      <g id="icons_Q2" data-name="icons Q2">
        <path fill="url(#goldGradient)" d="M42.3,24l3.4-5.1a2,2,0,0,0,.2-1.7A1.8,1.8,0,0,0,44.7,16l-5.9-2.4-.5-5.9a2.1,2.1,0,0,0-.7-1.5,2,2,0,0,0-1.7-.3L29.6,7.2,25.5,2.6a2.2,2.2,0,0,0-3,0L18.4,7.2,12.1,5.9a2,2,0,0,0-1.7.3,2.1,2.1,0,0,0-.7,1.5l-.5,5.9L3.3,16a1.8,1.8,0,0,0-1.2,1.2,2,2,0,0,0,.2,1.7L5.7,24,2.3,29.1a2,2,0,0,0,1,2.9l5.9,2.4.5,5.9a2.1,2.1,0,0,0,.7,1.5,2,2,0,0,0,1.7.3l6.3-1.3,4.1,4.5a2,2,0,0,0,3,0l4.1-4.5,6.3,1.3a2,2,0,0,0,1.7-.3,2.1,2.1,0,0,0,.7-1.5l.5-5.9L44.7,32a2,2,0,0,0,1-2.9ZM18,31.1l-4.2-3.2L12.7,27h-.1l.6,1.4,1.7,4-2.1.8L9.3,24.6l2.1-.8L15.7,27l1.1.9h0a11.8,11.8,0,0,0-.6-1.3l-1.6-4.1,2.1-.9,3.5,8.6Zm3.3-1.3-3.5-8.7,6.6-2.6.7,1.8L20.7,22l.6,1.6L25.1,22l.7,1.7L22,25.2l.7,1.9,4.5-1.8.7,1.8Zm13.9-5.7-2.6-3.7-.9-1.5h-.1a14.7,14.7,0,0,1,.4,1.7l.8,4.5-2.1.9-5.9-7.7,2.2-.9,2.3,3.3,1.3,2h0a22.4,22.4,0,0,1-.4-2.3l-.7-4,2-.8L33.8,19,35,20.9h0s-.2-1.4-.4-2.4L34,14.6l2.1-.9,1.2,9.6Z"></path>
      </g>
    </g>
  </g>
</svg>
`;
    background = "linear-gradient(#FFD700, #FFB900, #FF8C00, #FF6F00)"; // Gradient vàng sang trọng
    label =
      status === "Đang viết"
        ? "Mới ra"
        : status === "Hoàn thành"
        ? "Hoàn thành"
        : "Tạm ngừng";
    break;
}


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

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

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

    // Đảo ngược thứ tự JSON
    const reversedBooks = books.reverse();

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

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

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

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

      storyList.appendChild(storyContainer);
    });
  } catch (error) {
    console.error('Error fetching books:', error);
  } finally {
    loader.style.display = 'none'; // Ẩn loader sau khi tải xong
  }
}


fetchBooksRenamedNew();

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