/**
 * WP ODEX Weather — Design System "Bento" (Site 2).
 *
 * Phong cách: Modern SaaS / Bento Grid (cảm hứng Apple Weather) — nền trung
 * tính, thẻ kính mờ (glassmorphism nhẹ) viền siêu mảnh, nhấn Gradient
 * Blue → Cyan, typography Plus Jakarta Sans tracking âm.
 *
 * Cấu trúc file:
 *   0. Design Tokens (:root) + Dark mode (opt-in)
 *   1. Base / Reset có phạm vi (.rw-header, .rw-home, .rw-footer)
 *   2. Header dùng chung toàn site  [rapid_weather_site_header]
 *   3. Trang chủ Bento               [rapid_weather_homepage]
 *      3.1 Hero + Search Pill
 *      3.2 Bento Grid (Spotlight Hà Nội / TP.HCM / Bản đồ)
 *      3.3 Magazine Grid (2 khối tin tức)
 *      3.4 Thẻ tỉnh thành nổi bật (thanh biên độ Min/Max)
 *   4. Footer dùng chung toàn site   [rapid_weather_site_footer]
 *   5. Trang chi tiết tỉnh/thành     [rapid_weather_city_detail] (.rwcd-)
 *   6. Global layout override        (.wrw-global-)
 *   7. Reduced motion
 *
 * Mobile-first: style mặc định cho màn hình nhỏ, mở rộng bằng
 * @media (min-width: ...). Không phụ thuộc jQuery/Bootstrap.
 *
 * FONT: Plus Jakarta Sans (SIL OFL 1.1, xem assets/fonts/OFL.txt) tự host
 * dạng WOFF2 biến thiên (1 tệp/bộ ký tự cho cả dải weight 400-800),
 * font-display: swap — không còn request tới Google Fonts.
 *
 * DARK MODE: thêm class "rw-theme-dark" (hoặc data-rw-theme="dark") vào
 * <html>/<body> để chuyển toàn bộ token sang nền tối #0f172a.
 */

/* =========================================================================
 * FONT TỰ HOST (WOFF2) — unicode-range giữ đúng như Google Fonts để trình
 * duyệt chỉ tải bộ ký tự cần dùng (vietnamese ~8KB, latin ~27KB).
 * ========================================================================= */

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
 * 0. DESIGN TOKENS
 * ========================================================================= */

:root {
	/* ---- Typography ---- */
	--font-sans: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 15px;
	--fs-md: 17px;
	--fs-lg: 20px;
	--fs-xl: 24px;
	--fs-2xl: clamp(26px, 3vw, 32px);
	--fs-hero: clamp(36px, 6vw, 60px);
	--fs-display: clamp(56px, 9vw, 72px);
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--tracking-tight: -0.02em;
	--tracking-tighter: -0.04em;
	--leading-tight: 1.15;
	--leading-normal: 1.55;

	/* ---- Surfaces ---- */
	--bg-primary: #f8fafc;
	--bg-secondary: #f1f5f9;
	--card-bg: rgba(255, 255, 255, 0.72);
	--card-bg-solid: #ffffff;
	--card-bg-hover: rgba(255, 255, 255, 0.92);
	--card-border: rgba(226, 232, 240, 0.8);
	--card-border-strong: rgba(203, 213, 225, 0.9);
	--card-blur: 12px;
	--inset-bg: rgba(241, 245, 249, 0.75);

	/* ---- Text ---- */
	--text-primary: #0f172a;
	--text-secondary: #475569;
	--text-muted: #64748b;
	--text-on-accent: #ffffff;

	/* ---- Accent: Gradient Blue → Cyan ---- */
	--accent-start: #3b82f6;
	--accent-end: #06b6d4;
	--accent-blue: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);
	--accent-solid: #2563eb;
	--accent-soft: rgba(59, 130, 246, 0.1);
	--accent-ring: rgba(59, 130, 246, 0.35);
	/* Gradient đậm hơn 1 bậc cho CHỮ (đảm bảo tương phản ≥ 3:1 cho chữ lớn). */
	--accent-text: linear-gradient(120deg, #1d4ed8 0%, #0891b2 100%);

	/* ---- Pastel tags ---- */
	--tone-sky-bg: #e0f2fe;
	--tone-sky-fg: #0369a1;
	--tone-violet-bg: #ede9fe;
	--tone-violet-fg: #6d28d9;
	--tone-emerald-bg: #d1fae5;
	--tone-emerald-fg: #047857;
	--tone-amber-bg: #fef3c7;
	--tone-amber-fg: #b45309;
	--tone-rose-bg: #ffe4e6;
	--tone-rose-fg: #be123c;

	/* ---- Temperature scale (thanh biên độ) ---- */
	--temp-cool: #38bdf8;
	--temp-mild: #34d399;
	--temp-warm: #fbbf24;
	--temp-hot: #f97316;

	/* ---- Feedback ---- */
	--danger-bg: #fef2f2;
	--danger-border: #fecaca;
	--danger-text: #b91c1c;

	/* ---- Shape ---- */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;

	/* ---- Elevation ---- */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 12px 32px -16px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
	--shadow-lg: 0 28px 56px -28px rgba(15, 23, 42, 0.3), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
	--shadow-accent: 0 14px 32px -14px rgba(37, 99, 235, 0.55);
	--shadow-icon: drop-shadow(0 14px 22px rgba(37, 99, 235, 0.28));

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--duration: 0.3s;
	--transition: all var(--duration) var(--ease);

	/* ---- Layout ---- */
	--container: 1240px;
	--gutter: 16px;
	--section-gap: 48px;
	--bento-gap: 16px;
}

