/* =========================================================
   style.css · 1986 City Snap v2.0
   Giao diện theo bản redesign. Màu và font ở DESIGN TOKENS.
   ========================================================= */

@font-face{
  font-family:'Cantoria MT Std';
  src:url(assets/cantoria-semibold.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---------- DESIGN TOKENS ---------- */
:root{
  --ink:#9B3521;
  --ink-deep:#7A2717;
  --ink-soft:rgba(155,53,33,.92);
  --accent:#B8541C;
  --paper:#FEFAEF;
  --cream:#FFFAEB;
  --sun:#F5C63C;
  --sky:#A9C6EB;
  --cam:#2A140D;
  --cam-deep:#1B0D07;
  --ok:#2F6B4F;
  --font-ui:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:'Cantoria MT Std',Georgia,serif;
  --ease-screen:cubic-bezier(.22,.95,.2,1);
  --ease-out:cubic-bezier(.2,.9,.2,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --frame-ratio:.7327; /* 1080 / 1474, tỉ lệ frame-overlay */
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--paper)}
body{
  font-family:var(--font-ui);color:var(--ink);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;overscroll-behavior:none;overflow:hidden;
}
button{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
img{display:block;-webkit-user-drag:none}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- keyframes (theo bản design) ---------- */
@keyframes om-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes om-float2{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(-1.5deg)}}
@keyframes om-drift{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 70px))}}
@keyframes om-pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@keyframes om-blink{0%,100%{opacity:1}50%{opacity:.12}}
@keyframes om-scan{0%{top:1%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:98%;opacity:0}}
@keyframes om-shimmer{0%{transform:translateX(-70%) skewX(-18deg)}100%{transform:translateX(900%) skewX(-18deg)}}
@keyframes om-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes om-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes om-pop{0%{opacity:0;transform:scale(.86)}62%{transform:scale(1.045)}100%{opacity:1;transform:scale(1)}}
@keyframes om-fall{0%{transform:translateY(-60px) rotate(0);opacity:0}8%{opacity:1}100%{transform:translateY(calc(100vh + 60px)) rotate(600deg);opacity:.9}}
@keyframes om-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes om-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ---------- khung app & chuyển màn ---------- */
.app{position:fixed;inset:0;overflow:hidden}
.track{
  display:flex;width:400%;height:100%;
  transition:transform .7s var(--ease-screen);will-change:transform;
}
.scr{position:relative;flex:0 0 25%;height:100%;overflow:hidden;display:flex;flex-direction:column}
.bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.scr > *:not(.bg):not(.confetti){position:relative;z-index:2}

