/* Trang truyện: đổi tông màu (tím → cyan, đồng bộ hệ "Signal" của trang
   chủ) và kiểu chữ cho các nhãn/tiêu đề khu vực (chuyển sang JetBrains
   Mono viết hoa dãn chữ, như "Trạm Preview"/"Live Resonance" ở trang
   chủ) — KHÔNG đụng tới bố cục/khoảng cách, mọi rule dưới đây chỉ ghi
   đè color/border-color/background/font-family của các selector đã có
   sẵn trong styles.css. Chỉ áp dụng trong phạm vi .story-page/
   .story-dock nên không ảnh hưởng nơi khác đang dùng chung class
   (.chip, .btn-cyan, .badge…). */
.story-page, .story-dock {
  --story-accent: #26c2dc;
  --story-accent-soft: #aeeaf3;
  --story-accent-ink: #04222a;
  --story-accent-line: rgba(38, 194, 220, .44);
  --story-accent-fill: rgba(38, 194, 220, .16);
  --story-accent-glow: 0 0 16px rgba(38, 194, 220, .22);
}

/* Tiêu đề truyện (h1) CỐ Ý không đổi font: rất nhiều rule ở các file
   story-detail-*.css (ipad/landscape/portrait…) đặt font-size bằng
   clamp()+cqi kèm !important, tính riêng theo bề rộng ký tự của
   Cormorant Garamond ở từng kích thước màn hình — đổi sang font khác
   (rộng hơn) ở đây sẽ làm tiêu đề tràn dòng tại nhiều breakpoint, tức
   là phá bố cục gốc. Giữ nguyên font tiêu đề, chỉ đổi các nhãn/nút/
   viền nhỏ bên dưới là đủ để thấy rõ tông màu mới mà không rủi ro vỡ
   layout đã canh chỉnh kỹ.

   Nhãn nhỏ viết hoa: JetBrains Mono dãn chữ, màu cyan. Riêng .badge
   ("SẮP RA MẮT"…) KHÔNG đổi font: ở cỡ chữ rất nhỏ sẵn có của nó, dấu
   tiếng Việt (sắc/nặng/hỏi…) render mờ/mất nét hơn hẳn so với font
   gốc — chỉ đổi màu cho phần này, an toàn hơn. */
.story-page .intro-title,
.story-page .info-title,
.story-page .same-head h3 {
  font-family: 'JetBrains Mono', monospace;
  color: var(--story-accent-soft);
  text-shadow: none;
}
.story-page .story-info .badge { color: var(--story-accent-soft); }

.story-page .story-info .by span { color: var(--story-accent-soft); }

/* -- tag/chip: chỉ đổi màu, giữ nguyên font/chữ hoa-thường gốc — đổi
   sang chữ hoa/mono ở đây từng làm dòng tag dài hơn bản gốc và tràn
   xuống đè lên hàng số liệu bên dưới. */
/* Bỏ khung/nền của tag — chỉ còn chữ màu cyan trôi tự nhiên, không còn
   viên "nút" bo tròn bao quanh nữa. Gap giữa các tag phải rộng hơn một
   chút để bù lại phần ranh giới trực quan mà cái khung cũ vẫn tạo ra,
   nếu không chữ sẽ dính sát nhau khó đọc. */
.story-page .tags { gap: .5rem .65rem; }
.story-page .chip {
  border-color: transparent;
  background: none;
  color: var(--story-accent-soft);
  padding-left: 0;
  padding-right: 0;
}
.story-page .chip-more { color: var(--muted); }

/* -- khối số liệu -- */
.story-page .story-metrics { border-color: var(--story-accent-line); }
.story-page .metric { border-left-color: rgba(38, 194, 220, .16); }
.story-page .metric-ico:not(.heart) { color: var(--story-accent-soft); }

/* -- nút CTA chính + dock: khối xanh đặc (không phải viền mờ/nền trong
   suốt) để đúng là MỘT màu xanh với nút "Đọc ngay" ở trang chủ — cùng
   một token --story-accent/--sh-accent, cùng cách phối nền đặc + chữ
   màu mực đậm, chỉ khác tên biến vì file khác nhau. -- */
