@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; src: url(assets/fonts/BeVietnamPro-Regular.ttf); font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; src: url(assets/fonts/BeVietnamPro-Medium.ttf); font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; src: url(assets/fonts/BeVietnamPro-Bold.ttf); font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 800; src: url(assets/fonts/BeVietnamPro-ExtraBold.ttf); font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 900; src: url(assets/fonts/BeVietnamPro-Black.ttf); font-display: swap; }

:root { --or: #FF6A2B; --ink: #0A0D14; --night: #06090E; --card: #11151f; --line: #1f2533; --paper: #F6F5F2; --mute: #9aa3b5; --red: #d4121f; --accent: #FF6A2B; --ease: cubic-bezier(.2,.7,.2,1); }
* { box-sizing: border-box; margin: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--night); color: var(--paper); font: 400 17px/1.6 "Be Vietnam Pro", system-ui, sans-serif; overflow-x: hidden; }
html.loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 6; }
h1, h2, h3 { font-weight: 900; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { color: var(--or); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--or); color: #0a0d14; font-weight: 800; padding: 16px 30px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .3s; will-change: transform; box-shadow: 0 10px 40px -10px rgba(255,106,43,.6); }
.btn:hover { box-shadow: 0 16px 50px -8px rgba(255,106,43,.85); }
.btn.ghost { background: none; border: 1.5px solid #2a3142; color: var(--paper); box-shadow: none; }
.btn.ghost:hover { border-color: var(--or); }

/* ---------- WebGL layer ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.slot { position: relative; }
.slot .fb { width: 100%; height: 100%; object-fit: cover; border-radius: 13% / 6%; border: 6px solid #1b2030; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
html.gl-pending .slot .fb, html.gl .slot .fb { visibility: hidden; }

/* ---------- chrome: progress, cursor, nav ---------- */
.bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--or); z-index: 90; }
.cursor { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(255,106,43,.9); border-radius: 50%; z-index: 95; pointer-events: none;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, opacity .3s; opacity: 0; mix-blend-mode: normal; }
.cursor.on { opacity: 1; }
.cursor.big { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(255,106,43,.15); }
.cursor.drag::after { content: "KÉO"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 11px "Be Vietnam Pro"; letter-spacing: .14em; color: var(--or); }
@media (hover: none) { .cursor { display: none; } }

nav.top { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; width: min(960px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(12,16,24,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: transform .8s var(--ease); }
.js nav.top { transform: translateX(-50%) translateY(-90px); }
html.ready nav.top { transform: translateX(-50%) translateY(0); transition-delay: .5s; }
nav.top.hide { transform: translateX(-50%) translateY(-90px) !important; transition-delay: 0s; }
nav.top img { height: 24px; }
nav.top .links { display: flex; gap: 26px; font-size: 14.5px; color: var(--mute); font-weight: 500; }
nav.top .links a:hover { color: #fff; }
nav.top .btn { padding: 10px 22px; font-size: 14.5px; }

/* ---------- loader ---------- */
#loader { display: none; position: fixed; inset: 0; z-index: 100; background: var(--night); align-items: center; justify-content: center; flex-direction: column;
  transition: transform 1s cubic-bezier(.76,0,.24,1), border-radius 1s cubic-bezier(.76,0,.24,1); }
html.loading #loader { display: flex; }
#loader.out { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 14vh 14vh; }
#loader::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 50%, rgba(255,106,43,.18), transparent); pointer-events: none; }
.ld-logo { width: min(340px, 62vw); animation: ldIn 1s var(--ease) both; }
.ld-line { width: min(340px, 62vw); height: 3px; background: #1b2030; margin-top: 28px; border-radius: 3px; overflow: hidden; }
.ld-line i { display: block; height: 100%; width: 0; background: var(--or); }
.ld-count { position: absolute; right: 32px; bottom: 26px; font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 900; letter-spacing: -.04em; color: var(--paper); font-variant-numeric: tabular-nums; line-height: 1; z-index: 1; }
.ld-count span { color: var(--or); }
@keyframes ldIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* ---------- hero ---------- */
.hero { position: relative; padding: calc(118px * var(--u, 1)) 0 0; text-align: center; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 35%), rgba(255,106,43,.22), transparent 70%); }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,43,.28), transparent); pointer-events: none; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1; letter-spacing: -.05em; margin-top: 10px; }
.hero h1 em { font-style: normal; color: var(--or); }
.hero .lead { color: var(--mute); max-width: 540px; margin: 16px auto 0; font-size: 1rem; }
.hero .cta { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.js .hero .lead, .js .hero .cta { opacity: 0; translate: 0 20px; }
html.ready .hero .lead, html.ready .hero .cta { opacity: 1; translate: 0 0; transition: opacity .9s .6s, translate .9s .6s var(--ease); }
html.ready .hero .cta { transition-delay: .75s; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin-bottom: -.12em; }
.w i { display: inline-block; font-style: normal; transform: translateY(118%); }
html.ready .w i { transform: none; transition: transform 1.1s var(--ease) calc(var(--i) * 80ms + .15s); }
/* phones follow the video: logical size 280 x 591, scaled and placed by app.js */
.stage { touch-action: pan-y; cursor: grab; position: relative; margin-top: calc(26px * var(--u, 1)); height: calc(940px * var(--u, 1)); }
.sp { position: absolute; left: 50%; top: 0; width: 280px; height: 591px; transform-origin: top center; }
#heroPhone { position: fixed; left: 50%; top: 0; width: 280px; height: 591px; transform-origin: top center; z-index: 20; }

/* ---------- scroll feature: two panels, the phone pins between them ---------- */
:root { --panelH: 715px; --phoneW: 334px; --u: 1; }
.feature { position: relative; height: calc(var(--panelH) + 330vh); }
.sticky { position: sticky; top: 80px; height: var(--panelH); display: grid; grid-template-columns: 1fr var(--phoneW) 1fr; column-gap: calc(18px * var(--u)); padding: 0 calc(80px * var(--u)); z-index: 6; }
.side { container-type: inline-size; position: relative; overflow: hidden; background: #0f131c; border: 1px solid var(--line); border-radius: 22px; }
.side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent); transition: background .6s; pointer-events: none; }
.pane { position: absolute; inset: 0; padding: 0 calc(44px * var(--u)); display: flex; flex-direction: column; justify-content: center; will-change: transform; }
#leftSide .pane { padding-top: 40px; }
.pane .n { font-weight: 900; font-size: 15px; color: var(--accent); letter-spacing: .12em; }
.pane h2 { font-size: clamp(1.5rem, min(9.5cqw, calc(var(--panelH) * .068)), 2.9rem); line-height: 1.06; letter-spacing: -.04em; margin: 0 0 16px; }
.pane > p { color: var(--mute); max-width: 390px; font-size: clamp(.9rem, 4.2cqw, 1.02rem); line-height: 1.55; }
.pane h3 { font-size: clamp(1rem, 5.2cqw, 1.2rem); letter-spacing: -.02em; margin-top: 30px; font-weight: 700; line-height: 1.25; }
.pane h3:first-child { margin-top: 0; }
.pane h3 + p { color: var(--mute); margin-top: 6px; line-height: 1.5; max-width: 320px; font-size: clamp(.88rem, 4cqw, 1rem); }
/* ---------- demos: những thứ nhỏ để chuyến đi trọn vẹn ---------- */
.block { padding: clamp(80px, 11vw, 150px) 0; position: relative; z-index: 6; }
.block h2.big { font-size: clamp(2rem, 4.6vw, 3.9rem); margin: 14px 0 0; max-width: 820px; }
.demos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.demo { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 22px; min-width: 0; overflow: hidden; position: relative; }
.demo header h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.03em; line-height: 1.15; }
.demo header p { color: var(--mute); margin-top: 8px; font-size: 15.5px; max-width: 540px; }
.d-voice { grid-column: span 7; } .d-wx { grid-column: span 5; } .d-sos { grid-column: span 12; } .d-map { grid-column: span 7; } .d-ach { grid-column: span 5; }

