<!doctype html>

<style>

.tab-content-BXH {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 10px;
}

.section-BXH {
    display: block;
}

.title-BXH {
  font-size: 14px;
  font-weight: bold;
  color: var(--bodyC);
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis;
  line-height: 1.2;
}

@media (max-width: 400px) {
    .tab-content-BXH {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
    }

    .section-BXH {
        flex: 0 0 100%;
        scroll-snap-align: start;
        box-sizing: border-box;
    }
}

.story-BXH {
    margin: 10px 0;
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: 20px 100px 1fr;
    gap: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.story-BXH img {
    width: 120px;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    object-fit: cover;
}

.story-BXH .details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.story-BXH .title {
    font-size: 18px;
    font-weight: bold;
}

.story-BXH .author,
.story-BXH .genre,
.story-BXH .views,
.story-BXH .chapters,
.story-BXH .unlock {
    font-size: 14px;
}

.ranking {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking svg {
    width: 28px;
    height: 28px;
}

.img-container {
    position: relative;
    width: 100px;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.img-container img:hover {
    transform: scale(1.1);
    z-index: 1;
}

        .ribbon-BXH {
 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-BXH span {
    font-size: 8px;
    margin-right: 13px;
    display: block;
    font-weight: bold;
        }

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

.loader-BXH {
    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); }
}

.views, .unlock, .chapters {
    display: inline-flex;
    align-items: center;
}

.views svg, .unlock svg, .chapters svg {
    width: 15px; 
    height: 15px;
    margin-left: 6px; 
}
    </style>



<div class="loader-BXH"></div>
<!-- Tab Content -->
<div class="tab-content-BXH">
    <!-- Lượt Xem section-BXH -->
    <div id="luotXemSection" class="section-BXH active">
        <label for="luotXemList" style="display: flex; align-items: center; justify-content: flex-start; font-size: 16px; font-weight: bold; text-align: left; width: 100%; margin: 0 auto; color: var(--darkTa);">
            Lượt xem nhiều nhất
        </label><br /><br />
        <div id="luotXemList"></div>
    </div>

    <!-- Mở Khóa section-BXH -->
    <div id="moKhoaSection" class="section-BXH">
        <label for="moKhoaList" style="display: flex; align-items: center; justify-content: flex-start; font-size: 16px; font-weight: bold; text-align: left; width: 100%; margin: 0 auto; color: var(--darkTa);">
           Mở khóa nhiều nhất
        </label> <br /><br />
        <div id="moKhoaList"></div>
    </div>

    <!-- Số Chương section-BXH (Now third) -->
    <div id="soChuongSection" class="section-BXH">
        <label for="soChuongList" style="display: flex; align-items: center; justify-content: flex-start; font-size: 16px; font-weight: bold; text-align: left; width: 100%; margin: 0 auto; color: var(--darkTa);">
            Số chương nhiều nhất
        </label><br /><br />
        <div id="soChuongList"></div>
    </div>
</div>

    <script>
const apiUrl = 'https://script.google.com/macros/s/AKfycbxo2ps4MkecKr_Qj9P5NOHvGVOLF6gW_HsP5TOy7ka2H7Cg5lQ3pRlZiKz5N6TYk_D1/exec';

async function fetchData() {
    // Show the loader and hide the labels before the request starts
    document.querySelector('.loader-BXH').style.display = 'block';
    
    // Hide all labels
    const labels = document.querySelectorAll('.tab-content-BXH label');
    labels.forEach(label => {
        label.style.display = 'none';
    });

    try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        // Process your data here
        console.log(data);

        // Hide the loader after data is loaded and show the labels again
        document.querySelector('.loader-BXH').style.display = 'none';

        // Show all labels again
        labels.forEach(label => {
            label.style.display = 'block';
        });

        return data;
    } catch (error) {
        console.error('Error fetching data:', error);

        // Hide the loader and show the labels if an error occurs
        document.querySelector('.loader-BXH').style.display = 'none';

        // Show all labels again in case of an error
        labels.forEach(label => {
            label.style.display = 'block';
        });
    }
}


function renderStoryList(elementId, data, showFields) {
    const container = document.getElementById(elementId);
    container.innerHTML = '';

    const top5Stories = data.slice(0, 3);

    top5Stories.forEach((item, index) => {
        const storyDiv = document.createElement('div');
        storyDiv.classList.add('story-BXH');

        let rankingSVG = '';
        switch (index) {
            case 0:
                rankingSVG = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Flat"> <g id="Color"> <polygon fill="#212529" points="22.94 30.38 35.06 37.38 21.06 61.62 18 52.93 8.94 54.62 22.94 30.38"></polygon> <path d="M22.94,30.38l-5.61,9.71c1.14,2.23,4,2.84,6.17,2.75a7.85,7.85,0,0,1,2.15.21c1.48.6,2.87,2.1,4.61,2.64l4.8-8.31Z" fill="#111315"></path> <polygon fill="#212529" points="41.06 30.38 28.94 37.38 42.94 61.62 46 52.93 55.06 54.62 41.06 30.38"></polygon> <path d="M41.06,30.38l-12.12,7,4.8,8.31c1.74-.54,3.13-2,4.61-2.64a7.89,7.89,0,0,1,2.15-.21c2.16.09,5-.53,6.17-2.75Z" fill="#111315"></path> <polygon fill="#dd051d" points="31.58 35.37 19.31 56.65 18 52.93 14.11 53.66 26.4 32.38 31.58 35.37"></polygon> <polygon fill="#dd051d" points="49.9 53.66 46 52.93 44.69 56.66 32.42 35.37 37.6 32.38 49.9 53.66"></polygon> <path d="M37.6,32.38l-5.18,3,4.79,8.3c1.78-1.39,4.12-.49,6.25-1.14Z" fill="#a60416"></path> <path d="M26.4,32.38,20.54,42.53c2.13.65,4.47-.25,6.25,1.14l4.79-8.3Z" fill="#a60416"></path> <path d="M50.55,23.5c0-2.11,1.57-4.44,1-6.34S48.2,14.24,47,12.6s-1.3-4.48-3-5.69-4.35-.42-6.32-1S34.11,3,32,3s-3.83,2.24-5.73,2.86-4.68-.14-6.32,1-1.75,4-3,5.69-3.85,2.59-4.49,4.56.95,4.23.95,6.34-1.57,4.44-.95,6.34S15.8,32.76,17,34.4s1.3,4.48,3,5.69,4.35.42,6.32,1S29.89,44,32,44s3.83-2.24,5.73-2.86,4.68.14,6.32-1,1.75-4,3-5.69,3.85-2.59,4.49-4.56S50.55,25.61,50.55,23.5Z" fill="#fccd1d"></path> <circle cx="32" cy="23.5" fill="#f9a215" r="14.5"></circle> <path d="M33.37,16l1.52,2.63a1.54,1.54,0,0,0,1.06.76L39,20a1.53,1.53,0,0,1,.85,2.56l-2.1,2.22a1.5,1.5,0,0,0-.4,1.22l.36,3a1.57,1.57,0,0,1-2.22,1.58l-2.81-1.27a1.6,1.6,0,0,0-1.32,0l-2.81,1.27A1.57,1.57,0,0,1,26.31,29l.36-3a1.5,1.5,0,0,0-.4-1.22l-2.1-2.22A1.53,1.53,0,0,1,25,20l3-.59a1.54,1.54,0,0,0,1.06-.76L30.63,16A1.59,1.59,0,0,1,33.37,16Z" fill="#fccd1d"></path> </g> </g> </g></svg>`;
                break;
            case 1:
                rankingSVG = `
                  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Flat"> <g id="Color"> <polygon fill="#212529" points="8.26 3 25.94 33.62 38.06 26.62 24.42 3 8.26 3"></polygon> <path d="M38.06,26.62l-7.21-12.5-3.72,6.44a21.53,21.53,0,0,0-7,3l5.8,10Z" fill="#111315"></path> <polygon fill="#dd051d" points="34.6 28.62 29.4 31.62 12.87 3 19.8 3 34.6 28.62"></polygon> <polygon fill="#212529" points="39.58 3 25.94 26.62 38.06 33.62 55.74 3 39.58 3"></polygon> <path d="M34.6,28.62l-6.06-10.5-1.42,2.46a21.44,21.44,0,0,0-3.46,1.1l5.74,9.94Z" fill="#a60416"></path> <path d="M43.86,23.58a21.46,21.46,0,0,0-14.17-3.45l-3.75,6.49,12.12,7Z" fill="#111315"></path> <polygon fill="#dd051d" points="51.13 3 34.6 31.62 29.4 28.62 44.2 3 51.13 3"></polygon> <path d="M34.6,31.62l5.74-9.94a21.41,21.41,0,0,0-6-1.55L29.4,28.62Z" fill="#a60416"></path> <circle cx="32" cy="41.5" fill="#fccd1d" r="19.5"></circle> <circle cx="32" cy="41.5" fill="#f9a215" r="14.5"></circle> <path d="M33.88,33.57a6.49,6.49,0,0,0-5.81,1.23,6.41,6.41,0,0,0-2.21,4.89H30c0-2.24,3.37-2.38,4-1,1,2.1-8,7-8,7v4H38v-4H34a7.07,7.07,0,0,0,4-7.54A6.16,6.16,0,0,0,33.88,33.57Z" fill="#fccd1d"></path> </g> </g> </g></svg>`;
                break;
            
                        case 2:
                rankingSVG = `
 <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Flat"> <g id="Color"> <polygon fill="#212529" points="45 17 32 25 19 17 19 3 45 3 45 17"></polygon> <polygon fill="#dd051d" points="40 3 40 20.08 32 25 24 20.08 24 3 40 3"></polygon> <path d="M32,25l6.49-4a21.36,21.36,0,0,0-13,0Z" fill="#a60416"></path> <circle cx="32" cy="41.5" fill="#fccd1d" r="19.5"></circle> <circle cx="32" cy="41.5" fill="#f9a215" r="14.5"></circle> <path d="M36.54,41.5A4.52,4.52,0,0,0,38.38,38c0-2.76-2.86-5-6.38-5s-6.37,2.24-6.37,5h3.92a2,2,0,0,1,3.9-.29c.17,1.23-.77,2.73-2,2.73v2.12c2.22,0,2.84,3.5.72,4.32A2,2,0,0,1,29.55,45H25.63c0,2.76,2.85,5,6.37,5s6.38-2.24,6.38-5A4.52,4.52,0,0,0,36.54,41.5Z" fill="#fccd1d"></path> </g> </g> </g></svg>`;
                break;
                default:
                rankingSVG = `
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="12" fill="#ccc" />
                        <text x="12" y="16" text-anchor="middle" font-size="12" fill="white">${index + 1}</text>
                    </svg> `;
                break;
        }

        let content = `<div class="ranking">${rankingSVG}</div>`;
        content += `
            <div class="img-container">
                    <a href="${item.cotJ}" target="_self">
                <img src="${item.urlBia}" alt="${item.tacPham}">
                </a>
        `;

        // Xử lý tiến độ
        let gradientId, svgPath, background, label;
        switch (item.tienDo) {
            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;
        }

        // Thêm Ribbon và Vòng tròn vào bìa
        content += `
            <div class="ribbon-BXH" style="background: ${background}">
                <span>${label}</span>
            </div>
            <div class="circle-BXH">
                ${svgPath}
            </div>
        </div>
        `;

content += `<div class="details">`;

if (showFields.includes('tacPham')) content += `<div class="title-BXH"><b>${item.tacPham}</b></div>`;
if (showFields.includes('tacGia')) {
    content += `
    <div class="author" style="color: var(--darkTa);">
        ${item.tacGia}
    </div>`;
}
if (showFields.includes('theLoai')) content += `
    <div class="genre" style="display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;">
        ${item.theLoai.split(',').slice(0, 3).map(genre => `
            <span style="
                font-style: italic; 
                font-size: 11px;
                display: inline-block;
                color: var(--darkTa);
            ">${genre.trim()}</span>
        `).join('')}
    </div>`;


if (showFields.includes('luotXem')) content += `
    <div class="views" style="display: inline-flex; align-items: center;">
     ${item.luotXem} <svg <svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg style="margin-left: 8px;"><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>
      
    </div>`;
if (showFields.includes('soChuong')) content += `
    <div class="chapters" style="display: inline-flex; align-items: center;">  ${item.soChuong} <svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg style="margin-left: 8px;"><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>
    </div>`;
if (showFields.includes('luotMoKhoa')) content += `
    <div class="unlock" style="display: inline-flex; align-items: center;">
${item.luotMoKhoa} <svg <svg class='c' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg style="margin-left: 8px;"><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>  </div>`;

storyDiv.innerHTML = content;
container.appendChild(storyDiv);



    });
}


        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        async function displayData() {
            const data = await fetchData();

            const luotXemData = [...data].sort((a, b) => b.luotXem - a.luotXem);
            const soChuongData = [...data].sort((a, b) => b.soChuong - a.soChuong);
            const moKhoaData = [...data].sort((a, b) => b.luotMoKhoa - a.luotMoKhoa);

            renderStoryList('luotXemList', luotXemData, ['tacPham', 'tacGia', 'theLoai', 'luotXem', 'urlBia', 'tienDo']);
            renderStoryList('soChuongList', soChuongData, ['tacPham', 'tacGia', 'theLoai', 'soChuong', 'urlBia', 'tienDo']);
            renderStoryList('moKhoaList', moKhoaData, ['tacPham', 'tacGia', 'theLoai', 'luotMoKhoa', 'urlBia', 'tienDo']);
        }

        displayData();
    </script>

</!doctype>



