/* =========================================================
   Luna Band — creative / poster
   Đen · vàng · kem giấy. Chữ display hẹp (Oswald), collage hình học.

   HIỆU NĂNG — quy tắc cho cả file:
   - Chỉ animate transform / opacity (và các thuộc tính riêng translate / scale / rotate).
     Entrance dùng `scale` + `opacity`; parallax JS ghi `translate` ⇒ hai thứ không đè nhau.
   - KHÔNG: filter, backdrop-filter, mix-blend-mode, animate background-position / box-shadow.
     Ảnh đen trắng / mờ được xử lý sẵn trên server (tools/fetch-media.php).
   - Vân giấy là ảnh nền tĩnh của từng khối, không phải lớp phủ toàn màn hình.
   ========================================================= */

:root {
	--bg:     #070818;
	--bg-2:   #0d1030;
	--ink:    #eef0ff;
	--paper:  #e6e3ff;
	--gold:   #a99cff;
	--gold-2: #6c5ce7;
	--tan:    #9fb6ff;
	--muted:  #9a9cc4;
	--dim:    #5f6290;
	--line:   rgba(200, 205, 255, .13);
	/* Dải holographic lấy từ chữ chrome của logo: tím lavender → hồng → xanh băng */
	--holo:   linear-gradient(115deg, #b9c6ff 0%, #d9c4ff 30%, #ffd2ef 55%, #c4ecff 80%, #b9c6ff 100%);
	--on-holo: #0b0c26;
	--display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--sans:   'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wrap:   1280px;
	--gut:    clamp(20px, 4.5vw, 64px);
	--hdr:    84px;
	--ease:   cubic-bezier(.16, 1, .3, 1);
	--grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 16px/1.7 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--gold); color: var(--bg); padding: 8px 14px; }
.ico { width: 18px; height: 18px; flex: none; }
.paper { background: var(--grain), var(--holo); }

/* ---------- Chữ ---------- */
.tick { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--tan); }
.tick::before { content: ""; width: 2px; height: 12px; background: var(--gold); }
/* Khoảng dòng ≥1.2 cho chữ hoa nhiều dòng: dấu chồng tiếng Việt của Oswald (Ả, Ồ, Ù) cao hơn chữ hoa
   ~.35em — dòng sát hơn thì dấu dòng dưới mọc lên đè vào chân chữ dòng trên (trông như mất dấu). */
.display { font: 600 clamp(48px, 7.5vw, 112px)/1.28 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.statement { font: 500 clamp(34px, 4.6vw, 70px)/1.25 var(--display); text-transform: uppercase; max-width: 15ch; }
.gold { color: var(--gold); }
.tan { color: var(--tan); }

/* Chữ tách từ (luna.js #3): mỗi từ trồi lên từ dưới mặt nạ */
/* Mặt nạ phải chừa chỗ cho dấu chồng tiếng Việt (Ấ, Ồ, Ẫ cao hơn chữ hoa ~.3em) và dấu nặng dưới chân. */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .32em .02em .16em; margin: -.32em -.02em -.16em; }
[data-split] .w > span { display: inline-block; }
.js [data-split] .w > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js [data-split].is-in .w > span { transform: none; }
/* Xong hiệu ứng thì bỏ mặt nạ: tiêu đề nhiều dòng, dấu chồng của dòng dưới (Ả, Ồ, Ù) cao hơn khoảng
   đệm và bị cắt nếu vẫn giữ overflow:hidden. */
[data-split].is-done .w { overflow: visible; }

