/* ==========================================================================
   EXTRAS — trang khí hậu, xếp hạng, so sánh, châu lục, công cụ, FAQ
   (nạp cùng city.css trên các trang này — xem functions.php)
   ========================================================================== */

/* Thanh chọn tháng / chọn bảng xếp hạng */
.month-nav__item {
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.month-nav__item:hover { border-color: var(--color-border-hover); background: var(--color-hover); }
.month-nav__item--active,
.month-nav__item--active:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }

/* Biểu đồ khí hậu: cột nhiệt độ (thấp → cao) + cột mưa */
.climate-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  padding: 18px 14px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.climate-chart__col { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-dark); }
.climate-chart__col:hover .climate-chart__range { filter: brightness(1.08); }
.climate-chart__temp { position: relative; width: 100%; height: 170px; }
.climate-chart__range {
  position: absolute;
  left: 50%;
  width: min(26px, 70%);
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(180deg, #F97316, #FBBF24 55%, #55B8F5);
}
.climate-chart__range b,
.climate-chart__range i { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; white-space: nowrap; }
.climate-chart__range b { top: -16px; font-weight: 700; }
.climate-chart__range i { bottom: -16px; color: var(--color-text-muted); }
.climate-chart__rain { display: flex; align-items: flex-end; width: 100%; height: 60px; margin-top: 16px; justify-content: center; }
.climate-chart__rain span { display: block; width: min(26px, 70%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: #2878D0; opacity: .75; }
.climate-chart__label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

/* Bảng xếp hạng */
.rank-table td.rank-table__pos { width: 48px; font-weight: 700; color: var(--color-primary); }
.rank-table td.rank-table__value { font-weight: 700; color: var(--color-dark); }
.rank-table tr:nth-child(-n+3) td.rank-table__pos { color: #F97316; }

/* So sánh 2 nơi */
.compare-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.compare-head__card { padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.compare-head__vs { align-self: center; font-weight: 800; color: var(--color-text-muted); }
.compare-head__temp { font-size: 40px; font-weight: 700; color: var(--color-dark); line-height: 1.1; }
.compare-head__name { font-size: 18px; font-weight: 700; }

/* Công cụ */
.tool-box { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.tool-box label { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; }
.tool-box input,
.tool-box select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: 16px; background: var(--color-surface-alt); }
.tool-box__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.tool-box__result { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-tint); font-size: 18px; font-weight: 700; color: var(--color-dark); }

/* Câu hỏi thường gặp */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list details { padding: 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.faq-list summary { cursor: pointer; font-weight: 600; color: var(--color-dark); }
.faq-list details p { margin: 10px 0 0; color: var(--color-text-muted); }

/* Mặt trời mọc, lặn (/mat-troi-moc/, /mat-troi-lan/) */
.sun-box .sun-times { padding: 0; border: 0; }
.sun-box__place { font-size: 22px; font-weight: 700; color: var(--color-dark); }
.sun-box__note { font-size: 14px; color: var(--color-subtext); }
.sun-box__controls input { width: auto; min-width: 170px; }
.sun-box__btn { padding: 10px 16px; border: 1px solid var(--color-primary); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: background 0.2s; }
.sun-box__btn:hover { background: var(--color-tint); }
.sun-box__btn:disabled { opacity: 0.7; cursor: progress; }
.sun-box__more { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--color-border-soft); }
.sun-box__more dt { font-size: 13px; color: var(--color-subtext); }
.sun-box__more dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--color-dark); }
.sun-box__msg:empty { display: none; }
.sun-box__msg { margin: 14px 0 0; font-size: 14px; color: var(--color-text-muted); }
.sun-box__privacy { margin: 12px 0 0; font-size: 13px; color: var(--color-subtext); }
.sun-continent { margin: 22px 0 10px; font-size: 18px; font-weight: 700; color: var(--color-dark); }
.sun-sub { margin: 18px 0 8px; font-size: 17px; font-weight: 700; color: var(--color-dark); }
.sun-sub:first-child { margin-top: 0; }
.weather-table__table--compact { min-width: 0; }

@media (max-width: 640px) {
  .climate-chart { gap: 3px; padding: 18px 6px 8px; }
  .climate-chart__range b, .climate-chart__range i { font-size: 9px; }
  .compare-head { grid-template-columns: 1fr; }
  .compare-head__vs { justify-self: center; }
  .sun-box__controls, .sun-box__controls > div, .sun-box__controls input, .sun-box__btn { width: 100%; }
  .weather-table__table--compact th, .weather-table__table--compact td { padding: 8px 10px; white-space: normal; }
}