/* ── HERO ── */
.hero { position: relative; min-height: 100vh; background: var(--paper); border-bottom: var(--b); display: flex; align-items: center; overflow: hidden; }
.pond-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(2rem,8vw,6rem) clamp(1rem,5vw,3rem); width: 100%; }
.hero-eyebrow { font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }
.hero-h1 { font-size: clamp(36px,5.5vw,66px); color: var(--ink); max-width: 680px; margin-bottom: 24px; }
.hero-h1 em { font-style: normal; color: var(--red); }
.hero-sub { font-size: clamp(15px,2vw,18px); color: var(--green); max-width: 460px; margin-bottom: 40px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── SECTION 2: INTRO ── */
.s-intro { background: var(--green); border-bottom: var(--b); }
.s-intro .label { color: rgba(242,232,213,.55); }
.s-intro .sec-title { color: var(--paper); }
.intro-body { font-size: clamp(15px,2vw,17px); color: rgba(242,232,213,.82); max-width: 620px; margin-bottom: 40px; line-height: 1.75; }

/* ── SECTION 3: PRODUCTS ── */
.s-products { background: var(--paper); border-bottom: var(--b); }
.s-products .label { color: var(--green); }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; margin-top: 40px; }
.p-card { border: var(--b); background: var(--paper); transition: border-color 150ms; cursor: pointer; }
.p-card:hover { border-color: var(--red); }
.p-img { aspect-ratio: 1; border-bottom: var(--b); background: var(--paper); display: flex; align-items: center; justify-content: center; }
.p-img svg { width: 58%; height: 58%; }
.p-info { padding: 28px; }
.p-name { font-family: 'Paytone One', sans-serif; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.p-desc { font-size: 13px; color: var(--green); margin-bottom: 12px; line-height: 1.55; }
.p-price { font-weight: 600; font-size: 14px; color: var(--red); margin-bottom: 20px; }
.btn-card { display: block; width: 100%; text-align: center; background: var(--red); color: var(--paper); border: var(--b); padding: 12px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background 150ms; border-radius: 0; }
.btn-card:hover { background: var(--ink); }

/* ── SECTION 4: INTERLUDE ── */
.s-interlude { background: var(--ink); border-bottom: var(--b); text-align: center; }
.interlude-deco { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.interlude-deco span { display: block; width: 32px; height: 3px; background: var(--yellow); }
.interlude-q { font-size: clamp(22px,3.5vw,40px); color: var(--paper); max-width: 700px; margin: 0 auto 20px; line-height: 1.3; }
.interlude-attr { font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }

/* ── SECTION 5: LÁ BÀI ── */
.s-lucky { background: var(--red); border-bottom: var(--b); text-align: center; }
.s-lucky .label { color: rgba(242,232,213,.6); }
.s-lucky .sec-title { color: var(--paper); }
.lucky-desc { font-size: 15px; color: rgba(242,232,213,.82); max-width: 480px; margin: 0 auto 64px; }
.fan { position: relative; height: 270px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 64px; }
.lcard { position: absolute; width: 118px; height: 196px; border: var(--b); cursor: pointer; transform-origin: bottom center; transition: filter 150ms; }
.lcard:hover { filter: brightness(1.08); }
.lcard:nth-child(1) { transform: rotate(-30deg) translateX(-120px); }
.lcard:nth-child(2) { transform: rotate(-15deg) translateX(-60px); }
.lcard:nth-child(3) { transform: rotate(0deg); }
.lcard:nth-child(4) { transform: rotate(15deg) translateX(60px); }
.lcard:nth-child(5) { transform: rotate(30deg) translateX(120px); }
.lcard:nth-child(1):hover { transform: rotate(-30deg) translateX(-120px) translateY(-18px); }
.lcard:nth-child(2):hover { transform: rotate(-15deg) translateX(-60px) translateY(-18px); }
.lcard:nth-child(3):hover { transform: rotate(0deg) translateY(-18px); }
.lcard:nth-child(4):hover { transform: rotate(15deg) translateX(60px) translateY(-18px); }
.lcard:nth-child(5):hover { transform: rotate(30deg) translateX(120px) translateY(-18px); }
.lcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 420ms; }
.lcard.flipped .lcard-inner { transform: rotateY(180deg); }
.lcard-front, .lcard-back { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; }
.lcard-front { background: var(--paper); }
.lcard-back { background: var(--yellow); transform: rotateY(180deg); }
.lcard-front svg { width: 68%; height: auto; }
.card-label { font-weight: 600; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-top: 8px; text-align: center; }
.card-label.light { color: var(--paper); }
.card-reward { font-family: 'Paytone One', sans-serif; font-size: 15px; color: var(--ink); text-align: center; line-height: 1.3; }
.card-reward-sub { font-size: 10px; font-weight: 500; color: var(--ink); margin-top: 6px; text-align: center; opacity: .7; }
.lucky-box { max-width: 460px; margin: 0 auto; background: rgba(242,232,213,.12); border: 2.5px solid rgba(242,232,213,.35); padding: 28px 36px; }
.lucky-box-title { font-family: 'Paytone One', sans-serif; font-size: 18px; color: var(--paper); margin-bottom: 10px; }
.lucky-box-desc { font-size: 13px; color: rgba(242,232,213,.72); margin-bottom: 20px; }

/* ── SECTION 6: CTA ── */
.s-cta { background: var(--yellow); border-bottom: var(--b); text-align: center; }
.s-cta .label { color: rgba(34,28,20,.55); }
.cta-desc { font-size: 16px; color: rgba(34,28,20,.72); max-width: 460px; margin: 0 auto 40px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── ANIMATIONS ── */
@keyframes swim  { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes swim2 { 0%,100% { transform: translateY(0) rotate(1deg) scaleX(-1); } 50% { transform: translateY(-10px) rotate(-2deg) scaleX(-1); } }
@keyframes swim3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lotusFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes ripple { 0%,100% { opacity:.25; } 50% { opacity:.12; } }
.f1  { animation: swim       9s  ease-in-out infinite; }
.f2  { animation: swim2     12s  ease-in-out infinite; animation-delay: -5s; }
.f3  { animation: swim3     14s  ease-in-out infinite; animation-delay: -8s; }
.la  { animation: lotusFloat 8s  ease-in-out infinite; }
.la2 { animation: lotusFloat 11s ease-in-out infinite; animation-delay: -3s; }
.rip { animation: ripple     6s  ease-in-out infinite; }

@media (max-width: 768px) {
  .fan { transform: scale(0.78); transform-origin: bottom center; height: 215px; }
}
@media (max-width: 420px) {
  .fan { transform: scale(0.6); height: 168px; }
}