/* ============================================================
   MOÈ ĐEN THÍCH NGỦ - PR HUB & ALLIN.VN (BLACK & PINK AESTHETIC)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Lora:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  --bg-main: #0c0a12;
  --bg-surface: #14111f;
  --bg-card: #1a1628;
  --bg-card-hover: #221d33;
  --border-subtle: rgba(255, 107, 157, 0.15);
  --border-highlight: rgba(255, 64, 129, 0.4);
  
  --pink-primary: #ff4081;
  --pink-bright: #ff659b;
  --pink-light: #ff85b3;
  --pink-glow: rgba(255, 64, 129, 0.35);
  --pink-soft-bg: rgba(255, 64, 129, 0.1);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-pink: #ff80ab;

  --badge-gold: #fbbf24;
  --badge-green: #34d399;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(255, 64, 129, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 65%, rgba(147, 51, 234, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255, 64, 129, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .font-heading, .font-title {
  font-family: 'Lora', Georgia, serif;
  letter-spacing: -0.01em;
}

.story-excerpt {
  font-family: 'Lora', Georgia, serif;
}

/* Custom Cute Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #2a2238;
  border-radius: 9999px;
  border: 2px solid var(--bg-main);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pink-primary);
}

/* 2:3 Strict Aspect Ratio for Novel Covers */
.cover-ratio-2-3 {
  aspect-ratio: 2 / 3 !important;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Glassmorphism Surface */
.glass-panel {
  background: rgba(22, 18, 33, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
}

.glass-panel-glow {
  background: rgba(24, 19, 36, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-highlight);
  box-shadow: 0 8px 32px -4px var(--pink-glow);
  border-radius: 20px;
}

/* Pink Neon Glow */
.pink-neon-text {
  color: var(--pink-light);
  text-shadow: 0 0 16px rgba(255, 64, 129, 0.5);
}

.pink-glow-border {
  border-color: var(--pink-primary);
  box-shadow: 0 0 15px rgba(255, 64, 129, 0.3);
}

/* Floating Black Cat Sleep Animations */
@keyframes catBreathe {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.015);
  }
}

@keyframes zzzFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(18px, -24px) scale(1.15);
  }
}

.cat-breathe-anim {
  animation: catBreathe 4s ease-in-out infinite;
}

.zzz-anim {
  animation: zzzFloat 2.8s ease-in-out infinite;
}

/* Floating Action Button for Zalo Refund */
.floating-zalo-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ff4081 0%, #d81b60 100%);
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 64, 129, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.floating-zalo-btn:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 36px rgba(255, 64, 129, 0.6);
  color: #fff;
}

/* Pulse badge */
.pulse-circle {
  position: relative;
}
.pulse-circle::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.7;
  animation: pulsePing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulsePing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Cute tag pills */
.dammy-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  background: rgba(255, 64, 129, 0.12);
  color: #ff94ba;
  border: 1px solid rgba(255, 64, 129, 0.25);
  transition: all 0.2s ease;
}

.dammy-tag:hover {
  background: rgba(255, 64, 129, 0.25);
  color: #fff;
  border-color: rgba(255, 64, 129, 0.5);
}

/* Modal styles */
.modal-overlay {
  background: rgba(7, 5, 12, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Modal mobile optimizations */
.modal-scroll-area {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-bottom-bar {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
}

/* Hide Netlify badge & third-party floating overlays that block mobile controls */
#netlify-badge,
.netlify-badge,
[data-netlify-badge],
div[class*="netlify-badge"],
a[href*="netlify.com"]:has(svg),
a[href*="netlify.com"]:not(footer a) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Story card hover effects */
.story-card {
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(255, 107, 157, 0.12);
}

.story-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 64, 129, 0.45);
  box-shadow: 0 16px 36px -8px rgba(255, 64, 129, 0.25);
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .floating-zalo-btn {
    bottom: 18px;
    right: 18px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ============================================================
   ANTI-COPY PROTECTION (Chống copy truyện & văn án)
   Chỉ cho phép copy phần Giới thiệu đầu trang và Đặc quyền độc giả
   ============================================================ */
#stories-grid,
#story-modal,
.modal-synopsis-box,
.no-copy {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Explicitly allowed copy areas */
#bio-header,
#refund-section,
.allow-copy {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Refund section scroll highlight effect */
@keyframes refundHighlightPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7); }
  50% { transform: scale(1.015); box-shadow: 0 0 30px 10px rgba(255, 64, 129, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 64, 129, 0); }
}

.refund-highlight-anim {
  animation: refundHighlightPulse 1.8s ease-in-out;
}

/* ============================================================
   SORTABLE DRAG & DROP STYLES (Trang Quản Trị)
   ============================================================ */
.sortable-ghost {
  opacity: 0.3 !important;
  background: rgba(255, 64, 129, 0.1) !important;
  border: 2px dashed #ff4081 !important;
}

.sortable-chosen {
  background: #251c38 !important;
  border-color: #ff4081 !important;
  box-shadow: 0 12px 30px -5px rgba(255, 64, 129, 0.45) !important;
  transform: scale(1.01);
}

.sortable-drag {
  opacity: 0.95 !important;
  cursor: grabbing !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.8) !important;
}

/* ============================================================
   PAGINATION STYLES (Phân trang danh sách truyện)
   ============================================================ */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #181426;
  color: #cbd5e1;
  user-select: none;
}

