/* ============================================================
   SAVINA · DÃY HỖ TRỢ ĐỌC
   ------------------------------------------------------------
   Hai núm: cỡ chữ và nền sáng/tối. Đặt ở góc trái dưới, tránh
   hình mascot bên phải và nằm trên thanh điều hướng đáy.

   VÌ SAO LÀM CÁI NÀY
   Người đọc để cỡ chữ lớn trong cài đặt điện thoại thì trang bị
   vỡ, vì hệ điều hành phóng to CHỮ nhưng không phóng khung chứa
   nó. Dãy này cho họ phóng to ngay trên trang, theo cách trang
   kiểm soát được: khung và chữ cùng lớn lên nên không vỡ.

   CỠ CHỮ DÙNG zoom, KHÔNG DÙNG font-size
   Toàn bộ CSS của trang đặt kích thước bằng px — đổi mỗi cỡ chữ
   gốc thì chữ to ra mà khung giữ nguyên, đúng cái lỗi đang phải
   chữa. zoom phóng cả khung lẫn chữ theo cùng một tỷ lệ rồi cho
   nội dung dàn lại theo bề ngang mới, nên bố cục giữ nguyên nếp
   ở mọi mức. Chỉ phóng phần <main>, còn thanh điều hướng và các
   nút nổi giữ nguyên cỡ để không ăn mất màn hình.

   NỀN TỐI đổi lại đúng bảy biến màu mà cả 17 trang đang dùng
   chung, nên không phải viết lại giao diện cho từng trang.
   ============================================================ */

/* ---------- Cỡ chữ ---------- */
:root { --doc-scale: 1; }
main { zoom: var(--doc-scale); }

/* ---------- Nền tối ----------
   LÀM LẠI. Lần đầu tôi đổi bảy biến màu dùng chung rồi mong cả trang
   theo. Không được: rất nhiều khối đặt màu nền thẳng bằng mã màu, nên
   chúng giữ nguyên nền sáng trong khi chữ đã chuyển sang màu sáng —
   thành chữ sáng trên nền sáng, không đọc được gì.

   Cách làm đúng, và cũng là điều bạn yêu cầu: KHÔNG đụng tới thanh đầu
   trang; chỉ phần nội dung đổi sang nền tối, chữ trắng, tiêu đề vàng.
   Ép nền của mọi khối con trong phần nội dung về trong suốt, rồi đặt
   một nền tối duy nhất cho cả vùng. Nhờ vậy không còn mảng sáng nào sót
   lại, dù khối đó đặt màu kiểu gì.

   Ảnh nền của khối đầu trang được giữ, vì nó là ảnh thật chứ không phải
   mảng màu; chỉ các dải màu trang trí bị gỡ. */

