:root{
  --red:#c90012;--red-dark:#9f000e;--gold:#ffd54a;--text:#1f2937;
  --muted:#68707d;--line:#e8e8ea;--soft:#fff4f4;--blue:#0878f9;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#fff8f8 0,#f3f4f6 70%,#eef0f3 100%);
  color:var(--text);padding:16px;display:grid;place-items:center;
  -webkit-text-size-adjust:100%;
}
.card{
  width:min(560px,100%);background:#fff;border-radius:26px;padding:24px 22px;
  box-shadow:0 18px 55px rgba(0,0,0,.11);text-align:center;
  border:1px solid rgba(201,0,18,.10)
}
.logo{width:104px;height:88px;object-fit:contain;display:block;margin:0 auto 7px}
.title{margin:4px 0 12px;color:var(--red);font-size:24px;line-height:1.3;text-transform:uppercase;font-weight:800}
.device{display:inline-flex;align-items:center;justify-content:center;background:#fff0f1;color:var(--red-dark);padding:8px 13px;border-radius:999px;font-size:13px;font-weight:800;margin-bottom:14px}
.platform-panel{width:100%}
.desc{margin:0 auto 17px;color:var(--muted);line-height:1.55;font-size:15px}
.btn{display:flex;width:100%;align-items:center;justify-content:center;border:0;border-radius:15px;padding:14px 16px;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;font-family:inherit}
.primary{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(201,0,18,.18)}
.secondary{margin-top:10px;background:#f0f2f5;color:#222}
.status{margin-top:13px;padding:12px;border-radius:13px;background:#f7f7f8;color:#4b5563;font-size:13.5px;line-height:1.5}
.qr{margin-top:2px;padding:13px;border:1px solid #eee;border-radius:18px;background:#fff}
.qr img{width:210px;max-width:68%;height:auto}.qr p{font-size:13px;color:#777;margin:8px 0 0}
.success-mark{width:70px;height:70px;border-radius:50%;background:#138a45;color:#fff;display:grid;place-items:center;margin:5px auto 12px;font-size:40px;font-weight:900}
#installedPanel h2{margin:0 0 8px;color:#138a45;font-size:22px}

/* Khối hướng dẫn lớn, dễ đọc */
.easy-title{font-size:23px;line-height:1.3;font-weight:750;color:#222;margin:0 0 5px}
.easy-title strong{color:var(--red);font-size:27px}
.easy-desc{font-size:16px;line-height:1.5;color:#596170;margin:0 auto 13px}
.big-step{
  display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;text-align:left;
  border:2px solid #ececef;border-radius:18px;padding:14px 13px;margin:10px 0;background:#fff
}
.active-step{border-color:#efb4b9;background:#fff7f7;box-shadow:0 7px 18px rgba(201,0,18,.08)}
.big-num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-size:22px;font-weight:900}
.big-step-text{min-width:0}
.big-step-text strong{display:block;font-size:17px;line-height:1.35;color:#171717}
.big-step-text span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:#606874}
.share-symbol,.home-symbol{width:42px;height:42px;color:var(--blue);display:grid;place-items:center;flex:none}
.share-symbol svg,.home-symbol svg{width:36px;height:36px;display:block}
.home-symbol{color:var(--red)}
.down-guide{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--red);font-size:13px;font-weight:900;letter-spacing:.3px;margin:-1px 0 -2px}
.down-guide b{font-size:29px;line-height:1;animation:bounceDown 1s infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Safari: nhắc đúng nút Share phía dưới, không có chỉ dẫn dấu ba chấm phía trên */
.share-pointer{
  position:fixed;left:50%;transform:translateX(-50%);bottom:max(7px,env(safe-area-inset-bottom));
  z-index:9999;text-align:center;pointer-events:none;width:min(94vw,440px);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.15));
}
.share-pointer-label{
  display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border-radius:999px;
  padding:8px 13px;font-size:12.5px;font-weight:900;letter-spacing:.1px
}
.mini-share-icon{width:22px;height:22px;display:grid;place-items:center}
.mini-share-icon svg{width:21px;height:21px;display:block}
.share-pointer-arrow{color:var(--blue);font-size:32px;line-height:.9;font-weight:900;animation:bounceDown 1s infinite;text-shadow:0 2px 0 #fff}

/* Zalo/iPhone */
.zalo-alert{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:999px;background:#fff0f1;color:var(--red-dark);
  font-size:12px;font-weight:900;letter-spacing:.5px;margin:0 auto 8px
}
.zalo-title{font-size:23px;line-height:1.3;font-weight:750;margin:0 0 6px;color:#222}
.zalo-title strong{color:var(--blue);font-size:27px}
.zalo-desc{font-size:15px;line-height:1.5;color:#596170;margin:0 auto 12px}
.dots-symbol{font-size:35px;line-height:1;color:#111;font-weight:900;letter-spacing:1px;transform:translateY(-4px)}
.safari-symbol{font-size:31px;line-height:1}
.tiny-note{font-size:12.5px;line-height:1.45;color:#727985;margin:12px 5px 0}

.zalo-menu-pointer{
  position:fixed;
  top:max(58px,calc(env(safe-area-inset-top) + 48px));
  right:8px;z-index:9999;display:flex;align-items:flex-start;gap:4px;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.16));
}
.zalo-pointer-label{
  display:flex;align-items:center;gap:6px;background:#fff;color:var(--red-dark);
  border:2px solid rgba(201,0,18,.72);border-radius:999px;padding:6px 9px 6px 6px;
  font-size:11.5px;font-weight:900;white-space:nowrap
}
.zalo-pointer-label span{
  width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:12px
}
.zalo-pointer-label b{font-size:19px;line-height:.7;color:#111;letter-spacing:1px}
.zalo-pointer-arrow{color:var(--red);font-size:31px;line-height:1;font-weight:900;animation:pointTopRight 1.05s infinite}
@keyframes pointTopRight{0%,100%{transform:translate(-3px,5px)}50%{transform:translate(2px,-2px)}}

/* iOS khác Safari */
.url-box{
  width:100%;padding:12px 10px;border:1px solid #dfe3e8;border-radius:12px;background:#f7f8fa;
  color:#374151;font-size:13px;line-height:1.35;overflow-wrap:anywhere;margin:10px 0
}
.copy-btn{background:#eef5ff;color:#0868d7;border:1px solid #cfe1ff;padding:12px}
.copy-btn.is-copied{background:#edf9f1;color:#137a3b;border-color:#cdebd7}

/* iPhone: giữ toàn bộ chỉ dẫn gọn trên một màn hình */
body.is-ios{padding:8px 8px 94px;display:block;background:#f4f4f5}
body.is-ios .card{width:100%;max-width:620px;margin:0 auto;border-radius:20px;padding:13px 15px 16px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
body.is-ios .logo{width:82px;height:68px;margin-bottom:2px}
body.is-ios .title{font-size:20px;line-height:1.25;margin:1px 0 7px}
body.is-ios .device{margin-bottom:9px;padding:6px 10px;font-size:12px}
body.is-ios .easy-title{font-size:19px}
body.is-ios .easy-title strong{font-size:23px}
body.is-ios .easy-desc{font-size:14px;margin-bottom:8px}
body.is-ios .big-step{padding:11px 10px;margin:7px 0;border-radius:15px;grid-template-columns:38px 1fr auto;gap:8px}
body.is-ios .big-num{width:36px;height:36px;font-size:19px}
body.is-ios .big-step-text strong{font-size:16px}
body.is-ios .big-step-text span{font-size:13px}
body.is-ios .share-symbol,body.is-ios .home-symbol{width:34px;height:34px}
body.is-ios .share-symbol svg,body.is-ios .home-symbol svg{width:31px;height:31px}

body.is-zalo-ios{padding-bottom:18px}
body.is-zalo-ios .card{margin-top:4px}
body.is-zalo-ios .logo{width:76px;height:63px}
body.is-zalo-ios .title{font-size:19px}
body.is-zalo-ios .device{margin-bottom:7px}
body.is-zalo-ios .big-step{padding:11px 10px;margin:7px 0}
body.is-zalo-ios .zalo-desc{font-size:13.5px;margin-bottom:8px}
body.is-zalo-ios .zalo-title{font-size:19px}
body.is-zalo-ios .zalo-title strong{font-size:23px}

@media(max-width:480px){
  body:not(.is-ios){padding:10px}
  .card{padding:19px 14px;border-radius:20px}
  .title{font-size:20px}
  .logo{width:92px;height:76px}
}
@media(max-width:390px){
  body.is-ios .card{padding-left:11px;padding-right:11px}
  body.is-ios .big-step{grid-template-columns:34px 1fr auto;gap:7px;padding:10px 8px}
  body.is-ios .big-num{width:33px;height:33px;font-size:18px}
  body.is-ios .big-step-text strong{font-size:15px}
  body.is-ios .big-step-text span{font-size:12.5px}
  .zalo-pointer-label{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .down-guide b,.share-pointer-arrow,.zalo-pointer-arrow{animation:none}
}