/* ===== KHỐI ĐỔI THƯƠNG HIỆU — khuôn của ui-ux/references/tokens.css, giá trị cho
   skin "Văn Giới": sơn mài tối + chữ vàng, khớp bản đồ concept. Tối là chính (P10),
   không có bản sáng. Ngoài khối này KHÔNG có mã màu nào khác trong dự án.

   ĐỔI THƯƠNG HIỆU: màu nhấn ở --primary (4 dòng liền nhau), font ở --app-font /
   --display-font. ===== */
:root {
  color-scheme: dark;

  /* ===== FONT =====
     Lora cho mọi tiêu đề cấp trang, cấp phần, tên khu (T2, ngoại lệ trang trình diễn).
     Inter cho thân chữ và MỌI con số (T3). Cả hai có subset `vietnamese` (T5). */
  --app-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display-font: "Lora", Georgia, "Times New Roman", serif;

  /* ===== MÀU NHẤN, CHỈ MỘT (M3): vàng đồng =====
     Ở nền tối màu nhấn dùng làm NỀN và CHỮ, không dùng làm đường mảnh đặc (M22). */
  --primary: #d6b36a;             /* 8.7:1 làm chữ trên --surface */
  --primary-hover: #b8914a;       /* lệch về phía NỀN một bậc: nền tối thì tối đi (1.4:1) */
  --primary-foreground: #1b1610;  /* chữ trên nền vàng, 9.0:1 */
  --primary-light: rgba(214, 179, 106, 0.12);

  /* Tầng sáng dần (M21): nền trang < card < lớp nổi */
  --background: #14110d;   /* mực ấm, không đen tuyệt đối (M23) */
  --surface: #1f1a14;      /* sơn mài */
  --surface-overlay: #2a231b;
  /* HUD và nhãn khu nằm đè lên tranh sáng (mây gần trắng): gần như đặc, để chữ phụ
     vẫn đạt 4.5:1 ở chỗ tệ nhất phía sau (P3, P8). Ở 0.88 chữ phụ tụt còn 2.8:1. */
  --surface-hud: rgba(22, 18, 14, 0.96);
  --parchment: #efe2c4;    /* băng giấy của tên khu, như trong concept */
  --parchment-ink: #2a2017;
  --parchment-hover: #f8eed6;
  /* Đồng tiền là dấu nhận diện nhỏ dưới 40px, được phép đổ sắc như ảnh (ngoại lệ M12). */
  --coin-vang-sang: #f5d98a;
  --coin-vang-toi: #a8771f;
  --coin-bac-sang: #eef0f1;
  --coin-bac-toi: #7d8288;

  --foreground: #f3e7cc;   /* giấy kem. 14.1:1 trên --surface */
  --muted: #b8a683;        /* 7.3:1 trên --surface */

  /* Ở nền tối viền gánh việc tách khối (M23), là rgba mờ chứ không màu đặc. */
  --border: rgba(214, 179, 106, 0.16);
  --border-strong: rgba(214, 179, 106, 0.30);

  --elevation-popover: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --elevation-modal: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);

  /* Vùng tô là lớp phủ sáng, SÁNG hơn nền phía sau (M21). */
  --item-hover: rgba(243, 231, 204, 0.05);
  --secondary: rgba(243, 231, 204, 0.09);
  --secondary-hover: rgba(243, 231, 204, 0.14);
  --background-hover: rgba(243, 231, 204, 0.08);
  --surface-hover: rgba(243, 231, 204, 0.04);

  --button-hover-surface: rgba(243, 231, 204, 0.08);
  --button-hover-page: rgba(243, 231, 204, 0.08);
  --button-hover: var(--button-hover-page);

  --chart-fill: color-mix(in srgb, var(--primary) 70%, transparent);

  --ring-focus: rgba(214, 179, 106, 0.18);
  --border-focus: rgba(214, 179, 106, 0.6);   /* hạ độ đục, không sợi vàng đặc (M22) */

  /* ===== MÀU MANG NGHĨA, bản nền tối của skill (M7, M30, M32) ===== */
  --danger: #ff637e;
  --danger-bg: rgb(255 32 86 / 0.12);
  --danger-bg-hover: rgb(255 32 86 / 0.18);

  --error: #fb2c36;
  --error-ring: rgb(251 44 54 / 0.15);
  --error-text: #ff6467;
  --error-bg: rgb(251 44 54 / 0.1);
  --error-border: rgb(251 44 54 / 0.3);
  --error-strong: #ff6467;

  --success-bg: rgb(0 188 125 / 0.15);
  --success: #00d492;
  --warning-bg: rgb(254 154 0 / 0.14);
  --warning-border: rgb(254 154 0 / 0.32);
  --warning: #ff8904;                       /* orange-400, không amber-400 (M7) */
  --neutral-bg: rgba(243, 231, 204, 0.09);
  --neutral: #c9bb9c;
  /* ====================================================================== */

  --radius: 0.75rem;
}

