/* ============================================================
   NGỌA LONG WIKI — theme chung (đồng bộ danh-tuong / wly.lequ.com)
   Tối: sân khấu mực tàu xám xanh / Sáng: giấy trắng thủy mặc
   ============================================================ */
@font-face { font-family: "Philosopher"; src: url("/assets/fonts/Philosopher-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UTM Cafeta"; src: url("/assets/fonts/UTMCAFETA.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UVN Lac Long"; src: url("/assets/fonts/UVNLacLongQuan.ttf") format("truetype"); font-display: swap; }

:root {
  --serif: "Philosopher", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --calli: "UVN Lac Long", "Philosopher", serif;
  --brush: "UTM Cafeta", "UVN Lac Long", sans-serif;
}
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #101411; --line: rgba(215, 184, 120, 0.2); --gold: #d7b878;
  --ink: #f2ebdc; --muted: #a5a99e; --footer-bg: #0c100d;

  --stage-bg: #414654;
  --tex-filter: invert(1) brightness(0.72) contrast(1.04);
  --tex-op: .5;
  --stage-overlay:
    radial-gradient(130% 74% at 22% -8%, rgba(112, 44, 36, 0.30), transparent 52%),
    linear-gradient(180deg, rgba(62, 68, 82, 0.10) 0%, rgba(47, 51, 63, 0.42) 55%, rgba(33, 36, 46, 0.66) 100%),
    radial-gradient(150% 110% at 50% 38%, transparent 52%, rgba(18, 20, 27, 0.55) 100%);
  --kt-ink: #f4f6ff; --kt-body: #c3c8d6; --kt-muted: #8a91a3; --kt-faint: #7d8496;
  --kt-gold: #e2cd96; --kt-note: #d9c084; --kt-red: #e8a08e;
  --panel-bg: linear-gradient(180deg, rgba(38, 42, 53, 0.94), rgba(29, 32, 41, 0.94));
  --panel-border: rgba(148, 158, 180, 0.30);
  --panel-inner: rgba(148, 158, 180, 0.14);
  --panel-shadow: 0 24px 60px rgba(10, 12, 18, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 46px rgba(0, 0, 0, 0.30);
  --sep: rgba(148, 158, 180, 0.16);
  --chip-bg: rgba(20, 23, 31, 0.45); --chip-ink: #aab1c4; --chip-border: rgba(160, 170, 192, 0.30);
  --chip-hover-ink: #e8ebf4; --chip-hover-border: rgba(200, 210, 230, 0.6);
  --chip-act-ink: #ecd9a4; --chip-act-border: rgba(226, 205, 150, 0.75);
  --chip-act-bg: rgba(226, 205, 150, 0.10); --chip-act-glow: 0 0 12px rgba(222, 196, 134, 0.18);
  --search-bg: rgba(16, 18, 25, 0.72); --search-border: rgba(160, 170, 192, 0.38);
  --search-ink: #eef0f8; --search-ph: #7f879b;
  --search-focus-border: rgba(226, 205, 150, 0.8); --search-focus-glow: 0 0 14px rgba(222, 196, 134, 0.25);
  --sbtn-bg: rgba(226, 205, 150, 0.14); --sbtn-bg-hover: rgba(226, 205, 150, 0.28); --sbtn-ink: #e2cd96;
  --pline: rgba(196, 206, 226, 0.55); --pline-dot: #c9d2e6; --pline-glow: 0 0 8px rgba(210, 222, 244, 0.6);
  --title-ink: #f4f6ff; --title-glow: 0 0 22px rgba(214, 226, 248, 0.4), 0 3px 8px rgba(0, 0, 0, 0.6);
  --banner-sub: #a7adc0; --banner-sub-b: #e3c987;
  --card-bg: linear-gradient(180deg, rgba(44, 48, 60, 0.9), rgba(33, 36, 46, 0.9));
  --card-border: rgba(148, 158, 180, 0.24);
  --card-hover-border: rgba(226, 205, 150, 0.55);
  --card-hover-glow: 0 10px 26px rgba(8, 10, 16, 0.5), 0 0 18px rgba(226, 205, 150, 0.14);
  --icon-bg: radial-gradient(circle at 50% 32%, #3c4150, #22252f);
  --icon-border: #10121a;
  --grp-title: #e2cd96;
  --link-ink: #e2cd96; --link-border: rgba(160, 170, 192, 0.38);
  --link-hover-bg: rgba(226, 205, 150, 0.08); --link-hover-border: rgba(226, 205, 150, 0.75);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --line: rgba(20, 26, 36, 0.14); --gold: #a97e2f;
  --ink: #171a20; --muted: #788088; --footer-bg: #f6f7f8;

  --stage-bg: #ffffff;
  --tex-filter: none;
  --tex-op: .55;
  --stage-overlay:
    radial-gradient(56% 20% at 50% -6%, rgba(35, 32, 30, 0.30), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.92) 100%),
    radial-gradient(120% 46% at 12% 4%, rgba(150, 110, 80, 0.08), transparent 60%);
  --kt-ink: #262014; --kt-body: #57503f; --kt-muted: #8a8272; --kt-faint: #a09478;
  --kt-gold: #a97e2f; --kt-note: #8a5a16; --kt-red: #a63d2a;
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 246, 0.96));
  --panel-border: rgba(169, 126, 47, 0.42);
  --panel-inner: rgba(169, 126, 47, 0.16);
  --panel-shadow: 0 18px 44px rgba(120, 95, 40, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 0 40px rgba(255, 252, 240, 0.9);
  --sep: rgba(169, 126, 47, 0.26);
  --chip-bg: rgba(169, 126, 47, 0.06); --chip-ink: #6b5a33; --chip-border: rgba(169, 126, 47, 0.4);
  --chip-hover-ink: #4a4130; --chip-hover-border: rgba(169, 126, 47, 0.7);
  --chip-act-ink: #8a5a16; --chip-act-border: rgba(169, 126, 47, 0.85);
  --chip-act-bg: rgba(169, 126, 47, 0.12); --chip-act-glow: 0 0 10px rgba(169, 126, 47, 0.15);
  --search-bg: rgba(255, 255, 255, 0.92); --search-border: rgba(169, 126, 47, 0.45);
  --search-ink: #3a3222; --search-ph: #a4977a;
  --search-focus-border: rgba(169, 126, 47, 0.85); --search-focus-glow: 0 0 12px rgba(169, 126, 47, 0.18);
  --sbtn-bg: rgba(169, 126, 47, 0.12); --sbtn-bg-hover: rgba(169, 126, 47, 0.25); --sbtn-ink: #a97e2f;
  --pline: rgba(120, 100, 60, 0.5); --pline-dot: #8a6f35; --pline-glow: none;
  --title-ink: #2e2618; --title-glow: 0 2px 0 rgba(255, 255, 255, 0.6);
  --banner-sub: #7d7461; --banner-sub-b: #a97e2f;
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 245, 232, 0.97));
  --card-border: rgba(169, 126, 47, 0.3);
  --card-hover-border: rgba(169, 126, 47, 0.75);
  --card-hover-glow: 0 10px 26px rgba(120, 95, 40, 0.18), 0 0 16px rgba(169, 126, 47, 0.14);
  --icon-bg: radial-gradient(circle at 50% 32%, #faf5e6, #efe4c8);
  --icon-border: #cbb98d;
  --grp-title: #a97e2f;
  --link-ink: #8a5a16; --link-border: rgba(169, 126, 47, 0.45);
  --link-hover-bg: rgba(169, 126, 47, 0.08); --link-hover-border: rgba(169, 126, 47, 0.85);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: min(1600px, calc(100% - 48px)); margin: auto; }