/* voice */
.vstatus { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; min-height: 28px; }
.vstatus .dot { width: 9px; height: 9px; border-radius: 50%; background: #4a5368; flex: none; transition: background .3s; }
.vstatus.live .dot { background: var(--or); animation: blink 1s ease-in-out infinite; }
.vstatus small { color: var(--mute); font-weight: 500; font-size: 13.5px; }
@keyframes blink { 50% { opacity: .35; } }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 22px 10px; margin-block: auto; }
.vm { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .45s; min-width: 0; }
.av { position: relative; width: clamp(54px, 5.4vw, 68px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 50%, #000)); display: grid; place-items: center; font-weight: 900; font-size: 1.35rem; color: #fff; transition: transform .45s var(--ease), box-shadow .45s; }
.rip { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; pointer-events: none; }
.vm.talk .av { transform: scale(1.12); box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--c); }
.vm.talk .rip { animation: rip 1.6s var(--ease) infinite; } .vm.talk .rip.r2 { animation-delay: .55s; }
@keyframes rip { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.vm.duck { opacity: .55; }
.nm { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; width: 0; overflow: hidden; transition: width .3s; }
.vm.talk .eq { width: 14px; }
.eq b { width: 3px; background: var(--c); border-radius: 2px; animation: eq .8s ease-in-out infinite; height: 100%; transform-origin: bottom; }
.eq b:nth-child(2) { animation-delay: .15s; } .eq b:nth-child(3) { animation-delay: .3s; }
@keyframes eq { 50% { transform: scaleY(.3); } }
.vol { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 96px; font-size: 11.5px; color: var(--mute); }
.vol svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.vol i { flex: 1; height: 4px; border-radius: 4px; background: #232a3a; overflow: hidden; display: block; }
.vol u { display: block; height: 100%; width: 100%; background: var(--or); border-radius: 4px; transition: width .55s var(--ease), background .3s; }
.vm.duck .vol u { background: #6b7488; }
.vol em { font-style: normal; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.ptt { align-self: flex-start; margin-top: auto; display: inline-flex; gap: 10px; align-items: center; padding: 14px 22px; border-radius: 999px; border: 1.5px solid #2a3142; background: #0f131c; color: var(--paper); font: 700 15px "Be Vietnam Pro", system-ui, sans-serif; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: background .2s, border-color .2s; }
.ptt svg { width: 18px; height: 18px; fill: var(--or); }
.ptt.on { background: var(--or); border-color: var(--or); } .ptt.on svg { fill: #fff; }

/* weather */
.wxstage { border-radius: 20px; overflow: hidden; background: #0d111a; line-height: 0; }
.wxsvg { width: 100%; height: auto; display: block; }
.wxcard { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; background: #0f131c; border: 1px solid var(--line); min-height: 76px; }
.wxcard .wi { width: 44px; height: 44px; flex: none; }
.wxcard b { display: block; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.1; }
.wxcard small { color: var(--mute); font-size: 13.5px; display: block; margin-top: 2px; }
.wxcard .eta { margin-left: auto; text-align: right; font-weight: 700; font-size: 14px; color: var(--or); white-space: nowrap; }
.wxslider { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--mute); }
.wxslider b { color: var(--paper); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.wxslider input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--or) var(--p, 0%), #232a3a var(--p, 0%)); outline: none; }
.wxslider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--or); cursor: grab; }
.wxslider input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--or); cursor: grab; }
.wx-sun .rays { transform-origin: 400px 62px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wx-cloud { animation: drift 14s ease-in-out infinite alternate; } .wx-cloud.c2 { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(46px); } }
.wx-rain line { stroke: #bcd3ff; stroke-width: 1.6; stroke-linecap: round; animation: fall .9s linear infinite; }
@keyframes fall { from { transform: translateY(-40px); } to { transform: translateY(300px); } }

/* sos */
.legend { list-style: none; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: block; }
.legend i.sos { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
.phones3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; justify-items: center; align-items: start; }
.pcol { width: min(100%, 236px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pcol > span { font-size: 13.5px; font-weight: 700; color: var(--mute); }
.mini { position: relative; width: 100%; border: 6px solid #1b2030; border-radius: 34px; background: #0a0d14; overflow: hidden; aspect-ratio: 9 / 17.5; display: flex; flex-direction: column; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); transition: box-shadow .3s, border-color .3s; }
.mini.alert { animation: shake .55s; }
@keyframes shake { 20% { transform: translateX(-4px) rotate(-.6deg); } 40% { transform: translateX(4px) rotate(.6deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.mini .who { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; font-size: 12px; font-weight: 700; }
.mini .who i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; display: block; }
.mini .who small { margin-left: auto; color: var(--mute); font-weight: 500; }
.mapbox { flex: 1; position: relative; margin: 0 8px; border-radius: 16px; overflow: hidden; background: #0d111a; min-height: 0; }
.mapbox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.toast { position: absolute; left: 14px; right: 14px; top: 44px; border-radius: 14px; padding: 9px 12px; font-size: 11.5px; line-height: 1.35; background: rgba(20,24,36,.96); border: 1px solid #2a3142; transform: translateY(-260%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; z-index: 3; }
.toast.show { transform: none; opacity: 1; } .toast b { display: block; font-size: 12.5px; } .toast span { color: var(--mute); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.actions button { border: 0; border-radius: 12px; padding: 9px 4px; font: 700 11px "Be Vietnam Pro", system-ui, sans-serif; color: #fff; background: #1b2130; cursor: pointer; display: flex; gap: 6px; align-items: center; justify-content: center; transition: transform .15s, background .2s; }
.actions button:hover { background: #262e42; } .actions button:active { transform: scale(.95); }
.actions button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.actions button.sos { background: var(--red); } .actions button.sos:hover { background: #ea2230; }
.tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.4); animation: tap .75s var(--ease) both; pointer-events: none; z-index: 5; }
@keyframes tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.pin-ring { transform-box: fill-box; transform-origin: center; animation: pinring 1.6s var(--ease) infinite; }
@keyframes pinring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* 3D map */
.map3d { position: relative; border-radius: 20px; overflow: hidden; background: #0a0d14; height: clamp(300px, 34vw, 440px); }
.map3d canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.map3d canvas:active { cursor: grabbing; }
.mchips { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.mchips span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(10,13,20,.78); border: 1px solid #232a3a; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(6px); }
.mchips i { width: 9px; height: 9px; border-radius: 50%; background: var(--or); display: block; } .mchips .g i { background: #3ddc84; }
.mhint { position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: var(--mute); z-index: 2; }
.mfail { display: none; position: absolute; inset: 0; place-items: center; color: var(--mute); font-size: 14px; }
.map3d.nogl .mfail { display: grid; }

/* achievements */
.ach { display: flex; flex-direction: column; gap: 18px; }
.achtop { display: flex; align-items: center; gap: 16px; }
.ring { width: 72px; height: 72px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: #232a3a; } .ring .fg { stroke: var(--or); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15rem; font-weight: 900; }
.achtop strong { display: block; font-size: 1.05rem; } .achtop small { color: var(--mute); font-size: 13.5px; display: block; }
.medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.medal { position: relative; border: 1px solid var(--line); background: #0f131c; border-radius: 20px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--paper); font: inherit; cursor: pointer; transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s, border-color .3s, opacity .6s; opacity: 0; }
.medal.in { opacity: 1; }
.medal svg { width: 62px; height: 70px; }
.medal b { font-size: 12.5px; text-align: center; line-height: 1.25; }
.medal small { font-size: 11px; color: var(--mute); }
.medal.locked { filter: grayscale(1); } .medal.locked svg { opacity: .55; } .medal.locked:hover { filter: none; border-color: var(--or); }
.medal.got { border-color: rgba(255,106,43,.45); }
.medal .new { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; background: var(--or); border-radius: 999px; padding: 2px 8px; animation: popin .5s var(--ease); }
@keyframes popin { from { transform: scale(0); } }
.medal .shine { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.14), transparent 60%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.medal:hover .shine { opacity: 1; }
.burst { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: burst .8s var(--ease) both; pointer-events: none; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.achhint { font-size: 13px; color: var(--mute); }

/* stores */
.stores { display: flex; gap: 14px; justify-content: center; margin-top: 40px; flex-wrap: wrap; position: relative; z-index: 6; }
.store { display: inline-flex; align-items: center; gap: 12px; background: var(--paper); color: #0a0d14; padding: 12px 24px 12px 20px; border-radius: 16px; text-align: left; transition: box-shadow .3s; }
.store.soon { cursor: default; opacity: .72; }
.store svg { width: 28px; height: 28px; fill: currentColor; }
.store small { display: block; font-size: 11.5px; opacity: .65; line-height: 1.1; } .store b { display: block; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; }
.endnote { margin-top: 26px; font-size: 13.5px; color: var(--mute); position: relative; z-index: 6; }
.endnote a { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- end ---------- */
.end { position: relative; padding: clamp(100px, 16vw, 220px) 0; text-align: center; overflow: hidden; }
.end::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,43,.32), transparent); }
.end h2 { font-size: clamp(3rem, 11vw, 10rem); line-height: .95; letter-spacing: -.06em; will-change: transform; }
.end h2 em { font-style: normal; color: var(--or); }
.end .btn { margin-top: 44px; font-size: 1.1rem; padding: 20px 40px; }
footer.site { border-top: 1px solid var(--line); padding: 56px 0 28px; color: var(--mute); font-size: 14.5px; position: relative; z-index: 6; }
.fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
.fco img { display: block; margin-bottom: 14px; height: 22px; width: auto; } .fco p { line-height: 1.75; } .fco b { color: var(--paper); }
.flinks h4 { color: var(--paper); font-size: 14px; margin-bottom: 12px; }
.flinks a, .flinks span { display: block; color: var(--mute); margin-bottom: 8px; } .flinks a:hover { color: var(--paper); }
.fbot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.todo { background: rgba(229,50,45,.2); color: #ff8f8a !important; border-radius: 4px; padding: 0 5px; }

.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  nav.top .links { display: none; }
  .sp[data-sp="-2"], .sp[data-sp="2"] { display: none; }
  .stage { margin-top: 14px; cursor: default; }
  .feature { height: calc(100vh + 300vh); height: calc(100svh + 300svh); margin-top: 0; }
  .sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; pointer-events: none; }
  .sticky > div:nth-child(2), #rightSide { display: none; }
  #leftSide { position: absolute; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: var(--cardH, 230px); pointer-events: auto; border-radius: 24px; }
  .pane { padding: 20px 22px !important; justify-content: center; }
  .pane h2 { font-size: clamp(1.3rem, 6.4vw, 1.7rem); margin-bottom: 10px; }
  .pane > p { font-size: .92rem; line-height: 1.5; max-width: none; }
  .d-voice, .d-wx, .d-sos, .d-map, .d-ach { grid-column: span 12; }
  .phones3 { gap: 10px; }
  .mini { border-width: 4px; border-radius: 24px; }
  .actions button { font-size: 10px; padding: 8px 2px; }
  .fgrid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .d-voice, .d-wx, .d-map, .d-ach { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .lead, .hero .cta { opacity: 1; transform: none; translate: 0 0; }
  .w i { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}








/* truy cập: bỏ qua tới nội dung, viền focus rõ */
.skip { position: fixed; left: 12px; top: -60px; z-index: 120; background: var(--or); color: #0a0d14; padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
.demo .ptt:focus-visible, .actions button:focus-visible, .medal:focus-visible { outline-offset: 2px; }


/* ---------- nút ngôn ngữ / giao diện trên thanh menu ---------- */
.ntools { display: flex; gap: 6px; }
.nbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--paper); display: grid; place-items: center; cursor: pointer; font: 700 12px "Be Vietnam Pro", system-ui, sans-serif; transition: background .2s, border-color .2s; }
.nbtn:hover { border-color: var(--or); }
.nbtn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.nbtn .sun { display: none; fill: none; } .nbtn .sun circle { fill: currentColor; stroke: none; }
html[data-theme="light"] .nbtn .moon { display: none; } html[data-theme="light"] .nbtn .sun { display: inline; }
nav.top { gap: 10px; }
nav.top .links { margin-right: auto; margin-left: 18px; }

/* ---------- giao diện sáng (theo video mẫu) ---------- */
html[data-theme="light"] { --night: #fcfcfb; --ink: #f0f0ee; --card: #ffffff; --line: #e4e4e0; --paper: #0f1218; --mute: #5d6678; color-scheme: light; }
html[data-theme="light"] nav.top { background: rgba(255,255,255,.76); border-color: rgba(0,0,0,.08); }
html[data-theme="light"] nav.top .links a:hover { color: var(--paper); }
html[data-theme="light"] nav.top img, html[data-theme="light"] .ld-logo, html[data-theme="light"] .fco img { filter: brightness(0); }
html[data-theme="light"] .nbtn { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.03); }
html[data-theme="light"] .btn.ghost { border-color: #d2d2cd; }
html[data-theme="light"] .side { background: #efefed; border-color: transparent; }
html[data-theme="light"] .demo { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
html[data-theme="light"] .wxcard, html[data-theme="light"] .medal, html[data-theme="light"] .ptt { background: #f4f4f2; }
html[data-theme="light"] .vol i, html[data-theme="light"] .ring .bg { background: #dcdcd8; stroke: #dcdcd8; }
html[data-theme="light"] .wxslider input { background: linear-gradient(90deg, var(--or) var(--p, 0%), #dcdcd8 var(--p, 0%)); }
html[data-theme="light"] .store { background: #111; color: #fff; }
html[data-theme="light"] .ld-line { background: #e4e4e0; }
html[data-theme="light"] .vstatus .dot { background: #b9bcc6; }
html[data-theme="light"] .medal.locked { filter: grayscale(1) brightness(1.05); }
html[data-theme="light"] .hero::before { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 35%), rgba(255,106,43,.16), transparent 70%); }
html[data-theme="light"] .hero::after, html[data-theme="light"] .end::before { background: radial-gradient(closest-side, rgba(255,106,43,.2), transparent); }
html[data-theme="light"] .end h2, html[data-theme="light"] .hero h1 { color: var(--paper); }
html[data-theme="light"] .slot .fb { border-color: #d5d5d1; }
html[data-theme="light"] .mhint { color: #aab0bd; }

.freenote { margin-top: 16px; font-size: 14px; color: var(--mute); position: relative; z-index: 6; }
.freenote b { color: var(--or); font-weight: 800; }
.js .freenote { opacity: 0; } html.ready .freenote { opacity: 1; transition: opacity .9s .9s; }
.freebadge { display: inline-block; margin-top: 30px; padding: 6px 16px; border-radius: 999px; background: rgba(255,106,43,.14); color: var(--or); font-weight: 800; font-size: 14px; position: relative; z-index: 6; }
.freebadge + .stores { margin-top: 20px; }


/* ---------- đàm thoại: kênh đoàn ở giữa, thành viên xung quanh ---------- */
.d-voice { gap: 16px; }
.vroom { position: relative; flex: 1; min-height: 440px; border-radius: 22px; background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--or) 10%, transparent), transparent), color-mix(in srgb, var(--paper) 3%, transparent); border: 1px solid var(--line); overflow: hidden; }
.vlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vl { stroke: var(--mute); stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; fill: none; }
.vl.src { stroke: var(--or); stroke-opacity: 1; stroke-width: 2.6; animation: flowIn .7s linear infinite; }
.vl.sink { stroke: var(--mute); stroke-opacity: .6; stroke-width: 1.2; animation: flowOut 1.1s linear infinite; }
@keyframes flowIn { to { stroke-dashoffset: 8; } } @keyframes flowOut { to { stroke-dashoffset: -8; } }
.vhub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; background: var(--card); border: 1.5px solid var(--line); z-index: 2; }
.vhub svg { width: 26px; height: 26px; fill: var(--mute); transition: fill .3s; }
.vhub small { font-size: 10.5px; font-weight: 700; color: var(--mute); letter-spacing: .02em; }
.vhub .hr { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--or); opacity: 0; }
.vhub.live { border-color: var(--or); } .vhub.live svg { fill: var(--or); }
.vhub.live .hr1 { animation: hubring 1.8s var(--ease) infinite; } .vhub.live .hr2 { animation: hubring 1.8s .9s var(--ease) infinite; }
@keyframes hubring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.vnodes { position: absolute; inset: 0; }
.vm { position: absolute; left: var(--x); top: var(--y); --s: clamp(52px, 5vw, 66px); transform: translate(-50%, calc(var(--s) / -2)); width: 104px; z-index: 3; }
.vm .av { width: var(--s); }
.vm.me .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--mute); }
.vfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vfoot .vstatus { align-items: flex-start; min-height: 0; flex: 1 1 220px; }
.vfoot .vstatus > span:not(.dot) { display: flex; flex-direction: column; gap: 2px; }
.vfoot .vstatus .dot { margin-top: 6px; }
.vfoot .vstatus small { font-size: 13px; }
.vfoot .ptt { margin: 0; align-self: auto; }

/* ---------- thành tựu: điện thoại trang cá nhân và huy hiệu 3D trôi nổi ---------- */
.d-map { grid-column: span 6; } .d-ach { grid-column: span 6; }
.ach3d { position: relative; flex: 1; min-height: 400px; border-radius: 22px; overflow: hidden; background: radial-gradient(55% 60% at 50% 55%, color-mix(in srgb, var(--or) 16%, transparent), transparent); }
.ach3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.alabels span { position: absolute; transform: translate(-50%, 0); font-size: 12.5px; font-weight: 700; color: var(--paper); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .6s; text-shadow: 0 1px 8px var(--card); }
.alabels span.on { opacity: 1; }
.ach3d .fb { display: none; position: absolute; inset: 0; margin: auto; height: 92%; width: auto; border-radius: 28px; border: 5px solid #1b2030; }
.ach3d.nogl .fb { display: block; }
@media (hover: none) { .ach3d .mhint { display: none; } }
.ach3d .mhint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: var(--mute); font-size: 12px; pointer-events: none; }
.map3d { height: auto; flex: 1; min-height: 400px; }
.veil { position: absolute; inset: 0; background: #0b1019; opacity: 0; pointer-events: none; transition: opacity .6s; z-index: 3; }
.veil.on { opacity: 1; }
@media (max-width: 900px) { .d-map, .d-ach { grid-column: span 12; } .vroom { min-height: 460px; } .vm { width: 84px; } .vm .nm { font-size: 12.5px; } .ach3d { min-height: 420px; } }
@media (min-width: 901px) and (max-width: 1180px) { .d-map, .d-ach { grid-column: span 12; } }

.vfoot .vstatus .l1 { font-size: 15px; }
.vfoot .vstatus .l1 b { font-size: 1.02em; }



/* ---------- rà soát thiết kế: tương phản, vùng bấm, cỡ chữ ---------- */
html[data-theme="light"] .eyebrow, html[data-theme="light"] .freenote b, html[data-theme="light"] .freebadge, html[data-theme="light"] .hero h1 em, html[data-theme="light"] .end h2 em, html[data-theme="light"] .wxcard .eta { color: #C2410C; }
html[data-theme="light"] .freebadge { background: rgba(194,65,12,.1); }
.nbtn { width: 42px; height: 42px; }
nav.top .links a { padding: 11px 4px; }
.actions button { padding: 12px 4px; font-size: 12px; }
.toast { font-size: 12.5px; } .toast b { font-size: 13px; }
.vhub small { font-size: 12px; } .vol { font-size: 12px; } .mini .who { font-size: 12.5px; }
.wxslider input { height: 8px; }
.wxslider input::-webkit-slider-thumb { width: 26px; height: 26px; }
.vroom { max-width: 720px; width: 100%; margin-inline: auto; }


/* ---------- điện thoại: thanh Tải app cố định, chip nghiêng máy ---------- */
.dock { display: none; }
.gyro { display: inline-flex; align-items: center; margin-top: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--paper); font: 700 13px "Be Vietnam Pro", system-ui, sans-serif; cursor: pointer; position: relative; z-index: 6; }
.gyro[hidden] { display: none; }
@media (max-width: 900px) {
  .dock { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px;
    background: rgba(12,16,24,.86); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    transform: translateY(160%); transition: transform .5s var(--ease); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
  .dock.show { transform: none; }
  .dock b { display: block; font-size: 15px; letter-spacing: -.02em; }
  .dock small { display: block; font-size: 12.5px; color: var(--mute); }
  .dock .btn { margin-left: auto; padding: 13px 24px; font-size: 15px; box-shadow: none; white-space: nowrap; flex: none; }
  html[data-theme="light"] .dock { background: rgba(255,255,255,.88); border-color: rgba(0,0,0,.08); }
  .hero { padding-top: 104px; }
}


/* ---------- điện thoại: menu dạng bảng trượt từ dưới lên, demo vuốt ngang ---------- */
.menu-btn, .sheet, .sheet-bg, .swipehint, .dots { display: none; }
.pillbtn { min-width: 52px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--paper); display: inline-grid; place-items: center; cursor: pointer; font: 700 14px "Be Vietnam Pro", system-ui, sans-serif; }
.pillbtn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.pillbtn .sun { display: none; fill: none; } .pillbtn .sun circle { fill: currentColor; stroke: none; }
html[data-theme="light"] .pillbtn .moon { display: none; } html[data-theme="light"] .pillbtn .sun { display: inline; }
.wxslider input { touch-action: none; }
@media (max-width: 900px) {
  nav.top .ntools { display: none; }
  .menu-btn { display: grid; margin-left: auto; }
  .menu-btn svg { stroke: currentColor; fill: none; width: 20px; height: 20px; }
  html.sheet-open { overflow: hidden; }
  .sheet-bg { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
  .sheet-bg.open { opacity: 1; visibility: visible; transition: opacity .35s; }
  .sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; max-height: 88vh; max-height: 88svh; overflow-y: auto; padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0; background: var(--card); color: var(--paper); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -24px 60px rgba(0,0,0,.35);
    transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .sheet.open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .sheet .grab { width: 44px; height: 5px; border-radius: 5px; background: var(--line); margin: 4px auto 14px; }
  .snav a { display: flex; align-items: center; min-height: 56px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; border-bottom: 1px solid var(--line); }
  .srow { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--line); font-weight: 600; }
  .slinks { display: grid; gap: 0; margin-top: 6px; }
  .slinks a { min-height: 46px; display: flex; align-items: center; color: var(--mute); font-size: 15px; }
  html[data-theme="light"] .sheet-bg { background: rgba(15,18,24,.4); }

  /* demo: vuốt ngang, mỗi lần một thẻ */
  .swipehint { display: block; margin-top: 18px; font-size: 13px; color: var(--mute); }
  .demos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 14px -24px 0; padding: 4px 24px 10px; align-items: stretch; overscroll-behavior-x: contain; }
  .demos::-webkit-scrollbar { display: none; }
  .demo { flex: 0 0 min(88%, 390px); scroll-snap-align: center; grid-column: auto; }
  .dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
  .dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .3s var(--ease), background .3s; }
  .dots button::after { content: ""; position: absolute; inset: -14px -5px; }
  .dots button.on { width: 26px; background: var(--or); }
  .phones3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pcol:nth-child(3) { display: none; }
  .map3d canvas { touch-action: auto; }
}

@media (max-width: 900px) {
  .mini { aspect-ratio: 9 / 19.5; }
  .actions { gap: 5px; padding: 6px; }
  .actions button { padding: 11px 2px; font-size: 11.5px; white-space: nowrap; min-height: 40px; }
  .actions button i { display: none; }
  .mini .who { padding: 12px 10px 6px; font-size: 11.5px; }
  .mini .who small { display: none; }
  .toast { left: 8px; right: 8px; top: 36px; padding: 7px 9px; font-size: 11.5px; }
}

@media (max-width: 900px) {
  .d-sos { flex-basis: min(94%, 420px); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions button { white-space: normal; line-height: 1.15; min-width: 0; min-height: 44px; padding: 8px 3px; text-align: center; }
}

@media (max-width: 900px) {
  .d-sos .phones3 { flex: 1; align-content: center; }
  .d-wx .wxstage { margin-block: auto 0; }
}


/* ================= bảng trình bày tính năng nhỏ: kiểu 1 (phòng trưng bày) và kiểu 2 (chữ khổng lồ + kính mờ) ================= */
.board { --board: #e3e3e1; --bt: #0f1218; --bm: #4a5262; --bo: #AE3A0B; position: relative; z-index: 6; padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 110px); background: var(--board); color: var(--bt); }
html:not([data-theme="light"]) .board { --board: #10141b; --bt: #f6f5f2; --bm: #9aa3b5; --bo: #FF6A2B; }
.board .bhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.board .eyebrow { color: var(--bo); }
.board h2.big { max-width: 820px; margin: 0; }
.vswitch { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 6px 5px 16px; border-radius: 999px; background: color-mix(in srgb, var(--bt) 7%, transparent); font-size: 13px; color: var(--bm); }
.vswitch button { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--bt); font: 700 13px "Be Vietnam Pro", system-ui, sans-serif; cursor: pointer; }
.vswitch button[aria-pressed="true"] { background: var(--bt); color: var(--board); }
.chaps { display: grid; gap: clamp(60px, 9vw, 130px); margin-top: clamp(40px, 6vw, 80px); }
.chap { position: relative; container-type: inline-size; --p: 0; }

/* thành phần dùng chung */
.ch-k { display: block; font-weight: 900; font-size: 15px; letter-spacing: -.01em; color: var(--bo); }
.ch-t { font-size: clamp(1.5rem, 4.2cqw, 2.6rem); line-height: 1.08; letter-spacing: -.04em; margin: 8px 0 10px; }
.ch-p { color: var(--bm); max-width: 520px; font-size: .98rem; line-height: 1.55; }
.fc { position: absolute; margin: 0; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); transform: translate3d(0, calc(var(--p) * var(--sp, 0) * 1px), 0); will-change: transform; z-index: 3; }
.fc img { display: block; width: 100%; height: auto; border-radius: 2.4cqw; box-shadow: 0 2.4cqw 5cqw -1cqw rgba(0,0,0,.35); animation: bob 7s ease-in-out infinite alternate; }
.fc:nth-of-type(odd) img { animation-delay: -3s; }
@keyframes bob { from { transform: translateY(-.7cqw); } to { transform: translateY(.7cqw); } }
.fcap { margin-top: 1.4cqw; font-size: clamp(11px, 1.15cqw, 14px); font-weight: 600; color: var(--bm); text-align: center; }
.ph { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); overflow: hidden; border-radius: 4.4cqw 4.4cqw 0 0; border: .55cqw solid #0b0b0c; border-bottom: 0; background: #000; z-index: 2;
  box-shadow: 0 3cqw 7cqw -2cqw rgba(0,0,0,.4); -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.ph img { display: block; width: 100%; height: auto; }
.fc-map { height: calc(var(--h) * 1cqw); }
.fc-map .map3d { height: 100%; min-height: 0; border-radius: 2.4cqw; box-shadow: 0 2.4cqw 5cqw -1cqw rgba(0,0,0,.35); }
.ach3d { position: relative; width: 100%; height: 100%; border-radius: 0; background: radial-gradient(52% 60% at 50% 56%, color-mix(in srgb, var(--bo) 16%, transparent), transparent); min-height: 0; }
.alabels span { color: var(--bt); text-shadow: none; }
.wm, .cap { display: none; }

/* ---------- kiểu 1: phòng trưng bày xám, chữ giữa, thẻ nổi ---------- */
.board[data-v="a"] .ch-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 3cqw; }
.board[data-v="a"] .ch-stage { position: relative; height: 56cqw; }
.board[data-v="a"] .ach-stage { height: 50cqw; }

/* ---------- kiểu 2: bảng màu, chữ khổng lồ phía sau, thẻ kính mờ ---------- */
.board[data-v="b"] .chap { aspect-ratio: 4 / 3; border-radius: 3.2cqw; overflow: hidden; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.chap[data-k="voice"] { --g1: #c9b48f; --g2: #efe6d6; } .chap[data-k="sos"] { --g1: #a9c0bb; --g2: #d9e5e1; } .chap[data-k="weather"] { --g1: #efbf98; --g2: #fbe9d8; }
.chap[data-k="map"] { --g1: #b2bcd3; --g2: #e8ecf6; } .chap[data-k="ach"] { --g1: #d4b9cf; --g2: #f4e9f1; }
.chap[data-k="live"] { --g1: #b9c7b4; --g2: #e6efe2; }
html:not([data-theme="light"]) .chap[data-k="live"] { --g1: #25332a; --g2: #111712; }
html:not([data-theme="light"]) .chap[data-k="voice"] { --g1: #3a3226; --g2: #171512; } html:not([data-theme="light"]) .chap[data-k="sos"] { --g1: #22302f; --g2: #10171a; }
html:not([data-theme="light"]) .chap[data-k="weather"] { --g1: #3b2a1f; --g2: #1a1410; } html:not([data-theme="light"]) .chap[data-k="map"] { --g1: #232a3a; --g2: #10131b; }
html:not([data-theme="light"]) .chap[data-k="ach"] { --g1: #35273a; --g2: #17111b; }
.board[data-v="b"] .wm { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transform: translate3d(0, calc(var(--p) * 22px), 0); }
.board[data-v="b"] .wm span { position: absolute; left: 3cqw; top: -1cqw; font-weight: 900; font-size: 27cqw; line-height: 1; letter-spacing: -.07em; color: rgba(255,255,255,.62); white-space: nowrap; }
html:not([data-theme="light"]) .board[data-v="b"] .wm span { color: rgba(255,255,255,.07); }
.board[data-v="b"] .ch-stage { position: absolute; inset: 0; }
.board[data-v="b"] .ph { left: calc(var(--bx) * 1cqw); top: calc(var(--by) * 1cqw); width: calc(var(--bw) * 1cqw); height: calc(var(--bh) * 1cqw); border-radius: 5cqw 5cqw 0 0; }
.board[data-v="b"] .fc { left: calc(var(--bx) * 1cqw); top: calc(var(--by) * 1cqw); width: calc(var(--bw) * 1cqw); padding: .9cqw; border-radius: 3cqw; background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.3); }
html:not([data-theme="light"]) .board[data-v="b"] .fc { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.board[data-v="b"] .fc img { border-radius: 2.2cqw; box-shadow: none; }
.board[data-v="b"] .fc-map { height: calc(var(--bh) * 1cqw); }
.board[data-v="b"] .fc-map .map3d { border-radius: 2.2cqw; box-shadow: none; }
.board[data-v="b"] .fcap { color: color-mix(in srgb, var(--bt) 70%, transparent); padding-bottom: .4cqw; }
.board[data-v="b"] .ch-head { position: absolute; left: 3.4cqw; bottom: 3.4cqw; max-width: 31cqw; z-index: 4; text-align: left; }
.board[data-v="b"] .ch-k { font-size: clamp(11px, 1.3cqw, 15px); }
.board[data-v="b"] .ch-t { font-size: clamp(1.05rem, 2.5cqw, 1.7rem); margin: 6px 0 8px; }
.board[data-v="b"] .ch-p { font-size: clamp(.78rem, 1.3cqw, .95rem); line-height: 1.5; }
.board[data-v="b"] .cap { display: block; position: absolute; right: 3.4cqw; top: 3.4cqw; z-index: 4; text-align: right; font-size: clamp(10px, 1.2cqw, 14px); line-height: 1.5; font-weight: 600; color: color-mix(in srgb, var(--bt) 65%, transparent); letter-spacing: .01em; }
.board[data-v="b"] .ach-stage .ach3d { position: absolute; top: 0; bottom: 0; right: 0; left: 31cqw; }

/* ---------- điện thoại: xếp dọc, không đè chữ ---------- */
@media (max-width: 900px) {
  .board .chap { container-type: normal; }
  .board[data-v] .chap { aspect-ratio: auto; border-radius: 28px; overflow: hidden; padding: 24px 18px 28px; }
  .board[data-v="a"] .chap { padding: 0; }
  .board .wm span { font-size: 30vw !important; }
  .board .ch-head, .board[data-v="b"] .ch-head { position: relative; left: auto; bottom: auto; max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; z-index: 4; }
  .board .ch-t, .board[data-v="b"] .ch-t { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .board .ch-p, .board[data-v="b"] .ch-p { font-size: .95rem; }
  .board .ch-stage, .board[data-v="b"] .ch-stage { position: relative; inset: auto; height: auto; display: grid; justify-items: center; gap: 14px; }
  .board .ph, .board[data-v="b"] .ph { position: relative; left: auto; top: auto; width: min(64%, 250px); height: auto; aspect-ratio: 1206 / 1300; border-radius: 30px 30px 0 0; border-width: 5px; }
  .board .fc, .board[data-v="b"] .fc { position: relative; left: auto; top: auto; width: min(100%, 400px); transform: none; }
  .board .fc-map, .board[data-v="b"] .fc-map { height: 260px; }
  .chap[data-k="live"] .ph, .board[data-v="b"] .chap[data-k="live"] .ph { aspect-ratio: 1206 / 2300; width: min(60%, 230px); }
  .board .fc img { border-radius: 18px; }
  .board .fcap { font-size: 12.5px; margin-top: 8px; }
  .board[data-v="b"] .cap { display: none; }
  .board .ach-stage, .board[data-v="a"] .ach-stage, .board[data-v="b"] .ach-stage { height: 430px; }
  .board[data-v="b"] .ach-stage .ach3d { position: relative; left: 0; justify-self: stretch; width: auto; margin-inline: -18px; height: 100%; }   /* tràn sát mép thẻ để nhãn huy hiệu không bị cắt */
}
@media (prefers-reduced-motion: reduce) { .fc img { animation: none; } .fc, .wm { transform: none !important; } }



/* ================= phong cách Kiểu 2 cho toàn trang: nền ấm, chữ khổng lồ mờ phía sau, thẻ pastel bo tròn, kính mờ ================= */
html[data-theme="light"] { --night: #f4ede3; }
html[data-theme="light"] body { background: linear-gradient(180deg, #f7eee2 0%, #f3eadc 30%, #eee6d9 62%, #f3ece1 100%); }
/* khối kết thúc thành thẻ lớn như các chương của bảng */
.end { margin: 0 clamp(10px, 2.2vw, 30px); border-radius: clamp(26px, 3.4vw, 52px); background: linear-gradient(135deg, #efbf98, #fbe9d8); color: #0f1218; }
html:not([data-theme="light"]) .end { background: linear-gradient(135deg, #3b2a1f, #1a1410); color: var(--paper); }
html[data-theme="light"] .end h2, html[data-theme="light"] .end .endnote { color: #0f1218; }
html[data-theme="light"] .end .endnote { color: #4a5262; }
.end .wrap { position: relative; z-index: 1; }
.freebadge, .end .store { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
html[data-theme="light"] .freebadge { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); }
html:not([data-theme="light"]) .freebadge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
/* bảng: không còn nền xám riêng, thẻ chương rộng hơn */
.board { background: transparent; }
.board .chaps.wrap { max-width: min(1340px, 95vw); }
footer.site { margin-top: clamp(18px, 3vw, 40px); }
@media (max-width: 900px) {
  .end { margin: 0 10px; border-radius: 28px; }
}


html[data-theme="light"] .side { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 24px 60px -30px rgba(80,50,20,.35); }
html:not([data-theme="light"]) .side { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

html[data-theme="light"] { background-color: #f3ece1; }

/* ================= bảng chương: lưới 2 cột so le, tiêu đề trên đầu thẻ (không đè lên ảnh) ================= */
@media (min-width: 901px) {
  .board .chaps.wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: start; margin-top: clamp(30px, 4vw, 56px); max-width: min(1340px, 95vw); }
  .board .chap:nth-child(even) { margin-top: clamp(48px, 7vw, 110px); }
  .board[data-v="b"] .chap { aspect-ratio: auto; display: flex; flex-direction: column; }
  .board[data-v="b"] .ch-head { position: relative; left: auto; bottom: auto; max-width: 66%; padding: 3.6cqw 3.6cqw 0; }
  .board[data-v="b"] .ch-t { font-size: clamp(1.1rem, 3.2cqw, 1.7rem); }
  .board[data-v="b"] .ch-p { font-size: clamp(.84rem, 1.75cqw, .95rem); }
  .board[data-v="b"] .ch-stage { position: relative; inset: auto; height: 80cqw; flex: none; }
  .board[data-v="b"] .ach-stage { height: 66cqw; }
  .board[data-v="b"] .ach-stage .ach3d { left: 0; }
  .board[data-v="b"] .wm span { top: 27cqw; }
  .board[data-v="b"] .cap { top: 3.6cqw; right: 3.6cqw; }
}


/* ================= thanh điều hướng trên và dock dưới: kính mờ, mục đang xem sáng lên ================= */
nav.top { width: min(940px, calc(100% - 24px)); padding: 8px 8px 8px 20px; gap: 8px; background: rgba(12,16,24,.58); box-shadow: 0 14px 40px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
nav.top .links { gap: 4px; margin-left: 14px; }
nav.top .links a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); transition: background .25s, color .25s; }
nav.top .links a:hover { color: var(--paper); background: rgba(255,255,255,.06); }
nav.top .links a.on { color: var(--paper); background: rgba(255,255,255,.1); }
nav.top .ntools { gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
nav.top .ntools .nbtn { width: 34px; height: 34px; border: 0; background: transparent; }
nav.top .ntools .nbtn:hover { background: rgba(255,255,255,.1); }
nav.top .btn { padding: 11px 22px; font-size: 14px; }
html[data-theme="light"] nav.top { background: rgba(255,255,255,.66); border-color: rgba(255,255,255,.8); box-shadow: 0 14px 40px -20px rgba(80,50,20,.4), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="light"] nav.top .links a:hover { background: rgba(0,0,0,.05); }
html[data-theme="light"] nav.top .links a.on { background: rgba(0,0,0,.08); }
html[data-theme="light"] nav.top .ntools { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
html[data-theme="light"] nav.top .ntools .nbtn:hover { background: rgba(0,0,0,.06); }
.dmark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #ff7a3d, #ff5a1a); flex: none; }
.dmark img { width: 24px; height: 24px; display: block; }
@media (max-width: 900px) {
  .dock { padding: 9px 9px 9px 10px; gap: 12px; border-radius: 26px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
  .dock b { font-size: 15px; line-height: 1.15; }
  .dock small { font-size: 12.5px; line-height: 1.2; margin-top: 2px; }
  .dock .btn { padding: 13px 22px; border-radius: 999px; }
  html[data-theme="light"] .dock { background: rgba(255,255,255,.8); box-shadow: 0 18px 44px -16px rgba(80,50,20,.45), inset 0 1px 0 rgba(255,255,255,.9); }
}
@media (max-width: 900px) { .board[data-v="b"] .wm span { top: 250px; } }

/* ================= bản đồ 3D: chú giải nằm ngoài ảnh, chữ to và rõ ================= */
.fc-map { display: flex; flex-direction: column; }
.fc-map .map3d { flex: 1 1 auto; min-height: 0; height: auto; }
.mlegend { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 1.1cqw 1cqw .2cqw; color: var(--bt); font-weight: 700; font-size: clamp(11.5px, 1.35cqw, 14px); line-height: 1.3; }
.mlegend span { display: inline-flex; align-items: center; gap: 7px; }
.mlegend i { width: 10px; height: 10px; border-radius: 50%; background: var(--or); display: block; flex: none; }
.mlegend .g i { background: #1fae5b; }
.mlegend small { margin-left: auto; font-size: .92em; font-weight: 600; color: var(--bm); }
@media (max-width: 900px) { .board .fc-map { height: auto; } .board .fc-map .map3d { height: 260px; flex: none; } .mlegend { font-size: 13px; padding: 10px 6px 2px; } }

/* ================= thẻ chương: rộng hơn, ít khoảng trống, giữ so le nhẹ ================= */
@media (min-width: 901px) {
  .board .chaps.wrap { max-width: min(1580px, 97vw); gap: clamp(14px, 1.8vw, 26px); }
  .board .chap:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); }
  .board[data-v="b"] .ch-head { max-width: 68%; padding: 3.2cqw 3.2cqw 0; }
  .board[data-v="b"] .ch-stage { margin-top: -8cqw; height: 74cqw; }
  .board[data-v="b"] .ach-stage { margin-top: 0; height: 60cqw; }
}

/* ================= thanh tab: thêm Hỗ trợ và menu Pháp lý ================= */
nav.top { width: min(1040px, calc(100% - 24px)); }
nav.top .links { align-items: center; }
.nmenu { position: relative; }
.nlink { padding: 9px 14px; border-radius: 999px; border: 0; background: transparent; font: 600 14px "Be Vietnam Pro", system-ui, sans-serif; color: var(--mute); cursor: pointer; transition: background .25s, color .25s; }
.nlink::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.nlink:hover, .nmenu.open .nlink, .nmenu:focus-within .nlink { color: var(--paper); background: rgba(255,255,255,.08); }
.ndrop { position: absolute; left: 0; top: calc(100% + 10px); min-width: 280px; padding: 8px; border-radius: 20px; background: rgba(14,18,27,.9); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.nmenu:hover .ndrop, .nmenu.open .ndrop, .nmenu:focus-within .ndrop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
nav.top .ndrop a { display: block; padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--paper); }
nav.top .ndrop a:hover { background: rgba(255,255,255,.08); color: var(--paper); }
html[data-theme="light"] .ndrop { background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.08); box-shadow: 0 24px 60px -24px rgba(80,50,20,.45); }
html[data-theme="light"] nav.top .ndrop a:hover { background: rgba(0,0,0,.05); }
html[data-theme="light"] .nlink:hover, html[data-theme="light"] .nmenu.open .nlink, html[data-theme="light"] .nmenu:focus-within .nlink { background: rgba(0,0,0,.06); }
@media (max-width: 1100px) { nav.top .links a, .nlink { padding: 9px 10px; font-size: 13.5px; } }

/* ================= dấu tiếng Việt: khung cắt từ chừa chỗ cho dấu trên và nét chữ đậm ================= */
.w { padding: .32em .09em .16em; margin: -.32em -.02em -.16em; }
.hero h1 { line-height: 1.04; }
.end h2 { line-height: 1.02; }
h2, h3, .big, .ch-t { padding-top: .04em; }

.board[data-v="b"] .chap[data-k="ach"] .wm { display: none; }

[data-opt][hidden] { display: none !important; }   /* ô tuỳ chọn trống: chân trang đặt display cho span nên phải ép ẩn */