.pagination-btn:hover:not(:disabled) {
  border-color: rgba(255, 64, 129, 0.5);
  background: #231c36;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(255, 64, 129, 0.25);
}

.pagination-btn.active {
  background: linear-gradient(135deg, #ff4081 0%, #d81b60 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(255, 64, 129, 0.4);
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   LIGHT MODE REDESIGN (Giao diện Sáng - Soft Pastel Pink & Cream)
   ============================================================ */

/* 1. Page Background & Ambient Blobs */
html.light,
html.light body {
  background-color: #fff6f9 !important;
  color: #24142d !important;
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(255, 107, 157, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 88% 60%, rgba(244, 114, 182, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 50% 92%, rgba(255, 182, 193, 0.18) 0%, transparent 50%) !important;
}

/* 2. Glassmorphism Panels (Hero, Refund, etc.) */
html.light .glass-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 107, 157, 0.28) !important;
  box-shadow: 0 12px 35px -8px rgba(255, 107, 157, 0.14) !important;
}

/* 3. Hero Section Elements */
html.light #bio-header {
  border-color: rgba(255, 107, 157, 0.3) !important;
  box-shadow: 0 14px 40px -10px rgba(255, 107, 157, 0.16) !important;
}

/* Sleeping black cat mascot ambient glow in light mode */
html.light #bio-header > div:first-child,
html.light #bio-header .pointer-events-none {
  background: radial-gradient(circle, rgba(255, 64, 129, 0.22) 0%, rgba(255, 182, 193, 0.12) 60%, transparent 80%) !important;
}

/* Sleeping status pill */
html.light #status-badge {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  color: #c2185b !important;
}

/* Owner Name & Role */
html.light #owner-name {
  color: #22122b !important;
}
html.light #owner-role {
  color: #d81b60 !important;
}
html.light #owner-bio {
  color: #4a3a54 !important;
}

/* Bio Header 2x2 Action Buttons in Light Mode */
html.light #link-zalo {
  background: linear-gradient(to right, #ff4081, #d81b60) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 64, 129, 0.25) !important;
}
html.light #link-zalo svg {
  color: #ffffff !important;
}

html.light #btn-scroll-refund,
html.light button[onclick="scrollToRefundPolicy()"] {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  color: #c2185b !important;
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.08) !important;
}
html.light #btn-scroll-refund:hover,
html.light button[onclick="scrollToRefundPolicy()"]:hover {
  background-color: #ffdce8 !important;
  color: #ad1457 !important;
  border-color: #ff4081 !important;
}
html.light #btn-scroll-refund svg {
  color: #d81b60 !important;
}

html.light #link-allin {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.3) !important;
  color: #24142d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html.light #link-allin:hover {
  background-color: #fff2f7 !important;
  border-color: #ff4081 !important;
}
html.light #link-allin svg {
  color: #d81b60 !important;
}

html.light #link-fb {
  background-color: #ffffff !important;
  border-color: rgba(24, 119, 242, 0.3) !important;
  color: #24142d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html.light #link-fb:hover {
  background-color: #f0f6ff !important;
  border-color: #1877F2 !important;
}
html.light #link-fb svg {
  color: #1877F2 !important;
}

/* Theme toggle button */
html.light #theme-toggle-btn {
  background-color: #ffffff !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  color: #24142d !important;
  box-shadow: 0 4px 16px rgba(255, 64, 129, 0.15) !important;
}
html.light #theme-toggle-btn:hover {
  background-color: #fff0f5 !important;
  border-color: #ff4081 !important;
}
html.light #theme-toggle-icon {
  background: transparent !important;
  border: none !important;
}
html.light #theme-toggle-icon svg {
  color: #d97706 !important;
}
html.light #theme-toggle-text {
  color: #24142d !important;
}