/* Dark mode (opt-in) — nền #0f172a. */
.rw-theme-dark,
[data-rw-theme="dark"] {
	--bg-primary: #0f172a;
	--bg-secondary: #1e293b;
	--card-bg: rgba(30, 41, 59, 0.6);
	--card-bg-solid: #1e293b;
	--card-bg-hover: rgba(30, 41, 59, 0.85);
	--card-border: rgba(51, 65, 85, 0.8);
	--card-border-strong: rgba(71, 85, 105, 0.9);
	--inset-bg: rgba(15, 23, 42, 0.55);
	--text-primary: #f1f5f9;
	--text-secondary: #cbd5e1;
	--text-muted: #94a3b8;
	--accent-solid: #60a5fa;
	--accent-soft: rgba(96, 165, 250, 0.14);
	--accent-text: linear-gradient(120deg, #60a5fa 0%, #22d3ee 100%);
	--tone-sky-bg: rgba(14, 165, 233, 0.16);
	--tone-sky-fg: #7dd3fc;
	--tone-violet-bg: rgba(139, 92, 246, 0.18);
	--tone-violet-fg: #c4b5fd;
	--tone-emerald-bg: rgba(16, 185, 129, 0.16);
	--tone-emerald-fg: #6ee7b7;
	--tone-amber-bg: rgba(245, 158, 11, 0.16);
	--tone-amber-fg: #fcd34d;
	--tone-rose-bg: rgba(244, 63, 94, 0.16);
	--tone-rose-fg: #fda4af;
	--danger-bg: rgba(127, 29, 29, 0.35);
	--danger-border: rgba(248, 113, 113, 0.35);
	--danger-text: #fca5a5;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
	--shadow-lg: 0 28px 56px -28px rgba(0, 0, 0, 0.7);
	--shadow-icon: drop-shadow(0 14px 22px rgba(6, 182, 212, 0.25));
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
		--section-gap: 64px;
		--bento-gap: 20px;
	}
}

/* =========================================================================
 * 1. BASE (phạm vi hẹp — không ảnh hưởng phần còn lại của theme)
 * ========================================================================= */

/* Nền trang đồng bộ token khi Trang chủ Bento có mặt. */
body:has(.rw-home) {
	background: var(--bg-primary);
}

.rw-header,
.rw-footer,
.rw-home {
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.rw-header *,
.rw-header *::before,
.rw-header *::after,
.rw-footer *,
.rw-footer *::before,
.rw-footer *::after,
.rw-home *,
.rw-home *::before,
.rw-home *::after {
	box-sizing: border-box;
}

.rw-header img,
.rw-footer img,
.rw-home img {
	max-width: 100%;
	display: block;
}

.rw-header a,
.rw-footer a,
.rw-home a {
	color: inherit;
	text-decoration: none;
}

/* Độ ưu tiên (0,1,0) — đủ thắng style thẻ h1/p của theme, nhưng bằng
   class component khai báo PHÍA SAU nên không đè margin của component. */
.rw-home :where(h1, h2, h3, p) {
	margin: 0;
}

.rw-home :focus-visible,
.rw-header :focus-visible,
.rw-footer :focus-visible {
	outline: 2px solid var(--accent-start);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

/* Screen-Reader-Only: ẩn khỏi mắt nhưng vẫn nằm trong cây accessibility
   (trình đọc màn hình, Lighthouse, tác nhân AI duyệt web đọc được). */
.wrw-sr-only,
.rw-header .screen-reader-text,
.rw-footer .screen-reader-text,
.rw-home .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.rwb-icon {
	display: block;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
}

@keyframes rw-icon-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.18);
	}
}

@keyframes rwb-ping {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	80%,
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

@keyframes rwb-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

/* =========================================================================
 * 2. HEADER (dùng chung toàn site)
 * ========================================================================= */

.rw-header {
	position: relative;
	z-index: 50;
	background: var(--card-bg);
	-webkit-backdrop-filter: saturate(180%) blur(var(--card-blur));
	backdrop-filter: saturate(180%) blur(var(--card-blur));
	border-bottom: 1px solid var(--card-border);
}

.rw-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 10px var(--gutter);
	/* Chiều cao cấu hình tại Rapid Weather - Giao diện -> Tab Header. */
	min-height: var(--rw-header-height, 72px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rw-header__logo {
	display: flex;
	align-items: center;
	font-size: var(--fs-lg);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tight);
	white-space: nowrap;
}

.rw-header__logo-image {
	display: block;
	max-height: 40px;
	width: auto;
	height: auto;
}

.rw-header__search {
	position: relative;
	order: 3;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 4px 4px 4px 16px;
	background: var(--inset-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	transition: var(--transition);
}

.rw-header__search:focus-within {
	background: var(--card-bg-solid);
	border-color: var(--accent-ring);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.rw-header__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--text-primary);
	outline: none;
}

.rw-header__search-input::placeholder {
	color: var(--text-muted);
}

.rw-header__search-btn,
.rw-header__locate-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: var(--transition);
}

.rw-header__search-btn {
	background: var(--accent-blue);
	color: var(--text-on-accent);
	box-shadow: var(--shadow-accent);
}

.rw-header__search-btn:hover {
	transform: scale(1.06);
}

.rw-header__locate-btn {
	background: transparent;
	color: var(--text-secondary);
}

.rw-header__locate-btn:hover {
	background: var(--accent-soft);
	color: var(--accent-solid);
}

.rw-header__locate-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Gợi ý tìm kiếm (assets/js/odex-weather-location-search.js) — dùng chung
   cho ô tìm kiếm Header lẫn ô tìm kiếm Hero Trang chủ. */
.rw-header__suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 320px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	text-align: left;
}

.rw-header__suggestion a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	transition: background var(--duration) var(--ease);
}

.rw-header__suggestion a:hover,
.rw-header__suggestion[aria-selected="true"] a {
	background: var(--accent-soft);
	color: var(--accent-solid);
}

