/* ============================================================
   CHẾ ĐỘ TỐI (03/11/2026) cho 5 trang công cộng (Trang chủ, Nhận diện, Đặt trước, Tri thức, Cộng đồng):
   - ảnh bìa có lớp nền LOANG ĐEN ngăn giữa chữ và ảnh: đậm bên trái chỗ chữ, nhạt dần sang ảnh; chữ trắng; mép mờ dần;
   - phần còn lại của trang cũng tối theo (cuối file).
   Chỉ bật khi <html> có class "bia-toi": bấm nút mặt trăng ở góc dưới bên phải (hoặc mở trang với ?bia=toi), bấm mặt trời
   để về bìa sáng (js/common.js gắn nút và nhớ lựa chọn trên máy).
   Bản đang dùng (nền sáng) không đổi. Người dùng xem xong chọn giữ hay bỏ.
   ============================================================ */

/* Nền đen dưới ảnh: mép trái của ảnh (trang con) mờ dần vào nền này */
.bia-toi .tc-moi .tc-bia { background: #34413b; }   /* than xám ánh xanh, bớt tối hơn đen (người dùng yêu cầu 2 lần, 03/11/2026) */

/* Ảnh đứng yên, dừng cách mép dưới 30px: mép dưới mờ dần vào nền phần kế tiếp mà không lộ đường viền mảnh.
   (!important để thắng hiệu ứng trôi chậm mà js/trang-chu-moi.js ghi thẳng vào ảnh bìa trang chủ) */
.bia-toi .tc-moi .tc-bia-anh { translate: none !important; bottom: 40px; }

/* Lớp loang đen: nhiều nấc để chuyển thật mượt, không thấy chỗ đổi màu; thêm dải tối mỏng phía trên cho thanh menu */
.bia-toi .tc-moi.mau-cu .tc-bia-anh::after {
  background:
    linear-gradient(to bottom, rgba(40,50,45,.35) 0, rgba(40,50,45,.12) 90px, rgba(40,50,45,0) 170px),
    linear-gradient(90deg, rgba(40,50,45,.64) 0%, rgba(40,50,45,.57) 24%, rgba(40,50,45,.43) 38%, rgba(40,50,45,.26) 50%,
      rgba(40,50,45,.11) 62%, rgba(40,50,45,.03) 72%, rgba(40,50,45,0) 80%); }

/* Mép dưới: tối loang dần sang nền xanh bạc hà của phần kế tiếp (trang con đã có sẵn, thêm cho trang chủ) */
.bia-toi .tc-moi .tc-bia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(40,50,45,0) 0%, color-mix(in srgb, var(--tc-be) 30%, transparent) 35%,
    color-mix(in srgb, var(--tc-be) 75%, transparent) 58%, var(--tc-be) 75%, var(--tc-be) 100%); }

