:root { --navy:#1E2D78; --teal:#2E9890; --ink:#2D3746; --muted:#5A6475; --soft:#F0F4F9; --line:#D9E0EA; --red:#F25C50 }
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family: Arial, Helvetica, sans-serif; color:var(--ink); background:#fff; line-height:1.5; -webkit-text-size-adjust:100% }
img { max-width:100%; display:block }
b, strong { color:var(--teal) }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px }
.top { padding:18px 0; border-bottom:1px solid var(--line) }
.top img { height:34px; margin:0 auto }

/* Hero */
.hero { background:linear-gradient(180deg,#fff 0%, var(--soft) 100%); padding:36px 0 44px }
.hero .wrap { display:grid; gap:32px; align-items:center }
.pill { display:inline-block; background:var(--navy); color:#fff; font-weight:700; font-size:13px; letter-spacing:2px; padding:7px 16px; border-radius:30px; margin-bottom:18px }
h1 { font-size:40px; line-height:1.08; font-weight:700; letter-spacing:-.5px }
h1 span { display:block } .t1 { color:var(--navy) } .t2 { color:var(--teal) }
.bar { width:64px; height:6px; border-radius:4px; background:var(--teal); margin:18px 0 }
.hero p.sub { font-size:18px; color:var(--ink); max-width:520px }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 26px; max-width:460px }
.stat { background:#fff; border:2px solid var(--navy); border-radius:14px; padding:12px 14px }
.stat .v { font-size:30px; font-weight:700; color:var(--teal); line-height:1 }
.stat .k { font-size:14px; font-weight:700; color:var(--navy); margin-top:4px }
.btn { display:inline-block; background:var(--teal); color:#fff; font-weight:700; font-size:18px; text-decoration:none; border:0; border-radius:14px; padding:16px 28px; cursor:pointer; box-shadow:0 6px 18px rgba(46,152,144,.35); transition:transform .15s }
.btn:hover { transform:translateY(-1px) }
.hero .cover { width:min(320px,80%); margin:0 auto; border-radius:18px; box-shadow:0 20px 50px rgba(30,45,120,.22); transform:rotate(2deg) }

section { padding:48px 0 }
h2 { font-size:28px; line-height:1.15; color:var(--navy); margin-bottom:8px }
h2 + .lead { color:var(--muted); margin-bottom:26px; font-size:17px }

/* PAS */
.pas { display:grid; gap:14px }
.pas .card { border:2px solid var(--navy); border-radius:18px; padding:20px 22px }
.pas .card:nth-child(2) { background:var(--soft) }
.pas .card:nth-child(3) { border-color:var(--teal); background:#EAF6F5 }
.pas .tag { font-size:13px; font-weight:700; letter-spacing:1.5px; color:var(--teal); text-transform:uppercase; margin-bottom:6px }
.pas .card:nth-child(1) .tag { color:var(--red) }
.pas p { font-size:17px }

/* Bên trong */
.inside { background:var(--soft) }
.steps { list-style:none; display:grid; gap:10px }
.steps li { display:flex; gap:14px; align-items:center; background:#fff; border-radius:14px; padding:14px 16px; font-size:17px }
.steps .n { flex:0 0 36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center }

/* Form */
.form-sec .box { max-width:520px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(30,45,120,.18); border:2px solid var(--navy) }
.form-head { background:var(--navy); color:#fff; padding:22px 24px }
.form-head .k { font-size:13px; letter-spacing:2px; font-weight:700; color:#9FE3DB }
.form-head h2 { color:#fff; font-size:24px; margin:4px 0 0 }
form, .done { padding:22px 24px 24px; background:#fff }
label { display:block; font-weight:700; font-size:15px; color:var(--navy); margin:14px 0 6px }
label:first-of-type { margin-top:0 }
input[type=text], input[type=tel], input[type=email] { width:100%; font-size:17px; padding:14px 16px; border:2px solid var(--line); border-radius:12px; font-family:inherit; color:var(--ink) }
input:focus { outline:none; border-color:var(--teal) }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
form .btn { width:100%; margin-top:20px; font-size:19px }
form .btn[disabled] { opacity:.6; cursor:wait }
.err { display:none; margin-top:14px; background:#FEF1EF; border:1px solid #F8C9C3; color:#B93A2E; border-radius:12px; padding:12px 14px; font-size:15px }
.note { font-size:13px; color:var(--muted); margin-top:12px; text-align:center }
.done { display:none; text-align:center }
.done .ok { width:64px; height:64px; border-radius:50%; background:var(--teal); color:#fff; font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:6px auto 14px }
.done h3 { font-size:22px; color:var(--navy); margin-bottom:8px }
.done p { font-size:16px; margin-bottom:10px }
.done .zalo { display:inline-block; margin-top:8px; color:var(--navy); font-weight:700; border:2px solid var(--navy); border-radius:12px; padding:10px 18px; text-decoration:none }

/* FAQ */
details { border-bottom:1px solid var(--line); padding:16px 0 }
summary { font-weight:700; font-size:17px; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px }
summary::-webkit-details-marker { display:none }
summary::marker { content:'' }
summary > span { flex:1; text-align:left }
summary::after { content:'+'; color:var(--teal); font-size:24px; line-height:1; flex:0 0 auto }
details[open] summary::after { content:'–' }
details p { margin-top:10px; color:var(--ink) }

footer { background:var(--navy); color:#C9D2EE; padding:28px 0; font-size:14px; text-align:center }
footer a { color:#fff; text-decoration:none; font-weight:700 }
.sticky { position:fixed; left:0; right:0; bottom:0; padding:10px 16px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); display:none; z-index:10 }
.sticky .btn { width:100%; text-align:center; padding:14px; font-size:17px }

@media (max-width:759px) { .sticky.show { display:block } body { padding-bottom:0 } }
@media (min-width:760px) {
  h1 { font-size:56px }
  .hero { padding:56px 0 64px }
  .hero .wrap { max-width:820px; text-align:center }
  .hero .bar, .hero p.sub, .hero .stats { margin-left:auto; margin-right:auto }
  .pas { grid-template-columns:repeat(3,1fr) }
      .steps { grid-template-columns:repeat(2,1fr) }
  h2 { font-size:34px }
}

/* ===== Các trang sau đăng ký (ưu đãi, thanh toán, WOW, cảm ơn) ===== */
.page { background:linear-gradient(180deg,#fff 0%, var(--soft) 100%); min-height:100vh; padding:28px 0 56px }
.notice { max-width:720px; margin:0 auto 22px; background:#EAF6F5; border:1px solid #BFE5E0; color:var(--ink); border-radius:14px; padding:12px 16px; font-size:15px; text-align:center }
.notice b { color:var(--teal) }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:2px; color:var(--teal); text-transform:uppercase }
.h-page { font-size:34px; line-height:1.08; font-weight:700; margin:8px 0 0 }
.h-page span { display:block }
.card2 { background:#fff; border:2px solid var(--navy); border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(30,45,120,.14) }
.band { background:var(--navy); color:#9FE3DB; font-size:13px; font-weight:700; letter-spacing:2px; text-align:center; padding:10px }
.pad { padding:22px }
.ticks { list-style:none; display:grid; gap:12px; margin:18px 0 }
.ticks li { display:flex; gap:12px; font-size:17px; align-items:flex-start }
.ticks li::before { content:''; flex:0 0 24px; height:24px; border-radius:50%; margin-top:1px;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat }
.flow { list-style:none; display:grid; gap:10px; margin-top:14px }
.flow li { display:flex; gap:12px; align-items:center; background:#fff; border-radius:14px; padding:12px 14px; font-size:16px; border:1px solid var(--line) }
.flow .n { flex:0 0 32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center }
.price { display:flex; align-items:baseline; gap:10px; margin:6px 0 18px }
.price .v { font-size:42px; font-weight:700; color:var(--navy); line-height:1 }
.price .k { font-size:15px; color:var(--muted) }
.btn.full { width:100%; text-align:center }
.btn.navy { background:var(--navy); box-shadow:0 6px 18px rgba(30,45,120,.3) }
.link-no { display:block; width:100%; background:none; border:0; color:var(--muted); text-decoration:underline; font-size:15px; padding:14px 0 0; cursor:pointer; font-family:inherit }
.two { display:grid; gap:22px }

/* Thanh toán */
.qr { width:260px; height:260px; margin:6px auto 0; border-radius:16px; border:2px solid var(--line); display:block; background:#fff }
.qr-miss { width:260px; height:260px; margin:6px auto 0; border-radius:16px; border:2px dashed var(--red); color:var(--red); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; font-size:14px }
.rows { margin-top:4px }
.rows .r { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px }
.rows .r:last-child { border-bottom:0 }
.rows .k { color:var(--muted) }
.rows .v { font-weight:700; color:var(--navy); text-align:right; display:flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.rows .v.big { font-size:22px; color:var(--teal) }
.copy { font-size:12px; font-weight:700; color:var(--teal); background:#fff; border:1.5px solid var(--teal); border-radius:8px; padding:3px 8px; cursor:pointer; font-family:inherit }
.wait { display:flex; gap:10px; align-items:center; justify-content:center; color:var(--muted); font-size:15px; margin-top:16px }
.dot { width:10px; height:10px; border-radius:50%; background:var(--teal); animation:nhay 1.2s infinite }
@keyframes nhay { 50% { opacity:.25 } }
.small { font-size:13px; color:var(--muted); text-align:center; margin-top:14px }

/* WOW */
.wow-ok { width:84px; height:84px; border-radius:50%; background:var(--teal); margin:0 auto 18px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(46,152,144,.4) }
.wow-ok svg { width:46px; height:46px }

/* Cảm ơn */
.video { position:relative; padding-top:56.25%; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 18px 50px rgba(30,45,120,.18) }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.social { display:grid; gap:10px }
.social a { display:flex; align-items:center; justify-content:space-between; background:#fff; border:2px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--navy); font-weight:700 }
.social a::after { content:'→'; color:var(--teal) }

/* Bảng hỏi bật lên */
.modal { position:fixed; inset:0; background:rgba(16,24,64,.6); display:none; align-items:flex-end; justify-content:center; z-index:50 }
.modal.open { display:flex }
.sheet { background:#fff; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.2) }
.sheet-head { display:flex; justify-content:space-between; gap:12px; padding:20px 22px 14px; border-bottom:1px solid var(--line) }
.sheet-head h3 { color:var(--navy); font-size:19px; line-height:1.25; margin-top:4px }
.x { background:none; border:0; font-size:30px; line-height:1; color:#9AA4B5; cursor:pointer; padding:0 4px }
.q { padding:16px 22px 0 }
.q .lb { font-weight:700; color:var(--navy); margin-bottom:10px }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.opt { font-family:inherit; font-size:14px; text-align:left; background:#fff; border:2px solid var(--line); border-radius:12px; padding:11px 12px; cursor:pointer; color:var(--ink) }
.opt.on { border-color:var(--teal); background:#EAF6F5; color:var(--navy); font-weight:700 }
.sheet-foot { padding:14px 22px 18px; position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 20px rgba(255,255,255,.9) }

@media (min-width:760px) {
  .page { padding:48px 0 72px }
  .h-page { font-size:46px }
  .two { grid-template-columns:1.1fr .9fr; align-items:start }
  .two.even { grid-template-columns:1fr 1fr; align-items:center }
  .pad { padding:30px }
  .modal { align-items:center }
  .sheet { border-radius:22px }
  .social { grid-template-columns:repeat(3,1fr) }
  .sticky-col { position:sticky; top:24px }
}

/* Trang ưu đãi: điện thoại = giới thiệu → khung giá → chi tiết; máy tính = 2 cột, khung giá bên phải */
.offer { display:grid; gap:22px; grid-template-areas:"intro" "card" "detail" }
.o-intro { grid-area:intro } .o-card { grid-area:card } .o-detail { grid-area:detail }
.o-intro p { margin-bottom:0 }
@media (min-width:760px) {
  .offer { grid-template-columns:1.1fr .9fr; grid-template-areas:"intro card" "detail card"; align-items:start; column-gap:40px }
  .o-card { align-self:stretch }
}