/* =====================================================================
   GIAO DIỆN TỐI — "v3 sẫm": cùng thiết kế, chỉ sẫm lại (không chuyển nền đen)
   Kem → cát sẫm · giấy → kem sẫm · olive → olive đậm · chữ, viền, bóng giữ mực đen như bản sáng
   Màu cầu vồng + nút cam: đậm và rực hơn để nổi trên nền sẫm
   Bật bằng html[data-theme="dark"] (theme.js). Nạp CUỐI mỗi trang để đè các stylesheet khác.
   ===================================================================== */

/* nút chuyển sáng/tối — mượn class của nút ngôn ngữ, chỉ chỉnh phần riêng */
.theme-toggle .tt-ico { display: inline-grid; place-items: center; line-height: 0; }
.theme-toggle .tt-ico svg { display: block; }
.theme-toggle.pill-icon, .theme-toggle.nav-pill, .theme-toggle.p-pill { gap: 0; padding-left: 0; padding-right: 0; width: 40px; justify-content: center; }
.theme-toggle.side-link { gap: 12px; }
/* nút ngôn ngữ nổi ở góc: nút giao diện là ô vuông tròn bên trái nó (vị trí do theme.js tính) */
.lang-pill.theme-toggle, .lang.theme-toggle, .p-lang-float.theme-toggle { padding-left: 0 !important; padding-right: 0 !important; width: 42px; justify-content: center; display: inline-flex; align-items: center; }
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease !important;
}

html[data-theme="dark"] {
  /* nền / bề mặt sẫm (giữ tông kem–olive) */
  --d-bg: #A99A76;        /* nền trang (thay kem #F7F0DF) */
  --d-surface: #BFB08D;   /* thẻ (thay giấy #FFFDF8 / trắng) */
  --d-surface-2: #B3A47F; /* ô nhập, chip, phần lồng trong thẻ */
  --d-olive: #4B5E26;     /* olive đậm hơn */
  --d-forest: #1D2B19;    /* chân trang */
  /* màu cầu vồng tăng tương phản */
  --d-red: #DC4B45; --d-orange: #EE7426; --d-yellow: #F4BF26; --d-green: #77AC4E; --d-cta: #FF6A1F;
  --d-red-t: #D2988A; --d-green-t: #A3B988; --d-yellow-t: #D8BA6C; --d-orange-t: #D5A173;

  /* token chung */
  --toex-cream: var(--d-bg); --toex-paper: var(--d-surface); --toex-moss: var(--d-olive); --toex-forest: var(--d-forest);
  --toex-sage: var(--d-green-t); --toex-peach: var(--d-orange-t); --toex-honey: var(--d-yellow);
  --toex-grid: linear-gradient(rgba(18,18,18,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,18,.07) 1px, transparent 1px);
  /* v3 */
  --v3-cream: var(--d-bg); --v3-paper: var(--d-surface); --v3-olive: var(--d-olive);
  --v3-red: var(--d-red); --v3-orange: var(--d-orange); --v3-yellow: var(--d-yellow); --v3-green: var(--d-green); --v3-cta: var(--d-cta);
  --v3-red-t: var(--d-red-t); --v3-green-t: var(--d-green-t); --v3-yellow-t: var(--d-yellow-t); --v3-orange-t: var(--d-orange-t);
  --rt-cream: var(--d-bg); --rt-olive: var(--d-olive); --rt-red: var(--d-red); --rt-orange: var(--d-orange); --rt-yellow: var(--d-yellow); --rt-green: var(--d-green); --rt-cta: var(--d-cta);
  /* chữ phụ đậm hơn một bậc để vẫn đọc rõ trên nền sẫm */
  --tx-muted: #33291D; --tx-strong: #121212; --tx-forest: #1F2E1A;
  --slate-50: #B7A884; --slate-100: #AE9F7B; --slate-200: #9C8C68; --slate-400: #4F4232; --slate-500: #45392A; --slate-600: #3A2F22;
  --herb-50: var(--d-yellow-t); --herb-500: var(--d-olive);
  --muted: #33291D; --soft: #40352A; --line: #9C8C68; --field: var(--d-surface); --bg: var(--d-bg); --cream: var(--d-surface); --white: var(--d-surface);
}
html[data-theme="dark"] body { background-color: var(--d-bg); }

