/* image-only detail sections stack flush (brainstorm: "lát cùng section xếp liền không khe") */
.section--flush { padding: 0; }
.img-stack { max-width: var(--max-width); margin: 0 auto; }
.img-stack img,
.detail-section > img {
  display: block;
  width: 100%;
  height: auto;
}

/* detail column — update/package/d03-d10/bonus/d11 keep their original dark
   styling, but confined to the centered 860px column (page bg is white) */
.detail-column {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--bg-2);
}

/* text headline at the top of the detail column (replaces the beginner
   "세팅 가이드가 없네" image) — same dark bg as .detail-column */
.detail__hook {
  padding: 48px 16px;
  text-align: center;
  color: #fff;
}
.detail__hook p { font-size: 22px; font-weight: 700; line-height: 1.5; margin: 0; }
.detail__hook p + p { margin-top: 8px; }
@media (min-width: 640px) {
  .detail__hook p { font-size: 28px; }
}

/* update banner (thay early-bird gốc) */
.update__topbar {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.update__card {
  margin: 24px auto 0;
  max-width: 640px;
  background: linear-gradient(135deg, var(--update-grad-start), var(--update-grad-end));
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  color: #fff;
}
.update__card p { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
.update__card p:last-child { margin-bottom: 0; font-weight: 700; color: var(--yellow); }

/* package strip */
.package { background: var(--package-navy); }
.package__title { text-align: center; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 24px; }
/* minmax(0, 1fr) avoids grid blowout — without it, long Korean labels refuse to
   shrink below their content width and overflow the 2-col mobile layout */
.package__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) {
  .package__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.package__item {
  min-width: 0; /* grid items default to a content-based min-width, which blows out narrow 2-col mobile rows */
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* deliverables list appended after detail-10 image stack */
.deliverables { background: var(--bg-2); padding: 40px 20px; }
.deliverables__title { text-align: center; font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.deliverables__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  counter-reset: item;
}
.deliverables__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  color: #fff;
}
.deliverables__list li::before {
  counter-increment: item;
  content: counter(item) ".";
  color: var(--cyan);
  font-weight: 800;
  flex-shrink: 0;
}

/* bonus note (thay thẻ sự kiện bị cắt) */
.bonus { background: var(--bg-2); text-align: center; }
.bonus__note {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--cyan);
  border-radius: 14px;
  padding: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #fff;
}

/* reviews — white list, like the original */
.reviews { background: #fff; }
.reviews__title { text-align: left; font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.reviews__intro { margin: -10px 0 20px; font-size: 14px; color: var(--text-muted); }
.reviews-list { display: flex; flex-direction: column; }
.review-card { padding: 18px 0; border-bottom: 1px solid #eee; }
.review-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.review-card__author { font-size: 13px; color: var(--text-muted); }
.review-stars { color: var(--star); font-size: 14px; letter-spacing: 1px; }
.review-card__text { font-size: 14px; line-height: 1.6; color: #333; white-space: pre-line; }
.review-card__images { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.review-card__images img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; display: block; }

/* faq */
.faq { background: var(--faq-bg); color: #111; }
.faq__title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 24px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border-radius: 12px; overflow: hidden; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 15px;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q."; color: var(--red); font-weight: 800; flex-shrink: 0; }
.faq-item p { padding: 0 18px 18px 40px; font-size: 14px; line-height: 1.6; color: #333; }

/* final CTA — white, like the original */
.final { background: #fff; text-align: center; }
.final__title { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.final__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.contact { margin-top: 28px; font-size: 14px; color: var(--text-muted); }
.contact a { color: var(--purple); text-decoration: underline; }

/* footer */
.site-footer { background: #000; color: var(--text-muted); font-size: 12px; line-height: 1.7; padding: 32px 0; text-align: center; }
.site-footer p { margin-bottom: 8px; }
.site-footer p:last-child { margin-bottom: 0; }