22 CSS Tips Hữu Ích Dành Cho Thiết Kế Website

22 CSS Tips Hữu Ích Dành Cho Thiết Kế Website


Ngày 1 Tháng 12 Năm 2021

Trong bài viết hôm nay mình sẽ giới thiệu đến bạn các kiến thức cơ bản hay được sử dụng trong CSS mà chúng ta nên nắm trong quá trình phát triển và thiết kế website.

Các Thủ Thuật CSS

1) Cách Tạo Gradient Text Trong CSS

Để tạo chữ với màu gradient cho trang web thì chúng ta cần nắm các kiến thức cơ bản sau:

  • Sử dụng linear-gradient để tạo background gradient.
  • Dùng webkit-text-fill-color để tạo màu trong suốt cho văn bản.
  • Dùng webkit-background-clip để thiết lập màu gradient cho văn bản.

HTML:

<p class="gradient-text">Niem vui lap trinh</p>

CSS:

.gradient-text {
 background:linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 48px;
}

Và kết quả bạn xem bên dưới nha.

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về gradient thì có thể truy cập dường dẫn bên dưới nha.
Cách Sử Dụng Gradient CSS Cho Thiết Kế Website

2) Cách Thay Đổi Màu Cho Text Selection

Chúng ta sẽ sử dụng ::selection dể thiết lập màu sắc cho văn bản và background khi người dùng lựa chọn văn bản trong website thông qua đoạn code sau nha:

HTML:

<p class="content">Niem vui lap trinh</p>

CSS:

body{
  font-size: 48px;
}
::selection {
  background: #1E90FF;
  color: #fff;
}
.content::selection {
  background: #1E90FF;
  color:  #fff;
}

Và kết quả bạn xem dưới đây nha:

See the Pen color for text selection by haycuoilennao19 (@haycuoilennao19) on CodePen.

3) Cách Tạo Hình Tròn Bằng CSS

Trong phần này mình sẽ hướng dẫn bạn cách tạo hình tròn bằng CSS thông qua việc thiết lập giá trị cho thuộc tính border-radius: 50%. Ngoài ra mình còn có một lưu ý quan trọng là bạn phải thiết lập height(chiều cao) và width(độ rộng) của phần tử phải bằng nhau nha. Để hiểu rõ hơn bạn xem đoạn code sau nha:

HTML:

<div class="content"></div>

CSS:

.content {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: #1E90FF;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Create circle css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về cách tạo các hình chữ nhật, hình thang... thì có truy cập đường dẫn bên dưới nha.
Xây Dựng CSS Shape Hiệu Quả Trong Thiết Kế Web

4) Truncate text

Khi chúng ta có một đoạn văn quá dài và cần rút gọn thì bạn nên sử dụng tính năng truncate text bằng việc kết hợp các thuộc tính CSS như đoạn mã sau:

HTML:

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

CSS:

.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Truncate text css by haycuoilennao19 (@haycuoilennao19) on CodePen.

5) Cách Tạo Hiệu Ứng Zoom Out Animation

Trong phần này mình sẽ hướng dẫn bạn cách tạo hiệu ứng chuyển động zoom in và zoom out cho các đối tượng trong trang HTML thông qua đoạn code sau nha:

HTML:

<div class="content"></div>

CSS:

.content {
  margin: 24px;
  width: 80px;
  height: 80px;
  background: #1E90FF;
  animation: animation 1s ease infinite;
}
@keyframes animation {
  0% {
    transform: scale(0.8, 0.8);
  }
  50% {
    transform: scale(1.6, 1.6);
  }
  100% {
    transform: scale(0.8, 0.8);
  }
}

Và kết quả bạn xem dưới đây nha:

See the Pen animation zoom in zoom out by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khao thêm về các hiệu ứng zoom in và zoom out cho website thì truy cập đường dẫn bên dưới nha.
20 Zoom Effect CSS Javascript Cho Website

6) Cách Tạo Loader Bằng CSS

