/* Ý 9 – Con giáp, cung hoàng đạo, chòm sao.
   Mọi hiệu ứng chỉ đổi transform và opacity (trình duyệt vẽ trên GPU nên mượt trên điện thoại). */

.zd-section { margin: 0 0 1.75rem; }
.zd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; }
.zd-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.zd-head h2 i { color: var(--fa-honey); }
.zd-hint { margin: 0; font-size: .82rem; color: var(--fa-muted); }

.zd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
/* Điện thoại: vuốt ngang qua 3 thẻ */
@media (max-width: 767px) {
  .zd-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem 1rem 1rem; margin: 0 -1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .zd-grid::-webkit-scrollbar { display: none; }
  .zd-slot { scroll-snap-align: center; }
}

/* ---------- Thẻ lật ---------- */
.zd-card { all: unset; box-sizing: border-box; display: block; cursor: pointer; perspective: 1000px; border-radius: 22px; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(14px); animation: zd-enter .7s var(--fa-ease) forwards; }
.zd-slot:nth-child(2) .zd-card { animation-delay: .1s; } .zd-slot:nth-child(3) .zd-card { animation-delay: .2s; }
.zd-card:focus-visible { outline: 3px solid var(--fa-honey); outline-offset: 3px; }
.zd-inner { position: relative; display: block; height: 100%; transform-style: preserve-3d; transition: transform .75s var(--fa-ease); }
.zd-card.is-flipped .zd-inner { transform: rotateY(180deg); }
.zd-face { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1rem 1rem 1.1rem; border-radius: 22px;
  border: 1px solid var(--fa-line); box-shadow: var(--fa-shadow); -webkit-backface-visibility: hidden; backface-visibility: hidden; min-height: 300px; }
.zd-front { position: relative; background: radial-gradient(circle at 50% 38%, rgba(255, 214, 120, .55), transparent 58%), var(--fa-surface); }
.zd-back { position: absolute; inset: 0; transform: rotateY(180deg); justify-content: center; gap: .55rem;
  background: linear-gradient(160deg, #FFF6E4, #FFE9CC); }
.zd-card:hover .zd-front { box-shadow: var(--fa-shadow-lg); }

.zd-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--fa-amber-dark); }
.zd-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem; color: var(--fa-ink); line-height: 1.15; }
.zd-name b { font-weight: 600; }
.zd-name small { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: .78rem; color: var(--fa-muted); font-style: italic; }
.zd-sub { font-size: .85rem; color: var(--fa-muted); }
.zd-note { margin-top: .35rem; font-size: .74rem; font-weight: 600; color: var(--fa-amber-dark); background: var(--fa-soft); border-radius: 14px; padding: .2rem .65rem; }
.zd-trait { font-size: .95rem; line-height: 1.5; color: var(--fa-ink); max-width: 26ch; }
.zd-trait.small { font-size: .8rem; color: var(--fa-muted); }
.zd-again { font-size: .72rem; color: var(--fa-muted); margin-top: .2rem; }
.zd-back-art { width: 56px; height: 56px; display: block; flex: none; }
.zd-back-art svg { width: 100%; height: 100%; }