/* ============ Sân khấu nền ============ */
.wk-stage {
  position: relative;
  background: var(--stage-bg);
  isolation: isolate;
  overflow: hidden;
  padding: 30px 0 90px;
  min-height: 60vh;
  transition: background .3s ease;
}
.wk-stage::before {
  content: ""; position: absolute; inset: -4%; z-index: -2;
  background: url("/assets/news/bg_news.webp") center 30% / cover no-repeat;
  filter: var(--tex-filter); opacity: var(--tex-op);
}
.wk-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--stage-overlay); pointer-events: none;
}

/* ============ Breadcrumb ============ */
.wk-crumb {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font: 13px var(--sans); color: var(--kt-muted); margin: 4px 0 18px;
}
.wk-crumb a { color: var(--kt-gold); border-bottom: 1px dashed var(--chip-border); }
.wk-crumb a:hover { color: var(--chip-act-ink); border-color: var(--chip-act-border); }
.wk-crumb b { color: var(--kt-ink); font-weight: 600; }

/* ============ Banner ============ */
.wk-banner { text-align: center; margin: 10px 0 8px; }
.wk-title {
  display: inline-block; font-family: var(--brush); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 64px); letter-spacing: .04em;
  color: var(--title-ink); text-shadow: var(--title-glow);
}
.wk-sub {
  color: var(--banner-sub); font-size: 14.5px; max-width: 860px;
  margin: 10px auto 0; text-wrap: balance;
}
.wk-sub b { color: var(--banner-sub-b); font-weight: 600; }

