/* TiewNai แผนที่รวมสถานที่ (v9.29.0) · ใช้คู่กับ js/atlas.js + inc/atlas.php */
.atl-sec { --atl-ac: var(--forest); }
.atl {
	--atl-h: 620px;
	--atl-list: 348px;
	position: relative;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(20, 67, 59, .07);
}

/* แถบกรองหมวด */
.atl-bar {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	background: #fff;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	position: relative; z-index: 2;
}
.atl-bar::-webkit-scrollbar { display: none; }
.atl-chip {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 7px;
	height: 36px; padding: 0 13px 0 10px;
	border: 1.5px solid var(--line); border-radius: 999px;
	background: #fff; color: var(--ink);
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
	cursor: pointer; white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.atl-chip .d {
	width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--c, var(--forest)); color: #fff; flex: 0 0 auto;
}
.atl-chip .d svg { width: 13px; height: 13px; }
.atl-chip .n { font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.atl-chip:hover { border-color: var(--c, var(--forest)); }
.atl-chip[aria-pressed="true"] { background: var(--c, var(--atl-ac)); border-color: var(--c, var(--atl-ac)); color: #fff; }
.atl-chip .d.dot { width: 12px; height: 12px; }
.atl-chip[aria-pressed="true"] .d.dot { background: #fff; }
.atl-chip[aria-pressed="true"] .n { color: rgba(255,255,255,.85); }
.atl-chip[aria-pressed="true"] .d { background: rgba(255,255,255,.22); }
.atl-chip.is-zero { opacity: .45; }
.atl-chip:focus-visible, .atl-ctl button:focus-visible, .atl-it:focus-visible { outline: 3px solid color-mix(in srgb, var(--jade) 55%, transparent); outline-offset: 2px; }
.atl-chip.is-all { padding-left: 13px; }
.atl-chip.is-good { --c: #1E7FC1; }
.atl-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 2px; background: var(--line); }

/* ตัวแผนที่ + รายการ */
.atl-body { display: grid; grid-template-columns: var(--atl-list) minmax(0, 1fr); height: var(--atl-h); }
.atl-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #FBFAF7; }
.atl-count { padding: 12px 16px 10px; font-size: 13.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.atl-count b { color: var(--ink); font-size: 16px; font-family: var(--font-head); }
.atl-count span { margin-left: 2px; }
.atl-items { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.atl-items li { margin: 0; }
.atl-it {
	display: flex; gap: 12px; align-items: center;
	padding: 8px; border-radius: 12px;
	color: var(--ink); text-decoration: none;
	border: 1.5px solid transparent;
	transition: background .12s, border-color .12s;
}
.atl-it:hover { background: #fff; border-color: color-mix(in srgb, var(--c) 45%, var(--line)); text-decoration: none; }
.atl-it.is-on { background: #fff; border-color: var(--c); box-shadow: 0 4px 14px rgba(20, 67, 59, .1); }
.atl-it.is-hv { background: #fff; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.atl-th { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; overflow: hidden; background: var(--bg-alt); }
.atl-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atl-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.atl-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atl-tx b { font-family: var(--font-head); font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atl-tx small { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-tx small i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 8px; }
.atl-tx small span { overflow: hidden; text-overflow: ellipsis; }
.atl-tx em { font-style: normal; font-size: 12px; font-weight: 600; color: #1E7FC1; }
.atl-tx em.good { color: #1F7A5E; }
.atl-tx em.ok { color: #9A7A10; }
.atl-tx em.me, .atl-count .me { color: #1E7FC1; }
.atl-count .me { font-weight: 700; margin-right: 4px; }
.atl-more { text-align: center; font-size: 13px; color: var(--ink-soft); padding: 10px 6px 14px; }
.atl-empty { margin: 18px 16px; font-size: 14px; color: var(--ink-soft); text-align: center; }
.atl-empty button { margin-top: 8px; border: 1.5px solid var(--forest); color: var(--forest); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }

.atl-map { position: relative; min-width: 0; min-height: 0; }
.atl-map-in { position: absolute; inset: 0; background: #EDEAE3; z-index: 1; }
.atl .leaflet-container { font: inherit; }
.atl .leaflet-control-attribution { font-size: 10.5px; background: rgba(255,255,255,.78); border-radius: 6px 0 0 0; }
.atl .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 12px 30px 0; }
.atl .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 36px; font-size: 20px; color: var(--ink); }
.atl .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.16); }

/* ปุ่มบนแผนที่ */
.atl-ctl { position: absolute; z-index: 500; top: 12px; right: 12px; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; }
.atl-ctl > * { pointer-events: auto; }
.atl-seg { display: inline-flex; background: #fff; border-radius: 12px; padding: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.atl-seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 7px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.atl-seg button[aria-pressed="true"] { background: var(--forest); color: #fff; }
.atl-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.atl-ib { width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.16); cursor: pointer; }
.atl-ib:hover { color: var(--forest); background: #F4F8F6; }
.atl-ib svg { width: 20px; height: 20px; }
.atl-ib.is-busy svg { animation: atl-spin 1s linear infinite; }
@keyframes atl-spin { to { transform: rotate(360deg); } }
.atl-ib .ex { display: none; }
.atl.is-fs .atl-ib .fs { display: none; }
.atl.is-fs .atl-ib .ex { display: block; }
.atl.is-fs .atl-ib[data-atl="fs"] { width: auto; padding: 0 12px 0 10px; gap: 6px; background: var(--forest); color: #fff; }
.atl.is-fs .atl-ib[data-atl="fs"]::after { content: "ปิดแผนที่"; font-size: 13.5px; font-weight: 700; }

.atl-hint {
	position: absolute; z-index: 600; left: 50%; top: 50%; transform: translate(-50%, -50%);
	background: rgba(15, 30, 26, .82); color: #fff; font-size: 14.5px; font-weight: 600;
	padding: 12px 18px; border-radius: 12px; max-width: 80%; text-align: center;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.atl-hint.on { opacity: 1; }

/* หมุด */
.atl-mk { background: none; border: 0; }
.atl-pin { position: relative; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); transition: transform .12s; }
.atl-pin svg { display: block; }
.atl-pin i { position: absolute; left: 0; right: 0; top: 0; height: 76%; display: flex; align-items: center; justify-content: center; color: #fff; }
.atl-mk.is-on { z-index: 1000 !important; }
.atl-cl { background: none; border: 0; }
.atl-cl span {
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .12s;
}
.atl-cl span b {
	display: flex; align-items: center; justify-content: center;
	width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%;
	background: #fff; color: var(--ink); font-family: var(--font-head); font-size: 14.5px; font-weight: 700;
}
.atl-cl:hover span, .atl-cl.is-hl span { transform: scale(1.14); }
.atl-cl.is-hl span b { background: #FFF7E3; }
.atl-me span { display: block; width: 22px; height: 22px; border-radius: 50%; background: #1E7FC1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30,127,193,.22), 0 2px 6px rgba(0,0,0,.3); }

/* ป๊อปอัป */
.atl-pop .leaflet-popup-content-wrapper { padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.atl-pop .leaflet-popup-content { margin: 0; width: 250px !important; font-size: 14px; line-height: 1.5; }
.atl-pop a.leaflet-popup-close-button { width: 28px; height: 28px; top: 6px; right: 6px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); font: 20px/26px sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.atl-pop-img { display: block; height: 128px; background: var(--bg-alt); }
.atl-pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atl-pop-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.atl-pop-tags { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 26px; }
.atl-pop-img + .atl-pop-b .atl-pop-tags { padding-right: 0; }
.atl-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 999px; padding: 2px 9px 2px 7px; }
.atl-tag.good { --c: #1E7FC1; padding-left: 9px; }
.atl-pop-t { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--ink) !important; text-decoration: none; margin-top: 2px; }
.atl-pop-t:hover { color: var(--forest) !important; text-decoration: underline; }
.atl-pop-b small { color: var(--ink-soft); font-size: 12.5px; }
.atl-pop-act { display: flex; gap: 8px; margin-top: 8px; width: 100%; }
.atl-pop-act a { flex: 1; text-align: center; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.atl-pop-act .go { background: var(--forest); color: #fff !important; }
.atl-pop-act .nav { border: 1.5px solid var(--line); color: var(--ink) !important; }
.atl-pop-act a:hover { filter: brightness(1.08); text-decoration: none; }

/* ลิงก์ใต้แผนที่ */
.atl-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.atl-links .ex-link { flex: initial; }

/* ---------- เต็มจอ ---------- */
html.atl-lock, html.atl-lock body { overflow: hidden !important; }
.atl.is-fs { position: fixed; inset: 0; z-index: 100000; border: 0; border-radius: 0; display: flex; flex-direction: column; box-shadow: none; }
.atl.is-fs .atl-body { flex: 1; height: auto; min-height: 0; }

/* ---------- จอกลาง ---------- */
@media (max-width: 1100px) {
	.atl { --atl-list: 300px; --atl-h: 560px; }
	.atl-th { width: 56px; height: 56px; flex-basis: 56px; }
}

/* ---------- มือถือ/แท็บเล็ตแนวตั้ง: แผนที่เต็มกว้าง รายการเป็นแถบเลื่อนแนวนอนใต้แผนที่ ---------- */
@media (max-width: 899px) {
	.atl { border-radius: 16px; }
	.atl-bar { padding: 10px 12px; }
	.atl-chip { height: 34px; font-size: 13.5px; }
	.atl-body { display: flex; flex-direction: column; height: auto; }
	.atl-map { order: 1; height: min(62vh, 460px); }
	.atl-side { order: 2; border-right: 0; border-top: 1px solid var(--line); }
	.atl-count { padding: 10px 14px 0; border: 0; }
	.atl-items { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 14px 14px; scroll-snap-type: x mandatory; scroll-padding: 14px; scrollbar-width: none; }
	.atl-items::-webkit-scrollbar { display: none; }
	.atl-items li { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
	.atl-it { background: #fff; border-color: var(--line); height: 100%; box-sizing: border-box; }
	.atl-more { flex: 0 0 150px !important; display: flex; align-items: center; justify-content: center; }
	.atl-seg button { padding: 6px 9px; font-size: 12.5px; }
	.atl .leaflet-bottom.leaflet-right .leaflet-control-zoom { display: none; }
	.atl-ctl { top: 10px; right: 10px; }

	/* เต็มจอบนมือถือ: รายการลอยทับล่างแผนที่ */
	.atl.is-fs .atl-body { position: relative; }
	.atl.is-fs .atl-map { height: auto; flex: 1; }
	.atl.is-fs .atl-side { position: absolute; left: 0; right: 0; bottom: 0; z-index: 700; background: transparent; border: 0; pointer-events: none; }
	.atl.is-fs .atl-count { display: none; }
	.atl.is-fs .atl-items { pointer-events: auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
	.atl.is-fs .atl-it { box-shadow: 0 6px 20px rgba(0,0,0,.22); }
	.atl.is-fs .atl-empty { pointer-events: auto; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
	.atl.is-fs .leaflet-bottom { bottom: 104px; }
}
@media (max-width: 420px) {
	.atl-seg button { padding: 6px 7px; }
	.atl-th { width: 52px; height: 52px; flex-basis: 52px; }
	.atl-tx b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.atl-pin, .atl-cl span, .atl-hint { transition: none; }
}

/* ---------- v9.29.0 ป้ายหน้า / ปุ่มหาใกล้ฉัน ---------- */
.atl-badge {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	height: 36px; padding: 0 14px 0 8px; border-radius: 10px;
	background: color-mix(in srgb, var(--atl-ac) 12%, #fff); color: var(--atl-ac);
	font-family: var(--font-head); font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.atl-badge .d { width: 24px; height: 24px; border-radius: 7px; background: var(--atl-ac); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.atl-badge + .atl-chip, .atl-badge + .atl-sep { margin-left: 4px; }
.atl-near {
	flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
	height: 36px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--sun, #F5B335); color: #14352C; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.atl-near:hover { filter: brightness(1.05); }
.atl-near.is-busy svg { animation: atl-spin 1s linear infinite; }

/* หมุดที่ "พอไปได้" = ขาวขอบสี */
.atl-mk.is-mu .atl-pin i { color: var(--c); }
.atl-mk.is-mu .atl-pin { filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

/* การ์ดตอนชี้หมุด */
.leaflet-tooltip.atl-tipw { padding: 0; border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.22); background: #fff; }
.leaflet-tooltip.atl-tipw::before { border-top-color: #fff; }
.leaflet-tooltip-bottom.atl-tipw::before { border-top-color: transparent; border-bottom-color: #fff; }
.leaflet-tooltip-left.atl-tipw::before { border-top-color: transparent; border-left-color: #fff; }
.leaflet-tooltip-right.atl-tipw::before { border-top-color: transparent; border-right-color: #fff; }
.atl-tip { width: 200px; font-family: var(--font-body, inherit); white-space: normal; }
.atl-tip img, .atl-tip-ph { display: block; width: 100%; height: 112px; object-fit: cover; background: var(--bg-alt); }
.atl-tip-ph { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.atl-tip-b { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 2px; }
.atl-tip-b b { font-family: var(--font-head); font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.atl-tip-b small { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.atl-tip-b small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 7px; }
.atl-tip-b em { font-style: normal; font-size: 12px; font-weight: 700; color: #1E7FC1; }
.atl-tip-b em.good { color: #1F7A5E; }
.atl-tip-b em.ok { color: #9A7A10; }
.leaflet-tooltip.atl-tip-s { border: 0; border-radius: 10px; padding: 7px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.2); font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600; color: var(--ink); }
.atl-tipc { display: flex; flex-direction: column; gap: 3px; }
.atl-tipc span { display: flex; align-items: center; gap: 6px; }
.atl-tipc i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.atl-tipc small { color: var(--ink-soft); font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.atl-tag.ok { --c: #9A7A10; padding-left: 9px; }
.atl-tag.info { --c: #1E7FC1; padding-left: 9px; }
.atl-tag.good { padding-left: 9px; }

/* วงรัศมี + จุดศูนย์กลาง (หน้าใกล้กรุงเทพ) */
.atl-ring-lb { background: none; border: 0; }
.atl-ring-lb span { display: inline-block; transform: translateY(-50%); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--forest); font-size: 11.5px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.15); white-space: nowrap; }
.atl.is-sat .atl-ring-lb span { background: rgba(20,67,59,.85); color: #fff; }
.atl-home { background: none; border: 0; }
.atl-home span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--forest); color: var(--sun, #F5B335); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); box-sizing: border-box; }

/* ---------- แบบของแต่ละหน้า ---------- */
.atl--home { --atl-h: 660px; }
.atl--type .atl-bar, .atl--feature .atl-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--atl-ac) 9%, #fff), #fff 70%); }
.atl--month .atl-bar, .atl--season .atl-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--atl-ac) 12%, #fff), #fff 75%); }
.atl--near .atl-bar { background: linear-gradient(90deg, #EEF5F2, #fff 70%); }
.atl--near .atl-it .atl-tx em, .atl--month .atl-it .atl-tx em, .atl--season .atl-it .atl-tx em { font-size: 12.5px; }

@media (max-width: 899px) {
	.atl-badge { height: 34px; font-size: 13.5px; }
	.atl-near { margin-left: 0; height: 34px; }
	.atl--home { --atl-h: auto; }
}
@media (hover: none) {
	.leaflet-tooltip.atl-tipw { display: none; }
}

/* ---------- v9.30.0 ใช้ร่วมกับแผนที่หน้าค้นหา ที่บันทึก ทริป หน้าสถานที่ ---------- */
.atl-pin i b { font-family: var(--font-head, inherit); font-size: 14px; font-weight: 700; color: #fff; line-height: 1; }
.atl-mk.is-mu .atl-pin i b { color: var(--c); }
.atl-mk.is-done .atl-pin svg path { fill: #7A8783; }
.leaflet-control.atl-seg-ctl { margin: 10px 10px 0 0; border: 0; }
.leaflet-control.atl-seg-ctl button { font-family: inherit; }
.atl-mk.is-main { z-index: 900 !important; }
.atl-poi { background: none; border: 0; }
.atl-poi span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); font-size: 16px; line-height: 1; border: 2px solid #fff; box-sizing: border-box; transition: transform .12s; }
.atl-poi.is-on span { transform: scale(1.25); box-shadow: 0 0 0 3px var(--jade), 0 2px 8px rgba(0,0,0,.3); }
.atl-park { background: none; border: 0; }
.atl-park span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #1E6FD9; color: #fff; font: 800 17px/1 var(--font-head, sans-serif); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); box-sizing: border-box; }
.atl-hl-card { outline: 3px solid color-mix(in srgb, var(--c, var(--jade)) 45%, transparent); outline-offset: 2px; border-radius: 14px; }
.nb-item.is-hv { outline: 2px solid var(--jade); outline-offset: 1px; background: #EAF4EF; }

/* ---------- v9.31.0 เส้นทาง + เลือกจุดแวะ (หน้าที่เที่ยวระหว่างทาง) ---------- */
.atl-end { background: none; border: 0; }
.atl-end span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #1F7A5E; color: #fff; font: 800 15px/1 var(--font-head, sans-serif); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.32); box-sizing: border-box; }
.atl-end.is-b span { background: #C8412B; }
.atl-items li.has-pick { position: relative; }
.atl-items li.has-pick .atl-it { padding-right: 48px; }
.atl-pick {
	position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
	width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid #E7B08E; background: #fff; color: #C75A1C;
	font: 800 18px/1 var(--font-head, sans-serif); display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: background .12s, color .12s, border-color .12s;
}
.atl-pick:hover { background: #FFF3EA; border-color: #E0702B; }
.atl-pick.is-on { background: #E0702B; border-color: #E0702B; color: #fff; font-size: 15px; }
.atl-pick:focus-visible, .atl-pop-pick:focus-visible { outline: 3px solid rgba(224,112,43,.45); outline-offset: 2px; }
.atl-pop-pick { width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1.5px dashed #E0702B; background: #FFF6EF; color: #B24F14; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.atl-pop-pick.is-on { border-style: solid; background: #E0702B; color: #fff; }
.atl-pop-pick + .atl-pop-act { margin-top: 6px; }
.atl-mk.is-pick { z-index: 950 !important; }
.atl--route .atl-bar { background: linear-gradient(90deg, #EEF3FD, #fff 70%); }
.atl--route .atl-badge { --atl-ac: #2F6FE4; }
.atl--route .atl-it .atl-tx em { font-size: 12.5px; color: #2F6FE4; }
/* v9.33.1 วงกลุ่ม: ตัวเลข + คำว่า "แห่ง" · หมุด A/B อยู่เหนือทุกอย่าง */
.atl-enddot { background: none; border: 0; }
.atl-enddot span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #1F7A5E; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; }
.atl-enddot.is-b span { background: #C8412B; }
.atl-endlb { background: none; border: 0; white-space: nowrap; }
.atl-endlb span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); font: 700 13.5px/1.2 var(--font-head, sans-serif); color: var(--ink); }
.atl-endlb b { width: 22px; height: 22px; border-radius: 50%; background: #1F7A5E; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; flex: 0 0 22px; }
.atl-endlb.is-b b { background: #C8412B; }
.atl-endlb span { transform: translateX(22px); }
.atl-endlb.is-l span { transform: translateX(calc(-100% - 22px)); }
.atl-cl span b { flex-direction: column; line-height: 1; gap: 1px; }
.atl-cl span b small { font-family: var(--font-body, inherit); font-size: 9.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0; }
/* v9.32.0 จังหวัดที่อยากผ่าน + เส้นทางอื่น */
.atl-end.is-v span { width: 28px; height: 28px; background: #7A5AE0; font-size: 13px; }
.atl-alt-hit { cursor: pointer; }
/* ไม่มีสถานที่ (เช่น เส้นทางที่ยังไม่มีข้อมูล): ซ่อนรายการ แผนที่เต็มกว้าง */
.atl.is-empty .atl-body { grid-template-columns: minmax(0, 1fr); }
.atl.is-empty .atl-side { display: none; }
.atl-note { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
/* style.css มี .leaflet-container { position: relative } ถ้า atlas.css โหลดก่อน style.css แผนที่จะสูง 0 */
.atl .atl-map-in.leaflet-container { position: absolute; inset: 0; }