/* ==========================================================================
   MÙA — giao diện tone cam cho thoitiet4mua.edu.vn
   Nạp sau style.css. Mọi lớp mới dùng tiền tố .tw-
   ========================================================================== */

:root {
	--tw-ink: #2b1a10;
	--tw-ink-2: #5a4031;
	--tw-muted: #8c7262;
	--tw-line: #f0dfcf;
	--tw-line-2: #f7ebdf;
	--tw-bg: #fdf5ec;
	--tw-card: #ffffff;
	--tw-brand: #ea580c;
	--tw-brand-600: #c2410c;
	--tw-brand-700: #9a3412;
	--tw-brand-50: #fff1e4;
	--tw-brand-100: #fed7aa;
	--tw-sky: #f59e0b;
	--tw-teal: #14b8a6;
	--tw-warm: #f97316;
	--tw-sun: #facc15;
	--tw-rain: #2563eb;
	--tw-radius: 20px;
	--tw-radius-sm: 14px;
	--tw-shadow: 0 1px 2px rgba(66, 32, 12, 0.05), 0 10px 30px -14px rgba(66, 32, 12, 0.22);
	--tw-shadow-lg: 0 24px 60px -24px rgba(66, 32, 12, 0.45);
	--tw-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tw-tabs-h: 68px;
}

/* ---------- Nền tảng ---------- */
body {
	background: var(--tw-bg);
	font-family: var(--tw-font);
	color: var(--tw-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
input,
button,
textarea,
select {
	font-family: var(--tw-font);
}
.tw-main img.tw-wicon,
img.tw-wicon {
	display: inline-block;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}
.tw-h2 {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--tw-ink);
	margin: 0;
	letter-spacing: -0.01em;
}
.tw-eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 6px;
}
.tw-mini-title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tw-muted);
	margin: 0 0 10px;
}
.tw-note {
	font-size: 0.75rem;
	color: var(--tw-muted);
	margin: 8px 0 0;
}
.tw-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
	margin-right: 4px;
	vertical-align: middle;
	animation: twPulse 2s infinite;
}
@keyframes twPulse {
	50% {
		box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
	}
}
.tw-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
	white-space: nowrap;
}
.tw-chip--rain {
	background: #ffeedd;
	color: #1d4ed8;
}
.tw-chip--sun {
	background: #fff4d6;
	color: #a16207;
}
.tw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-600));
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}
.tw-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(234, 88, 12, 0.8);
}
.tw-btn--ghost {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-btn--ghost:hover {
	color: var(--tw-brand-700);
	background: var(--tw-brand-100);
	box-shadow: none;
}
.tw-btn--soft {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-btn--soft:hover {
	color: var(--tw-brand-700);
	box-shadow: none;
}
.tw-link-arrow {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--tw-brand);
}
.tw-link-arrow::after {
	content: "→";
	transition: transform 0.15s;
}
.tw-link-arrow:hover {
	color: var(--tw-brand-700);
}
.tw-link-arrow:hover::after {
	transform: translateX(3px);
}
.tw-windarrow {
	display: inline-block;
	vertical-align: -2px;
	color: var(--tw-brand);
}
.tw-meter {
	display: block;
	height: 5px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.25);
	overflow: hidden;
	margin-top: 8px;
}
.tw-meter i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #fff;
}
.tw-meter--rain {
	background: var(--tw-line-2);
}
.tw-meter--rain i {
	background: linear-gradient(90deg, #60a5fa, var(--tw-rain));
}
.tw-pop {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: #1d4ed8;
	white-space: nowrap;
}
.tw-pop svg path {
	fill: currentColor;
}
.tw-uv {
	font-weight: 600;
}
.tw-tips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.tw-tip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 0.78rem;
	font-weight: 600;
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-tip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.tw-tip--rain {
	background: #ffeedd;
	color: #1d4ed8;
}
.tw-tip--sun,
.tw-tip--hot {
	background: #fff1e6;
	color: #c2410c;
}
.tw-tip--cold {
	background: #e0f2fe;
	color: #0369a1;
}
.tw-tip--wind {
	background: #e6fffa;
	color: #0f766e;
}
.tw-tip--ok {
	background: #e9fbef;
	color: #15803d;
}

/* ---------- Header ---------- */
.tw-header {
	background: #fff;
	border-bottom: 1px solid var(--tw-line);
	position: relative;
	z-index: 1040;
}
.tw-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
}
.tw-header__logo img {
	width: 150px;
	height: auto;
}
.tw-header__search {
	flex: 1;
	max-width: 560px;
	margin-left: auto;
}
.tw-search {
	position: relative;
}
.tw-search__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tw-muted);
	pointer-events: none;
}
.tw-search .search-input {
	width: 100%;
	height: 46px;
	padding: 0 18px 0 44px;
	border-radius: 999px;
	background: var(--tw-bg);
	border: 1.5px solid transparent;
	color: var(--tw-ink);
	font-size: 0.95rem;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tw-search .search-input:focus {
	background: #fff;
	border-color: var(--tw-brand);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
}
.tw-search .search-input::placeholder {
	color: var(--tw-muted);
}
.tw-search .search-results {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 360px;
	overflow: auto;
	background: #fff;
	border-radius: var(--tw-radius-sm);
	box-shadow: var(--tw-shadow-lg);
	padding: 6px;
	z-index: 50;
}
.tw-search .search-results > a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--tw-ink);
	font-size: 0.92rem;
}
.tw-search .search-results > a:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-header__places .dropdown-toggle::after {
	margin-left: 2px;
}
.tw-places-menu {
	width: min(860px, 92vw);
	max-height: 72vh;
	overflow: auto;
	padding: 18px;
	border: 0;
	border-radius: var(--tw-radius);
	box-shadow: var(--tw-shadow-lg);
	margin-top: 10px;
}
.tw-places-menu__grid {
	columns: 4 180px;
	column-gap: 20px;
}
.tw-places-menu__group {
	break-inside: avoid;
	margin-bottom: 14px;
}
.tw-places-menu__head {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tw-brand);
	padding: 4px 10px;
}
.tw-places-menu .dropdown-item {
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 0.9rem;
	color: var(--tw-ink);
}
.tw-places-menu .dropdown-item:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}

/* ---------- Breadcrumb ---------- */
.tw-crumbs {
	padding: 12px 0 0;
	font-size: 0.82rem;
	color: var(--tw-muted);
}
.tw-crumbs .rank-math-breadcrumb p {
	margin: 0;
}
.tw-crumbs a {
	display: inline;
	color: var(--tw-brand-600);
}
.tw-crumbs .separator {
	margin: 0 6px;
	color: #9fb4ca;
}

/* ---------- Tabs ---------- */
.tw-tabs {
	position: sticky;
	top: 0;
	z-index: 1020;
	padding: 10px 0;
	background: rgba(238, 245, 252, 0.88);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}
.admin-bar .tw-tabs {
	top: 32px;
}
.tw-tabs__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--tw-shadow);
}
.tw-tabs__list::-webkit-scrollbar {
	display: none;
}
.tw-tabs__list li {
	flex: 1 0 auto;
}
.tw-tabs__link {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	padding: 7px 14px;
	border-radius: 14px;
	color: var(--tw-ink-2);
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.tw-tabs__link:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-tabs__main {
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.2;
}
.tw-tabs__sub {
	font-size: 0.7rem;
	color: var(--tw-muted);
	line-height: 1.2;
}
.tw-tabs__link.is-active {
	background: linear-gradient(135deg, var(--tw-brand), #b4400e);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(16, 95, 154, 0.9);
}
.tw-tabs__link.is-active .tw-tabs__sub {
	color: rgba(255, 255, 255, 0.8);
}

/* ---------- Dải tiêu đề trang (các trang N ngày) ---------- */
.tw-pagehead {
	--g1: #b4400e;
	--g2: #ea580c;
	--g3: #38bdf8;
	position: relative;
	overflow: hidden;
	margin: 6px 0 0;
	color: #fff;
	background: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3));
}
.tw-pagehead__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 34px;
	padding-bottom: 38px;
}
.tw-pagehead__title {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	color: #fff;
}
.tw-pagehead__lead {
	max-width: 560px;
	margin: 0 0 12px;
	opacity: 0.92;
}
.tw-pagehead__meta {
	font-size: 0.85rem;
	margin: 0;
	opacity: 0.9;
}
.tw-pagehead__now {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 20px 12px 12px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	flex-shrink: 0;
	transition: background 0.15s;
}
.tw-pagehead__now:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.24);
}
.tw-pagehead__now-temp {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
}
.tw-pagehead__now-desc {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.3;
	text-transform: capitalize;
}
.tw-pagehead__now-desc small {
	font-weight: 500;
	opacity: 0.8;
	text-transform: none;
}
.tw-pagehead__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.tw-orb {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
}
.tw-orb--1 {
	width: 420px;
	height: 420px;
	right: -120px;
	top: -220px;
}
.tw-orb--2 {
	width: 260px;
	height: 260px;
	right: 28%;
	bottom: -180px;
	opacity: 0.6;
}
.tw-orb--3 {
	width: 160px;
	height: 160px;
	left: -60px;
	top: -60px;
	opacity: 0.5;
}
/* Mỗi trang một sắc xanh riêng */
.tw-pagehead--hourly {
	--g1: #0b5e6b;
	--g2: #0e9aa7;
	--g3: #5eead4;
}
.tw-pagehead--3d {
	--g1: #0b4f8a;
	--g2: #ea580c;
	--g3: #7dd3fc;
}
.tw-pagehead--5d {
	--g1: #083b66;
	--g2: #0b6aa6;
	--g3: #22b3e6;
}
.tw-pagehead--7d {
	--g1: #1e2f7a;
	--g2: #2f5fd0;
	--g3: #60a5fa;
}
.tw-pagehead--10d {
	--g1: #1f1209;
	--g2: #0b2e59;
	--g3: #1d5f99;
}
.tw-pagehead--15d {
	--g1: #0c4a6e;
	--g2: #0284c7;
	--g3: #2dd4bf;
}
.tw-pagehead--20d {
	--g1: #1e3a5f;
	--g2: #3a6a9a;
	--g3: #8ab6dc;
}
.tw-pagehead--30d {
	--g1: #1a1f5c;
	--g2: #3b4fb8;
	--g3: #67b7f0;
}
.tw-pagehead--7d .tw-orb--2 {
	border-radius: 30%;
	transform: rotate(20deg);
}
.tw-pagehead--30d .tw-orb--1 {
	border-radius: 24px;
	transform: rotate(14deg);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
}