.rw-header__suggestion-context {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

.rw-header__suggestion--empty {
	padding: 10px 12px;
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.rw-header__locations {
	order: 2;
	position: relative;
}

.rw-header__locations-btn {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	background: var(--card-bg-solid);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--transition);
}

.rw-header__locations-btn:hover {
	border-color: var(--accent-ring);
	color: var(--accent-solid);
}

.rw-header__locations-btn::-webkit-details-marker {
	display: none;
}

.rw-header__locations-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	list-style: none;
	margin: 0;
	padding: 6px;
	width: 248px;
	max-height: 340px;
	overflow-y: auto;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.rw-header__locations-menu li a {
	display: block;
	padding: 8px 12px;
	font-size: var(--fs-sm);
	border-radius: var(--radius-xs);
	color: var(--text-primary);
}

.rw-header__locations-menu li a:hover {
	background: var(--accent-soft);
	color: var(--accent-solid);
}

@media (min-width: 768px) {
	.rw-header__inner {
		flex-wrap: nowrap;
		padding-top: 0;
		padding-bottom: 0;
	}

	.rw-header__search {
		order: 0;
		flex: 1 1 260px;
		max-width: 420px;
	}

	.rw-header__locations {
		order: 0;
	}
}

/* =========================================================================
 * 3. TRANG CHỦ BENTO
 * ========================================================================= */

.rw-home {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section-gap);
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

/* ---- Ô Bento cơ sở: kính mờ + viền siêu mảnh + hover nổi nhẹ ---- */

.rwb-tile {
	position: relative;
	min-width: 0;
	background: var(--card-bg);
	-webkit-backdrop-filter: blur(var(--card-blur));
	backdrop-filter: blur(var(--card-blur));
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
}

@media (hover: hover) {
	.rwb-tile:hover {
		background: var(--card-bg-hover);
		border-color: var(--card-border-strong);
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}
}

/* ---- Tiêu đề khu vực (H2 Magazine/Cities) ---- */

.rwb-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* PageSpeed: 2 khối dưới màn hình đầu (Tin tức, Tỉnh thành) bỏ qua dựng
   layout/paint cho tới khi gần cuộn tới (content-visibility: auto).
   contain-intrinsic-size "auto ..." giữ chỗ ước lượng ban đầu, sau lần dựng
   đầu tiên trình duyệt nhớ kích thước thật → thanh cuộn không nhảy.
   content-visibility kéo theo paint containment (cắt phần tràn): padding +
   margin âm bằng nhau chừa chỗ cho bóng đổ/hover và dải cuộn ngang tràn
   mép trên Mobile, vị trí nội dung không đổi. */
.rwb-news,
.rwb-cities {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px;
	padding: 16px var(--gutter);
	margin: -16px calc(var(--gutter) * -1);
}

.rwb-cities {
	contain-intrinsic-size: auto 560px;
}

.rwb-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.rwb-section__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	color: var(--text-primary);
}

.rwb-section__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--accent-solid);
	background: var(--accent-soft);
	transition: var(--transition);
}

.rwb-section__more:hover {
	gap: 10px;
	background: var(--accent-solid);
	color: var(--text-on-accent);
}

/* ---- Thanh cuộn ngang dùng chung cho Mobile (Magazine + Cities) ----
   Mobile: flex + scroll-snap, mép tràn ra 2 bên gutter để gợi ý "vuốt
   tiếp". Desktop: mỗi khối tự định nghĩa lại thành CSS Grid. */

.rwb-scroller {
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--gutter) * -1);
	padding: 4px var(--gutter) 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rwb-scroller::-webkit-scrollbar {
	display: none;
}

.rwb-scroller > * {
	scroll-snap-align: start;
}

/* ---- Trạng thái lỗi/trống (giữ nguyên kích thước ô — không CLS) ---- */

.rwb-state {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
}

.rwb-state .rwb-icon {
	width: 32px;
	height: 32px;
}

.rwb-state--error {
	background: var(--danger-bg);
	border: 1px dashed var(--danger-border);
	color: var(--danger-text);
}

/* -------------------------------------------------------------------------
 * 3.1 HERO + SEARCH PILL
 * ------------------------------------------------------------------------- */

/* Stacking: Hero PHẢI có z-index dương. Các ô .rwb-tile phía dưới dùng
   backdrop-filter/transform → mỗi ô tự tạo stacking context ở tầng 0 và
   nằm SAU Hero trong DOM, nên nếu Hero chỉ "isolation: isolate" (cũng tầng 0)
   thì Bento sẽ được vẽ ĐÈ lên dropdown gợi ý tìm kiếm — z-index của dropdown
   chỉ có nghĩa BÊN TRONG Hero. z-index 30: cao hơn Bento (1), thấp hơn
   Header (50) để menu "Thời tiết các Địa Điểm" của Header vẫn nổi trên Hero. */
.rwb-hero {
	position: relative;
	z-index: 30;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 0 8px;
	text-align: center;
}

/* Lưới mesh-gradient mềm phía sau Hero. */
.rwb-hero::before {
	content: "";
	position: absolute;
	inset: -40px calc(var(--gutter) * -1) -80px;
	z-index: -1;
	background:
		radial-gradient(40% 55% at 22% 18%, rgba(59, 130, 246, 0.16) 0%, transparent 70%),
		radial-gradient(38% 50% at 80% 10%, rgba(6, 182, 212, 0.14) 0%, transparent 70%),
		radial-gradient(30% 40% at 55% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.rwb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	background: var(--card-bg);
	-webkit-backdrop-filter: blur(var(--card-blur));
	backdrop-filter: blur(var(--card-blur));
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--text-secondary);
}

.rwb-hero__pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
}

.rwb-hero__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: rwb-ping 1.8s var(--ease) infinite;
}

.rwb-hero__title {
	font-size: var(--fs-hero);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tighter);
	line-height: 1.05;
	background: var(--accent-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rwb-hero__lead {
	max-width: 560px;
	font-size: var(--fs-md);
	color: var(--text-secondary);
}

/* Thanh tìm kiếm Pill — chiều cao CỐ ĐỊNH 64px (không CLS). */
.rwb-search {
	position: relative;
	z-index: 2; /* Trên lớp mesh-gradient (::before) và hàng chip của Hero. */
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: 680px;
	height: 64px;
	margin-top: 8px;
	padding: 6px 6px 6px 22px;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-lg);
	transition: var(--transition);
}

.rwb-search:focus-within {
	border-color: var(--accent-ring);
	box-shadow: var(--shadow-lg), 0 0 0 5px var(--accent-soft);
}

.rwb-search__icon {
	color: var(--text-muted);
	font-size: 20px;
}

.rwb-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 6px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	outline: none;
}

.rwb-search__input::placeholder {
	color: var(--text-muted);
	font-weight: var(--fw-regular);
}

.rwb-search__locate,
.rwb-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border: 0;
	border-radius: var(--radius-pill);
	font: inherit;
	cursor: pointer;
	transition: var(--transition);
}

