* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background: #03050c;
  font-family: Arial, sans-serif;
}

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  /* Doi anh nen banner MU Ba Vuong tai day */
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 28%) 0%, rgb(0 0 0 / 8%) 36%, rgb(0 0 0 / 0%) 100%),
    url("assets/bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.button-group {
  /* Chinh vi tri cum nut tai day */
  --button-left: 45px;
  --button-top: 52%;

  position: absolute;
  left: var(--button-left);
  top: var(--button-top);
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  gap: 8px;
}

.image-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  filter: brightness(1) drop-shadow(0 12px 18px rgb(0 0 0 / 48%));
  transform: translateY(0) scale(1);
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.image-btn img {
  display: block;
  width: 260px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.image-btn + .image-btn {
  margin-top: -42px;
}

.image-btn:hover,
.image-btn:focus-visible {
  outline: none;
  transform: translateY(-6px) scale(1.05);
}

.button-download:hover,
.button-download:focus-visible {
  filter:
    brightness(1.14)
    drop-shadow(0 16px 20px rgb(0 0 0 / 56%))
    drop-shadow(0 0 16px rgb(255 214 122 / 42%));
}

.button-group-link:hover,
.button-group-link:focus-visible {
  filter:
    brightness(1.14)
    drop-shadow(0 16px 20px rgb(0 0 0 / 56%))
    drop-shadow(0 0 16px rgb(74 174 255 / 46%));
}

.button-home:hover,
.button-home:focus-visible {
  filter:
    brightness(1.14)
    drop-shadow(0 16px 20px rgb(0 0 0 / 56%))
    drop-shadow(0 0 16px rgb(190 86 255 / 46%));
}

.image-btn:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 1024px) {
  .button-group {
    --button-left: 32px;
    gap: 7px;
  }

  .image-btn img {
    width: 235px;
  }

  .image-btn + .image-btn {
    margin-top: -36px;
  }
}

@media (max-width: 767px) {
  .hero {
    background-position: center center;
  }

  .button-group {
    left: 50%;
    top: auto;
    bottom: 25px;
    transform: translateX(-50%);

    align-items: center;
    gap: 6px;
  }

  .image-btn img {
    width: 220px;
  }

  .image-btn + .image-btn {
    margin-top: -34px;
  }
}

@media (max-width: 380px) {
  .image-btn img {
    width: min(220px, 82vw);
  }
}