/*
 * Giao diện viewer 360 — gộp phần cần dùng từ ditichbadinh-ui (tokens.css + components.css):
 * biến màu/khoảng cách, nút kính mờ (.vb-btn), đoạn mũi tên kép + điểm đến (hotspot chuyển cảnh),
 * khung công cụ dựng điểm chạm. Đã bỏ logo Ba Đình: điểm đến là vòng tròn sáng trung tính.
 */
:root {
  --primary: #40b9eb;
  --base: #ffa801;
  --ink: #082740;
  --surface: #ffffff;
  --focus: #082740;
  --viewer-scrim: rgba(8, 39, 64, 0.72);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --tap-min: 44px;
  --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Nút */
.vb-btn { min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.vb-btn svg { width: 20px; height: 20px; flex: none; }
.vb-btn--glass { background: var(--viewer-scrim); color: var(--surface); }
.vb-btn--glass:focus-visible { outline: 2px solid var(--base); outline-offset: 2px; }
.vb-btn--icon { width: var(--tap-min); padding: 0; }

/* ===== Hotspot chuyển cảnh: 2 mũi tên kép nhấp nháy nối tiếp + 1 điểm đến.
   KHÔNG set position/transform trên phần tử GỐC (Pannellum tự set transform để định vị theo yaw/pitch);
   mọi hiệu ứng đặt ở pseudo-element con. ===== */
.tour-arrow-step { --sz: 38px; width: var(--sz); height: var(--sz); cursor: pointer; position: relative; }
.tour-arrow-step::after {
	content: ""; position: absolute; inset: 0;
	background-color: #FFCD00;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M8 8 L38 30 L8 52" fill="none" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/><path d="M46 8 L76 30 L46 52" fill="none" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M8 8 L38 30 L8 52" fill="none" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/><path d="M46 8 L76 30 L46 52" fill="none" stroke="black" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	transform: rotate(var(--rot, 0deg));
	filter: drop-shadow(0 0 2px rgba(0,0,0,.85));
	animation: tour-arrow-flow 1.3s ease-in-out infinite;
	opacity: 0;
}
.tour-arrow-step-d0::after { animation-delay: 0s; }
.tour-arrow-step-d1::after { animation-delay: .35s; }
@keyframes tour-arrow-flow { 0% { opacity: 0; } 25% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }

/* Điểm đến: vòng sáng + chấm vàng (thay cho logo) */
.tour-arrow-logo { --sz: 38px; width: var(--sz); height: var(--sz); cursor: pointer; position: relative; }
.tour-arrow-logo::before {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	background: rgba(255, 255, 255, .35); box-shadow: 0 0 8px rgba(0,0,0,.35);
	animation: tour-arrow-logo-blink 1.4s ease-in-out infinite;
}
.tour-arrow-logo::after {
	content: ""; position: absolute; inset: 22%; border-radius: 50%;
	background: #FFCD00; border: 3px solid #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.6);
}
@keyframes tour-arrow-logo-blink { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.1); opacity: .9; } }

.tour-hint-label {
	position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 8px;
	white-space: nowrap; pointer-events: none; background: rgba(42,31,22,.7); color: #FFCD00;
	font-family: sans-serif; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
	box-shadow: 0 0 4px rgba(0,0,0,.35);
}
.tour-arrow-step:hover, .tour-arrow-logo:hover { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23FFCD00" stroke="%232A1F16" stroke-width="1.2" d="M2 2 L2 20 L7 16 L10 22 L13 20.5 L10 14.5 L16 14.5 Z"/></svg>') 2 2, pointer; }

/* ===== Công cụ dựng điểm chạm (dung-diem.html) ===== */
.vb-calib { position: fixed; top: 10px; right: 10px; z-index: 30; background: rgba(0,0,0,.85); color: #fff;
	font-family: sans-serif; font-size: 13px; padding: 12px; border-radius: 8px; width: 280px; max-height: calc(100vh - 20px); overflow-y: auto; }
.vb-calib label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vb-calib-coords { font-size: 13px; color: #E8B84B; white-space: pre; font-family: monospace; margin-bottom: 8px; }
.vb-calib input[type="text"], .vb-calib select, .vb-calib textarea { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.vb-calib button { margin: 2px 0; cursor: pointer; }

/* ===== Sinh viên được đánh dấu trong ảnh (js/people.js) =====
   Không set position/transform trên phần tử GỐC (Pannellum tự định vị); hiệu ứng ở pseudo-element. */
.person-marker { width: 56px; height: 56px; cursor: pointer; position: relative; }
.person-marker::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 3px solid #fff; box-shadow: 0 0 10px rgba(255,205,0,.9), inset 0 0 8px rgba(255,205,0,.6);
	animation: person-pulse 1.6s ease-out infinite;
}
.person-marker::after {
	content: ""; position: absolute; inset: 40%; border-radius: 50%; background: #FFCD00; box-shadow: 0 0 6px rgba(0,0,0,.6);
}
@keyframes person-pulse { 0% { transform: scale(.65); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.person-label {
	position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; pointer-events: none;
	background: rgba(8,39,64,.85); color: #fff; font: 600 12px/1 sans-serif; padding: 4px 9px; border-radius: 999px; opacity: 0; transition: opacity .2s;
}
.person-marker:hover .person-label { opacity: 1; }

/* Thẻ giới thiệu: ảnh cắt zoom + giọng nói */
#t360-person { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 35; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 110px); }
#t360-person[hidden] { display: none; }
#t360-person.is-in { animation: person-in .55s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes person-in { from { opacity: 0; transform: translateY(-50%) scale(.6); filter: blur(8px); } to { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); } }
.person-card { background: rgba(8,39,64,.93); color: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); font-family: var(--font-sans); }
.person-card__photo { position: relative; border-radius: 12px; overflow: hidden; line-height: 0; background: #000; }
.person-card__photo img { width: 100%; max-height: 52vh; object-fit: cover; display: block; transition: box-shadow .3s; }
.is-speaking .person-card__photo { box-shadow: 0 0 0 3px #FFCD00, 0 0 28px rgba(255,205,0,.75); animation: person-speak 1.1s ease-in-out infinite; }
@keyframes person-speak { 0%,100% { box-shadow: 0 0 0 3px #FFCD00, 0 0 14px rgba(255,205,0,.5); } 50% { box-shadow: 0 0 0 5px #FFCD00, 0 0 34px rgba(255,205,0,.95); } }
.person-card h3 { margin: 12px 0 2px; font: 700 19px/1.2 var(--font-sans); }
.person-card__cls { opacity: .8; font-size: 13px; margin-bottom: 8px; }
.person-card__text { font-size: 16px; line-height: 1.55; max-height: 22vh; overflow-y: auto; }
.person-card__text span { opacity: .45; transition: opacity .25s, color .25s; }
.person-card__text span.is-spoken { opacity: 1; color: #FFE27A; }
.person-card__bar { display: flex; gap: 8px; margin-top: 10px; }
.person-card__bar button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; font: 600 14px var(--font-sans); cursor: pointer; background: rgba(255,255,255,.14); color: #fff; }
.person-card__bar button:hover { background: rgba(255,255,255,.26); }
@media (max-width: 767.98px) {
	#t360-person { right: 8px; left: 8px; top: auto; bottom: 70px; transform: none; width: auto; }
	@keyframes person-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
	.person-card__photo img { max-height: 30vh; }
}