/* [db8dd01c] Chương 01 «Liên kết vùng» — 4 kiểu bản đồ (?c1=1..4, Ken 29/10 «làm thành các option và thay»; ?c1=0 = bản đồ màu nước cũ, ẩn chứ không xoá).
   Mockup design/mockups/location/mockup-*.png, kiểm kê vt-inventory.md. Bản đồ dựng từ OpenStreetMap: tmp/vt_map.py → assets/vt/ (nền base-k.webp + lớp ov-k.svg). */
.vt, .vt__text, .vt__zoom { display: none; }
:root:not([data-c1="0"]) .ch1 .vt, :root:not([data-c1="0"]) .ch1 .vt__text, :root:not([data-c1="0"]) .ch1 .vt__zoom { display: block; }
/* bản đồ màu nước cũ: ẩn mốc + dải nối + chữ «Chạm biển» khi đang xem kiểu mới */
:root:not([data-c1="0"]) .ch1 :is(.ch1__route, .pin, .ch1__kicker, .ch1__title, .ch1__lede, .ch1__glider) { display: none; }
:root:not([data-c1="0"]) .ch1 { background: var(--vt-bg, #03213A); } /* nền dưới ảnh bản đồ */
:root:not([data-c1="0"]) .ch1::before { display: none; }
:root:not([data-c1="0"]) .ch1 { --band-b: 5vh; } /* Ken 29/10: đáy hoà vào chương dưới «nhiều quá» → dải nối mỏng */ /* dải nối chương phía đáy mỏng lại: mép dưới bản đồ có hướng đi Nha Trang / Buôn Ma Thuột */
/* nút + / − lùi trái x 1530 (mockup ~1600): cột tuỳ chọn (.dock) + nút lên đầu trang chiếm mép phải */

.vt, .ch1 .vt__text { -webkit-user-select: none; user-select: none; } /* Ken: điểm/chữ bị bôi chọn khi kéo bản đồ */
.vt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --u: calc(100cqw / 1672); } /* toạ độ px mockup 1672×941 = toạ độ ảnh nền (khung .ch1__frame phủ kín, container-type: size) */

.vt__map { position: absolute; inset: 0; transform-origin: var(--ox) var(--oy); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.vt__map.is-drag { transition: none; }
.vt__base, .vt__ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt__base { object-fit: fill; visibility: hidden; } /* nền thường = ảnh .ch1__frame img (hoặc shader); bản sao này chỉ hiện khi phóng to (phóng cùng lớp SVG) */
.vt.is-zoom .vt__base { visibility: visible; }
/* đang phóng: dải nền trái của ảnh bị phóng trượt đi → nền riêng sau khối chữ để chữ không nằm trên bản đồ */
.vt.is-zoom .vt__text { background: linear-gradient(90deg, var(--vt-bg, #03213A) 30%, color-mix(in srgb, var(--vt-bg, #03213A) 85%, transparent) 36%, transparent 46%); transition: background .4s; }
.vt__ov { font-family: "Be Vietnam Pro", sans-serif; overflow: visible; }
.vt__ov text { paint-order: stroke; }

/* ---- Chuyển động khi vào chương (.ch1.is-in): đường chính tự vẽ → vòng km nở → điểm bật theo khoảng cách → thẻ logo ---- */
.vt-r { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ch1.is-in .vt-r { animation: vt-draw 2.4s cubic-bezier(.45, .05, .35, 1) .4s forwards; }
.vt-rings circle, .vt-rings path, .vt-rings text { opacity: 0; }
.ch1.is-in .vt-rings circle { animation: vt-ring 1.2s cubic-bezier(.2, .7, .2, 1) calc(.9s + var(--i) * .18s) forwards; transform-box: view-box; }
.ch1.is-in .vt-rings path, .ch1.is-in .vt-rings text { animation: vt-fade .8s ease 1.6s forwards; }
.vt-poi, .vt-sh, .vt-dir, .vt-sea, .vt-compass, .vt-inset, .vt-rail { opacity: 0; }
.ch1.is-in .vt-poi { animation: vt-pop .6s cubic-bezier(.2, .9, .3, 1.3) var(--d) forwards; }
.ch1.is-in :is(.vt-sh, .vt-sea, .vt-compass, .vt-rail) { animation: vt-fade .9s ease 1.4s forwards; }
.ch1.is-in .vt-dir { animation: vt-fade .9s ease var(--d) forwards; }
.ch1.is-in .vt-inset { animation: vt-fade 1s ease .6s forwards; }
.vt-card { opacity: 0; }
.ch1.is-in .vt-card { animation: vt-drop .8s cubic-bezier(.2, .8, .2, 1.1) 2.4s forwards; }
.ch1.is-in .vt-pulse { animation: vt-pulse 2.4s ease-out 3s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vt-draw { to { stroke-dashoffset: 0; } }
@keyframes vt-ring { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes vt-fade { to { opacity: 1; } }
@keyframes vt-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes vt-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes vt-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
/* rê / chạm điểm (Ken 29/10 «không có UIX gì»): gốc lỗi = vt-pop chạy xong giữ transform:none (forwards) đè luật :hover transform → dùng thuộc tính scale riêng.
   Ảnh: phóng 2,3× quanh tâm ảnh, vòng màu dày lên; đường nối sáng + chạy nét, chấm định vị đập nhịp tại chỗ thật; điểm khác mờ đi. vt.js đưa điểm đang rê lên trên cùng. */
.vt-poi { cursor: pointer; pointer-events: bounding-box; transition: scale .35s cubic-bezier(.2, .8, .2, 1.2), filter .3s; }
.vt-poi:not(.vt-poi--ph):hover { scale: 1.35; }
.vt-ph { transition: scale .45s cubic-bezier(.2, .8, .2, 1.12); }
.vt-poi:hover .vt-ph { scale: 2.3; }
.vt-ring { transition: stroke-width .35s; } .vt-poi:hover .vt-ring { stroke-width: 1.6; } /* nét bị phóng 2,3× theo ảnh → 1,6 ≈ 3,7 px */
.vt-lbl { transition: translate .45s cubic-bezier(.2, .8, .2, 1.12); }
.vt-poi:hover .vt-lbl { translate: var(--dx, 0) 0; }
.vt-lead { transition: stroke-width .3s; }
.vt-poi:hover .vt-lead { stroke-width: 3; stroke-dasharray: 7 5; animation: vt-run .9s linear infinite; }
@keyframes vt-run { to { stroke-dashoffset: -24; } }
.vt-pin { transform-box: fill-box; transform-origin: center; transition: scale .3s; }
.vt-poi:hover .vt-pin { scale: 1.5; }
.vt-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vt-poi:hover .vt-halo { animation: vt-pulse 1.4s ease-out infinite; }
.vt__ov:has(.vt-poi:hover) .vt-poi:not(:hover) { filter: opacity(.45) saturate(.6); } /* filter chứ không opacity: vt-pop giữ opacity:1 (forwards) */
.ch1.is-in .vt-poi.is-on { animation: none; opacity: 1; } /* bật xong (vt.js) → bỏ hoạt ảnh: chuyển nút trong DOM không làm điểm chạy lại vt-pop (mờ 0 suốt độ trễ --d) */
.vt__ov { pointer-events: none; }
/* sân khấu WebGL: .ch1 luôn pointer-events: none (index.html) → chỉ mở cho nút/điểm khi đã vào chương (chưa vào thì chữ mờ 0 vẫn bấm được) */
.ch1.is-in :is(.vt__text > *, .vt__zoom button, .vt__ov .vt-poi), .ch1.is-in .vt.is-zoom { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .vt-r { stroke-dashoffset: 0; } .vt-rings *, .vt-poi, .vt-sh, .vt-dir, .vt-sea, .vt-compass, .vt-inset, .vt-rail, .vt-card { opacity: 1; }
  .ch1.is-in :is(.vt-r, .vt-rings *, .vt-poi, .vt-sh, .vt-dir, .vt-sea, .vt-compass, .vt-inset, .vt-rail, .vt-card, .vt-pulse) { animation: none; }
}

/* ---- Khối chữ trái (toạ độ px mockup 1672×941 qua --u) ---- */
.vt__text { position: absolute; inset: 0; pointer-events: none; color: #F5ECDC; }
.vt__text > * { position: absolute; margin: 0; }
@media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) { .vt__text { translate: calc((100cqw - 100vw) / 2) 0; } } /* [db8dd01c] khung bản đồ phủ kín (cover) cắt 2 bên ở màn vuông hơn 16:9 (1024×768 cắt ~170 px) → dời khối chữ vào lại trong màn */
.vt__kick { font: 600 calc(15 * var(--u)) / 1 "Be Vietnam Pro", sans-serif; letter-spacing: .38em; display: flex; align-items: center; gap: calc(14 * var(--u)); }
.vt__kick::after { content: ""; width: calc(60 * var(--u)); border-top: 1px solid currentColor; opacity: .7; }
.vt__ttl { font: 500 calc(96 * var(--u)) / .98 "Lora", serif; letter-spacing: -.01em;
  background: linear-gradient(100deg, #C8925A 0%, #F2D3A4 45%, #D9A86C 70%, #F5DDB5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vt__sub { font: 500 calc(46 * var(--u)) / 1 "Lora", serif; color: #E6BE86; display: none; }
.vt__lede { width: calc(450 * var(--u)); font: 400 calc(18.5 * var(--u)) / 1.62 "Be Vietnam Pro", sans-serif; color: rgba(245, 236, 220, .92); }
.vt__btns { display: flex; gap: calc(18 * var(--u)); }
.vt__btns a { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: 99px;
  font: 500 calc(18 * var(--u)) / 1 "Be Vietnam Pro", sans-serif; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.vt__btns a:hover { transform: translateY(-2px); }
.vt__btns svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vt__more { background: linear-gradient(100deg, #D7A66C, #F3D6A6 55%, #D9A86C); color: #0E2331; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.vt__gmap { border: 1px solid rgba(226, 185, 121, .75); color: #F5ECDC; }
.vt__zoom { position: absolute; inset: 0; pointer-events: none; }
.vt__zoom button { position: absolute; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(245, 236, 220, .55); background: rgba(14, 35, 49, .35); color: #F5ECDC; font: 300 calc(30 * var(--u)) / 1 "Be Vietnam Pro", sans-serif; cursor: pointer;
  translate: -50% -50%; transition: background .25s; }
.vt__zoom button:hover { background: rgba(14, 35, 49, .7); }
.vt__zoom button:disabled { opacity: .35; cursor: default; }
.vt__zoom [data-z="1"] { left: calc(var(--zx) * var(--u)); top: calc(var(--zy) * var(--u)); }
.vt__zoom [data-z="-1"] { left: calc(var(--zx) * var(--u)); top: calc((var(--zy) + var(--zg)) * var(--u)); }

/* Kiểu 1 «Đêm navy»: tiêu đề HOA 2 dòng + phụ đề */
[data-c1="1"] .ch1 { --vt-bg: #03213A; }
/* tiêu đề lớn = chính dòng «LIÊN KẾT VÙNG» (mockup), «Kết nối thuận tiện» xuống làm phụ đề */
[data-c1="1"] .vt__ttl { display: none; }
[data-c1="1"] .vt__kick { left: calc(78 * var(--u)); top: calc(205 * var(--u)); width: calc(420 * var(--u)); font: 500 calc(88 * var(--u)) / 1.02 "Lora", serif; letter-spacing: 0;
  background: linear-gradient(100deg, #C8925A 0%, #F2D3A4 45%, #D9A86C 70%, #F5DDB5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-c1="1"] .vt__kick::after { display: none; }
[data-c1="1"] .vt__sub { display: block; left: calc(80 * var(--u)); top: calc(395 * var(--u)); }
[data-c1="1"] .vt__sub::after { content: ""; position: absolute; left: 0; top: calc(72 * var(--u)); width: calc(44 * var(--u)); border-top: 2px solid #D9A86C; }
[data-c1="1"] .vt__lede { left: calc(80 * var(--u)); top: calc(492 * var(--u)); }
[data-c1="1"] .vt__btns { left: calc(80 * var(--u)); top: calc(595 * var(--u)); }
[data-c1="1"] .vt__zoom { --zx: 1530; --zy: 760; --zg: 66; }
[data-c1="1"] .vt__zoom button { background: #0E2331; border-color: #0E2331; }
/* Kiểu 2 «Vòng bán kính» */
[data-c1="2"] .vt__kick { left: calc(38 * var(--u)); top: calc(212 * var(--u)); }
[data-c1="2"] .vt__ttl { left: calc(36 * var(--u)); top: calc(255 * var(--u)); }
[data-c1="2"] .vt__lede { left: calc(40 * var(--u)); top: calc(470 * var(--u)); }
[data-c1="2"] .vt__btns { left: calc(40 * var(--u)); top: calc(582 * var(--u)); }
[data-c1="2"] .vt__zoom { --zx: 1530; --zy: 175; --zg: 58; }
/* Kiểu 3 «Cát sáng»: nền kem, chữ navy */
[data-c1="3"] .ch1 { --vt-bg: #F5EBDB; }
[data-c1="3"] .vt__text { color: #0E2331; }
[data-c1="3"] .vt__kick { left: calc(56 * var(--u)); top: calc(205 * var(--u)); }
[data-c1="3"] .vt__ttl { left: calc(50 * var(--u)); top: calc(240 * var(--u)); font-size: calc(100 * var(--u)); background: none; color: #0E2331; }
[data-c1="3"] .vt__lede { left: calc(56 * var(--u)); top: calc(458 * var(--u)); color: #1D3346; }
[data-c1="3"] .vt__btns { left: calc(53 * var(--u)); top: calc(570 * var(--u)); }
[data-c1="3"] .vt__more { background: #0E2331; color: #F5ECDC; }
[data-c1="3"] .vt__gmap { background: #0E2331; color: #F5ECDC; border-color: #0E2331; }
[data-c1="3"] .vt__zoom { --zx: 1530; --zy: 567; --zg: 65; }
[data-c1="3"] .vt__zoom button { background: #FBF4E6; color: #0E2331; border-color: rgba(14, 35, 49, .25); box-shadow: 0 4px 12px rgba(14, 35, 49, .15); }
/* Kiểu 4 «Hai tầng»: tiêu đề 1 dòng, đoạn văn nghiêng */
[data-c1="4"] .ch1 { --vt-bg: #081A2C; }
[data-c1="4"] .vt__kick { left: calc(98 * var(--u)); top: calc(92 * var(--u)); }
[data-c1="4"] .vt__ttl { left: calc(84 * var(--u)); top: calc(122 * var(--u)); font-size: calc(74 * var(--u)); white-space: nowrap; }
[data-c1="4"] .vt__lede { left: calc(86 * var(--u)); top: calc(218 * var(--u)); width: calc(600 * var(--u)); font: italic 400 calc(24 * var(--u)) / 1.4 "Lora", serif; }
[data-c1="4"] .vt__btns { left: calc(82 * var(--u)); top: calc(344 * var(--u)); }
[data-c1="4"] .vt__btns a { height: calc(50 * var(--u)); }
[data-c1="4"] .vt__zoom { --zx: 1530; --zy: 612; --zg: 64; }
[data-c1="4"] .vt__zoom button { border-color: #D9A86C; color: #F2D3A4; }
[data-c1="4"] .vt__ttl br { display: none; }

/* ---- Điện thoại: khối chữ ở khung dính trên cùng (.ch1 .stage, vt.js chuyển vào), nền mờ theo màu kiểu; bỏ nút + / − (bản đồ đã lia ngang) ---- */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  :root:not([data-c1="0"]) .ch1 .stage::after { height: 330px; background: linear-gradient(var(--vt-bg, #03213A), color-mix(in srgb, var(--vt-bg, #03213A) 80%, transparent) 200px, transparent); }
  .ch1 .stage .vt__text { --u: 1px; }
  .ch1 .vt__zoom { display: none !important; }
  .ch1 .stage .vt__kick { left: 22px; top: 62px; font-size: 11px; }
  .ch1 .stage .vt__ttl { left: 20px; top: 80px; font-size: 40px; white-space: nowrap; }
  .ch1 .stage .vt__ttl br { display: none; }
  .ch1 .stage .vt__lede { left: 22px; top: 134px; width: calc(100vw - 44px); font: 400 14.5px / 1.5 "Be Vietnam Pro", sans-serif; }
  .ch1 .stage .vt__btns { left: 22px; top: 210px; gap: 10px; }
  .ch1 .stage .vt__btns a { height: 40px; padding: 0 16px; font-size: 14px; }
  [data-c1="1"] .ch1 .stage .vt__kick { left: 20px; top: 62px; width: auto; font-size: 36px; white-space: nowrap; }
  [data-c1="1"] .ch1 .stage .vt__sub { display: none; }
  [data-c1="3"] .ch1 .stage .vt__ttl { font-size: 40px; }
  [data-c1="4"] .ch1 .stage .vt__lede { font: italic 400 16px / 1.45 "Lora", serif; }
  [data-c1="4"] .vt-inset { display: none; } /* bản đồ vùng thu nhỏ nằm ở mép trái, ngoài vùng lia */
}
/* ghi công dữ liệu bản đồ (giấy phép ODbL bắt buộc) */
.vt::after { content: "Dữ liệu bản đồ © OpenStreetMap"; position: absolute; right: calc(36 * var(--u)); top: calc(134 * var(--u)); font: 400 calc(11 * var(--u)) / 1 "Be Vietnam Pro", sans-serif; color: currentColor; opacity: .55; }
[data-c1="3"] .vt { color: #0E2331; } :is([data-c1="1"], [data-c1="2"], [data-c1="4"]) .vt { color: #F5ECDC; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .vt::after { --u: 1.6px; } }

/* Giới thiệu nằm ngay trên chương bản đồ (Ken 29/10): dải nối đáy .st tan về màu nền bản đồ thay vì kem bản đồ màu nước */
:root:not([data-c1="0"]) .st::after { background: linear-gradient(transparent, var(--c1-top, #03213A)); }
[data-c1="3"] { --c1-top: #F5EBDB; }