/* Naloo — menu B approved 25.10.2026. Presentation only; existing layout and controls stay in app.css. */
:root {
  --phong: var(--phong-naloo);
  --nen: #eef5fa; --mat: #fff; --mat-2: #dfedf6;
  --chu: #12354d; --chu-nhat: #4d6577; --vien: #d8e6ef;
  --chinh: #086a99; --chinh-2: #0875ac; --bieu: #0875ac; --bieu-nhat: #587185;
  --xanh: #0875ac; --xanh-bien: #0875ac; --xanh-cyan: #58c9ed; --xanh-ngoc: #58c9ed;
  --tin-toi: #0874a6; --tin-ban: #fff;
  --nen-nut-chinh: linear-gradient(145deg, #0879aa, #086391);
  --nen-tin-toi: linear-gradient(135deg, #0877ad, #066197);
  --nen-tron-xanh: linear-gradient(145deg, #1683b1, #086391);
  --nen-dau: radial-gradient(ellipse at 25% 0, #226d92 0%, transparent 65%), linear-gradient(130deg, #072c49, #0c5380);
  --nen-the: linear-gradient(145deg, #fff, #eaf4fa);
  --vien-sang: rgba(255,255,255,.94);
  --bong: 0 5px 18px rgba(22,61,97,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #081c2e; --mat: #102c46; --mat-2: #1b3d58;
    --chu: #e5f2fa; --chu-nhat: #a7c2d4; --vien: #24445d;
    --chinh: #086a99; --chinh-2: #68c7f1; --bieu: #68c7f1; --bieu-nhat: #a2c1d4;
    --xanh: #68c7f1; --tin-ban: #1b3d58;
    --nen-dau: radial-gradient(ellipse at 25% 0, #185574 0%, transparent 65%), linear-gradient(130deg, #07263e, #0b3353);
    --nen-the: linear-gradient(145deg, #163853, #102a41);
    --vien-sang: rgba(173,219,244,.16);
    --bong: 0 5px 18px rgba(0,0,0,.18);
  }
}
.dau { background: var(--nen-dau); box-shadow: 0 3px 12px rgba(7,44,73,.14); }
.dau .anh-dai .cham-tt { border-color: #0c5380; }
/* Original 3D artwork has real transparency. No rectangular plate or bright halo behind it. */
.dau .logo-chu, .man-xanh .logo-naloo { filter: saturate(.85) drop-shadow(0 1px 2px rgba(5,37,58,.18)); }
.nut-chinh, .tab[aria-selected="true"] { box-shadow: inset 0 1px var(--vien-sang), 0 4px 12px rgba(8,99,145,.15); }
.tab[aria-selected="true"] .so-chua-doc { color: #086391; }
.anh-dai { background: linear-gradient(145deg,#349bc5,#086391); box-shadow: inset 0 1px rgba(255,255,255,.45),0 3px 9px rgba(12,75,112,.14); }
.cd { background: linear-gradient(180deg, color-mix(in srgb,var(--chinh-2) 7%,transparent),transparent 200px); }
.cd-ho-so, .cd-o { background: var(--nen-the); box-shadow: inset 0 1px var(--vien-sang),var(--bong); }
.cd-the, .bai, .bt-viet { box-shadow: inset 0 1px var(--vien-sang),var(--bong); }
.cd-bieu { background: transparent; box-shadow: none; color: var(--bieu); }
.cd-bieu .ico {
  width: 100%; height: 100%; background: var(--tile) center 45% / 132% no-repeat;
  -webkit-mask: none; mask: none;
}
/* Danger states retain their red glyphs and clear solid backgrounds. */
.cd-hang.canh .cd-bieu, .cd-hang.nguy .cd-bieu { background: #b52c37; color: #fff; }
.cd-hang.nhac .cd-bieu { background: var(--mat-2); }
.cd-hang.canh .cd-bieu .ico, .cd-hang.nguy .cd-bieu .ico {
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.tin.toi .tin-hop { box-shadow: 0 3px 10px rgba(8,99,145,.15); }
.go .nut-mic:has(.ico-mic), .go .nut-chinh { box-shadow: inset 0 1px rgba(255,255,255,.4),0 3px 10px rgba(8,99,145,.18); }
.goi { background: radial-gradient(ellipse at 60% 15%,#164e70,#092a46 48%,#061b2f); }
.goi-b-icon { background: linear-gradient(155deg,#ccecff3d,#bddfff10); box-shadow: inset 0 1px rgba(242,251,255,.35),0 5px 18px rgba(0,0,0,.14); }
.goi-bat .goi-b-icon { background: #eaf6ff; color: #0c3653; }
.goi-do .goi-b-icon { background: linear-gradient(160deg,#d3444c,#ad2330); }
.goi-xanh .goi-b-icon { background: var(--nen-tron-xanh); }
.goi-thanh, .goi-thanh.goi-thanh-den { background: var(--nen-nut-chinh); }
.man-xanh .nut-chinh { background: var(--nen-nut-chinh); box-shadow: inset 0 1px rgba(255,255,255,.4),0 6px 18px rgba(8,99,145,.24); }
.man-xanh .nut-mat { color: #086391; }
.man-xanh .nut-phu { background: rgba(7,44,73,.4); }
.tt-vong.moi { background: conic-gradient(from 200deg,#58c9ed,#0875ac,#0c5380,#58c9ed); }
.tt-vong.cua-toi { background: var(--nen-tron-xanh); }
/* Keep saved story background classes untouched: their colours are part of authored content. */