/* 4. Story Catalog Section */
html.light #story-catalog h2 {
  color: #22122b !important;
}
html.light #story-catalog p.text-slate-400 {
  color: #6b5974 !important;
}
html.light #story-catalog span.text-slate-400 {
  color: #6b5974 !important;
}

/* Category Tabs (Thường vs Sắc) */
html.light #category-tabs-container {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.28) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.08) !important;
}
html.light #tab-story-thuong:not(.bg-gradient-to-r),
html.light #tab-story-sac:not(.bg-gradient-to-r),
html.light #tab-story-thuong.bg-\[\#1c182b\],
html.light #tab-story-sac.bg-\[\#1c182b\] {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.28) !important;
  color: #5c4a67 !important;
}
html.light #tab-story-thuong:not(.bg-gradient-to-r) span,
html.light #tab-story-sac:not(.bg-gradient-to-r) span {
  color: #5c4a67 !important;
}
html.light #tab-story-thuong:not(.bg-gradient-to-r) svg,
html.light #tab-story-thuong.bg-\[\#1c182b\] svg {
  color: #d81b60 !important;
}
html.light #tab-story-sac:not(.bg-gradient-to-r) svg,
html.light #tab-story-sac.bg-\[\#1c182b\] svg {
  color: #e11d48 !important; /* rich vibrant rose flame */
}
html.light #tab-story-thuong:not(.bg-gradient-to-r):hover,
html.light #tab-story-sac:not(.bg-gradient-to-r):hover,
html.light #tab-story-thuong.bg-\[\#1c182b\]:hover,
html.light #tab-story-sac.bg-\[\#1c182b\]:hover {
  background-color: #fff0f5 !important;
  color: #d81b60 !important;
  border-color: #ff4081 !important;
}
html.light #tab-story-thuong:not(.bg-gradient-to-r):hover span,
html.light #tab-story-sac:not(.bg-gradient-to-r):hover span {
  color: #d81b60 !important;
}

/* Search bar */
html.light #story-search-input {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.35) !important;
  color: #22122b !important;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.06) !important;
}
html.light #story-search-input::placeholder {
  color: #9e8b9f !important;
}
html.light #story-search-input:focus {
  border-color: #ff4081 !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.18) !important;
}
html.light #story-catalog .relative svg[data-lucide="search"],
html.light #story-catalog .relative svg.lucide-search {
  color: #d81b60 !important;
}
html.light #story-search-clear {
  background-color: #ffeef5 !important;
  color: #d81b60 !important;
  border: 1px solid rgba(255, 107, 157, 0.35) !important;
}
html.light #story-search-clear:hover {
  background-color: #ff4081 !important;
  color: #ffffff !important;
}
html.light #story-search-clear svg {
  color: #d81b60 !important;
}
html.light #story-search-clear:hover svg {
  color: #ffffff !important;
}

/* Sort & Filter Pills in Light Mode */
html.light #sort-filter-completed:not(.bg-gradient-to-r),
html.light #sort-filter-ongoing:not(.bg-gradient-to-r),
html.light #sort-filter-de-cu:not(.bg-gradient-to-r),
html.light #sort-filter-completed.bg-\[\#181426\],
html.light #sort-filter-ongoing.bg-\[\#181426\],
html.light #sort-filter-de-cu.bg-\[\#181426\],
html.light button.bg-\[\#181426\] {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.28) !important;
  color: #4a3854 !important;
  box-shadow: 0 2px 6px rgba(255, 107, 157, 0.06) !important;
}
html.light #sort-filter-completed:not(.bg-gradient-to-r) span,
html.light #sort-filter-ongoing:not(.bg-gradient-to-r) span,
html.light #sort-filter-de-cu:not(.bg-gradient-to-r) span {
  color: #4a3854 !important;
}
html.light #sort-filter-completed:not(.bg-gradient-to-r):hover,
html.light #sort-filter-ongoing:not(.bg-gradient-to-r):hover,
html.light #sort-filter-de-cu:not(.bg-gradient-to-r):hover,
html.light button.bg-\[\#181426\]:hover {
  background-color: #fff0f5 !important;
  color: #d81b60 !important;
  border-color: #ff4081 !important;
}
html.light #sort-filter-completed:not(.bg-gradient-to-r):hover span,
html.light #sort-filter-ongoing:not(.bg-gradient-to-r):hover span,
html.light #sort-filter-de-cu:not(.bg-gradient-to-r):hover span {
  color: #d81b60 !important;
}