/* ============ Panel ============ */
.wk-panel {
  position: relative; margin-top: 26px; padding: 22px 26px 30px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; box-shadow: var(--panel-shadow);
}
.wk-panel::before {
  content: ""; position: absolute; inset: 8px; border-radius: 9px;
  border: 1px solid var(--panel-inner); pointer-events: none;
}

/* ============ Tabs lớn (mục trong trang) ============ */
.wk-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px 0 6px;
}
.wk-tab {
  padding: 7px 18px; border-radius: 999px; font: 600 13.5px var(--sans);
  background: var(--chip-bg); color: var(--chip-ink);
  border: 1px solid var(--chip-border); transition: all .18s;
}
.wk-tab:hover { color: var(--chip-hover-ink); border-color: var(--chip-hover-border); }
.wk-tab.on {
  color: var(--chip-act-ink); border-color: var(--chip-act-border);
  background: var(--chip-act-bg); box-shadow: var(--chip-act-glow);
}
.wk-tab .n { opacity: .65; font-weight: 400; margin-left: 4px; font-size: 12px; }

/* ============ Hàng filter chips + search ============ */
.wk-filters {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 10px 0 18px;
}
.wk-fgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chip {
  padding: 4px 13px; border-radius: 999px; font: 500 12.5px var(--sans);
  background: var(--chip-bg); color: var(--chip-ink);
  border: 1px solid var(--chip-border); transition: all .18s;
}
.wk-chip:hover { color: var(--chip-hover-ink); border-color: var(--chip-hover-border); }
.wk-chip.on {
  color: var(--chip-act-ink); border-color: var(--chip-act-border);
  background: var(--chip-act-bg); box-shadow: var(--chip-act-glow);
}
.wk-search {
  margin-left: auto; display: flex; align-items: center;
  border: 1px solid var(--search-border); border-radius: 999px;
  background: var(--search-bg); padding: 3px 4px 3px 14px;
}
.wk-search:focus-within { border-color: var(--search-focus-border); box-shadow: var(--search-focus-glow); }
.wk-search input {
  border: 0; outline: 0; background: none; width: 170px;
  color: var(--search-ink); font: 13.5px var(--sans); height: 30px;
}
.wk-search input::placeholder { color: var(--search-ph); }
.wk-search .sbtn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sbtn-bg); color: var(--sbtn-ink); font-size: 15px;
}
.wk-search .sbtn:hover { background: var(--sbtn-bg-hover); }

/* ============ Tiêu đề nhóm ============ */
.wk-grp { margin: 26px 0 6px; }
.wk-grp-t {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--grp-title); letter-spacing: .03em;
}
.wk-grp-t::before, .wk-grp-t::after {
  content: ""; height: 1px; flex: 1; background: var(--pline); opacity: .5;
}
.wk-grp-t .c { font: 400 12.5px var(--sans); color: var(--kt-muted); }
.wk-grp-d { text-align: center; color: var(--kt-muted); font-size: 13px; margin-top: 4px; }