:root[data-savina-theme="dark"] body { background: #0f1413; }
:root[data-savina-theme="dark"] main {
  background: #0f1413; color: #e9e6df;
  /* Đặt lại bảng màu CHỈ TRONG phần nội dung. Bên ngoài — thanh đầu
     trang, chân trang — vẫn dùng màu CMS, nên không bị đụng tới.
     Nhờ đây, mọi chữ đang lấy màu qua biến (nâu đậm --coffee, xanh
     đậm --green) tự sáng lên, không phải đi dò từng lớp một. */
  --coffee: #e4d3bf; --coffee-soft: #c9b49c;
  --green: #d8e2d6; --ink: #e9e6df; --muted: #a8b0a8;
  --gold: #e2b76c; --line: #2b3432; --paper: #0f1413; --white: #171f1d;
}

/* Gỡ mọi nền sáng bên trong phần nội dung */
:root[data-savina-theme="dark"] main *:not(img):not(video):not(canvas):not(svg):not(svg *) {
  background-color: transparent !important;
  border-color: #2b3432 !important;
}
/* KHÔNG gỡ ảnh nền nữa. Luật cũ xoá background-image của mọi khối trong
   phần nội dung để diệt các dải màu sáng; nhưng nhiều thẻ dùng ẢNH làm
   nền, và chúng bị xoá sạch theo. Mất ảnh là cái giá quá đắt cho việc
   diệt vài dải màu — thà còn một hai chỗ hơi sáng. */

/* Chữ: thân bài trắng ngà, tiêu đề vàng, chữ phụ xám sáng */
:root[data-savina-theme="dark"] main,
:root[data-savina-theme="dark"] main p,
:root[data-savina-theme="dark"] main li,
:root[data-savina-theme="dark"] main td,
:root[data-savina-theme="dark"] main th,
:root[data-savina-theme="dark"] main dd,
:root[data-savina-theme="dark"] main dt,
:root[data-savina-theme="dark"] main span,
:root[data-savina-theme="dark"] main div,
:root[data-savina-theme="dark"] main strong,
:root[data-savina-theme="dark"] main b,
:root[data-savina-theme="dark"] main em { color: #e9e6df; }

:root[data-savina-theme="dark"] main h1,
:root[data-savina-theme="dark"] main h2,
:root[data-savina-theme="dark"] main h3,
:root[data-savina-theme="dark"] main h4,
:root[data-savina-theme="dark"] main h5,
:root[data-savina-theme="dark"] main .title,
:root[data-savina-theme="dark"] main .term-title { color: #e2b76c; }

/* Dòng nhãn nhỏ phía trên tiêu đề vốn đã vàng, để sẫm hơn một nấc cho
   khỏi tranh với tiêu đề chính */
:root[data-savina-theme="dark"] main .kicker,
:root[data-savina-theme="dark"] main .eyebrow,
:root[data-savina-theme="dark"] main .label { color: #c2954f; }

:root[data-savina-theme="dark"] main .sub,
:root[data-savina-theme="dark"] main .muted,
:root[data-savina-theme="dark"] main .lead,
:root[data-savina-theme="dark"] main small { color: #a8b0a8; }

:root[data-savina-theme="dark"] main a { color: #e2b76c; }
:root[data-savina-theme="dark"] main p a,
:root[data-savina-theme="dark"] main li a { text-decoration-color: rgba(226,183,108,.5); }

/* Thẻ nổi lên một nấc so với nền để còn phân biệt được khối */
:root[data-savina-theme="dark"] main .card,
:root[data-savina-theme="dark"] main .term,
:root[data-savina-theme="dark"] main .step,
:root[data-savina-theme="dark"] main .price-market-card,
:root[data-savina-theme="dark"] main .pcCard,
:root[data-savina-theme="dark"] main .analysisCard,
:root[data-savina-theme="dark"] main .region-card,
:root[data-savina-theme="dark"] main .knowledge-card {
  background-color: #171f1d !important;
  border: 1px solid #2b3432 !important;
}

/* Ô nhập và nút */
:root[data-savina-theme="dark"] main input,
:root[data-savina-theme="dark"] main select,
:root[data-savina-theme="dark"] main textarea,
:root[data-savina-theme="dark"] main .search,
:root[data-savina-theme="dark"] main .alphabar button {
  background-color: #1b2422 !important; color: #e9e6df !important;
}
:root[data-savina-theme="dark"] main input::placeholder,
:root[data-savina-theme="dark"] main textarea::placeholder { color: #8d968d; }

/* Nút chính phải còn ra dáng nút, không để bị gỡ nền thành chữ trơn */
:root[data-savina-theme="dark"] main .btn.primary,
:root[data-savina-theme="dark"] main .ssGo,
:root[data-savina-theme="dark"] main .alphabar button.active,
:root[data-savina-theme="dark"] main button[type="submit"] {
  background-color: #e2b76c !important; color: #14191a !important; border-color: #e2b76c !important;
}
:root[data-savina-theme="dark"] main .btn {
  border-color: rgba(233,230,223,.42) !important; color: #e9e6df;
}

/* Ảnh dịu lại một chút cho đỡ chói mắt ban đêm */
:root[data-savina-theme="dark"] main img { filter: brightness(.88) saturate(.95); }

/* Bảng kết quả tra cứu nằm ngoài <main> nên phải nói riêng */
:root[data-savina-theme="dark"] .ssPanelNoi {
  background: #171f1d; color: #e9e6df; border-color: #2b3432;
}
:root[data-savina-theme="dark"] .ssPanelNoi .ssMuc b { color: #e2b76c; }
:root[data-savina-theme="dark"] .ssPanelNoi .ssMuc span,
:root[data-savina-theme="dark"] .ssPanelNoi .ssChan { color: #a8b0a8; }
:root[data-savina-theme="dark"] .ssPanelNoi .ssMuc { border-top-color: #2b3432; }

/* Dãy hỗ trợ đọc cũng đổi theo cho khỏi chói */
:root[data-savina-theme="dark"] .savina-reader {
  background: #171f1d; border-color: #2b3432;
}
:root[data-savina-theme="dark"] .savina-reader button { color: #e9e6df; }
:root[data-savina-theme="dark"] .savina-reader .srVach { background: #2b3432; }

/* THANH ĐẦU TRANG VÀ CHÂN TRANG GIỮ NGUYÊN MÀU SÁNG — cố ý.
   Đổi chúng theo thì các nút tròn trong thanh (nền trắng, hình sẫm) hoá
   trắng trên trắng, mất hẳn hình. Giữ nguyên vừa chắc vừa còn nhận ra
   thương hiệu. */

/* ---------- Dãy nút ---------- */
/* Dạng gọn: chỉ một núm tròn bật tắt nền tối, dùng cho mọi trang trừ
   trang bài viết. Nhỏ và mờ bớt khi không chạm tới, để không che nội dung
   — bản trước là một dãy ba nút nằm chắn ngang giữa trang. */
.savina-reader.srGon { padding: 3px; opacity: .72; }
.savina-reader.srGon:hover, .savina-reader.srGon:focus-within { opacity: 1; }

.savina-reader {
  position: fixed; left: 12px; z-index: 9990;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px;
  background: var(--white, #fff); border: 1px solid var(--line, #ddd6c9);
  border-radius: 999px; padding: 4px;
  box-shadow: 0 6px 20px rgba(8, 20, 14, .16);
  font-family: "Roboto", system-ui, sans-serif;
}
.savina-reader button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 38px; height: 38px; border-radius: 999px; padding: 0;
  color: var(--green, #123126); font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .12s ease;
}
.savina-reader button:disabled { opacity: .32; cursor: default; }
.savina-reader button:not(:disabled):hover { background: rgba(18, 49, 38, .08); }
.savina-reader button:not(:disabled):active { transform: scale(.9); }
.savina-reader .srA  { font-size: 13px }
.savina-reader .srA2 { font-size: 19px }
.savina-reader .srVach { width: 1px; height: 20px; background: var(--line, #ddd6c9); margin: 0 2px }
.savina-reader svg { width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }

/* Mức chữ hiện tại, hiện lên một nhịp rồi tự mờ đi */
.savina-reader .srMuc {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--green, #123126); color: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.savina-reader.srHien .srMuc { opacity: 1 }

@media (max-width: 420px) {
  .savina-reader { left: 10px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .savina-reader button { width: 34px; height: 34px }
}
@media print { .savina-reader { display: none } }

/* ============================================================
   THANH ĐẦU TRANG VÀ CHÂN TRANG — GIỮ NGUYÊN MÀU SÁNG
   ------------------------------------------------------------
   Trước đây tôi chỉ giới hạn luật nền tối trong <main> rồi yên tâm
   rằng thanh đầu trang nằm ngoài nên không bị đụng. Sai: trên trang
   chạy thật, có trang đặt thanh BÊN TRONG vùng nội dung. Lúc đó luật
   "mọi khối con bỏ nền sáng" quét trúng cả thanh — nền cream biến mất
   để lộ nền đen phía sau, logo in màu sẫm chìm hẳn, còn hai nút tròn
   trắng thì giữ nguyên trắng nên chữ bên trong gần như vô hình.

   Nay nói thẳng màu cho thanh và chân trang, đặt sau mọi luật khác và
   có !important, nên dù chúng nằm ở đâu trong trang thì cũng giữ đúng
   màu sáng như bạn yêu cầu. Không còn phụ thuộc vào cấu trúc trang.
   ============================================================ */
:root[data-savina-theme="dark"] header.nav,
:root[data-savina-theme="dark"] .nav,
:root[data-savina-theme="dark"] footer,
:root[data-savina-theme="dark"] .site-footer,
:root[data-savina-theme="dark"] .dict-footer {
  background-color: #fbf8f1 !important;
  background-image: none !important;
  color: #17251e !important;
  border-color: #ddd6c9 !important;
}
:root[data-savina-theme="dark"] .nav a,
:root[data-savina-theme="dark"] .nav button,
:root[data-savina-theme="dark"] .nav span,
:root[data-savina-theme="dark"] .nav b,
:root[data-savina-theme="dark"] .nav strong,
:root[data-savina-theme="dark"] .nav div,
:root[data-savina-theme="dark"] footer a,
:root[data-savina-theme="dark"] footer span,
:root[data-savina-theme="dark"] footer div,
:root[data-savina-theme="dark"] footer p { color: #17251e !important; }

/* Nút tròn trong thanh: nền trắng, chữ xanh đậm — đúng như nền sáng */
:root[data-savina-theme="dark"] .nav .pill,
:root[data-savina-theme="dark"] .nav .langpill,
:root[data-savina-theme="dark"] .nav .icon,
:root[data-savina-theme="dark"] .nav .back,
:root[data-savina-theme="dark"] .nav .actions > *,
:root[data-savina-theme="dark"] #savina-lang-pill {
  background-color: #fff !important;
  color: #123126 !important;
  border-color: #ddd6c9 !important;
}
/* Logo giữ nguyên độ sáng gốc, không nâng cũng không dịu */
:root[data-savina-theme="dark"] .nav img,
:root[data-savina-theme="dark"] footer img { filter: none !important; }

/* Dải chỉ đường (Trang chủ › Thư viện › …) nằm trên nền tối nên vẫn
   theo màu nền tối, không kéo về màu thanh. */