/* Import font Be Vietnam Pro từ Google Fonts với đủ kiểu italic và độ đậm 100–900 */
  @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

  /* Áp dụng cho toàn bộ phần tử:
     box-sizing: border-box giúp width/height bao gồm padding và border */
  * {
    box-sizing: border-box;
  }

  /* Vùng chứa danh mục: nền nhạt, khoảng cách dọc, căn giữa, dùng Be Vietnam Pro */


  /* Tiêu đề lớn */
  .title {
    font-size: 48px;
    font-weight: 700;
    color: #192335;
  }

  /* Mỗi hộp danh mục (là thẻ a) */
  .box {
    display: inline-block;   /* Cho phép xếp ngang nhiều box */
    text-align: left;        /* Nội dung bên trong căn trái để dễ đọc */
    width: 260px;            /* Độ rộng cố định */
    border-radius: 18px;     /* Bo góc hộp */
    padding: 15px;           /* Khoảng đệm bên trong */
    margin-left: 15px;       /* Khoảng cách trái giữa các hộp */
    margin-right: 15px;      /* Khoảng cách phải giữa các hộp */
    text-decoration: none;   /* Bỏ gạch chân mặc định của thẻ a */
  }

  /* Biến thể màu nền cho từng hộp */
  .box-yellow { background-color: #fffccf; }
  .box-pink   { background-color: #ffedff; }
  .box-orange { background-color: #ffe8eb; }
  .box-blue   { background-color: #e9f6ff; }

  /* Ảnh chính ở đầu hộp: full chiều ngang hộp, cao 150px, cắt vừa khung, bo góc */
  .box .image-main {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Vòng tròn icon (nếu dùng): kích thước 80x80, nền xám,
     kéo chồng lên ảnh bằng margin-top âm và z-index */
  .box .icon {
    width: 80px;
    height: 80px;
    background: #606060;
    margin-top: -30px;   /* Kéo lên chồng ảnh chính */
    padding: 20px;       /* Đệm bên trong vòng tròn */
    border-radius: 50%;  /* Bo tròn */
    position: relative;  /* Tạo context để z-index hoạt động */
    z-index: 1;          /* Đảm bảo nằm trên ảnh */
  }

  /* Ảnh bên trong vòng tròn icon: giữ tỉ lệ, không cắt */
  .box .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Tiêu đề danh mục */
  .box h3 {
    font-size: 20px;
    color: #192335;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* Đổi màu tiêu đề khi hover hộp để tăng tương tác */
  .box:hover h3 {
    color: #2F57EF;
  }

  /* Danh sách nội dung trong hộp: bỏ padding/margin mặc định, bỏ dấu đầu dòng */
  .box ul {
    padding: 0;
    margin: 20px 0;
    list-style: none;
  }

  /* Mỗi mục trong danh sách: khoảng cách dưới, màu xám, cỡ chữ nhỏ */
  .box ul li {
    margin-bottom: 10px;
    color: #6b7385;
    font-size: 14px;
  }

  /* Icon trong mỗi mục: độ rộng cố định để căn thẳng hàng, màu tối */
  .box ul li i {
    width: 25px;
    color: #192335;
  }

  /* Mục cuối cùng không cần khoảng cách dưới */
  .box ul li:last-child {
    margin-bottom: 0;
  }

  /* Dòng "Xem Thêm" ở cuối hộp */
  .box p {
    font-size: 14px;
    color: #192335;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Tạo khoảng cách nhỏ giữa chữ và icon mũi tên */
  .box p i {
    margin-left: 5px;
  }

/* Hoa mai rơi */
.flower{
    position:fixed;
    top:-10px;
    font-size:20px;
    animation:fall linear infinite;
    z-index:999;
}

@keyframes fall{
    to{
        transform:translateY(110vh);
    }
}