/* Reset & font */
* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Body */
body {
  background-color: white;
}

/* Container chính */
.container {
  border: 2px solid blue;
  margin: 20px auto;
  width: 90%;
  background-color: white;
}

/* BANNER */
.banner {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  font-size: 24px;
  color: black;
  animation: colorChange 3s infinite alternate,
             scaleText 3s infinite alternate;
}

/* Hiệu ứng banner */
@keyframes colorChange {
  0%   { background-color: red; }
  25%  { background-color: magenta; }
  50%  { background-color: orange; }
  75%  { background-color: blueviolet; }
  100% { background-color: deeppink; }
}

@keyframes scaleText {
  0%   { font-size: 20px; }
  50%  { font-size: 30px; }
  100% { font-size: 20px; }
}

/* Vùng content chứa các box */
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

/* Box chung */
.box {
  width: 150px;
  height: 150px;
  margin: 10px;
  font-size: 24px;
  text-align: center;
  line-height: 150px;
  font-weight: bold;
  color: yellow;
  position: relative;
}

/* Slideshow (ảnh) */
.slideshow-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#slideshow {
  width: 150px;
  height: 150px;
  border: 4px solid red;
  object-fit: cover;
}

/* Số 1 đè lên ảnh */
.slideshow-box .number {
  position: absolute;
  top: 50%;
  left: 50%px;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: yellow;
  z-index: 1;
}

/* Box 2 và 3 nền cyan */
.cyan {
  background-color: cyan;
}

/* Box 2: viền xanh đậm nét đứt + bo góc trái trên */
.blue-dash {
  border: 4px dashed blue;
  border-radius: 20px 0 0 0;
}

/* Box 3: viền hồng chấm chấm + bo góc phải trên */
.pink-dot {
  border: 4px dotted magenta;
  border-radius: 0 20px 0 0;
}

/* Box 4: Xoay liên tục */
.rotate {
  background-color: #006666;
  border: 2px solid yellow;
  transform-origin: center center;
  animation: rotateBox 4s linear infinite;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@keyframes rotateBox {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}