/* =====================================================================
   Chế độ tối: CHỈ bật khi người dùng chọn (theme.js đặt <html data-theme="dark">); mặc định luôn sáng. Nạp SAU mọi CSS khác.
   Giữ luật màu Loa Báo Tiền: cam = tín hiệu, cobalt = tiền, mực = chữ. Trong tối "mực" là chữ sáng,
   nền là sứ than. Màn hình LED, chân trang, ô mã 2FA vốn tối sẵn nên giữ nguyên bộ màu sáng bên trong.
   ===================================================================== */

/* Mặc định sáng; "only" báo trình duyệt (Chrome, Cốc Cốc, Samsung Internet) KHÔNG tự đảo màu trang. */
:root { color-scheme: only light; }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --ground: #111215;
    --plate: #1A1C21;
    --plate-2: #252830;
    --slot: #0C0D10;
    --line: #353946;
    --ink: #ECEEF2;
    --ink-2: #BAC0CC;
    --ink-3: #8C94A4;
    --orange: #2F6BFF;
    --orange-deep: #8DB0FF;
    --cobalt: #8AA5FF;
    --surface: #1F2127;
    --panel: #08090B;
    --on-ink: #111215;
  }

  /* Vùng vốn tối: dùng lại bộ màu sáng gốc để mọi thứ bên trong (logo, nhãn, phím) trông như cũ. */
  :root[data-theme="dark"] .foot, :root[data-theme="dark"] .secret-box, :root[data-theme="dark"] .result, :root[data-theme="dark"] .led-chip, :root[data-theme="dark"] .cta, :root[data-theme="dark"] .guide-stage {
    --plate: #F6F7F9; --plate-2: #DCDEE5; --line: #C4C7D0; --surface: #FFFFFF;
    --ink: #14161A; --ink-2: #383D48; --ink-3: #586070; --cobalt: #2450F5; --orange-deep: #1F4FD1;
  }
  :root[data-theme="dark"] .foot { box-shadow: 0 -1px 0 var(--line); }
  :root[data-theme="dark"] .secret-box { color: #F6F7F9; }
  :root[data-theme="dark"] .led-chip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(56, 189, 248, 0.25) 45%, rgba(14, 165, 233, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.75), inset 0 -3px 8px rgba(2, 132, 199, 0.6), inset 0 0 10px rgba(186, 230, 253, 0.4);
    color: #7DD3FC;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  /* Phím mực: trong tối mực là màu sáng, nên phím "ink" thành phím sáng chữ tối; hover nhạt hơn một bậc. */
  :root[data-theme="dark"] .btn-ink:hover, :root[data-theme="dark"] .motion-toggle:hover { background: #FFFFFF; }
  :root[data-theme="dark"] .btn-ghost:hover { background: rgba(236, 238, 242, 0.08); }
  :root[data-theme="dark"] .btn-primary { color: #14161A; }
  :root[data-theme="dark"] ::selection { color: #14161A; }

  /* Bóng đổ: nền than nuốt bóng mực, thêm viền sáng mảnh để khối vẫn nổi. */
  :root[data-theme="dark"] .auth-plate, :root[data-theme="dark"] .diagram, :root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .sel-pop, :root[data-theme="dark"] .country-pop { box-shadow: 0 0 0 1px var(--line), 0 40px 60px -40px rgba(0, 0, 0, 0.8); }

  /* Ô báo lỗi, nhãn trạng thái, ghi chú: nền tối ngả màu, chữ sáng ngả màu (≥ 4.5:1). */
  :root[data-theme="dark"] .form-error, :root[data-theme="dark"] .status-badge.st-rejected { background: #3A1A10; color: #FFB89B; }
  :root[data-theme="dark"] .form-hint.is-bad, :root[data-theme="dark"] .bank-item-note, :root[data-theme="dark"] .donate-expired, :root[data-theme="dark"] .transfer-field.highlight strong { color: #FF9F7A; }
  :root[data-theme="dark"] .form-hint.is-good, :root[data-theme="dark"] .mfa-status .ic, :root[data-theme="dark"] .donate-paid, :root[data-theme="dark"] .pay-state, :root[data-theme="dark"] .pe-copy.is-copied { color: #5FD48A; }
  :root[data-theme="dark"] .status-badge.st-pending, :root[data-theme="dark"] .dh-tag.is-wait { background: #3A2C0E; color: #FFD27A; }
  :root[data-theme="dark"] .status-badge.st-active, :root[data-theme="dark"] .verified-badge, :root[data-theme="dark"] .dh-tag.is-good { background: #12331E; color: #7EE2A2; }
  :root[data-theme="dark"] .dh-tag.is-warn, :root[data-theme="dark"] .ap-pill, :root[data-theme="dark"] .lg-fill { background: #3A1F10; color: #FFAA80; }
  :root[data-theme="dark"] .transfer-field.highlight { background: #2C1F12; }
  :root[data-theme="dark"] .msg-blocked, :root[data-theme="dark"] .lg-note, :root[data-theme="dark"] .gd-warn { background: #33280E; color: #FFD98A !important; }
  :root[data-theme="dark"] .site-banner.is-info { background: #13253F; color: #B9D6FF; }
  :root[data-theme="dark"] .site-banner.is-warning { background: #3A2E0A; color: #FFE08A; }
  :root[data-theme="dark"] .gd-banks .is-ok { color: #6FDB97; }
  :root[data-theme="dark"] .gd-banks .is-no { color: #FFA27C; }
  :root[data-theme="dark"] .lb-rank li.is-top-1 .lb-no { background: #3A2F0C; color: #FFD45C; }
  :root[data-theme="dark"] .lb-rank li.is-top-2 .lb-no { background: #2A2E36; color: #CBD3DE; }
  :root[data-theme="dark"] .lb-rank li.is-top-3 .lb-no { background: #3A2213; color: #FFB27F; }
  :root[data-theme="dark"] #recStop { color: #FF7A7A; border-color: #FF7A7A; }
  :root[data-theme="dark"] .gd-hero { background: linear-gradient(135deg, var(--surface) 55%, #2E1D14); }
  :root[data-theme="dark"] .guide-stage-wrap::before { background: radial-gradient(60% 55% at 45% 45%, #2A2D35 0%, var(--plate) 55%, transparent 75%); }
  :root[data-theme="dark"] .skeleton-block { background: linear-gradient(100deg, var(--plate-2) 30%, #30343D 50%, var(--plate-2) 70%); background-size: 200% 100%; }
  :root[data-theme="dark"] .ds-media-box { background: repeating-conic-gradient(#22252C 0 25%, #1A1C21 0 50%) 0 0 / 20px 20px; }

  /* ---------- Lớp sticker: giấy pastel thành giấy than ngả màu, nét viền thành đường mảnh sáng ---------- */
  :root[data-theme="dark"] .theme-sticker {
    --stk-ink: #ECEEF2;
    --stk-paper: #15161A;
    --stk-sky: #121B29;
    --stk-mist: #17181C;
    --stk-lav: #1F1A2E;
    --stk-mint: #10261C;
    --stk-blue: #5AA9FF;
    --stk-violet: #A99BFF;
    --stk-line: 1px solid #3B404C;
  }
  :root[data-theme="dark"] .theme-sticker .bar.is-scrolled .bar-inner { background: rgba(21, 22, 26, 0.92); }
  /* Nút chính sticker: viên thuốc sáng, chữ tối; hover cam chữ tối. */
  :root[data-theme="dark"] .theme-sticker .btn-primary, :root[data-theme="dark"] .theme-sticker .btn-ink { color: #111215; border-color: #ECEEF2; }
  :root[data-theme="dark"] .theme-sticker .btn-primary:hover, :root[data-theme="dark"] .theme-sticker .btn-ink:hover { color: #111215; }
  /* Mọi chỗ tô vàng nắng giữ chữ tối (vàng vẫn là vàng). */
  :root[data-theme="dark"] .theme-sticker .btn-outline:hover, :root[data-theme="dark"] .theme-sticker .btn-federated:hover, :root[data-theme="dark"] .theme-sticker .guide-step.is-active .guide-num, :root[data-theme="dark"] .theme-sticker .amount-preset:hover, :root[data-theme="dark"] .theme-sticker .amount-preset[aria-pressed="true"], :root[data-theme="dark"] .theme-sticker .amount-preset.is-active, :root[data-theme="dark"] .theme-sticker .spec.is-active .spec-key { color: #14161A; }
  :root[data-theme="dark"] .theme-sticker .spec:nth-child(2).is-active .spec-key { background: #55DB9C; color: #14161A; }
  :root[data-theme="dark"] .theme-sticker .spec:nth-child(3).is-active .spec-key { background: #E9CCFF; color: #14161A; }
  :root[data-theme="dark"] .theme-sticker .spec:nth-child(4).is-active .spec-key { color: #14161A; }
  /* Làn VTPay nền bạc hà: bỏ màu chữ đậm dành cho nền sáng. */
  :root[data-theme="dark"] .theme-sticker .lane-vt { --cobalt: #8AA5FF; --ink-3: #A7B7AE; --ink-2: #CFDAD3; }
  :root[data-theme="dark"] .theme-sticker .lane-vt .step > div > span { color: #A7B7AE; }
  :root[data-theme="dark"] .theme-sticker .vp-rank-no.is-top-1 { color: #FFD45C; }
  :root[data-theme="dark"] .theme-sticker .vp-goal-bar { background: var(--stk-paper); }
  :root[data-theme="dark"] .stk-ribbon path.r-line { stroke: #3B404C; }
  :root[data-theme="dark"] .stk-ribbon path.r-shine { stroke: #8EC6FF; }
  :root[data-theme="dark"] .theme-sticker .hero-lattice { opacity: 0.2; }