/* ── TinTuc Dark Mode ─────────────────────────────────────── */ /* Activated by adding class="dark" on */ html.dark body { background: #0e0e0e !important; color: #e8e2d8 !important; } /* ── Index page ──────────────────────────────────────────── */ html.dark .tn-section, html.dark .tn-section-inner { background: #0e0e0e !important; } html.dark .tn-hero-card, html.dark .tn-side-card, html.dark .tn-article-card { background: #181818 !important; border-color: rgba(212, 184, 120,0.18) !important; } html.dark .tn-article-card:hover, html.dark .tn-hero-card:hover { border-color: rgba(212, 184, 120,0.45) !important; } html.dark .tn-hero-title, html.dark .tn-hero-title a, html.dark .tn-side-title a, html.dark .tn-article-title, html.dark .tn-section-title { color: #e8e2d8 !important; } html.dark .tn-hero-summary, html.dark .tn-article-excerpt { color: rgba(220,210,190,0.65) !important; } html.dark .tn-cat-tabs { background: #181818 !important; border-color: rgba(212, 184, 120,0.15) !important; } html.dark .tn-cat-btn { color: rgba(220,210,190,0.55) !important; } html.dark .tn-cat-btn:hover, html.dark .tn-cat-btn.active { color: #d4b878 !important; } html.dark .tn-cat-btn.active { border-color: #d4b878 !important; } html.dark .tn-pagination-btn { background: #181818 !important; color: rgba(220,210,190,0.6) !important; border-color: rgba(212, 184, 120,0.2) !important; } html.dark .tn-pagination-btn.active { background: #d4b878 !important; color: #fff !important; } html.dark .tn-pagination-btn:hover:not(.active) { border-color: rgba(212, 184, 120,0.5) !important; color: #d4b878 !important; } /* ── Detail page ─────────────────────────────────────────── */ html.dark .dt-content { color: rgba(220,210,190,0.82) !important; } html.dark .dt-title { color: #e8e2d8 !important; } html.dark .dt-content h2, html.dark .dt-content h3 { color: #e8e2d8 !important; } html.dark .dt-content blockquote { background: rgba(212, 184, 120,0.08) !important; color: rgba(220,210,190,0.7) !important; } html.dark .dt-related { border-color: rgba(212, 184, 120,0.15) !important; } html.dark .dt-related-card { background: #181818 !important; border-color: rgba(212, 184, 120,0.12) !important; } html.dark .dt-related-card:hover { border-color: rgba(212, 184, 120,0.4) !important; } html.dark .dt-related-title2 { color: #e8e2d8 !important; } /* ── Dark mode toggle button ─────────────────────────────── */ .dm-toggle { position: fixed; top: 80px; right: 16px; z-index: 8000; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid rgba(100,70,20,0.2); box-shadow: 0 2px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; backdrop-filter: blur(8px); } html.dark .dm-toggle { background: rgba(30,25,15,0.92); border-color: rgba(212, 184, 120,0.3); } .dm-toggle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); }