/* ==========================================================================
   Tàu Hũ Tươi Phúc An — home.css
   Bổ sung cho lần làm mới giao diện (Premium Vietnamese Dessert × Modern Saigon):
   nút "Đặt ngay" trên header, dải hình "ngon mắt", timeline câu chuyện,
   khu cảm nhận khách hàng, thanh CTA dính đáy trên mobile.
   Nạp SAU responsive.css. Chỉ dùng ở index.html.
   ========================================================================== */

/* Eyebrow đổi sang xanh Phúc An cho đồng bộ hệ màu (bớt tông teal cũ) +
   luôn nằm trên 1 dòng riêng phía trên tiêu đề (không lọt cạnh h2). */
.section__eyebrow,
[data-theme='dark'] .section__eyebrow {
  color: var(--color-primary);
}

.section__head .section__eyebrow {
  display: block;
}

.btn--lg {
  padding: 15px 30px;
  font-size: 1rem;
}

/* ---------- Header: nút "Đặt ngay" (desktop) ---------- */
.header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .header__cta {
    display: inline-flex;
    padding: 10px 22px;
    font-size: 0.9rem;
  }
}

/* Header co gọn khi cuộn */
.site-header.is-scrolled .logo-badge img {
  height: 42px;
  transition: height var(--transition-base);
}

@media (min-width: 1024px) {
  .site-header.is-scrolled .logo-badge img {
    height: 46px;
  }
}

/* ---------- Dải hình "ngon mắt" ---------- */
.food-strip {
  padding-block: var(--section-padding-y);
}

.food-strip__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}

.food-strip__media {
  margin: 0;
  aspect-ratio: 4 / 3;
}

.food-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.food-strip__body {
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 4px);
}

.food-strip__body h2 {
  margin-bottom: var(--space-xs);
}

.food-strip__body p {
  margin-bottom: 0;
  font-size: 1rem;
  max-width: 46ch;
}

.food-strip__note {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0;
  list-style: none;
}

.food-strip__note li {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .food-strip__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
  }

  .food-strip__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }
}

/* ---------- Timeline trong Câu chuyện ---------- */
.story__timeline {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

.story__timeline li {
  position: relative;
  padding-left: 60px;
  min-height: 30px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.story__timeline li strong {
  display: block;
  color: var(--color-heading);
  font-family: var(--font-heading);
}

.story__timeline li::before {
  content: attr(data-year);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.story__timeline li::after {
  content: '';
  position: absolute;
  left: 46px;
  top: 4px;
  bottom: -14px;
  width: 2px;
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.story__timeline li:last-child::after {
  display: none;
}

/* ---------- Cảm nhận khách hàng ---------- */
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 980px;
  margin-inline: auto;
}

.review-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.review-card__stars {
  color: var(--color-gold);
  letter-spacing: 3px;
  font-size: 0.95rem;
}

.review-card__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-heading);
}

.review-card__author {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.reviews__empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

.reviews__empty .btn {
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  .reviews__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- CTA band: nút nổi bật (kem trên nền xanh) ---------- */
.cta-band__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.cta-band .btn--primary {
  background: var(--color-bg);
  color: var(--color-primary);
}

.cta-band .btn--primary:hover,
.cta-band .btn--primary:focus-visible {
  background: #fff;
  filter: none;
}

/* ---------- Thanh CTA dính đáy màn hình (chỉ mobile) ---------- */
.home-stickybar {
  display: none;
}

@media (max-width: 767px) {
  .home-stickybar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--color-surface-rgb), 0.94);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid var(--color-border);
  }

  .home-stickybar__order {
    flex: 1 1 auto;
  }

  .home-stickybar__chat {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-stickybar__chat svg {
    width: 24px;
    height: 24px;
  }

  body.has-sticky-cta {
    padding-bottom: 76px;
  }

  body.has-sticky-cta .chat-fab {
    display: none;
  }

  body.has-sticky-cta .theme-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}