.banner {
  height: 100px;
  text-align: center;
  font-weight: 700;
  line-height: 100px;
  text-shadow: 3px 3px 2px gray;
  animation: change_background 15s infinite;
}

/* Khung chứa các ô vuông */
.frame {
  margin: 0px auto;
  width: 1000px;
  height: 300px;
}

/* Thuộc tính chung cho 4 ô vuông */
.frame div {
  float: left;
  width: 180px;
  height: 180px;
  margin: 35px 25px;
  background-color: aqua;
  font-size: 3em;
  text-align: center;
  line-height: 180px;
  color: yellow;
  box-sizing: border-box;
}

/* Khung 1: Đổi hình ảnh nền tuần tự */
.slider {
  animation: scroll 10s infinite;
  border: 5px solid red;
}

/* Khung 2: Bo góc và viền nét đứt blue */
.round1 {
  border: 5px dashed blue;
  border-radius: 0px 30px 0px 30px;
}

/* Khung 3: Bo góc và viền chấm chấm magenta */
.round2 {
  border: 5px dotted magenta;
  border-radius: 30px 0px 30px 0px;
}

/* Khung 4: Nền teal, hiệu ứng xoay tròn */
.rotate {
  background: teal;
  animation: rotate 10s infinite linear;
  font-size: 1.5em !important;
  border: 2px double yellow;
}

/* Keyframes 1: Hiệu ứng banner chuyển màu nền & cỡ chữ */
@keyframes change_background {
  0% {
    background-color: #ff0000;
    font-size: 1em;
  }
  15% {
    background-color: #ff8000;
    font-size: 1.2em;
  }
  30% {
    background-color: #ffff00;
    font-size: 1.5em;
  }
  45% {
    background-color: #00ff00;
    font-size: 1.8em;
  }
  60% {
    background-color: #ff00ff;
    font-size: 2.2em;
  }
  80% {
    background-color: #00ffff;
    font-size: 1.5em;
  }
  100% {
    background-color: #ff0000;
    font-size: 1em;
  }
}

/* Keyframes 2: Hiệu ứng chuyển hình nền ở Khung 1 */
@keyframes scroll {
  0%,
  33% {
    background-image: url("../images/1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  33%,
  66% {
    background-image: url("../images/3.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  66%,
  100% {
    background-image: url("../images/6.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

/* Keyframes 3: Hiệu ứng xoay Khung 4 từng nấc theo chiều kim đồng hồ */
@keyframes rotate {
  0% {
    transform: rotate(20deg);
  }
  12% {
    transform: rotate(40deg);
  }
  24% {
    transform: rotate(60deg);
  }
  36% {
    transform: rotate(80deg);
  }
  48% {
    transform: rotate(100deg);
  }
  60% {
    transform: rotate(120deg);
  }
  72% {
    transform: rotate(140deg);
  }
  84% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(180deg);
  }
}