@charset "utf-8";
/* --- 1. ĐỊNH DẠNG TOÀN TRANG --- */
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;   /* Xếp Banner ở trên, các ô nhỏ ở dưới */
    align-items: center;      /* Căn giữa toàn bộ giao diện ra giữa màn hình */
    padding: 40px;
    background-color: #fff;
}

/* --- 2. HIỆU ỨNG KHUNG BANNER (Thẻ h1) --- */
h1 {
    width: 100%;
    max-width: 900px;         /* Giới hạn chiều dài banner */
    height: 80px;
    display: flex;
    justify-content: center;  /* Căn chữ BANNER ra giữa khung */
    align-items: center;
    font-weight: bold;
    margin-bottom: 40px;      /* Đẩy khối 4 ô nhỏ phía dưới xuống, không cho đè lên nhau */
    /* Hiệu ứng đổi màu nền và cỡ chữ tuần tự */
    animation: changeBanner 6s infinite alternate ease-in-out;
}

/* Định nghĩa chuyển động cho Banner */
@keyframes changeBanner {
    0% {
        background-color: #ff00ff; /* Màu hồng sen */
        font-size: 14px;
    }
    25%{
        background-color: #2ecc71;
        font-size:16px ;
    }
    50% {
        background-color: #34495e; /* Màu xanh xám */
        font-size: 20px;
    }
    100% {
        background-color: #e67e22; /* Màu cam */
        font-size: 26px;
    }
}

/* --- 3. BỐ CỤC KHUNG CHỨA 4 Ô NHỎ (Thẻ div trực tiếp sau h1) --- */
body > div {
    display: flex;
    justify-content: space-around; /* Chia đều khoảng cách nằm ngang cho 4 ô */
    align-items: center;
    width: 100%;
    max-width: 900px;
    padding: 20px 0;
}

/* Định dạng kích thước chung cho 4 ô nhỏ */
body > div > div {
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

/* --- KHỐI 1: Ảnh đổi tuần tự --- */
.một {
    border: 3px solid red; 
    color: #f1c40f;        
    background-size: cover;
    background-position: center;
    animation: changeImage 6s infinite;
}
@keyframes changeImage {
    0%, 100% { background-image: url('https://picsum.photos/id/1011/130/130'); }
    50% { background-image: url('https://picsum.photos/id/1015/130/130'); }
}

/* --- KHỐI 2: Bo 2 góc, nét đứt --- */
.hai {
    background-color: #00ffff; 
    color: #f1c40f;            
    border: 3px dashed blue;   
    border-radius: 30px 0 30px 0; 
}

/* --- KHỐI 3: Bo 2 góc, nét chấm tròn --- */
.ba {
    background-color: #00ffff;
    color: #f1c40f;
    border: 3px dotted #ff00ff; 
    border-radius: 0 30px 0 30px; 
}

/* --- KHỐI 4: Xoay liên tục --- */
.Rotate {
    background-color: #0e8388; 
    color: #f1c40f;
    border: 2px solid #2ecc71;  
    font-size: 14px !important; 
    animation: spinAround 4s infinite linear;
}
@keyframes spinAround {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}