:root {
	--main: #1f8a4c;
	--main-dark: #146b38;
	--ink: #173028;
	--muted: #5d6b64;
	--line: #e4eee8;
	--soft: #f4f7f5;
	--footer: #0e3d32;
	--amber: #f0b429;
	--shadow: 0 10px 28px rgba(16, 40, 24, 0.08);
}

body.hg {
	background: var(--soft);
	color: var(--ink);
	font-family: "Segoe UI", system-ui, sans-serif;
}
.container { width: min(1180px, calc(100% - 40px)); }

.hg-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	box-shadow: 0 1px 0 rgba(14, 61, 50, 0.08);
}
.head-bar {
	min-height: 74px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.hg-header .brand,
.hg-footer .brand {
	position: static;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 0;
}
.hg-header .brand img.logo-mark,
.hg-footer .brand img.logo-mark {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background: #fff;
	flex: 0 0 auto;
}
.logo-slot { display: flex; flex: 0 0 auto; }
.brand-name {
	display: flex;
	flex-direction: column;
	color: var(--main-dark);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.05;
	white-space: nowrap;
}
.brand-name .site-title { color: inherit; font: inherit; }
.center-copy h2 span.hg-plain, .feature-card h2 span.hg-plain { color: inherit; }
.brand-name small {
	margin-top: 2px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.hg-footer .brand-name { color: #fff; }
.hg-footer .brand-name small { color: #d7efe4; }
.hg-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
}
.hg-nav > a, .hg-nav .drop-toggle {
	background: transparent;
	border: 0;
	color: #24362e;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 6px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
	white-space: nowrap;
}
.hg-nav .icon { width: 14px; height: 14px; }
.hg-nav > a.is-active, .hg-nav > a:hover, .hg-nav .drop-toggle:hover { color: var(--main); }
.hg-nav .nav-drop { position: relative; }
.hg-nav .drop-menu {
	top: 38px;
	left: 0;
	right: auto;
	min-width: 190px;
	border: 1px solid var(--line);
}
.hg-nav .nav-drop:hover .drop-menu,
.hg-nav .nav-drop:focus-within .drop-menu,
.hg-nav .nav-drop.is-open .drop-menu { display: grid; }
.head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 0;
	width: 34px;
	height: 34px;
	place-items: center;
	cursor: pointer;
}
.nav-toggle img { width: 28px; height: 28px; display: block; object-fit: contain; }
body.nav-open { overflow: hidden; }
.nav-drawer { position: fixed; inset: 0; z-index: 90; }
.nav-drawer[hidden] { display: none; }
.nav-drawer-backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(8, 28, 20, .46);
	opacity: 0;
	cursor: pointer;
	transition: opacity .28s ease;
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(300px, 82vw);
	background: #fff;
	padding: 0 0 24px;
	overflow: auto;
	box-shadow: 12px 0 32px rgba(8, 28, 20, .16);
	transform: translateX(-105%);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid var(--line);
}
.nav-drawer-brand {
	position: static;
	width: auto;
	height: auto;
	min-width: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.nav-drawer-brand img.logo-mark {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.nav-drawer-brand .brand-name { font-size: 15px; }
.nav-drawer-brand .brand-name small { font-size: 10px; }
.nav-drawer-head button {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--ink);
}
.nav-drawer-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid #eef4f0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
.nav-drawer-links a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1.5px solid #c3d4cb;
	border-right: 1.5px solid #c3d4cb;
	transform: rotate(45deg);
}
.nav-drawer-links a:hover,
.nav-drawer-links a.is-current { background: #f4faf6; color: var(--main); }
.nav-drawer-links a.is-current::after { border-color: var(--main); }
.nav-drawer-join {
	display: block;
	margin: 16px 14px 0;
	padding: 12px 14px;
	border-radius: 999px;
	background: var(--main);
	color: #fff;
	text-align: center;
	font-weight: 700;
}
.nav-drawer-join:hover { background: var(--main-dark); color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.nav-drawer-backdrop, .nav-drawer-panel, .hg-chat-panel { transition: none; }
}
.icon-link {
	width: 38px;
	height: 38px;
	border: 0;
	padding: 0;
	background: transparent;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #24362e;
	cursor: pointer;
}
body.search-open { overflow: hidden; }
.search-pop { position: fixed; inset: 0; z-index: 80; }
.search-pop[hidden] { display: none; }
.search-pop-backdrop { position: absolute; inset: 0; border: 0; background: rgba(8, 28, 20, .46); cursor: pointer; }
.search-pop-panel {
	position: relative;
	width: min(640px, calc(100% - 32px));
	margin: 12vh auto 0;
	background: #fff;
	border-radius: 20px;
	padding: 18px 18px 12px;
	box-shadow: 0 24px 60px rgba(8, 28, 20, .28);
}
.search-pop-title { margin: 0 0 10px; font-weight: 800; color: #12382c; }
.search-pop-form { display: flex; gap: 8px; align-items: center; }
.search-pop-form input {
	flex: 1;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0 14px;
	font: inherit;
}
.search-pop-x {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #f3f6f4;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #24362e;
}
.search-suggest { display: grid; margin-top: 10px; max-height: min(420px, 52vh); overflow: auto; }
.search-suggest a {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 12px;
	color: inherit;
}
.search-suggest a.is-active,
.search-suggest a:hover { background: #f3faf6; }
.search-suggest img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: #eef8f2; }
.search-suggest strong { display: block; font-size: 15px; }
.search-suggest strong mark { background: #fff3c4; color: inherit; border-radius: 3px; }
.search-suggest small { color: var(--main); font-weight: 700; }
.search-suggest .search-all {
	display: block;
	grid-template-columns: none;
	position: sticky;
	bottom: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	text-align: center;
	color: var(--main);
	font-weight: 800;
	padding: 12px 8px;
}
.search-empty { margin: 8px; color: var(--muted); }
.icon-link:hover { background: var(--soft); color: var(--main); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-amber { background: var(--amber); color: #1c2520; }
.btn-amber:hover { filter: brightness(.96); }

.hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	background: #08281c;
	color: #fff;
	display: flex;
	align-items: center;
	padding: 42px 0 56px;
}
.hero-bg {
	position: absolute;
	inset: -6%;
	background-size: cover;
	background-position: center 40%;
	z-index: 0;
}
.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 24px;
	align-items: end;
	width: min(1180px, calc(100% - 40px));
}
.hero-kicker, .hero-sub, .hero-points, .hero-note { color: #fff; }
.hero-kicker { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.hero-title-wrap { display: inline-block; max-width: 100%; }
.hero-title {
	margin: 0;
	color: #fff;
	text-align: left;
	font-size: clamp(56px, 7vw, 92px);
	line-height: 1;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -1px;
	text-shadow: 0 10px 28px rgba(0, 0, 0, .35);
	display: inline-block;
	padding: 0 0.04em;
}
.hero-underline {
	display: block;
	width: 96%;
	height: clamp(14px, 1.8vw, 22px);
	margin: 2px auto 0;
	overflow: visible;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}
.hero-sub { margin: 12px 0 16px; font-size: 18px; }
.hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.hero-points li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
}
.hero-points .icon { width: 16px; height: 16px; }
.hero-search {
	display: grid;
	grid-template-columns: 1.4fr .7fr 1fr auto;
	gap: 8px;
	background: #fff;
	color: var(--ink);
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.hero-search input, .hero-search select {
	height: 48px;
	border: 0;
	background: #f7f8f7;
	border-radius: 12px;
	padding: 0 12px;
	width: 100%;
}
.hero-note {
	margin: 0 0 24px;
	font-family: "UTM Spring", cursive;
	font-size: 28px;
	line-height: 1.25;
	text-align: right;
	text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

.quick-row { background: #fff; padding: 18px 0 8px; }
.quick-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 8px;
}
.quick-grid a {
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #24362e;
}
.quick-grid span {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #f3faf6;
	color: var(--main);
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px #e5f2ea;
}
.quick-grid span img { width: 40px; height: 40px; object-fit: contain; }
.quick-grid a:hover { color: var(--main); }
.quick-grid a:hover span { background: #e7f6ee; color: var(--main); }

.mua-hoa-card { display: none; }

.home-section { padding-top: 28px; }
.home-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 22px;
	align-items: start;
}
.block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 14px;
}
.block-head h2 {
	margin: 0;
	font-size: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.block-head a { color: var(--main); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.spot-grid, .trip-row { display: grid; gap: 14px; }
.spot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
.spot-card, .trip-tile, .weather-card, .help-card, .side-news, .place-card, .side-card, .form-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.spot-card img, .trip-tile img { width: 100%; height: 132px; object-fit: cover; }
.spot-card span { display: grid; gap: 2px; padding: 10px 12px 12px; }
.spot-card strong { font-size: 15px; }
.spot-card em, .spot-card small { font-style: normal; color: var(--muted); font-size: 13px; }
.spot-card em { display: flex; align-items: center; gap: 4px; color: var(--main); font-weight: 600; }
.spot-card .icon { width: 14px; height: 14px; }
.trip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trip-tile { position: relative; display: flex; flex-direction: column; }
.trip-tile .night-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	color: var(--main);
	font-weight: 800;
	border-radius: 999px;
	padding: 4px 8px;
	font-size: 12px;
}
.trip-tile div { padding: 12px; display: grid; gap: 6px; }
.trip-tile h3 { margin: 0; font-size: 16px; }
.trip-tile p { margin: 0; color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.trip-tile .icon { width: 14px; height: 14px; }
.trip-tile .btn { justify-self: start; margin-top: 4px; }

.prep-banner {
	margin-top: 22px;
	display: grid;
	grid-template-columns: 180px 1fr;
	background: linear-gradient(90deg, #0e3d32, #1f8a4c);
	color: #fff;
	border-radius: 18px;
	overflow: hidden;
	min-height: 180px;
}
.prep-banner img { width: 100%; height: 100%; object-fit: cover; }
.prep-banner div { padding: 22px 22px 18px; }
.prep-banner h2 { margin: 0 0 6px; font-size: 26px; }
.prep-banner p { margin: 0 0 12px; }
.prep-banner form { display: flex; gap: 8px; }
.prep-banner input {
	flex: 1;
	border: 0;
	border-radius: 999px;
	height: 44px;
	padding: 0 14px;
}
.home-side { display: grid; gap: 14px; }
.weather-card {
	background: linear-gradient(160deg, #1f8a4c, #0e3d32);
	color: #fff;
	padding: 14px;
}
.weather-now strong { font-size: 42px; display: block; line-height: 1; }
.weather-now span { font-weight: 700; }
.weather-now p, .weather-note { margin: 8px 0 0; color: rgba(255,255,255,.86); font-size: 13px; }
.weather-now a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.block-head.light h2 { color: #fff; font-size: 16px; }
.help-card, .side-news { padding: 14px; }
.help-card h2, .side-news h2 { margin: 0; font-size: 18px; }
.help-card p { color: var(--muted); }
.help-actions { display: grid; gap: 8px; }
.help-actions .btn { width: 100%; }
.side-post {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}
.side-post img { width: 72px; height: 64px; object-fit: cover; border-radius: 10px; }
.side-post strong, .side-post small, .side-post em { display: block; }
.side-post small, .side-post em { color: var(--muted); font-style: normal; font-size: 12px; }

.community-band { padding: 10px 0 36px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-grid article {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow);
}
.stat-grid strong { display: block; color: var(--main); font-size: 28px; }
.stat-grid span { color: var(--muted); }

.hg-footer { background: var(--footer); color: #e7f5ee; padding: 22px 0; }
.footer-bar { display: flex; align-items: center; gap: 22px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.to-top {
	right: 22px;
	bottom: 96px;
	z-index: 40;
	width: 40px;
	height: 40px;
	border: 1px solid #d5e5db;
	background: #fff;
	color: var(--main);
	box-shadow: 0 6px 16px rgba(16, 40, 24, .12);
	display: none;
	place-items: center;
	padding: 0;
}
.to-top svg { width: 18px; height: 18px; display: block; }
.to-top.is-on { display: grid; }
body:has(#chat-toggle:checked) .to-top { visibility: hidden; pointer-events: none; }
.to-top:hover { background: var(--main); color: #fff; border-color: var(--main); }
.footer-script {
	margin: 0;
	font-family: "UTM Spring", cursive;
	font-size: 22px;
	line-height: 1.15;
	text-align: right;
}

.tabbar { display: none; }
.page-hero { background: transparent; }
.page-hero h1 { color: #12382c; }
.place-media { height: 170px; }
.place-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	background: #fff;
	color: var(--main);
	border-radius: 999px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 800;
}
.place-distance { color: var(--muted); font-size: 13px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip {
	background: #fff;
	border-radius: 999px;
	padding: 8px 14px;
	font-weight: 700;
	border: 1px solid var(--line);
}
.chip.is-active { background: var(--main); color: #fff; border-color: var(--main); }

.dest-hero img, .cover-photo { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tag-row span { background: #e8f6ee; color: var(--main-dark); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 13px; }
.fact-list { display: grid; gap: 8px; margin: 0; }
.fact-list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.gallery-row img { height: 90px; width: 100%; object-fit: cover; border-radius: 12px; }
.day-card { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.day-card h2 { margin: 0 0 8px; font-size: 18px; }
.day-card li { margin: 6px 0; }

.weather-page { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.forecast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.forecast article, .day-forecast { background: #fff; border-radius: 14px; padding: 12px; text-align: center; box-shadow: var(--shadow); }
.week-list { display: grid; gap: 8px; }
.week-list div { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 10px 12px; }

.thread { display: grid; gap: 10px; }
.bubble { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); max-width: 640px; }
.bubble.mine { background: #e7f6ee; margin-left: auto; }
.composer { display: flex; gap: 8px; margin-top: 12px; }
.composer input, .composer textarea { flex: 1; }

.community-post { background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.community-post header { display: flex; gap: 10px; align-items: center; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.post-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.post-photos img { height: 140px; width: 100%; object-fit: cover; border-radius: 12px; }
.map-frame { width: 100%; height: 460px; border: 0; border-radius: 18px; }

.service-pick { display: grid; gap: 8px; margin: 8px 0 14px; }
.tour-offer {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-bottom: 16px;
}
.tour-offer img { width: 120px; height: 100%; object-fit: cover; }
.tour-offer div { padding: 12px 12px 12px 0; }

@media (max-width: 1100px) {
	.hg-nav { display: none; }
	.quick-grid { grid-template-columns: repeat(5, 1fr); }
	.spot-grid, .trip-row, .stat-grid { grid-template-columns: 1fr 1fr; }
	.home-split, .weather-page, .detail-grid, .about-grid, .footer-bar { grid-template-columns: 1fr; display: grid; }
	.footer-end { margin-left: 0; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero-note {
		margin: 16px 0 0;
		max-width: 16em;
		font-size: 22px;
		line-height: 1.35;
		text-align: left;
		text-wrap: balance;
	}
	.hero-note br { display: none; }
}
@media (max-width: 860px) {
	.head-actions .btn { display: none; }
	.nav-toggle { display: grid; }
	.hero { min-height: 0; padding: 16px 0 18px; }
	.hero-title { font-size: 42px; }
	.hero-sub { margin: 8px 0 10px; }
	.hero-points { margin-bottom: 12px; }
	.hero-note { margin-top: 10px; font-size: 20px; }
	.hero-search { gap: 6px; padding: 6px; }
	.hero-search input, .hero-search select { height: 42px; }
	.section { padding: 26px 0; }
	.home-section { padding-top: 10px; }
	.home-intro { padding: 12px 0 18px; }
	.utility-section { padding: 6px 0 16px; }
	.community-band { padding: 0 0 12px; }
	.stay-section { padding-bottom: 6px; }
	.page-hero { padding: 14px 0 2px; }
	.container { width: min(1320px, calc(100% - 28px)); }
	.feature-grid { margin-top: 16px; gap: 12px; }
	.feature-card { min-height: 0; padding: 14px; column-gap: 12px; }
	.feature-card .more, .feature-card .btn { margin-top: 8px; }
	.block-head { margin: 0 0 10px; }
	.spot-grid { margin-bottom: 14px; gap: 10px; }
	.spot-card img, .trip-tile img { height: 108px; }
	.trip-row { gap: 10px; }
	.prep-banner { margin-top: 14px; min-height: 0; }
	.prep-banner img { height: 120px; }
	.prep-banner div { padding: 14px; }
	.prep-banner h2 { font-size: 22px; }
	.home-split, .event-layout, .detail-grid, .news-layout { gap: 14px; }
	.lead { margin-bottom: 12px; font-size: 18px; }
	.dest-head { margin-bottom: 8px; gap: 6px; }
	.center-copy h2 { font-size: 26px; }
	.food-carousel { margin-top: 12px; width: min(1320px, calc(100% - 28px)); }
	.event-feature img { height: 180px; }
	.news-feature { min-height: 220px; }
	.quick-row { padding: 10px 0 2px; }
	.quick-grid { gap: 8px 4px; }
	.portrait-row { gap: 10px; }
	.portrait-row .portrait-card { height: 176px; }
	.portrait-row .portrait-card:nth-child(5) { max-width: none; height: 140px; }
	.card-grid, .trip-grid { gap: 12px; }
	.hg-footer { padding: 16px 0; }
	.footer-bar { gap: 12px; }
	.hero-search, .prep-banner form, .prep-banner, .forecast { grid-template-columns: 1fr; display: grid; }
	.quick-grid { grid-template-columns: repeat(5, 1fr); }
	.spot-grid, .trip-row, .stat-grid, .card-grid { grid-template-columns: 1fr; }
	.stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.mua-hoa-card {
		display: grid;
		grid-template-columns: 92px 1fr;
		gap: 10px;
		align-items: center;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		margin-top: 14px;
		box-shadow: var(--shadow);
	}
	.mua-hoa-card img { height: 72px; width: 92px; object-fit: cover; }
	.mua-hoa-card small { color: var(--main); font-weight: 700; }
	.tabbar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 35;
		background: #fff;
		border-top: 1px solid var(--line);
		padding: 6px 4px 8px;
	}
	.tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: #607068; }
	.tabbar img { width: 22px; height: 22px; object-fit: contain; display: block; }
	.tabbar a.is-active { color: var(--main); }
	body.hg { padding-bottom: 68px; }
	.hg-chat-fab { bottom: 78px; }
	.hg-chat-panel { bottom: 136px; }
	.to-top { bottom: 132px; right: 18px; }
	.dest-hero img, .cover-photo, .detail-cover { height: 220px; }
}

@media print {
	.hg-header, .hg-footer, .tabbar, .chat-btn, .hg-chat, .to-top, .prep-banner, .home-side { display: none !important; }
}

.hg-chat-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 64px;
	height: 64px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.hg-chat-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 45;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.hg-chat-fab img { width: 64px; height: 64px; display: block; }
.hg-chat-panel {
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 18px;
	bottom: 94px;
	z-index: 46;
	width: min(360px, calc(100% - 24px));
	height: min(540px, calc(100vh - 120px));
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(16, 40, 24, 0.18);
	overflow: hidden;
	flex-direction: column;
	transform: translateY(16px) scale(.96);
	transform-origin: right bottom;
	transition: opacity .24s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
}
.hg-chat-toggle:checked ~ .hg-chat-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.hg-chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--footer);
	color: #fff;
}
.hg-chat-head small { display: flex; align-items: center; gap: 6px; color: #d7efe4; }
.hg-chat-head small span { width: 8px; height: 8px; border-radius: 50%; background: #7dffb2; }
.hg-chat-head label { width: 32px; height: 32px; display: grid; place-items: center; font-size: 24px; cursor: pointer; }
.hg-chat-body { flex: 1; overflow: auto; padding: 14px; display: grid; align-content: start; gap: 10px; background: #f6faf7; }
.hg-chat-msg { display: flex; }
.hg-chat-msg.is-me { justify-content: flex-end; }
.hg-chat-bubble { max-width: 86%; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(16, 40, 24, 0.06); }
.hg-chat-msg.is-me .hg-chat-bubble { background: #e7f6ee; }
.hg-chat-bubble p { margin: 0; }
.hg-chat-bubble small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.hg-chat-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-chat-topics button, .hg-chat-card button, .hg-chat-composer button {
	border: 0;
	background: var(--main);
	color: #fff;
	border-radius: 999px;
	padding: 8px 12px;
	font-weight: 700;
	cursor: pointer;
}
.hg-chat-topics button { background: #fff; color: var(--main-dark); border: 1px solid var(--line); }
.hg-chat-topics button.is-selected { background: var(--main); color: #fff; }
.hg-chat-card { background: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.hg-chat-card p, .hg-chat-card form { margin: 0; display: grid; gap: 8px; }
.hg-chat-card input[type="text"], .hg-chat-card input[type="tel"], .hg-chat-composer input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
}
.hg-chat-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.hg-chat-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.hg-chat-composer input { flex: 1; }
.hg-chat-composer[hidden],
#chat-greeting-message[hidden],
#chat-quick-buttons[hidden],
#chat-start-form-container[hidden] { display: none; }

@media (max-width: 860px) {
	.hg-chat-toggle,
	.hg-chat-fab,
	.hg-chat-fab img { width: 48px; height: 48px; }
	.hg-chat-toggle,
	.hg-chat-fab { bottom: 72px; }
	.hg-chat-panel { bottom: 132px; height: min(480px, calc(100vh - 152px)); }
}

@media (prefers-reduced-motion: no-preference) {
	.hero-bg { animation: hg-kenburns 18s ease-out both; }
	.hero-kicker,
	.hero-title,
	.hero-underline,
	.hero-sub,
	.hero-points li,
	.hero-search,
	.hero-note { animation: hg-rise .7s cubic-bezier(.22, 1, .36, 1) backwards; }
	.hero-title,
	.hero-underline { animation-delay: .12s; }
	.hero-sub { animation-delay: .22s; }
	.hero-points li:nth-child(1) { animation-delay: .3s; }
	.hero-points li:nth-child(2) { animation-delay: .38s; }
	.hero-points li:nth-child(3) { animation-delay: .46s; }
	.hero-points li:nth-child(4) { animation-delay: .54s; }
	.hero-search { animation-delay: .62s; }
	.hero-note { animation-delay: .72s; }

	.quick-grid a,
	.spot-card,
	.trip-tile,
	.feature-card,
	.dest-card,
	.utility-card,
	.utility-more,
	.food-card,
	.stat-grid article,
	.side-post,
	.news-side a,
	.news-feature,
	.event-list a,
	.help-card,
	.weather-card,
	.prep-banner,
	.portrait-row .portrait-card,
	.btn,
	.car-btn,
	.block-head a,
	.cal-grid button.has,
	.event-tabs button {
		transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background .25s ease, color .25s ease, filter .35s ease, border-color .25s ease;
	}
	.quick-grid span,
	.spot-card img,
	.trip-tile img,
	.dest-card img,
	.food-card img,
	.news-feature img,
	.feature-card .ficon-img,
	.utility-card img,
	.utility-card .icon,
	.utility-ico,
	.side-post img,
	.news-side img,
	.block-head a .icon,
	.feature-card .more .icon,
	.more .icon {
		transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .4s ease, background .25s ease, box-shadow .35s ease;
	}

	.quick-grid a:hover { transform: translateY(-4px); }
	.quick-grid a:hover span {
		transform: scale(1.08);
		box-shadow: 0 10px 18px rgba(20, 107, 56, .16);
	}
	.spot-card:hover,
	.trip-tile:hover,
	.feature-card:hover,
	.dest-card:hover,
	.utility-card:hover,
	.utility-more:hover,
	.stat-grid article:hover,
	.help-card:hover,
	.weather-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 16px 34px rgba(16, 40, 24, .14);
	}
	.spot-card:hover img,
	.trip-tile:hover img,
	.dest-card:hover img,
	.news-feature:hover img { transform: scale(1.07); }
	.feature-card:hover .ficon-img { transform: scale(1.08) rotate(-6deg); }
	.feature-card:hover .more,
	.block-head a:hover { gap: 8px; }
	.feature-card:hover .more .icon,
	.block-head a:hover .icon,
	.more:hover .icon { transform: translateX(4px); }
	.utility-card:hover { background: #fff; }
.utility-card:hover .utility-ico { background: #dff3e8; }
.utility-card:hover img { transform: scale(1.08); }
.utility-card:hover .icon { transform: translateX(4px); }
	.food-card:hover img { transform: scale(1.06); filter: brightness(.72); }
	.food-card:hover span { letter-spacing: .03em; }
	.portrait-row .portrait-card:hover {
		transform: translateY(-8px);
		filter: drop-shadow(8px 18px 16px rgba(29, 43, 39, .22));
	}
	.side-post:hover,
	.news-side a:hover,
	.event-list a:hover { transform: translateX(4px); }
	.side-post:hover img,
	.news-side a:hover img { transform: scale(1.06); }
	.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(16, 40, 24, .16); }
	.btn:active { transform: translateY(0); }
	.car-btn:hover { transform: scale(1.08); }
	.car-prev:hover { transform: scale(1.08); }
	.prep-banner:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14, 61, 50, .28); }
	.hero-search { transition: box-shadow .3s ease, transform .3s ease; }
	.hero-search:focus-within {
		transform: translateY(-2px);
		box-shadow: 0 20px 46px rgba(0, 0, 0, .28);
	}
	.cal-grid button.has:hover,
	.event-tabs button:hover { transform: translateY(-2px); }

	.hg-rise:not(.is-in) {
		opacity: 0;
		transform: translateY(24px);
	}
	.hg-rise.is-in {
		animation: hg-rise .7s cubic-bezier(.22, 1, .36, 1) backwards;
		animation-delay: var(--hg-d, 0ms);
	}
}

.utility-section { background: #fff; padding: 18px 0 42px; }
.utility-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	padding: 32px 28px 28px;
	border-radius: 28px;
	background:
		radial-gradient(380px 180px at 0 0, rgba(242, 193, 78, .22), transparent 70%),
		linear-gradient(145deg, #f4fbf7 0%, #e5f6ec 100%);
}
.utility-copy h2 {
	margin: 0 0 10px;
	color: #12382c;
	font-size: clamp(32px, 3.2vw, 46px);
	font-weight: 400;
	line-height: 1.12;
}
.utility-copy p { margin: 0 0 18px; max-width: 62ch; color: #4d6258; line-height: 1.55; }
.utility-panel .utility-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	justify-content: stretch;
}
.utility-panel .utility-card {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 86px;
	padding: 12px 14px;
	border-radius: 16px;
	background: #fff;
	text-align: left;
	box-shadow: 0 8px 22px rgba(16, 40, 24, .06);
}
.utility-ico {
	width: 52px;
	height: 52px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: #eef8f2;
}
.utility-panel .utility-card img { width: 34px; height: 34px; object-fit: contain; }
.utility-panel .utility-card strong { flex: 1; font-size: 16px; line-height: 1.25; }
.utility-panel .utility-card .icon { width: 18px; height: 18px; flex: none; color: var(--main); }

@media (max-width: 860px) {
	.utility-section { padding: 6px 0 16px; }
	.utility-panel { gap: 12px; padding: 16px 14px; }
	.utility-copy p { max-width: none; }
	.utility-panel .utility-row { grid-template-columns: 1fr 1fr; }
	.utility-panel .utility-card {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		min-height: 124px;
		text-align: center;
	}
	.utility-panel .utility-card strong { flex: none; }
	.utility-panel .utility-card .icon { display: none; }
}

.util-hero h1 {
	margin: 4px 0 8px;
	color: var(--main);
	font-size: clamp(40px, 5vw, 60px);
}
.util-lead { max-width: 640px; margin: 0; color: #4d6258; }
.util-hero .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.util-hero .filter-bar select { min-width: min(280px, 100%); border: 1px solid var(--line); }
.util-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.util-entry {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--shadow);
	color: inherit;
}
.util-ico {
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	background: linear-gradient(180deg, #f6fbf8, #e5f6ec);
}
.util-ico img { width: 48px; height: 48px; object-fit: contain; }
.util-copy { display: grid; gap: 2px; min-width: 0; }
.util-copy small, .util-kind { color: var(--main); font-weight: 700; font-size: 13px; }
.util-kind { margin: 0 0 2px; }
.util-copy strong { font-size: 18px; line-height: 1.3; }
.util-copy em {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #4d6258;
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
}
.util-copy em .icon { width: 14px; height: 14px; color: var(--main); }
.util-copy > span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.util-go {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #eef8f2;
	color: var(--main);
}
.util-go .icon { width: 18px; height: 18px; }
.util-single-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.util-single-head h1 { margin: 0; }
.util-single-head .place-ward { margin: 4px 0 0; }
@media (max-width: 860px) {
	.util-grid { grid-template-columns: 1fr; }
	.util-entry { grid-template-columns: 64px minmax(0, 1fr); }
	.util-ico { width: 64px; height: 64px; }
	.util-go { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.util-entry, .util-go { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, background .25s ease, color .25s ease; }
	.util-entry:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16, 40, 24, .12); }
	.util-entry:hover .util-go { background: var(--main); color: #fff; }
}

.food-card span { transition: letter-spacing .35s ease; }
.hero-search input:focus,
.hero-search select:focus,
.prep-banner input:focus,
.news-form input:focus {
	outline: 2px solid #9ed9b5;
	background: #fff;
}

@keyframes hg-rise {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}
@keyframes hg-kenburns {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

@media (max-width: 860px) {
	.hero-search,
	.search-pop-panel,
	.spot-card,
	.trip-tile,
	.trip-card,
	.weather-card,
	.help-card,
	.side-news,
	.place-card,
	.side-card,
	.form-card,
	.prep-banner,
	.stat-grid article,
	.dest-hero img,
	.cover-photo,
	.detail-cover,
	.day-card,
	.forecast article,
	.day-forecast,
	.week-list div,
	.bubble,
	.community-post,
	.post-photos img,
	.map-frame,
	.tour-offer,
	.mua-hoa-card,
	.utility-panel,
	.utility-panel .utility-card,
	.utility-card,
	.utility-more,
	.utility-ico,
	.util-entry,
	.util-ico,
	.feature-card,
	.dest-card,
	.portrait-card,
	.portrait-row .portrait-card,
	.event-feature,
	.event-list a,
	.news-side a,
	.news-feature,
	.newsletter,
	.about-grid img,
	.cart-table,
	.gallery-row img,
	.hg-chat-panel,
	.hg-chat-card,
	.hg-chat-bubble {
		border-radius: 10px;
	}
}