/* ==========================================================================
   THỜI TIẾT 4 MÙA — tone cam (nạp sau sky.css)
   Tiền tố .m4- cho bố cục mới; phần cuối ghi đè màu các khối dùng chung.
   ========================================================================== */
:root {
	--m4-500: #f97316;
	--m4-600: #ea580c;
	--m4-700: #c2410c;
	--m4-800: #9a3412;
	--m4-900: #431407;
	--m4-amber: #f59e0b;
	--m4-sun: #facc15;
	--m4-cream: #fff7ed;
	--m4-cream-2: #ffedd5;
	--m4-bg: #fdf5ec;
	--m4-ink: #2b1a10;
	--m4-ink-2: #5a4031;
	--m4-muted: #8c7262;
	--m4-line: #f0dfcf;
	--m4-line-2: #f7ebdf;
	--m4-rain: #2563eb;
	--m4-cool: #0ea5e9;
	--m4-radius: 22px;
	--m4-shadow: 0 1px 2px rgba(66, 32, 12, 0.05), 0 14px 32px -18px rgba(66, 32, 12, 0.28);
	--m4-shadow-lg: 0 26px 60px -26px rgba(66, 32, 12, 0.5);
	--m4-display: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
}

body { background: var(--m4-bg); color: var(--m4-ink); }
.m4-h2, .m4-hero__title, .m4-hh__title, .m4-tab b, .m4-ticket__temp, .m4-feature__temp {
	font-family: var(--m4-display);
}

/* ---------- Đầu trang chung ---------- */
.tw-header { border-bottom: 0; box-shadow: 0 1px 0 var(--m4-line); }
.tw-header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, #84cc16 0 25%, #facc15 25% 50%, #f97316 50% 75%, #38bdf8 75%);
}
.tw-header__logo img { width: 198px; height: auto; }
.tw-search .search-input { background: var(--m4-cream); border-color: var(--m4-line); }
.tw-crumbs { padding-top: 14px; }
.tw-crumbs .separator { color: #d6b8a0; }

/* Tabs dùng ở trang tiện ích (tte_nav) */
.tw-tabs { background: rgba(253, 245, 236, 0.9); }
.tw-tabs__link.is-active { box-shadow: 0 8px 18px -10px rgba(154, 52, 18, 0.9); }

/* ---------- HERO trang dự báo ---------- */
.m4-hero {
	--h1: #9a3412;
	--h2: #ea580c;
	--h3: #fbbf24;
	position: relative;
	overflow: hidden;
	margin-top: 10px;
	padding: 34px 0 30px;
	color: #fff;
	background:
		radial-gradient(120% 140% at 100% 0%, var(--h3) 0, transparent 46%),
		linear-gradient(115deg, var(--h1) 0%, var(--h2) 62%, #fb923c 100%);
}
.m4-hero__rays {
	position: absolute;
	right: -140px;
	top: -170px;
	width: 520px;
	height: 520px;
	fill: rgba(255, 255, 255, 0.07);
	animation: m4-spin 120s linear infinite;
	pointer-events: none;
}
@keyframes m4-spin { to { transform: rotate(360deg); } }
.m4-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 28px;
	align-items: center;
}
.m4-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 0.84rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
}
.m4-kicker__season {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	color: #fff;
	font-weight: 700;
}
.m4-hero__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
}
.m4-hero__lead {
	max-width: 640px;
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}
.m4-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.m4-facts li {
	display: flex;
	flex-direction: column;
	padding: 8px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.m4-facts span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82); }
