/* =====================================================================
   Trang giới thiệu và tải Mobile App — /app (Views/AppDownload/Index.cshtml)
   Chỉ dùng token của site.css. Bề mặt trung tính: trang này KHÔNG có nút đỏ nào ngoài header — hành động chính là
   hai badge chợ, mà badge chính thức thì không được đổi màu. Vàng chỉ một vạch nhấn dưới H1.
   Ưu tiên điện thoại: mặc định là bố cục một cột, media query nới ra cho màn rộng.
   ===================================================================== */

/* ---------- a) Khối đầu trang ---------- */
.app-hero { padding: var(--sp-24) 0 var(--sp-48); background: var(--white); }
.app-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
  align-items: center;
  margin-top: var(--sp-24);
}
.app-hero__title {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lada-black-900);
}
.app-hero__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--sp-16);
  border-radius: 2px;
  background: var(--lada-yellow-500);
}
.app-hero__desc {
  margin: 0 0 var(--sp-24);
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
}
.app-hero__get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-32); }
.app-hero__visual { display: flex; justify-content: center; }

/* Nút chợ + mã QR (partial dùng chung _AppStoreButtons) nằm ở site.css vì trang chủ cũng dùng. */
.app-cta__phone:focus-visible, .app-shots:focus-visible {
  outline: 2px solid var(--lada-red-500);
  outline-offset: 2px;
}

/* ---------- Mockup + khung giữ chỗ ---------- */
.app-mockup {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 610;
  border-radius: 32px;
  overflow: hidden;
  background: var(--gray-100);
}
.app-mockup img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  width: 100%;
  height: 100%;
  border: 1px dashed var(--gray-400);
  border-radius: inherit;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: var(--fs-sm);
}
.app-placeholder i { font-size: 2rem; color: var(--gray-500); }

/* ---------- b) Tính năng ---------- */
.app-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-16);
  border-radius: var(--radius-8);
  background: var(--gray-100);
  color: var(--lada-black-900);
  font-size: 1.125rem;
}
.app-feature__title { margin: 0 0 var(--sp-8); font-size: var(--fs-title); font-weight: 600; color: var(--gray-900); }
.app-feature__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--gray-700); }

/* ---------- d) Dải ảnh chụp màn hình cuộn ngang ---------- */
.app-shots { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: thin; }
.app-shots__track {
  display: flex;
  gap: var(--sp-16);
  width: max-content;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-16) var(--sp-16);
  list-style: none;
}
.app-shot {
  flex: 0 0 auto;
  width: 220px;
  height: 391px; /* 9:16 — tỉ lệ ảnh chợ ứng dụng, dùng thẳng ảnh của marketing không phải cắt */
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  scroll-snap-align: center;
}
.app-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-shot .app-placeholder { border: 0; background: var(--white); }

/* ---------- f) Kêu gọi cuối trang ---------- */
.app-cta { padding: var(--sp-48) 0; background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.app-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.app-cta__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h3); font-weight: 700; color: var(--lada-black-900); }
.app-cta__desc { margin: 0; font-size: 1rem; color: var(--gray-700); }
.app-cta__phone { display: inline-block; padding: var(--sp-8) 0; color: var(--lada-black-900); font-weight: 700; text-decoration: none; white-space: nowrap; }
.app-cta__phone:hover { text-decoration: underline; }

/* ---------- Màn rộng ---------- */
@media (min-width: 576px) {
  .app-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .app-hero { padding-bottom: var(--sp-64); }
  .app-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-48); }
  .app-hero__title { font-size: 2.25rem; }
  .app-features { grid-template-columns: repeat(4, 1fr); }
}