body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0f0f0f;
  color: white;
}

/* HERO FIXED FULL RESPONSIVE */
.hero {
  width: 100%;
  height: 100vh;
  background: url('/background.jpg') center center no-repeat;
  background-size: contain; /* Giữ nguyên tỉ lệ ảnh */
  background-color: #000; /* Nếu ảnh không đủ -> fill bằng đen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

/* MOBILE HERO — giảm chiều cao để không bị “khoảng trắng” */
@media (max-width: 600px) {
  .hero {
    height: 65vh;       /* Không quá cao — vừa đủ cho mobile */
    background-size: 100% auto; /* Cover để ảnh full màn hình */
  }
}

/* GRID + CARD giữ nguyên */
.features {
  padding: 60px 20px;
  text-align: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 20px;
  margin-top: 30px;
}
.card {
  background: #1d1d1d;
  padding: 20px;
  border-radius: 10px;
}

/* Install section */
.install {
  padding: 60px 20px;
  text-align: center;
  background: #181818;
}

.install h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.install p {
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 25px;
}

.install-btn img {
  width: 220px;
  height: auto;
  transition: 0.2s;
}

.install-btn img:hover {
  transform: scale(1.05);
}

/* Mobile Install */
@media (max-width: 600px) {
  .install h2 { font-size: 26px; }
  .install p { font-size: 16px; }
  .install-btn img { width: 180px; }
}

footer {
  padding: 20px;
  text-align: center;
  background: #111;
}