:root {
  --ivory: 15 20% 96%; --powder: 15 18% 87%; --nude: 18 20% 72%;
  --taupe: 17 14% 48%; --mocha: 14 30% 28%; --espresso: 15 30% 13%;
  --accent: 340 25% 78%; --border: 18 18% 85%; --muted-fg: 15 12% 50%;
  /* Sao đánh giá: --gold trên nền sáng, --gold-soft trên video tối của hero. */
  --gold: 29 45% 46%; --gold-soft: 37 60% 76%;
}
* { box-sizing: border-box; margin: 0; }
img { max-width: 100%; height: auto; } /* thuộc tính height="" chỉ để giữ chỗ, không ép chiều cao */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: hsl(var(--ivory)); color: hsl(var(--espresso));
  font-family: 'Inter', system-ui, sans-serif; font-weight: 300;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.kicker {
  text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
  font-weight: 500; color: hsl(var(--taupe));
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 2rem; border-radius: 3px; min-height: 48px; border: 1px solid transparent;
  font: 500 .8rem/1 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.btn-primary:hover { background: hsl(var(--mocha)); }
.btn-accent { background: hsl(var(--accent)); color: hsl(var(--espresso)); }
.btn-accent:hover { background: hsl(340 25% 71%); }
.btn-outline { border-color: hsl(var(--ivory) / .6); color: hsl(var(--ivory)); }
.btn-outline:hover { background: hsl(var(--ivory) / .12); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}