/* ---------- HERO trang Hôm nay ---------- */
.tw-hero {
	--h1: #dd5a10;
	--h2: #fb923c;
	position: relative;
	overflow: hidden;
	margin-top: 6px;
	color: #fff;
	background: linear-gradient(160deg, var(--h1) 0%, var(--h2) 100%);
	padding: 34px 0 30px;
}
.tw-hero.is-clear {
	--h1: #0f7bd6;
	--h2: #fdba74;
}
.tw-hero.is-partly {
	--h1: #1a6fbf;
	--h2: #6ab9ea;
}
.tw-hero.is-cloudy {
	--h1: #7a5238;
	--h2: #c9a48a;
}
.tw-hero.is-rain {
	--h1: #173f75;
	--h2: #3a73b0;
}
.tw-hero.is-storm {
	--h1: #141f3a;
	--h2: #364a76;
}
.tw-hero.is-mist {
	--h1: #8c6a54;
	--h2: #d9bca6;
}
.tw-hero.is-snow {
	--h1: #5b8fc4;
	--h2: #cfe6fb;
}
.tw-hero.is-night {
	--h1: #071631;
	--h2: #1d3b6e;
}
.tw-hero__sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.tw-cloud {
	position: absolute;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	filter: blur(2px);
	animation: twDrift 40s linear infinite;
}
.tw-cloud::before,
.tw-cloud::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: inherit;
}
.tw-cloud--1 {
	width: 220px;
	height: 60px;
	top: 14%;
	left: -10%;
}
.tw-cloud--1::before {
	width: 110px;
	height: 110px;
	left: 40px;
	top: -55px;
}
.tw-cloud--1::after {
	width: 80px;
	height: 80px;
	left: 120px;
	top: -35px;
}
.tw-cloud--2 {
	width: 160px;
	height: 44px;
	top: 58%;
	left: 30%;
	animation-duration: 55s;
	animation-delay: -20s;
	opacity: 0.7;
}
.tw-cloud--2::before {
	width: 80px;
	height: 80px;
	left: 30px;
	top: -40px;
}
.tw-cloud--3 {
	width: 260px;
	height: 70px;
	top: 6%;
	left: 60%;
	animation-duration: 70s;
	animation-delay: -35s;
	opacity: 0.6;
}
.tw-cloud--3::before {
	width: 130px;
	height: 130px;
	left: 60px;
	top: -70px;
}
.tw-hero.is-clear .tw-cloud {
	opacity: 0.35;
}
@keyframes twDrift {
	from {
		transform: translateX(-30vw);
	}
	to {
		transform: translateX(110vw);
	}
}
.tw-rain {
	position: absolute;
	inset: -50% 0 0;
	display: none;
	background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255, 255, 255, 0.18) 18px 19px, transparent 19px 38px);
	animation: twRain 0.6s linear infinite;
}
.tw-hero.is-rain .tw-rain,
.tw-hero.is-storm .tw-rain {
	display: block;
}
@keyframes twRain {
	to {
		transform: translateY(38px);
	}
}
.tw-hero .container {
	position: relative;
}
.tw-hero__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: center;
	gap: 24px;
}
.tw-hero__title {
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 14px;
}
.tw-hero__now {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.tw-hero__temp {
	font-size: clamp(4.5rem, 10vw, 7.5rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.05em;
	text-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.tw-hero__temp sup {
	font-size: 0.32em;
	font-weight: 600;
	top: -1.6em;
	letter-spacing: 0;
	margin-left: 4px;
}
.tw-hero__desc {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tw-hero__desc strong {
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: capitalize;
}
.tw-hero__desc span {
	opacity: 0.9;
}
.tw-hero__hl {
	display: flex;
	gap: 14px;
	font-weight: 700;
}
.tw-hero__updated {
	margin: 18px 0 0;
	font-size: 0.85rem;
	opacity: 0.9;
}
.tw-hero__art {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tw-hero__glow {
	position: absolute;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 240, 180, 0.55), rgba(255, 255, 255, 0) 70%);
	animation: twGlow 6s ease-in-out infinite;
}
.tw-hero.is-night .tw-hero__glow,
.tw-hero.is-rain .tw-hero__glow,
.tw-hero.is-storm .tw-hero__glow {
	background: radial-gradient(circle, rgba(180, 210, 255, 0.4), rgba(255, 255, 255, 0) 70%);
}
@keyframes twGlow {
	50% {
		transform: scale(1.12);
		opacity: 0.8;
	}
}
.tw-hero__icon {
	position: relative;
	width: 200px;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.2));
	animation: twFloat 6s ease-in-out infinite;
}
@keyframes twFloat {
	50% {
		transform: translateY(-8px);
	}
}
.tw-hero__badge {
	position: relative;
	margin-top: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.85rem;
}
.tw-glass {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin: 26px 0 0;
}
.tw-glass__item {
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.tw-glass dt {
	font-size: 0.78rem;
	font-weight: 500;
	opacity: 0.85;
	margin: 0;
}
.tw-glass dd {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 2px 0 0;
	line-height: 1.2;
}
.tw-glass dd small {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.85;
}
.tw-glass__item > small {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	opacity: 0.9;
}
.tw-glass .tw-windarrow {
	color: #fff;
}

/* ---------- Bố cục 2 cột ---------- */
.tw-main {
	padding: 26px 0 40px;
}
.tw-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
}
.tw-content > * + * {
	margin-top: 22px;
}
.tw-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.tw-wide {
	padding: 26px 0 0;
}
.tw-section {
	padding: 0 0 40px;
}

/* ---------- Thẻ ---------- */
.tw-card {
	background: var(--tw-card);
	border-radius: var(--tw-radius);
	box-shadow: var(--tw-shadow);
	padding: 22px 24px;
}
.tw-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.tw-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--tw-ink);
}
.tw-arrows {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.tw-arrow {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tw-brand-50) !important;
	color: var(--tw-brand-700) !important;
	transition: background 0.15s;
}
.tw-arrow:hover {
	background: var(--tw-brand-100) !important;
}
.tw-empty {
	text-align: center;
	padding: 48px 24px;
}
.tw-empty img {
	margin: 0 auto 12px;
	height: auto;
}
.tw-empty h2 {
	font-size: 1.3rem;
	font-weight: 700;
}
.tw-empty p {
	color: var(--tw-muted);
	margin: 8px 0 18px;
}
.tw-legend {
	display: flex;
	gap: 14px;
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-legend span::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: -1px;
}
.tw-legend__temp::before {
	background: var(--tw-warm);
}
.tw-legend__pop::before {
	background: #60a5fa;
}

/* KPI */
.tw-kpis {
	display: grid;
	gap: 14px;
}
.tw-kpis--3 {
	grid-template-columns: repeat(3, 1fr);
}
.tw-kpis--5 {
	grid-template-columns: repeat(5, 1fr);
	margin-bottom: 20px;
}
.tw-kpi {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	border-top: 4px solid var(--tw-brand);
}
.tw-kpi--warm {
	border-top-color: var(--tw-warm);
}
.tw-kpi--cool {
	border-top-color: var(--tw-sky);
}
.tw-kpi--rain {
	border-top-color: var(--tw-rain);
}
.tw-kpi__label {
	font-size: 0.8rem;
	color: var(--tw-muted);
	font-weight: 500;
}
.tw-kpi__value {
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 4px 0 2px;
	letter-spacing: -0.02em;
}
.tw-kpi__value small {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tw-muted);
}
.tw-kpi__sub {
	font-size: 0.8rem;
	color: var(--tw-ink-2);
}

/* Bảng thống kê */
.tw-statlist,
.tw-statgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 16px 0 0;
}
.tw-statgrid {
	grid-template-columns: repeat(4, 1fr);
}
.tw-statlist > div,
.tw-statgrid > div {
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--tw-bg);
}
.tw-statlist dt,
.tw-statgrid dt {
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--tw-muted);
	margin: 0;
}
.tw-statlist dd,
.tw-statgrid dd {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 2px 0 0;
	color: var(--tw-ink);
}
.tw-quad {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.tw-quad__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 8px;
	border-radius: 14px;
	color: #fff;
}
.tw-quad__item span {
	font-size: 0.75rem;
	opacity: 0.9;
}
.tw-quad__item b {
	font-size: 1.25rem;
	font-weight: 800;
}
.tw-quad__item--morn {
	background: linear-gradient(160deg, #fbbf24, #fb923c);
}
.tw-quad__item--day {
	background: linear-gradient(160deg, #38bdf8, #ea580c);
}
.tw-quad__item--eve {
	background: linear-gradient(160deg, #818cf8, #4f46e5);
}
.tw-quad__item--night {
	background: linear-gradient(160deg, #1e3a8a, #2b1a10);
}

/* ---------- Biểu đồ ---------- */
.tw-chart {
	position: relative;
	width: 100%;
}
.tw-chart canvas {
	display: block;
}

/* ---------- Liên kết trang khác ---------- */
.tw-more {
	padding: 4px 0 0;
}
.tw-more .tw-h2 {
	margin-bottom: 12px;
}
.tw-more__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.tw-more__item {
	display: flex !important;
	flex-direction: column;
	padding: 14px 16px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--tw-line);
	color: var(--tw-ink);
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tw-more__item strong {
	font-weight: 700;
}
.tw-more__item span {
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-more__item:hover {
	color: var(--tw-brand-700);
	border-color: var(--tw-brand-100);
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow);
}

/* ---------- Sidebar ---------- */
.tw-nowcard {
	--n1: #dd5a10;
	--n2: #fb923c;
	color: #fff;
	background: linear-gradient(150deg, var(--n1), var(--n2));
}
.tw-nowcard.is-cloudy {
	--n1: #7a5238;
	--n2: #c9a48a;
}
.tw-nowcard.is-rain,
.tw-nowcard.is-storm {
	--n1: #173f75;
	--n2: #3a73b0;
}
.tw-nowcard.is-night {
	--n1: #0b1e3f;
	--n2: #24497f;
}
.tw-nowcard__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.tw-nowcard__label {
	font-size: 0.82rem;
	opacity: 0.9;
	margin: 0;
}
.tw-nowcard__temp {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
}
.tw-nowcard__desc {
	font-size: 0.85rem;
	margin: 0;
	text-transform: capitalize;
}
.tw-nowcard__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 14px 0 0;
}
.tw-nowcard__grid > div {
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.15);
}
.tw-nowcard__grid dt {
	font-size: 0.7rem;
	font-weight: 500;
	opacity: 0.85;
	margin: 0;
}
.tw-nowcard__grid dd {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0;
}
.tw-nowcard .tw-link-arrow {
	color: #fff;
}

.tw-aqi__head {
	display: flex;
	gap: 14px;
	align-items: center;
}
.tw-aqi__score {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	padding-top: 12px;
	color: #fff;
	background: var(--aqi, #22c55e);
}
.tw-aqi__score span {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}
.tw-aqi__score small {
	opacity: 0.85;
	font-weight: 600;
}
.tw-aqi--1 {
	--aqi: #16a34a;
}
.tw-aqi--2 {
	--aqi: #65a30d;
}
.tw-aqi--3 {
	--aqi: #d97706;
}
.tw-aqi--4 {
	--aqi: #ea580c;
}
.tw-aqi--5 {
	--aqi: #dc2626;
}
.tw-aqi__label {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--aqi, var(--tw-ink));
	margin: 0;
}
.tw-aqi__desc {
	font-size: 0.82rem;
	color: var(--tw-ink-2);
	margin: 2px 0 0;
	line-height: 1.45;
}
.tw-aqi__scale {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	margin: 14px 0;
}
.tw-aqi__scale span {
	height: 6px;
	border-radius: 9px;
	opacity: 0.35;
}
.tw-aqi__scale span:nth-child(1) {
	background: #16a34a;
}
.tw-aqi__scale span:nth-child(2) {
	background: #65a30d;
}
.tw-aqi__scale span:nth-child(3) {
	background: #d97706;
}
.tw-aqi__scale span:nth-child(4) {
	background: #ea580c;
}
.tw-aqi__scale span:nth-child(5) {
	background: #dc2626;
}
.tw-aqi__scale span.is-on {
	opacity: 1;
	transform: scaleY(1.6);
}
.tw-aqi__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 0;
}
.tw-aqi__grid > div {
	text-align: center;
	padding: 8px 4px;
	border-radius: 10px;
	background: var(--tw-bg);
}
.tw-aqi__grid dt {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--tw-muted);
	margin: 0;
}
.tw-aqi__grid dd {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0;
}

.tw-sun__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 130px;
}
.tw-sun__times {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
}
.tw-sun__times div {
	display: flex;
	flex-direction: column;
}
.tw-sun__times div:last-child {
	text-align: right;
}
.tw-sun__len {
	text-align: center;
}
.tw-sun__times span {
	font-size: 0.75rem;
	color: var(--tw-muted);
}
.tw-sun__times strong {
	font-size: 1.05rem;
	font-weight: 700;
}

.tw-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tw-news__list li + li {
	border-top: 1px solid var(--tw-line-2);
}
.tw-news__list a {
	display: block;
	padding: 10px 0;
	color: var(--tw-ink);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
}
.tw-news__list a:hover {
	color: var(--tw-brand);
}
.tw-news__list .is-lead a {
	padding-top: 0;
	font-weight: 700;
}
.tw-news__list .is-lead img {
	width: 100%;
	height: 160px;
	border-radius: 14px;
	margin-bottom: 10px;
	object-fit: cover;
}

.tw-places__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.tw-places__list a {
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--tw-bg);
	color: var(--tw-ink-2);
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.15s, color 0.15s;
}
.tw-places__list a:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-places__list .is-extra {
	display: none;
}
.tw-places.is-open .is-extra {
	display: block;
}
.tw-places__more {
	width: 100%;
}

.tw-desc__body {
	position: relative;
	max-height: 280px;
	overflow: hidden;
}
.tw-desc__body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
.tw-desc.is-open .tw-desc__body {
	max-height: none;
}
.tw-desc.is-open .tw-desc__body::after {
	display: none;
}
.tw-desc .tw-btn {
	margin-top: 12px;
}
.tw-desc .entry-content h2,
.tw-desc .entry-content h3 {
	color: var(--tw-ink);
}

/* ==========================================================================
   HÔM NAY
   ========================================================================== */
.tw-strip__scroll,
.tw-hchart__scroll,
.tw-film__scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tw-brand-100) transparent;
	-webkit-overflow-scrolling: touch;
	margin: 0 -8px;
	padding: 0 8px 6px;
}
.tw-strip__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n), 76px);
}
.tw-strip__line {
	position: absolute;
	top: 30px;
	left: 0;
	color: var(--tw-warm);
	pointer-events: none;
}
.tw-strip__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 0 10px;
	border-radius: 16px;
}
.tw-strip__col.is-now {
	background: var(--tw-brand-50);
}
.tw-strip__temp {
	font-weight: 700;
	font-size: 0.95rem;
	height: 22px;
}
.tw-strip__spacer {
	height: 62px;
}
.tw-strip__time {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--tw-muted);
}
.tw-strip__col.is-now .tw-strip__time {
	color: var(--tw-brand-700);
}
.tw-daytiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.tw-daytile {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 8px;
	border-radius: 18px;
	border: 1px solid var(--tw-line);
	color: var(--tw-ink);
	text-align: center;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.tw-daytile:hover {
	color: var(--tw-ink);
	transform: translateY(-3px);
	box-shadow: var(--tw-shadow);
	border-color: var(--tw-brand-100);
}
.tw-daytile__day {
	font-weight: 700;
}
.tw-daytile__date {
	font-size: 0.78rem;
	color: var(--tw-muted);
}
.tw-daytile__temp {
	font-size: 0.95rem;
	color: var(--tw-muted);
}
.tw-daytile__temp b {
	color: var(--tw-ink);
	font-size: 1.1rem;
}
.tw-daytile.is-today {
	background: linear-gradient(160deg, var(--tw-brand), #b4400e);
	border-color: transparent;
	color: #fff;
}
.tw-daytile.is-today .tw-daytile__date,
.tw-daytile.is-today .tw-daytile__temp,
.tw-daytile.is-today .tw-daytile__temp b,
.tw-daytile.is-today .tw-pop {
	color: #fff;
}

/* ==========================================================================
   THEO GIỜ
   ========================================================================== */
.tw-hchart__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n), 56px);
	padding-top: 22px;
}
.tw-hchart__line {
	position: absolute;
	top: 48px;
	left: 0;
	color: var(--tw-teal);
	pointer-events: none;
}
.tw-hchart__col {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.tw-hchart__col.is-newday {
	border-left: 1.5px dashed var(--tw-line);
}
.tw-hchart__day {
	position: absolute;
	top: -22px;
	left: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--tw-brand-700);
	white-space: nowrap;
	background: var(--tw-brand-50);
	padding: 1px 8px;
	border-radius: 999px;
}
.tw-hchart__temp {
	font-size: 0.82rem;
	font-weight: 700;
	height: 22px;
}
.tw-hchart__space {
	height: 118px;
}
.tw-hchart__noicon {
	height: 34px;
}
.tw-hchart__bar {
	display: flex;
	align-items: flex-end;
	width: 18px;
	height: 54px;
	border-radius: 6px;
	background: var(--tw-line-2);
	overflow: hidden;
}
.tw-hchart__bar i {
	display: block;
	width: 100%;
	background: linear-gradient(#93c5fd, var(--tw-rain));
	border-radius: 6px;
}
.tw-hchart__pop {
	font-size: 0.7rem;
	color: #1d4ed8;
	font-weight: 600;
}
.tw-hchart__time {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tw-muted);
}