.m4-facts b { font-size: 0.98rem; font-weight: 700; color: #fff; }
.m4-hero__upd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}
.m4-hero__upd i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #bef264;
	box-shadow: 0 0 0 4px rgba(190, 242, 100, 0.25);
}
/* Tấm vé "bây giờ" */
.m4-ticket {
	position: relative;
	display: flex !important;
	flex-direction: column;
	padding: 18px 22px 18px;
	border-radius: 24px;
	background: #fff;
	color: var(--m4-ink);
	box-shadow: var(--m4-shadow-lg);
	transition: transform 0.2s;
}
.m4-ticket::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 52px;
	border-top: 2px dashed var(--m4-line);
}
.m4-ticket:hover { color: var(--m4-ink); transform: translateY(-3px); }
.m4-ticket__label { font-size: 0.78rem; font-weight: 700; color: var(--m4-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.m4-ticket__row { display: flex; align-items: center; justify-content: space-between; }
.m4-ticket__temp { font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--m4-600); letter-spacing: -0.03em; }
.m4-ticket__temp sup { font-size: 1.1rem; top: -1.6em; margin-left: 2px; color: var(--m4-muted); }
.m4-ticket__desc { font-weight: 700; }
.m4-ticket__hl { margin-top: 24px; font-size: 0.84rem; color: var(--m4-ink-2); font-weight: 600; }

/* Biến thể màu từng trang */
.m4-hero--hourly { --h1: #7c2d12; --h2: #c2410c; --h3: #f59e0b; }
.m4-hero--3d { --h1: #9f1239; --h2: #ea580c; --h3: #fdba74; }
.m4-hero--5d { --h1: #92400e; --h2: #d97706; --h3: #fde047; }
.m4-hero--7d { --h1: #9a3412; --h2: #f97316; --h3: #a3e635; }
.m4-hero--10d { --h1: #431407; --h2: #9a3412; --h3: #fb923c; }
.m4-hero--15d { --h1: #7f1d1d; --h2: #dc2626; --h3: #fbbf24; }
.m4-hero--20d { --h1: #78350f; --h2: #b45309; --h3: #f97316; }
.m4-hero--30d { --h1: #3b1f0e; --h2: #c2410c; --h3: #fcd34d; }

/* ---------- Thanh chọn số ngày ---------- */
.m4-tabs {
	position: sticky;
	top: 0;
	z-index: 1020;
	padding: 10px 0;
	background: rgba(253, 245, 236, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--m4-line);
}
.admin-bar .m4-tabs { top: 32px; }
.m4-tabs__list {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.m4-tabs__list::-webkit-scrollbar { display: none; }
.m4-tabs__list li { flex: 1 0 auto; }
.m4-tab {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	min-width: 64px;
	padding: 6px 10px 7px;
	border-radius: 16px;
	border: 1.5px solid transparent;
	color: var(--m4-ink-2);
	line-height: 1.1;
	transition: background 0.15s, border-color 0.15s;
}
.m4-tab b { font-size: 1.25rem; font-weight: 700; color: var(--m4-ink); }
.m4-tab span { font-size: 0.68rem; font-weight: 600; color: var(--m4-muted); }
.m4-tab:hover { background: #fff; border-color: var(--m4-line); color: var(--m4-ink); }
.m4-tab.is-active {
	background: var(--m4-600);
	border-color: var(--m4-600);
	box-shadow: 0 10px 20px -12px rgba(154, 52, 18, 0.9);
}
.m4-tab.is-active b, .m4-tab.is-active span { color: #fff; }

/* ---------- Bố cục: cột phụ bên trái ---------- */
.m4-main { padding: 24px 0 10px; }
.m4-layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.m4-side { order: -1; position: sticky; top: 86px; }
.m4-content > * + * { margin-top: 20px; }
.m4-side .tw-side { gap: 16px; }
.m4-side .tw-card,
.m4-side .tw-aqi,
.m4-side .tw-sun {
	border-radius: 20px;
	box-shadow: none;
	border: 1px solid var(--m4-line);
}

.m4-block {
	background: #fff;
	border-radius: var(--m4-radius);
	border: 1px solid var(--m4-line);
	box-shadow: var(--m4-shadow);
	padding: 22px 24px;
}
.m4-block--bare { background: transparent; border: 0; box-shadow: none; padding: 0; }
.m4-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.m4-h2 {
	position: relative;
	margin: 0;
	padding-left: 14px;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--m4-ink);
}
.m4-h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 5px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--m4-amber), var(--m4-600));
}
.m4-chip {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--m4-cream-2);
	color: var(--m4-800) !important;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}
.m4-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--m4-muted); line-height: 1.55; }
.m4-link { display: inline-block !important; margin-top: 14px; font-weight: 700; color: var(--m4-700); }
.m4-link:hover { color: var(--m4-800); }
.m4-table-wrap { overflow-x: auto; }

/* ---------- Hôm nay ---------- */
.m4-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.m4-part {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 10px 12px;
	border-radius: 18px;
	text-align: center;
	background: var(--pb, var(--m4-cream));
}
.m4-part--morn { --pb: linear-gradient(180deg, #fef9c3, #fff7ed); }
.m4-part--day { --pb: linear-gradient(180deg, #fed7aa, #fff7ed); }
.m4-part--eve { --pb: linear-gradient(180deg, #fecaca, #fff1f2); }
.m4-part--night { --pb: linear-gradient(180deg, #312e81, #4c1d95); color: #fff; }
.m4-part__name { font-weight: 700; font-size: 0.92rem; }
.m4-part__name small { opacity: 0.6; font-weight: 600; }
.m4-part__t { font-family: var(--m4-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.m4-part__d { font-size: 0.76rem; min-height: 2.4em; opacity: 0.85; }
.m4-part--night .tw-pop { color: #c7d2fe; }
.m4-part.is-past { opacity: 0.55; }
.m4-part em { position: absolute; top: 8px; right: 10px; font-size: 0.66rem; font-style: normal; font-weight: 700; }

.m4-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.m4-ring {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 6px;
	border-radius: 18px;
	background: var(--m4-cream);
	text-align: center;
}
.m4-ring > b {
	position: absolute;
	top: 54px;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	font-family: var(--m4-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--m4-ink);
}
.m4-ring--compass > b { position: static; transform: none; margin-top: 4px; }
.m4-ring > span { margin-top: 6px; font-weight: 700; font-size: 0.86rem; }
.m4-ring--compass > span { margin-top: 0; }
.m4-ring small { font-size: 0.74rem; color: var(--m4-muted); }
.m4-facts2 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 14px 0 0;
}
.m4-facts2 > div { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--m4-line-2); }
.m4-facts2 dt { font-size: 0.74rem; font-weight: 500; color: var(--m4-muted); }
.m4-facts2 dd { margin: 0; font-weight: 700; }

.m4-hgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.m4-hcell {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 6px 10px;
	border-radius: 16px;
	border: 1px solid var(--m4-line-2);
	border-top: 5px solid var(--c);
	text-align: center;
}
.m4-hcell.is-now { background: var(--m4-cream); border-color: var(--m4-cream-2); border-top-color: var(--c); }
.m4-hcell__time { font-size: 0.78rem; font-weight: 700; color: var(--m4-ink-2); }
.m4-hcell b { font-size: 1.05rem; }
.m4-hcell__pop { width: 70%; height: 5px; margin: 6px 0 2px; border-radius: 999px; background: #e0ecff; overflow: hidden; }
.m4-hcell__pop i { display: block; height: 100%; background: var(--m4-rain); }
.m4-hcell small { font-size: 0.68rem; color: var(--m4-muted); }

.m4-dlist { list-style: none; margin: 0; padding: 0; }
.m4-dlist li + li { border-top: 1px solid var(--m4-line-2); }
.m4-dlist a {
	display: grid !important;
	grid-template-columns: 92px 40px minmax(0, 1fr) 62px 38px minmax(80px, 1.1fr) 38px;
	gap: 10px;
	align-items: center;
	padding: 8px 8px;
	border-radius: 14px;
	color: var(--m4-ink);
}
.m4-dlist a:hover { background: var(--m4-cream); color: var(--m4-ink); }
.m4-dlist li.is-today a { background: var(--m4-cream); }
.m4-dlist__day b { display: block; }
.m4-dlist__day small { color: var(--m4-muted); }
.m4-dlist__desc { font-size: 0.86rem; color: var(--m4-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-dlist__lo { text-align: right; color: var(--m4-muted); font-weight: 600; }
.m4-dlist__hi { font-weight: 800; }
.m4-range { position: relative; height: 8px; border-radius: 999px; background: var(--m4-line-2); }
.m4-range i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }

/* ---------- Theo giờ ---------- */
.m4-clockgrid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 26px; align-items: center; }
.m4-clockbox { position: relative; }
.m4-clock { display: block; width: 100%; height: auto; }
.m4-clock path { stroke: #fff; stroke-width: 1.5; }
.m4-clock path.is-now { stroke: var(--m4-ink); stroke-width: 2.5; }
.m4-clock__t { font-size: 12px; font-weight: 700; font-family: "Be Vietnam Pro", sans-serif; }
.m4-clock__q { font-size: 11px; font-weight: 700; fill: var(--m4-muted); }
.m4-clocklegend p { margin: 0 0 14px; color: var(--m4-ink-2); line-height: 1.6; }
.m4-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m4-moment { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; background: var(--m4-cream); }
.m4-moment span { font-size: 0.76rem; font-weight: 700; color: var(--m4-muted); }
.m4-moment b { font-family: var(--m4-display); font-size: 1.5rem; line-height: 1.2; }
.m4-moment small { font-size: 0.76rem; color: var(--m4-ink-2); }
.m4-moment--hot b { color: var(--m4-700); }
.m4-moment--cool b { color: #0369a1; }
.m4-moment--wet b { color: var(--m4-rain); }
.m4-scale { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.76rem; color: var(--m4-muted); font-weight: 600; }
.m4-scale i { flex: 1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgb(125, 184, 214), rgb(254, 215, 170), rgb(251, 146, 60), rgb(234, 88, 12), rgb(154, 52, 18)); }

.m4-htable { border-radius: 16px; border: 1px solid var(--m4-line); }
.m4-htable > :first-child { border-radius: 15px 15px 0 0; }
.m4-htable > :last-child { border-radius: 0 0 15px 15px; }
.m4-htable__day {
	position: sticky;
	top: 74px;
	z-index: 2;
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 10px 16px;
	background: var(--m4-ink);
	color: #fff;
}
.m4-htable__day span { font-size: 0.82rem; color: #fed7aa; }
.m4-hrow {
	display: grid;
	grid-template-columns: 56px minmax(0, 1.4fr) 58px minmax(0, 0.9fr) minmax(90px, 1fr) 84px 50px;
	gap: 10px;
	align-items: center;
	padding: 6px 16px;
	font-size: 0.88rem;
	border-top: 1px solid var(--m4-line-2);
}
.m4-hrow.is-night { background: #fcf8f4; }
.m4-hrow__time { font-weight: 700; }
.m4-hrow__sky { display: flex; align-items: center; gap: 6px; min-width: 0; }
.m4-hrow__sky em { font-style: normal; color: var(--m4-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-hrow__t { justify-self: start; padding: 3px 9px; border-radius: 9px; font-weight: 800; }
.m4-hrow__feel { color: var(--m4-muted); font-size: 0.8rem; }
.m4-hrow__pop { position: relative; display: flex; align-items: center; gap: 6px; }
.m4-hrow__pop i { display: block; height: 6px; min-width: 2px; border-radius: 999px; background: var(--m4-rain); max-width: 46px; }
.m4-hrow__pop b { font-size: 0.82rem; color: var(--m4-rain); }
.m4-hrow__pop small { font-size: 0.72rem; color: var(--m4-muted); white-space: nowrap; }
.m4-hrow__wind { color: var(--m4-ink-2); white-space: nowrap; }
.m4-hrow__hum { color: var(--m4-muted); text-align: right; }

/* ---------- 3 ngày: tờ lịch ---------- */
.m4-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m4-sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--m4-line);
	box-shadow: var(--m4-shadow);
	overflow: hidden;
}
.m4-sheet::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 8px;
	background: radial-gradient(circle, var(--m4-bg) 4px, transparent 4.5px) 0 0 / 22px 8px repeat-x;
	z-index: 2;
}
.m4-sheet__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 24px 18px 10px;
	background: linear-gradient(135deg, var(--m4-700), var(--m4-500));
	color: #fff;
}
.m4-sheet--1 .m4-sheet__top { background: linear-gradient(135deg, #b45309, #f59e0b); }
.m4-sheet--2 .m4-sheet__top { background: linear-gradient(135deg, #9f1239, #e11d48); }
.m4-sheet__top span { font-size: 0.8rem; opacity: 0.9; }
.m4-sheet__top b { font-weight: 700; }
.m4-sheet__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0 0; }
.m4-sheet__date strong { font-family: var(--m4-display); font-size: 4.4rem; line-height: 1; font-weight: 700; color: var(--m4-ink); letter-spacing: -0.04em; }
.m4-sheet__lunar { min-height: 1.3em; font-size: 0.8rem; font-weight: 600; color: var(--m4-muted); }
.m4-sheet__lunar.is-moon { color: #b91c1c; }
.m4-sheet__sky { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px 4px; }
.m4-sheet__t { margin: 0; font-size: 1rem; color: var(--m4-muted); }
.m4-sheet__t b { font-family: var(--m4-display); font-size: 1.8rem; color: var(--m4-600); }
.m4-sheet__d { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--m4-ink-2); }
.m4-sheet__parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 14px 0; padding: 0; list-style: none; border-radius: 14px; background: var(--m4-cream); }
.m4-sheet__parts li { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; }
.m4-sheet__parts span { font-size: 0.7rem; color: var(--m4-muted); font-weight: 600; }
.m4-sheet__facts { margin: 12px 18px 0; }
.m4-sheet__facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--m4-line); font-size: 0.86rem; }
.m4-sheet__facts dt { font-weight: 500; color: var(--m4-muted); }
.m4-sheet__facts dd { margin: 0; font-weight: 700; text-align: right; }
.m4-sheet__tip { margin: auto 0 0; padding: 12px 18px 16px; font-size: 0.82rem; color: var(--m4-ink-2); line-height: 1.5; }

.m4-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.m4-table th, .m4-table td { padding: 10px 12px; border-bottom: 1px solid var(--m4-line-2); text-align: center; }
.m4-table thead th { background: var(--m4-cream); font-weight: 700; color: var(--m4-ink); }
.m4-table thead th:first-child { border-radius: 12px 0 0 12px; }
.m4-table thead th:last-child { border-radius: 0 12px 12px 0; }
.m4-table th small { display: block; font-weight: 500; color: var(--m4-muted); font-size: 0.74rem; }
.m4-table tbody th { text-align: left; font-weight: 600; color: var(--m4-ink-2); }

/* ---------- 5 ngày: nhiệt kế ---------- */
.m4-thermos { position: relative; display: grid; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); gap: 10px; }
.m4-thermos__axis { position: relative; height: 230px; margin-top: 116px; }
.m4-thermos__axis span { position: absolute; right: 4px; transform: translateY(50%); font-size: 0.72rem; color: var(--m4-muted); font-weight: 600; }
.m4-thermo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 6px 14px;
	border-radius: 20px;
	background: var(--m4-cream);
	text-align: center;
}
.m4-thermo.is-hot { background: linear-gradient(180deg, #ffedd5, #fff7ed); box-shadow: inset 0 0 0 2px #fdba74; }
.m4-thermo__day { display: block; min-height: 44px; }
.m4-thermo__day b { display: block; }
.m4-thermo__day small { color: var(--m4-muted); font-size: 0.76rem; }
.m4-thermo__tube {
	position: relative;
	width: 22px;
	height: 230px;
	margin-top: 6px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--m4-line);
}
.m4-thermo__tube i { position: absolute; left: 4px; right: 4px; border-radius: 999px; }
.m4-thermo__tube em {
	position: absolute;
	left: 28px;
	transform: translateY(50%);
	font-style: normal;
	font-weight: 800;
	font-size: 0.9rem;
	white-space: nowrap;
}
.m4-thermo__hi { color: var(--m4-700); }
.m4-thermo__lo { color: #0369a1; }
.m4-thermo__bulb { width: 34px; height: 34px; margin-top: -6px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--m4-line); }
.m4-thermo .tw-pop { margin-top: 8px; }
.m4-thermo__desc { margin-top: 4px; font-size: 0.76rem; color: var(--m4-ink-2); }
.m4-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 0.9rem; }
.m4-matrix { table-layout: fixed; min-width: 520px; }
.m4-matrix thead th:first-child { width: 120px; }
.m4-matrix thead th { padding: 6px; font-weight: 700; text-align: center; }
.m4-matrix thead th small { display: block; font-weight: 500; color: var(--m4-muted); font-size: 0.74rem; }
.m4-matrix tbody th { padding: 8px 10px; text-align: left; font-weight: 600; color: var(--m4-ink-2); white-space: nowrap; }
.m4-matrix td {
	padding: 10px 6px;
	border-radius: 10px;
	text-align: center;
	font-weight: 700;
	background: color-mix(in srgb, var(--c, #ea580c) calc(var(--a, 0.08) * 100%), #fff);
}
.m4-matrix tr:last-child td { background: var(--m4-cream); font-weight: 600; }

/* ---------- 7 ngày: kế hoạch tuần ---------- */
.m4-planner { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.m4-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 12px;
	border-radius: 18px;
	border: 1px solid var(--m4-line);
	text-align: center;
	overflow: hidden;
}
.m4-plan header { width: 100%; padding: 8px 4px; background: var(--m4-cream); }
.m4-plan header b { display: block; font-size: 0.9rem; }
.m4-plan header span { font-size: 0.74rem; color: var(--m4-muted); }
.m4-plan.is-weekend header { background: #ffe4e6; }
.m4-plan.is-best { border-color: #84cc16; box-shadow: 0 0 0 2px #bef264; }
.m4-plan.is-best header { background: #ecfccb; }
.m4-plan__t { margin: 0; }
.m4-plan__t b { font-family: var(--m4-display); font-size: 1.35rem; color: var(--m4-700); }
.m4-plan__t span { margin-left: 4px; color: var(--m4-muted); font-weight: 600; }
.m4-plan__d { margin: 2px 6px 4px; min-height: 2.6em; font-size: 0.74rem; color: var(--m4-ink-2); line-height: 1.3; }
.m4-plan__acts { width: 100%; margin: 8px 0 0; padding: 0 8px; list-style: none; }
.m4-plan__acts li { margin-top: 6px; text-align: left; }
.m4-plan__acts span { display: block; font-size: 0.66rem; font-weight: 700; color: var(--m4-muted); }
.m4-plan__acts i { display: block; height: 6px; border-radius: 999px; background: #d6d3d1; }
.m4-plan__acts .is-good i { background: #65a30d; }
.m4-plan__acts .is-ok i { background: #f59e0b; }
.m4-plan__acts .is-bad i { background: #ef4444; }
.m4-plan__acts .is-top span { color: #3f6212; }
.m4-plan__badge { margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: #65a30d; color: #fff; font-size: 0.68rem; font-style: normal; font-weight: 700; }
.m4-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m4-pick { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--m4-cream); }
.m4-pick__ico { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #fff; color: var(--m4-600); box-shadow: var(--m4-shadow); }
.m4-pick span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--m4-muted); }
.m4-pick b { display: block; }
.m4-pick small { font-size: 0.76rem; color: var(--m4-ink-2); }
.m4-bandwrap { overflow-x: auto; }
.m4-band { display: block; min-width: 100%; height: auto; overflow: visible; }
.m4-band__hi { font-size: 13px; font-weight: 800; fill: var(--m4-700); }
.m4-band__lo { font-size: 12px; font-weight: 700; fill: #0369a1; }
.m4-bandwrap__days { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); text-align: center; font-weight: 700; font-size: 0.82rem; color: var(--m4-ink-2); }
.m4-acc details { border-bottom: 1px solid var(--m4-line-2); }
.m4-acc summary { padding: 12px 4px; cursor: pointer; list-style: none; }
.m4-acc summary::-webkit-details-marker { display: none; }
.m4-acc summary::after { content: "+"; float: right; font-weight: 800; color: var(--m4-600); }
.m4-acc details[open] summary::after { content: "–"; }
.m4-acc summary span { color: var(--m4-muted); font-size: 0.88rem; text-transform: none; }
.m4-acc .m4-facts2 { margin: 0 0 8px; }

/* ---------- 10 ngày: sóng nhiệt ---------- */
.m4-wave { overflow-x: auto; padding-bottom: 6px; }
.m4-wave__track { width: max(100%, calc(var(--col) * var(--n))); }
.m4-wave__icons, .m4-wave__rain { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); text-align: center; }
.m4-wave__icons span { display: flex; flex-direction: column; align-items: center; }
.m4-wave__icons b { font-size: 0.86rem; }
.m4-wave__icons small { font-size: 0.72rem; color: var(--m4-muted); }
.m4-wave .m4-band { width: 100%; }
.m4-wave__rain span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 74px; border-top: 1px dashed var(--m4-line); }
.m4-wave__rain i { width: 22px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #60a5fa, #2563eb); }
.m4-wave__rain b { font-size: 0.72rem; color: var(--m4-rain); }
.m4-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 0.78rem; font-weight: 600; color: var(--m4-ink-2); }
.m4-legend span::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 6px; vertical-align: middle; border-radius: 4px; }
.m4-legend .is-hi::before { background: var(--m4-600); }
.m4-legend .is-lo::before { background: repeating-linear-gradient(90deg, #0ea5e9 0 5px, transparent 5px 8px); }
.m4-legend .is-rain::before { height: 10px; background: #2563eb; }
.m4-table--log tbody th b { display: block; }
.m4-table--log tbody th small { color: var(--m4-muted); font-size: 0.76rem; }
.m4-table--log td { text-align: left; vertical-align: middle; }
.m4-table--log { min-width: 600px; }
.m4-table--log td, .m4-table--log th { white-space: nowrap; }
.m4-table__sky { display: flex; align-items: center; gap: 6px; }
.m4-table--log tr.is-weekend th { color: #be123c; }
.m4-hi { color: var(--m4-700); }
.m4-lo { color: #0369a1; font-weight: 600; }

/* ---------- 15 ngày: thang nhiệt độ ---------- */
.m4-gantt { font-size: 0.86rem; }
.m4-gantt__axis, .m4-gantt__row { display: grid; grid-template-columns: 122px minmax(0, 1fr) 92px; gap: 12px; align-items: center; }
.m4-gantt__axis { padding-bottom: 6px; border-bottom: 1px solid var(--m4-line); font-size: 0.74rem; font-weight: 700; color: var(--m4-muted); }
.m4-gantt__ticks { position: relative; height: 16px; }
.m4-gantt__ticks i { position: absolute; transform: translateX(-50%); font-style: normal; }
.m4-gantt__week { margin: 12px 0 4px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--m4-700); }
.m4-gantt__row { padding: 4px 0; }
.m4-gantt__row.is-weekend .m4-gantt__day b { color: #be123c; }
.m4-gantt__day { display: flex; align-items: center; gap: 6px; }
.m4-gantt__day small { color: var(--m4-muted); }
.m4-gantt__lane { position: relative; height: 30px; border-radius: 10px; background: var(--m4-cream); }
.m4-gantt__lane u { position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(140, 114, 98, 0.15); text-decoration: none; }
.m4-gantt__lane > i { position: absolute; top: 5px; bottom: 5px; border-radius: 999px; box-shadow: 0 4px 10px -6px rgba(154, 52, 18, 0.7); }
.m4-gantt__lane em { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; font-size: 0.78rem; white-space: nowrap; }
.m4-gantt__lane em.is-lo { right: calc(100% + 6px); color: #0369a1; }
.m4-gantt__lane em.is-hi { left: calc(100% + 6px); color: var(--m4-700); }
.m4-gantt__rain { display: flex; align-items: center; gap: 6px; }
.m4-gantt__rain i { height: 10px; min-width: 2px; max-width: 54px; border-radius: 999px; background: var(--m4-rain); }
.m4-gantt__rain b { font-size: 0.78rem; color: var(--m4-rain); }
.m4-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m4-weekcard { padding: 14px 16px; border-radius: 18px; background: var(--m4-cream); }
.m4-weekcard > span { font-size: 0.76rem; font-weight: 700; color: var(--m4-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.m4-weekcard > b { display: block; font-family: var(--m4-display); font-size: 1.1rem; }
.m4-weekcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.m4-weekcard dt { font-size: 0.72rem; font-weight: 500; color: var(--m4-muted); }
.m4-weekcard dd { margin: 0; font-weight: 700; }

/* ---------- 20 ngày: ba chặng ---------- */
.m4-legs { display: flex; flex-direction: column; gap: 16px; }
.m4-leg {
	position: relative;
	padding: 18px 20px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid var(--m4-line);
	box-shadow: var(--m4-shadow);
}
.m4-leg + .m4-leg::before {
	content: "";
	position: absolute;
	left: 40px;
	top: -17px;
	height: 16px;
	border-left: 3px dotted var(--m4-500);
}
.m4-leg__head { display: flex; gap: 14px; align-items: center; }
.m4-leg__no {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--m4-500), var(--m4-800));
	color: #fff;
	font-family: var(--m4-display);
	font-size: 1.3rem;
	font-weight: 700;
}
.m4-leg--2 .m4-leg__no { background: linear-gradient(135deg, #f59e0b, #b45309); }
.m4-leg--3 .m4-leg__no { background: linear-gradient(135deg, #fb7185, #9f1239); }
.m4-leg__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.m4-leg__head p { margin: 2px 0 0; font-size: 0.84rem; color: var(--m4-ink-2); }
.m4-leg__cmp { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.m4-leg__cmp li { padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--m4-cream); color: var(--m4-ink-2); }
.m4-leg__cmp li::before { margin-right: 4px; }
.m4-leg__cmp .is-up { background: #ffedd5; color: var(--m4-800); }
.m4-leg__cmp .is-up::before { content: "▲"; }
.m4-leg__cmp .is-down { background: #e0f2fe; color: #075985; }
.m4-leg__cmp .is-down::before { content: "▼"; }
.m4-leg__cmp .is-wet { background: #dbeafe; color: #1e40af; }
.m4-leg__cmp .is-dry { background: #fef9c3; color: #854d0e; }
.m4-leg__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.m4-chipday {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px 10px;
	border-radius: 16px;
	background: var(--m4-cream);
	border-bottom: 5px solid var(--c);
	text-align: center;
}
.m4-chipday b { font-size: 0.86rem; }
.m4-chipday.is-weekend b { color: #be123c; }
.m4-chipday small { font-size: 0.7rem; color: var(--m4-muted); }
.m4-chipday__t { font-weight: 800; }
.m4-chipday__t em { margin-left: 4px; font-style: normal; font-weight: 600; color: var(--m4-muted); }

/* ---------- 30 ngày: lịch treo tường ---------- */
.m4-split { display: flex; height: 40px; border-radius: 14px; overflow: hidden; font-size: 0.84rem; font-weight: 700; }
.m4-split span { display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.m4-split .is-sun { background: linear-gradient(90deg, #fde047, #f59e0b); color: #713f12; }
.m4-split .is-cloud { background: #e7e5e4; color: #44403c; }
.m4-split .is-rain { background: linear-gradient(90deg, #60a5fa, #2563eb); color: #fff; }
.m4-split__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 0.84rem; color: var(--m4-ink-2); }
.m4-split__legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
.m4-split__legend .is-sun::before { background: #f59e0b; }
.m4-split__legend .is-cloud::before { background: #d6d3d1; }
.m4-split__legend .is-rain::before { background: #2563eb; }
.m4-wall { display: flex; flex-direction: column; gap: 6px; }
.m4-wall__head, .m4-wall__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 84px; gap: 6px; }
.m4-wall__head span { padding: 6px 0; text-align: center; font-size: 0.78rem; font-weight: 800; color: var(--m4-ink-2); background: var(--m4-cream); border-radius: 10px; }
.m4-wall__head .is-we { color: #be123c; }
.m4-wall__head .is-sum { background: var(--m4-ink); color: #fed7aa; }
.m4-wall__d {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 112px;
	padding: 6px 4px 6px;
	border-radius: 14px;
	border: 1px solid var(--m4-line);
	border-top: 6px solid var(--c);
	background: #fff;
	text-align: center;
}
.m4-wall__d.is-today { box-shadow: 0 0 0 2px var(--m4-600); }
.m4-wall__num { align-self: flex-start; font-family: var(--m4-display); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.m4-wall__num small { font-size: 0.7rem; color: var(--m4-muted); }
.m4-wall__d.is-we .m4-wall__num { color: #be123c; }
.m4-wall__lunar { position: absolute; top: 8px; right: 8px; font-size: 0.68rem; font-weight: 600; color: var(--m4-muted); }
.m4-wall__lunar.is-moon { color: #b91c1c; font-weight: 800; }
.m4-wall__t { font-size: 0.82rem; color: var(--m4-muted); }
.m4-wall__t b { margin-right: 3px; color: var(--m4-ink); }
.m4-wall__rain { margin-top: 2px; padding: 1px 6px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 0.66rem; font-weight: 700; }
.m4-wall__blank { border-radius: 14px; background: repeating-linear-gradient(135deg, var(--m4-line-2) 0 6px, transparent 6px 12px); }
.m4-wall__sum { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: var(--m4-ink); color: #fed7aa; text-align: center; }
.m4-wall__sum b { font-family: var(--m4-display); font-size: 1.15rem; color: #fff; }
.m4-wall__sum small { font-size: 0.7rem; }
.m4-notables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.m4-notable { display: flex; flex-direction: column; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--m4-cream); }
.m4-notable span { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.m4-notable--hot span { color: var(--m4-700); }
.m4-notable--cool span { color: #0369a1; }
.m4-notable--wet span { color: #1d4ed8; }
.m4-notable--best span { color: #4d7c0f; }
.m4-notable b { font-size: 0.95rem; }
.m4-notable small { font-weight: 700; color: var(--m4-ink-2); }

/* Viết hoa chữ cái đầu mô tả thời tiết (không viết hoa mọi từ) */
.m4-ticket__desc::first-letter,
.m4-part__d::first-letter,
.m4-dlist__desc::first-letter,
.m4-hrow__sky em::first-letter,
.m4-thermo__desc::first-letter,
.m4-plan__d::first-letter,
.m4-table__sky span::first-letter,
.m4-city__desc::first-letter { text-transform: uppercase; }

/* ---------- Cuối trang ---------- */
.m4-more { margin-top: 26px; padding: 24px; border-radius: var(--m4-radius); background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid var(--m4-line); }
.m4-more .tw-tools { margin-bottom: 22px; }
.m4-more .m4-h2 { margin-bottom: 14px; }
.m4-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m4-more__grid a {
	display: flex !important;
	flex-direction: column;
	padding: 12px 16px;
	border-radius: 16px;
	background: #fff;
	color: var(--m4-ink);
	border: 1px solid var(--m4-line);
	transition: transform 0.15s, border-color 0.15s;
}
.m4-more__grid a:hover { color: var(--m4-ink); transform: translateY(-2px); border-color: #fdba74; }
.m4-more__grid b { font-family: var(--m4-display); font-weight: 600; }
.m4-more__grid span { font-size: 0.78rem; color: var(--m4-muted); }
.m4-main .tw-section { padding: 26px 0 30px; }

/* ==========================================================================
   TRANG CHỦ
   ========================================================================== */
.m4-hh {
	position: relative;
	overflow: hidden;
	padding: 42px 0 46px;
	color: #fff;
	background:
		radial-gradient(90% 120% at 100% 0%, #fbbf24 0, transparent 50%),
		radial-gradient(60% 90% at 0% 100%, rgba(244, 63, 94, 0.45) 0, transparent 60%),
		linear-gradient(120deg, #9a3412, #ea580c 60%, #fb923c);
}
.m4-hh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; align-items: center; }
.m4-hh__title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.m4-hh__lead { margin: 14px 0 0; max-width: 620px; font-size: 1.02rem; color: rgba(255, 255, 255, 0.92); }
.m4-search { position: relative; margin-top: 22px; max-width: 620px; }
.m4-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--m4-600); }
.m4-search input {
	width: 100%;
	height: 58px;
	padding: 0 20px 0 50px;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--m4-ink);
	font-size: 1rem;
	box-shadow: 0 18px 40px -18px rgba(67, 20, 7, 0.6);
}
.m4-search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 18px 40px -18px rgba(67, 20, 7, 0.6); }
.m4-search__results {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow: auto;
	padding: 6px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--m4-shadow-lg);
}
.m4-search__results a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--m4-ink); }
.m4-search__results a:hover { background: var(--m4-cream); color: var(--m4-700); }
.m4-hh__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m4-hh__quick a { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; font-size: 0.86rem; font-weight: 600; }
.m4-hh__quick a:hover { background: #fff; color: var(--m4-700); }
.m4-feature {
	display: flex !important;
	flex-direction: column;
	padding: 22px 24px;
	border-radius: 28px;
	background: #fff;
	color: var(--m4-ink);
	box-shadow: var(--m4-shadow-lg);
	transition: transform 0.2s;
}
.m4-feature:hover { color: var(--m4-ink); transform: translateY(-3px); }
.m4-feature__label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--m4-muted); }
.m4-feature__row { display: flex; align-items: center; justify-content: space-between; }
.m4-feature__temp { font-size: 4.4rem; font-weight: 700; line-height: 1; color: var(--m4-600); letter-spacing: -0.04em; }
.m4-feature__temp sup { font-size: 1.2rem; top: -2em; color: var(--m4-muted); }
.m4-feature__desc { font-weight: 700; }
.m4-feature__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.m4-feature__stats > span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: var(--m4-cream); }
.m4-feature__stats small { font-size: 0.72rem; color: var(--m4-muted); }
.m4-feature__days { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--m4-line); text-align: center; }
.m4-feature__days > span { display: flex; flex-direction: column; align-items: center; font-size: 0.86rem; }
.m4-feature__days small { font-weight: 700; color: var(--m4-ink-2); }
.m4-feature__days em { font-style: normal; color: var(--m4-muted); font-size: 0.8rem; }

.m4-home__body { padding-top: 26px; }
.m4-home__body > * + * { margin-top: 22px; }
.m4-mien__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.m4-mien__tabs button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 8px 18px;
	border: 1.5px solid var(--m4-line);
	border-radius: 16px;
	background: #fff;
	font-weight: 700;
	color: var(--m4-ink);
	cursor: pointer;
}
.m4-mien__tabs button small { font-weight: 500; font-size: 0.72rem; color: var(--m4-muted); }
.m4-mien__tabs button[aria-selected="true"] { background: var(--m4-600); border-color: var(--m4-600); color: #fff; }
.m4-mien__tabs button[aria-selected="true"] small { color: #ffedd5; }
.m4-mien__panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m4-mien__panel[hidden] { display: none; }
.m4-prov {
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 10px 8px 14px;
	border-radius: 14px;
	border: 1px solid var(--m4-line);
	border-left: 6px solid var(--c);
	color: var(--m4-ink);
}
.m4-prov:hover { color: var(--m4-ink); background: var(--m4-cream); }
.m4-prov__name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-prov__t { font-family: var(--m4-display); font-size: 1.1rem; }
.m4-home__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.m4-home__main > * + * { margin-top: 22px; }
.m4-home__side > * + * { margin-top: 22px; }
.m4-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m4-city {
	display: flex !important;
	flex-direction: column;
	padding: 14px 16px;
	border-radius: 18px;
	background: linear-gradient(160deg, #fff7ed, #fff);
	border: 1px solid var(--m4-line);
	color: var(--m4-ink);
	transition: transform 0.15s, box-shadow 0.15s;
}
.m4-city:hover { color: var(--m4-ink); transform: translateY(-2px); box-shadow: var(--m4-shadow); }
.m4-city.is-rain, .m4-city.is-storm { background: linear-gradient(160deg, #eff6ff, #fff); }
.m4-city.is-night { background: linear-gradient(160deg, #f5f3ff, #fff); }
.m4-city h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.m4-city__row { display: flex; align-items: center; justify-content: space-between; }
.m4-city__row b { font-family: var(--m4-display); font-size: 2.2rem; font-weight: 700; color: var(--m4-600); }
.m4-city__desc { font-size: 0.84rem; color: var(--m4-ink-2); }
.m4-city__meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.78rem; color: var(--m4-muted); font-weight: 600; }
.m4-extremes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m4-ext { padding: 14px 16px; border-radius: 18px; }
.m4-ext--hot { background: linear-gradient(160deg, #ffedd5, #fff7ed); }
.m4-ext--cool { background: linear-gradient(160deg, #e0f2fe, #f0f9ff); }
.m4-ext h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 800; }
.m4-ext--hot h3 { color: var(--m4-800); }
.m4-ext--cool h3 { color: #075985; }
.m4-ext ol { margin: 0; padding: 0; list-style: none; counter-reset: x; }
.m4-ext li { counter-increment: x; }
.m4-ext a { display: flex !important; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(140, 114, 98, 0.25); color: var(--m4-ink); }
.m4-ext a::before { content: counter(x); width: 20px; font-weight: 800; color: var(--m4-muted); }
.m4-ext a span { flex: 1; }
.m4-block--lunar .tw-lunar { margin: 0; box-shadow: none; border: 1px solid var(--m4-line); }
.m4-homelinks { display: flex; flex-direction: column; gap: 8px; }
.m4-homelinks a { display: flex !important; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: var(--m4-cream); color: var(--m4-ink); }
.m4-homelinks a:hover { background: var(--m4-cream-2); color: var(--m4-ink); }
.m4-homelinks span { font-size: 0.78rem; color: var(--m4-muted); }

/* ==========================================================================
   Ghi đè màu các khối dùng chung (tiện ích, trang toàn quốc, chân trang…)
   ========================================================================== */
.tw-pagehead { --g1: #9a3412; --g2: #ea580c; --g3: #fbbf24; }
.tw-cmphero__c--b { background: linear-gradient(135deg, #075985, #0284c7 60%, #38bdf8); }
.tw-footer { background: linear-gradient(180deg, #2b1a10, #1a0e07); }
.tw-footer__wave { color: #2b1a10; }
.tw-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, #84cc16 0 25%, #facc15 25% 50%, #f97316 50% 75%, #38bdf8 75%);
}
.tw-footer__logo { padding: 0; background: none; box-shadow: none; }
.tw-footer__logo img { width: 230px; height: auto; }
.tw-footer a:hover { color: #fdba74; }
.tw-nowcard { background: linear-gradient(150deg, #c2410c, #f97316 60%, #fdba74); }
.tw-side .tw-nowcard .tw-link-arrow { color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
	.m4-layout { grid-template-columns: 290px minmax(0, 1fr); }
	.m4-planner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.m4-hrow { grid-template-columns: 52px minmax(0, 1.3fr) 56px minmax(80px, 1fr) 80px 46px; }
	.m4-hrow__feel { display: none; }
	.m4-leg__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.m4-hero__grid, .m4-hh__grid { grid-template-columns: minmax(0, 1fr); }
	.m4-ticket, .m4-feature { max-width: 440px; }
	.m4-layout { grid-template-columns: minmax(0, 1fr); }
	.m4-side { order: 0; position: static; }
	.m4-clockgrid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.m4-clockbox { width: 100%; max-width: 360px; }
	.m4-sheets { grid-template-columns: minmax(0, 1fr); }
	.m4-home__cols { grid-template-columns: minmax(0, 1fr); }
	.m4-mien__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.m4-notables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.tw-header__logo img { width: 150px; }
	.m4-hero { padding: 24px 0 22px; }
	.m4-hero__rays { width: 360px; height: 360px; right: -160px; top: -150px; }
	.m4-ticket { max-width: none; }
	.m4-ticket__temp { font-size: 3rem; }
	.m4-facts li { padding: 6px 10px; }
	.m4-block { padding: 16px 14px; border-radius: 18px; }
	.m4-h2 { font-size: 1.02rem; }
	.m4-block__head { flex-wrap: wrap; }
	.m4-parts, .m4-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-hgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.m4-dlist a { grid-template-columns: 70px 34px minmax(0, 1fr) 34px 34px; gap: 6px; padding: 8px 4px; }
	.m4-dlist__desc, .m4-dlist a .tw-pop { display: none; }
	.m4-range { grid-column: auto; }
	.m4-dlist a > .m4-range { display: none; }
	.m4-dlist a { grid-template-columns: 74px 34px minmax(0, 1fr) 40px 40px; }
	.m4-dlist a::after { content: ""; }
	.m4-moments { grid-template-columns: minmax(0, 1fr); }
	.m4-htable__day { top: 70px; }
	.m4-hrow { grid-template-columns: 46px 34px 52px minmax(0, 1fr) 62px; gap: 6px; padding: 6px 10px; font-size: 0.82rem; }
	.m4-hrow__sky em, .m4-hrow__hum { display: none; }
	.m4-hrow__pop i { display: none; }
	.m4-thermos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
	.m4-thermos__axis { display: none; }
	.m4-thermo { padding: 10px 2px; border-radius: 14px; }
	.m4-thermo .tw-wicon { width: 34px; }
	.m4-thermo__tube { height: 170px; width: 16px; }
	.m4-thermo__tube em { left: auto; right: 50%; transform: translate(50%, 50%); font-size: 0.72rem; padding: 0 3px; border-radius: 6px; background: #fff; }
	.m4-thermo__lo { transform: translate(50%, 100%) !important; }
	.m4-thermo__hi { transform: translate(50%, 0%) !important; }
	.m4-thermo__desc { display: none; }
	.m4-thermo__day { min-height: 54px; font-size: 0.8rem; line-height: 1.2; }
	.m4-matrix { font-size: 0.8rem; border-spacing: 2px; }
	.m4-planner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-picks { grid-template-columns: minmax(0, 1fr); }
	.m4-gantt__axis, .m4-gantt__row { grid-template-columns: 74px minmax(0, 1fr) 44px; gap: 8px; }
	.m4-gantt__day .tw-wicon { display: none; }
	.m4-gantt__day { flex-direction: column; align-items: flex-start; gap: 0; }
	.m4-gantt__rain i { display: none; }
	.m4-gantt__lane em { font-size: 0.7rem; }
	.m4-gantt__lane em.is-lo { right: auto; left: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
	.m4-gantt__lane em.is-hi { left: auto; right: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
	.m4-weeks { grid-template-columns: minmax(0, 1fr); }
	.m4-leg { padding: 14px; }
	.m4-leg__days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.m4-wall__head, .m4-wall__row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
	.m4-wall__head .is-sum, .m4-wall__sum { display: none; }
	.m4-wall__d { min-height: 86px; padding: 4px 2px; border-radius: 10px; border-top-width: 5px; }
	.m4-wall__d .tw-wicon { width: 26px; height: 26px; }
	.m4-wall__num { font-size: 0.9rem; }
	.m4-wall__lunar { top: 5px; right: 4px; font-size: 0.6rem; }
	.m4-wall__t { font-size: 0.7rem; }
	.m4-wall__t b { display: block; margin: 0; }
	.m4-wall__rain { font-size: 0.58rem; padding: 0 3px; }
	.m4-more { padding: 16px; }
	.m4-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-hh { padding: 26px 0 30px; }
	.m4-feature { max-width: none; padding: 18px; }
	.m4-feature__temp { font-size: 3.4rem; }
	.m4-mien__tabs { overflow-x: auto; }
	.m4-mien__tabs button { flex-shrink: 0; padding: 6px 12px; }
	.m4-mien__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-prov img { display: none; }
	.m4-prov__name { white-space: normal; line-height: 1.25; font-size: 0.86rem; }
	.m4-prov { padding: 8px 10px; min-height: 48px; }
	.m4-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m4-extremes { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.m4-hero__rays { animation: none; }
}