/* =====================================================================
   NỀN TẢNG GIAO DIỆN (hướng dẫn đầy đủ: DESIGN.md)
   Màu, chữ, khoảng cách dùng chung cho cả web. Sửa ở đây là đổi cả web.
   ===================================================================== */
:root {
    /* Khung nội dung: đầu trang, thân trang, chân trang cùng một mép trái/phải */
    --container: 1200px;
    --container-narrow: 820px;
    --gutter: 24px;
    --header-h: 68px;

    /* Khoảng cách: bội số của 4px */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --section-y: clamp(56px, 7vw, 96px);

    /* Cỡ chữ */
    --fs-display: clamp(40px, 5.2vw, 64px);
    --fs-h1: clamp(30px, 3.6vw, 44px);
    --fs-h2: clamp(26px, 2.8vw, 34px);
    --fs-h3: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-xs: 12.5px;

    /* Font: tiêu đề kiểu chữ khắc, còn lại 1 font dễ đọc. Cả 2 đủ dấu tiếng Việt nên VI và EN trông giống nhau */
    --font-title: "Spectral SC", Georgia, "Times New Roman", serif;
    --font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: var(--font-ui);
    --font: var(--font-ui);
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Bo góc */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;
    --radius-xs: var(--r-xs);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);

    /* Màu (chế độ tối) */
    --bg: #000;
    --bg-soft: #080706;
    --surface: #0f0d0b;
    --surface-2: #16130f;
    --surface-3: #201b15;
    --text: #f5f0e6;
    --text-muted: #b3a48c;
    --text-dim: #9a8a72;
    --text-gold: #f0d080;
    --link-hover: #fff6dc;
    --eyebrow: #ef6a55;
    --gold: #c9a84c;
    --gold-light: #f3d98a;
    --gold-dark: #7a5c1e;
    --border: #2a241d;
    --border-strong: #3f372d;
    --input-bg: #0b0a09;
    --input-border: #6b6358;
    --focus: #f0d080;
    --focus-ring: rgba(240, 208, 128, .45);
    --overlay: rgba(0, 0, 0, .66);
    --menu-bg: #12100d;
    --seg-bg: #1a1714;
    --seg-active: #2e2923;

    /* Màu có ý nghĩa: thành công, lỗi, cảnh báo, thông tin, chữ vàng (giá tiền, số vàng) */
    --c-success: #43d98a;
    --c-danger: #ff6b5b;
    --c-warn: #ffa24a;
    --c-info: #6aa8ff;
    --c-goldtext: #e6b93c;
    --discord: #5865f2;
    --red: #8d1a1a;
    --ok: #3fbf5a;

    /* Vàng kim */
    --grad-gold: linear-gradient(180deg, #f6dd92 0%, #d9b458 55%, #b08a34 100%);
    --grad-gold-hover: linear-gradient(180deg, #fbe7ab 0%, #e4c268 55%, #bd963c 100%);
    --grad-gold-text: linear-gradient(180deg, #fff6d8 8%, #f0d080 50%, #c9a24a 92%);
    --on-gold: #1a1206;

    /* Bóng đổ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
    --glow: 0 2px 14px rgba(201, 168, 76, .35);

    /* Chuyển động */
    --fast: 150ms;
    --normal: 200ms;
    --slow: 300ms;
    --ease: cubic-bezier(.2, .8, .2, 1);

    color-scheme: dark;
    accent-color: var(--gold);
}
/* Chế độ sáng: giấy dó + mực nâu, vẫn giữ chất vàng kim */
[data-theme="light"] {
    --bg: #f5efe4;
    --bg-soft: #efe6d6;
    --surface: #fffaf2;
    --surface-2: #fbf5ea;
    --surface-3: #f3ebdc;
    --text: #2b1f14;
    --text-muted: #5f4f3d;
    --text-dim: #6f5e4a;
    --text-gold: #8a5a12;
    --link-hover: #5a3a08;
    --eyebrow: #b3261e;
    --gold: #b8913e;
    --gold-light: #e2c46a;
    --gold-dark: #c9a45a;
    --border: #e2d4bd;
    --border-strong: #d2bf9c;
    --input-bg: #fff;
    --input-border: #9a8566;
    --focus: #8a5a12;
    --focus-ring: rgba(138, 90, 18, .3);
    --overlay: rgba(43, 31, 20, .45);
    --menu-bg: #fffaf2;
    --seg-bg: #efe6d6;
    --seg-active: #fffaf2;
    --c-success: #15803d;
    --c-danger: #b42318;
    --c-warn: #9a4a07;
    --c-info: #1d4ed8;
    --c-goldtext: #8a5a12;
    --shadow-sm: 0 2px 8px rgba(120, 80, 20, .08);
    --shadow-md: 0 12px 30px rgba(120, 80, 20, .12);
    --shadow-lg: 0 24px 60px rgba(80, 50, 10, .18);
    --glow: 0 2px 12px rgba(160, 110, 20, .25);
    color-scheme: light;
}
/* Vùng luôn tối (ảnh lớn trang chủ...): thêm class "on-dark" để chữ bên trong vẫn dùng màu của chế độ tối.
   Đầu trang ở trang chủ (trong suốt trên ảnh lớn) cũng dùng màu tối cho tới khi cuộn xuống. */
.on-dark, [data-theme="light"] .on-dark, [data-theme="light"] .layout-home .topbar:not(.is-scrolled) {
    --text: #f5f0e6;
    --text-muted: #c4b59c;
    --text-dim: #a8987f;
    --text-gold: #f0d080;
    --link-hover: #fff6dc;
    --eyebrow: #ef6a55;
    --gold: #c9a84c;
    --gold-dark: #7a5c1e;
    --border: rgba(255, 240, 210, .14);
    --border-strong: rgba(255, 240, 210, .26);
    --surface: rgba(14, 11, 8, .78);
    --surface-2: rgba(24, 19, 14, .82);
    --focus: #f0d080;
    --focus-ring: rgba(240, 208, 128, .45);
    --c-success: #43d98a;
    --c-danger: #ff6b5b;
    --c-warn: #ffa24a;
    --c-info: #6aa8ff;
    --c-goldtext: #e6b93c;
    color-scheme: dark;
}
.on-dark { color: var(--text); }
@media (max-width: 860px) {
    :root { --gutter: 16px; --header-h: 60px; }
}

/* ===== Nền tảng chung ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 400 var(--fs-body)/1.6 var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text-gold); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: rgba(201, 168, 76, .35); }
h1, h2, h3 { margin-top: 0; font-family: var(--font-title); font-weight: 700; color: var(--text-gold); line-height: 1.2; letter-spacing: .01em; text-wrap: balance; }
h4, h5, h6 { margin-top: 0; font-family: var(--font-ui); font-weight: 600; line-height: 1.35; }

/* Khung nội dung: mọi trang dùng chung 1 bề rộng để các mép thẳng hàng */
.wrap, .container {
    width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
    position: relative; z-index: 2;
}
.wrap-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.text-success { color: var(--c-success); }
.text-danger { color: var(--c-danger); }
.text-warn { color: var(--c-warn); }
.text-info { color: var(--c-info); }
.text-gold { color: var(--c-goldtext); }
/* Chữ chỉ dành cho máy đọc màn hình (người khiếm thị), không hiện ra */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Link "Bỏ qua đến nội dung" (hiện khi bấm phím Tab) */
.skip-link {
    position: fixed; left: 16px; top: -80px; z-index: 1001; padding: 10px 16px; border-radius: var(--r-sm);
    background: var(--grad-gold); color: var(--on-gold); font: 600 14px var(--font-ui); box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 12px; color: var(--on-gold); }

/* Đốm lửa bay: chỉ có ở trang chủ, assets/main.js đặt nó vào trong ảnh lớn (.hero) */
#embers { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 1; }
.hero > #embers { inset: 0; height: 100%; }

/* ===== Tiêu đề khu vực: dòng nhỏ + tiêu đề + hoa văn ===== */
.eyebrow { margin: 0 0 var(--sp-2); color: var(--eyebrow); font: 600 13px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.section-head { max-width: 760px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head .ornament { margin: var(--sp-3) 0 0; }
.section-head-left { margin-left: 0; text-align: left; }
.section-head-left .ornament { justify-content: flex-start; }
.section-head-left .section-lead { margin-left: 0; }
.section-head-left .ornament span:first-child { display: none; }
.section-title { margin: 0; font-size: var(--fs-h2); }
.section-title, .text-shine {
    background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-block: .06em;
}
[data-theme="light"] .section-title:not(.on-dark *), [data-theme="light"] .text-shine:not(.on-dark *) { background: none; color: var(--text-gold); }
.section-lead { margin: var(--sp-3) auto 0; max-width: 620px; color: var(--text-muted); font-size: 16.5px; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; color: var(--gold); font-size: 10px; line-height: 1; }
.ornament span { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament span:last-child { transform: scaleX(-1); }
/* Dải nội dung trang chủ / trang con: cách đều trên dưới, dải xen kẽ có nền khác và đường chỉ vàng */
.section { position: relative; padding-block: var(--section-y); }
.section-alt { background: var(--bg-soft); }
.section-alt::before, .section-alt::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .45) 50%, transparent);
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }

/* ===== Thanh menu trên cùng ===== */
.topbar {
    position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
    background: rgba(8, 7, 6, .9); border-bottom: 1px solid rgba(201, 168, 76, .16);
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    transition: background var(--slow), border-color var(--slow), box-shadow var(--slow);
}
.topbar.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .4); }
/* Trang chủ: trong suốt trên ảnh lớn, cuộn xuống thì có nền đặc */
.layout-home .topbar:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.topbar-inner {
    height: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter);
    display: flex; align-items: center; gap: 20px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; color: var(--text-gold); }
.logo-mark { display: block; width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(255, 120, 30, .35)); transition: transform var(--slow) var(--ease); }
.logo-header { width: 210px; height: 58px; object-fit: contain; }
.logo-header-drawer { width: 180px; height: 48px; }
.logo:hover .logo-mark { transform: rotate(-4deg) scale(1.06); }
.logo-words { display: flex; flex-direction: column; min-width: 0; }
.logo-text { font: 700 20px/1.05 var(--font-title); color: var(--text-gold); letter-spacing: .02em; white-space: nowrap; }
.logo-text span { color: #ff7a3d; }
.logo-sub { margin-top: 4px; font: 600 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.logo:hover .logo-text { color: var(--text-gold); }
/* Trang chủ: ở đầu trang đã có logo rồng lớn nên ẩn logo nhỏ, cuộn xuống thì hiện lại */
.topbar-inner > .logo { transition: opacity var(--slow), visibility var(--slow), transform var(--slow) var(--ease); }
.layout-home .topbar:not(.is-scrolled) .topbar-inner > .logo { opacity: 0; visibility: hidden; transform: translateY(-6px); }

.menu { flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.menu a {
    position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
    color: var(--text-muted); font: 600 13.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.menu a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
    background: var(--grad-gold); transform: scaleX(0); transition: transform var(--normal) var(--ease);
}
.menu a + a::before { content: "◆"; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); color: var(--gold-dark); font-size: 7px; }
.menu a:hover { color: var(--text); }
.menu a:hover::after { transform: scaleX(.4); }
.menu a.active, .menu a[aria-current="page"] { color: var(--text-gold); }
.menu a.active::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

.actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.topbar .divider { width: 1px; height: 24px; margin: 0 4px; background: var(--border-strong); }
.icon-link:hover { color: var(--text-gold); }
.menu-toggle { display: none; }
/* Nút mở menu trên điện thoại (3 gạch) */
.menu-button {
    display: none; width: 44px; height: 44px; margin-right: -8px; place-items: center; flex-shrink: 0;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-gold); cursor: pointer;
}
.menu-button:hover { background: rgba(201, 168, 76, .1); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; width: 15px; }

/* Nút chọn ngôn ngữ + giao diện (gộp 1 chỗ) */
.prefs-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 9px; cursor: pointer; list-style: none;
    border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text-muted);
    font: 600 13px/1 var(--font-ui); letter-spacing: .04em; transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.prefs-btn:hover, .prefs-menu[open] > .prefs-btn { border-color: var(--gold); color: var(--text-gold); }
