/* =====================================================================
   NHẬN DIỆN LYCOS — nguồn màu DUY NHẤT cho toàn bộ phần mềm.
   =====================================================================

   Trước đây mỗi trang tự khai `:root{...}` với bảng màu xanh ngọc trên nền
   gần đen — không liên quan gì tới nhận diện Lycos. Đổi màu phải sửa 5 chỗ và
   chắc chắn sẽ lệch dần. Nay mọi trang nạp file này, không trang nào tự khai
   màu nữa.

   MÀU LẤY TỪ ẤN PHẨM THẬT của Lycos (ảnh sản phẩm chủ shop gửi 08/08/2026):
     · nền kem ấm ngả đào     — nền mọi ấn phẩm
     · nâu trầm               — chữ tiêu đề "BẢO VỆ CHO LÀN DA"
     · cam đất                — logo LYCOS, "PEEL LYCOS", vỏ kem chống nắng
     · vàng ánh kim           — viền hộp SPOTREAT
     · nâu gần đen            — chữ thân "TRƯỚC KHI RA ĐƯỜNG"

   HAI ĐIỀU PHẢI CẨN THẬN KHI DÙNG BẢNG MÀU NÀY:

   1. CAM LÀ MÀU THƯƠNG HIỆU, KHÔNG PHẢI MÀU CẢNH BÁO.
      Giao diện thường dùng cam để báo "chú ý". Ở đây cam là màu nhấn chính,
      nên màu cảnh báo phải lệch hẳn sang VÀNG NGHỆ, và màu nguy hiểm phải
      lệch hẳn sang ĐỎ SẪM — nếu không, nhân viên không phân biệt được
      "nút bấm" với "có chuyện".

   2. NỀN KEM SÁNG NÊN CHỮ PHẢI ĐỦ ĐẬM.
      Bảng cũ chọn màu cho nền tối; bê nguyên sang nền sáng là chữ mờ không
      đọc nổi. Mọi màu chữ ở đây đã chọn lại cho nền kem.
   ===================================================================== */

:root {
  /* ---- ba tầng bề mặt, mỗi tầng một VAI TRÒ ----
     Bản đầu đổ kem khắp màn hình → nhìn cả ngày bị chói và không có cấu trúc,
     mọi vùng trông giống nhau. Nay chia vai rõ:
       tối    = khung điều hướng, thanh trên  → neo mắt, tạo bố cục
       trắng  = thẻ và bảng dữ liệu           → chỗ ĐỌC, tương phản cao nhất
       kem    = nền trang                     → khoảng thở, giữ hơi ấm thương hiệu
     Nền kem đậm hơn bản trước một nấc để thẻ TRẮNG nổi hẳn lên. */
  --nen:   #EFE5D9;   /* nền trang — kem đậm hơn để thẻ trắng bật lên */
  --noi:   #FFFFFF;   /* thẻ, bảng — vùng đọc chính */
  --chim:  #F7F0E7;   /* ô lõm: ô nhập, khối trích dẫn */
  --vien:  #DFCDB8;

  /* ---- bề mặt TỐI: thanh điều hướng, thanh trên, chân trang ---- */
  --toi:      #1E1512;   /* nâu gần đen, không phải đen trung tính */
  --toi-nhat: #2E211B;   /* mục đang di chuột trên nền tối */
  --toi-chu:  #F5EAE0;   /* chữ trên nền tối */
  --toi-chu2: #B9A492;   /* chữ phụ trên nền tối */
  --toi-vien: #3D2C24;

  /* ---- chữ trên nền sáng — đậm hơn bản trước để bớt phải căng mắt ---- */
  --chu:   #1A1108;   /* 18:1 trên trắng */
  --chu2:  #5A4335;
  --chu3:  #8A7362;

  /* ---- màu thương hiệu ---- */
  /* CAM NỀN NÚT — #B84810 chứ không phải #D2551A của logo.
     Đo WCAG: chữ trắng trên #D2551A chỉ đạt 3,94:1, dưới ngưỡng 4,5:1 — mà đây
     là nút bấm dùng nhiều nhất cả ngày. #B84810 đạt 5,02:1, vẫn đọc ra là cam
     Lycos, chỉ tối hơn một nấc. Sắc logo nguyên bản giữ ở --nhan-tuoi để dùng
     cho chỗ KHÔNG có chữ đè lên (logo, vạch nhấn, chấm màu). */
  --nhan:      #B84810;   /* nền nút, mục đang mở — có chữ trắng đè lên */
  --nhan-tuoi: #D2551A;   /* sắc logo nguyên bản — chỉ dùng khi không có chữ đè */
  --nhan-dam:  #9E3B0B;   /* khi di chuột / nhấn */
  --nhan-chu: #A8410D;   /* CAM DÙNG LÀM CHỮ trên nền sáng.
                            Cam thương hiệu #D2551A trên nền trắng chỉ đạt ~4,7:1
                            — đủ cho mảng màu, KHÔNG đủ cho chữ nhỏ. Dùng bản
                            sẫm hơn khi cam đóng vai chữ. */
  --nau:      #7A3A1D;
  --vang:     #9A6F08;

  /* ---- màu ngữ nghĩa: CỐ Ý lệch khỏi cam thương hiệu ----
     Cam ở đây là màu NÚT BẤM. Nếu cảnh báo cũng cam thì nhân viên không phân
     biệt được "bấm được" với "có chuyện". */
  --tot:   #1F6B41;
  --canh:  #8F6106;   /* vàng nghệ sẫm */
  --xau:   #A81F17;   /* đỏ sẫm */

  /* ---- nền nhạt của màu ngữ nghĩa, dùng cho dải cảnh báo trên nền trắng ---- */
  --tot-nen:  #E8F3EC;
  --canh-nen: #FAF1DC;
  --xau-nen:  #FBEAE8;
  --nhan-nen: #FCEDE3;

  /* ---- màu phân loại 7 loại việc, chọn cho nền sáng ---- */
  --tim:   #5B3E96;
  --xanh:  #1E5E93;
  --hong:  #9E3358;

  --chu-nghich: #FFF8F0;   /* chữ trên mảng màu đậm */

  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  color-scheme: light;
}