/* ---------- thành phần dùng chung ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 14px) 18px 0;min-height:calc(var(--safe-t) + 54px);
}
.btn-back{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 17px 0 13px;border-radius:20px;
  border:1.5px solid rgba(155,53,33,.4);color:var(--ink);
  font-size:10px;font-weight:700;letter-spacing:.16em;transition:background .2s ease;
}
.btn-back svg{flex:0 0 16px}
.btn-back:active{background:rgba(155,53,33,.08)}
.btn-back.light{border-color:rgba(255,250,235,.45);color:var(--cream)}
.btn-back.light:active{background:rgba(255,250,235,.14)}
.btn-back.glass{background:rgba(254,250,239,.8)}
.step{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-soft)}

.progress{display:flex;align-items:center;gap:10px;margin:14px 18px 0}
.progress .bar{flex:1;height:3px;border-radius:2px;background:rgba(155,53,33,.16);overflow:hidden}
.progress .fill{height:3px;border-radius:2px;background:var(--ink);transition:width .6s var(--ease-out)}
.progress.light .bar{background:rgba(255,250,235,.2)}
.progress.light .fill{background:var(--sun)}
.progress.light .step{font-size:9px;color:rgba(255,250,235,.92)}

.scr-title{font-family:var(--font-display);font-weight:600;font-size:27px;line-height:1.1;letter-spacing:0}

.btn-main{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  height:60px;border-radius:30px;background:var(--ink);color:var(--cream);
  font-size:16px;font-weight:700;letter-spacing:.07em;
  box-shadow:0 10px 24px rgba(155,53,33,.28);transition:transform .2s ease;
}
.btn-main:active{transform:translateY(1px) scale(.985)}
.btn-main.small{height:48px;font-size:12.5px;letter-spacing:.08em;max-width:290px;box-shadow:none}
.arrow-dot{
  width:32px;height:32px;border-radius:50%;background:var(--sun);
  display:flex;align-items:center;justify-content:center;animation:om-nudge 1.8s ease-in-out infinite;
}
.btn-line{
  display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:26px;
  border:1.5px solid rgba(155,53,33,.45);color:var(--ink);
  font-size:14.5px;font-weight:600;letter-spacing:.07em;transition:background .2s ease;
}
.btn-line:active{background:rgba(155,53,33,.07)}
.btn-line.light{border-color:rgba(255,250,235,.55);color:var(--cream)}
.btn-line.small{height:44px;font-size:12px;max-width:290px}
.btn-text{height:40px;padding:0 12px;font-size:13px;font-weight:600;color:rgba(255,250,235,.8);text-decoration:underline;text-underline-offset:3px}
.btn-text.dark{color:var(--ink-soft)}
.label{font-size:8px;font-weight:700;letter-spacing:.18em;color:var(--ink-soft)}

/* ══════════ 01 CHÀO MỪNG ══════════ */
.s-home{background:var(--paper);padding-bottom:calc(var(--safe-b) + 18px)}
.home-bg{
  background:
    radial-gradient(120% 55% at 80% 6%,rgba(245,198,60,.42) 0%,rgba(245,198,60,0) 62%),
    radial-gradient(95% 48% at 6% 26%,rgba(169,198,235,.42) 0%,rgba(169,198,235,0) 66%);
}
.dots{position:absolute;inset:0;opacity:.3;background-image:radial-gradient(rgba(155,53,33,.3) 1px,transparent 1px);background-size:17px 17px}
.sun{
  position:absolute;top:10%;right:-40px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,198,60,.95) 0%,rgba(245,198,60,.35) 45%,rgba(245,198,60,0) 72%);
  animation:om-glow 6.5s ease-in-out infinite;
}
.cloud{position:absolute;left:0;border-radius:24px}
.cloud.c1{top:22%;width:86px;height:24px;background:rgba(255,255,255,.9);box-shadow:26px -13px 0 -5px rgba(255,255,255,.9);animation:om-drift 27s linear infinite}
.cloud.c2{top:34%;width:60px;height:18px;border-radius:18px;background:rgba(169,198,235,.6);box-shadow:20px -9px 0 -4px rgba(169,198,235,.6);animation:om-drift 41s linear infinite 5s}

.home-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 20px) 22px 0;
}
.home-head .logo{height:34px;width:auto}
.loc-pill{
  display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:20px;
  border:1.5px solid rgba(155,53,33,.35);background:rgba(255,250,235,.7);
  font-size:9px;font-weight:700;letter-spacing:.16em;
}
.blink-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:om-blink 2.2s ease-in-out infinite}

.lockup-wrap{display:flex;justify-content:center;margin-top:clamp(18px,5.5vh,55px)}
.lockup{width:min(318px,80vw);height:auto;animation:om-rise .8s var(--ease-out) both}

.facade-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 0 6px}
.facade{
  max-height:100%;max-width:min(306px,78vw);width:auto;height:auto;object-fit:contain;
  pointer-events:none;animation:om-float 9.5s ease-in-out infinite;
}

.cta-wrap{position:relative;display:flex;justify-content:center;margin:6px 22px clamp(18px,4.8vh,42px)}
.cta-pulse{position:absolute;top:0;width:250px;height:60px;border-radius:30px;background:rgba(155,53,33,.3);animation:om-pulse 2.6s ease-out infinite}
.btn-main.cta{width:250px;letter-spacing:.08em;box-shadow:0 10px 24px rgba(155,53,33,.3)}

.marquee{height:30px;background:var(--ink);overflow:hidden;display:flex;align-items:center;flex:none}
.marquee-in{display:flex;width:max-content;animation:om-marquee 22s linear infinite}
.marquee-in span{font-size:10px;letter-spacing:.24em;color:var(--cream);white-space:nowrap;padding-right:14px}

/* ══════════ 02 CHỤP ẢNH ══════════ */
.s-cam{background:var(--cam);color:var(--cream);padding-bottom:calc(var(--safe-b) + 18px)}
.cam-bg{background:radial-gradient(90% 40% at 50% 0%,rgba(245,198,60,.16),rgba(245,198,60,0) 70%)}

