@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root {
  --void: #06070c; --panel: #0e1019; --panel2: #151826; --line: rgba(255,255,255,.09);
  --cy: #5cf2ff; --mg: #ff4fd8; --gold: #f5c15a; --tx: #eef1f8; --mu: #8d95ab;
  --ok: #4ade80; --bad: #ff6b81; color-scheme: dark;
  --display: 'Chakra Petch', 'Be Vietnam Pro', system-ui, sans-serif;
  --body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --foil: conic-gradient(from var(--a), #5cf2ff, #8f7bff, #ff4fd8, #f5c15a, #5cf2ff);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--void); color: var(--tx); font-family: var(--body); font-size: 15px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: .01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px clamp(16px, 3vw, 40px); background: rgba(6,7,12,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; text-decoration: none; background: none; border: 0; }
.logo svg { width: 26px; height: 26px; }
.logo b { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; animation: spin 9s linear infinite; }
@keyframes spin { to { --a: 360deg; } }
.links { display: flex; align-items: center; gap: 4px; }
.links button { background: none; border: 0; padding: 8px 13px; border-radius: 9px; color: var(--mu); font-weight: 500; transition: color .2s, background .2s; white-space: nowrap; }
.links button:hover, .links button.on { color: var(--tx); background: rgba(255,255,255,.06); }
.links .badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 5px; border-radius: 10px; background: var(--mg); color: #12010d; font-size: 12px; font-weight: 600; text-align: center; }
.links .admin { color: var(--gold); }
@media (max-width: 820px) { .bar { flex-wrap: wrap; } .links { width: 100%; overflow-x: auto; padding-bottom: 2px; } }

/* ---------- layout ---------- */
main { flex: 1; width: 100%; }
.view { display: none; }
.view.on { display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.page { padding-top: 34px; padding-bottom: 70px; }
.page > h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 6px; }
.lead { color: var(--mu); max-width: 60ch; margin-bottom: 26px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--panel2); padding: 10px 18px; border-radius: 10px; font-weight: 600; transition: transform .15s, border-color .2s, background .2s; }
.btn:hover { border-color: rgba(255,255,255,.28); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.primary { color: #04121a; border: 1.5px solid transparent; background: linear-gradient(135deg,#5cf2ff,#9bb5ff) padding-box, var(--foil) border-box; animation: spin 6s linear infinite; }
.btn.hot { background: linear-gradient(135deg, #ff4fd8, #d12bb0); border-color: transparent; color: #fff; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.block { width: 100%; padding: 14px; font-size: 16px; }

input, select, textarea { width: 100%; background: #090b13; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--cy); box-shadow: 0 0 0 3px rgba(92,242,255,.14); }
label.f { display: block; font-size: 13px; color: var(--mu); margin-bottom: 14px; }
label.f > span { display: block; margin-bottom: 5px; }
label.f .err { color: var(--bad); font-size: 12px; min-height: 0; }
input.bad { border-color: var(--bad); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(78vh, 720px); overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(900px 500px at 75% 40%, rgba(92,242,255,.10), transparent 70%), radial-gradient(700px 420px at 90% 80%, rgba(255,79,216,.10), transparent 70%); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(60px, 11vh, 120px) clamp(16px, 3vw, 32px) 80px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero h1 { font-size: clamp(36px, 6.2vw, 74px); max-width: 13ch; text-shadow: 0 0 40px rgba(6,7,12,.9); }
.hero p { color: #b6bdd0; max-width: 46ch; margin: 18px 0 28px; font-size: 17px; text-shadow: 0 0 20px rgba(6,7,12,.9); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 38px; color: var(--mu); font-size: 13px; }
.hero .facts span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cy); margin-right: 8px; box-shadow: 0 0 10px var(--cy); }
.hero .drag { position: absolute; z-index: 2; right: clamp(16px, 5vw, 70px); bottom: 22px; font-size: 12px; color: var(--mu); }
.stage.nowebgl::after { content: 'Trình duyệt này không bật WebGL nên không hiển thị được 3D.'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mu); font-size: 13px; text-align: center; padding: 20px; }

/* ---------- catalog ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 34px 0 22px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: transparent; border: 1px solid var(--line); color: var(--mu); padding: 8px 15px; border-radius: 99px; font-size: 13.5px; font-weight: 500; transition: all .2s; }
.chip:hover { color: var(--tx); border-color: rgba(255,255,255,.3); }
.chip.on { color: #04121a; background: var(--cy); border-color: var(--cy); }
.chip i { font-style: normal; opacity: .6; margin-left: 5px; }
.find { display: flex; gap: 10px; }
.find input { width: 230px; }
.find select { width: 170px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.card { --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out, border-color .25s, box-shadow .25s; }
.card:hover { border-color: rgba(92,242,255,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(92,242,255,.12); }
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 4/3; border: 0; background: radial-gradient(120% 90% at 50% 20%, #1a2036, #0a0c14); padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease-out; }
.card:hover .thumb img { transform: scale(1.06); }
.thumb .hint { position: absolute; right: 10px; bottom: 10px; background: rgba(6,7,12,.8); border: 1px solid rgba(92,242,255,.5); color: var(--cy); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mu); font-size: 12px; }
.card .meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tag { font-size: 12px; color: var(--cy); font-weight: 600; }
.card h3 { font-size: 16.5px; line-height: 1.25; min-height: 2.5em; }
.specs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li { font-size: 12px; color: var(--mu); background: rgba(255,255,255,.05); padding: 2px 9px; border-radius: 6px; }
.foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.price { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--gold); }
.stock { font-size: 12px; color: var(--mu); }
.stock.low { color: var(--mg); }
.empty { grid-column: 1/-1; text-align: center; color: var(--mu); padding: 60px 0; }

/* ---------- viewer modal ---------- */
.modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2,3,8,.88); backdrop-filter: blur(10px); }
.modal.on { display: flex; }
.vbox { position: relative; width: min(1060px, 100%); max-height: 94vh; overflow: auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; background: var(--panel); border: 1px solid rgba(92,242,255,.25); border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
@media (max-width: 860px) { .vbox { grid-template-columns: 1fr; } }
.x { position: absolute; top: 10px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(6,7,12,.8); font-size: 22px; line-height: 1; }
.stage { position: relative; background: radial-gradient(100% 80% at 50% 30%, #161c33, #070810); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.stage canvas { display: block; width: 100%; height: 100%; }
.vstage { height: min(460px, 52vh); min-height: 300px; }
.views { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.views button { background: rgba(6,7,12,.8); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 12px; color: var(--mu); }
.views button:hover { color: var(--cy); border-color: var(--cy); }
.vinfo { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.vinfo h2 { font-size: 24px; padding-right: 36px; }
.vinfo .price { font-size: 28px; }
.vinfo p { color: var(--mu); font-size: 14px; }
.spec-list { list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spec-list li { padding: 8px 13px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.spec-list li:last-child { border-bottom: 0; }
.spec-list li:nth-child(odd) { background: rgba(255,255,255,.025); }

/* ---------- cart ---------- */
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line img { width: 84px; height: 64px; object-fit: contain; background: #0a0c14; border-radius: 10px; }
.line h4 { font-size: 14.5px; font-weight: 600; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.qty button { background: var(--panel2); border: 0; width: 30px; height: 30px; font-size: 16px; }
.qty span { min-width: 32px; text-align: center; font-weight: 600; }
.link { background: none; border: 0; color: var(--mu); font-size: 12.5px; text-decoration: underline; padding: 4px 0; }
.link:hover { color: var(--bad); }
.sum { position: sticky; top: 84px; }
.sum dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 14px; margin: 14px 0; }
.sum dt { color: var(--mu); }
.sum dd { text-align: right; }
.sum .tot { border-top: 1px solid var(--line); padding-top: 12px; font-size: 16px; }
.sum .tot dd { font-family: var(--display); font-size: 24px; color: var(--gold); font-weight: 700; }
.vc { display: flex; gap: 8px; margin: 10px 0 4px; }
.note { font-size: 12.5px; color: var(--mu); }
.note.ok { color: var(--ok); }
.note.bad { color: var(--bad); }

/* ---------- checkout ---------- */
.steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.steps li { list-style: none; display: flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; color: var(--mu); font-size: 13.5px; }
.steps li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel2); font-size: 12px; }
.steps li.on { color: var(--tx); border-color: var(--cy); }
.steps li.on b { background: var(--cy); color: #04121a; }
.steps li.done b { background: var(--ok); color: #04120a; }
.ckstage { height: 360px; border: 1.5px solid transparent; background: radial-gradient(100% 80% at 50% 30%, #181e38, #070810) padding-box, var(--foil) border-box; animation: spin 8s linear infinite; }
.methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.m { position: relative; }
.m input { position: absolute; opacity: 0; inset: 0; }
.m span { display: block; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); transition: all .2s; }
.m span b { display: block; font-size: 14px; }
.m span small { color: var(--mu); font-size: 12px; }
.m input:checked + span { border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy) inset, 0 0 22px rgba(92,242,255,.15); }
.m input:focus-visible + span { outline: 2px solid var(--cy); outline-offset: 2px; }
.bank { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; padding: 14px; border: 1px dashed rgba(255,255,255,.2); border-radius: 12px; }
.bank dt { color: var(--mu); }
.bank dd { font-weight: 600; word-break: break-all; }
.count { font-family: var(--display); font-size: 22px; color: var(--cy); }
.wal { display: flex; gap: 10px; margin-bottom: 12px; }
.wal button { flex: 1; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); font-weight: 600; }
.wal button.on { border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy) inset; }
.actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.review { display: grid; gap: 14px; }
.review h4 { font-size: 13px; color: var(--mu); font-weight: 500; margin-bottom: 4px; }
.review p { font-size: 14.5px; }

.proc { position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; background: rgba(2,3,8,.9); backdrop-filter: blur(8px); text-align: center; }
.proc.on { display: grid; }
.ring { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; background: var(--foil); animation: spin 1.1s linear infinite; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }

/* ---------- success / track ---------- */
.okhead { text-align: center; margin-bottom: 18px; }
.okhead h2 { font-size: clamp(26px, 4vw, 40px); }
.code { display: inline-block; margin-top: 8px; padding: 5px 16px; border: 1px dashed var(--gold); border-radius: 99px; color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 18px; }
.tstage { height: 400px; }
.tl { list-style: none; position: relative; margin-top: 8px; }
.tl li { position: relative; padding: 0 0 22px 34px; color: var(--mu); }
.tl li::before { content: ''; position: absolute; left: 6px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl li i { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--line); }
.tl li.done { color: var(--tx); }
.tl li.done i { background: var(--cy); border-color: var(--cy); box-shadow: 0 0 12px var(--cy); }
.tl li.done::before { background: var(--cy); }
.tl li b { display: block; font-weight: 600; }
.tl li small { font-size: 12.5px; }

/* ---------- tables / admin ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { padding: 18px; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; }
.stat small { color: var(--mu); }
.stat div { font-family: var(--display); font-size: 26px; font-weight: 700; margin-top: 2px; }
.tblwrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--mu); font-weight: 500; font-size: 12.5px; background: rgba(0,0,0,.25); }
td select, td input { padding: 6px 9px; width: auto; }
td input[type=number] { width: 84px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(92,242,255,.12); color: var(--cy); }
.pill.s3 { background: rgba(74,222,128,.14); color: var(--ok); }
.bars { display: grid; gap: 10px; }
.bar-r { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.bar-r div { height: 12px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.bar-r div i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--mg)); border-radius: 6px; }

/* ---------- login ---------- */
.auth { max-width: 420px; margin: 0 auto; }
.auth .tabs { margin-bottom: 18px; }

/* ---------- toast / footer ---------- */
#toasts { position: fixed; z-index: 4000; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, 92vw); pointer-events: none; }
.toast { background: #12162a; border: 1px solid rgba(92,242,255,.45); border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tin .25s ease-out; }
.toast.bad { border-color: var(--bad); }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
footer { border-top: 1px solid var(--line); padding: 26px 16px; text-align: center; color: var(--mu); font-size: 13px; }
.btn { white-space: nowrap; }

/* ---------- mở đầu glitch ---------- */
.intro { display: none; position: fixed; inset: 0; z-index: 5000; place-items: center; overflow: hidden; background: linear-gradient(115deg, #ff3b1f, #ff2f92 48%, #5b3df5); background-size: 170% 170%; animation: drift 5s ease-in-out infinite alternate; transition: transform .85s cubic-bezier(.76, 0, .24, 1); }
html.intro-on .intro { display: grid; }
html.intro-on body { overflow: hidden; }
.intro.out { transform: translateY(-101%); }
@keyframes drift { to { background-position: 100% 100%; } }
.intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 60% at 28% 22%, rgba(255,232,170,.6), transparent 70%), radial-gradient(45% 50% at 82% 82%, rgba(120,90,255,.65), transparent 70%); mix-blend-mode: soft-light; }
.glitch { position: relative; text-align: center; font-family: var(--display); font-weight: 700; line-height: .95; color: #fff; font-size: clamp(54px, 13.5vw, 190px); letter-spacing: -.01em; padding: 0 16px; }
.glitch span { position: relative; display: block; }
.glitch span::before, .glitch span::after { content: attr(data-t); position: absolute; inset: 0; mix-blend-mode: screen; }
.glitch span::before { color: #5cf2ff; animation: gl1 1.1s steps(1) infinite; }
.glitch span::after { color: #ffe14a; animation: gl2 .9s steps(1) infinite; }
@keyframes gl1 { 0% { clip-path: inset(8% 0 72% 0); transform: translate(-8px, 0); } 14% { clip-path: inset(54% 0 14% 0); transform: translate(7px, 1px); } 28% { clip-path: inset(0 0 90% 0); transform: translate(-4px, 0); } 42% { clip-path: inset(78% 0 2% 0); transform: translate(9px, -1px); } 56% { clip-path: inset(30% 0 46% 0); transform: translate(-9px, 0); } 70% { clip-path: inset(0); transform: translate(0); } 84% { clip-path: inset(62% 0 20% 0); transform: translate(6px, 0); } 100% { clip-path: inset(18% 0 60% 0); transform: translate(-5px, 0); } }
@keyframes gl2 { 0% { clip-path: inset(40% 0 40% 0); transform: translate(6px, 0); } 20% { clip-path: inset(0 0 84% 0); transform: translate(-7px, 1px); } 38% { clip-path: inset(70% 0 6% 0); transform: translate(5px, 0); } 55% { clip-path: inset(0); transform: translate(0); } 72% { clip-path: inset(22% 0 58% 0); transform: translate(-10px, 0); } 100% { clip-path: inset(84% 0 0 0); transform: translate(8px, -1px); } }
.glitch { animation: tear 2.4s steps(1) infinite; }
@keyframes tear { 0%, 60%, 100% { transform: none; } 62% { transform: skewX(8deg) translateX(10px); } 64% { transform: skewX(-6deg) translateX(-8px); } 66% { transform: none; } 90% { transform: translateX(6px); } 92% { transform: none; } }
.intro-foot { position: absolute; left: 0; right: 0; bottom: clamp(24px, 6vh, 56px); display: grid; justify-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: 13px; }
.intro-load { width: min(320px, 62vw); height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.intro-load i { display: block; height: 100%; width: 0; background: #fff; transition: width .25s; }
.intro-skip { position: absolute; right: clamp(16px, 3vw, 36px); top: clamp(16px, 3vw, 30px); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); color: #fff; padding: 7px 15px; border-radius: 99px; font-size: 13px; font-weight: 500; }
.intro-skip:hover { background: rgba(255,255,255,.3); }

/* ---------- dải gradient + chữ lớn ---------- */
.band { padding: clamp(46px, 8vw, 110px) 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.bstrip { position: relative; }
.bstrip.s1::before { content: ''; position: absolute; left: 0; right: 0; top: 20%; bottom: 14%; background: linear-gradient(90deg, #ff5a1f, #ff2f92 30%, #8f5bff 65%, #3d6bff); background-size: 220% 100%; background-position: var(--bp, 0%) 0; }
.brow { position: relative; display: inline-block; white-space: nowrap; font-family: var(--display); font-weight: 700; line-height: 1.12; font-size: clamp(54px, 12vw, 180px); will-change: transform; color: #fff; letter-spacing: -.01em; }
.bstrip.s2 .brow { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); margin-top: .12em; }
.bstrip.s2 .brow i { font-style: normal; color: var(--cy); -webkit-text-stroke: 0; }

/* ---------- đám sản phẩm trôi ---------- */
.cloud-sec { padding-top: clamp(54px, 8vw, 100px); text-align: center; }
.cloud-sec h2 { font-size: clamp(30px, 5vw, 56px); }
.cloud-sec .lead { margin: 10px auto 0; }
.cloud { --mx: 0; --my: 0; --cw: clamp(100px, 17vw, 230px); position: relative; height: clamp(440px, 62vw, 690px); margin-top: 8px; }
.cl { position: absolute; left: var(--x); top: var(--y); transform: translate3d(calc(var(--mx) * var(--d) * -64px), calc(var(--my) * var(--d) * -44px), 0) rotate(var(--r, 0deg)); transition: transform .35s ease-out; }
.cl .in { display: block; animation: bob var(--s, 6s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes bob { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
button.cl.prod { width: var(--w); padding: 0; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(120% 90% at 50% 20%, #1c2340, #0a0c14); overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.55); }
button.cl.prod:hover, button.cl.prod:focus-visible { border-color: var(--cy); z-index: 6; }
.cl .im { display: block; aspect-ratio: 4/3; }
.cl .im img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl .cap { display: block; padding: 5px 10px 8px; font-size: 12px; color: var(--mu); line-height: 1.3; }
.cl.word { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 2.1vw, 28px); color: #5c647b; white-space: nowrap; }

/* ---------- cảnh phượng hoàng ---------- */
.phx { position: relative; height: 380vh; }
.phx-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--pbg, #ede9ff); color: var(--pfg, #1f1a52); }
.phx-pin::before { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 44% at 50% 42%, var(--pglow, rgba(255,255,255,.9)), transparent 72%); }
.phx-pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.phx-txt { position: absolute; left: 0; right: 0; bottom: clamp(50px, 10vh, 110px); height: 190px; padding: 0 clamp(16px, 4vw, 40px); text-align: center; pointer-events: none; }
.phx-txt .t { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.phx-txt h2 { font-size: clamp(26px, 4.4vw, 56px); font-weight: 600; max-width: 24ch; margin: 0 auto; text-wrap: balance; }
.phx-txt p { max-width: 44ch; margin: 12px auto 0; font-size: clamp(14px, 1.5vw, 18px); opacity: .8; }
.phx-txt .btn { margin-top: 18px; }
.cloud-sec { overflow-x: clip; }
@media (max-width: 700px) {
  .bar { padding: 8px 14px; gap: 4px; }
  .links button { padding: 6px 10px; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 40vh; padding-bottom: 50px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 15px; }
  .hero .drag { display: none; }
  .cloud { height: 560px; }
}

/* ---------- chuyển động bổ sung ---------- */
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes vin { from { opacity: 0; translate: 0 14px; } }
@keyframes pop { from { opacity: 0; scale: .94; translate: 0 18px; } }
@keyframes bump { 40% { scale: 1.5; } }
@keyframes aurora { to { background-position: 100% 100%; } }
.view.on { animation: vin .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.grid .card { animation: rise .65s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(280px 220px at var(--sx, 50%) var(--sy, 50%), rgba(92, 242, 255, .17), transparent 70%); }
.card:hover::after { opacity: 1; }
.hero::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 50% at 20% 30%, rgba(255, 79, 216, .16), transparent 70%), radial-gradient(35% 45% at 80% 70%, rgba(92, 242, 255, .14), transparent 70%); background-size: 140% 140%; animation: aurora 9s ease-in-out infinite alternate; pointer-events: none; }
html:is(:not(.intro-on), .intro-out) .hero-copy h1 .w { display: inline-block; animation: rise .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--w) * 95ms + 120ms); }
html:is(:not(.intro-on), .intro-out) .hero-copy p { animation: rise .85s cubic-bezier(.2, .7, .2, 1) .65s backwards; }
html:is(:not(.intro-on), .intro-out) .hero .cta { animation: rise .85s cubic-bezier(.2, .7, .2, 1) .8s backwards; }
html:is(:not(.intro-on), .intro-out) .hero .facts { animation: rise .85s cubic-bezier(.2, .7, .2, 1) .95s backwards; }
html.intro-on:not(.intro-out) :is(.hero-copy h1 .w, .hero-copy p, .hero .cta, .hero .facts) { opacity: 0; }
.modal.on .vbox { animation: pop .4s cubic-bezier(.2, .7, .2, 1) backwards; }
.badge.bump { animation: bump .5s ease-out; }
html.js .rv { transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }
html.js .rv:not(.in) { opacity: 0; translate: 0 30px; }
.fly { position: fixed; z-index: 3600; left: 0; top: 0; width: 76px; height: 57px; object-fit: contain; pointer-events: none; border-radius: 12px; background: #0a0c14; border: 1px solid var(--cy); box-shadow: 0 0 26px rgba(92, 242, 255, .6); }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.phx-hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 13px; opacity: .6; }
@media (max-width: 700px) {
  .tools { flex-direction: column; align-items: stretch; }
  .find { width: 100%; }
  .find input { flex: 1 1 auto; width: auto; min-width: 0; }
  .find select { flex: 0 0 auto; width: 46%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .glitch span::before, .glitch span::after { display: none; } .glitch, .intro { animation: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } html { scroll-behavior: auto; } }

/* ---------- ảnh sản phẩm: thư viện ảnh + phóng to ---------- */
.vleft { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vstage #m-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: radial-gradient(100% 80% at 50% 30%, #161c33, #070810); cursor: zoom-in; animation: imgin .35s ease-out; }
@keyframes imgin { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.vstage.imgmode canvas { visibility: hidden; }
.vstage.imgmode .views { display: none; }
.zoom-btn { display: none; position: absolute; right: 10px; bottom: 10px; background: rgba(6,7,12,.82); border: 1px solid rgba(92,242,255,.5); color: var(--cy); border-radius: 99px; padding: 5px 14px; font-size: 12px; font-weight: 600; }
.vstage.imgmode .zoom-btn { display: block; }
.vstage.noimg .zoom-btn { display: none; }
.noimg-msg { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 20px; color: var(--mu); font-size: 13px; }
.vstage.noimg .noimg-msg { display: grid; }
.gal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gt { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 4px 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--mu); font-size: 10.5px; line-height: 1.2; text-align: center; transition: border-color .2s, transform .2s, color .2s; }
.gt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt img, .gt .g3d { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 6px; object-fit: cover; background: #0a0c14; }
.gt .g3d { display: grid; place-items: center; color: var(--cy); background: radial-gradient(90% 90% at 50% 30%, #1c2a4a, #0a0c14); }
.gt .g3d svg { width: 26px; height: 26px; }
.gt:hover { border-color: rgba(92,242,255,.55); color: var(--tx); transform: translateY(-2px); }
.gt.on { border-color: var(--cy); color: var(--tx); box-shadow: 0 0 0 1px rgba(92,242,255,.35), 0 0 18px rgba(92,242,255,.18); }
@media (max-width: 560px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lb { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(2,3,8,.95); backdrop-filter: blur(6px); animation: imgin .25s ease-out; }
.lb[hidden] { display: none; }
.lb-view { position: relative; display: grid; place-items: center; width: min(1240px, 90vw); height: 84vh; overflow: hidden; border-radius: 14px; }
.lb-view img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: transform .28s ease-out; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.lb.z .lb-view img { transform: scale(2.4); cursor: zoom-out; transition: transform .28s ease-out; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(6,7,12,.8); font-size: 30px; line-height: 1; padding-bottom: 4px; color: var(--tx); }
.lb-nav:hover { border-color: var(--cy); color: var(--cy); }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: var(--mu); font-size: 13px; pointer-events: none; }
body.lb-open { overflow: hidden; }
@media (max-width: 700px) { .lb-view { width: 100vw; height: 70vh; border-radius: 0; } .lb-nav { top: auto; bottom: 44px; transform: none; } }