/* ==========================================================
   Dùng chung cho cả 2 phong cách + màn chọn phong cách.
   Mỗi phong cách có file riêng: theme-formal.css / theme-cute.css
   (chỉ một file được nạp tại một thời điểm — xem <head>).
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* logo monogram tô màu bằng mask — màu do từng theme đặt */
.logo {
  display: block; aspect-ratio: 647 / 531; background: #9B6338;
  -webkit-mask: url(../assets/logo.png) center / contain no-repeat;
          mask: url(../assets/logo.png) center / contain no-repeat;
}

/* ---------- Nút đổi phong cách (trên thanh menu; vị trí do từng theme căn) ---------- */
.theme-switch {
  display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; margin-left: 18px; padding: 0 16px 0 12px;
  border: 1px solid #D9C9AE; border-radius: 999px; background: #fff; color: #2B2420; cursor: pointer; white-space: nowrap;
  font: 600 .88rem/1 'Be Vietnam Pro', system-ui, sans-serif;
}
.theme-switch .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Màn chọn phong cách ---------- */
.chooser { display: none; }
html[data-choose] .chooser { display: flex; }
html[data-choose] body { overflow: hidden; }

.chooser {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  align-items: center; justify-content: center; padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 0, #fff 0, transparent 60%), #FBF7F0;
  color: #2B2420; font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  animation: chooser-in .4s ease both;
}
html.chooser-leaving .chooser { opacity: 0; transition: opacity .3s ease; }

.chooser__inner { position: relative; width: min(100%, 760px); margin: auto; text-align: center; }
.chooser__logo { width: 70px; margin: 0 auto 8px; }
.chooser__names { font: 400 clamp(2.6rem, 9vw, 3.4rem)/1.15 'Alex Brush', cursive; color: #9B6338; }
.chooser__date { margin-top: 2px; font-weight: 600; font-size: .95rem; letter-spacing: .24em; color: #5E534A; }
.chooser__title {
  max-width: 560px; margin: 20px auto 20px;
  font: 600 clamp(1.3rem, 4.4vw, 1.7rem)/1.4 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #2B2420;
}
.chooser__options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chooser__hint { max-width: 520px; margin: 22px auto 0; font-size: .95rem; line-height: 1.5; color: #5E534A; }
.chooser__close {
  position: absolute; top: -10px; right: 0; display: none; place-items: center; width: 48px; height: 48px;
  border: 1px solid #D9C9AE; border-radius: 50%; background: #fff; cursor: pointer;
}
.chooser__close .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html[data-choose="again"] .chooser__close { display: grid; }

.choice-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 14px 22px; border: 1px solid #D9C9AE; border-radius: 20px; background: #fff;
  text-align: center; cursor: pointer;
  box-shadow: 0 14px 34px -22px rgba(43, 36, 32, .45);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.choice-card:hover { transform: translateY(-3px); border-color: #9B6338; box-shadow: 0 22px 40px -22px rgba(43, 36, 32, .55); }
.choice-card:focus-visible { outline: 3px solid #9B6338; outline-offset: 3px; }
.choice-card__name { margin-top: 10px; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.choice-card__desc { font-size: 1rem; line-height: 1.45; color: #5E534A; }
.choice-card__go {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 10px; padding: 0 24px;
  border-radius: 999px; background: #3A2B22; color: #F5EDE0; font-weight: 600;
}
.choice-card[aria-busy="true"] .choice-card__go::after { content: "…"; }
.choice-card__now {
  position: absolute; top: 22px; right: 22px; display: none; padding: 4px 10px; border-radius: 999px;
  background: #3A2B22; color: #F5EDE0; font-size: .78rem; font-weight: 600;
}
html[data-choose="again"] .choice-card[aria-current="true"] .choice-card__now { display: block; }

/* ảnh xem trước nhỏ trong thẻ chọn */
.pv { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; }
.pv--formal { display: grid; place-items: center; background: #F3ECDF; }
.pv__frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70%; height: 78%;
  background: #FBF7F0; border: 1px solid #C9AE80; outline: 1px solid #C9AE80; outline-offset: 4px;
}
.pv__logo { width: 30px; }
.pv__script { margin-top: 4px; font: 400 1.75rem/1.1 'Alex Brush', cursive; color: #9B6338; }
.pv__line { width: 46%; height: 1px; margin: 6px 0; background: #C9AE80; }
.pv__text { font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: #5E534A; }
.pv--cute { background: #FFF7EC radial-gradient(#F3E3CF 1.4px, transparent 1.6px) 0 0 / 14px 14px; }
.pv__blob {
  position: absolute; top: 16%; bottom: 16%; left: 20%; right: 20%;
  background: #F7A58C; border: 2px solid #3B2A23; border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
}
.pv__cat { position: absolute; bottom: 4%; width: 32%; aspect-ratio: 200 / 232; }
.pv__cat--l { left: 12%; }
.pv__cat--r { right: 12%; }
.pv__sticker {
  position: absolute; top: 8%; left: 50%; translate: -50% 0; rotate: -4deg; padding: 4px 10px; white-space: nowrap;
  border: 2px solid #3B2A23; border-radius: 999px; background: #FFD98A; box-shadow: 2px 2px 0 #3B2A23;
  font: 600 .74rem/1.2 'Playpen Sans', cursive; color: #3B2A23;
}

/* Điện thoại: thẻ nằm ngang để thấy cả 2 lựa chọn mà không phải cuộn */
@media (max-width: 560px) {
  .chooser { padding-top: 24px; }
  .chooser__logo { width: 54px; }
  .chooser__title { margin: 14px auto 16px; }
  .chooser__options { grid-template-columns: 1fr; gap: 12px; }
  .choice-card {
    display: grid; grid-template-columns: 116px 1fr; align-items: center; column-gap: 14px; row-gap: 2px;
    padding: 12px; text-align: left;
  }
  .choice-card .pv { grid-row: 1 / span 3; height: 100%; min-height: 132px; aspect-ratio: auto; }
  .choice-card__name { margin-top: 0; font-size: 1.25rem; }
  .choice-card__desc { font-size: .95rem; }
  .choice-card__go { justify-self: start; min-height: 44px; margin-top: 6px; padding: 0 18px; font-size: .95rem; }
  .choice-card__now { top: 10px; right: 10px; }
  .pv__frame { width: 80%; height: 76%; outline-offset: 3px; }
  .pv__logo { width: 20px; }
  .pv__script { font-size: 1rem; }
  .pv__text { font-size: .5rem; letter-spacing: .1em; }
  .pv__blob { left: 14%; right: 14%; }
  .pv__cat { width: 40%; }
  .pv__cat--l { left: 6%; }
  .pv__cat--r { right: 6%; }
  .pv__sticker { padding: 2px 6px; font-size: .55rem; }
  .chooser__hint { margin-top: 16px; font-size: .9rem; }
}

@keyframes chooser-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chooser { animation: none; }
}

/* chữ chỉ dành cho trình đọc màn hình */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }