/* ==========================================================================
   Hokage Saga — Hệ chữ & thanh cuộn (nạp CUỐI CÙNG, sau moonleaf.css)
   Hai font:  Philosopher  → chữ "trang trí": tiêu đề trang, tiêu đề thẻ, tên thương hiệu, tiêu đề hộp thoại
              Be Vietnam Pro → mọi chữ "đọc": menu, nút, mô tả, số liệu, nhãn, bảng, ô nhập
   Mỗi loại chữ có màu + hiệu ứng riêng (xem từng mục). Chỉnh màu nhanh qua các biến --t-*.
   ========================================================================== */
:root {
  --font-title: 'Philosopher', 'Be Vietnam Pro', Georgia, serif;
  --font-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui); --font-body: var(--font-ui); --font-serif: var(--font-title);
  --t-head: #fff6df;      /* tiêu đề thẻ */
  --t-body: #e6ecf5;      /* mô tả, đoạn văn */
  --t-soft: #c3cfe0;      /* chữ phụ */
  --t-label: #f2d9a2;     /* nhãn ô nhập, tiêu đề cột */
  --t-gold: #ffd479;
  --t-teal: #7ff5e6;
  /* thẻ đặc hơn để chữ luôn dễ đọc trên nền tranh */
  --ml-card: linear-gradient(160deg, #1a3346e6 0%, #0c1b2bf0 45%, #0a1522f5 100%);
}
body { font-family: var(--font-ui); font-size: 15.5px; color: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input, select, textarea, .input, .select, .textarea { font-family: var(--font-ui); }

/* 1. TIÊU ĐỀ TRANG (h1): vàng kim chuyển sắc + quầng neon + vệt sáng lướt chậm */
.hello h1, .page-head h1, .auth-card h1, .hero h1 {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0; line-height: 1.15;
  background: linear-gradient(100deg, #fff6d0 0%, #ffd982 30%, #fffbea 45%, #ffc24d 62%, #ffe39a 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #ffe9b8aa) drop-shadow(0 0 14px #ffb84d66) drop-shadow(0 2px 2px #000c);
  animation: t-shine 7s ease-in-out infinite; }
.hello h1 .grad-text { background: linear-gradient(100deg, #9befff 0%, #3fe0d0 40%, #d6fffa 55%, #3fe0d0 70%, #7fd8ff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 2px #001c1966); animation: t-shine 3s ease-out 1; }
@keyframes t-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 2. DÒNG NHỎ TRÊN TIÊU ĐỀ (eyebrow): chữ in hoa giãn cách, neon xanh ngọc */
.hello .eyebrow, .page-head .eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--t-teal) !important; text-shadow: 0 0 6px #3fe0d0aa, 0 0 16px #3fe0d055; }
.page-head .eyebrow::before { background: linear-gradient(90deg, transparent, var(--t-teal)); box-shadow: 0 0 8px var(--t-teal); }

/* 3. TIÊU ĐỀ THẺ / MỤC (h2, h3): kem sáng + viền sáng vàng nhẹ */
h2, h3, .panel-head h3, .glass > h2, .glass > h3, .modal h2, .modal h3, .more-head b {
  font-family: var(--font-title); font-weight: 700; color: var(--t-head); letter-spacing: .01em;
  text-shadow: 0 0 1px #fff3d0, 0 0 12px #ffc24d55, 0 1px 2px #000; }
.modal h2, .modal h3 { font-size: 1.6rem; background: linear-gradient(180deg, #fff8e6, #ffd479); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 10px #ffc24d66); }
.panel-head h3 svg, h3 > svg, h2 > svg { color: var(--t-teal); filter: drop-shadow(0 0 6px #3fe0d0aa); }

/* 4. MÔ TẢ / ĐOẠN VĂN: sáng, dễ đọc, có bóng mờ tách khỏi nền */
p, .sub, .hello .sub, .page-head p, .hint, .note, li { font-family: var(--font-ui); }
p, .sub, .page-head p { color: var(--t-body); line-height: 1.65; text-shadow: 0 1px 2px #000a; }
.hello .sub, .page-head p { font-size: 1.02rem; font-weight: 400; }
.muted, .hint, .note, small, .kpi .note, .stat-sub { color: var(--t-soft) !important; }
.quote { font-family: var(--font-title); font-style: italic; color: #f3e6c8; text-shadow: 0 0 10px #ffc24d44, 0 1px 2px #000; }

/* 5. MENU TRÁI */
.sidebar .brand span, .brand span { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff6d8, #ffc24d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px #ffc24d66); }
.sidebar .rail-title { font-family: var(--font-ui); font-weight: 700; font-size: .68rem; letter-spacing: .24em; color: #e8cf94; text-shadow: 0 0 8px #ffc24d44; }
.sidebar nav a, .sidebar-links a { font-family: var(--font-ui); }
.sidebar nav a .nm-name { font-weight: 600; font-size: .9rem; color: #f6f1e4; letter-spacing: 0; text-shadow: 0 1px 1px #000; }
.sidebar nav a .nm small { font-weight: 500; font-size: .72rem; color: #b6c3d8; }
.sidebar nav a:hover .nm-name, .sidebar-links a:hover { color: #fff; text-shadow: 0 0 8px #ffd479cc, 0 0 18px #ffb84d66; }
.sidebar nav a[aria-current='page'] .nm-name { color: #241503 !important; text-shadow: 0 1px 0 #fff6d880 !important; font-weight: 700; }
.sidebar nav a[aria-current='page'] small { color: #4a3210 !important; }
.sidebar-links a { font-weight: 600; font-size: .86rem; color: #e9edf4; }
.sidebar .tagline { font-family: var(--font-ui); color: var(--t-soft); }

/* 6. NÚT */
.btn { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .015em; }
.btn:not(.btn--primary):not(.btn--jade):not(.btn--teal):not(.btn--danger):not(.btn--violet) { color: #fff4dc; text-shadow: 0 0 8px #ffc24d88, 0 1px 1px #000; }
.btn--primary, .btn--jade { color: #241503 !important; text-shadow: 0 1px 0 #fff6d8aa; }
.btn--teal, .hero-actions > :nth-child(2).btn { color: #032320 !important; text-shadow: 0 1px 0 #e6fffb99; }
.btn--violet, .hero-actions > :nth-child(3).btn, .btn--danger { color: #fff !important; text-shadow: 0 0 8px #ffffff66, 0 1px 1px #0008; }
.btn:hover { filter: brightness(1.08); }
.pill, .user-chip .who b, .tab, .tabbar a, .tab-more { font-family: var(--font-ui); font-weight: 600; }
.pill { color: #fff1d6; }
.tab[aria-selected='true'], .tab.active { color: #241503; text-shadow: none; }

/* 7. SỐ LIỆU: đậm, trắng, quầng vàng */
.kpi .val, .big-num, .stat .stat-value, .num, .lb-xu-val, .coin span, .rw-qty { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.kpi .val, .big-num, .stat .stat-value { color: #fff; text-shadow: 0 0 1px #fff, 0 0 14px #ffc24d77; }
.coin span, .lb-xu-val .coin span { color: #ffe9b8; text-shadow: 0 0 10px #ffc24d88; }
.kpi .k-label, .stat .stat-label { font-family: var(--font-ui); font-weight: 600; color: #f0e2c4; }

/* 8. NHÃN Ô NHẬP / TIÊU ĐỀ CỘT / NHÃN NHỎ */
.field > label, .label, .table th, .more-title { font-family: var(--font-ui); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-label); text-shadow: 0 0 8px #ffc24d33; }
.table td { color: #e9eef6; }
.badge, .tag, .sidebar .tag, .delta { font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; }
a:not(.btn):not(.pill):not(.tab):not([class*='sidebar']) { text-underline-offset: 3px; }

/* ==========================================================================
   THANH CUỘN: mảnh, vàng mờ, không chiếm chỗ; trang không còn giật khi thanh cuộn xuất hiện
   ========================================================================== */
html { scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: #ffc24d55 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd47966, #ffb84d44); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffd479cc, #ffb84d99); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* menu trái: ẩn hẳn thanh cuộn, mờ dần ở mép để gợi ý còn nội dung */
.sidebar nav { scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%); }
.sidebar nav::-webkit-scrollbar { display: none; }
/* hộp thoại: không bao giờ cuộn ngang; cuộn dọc mượt */
.modal, .modal-back, .more-panel, .search-results, .rw-sug { overflow-x: hidden; overscroll-behavior: contain; }
.table-wrap { overscroll-behavior-x: contain; }
html { scroll-behavior: smooth; }
/* Rê chuột KHÔNG còn nhấc thẻ lên (gây tràn khung & hiện thanh cuộn) — thay bằng phát sáng viền */
.glass--hover:hover, a > .glass:hover, .kpi:hover, .float-card:hover, .glass:hover { transform: none !important; }
.btn:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .hello h1, .page-head h1, .hello h1 .grad-text { animation: none; } html { scroll-behavior: auto; } }
/* khối "Về cổng người chơi" ở menu admin: chỉ hiện khi màn hình đủ cao để không che menu */
@media (max-height: 1100px) { .sidebar .promo { display: none; } }