/* ==========================================================================
   Design system — xem CLAUDE.md mục 4.
   Mọi màu / khoảng cách / bo góc đều lấy từ đây, không hardcode ở nơi khác.
   ========================================================================== */

:root {
  /* Nhấn — cánh hoa sao nhái hồng */
  --accent:        #D6436E;
  --accent-hover:  #B8355C;
  --accent-soft:   #FDF2F5;
  --accent-line:   #F3CBD8;

  /* Phụ — dùng rất tiết chế */
  --gold:          #F0B429;
  --leaf:          #4A7C59;

  /* Trung tính */
  --ink:           #1A1A1A;
  --body:          #4A4A4A;
  --muted:         #8A8A8A;
  --border:        #E8E4E2;
  --surface:       #FAF8F7;
  --white:         #FFFFFF;

  /* Lỗi form — đỏ duy nhất được phép dùng */
  --error:         #C0392B;

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* Bo góc */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Layout */
  --container: 1120px;
  --header-h: 64px;

  /* Đổ bóng — chỉ cho phần tử nổi */
  --shadow-float: 0 -1px 12px rgba(26, 26, 26, 0.08);
  --shadow-pop:   0 4px 20px rgba(26, 26, 26, 0.10);

  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
}

h1, h2, h3 {
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

p {
  max-width: 65ch;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  padding-block: 56px;
}

.section--surface { background: var(--surface); }
.section--soft    { background: var(--accent-soft); }

.section__head {
  max-width: 640px;
  margin-bottom: var(--sp-8);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center p { margin-inline: auto; }

.section__lead {
  margin-top: var(--sp-3);
  color: var(--body);
}

.eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (min-width: 768px) {
  .section { padding-block: 96px; }
  .container { padding-inline: 24px; }
}

/* ==========================================================================
   Nút
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
}

.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--white);
}

.btn--ghost:hover { border-color: var(--ink); }

.btn--sm {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

.btn--block { width: 100%; }

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.logo svg { flex: none; }

.header__nav {
  display: none;
  gap: var(--sp-6);
}

.header__nav a {
  font-size: 0.9375rem;
  color: var(--body);
  transition: color 0.2s ease;
}

.header__nav a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .header__nav { display: flex; }
}

/* ==========================================================================
   Hero kiểu landing bán hàng (.promo)

   Đây là khối DUY NHẤT trong trang được phép dùng màu đậm và nền gradient.
   Phần còn lại của trang giữ nguyên quy tắc 90% trung tính ở mục 4.2 CLAUDE.md.
   ========================================================================== */

.promo {
  --promo-deep: #8E2149;   /* hồng đậm — nền thanh giá */
  --promo-gold: #FFD84D;   /* vàng — countdown, nhấn giá */

  padding-block: var(--sp-6) var(--sp-12);
}

.promo__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

/* --- Carousel ảnh --- */

.promo__media {
  position: relative;
}

.promo__slides {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Ảnh giữ đúng tỉ lệ gốc, không cắt. Tỉ lệ lấy từ width/height trong HTML
   nên trang không bị nhảy trong lúc ảnh đang tải. */
.promo__slides img {
  width: 100%;
  height: auto;
}

.promo__slides img[hidden] { display: none; }

.promo__nav {
  position: absolute;
  top: calc(50% - 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  transition: background-color 0.2s ease;
}

.promo__nav:hover { background: var(--white); }
.promo__nav--prev { left: var(--sp-3); }
.promo__nav--next { right: var(--sp-3); }

.promo__thumbs {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--sp-1);
}

.promo__thumb {
  flex: none;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.promo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo__thumb[aria-current='true'] { border-color: var(--accent); }

/* --- Thanh giá + countdown --- */

.promo__bar {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.promo__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: var(--promo-deep);
  color: var(--white);
}

.promo__price strong {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--promo-gold);
}

.promo__price strong span { font-size: 1.25rem; }

.promo__price s {
  font-size: 1.125rem;
  font-weight: 600;
  opacity: 0.65;
}

.promo__price em {
  font-style: normal;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.promo__freeship {
  flex-basis: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

/* Nhấp nháy tạo cảm giác gấp — shop yêu cầu.
   CHỈ nháy phần chữ số, KHÔNG nháy nền khung (shop đã chốt).
   Người dùng bật "giảm chuyển động" trong hệ điều hành sẽ không thấy nháy,
   nhờ rule prefers-reduced-motion trong reset.css. */
@keyframes blink-text {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.promo__timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: var(--promo-gold);
  color: #4A2A00;
}

.promo__timer-top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.promo__timer-val {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  animation: blink-text 1.1s ease-in-out infinite;
}

/* --- Nội dung --- */

.promo__title {
  margin-top: var(--sp-6);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
}

.promo__title span {
  display: block;
  margin-top: var(--sp-2);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--accent);
}

.promo__social {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
  color: var(--body);
}

.promo__social svg {
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}

.promo__social strong { color: var(--ink); }

.promo__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.promo__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.promo__trust svg { flex: none; color: var(--leaf); }

.promo__deals {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
}

.promo__deals li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: 0.9375rem;
}

.promo__deals li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.promo__deals b { color: var(--ink); }

.promo__deals s {
  margin-left: var(--sp-1);
  color: var(--muted);
}

.promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.promo__cta {
  flex: 1;
  min-width: 200px;
  background: var(--accent);
  color: var(--white);
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.promo__cta:hover { background: var(--accent-hover); }

@media (min-width: 900px) {
  .promo { padding-block: var(--sp-12) var(--sp-16); }

  .promo__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-12);
  }

  .promo__bar { grid-template-columns: 1fr auto; }

  .promo__timer {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    justify-content: center;
  }

  .promo__cta { flex: none; }
}

/* ==========================================================================
   Thanh tin cậy
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-4);
}

.fact__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.fact__label {
  margin-top: var(--sp-1);
  font-size: 0.875rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact__value { font-size: 1.75rem; }
}

/* ==========================================================================
   Card lợi ích
   ========================================================================== */

.cards {
  display: grid;
  gap: var(--sp-4);
}

.card {
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.card__icon {
  margin-bottom: var(--sp-4);
  color: var(--ink);
}

.card h3 { margin-bottom: var(--sp-2); }

.card p { font-size: 0.9375rem; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Combo giá
   ========================================================================== */

.plans {
  display: grid;
  gap: var(--sp-4);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

.plan:hover { border-color: var(--muted); }

/* Gói được chọn + gói phổ biến: dùng viền màu nhấn, KHÔNG dùng badge đỏ chói */
.plan--featured { border-color: var(--accent-line); }

.plan.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plan__tag {
  position: absolute;
  top: -10px;
  left: var(--sp-6);
  padding: 2px 10px;
  background: var(--white);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

.plan__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.plan__qty {
  margin-top: var(--sp-1);
  font-size: 0.875rem;
  color: var(--muted);
}

.plan__price {
  margin-top: var(--sp-4);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

/* Giá niêm yết gạch ngang, ngay dưới giá bán */
.plan__was {
  margin-top: var(--sp-1);
  font-size: 1rem;
  color: var(--muted);
}

.plan__desc {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--muted);
}

.plan__perks {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
}

.plan__perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.plan__perks svg {
  flex: none;
  margin-top: 5px;
  color: var(--leaf);
}

.plan__pick {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

.plan.is-selected .plan__pick::before { content: '✓ Đã chọn'; }
.plan:not(.is-selected) .plan__pick::before { content: 'Chọn gói này'; }

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

/* Dòng "cần số lượng lớn hơn / lấy sỉ" dưới bảng giá */
.plans__note {
  max-width: none;
  margin-top: var(--sp-8);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--muted);
}

.plans__note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plans__note a:hover { color: var(--accent-hover); }

/* ==========================================================================
   Các bước gieo trồng
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--sp-8);
  max-width: 720px;
}

.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-4);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  font-weight: 600;
  color: var(--accent);
}

.step h3 { margin-bottom: var(--sp-1); }

.step p { font-size: 0.9375rem; }

/* ==========================================================================
   Thư viện ảnh
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* Thư viện cũng giữ tỉ lệ gốc — align-self: start để ảnh thấp hơn
   không bị kéo giãn cho bằng ảnh cao nhất cùng hàng. */
.gallery img {
  width: 100%;
  height: auto;
  align-self: start;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}

/* ==========================================================================
   Đánh giá
   ========================================================================== */

.reviews {
  display: grid;
  gap: var(--sp-4);
}

.review {
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
}

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

.review p {
  font-size: 0.9375rem;
  margin-bottom: var(--sp-4);
}

.review__by {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.review__meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

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

/* ==========================================================================
   Bảng thông số
   ========================================================================== */

.specs {
  max-width: 720px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.specs th,
.specs td {
  padding: var(--sp-4) var(--sp-6);
  text-align: left;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.specs tr:last-child th,
.specs tr:last-child td { border-bottom: 0; }

.specs th {
  width: 40%;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}

/* ==========================================================================
   Ưu đãi + countdown (tiết chế: chữ đen, viền mảnh, không nhấp nháy)
   ========================================================================== */

.offer {
  display: none; /* JS bật lên nếu ưu đãi còn hạn — xem main.js */
  text-align: center;
}

.offer.is-active { display: block; }

.countdown {
  display: inline-flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.countdown__unit {
  min-width: 72px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.countdown__num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  animation: blink-text 1.1s ease-in-out infinite;
}

.countdown__label {
  font-size: 0.75rem;
  color: var(--muted);
}

.offer__note {
  margin: var(--sp-4) auto 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ==========================================================================
   Form đặt hàng
   ========================================================================== */

.order {
  max-width: 640px;
  margin-inline: auto;
}

.form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.field .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem; /* không nhỏ hơn 16px để iOS không tự zoom */
  transition: border-color 0.2s ease;
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field select:disabled {
  background: var(--surface);
  color: var(--muted);
  cursor: not-allowed;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea {
  border-color: var(--error);
}

.field__error {
  display: none;
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--error);
}

.field[data-invalid='true'] .field__error { display: block; }

.field__hint {
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Ô số lượng + đơn vị (lạng / kg) đứng cạnh nhau */
.qty {
  display: flex;
  gap: var(--sp-3);
}

.qty input {
  flex: 1;
  min-width: 0;
}

.qty select {
  flex: none;
  width: 104px;
}

.form__row {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .form { padding: var(--sp-8); }
  .form__row { grid-template-columns: 1fr 1fr; }
}

.form__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.form__summary dt { font-size: 0.9375rem; }

.form__summary dd {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.form__summary dd s {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
}

.form__status {
  display: none;
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.form__status.is-visible { display: block; }

.form__status--error {
  background: #FDF0EE;
  border: 1px solid #F0C6C0;
  color: var(--error);
}

.form__foot {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

.form__status a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* Dòng "muốn hỏi thêm trước khi đặt" dưới form */
.order__ask {
  max-width: none;
  margin-top: var(--sp-6);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--muted);
}

.order__ask a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order__ask a:hover { color: var(--accent-hover); }

.success a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Khối xác nhận sau khi gửi đơn thành công */
.success {
  display: none;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
}

.success.is-visible { display: block; }

.success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-6);
  border: 1px solid var(--leaf);
  border-radius: 50%;
  color: var(--leaf);
}

.success p {
  margin: var(--sp-3) auto 0;
  max-width: 44ch;
}

/* ==========================================================================
   Cam kết chất lượng & dịch vụ
   ========================================================================== */

.pledges {
  display: grid;
  gap: var(--sp-4);
  max-width: 860px;
  margin-inline: auto;
}

.pledge {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.pledge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
}

.pledge__body h3 {
  margin-bottom: var(--sp-3);
}

.pledge__points {
  display: grid;
  gap: var(--sp-2);
}

.pledge__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.9375rem;
}

.pledge__points svg {
  flex: none;
  margin-top: 5px;
  color: var(--leaf);
}

@media (min-width: 640px) {
  .pledge {
    grid-template-columns: 72px 1fr;
    gap: var(--sp-6);
    padding: var(--sp-8);
  }
  .pledge__icon { width: 72px; height: 72px; }
}

/* ==========================================================================
   Khối "còn thắc mắc → nhắn tin Page"
   ========================================================================== */

.ask {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.ask p {
  margin: var(--sp-4) auto 0;
}

.ask__btn {
  margin-top: var(--sp-8);
}

.ask__btn svg { flex: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding-block: var(--sp-16) var(--sp-8);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
}

.footer h3 {
  font-size: 0.9375rem;
  margin-bottom: var(--sp-3);
}

.footer p,
.footer li {
  font-size: 0.9375rem;
}

.footer li + li { margin-top: var(--sp-2); }

.footer a:hover { color: var(--accent); }

/* Nút nhắn tin Messenger ở phần liên hệ */
.footer__cta {
  margin-block: var(--sp-4);
}

.footer__cta svg {
  flex: none;
  color: var(--accent);
}

.footer__bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ==========================================================================
   Sticky CTA mobile
   ========================================================================== */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}

.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__price {
  flex: 1;
  min-width: 0;
}

.sticky-cta__price strong {
  display: block;
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.2;
}

.sticky-cta__price span {
  font-size: 0.75rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

/* Chừa chỗ cho thanh CTA để nó không che nội dung cuối trang */
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Mặc định nội dung LUÔN hiện. Hiệu ứng chỉ bật khi <html> có .js-reveal —
   class này do đoạn script nhỏ trong <head> thêm vào, chỉ khi trình duyệt hỗ trợ
   IntersectionObserver và người dùng không tắt chuyển động.
   Nhờ vậy JS hỏng cũng không làm mất nội dung. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}