/* ═══════════════════════════════════════════════════════════════════
   HSC Investment — Lớp phủ thương hiệu cho 3 app gốc
   (Học ôn · Thi thử · Từ vựng)

   Ba app này viết riêng lẻ nên mỗi cái một bảng màu:
     Học ôn  → tím lam  #4f46e5
     Thi thử → cam navy #234E70 / #F26419
     Từ vựng → vàng đen #F0B429 / #2A3038

   May là cả ba đều khai màu bằng BIẾN CSS trong :root, nên chỉ cần
   ghi đè biến là đổi được toàn bộ mà KHÔNG đụng một dòng bố cục nào.

   Hướng thống nhất: giữ tinh thần "công trường" của bản Từ vựng
   (nền kem, vạch cảnh báo vàng–đen) nhưng đổi màu chủ đạo sang
   xanh HSC. Vàng giữ vai trò màu nhấn, không phải màu chính.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Bảng màu chung ── */
  --k-giay:    #F4F2EC;   /* nền kem, lấy từ bản Từ vựng */
  --k-the:     #FFFFFF;
  --k-muc:     #14171A;
  --k-nhat:    #6C7378;
  --k-vach:    #E3DFD3;
  --k-hsc:     #0E6D38;   /* xanh đậm — logo HSC */
  --k-hsc2:    #73BF44;   /* xanh lá — chiếc lá */
  --k-hsc-mo:  #E8F2EB;
  --k-vang:    #E0A106;   /* vàng hổ phách — màu nhấn */
  --k-vang-mo: #FCF3DC;
  --k-vang-ink:#7A5A00;
  --k-tot:     #0E7A4A;  --k-tot-mo: #E4F3EA;
  --k-xau:     #B33329;  --k-xau-mo: #FBE8E6;
  --k-bo:      12px;
  --k-bong:    0 1px 2px rgba(20,23,26,.05), 0 1px 3px rgba(20,23,26,.04);
  --k-soc:     repeating-linear-gradient(45deg, #E0A106 0 8px, #14171A 8px 16px);
}

[data-theme="dark"], [data-theme=dark]{
  --k-giay:    #141614;
  --k-the:     #1B1E1B;
  --k-muc:     #EEF1EC;
  --k-nhat:    #9AA29C;
  --k-vach:    #2A2F2B;
  --k-hsc:     #5FD08A;
  --k-hsc2:    #9BE06B;
  --k-hsc-mo:  #12241A;
  --k-vang:    #F0C14B;
  --k-vang-mo: #2A2314;
  --k-vang-ink:#F0C14B;
  --k-tot:     #4ADE80;  --k-tot-mo: #152619;
  --k-xau:     #FCA5A5;  --k-xau-mo: #2C1A18;
  --k-bong:    0 1px 2px rgba(0,0,0,.3);
  --k-soc:     repeating-linear-gradient(45deg, #F0C14B 0 8px, #0B0D0B 8px 16px);
}

/* ═══ HỌC ÔN — đổi tím lam sang xanh HSC ═══ */
:root{
  --bg:var(--k-giay);       --card:var(--k-the);
  --ink:var(--k-muc);       --muted:var(--k-nhat);
  --line:var(--k-vach);
  --brand:var(--k-hsc);     --brand2:var(--k-hsc2);
  --brandsoft:var(--k-hsc-mo);
  --star:var(--k-vang);     --starsoft:var(--k-vang-mo);
  --ok:var(--k-tot);        --oksoft:var(--k-tot-mo);
  --bad:var(--k-xau);       --badsoft:var(--k-xau-mo);
  --shadow:var(--k-bong);   --radius:var(--k-bo);
}
[data-theme="dark"]{
  --bg:var(--k-giay);       --card:var(--k-the);
  --ink:var(--k-muc);       --muted:var(--k-nhat);
  --line:var(--k-vach);
  --brand:var(--k-hsc);     --brand2:var(--k-hsc2);
  --brandsoft:var(--k-hsc-mo);
  --star:var(--k-vang);     --starsoft:var(--k-vang-mo);
  --ok:var(--k-tot);        --oksoft:var(--k-tot-mo);
  --bad:var(--k-xau);       --badsoft:var(--k-xau-mo);
}

/* ═══ THI THỬ — đổi cam navy sang xanh HSC + vàng ═══ */
:root{
  --surface:var(--k-the);
  --primary:var(--k-hsc);        --primary-soft:var(--k-hsc-mo);
  --accent:var(--k-vang);        --accent-soft:var(--k-vang-mo);
  --ok-soft:var(--k-tot-mo);     --bad-soft:var(--k-xau-mo);
  --font-vi:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --font-jp:'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP','Be Vietnam Pro',sans-serif;
}
[data-theme="dark"]{ --surface:var(--k-the); --primary:var(--k-hsc); --accent:var(--k-vang); }

/* ═══ TỪ VỰNG — giữ tinh thần vàng đen, đổi màu thép sang xanh HSC ═══ */
:root{
  --paper:var(--k-giay);
  --sub:var(--k-nhat);
  --accent-ink:var(--k-vang-ink);
  --steel:var(--k-hsc);
  --good:var(--k-tot);
  --stripe:var(--k-soc);
}
[data-theme="dark"]{
  --paper:var(--k-giay); --sub:var(--k-nhat);
  --steel:var(--k-hsc);  --good:var(--k-tot); --stripe:var(--k-soc);
}

/* ═══ Phông: một phông cho tất cả ═══
   Phông Việt phải đứng TRƯỚC phông Nhật. Phông Nhật thiếu dấu tiếng Việt,
   để trước thì ế ữ ạ rơi sang phông dự phòng, nhìn lệch hẳn chữ bên cạnh. */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, p, div, span, a, li, td, th, label, small, strong, b{
  font-family:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI',
              'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif !important;
}
/* Chữ Nhật có furigana thì đảo lại, để kanji hiện đúng nét */
ruby, rt, ruby *, .jp, .qjp, .ojp, .kanji{
  font-family:'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP',
              'Be Vietnam Pro', sans-serif !important;
}

/* ═══ Thanh điều hướng dưới — giống hệt các trang khác ═══ */
#konni-nav{
  background:var(--k-the) !important;
  border-top:1px solid var(--k-vach) !important;
  padding-bottom:env(safe-area-inset-bottom);
}
#konni-nav a{ color:var(--k-nhat) !important; font-weight:600 }
#konni-nav a.on, #konni-nav a.bat{ color:var(--k-hsc) !important }