.vf-area{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:12px 18px 0;container-type:size;
}
.vf{
  position:relative;aspect-ratio:1080/1474;border-radius:30px;overflow:hidden;background:var(--cam-deep);
  box-shadow:0 0 0 1.5px rgba(255,250,235,.22),0 24px 50px rgba(0,0,0,.45);
  width:min(calc(100vw - 36px), calc((100vh - 290px) * .7327));
  width:min(calc(100vw - 36px), calc((100dvh - 290px) * .7327));
  width:min(100cqw, calc(100cqh * .7327));
  transition:transform .19s cubic-bezier(.3,.9,.3,1);
}
.vf.snap{transform:scale(.955)}
.vf video,.vf .vf-frame{position:absolute;inset:0;width:100%;height:100%}
.vf video{object-fit:cover}
.vf video.mirror{transform:scaleX(-1)}
.vf .vf-frame{object-fit:fill;pointer-events:none;z-index:1}
.scanline{
  position:absolute;left:0;right:0;top:1%;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,198,60,0),rgba(245,198,60,.95),rgba(245,198,60,0));
  animation:om-scan 4.2s ease-in-out infinite;
}
.cam-msg{
  position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;background:rgba(27,13,7,.9);
}
.cam-msg.show{display:flex}
.cam-msg-title{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--cream)}
.cam-msg-text{font-size:13px;line-height:1.5;color:rgba(255,250,235,.85);margin-bottom:6px;max-width:280px}

.cam-controls{display:flex;align-items:center;justify-content:space-between;padding:18px 30px 0;flex:none}
.gal-btn{
  width:52px;height:52px;border-radius:14px;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);transition:transform .2s ease;
}
.gal-btn:active{transform:scale(.94)}
.gal-btn img{width:30px;height:auto}
.shutter{position:relative;width:84px;height:84px}
.shutter-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(255,250,235,.35);animation:om-pulse 2.2s ease-out infinite}
.shutter-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--cream)}
.shutter-core{
  position:absolute;inset:7px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;transition:transform .16s ease;
}
.shutter:active .shutter-core{transform:scale(.9)}
.shutter:disabled{opacity:.45}
.shutter:disabled .shutter-pulse{animation:none;opacity:0}
.flip-btn{
  width:52px;height:52px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.flip-btn img{width:23px;height:23px;transition:transform .55s var(--ease-out)}
.flip-btn.off{visibility:hidden}

/* ══════════ 03 XEM LẠI ẢNH ══════════ */
.s-prev{background:var(--paper);padding-bottom:calc(var(--safe-b) + 24px)}
.prev-bg{
  background:
    radial-gradient(90% 44% at 82% 10%,rgba(169,198,235,.4),rgba(169,198,235,0) 66%),
    radial-gradient(80% 40% at 8% 88%,rgba(245,198,60,.34),rgba(245,198,60,0) 70%);
}
.progress.solo{margin-top:14px}
.s-prev .scr-title{margin:20px 22px 0}
.photo-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px 22px;container-type:size}
.photo{
  aspect-ratio:1080/1474;border-radius:4px;object-fit:cover;background:#EBD9C2;
  box-shadow:0 18px 40px rgba(155,53,33,.24);
  width:min(calc(100vw - 44px), 340px, calc((100vh - 360px) * .7327));
  width:min(calc(100vw - 44px), 340px, calc((100dvh - 360px) * .7327));
  width:min(100cqw, 340px, calc(100cqh * .7327));
}
.photo.pop{animation:om-pop .55s var(--ease-out) both}
.bottom-actions{display:flex;flex-direction:column;gap:16px;padding:0 22px;flex:none}

/* ══════════ 04 CHIA SẺ & VOUCHER ══════════ */
.s-share{background:var(--paper)}
.share-bg{
  background:
    radial-gradient(85% 34% at 12% 4%,rgba(245,198,60,.4),rgba(245,198,60,0) 62%),
    radial-gradient(80% 34% at 92% 52%,rgba(169,198,235,.32),rgba(169,198,235,0) 68%);
}
.confetti{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;display:none}
.s-share.on .confetti{display:block}
.confetti i{position:absolute;top:0;animation-name:om-fall;animation-timing-function:linear;animation-iteration-count:infinite}

.share-scroll{
  position:relative;z-index:2;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(var(--safe-b) + 28px);
}
.share-scroll > *:not(.topbar):not(.progress){margin-left:22px;margin-right:22px}
.s-share .scr-title{font-size:26px;margin-top:26px}

.save-row{display:flex;gap:14px;align-items:flex-start;margin-top:20px}
.thumb{
  flex:0 0 104px;width:104px;height:142px;border-radius:4px;object-fit:cover;background:#EBD9C2;
  box-shadow:0 12px 26px rgba(155,53,33,.22);animation:om-float2 7s ease-in-out infinite;
  -webkit-touch-callout:default;
}
.save-col{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.btn-save{
  height:50px;border-radius:25px;background:var(--sun);color:var(--ink-deep);
  font-size:15px;font-weight:800;letter-spacing:.06em;box-shadow:0 8px 20px rgba(245,198,60,.5);transition:transform .2s ease;
}
.btn-save:active{transform:translateY(1px) scale(.985)}
.save-status{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--ok);text-align:center;animation:om-rise .35s ease both}
.ok-dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:var(--cream);font-size:9px;display:flex;align-items:center;justify-content:center}
.save-hint{font-size:11.5px;font-weight:500;line-height:1.45;text-align:center;color:var(--ink-soft)}