.rwb-search__locate {
	width: 52px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	font-size: 20px;
}

.rwb-search__locate:hover {
	background: var(--accent-soft);
	color: var(--accent-solid);
}

.rwb-search__locate:disabled {
	opacity: 0.6;
	cursor: wait;
}

.rwb-search__submit {
	gap: 8px;
	width: 52px;
	padding: 0;
	background: var(--accent-blue);
	color: var(--text-on-accent);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	box-shadow: var(--shadow-accent);
}

.rwb-search__submit:hover {
	filter: brightness(1.06);
	transform: translateX(2px);
}

/* Mobile: ẩn chữ bằng kỹ thuật Screen-Reader-Only (KHÔNG display:none)
   để nút vẫn có tên đọc được cho trình đọc màn hình/tác nhân AI. */
.rwb-search__submit-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.rwb-search__submit-icon {
	font-size: 20px;
}

/* Dropdown gợi ý của ô tìm kiếm Hero (kế thừa .rw-header__suggestions —
   JS gợi ý tìm đúng class đó). Màu nền/viền theo token nên tự đổi ở Dark mode. */
.rwb-search__suggestions {
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 100;
	max-height: 360px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--radius-lg);
	border-color: var(--card-border-strong);
	box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.15), 0 10px 15px -5px rgba(15, 23, 42, 0.08);
	padding: 8px;
}

.rw-theme-dark .rwb-search__suggestions,
[data-rw-theme="dark"] .rwb-search__suggestions {
	box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
	.rwb-search__submit {
		width: auto;
		padding: 0 22px 0 24px;
	}

	.rwb-search__submit-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
}

.rwb-hero__quick {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 680px;
}

.rwb-hero__chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	background: var(--card-bg);
	-webkit-backdrop-filter: blur(var(--card-blur));
	backdrop-filter: blur(var(--card-blur));
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-secondary);
	transition: var(--transition);
}

.rwb-hero__chip:hover {
	border-color: var(--accent-ring);
	background: var(--accent-soft);
	color: var(--accent-solid);
	transform: translateY(-1px);
}

@media (min-width: 768px) {
	.rwb-hero {
		padding-top: 72px;
		gap: 18px;
	}
}

/* -------------------------------------------------------------------------
 * 3.2 BENTO GRID — Spotlight Hà Nội / TP.HCM / Bản đồ
 *
 * Mobile  (<768)  : 1 cột xếp dọc.
 * Tablet  (≥768)  : 2 cột — Hà Nội trải 2 cột, TP.HCM + Bản đồ chia đôi.
 * Desktop (≥1024) : 12 cột bất đối xứng — Hà Nội 7 cột × 2 hàng, TP.HCM và
 *                   Bản đồ xếp chồng ở 5 cột bên phải.
 * Mọi ô có min-height cố định ⇒ bố cục giữ nguyên dù API chậm/lỗi (CLS 0).
 * ------------------------------------------------------------------------- */

/* z-index 1 (< Hero 30): gom mọi stacking context của các ô bên trong
   (backdrop-filter, transform khi hover) vào 1 tầng thấp hơn Hero. */
.rwb-bento {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bento-gap);
}

@media (min-width: 768px) {
	.rwb-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rwb-spot--primary {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.rwb-bento {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: minmax(300px, auto) minmax(300px, auto);
	}

	.rwb-spot--primary {
		grid-column: 1 / span 7;
		grid-row: 1 / span 2;
	}

	.rwb-spot--secondary {
		grid-column: 8 / span 5;
		grid-row: 1;
	}

	.rwb-map {
		grid-column: 8 / span 5;
		grid-row: 2;
	}
}

/* ---- Ô Spotlight (chung) ---- */

.rwb-spot {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px;
	overflow: hidden;
}

.rwb-spot__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rwb-spot__title {
	min-width: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.3;
	color: var(--text-secondary);
}

.rwb-spot__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--inset-bg);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--text-secondary);
	transition: var(--transition);
}

.rwb-spot__more .rwb-icon {
	width: 14px;
	height: 14px;
}

.rwb-spot__more:hover {
	background: var(--accent-solid);
	color: var(--text-on-accent);
}

