/* ==========================================================================
   Lolool — Nền tối đồng nhất mọi giao diện (lệnh user 18/08/2026).
   LẬT TOKEN TOÀN CỤC: mọi component dùng var(--token) tự chuyển tối.
   Font đồng nhất theo trang chủ: Caslon (display) · Archivo Narrow (UI)
   · EB Garamond (body). Chuẩn WCAG: chữ phụ ≥4.5:1 trên surface tối.
   ========================================================================== */

html:not([data-che-do="ngay"]) {
  color-scheme: dark;

  /* Nền & surface tối — XANH GREEN (chốt lại 18/08 tối: bỏ navy) */
  --bg-main: #05211A;
  --bg-soft: #082A20;
  --surface: #0B2D23;
  --surface-warm: #0A2A20;

  /* Mực & chữ trên nền tối */
  --ink: #EAF6EE;
  --text-primary: #ECF5EF;
  --text-secondary: #E8F2EC;
  --text-light: #D5E4DB;

  /* Xanh chủ đạo: nút giữ nguyên; CHỮ xanh chuyển mint sáng cho đạt AA */
  --primary-dark: #8FE39B;

  /* CHỮ NHẤN TRÊN NỀN TỐI = VÀNG (lệnh anh Tú 26/08/2026).
     Chữ xanh #469F4C/#37813C trên nền #0B2D23 chỉ đạt ~3–4:1. Vàng #F5B700
     đạt ~8:1. CHỈ đổi màu chữ — nút, viền, nền chip giữ nguyên xanh để app
     không mất nhận diện. */
  --chu-nhan: #F5B700;
  --primary-light: rgba(70, 159, 76, .18);

  /* Các họ màu phụ: nền chip → translucent tối, chữ → bản sáng */
  --carb-light: rgba(184, 90, 51, .18);   --carb-dark: #EDAF8C;
  --success-light: rgba(110, 148, 102, .18); --success-dark: #A9CBA0;
  --gold-light: rgba(195, 164, 104, .16);  --gold-dark: #DCC391;
  --warning-light: rgba(230, 150, 50, .15); --warning-dark: #EFB979;
  --danger-light: rgba(214, 69, 60, .16);  --danger-dark: #F0958D;

  /* Viền & bóng trên nền tối */
  --border: rgba(141, 239, 192, .22);
  --border-light: rgba(141, 239, 192, .13);
  --border-hair: 1px solid rgba(141, 239, 192, .13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
  --shadow: 0 6px 22px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-hover: 0 14px 34px rgba(0, 0, 0, .45);

}

html:not([data-che-do="ngay"]) input, html:not([data-che-do="ngay"]) select, html:not([data-che-do="ngay"]) textarea, html:not([data-che-do="ngay"]) .form-control {
  background-color: #07241C;
  color: var(--text-primary);
  border-color: var(--border);
}
html:not([data-che-do="ngay"]) input::placeholder, html:not([data-che-do="ngay"]) textarea::placeholder { color: var(--text-light); }

html:not([data-che-do="ngay"]) body { background: var(--bg-main); }

/* ── Header: chip nổi trên nền tối ── */
html:not([data-che-do="ngay"]) .app-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html:not([data-che-do="ngay"]) .logo {
  background: #F2F0EC;
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
html:not([data-che-do="ngay"]) .logo-img { height: 30px; }
html:not([data-che-do="ngay"]) .nav-menu {
  background: #F2F0EC;
  border-radius: 999px;
  padding: 4px 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
html:not([data-che-do="ngay"]) .nav-link { color: #101012; border-radius: 999px; }
html:not([data-che-do="ngay"]) .nav-link:hover { color: #101012; background: rgba(5, 33, 26, .08); }
html:not([data-che-do="ngay"]) .nav-link.active { background: #8DEFC0; color: #05211A; }
html:not([data-che-do="ngay"]) .menu-toggle .bar { background: #F2F0EC; }

/* 20/08/2026 — LỖI ĐÃ SỬA: mốc này trước là 900px, trong khi nút hamburger bung
   ra từ 1150px (xem css/style.css). Khoảng 901–1150px vì thế vẫn giữ nguyên
   `border-radius: 999px` của thanh nav NGANG, mà hộp thả xuống thì cao — bo tròn
   999px trên hộp cao biến nó thành cái bầu dục khổng lồ trùm lên nội dung, chữ
   thì dính sát mép vì padding vẫn là 4px 6px. Anh Tú gặp ở cửa sổ ~1089px.
   Hai mốc phải bằng nhau. */
@media (max-width: 1150px) {
  /* Dropdown mobile: panel trắng giữ nguyên hành vi, chỉ bo mềm */
  html:not([data-che-do="ngay"]) .nav-menu {
    border-radius: 18px; margin: 0 10px; padding: 8px 10px;
  }
  /* Mục xếp dọc chiếm trọn bề ngang — bo 999px thành viên thuốc dài, xấu. */
  html:not([data-che-do="ngay"]) .nav-link { border-radius: 12px; }
}

/* Điện thoại: panel hẹp nép phải (xem css/style.css). Bỏ margin ngang của bản
   trải hết bề ngang, không thì cộng dồn với right:10px làm panel lệch vào trong. */
@media (max-width: 600px) {
  html:not([data-che-do="ngay"]) .nav-menu {
    margin: 0; border-radius: 16px; padding: 8px;
  }
}

/* ── Chữ nằm TRỰC TIẾP trên nền tối (ngoài card trắng) ── */
html:not([data-che-do="ngay"]) .app-section > :is(h1, html:not([data-che-do="ngay"]) h2, html:not([data-che-do="ngay"]) h3, html:not([data-che-do="ngay"]) p),
html:not([data-che-do="ngay"]) .app-section > .section-header :is(h1, html:not([data-che-do="ngay"]) h2, html:not([data-che-do="ngay"]) h3, html:not([data-che-do="ngay"]) p, html:not([data-che-do="ngay"]) span),
html:not([data-che-do="ngay"]) .app-section > header :is(h1, html:not([data-che-do="ngay"]) h2, html:not([data-che-do="ngay"]) p),
html:not([data-che-do="ngay"]) .app-section > .section-title,
html:not([data-che-do="ngay"]) .app-section > .section-sub,
html:not([data-che-do="ngay"]) .app-section > .section-intro {
  color: #fff;
}
html:not([data-che-do="ngay"]) .app-section > p,
html:not([data-che-do="ngay"]) .app-section > .section-sub,
html:not([data-che-do="ngay"]) .app-section > .section-intro,
html:not([data-che-do="ngay"]) .app-section > .section-header p { color: rgba(255, 255, 255, .82); }

/* Thanh "← Quay lại" của màn con (app.js chèn trực tiếp lên nền) */
html:not([data-che-do="ngay"]) .back-hub, html:not([data-che-do="ngay"]) .back-hub a, html:not([data-che-do="ngay"]) .back-hub button { color: #fff; }

/* Đầu mục section dạng .section-head (cẩm nang, khoá học, tiện ích...) */
html:not([data-che-do="ngay"]) .app-section .section-head :is(h1, html:not([data-che-do="ngay"]) h2) { color: #fff; }
html:not([data-che-do="ngay"]) .app-section .section-head p { color: rgba(255, 255, 255, .82); }
html:not([data-che-do="ngay"]) .app-section .section-head p :is(strong, html:not([data-che-do="ngay"]) em) { color: #fff; }
/* Dòng giới thiệu của tool render trực tiếp trên nền */
html:not([data-che-do="ngay"]) :is(#camnangTool, html:not([data-che-do="ngay"]) #khoahocTool) > .cn-intro { color: rgba(255, 255, 255, .82); }
html:not([data-che-do="ngay"]) :is(#camnangTool, html:not([data-che-do="ngay"]) #khoahocTool) > .cn-intro strong { color: #fff; }

/* ── Vá sau lật token ── */
/* Chip ngà của chrome: chữ/viền phải giữ giá trị SÁNG-NỀN (không ăn token tối) */
html:not([data-che-do="ngay"]) .nav-link { font-family: 'Archivo Narrow', sans-serif; }
html:not([data-che-do="ngay"]) .nav-acc { color:var(--chu-nhan,#37813C) !important; border-color: #469F4C; }
html:not([data-che-do="ngay"]) .nav-acc:hover { background: rgba(70, 159, 76, .12); }
html:not([data-che-do="ngay"]) .nav-acc.nav-acc-on { background: #469F4C; color: #fff !important; }
/* Footer: --ink đã lật sáng nên ép nền tối riêng */
html:not([data-che-do="ngay"]) .app-footer { background-color: #041B15; }

/* ── Vá hex cứng còn sót sau lật token ── */
html:not([data-che-do="ngay"]) .a2hs-steps { color: var(--text-primary); }
/* Nhắc đăng nhập (03/09/2026): nền kem + chữ nâu của bản ngày đọc chói mắt
   trong đêm — mẹ hay mở app lúc 2h sáng. Giữ sắc vàng để vẫn là "lưu ý", hạ
   độ sáng nền xuống. */
html:not([data-che-do="ngay"]) .a2hs-nhac {
  background: rgba(242, 217, 160, .12);
  border-color: rgba(242, 217, 160, .35);
  color: var(--text-primary);
}
html:not([data-che-do="ngay"]) .a2hs-head strong { color: var(--ink); }
/* Cẩm nang / Khoá học (token scoped riêng) */
html:not([data-che-do="ngay"]) :is(#camnangTool, html:not([data-che-do="ngay"]) #khoahocTool) {
  --cn-ink: #EAF6EE;
  --cn-ink-2: #D6E7DC;
  --cn-muted: #A3BDB1;
  --cn-primary-soft: rgba(141, 239, 192, .14);
  --cn-soft: #0A2A20;
  --cn-border: rgba(141, 239, 192, .16);
  font-family: var(--font-body);
}
/* Tra cứu thực phẩm (token scoped riêng) */
html:not([data-che-do="ngay"]) #pregnancyFoodTool {
  --pft-ink: #EAF6EE;
  --pft-ink-2: #D6E7DC;
  --pft-muted: #A3BDB1;
  --pft-soft: #0A2A20;
  --pft-blush: #082A20;
  --pft-pink-dark: #A9D7F2;
  --pft-pink-soft: rgba(141, 239, 192, .14);
  --pft-border: rgba(141, 239, 192, .16);
  --pft-safe: #9CCB90;
  --pft-safe-soft: rgba(110, 148, 102, .18);
  --pft-caution: #DCC391;
  --pft-caution-soft: rgba(195, 164, 104, .15);
  --pft-avoid: #EDA49B;
  --pft-avoid-soft: rgba(177, 66, 60, .18);
  --pft-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  font-family: var(--font-body);
}
html:not([data-che-do="ngay"]) #pregnancyFoodTool .pft-locked-toc, html:not([data-che-do="ngay"]) #pregnancyFoodTool .pft-locked-preview { color: var(--pft-ink-2); }
/* Bề mặt trắng cứng trong tool cẩm nang/khoá học → surface tối */
html:not([data-che-do="ngay"]) :is(#camnangTool, html:not([data-che-do="ngay"]) #khoahocTool) :is(.cn-home-card, html:not([data-che-do="ngay"]) .cn-card, html:not([data-che-do="ngay"]) .cn-detail, html:not([data-che-do="ngay"]) .cn-video-h, html:not([data-che-do="ngay"]) .cn-back, html:not([data-che-do="ngay"]) .cn-congcu-btn) {
  background-color: var(--surface);
}
/* Tra cứu thực phẩm + Lịch khám: surface tối qua biến fallback */
html:not([data-che-do="ngay"]) #pregnancyFoodTool { --pft-surface: var(--surface); --pft-surface-warm: #0A2A20; --pft-surface-tint: rgba(214, 69, 60, .12); }
html:not([data-che-do="ngay"]) #lckt { --lk-surface: var(--surface); --lk-surface-warm: #0A2A20; --lk-ink: #EAF6EE; --lk-ink2: #D6E7DC; --lk-border: rgba(141, 239, 192, .18); }
/* Hero tool thực phẩm: gradient kem → gradient tối */
html:not([data-che-do="ngay"]) #pregnancyFoodTool .pft-hero {
  background: linear-gradient(160deg, #0C3326 0%, #082A20 55%, #05211A 100%);
}
/* Lịch khám: trạng thái chọn (.on) nền kem → mint translucent, chữ mint */
html:not([data-che-do="ngay"]) #lckt .lk-tbtn.on { background: rgba(141, 239, 192, .16); color: var(--chu-nhan, #F5B700); border-color: #4CB454; }
html:not([data-che-do="ngay"]) #lckt .lk-twbtn.on { background: rgba(141, 239, 192, .16); border-color: #4CB454; }
html:not([data-che-do="ngay"]) #lckt .lk-twbtn.on .tw-d { color: #A3BDB1; }

/* ── Component nhúng CSS trong JS (hub, dashboard, a2hs banner) — html-prefix để thắng specificity ── */
html:not([data-che-do="ngay"]) .hub-search { background: #07241C; border-color: var(--border); color: var(--text-primary); }
html:not([data-che-do="ngay"]) .hub-search:focus { background: #07241C; border-color: #4CB454; }
html:not([data-che-do="ngay"]) .hub-chip { background: var(--surface); border-color: var(--border-light); color: var(--text-secondary); }
html:not([data-che-do="ngay"]) .hub-chip.on { background: #469F4C; border-color: #469F4C; color: #fff; }
html:not([data-che-do="ngay"]) .hub-tile { background: var(--surface); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
html:not([data-che-do="ngay"]) .hub-tile-ic { background: linear-gradient(145deg, rgba(141, 239, 192, .16), rgba(70, 159, 76, .12)); border-color: rgba(141, 239, 192, .2); box-shadow: none; }
html:not([data-che-do="ngay"]) .hub-tile-ten { color: var(--text-primary); }
html:not([data-che-do="ngay"]) .hub-empty { color: var(--text-light); }
html:not([data-che-do="ngay"]) .ld-hero { background: linear-gradient(135deg, #0C3326, #082A20); }
html:not([data-che-do="ngay"]) .ld-daily { background: linear-gradient(135deg, #0B2D23, #082A20); }
html:not([data-che-do="ngay"]) .ld-wd-cta-card { background: linear-gradient(135deg, #0C3326, #082A20); }
html:not([data-che-do="ngay"]) .ld-wd-soft { background: linear-gradient(135deg, #0B2D23, #082A20); }
html:not([data-che-do="ngay"]) .ld-streak-best, html:not([data-che-do="ngay"]) .ld-streak-mile { background: rgba(141, 239, 192, .14); color: var(--chu-nhan, #F5B700); border-color: rgba(141, 239, 192, .3); }
html:not([data-che-do="ngay"]) .ld-today-chip { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
html:not([data-che-do="ngay"]) .ld-wd-normal .ld-wd-big { color: var(--chu-nhan, #F5B700); }
html:not([data-che-do="ngay"]) .ld-wd-warn .ld-wd-big { color: #EFB979; }
html:not([data-che-do="ngay"]) .ld-wd-danger .ld-wd-big { color: #F0958D; }
html:not([data-che-do="ngay"]) .a2hs { background: var(--surface); }
/* Mã QR phải đen-trên-trắng mới quét được → đệm trắng quanh mọi mã trên nền tối */
html:not([data-che-do="ngay"]) .lolo-zalo-qr img, html:not([data-che-do="ngay"]) .ag-qr { background: #fff; padding: 8px; border-radius: 12px; }

/* ── Tương phản cao: toàn bộ chữ về trắng/gần trắng (lệnh user 18/08) ── */
html:not([data-che-do="ngay"]) {
  --text-secondary: #E8F2EC;
  --text-light: #D5E4DB;
}
html:not([data-che-do="ngay"]) .app-section .section-head p,
html:not([data-che-do="ngay"]) .app-section > p, html:not([data-che-do="ngay"]) .app-section > .section-sub, html:not([data-che-do="ngay"]) .app-section > .section-intro,
html:not([data-che-do="ngay"]) .app-section > .section-header p { color: #F4FAF6; }
html:not([data-che-do="ngay"]) .ld-streak-txt { color: #FFFFFF; }
html:not([data-che-do="ngay"]) .ld-today-lbl { color: #E8F2EC; }
html:not([data-che-do="ngay"]) .ld-wd-lbl { color: #FFFFFF; }
html:not([data-che-do="ngay"]) .ld-wd-stale { color: #EFB979; }
html:not([data-che-do="ngay"]) .ld-warn-t { color: #F0958D; }
html:not([data-che-do="ngay"]) .ld-size-mine, html:not([data-che-do="ngay"]) .ld-size-reset { color: var(--chu-nhan, #F5B700); }
html:not([data-che-do="ngay"]) .hub-tile-ten { color: #FFFFFF; }
html:not([data-che-do="ngay"]) #camnangTool,
html:not([data-che-do="ngay"]) #khoahocTool { --cn-ink: #FFFFFF; --cn-ink-2: #EAF4EE; --cn-muted: #D5E4DB; }
/* Card bài học/cẩm nang nền TRẮNG cứng (#fff) + chữ trắng dark = không đọc.
   Trong nền tối, các nền trắng cứng phải thành nền tối. */
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-lesson,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .cn-detail,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .cn-card,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .cn-video-h { background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-item:hover { background: var(--bg-soft); }
/* Sidebar LMS (danh sách Phần/Bài) còn 4 chỗ nền TRẮNG cứng khác — --cn-ink/-muted đã
   lật sang màu sáng (dòng trên) nên chữ trên các nền trắng cứng này gần như vô hình
   ("ThS.BS Nguyễn Ngọc Tú", "Phần 1: …"). Việc 1 (01/09/2026): quy tất cả về var(--surface). */
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-side,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-home-btn,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-part-h,
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .kh-item-no { background: var(--surface); }
html:not([data-che-do="ngay"]) #pregnancyFoodTool { --pft-ink: #FFFFFF; --pft-ink-2: #EAF4EE; --pft-muted: #D5E4DB; }
html:not([data-che-do="ngay"]) #lckt { --lk-ink: #FFFFFF; --lk-ink2: #EAF4EE; }

/* ── Bộ nền thử nghiệm (mở bằng lolool.vn/?nen=1, chọn xong báo để chốt) ── */
/* Icon tương phản cao: ô icon nền SÁNG để emoji nào cũng nổi (lệnh user 18/08) */
html:not([data-che-do="ngay"]) .hub-tile-ic { background: linear-gradient(145deg, #F4FAF3, #E2F1E3); border-color: rgba(70,159,76,.2); }
/* Mỗi nền = TRỌN bảng màu: nền + chữ + card/bảng + viền + hero (lệnh user 18/08) */
html:not([data-che-do="ngay"])[data-nen="den"] {
  --bg-main:#0A0A0C; --bg-soft:#141417; --surface:#17171B; --surface-warm:#141418;
  --ink:#F5F5F7; --text-primary:#F0F0F4; --text-secondary:#E2E2E8; --text-light:#CBCBD4;
  --border:rgba(255,255,255,.2); --border-light:rgba(255,255,255,.11);
  --primary-dark:#8FE39B; --primary-light:rgba(141,227,155,.14);
}
html:not([data-che-do="ngay"])[data-nen="den"] .hero-anat { --ha-bg-1:#1B1B21; --ha-bg-2:#121216; --ha-bg-3:#0A0A0C; --ha-ink:10,10,14; }
html:not([data-che-do="ngay"])[data-nen="navy"] {
  --bg-main:#071A2A; --bg-soft:#0B2436; --surface:#0E2638; --surface-warm:#0C2233;
  --ink:#EEF6FC; --text-primary:#EAF3FA; --text-secondary:#D6E6F2; --text-light:#B9D0E2;
  --border:rgba(141,200,239,.26); --border-light:rgba(141,200,239,.14);
  --primary-dark:#8FE3B0; --primary-light:rgba(143,227,176,.14);
}
html:not([data-che-do="ngay"])[data-nen="navy"] .hero-anat { --ha-bg-1:#0D2B44; --ha-bg-2:#0A2236; --ha-bg-3:#071A2A; --ha-ink:6,20,33; }
html:not([data-che-do="ngay"])[data-nen="man"] {
  --bg-main:#1B0F15; --bg-soft:#24141C; --surface:#291822; --surface-warm:#24141C;
  --ink:#FAF2F5; --text-primary:#F7EDF1; --text-secondary:#EBDAE1; --text-light:#D8BFC9;
  --border:rgba(239,178,190,.24); --border-light:rgba(239,178,190,.13);
  --primary-dark:#F5CE7B; --primary-light:rgba(245,206,123,.14);
  --gold-dark:#F5CE7B;
}
html:not([data-che-do="ngay"])[data-nen="man"] .hero-anat { --ha-bg-1:#2E1A24; --ha-bg-2:#24141C; --ha-bg-3:#1B0F15; --ha-ink:24,12,18; --ha-mint:#F5CE7B; --ha-cyan:#E8A9BC; --ha-dot:#FBE9D0; }
html:not([data-che-do="ngay"])[data-nen="than"] {
  --bg-main:#121412; --bg-soft:#191C19; --surface:#1C201C; --surface-warm:#191C19;
  --ink:#F2F5F2; --text-primary:#EEF2EE; --text-secondary:#DEE5DF; --text-light:#C4CFC6;
  --border:rgba(210,225,213,.22); --border-light:rgba(210,225,213,.12);
  --primary-dark:#9BE0A5; --primary-light:rgba(155,224,165,.14);
}
html:not([data-che-do="ngay"])[data-nen="than"] .hero-anat { --ha-bg-1:#20241F; --ha-bg-2:#191C19; --ha-bg-3:#121412; --ha-ink:16,19,16; }
html:not([data-che-do="ngay"])[data-nen="den"] body, html:not([data-che-do="ngay"])[data-nen="navy"] body, html:not([data-che-do="ngay"])[data-nen="man"] body, html:not([data-che-do="ngay"])[data-nen="than"] body { background: var(--bg-main); }
html:not([data-che-do="ngay"])[data-nen] .kham-band, html:not([data-che-do="ngay"])[data-nen] .kb-hero { background: var(--bg-main); }
html:not([data-che-do="ngay"])[data-nen] .app-footer { background-color: color-mix(in srgb, var(--bg-main) 80%, #000); }
/* Các khối hardcode theo tông rêu → ăn theo bảng màu đang chọn */
html:not([data-che-do="ngay"])[data-nen] .hub-search, html:not([data-che-do="ngay"])[data-nen] input, html:not([data-che-do="ngay"])[data-nen] select, html:not([data-che-do="ngay"])[data-nen] textarea, html:not([data-che-do="ngay"])[data-nen] .form-control { background-color: color-mix(in srgb, var(--bg-main) 86%, #fff); }
html:not([data-che-do="ngay"])[data-nen] .ld-hero, html:not([data-che-do="ngay"])[data-nen] .ld-wd-cta-card { background: linear-gradient(135deg, var(--bg-soft), var(--surface)); }
html:not([data-che-do="ngay"])[data-nen] .ld-daily, html:not([data-che-do="ngay"])[data-nen] .ld-wd-soft { background: linear-gradient(135deg, var(--surface), var(--bg-soft)); }
html:not([data-che-do="ngay"])[data-nen] .ld-streak-best, html:not([data-che-do="ngay"])[data-nen] .ld-streak-mile { background: var(--primary-light); color: var(--primary-dark); border-color: var(--border); }
html:not([data-che-do="ngay"])[data-nen] .ld-wd-normal .ld-wd-big { color: var(--primary-dark); }
html:not([data-che-do="ngay"])[data-nen] #pregnancyFoodTool .pft-hero { background: linear-gradient(160deg, var(--bg-soft) 0%, var(--surface) 55%, var(--bg-main) 100%); }
html:not([data-che-do="ngay"])[data-nen] #pregnancyFoodTool { --pft-surface: var(--surface); --pft-surface-warm: var(--surface-warm); --pft-border: var(--border-light); }
html:not([data-che-do="ngay"])[data-nen] :is(#camnangTool, html:not([data-che-do="ngay"]) #khoahocTool) { --cn-soft: var(--surface-warm); --cn-border: var(--border-light); --cn-primary-soft: var(--primary-light); }
html:not([data-che-do="ngay"])[data-nen] #lckt { --lk-surface: var(--surface); --lk-surface-warm: var(--surface-warm); --lk-border: var(--border-light); }
.nen-picker { position: fixed; left: 16px; bottom: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
  font-family: 'Archivo Narrow', sans-serif; color: #fff; box-shadow: 0 16px 44px rgba(0,0,0,.5); }
.nen-picker b { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.nen-picker button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border-light);
  border-radius: 999px; padding: 8px 14px; color: #fff; font-family: inherit; font-size: 15px; cursor: pointer; min-height: 40px; }
.nen-picker button.on { border-color: #8DEFC0; background: rgba(141,239,192,.14); }
.nen-picker .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: inline-block; }

/* Biến thể trạng thái của thẻ cân nặng (dashboard) — nền tối ám màu trạng thái */
html:not([data-che-do="ngay"]) .ld-wd-normal { background: linear-gradient(135deg, rgba(110, 148, 102, .16), var(--surface)); }
html:not([data-che-do="ngay"]) .ld-wd-warn { background: linear-gradient(135deg, rgba(195, 164, 104, .18), var(--surface)); }
html:not([data-che-do="ngay"]) .ld-wd-danger { background: linear-gradient(135deg, rgba(214, 69, 60, .2), var(--surface)); }
html:not([data-che-do="ngay"]) .ld-wd-eyebrow { color: var(--text-secondary); }
.nen-picker .nen-tuchon { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 4px 2px 0; cursor: pointer; }
.nen-picker input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--border-light); border-radius: 8px; background: none; padding: 2px; cursor: pointer; }

/* ══ ÁP CHO CẢ 2 CHẾ ĐỘ: font đồng nhất theo trang chủ ══ */
:root {
  --font-display: 'Libre Caslon Text', Georgia, serif;
  --font-heading: 'Archivo Narrow', sans-serif;
  --font-body: 'EB Garamond', Georgia, serif;
}
input, select, textarea, button { font-family: var(--font-heading); }
.nav-link { font-family: 'Archivo Narrow', sans-serif; }

/* ══ CHẾ ĐỘ NGÀY: trả về palette kem sáng gốc của style.css ══ */
html[data-che-do="ngay"] { color-scheme: light; }

/* ══ Nút Đêm/Ngày trong cụm nổi ══ */
.cheDo-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: var(--surface, #fff); color: var(--text-primary, #33414E);
  border: 1px solid var(--border-light, #E7E0D2); box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  font-family: 'Archivo Narrow', sans-serif; font-size: 20px;
  transition: transform .18s ease;
}
.cheDo-btn:hover { transform: translateY(-2px); }
.cheDo-btn small { font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* ── Thẻ "mốc" của 5 công cụ (hút sữa, Kegel, ngủ, nhật ký bé, thở chậm) ──
   Bản sáng giữ nguyên nền kem #FFF6E7 + chữ nâu #9A6B22 (đo được 4.35:1).
   Nhưng nền kem là một tấm sáng chói giữa giao diện tối, nên nền tối lật sang
   cặp token vàng: nền vàng trong suốt trên nền tối + chữ vàng sáng (≈7:1).
   Để ở đây chứ không đổi thẳng trong JS vì cặp token làm bản SÁNG kém đi
   (3.33:1) — mỗi chế độ giữ cặp màu tốt nhất của nó. */
html:not([data-che-do="ngay"]) .hs-milestone,
html:not([data-che-do="ngay"]) .kg-milestone,
html:not([data-che-do="ngay"]) .ng-milestone,
html:not([data-che-do="ngay"]) .nb-milestone,
html:not([data-che-do="ngay"]) .tc-milestone {
  background: var(--gold-light);
  border-color: var(--border-light);
  color: var(--gold-dark);
}

/* ══════════════════════════════════════════════════════════════════════════
   VÉT NỐT NỀN SÁNG CỨNG (21/08/2026) — cùng một căn bệnh với 5 chỗ vừa sửa.

   Bệnh: rule đặt nền sáng bằng MÃ MÀU CỨNG (#FBF8F1, #f0fdf4, #fef2f2…) mà
   để màu chữ chảy theo token. Nền tối lật token → chữ thành trắng, còn nền
   vẫn trắng. Đo bằng Chrome headless: 1.01–1.14:1. 1.0 là mù hoàn toàn.

   Cách chữa: KHÔNG động vào bản sáng (mã màu bên đó là thiết kế đã cân — vd
   cặp kem #FFF6E7/#9A6B22 đạt 4.35:1, hơn cặp token 3.33:1). Chỉ đè ở đây,
   bằng cặp token "nền trong suốt + chữ sáng" mà nền tối đã dựng sẵn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hành trình: thẻ nhiệm vụ & huy hiệu (js/hanhtrinh.js) ──
   Nền kem #FBF8F1 / #EDF6EE, chữ để token lo → 1.04–1.08:1. */
html:not([data-che-do="ngay"]) .ht-quest,
html:not([data-che-do="ngay"]) .ht-badge { background: var(--surface-warm); }
html:not([data-che-do="ngay"]) .ht-quest.done,
html:not([data-che-do="ngay"]) .ht-badge.on { background: var(--success-light); }
/* Huy hiệu đã mở khoá tự đặt chữ xanh đậm #37813C — trên nền tối phải là bản sáng. */
html:not([data-che-do="ngay"]) .ht-badge.on .ht-bten { color: var(--success-dark); }

/* ── Giải mã xét nghiệm máu: chip "chưa nhập" (js/bloodref.js) ──
   background:#eee là màu xám mặc định của web thời 2010, chữ thì var(--muted)
   đã lật sáng → 1.01:1, đúng bằng mù. */
html:not([data-che-do="ngay"]) #blood-tool .pill.na { background: var(--border-light); }

/* ── Đếm ngược: hộp tra ngày dự sinh (js/countdown.js) ──
   Nền #FBFDFB gần như trắng tinh; chữ trong hộp kế thừa token → 1.09:1.
   Ngày dự sinh in đậm màu xanh rừng #256A2E cũng phải chuyển mint. */
html:not([data-che-do="ngay"]) .cd-lookup { background: var(--surface-warm); }
html:not([data-che-do="ngay"]) .cd-lookup-edd { color: var(--primary-dark); }

/* Nút "giờ đo" tự đặt cả nền lẫn chữ (#FBF6EA/#8A6A2B) nên không mù hẳn,
   nhưng 4.25:1 vẫn dưới chuẩn AA và là một viên kẹo sáng giữa nền tối. */
html:not([data-che-do="ngay"]) .cd-giodo { background: var(--gold-light); color: var(--gold-dark); }
html:not([data-che-do="ngay"]) .cd-giodo:hover { background: rgba(195, 164, 104, .26); }

/* ── Vắc-xin: khung "nhóm cần tránh" (js/vaccine.js) ──
   Đây là khối CẢNH BÁO — mẹ bầu không đọc được thì nguy hiểm thật.
   Nền hồng #FBF2EF, danh sách vắc-xin sống dùng var(--text-primary) → 1.01:1. */
html:not([data-che-do="ngay"]) .vc-tranh { background: var(--danger-light); border-color: var(--border-light); }
html:not([data-che-do="ngay"]) .vc-tranh h3 { color: var(--danger-dark); }

/* ── Giải phiếu: thẻ chỉ số NGOÀI DẢI (js/giaiphieu.js) ──
   Nền #fffdf6 vàng nhạt để đánh dấu bất thường; giữ ý nghĩa "vàng" bằng
   cặp token vàng thay vì bỏ hẳn. */
html:not([data-che-do="ngay"]) #gp .gp-the.is-ngoai { background: var(--gold-light); }

/* ── Sổ theo dõi: ô "Bé 1 / Bé 2" (js/sotheodoi.js) ── */
html:not([data-che-do="ngay"]) .st-be { background: var(--surface-warm); }
/* Hai bé phải khác màu nhau thì mẹ song thai mới phân biệt được cột nào của ai.
   Bản sáng: Bé 1 xanh #469F4C, Bé 2 xanh biển #2E7D9C. Cả hai màu này sinh ra
   cho nền kem — kéo nền về tối thì #2E7D9C tụt còn 3.32:1, nên phải đổi cặp
   chứ không chỉ đổi nền. Giữ nguyên tinh thần "một lạnh một ấm": mint + vàng. */
html:not([data-che-do="ngay"]) .st-be .st-belbl { color: var(--primary-dark); }
html:not([data-che-do="ngay"]) .st-be.st-be2 .st-belbl { color: var(--gold-dark); }

/* ── Nhạc thư giãn: bài đang phát (js/nhacthu.js) ──
   Trớ trêu: đúng cái bài mẹ đang nghe thì lại là bài không đọc được tên (1.01:1). */
html:not([data-che-do="ngay"]) .nt-item.nt-active { background: var(--primary-light); }

/* ── Câu hỏi bác sĩ: chip triệu chứng khi rê chuột (js/cauhoibs.js) ──
   Trạng thái thường đã dùng token, chỉ mỗi :hover trả về #EDF6EE cứng. */
html:not([data-che-do="ngay"]) .cb-tcchip:hover { background: var(--primary-light); }

/* ── Hút sữa: nút "thêm nhanh cữ" (js/hutsua.js) ── */
html:not([data-che-do="ngay"]) .hs-quick { background: var(--success-light); color: var(--success-dark); }
html:not([data-che-do="ngay"]) .hs-quick:hover { background: var(--primary-light); }

/* ── Cân nặng mẹ: nút phụ khi rê chuột (js/cannangme.js) ── */
html:not([data-che-do="ngay"]) .cm-btn.cm-ghost { color: var(--primary-dark); }
html:not([data-che-do="ngay"]) .cm-btn.cm-ghost:hover { background: var(--primary-light); }

/* ── Cổng tài khoản: nhắc "mẹ chưa có email" (js/auth-gate.js) ──
   Ưu tiên cao: mất dòng này thì mẹ quên mật khẩu là mất luôn tài khoản. */
html:not([data-che-do="ngay"]) .ag-mail-thieu { background: var(--gold-light); border-color: var(--border-light); }

/* ── Đường huyết: BĂNG CẢNH BÁO và hàng bảng (css/glucose.css) ──
   Ưu tiên cao nhất của cả đợt này. Băng "trong dải" và "vượt ngưỡng", cùng
   các hàng bảng tô xanh/đỏ, đều đặt nền cứng #f0fdf4 / #fef2f2 rồi để chữ
   theo token → 1.02–1.06:1. Mẹ tiểu đường thai kỳ mở app ra chỉ thấy một
   vệt sáng trống trơn, không biết mình vừa vượt ngưỡng.
   (Băng "warn" đã lành sẵn vì nó dùng var(--warning-light).) */
html:not([data-che-do="ngay"]) .tdh-alert.ok { background: var(--success-light); }
html:not([data-che-do="ngay"]) .tdh-alert.danger { background: var(--danger-light); }
html:not([data-che-do="ngay"]) table.tdh-tbl tr.r-ok td { background: var(--success-light); }
html:not([data-che-do="ngay"]) table.tdh-tbl tr.r-danger td { background: var(--danger-light); }
/* Hai nút phụ: nền :hover cứng, chữ thì #667581/#dc2626 — cả hai màu chữ này
   vốn sinh ra cho nền kem, đặt lên nền tối là hụt. Đổi cả cặp cho khớp. */
html:not([data-che-do="ngay"]) .tdh-btn-reset { color: var(--text-secondary); }
html:not([data-che-do="ngay"]) .tdh-btn-reset:hover { background: var(--border-light); }
html:not([data-che-do="ngay"]) .tdh-btn-clear { color: var(--danger-dark); border-color: var(--danger-dark); }
html:not([data-che-do="ngay"]) .tdh-btn-clear:hover { background: var(--danger-light); }
/* Đầu bảng + thẻ trạng thái trong bảng cũng là nền kem/pastel cứng. */
html:not([data-che-do="ngay"]) table.tdh-tbl thead th { background: var(--surface-warm); color: var(--text-secondary); border-bottom-color: var(--border); }

/* ── Cẩm nang: nhãn "Miễn phí" (css/camnang.css) ──
   Anh em của nó (.cn-tier.locked) đã dùng cặp biến nên tự lật; mỗi .free bị
   bỏ quên với #eef3e8 cứng. */
html:not([data-che-do="ngay"]) :is(#camnangTool, #khoahocTool) .cn-tier.free {
  background: var(--success-light); color: var(--success-dark);
}

/* ── Lịch khám: băng cảnh báo + mốc "đang tới" (css/lichkham.css) ──
   Ưu tiên cao. .lk-warn là băng đỏ nhạt #fef2f2 với chữ đỏ sẫm #7f1d1d và
   #1e3a8a — cặp màu này chỉ đúng khi nằm trên nền sáng. Trên nền tối nó vừa
   là tấm chói giữa giao diện, vừa hụt chuẩn (tiêu đề 4.41:1). Lật cả cụm. */
html:not([data-che-do="ngay"]) #lckt .lk-warn { background: var(--danger-light); border-color: var(--danger-dark); }
html:not([data-che-do="ngay"]) #lckt .lk-warn-t { color: var(--danger-dark); }
html:not([data-che-do="ngay"]) #lckt .lk-warn-b { color: var(--text-primary); }
html:not([data-che-do="ngay"]) #lckt .lk-warn.lk-warn-info { background: var(--primary-light); border-color: var(--border); }
html:not([data-che-do="ngay"]) #lckt .lk-warn.lk-warn-info .lk-warn-t { color: var(--primary-dark); }
html:not([data-che-do="ngay"]) #lckt .lk-warn.lk-warn-info .lk-warn-b { color: var(--text-primary); }
/* Mốc khám của tuần hiện tại: nền #eef5ee + viền sáng #d1fae5 quanh thẻ. */
html:not([data-che-do="ngay"]) #lckt .lk-ms.now { background: var(--success-light); box-shadow: 0 0 0 1px rgba(141, 239, 192, .3); }
/* Thẻ tag trong mốc khám: nền kem cứng, chữ xám nền-sáng. */
html:not([data-che-do="ngay"]) #lckt .ms-tag,
html:not([data-che-do="ngay"]) #lckt .ms-tag.b, html:not([data-che-do="ngay"]) #lckt .ms-tag.p,
html:not([data-che-do="ngay"]) #lckt .ms-tag.v, html:not([data-che-do="ngay"]) #lckt .ms-tag.r,
html:not([data-che-do="ngay"]) #lckt .ms-tag.g, html:not([data-che-do="ngay"]) #lckt .ms-tag.a {
  background: var(--border-light); color: var(--text-secondary);
}
/* Nút "thêm vào lịch": chữ xanh #469F4C vốn cho nền trắng; nền :hover cứng. */
html:not([data-che-do="ngay"]) #lckt .ms-gc { color: var(--primary-dark); border-color: var(--border); }
html:not([data-che-do="ngay"]) #lckt .ms-gc:hover { background: var(--primary-light); }

/* ── Tài khoản: nút "Đổi mật khẩu" khi rê chuột (css/style.css) ──
   Nền thường đã là var(--surface-warm), riêng :hover rơi về #f3eee3 cứng. */
html:not([data-che-do="ngay"]) .au-toggle:hover { background: var(--primary-light); }