:root{
  --violet:#7b3fe4; --blue:#1f7aec; --green:#12a150; --yellow:#ffd23f;
  --o1:#ffb347; --o2:#ff5a1f; --o3:#e6206e;
  --cream:#fffaf2; --ink:#1d1b3a; --muted:#4f4d66;
  --grad:linear-gradient(120deg,var(--o1),var(--o2) 55%,var(--o3));
  --r:22px;
  --pet-room:82px; /* khoảng trống trên mặt khối để Chăm đứng không che chữ */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;position:relative}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.22;margin:0;letter-spacing:-.01em;text-wrap:balance}
p,ul,ol{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,250,242,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(29,27,58,.06)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.brand{font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand-dot{width:18px;height:18px;border-radius:50%;background:var(--grad)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;color:#fff;background:var(--grad);border-radius:999px;padding:12px 22px;box-shadow:0 8px 22px -8px rgba(230,32,110,.55);transition:transform .18s ease,box-shadow .18s ease;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:14.5px}
.btn-big{padding:14px 28px 14px 16px;font-size:18px}
.btn-wave img{width:48px;height:48px;image-rendering:pixelated;margin:-10px 0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.btn-zalo{background:var(--blue);box-shadow:0 8px 22px -8px rgba(31,122,236,.6)}
.btn-fb{background:var(--violet);box-shadow:0 8px 22px -8px rgba(123,63,228,.6);margin-top:16px}
.btn-ghost{background:#fff;color:var(--violet);box-shadow:inset 0 0 0 2px var(--violet)}
.btn.is-soon{opacity:.55;cursor:not-allowed}
.btn.is-soon::after{content:" (sắp có)";font-weight:500}

/* hero */
.hero{padding:48px 0 30px}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:end}
h1{font-size:clamp(34px,4.8vw,58px);font-weight:800}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(18px,1.8vw,21px);color:var(--muted);margin:18px 0 28px;max-width:32em}
.hero-pet{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:var(--pet-room)}
.hero-pet-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:30px}
.hero-pet-btn img{width:288px;height:288px;image-rendering:pixelated}
.hero-pet-btn:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.hero-pet::after{content:"";position:absolute;bottom:42px;left:50%;width:180px;height:18px;transform:translateX(-50%);border-radius:50%;background:rgba(123,63,228,.14);z-index:-1}
.hero-pet-name{margin-top:6px;font-weight:600;color:var(--muted);background:#fff;border-radius:999px;padding:6px 16px;box-shadow:0 8px 20px -14px rgba(29,27,58,.4)}
.hero-pet-name b{color:var(--o3)}

/* sections */
.sec{padding:64px 0}
.sec-tint{background:#fff3e3}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:var(--pet-room)}
.lead{font-size:19px;color:var(--muted);margin:calc(var(--pet-room) * -1 + 10px) 0 var(--pet-room)}
ul{padding-left:0;list-style:none}
li{position:relative}
.svc ul li,.story ul li{padding-left:28px;margin-top:10px}
.svc ul li::before,.story ul li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--c,var(--o2))}

.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 16px 36px -24px rgba(29,27,58,.35);border-top:6px solid var(--c)}
.svc h3{font-size:24px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{font-size:14px;font-weight:700;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}

.steps3{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{background:#fff;border-radius:var(--r);padding:26px;box-shadow:0 16px 36px -24px rgba(29,27,58,.35)}
.step .n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:#fff;font-weight:800;font-size:20px;margin-bottom:14px}
.step h3{font-size:21px;font-weight:800;margin-bottom:6px}
.step p{color:var(--muted)}

/* stories */
.story{background:#fff;border-radius:var(--r);box-shadow:0 18px 40px -24px rgba(29,27,58,.4);overflow:hidden}
.story h3{font-size:23px;font-weight:800;margin-top:8px}
.story-n{display:grid;grid-template-columns:1fr 1.05fr;gap:28px;padding:30px;border:3px solid var(--blue);margin-bottom:calc(var(--pet-room) + 6px);--c:var(--blue)}
.kenh{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px}
.tag-zalo{background:#e3eefe;color:var(--blue)}
.tag-admin{background:#ddf6e7;color:#0b6b37}
.tag-fb{background:#efe6ff;color:var(--violet)}
.tag-easy{background:#fff1c2;color:#7a5a00}
blockquote{margin:20px 0 0;padding:16px 18px;background:#fff8e6;border-left:5px solid var(--yellow);border-radius:12px}
blockquote p{font-size:17px;font-weight:600}
blockquote p+p{margin-top:6px}
cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--muted)}
.story-cta{display:flex;align-items:center;gap:18px;margin-top:20px}
.story-cta .qr{width:120px;height:120px;border-radius:12px;box-shadow:0 0 0 2px #e3eefe}
.story-shot{margin:0;align-self:center}
.story-shot img{border-radius:14px;box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.story-shot figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.fb{--c:var(--violet);align-self:start}
.fb .cover{width:100%;height:auto}
.fb-body{padding:20px 24px 24px}
.fb-head{display:flex;align-items:center;gap:14px}
.fb-head h3{margin-top:4px;font-size:21px}
.ava{width:52px;height:52px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.3);flex:none}
.note{margin-top:22px;font-size:15px;color:var(--muted);background:#fff;border-left:5px solid var(--violet);padding:12px 16px;border-radius:12px}

/* offer */
.offer{background:var(--grad);color:#fff;border-radius:30px;padding:44px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;box-shadow:0 30px 70px -30px rgba(230,32,110,.6)}
.offer h2{color:#fff;margin-bottom:20px}
.incl{display:grid;gap:10px}
.incl li{padding-left:34px;font-weight:600}
.incl li::before{content:"✓";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--o3);font-weight:800;font-size:14px;display:grid;place-items:center}
.price{display:inline-block;margin-top:20px;background:var(--yellow);color:#3b2f00;font-weight:800;padding:9px 16px;border-radius:12px}
.buy{list-style:none;padding:0;margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.buy li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:6px 14px 6px 6px;font-weight:600;font-size:15.5px}
.buy span{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--o3);font-weight:800;display:grid;place-items:center;font-size:14px}
.calm{display:grid;gap:14px;align-content:center}
.calm li{background:#fff;color:var(--ink);border-radius:18px;padding:16px 18px}
.calm b{display:block;font-size:18px;color:var(--o3)}

/* final */
.final{padding-bottom:90px}
.final-box{text-align:center;max-width:820px;margin:0 auto;background:#fff;border-radius:30px;padding:40px 24px;box-shadow:0 18px 40px -26px rgba(29,27,58,.4)}
.final-box h2{margin-bottom:10px}
.final-box p{color:var(--muted);font-size:19px;margin-bottom:24px}
.foot{background:var(--ink);color:#fff;text-align:center;padding:26px 0;font-weight:600}

/* responsive */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .two,.steps3,.story-n,.offer{grid-template-columns:1fr}
  .offer{padding:30px 22px;gap:24px}
}
@media (max-width:600px){
  :root{--pet-room:54px}
  body{font-size:16px}
  .wrap{padding:0 18px}
  .top .btn-sm{display:none}
  .hero{padding:28px 0 10px}
  .hero-pet{padding-top:0}
  .hero-pet-btn img{width:192px;height:192px}
  .hero-pet::after{bottom:38px;width:130px}
  .btn-big{width:100%;font-size:16px;padding:12px 16px 12px 10px;gap:6px}
  .btn-wave img{width:40px;height:40px}
  .sec{padding:48px 0}
  .story-n{padding:22px}
  .story-cta .qr{display:none}
  .story-cta .btn{width:100%}
  .btn-fb{width:100%}
}

/* ===== Chăm (linh vật dẫn đường) ===== */
#cham-layer{position:absolute;left:0;top:0;width:100%;height:0;z-index:45;pointer-events:none}
.cham{position:absolute;width:var(--pw);height:var(--pw);pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(29,27,58,.12))}
.cham.flip{transform:scaleX(-1)}
.cham.dragging{cursor:grabbing}
.cham-x{position:absolute;width:24px;height:24px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-weight:800;font-size:15px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:auto;cursor:pointer;display:none}
.cham-bubble{position:fixed;z-index:60;max-width:min(340px,calc(100vw - 24px));background:#fff;color:var(--ink);border-radius:18px;padding:14px 16px 14px;box-shadow:0 18px 40px -12px rgba(29,27,58,.45);border:2px solid #f1e6ff;font-size:16px;line-height:1.45;display:none}
.cham-bubble.show{display:block;animation:pop .18s ease-out}
.cham-bubble .who{font-weight:800;color:var(--o3);font-size:14px;margin-bottom:2px;padding-right:26px}
.cham-bubble .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cham-bubble .acts button,.cham-bubble .acts a{font:inherit;font-size:14.5px;font-weight:700;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none;background:#f1e6ff;color:var(--violet)}
.cham-bubble .acts .main{background:var(--grad);color:#fff}
.cham-bubble .close{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:#f4f2f7;color:var(--muted);font-size:17px;font-weight:800;cursor:pointer;line-height:1}
.cham-bubble .prog{font-size:12.5px;color:var(--muted);margin-top:8px}
.cham-call{position:fixed;left:12px;bottom:12px;z-index:60;width:56px;height:56px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 22px -8px rgba(29,27,58,.5);cursor:pointer;display:none;padding:4px}
.cham-call img{width:48px;height:48px;image-rendering:pixelated}
.cham-call.show{display:block}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){.cham-bubble{font-size:15px;padding:12px 14px;max-height:33vh;overflow:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}