.weather-page {
        --weather-blue: #1e5288;
        --weather-ink: #102033;
        --weather-muted: #64748b;
        --weather-line: rgba(30, 82, 136, .14);
        --weather-safe: #16a34a;
        --weather-watch: #eab308;
        --weather-warn: #f97316;
        --weather-danger: #dc2626;
        min-height: calc(100vh - 160px);
        background:
            radial-gradient(circle at 10% 0, rgba(30,82,136,.14), transparent 30%),
            radial-gradient(circle at 95% 8%, rgba(34,197,94,.12), transparent 28%),
            linear-gradient(180deg, #f4f8ff, #eef6ff 52%, #f8fafc);
        color: var(--weather-ink);
        padding: 10px 8px 72px;
    }
    .weather-shell { max-width: 1180px; margin: 0 auto; }
    .weather-card,
    .weather-location,
    .weather-priority-group {
        animation: weatherCardIn .32s ease both;
    }
    .weather-card:nth-of-type(2),
    .weather-location:nth-child(2n),
    .weather-priority-group:nth-child(2n) { animation-delay: .035s; }
    .weather-card:nth-of-type(3),
    .weather-location:nth-child(3n),
    .weather-priority-group:nth-child(3n) { animation-delay: .07s; }
    @keyframes weatherCardIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes weatherFloat {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }
    @keyframes weatherSweep {
        from { transform: translateX(-120%) rotate(8deg); }
        to { transform: translateX(120%) rotate(8deg); }
    }
    @keyframes weatherGreenGlow {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 0 5px rgba(var(--dot-rgb), .16), 0 0 14px rgba(var(--dot-rgb), .52);
        }
        50% {
            transform: scale(1.08);
            box-shadow: 0 0 0 var(--dot-ring, 11px) rgba(var(--dot-rgb), .10), 0 0 var(--dot-glow, 30px) rgba(var(--dot-rgb), .92);
        }
    }
    .weather-hero {
        border-radius: 22px;
        padding: 14px;
        color: #fff;
        background: linear-gradient(135deg, #0f3a64, #1e5288 58%, #0f766e);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .13);
        overflow: hidden;
        position: relative;
    }
    .weather-hero-row { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .weather-hero-row > div { min-width:0; }
    .weather-hero-row .weather-live-pill { flex:0 0 auto; }
    .weather-hero:before {
        content: "";
        position: absolute;
        inset: -40% auto auto -12%;
        width: 210px;
        height: 210px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 68%);
        animation: weatherFloat 4.8s ease-in-out infinite;
        pointer-events: none;
    }
    .weather-hero:after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -120px;
        bottom: -150px;
        border-radius: 999px;
        border: 44px solid rgba(255,255,255,.08);
    }
    /* ===== Hiệu ứng cảnh thời tiết động (hero) ===== */
    .weather-hero > .weather-scene { z-index: 0; }
    .weather-hero > .weather-kicker,
    .weather-hero > h1,
    .weather-hero > p { position: relative; z-index: 2; }
    .weather-scene {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;
    }
    .weather-scene span { position: absolute; display: block; }
    .weather-scene .ws-sky { inset: 0; opacity: .9; }
    .weather-scene.scene-sunny .ws-sky { background: radial-gradient(120% 90% at 80% -10%, rgba(255,214,120,.40), transparent 60%); }
    .weather-scene.scene-partly .ws-sky { background: radial-gradient(120% 90% at 82% -12%, rgba(255,220,150,.26), transparent 58%); }
    .weather-scene.scene-rainy .ws-sky,
    .weather-scene.scene-drizzle .ws-sky { background: linear-gradient(180deg, rgba(15,30,55,.30), rgba(15,30,55,0) 55%); }
    .weather-scene.scene-storm .ws-sky { background: linear-gradient(180deg, rgba(8,14,30,.55), rgba(8,14,30,.05) 60%); }
    .weather-scene.scene-cloudy .ws-sky { background: linear-gradient(180deg, rgba(120,140,170,.28), transparent 60%); }
    .weather-scene.scene-snow .ws-sky { background: linear-gradient(180deg, rgba(200,220,245,.30), transparent 60%); }
    .weather-scene.scene-ambient .ws-sky { background: radial-gradient(120% 90% at 82% -12%, rgba(255,255,255,.16), transparent 60%); }
    .weather-scene .ws-sun {
        top: -70px; right: -50px; width: 200px; height: 200px;
        border-radius: 50%; opacity: 0;
        background: radial-gradient(circle, rgba(255,243,200,.95), rgba(255,214,110,.45) 42%, transparent 70%);
    }
    .weather-scene.scene-sunny .ws-sun,
    .weather-scene.scene-partly .ws-sun { opacity: 1; animation: wsSunPulse 6s ease-in-out infinite; }
    .weather-scene.scene-partly .ws-sun { width: 150px; height: 150px; opacity: .85; }
    .weather-scene .ws-sun::before {
        content: ""; position: absolute; inset: -30%; border-radius: 50%;
        background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255,224,140,.45) 13deg 17deg, transparent 18deg 30deg);
        -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 40% 70%, transparent 72%);
        mask: radial-gradient(circle, transparent 0 38%, #000 40% 70%, transparent 72%);
        animation: wsSpin 26s linear infinite;
    }
    .weather-scene .ws-clouds {
        inset: 0; opacity: 0; background-repeat: no-repeat;
        background-image:
            radial-gradient(48px 20px at 18% 32%, rgba(255,255,255,.55), transparent 72%),
            radial-gradient(70px 26px at 54% 22%, rgba(255,255,255,.42), transparent 72%),
            radial-gradient(56px 22px at 86% 40%, rgba(255,255,255,.38), transparent 72%);
    }
    .weather-scene.scene-cloudy .ws-clouds,
    .weather-scene.scene-partly .ws-clouds,
    .weather-scene.scene-rainy .ws-clouds,
    .weather-scene.scene-drizzle .ws-clouds,
    .weather-scene.scene-storm .ws-clouds,
    .weather-scene.scene-snow .ws-clouds,
    .weather-scene.scene-ambient .ws-clouds { opacity: 1; animation: wsClouds 30s ease-in-out infinite; }
    .weather-scene.scene-storm .ws-clouds {
        background-image:
            radial-gradient(48px 20px at 18% 32%, rgba(210,220,235,.45), transparent 72%),
            radial-gradient(70px 26px at 54% 22%, rgba(190,200,220,.40), transparent 72%),
            radial-gradient(56px 22px at 86% 40%, rgba(170,182,205,.36), transparent 72%);
    }
    .weather-scene .ws-precip { inset: 0; opacity: 0; }
    .weather-scene.scene-rainy .ws-precip,
    .weather-scene.scene-storm .ws-precip {
        opacity: .55;
        background-image: linear-gradient(100deg, transparent 44%, rgba(214,232,255,.6) 50%, transparent 56%);
        background-size: 14px 20px;
        animation: wsRain .5s linear infinite;
    }
    .weather-scene.scene-drizzle .ws-precip {
        opacity: .4;
        background-image: linear-gradient(100deg, transparent 46%, rgba(214,232,255,.45) 50%, transparent 54%);
        background-size: 18px 20px;
        animation: wsRain .9s linear infinite;
    }
    .weather-scene.scene-snow .ws-precip {
        opacity: .9;
        background-image:
            radial-gradient(circle at 20% 20%, #fff 0 1.7px, transparent 2.4px),
            radial-gradient(circle at 62% 46%, #fff 0 1.3px, transparent 2px),
            radial-gradient(circle at 83% 78%, #fff 0 1.9px, transparent 2.6px);
        background-size: 130px 130px, 95px 95px, 160px 160px;
        animation: wsSnow 9s linear infinite;
    }
    .weather-scene .ws-flash { inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%); opacity: 0; }
    .weather-scene.scene-storm .ws-flash { animation: wsFlash 7s linear infinite; }
    @keyframes wsSunPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
    @keyframes wsSpin { to { transform: rotate(360deg); } }
    @keyframes wsClouds { 0% { transform: translateX(-3%); } 50% { transform: translateX(3%); } 100% { transform: translateX(-3%); } }
    @keyframes wsRain { from { background-position: 0 0; } to { background-position: 0 20px; } }
    @keyframes wsSnow { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 130px, 0 95px, 0 160px; } }
    @keyframes wsFlash { 0%,90%,100% { opacity: 0; } 91% { opacity: .7; } 92% { opacity: .1; } 93% { opacity: .55; } 94% { opacity: 0; } }
    .weather-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 1px solid rgba(255,255,255,.22);
        background: rgba(255,255,255,.12);
        border-radius: 999px;
        padding: 7px 10px;
        color: #dcfce7;
        font-size: .78rem;
        font-weight: 850;
        text-decoration: none;
    }
    .weather-kicker i { animation: weatherFloat 3.2s ease-in-out infinite; }
    .weather-hero h1 {
        position: relative;
        z-index: 1;
        margin: 8px 0 5px;
        font-size: clamp(1.8rem, 6vw, 3rem);
        line-height: 1;
        letter-spacing: -.055em;
        font-weight: 950;
    }
    .weather-hero p {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 0;
        color: rgba(255,255,255,.82);
    }
    .weather-grid { display: grid; gap: 10px; margin-top: 10px; }
    .weather-card {
        border: 1px solid var(--weather-line);
        border-radius: 18px;
        background: rgba(255,255,255,.92);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
        padding: 12px;
    }
    .weather-toolbar {
        display: grid;
        gap: 10px;
        margin-top: 10px;
    }
    .weather-search {
        width: 100%;
        min-height: 42px;
        border: 1px solid var(--weather-line);
        border-radius: 14px;
        padding: 0 14px;
        outline: none;
        background: #fff;
        font-weight: 750;
    }
    .weather-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
    .weather-filters .weather-filter { position: relative; }
    .weather-filter-count {
        margin-left: 3px;
        color: #64748b;
        font-size: .68rem;
        font-weight: 850;
    }
    .weather-filter {
        border: 1px solid var(--weather-line);
        background: #fff;
        color: #12344f;
        border-radius: 999px;
        min-height: 34px;
        padding: 0 11px;
        white-space: nowrap;
        font-weight: 850;
    }
    .weather-filter i,
    .weather-badge i,
    .weather-stat-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .weather-filter i { margin-right: 4px; font-size: .82em; }
    .weather-filter.is-active {
        color: #fff;
        border-color: transparent;
        background: var(--weather-blue);
    }
    .weather-filter.is-active .weather-filter-count { color: #dbeafe; }
    .weather-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
    .weather-stat {
        border: 1px solid rgba(148,163,184,.18);
        background: #fff;
        border-radius: 14px;
        padding: 8px;
        position: relative;
        overflow: hidden;
    }
    .weather-stat:after {
        content: "";
        position: absolute;
        inset: 0 auto 0 -35%;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
        opacity: 0;
        pointer-events: none;
    }
    .weather-stat:hover:after { opacity: .85; animation: weatherSweep .72s ease; }
    .weather-stat span { display: flex; align-items: center; gap: 5px; color: var(--weather-muted); font-size: .78rem; font-weight: 800; }
    .weather-stat b { display: block; font-size: 1.12rem; font-weight: 950; letter-spacing: -.04em; }
    .weather-stat-icon { width: 20px; height: 20px; border-radius: 999px; color: #1e5288; background: #eaf3ff; font-size: .72rem; }
    .weather-priority-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .weather-priority-levels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
    .weather-priority-level { border: 1px solid rgba(148,163,184,.2); border-radius: 14px; background: #fff; padding: 8px; }
    .weather-priority-level span { display: flex; align-items: center; gap: 5px; color: var(--weather-muted); font-size: .76rem; font-weight: 850; }
    .weather-priority-level b { display: block; margin-top: 3px; font-size: 1.15rem; font-weight: 950; letter-spacing: -.035em; }
    .weather-priority-level.normal i { color: var(--weather-safe); }
    .weather-priority-level.notice i { color: #ca8a04; }
    .weather-priority-level.warning i { color: var(--weather-warn); }
    .weather-priority-level.danger i { color: var(--weather-danger); }
    .weather-priority-level.unknown i { color: #64748b; }
    .weather-updating-note {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin: -3px 0 8px;
        font-size: .78rem;
    }
    .weather-priority-list { display: grid; gap: 7px; }
    .weather-priority-group {
        border: 1px solid rgba(148,163,184,.18);
        border-left: 5px solid #eab308;
        border-radius: 15px;
        background: #f8fafc;
        padding: 9px 10px;
    }
    .weather-priority-group.warning { border-left-color: #f97316; }
    .weather-priority-group.danger { border-left-color: #dc2626; }
    .weather-priority-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
    .weather-priority-group-head b { font-size: .86rem; font-weight: 950; color: #0f172a; white-space: nowrap; }
    .weather-priority-summary { margin: 0 0 7px; color: var(--weather-muted); font-size: .82rem; line-height: 1.35; }
    .weather-priority-names { display: flex; flex-wrap: wrap; gap: 5px; }
    .weather-priority-names a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 25px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(148,163,184,.22);
        padding: 3px 8px;
        color: #12344f;
        font-size: .78rem;
        font-weight: 850;
        text-decoration: none;
        transition: transform .16s ease, border-color .16s ease;
    }
    .weather-priority-names a small {
        display: inline-block;
        max-width: 220px;
        overflow: hidden;
        color: #64748b;
        font-size: .72rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .weather-priority-names a:hover { transform: translateY(-1px); border-color: rgba(30,82,136,.38); }
    .weather-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .weather-location {
        display: grid;
        gap: 7px;
        border: 1px solid rgba(148,163,184,.20);
        border-left: 4px solid #94a3b8;
        border-radius: 13px;
        background: #fff;
        padding: 10px 11px;
        min-width: 0;
        color: inherit;
        text-decoration: none;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .weather-location:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.07); border-color: rgba(30,82,136,.22); }
    .weather-location.normal { border-left-color: #16a34a; }
    .weather-location.notice { border-left-color: #eab308; }
    .weather-location.warning { border-left-color: #f97316; }
    .weather-location.danger { border-left-color: #dc2626; }
    .weather-location-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
    .weather-location-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .weather-status-dot {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        flex: 0 0 11px;
        background: #94a3b8;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
    }
    .weather-status-dot.normal {
        --dot-rgb: 22, 163, 74;
        --dot-ring: 12px;
        --dot-glow: 32px;
        background: var(--weather-safe);
        animation: weatherGreenGlow 6s ease-in-out infinite;
    }
    .weather-status-dot.notice {
        --dot-rgb: 234, 179, 8;
        --dot-ring: 11px;
        --dot-glow: 30px;
        background: #eab308;
        animation: weatherGreenGlow 3.8s ease-in-out infinite;
    }
    .weather-status-dot.warning {
        --dot-rgb: 249, 115, 22;
        --dot-ring: 13px;
        --dot-glow: 34px;
        background: var(--weather-warn);
        animation: weatherGreenGlow 2.2s ease-in-out infinite;
    }
    .weather-status-dot.danger {
        --dot-rgb: 220, 38, 38;
        --dot-ring: 15px;
        --dot-glow: 40px;
        background: var(--weather-danger);
        animation: weatherGreenGlow 1.1s ease-in-out infinite;
    }
    .weather-location h2 { margin: 0; font-size: .92rem; font-weight: 950; letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; line-height: 1.18; }
    .weather-location-now { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; min-width:0; }
    .weather-location-now > span { white-space:nowrap; }
    .weather-location-subtitle {
        margin: 2px 0 0 19px;
        color: #334155;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .74rem;
        font-weight: 850;
    }
    .weather-location-subtitle i { opacity: .7; font-size: .72rem; }
    .weather-location-alert {
        margin: 4px 0 0 18px;
        color: #7c2d12;
        font-size: .76rem;
        font-weight: 850;
        line-height: 1.25;
    }
    .weather-location-alert.heavy_rain,
    .weather-location-alert.thunderstorm,
    .weather-location-alert.rain { color: #075985; background: #eff8ff; border-radius: 10px; padding: 7px 9px; }
    .weather-location-alert.heat,
    .weather-location-alert.fire { color: #9a3412; background: #fff7ed; border-radius: 10px; padding: 7px 9px; }
    .weather-location-alert.strong_wind { color: #155e75; background: #ecfeff; border-radius: 10px; padding: 7px 9px; }
    .weather-location-alert small { color: currentColor; opacity: .78; font-weight: 700; }
    .weather-location-alert { display:inline-flex; align-items:center; gap:4px; width:max-content; }
    .weather-location-alert small { font-size:.68rem; }
    .weather-search-label { display:block; font-size:.78rem; font-weight:800; color:#475569; margin-bottom:5px; }
    .weather-risk-section { grid-column:1 / -1; margin:12px 0 2px; padding:10px 12px; border-left:4px solid currentColor; border-radius:10px; background:#f8fafc; }
    .weather-risk-section-title { display:flex; align-items:center; gap:8px; }
    .weather-risk-section-title span { margin-left:auto; font-size:.75rem; font-weight:700; opacity:.75; }
    .weather-risk-section small { display:block; margin-top:3px; color:#64748b; }
    .weather-risk-section.emergency { color:#991b1b; background:#fff1f2; }
    .weather-risk-section.danger { color:#b91c1c; background:#fff7ed; }
    .weather-risk-section.warning { color:#c2410c; background:#fffbeb; }
    .weather-risk-section.notice { color:#a16207; background:#fefce8; }
    .weather-risk-section.normal { color:#15803d; background:#f0fdf4; }
    .weather-model-note { color: #64748b; font-size: .78rem; }
    .weather-model-note i { color: #2563eb; }
    .weather-model-banner, .weather-forecast-insight { display: flex; align-items: flex-start; gap: 9px; border-radius: 13px; padding: 9px 10px; margin: 8px 0; font-size: .78rem; line-height: 1.35; }
    .weather-model-banner { color: #1e3a8a; background: linear-gradient(135deg,#eff6ff,#eef2ff); border: 1px solid #dbeafe; }
    .weather-model-banner > i { color: #4f46e5; font-size: 1.15rem; }
    .weather-model-banner b, .weather-model-banner small { display: block; }
    .weather-model-banner small { margin-top: 2px; color: #64748b; }
    .weather-forecast-insight { color: #075985; background: #f0f9ff; border: 1px solid #bae6fd; }
    .weather-forecast-insight > i { color: #0284c7; }
    .weather-hour-item .rain-chance { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; min-height: 28px; }
    .weather-hour-item .rain-chance i { color: #0284c7; font-size: .68rem; }
    .weather-location-alert i { color: #f97316; margin-right: 3px; }
    .weather-location-now {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        margin-left: auto;
        flex: 0 0 auto;
    }
    .weather-location-now span {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-height: 24px;
        border: 1px solid rgba(148,163,184,.18);
        border-radius: 999px;
        background: #f8fafc;
        color: #334155;
        padding: 2px 7px;
        font-size: .74rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }
    .weather-location-now i { font-size: .82em; opacity: .78; }
    .weather-location-now .w-temp { color: #0f3a64; background: #eaf3ff; border-color: rgba(30,82,136,.14); }
    .weather-location-now .w-rain { color: #075985; background: #e0f2fe; border-color: rgba(2,132,199,.14); }
    .weather-location-now .w-condition.is-sunny { color: #92400e; background: #fff7ed; border-color: rgba(245,158,11,.18); }
    .weather-location-now .w-condition.is-hot,
    .weather-location-now .w-condition.is-fire { color: #9a3412; background: #ffedd5; border-color: rgba(249,115,22,.24); }
    .weather-location-now .w-condition.is-partly { color: #0f5f88; background: #ecfeff; border-color: rgba(14,116,144,.16); }
    .weather-location-now .w-condition.is-cloudy,
    .weather-location-now .w-condition.is-unknown { color: #475569; background: #f1f5f9; border-color: rgba(100,116,139,.18); }
    .weather-location-now .w-condition.is-rainy,
    .weather-location-now .w-condition.is-drizzle,
    .weather-location-now .w-condition.is-storm { color: #075985; background: #e0f2fe; border-color: rgba(2,132,199,.14); }
    .weather-location-now .w-wind { color: #475569; background: #f1f5f9; }
    .weather-pro-icon {
        position: relative;
        display: inline-block;
        width: 42px;
        height: 34px;
        flex: 0 0 auto;
        vertical-align: middle;
        isolation: isolate;
    }
    .weather-pro-icon:before,
    .weather-pro-icon:after {
        content: "";
        position: absolute;
        display: block;
    }
    .weather-pro-icon.is-sunny:before {
        left: 22%;
        top: 15%;
        width: 56%;
        height: 56%;
        border-radius: 999px;
        background: radial-gradient(circle at 35% 32%, #fff7a8 0 18%, #ffd43b 42%, #f59e0b 100%);
        box-shadow: 0 0 16px rgba(245, 158, 11, .42);
    }
    .weather-pro-icon.is-sunny:after {
        inset: 3%;
        border-radius: 999px;
        background: conic-gradient(from 0deg, transparent 0 8deg, rgba(245,158,11,.58) 9deg 18deg, transparent 19deg 45deg);
        -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 45% 58%, transparent 59%);
        mask: radial-gradient(circle, transparent 0 44%, #000 45% 58%, transparent 59%);
    }
    .weather-pro-icon.is-hot:before {
        left: 20%;
        top: 13%;
        width: 60%;
        height: 60%;
        border-radius: 999px;
        background: radial-gradient(circle at 35% 30%, #fff7a8 0 14%, #fb923c 42%, #dc2626 100%);
        box-shadow: 0 0 18px rgba(249, 115, 22, .5);
    }
    .weather-pro-icon.is-hot:after {
        inset: 0;
        border-radius: 999px;
        background: conic-gradient(from 0deg, transparent 0 7deg, rgba(249,115,22,.7) 8deg 18deg, transparent 19deg 45deg);
        -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44% 60%, transparent 61%);
        mask: radial-gradient(circle, transparent 0 43%, #000 44% 60%, transparent 61%);
    }
    .weather-pro-icon.is-fire:before {
        left: 27%;
        top: 8%;
        width: 46%;
        height: 76%;
        border-radius: 70% 35% 70% 35%;
        background: linear-gradient(145deg, #fde68a 0 22%, #fb923c 48%, #dc2626 100%);
        box-shadow: 0 0 14px rgba(220, 38, 38, .42);
        transform: rotate(38deg);
    }
    .weather-pro-icon.is-fire:after {
        left: 39%;
        top: 42%;
        width: 23%;
        height: 36%;
        border-radius: 65% 35% 65% 35%;
        background: linear-gradient(180deg, #fff7ed, #fbbf24);
        transform: rotate(35deg);
    }
    .weather-pro-icon.is-partly:before {
        left: 9%;
        top: 7%;
        width: 43%;
        height: 43%;
        border-radius: 999px;
        background: radial-gradient(circle at 35% 32%, #fff7a8 0 18%, #ffd43b 45%, #f59e0b 100%);
        box-shadow: 0 0 14px rgba(245, 158, 11, .34);
        z-index: 0;
    }
    .weather-pro-icon.is-partly:after,
    .weather-pro-icon.is-cloudy:before,
    .weather-pro-icon.is-unknown:before,
    .weather-pro-icon.is-rainy:before,
    .weather-pro-icon.is-drizzle:before,
    .weather-pro-icon.is-storm:before {
        left: 11%;
        top: 39%;
        width: 80%;
        height: 46%;
        border-radius: 999px;
        background:
            radial-gradient(circle at 26% 62%, #eef2f7 0 24%, transparent 25%),
            radial-gradient(circle at 49% 38%, #ffffff 0 31%, transparent 32%),
            radial-gradient(circle at 72% 60%, #d7dfe9 0 25%, transparent 26%),
            linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
        filter: drop-shadow(0 5px 8px rgba(15,23,42,.16));
        z-index: 1;
    }
    .weather-pro-icon.is-cloudy:before,
    .weather-pro-icon.is-unknown:before {
        left: 8%;
        top: 32%;
        width: 84%;
        height: 52%;
        background:
            radial-gradient(circle at 27% 60%, #dbe2eb 0 25%, transparent 26%),
            radial-gradient(circle at 51% 36%, #f8fafc 0 33%, transparent 34%),
            radial-gradient(circle at 75% 60%, #aeb8c6 0 27%, transparent 28%),
            linear-gradient(180deg, #eef2f7 0%, #94a3b8 100%);
    }
    .weather-pro-icon.is-rainy:after,
    .weather-pro-icon.is-drizzle:after {
        left: 22%;
        right: 17%;
        bottom: 0;
        height: 28%;
        background:
            radial-gradient(circle at 12% 35%, #60a5fa 0 12%, transparent 13%),
            radial-gradient(circle at 50% 62%, #3b82f6 0 13%, transparent 14%),
            radial-gradient(circle at 86% 34%, #60a5fa 0 12%, transparent 13%);
        filter: drop-shadow(0 2px 3px rgba(37,99,235,.25));
        z-index: 0;
    }
    .weather-pro-icon.is-drizzle:after { opacity: .72; transform: scale(.88); }
    .weather-pro-icon.is-storm:after {
        left: 43%;
        top: 54%;
        width: 20%;
        height: 42%;
        background: linear-gradient(180deg, #fde047, #f97316);
        clip-path: polygon(40% 0, 100% 0, 62% 43%, 100% 43%, 22% 100%, 42% 55%, 0 55%);
        filter: drop-shadow(0 3px 4px rgba(249,115,22,.38));
        z-index: 2;
    }
    /* ===== Icon thời tiết tuyết (Sa Pa/vùng cao) ===== */
    .weather-pro-icon.is-snow:before {
        left: 8%; top: 32%; width: 84%; height: 52%;
        border-radius: 999px;
        background:
            radial-gradient(circle at 27% 60%, #dbe2eb 0 25%, transparent 26%),
            radial-gradient(circle at 51% 36%, #f8fafc 0 33%, transparent 34%),
            radial-gradient(circle at 75% 60%, #aeb8c6 0 27%, transparent 28%),
            linear-gradient(180deg, #eef2f7 0%, #94a3b8 100%);
        filter: drop-shadow(0 5px 8px rgba(15,23,42,.16));
        z-index: 1;
    }
    .weather-pro-icon.is-snow:after {
        left: 20%; right: 18%; bottom: -2%; height: 32%;
        background:
            radial-gradient(circle at 18% 30%, #fff 0 16%, transparent 18%),
            radial-gradient(circle at 52% 62%, #fff 0 18%, transparent 20%),
            radial-gradient(circle at 84% 32%, #fff 0 16%, transparent 18%);
        filter: drop-shadow(0 1px 1px rgba(148,163,184,.45));
        z-index: 0;
    }
    /* ===== Icon thời tiết động ===== */
    .weather-pro-icon.is-sunny:before,
    .weather-pro-icon.is-hot:before,
    .weather-pro-icon.is-fire:before,
    .weather-pro-icon.is-partly:before { animation: wsIconPulse 4.5s ease-in-out infinite; transform-origin: 50% 50%; }
    .weather-pro-icon.is-sunny:after,
    .weather-pro-icon.is-hot:after { animation: wsSpin 12s linear infinite; transform-origin: 50% 50%; }
    .weather-pro-icon.is-partly:after,
    .weather-pro-icon.is-cloudy:before,
    .weather-pro-icon.is-unknown:before,
    .weather-pro-icon.is-rainy:before,
    .weather-pro-icon.is-drizzle:before,
    .weather-pro-icon.is-storm:before,
    .weather-pro-icon.is-snow:before { animation: wsIconDrift 6s ease-in-out infinite; }
    .weather-pro-icon.is-rainy:after { animation: wsIconDrop .9s linear infinite; }
    .weather-pro-icon.is-drizzle:after { animation: wsIconDropSm 1.3s linear infinite; }
    .weather-pro-icon.is-storm:after { animation: wsIconBolt 2.4s steps(1, end) infinite; }
    .weather-pro-icon.is-snow:after { animation: wsIconSnow 2.6s linear infinite; }
    .weather-pro-icon.is-fire:after { animation: wsIconPulse 1.8s ease-in-out infinite; }
    /* Danh sách: mô phỏng thời tiết bằng transform/opacity nhẹ, không làm rung thẻ. */
    .weather-location { content-visibility: auto; contain-intrinsic-size: 48px; }
    .weather-location-now .weather-pro-icon { overflow: visible; will-change: transform, opacity; }
    .weather-location-now .weather-pro-icon.is-sunny:before,
    .weather-location-now .weather-pro-icon.is-hot:before,
    .weather-location-now .weather-pro-icon.is-partly:before { animation: wsListSun 3.8s ease-in-out infinite !important; }
    .weather-location-now .weather-pro-icon.is-sunny:after,
    .weather-location-now .weather-pro-icon.is-hot:after { animation: wsSpin 14s linear infinite !important; }
    .weather-location-now .weather-pro-icon.is-partly:after,
    .weather-location-now .weather-pro-icon.is-cloudy:before,
    .weather-location-now .weather-pro-icon.is-unknown:before { animation: wsListCloud 5.8s ease-in-out infinite !important; }
    .weather-location-now .weather-pro-icon.is-rainy:before,
    .weather-location-now .weather-pro-icon.is-drizzle:before,
    .weather-location-now .weather-pro-icon.is-storm:before { animation: wsListCloud 4.9s ease-in-out infinite !important; }
    .weather-location-now .weather-pro-icon.is-rainy:after { animation: wsIconDrop 1s linear infinite !important; }
    .weather-location-now .weather-pro-icon.is-drizzle:after { animation: wsIconDropSm 1.45s linear infinite !important; }
    .weather-location-now .weather-pro-icon.is-storm:after { animation: wsIconBolt 2.8s steps(1,end) infinite !important; }
    .weather-location-now .weather-pro-icon.is-snow:before { animation: wsListCloud 5.2s ease-in-out infinite !important; }
    .weather-location-now .weather-pro-icon.is-snow:after { animation: wsIconSnow 2.8s linear infinite !important; }
    .weather-location-now .weather-pro-icon.is-fire:before,
    .weather-location-now .weather-pro-icon.is-fire:after { animation: wsListFire 1.6s ease-in-out infinite alternate !important; }
    .weather-location-now .weather-pro-icon.is-clear-night,
    .weather-location-now .weather-pro-icon.is-partly-night { animation: wsListMoon 4.8s ease-in-out infinite !important; }
    .weather-location-now .weather-pro-icon.is-fog { animation: wsListFog 5.6s ease-in-out infinite !important; }
    .weather-location:nth-of-type(3n) .weather-pro-icon { animation-delay: -.8s !important; }
    .weather-location:nth-of-type(3n+1) .weather-pro-icon { animation-delay: -1.6s !important; }
    @keyframes wsIconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
    @keyframes wsIconDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6%); } }
    @keyframes wsIconDrop { 0% { transform: translateY(-18%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(22%); opacity: 0; } }
    @keyframes wsIconDropSm { 0% { transform: translateY(-15%) scale(.88); opacity: 0; } 25% { opacity: .8; } 100% { transform: translateY(18%) scale(.88); opacity: 0; } }
    @keyframes wsIconBolt { 0%,92%,100% { opacity: .35; } 93% { opacity: 1; } 95% { opacity: .2; } 97% { opacity: 1; } }
    @keyframes wsIconSnow { 0% { transform: translateY(-16%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(20%); opacity: .1; } }
    @keyframes wsListSun { 0%,100% { transform: scale(.96); filter: brightness(.98); } 50% { transform: scale(1.06); filter: brightness(1.12); } }
    @keyframes wsListCloud { 0%,100% { transform: translateX(-3%); } 50% { transform: translateX(4%); } }
    @keyframes wsListFire { from { transform: scale(.94) rotate(35deg); opacity:.82; } to { transform: scale(1.07) rotate(40deg); opacity:1; } }
    @keyframes wsListMoon { 0%,100% { transform: translateY(1px); filter: drop-shadow(0 0 1px rgba(191,219,254,.2)); } 50% { transform: translateY(-1px); filter: drop-shadow(0 0 4px rgba(191,219,254,.75)); } }
    @keyframes wsListFog { 0%,100% { transform: translateX(-2px); opacity:.72; } 50% { transform: translateX(2px); opacity:1; } }
    .weather-location-now .weather-pro-icon {
        display: inline-block;
        width: 19px;
        height: 16px;
        margin-right: 1px;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: normal;
        white-space: normal;
    }
    .weather-location small { color: var(--weather-muted); font-weight: 760; }
    .weather-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 8px;
        background: #f1f5f9;
        color: #334155;
        font-size: .74rem;
        font-weight: 900;
        white-space: nowrap;
        gap: 4px;
    }
    .weather-badge.normal { color: #166534; background: #dcfce7; }
    .weather-badge.notice { color: #854d0e; background: #fef3c7; }
    .weather-badge.warning { color: #9a3412; background: #ffedd5; }
    .weather-badge.danger { color: #991b1b; background: #fee2e2; }
    .weather-source-list { margin: 0; padding-left: 18px; color: var(--weather-muted); }
    .weather-source-audit summary {
        display: flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        color: #12344f;
        font-weight: 950;
        list-style: none;
    }
    .weather-source-audit summary::-webkit-details-marker { display: none; }
    .weather-source-audit summary i { color: var(--weather-blue); }
    .weather-source-audit summary:after {
        content: "+";
        margin-left: auto;
        font-size: 1rem;
        line-height: 1;
        color: var(--weather-muted);
    }
    .weather-source-audit[open] summary:after { content: "-"; }
    .weather-detail-grid { display: grid; gap: 12px; }
    .weather-detail-card h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 950; }
    .weather-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .weather-current-summary {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        border: 1px solid rgba(30,82,136,.12);
        border-radius: 18px;
        padding: 10px;
        background: linear-gradient(135deg, #f8fbff, #eef6ff);
    }
    .weather-current-summary .weather-pro-icon { width: 66px; height: 54px; }
    .weather-current-summary b { display: block; font-size: 2.1rem; line-height: 1; letter-spacing: -.05em; color: #143a66; }
    .weather-current-summary span { display: block; margin-top: 3px; color: var(--weather-muted); font-weight: 850; }
    .weather-forecast-card { overflow: hidden; }
    .weather-hourly-rail,
    .weather-daily-grid {
        display: grid;
        gap: 8px;
    }
    .weather-hourly-rail {
        grid-auto-flow: column;
        grid-auto-columns: minmax(82px, 1fr);
        overflow-x: auto;
        padding: 2px 0 4px;
        scrollbar-width: none;
    }
    .weather-hourly-rail::-webkit-scrollbar { display: none; }
    .weather-hour-item,
    .weather-day-item {
        min-width: 0;
        border: 1px solid rgba(148,163,184,.18);
        border-radius: 16px;
        background: #fff;
        padding: 9px 8px;
        text-align: center;
        box-shadow: 0 8px 18px rgba(15,23,42,.04);
    }
    .weather-hour-item .weather-pro-icon { width: 44px; height: 36px; margin: 3px auto 5px; }
    .weather-hour-item b,
    .weather-day-item b { display: block; color: #0f172a; font-size: .86rem; font-weight: 950; }
    .weather-hour-item strong { display: block; color: #143a66; font-size: 1rem; font-weight: 950; }
    .weather-hour-item small,
    .weather-day-item small { display: block; color: var(--weather-muted); font-size: .72rem; font-weight: 820; line-height: 1.25; }
    .weather-hour-item .rain-chance { color: #2563eb; }
    .weather-daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .weather-day-item { display: grid; gap: 5px; justify-items: center; }
    .weather-day-item .weather-pro-icon { width: 48px; height: 39px; }
    .weather-day-temp { color: #143a66; font-size: .92rem; font-weight: 950; }
    .weather-empty { color: var(--weather-muted); margin: 0; }
    .weather-modal[aria-hidden="true"] { display: none; }
    .weather-modal {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: grid;
        place-items: center;
        padding: 14px;
    }
    .weather-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, .56);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .weather-modal-box {
        position: relative;
        width: min(920px, calc(100vw - 18px));
        max-height: min(760px, calc(100dvh - 24px));
        overflow: auto;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 30px;
        background:
            radial-gradient(circle at 14% 2%, rgba(96,165,250,.18), transparent 28%),
            radial-gradient(circle at 90% 0%, rgba(250,204,21,.14), transparent 24%),
            linear-gradient(180deg, #0d1117 0%, #0a0d12 100%);
        color: #f8fafc;
        box-shadow: 0 30px 90px rgba(2,6,23,.46);
    }
    .weather-modal-close {
        position: sticky;
        top: 10px;
        float: right;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin: 12px 12px 0 0;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 999px;
        background: rgba(255,255,255,.10);
        color: #fff;
        box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
    .weather-modal-content { padding: 26px clamp(18px, 4vw, 42px) 28px; }
    .weather-modal-loading,
    .weather-modal-error {
        min-height: 280px;
        display: grid;
        place-items: center;
        color: rgba(255,255,255,.78);
        text-align: center;
        font-weight: 850;
    }
    .weather-modal-daily .weather-modal-error,
    .weather-modal-hourly .weather-modal-error { grid-column: 1 / -1; min-height: 120px; }
    .weather-modal-hero { display: grid; gap: 14px; }
    .weather-modal-place {
        color: rgba(255,255,255,.74);
        font-weight: 850;
        letter-spacing: -.01em;
    }
    .weather-modal-main {
        display: flex;
        align-items: center;
        gap: 22px;
        flex-wrap: wrap;
    }
    .weather-modal-main .weather-pro-icon { width: 118px; height: 88px; }
    .weather-modal-temp {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: clamp(4.2rem, 12vw, 6.5rem);
        line-height: .86;
        letter-spacing: -.08em;
        font-weight: 300;
    }
    .weather-modal-unit {
        margin-top: 9px;
        font-size: 1.8rem;
        line-height: 1;
        letter-spacing: 0;
        font-weight: 850;
    }
    .weather-modal-condition {
        margin: 0;
        color: #fff;
        font-size: clamp(1.45rem, 4vw, 2.2rem);
        font-weight: 900;
        letter-spacing: -.04em;
    }
    .weather-modal-alert {
        margin: 0;
        border: 1px solid rgba(251,146,60,.24);
        border-radius: 18px;
        background: rgba(124,45,18,.28);
        color: rgba(255,247,237,.95);
        padding: 10px 12px;
        font-size: .9rem;
        font-weight: 850;
        line-height: 1.4;
    }
    .weather-modal-alert b { color: #fed7aa; }
    .weather-risk-provenance {
        display: flex;
        align-items: center;
        gap: 7px;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 6px 9px;
        border: 1px solid rgba(148,163,184,.24);
        border-radius: 999px;
        color: rgba(255,255,255,.82);
        background: rgba(15,23,42,.5);
        font-size: .7rem;
        font-weight: 800;
    }
    .weather-risk-provenance.is-official { border-color: rgba(251,191,36,.38); color: #fde68a; }
    .weather-modal-consensus {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 7px 10px;
        border-radius: 10px;
        color: rgba(224,242,254,.92);
        background: rgba(14,116,144,.22);
        font-size: .74rem;
        line-height: 1.4;
    }
    .weather-modal-source {
        margin: 10px 0 0;
        color: rgba(255,255,255,.62);
        font-size: .72rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .weather-modal-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin: 0;
        color: rgba(255,255,255,.76);
        font-weight: 850;
    }
    .weather-modal-tabs {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
        margin: 10px 0 4px;
    }
    .weather-modal-tabs button {
        min-height: 42px;
        border: 0;
        border-radius: 999px;
        padding: 0 20px;
        background: transparent;
        color: rgba(255,255,255,.72);
        font-weight: 900;
    }
    .weather-modal-tabs button.is-active {
        background: rgba(255,255,255,.08);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .weather-modal-hourly {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(96px, 1fr);
        gap: 18px;
        overflow-x: auto;
        padding: 16px 0 10px;
        scrollbar-color: rgba(255,255,255,.22) transparent;
    }
    .weather-modal-hour {
        display: grid;
        gap: 9px;
        justify-items: center;
        min-width: 90px;
        color: rgba(255,255,255,.86);
        text-align: center;
        font-weight: 850;
    }
    .weather-modal-hour .weather-pro-icon { width: 54px; height: 44px; }
    .weather-modal-hour b { font-size: 1.35rem; line-height: 1; color: #f8fafc; }
    .weather-modal-hour .rain-chance { color: #93c5fd; }
    .weather-modal-section-title {
        margin: 18px 0 10px;
        color: rgba(255,255,255,.92);
        font-size: 1rem;
        font-weight: 950;
    }
    .weather-modal-daily,
    .weather-modal-metrics {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .weather-modal-day,
    .weather-modal-metric {
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 20px;
        background: rgba(255,255,255,.06);
        padding: 12px;
        color: rgba(255,255,255,.82);
    }
    .weather-modal-day { display: grid; gap: 7px; justify-items: center; text-align: center; }
    .weather-modal-day .weather-pro-icon { width: 50px; height: 40px; }
    .weather-modal-day b,
    .weather-modal-metric b { color: #fff; font-weight: 950; }
    .weather-modal-metric span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.58); font-size: .78rem; font-weight: 850; }
    body.weather-modal-open { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) {
        .weather-card,
        .weather-location,
        .weather-priority-group,
        .weather-kicker i,
        .weather-hero:before {
            animation: none !important;
        }
        .weather-scene span,
        .weather-scene span::before,
        .weather-pro-icon:before,
        .weather-pro-icon:after { animation: none !important; }
        .weather-location,
        .weather-priority-names a { transition: none !important; }
    }
    @media (max-width: 640px) {
        .weather-scene .ws-sun { width: 120px; height: 120px; top: -44px; right: -30px; }
        .weather-scene .ws-precip { opacity: .45; }
        .weather-scene.scene-snow .ws-precip { opacity: .75; }
    }
    @media (min-width: 760px) {
        .weather-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
        .weather-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
        .weather-priority-levels { grid-template-columns: repeat(4, minmax(0,1fr)); }
        .weather-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
        .weather-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .weather-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
        .weather-forecast-card.wide { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        .weather-page { padding: 8px 7px 64px; }
        .weather-hero { border-radius: 18px; padding: 12px; }
        .weather-hero h1 { font-size: 1.55rem; line-height: 1.05; }
        .weather-hero p { font-size: .86rem; line-height: 1.35; }
        .weather-card { border-radius: 15px; padding: 9px; }
        .weather-priority-head { display: grid; gap: 5px; }
        .weather-priority-levels { grid-template-columns: repeat(5, minmax(72px,1fr)); overflow-x: auto; padding-bottom: 2px; }
        .weather-priority-level { min-width: 72px; padding: 7px; }
        .weather-current-summary .weather-pro-icon { width: 54px; height: 44px; }
        .weather-current-summary b { font-size: 1.7rem; }
        .weather-daily-grid { grid-template-columns: 1fr; }
        .weather-modal { padding: 8px; align-items: end; }
        .weather-modal-box {
            width: 100%;
            max-height: calc(100dvh - 12px);
            border-radius: 26px 26px 0 0;
        }
        .weather-modal-content { padding: 18px 16px 24px; }
        .weather-modal-main { gap: 14px; }
        .weather-modal-main .weather-pro-icon { width: 88px; height: 68px; }
        .weather-modal-temp { font-size: 4.2rem; }
        .weather-modal-tabs { justify-content: flex-start; gap: 7px; }
        .weather-modal-tabs button { min-height: 36px; padding: 0 12px; font-size: .86rem; }
        .weather-modal-hourly { grid-auto-columns: minmax(78px, 1fr); gap: 10px; }
        .weather-modal-daily,
        .weather-modal-metrics { grid-template-columns: 1fr; }
        .weather-priority-level span { font-size: .68rem; }
        .weather-priority-level b { font-size: .98rem; }
        .weather-priority-group { padding: 8px; border-radius: 13px; }
        .weather-priority-summary { font-size: .78rem; margin-bottom: 6px; }
        .weather-priority-names { gap: 4px; }
        .weather-priority-names a { min-height: 23px; padding: 2px 7px; font-size: .74rem; }
        .weather-toolbar { gap: 7px; }
        .weather-search { min-height: 40px; border-radius: 13px; }
        .weather-filters { gap: 6px; }
        .weather-filter { min-height: 32px; padding: 0 10px; font-size: .82rem; }
        .weather-list { gap: 6px; }
        .weather-location { border-radius: 13px; padding: 8px 9px; gap: 5px; border-left-width: 4px; }
        .weather-location h2 { font-size: .9rem; }
        .weather-badge { padding: 3px 7px; font-size: .68rem; }
    }
    @media (max-width: 640px) {
        .weather-page { padding: 6px 6px 54px; background: #f6f9fc; }
        .weather-shell { max-width: 100%; }
        .weather-hero { border-radius: 16px; padding: 10px 11px; box-shadow: 0 8px 20px rgba(15,23,42,.10); }
        .weather-hero:after { display: none; }
        .weather-kicker { padding: 5px 8px; gap: 5px; font-size: .68rem; }
        .weather-hero h1 { margin: 6px 0 0; font-size: 1.28rem; line-height: 1.04; letter-spacing: -.035em; }
        .weather-hero p { display: none; }
        .weather-grid { gap: 7px; margin-top: 7px; }
        .weather-card { border-radius: 13px; padding: 8px; box-shadow: 0 5px 14px rgba(15,23,42,.045); }
        .weather-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
        .weather-stat { border-radius: 11px; padding: 6px 4px; text-align: center; }
        .weather-stat span { font-size: .6rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .weather-stat b { margin-top: 2px; font-size: .92rem; line-height: 1; }
        .weather-priority-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .weather-priority-head p { display: none; }
        .weather-priority-head small { font-size: .66rem; white-space: nowrap; }
        .weather-priority-levels { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 7px; padding-bottom: 1px; }
        .weather-priority-level { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-width: auto; border-radius: 999px; padding: 4px 7px; }
        .weather-priority-level span { font-size: .66rem; line-height: 1; }
        .weather-priority-level b { margin: 0; font-size: .78rem; line-height: 1; }
        .weather-priority-group { padding: 7px; border-radius: 12px; border-left-width: 4px; }
        .weather-priority-group-head { margin-bottom: 5px; }
        .weather-priority-group-head b { font-size: .76rem; }
        .weather-priority-summary { display: none; }
        .weather-priority-names { gap: 4px; max-height: 58px; overflow: auto; }
        .weather-priority-names a { min-height: 22px; padding: 1px 6px; font-size: .72rem; }
        .weather-toolbar { gap: 6px; margin-top: 7px; }
        .weather-search { min-height: 36px; border-radius: 12px; padding: 0 10px; font-size: .84rem; }
        .weather-filters { gap: 4px; padding-bottom: 0; }
        .weather-filter { min-height: 28px; padding: 0 8px; font-size: .72rem; }
        .weather-list { gap: 4px; }
        .weather-location { padding: 7px 8px; border-radius: 11px; border-left-width: 0; gap: 0; }
        .weather-location-head { align-items: center; gap: 8px; }
        .weather-location h2 { font-size: .86rem; line-height: 1.15; }
        .weather-location-now span { min-height: 22px; padding: 1px 6px; font-size: .68rem; }
        .weather-badge { padding: 2px 6px; font-size: .64rem; }
        .weather-detail-grid { gap: 7px; }
        .weather-detail-card h2 { margin-bottom: 6px; font-size: .92rem; }
        .weather-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
        .weather-source-list { padding-left: 15px; font-size: .75rem; }
        .weather-page .mt-3 { margin-top: .45rem !important; }
    }
    @media (max-width: 640px) {
        .weather-page { padding: 5px 5px 48px; }
        .weather-hero { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 9px; border-radius: 14px; }
        .weather-kicker { border: 0; background: rgba(255,255,255,.14); padding: 4px 7px; font-size: 0; }
        .weather-kicker i { font-size: .92rem; }
        .weather-hero-row { gap: 6px; }
        .weather-hero h1 { margin: 0; flex: 1; font-size: 1.08rem; letter-spacing: -.025em; }
        .weather-hero p { font-size: .68rem; margin-top: 2px; }
        .weather-hero-row .weather-live-pill { font-size: .62rem; padding: 4px 6px; }
        .weather-card { padding: 7px; border-radius: 12px; }
        .weather-stats { gap: 3px; }
        .weather-stat { padding: 5px 3px; border-radius: 10px; }
        .weather-stat span { justify-content: center; gap: 3px; font-size: .56rem; }
        .weather-stat-icon { width: 16px; height: 16px; font-size: .58rem; }
        .weather-stat b { font-size: .82rem; }
        .weather-priority { padding-bottom: 6px; }
        .weather-priority-head { margin-bottom: 5px; }
        .weather-priority-head b { font-size: .86rem; }
        .weather-priority-head small { font-size: .6rem; max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
        .weather-priority-levels { gap: 3px; margin-bottom: 5px; scrollbar-width: none; }
        .weather-priority-levels::-webkit-scrollbar,
        .weather-filters::-webkit-scrollbar,
        .weather-priority-names::-webkit-scrollbar { display: none; }
        .weather-priority-level { gap: 3px; padding: 3px 6px; min-height: 24px; }
        .weather-priority-level span { gap: 3px; font-size: .62rem; }
        .weather-priority-level b { font-size: .72rem; }
        .weather-priority-group { padding: 6px; }
        .weather-priority-group-head { margin-bottom: 4px; }
        .weather-priority-names { max-height: 48px; }
        .weather-priority-names a { min-height: 20px; padding: 1px 6px; font-size: .68rem; }
        .weather-toolbar { position: sticky; top: 0; z-index: 10; margin: 5px -5px 0; padding: 5px; background: rgba(246,249,252,.96); backdrop-filter: blur(10px); }
        .weather-search { min-height: 34px; font-size: .8rem; }
        .weather-filter { min-height: 27px; padding: 0 7px; font-size: .68rem; }
        .weather-filter i { margin-right: 3px; }
        .weather-list { grid-template-columns: 1fr; gap: 6px; }
        .weather-location { min-height: 44px; padding: 8px 9px; border-radius: 11px; }
        .weather-location-title { gap: 6px; }
        .weather-status-dot { width: 10px; height: 10px; flex-basis: 10px; }
        .weather-location h2 { font-size: .82rem; line-height: 1.15; max-width: none; }
        .weather-location-now { gap: 3px; }
        .weather-location-now span { min-height: 20px; padding: 1px 5px; font-size: .64rem; }
        .weather-location-now .w-wind { display: none; }
        .weather-risk-section { grid-column: 1; margin: 8px 0 1px; padding: 8px 9px; }
        .weather-risk-section small { font-size: .68rem; }
        .weather-badge { gap: 3px; padding: 2px 5px; font-size: .6rem; }
        .weather-source-audit { padding: 7px; }
        .weather-source-audit summary { font-size: .8rem; }
    }
    @media (max-width: 640px) {
        .weather-card,
        .weather-location,
        .weather-priority-group {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            visibility: visible !important;
        }
        .weather-list-card {
            display: block !important;
            margin-top: 6px !important;
            padding: 6px !important;
            background: rgba(255,255,255,.96) !important;
            border-color: rgba(30,82,136,.14) !important;
            min-height: 180px;
            position: relative;
            z-index: 2;
        }
        .weather-list-card > .d-flex {
            margin-bottom: 6px !important;
        }
        .weather-list-card > .d-flex p,
        .weather-list-card > .d-flex small {
            display: none;
        }
        .weather-list-card > .d-flex b {
            font-size: .84rem;
        }
        #weatherLocationList {
            display: grid !important;
            gap: 4px !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    }
    .weather-hero-art {
        position: absolute;
        top: 50%;
        right: clamp(12px, 4vw, 34px);
        z-index: 1;
        display: grid;
        place-items: center;
        width: clamp(92px, 16vw, 136px);
        height: clamp(74px, 13vw, 108px);
        transform: translateY(-50%);
        opacity: .44;
        filter: drop-shadow(0 18px 30px rgba(2, 6, 23, .24));
        pointer-events: none;
    }
    .weather-hero-art .weather-pro-icon {
        width: 100%;
        height: 100%;
    }
    .weather-hero-art-ambient { opacity: .5; }
    @media (min-width: 641px) {
        .weather-hero h1,
        .weather-hero p {
            max-width: calc(100% - 172px);
        }
    }
    .weather-strong-alert {
        border-left: 5px solid var(--weather-warn);
        background:
            linear-gradient(135deg, rgba(255, 247, 237, .98), rgba(255,255,255,.94)),
            linear-gradient(100deg, rgba(249, 115, 22, .12), transparent 48%);
    }
    .weather-toolbar { position: relative; }
    .weather-toolbar:before {
        content: "\F52A";
        position: absolute;
        left: 15px;
        top: 21px;
        z-index: 2;
        font-family: "bootstrap-icons";
        color: var(--weather-blue);
        font-size: 1rem;
        line-height: 1;
        pointer-events: none;
    }
    .weather-search { padding-left: 40px; }
    .weather-modal-box:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
            linear-gradient(180deg, rgba(147, 197, 253, .12), transparent 34%),
            linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.08) 45%, transparent 53% 100%);
        animation: weatherModalGlow 10s ease-in-out infinite;
        pointer-events: none;
    }
    .weather-modal-content { position: relative; z-index: 1; }
    @keyframes weatherModalGlow {
        0%, 100% { opacity: .64; transform: translateX(-2%); }
        50% { opacity: 1; transform: translateX(2%); }
    }
    @media (max-width: 480px) {
        .weather-hero-art { display: none; }
        .weather-toolbar:before {
            left: 16px;
            top: 15px;
            font-size: .92rem;
        }
        .weather-search { padding-left: 36px; }
        .weather-list-card { padding: 8px !important; }
        .weather-location {
            min-height: 44px;
            padding: 7px 8px !important;
        }
        .weather-location-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }
        .weather-location h2 {
            max-width: none !important;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .weather-location-now .w-condition {
            max-width: 56px;
            overflow: hidden;
        }
        .weather-location-now .weather-pro-icon {
            width: 17px;
            height: 14px;
        }
        .weather-modal-box:before { animation: none; opacity: .72; }
    }
    /* ===== Weather refresh 2026-06-17: icon Bootstrap theo điều kiện, ngày/đêm, chip gọn ===== */
    .weather-pro-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important; overflow: visible; }
    .weather-pro-icon::before, .weather-pro-icon::after { content: none !important; display: none !important; background: none !important; }
    .weather-pro-icon > i.bi { line-height: 1; font-size: 22px; display: block; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .14)); }
    /* Icon SVG nhiều màu (mới): lấp đầy khung, giữ tỉ lệ */
    .weather-pro-icon svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, .16)); }
    .weather-hero-art .weather-pro-icon { width: 92px; height: 78px; }
    .weather-current-summary .weather-pro-icon svg, .weather-modal-main .weather-pro-icon svg, .weather-hero-art .weather-pro-icon svg { filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .22)); }

    .weather-pro-icon.is-sunny > i.bi { color: #f59e0b; }
    .weather-pro-icon.is-clear-night > i.bi { color: #94a3b8; }
    .weather-pro-icon.is-partly > i.bi { color: #f59e0b; }
    .weather-pro-icon.is-partly-night > i.bi { color: #8aa0c0; }
    .weather-pro-icon.is-cloudy > i.bi { color: #7c8aa0; }
    .weather-pro-icon.is-fog > i.bi { color: #94a3b8; }
    .weather-pro-icon.is-drizzle > i.bi { color: #38bdf8; }
    .weather-pro-icon.is-rainy > i.bi { color: #0ea5e9; }
    .weather-pro-icon.is-storm > i.bi { color: #6366f1; }
    .weather-pro-icon.is-snow > i.bi { color: #60a5fa; }
    .weather-pro-icon.is-hot > i.bi { color: #f97316; }
    .weather-pro-icon.is-fire > i.bi { color: #ef4444; }
    .weather-pro-icon.is-unknown > i.bi { color: #94a3b8; }

    /* Kích thước icon theo từng vị trí */
    .weather-hero-art .weather-pro-icon > i.bi { font-size: 66px; filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .28)); }
    .weather-current-summary .weather-pro-icon > i.bi { font-size: 40px; }
    .weather-hour-item .weather-pro-icon > i.bi { font-size: 24px; }
    .weather-day-item .weather-pro-icon > i.bi { font-size: 26px; }
    .weather-modal-main .weather-pro-icon > i.bi { font-size: 60px; }
    .weather-modal-hour .weather-pro-icon > i.bi { font-size: 28px; }
    .weather-modal-day .weather-pro-icon > i.bi { font-size: 26px; }

    @keyframes wxSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
    @keyframes wxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
    .weather-pro-icon.is-sunny > i.bi, .weather-pro-icon.is-clear-night > i.bi { animation: wxSunPulse 5s ease-in-out infinite; transform-origin: 50% 50%; }
    .weather-pro-icon.is-rainy > i.bi, .weather-pro-icon.is-drizzle > i.bi, .weather-pro-icon.is-storm > i.bi, .weather-pro-icon.is-snow > i.bi, .weather-pro-icon.is-cloudy > i.bi, .weather-pro-icon.is-partly > i.bi, .weather-pro-icon.is-partly-night > i.bi { animation: wxFloat 5.5s ease-in-out infinite; }

    /* Chip danh sách gọn gàng */
    .weather-location-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
    .weather-location-now > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .76rem; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.1; }
    .weather-location-now .w-temp { color: #0f172a; background: #f1f5f9; border-color: #e2e8f0; }
    .weather-location-now .w-wind { color: #155e75; background: #ecfeff; border-color: #cffafe; }
    .weather-location-now .w-rain { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
    .weather-location-now .w-condition.is-sunny { color: #92400e; background: #fff7ed; border-color: rgba(245, 158, 11, .2); }
    .weather-location-now .w-condition.is-hot, .weather-location-now .w-condition.is-fire { color: #9a3412; background: #ffedd5; border-color: rgba(249, 115, 22, .24); }
    .weather-location-now .w-condition.is-partly, .weather-location-now .w-condition.is-clear-night, .weather-location-now .w-condition.is-partly-night { color: #0f5f88; background: #ecfeff; border-color: rgba(14, 116, 144, .16); }
    .weather-location-now .w-condition.is-cloudy, .weather-location-now .w-condition.is-fog, .weather-location-now .w-condition.is-unknown { color: #475569; background: #f1f5f9; border-color: rgba(100, 116, 139, .18); }
    .weather-location-now .w-condition.is-rainy, .weather-location-now .w-condition.is-drizzle, .weather-location-now .w-condition.is-storm, .weather-location-now .w-condition.is-snow { color: #075985; background: #e0f2fe; border-color: rgba(2, 132, 199, .16); }
    .weather-location-now .w-condition .weather-pro-icon { width: 30px; height: 24px; }
    .weather-location-now .w-condition .weather-pro-icon svg { filter: none; }
    .weather-location-now .w-condition .weather-pro-icon > i.bi { font-size: 14px; filter: none; animation: none; }
    .weather-location-now .w-cond-label { font-weight: 700; }

    /* Hiệu ứng cảnh: ban đêm + nắng nóng (không còn mưa khi chỉ có xác suất) */
    .weather-scene.scene-night .ws-sky { background: linear-gradient(180deg, rgba(15, 23, 42, .5), rgba(15, 23, 42, .04) 62%); }
    .weather-scene.scene-night .ws-sun { opacity: 1; background: radial-gradient(circle at 50% 50%, #f1f5f9, #cbd5e1 58%, transparent 72%); box-shadow: 0 0 38px rgba(226, 232, 240, .45); animation: wsSunPulse 9s ease-in-out infinite; }
    .weather-scene.scene-night .ws-clouds { opacity: .45; }
    .weather-scene.scene-hot .ws-sky { background: radial-gradient(120% 90% at 80% -10%, rgba(251, 146, 60, .42), transparent 60%); }
    .weather-scene.scene-hot .ws-sun { opacity: 1; background: radial-gradient(circle at 50% 50%, #fb923c, #f97316 60%, transparent 73%); animation: wsSunPulse 6s ease-in-out infinite; }

    @media (prefers-reduced-motion: reduce) {
        .weather-pro-icon > i.bi { animation: none !important; }
    }
    /* Mobile-first: an the phu/placeholder/dev de gon tren man hinh nho */
    @media (max-width: 640px) {
        .weather-mobile-hide { display: none !important; }
    }
    .weather-summary-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }
    .weather-summary-item {
        border: 1px solid rgba(148,163,184,.16);
        border-radius: 16px;
        background: rgba(255,255,255,.88);
        padding: 10px 11px;
        box-shadow: 0 6px 16px rgba(15,23,42,.04);
    }
    .weather-summary-item span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--weather-muted);
        font-size: .76rem;
        font-weight: 850;
    }
    .weather-summary-item b {
        display: block;
        margin-top: 4px;
        font-size: 1.06rem;
        font-weight: 950;
        letter-spacing: -.03em;
    }
    .weather-summary-item.normal b { color: var(--weather-safe); }
    .weather-summary-item.notice b { color: #ca8a04; }
    .weather-summary-item.warning b { color: var(--weather-warn); }
    .weather-summary-item.danger b { color: var(--weather-danger); }
    .weather-toolbar.weather-toolbar-sticky {
        position: sticky;
        top: 10px;
        z-index: 8;
        padding: 10px;
        border: 1px solid rgba(148,163,184,.16);
        border-radius: 18px;
        background: rgba(244,248,255,.86);
        backdrop-filter: blur(14px);
        box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }
    @media (max-width: 640px) {
        .weather-summary-strip {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            margin-top: 7px;
        }
        .weather-summary-item {
            border-radius: 13px;
            padding: 8px 9px;
        }
        .weather-summary-item span { font-size: .68rem; }
        .weather-summary-item b { margin-top: 3px; font-size: .96rem; }
        .weather-toolbar.weather-toolbar-sticky {
            top: 6px;
            padding: 8px;
            border-radius: 14px;
        }
        .weather-toolbar.weather-toolbar-sticky .weather-filters {
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        .weather-location-head {
            display: grid;
            gap: 7px;
            align-items: stretch;
        }
        .weather-location-title { align-items: flex-start; }
        .weather-location h2 {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            line-height: 1.18;
        }
        .weather-location-alert {
            margin-left: 18px;
            margin-top: 2px;
            font-size: .72rem;
        }
        .weather-location-now {
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-left: 0;
            width: 100%;
        }
        .weather-location { padding: 12px; border-radius: 16px; }
        .weather-location-now span { min-height: 28px; padding: 4px 8px; font-size: .72rem; }
        .weather-location-alert { margin-left: 0; padding: 8px 9px; }
        .weather-list { gap: 8px; }
        .weather-grid { grid-template-columns: 1fr; gap: 10px; }
        .weather-detail-card { padding: 14px; border-radius: 16px; }
        .weather-hourly-rail { margin-right: -6px; padding-right: 6px; }
        .weather-hour-item { min-width: 68px; padding: 8px 6px; }
        .weather-daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
        .weather-day-item { padding: 8px 5px; }
        .weather-day-item small { font-size: .68rem; }
        .weather-priority-levels {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            overflow: visible;
            padding-bottom: 0;
        }
        .weather-priority-level {
            min-width: 0;
            width: 100%;
        }
        .weather-priority-names { max-height: none; }
        .weather-priority-names a { min-width: 0; }
    }
    /* Mobile-first polish: đọc nhanh, chạm dễ, không dồn quá nhiều thông tin một hàng */
    @media (max-width: 640px) {
        .weather-page { padding: 6px 6px 42px; }
        .weather-shell { width: 100%; }
        .weather-hero { min-height: 170px; padding: 14px 13px; border-radius: 18px; }
        .weather-hero h1 { max-width: 78%; font-size: clamp(1.55rem, 8vw, 2.1rem); line-height: 1.05; }
        .weather-hero p { max-width: 88%; font-size: .82rem; line-height: 1.4; }
        .weather-kicker { font-size: .7rem; padding: 6px 8px; }
        .weather-card { border-radius: 16px; padding: 11px; }
        .weather-priority { margin-top: 8px !important; }
        .weather-priority-head { margin-bottom: 8px; }
        .weather-priority-head b { font-size: .92rem; }
        .weather-priority-levels { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .weather-priority-level { padding: 7px; }
        .weather-priority-level span { font-size: .68rem; }
        .weather-priority-level b { font-size: 1rem; }
        .weather-toolbar.weather-toolbar-sticky { margin-top: 8px; top: 4px; padding: 7px; border-radius: 15px; }
        .weather-toolbar.weather-toolbar-sticky .weather-search { min-height: 44px; font-size: .9rem; }
        .weather-toolbar.weather-toolbar-sticky .weather-filters { gap: 6px; margin-right: -2px; padding-bottom: 3px; }
        .weather-filter { min-height: 36px; padding: 0 10px; font-size: .74rem; }
        .weather-list-card { margin-top: 8px !important; padding: 9px !important; }
        .weather-location { gap: 7px; padding: 11px !important; border-radius: 15px; }
        .weather-location-head { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
        .weather-location-title { min-width: 0; }
        .weather-location h2 { font-size: .9rem; line-height: 1.2; }
        .weather-location-now { justify-content: flex-start; gap: 5px; width: 100%; }
        .weather-location-now > span { min-height: 28px; padding: 4px 8px; font-size: .7rem; }
        .weather-location-now .w-condition { max-width: none; }
        .weather-location-alert { margin-left: 0; padding: 8px 9px; font-size: .72rem; line-height: 1.35; }
        .weather-location-alert small { display: block; margin-top: 3px; }
        .weather-detail-grid { grid-template-columns: 1fr; gap: 8px; }
        .weather-detail-card { padding: 12px; }
        .weather-current-summary { padding: 10px; border-radius: 14px; }
        .weather-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
        .weather-stat { padding: 7px; border-radius: 11px; }
        .weather-stat span { font-size: .7rem; }
        .weather-stat b { font-size: .98rem; }
        .weather-hourly-rail { display: flex; overflow-x: auto; gap: 6px; margin-right: -4px; padding: 2px 4px 7px 0; scroll-snap-type: x proximity; }
        .weather-hour-item { min-width: 68px; padding: 8px 5px; scroll-snap-align: start; border-radius: 12px; }
        .weather-daily-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
        .weather-day-item { padding: 8px 4px; border-radius: 11px; }
        .weather-day-item small { display: block; font-size: .64rem; line-height: 1.2; }
        .weather-source-audit { font-size: .78rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .weather-card, .weather-location, .weather-priority-group { animation: none !important; }
        .weather-status-dot, .weather-scene *, .weather-pro-icon * { animation: none !important; }
    }
    /* Thẻ địa phương: hai tầng cố định, không ép tên và chỉ số trên cùng một hàng. */
    .weather-page:not(.weather-detail-page) .weather-hero {
        min-height: 68px !important;
        padding: 12px 15px !important;
    }
    .weather-page:not(.weather-detail-page) .weather-hero-row { min-height: 0; }
    .weather-page:not(.weather-detail-page) .weather-hero-row h1 { margin: 0; }
    .weather-page:not(.weather-detail-page) .weather-live-dot {
        position: relative;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        color: #86efac;
        background: rgba(4,28,48,.24);
        font-size: .5rem;
    }
    .weather-page:not(.weather-detail-page) .weather-live-dot i { animation: weatherGreenGlow 2.4s ease-in-out infinite; }
    .weather-page:not(.weather-detail-page) .weather-hero-search {
        position: absolute;
        z-index: 8;
        top: 50%;
        right: 10px;
        display: flex;
        align-items: center;
        width: 38px;
        height: 38px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.34);
        border-radius: 999px;
        background: rgba(7,31,54,.32);
        box-shadow: 0 8px 24px rgba(2,12,27,.18);
        backdrop-filter: blur(12px);
        transform: translateY(-50%);
        transition: width .24s ease, background-color .24s ease, border-color .24s ease;
    }
    .weather-page:not(.weather-detail-page) .weather-hero-search.is-open {
        width: min(310px, calc(100% - 88px));
        border-color: rgba(255,255,255,.54);
        background: rgba(255,255,255,.96);
    }
    .weather-page:not(.weather-detail-page) .weather-search-toggle {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        color: #fff;
        background: transparent;
        cursor: pointer;
    }
    .weather-page:not(.weather-detail-page) .weather-hero-search.is-open .weather-search-toggle { color: #0f4c81; }
    .weather-page:not(.weather-detail-page) .weather-hero-search .weather-search {
        width: 100%;
        min-height: 38px !important;
        padding: 0 42px 0 13px !important;
        border: 0 !important;
        outline: 0 !important;
        color: #0f172a;
        background: transparent !important;
        font-size: .82rem;
        opacity: 0;
        pointer-events: none;
        transform: translateX(12px);
        transition: opacity .18s ease, transform .24s ease;
    }
    .weather-page:not(.weather-detail-page) .weather-hero-search.is-open .weather-search {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    .weather-page:not(.weather-detail-page) .weather-hero-search .weather-search::placeholder { color: #64748b; }
    .weather-page:not(.weather-detail-page) .weather-hero-art { right: 52px !important; opacity: .18 !important; }
    @media (max-width: 640px) {
        .weather-page:not(.weather-detail-page) .weather-hero-search { right: 7px; width: 44px; height: 44px; }
        .weather-page:not(.weather-detail-page) .weather-search-toggle { width: 44px; height: 44px; }
        .weather-page:not(.weather-detail-page) .weather-hero-search.is-open { width: calc(100% - 68px); }
        .weather-page:not(.weather-detail-page) .weather-hero-search .weather-search { min-height: 44px !important; padding-right: 48px !important; }
        .weather-page:not(.weather-detail-page) .weather-hero-art { right: 40px !important; opacity: .12 !important; }
    }
    @media (prefers-reduced-motion: reduce) {
        .weather-page:not(.weather-detail-page) .weather-hero-search,
        .weather-page:not(.weather-detail-page) .weather-hero-search .weather-search { transition: none !important; }
    }

    .weather-page:not(.weather-detail-page) .weather-toolbar.weather-toolbar-sticky {
        position: sticky;
        grid-template-columns: 24px minmax(0,1fr) !important;
        gap: 0 !important;
        margin-top: 7px !important;
        padding: 4px 6px !important;
    }
    .weather-page:not(.weather-detail-page) .weather-search-icon {
        z-index: 2;
        align-self: center;
        justify-self: center;
        color: #64748b;
        font-size: .8rem;
        pointer-events: none;
    }
    .weather-page:not(.weather-detail-page) .weather-search {
        min-height: 38px !important;
        padding: 0 8px !important;
        border: 0 !important;
        background: transparent !important;
    }
    .weather-page:not(.weather-detail-page) .weather-list-card {
        margin-top: 6px !important;
    }
    .weather-page:not(.weather-detail-page) .weather-location {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        align-content: center;
        gap: 7px !important;
        min-width: 0;
        overflow: hidden;
    }
    .weather-page:not(.weather-detail-page) .weather-location-head {
        display: block !important;
        min-width: 0;
        width: 100%;
    }
    .weather-page:not(.weather-detail-page) .weather-location h2 {
        display: block;
        width: 100%;
        margin: 0;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 3px !important;
        width: auto;
        min-width: 0;
        overflow: hidden;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now .w-condition {
        min-width: 28px;
        padding: 0 3px !important;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now .w-cond-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @media (max-width: 640px) {
        .weather-page:not(.weather-detail-page) { padding: 6px 6px 48px !important; }
        .weather-page:not(.weather-detail-page) .weather-hero {
            min-height: 50px !important;
            padding: 8px 10px !important;
            border-radius: 14px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-hero-row { width: 100%; min-height: 0; padding-right: 52px; }
        .weather-page:not(.weather-detail-page) .weather-hero h1 { max-width: none !important; font-size: 1.12rem !important; white-space: nowrap; }
        .weather-page:not(.weather-detail-page) .weather-live-dot { display: none !important; }
        .weather-page:not(.weather-detail-page) .weather-hero-art { width: 72px; height: 56px; opacity: .25; }

        .weather-page:not(.weather-detail-page) .weather-toolbar.weather-toolbar-sticky {
            grid-template-columns: 23px minmax(0,1fr) !important;
            margin: 5px 0 0 !important;
            padding: 3px 5px !important;
            border-radius: 11px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-search {
            min-height: 36px !important;
            padding: 0 7px !important;
            border-radius: 9px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-list-card {
            margin-top: 6px !important;
            padding: 6px !important;
            border-radius: 12px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-list-card > .d-flex {
            margin: 0 2px 5px !important;
        }
        .weather-page:not(.weather-detail-page) #weatherLocationList {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 5px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-risk-section {
            grid-column: 1 / -1 !important;
            margin: 7px 0 0 !important;
            padding: 7px 8px !important;
            border-radius: 9px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-risk-section:first-child { margin-top: 0 !important; }
        .weather-page:not(.weather-detail-page) .weather-risk-section-title { gap: 6px; }
        .weather-page:not(.weather-detail-page) .weather-risk-section-title h2 { font-size: .76rem; }
        .weather-page:not(.weather-detail-page) .weather-risk-section-title span { font-size: .64rem; }
        .weather-page:not(.weather-detail-page) .weather-risk-section small { display: none; }
        .weather-page:not(.weather-detail-page) .weather-location {
            min-height: 60px !important;
            padding: 7px 8px !important;
            gap: 5px !important;
            border-left-width: 3px !important;
            border-radius: 10px !important;
            box-shadow: none !important;
        }
        .weather-page:not(.weather-detail-page) .weather-location h2 {
            display: -webkit-box;
            min-height: 1.9rem;
            overflow: hidden;
            font-size: .82rem !important;
            line-height: 1.16 !important;
            overflow-wrap: normal;
            text-overflow: clip;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .weather-page:not(.weather-detail-page) .weather-location-now {
            display: flex !important;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: nowrap;
            gap: 2px !important;
            overflow: hidden;
        }
        .weather-page:not(.weather-detail-page) .weather-location-now > span {
            min-height: 22px !important;
            padding: 2px 4px !important;
            border-radius: 6px !important;
            font-size: .61rem !important;
        }
        .weather-page:not(.weather-detail-page) .weather-location-now .w-temp { flex: 0 0 auto; font-size: .7rem !important; }
        .weather-page:not(.weather-detail-page) .weather-location-now .w-condition { flex: 0 0 24px; min-width:24px; justify-content: center; }
        .weather-page:not(.weather-detail-page) .weather-location-now .weather-pro-icon { width: 18px; height: 16px; flex: 0 0 18px; }
        .weather-page:not(.weather-detail-page) .weather-location-now .w-cond-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .weather-page:not(.weather-detail-page) .weather-location-now .w-wind { display: none !important; }
        .weather-page:not(.weather-detail-page) .weather-location-now .w-rain { flex: 0 0 auto; }
        .weather-page:not(.weather-detail-page) .weather-source-audit { margin-top: 6px !important; }
    }
    @media (max-width: 340px) {
        .weather-page:not(.weather-detail-page) #weatherLocationList {
            grid-template-columns: 1fr !important;
        }
        .weather-page:not(.weather-detail-page) .weather-location {
            min-height: 52px !important;
        }
        .weather-page:not(.weather-detail-page) .weather-location h2 {
            min-height: auto;
            -webkit-line-clamp: 1;
        }
    }

    /* Bốn mức là bốn panel riêng; địa phương bên trong vẫn phẳng, không lặp 99 khung màu. */
    .weather-page:not(.weather-detail-page) .weather-list-card {
        overflow: visible;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .weather-page:not(.weather-detail-page) #weatherLocationList {
        display: block !important;
        background: transparent;
    }
    .weather-page:not(.weather-detail-page) .weather-risk-panel {
        display: block;
        overflow: hidden;
        margin-top: 10px;
        border: 1px solid rgba(148,163,184,.22);
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(15,23,42,.035);
    }
    .weather-page:not(.weather-detail-page) .weather-risk-panel:first-child { margin-top: 0; }
    .weather-page:not(.weather-detail-page) .weather-risk-items {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 0;
        background: #fff;
    }
    .weather-page:not(.weather-detail-page) .weather-risk-section {
        margin: 0 !important;
        padding: 9px 11px !important;
        border: 0 !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        background: #f8fafc !important;
    }
    .weather-page:not(.weather-detail-page) .weather-risk-section-title { color: #334155; }
    .weather-page:not(.weather-detail-page) .weather-risk-section.emergency .weather-risk-section-title > i { color: #dc2626; }
    .weather-page:not(.weather-detail-page) .weather-risk-section.warning .weather-risk-section-title > i { color: #ea580c; }
    .weather-page:not(.weather-detail-page) .weather-risk-section.notice .weather-risk-section-title > i { color: #ca8a04; }
    .weather-page:not(.weather-detail-page) .weather-risk-section.normal .weather-risk-section-title > i { color: #16a34a; }
    .weather-page:not(.weather-detail-page) .weather-location,
    .weather-page:not(.weather-detail-page) .weather-location.normal,
    .weather-page:not(.weather-detail-page) .weather-location.notice,
    .weather-page:not(.weather-detail-page) .weather-location.warning,
    .weather-page:not(.weather-detail-page) .weather-location.danger,
    .weather-page:not(.weather-detail-page) .weather-location.emergency {
        min-height: 52px !important;
        margin: 0 !important;
        padding: 8px 11px !important;
        border: 0 !important;
        border-right: 1px solid rgba(148,163,184,.13) !important;
        border-bottom: 1px solid rgba(148,163,184,.13) !important;
        border-radius: 0 !important;
        color: #0f172a !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .weather-page:not(.weather-detail-page) .weather-location:hover,
    .weather-page:not(.weather-detail-page) .weather-location:focus-visible {
        background: #f4f7fb !important;
        box-shadow: inset 3px 0 0 #2563eb !important;
    }
    .weather-page:not(.weather-detail-page) .weather-location:focus-visible {
        position: relative;
        z-index: 2;
        outline: 2px solid #2563eb !important;
        outline-offset: -2px;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now > span,
    .weather-page:not(.weather-detail-page) .weather-location-now .w-temp,
    .weather-page:not(.weather-detail-page) .weather-location-now .w-condition {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .weather-page:not(.weather-detail-page) .weather-location-now .w-temp { color: #334155 !important; }
    @media (max-width: 340px) {
        .weather-page:not(.weather-detail-page) .weather-risk-items { grid-template-columns: 1fr; }
        .weather-page:not(.weather-detail-page) .weather-location { border-right: 0 !important; }
    }
    @media (max-width: 759px) and (min-width: 341px) {
        .weather-page:not(.weather-detail-page) .weather-risk-items { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .weather-page:not(.weather-detail-page) .weather-location { min-height: 60px !important; }
    }
    .weather-community-signal { display:grid; gap:2px; margin:8px 0 10px; padding:9px 10px; border:1px solid #dbe4ee; border-radius:12px; color:#334155; background:#f8fafc; }
    /* Danh sách có 99 xã/phường: giữ đủ dữ liệu để tìm kiếm nhưng bỏ qua
       khâu layout/paint của các thẻ nằm ngoài màn hình đầu. */
    .weather-page:not(.weather-detail-page) .weather-location {
        content-visibility: auto;
        contain-intrinsic-size: auto 58px;
    }
    .weather-community-signal b { display:flex; align-items:center; gap:6px; font-size:.82rem; }
    .weather-community-signal span { font-size:.72rem; line-height:1.45; }
    .weather-community-signal.is-active { border-color:#60a5fa; color:#0c4a6e; background:#eff6ff; }
    .weather-observation-report { margin:10px 0; padding:10px; border:1px dashed #94a3b8; border-radius:12px; background:#fff; }
    .weather-observation-report > b { display:block; margin-bottom:7px; font-size:.82rem; }
    .weather-observation-actions { display:flex; flex-wrap:wrap; gap:6px; }
    .weather-observation-actions button { min-height:34px; padding:6px 9px; border:1px solid #cbd5e1; border-radius:999px; color:#1e3a5f; background:#f8fafc; font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; }
    .weather-observation-actions button:hover, .weather-observation-actions button:focus-visible { border-color:#2563eb; outline:0; background:#eff6ff; }
    .weather-observation-actions button:disabled { cursor:wait; opacity:.55; }
    .weather-observation-report small, .weather-observation-status { display:block; margin-top:7px; color:#64748b; font-size:.68rem; line-height:1.45; }
    .weather-observation-status.is-error { color:#b91c1c; }
    .weather-observation-status.is-success { color:#047857; font-weight:700; }
    @media (max-width: 420px) { .weather-observation-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .weather-observation-actions button { width:100%; } }

    .weather-personal-tools { overflow: hidden; margin: 8px 0; border: 1px solid #cfddeb; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.035); }
    .weather-personal-tools__row { display: grid; min-height: 52px; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; }
    .weather-personal-tools__row + .weather-personal-link { border-top: 1px solid #e6edf5; }
    .weather-personal-action,
    .weather-personal-link { display: grid; width: 100%; min-width: 0; min-height: 52px; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 5px 9px; border: 0; color: #18344f; background: transparent; font: inherit; text-align: left; text-decoration: none; }
    .weather-personal-action { cursor: pointer; }
    .weather-personal-action:hover,
    .weather-personal-link:hover { background: #f7faff; }
    .weather-personal-action:focus-visible,
    .weather-personal-link:focus-visible,
    .weather-personal-detail:focus-visible { position: relative; z-index: 2; outline: 3px solid rgba(37,99,235,.28); outline-offset: -3px; }
    .weather-personal-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 11px; color: #1d4ed8; background: #e8f1ff; font-size: 1rem; }
    .weather-personal-link .weather-personal-icon { color: #047857; background: #e8f8f1; }
    .weather-personal-copy { display: grid; min-width: 0; gap: 1px; line-height: 1.2; }
    .weather-personal-copy b { overflow: hidden; color: #172b42; font-size: .87rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
    .weather-personal-copy small { overflow: hidden; color: #66788c; font-size: .74rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
    .weather-personal-go { display: inline-flex; min-width: 43px; min-height: 44px; align-items: center; justify-content: flex-end; gap: 3px; color: #2563eb; font-size: .72rem; font-weight: 900; white-space: nowrap; }
    .weather-personal-detail { display: inline-flex; min-width: 62px; min-height: 52px; align-items: center; justify-content: center; gap: 3px; border-left: 1px solid #e6edf5; color: #174f8f; font-size: .72rem; font-weight: 950; text-decoration: none; }
    .weather-personal-detail[hidden], .weather-personal-status[hidden], .weather-personal-candidates[hidden] { display: none !important; }
    .weather-personal-status { margin: 0; padding: 7px 10px 8px 53px; border-top: 1px solid #edf2f7; color: #52667b; background: #f8fbff; font-size: .7rem; font-weight: 700; line-height: 1.4; }
    .weather-personal-status.is-error { color: #9f1239; background: #fff7f8; }
    .weather-personal-status.is-result { color: #35526c; }
    .weather-personal-candidates { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 10px 9px; border-top: 1px solid #edf2f7; background: #fff; }
    .weather-personal-candidates > span { width: 100%; color: #52667b; font-size: .7rem; font-weight: 800; }
    .weather-personal-candidates a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 10px; border: 1px solid #cfddeb; border-radius: 10px; color: #174f8f; background: #f8fbff; font-size: .72rem; font-weight: 900; text-decoration: none; }
    @media (min-width: 760px) {
        .weather-personal-tools.is-signed-in { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
        .weather-personal-tools.is-signed-in .weather-personal-link { border-top: 0; border-left: 1px solid #e6edf5; }
        .weather-personal-tools.is-signed-in .weather-personal-status,
        .weather-personal-tools.is-signed-in .weather-personal-candidates { grid-column: 1 / -1; }
    }

    .weather-official-summary { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 8px 0; padding: 6px 10px; border: 1px solid #bfdbfe; border-radius: 13px; background: #eff6ff; color: #173f6f; }
    .weather-official-summary > i { flex: 0 0 auto; color: #2563eb; font-size: 1.05rem; }
    .weather-official-summary span { min-width: 0; font-size: .75rem; font-weight: 800; line-height: 1.35; }
    .weather-official-summary a { display: inline-flex; flex: 0 0 auto; min-height: 44px; align-items: center; margin-left: auto; padding: 0 10px; border-radius: 10px; background: #fff; color: #174f8f; font-size: .75rem; font-weight: 950; text-decoration: none; white-space: nowrap; }
    .weather-official-summary a:focus-visible, .weather-official-alert__source:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; }
    .weather-official-alerts { scroll-margin-top: 82px; margin: 14px 0 2px; padding: 15px; border: 1px solid #bfdbfe; border-radius: 16px; background: linear-gradient(180deg,#f8fbff 0%,#fff 100%); box-shadow: 0 10px 24px rgba(15,23,42,.06); }
    .weather-official-alerts:target { box-shadow: 0 0 0 3px rgba(37,99,235,.14),0 10px 24px rgba(15,23,42,.07); }
    .weather-official-alerts__head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: #173f6f; }
    .weather-official-alerts__icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; margin: 0; border-radius: 12px; background: #dbeafe; color: #1d4ed8; font-size: 1.1rem; }
    .weather-official-alerts__head div { min-width: 0; }
    .weather-official-alerts__head p { margin: 0 0 1px; color: #2563eb; font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
    .weather-official-alerts__head h2 { margin: 0; font-size: 1rem; font-weight: 950; line-height: 1.25; }
    .weather-official-alerts__count { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: #e0edff; color: #174f8f; font-size: .69rem; font-weight: 900; white-space: nowrap; }
    .weather-official-alerts__note { margin: 0 0 11px; color: #52657a; font-size: .76rem; line-height: 1.5; }
    .weather-official-alerts__list { display: grid; gap: 10px; }
    .weather-official-alert { display: grid; gap: 8px; padding: 13px; border: 1px solid #dbe5ef; border-left: 4px solid #eab308; border-radius: 13px; background: #fff; }
    .weather-official-alert.is-warning, .weather-official-alert.is-danger, .weather-official-alert.is-emergency { border-left-color: #dc2626; }
    .weather-official-alert__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #64748b; font-size: .7rem; font-weight: 850; }
    .weather-official-alert__level { padding: 4px 7px; border-radius: 999px; background: #fef9c3; color: #854d0e; }
    .is-warning .weather-official-alert__level, .is-danger .weather-official-alert__level, .is-emergency .weather-official-alert__level { background: #fee2e2; color: #991b1b; }
    .weather-official-alert h3 { margin: 0; color: #1e293b; font-size: .9rem; font-weight: 950; line-height: 1.42; }
    .weather-official-alert__scope { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 9px; border-radius: 9px; background: #fff8e1; color: #78570b; font-size: .75rem; font-weight: 800; line-height: 1.45; }
    .weather-official-alert__scope.is-direct { background: #ecfdf5; color: #166534; }
    .weather-official-alert__scope i { flex: 0 0 auto; margin-top: 1px; }
    .weather-official-alert__meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
    .weather-official-alert__meta div { min-width: 0; padding: 8px 9px; border-radius: 9px; background: #f8fafc; }
    .weather-official-alert__meta dt { margin: 0 0 2px; color: #64748b; font-size: .65rem; font-weight: 800; }
    .weather-official-alert__meta dd { overflow-wrap: anywhere; margin: 0; color: #27364a; font-size: .73rem; font-weight: 850; line-height: 1.35; }
    .weather-official-alert__message, .weather-official-alert__advice { margin: 0; color: #475569; font-size: .76rem; line-height: 1.52; }
    .weather-official-alert__advice { padding: 9px; border-radius: 9px; background: #f0f9ff; color: #174f8f; }
    .weather-official-alert__source { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #bfdbfe; border-radius: 10px; color: #174f8f; font-size: .76rem; font-weight: 900; text-decoration: none; }
    .weather-official-alert__source:hover { background: #eff6ff; }
    .weather-risk-filter-nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(86px,1fr)); gap: 6px; margin: 8px 0; }
    .weather-risk-filter-nav a { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(30,82,136,.14); border-radius: 11px; background: #fff; color: #40546d; font-size: .72rem; font-weight: 850; line-height: 1.1; text-align: center; text-decoration: none; }
    .weather-risk-filter-nav a b { color: #0f172a; font-size: .75rem; }
    .weather-risk-filter-nav a[aria-current="page"] { border-color: #2563eb; color: #174f8f; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,.09); }
    .weather-risk-filter-nav a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; }
    .weather-risk-context { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: -1px 1px 7px; color: #64748b; font-size: .69rem; font-weight: 750; line-height: 1.25; }
    .weather-risk-context.is-refreshing { color: #174f8f; }
    .weather-risk-context i { flex: 0 0 auto; }
    .weather-risk-panel { scroll-margin-top: 84px; }
    .weather-risk-panel:target { border-color: rgba(37,99,235,.45) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.10), 0 7px 18px rgba(15,23,42,.05) !important; }
    .weather-risk-section-title h2 { margin: 0; font: inherit; font-weight: 900; }
    .weather-risk-empty { padding: 16px 12px; color: #64748b; font-size: .76rem; line-height: 1.45; text-align: center; }
    .weather-risk-empty a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 5px; color: #1e5288; font-weight: 900; }
    .weather-progressive { grid-column: 1 / -1; }
    .weather-progressive-sentinel { width: 100%; height: 2px; }
    .weather-progressive-status { margin: 9px 0 2px; color: #64748b; font-size: .74rem; line-height: 1.4; text-align: center; }
    .weather-progressive[aria-busy="true"] .weather-progressive-status:before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; vertical-align: -2px; animation: weatherSpin .75s linear infinite; }
    .weather-pagination-fallback { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
    .weather-pagination-fallback a, .weather-pagination-fallback span { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(30,82,136,.16); border-radius: 11px; padding: 7px 12px; background: #fff; color: #1e5288; font-size: .76rem; font-weight: 900; text-decoration: none; }
    .weather-pagination-fallback span { color: #64748b; }
    .weather-progressive.is-enhanced .weather-pagination-fallback { display: none; }
    @keyframes weatherSpin { to { transform: rotate(360deg); } }
    .weather-location-alert-summary { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; color: #735c18; font-size: .68rem; font-weight: 720; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    @media (max-width: 640px) {
        /* One compact scan row; full bulletin remains below. */
        .weather-official-summary {
            display: grid;
            grid-template-columns: 22px minmax(0,1fr) auto;
            align-items: center;
            gap: 8px;
            min-height: 52px;
            margin: 7px 0;
            padding: 5px 8px;
        }
        .weather-official-summary > i { font-size: 1rem; text-align: center; }
        .weather-official-summary span {
            display: -webkit-box;
            min-width: 0;
            overflow: hidden;
            font-size: .8rem;
            line-height: 1.28;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .weather-official-summary a {
            width: auto;
            min-width: 64px;
            min-height: 44px;
            justify-content: center;
            margin-left: 0;
            padding: 0 9px;
            font-size: .76rem;
        }
        .weather-official-alerts { margin: 10px 0 2px; padding: 11px; }
        .weather-official-alerts__head { align-items: flex-start; }
        .weather-official-alerts__head h2 { font-size: .91rem; }
        .weather-official-alerts__count { font-size: .63rem; }
        .weather-official-alert__meta { grid-template-columns: 1fr; gap: 6px; }
        /* All risk levels must be visible without a hidden horizontal rail.
           Three compact columns keep the emergency action discoverable on a
           390px phone and still preserve a 44px touch target. */
        .weather-risk-filter-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: visible;
            gap: 5px;
            margin-right: 0;
            padding: 1px 0 5px;
        }
        .weather-risk-filter-nav a {
            width: 100%;
            min-width: 0;
            min-height: 44px;
            padding-inline: 4px;
        }
        /* Keep the selected rail visible above a directly opened risk group;
           the group remains the native hash target and no vertical JS scroll
           is introduced. */
        .weather-risk-panel { scroll-margin-top: 104px; }
    }