/* ============================================================================
   TRANG XẾP LỊCH TRÌNH
   Bảng ngày × buổi, card kéo thả, khay chờ, hộp chọn mẫu.
   ========================================================================== */
.plan-dau {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin: 6px 0 16px;
}
.plan-tieu { margin: 0; font: 800 30px/1.15 var(--font-serif, Georgia, serif); color: var(--c-green-deep, #0b4a34); }
.plan-mo { margin: 6px 0 0; font-size: 14px; color: var(--c-brown-text, rgba(123, 79, 57, .82)); }
.plan-tac { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-tac .btn { padding: 8px 14px; font-size: 13px; border-radius: 12px; }
.plan-xoa { color: #b64a34; border-color: rgba(182, 74, 52, .35); }

.plan-map { position: relative; height: 540px; border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
/* PHẢI ép chiều cao, không chỉ inset: style.css có luật #ml-map { height: 72vh }
   với độ ưu tiên của id. Với phần tử định vị tuyệt đối, khi có cả height lẫn
   top/bottom thì HEIGHT thắng — nên bản đồ cao 72vh (577px) trong khi khung chứa
   chỉ 320px và overflow:hidden cắt mất phần dưới. Thanh dock nằm ở đáy bản đồ,
   tức là nằm trong phần bị cắt: có trong DOM, đo ra kích thước bình thường, mà
   mắt không thấy. Đó là lý do "dock đâu rồi" mấy vòng vừa qua. */
.plan-map #ml-map { position: absolute; inset: 0; height: 100%; }

/* ---- tab chọn ngày cho bản đồ ---- */
.plan-ngay-tab { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.ptab {
	padding: 7px 14px; border-radius: 12px; cursor: pointer;
	border: 1px solid rgba(60, 60, 58, .16);
	background: #fff; color: var(--c-green-deep, #0b4a34);
	font: 700 13px/1 var(--font-sans, sans-serif);
}
.ptab.is-chon { background: var(--ngay-mau, #0b4a34); border-color: transparent; color: #fff; }

/* ---- LỊCH THEO GIỜ ----
   Mỗi ngày một dải ngang 6h→23h. Khối địa điểm định vị bằng % nên co giãn theo
   bề ngang màn hình mà không cần tính lại bằng JS. */
/* Dải 6h-23h nhồi vừa bề ngang màn hình thì mỗi giờ chỉ còn ~60px: khối 1h30
   rộng chưa tới 90px, tên chỗ nào cũng cụt thành "Bãi b...". Cho nó rộng hẳn
   ~86px/giờ rồi cuộn ngang — đọc được tên quan trọng hơn là thấy hết cả ngày
   trong một khung hình. Cột nhãn ngày dính bên trái để cuộn không lạc hàng. */
.plich { border-radius: 16px; overflow-x: auto; overflow-y: hidden; background: #fff; border: 1px solid rgba(60, 60, 58, .12); }
.plich__dau, .plich__hang { display: grid; grid-template-columns: 92px minmax(1420px, 1fr); min-width: 1512px; }
.plich__nhan { position: sticky; left: 0; z-index: 2; }
.plich__dau { border-bottom: 1px solid rgba(60, 60, 58, .12); }
.plich__nhan {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	padding: 10px 10px; font: 700 12.5px/1.2 var(--font-sans, sans-serif);
	background: var(--ngay-mau, transparent); color: #fff;
}
.plich__dau .plich__nhan { background: #fff; }
.pngay-bo {
	border: 0; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer;
	width: 19px; height: 19px; border-radius: 50%; font-size: 13px; line-height: 1; flex: 0 0 auto;
}

/* thước giờ */
.plich__thuoc { position: relative; height: 26px; }
.pgio {
	position: absolute; top: 6px; transform: translateX(-50%);
	font: 600 10.5px/1 var(--font-sans, sans-serif); color: var(--md-mo, #8a8880); white-space: nowrap;
}
.pgio--phu { top: 12px; width: 1px; height: 6px; background: rgba(60, 60, 58, .18); }

/* dải thời gian của một ngày */
.plich__hang + .plich__hang { border-top: 1px solid rgba(60, 60, 58, .1); }
/* Chiều cao do JS đặt theo số tầng: ngày nào có điểm trùng giờ thì hàng cao lên
   thay vì chồng khối lên nhau. */
.plich__dai { position: relative; height: 68px; touch-action: pan-y; }
.plich__luoi {
	position: absolute; inset: 0;
	/* vạch giờ: mỗi cột 1/17 dải, đậm hơn ở mốc 2 tiếng */
	background-image: repeating-linear-gradient(to right,
		rgba(60, 60, 58, .10) 0 1px, transparent 1px calc(100% / 17));
}

/* khối địa điểm */
.pev-boc { position: absolute; padding: 0 2px; }
.pev {
	position: relative; height: 100%; display: flex; align-items: center; gap: 7px;
	padding: 5px 7px; border-radius: 11px; overflow: hidden; cursor: grab;
	background: var(--ngay-mau, #0b4a34); color: #fff;
	box-shadow: 0 2px 8px rgba(30, 30, 28, .18);
	user-select: none; -webkit-user-select: none;
}
.pev.is-keo { opacity: .85; cursor: grabbing; box-shadow: 0 8px 20px rgba(30, 30, 28, .3); }
.pev__anh { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .3); }
.pev__anh--trong { display: block; }
.pev__chu { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pev__ten { font: 700 12px/1.25 var(--font-sans, sans-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pev__gio { font: 600 10.5px/1 var(--font-sans, sans-serif); opacity: .85; }
.pev__bo {
	position: absolute; top: 3px; right: 3px;
	width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(0, 0, 0, .22); color: #fff; font-size: 12px; line-height: 1;
	opacity: 0; transition: opacity .15s ease;
}
.pev:hover .pev__bo { opacity: 1; }
/* mép phải: chỗ nắm để kéo dài thời lượng */
.pev__keo { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.pev__keo::after {
	content: ''; position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
	width: 3px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .55);
}

.pthem-ngay {
	display: block; width: 100%; margin-top: 8px; padding: 11px;
	border: 1px dashed rgba(60, 60, 58, .22); border-radius: 12px; background: #fff; cursor: pointer;
	font: 700 13px/1 var(--font-sans, sans-serif); color: var(--c-green-deep, #0b4a34);
}
.pthem-ngay:hover { background: rgba(11, 74, 52, .05); }

/* ---- khay chưa xếp ---- */
.plan-khay { margin-top: 16px; padding: 12px; border-radius: 16px; background: rgba(120, 120, 128, .08); }
.plan-khay__dau { font: 700 12px/1 var(--font-sans, sans-serif); text-transform: uppercase; letter-spacing: .04em; color: var(--md-mo, #8a8880); margin-bottom: 10px; }
.plan-khay__ds { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; }
/* Card trong khay: ẢNH TRÊN, tên dưới — nhìn ra địa điểm bằng hình trước, đúng
   thứ tự mắt đọc một tấm thẻ. Khi đã nằm trên lịch thì đổi sang nằm ngang vì ô
   thời gian thấp và dài. */
.pev--khay {
	position: relative; height: auto; width: 132px; flex-direction: column;
	align-items: stretch; gap: 6px; padding: 6px; cursor: grab;
	background: #fff; color: var(--md-chu, #35342f);
	border: 1px solid rgba(60, 60, 58, .14); box-shadow: none;
}
.pev--khay .pev__anh { width: 100%; height: 68px; border-radius: 8px; background: rgba(60, 60, 58, .08); }
.pev--khay .pev__ten { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pev--khay .pev__bo { opacity: 1; background: rgba(255, 255, 255, .9); color: var(--md-mo, #8a8880); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.plan-trong { margin: 0; font-size: 12.5px; color: var(--md-mo, #8a8880); }
.plan-luu { margin: 14px 0 0; font-size: 12.5px; color: var(--md-mo, #8a8880); }

/* ---- ghim đánh số trên bản đồ ---- */
.plan-ghim { display: flex; align-items: center; gap: 6px; cursor: default; }
.plan-ghim b {
	width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
	background: var(--ngay-mau, #0b4a34); color: #fff; border: 2px solid #fff;
	font: 800 12px/20px var(--font-sans, sans-serif); text-align: center;
	box-shadow: 0 2px 8px rgba(30, 30, 28, .35);
}
/* Nhãn tên để TRONG SUỐT, chỉ còn chữ: tấm nền trắng đặc che mất đúng đoạn
   tuyến chạy sau nó. Chữ vẫn đọc được trên nền bản đồ nhờ viền sáng quanh nét
   (bốn bóng đổ trắng mảnh), cách này không cần một mảng nền nào. */
.plan-ghim span {
	background: none; border-radius: 0; padding: 2px 0 2px 2px;
	font: 800 12px/1.2 var(--font-sans, sans-serif); color: var(--md-chu, #35342f);
	white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
	text-shadow:
		0 0 3px #fff, 0 0 3px #fff,
		1px 1px 0 rgba(255, 255, 255, .95), -1px -1px 0 rgba(255, 255, 255, .95),
		1px -1px 0 rgba(255, 255, 255, .95), -1px 1px 0 rgba(255, 255, 255, .95);
}

/* ---- hộp chọn mẫu ---- */
.plan-hop { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 20, 18, .45); display: grid; place-items: center; padding: 20px; }
.plan-hop[hidden] { display: none; }
.plan-hop__trong { width: min(520px, 100%); max-height: 78vh; overflow-y: auto; background: #fff; border-radius: 20px; padding: 16px; }
.plan-hop__dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 16px; }
.plan-hop__dong { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--md-mo, #8a8880); }
.plan-hop__ds { display: grid; gap: 8px; }
.pmau {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
	padding: 11px 13px; border-radius: 12px; cursor: pointer; text-align: left;
	border: 1px solid rgba(60, 60, 58, .14); background: #fff;
}
.pmau:hover { border-color: var(--c-green-deep, #0b4a34); background: rgba(11, 74, 52, .04); }
.pmau b { font: 700 13.5px/1.3 var(--font-sans, sans-serif); color: var(--c-green-deep, #0b4a34); }
.pmau span { font-size: 12px; color: var(--md-mo, #8a8880); }

@media (max-width: 760px) {
	.plan-map { height: 400px; }
	.plan-tieu { font-size: 24px; }
	/* Lịch giữ nguyên dạng dải giờ, chỉ cho cuộn ngang và khoá cột nhãn ngày ở
	   mép trái để lúc nào cũng biết đang xếp cho ngày nào. */
	.plich__dau, .plich__hang { grid-template-columns: 74px minmax(1100px, 1fr); min-width: 1174px; }
	.plich__dai { height: 60px; }
	.pev--khay { width: 116px; }
	.pev--khay .pev__anh { height: 58px; }
}

}

.plan-loi { margin: 0; padding: 18px; font-size: 13px; color: #b64a34; background: rgba(182,74,52,.08); border-radius: 12px; }

/* Thanh dock VẪN CÓ ở trang này, chỉ là năm nhóm đều tắt sẵn (xem TAT_SAN trong
   map-dock.js) — bản đồ mở ra sạch để nhìn tuyến, ai muốn tìm thêm chỗ thì bật
   nhóm lên ngay tại đây. */

/* Khối hẹp (30-45 phút) không đủ chỗ cho ảnh + tên: cho ảnh co lại rồi biến mất
   hẳn thay vì tràn ra ngoài khối như bản trước. */
.pev { min-width: 0; }
.pev__anh { flex: 0 1 30px; min-width: 0; }
.pev-boc { min-width: 34px; }
.pev__chu { flex: 1 1 auto; overflow: hidden; }

/* Ảnh trong khối lịch không nhận thao tác chuột: mọi cú nhấn đều phải rơi vào
   khối để logic kéo của mình xử lý. Kèm chặn kéo ảnh kiểu trình duyệt. */
.pev__anh { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pev__chu { pointer-events: none; }

/* Khối xem trước lúc kéo từ khay vào lịch, và card gốc tạm ẩn đi trong lúc đó. */
.pev-boc--tam { pointer-events: none; opacity: .92; }
.pev-boc--tam .pev { cursor: grabbing; box-shadow: 0 8px 20px rgba(30, 30, 28, .3); }
.pev--khay.is-an { opacity: .3; }

/* Khay sáng lên khi kéo card tới: cho biết thả ở đây là gỡ khỏi lịch. */
.plan-khay.is-tren { box-shadow: inset 0 0 0 2px rgba(11, 74, 52, .35); background: rgba(11, 74, 52, .06); }

/* Card phải tự nhận thao tác chạm, không nhường cho cử chỉ cuộn của trình duyệt.
   Thiếu dòng này thì trên điện thoại vuốt card = cuộn trang, và cú cuộn đó huỷ
   luôn thao tác kéo đang dở. */
.pev { touch-action: none; }

/* ---- Toàn màn hình cho bản đồ trang lịch trình ----
   Khung bản đồ ở đây cao cố định 420px. Vào toàn màn hình, trình duyệt phóng
   chính khung đó ra nhưng chiều cao CSS vẫn là 420px, nên phần còn lại của màn
   hình đen thui (đúng ảnh chủ site chụp). Ép đầy màn khi ở chế độ đó — cả bản
   gốc của trình duyệt lẫn bản dự phòng bằng class cho iPhone. */
.plan-map:fullscreen,
.plan-map:-webkit-full-screen {
	width: 100vw; height: 100vh; max-height: none;
	border-radius: 0; margin: 0;
}
/* BẢN DỰ PHÒNG CHO ĐIỆN THOẠI (iOS không cho phần tử thường vào Fullscreen API).
   Đo trên máy: khung này được ép 375×812 nhưng vẫn `position: relative`, nên nó
   nằm nguyên chỗ cũ — lệch 22px sang phải, 531px xuống dưới — rồi tràn khỏi mép
   màn hình. Phải ghim `fixed` vào bốn cạnh thì mới thật sự là toàn màn hình.
   Dùng 100dvh: trên iOS thanh địa chỉ co giãn, 100vh tính theo lúc thanh ẩn nên
   luôn cao dư một khúc. */
.plan-map.is-fs,
body.map-is-fs .plan-map {
	position: fixed; inset: 0; z-index: 9999;
	width: 100vw; height: 100vh; height: 100dvh;
	max-height: none; margin: 0; border-radius: 0;
}
.plan-map:fullscreen #ml-map,
.plan-map:-webkit-full-screen #ml-map,
.plan-map.is-fs #ml-map,
body.map-is-fs .plan-map #ml-map { position: absolute; inset: 0; height: 100%; }

/* Card trong khay bấm được: cho biết bằng con trỏ và một nhịp nhấn xuống. */
.pev--khay { cursor: pointer; transition: transform .12s ease, box-shadow .16s ease; }
.pev--khay:hover { box-shadow: 0 4px 14px rgba(40, 40, 36, .14); }
.pev--khay:active { transform: scale(.97); }

/* Khối trên lịch không còn ảnh: chữ chiếm hết chiều ngang, giờ nằm ngay dưới tên. */
.pev-boc .pev { padding-left: 9px; }

/* Không còn dòng giờ trong khối: tên được canh giữa theo chiều dọc và dùng hết
   chiều ngang, khối hẹp vẫn đọc được vài chữ đầu. */
.pev-boc .pev__chu { justify-content: center; }
.pev-boc .pev__ten { font-size: 12.5px; }

/* Hai hàng lọc mẫu: số người và số ngày */
.pmau-loc { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pmau-loc > span { font-size: 12px; font-weight: 700; color: var(--md-mo, #8a8880); text-transform: uppercase; letter-spacing: .04em; }
.pmau-loc > div { display: flex; gap: 6px; flex-wrap: wrap; }
.pmau-l { border: 1px solid var(--md-vien, #e4e1d8); background: #fff; border-radius: 999px; padding: 5px 12px; font: 600 13px/1 var(--font-sans, sans-serif); color: var(--md-chu, #35342f); cursor: pointer; }
.pmau-l:hover { border-color: var(--md-nhan, #1c864d); }
.pmau-l.is-chon { background: var(--md-nhan, #1c864d); border-color: var(--md-nhan, #1c864d); color: #fff; }
.pmau-trong { margin: 6px 2px; color: var(--md-mo, #8a8880); font-size: 14px; }
@media (max-width: 560px) {
	.pmau-loc { gap: 6px; }
	.pmau-loc > span { width: 100%; }
}

/* Thanh cuộn ngang đặt TRÊN bảng lịch (thanh thật ở đáy bị ẩn đi) */
.plich { scrollbar-width: none; }
.plich::-webkit-scrollbar { height: 0; }
.plan-cuon {
	position: relative; height: 10px; margin: 0 0 10px;
	border-radius: 999px; background: rgba(60, 60, 58, .08);
	cursor: pointer; touch-action: none;
}
.plan-cuon[hidden] { display: none; }
.plan-cuon__nam {
	position: absolute; left: 0; top: 0; bottom: 0;
	border-radius: 999px; background: var(--md-nhan, #1c864d);
	transition: background .16s ease;
}
.plan-cuon__nam:hover, .plan-cuon__nam.is-keo { background: #14683b; }

/* Nút khoá lịch + kéo nền để đẩy dải giờ */
.ptab--khoa { margin-left: auto; }
.ptab--khoa.is-chon { background: #35342f; border-color: transparent; color: #fff; }
.plich.is-day { cursor: grabbing; }
.plan-bang.is-khoa .pev { cursor: default; }
.plan-bang.is-khoa .pev__keo, .plan-bang.is-khoa .pev__bo { display: none; }
.plan-bang.is-khoa .plich__dai { touch-action: pan-x; }

/* Ảnh động hướng dẫn, đặt ngay dưới khay chờ */
.plan-huong { margin: 0 0 14px; padding: 12px; border: 1px solid var(--md-vien, #e4e1d8); border-radius: 16px; background: #fff; }
.plan-huong img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 10px; }
.plan-huong figcaption { margin: 10px 2px 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--md-mo, #8a8880); }
.plan-huong figcaption b { color: var(--md-chu, #35342f); }

/* ------------------------------------------------------- gọt lại bảng lịch
   Ba việc: nhãn ngày phải nằm gọn MỘT HÀNG (trên điện thoại nó đang xuống dòng
   thành "Ngày / 1"), chữ số giờ dùng cỡ chữ đều nhau cho khỏi nhảy, và các mảng
   màu bớt phẳng bằng chuyển sắc mỏng thay vì đổ bóng nặng. */
.plich {
	border-color: rgba(60, 60, 58, .10);
	box-shadow: 0 1px 2px rgba(30, 30, 28, .04), 0 18px 38px -26px rgba(30, 30, 28, .5);
}
.plich__dau { background: linear-gradient(#fdfcfa, #fff); }
.plich__nhan {
	white-space: nowrap; padding: 10px 8px 10px 13px; gap: 8px;
	font: 800 12.5px/1 var(--font-sans, sans-serif); letter-spacing: .012em;
	background-image: linear-gradient(155deg, rgba(255, 255, 255, .20), rgba(0, 0, 0, .16));
	box-shadow: 1px 0 0 rgba(30, 30, 28, .07);
}
.plich__dau .plich__nhan { background-image: none; box-shadow: 1px 0 0 rgba(30, 30, 28, .07); }
.pngay-bo { width: 18px; height: 18px; font-size: 12px; background: rgba(255, 255, 255, .2); transition: background .15s ease; }
.pngay-bo:hover { background: rgba(255, 255, 255, .38); }

.plich__thuoc { height: 30px; }
.pgio {
	top: 8px; font: 700 10.5px/1 var(--font-sans, sans-serif);
	letter-spacing: .07em; color: #a8a59c; font-variant-numeric: tabular-nums;
}
.pgio--phu { top: 15px; height: 7px; background: rgba(60, 60, 58, .14); }

/* Vạch giờ mảnh hơn, thêm dải sáng/tối xen kẽ mỗi 2 tiếng để mắt bám mốc giờ
   mà không cần vạch đậm. */
.plich__luoi {
	background-image:
		repeating-linear-gradient(to right, rgba(60, 60, 58, .07) 0 1px, transparent 1px calc(100% / 17)),
		repeating-linear-gradient(to right, rgba(60, 60, 58, .022) 0 calc(100% / 17), transparent calc(100% / 17) calc(200% / 17));
}
.plich__hang:nth-child(even) .plich__dai { background: rgba(60, 60, 58, .012); }
.plich__hang:hover .plich__dai { background: rgba(46, 95, 143, .035); }

/* Khối địa điểm: chuyển sắc mỏng + vệt sáng nửa trên, bóng hai lớp cho có chiều
   sâu mà không bị "đổ bóng nặng" kiểu cũ. */
.pev {
	border-radius: 12px;
	background-image: linear-gradient(158deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12));
	box-shadow: 0 1px 2px rgba(30, 30, 28, .22), 0 8px 16px -9px rgba(30, 30, 28, .55);
	transition: box-shadow .16s ease, transform .16s ease;
}
.pev::before {
	content: ''; position: absolute; left: 1px; right: 1px; top: 1px; height: 42%;
	border-radius: 11px 11px 14px 14px;
	background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.pev:hover { box-shadow: 0 2px 4px rgba(30, 30, 28, .22), 0 14px 24px -12px rgba(30, 30, 28, .6); }
.pev.is-keo { transform: scale(1.02) rotate(-.4deg); }
.pev__ten { font: 800 12.5px/1.25 var(--font-sans, sans-serif); letter-spacing: .004em; text-shadow: 0 1px 0 rgba(0, 0, 0, .14); }
.pev__gio { font-variant-numeric: tabular-nums; opacity: .8; }
.pev__keo::after { opacity: .5; }

@media (max-width: 760px) {
	/* Cột nhãn hẹp nhưng vẫn đủ cho "Ngày 1" + nút × trên MỘT hàng */
	.plich__dau, .plich__hang { grid-template-columns: 86px minmax(1100px, 1fr); min-width: 1186px; }
	.plich__nhan { padding: 8px 6px 8px 10px; gap: 5px; font-size: 11.5px; }
	.pngay-bo { width: 16px; height: 16px; font-size: 11px; }
	.pev__ten { font-size: 12px; }
}

/*gcm-plan-dep-start*/
/* ============================================================================
   BẢNG XẾP LỊCH — MÀU VIVID TÔ TRƠN

   Màu tươi như chip trên thanh dock, nhưng ĐẶC VÀ PHẲNG: không chuyển sắc,
   không vệt gương, không bóng ăn màu. Chữ trắng, bóng chữ rất mảnh.

   ĐÃ THỬ VÀ BỎ (đừng làm lại): (1) ô ngày trắng + vạch màu bên trái — bảng mất
   hết màu; (2) vivid + chuyển sắc kính kiểu chip dock — rực và ồn hơn cả bản
   đồ; (3) pastel tô trơn — dịu nhưng bảng chìm hẳn, mất luôn tín hiệu ngày.
   ========================================================================== */

/* --- tab ngày --- */
.ptab {
	padding: 8px 15px; border-radius: 999px; border: 0;
	background: rgba(120, 120, 128, .13);
	color: var(--md-chu, #35342f);
	transition: background .18s ease, color .18s ease, transform .16s ease;
}
.ptab:hover { background: rgba(120, 120, 128, .2); }
.ptab.is-chon {
	background: var(--ngay-mau, #2b8fef);
	color: #fff;
	box-shadow: none;
}
.ptab--khoa { background: #fff; box-shadow: 0 1px 2px rgba(30, 30, 28, .1), 0 8px 18px -12px rgba(30, 30, 28, .45); }
.ptab--khoa.is-chon { background: #35342f; color: #fff; }

/* --- khung bảng --- */
.plich {
	border: 0; border-radius: 20px;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .05), 0 22px 44px -30px rgba(30, 30, 28, .55);
}
.plich__dau { background: #fff; border-bottom: 1px solid rgba(60, 60, 58, .08); }

/* --- ô nhãn ngày: mảng pastel phẳng, chữ cùng gam nhưng tối --- */
.plich__hang .plich__nhan {
	background: var(--ngay-mau, #2b8fef);
	background-image: none;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .06);
}
.plich__hang .plich__nhan::after { display: none; }
.plich__dau .plich__nhan { background: #fff; }
.pngay-bo {
	background: rgba(255, 255, 255, .26);
	color: #fff;
}
.pngay-bo:hover { background: rgba(255, 255, 255, .44); }

/* --- khối địa điểm: cùng mảng pastel, chỉ khác ở bóng rất nhạt để nhấc khỏi lưới --- */
.pev {
	border-radius: 13px;
	background: var(--ngay-mau, #2b8fef);
	background-image: none;
	color: #fff;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .12), 0 8px 16px -10px rgba(30, 30, 28, .5);
}
.pev::before { display: none; }
.pev__ten { font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.pev__gio { opacity: .72; }
.pev:hover { box-shadow: 0 2px 4px rgba(30, 30, 28, .12), 0 12px 22px -12px rgba(30, 30, 28, .5); }
.pev__bo { background: rgba(0, 0, 0, .2); color: #fff; }
.pev__keo::after { background: rgba(255, 255, 255, .55); }

/* --- lưới giờ mảnh, thước giờ lùi ra sau --- */
.plich__luoi {
	background-image:
		repeating-linear-gradient(to right, rgba(60, 60, 58, .06) 0 1px, transparent 1px calc(100% / 17)),
		repeating-linear-gradient(to right, rgba(60, 60, 58, .018) 0 calc(100% / 17), transparent calc(100% / 17) calc(200% / 17));
}
.pgio { color: #b0ada3; }

/* --- khay chờ + nút thêm ngày --- */
.plan-khay {
	border: 0; border-radius: 18px; background: #fff;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .05), 0 18px 36px -28px rgba(30, 30, 28, .5);
}
.pthem-ngay {
	border-radius: 16px; border: 1px dashed rgba(60, 60, 58, .22);
	background: rgba(255, 255, 255, .6);
	transition: background .18s ease, border-color .18s ease;
}
.pthem-ngay:hover { background: #fff; border-color: var(--md-nhan, #1c864d); }
/* --- cột nhãn ngày HẸP LẠI, dấu × lên góc phải trên ---
   Cột 92px là để chừa chỗ cho chữ "Ngày 1" ĐỨNG CẠNH nút ×. Đưa nút lên góc thì
   chữ được cả bề ngang, cột thu còn 72px — mỗi hàng lấy lại 20px cho dải giờ,
   mà nút × cũng thôi chen ngang giữa dòng chữ. */
.plich__dau, .plich__hang { grid-template-columns: 72px minmax(1420px, 1fr); min-width: 1492px; }
.plich__hang .plich__nhan { padding: 10px 8px 10px 11px; justify-content: flex-start; }
.pngay-bo {
	position: absolute; top: 5px; right: 5px; z-index: 2;
	width: 16px; height: 16px; font-size: 11px; line-height: 1;
	display: grid; place-items: center;
}
@media (max-width: 760px) {
	.plich__dau, .plich__hang { grid-template-columns: 64px minmax(1100px, 1fr); min-width: 1164px; }
	.plich__hang .plich__nhan { padding: 8px 6px 8px 9px; font-size: 11px; }
	.pngay-bo { width: 14px; height: 14px; font-size: 10px; top: 4px; right: 4px; }
}
/*gcm-plan-dep-end*/

/*gcm-cot-start*/
/* ============================================================================
   BẢNG NGÀY DẠNG CỘT DỌC (thay cho dải giờ nằm ngang)

   Mỗi ngày một cột, các điểm xếp từ trên xuống theo đúng thứ tự đi, giữa hai
   điểm là thời gian di chuyển. Không giờ, không buổi — thứ người ta thật sự
   quyết khi đi chơi là TRÌNH TỰ, còn mấy giờ thì tuỳ hôm đó.
   ========================================================================== */
.pcot-bo {
	display: flex; gap: 12px; align-items: flex-start;
	overflow-x: auto; padding: 2px 2px 12px;
	scrollbar-width: thin;
}
.pcot {
	/* Cột hẹp lại: 168-196px thay vì 210-260. Thẻ chỉ có số thứ tự, ảnh nhỏ và
	   tên hai dòng — chừng đó không cần rộng, mà hẹp thì mỗi màn hình chứa được
	   nhiều ngày hơn, đỡ phải cuộn ngang. */
	flex: 0 0 clamp(168px, 17vw, 196px);
	background: #fff; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .05), 0 18px 36px -28px rgba(30, 30, 28, .5);
	overflow: hidden;
}
.pcot__dau {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	background: var(--ngay-mau, #3767d6); color: #fff;
	font: 700 13.5px/1 var(--font-sans, sans-serif);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.pcot__so {
	margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
	display: grid; place-items: center; border-radius: 999px;
	background: rgba(255, 255, 255, .26); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.pcot__dau .pngay-bo {
	position: static; width: 20px; height: 20px; font-size: 13px;
	background: rgba(255, 255, 255, .26); color: #fff;
}
.pcot__dau .pngay-bo:hover { background: rgba(255, 255, 255, .45); }
.pcot__ds { padding: 10px; min-height: 96px; display: flex; flex-direction: column; }
.pcot__trong {
	margin: 0; padding: 18px 8px; text-align: center;
	font-size: 12.5px; color: var(--md-mo, #8a8880);
	border: 1px dashed rgba(60, 60, 58, .18); border-radius: 12px;
}

/* thẻ trong cột */
.pcot__ds .pev {
	position: relative; height: auto; width: auto;
	display: flex; align-items: center; gap: 9px;
	padding: 7px 8px; border-radius: 12px;
	background: color-mix(in srgb, var(--ngay-mau, #3767d6) 12%, #fff);
	color: color-mix(in srgb, var(--ngay-mau, #3767d6) 62%, #14130e);
	box-shadow: none; cursor: grab;
}
.pcot__ds .pev:hover { background: color-mix(in srgb, var(--ngay-mau, #3767d6) 20%, #fff); }
.pev__stt {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ngay-mau, #3767d6); color: #fff;
	font: 700 11.5px/1 var(--font-sans, sans-serif); font-variant-numeric: tabular-nums;
}
.pcot__ds .pev__anh { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; object-fit: cover; }
.pcot__ds .pev__ten { font: 700 12.5px/1.3 var(--font-sans, sans-serif); white-space: normal;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Nút × ở GÓC PHẢI TRÊN của thẻ, và to hơn hẳn: 22px thấy được, kèm vùng bấm
   nới thêm 6px mỗi phía bằng ::after nên ngón tay chạm đâu quanh đó cũng trúng.
   Trước đây nó nằm cuối dòng chữ, vừa nhỏ vừa dễ bấm nhầm vào tên. */
.pcot__ds .pev { padding-right: 30px; }
.pcot__ds .pev__bo {
	position: absolute; top: 4px; right: 4px; margin: 0;
	width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 15px; line-height: 1;
	background: rgba(255, 255, 255, .72); color: inherit;
	opacity: .55; transition: opacity .15s ease, background .15s ease;
}
.pcot__ds .pev__bo::after {
	content: ''; position: absolute; inset: -6px;   /* nới vùng chạm, không đổi hình */
}
.pcot__ds .pev:hover .pev__bo { opacity: 1; background: #fff; }
@media (hover: none) {
	.pcot__ds .pev__bo { opacity: .8; }              /* cảm ứng không có hover, phải thấy sẵn */
}

/* (đã bỏ khối .pdi — thời gian đi giữa hai thẻ) */
.pcot__ds .pev + .pev { margin-top: 7px; }

/* bản sao bay theo tay + vạch báo chỗ chèn */
.pev--bay {
	position: fixed; z-index: 90; pointer-events: none;
	/* PHẢI ép height: auto. Luật gốc .pev để height: 100% (di sản của bảng nằm
	   ngang, nơi thẻ lấp đầy khối bọc). Bản sao bay được gắn thẳng vào <body>,
	   nên 100% ở đó là 100% chiều cao trang — thẻ phình kín màn hình đúng như
	   lỗi vừa gặp. Luật .pcot__ds .pev không với tới nó vì nó đã rời khỏi cột. */
	height: auto; max-height: 96px; overflow: hidden;
	display: flex; align-items: center; gap: 9px;
	padding: 8px 9px; border-radius: 13px;
	background: color-mix(in srgb, var(--ngay-mau, #3767d6) 16%, #fff);
	color: color-mix(in srgb, var(--ngay-mau, #3767d6) 62%, #14130e);
	box-shadow: 0 12px 28px -10px rgba(30, 30, 28, .55);
	transform-origin: top left; opacity: .96;
}
.pev--bay .pev__ten { font: 700 12.5px/1.3 var(--font-sans, sans-serif); }
.pev--bay .pev__anh { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; object-fit: cover; }
.pev--bay .pev__bo { display: none; }
.pev.is-an { opacity: .28; }
.pcho {
	height: 3px; margin: 4px 0; border-radius: 999px;
	background: var(--ngay-mau, #1c864d);
}
#plan-khay-ds .pcho { height: 3px; width: 100%; }

/* nút thêm ngày đứng thành một cột hẹp bên phải */
.pcot-bo .pthem-ngay {
	flex: 0 0 108px; align-self: stretch; min-height: 120px;
	margin: 0; border-radius: 18px;
}
@media (max-width: 760px) {
	.pcot { flex: 0 0 66vw; }
	.pcot-bo .pthem-ngay { flex: 0 0 44vw; }
}
/*gcm-cot-end*/

/* Thẻ trong KHAY CHỜ: nền trắng, không màu ngày.
   Màu ngày là thứ chỉ có nghĩa khi điểm đã thuộc về một ngày; thẻ nằm trong
   khay thì chưa thuộc ngày nào, tô nguyên khối màu xanh vừa sai nghĩa vừa làm
   khay nặng hơn cả bảng lịch bên trên. */
#plan-khay-ds .pev--khay {
	background: #fff;
	background-image: none;
	color: var(--md-chu, #35342f);
	box-shadow: 0 1px 2px rgba(30, 30, 28, .08), 0 8px 18px -14px rgba(30, 30, 28, .5);
}
#plan-khay-ds .pev--khay .pev__ten { color: var(--md-chu, #35342f); text-shadow: none; }
#plan-khay-ds .pev--khay .pev__anh { background: rgba(60, 60, 58, .06); }
#plan-khay-ds .pev--khay .pev__bo {
	background: rgba(255, 255, 255, .92); color: var(--md-mo, #8a8880);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
#plan-khay-ds .pev--khay:hover { box-shadow: 0 2px 4px rgba(30, 30, 28, .1), 0 14px 26px -16px rgba(30, 30, 28, .55); }

/* Ghim chỉ-số-thứ-tự trên bản đồ lịch trình (khi đang xem cả chuyến).
   Tròn, đặc màu ngày, viền trắng — đọc được ở mọi nền, và vì không có chữ nên
   hai chục ghim đứng cạnh nhau vẫn không đè nhau. */
.plan-ghim--so b {
	width: 24px; height: 24px; border-radius: 50%;
	border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(30, 30, 28, .3);
	font-size: 12px;
}
.plan-ghim--so span { display: none; }

/* ---- Thanh "đi qua từng điểm" nổi trên bản đồ lịch trình ----
   Đặt ở mép trên giữa: đáy đã có thanh dock, góc trái có giỏ, góc phải có cụm
   nút của bản đồ — chỗ trống còn lại chỉ có trên đầu. */
#ml-map .pbuoc {
	position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 7;
	display: flex; align-items: center; gap: 2px;
	padding: 4px; border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 6px rgba(30, 30, 28, .14), 0 12px 26px -14px rgba(30, 30, 28, .5);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#ml-map .pbuoc[hidden] { display: none; }
.pbuoc__nut {
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: rgba(60, 60, 58, .08); color: var(--md-chu, #35342f);
	font: 700 17px/1 var(--font-sans, sans-serif); cursor: pointer;
	transition: background .15s ease;
}
.pbuoc__nut:hover { background: rgba(60, 60, 58, .18); }
.pbuoc__nut:active { transform: scale(.94); }
.pbuoc__chu {
	padding: 0 10px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font: 700 12.5px/1 var(--font-sans, sans-serif); color: var(--md-chu, #35342f);
	font-variant-numeric: tabular-nums;
}
/* Ghim đang được chọn: to lên và nổi lên trên các ghim khác */
#ml-map .plan-ghim.is-dang { z-index: 9; }
#ml-map .plan-ghim.is-dang b {
	transform: scale(1.35);
	box-shadow: 0 3px 10px rgba(30, 30, 28, .45);
}
#ml-map .plan-ghim b { transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s ease; }
/* Thẻ tương ứng trong cột nhấp một nhịp cho mắt bắt được */
.pev.is-nhay { animation: gcm-the-nhay .7s ease; }
@keyframes gcm-the-nhay {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	30% { box-shadow: 0 0 0 3px var(--ngay-mau, #3767d6); }
}
@media (max-width: 560px) {
	.pbuoc__chu { max-width: 120px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.pev.is-nhay { animation: none; }
	#ml-map .plan-ghim b { transition: none; }
}

/* ---- Hồ sơ lịch trình đã lưu ----
   Nằm ngay dưới khay chờ: xếp xong một chuyến thì bấm Lưu, nó thành một thẻ ở
   đây; bấm thẻ là mở ra chỉnh tiếp. */
.plan-hoso { margin: 16px 0 0; }
.plan-hoso__dau {
	font: 700 12px/1 var(--font-sans, sans-serif); letter-spacing: .05em;
	text-transform: uppercase; color: var(--md-mo, #8a8880); margin: 0 2px 8px;
}
.plan-hoso__ds { display: flex; flex-wrap: wrap; gap: 8px; }
.phs {
	display: flex; align-items: stretch; gap: 2px;
	/* KHÔNG overflow:hidden — menu ⋯ nằm tuyệt đối và xổ RA NGOÀI thẻ, cắt là
	   nó biến mất, bấm vào tưởng như nút chết. Bo góc vẫn giữ được vì các con
	   bên trong không tràn ra mép. */
	background: #fff; border-radius: 14px; overflow: visible;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .07), 0 10px 20px -16px rgba(30, 30, 28, .5);
	transition: box-shadow .16s ease, transform .14s ease;
}
.phs:hover { box-shadow: 0 2px 4px rgba(30, 30, 28, .1), 0 16px 28px -18px rgba(30, 30, 28, .55); }
.phs.is-mo { box-shadow: 0 0 0 2px var(--md-nhan, #1c864d), 0 10px 20px -16px rgba(30, 30, 28, .5); }
.phs__mo {
	border: 0; background: none; cursor: pointer; text-align: left;
	/* CĂN GIỮA THEO CHIỀU DỌC. Khối chữ trước đây dồn lên đỉnh (mặc định của
	   flex-column) trong khi nút ⋯ bên phải căn giữa — hai bên lệch nhau một
	   quãng, nhìn như chữ bị đội lên. */
	padding: 10px 4px 10px 13px;
	display: flex; flex-direction: column; justify-content: center; gap: 3px;
	min-width: 128px;
}
.phs__ten { font: 700 13px/1.25 var(--font-sans, sans-serif); color: var(--md-chu, #35342f); }
.phs__phu { font: 600 11.5px/1 var(--font-sans, sans-serif); color: var(--md-mo, #8a8880); font-variant-numeric: tabular-nums; }
.phs__nut { position: relative; display: flex; align-items: center; padding-right: 6px; }
.phs__hb {
	width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: none; color: var(--md-mo, #8a8880); cursor: pointer;
	font-size: 17px; line-height: 1;
	transition: background .14s ease, color .14s ease;
}
.phs__hb:hover, .phs__hb[aria-expanded="true"] { background: rgba(60, 60, 58, .1); color: var(--md-chu, #35342f); }
.phs__menu {
	position: absolute; right: 4px; top: calc(100% + 4px); z-index: 30;
	display: flex; flex-direction: column; min-width: 132px; padding: 5px;
	background: #fff; border-radius: 12px;
	box-shadow: 0 2px 6px rgba(30, 30, 28, .14), 0 16px 30px -14px rgba(30, 30, 28, .55);
	animation: gcm-menu-xo .14s ease;
}
.phs__menu[hidden] { display: none; }
@keyframes gcm-menu-xo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.phs__menu button {
	border: 0; background: none; cursor: pointer; text-align: left;
	padding: 8px 10px; border-radius: 8px;
	font: 600 13px/1 var(--font-sans, sans-serif); color: var(--md-chu, #35342f);
}
.phs__menu button:hover { background: rgba(60, 60, 58, .08); }
.phs__menu .la-xoa { color: #b3261e; }
.phs__menu .la-xoa:hover { background: rgba(179, 38, 30, .1); }

/* Báo nhẹ khi lưu / chép link — không dùng alert() cho mấy việc vặt */
.plan-bao {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
	padding: 10px 16px; border-radius: 999px; z-index: 80;
	background: rgba(28, 28, 26, .92); color: #fff;
	font: 700 13px/1 var(--font-sans, sans-serif);
	opacity: 0; pointer-events: none;
	transition: opacity .18s ease, transform .18s cubic-bezier(.32, .72, 0, 1);
}
.plan-bao.is-hien { opacity: 1; transform: translate(-50%, 0); }

/* Cụm nút dưới bảng: dính đáy màn hình khi còn nội dung phía dưới, để lúc nào
   cũng trong tầm ngón tay mà không che mất bảng. */
.plan-tac--duoi {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 18px 0 0; padding: 10px;
	background: rgba(255, 255, 255, .86);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .06), 0 14px 28px -22px rgba(30, 30, 28, .5);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	/* KHÔNG dính đáy nữa: dính thì nó nổi đè lên danh sách lịch trình đã lưu ở
	   ngay dưới, che mất đúng thứ người ta đang muốn đọc. */
}
/* Nút rộng ĐÚNG BẰNG CHỮ, không kéo giãn: bốn nút dàn hết bề ngang màn hình
   thì mỗi nút thành một thanh dài, mắt phải quét cả dòng mới biết bấm gì, mà
   "Xoá hết" cũng to ngang "Lưu" dù mức độ quan trọng khác hẳn. */
.plan-tac--duoi { justify-content: flex-start; width: fit-content; max-width: 100%; }
.plan-tac--duoi .btn { flex: 0 0 auto; min-width: 0; }
.plan-tac--duoi .plan-xoa { margin-left: auto; }
@media (max-width: 560px) {
	.plan-tac--duoi { padding: 8px; gap: 6px; width: 100%; }
	.plan-tac--duoi .btn { font-size: 13px; padding: 9px 12px; }
}

/* Nút "Lịch trình mới" là việc bắt đầu, không phải việc phá — cho nó viền xanh
   đậm để tách khỏi ba nút xám, còn "Xoá hết" vẫn đứng riêng bên phải. */
.plan-tac--duoi .plan-moi {
	border-color: var(--md-nhan, #1c864d);
	color: var(--md-nhan, #1c864d);
	font-weight: 700;
}
.plan-tac--duoi .plan-moi:hover { background: rgba(28, 134, 77, .08); }

/* Thẻ vừa được "nhấc lên" sau khi nhấn giữ đủ lâu: to thêm 4%, bóng sâu hơn,
   nghiêng nhẹ — đủ để tay biết mình đang cầm nó, trước cả khi kéo đi. */
.pcot__ds .pev.is-nhac,
#plan-khay-ds .pev.is-nhac {
	transform: scale(1.04) rotate(-.5deg);
	box-shadow: 0 6px 14px rgba(30, 30, 28, .22), 0 18px 34px -16px rgba(30, 30, 28, .5);
	z-index: 3;
}
.pcot__ds .pev, #plan-khay-ds .pev {
	transition: transform .16s cubic-bezier(.34, 1.4, .64, 1), box-shadow .16s ease;
}
@media (prefers-reduced-motion: reduce) {
	.pcot__ds .pev, #plan-khay-ds .pev { transition: none; }
	.pcot__ds .pev.is-nhac, #plan-khay-ds .pev.is-nhac { transform: none; }
}

/* Tên lịch trình đang mở + chữ "Đã lưu" chớp lên mỗi lần ghi.
   Đây là thứ thay cho nút Lưu: người dùng luôn thấy mình đang sửa cái gì và
   biết nó đã được cất, không phải nhớ thao tác nào. */
.plan-dang { display: flex; align-items: baseline; gap: 8px; margin-right: auto; padding: 0 6px; min-width: 0; }
.plan-dang b {
	font: 700 14px/1.2 var(--font-sans, sans-serif); color: var(--md-chu, #35342f);
	max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-trangthai {
	font: 600 11.5px/1 var(--font-sans, sans-serif); font-style: normal;
	color: var(--md-nhan, #1c864d); opacity: 0; transition: opacity .2s ease;
}
.plan-trangthai.is-hien { opacity: 1; }
@media (max-width: 560px) {
	.plan-dang { width: 100%; margin: 0 0 4px; }
	.plan-dang b { max-width: none; }
}

/* Nút Hoàn tác mờ đi khi chưa có bước nào để lùi — trạng thái tắt phải nhìn ra
   được, không thì người ta bấm rồi tưởng hỏng. */
#plan-lui:disabled { opacity: .42; cursor: default; }
#plan-lui:disabled:hover { background: none; }
/* Nút "Hoàn tác" nằm ngay trong dải báo, kiểu Gmail: xoá xong còn mười giây đổi ý */
.plan-bao__lui {
	margin-left: 12px; border: 0; border-radius: 999px; cursor: pointer;
	padding: 5px 12px; background: rgba(255, 255, 255, .18); color: #fff;
	font: 700 12.5px/1 var(--font-sans, sans-serif);
}
.plan-bao__lui:hover { background: rgba(255, 255, 255, .3); }

/* Biểu tượng vẽ bằng SVG, canh giữa bằng flex — ký tự chữ (⋯ ↩ ✎) mỗi phông
   một cỡ, một đường chân chữ, không bao giờ nằm đúng giữa nút. */
.phs__hb { display: grid; place-items: center; }
.phs__hb svg { width: 18px; height: 18px; fill: currentColor; }
.btn--ico { display: inline-flex; align-items: center; gap: 7px; }
.btn--ico svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* CHẠM VÀO THẺ VẪN CUỘN ĐƯỢC — cả dọc (cuộn trang) lẫn ngang (trượt dải cột).
   Luật cũ .pev { touch-action: none } khoá sạch cử chỉ cuộn ngay khi ngón tay
   đặt lên thẻ: muốn trượt sang cột kế bên mà lỡ đặt tay trúng một thẻ là bản
   không nhúc nhích. Nay trả cử chỉ cuộn về cho trình duyệt; chỉ khi đã NHẤN GIỮ
   đủ 220ms và bắt đầu kéo thì JS mới giành lại (preventDefault trong touchmove
   không thụ động) — lúc đó ngón tay đang đứng yên nên trình duyệt chưa kịp mở
   một cú cuộn nào để mà tranh. */
.pcot__ds .pev,
#plan-khay-ds .pev { touch-action: pan-x pan-y; }
.pcot__ds .pev.is-nhac,
#plan-khay-ds .pev.is-nhac { touch-action: none; }

/* Thẻ đang xổ menu nằm trên các thẻ bên cạnh, không thì menu chui xuống dưới. */
.phs:has(.phs__menu:not([hidden])) { z-index: 20; }
.plan-hoso__ds { position: relative; }
.phs { position: relative; }

/* HAI HÀNG, KHÔNG NHỒI MỘT HÀNG.
   Tên lịch trình và năm cái nút chen nhau trên cùng một dòng làm hàng nút bị
   đẩy lệch, tên thì cụt. Tách ra: hàng trên là "đang sửa cái gì", hàng dưới là
   "làm gì với nó". */
.plan-tac--duoi { display: block; }
.plan-tac--duoi .plan-dang {
	display: flex; align-items: baseline; gap: 8px;
	margin: 0 0 9px; padding: 0 4px; width: auto;
}
.plan-dang__nhan {
	font: 700 10.5px/1 var(--font-sans, sans-serif); letter-spacing: .06em;
	text-transform: uppercase; color: var(--md-mo, #8a8880);
}
.plan-tac__nut { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-tac__nut .plan-xoa { margin-left: auto; }
@media (max-width: 560px) {
	.plan-tac__nut { gap: 6px; }
	.plan-tac__nut .btn { flex: 1 1 auto; }
}

/* Tên to đậm đứng đầu; nhãn "đang sửa" nhỏ, nhạt, đứng sau — trật tự đọc là
   "cái gì" rồi mới tới "đang ở trạng thái nào". */
.plan-tac--duoi .plan-dang b { font-size: 15px; }
.plan-tac--duoi .plan-dang__nhan { text-transform: none; letter-spacing: .01em; font-weight: 600; }
.plan-tac--duoi .plan-trangthai { margin-left: auto; }

/*gcm-thanh-start*/
/* ============================================================================
   THANH ĐIỀU KHIỂN LỊCH TRÌNH — MỘT HÀNG

   Gộp ba khối cũ (hàng tiêu đề "đang sửa", hàng năm nút chữ, bức tường thẻ
   "Lịch trình đã lưu") thành một thanh duy nhất: bên trái là nút xổ mang tên
   chuyến đang sửa, bên phải là bốn nút biểu tượng. Danh sách chỉ hiện khi bấm.
   ========================================================================== */
.plan-thanh {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 18px 0 0; padding: 8px 10px;
	background: #fff; border-radius: 16px;
	box-shadow: 0 1px 2px rgba(30, 30, 28, .06), 0 14px 28px -22px rgba(30, 30, 28, .5);
}
.plan-chon { position: relative; }
.plan-chon__nut {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 10px 7px 12px; border: 0; border-radius: 12px;
	background: rgba(120, 120, 128, .1); cursor: pointer; text-align: left;
	transition: background .15s ease;
}
.plan-chon__nut:hover { background: rgba(120, 120, 128, .18); }
.plan-chon__chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-chon__chu b {
	font: 700 13.5px/1.2 var(--font-sans, sans-serif); color: var(--md-chu, #35342f);
	max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-chon__chu small { font: 600 11px/1 var(--font-sans, sans-serif); color: var(--md-mo, #8a8880); font-variant-numeric: tabular-nums; }
/* Mũi tên xổ nằm SÁT MÉP PHẢI của nút, không dính đuôi chữ: tên dài ngắn khác
   nhau nên mũi tên nhảy chỗ liên tục, mắt phải đi tìm. Ở mép phải thì nó đứng
   yên một chỗ, và cả nút đọc ra là "một ô chọn" chứ không phải một dòng chữ. */
.plan-chon__mui { width: 16px; height: 16px; color: var(--md-mo, #8a8880); flex: 0 0 auto; margin-left: auto; }
.plan-chon__nut { width: 100%; justify-content: space-between; }
.plan-chon { flex: 1 1 320px; min-width: 0; max-width: 520px; }
.plan-chon__nut[aria-expanded="true"] .plan-chon__mui { transform: rotate(180deg); }

/* hộp xổ */
.plan-xo {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
	width: max(280px, 100%); max-height: 320px; overflow-y: auto;
	padding: 6px; background: #fff; border-radius: 14px;
	box-shadow: 0 3px 8px rgba(30, 30, 28, .16), 0 24px 44px -18px rgba(30, 30, 28, .55);
	animation: gcm-menu-xo .15s ease;
}
.plan-xo[hidden] { display: none; }
.pdong { display: flex; align-items: center; border-radius: 10px; position: relative; }
.pdong:hover { background: rgba(60, 60, 58, .06); }
.pdong.is-mo { background: rgba(28, 134, 77, .1); }
.pdong__mo {
	flex: 1 1 auto; min-width: 0; border: 0; background: none; cursor: pointer; text-align: left;
	display: flex; flex-direction: column; gap: 2px; padding: 9px 6px 9px 10px;
}
.pdong__ten { font: 700 13px/1.25 var(--font-sans, sans-serif); color: var(--md-chu, #35342f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdong__phu { font: 600 11px/1 var(--font-sans, sans-serif); color: var(--md-mo, #8a8880); font-variant-numeric: tabular-nums; }
.pdong__nut { position: relative; padding-right: 4px; }
.pdong__trong { margin: 0; padding: 14px 10px; font-size: 12.5px; color: var(--md-mo, #8a8880); }
.pdong__them {
	width: 100%; margin-top: 4px; border: 0; border-radius: 10px; cursor: pointer;
	padding: 10px; background: rgba(28, 134, 77, .1); color: var(--md-nhan, #1c864d);
	font: 700 13px/1 var(--font-sans, sans-serif); text-align: left;
}
.pdong__them:hover { background: rgba(28, 134, 77, .18); }

/* bốn nút thao tác: biểu tượng + nhãn, cao đều 34px */
.plan-tac__nut { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pnut {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 12px; border: 0; border-radius: 11px; cursor: pointer;
	background: rgba(120, 120, 128, .1); color: var(--md-chu, #35342f);
	font: 700 12.5px/1 var(--font-sans, sans-serif);
	transition: background .15s ease, opacity .15s ease;
}
.pnut svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pnut:hover { background: rgba(120, 120, 128, .2); }
.pnut:disabled { opacity: .4; cursor: default; }
.pnut:disabled:hover { background: rgba(120, 120, 128, .1); }
.plan-thanh .plan-trangthai { margin-left: 2px; }

@media (max-width: 700px) {
	.plan-thanh { gap: 8px; padding: 8px; }
	.plan-chon__nut { width: 100%; }
	.plan-chon { flex: 1 1 100%; }
	.plan-tac__nut { margin-left: 0; width: 100%; }
	/* ĐIỆN THOẠI GIỮ CHỮ, BỎ BIỂU TƯỢNG — ngược với thói quen "màn hình nhỏ thì
	   thu về icon". Bốn biểu tượng mũi tên lùi, mũi tên vòng, khung chia ô, mũi
	   tên lên là bốn hình ai cũng phải đoán; mà đoán sai ở đây thì mất công xếp.
	   Chữ đọc là hiểu, và bốn chữ ngắn vẫn vừa một hàng. */
	.pnut { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 12px; }
	.pnut svg { display: none; }
	.pnut span { display: inline; }
}
/*gcm-thanh-end*/

/* ==========================================================================
   ĐẦU CỘT NGÀY: ĐỘ DÀI + MENU ⋯                              (gcm-ngay-start)
   Trước đây đầu cột chỉ có "Ngày 1", một viên đếm số điểm và dấu × xoá ngày.
   Nay thêm dòng "5 điểm · 12 km" — con số quãng đường là thứ duy nhất cảnh báo
   được một ngày bị nhồi quá tay, vì thẻ nào trong cột cũng nhỏ như nhau nên
   nhìn cột không thấy nặng. Ba việc ít dùng gom vào một nút ⋯, nhường chỗ cho
   tên ngày trên cột chỉ rộng chưa đầy 200px.
   ========================================================================== */
.pcot__dau { align-items: flex-start; gap: 6px; padding: 9px 6px 9px 12px; }
.pcot__nhan { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.pcot__nhan b { font: 700 13.5px/1 var(--font-sans, sans-serif); }
.pcot__do {
	font: 600 11px/1.25 var(--font-sans, sans-serif);
	opacity: .9; font-variant-numeric: tabular-nums;
}
/* Ngày quá tải: đảo thành viên thuốc trắng chữ đỏ. Trên nền màu đậm của đầu
   cột, chỉ đổi độ đậm chữ thì không ai thấy. */
.pcot__do.is-nang {
	opacity: 1; align-self: flex-start; padding: 2px 7px; border-radius: 999px;
	background: #fff; color: #b3261e; text-shadow: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.pcot__nut { padding-right: 0; flex: 0 0 auto; }
.pcot__dau .phs__hb {
	width: 24px; height: 24px; color: #fff;
	background: rgba(255, 255, 255, .22);
}
.pcot__dau .phs__hb svg { width: 15px; height: 15px; }
.pcot__dau .phs__hb:hover,
.pcot__dau .phs__hb[aria-expanded="true"] { background: rgba(255, 255, 255, .46); color: #fff; }
/*gcm-ngay-end*/

/* ==========================================================================
   NÚT BẢN ĐỒ TRÊN TỪNG THẺ                                   (gcm-nutmap-start)
   Nằm BÊN TRÁI, đúng chỗ viên số thứ tự cũ: cùng cỡ, cùng màu ngày, nên bố cục
   thẻ không xê dịch — chỉ đổi con số thành hình ghim bấm được. Dấu × giữ nguyên
   ở góc phải trên.
   Việc này thay cho mục "Mở trong Google Maps" của cả ngày: gửi cả ngày thì
   đúng đường nhưng Google đặt lại tên từng chặng theo POI gần nhất, nhìn không
   ra chỗ nào là chỗ nào. Đi từng chỗ một thì chỉ có một đích.
   ========================================================================== */
.pev__map {
	padding: 0; border: 0; cursor: pointer;
	display: grid; place-items: center; border-radius: 50%;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pev__map:active { transform: scale(.9); }

/* thẻ trong cột ngày: thay chỗ viên số thứ tự, nằm trong dòng */
.pcot__ds .pev__map {
	position: relative; flex: 0 0 auto; width: 22px; height: 22px;
	background: var(--ngay-mau, #3767d6); color: #fff;
}
.pcot__ds .pev__map svg { width: 13px; height: 13px; }
.pcot__ds .pev__map::after { content: ''; position: absolute; inset: -5px; }  /* nới vùng chạm */
.pcot__ds .pev__map:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ngay-mau, #3767d6) 28%, transparent); }

/* thẻ trong khay chờ: chưa xếp ngày nên không có số thứ tự để thay — nút đè lên
   góc TRÁI TRÊN của ảnh, đối xứng với dấu × ở góc phải. */
.pev--khay .pev__map {
	position: absolute; left: 8px; top: 8px; width: 24px; height: 24px;
	background: rgba(255, 255, 255, .92); color: var(--md-chu, #35342f);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.pev--khay .pev__map svg { width: 14px; height: 14px; }

/* Bản sao bay theo tay: giấu nút bấm giống như đã giấu dấu ×. Đang kéo thì
   không ai bấm gì, mà nút nổi trên bản sao trông như bấm được. */
.pev--bay .pev__map { display: none; }
/*gcm-nutmap-end*/

/*gcm-anh-rieng-start*/
/* ---- Ảnh riêng cho từng điểm ----
   Nút máy ảnh nhỏ đè góc ảnh của thẻ; có ảnh riêng rồi thì viền vàng + thêm
   nút ✕ trả về ảnh mặc định. */
.pev { position: relative; }
.pev__cam {
	position: absolute; left: 34px; bottom: 4px;
	width: 20px; height: 20px; padding: 0;
	display: grid; place-items: center;
	border: 0; border-radius: 7px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(30, 30, 28, .25);
	color: #5c5a52; cursor: pointer;
	opacity: 0; transition: opacity .15s ease;
}
.pev:hover .pev__cam, .pev__cam.co-anh { opacity: 1; }
.pev__cam svg { width: 12px; height: 12px; }
/* Số ảnh đã chọn — chấm vàng nhỏ góc nút. */
.pev__cam-so {
	position: absolute; top: -6px; right: -6px;
	min-width: 13px; height: 13px; padding: 0 3px;
	border-radius: 7px; background: var(--c-gold, #e9b949);
	color: #4a3a10; font: 700 9px/13px var(--font-sans, sans-serif);
	font-style: normal; text-align: center;
}
.pev__cam.co-anh { color: #8a6d1f; box-shadow: 0 0 0 1.5px var(--c-gold, #e9b949), 0 1px 4px rgba(30, 30, 28, .25); }
.pev__cam-bo {
	position: absolute; left: 58px; bottom: 4px;
	width: 20px; height: 20px; padding: 0; border: 0; border-radius: 7px;
	background: rgba(255, 255, 255, .92); color: #a33;
	box-shadow: 0 1px 4px rgba(30, 30, 28, .25);
	font-size: 10px; line-height: 1; cursor: pointer;
}
/* Thẻ trong khay chờ: ảnh to nên nút nằm trong góc ảnh */
.pev--khay .pev__cam { left: 6px; bottom: auto; top: 6px; opacity: 1; }
.pev--khay .pev__cam-bo { left: 30px; bottom: auto; top: 6px; }
@media (pointer: coarse) { .pev__cam { opacity: 1; } }
/*gcm-anh-rieng-end*/

/*gcm-phim-start*/
/* ---- Màn quay thước phim ----
   Quay thời gian thật nên cho xem sống luôn: chính canvas đang được thu. */
.pphim {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20, 24, 22, .72);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	padding: 18px;
}
.pphim__hop { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }
.pphim__hop canvas {
	height: min(74vh, 720px); width: auto; max-width: 92vw;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.pphim__hop p { color: rgba(255, 252, 244, .85); font: 600 13.5px/1.4 var(--font-sans, sans-serif); }
.pphim__huy {
	border: 0; border-radius: 11px; padding: 9px 22px;
	background: rgba(255, 255, 255, .16); color: #fff;
	font: 700 13.5px var(--font-sans, sans-serif); cursor: pointer;
}
.pphim__huy:hover { background: rgba(255, 255, 255, .28); }
/* Nháy nút phim trên bản đồ sau lần đầu thêm ảnh — chỉ đường tới bước kế. */
.ml-ctrl-btn--tour.gcm-nhay-goiy { animation: gcmNhayTour 1.1s ease-in-out 3; }
@keyframes gcmNhayTour {
	0%, 100% { box-shadow: 0 0 0 0 rgba(233, 185, 73, 0); transform: scale(1); }
	40% { box-shadow: 0 0 0 9px rgba(233, 185, 73, .35); transform: scale(1.12); }
}
/* Card tuỳ chỉnh thước phim */
.phim-cfg {
	margin: 0 0 14px;
	padding: 13px 16px 14px;
	border-radius: 16px;
	background: #fffdf6;
	border: 1px solid rgba(120, 104, 70, .16);
}
.phim-cfg > b { display: block; font-size: 14.5px; color: var(--c-green-deep, #0b4a34); margin-bottom: 9px; }
.phim-cfg__hang {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; flex-wrap: wrap;
}
.phim-cfg__hang + .phim-cfg__hang { margin-top: 7px; }
.phim-cfg__hang > span { font: 600 13px var(--font-sans, sans-serif); color: #55503f; }
.phim-cfg__nut { display: flex; gap: 5px; }
.phim-cfg__nut button {
	border: 1px solid rgba(120, 104, 70, .2); border-radius: 999px;
	background: #fff; color: #55503f;
	font: 600 12.5px var(--font-sans, sans-serif);
	padding: 6px 13px; cursor: pointer;
}
.phim-cfg__nut button.is-chon {
	background: var(--c-green-deep, #0b4a34); color: #fff8e7;
	border-color: var(--c-green-deep, #0b4a34);
}
.phim-cfg__tai {
	display: block; width: 100%;
	margin-top: 12px;
	border: 0; border-radius: 12px;
	padding: 11px 0;
	background: var(--c-green-deep, #0b4a34); color: #fff8e7;
	font: 700 14px var(--font-sans, sans-serif);
	cursor: pointer;
}
.phim-cfg__tai:hover { background: #0d5a40; }
.phim-cfg__tien {
	display: flex; align-items: center; gap: 10px;
	margin-top: 10px;
	height: 8px;
}
.phim-cfg__tien i {
	display: block; flex: 1 1 auto; height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--c-gold, #e9b949), #f0cc74);
	width: 0%; transition: width .5s ease;
	box-shadow: 0 0 0 1px rgba(120, 104, 70, .12);
}
.phim-cfg__tien span { font: 700 12px var(--font-sans, sans-serif); color: #55503f; min-width: 34px; text-align: right; }
.phim-cfg__luu {
	display: block; width: 100%;
	margin-top: 10px;
	border: 0; border-radius: 12px;
	padding: 11px 0;
	background: var(--c-gold, #e9b949); color: #4a3a10;
	font: 700 14px var(--font-sans, sans-serif);
	cursor: pointer;
	animation: luuNhay 1s ease-in-out 2;
}
@keyframes luuNhay { 50% { transform: scale(1.03); } }
/* Card hướng dẫn ba bước */
.phim-hd {
	position: relative;
	margin: 0 0 14px;
	padding: 14px 40px 13px 16px;
	border-radius: 16px;
	background: linear-gradient(120deg, #fdf9ee, #f4efdf);
	border: 1px solid rgba(120, 104, 70, .16);
	color: #4a4438;
}
.phim-hd b { display: block; font-size: 14.5px; color: var(--c-green-deep, #0b4a34); margin-bottom: 6px; }
.phim-hd ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.phim-hd li + li { margin-top: 3px; }
.phim-hd__dong {
	position: absolute; top: 8px; right: 8px;
	width: 26px; height: 26px; border: 0; border-radius: 50%;
	background: rgba(120, 120, 128, .14); color: #6a655a;
	font-size: 11px; line-height: 1; cursor: pointer;
}
.phim-hd__dong:hover { background: rgba(120, 120, 128, .26); }
/*gcm-phim-end*/

/*gcm-pnhanh-start*/
/* ---- Bảng thêm nhanh địa điểm: kanban thu nhỏ ---- */
.pnhanh {
	margin: 16px 0 0;
	padding: 14px 16px 16px;
	border-radius: 16px;
	background: #fbf8f0;
	border: 1px solid rgba(120, 104, 70, .14);
}
.pnhanh > b { display: block; font-size: 14.5px; color: var(--c-green-deep, #0b4a34); }
.pnhanh > i { display: block; font: 500 12.5px/1.4 var(--font-sans, sans-serif); font-style: normal; color: #7a745f; margin: 3px 0 11px; }
.pnhanh__bo {
	display: flex; gap: 10px;
	overflow-x: auto; padding-bottom: 6px;
	scrollbar-width: thin;
}
.pnhanh__cot {
	flex: 0 0 216px; width: 216px;
	background: #fff; border-radius: 12px;
	border: 1px solid rgba(120, 104, 70, .12);
	overflow: hidden;
}
.pnhanh__cot header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 11px;
	background: var(--nh-mau, #888); color: #fff;
	font: 700 12.5px var(--font-sans, sans-serif);
}
.pnhanh__cot header span { opacity: .8; font-weight: 600; }
.pnhanh__ds { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; }
.pnhanh__d {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 5px; border-radius: 9px; cursor: pointer;
}
.pnhanh__d:hover { background: rgba(120, 120, 128, .1); }
.pnhanh__d img, .pnhanh__trong {
	width: 26px; height: 26px; flex: 0 0 auto;
	border-radius: 7px; object-fit: cover; background: rgba(60, 60, 58, .1); display: block;
}
.pnhanh__ten {
	flex: 1 1 auto; min-width: 0;
	font: 600 12px/1.25 var(--font-sans, sans-serif); color: #3c3a32;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnhanh__them {
	flex: 0 0 auto;
	width: 22px; height: 22px; border: 0; border-radius: 50%;
	background: rgba(11, 74, 52, .1); color: var(--c-green-deep, #0b4a34);
	font: 700 14px/1 var(--font-sans, sans-serif);
	cursor: pointer;
}
.pnhanh__d:hover .pnhanh__them { background: var(--c-green-deep, #0b4a34); color: #fff8e7; }
/* Đã nằm trong lịch: dấu + thành ✓ xanh, chạm lần nữa là gỡ. */
.pnhanh__d.is-da .pnhanh__them { background: var(--c-green-deep, #0b4a34); color: #fff8e7; }
.pnhanh__d.is-da .pnhanh__them::before { content: '\2713'; }
.pnhanh__d.is-da .pnhanh__them { font-size: 0; }
.pnhanh__d.is-da .pnhanh__them::before { font-size: 12px; }
.pnhanh__d.is-da .pnhanh__ten { color: rgba(60, 58, 50, .5); }
@media (max-width: 720px) {
	.pnhanh__cot { flex-basis: 186px; width: 186px; }
	.pnhanh__ds { max-height: 224px; }
}
/*gcm-pnhanh-end*/

/*gcm-pthem-start*/
/* ---- Thêm địa điểm bạn muốn (dán link Google Maps) ---- */
.pthem { margin: 12px 0 0; }
.pthem__mo {
	display: block; width: 100%;
	padding: 12px 0;
	border: 1.5px dashed rgba(11, 74, 52, .35);
	border-radius: 14px;
	background: rgba(11, 74, 52, .04);
	color: var(--c-green-deep, #0b4a34);
	font: 700 13.5px var(--font-sans, sans-serif);
	cursor: pointer;
}
.pthem__mo:hover { background: rgba(11, 74, 52, .08); }
.pthem__form {
	margin-top: 10px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #fffdf6;
	border: 1px solid rgba(120, 104, 70, .16);
}
.pthem__form > i {
	display: block; font: 500 12.5px/1.5 var(--font-sans, sans-serif);
	font-style: normal; color: #7a745f; margin-bottom: 9px;
}
.pthem__link, .pthem__ten {
	display: block; width: 100%; box-sizing: border-box;
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1px solid rgba(120, 104, 70, .25);
	border-radius: 10px;
	/* PHẢI ≥16px: iOS Safari tự PHÓNG TO TRANG khi chạm vào input chữ nhỏ hơn
	   16px — "nhấp vào ô paste link tự nhiên nó zoom" chính là nó. */
	font: 500 16px var(--font-sans, sans-serif);
	background: #fff;
}
.pthem__link:focus, .pthem__ten:focus { outline: 2px solid rgba(11, 74, 52, .35); }
.pthem__loi { font: 600 12.5px/1.45 var(--font-sans, sans-serif); color: #a33; margin: 2px 0 8px; }
.pthem__nut { display: flex; gap: 8px; justify-content: flex-end; }
.pthem__huy, .pthem__ok {
	border: 0; border-radius: 10px; padding: 9px 18px;
	font: 700 13px var(--font-sans, sans-serif); cursor: pointer;
}
.pthem__huy { background: rgba(120, 120, 128, .14); color: #55503f; }
.pthem__ok { background: var(--c-green-deep, #0b4a34); color: #fff8e7; }
.pthem__ok:disabled { opacity: .55; }
/*gcm-pthem-end*/