.story-page .story-acts .btn-cyan,
.story-dock .btn-cyan {
  background: var(--story-accent);
  border-color: var(--story-accent);
  color: var(--story-accent-ink);
  box-shadow: 0 10px 22px rgba(38, 194, 220, .32), inset 0 1px 0 rgba(255,255,255,.25);
}
.story-dock { border-top-color: rgba(38, 194, 220, .18); }
/* Dock giờ có thêm nút đổi nền sáng/tối bên cạnh Chia sẻ (và "Chương
   mới" khi có) — chuyển sang flex để số nút thay đổi vẫn co giãn hợp
   lý, không còn phụ thuộc đúng 2 cột cố định như bố cục lưới gốc. Cả 3
   nút giờ chỉ còn icon, không chữ — thu về ô vuông bo góc bằng nhau,
   dàn đều khoảng cách trên cả thanh dock thay vì kéo giãn hết cỡ như
   khi còn là nút chữ. */
.story-dock {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: space-evenly;
}
.story-dock .btn {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  min-height: 0;
  padding: 0;
  border-radius: 16px;
}
.story-dock .dock-ico { width: 22px; height: 22px; flex: none; }

/* -- tab Tóm tắt/Mục lục/Đánh giá -- */
.story-page .story-tabs a.on { color: #eafcff; border-bottom-color: var(--story-accent); }

/* -- thẻ Giới thiệu / Thông tin truyện: bỏ khung riêng, dùng thẳng nền
   chính của trang, không viền/không đổ bóng/không lớp kính mờ — chỉ
   còn tiêu đề + nội dung trôi tự nhiên trên nền trang. -- */
.story-page .intro-card, .story-page .info-card {
  background: var(--bg);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.story-page .intro-card::after, .story-page .info-card::after { content: none; }
.story-page .info-body { border-left-color: var(--story-accent-line); }
/* "Xem tiếp →": trước là một nút khung riêng ("Xem chi tiết đầy đủ") —
   giờ trông giống hệt "Đọc tiếp tóm tắt →" (chữ + mũi tên, không khung),
   chỉ đậm/nổi hơn một chút vì đứng một mình cuối khối. */
.story-page .intro-more, .story-page .info-more {
  color: var(--story-accent-soft);
  font-weight: 750;
}
.story-page .info-more {
  width: auto;
  min-height: 0;
  margin-top: .7rem;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  justify-content: flex-start;
}

/* -- gạch nhỏ trước tiêu đề khu vực: bỏ hẳn, không dùng dấu gạch nữa -- */
.story-page .intro-title::before,
.story-page .info-title::before,
.story-page .same-head h3::before { content: none; }

/* -- Đề xuất tác giả khác / Cùng tác giả: cũng bỏ khung, dùng nền chính -- */
.story-page .same-author {
  background: var(--bg);
  border: 0;
  box-shadow: none;
}
.story-page .same-head h3 { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.story-page .same-card { border-color: rgba(38, 194, 220, .2); }
.story-page .same-card:active { border-color: rgba(174, 234, 243, .55); }
.story-page .same-card em::before { background: var(--story-accent); box-shadow: 0 0 7px rgba(38, 194, 220, .7); }
/* Bỏ khung quanh nhãn trạng thái ("Đang lên sóng"…) ở mỗi thẻ bìa dưới
   trang — cùng chủ trương bỏ khung/nút bọc quanh tag như ở trên, chỉ
   còn chấm tròn + chữ, không còn viên pill bo tròn nữa. */
.story-page .same-card em {
  border-color: transparent;
  background: none;
  padding-left: 0;
  padding-right: 0;
}

/* -- bìa truyện (bìa chính + các thẻ ở "Cùng tác giả"/"Đề xuất tác giả
   khác"): bóng đổ 3D mềm, và một hack quen thuộc để Safari trên iOS bo
   tròn góc ảnh <img> sạch sẽ — chỉ overflow:hidden + border-radius trên
   .cover-frame đôi khi để lọt một mẩu góc vuông của ảnh (lỗi bo góc nổi
   tiếng của WebKit khi ảnh được scale bên trong container). CHỈ áp cho
   .same-card (nơi phát hiện lỗi bo góc) — áp cho mọi .cover-frame kể cả
   bìa chính từng làm -webkit-mask-image "nuốt mất" luôn box-shadow của
   bìa chính (mask cắt theo đúng khung ảnh, còn bóng đổ nằm ngoài khung
   nên bị cắt theo luôn), khiến bìa chính hết cả bóng. -- */
.story-page .same-card .cover-frame {
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
}
.story-page .same-card .cover-frame img { border-radius: inherit; }
/* Bìa chính đầu trang: KHÔNG đổ bóng — thử một vòng thấy bóng viền
   quanh góc bo trông không đẹp, bỏ hẳn (khác với các bìa nhỏ ở rail,
   vẫn giữ bóng). Đặt về "none" để chặn luôn box-shadow gốc trong
   styles.css cho selector này, không chỉ xoá phần mình từng thêm. */
.story-page .story-cover .cover-frame { box-shadow: none; }
/* Bóng ở NGUYÊN card (bìa + khối tên/tác giả/trạng thái) là bóng chính,
   luôn rõ hơn bóng nhỏ của riêng bìa bên trong — nếu không, mắt chỉ
   thấy bìa có bóng còn khối chữ bên dưới thì không, trông như hai
   mảnh tách rời thay vì một tấm thẻ liền khối. Khoảng cách giữa các
   card trong .same-rail chỉ .72rem (~11.5px) — blur-radius phải nhỏ
   HƠN khoảng cách đó, nếu không bóng của 2 card cạnh nhau sẽ chạm/loang
   vào nhau ngay trong khe hở, nhìn thành một dải liền cho cả hàng thay
   vì bóng tách biệt từng thẻ. Số thứ 4 (spread âm) kéo bóng nhỏ/sát
   lại gần cạnh gốc trước khi làm mờ, để blur lớn hơn mà bóng vẫn không
   tràn ra ngoài card. */
.story-page .same-card .cover-frame { box-shadow: 0 3px 6px -3px rgba(0, 0, 0, .4); }
.story-page .same-card {
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .55), 0 3px 5px -4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.story-page .toc-groups a.on { border-color: var(--story-accent); color: var(--story-accent-soft); }

/* ============================================================
   Chế độ nền sáng cho trang truyện — bật/tắt bằng nút "☀ Sáng" ở
   dock (js: initStoryPageTheme(), gắn data-theme="light" lên
   .story-page, nhớ lựa chọn qua localStorage). Mọi màu chữ/nền/viền
   vốn nhắm sẵn cho nền tối được liệt kê lại ở đây cho nền sáng — vẫn
   chỉ ghi đè color/background/border, không đụng bố cục. */
.story-page[data-theme="light"] {
  --story-light-bg: #f7f4ee;
  --story-light-panel: #ffffff;
  --story-light-ink: #211d17;
  --story-light-muted: #6b655c;
  --story-light-line: rgba(33, 29, 23, .16);
  --story-accent-onlight: #0d8fa6;
  background: var(--story-light-bg);
  color: var(--story-light-ink);
}
.story-page[data-theme="light"] .intro-card,
.story-page[data-theme="light"] .info-card { background: var(--story-light-bg); }
.story-page[data-theme="light"] .story-info h1 { color: var(--story-light-ink); }
.story-page[data-theme="light"] .story-info .by { color: var(--story-light-muted); }
.story-page[data-theme="light"] .story-info .by span,
.story-page[data-theme="light"] .story-info .badge,
.story-page[data-theme="light"] .chip,
.story-page[data-theme="light"] .metric-ico:not(.heart),
.story-page[data-theme="light"] .intro-title,
.story-page[data-theme="light"] .info-title,
.story-page[data-theme="light"] .same-head h3,
.story-page[data-theme="light"] .intro-more,
.story-page[data-theme="light"] .info-more,
.story-page[data-theme="light"] .toc-groups a.on {
  color: var(--story-accent-onlight);
}
.story-page[data-theme="light"] .chip-more,
.story-page[data-theme="light"] .metric small,
.story-page[data-theme="light"] .story-tabs a,
.story-page[data-theme="light"] .same-head span,
.story-page[data-theme="light"] .same-card small,
.story-page[data-theme="light"] .toc-groups a,
.story-page[data-theme="light"] .chapter-list .num,
.story-page[data-theme="light"] .chapter-list .read,
.story-page[data-theme="light"] .rate-box .sub {
  color: var(--story-light-muted);
}
.story-page[data-theme="light"] .story-tabs a.on { color: var(--story-accent-onlight); }
.story-page[data-theme="light"] .story-tabs { border-bottom-color: var(--story-light-line); }
.story-page[data-theme="light"] .story-metrics { background: rgba(33, 29, 23, .035); }
.story-page[data-theme="light"] .metric { border-left-color: var(--story-light-line); }
.story-page[data-theme="light"] .metric b { color: var(--story-light-ink); }
.story-page[data-theme="light"] .btn-ghost {
  border-color: var(--story-light-line);
  background: rgba(33, 29, 23, .045);
  color: var(--story-light-ink);
}
.story-page[data-theme="light"] .btn[disabled] { color: var(--story-light-muted); }
.story-page[data-theme="light"] .intro-body,
.story-page[data-theme="light"] .info-body,
.story-page[data-theme="light"] .info-body p { color: var(--story-light-ink); }
.story-page[data-theme="light"] .info-body strong { color: var(--story-light-ink); }
.story-page[data-theme="light"] .info-body { border-left-color: var(--story-light-line); }
.story-page[data-theme="light"] .same-author { background: var(--story-light-bg); }
/* .cover-frame vốn có nền dự phòng màu tối (#0b0e19/#121826, dùng khi
   ảnh chưa tải xong) từ styles.css/story-shelves.css — nền tối đó lộ
   ra là chính "phần màu đậm" dưới các bìa mà nền sáng không che được,
   vì file gốc không hề biết tới nền sáng. Đổi sang màu nền sáng cùng
   tông thẻ để không còn mảng tối lạc lõng dù ở trạng thái nào. */
.story-page[data-theme="light"] .cover-frame { background: var(--story-light-panel); }
.story-page[data-theme="light"] .same-card {
  background: var(--story-light-panel);
  /* Bỏ hẳn viền — chính là "lằn mờ" hằn dưới chân mỗi bìa mà không đủ
     tương phản để trông có chủ đích, chỉ giống lỗi hiển thị. Spread âm
     (số thứ 4) kéo bóng sát lại gần card trước khi làm mờ, để bóng vẫn
     rõ nhưng không đủ rộng để chạm bóng của card kế bên qua khe .72rem
     — mỗi card một bóng riêng, không gộp thành dải cho cả hàng. */
  border-color: transparent;
  box-shadow: 0 6px 10px -6px rgba(33, 29, 23, .3), 0 3px 5px -4px rgba(33, 29, 23, .18);
}
.story-page[data-theme="light"] .same-card .cover-frame {
  box-shadow: 0 3px 6px -3px rgba(33, 29, 23, .22);
}
.story-page[data-theme="light"] .same-card b { color: var(--story-light-ink); }
.story-page[data-theme="light"] .same-card em {
  color: var(--story-light-muted);
  border-color: transparent;
}
.story-page[data-theme="light"] .toc-groups a { border-color: var(--story-light-line); }
.story-page[data-theme="light"] .toc-head input {
  background: var(--story-light-panel);
  color: var(--story-light-ink);
  border-color: var(--story-light-line);
}
.story-page[data-theme="light"] .chapter-list li { border-top-color: var(--story-light-line); }
.story-page[data-theme="light"] .toc-box,
.story-page[data-theme="light"] .rate-box { border-top-color: var(--story-light-line); }

/* ============================================================
   Nền sáng cũng cần lan tới header/footer dùng chung toàn site — dù
   chúng là ANH EM (sibling) của .story-page, không phải con của nó.
   initStoryPageTheme() vì vậy đánh dấu data-theme lên cả #app (bọc cả
   header, .story-page, dock lẫn footer); render() luôn xoá dấu này
   khỏi #app mỗi lần chuyển trang nên sẽ không bao giờ dính sang trang
   khác. Header không có gì phía sau ngoài <body>, nên "trong suốt" ở
   đây có nghĩa là bỏ luôn lớp nền tối riêng của nó VÀ đổi màu nền
   <body> sang màu sáng — footer vốn không có nền riêng (dùng thẳng
   nền body) nên tự đổi theo, chỉ cần sửa mấy dòng chữ trắng/gần trắng
   kẻo hoà vào nền mới. */
body:has(#app[data-theme="light"]) { background: #f7f4ee; }

#app[data-theme="light"] .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(33, 29, 23, .14);
}
#app[data-theme="light"] .site-header .icon-btn { color: #221d16; }
#app[data-theme="light"] .brand-mark-img { filter: brightness(0); }
/* word.png has a soft glow baked into its alpha channel (confirmed by
   sampling: alpha ramps smoothly from 0 to 255 across a wide band, not a
   clean silhouette) — forcing it black with a CSS filter keeps that
   glow's soft edge, so it reads as smudged ink on a light background.
   word-black.png is the exact same wordmark design with that glow
   channel thresholded back to a crisp edge, pre-rendered solid black —
   swap images instead of faking it with a filter or a font stand-in. */
/* Cùng kích thước với .brand-word-img gốc (header 26px/30px ở >=720px,
   footer theo cỡ chữ foot2) — chỉ là ảnh thay thế lúc nền sáng nên phải
   chiếm đúng khoảng trống đó, không lệch layout logo. */
.brand-word-img-light { display: none; height: 26px; width: auto; }
@media (min-width: 720px) { .brand-word-img-light { height: 30px; } }
.foot2-body .brand-word-img-light { width: auto; height: clamp(1.9rem, 5.2vw, 2.8rem); }
#app[data-theme="light"] .brand-word-img { display: none; }
#app[data-theme="light"] .brand-word-img-light { display: block; }

/* Dock (Chia sẻ + đổi nền): cũng cần theo nền sáng thay vì còn là một
   dải tối riêng — nút ghost (nút đổi nền) đổi kiểu cho khớp. */
#app[data-theme="light"] .story-dock {
  background: #f7f4ee;
  border-top-color: rgba(33, 29, 23, .14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#app[data-theme="light"] .story-dock .btn-ghost {
  background: rgba(33, 29, 23, .05);
  border-color: rgba(33, 29, 23, .18);
  color: #1a160f;
}

#app[data-theme="light"] .foot2-desc,
#app[data-theme="light"] .foot2-row-t b,
#app[data-theme="light"] .foot2-section a,
#app[data-theme="light"] .foot2-social-youtube,
#app[data-theme="light"] .foot2-social-tiktok,
#app[data-theme="light"] .foot2-social-facebook,
#app[data-theme="light"] .foot2-social-wattpad {
  color: #221d16;
}
#app[data-theme="light"] .foot2-row-t small { color: #6b655c; }
/* .foot2-kicker's own gradient text-clip (purple-to-cyan) and h4's
   --sh-accent cyan are both tuned for a dark background and all but
   disappear against the light cream one; .foot2-row svg icons use
   --sh-accent-soft (pale cyan) for the same reason. Headings get a
   darker, readable cyan that keeps the accent; the icons get plain ink
   since they're not a heading. */
#app[data-theme="light"] .foot2-kicker {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #0f90a8;
}
#app[data-theme="light"] .foot2-section h4 { color: #0f90a8; }
#app[data-theme="light"] .foot2-row svg { stroke: #221d16; }
#app[data-theme="light"] .foot2-copy { color: #6b655c; }