/* ===== OnePlan QR landing page (/get) — same tokens + #download panel as index.html ===== */
:root{
  --f-display:"Averia Serif Libre", Georgia, "Times New Roman", serif;
  --f-text:"Inter", "SF Pro Text", Helvetica, Arial, sans-serif;
  --ink:#282828; --ink-2:#5f5f57; --ink-3:#8d8d84;
  --off:#f8f8f1; --line:#ece9dd; --canvas:#fff;
  --primary:#0066cc; --primary-2:#005ab3; --primary-tint:#eef4fc;
  --pill:9999px; --r-panel:40px;
  --wrap:1200px;
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; display:flex; flex-direction:column; min-height:100svh; background:var(--canvas); color:var(--ink); font-family:var(--f-text); font-size:17px; line-height:1.6; letter-spacing:-.006em; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:8px }
[hidden]{ display:none !important }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* header bar: flex:none so it never eats into the centered content below */
.lbar{ flex:none; position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08) }
.lbar-in{ max-width:var(--wrap); margin:0 auto; height:52px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.lback{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--ink) }
.lback img{ height:22px; width:auto; display:block }
.langtog{ display:inline-flex; align-items:center; background:var(--off); border:1px solid var(--line); border-radius:var(--pill); padding:3px; gap:2px }
.langtog button{ font-family:var(--f-text); font-size:13px; font-weight:500; color:var(--ink-3); background:transparent; border:0; border-radius:var(--pill); padding:5px 14px; cursor:pointer; transition:color .2s, background .2s, box-shadow .2s }
.langtog button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.10) }

/* main: fills the space between header and footer, content vertically centered */
.qr-shell{ flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,48px) 0 }

/* ===== copied from index.html's #download section ===== */
.chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-text); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--primary); background:var(--primary-tint); border-radius:var(--pill); padding:7px 14px }
.h-statement{ font-family:var(--f-display); font-weight:400; font-size:clamp(40px,6.4vw,76px); line-height:1.0; letter-spacing:-.03em; margin:0; color:var(--ink) }
.sub{ font-family:var(--f-text); font-weight:400; font-size:clamp(17px,1.55vw,20px); line-height:1.55; color:var(--ink-2); margin:0 }
.center{ text-align:center } .center .sub{ margin-left:auto; margin-right:auto }
.hero-note{ font-size:14px; color:rgba(255,255,255,.78); margin:2px 0 0 }
.hero-note a{ color:#fff; text-decoration:underline; text-underline-offset:2px }
.panel{ background:var(--off); border-radius:var(--r-panel); padding:clamp(30px,4.4vw,64px) }
.cta-panel{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:clamp(64px,10vw,128px) 24px; background:linear-gradient(rgba(24,22,18,.6),rgba(24,22,18,.66)), url(/assets/promote.jpg) center/cover no-repeat }
.cta-panel .h-statement{ color:#fff }
.cta-panel .sub{ color:rgba(255,255,255,.9) }
.cta-panel .chip{ background:rgba(255,255,255,.18); color:#fff }
.cta-panel .hero-note{ color:rgba(255,255,255,.72) }
.cta-panel .badge{ margin-top:4px; background:#fff; color:var(--ink) }
.cta-panel .badge:hover{ background:#f1f1ea }
.badge{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border-radius:14px; padding:13px 22px; transition:transform .12s, background .2s }
.badge:active{ transform:scale(.98) }
.badge .b1{ font-size:10px; opacity:.72; display:block; line-height:1.2 } .badge .b2{ font-weight:600; font-size:15px; display:block }
.apple-glyph{ width:18px; height:22px; flex:none; background:currentColor; -webkit-mask:url(/assets/Apple-logo.svg) no-repeat center/contain; mask:url(/assets/Apple-logo.svg) no-repeat center/contain }
.dl-android{ display:flex; flex-direction:column; align-items:center; gap:10px }
.dl-android-h{ font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2.4vw,26px); color:#fff; margin:0 }
.dl-android-sub{ font-size:14px; color:rgba(255,255,255,.82); margin:0; max-width:36ch }
.op-zalo-btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:15px; color:#fff; background:#0068ff; border-radius:14px; padding:13px 22px; border:0; cursor:pointer; text-decoration:none }
.op-zalo-btn:hover{ background:#0057d6 }
/* ===== end copied block ===== */

/* platform split (iPhone vs Android): stacked on mobile, side by side on desktop */
.qr-platforms{ display:flex; flex-direction:column; align-items:center; gap:36px; margin-top:4px; width:100% }
.qr-plat{ display:flex; flex-direction:column; align-items:center; gap:10px }
@media (min-width:640px){
  .qr-platforms{ flex-direction:row; align-items:flex-start; justify-content:center; gap:64px }
}

/* Device-targeted narrowing: cta.js tags <html> with is-ios/is-android/is-desktop;
   qr.js adds force-ios/force-android when the URL carries ?platform=. A forced
   platform must win over the actual device (e.g. ?platform=ios opened on an Android
   phone to preview it), so the device rule is disabled once either force-* class is
   present. No-JS (neither set) falls back to showing both platform blocks. */
html.is-ios:not(.force-ios):not(.force-android) .qr-plat-android,
html.is-android:not(.force-ios):not(.force-android) .qr-plat-ios{ display:none }
html.force-ios .qr-plat-android, html.force-android .qr-plat-ios{ display:none }

/* "wrong device" escape hatch back to the unforced page, only shown when ?platform= forced it */
.qr-switch{ display:none }
html.force-android .qr-switch, html.force-ios .qr-switch{ display:block }

/* footer: flex:none so it sits right under the shell instead of floating with empty space below it */
.lfoot{ flex:none; border-top:1px solid var(--line); max-width:var(--wrap); margin:0 auto; padding:22px 22px 32px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); width:100% }
.lfoot a:hover{ color:var(--primary) }