.tw-timeline__day + .tw-timeline__day {
	margin-top: 22px;
}
.tw-timeline__head {
	position: sticky;
	top: var(--tw-tabs-h);
	z-index: 5;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	padding: 10px 16px;
	border-radius: 14px;
	background: linear-gradient(90deg, #0b5e6b, #0e9aa7);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
	box-shadow: var(--tw-shadow);
}
.tw-timeline__head small {
	font-weight: 500;
	font-size: 0.8rem;
	opacity: 0.9;
}
.tw-timeline__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tw-timeline__list::before {
	content: "";
	position: absolute;
	left: 79px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(var(--tw-teal), var(--tw-brand-100));
}
.tw-hour {
	position: relative;
	display: grid;
	grid-template-columns: 64px 32px minmax(0, 1fr);
	align-items: center;
	padding: 4px 0;
}
.tw-hour__time {
	font-weight: 700;
	font-size: 0.9rem;
	text-align: right;
	color: var(--tw-ink-2);
}
.tw-hour__node {
	justify-self: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--tw-teal);
	z-index: 1;
}
.tw-hour.is-now .tw-hour__node {
	width: 16px;
	height: 16px;
	background: var(--tw-teal);
	box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.2);
}
.tw-hour.is-rain .tw-hour__node,
.tw-hour.is-storm .tw-hour__node {
	border-color: var(--tw-rain);
}
.tw-hour__body {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	border-left: 4px solid var(--tw-brand-100);
}
.tw-hour.is-now .tw-hour__body {
	border-left-color: var(--tw-teal);
	background: linear-gradient(90deg, #ecfeff, #fff 60%);
}
.tw-hour.is-rain .tw-hour__body,
.tw-hour.is-storm .tw-hour__body {
	border-left-color: #60a5fa;
}
.tw-hour.is-clear .tw-hour__body {
	border-left-color: #fcd34d;
}
.tw-hour__main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.tw-hour__temp {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.1;
}
.tw-hour__desc {
	display: block;
	font-size: 0.8rem;
	color: var(--tw-muted);
	text-transform: lowercase;
}
.tw-hour__desc::first-letter {
	text-transform: uppercase;
}
.tw-hour__stats {
	display: grid;
	grid-template-columns: 1.5fr 1fr 0.8fr 0.6fr;
	gap: 10px;
	margin: 0;
}
.tw-hour__stats dt {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--tw-muted);
	margin: 0;
}
.tw-hour__stats dd {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}
.tw-hour__stats .tw-meter {
	margin-top: 4px;
}

/* ==========================================================================
   3 NGÀY — poster
   ========================================================================== */
.tw-posters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.tw-poster {
	--p1: #dd5a10;
	--p2: #fb923c;
	display: flex;
	flex-direction: column;
	border-radius: 26px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--tw-shadow);
	transition: transform 0.2s, box-shadow 0.2s;
}
.tw-poster:hover {
	transform: translateY(-4px);
	box-shadow: var(--tw-shadow-lg);
}
.tw-poster.is-clear {
	--p1: #0f7bd6;
	--p2: #fdba74;
}
.tw-poster.is-cloudy {
	--p1: #7a5238;
	--p2: #c9a48a;
}
.tw-poster.is-rain {
	--p1: #173f75;
	--p2: #3a73b0;
}
.tw-poster.is-storm {
	--p1: #141f3a;
	--p2: #364a76;
}
.tw-poster.is-mist {
	--p1: #8c6a54;
	--p2: #d9bca6;
}
.tw-poster__head {
	position: relative;
	padding: 22px 22px 20px;
	color: #fff;
	background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.35), transparent 45%), linear-gradient(160deg, var(--p1), var(--p2));
	min-height: 250px;
}
.tw-poster__day {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	margin: 0;
	letter-spacing: -0.02em;
}
.tw-poster__date {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.9;
}
.tw-poster__num {
	position: absolute;
	top: 22px;
	right: 22px;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
}
.tw-poster__icon {
	position: absolute;
	right: 10px;
	top: 56px;
	width: 120px;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2));
}
.tw-poster__temps {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 34px;
}
.tw-poster__max {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}
.tw-poster__min {
	font-size: 1.5rem;
	font-weight: 600;
	opacity: 0.8;
}
.tw-poster__desc {
	margin: 10px 0 0;
	font-weight: 600;
	text-transform: capitalize;
}
.tw-poster__body {
	padding: 18px 22px 22px;
	flex: 1;
}
.tw-parts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	align-items: end;
}
.tw-parts__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.tw-parts__val {
	font-weight: 800;
	font-size: 0.95rem;
}
.tw-parts__bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: 46px;
	height: 92px;
	border-radius: 12px;
	background: var(--tw-line-2);
	overflow: hidden;
}
.tw-parts__bar i {
	display: block;
	width: 100%;
	border-radius: 12px;
	opacity: 0.9;
}
.tw-parts__label {
	font-size: 0.75rem;
	color: var(--tw-muted);
	font-weight: 600;
}

/* ==========================================================================
   5 NGÀY — cột nhiệt độ
   ========================================================================== */
.tw-columns__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}
.tw-columns__axis {
	position: relative;
	grid-row: 1;
	margin-top: 150px;
	height: 220px;
}
.tw-columns__axis span {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	font-size: 0.7rem;
	color: var(--tw-muted);
}
.tw-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 6px 14px;
	border-radius: 20px;
	background: linear-gradient(var(--tw-bg), #fff);
}
.tw-col.is-today {
	background: linear-gradient(#dff0fc, #fff);
	box-shadow: inset 0 0 0 2px var(--tw-brand-100);
}
.tw-col__day {
	font-weight: 800;
}
.tw-col__date {
	font-size: 0.78rem;
	color: var(--tw-muted);
}
.tw-col__track {
	position: relative;
	width: 34px;
	height: 220px;
	margin: 6px 0 10px;
	border-radius: 999px;
	background: repeating-linear-gradient(to top, var(--tw-line-2) 0 1px, transparent 1px 25%), #f3f8fd;
	box-shadow: inset 0 0 0 1px var(--tw-line);
}
.tw-col__range {
	position: absolute;
	left: 4px;
	right: 4px;
	border-radius: 999px;
	box-shadow: 0 6px 16px -6px rgba(66, 32, 12, 0.35);
}
.tw-col__max,
.tw-col__min {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.9rem;
	font-weight: 800;
	white-space: nowrap;
}
.tw-col__max {
	bottom: calc(100% + 6px);
	color: #c2410c;
}
.tw-col__min {
	top: calc(100% + 6px);
	color: #0369a1;
}
.tw-col__wind {
	font-size: 0.75rem;
	color: var(--tw-muted);
	white-space: nowrap;
	margin-top: 2px;
}
.tw-col .tw-pop {
	margin-top: 14px;
}
.tw-dtabs__nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	margin: 0 0 18px;
	padding: 0 0 4px;
	scrollbar-width: none;
}
.tw-dtabs__nav .nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 8px;
	border-radius: 14px;
	border: 1px solid var(--tw-line);
	color: var(--tw-ink-2);
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.2;
}
.tw-dtabs__nav .nav-link small {
	display: block;
	font-weight: 500;
	font-size: 0.72rem;
	color: var(--tw-muted);
}
.tw-dtabs__nav .nav-link.active {
	background: var(--tw-brand-50);
	border-color: var(--tw-brand);
	color: var(--tw-brand-700);
}
.tw-dtabs__grid > * + * {
	margin-top: 16px;
}
.tw-dtabs__summary {
	display: flex;
	gap: 16px;
	align-items: center;
}
.tw-dtabs__title {
	font-weight: 800;
	font-size: 1.1rem;
	margin: 0;
}
.tw-dtabs__desc {
	margin: 0;
	color: var(--tw-ink-2);
	text-transform: capitalize;
}
.tw-dtabs__temps {
	margin: 2px 0 0;
	color: var(--tw-muted);
}
.tw-dtabs__temps b {
	color: var(--tw-ink);
	font-size: 1.2rem;
}
.tw-dtabs__summary .tw-tips {
	margin-top: 8px;
}

/* ==========================================================================
   7 NGÀY — cả tuần
   ========================================================================== */
.tw-highlights {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.tw-hl {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
	min-height: 150px;
	border-radius: 20px;
	color: #fff;
	overflow: hidden;
	box-shadow: var(--tw-shadow);
}
.tw-hl--best {
	background: linear-gradient(150deg, #0ea5e9, #2563eb);
}
.tw-hl--hot {
	background: linear-gradient(150deg, #fb923c, #e11d48);
}
.tw-hl--wet {
	background: linear-gradient(150deg, #3b82f6, #1e3a8a);
}
.tw-hl--weekend {
	background: #fff;
	color: var(--tw-ink);
}
.tw-hl__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.9;
}
.tw-hl--weekend .tw-hl__label {
	color: var(--tw-brand);
	margin-bottom: 6px;
}
.tw-hl__day {
	font-size: 1.3rem;
	font-weight: 800;
	margin-top: 6px;
	line-height: 1.2;
}
.tw-hl__date {
	font-size: 0.8rem;
	opacity: 0.9;
}
.tw-hl__icon {
	position: absolute;
	right: 8px;
	top: 34px;
}
.tw-hl__note {
	margin-top: auto;
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.95;
}
.tw-hl__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	padding: 4px 0;
}
.tw-hl__row b {
	flex: 1;
	white-space: nowrap;
}
.tw-hl__row span {
	white-space: nowrap;
}
.tw-week__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tw-wrow {
	border-radius: 16px;
	border: 1px solid var(--tw-line);
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.tw-wrow[open] {
	border-color: var(--tw-brand-100);
	box-shadow: var(--tw-shadow);
}
.tw-wrow.is-weekend {
	background: linear-gradient(90deg, #f0f7ff, #fff 40%);
}
.tw-wrow__sum {
	display: grid;
	grid-template-columns: minmax(110px, 1.2fr) 44px 64px 38px minmax(80px, 2fr) 38px 18px;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	cursor: pointer;
	list-style: none;
}
.tw-wrow__sum::-webkit-details-marker {
	display: none;
}
.tw-wrow__day b {
	display: block;
	font-weight: 800;
}
.tw-wrow__day small {
	color: var(--tw-muted);
	font-size: 0.76rem;
}
.tw-wrow.is-weekend .tw-wrow__day small {
	color: var(--tw-brand);
	font-weight: 600;
}
.tw-wrow__min {
	text-align: right;
	color: var(--tw-muted);
	font-weight: 700;
}
.tw-wrow__max {
	font-weight: 800;
}
.tw-wrow__chev {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--tw-muted);
	border-bottom: 2px solid var(--tw-muted);
	transform: rotate(45deg);
	transition: transform 0.2s;
	margin-top: -4px;
}
.tw-wrow[open] .tw-wrow__chev {
	transform: rotate(-135deg);
	margin-top: 4px;
}
.tw-wrow__detail {
	padding: 4px 16px 16px;
	border-top: 1px dashed var(--tw-line);
	animation: twFade 0.25s ease;
}
@keyframes twFade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}
.tw-wrow__desc {
	margin: 12px 0;
	color: var(--tw-ink-2);
}
.tw-range {
	position: relative;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--tw-line-2);
}
.tw-range i {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	min-width: 8px;
}
.tw-range em {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--tw-ink);
	transform: translate(-50%, -50%);
}
.tw-range--sm {
	height: 6px;
	width: 70px;
}

/* ==========================================================================
   10 NGÀY — xu hướng + bảng
   ========================================================================== */