/* Chữ trắng, cụm nhấn cam sáng hơn cho nổi trên nền tối */
.bia-toi .tc-moi.mau-cu .tc-bia h1 { color: #fff; }
.bia-toi .tc-moi.mau-cu .tc-bia h1 .tc-nhan-manh { color: #fb923c; }
.bia-toi .tc-moi .tc-bia .tc-bia-loi { color: rgba(255,255,255,.84); }
.bia-toi .tc-moi .tc-bia .tc-nhan { color: #fdba74; }
.bia-toi .tc-moi.mau-cu .tc-bia .tc-nut-vien { color: #fff; border-color: rgba(255,255,255,.75); }
.bia-toi .tc-moi.mau-cu .tc-bia .tc-nut-vien:hover { background: #fff; color: var(--green-900); }

/* Thanh menu lúc chưa cuộn (nằm trên nền tối): chữ trắng. Menu gập (màn hẹp) có nền trắng riêng nên giữ chữ tối */
.bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .brand,
.bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .menu-toggle { color: #fff; }
.bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .btn-ghost:hover { background: rgba(255,255,255,.12); }
@media (min-width: 1101px) {
  .bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .nav-links a { color: rgba(255,255,255,.9); }
  .bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .nav-links a:hover { background: rgba(255,255,255,.12); color: #fff; }
  .bia-toi .tc-moi.mau-cu .site-header:not(.scrolled) .nav-links a.active { background: rgba(255,255,255,.16); color: #fff; }
}

/* (Nút mặt trời / mặt trăng ở góc dưới bên phải: kiểu ở css/main.css vì Dashboard cũng dùng) */

/* Điện thoại: chữ nằm trên, ảnh dưới, nên loang đen từ trên xuống; mép dưới ngắn hơn */
@media (max-width: 700px) {
  .bia-toi .tc-moi.mau-cu .tc-bia-anh::after {
    background: linear-gradient(to bottom, rgba(40,50,45,.64) 0%, rgba(40,50,45,.58) 40%, rgba(40,50,45,.4) 58%,
      rgba(40,50,45,.19) 74%, rgba(40,50,45,.05) 88%, rgba(40,50,45,0) 100%); }
  .bia-toi .tc-moi .tc-bia::after { height: 160px; }
}

/* ============================================================
   CHẾ ĐỘ TỐI TOÀN TRANG (người dùng yêu cầu 03/11/2026: bấm mặt trăng thì cả trang tối theo, không chỉ ảnh bìa).
   Bảng màu: nền trang than ánh xanh; các phần xanh bạc hà thành nền nhạt hơn một nấc; thẻ sáng hơn nền một nấc;
   chữ trắng ngà, chữ phụ xám xanh; điểm nhấn xanh lá nhạt và cam nhạt (màu đậm của bản sáng bị chìm trên nền tối).
   Nút xanh, nút cam và chân trang xanh đậm giữ nguyên.
   ============================================================ */
.bia-toi { color-scheme: dark; }                       /* thanh cuộn, ô chọn của trình duyệt cũng tối */
.bia-toi .tc-moi.mau-cu {
  --tc-kem: #1a2320;        /* nền trang */
  --tc-be: #1f2925;         /* nền các phần xanh bạc hà (cũng là màu mép dưới ảnh bìa mờ vào) */
  --tc-kem-hong: #26312c;   /* nền thẻ */
  --tc-den: #e9f1ec;        /* chữ chính, tiêu đề */
  --tc-chu: #b3c2b8;        /* chữ phụ */
  --tc-xam: rgba(134,239,172,.12);
  --tc-dao: rgba(251,146,60,.16);
}

/* Các phần: thứ tự nền như bản sáng (trắng thành nền trang, xanh bạc hà thành nền nhạt hơn một nấc) */
.bia-toi .tc-moi .section, .bia-toi .tc-moi .section-alt, .bia-toi .tc-moi .tc-giai-doan { background: var(--tc-kem); }
.bia-toi .tc-moi .section-nen, .bia-toi .tc-moi.mau-cu .tc-phan-cung { background: var(--tc-be); }

/* Tiêu đề, nhãn nhỏ */
.bia-toi .tc-moi.mau-cu .tc-dau-giua h2, .bia-toi .tc-moi.mau-cu .tc-the h3,
.bia-toi .tc-moi .section-head h2, .bia-toi .tc-moi .section .card h3, .bia-toi .tc-moi .stage-card h3 { color: var(--tc-den); }
.bia-toi .tc-moi .tc-nhan, .bia-toi .tc-moi .section-head .eyebrow { color: #fb923c; }
.bia-toi.co-js .tc-moi.mau-cu .chu-mo { color: rgba(255,255,255,.14); }
.bia-toi.co-js .tc-moi.mau-cu .chu-mo.hien { color: var(--tc-den); }

/* Thẻ */
.bia-toi .tc-moi .card, .bia-toi .tc-moi.mau-cu .tc-the {
  background: var(--tc-kem-hong); border-color: rgba(255,255,255,.07); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.22); }
.bia-toi .tc-moi .card p, .bia-toi .tc-moi .card .muted { color: var(--tc-chu); }
.bia-toi .tc-moi .muted, .bia-toi .tc-moi .form-note { color: #95a69b; }

/* Trang chủ: Vì sao chọn, 6 giai đoạn, Phần cứng, Cách hoạt động */
.bia-toi .tc-moi .tc-cot-nhan { color: var(--tc-chu); }
.bia-toi .tc-moi.mau-cu .tc-o-ic { background: rgba(134,239,172,.13); }
.bia-toi .tc-moi.mau-cu .tc-o-ic .ic-svg { color: #86efac; }
.bia-toi .tc-moi.mau-cu .tc-cot .tc-the:nth-child(3) .tc-o-ic { background: rgba(251,146,60,.16); }
.bia-toi .tc-moi.mau-cu .tc-cot .tc-the:nth-child(3) .tc-o-ic .ic-svg { color: #fdba74; }
.bia-toi .tc-moi .gh-khoi { background: color-mix(in srgb, var(--gd-mau) 32%, #26312c); }
.bia-toi .tc-moi.mau-cu .gh-xam { color: #86efac; }
.bia-toi .tc-moi.mau-cu .gh-cam { color: #fdba74; }
.bia-toi .tc-moi .gh-ten { color: var(--tc-den); }
.bia-toi .tc-moi .gh-nhom { color: var(--tc-chu); }
.bia-toi .tc-moi .tc-ghep { --gh-nen: color-mix(in srgb, var(--gd-mau) 14%, #26312c); }   /* thẻ giai đoạn trên điện thoại */
.bia-toi .tc-moi .tc-slide b { color: #86efac; }
.bia-toi .tc-moi .tc-slide span { color: var(--tc-den); }   /* dòng tóm tắt: sáng hơn câu mô tả */
.bia-toi .tc-moi .tc-slide p { color: var(--tc-chu); }
.bia-toi .tc-moi.mau-cu .tc-cham button.dang-chon { background: #86efac; }
.bia-toi .tc-moi.mau-cu .tc-buoc { border-top-color: rgba(255,255,255,.14); }
.bia-toi .tc-moi.mau-cu .tc-buoc .so { color: #86efac; }
@media (min-width: 1001px) {
  .bia-toi .tc-moi.mau-cu .gh-the, .bia-toi .tc-moi.mau-cu .tc-chieu-trai {
    background: var(--tc-kem-hong); border-color: rgba(255,255,255,.07); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.22); }
}
@media (max-width: 1000px) {
  .bia-toi .tc-moi .tc-chieu, .bia-toi .tc-moi .tc-chieu-trai { background: var(--tc-kem-hong); border-color: rgba(255,255,255,.07); }
  .bia-toi .tc-moi .tc-ghep, .bia-toi .tc-moi .tc-chieu { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 14px 34px rgba(0,0,0,.28); }
}

/* Nút, ô nhập, nhãn nhỏ dùng chung */
.bia-toi .tc-moi .btn-ghost { color: #86efac; border-color: rgba(134,239,172,.55); }
.bia-toi .tc-moi .btn-ghost:hover { background: rgba(134,239,172,.1); }
.bia-toi .tc-moi .btn-light { background: #2d3934; color: var(--tc-den); border-color: rgba(255,255,255,.1); }
.bia-toi .tc-moi .btn-light:hover { background: #34413b; }
.bia-toi .tc-moi .field label { color: var(--tc-den); }
.bia-toi .tc-moi .field input, .bia-toi .tc-moi .field textarea, .bia-toi .tc-moi .field select {
  background: #2d3934; border-color: rgba(255,255,255,.12); color: var(--tc-den); }
.bia-toi .tc-moi .field input::placeholder, .bia-toi .tc-moi .field textarea::placeholder { color: #7f9187; }
.bia-toi .tc-moi .field input:focus, .bia-toi .tc-moi .field textarea:focus, .bia-toi .tc-moi .field select:focus {
  border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
.bia-toi .tc-moi .stage-chip { background: color-mix(in srgb, var(--c) 22%, #26312c); color: color-mix(in srgb, var(--c) 55%, #fff); }
.bia-toi .tc-moi .badge-green { background: rgba(134,239,172,.15); color: #86efac; }
.bia-toi .tc-moi .badge-amber { background: rgba(251,146,60,.18); color: #fdba74; }
.bia-toi .tc-moi .badge-blue { background: rgba(96,165,250,.18); color: #93c5fd; }

/* Thanh menu khi đã cuộn xuống, và menu gập trên màn hẹp */
.bia-toi .tc-moi.mau-cu .site-header.scrolled { background: rgba(26,35,32,.94); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.3); }
.bia-toi .tc-moi.mau-cu .site-header .brand, .bia-toi .tc-moi.mau-cu .site-header .menu-toggle { color: #fff; }
.bia-toi .tc-moi.mau-cu .site-header .nav-links a { color: #d3ddd6; }
.bia-toi .tc-moi.mau-cu .site-header .nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.bia-toi .tc-moi.mau-cu .site-header .nav-links a.active { background: rgba(134,239,172,.14); color: #bbf7d0; }
.bia-toi .tc-moi.mau-cu .site-header .btn-ghost { color: #86efac; border-color: rgba(134,239,172,.55); }
.bia-toi .tc-moi.mau-cu .site-header .btn-ghost:hover { background: rgba(134,239,172,.1); }
@media (max-width: 1100px) {
  .bia-toi .tc-moi .nav-links { background: #222c27; border-bottom-color: rgba(255,255,255,.08); }
}

/* Nhận diện */
.bia-toi .tc-moi .upload-box { background: rgba(134,239,172,.05); border-color: rgba(74,222,128,.4); }
.bia-toi .tc-moi .stage-photo { background: #1d3a29; }
.bia-toi .tc-moi .demo-banner { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.bia-toi .tc-moi #congCu h4 { color: #bbf7d0 !important; }   /* màu ghi thẳng trong code (style="color:...") nên cần !important */
.bia-toi .tc-moi .det-row { border-bottom-color: rgba(255,255,255,.08); }
.bia-toi .tc-moi .det-steps { color: var(--tc-chu); }
.bia-toi .tc-moi .stage-card .sc-num { color: #8fa197; }

/* Đặt trước */
.bia-toi .tc-moi .gia { color: #86efac; }
.bia-toi .tc-moi .gia span { color: var(--tc-chu); }
.bia-toi .tc-moi .ds-goi li { color: var(--tc-den); }
.bia-toi .tc-moi .ds-goi .ic-svg { color: #4ade80; }
.bia-toi .tc-moi .cam-ket div { background: rgba(134,239,172,.08); color: var(--tc-den); }
.bia-toi .tc-moi .cam-ket .ic-svg { color: #86efac; }

/* Tri thức */
.bia-toi .tc-moi .loc-btn { background: var(--tc-kem-hong); border-color: rgba(255,255,255,.1); color: var(--tc-den); }
.bia-toi .tc-moi .loc-btn:hover { border-color: #4ade80; color: #bbf7d0; }
.bia-toi .tc-moi .loc-btn.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.bia-toi .tc-moi .bai-tag { color: #fdba74; }
.bia-toi .tc-moi .bai-meta { color: #8fa197; }
.bia-toi .tc-moi .bai-anh { background: #1d3a29; }

/* Cộng đồng */
.bia-toi .tc-moi .bao-mau { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.bia-toi .tc-moi .cd-main .muted, .bia-toi .tc-moi .cd-so, .bia-toi .tc-moi .cd-trong { color: #95a69b; }
.bia-toi .tc-moi .cd-so b { color: #86efac; }
.bia-toi .tc-moi .cd-loai { background: color-mix(in srgb, var(--c) 22%, #26312c); color: color-mix(in srgb, var(--c) 55%, #fff); }
.bia-toi .tc-moi .nhan-mau { background: rgba(245,158,11,.16); color: #fcd34d; }
.bia-toi .tc-moi .nhan-may { background: rgba(56,189,248,.16); color: #7dd3fc; }

/* Hộp thoại (đọc bài, chủ đề, đăng ký) và thông báo góc trên */
.bia-toi .tc-moi .modal-overlay { background: rgba(0,0,0,.6); }
.bia-toi .tc-moi .modal { background: #222c27; color: var(--tc-den); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.bia-toi .tc-moi .modal-head, .bia-toi .tc-moi .modal-foot { border-color: rgba(255,255,255,.08); }
.bia-toi .tc-moi .modal-head h3 { color: var(--tc-den); }
.bia-toi .tc-moi .modal .close-x { color: #95a69b; }
.bia-toi .tc-moi .modal .card { background: #2a3530; }
.bia-toi .tc-moi .doc-than h2 { color: var(--tc-den); }
.bia-toi .tc-moi .doc-than h4 { color: #fdba74; }
.bia-toi .tc-moi .doc-mo-dau { color: #c9d4cd; }
.bia-toi .tc-moi .doc-y li { color: #c9d4cd; border-bottom-color: rgba(255,255,255,.08); }
.bia-toi .tc-moi .doc-y .ic-svg { color: #4ade80; }
.bia-toi .tc-moi .doc-luu-y { background: rgba(134,239,172,.08); color: #a9b8ae; }
.bia-toi .tc-moi .doc-khac a { border-color: rgba(255,255,255,.1); color: var(--tc-den); }
.bia-toi .tc-moi .cd-hoi { border-bottom-color: rgba(255,255,255,.08); }
.bia-toi .tc-moi .cd-hoi p, .bia-toi .tc-moi .cd-tl-bong p { color: #c9d4cd; }
.bia-toi .tc-moi .cd-tl-dau { color: #95a69b; }
.bia-toi .tc-moi .cd-tl-bong { background: rgba(134,239,172,.08); }
.bia-toi .tc-moi .cd-tl-bong b { color: var(--tc-den); }
.bia-toi .tc-moi .toast { background: var(--tc-kem-hong); color: var(--tc-den); }
.bia-toi .tc-moi .toast .t-body { color: var(--tc-chu); }

/* Đăng nhập: chữ trên ảnh nằm trên lớp loang tối, nửa biểu mẫu nền tối (mép ảnh mờ dần vào nền này) */
.bia-toi .tc-moi .dn-anh { background: #34413b; }
.bia-toi .tc-moi .dn-anh::after { background: linear-gradient(to top, rgba(40,50,45,.84) 0%, rgba(40,50,45,.68) 22%,
  rgba(40,50,45,.28) 40%, rgba(40,50,45,.07) 50%, rgba(40,50,45,0) 56%); }
.bia-toi .tc-moi .dn-chu .brand, .bia-toi .tc-moi .dn-chu h2 { color: #fff; }
.bia-toi .tc-moi .dn-chu h2 .tc-nhan-manh { color: #fb923c; }
.bia-toi .tc-moi .dn-chu p { color: rgba(255,255,255,.84); }
.bia-toi .tc-moi .dn-hop h1 { color: var(--tc-den); }
.bia-toi .tc-moi .dn-hoac { color: #95a69b; }
.bia-toi .tc-moi .dn-hoac::before, .bia-toi .tc-moi .dn-hoac::after { background: rgba(255,255,255,.1); }
.bia-toi .tc-moi .dn-ve { color: #a9b8ae; }

/* Cách hoạt động ở chế độ tối: khung tiêu đề xanh / cam pha nền tối, tiêu đề xanh sáng, số cam sáng ở ô chẵn (05/11/2026) */
.bia-toi .tc-moi .tc-buoc-ten { color: #86efac; }
.bia-toi .tc-moi .tc-buoc-ten { background: color-mix(in srgb, #16a34a 20%, #1f2925); }
.bia-toi .tc-moi .tc-buoc:nth-child(even) .tc-buoc-ten { background: color-mix(in srgb, #ea7317 22%, #1f2925); }
.bia-toi .tc-moi.mau-cu .tc-buoc:nth-child(even) .so { color: #fb923c; }
.bia-toi .tc-moi .tc-buoc-ten::after, .bia-toi .tc-moi .tc-buoc::after { background: #86efac; }   /* mũi tên giữa các bước */

/* 13/11/2026 (người dùng yêu cầu: mép dưới ảnh bìa ở chế độ tối phải "mờ mờ mượt mượt", thấy trọn ảnh hơn).
   Trước đây 1/4 dưới cùng của lớp mờ (khoảng 60px) là màu đặc nên ảnh như bị một dải tối cắt ngang. Giờ lớp mờ cao hơn,
   nhạt rất lâu ở phía trên rồi mới đậm dần theo đường cong, chỉ vài điểm ảnh cuối là màu đặc; ảnh kéo xuống sát đáy hơn. */
.bia-toi .tc-moi .tc-bia-anh { bottom: 12px; }
.bia-toi .tc-moi .tc-bia::after { height: 300px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--tc-be) 0%, transparent) 0%,
    color-mix(in srgb, var(--tc-be) 3%, transparent) 14%,
    color-mix(in srgb, var(--tc-be) 9%, transparent) 28%,
    color-mix(in srgb, var(--tc-be) 19%, transparent) 42%,
    color-mix(in srgb, var(--tc-be) 34%, transparent) 55%,
    color-mix(in srgb, var(--tc-be) 53%, transparent) 67%,
    color-mix(in srgb, var(--tc-be) 72%, transparent) 78%,
    color-mix(in srgb, var(--tc-be) 88%, transparent) 88%,
    color-mix(in srgb, var(--tc-be) 97%, transparent) 95%,
    var(--tc-be) 100%); }
@media (max-width: 700px) {
  .bia-toi .tc-moi .tc-bia::after { height: 200px; }
}