├── api.png
├── README.md
├── index.html
└── covid19.gov.vn.css


/api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/doanminhquang/api_covid-19_vn/HEAD/api.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # api_covid-19_vn
 2 | Api (nguyên gốc: https://static.pipezero.com/covid/data.json) + Giao diện (có thay đổi nhẹ) tìm thấy tại: https://covid19.gov.vn/ <br><br>
 3 | ![api](https://github.com/doanminhquang/api_covid-19_vn/blob/main/api.png?raw=true)
 4 | <b>Lưu ý:</b><br>
 5 | &ensp;Các thông số đặt hidden ở giao diện gốc tức là không còn được update, hoặc update không đủ => sai<br>
 6 | &ensp;Thông số của Việt Nam được cập nhật vào khoảng 18:00 - 19:00 theo dữ liệu tính từ 16h hôm trước tới 16h hôm sau của mỗi ngày. Riêng dữ liệu về locations có sự thay đổi theo giời tgian theo từng tỉnh/thành phố<br>
 7 | &ensp;Chưa thử biểu đồ (dữ liệu từ api có '.overview') <br>
 8 | <b>Cấu trúc json:</b><br>
 9 | &ensp;<b>json = {total: {…}, today: {…}, overview: Array(7), locations: Array(63)}</b><br>
10 | &ensp;<b>json.total:</b> {internal: {…}, world: {…}} <br>
11 | &ensp;&ensp;internal: {death: … treating: …, cases: …, recovered: …} <br>
12 | &ensp;&ensp;world: {death: …, treating: …, cases: …, recovered: …} <br>
13 | &ensp;<b>json.today:</b> {internal: {…}, world: {…}} <br>
14 | &ensp;&ensp;internal: {death: …, treating: …, cases: …, recovered: …} <br>
15 | &ensp;&ensp;world: {death: …, treating: …, cases: …, recovered: …} <br>
16 | &ensp;<b>json.overview:</b> (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}] <br>
17 | &ensp;&ensp;0: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
18 | &ensp;&ensp;1: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
19 | &ensp;&ensp;2: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
20 | &ensp;&ensp;3: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
21 | &ensp;&ensp;4: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
22 | &ensp;&ensp;5: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
23 | &ensp;&ensp;6: {date: 'dd-mm', death: …, treating: …, cases: …, recovered: …, treating: …} <br>
24 | &ensp;<b>json.locations:</b> (63) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] <br>
25 | &ensp;&ensp;0: {name: 'TP. Hồ Chí Minh', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
26 | &ensp;&ensp;1: {name: 'Bình Dương', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
27 | &ensp;&ensp;2: {name: 'Đồng Nai', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
28 | &ensp;&ensp;3: {name: 'Long An', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
29 | &ensp;&ensp;4: {name: 'Tiền Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
30 | &ensp;&ensp;5: {name: 'Tây Ninh', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
31 | &ensp;&ensp;6: {name: 'An Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
32 | &ensp;&ensp;7: {name: 'Đồng Tháp', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
33 | &ensp;&ensp;8: {name: 'Kiên Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
34 | &ensp;&ensp;9: {name: 'Bình Thuận', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
35 | &ensp;&ensp;10: {name: 'Cần Thơ', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
36 | &ensp;&ensp;11: {name: 'Sóc Trăng', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
37 | &ensp;&ensp;12: {name: 'Bà Rịa – Vũng Tàu', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
38 | &ensp;&ensp;13: {name: 'Khánh Hòa', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
39 | &ensp;&ensp;14: {name: 'Bạc Liêu', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
40 | &ensp;&ensp;15: {name: 'Hà Nội', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
41 | &ensp;&ensp;16: {name: 'Vĩnh Long', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
42 | &ensp;&ensp;17: {name: 'Cà Mau', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
43 | &ensp;&ensp;18: {name: 'Đắk Lắk', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
44 | &ensp;&ensp;19: {name: 'Bắc Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
45 | &ensp;&ensp;20: {name: 'Trà Vinh', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
46 | &ensp;&ensp;21: {name: 'Bến Tre', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
47 | &ensp;&ensp;22: {name: 'Đà Nẵng', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
48 | &ensp;&ensp;23: {name: 'Bình Phước', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
49 | &ensp;&ensp;24: {name: 'Bắc Ninh', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
50 | &ensp;&ensp;25: {name: 'Nghệ An', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
51 | &ensp;&ensp;26: {name: 'Hậu Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
52 | &ensp;&ensp;27: {name: 'Hà Giang', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
53 | &ensp;&ensp;28: {name: 'Phú Yên', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
54 | &ensp;&ensp;29: {name: 'Ninh Thuận', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
55 | &ensp;&ensp;30: {name: 'Bình Định', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
56 | &ensp;&ensp;31: {name: 'Gia Lai', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
57 | &ensp;&ensp;32: {name: 'Thừa Thiên Huế', death: 11, treating: …, cases: …, recovered: …, treating: … } <br>
58 | &ensp;&ensp;33: {name: 'Quảng Nam', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
59 | &ensp;&ensp;34: {name: 'Quảng Ngãi', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
60 | &ensp;&ensp;35: {name: 'Quảng Bình', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
61 | &ensp;&ensp;36: {name: 'Thanh Hóa', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
62 | &ensp;&ensp;37: {name: 'Đắk Nông', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
63 | &ensp;&ensp;38: {name: 'Lâm Đồng', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
64 | &ensp;&ensp;39: {name: 'Phú Thọ', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
65 | &ensp;&ensp;40: {name: 'Hải Dương', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
66 | &ensp;&ensp;41: {name: 'Hà Nam', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
67 | &ensp;&ensp;42: {name: 'Nam Định', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
68 | &ensp;&ensp;43: {name: 'Thái Bình', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
69 | &ensp;&ensp;44: {name: 'Vĩnh Phúc', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
70 | &ensp;&ensp;45: {name: 'Hà Tĩnh', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
71 | &ensp;&ensp;46: {name: 'Quảng Trị', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
72 | &ensp;&ensp;47: {name: 'Hưng Yên', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
73 | &ensp;&ensp;48: {name: 'Quảng Ninh', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
74 | &ensp;&ensp;49: {name: 'Điện Biên', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
75 | &ensp;&ensp;50: {name: 'Tuyên Quang', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
76 | &ensp;&ensp;51: {name: 'Lạng Sơn', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
77 | &ensp;&ensp;52: {name: 'Kon Tum', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
78 | &ensp;&ensp;53: {name: 'Sơn La', death:  …, treating: …, cases: …, recovered: …, treating: … } <br>
79 | &ensp;&ensp;54: {name: 'Ninh Bình', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
80 | &ensp;&ensp;55: {name: 'Hòa Bình', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
81 | &ensp;&ensp;56: {name: 'Hải Phòng', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
82 | &ensp;&ensp;57: {name: 'Lào Cai', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
83 | &ensp;&ensp;58: {name: 'Thái Nguyên', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
84 | &ensp;&ensp;59: {name: 'Cao Bằng', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
85 | &ensp;&ensp;60: {name: 'Yên Bái', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
86 | &ensp;&ensp;61: {name: 'Lai Châu', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
87 | &ensp;&ensp;62: {name: 'Bắc Kạn', death: …, treating: …, cases: …, recovered: …, treating: … } <br>
88 | Demo tại: http://doanminhquang.github.io/api_covid-19_vn/ hoặc xem trực tiếp tại nguồn chính chủ: https://covid19.gov.vn/
89 | 
90 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |    <head>
  4 |       <meta name="viewport" content="width=device-width,initial-scale=1" />
  5 |       <link rel="stylesheet" href="covid19.gov.vn.css" />
  6 |    </head>
  7 |    <body>
  8 |       <div class="home__statistical-nav">
  9 |          <ul style="justify-content: flex-end;">
 10 |             <li><a class='a-hover' href="javascript:ReLoad_Data();" style="margin-right: 0">Làm mới dữ liệu</a></li>
 11 |          </ul>
 12 |       </div>
 13 |       <div class="home__statistical-nav">
 14 |          <ul style="justify-content: flex-start;">
 15 |             <li><a class="active" style='border: none' href="https://covid19.gov.vn/">Lưu ý: Dữ liệu tổng cập nhật vào khoảng 18H hàng ngày, riêng dữ liệu tại bảng sẽ có sự thay đổi tùy vào tỉnh/tp</a></li>
 16 |          </ul>
 17 |       </div>
 18 |       <div id="topCovidStatistics">
 19 |          <div id="topinfo">
 20 |             <div class="box-top">
 21 |                <div class="home__statistical-nav">
 22 |                   <ul style="justify-content: flex-start;">
 23 |                      <li><a href="javascript:open('tabvi', 'vi');" id="tabvi" class="a-hover tablinks active">Việt Nam</a></li>
 24 |                      <li><a href="javascript:open('taben', 'en');" id="taben" class="a-hover tablinks">Thế giới</a></li>
 25 |                   </ul>
 26 |                </div>
 27 |                <div class="home__statistical-nav-content">
 28 |                   <div class="content-tab show" id="vi">
 29 |                      <div class="home__statistical-list"></div>
 30 |                   </div>
 31 |                   <div class="content-tab" id="en">
 32 |                      <div class="home__statistical-list"></div>
 33 |                   </div>
 34 |                </div>
 35 |             </div>
 36 |          </div>
 37 |       </div>
 38 |       <br />
 39 |       <div class="home__statistical-nav">
 40 |          <ul>
 41 |             <li><span>Tình hình dịch cả nước</span></li>
 42 |          </ul>
 43 |          <ul style="justify-content: flex-end;">
 44 |             <li class="btn-hover" ><button class="btn-inner" style='margin-right: 5px; background: white; border: 1px solid #2e3192; 
 45 |                border-radius: 5px; height: 38px; margin-top: 8px; color: #2e3192' onclick="ExportCSV('Global')">Export CSV Global</button></li>
 46 |             <li class="btn-hover" ><button class="btn-inner" style='margin-right: 5px; background: white; border: 1px solid #2e3192; 
 47 |                border-radius: 5px; height: 38px; margin-top: 8px; color: #2e3192' onclick="ExportCSV('VN')">Export CSV VN</button></li>
 48 |             <li><input class="input_sreach" type="text" placeholder='Nhập tên hoặc quy ước...' id="sreach_input"/></li>
 49 |          </ul>
 50 |       </div>
 51 |       <div class="home__juncture-flex">
 52 |          <div class="box-juncture" id="location" style="width: 100%;">
 53 |             <div class="table-left">
 54 |                <div class="row head"><span class="city">Tỉnh/TP</span><span class="total">Tổng số ca</span><span class="daynow">Hôm nay</span><span class="die">Tử vong</span></div>
 55 |                <div class="tbody" id="data_locations"></div>
 56 |                <div class="btn-load btn-load--tinhthanh">
 57 |                   <a href="javascript:ShowMore();" class="xem-them"  id="xt" title="Xem thêm">Xem thêm</a>
 58 |                   <a href="javascript:Hidden();" class="rut-gon hidden" id="rg" title="Rút gọn">Rút gọn</a>
 59 |                </div>
 60 |             </div>
 61 |          </div>
 62 |       </div>
 63 |       <div id="back-to-top">
 64 |          <a href="javascript:topFunction();" id="btti" class="layout__sticky-icon">
 65 |             <span class="icon">
 66 |                <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 67 |                   <path d="M7 13.5L7 1" stroke="#9F9F9F" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
 68 |                   <path d="M1 6.77783L7 0.777832L13 6.77783" stroke="#9F9F9F" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
 69 |                </svg>
 70 |             </span>
 71 |             <span class="text">Top</span>
 72 |          </a>
 73 |       </div>
 74 |       <script type="text/javascript">
 75 |          var sreach_input = document.getElementById('sreach_input');
 76 |          var sreach_text = '';
 77 |          sreach_input.addEventListener('input', function (evt) {
 78 |           sreach_text = sreach_input.value;
 79 |           render_table();
 80 |          });
 81 |       </script>
 82 |       <script type="text/javascript">
 83 |          var btn_to_top = document.getElementById("back-to-top");
 84 |          var inner_btn =  document.getElementById("btti");
 85 |          
 86 |          window.onload = function() {scrollFunction()};
 87 |          window.onscroll = function() {scrollFunction()};
 88 |          
 89 |          function scrollFunction() {
 90 |           if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 91 |            btn_to_top.className = "show";
 92 |            inner_btn.style.display ='flex';
 93 |          } else {
 94 |            btn_to_top.classList.remove("show");
 95 |            inner_btn.style.display ='none';
 96 |          }
 97 |          }
 98 |          
 99 |          function topFunction() {
100 |          document.body.scrollTop = 0;
101 |          document.documentElement.scrollTop = 0;
102 |          }
103 |       </script>
104 |       <script type="text/javascript">
105 |          function open(e, t) {
106 |           var s, n, a;
107 |           for (n = document.getElementsByClassName("content-tab"), s = 0; s < n.length; s++) n[s].classList.remove("show");
108 |            for (a = document.getElementsByClassName("tablinks"), s = 0; s < a.length; s++) a[s].classList.remove("active");
109 |             (document.getElementById(t).className += " show"), (document.getElementById(e).className += " active");
110 |          }
111 |       </script>
112 |       <script type="text/javascript">
113 |          function numberWithCommas(e) {
114 |           return e.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
115 |          }
116 |       </script>
117 |       <script type="text/javascript">
118 |          var data = '';
119 |          var data_global = [];
120 |          //https://covid19.gov.vn/  
121 |          const URL = "https://static.pipezero.com/covid/data.json";
122 |          const URL_Global = "https://api.apify.com/v2/datasets/UmDvyef6tqie4oAMN/items";	
123 |          
124 |          function fetch_data(){
125 |           fetch(URL)
126 |           .then((res) => res.text())
127 |           .then((text) => {
128 |            data = JSON.parse(text);
129 |            render();
130 |          }).catch((err) => console.log(err));
131 |          }
132 |                   
133 |          function fetch_data_global(){
134 |           fetch(URL_Global)
135 |           .then((res) => res.text())
136 |           .then((text) => {
137 |            data_global = JSON.parse(text);
138 |            //
139 |          let temparr = [];
140 |          let items = data_global ? data_global[0].regionData : [];
141 |          let None = ['World', 
142 |          'Europe', 
143 |          'Asia', 
144 |          'North America', 
145 |          'South America', 
146 |          'Africa', 
147 |          'Oceania', 
148 |          '', 
149 |          'Total:']
150 |          for(let i = 0; i < items.length; i++){
151 | 			if(None.indexOf(items[i].country) === -1){
152 | 			temparr.push(items[i]);
153 | 			}
154 |          }
155 |          data_global[0].regionData = temparr;
156 |          //
157 |          }).catch((err) => console.log(err));
158 |          }
159 |          
160 |          function ReLoad_Data(){
161 |          fetch_data();
162 |          fetch_data_global();
163 |          }
164 |          
165 |          ReLoad_Data();
166 |          
167 |          function render(){
168 |            // data top info internal
169 |            let internal_today_data = new Object();
170 |            internal_today_data.death = data.today.internal.death ? data.today.internal.death : "0";
171 |            internal_today_data.treating = data.today.internal.treating ? data.today.internal.treating : "0";
172 |            internal_today_data.cases = data.today.internal.cases ? data.today.internal.cases : "0";
173 |            internal_today_data.recovered = data.today.internal.recovered ? data.today.internal.recovered : "0";
174 |            let internal_total_data = new Object();
175 |            internal_total_data.death = data.total.internal.death ? data.total.internal.death : "0";
176 |            internal_total_data.treating = data.total.internal.treating ? data.total.internal.treating : "0";
177 |            internal_total_data.cases = data.total.internal.cases ? data.total.internal.cases : "0";
178 |            internal_total_data.recovered = data.total.internal.recovered ? data.total.internal.recovered : "0";
179 |            // render top info of internal
180 |            document.getElementById("vi").getElementsByClassName("home__statistical-list")[0].innerHTML =
181 |            '<div class="item"><p class="text">SỐ CA NHIỄM</p><p class="value">' +
182 |            numberWithCommas(internal_total_data.cases) +
183 |            '</p><p class="note">Hôm nay +<span>' +
184 |            numberWithCommas(internal_today_data.cases) +
185 |            '</span></p></div><div class="item hidden"><p class="text">ĐANG ĐIỀU TRỊ</p><p class="value">' +
186 |            numberWithCommas(internal_total_data.treating) +
187 |            '</p><p class="note hidden">Hôm nay +<span>' +
188 |            numberWithCommas(internal_today_data.treating) +
189 |            '</span></p></div><div class="item"><p class="text">KHỎI</p><p class="value">' +
190 |            numberWithCommas(internal_total_data.recovered) +
191 |            '</p><p class="note hidden">Hôm nay +<span>' +
192 |            numberWithCommas(internal_today_data.recovered) +
193 |            '</span></p></div><div class="item"><p class="text">TỬ VONG</p><p class="value">' +
194 |            numberWithCommas(internal_total_data.death) +
195 |            '</p><p class="note hidden">Hôm nay +<span>' +
196 |            numberWithCommas(internal_today_data.death) +
197 |            "</span></p></div>";
198 |            // data top info world
199 |            let world_today_data = new Object();
200 |            world_today_data.death = data.today.world.death ? data.today.world.death : "0";
201 |            world_today_data.treating = data.today.world.treating ? data.today.world.treating : "0";
202 |            world_today_data.cases = data.today.world.cases ? data.today.world.cases : "0";
203 |            world_today_data.recovered = data.today.world.recovered ? data.today.world.recovered : "0";
204 |            let world_total_data = new Object();
205 |            world_total_data.death = data.total.world.death ? data.total.world.death : "0";
206 |            world_total_data.treating = data.total.world.treating ? data.total.world.treating : "0";
207 |            world_total_data.cases = data.total.world.cases ? data.total.world.cases : "0";
208 |            world_total_data.recovered = data.total.world.recovered ? data.total.world.recovered : "0";
209 |            // render top info of world
210 |            document.getElementById("en").getElementsByClassName("home__statistical-list")[0].innerHTML =
211 |            '<div class="item"><p class="text">SỐ CA NHIỄM</p><p class="value">' +
212 |            numberWithCommas(world_total_data.cases) +
213 |            '</p><p class="note">Hôm nay +<span>' +
214 |            numberWithCommas(world_today_data.cases) +
215 |            '</span></p></div><div class="item hidden"><p class="text">ĐANG ĐIỀU TRỊ</p><p class="value">' +
216 |            numberWithCommas(world_total_data.treating) +
217 |            '</p><p class="note hidden">Hôm nay +<span>' +
218 |            numberWithCommas(world_today_data.treating) +
219 |            '</span></p></div><div class="item"><p class="text">KHỎI</p><p class="value">' +
220 |            numberWithCommas(world_total_data.recovered) +
221 |            '</p><p class="note hidden">Hôm nay +<span>' +
222 |            numberWithCommas(world_today_data.recovered) +
223 |            '</span></p></div><div class="item"><p class="text">TỬ VONG</p><p class="value">' +
224 |            numberWithCommas(world_total_data.death) +
225 |            '</p><p class="note hidden">Hôm nay +<span>' +
226 |            numberWithCommas(world_today_data.death) +
227 |            "</span></p></div>";
228 |            render_table();
229 |          }
230 |          
231 |          function render_table(){
232 |            // data of locations internal
233 |            let locations = data.locations;
234 |            // render
235 |            var textdata = "";
236 |            var total_table = new Object();
237 |            total_table.name = 'Tổng dữ liệu trong bảng';
238 |            total_table.cases = 0;
239 |            total_table.casesToday = 0;
240 |            total_table.death = 0;
241 |            for (var i in locations) {
242 |             var locations_data = new Object();            
243 |             locations_data.name = locations[i].name ? locations[i].name : "";
244 |             locations_data.cases = locations[i].cases ? numberWithCommas(locations[i].cases) : "0";
245 |             locations_data.casesToday = locations[i].casesToday ? '+'+numberWithCommas(locations[i].casesToday) : "-";
246 |             locations_data.death = locations[i].death ? numberWithCommas(locations[i].death) : "0";
247 |           // so sánh sâu giống like '%value%' trong sql
248 |            var regex = new RegExp('.*'+sreach_text.toLowerCase()+'.*');
249 |            var matchesRegex1 = regex.test(locations_data.name.toLowerCase());
250 |           // tìm kí tự viết tắt
251 |            let obj = quyuoc.find(o => o.name.toLowerCase() === locations_data.name.toLowerCase());
252 |            // so sánh 
253 |            var matchesRegex2 = regex.test(obj.sortname.toLowerCase());
254 |           // xét điều khiện xuất hiện
255 |           if (matchesRegex1 || sreach_text.length === 0 || matchesRegex2) {
256 |            textdata +=
257 |            '<div class="row"><span class="city">' +
258 |            locations_data.name +
259 |            '</span><span class="total">' +
260 |            locations_data.cases  +
261 |            '</span><span class="daynow red">' +
262 |            locations_data.casesToday +
263 |            '</span><span class="die">' +
264 |            locations_data.death +
265 |            "</span></div>";	
266 |            total_table.cases += locations[i].cases;
267 |            total_table.casesToday += locations[i].casesToday;
268 |            total_table.death += locations[i].death;
269 |          }
270 |          }
271 |          textdata +=
272 |          '<div class="row"><span class="city">' +
273 |          total_table.name +
274 |          '</span><span class="total">' +
275 |          numberWithCommas(total_table.cases)  +
276 |          '</span><span class="daynow red">' +
277 |          numberWithCommas(total_table.casesToday) +
278 |          '</span><span class="die">' +
279 |          numberWithCommas(total_table.death) +
280 |          "</span></div>";
281 |          document.getElementById("data_locations").innerHTML = textdata;
282 |          }
283 |          // ký hiệu quy ước viết tắt
284 |          const quyuoc=[{"name":"An Giang","sortname":"AG"},{"name":"Bà Rịa – Vũng Tàu","sortname":"BV"},{"name":"Bạc Liêu","sortname":"BL"},{"name":"Bắc Kạn","sortname":"BK"},{"name":"Bắc Giang","sortname":"BG"},{"name":"Bắc Ninh","sortname":"BN"},{"name":"Bến Tre","sortname":"BT"},{"name":"Bình Dương","sortname":"BD"},{"name":"Bình Định","sortname":"BĐ"},{"name":"Bình Phước","sortname":"BP"},{"name":"Bình Thuận","sortname":"BTh"},{"name":"Cà Mau","sortname":"CM"},{"name":"Cao Bằng","sortname":"CB"},{"name":"Cần Thơ","sortname":"CT"},{"name":"Đà Nẵng","sortname":"ĐNa"},{"name":"Đắk Lắk","sortname":"ĐL"},{"name":"Đắk Nông","sortname":"ĐNo"},{"name":"Điện Biên","sortname":"ĐB"},{"name":"Đồng Nai","sortname":"ĐN"},{"name":"Đồng Tháp","sortname":"ĐT"},{"name":"Gia Lai","sortname":"GL"},{"name":"Hà Giang","sortname":"HG"},{"name":"Hà Nam","sortname":"HNa"},{"name":"Hà Nội","sortname":"HN"},{"name":"Hà Tĩnh","sortname":"HT"},{"name":"Hải Dương","sortname":"HD"},{"name":"Hải Phòng","sortname":"HP"},{"name":"Hậu Giang","sortname":"HGi"},{"name":"Hòa Bình","sortname":"HB"},{"name":"TP. Hồ Chí Minh","sortname":"SG"},{"name":"Hưng Yên","sortname":"HY"},{"name":"Khánh Hòa","sortname":"KH"},{"name":"Kiên Giang","sortname":"KG"},{"name":"Kon Tum","sortname":"KT"},{"name":"Lai Châu","sortname":"LC"},{"name":"Lạng Sơn","sortname":"LS"},{"name":"Lào Cai","sortname":"LCa"},{"name":"Lâm Đồng","sortname":"LĐ"},{"name":"Long An","sortname":"LA"},{"name":"Nam Định","sortname":"NĐ"},{"name":"Nghệ An","sortname":"NA"},{"name":"Ninh Bình","sortname":"NB"},{"name":"Ninh Thuận","sortname":"NT"},{"name":"Phú Thọ","sortname":"PT"},{"name":"Phú Yên","sortname":"PY"},{"name":"Quảng Bình","sortname":"QB"},{"name":"Quảng Nam","sortname":"QNa"},{"name":"Quảng Ngãi","sortname":"QNg"},{"name":"Quảng Ninh","sortname":"QN"},{"name":"Quảng Trị","sortname":"QT"},{"name":"Sóc Trăng","sortname":"ST"},{"name":"Sơn La","sortname":"SL"},{"name":"Tây Ninh","sortname":"TN"},{"name":"Thái Bình","sortname":"TB"},{"name":"Thái Nguyên","sortname":"TNg"},{"name":"Thanh Hóa","sortname":"TH"},{"name":"Thừa Thiên Huế","sortname":"TTH"},{"name":"Tiền Giang","sortname":"TG"},{"name":"Trà Vinh","sortname":"TV"},{"name":"Tuyên Quang","sortname":"TQ"},{"name":"Vĩnh Long","sortname":"VL"},{"name":"Vĩnh Phúc","sortname":"VP"},{"name":"Yên Bái","sortname":"YB"}]
285 |       </script>
286 |       <script type="text/javascript">
287 |          var data_table = document.getElementById('data_locations');
288 |          function ShowMore(){
289 |           data_table.classList.add('all');
290 |           document.getElementById('xt').classList.add('hidden');
291 |           document.getElementById('rg').classList.remove('hidden');    
292 |          }
293 |          
294 |          function Hidden(){
295 |           data_table.classList.remove('all');
296 |           document.getElementById('xt').classList.remove('hidden');
297 |           document.getElementById('rg').classList.add('hidden');    
298 |          }
299 |       </script>
300 |       <script type="text/javascript">
301 |          function ExportCSV(str){
302 |          	const items = str === 'VN' ? data.locations : data_global[0].regionData;
303 |          	const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
304 |          	const header = Object.keys(items[0]);
305 |          	const csv = [
306 |          	  header.join(','), // Tiêu đề 
307 |          	  ...items.map(row => 
308 |          header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(',') 
309 |          )
310 |          	].join('\r\n');
311 |          
312 |          	//Tải file
313 |             var downloadLink = document.createElement("a");
314 |             var blob = new Blob(["\ufeff", csv]);
315 |             var url = window.URL.createObjectURL(blob);
316 |             downloadLink.href = url;
317 | 			const today = new Date();
318 | 			const yyyy = today.getFullYear();
319 | 			let mm = today.getMonth() + 1; 
320 | 			let dd = today.getDate();
321 | 			if (dd < 10) dd = '0' + dd;
322 | 			if (mm < 10) mm = '0' + mm;
323 | 			const Time = dd + '/' + mm + '/' + yyyy+ '_'+today.getHours()+ ":"+today.getMinutes()+ ':'+today.getSeconds();
324 | 			downloadLink.download = str === 'VN' ? "Data_Covid_VN_"+Time+".csv": "Data_Covid_Global_"+Time+".csv";  // Tên file
325 |             document.body.appendChild(downloadLink);
326 |             downloadLink.click();
327 |             document.body.removeChild(downloadLink);
328 |          }
329 |       </script>
330 |    </body>
331 | </html>
332 | 


--------------------------------------------------------------------------------
/covid19.gov.vn.css:
--------------------------------------------------------------------------------
1 | body{margin:0;padding:0}*,::after,::before{box-sizing:border-box}@font-face{font-family:Merriweather;font-weight:400;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:500;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:600;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:700;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.eot) format("embedded-opentype")}a{text-decoration:none;color:#333}ul{padding:0;margin:0;list-style:none}p{margin:0}.home__statistical{margin:30px 0 20px}.home__statistical-nav{margin-bottom:9.5px}@media (max-width:767px){.home__statistical-nav{margin-bottom:13px}}.home__statistical-nav ul{display:flex;align-items:center}.home__statistical-nav ul li{display:flex;align-items:center;margin-left:16px}@media (max-width:767px){.home__statistical-nav ul li{margin-left:0}}.home__statistical-nav ul li:before{content:"/";height:24px;left:0;font-size:34px;margin-right:16px;position:relative;top:-6px;color:#c0c1de}@media (max-width:767px){.home__statistical-nav ul li:before{display:none}}.home__statistical-nav ul li:first-child{margin-left:0}.home__statistical-nav ul li:first-child:before{display:none}.home__statistical-nav ul li a{font-weight:700;font-size:18px;line-height:130%;color:rgba(46,49,146,.6);display:block;position:relative;font-family:Merriweather}@media (max-width:767px){.home__statistical-nav ul li a{padding-left:0;margin-right:20px;border-bottom:3px solid transparent;font-size:18px;line-height:130%;color:#666}.home__statistical-nav ul li a.active{border-bottom-color:#2e3192;color:#2e3192}.home__statistical-nav ul li a:after,.home__statistical-nav ul li a:before{display:none}}.home__statistical-nav ul li a.active{font-size:22px;line-height:130%;color:#2e3192;font-weight:700;font-family:Merriweather;padding-left:16px;position:relative}@media (max-width:767px){.home__statistical-nav ul li a.active{padding-left:0}}.home__statistical-nav ul li a.active:before{content:"";width:3px;height:24px;background:#2e3192;left:0;top:2px;position:absolute}.home__statistical-nav ul li a.active:after{content:"";width:3px;height:24px;background:#ed1c24;left:3px;top:2px;position:absolute}.home__statistical-nav-content{display:flex;justify-content:space-between}.home__statistical-nav-content .content-tab{width:100%;display:none}.home__statistical-nav-content .content-tab.show{display:block}.home__statistical-list{display:flex;justify-content:space-between}@media (max-width:1199px){.home__statistical-list{flex-wrap:wrap}}#en .item .note{display:none}.home__statistical-list .item p{text-align:center;line-break:anywhere}.home__statistical-list .item{width:calc(33% - 9.75px);text-align:center;background:rgba(237,28,36,.1);padding:8px}@media (max-width:1000px){.home__statistical-list .item{width:calc(33% - 10px);margin-bottom:10px}}@media (max-width:767px){.home__statistical-list .item{width:calc(33% - 6.5px);margin-bottom:13px}}.home__statistical-list .item:nth-child(2){background:rgba(255,156,0,.1)}.home__statistical-list .item:nth-child(2) .value{color:#ff9c00}.home__statistical-list .item:nth-child(3){background:rgba(40,167,69,.1)}.home__statistical-list .item:nth-child(3) .value{color:#28a745}.home__statistical-list .item:nth-child(4){background:#f0eff4}.home__statistical-list .item:nth-child(4) .value{color:#333}.home__statistical-list .item .text{font-size:13px;line-height:160%;text-align:center;color:#333;font-family:Merriweather;font-weight:600}.home__statistical-list .item .value{font-weight:800;font-size:18px;line-height:22px;color:#ed1c24;font-family:Merriweather}.home__statistical-list .item .note{font-family:Arial;font-style:normal;font-weight:400;font-size:13px;line-height:160%;color:#666}.home__statistical-list .item .note span{font-weight:600}.home__juncture-flex{margin-top:7px;display:flex;justify-content:space-between}@media (max-width:991px){.home__juncture-flex{flex-wrap:wrap}}.home__juncture-flex .box-juncture{width:calc(50% - 20px)}@media (max-width:991px){.home__juncture-flex .box-juncture{width:100%;margin-bottom:20px}.home__juncture-flex .box-juncture:last-child{margin-bottom:0}}.home__juncture-flex .table-left{border:1px solid #eaeaf4;box-sizing:border-box;border-radius:3px;height:100%;padding:0 10px}@media (max-width:991px){.home__juncture-flex .table-left{margin-bottom:20px}}@media (max-width:575px){.home__juncture-flex .table-left{padding:0}}.hidden{display:none}body{margin:0;padding:0}*,::after,::before{box-sizing:border-box}@font-face{font-family:Merriweather;font-weight:400;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:500;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:600;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:700;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.eot) format("embedded-opentype")}a{text-decoration:none;color:#333}ul{padding:0;margin:0;list-style:none}p{margin:0}.home__juncture-flex{display:flex;justify-content:space-between}.home__statistical-nav ul{display:flex;justify-content:space-between}.home__statistical-nav ul li span{font-size:22px;line-height:130%;color:#2e3192;font-weight:700;font-family:Merriweather;padding-left:16px}.home__statistical-nav ul li span:before{content:"";width:3px;height:24px;background:#2e3192;left:0;position:absolute}.home__statistical-nav ul li span:after{content:"";width:3px;height:24px;background:#ed1c24;left:3px;position:absolute}@media (max-width:991px){.home__juncture-flex{flex-wrap:wrap}}.home__juncture-flex .box-juncture{width:calc(50% - 20px)}@media (max-width:991px){.home__juncture-flex .box-juncture{width:100%;margin-bottom:20px}.home__juncture-flex .box-juncture:last-child{margin-bottom:0}}.home__juncture-flex .table-left{border:1px solid #eaeaf4;box-sizing:border-box;border-radius:3px;height:100%;padding:0 10px;position:relative}@media (max-width:991px){.home__juncture-flex .table-left{margin-bottom:20px}}@media (max-width:575px){.home__juncture-flex .table-left{padding:0}}.home__juncture-flex .table-left .row{width:100%;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px;font-size:15px;line-height:100%;color:#333;font-family:Merriweather;padding:15px 10px}.home__juncture-flex .table-left .row:last-child{border-bottom:0}.home__juncture-flex .table-left .row.head{font-weight:500;margin:0 10px;width:calc(100% - 20px)}.home__juncture-flex .table-left .row .die{width:69px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow{width:74px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow.red{color:#da2e59}.home__juncture-flex .table-left .row .total{width:80px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .city{flex:1}.home__juncture-flex .table-left .tbody{max-height:400px;overflow-y:auto;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}.home__juncture-flex .table-left .tbody::-webkit-scrollbar{width:5px}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-track{background:#fff}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-thumb{background:#f0eff4}a.hidden{display:none}@media (max-width:575px){.home__juncture-flex .table-left .row{padding:15px 0}.home__juncture-flex .table-left .tbody{max-height:none;overflow-y:none;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}div.tbody div:nth-child(7)~div{display:none!important}}body{margin:0;padding:0}*,::after,::before{box-sizing:border-box}@font-face{font-family:Merriweather;font-weight:400;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:500;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:600;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:700;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.eot) format("embedded-opentype")}a{text-decoration:none;color:#333}ul{padding:0;margin:0;list-style:none}p{margin:0}.home__juncture-flex{display:flex;justify-content:space-between}.home__statistical-nav ul{display:flex;justify-content:space-between}.home__statistical-nav ul li span{font-size:22px;line-height:130%;color:#2e3192;font-weight:700;font-family:Merriweather;padding-left:16px}.home__statistical-nav ul li span:before{content:"";width:3px;height:24px;background:#2e3192;left:0;position:absolute}.home__statistical-nav ul li span:after{content:"";width:3px;height:24px;background:#ed1c24;left:3px;position:absolute}@media (max-width:991px){.home__juncture-flex{flex-wrap:wrap}}.home__juncture-flex .box-juncture{width:calc(50% - 20px)}@media (max-width:991px){.home__juncture-flex .box-juncture{width:100%;margin-bottom:20px}.home__juncture-flex .box-juncture:last-child{margin-bottom:0}}.home__juncture-flex .table-left{border:1px solid #eaeaf4;box-sizing:border-box;border-radius:3px;height:100%;padding:0 10px;position:relative}@media (max-width:991px){.home__juncture-flex .table-left{margin-bottom:20px}}@media (max-width:575px){.home__juncture-flex .table-left{padding:0}}.home__juncture-flex .table-left .row{width:100%;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px;font-size:15px;line-height:100%;color:#333;font-family:Merriweather;padding:15px 10px}.home__juncture-flex .table-left .row:last-child{border-bottom:0}.home__juncture-flex .table-left .row.head{font-weight:500;margin:0 10px;width:calc(100% - 20px)}.home__juncture-flex .table-left .row .die{width:69px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow{width:74px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow.red{color:#da2e59}.home__juncture-flex .table-left .row .total{width:80px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .city{flex:1}.home__juncture-flex .table-left .tbody{max-height:400px;overflow-y:auto;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}.home__juncture-flex .table-left .tbody::-webkit-scrollbar{width:5px}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-track{background:#fff}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-thumb{background:#f0eff4}.btn-load .xem-them{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='17' viewBox='0 0 14 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.299804 9.60859L1.6998 8.20859L5.9998 12.5086L5.9998 0.308594L7.9998 0.308594L7.9998 12.5086L12.2998 8.20859L13.6998 9.60859L6.9998 16.3086L0.299804 9.60859Z' fill='%23757575'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:9px 7px}.btn-load .rut-gon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='17' viewBox='0 0 14 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.300048 7.2238L1.70005 8.6238L6.00005 4.3238L6.00005 16.5238L8.00005 16.5238L8.00005 4.3238L12.3 8.6238L13.7 7.2238L7.00005 0.523803L0.300048 7.2238Z' fill='%23757575'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:9px 7px}.btn-load{margin-top:15px;display:none;text-align:center}.btn-load a{background:#e5e5e5;border-radius:100px;font-size:14px;color:#757575;height:32px;position:relative;line-height:32px;padding:0 15px 0 30px;display:inline-block;font-family:Merriweather}a.hidden{display:none}@media (max-width:575px){.home__juncture-flex .table-left .row{padding:15px 0}.btn-load{display:block}.home__juncture-flex .table-left .tbody{max-height:none;overflow-y:none;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}div.tbody div:nth-child(7)~div{display:none!important}}a:hover{color:#004a82;text-decoration:none}.layout__sticky-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:40px;height:40px;background:#f9f9f9;border:1px solid #e9e9e9;border-radius:4px;position:fixed;right:0;bottom:100px;z-index:9;flex-direction:column}a{text-decoration:none;color:#333}body{margin:0;padding:0}*,::after,::before{box-sizing:border-box}@font-face{font-family:Merriweather;font-weight:400;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Regular.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:500;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Medium.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:600;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-SemiBold.eot) format("embedded-opentype")}@font-face{font-family:Merriweather;font-weight:700;font-style:normal;src:url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff2) format("woff2"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.woff) format("woff"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.ttf) format("truetype"),url(https://static.pipezero.com/covid-sumary/fonts/MerriweatherSans-Bold.eot) format("embedded-opentype")}a{text-decoration:none;color:#333}ul{padding:0;margin:0;list-style:none}p{margin:0}.home__juncture-flex{display:flex;justify-content:space-between}.home__statistical-nav ul{display:flex;justify-content:space-between}.home__statistical-nav ul li span{font-size:22px;line-height:130%;color:#2e3192;font-weight:700;font-family:Merriweather;padding-left:16px}.home__statistical-nav ul li span:before{content:"";width:3px;height:24px;background:#2e3192;left:0;position:absolute}.home__statistical-nav ul li span:after{content:"";width:3px;height:24px;background:#ed1c24;left:3px;position:absolute}@media (max-width:991px){.home__juncture-flex{flex-wrap:wrap}}.home__juncture-flex .box-juncture{width:calc(50% - 20px)}@media (max-width:991px){.home__juncture-flex .box-juncture{width:100%;margin-bottom:20px}.home__juncture-flex .box-juncture:last-child{margin-bottom:0}}.home__juncture-flex .table-left{border:1px solid #eaeaf4;box-sizing:border-box;border-radius:3px;height:100%;padding:0 10px;position:relative}@media (max-width:991px){.home__juncture-flex .table-left{margin-bottom:20px}}@media (max-width:575px){.home__juncture-flex .table-left{padding:0}}.home__juncture-flex .table-left .row{width:100%;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px;font-size:15px;line-height:100%;color:#333;font-family:Merriweather;padding:15px 10px}.home__juncture-flex .table-left .row:last-child{border-bottom:0}.home__juncture-flex .table-left .row.head{font-weight:500;margin:0 10px;width:calc(100% - 20px)}.home__juncture-flex .table-left .row .die{width:69px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow{width:74px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .daynow.red{color:#da2e59}.home__juncture-flex .table-left .row .total{width:80px;text-align:right;margin-left:10px}.home__juncture-flex .table-left .row .city{flex:1}.home__juncture-flex .table-left .tbody{max-height:400px;overflow-y:auto;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}.home__juncture-flex .table-left .tbody::-webkit-scrollbar{width:5px}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-track{background:#fff}.home__juncture-flex .table-left .tbody::-webkit-scrollbar-thumb{background:#f0eff4}.btn-load .xem-them{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='17' viewBox='0 0 14 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.299804 9.60859L1.6998 8.20859L5.9998 12.5086L5.9998 0.308594L7.9998 0.308594L7.9998 12.5086L12.2998 8.20859L13.6998 9.60859L6.9998 16.3086L0.299804 9.60859Z' fill='%23757575'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:9px 7px}.btn-load .rut-gon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='17' viewBox='0 0 14 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.300048 7.2238L1.70005 8.6238L6.00005 4.3238L6.00005 16.5238L8.00005 16.5238L8.00005 4.3238L12.3 8.6238L13.7 7.2238L7.00005 0.523803L0.300048 7.2238Z' fill='%23757575'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:9px 7px}.btn-load{margin-top:15px;display:none;text-align:center}.btn-load a{background:#e5e5e5;border-radius:100px;font-size:14px;color:#757575;height:32px;position:relative;line-height:32px;padding:0 15px 0 30px;display:inline-block;font-family:Merriweather}a.hidden{display:none}@media (max-width:575px){.home__juncture-flex .table-left .row{padding:15px 0}.btn-load{display:block}.home__juncture-flex .table-left .tbody{max-height:none;overflow-y:none;padding:0 10px;scrollbar-color:#f0eff4 #fff;scrollbar-width:thin}div.tbody div:nth-child(7)~div{display:none!important}div.all div:nth-child(7)~div{display:flex!important}.all{max-height:none!important;overflow-y:none}}.input_sreach{float:right;padding:8px;padding-left:15px;padding-right:15px;border:1px solid #2e3192;margin-top:8px;font-size:17px;border-radius:15px}.input_sreach:focus{outline:0}@media screen and (max-width:600px){.input_sreach{float:none;display:block;text-align:left;width:100%;margin-top:8px;padding:10px;padding-left:15px;padding-right:15px;border:1px solid #2e3192}}
2 | 


--------------------------------------------------------------------------------