.rwb-spot__now {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rwb-spot__icon {
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	filter: var(--shadow-icon);
	animation: rwb-float 6s var(--ease) infinite;
}

.rwb-spot__reading {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rwb-spot__temp {
	display: flex;
	align-items: flex-start;
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tighter);
	line-height: 0.95;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.rwb-spot__unit {
	margin: 0.12em 0 0 2px;
	font-size: 0.36em;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	color: var(--text-muted);
}

.rwb-spot__condition {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.rwb-spot__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.rwb-spot__updated {
	margin-top: auto;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* ---- Ô Lớn (Hà Nội) ---- */

.rwb-spot--primary {
	min-height: 520px;
	padding: 26px;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(6, 182, 212, 0.12) 0%, transparent 55%),
		radial-gradient(90% 70% at 0% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
		var(--card-bg);
}

.rwb-spot--primary .rwb-spot__now {
	/* Vùng nhiệt độ giãn lấp đầy chiều cao còn trống của ô Lớn; icon nằm
	   bên phải nhiệt độ ở mọi kích thước màn hình. */
	flex: 1 1 auto;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
}

.rwb-spot--primary .rwb-spot__icon {
	width: 96px;
	height: 96px;
}

.rwb-spot--primary .rwb-spot__temp {
	font-size: var(--fs-display);
}

.rwb-spot--primary .rwb-spot__condition {
	font-size: var(--fs-lg);
}

@media (min-width: 576px) {
	.rwb-spot--primary .rwb-spot__icon {
		width: 128px;
		height: 128px;
	}
}

@media (min-width: 1024px) {
	.rwb-spot--primary {
		min-height: 620px;
		padding: 32px;
	}

	.rwb-spot--primary .rwb-spot__temp {
		font-size: 72px;
	}
}

/* ---- Ô Phụ (TP.HCM) ---- */

.rwb-spot--secondary {
	min-height: 300px;
}

.rwb-spot--secondary .rwb-spot__icon {
	width: 72px;
	height: 72px;
}

.rwb-spot--secondary .rwb-spot__temp {
	font-size: 48px;
}

/* ---- Chỉ số: Lưới ô bo tròn (Ô Lớn) ---- */

.rwb-metrics {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwb-metrics--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.rwb-metrics--grid .rwb-metric {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"icon label"
		"value value";
	align-items: center;
	gap: 8px 8px;
	min-height: 88px;
	padding: 14px;
	background: var(--inset-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	transition: var(--transition);
}

.rwb-metrics--grid .rwb-metric:hover {
	background: var(--card-bg-solid);
	border-color: var(--accent-ring);
}

.rwb-metrics--grid .rwb-metric__icon {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-xs);
	background: var(--accent-soft);
	color: var(--accent-solid);
	font-size: 16px;
}

.rwb-metrics--grid .rwb-metric__label {
	grid-area: label;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--text-muted);
}

.rwb-metrics--grid .rwb-metric__value {
	grid-area: value;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

/* Số chỉ số lẻ (7): ô cuối (Bình minh/Lặn) trải 2 cột — cân hàng cuối ở cả
   lưới 2 cột (Mobile) lẫn 4 cột (≥576px). */
.rwb-metrics--grid .rwb-metric:last-child:nth-child(odd) {
	grid-column: span 2;
}

@media (min-width: 576px) {
	.rwb-metrics--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

/* ---- Chỉ số: Viên nang (Ô Phụ) ---- */

.rwb-metrics--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rwb-metrics--pills .rwb-metric {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px 0 10px;
	background: var(--inset-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	white-space: nowrap;
	transition: var(--transition);
}

.rwb-metrics--pills .rwb-metric:hover {
	border-color: var(--accent-ring);
	background: var(--card-bg-solid);
}

.rwb-metrics--pills .rwb-metric__icon {
	display: inline-flex;
	color: var(--accent-solid);
	font-size: 14px;
}

.rwb-metrics--pills .rwb-metric__label {
	color: var(--text-muted);
	font-weight: var(--fw-semibold);
}

.rwb-metrics--pills .rwb-metric__value {
	font-weight: var(--fw-bold);
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

/* ---- Ô Bản đồ (Radar / Vệ tinh) ---- */

.rwb-map {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 340px;
	padding: 16px;
}

.rwb-map__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rwb-map__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 4px 0 6px;
}

.rwb-map__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--text-secondary);
}

.rwb-map__title-icon {
	color: var(--accent-solid);
	font-size: 16px;
}

.rwb-map__tabs {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--radius-pill);
	background: var(--inset-bg);
	border: 1px solid var(--card-border);
}

.rwb-map__tab {
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--text-muted);
	cursor: pointer;
	transition: var(--transition);
	white-space: nowrap;
}

.rwb-map__tab:hover {
	color: var(--text-primary);
}

#rwb-map-radar:checked ~ .rwb-map__header .rwb-map__tab--radar,
#rwb-map-satellite:checked ~ .rwb-map__header .rwb-map__tab--satellite {
	background: var(--card-bg-solid);
	color: var(--accent-solid);
	box-shadow: var(--shadow-sm);
}

#rwb-map-radar:focus-visible ~ .rwb-map__header .rwb-map__tab--radar,
#rwb-map-satellite:focus-visible ~ .rwb-map__header .rwb-map__tab--satellite {
	outline: 2px solid var(--accent-start);
	outline-offset: 2px;
}

/* Khung giữ chỗ cố định cho Iframe Windy (aspect-ratio + min-height). */
.rwb-map__stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 260px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.08)),
		var(--bg-secondary);
}

.rwb-map__frame {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border: 0;
}

.rwb-map__frame--satellite,
#rwb-map-satellite:checked ~ .rwb-map__stage .rwb-map__frame--radar {
	display: none;
}

#rwb-map-satellite:checked ~ .rwb-map__stage .rwb-map__frame--satellite {
	display: block;
}

@media (min-width: 1024px) {
	.rwb-map__stage {
		aspect-ratio: auto;
	}
}

/* -------------------------------------------------------------------------
 * 3.3 MAGAZINE GRID — Tin tức
 * Mobile: slider vuốt ngang (thẻ 78% bề rộng). ≥640: Grid 2 cột. ≥1024: 3 cột.
 * ------------------------------------------------------------------------- */

.rwb-news-card {
	flex: 0 0 78%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.rwb-news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--bg-secondary);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
}

.rwb-news-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.rwb-news-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(60% 80% at 30% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 70%),
		var(--accent-blue);
	color: rgba(255, 255, 255, 0.9);
	font-size: 48px;
}

.rwb-news-card:hover .rwb-news-card__image {
	transform: scale(1.03);
}

.rwb-news-card:hover .rwb-news-card__media {
	box-shadow: var(--shadow-md);
}

.rwb-news-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 0 4px;
}

.rwb-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	height: 24px;
	padding: 0 10px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rwb-chip--sky {
	background: var(--tone-sky-bg);
	color: var(--tone-sky-fg);
}

.rwb-chip--violet {
	background: var(--tone-violet-bg);
	color: var(--tone-violet-fg);
}

.rwb-chip--emerald {
	background: var(--tone-emerald-bg);
	color: var(--tone-emerald-fg);
}

.rwb-chip--amber {
	background: var(--tone-amber-bg);
	color: var(--tone-amber-fg);
}

.rwb-chip--rose {
	background: var(--tone-rose-bg);
	color: var(--tone-rose-fg);
}

.rwb-news-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.35;
	color: var(--text-primary);
}

.rwb-news-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--duration) var(--ease), color var(--duration) var(--ease);
}

.rwb-news-card__title a:hover {
	color: var(--accent-solid);
	background-size: 100% 1.5px;
}

.rwb-news-card__date {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.rwb-news__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.rwb-news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 24px;
	}
}

/* -------------------------------------------------------------------------
 * 3.4 THỜI TIẾT TỈNH THÀNH NỔI BẬT
 * Mobile: cuộn ngang (thẻ 150px). ≥640: 3 cột. ≥900: 4 cột. ≥1200: 6 cột.
 * Thẻ cao cố định 212px (không CLS, kể cả thẻ lỗi).
 * ------------------------------------------------------------------------- */

