Tạo hiệu ứng loading cực đẹp giống PayPal trong css

Bài viết này sẽ hướng dẫn các bạn làm Paypal loading style với css

Trong website cũng đã có nhiều bài viết hướng dẫn về tạo hiệu ứng loading như Tạo ảnh load động trong photoshop hay facebook loading style với csshướng dẫn tạo Load Screen với CSS để tạo trang loadscreen cực đẹp, các bạn có thể đọc qua những bài viết đó để chọn cho mình những kiểu phù hợp nhé. Còn đây la demo bài này

OK. Rất đơn giản, để làm cái này chỉ cần duy nhất một thẻ HTML mà thôi

[PHP]

[/PHP]
Tiếp theo là phần CSS cơ bản cho body để set font cho hiệu ứng của chúng ta
[CSS]
body{
font-family:Helvetica, sans-serif;
}
[/CSS]
Style cho thẻ div có class=”paypal”
[CSS]

.paypal{
position:relative;
font-style: italic;
display:block;

transform:skew(-20deg);
margin:20px auto;

border-radius:2px;

width:33px;
height:24px;

background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),

linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),

linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5), /*#edf1f5*/

linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),

linear-gradient(-52.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(120.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),

linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),

linear-gradient(234.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(52.3deg, transparent 50%, #6588af 50%, #6588af),

linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0);

background-size:11px 8px,/*Edge*/
11px 8px,

11px 4px, /*Right*/
11px 4px,

11px 8px, /*Edge*/
11px 8px,

7px 8px, /*Bottom*/
7px 8px,

11px 8px, /*Edge*/
11px 8px,

11px 4px, /*Left*/
11px 4px,

11px 8px, /*Edge*/
12px 8px,

7px 8px, /*Top*/
7px 8px;

background-position:22.9px 0px, /*Edge*/
22.9px 0px,

22.9px 8px, /*Right*/
22.9px 12px,

22.9px 16.1px, /*Edge*/
22.9px 16.1px,

16.9px 16.1px, /*Bottom*/
10.9px 16.1px,

0 16.1px, /*Edge*/
0 16.1px,

0 12px, /*Left*/
0 8px,

0 0, /*Edge*/
-1px 0,

10.9px 0, /*Top*/
16.9px 0;

background-repeat:no-repeat;

animation: spin 1.5s steps(1, start) infinite;

}
.paypal:before{
position:absolute;
content:”;
bottom:1.4px;
right:3px;
border:2px solid #1a4575;
width:3px;
height:6px;
border-radius:100% 100% 0 0;
box-shadow:0 0 0 1px white, 0 0 0 1px white inset;
transform:skew(20deg);
}

.paypal:after{
position:absolute;
content:”;
bottom:-1px;
right:1.5px;
width:8px;
height:7px;
background:#1a4575;

box-shadow:0 1px 0 1px white;
transform:skew(20deg);
}
[/CSS]
Và cuối cùng là style cho hiệu ứng nó hoạt động mượt mà hơn tí
[CSS]
@keyframes spin{
6.25%{
background-image:
linear-gradient(120.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(120.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(234.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(52.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab);
}
12.5%{
background-image:
linear-gradient(120.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(-52.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(234.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(52.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(0deg, #6588af, #6588af);
}
18.75%{
background-image:
linear-gradient(120.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(-52.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(234.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(52.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba);
}
25%{
background-image:
linear-gradient(120.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(-52.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(234.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(52.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4);
}
31.25%{
background-image:
linear-gradient(120.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(-52.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(52.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(52.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce);
}
37.5%{
background-image:
linear-gradient(120.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(-52.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(52.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(240deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8);
}
43.75%{
background-image:
linear-gradient(120.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(-52.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(52.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(240deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2);
}
50%{
background-image:
linear-gradient(120.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(-52.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(52.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(240deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec);
}
56.25%{
background-image:
linear-gradient(120.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(-52.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(52.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(240deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(-52.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
62.5%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(52.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(240deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(-52.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(120.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
68.75%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(52.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(240deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(-52.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(120.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
75%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(52.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(240deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(-52.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(120.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(234.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
81.25%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(240deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(-52.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(120.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(234.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
87.5%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #dce4ec 50%, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(0deg, #b7c6d8, #b7c6d8),
linear-gradient(-52.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(120.3deg, transparent 50%, #90a8c4 50%, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(0deg, #6588af, #6588af),
linear-gradient(234.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(52.3deg, transparent 50%, #1e55a0 50%, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
93.75%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(0deg, #c9d5e2, #c9d5e2),
linear-gradient(-52.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(120.3deg, transparent 50%, #a4b8ce 50%, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(0deg, #7c99ba, #7c99ba),
linear-gradient(234.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(52.3deg, transparent 50%, #3f6bab 50%, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0),
linear-gradient(0deg, #edf1f5, #edf1f5);
}
100%{
background-image:
linear-gradient(120.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(-52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(52.3deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(240deg, transparent 50%, #edf1f5 50%, #edf1f5),
linear-gradient(0deg, #edf1f5, #edf1f5),
linear-gradient(0deg, #dce4ec, #dce4ec),
linear-gradient(-52.3deg, transparent 50%, #c9d5e2 50%, #c9d5e2),
linear-gradient(120.3deg, transparent 50%, #b7c6d8 50%, #b7c6d8),
linear-gradient(0deg, #a4b8ce, #a4b8ce),
linear-gradient(0deg, #90a8c4, #90a8c4),
linear-gradient(234.3deg, transparent 50%, #7c99ba 50%, #7c99ba),
linear-gradient(52.3deg, transparent 50%, #6588af 50%, #6588af),
linear-gradient(0deg, #3f6bab, #3f6bab),
linear-gradient(0deg, #1e55a0, #1e55a0);
}
}
[/CSS]
Vậy là xong rồi đó, bạn đã có một hiệu ứng loading cực đẹp giống với Paypal. Cái này bạn có thể ứng dụng làm một control loading, sau đó nhúng vào Update Panel trong Asp.net, hoặc sử dụng ajax để nhúng. Chúc bạn có website đẹp.

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com