update weather widget

index.html

@@ -376,6 +376,38 @@
                 <p class="text-gray-600 text-lg" data-i18n="weather_desc">Lên kế hoạch cho chuyến đi của bạn với thông tin thời tiết chính xác.</p>
             </div>
 
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12">
+                <article class="bg-gradient-to-br from-sky-50 to-white border border-sky-100 p-6 sm:p-8 rounded-3xl shadow-sm">
+                    <h3 class="text-lg font-bold text-gray-900 mb-5" data-i18n="weather_current">Thời tiết hiện tại</h3>
+                    <div class="flex items-center gap-4">
+                        <i id="weather-current-icon" class="fa-solid fa-cloud-sun text-4xl text-amber-500" aria-hidden="true"></i>
+                        <div>
+                            <div id="weather-current-temperature" class="text-3xl font-extrabold text-gray-900">--°C</div>
+                            <div id="weather-current-condition" class="text-sm text-gray-600" data-i18n="weather_loading" aria-live="polite">Đang tải thời tiết...</div>
+                        </div>
+                    </div>
+                    <div class="flex gap-4 mt-5 text-sm text-gray-600">
+                        <span><span data-i18n="weather_high">Cao nhất</span>: <span id="weather-today-high">--°</span></span>
+                        <span><span data-i18n="weather_low">Thấp nhất</span>: <span id="weather-today-low">--°</span></span>
+                    </div>
+                </article>
+
+                <article class="bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 p-6 sm:p-8 rounded-3xl shadow-sm">
+                    <div class="flex items-baseline justify-between gap-3 mb-5">
+                        <h3 class="text-lg font-bold text-gray-900" data-i18n="weather_tomorrow">Ngày mai</h3>
+                        <time id="weather-tomorrow-date" class="text-sm text-gray-500"></time>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <i id="weather-tomorrow-icon" class="fa-solid fa-cloud-sun text-4xl text-amber-500" aria-hidden="true"></i>
+                        <div id="weather-tomorrow-condition" class="text-sm text-gray-600" data-i18n="weather_loading" aria-live="polite">Đang tải thời tiết...</div>
+                    </div>
+                    <div class="flex gap-4 mt-5 text-sm text-gray-600">
+                        <span><span data-i18n="weather_high">Cao nhất</span>: <span id="weather-tomorrow-high">--°</span></span>
+                        <span><span data-i18n="weather_low">Thấp nhất</span>: <span id="weather-tomorrow-low">--°</span></span>
+                    </div>
+                </article>
+            </div>
+
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                 <!-- Dry Season -->
                 <div class="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/60 p-8 rounded-3xl shadow-sm space-y-4">