/* ---------- Ý 26: điều thú vị ở mặt sau ---------- */
.zd-slot { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.zd-fact-box { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.zd-fact-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--fa-amber-dark);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--fa-line); border-radius: 999px; padding: .12rem .6rem; }
.zd-fact { font-size: .92rem; max-width: 30ch; }
.zd-count { font-weight: 700; color: var(--fa-amber-dark); }
.zd-fact-box.is-new .zd-fact { animation: zd-fact-in .5s var(--fa-ease); }
.zd-fact-box.is-new .zd-fact-tag { animation: zd-fact-in .5s var(--fa-ease) .05s backwards; }
.zd-card.is-hopping .zd-back-art { animation: zd-wobble .6s var(--fa-ease); }
.zd-card.is-all-seen .zd-fact-tag { background: var(--fa-honey); color: #fff; border-color: transparent; }
.zd-card.is-all-seen .zd-count::after { content: " · hết rồi, giỏi quá!"; }
.zd-c-sky .zd-back .zd-fact-tag { background: rgba(255, 255, 255, .12); border-color: rgba(255, 231, 168, .35); color: #FFD98A; }
.zd-c-sky .zd-back .zd-count { color: #FFD98A; }
.zd-tail-wrap { display: flex; justify-content: center; }
.zd-flipback { font-size: .78rem; font-weight: 600; color: var(--fa-amber-dark); background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: 999px; padding: .25rem .8rem; cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--fa-ease), transform .3s var(--fa-ease), visibility 0s linear .3s; }
.zd-slot.is-flipped .zd-flipback { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--fa-ease), transform .3s var(--fa-ease); }
.zd-flipback:hover { box-shadow: var(--fa-shadow); }
.zd-flipback:focus-visible { outline: 3px solid var(--fa-honey); outline-offset: 2px; }

/* Nền theo nguyên tố của cung */
.zd-c-sign.el-fire  .zd-front { background: radial-gradient(circle at 50% 38%, rgba(255, 168, 120, .5), transparent 58%), var(--fa-surface); }
.zd-c-sign.el-earth .zd-front { background: radial-gradient(circle at 50% 38%, rgba(190, 222, 150, .55), transparent 58%), var(--fa-surface); }
.zd-c-sign.el-air   .zd-front { background: radial-gradient(circle at 50% 38%, rgba(200, 190, 245, .55), transparent 58%), var(--fa-surface); }
.zd-c-sign.el-water .zd-front { background: radial-gradient(circle at 50% 38%, rgba(140, 210, 235, .55), transparent 58%), var(--fa-surface); }

/* Thẻ chòm sao: bầu trời lúc hoàng hôn */
.zd-c-sky .zd-front { background: radial-gradient(circle at 50% 120%, rgba(245, 166, 35, .55), transparent 55%), linear-gradient(180deg, #2B2347 0%, #4A3157 70%, #6E3F4E 100%); border-color: #4A3157; }
.zd-c-sky .zd-front .zd-kicker { color: #FFD98A; }
.zd-c-sky .zd-front .zd-name { color: #FFF6E4; }
.zd-c-sky .zd-front .zd-name small, .zd-c-sky .zd-front .zd-sub { color: #E9D6C4; }
.zd-c-sky .zd-back { background: linear-gradient(160deg, #3A2C55, #5A3A5E); border-color: #4A3157; }
.zd-c-sky .zd-back .zd-kicker { color: #FFD98A; } .zd-c-sky .zd-back .zd-trait { color: #FFF6E4; } .zd-c-sky .zd-back .zd-trait.small, .zd-c-sky .zd-back .zd-again { color: #E9D6C4; }

/* ---------- Khung hình ---------- */
.zd-art { position: relative; display: block; width: 136px; height: 136px; margin: .25rem auto .35rem; }
.zd-art > svg { width: 100%; height: 100%; overflow: visible; }
.zd-hat { position: absolute; width: 38px !important; height: 42px !important; left: 50%; top: -14px; transform: translateX(-10%) rotate(14deg); }

/* Các phần chuyển động trong SVG: lấy tâm theo chính hình đó */
.zd-body, .zd-shadow, .zd-eyes, .zd-ear, .zd-claw, .zd-tail, .zd-beam, .zd-pan, .zd-tongue, .zd-snout, .zd-beak, .zd-mane, .zd-whisker,
.zd-twin, .zd-crown, .zd-flower, .zd-arrow, .zd-jar, .zd-drop, .zd-fishtail, .zd-beard, .zd-star, .zd-dust circle, .zd-comb {
  transform-box: fill-box; transform-origin: center; }

/* Nhún nhảy nhẹ, chớp mắt, vẫy tai */
.zd-body { animation: zd-bob 3.2s ease-in-out infinite; }
.zd-shadow { animation: zd-shadow 3.2s ease-in-out infinite; }
.zd-eyes { animation: zd-blink 4.8s infinite; }
.zd-ear { transform-origin: 50% 90%; animation: zd-wiggle 4.2s ease-in-out infinite; }
.zd-ear.r { animation-delay: -.5s; }
.zd-tongue { transform-origin: 50% 0; animation: zd-tongue 1.6s ease-in-out infinite; }
.zd-snout { animation: zd-sniff 2.4s ease-in-out infinite; }
.zd-beak { animation: zd-sniff 2s ease-in-out infinite; }
.zd-mane, .zd-beard { transform-origin: 50% 0; animation: zd-sway 2.6s ease-in-out infinite; }
.zd-whisker { animation: zd-sway 2.2s ease-in-out infinite; }
.zd-comb { transform-origin: 50% 100%; }

/* Riêng từng cung */
.zd-beam { transform-origin: 50% 20%; animation: zd-balance 3.6s ease-in-out infinite; }
.zd-claw.l { transform-origin: 100% 100%; animation: zd-snap 1.8s ease-in-out infinite; }
.zd-claw.r { transform-origin: 0 100%; animation: zd-snap-r 1.8s ease-in-out infinite .3s; }
.zd-tail { transform-origin: 0 100%; animation: zd-sway 2.4s ease-in-out infinite; }
.zd-arrow { animation: zd-shoot-arrow 3.2s var(--fa-ease) infinite; }
.zd-orbit { transform-box: view-box; transform-origin: 60px 60px; animation: zd-spin 16s linear infinite; }
.zd-mane-ring { transform-box: view-box; transform-origin: 60px 60px; animation: zd-spin 24s linear infinite; }
.zd-twin.l { animation: zd-bob 2.4s ease-in-out infinite; } .zd-twin.r { animation: zd-bob 2.4s ease-in-out infinite -1.2s; }
.zd-crown, .zd-flower { animation: zd-sway 3s ease-in-out infinite; }
.zd-jar { transform-origin: 30% 90%; animation: zd-pour 3.6s ease-in-out infinite; }
.zd-drop { animation: zd-drop 1.8s ease-in infinite; } .zd-drop.d2 { animation-delay: .6s; } .zd-drop.d3 { animation-delay: 1.2s; }
.zd-fishtail { transform-origin: 0 50%; animation: zd-sway 2s ease-in-out infinite; }

/* Rê chuột hoặc chạm: nhảy lên và lấp lánh */
.zd-card:hover .zd-front .zd-body, .zd-card:focus-visible .zd-front .zd-body, .zd-card.is-hopping .zd-front .zd-body { animation: zd-hop .8s var(--fa-ease); }
.zd-sparkles svg { position: absolute; width: 18px; height: 18px; fill: #FFC93C; opacity: 0; transform: scale(.3); animation: zd-sparkle 4.5s ease-in-out infinite; }
.zd-sparkles svg:nth-child(1) { top: 4%; right: 2%; }
.zd-sparkles svg:nth-child(2) { top: 40%; left: -6%; width: 13px; height: 13px; animation-delay: 1.5s; }
.zd-sparkles svg:nth-child(3) { bottom: 8%; right: -4%; width: 11px; height: 11px; animation-delay: 3s; }
.zd-card:hover .zd-sparkles svg, .zd-card.is-hopping .zd-sparkles svg { animation: zd-sparkle-pop .9s var(--fa-ease); }
.zd-card:hover .zd-sparkles svg:nth-child(2), .zd-card.is-hopping .zd-sparkles svg:nth-child(2) { animation-delay: .1s; }
.zd-card:hover .zd-sparkles svg:nth-child(3), .zd-card.is-hopping .zd-sparkles svg:nth-child(3) { animation-delay: .2s; }

/* Sinh nhật hôm nay: con giáp đội mũ và nhảy vui hơn */
.zd-c-animal.is-party .zd-front .zd-body { animation: zd-hop 1.4s var(--fa-ease) infinite; }

/* ---------- Chòm sao ---------- */
.zd-sky { overflow: visible; }
.zd-star { animation: zd-twinkle 2.8s ease-in-out infinite; }
.zd-lines line { opacity: 0; animation: zd-line-in .7s ease-out forwards .35s; }
/* Lệch nhịp từng sao, từng nét (không dùng style="" vì CSP của app chặn style nội tuyến) */
.zd-star:nth-child(1) { animation-delay: -0.00s; } .zd-lines line:nth-child(1) { animation-delay: 0.35s; }
.zd-star:nth-child(2) { animation-delay: -0.43s; } .zd-lines line:nth-child(2) { animation-delay: 0.51s; }
.zd-star:nth-child(3) { animation-delay: -0.86s; } .zd-lines line:nth-child(3) { animation-delay: 0.67s; }
.zd-star:nth-child(4) { animation-delay: -1.29s; } .zd-lines line:nth-child(4) { animation-delay: 0.83s; }
.zd-star:nth-child(5) { animation-delay: -1.72s; } .zd-lines line:nth-child(5) { animation-delay: 0.99s; }
.zd-star:nth-child(6) { animation-delay: -2.15s; } .zd-lines line:nth-child(6) { animation-delay: 1.15s; }
.zd-star:nth-child(7) { animation-delay: -2.58s; } .zd-lines line:nth-child(7) { animation-delay: 1.31s; }
.zd-star:nth-child(8) { animation-delay: -3.01s; } .zd-lines line:nth-child(8) { animation-delay: 1.47s; }
.zd-star:nth-child(9) { animation-delay: -3.44s; } .zd-lines line:nth-child(9) { animation-delay: 1.63s; }
.zd-star:nth-child(10) { animation-delay: -3.87s; } .zd-lines line:nth-child(10) { animation-delay: 1.79s; }
.zd-star:nth-child(11) { animation-delay: -4.30s; } .zd-lines line:nth-child(11) { animation-delay: 1.95s; }
.zd-star:nth-child(12) { animation-delay: -4.73s; } .zd-lines line:nth-child(12) { animation-delay: 2.11s; }
.zd-star:nth-child(13) { animation-delay: -5.16s; } .zd-lines line:nth-child(13) { animation-delay: 2.27s; }
.zd-dust circle { animation: zd-twinkle 3.4s ease-in-out infinite; }
.zd-dust circle:nth-child(2n) { animation-delay: -1.2s; } .zd-dust circle:nth-child(3n) { animation-delay: -2.1s; }
.zd-shoot { opacity: 0; animation: zd-shooting 7s ease-in infinite 2s; }
.zd-c-sky:hover .zd-star { animation-duration: 1.2s; }

/* ---------- Hình nhỏ trong ô sinh nhật ---------- */
.zd-mini { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-left: .15rem; border-radius: 50%;
  background: #FFF6E4; box-shadow: 0 0 0 1.5px var(--fa-line); }
.zd-mini svg { width: 100%; height: 100%; display: block; }
.zd-mini .zd-shadow { display: none; }
.zd-mini .zd-body, .zd-mini .zd-ear, .zd-mini .zd-tongue, .zd-mini .zd-snout, .zd-mini .zd-beak, .zd-mini .zd-mane, .zd-mini .zd-whisker, .zd-mini .zd-beard { animation: none; }
a:hover .zd-mini, a:focus-visible .zd-mini { animation: zd-wobble .6s var(--fa-ease); }

/* ---------- Khung hình chuyển động ---------- */
@keyframes zd-enter { to { opacity: 1; transform: none; } }
@keyframes zd-fact-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes zd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes zd-shadow { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.86); opacity: .09; } }
@keyframes zd-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@keyframes zd-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } }
@keyframes zd-tongue { 0%, 60%, 100% { transform: scaleY(1); } 75% { transform: scaleY(.55); } }
@keyframes zd-sniff { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07, .94); } }
@keyframes zd-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes zd-balance { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes zd-snap { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(4deg); } }
@keyframes zd-snap-r { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-4deg); } }
@keyframes zd-shoot-arrow { 0%, 30% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(-7px); opacity: 1; }
  60% { transform: translateX(26px); opacity: 0; } 61% { transform: translateX(-10px); opacity: 0; } 80%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes zd-spin { to { transform: rotate(360deg); } }
@keyframes zd-pour { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes zd-drop { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes zd-hop { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(2px) scale(1.06, .92); } 50% { transform: translateY(-16px) scale(.96, 1.05); }
  75% { transform: translateY(1px) scale(1.04, .96); } 100% { transform: translateY(0) scale(1); } }
@keyframes zd-sparkle { 0%, 72%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } 92% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes zd-sparkle-pop { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.25) rotate(60deg); } 100% { opacity: 0; transform: scale(.5) rotate(120deg); } }
@keyframes zd-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.78); } }
@keyframes zd-line-in { to { opacity: .8; } }
@keyframes zd-shooting { 0%, 86% { opacity: 0; transform: translate(0, 0); } 89% { opacity: 1; } 100% { opacity: 0; transform: translate(-46px, 14px); } }
@keyframes zd-wobble { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } }

/* Người dùng bật "giảm chuyển động": đứng yên hết, vẫn lật thẻ được (không xoay) */
@media (prefers-reduced-motion: reduce) {
  .zd-section *, .zd-mini, .zd-mini * { animation: none !important; transition: none !important; }
  .zd-card { opacity: 1; transform: none; }
  .zd-lines line { opacity: .8; }
  .zd-shoot, .zd-sparkles svg { opacity: 0; }
  .zd-slot.is-flipped .zd-flipback { transform: none; }
  .zd-card.is-flipped .zd-inner { transform: none; }
  .zd-card.is-flipped .zd-front { visibility: hidden; }
  .zd-card.is-flipped .zd-back { transform: none; }
}