/*
 * Trang lên kế hoạch: bản đồ chung (views/map.html) và Bình Liêu tuần này (views/week.html).
 * Dùng biến màu của detail.css (--dt-*).
 */

.dt-hero.dt-hero--short {
	min-height: 46vh;
}

.pl-page {
	--pl-location: #2e6b4a;
	--pl-hotel: #b7791f;
	--pl-restaurant: #c2410c;
}

/* ---------- Bộ lọc ---------- */

.pl-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.pl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--dt-line);
	border-radius: 999px;
	background: var(--dt-card);
	color: var(--dt-ink);
	font: 500 14px/1.2 var(--dt-sans);
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}

.pl-chip span {
	color: var(--dt-muted);
	font-size: 12px;
}

.pl-chip:hover,
.pl-chip:focus-visible {
	border-color: var(--dt-moss);
	outline: none;
}

.pl-chip.active {
	background: var(--dt-forest);
	border-color: var(--dt-forest);
	color: #fff;
}

.pl-chip.active span {
	color: rgba(255, 255, 255, .75);
}

.pl-chip--location .fa { color: var(--pl-location); }
.pl-chip--hotel .fa { color: var(--pl-hotel); }
.pl-chip--restaurant .fa { color: var(--pl-restaurant); }
.pl-chip.active .fa { color: #fff; }

.pl-select select {
	min-width: 180px;
	padding: 8px 12px;
	border: 1px solid var(--dt-line);
	border-radius: 10px;
	background: var(--dt-card);
	color: var(--dt-ink);
	font: 500 14px var(--dt-sans);
}

/* ---------- Bản đồ ---------- */

.pl-map-wrap {
	border-radius: var(--dt-radius);
	overflow: hidden;
	box-shadow: var(--dt-shadow);
	background: var(--dt-moss-soft);
}

.pl-map {
	height: 64vh;
	min-height: 420px;
	max-height: 720px;
	font-family: var(--dt-sans);
}

.pl-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 2px 0;
	font-size: 13px;
	color: var(--dt-muted);
}

.pl-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pl-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	font-style: normal;
}

.pl-dot--location { background: var(--pl-location); }
.pl-dot--hotel { background: var(--pl-hotel); }
.pl-dot--restaurant { background: var(--pl-restaurant); }

.pl-dot--commune {
	width: 20px;
	height: 20px;
	background: rgba(28, 53, 40, .85);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
}

/* khung ghim trên nền Google Maps (OverlayView), bản Leaflet dùng divIcon */
.pl-gpin {
	position: absolute;
	cursor: pointer;
}

.pl-gpin:focus-visible {
	outline: 2px solid var(--dt-moss);
	outline-offset: 2px;
}

/* ghim: vòng màu theo loại, icon font-awesome ở giữa */
.pl-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

.pl-pin .fa {
	transform: rotate(45deg);
	color: #fff;
	font-size: 13px;
}

.pl-pin--location { background: var(--pl-location); }
.pl-pin--hotel { background: var(--pl-hotel); }
.pl-pin--restaurant { background: var(--pl-restaurant); }

/* vòng gom theo xã */
.pl-commune {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

.pl-commune b {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(28, 53, 40, .88);
	border: 2px solid #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	color: #fff;
	font: 600 14px var(--dt-sans);
}

.pl-commune span {
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .9);
	color: var(--dt-ink);
	font: 600 11px var(--dt-sans);
}

.pl-popup {
	width: 220px;
	font-family: var(--dt-sans);
}

.pl-popup img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
}