/* ═══ Màn hình chờ ═══ */
#konni-che{ background:var(--k-giay) !important; color:var(--k-muc) }
#konni-che > div > div:first-child{ color:var(--k-muc) !important }
#konni-che button{
  background:var(--k-hsc) !important; color:#fff !important; border:0 !important;
}

/* ═══ Vài chỗ app gốc viết màu cứng, phải đè riêng ═══ */
.btn-primary, .btn.btn-primary{
  background:var(--k-hsc) !important; border-color:var(--k-hsc) !important; color:#fff !important;
}
.btn-accent, .btn.btn-accent{
  background:var(--k-vang) !important; border-color:var(--k-vang) !important;
  color:#1A1204 !important;
}
.btn-quiet, .btn.btn-quiet{
  background:transparent !important; color:var(--k-muc) !important;
  border:1px solid var(--k-vach) !important;
}
.klocked{ opacity:.55; filter:grayscale(.35) }

/* Vạch cảnh báo công trường — dùng chung một kiểu ở cả 3 app */
.stripe, .hazard, .zebra{ background:var(--k-soc) !important }

/* Nhãn tròn, viên thuốc */
.pill, .chip, .tag{ border-radius:99px }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important } }

/* ═══════════════════════════════════════════════════════════════════
   DẤU MỜ ĐỊNH DANH
   Phủ email + ngày lên toàn trang, rất nhạt để không cản đọc,
   nhưng đủ hiện trong ảnh chụp màn hình.
   Mục đích: ai chụp gửi đi thì lộ chính email mình — răn đe chuyện
   chụp cả trăm màn hình ném vào nhóm Zalo.
   ═══════════════════════════════════════════════════════════════════ */
#konni-wm{
  /* Phải nằm TRÊN nội dung, không phải dưới.
     Nằm dưới thì thẻ nội dung nền trắng che mất, ảnh chụp câu hỏi
     sẽ không dính dấu — đúng chỗ cần dính nhất.
     Thấp hơn thanh điều hướng (9998) và bảng hồ sơ (9999). */
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;          /* không cản bấm, không cản cuộn */
  user-select:none;
  overflow:hidden;
  opacity:.045;                 /* nhạt tới mức đọc chữ không vướng */
  background-repeat:repeat;
}
@media (prefers-color-scheme: dark){ #konni-wm{ opacity:.06 } }

/* Khi in ra giấy hoặc xuất PDF thì đậm hơn — bản in dễ bị phát tán hàng loạt */
@media print{
  #konni-wm{ opacity:.12 !important; position:absolute; height:100% }
}

/* Thanh điều hướng và bảng nổi vẫn nằm trên dấu mờ */
#konni-nav{ z-index:9998 }
.bang-hs, #konni-che, #konni-nop-loi{ z-index:9999 }