[CSS] tạo ô khuyến mãi đẹp như hình

[CSS] tạo ô khuyến mãi đẹp như ví dụ bên dưới

Mã html

<div class="khuyen-mai-hb"> 
<span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span> 
   <ul>
 	<li>Giảm 30% khi đăng ký hosting 3 năm</li>
 	<li>Giảm 10% phí dịch vụ khi like và share website</li>
 	<li>Tặng 1 khóa học viết bài chuẩn SEO online</li>
   </ul>
</div>

Css

.khuyen-mai-hb {
	margin-bottom:2px;
	margin-top:2px;
	background:white;
	padding:10px;
	border-radius:5px;
	border:1px solid #ef0b0b;
	font-size:15px;
	width:100%;
}
.khuyen-mai-hb .tieu-de {
	background:#e31616;
	padding:2px 20px;
	margin-top:-24px;
	font-size:15px;
	font-weight:500;
	color:#ffffff;
	display:block;
	max-width:207px;
	border-radius:99px;
}

.khuyen-mai-hb ul {
   margin-bottom:4px;
   list-style-image:url(tick.png);	
}

Khuyến mãi đặc biệt