.rwb-city {
	flex: 0 0 150px;
	height: 212px;
	border-radius: var(--radius-lg);
}

.rwb-city__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	gap: 6px;
	border-radius: inherit;
}

.rwb-city__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--text-secondary);
	transition: color var(--duration) var(--ease);
}

.rwb-city:hover .rwb-city__name {
	color: var(--accent-solid);
}

.rwb-city__now {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.rwb-city__icon {
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.2));
	transition: transform var(--duration) var(--ease);
}

.rwb-city:hover .rwb-city__icon {
	transform: scale(1.1) rotate(-4deg);
}

.rwb-city__temp {
	font-size: 34px;
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tighter);
	line-height: 1;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.rwb-city__condition {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.rwb-city__error {
	margin: auto 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* Thanh biên độ Min/Max — vị trí đoạn tô qua --rw-from/--rw-to (PHP). */
.rwb-range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

.rwb-range__value {
	flex: 0 0 auto;
	min-width: 2.2ch;
	color: var(--text-muted);
}

.rwb-range__value:last-child {
	text-align: right;
	color: var(--text-primary);
}

.rwb-range__track {
	position: relative;
	flex: 1 1 auto;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--bg-secondary);
	overflow: hidden;
}

.rwb-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rw-from, 0%);
	right: calc(100% - var(--rw-to, 100%));
	border-radius: inherit;
	background: linear-gradient(90deg, var(--temp-cool), var(--temp-mild) 35%, var(--temp-warm) 70%, var(--temp-hot));
	background-size: 400% 100%;
	background-position: var(--rw-from, 0%) 0;
}

@media (min-width: 640px) {
	.rwb-cities__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 900px) {
	.rwb-cities__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rwb-cities__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 16px;
	}
}

/* -------------------------------------------------------------------------
 * 3.5 TÙY BIẾN QUA THEME OPTIONS (Rapid Weather - Giao diện)
 * ------------------------------------------------------------------------- */

/* ---- a) Ẩn thanh tìm kiếm trên Global Header (.wrw-header-no-search gắn
   trên .rw-header__inner, áp dụng MỌI TRANG) — Header chỉ còn Logo + Menu
   Địa Điểm. Không đụng tới thanh tìm kiếm lớn ở Hero Trang chủ.
   ≥576px: Grid 3 cột đối xứng [trống | Logo | Menu] — 2 cột bên bằng nhau
   (1fr) nên Logo luôn nằm CHÍNH GIỮA màn hình, Menu sát phải. Vẫn đúng khi
   Menu Địa Điểm bị tắt (cột phải để trống).
   <576px: 2 cột bên không đủ rộng cho nút Menu (~190px) — Logo hàng trên,
   Menu hàng dưới, cả 2 căn giữa (tránh nút Menu tràn/đè lên Logo). */

.rw-header__inner.wrw-header-no-search {
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.rw-header__inner.wrw-header-no-search .rw-header__logo {
	flex: 1 1 100%;
	justify-content: center;
}

@media (min-width: 576px) {
	.rw-header__inner.wrw-header-no-search {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: 16px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.rw-header__inner.wrw-header-no-search .rw-header__logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.rw-header__inner.wrw-header-no-search .rw-header__locations {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* ---- b) Lưới Tin tức: số cột do Admin chọn (2/3/4) ----
   Mobile luôn là slider vuốt ngang (.rwb-scroller). Selector 2 class để
   thắng luật số cột mặc định của .rwb-news__grid ở mục 3.3. */

@media (min-width: 640px) {
	.rwb-news__grid.wrw-news-grid-col-2,
	.rwb-news__grid.wrw-news-grid-col-3,
	.rwb-news__grid.wrw-news-grid-col-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rwb-news__grid.wrw-news-grid-col-3,
	.rwb-news__grid.wrw-news-grid-col-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.rwb-news__grid.wrw-news-grid-col-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px 20px;
	}

	/* 4 cột → thẻ hẹp hơn: thu nhỏ tiêu đề cho cân. */
	.wrw-news-grid-col-4 .rwb-news-card__title {
		font-size: var(--fs-base);
	}
}

/* ---- c) Lưới tỉnh thành: số cột do Admin chọn (3/4/5/6) ---- */

@media (min-width: 640px) {
	.rwb-cities__grid[class*="wrw-cities-grid-col-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rwb-cities__grid.wrw-cities-grid-col-4,
	.rwb-cities__grid.wrw-cities-grid-col-5,
	.rwb-cities__grid.wrw-cities-grid-col-6 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.rwb-cities__grid.wrw-cities-grid-col-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rwb-cities__grid.wrw-cities-grid-col-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---- d) Chỉ số mở rộng trên thẻ tỉnh thành (1-3 Pill) ----
   Chiều cao thẻ KHOÁ CỨNG theo số chỉ số Admin chọn (rwb-cities--metrics-N):
   1 chỉ số = 1 hàng Pill, 2-3 chỉ số = dự trữ 2 hàng (Pill tự xuống dòng khi
   thẻ hẹp) — thẻ lỗi API cũng giữ đúng chiều cao này (CLS = 0). */

.rwb-cities--metrics-1 .rwb-city {
	height: 246px;
}

.rwb-cities--metrics-2 .rwb-city,
.rwb-cities--metrics-3 .rwb-city {
	height: 276px;
}

.rwb-city__metrics {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding: 10px 0 0;
	list-style: none;
	border-top: 1px solid var(--card-border);
}

.rwb-city__metric {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 8px 0 6px;
	border-radius: var(--radius-pill);
	background: var(--inset-bg);
	border: 1px solid var(--card-border);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	transition: var(--transition);
}

.rwb-city:hover .rwb-city__metric {
	border-color: var(--accent-ring);
}

.rwb-city__metric-icon {
	display: inline-flex;
	color: var(--accent-solid);
	font-size: 12px;
}

.rwb-city__metric .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================================
 * 4. FOOTER (dùng chung toàn site)
 * Mobile-first: 1 cột → 2 cột (≥576) → 4 cột (≥992).
 * ========================================================================= */

.rw-footer {
	margin-top: 24px;
	background: var(--card-bg);
	-webkit-backdrop-filter: blur(var(--card-blur));
	backdrop-filter: blur(var(--card-blur));
	border-top: 1px solid var(--card-border);
}

.rw-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 48px var(--gutter) 32px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 576px) {
	.rw-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.rw-footer__inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

.rw-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rw-footer__logo {
	display: flex;
	align-items: center;
	font-size: var(--fs-lg);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--tracking-tight);
}

.rw-footer__logo-image {
	display: block;
	max-height: 36px;
	width: auto;
	height: auto;
}

.rw-footer__desc {
	margin: 0;
	max-width: 360px;
	font-size: var(--fs-sm);
	color: var(--text-muted);
	line-height: 1.65;
}

.rw-footer__email {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--accent-solid);
}

.rw-footer__heading {
	margin: 0 0 4px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.rw-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rw-footer__list a {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	transition: color var(--duration) var(--ease);
}

.rw-footer__list a:hover {
	color: var(--accent-solid);
}

.rw-footer__social {
	display: flex;
	gap: 10px;
}

.rw-footer__social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	color: var(--text-secondary);
	transition: var(--transition);
}

.rw-footer__social-btn:hover {
	background: var(--accent-blue);
	border-color: transparent;
	color: var(--text-on-accent);
	transform: translateY(-2px);
}

.rw-footer__bottom {
	border-top: 1px solid var(--card-border);
	padding: 18px var(--gutter);
	text-align: center;
}

.rw-footer__bottom p {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* =========================================================================
 * 5. TRANG CHI TIẾT TỈNH/THÀNH [rapid_weather_city_detail]
 * Prefix riêng ".rwcd-" để tách biệt hoàn toàn với các khối ở trên.
 * Mobile-first: mặc định 1 cột (Sidebar xuống dưới Cột chính), lên 2 cột
 * (70% / 30%) từ 768px theo đúng yêu cầu.
 * ========================================================================= */

.rwcd-page {
	color: var(--text-primary);
	font-family: var(--font-sans);
	line-height: 1.5;
}

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

.rwcd-page img {
	max-width: 100%;
	display: block;
}

.rwcd-page a {
	color: inherit;
	text-decoration: none;
}

/* ---- A. Breadcrumb Bar + Tab lọc thời gian ---- */

.rwcd-breadcrumb-bar {
	background: var(--accent-blue);
}

.rwcd-breadcrumb-bar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 16px;
}

.rwcd-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-on-accent);
}