/* ---------- Nút: lớp vàng trượt vào khi hover (transform) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 26px; border: 1px solid var(--gold); overflow: hidden; isolation: isolate; cursor: pointer; font: 500 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; transition: color .4s var(--ease); background: none; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn .ico { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn--gold { background: var(--holo); border-color: transparent; color: var(--on-holo); }
.btn--gold::before { background: var(--ink); }
.btn--line { color: var(--ink); }
.btn--line:hover { color: var(--on-holo); }
.btn--sm { padding: 12px 20px; }
.btn--lg { padding: 20px 30px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); transition: background-color .4s, transform .5s var(--ease); }
/* Nền đặc thay backdrop-filter (blur nền là hiệu ứng nặng nhất khi cuộn). */
.hdr.is-stuck { background: rgba(7,8,24, .94); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in { display: flex; align-items: center; gap: 36px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__img { height: 50px; width: auto; }
.logo-moon { width: 32px; height: 32px; }
.brand__word { font: 600 24px/1 var(--display); letter-spacing: .28em; text-transform: uppercase; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 30px; }
.nav__list a { position: relative; font: 500 12px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .3s; padding: 8px 0; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__list a:hover, .nav__list a.is-current { color: var(--ink); }
.nav__list a:hover::after, .nav__list a.is-current::after { transform: scaleX(1); transform-origin: left; }
.burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.burger i, .burger i::before, .burger i::after { display: block; width: 24px; height: 2px; margin: auto; background: var(--ink); transition: transform .35s var(--ease), background-color .2s; position: relative; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -7px; } .burger i::after { top: 7px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 20px) 0 60px; overflow: hidden; isolation: isolate; }
/* Ảnh nền đã làm tối sẵn (tools/luna-media.py 'dim') ⇒ không cần filter. Zoom chậm bằng `scale`
   (thuộc tính riêng, chỉ compositor), dừng khi khối ra khỏi màn hình (.is-paused). */
.hero__bg, .night__img { background: center / cover no-repeat; animation: kenburns 28s ease-in-out infinite alternate; will-change: transform; }
.hero__bg { position: absolute; inset: -4%; z-index: -2; opacity: .8; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.12; } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, rgba(7,8,24,.7) 40%, rgba(7,8,24,.2) 100%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero .beams { z-index: -1; }
.hero__in { position: relative; z-index: 1; }
.hero__in { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; }
.hero__title { margin: 6px 0 26px; font: 700 clamp(76px, 10.4vw, 168px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.hero__title .line { display: block; overflow: hidden; padding: .3em 0 .1em; margin: -.3em 0 -.1em; }
.hero__title .line > span { display: inline-block; }
/* Logo thật làm tiêu đề: WebP nền trong suốt, quầng sáng có sẵn trong ảnh (không dùng filter). */
.hero__logo img { display: block; width: min(560px, 100%); height: auto; margin-left: -3%; }
.hero__sub { font: 600 clamp(18px, 1.8vw, 26px)/1.3 var(--display); letter-spacing: .3em; color: var(--ink); }
.hero__lead { max-width: 30ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink); }
.hero__next { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; font: 500 12px/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--tan); }
.hero__next .ico { color: var(--gold); width: 16px; }
.hero__act { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; }
.socials { display: flex; gap: 22px; }
.socials a { color: var(--ink); transition: color .3s, transform .3s var(--ease); }
.socials a:hover { color: var(--gold); transform: translateY(-3px); }
.socials .ico { width: 22px; height: 22px; }
.hero__scroll { position: absolute; left: 50%; bottom: 24px; width: 1px; height: 50px; background: var(--line); overflow: hidden; }
.hero__scroll span { position: absolute; inset: 0; background: var(--gold); animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* Collage — toạ độ % trong khung tỉ lệ cố định */
.collage { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 760; justify-self: end; }
.collage > * { position: absolute; }
.sh { display: block; }
.sh--arch    { left: 22%; top: 6%; width: 52%; height: 88%; border-radius: 999px 999px 0 0; }
.sh--bar     { left: 66%; top: 0; width: 11%; height: 44%; }
.sh--moon    { left: 0; top: 4%; width: 30%; aspect-ratio: 1; }
.sh--moon .logo-moon { width: 100%; height: 100%; animation: float 7s ease-in-out infinite; }
.sh--dot     { left: 4%; top: 40%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--gold-2); }
.sh--line    { width: 1px; background: var(--gold); }
.sh--line-a  { left: 79%; top: 10%; height: 52%; }
.sh--line-b  { left: 17%; top: 46%; height: 34%; }
.fig         { left: 28%; top: 16%; width: 54%; height: 84%; overflow: hidden; border-radius: 999px 999px 0 0; background: #141842; }
.fig img     { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.fig__wipe   { position: absolute; inset: 0; background: var(--paper); transform-origin: top; }
.sh--half    { right: 0; top: 46%; width: 24%; aspect-ratio: 1 / 2; border-radius: 999px 0 0 999px; background: linear-gradient(160deg, #7f8cff, #c08bff 60%, #ff9fd8); }
.sh--disc    { left: 6%; top: 58%; width: 28%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; outline: 6px solid var(--bg); }
.sh--disc img { width: 100%; height: 100%; object-fit: cover; }
.sh--quarter { left: 64%; bottom: 0; width: 22%; aspect-ratio: 1; border-radius: 100% 0 0 0; }
.ring        { right: 2%; top: 8%; width: 24%; aspect-ratio: 1; animation: spin 26s linear infinite; }
.ring text   { font: 500 15px var(--display); letter-spacing: .3em; fill: var(--tan); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-5%) rotate(-6deg); } }

/* Entrance của hero: [data-in] = thứ tự xuất hiện. Chỉ chạy khi có JS. */
.js .hero [data-in] { opacity: 0; transition: opacity .9s var(--ease), scale 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--in, 1) * 110ms + 150ms); }
.js .hero .collage [data-in] { scale: .7; }
.js .hero .sh--line[data-in] { scale: 1 0; transform-origin: top; }
.js .hero__title [data-in] { opacity: 1; transform: translateY(108%); }
.js .hero__text > [data-in], .js .hero__act[data-in] { transform: translateY(24px); }
.js .fig[data-in] { scale: 1; opacity: 1; }
.js .fig__wipe { transition: transform 1.3s var(--ease) .5s; }
.is-loaded .hero [data-in] { opacity: 1; scale: 1; transform: none; }
.is-loaded .fig__wipe { transform: scaleY(0); }
[data-in="1"] { --in: 1; } [data-in="2"] { --in: 2; } [data-in="3"] { --in: 3; }
[data-in="4"] { --in: 4; } [data-in="5"] { --in: 5; } [data-in="6"] { --in: 6; }

/* Băng chữ */
.marquee { overflow: hidden; padding: 26px 0; background: var(--grain), var(--holo); color: var(--on-holo); }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__set { display: flex; align-items: center; }
.marquee span { font: 600 clamp(26px, 3vw, 42px)/1 var(--display); text-transform: uppercase; padding-inline: 28px; white-space: nowrap; }
.marquee i { font-style: normal; font-size: 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section chung ---------- */
.sec { position: relative; padding: clamp(90px, 13vw, 170px) 0; }
.head { margin-bottom: clamp(44px, 6vw, 80px); }
.head--row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }

/* Hiện dần khi cuộn tới — CHỈ cho khối chữ. Khối có ảnh dùng .wipe bên dưới: cho ảnh trượt
   = trình duyệt phải raster lại cả ảnh vào lớp GPU mới rồi raster lần nữa khi xong (đo A/B:
   tắt reveal giảm trễ khi cuộn từ ~650ms xuống ~80ms). */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal--scale { transform: scale(.92); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Ảnh đứng yên, một tấm màu đặc trượt ra để lộ ảnh — lớp màu đặc gần như không tốn raster. */
.wipe { position: relative; }
.js .wipe::after { content: ""; position: absolute; inset: -2px; z-index: 2; background: var(--wipe, var(--bg)); transform-origin: top; transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms); pointer-events: none; }
.js .wipe.is-in::after { transform: scaleY(0); }
.band .wipe { --wipe: var(--bg-2); }
/* Animation lặp (băng chữ, vòng chữ, trăng) dừng khi khối ra khỏi màn hình (luna.js). */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ---------- Nền ảnh mờ sau section ----------
   Ảnh bg-N đã đen trắng + mờ + phủ tối 85% từ server ⇒ ở đây chỉ là MỘT background tĩnh
   (không opacity layer, không filter, không background-attachment: fixed — cái đó bắt vẽ lại
   mỗi lần cuộn). Gradient trên/dưới hoà mép ảnh vào màu nền để các section nối liền. */
.sec, .ftr { --secbg: var(--bg); }
.band { --secbg: var(--bg-2); }
/* Hai lớp chọn để thắng `.band { background }` khai sau. */
.sec[style*="--ghost"], .ftr[style*="--ghost"] {
	background:
		linear-gradient(180deg, var(--secbg) 0%, transparent 22%, transparent 78%, var(--secbg) 100%),
		var(--ghost) center / cover no-repeat,
		var(--secbg);
}

/* ---------- Tia đèn sân khấu ----------
   Mỗi tia là một hình tam giác gradient vẽ sẵn (clip-path tĩnh), chỉ animate rotate.
   Không blur: mép mềm nhờ gradient trong suốt dần. Tạm dừng khi ra khỏi màn hình (.is-paused). */
.beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.beams i { position: absolute; top: -12%; width: 46vw; max-width: 720px; height: 130%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(200,208,255,.32), rgba(169,156,255,.08) 55%, transparent 85%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: .55; animation: sweep 9s ease-in-out infinite alternate; }
.beams i:nth-child(1) { left: -6%; rotate: -10deg; }
.beams i:nth-child(2) { left: 30%; animation-duration: 11s; animation-delay: -4s; opacity: .35; }
.beams i:nth-child(3) { right: -8%; rotate: 12deg; animation-duration: 13s; animation-delay: -7s; }
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* Equalizer nhỏ */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; margin-left: 6px; }
.eq i { width: 3px; height: 100%; background: var(--gold); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
.eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.2s; }
.eq i:nth-child(5) { animation-duration: 1.2s; animation-delay: -.8s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- Một đêm cùng Luna ---------- */
.night { position: relative; padding: clamp(110px, 14vw, 180px) 0; overflow: hidden; isolation: isolate; background: #000; }
.night__bg { position: absolute; inset: 0; z-index: -1; }
.night__img { position: absolute; inset: 0; opacity: .75; animation-direction: alternate-reverse; }
/* Phủ tối cố định phía trên ảnh để chữ luôn đọc rõ */
.night__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(7,8,24,.55) 25%, rgba(7,8,24,.6) 75%, var(--bg) 100%), radial-gradient(70% 60% at 50% 50%, transparent, rgba(7,8,24,.7)); }
.night .beams { z-index: 1; }
.night .tick { color: var(--paper); }
.acts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 30px; padding-top: 40px; }
.acts__line { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: rgba(220,224,255,.15); }
.acts__line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease) .3s; }
.night.is-on .acts__line i { transform: scaleX(1); }
.act { position: relative; }
.act__dot { position: absolute; top: -40px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.act__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; }
.act:nth-child(3) .act__dot::after { animation-delay: -.5s; } .act:nth-child(4) .act__dot::after { animation-delay: -1s; } .act:nth-child(5) .act__dot::after { animation-delay: -1.5s; }
@keyframes pulse { 0%, 100% { transform: scale(.6); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }
.act__t { display: block; font: 600 clamp(44px, 5vw, 72px)/1 var(--display); color: var(--gold); }
.act__h { margin: 14px 0 8px; font: 600 26px/1.25 var(--display); text-transform: uppercase; }
.act__d { margin: 0 0 12px; font-size: 15px; color: var(--paper); opacity: .8; }
.act__bpm { font: 500 11px var(--display); letter-spacing: .22em; color: var(--tan); }

/* ---------- Bức tường ảnh ---------- */
.wall { position: relative; padding: clamp(90px, 12vw, 150px) 0 clamp(70px, 9vw, 110px); overflow: hidden; }
.wall__head { margin-bottom: clamp(36px, 5vw, 60px); }
.wall__rows { display: grid; gap: 14px; }
.wall__row { --h: clamp(150px, 17vw, 250px); display: flex; gap: 14px; width: max-content; height: var(--h); }
.wall__i { flex: none; height: 100%; overflow: hidden; position: relative; background: var(--bg-2); }
.wall__i img { height: 100%; width: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); user-select: none; }
.wall__row:nth-child(2) .wall__i:nth-child(3n) img { aspect-ratio: 4 / 5; }
.wall__row:nth-child(odd) .wall__i:nth-child(4n+2) img { aspect-ratio: 1; }
/* Viền vàng hiện khi rê: pseudo màu đặc, rẻ */
.wall__i::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--gold); opacity: 0; transition: opacity .3s; }
.wall__i:hover::after { opacity: 1; }
.wall__i:hover img { transform: scale(1.06); }
.wall__tile { flex: none; height: 100%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; background: var(--grain), var(--holo); color: var(--on-holo); padding: 10px 26px; }
.wall__tile strong { font: 700 clamp(48px, 6vw, 92px)/.9 var(--display); text-transform: uppercase; }
.wall__tile span { margin-top: 8px; font: 500 11px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.wall__tile--paper { aspect-ratio: 1.4; }
.wall__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- 01 Ban nhạc ---------- */
.manifesto__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.manifesto__sub { max-width: 40ch; margin-top: 30px; color: var(--muted); font-size: 17px; }
.manifesto__art { position: relative; aspect-ratio: 1; }
.manifesto__img { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; }
.manifesto__img img { width: 100%; height: 100%; object-fit: cover; }
.sh--ring-gold { position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 50%; }
.manifesto__bar { position: absolute; right: 2%; top: 46%; width: 34%; height: 16%; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(70px, 9vw, 120px) 0 0; border-top: 1px solid var(--line); }
.stats__i { padding: 34px 20px 0 0; }
.stats__i + .stats__i { padding-left: 26px; border-left: 1px solid var(--line); }
.stats dt { font: 600 clamp(56px, 6.5vw, 96px)/1 var(--display); color: var(--gold); }
.stats dd { margin: 10px 0 0; font: 500 12px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- 02 Thành viên ---------- */
.band { background: var(--bg-2); }
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 36px; }
@media (min-width: 1001px) { .crew__i:nth-child(3n+2) { margin-top: 70px; } }
.crew__pic { position: relative; aspect-ratio: 3 / 4; }
.crew__back { position: absolute; inset: 0; translate: 12px 12px; background: var(--gold); transition: translate .6s var(--ease); }
.crew__pic img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: translate .6s var(--ease); }
.crew__i--arch .crew__back, .crew__i--arch img { border-radius: 999px 999px 0 0; }
.crew__i--round .crew__pic { aspect-ratio: 1; margin-top: 15%; }
.crew__i--round .crew__back, .crew__i--round img { border-radius: 50%; }
.crew__i--round .crew__back { background: var(--paper); }
.crew__i:hover .crew__back { translate: 20px 20px; }
.crew__i:hover img { translate: -6px -6px; }
.crew__n { display: block; margin-top: 30px; font: 500 13px/1 var(--display); letter-spacing: .2em; color: var(--gold); }
.crew__name { margin-top: 8px; font: 600 32px/1.15 var(--display); text-transform: uppercase; }
.crew__role { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- 03 Biểu diễn ---------- */
.occ { border-top: 1px solid var(--line); }
.occ li { border-bottom: 1px solid var(--line); }
.occ__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 36px) 0; }
.occ__t { font: 600 clamp(40px, 6.4vw, 96px)/1.15 var(--display); text-transform: uppercase; color: var(--ink); transition: color .4s, transform .6s var(--ease); }
.occ__go { display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .5s var(--ease); }
.occ__row:hover .occ__t, .occ__row:focus-visible .occ__t { color: var(--gold); transform: translateX(18px); }
.occ__row:hover .occ__go, .occ__row:focus-visible .occ__go { opacity: 1; transform: none; }
/* Ảnh trôi theo chuột: MỘT phần tử, chỉ đổi transform/opacity */
.occ__float { position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; opacity: 0; scale: .8; transition: opacity .35s, scale .5s var(--ease); border-radius: 999px 999px 0 0; }
.occ__float.is-on { opacity: 1; scale: 1; }
.occ__float img { width: 100%; height: 100%; object-fit: cover; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: clamp(80px, 10vw, 130px); }
.tier { display: flex; flex-direction: column; padding: 40px 34px; border: 1px solid var(--line); transition: border-color .4s, transform .6s var(--ease); }
.tier:hover { border-color: var(--gold); transform: translateY(-6px); }
.tier--hot { background: var(--grain), var(--holo); color: var(--on-holo); border-color: transparent; }
.tier__size { margin: 0; font: 500 12px var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.tier--hot .tier__size { color: var(--gold-2); }
.tier__name { margin: 14px 0 6px; font: 700 52px/1.15 var(--display); text-transform: uppercase; }
.tier { position: relative; }
.tier__perk { position: absolute; top: -13px; right: 24px; padding: 6px 12px; background: var(--gold); color: var(--on-holo); font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tier--hot .tier__perk { background: var(--on-holo); color: var(--gold); }
.tier__list { display: grid; gap: 10px; margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.tier--hot .tier__list { border-top-color: rgba(11,12,38,.18); }
.tier__list li { display: flex; gap: 10px; }
.tier__list .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--gold); }
.tier--hot .tier__list .ico { color: var(--gold-2); }
.tier__price { display: flex; align-items: baseline; gap: 10px; margin: auto 0 18px; font: 600 30px/1 var(--display); text-transform: uppercase; }
.tier__price small { font: 500 11px var(--display); letter-spacing: .2em; color: var(--muted); }
.tier--hot .tier__price small { color: #5b5a8a; }
.offer { display: flex; align-items: center; gap: 16px; max-width: 880px; margin: 40px auto 0; padding: 18px 22px; border: 1px dashed rgba(169,156,255,.5); font-size: 15px; color: var(--ink); }
.offer__tag { flex: none; padding: 7px 12px; background: var(--gold); color: var(--on-holo); font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tier__for { margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.tier--hot .tier__for { color: #5b5a8a; }
.tier--hot .btn--gold { background: var(--on-holo); border-color: var(--on-holo); color: var(--paper); }
.tier--hot .btn--gold::before { background: var(--gold); }
.tier--hot .btn--gold:hover { color: var(--on-holo); }
.tier .btn { align-self: flex-start; }

/* ---------- 04 Lịch diễn ---------- */
.gigs { border-top: 1px solid var(--line); }
.gig { display: grid; grid-template-columns: 200px 1fr auto auto; align-items: center; gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.gig:hover { background: linear-gradient(90deg, rgba(169,156,255,.08), transparent 70%); }
.gig__date { font: 600 56px/1 var(--display); color: var(--gold); }
.gig__date small { margin-left: 10px; font-size: 13px; letter-spacing: .2em; color: var(--muted); font-weight: 500; }
.gig__t { font: 500 26px/1.25 var(--display); text-transform: uppercase; }
.gig__w { font-size: 14px; color: var(--muted); }
.gig__time { font: 500 18px var(--display); letter-spacing: .1em; color: var(--tan); }
.gigs--empty { font: 500 24px var(--display); color: var(--muted); text-transform: uppercase; }

/* ---------- 05 Thư viện ---------- */
.strip__nav { display: flex; gap: 10px; }
.strip__nav button { width: 56px; height: 56px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 20px; transition: border-color .3s, color .3s; }
.strip__nav button:hover { border-color: var(--gold); color: var(--gold); }
.reel { position: relative; aspect-ratio: 16 / 7; overflow: hidden; margin-bottom: 30px; background: #000; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; border: 0; background: rgba(7,8,24,.35); cursor: pointer; transition: background-color .4s; }
.reel__play .ico { width: 96px; height: 96px; padding: 34px; border-radius: 50%; background: var(--gold); color: var(--on-holo); fill: var(--on-holo); transition: transform .5s var(--ease); }
.reel__play span { font: 500 13px var(--display); letter-spacing: .26em; text-transform: uppercase; }
.reel__play:hover .ico { transform: scale(1.1); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }
.strip { display: flex; gap: 20px; overflow-x: auto; padding: 0 var(--gut) 10px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip__i { flex: none; scroll-snap-align: start; height: clamp(260px, 42vw, 520px); overflow: hidden; }
.strip__i:nth-child(odd) { margin-top: 50px; }
.strip__i img { height: 100%; width: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); user-select: none; }
.strip__i:nth-child(3n) img { aspect-ratio: 4 / 5; }
.strip__i:hover img { transform: scale(1.05); }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(7,8,24,.97); color: var(--ink); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 86vh; width: auto; object-fit: contain; }
.lightbox__x, .lightbox__nav { position: absolute; border: 0; background: none; color: var(--gold); cursor: pointer; }
.lightbox__x { top: 20px; right: 20px; padding: 10px; }
.lightbox__x .ico { width: 28px; height: 28px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 36px; padding: 20px; }
.lightbox__nav--prev { left: 10px; } .lightbox__nav--next { right: 10px; }

/* ---------- Cảm nhận ---------- */
.quotes { background: var(--grain), var(--holo); color: var(--on-holo); }
.quotes__in { position: relative; display: grid; min-height: 320px; }
.quotes__mark { font: 700 180px/.6 var(--display); color: var(--gold); height: 80px; }
.quote { grid-area: 2 / 1; opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.quote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.quote blockquote { margin: 0; max-width: 24ch; font: 500 clamp(30px, 3.8vw, 56px)/1.4 var(--display); text-transform: uppercase; }
.quote figcaption { margin-top: 26px; font: 500 13px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.quote figcaption span { color: #5b5a8a; }
.quotes__dots { grid-area: 3 / 1; display: flex; gap: 10px; margin-top: 40px; }
.quotes__dots button { width: 34px; height: 4px; padding: 0; border: 0; background: rgba(11,12,38,.2); cursor: pointer; }
.quotes__dots button.is-on { background: var(--on-holo); }

/* ---------- 06 Đặt lịch ---------- */
.booking__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.booking__aside { position: sticky; top: calc(var(--hdr) + 20px); }
.booking__aside .display { font-size: clamp(44px, 5.4vw, 84px); }
.steps { display: grid; gap: 22px; margin: 44px 0; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.steps__n { font: 600 28px/1 var(--display); color: var(--gold); }
.steps strong { display: block; font: 500 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); transition: border-color .3s; }
.quick a:hover { border-color: var(--gold); }
.quick .ico { color: var(--gold); width: 22px; height: 22px; }
.quick span { display: grid; font: 500 17px var(--display); letter-spacing: .04em; }
.quick small { font: 400 10px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

.bform { padding: clamp(28px, 4vw, 54px); background: var(--bg-2); border-top: 3px solid var(--gold); }
.bform fieldset { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; }
.bform legend { padding: 0; margin-bottom: 22px; font: 600 26px/1 var(--display); text-transform: uppercase; color: var(--gold); }
.row { display: grid; gap: 22px; }
.row--2 { grid-template-columns: 1fr 1fr; }
.fld { margin-bottom: 20px; min-width: 0; }
.fld label, .lbl { display: block; margin-bottom: 6px; font: 500 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fld b { color: var(--gold); font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(220,224,255,.22); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.4 var(--sans); transition: border-color .3s; }
.fld select { appearance: none; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d6a743' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat; }
.fld select option { background: var(--bg-2); color: var(--ink); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--gold); }
.fld input[type="date"]::-webkit-calendar-picker-indicator, .fld input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(1) saturate(3) hue-rotate(5deg); cursor: pointer; }
.fld textarea { resize: vertical; min-height: 96px; }
.fld.is-flash input, .fld.is-flash select { border-bottom-color: var(--gold); }
.fld.is-flash label { color: var(--gold); }
.fld__note { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(169,156,255,.08); font-size: 13px; color: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fld .chip { position: relative; display: inline-block; margin: 0; cursor: pointer; font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); color: var(--muted); transition: border-color .25s, color .25s, background-color .25s; }
.chip:hover span { border-color: var(--tan); color: var(--ink); }
.chip input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--on-holo); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.bform__fine { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--dim); }
.notice { margin-bottom: 28px; padding: 14px 18px; font-size: 14px; }
.notice--ok { background: var(--gold); color: var(--on-holo); }
.notice--err { border: 1px solid rgba(220,90,70,.6); color: #f2b3a6; }

/* ---------- Bộ chọn riêng: select · ngày · giờ (luna-pickers.js) ---------- */
.xnative { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bform .fld { position: relative; }
.fld.is-open { z-index: 20; }
.xs__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(220,224,255,.22); background: none; color: var(--ink); font: 400 16px/1.4 var(--sans); text-align: left; cursor: pointer; transition: border-color .3s; }
.xs__btn:hover, .fld.is-open .xs__btn { border-bottom-color: var(--gold); }
.xs__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs__val.is-ph { color: var(--dim); }
.xs__ico { width: 18px; height: 18px; flex: none; color: var(--gold); }
.xs__chev { width: 12px; height: 8px; flex: none; color: var(--gold); transition: transform .35s var(--ease); }
.fld.is-open .xs__chev { transform: rotate(180deg); }
.fld.is-invalid .xs__btn { border-bottom-color: #e07a5f; }
.fld__err { margin: 8px 0 0; font-size: 13px; color: #f2a18f; }

.xpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 100%; margin: 0; background: var(--bg); border: 1px solid var(--gold); box-shadow: 0 30px 70px rgba(0,0,0,.65); opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.xpop.is-in { opacity: 1; transform: none; }
.xpop--right { left: auto; right: 0; }
.xpop:focus { outline: none; }

/* Listbox thẻ */
.xs__list { list-style: none; padding: 6px; max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.xs__opt { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 13px 14px 13px 16px; border-left: 2px solid transparent; cursor: pointer; transition: background-color .15s; }
.xs__opt strong { font: 500 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.xs__opt em { font: 500 14px/1.2 var(--display); font-style: normal; color: var(--gold); white-space: nowrap; }
.xs__opt span { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--muted); }
.xs__opt.is-active { background: rgba(169,156,255,.1); }
.xs__opt[aria-selected="true"] { border-left-color: var(--gold); }
.xs__opt[aria-selected="true"] strong { color: var(--gold); }

/* Lịch */
.cal { width: 340px; padding: 18px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__title { margin: 0; font: 500 18px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.cal__nav { width: 40px; height: 40px; border: 1px solid var(--line); background: none; color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s; }
.cal__nav:hover:not(:disabled) { border-color: var(--gold); }
.cal__nav:disabled { opacity: .25; cursor: default; }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th { padding: 6px 0 10px; font: 500 11px var(--display); letter-spacing: .12em; color: var(--dim); }
.cal__grid td { padding: 2px; }
.cal__d { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 0; background: none; color: var(--ink); font: 500 16px var(--display); cursor: pointer; transition: background-color .15s, color .15s; }
.cal__d:hover:not(:disabled) { background: rgba(169,156,255,.14); }
.cal__d.is-today { box-shadow: inset 0 0 0 1px var(--tan); }
.cal__d:disabled { color: var(--dim); opacity: .35; cursor: default; }
.cal__d.is-busy::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold); }
.cal__d[aria-selected="true"] { background: var(--gold); color: var(--on-holo); }
.cal__d[aria-selected="true"].is-busy::after { background: var(--on-holo); }
.cal__d:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal__legend { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.cal__legend i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.cal__clear { border: 0; background: none; color: var(--tan); font: 500 12px var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cal__clear:hover { color: var(--gold); }

/* Khung giờ */
.slots { width: 360px; max-height: 400px; overflow: auto; overscroll-behavior: contain; padding: 14px 16px 16px; }
.slots__g { margin: 10px 0 8px; font: 500 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
.slots__g:first-child { margin-top: 0; }
.slots__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slots__t { padding: 9px 0; border: 1px solid var(--line); background: none; color: var(--ink); font: 500 15px var(--display); letter-spacing: .04em; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.slots__t:hover { border-color: var(--tan); }
.slots__t[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-holo); }
.slots__t:focus-visible, .slots__none:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.slots__none { width: 100%; margin-top: 14px; padding: 11px; border: 1px dashed var(--line); background: none; color: var(--muted); font: 400 13px var(--sans); cursor: pointer; }
.slots__none:hover { border-color: var(--tan); color: var(--ink); }

/* Màn hẹp: bảng chọn trượt lên từ đáy (bottom sheet) + nền tối */
.xback { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: none; }
@media (max-width: 640px) {
	.acts { grid-template-columns: 1fr; row-gap: 50px; }
	.beams i:nth-child(2) { display: none; }
	.x-sheet .xback { display: block; }
	/* .fld.is-open tạo stacking context — phải nằm TRÊN nền tối (60) và nút gọi nổi (40), nếu không sheet bị phủ. */
	.fld.is-open { z-index: 80; }
	.xpop { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 70; width: auto; min-width: 0; max-height: 80vh; overflow: auto; border: 0; border-top: 2px solid var(--gold); transform: translateY(40px); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
	.xpop--right { left: 0; }
	.cal { width: auto; }
	.cal__d { font-size: 17px; }
	.slots { width: auto; }
}

/* ---------- Footer ---------- */
.ftr { padding-top: clamp(70px, 10vw, 120px); overflow: hidden; border-top: 1px solid var(--line); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; }
.ftr__call { font: 600 clamp(34px, 4vw, 58px)/1 var(--display); color: var(--gold); transition: color .3s; }
.ftr__call:hover { color: var(--ink); }
.ftr__list { display: grid; gap: 14px; }
.ftr__list li { display: flex; align-items: center; gap: 12px; }
.ftr__list .ico { color: var(--gold); }
.ftr__list a:hover { color: var(--gold); }
.ftr .socials { margin-bottom: 26px; }
/* Chữ viền khổng lồ — trôi ngang theo cuộn (luna.js), chỉ transform */
.ftr__giant { margin: 60px 0 -0.18em; font: 700 clamp(160px, 31vw, 480px)/.8 var(--display); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(169,156,255,.45); text-align: center; }
.ftr__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; padding-bottom: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); background: var(--bg); }
.ornament { color: var(--gold); }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 56px; height: 56px; display: none; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-holo); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* ---------- Trang phụ ---------- */
.page { padding: calc(var(--hdr) + 80px) var(--gut) 120px; }
.page .prose { max-width: 70ch; }
.h-display { font: 600 clamp(44px, 6vw, 90px)/1.2 var(--display); text-transform: uppercase; margin-bottom: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.nav__list { gap: 20px; }
	.crew { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
	.acts { grid-template-columns: 1fr 1fr; row-gap: 60px; }
	.acts__line { display: none; }
	.act__dot { top: -30px; }
	.offer { flex-direction: column; align-items: flex-start; }
	:root { --hdr: 70px; }
	.nav { position: fixed; inset: var(--hdr) 0 0; background: var(--bg); padding: 30px var(--gut); visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
	.nav.is-open { visibility: visible; opacity: 1; transition: opacity .3s; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 30px; letter-spacing: .04em; color: var(--ink); }
	.nav__list a::after { display: none; }
	.burger { display: block; }
	.hdr__cta { margin-left: auto; }
	.hero { min-height: 0; padding-bottom: 80px; }
	.hero__in { grid-template-columns: 1fr; }
	.collage { justify-self: center; max-width: 520px; margin-top: 10px; }
	.hero::after { background: linear-gradient(180deg, rgba(7,8,24,.4), var(--bg) 85%); }
	.manifesto__grid, .booking__grid { grid-template-columns: 1fr; }
	.manifesto__art { max-width: 420px; }
	.booking__aside { position: static; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.stats__i:nth-child(3) { border-left: 0; padding-left: 0; }
	.tiers { grid-template-columns: 1fr; max-width: 480px; }
	.gig { grid-template-columns: 130px 1fr; gap: 6px 20px; }
	.gig__date { grid-row: span 3; font-size: 44px; }
	.gig__date small { display: block; margin: 6px 0 0; }
	.ftr__grid { grid-template-columns: 1fr 1fr; }
	.ftr__brand { grid-column: 1 / -1; }
	.fab { display: grid; }
	.occ__float { display: none; }
}
@media (max-width: 640px) {
	.wall__rows, .wall__row { gap: 8px; }
	/* Màn hẹp: ô chữ ở giữa 3 hàng thẳng hàng nhau, chiếm hết chỗ ảnh — chỉ giữ ô đầu. */
	.wall__row:not(:first-child) .wall__tile { display: none; }
	.wall__foot .btn { width: 100%; }
	.crew { grid-template-columns: repeat(2, 1fr); gap: 40px 18px; }
	.crew__name { font-size: 24px; }
	.row--2 { grid-template-columns: 1fr; gap: 0; }
	.head--row { flex-direction: column; align-items: flex-start; }
	.strip__nav { display: none; }
	.reel { aspect-ratio: 4 / 3; }
	.quick { grid-template-columns: 1fr; }
	.ftr__grid { grid-template-columns: 1fr; }
	.hdr__cta { padding: 11px 16px; }
	.brand__word { font-size: 20px; }
	.hero__act { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	html { scroll-behavior: auto; }
	.js .reveal, .js .hero [data-in], .js [data-split] .w > span { opacity: 1 !important; transform: none !important; scale: 1 !important; }
	.js .wipe::after { display: none; }
	.fig__wipe { display: none; }
}


/* ---------- Bảng màu logo: chữ số holographic ---------- */
/* background-clip:text chỉ tô trong khung phần tử — dấu mũ/ngã cao hơn khung sẽ mất (đã gặp ở "LIÊN HỆ").
   Chừa đệm trên/dưới đủ cho dấu chồng tiếng Việt. */
.stats dt, .act__t, .gig__date, .steps__n, .tier__price {
	background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent;
	padding-top: .3em; padding-bottom: .12em; margin-top: -.3em;
}
.tier__price { line-height: 1.25; }
.tier--hot .tier__price { background: none; color: var(--on-holo); }
.crew__back { background: var(--holo); }
.crew__i--round .crew__back { background: var(--gold-2); }

/* Ảnh nhóm đủ đội hình */
.group { position: relative; margin: 0 0 clamp(50px, 7vw, 90px); overflow: hidden; }
.group img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; object-position: 50% 30%; }
.group::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7,8,24,.75), transparent 40%); pointer-events: none; }
.group__cap { position: absolute; left: 28px; bottom: 22px; z-index: 1; display: flex; align-items: center; gap: 6px; font: 500 12px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }

/* Ô chữ trên tường ảnh: rộng theo chữ (ACOUSTIC dài hơn LIVE) */
.wall__tile { aspect-ratio: auto; min-width: var(--h); }
.wall__tile strong { font-size: clamp(40px, 4.6vw, 72px); }

/* Dải poster: khung dọc 4:5 */
.strip--posters .strip__i { height: clamp(340px, 38vw, 520px); }
.strip--posters .strip__i:nth-child(odd) { margin-top: 0; }
.strip--posters .strip__i:nth-child(even) { margin-top: 40px; }
.strip--posters .strip__i img { aspect-ratio: 4 / 5; }

/* Nút Zalo/Hotline cạnh CTA ở hero (thay cho icon mạng xã hội khi chưa có link) */
.hero__call { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); transition: color .3s; }
.hero__call .ico { width: 26px; height: 26px; color: var(--gold); }
.hero__call span { display: grid; font: 600 20px/1.2 var(--display); letter-spacing: .06em; }
.hero__call small { font: 500 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hero__call:hover { color: var(--gold); }

/* ---------- Ngôi sao lấp lánh (kiểu sao 4 cánh của logo) ----------
   12 phần tử nhỏ, chỉ transform + opacity; tạm dừng cùng khối cha (.is-paused) khi ra khỏi màn hình. */
.sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero .sparkles { z-index: -1; }
.sparkles i {
	position: absolute; width: var(--s, 12px); aspect-ratio: 1;
	background: radial-gradient(circle, #fff 0 18%, #d9d2ff 40%, rgba(185,198,255,0) 70%);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	animation-name: twinkle, drift; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite, infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .15; scale: .55; } 50% { opacity: 1; scale: 1; } }
@keyframes drift { from { transform: translateY(20px); } to { transform: translateY(-60px); } }
.sparkles i:nth-child(1) { left: 44%; top: 27%; --s: 14px; animation-duration: 3.5s, 9.5s; animation-delay: -2.1s, -5.9s; }
.sparkles i:nth-child(2) { left: 10%; top: 72%; --s: 10px; animation-duration: 2.3s, 12.0s; animation-delay: -0.3s, -1.5s; }
.sparkles i:nth-child(3) { left: 57%; top: 15%; --s: 18px; animation-duration: 2.4s, 10.6s; animation-delay: -2.5s, -15.2s; }
.sparkles i:nth-child(4) { left: 76%; top: 82%; --s: 14px; animation-duration: 2.3s, 10.5s; animation-delay: -2.2s, -2.1s; }
.sparkles i:nth-child(5) { left: 56%; top: 26%; --s: 18px; animation-duration: 2.4s, 11.2s; animation-delay: -3.3s, -2.9s; }
.sparkles i:nth-child(6) { left: 77%; top: 81%; --s: 22px; animation-duration: 2.6s, 9.7s; animation-delay: -2.8s, -9.0s; }
.sparkles i:nth-child(7) { left: 82%; top: 34%; --s: 14px; animation-duration: 3.6s, 12.0s; animation-delay: -1.3s, -9.4s; }
.sparkles i:nth-child(8) { left: 61%; top: 54%; --s: 12px; animation-duration: 2.7s, 10.3s; animation-delay: -3.1s, -1.3s; }
.sparkles i:nth-child(9) { left: 41%; top: 75%; --s: 14px; animation-duration: 4.0s, 14.1s; animation-delay: -1.2s, -15.7s; }
.sparkles i:nth-child(10) { left: 18%; top: 73%; --s: 14px; animation-duration: 2.5s, 11.4s; animation-delay: -3.7s, -6.7s; }
.sparkles i:nth-child(11) { left: 88%; top: 17%; --s: 18px; animation-duration: 3.3s, 15.1s; animation-delay: -1.3s, -11.1s; }
.sparkles i:nth-child(12) { left: 79%; top: 71%; --s: 18px; animation-duration: 3.8s, 9.5s; animation-delay: -0.4s, -4.3s; }
@media (max-width: 640px) { .sparkles i:nth-child(n+8) { display: none; } }

.head__sub { max-width: 52ch; margin: 22px 0 0; font-size: 17px; color: var(--muted); }