/* Inactive sort & filter icons in Light Mode - high contrast & vibrant */
html.light #sort-filter-de-cu:not(.bg-gradient-to-r) svg {
  color: #d97706 !important; /* amber-600 */
}
html.light #sort-filter-completed:not(.bg-gradient-to-r) svg {
  color: #059669 !important; /* emerald-600 */
}
html.light #sort-filter-ongoing:not(.bg-gradient-to-r) svg {
  color: #d81b60 !important; /* pink-600 */
}
html.light #sort-filter-de-cu.bg-gradient-to-r svg {
  color: #fef08a !important; /* amber-200 */
}
html.light #sort-filter-completed.bg-gradient-to-r svg,
html.light #sort-filter-ongoing.bg-gradient-to-r svg {
  color: #ffffff !important;
}

/* 5. Story Cards */
html.light .story-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 4px 18px -2px rgba(255, 107, 157, 0.1) !important;
}
html.light .story-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 64, 129, 0.5) !important;
  box-shadow: 0 16px 36px -6px rgba(255, 64, 129, 0.2) !important;
}

/* Remove black gradient overlay on story covers in light mode so covers are 100% bright and clear */
html.light .cover-gradient-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Light mode story cover container - crisp white background, cute pink border */
html.light .story-cover-wrap,
html.light .modal-cover-wrap,
html.light .story-card .w-28,
html.light .story-card .xs\:w-32,
html.light .story-card .sm\:w-full {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 4px 14px rgba(255, 107, 157, 0.12) !important;
}

/* Vivid, crisp cover image in light mode without any darkening or artificial filter */
html.light .story-card img.cover-ratio-2-3,
html.light .modal-cover-wrap img.cover-ratio-2-3 {
  filter: none !important;
  opacity: 1 !important;
}

/* Chapter count badge on light mode cover - solid crisp white badge without blurring */
html.light .chapter-count-badge {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #d81b60 !important;
  border: 1px solid rgba(255, 107, 157, 0.4) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 700 !important;
}

/* Cover status badges, crown badges, and new badges - ALWAYS pure crisp white text */
.story-cover-wrap .absolute span:not(.chapter-count-badge),
.modal-cover-wrap .absolute span,
.status-badge,
.crown-badge,
.new-badge,
html.light .story-cover-wrap .absolute span:not(.chapter-count-badge),
html.light .modal-cover-wrap .absolute span,
html.light .status-badge,
html.light .crown-badge,
html.light .new-badge,
html.light button.bg-gradient-to-r,
html.light a.bg-gradient-to-r {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Enhanced badge backgrounds in Light Mode for high contrast and vibrancy */
html.light .status-badge-full,
html.light .bg-emerald-600 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3) !important;
}
html.light .status-badge-ongoing,
html.light .bg-gradient-to-r.from-\[\#ff4081\] {
  background: linear-gradient(135deg, #ff4081 0%, #d81b60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 6px rgba(216, 27, 96, 0.3) !important;
}
html.light .status-badge-coming,
html.light .bg-amber-600 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid rgba(254, 240, 138, 0.5) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
}
html.light .crown-badge,
html.light .bg-gradient-to-r.from-amber-500 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid rgba(254, 240, 138, 0.5) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
}
html.light .new-badge,
html.light .bg-rose-600 {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3) !important;
}

/* Story tags container layout constraint - Strictly max 2 rows */
.story-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 52px;
  overflow: hidden;
  align-content: flex-start;
}
@media (min-width: 640px) {
  .story-tags-container {
    max-height: 56px;
    gap: 5px;
  }
}

/* Story Title */
html.light .story-card h3 {
  color: #22122b !important;
}
html.light .story-card h3:hover {
  color: #ff4081 !important;
}

/* Author */
html.light .story-card .text-slate-300,
html.light .story-card span.text-slate-300 {
  color: #6b5974 !important;
}

/* Story card divider */
html.light .story-card .border-t {
  border-color: rgba(255, 107, 157, 0.2) !important;
}

/* CP Box */
html.light .story-card .p-2.rounded-lg,
html.light .story-cp-box {
  background-color: #fff2f7 !important;
  border-color: rgba(255, 107, 157, 0.3) !important;
}
html.light .story-cp-box .text-pink-400,
html.light .story-card .text-pink-400 {
  color: #d81b60 !important;
}
html.light .story-cp-box span:last-child,
html.light .story-card .line-clamp-2 {
  color: #3d2a4a !important;
}

/* Tags */
html.light .dammy-tag {
  background-color: #ffe8f1 !important;
  color: #d81b60 !important;
  border-color: #ffccd9 !important;
}
html.light .dammy-tag:hover {
  background-color: #ff4081 !important;
  color: #ffffff !important;
}

/* Short Excerpt in Story Card */
html.light .story-card p.italic,
html.light .story-excerpt {
  color: #665573 !important;
}

