/* ══════════════════════════════════════════════════════════════════
   THIỆP CƯỚI ONLINE — trang giới thiệu (thiepcuoi.trangkami.com)
   Bảng màu & font lấy nguyên từ thiep.trangkami.com để hai trang là
   MỘT thương hiệu: khách bấm "Tạo thiệp" sang trình soạn không thấy lệch.

   ⚠ CỐ Ý KHÔNG đặt `scroll-behavior: smooth` toàn cục — đặt toàn cục thì
     mọi phép đo scroll khi kiểm thử đều sai (đã trả giá 11/08). Cuộn mượt
     gọi tại từng chỗ bằng scrollIntoView({behavior:'smooth'}).
   ══════════════════════════════════════════════════════════════════ */

:root {
  --kem: #f8f4ed;
  --kem-dam: #efe7d9;
  --kem-sau: #e6dbc8;
  --muc: #2b241d;
  --muc-nhat: #6f6357;
  --vang: #bf9f62;
  --vang-sang: #d9c49a;
  --cat: #cfc4af;
  --trang: #fffdf9;

  --chu-ten: 'Cormorant Garamond', 'Times New Roman', serif;
  --chu-viet: 'Dancing Script', cursive;
  --chu-than: 'Lora', Georgia, serif;

  --khung: 1120px;
  --dem: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kem);
  color: var(--muc);
  font-family: var(--chu-than);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.khung {
  width: 100%;
  max-width: var(--khung);
  margin: 0 auto;
  padding: 0 var(--dem);
}

section { padding: clamp(56px, 9vw, 104px) 0; position: relative; }
.nen-dam { background: var(--kem-dam); }
.nen-sau { background: var(--kem-sau); }

/* ── Tiêu đề chung ─────────────────────────────────────────────── */
.nhan-khoi {
  font-family: var(--chu-than);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vang);
  margin: 0 0 14px;
}
h2.tieu-de {
  font-family: var(--chu-ten);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: .01em;
}
.phu-de {
  color: var(--muc-nhat);
  max-width: 640px;
  margin: 0 0 40px;
  font-size: clamp(16px, 2vw, 18px);
}
.giua { text-align: center; }
.giua .phu-de { margin-left: auto; margin-right: auto; }

.hoa-van {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 0 34px; color: var(--vang);
}
.hoa-van::before, .hoa-van::after {
  content: ''; height: 1px; width: 56px;
  background: linear-gradient(90deg, transparent, var(--cat), transparent);
}

/* ── Nút ───────────────────────────────────────────────────────── */
.nut-chinh, .nut-vien {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--chu-than);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid var(--vang);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.nut-chinh { background: var(--muc); color: var(--kem); border-color: var(--muc); }
.nut-chinh:hover { transform: translateY(-2px); background: #3b322a; }
.nut-vien { background: transparent; color: var(--muc); }
.nut-vien:hover { transform: translateY(-2px); background: rgba(191,159,98,.12); }

/* ══ THANH ĐẦU TRANG ════════════════════════════════════════════ */
header#dinh {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,244,237,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
header#dinh.da-cuon {
  border-bottom-color: var(--kem-sau);
  box-shadow: 0 6px 24px rgba(43,36,29,.05);
}
#dinh .khung {
  display: flex; align-items: center; gap: 20px;
  height: 72px;
}
.hieu {
  font-family: var(--chu-ten);
  font-size: 21px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: auto;
  line-height: 1.15;
}
.hieu small {
  display: block;
  font-family: var(--chu-than);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--vang);
  text-transform: uppercase;
}
nav#menu { display: flex; gap: 28px; }
nav#menu a {
  text-decoration: none; font-size: 15px; color: var(--muc-nhat);
  padding: 4px 0; border-bottom: 1px solid transparent;
}
nav#menu a:hover { color: var(--muc); border-bottom-color: var(--vang); }
#dinh .nut-chinh { padding: 12px 24px; font-size: 13px; }

#mo-menu { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muc); }

@media (max-width: 900px) {
  #mo-menu { display: block; }
  nav#menu {
    position: fixed; inset: 72px 0 auto; flex-direction: column; gap: 0;
    background: var(--kem); border-bottom: 1px solid var(--kem-sau);
    padding: 8px var(--dem) 22px;
    transform: translateY(-130%); transition: transform .32s ease;
  }
  nav#menu.mo { transform: translateY(0); }
  nav#menu a { padding: 14px 0; border-bottom: 1px solid var(--kem-dam); font-size: 17px; }
  #dinh .nut-chinh { display: none; }
}