.tw-trend {
	padding: 24px;
	border-radius: 26px;
	color: #fff;
	background: radial-gradient(circle at 90% 0%, rgba(56, 189, 248, 0.35), transparent 40%), linear-gradient(160deg, #1f1209, #0b2e59 60%, #13457e);
	box-shadow: var(--tw-shadow-lg);
}
.tw-trend__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.tw-trend__title {
	font-size: 1.7rem;
	font-weight: 800;
	color: #fff;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.tw-trend__title::before {
	font-size: 1.3rem;
}
.tw-trend__title--up::before {
	content: "↗";
	color: #fdba74;
}
.tw-trend__title--down::before {
	content: "↘";
	color: #7dd3fc;
}
.tw-trend__title--flat::before {
	content: "→";
	color: #a5f3fc;
}
.tw-trend__title small {
	font-size: 0.85rem;
	font-weight: 500;
	opacity: 0.8;
}
.tw-trend__stats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}
.tw-trend__stats > div {
	padding: 8px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.tw-trend__stats dt {
	font-size: 0.72rem;
	font-weight: 500;
	opacity: 0.75;
	margin: 0;
}
.tw-trend__stats dd {
	font-weight: 800;
	margin: 0;
}
.tw-trend__icons {
	display: grid;
	grid-template-columns: repeat(var(--n), 1fr);
	text-align: center;
	margin-bottom: 4px;
}
.tw-trend__icons div {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.95;
}
.tw-table-wrap {
	overflow-x: auto;
}
.tw-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9rem;
}
.tw-table thead th {
	position: sticky;
	top: 0;
	padding: 10px 12px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tw-muted);
	background: var(--tw-bg);
	text-align: left;
	white-space: nowrap;
}
.tw-table thead th:first-child {
	border-radius: 12px 0 0 12px;
}
.tw-table thead th:last-child {
	border-radius: 0 12px 12px 0;
}
.tw-table tbody th,
.tw-table tbody td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--tw-line-2);
	vertical-align: middle;
	white-space: nowrap;
}
.tw-table tbody tr:hover {
	background: #f6faff;
}
.tw-table tbody tr.is-weekend th b {
	color: var(--tw-brand);
}
.tw-table tbody th b {
	display: block;
	font-weight: 800;
}
.tw-table tbody th small,
.tw-table td small {
	color: var(--tw-muted);
	font-weight: 500;
}
.tw-table__wxin {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 150px;
	white-space: normal;
}
.tw-table__wx span {
	text-transform: capitalize;
	font-size: 0.85rem;
}
.tw-table__temp {
	white-space: nowrap;
}
.tw-table__temp > * {
	display: inline-block;
	vertical-align: middle;
}
.tw-table__temp > span:first-child {
	color: var(--tw-muted);
	font-weight: 700;
	width: 30px;
	text-align: right;
}
.tw-table__temp .tw-range {
	margin: 0 8px;
}

/* ==========================================================================
   15 NGÀY — bản đồ nhiệt
   ========================================================================== */
.tw-heat-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.tw-heat-legend {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-heat-legend i {
	display: block;
	width: 160px;
	height: 10px;
	border-radius: 999px;
}
.tw-heat {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.tw-heat__cell {
	--ink: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px 16px 12px;
	min-height: 210px;
	border-radius: 22px;
	color: var(--ink);
	background: var(--c1);
	background: linear-gradient(165deg, var(--c1) 35%, color-mix(in srgb, var(--c1) 78%, #2b1a10));
	box-shadow: var(--tw-shadow);
	overflow: hidden;
	transition: transform 0.18s;
}
.tw-heat__cell::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}
.tw-heat__cell:hover {
	transform: translateY(-3px) scale(1.01);
}
.tw-heat__cell.is-today {
	outline: 3px solid var(--tw-ink);
	outline-offset: 3px;
}
.tw-heat__cell header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.tw-heat__day {
	font-weight: 800;
}
.tw-heat__date {
	font-size: 0.8rem;
	opacity: 0.85;
}
.tw-heat__icon {
	position: absolute;
	right: 8px;
	top: 40px;
	z-index: 1;
}
.tw-heat__max {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 30px 0 2px;
}
.tw-heat__min {
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.9;
	margin: 0;
}
.tw-heat__desc {
	font-size: 0.8rem;
	margin: 6px 0 0;
	text-transform: capitalize;
	opacity: 0.95;
}
.tw-heat__cell footer {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.78rem;
	font-weight: 700;
}
.tw-weeks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.tw-weekcmp {
	padding: 16px;
	border-radius: 18px;
	background: var(--tw-bg);
}
.tw-weekcmp header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.tw-weekcmp header strong {
	font-size: 1.1rem;
	font-weight: 800;
}
.tw-weekcmp header span {
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-weekcmp__spark {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 70px;
	margin: 12px 0;
}
.tw-weekcmp__spark i {
	flex: 1;
	border-radius: 8px 8px 4px 4px;
}
.tw-weekcmp dl {
	margin: 0;
}
.tw-weekcmp dl > div {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-top: 1px solid var(--tw-line);
	font-size: 0.88rem;
}
.tw-weekcmp dt {
	font-weight: 500;
	color: var(--tw-muted);
}
.tw-weekcmp dd {
	font-weight: 700;
	margin: 0;
}

/* ==========================================================================
   20 NGÀY — dòng thời gian
   ========================================================================== */
.tw-film__scroll {
	display: flex;
	gap: 10px;
	scroll-snap-type: x mandatory;
}
.tw-frame {
	position: relative;
	flex: 0 0 104px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 12px 8px;
	border-radius: 18px;
	background: var(--tw-bg);
	scroll-snap-align: start;
}
.tw-frame.is-phase::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	border-radius: 2px;
	background: var(--tw-brand-100);
}
.tw-frame:first-child::before {
	display: none;
}
.tw-frame.is-today {
	background: linear-gradient(160deg, #1e3a5f, #3a6a9a);
	color: #fff;
}
.tw-frame__no {
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--tw-muted);
}
.tw-frame.is-today .tw-frame__no,
.tw-frame.is-today .tw-frame__date,
.tw-frame.is-today .tw-frame__min,
.tw-frame.is-today .tw-frame__rain {
	color: rgba(255, 255, 255, 0.85);
}
.tw-frame__day {
	font-weight: 800;
	font-size: 0.9rem;
}
.tw-frame__date {
	font-size: 0.75rem;
	color: var(--tw-muted);
}
.tw-thermo {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 14px;
	height: 90px;
	margin: 4px 0 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--tw-line);
}
.tw-thermo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	transform: translateX(-50%);
	background: var(--fill, #fff);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--tw-line);
}
.tw-thermo i {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	border-radius: 999px;
}
.tw-frame__max {
	font-size: 1.15rem;
	font-weight: 800;
}
.tw-frame__min {
	font-size: 0.8rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-frame__rain {
	font-size: 0.72rem;
	color: #1d4ed8;
	font-weight: 600;
}
.tw-phases {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.tw-phases::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: repeating-linear-gradient(var(--tw-brand-100) 0 6px, transparent 6px 12px);
}
.tw-phase {
	position: relative;
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 14px;
}
.tw-phase__dot {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, #3a6a9a, #1e3a5f);
}
.tw-phase.is-rainy .tw-phase__dot {
	background: linear-gradient(135deg, #60a5fa, #1d4ed8);
}
.tw-phase__body {
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--tw-bg);
}
.tw-phase__body header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.tw-phase__row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
}
.tw-phase__row dl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	flex: 1;
	margin: 0;
}
.tw-phase__row dt {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tw-muted);
	margin: 0;
}
.tw-phase__row dd {
	font-weight: 700;
	margin: 0;
}

/* ==========================================================================
   30 NGÀY — lịch tháng
   ========================================================================== */
