/* Trang quà flycam 360 (page-templates/qua-flycam-360.php). Chỉ tải trên trang dùng mẫu này. */

.q360-hero {
	background:
		radial-gradient(900px 420px at 90% -20%, rgba(212,168,67,.28), transparent 60%),
		linear-gradient(160deg, var(--c-primary-ink), var(--c-dark) 80%);
	color: #fff; padding: 22px 0 96px;
}
.q360-hero .crumbs, .q360-hero .crumbs a { color: rgba(255,255,255,.75); }
.q360-hero .eyebrow { color: var(--c-accent); margin-top: 14px; }
.q360-title { color: #fff; font-size: clamp(28px, 4.4vw, 46px); max-width: 860px; margin-bottom: .35em; }
.q360-sub { color: rgba(255,255,255,.88); font-size: clamp(16px, 2vw, 19px); max-width: 720px; margin: 0; }

/* Khung 360 nổi lên trên phần đầu trang */
.q360-stage { margin-top: -72px; }
.q360-frame {
	position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
	background: #2b2520 center / cover no-repeat; box-shadow: 0 18px 50px rgba(26,26,26,.28);
}
.q360-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q360-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q360-play {
	position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	border: 0; cursor: pointer; color: #fff; font: inherit; text-align: center; padding: 20px;
	background: linear-gradient(180deg, rgba(26,26,26,.05) 30%, rgba(26,26,26,.62));
}
.q360-ring {
	display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; margin-bottom: 8px;
	background: var(--c-accent); color: var(--c-on-accent); font-weight: 800; font-size: 22px;
	box-shadow: 0 0 0 10px rgba(212,168,67,.28); animation: q360-pulse 2.2s ease-out infinite;
}
.q360-play-t { font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.q360-play-s { font-size: 15px; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.q360-play:hover .q360-ring { transform: scale(1.05); }
.q360-play:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -6px; }
@keyframes q360-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,168,67,.55); } 100% { box-shadow: 0 0 0 22px rgba(212,168,67,0); } }
@media (prefers-reduced-motion: reduce) { .q360-ring { animation: none; } }
/* Huy hiệu QR Zalo: luôn nằm trên ảnh, khách chụp màn hình góc nào cũng dính số và mã Zalo */
.q360-qr {
	position: absolute; right: 12px; bottom: 12px; z-index: 3; width: clamp(96px, 17%, 150px);
	border-radius: 50%; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); transition: transform .15s;
}
.q360-qr img { width: 100%; height: auto; }
.q360-qr:hover { transform: scale(1.04); }
.q360-full {
	position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border-radius: 10px; border: 0;
	background: rgba(26,26,26,.65); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.q360-full[hidden] { display: none; }
.q360-frame:fullscreen { border-radius: 0; aspect-ratio: auto; }
.q360-frame:fullscreen .q360-qr { width: clamp(120px, 14vmin, 190px); right: 18px; bottom: 18px; }
.q360-frame.is-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; aspect-ratio: auto; }
.q360-lock, .q360-lock body { overflow: hidden; }
.q360-empty { display: grid; place-items: center; padding: 24px; color: #fff; text-align: center; }
.q360-credit { font-size: 13.5px; color: var(--c-muted); margin: 10px 2px 0; }

.q360-body { padding-top: 40px; padding-bottom: 24px; }

/* Thẻ "điểm nhìn" viết trong nội dung trang: <div class="q360-points"><a class="q360-pt" href="…"><h3>…</h3><p>…</p><span class="src">…</span></a>… */
.q360-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.4em 0 1.8em; }
.q360-pt {
	display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius);
	background: #fff; color: var(--c-ink); text-decoration: none; font-size: 16px; line-height: 1.55; transition: box-shadow .2s, border-color .2s;
}
.q360-pt:hover { color: var(--c-ink); border-color: var(--c-accent); box-shadow: var(--shadow); }
.entry .q360-pt h3 { margin: 0; font-size: 17.5px; display: flex; align-items: center; gap: 8px; }
.q360-pt h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px rgba(212,168,67,.25); }
.q360-pt p { margin: 0; color: var(--c-muted); }
.q360-pt .src { margin-top: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #f4ecdf; color: var(--c-primary-ink); }
.q360-pt .src.is-warn { background: #fbe9e7; color: #8c2a1c; }
.q360-pt .more { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--c-primary-ink); }

/* Khối quà */
.q360-gift-in { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 40px; align-items: start; }
.q360-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.q360-list li { display: flex; gap: 10px; align-items: flex-start; }
.q360-list .ic { color: var(--c-ok); margin-top: 4px; }
.q360-promise { font-weight: 600; color: var(--c-primary-ink); border-left: 3px solid var(--c-accent); padding-left: 12px; }
.q360-gift .lead-form { grid-template-columns: 1fr 1fr; }
.q360-disclaim { font-size: 13.5px; color: var(--c-muted); padding-top: 18px; padding-bottom: 18px; }

@media (max-width: 900px) {
	.q360-gift-in { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
	.q360-hero { padding-bottom: 84px; }
	.q360-stage { margin-top: -64px; }
	.q360-stage .wrap { padding: 0 12px; }
	.q360-frame { aspect-ratio: 4 / 5; border-radius: 14px; }
	.q360-points { grid-template-columns: 1fr; }
	.q360-gift .lead-form { grid-template-columns: 1fr; }
}