/* ══ HERO ═══════════════════════════════════════════════════════ */
#hero { padding-top: clamp(44px, 6vw, 76px); overflow: hidden; }
#hero .khung {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.nhan-hero {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--trang); border: 1px solid var(--kem-sau);
  border-radius: 999px; padding: 8px 18px;
  font-size: 13.5px; color: var(--muc-nhat); margin-bottom: 24px;
}
.nhan-hero b { color: var(--vang); font-weight: 500; }
h1 {
  font-family: var(--chu-ten);
  font-weight: 500;
  font-size: clamp(34px, 5.6vw, 60px);
  line-height: 1.16;
  margin: 0 0 20px;
  text-wrap: balance;
}
/* "miễn phí" viết tay — không cho ngắt giữa hai chữ, gãy chữ nhìn rất xấu */
h1 em { font-family: var(--chu-viet); font-style: normal; color: var(--vang); white-space: nowrap; }
#hero p.dan {
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--muc-nhat);
  margin: 0 0 32px;
  max-width: 540px;
}
.nhom-nut { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.gach-dau { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; list-style: none; }
.gach-dau li { font-size: 14.5px; color: var(--muc-nhat); display: flex; align-items: center; gap: 8px; }
.gach-dau li::before { content: '✓'; color: var(--vang); font-size: 15px; }

/* Khung điện thoại ôm ảnh bìa thiệp thật */
.dien-thoai {
  position: relative; margin: 0 auto;
  width: min(320px, 82vw);
  border: 10px solid var(--muc);
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(43,36,29,.26);
  background: var(--muc);
}
.dien-thoai img { border-radius: 32px; }
.dien-thoai::after {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: var(--muc); border-radius: 0 0 14px 14px;
}
.vien-hero { position: relative; }
.vien-hero::before {
  content: ''; position: absolute; inset: -6% -12% -6% -12%;
  background: radial-gradient(ellipse at center, rgba(191,159,98,.16) 0, transparent 66%);
  pointer-events: none;
}

@media (max-width: 860px) {
  #hero .khung { grid-template-columns: 1fr; text-align: center; }
  #hero p.dan { margin-left: auto; margin-right: auto; }
  .nhom-nut, .gach-dau { justify-content: center; }
  /* ⚠ KHÔNG đẩy ảnh mockup lên trước chữ. Đã thử: ảnh cao gần bằng màn hình
     nên màn đầu tiên chỉ thấy mỗi cái điện thoại — mất cả tiêu đề lẫn nút
     "Tạo thiệp". Trên điện thoại: lời hứa và nút trước, ảnh minh hoạ sau. */
  .dien-thoai { width: min(268px, 68vw); border-width: 8px; border-radius: 34px; }
  .vien-hero { margin-top: 8px; }
}

/* ══ 3 BƯỚC ═════════════════════════════════════════════════════ */
.luoi-buoc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 30px); }
.buoc {
  background: var(--trang); border: 1px solid var(--kem-sau);
  border-radius: 20px; padding: 30px 26px; position: relative;
}
.buoc .so {
  font-family: var(--chu-ten); font-size: 42px; line-height: 1;
  color: var(--vang-sang); margin-bottom: 12px; display: block;
}
.buoc h3 { font-family: var(--chu-ten); font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.buoc p { margin: 0; color: var(--muc-nhat); font-size: 15.5px; }
@media (max-width: 780px) { .luoi-buoc { grid-template-columns: 1fr; } }

/* ══ MẪU THIỆP ══════════════════════════════════════════════════ */
.luoi-mau { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 28px); }
.the-mau {
  background: var(--trang); border: 1px solid var(--kem-sau);
  border-radius: 22px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.the-mau:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43,36,29,.1); }
.the-mau .anh { aspect-ratio: 430/620; overflow: hidden; background: var(--kem-dam); }
.the-mau .anh img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.the-mau .chu { padding: 20px 22px 24px; }
.the-mau h3 { font-family: var(--chu-ten); font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.the-mau p { margin: 0; font-size: 14.5px; color: var(--muc-nhat); }
@media (max-width: 780px) { .luoi-mau { grid-template-columns: 1fr; } }

/* ══ TÍNH NĂNG ══════════════════════════════════════════════════ */
.luoi-tn { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 24px); }
.tn {
  background: var(--trang); border: 1px solid var(--kem-sau);
  border-radius: 18px; padding: 26px 22px;
}
.tn .bieu { font-size: 26px; margin-bottom: 12px; display: block; line-height: 1; }
.tn h3 { font-family: var(--chu-ten); font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.tn p { margin: 0; font-size: 14.5px; color: var(--muc-nhat); line-height: 1.65; }
@media (max-width: 1000px) { .luoi-tn { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .luoi-tn { grid-template-columns: 1fr; } }

/* ══ ĐIỂM KHÁC BIỆT (gọi tên khách mời) ═════════════════════════ */
#goi-ten .khung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.hop-demo {
  background: var(--muc); color: var(--kem);
  border-radius: 24px; padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 24px 56px rgba(43,36,29,.22);
}
.hop-demo .nho { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--vang-sang); margin: 0 0 18px; }
.hop-demo .doi-chu {
  font-family: var(--chu-ten); font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.4; margin: 0 0 8px;
}
.hop-demo .doi-chu b { color: var(--vang-sang); font-weight: 500; }
.hop-demo .ghi { font-size: 14px; color: rgba(248,244,237,.66); margin: 18px 0 0; }
.o-ten {
  display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap;
}
.o-ten input {
  flex: 1 1 190px; min-width: 0;
  background: rgba(255,253,249,.08); border: 1px solid rgba(217,196,154,.4);
  color: var(--kem); border-radius: 999px; padding: 13px 20px;
  font-family: var(--chu-than); font-size: 15px;
}
.o-ten input::placeholder { color: rgba(248,244,237,.45); }
.o-ten input:focus { outline: none; border-color: var(--vang-sang); }
.o-ten button {
  background: var(--vang-sang); color: var(--muc); border: 0;
  border-radius: 999px; padding: 13px 26px; cursor: pointer;
  font-family: var(--chu-than); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}
