<!doctype html>

  <style>

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

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

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

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

    /* Ribbon Styles */
.ribbon-RenamedCL {
 position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #FFA726, #FB8C00);
    color: white;
    font-size: 5px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 7px;
    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-RenamedCL span {
    font-size: 6px;
    margin-right: 14px;
    display: block;
    font-weight: bold;
}

/* Circle Styles */
.circle-RenamedCL {
    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-RenamedCL svg {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    margin-left: -4px;
}

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

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

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

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


.story-info-RenamedCL {
  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;  /* Ẩn thanh cuộn trên Internet Explorer 10+ */
  max-width: 100%; /* Giới hạn độ rộng của container */
}

.story-info-RenamedCL::-webkit-scrollbar {
  display: none; /* Ẩn thanh cuộn trên các trình duyệt Webkit (Chrome, Safari, Edge) */
}

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


/* Ẩn nút cuộn trên màn hình nhỏ */
@media (max-width: 1024px) {
  .scroll-button-RenamedCL.active {
    display: none;
  }
}
.loader-RenamedCL {
  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-RenamedCL"></div> <!-- Loader -->
  <div id="story-list-RenamedCL"></div>
  <button class="scroll-button-RenamedCL left" onclick="scrollStoryListRenamedCL('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-RenamedCL right" onclick="scrollStoryListRenamedCL('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 apiUrlRenamedCL = "https://script.google.com/macros/s/AKfycbxo2ps4MkecKr_Qj9P5NOHvGVOLF6gW_HsP5TOy7ka2H7Cg5lQ3pRlZiKz5N6TYk_D1/exec?tab=Lãng mạn,Hiện thực,Hài hước,Phiêu lưu,Kì ảo,Tiên hiệp,Viễn tưởng,Khoa học viễn tưởng,";

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

  switch (status) {
    case "Đang viết":
      gradientId = "gradient-writing";
      svgPath = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <defs>
    <linearGradient id="gradient-writing" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFA726" />
      <stop offset="100%" stop-color="#FB8C00" />
    </linearGradient>
  </defs>
  <!-- Đường chữ nhật -->
  <rect x="4" y="16" width="16" height="4" rx="2" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></rect>
  <!-- Hình tam giác -->
  <path d="M4.90949 11.3642L8 16H16L19.0905 11.3642C19.5259 10.7112 19.7436 10.3847 19.7083 10.0289C19.6731 9.67311 19.3956 9.39561 18.8406 8.84062L12 2L5.15938 8.84062C4.60439 9.39561 4.32689 9.67311 4.29166 10.0289C4.25643 10.3847 4.47412 10.7112 4.90949 11.3642Z" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></path>
  <!-- Hình tròn -->
  <circle cx="12" cy="11" r="2" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></circle>
  <!-- Đường thẳng -->
  <path d="M12 2V9" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></path>
</svg>

`; // SVG o day
      background = "linear-gradient(135deg, #FFA726, #FB8C00)";
      label = "Đang viết";
      break;
    case "Tạm ngừng":
      gradientId = "gradient-paused";
      svgPath = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.149 512.149" fill="none">
  <defs>
    <linearGradient id="gradient-paused" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF5252" />
      <stop offset="100%" stop-color="#D32F2F" />
    </linearGradient>
  </defs>
  <g transform="translate(-1)">
    <g>
      <path d="M504.427,111.44l-1.253-1.254c-11.776-11.776-30.967-11.802-42.814,0.035l-46.089,46.574 c-2.428,2.436-6.312,2.534-8.845,0.203l-64.618-59.657c-6.276-5.8-14.442-8.987-22.996-8.987h-96.124 c-2.269,0-4.44,0.865-6.082,2.419l-81.47,77.356c-11.935,11.944-12.756,31.197-1.818,42.92 c5.844,6.268,13.736,9.719,22.219,9.719h0.15c8.413-0.044,16.499-3.619,22.087-9.728l57.538-60.893h20.595L120.63,300.218H37.81 c-19.633,0-35.778,14.68-36.758,33.421c-0.521,9.79,2.904,19.094,9.64,26.191c6.638,7,15.969,11.008,25.618,11.008h123.586 c2.436,0,4.767-1.006,6.444-2.798l63.32-67.593l53.248,55.684l-16.075,102.735c-4.052,17.02,4.114,34.357,19.412,41.198 c4.714,2.119,9.719,3.178,14.698,3.178c5.358,0,10.69-1.227,15.598-3.655c9.481-4.696,16.296-13.285,18.776-23.967 l27.463-147.306c0.53-2.86-0.38-5.809-2.445-7.865l-73.295-73.198l58.227-58.138l40.589,40.58 c11.335,11.335,31.091,11.335,42.417,0l76.156-76.147c5.623-5.623,8.722-13.109,8.722-21.054 C513.149,124.54,510.05,117.063,504.427,111.44z" fill="url(#gradient-paused)" />
      <path d="M407.065,114.837c29.211,0,52.966-23.755,52.966-52.966c0-29.211-23.755-52.966-52.966-52.966 c-29.21,0-52.966,23.755-52.966,52.966C354.1,91.082,377.855,114.837,407.065,114.837z" fill="url(#gradient-paused)" />
    </g>
  </g>
</svg>

 `;
      background = "linear-gradient(135deg, #FF5252, #D32F2F)";
      label = "Tạm ngừng";
      break;
    case "Hoàn thành":
      gradientId = "gradient-completed";
      svgPath = `
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient-complete" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#42A5F5" />
      <stop offset="100%" stop-color="#1E88E5" />
    </linearGradient>
  </defs>
  <path
    d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM11.5 17.25C11.5 17.61 11.14 17.85 10.81 17.71C9.6 17.19 8.02 16.71 6.92 16.57L6.73 16.55C6.12 16.47 5.62 15.9 5.62 15.28V7.58C5.62 6.81 6.24 6.24 7 6.3C8.25 6.4 10.1 7 11.26 7.66C11.42 7.75 11.5 7.92 11.5 8.09V17.25ZM18.38 15.27C18.38 15.89 17.88 16.46 17.27 16.54L17.06 16.56C15.97 16.71 14.4 17.18 13.19 17.69C12.86 17.83 12.5 17.59 12.5 17.23V8.08C12.5 7.9 12.59 7.73 12.75 7.64C13.91 6.99 15.72 6.41 16.95 6.3H16.99C17.76 6.3 18.38 6.92 18.38 7.69V15.27Z"
    stroke="url(#gradient-complete)"
    fill="none"
    stroke-width="3"
  />
</svg>

`;
      background = "linear-gradient(135deg, #42A5F5, #1E88E5)";
      label = "Hoàn thành";
      break;
  }

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

function formatNumber(number) {
  if (number >= 1000000) {
    return (number / 1000000).toFixed(0) + 'M';  // Remove decimal places for millions
  } else if (number >= 1000) {
    return (number / 1000).toFixed(0) + 'K';  // Remove decimal places for thousands
  } else {
    return number.toString();  // No change for numbers below 1000
  }
}

async function fetchBooksRenamedCL() {
  const loader = document.querySelector('.loader-RenamedCL');
  const scrollButtons = document.querySelectorAll('.scroll-button-RenamedCL');

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

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

      // Lấy trạng thái tiến độ từ API
      const progressStatus = book.tienDo || "Không rõ";
      const soChuong = formatNumber(book.soChuong || 0); // Áp dụng formatNumber
      const luotXem = formatNumber(book.luotXem || 0); // Áp dụng formatNumber
      const luotMoKhoa = formatNumber(book.luotMoKhoa || 0); // Áp dụng formatNumber

      // SVG cho số liệu
      const svgChuong = `<svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class='line' d="M16.1898 2H7.81976C4.17976 2 2.00977 4.17 2.00977 7.81V16.18C2.00977 19.82 4.17976 21.99 7.81976 21.99H16.1898C19.8298 21.99 21.9998 19.82 21.9998 16.18V7.81C21.9998 4.17 19.8298 2 16.1898 2Z" fill="#292D32"></path> <path class='line' d="M11.4991 8.09V17.25C11.4991 17.61 11.1391 17.85 10.8091 17.71C9.59914 17.19 8.01913 16.71 6.91913 16.57L6.72913 16.55C6.11913 16.47 5.61914 15.9 5.61914 15.28V7.57999C5.61914 6.81999 6.23915 6.25 6.99915 6.31C8.24915 6.41 10.0992 7.01001 11.2592 7.67001C11.4092 7.74001 11.4991 7.91 11.4991 8.09Z" fill="#292D32"></path> <path class='line' d="M18.38 7.69983V15.2698C18.38 15.8898 17.88 16.4598 17.27 16.5398L17.06 16.5598C15.97 16.7098 14.4 17.1798 13.19 17.6898C12.86 17.8298 12.5 17.5898 12.5 17.2298V8.0798C12.5 7.8998 12.59 7.72983 12.75 7.63983C13.91 6.98983 15.72 6.4098 16.95 6.2998H16.99C17.76 6.3098 18.38 6.92983 18.38 7.69983Z" fill="#292D32"></path> </g></svg>`;
      const svgLuotXem = `<svg <svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class='line' d="M21.25 9.14993C18.94 5.51993 15.56 3.42993 12 3.42993C10.22 3.42993 8.49 3.94993 6.91 4.91993C5.33 5.89993 3.91 7.32993 2.75 9.14993C1.75 10.7199 1.75 13.2699 2.75 14.8399C5.06 18.4799 8.44 20.5599 12 20.5599C13.78 20.5599 15.51 20.0399 17.09 19.0699C18.67 18.0899 20.09 16.6599 21.25 14.8399C22.25 13.2799 22.25 10.7199 21.25 9.14993ZM12 16.0399C9.76 16.0399 7.96 14.2299 7.96 11.9999C7.96 9.76993 9.76 7.95993 12 7.95993C14.24 7.95993 16.04 9.76993 16.04 11.9999C16.04 14.2299 14.24 16.0399 12 16.0399Z" fill="#292D32"></path> <path class='line' d="M12.0004 9.13989C10.4304 9.13989 9.15039 10.4199 9.15039 11.9999C9.15039 13.5699 10.4304 14.8499 12.0004 14.8499C13.5704 14.8499 14.8604 13.5699 14.8604 11.9999C14.8604 10.4299 13.5704 9.13989 12.0004 9.13989Z" fill="#292D32"></path> </g></svg>`;
      const svgMoKhoa = `<svg <svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class='line' d="M11.9991 17.3501C12.8994 17.3501 13.6291 16.6203 13.6291 15.7201C13.6291 14.8199 12.8994 14.0901 11.9991 14.0901C11.0989 14.0901 10.3691 14.8199 10.3691 15.7201C10.3691 16.6203 11.0989 17.3501 11.9991 17.3501Z" fill="#292D32"></path> <path class='line' d="M16.65 9.43994H7.35C3.25 9.43994 2 10.6899 2 14.7899V16.6499C2 20.7499 3.25 21.9999 7.35 21.9999H16.65C20.75 21.9999 22 20.7499 22 16.6499V14.7899C22 10.6899 20.75 9.43994 16.65 9.43994ZM12 18.7399C10.33 18.7399 8.98 17.3799 8.98 15.7199C8.98 14.0599 10.33 12.6999 12 12.6999C13.67 12.6999 15.02 14.0599 15.02 15.7199C15.02 17.3799 13.67 18.7399 12 18.7399Z" fill="#292D32"></path> <path class='line' d="M7.1207 9.45V8.28C7.1207 5.35 7.9507 3.4 12.0007 3.4C16.3307 3.4 16.8807 5.51 16.8807 7.35C16.8807 7.74 17.1907 8.05 17.5807 8.05C17.9707 8.05 18.2807 7.74 18.2807 7.35C18.2807 3.8 16.1707 2 12.0007 2C6.3707 2 5.7207 5.58 5.7207 8.28V9.53C6.1407 9.48 6.6107 9.45 7.1207 9.45Z" fill="#292D32"></path> </g></svg>`;

      storyContainer.innerHTML = `
        <div class="story-cover-RenamedCL">
          <a href="${book.cotJ}" target="_self">
            <img src="${book.urlBia}" alt="${book.tacPham}">
            ${getRibbonRenamedCL(progressStatus)}
          </a>
        </div>
        <a href="${book.cotJ}" target="_self" class="story-title-RenamedCL">${book.tacPham}</a>
        <div class="story-info-RenamedCL">
          <span>${soChuong} ${svgChuong} ${luotXem} ${svgLuotXem} ${luotMoKhoa} ${svgMoKhoa}</span>
        </div>
      `;
      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
  }
}


fetchBooksRenamedCL();

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