/* Refund Note Bar */
html.light .story-refund-bar,
html.light .story-card .bg-\[\#ff4081\]\/10 {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 64, 129, 0.25) !important;
  color: #c2185b !important;
}
html.light .story-refund-bar span {
  color: #c2185b !important;
  font-weight: 600 !important;
}

/* Card Action Buttons */
html.light .story-card button.bg-\[\#231e36\],
html.light .btn-synopsis {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  color: #d81b60 !important;
}
html.light .btn-synopsis span {
  color: #d81b60 !important;
}
html.light .story-card button.bg-\[\#231e36\]:hover,
html.light .btn-synopsis:hover {
  background-color: #ff4081 !important;
  color: #ffffff !important;
}
html.light .btn-synopsis:hover span {
  color: #ffffff !important;
}

/* Empty Search / No stories state */
html.light #stories-grid .col-span-full {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 107, 157, 0.28) !important;
  box-shadow: 0 8px 24px -4px rgba(255, 107, 157, 0.12) !important;
  color: #5c4a67 !important;
}
html.light #stories-grid .col-span-full p.text-white,
html.light #stories-grid .col-span-full .text-white {
  color: #22122b !important;
}
html.light #stories-grid .col-span-full p.text-slate-400,
html.light #stories-grid .col-span-full .text-slate-400 {
  color: #6b5974 !important;
}
html.light #stories-grid .col-span-full p.text-slate-500,
html.light #stories-grid .col-span-full .text-slate-500 {
  color: #8c7994 !important;
}
html.light #stories-grid .col-span-full .bg-white\/5 {
  background-color: #fff0f5 !important;
  color: #d81b60 !important;
}
html.light #stories-grid .col-span-full .bg-\[\#ff4081\]\/15 {
  background-color: #ffe4ee !important;
  color: #d81b60 !important;
}

/* 6. Pagination */
html.light #stories-pagination > div {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.3) !important;
  box-shadow: 0 6px 20px -4px rgba(255, 107, 157, 0.12) !important;
}
html.light .pagination-btn {
  background-color: #ffffff !important;
  color: #5c4a67 !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
}
html.light .pagination-btn:hover:not(:disabled) {
  background-color: #fff0f5 !important;
  border-color: #ff4081 !important;
  color: #d81b60 !important;
}
html.light .pagination-btn.active {
  background: linear-gradient(135deg, #ff4081 0%, #d81b60 100%) !important;
  color: #ffffff !important;
}
html.light .pagination-btn:disabled {
  opacity: 0.45 !important;
  color: #a395a8 !important;
  background-color: #fcf6f9 !important;
  border-color: rgba(255, 107, 157, 0.15) !important;
  cursor: not-allowed !important;
}
html.light .pagination-btn svg {
  color: #5c4a67 !important;
}
html.light .pagination-btn:hover:not(:disabled) svg {
  color: #d81b60 !important;
}
html.light .pagination-btn:disabled svg {
  color: #a395a8 !important;
}

/* 7. Refund Policy Section */
html.light #refund-section {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  box-shadow: 0 14px 40px -10px rgba(255, 107, 157, 0.15) !important;
}
html.light #refund-title {
  color: #22122b !important;
}
html.light #refund-summary {
  color: #4a3a54 !important;
}
html.light #refund-steps > div {
  background-color: #fff8fa !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.06) !important;
}
html.light #refund-steps h4 {
  color: #22122b !important;
}
html.light #refund-steps p {
  color: #5c4a67 !important;
}
html.light #refund-note {
  color: #c2185b !important;
}
html.light #refund-note span {
  color: #c2185b !important;
}
html.light #refund-note svg {
  color: #d97706 !important; /* amber-600 */
}
html.light #refund-zalo-box,
html.light #refund-section .w-full.md\:w-64 {
  background-color: #ffffff !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  box-shadow: 0 12px 32px -6px rgba(255, 64, 129, 0.16) !important;
}
html.light #refund-zalo-box .w-12.h-12 {
  background-color: #ffeaf2 !important;
  border-color: rgba(255, 64, 129, 0.4) !important;
  color: #d81b60 !important;
}
html.light #refund-zalo-box .w-12.h-12 svg {
  color: #d81b60 !important;
}
html.light #refund-zalo-box .text-slate-400 {
  color: #6b5974 !important;
}
html.light #zalo-name-display {
  color: #d81b60 !important;
}
html.light #zalo-phone-display {
  color: #22122b !important;
}
html.light #refund-section a.bg-\[\#29223c\] {
  background-color: #fff0f5 !important;
  border: 1px solid rgba(255, 64, 129, 0.25) !important;
  color: #d81b60 !important;
}
html.light #refund-section a.bg-\[\#29223c\]:hover {
  background-color: #ffdce8 !important;
  color: #ad1457 !important;
}