/* ===== BẢNG MÀU THEO KHU =====
   Cửa sổ khu mang data-mau="<khu>"; mọi màu bên trong đi qua token nên đặt bộ token lên
   khung cửa sổ là nội dung tự đổi theo. Chợ Đen không có khối riêng: dùng nguyên bộ tối
   vàng đen ở :root. Các khu còn lại là nền sáng, đều đã đo tương phản:
   chữ trắng trên nhấn, nhấn trên thẻ, chữ phụ trên nền, chữ phụ trên thẻ đều >= 4.5:1. */

/* Nền chung của mọi khu sáng: màu mang nghĩa bản sáng của skill (M7, M30), viền và vùng tô
   là lớp phủ đen mờ nên đúng trên mọi sắc nền. */
[data-sang] {
  color-scheme: light;
  --primary-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.13);
  --item-hover: rgba(0, 0, 0, 0.04);
  --secondary: rgba(0, 0, 0, 0.06);
  --secondary-hover: rgba(0, 0, 0, 0.1);
  --background-hover: rgba(0, 0, 0, 0.06);
  --surface-hover: rgba(0, 0, 0, 0.025);
  --button-hover-surface: rgba(0, 0, 0, 0.05);
  --button-hover-page: rgba(0, 0, 0, 0.07);
  --button-hover: var(--button-hover-page);
  --elevation-popover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --elevation-modal: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 8px 10px -6px rgb(0 0 0 / 0.2);

  --danger: #c70036;
  --danger-bg: rgb(255 32 86 / 0.1);
  --danger-bg-hover: rgb(255 32 86 / 0.15);
  --error: #fb2c36;
  --error-ring: rgb(251 44 54 / 0.1);
  --error-text: #e7000b;
  --error-bg: #fef2f2;
  --error-border: #ffc9c9;
  --error-strong: #c10007;
  --success-bg: #ecfdf5;
  --success: #007a55;
  --warning-bg: #fffbeb;
  --warning: #bb4d00;
  --neutral-bg: rgba(0, 0, 0, 0.05);
  --neutral: #52525c;
}

/* 16 khu sáng, mỗi khu một màu nhấn RIÊNG (khách chốt: màu mỗi chỗ phải độc nhất).
   Sinh bằng OKLCH; mọi cặp màu nhấn cách nhau ΔE OKLab >= 0.072. Chữ trắng trên nhấn và
   chữ phụ trên nền đều >= 4.6:1. Trai Văn Các nền xám nhạt kiểu sàn TMĐT. */