/* ============ Grid + card ============ */
.wk-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.wk-grid.sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wk-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.wk-card:hover { transform: translateY(-2px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-glow); }
.wk-card.col { flex-direction: column; align-items: center; text-align: center; }
.wk-ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px;
  background: var(--icon-bg); border: 1px solid var(--icon-border);
  display: grid; place-items: center; overflow: hidden;
}
.wk-ic img { width: 100%; height: 100%; object-fit: cover; }
.wk-ic .ini { font-family: var(--calli); font-size: 22px; color: var(--kt-gold); }
.wk-ic.lg { width: 64px; height: 64px; }
.wk-bd { min-width: 0; flex: 1; }
.wk-nm { font-weight: 600; font-size: 14px; color: var(--kt-ink); line-height: 1.3; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wk-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 8px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--chip-ink);
}
.wk-tag.loi { color: #7fd6a4; border-color: rgba(127, 214, 164, .45); }
.wk-tag.hai { color: #ef8f80; border-color: rgba(239, 143, 128, .45); }
.wk-tag.khong-che { color: #e8c56e; border-color: rgba(232, 197, 110, .5); }
.wk-tag.trung { color: var(--kt-muted); }
.wk-tag.lv { color: var(--kt-gold); border-color: var(--chip-act-border); }
[data-theme="light"] .wk-tag.loi { color: #2f8f57; }
[data-theme="light"] .wk-tag.hai { color: #c04a3a; }
[data-theme="light"] .wk-tag.khong-che { color: #9a7b1e; }
.wk-ds {
  margin-top: 6px; font-size: 12.5px; line-height: 1.5;
  color: var(--kt-body); display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-card:hover .wk-ds { -webkit-line-clamp: unset; }
.wk-meta { font-size: 11.5px; color: var(--kt-muted); margin-top: 4px; }
.wk-meta a { color: var(--link-ink); border-bottom: 1px dashed var(--link-border); }
.wk-meta a:hover { border-color: var(--link-hover-border); }
.wk-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11.5px; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
.wk-stats b { color: var(--kt-ink); font-weight: 600; }
.wk-evo { font-size: 11px; color: var(--kt-faint); margin-top: 5px; }
.wk-evo b { color: var(--kt-note); font-weight: 600; }

/* Danh sách dạng dòng (binh thư, khắc văn...) */
.wk-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wk-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: 10px;
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.wk-row:hover { border-color: var(--card-hover-border); }

/* Thuyền card vinh danh (hub) */
.hub-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 22px; }
.hub-card {
  position: relative; overflow: hidden; padding: 20px 20px 18px;
  border-radius: 14px; background: var(--card-bg);
  border: 1px solid var(--card-border); transition: all .2s;
  display: flex; flex-direction: column; gap: 8px; min-height: 128px;
}
.hub-card:hover { transform: translateY(-3px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-glow); }
.hub-card .t { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--kt-ink); }
.hub-card .d { font-size: 13px; color: var(--kt-muted); flex: 1; }
.hub-card .c { font-size: 12px; color: var(--kt-gold); font-weight: 600; letter-spacing: .04em; }
.hub-card::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(circle, var(--chip-act-bg), transparent 70%);
}
.hub-sec { margin-top: 34px; }

/* Bảng chỉ số nhỏ trong trang chi tiết nhanh */
.wk-minitable { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.wk-minitable th, .wk-minitable td { padding: 4px 8px; border-bottom: 1px dashed var(--sep); text-align: left; }
.wk-minitable th { color: var(--kt-muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.wk-minitable td { color: var(--kt-body); }
.wk-minitable td:first-child { color: var(--kt-ink); font-weight: 600; }

/* Pager */
.wk-pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.wk-pager button {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px;
  background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--chip-border);
  font: 600 13px var(--sans); font-variant-numeric: tabular-nums;
}
.wk-pager button.on { color: var(--chip-act-ink); border-color: var(--chip-act-border); background: var(--chip-act-bg); }
.wk-pager button:hover:not(.on) { border-color: var(--chip-hover-border); color: var(--chip-hover-ink); }

.wk-empty { text-align: center; color: var(--kt-muted); padding: 40px 0 20px; font-size: 14px; }
.wk-count { text-align: center; color: var(--kt-muted); font-size: 13px; margin-top: 6px; }
.wk-count b { color: var(--kt-gold); }

/* Footer giữ nguyên class site-footer như các trang khác (copy markup) */

@media (max-width: 720px) {
  .wrap { width: calc(100% - 28px); }
  .wk-panel { padding: 16px 14px 22px; }
  .wk-search { margin-left: 0; width: 100%; max-width: 420px; margin-inline: auto; }
  .wk-search input { flex: 1; width: auto; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-grid.sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .wk-filters { justify-content: center; }
}