.tw-cal {
	padding: 22px;
	border-radius: 26px;
	background: #fff;
	box-shadow: var(--tw-shadow);
}
.tw-cal__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.tw-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.tw-cal__wd {
	text-align: center;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--tw-muted);
	padding: 6px 0;
	letter-spacing: 0.04em;
}
.tw-cal__wd.is-weekend {
	color: var(--tw-brand);
}
.tw-cal__blank {
	border-radius: 16px;
	background: repeating-linear-gradient(135deg, var(--tw-line-2) 0 6px, transparent 6px 12px);
	opacity: 0.6;
}
.tw-cal__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 128px;
	padding: 8px 6px 12px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--tw-bg);
	background: color-mix(in srgb, var(--tint) 14%, #fff);
	border-top: 4px solid var(--tint);
	transition: transform 0.15s, box-shadow 0.15s;
}
.tw-cal__cell:hover {
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow);
	z-index: 1;
}
.tw-cal__cell.is-today {
	box-shadow: 0 0 0 2.5px var(--tw-ink);
}
.tw-cal__date {
	align-self: stretch;
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.tw-cal__date b {
	font-size: 1.05rem;
	font-weight: 800;
}
.tw-cal__cell.is-weekend .tw-cal__date b {
	color: var(--tw-brand);
}
.tw-cal__date small {
	font-size: 0.72rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-cal__date em {
	margin-left: auto;
	font-style: normal;
	font-size: 0.62rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--tw-ink);
	color: #fff;
}
.tw-cal__icon {
	margin: 2px 0;
}
.tw-cal__temp {
	display: flex;
	gap: 6px;
	align-items: baseline;
	font-size: 0.8rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-cal__temp b {
	font-size: 1rem;
	color: var(--tw-ink);
	font-weight: 800;
}
.tw-cal__mm {
	font-size: 0.7rem;
	font-weight: 700;
	color: #1d4ed8;
}
.tw-cal__rainbar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 5px;
	width: var(--rain);
	border-radius: 0 6px 6px 0;
	background: linear-gradient(90deg, #60a5fa, #1d4ed8);
}
.tw-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 14px;
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-cal__legend i {
	display: inline-block;
	width: 22px;
	height: 10px;
	border-radius: 4px;
	vertical-align: -1px;
	margin-right: 6px;
}
.tw-cal__lg-tint {
	background: linear-gradient(90deg, #1e40af, #0284c7 40%, #22d3ee 84%, #fbbf24 86%, #f97316);
}
.tw-cal__lg-rain {
	background: linear-gradient(90deg, #60a5fa, #1d4ed8);
}

/* ---------- Footer ---------- */
.tw-footer {
	position: relative;
	margin-top: 70px;
	padding: 34px 0 24px;
	background: linear-gradient(180deg, #2b1a10, #1f1209);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.92rem;
}
.tw-footer__wave {
	position: absolute;
	left: 0;
	right: 0;
	top: -58px;
	height: 60px;
	color: #2b1a10;
	line-height: 0;
}
.tw-footer__wave svg {
	width: 100%;
	height: 100%;
	display: block;
}
.tw-footer h6 {
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 12px;
}
.tw-footer p {
	margin: 0 0 10px;
	line-height: 1.6;
}
.tw-footer a {
	color: rgba(255, 255, 255, 0.85);
}
.tw-footer a:hover {
	color: #7dd3fc;
}
.tw-footer__logo {
	display: inline-block !important;
	padding: 8px 14px;
	border-radius: 16px;
	background: #fff;
	margin-bottom: 14px;
}
.tw-footer__logo img {
	width: 160px;
	height: auto;
}
.tw-footer__mail {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tw-footer__mail a {
	display: inline;
}
.tw-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tw-footer__menu li + li {
	margin-top: 8px;
}
.tw-footer__social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tw-footer__social a {
	display: grid !important;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.92);
	transition: transform 0.15s;
}
.tw-footer__social a:hover {
	transform: translateY(-2px);
}
.tw-footer__social img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.tw-footer__bottom {
	margin-top: 10px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Ghi đè style cũ cho các trang khác (trang chủ, tin tức, widget...)
   ========================================================================== */
.button-primary,
a.button-back-home {
	background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-600)) !important;
	color: #fff !important;
	border-radius: 999px !important;
}
.weather-main-title,
.weather-main-title a,
h2.weather-main-title a,
.title-main h2,
.title-main h3 {
	color: var(--tw-ink) !important;
	font-family: var(--tw-font);
}
.rank-math-breadcrumb a {
	color: var(--tw-brand-600);
}
.entry-content a {
	color: var(--tw-brand-600);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
	.tw-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
	.tw-glass {
		grid-template-columns: repeat(3, 1fr);
	}
	.tw-statgrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tw-wrow__sum {
		grid-template-columns: minmax(96px, 1.2fr) 40px 58px 34px minmax(60px, 2fr) 34px 16px;
		gap: 10px;
	}
}

@media (max-width: 991.98px) {
	.tw-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-side {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.tw-posters {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-poster {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}
	.tw-heat {
		grid-template-columns: repeat(3, 1fr);
	}
	.tw-kpis--5 {
		grid-template-columns: repeat(3, 1fr);
	}
	.tw-highlights {
		grid-template-columns: repeat(2, 1fr);
	}
	.tw-more__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.tw-hero__grid {
		grid-template-columns: 1fr auto;
	}
	.tw-hero__icon {
		width: 150px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--tw-radius: 18px;
	}
	.tw-header__inner {
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 0;
		min-height: 0;
	}
	.tw-header__logo img {
		width: 120px;
	}
	.tw-header__places {
		margin-left: auto;
	}
	.tw-header__search {
		order: 3;
		flex: 0 0 100%;
		max-width: none;
	}
	.tw-tabs__link {
		padding: 6px 12px;
	}
	.tw-tabs__sub {
		display: none;
	}
	:root {
		--tw-tabs-h: 58px;
	}
	.tw-pagehead__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 24px;
		padding-bottom: 26px;
	}
	.tw-hero {
		padding: 24px 0 22px;
	}
	.tw-hero__grid {
		grid-template-columns: 1fr;
	}
	.tw-hero__art {
		position: absolute;
		right: -6px;
		top: -14px;
		opacity: 0.95;
	}
	.tw-hero__icon {
		width: 88px;
	}
	.tw-hero__glow {
		width: 140px;
		height: 140px;
	}
	.tw-hero__badge {
		display: none;
	}
	.tw-hero__title {
		padding-right: 84px;
	}
	.tw-hero__temp {
		font-size: 4.6rem;
	}
	.tw-glass {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.tw-glass__item {
		padding: 10px 12px;
	}
	.tw-glass dd {
		font-size: 1.15rem;
	}
	.tw-card {
		padding: 18px 16px;
	}
	.tw-card__head {
		flex-wrap: wrap;
	}
	.tw-side {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-daytiles {
		grid-template-columns: repeat(2, 1fr);
	}
	.tw-kpis--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.tw-kpis--3 .tw-kpi {
		padding: 12px;
	}
	.tw-kpis--3 .tw-kpi__value {
		font-size: 1.3rem;
	}
	.tw-kpis--5 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.tw-kpis--5 .tw-kpi:first-child {
		grid-column: 1 / -1;
	}
	.tw-more__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tw-statgrid,
	.tw-statgrid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.tw-quad__item b {
		font-size: 1.05rem;
	}

	/* Theo giờ */
	.tw-timeline__list::before {
		left: 59px;
	}
	.tw-hour {
		grid-template-columns: 48px 24px minmax(0, 1fr);
	}
	.tw-hour__time {
		font-size: 0.8rem;
	}
	.tw-hour.is-now .tw-hour__time {
		font-size: 0.66rem;
		line-height: 1.1;
	}
	.tw-hour__stats dd {
		font-size: 0.78rem;
	}
	.tw-hour__stats .tw-windarrow {
		display: none;
	}
	.tw-hour__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.tw-hour__stats {
		grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr;
		gap: 6px;
	}

	/* 3 ngày */
	.tw-poster {
		display: flex;
	}
	.tw-poster__head {
		min-height: 210px;
	}

	/* 5 ngày */
	.tw-columns__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
	}
	.tw-columns__axis {
		display: none;
	}
	.tw-col {
		padding: 10px 2px 12px;
		border-radius: 14px;
	}
	.tw-col .tw-wicon {
		width: 40px;
	}
	.tw-col__day {
		font-size: 0.78rem;
		white-space: nowrap;
	}
	.tw-col__track {
		width: 22px;
		height: 170px;
	}
	.tw-col__max,
	.tw-col__min {
		font-size: 0.8rem;
	}
	.tw-col__wind {
		font-size: 0.68rem;
	}
	.tw-col__wind .tw-windarrow {
		display: none;
	}
	.tw-col .tw-pop {
		font-size: 0.7rem;
	}
	.tw-dtabs__summary {
		align-items: flex-start;
	}
	.tw-dtabs__summary .tw-wicon {
		width: 64px;
	}

	/* 7 ngày */
	.tw-wrow__sum {
		grid-template-columns: minmax(0, 1fr) 36px 30px minmax(48px, 1.1fr) 30px;
		gap: 8px;
		padding: 10px 12px;
	}
	.tw-wrow__sum .tw-wicon {
		width: 36px;
	}
	.tw-wrow__pop,
	.tw-wrow__chev {
		display: none;
	}
	.tw-hl {
		min-height: 130px;
		padding: 14px;
	}
	.tw-hl__icon {
		width: 44px;
	}
	.tw-hl__day {
		font-size: 1.1rem;
	}

	/* 10 ngày */
	.tw-trend {
		padding: 18px 14px;
		border-radius: 22px;
	}
	.tw-trend__title {
		font-size: 1.35rem;
	}
	.tw-trend__icons .tw-wicon {
		width: 26px;
	}
	.tw-trend__icons span {
		font-size: 0.62rem;
	}
	.tw-table-card .tw-table thead {
		display: none;
	}
	.tw-table-card .tw-table,
	.tw-table-card .tw-table tbody,
	.tw-table-card .tw-table tr {
		display: block;
	}
	.tw-table-card .tw-table tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px 10px;
		padding: 12px 4px;
		border-bottom: 1px solid var(--tw-line);
	}
	.tw-table-card .tw-table tbody th,
	.tw-table-card .tw-table tbody td {
		display: block;
		padding: 0;
		border: 0;
		white-space: normal;
		font-size: 0.85rem;
	}
	.tw-table-card .tw-table tbody th {
		grid-column: 1 / 2;
	}
	.tw-table-card .tw-table__wx {
		grid-column: 2 / 4;
	}
	.tw-table-card .tw-table__temp {
		grid-column: 1 / -1;
	}
	.tw-table-card .tw-table tbody td:not(.tw-table__wx):not(.tw-table__temp)::before {
		content: attr(data-label);
		display: block;
		font-size: 0.68rem;
		color: var(--tw-muted);
		font-weight: 500;
	}
	.tw-range--sm {
		width: 50%;
	}

	/* 15 ngày */
	.tw-heat {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.tw-heat__cell {
		min-height: 180px;
		padding: 12px;
		border-radius: 18px;
	}
	.tw-heat__icon {
		width: 48px;
	}
	.tw-heat__max {
		font-size: 2.1rem;
		margin-top: 24px;
	}
	.tw-weeks {
		grid-template-columns: 1fr;
	}
	.tw-heat-legend i {
		width: 100px;
	}

	/* 20 ngày */
	.tw-frame {
		flex-basis: 92px;
	}
	.tw-frame__no {
		display: none;
	}
	.tw-phase__row dd {
		font-size: 0.85rem;
		white-space: nowrap;
	}
	.tw-phase__row dt {
		white-space: nowrap;
		font-size: 0.66rem;
	}
	.tw-phase__body {
		padding: 10px 12px;
	}
	.tw-phase__row dl {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tw-phase__row .tw-wicon {
		display: none;
	}

	/* 30 ngày */
	.tw-cal {
		padding: 14px 10px;
		border-radius: 20px;
	}
	.tw-cal__grid {
		gap: 4px;
	}
	.tw-cal__cell {
		min-height: 86px;
		padding: 5px 2px 8px;
		border-radius: 10px;
		border-top-width: 3px;
	}
	.tw-cal__date {
		justify-content: center;
	}
	.tw-cal__date b {
		font-size: 0.85rem;
	}
	.tw-cal__date small,
	.tw-cal__date em,
	.tw-cal__mm,
	.tw-cal__temp span {
		display: none;
	}
	.tw-cal__icon {
		width: 30px;
	}
	.tw-cal__temp b {
		font-size: 0.82rem;
	}
	.tw-cal__wd {
		font-size: 0.7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-cloud,
	.tw-rain,
	.tw-hero__icon,
	.tw-hero__glow,
	.tw-dot {
		animation: none !important;
	}
}

/* Breadcrumb: mục cuối (style cũ để màu trắng nên bị ẩn trên nền sáng) */
.tw-crumbs .last,
.tw-crumbs span:last-child {
	color: var(--tw-ink-2) !important;
}
.tw-section {
	padding-top: 6px;
}

/* ==========================================================================
   TRANG TẠO WIDGET
   ========================================================================== */
.tw-pagehead--widget {
	--g1: #0b3d6b;
	--g2: #ea580c;
	--g3: #22d3ee;
}
.tw-btn--light {
	background: #fff;
	color: var(--tw-brand-700);
	margin-top: 4px;
}
.tw-btn--light:hover {
	color: var(--tw-brand-700);
}
.tw-builder {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.tw-builder__preview {
	position: sticky;
	top: 16px;
}
.tw-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.tw-step + .tw-step {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px dashed var(--tw-line);
}
.tw-step legend {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 12px;
	color: var(--tw-ink);
}
.tw-step__no {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tw-brand), #b4400e);
	color: #fff;
	font-size: 0.8rem;
}
.tw-step.is-off .tw-seg {
	opacity: 0.4;
	pointer-events: none;
}
.tw-hint {
	font-size: 0.8rem;
	color: var(--tw-muted);
	margin: 8px 0 0;
}
.tw-hint a {
	display: inline;
	color: var(--tw-brand);
}
.tw-wsearch {
	position: relative;
}
.tw-input {
	width: 100%;
	height: 46px;
	padding: 0 16px 0 44px;
	border-radius: 14px;
	border: 1.5px solid var(--tw-line);
	background: #fff;
	color: var(--tw-ink);
	font-size: 0.95rem;
}
.tw-input:focus {
	border-color: var(--tw-brand);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
}
.tw-wsearch .widget-search-results {
	display: none;
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow: auto;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--tw-shadow-lg);
}
.tw-wsearch .widget-search-results a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--tw-ink);
	font-size: 0.9rem;
}
.tw-wsearch .widget-search-results a:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-styles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.tw-style {
	margin: 0;
	cursor: pointer;
}
.tw-style input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tw-style__box {
	--a: var(--tw-brand);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 12px 8px 10px;
	border-radius: 16px;
	border: 1.5px solid var(--tw-line);
	background: #fff;
	color: #7f97b2;
	text-align: center;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tw-style__box b {
	font-size: 0.78rem;
	color: var(--tw-ink);
	line-height: 1.25;
}
.tw-style__box small {
	font-size: 0.68rem;
	line-height: 1.3;
	color: var(--tw-muted);
}
.tw-style:hover .tw-style__box {
	transform: translateY(-2px);
	border-color: var(--tw-brand-100);
}
.tw-style input:checked + .tw-style__box {
	border-color: var(--tw-brand);
	background: var(--tw-brand-50);
	box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.tw-style input:focus-visible + .tw-style__box {
	outline: 2px solid var(--tw-brand);
	outline-offset: 2px;
}
.tw-seg {
	display: inline-flex;
	padding: 4px;
	gap: 4px;
	border-radius: 14px;
	background: var(--tw-bg);
}
.tw-seg label {
	margin: 0;
	cursor: pointer;
}
.tw-seg input {
	position: absolute;
	opacity: 0;
}
.tw-seg span {
	display: block;
	padding: 8px 18px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--tw-ink-2);
}
.tw-seg input:checked + span {
	background: #fff;
	color: var(--tw-brand-700);
	box-shadow: var(--tw-shadow);
}
.tw-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.tw-preset {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px !important;
	border-radius: 999px;
	border: 1px solid var(--tw-line) !important;
	background: #fff !important;
	color: var(--tw-ink) !important;
	font-size: 0.82rem;
	font-weight: 600;
}
.tw-preset i {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--p1) 50%, var(--p2) 50%);
	box-shadow: inset 0 0 0 1px rgba(66, 32, 12, 0.15);
}
.tw-preset:hover {
	border-color: var(--tw-brand) !important;
}
.tw-colors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.tw-color {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 12px;
	background: var(--tw-bg);
	cursor: pointer;
}
.tw-color input {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	cursor: pointer;
}
.tw-color input::-webkit-color-swatch-wrapper {
	padding: 0;
}
.tw-color input::-webkit-color-swatch {
	border: 1px solid rgba(66, 32, 12, 0.15);
	border-radius: 10px;
}
.tw-color span {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tw-ink-2);
}
.tw-color code {
	display: block;
	font-size: 0.7rem;
	color: var(--tw-muted);
	background: none;
	padding: 0;
}
.tw-switch {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.tw-switch input {
	position: absolute;
	opacity: 0;
}
.tw-switch span {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: #cbd8e6;
	transition: background 0.15s;
	flex-shrink: 0;
}
.tw-switch span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s;
}
.tw-switch input:checked + span {
	background: var(--tw-brand);
}
.tw-switch input:checked + span::after {
	transform: translateX(18px);
}
.tw-range-row {
	margin: 4px 0 14px;
}
.tw-range-row label {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 4px;
}
.tw-range-row input {
	width: 100%;
	accent-color: var(--tw-brand);
}
.tw-stage {
	display: flex;
	justify-content: center;
	padding: 20px;
	min-height: 240px;
	border-radius: 16px;
	background: radial-gradient(circle, #f0dfcf 1px, transparent 1px) 0 0 / 14px 14px, var(--tw-bg);
}
.tw-stage iframe {
	display: block;
	border: 0;
	background: transparent;
	transition: height 0.2s, max-width 0.2s;
}
.tw-code {
	margin-top: 16px;
}
.tw-code__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.tw-code textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 14px;
	border: 0;
	background: #2b1a10;
	color: #ffe2c4;
	font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	resize: vertical;
}
#twCopy.is-done {
	background: linear-gradient(135deg, #16a34a, #15803d);
}
.tw-section-head {
	margin: 46px 0 18px;
}
.tw-section-head p {
	margin: 6px 0 0;
	color: var(--tw-ink-2);
}
.tw-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}
.tw-gcard {
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	overflow: hidden;
}
.tw-gcard__frame {
	padding: 14px;
	background: radial-gradient(circle, #f0dfcf 1px, transparent 1px) 0 0 / 14px 14px, var(--tw-bg);
}
.tw-gcard__frame iframe {
	display: block;
	width: 100%;
	border: 0;
}
.tw-gcard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 16px;
}
.tw-gcard__body b {
	display: block;
	font-weight: 800;
}
.tw-gcard__body small {
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-howto {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	counter-reset: none;
}
.tw-howto li {
	position: relative;
	padding: 18px 16px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--tw-shadow);
}
.tw-howto li > span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--tw-brand), #22d3ee);
	color: #fff;
	font-weight: 800;
}
.tw-howto b {
	display: block;
	margin-bottom: 4px;
}
.tw-howto p {
	margin: 0;
	font-size: 0.86rem;
	color: var(--tw-ink-2);
	line-height: 1.5;
}
.tw-platforms h3 {
	font-size: 0.98rem;
	font-weight: 800;
	margin: 6px 0 8px;
}
.tw-platforms ol {
	margin: 0 0 14px 20px;
	padding: 0;
	list-style: decimal;
}
.tw-platforms li {
	margin: 6px 0;
	line-height: 1.55;
}
.tw-platforms code,
.tw-faq code {
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
	font-size: 0.85em;
}
.tw-pre {
	margin: 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: #2b1a10;
	color: #ffe2c4;
	font-size: 0.82rem;
}
.tw-pre code {
	background: none;
	color: inherit;
	padding: 0;
}
.tw-faq {
	margin-top: 30px;
}
.tw-faq .tw-h2 {
	margin-bottom: 12px;
}
.tw-faq details {
	margin-bottom: 8px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--tw-shadow);
}
.tw-faq summary {
	position: relative;
	padding: 14px 44px 14px 18px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.tw-faq summary::-webkit-details-marker {
	display: none;
}
.tw-faq summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--tw-brand);
}
.tw-faq details[open] summary::after {
	content: "–";
}
.tw-faq details p {
	margin: 0;
	padding: 0 18px 16px;
	color: var(--tw-ink-2);
}
.tw-wcontent {
	margin-top: 30px;
}

