/* Mặc định là Android (Google Play); iOS (App Store) ghi đè biến và vài khối */
.store {
  --store-text: #202124;
  --store-muted: #5f6368;
  --store-value: #3c4043;
  --store-line: #e0e0e0;
  --store-accent: #1a66c4;
  --store-star: #f5a623;
  --store-review-star: #f5a623;
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  color: var(--store-text);
  font-family: "Roboto", system-ui, sans-serif;
}
[data-view="ios"] .store {
  --store-text: #000;
  --store-muted: #8a8a8e;
  --store-value: #8a8a8e;
  --store-line: #d1d1d6;
  --store-accent: #007aff;
  --store-star: #8a8a8e;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.store-bar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--store-line);
  color: #80868b;
  font-size: 22px;
}
.store-bar b {
  color: var(--store-muted);
  font-weight: 500;
}
[data-view="ios"] .store-bar {
  height: 44px;
  font-size: 17px;
}
[data-view="ios"] .store-bar b {
  color: var(--store-text);
  font-weight: 600;
}
/* Nút CSKH bên phải header, nhận màu nhấn của từng giao diện */
.store-cskh {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 12px 3px 3px;
  border-radius: 16px;
  background: #eaf2fc;
  background: color-mix(in srgb, var(--store-accent) 12%, #fff);
  color: var(--store-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.store-cskh-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--store-accent);
  color: #fff;
}
.store-cskh-icon svg {
  width: 15px;
  height: 15px;
}
.store-cskh-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
}

/* Cột chữ giãn bằng icon, margin-top: auto của .store-actions đẩy nút xuống sát đáy icon */
.store-head {
  display: flex;
  gap: 16px;
  padding: 18px 16px 0;
}
[data-view="ios"] .store-head {
  padding: 16px 20px 18px;
}
.store-icon {
  position: relative;
  flex: none;
  width: 128px;
  height: 128px;
}
[data-view="ios"] .store-icon {
  width: 118px;
  height: 118px;
}
.store-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.store-hot {
  position: absolute;
  top: -12px;
  right: -2px;
  color: #f22;
  font: italic 900 19px/1 "Roboto", sans-serif;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    2px 2px 0 #ffc400;
  transform: rotate(-12deg);
}
[data-view="ios"] .store-hot {
  top: -8px;
  right: -12px;
  font-size: 19px;
}

.store-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.store-info p {
  margin: 0;
}
.store-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
[data-view="ios"] .store-name {
  font-size: 22px;
  font-weight: 600;
}
.store-age {
  padding: 0 3px;
  border: 1px solid var(--store-muted);
  border-radius: 3px;
  color: var(--store-muted);
  font-size: 11px;
  line-height: 15px;
}
.store-tagline {
  margin-top: 2px;
  color: var(--store-accent);
  font-size: 14px;
  font-weight: 500;
}
[data-view="ios"] .store-tagline {
  color: var(--store-muted);
  font-size: 15px;
  font-weight: 400;
}
.store-info .store-rating {
  margin-top: 4px;
  color: var(--store-muted);
  font-size: 12px;
}
.store-info .store-price {
  margin-top: 2px;
  font-size: 13px;
}
.stars {
  color: var(--store-star);
  letter-spacing: 1px;
}