.rwcd-breadcrumb a {
	color: var(--text-on-accent);
	opacity: 0.9;
}

.rwcd-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.rwcd-breadcrumb__sep {
	opacity: 0.75;
}

.rwcd-breadcrumb__current {
	font-weight: 600;
}

.rwcd-tabs {
	background: var(--card-bg-solid);
	border-bottom: 1px solid var(--card-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rwcd-tabs__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	gap: 8px;
	width: max-content;
	min-width: 100%;
}

.rwcd-tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--bg-secondary);
	border: 1px solid var(--card-border);
	white-space: nowrap;
}

.rwcd-tab:hover {
	color: var(--accent-solid);
}

.rwcd-tab--active {
	background: var(--accent-soft);
	border-color: var(--accent-ring);
	color: var(--accent-solid);
}

/* ---- Khung 1 cột duy nhất (không Sidebar), theo mẫu dubaothoitiet.app ---- */

.rwcd-body {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 16px 40px;
}

.rwcd-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.rwcd-section-title {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 800;
}

.rwcd-unavailable {
	margin: 0;
	padding: 16px 20px;
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	border: 1px dashed var(--card-border);
	color: var(--text-muted);
	font-size: 13px;
}

/* ---- B.1 Hero Weather ---- */

.rwcd-hero {
	padding: 24px 20px;
	background: linear-gradient(160deg, var(--accent-soft) 0%, var(--card-bg-solid) 75%);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.rwcd-hero__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.rwcd-hero__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

.rwcd-hero__coords {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--text-muted);
}

.rwcd-hero__error {
	margin-top: 16px;
	padding: 16px 20px;
	border-radius: var(--radius-md);
	background: var(--danger-bg);
	border: 1px solid var(--danger-border);
	color: var(--danger-text);
}

.rwcd-hero__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	margin-top: 16px;
}

/* To hơn 20% (148->178px) và nổi bật hơn. Tiền tố ".rwcd-hero " tăng độ ưu
   tiên CSS để không bị luật chung ".wrw-global-article__content img" (Global
   Layout) ghi đè mất border-radius tròn khi được chèn vào bài viết. */
.rwcd-hero .rwcd-hero__icon {
	width: 178px;
	height: 178px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, rgba(59, 130, 246, 0) 75%);
	filter: drop-shadow(0 8px 18px rgba(59, 130, 246, 0.42));
}

.rwcd-hero__temp {
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: var(--accent-solid);
}

.rwcd-hero__unit {
	font-size: 24px;
	font-weight: 600;
	margin-left: 2px;
}

.rwcd-hero__feels-like {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--text-muted);
}

.rwcd-hero__condition {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.rwcd-hero__center {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
	}

	.rwcd-hero__temp-block {
		text-align: left;
	}
}

/* Lưới chỉ số 3x3 trong Hero (Nhiệt độ thấp/cao nhất, Độ ẩm, Gió, Tầm nhìn,
   Điểm ngưng, UV, Áp suất, Mặt trời mọc/lặn) — theo mẫu dubaothoitiet.app. */
.rwcd-hero__metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--card-border);
}

@media (min-width: 576px) {
	.rwcd-hero__metrics-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rwcd-hero__metric-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.rwcd-hero__metric-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	font-size: 24px;
	line-height: 1;
	animation: rw-icon-pulse 2.4s ease-in-out infinite;
}

.rwcd-hero__metric-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rwcd-hero__metric-value {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.rwcd-hero__metric-label {
	font-size: 12px;
	color: var(--text-muted);
	white-space: nowrap;
}

/* ---- B.2 Dự báo 48 giờ tới (Hourly Slider) ---- */

.rwcd-hourly__wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rwcd-hourly__track {
	flex: 1 1 auto;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.rwcd-hour-card {
	flex: 0 0 120px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 14px 10px;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.rwcd-hour-card__time {
	font-size: 12px;
	font-weight: 700;
}

.rwcd-hour-card__icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 72%);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
}

.rwcd-hour-card__temp-range {
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-solid);
}

