/* ====== HOLA QUYÊN — Mediterranean sunset ====== */
:root{
  --cream:#FBF5EC; --cream2:#F3E7D6; --paper:#FFFFFF;
  --ink:#3A2A2A; --mute:#6B5B52;
  --wine:#5B2A3B; --terra:#C2572E; --terra-d:#A2461F;
  --coral:#E0876B; --sage:#7E8C66; --gold:#C7973E;
  --line:#E7DAC9;
  --maxw:1080px; --read:680px;
  --r:14px; --r-lg:22px;
  --shadow:0 18px 50px -28px rgba(91,42,59,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  padding-top:60px; /* compensate sticky bar */
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif; font-weight:600; line-height:1.15; color:var(--wine); margin:0 0 .5em}
h1{font-size:clamp(2rem,6.2vw,3.5rem); letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,4.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,3vw,1.45rem)}
p{margin:0 0 1rem}
a{color:var(--terra-d)}
img{max-width:100%; display:block}
strong,b{font-weight:600; color:var(--wine)}
.em{color:var(--terra-d); font-style:italic; font-family:"Playfair Display",serif}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.read{max-width:var(--read); margin-left:auto; margin-right:auto}
section{padding:clamp(48px,8vw,92px) 0}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); margin:0 0 14px}

/* ---- sticky bar ---- */
.bar{position:fixed; top:0; left:0; right:0; height:60px; z-index:100;
  background:rgba(251,245,236,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{font-family:"Playfair Display",serif; font-weight:700; font-size:1.25rem; color:var(--wine); text-decoration:none; letter-spacing:.01em}
.brand span{color:var(--terra)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:13px 26px; border-radius:999px; font-family:inherit;
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform .18s ease, background .2s ease, box-shadow .2s ease; text-align:center}
.btn-primary{background:var(--terra); color:#fff; box-shadow:0 10px 26px -12px rgba(194,87,46,.7)}
.btn-primary:hover{background:var(--terra-d); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--wine); border-color:var(--wine)}
.btn-ghost:hover{background:var(--cream2); transform:translateY(-2px)}
.btn-wine{background:var(--wine); color:#fff}
.btn-wine:hover{background:#46202d; transform:translateY(-2px)}
.bar .btn{min-height:42px; padding:8px 20px; font-size:.92rem}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}

/* ---- hero ---- */
.hero{padding-top:clamp(34px,6vw,64px)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
.hero-photo{position:relative}
.hero-photo img{width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow); aspect-ratio:1/1; object-fit:cover; object-position:center 18%}
.hero-photo .tag{display:block; margin-top:16px; background:var(--paper); color:var(--wine);
  border:1px solid var(--line); border-radius:14px; padding:12px 16px; font-size:.86rem; box-shadow:var(--shadow); font-weight:500; text-align:center}
.hero-photo .tag b{color:var(--terra-d)}
.hero h1 .ink{color:var(--ink)}
.lede{font-size:1.12rem; color:var(--mute); max-width:30em}
.subhead{font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.15rem,3vw,1.5rem); color:var(--terra-d); font-weight:500; margin:0 0 14px; line-height:1.25}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 18px}
.cta-row .btn{flex:1 1 auto; min-width:180px}
.microtrust{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.9rem; color:var(--mute); margin-top:8px}
.microtrust span{display:inline-flex; align-items:center; gap:7px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--sage); flex:none}