/* 8. Daily Bulletin */
html.light #bulletin-new-chapters > div,
html.light #bulletin-ongoing > div,
html.light #bulletin-completed > div {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 4px 16px -2px rgba(255, 64, 129, 0.08) !important;
}
html.light #bulletin-new-chapters h4,
html.light #bulletin-ongoing h4,
html.light #bulletin-completed h4 {
  color: #22122b !important;
}
html.light #bulletin-completed {
  background: linear-gradient(to right, #fff5f8, #ffffff) !important;
}

/* 9. Modal */
html.light #story-modal {
  background-color: rgba(35, 20, 45, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}
html.light #story-modal > div {
  background-color: #ffffff !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  box-shadow: 0 25px 60px -10px rgba(255, 64, 129, 0.25) !important;
}
html.light #story-modal-content {
  background-color: #ffffff !important;
  color: #22122b !important;
}
html.light .modal-scroll-area {
  background-color: #ffffff !important;
}

/* Modal Header Bar */
html.light #story-modal header {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
}
html.light #story-modal header button {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 107, 157, 0.3) !important;
  color: #22122b !important;
}
html.light #story-modal header button:hover {
  background-color: #ffe6ef !important;
  color: #d81b60 !important;
}
html.light #story-modal header span {
  color: #d81b60 !important;
  font-weight: 700 !important;
}

/* Modal Header Book Info Card */
html.light .modal-header-card {
  background: linear-gradient(to bottom, #fff5f9, #ffffff) !important;
  border-color: rgba(255, 107, 157, 0.3) !important;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.08) !important;
}
html.light .modal-header-card h2 {
  color: #22122b !important;
}
html.light .modal-header-card p.italic {
  color: #70597d !important;
}
html.light .modal-author,
html.light .modal-header-card .modal-author,
html.light .modal-header-card .text-white {
  color: #22122b !important;
}
html.light .modal-header-card .text-slate-300 {
  color: #5c4a67 !important;
}

/* Modal Stats Chips */
html.light .modal-stat-chip,
html.light .modal-header-card .bg-white\/5 {
  background-color: #ffeef5 !important;
  border-color: rgba(255, 107, 157, 0.3) !important;
  color: #5c4a67 !important;
}
html.light .modal-stat-chap,
html.light .modal-header-card .text-pink-300 {
  color: #d81b60 !important;
  font-weight: 700 !important;
}
html.light .modal-stat-rating,
html.light .modal-header-card .text-amber-400 {
  color: #b45309 !important;
  font-weight: 700 !important;
}
html.light .modal-stat-views,
html.light .modal-header-card .text-slate-300 {
  color: #5c4a67 !important;
  font-weight: 600 !important;
}

/* Modal CP Box */
html.light .modal-cp-box,
html.light #story-modal-content .bg-\[\#201a33\] {
  background-color: #fff2f7 !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
}
html.light .modal-cp-box span.text-pink-400,
html.light #story-modal-content .bg-\[\#201a33\] .text-pink-400 {
  color: #d81b60 !important;
  font-weight: 700 !important;
}
html.light .modal-cp-box p,
html.light #story-modal-content .bg-\[\#201a33\] p {
  color: #3d2a4a !important;
  font-weight: 500 !important;
}

