/* ---------- màn giới thiệu ----------
   Hai ảnh nền: intro.webp (dọc 9:16, 1080 x 1920) cho điện thoại,
   intro-pc.webp (ngang 16:9, 1920 x 1080) cho màn hình ngang. Ảnh phủ kín màn hình (cover). */
.intro-layer {
  position: fixed; inset: 0; z-index: 5;
  background: #ffffff url("../intro.webp") center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}
@media (orientation: landscape) {
  .intro-layer { background-image: url("../intro-pc.webp"); }
}
.intro-layer > * { max-width: 560px; }
.action.start.alt { background: #fff; color: var(--ink); border: 3px solid var(--sky-deep); box-shadow: 0 6px 0 var(--sky-deep); }
.login { width: min(420px, 100%); display: grid; gap: 14px; background: rgba(255, 255, 255, .92); border-radius: 22px; padding: 18px; }
.login label { display: grid; gap: 8px; text-align: left; font-weight: 800; font-size: 18px; color: var(--ink); }
.login input { font: inherit; font-size: 22px; padding: 12px 14px; border: 3px solid var(--sky-deep); border-radius: 14px; width: 100%; box-sizing: border-box; }
.login-msg { min-height: 22px; font-weight: 700; color: var(--bad); }
.login .action { width: 100%; }
.save-note { font-size: 15px; color: var(--ink-soft); }
.intro-layer h1 { font-size: clamp(34px, 9.5vw, 52px); color: var(--ink); text-wrap: balance; text-shadow: 0 2px 0 rgba(255, 255, 255, .85); }
.intro-layer .action.start { width: min(320px, 100%); }
.snowman { width: 64px; height: 76px; }
.action.start { min-height: 68px; font-size: 28px; background: var(--btn-blue); box-shadow: 0 6px 0 #234f95; }
.home-head .snowman { flex: none; }