/* bề mặt kem/trắng ghi cứng trong CSS → kem sẫm */
html[data-theme="dark"] :is(
  .post-card, .post-featured, .blog-tabs button:not(.active), .v-card, .vid-side, .soc-btn, .tc-actions a, .google,
  .field, label.field, .letter, .eco, .level-panel, .lp-price, .lp-classes li, .t-label, .t-caption, .s-label, .lang-pill, .lang,
  .phone-form, .rc-green .bubble, .pm-card, .notice, .p-pill, .p-user, .nav-pill, .pill, .tcard, .stat, .filter, .lib-row, .panel,
  .topic, .adv a, .old, .club, .time, .cell:not(.lvl), .lab-stat, .wr-card p, .ip1, .ip2, .ip3, .ip4, .hero-desc, .ip5 p, .cb-sub,
  .v3-login .card, .card-body, .folder p, .parts li, .qchips button:not(.on), .ychips button:not(.active), .src-tabs button:not(.active), .lib-tabs button:not(.active),
  .pager button:not(.active), .sort, .search input, .lib-search input, .blog-search, .sub-form input, .ls-btn:not(.dark), .media-card, .skill-card
) { background-color: var(--d-surface) !important; }
html[data-theme="dark"] :is(input, select, textarea) { background-color: var(--d-surface-2); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #40352A !important; }
html[data-theme="dark"] :is(.p-nav, .blog-nav) { background-color: rgba(169, 154, 118, .95) !important; }
html[data-theme="dark"] .folder { background: var(--d-surface-2) !important; }

/* thẻ pastel → tint đậm hơn cùng tông */
html[data-theme="dark"] .perk:nth-child(1), html[data-theme="dark"] .lt-2col:nth-child(1), html[data-theme="dark"] .v3-orientation .stage:nth-child(1), html[data-theme="dark"] .v3-speaking .t-pink { background: var(--d-red-t) !important; }
html[data-theme="dark"] .perk:nth-child(2), html[data-theme="dark"] .lt-2col:nth-child(2), html[data-theme="dark"] .v3-orientation .stage:nth-child(3), html[data-theme="dark"] .v3-speaking .t-tall { background: var(--d-green-t) !important; }
html[data-theme="dark"] .perk:nth-child(3), html[data-theme="dark"] .lt-2col:nth-child(3), html[data-theme="dark"] .v3-orientation .stage:nth-child(2), html[data-theme="dark"] .v3-speaking .t-full { background: var(--d-yellow-t) !important; }
html[data-theme="dark"] .perk:nth-child(4), html[data-theme="dark"] .lt-2col:nth-child(4), html[data-theme="dark"] .v3-orientation .stage:nth-child(4), html[data-theme="dark"] .v3-speaking .t-orange { background: var(--d-orange-t) !important; }
html[data-theme="dark"] :is(.v3-vocabulary .tip, .thumb, .t-photo-empty) { background: var(--d-yellow-t) !important; }

/* hình minh hoạ dựng bằng code: sẫm nhẹ như ảnh, không đổi màu */
html[data-theme="dark"] :is(.mk, .board, .strip, .t-pink .card, .score, .yt, .dub, .t-tall .nav, .blog-page .cover) { filter: brightness(.9) saturate(1.08); }
/* ảnh chụp + linh vật: sẫm rất nhẹ cho hợp nền */
html[data-theme="dark"] main img:not([src*="toex-study-club"]) { filter: brightness(.92); }
html[data-theme="dark"] :is(.p-logo b, .blog-logo em, .accent, .title .accent) { color: #34451A !important; }
html[data-theme="dark"] .faq-split .faq-sub { color: #fff; }
html[data-theme="dark"] .p-tag.blue, html[data-theme="dark"] a.s-card { background-color: var(--d-orange-t) !important; }
html[data-theme="dark"] .p-tag.amber { background-color: var(--d-yellow-t) !important; } html[data-theme="dark"] .p-tag.green { background-color: var(--d-green-t) !important; }
html[data-theme="dark"] :is(.faq-split .faq-title, .faq-split__consult .faq-sub a b, .faq-split__consult .faq-sub b) { color: #FFFDF8; }