/* Modal ƯU ĐÃI HOÀN XU (modal-refund-box) */
.modal-refund-box {
  background: linear-gradient(to right, rgba(255, 64, 129, 0.15), rgba(216, 27, 96, 0.1));
}
html.light .modal-refund-box {
  background: linear-gradient(135deg, #fff0f5 0%, #ffe4ee 100%) !important;
  border-color: rgba(255, 64, 129, 0.35) !important;
  box-shadow: 0 4px 14px rgba(255, 64, 129, 0.08) !important;
}
html.light .modal-refund-title,
html.light .modal-refund-box .text-pink-400,
html.light .modal-refund-box .text-pink-200 {
  color: #d81b60 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
html.light .modal-refund-desc,
html.light .modal-refund-box p {
  color: #3d2a4a !important;
}
html.light .modal-refund-desc strong,
html.light .modal-refund-box strong {
  color: #c2185b !important;
  font-weight: 800 !important;
}
html.light .modal-refund-footer,
html.light .modal-refund-box .border-t {
  border-color: rgba(255, 107, 157, 0.25) !important;
}
html.light .modal-refund-label,
html.light .modal-refund-box .text-slate-400 {
  color: #6b5575 !important;
  font-weight: 500 !important;
}
/* Modal Zalo Contact Button */
.modal-refund-zalo {
  background-color: rgba(255, 64, 129, 0.15);
  border: 1px solid rgba(255, 64, 129, 0.35);
  color: #ff80ab !important;
}
.modal-refund-zalo span,
.modal-refund-zalo strong {
  color: #ff80ab !important;
}
.modal-refund-zalo:hover {
  background-color: rgba(255, 64, 129, 0.28);
  border-color: #ff4081;
  color: #ffffff !important;
}
.modal-refund-zalo:hover span,
.modal-refund-zalo:hover strong {
  color: #ffffff !important;
}

html.light .modal-refund-zalo,
html.light .modal-refund-box a.modal-refund-zalo,
html.light .modal-refund-box a {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 64, 129, 0.45) !important;
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.12) !important;
  color: #c2185b !important;
}
html.light .modal-refund-zalo span,
html.light .modal-refund-zalo strong,
html.light .modal-refund-box a span,
html.light .modal-refund-box a strong {
  color: #c2185b !important;
  font-weight: 800 !important;
}
html.light .modal-refund-zalo:hover,
html.light .modal-refund-box a.modal-refund-zalo:hover,
html.light .modal-refund-box a:hover {
  background-color: #ffdce8 !important;
  border-color: #ff4081 !important;
  color: #ad1457 !important;
}
html.light .modal-refund-zalo svg,
html.light .modal-refund-box a.modal-refund-zalo svg,
html.light .modal-refund-box a svg {
  color: #d81b60 !important;
}
html.light .modal-refund-zalo:hover svg,
html.light .modal-refund-box a.modal-refund-zalo:hover svg,
html.light .modal-refund-box a:hover svg {
  color: #ad1457 !important;
}

/* Light mode icon overrides for modal & story elements */
html.light .modal-stat-rating svg {
  fill: #d97706 !important;
  color: #d97706 !important;
}
html.light .modal-stat-views svg {
  color: #059669 !important;
}
html.light .modal-cp-box svg,
html.light .modal-refund-box svg,
html.light .modal-refund-box > div > svg,
html.light .modal-synopsis-wrap svg,
html.light .modal-share-btn svg {
  color: #d81b60 !important;
}
html.light .story-cp-box svg,
html.light .story-refund-bar svg,
html.light .btn-synopsis svg {
  color: #d81b60 !important;
}
html.light footer #footer-brand-title svg {
  color: #d81b60 !important;
}

/* Modal Typography Enhancements - Clear hierarchy: Titles > Body */
.modal-section-title,
.modal-cp-box span.modal-section-title,
.modal-refund-title,
.modal-synopsis-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}
@media (min-width: 640px) {
  .modal-section-title,
  .modal-cp-box span.modal-section-title,
  .modal-refund-title,
  .modal-synopsis-title {
    font-size: 16.5px !important;
  }
}

html.light .modal-section-title,
html.light .modal-cp-box span,
html.light .modal-refund-title,
html.light .modal-synopsis-title,
html.light #story-modal-content h3 {
  color: #d81b60 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
@media (min-width: 640px) {
  html.light .modal-section-title,
  html.light .modal-cp-box span,
  html.light .modal-refund-title,
  html.light .modal-synopsis-title,
  html.light #story-modal-content h3 {
    font-size: 16.5px !important;
  }
}

.modal-cp-box p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}
@media (min-width: 640px) {
  .modal-cp-box p {
    font-size: 14.5px !important;
  }
}

.modal-refund-desc {
  font-size: 13px !important;
  line-height: 1.65 !important;
}
@media (min-width: 640px) {
  .modal-refund-desc {
    font-size: 14px !important;
  }
}

.modal-synopsis-box {
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.01em !important;
}
@media (min-width: 640px) {
  .modal-synopsis-box {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
  }
}

html.light .modal-synopsis-box,
html.light #story-modal-content .bg-\[\#110e1c\] {
  background-color: #ffffff !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  color: #24142f !important;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.07) !important;
  font-size: 13.5px !important;
  line-height: 1.8 !important;
}
@media (min-width: 640px) {
  html.light .modal-synopsis-box,
  html.light #story-modal-content .bg-\[\#110e1c\] {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
  }
}

