.hero-radar {
  --mint-line:#d5e2d5;--shadow:rgba(25,50,35,.08);--glass:rgba(255,255,255,.94);
  --radar-red:#b34e4e;--radar-red-soft:#fbefed;--radar-red-line:#e7c5c0;
  --radar-sweep:rgba(70,160,90,.22);--radar-fade:rgba(70,160,90,0);
}
.hero-art.hero-radar { display:flex;flex-direction:column;justify-content:center;gap:12px;height:auto; }
.radar-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px; }
.radar-heading strong { font:500 10px var(--mono);letter-spacing:1.6px;color:var(--accent-strong); }
.radar-live { display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted); }
.radar-live i { width:5px;height:5px;border-radius:50%;background:var(--accent); }
.radar-stage { position:relative;height:390px;display:grid;place-items:center;flex-shrink:0; }
.radar-field { position:relative;width:74%;max-width:370px;aspect-ratio:1;isolation:isolate; }
.radar-grid { position:absolute;inset:0;border:1px solid var(--mint-line);border-radius:50%;background:radial-gradient(circle,var(--accent-soft),var(--bg) 68%); }
.radar-grid::before { content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0,transparent calc(25% - 1px),var(--mint-line) 25%,transparent calc(25% + 1px)); }
.radar-grid::after { content:"";position:absolute;inset:16%;border:1px dashed var(--mint-line);border-radius:50%; }
.radar-axis { position:absolute;inset:0;pointer-events:none; }
.radar-axis::before,.radar-axis::after { content:"";position:absolute;background:var(--mint-line);opacity:.6; }
.radar-axis::before { width:1px;height:100%;left:50%; }
.radar-axis::after { height:1px;width:100%;top:50%; }
.radar-sweep { display:none;position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 286deg,var(--radar-fade) 286deg,var(--radar-sweep) 359.5deg,transparent 360deg);will-change:transform; }
.radar-sweep::after { content:"";position:absolute;bottom:50%;left:50%;height:50%;width:1px;background:linear-gradient(var(--radar-fade),var(--accent));box-shadow:0 0 12px var(--radar-sweep); }
.radar-ready .radar-sweep { display:block; }
.radar-core { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--mint-line);border-radius:24px;box-shadow:0 8px 30px var(--shadow);z-index:2; }
.radar-core::before { content:"";position:absolute;inset:-13px;border:1px solid var(--mint-line);border-radius:34px; }
.radar-core img { width:32px;height:32px; }
.radar-core span { font:500 9px var(--mono);letter-spacing:1px;color:var(--accent-strong); }
.radar-coordinate { position:absolute;color:var(--muted);font:9px var(--mono);opacity:.55; }
.radar-coordinate.north { top:-20px;left:50%;transform:translateX(-50%); }
.radar-coordinate.south { bottom:-20px;left:50%;transform:translateX(-50%); }
.radar-post { --post-color:var(--muted);--post-line:var(--border);--post-soft:var(--surface-2);position:absolute;left:var(--x);top:var(--y);width:52%;transform:translate(-50%,-50%);margin:0;padding:12px 13px 10px;border:1px solid var(--post-line);border-radius:14px;background:var(--glass);box-shadow:0 8px 24px var(--shadow);z-index:3;transition:border-color .3s,box-shadow .3s; }
.radar-post[data-phase="match"] { --post-color:var(--accent-strong);--post-line:var(--accent);--post-soft:var(--accent-soft); }
.radar-post[data-phase="skip"] { --post-color:var(--radar-red);--post-line:var(--radar-red-line);--post-soft:var(--radar-red-soft); }
.radar-post[data-phase="scanning"] { --post-color:var(--accent-strong);--post-line:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 12px 30px var(--shadow); }
.radar-post::before { content:"";position:absolute;inset:-6px;border:1px solid var(--accent);border-radius:19px;opacity:0;pointer-events:none; }
.radar-post[data-phase="scanning"]::before { animation:radar-capture .55s var(--ease) both; }
.radar-post-head { display:flex;align-items:center;gap:7px; }
.radar-avatar { display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;border-radius:50%;background:var(--post-soft);color:var(--post-color);font-size:8px;font-weight:650; }
.radar-author { min-width:0;display:flex;flex-direction:column;gap:2px; }
.radar-author strong { font-size:10px;font-weight:600;line-height:1.3; }
.radar-author small { font-size:8px;color:var(--muted); }
.radar-post p { margin:9px 0 10px;font-size:11px;line-height:1.65;color:var(--ink-2);min-height:36px; }
.radar-post-foot { display:flex;justify-content:space-between;align-items:center;gap:4px;padding-top:8px;border-top:1px solid var(--border);color:var(--post-color); }
.radar-post-label { font-size:10px;white-space:nowrap; }
.radar-post-score { font:500 19px var(--mono);line-height:1; }
.radar-post-score small { font:8px var(--font);margin-left:2px; }
.radar-dock { margin:0 12px;padding:15px 18px;background:var(--surface);border:1px solid var(--mint-line);border-radius:16px;box-shadow:0 12px 35px var(--shadow);min-height:116px; }
.radar-dock-top { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.radar-dock-title { display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--accent-strong); }
.radar-dock-title .icon { width:14px;height:14px; }
.radar-replay { display:none;align-items:center;gap:5px;padding:4px 0;border:0;background:transparent;color:var(--muted);font:10px var(--font);cursor:pointer; }
.radar-ready .radar-replay { display:flex; }
.radar-replay:hover { color:var(--accent-strong); }
.radar-replay .icon { width:12px;height:12px; }
.radar-dock p { margin:7px 0 10px;font-size:11px;line-height:1.7;color:var(--ink-2);min-height:38px; }
.radar-progress { display:flex;gap:4px; }
.radar-progress i { flex:1;height:3px;border-radius:2px;background:var(--border); }
.radar-progress i[data-phase="match"] { background:var(--accent); }
.radar-progress i[data-phase="skip"] { background:var(--radar-red); }
.radar-progress i[data-phase="scanning"] { background:var(--mint-line); }
.radar-caption { display:flex;justify-content:space-between;gap:8px;padding:0 13px;color:var(--muted);font-size:9px; }
.radar-legend { display:flex;gap:12px; }
.radar-legend span { display:flex;align-items:center;gap:4px; }
.radar-legend i { width:5px;height:5px;background:var(--accent);border-radius:50%; }
.radar-legend span:last-child i { background:var(--radar-red); }
.hero-radar[data-running="false"] *,.hero-radar[data-running="false"] *::before { animation-play-state:paused!important; }
@keyframes radar-capture { 0% { opacity:0;transform:scale(.97); } 30% { opacity:.8; } 100% { opacity:0;transform:scale(1.1); } }
@media(min-width:1600px) { .radar-stage { height:415px; }.radar-field { max-width:395px; }.radar-post p { font-size:12px; }.radar-author strong { font-size:11px; } }
@media(max-width:1100px) { .radar-stage { height:350px; }.radar-field { width:76%; }.radar-post { padding:10px; }.radar-post p { font-size:10px; }.radar-dock { padding:12px 14px; }.radar-heading { padding:0; }.radar-heading strong { font-size:9px;letter-spacing:1px; } }
@media(min-width:651px) and (max-width:850px) { .radar-stage { height:290px; }.radar-post { padding:9px;width:56%; }.radar-post p { font-size:9px;line-height:1.5;min-height:41px; }.radar-author small { display:none; }.radar-author strong { font-size:9px; }.radar-core { width:58px;height:58px;border-radius:18px; }.radar-core img { width:25px;height:25px; }.radar-core span { font-size:7px; }.radar-core::before { inset:-8px;border-radius:25px; }.radar-post-label { font-size:7px; }.radar-post-score { font-size:16px; }.radar-heading { flex-wrap:wrap;gap:6px; }.radar-dock,.radar-caption { margin:0;padding-left:10px;padding-right:10px; }.radar-caption { font-size:8px; } }
@media(max-width:650px) { .hero-art.hero-radar { height:auto;gap:14px;margin-top:44px; }.radar-stage { height:auto;padding:24px 0; }.radar-field { width:75%;max-width:340px; }.radar-heading { padding:0 5px; }.radar-post p { display:none; }.radar-post { padding:10px;width:53%; }.radar-post-head { gap:6px; }.radar-post-foot { margin-top:9px; }.radar-core { width:65px;height:65px;border-radius:20px; }.radar-core img { width:27px;height:27px; }.radar-core span { font-size:8px; }.radar-core::before { inset:-9px;border-radius:27px; }.radar-author small { font-size:7px; }.radar-author strong { font-size:9px; }.radar-dock { margin:0;min-height:122px; }.radar-dock p { min-height:38px; }.radar-caption { padding:0 2px;font-size:8px; }.radar-legend { gap:9px; } }
@media(max-width:360px) { .radar-post { padding:8px; }.radar-avatar { width:20px;height:20px;font-size:7px; }.radar-post-label { font-size:7px; }.radar-post-score { font-size:16px; }.radar-author small { display:none; }.radar-core { width:54px;height:54px;border-radius:16px; }.radar-core::before { inset:-7px;border-radius:23px; }.radar-core img { width:23px;height:23px; }.radar-core span { font-size:7px; } }
@media(min-width:651px) and (max-width:850px) { .radar-post p { display:none; }.radar-post-foot { margin-top:10px; }.radar-author strong { font-size:10px; } }
@media(max-width:850px) { .radar-post-label { font-size:9px; }.radar-replay { min-height:32px;flex-shrink:0; }.radar-dock-title { line-height:1.5; } }
@media(max-width:360px) { .radar-post-score small { display:none; } }

/* Giữ chữ gọn khi chuyển ngôn ngữ; dùng chung pause với app demo. */
.radar-post p { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.radar-toolbar { display:flex;align-items:center;gap:8px; }
.radar-pause { display:none;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);border-radius:50%;width:28px;height:28px;padding:5px; }
.radar-pause .icon { width:12px;height:12px; }
.radar-ready .radar-pause { display:flex; }
.radar-live,.radar-caption { color:var(--ink-2); }
body.motion_paused .hero-radar *,body.motion_paused .hero-radar *::before { animation-play-state:paused!important; }
@media(max-width:850px) { .radar-post p { display:none; } }
@media(min-width:651px) and (max-width:850px) { .radar-post-score small { display:none; } }