/* ---- pain ---- */
.band{background:var(--wine); color:#F6E9DF}
.band h2{color:#fff}
.band p{color:#EBD9CB}
.pain-list{display:grid; gap:14px; margin:26px 0 0}
.pain-list li{list-style:none; display:flex; gap:13px; align-items:flex-start;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:15px 17px; line-height:1.55}
.pain-list .q{font-style:italic; font-family:"Playfair Display",serif; color:#fff}
.x{flex:none; width:26px; height:26px; border-radius:50%; background:rgba(224,135,107,.25); color:#F4C4B2;
  display:grid; place-items:center; font-size:15px; margin-top:1px}
.loop{margin-top:30px; text-align:center; font-family:"Playfair Display",serif; font-size:1.15rem; color:#F4C4B2}
.loop b{color:#fff; font-style:italic}

/* ---- generic blocks ---- */
.kicker-quote{font-family:"Playfair Display",serif; font-size:clamp(1.4rem,4vw,2rem); color:var(--wine); line-height:1.3}
.kicker-quote b{color:var(--terra-d)}

/* ---- mechanism / plate ---- */
.mech-grid{display:grid; grid-template-columns:1fr; gap:38px; align-items:center; margin-top:18px}
.plate-wrap{display:grid; place-items:center}
.plate{width:min(340px,84vw)}
.steps{display:grid; gap:12px; counter-reset:s}
.step{display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.step .n{flex:none; width:30px; height:30px; border-radius:50%; background:var(--cream2); color:var(--terra-d); font-weight:700; display:grid; place-items:center; font-size:.95rem}
.step b{display:block}

/* ---- roadmap ---- */
.road{display:grid; gap:0; margin-top:20px; position:relative}
.road-item{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:0 0 26px}
.road-rail{position:relative; display:flex; flex-direction:column; align-items:center}
.road-num{width:42px; height:42px; border-radius:50%; background:var(--terra); color:#fff; font-weight:700; display:grid; place-items:center; font-family:"Playfair Display",serif; font-size:1.1rem; z-index:1; flex:none}
.road-line{width:2px; flex:1; background:var(--line); margin-top:4px}
.road-item:last-child .road-line{display:none}
.road-body h3{margin-bottom:.2em}
.road-body .res{display:inline-flex; gap:7px; align-items:center; font-size:.92rem; color:var(--sage); font-weight:600; margin-top:4px}

/* ---- cards grids ---- */
.cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:0 10px 30px -24px rgba(91,42,59,.5)}
.card .ico{width:42px; height:42px; border-radius:12px; background:var(--cream2); color:var(--terra-d); display:grid; place-items:center; margin-bottom:12px; font-size:20px}
.card h3{font-size:1.12rem; margin-bottom:.35em}
.card p{font-size:.96rem; color:var(--mute); margin:0}

/* ---- get/deliverables ---- */
.get{background:var(--cream2)}
.checklist{display:grid; gap:13px; margin:8px 0 0; padding:0}
.checklist li{list-style:none; display:flex; gap:12px; align-items:flex-start}
.ck{flex:none; width:26px; height:26px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; font-size:15px; margin-top:2px}

/* ---- for-whom split ---- */
.split{display:grid; grid-template-columns:1fr; gap:18px; margin-top:24px}
.panel{border-radius:var(--r-lg); padding:24px; border:1px solid var(--line)}
.panel.yes{background:#F1F4EB; border-color:#D9E0CB}
.panel.no{background:#FBF0EC; border-color:#F0D8CE}
.panel h3{font-size:1.15rem}
.panel ul{margin:0; padding:0}
.panel li{list-style:none; display:flex; gap:11px; align-items:flex-start; margin-bottom:11px; line-height:1.5; font-size:.98rem; color:var(--ink)}
.panel .m{flex:none; font-weight:700; width:22px}
.yes .m{color:var(--sage)} .no .m{color:var(--terra)}

/* ---- pricing ---- */
.price-card{max-width:560px; margin:26px auto 0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px 28px; text-align:center; box-shadow:var(--shadow); position:relative}
.price-card .ribbon{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:#3A2A2A;
  font-weight:700; font-size:.8rem; letter-spacing:.04em; padding:6px 16px; border-radius:999px; white-space:nowrap}
.value-list{text-align:left; display:grid; gap:10px; margin:8px 0 22px; padding:0}
.value-list li{list-style:none; display:flex; justify-content:space-between; gap:14px; border-bottom:1px dashed var(--line); padding-bottom:9px; font-size:.96rem}
.value-list .vname{color:var(--ink)}
.value-list .vprice{color:var(--mute); white-space:nowrap; font-variant-numeric:tabular-nums}
.price-now{font-family:"Playfair Display",serif; font-size:2.8rem; color:var(--terra-d); font-weight:700; line-height:1}
.price-old{color:var(--mute); text-decoration:line-through; font-size:1.05rem}
.price-card .note{font-size:.86rem; color:var(--mute); margin-top:14px}

/* ---- guarantee ---- */
.guarantee{max-width:640px; margin:0 auto; background:#F1F4EB; border:1px solid #D9E0CB; border-radius:var(--r-lg); padding:30px 26px; text-align:center}
.guarantee .seal{width:60px; height:60px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; margin:0 auto 14px; font-size:28px}

/* ---- about ---- */
.about-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:start}
.about-photo img{width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow); aspect-ratio:1/1; object-fit:cover}
.signature{font-family:"Playfair Display",serif; font-style:italic; font-size:1.3rem; color:var(--terra-d); margin-top:10px}

/* ---- testimonials ---- */
.tcards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px}
.tcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.tcard .stars{color:var(--gold); letter-spacing:2px; margin-bottom:8px}
.tcard p{font-style:italic; color:var(--ink); font-family:"Playfair Display",serif; font-size:1.05rem; margin-bottom:14px}
.tcard .who{display:flex; align-items:center; gap:11px}
.tcard .av{width:38px; height:38px; border-radius:50%; background:var(--cream2); color:var(--terra-d); display:grid; place-items:center; font-weight:700}
.tcard .who b{display:block; font-style:normal} .tcard .who small{color:var(--mute)}
.tcard .tphoto{display:block; width:calc(100% + 44px); margin:-22px -22px 16px; border-radius:var(--r) var(--r) 0 0; height:auto}
.ph{border:1.5px dashed var(--coral); background:rgba(224,135,107,.07)}
.ph .lbl{font-size:.78rem; color:var(--terra-d); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px}

/* ---- faq ---- */
.faq{max-width:var(--read); margin:24px auto 0}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--paper); margin-bottom:12px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:600; color:var(--wine); list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none; transition:transform .2s ease; color:var(--terra)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 20px 18px; color:var(--mute); font-size:.98rem}

/* ---- urgency ---- */
.urgent{background:var(--terra); color:#fff; text-align:center}
.urgent h2{color:#fff}
.urgent p{color:#FBE6DC}
.urgent .seats{display:inline-flex; gap:9px; align-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:8px 18px; font-weight:600; margin-bottom:22px}
.urgent .pulse{width:9px; height:9px; border-radius:50%; background:#FFD9C8; box-shadow:0 0 0 0 rgba(255,217,200,.8); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,217,200,.7)}70%{box-shadow:0 0 0 12px rgba(255,217,200,0)}100%{box-shadow:0 0 0 0 rgba(255,217,200,0)}}

.urgent .btn-primary {
  background: var(--paper);
  color: var(--terra-d);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.15);
}
.urgent .btn-primary:hover {
  background: var(--cream2);
  color: var(--wine);
  transform: translateY(-2px);
}

/* ---- payment ---- */
.pay-grid{display:grid; grid-template-columns:1fr; gap:22px; margin-top:26px}
.pay-step{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:0 12px 34px -26px rgba(91,42,59,.55)}
.pay-step .head{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.pay-step .sn{width:36px; height:36px; border-radius:50%; background:var(--terra); color:#fff; font-weight:700; display:grid; place-items:center; flex:none; font-family:"Playfair Display",serif}
.pay-step .head h3{margin:0}
.qr-img{width:240px; max-width:78%; margin:0 auto 16px; border-radius:16px; border:1px solid var(--line)}
.bank-row{display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:11px 15px; margin-bottom:10px; background:var(--cream)}
.bank-row .k{font-size:.82rem; color:var(--mute)}
.bank-row .v{font-weight:600; color:var(--wine); font-variant-numeric:tabular-nums}
.copy-btn{min-height:40px; padding:8px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper); color:var(--terra-d); font-weight:600; font-family:inherit; cursor:pointer; font-size:.85rem; transition:background .2s, border-color .2s}
.copy-btn:hover{background:var(--cream2); border-color:var(--coral)}
.amount-box{text-align:center; background:var(--cream2); border-radius:14px; padding:16px; margin-top:6px}
.amount-box .a{font-family:"Playfair Display",serif; font-size:2rem; color:var(--terra-d); font-weight:700}
.amount-box small{color:var(--mute)}
.zalo-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.zalo-cta .btn{flex:1 1 auto; min-width:160px}
.memo{font-size:.86rem; color:var(--mute); margin-top:12px; background:var(--cream); border:1px dashed var(--line); border-radius:10px; padding:11px 14px}

/* ---- footer ---- */
footer{background:var(--wine); color:#EBD9CB; padding:54px 0 40px}
footer h3{color:#fff}
.foot-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:start}
.foot-contact a{color:#fff; text-decoration:none; display:inline-flex; gap:9px; align-items:center; font-weight:600}
.foot-tag{font-family:"Playfair Display",serif; font-style:italic; font-size:1.25rem; color:#F4C4B2; line-height:1.4; margin-top:10px}
.foot-base{border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:18px; font-size:.82rem; color:#C9A99C}

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media(min-width:760px){
  .hero-grid{grid-template-columns:1.05fr .95fr; gap:48px}
  .mech-grid{grid-template-columns:.9fr 1.1fr; gap:50px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .tcards{grid-template-columns:repeat(3,1fr)}
  .pay-grid{grid-template-columns:1fr 1fr; align-items:start}
  .about-grid{grid-template-columns:.8fr 1.2fr}
  .foot-grid{grid-template-columns:1fr}
}
@media(min-width:1000px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .pulse{animation:none !important}
}

/* ===================== NAVIGATION BAR ===================== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a {
  color: var(--wine);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--terra);
}
.nav-links a.btn-zalo {
  background: var(--wine);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-links a.btn-zalo:hover {
  background: var(--terra);
  transform: translateY(-1px);
}
@media(max-width: 580px) {
  .nav-links {
    gap: 12px;
  }
  .nav-links a {
    font-size: 0.85rem;
  }
  .nav-links a.btn-zalo {
    padding: 5px 12px;
    font-size: 0.8rem;
  }
}

/* ===================== EMAIL OPT-IN CARD ===================== */
.optin-card {
  max-width: 560px;
  margin: 32px auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow);
}
.optin-card h3 {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin-bottom: 8px;
}
.optin-card p.desc {
  font-size: 0.95rem;
  color: var(--mute);
  margin-bottom: 24px;
  line-height: 1.5;
}
.email-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.email-form .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.email-form label {
  display: block;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--wine);
  margin-bottom: 6px;
}
.email-form input[type="text"],
.email-form input[type="tel"],
.email-form input[type="email"] {
  width: 100%;
  height: 50px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.email-form input[type="text"]:focus,
.email-form input[type="tel"]:focus,
.email-form input[type="email"]:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(194,87,46,0.15);
}
.email-form .btn {
  width: 100%;
  border: none;
}
.thank-you-box {
  display: none;
  text-align: center;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.thank-you-box .icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.thank-you-box h3 {
  color: var(--wine);
  margin-bottom: 10px;
}
.thank-you-box p {
  font-size: 0.98rem;
  color: var(--mute);
  margin-bottom: 20px;
}
.thank-you-box .btn-download {
  background: var(--sage);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(126,140,102,.7);
}
.thank-you-box .btn-download:hover {
  background: #6a7756;
  transform: translateY(-2px);
}

/* ===================== MODAL OVERLAY & POPUP ===================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(58, 42, 42, 0.6);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-container {
  background: var(--paper);
  border-radius: var(--r-lg);
  width: 90%;
  max-width: 500px;
  padding: 38px 28px;
  position: relative;
  box-shadow: 0 24px 70px -18px rgba(91,42,59,.45);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.modal-overlay.active .modal-container {
  transform: translateY(0);
}
.close-modal-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  color: var(--mute);
  cursor: pointer;
  line-height: 1;
  transition: color 0.18s;
}
.close-modal-btn:hover {
  color: var(--terra);
}

/* ===================== PLACEHOLDERS VISUALS ===================== */
.img-placeholder {
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 20px;
  text-align: center;
  color: var(--mute);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 auto;
}
.img-placeholder .icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: var(--terra);
}
.text-placeholder {
  border-left: 3.5px solid var(--gold);
  background: rgba(251, 245, 236, 0.5);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  color: var(--mute);
  font-style: italic;
  font-size: 0.95rem;
  margin: 12px 0;
}
.text-placeholder-group {
  border-left: 3.5px solid var(--gold);
  background: rgba(251, 245, 236, 0.5);
  padding: 20px 24px;
  border-radius: 0 14px 14px 0;
  color: var(--mute);
  font-style: italic;
  font-size: 0.95rem;
  margin: 12px 0;
}
.text-placeholder-group p {
  margin: 0 0 12px;
}
.text-placeholder-group p:last-child {
  margin-bottom: 0;
}