/* Modal Stats Chips (Natural flex, never truncates) */
.modal-stat-chip {
  font-size: 11px !important;
  padding: 3px 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@media (min-width: 640px) {
  .modal-stat-chip {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

/* Modal Refund Footer: Never wrap on mobile */
.modal-refund-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.modal-refund-label {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
}
.modal-refund-zalo {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Modal Sticky Bottom Bar (Footer) */
html.light #story-modal footer,
html.light .modal-bottom-bar {
  background-color: #fff0f5 !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 -4px 20px rgba(255, 107, 157, 0.1) !important;
}
html.light .modal-share-btn,
html.light #story-modal footer button.bg-white\/5 {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 107, 157, 0.3) !important;
  color: #5c4a67 !important;
}
html.light .modal-share-btn:hover,
html.light #story-modal footer button.bg-white\/5:hover {
  background-color: #ffeef5 !important;
  color: #d81b60 !important;
}
html.light .modal-share-btn:hover span {
  color: #d81b60 !important;
}
html.light .modal-close-btn,
html.light #story-modal footer button.bg-white\/10 {
  background-color: #ffffff !important;
  border: 1px solid rgba(255, 107, 157, 0.35) !important;
  color: #22122b !important;
  font-weight: 700 !important;
}
html.light .modal-close-btn span {
  color: #22122b !important;
}
html.light .modal-close-btn svg {
  color: #d81b60 !important;
}
html.light .modal-close-btn:hover,
html.light #story-modal footer button.bg-white\/10:hover {
  background-color: #ffeef5 !important;
  border-color: #ff4081 !important;
  color: #d81b60 !important;
}
html.light .modal-close-btn:hover span {
  color: #d81b60 !important;
}
html.light .modal-close-btn:hover svg {
  color: #ad1457 !important;
}

/* Modal header button spans & svgs */
html.light #story-modal header button span {
  color: #22122b !important;
}
html.light #story-modal header button svg {
  color: #d81b60 !important;
}
html.light #story-modal header button:hover span {
  color: #d81b60 !important;
}
html.light #story-modal header button:hover svg {
  color: #ad1457 !important;
}

/* Modal synopsis emphasis */
html.light .modal-synopsis-box strong,
html.light .modal-synopsis-box b {
  color: #c2185b !important;
}

/* 10. Footer */
html.light footer {
  border-color: rgba(255, 107, 157, 0.2) !important;
}
html.light #footer-brand-title {
  color: #22122b !important;
}
html.light #footer-theme-icon svg {
  color: #d97706 !important;
}
html.light #footer-theme-text {
  color: #7a6884 !important;
}
html.light footer button:hover #footer-theme-text {
  color: #ff4081 !important;
}
html.light footer p,
html.light footer button {
  color: #7a6884 !important;
}
html.light footer button:hover {
  color: #ff4081 !important;
}

/* 11. Toast & Scrollbars in Light Mode */
html.light #app-toast {
  background-color: #ffffff !important;
  border-color: rgba(255, 64, 129, 0.45) !important;
  color: #ad1457 !important;
  box-shadow: 0 10px 30px rgba(255, 64, 129, 0.22) !important;
}
html.light #app-toast span {
  color: #ad1457 !important;
}
html.light #app-toast svg {
  color: #d81b60 !important;
}

html.light ::-webkit-scrollbar-track {
  background: #fff6f9 !important;
}
html.light ::-webkit-scrollbar-thumb {
  background: #f0c4d4 !important;
  border: 2px solid #fff6f9 !important;
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: #ff4081 !important;
}
html.light .modal-scroll-area::-webkit-scrollbar-track {
  background: #ffffff !important;
}
html.light .modal-scroll-area::-webkit-scrollbar-thumb {
  background: #f0c4d4 !important;
  border: 2px solid #ffffff !important;
}

/* Always keep white text on gradient buttons & badges */
html.light a.bg-gradient-to-r,
html.light button.bg-gradient-to-r,
html.light a.bg-gradient-to-r *,
html.light button.bg-gradient-to-r *,
html.light a.bg-gradient-to-br,
html.light button.bg-gradient-to-br,
html.light a.bg-gradient-to-br *,
html.light button.bg-gradient-to-br *,
html.light .status-badge,
html.light .status-badge *,
html.light .crown-badge,
html.light .crown-badge *,
html.light .new-badge,
html.light .new-badge *,
html.light .bg-emerald-600,
html.light .bg-emerald-600 *,
html.light .bg-amber-600,
html.light .bg-amber-600 *,
html.light .bg-rose-600,
html.light .bg-rose-600 * {
  color: #ffffff !important;
}

/* Vector UI Icons alignment & stroke polish */
.status-badge svg,
.crown-badge svg,
.new-badge svg,
.stat-pill svg,
.filter-pill svg,
.tag-badge svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.modal-stat-chip svg {
  display: inline-block;
  vertical-align: -1px;
  flex-shrink: 0;
}

[data-lucide] {
  stroke-width: 2.2px;
}

/* Modal Section Titles Typography Unification */
.modal-section-title,
.modal-synopsis-title,
.modal-refund-title {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: normal !important;
}