.tag-box{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;
  padding:11px 12px 11px 15px;border-radius:18px;background:var(--cream);box-shadow:0 0 0 1.5px rgba(155,53,33,.25);
}
.tag{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-top:1px}
.btn-copy{
  flex:none;height:40px;padding:0 18px;border-radius:20px;background:var(--ink);color:var(--cream);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;
}
.btn-copy.done{background:var(--ok);padding:0 15px;letter-spacing:.06em;animation:om-pop .4s var(--ease-out) both}

.guide{margin-top:16px;padding:14px 16px;border-radius:20px;border:1.5px dashed rgba(155,53,33,.4);background:rgba(155,53,33,.045)}
.guide .label{font-size:8.5px;margin-bottom:11px}
.guide ol{list-style:none;display:flex;flex-direction:column;gap:9px}
.guide li{display:flex;gap:11px;align-items:flex-start}
.guide li > span:last-child{font-size:12.5px;font-weight:600;line-height:1.35;padding-top:3px}
.guide b{font-weight:800}
.num{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--ink-deep);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.s-share.on .guide li{animation:om-rise .5s var(--ease-out) both}
.s-share.on .guide li:nth-child(1){animation-delay:.05s}
.s-share.on .guide li:nth-child(2){animation-delay:.16s}
.s-share.on .guide li:nth-child(3){animation-delay:.27s}

.staff-note{display:flex;align-items:center;gap:11px;margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--ink)}
.bang{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--ink-deep);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;animation:om-glow 3s ease-in-out infinite;
}
.staff-note p{font-size:12px;font-weight:600;line-height:1.45;color:var(--cream)}
.staff-note b{font-weight:800;color:var(--sun)}

.voucher{
  position:relative;display:flex;align-items:stretch;margin-top:18px;background:var(--cream);border-radius:20px;overflow:hidden;
  box-shadow:0 16px 36px rgba(155,53,33,.26),0 0 0 1.5px rgba(155,53,33,.3);
}
.s-share.on .voucher{animation:om-pop .62s var(--ease-out) .15s both}
.shimmer{
  position:absolute;top:0;bottom:0;left:0;width:44px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));
  animation:om-shimmer 7s ease-in-out infinite;
}
.v-main{flex:1;padding:14px 10px 14px 18px}
.v-main .label{letter-spacing:.2em}
.v-amount{display:flex;align-items:flex-start;gap:3px;margin-top:5px;font-family:var(--font-display);font-weight:600}
.v-num{font-size:44px;letter-spacing:-.01em;line-height:1}
.v-cur{font-size:20px;padding-top:7px}
.v-note{font-size:11px;font-weight:600;color:var(--ink-soft);margin-top:3px}
.v-stub{
  flex:0 0 88px;display:flex;align-items:center;justify-content:center;padding:0 6px;
  border-left:2px dashed rgba(155,53,33,.35);background:rgba(245,198,60,.18);
}
.v-stub img{height:27px;width:auto}

/* ══════════ OVERLAY: mở trình duyệt / đã kết thúc ══════════ */
.overlay{position:fixed;inset:0;z-index:20;background:var(--paper);overflow-y:auto}
.ov-body{
  position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:calc(var(--safe-t) + 32px) 24px calc(var(--safe-b) + 32px);
}
.ov-body .logo{height:34px;width:auto;margin-bottom:6px;align-self:flex-start}
.ov-body.center{align-items:center;text-align:center}
.ov-body .lockup{margin-bottom:12px}
.ov-text{font-size:14px;font-weight:500;line-height:1.55;color:var(--ink-soft)}
.ov-body .guide{margin-top:0}
.ov-body .btn-text{align-self:center}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-b) + 24px);z-index:30;transform:translate(-50%,20px);
  max-width:calc(100vw - 40px);width:max-content;text-align:center;
  background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:20px;
  font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 10px 24px rgba(155,53,33,.3);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- màn hình thấp (dưới ~700px, ví dụ trong Zalo) ---------- */
@media (max-height:700px){
  .lockup-wrap{margin-top:12px}
  .lockup{width:min(270px,72vw)}
  .scr-title{font-size:24px}
  .s-prev .scr-title{margin-top:14px}
  .btn-main{height:54px}
  .btn-line{height:46px}
  .bottom-actions{gap:12px}
  .shutter{width:74px;height:74px}
  .cam-controls{padding-top:14px}
}

/* ---------- giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .confetti,.scanline,.cloud{display:none!important}
}