Trong phần này mình sẽ hướng dẫn bạn cách tạo loader đơn giản trong CSS bằng các thuộc tính bordertransform thông qua đoạn mã bên dưới nha:

HTML:

<div class="content"></div>

CSS:

@keyframes animation-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.content {
  width: 48px;
  height: 48px;
  display: inline-block;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #1E90FF;
  border-radius: 50%;
  animation: animation-loader 1.2s linear infinite;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Tạo Lodaer CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khao thêm về các hiệu ứng loader và spinner cho website thì truy cập đường dẫn bên dưới nha.
35 Hiệu Ứng Loader CSS Javascript Cho Website

7) Cách Tạo Drop cap

Thông thường khi bạn đọc một bài báo thì sẽ thường thấy ký tự của chữ đầu tiên trong văn bản sẽ có kích thước lớn hơn và màu sắc sẽ khác so với các chữ còn lại trong nội dung. Trong phần này mình sẽ hướng dẫn bạn làm hiệu ứng trên thông qua selector :first-child::first-letter. Để hiểu rõ hơn bạn hãy xem đoạn code dưới đây:

HTML:

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Aliquam commodo ligula quis tincidunt cursus. Integer consectetur
 tempor ex eget hendrerit. Lorem ipsum dolor sit amet, consectetur
 adipiscing elit.</p>
<p>Niem vui lap trinh</p>
</div>

CSS:

p:first-child::first-letter {
  color: #1E90FF;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

Và kết quả bạn xem dưới đây nha:

See the Pen cach tao drop cap by haycuoilennao19 (@haycuoilennao19) on CodePen.

8) Cách Custom Scrollbar

Trong phần này mình sẽ hướng dẫn bạn cách để thiết lập lại màu sắc cho scrollbar thông qua thuộc tính selector ::-webkit-scrollbar. Để hiểu rõ hơn bạn xem đoạn code sau nha:

CSS:

/* Xác định độ rộng cho scrollbar*/
 ::-webkit-scrollbar {
 width: 8px;
 }
/* Thiết lập màu nền xám cho Track (Thanh Tiến Trình)*/
 ::-webkit-scrollbar-track {
 background: LightGray;
 }
/* chọn màu nền xanh cho thumb */
 ::-webkit-scrollbar-thumb {
 background: DodgerBlue;
 }
/* tạo hiều ứng thay đổi màu nền đỏ khi hover */
 ::-webkit-scrollbar-thumb:hover {
 background: Tomato;
 }

Kết quả bạn xem phía dưới nha.

See the Pen Ví Dụ Scrollbar sử dung thu vien Overlay Scrollbars by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tìm hiểu thêm về thiết lập style cho scrollbar thì truy cập đường dẫn bên dưới nha.
Cách Tạo Scrollbar Cho Trang Web

9) Sử Dụng Counter CSS

Mình sẽ hướng đẫn bạn cách để tạo counter cho thẻ danh sách HTML thông qua thuộc tính counter CSS bằng đoạn mã dưới đây nha:

HTML:

<ul>
  <li>Toán</li>
  <li>Lý</li>
  <li>
     Ngoại Ngữ
    <ul>
      <li>Tiếng Anh</li>
      <li>Tiếng Trung</li>
      <li>Tiếng Nhật</li>
    </ul>
  </li>
</ul>

CSS:

ul {
  counter-reset: counter;
  list-style: none;
}
li:before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

Và kết quả bạn xem dưới đây nha:

See the Pen tạo counter css by haycuoilennao19 (@haycuoilennao19) on CodePen.

10) Cách Tạo Knockout Text

Nếu bạn muốn làm nổi bật nội dung của mình thì có thể sử dụng thuộc tính mix-blend-mode trong CSS để kết hợp một phần tử với background của phần tử chứa nó. Để dễ hình dùng hơn bạn xem ví dụ dưới đây nhé.

HTML:

<div class="blend">
  <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1594090592/photo-1593444470909-72b01f1ea83e_enzpxs.jpg" />
   <h1>Niem Vui Lap Trinh</h1>
</div>

CSS:

.blend {
  width: 100vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;

.blend img {
  position: absolute;
}
.blend h1 { 
  font-size: 130px;
  mix-blend-mode: overlay;
}

Và kết quả bạn xem dưới đây nha:

See the Pen cach tao Knockout Text by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về các ví dụ knockout text kahcs thì truy cập đường dẫn bên dưới nha.
Cách Tạo Knockout Text

11) Center Element Trong CSS

Trong phần này mình sẽ hướng dẫn bạn cách center phần tử trong CSS thông qua đoạn code sau:

HTML:

<div class="cha">
  <div class="con">Niem Vui Lap Trinh</div>
</div>

CSS:

.cha {   border: 1px solid #1E90FF;
  height: 200px;
  position: relative;
  width: 200px;
}
.con {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Và kết quả bạn xem dưới đây nha:

See the Pen cach center phan tu by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tìm hiểu thêm cách cách canh giữa phần tử trong CSS như dùng flexxbox, grid... thì có thể truy cập đường dẫn bên dưới nha.
Những Cách Center CSS Mà Bạn Nên Biết

12) Cách Tạo Mobile Menu Button

Trong phần này mình sẽ hướng dẫn bạn cách để thiết lập hambuger button cho website thông qua đoạn mã sau nha:

HTML:

<div class="content">
  <div class="line top"></div>
  <div class="line middle"></div>
  <div class="line bottom"></div>
</div>

CSS:

.content {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}
.content .line {
  height: 5px;
  background: #1E90FF;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}
.content:hover .top {
  transform: rotate(45deg);
}
.content:hover .middle {
  opacity: 0;
}
.content:hover .bottom {
  transform: rotate(-45deg);
}

Và kết quả bạn xem dưới đây nha:

See the Pen tao mobile menu button by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về các mobile menu thì truy cập đường dẫn bên dưới nha.
25 Menu Responsive Cho Mobile Trong Phát Triển Web

13) Cách Tạo Image Responsive CSS

Để hiển thị hình ảnh trên nhiều màn hình thiết bị khác nhau thì bạn có thể sử dụng thuộc tính CSS sau đây cho thẻ img:

CSS:

img{
  max-width: 100%;
  height: auto;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Hiển thị hình ảnh responsive by haycuoilennao19 (@haycuoilennao19) on CodePen.

14) Cách Tạo Chữ Xung Quanh Hình Ảnh

Đôi khi bạn cần hình ảnh minh họa trong đoạn văn của mình và thật tuyệt khi chúng ta có thể làm nó giống như trong Word là để chữ hiển thị xung quanh hình ảnh. Để hiểu rõ hơn bạn xem đoạn code sau nha:

HTML:

<div class="doan_van">
  <figure class="hinh_anh">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1594090592/photo-1593444470909-72b01f1ea83e_enzpxs.jpg" >
  </figure>
  <div class="noi_dung">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem omnis, debitis aliquam culpa provident doloremque dolorem dolores at magni suscipit id molestiae autem animi cum saepe quidem error voluptate ipsum.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi beatae modi veniam placeat cupiditate, pariatur ipsa exercitationem.
  </div>
</div>

CSS:

.doan_van{
  width:500px;
  margin:10rem auto;
  background:#1E90FF;
  padding:2rem;
  height:200px;
  color:white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.hinh_anh{
  width:10rem;
  height:10rem;
  float: left;
  clip-path: circle(50% at 50% 50%);
  shape-outside:circle(50% at 50% 50%);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.image img{
  width:100%;
}

Và kết quả bạn xem dưới đây nha:

See the Pen text around image by haycuoilennao19 (@haycuoilennao19) on CodePen.

15) Filter CSS

Trong CSS cho phép chúng ta tạo các hiệu ứng trực tiếp cho hình ảnh mà không cần sử dụng đến Photoshop và thường được dùng với thẻ <img>. Sau đây là một số thuộc tính thông dụng, bạn tham khảo ở bên dưới nhé:

CSS:

.blur {
  filter: blur(5px);
}
.grayscale {
  filter: grayscale(100%);
}
.brightness {
  filter: brightness(150%);
}
.saturate {
  filter: saturate(200%);
}
.invert {
  filter: invert(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}

Và kết quả bạn xem dưới đây nha:

See the Pen hieu ung hinh anh CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

16) Vị Trí Text Trong Image

Trong phần này mình sẽ hướng dẫn bạn cách thiết lập ví trí nội dung trong hình ảnh background thông qua đoạn code sau nha:

HTML:

<div class="container">
  <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1594090592/photo-1593444470909-72b01f1ea83e_enzpxs.jpg" />
  <div class="duoi_trai">Dưới Trái </div>
  <div class="tren_trai"> Trên Trái </div>
  <div class="duoi_phai">Dưới Phải </div>
   <div class="tren_phai">Trên Phải</div>
  <div class="chinh_giua">Chính Giữa</div>
</div>

CSS:

body{
  padding:0px;
  margin:0px;
}
/* Nơi Chứa Hình Ảnh Và Nội Dung */
.container {
  position: relative;
  color: #FFF;
  font-size:1.5rem;
}
/*Xác định độ rộng hình ảnh*/
img{
  width:100%;
}
/* Chữ nằm bên góc dưới trái hình ảnh*/
.duoi_trai {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Chữ nằm bên góc trên trái hình ảnh*/
.tren_trai {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Chữ nằm bên góc trên phải hình ảnh*/
.tren_phai {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Chữ nằm bên góc dưới phải hình ảnh*/
.duoi_phai {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Chữ nằm chính giữa hình ảnh*/
.chinh_giua {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Và kết quả bạn xem dưới đây nha:

See the Pen Hình Ảnh Với Nội Dung by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về việc kết hợp nội dung với hình ảnh trong CSS thì truy cập đường dẫn bên dưới nha.
Thiết Kế Text Image CSS Cho Website

17) Xác Định Vị Trí Placeholder Trong Ô Input

Chúng ta có thể sử dụng thuộc tính quen thuộc là text-align để căn chỉnh vị trí placeholder trong ô input. Và để hiểu rõ hơn bạn xem đoạn code sau nha:

HTML:

<form action="" method="">
  <label>Căn chính giữa
    <br>
    <input type="email" placeholder="Email">
  </label>
  <label>Căn phải
    <br>
    <input type="text" placeholder="Tên">
  </label>
  <label>Căn trái
    <br>
    <input type="tel" placeholder="Số Điện Thoại">
  </label>
</form>

CSS:

input{
border: 1px solid CornflowerBlue;
border-radius: 4px;
padding:8px;
display:block;
margin: 6px;
}
/*căn chỉnh placeholder*/
input[type="email"]::placeholder {
text-align: center;
}
input[type="text"]::placeholder {
text-align: right;
}
input[type="tel"]::placeholder {
text-align: left;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Căn chỉnh vị trí placeholder by haycuoilennao19 (@haycuoilennao19) on CodePen.

18) Cách Disable Text Selection

Vì một lý nào đó bạn không muốn người dùng có thể sao chép nội dung văn bản trên trang web của mình thì chúng có thể sử dụng thuộc tính user-select: none; trong CSS. Và để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

HTML:

<p>Bạn sẽ không chọn được nội dung ở bên dưới</p>
<p class="khong_copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>

CSS:

.khong_copy{
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
}

Và kết quả bạn xem dưới đây nha:

See the Pen khong cho phep text-select by haycuoilennao19 (@haycuoilennao19) on CodePen.

19) Cách Ẩn Đối Tượng Trong Trang Web

Trong phần này chúng ta sẽ đi vào tìm hiểu sử dụng thuộc tính display để ẩn đối tượng trong trang HTML thông qua đoạn code sau nha:

HTML:

<ol class="doi_tuong_hover" tabindex="0">
  <li>Một</li>
  <li class="doi_tuong_bi_an">Hai</li>
  <li>Ba</li>
</ol>
<p>Bạn hãy Hover Vào Một Trong Ba Khối Trên.</code></p>

CSS:

.doi_tuong_hover:hover .doi_tuong_bi_an, .doi_tuong_hover:focus .doi_tuong_bi_an {
  display: none;
}
/* Thiết Kế style cho các phần tử*/
body {
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}
p {
  text-align: center;
}
.doi_tuong_hover {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.doi_tuong_hover > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}
.doi_tuong_bi_an {
  background-color: #00bfff;
  cursor: pointer;
}

Và kết quả bạn xem dưới đây nha:

See the Pen Su Dung Display: None Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm các cách ẩn đối tượng cho đối tượng trong website thì truy cập đường dẫn bên dưới nha.
Những Cách Ẩn Đối Tượng Trong Trang Web Bằng CSS

20) Cách Tạo Hiệu Ứng Glass Effect

Bây giờ mình sẽ giới thiệu đến bạn cách để tạo hiệu hiệu ứng glass dành cho các element trong HTML thông qua đoạn code sau nha:

HTML:

<main>
   <blockquote>
     Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
     <footer>—
       <cite>
         Albert Einstein
       </cite>
     </footer>
   </blockquote>
 </main>

CSS:

body, main::before {
   background:url("https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/glass-effect-html-css/pexels-valiphotos-589841%20%281%29.jpg") 0 / cover fixed;
   display: grid;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-family: 'Roboto', sans-serif;
 }
 main {
   width: 20rem;
   height: 15rem;
   box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
   border-radius: 5px;
   position: relative;
   z-index: 1;
   background: inherit;
   overflow: hidden;
   font-size: 24px;
   font-weight: bold;
   line-height: 42px;
 }
 main::before {
   content: "";
   position: absolute;
   background: inherit;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
   filter: blur(10px);
   margin: -20px;
 }

Và kết quả bạn xem dưới đây nha:

See the Pen Frosted Glass Effect HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo các hiệu ứng glass effect khác thì truy cập đường dẫn bên dưới nha.
Cách Tạo Glass Effect

21) Hiệu Ứng Đánh Chữ CSS

Phần tiếp theo chúng ta sẽ đi vào tìm hiểu ví dụ cách tạo hiệu ứng type writter bằng các thuộc tính CSS thông qua đoạn code sau nha:

HTML:

<div class="container">
    <div class="content">
    Niem vui lap trinh
    </div>
</div>

CSS:

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  width: 14.5ch;
  animation: typewritter 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  font-size: 3em;
}
@keyframes typewritter {
  from {
    width: 0
  }
}
     @keyframes blink {
  50% {
    border-color: transparent
  }
}

Và kết quả bạn xem dưới đây nha:

See the Pen Hieu ung danh chu html css by haycuoilennao19 (@haycuoilennao19) on CodePen.

22) Cách Tạo CSS Background Image Full Screen

Trong phần này mình sẽ dùng hình ảnh làm background hiển thị toàn màn hình thông qua thuộc tính là backgroundbackground-size. Ngoài ra bạn cũng nên tham khảo thêm cách một cách mới để thiết lập đối tượng với vị trị chính giữa thông qua thuộc tính position: absolute;. Để nắm rõ hơn bạn xem đoạn code sau nhé:

HTML:

<h2>Niem Vui Lap Trinh</h2>

CSS:

body {
    background: url('https://res.cloudinary.com/dn4nxz7f0/image/upload/v1594088908/avenue-5314089_960_720_yo9ffn.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
h2{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-size: 3rem;
}

Và kết quả bạn xem dưới đây nha:

See the Pen cach tao CSS Background Image Full Screen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các kiến thức hữu ích CSS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!