/* Công cụ chuyển đổi toạ độ VN-2000 ⇄ Google Maps — trang /chuyen-doi-toa-do/ (inc/chuyen-toa-do.php,
   page-chuyen-doi-toa-do.php). Mobile-first: 360px trước; từ 1024px chia hai cột. Chỉ nạp trên đúng trang này. */

/* ---------- Khung trang (không thanh bên) ---------- */
.tdo-trang { padding-bottom: var(--sp-6); }
.tdo-trang__tieu-de { margin: var(--sp-2) 0 var(--sp-2); font-size: 21px; line-height: 1.3; }

.tdo__mo-dau { margin: 0 0 var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
.tdo__rieng-tu { display: inline-flex; gap: 4px; align-items: center; color: #1e7a3a; font-weight: 600; }
.tdo__rieng-tu svg { flex: none; width: 15px; height: 15px; }

/* ---------- Cột trái: nhập ---------- */
.tdo__trai { min-width: 0; }
.tdo__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); padding: var(--sp-1); background: var(--c-surface-2); border-radius: var(--radius); }
.tdo__tabs button { min-height: 42px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tdo__tabs button.is-active { background: #fff; color: var(--c-primary); box-shadow: var(--shadow-1); }

.tdo__khung { margin-top: var(--sp-3); }
.tdo__dau-bang { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.tdo__dau-bang .label { margin: 0; }
.tdo__nut-nho { display: flex; gap: var(--sp-1); }
.tdo__nut-nho button { min-height: 32px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; color: var(--c-text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.tdo__nut-nho button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tdo__goi-y { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }

.tdo__nhap { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tdo__nhap th { padding: 0 3px 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-align: left; }
.tdo__nhap th:first-child, .tdo__stt { width: 22px; }
.tdo__nhap th:last-child { width: 34px; }
.tdo__nhap td { padding: 3px; }
/* 16px: dưới 16px iPhone tự phóng to trang khi chạm vào ô */
.tdo__nhap .field { min-height: 42px; padding: 6px 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.tdo__stt { color: var(--c-muted); font-size: var(--fs-sm); text-align: center; }
.tdo__nhap tr.is-nghi .field { border-color: var(--c-danger); background: #fff5f4; }
.tdo__nhap tr.is-nghi .tdo__stt { color: var(--c-danger); font-weight: 700; }
.tdo__xoa { width: 34px; height: 42px; border: 0; background: none; color: #999; font-size: 22px; line-height: 1; cursor: pointer; }
.tdo__xoa:hover { color: var(--c-danger); }
.tdo__them { width: 100%; min-height: 38px; margin-top: var(--sp-1); border: 1px dashed #c8c8c8; border-radius: var(--radius-sm); background: none; color: var(--c-muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tdo__them:hover { border-color: var(--c-primary); color: var(--c-primary); }

.tdo__hai-o { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.tdo__hai-o .field { font-size: 16px; }
.tdo__nut { width: 100%; min-height: 46px; margin-top: var(--sp-3); font-size: var(--fs-md); }
.tdo__nut svg, .tdo__vi-tri svg { width: 18px; height: 18px; }
.tdo__vi-tri { width: 100%; margin-top: var(--sp-2); border-color: var(--c-border); }
#tdo-latlng { font-size: 16px; }

.tdo__bao:empty { display: none; }
.tdo__bao { margin-top: var(--sp-3); }
.tdo__bao-dong { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.tdo__bao-dong.is-loi { background: #fdecea; color: #8a1c14; }
.tdo__bao-dong.is-canh-bao { background: var(--c-accent-50); color: #6b4a00; }
.tdo__bao-dong.is-tin { background: #eaf1fb; color: #1b3f73; }

/* ---------- Cột phải: kết quả + bản đồ ---------- */
.tdo__phai { min-width: 0; margin-top: var(--sp-4); }

.tdo__tom-tat { padding: var(--sp-3) var(--sp-4); border: 1px solid #f1c9cb; border-radius: var(--radius); background: var(--c-primary-50); scroll-margin-top: calc(var(--nav-h) + 12px); outline: none; }
.tdo__tom-tat p { margin: 0; }
.tdo__tt-xa { font-size: var(--fs-sm); }
.tdo__tt-xa.is-canh-bao { color: #6b4a00; font-weight: 600; }
.tdo__tt-so { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); margin-top: var(--sp-1) !important; }
.tdo__tt-so strong { font-size: 26px; line-height: 1.2; color: var(--c-dark); }
.tdo__tt-so span { font-size: var(--fs-sm); color: var(--c-muted); }
.tdo__tt-phu { margin-top: var(--sp-1) !important; font-size: var(--fs-sm); color: var(--c-muted); }
.tdo__tt-phu b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tdo__tt-xy { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.tdo__tt-xy p { display: flex; align-items: center; gap: var(--sp-2); }
.tdo__tt-xy span { width: 92px; font-size: var(--fs-sm); color: var(--c-muted); }
.tdo__tt-xy strong { flex: 1; font-size: 20px; font-variant-numeric: tabular-nums; }
.tdo__tt-nut { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
.tdo__tt-nut .btn { min-height: 44px; padding: 0 var(--sp-2); white-space: normal; text-align: center; line-height: 1.2; }

.tdo__ban-do-khung { position: relative; margin-top: var(--sp-3); }
.tdo__ban-do { height: 300px; border: 1px solid var(--c-border); border-radius: var(--radius); z-index: 0; background: #eef0ee; }
/* Gợi ý nhỏ ở góc dưới trái bản đồ — không che giữa bản đồ, luôn hiện để khách biết cách phóng to. */
.tdo__ban-do-cho { position: absolute; left: 10px; bottom: 10px; z-index: 500; width: max-content; max-width: calc(100% - 150px); margin: 0; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-1); font-size: var(--fs-xs, 12px); line-height: 1.4; color: var(--c-muted); pointer-events: none; }
.tdo__cho-chuot { display: inline; }
.tdo__cho-cham { display: none; }
@media (hover: none) { .tdo__cho-chuot { display: none; } .tdo__cho-cham { display: inline; } }
.co-ket-qua .tdo__cho-dau, .tdo[data-che-do="maps"] .tdo__cho-dau { display: none; }
.tdo[data-che-do="maps"] .tdo__ban-do { cursor: crosshair; }

/* Điện thoại: chưa có kết quả thì giấu bản đồ trống ở chế độ sổ → nút xem nằm gọn trong tầm mắt */
@media (max-width: 1023px) {
	.tdo[data-che-do="so"]:not(.co-ket-qua) .tdo__phai { display: none; }
}

/* Nút chuyển Vệ tinh ⇄ Bản đồ (chỉ có khi đã cài khoá Esri) */
.tdo__nen { display: flex; overflow: hidden; background: #fff; }
.tdo__nen button { min-height: 32px; padding: 0 10px; border: 0; background: #fff; color: var(--c-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tdo__nen button + button { border-left: 1px solid var(--c-border); }
.tdo__nen button[aria-pressed="true"] { background: var(--c-primary); color: #fff; }
/* Trên ảnh vệ tinh (cây, mái nhà) đỏ khó thấy — đổi ranh sang vàng */
.tdo--ve-tinh .tdo__ranh { stroke: #ffd60a; fill: #ffd60a; stroke-width: 3px; }
.tdo--ve-tinh .tdo__ban-do { background: #2b2f2b; }

.tdo__dinh { display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.tdo__nhan-canh { width: auto !important; height: auto !important; background: none; border: 0; }
.tdo__nhan-canh span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 3px; background: rgba(255, 255, 255, .9); color: #7a1418; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(202, 37, 43, .25); }

.tdo__chi-tiet { margin-top: var(--sp-3); }
.tdo__canh ul { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-1) 0 var(--sp-3); padding: 0; list-style: none; }
.tdo__canh li { padding: 3px 9px; border-radius: 999px; background: var(--c-surface-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tdo__canh li span { color: var(--c-muted); margin-right: 3px; }
.tdo__canh small { font-weight: 400; color: var(--c-muted); }
.tdo__canh li em { font-style: normal; font-weight: 600; }
.tdo__canh li.is-khop { background: #e8f5ec; }
.tdo__canh li.is-khop em { color: #1e7a3a; }
.tdo__canh li.is-lech { background: #fdecea; color: #8a1c14; }
.tdo__tt-kiem { margin-top: var(--sp-1) !important; font-size: var(--fs-sm); font-weight: 600; color: #1e7a3a; }
.tdo__tt-kiem.is-lech { color: #8a1c14; }

/* Hướng dẫn quét ảnh sổ bằng điện thoại */
.tdo__anh { margin: 0 0 var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fafafa; font-size: var(--fs-sm); }
.tdo__anh summary { padding: 8px 12px; font-weight: 600; color: var(--c-link); cursor: pointer; list-style: none; }
.tdo__anh summary::-webkit-details-marker { display: none; }
.tdo__anh summary::before { content: "📷 "; }
.tdo__anh[open] summary { border-bottom: 1px solid var(--c-border); }
.tdo__anh ol { margin: 0; padding: 8px 12px 10px 30px; line-height: 1.55; }
.tdo__anh li + li { margin-top: 4px; }
.tdo__anh p { margin: 0; padding: 0 12px 10px; color: var(--c-muted); font-size: var(--fs-xs); }

.tdo__bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.tdo__bang { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tdo__bang th, .tdo__bang td { padding: 7px 8px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.tdo__bang tr:last-child td { border-bottom: 0; }
.tdo__bang th { background: var(--c-surface-2); font-weight: 600; font-size: var(--fs-xs); }
.tdo__bang .tdo__mo { color: var(--c-muted); font-size: var(--fs-xs); }
.tdo__chep { min-height: 30px; padding: 3px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tdo__chep:hover { border-color: var(--c-primary); color: var(--c-primary); }

.tdo__hanh-dong { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.tdo__phu { border-color: var(--c-border); }
.tdo__phu:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tdo__pheu-tieu-de { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.tdo__mien-tru { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); font-style: italic; }

/* ---------- Cẩm nang ---------- */
.tdo__cam-nang { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
.tdo__cam-nang h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.tdo__cam-nang h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-md); }
.tdo__cam-nang p { margin: 0; font-size: var(--fs-sm); color: #444; line-height: 1.6; }

@media (min-width: 560px) {
	.tdo__hai-o { grid-template-columns: 1.3fr 1fr; }
	.tdo__nhap th:first-child, .tdo__stt { width: 28px; }
}

@media (min-width: 768px) {
	.tdo-trang__tieu-de { font-size: var(--fs-2xl); }
	.tdo__mo-dau { font-size: var(--fs-base); }
	.tdo__ban-do { height: 380px; }
	.tdo__cam-nang-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
}

/* Máy tính: hai cột — nhập bên trái, bản đồ + kết quả bên phải, cùng nằm trong một màn hình */
@media (min-width: 1024px) {
	.tdo__luoi-chinh { display: grid; grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
	.tdo__phai { margin-top: 0; }
	.tdo__tom-tat + .tdo__ban-do-khung { margin-top: var(--sp-3); }
	.tdo__tom-tat[hidden] + .tdo__ban-do-khung { margin-top: 0; }
	.tdo__ban-do { height: clamp(360px, calc(100vh - 330px), 520px); }
	.tdo__tt-nut { display: flex; }
	.tdo__tt-nut .btn { padding: 0 var(--sp-4); }
	.tdo__hai-o { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) {
	.tdo__hai-o { grid-template-columns: 1fr 150px; }
	/* Máy tính không có lỗi tự phóng của iPhone — thu ô nhập cho gọn, nút xem nằm trong màn hình đầu */
	.tdo__nhap .field, .tdo__hai-o .field, #tdo-latlng { min-height: 38px; font-size: 15px; }
	.tdo__xoa { height: 38px; }
}

/*
 * Vùng chạm ≥ 44px trên điện thoại/máy tính bảng (gói UI/UX vòng 4, 29/09/2026). Đo 390px trước khi sửa:
 * tab 42, "Dán bảng"/"Xoá hết" 32, ô X/Y 42, nút × 34×42, "Thêm đỉnh" 38. Máy tính ≥ 1200px giữ bản gọn.
 */
@media (max-width: 1199.98px) {
	.tdo__tabs button,
	.tdo__nut-nho button,
	.tdo__them,
	.tdo__nen button,
	.tdo__chep { min-height: 44px; }
	.tdo__nhap .field { min-height: 44px; }
	.tdo__xoa { width: 44px; height: 44px; }
	.tdo__nut-nho button { white-space: nowrap; }
}

/*
 * Nút chat theo ngữ cảnh ở đầu cột × (vòng 5). Chỉ hiện khi html.tdo-chat-trong (chuyen-toa-do.js);
 * lúc đó nút chat nổi + nút lên đầu ẩn. Đầu bảng dính trên để nút luôn trong tầm mắt khi cuộn qua các hàng.
 */
.tdo__nhap thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
@media (min-width: 992px) { .tdo__nhap thead th { top: var(--nav-h, 44px); } }
.tdo__th-chat { width: 44px; padding: 0; }
.tdo__chat {
	display: grid; place-items: center; width: 44px; height: 44px; margin: 2px 0; padding: 0;
	border: 0; border-radius: 50%; background: var(--c-primary); color: #fff; cursor: pointer;
	box-shadow: 0 4px 12px rgba(202, 37, 43, .3);
	visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s;
}
.tdo__chat .icon { width: 22px; height: 22px; }
.tdo__chat:focus-visible { outline: 3px solid var(--c-accent, #f0a500); outline-offset: 2px; }
html.tdo-chat-trong .tdo__chat { visibility: visible; opacity: 1; }
html.tdo-chat-trong .bds-chat:not(.is-open),
html.tdo-chat-trong .to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html.tdo-chat-trong .bds-chat:not(.is-open) { transition: opacity .2s ease, visibility .2s; }
@media (prefers-reduced-motion: reduce) {
	.tdo__chat, html.tdo-chat-trong .bds-chat:not(.is-open) { transition: none; }
}

/*
 * Giữ chỗ cho bảng nhập (29/09/2026): 5 hàng mặc định do chuyen-toa-do.js vẽ SAU khi tải ⇒ mọi thứ bên
 * dưới bị đẩy xuống — Lighthouse đo CLS 0,125 (ngưỡng tốt < 0,1). Bảng còn rỗng thì đặt sẵn đúng chiều
 * cao 5 hàng (đo trên web thật: đầu bảng 51 + 5 × 50 = 301px; ≥ 1200px: 51 + 5 × 44 = 271px).
 * Bảng có hàng rồi thì :has() hết khớp, chiều cao tự nhiên như cũ.
 */
.tdo__nhap:has(tbody:empty) { height: 301px; }
@media (min-width: 1200px) { .tdo__nhap:has(tbody:empty) { height: 271px; } }