@font-face { font-family: "Neusharp"; src: url(../fonts/neusharp-bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Britti"; src: url(../fonts/britti-regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Britti"; src: url(../fonts/britti-semibold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Britti"; src: url(../fonts/britti-bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --red: #C13F28; --signal: #E83636; --maroon: #5E0F18; --peach: #FDE9E1; --peach2: #FAB29A;
  --ink: #111; --muted: #666; --line: #EADCD6; --bg: #FFFFFF; --soft: #FBF6F4;
  --ok: #16A34A; --ok-soft: #DCFCE7; --bad: #DC2626; --bad-soft: #FEE2E2;
  --r: clamp(14px, 1.6vw, 22px);
  --pad: clamp(14px, 2.2vw, 32px);
  --fs: clamp(15px, 1.55vw, 22px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Britti", system-ui, sans-serif; font-size: var(--fs); }
body { overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3 { margin: 0; }
.neu { font-family: "Neusharp", "Britti", sans-serif; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- Thanh trên ---------- */
.topbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px var(--pad); border-bottom: 3px solid var(--red); background: #fff; min-height: 64px; }
.topbar .logo { height: clamp(26px, 3.4vw, 42px); }
.topbar .ttl { flex: 1; min-width: 0; line-height: 1.15; }
.topbar .ttl b { display: block; color: var(--red); font-family: "Neusharp"; font-size: clamp(14px, 1.7vw, 24px); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ttl span { color: var(--muted); font-size: .72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: .85em; color: var(--maroon); }
.tbtn:active { transform: scale(.96); }
.tbtn.red { background: var(--red); border-color: var(--red); color: #fff; }
.hotline { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--peach); color: var(--red); font-weight: 700; font-size: .85em; white-space: nowrap; }
.hotline b { font-family: "Neusharp"; font-size: 1.3em; }

main { flex: 1; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; display: none; padding: var(--pad); overflow: auto; }
.screen.on { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Trang chủ ---------- */
.home { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--pad); height: 100%; }
.hero { position: relative; border-radius: var(--r); background: var(--soft); padding: clamp(18px, 2.6vw, 38px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--line); }
.hero:after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; background: url(../img/icon-red.png) center/contain no-repeat; opacity: .07; }
.hero .kicker { display: inline-block; align-self: flex-start; background: var(--red); color: #fff; font-weight: 700; font-size: .72em; padding: 6px 12px; border-radius: 999px; letter-spacing: .04em; }
.hero h1 { font-family: "Neusharp"; text-transform: uppercase; color: var(--red); font-size: clamp(26px, 3.6vw, 54px); line-height: 1.05; margin: 14px 0 10px; }
.hero h1 em { font-style: normal; color: var(--maroon); display: block; font-size: .42em; margin-top: 10px; letter-spacing: .02em; }
.hero p { color: #333; margin: 0; line-height: 1.45; font-size: .92em; }
.hero .face { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: #fff; border-radius: 16px; padding: 12px 14px; border: 1px solid var(--line); position: relative; z-index: 1; }
.hero .face .eyes { flex: none; width: 70px; height: 50px; border-radius: 12px; background: #1F2937; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero .face .eyes i { width: 16px; height: 16px; border-radius: 50%; background: #67E8F9; box-shadow: 0 0 10px #22D3EE; animation: blink 4s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.hero .face span { font-size: .82em; color: #333; line-height: 1.35; }
.hero .face span b { color: var(--red); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--pad); min-height: 0; }
.tile { position: relative; border-radius: var(--r); color: #fff; text-align: left; padding: clamp(16px, 2vw, 28px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; box-shadow: 0 10px 24px -14px rgba(94, 15, 24, .6); transition: transform .15s; }
.tile:active { transform: scale(.97); }
.tile .art { position: absolute; right: -2%; top: 4%; width: 58%; opacity: .98; }
.tile .art svg { width: 100%; height: auto; display: block; }
.tile .num { position: absolute; left: clamp(16px, 2vw, 28px); top: clamp(14px, 1.8vw, 24px); font-family: "Neusharp"; font-size: 1.1em; opacity: .55; }
.tile h2 { font-family: "Neusharp"; text-transform: uppercase; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.05; position: relative; }
.tile p { margin: 6px 0 0; font-size: .82em; opacity: .92; position: relative; max-width: 72%; }
.t1 { background: linear-gradient(135deg, #C13F28, #8E2418); }
.t2 { background: linear-gradient(135deg, #E83636, #B42318); }
.t3 { background: linear-gradient(135deg, #5E0F18, #8E2418); }
.t4 { background: linear-gradient(135deg, #D2502F, #9A2E1D); }

/* ---------- Tiêu đề màn con ---------- */
.shead { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; }
.shead h2 { font-family: "Neusharp"; text-transform: uppercase; color: var(--red); font-size: clamp(20px, 2.4vw, 34px); flex: 1; min-width: 200px; }
.shead .sub { color: var(--muted); font-size: .8em; width: 100%; margin-top: -6px; }

/* ---------- Hỏi đáp AI ---------- */
.ai { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--pad); height: calc(100% - 70px); }
.chat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); min-height: 0; }
.msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: 18px; line-height: 1.45; font-size: .95em; animation: fadein .3s; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; align-self: flex-start; }
.msg.bot .who { color: var(--red); font-weight: 700; font-size: .78em; display: block; margin-bottom: 4px; }
.msg.me { background: var(--red); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.msg .mart { display: flex; gap: 12px; align-items: flex-start; }
.msg .mart svg { width: 110px; flex: none; border-radius: 10px; }
.msg .src { display: block; color: var(--muted); font-size: .75em; margin-top: 6px; }
.composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: #fff; border-radius: 0 0 var(--r) var(--r); }
.composer input { flex: 1; min-width: 0; font: inherit; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--line); outline: none; }
.composer input:focus { border-color: var(--red); }
.mic { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.mic.live { background: var(--signal); animation: pulse 1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 54, 54, .5); } 100% { box-shadow: 0 0 0 16px rgba(232, 54, 54, 0); } }
.side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }
.voicecard { border-radius: var(--r); background: linear-gradient(135deg, #C13F28, #8E2418); color: #fff; padding: 18px; }
.voicecard b { font-family: "Neusharp"; text-transform: uppercase; font-size: 1.05em; display: block; margin-bottom: 6px; }
.voicecard p { margin: 0; font-size: .85em; line-height: 1.45; opacity: .95; }
.voicecard .wave { display: flex; gap: 4px; align-items: center; height: 26px; margin-top: 10px; }
.voicecard .wave i { width: 5px; border-radius: 3px; background: #fff; animation: wave 1.1s infinite ease-in-out; }
.voicecard .wave i:nth-child(2) { animation-delay: .1s } .voicecard .wave i:nth-child(3) { animation-delay: .2s } .voicecard .wave i:nth-child(4) { animation-delay: .3s } .voicecard .wave i:nth-child(5) { animation-delay: .4s }
@keyframes wave { 0%, 100% { height: 6px } 50% { height: 24px } }
.chips h3 { font-size: .8em; color: var(--maroon); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.chip { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-weight: 600; font-size: .88em; color: var(--maroon); }
.chip:active { border-color: var(--red); background: var(--peach); }

/* ---------- Ôn tập ---------- */
.quiz { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--pad); height: 100%; }
.qside { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.qart { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--peach); }
.qart svg { display: block; width: 100%; height: auto; }
.qstat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qstat div { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.qstat small { display: block; color: var(--muted); font-size: .7em; text-transform: uppercase; letter-spacing: .04em; }
.qstat b { font-family: "Neusharp"; font-size: 1.5em; color: var(--red); }
.qstat .ok b { color: var(--ok); }
.progress { height: 10px; background: var(--peach); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--red); border-radius: 99px; transition: width .4s; }
.qmain { display: flex; flex-direction: column; min-height: 0; }
.qno { display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.qno b { background: var(--red); color: #fff; font-family: "Neusharp"; padding: 4px 12px; border-radius: 999px; font-size: 1.05em; }
.qtext { font-size: clamp(18px, 1.95vw, 28px); font-weight: 700; line-height: 1.35; margin: 10px 0 clamp(12px, 1.6vw, 22px); color: #111; }
.opts { display: grid; gap: clamp(8px, 1vw, 14px); }
.opt { display: flex; align-items: center; gap: 14px; text-align: left; padding: clamp(10px, 1.2vw, 16px) 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-size: .95em; line-height: 1.35; transition: background .2s, border-color .2s, transform .1s; }
.opt:active { transform: scale(.99); }
.opt .L { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: var(--peach); color: var(--red); font-family: "Neusharp"; font-size: 1.05em; }
.opt.ok { background: var(--ok-soft); border-color: var(--ok); animation: pop .4s; }
.opt.ok .L { background: var(--ok); color: #fff; }
.opt.bad { background: var(--bad-soft); border-color: var(--bad); animation: shake .45s; }
.opt.bad .L { background: var(--bad); color: #fff; }
.opt.dim { opacity: .45; }
@keyframes pop { 50% { transform: scale(1.03); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.fb { margin-top: clamp(10px, 1.4vw, 18px); border-radius: 16px; padding: 14px 18px; display: none; gap: 14px; align-items: center; }
.fb.on { display: flex; animation: fadein .3s; }
.fb.ok { background: var(--ok-soft); border: 2px solid var(--ok); }
.fb.bad { background: var(--peach); border: 2px solid var(--red); }
.fb .ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 700; }
.fb.ok .ico { background: var(--ok); } .fb.bad .ico { background: var(--bad); }
.fb .t { flex: 1; font-size: .88em; line-height: 1.4; }
.fb .t b { display: block; font-size: 1.1em; margin-bottom: 2px; }
.fb.ok .t b { color: var(--ok); } .fb.bad .t b { color: var(--bad); }
.next { flex: none; background: var(--red); color: #fff; font-weight: 700; padding: 14px 22px; border-radius: 999px; }
.grid32 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.grid32 button { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 700; color: var(--maroon); }
.grid32 button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.grid32 button.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.grid32 button.cur { border-color: var(--red); box-shadow: 0 0 0 3px var(--peach2); }

/* ---------- Kiến thức ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pad); }
.kcard { text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
.kcard:active { transform: scale(.98); }
.kcard svg { display: block; width: 100%; height: auto; }
.kcard div { padding: 14px 16px 18px; }
.kcard small { color: var(--red); font-weight: 700; font-size: .72em; text-transform: uppercase; letter-spacing: .05em; }
.kcard h3 { font-family: "Neusharp"; text-transform: uppercase; color: var(--maroon); font-size: 1.15em; margin: 4px 0 6px; }
.kcard p { margin: 0; color: var(--muted); font-size: .8em; line-height: 1.4; }
.kdetail { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--pad); }
.kdetail .qart { position: sticky; top: 0; }
.kq { background: var(--soft); border-left: 5px solid var(--red); padding: 12px 16px; border-radius: 0 12px 12px 0; font-weight: 600; line-height: 1.45; margin-bottom: 14px; font-size: .92em; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: .85em; color: var(--maroon); }
.tab.on { background: var(--red); border-color: var(--red); color: #fff; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); line-height: 1.45; font-size: .95em; }
.steps li:before { content: counter(s); flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: "Neusharp"; font-size: .9em; }
.note { margin-top: 12px; background: var(--peach); border: 1.5px solid var(--red); border-radius: 12px; padding: 12px 14px; font-size: .88em; line-height: 1.45; }
.note b { color: var(--red); }

/* ---------- Dẫn đường ---------- */
.nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--pad); }
.cruise { border-radius: var(--r); background: linear-gradient(135deg, #5E0F18, #C13F28); color: #fff; padding: clamp(18px, 2.4vw, 32px); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 300px; }
.cruise h3 { font-family: "Neusharp"; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px); }
.cruise p { opacity: .92; line-height: 1.45; font-size: .9em; }
.cruise .route { flex: 1; min-height: 90px; }
.cruise .route svg { width: 100%; height: 100%; }
.bigbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font-weight: 700; font-size: 1em; background: #fff; color: var(--red); align-self: flex-start; }
.bigbtn.stop { background: var(--signal); color: #fff; }
.points { display: grid; gap: 14px; align-content: start; }
.pt { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; border-radius: var(--r); border: 2px solid var(--line); background: #fff; }
.pt:active { border-color: var(--red); background: var(--peach); }
.pt .pin { flex: none; width: 58px; height: 58px; border-radius: 16px; background: var(--red); color: #fff; display: grid; place-items: center; font-family: "Neusharp"; font-size: 1.5em; }
.pt b { display: block; font-size: 1.1em; color: var(--maroon); }
.pt span { color: var(--muted); font-size: .8em; }
.pt .go { margin-left: auto; color: var(--red); font-weight: 700; font-size: .85em; white-space: nowrap; }
.pt.missing { border-style: dashed; }
.pt.missing .pin { background: #9CA3AF; }
.pt.missing .go { color: var(--muted); }
.navnote { font-size: .78em; color: var(--muted); line-height: 1.45; margin-top: 4px; }

/* Lớp phủ khi robot đang đi */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, .97); display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--pad); }
.overlay.on { display: flex; animation: fadein .3s; }
.overlay .big { font-family: "Neusharp"; text-transform: uppercase; color: var(--red); font-size: clamp(28px, 4.2vw, 64px); line-height: 1.1; }
.overlay .small { color: var(--maroon); font-size: 1.05em; margin: 10px 0 0; max-width: 900px; line-height: 1.45; }
.overlay .st { margin-top: 12px; color: var(--muted); font-size: .9em; min-height: 1.4em; }
.overlay .walk { width: min(560px, 80vw); height: 90px; margin: 18px 0; }
.overlay .stopbtn { margin-top: 22px; width: clamp(150px, 16vw, 220px); height: clamp(150px, 16vw, 220px); border-radius: 50%; background: var(--signal); color: #fff; font-family: "Neusharp"; font-size: clamp(24px, 2.6vw, 38px); box-shadow: 0 0 0 12px var(--bad-soft); }
.overlay .stopbtn:active { transform: scale(.95); }
.overlay .row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

/* ---------- Kết quả / confetti ---------- */
.result { text-align: center; padding-top: 2vh; }
.result .score { font-family: "Neusharp"; color: var(--red); font-size: clamp(60px, 9vw, 130px); line-height: 1; }
.result .score small { font-size: .4em; color: var(--maroon); }
.result p { font-size: 1.1em; color: #333; }
.result .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- Phụ đề giọng nói ---------- */
.caption { position: fixed; left: 50%; bottom: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transform: translateX(-50%) translateY(20px); max-width: min(900px, 90vw); background: rgba(17, 17, 17, .88); color: #fff; padding: 10px 18px; border-radius: 14px; font-size: .85em; line-height: 1.4; opacity: 0; transition: .3s; z-index: 70; pointer-events: none; }
.caption.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.caption b { color: var(--peach2); }
.toast { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); background: var(--maroon); color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 80; font-size: .88em; display: none; max-width: 90vw; }
.toast.on { display: block; animation: fadein .25s; }
.demo-badge { position: fixed; right: 10px; bottom: 10px; background: #111; color: #fff; font-size: 11px; padding: 5px 10px; border-radius: 99px; opacity: .6; z-index: 5; }

/* ---------- Màn dọc / điện thoại ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body { overflow: auto; }
  #app { position: static; min-height: 100%; }
  .screen { position: static; overflow: visible; }
  .home, .ai, .quiz, .kdetail, .nav { grid-template-columns: 1fr; height: auto; }
  .tiles { grid-template-rows: none; }
  .tile { min-height: 160px; }
  .cards { grid-template-columns: 1fr; }
  .grid32 { grid-template-columns: repeat(8, 1fr); }
  .msgs { max-height: 55vh; }
  .hotline span { display: none; }
  .topbar .ttl span { display: none; }
  .qart { max-width: 420px; }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .tbtn .lbl { display: none; }
}