.prefs-btn .chev { opacity: .7; transition: transform var(--normal); }
.prefs-menu[open] .chev { transform: rotate(180deg); }
.prefs-panel { width: 290px; padding: 12px; }
.dd-label { margin: 2px 4px 8px; color: var(--text-dim); font: 600 12px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.segmented + .dd-label { margin-top: 14px; }

/* Ngăn kéo menu trên điện thoại */
.drawer {
    position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(201, 168, 76, .25);
    background: var(--menu-bg); color: var(--text); box-shadow: var(--shadow-lg);
}
.drawer[open] { display: flex; flex-direction: column; animation: drawerIn .28s var(--ease) both; }
.drawer::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--border); }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px calc(24px + env(safe-area-inset-bottom)); }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border-radius: 10px;
    color: var(--text); font: 600 16px/1.2 var(--font-ui);
}
.drawer-nav a svg { color: var(--text-dim); flex-shrink: 0; }
.drawer-nav a:hover { background: rgba(201, 168, 76, .08); color: var(--text-gold); }
.drawer-nav a[aria-current="page"] { background: rgba(201, 168, 76, .12); color: var(--text-gold); box-shadow: inset 3px 0 0 var(--gold); }
.drawer-nav a[aria-current="page"] svg { color: var(--text-gold); }
.drawer-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.drawer-section .segmented { margin-bottom: 4px; }
.drawer-auth { display: grid; gap: 10px; margin-top: 22px; }
.drawer-user { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.drawer-user b { display: block; font: 600 15px var(--font-ui); color: var(--text); }
.drawer-user small { display: block; color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.drawer-user form { margin: 0; }
.drawer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

@media (max-width: 1180px) {
    .topbar .icon-link { display: none; }
    .menu a { padding: 0 9px; letter-spacing: .05em; }
    .menu a::after { left: 9px; right: 9px; }
    .logo-sub { display: none; }
}
@media (max-width: 1024px) {
    .topbar .menu, .topbar .prefs-menu, .topbar .divider { display: none; }
    .menu-button { display: grid; }
}
@media (max-width: 560px) {
    .topbar-inner { gap: 10px; }
    .actions { gap: 6px; }
    .logo-header { width: 184px; height: 50px; }
    .logo-header-drawer { width: 160px; height: 44px; }
    .logo-text { font-size: 18px; }
    .btn-login { width: 40px; padding: 0; }
    .btn-login .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 360px) {
    .topbar .logo-words { display: none; }
}

/* ===== Nút bấm =====
   .btn = nút thường. Thêm: .btn-primary (vàng), .btn-secondary (viền vàng), .btn-ghost (nhẹ), .btn-danger (xoá/huỷ)
   Cỡ: .btn-sm, (thường), .btn-lg. Rộng hết: .btn-block. Đang xử lý: .is-loading
   Tên cũ vẫn dùng được: .btn-gold .btn-light .btn-pay = vàng; .btn-outline .btn-red = viền vàng; .btn-soft = thường */
.btn, .btn-light, .btn-soft, .btn-pay {
    --btn-h: 42px;
    --spin: var(--text);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--btn-h); padding: 0 20px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text);
    font: 600 14.5px/1.2 var(--font-ui); letter-spacing: .01em; text-transform: none; text-align: center; text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast), filter var(--fast), transform var(--fast);
}
.btn:hover, .btn-soft:hover { border-color: var(--gold); color: var(--text-gold); }
.btn:active, .btn-light:active, .btn-soft:active, .btn-pay:active { transform: translateY(1px); }
.btn svg, .btn-light svg, .btn-soft svg, .btn-pay svg { flex-shrink: 0; }
.btn-primary, .btn-gold, .btn-light, .btn-pay {
    --spin: var(--on-gold);
    border-color: #b8913e; background: var(--grad-gold); color: var(--on-gold);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, .55), 0 4px 16px rgba(201, 168, 76, .22);
}
.btn-primary:hover, .btn-gold:hover, .btn-light:hover, .btn-pay:hover {
    border-color: #d4ad52; background: var(--grad-gold-hover); color: var(--on-gold);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, .6), 0 6px 22px rgba(201, 168, 76, .4);
}
.btn-secondary, .btn-outline, .btn-red { border-color: var(--gold); background: transparent; color: var(--text-gold); }
.btn-secondary:hover, .btn-outline:hover, .btn-red:hover { border-color: var(--gold-light); background: rgba(201, 168, 76, .12); color: var(--text-gold); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { border-color: transparent; background: rgba(201, 168, 76, .1); color: var(--text); }
.btn-danger { --spin: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 55%, transparent); background: color-mix(in srgb, var(--c-danger) 10%, transparent); color: var(--c-danger); }
.btn-danger:hover { border-color: #b42318; background: #b42318; color: #fff; }
.btn-sm, .btn-small { --btn-h: 34px; padding: 0 14px; border-radius: 7px; font-size: 13.5px; }
.btn-soft { --btn-h: 38px; padding: 0 14px; font-size: 14px; }
.btn-lg { --btn-h: 52px; padding: 0 30px; border-radius: 10px; font-size: 16px; }
.btn-pay { --btn-h: 48px; width: 100%; font-size: 16px; }
.btn-block, .btn-wide { display: flex; width: 100%; }
.btn-icon { width: var(--btn-h); padding: 0; }
.btn-caps { text-transform: uppercase; letter-spacing: .08em; font-size: 13.5px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled,
.btn-light:disabled, .btn-pay:disabled, .btn-soft:disabled, .btn-soft.is-disabled {
    opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); transform: none;
}
.btn[aria-disabled="true"], .btn.is-disabled, .btn-soft.is-disabled { pointer-events: none; }
/* Đang xử lý: chữ ẩn đi, hiện vòng xoay */
.btn.is-loading, .btn-light.is-loading, .btn-pay.is-loading, .btn-soft.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading > *, .btn-light.is-loading > *, .btn-pay.is-loading > *, .btn-soft.is-loading > * { visibility: hidden; }
.btn.is-loading::after, .btn-light.is-loading::after, .btn-pay.is-loading::after, .btn-soft.is-loading::after {
    content: ""; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto;
    border: 2px solid var(--spin); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite;
}
@media (pointer: coarse) {
    .btn-sm, .btn-small { --btn-h: 40px; }
}

/* ===== Ô nhập liệu ===== */
.field { margin-bottom: var(--sp-4); }
.field > label, .field-label, .label-row { display: block; margin-bottom: 7px; color: var(--text); font: 600 14px/1.4 var(--font-ui); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row label { margin: 0; }
.field-opt { color: var(--text-dim); font-weight: 400; }
.input, .search-row > input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .field select, .field textarea {
    display: block; width: 100%; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text);
    font: 400 15px/1.4 var(--font-ui);
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.input:hover, .field input:hover, .field select:hover, .field textarea:hover, .search-row > input:hover { border-color: var(--text-dim); }
.input:focus, .search-row > input:focus,
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.input::placeholder, .field input::placeholder, .field textarea::placeholder, .search-row > input::placeholder { color: var(--text-dim); opacity: 1; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b3a48c' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235f4f3d' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); }
.field input[type="file"] { display: block; width: 100%; padding: 8px; border: 1px dashed var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text-muted); font: 400 14px var(--font-ui); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .6; cursor: not-allowed; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"], .field input:user-invalid { border-color: var(--c-danger); }
.field-tip { margin: 6px 0 0; color: var(--text-dim); font: 400 13px/1.5 var(--font-ui); }
.field-error { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 0; color: var(--c-danger); font: 500 13px/1.45 var(--font-ui); }
.field-error::before {
    content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px;
    border-radius: 50%; background: var(--c-danger); color: var(--bg); font: 700 11px/1 var(--font-ui);
}
@media (max-width: 860px) {
    /* chữ 16px để iPhone không tự phóng to trang khi bấm vào ô nhập */
    .input, .search-row > input, .search-input input,
    .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea { font-size: 16px; }
    .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { min-height: 46px; }
}

/* ===== Thẻ (khung nội dung) ===== */
.card {
    position: relative; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); color: var(--text); box-shadow: var(--shadow-sm);
}
.card-gold { border-color: rgba(201, 168, 76, .45); box-shadow: inset 0 1px 0 rgba(240, 208, 128, .12), var(--shadow-md); }
.card-title { margin: 0 0 6px; font: 600 var(--fs-h3)/1.3 var(--font-title); color: var(--text-gold); }
.card-text { margin: 0; color: var(--text-muted); font-size: 15px; }
a.card, .card-link { display: block; transition: transform var(--normal) var(--ease), border-color var(--normal), box-shadow var(--normal); }
a.card:hover, .card-link:hover { color: var(--text); }
@media (hover: hover) {
    a.card:hover, .card-link:hover { transform: translateY(-3px); border-color: rgba(201, 168, 76, .5); box-shadow: var(--shadow-md), 0 0 0 1px rgba(201, 168, 76, .15); }
}
.grid-auto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* ===== Nhãn trạng thái (badge) ===== */
.badge {
    --tone: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
    border-radius: var(--r-pill); background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone);
    font: 600 12.5px/1.4 var(--font-ui); white-space: nowrap; vertical-align: middle;
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success, .badge-on, .badge-paid, .badge-done { --tone: var(--c-success); }
.badge-danger, .badge-rejected { --tone: var(--c-danger); }
.badge-warn, .badge-pending { --tone: var(--c-warn); }
.badge-info { --tone: var(--c-info); }
.badge-gold { --tone: var(--c-goldtext); }
.badge-neutral, .badge-off, .badge-cancelled { --tone: var(--text-muted); }

