:root{
  --bg:#fff;
  --bg2:#f2f2f7;
  --text:#1c1c1e;
  --gray:#8e8e93;
  --gray2:#aeaeb2;
  --sep:rgba(60,60,67,.12);
  --blue:#007aff;
  --get-bg:#e8e8ed;
  --radius:22px;
  font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
}
a{color:var(--blue);text-decoration:none;}
.page{max-width:640px;margin:0 auto;padding:0 20px 60px;}

/* ---- top bar khi cuộn ---- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(249,249,249,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
  transform:translateY(-100%);transition:transform .25s ease;
  padding-top:env(safe-area-inset-top);
}
.topbar.show{transform:translateY(0);}
.topbar-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:7px 16px;}
.topbar-app{display:flex;align-items:center;gap:10px;min-width:0;}
.topbar-icon{width:30px;height:30px;border-radius:7px;object-fit:cover;border:.5px solid var(--sep);}
.topbar-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- hero ---- */
.hero{display:flex;gap:16px;padding:24px 0 18px;align-items:flex-start;}
.app-icon{width:118px;height:118px;border-radius:27px;object-fit:cover;flex:none;
  border:.5px solid var(--sep);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.app-icon.placeholder,.topbar-icon.placeholder,.idx-ic.placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4e9bff,#0a6cff);color:#fff;font-weight:700;}
.app-icon.placeholder{font-size:52px;}
.hero-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.app-name{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 2px;line-height:1.15;}
.app-sub{font-size:14px;color:var(--gray);margin-bottom:auto;}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:14px;}

.get-btn{
  background:var(--blue);color:#fff;font-weight:700;font-size:15px;
  padding:6px 22px;border-radius:30px;min-width:74px;text-align:center;
  letter-spacing:.01em;display:inline-block;line-height:1.3;
}
.get-btn:active{opacity:.6;}
.get-btn.small{padding:5px 18px;font-size:14px;min-width:64px;}
.icon-btn{background:none;border:none;color:var(--blue);font-size:20px;padding:0;cursor:pointer;
  font-family:inherit;line-height:1;}
.inapp-note{font-size:11px;color:var(--gray2);margin-top:6px;}

/* ---- hàng thống kê ---- */
.stats-scroll{overflow-x:auto;margin:6px -20px 0;padding:14px 20px;
  border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);-webkit-overflow-scrolling:touch;}
.stats-scroll::-webkit-scrollbar{display:none;}
.stats-row{display:flex;align-items:stretch;min-width:min-content;}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:0 18px;min-width:78px;text-align:center;}
.stat-top{font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.stat-val{font-size:19px;font-weight:700;color:var(--gray);margin:5px 0;white-space:nowrap;}
.stat-bottom{font-size:11px;color:var(--gray);white-space:nowrap;}
.stat-stars{font-size:11px;color:var(--gray2);letter-spacing:1px;}
.stat-div{width:.5px;background:var(--sep);margin:4px 0;}
.dev-ic{vertical-align:middle;color:var(--gray);}
.stars{color:var(--gray);letter-spacing:1px;}

/* ---- ảnh chụp màn hình ---- */
.shots-scroll{overflow-x:auto;margin:22px -20px;padding:0 20px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
.shots-scroll::-webkit-scrollbar{display:none;}
.shots-row{display:flex;gap:12px;min-width:min-content;}
.shot{height:430px;width:auto;border-radius:18px;object-fit:cover;flex:none;
  border:.5px solid var(--sep);scroll-snap-align:start;background:var(--bg2);}

/* ---- khối nội dung ---- */
.block{padding:20px 0;border-top:.5px solid var(--sep);}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.block h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0;}

.desc-block{position:relative;}
.desc-text{font-size:16px;color:var(--text);white-space:normal;}
.desc-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.more-btn{background:none;border:none;color:var(--blue);font-size:16px;font-weight:600;
  padding:0;margin-top:2px;cursor:pointer;font-family:inherit;float:right;
  position:absolute;right:0;bottom:auto;}
.desc-block .more-btn{position:static;float:right;margin-top:-22px;background:var(--bg);padding-left:24px;
  box-shadow:-20px 0 12px var(--bg);}
.dev-line{clear:both;color:var(--blue);font-size:15px;font-weight:600;margin-top:20px;}

.wn-meta{display:flex;justify-content:space-between;color:var(--gray);font-size:14px;margin-bottom:10px;}
.wn-notes{font-size:16px;}

/* ---- xếp hạng ---- */
.rating-summary{display:flex;align-items:flex-end;gap:24px;margin:6px 0 4px;}
.rating-big{font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:.9;}
.rating-out{display:block;font-size:15px;font-weight:600;color:var(--gray);letter-spacing:0;margin-top:6px;}
.rating-bars{flex:1;display:flex;flex-direction:column;gap:3px;padding-bottom:6px;}
.bar-row{display:flex;align-items:center;gap:6px;}
.bar-label{font-size:11px;color:var(--gray2);width:8px;text-align:right;}
.bar-track{flex:1;height:7px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.bar-fill{display:block;height:100%;background:var(--gray2);border-radius:4px;}
.rating-count{color:var(--gray);font-size:15px;margin-top:8px;}

.reviews{margin-top:16px;display:flex;flex-direction:column;gap:18px;}
.review{}
.review-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.review-title{font-weight:700;font-size:16px;}
.review-meta{color:var(--gray2);font-size:13px;white-space:nowrap;}
.review-sub{font-size:12px;color:var(--gray2);margin:3px 0 7px;}
.review-author{margin-left:6px;}
.review-body{font-size:15px;}

/* ---- thông tin ---- */
.info-list{}
.info-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:.5px solid var(--sep);font-size:15px;}
.info-row:first-child{border-top:none;}
.info-label{color:var(--gray);flex:none;}
.info-value{color:var(--text);text-align:right;}

.page-footer{color:var(--gray2);font-size:12px;padding:24px 0;border-top:.5px solid var(--sep);}

/* ---- index nhiều trang ---- */
.idx-header{padding:24px 0 8px;}
.idx-header h1{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:0;}
.idx-list{display:flex;flex-direction:column;}
.idx-card{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:.5px solid var(--sep);color:inherit;}
.idx-card:first-child{border-top:none;}
.idx-card img,.idx-ic{width:62px;height:62px;border-radius:14px;object-fit:cover;flex:none;border:.5px solid var(--sep);}
.idx-ic{font-size:26px;}
.idx-info{flex:1;min-width:0;}
.idx-name{font-weight:600;font-size:16px;}
.idx-sub{font-size:13px;color:var(--gray);}

@media (prefers-color-scheme: dark){
  :root{--bg:#000;--bg2:#1c1c1e;--text:#fff;--gray:#8e8e93;--gray2:#636366;
    --sep:rgba(84,84,88,.36);--get-bg:#1c1c1e;}
  .topbar{background:rgba(22,22,22,.8);}
  .desc-block .more-btn{background:var(--bg);box-shadow:-20px 0 12px var(--bg);}
}