/* ══════════════════════════════════════════════════════════════════════
   NỀN GIẤY DÓ — dựng hoàn toàn bằng CSS, không tải tệp ảnh nào.

   Cách dùng: đặt một khối này vào ngay sau <body>, rồi để nội dung trang
   nằm bình thường bên trên nó.

     <div class="nen-giay" aria-hidden="true"><i></i><i></i><i></i><i></i></div>

   Bốn thẻ <i> rỗng là bốn lớp texture; chúng phải là phần tử thật chứ
   không gộp vào ::before/::after được, vì mỗi lớp cần một mix-blend-mode
   riêng mà một phần tử chỉ nhận được một giá trị.

   ── Hai cái bẫy đã vấp, ghi lại kẻo quên ─────────────────────────────

   (a) feTurbulence sinh R, G, B ĐỘC LẬP NHAU, tức nó ra nhiễu MÀU sặc sỡ
       chứ không phải nhiễu xám. Đắp thẳng lên thì loang lổ xanh đỏ, phải
       hạ opacity thật thấp cho khỏi lộ — và thế là texture mất tiêu, nền
       trông phẳng lì như gradient. Chữa bằng feColorMatrix saturate=0 ngay
       sau turbulence: khử hết màu, còn lại nhiễu xám thật, lúc đó mới đẩy
       tương phản lên mạnh được. Alpha cũng bị nhiễu theo, phải ép về 1
       bằng feFuncA slope=0 intercept=1, không thì lớp thủng lỗ chỗ.

   (b) KHÔNG dùng filter:url(#id) đặt thẳng lên phần tử. Làm vậy thì trình
       duyệt tính lại nhiễu MỖI KHUNG khi phần tử bị scale — mà nền này
       nằm dưới cú zoom của màn mở đầu, sẽ giật thấy rõ. Nhét SVG vào
       data-URI thì trình duyệt rasterize đúng một lần rồi coi như ảnh
       thường: zoom bao nhiêu cũng không tính lại.
   ══════════════════════════════════════════════════════════════════════ */

.nen-giay{
  --lot:#d9c9a6;
  --loang-xam:#cdc6bb; --loang-sang:#f0e7cf; --loang-vang:#e0cd9f;
  --do-van:.57; --do-co:.62; --do-hat:.39;
  --ria:rgba(116,92,54,.34);

  position:fixed; inset:0; z-index:-1; pointer-events:none;

  /* Lớp 1 + 2: nước lót và mấy mảng loang — chỗ ám vàng, chỗ ám xám. */
  background-color:var(--lot);
  background-image:
    radial-gradient(56% 42% at 20% 24%, var(--loang-xam)  0%, transparent 64%),
    radial-gradient(50% 38% at 76% 16%, var(--loang-sang) 0%, transparent 60%),
    radial-gradient(62% 48% at 64% 76%, var(--loang-vang) 0%, transparent 66%),
    radial-gradient(44% 36% at 10% 78%, var(--loang-sang) 0%, transparent 62%),
    radial-gradient(38% 30% at 92% 58%, var(--loang-vang) 0%, transparent 58%),
    radial-gradient(34% 26% at 44% 46%, var(--loang-sang) 0%, transparent 60%);
}
.nen-giay > i{position:absolute; inset:0; display:block}

/* Lớp 3 — vân giấy: nhiễu tần số rất thấp, ra mảng lớn dày–mỏng. */
.nen-giay > i:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='420'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.25' intercept='-0.14'/%3E%3CfeFuncG type='linear' slope='1.25' intercept='-0.14'/%3E%3CfeFuncB type='linear' slope='1.25' intercept='-0.14'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size:100% 100%;
  mix-blend-mode:soft-light; opacity:var(--do-van);
}

/* Lớp 4 — vệt cọ: hai trục lệch nhau MỘT CHÚT (0.014 / 0.028) nên nhiễu
   hơi bè theo chiều ngang, ra dáng nét cọ. Lệch nhiều hơn nữa thì thành
   sọc đều tăm tắp, nhìn ra vân gỗ chứ không phải giấy — đã thử và hỏng.
   Kéo tràn khung, KHÔNG lặp: vệt cọ mà lặp thì mắt bắt ra ngay ô vuông. */
.nen-giay > i:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.028' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.45' intercept='-0.26'/%3E%3CfeFuncG type='linear' slope='1.45' intercept='-0.26'/%3E%3CfeFuncB type='linear' slope='1.45' intercept='-0.26'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:100% 100%;
  mix-blend-mode:soft-light; opacity:var(--do-co);
}

/* Lớp 5 — hạt giấy: nhiễu tần số cao, lặp ô 240px.
   stitchTiles='stitch' khâu liền mép ô, không thì lộ lưới ô vuông. */
.nen-giay > i:nth-child(3){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.35' intercept='-0.18'/%3E%3CfeFuncG type='linear' slope='1.35' intercept='-0.18'/%3E%3CfeFuncB type='linear' slope='1.35' intercept='-0.18'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  mix-blend-mode:overlay; opacity:var(--do-hat);
}

/* Lớp 6 — tối rìa: giữa sáng, bốn rìa tối dần. Thứ làm nó ra "một tờ
   giấy đang được giơ lên" chứ không phải một mảng màu trải phẳng. */
.nen-giay > i:nth-child(4){
  background:radial-gradient(122% 98% at 50% 42%, transparent 38%, var(--ria) 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   CHẾ ĐỘ TỐI

   Bám đúng ba tầng mà trang đang dùng ở index.html: sáng là mặc định, tối
   theo máy, và tối/sáng ép cứng bằng data-theme trên thẻ <html>. Khối
   media phải kèm :not([data-theme="light"]) — nếu không thì người dùng máy
   tối bấm chọn sáng sẽ vẫn dính nền tối, tức là nút bấm không ăn.

   Ba con số texture ở đây THẤP HƠN hẳn bản sáng, dù nhìn qua tưởng ngược
   đời. Lý do: soft-light và overlay đều so với mốc xám 50%, nên nền càng
   tối thì cùng một mức nhiễu càng bung ra chênh lệch lớn. Bê nguyên
   57/62/39 của bản sáng sang đây thì ra loang lổ như bê tông ẩm, không
   còn là giấy nữa — đã thử và hỏng.

   Màu lót #1b1917 cố ý TỐI HƠN --card (#201f1c) của trang. Nền mà sáng
   ngang thẻ thì mấy cái thẻ chìm nghỉm, mất hết đường viền.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nen-giay{
    --lot:#1c1815;
    --loang-xam:#1e1b18; --loang-sang:#262019; --loang-vang:#241d14;
    --do-van:.20; --do-co:.17; --do-hat:.16;
    --ria:rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"] .nen-giay{
  --lot:#1c1815;
  --loang-xam:#1e1b18; --loang-sang:#262019; --loang-vang:#241d14;
  --do-van:.20; --do-co:.17; --do-hat:.16;
  --ria:rgba(0,0,0,.42);
}