/* ===== Trang học sinh – giao diện trẻ trung, nhiều màu ===== */
body.hs { --g1: #1d4ed8; --g2: #0ea5e9; --g3: #14b8a6; --gold: #fbbf24; --cta1: #f59e0b; --cta2: #ef4444; --ink-on: #ffffff;
  background: var(--g1); min-height: 100vh; overflow-x: hidden; }
body.hs::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); }
body.hs[data-theme="cam-xanh-la"] { --g1: #f27121; --g2: #f59e0b; --g3: #10b981; --cta1: #10b981; --cta2: #059669; }
body.hs[data-theme="tim-hong"] { --g1: #5b21b6; --g2: #7c3aed; --g3: #db2777; --cta1: #f59e0b; --cta2: #f97316; }
body.hs[data-theme="xanh-la"] { --g1: #065f46; --g2: #047857; --g3: #65a30d; --cta1: #f59e0b; --cta2: #ef4444; }

/* Dải thông báo */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(90deg, var(--gold), #fde68a, var(--gold)); color: #1e3a8a; font-weight: 700; font-size: .84rem; padding: 6px 0; overflow: hidden; white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.announce .track { display: inline-block; padding-left: 100%; animation: marquee 28s linear infinite; }
.announce:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Thanh trên */
.topbar { position: relative; z-index: 50; margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; color: #fff; }
.topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-width: 0; }
.topbar .brand .logo { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.topbar .brand b { display: block; font-size: .98rem; line-height: 1.15; }
.topbar .brand small { display: block; font-size: .7rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.topbar .me { display: flex; gap: 8px; align-items: center; }
.glass-btn { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none; white-space: nowrap; backdrop-filter: blur(8px); }
.glass-btn:hover { background: rgba(255,255,255,.28); }

/* Hero */
.hero { position: relative; margin: 0 14px; border-radius: 26px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.25); isolation: isolate; }
.hero .slides { position: absolute; inset: 0; z-index: -2; }
.hero .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.4s ease, transform 10s ease-out; }
.hero .slides img.on { opacity: 1; transform: scale(1.08); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(2,6,23,.25) 40%, rgba(2,6,23,.72) 100%); }
.hero.noimg { background: radial-gradient(1200px 500px at 85% 10%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); }
.hero.noimg::before { background: none; }
.hero .art { position: absolute; right: -40px; top: 10px; width: min(520px, 62%); opacity: .95; z-index: -1; animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(2deg); } }
.hero .inner { padding: 34px 30px 30px; max-width: 760px; }
.hero .pill { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; backdrop-filter: blur(8px); }
.hero h1 { font-size: clamp(1.7rem, 4.2vw, 2.8rem); font-weight: 900; line-height: 1.12; margin: 14px 0 10px; text-shadow: 0 3px 18px rgba(0,0,0,.35); letter-spacing: -.01em; }
.hero h1 .gold { color: var(--gold); text-shadow: 0 0 22px rgba(251,191,36,.45); }
.hero p.sub { font-size: 1.05rem; opacity: .95; max-width: 560px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero .dots { position: absolute; bottom: 14px; right: 18px; display: flex; gap: 7px; }
.hero .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.8); cursor: pointer; }
.hero .dots i.on { background: var(--gold); border-color: var(--gold); transform: scale(1.25); box-shadow: 0 0 10px var(--gold); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1.02rem; color: #fff; text-decoration: none; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: linear-gradient(135deg, var(--cta1), var(--cta2)); box-shadow: 0 10px 26px rgba(0,0,0,.25); transition: transform .25s, box-shadow .25s, filter .25s; }
.cta::after { content: ""; position: absolute; top: -50%; left: -60%; width: 60%; height: 200%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shimmer 3.2s infinite; }
@keyframes shimmer { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.32); filter: brightness(1.06); }
.cta.ghost { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.cta.ghost::after { display: none; }
.cta .arr { transition: transform .25s; } .cta:hover .arr { transform: translateX(4px); }

.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 14px 0; }
.stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 18px; padding: 14px 16px; color: #fff; backdrop-filter: blur(10px); }
.stat b { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.stat span { font-size: .8rem; opacity: .92; }

/* Khối nội dung */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 14px; }
.sec { margin: 34px auto 0; }
.sec-title { color: #fff; text-align: center; margin-bottom: 18px; }
.sec-title h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 900; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.sec-title p { opacity: .9; margin: 6px auto 0; max-width: 640px; }
.panel { background: #fff; color: var(--ink); border-radius: 22px; padding: 22px; box-shadow: 0 18px 40px rgba(2,6,23,.18); }

/* Ô chức năng 3D */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; border: 2px solid rgba(255,255,255,.5); border-radius: 20px; padding: 18px 14px; color: #fff; text-align: center; cursor: pointer; font: inherit; background: linear-gradient(135deg, #ffdf40 0%, #ff8c00 100%); box-shadow: 0 12px 26px rgba(0,0,0,.2); transition: transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s, filter .35s; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tile:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 24px 44px rgba(0,0,0,.3); filter: brightness(1.06); }
.tile .ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 8px 18px rgba(0,0,0,.15); transition: transform .35s; }
.tile:hover .ic { transform: scale(1.1) translateY(-4px); }
.tile b { font-size: .98rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tile small { font-size: .78rem; opacity: .95; line-height: 1.3; }
.tile.t1 { background: linear-gradient(135deg, #ef4444, #f59e0b 55%, #ec4899); animation: pulseGlow 2.4s ease-in-out infinite; }
.tile.t2 { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.tile.t3 { background: linear-gradient(135deg, #059669, #84cc16); }
.tile.t4 { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.tile.t5 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.tile.t6 { background: linear-gradient(135deg, #f97316, #facc15); }
.tile.t7 { background: linear-gradient(135deg, #0f766e, #22c55e); }
.tile.t8 { background: linear-gradient(135deg, #334155, #64748b); }
.tile .ribbon { position: absolute; top: -10px; right: -8px; background: var(--gold); color: #7c2d12; font-size: .68rem; font-weight: 900; padding: 4px 10px; border-radius: 12px; transform: rotate(8deg); box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: bounce 1.3s ease-in-out infinite; }
@keyframes bounce { 50% { transform: rotate(8deg) scale(1.15); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 10px 24px rgba(239,68,68,.45), 0 0 0 0 rgba(251,191,36,.6); } 50% { box-shadow: 0 16px 34px rgba(239,68,68,.6), 0 0 0 12px rgba(251,191,36,0); } }

/* Các bước */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step3 { background: rgba(255,255,255,.95); border-radius: 20px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.step3 .n { width: 42px; height: 42px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 900; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, var(--g1), var(--g3)); }
.step3 b { display: block; } .step3 span { font-size: .88rem; color: var(--ink-2); }

/* 6 nhóm Holland */
.hexwrap { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: center; }
.typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcard { border-radius: 16px; padding: 14px; color: #fff; cursor: pointer; border: 0; text-align: left; font: inherit; transition: transform .25s, box-shadow .25s; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.2); }
.tcard .k { font-size: 1.6rem; font-weight: 900; line-height: 1; opacity: .95; }
.tcard b { display: block; margin-top: 4px; } .tcard small { display: block; opacity: .92; font-size: .8rem; margin-top: 4px; line-height: 1.35; }
.hexsvg { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.hexsvg .node { cursor: pointer; transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.hexsvg .node:hover { transform: scale(1.12); }

/* Trường */
.schools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.school { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 14px; border: 2px solid transparent; cursor: pointer; text-align: left; font: inherit; color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.08); transition: transform .2s, border-color .2s, box-shadow .2s; width: 100%; }
.school:hover { transform: translateY(-3px); border-color: var(--g2); box-shadow: 0 12px 24px rgba(0,0,0,.14); }
.school.on { border-color: var(--g1); background: #eff6ff; }
.school .av { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .95rem; background: linear-gradient(135deg, var(--g1), var(--g3)); }
.school .av.thcs { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.school b { display: block; line-height: 1.25; font-size: .95rem; } .school small { color: var(--ink-3); }

/* Tra cứu nghề */
.explore-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.explore-bar input { flex: 1; min-width: 200px; border-radius: 999px; padding-left: 16px; }
.tchips { display: flex; gap: 6px; flex-wrap: wrap; }
.tchip { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: .82rem; color: #fff; cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s; }
.tchip.on { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ccard { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; transition: transform .2s, box-shadow .2s; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.ccard .h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ccard .code { display: inline-flex; gap: 2px; }
.ccard .code i { font-style: normal; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.ccard p { font-size: .88rem; margin: 6px 0; color: var(--ink-2); }
.ccard .meta { font-size: .78rem; color: var(--ink-3); }

/* Trang bên trong (khảo sát, kết quả…) */
.page { max-width: 880px; margin: 8px auto 40px; padding: 0 14px; }
.page .panel + .panel { margin-top: 14px; }
.wizard-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.wizard-steps i { flex: 1; height: 6px; border-radius: 999px; background: #e2e8f0; }
.wizard-steps i.on { background: linear-gradient(90deg, var(--g1), var(--g3)); }
.codecard { border: 2px dashed var(--g2); border-radius: 18px; padding: 16px; background: #f0f9ff; text-align: center; }
.codecard .c { font-size: 1.5rem; font-weight: 900; letter-spacing: .08em; color: var(--navy); font-family: ui-monospace, Menlo, Consolas, monospace; }
.gradchips .chip.on { background: linear-gradient(135deg, var(--g1), var(--g2)); border-color: transparent; }

/* Footer */
.foot { color: #fff; text-align: center; padding: 28px 14px 110px; font-size: .82rem; opacity: .9; }
.foot a { color: #fff; }

/* Hạt bay */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particles i { position: absolute; bottom: -10px; border-radius: 50%; background: rgba(255,255,255,.45); animation: rise linear infinite; }
@keyframes rise { 0% { transform: translateY(0) scale(.4); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-110vh) scale(1); opacity: 0; } }
main, .topbar, .hero, .statrow, .foot { position: relative; z-index: 1; }

/* ===== Trợ lý chat nổi ===== */
.bot-root { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.bot-root > * { pointer-events: auto; }
.bot-toggle { width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--gold); background: #fff; cursor: pointer; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: grid; place-items: center; animation: attention 3s ease-in-out infinite; padding: 0; }
.bot-toggle::before, .bot-toggle::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid rgba(251,191,36,.6); animation: ring 2s ease-out infinite; }
.bot-toggle::after { inset: -15px; border-width: 2px; animation-delay: .45s; }
.bot-root.open .bot-toggle::before, .bot-root.open .bot-toggle::after { display: none; }
.bot-root.open .bot-toggle { animation: none; }
@keyframes ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes attention { 0%, 100% { transform: translateY(0); } 8% { transform: translateY(-8px); } 16% { transform: translateY(0); } }
.bot-toggle svg { width: 52px; height: 52px; }
.bot-toggle .x { display: none; font-size: 1.5rem; color: var(--navy); font-weight: 700; }
.bot-root.open .bot-toggle svg { display: none; } .bot-root.open .bot-toggle .x { display: block; }
.bot-hint { background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 14px 14px 4px 14px; font-size: .86rem; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.2); max-width: 230px; animation: hintIn .5s ease both; }
@keyframes hintIn { from { opacity: 0; transform: translateY(8px); } }
.bot-root.open .bot-hint { display: none; }
.bot-win { width: min(400px, calc(100vw - 24px)); height: min(640px, calc(100vh - 120px)); height: min(640px, calc(100dvh - 120px)); background: #f8fafc; border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; }
.bot-root.open .bot-win { display: flex; animation: pop .25s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } }
.bot-head { background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); color: #fff; padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.bot-head .av { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.bot-head .av svg { width: 36px; height: 36px; }
.bot-head b { display: block; } .bot-head small { opacity: .9; display: flex; align-items: center; gap: 5px; font-size: .78rem; }
.bot-head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.bot-head .acts { margin-left: auto; display: flex; gap: 4px; }
.bot-head .acts button { background: rgba(255,255,255,.18); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 1rem; }
.bot-msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.bmsg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.bmsg .av { width: 28px; height: 28px; border-radius: 50%; background: #fff; flex: none; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.bmsg .av svg { width: 24px; height: 24px; }
.bmsg .bb { padding: 10px 13px; border-radius: 16px; font-size: .92rem; line-height: 1.5; word-wrap: break-word; }
.bmsg.bot .bb { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.bmsg.me { align-self: flex-end; }
.bmsg.me .bb { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; border-bottom-right-radius: 4px; }
.bmsg .bb p { margin: 0 0 .45em; } .bmsg .bb p:last-child { margin: 0; } .bmsg .bb ul { margin: .2em 0 .5em; padding-left: 1.2em; }
.bmsg .tools { display: flex; gap: 4px; margin-top: 4px; }
.bmsg .tools button { border: 0; background: transparent; cursor: pointer; font-size: .8rem; color: var(--ink-3); padding: 2px 4px; border-radius: 6px; }
.bmsg .tools button:hover { background: #e2e8f0; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 2px 36px; }
.sugg button { border: 1px solid var(--g2); color: var(--g1); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; text-align: left; }
.sugg button:hover { background: var(--g1); color: #fff; border-color: var(--g1); }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: blink 1.2s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.bot-foot { border-top: 1px solid var(--line); background: #fff; padding: 8px 10px 10px; }
.bot-input { display: flex; gap: 6px; align-items: flex-end; }
.bot-input textarea { flex: 1; min-height: 42px; max-height: 120px; resize: none; border-radius: 14px; padding: 10px 12px; font-size: .92rem; }
.ibtn { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none; font-size: 1.05rem; }
.ibtn.send { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; }
.ibtn.mic { background: #eef2ff; color: var(--g1); }
.ibtn.mic.rec { background: #ef4444; color: #fff; animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 8px rgba(239,68,68,.2); } }
.qr { overflow: hidden; margin-top: 8px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.qr .t { display: flex; gap: 6px; width: max-content; animation: qrscroll 26s linear infinite; }
.qr:hover .t { animation-play-state: paused; }
@keyframes qrscroll { to { transform: translateX(-50%); } }
.qr button { border: 0; background: linear-gradient(135deg, #e0f2fe, #ede9fe); color: #1e3a8a; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bot-note { font-size: .7rem; color: var(--ink-3); margin-top: 6px; text-align: center; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps3 { grid-template-columns: 1fr; }
  .hexwrap { grid-template-columns: 1fr; }
  .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero { min-height: 0; margin: 0 10px; border-radius: 22px; }
  .hero.noimg .art { display: none; }
  .hero:not(.noimg) { min-height: 480px; }
  .hero .inner { padding: 22px 18px 24px; }
  .cta { width: 100%; padding: 13px 20px; }
  .statrow { margin: 14px 10px 0; gap: 8px; }
  .stat { padding: 11px 12px; } .stat b { font-size: 1.35rem; }
  .tile { padding: 14px 10px; } .tile .ic { width: 48px; height: 48px; font-size: 1.45rem; } .tile small { display: none; }
  .bot-root { right: 12px; bottom: 12px; }
  .bot-root.open .bot-win { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .bot-root.open .bot-toggle { display: none; }
  .topbar .glass-btn.hide-sm { display: none; }
  .panel { padding: 16px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Chế độ banner ảnh (khi có ảnh trình chiếu) ===== */
.hero.banner { display: block; min-height: 0; aspect-ratio: 1920 / 720; background: #0a2f7a; }
.hero.banner::before { display: none; }
.hero.banner .slides { position: absolute; inset: 0; }
.hero.banner .slides img { object-fit: cover; transform: none !important; transition: opacity 1.2s ease; }
.hero.banner .banner-cta { position: absolute; left: 4.6%; bottom: 9%; margin: 0; z-index: 2; }
.hero.banner .cta.ghost { background: rgba(255,255,255,.18); }
@media (max-width: 760px) {
  .hero.banner { aspect-ratio: auto; background: transparent; box-shadow: none; overflow: visible; }
  .hero.banner .slides { position: relative; aspect-ratio: 1920 / 720; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
  .hero.banner .dots { bottom: auto; top: calc((100vw - 20px) * 720 / 1920 - 22px); }
  .hero.banner .banner-cta { position: static; margin-top: 14px; }
}

/* Mã QR kết nối Zalo */
.zqr{display:flex;gap:14px;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:10px 12px;margin:6px 0 10px;color:#0f172a}
.zqr-img{width:132px;flex:0 0 132px;border-radius:8px;overflow:hidden;border:1px solid #dbeafe}
@media (max-width:560px){.zqr{flex-direction:column;text-align:center}}

/* ===== Zalo đồng hành: khối nổi bật trang chủ ===== */
.zpromo{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:center;margin:26px 0 8px;padding:30px 32px;border-radius:28px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#2f8bff 0%,#0068ff 45%,#0050c8 100%);box-shadow:0 24px 60px -18px rgba(0,80,200,.55)}
.zpromo::before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08)}
.zpromo::after{content:"";position:absolute;left:-60px;bottom:-140px;width:280px;height:280px;border-radius:50%;background:rgba(0,200,255,.18)}
.zp-text{position:relative;z-index:1}
.zp-pill{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.02em}
.zpromo h2{margin:12px 0 6px;font-size:clamp(1.45rem,3.2vw,2.1rem);line-height:1.2;color:#fff}
.zpromo h2 span{background:#fff;color:#0068ff;padding:0 .3em;border-radius:.3em}
.zpromo p{margin:6px 0;opacity:.95}
.zp-list{list-style:none;padding:0;margin:12px 0 4px;display:grid;gap:8px}
.zp-list li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.4}
.zp-list li span{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.16)}
.zp-event{margin-top:12px;background:#ffd84d;color:#3b2a00;font-weight:600;padding:8px 12px;border-radius:12px;display:inline-block}
.zp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.zp-btn{border:0;cursor:pointer;background:#fff;color:#0058e0;font-weight:800;font-size:1.02rem;padding:13px 22px;border-radius:14px;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);transition:transform .15s}
.zp-btn:hover{transform:translateY(-2px)}
.zp-link{color:#fff;text-decoration:underline;font-weight:600}
.zp-note{font-size:.8rem;opacity:.8!important;margin-top:10px!important}
.zp-phone{position:relative;z-index:1;justify-self:center;display:flex;gap:16px;align-items:flex-end}
.zp-screen{width:250px;border-radius:30px;background:#eef3fb;border:8px solid #10213d;box-shadow:0 26px 50px -14px rgba(0,0,0,.5);overflow:hidden;color:#0f172a;transform:rotate(2deg)}
.zp-head{display:flex;align-items:center;gap:8px;background:#0068ff;color:#fff;padding:10px 12px;flex-wrap:wrap}
.zp-head i{width:28px;height:28px;border-radius:50%;background:#fff;color:#0068ff;font-style:normal;font-weight:900;display:grid;place-items:center}
.zp-head b{font-size:.9rem}.zp-head small{flex-basis:100%;margin-left:36px;margin-top:-6px;font-size:.68rem;opacity:.85}
.zp-chat{padding:10px;display:flex;flex-direction:column;gap:7px;font-size:.74rem;line-height:1.38;min-height:280px}
.zp-chat .b{max-width:86%;padding:7px 9px;border-radius:12px;animation:zpIn .5s both}
.zp-chat .oa{background:#fff;align-self:flex-start;border-top-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.zp-chat .me{background:#d6e7ff;align-self:flex-end;border-top-right-radius:4px}
.zp-chat .b:nth-child(2){animation-delay:.6s}.zp-chat .b:nth-child(3){animation-delay:1.2s}.zp-chat .b:nth-child(4){animation-delay:1.8s}.zp-chat .b:nth-child(5){animation-delay:2.4s}
.zp-chat .typing{display:flex;gap:4px;padding:10px 12px}.zp-chat .typing i{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:zpDot 1.2s infinite}
.zp-chat .typing i:nth-child(2){animation-delay:.2s}.zp-chat .typing i:nth-child(3){animation-delay:.4s}
@keyframes zpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes zpDot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.zp-qr{width:118px;background:#fff;border-radius:16px;padding:8px;color:#0f172a;text-align:center;font-size:.7rem;font-weight:700;box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.zp-qr span{display:block;margin-top:4px}
@media (max-width:860px){.zpromo{grid-template-columns:1fr;padding:24px 18px}.zp-qr{display:none}.zp-screen{transform:none;width:min(270px,80vw)}}

/* Thẻ Zalo ở trang kết quả */
.zcard{margin-top:14px;border-radius:22px;padding:20px 22px;color:#fff;background:linear-gradient(135deg,#0068ff,#00a2ff);box-shadow:0 18px 40px -16px rgba(0,104,255,.6)}
.zcard.hidden{display:none}
.zcard.ok{background:linear-gradient(135deg,#047857,#10b981)}
.zcard.warn{background:linear-gradient(135deg,#b45309,#f59e0b)}
.zcard.lost{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.zcard h3{color:#fff;margin:4px 0 8px}
.zcard p{margin:0;opacity:.96}
.zc-main{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.zc-pill{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:999px}
.zc-list{margin:0;padding-left:0;list-style:none;display:grid;gap:5px;font-size:.95rem}
.zc-side{display:flex;flex-direction:column;align-items:center;gap:6px}
.zc-side small{opacity:.85}

/* Lời mời sau khi có kết quả */
.zinvite{text-align:center}
.zinvite .zi-ic{font-size:2.6rem;width:76px;height:76px;margin:0 auto 6px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#0068ff,#00a2ff);box-shadow:0 12px 26px -10px rgba(0,104,255,.7)}
.zinvite h2{font-size:1.25rem}
.zinvite .zc-list{text-align:left;margin:10px auto;max-width:440px;color:#0f172a}
.zinvite .zp-btn{background:#0068ff;color:#fff}

/* Thanh trạng thái & nút nổi */
.zbar{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 14px;font-weight:600;font-size:.92rem;color:#fff}
.zbar.warn{background:#d97706}.zbar.lost{background:#dc2626}
.zbar button{border:0;background:#fff;color:#111;font-weight:800;border-radius:10px;padding:6px 14px;cursor:pointer}
.zfab{position:fixed;left:16px;bottom:20px;z-index:40;border:0;cursor:pointer;display:flex;align-items:center;gap:8px;background:#0068ff;color:#fff;font-weight:700;font-size:.9rem;padding:10px 16px 10px 10px;border-radius:999px;box-shadow:0 12px 28px -8px rgba(0,104,255,.7);animation:zfPulse 2.6s infinite}
.zfab .zl{background:#fff;color:#0068ff;font-weight:900;border-radius:999px;padding:4px 9px;font-size:.8rem}
@keyframes zfPulse{0%,100%{box-shadow:0 12px 28px -8px rgba(0,104,255,.7)}50%{box-shadow:0 12px 28px -8px rgba(0,104,255,.7),0 0 0 8px rgba(0,104,255,.18)}}
@media (max-width:560px){.zfab{left:10px;bottom:14px;font-size:.82rem}}