[data-mau="trai-van-cac"] { /* Trai Văn Các */
  --background: #f5f5f5; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #281c19; --muted: #6e5f5c;
  --primary: #c4371d; --primary-hover: #ac301a; --primary-light: rgba(196, 55, 29, 0.09);
  --ring-focus: rgba(196, 55, 29, 0.15); --border-focus: #c4371d; --chart-fill: #c4371d;
}
[data-mau="tuu-lau"] { /* Tửu Lầu */
  --background: #fff4f5; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #281b1d; --muted: #6e5f60;
  --primary: #b0334f; --primary-hover: #9b2d46; --primary-light: rgba(176, 51, 79, 0.09);
  --ring-focus: rgba(176, 51, 79, 0.15); --border-focus: #b0334f; --chart-fill: #b0334f;
}
[data-mau="danh-vong"] { /* Đường danh vọng */
  --background: #fcf5ee; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #261e15; --muted: #6b6157;
  --primary: #8a5a1c; --primary-hover: #794f19; --primary-light: rgba(138, 90, 28, 0.09);
  --ring-focus: rgba(138, 90, 28, 0.15); --border-focus: #8a5a1c; --chart-fill: #8a5a1c;
}
[data-mau="xuong-van"] { /* Xưởng Văn */
  --background: #f4f9f0; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #1c2117; --muted: #5f665a;
  --primary: #4a6b25; --primary-hover: #415e21; --primary-light: rgba(74, 107, 37, 0.09);
  --ring-focus: rgba(74, 107, 37, 0.15); --border-focus: #4a6b25; --chart-fill: #4a6b25;
}
[data-mau="dai-sanh"] { /* Đại Sảnh */
  --background: #f0faf5; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #16221d; --muted: #596761;
  --primary: #0f7a5c; --primary-hover: #0d6b51; --primary-light: rgba(15, 122, 92, 0.09);
  --ring-focus: rgba(15, 122, 92, 0.15); --border-focus: #0f7a5c; --chart-fill: #0f7a5c;
}
[data-mau="tang-thu-lau"] { /* Tàng Thư Lâu */
  --background: #f4f7fc; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #1a1f29; --muted: #5d646f;
  --primary: #2f4a7a; --primary-hover: #29416b; --primary-light: rgba(47, 74, 122, 0.09);
  --ring-focus: rgba(47, 74, 122, 0.15); --border-focus: #2f4a7a; --chart-fill: #2f4a7a;
}
[data-mau="tui-do"] { /* Túi Đồ */
  --background: #fef5f0; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #271c17; --muted: #6d605a;
  --primary: #6a391e; --primary-hover: #5d321a; --primary-light: rgba(106, 57, 30, 0.09);
  --ring-focus: rgba(106, 57, 30, 0.15); --border-focus: #6a391e; --chart-fill: #6a391e;
}
[data-mau="nap"] { /* Nạp */
  --background: #f8f7ee; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #212015; --muted: #666457;
  --primary: #857505; --primary-hover: #756704; --primary-light: rgba(133, 117, 5, 0.09);
  --ring-focus: rgba(133, 117, 5, 0.15); --border-focus: #857505; --chart-fill: #857505;
}
[data-mau="thanh-tuu"] { /* Thành Tựu */
  --background: #f6f8ef; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #1f2016; --muted: #636558;
  --primary: #474d01; --primary-hover: #3e4401; --primary-light: rgba(71, 77, 1, 0.09);
  --ring-focus: rgba(71, 77, 1, 0.15); --border-focus: #474d01; --chart-fill: #474d01;
}
[data-mau="shop"] { /* Shop */
  --background: #eef9fb; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #142224; --muted: #566769;
  --primary: #076169; --primary-hover: #06555c; --primary-light: rgba(7, 97, 105, 0.09);
  --ring-focus: rgba(7, 97, 105, 0.15); --border-focus: #076169; --chart-fill: #076169;
}
[data-mau="ban-be"] { /* Bạn Bè */
  --background: #f0f8fe; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #162128; --muted: #59656d;
  --primary: #117cad; --primary-hover: #0f6d98; --primary-light: rgba(17, 124, 173, 0.09);
  --ring-focus: rgba(17, 124, 173, 0.15); --border-focus: #117cad; --chart-fill: #117cad;
}
[data-mau="nhiem-vu"] { /* Nhiệm Vụ */
  --background: #f6f6ff; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #1e1e29; --muted: #62626f;
  --primary: #7068c6; --primary-hover: #635cae; --primary-light: rgba(112, 104, 198, 0.09);
  --ring-focus: rgba(112, 104, 198, 0.15); --border-focus: #7068c6; --chart-fill: #7068c6;
}
[data-mau="bang-hoi"] { /* Bang Hội */
  --background: #faf4fc; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #231c25; --muted: #68606b;
  --primary: #5e256e; --primary-hover: #532161; --primary-light: rgba(94, 37, 110, 0.09);
  --ring-focus: rgba(94, 37, 110, 0.15); --border-focus: #5e256e; --chart-fill: #5e256e;
}
[data-mau="su-kien"] { /* Sự Kiện */
  --background: #fdf4f8; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #271b21; --muted: #6c5f65;
  --primary: #b84f8a; --primary-hover: #a24679; --primary-light: rgba(184, 79, 138, 0.09);
  --ring-focus: rgba(184, 79, 138, 0.15); --border-focus: #b84f8a; --chart-fill: #b84f8a;
}
[data-mau="chap-phap-duong"] { /* Chấp Pháp Đường */
  --background: #f4f7fc; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #192029; --muted: #5c646f;
  --primary: #313e4f; --primary-hover: #2b3746; --primary-light: rgba(49, 62, 79, 0.09);
  --ring-focus: rgba(49, 62, 79, 0.15); --border-focus: #313e4f; --chart-fill: #313e4f;
}
[data-mau="cai-dat"] { /* Cài đặt */
  --background: #fdf5ef; --surface: #ffffff; --surface-overlay: #ffffff; --surface-hud: #ffffff;
  --foreground: #261d17; --muted: #6b6159;
  --primary: #7d726a; --primary-hover: #6e645d; --primary-light: rgba(125, 114, 106, 0.09);
  --ring-focus: rgba(125, 114, 106, 0.15); --border-focus: #7d726a; --chart-fill: #7d726a;
}

/* ===== HẾT KHỐI ĐỔI THƯƠNG HIỆU ===== */

/* Nền rê của nút viền đổi theo nền phía sau (tokens.css của skill). */
.bg-surface *,
.bg-surface-overlay * { --button-hover: var(--button-hover-surface); }
.bg-surface .bg-background *,
[class~="hover:bg-item-hover"]:hover * { --button-hover: var(--button-hover-page); }

/* ===== THANH CUỘN TỰ ẨN (I18) ===== */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
.is-scrolling { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 28%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
  .is-scrolling { scrollbar-color: color-mix(in srgb, var(--foreground) 28%, transparent) transparent; }
}

/* Ẩn HẲN: chỉ cho hàng chip / tab cuộn ngang (I18). */
.scrollbar-clean { scrollbar-width: none; }
.scrollbar-clean::-webkit-scrollbar { display: none; }
/* ================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Khung đôi của trang sách khắc gỗ: một nét ngoài, một nét trong.
   Dùng ĐÚNG MỘT chỗ trong cả site - khối Bia đề danh - nên nó còn là dấu hiệu
   "đây là thứ được khắc", không phải hoa văn rải khắp nơi (N3). */
.khung-doi {
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 0 0 5px var(--surface),
    0 0 0 6px var(--border-strong);
}

/* Tiêu đề cấp trang và cấp phần dùng họ chữ thứ hai (T2). Con số thì không (T3). */
.chu-de { font-family: var(--display-font); }
.so { font-family: var(--app-font); font-variant-numeric: tabular-nums; }