<!doctype html>

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

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

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

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

    /* Ribbon Styles */
.ribbon-RenamedOS {
 position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #FFA726, #FB8C00);
    color: gray;
    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-RenamedOS span {
    font-size: 8px;
    margin-right: 13px;
    display: block;
    font-weight: bold;
}

/* Circle Styles */
.circle-RenamedOS {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 22px;
    height: 22px;
background: linear-gradient(to bottom, #d3d3d3, #a9a9a9, #808080, #696969, #4f4f4f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

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

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

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

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

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


.story-info-RenamedOS {
  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-RenamedOS::-webkit-scrollbar {
  display: none;
}

.story-info-RenamedOS 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-RenamedOS 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-RenamedOS {
  font-size: 16px;
  font-weight: bold;
}


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

function getRibbonRenamedOS(status) {
  let background, svgPath, label;
  switch (status) {
    case "Đang viết":
    case "Hoàn thành":
    case "Tạm ngừng":
      svgPath = `
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="none">
          <defs>
            <!-- Gradient bạc chói sáng -->
            <linearGradient id="silverGradient" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" style="stop-color:#ffffff; stop-opacity:1" />
              <stop offset="30%" style="stop-color:#d9d9d9; stop-opacity:1" />
              <stop offset="50%" style="stop-color:#b3b3b3; stop-opacity:1" />
              <stop offset="70%" style="stop-color:#e6e6e6; stop-opacity:1" />
              <stop offset="100%" style="stop-color:#ffffff; stop-opacity:1" />
            </linearGradient>
            <!-- Hiệu ứng ánh sáng lan tỏa -->
            <radialGradient id="lightGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgba(255, 255, 255, 0.8); stop-opacity:1" />
              <stop offset="70%" style="stop-color:rgba(255, 255, 255, 0.1); stop-opacity:0" />
            </radialGradient>
          </defs>
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
          <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
          <g id="SVGRepo_iconCarrier">
            <!-- Ánh sáng lan tỏa -->
            <circle cx="256" cy="256" r="256" fill="url(#lightGlow)" />
            <!-- Hình biểu tượng -->
            <path fill="url(#silverGradient)" d="M256.313 29.844c-16.47-.022-32.95 2.724-49.282 8.343l5.69 16.563L17.53 123l6.19 17.656L231.405 68.03l-5.562-15.905c19.548-4.75 38.93-4.86 58.5-.5l-5.72 16.406 207.688 72.626L492.47 123 299.624 55.562l5.906-17.374c-16.29-5.517-32.75-8.322-49.217-8.344zm-.657 49.593L46.25 152.844l42.406 29.53c70.69-11.9 160.54 31.24 166.906-90.25 2.175 32.524 10.254 53.188 22.282 66.282 6.658 7.576 14.5 12.432 23.687 15.688.04.015.086.016.126.03.216.077.44.145.656.22 33.978 12.23 80.744 1.187 121.344 8.03l41.406-29.155-209.406-73.782zm.47 81.032c-.263.413-.516.842-.782 1.25-12.194 18.6-29.79 28.466-48.656 33.03-3.486.843-7.013 1.528-10.594 2.094l41.437 74.094-67.25 16.78 31.345 61.594-61.813-54L283.938 496.75l-61.875-143.625 52.438 69.5L235.03 320l58.5-10.094-17.092-52.75 93.468 141.28-81.47-196.748 56.845 83.406L323 197.75c-5.9-.68-11.71-1.63-17.375-3-18.865-4.564-36.494-14.43-48.688-33.03-.27-.413-.548-.832-.812-1.25z"></path>
          </g>
        </svg>
      `;
      background = "linear-gradient(#ffffff, #d9d9d9, #b3b3b3, #e6e6e6)";
      label =
        status === "Đang viết"
          ? "Oneshot"
          : status === "Hoàn thành"
          ? "Hoàn thành"
          : "Tạm ngừng";
      break;
  }
  return `
    <div class="ribbon-RenamedOS" style="background: ${background}; box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);">
      <span>${label}</span>
    </div>
    <div class="circle-RenamedOS">
      ${svgPath}
    </div>
  `;
}


  async function fetchBooksRenamedOS() {
    const loader = document.querySelector('.loader-RenamedOS');
    try {
      loader.style.display = 'block';
      const response = await fetch(apiUrlRenamedOS);
      const books = await response.json();

      const reversedBooks = books.reverse();
      const storyList = document.getElementById('story-list-RenamedOS');
      storyList.innerHTML = '';

      reversedBooks.forEach((book) => {
        const storyContainer = document.createElement('div');
        storyContainer.className = 'story-container-RenamedOS visible';
        const progressStatus = "Đang viết";

        storyContainer.innerHTML = `
          <div class="story-cover-RenamedOS">
            <a href="${book['Link tác phẩm']}" target="_self">
              <img src="${book['Url bìa']}" alt="${book['Tác phẩm']}">
              ${getRibbonRenamedOS(progressStatus)}
            </a>
          </div>
          <a href="${book['Link tác phẩm']}" target="_self" class="story-title-RenamedOS">${book['Tác phẩm']}</a>
        `;
        storyList.appendChild(storyContainer);
      });
    } catch (error) {
      console.error('Error fetching books:', error);
    } finally {
      loader.style.display = 'none';
    }
  }

  function scrollStoryListRenamedOS(direction) {
    const storyList = document.getElementById('story-list-RenamedOS');
    const scrollAmount = 300;

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

  fetchBooksRenamedOS();
</script>


</!doctype>