@media (max-width: 1199.98px) {
	.tw-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tw-howto {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 991.98px) {
	.tw-builder {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-builder__preview {
		position: static;
	}
	.tw-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767.98px) {
	.tw-styles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tw-colors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tw-howto {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.tw-stage {
		padding: 12px;
	}
}

.tw-gcard--wide {
	grid-column: span 2;
}
.tw-gcard--cta {
	grid-column: span 2;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	min-height: 220px;
	padding: 28px;
	color: #fff;
	background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.25), transparent 45%), linear-gradient(135deg, #0b3d6b, #ea580c 60%, #22d3ee);
}
.tw-gcard--cta:hover {
	color: #fff;
}
.tw-gcard--cta b {
	font-size: 1.35rem;
	font-weight: 800;
}
.tw-gcard--cta span {
	max-width: 420px;
	opacity: 0.95;
}
.tw-gcard--cta .tw-btn {
	opacity: 1;
}
@media (max-width: 767.98px) {
	.tw-gcard--wide,
	.tw-gcard--cta {
		grid-column: auto;
	}
}
/* Logo chân trang: logo mới đã có phiên bản nền tối, bỏ nền trắng */
.tw-footer__logo {
	padding: 0;
	background: none;
	border-radius: 0;
}
.tw-footer__logo img {
	width: 220px;
}

/* ==========================================================================
   LỊCH VẠN NIÊN (trang chủ)
   ========================================================================== */
.tw-lunar {
	margin-bottom: 25px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	overflow: hidden;
	font-family: var(--tw-font);
	color: var(--tw-ink);
}
.tw-lunar__fallback {
	padding: 20px;
	margin: 0;
}
.tw-lunar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	background: linear-gradient(120deg, #b4400e, #ea580c 60%, #38bdf8);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
}
.tw-lunar__nav button {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	font-size: 1.2rem;
	line-height: 1;
}
.tw-lunar__nav button:hover {
	background: rgba(255, 255, 255, 0.32) !important;
}
.tw-lunar__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.tw-lunar__solar,
.tw-lunar__moon {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 8px 12px;
	text-align: center;
}
.tw-lunar__solar {
	background: linear-gradient(180deg, #fff1e4, #fff);
}
.tw-lunar__moon {
	background: linear-gradient(180deg, #fff1e6, #fff);
	border-left: 1px dashed var(--tw-line);
}
.tw-lunar__main small {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tw-muted);
}
.tw-lunar__main b {
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}
.tw-lunar__solar b {
	color: var(--tw-brand-600);
}
.tw-lunar__moon b {
	color: #c2410c;
}
.tw-lunar__main span {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tw-ink-2);
}
.tw-lunar__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0;
	padding: 12px 12px 4px;
}
.tw-lunar__list > div {
	padding: 7px 10px;
	border-radius: 10px;
	background: var(--tw-bg);
}
.tw-lunar__list dt {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--tw-muted);
	margin: 0;
}
.tw-lunar__list dd {
	font-size: 0.88rem;
	font-weight: 700;
	margin: 0;
}
.tw-lunar__label {
	margin: 8px 12px 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tw-muted);
}
.tw-lunar__hours {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0 12px 14px;
	list-style: none;
}
.tw-lunar__hours li {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 4px;
	border-radius: 10px;
	background: #fff8e6;
	border: 1px solid #fde7b0;
}
.tw-lunar__hours b {
	font-size: 0.82rem;
	color: #92400e;
}
.tw-lunar__hours span {
	font-size: 0.72rem;
	color: var(--tw-ink-2);
}
.tw-lunar__today {
	display: block;
	width: calc(100% - 24px);
	margin: 0 12px 14px;
	padding: 8px;
	border-radius: 999px;
	background: var(--tw-brand-50) !important;
	color: var(--tw-brand-700) !important;
	font-weight: 700;
	font-size: 0.85rem;
}

/* ==========================================================================
   TIỆN ÍCH THỜI TIẾT (có mưa không, mặc gì, UV, nồm, mặt trời, bản đồ mưa)
   ========================================================================== */