.rwcd-hour-card__humidity {
	font-size: 12px;
	color: var(--text-muted);
}

.rwcd-hour-card__humidity-icon {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

.rwcd-hour-card__pop {
	font-size: 12px;
	color: var(--accent-solid);
	font-weight: 600;
}

.rwcd-hour-card__condition {
	font-size: 11px;
	color: var(--text-muted);
}

.rwcd-hourly__nav {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--card-border);
	background: var(--card-bg-solid);
	color: var(--accent-solid);
	font-size: 18px;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
}

.rwcd-hourly__nav:hover {
	background: var(--bg-secondary);
}

@media (min-width: 576px) {
	.rwcd-hourly__nav {
		display: flex;
	}
}

/* ---- B.1.5 Nhiệt độ theo buổi (Sáng/Ngày/Chiều/Đêm) ---- */

.rwcd-dayparts__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 768px) {
	.rwcd-dayparts__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rwcd-daypart-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 16px 10px;
	background: var(--card-bg-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.rwcd-daypart-card__label {
	font-size: 13px;
	font-weight: 700;
}

.rwcd-daypart-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 72%);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
}

.rwcd-daypart-card__range {
	font-size: 14px;
	font-weight: 700;
	color: var(--accent-solid);
}

/* ---- B.3 Dự báo những ngày tới (Bảng) ---- */

.rwcd-daily-table__wrapper {
	overflow-x: auto;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.rwcd-daily-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	white-space: nowrap;
}

.rwcd-daily-table th,
.rwcd-daily-table td {
	padding: 12px 16px;
	text-align: left;
}

.rwcd-daily-table thead th {
	background: var(--accent-solid);
	color: var(--text-on-accent);
	font-weight: 700;
}

.rwcd-daily-table tbody tr {
	background: var(--card-bg-solid);
	border-top: 1px solid var(--card-border);
}

.rwcd-daily-table tbody tr:nth-child(even) {
	background: var(--bg-secondary);
}

.rwcd-daily-table__row--empty {
	opacity: 0.65;
}

.rwcd-daily-table__icon {
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 72%);
}

.rwcd-daily-table__no-data {
	color: var(--text-muted);
	font-style: italic;
}

/* ---- C.1 Chỉ số khí quyển mở rộng (Hướng gió/Gió giật/Mây/Giờ cập nhật) ---- */
/* Full-width trong Cột chính (không còn Sidebar) nên lưới 2 cột trở lên. */

.rwcd-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 576px) {
	.rwcd-detail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.rwcd-detail-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rwcd-detail-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bg-secondary);
	border-radius: 8px;
	font-size: 13px;
}

.rwcd-detail-item__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 18px;
	line-height: 1;
}

.rwcd-detail-item__label {
	flex: 1 1 auto;
	font-weight: 600;
	color: var(--text-primary);
}

.rwcd-detail-item__value {
	font-weight: 700;
	color: var(--accent-solid);
}

/* ---- C.2 Điều hướng tỉnh/thành khác (lưới toàn chiều rộng) ---- */

.rwcd-related__note {
	margin: -8px 0 16px;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.rwcd-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 24px;
}

@media (min-width: 576px) {
	.rwcd-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.rwcd-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rwcd-related__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--card-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
}

.rwcd-related__link:hover {
	color: var(--accent-solid);
}

.rwcd-related__arrow {
	color: var(--accent-solid);
	font-weight: 700;
}

/* =========================================================================
 * 6. GHI ĐÈ HEADER/FOOTER TOÀN SITE (.wrw-global-override)
 * Dùng bởi templates/global-wrapper-template.php khi tính năng "Ghi đè
 * Header & Footer cho toàn bộ Website" đang BẬT (xem
 * includes/class-global-layout.php). Reset nhẹ để CSS của Theme gốc (mỗi
 * theme có margin/padding/box-sizing mặc định khác nhau) không làm vỡ layout
 * Header/Footer của plugin khi được bọc lên TOÀN BỘ trang, không riêng gì
 * trang có shortcode của plugin.
 * ========================================================================= */
.wrw-global-override,
.wrw-global-override * {
	box-sizing: border-box;
}

.wrw-global-override {
	margin: 0;
	padding: 0;
}

.wrw-global-content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 16px;
	min-height: 50vh;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-primary);
}

.wrw-global-article__title,
.wrw-global-archive__title {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 800;
	color: var(--text-primary);
}

.wrw-global-article__content p,
.wrw-global-article__content ul,
.wrw-global-article__content ol {
	margin: 0 0 16px;
}

.wrw-global-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

/* Trang chủ Bento chạy BÊN TRONG .wrw-global-article__content khi Global
   Layout bật — chặn luật ảnh bài viết ở trên ghi đè icon/ảnh của Bento. */
.wrw-global-article__content .rw-home img {
	border-radius: 0;
}

.wrw-global-article__content .rw-home .rwb-news-card__image {
	height: 100%;
}

.wrw-global-archive__desc {
	margin: 0 0 24px;
	color: var(--text-muted);
}

.wrw-global-archive__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wrw-global-archive__item-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

.wrw-global-archive__item-title a {
	color: var(--text-primary);
}

.wrw-global-archive__item-title a:hover {
	color: var(--accent-solid);
}

.wrw-global-archive__item-excerpt {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.wrw-global-no-results,
.wrw-global-404 {
	text-align: center;
	padding: 64px 16px;
}

.wrw-global-404__title {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 800;
}

/* =========================================================================
 * 7. REDUCED MOTION — đặt CUỐI FILE để thắng cascade mọi rule animation.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.rwcd-hero__metric-icon,
	.rwb-spot__icon,
	.rwb-hero__pulse::after {
		animation: none;
	}

	.rw-home *,
	.rw-header *,
	.rw-footer * {
		transition-duration: 0.01ms !important;
	}

	.rwb-tile:hover,
	.rwb-news-card:hover .rwb-news-card__image,
	.rwb-city:hover .rwb-city__icon {
		transform: none;
	}
}