.store-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
[data-view="ios"] .store-actions {
  gap: 10px;
  margin-top: auto;
}
.store-install {
  padding: 7px 20px;
  border-radius: 20px;
  background: var(--store-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
[data-view="ios"] .store-install {
  padding: 6px 22px;
  border-radius: 16px;
  font-size: 15px;
}
.store-install.is-disabled {
  background: #b0b0b5;
  pointer-events: none;
}
.store-try {
  color: var(--store-muted);
  font-size: 13px;
  text-decoration: none;
}
.store-iap {
  color: var(--store-muted);
  font-size: 10px;
  line-height: 1.2;
}
.store-share {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: auto;
  color: var(--store-accent);
}

.store-stats {
  display: flex;
  margin: 20px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--store-line);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-view="ios"] .store-stats {
  margin: 0 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--store-line);
}
.store-stats li {
  display: flex;
  flex: 1 0 96px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
}
.store-stats li + li {
  border-left: 1px solid var(--store-line);
}
.store-stats small {
  color: var(--store-muted);
  font-size: 10px;
  font-weight: 500;
}
[data-view="ios"] .store-stats small {
  font-size: 11px;
  font-weight: 600;
}
.store-stats b {
  display: flex;
  align-items: center;
  height: 28px;
  color: var(--store-value);
  font-size: 20px;
}
[data-view="ios"] .store-stats b {
  font-size: 22px;
}
.store-stats b svg {
  width: 22px;
  height: 22px;
}
.store-stats span {
  color: var(--store-muted);
  font-size: 12px;
}

.store-notice {
  margin: 16px 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef4fd;
  color: var(--store-muted);
  font-size: 13px;
  line-height: 1.6;
}
.store-notice.is-warning {
  background: #fff3e0;
}
.store-notice > b {
  display: block;
  color: var(--store-text);
  font-size: 14px;
}
/* <b> lồng <b> thành 900; Arial 900 trên Windows là Arial Black, không có "Ậ" nên trộn font */
.store-notice b b {
  font-weight: inherit;
}
.store-notice p {
  margin: 4px 0 0;
}

.store-section {
  margin: 22px 16px 12px;
  font-size: 22px;
  font-weight: 700;
}
/* Dải cuộn ngang dùng chung: ảnh hướng dẫn, thẻ đánh giá */
.store-shots,
.store-reviews {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.store-shots {
  padding: 0 16px 24px;
}
[data-view="ios"] .store-shots {
  padding: 16px 20px 24px;
}
.store-shots img {
  flex: 0 0 44%;
  min-width: 0;
  height: auto;
  scroll-snap-align: start;
}
[data-view="ios"] .store-shots img {
  flex-basis: 56%;
}
/* Chỉ 1 ảnh: căn giữa thay vì chia cột như dải cuộn */
.store-shots img:only-child {
  flex: none;
  width: min(100%, 300px);
  margin: 0 auto;
}

.store-block {
  margin: 0 16px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--store-line);
}
[data-view="ios"] .store-block {
  margin: 0 20px;
}
.store-block-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.store-block-sub {
  margin: 2px 0 0;
  color: var(--store-muted);
  font-size: 13px;
}
.store-whatsnew {
  margin: 16px 0 0;
  padding: 0;
  list-style: decimal inside;
  color: var(--store-text);
  font-size: 13px;
  line-height: 1.6;
}

.store-score {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
}
.store-score-value {
  margin: 0;
  color: var(--store-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.store-score-value b {
  display: block;
  margin-bottom: 6px;
  color: #4a4a4a;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -2px;
}
.store-score-bars {
  flex: 0 1 46%;
  padding-top: 6px;
  color: var(--store-muted);
  font-size: 13px;
  text-align: right;
}
.store-score-bars ul {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.store-score-bars li {
  height: 3px;
  border-radius: 2px;
  background: #e8eaed;
}
.store-score-bars li::before {
  content: "";
  display: block;
  width: var(--pct);
  height: 100%;
  border-radius: inherit;
  background: #4a4a4a;
}

.store-reviews {
  margin-top: 18px;
}
.store-review {
  flex: 0 0 92%;
  box-sizing: border-box;
  min-height: 170px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5f5f7;
  scroll-snap-align: start;
}
.store-review .stars {
  color: var(--store-review-star);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}
.store-review .star-off {
  color: #c4c4c4;
}
.store-review p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.store-review .store-review-author {
  margin: 6px 0 14px;
  color: var(--store-muted);
  font-size: 12px;
  font-weight: 500;
}

.store-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  padding: 6px 0 calc(4px + env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--store-line);
  background: rgba(249, 249, 249, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.store-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #999;
  font-size: 10px;
}
.store-tabs svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}
.store-tabs .is-active {
  color: var(--store-accent);
}