Share css trang trí tiêu đề hộp canh giữa với hiệu ứng Glow xanh

Css trang trí tiêu đề hộp canh giữa với hiệu ứng Glow xanh ,Đây là đoạn CSS giúp tạo ra một tiêu đề nổi bật, canh giữa, với hộp màu xanh, chữ trắng in đậm, hai mũi tên hai bên và có hiệu ứng glow (ánh sáng phát sáng) khi hover chuột.

🎨 Đặc điểm chính

• Canh giữa: Tiêu đề luôn nằm giữa màn hình, cân đối cho mọi layout.

• Hộp xanh nổi bật: Nền xanh (#0099cc) với chữ trắng in đậm, dễ nhìn và chuyên nghiệp.

• Mũi tên hai bên: Tạo cảm giác giống “tab” hoặc “banner”, nhấn mạnh nội dung bên trong.

• Gạch ngang xanh: Làm nền trang trí, giữ bố cục cân đối, đẹp mắt.

• Hiệu ứng hover Glow: Khi rê chuột, hộp chuyển sang xanh đậm hơn, đồng thời phát ra ánh sáng xanh bao quanh (glow), tạo cảm giác hiện đại và thu hút ánh nhìn.

🚀 Ứng dụng

• Dùng làm tiêu đề cho các mục quan trọng: Sản phẩm mới, Dịch vụ, Bài viết nổi bật, Khuyến mãi…

• Giúp website trông chuyên nghiệp, sinh động, tránh nhàm chán.

• Rất phù hợp với giao diện Flatsome / WordPress nhưng cũng áp dụng tốt cho mọi website.

💡 Điểm mạnh

• Dễ dùng: Chỉ cần thêm class .phongvt-title và bọc chữ trong <span> là có hiệu ứng.

• Tuỳ chỉnh nhanh: Muốn đổi màu chỉ việc thay background và border-color.

• Hiện đại: Hiệu ứng glow làm tiêu đề trông bắt mắt, thu hút, hợp trend UI hiện nay.

Bước 1 bỏ vào css bổ sung , đặt tên class cho tiêu đề là : phongvt-title

.phongvt-title {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin: 40px 0;
}

.phongvt-title span {
  display: inline-block;
  background: #0099cc;
  color: #fff;
  padding: 10px 30px;
  font-size: 16px;
  position: relative;
  transition: all 0.3s ease;              
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* bóng nhẹ mặc định */
}

/* mũi tên hai bên */
.phongvt-title span::before,
.phongvt-title span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transition: all 0.3s ease;
}

.phongvt-title span::before {
  left: -20px;
  border-right: 20px solid #0099cc;
}

.phongvt-title span::after {
  right: -20px;
  border-left: 20px solid #0099cc;
}

/* gạch ngang xanh */
.phongvt-title .section-title b {
  background-color: #0099cc !important;
  opacity: 1 !important;
  height: 2px;
  transition: all 0.3s ease;
}

/* Hiệu ứng hover */
.phongvt-title span:hover {
  background: #006699;                       /* xanh đậm hơn */
  box-shadow: 0 0 20px rgba(0, 102, 153, .6); /* bóng tỏa rộng */
}

.phongvt-title span:hover::before {
  border-right-color: #006699;
}

.phongvt-title span:hover::after {
  border-left-color: #006699;
}

.phongvt-title:hover .section-title b {
  background-color: #006699 !important; /* gạch đổi cùng màu hộp */
}

xong ta cứ add tiêu đề như bình thường  như bình thường là xong