.tw-pagehead--tool-rain { --g1: #1e3a8a; --g2: #2563eb; --g3: #60a5fa; }
.tw-pagehead--tool-outfit { --g1: #0e7490; --g2: #0891b2; --g3: #67e8f9; }
.tw-pagehead--tool-uv { --g1: #b45309; --g2: #f59e0b; --g3: #fcd34d; }
.tw-pagehead--tool-nom { --g1: #134e4a; --g2: #0d9488; --g3: #5eead4; }
.tw-pagehead--tool-sun { --g1: #9a3412; --g2: #ea580c; --g3: #fdba74; }
.tw-pagehead--tool-map { --g1: #2b1a10; --g2: #1d4ed8; --g3: #38bdf8; }

.tw-tools-top {
	margin-top: 16px;
}
.tw-tools .tw-h2 {
	margin-bottom: 12px;
}
.tw-tools__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}
.tw-tool {
	--tc: var(--tw-brand);
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--tw-line);
	color: var(--tw-ink);
	font-weight: 700;
	font-size: 0.88rem;
	line-height: 1.25;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tw-tool svg {
	flex-shrink: 0;
	padding: 7px;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	color: var(--tc);
	background: color-mix(in srgb, var(--tc) 12%, #fff);
}
.tw-tool:hover {
	color: var(--tw-ink);
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow);
}
.tw-tool.is-active {
	border-color: var(--tc);
	background: color-mix(in srgb, var(--tc) 8%, #fff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 18%, transparent);
}
.tw-tool--rain { --tc: #2563eb; }
.tw-tool--outfit { --tc: #0891b2; }
.tw-tool--uv { --tc: #d97706; }
.tw-tool--nom { --tc: #0d9488; }
.tw-tool--sun { --tc: #ea580c; }
.tw-tool--map { --tc: #1d4ed8; }
.tw-more .tw-tools {
	margin-bottom: 22px;
}

/* Có mưa không */
.tw-answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.tw-answer {
	--a: #16a34a;
	position: relative;
	padding: 20px 22px;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	border-top: 6px solid var(--a);
	overflow: hidden;
}
.tw-answer--yes { --a: #2563eb; }
.tw-answer--maybe { --a: #0ea5e9; }
.tw-answer--no { --a: #16a34a; }
.tw-answer__q {
	margin: 0;
	font-weight: 700;
	color: var(--tw-ink-2);
}
.tw-answer__q small {
	display: block;
	font-weight: 500;
	color: var(--tw-muted);
}
.tw-answer__a {
	margin: 4px 0 6px;
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--a);
}
.tw-answer__why {
	margin: 0;
	color: var(--tw-ink-2);
}
.tw-windows {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.tw-windows li {
	display: flex;
	flex-direction: column;
	padding: 6px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--a) 10%, #fff);
}
.tw-windows b {
	font-size: 0.92rem;
	color: var(--a);
}
.tw-windows span {
	font-size: 0.75rem;
	color: var(--tw-ink-2);
}
.tw-answer__tip {
	display: inline-block;
	margin-top: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #fff;
	background: var(--a);
}
.tw-raingrid {
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	gap: 3px;
}
.tw-raingrid--12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 6px;
}
.tw-raingrid__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-top: 2px;
}
.tw-raingrid__cell.is-midnight {
	box-shadow: -2px 0 0 var(--tw-line);
}
.tw-raingrid__pct {
	height: 14px;
	font-size: 0.66rem;
	font-weight: 700;
	color: #1d4ed8;
}
.tw-raingrid__bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 110px;
	border-radius: 6px;
	background: var(--tw-line-2);
	overflow: hidden;
}
.tw-raingrid__bar i {
	display: block;
	width: 100%;
	background: linear-gradient(#60a5fa, #1d4ed8);
	border-radius: 6px;
}
.tw-raingrid__h {
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--tw-muted);
}
.tw-rainweek {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tw-rainweek li {
	--a: #16a34a;
	display: grid;
	grid-template-columns: minmax(110px, 1fr) 40px minmax(110px, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	border-radius: 14px;
	background: var(--tw-bg);
	border-left: 4px solid var(--a);
}
.tw-rainweek li.is-yes { --a: #2563eb; }
.tw-rainweek li.is-maybe { --a: #0ea5e9; }
.tw-rainweek__day b { display: block; }
.tw-rainweek__day small { color: var(--tw-muted); }
.tw-rainweek__v { font-weight: 800; color: var(--a); }
.tw-rainweek__n { font-size: 0.85rem; color: var(--tw-ink-2); text-align: right; }
.tw-prose p { margin: 10px 0 0; color: var(--tw-ink-2); line-height: 1.65; }
.tw-prose ul { margin: 10px 0 0 20px; padding: 0; list-style: disc; color: var(--tw-ink-2); }
.tw-prose li { margin: 4px 0; }
.tw-table.tw-table--plain td, .tw-table.tw-table--plain th { white-space: normal; }

/* Mặc gì */
.tw-outfit__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.tw-look {
	--l: #f59e0b;
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	border-radius: 18px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--l) 12%, #fff), #fff 55%);
	border: 1px solid color-mix(in srgb, var(--l) 25%, #fff);
}
.tw-look--day { --l: #0ea5e9; }
.tw-look--eve { --l: #6366f1; }
.tw-look.is-passed { opacity: 0.55; }
.tw-look header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tw-look header b { display: block; font-weight: 800; }
.tw-look header small { color: var(--tw-muted); font-size: 0.76rem; }
.tw-look__temp {
	margin: 4px 0 10px;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.1;
}
.tw-look__temp span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tw-ink-2);
}
.tw-look__items {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tw-look__items li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 0 var(--tw-line);
	font-size: 0.88rem;
	font-weight: 600;
}
.tw-look__items li span { font-size: 1.15rem; }
.tw-look__meta {
	margin: 10px 0 0;
	font-size: 0.75rem;
	color: var(--tw-muted);
}

/* UV */
.tw-uvhero {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 22px 24px;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--tw-shadow);
	border-top: 6px solid var(--uv);
}
.tw-gauge { position: relative; }
.tw-gauge svg { width: 100%; height: auto; display: block; }
.tw-gauge__val {
	margin-top: 4px;
	text-align: center;
}
.tw-gauge__val b { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--uv) 80%, #2b1a10); }
.tw-gauge__val span { font-size: 0.75rem; color: var(--tw-muted); font-weight: 600; }
.tw-uvhero__lvl { margin: 0; font-size: 2rem; font-weight: 800; color: color-mix(in srgb, var(--uv) 80%, #2b1a10); }
.tw-uvhero__text > p { margin: 4px 0 12px; color: var(--tw-ink-2); }
.tw-uvhero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.tw-uvhero__facts > div { padding: 10px 12px; border-radius: 12px; background: var(--tw-bg); }
.tw-uvhero__facts dt { font-size: 0.72rem; font-weight: 500; color: var(--tw-muted); margin: 0; }
.tw-uvhero__facts dd { font-weight: 800; margin: 0; }
.tw-uvbars {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding: 20px 0 4px;
}
.tw-uvbars__col {
	position: relative;
	flex: 1 0 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.tw-uvbars__col.is-newday { margin-left: 10px; box-shadow: -6px 0 0 -4px var(--tw-line); }
.tw-uvbars__day {
	position: absolute;
	top: -20px;
	left: 0;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--tw-brand-700);
	white-space: nowrap;
}
.tw-uvbars__v { font-size: 0.72rem; font-weight: 800; }
.tw-uvbars__bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: 26px;
	height: 120px;
	border-radius: 8px;
	background: var(--tw-line-2);
	overflow: hidden;
}
.tw-uvbars__bar i { display: block; width: 100%; border-radius: 8px; }
.tw-uvbars__h { font-size: 0.68rem; color: var(--tw-muted); font-weight: 600; }
.tw-uvweek {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.tw-uvweek__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 4px;
	border-radius: 14px;
	background: var(--tw-bg);
	text-align: center;
}
.tw-uvweek__day small { font-size: 0.72rem; color: var(--tw-muted); }
.tw-uvweek__badge {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
}
.tw-uvscale { list-style: none !important; margin: 10px 0 0 !important; display: grid; gap: 6px; }
.tw-uvscale li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--c) 9%, #fff);
}
.tw-uvscale b {
	display: grid;
	place-items: center;
	height: 32px;
	border-radius: 10px;
	background: var(--c);
	color: #fff;
}
.tw-uvscale strong { color: color-mix(in srgb, var(--c) 75%, #2b1a10); }

/* Nồm */
.tw-nomhero {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	padding: 22px 24px;
	border-radius: 24px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 60%);
	box-shadow: var(--tw-shadow);
}
.tw-nomhero__ring {
	--p: 0;
	display: grid;
	place-items: center;
	align-content: center;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(#fff 60%, transparent 61%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--tw-line-2) 0);
}
.tw-nomhero__ring b { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--c); }
.tw-nomhero__ring span { font-size: 0.8rem; color: var(--tw-muted); font-weight: 600; }
.tw-nomhero__lvl { margin: 2px 0 6px; font-size: 2rem; font-weight: 800; color: var(--c); }
.tw-nomhero__why { margin: 0; color: var(--tw-ink-2); }
.tw-legend span[style]::before { background: var(--l); }
.tw-nomstrip {
	display: grid;
	grid-template-columns: repeat(48, minmax(0, 1fr));
	gap: 2px;
	height: 56px;
}
.tw-nomstrip__c { border-radius: 4px; }
.tw-nomstrip__c.is-midnight { box-shadow: -2px 0 0 var(--tw-ink); }
.tw-nomstrip__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.72rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-nomweek {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.tw-nomweek__d {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 4px;
	border-radius: 14px;
	background: var(--tw-bg);
	text-align: center;
}
.tw-nomweek__d small { font-size: 0.72rem; color: var(--tw-ink-2); }
.tw-nomweek__d .tw-muted { color: var(--tw-muted); }
.tw-nomweek__dot {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
}

/* Mặt trời */
.tw-sunhero {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.tw-sunhero__item {
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
	border-radius: 20px;
	color: #fff;
	box-shadow: var(--tw-shadow);
}
.tw-sunhero__item span { font-size: 0.8rem; opacity: 0.9; font-weight: 600; }
.tw-sunhero__item b { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.tw-sunhero__item small { font-size: 0.75rem; opacity: 0.9; }
.tw-sunhero__item--rise { background: linear-gradient(150deg, #fb923c, #f59e0b); }
.tw-sunhero__item--noon { background: linear-gradient(150deg, #38bdf8, #ea580c); }
.tw-sunhero__item--set { background: linear-gradient(150deg, #f43f5e, #7c3aed); }
.tw-sunhero__item--len { background: linear-gradient(150deg, #2b1a10, #1d4ed8); }
.tw-sunhero__item--len b { font-size: 1.35rem; }
.tw-daybar {
	position: relative;
	display: flex;
	height: 40px;
	border-radius: 12px;
	overflow: visible;
	margin-top: 22px;
}
.tw-daybar__s:first-child { border-radius: 12px 0 0 12px; }
.tw-daybar__s:last-of-type { border-radius: 0 12px 12px 0; }
.tw-daybar__s--night { background: #2b1a10; }
.tw-daybar__s--blue { background: #3b5bdb; }
.tw-daybar__s--gold { background: #f59e0b; }
.tw-daybar__s--day { background: linear-gradient(90deg, #7dd3fc, #38bdf8, #7dd3fc); }
.tw-daybar__now {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 3px;
	background: #e11d48;
}
.tw-daybar__now em {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 800;
	color: #e11d48;
	white-space: nowrap;
}
.tw-daybar__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.72rem;
	color: var(--tw-muted);
	font-weight: 600;
}
.tw-golden {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
}
.tw-golden__i {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-radius: 14px;
	border-left: 4px solid;
	background: var(--tw-bg);
}
.tw-golden__i--gold { border-color: #f59e0b; }
.tw-golden__i--blue { border-color: #3b5bdb; }
.tw-golden__i b { font-size: 0.8rem; }
.tw-golden__i span { font-weight: 800; }
.tw-moon {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}
.tw-moon__disc {
	position: relative;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: #1e293b;
	overflow: hidden;
	box-shadow: 0 0 0 6px #e2e8f0, 0 10px 30px -10px rgba(66, 32, 12, 0.5);
}
.tw-moon__disc i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #fffbe6, #fde68a);
	/* Trăng đầu tháng sáng phía phải, cuối tháng sáng phía trái (Bắc bán cầu) */
	clip-path: inset(0 0 0 calc(100% - var(--lit)));
}
.tw-moon__disc[style*="--dir:-1"] i {
	clip-path: inset(0 calc(100% - var(--lit)) 0 0);
}
.tw-moon__name { margin: 4px 0 10px; font-weight: 700; color: var(--tw-ink-2); }
.tw-statgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; margin: 0; }

/* Bản đồ mưa */
.tw-map__frame {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--tw-bg);
	aspect-ratio: 16 / 10;
}
.tw-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.tw-map__btn {
	padding: 7px 14px !important;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--tw-ink-2) !important;
}
.tw-map__btn.is-on {
	background: #fff !important;
	color: var(--tw-brand-700) !important;
	box-shadow: var(--tw-shadow);
}
.tw-map__verdict {
	--a: #16a34a;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--a) 10%, #fff);
	color: var(--tw-ink-2);
}
.tw-map__verdict b { color: var(--a); }

@media (max-width: 1199.98px) {
	.tw-tools__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.tw-outfit__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
	.tw-tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tw-tool { padding: 10px; font-size: 0.82rem; }
	.tw-answers { grid-template-columns: minmax(0, 1fr); }
	.tw-answer__a { font-size: 1.9rem; }
	.tw-raingrid { gap: 1px; }
	.tw-raingrid__pct { font-size: 0.55rem; }
	.tw-raingrid__h { font-size: 0.58rem; }
	.tw-raingrid__bar { height: 90px; border-radius: 3px; }
	.tw-rainweek li { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }
	.tw-rainweek__n { grid-column: 1 / -1; text-align: left; }
	.tw-uvhero, .tw-nomhero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.tw-uvhero .tw-gauge { width: 220px; }
	.tw-uvhero__facts { grid-template-columns: minmax(0, 1fr); text-align: left; width: 100%; }
	.tw-uvweek, .tw-nomweek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tw-sunhero, .tw-golden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-sunhero__item b { font-size: 1.6rem; }
	.tw-moon { grid-template-columns: 80px minmax(0, 1fr); }
	.tw-moon__disc { width: 80px; height: 80px; }
	.tw-map__frame { aspect-ratio: 3 / 4; }
	.tw-map .tw-card__head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   TRANG 404
   ========================================================================== */
.tw-404__hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(165deg, #9a3412 0%, #ea580c 55%, #5cc3f2 100%);
	padding: 56px 0 64px;
}
.tw-404__sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.tw-404__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: center;
}
.tw-404__art svg {
	width: 100%;
	height: auto;
	max-width: 420px;
	display: block;
	margin: 0 auto;
	overflow: visible;
}
.tw-404__cloud {
	animation: twFloat 5s ease-in-out infinite;
}
.tw-404__sun {
	animation: twGlow 6s ease-in-out infinite;
	transform-origin: 250px 70px;
}
.tw-404__drops path {
	animation: tw404drop 1.2s linear infinite;
}
.tw-404__drops path:nth-child(2) { animation-delay: 0.4s; }
.tw-404__drops path:nth-child(3) { animation-delay: 0.8s; }
@keyframes tw404drop {
	0% { opacity: 0; transform: translateY(-8px); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(14px); }
}
.tw-404__text h1 {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 12px;
}
.tw-404__text > p {
	font-size: 1.05rem;
	opacity: 0.95;
	margin: 0 0 18px;
	max-width: 560px;
}
.tw-404__guess {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-weight: 600;
}
.tw-404__guess .tw-btn { margin: 0; }
.tw-404__search {
	position: relative;
	max-width: 560px;
}
.tw-404__search svg {
	position: absolute;
	left: 18px;
	top: 16px;
	color: var(--tw-muted);
}
.tw-404__search input {
	width: 100%;
	height: 54px;
	padding: 0 18px 0 50px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	color: var(--tw-ink);
	font-size: 1rem;
	box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.45);
}
.tw-404__search input:focus {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 16px 40px -18px rgba(0, 0, 0, 0.45);
}
.tw-404__results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 300px;
	overflow: auto;
	padding: 6px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--tw-shadow-lg);
}
.tw-404__results a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--tw-ink);
}
.tw-404__results a:hover {
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
}
.tw-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
.tw-btn--glass {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
}
.tw-btn--glass:hover {
	background: rgba(255, 255, 255, 0.26);
	box-shadow: none;
}
.tw-404__more {
	display: grid;
	gap: 20px;
	margin-top: -28px;
	position: relative;
	padding-bottom: 20px;
}
.tw-404__block .tw-h2 {
	margin-bottom: 14px;
}
.tw-404__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tw-404__chips a {
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--tw-brand-50);
	color: var(--tw-brand-700);
	font-weight: 700;
	font-size: 0.88rem;
}
.tw-404__chips a:hover {
	background: var(--tw-brand-100);
}
.tw-404__places {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.tw-404__places a,
.tw-404__links a {
	display: flex !important;
	flex-direction: column;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid var(--tw-line);
	color: var(--tw-ink);
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.tw-404__places a:hover,
.tw-404__links a:hover {
	color: var(--tw-ink);
	transform: translateY(-2px);
	border-color: var(--tw-brand-100);
	box-shadow: var(--tw-shadow);
}
.tw-404__places span,
.tw-404__links span {
	font-size: 0.8rem;
	color: var(--tw-muted);
}
.tw-404__places span {
	color: var(--tw-brand);
	font-weight: 600;
}
.tw-404__links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 767.98px) {
	.tw-404__hero { padding: 28px 0 54px; }
	.tw-404__inner { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; }
	.tw-404__art svg { max-width: 240px; }
	.tw-404__places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-404__links { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   TIỆN ÍCH MỚI: AQI, BẦU TRỜI ĐÊM + TRANG TOÀN QUỐC (vệ tinh, bão, nhiệt độ,
   so sánh, lịch âm)
   ========================================================================== */
.tw-tools__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-tools--site .tw-tools__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-tool--aqi { --tc: #16a34a; }
.tw-tool--night { --tc: #4338ca; }
.tw-tool--site { --tc: #9a3412; }
.tw-pagehead--tool-aqi { --g1: #14532d; --g2: #15803d; --g3: #4ade80; }
.tw-pagehead--tool-night { --g1: #0f0c29; --g2: #312e81; --g3: #6366f1; }
.tw-pagehead--satellite { --g1: #020617; --g2: #1e3a8a; --g3: #60a5fa; }
.tw-pagehead--storm { --g1: #172554; --g2: #334155; --g3: #94a3b8; }
.tw-pagehead--temp { --g1: #9a3412; --g2: #ea580c; --g3: #38bdf8; }
.tw-pagehead--compare { --g1: #9a3412; --g2: #ea580c; --g3: #f97316; }
.tw-pagehead--lunar { --g1: #7f1d1d; --g2: #b91c1c; --g3: #fbbf24; }
.tw-sitepage { padding-top: 18px; padding-bottom: 30px; }
.tw-sitepage .tw-card { margin-bottom: 18px; }
.tw-h3 { margin: 16px 0 0; font-size: 1rem; font-weight: 700; color: var(--tw-ink); }
.tw-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tw-checklist li { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: var(--tw-brand-50); color: var(--tw-ink-2); }
.tw-checklist li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 14px; height: 8px; border-left: 3px solid var(--tw-brand); border-bottom: 3px solid var(--tw-brand); transform: rotate(-45deg); }

/* ---------- Bão ---------- */
.tw-stormgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tw-alert { border-left: 6px solid #dc2626; }
.tw-alert > .tw-h2 { color: #b91c1c; }
.tw-beaufort tbody tr { --c: color-mix(in srgb, #dc2626 calc(var(--lv) * 14%), #0ea5e9); }
.tw-beaufort__lv {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--c);
	color: #fff;
	font-weight: 700;
	font-size: 0.82rem;
	white-space: nowrap;
}

/* ---------- Nhiệt độ cả nước ---------- */
.tw-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
a.tw-kpi { color: var(--tw-ink); transition: transform 0.15s; }
a.tw-kpi:hover { color: var(--tw-ink); transform: translateY(-2px); }
.tw-sortbtns { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--tw-bg); }
.tw-sortbtns button { border: 0; background: transparent; cursor: pointer; }
.tw-rank { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tw-rank li + li { border-top: 1px solid var(--tw-line-2); }
.tw-rank a {
	display: grid !important;
	grid-template-columns: 34px minmax(0, 190px) 34px minmax(0, 1fr) 60px 100px;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border-radius: 12px;
	color: var(--tw-ink);
}
.tw-rank a:hover { background: var(--tw-brand-50); color: var(--tw-ink); }
.tw-rank__no {
	width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tw-bg); font-weight: 700; font-size: 0.8rem; color: var(--tw-ink-2);
}
.tw-rank li:nth-child(-n+3) .tw-rank__no { background: var(--tw-warm); color: #fff; }
.tw-rank__name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-rank__name small { color: var(--tw-muted); font-size: 0.75rem; }
.tw-rank__bar { height: 10px; border-radius: 999px; background: var(--tw-line-2); overflow: hidden; }
.tw-rank__bar i { display: block; height: 100%; border-radius: inherit; }
.tw-rank__t { font-size: 1.15rem; font-weight: 800; text-align: right; }
.tw-rank__hl { font-size: 0.8rem; color: var(--tw-muted); text-align: right; }
.tw-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tw-region { border: 1px solid var(--tw-line); border-radius: 16px; overflow: hidden; }
.tw-region header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--tw-brand-50); }
.tw-region header span { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.tw-region ul { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow: auto; }
.tw-region li a { display: flex !important; justify-content: space-between; padding: 6px 8px; border-radius: 8px; color: var(--tw-ink-2); font-size: 0.9rem; }
.tw-region li a:hover { background: var(--tw-bg); color: var(--tw-ink); }

/* ---------- So sánh ---------- */
.tw-cmpform { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.tw-cmpform__f { position: relative; }
.tw-cmpform__f label { display: block; margin-bottom: 6px; font-size: 0.82rem; font-weight: 700; color: var(--tw-muted); }
.tw-cmpform__f .tw-input { width: 100%; }
.tw-cmpform__vs {
	align-self: end;
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--tw-brand), var(--tw-warm));
	color: #fff; font-weight: 800; font-size: 0.85rem;
}
.tw-cmpform .tw-btn { height: 46px; }
.tw-cmpform .tw-404__results { top: calc(100% + 4px); }
.tw-cmphero { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.tw-cmphero__c {
	position: relative;
	display: flex !important;
	flex-direction: column;
	min-height: 190px;
	padding: 22px 24px;
	border-radius: 22px;
	color: #fff;
	overflow: hidden;
	box-shadow: var(--tw-shadow);
}
.tw-cmphero__c--a { background: linear-gradient(135deg, #9a3412, #ea580c 60%, #38bdf8); }
.tw-cmphero__c--b { background: linear-gradient(135deg, #9a3412, #ea580c 60%, #fdba74); }
.tw-cmphero__c:hover { color: #fff; transform: translateY(-2px); }
.tw-cmphero__c img { position: absolute; right: 14px; bottom: 10px; width: 96px; opacity: 0.95; }
.tw-cmphero__name { font-weight: 700; opacity: 0.92; }
.tw-cmphero__t { font-size: 3.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.tw-cmphero__d { text-transform: capitalize; opacity: 0.9; }
.tw-cmphero__diff {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	max-width: 46%;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: var(--tw-ink);
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	box-shadow: var(--tw-shadow-lg);
}
.tw-cmptable th[scope="row"] { font-weight: 600; color: var(--tw-ink-2); }
.tw-cmptable td { text-align: center; }
.tw-cmptable td.is-more { font-weight: 800; color: var(--tw-brand-700); background: var(--tw-brand-50); }
.tw-cmpdays { margin-top: 14px; }
.tw-cmpdays__r { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--tw-line-2); }
.tw-cmpdays__r small { color: var(--tw-muted); font-weight: 500; }
.tw-cmpdays__r > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }

/* ---------- Lịch âm (trang) ---------- */
.tw-lunarpage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tw-lmonth__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; text-align: center; }
.tw-lmonth__head b { display: block; font-size: 1.25rem; }
.tw-lmonth__head small { color: var(--tw-muted); }
.tw-lmonth__head button {
	width: 40px; height: 40px; border: 0; border-radius: 12px;
	background: var(--tw-brand-50); color: var(--tw-brand-700);
	font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.tw-lmonth__head button:hover { background: var(--tw-brand-100); }
.tw-lmonth__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tw-lmonth__wd { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--tw-muted); padding: 4px 0; }
.tw-lmonth__wd.is-we { color: #dc2626; }
.tw-lmonth__d {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 6px 2px;
	border: 1px solid var(--tw-line-2);
	border-radius: 12px;
	background: #fff;
	color: var(--tw-ink);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.tw-lmonth__d:hover { border-color: var(--tw-brand-100); background: var(--tw-brand-50); }
.tw-lmonth__d b { font-size: 1.15rem; line-height: 1.1; }
.tw-lmonth__d small { font-size: 0.72rem; color: var(--tw-muted); }
.tw-lmonth__d.is-we b { color: #dc2626; }
.tw-lmonth__d.is-moon small { color: #b91c1c; font-weight: 700; }
.tw-lmonth__d.is-holiday { background: #fff7ed; border-color: #fed7aa; }
.tw-lmonth__d i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #ea580c; }
.tw-lmonth__d.is-today { background: var(--tw-brand); border-color: var(--tw-brand); }
.tw-lmonth__d.is-today b, .tw-lmonth__d.is-today small { color: #fff; }
.tw-lmonth__d.is-picked { box-shadow: 0 0 0 3px var(--tw-brand-100); border-color: var(--tw-brand); }
.tw-lmonth__events { list-style: none; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff7ed; display: grid; gap: 6px; }
.tw-lmonth__events b { color: #c2410c; margin-right: 6px; }
.tw-lmonth__events small { color: var(--tw-muted); }
.tw-lunarpage .tw-lunar { margin-bottom: 18px; }

/* ---------- Chất lượng không khí ---------- */
.tw-aqihero {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	margin-bottom: 18px;
	padding: 24px;
	border-radius: 22px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--aqc) 14%, #fff), #fff 70%);
	box-shadow: var(--tw-shadow);
	border-top: 6px solid var(--aqc);
}
.tw-aqihero__ring {
	width: 190px; height: 190px; border-radius: 50%;
	display: grid; place-items: center;
	background: conic-gradient(var(--aqc) calc(var(--p) * 1%), var(--tw-line-2) 0);
}
.tw-aqihero__ring > div {
	width: 150px; height: 150px; border-radius: 50%;
	background: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	box-shadow: inset 0 2px 10px rgba(66, 32, 12, 0.08);
}
.tw-aqihero__ring b { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--aqc); }
.tw-aqihero__ring span { font-size: 0.8rem; font-weight: 700; color: var(--tw-muted); letter-spacing: 0.1em; }
.tw-aqihero__lbl { margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; color: var(--aqc); }
.tw-aqihero__text > p { color: var(--tw-ink-2); }
.tw-aqiscale { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 14px; }
.tw-aqiscale span {
	padding: 8px 2px 0;
	border-top: 8px solid var(--c);
	font-size: 0.7rem;
	line-height: 1.25;
	color: var(--tw-muted);
	text-align: center;
}
.tw-aqiscale span:first-child { border-radius: 4px 0 0 0; }
.tw-aqiscale i {
	position: absolute; top: -6px; width: 4px; height: 20px; margin-left: -2px;
	border-radius: 2px; background: var(--tw-ink); box-shadow: 0 0 0 2px #fff;
}
.tw-pollut { display: grid; gap: 12px; }
.tw-pollut__r { --c: #16a34a; display: grid; grid-template-columns: 210px minmax(0, 1fr) 140px; gap: 14px; align-items: center; }
.tw-pollut__r--warn { --c: #f59e0b; }
.tw-pollut__r--bad { --c: #dc2626; }
.tw-pollut__n b { display: block; font-size: 1rem; }
.tw-pollut__n small, .tw-pollut__v small { display: block; color: var(--tw-muted); font-size: 0.75rem; }
.tw-pollut__bar { position: relative; height: 12px; border-radius: 999px; background: var(--tw-line-2); }
.tw-pollut__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.tw-pollut__bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tw-ink); opacity: 0.55; }
.tw-pollut__v { text-align: right; }
.tw-pollut__v b { font-size: 1.1rem; color: var(--c); }
.tw-aqirank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.tw-aqirank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 48px 110px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.tw-aqirank li.is-me { background: var(--tw-brand-50); outline: 2px solid var(--tw-brand-100); }
.tw-aqirank__no { font-weight: 700; color: var(--tw-muted); text-align: center; }
.tw-aqirank a { font-weight: 600; color: var(--tw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-aqirank__v { padding: 3px 0; border-radius: 8px; background: var(--c); color: #fff; font-weight: 800; text-align: center; }
.tw-aqirank small { color: var(--tw-muted); font-size: 0.75rem; }

/* ---------- Bầu trời đêm ---------- */
.tw-nighthero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 24px;
	align-items: center;
	margin-bottom: 18px;
	padding: 28px;
	border-radius: 22px;
	background: radial-gradient(ellipse at 20% 0%, #312e81, #0f0c29 60%, #020617);
	color: #e0e7ff;
	overflow: hidden;
	box-shadow: var(--tw-shadow-lg);
}
.tw-nighthero__stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
		radial-gradient(1px 1px at 28% 68%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 44% 14%, #c7d2fe, transparent),
		radial-gradient(1px 1px at 58% 82%, #fff, transparent),
		radial-gradient(2px 2px at 72% 30%, #fff, transparent),
		radial-gradient(1px 1px at 86% 58%, #e0e7ff, transparent),
		radial-gradient(1px 1px at 94% 12%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 6% 88%, #c7d2fe, transparent),
		radial-gradient(1px 1px at 36% 40%, #fff, transparent),
		radial-gradient(1px 1px at 64% 52%, #fff, transparent);
	opacity: 0.8;
	pointer-events: none;
}
.tw-nighthero > div { position: relative; }
.tw-nighthero__moon { display: flex; align-items: center; gap: 18px; }
.tw-nighthero__moon p { margin: 0; }
.tw-nighthero__moon b { display: block; font-size: 1.25rem; color: #fff; }
.tw-nighthero__moon span { color: #a5b4fc; }
.tw-moon__disc--lg { width: 130px; height: 130px; flex-shrink: 0; box-shadow: 0 0 40px rgba(253, 230, 138, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.08); }
.tw-moon__disc--sm { width: 46px; height: 46px; margin: 8px auto; box-shadow: 0 0 0 3px #e2e8f0; }
.tw-nighthero__score > span { color: #a5b4fc; font-weight: 600; }
.tw-nighthero__score > b { display: block; font-size: 3.6rem; font-weight: 800; line-height: 1.05; color: var(--sc); }
.tw-nighthero__score > b small { font-size: 1.1rem; color: #a5b4fc; font-weight: 600; }
.tw-nighthero__score > em { display: block; font-style: normal; font-weight: 700; color: #fff; margin-bottom: 14px; }
.tw-nighthero__score dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.tw-nighthero__score dl div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.tw-nighthero__score dt { font-size: 0.72rem; font-weight: 500; color: #a5b4fc; }
.tw-nighthero__score dd { margin: 0; font-weight: 800; color: #fff; }
.tw-nightbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #1e1b4b, #312e81); }
.tw-nightbars__c { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tw-nightbars__v { font-size: 0.72rem; color: #c7d2fe; font-weight: 600; }
.tw-nightbars__b { position: relative; width: 100%; max-width: 34px; height: 120px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.tw-nightbars__b i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, #e2e8f0, #94a3b8); }
.tw-nightbars__t { font-size: 0.75rem; color: #e0e7ff; font-weight: 700; }
.tw-moonweek { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.tw-moonweek__d { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--tw-line); }
.tw-moonweek__d.is-today { background: #eef2ff; border-color: #c7d2fe; }
.tw-moonweek__d > small { color: var(--tw-muted); font-size: 0.72rem; }
.tw-moonweek__d > span { font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--tw-ink-2); margin-bottom: 4px; }
.tw-meteor-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
	padding: 18px 20px;
	border-radius: 18px;
	background: linear-gradient(135deg, #1e1b4b, #4338ca);
	color: #e0e7ff;
}
.tw-meteor-next > div > span { font-size: 0.8rem; color: #a5b4fc; font-weight: 600; }
.tw-meteor-next > div > b { display: block; font-size: 1.6rem; color: #fff; }
.tw-meteor-next p { margin: 4px 0 0; font-size: 0.9rem; }
.tw-meteor-next__cd { flex-shrink: 0; text-align: center; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); }
.tw-meteor-next__cd b { display: block; font-size: 2.2rem; line-height: 1; color: #fde68a; }
.tw-meteor-next__cd span { font-size: 0.78rem; }
.tw-meteor tr.is-next td { background: #eef2ff; font-weight: 600; }

@media (max-width: 1199.98px) {
	.tw-tools--site .tw-tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-moonweek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.tw-lunarpage { grid-template-columns: minmax(0, 1fr); }
	.tw-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-nighthero { grid-template-columns: minmax(0, 1fr); }
	.tw-aqirank { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
	.tw-tools--site .tw-tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-rank a { grid-template-columns: 28px minmax(0, 1fr) 30px 54px; gap: 8px; }
	.tw-rank__bar, .tw-rank__hl { display: none; }
	.tw-rank__t { font-size: 1rem; }
	.tw-sortbtns { width: 100%; }
	.tw-sortbtns button { flex: 1; padding: 7px 6px !important; font-size: 0.78rem; }
	.tw-regions { grid-template-columns: minmax(0, 1fr); }
	.tw-cmpform { grid-template-columns: minmax(0, 1fr); }
	.tw-cmpform__vs { justify-self: center; width: 36px; height: 36px; margin: -4px 0; }
	.tw-cmphero { gap: 10px; }
	.tw-cmphero__c { min-height: 150px; padding: 14px; }
	.tw-cmphero__t { font-size: 2.3rem; }
	.tw-cmphero__c img { width: 60px; right: 6px; bottom: 6px; }
	.tw-cmphero__diff { position: static; transform: none; grid-column: 1 / -1; max-width: none; justify-self: center; }
	.tw-cmpdays__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tw-cmpdays__r > b { grid-column: 1 / -1; }
	.tw-lmonth__grid { gap: 3px; }
	.tw-lmonth__d { min-height: 50px; border-radius: 9px; }
	.tw-lmonth__d b { font-size: 1rem; }
	.tw-lmonth__d small { font-size: 0.64rem; }
	.tw-aqihero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px; }
	.tw-aqihero__text { width: 100%; }
	.tw-aqiscale span { font-size: 0.6rem; }
	.tw-pollut__r { grid-template-columns: minmax(0, 1fr) 100px; gap: 6px 10px; }
	.tw-pollut__bar { grid-column: 1 / -1; grid-row: 2; }
	.tw-aqirank li { grid-template-columns: 24px minmax(0, 1fr) 44px; }
	.tw-aqirank small { display: none; }
	.tw-nighthero { padding: 18px; }
	.tw-nighthero__moon { flex-direction: column; text-align: center; }
	.tw-nighthero__score { text-align: center; }
	.tw-nighthero__score dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-nightbars { gap: 3px; padding: 10px 6px; }
	.tw-nightbars__v { font-size: 0.6rem; }
	.tw-meteor-next { flex-direction: column; align-items: flex-start; }
}
.tw-footer__social { flex-wrap: wrap; }
.tw-nighthero > .tw-nighthero__stars { position: absolute; }
.tw-moonweek__d > b { font-size: 0.85rem; line-height: 1.2; white-space: nowrap; }
.tw-prose b, .tw-prose strong { font-weight: 700; }
@media (min-width: 768px) {
	.tw-cmphero { margin-bottom: 34px; }
	.tw-cmphero__diff { top: auto; bottom: -18px; transform: translateX(-50%); }
}
.tw-lmonth b, .tw-rank b, .tw-region b, .tw-cmpdays b, .tw-meteor b, .tw-moonweek b, .tw-nighthero b, .tw-meteor-next b, .tw-aqirank b, .tw-pollut b, .tw-cmptable b, .tw-beaufort b { font-weight: 700; }
@media (max-width: 767.98px) {
	.tw-tools__list, .tw-tools--site .tw-tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Trang chủ: H1 mô tả toàn site (SEO) */
.tw-home-h1 {
	margin: 0 0 10px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tw-brand-700);
	letter-spacing: 0.01em;
}