/* =========================================================
   Wici Flower — nền tảng thiết kế dùng chung (trang chủ + các trang Flower).
   Token màu/chữ, tiêu đề đánh số, nút, chip, khối nền tối, CTA cuối, cánh hoa rơi.
   Trang chủ: <div class="wf-home">  ·  Trang khác: <div class="wf-page">
   ========================================================= */
.wf-home, .wf-page {
  --ink: #241f1c;
  --ink-soft: #6b625c;
  --paper: #fbf7f1;
  --cream: #f4ece1;
  --blush: #f5e1dc;
  --rose: #b4596c;
  --rose-deep: #93405a;
  --sage: #6f7a5f;
  --dark: #2a2224;
  --line: rgba(36, 31, 28, .1);
  --radius: 28px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --serif: var(--wj-font-serif, "Cormorant Garamond", Georgia, serif);
  --sans: var(--wj-font-sans, "Manrope", system-ui, sans-serif);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  color: var(--ink);
}

/* ---------- Typography ---------- */
.wf-num, .wf-kicker {
  margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--rose-deep);
}
.wf-h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 4rem);
  line-height: 1.04; letter-spacing: -.01em;
  max-width: 20ch;
  text-wrap: balance;
}
.wf-h2 em, .wf-hero-title em, .wf-final-title em { font-style: italic; color: var(--rose-deep); }
.wf-lead { margin: 1rem 0 0; color: var(--ink-soft); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.7; max-width: 54ch; }
/* Chống chữ mồ côi (1 từ rơi xuống dòng riêng) cho mọi tiêu đề & đoạn — kể cả tên bó hoa/bài viết động.
   Desktop: tiêu đề cân dòng (balance); đoạn văn dùng pretty. Mobile: xem media query bên dưới. */
:is(.wf-home, .wf-page) :is(h1, h2, h3, .wf-ptitle > .wf-line > *, .wf-final-title, .wf-final-title em) { text-wrap: balance; }
:is(.wf-home, .wf-page) :is(p, .wf-lead, blockquote, figcaption, li) { text-wrap: pretty; }
.wf-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .4rem 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 3rem);
}
.wf-head > .wf-num, .wf-head > .wf-h2, .wf-head > .wf-lead { grid-column: 1; }
.wf-head > .wf-more { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.wf-more {
  position: relative; white-space: nowrap;
  color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; padding-bottom: 4px;
}
.wf-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: right; transition: transform .45s var(--ease); }
.wf-more:hover::after { transform: scaleX(1); transform-origin: left; }
.wf-more span { display: inline-block; transition: transform .35s var(--ease); }
.wf-more:hover span { transform: translateX(4px); }

/* ---------- Buttons & chips ---------- */
.wf-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  font: 600 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.wf-btn svg { transition: transform .35s var(--ease); }
.wf-btn:hover svg { transform: translateX(4px); }
.wf-btn-ink { background: var(--ink); color: #fffaf3; box-shadow: 0 16px 32px -18px rgba(36, 31, 28, .7); }
.wf-btn-line { background: transparent; color: var(--ink); border-color: rgba(36, 31, 28, .25); }
.wf-btn-line:hover { border-color: var(--ink); background: #fff; }
.wf-btn-paper { background: #fffaf3; color: var(--ink); }
.wf-btn-fill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rose-deep);
  clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
  transition: clip-path .55s var(--ease);
}
.wf-btn-paper.wf-btn-fill::before { background: #f3d2d6; }
.wf-btn-fill:hover::before { clip-path: circle(150% at var(--bx, 50%) var(--by, 50%)); }
.wf-btn:focus-visible, .wf-chip:focus-visible, .wf-occasion:focus-visible, .wf-collage:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }

.wf-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 .95rem;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7);
  font: 500 .86rem/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .35s var(--spring);
}
.wf-chip:hover { border-color: var(--rose); transform: translateY(-2px); }
.wf-chip-ink { background: var(--ink); color: #fffaf3; border-color: var(--ink); }

/* Cánh hoa rơi */
.wf-petals { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wf-petal {
  position: absolute; top: -40px; left: var(--x);
  width: var(--s); height: calc(var(--s) * .78);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  opacity: 0;
  animation: wfFall var(--t) linear var(--delay) infinite;
}
@keyframes wfFall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0); }
  8% { opacity: var(--o); }
  50% { transform: translate3d(var(--drift), 45vh, 0) rotate(calc(var(--spin) * .5)) rotateY(180deg); }
  92% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * -.4), 95vh, 0) rotate(var(--spin)) rotateY(360deg); }
}

/* ---------- Khối nền tối ---------- */
.wf-dark {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 6rem) var(--pad);
  border-radius: 36px;
  background: radial-gradient(90% 120% at 50% 0%, #4a3438, var(--dark) 70%);
  color: #fffaf3;
}
.wf-dark > *:not(.wf-petals) { position: relative; z-index: 1; }
.wf-dark .wf-num { color: #f0bfc8; }
.wf-dark .wf-h2 em { color: #f0bfc8; }
.wf-dark .wf-more { color: #fffaf3; }

/* ---------- CTA cuối trang ---------- */
.wf-final {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem;
  padding: clamp(3rem, 8vw, 7rem) var(--pad) clamp(2rem, 4vw, 3rem);
  border-radius: 36px;
  background: radial-gradient(80% 120% at 50% 0%, #4a3438, var(--dark) 70%);
  color: #fffaf3;
}
.wf-final > *:not(.wf-petals) { position: relative; z-index: 1; }
.wf-final .wf-num { color: #f0bfc8; margin: 0; }
.wf-final-title { margin: 0; font: 500 clamp(2.4rem, 1.4rem + 4vw, 5.6rem)/1.06 var(--serif); max-width: none; }
.wf-final-title em { color: #f0bfc8; display: block; } /* phần in nghiêng xuống dòng riêng → 2 dòng cân, không gãy giữa cụm */

@media (max-width: 640px) {
  .wf-home, .wf-page { --pad: 1.1rem; }
  .wf-head { grid-template-columns: 1fr; margin-bottom: 1.1rem; }
  .wf-head > .wf-more { grid-column: 1; grid-row: auto; justify-self: start; font-size: .88rem; }
  .wf-h2 { font-size: 1.85rem; line-height: 1.14; }
  /* Mobile: chữ dàn hết chiều ngang — bỏ giới hạn ch và text-wrap:balance (balance làm dòng nào cũng ngắn) */
  .wf-h2, .wf-lead { max-width: none; }
  /* balance làm dòng nào cũng ngắn → mobile dùng pretty: chữ vẫn dàn full ngang, chỉ tránh 1 từ đứng riêng dòng */
  :is(.wf-home, .wf-page) :is(h1, h2, h3, .wf-ptitle > .wf-line > *, .wf-final-title, .wf-final-title em, .wf-h2, .wf-lead) { text-wrap: pretty; }
  /* Tiêu đề căn giữa ở khối cuối: phần in nghiêng xuống dòng riêng → 2 dòng cân, không kẹt chữ "một" */
  .wf-final-title { max-width: none; line-height: 1.14; } /* đủ chỗ cho dấu tiếng Việt giữa 2 dòng */
  .wf-final-title em { display: block; }
  .wf-num, .wf-kicker { font-size: .66rem; margin-bottom: .6rem; }
  .wf-final { gap: 1.1rem; }
  .wf-dark, .wf-final { border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-petals { display: none; }
  .wf-btn, .wf-chip, .wf-more::after { transition: none !important; }
}