/* =====================================================================
   NỀN TỐI — cho người trực đêm.
   Vẫn là Lycos: nâu đen ấm và cam, KHÔNG phải xám xanh trung tính.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen:   #1A1310;
    --noi:   #241A15;
    --chim:  #140E0B;
    --vien:  #3B2A21;

    --chu:   #F3E8DC;
    --chu2:  #C4B0A0;
    --chu3:  #8D7869;

    --nhan:  #E87A3C;   /* cam sáng hơn để nổi trên nền tối */
    --nau:   #C98A5E;
    --vang:  #D9A93A;

    --tot:   #5CB07E;
    --canh:  #D6A32E;
    --xau:   #E0685C;

    --tim:   #A38CD4;
    --xanh:  #6EA6DC;
    --hong:  #DE8AA6;

    --toi:      #120C0A;
    --toi-nhat: #241814;
    --toi-chu:  #F3E8DC;
    --toi-chu2: #A08C7C;
    --toi-vien: #33231C;
    --nhan-tuoi: #F0913F;
    --nhan-dam: #F08F52;
    --nhan-chu: #F0A06A;
    --tot-nen:  #14231A;
    --canh-nen: #241D0E;
    --xau-nen:  #2A1613;
    --nhan-nen: #2B1B12;

    --chu-nghich: #1A1310;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --nen: #1A1310; --noi: #241A15; --chim: #140E0B; --vien: #3B2A21;
  --chu: #F3E8DC; --chu2: #C4B0A0; --chu3: #8D7869;
  --nhan: #E87A3C; --nau: #C98A5E; --vang: #D9A93A;
  --tot: #5CB07E; --canh: #D6A32E; --xau: #E0685C;
  --tim: #A38CD4; --xanh: #6EA6DC; --hong: #DE8AA6;
  --toi: #120C0A; --toi-nhat: #241814; --toi-chu: #F3E8DC;
  --toi-chu2: #A08C7C; --toi-vien: #33231C;
  --nhan-tuoi: #F0913F; --nhan-dam: #F08F52; --nhan-chu: #F0A06A;
  --tot-nen: #14231A; --canh-nen: #241D0E; --xau-nen: #2A1613; --nhan-nen: #2B1B12;
  --chu-nghich: #1A1310;
  color-scheme: dark;
}

/* =====================================================================
   VÀI CHỖ CẦN ĐÈ, vì mã cũ viết cho nền TỐI
   ===================================================================== */

/* Nút chính trước đây để chữ màu #06201C (xanh đen) vì nền nút là xanh ngọc
   nhạt. Nay nền nút là cam đậm nên chữ phải SÁNG, nếu không gần như không đọc
   được. Đè ở đây thay vì đi sửa 5 trang. */
.nut-goi, .nut-luu, .nut:not(.phu2):not(.nut-ghi),
button.nut:not(.phu2), #dyNut, #nut {
  color: var(--chu-nghich) !important;
}

/* Thanh cuộn hợp tông kem thay vì xám mặc định của trình duyệt */
* { scrollbar-color: var(--vien) transparent; }

/* Ảnh/biểu tượng nền tối không còn hợp — bảo đảm body luôn có nền tường minh,
   không mượn nền của trình duyệt. */
html, body { background: var(--nen); }