/* ===== Thông báo trong trang ===== */
.alert {
    --tone: var(--c-info);
    display: block; padding: 12px 16px; margin: 0 0 var(--sp-4); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    border-left-width: 3px; border-left-color: var(--tone); border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--tone) 9%, var(--surface)); color: var(--text); font: 500 14.5px/1.5 var(--font-ui);
}
.alert-ok { --tone: var(--c-success); }
.alert-error { --tone: var(--c-danger); }
.alert-warn { --tone: var(--c-warn); }
.alert-info { --tone: var(--c-info); }
/* Thông báo từ máy chủ in bằng <div data-toast="ok|err|info">: có JS thì hiện thành toast góc màn hình */
[data-toast] { padding: 12px 16px; margin: 0 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.js [data-toast] { display: none; }

/* ===== Ô số liệu ===== */
.stat-tiles { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stat-tile { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.stat-ico, .tone-ico {
    --tone: var(--c-goldtext);
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone);
}
.tone-success { --tone: var(--c-success); }
.tone-danger { --tone: var(--c-danger); }
.tone-warn { --tone: var(--c-warn); }
.tone-info { --tone: var(--c-info); }
.tone-gold { --tone: var(--c-goldtext); }
.stat-label { margin: 0; color: var(--text-muted); font: 500 13.5px/1.4 var(--font-ui); }
.stat-value { margin: 2px 0 0; color: var(--text); font: 700 24px/1.2 var(--font-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-hint { margin: 3px 0 0; color: var(--text-dim); font: 400 13px/1.4 var(--font-ui); }

/* ===== Thanh tab (gạch chân) và nút chọn dạng viên (segmented) ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button {
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; flex-shrink: 0;
    border: 0; background: none; color: var(--text-muted); font: 600 14.5px var(--font-ui); white-space: nowrap; cursor: pointer;
}
.tabs > a:hover, .tabs > button:hover { color: var(--text); }
.tabs > .is-active, .tabs > [aria-selected="true"], .tabs > [aria-current="page"] { color: var(--text-gold); }
.tabs > .is-active::after, .tabs > [aria-selected="true"]::after, .tabs > [aria-current="page"]::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad-gold);
}
.segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--seg-bg); }
.segmented-block { display: flex; width: 100%; }
.segmented > a, .segmented > button, .segmented .dd-item {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 36px; padding: 0 12px;
    border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: 600 14px/1.2 var(--font-ui); white-space: nowrap; cursor: pointer;
}
.segmented > a:hover, .segmented > button:hover, .segmented .dd-item:hover { background: rgba(201, 168, 76, .1); color: var(--text); }
.segmented > .is-active, .segmented > [aria-pressed="true"], .segmented > [aria-current="true"], .segmented .dd-item.is-active {
    background: var(--seg-active); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
[data-theme="light"] .segmented > .is-active, [data-theme="light"] .segmented > [aria-pressed="true"], [data-theme="light"] .segmented > [aria-current="true"], [data-theme="light"] .segmented .dd-item.is-active { box-shadow: 0 1px 4px rgba(120, 80, 20, .16); }

/* ===== Đường dẫn (Trang chủ › Tin tức › ...) ===== */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--text-muted); font: 500 13.5px/1.4 var(--font-ui); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-gold); }
.breadcrumb [aria-current] { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* ===== Khung chờ tải (hiệu ứng ánh sáng chạy) ===== */
.skeleton {
    display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-text { height: .9em; margin: .4em 0; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===== Thông báo nhỏ ở góc màn hình (toast) ===== */
.toast-stack {
    position: fixed; right: 24px; bottom: 24px; z-index: 1100; display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
    --tone: var(--c-info);
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 14px; pointer-events: auto;
    border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: var(--r-md);
    background: var(--menu-bg); color: var(--text); box-shadow: var(--shadow-lg); font: 500 14.5px/1.45 var(--font-ui);
    animation: toastIn .28s var(--ease) both;
}
.toast-ok { --tone: var(--c-success); }
.toast-err { --tone: var(--c-danger); }
.toast-ico { flex-shrink: 0; margin-top: 1px; color: var(--tone); }
.toast-text { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.toast-close {
    flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px -2px 0 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.toast-close:hover { background: var(--surface-3); color: var(--text); }
.toast.is-leaving { animation: toastOut .2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (max-width: 860px) {
    .toast-stack { left: 12px; right: 12px; top: calc(var(--header-h) + 8px + env(safe-area-inset-top)); bottom: auto; width: auto; }
}

/* ===== Hộp hỏi lại trước khi làm (data-confirm) ===== */
.confirm-modal { width: min(420px, calc(100vw - 32px)); }
.confirm-body { display: flex; gap: 14px; align-items: flex-start; }
.confirm-body .tone-ico { border-radius: 50%; }
.confirm-msg { margin: 8px 0 0; color: var(--text); font: 500 16px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 420px) {
    .modal-actions .btn { flex: 1; }
}

/* ===== Thanh vàng chạy trên cùng khi đang chuyển trang ===== */
.nav-progress {
    position: fixed; top: 0; left: 0; z-index: 1200; width: 0; height: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, #a8842e, #f3d98a, #fff3cf); box-shadow: 0 0 10px rgba(240, 208, 128, .7);
}
.nav-progress.is-active { opacity: 1; animation: navProgress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes navProgress { 0% { width: 0; } 10% { width: 38%; } 40% { width: 70%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) {
    .nav-progress.is-active { width: 70%; }
}

/* Chuyển trang mượt (trình duyệt mới tự làm mờ dần giữa 2 trang) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.topbar { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ===== Ô trạng thái góc trái ===== */
.status-box {
    position: absolute; top: 80px; left: 16px; z-index: 40; white-space: nowrap;
    background: rgba(8,8,8,.85); border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; color: var(--text-muted); min-width: 170px; overflow: hidden;
    animation: slideIn .6s ease-out both .3s;
}
.status-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.status-row + .status-row { border-top: 1px solid var(--border); }
.status-row b { color: var(--text); }
.status-row svg { color: var(--gold); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2s infinite; }
.dot.off { background: #d33; }

/* ===== Phần ảnh lớn trang chủ ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg video, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.hero-img { animation: slowZoom 30s ease-in-out infinite alternate; }
.hero-default {
    background:
        radial-gradient(ellipse 60% 50% at 75% 40%, rgba(120,40,160,.35), transparent 70%),
        radial-gradient(ellipse 50% 60% at 20% 60%, rgba(150,20,20,.55), transparent 70%),
        radial-gradient(ellipse at 50% 100%, #2a0606, #0a0203 60%, #000);
}
.hero-default::after {
    content: ""; position: absolute; inset: -20%;
    background: radial-gradient(circle at 30% 30%, rgba(255,80,40,.12), transparent 40%), radial-gradient(circle at 70% 70%, rgba(80,120,255,.10), transparent 40%);
    animation: drift 18s ease-in-out infinite alternate;
}
.hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.65) 80%), linear-gradient(to bottom, transparent 60%, #000); }
.hero-content { position: relative; z-index: 3; padding: 100px 16px 60px; }

.emblem { animation: fadeUp 1s ease-out both, float 6s ease-in-out infinite 1s; }
.emblem img { width: min(470px, 88vw, 56vh); filter: drop-shadow(0 0 30px rgba(255,140,40,.45)); }
.emblem-text { display: inline-flex; flex-direction: column; align-items: center; padding: 26px 40px; position: relative; }
.emblem-text::before {
    content: ""; position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
    box-shadow: 0 0 30px rgba(255,140,40,.35), inset 0 0 30px rgba(255,140,40,.2); opacity: .7;
}
.emblem-top { color: #5ad1ff; letter-spacing: 10px; text-shadow: 0 0 12px #5ad1ff; font-size: 14px; }
.emblem-text strong {
    font-family: var(--font-title); font-weight: 800; font-size: clamp(40px, 8vw, 76px); line-height: 1.1; text-transform: uppercase;
    background: linear-gradient(180deg, #fff6d8 10%, #f0d080 45%, #b8802a 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #3a1a05) drop-shadow(0 0 22px rgba(255,120,30,.55));
    animation: glow 3s ease-in-out infinite alternate;
}
.emblem-sub { color: var(--text-muted); font-size: 16px; letter-spacing: 3px; margin-top: 6px; }

.uptime-label { margin: 22px 0 10px; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gold); animation: fadeUp 1s ease-out both .3s; }
.uptime { display: flex; justify-content: center; gap: 12px; animation: fadeUp 1s ease-out both .45s; }
.uptime div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.uptime b {
    min-width: 88px; padding: 10px 12px; font: 700 36px/1 "Courier New", monospace; color: #ffc425;
    background: linear-gradient(180deg, #1a0e08, #0b0604); border: 1px solid #2a1a10; border-radius: var(--radius-sm);
    text-shadow: 0 0 12px rgba(255,196,37,.5);
}
.uptime span { color: var(--text-gold); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }

/* Nút "Chơi ngay" hình lục giác có đá quý hai bên */
.play-btn {
    position: relative; display: inline-flex; align-items: center; gap: 22px; margin-top: 44px; padding: 20px 58px;
    color: #fff8e6; font: 700 24px/1 var(--font-title); letter-spacing: .06em;
    background: linear-gradient(180deg, #c29d52, #8a6a2c 55%, #5f4719);
    clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
    text-shadow: 0 2px 4px rgba(0,0,0,.7);
    filter: drop-shadow(0 0 16px rgba(240,208,128,.28));
    animation: fadeUp 1s ease-out both .6s;
    transition: filter var(--slow), transform var(--slow);
}
.play-btn::before {
    content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,236,190,.4);
    background: linear-gradient(180deg, rgba(255,240,200,.18), transparent 45%);
    clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
}
.play-btn::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,240,200,.45), transparent);
    animation: shine 3.5s ease-in-out infinite 1.5s;
}
.play-btn:hover { filter: brightness(1.25) drop-shadow(0 0 20px rgba(240,208,128,.6)); transform: scale(1.04); color: #fff; }
.gem { width: 14px; height: 14px; background: linear-gradient(135deg, #f4e2a6, #9a7a34); transform: rotate(45deg); box-shadow: 0 0 8px rgba(240,208,128,.8); }

.scroll-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 30px; color: var(--text-gold); animation: bounce 2s infinite; }

/* ===== Tin tức trang chủ ===== */
.home-news { padding-block: 60px 80px; }
.home-news .section-title, .factions .section-title { text-align: center; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 30px; }
.tag { display: inline-block; background: var(--red); color: #ffd9b0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-xs); }

/* ===== Trang con ===== */
/* Băng tiêu đề trang con: nền tối có nhân vật môn phái bên phải (chọn bằng $bannerFaction) */
.page-banner {
    --aura: 201,168,76;
    position: relative; z-index: 2; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
    min-height: calc(var(--header-h) + 232px); padding: calc(var(--header-h) + 36px) 0 40px; text-align: left;
    background:
        radial-gradient(ellipse 42% 95% at 80% 45%, rgba(var(--aura), .28), transparent 70%),
        radial-gradient(ellipse 60% 120% at 8% 0%, rgba(141, 26, 26, .4), transparent 62%),
        linear-gradient(180deg, #0d0806, #050302);
    border-bottom: 1px solid rgba(201, 168, 76, .16);
}
.page-banner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.page-banner-art {
    position: absolute; z-index: -1; top: 0; bottom: 0; right: max(0px, calc(50% - var(--container) / 2 - 40px)); width: min(560px, 58%);
    pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%);
}
.page-banner-art picture { position: absolute; right: 8%; top: 14px; height: 200%; }
.page-banner-art img {
    display: block; width: auto; height: 100%;
    filter: drop-shadow(0 0 28px rgba(var(--aura), .35));
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 52%); mask-image: linear-gradient(180deg, #000 30%, transparent 52%);
}
.page-banner .breadcrumb { margin-bottom: 14px; }
.page-banner .eyebrow { margin-bottom: 6px; }
.page-banner h1 {
    margin: 0; max-width: 16em; font-size: var(--fs-h1);
    background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-block: .06em; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .7));
}
.page-lead { margin: 10px 0 0; max-width: 580px; color: var(--text-muted); font-size: 16.5px; line-height: 1.6; }
.page-banner .ornament { justify-content: flex-start; margin: 14px 0 0; }
.page-banner .ornament span:first-child { display: none; }
[data-theme="light"] .page-banner {
    background:
        radial-gradient(ellipse 42% 95% at 80% 45%, rgba(var(--aura), .2), transparent 70%),
        radial-gradient(ellipse 60% 120% at 8% 0%, rgba(201, 120, 60, .14), transparent 62%),
        linear-gradient(180deg, #fbf3e3, #f2e4c8);
    border-bottom-color: #e2cfa6;
}
[data-theme="light"] .page-banner h1 { background: none; color: #6b4210; filter: none; }
[data-theme="light"] .page-banner-art img { filter: drop-shadow(0 10px 22px rgba(80, 40, 0, .22)); }
@media (max-width: 860px) {
    .page-banner { min-height: calc(var(--header-h) + 150px); padding: calc(var(--header-h) + 22px) 0 26px; }
    .page-banner-art { width: 62%; opacity: .5; }
    .page-banner-art picture { right: -4%; height: 185%; }
    .page-lead { font-size: 15px; }
}
main.wrap { padding-block: var(--sp-6) var(--sp-8); min-height: 40vh; }
.panel {
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px; animation: fadeUp .5s ease-out both;
}
.panel h2 { font-size: 22px; }
@media (max-width: 560px) { .panel { padding: 16px; } }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.table tr:hover td { background: rgba(201,168,76,.05); }
.top1 td { color: #ffd54a; font-weight: 700; }
.top2 td { color: #e3e3e3; font-weight: 700; }
.top3 td { color: #e0995a; font-weight: 700; }
.table-wrap { overflow-x: auto; }

code { background: var(--surface-3); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--text-gold); font-family: var(--font-mono); font-size: .92em; }



/* ===== Chuyển động ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow { from { filter: drop-shadow(0 3px 0 #3a1a05) drop-shadow(0 0 14px rgba(255,120,30,.4)); } to { filter: drop-shadow(0 3px 0 #3a1a05) drop-shadow(0 0 30px rgba(255,150,40,.8)); } }
@keyframes shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes drift { from { transform: translate(-3%, -2%) rotate(0deg); } to { transform: translate(3%, 2%) rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Điện thoại ===== */
@media (max-width: 860px) {
    .status-box { top: 72px; left: 50%; transform: translateX(-50%); animation: none; display: flex; font-size: 13px; min-width: 0; }
    .hero-content { padding-top: 120px; }
    .status-row + .status-row { border-top: 0; border-left: 1px solid var(--border); }
    .uptime { gap: 6px; }
    .uptime b { min-width: 64px; font-size: 26px; padding: 8px; }
    .play-btn { padding: 18px 44px; font-size: 21px; margin-top: 48px; }
}
@media (max-width: 420px) {
    .status-row { padding: 6px 8px; }
}

/* ===== 6 nhân vật thay phiên ở trang chủ ===== */
.heroes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-char {
    position: absolute; margin: 0; bottom: 0; right: 1%; height: 90vh; width: 34vw;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    opacity: 0; transform: translateX(80px) scale(.94); filter: blur(6px) brightness(.6);
    transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .9s ease;
}
.hero-char:nth-child(even) { right: auto; left: 2%; transform: translateX(-80px) scale(.94); }
.hero-char.is-active { opacity: 1; transform: none; filter: none; }
.hero-char.is-leaving { opacity: 0; transform: translateY(20px) scale(1.06); filter: blur(10px) brightness(1.6); }
.hero-char img {
    position: relative; max-height: 100%; max-width: 100%; object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(var(--aura), .45));
}
.hero-char.is-active img { animation: charFloat 5s ease-in-out infinite; }
.aura {
    position: absolute; left: 50%; bottom: 15%; width: 70%; aspect-ratio: 1; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(var(--aura), .45), rgba(var(--aura), .12) 45%, transparent 70%);
    border-radius: 50%; filter: blur(20px);
}
.hero-char.is-active .aura { animation: auraPulse 3s ease-in-out infinite; }
/* Tên môn phái: chữ thư pháp (Charm) nằm ngang trên đầu nhân vật, tô vàng, có vệt sáng quét qua */
/* Chữ nằm ngay trên đầu nhân vật (khung xếp dọc: chữ ở trên, ảnh ở dưới) */
.hero-char img { max-height: calc(100% - clamp(64px, 9vh, 96px)); min-height: 0; }
.hero-char figcaption {
    order: -1; position: relative; z-index: 2; margin-bottom: -.1em; padding: .08em .35em .18em; white-space: nowrap;
    font: 700 clamp(36px, 3.6vw, 60px)/1.25 "Charm", var(--font-title);
    background: linear-gradient(100deg, #b8802a 0%, #f0d080 30%, #fffbe8 45%, #f0d080 60%, #b8802a 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #3a1a05) drop-shadow(0 0 16px rgba(var(--aura), .55));
    opacity: 0; transform: translateY(-18px); transition: opacity .8s ease .5s, transform .8s var(--ease) .5s;
}
.hero-char.is-active figcaption { opacity: 1; transform: none; animation: capShine 3.2s linear 1.3s infinite; }
@keyframes capShine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-char.is-active figcaption { animation: none; } }

.hero-dots { position: absolute; bottom: 28px; right: 32px; z-index: 4; display: flex; gap: 10px; }
.hero-dots button {
    width: 12px; height: 12px; padding: 0; border: 1px solid var(--gold); background: transparent;
    transform: rotate(45deg); cursor: pointer; transition: background var(--normal), box-shadow var(--normal);
}
.hero-dots button:hover, .hero-dots button.is-active { background: var(--gold); box-shadow: var(--glow); }

/* Chữ giữa màn hình nổi hơn khi có nhân vật phía sau */
.hero-content { text-shadow: 0 2px 8px #000; }

/* ===== Khu môn phái ===== */
.factions { padding: 70px 16px 10px; }
.faction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.faction {
    position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-align: center;
    background: linear-gradient(180deg, rgba(20,14,10,.9), #050403); padding: 0 12px 16px;
    transition: transform var(--slow), border-color var(--slow), box-shadow var(--slow);
    animation: fadeUp .7s ease-out both; animation-delay: var(--delay);
}
.faction-img { height: 230px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.faction-img::before {
    content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 70%; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--aura), .35), transparent 70%); filter: blur(12px);
    transition: opacity var(--slow); opacity: .6;
}
.faction img { position: relative; max-height: 100%; max-width: 100%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.faction h3 { margin: 10px 0 4px; font-size: 20px; }
.faction p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.faction:hover { transform: translateY(-6px); border-color: rgba(var(--aura), .7); box-shadow: 0 8px 30px rgba(var(--aura), .25); }
.faction:hover img { transform: scale(1.08) translateY(-4px); }
.faction:hover .faction-img::before { opacity: 1; }

@keyframes charFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes auraPulse { 0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }

@media (max-width: 860px) {
    .hero-char, .hero-char:nth-child(even) { left: 50%; right: auto; width: 100vw; height: 80vh; margin-left: -50vw; }
    .hero-char.is-active { opacity: .35; }
    .hero-char figcaption { display: none; }
    .hero-dots { right: 50%; transform: translateX(50%); bottom: 64px; }
    .scroll-hint { bottom: 12px; }
}

/* ===== Màn hình chờ có logo: chỉ hiện ở lần mở web đầu tiên trong phiên, không có ở bảng điều khiển ===== */
.loader {
    position: fixed; inset: 0; z-index: 999; display: none; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(ellipse 60% 50% at 50% 46%, #2a0a06 0%, #130504 48%, #050101 100%);
    transition: opacity .45s ease, visibility .45s;
    animation: loaderAuto .4s ease 4s forwards; /* lỡ JS lỗi thì 4 giây sau cũng tự tắt */
}
.show-loader .loader { display: flex; }
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loaderAuto { to { opacity: 0; visibility: hidden; } }
.loader-emblem { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.loader-emblem img { width: 86px; height: 86px; object-fit: contain; position: relative; z-index: 2; animation: logoBreath 2.4s ease-in-out infinite; }
.loader-ring {
    position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(201,168,76,.45);
    box-shadow: 0 0 30px rgba(196,80,28,.22), inset 0 0 30px rgba(196,80,28,.16);
}
.loader-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(201,168,76,.2); background: radial-gradient(circle, rgba(120,40,12,.45), transparent 70%); }
.loader-orbit { position: absolute; inset: -2px; border-radius: 50%; animation: spin 2.6s linear infinite; z-index: 3; }
.loader-orbit i { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #f3d98a; box-shadow: 0 0 10px #f0b040, 0 0 20px rgba(255,140,40,.7); }
.loader-orbit-2 { inset: 10px; animation-duration: 4s; animation-direction: reverse; }
.loader-orbit-2 i { width: 5px; height: 5px; background: #ff7a50; opacity: .8; }
.loader-name { margin-top: 24px; font: 700 32px/1.2 var(--font-title); letter-spacing: .06em; color: #e8cf96; white-space: nowrap; }
.loader-name span { display: inline-block; animation: letterGlow 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
.loader-bar { position: relative; width: 220px; height: 1px; margin-top: 20px; background: rgba(201,168,76,.18); overflow: hidden; }
.loader-bar span { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: linear-gradient(90deg, transparent, #c9a84c, #fff3cf); box-shadow: 0 0 8px #c9a84c; animation: barRun 1.4s cubic-bezier(.6,.1,.3,1) infinite; }
.loader-tag { margin: 22px 0 0; font: 600 13px var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: rgba(232,150,110,.9); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logoBreath { 0%, 100% { transform: scale(.96); filter: drop-shadow(0 0 6px rgba(255,120,40,.45)); } 50% { transform: scale(1.03); filter: drop-shadow(0 0 16px rgba(255,140,50,.85)); } }
@keyframes letterGlow { 0%, 70%, 100% { color: #e8cf96; text-shadow: none; transform: none; } 35% { color: #fff3cf; text-shadow: 0 0 12px rgba(240,180,60,.8); transform: translateY(-2px); } }
@keyframes barRun { 0% { left: -25%; } 100% { left: 100%; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ===== Trang đăng nhập / đăng ký ===== */
.auth-page { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 16px 50px; overflow: hidden; }
.auth-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(var(--aura), .25), transparent 60%), radial-gradient(ellipse at 50% 100%, #2a0606, #000 70%); }
.auth-bg img { position: absolute; left: 50%; bottom: -5%; height: 115vh; transform: translateX(-50%); opacity: .45; filter: blur(3px) saturate(1.2); animation: slowZoom 25s ease-in-out infinite alternate; }
.auth-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.8) 75%); }
.auth-card {
    width: 100%; max-width: 500px; padding: 32px 26px 24px; border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(22,20,18,.94), rgba(8,8,8,.96)); border: 1px solid var(--border);
    box-shadow: 0 25px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.06); backdrop-filter: blur(8px);
    animation: cardIn .6s cubic-bezier(.2,.8,.2,1) both .15s;
}
.auth-logo { display: block; width: 110px; margin: 0 auto 6px; }
.auth-logo img { width: 100%; filter: drop-shadow(0 0 12px rgba(255,120,30,.45)); transition: transform var(--slow); }
.auth-logo:hover img { transform: scale(1.06); }
.auth-title { text-align: center; color: var(--text-muted); font-family: var(--font-body); font-size: 15px; margin: 0 0 20px; }
.auth-sub { font-family: var(--font); font-size: 17px; color: var(--text); margin-bottom: 14px; }
.auth-help { color: var(--text-muted); font-family: var(--font-body); font-size: 13.5px; margin-top: 0; }
.auth-foot { text-align: center; margin: 18px 0 0; color: var(--text-muted); font-family: var(--font-body); font-size: 14px; }
.auth-foot a, .link-btn { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-dark); }
.auth-foot a:hover, .link-btn:hover { color: var(--text-gold); text-decoration-color: var(--gold); }
.link-btn { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.label-row a { font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-dark); }
.label-row a:hover { color: var(--text-gold); }
.captcha-q { color: var(--text-gold); }
/* Ô tích chọn: <label class="check"><input type="checkbox"><span></span> Chữ</label> */
.check { position: relative; display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; cursor: pointer; font: 600 14px var(--font-ui); }
.check input { position: absolute; opacity: 0; }
.check span { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--input-border); border-radius: 5px; background: var(--input-bg); display: grid; place-items: center; transition: background var(--fast), border-color var(--fast); }
.check input:checked + span { background: var(--gold); border-color: var(--gold); }
.check input:checked + span::after { content: "✓"; color: var(--on-gold); font-size: 13px; font-weight: 700; }
.check input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.turnstile-box { display: flex; justify-content: center; margin: 6px 0 16px; min-height: 65px; }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }

/* ===== Chi tiết các trang con ===== */
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.download-card { text-align: center; }
.download-card svg { color: var(--text-gold); margin-bottom: 6px; }
.download-card h2 { font-family: var(--font); font-size: 22px; margin-bottom: 4px; }
.steps { padding-left: 0; list-style: none; counter-reset: s; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 10px 0 10px 48px; font-family: var(--font-body); font-size: 15px; border-bottom: 1px solid var(--border); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold); color: var(--text-gold); display: grid; place-items: center; font-weight: 700; }
.news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.news-item h2 { font-family: var(--font); font-size: 24px; margin-bottom: 8px; }
.news-item p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: #ddd4c6; margin: 0; }
.rank-no { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; }
.top1 .rank-no { background: radial-gradient(circle, #ffe27a, #b8861b); color: #1a1206; box-shadow: 0 0 12px rgba(255,210,80,.6); }
.top2 .rank-no { background: radial-gradient(circle, #fff, #9a9a9a); color: #111; }
.top3 .rank-no { background: radial-gradient(circle, #f2b27a, #8a4f1f); color: #1a0e06; }

/* Hiện dần khi cuộn tới */
/* chỉ ẩn khi JS chạy (class "js" trên <html>), không có JS thì vẫn thấy nội dung */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.faction.reveal { animation: none; }
.faction.reveal.is-in:hover { transform: translateY(-6px); }

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .auth-card { padding: 26px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
}

/* ===== Ảnh bìa tin tức ===== */
.news-cover { display: block; width: calc(100% + 48px); max-height: 380px; object-fit: cover; margin: -24px -24px 18px; border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ===== Trang quản trị ===== */
.admin-login { max-width: 420px; margin: 0 auto; }
.admin-form { max-width: 820px; margin: 0 auto; }
.field-row-type { grid-template-columns: 200px 1fr; }
.admin-thumb { display: block; max-width: 240px; border-radius: var(--radius-sm); margin-bottom: 8px; }
.admin-en { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.admin-en summary { cursor: pointer; color: var(--text-gold); font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.admin-en[open] summary { margin-bottom: 12px; }
.admin-actions, .admin-bar { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.admin-bar { justify-content: flex-start; margin-bottom: 16px; }
.admin-logout { margin-left: auto; font-family: var(--font-body); color: var(--text-muted); }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.admin-row:last-child { border-bottom: 0; }
.admin-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-body); }
.admin-row-actions { display: flex; gap: 8px; }
@media (max-width: 560px) { .field-row-type { grid-template-columns: 1fr; } }

/* Dòng chữ nhỏ trên tiêu đề ở trang chủ (kiểu chữ chung nằm ở phần nền tảng: .eyebrow) */
.factions > .eyebrow, .home-news > .eyebrow { text-align: center; }

/* ===== Thẻ tin tức ===== */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; margin-bottom: 30px; }
.news-card { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #0a0706; border: 1px solid rgba(255,255,255,.04); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform var(--slow), box-shadow var(--slow); }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.25); }
.news-card-img { display: block; height: 200px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 70% 30%, rgba(var(--aura), .35), transparent 60%), linear-gradient(135deg, #3a0c08, #120605); }
.news-card-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.news-card-fallback { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-start; padding: 14px 10% 0 0; }
.news-card-fallback img { height: 125%; filter: drop-shadow(0 0 20px rgba(var(--aura), .5)); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.news-card:hover .news-card-img img { transform: scale(1.06); }
.news-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(10,7,6,.85) 80%, #0a0706); }
.date-badge {
    position: absolute; top: 0; right: 18px; z-index: 2; min-width: 68px; padding: 8px 10px 9px; text-align: center; line-height: 1.15;
    background: linear-gradient(180deg, #e6c56c, #a8842e); color: #1a1206; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-family: var(--font-title); box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.date-badge b { display: block; font-size: 14px; }
.date-badge span { font-size: 11px; font-weight: 700; }
.news-card-body { position: relative; z-index: 2; margin-top: -58px; padding: 0 20px 22px; }
.news-card-type { display: inline-block; font: 600 11px var(--font); letter-spacing: 2px; text-transform: uppercase; color: #d8412f; margin-bottom: 4px; }
.news-card h3 { margin: 0 0 16px; font-family: var(--font-title); font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.35; }
.news-card h3 a { color: var(--text-gold); }
.news-card h3 a:hover { color: var(--link-hover); }

/* ===== Trang đọc 1 tin ===== */
.article-page { padding-top: 84px; padding-bottom: 60px; }
.article-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.news-side { position: sticky; top: 84px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(12,9,7,.92); animation: fadeUp .5s ease-out both; }
.news-side h4 { margin: 0 0 12px; color: var(--text-gold); font: 700 13px var(--font); letter-spacing: 2px; text-transform: uppercase; }
.side-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 8px; border-radius: var(--radius-sm); border: 1px solid transparent; background: rgba(255,255,255,.025); color: var(--text); transition: background var(--normal), border-color var(--normal); }
.side-item:hover { background: rgba(201,168,76,.07); color: var(--text); }
.side-item.is-active { border-color: var(--gold); background: linear-gradient(180deg, rgba(201,168,76,.12), rgba(201,168,76,.04)); }
.side-item .pills { display: flex; gap: 4px; flex-shrink: 0; }
.side-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.side-text b { font: 600 14px var(--font-body); color: var(--text); line-height: 1.35; }
.side-item.is-active .side-text b { color: var(--text-gold); }
.side-text small { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font: 400 12px var(--font-body); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 6px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .5px; border: 1px solid; white-space: nowrap; }
.pill-guide { color: #8fb4ff; background: rgba(40,80,200,.25); border-color: rgba(90,130,255,.6); }
.pill-event { color: #d0a8ff; background: rgba(110,40,200,.25); border-color: rgba(150,90,255,.6); }
.pill-notice { color: #ffb08a; background: rgba(200,70,30,.22); border-color: rgba(230,110,60,.6); }
.pill-update { color: #9fe0a8; background: rgba(40,150,70,.22); border-color: rgba(80,190,110,.6); }
.pill-new { color: #fff; background: #d9261c; border-color: #d9261c; border-radius: 999px; font-size: 10px; animation: pulse 1.8s infinite; }
.article { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #0a0706; animation: fadeUp .6s ease-out both .1s; }
.article-cover { position: relative; height: 420px; overflow: hidden; background: radial-gradient(ellipse at 65% 35%, rgba(var(--aura), .35), transparent 60%), linear-gradient(135deg, #3a0c08, #0d0504); }
.article-cover > img { width: 100%; height: 100%; object-fit: cover; animation: slowZoom 20s ease-in-out infinite alternate; }
.article-cover > img.article-cover-char { position: absolute; right: 6%; top: 4%; width: auto; height: 130%; object-fit: contain; filter: drop-shadow(0 0 30px rgba(var(--aura), .5)); animation: charFloat 6s ease-in-out infinite; }
.article-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(10,7,6,.9) 88%, #0a0706); }
.article-cover-name { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; margin: 0; text-align: center; font: 800 30px var(--font-title); letter-spacing: 4px; color: #e8cf96; text-shadow: 0 2px 12px #000; }
.article-cover-name span { color: #d8412f; }
.article-main { padding: 26px 32px 36px; }
.article-meta { display: flex; align-items: center; gap: 12px; }
.article-meta .muted { display: inline-flex; align-items: center; gap: 6px; font: 400 14px var(--font-body); }
.article-title { margin: 22px 0 18px; font-family: var(--font-body); font-weight: 700; font-size: 26px; color: #fff; letter-spacing: 0; }
.article-body { font: 400 16px/1.8 var(--font-body); color: #ddd4c6; }
.article-body p { margin: 0 0 16px; }
.article-body h3 { font: 700 18px var(--font-body); color: #fff; margin: 26px 0 12px; }
.article-body ul { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--gold); }

/* ===== Trang tải game: tab bên trái, nội dung bên phải ===== */
.tabs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; margin: 10px 0 0; }
.tab-list { display: flex; flex-direction: column; gap: 8px; }
.tab {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; text-align: left;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted);
    font: 600 15px var(--font); letter-spacing: 1.5px; text-transform: uppercase; transition: all var(--normal);
}
.tab:hover { color: var(--text-gold); background: rgba(201,168,76,.05); }
.tab.is-active { color: var(--text-gold); border-color: var(--gold-dark); border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(201,168,76,.22), rgba(201,168,76,.06)); box-shadow: 0 0 20px rgba(201,168,76,.08); }
.tab-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--text-gold); box-shadow: 0 0 8px var(--text-gold); opacity: 0; transform: scale(0); transition: all var(--normal); }
.tab.is-active .tab-dot { opacity: 1; transform: none; }
.tab-panels { border: 1px solid var(--gold-dark); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(22,16,10,.94), rgba(10,8,6,.96)); padding: 26px 24px 30px; min-height: 380px; }
.js .tab-panel { display: none; }
.js .tab-panel.is-active { display: block; animation: panelIn .45s cubic-bezier(.2,.8,.2,1) both; }
.tab-panel + .tab-panel { margin-top: 30px; }
.js .tab-panel + .tab-panel { margin-top: 0; }
.panel-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 19px; color: var(--text-gold); }
.panel-sub { margin: 0 0 20px; color: var(--text-muted); font: 400 14px var(--font-body); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spec { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,.25); transition: border-color var(--normal); }
.spec:hover { border-color: var(--gold-dark); }
.spec b { color: var(--gold); font: 700 15px var(--font-body); white-space: nowrap; }
.spec span { color: var(--text); text-align: right; font: 400 15px var(--font-body); }
.file-row { display: flex; align-items: center; gap: 18px; padding: 18px; margin-bottom: 12px; border: 1px solid var(--gold-dark); border-radius: var(--radius-sm); background: rgba(0,0,0,.25); transition: border-color var(--normal), box-shadow var(--normal); }
.file-row:hover { border-color: var(--gold); box-shadow: 0 0 20px rgba(201,168,76,.12); }
.file-icon { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-sm); background: #15110d; border: 1px solid var(--border); }
.file-info { flex: 1; min-width: 0; }
.file-info h3 { margin: 0 0 4px; font-size: 17px; }
.file-info p { margin: 0 0 8px; color: var(--text-muted); font: 400 14px var(--font-body); }
.size-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; background: rgba(201,168,76,.18); color: var(--text-gold); font: 600 12px var(--font-body); }
.btn-dl { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font: 700 14px var(--font-body); padding: 10px 18px; }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ===== Chân trang: 4 cột + dòng bản quyền ===== */
.footer { position: relative; z-index: 2; background: linear-gradient(180deg, #080706, #030202); color: var(--text-muted); }
.footer-line { position: relative; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent); }
.footer-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text-gold); font-size: 11px; line-height: 1; text-shadow: 0 0 10px var(--gold); }
.footer-grid {
    max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 56px var(--gutter) 44px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 40px; align-items: start;
}
.footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.footer-logo { transition: transform var(--slow) var(--ease), filter var(--slow); }
/* Logo lớn (rồng) ở chân trang, thay cho hình nhỏ + chữ */
.footer-logo-img { display: block; width: 200px; max-width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(255, 110, 30, .25)); }
.footer-logo:hover { transform: translateY(-2px); filter: brightness(1.08); }
@media (max-width: 560px) { .footer-logo-img { width: 170px; } }
.footer-name { display: block; font: 700 21px/1.1 var(--font-title); color: var(--text-gold); letter-spacing: .02em; }
.footer-name span { color: #ff7a3d; }
.footer-slogan { display: block; margin-top: 4px; color: var(--text-dim); font: 600 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.footer-tagline { margin: 16px 0 0; max-width: 34ch; color: var(--text-muted); font-size: 15px; line-height: 1.6; text-wrap: balance; }
.footer-brand .install-btn { margin-top: 18px; }
.footer-title { margin: 6px 0 14px; color: var(--text-gold); font: 600 13px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.footer-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text-muted); font-size: 15px; }
.footer-links a:hover { color: var(--text-gold); }
.social-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social-btn {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 600 14.5px var(--font-ui); transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.social-btn svg { flex-shrink: 0; color: var(--brand, var(--text-gold)); }
.social-btn:hover { border-color: var(--gold); background: var(--surface-2); color: var(--text); }
.social-btn .ext { margin-left: auto; opacity: .5; }
.social-discord { --brand: #7984f5; }
.social-telegram { --brand: #2aabee; }
.social-facebook { --brand: #4b8df8; }
.social-zalo { --brand: #3a8cff; }
.footer-note { margin: 0; color: var(--text-dim); font-size: 14px; }
.footer-note + .social-list { margin-top: 14px; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner {
    max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; color: var(--text-dim); font-size: 13.5px;
}
.footer-bottom-inner p { margin: 0; }
.footer-disclaimer { flex: 1; min-width: 240px; }
.to-top { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text-muted); font-weight: 600; }
.to-top:hover { color: var(--text-gold); }
[data-theme="light"] .footer { background: linear-gradient(180deg, #efe4d0, #e9dcc4); }
[data-theme="light"] .footer-name span, [data-theme="light"] .logo-text span { color: #c2410c; }
[data-theme="light"] .social-btn { background: #fffaf2; }
/* Trang đăng nhập / đăng ký: chân trang gọn, chỉ 1 dòng */
.layout-auth .footer-grid, .layout-auth .footer-line { display: none; }
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 44px; }
    .footer-brand, .footer-community { grid-column: 1 / -1; }
    .social-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 560px) {
    .footer-grid { padding-bottom: 28px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .footer-disclaimer { min-width: 0; }
}

@media (max-width: 900px) {
    .article-layout, .tabs-layout { grid-template-columns: 1fr; }
    .news-side { position: static; order: 2; }
    .tab-list { flex-direction: row; overflow-x: auto; }
    .tab { flex: 1; justify-content: center; padding: 11px 12px; font-size: 13px; }
    .tab-dot { display: none; }
    .tab.is-active { border-left-width: 1px; }
    .spec-grid { grid-template-columns: 1fr; }
    .article-cover { height: 260px; }
    .article-main { padding: 20px 18px 26px; }
}
@media (max-width: 560px) {
    .file-row { flex-wrap: wrap; }
    .btn-dl { width: 100%; justify-content: center; }
    .tab svg { display: none; }
}

/* ===== Nút biểu tượng, menu thả xuống, ảnh đại diện ===== */
.icon-btn, .icon-link {
    width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--normal), background var(--normal);
}
.icon-btn:hover, .icon-link:hover { background: rgba(201,168,76,.1); color: var(--text-gold); }
.icon-telegram:hover { color: #2aabee; }
.icon-discord:hover { color: #7984f5; }
/* Menu thả xuống: <details class="dropdown"><summary>…</summary><div class="dropdown-panel">…</div></details> */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 190px; padding: 6px;
    background: var(--menu-bg); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); animation: ddIn .18s ease-out;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.dd-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
    color: var(--text); font: 500 14.5px/1.3 var(--font-ui); text-align: left; cursor: pointer; text-decoration: none;
}
.dd-item:hover { background: rgba(201,168,76,.1); color: var(--text-gold); }
.dd-item.is-active { color: var(--text-gold); }
.dd-item svg { flex-shrink: 0; opacity: .85; }
.dd-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.theme-menu .i-sun { display: none; }
[data-theme="light"] .theme-menu .i-sun { display: block; }
[data-theme="light"] .theme-menu .i-moon { display: none; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
    background: var(--grad-gold); color: var(--on-gold); font: 700 15px var(--font-ui);
    box-shadow: 0 0 0 2px rgba(201,168,76,.25); transition: box-shadow var(--normal);
}
.avatar:hover, .user-menu[open] > .avatar { box-shadow: 0 0 0 3px rgba(201,168,76,.5), var(--glow); }
.avatar-sm { width: 36px; height: 36px; font-size: 14px; cursor: default; }
.dropdown-user { min-width: 250px; }
.dd-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.dd-head b { display: block; font: 600 14.5px var(--font-ui); color: var(--text); }
.dd-head small { display: block; font: 400 12.5px var(--font-ui); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.user-menu form { margin: 0; }

/* ===== Trang cài đặt tài khoản ===== */
.settings { max-width: 1100px; margin: 10px auto 0; }
.settings-head h1 { margin: 0; font: 700 26px var(--font-body); color: var(--text); letter-spacing: 0; }
.settings-head p { margin: 4px 0 26px; color: var(--text-muted); font: 400 15px var(--font-body); }
.settings-body { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 4px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); font: 500 15px var(--font-body); }
.settings-nav a svg { opacity: .7; }
.settings-nav a:hover { background: rgba(201,168,76,.08); color: var(--text-gold); }
.settings-nav a.is-active { background: rgba(201,168,76,.14); color: var(--text-gold); box-shadow: inset 3px 0 0 var(--gold); }
.settings-panel { max-width: 580px; animation: fadeUp .4s ease-out both; }
.settings-panel h2 { margin: 0; font: 600 19px var(--font-body); color: var(--text); letter-spacing: 0; }
.settings-sub { margin: 4px 0 22px; color: var(--text-muted); font: 400 14.5px var(--font-body); }
.settings-form .field { margin-bottom: 18px; }
.btn-settings { padding: 0 22px; }

/* ===== Trang quản trị: tab và link tải ===== */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.admin-tabs a { padding: 10px 16px; color: var(--text-muted); font: 600 15px var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--text-gold); }
.admin-tabs a.is-active { color: var(--text-gold); border-bottom-color: var(--gold); }
.dl-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 14px 8px; margin: 0 0 14px; background: rgba(0,0,0,.15); animation: fadeUp .3s ease-out both; }
.field-row-url { grid-template-columns: 160px 1fr; }
.dl-remove { color: #e0776a !important; font-size: 13px !important; margin-bottom: 6px; text-decoration: none !important; }
.admin-links .panel h2 { font-family: var(--font-body); font-size: 19px; }

@media (max-width: 860px) {
    .settings-body { grid-template-columns: 1fr; gap: 18px; }
    .settings-nav { flex-direction: row; overflow-x: auto; }
    .settings-nav a.is-active { box-shadow: inset 0 -2px 0 var(--gold); }
    .field-row-url { grid-template-columns: 1fr; }
}

/* ===== CHẾ ĐỘ SÁNG (màu chung nằm ở đầu file trong [data-theme="light"]; dưới đây là chỉnh riêng từng phần) ===== */
.theme-anim, .theme-anim * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }
[data-theme="light"] body { background: radial-gradient(ellipse at 50% 0, #fbe9d0 0%, #f5efe4 55%) fixed; }
[data-theme="light"] .topbar { background: rgba(255,250,242,.94); border-bottom-color: #e6d6ba; }
[data-theme="light"] .topbar.is-scrolled { box-shadow: 0 6px 20px rgba(120,80,20,.1); }
[data-theme="light"] .topbar.is-scrolled .logo-mark, [data-theme="light"] .layout-inner .logo-mark, [data-theme="light"] .footer .logo-mark { filter: drop-shadow(0 1px 1.5px rgba(60,30,0,.35)); }
[data-theme="light"] .panel { box-shadow: var(--shadow-md); }
[data-theme="light"] .settings-head h1, [data-theme="light"] .settings-panel h2, [data-theme="light"] .article-title { color: #22170c; }
[data-theme="light"] .faction,
[data-theme="light"] .tab-panels, [data-theme="light"] .news-side, [data-theme="light"] .article,
[data-theme="light"] .auth-card, [data-theme="light"] .status-box {
    background: #fffaf2; border-color: #e2d4bd; box-shadow: 0 8px 26px rgba(120,80,20,.08);
}
[data-theme="light"] .tab-panels { border-color: #d8bf86; }
[data-theme="light"] .spec, [data-theme="light"] .file-row, [data-theme="light"] .dl-row, [data-theme="light"] .side-item { background: #fbf5ea; }
[data-theme="light"] .side-item.is-active { background: #f6e9cf; }
[data-theme="light"] .file-icon { background: #f3ead9; border-color: #e2d4bd; }
[data-theme="light"] .news-card { background: #fffaf2; border-color: #e2d4bd; box-shadow: 0 10px 28px rgba(120,80,20,.12); }
[data-theme="light"] .news-card-img::after { background: linear-gradient(to bottom, transparent 35%, rgba(255,250,242,.85) 80%, #fffaf2); }
[data-theme="light"] .news-card h3 a { color: #6b3f0b; }
[data-theme="light"] .article-cover::after { background: linear-gradient(to bottom, transparent 50%, rgba(255,250,242,.9) 88%, #fffaf2); }
[data-theme="light"] .article-cover-name { color: #7a4c0e; text-shadow: none; }
[data-theme="light"] .article-body, [data-theme="light"] .news-item p { color: #3b2c1d; }
[data-theme="light"] .article-body h3 { color: #22170c; }
[data-theme="light"] .auth-bg { background: radial-gradient(ellipse at 50% 40%, rgba(var(--aura), .18), transparent 60%), #f5efe4; }
[data-theme="light"] .auth-bg img { opacity: .22; }
[data-theme="light"] .auth-bg::after { background: radial-gradient(ellipse at center, rgba(245,239,228,.1), rgba(245,239,228,.85) 75%); }
[data-theme="light"] .auth-foot a, [data-theme="light"] .link-btn, [data-theme="light"] .label-row a { color: #2b1f14; }
[data-theme="light"] .table th, [data-theme="light"] .table td { border-bottom-color: #e8dcc8; }
[data-theme="light"] .status-row b { color: #2b1f14; }
[data-theme="light"] .faction p { color: #6d5c4a; }
/* Phần ảnh lớn trang chủ vẫn giữ nền tối cho nổi nhân vật */
[data-theme="light"] .hero { color: #fff; }
[data-theme="light"] .hero .uptime-label { color: #f0d080; }
[data-theme="light"] .hero-shade { background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55) 80%), linear-gradient(to bottom, transparent 70%, #f5efe4); }
.settings { min-height: calc(100vh - 330px); }
[data-theme="light"] .spec b { color: #8a5a12; }

/* =====================================================================
   BẢNG ĐIỀU KHIỂN (dashboard.php): menu bên trái + nội dung bên phải
   ===================================================================== */
.layout-panel { --side-w: 250px; --dash-bg: #0a0908; --side-bg: #12100d; --box-bg: #0f0d0b; --box-border: #25211b; --soft: #1a1713; background: var(--dash-bg); }
.dash { display: flex; min-height: 100vh; }
.dash-side {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--side-w); display: flex; flex-direction: column; gap: 4px;
    padding: 10px 10px 12px; background: var(--side-bg); border-right: 1px solid var(--box-border);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.dash-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.12); }
.dash-brand img { width: 40px; height: 40px; object-fit: contain; }
.dash-brand .logo-text { font-size: 18px; }
.dash-label { margin: 14px 10px 4px; color: var(--text-dim); font: 600 12px var(--font-body); letter-spacing: .5px; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.dash-nav a, .dash-group summary {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; cursor: pointer; list-style: none;
    color: #d8d2c8; font: 500 14.5px var(--font-body); transition: background var(--fast), color var(--fast);
}
.dash-group summary::-webkit-details-marker { display: none; }
.dash-nav a svg, .dash-group summary svg { flex-shrink: 0; opacity: .85; }
.dash-nav a:hover, .dash-group summary:hover { background: rgba(201,168,76,.08); color: var(--text-gold); }
.dash-nav a.is-active {
    background: linear-gradient(90deg, #c9a84c, #a8842e); color: #1a1206; font-weight: 600;
    box-shadow: 0 4px 16px rgba(201,168,76,.25);
}
.dash-nav a.is-active svg { opacity: 1; }
.dash-chev { margin-left: auto; display: grid; transition: transform var(--normal); }
.dash-group[open] .dash-chev { transform: rotate(90deg); }
.dash-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 20px; padding-left: 12px; border-left: 1px solid var(--box-border); }
.dash-sub a { padding: 7px 10px; font-size: 14px; }
.dash-group[open] .dash-sub { animation: fadeUp .25s ease-out both; }
.dash-me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); color: var(--text); border-top: 1px solid var(--box-border); margin-top: 6px; }
.dash-me:hover { background: rgba(201,168,76,.08); }
.dash-me-text b { display: block; font: 600 14px var(--font-body); }
.dash-me-text small { display: block; font: 400 12px var(--font-body); color: var(--text-muted); }
.dash-scrim { display: none; }

.dash-main { flex: 1; min-width: 0; margin-left: var(--side-w); transition: margin-left .3s cubic-bezier(.2,.8,.2,1); }
.dash-top {
    position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 24px 0 16px;
    background: rgba(10,9,8,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--box-border);
}
.dash-top .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 500 14px var(--font-body); color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-gold); }
.crumbs .is-current { color: var(--text); }
.crumb-sep { opacity: .5; }
.dash-content { padding: 28px 28px 60px; max-width: 1500px; animation: pageIn .5s cubic-bezier(.2,.8,.2,1) both; }
.dash-collapsed .dash-side { transform: translateX(-100%); }
.dash-collapsed .dash-main { margin-left: 0; }

/* Tiêu đề trang trong bảng điều khiển */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; font: 700 25px var(--font-body); color: var(--text); letter-spacing: -.2px; }
.dash-head p { margin: 4px 0 0; color: var(--text-muted); font: 400 14.5px var(--font-body); }
.dash-head .updated { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; }
.with-icon { display: flex; align-items: center; gap: 9px; }
.gold-ico, .gold-ico svg { color: #e6b93c; display: inline-grid; }
.head-actions { display: flex; gap: 10px; align-items: center; }

/* Ô số liệu */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat {
    --tone: #c9a84c; position: relative; overflow: hidden; padding: 20px 22px; border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 16%, #0c0b0a), color-mix(in srgb, var(--tone) 6%, #0a0908));
    border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); animation: cardIn .6s cubic-bezier(.2,.8,.2,1) both;
    transition: transform var(--normal), box-shadow var(--normal);
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px color-mix(in srgb, var(--tone) 22%, transparent); }
.stat:nth-child(2) { animation-delay: .06s; } .stat:nth-child(3) { animation-delay: .12s; } .stat:nth-child(4) { animation-delay: .18s; }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tone) 30%, transparent), transparent 70%); }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: color-mix(in srgb, var(--tone) 80%, #fff); font: 600 14.5px var(--font-body); }
.stat b { display: block; margin: 22px 0 2px; font: 700 28px var(--font-body); color: var(--text); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.stat small { color: color-mix(in srgb, var(--tone) 75%, #fff); font: 400 12.5px var(--font-body); }
.stat-blue { --tone: #4f86ff; } .stat-green { --tone: #2fc47a; } .stat-purple { --tone: #9b6bff; } .stat-orange { --tone: #ff8a2a; }
.stat b.is-up { color: #43d98a; } .stat b.is-down { color: #ff6b5b; }
.stat-grid-plain .stat { --tone: #5a5246; background: var(--box-bg); border-color: var(--box-border); }
.stat-grid-plain .stat::after { display: none; }
.stat-grid-plain .stat-top { color: var(--text-muted); }

/* Khung nội dung */
.card-box { background: var(--box-bg); border: 1px solid var(--box-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 22px; animation: fadeUp .5s ease-out both; min-width: 0; }
.card-box h2 { margin: 0; font: 700 17px var(--font-body); color: var(--text); letter-spacing: 0; }
.card-sub { margin: 4px 0 18px; color: var(--text-muted); font: 400 14px var(--font-body); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .table-foot { padding: 14px 18px; }
.card-narrow { max-width: 1100px; margin-inline: auto; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.dash-cols-pay { grid-template-columns: minmax(0, 1fr) 380px; }
.dash-stack > .card-box:last-child { margin-bottom: 0; }
.dash-cols > .card-box { margin-bottom: 0; }

/* Trạng thái trống */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 46px 16px; color: var(--text-muted); }
.empty > svg { box-sizing: content-box; width: 30px; height: 30px; padding: 15px; margin-bottom: 6px; border-radius: 50%; color: var(--text-gold); background: rgba(201,168,76,.1); box-shadow: inset 0 0 0 1px rgba(201,168,76,.28); }
.empty b { color: var(--text); font: 600 16px var(--font-body); }
.empty p { margin: 0 0 8px; font: 400 14.5px var(--font-body); max-width: 420px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Danh sách nạp gần đây, nhân vật */
.activity, .char-list { list-style: none; margin: 0; padding: 0 6px 0 0; max-height: 470px; overflow-y: auto; }
.activity li, .char-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--box-border); }
.activity li:last-child, .char-list li:last-child { border-bottom: 0; }
.activity img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--soft); border: 1px solid var(--box-border); }
.activity div, .char-list div { flex: 1; min-width: 0; }
.activity b, .char-list b { display: block; font: 600 14.5px var(--font-body); color: var(--text); }
.activity span, .char-list div span { display: block; color: var(--text-muted); font: 400 13.5px var(--font-body); }
.activity time { color: var(--text-muted); font: 400 13px var(--font-body); white-space: nowrap; }
.pill-level { padding: 3px 9px; border-radius: 99px; background: var(--soft); color: var(--text-gold); font: 600 12.5px var(--font-body); }

/* Nhãn trạng thái: dùng .badge ở phần nền tảng (đầu file) */
.chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--soft); border: 1px solid var(--box-border); font: 600 12px var(--font-body); color: var(--text); }

/* Ô tìm kiếm, nút */
.search-row { display: flex; gap: 10px; }
.search-input {
    flex: 1; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text-muted); transition: border-color var(--fast), box-shadow var(--fast);
}
.search-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-input input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 15px var(--font-body); outline: none; height: 100%; min-height: 42px; }
.search-input input::placeholder { color: var(--text-dim); }
.search-row > input { flex: 1; }
/* .btn-light, .btn-soft, .btn-pay: kiểu nút nằm ở phần nền tảng (đầu file), ở đây chỉ giữ khoảng cách */
.btn-pay { margin-top: 20px; }

/* Bảng */
.dtable { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-family: var(--font-body); }
.dtable th { text-align: left; padding: 8px 14px; color: var(--text-muted); font: 600 13.5px var(--font-body); white-space: nowrap; }
.dtable td { padding: 13px 14px; background: rgba(255,255,255,.015); border-top: 1px solid var(--box-border); border-bottom: 1px solid var(--box-border); font-size: 14.5px; }
.dtable td:first-child { border-left: 1px solid var(--box-border); border-radius: 10px 0 0 10px; }
.dtable td:last-child { border-right: 1px solid var(--box-border); border-radius: 0 10px 10px 0; }
.dtable tbody tr { transition: transform var(--fast); }
.dtable tbody tr:hover td { background: rgba(201,168,76,.06); }
.dtable .num { text-align: right; }
.dtable-rank { border-spacing: 0; }
.dtable-rank th { padding: 14px 16px; border-bottom: 1px solid var(--box-border); color: var(--text); }
.dtable-rank td { border: 0; border-bottom: 1px solid var(--box-border); border-radius: 0 !important; background: transparent; padding: 12px 16px; }
.dtable-boxed { border-spacing: 0; border: 1px solid var(--box-border); border-radius: 10px; }
.dtable-boxed th { padding: 12px 14px; border-bottom: 1px solid var(--box-border); color: var(--text); }
.dtable-boxed td { border: 0; border-radius: 0 !important; background: transparent; border-bottom: 1px solid var(--box-border); }
.dtable-boxed tr:last-child td { border-bottom: 0; }
.dtable-boxed .empty { padding: 30px 10px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13.5px; }
.upper { text-transform: uppercase; }
.d-block { display: block; }
.gold-text { color: #e6b93c; font-weight: 600; }
.green-text { color: #43d98a; }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--box-border); color: var(--text-muted); font: 400 13.5px var(--font-body); flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 12px; }
.pager b { color: var(--text); font: 600 13.5px var(--font-body); }

/* Số dư vàng */
.balance { display: flex; align-items: center; gap: 10px; }
.balance-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(230,185,60,.14); color: #e6b93c; }
.balance small { display: block; color: var(--text-muted); font: 400 12px var(--font-body); text-align: right; }
.balance b { display: block; color: #e6b93c; font: 700 21px var(--font-body); }
.gold-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--box-border); background: var(--box-bg); color: #e6b93c; }
.gold-chip b { color: var(--text); font: 700 16px var(--font-body); }

/* Trang nạp: gói vàng + thông tin đơn */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.pack {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--box-border); background: var(--soft); transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.pack input { position: absolute; opacity: 0; }
.pack:hover { border-color: var(--gold-dark); transform: translateY(-2px); }
.pack:has(input:checked) { border-color: #e6b93c; box-shadow: 0 0 0 2px rgba(230,185,60,.35), 0 10px 24px rgba(230,185,60,.15); background: rgba(230,185,60,.08); }
.pack:has(input:focus-visible) { outline: 2px solid var(--text-gold); outline-offset: 2px; }
.pack-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(230,185,60,.18); color: #e6b93c; margin-bottom: 8px; }
.pack b { font: 700 19px var(--font-body); color: var(--text); }
.pack small { color: var(--text-muted); font: 400 12.5px var(--font-body); }
.pack em { margin-top: 8px; padding: 2px 9px; border-radius: 6px; background: #f3ead6; color: #1a1206; font: 700 12px var(--font-body); font-style: normal; }
.field-custom { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--box-border); }
.summary-box { position: sticky; top: 84px; }
.summary { margin: 14px 0 0; }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font: 400 14.5px var(--font-body); }
.summary dt { color: var(--text-muted); }
.summary dd { margin: 0; color: var(--text); text-align: right; word-break: break-word; }
.summary .sep { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--box-border); }
.summary .is-missing { color: #ff6b5b; }
.summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 16px 0; border-top: 1px solid var(--box-border); border-bottom: 1px solid var(--box-border); font: 600 15px var(--font-body); }
.summary-total b { display: flex; align-items: center; gap: 8px; color: #e6b93c; font: 700 24px var(--font-body); }
.note { color: var(--text-muted); font: 400 13px var(--font-body); margin: 14px 0; }
.pay-box { text-align: center; }
.pay-box .summary { text-align: left; }
.qr { display: block; width: 280px; max-width: 100%; height: auto; margin: 6px auto 10px; border-radius: 12px; background: #fff; padding: 8px; }
.code-big { color: #e6b93c; font: 700 18px ui-monospace, Consolas, monospace; letter-spacing: 1px; }

/* Lịch sử: tab ngang */
.seg-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 12px; background: var(--soft); border: 1px solid var(--box-border); overflow-x: auto; }
.seg-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 9px; color: var(--text-muted); font: 600 14px var(--font-body); white-space: nowrap; }
.seg-tabs a:hover { color: var(--text); }
.seg-tabs a.is-active { background: var(--dash-bg); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Mã quà */
.box-title { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.box-title .card-sub { margin: 2px 0 0; }
.box-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); border: 1px solid var(--box-border); color: var(--text-gold); }
.vc-form { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: end; }
.vc-form .field { margin: 0; }
.howto { margin-top: 20px; padding: 18px 20px; border-radius: 12px; background: var(--soft); border: 1px solid var(--box-border); font-family: var(--font-body); }
.howto b { color: var(--text); font-size: 15px; }
.howto ol { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.9; }
.card-box > .alert-warn { margin: 20px 0 0; }

/* Top nạp: bộ lọc */
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.filter-row .field { margin: 0; }

/* Dịch vụ trong game */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc { display: flex; flex-direction: column; margin: 0; }
.svc .card-sub { min-height: 40px; }
.svc-teleport svg { color: #4f86ff; } .svc-reset_storage svg { color: #ff8a2a; } .svc-reset_title svg { color: #2fc4b8; }
.price { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 10px; background: var(--soft); border: 1px solid var(--box-border); color: var(--text-muted); font: 400 14.5px var(--font-body); }
.price b { font: 700 17px var(--font-body); }
.price .is-free { color: #4f9dff; } .price .is-paid { color: #ff8a2a; }
.svc-bottom { margin-top: auto; padding-top: 22px; }
.svc-bottom .field { margin-bottom: 10px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 4px; }
.quick button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--box-border); background: var(--soft); color: var(--text-muted); font: 600 13.5px var(--font-body); cursor: pointer; transition: all var(--fast); }
.quick button:hover { color: var(--text-gold); border-color: var(--gold-dark); }
.svc-exchange .btn-pay { margin-top: 14px; height: 42px; font-size: 15px; }
.svc-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--box-border); color: var(--text); font: 600 14px var(--font-body); }

/* Xếp hạng môn phái */
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.clan-card {
    position: relative; overflow: hidden; padding: 18px; border-radius: 14px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 20%, #0c0b0a), #0c0b0a 65%); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    animation: cardIn .6s cubic-bezier(.2,.8,.2,1) both; transition: transform var(--normal);
}
.clan-card:hover { transform: translateY(-4px); }
.clan-card img { position: absolute; right: -10px; top: -4px; height: 175px; opacity: .45; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); filter: drop-shadow(0 0 20px var(--c)); transition: opacity var(--normal), transform var(--slow); }
.clan-card:hover img { opacity: .8; transform: scale(1.04); }
.clan-no { position: absolute; left: 16px; top: 14px; font: 800 26px var(--font-title); color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.clan-card h3 { position: relative; margin: 0 0 10px; font: 700 20px var(--font-title); color: var(--text); }
.clan-bar { position: relative; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 12px; }
.clan-bar span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c); box-shadow: 0 0 10px var(--c); }
.clan-card dl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.clan-card dt { color: var(--text-muted); font: 400 11.5px var(--font-body); white-space: nowrap; }
.clan-card dd { margin: 0; color: var(--text); font: 700 16px var(--font-body); }

/* Trang cài đặt khi nằm trong bảng điều khiển */
.layout-panel .settings { margin: 0; max-width: none; min-height: 0; }
.layout-panel .alert { font-family: var(--font-body); font-size: 14.5px; border-radius: var(--radius-sm); }

@media (max-width: 1200px) {
    .stat-grid, .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-cols-pay { grid-template-columns: 1fr; }
    .summary-box { position: static; }
}
@media (max-width: 900px) {
    .dash-side { transform: translateX(-100%); }
    .dash-main { margin-left: 0; }
    .dash-open .dash-side { transform: none; box-shadow: 20px 0 50px rgba(0,0,0,.5); } /* bóng chỉ khi mở, đóng thì không lem vào mép trái màn hình */
    .dash-open .dash-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.55); animation: fadeIn .2s both; }
    .dash-cols { grid-template-columns: 1fr; }
    .dash-content { padding: 20px 16px 50px; }
    .dash-top { padding: 0 12px; }
    .dash-top .lang-switch, .dash-top .actions > a.icon-btn { display: none; }
    .vc-form, .filter-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stat-grid, .svc-grid { grid-template-columns: 1fr; }
    .stat b { margin-top: 12px; }
    .search-row { flex-wrap: wrap; }
    .search-row .btn-light { width: 100%; }
    .dash-head h1 { font-size: 22px; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Bảng điều khiển ở chế độ sáng */
[data-theme="light"] .layout-panel { --dash-bg: #f6f1e7; --side-bg: #fffaf2; --box-bg: #fffdf8; --box-border: #e6d9c2; --soft: #f3ebdc; }
[data-theme="light"] .dash-top { background: rgba(255,250,242,.9); }
[data-theme="light"] .dash-nav a, [data-theme="light"] .dash-group summary { color: #3b2c1d; }
[data-theme="light"] .dash-nav a.is-active { color: #1a1206; }
[data-theme="light"] .stat { background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 14%, #fff), color-mix(in srgb, var(--tone) 5%, #fff)); }
[data-theme="light"] .stat-top, [data-theme="light"] .stat small { color: color-mix(in srgb, var(--tone) 80%, #000); }
[data-theme="light"] .stat-grid-plain .stat { background: var(--box-bg); }
[data-theme="light"] .dtable td { background: #fff; }
[data-theme="light"] .dtable-rank td, [data-theme="light"] .dtable-boxed td { background: transparent; }
[data-theme="light"] .gold-text, [data-theme="light"] .balance b, [data-theme="light"] .summary-total b, [data-theme="light"] .code-big { color: #a8740e; }
[data-theme="light"] .green-text, [data-theme="light"] .stat b.is-up { color: #1c8a4e; }
[data-theme="light"] .seg-tabs a.is-active { background: #fff; box-shadow: 0 2px 8px rgba(120,80,20,.12); }
[data-theme="light"] .clan-card { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), #fffdf8 65%); }
[data-theme="light"] .clan-bar { background: rgba(0,0,0,.08); }
[data-theme="light"] .dash-brand { background: rgba(201,168,76,.1); }

/* Trang quản trị: bảng đơn nạp, mã quà */
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
.admin-table td { vertical-align: middle; font-family: var(--font-body); font-size: 14px; }
.admin-table td.admin-row-actions { display: table-cell; white-space: nowrap; text-align: right; }
.admin-table form { display: inline-block; margin: 0 0 0 6px; }
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: #c0392b; color: #fff; font: 700 11.5px var(--font-body); }
.admin-done summary { cursor: pointer; list-style: none; }
.admin-done summary h2 { display: inline; }
.admin-done summary::after { content: " ▾"; color: var(--text-muted); }
@media (max-width: 700px) { .field-row-3 { grid-template-columns: 1fr; } }
button.icon-btn { background: transparent; border: 0; padding: 0; }
.log-warn td { color: #ff8a7d !important; }
.warn-text { color: #f0c95a; font: 500 12px var(--font-body); } [data-theme="light"] .warn-text { color: #8a5a12; }

/* ===== Cài web như ứng dụng: nút + hộp hướng dẫn ===== */
.install-btn { margin-top: 14px; }
.install-btn[hidden], .dash-install[hidden] { display: none; }
.dash-install {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding: 10px; text-align: left;
    background: linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.04)); border: 1px dashed rgba(201,168,76,.45);
    border-radius: var(--radius-sm); color: var(--text-gold); cursor: pointer; font: inherit;
}
.dash-install:hover { background: rgba(201,168,76,.18); }
.dash-install b { display: block; font: 600 13px var(--font-body); }
.dash-install small { display: block; font: 400 11px var(--font-body); color: var(--text-muted); }
.dash-install + .dash-me { margin-top: 8px; }
/* Hộp thoại: <dialog class="modal">, mở bằng dialog.showModal() */
.modal {
    width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid rgba(201,168,76,.35); border-radius: var(--r-lg);
    background: var(--menu-bg); color: var(--text); box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal[open] { animation: modalIn .22s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.modal-head img { border-radius: 12px; flex-shrink: 0; }
.modal-head h3 { margin: 0 0 2px; font-size: 20px; }
.modal-head p { margin: 0; font: 400 14px/1.45 var(--font-body); }
.modal-steps section { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.modal-steps h4 { margin: 0 0 6px; font: 700 14px var(--font-body); color: var(--text-gold); }
.modal-steps ol { margin: 0; padding-left: 20px; font: 400 14px/1.6 var(--font-body); }
.modal-steps svg { vertical-align: -3px; color: #3b8cff; }

/* ===== Ảnh chân dung tròn môn phái ===== */
.avatar-img { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1a1410; box-shadow: 0 0 0 2px rgba(var(--c, 201,168,76), .75), 0 0 10px rgba(var(--c, 201,168,76), .25); }
.avatar-letter { display: inline-grid; place-items: center; flex-shrink: 0; }

/* ===== Thông báo: cái chuông trên thanh trên cùng + trang Thông báo ===== */
/* Màu riêng: đỏ của số/chấm "chưa đọc" (chữ trắng đọc rõ ở cả 2 chế độ), nền dòng chưa đọc, viền quanh số trên chuông */
.notif, .notif-page, .notif-tabs {
    --nf-red: color-mix(in srgb, var(--c-danger) 72%, #000);
    --nf-unread: rgba(201, 168, 76, .07);
    --nf-hover: rgba(201, 168, 76, .11);
    --nf-ring: var(--menu-bg);
}
[data-theme="light"] .notif, [data-theme="light"] .notif-page, [data-theme="light"] .notif-tabs {
    --nf-red: var(--c-danger); --nf-unread: rgba(184, 145, 62, .1); --nf-hover: rgba(184, 145, 62, .15);
}
.notif-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.notif > .notif-btn { position: relative; }
.notif-btn > svg { width: 20px; height: 20px; transform-origin: 50% 12%; }
.notif[open] > .notif-btn { background: rgba(201, 168, 76, .12); color: var(--text-gold); }
.notif-badge {
    position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); pointer-events: none;
    background: var(--nf-red); color: #fff; font: 700 12.5px/20px var(--font-ui); text-align: center; letter-spacing: 0;
    box-shadow: 0 0 0 2px var(--nf-ring); font-variant-numeric: tabular-nums;
}
.notif-badge[hidden], [data-notif-count][hidden], [data-notif-readall][hidden], .notif-list[hidden], .notif-empty[hidden] { display: none !important; }
.notif-btn.is-ringing > svg { animation: notifRing .9s ease-in-out; }
@keyframes notifRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-13deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* Khung thả xuống */
.notif > .notif-panel {
    width: 384px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 96px)); padding: 0; overflow: hidden;
    display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--border)); border-radius: var(--r-md);
    background: var(--menu-bg); box-shadow: var(--shadow-lg);
}
.notif-panel:focus { outline: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); }
.notif-title { margin: 0; font: 700 15px var(--font-ui); color: var(--text); letter-spacing: 0; }
.notif-head form { margin: 0; }
.notif-readall {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
    color: var(--text-gold); font: 600 13px var(--font-ui); white-space: nowrap; transition: background var(--fast);
}
.notif-readall:hover { background: rgba(201, 168, 76, .12); }
.notif-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.notif-list li + li { margin-top: 2px; }
.notif-item {
    position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 10px;
    color: var(--text); text-decoration: none; transition: background var(--fast);
}
.notif-item:hover, .notif-item:focus-visible { background: var(--nf-hover); color: var(--text); }
.notif-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.notif-item.is-unread { background: var(--nf-unread); }
.notif-item.is-unread:hover { background: var(--nf-hover); }
/* Biểu tượng tròn theo loại: vàng (nạp), xanh lá (xong), đỏ (huỷ/từ chối), xanh dương (hoàn vàng), cam (tin tức), tím (quà) */
.notif-ico {
    --tone: var(--text-muted); flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
}
.ni-coin { --tone: var(--c-goldtext); } .ni-done { --tone: var(--c-success); } .ni-cancel { --tone: var(--c-danger); }
.ni-refund { --tone: var(--c-info); } .ni-news { --tone: var(--c-warn); } .ni-gift { --tone: #b98cff; }
[data-theme="light"] .ni-gift { --tone: #6d3fc0; }
.notif-main { flex: 1; min-width: 0; }
.notif-text { display: block; font: 400 14px/1.45 var(--font-ui); color: var(--text-muted); overflow-wrap: anywhere; }
.notif-item.is-unread .notif-text { color: var(--text); font-weight: 500; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font: 400 12.5px var(--font-ui); color: var(--text-dim); }
.notif-meta .notif-kind { padding: 0 8px; line-height: 20px; }
.notif-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.notif-item.is-unread .notif-dot { background: var(--nf-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-red) 22%, transparent); }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 24px 26px; text-align: center; }
.notif-empty-ico { width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: rgba(201, 168, 76, .12); color: var(--text-gold); }
.notif-empty-ico svg { width: 24px; height: 24px; }
.notif-empty b { font: 600 15px var(--font-ui); color: var(--text); }
.notif-empty p { margin: 0; max-width: 280px; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-muted); }
.notif-foot {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 12px; border-top: 1px solid var(--border);
    font: 600 13.5px var(--font-ui); color: var(--text-gold); transition: background var(--fast);
}
.notif-foot:hover { background: rgba(201, 168, 76, .08); color: var(--text-gold); }
.notif-foot svg { transition: transform var(--fast); }
.notif-foot:hover svg { transform: translateX(3px); }
.notif template { display: none; }

/* Điện thoại: khung trải rộng hết màn hình ngay dưới thanh trên cùng, nền phía sau tối lại */
@media (max-width: 560px) {
    .notif > .notif-panel {
        position: fixed; left: 8px; right: 8px; top: var(--notif-top, 64px); width: auto; max-width: none;
        max-height: calc(100vh - var(--notif-top, 64px) - 16px); max-height: calc(100dvh - var(--notif-top, 64px) - 16px);
        box-shadow: 0 0 0 100vmax var(--overlay), var(--shadow-lg);
    }
    .notif-item { padding: 12px 10px 12px 12px; }
    .notif-foot { min-height: 50px; }
}

/* Trang Thông báo trong Bảng điều khiển */
.notif-wrap { max-width: 980px; }
.notif-tabs { margin-bottom: var(--sp-5); }
.notif-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--nf-red); color: #fff; font: 700 12.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.notif-page { padding: 8px 10px 14px; }
.notif-page .empty { padding: 50px 16px; }
.notif-day + .notif-day { margin-top: 6px; }
.notif-page .notif-day-h {
    position: sticky; top: var(--dash-top-h, 60px); z-index: 1; margin: 0; padding: 14px 14px 8px; background: var(--box-bg, var(--surface));
    font: 600 12.5px var(--font-ui); color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase;
}
.notif-list-page { padding: 0 4px; overflow: visible; }
.notif-list-page .notif-item { gap: 14px; padding: 14px 16px 14px 14px; border-radius: var(--r-md); }
.notif-list-page .notif-item.is-unread::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.notif-list-page .notif-ico { width: 42px; height: 42px; }
.notif-list-page .notif-ico svg { width: 20px; height: 20px; }
.notif-list-page .notif-text { font-size: 15px; }
.notif-list-page .notif-meta { margin-top: 6px; }
.notif-list-page .notif-dot { margin-top: 8px; }
.notif-list-page li + li { margin-top: 4px; }
@media (max-width: 560px) {
    .notif-page { padding: 4px 4px 10px; }
    .notif-page .notif-day-h { padding: 12px 10px 6px; }
    .notif-list-page .notif-item { gap: 12px; padding: 12px 10px 12px 12px; }
    .notif-list-page .notif-ico { width: 38px; height: 38px; }
    .notif-list-page .notif-text { font-size: 14.5px; }
    .dash-head [data-notif-readall], .dash-head [data-notif-readall] .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .notif-btn.is-ringing > svg { animation: none; }
    .notif-foot:hover svg { transform: none; }
}

/* ===== Trang Hướng dẫn (guide.php) ===== */
.guide-block + .guide-block { margin-top: var(--sp-8); }
.guide-steps { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.guide-step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); overflow: hidden; }
.guide-step .card-text { flex: 1; }
.guide-step-no {
    position: absolute; top: 6px; right: 14px; font: 700 56px/1 var(--font-title); color: var(--gold);
    opacity: .14; pointer-events: none; font-variant-numeric: lining-nums;
}
@media (max-width: 1024px) { .guide-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guide-steps { grid-template-columns: 1fr; } }

/* Hỏi đáp: <details class="faq"><summary>Câu hỏi</summary><div class="faq-body">Trả lời</div></details> */
.faq-list { display: grid; gap: var(--sp-2); max-width: var(--container-narrow); }
.faq { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--fast); }
.faq[open] { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: 12px 18px;
    color: var(--text); font: 600 16px/1.4 var(--font-ui); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-gold); }
.faq summary .chev { flex-shrink: 0; color: var(--text-dim); transition: transform var(--normal) var(--ease); }
.faq[open] summary .chev { transform: rotate(180deg); color: var(--text-gold); }
.faq-body { padding: 0 18px 16px; }
.faq-body p { margin: 0; max-width: 68ch; color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.faq-body a { text-decoration: underline; text-underline-offset: 3px; }

/* Liên hệ GM */
.guide-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.guide-contact > div { flex: 1 1 320px; }
.guide-contact .card-text { max-width: 60ch; }
.guide-contact-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); flex: 1 1 320px; }

/* Nút sao chép cạnh số tài khoản (assets/main.js tự thêm vào các chỗ có class "copy") */
.copy { display: flex; align-items: center; gap: 6px; }
.copy-btn {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--fast), color var(--fast);
}
.copy-btn:hover { background: rgba(201, 168, 76, .12); color: var(--text-gold); }
@media (pointer: coarse) { .copy-btn { width: 40px; height: 40px; } }

/* ===== Hiệu ứng thêm (assets/main.js, phần "Hiệu ứng thêm") ===== */
/* Thẻ nghiêng theo chuột: JS đặt transform, ở đây làm cho mượt + vệt sáng theo vị trí chuột */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .18s var(--ease), border-color var(--slow), box-shadow var(--slow); }
.tilt-glare {
    position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--slow);
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 240, 200, .16), transparent 55%);
    mix-blend-mode: screen;
}
.tilt:hover .tilt-glare { opacity: 1; }
[data-theme="light"] .tilt-glare { background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 55%); mix-blend-mode: normal; }

/* Nút vàng: vệt sáng quét ngang khi rê chuột */
.btn-primary, .btn-gold, .btn-light, .btn-pay { overflow: hidden; isolation: isolate; }
.btn-primary::before, .btn-gold::before, .btn-light::before, .btn-pay::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -75%; width: 50%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 250, 230, .55), transparent); transform: skewX(-18deg);
}
@media (hover: hover) {
    .btn-primary:hover::before, .btn-gold:hover::before, .btn-light:hover::before, .btn-pay:hover::before { animation: btnShine .75s var(--ease); }
}
@keyframes btnShine { to { left: 130%; } }

/* Hoa văn dưới tiêu đề: 2 đường chỉ vẽ ra từ giữa, hạt kim cương xoay nhẹ */
.ornament.draw span { transform: scaleX(0); transform-origin: right; transition: transform .9s var(--ease) .15s; }
.ornament.draw span:last-child { transform: scaleX(0) scaleX(-1); }
.ornament.draw.is-in span:first-child { transform: scaleX(1); }
.ornament.draw.is-in span:last-child { transform: scaleX(-1); }

/* Khung tiêu đề trang con: nhân vật trôi khi cuộn (JS), thêm nhịp thở nhẹ */
.page-banner-art { will-change: transform; }
.page-banner-art img { animation: bannerBreath 7s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes bannerBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.012); } }

/* Trang chủ: lớp nhân vật và chữ dịch theo chuột (JS), chuyển mượt */
.heroes, .hero-content { transition: transform .6s var(--ease); }

/* Nút tròn "Lên đầu trang" góc phải dưới, vòng vàng = đã đọc bao nhiêu phần trang */
.back-top {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; width: 48px; height: 48px;
    display: grid; place-items: center; border-radius: 50%; background: var(--menu-bg); color: var(--text-gold);
    box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity var(--normal), transform var(--normal) var(--ease), visibility var(--normal), background var(--fast);
}
.back-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: var(--surface-3); color: var(--text-gold); }
.back-top:hover > svg:last-child { animation: arrowHop .6s var(--ease); }
.back-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.back-top-ring circle { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.back-top-ring .bar { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
@keyframes arrowHop { 40% { transform: translateY(-4px); } }
/* Có toast ở góc phải dưới thì nút nhường chỗ (máy tính) */
@media (min-width: 861px) { .toast-stack ~ .back-top.is-shown { transform: translateX(-4px); } }
/* Điện thoại: chừa chỗ để nút tròn không che chữ ở dòng cuối chân trang */
@media (max-width: 560px) { .footer-bottom-inner { padding-right: 72px; } }
@media (max-width: 560px) { .back-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }

/* Trang đọc 1 tin: thanh tiến độ đọc ngay dưới thanh menu */
.read-progress {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; height: 2px; pointer-events: none;
    background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
}

/* Ô số liệu trong Bảng điều khiển: số dùng chữ số đều nhau để khi đếm không bị nhảy */
.stat > b, .stat-value, [data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .ornament.draw span:first-child { transform: none; }
    .ornament.draw span:last-child { transform: scaleX(-1); }
    .page-banner-art img { animation: none; }
    .back-top { transition: none; }
}

/* ===== Nạp Xu: chú thích tỉ lệ quy đổi ===== */
.rate-note {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--c-goldtext) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c-goldtext) 14%, transparent), transparent 70%);
}
.rate-note-ico { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-goldtext) 18%, transparent); color: var(--c-goldtext); }
.rate-note b { display: block; color: var(--c-goldtext); font: 700 18px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.rate-note p { margin: 2px 0 0; color: var(--text-muted); font: 400 14px/1.5 var(--font-ui); }
.rate-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Kỳ Trân Các (cửa hàng bán đồ bằng Xu) ===== */
.shop-public { padding-block: var(--sp-6) var(--sp-8); }
.shop-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.shop-cats { flex-wrap: wrap; }
.shop-cats > a { flex: 0 0 auto; }
.shop-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 360px; }
.shop-search input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); }
.shop-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.shop-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.shop-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow-sm);
    transition: border-color var(--normal), box-shadow var(--normal), transform var(--normal) var(--ease);
}
.shop-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); box-shadow: var(--shadow-md), 0 0 0 1px rgba(201, 168, 76, .12); }
.shop-img {
    position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 60%, rgba(201, 168, 76, .18), transparent 65%), var(--surface-3);
    border-bottom: 1px solid var(--border);
}
.shop-img img { max-width: 72%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); transition: transform var(--slow) var(--ease); }
.shop-card:hover .shop-img img { transform: scale(1.06) translateY(-3px); }
.shop-ph { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(201, 168, 76, .12); color: var(--text-gold); }
.shop-ph-sm { width: 40px; height: 40px; }
.shop-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.shop-tag { padding: 2px 9px; border-radius: var(--r-pill); font: 700 11.5px/1.6 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.shop-tag-hot { background: linear-gradient(90deg, #c2410c, #e3572a); box-shadow: 0 2px 10px rgba(227, 87, 42, .45); }
.shop-tag-sale { background: #15803d; }
.shop-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.shop-cat { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-dim); font: 600 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.shop-name { margin: 0; color: var(--text); font: 600 16.5px/1.35 var(--font-ui); letter-spacing: 0; overflow-wrap: anywhere; }
.shop-desc { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-meta { margin: 0; color: var(--text-dim); font-size: 13px; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.shop-price { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--c-goldtext); font-variant-numeric: tabular-nums; }
.shop-price b { font: 700 19px/1 var(--font-ui); }
.shop-price span { font: 600 13px var(--font-ui); }
.shop-price s { margin-left: 4px; color: var(--text-dim); font-size: 13px; }
.shop-card.is-out .shop-img img, .shop-card.is-out .shop-ph { filter: grayscale(1) opacity(.5); }
.shop-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--text-gold); }
.shop-login-note { margin-top: 20px; }
.shop-login-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Khung mua 1 món */
.shop-buy { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; margin-bottom: 22px; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); scroll-margin-top: 90px; }
.shop-buy-img { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md); background: radial-gradient(circle at 50% 55%, rgba(201, 168, 76, .2), transparent 65%), var(--surface-3); }
.shop-buy-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.shop-buy-form h2 { margin: 4px 0 6px; font-size: 22px; }
.shop-buy-form .field-row { margin-top: 14px; }
.shop-short { margin: 8px 0 0; color: var(--c-danger); font-weight: 600; }
.shop-short a { text-decoration: underline; }
.shop-buy-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0 10px; }
@media (max-width: 700px) {
    .shop-buy { grid-template-columns: 1fr; }
    .shop-buy-img { max-width: 180px; }
    .shop-buy-actions .btn { flex: 1; }
    .shop-search { max-width: none; }
}
.admin-thumb-sm { max-width: 96px; }
.admin-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.shop-thumb-cell img { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--surface-3); }
[data-theme="light"] .shop-img, [data-theme="light"] .shop-buy-img { background: radial-gradient(circle at 50% 60%, rgba(184, 145, 62, .2), transparent 65%), #f3ebdc; }

/* ===== Trang quản trị: 2 form cạnh nhau, ô danh sách Giftcode vừa tạo ===== */
.admin-cols { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.vc-bulk-out { width: 100%; padding: 12px; border: 1px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text-gold); font: 600 15px/1.6 var(--font-mono); resize: vertical; }

/* ===== Cẩm nang 9D Cùi Bắp (camnang.php) =====
   Màu theo mẫu tham khảo: khung đỏ sậm, thẻ quái xanh đen, tiêu đề vàng (skill design-system-9dragons-classic-private-server) */
.wiki {
    --wk-panel: #180404; --wk-panel-2: #221008; --wk-card: #121a24; --wk-card-2: #0d141c;
    --wk-line: rgba(255, 217, 102, .16); --wk-line-2: rgba(255, 255, 255, .08);
    --wk-title: #ffd966; --wk-text: #f2ece9; --wk-muted: #c9b9a8; --wk-mob: #8ecbff;
    --wk-chip: #2a1409; --wk-chip-line: rgba(255, 217, 102, .35);
    --wk-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px rgba(0, 0, 0, .4);
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: var(--sp-6) var(--sp-8); color: var(--wk-text);
}
[data-theme="light"] .wiki {
    --wk-panel: #fbf3e6; --wk-panel-2: #f3e6d0; --wk-card: #fffaf2; --wk-card-2: #f6ecdb;
    --wk-line: rgba(138, 90, 18, .22); --wk-line-2: rgba(0, 0, 0, .08);
    --wk-title: #8a5a12; --wk-text: #2b1f14; --wk-muted: #5f4f3d; --wk-mob: #1d4ed8;
    --wk-chip: #fff; --wk-chip-line: rgba(138, 90, 18, .35); --wk-shadow: 0 4px 14px rgba(120, 80, 20, .1);
}
.wiki-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 10px; }
.wiki-side-link {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--wk-line); border-radius: 14px;
    background: linear-gradient(180deg, var(--wk-panel-2), var(--wk-panel)); box-shadow: var(--wk-shadow); color: var(--wk-text);
    transition: border-color var(--fast), transform var(--fast);
}
.wiki-side-link:hover { border-color: var(--wk-chip-line); color: var(--wk-text); transform: translateX(2px); }
.wiki-side-link[aria-current="page"] { border-color: var(--wk-title); box-shadow: var(--wk-shadow), 0 0 0 1px var(--wk-title) inset; }
.wiki-side-ico { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--wk-chip-line); background: radial-gradient(circle, rgba(255, 217, 102, .18), transparent 70%); color: var(--wk-title); }
.wiki-side-link b { display: block; color: var(--wk-title); font: 700 14px/1.3 var(--font-title); letter-spacing: .04em; text-transform: uppercase; }
.wiki-side-link small { display: block; margin-top: 2px; color: var(--wk-muted); font-size: 13px; line-height: 1.35; }
.wiki-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.wiki-example { margin: 0; }
.wiki-panel { padding: 16px 18px; border: 1px solid var(--wk-line); border-radius: 15px; background: linear-gradient(180deg, var(--wk-panel-2), var(--wk-panel)); box-shadow: var(--wk-shadow); }
.wiki-kicker { margin: 0 0 12px; color: #ff8a3d; font: 700 14px/1.3 var(--font-title); letter-spacing: .06em; text-transform: uppercase; }
[data-theme="light"] .wiki-kicker { color: #c2410c; }
.wiki-kicker-lg { font-size: 15px; }
.wiki-title { margin: 0 0 12px; font-size: 22px; color: var(--wk-title); }
.wiki-group-h { margin: 14px 0 8px; color: var(--wk-text); font: 600 18px/1.3 var(--font-title); letter-spacing: .02em; }
.wiki-maps { display: flex; flex-wrap: wrap; gap: 8px; }
.wiki-map-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--wk-line-2); border-radius: 12px;
    background: linear-gradient(180deg, #3a1a10, #1f0c06); color: var(--wk-title); font: 700 14.5px/1 var(--font-title); letter-spacing: .03em;
    box-shadow: var(--wk-shadow); transition: border-color var(--fast), filter var(--fast), transform var(--fast);
}
[data-theme="light"] .wiki-map-btn { background: linear-gradient(180deg, #fffaf2, #f1e2c9); }
.wiki-map-btn svg { color: #ff8aa0; }
.wiki-map-btn:hover { border-color: var(--wk-chip-line); color: var(--wk-title); filter: brightness(1.15); transform: translateY(-1px); }
.wiki-map-btn[aria-current="page"] { border-color: var(--wk-title); box-shadow: 0 0 0 1px var(--wk-title) inset, 0 0 16px rgba(255, 217, 102, .25); }
.wiki-filters { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--wk-line-2); border-radius: 12px; }
.wiki-filter-col { display: grid; gap: 8px; }
.wiki-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wiki-panel > .wiki-row { margin-top: 12px; }
.wiki-label { color: var(--wk-text); font: 700 15px/1 var(--font-title); letter-spacing: .02em; margin-right: 4px; }
.wiki-chip {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--wk-chip-line); border-radius: 10px;
    background: var(--wk-chip); color: var(--wk-title); font: 600 13px/1 var(--font-ui); cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background var(--fast), border-color var(--fast);
}
.wiki-chip:hover { background: rgba(255, 217, 102, .12); color: var(--wk-title); }
.wiki-chip-on { border-color: var(--wk-title); background: rgba(255, 217, 102, .16); box-shadow: 0 0 0 1px var(--wk-title) inset; }
.wiki-count { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--wk-line-2); border-radius: 10px; color: var(--wk-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.wiki-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--wk-line-2); border-radius: 12px; }
.wiki-search label { color: var(--wk-text); font: 700 15px var(--font-title); }
.wiki-search input { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: 0 14px; border: 1px solid var(--wk-line); border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--wk-text); }
[data-theme="light"] .wiki-search input { background: #fff; }
.wiki-search input:focus-visible { outline: 2px solid var(--wk-title); outline-offset: 1px; }
.wiki-clear { color: var(--wk-muted); font-size: 13px; text-decoration: underline; }
.wiki-empty { margin: 0; padding: 40px 16px; border: 1px dashed var(--wk-line); border-radius: 14px; color: var(--wk-muted); text-align: center; }

/* Thẻ quái */
.wiki-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.wiki-mob { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--wk-line-2); border-radius: 14px; background: var(--wk-card); box-shadow: var(--wk-shadow); }
.wiki-mob-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--wk-line-2); }
.wiki-mob-name { flex: 1; min-width: 0; margin: 0; color: var(--wk-mob); font: 600 16.5px/1.3 var(--font-ui); letter-spacing: 0; overflow-wrap: anywhere; }
.wiki-lv, .wiki-boss { flex-shrink: 0; padding: 3px 10px; border: 1px solid var(--wk-line); border-radius: 10px; color: var(--wk-text); font: 600 12.5px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
.wiki-boss { border-color: rgba(255, 107, 91, .6); background: rgba(255, 107, 91, .14); color: #ff9b8e; }
[data-theme="light"] .wiki-boss { color: #b42318; }
.wiki-mob-img { position: relative; aspect-ratio: 3 / 2; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--wk-line-2); background: radial-gradient(ellipse at 50% 40%, rgba(142, 203, 255, .1), transparent 65%), var(--wk-card-2); color: rgba(142, 203, 255, .35); overflow: hidden; }
.wiki-mob-img img { max-width: 90%; max-height: 92%; object-fit: contain; }
.wiki-mob-map { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: var(--wk-title); font-size: 12px; }
.wiki-mob-note { margin: 0; color: var(--wk-muted); font-size: 13.5px; }
.wiki-drops { border: 1px solid var(--wk-line-2); border-radius: 12px; background: var(--wk-card-2); }
.wiki-drops h4 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--wk-line-2); color: var(--wk-title); font: 700 15.5px/1.2 var(--font-title); letter-spacing: .02em; }
.wiki-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; }
.wiki-drop-list > summary { list-style: none; cursor: pointer; }
.wiki-drop-list > summary::-webkit-details-marker { display: none; }
.wiki-drop-list > .wiki-icons { padding-top: 0; }
.wiki-drop-list .when-open, .wiki-drop-list[open] .when-closed { display: none; }
.wiki-drop-list[open] .when-open { display: inline; }
.wiki-drop-list[open] .wiki-more { display: none; }
.wiki-more { display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px; border: 1px solid var(--wk-line); border-radius: 8px; color: var(--wk-text); font-size: 12.5px; }
.wiki-view-all { min-height: 28px; }
.wiki-ico-link { display: inline-flex; border-radius: 8px; }
.wiki-ico-link:focus-visible { outline: 2px solid var(--wk-title); outline-offset: 2px; }
.wiki-ico-link.is-hit .wiki-ico { box-shadow: 0 0 0 2px var(--wk-title), 0 0 12px rgba(255, 217, 102, .6); }
.wiki-ico {
    display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex-shrink: 0; border-radius: 7px; overflow: hidden;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #000), #0b0b0b 80%); color: var(--c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 2px 6px rgba(0, 0, 0, .45);
    transition: transform var(--fast);
}
.wiki-ico img { width: 100%; height: 100%; object-fit: contain; }
.wiki-ico-link:hover .wiki-ico { transform: translateY(-2px) scale(1.08); }
.wiki-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wiki-muted { margin: 0; color: var(--wk-muted); }
.wiki-nodrop { padding: 4px 2px; font-size: 13.5px; }

/* Tra vật phẩm */
.wiki-item-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.wiki-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--wk-line-2); border-radius: 12px; background: var(--wk-card); color: var(--wk-text); transition: border-color var(--fast), transform var(--fast); }
.wiki-item-row:hover { border-color: var(--wk-chip-line); color: var(--wk-text); transform: translateY(-1px); }
.wiki-item-row b { display: block; font-weight: 600; }
.wiki-item-row small { display: block; color: var(--wk-muted); font-size: 12.5px; }
.wiki-item-head { display: flex; gap: 16px; align-items: center; }
.wiki-item-head h2 { margin: 0 0 4px; color: var(--wk-title); font-size: 24px; }
.wiki-item-head .wiki-kicker { margin-bottom: 4px; }
.wiki-source { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--wk-title); border-radius: 8px; background: rgba(255, 217, 102, .06); }
.wiki-source b { color: var(--wk-title); }
.wiki-source p { margin: 4px 0 0; }
.wiki-h { margin: 20px 0 10px; color: var(--wk-title); font-size: 18px; }
.wiki-table { width: 100%; border-collapse: collapse; }
.wiki-table th, .wiki-table td { padding: 10px 12px; border-bottom: 1px solid var(--wk-line-2); text-align: left; }
.wiki-table th { color: var(--wk-muted); font: 600 12.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.wiki-back { margin-top: 16px; }

/* Phần thêm cho kiểu "Tra cứu": trang chi tiết quái / vật phẩm / công thức, bảng chỉ số, khung xem nhanh.
   Giữ đúng tông màu Cẩm nang ở trên (khung đỏ sậm, thẻ xanh đen, chữ vàng). */
.wiki-side-link b .wiki-side-n { margin-left: 4px; padding: 1px 7px; border: 1px solid var(--wk-chip-line); border-radius: 8px; color: var(--wk-muted); font: 600 11px/1.4 var(--font-ui); font-style: normal; letter-spacing: 0; vertical-align: 1px; }
.wiki-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.wiki-intro { margin: -4px 0 4px; }
.wiki-panel > .wiki-row { margin-top: 12px; }
.wiki-search input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }
.wiki-search select { flex: 0 1 220px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--wk-line); border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--wk-text); }
[data-theme="light"] .wiki-search select { background: #fff; }
.wiki-mob-row .wiki-mob-name { display: block; margin: 0; font-size: 15px; }
.wiki-mob-row .wiki-boss { margin-left: 4px; padding: 1px 7px; font-size: 11px; font-style: normal; }
.wiki-row-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--wk-line-2); background: radial-gradient(circle, rgba(142, 203, 255, .14), transparent 70%), var(--wk-card-2); color: var(--wk-mob); overflow: hidden; }
.wiki-row-ico.is-boss { color: #ff9b8e; background: radial-gradient(circle, rgba(255, 107, 91, .18), transparent 70%), var(--wk-card-2); }
.wiki-row-ico img { width: 100%; height: 100%; object-fit: contain; }
.wiki-mob-name a, a.wiki-mob-name { color: var(--wk-mob); }
.wiki-mob-name a:hover, a.wiki-mob-name:hover { color: var(--wk-title); }
.wiki-detail-ico { flex-shrink: 0; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--wk-line); background: radial-gradient(circle, rgba(142, 203, 255, .14), transparent 70%), var(--wk-card-2); color: var(--wk-mob); overflow: hidden; }
.wiki-detail-ico.is-boss { color: #ff9b8e; }
.wiki-detail-ico img { width: 100%; height: 100%; object-fit: contain; }
.wiki-item-head .wiki-mob-title { color: var(--wk-mob); }
.wiki-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 16px 0 0; }
.wiki-stats > div { padding: 10px 12px; border: 1px solid var(--wk-line-2); border-radius: 12px; background: var(--wk-card); }
.wiki-stats .wiki-stat-wide { grid-column: span 2; }
.wiki-stats dt { color: var(--wk-muted); font: 600 11.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.wiki-stats dd { margin: 4px 0 0; color: var(--wk-text); font-weight: 600; font-size: 15.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wiki-stats dd a { color: var(--wk-title); }
.wiki-h { display: flex; align-items: center; gap: 8px; }
.wiki-h .wiki-count { min-height: 26px; font-family: var(--font-ui); }
.wiki-detail .table-wrap { border: 1px solid var(--wk-line-2); border-radius: 12px; background: var(--wk-card); }
.wiki-table td { vertical-align: middle; }
.wiki-table tbody tr:last-child td { border-bottom: 0; }
.wiki-table tbody tr:hover { background: rgba(255, 217, 102, .04); }
.wiki-table td.tabular { white-space: nowrap; }
.wiki-inline { display: inline-flex; align-items: center; gap: 10px; color: var(--wk-text); font-weight: 600; }
.wiki-inline:hover { color: var(--wk-title); }
.wiki-recipe-links { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wiki-recipe-links .wiki-chip { min-height: 28px; }
.wiki-chip.wiki-chip-on:hover { background: rgba(255, 217, 102, .2); }
.wiki-pager { align-items: center; }
.wiki-pager-gap { color: var(--wk-muted); padding: 0 2px; }
.wiki-pager-per { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 12px; }

/* Khung xem nhanh vật phẩm (rê chuột / bấm Tab tới) */
.wiki-tip {
    position: fixed; z-index: 90; width: min(300px, calc(100vw - 24px)); padding: 12px 14px; pointer-events: none;
    border: 1px solid rgba(255, 217, 102, .45); border-radius: 12px; background: #121a24; color: #f2ece9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(4px); transition: opacity var(--fast), transform var(--fast);
}
.wiki-tip.is-on { opacity: 1; transform: none; }
.wiki-tip-head { display: flex; align-items: center; gap: 10px; }
.wiki-tip-head b { display: block; color: #ffd966; font-size: 15px; line-height: 1.3; }
.wiki-tip-head small { display: block; color: #c9b9a8; font-size: 12px; }
.wiki-tip p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.wiki-tip p b { color: #ffd966; }
.wiki-tip .wiki-tip-foot { color: #c9b9a8; font-size: 12px; }

@media (max-width: 960px) {
    .wiki { grid-template-columns: minmax(0, 1fr); }
    .wiki-side { position: static; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: thin; }
    .wiki-side-link { flex: 0 0 auto; padding: 8px 12px; }
    .wiki-side-link small { display: none; }
    .wiki-side-ico { width: 34px; height: 34px; }
}
@media (max-width: 560px) {
    .wiki-panel { padding: 14px 12px; }
    .wiki-map-btn { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
    .wiki-filters, .wiki-search { padding: 10px; }
    .wiki-item-head { align-items: flex-start; }
    .wiki-item-head h2 { font-size: 21px; }
    .wiki-detail-ico { width: 56px; height: 56px; }
    .wiki-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wiki-stats .wiki-stat-wide { grid-column: 1 / -1; }
    .wiki-table th, .wiki-table td { padding: 9px 10px; }
    .wiki-pager-per { margin-left: 0; }
}
@media (pointer: coarse) { .wiki-chip { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .wiki-tip { transition: none; } }
/* Trang quản trị > Cẩm nang */
.admin-subtabs { margin: 4px 0 16px; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-filter input, .admin-filter select { flex: 1 1 180px; min-height: 36px; }
.wk-drops { margin: 14px 0; padding: 12px 14px 2px; border: 1px solid var(--border); border-radius: var(--r-md); }
.wk-drops legend { padding: 0 6px; color: var(--text-gold); font-weight: 600; }
.wk-drops label { display: flex; align-items: center; gap: 8px; }

/* ===== Thanh menu: 7 mục (thêm Cẩm nang, Kỳ Trân Các) cần rộng hơn khung nội dung ===== */
.topbar-inner { max-width: calc(1360px + var(--gutter) * 2); gap: 16px; }
.menu { gap: 2px; }
.menu a { padding: 0 10px; font-size: 13px; letter-spacing: .05em; }
.menu a::after { left: 10px; right: 10px; }
@media (max-width: 1440px) {
    .logo-sub { display: none; }
    .topbar .icon-link { display: none; }
}
@media (max-width: 1320px) {
    .menu a { padding: 0 7px; letter-spacing: .03em; font-size: 12.5px; }
    .menu a::after { left: 7px; right: 7px; }
    .menu a + a::before { left: -4px; }
}
@media (max-width: 1200px) {
    .topbar .menu, .topbar .prefs-menu, .topbar .divider { display: none; }
    .menu-button { display: grid; }
}
.wk-drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 16px; }
.wk-drops legend, .wk-drops > .field-tip { grid-column: 1 / -1; }
.wk-drops textarea { min-height: 44px; height: 44px; resize: vertical; }
.wk-drops textarea { field-sizing: content; max-height: 180px; }
.wk-modes { display: grid; grid-template-columns: 1fr; gap: 4px; padding-bottom: 12px; }
.wk-radio { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.wk-radio input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--gold, #c9a227); }
.wk-stats-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.admin-actions-start { justify-content: flex-start; flex-wrap: wrap; }
.admin-help { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-muted, inherit); font-size: 14px; }
.admin-help code { color: var(--text-gold); }