.o-ten button:hover { background: #e3d2ae; }
@media (max-width: 860px) { #goi-ten .khung { grid-template-columns: 1fr; } }

/* ══ VÌ SAO CHỌN ════════════════════════════════════════════════ */
.luoi-ly-do { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 30px); }
.ly-do { display: flex; gap: 16px; align-items: flex-start; }
.ly-do .stt {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--vang); color: var(--vang);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--chu-ten); font-size: 17px;
}
.ly-do h3 { font-family: var(--chu-ten); font-size: 19px; font-weight: 600; margin: 6px 0 6px; }
.ly-do p { margin: 0; font-size: 14.5px; color: var(--muc-nhat); line-height: 1.65; }
@media (max-width: 900px) { .luoi-ly-do { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .luoi-ly-do { grid-template-columns: 1fr; } }

/* ══ HỎI ĐÁP ════════════════════════════════════════════════════ */
.hoi-dap { max-width: 800px; margin: 0 auto; }
details.cau {
  background: var(--trang); border: 1px solid var(--kem-sau);
  border-radius: 16px; margin-bottom: 12px; overflow: hidden;
}
details.cau summary {
  cursor: pointer; list-style: none;
  padding: 20px 56px 20px 24px; position: relative;
  font-family: var(--chu-ten); font-size: 19px; font-weight: 600;
}
details.cau summary::-webkit-details-marker { display: none; }
details.cau summary::after {
  content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--vang); font-weight: 300; line-height: 1;
}
details.cau[open] summary::after { content: '−'; }
details.cau .tra { padding: 0 24px 22px; color: var(--muc-nhat); font-size: 15.5px; margin: 0; }

/* ══ CTA CUỐI ═══════════════════════════════════════════════════ */
#chot { background: var(--muc); color: var(--kem); text-align: center; }
#chot h2 { color: var(--kem); }
#chot .phu-de { color: rgba(248,244,237,.72); }
#chot .nut-chinh { background: var(--vang-sang); color: var(--muc); border-color: var(--vang-sang); }
#chot .nut-chinh:hover { background: #e3d2ae; }
#chot .nut-vien { color: var(--kem); border-color: rgba(217,196,154,.55); }
#chot .nut-vien:hover { background: rgba(217,196,154,.14); }
#chot .hoa-van { color: var(--vang-sang); }
#chot .hoa-van::before, #chot .hoa-van::after {
  background: linear-gradient(90deg, transparent, rgba(217,196,154,.5), transparent);
}

/* ══ CHÂN TRANG ═════════════════════════════════════════════════ */
footer#chan { background: #241e19; color: rgba(248,244,237,.7); padding: 54px 0 34px; font-size: 14.5px; }
footer#chan .khung { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
footer#chan .hieu { color: var(--kem); margin-right: 0; }
footer#chan h4 {
  font-family: var(--chu-than); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vang-sang); margin: 0 0 14px;
}
footer#chan ul { list-style: none; margin: 0; padding: 0; }
footer#chan li { margin-bottom: 9px; }
footer#chan a { text-decoration: none; }
footer#chan a:hover { color: var(--kem); }
.ban-quyen {
  border-top: 1px solid rgba(248,244,237,.12);
  margin-top: 34px; padding-top: 22px; font-size: 13.5px; text-align: center;
}
@media (max-width: 760px) { footer#chan .khung { grid-template-columns: 1fr; } }

/* ── Hiện dần khi cuộn tới ─────────────────────────────────────── */
.hien-dan { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.hien-dan.da-hien { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hien-dan { opacity: 1; transform: none; transition: none; }
}