<!doctype html>

<style>#story-list-RenamedKD{display:flex;gap:20px;overflow-x:auto;padding:10px 0;scroll-snap-type:x mandatory;justify-content:flex-start;-ms-overflow-style:none;scrollbar-width:none}#story-list-RenamedKD::-webkit-scrollbar{display:none}.story-container-RenamedKD{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(.95);transition:opacity 0.3s ease,transform 0.3s ease;z-index:1}.story-container-RenamedKD.visible{opacity:1;transform:scale(1)}.story-title-RenamedKD{text-align:center;font-size:14px;font-weight:700;color:var(--bodyC);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%;height:40px;line-height:1.2}.story-title-RenamedKD:hover{color:var(--linkB)}.story-cover-RenamedKD{position:relative;width:100%;overflow:hidden;border-radius:10px;z-index:0}.story-cover-RenamedKD img{width:100%;aspect-ratio:2 / 3;object-fit:cover;border-radius:10px;transition:transform 0.3s ease;z-index:0}.story-cover-RenamedKD img:hover{transform:scale(1.1)}.ribbon-RenamedKD{position:absolute;top:-18px;right:0;background:linear-gradient(135deg,#FFA726,#FB8C00);color:#fff;font-size:5px;font-weight:700;text-transform:uppercase;padding:3px 5px 3px 5px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;box-shadow:0 4px 6px rgb(0 0 0 / .3);z-index:1}.ribbon-RenamedKD span{font-size:6px;margin-right:14px;display:block;font-weight:700;transform:translateY(10px)}.circle-RenamedKD{position:absolute;top:-3px;right:-5px;width:22px;height:22px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}.circle-RenamedKD svg{width:12px;height:12px;margin-top:4px;margin-left:-4px}.scroll-button-RenamedKD{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;z-index:10;display:none}.scroll-button-RenamedKD.active{display:block}.scroll-button-RenamedKD.left{left:10px}.scroll-button-RenamedKD.right{right:10px}.scroll-button-RenamedKD svg{width:24px;height:24px;fill:#fff}.scroll-button-RenamedKD:hover svg{fill:#555}.story-info-RenamedKD{display:flex;align-items:center;gap:10px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;max-width:100%}.story-info-RenamedKD::-webkit-scrollbar{display:none}.story-info-RenamedKD span{display:flex;align-items:center}.story-info-RenamedKD svg{width:12px;height:12px;fill:currentColor;margin-right:5px}.story-title-RenamedKD{font-size:16px;font-weight:700}@media (max-width:1024px){.scroll-button-RenamedKD.active{display:none}}.loader-RenamedKD{display:none;border:4px solid rgb(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-RenamedKD"></div> <!-- Loader -->
  <div id="story-list-RenamedKD"></div>
  <button class="scroll-button-RenamedKD left" onclick="scrollStoryListRenamedKD('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-RenamedKD right" onclick="scrollStoryListRenamedKD('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 apiUrlRenamedKD="https://firestore.googleapis.com/v1/projects/kunsnovel-admin/databases/(default)/documents/the-loai/Kinh dị";function getRibbonRenamedKD(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>

        `;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;default:gradientId="gradient-default";svgPath=``;background="#e0e0e0";label="oneshot";break}
return `
      <div class="ribbon-RenamedKD" style="background: ${background};">
        <span>${label}</span>
      </div>
      <div class="circle-RenamedKD">
        ${svgPath}
      </div>
    `}
async function fetchBooksRenamedKD(){const loader=document.querySelector(".loader-RenamedKD");const scrollButtons=document.querySelectorAll(".scroll-button-RenamedKD");try{loader.style.display="block";const response=await fetch(apiUrlRenamedKD);const data=await response.json();const pages=data.fields;const books=Object.values(pages).map((page)=>{const fields=page.mapValue.fields;return{urlBia:fields["Url bìa"].stringValue,tacPham:fields["Tác phẩm"].stringValue,linkTacPham:fields["Link tác phẩm"].stringValue,tienDo:fields["Tiến độ"]?.stringValue||null,}}).filter((book)=>book.tienDo!==null&&getRibbonRenamedKD(book.tienDo));const storyList=document.getElementById("story-list-RenamedKD");storyList.innerHTML="";books.forEach((book)=>{const storyContainer=document.createElement("div");storyContainer.className="story-container-RenamedKD visible";storyContainer.innerHTML=`
        <div class="story-cover-RenamedKD">
          <a href="${book.linkTacPham}" target="_self">
            <img src="${book.urlBia}" alt="${book.tacPham}">
            ${getRibbonRenamedKD(book.tienDo)}
          </a>
        </div>
        <a href="${book.linkTacPham}" target="_self" class="story-title-RenamedKD">${book.tacPham}</a>
      `;storyList.appendChild(storyContainer)});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"}}
fetchBooksRenamedKD();</script>
</!doctype>