/* ==========================================================================
   Hokage Saga — theme "Moonleaf" (lá vàng dưới trăng)
   Nạp SAU hokage-theme.css và fx.css. Tắt theme: xoá dòng moonleaf.css trong template/head.php.
   Bảng màu: vàng kim + xanh ngọc (teal) + tím lam, nhấn hồng cho nhãn HOT/NEW.
   Chữ: Playfair Display (serif) cho gần như toàn bộ giao diện, số dạng lining.
   ========================================================================== */
:root {
  --ml-gold: #ffc24d; --ml-gold-hi: #ffe3a1; --ml-amber: #ff9a2e;
  --ml-teal: #3fe0d0; --ml-teal-hi: #a6fff4; --ml-teal-deep: #0f6b6a;
  --ml-violet: #8b7dff; --ml-blue: #4f7dff; --ml-rose: #ff4d8d;
  --ml-card: linear-gradient(160deg, #1b3a4a66 0%, #0b1b2a8c 45%, #0a1522b3 100%);
  --ml-border: #e8b95c;
  --ml-glow: 0 0 0 1px #ffd58a33, 0 0 16px #ffb84d40, 0 0 36px #3fe0d014;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --fw-display: 600;
}
body { font-feature-settings: 'lnum' 1; }
input, select, textarea, .input, .select, .textarea, code, .mono { font-family: 'Be Vietnam Pro', system-ui, sans-serif; }

/* ---------- Nền: trăng + cực quang xanh ngọc + lá vàng ---------- */
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 30% at 78% 8%, #3fe0d024, transparent 70%),
    radial-gradient(ellipse 35% 25% at 62% 22%, #8b7dff1c, transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 50%, transparent 55%, #02060d99 100%); }

/* ---------- Thẻ ---------- */
.glass { background: var(--ml-card); border-color: var(--ml-border); box-shadow: var(--ml-glow), inset 0 1px 1px #fff1c455, inset 0 0 40px #3fe0d00d; border-radius: 20px; }
.glass .glass { background: #0b1a2699; }
.glass--hover:hover, a > .glass:hover, .kpi:hover { border-color: var(--ml-gold-hi); box-shadow: 0 0 0 1px #ffe3a188, 0 0 22px #ffc24d77, 0 0 50px #3fe0d026, 0 14px 30px #0008; }
/* chấm sáng ở góc thẻ */
.glass > .fx-sheen::after { content: ''; position: absolute; right: 18px; bottom: -1px; width: 60px; height: 2px; border-radius: 2px;
  background: radial-gradient(closest-side, #fff6d8, #ffc24d88, transparent); box-shadow: 0 0 12px #ffc24d; }

/* ---------- Tiêu đề ---------- */
.hello h1, .page-head h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe8b8 50%, #ffc24d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px #ffb84d55); }
.hello h1 .grad-text { background: linear-gradient(95deg, #7fd8ff 0%, #3fe0d0 45%, #a6fff4 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px #3fe0d066); }
.hello .eyebrow, .page-head .eyebrow { font-family: var(--font-serif); font-weight: 600; letter-spacing: .28em; color: #f4e3bf !important; }
.panel-head h3, .glass > h2, .glass > h3 { font-family: var(--font-serif); font-weight: 600; color: #fff1d6; }
.panel-head h3 svg { color: var(--ml-teal); filter: drop-shadow(0 0 6px #3fe0d099); }
.hello .sub, .page-head p { font-family: var(--font-serif); font-size: 1.02rem; color: #e8ecf4; }
.quote { font-family: var(--font-serif); font-style: italic; color: #f3ead6; }

/* ---------- Nút: vàng / xanh ngọc / tím lam ---------- */
.btn { font-family: var(--font-serif); font-weight: 600; letter-spacing: .01em; border-radius: 12px; }
.btn--primary { --_bg: linear-gradient(180deg, #ffe9a6 0%, #ffcd5a 45%, #f0a032 100%); --_fg: #2a1805; --_bd: #fff0b8; }
.btn--teal, .hero-actions > :nth-child(2).btn { --_bg: linear-gradient(180deg, #7ff5e6 0%, #2fc9b9 50%, #168f86 100%); --_fg: #04221f; --_bd: #b6fff5;
  box-shadow: 0 0 0 1px #b6fff5, 0 0 20px #3fe0d088, inset 0 1px 2px #eafffb; text-shadow: 0 1px 0 #d6fff966; }
.btn--violet, .hero-actions > :nth-child(3).btn { --_bg: linear-gradient(180deg, #7fa0ff 0%, #4f6bff 50%, #3a3fc9 100%); --_fg: #fff; --_bd: #c3d0ff;
  box-shadow: 0 0 0 1px #c3d0ff, 0 0 20px #5f7dff88, inset 0 1px 2px #e3e9ff; }
.hero-actions .badge--jade { padding: 12px 18px; font-size: .8rem; border-radius: 12px; background: linear-gradient(180deg, #2fc9b955, #168f8633); border-color: #7ff5e6; color: #d6fff9; }

/* ---------- Sidebar ---------- */
.sidebar { background: linear-gradient(175deg, #10202dcc, #0a1420e6 60%, #0c1a24ee); border-color: var(--ml-border); }
.sidebar .brand span { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; background: linear-gradient(180deg, #fff3cf, #ffc24d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sidebar .rail-title { font-family: var(--font-serif); font-size: .7rem; letter-spacing: .26em; color: #d9c79f; margin: 12px 8px 6px; }
.sidebar nav a { font-family: var(--font-serif); border-bottom-color: transparent; }
.sidebar nav a .nm-name { font-weight: 600; font-size: .92rem; }
.sidebar nav a .ico { color: var(--ml-teal); filter: drop-shadow(0 0 5px #3fe0d077); }
.sidebar nav a[aria-current='page'] { background: linear-gradient(180deg, #ffe39a, #ffc24d 55%, #e99a2c); color: #2a1805; border-color: #fff0b8; box-shadow: 0 0 18px #ffc24d88, inset 0 1px 1px #fff8dd; }
.sidebar nav a[aria-current='page'] .nm-name, .sidebar nav a[aria-current='page'] small { color: #2a1805 !important; text-shadow: none; }
.sidebar nav a[aria-current='page'] .ico { color: #2a1805; background: #fff3cf66; filter: none; }
.sidebar .tag { background: linear-gradient(120deg, #ff6fa5, var(--ml-rose)); color: #fff; border-color: #ffc2d8; box-shadow: 0 0 10px #ff4d8d88; }
.ml-promo { margin: 10px 2px 4px; padding: 14px; border-radius: 16px; border: 1px solid #ffd58a88; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #06101a33, #06101aee 85%), url('/ui/img/bg/ninja-aurora.webp') 60% 30% / cover; box-shadow: 0 0 16px #3fe0d033; }
.ml-promo b { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: #fff; line-height: 1.2; }
.ml-promo p { margin: 6px 0 10px; font-size: .78rem; color: #dfe7f2; }
.ml-promo .btn { min-height: 36px; font-size: .82rem; }
.ml-motto { padding: 8px 10px 0; font-family: var(--font-serif); font-style: italic; font-size: .74rem; color: #cdb98f; }
@media (max-height: 1080px) { .ml-promo { display: none; } }
@media (max-height: 860px) { .ml-motto { display: none; } }

/* ---------- Thanh trên ---------- */
.ml-date { font-family: var(--font-serif); }
@media (max-width: 1400px) { .ml-date { display: none !important; } }
.user-chip .avatar { background: linear-gradient(135deg, #7fa0ff, #8b7dff 60%, #3fe0d0); color: #fff; }
.pill, .user-chip .who b { font-family: var(--font-serif); }

/* ---------- Thẻ chỉ số: vòng icon nhiều màu + tranh trang trí bên phải ---------- */
.kpi { background-repeat: no-repeat !important; background-position: right 38px bottom 8px, 0 0 !important; background-size: auto 50%, cover !important; }
.kpi .chip-ico { border-radius: 50%; width: 56px; height: 56px; }
.grid-kpi > .kpi:nth-child(1) .chip-ico { color: var(--ml-teal-hi); border-color: var(--ml-teal); box-shadow: 0 0 16px #3fe0d077, inset 0 0 12px #3fe0d044; background: radial-gradient(circle, #3fe0d033, #0a1a2299); }
.grid-kpi > .kpi:nth-child(2) .chip-ico { color: #d3cbff; border-color: var(--ml-violet); box-shadow: 0 0 16px #8b7dff77, inset 0 0 12px #8b7dff44; background: radial-gradient(circle, #8b7dff33, #0a1a2299); }
.grid-kpi > .kpi:nth-child(3) .chip-ico { color: #ffb3a8; border-color: #ff6b5a; box-shadow: 0 0 16px #ff6b5a66, inset 0 0 12px #ff6b5a44; background: radial-gradient(circle, #ff6b5a33, #0a1a2299); }
.grid-kpi > .kpi:nth-child(4) .chip-ico { color: var(--ml-gold-hi); border-color: var(--ml-gold); box-shadow: 0 0 16px #ffc24d77, inset 0 0 12px #ffc24d44; background: radial-gradient(circle, #ffc24d33, #0a1a2299); }
.grid-kpi > .kpi:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c9fff8'/%3E%3Cstop offset='1' stop-color='%23169a92' stop-opacity='.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.55' fill='url(%23a)' stroke='%23b6fff5' stroke-opacity='.7'%3E%3Cpath d='M40 4 54 36 40 96 26 36z'/%3E%3Cpath d='M16 30 26 50 20 92 8 52z' opacity='.7'/%3E%3Cpath d='M64 26 74 50 64 92 56 50z' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"), var(--ml-card); }
.grid-kpi > .kpi:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cg opacity='.5' fill='%23f0b04a' stroke='%23fff0b8' stroke-opacity='.8'%3E%3Cellipse cx='30' cy='70' rx='22' ry='6'/%3E%3Cellipse cx='30' cy='62' rx='22' ry='6'/%3E%3Cellipse cx='30' cy='54' rx='22' ry='6'/%3E%3Cellipse cx='66' cy='70' rx='22' ry='6'/%3E%3Cellipse cx='66' cy='62' rx='22' ry='6'/%3E%3Cellipse cx='66' cy='54' rx='22' ry='6'/%3E%3Cellipse cx='66' cy='46' rx='22' ry='6'/%3E%3Cellipse cx='66' cy='38' rx='22' ry='6'/%3E%3C/g%3E%3C/svg%3E"), var(--ml-card); background-size: auto 40%, cover !important; }
.grid-kpi > .kpi:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cg fill='%23a7c4ff' opacity='.35'%3E%3Ccircle cx='40' cy='22' r='12'/%3E%3Cpath d='M18 100c2-30 8-58 22-62 14 4 20 32 22 62z'/%3E%3Cpath d='M58 10 74 2 64 34z'/%3E%3C/g%3E%3C/svg%3E"), var(--ml-card); }
.grid-kpi > .kpi:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffd58a' stroke-opacity='.35' stroke-width='5'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Cpath d='M50 18a32 32 0 1 1-30 20 22 22 0 1 0 30-8'/%3E%3C/g%3E%3C/svg%3E"), var(--ml-card); }
.kpi .val { font-family: var(--font-serif); font-weight: 700; }
.kpi .k-label { font-family: var(--font-serif); font-size: 1rem; }
.delta { font-family: 'Be Vietnam Pro', sans-serif; border: 1px solid #7ff5e688; background: #3fe0d01f; color: #c9fff8; }

/* ---------- Biểu đồ ---------- */
.chart .grid-line { stroke: #ffffff17; stroke-dasharray: 3 5; }
.chart text { fill: #cfd8e6; font-family: var(--font-serif); }
.chart .dot { filter: drop-shadow(0 0 6px #ffc24d); }
.chart .dot--teal { filter: drop-shadow(0 0 6px #3fe0d0); }
.legend i, .legend .d { box-shadow: 0 0 8px currentColor; }

/* ---------- Thẻ sự kiện nổi bật: tranh cực quang ---------- */
.dashboard .float-card { background: linear-gradient(180deg, #05101a00 30%, #05101acc 100%), url('/ui/img/bg/ninja-aurora.webp') center / cover !important;
  border: 1.5px solid #fff0c4 !important; transform: rotate(-1.5deg); }
.dashboard .float-card b { font-family: var(--font-serif); font-size: 1.5rem; }
.dashboard .float-card .play { background: #ffffff26; border: 2px solid #fff; }

/* ---------- Bảng, tab, nhãn ---------- */
.table th { font-family: var(--font-serif); color: #f0dcb2; }
.tab { font-family: var(--font-serif); }
.tab[aria-selected='true'], .tab.active { background: linear-gradient(180deg, #ffe39a, #ffc24d); color: #2a1805; }
.badge--mute { font-family: var(--font-serif); }

@media (max-width: 720px) { .kpi { background-image: var(--ml-card) !important; } .dashboard .float-card { transform: none; } }