/* Giao diện thời tiết trên trang tag tỉnh thành */
.wt-page { --wt-red: #a10000; --wt-red-dark: #7a0000; --wt-text: #222; --wt-sub: #757575; --wt-line: #ebebeb; --wt-bg: #f7f7f7; --wt-high: #e8590c; --wt-low: #1c7ed6; font-family: Roboto, Arial, sans-serif; color: var(--wt-text); padding: 16px 0 8px; }
.wt-page *, .wt-page *::before, .wt-page *::after { box-sizing: border-box; }
.wt-page ul { list-style: none; margin: 0; padding: 0; }
.wt-page h2, .wt-page h3 { margin: 0; }

.wt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--wt-red); }
.wt-head__title { font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--wt-red); }
.wt-head__title span { color: var(--wt-text); }
.wt-head__select { position: relative; display: inline-block; }
.wt-head__select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--wt-sub); border-bottom: 2px solid var(--wt-sub); transform: rotate(45deg); pointer-events: none; }
.wt-head__select select { appearance: none; -webkit-appearance: none; min-width: 200px; height: 38px; padding: 0 34px 0 12px; font: inherit; font-size: 15px; color: var(--wt-text); background: #fff; border: 1px solid #d6d6d6; border-radius: 6px; cursor: pointer; }
.wt-head__select select:focus { outline: 2px solid var(--wt-red); outline-offset: 1px; }

.wt-wrap { display: flex; gap: 24px; align-items: flex-start; }
.wt-left { flex: 1 1 auto; min-width: 0; }
.wt-right { flex: 0 0 300px; width: 300px; }

.wt-box { background: #fff; border: 1px solid var(--wt-line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.wt-box__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.wt-box__top .wt-box__title { margin-bottom: 0; }
.wt-box__title { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 12px !important; }
.wt-box__title small { font-size: 13px; font-weight: 400; color: var(--wt-sub); margin-left: 6px; }

.is-loading { min-height: 120px; border-radius: 6px; background: linear-gradient(90deg, #f3f3f3 25%, #e9e9e9 37%, #f3f3f3 63%); background-size: 400% 100%; animation: wt-shimmer 1.4s ease infinite; }
.wt-overview.is-loading { min-height: 280px; display: flex; align-items: center; justify-content: center; }
#wt-hourly.is-loading { min-height: 250px; }
#wt-daily.is-loading { min-height: 280px; }
@keyframes wt-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.wt-loading, .wt-empty { color: var(--wt-sub); font-size: 14px; padding: 12px 0; text-align: center; }
.wt-page.is-error #wt-hourly-box, .wt-page.is-error #wt-daily-box, .wt-page.is-error #wt-aqi-box, .wt-page.is-error #wt-astro-box { display: none; }

/* Tổng quan */
.wt-overview { padding: 0; overflow: hidden; }
.wt-overview__main { position: relative; background: #3d6fa8 center / cover no-repeat; color: #fff; }
.wt-overview__main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); }
.wt-overview__inner { position: relative; padding: 20px 24px; }
.wt-overview__loc { font-size: 22px; font-weight: 700; }
.wt-overview__time { font-size: 13px; opacity: .85; margin-top: 2px; }
.wt-overview__now { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wt-overview__icon { width: 84px; height: 84px; }
.wt-overview__temp { font-size: 72px; line-height: 1; font-weight: 300; }
.wt-overview__status { font-size: 18px; font-weight: 500; margin-top: 6px; }
.wt-overview__feel { font-size: 14px; margin-top: 4px; opacity: .95; }
.wt-overview__range { display: flex; gap: 16px; margin-top: 8px; font-size: 15px; font-weight: 500; }
.wt-up::before { content: "↑ "; }
.wt-down::before { content: "↓ "; }

.wt-overview__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--wt-line); }
.wt-overview__stats li { padding: 12px 16px; border-right: 1px solid var(--wt-line); border-top: 1px solid var(--wt-line); }
.wt-overview__stats li:nth-child(4n) { border-right: 0; }
.wt-overview__stats li:nth-child(-n+4) { border-top: 0; }
.wt-overview__stats span { display: block; font-size: 13px; color: var(--wt-sub); }
.wt-overview__stats b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }

.wt-overview__dn { display: grid; grid-template-columns: 1fr 1fr; }
.wt-dn { display: flex; gap: 10px; align-items: center; padding: 12px 16px; }
.wt-dn + .wt-dn { border-left: 1px solid var(--wt-line); }
.wt-dn img { width: 44px; height: 44px; flex: 0 0 44px; }
.wt-dn span { display: block; font-size: 13px; color: var(--wt-sub); }
.wt-dn b { display: block; font-size: 15px; font-weight: 600; }
.wt-dn small { display: block; font-size: 12px; color: var(--wt-sub); margin-top: 2px; }

/* Biểu đồ giờ / ngày */
.wt-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
.wt-scroll::-webkit-scrollbar { height: 6px; }
.wt-scroll::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 3px; }
.wt-scroll__inner { position: relative; }
.wt-row { display: flex; }
.wt-col { flex: 0 0 auto; text-align: center; font-size: 13px; }
.wt-row--time .wt-col { color: var(--wt-sub); padding: 4px 0; }
.wt-row--time .wt-col.is-now { color: var(--wt-red); font-weight: 700; }
.wt-row--icon .wt-col { height: 44px; display: flex; align-items: center; justify-content: center; }
.wt-icon { width: 36px; height: 36px; }
.wt-row--rain .wt-col { color: var(--wt-low); font-size: 12px; padding-top: 4px; }
.wt-row--rain .wt-col span::before { content: ""; display: inline-block; width: 7px; height: 9px; margin-right: 3px; background: var(--wt-low); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; vertical-align: -1px; }
.wt-row--sub .wt-col { color: var(--wt-sub); font-size: 12px; padding-top: 4px; }
.wt-row--sub i { font-style: normal; font-size: 10px; margin-left: 1px; }
.wt-row--day .wt-col b { display: block; font-size: 14px; }
.wt-row--day .wt-col span { display: block; font-size: 12px; color: var(--wt-sub); }
.wt-hourly__note { font-size: 12px; color: var(--wt-sub); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.wt-ico-rain { display: inline-block; width: 7px; height: 9px; background: var(--wt-low); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.wt-ico-wind { display: inline-block; width: 10px; height: 2px; margin-left: 10px; background: var(--wt-sub); box-shadow: 0 -3px 0 var(--wt-sub); }

.wt-chart { display: block; overflow: visible; }
.wt-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wt-chart__line--temp, .wt-chart__line--high { stroke: var(--wt-high); }
.wt-chart__line--low { stroke: var(--wt-low); }
.wt-chart__area--temp { fill: var(--wt-high); fill-opacity: .1; stroke: none; }
.wt-chart__dot { stroke: #fff; stroke-width: 2; }
.wt-chart__dot--temp, .wt-chart__dot--high { fill: var(--wt-high); }
.wt-chart__dot--low { fill: var(--wt-low); }
.wt-chart__label { font-size: 13px; font-weight: 600; fill: var(--wt-text); }

.wt-legend { display: flex; gap: 14px; font-size: 13px; color: var(--wt-sub); }
.wt-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.wt-legend__high::before { background: var(--wt-high); }
.wt-legend__low::before { background: var(--wt-low); }

/* AQI: thang AccuWeather 0-19 / 20-49 / 50-99 / 100-149 / 150-249 / 250+ */
.wt-aqi--1 { --wt-aqi: #00a651; }
.wt-aqi--2 { --wt-aqi: #8cc63e; }
.wt-aqi--3 { --wt-aqi: #f7a600; }
.wt-aqi--4 { --wt-aqi: #e8401c; }
.wt-aqi--5 { --wt-aqi: #8e3e97; }
.wt-aqi--6 { --wt-aqi: #6b1b1b; }
.wt-aqi__main { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 8px; background: var(--wt-bg); border-left: 6px solid var(--wt-aqi, #999); }
.wt-aqi__index { font-size: 36px; line-height: 1; font-weight: 700; color: var(--wt-aqi, #999); }
.wt-aqi__index small { display: block; font-size: 12px; font-weight: 500; color: var(--wt-sub); margin-top: 4px; }
.wt-aqi__status { font-size: 17px; font-weight: 600; }
.wt-aqi__list { margin-top: 10px !important; }
.wt-aqi__list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--wt-line); font-size: 14px; cursor: help; }
.wt-aqi__list li:last-child { border-bottom: 0; }
.wt-aqi__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wt-aqi, #999); flex: 0 0 10px; }
.wt-aqi__list b { font-weight: 600; min-width: 52px; }
.wt-aqi__conc { flex: 1; color: var(--wt-sub); font-size: 13px; }
.wt-aqi__pi { font-weight: 600; min-width: 28px; text-align: right; }

/* Mặt trời & mặt trăng */
.wt-astro.is-loading { min-height: 96px; }
.wt-astro ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wt-astro li { background: var(--wt-bg); border-radius: 6px; padding: 10px 12px; }
.wt-astro li span { display: block; font-size: 12px; color: var(--wt-sub); }
.wt-astro li b { display: block; font-size: 18px; font-weight: 600; margin-top: 2px; }
.wt-astro--sunrise b, .wt-astro--sunset b { color: var(--wt-high); }
.wt-astro--moonrise b, .wt-astro--moonset b { color: #5c5f8a; }

/* Bản đồ nhiệt */
.wt-map { position: relative; max-width: 300px; margin: 0 auto; aspect-ratio: 349 / 545; }
.wt-map.is-loading { min-height: 0; }
.wt-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wt-map__svg path { stroke: #fff; stroke-width: .8; cursor: pointer; transition: opacity .15s, fill .3s; }
.wt-map__svg path:hover { opacity: .8; }
.wt-map__svg path.is-current { stroke: #222; stroke-width: 1.4; }
.wt-map__island { font: 600 12px Roboto, Arial, sans-serif; fill: var(--wt-sub); }
.wt-map__legend { margin-top: 12px; }
.wt-map__scale { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.wt-map__scale span { flex: 1; }
.wt-map__ticks { display: flex; padding: 0 5%; margin-top: 3px; }
.wt-map__ticks span { flex: 1; text-align: center; font-size: 11px; color: var(--wt-sub); }
.wt-map__tip { position: absolute; z-index: 5; width: 230px; padding: 10px 12px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 13px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.wt-map__tip.is-show { opacity: 1; visibility: visible; pointer-events: auto; }
.wt-map__tip-name { font-weight: 700; font-size: 15px; }
.wt-map__tip-temp { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.wt-map__tip-temp img { width: 30px; height: 30px; }
.wt-map__tip-temp b { font-size: 26px; font-weight: 600; }
.wt-map__tip-status { color: var(--wt-sub); margin-bottom: 6px; }
.wt-map__tip-row { display: flex; justify-content: space-between; gap: 6px; padding-top: 5px; border-top: 1px solid var(--wt-line); margin-top: 5px; font-size: 12px; }
.wt-map__tip-link { display: block; margin-top: 8px; padding: 6px 0; text-align: center; color: #fff !important; background: var(--wt-red); border-radius: 5px; font-weight: 600; text-decoration: none; }

@media (max-width: 1023px) {
    .wt-wrap { flex-direction: column; align-items: stretch; }
    .wt-left, .wt-right { width: 100%; flex-basis: auto; }
}
@media (max-width: 640px) {
    .wt-head__title { font-size: 21px; }
    .wt-head__select, .wt-head__select select { width: 100%; }
    .wt-overview__inner { padding: 16px; }
    .wt-overview__temp { font-size: 56px; }
    .wt-overview__icon { width: 64px; height: 64px; }
    .wt-overview__stats { grid-template-columns: repeat(2, 1fr); }
    .wt-overview__stats li:nth-child(4n) { border-right: 1px solid var(--wt-line); }
    .wt-overview__stats li:nth-child(2n) { border-right: 0; }
    .wt-overview__stats li:nth-child(-n+4) { border-top: 1px solid var(--wt-line); }
    .wt-overview__stats li:nth-child(-n+2) { border-top: 0; }
    .wt-overview__dn { grid-template-columns: 1fr; }
    .wt-dn + .wt-dn { border-left: 0; border-top: 1px solid var(--wt-line); }
}