/* =====================================================================
 * Khung chung cho các "ứng dụng" của bienac.com (Thang vũ trụ, Chiết tự…)
 * Dùng sau style.css + theme.css
 * ===================================================================== */
body.ud { background: var(--ink); min-height: 100vh; }
body.ud .site-header { background: rgba(6, 7, 11, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }

.ud-panel {
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ud-kicker {
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}
.ud-kicker .han { font-family: var(--han); letter-spacing: .1em; color: var(--cinnabar); }
.ud-title { font: 700 clamp(1.6rem, 3.2vw, 2.4rem)/1.1 var(--display); letter-spacing: .01em; }
.ud-title .accent { color: var(--cyan); }
.ud-dim { color: var(--text-dim); }
.ud-btn {
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(8, 10, 14, .7);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  padding: 10px 14px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.ud-btn:hover, .ud-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); }
.ud-btn[aria-pressed="true"] { background: var(--cyan); color: var(--ink); }
.han { font-family: var(--han); }

/* Màu nền nền tảng theo từng ứng dụng (lớp chuyển động vẽ đè lên bằng js/nen-ung-dung.js) */
body.ud[data-nen="sao"]   { background: radial-gradient(120% 90% at 75% 10%, #0d1f2c 0%, #070b14 55%, #05060a 100%) fixed; }
body.ud[data-nen="trang"] { background: radial-gradient(110% 90% at 85% 15%, #1c1a2e 0%, #0a0b16 55%, #05060a 100%) fixed; }
body.ud[data-nen="muc"]   { background: radial-gradient(120% 100% at 20% 0%, #1d1710 0%, #0c0a08 55%, #070605 100%) fixed; }
body.ud[data-nen="hao"]   { background: linear-gradient(160deg, #18140c 0%, #0a0907 60%, #060505 100%) fixed; }
body.ud[data-nen="so"]    { background: radial-gradient(120% 100% at 50% 100%, #0b2226 0%, #071012 55%, #050708 100%) fixed; }
body.ud[data-nen="pho"]   { background: linear-gradient(180deg, #120a24 0%, #08071a 50%, #05050c 100%) fixed; }
body.ud[data-nen="song"]  { background: radial-gradient(100% 80% at 15% 50%, #062a2c 0%, #061316 55%, #04080a 100%) fixed; }
body.ud[data-nen="hat"]   { background: radial-gradient(120% 90% at 50% 30%, #0c2420 0%, #07100f 55%, #050707 100%) fixed; }
body.ud[data-nen="luoi"]  { background: linear-gradient(180deg, #0a1714 0%, #070b0a 100%) fixed; }
body.ud[data-nen="gio"]   { background: linear-gradient(180deg, #0b1b2a 0%, #0a1420 45%, #120d12 100%) fixed; }
body.ud[data-nen="luong"] { background: radial-gradient(110% 90% at 50% 50%, #1a0d10 0%, #0a0708 60%, #050505 100%) fixed; }