.line-clamp-1,.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.rank,.spinner{border-radius:50%}.merriweather-black,.merriweather-bold,.merriweather-light,.merriweather-regular,body{font-family:Merriweather,serif;font-style:normal}.dark-mode .grid.grid-cols-1.md\:grid-cols-2.gap-8.p-2.md\:p-6.rounded-lg.shadow-lg,.dark-mode .rounded-md.shadow-lg.p-2,.dark-mode .w-full.md\:col-span-2.rounded-md.shadow-lg.p-2,header{background:#06121e}.bg-gradient-to-b{background:linear-gradient(to bottom,#1a202c,#2d3748)}.bg-gradient-to-t{background:linear-gradient(to top,#a5d8ff,transparent)}.transform{transform-origin:bottom left}.skew-y-6{transform:skewY(-6deg)}.spinner{border-top-color:transparent;border-right-color:transparent;border-width:4px;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{100%{transform:rotate(360deg)}}h3.text-lg.font-semibold.text-gray-500{font-size:15px;font-weight:700}.story-titles{position:absolute;bottom:0;width:100%;text-align:center;background-color:rgba(0,0,0,.7);color:#fff;padding:.2rem}.story-container,.story-containers,.tabs-container{position:relative}hr.dashed-line{margin-top:66px;border-top-width:5px;background:#ff2b2b;border-color:#8800b1}.story-containers{overflow:hidden;height:16rem}.story-containers:hover .story-image{transform:scale(1.1)}.story-container{width:7.7rem;height:11.6rem}.story-image{transition:transform .3s;width:100%;height:100%;object-fit:cover}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2}.line-clamp-1{-webkit-line-clamp:1;line-clamp:1}button.tab-button.w-3.h-3.rounded-full.bg-orange-500{background:#663399}i.fa-brands.fa-bitcoin{color:#ffa400}i.fa-solid.fa-fire{color:red}.story-title{transition:color .3s}.chapter-number,.story-title:hover{color:orange}.elapsed-time,.genre{color:gray}.genre{font-size:smaller}.chapter-container{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #e0e0e0}.left-section{flex:1}.right-section{text-align:right}#topBtn,.mobile-container{display:none}@media (max-width:768px){.table-container{display:none}.mobile-container{display:block}}.rank,.tab-contents,h2.logo{display:flex}.recommended-read,.top-read{display:flex;align-items:center;padding:4px 0}.recommended-read span,.top-read span{margin-right:8px}.rank{align-items:center;justify-content:center;width:24px;height:24px;color:#fff}.rank-1{background-color:#ff4500}.rank-2{background-color:#ff8c00}.rank-3{background-color:orange}.rank-4-10{border:2px solid gray;color:gray}.tab-contents{transition:transform .5s ease-in-out}.tab-content{min-width:100%}.tab-button{width:1rem;height:1rem;border-radius:9999px;background-color:#d1d5db}.tab-button.bg-orange-500,.tabs-nav button.active{background-color:#f97316}main.flex-grow.p-4.max-w-screen-xl.mx-auto{max-width:1120px;color:#dfdfdf}body{--tw-bg-opacity:1;font-size:.875rem;line-height:1.25rem;font-optical-sizing:auto;margin:auto;top:0!important}.merriweather-light{font-weight:300}.merriweather-regular{font-weight:400}.merriweather-bold{font-weight:700}.merriweather-black{font-weight:900}.merriweather-black-italic,.merriweather-bold-italic,.merriweather-light-italic,.merriweather-regular-italic{font-family:Merriweather,serif;font-style:italic}.merriweather-light-italic{font-weight:300}.merriweather-regular-italic{font-weight:400}.merriweather-bold-italic{font-weight:700}.merriweather-black-italic{font-weight:900}#cookieConsent{display:none;position:fixed;bottom:0;left:0;right:0;padding:1rem;background-color:#2d3748;color:#fff;text-align:center;z-index:1000}#cookieConsent button{background-color:#3b82f6;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.375rem;margin-left:1rem;cursor:pointer;transition:background-color .3s ease-in-out}#cookieConsent button:hover{background-color:#2563eb}#mode-toggle{cursor:pointer;width:28px}.logo{font-size:25px;font-family:"Rubik Gemstones",system-ui;background:linear-gradient(90deg,#14e6ff,#ff7f00,#83833d,#0f0,#00f,indigo,#8b00ff);background-size:600% 100%;color:transparent;background-clip:text;animation:10s linear infinite rainbow;padding:1px;font-weight:700}#mobile-search-input{font-size:16px}.light-mode{background:#f0f0f0;color:#000}.dark-mode,main{color:#dfdfdf}.dark-mode{background:#25283d}header{font-weight:600}.text-gray-500{color:#222;}.dark-mode .text-gray-700{color:#969595}.dark-mode main{background:#060d14}.bg-gray-100{background:#f5f5f5}.dark-mode .bg-gray-100{background:#2f25417a}@media (min-width:1024px){.lg\:flex{display:flex;gap:1.2rem}}.group:hover .group-hover\:block{display:block}.group:hover .group-hover\:grid{display:grid}.absolute.hidden.group-hover\:grid.bg-gray-800.text-white.p-4.grid-cols-1.lg\:grid-cols-3.gap-2{width:470px;z-index:100}a.block.hover\:text-orange-400{padding:8px}a.block.hover\:text-orange-400:hover{color:#d2691e}.grid.grid-cols-2.gap-4{background:#1f2937}.absolute.hidden.group-hover\:block.bg-gray-800.text-white.p-4.space-y-2.w-48{z-index:100}.toggle-dot{transition:transform .3s,background-color .3s}.toggle-checked .toggle-dot{transform:translateX(1.5rem)}.toggle-bg{transition:background-color .3s}.toggle-checked .toggle-bg{background-color:#f59e0b}.light-mode .text-gray-500{--tw-text-opacity:1;color:#222}.light-mode .grid.grid-cols-1.md\:grid-cols-2.gap-8.p-2.md\:p-6.rounded-lg.shadow-lg,.light-mode .rounded-md.shadow-lg.p-2,.light-mode .w-full.md\:col-span-2.rounded-md.shadow-lg.p-2{background:#f2e7ee61}.dark-mode .text-gray-500{color:#fff}.text-gray-700{font-size:13px}#google_translate_element img,.goog-te-banner-frame,.goog-te-gadget .VIpgJd-ZVi9od-l4eHX-hSRGPd,.goog-te-gadget-icon,iframe#\:1\.container{display:none!important}select.goog-te-combo{width:117px}.skiptranslate.goog-te-gadget{position:absolute;left:50%;transform:translateX(-50%);top:47px;z-index:1;height:20px}.quangcao{justify-items:center}
/* styles.css - Stylesheet for website */

/* Animation styles */
.rotate-animation {
    animation: rotate 0.5s ease-in-out;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner styles */
.spinner-container {
    width: 100%;
    text-align: center;
}

/* Dark and Light Mode Base Styles */
.light-mode { background: #f0f0f0; color: black; }
.dark-mode { background: #060d14; color: #dfdfdf; }
header { font-weight: 600; background: #06121E; }
.text-gray-500 { color: rgb(0 0 0); }
.dark-mode .text-gray-500 { color: white; }
.text-gray-700 { font-size: 13px; }
.dark-mode .text-gray-700 { color: #969595; }
main { color: #dfdfdf; }
.dark-mode main { background: #060d14; }
.bg-gray-100 { background: #f5f5f5; }
.dark-mode .bg-gray-100 { background: #2f25417a; }
.dark-mode tr.bg-gray-100 { background: #2f25417; }
.light-mode tr.bg-gray-100 { background: #e5e5e5; }
.dark-mode .grid.grid-cols-1.md\:grid-cols-2.gap-8.p-2.md\:p-6.rounded-lg.shadow-lg { background: #06121E; }
.light-mode .grid.grid-cols-1.md\:grid-cols-2.gap-8.p-2.md\:p-6.rounded-lg.shadow-lg { background: #ffffff61; }
.dark-mode .rounded-md.shadow-lg.p-2 { background: #06121E; }
.light-mode .rounded-md.shadow-lg.p-2 { background: #ffffff61; }
.dark-mode .w-full.md\:col-span-2.rounded-md.shadow-lg.p-2 { background: #06121E; }
.light-mode .w-full.md\:col-span-2.rounded-md.shadow-lg.p-2 { background: #dadada61; }
.toggle-dot { transition: transform 0.3s ease, background-color 0.3s ease; }
.toggle-checked .toggle-dot { transform: translateX(1.5rem); }
.toggle-bg { transition: background-color 0.3s ease; }
.toggle-checked .toggle-bg { background-color: #f59e0b; }

/* Sticky header styles */
header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Header transition for mobile */
@media (max-width: 768px) {
    header.sticky.scrolled-down {
        transform: translateY(-100%);
    }
    
    header.sticky.scrolled-up {
        transform: translateY(0);
    }
}