.pl-popup__type {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.pl-popup__name {
	display: block;
	margin: 2px 0;
	font: 600 15px/1.3 var(--dt-serif);
	color: var(--dt-ink) !important;
}

.pl-popup__sub {
	margin: 0 0 8px !important;
	font-size: 12px;
	color: var(--dt-muted);
}

.pl-popup__links {
	display: flex;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
}

.pl-popup__links a {
	color: var(--dt-moss) !important;
}

.pl-popup ul {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	max-height: 220px;
	overflow-y: auto;
}

.pl-popup li + li {
	border-top: 1px solid var(--dt-line);
}

.pl-popup li a {
	display: flex;
	gap: 6px;
	align-items: baseline;
	padding: 6px 0;
	color: var(--dt-ink) !important;
	font-size: 13px;
}

.pl-popup li .fa {
	width: 14px;
	flex: none;
}

.pl-popup__note {
	margin: 8px 0 0 !important;
	font-size: 11px;
	color: var(--dt-muted);
}

/* ---------- Danh sách theo xã ---------- */

.pl-group + .pl-group {
	margin-top: 26px;
}

.pl-group h3 {
	margin: 0 0 10px;
	font: 600 17px var(--dt-serif);
	color: var(--dt-ink);
}

.pl-group h3 small {
	margin-left: 6px;
	font: 400 13px var(--dt-sans);
	color: var(--dt-muted);
}

.pl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.pl-card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--dt-line);
	border-radius: 12px;
	background: var(--dt-card);
	color: inherit !important;
	text-decoration: none !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pl-card:hover {
	border-color: var(--dt-moss);
	box-shadow: var(--dt-shadow);
}

.pl-card img,
.pl-card__noimg {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--dt-moss-soft);
}

.pl-card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dt-moss);
	font-size: 20px;
}

.pl-card__body {
	min-width: 0;
}

.pl-card__type {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pl-card__type--location { color: var(--pl-location); }
.pl-card__type--hotel { color: #8a5a12; }
.pl-card__type--restaurant { color: var(--pl-restaurant); }

.pl-card__name {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--dt-ink);
}

.pl-card__sub {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--dt-muted);
}

.pl-card__pin {
	margin-left: 4px;
	color: var(--dt-moss);
	font-size: 11px;
}

.pl-empty {
	padding: 18px;
	border: 1px dashed var(--dt-line);
	border-radius: 12px;
	color: var(--dt-muted);
	text-align: center;
}

/* ---------- Bình Liêu tuần này ---------- */

/* khoảng cách giữa các mục (leo núi, thời tiết, mùa, lễ hội), giống trang thời tiết */
.wk-page .container > * + * {
	margin-top: 56px;
}

.wk-climb {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.wk-day {
	padding: 16px;
	border-radius: var(--dt-radius);
	background: var(--dt-card);
	box-shadow: var(--dt-shadow);
	border-top: 4px solid var(--dt-line);
}

.wk-day--good { border-top-color: #2e7d4f; }
.wk-day--caution { border-top-color: #c08526; }
.wk-day--bad { border-top-color: #b42318; }

.wk-day__date {
	font-size: 13px;
	color: var(--dt-muted);
}

.wk-day__verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	font: 600 18px var(--dt-serif);
	color: var(--dt-ink);
}

.wk-day--good .wk-day__verdict .fa { color: #2e7d4f; }
.wk-day--caution .wk-day__verdict .fa { color: #c08526; }
.wk-day--bad .wk-day__verdict .fa { color: #b42318; }

.wk-day ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.5;
}

.wk-seasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.wk-season {
	display: block;
	overflow: hidden;
	border-radius: var(--dt-radius);
	background: var(--dt-card);
	box-shadow: var(--dt-shadow);
	color: inherit !important;
	text-decoration: none !important;
}

.wk-season img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.wk-season__body {
	padding: 12px 14px 14px;
}

.wk-season__when {
	font-size: 12px;
	font-weight: 600;
	color: var(--dt-gold);
}

.wk-season__name {
	margin: 2px 0 4px;
	font: 600 17px var(--dt-serif);
	color: var(--dt-ink);
}

.wk-season__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dt-text);
}

.wk-events {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-event {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 0;
}

.wk-event + .wk-event {
	border-top: 1px solid var(--dt-line);
}

.wk-event__date {
	flex: none;
	width: 64px;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--dt-moss-soft);
	color: var(--dt-forest);
	text-align: center;
	line-height: 1.2;
}

.wk-event__date b {
	display: block;
	font: 600 20px var(--dt-serif);
}

.wk-event__date small {
	font-size: 11px;
}

.wk-event__name {
	display: block;
	font-weight: 600;
	color: var(--dt-ink) !important;
}

.wk-event__when {
	font-size: 13px;
	color: var(--dt-muted);
}

.wk-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #e7f4ec;
	color: #2e7d4f;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

.wk-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

@media only screen and (max-width: 575px) {
	.pl-map {
		height: 58vh;
		min-height: 360px;
	}

	.pl-select,
	.pl-select select {
		width: 100%;
	}

	.pl-chip {
		padding: 7px 11px;
		font-size: 13px;
	}
}