/* ==========================================================================
   BASE — design tokens, reset, khung trang dùng chung

   Quy ước đặt class:
     1. Class thành phần — tên rõ nghĩa theo BEM:
          .weather-hourly            block
          .weather-hourly__item      element
          .weather-hourly__item--now modifier
        Chỉ chứa phần "nhận diện" của thành phần: màu, viền, bo góc, cỡ chữ,
        kích thước riêng, grid-template riêng.
     2. Class tiện ích (utilities.css) — bố cục dùng chung:
          d-flex, flex-wrap, align-items-center, justify-content-between,
          gap-*, mt-*, mb-*, row, col-12 col-md-6 ...
   ========================================================================== */

:root {
  /* Màu */
  --color-bg: #F5F8FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8FAFD;
  --color-tint: #F0F6FD;
  --color-hover: #EAF1F9;
  --color-hover-strong: #EAF3FD;
  --color-dark: #10243A;
  --color-text-muted: #4A5B70;
  --color-subtext: #5B6B7F;
  --color-primary: #2878D0;
  --color-primary-hover: #1B5CB0;
  --color-accent: #55B8F5;
  --color-border: #E3EAF2;
  --color-border-soft: #EDF2F7;
  --color-border-hover: #B9D3EE;

  /* Màu cấp độ UV / AQI */
  --color-level-1: #10B981;
  --color-level-2: #F59E0B;
  --color-level-3: #F97316;
  --color-level-4: #EF4444;
  --color-level-5: #7C3AED;
  --color-level-hazard: #7F1D1D;

  /* Hình khối */
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 36, 58, 0.04);
  --shadow-hover: 0 10px 24px rgba(16, 36, 58, 0.08);

  /* Layout */
  --container-gutter: clamp(16px, 4vw, 32px);
  --header-offset: 80px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-dark);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-dark);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Khung trang
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* Section đích của anchor (#hourly, #daily...) không bị header sticky che */
.page-section {
  scroll-margin-top: var(--header-offset);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

/* Tiêu đề khu vực (h2) */
.section-title {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Trạng thái không tìm thấy / rỗng */
.notice {
  padding: 60px 0;
}

.notice--inline {
  padding: 0;
  color: var(--color-subtext);
}