/*
Theme Name: Ovalpi HOLO
Theme URI: https://www.ovalpi.com/
Author: Ovalpi
Author URI: https://www.ovalpi.com/
Description: Theme WordPress phong cách dashboard sci-fi "HOLO" — lưới HUD 3 cột, viền cyan phát sáng, font JetBrains Mono, và chế độ bài viết thả nổi lơ lửng trong không gian. Hai giao diện HOLO/POSTER chuyển bằng một nút. Thu phóng mượt trên mọi màn hình bằng clamp() + rem.
Version: 1.31
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ovalpi-holo
Tags: blog, dark, one-column, two-columns, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* ====================================================================
   1. FONT (tự host — giấy phép OFL) — 2 TẦNG unicode-range:
   - Tầng DỰ PHÒNG (file gốc đầy đủ): chỉ được tải khi trang có ký tự
     NGOÀI bộ cắt (Cyrillic, Hy Lạp…) -> bình thường không tốn byte nào.
   - Tầng CHÍNH (-vi, khai SAU nên thắng khi trùng range): Latin + tiếng Việt
     + ký hiệu HOLO, ~43KB/độ-đậm thay vì ~94KB.
   Tái tạo bản -vi: packages/ui/scripts/subset-fonts.sh (sửa RANGES ở đó
   nếu UI dùng ký hiệu mới).
   ==================================================================== */
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-10FFFF}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-10FFFF}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-10FFFF}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Regular-vi.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-024F,U+0300-036F,U+1E00-1EFF,U+2013-2027,U+20AB,U+2153,U+2192,U+2194,U+21BB,U+2212,U+2248,U+2264,U+2265,U+2315,U+2318,U+25A4,U+25B4,U+25B8,U+25C2,U+25CF,U+25E2,U+25E7,U+2600,U+263E,U+2665,U+266A,U+266B,U+2726,U+27F3,U+FF0B}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Medium-vi.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-024F,U+0300-036F,U+1E00-1EFF,U+2013-2027,U+20AB,U+2153,U+2192,U+2194,U+21BB,U+2212,U+2248,U+2264,U+2265,U+2315,U+2318,U+25A4,U+25B4,U+25B8,U+25C2,U+25CF,U+25E2,U+25E7,U+2600,U+263E,U+2665,U+266A,U+266B,U+2726,U+27F3,U+FF0B}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Bold-vi.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-024F,U+0300-036F,U+1E00-1EFF,U+2013-2027,U+20AB,U+2153,U+2192,U+2194,U+21BB,U+2212,U+2248,U+2264,U+2265,U+2315,U+2318,U+25A4,U+25B4,U+25B8,U+25C2,U+25CF,U+25E2,U+25E7,U+2600,U+263E,U+2665,U+266A,U+266B,U+2726,U+27F3,U+FF0B}

/* ====================================================================
   2. BIẾN & HỆ THỐNG THU PHÓNG LINH HOẠT
   - Font gốc co giãn mượt theo bề rộng màn hình (không nhảy bậc).
   - Mọi kích thước dùng rem hoặc clamp() => tự thích ứng mọi thiết bị.
   ==================================================================== */
:root{
  /* màu holo */
  --bg:#06121d; --panel:rgba(12,30,43,.55); --panel-border:rgba(126,221,240,.32);
  --line:rgba(126,221,240,.12); --accent:#7eddf0; --accent-soft:#9feeff;
  --text:#d8f2f9; --muted:#6ba0b4; --gold:#ffd27a; --green:#7be0a8; --pink:#ff8fb3;
  --glow:0 0 .7rem rgba(126,221,240,.8);
  --strong:#fff;                          /* chữ nhấn (sáng nhất) — đổi theo sáng/tối */
  --fx-dot:#9feeff; --fx-line:#7eddf0;   /* màu hạt nền (canvas) */
  --font:"JetBrains Mono","Consolas","DejaVu Sans Mono",monospace;

  /* nhịp giãn cách linh hoạt (nén để gọn trong 1 màn như dashboard) */
  --gap:clamp(.45rem,1vw,.7rem);
  --pad:clamp(.45rem,1.4vw,.75rem);
  --col-side-l:clamp(12.5rem,16vw,16rem);
  --col-side-r:clamp(13rem,17vw,17.5rem);
  --maxw:min(1400px,92vw);   /* hẹp lại (1560->1400) -> tổng thể GỌN, bớt "bè hai bên" trên màn rộng 100% */
  --ui-zoom:.85;        /* khớp bề rộng dashboard (.wrap max-width:1500px) */
  --wrap-pad-x:clamp(.6rem,1.6vw,1rem);   /* padding ngang khung -> dùng chung dashboard & header trang đọc (khớp px tuyệt đối) */
}

/* font gốc co giãn mượt: ~12px ở điện thoại -> ~16px ở màn lớn */
html{font-size:clamp(12px,.34vw + 10.6px,16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#04101a;scrollbar-gutter:stable}   /* chừa sẵn chỗ thanh cuộn -> trang dài (bài đọc) ↔ ngắn (dashboard) KHÔNG nhảy lề ngang */
body{
  color:var(--text);font-family:var(--font);
  font-size:.86rem;line-height:1.55;min-height:100dvh;position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(20,86,112,.30), transparent 42%),
    radial-gradient(90% 70% at 88% 12%, rgba(94,198,218,.14), transparent 46%),
    radial-gradient(120% 90% at 50% 125%, rgba(126,221,240,.18), transparent 55%),
    #04101a;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s,text-shadow .2s}
a:hover{color:var(--strong)}
::selection{background:rgba(126,221,240,.35);color:var(--strong)}

/* ===== NỀN HOLOGRAM NHIỀU LỚP (chiều sâu kiểu phòng lab) ===== */
/* lưới phối cảnh mờ dần về xa */
.holo-bggrid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(94,198,218,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(94,198,218,.05) 1px,transparent 1px);
  background-size:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,rgba(0,0,0,.25));
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,rgba(0,0,0,.25))}
/* lớp chiều sâu: quầng sáng + phản chiếu sàn + tối góc (vignette) */
.holo-depth{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 40% at 50% 108%, rgba(126,221,240,.22), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(2,8,14,.65) 100%)}
/* canvas hạt sáng / bụi dữ liệu trôi (JS vẽ) */
.holo-fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.holo-orb{position:fixed;border:1px solid rgba(94,198,218,.15);border-radius:50%;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 3rem rgba(94,198,218,.06)}
/* CHẾ ĐỘ ĐO (?clean): tắt lưới/nền/quầng + nền đen đặc + panel viền rõ -> đo khung TUYỆT ĐỐI (hết nhiễu 1-2px). */
html.measure{background:#04070c}
html.measure .holo-bggrid,html.measure .holo-depth,html.measure .holo-orb{display:none!important}
html.measure .holo-panel,html.measure .holo-topframe{backdrop-filter:none;background:#0a1420;border-color:#2fd0e8!important}

/* inset ngang dùng CHUNG cho header/statusbar/grid/footer -> khung đồng bộ mọi chế độ xem */
.holo-wrap{position:relative;z-index:1;zoom:var(--ui-zoom);max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--wrap-pad-x) var(--gap)}  /* +hở trên: khung KHÔNG dính viền trên trình duyệt */
/* iPhone dọc / desktop thu hẹp (≤680): TRANG RỘNG THÊM — lề mỗi bên ~1/2 hiện tại.
   Lề chủ yếu do zoom .85 (thu nhỏ dashboard -> 15% lề). Tăng zoom .85->.91 + maxw 100vw -> lề ~34px còn ~17px. */
@media (max-width:680px){
  :root{--ui-zoom:.91;--maxw:100vw;--wrap-pad-x:clamp(.3rem,.8vw,.5rem)}
}

/* ====================================================================
   3. THANH TIÊU ĐỀ + TRẠNG THÁI
   ==================================================================== */
.holo-topframe{position:relative;border:1px solid var(--panel-border);background:rgba(6,18,29,.78)}
/* ===== TRANG ĐỌC: HEADER Y HỆT DASHBOARD, chỉ THÂN bài đổi =====
   Ràng buộc: thân bài + video phải ở zoom:1 (iOS Safari tính sai iframe khi có tổ tiên `zoom`).
   Dashboard lại ở zoom:.85 -> để header KHỚP TUYỆT ĐỐI, tách riêng:
     • .holo-wrap--read = thùng chứa zoom:1, FULL bề rộng (chuẩn cho video).
     • .holo-readhead   = BẢN SAO khung dashboard (zoom:.85 + max-width + padding) -> header render trùng khít.
     • thân bài (article/.holo-content) = zoom:1 (kế thừa), cột đọc gọn, canh giữa khớp tâm header. */
.holo-headwrap{display:contents}                                 /* DASHBOARD: vô hiệu -> header là con trực tiếp .holo-wrap như cũ */
.holo-wrap--read{max-width:none;padding:0}                       /* thùng zoom:1 full-width (không bó, không padding) */
.holo-wrap--read > .holo-headwrap{                               /* TRANG ĐỌC: = bản sao khung dashboard RIÊNG cho header */
  display:block;
  zoom:var(--ui-zoom);                                            /* cùng scale dashboard -> logo/chữ/cao độ y hệt */
  /* TRẦN bề rộng: màn HẸP (≤~1059px) -> = --maxw = đúng dashboard (KHÔNG nhảy lề khi vào/ra, giữ thành quả 45%);
     màn RỘNG -> chặn ở 900px (×.85 ≈ 765px render ≈ cột bài 760) -> header & bài CĂN BẰNG, hết "chìa rộng 2 bên". */
  max-width:min(var(--maxw), 900px); margin:0 auto;
  padding:var(--gap) var(--wrap-pad-x) 0;                         /* hở trên + padding ngang giống dashboard */
}
.holo-wrap--read > article, .holo-wrap--read > .holo-content{
  /* cột đọc: hẹp cho dễ đọc, NHƯNG không vượt bề rộng RENDER của header ((maxw-2pad)×zoom) -> không "bè" ra ngoài header */
  max-width:min(760px, calc((var(--maxw) - 2 * var(--wrap-pad-x)) * var(--ui-zoom)));
  margin:1.4rem auto 3rem; padding:0 clamp(.4rem,2vw,1rem);
}
/* TẢI NHẸ: media NGOÀI màn -> trình duyệt BỎ QUA dựng/vẽ tới khi cuộn đến (đỡ việc lúc mở bài, mượt hơn).
   contain-intrinsic-size giữ chỗ -> cuộn không nhảy. */
.holo-content figure,.holo-content .holo-video{content-visibility:auto;contain-intrinsic-size:auto 320px}
/* ===== HEADER TRANG ĐỌC: GIỮ NGUYÊN 1 KIỂU ở MỌI CỠ — logo TRÁI, nhóm chữ PHẢI (canh giữa dọc), statusbar DƯỚI.
   Chỉ THU HẸP theo khung, KHÔNG reflow như dashboard (không lưới 2-hàng, không cột, không canh giữa, không đổi
   sang icon, không ẩn statusbar). Đặt NGOÀI media-query: `.holo-wrap--read .x` đủ ưu tiên thắng mọi rule responsive. ===== */
.holo-wrap--read .holo-top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem .7rem;text-align:initial}
.holo-wrap--read .holo-brandbox{align-self:center;margin:0}
.holo-wrap--read .holo-logo--full{display:block;height:clamp(1.7rem,3.2vw,2.4rem);width:auto}  /* LUÔN wordmark, co theo khung */
.holo-wrap--read .holo-logo--mark{display:none}                                                 /* không đổi sang icon khi hẹp */
.holo-wrap--read .holo-top-meta{flex-direction:row;align-items:center;justify-content:flex-end;gap:.5rem;width:auto}
.holo-wrap--read .holo-top-meta .holo-btn{font-size:.72rem;padding:.32rem .6rem}
/* statusbar trang đọc: desktop/tablet -> TỰ XUỐNG DÒNG khi hẹp (không cắt "OVALPI-S // HCMC", giữ kiểu HUD như ảnh).
   iPhone (≤680) -> ẨN hẳn: thông tin chuyên mục/đăng/đọc đã lặp ở dòng meta dưới tiêu đề -> gọn, hết chật. */
.holo-wrap--read .holo-statusbar{flex-wrap:wrap;overflow:visible;row-gap:.3rem}
.holo-wrap--read .holo-statusbar>span{flex:none;white-space:normal}
/* iPhone (≤680): HIỆN ĐỦ thông tin như iPad (BÀI VIẾT · CHUYÊN MỤC · ĐĂNG · ĐỌC · OVALPI-S//HCMC).
   Nhờ flex-wrap ở trên -> dài thì TỰ XUỐNG DÒNG, KHÔNG bị cắt. Thu nhỏ chữ + giãn dòng cho gọn. */
@media (max-width:680px){
  .holo-wrap--read .holo-statusbar{font-size:.6rem;gap:.45rem .8rem;row-gap:.35rem}
}
.holo-topframe::before,.holo-topframe::after{content:"";position:absolute;width:.8rem;height:.8rem;pointer-events:none;z-index:3}
.holo-topframe::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.holo-topframe::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
.holo-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--gap);
  padding:calc(clamp(.6rem,1.4vw,.9rem) + 1.5mm) clamp(.55rem,1.4vw,.8rem) clamp(.6rem,1.4vw,.9rem);  /* +1.5mm trên: cụm logo dịch xuống, hở thêm với viền trên */
  border-bottom:1px solid var(--line)}
.holo-brandbox{flex:none}
.holo-brand{display:inline-flex;align-items:center;line-height:0;padding:.15rem 0}
.holo-brand .logo-dark,.holo-brand .logo-light{display:inline-flex;align-items:center;line-height:0}
.holo-brand .logo-light{display:none}                 /* mặc định nền tối -> logo cyan */
html[data-mode="light"] .holo-brand .logo-dark{display:none}
html[data-mode="light"] .holo-brand .logo-light{display:inline-flex}   /* nền sáng -> logo navy gốc */
.holo-logo{display:block;width:auto;height:clamp(1.75rem,3.2vw,2.6rem);max-width:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(126,221,240,.4))}  /* overflow:visible -> nét khung/chấm sát mép & quầng glow KHÔNG bị cắt (hết "lém cạnh phải") */
.holo-logo--mark{display:none;height:clamp(2rem,5vw,2.5rem);width:auto;object-fit:contain}
.holo-brand .logo-light .holo-logo{filter:none}       /* logo navy: bỏ glow cyan */
html[data-skin="poster"] .holo-logo{filter:none}
.holo-tagline{display:block;font-size:.7rem;letter-spacing:.2em;color:var(--accent);margin-top:.3rem}
.holo-nav{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.8vw,1.4rem);align-items:center;justify-content:center}
.holo-nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
.holo-nav a:hover{color:var(--strong);text-shadow:var(--glow)}
.holo-nav .current-menu-item>a{color:var(--strong);text-shadow:var(--glow)}
.holo-top-meta{flex:none;color:var(--muted);letter-spacing:.14em;font-size:.7rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:flex-end}
.holo-statusbar #holo-clock{color:var(--accent-soft)}
/* thanh điều hướng riêng (giống dashboard: brand+controls trên, menu thành 1 dải) */
.holo-navbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem clamp(.8rem,2vw,1.2rem);border-bottom:1px solid var(--line);background:rgba(6,18,29,.4)}
html[data-mode="light"] .holo-navbar{background:rgba(255,255,255,.5)}

.holo-statusbar{display:flex;flex-wrap:wrap;gap:clamp(.6rem,2vw,1.1rem);
  padding:.35rem clamp(.55rem,1.4vw,.8rem);font-size:.66rem;letter-spacing:.08em;
  color:var(--muted)}
.holo-statusbar b{color:var(--accent-soft);font-weight:500}
.holo-statusbar .ok{color:var(--green)}
/* iPad/màn hẹp: giữ statusbar 1 HÀNG (không để HCMC // VN rớt xuống hàng 2) — thu gap+font, cuộn ngang nếu quá hẹp */
@media (max-width:860px){
  .holo-statusbar{flex-wrap:nowrap;gap:clamp(.4rem,1.3vw,.7rem);font-size:.62rem;overflow-x:auto;scrollbar-width:none}
  .holo-statusbar::-webkit-scrollbar{display:none}
  .holo-statusbar>span{white-space:nowrap;flex:none}
}

/* ====================================================================
   4. LƯỚI DASHBOARD
   ==================================================================== */
.holo-grid{display:grid;grid-template-columns:var(--col-side-l) minmax(0,1fr) var(--col-side-r);
  gap:var(--gap);padding:var(--gap) 0 0}
.holo-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

.holo-panel{position:relative;background:var(--panel);border:1px solid var(--panel-border)}
  /* PERF: bỏ backdrop-filter:blur (gây giật khi cuộn trên iOS vì làm mờ nền sau ~8 panel mỗi frame).
     Bù bằng nền --panel đục hơn (xem :root) để panel vẫn rõ. */
.holo-panel::before,.holo-panel::after{content:"";position:absolute;width:.8rem;height:.8rem}
.holo-panel::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.holo-panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
/* KHUNG SÁNG LÊN khi rê chuột tới (HUD): viền hoá accent + quầng cyan + ngoặc góc nở & phát sáng.
   Chỉ trên thiết bị có chuột thật (hover:hover) -> tránh kẹt glow trên cảm ứng. */
@media (hover:hover){
  .holo-panel,.holo-topframe{transition:border-color .2s ease,box-shadow .2s ease}
  .holo-panel::before,.holo-panel::after,.holo-topframe::before,.holo-topframe::after{transition:width .2s ease,height .2s ease,filter .2s ease}
  .holo-panel:hover,.holo-topframe:hover{border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(126,221,240,.22),0 0 24px -4px rgba(126,221,240,.42)}
  .holo-panel:hover::before,.holo-panel:hover::after,
  .holo-topframe:hover::before,.holo-topframe:hover::after{width:1.1rem;height:1.1rem;filter:drop-shadow(0 0 4px var(--accent))}
}
.holo-ph{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding:.55rem .8rem;border-bottom:1px solid var(--panel-border);
  display:flex;justify-content:space-between;gap:.6rem;text-shadow:var(--glow);font-weight:600}
.holo-ph .no{display:none;color:var(--gold);margin-right:.4rem}
.holo-ph .live{color:var(--accent-soft);font-weight:500}

/* lõi xoay */
.holo-core{position:relative;width:clamp(6rem,9vw,7.2rem);aspect-ratio:1;margin:.9rem auto .3rem}
.holo-core div{position:absolute;border-radius:50%}
.holo-core .r1{inset:0;border:2px dashed var(--accent);animation:holo-sp 14s linear infinite;opacity:.85}
.holo-core .r2{inset:13%;border:1px solid var(--accent);opacity:.5;animation:holo-sp 9s linear infinite reverse}
.holo-core .r3{inset:24%;border:3px solid var(--accent);border-left-color:transparent!important;border-right-color:transparent!important;animation:holo-sp 6s linear infinite}
.holo-core .cc{inset:30%;background:radial-gradient(circle,rgba(13,30,42,.7),transparent 72%);border:none;
  box-shadow:0 0 1.2rem rgba(126,221,240,.3)}
/* lõi: vòng tròn đỏ to ở tâm + chấm đỏ nhỏ bay quanh như vệ tinh (port từ dashboard) */
.holo-core .core-dot{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;
  background:#e50914;box-shadow:0 0 .9rem rgba(229,9,20,.85),inset 0 0 .4rem rgba(255,255,255,.25)}
.holo-core .core-orbit{position:absolute;inset:-9%;animation:holo-sp 5s linear infinite}
.holo-core .core-sat{position:absolute;left:50%;top:-2%;width:15%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:#e50914;box-shadow:0 0 .6rem rgba(229,9,20,.95)}
@keyframes holo-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.holo-core .core-orbit{animation:none}}
.holo-core-label{text-align:center;letter-spacing:.14em;color:var(--accent-soft);font-size:.66rem;padding:1.3rem 0 .8rem}

/* ===== Reticle "JARVIS": vòng nét đứt quay + cung sáng tỏa ra (port từ dashboard) =====
   Căn giữa bằng width/height + margin nửa (ổn định, luôn đồng tâm với lõi/gauge). */
.holo-jring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  border:1px dashed var(--accent);opacity:.45;animation:holo-sp var(--rspin,70s) linear infinite}
.holo-jring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--accent);border-left-color:var(--accent);box-shadow:0 0 6px -1px var(--accent)}
.holo-core .holo-jring{--rspin:48s;width:106%;height:106%;margin:-53% 0 0 -53%}
.holo-gauge .holo-jring{--rspin:40s;width:108%;height:108%;margin:-54% 0 0 -54%;opacity:.5;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.holo-jring{animation:none}}

.holo-stat{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem .8rem;font-size:.72rem;border-bottom:1px solid var(--line)}
.holo-stat:last-child{border-bottom:none}
.holo-stat b{color:var(--strong);font-weight:500}

/* bộ đếm */
.holo-counters{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;padding:.5rem .4rem;gap:.3rem;border-bottom:1px solid var(--line)}
.holo-counters:last-child{border-bottom:none}   /* counters là phần tử cuối panel -> bỏ đường thừa sát mép dưới (rõ ở skin poster bo góc) */
.holo-counters .bn{font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.08em;color:var(--strong);text-shadow:var(--glow)}
.holo-counters .bl{font-size:.58rem;letter-spacing:.08em;color:var(--muted);margin-top:.2rem;text-transform:uppercase}

/* ====================================================================
   5. LUỒNG BÀI VIẾT (list + space)
   ==================================================================== */
/* KHÔNG còn flex:1: feed = hộp tỉ lệ 1.68 tự nhiên (không giãn cao gây hở). Cột giữa cao tự nhiên. */
.holo-feed .holo-ph{align-items:center;flex-wrap:nowrap}
.holo-feed .holo-ph .vbtn,.holo-feed .holo-ph .live{line-height:1.16}   /* glyph ▤/▸ không kéo cao header -> đồng bộ với khung khác */
.holo-feed .holo-ph>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holo-feed .holo-ph>span:last-child{flex:none;white-space:nowrap}
.holo-ph .vbtn{cursor:pointer;color:var(--gold);letter-spacing:.06em;background:none;border:none;padding:0;margin:0;line-height:inherit;font:inherit;font-size:.72rem;text-transform:uppercase}
.holo-ph .vbtn:hover{color:var(--strong)}

/* Khung "Luồng bài viết" = TỈ LỆ ĐẸP ~1.68 (gần vàng): CAO suy từ RỘNG -> hộp cân đối. list & space CÙNG tỉ lệ -> đổi qua lại không nhảy. */
.holo-list{aspect-ratio:1.86;max-height:60vh;overflow-y:auto}
.holo-row{display:flex;gap:.6rem;align-items:baseline;padding:.45rem .8rem;border-bottom:1px solid var(--line)}
.holo-row:hover{background:rgba(126,221,240,.07)}
.holo-row .hex{flex:none;width:.5rem;height:.5rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.holo-row .src{flex:none;width:clamp(5rem,8vw,7rem);font-size:.66rem;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.holo-row .t{flex:1;min-width:0;line-height:1.4;color:var(--text)}
.holo-row .ago{flex:none;color:var(--muted);font-size:.66rem;white-space:nowrap}

/* ===== KHÔNG GIAN: LÕI = CHUYÊN MỤC, VỆ TINH = BÀI VIẾT (port từ dashboard) ===== */
.holo-space{position:relative;aspect-ratio:1.86;max-height:60vh;overflow:hidden;display:none;isolation:isolate;
  background:radial-gradient(ellipse at 50% 42%,rgba(126,221,240,.08),transparent 70%)}
.holo-space.on{display:block}
.holo-list.off{display:none}
.holo-net{position:absolute;inset:0;z-index:0;pointer-events:none}

/* lõi chuyên mục — điểm 0px, .orb canh giữa (transform rẻ → mượt) */
.fl-core{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.fl-core .orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(8,22,32,.72);border:1px solid var(--c,var(--panel-border));box-shadow:0 0 16px -3px var(--c,transparent);cursor:pointer;overflow:hidden;transition:box-shadow .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}  /* manipulation: tắt zoom double-tap iOS -> mỗi chạm là 1 click sạch (cần cho 2-chạm) */
.fl-core .orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}
.fl-core .orb .fb{color:var(--strong);font-weight:700}
.fl-core .orb::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed var(--c,var(--accent));opacity:.3}
.fl-core .nm{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:.5px;
  color:var(--c,var(--accent-soft));text-shadow:0 0 6px rgba(0,0,0,.8);pointer-events:none}
.fl-core .badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--c,var(--accent));
  color:#04121b;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px var(--c,transparent)}
.fl-core.dim .orb{opacity:.4;filter:grayscale(.5)}
.fl-core .orb:hover,.fl-core .orb.hot{box-shadow:0 0 34px var(--c,var(--accent)),0 0 0 3px var(--c,var(--accent)),inset 0 0 16px -4px var(--c,var(--accent));border-width:2px;transform:translate(-50%,-50%) scale(1.32);z-index:8}
.fl-core .orb.hot::before{animation:holo-sp 14s linear infinite}
.fl-core .orb.hot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--c,var(--accent));opacity:.8;animation:holo-hotring 1.1s ease-out infinite}
@keyframes holo-hotring{0%{transform:scale(.85);opacity:.85}100%{transform:scale(1.9);opacity:0}}

/* vệ tinh = bài viết quay quanh lõi chuyên mục */
.fl-sat{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--c,var(--accent));
  box-shadow:0 0 7px var(--c,var(--accent));cursor:pointer;will-change:transform;transition:width .14s,height .14s,box-shadow .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* vùng bấm vô hình rộng hơn để dễ trúng "bài viết" (chấm nhỏ đang quay) */
.fl-sat::before{content:"";position:absolute;inset:-11px;border-radius:50%}
.fl-sat::after{content:"";position:absolute;inset:24%;border-radius:50%;background:rgba(255,255,255,.85)}
.fl-sat:hover{box-shadow:0 0 16px var(--c,var(--accent)),0 0 0 4px var(--c,var(--accent));z-index:8}
/* vệ tinh của cụm đang trỏ: to + sáng + nổi lên trên cho dễ bấm */
.fl-sat-big{box-shadow:0 0 18px var(--c,var(--accent)),0 0 0 2px var(--c,var(--accent));z-index:7}
/* hành tinh đang hover luôn nổi cao nhất (kể cả khi đã to) -> không nháy chồng lấp */
.fl-sat-big:hover,.fl-sat:hover{z-index:12}
/* cụm đang trỏ: lõi nổi trên các cụm khác */
.fl-core.active-core{z-index:9}
.fl-sat.born{animation:holo-satpop .6s cubic-bezier(.18,1.6,.4,1) both}
@keyframes holo-satpop{0%{transform:scale(0)}65%{transform:scale(1.7)}100%{transform:scale(1)}}
.pulse{position:absolute;left:0;top:0;border-radius:50%;border:1px solid var(--c,var(--accent));pointer-events:none;animation:holo-pulse 1s ease-out both}
@keyframes holo-pulse{0%{transform:translate(-50%,-50%) scale(.3);opacity:.9}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}}

/* nhãn "bài mới" bay lên rồi tan */
.spawn-chip{position:absolute;z-index:8;max-width:11rem;padding:3px 7px;font-size:9.5px;line-height:1.3;background:rgba(6,18,29,.94);
  border:1px solid var(--c,var(--panel-border));color:var(--text);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:translate(-50%,-100%);animation:holo-chip 3.6s ease-out both}
.spawn-chip b{color:var(--c,var(--accent-soft))}
@keyframes holo-chip{0%{opacity:0;transform:translate(-50%,-70%)}12%{opacity:1;transform:translate(-50%,-110%)}80%{opacity:1;transform:translate(-50%,-150%)}100%{opacity:0;transform:translate(-50%,-180%)}}

.holo-tip{position:absolute;z-index:9;max-width:min(20rem,80vw);padding:.6rem .8rem;font-size:.8rem;line-height:1.5;
  background:rgba(6,18,29,.96);border:1px solid var(--panel-border);color:var(--text);pointer-events:none}
.holo-tip b{display:block;font-size:.62rem;letter-spacing:.08em;margin-bottom:.2rem}
.holo-tip .li{display:block;margin-top:.2rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holo-tip .ttl{display:block;font-size:.98rem;line-height:1.35;color:var(--strong);font-weight:500;margin-top:.15rem}
.holo-tip::before,.holo-tip::after{content:"";position:absolute;width:.7rem;height:.7rem;pointer-events:none}
.holo-tip::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.holo-tip::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
html[data-skin="poster"] .holo-tip::before,html[data-skin="poster"] .holo-tip::after{display:none}
@media (prefers-reduced-motion:reduce){.fl-sat.born,.pulse,.spawn-chip,.fl-core .orb.hot::before,.fl-core .orb.hot::after{animation:none}.spawn-chip{display:none}}

/* từ khóa / tag */
.holo-kw{padding:.5rem .55rem .65rem}
.holo-kw a,.holo-kw .tag{display:inline-block;margin:.2rem;padding:.2rem .55rem;border:1px solid var(--panel-border);
  color:var(--accent-soft);font-size:.7rem!important;text-transform:none}
.holo-kw a:hover{border-color:var(--accent);color:var(--strong);text-shadow:var(--glow)}

/* gauge + cường độ + khu vực */
.holo-gauge{position:relative;width:clamp(4rem,7vw,5rem);aspect-ratio:1;border-radius:50%;margin:.9rem auto .8rem;display:flex;align-items:center;justify-content:center}
.holo-gauge::before{content:"";position:absolute;inset:.5rem;border-radius:50%;background:var(--bg)}
.holo-gauge b{position:relative;font-size:.95rem;color:var(--strong)}
.holo-gauge-sub{text-align:center;font-size:.64rem;letter-spacing:.06em;color:var(--muted);margin-top:1.3rem;padding-bottom:.7rem}
/* NHIỀU chuyên mục -> cuộn gọn trong khung, KHÔNG kéo cột phải cao ép cả trang. Ít (≤~8) -> dưới ngưỡng, hiện hết không cuộn. */
.holo-mtscroll{overflow:visible}   /* hiện HẾT chuyên mục, KHÔNG thanh cuộn */
/* #4 Thẻ phổ biến & #7 Phân bố = CÙNG min-height -> đáy #6 Cường độ khớp đáy feed (vì #6 flex:1, chênh = cao#4 − cao#7). */
.holo-botpanel{min-height:8.6rem}
/* #6 Cường độ = flex:1 -> KHUNG giãn cao (như cột trái "Hệ thống"): thanh GÓI SÁT TRÊN, phần dưới trống, #7 Phân bố xuống ĐÁY -> 3 cột khóa đáy tương đối, hết "trống bên phải". KHÔNG dàn đều thanh. */
.holo-mt{display:grid;grid-template-columns:clamp(5rem,8vw,7rem) 1fr 1.8rem;gap:.5rem;align-items:center;padding:.28rem .8rem}
.holo-mt .nm{font-size:.64rem;color:var(--accent-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.holo-mt .bar{height:.45rem;background:rgba(8,22,32,.7);border:1px solid var(--line);overflow:hidden}
.holo-mt .bar i{display:block;height:100%}
.holo-mt .v{font-size:.7rem;text-align:right;color:var(--strong)}
.holo-split{display:flex;height:.65rem;margin:.5rem .8rem .25rem;border:1px solid var(--panel-border);overflow:hidden}
.holo-split-l{display:flex;justify-content:space-between;padding:0 .8rem .7rem;font-size:.64rem;letter-spacing:.04em}

/* khối toàn chiều rộng (công cụ / nổi bật) */
.holo-fullrow{padding:var(--gap) 0 0}   /* hở trên = --gap: ĐỀU với mọi khe khác (như bản cũ) */
/* Bài viết nổi bật = 1 HÀNG NGANG gọn: cả trang vừa 1 màn desktop (không phải cuộn xuống mới thấy cuối trang).
   Desktop rộng: 8 thẻ chia đều 1fr, lấp đầy bề ngang, KHÔNG cuộn. Màn hẹp: mỗi thẻ giữ bề rộng đọc được -> CUỘN NGANG (vuốt). */
/* Bài viết nổi bật: các thẻ chia ĐỀU LẤP ĐẦY khung trên ĐÚNG 1 HÀNG (grid cột 1fr) -> KHÔNG wrap, KHÔNG thanh cuộn.
   Số thẻ do index.astro cap (đủ lấp khung, không quá mảnh). Mobile (≤900px): xuống hàng cho dễ đọc (trang cuộn dọc bình thường). */
/* 2 HÀNG thẻ (cột chảy dọc lấp 2 hàng) -> khung nổi bật cao hơn, cân đáy trang. */
.holo-cards{display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.3rem .9rem;padding:.3rem .5rem .45rem}
@media (max-width:900px){ .holo-cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr} }
.holo-card{display:flex;gap:.5rem;align-items:center;padding:.38rem .3rem;border-bottom:1px solid var(--line);min-width:0}
.holo-card .thumb{flex:none;width:clamp(2.2rem,4vw,2.8rem);aspect-ratio:1;border-radius:4px;background:#0d1822;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid var(--line)}
.holo-card .thumb img{width:100%;height:100%;object-fit:cover}
.holo-card .inf{flex:1;min-width:0}
.holo-card .nm{color:var(--strong);font-size:.8rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holo-card .ds{color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Màn hẹp (iPhone/iPad dọc): đừng dồn 8 thẻ tí xíu -> mỗi thẻ tối thiểu 13rem, hàng ngang CUỘN được (vuốt). */

/* ====================================================================
   6. NỘI DUNG BÀI / TRANG ĐƠN
   ==================================================================== */
.holo-article{padding:clamp(1rem,3vw,2rem)}
.holo-article .entry-title{font-size:clamp(1.4rem,3.4vw,2.2rem);color:var(--strong);letter-spacing:.02em;line-height:1.25;margin-bottom:.8rem}
.holo-meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem}
.holo-meta a{color:var(--accent-soft)}
.holo-content{font-size:.95rem;line-height:1.85}
.holo-content>*{margin-bottom:1.1rem}
.holo-content h1,.holo-content h2,.holo-content h3,.holo-content h4{color:var(--strong);letter-spacing:.01em;margin:1.6rem 0 .7rem;line-height:1.3}
.holo-content h2{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.holo-content h3{font-size:clamp(1.05rem,2vw,1.25rem)}
.holo-content a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(126,221,240,.4)}
.holo-content a:hover{color:var(--strong)}
.holo-content ul,.holo-content ol{margin-left:1.4rem}
.holo-content li{margin-bottom:.4rem}
/* ẢNH/VIDEO trong bài đọc: LUÔN co theo bề rộng khung đọc -> không tràn khi thu/phóng (zoom .91 của .holo-wrap, zoom trình duyệt, hay reader thu nhỏ mobile) */
.holo-content img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;display:block}
.holo-content figure{margin:1.2rem 0}
.holo-content figure img{margin:0 auto;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.holo-content figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.5rem;font-style:italic}
/* VIDEO: bọc tỉ lệ 16:9 bằng aspect-ratio + chiếm 100% bề rộng -> tự co giãn ĐÚNG TỈ LỆ khi zoom,
   không dùng width/height px cố định (px cố định sẽ tràn/lệch khi .holo-wrap zoom). */
/* KHUNG VIDEO: viền box-shadow (KHÔNG border -> iframe = đúng tỉ lệ khung, không dải letterbox mảnh).
   TỈ LỆ đổi linh hoạt qua biến --ar (mặc định 16/9). YouTube /embed/ luôn là player 16:9 nên video
   ngang vào thẳng; muốn KHỚP tỉ lệ thật (4:3, dọc 9:16, vuông, điện ảnh 21:9) thì thêm class .ar-*. */
/* KHUNG VIDEO: nền ĐEN + bo góc 10px ngay SAU iframe (cùng kích thước & bán kính). iframe cũng tự bo 10px.
   -> 1 bán kính khớp (góc sạch), và mép iframe ở vị trí LẺ (fractional) khi AA lộ ra thì lộ MÀU ĐEN
   của nền này (lẫn vào) thay vì nền trang -> không thấy "lẹm" cạnh trái/đáy. KHÔNG overflow/translateZ
   (tránh lệch clip & AA của lớp GPU). */
.holo-content .holo-video{position:relative;width:100%;margin:1.2rem auto;
  border-radius:10px;overflow:hidden;background:#000;box-shadow:0 9px 26px rgba(0,0,0,.45)}
  /* KHÔNG aspect-ratio ở KHUNG: để iframe (aspect-ratio) tự định cao, KHUNG ÔM SÁT iframe -> khung=iframe,
     hết hở "lẹm" mép (trước đây khung & iframe mỗi cái 1 aspect-ratio -> lệch ~1px lộ nền #000). */
.holo-content .holo-video.ar-4x3{--ar:4/3}
.holo-content .holo-video.ar-1x1{--ar:1/1;max-width:560px}
.holo-content .holo-video.ar-21x9{--ar:21/9}
.holo-content .holo-video.ar-9x16{--ar:9/16;width:288px;max-width:100%}   /* video DỌC/Shorts: bề rộng SỐ NGUYÊN 288 (cao 512) -> 2 mép cùng mức sub-pixel, render đối xứng (hết lẹm); canh giữa qua margin auto */
.holo-content .holo-video>video,.holo-content .holo-video>iframe{
  display:block;width:100%;height:auto;aspect-ratio:var(--ar,16/9);border:0;
  /* FIX iOS: iframe TỰ CAO theo aspect-ratio (KHÔNG dùng height:100% — iOS bỏ qua % chiều cao trên
     iframe trong khung aspect-ratio -> iframe co lại lộ khoảng trống phải/dưới khi phát). width:100%
     (block, iOS tôn trọng) + height:auto + aspect-ratio -> lấp đầy đúng mọi thiết bị. */}
@supports not (aspect-ratio:1/1){ .holo-content .holo-video{height:0;padding-bottom:56.25%} }   /* fallback trình duyệt cũ (mặc định 16:9) */
.holo-content .holo-video figcaption,.holo-content .vid-cap{font-size:.82rem;color:var(--muted);text-align:center;margin:.45rem 0 1.1rem;font-style:italic}
/* FACADE video (lite-youtube): hiện ảnh thumbnail (img phóng đúng trên iOS, không như iframe) + nút play;
   chỉ tải iframe YouTube khi bấm -> hết lỗi iframe iOS, lại nhẹ hơn (không tải player tới khi cần). */
.holo-content .holo-video>.holo-video-play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;display:block;background:#000;border-radius:10px;overflow:hidden}
.holo-content .holo-video>.holo-video-play>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.holo-content .holo-video>.holo-video-play>.holo-video-ico{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);background:rgba(12,22,30,.6);border:1px solid var(--line,rgba(126,221,240,.45));border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.holo-content .holo-video>.holo-video-play:hover>.holo-video-ico{background:#F20A18}
.holo-content .holo-video>.holo-video-play>.holo-video-ico::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
/* LIGHTBOX phát video toàn màn hình (gắn vào body, NGOÀI vùng cuộn reader -> iOS render iframe đúng). */
.holo-vlb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:4vmin;background:rgba(2,8,14,.93)}
.holo-vlb-box{position:relative;width:min(94vw,calc((100vh - 13vmin) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.6)}
.holo-vlb-box.ar-9x16{aspect-ratio:9/16;width:min(80vw,calc((100vh - 13vmin) * 9 / 16))}
.holo-vlb-box>iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.holo-vlb-close{position:absolute;top:max(.8rem,2.5vmin);right:max(.8rem,2.5vmin);width:46px;height:46px;border-radius:50%;border:1px solid var(--panel-border,rgba(126,221,240,.45));background:rgba(6,18,29,.85);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}
.holo-vlb-close:hover{background:#F20A18}
/* ===== Khối EMBED MẶC ĐỊNH của WordPress (chỉ DÁN URL YouTube/Vimeo, KHÔNG cần gõ HTML)
   -> tự được khung responsive + xử lý thu/phóng + bo góc y như .holo-video (video tràn 1px, wrapper cắt vào). */
.holo-content figure.wp-block-embed{margin:1.2rem auto}
.holo-content .wp-block-embed.is-type-video .wp-block-embed__wrapper{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#000;box-shadow:0 9px 26px rgba(0,0,0,.45)}
.holo-content .wp-block-embed__wrapper::before{content:none;padding-top:0}   /* bỏ hack tỉ-lệ cũ của WP, dùng aspect-ratio */
.holo-content .wp-block-embed.is-type-video .wp-block-embed__wrapper>iframe{
  display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:10px}
  /* FIX iOS Safari (iPad) đồng bộ với .holo-video: iframe hay KHÔNG nhận width/height:100% -> co lại lộ mảng trắng phải/dưới.
     min-width/min-height:100% (iOS tôn trọng min-* hơn) ép iframe lấp đầy khung kể cả khối DÁN-URL của WordPress. */
.holo-content figure.wp-block-embed figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.5rem;font-style:italic}
/* iframe YouTube/Vimeo "trần" (oEmbed cổ điển, không qua block) -> ít nhất cũng responsive 16:9 bo góc */
.holo-content iframe[src*="youtube"]:not(.holo-video *),.holo-content iframe[src*="youtu.be"],
.holo-content iframe[src*="vimeo"]:not(.holo-video *){
  width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:#000;display:block;margin:1.2rem auto}
.holo-content blockquote{border-left:2px solid var(--accent);background:var(--panel);padding:.9rem 1.1rem;color:var(--accent-soft)}
.holo-content pre{background:rgba(8,22,32,.85);border:1px solid var(--line);color:var(--green);padding:1rem;overflow:auto;font-family:var(--font)}
.holo-content code{background:rgba(8,22,32,.85);color:var(--gold);padding:.05rem .3rem;font-family:var(--font)}
.holo-content pre code{background:none;padding:0;color:inherit}
.holo-content table{width:100%;border-collapse:collapse}
.holo-content th,.holo-content td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}
.holo-content th{color:var(--accent);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.holo-content hr{border:none;border-top:1px solid var(--line)}

.holo-tags{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem}
.holo-tags a{border:1px solid var(--panel-border);color:var(--accent-soft);font-size:.7rem;padding:.2rem .55rem}
.holo-tags a:hover{border-color:var(--accent);color:var(--strong);text-shadow:var(--glow)}

/* ====================================================================
   7. NÚT / FORM / PHÂN TRANG / BÌNH LUẬN
   ==================================================================== */
.holo-btn,button,input[type=submit],.wp-block-button__link{
  cursor:pointer;background:var(--panel);border:1px solid var(--panel-border);color:var(--accent-soft);
  padding:.45rem .9rem;font-family:var(--font);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.holo-btn:hover,button:hover,input[type=submit]:hover,.wp-block-button__link:hover{border-color:var(--accent);color:var(--strong);text-shadow:var(--glow)}
input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],textarea,select{
  background:rgba(8,22,32,.7);border:1px solid var(--panel-border);color:var(--text);padding:.55rem .7rem;font-family:var(--font);width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
::placeholder{color:var(--muted)}

.holo-pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;padding:clamp(1rem,3vw,1.6rem)}
.holo-pagination .page-numbers{border:1px solid var(--panel-border);background:var(--panel);color:var(--accent-soft);padding:.4rem .7rem;min-width:2.2rem;text-align:center}
.holo-pagination .page-numbers.current{border-color:var(--accent);color:var(--strong);text-shadow:var(--glow)}
.holo-pagination .page-numbers:hover{border-color:var(--accent);color:var(--strong)}

.holo-comments{padding:clamp(1rem,3vw,2rem)}
.holo-comments .comment-list{list-style:none}
.holo-comments .comment-body{padding:1rem 0;border-bottom:1px solid var(--line)}
.holo-comments .comment-author{color:var(--accent-soft);font-size:.82rem;letter-spacing:.04em}
.holo-comments .comment-metadata{color:var(--muted);font-size:.68rem}
.holo-comments .children{list-style:none;margin-left:clamp(1rem,4vw,2.5rem)}

/* ====================================================================
   8. FOOTER
   ==================================================================== */
.holo-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  margin:var(--gap) 0 0;padding:.7rem clamp(.55rem,1.4vw,.8rem);   /* hở trên = --gap: ĐỀU như bản cũ */
  border-top:1px solid var(--panel-border);font-size:.68rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

.holo-empty{color:var(--muted);text-align:center;padding:clamp(1.4rem,4vw,2.2rem) 1rem;font-size:.82rem}

/* thanh cuộn */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:#06121d}
*::-webkit-scrollbar-thumb{background:rgba(126,221,240,.28);border:2px solid #06121d}
*::-webkit-scrollbar-thumb:hover{background:rgba(126,221,240,.5)}

/* ====================================================================
   9. ĐIỂM GÃY (chỉ để gập cột — thu phóng đã mượt nhờ clamp)
   ==================================================================== */
@media (max-width:1080px){
  .holo-grid{grid-template-columns:1fr 1fr}
  .holo-top{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand nav" "brand meta";column-gap:var(--gap);row-gap:.3rem;align-items:center}
  .holo-brandbox{grid-area:brand;align-self:center}
  .holo-logo{height:clamp(2.4rem,5vw,3.2rem)}              /* logo to hơn khi xếp 2 hàng */
  .holo-logo--mark{height:clamp(2.4rem,6vw,3rem)}
  .holo-nav{grid-area:nav;justify-self:end;justify-content:flex-end}
  .holo-top-meta{grid-area:meta;justify-self:end;justify-content:flex-end}
  .holo-col-left{grid-column:span 2;flex-direction:row;flex-wrap:wrap}
  .holo-col-left>.holo-panel{flex:1 1 12rem}
  .holo-col-mid,.holo-col-right{grid-column:span 2}
  .holo-counters{grid-template-columns:repeat(3,1fr);row-gap:1rem}
}
/* iPad (681–1080): ĐƯA LUỒNG BÀI VIẾT lên ngay sau hàng Lõi/Hệ thống (nội dung chính lên đầu). */
@media (min-width:681px) and (max-width:1080px){
  .holo-col-left,.holo-col-mid,.holo-col-right{display:contents}
  .holo-grid .holo-panel{order:5;grid-column:span 2}                 /* mặc định: full-width, xếp sau */
  .holo-grid .holo-col-left .holo-panel{order:1;grid-column:span 1}  /* Lõi + Hệ thống: 2 cột hàng đầu */
  .holo-grid .holo-feed{order:2;grid-column:span 2}                  /* Luồng bài viết full-width, ngay sau */
}
@media (max-width:680px){
  .holo-grid{grid-template-columns:1fr}
  /* iPhone: panel thành item TRỰC TIẾP của lưới -> sắp lại được; ĐƯA LUỒNG BÀI VIẾT ngay dưới Lõi Ovalpi
     (bài viết là nội dung chính, không bắt người dùng lướt qua Hệ thống/bộ đếm mới thấy). */
  .holo-col-left,.holo-col-mid,.holo-col-right{display:contents}
  .holo-grid .holo-panel{order:5}                              /* mặc định: giữ thứ tự DOM */
  .holo-grid .holo-col-left .holo-panel:first-child{order:1}   /* 1) Lõi Ovalpi */
  .holo-grid .holo-feed{order:2}                               /* 2) Luồng bài viết ngay dưới Lõi */
  .holo-counters{grid-template-columns:repeat(2,1fr)}
  .holo-top{display:flex;flex-direction:column;text-align:center}
  .holo-top-meta{justify-content:center;order:0;flex-basis:auto}
  .holo-nav{order:0;flex:1 1 auto;justify-content:center}
  .holo-row .src{width:5rem}
}
@media (prefers-reduced-motion:reduce){
  .holo-core .r1,.holo-core .r2,.holo-core .r3{animation:none}
  *{transition:none!important}
}

/* ====================================================================
   10. THEME "POSTER" — phẳng hơn, bo góc, nền sao, không glow
   Kích hoạt bằng <html data-skin="poster"> (nút chuyển trên header).
   ==================================================================== */
html[data-skin="poster"]{
  --bg:#050a14; --panel:rgba(13,22,40,.88); --panel-border:#22375c;
  --line:#1a2a47; --accent:#4dd8e8; --accent-soft:#8fe6f2;
  --text:#dce6f2; --muted:#8093b0; --gold:#e8c558; --green:#6fdc8c; --pink:#d864c8;
  --glow:none;
}
/* nền: trường sao thay cho lưới HUD */
html[data-skin="poster"] .holo-bggrid{
  background-image:radial-gradient(rgba(180,200,255,.18) 1px,transparent 1px),
                   radial-gradient(rgba(120,160,255,.12) 1px,transparent 1px);
  background-size:90px 90px,53px 53px;background-position:0 0,27px 40px}
html[data-skin="poster"] .holo-orb{display:none}
/* panel: bo góc, bỏ ngoặc HUD ở góc */
html[data-skin="poster"] .holo-panel{border-radius:12px}
html[data-skin="poster"] .holo-topframe{border-radius:12px;overflow:hidden}
html[data-skin="poster"] .holo-panel::before,
html[data-skin="poster"] .holo-panel::after,
html[data-skin="poster"] .holo-topframe::before,
html[data-skin="poster"] .holo-topframe::after{display:none}
/* bỏ phát sáng chữ */
html[data-skin="poster"] .holo-ph,
html[data-skin="poster"] .holo-brand a,
html[data-skin="poster"] .holo-nav a,
html[data-skin="poster"] .holo-counters .bn,
html[data-skin="poster"] .holo-core .cc{text-shadow:none}
/* nút / ô nhập / chip / phân trang: bo góc */
html[data-skin="poster"] .holo-btn,
html[data-skin="poster"] button,
html[data-skin="poster"] input,
html[data-skin="poster"] textarea,
html[data-skin="poster"] select,
html[data-skin="poster"] .holo-kw a,
html[data-skin="poster"] .holo-kw .tag,
html[data-skin="poster"] .holo-tags a,
html[data-skin="poster"] .holo-pagination .page-numbers,
html[data-skin="poster"] .holo-card .thumb{border-radius:7px}
html[data-skin="poster"] .holo-mt .bar{border-radius:5px}
html[data-skin="poster"] .holo-split{border-radius:6px}
/* hộp thông tin (tooltip) + chip bài mới: bo góc theo poster */
html[data-skin="poster"] .holo-tip{border-radius:9px}
html[data-skin="poster"] .spawn-chip{border-radius:7px}
/* dấu lục giác -> chấm tròn */
html[data-skin="poster"] .holo-row .hex{clip-path:none;border-radius:50%}
/* nền topbar/footer phù hợp tông poster */
html[data-skin="poster"] .holo-top{background:rgba(5,10,20,.62)}
/* quả cầu thả nổi: đổ bóng mềm thay vì viền phát sáng */
html[data-skin="poster"] .fl-core .orb{box-shadow:0 5px 16px -5px var(--c,#000)}
html[data-skin="poster"] .fl-core .orb::before{opacity:.18}
/* ảnh bài bo góc nhẹ trong nội dung */
html[data-skin="poster"] .holo-content img,
html[data-skin="poster"] .holo-article img{border-radius:8px}
/* POSTER: header bố cục GIỐNG HOLO (logo trái — đồng bộ vị trí giữa 2 theme); chỉ khác là hiện số panel */
html[data-skin="poster"] .holo-ph .no{display:inline}

/* ====================================================================
   11. ĐỔI LOGO THEO BỀ RỘNG: màn hẹp dùng icon (không chữ) cho khỏi cắt
   ==================================================================== */
@media (max-width:760px){
  .holo-logo--full{display:none}
  .holo-logo--mark{display:block}
}

/* ====================================================================
   12. CHẾ ĐỘ SÁNG (light) — áp cho cả HOLO lẫn POSTER (trục độc lập)
   data-mode="light" trên <html>. Mặc định (không có) = tối.
   ==================================================================== */
html[data-mode="light"]{
  --bg:#e7f2f6; --panel:rgba(255,255,255,.78); --panel-border:rgba(11,120,140,.34);
  --line:rgba(11,120,140,.15); --accent:#0a7184; --accent-soft:#0a6f82;
  --text:#0a2733; --muted:#3a6473; --gold:#925e0f; --green:#107a48; --pink:#b3306c;
  --glow:0 0 .5rem rgba(11,139,161,.25); --strong:#06222c;
  --fx-dot:rgba(11,120,140,.38); --fx-line:rgba(11,120,140,.5);
  background:#e7f2f6;
}
html[data-mode="light"] body{
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(150,205,225,.30), transparent 40%),
    radial-gradient(110% 80% at 50% 122%, rgba(170,215,232,.32), transparent 52%),
    #e7f2f6;
}
html[data-mode="light"] .holo-depth{
  background:radial-gradient(60% 36% at 50% 108%, rgba(70,150,185,.14), transparent 60%),
            radial-gradient(150% 130% at 50% 50%, transparent 66%, rgba(120,160,185,.14) 100%)}
html[data-mode="light"] .holo-bggrid{
  background-image:linear-gradient(rgba(13,110,140,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,110,140,.06) 1px,transparent 1px)}
html[data-mode="light"] .holo-orb{border-color:rgba(13,110,140,.18)}
html[data-mode="light"] .holo-topframe,
html[data-mode="light"] .holo-footer{background:rgba(255,255,255,.72)}
/* lõi/vệ tinh trên nền sáng: orb nền sáng, chữ tối */
html[data-mode="light"] .fl-core .orb{background:rgba(255,255,255,.92)}
html[data-mode="light"] .fl-core .nm{text-shadow:0 0 6px rgba(255,255,255,.9)}
html[data-mode="light"] .holo-tip,
html[data-mode="light"] .spawn-chip{background:rgba(255,255,255,.96);color:#0a2733}
html[data-mode="light"] .holo-space{background:radial-gradient(ellipse at 50% 42%,rgba(13,110,140,.05),transparent 70%)}
html[data-mode="light"] .holo-core .cc{background:radial-gradient(circle,rgba(255,255,255,.6),transparent 72%);box-shadow:0 0 1rem rgba(14,127,160,.2)}
html[data-mode="light"] input,html[data-mode="light"] textarea,html[data-mode="light"] select{background:rgba(255,255,255,.8)}
html[data-mode="light"] .holo-content pre{background:rgba(13,110,140,.07);color:#0b5a44}
html[data-mode="light"] .holo-content code{background:rgba(13,110,140,.08);color:#9a5a00}
/* POSTER không có chế độ sáng — poster luôn giữ giao diện tối (đã bỏ bản nền trắng) */
html[data-mode="light"] ::selection{background:rgba(14,127,160,.25);color:#06222c}
html[data-mode="light"] a:hover{color:#06222c}
html[data-mode="light"] .holo-nav a:hover,html[data-mode="light"] #site-header nav a:hover{color:#06222c}
html[data-mode="light"] *::-webkit-scrollbar-track{background:#dceaf0}
html[data-mode="light"] *::-webkit-scrollbar-thumb{background:rgba(13,110,140,.3);border-color:#dceaf0}

/* ====================================================================
   13. ĐỌC BÀI TẠI CHỖ (in-place reader) — phủ vùng Luồng bài viết
   "mid" = lớp phủ cả cột giữa · "feed" = chỉ panel Luồng. JS chọn vùng.
   ==================================================================== */
.holo-col-mid{position:relative}        /* mốc định vị cho lớp phủ 3 vùng */
.holo-feed{position:relative}           /* mốc định vị cho lớp phủ 1 vùng */
.holo-reader{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;overflow:visible;color:var(--text);
  border:1px solid var(--panel-border);background:rgba(6,18,29,.98);backdrop-filter:blur(9px);
  animation:holo-reader-in .25s ease both}
html[data-mode="light"] .holo-reader{background:rgba(255,255,255,.98)}
html[data-skin="poster"] .holo-reader{border-radius:12px;overflow:hidden}   /* poster bo tròn -> clip nội dung theo góc (ngoặc đã ẩn ở poster) */
@keyframes holo-reader-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
/* ngoặc HUD ở góc (đồng bộ .holo-panel) */
.holo-reader::before,.holo-reader::after{content:"";position:absolute;width:.8rem;height:.8rem;z-index:2;pointer-events:none}
.holo-reader::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.holo-reader::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
html[data-skin="poster"] .holo-reader::before,html[data-skin="poster"] .holo-reader::after{display:none}
/* MOBILE/THU NHỎ: reader phủ TOÀN MÀN HÌNH (thoát hộp cột giữa) -> bài đọc dài tối đa,
   lấy luôn khung HỆ THỐNG/header phía trên. Đặt SAU base .holo-reader để thắng source-order.
   z-index dưới pet(9998)/gnaw(9980) để giữ hiệu ứng gặm chạy trên reader như desktop. */
@media (max-width:680px){
  /* reader = KHUNG GIỚI HẠN chiều cao (JS đặt top/left/width/height = vùng HỆ THỐNG -> đáy màn):
     KHÔNG kéo tới cuối trang; nội dung CUỘN BÊN TRONG (body overflow-y:auto của base);
     cuộn hết bài -> chain CUỘN TRANG. Góc VUÔNG + ngoặc HUD cyan như panel dashboard (KHÔNG bo tròn). */
  .holo-reader{position:absolute;right:auto;bottom:auto;z-index:9970;overflow:visible}  /* JS: top=viền trên HỆ THỐNG, height tới viền dưới LUỒNG BÀI VIẾT; visible -> ngoặc HUD hiện (poster đè overflow:hidden) */
  /* VIỀN/GÓC THEO SKIN: HOLO -> vuông + ngoặc HUD (base); POSTER -> bo tròn 12px, ẩn ngoặc (rule poster sẵn có). */
  .holo-reader-body{overscroll-behavior-y:auto}
}
/* thanh đầu: nút quay lại + nhãn chuyên mục + thời gian */
.holo-reader-bar{flex:none;display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--panel-border);background:rgba(6,18,29,.5)}
html[data-mode="light"] .holo-reader-bar{background:rgba(255,255,255,.5)}
/* CHẾ ĐỘ ĐỌC SÁNG — CHỈ áp trong khung reader (set token cục bộ, dashboard ngoài không đổi) */
.holo-reader.light{   /* GIẤY KINDLE: nền kem ấm + chữ nâu-xám đậm, dịu mắt khi đọc dài */
  --panel:rgba(43,33,20,.5); --panel-border:rgba(120,95,55,.30);
  --line:rgba(120,95,55,.18); --accent:#0e6e62; --accent-soft:#0f6b5e;
  --text:#322e27; --muted:#6b6353; --gold:#8a5a0e; --green:#107a48; --pink:#9c3768;
  --glow:0 0 .5rem rgba(120,95,55,.22); --strong:#211d17;
  background:var(--paper,#f4efe2)}
.holo-reader.light .holo-reader-bar{background:var(--paper-bar,#ede6d5)}
.holo-reader.light .holo-reader-ci:hover{background:rgba(120,95,55,.10)}
.holo-reader.light .holo-content pre{background:rgba(120,95,55,.12);color:#0b5a44}
.holo-reader.light .holo-content code{background:rgba(120,95,55,.12);color:#8a5a0e}
.holo-reader.light .holo-content blockquote{color:#433d32}
/* thanh chỉnh độ ấm giấy (chỉ hiện khi đọc nền sáng) */
.holo-reader-warm{flex:none;width:5rem;height:1.1rem;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.holo-reader:not(.light) .holo-reader-warm{display:none}
.holo-reader-mode{margin-left:auto;flex:none;cursor:pointer;background:none;border:1px solid var(--panel-border);
  color:var(--accent-soft);font:inherit;font-size:.85rem;line-height:1;padding:.3rem .55rem}
.holo-reader-mode:hover{border-color:var(--accent);color:var(--strong)}
.holo-reader-back{cursor:pointer;background:none;border:1px solid var(--panel-border);color:var(--accent-soft);
  font:inherit;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .7rem}
.holo-reader-back:hover{border-color:var(--accent);color:var(--strong);text-shadow:var(--glow)}
.holo-reader-cat{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.holo-reader-bar .ago{margin-left:auto;color:var(--muted);font-size:.66rem;letter-spacing:.06em;white-space:nowrap}
/* thân: cuộn được, tái dùng typography .holo-content sẵn có */
.holo-reader-body{flex:1;min-height:0;overflow-y:auto;padding:clamp(1rem,3vw,2rem) 0}
/* Thanh cuộn bài viết = CHẤM TRÒN tự làm (JS): ẩn scrollbar gốc, hiện 1 chấm theo % cuộn, chỉ khi đang cuộn rồi tự mờ.
   (iOS Safari không cho style ::-webkit-scrollbar nên phải dùng chấm JS để đồng nhất mọi thiết bị.) */
.holo-reader .holo-reader-body{scrollbar-width:none}
.holo-reader .holo-reader-body::-webkit-scrollbar{width:0;height:0;display:none}
.holo-reader-dot{position:absolute;right:5px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent);opacity:0;transition:opacity .27s ease;pointer-events:none;z-index:6;will-change:top,opacity}   /* top đặt tức thì mỗi frame (không transition -> tránh animation chồng/giật); fade-out NHANH */
.holo-reader-dot.show{opacity:.9;transition:opacity .55s ease}   /* khi cuộn: hiện ra CHẬM hơn (~0.55s) */
@media (prefers-reduced-motion:reduce){.holo-reader-dot,.holo-reader-dot.show{transition:opacity .15s ease}}
.holo-reader-body .holo-content,
.holo-reader-body .entry-title{margin-left:4.85rem;margin-right:min(1.4cm, 3.4vw)}   /* lề trái = cột chữ "S" của "SÁCH" trong breadcrumb (◂‧sp‧D‧A‧N‧H‧sp‧S); phải giữ lề đọc responsive */
.holo-reader-body .holo-reader-cl{margin-left:min(1.2cm,3.2vw);margin-right:min(1.2cm,3.2vw)}   /* DANH SÁCH danh mục: lề ĐỀU 2 bên ở MỌI bề rộng (trước đây sát mép ở desktop -> tràn) */
.holo-reader-body .holo-content{font-size:1.06rem;line-height:1.75;text-wrap:pretty;-webkit-hyphens:none;hyphens:none}
/* MOBILE: lề ngang ĐỀU trên reader-body (đặt SAU base để thắng source-order) -> chữ GỌN trong khung, không tràn 2 mép */
@media (max-width:680px){
  /* hộp reader đã có lề 4vw -> chữ/danh sách dùng lề trong 3vw ĐỀU (bài + danh mục đều gọn trong khung) */
  /* bài viết: lề TRÁI 3vw, lề PHẢI nhỏ (1vw) -> chữ tràn sang phải nhiều hơn, dùng rộng bề ngang */
  .holo-reader-body .holo-content,.holo-reader-body .entry-title{margin-left:3vw;margin-right:1vw;overflow-wrap:break-word}
  .holo-reader-body .holo-reader-cl{margin-left:3vw;margin-right:3vw}   /* danh sách danh mục: lề đều */
}
.holo-reader-body .holo-content>*{margin-bottom:1.15em}
.holo-reader-body .holo-content h2,.holo-reader-body .holo-content h3,.holo-reader-body .holo-content h4{margin-top:1.9em}
.holo-reader-body .holo-content li{margin-bottom:.55em}
.holo-reader-body .entry-title{font-size:clamp(1.4rem,3.1vw,2.1rem);color:var(--strong);line-height:1.25;margin-bottom:1rem}
.holo-reader-loading{color:var(--muted);text-align:center;padding:2rem 1rem;font-size:.78rem;letter-spacing:.12em}
/* danh sách bài của chuyên mục bên trong reader (mục tiêu bấm to, rõ) */
.holo-reader-cl{display:flex;flex-direction:column}
.holo-reader-ci{display:flex;gap:.7rem;align-items:center;padding:.7rem .5rem;border-bottom:1px solid var(--line);cursor:pointer}
.holo-reader-ci:hover{background:rgba(126,221,240,.08)}
html[data-mode="light"] .holo-reader-ci:hover{background:rgba(13,110,140,.08)}
.holo-reader-ci .ci-hex{flex:none;width:.55rem;height:.55rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
html[data-skin="poster"] .holo-reader-ci .ci-hex{clip-path:none;border-radius:50%}
.holo-reader-ci .ci-t{flex:1;min-width:0;color:var(--text);line-height:1.45}
.holo-reader-ci:hover .ci-t{color:var(--strong)}
.holo-reader-ci .ci-ago{flex:none;color:var(--muted);font-size:.66rem;white-space:nowrap}
/* focus rõ ràng cho bàn phím (a11y) */
.fl-sat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fl-core .orb:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.holo-reader-ci:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(126,221,240,.1)}
.holo-reader-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ẩn thị giác nhưng vẫn đọc được bằng screen-reader (h1 trang chủ, nhãn form...) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* skip-link: ẩn cho tới khi focus bằng Tab */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#04121b;padding:.5rem .9rem;font-weight:700;letter-spacing:.06em}
.skip-link:focus{left:.5rem;top:.5rem}
#holo-main:focus{outline:none}

/* ====================================================================
   THÚ CƯNG 8-BIT (pet.js) — lang thang + gặm điểm ảnh khi rảnh
   ==================================================================== */
.ovalpi-pet{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;image-rendering:pixelated;
  filter:drop-shadow(0 0 3px rgba(159,238,255,.6)) drop-shadow(0 0 1.5px rgba(6,12,18,.9)) drop-shadow(1px 1px 0 rgba(6,12,18,.55)) drop-shadow(-1px -1px 0 rgba(6,12,18,.55));will-change:transform}
.pet-bite{position:fixed;width:5px;height:5px;background:var(--accent,#7eddf0);z-index:9997;pointer-events:none;
  image-rendering:pixelated;box-shadow:0 0 4px var(--accent,#7eddf0);animation:pet-bite .9s ease-out forwards}
@keyframes pet-bite{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(.25)}}
.pet-hole{position:fixed;z-index:-1;pointer-events:none;opacity:0}   /* marker vo hinh cho AI medic; hinh lo THAT do gnaw.js (mask) lo */
@keyframes pet-hole{0%{opacity:0}2%{opacity:1}90%{opacity:1}100%{opacity:0}}
.pet-pixel{position:fixed;width:4px;height:4px;z-index:9999;pointer-events:none;image-rendering:pixelated;
  background:var(--pc,#9feeff);box-shadow:0 0 5px var(--pc,#9feeff),0 0 10px var(--pc,#9feeff);
  animation:pet-pixel .82s ease-out forwards}
@keyframes pet-pixel{0%{opacity:1;transform:translate(0,0) scale(1.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-14px)) scale(.3)}}
.pet-spark{position:fixed;z-index:9999;pointer-events:none;color:var(--pink,#ff8fb3);font-size:14px;
  text-shadow:0 0 5px var(--pink,#ff8fb3);animation:pet-spark .8s ease-out forwards}
@keyframes pet-spark{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1.1)}}
.ovalpi-pac{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;image-rendering:pixelated;
  filter:drop-shadow(0 0 3px rgba(255,210,39,.7)) drop-shadow(0 0 1.5px rgba(6,12,18,.9)) drop-shadow(1px 1px 0 rgba(6,12,18,.55)) drop-shadow(-1px -1px 0 rgba(6,12,18,.55));will-change:transform}
.ovalpi-retro{position:fixed;left:0;top:0;z-index:9996;pointer-events:none;image-rendering:pixelated;will-change:transform}
.retro-shot{position:fixed;left:0;top:0;width:3px;height:10px;z-index:9997;pointer-events:none;background:#ffe24a;box-shadow:0 0 5px #ffe24a,0 0 9px #ff8a3c;border-radius:1px;will-change:transform}
.holo-ray{position:fixed;z-index:9979;pointer-events:none;height:2px;transform-origin:0 50%;border-radius:2px;background:linear-gradient(90deg,rgba(255,143,179,.95),rgba(255,210,90,.5),rgba(255,143,179,0));box-shadow:0 0 5px rgba(255,143,179,.8);animation:holo-ray .62s ease-out forwards}
@keyframes holo-ray{0%{opacity:0;width:0}18%{opacity:1}100%{opacity:0;width:var(--len,60px)}}
.heart-fw{position:fixed;width:3px;height:3px;z-index:9999;pointer-events:none;border-radius:1px;background:var(--pc,#ff5a7a);box-shadow:0 0 5px var(--pc,#ff5a7a);image-rendering:pixelated;animation:heart-fw var(--dur,1.6s) cubic-bezier(.16,.55,.3,1) forwards}
@keyframes heart-fw{0%{opacity:0;transform:translate(0,0) scale(1.6)}5%{opacity:1}28%{transform:translate(calc(var(--dx,0) * .92),calc(var(--dy,0) * .92)) scale(1)}70%{opacity:.95}100%{opacity:0;transform:translate(var(--dx,0),calc(var(--dy,0) + var(--fall,120px))) scale(.5)}}
@media (prefers-reduced-motion:reduce){.ovalpi-pet,.ovalpi-pac,.ovalpi-retro{display:none}}

/* ====================================================================
   Logo recolor theo skin/mode (currentColor) — hiệu ứng đổi màu khi chuyển theme
   ==================================================================== */
:root{--logo-ink:#9FEAFF;--logo-glow:rgba(126,221,240,.4)}                         /* HOLO tối: cyan + glow */
html[data-mode="light"]{--logo-ink:#00287a;--logo-glow:transparent}               /* HOLO sáng: navy */
html[data-skin="poster"]{--logo-ink:#3b74ff;--logo-glow:transparent}              /* POSTER (luôn tối): xanh đậm đọc rõ trên nền gần đen */
.holo-brand{color:var(--logo-ink,#9FEAFF)}
.holo-brand .holo-logo{filter:drop-shadow(0 0 6px var(--logo-glow,transparent));transition:color .35s ease,filter .35s ease}

/* Office Assistants 8-bit (Clippy/Dot/Links/Rocky/F1/Merlin) */
.ovalpi-office{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;image-rendering:pixelated;will-change:transform}
@media (prefers-reduced-motion:reduce){.ovalpi-office{display:none}}

/* ====================================================================
   LOGO VIỀN TRÒN: sau 2 phút khung vuông -> tròn (JS thêm .is-round vào .holo-brand)
   bản tròn (--rd) phủ chồng lên bản vuông (--sq), ẩn sẵn; đổi = fade + xoay + lóe sáng.
   ==================================================================== */
.holo-brand{position:relative}
/* BIẾN ĐỔI KHUNG: khung đang tắt THU NHỎ về phía mark đỏ (hố đen) rồi tan,
   khung mới PHÌNH RA từ mark -> cảm giác morph qua hố đen. transform-origin = vị trí mark (~16% 50%). */
.holo-brand .holo-logo--sq,.holo-brand .holo-logo--rd{
  transform-origin:16% 50%;
  transition:opacity .75s ease,transform .975s cubic-bezier(.5,0,.25,1),filter .525s ease
}
.holo-brand .holo-logo--sq{transform:scale(1)}                                   /* VUÔNG: hiện sẵn */
.holo-brand .holo-logo--rd{position:absolute;left:0;top:50%;opacity:0;overflow:visible;transform:translateY(-50%) scale(.5);pointer-events:none}  /* TRÒN: ẩn, thu nhỏ ở mark */
.holo-brand.is-round .holo-logo--sq{opacity:0;transform:scale(.5)}               /* sang tròn -> vuông thu vào mark rồi tan */
.holo-brand.is-round .holo-logo--rd{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto;animation:ovLogoGlow 1.65s ease-out;filter:none}  /* filter:none sau lóe sáng -> orbit xoay KHÔNG re-raster drop-shadow mỗi frame (hết chớp đường nét) */
/* TIẾT KIỆM PIN: tab ẩn / logo cuộn khỏi màn -> JS thêm .fx-paused -> đóng băng MỌI animation chữ (orbit do JS dừng rAF) */
.holo-brand.fx-paused .holo-logo .ovl{animation-play-state:paused}
/* vệ tinh/khung xoay (JS rotate qua rAF): tách layer ổn định + AA chính xác -> đỡ nhấp nháy mép */
.ov-orbit{will-change:transform}
.holo-logo--rd circle,.holo-logo--rd path{shape-rendering:geometricPrecision}
@keyframes ovLogoGlow{0%{filter:drop-shadow(0 0 0 var(--logo-glow,transparent))}45%{filter:drop-shadow(0 0 16px var(--logo-glow,#7eddf0))}100%{filter:drop-shadow(0 0 6px var(--logo-glow,transparent))}}
@media (prefers-reduced-motion:reduce){
  .holo-brand .holo-logo--sq,.holo-brand .holo-logo--rd{transition:opacity .3s ease}
  .holo-brand .holo-logo--rd{transform:translateY(-50%)}
  .holo-brand.is-round .holo-logo--sq{transform:none}
  .holo-brand.is-round .holo-logo--rd{transform:translateY(-50%);animation:none}
}

/* ====================================================================
   VÒNG BIẾN ĐỔI LOGO: vuông <-> tròn lặp (JS toggle .is-round trong holo.js).
   CẢ HAI khung (vuông --sq lẫn tròn --rd) đều có 6 chữ I P L A V O + chấm đỏ
   của A được tách path độc lập -> chui ra từ tâm mark (hố đen) và ghép lại.
   - VUÔNG hiện chữ khi .holo-brand KHÔNG .is-round; TRÒN hiện chữ khi .is-round.
   - Đổi khung -> chữ của khung đang tắt bị HÚT NGƯỢC về hố (transition nền).
   --dx/--dy (đặt inline trong SVG) = vector từ tâm chữ về tâm mark của khung đó.
   ==================================================================== */
/* trạng thái nền = nằm trong hố đen, ẩn (chữ "ở trong hố") */
.holo-logo .ovl{
  transform-box:fill-box;transform-origin:center;
  opacity:0;transform:translate(var(--dx),var(--dy)) scale(.12) rotate(50deg)
}
/* CHUI RA (forward I->P->L->A->V->O->chấm) khi khung đang bật, KHÔNG ẩn/hút.
   Dùng LONGHAND (không shorthand `animation:`) để giữ animation-delay per-chữ -> ra LẦN LƯỢT. */
.holo-brand.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{
  animation-name:ovEmerge;animation-duration:2.25s;
  animation-timing-function:cubic-bezier(.2,.85,.3,1);animation-fill-mode:both
}
/* VUÔNG: chữ chui ra từ hố như #1 (đã BỎ glitch hologram) */
.holo-brand:not(.is-round):not(.let-hidden):not(.let-sucking) .holo-logo--sq .ovl{
  animation-name:ovEmerge;animation-duration:2.25s;
  animation-timing-function:cubic-bezier(.2,.85,.3,1);animation-fill-mode:both
}
/* delay xếp chữ VÀO (bước .75s — đã ×1.5 chậm 50%) */
.holo-logo .ovl-i  {animation-delay:0s}
.holo-logo .ovl-p  {animation-delay:.75s}
.holo-logo .ovl-l  {animation-delay:1.5s}
.holo-logo .ovl-a  {animation-delay:2.25s}
.holo-logo .ovl-v  {animation-delay:3s}
.holo-logo .ovl-o  {animation-delay:3.75s}
.holo-logo .ovl-dot{animation-delay:4.5s}
@keyframes ovEmerge{
  0%  {opacity:0;transform:translate(var(--dx),var(--dy)) scale(.12) rotate(-70deg)}
  55% {opacity:1}
  100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
}
/* ====== QUỸ ĐẠO CHẠY CHỮ (nhiều kiểu; JS xoay vòng .traj-* mỗi pha tròn cho ĐA DẠNG).
   Biên độ theo đơn vị viewBox 2560 -> giá trị lớn. Đều kết ở transform:none (vị trí ghép). ====== */
@keyframes ovTrSpiral{   /* xoay tron oc RONG nhieu vong */
  0% {opacity:0.0;transform:translate(846px,308px) scale(0.240) rotate(-28.0deg);animation-timing-function:linear}
  7.7% {transform:translate(831px,341px) scale(0.241) rotate(-27.9deg);animation-timing-function:linear}
  15.4% {transform:translate(710px,529px) scale(0.250) rotate(-27.6deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(292px,806px) scale(0.269) rotate(-26.9deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-475px,655px) scale(0.302) rotate(-25.7deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-671px,-317px) scale(0.349) rotate(-24.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(399px,-523px) scale(0.409) rotate(-21.8deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(187px,527px) scale(0.481) rotate(-19.1deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-381px,-239px) scale(0.564) rotate(-16.1deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(331px,49px) scale(0.655) rotate(-12.7deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-220px,19px) scale(0.753) rotate(-9.1deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(112px,-28px) scale(0.853) rotate(-5.4deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-26px,14px) scale(0.951) rotate(-1.8deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrArcTop{   /* cung qua dinh */
  0% {opacity:0.0;transform:translate(-460px,0px) scale(0.400) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-459px,-3px) scale(0.402) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-450px,-18px) scale(0.413) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-430px,-53px) scale(0.439) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-397px,-108px) scale(0.482) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-349px,-178px) scale(0.544) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-279px,-246px) scale(0.637) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-181px,-246px) scale(0.763) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-111px,-178px) scale(0.856) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-63px,-108px) scale(0.918) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-30px,-53px) scale(0.961) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-10px,-18px) scale(0.987) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-1px,-3px) scale(0.998) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrArcBot{   /* vọt lên từ dưới theo cung */
  0%  {opacity:0;transform:translate(-250px,740px) rotate(-32deg) scale(.7)}
  55% {opacity:1;transform:translate(95px,-85px) rotate(10deg) scale(1.03)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrComet{    /* sao chổi lao ngang từ phải (kéo giãn ngang) */
  0%  {opacity:0;transform:translate(1350px,0) scaleX(2.4) scaleY(.65)}
  50% {opacity:1;transform:translate(-110px,0) scaleX(1.15) scaleY(1)}
  74% {transform:translate(45px,0)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrCometL{   /* sao chổi từ trái */
  0%  {opacity:0;transform:translate(-1350px,0) scaleX(2.4) scaleY(.65)}
  50% {opacity:1;transform:translate(110px,0) scaleX(1.15) scaleY(1)}
  74% {transform:translate(-45px,0)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrLoop{   /* bay 1 vong roi vao */
  0% {opacity:0.0;transform:translate(-480px,0px) scale(0.400) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-478px,-2px) scale(0.401) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-466px,-12px) scale(0.407) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-437px,-36px) scale(0.421) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-391px,-73px) scale(0.447) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-325px,-116px) scale(0.490) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-252px,-101px) scale(0.595) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-241px,-7px) scale(0.692) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-185px,49px) scale(0.812) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-110px,29px) scale(0.888) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-54px,10px) scale(0.941) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-19px,1px) scale(0.978) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-3px,0px) scale(0.997) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrZoom{     /* lao thẳng từ xa (zoom) + xoáy nhẹ */
  0%  {opacity:0;transform:scale(3.6) rotate(22deg)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes ovTrCircle{   /* duong tron RONG xoay vao */
  0% {opacity:0.0;transform:translate(0px,-760px) scale(0.260) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(18px,-758px) scale(0.261) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(128px,-737px) scale(0.270) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(357px,-629px) scale(0.289) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(605px,-315px) scale(0.321) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(590px,207px) scale(0.367) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(98px,544px) scale(0.426) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-416px,215px) scale(0.498) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-206px,-313px) scale(0.580) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(239px,-139px) scale(0.671) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(62px,167px) scale(0.769) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-86px,10px) scale(0.870) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(0px,-17px) scale(0.965) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrEllipse{   /* elip RONG xoay vao */
  0% {opacity:0.0;transform:translate(0px,-740px) scale(0.260) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(23px,-738px) scale(0.261) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(165px,-724px) scale(0.268) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(479px,-652px) scale(0.284) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(923px,-395px) scale(0.315) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(952px,216px) scale(0.374) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(236px,516px) scale(0.430) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-557px,327px) scale(0.491) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-401px,-267px) scale(0.587) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(261px,-228px) scale(0.665) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(177px,130px) scale(0.775) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-114px,53px) scale(0.868) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-17px,-14px) scale(0.964) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrPixar{   /* xoay oc rong nhieu vong */
  0% {opacity:0.0;transform:translate(-338px,-636px) scale(0.360) rotate(-22.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-317px,-644px) scale(0.361) rotate(-22.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-188px,-683px) scale(0.368) rotate(-21.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(116px,-675px) scale(0.385) rotate(-21.1deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(509px,-399px) scale(0.413) rotate(-20.2deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(551px,219px) scale(0.452) rotate(-18.8deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-79px,519px) scale(0.503) rotate(-17.1deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-437px,-90px) scale(0.564) rotate(-15.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(171px,-314px) scale(0.634) rotate(-12.6deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(145px,222px) scale(0.712) rotate(-9.9deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-173px,-10px) scale(0.795) rotate(-7.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(61px,-63px) scale(0.881) rotate(-4.1deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(3px,19px) scale(0.964) rotate(-1.2deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrBounce{   /* rơi từ trên + NẢY có squash/stretch (Disney bounce) */
  0%  {opacity:0;transform:translateY(-820px) scaleY(1.35) scaleX(.78)}
  16% {opacity:1;transform:translateY(0) scaleY(.58) scaleX(1.28)}
  30% {transform:translateY(-300px) scaleY(1.14) scaleX(.9)}
  44% {transform:translateY(0) scaleY(.74) scaleX(1.14)}
  58% {transform:translateY(-130px) scaleY(1.06) scaleX(.96)}
  72% {transform:translateY(0) scaleY(.88) scaleX(1.06)}
  86% {transform:translateY(-42px) scaleY(1.02) scaleX(.99)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrElastic{  /* lao tới VƯỢT QUÁ rồi rung lò xo về (elastic) */
  0%  {opacity:0;transform:translateX(-940px) scale(.5)}
  45% {opacity:1;transform:translateX(135px) scale(1.1)}
  60% {transform:translateX(-78px) scale(.96)}
  73% {transform:translateX(44px) scale(1.03)}
  84% {transform:translateX(-22px) scale(.99)}
  93% {transform:translateX(9px)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrSling{    /* ANTICIPATION: kéo lùi rồi bắn tới vượt quá (slingshot) */
  0%  {opacity:0;transform:translate(170px,90px) scale(.62)}
  20% {opacity:1;transform:translate(290px,150px) scale(.5)}
  55% {transform:translate(-110px,-58px) scale(1.12)}
  74% {transform:translate(46px,24px) scale(.98)}
  88% {transform:translate(-16px,-8px) scale(1.01)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrWarp{     /* lao từ rất xa (warp/hyperspace) + xoáy, hơi hụt rồi vào */
  0%  {opacity:0;transform:scale(6.5) rotate(-44deg)}
  42% {opacity:1}
  80% {transform:scale(.9) rotate(5deg)}
  92% {transform:scale(1.03) rotate(-1deg)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrPendulum{ /* đu như CON LẮC, biên độ tắt dần */
  0%  {opacity:0;transform:translate(-640px,-170px) rotate(-30deg)}
  28% {opacity:1;transform:translate(430px,-90px) rotate(24deg)}
  50% {transform:translate(-270px,-44px) rotate(-15deg)}
  68% {transform:translate(160px,-18px) rotate(9deg)}
  84% {transform:translate(-66px,0) rotate(-4deg)}
  93% {transform:translate(24px,0) rotate(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes ovTrFigure8{   /* hinh so 8 */
  0% {opacity:0.0;transform:translate(-440px,0px) scale(0.350) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-439px,-9px) scale(0.351) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-430px,-63px) scale(0.358) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-383px,-178px) scale(0.377) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-207px,-200px) scale(0.415) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-16px,-19px) scale(0.449) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(209px,185px) scale(0.495) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(268px,-82px) scale(0.571) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(30px,-34px) scale(0.646) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-154px,68px) scale(0.730) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-58px,-55px) scale(0.821) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(31px,30px) scale(0.893) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(8px,-3px) scale(0.982) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrVortex{   /* loc xoay dang len */
  0% {opacity:0.0;transform:translate(507px,643px) scale(0.320) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(497px,651px) scale(0.322) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(428px,688px) scale(0.332) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(255px,731px) scale(0.350) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-30px,726px) scale(0.376) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-376px,586px) scale(0.414) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-241px,261px) scale(0.481) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(212px,226px) scale(0.537) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(59px,385px) scale(0.635) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-204px,185px) scale(0.718) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(45px,71px) scale(0.794) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(5px,73px) scale(0.913) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-10px,8px) scale(0.982) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
/* ===== 7 QUỸ ĐẠO MỚI (2026-06-25) — waypoint cách đều + linear -> mượt; reverse = bay ra mờ dần ===== */
@keyframes ovTrLeaf{   /* la roi xoay */
  0% {opacity:0.0;transform:translate(0px,-540px) scale(0.500) rotate(7.8deg);animation-timing-function:linear}
  7.7% {transform:translate(3px,-539px) scale(0.501) rotate(8.2deg);animation-timing-function:linear}
  15.4% {transform:translate(20px,-530px) scale(0.509) rotate(10.3deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(58px,-509px) scale(0.527) rotate(14.6deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(112px,-466px) scale(0.565) rotate(18.1deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(88px,-389px) scale(0.634) rotate(7.4deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-1px,-332px) scale(0.686) rotate(-5.8deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-87px,-261px) scale(0.750) rotate(-13.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-52px,-172px) scale(0.832) rotate(-2.6deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(20px,-114px) scale(0.886) rotate(5.7deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(64px,-61px) scale(0.938) rotate(7.7deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(61px,-19px) scale(0.980) rotate(5.1deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(51px,-2px) scale(0.997) rotate(3.4deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrRibbon{   /* dai lua sine tu trai */
  0% {opacity:0.0;transform:translate(-660px,0px) scale(0.700) rotate(8.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-658px,2px) scale(0.701) rotate(8.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-645px,16px) scale(0.707) rotate(7.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-614px,45px) scale(0.721) rotate(6.1deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-553px,72px) scale(0.748) rotate(0.5deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-474px,34px) scale(0.783) rotate(-5.8deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-394px,-35px) scale(0.819) rotate(-5.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-291px,-50px) scale(0.866) rotate(2.5deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-204px,8px) scale(0.905) rotate(4.7deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-122px,45px) scale(0.943) rotate(1.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-56px,32px) scale(0.973) rotate(-2.4deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-19px,11px) scale(0.991) rotate(-3.2deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-3px,2px) scale(0.999) rotate(-3.2deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrSwoop{   /* bo nhao canh chim */
  0% {opacity:0.0;transform:translate(-560px,-360px) scale(0.450) rotate(-16.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-558px,-357px) scale(0.451) rotate(-16.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-545px,-337px) scale(0.457) rotate(-15.8deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-517px,-294px) scale(0.472) rotate(-15.3deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-471px,-223px) scale(0.497) rotate(-14.6deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-409px,-131px) scale(0.532) rotate(-13.6deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-336px,-25px) scale(0.578) rotate(-12.3deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-252px,81px) scale(0.638) rotate(-10.5deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-155px,165px) scale(0.724) rotate(-8.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-56px,149px) scale(0.852) rotate(-4.3deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-16px,77px) scale(0.933) rotate(-1.9deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-3px,26px) scale(0.978) rotate(-0.6deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(0px,4px) scale(0.997) rotate(-0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrBloom{   /* no xoay vong RONG ra roi ve tam */
  0% {opacity:0.0;transform:translate(0px,0px) scale(0.060) rotate(-260.0deg);animation-timing-function:linear}
  7.7% {transform:translate(10px,1px) scale(0.070) rotate(-257.4deg);animation-timing-function:linear}
  15.4% {transform:translate(42px,46px) scale(0.122) rotate(-242.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-53px,131px) scale(0.207) rotate(-219.5deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-214px,-7px) scale(0.297) rotate(-194.3deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-79px,-256px) scale(0.390) rotate(-168.7deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(240px,-173px) scale(0.483) rotate(-142.9deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(240px,173px) scale(0.577) rotate(-117.1deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-79px,256px) scale(0.670) rotate(-91.3deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-214px,7px) scale(0.763) rotate(-65.7deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-53px,-131px) scale(0.853) rotate(-40.5deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(42px,-46px) scale(0.938) rotate(-17.3deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(10px,-1px) scale(0.990) rotate(-2.6deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrWave{   /* song dang tu duoi */
  0% {opacity:0.0;transform:translate(0px,520px) scale(0.550) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(2px,518px) scale(0.551) rotate(0.1deg);animation-timing-function:linear}
  15.4% {transform:translate(14px,509px) scale(0.559) rotate(0.9deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(41px,485px) scale(0.579) rotate(2.8deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(76px,441px) scale(0.615) rotate(5.3deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(69px,370px) scale(0.675) rotate(5.2deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(11px,305px) scale(0.729) rotate(0.9deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-50px,237px) scale(0.787) rotate(-4.4deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-54px,154px) scale(0.858) rotate(-5.4deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-12px,93px) scale(0.912) rotate(-1.3deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(23px,49px) scale(0.953) rotate(2.7deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(39px,17px) scale(0.982) rotate(4.9deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(43px,3px) scale(0.997) rotate(5.6deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrDrift{   /* troi dat nhe */
  0% {opacity:0.0;transform:translate(430px,300px) scale(0.600) rotate(10.0deg);animation-timing-function:linear}
  7.7% {transform:translate(428px,299px) scale(0.601) rotate(10.0deg);animation-timing-function:linear}
  15.4% {transform:translate(418px,291px) scale(0.607) rotate(9.8deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(395px,273px) scale(0.622) rotate(9.4deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(357px,244px) scale(0.647) rotate(8.8deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(307px,208px) scale(0.682) rotate(7.9deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(247px,168px) scale(0.728) rotate(6.8deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(183px,129px) scale(0.785) rotate(5.4deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(121px,92px) scale(0.847) rotate(3.8deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(70px,57px) scale(0.905) rotate(2.4deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(34px,28px) scale(0.950) rotate(1.3deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(11px,10px) scale(0.980) rotate(0.5deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(2px,1px) scale(0.996) rotate(0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrHelix{   /* xoan oc dang tu tren */
  0% {opacity:0.0;transform:translate(513px,-560px) scale(0.400) rotate(-12.0deg);animation-timing-function:linear}
  7.7% {transform:translate(510px,-572px) scale(0.402) rotate(-12.0deg);animation-timing-function:linear}
  15.4% {transform:translate(470px,-635px) scale(0.413) rotate(-11.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(317px,-714px) scale(0.433) rotate(-11.3deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(43px,-736px) scale(0.456) rotate(-10.9deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-299px,-620px) scale(0.489) rotate(-10.2deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-294px,-270px) scale(0.546) rotate(-9.1deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(133px,-182px) scale(0.596) rotate(-8.1deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(111px,-373px) scale(0.683) rotate(-6.3deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-189px,-214px) scale(0.750) rotate(-5.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(2px,-52px) scale(0.821) rotate(-3.6deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(21px,-68px) scale(0.924) rotate(-1.5deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-9px,-8px) scale(0.984) rotate(-0.3deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
/* ===== HIỆU ỨNG BIẾN MẤT CHUYÊN DỤNG (forward 0%=ráp/hiện -> 100%=mất hẳn) —
   KHÔNG phải tua ngược của hiệu ứng VÀO. 0% = transform:none giúp chữ chờ-tới-lượt
   vẫn hiện (backwards-fill). ===== */
@keyframes ovExDissolve{   /* tan vào ánh sáng: nâng lên + phình nhẹ + mờ */
  0%   {opacity:1;transform:none}
  30%  {opacity:1;transform:translateY(-26px) scale(1.05)}
  62%  {opacity:.55;transform:translateY(-70px) scale(1.10) rotate(2deg)}
  100% {opacity:0;transform:translateY(-134px) scale(1.16) rotate(-2deg)}
}
@keyframes ovExCollapse{   /* hút SỤP về hố (mark): mọi chữ dồn về 1 điểm + xoáy + co về 0 */
  0%   {opacity:1;transform:none}
  55%  {opacity:1;transform:translate(calc(var(--dx) * .42),calc(var(--dy) * .42)) scale(.6) rotate(90deg)}
  100% {opacity:0;transform:translate(var(--dx),var(--dy)) scale(.04) rotate(230deg)}
}
@keyframes ovExWarpout{   /* vút về phía người xem: nán lại rồi phóng to lao ra + mờ */
  0%   {opacity:1;transform:none}
  28%  {opacity:1;transform:scale(1.12)}
  58%  {opacity:.8;transform:scale(1.8) rotate(-3deg)}
  100% {opacity:0;transform:scale(4.3) rotate(-9deg)}
}
@keyframes ovExImplode{   /* nổ thu về điểm (bong bóng vỡ): phình anticipation rồi co về 0 */
  0%   {opacity:1;transform:none}
  22%  {opacity:1;transform:scale(1.2) rotate(-4deg)}
  100% {opacity:0;transform:scale(.02) rotate(36deg)}
}
@keyframes ovExFall{   /* roi gravity (muot) */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(2px,0px) scale(0.998) rotate(0.0deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(9px,7px) scale(0.990) rotate(0.3deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(16px,27px) scale(0.977) rotate(1.7deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(17px,62px) scale(0.961) rotate(4.8deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(7px,107px) scale(0.945) rotate(9.5deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-6px,159px) scale(0.930) rotate(15.5deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-16px,215px) scale(0.916) rotate(22.5deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(-18px,268px) scale(0.904) rotate(29.7deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(-15px,313px) scale(0.894) rotate(36.2deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(-10px,348px) scale(0.886) rotate(41.2deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(-7px,369px) scale(0.882) rotate(44.4deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(-5px,378px) scale(0.880) rotate(45.8deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(-5px,380px) scale(0.880) rotate(46.0deg)}
}
@keyframes ovExSwirl{   /* cuon xoay RA NGOAI rong nhieu vong */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(10px,5px) scale(1.015) rotate(5.1deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(-29px,62px) scale(1.064) rotate(22.4deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-119px,-83px) scale(1.119) rotate(41.8deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(150px,-170px) scale(1.173) rotate(60.5deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(230px,205px) scale(1.223) rotate(78.1deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-211px,321px) scale(1.268) rotate(94.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-439px,-111px) scale(1.308) rotate(107.8deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(-149px,-489px) scale(1.341) rotate(119.2deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(269px,-488px) scale(1.366) rotate(128.1deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(517px,-285px) scale(1.384) rotate(134.4deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(601px,-102px) scale(1.395) rotate(138.1deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(618px,-15px) scale(1.399) rotate(139.7deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(620px,0px) scale(1.400) rotate(140.0deg)}
}
/* ===== 14 HIỆU ỨNG VÀO MỚI (đợt 2) ===== */
@keyframes ovTrCornertl{   /* goc tren-trai */
  0% {opacity:0.0;transform:translate(-560px,-380px) scale(0.550) rotate(-10.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-558px,-378px) scale(0.551) rotate(-10.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-544px,-369px) scale(0.560) rotate(-9.8deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-513px,-348px) scale(0.580) rotate(-9.3deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-463px,-314px) scale(0.611) rotate(-8.6deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-397px,-269px) scale(0.655) rotate(-7.7deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-320px,-217px) scale(0.708) rotate(-6.5deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-239px,-162px) scale(0.766) rotate(-5.2deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-162px,-110px) scale(0.826) rotate(-3.9deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-97px,-65px) scale(0.884) rotate(-2.6deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-47px,-32px) scale(0.933) rotate(-1.5deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-16px,-11px) scale(0.971) rotate(-0.6deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-2px,-1px) scale(0.994) rotate(-0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrCornerbr{   /* goc duoi-phai */
  0% {opacity:0.0;transform:translate(520px,360px) scale(0.550) rotate(9.0deg);animation-timing-function:linear}
  7.7% {transform:translate(518px,359px) scale(0.551) rotate(9.0deg);animation-timing-function:linear}
  15.4% {transform:translate(505px,350px) scale(0.560) rotate(8.8deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(476px,330px) scale(0.580) rotate(8.4deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(430px,297px) scale(0.611) rotate(7.8deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(368px,255px) scale(0.655) rotate(6.9deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(297px,206px) scale(0.708) rotate(5.8deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(222px,154px) scale(0.766) rotate(4.7deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(151px,104px) scale(0.826) rotate(3.5deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(90px,62px) scale(0.884) rotate(2.3deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(43px,30px) scale(0.933) rotate(1.3deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(14px,10px) scale(0.971) rotate(0.6deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(2px,1px) scale(0.994) rotate(0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrSlidel{   /* truot tu trai */
  0% {opacity:0.0;transform:translate(-720px,0px) scale(0.800) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-717px,0px) scale(0.801) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-699px,0px) scale(0.806) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-659px,0px) scale(0.817) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-595px,0px) scale(0.835) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-510px,0px) scale(0.858) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-412px,0px) scale(0.886) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-308px,0px) scale(0.914) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-210px,0px) scale(0.942) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-125px,0px) scale(0.965) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-61px,0px) scale(0.983) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-21px,0px) scale(0.994) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-3px,0px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrSlider{   /* truot tu phai */
  0% {opacity:0.0;transform:translate(720px,0px) scale(0.800) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(717px,0px) scale(0.801) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(699px,0px) scale(0.806) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(659px,0px) scale(0.817) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(595px,0px) scale(0.835) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(510px,0px) scale(0.858) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(412px,0px) scale(0.886) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(308px,0px) scale(0.914) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(210px,0px) scale(0.942) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(125px,0px) scale(0.965) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(61px,0px) scale(0.983) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(21px,0px) scale(0.994) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(3px,0px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrRise{   /* dang len tu duoi */
  0% {opacity:0.0;transform:translate(0px,460px) scale(0.700) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(0px,458px) scale(0.701) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(0px,447px) scale(0.709) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(0px,421px) scale(0.725) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(0px,380px) scale(0.752) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(0px,326px) scale(0.787) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(0px,263px) scale(0.828) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(0px,197px) scale(0.872) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(0px,134px) scale(0.913) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(0px,80px) scale(0.948) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(0px,39px) scale(0.975) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(0px,13px) scale(0.991) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(0px,2px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrDescend{   /* ha tu tren */
  0% {opacity:0.0;transform:translate(0px,-460px) scale(0.700) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(0px,-458px) scale(0.701) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(0px,-447px) scale(0.709) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(0px,-421px) scale(0.725) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(0px,-380px) scale(0.752) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(0px,-326px) scale(0.787) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(0px,-263px) scale(0.828) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(0px,-197px) scale(0.872) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(0px,-134px) scale(0.913) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(0px,-80px) scale(0.948) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(0px,-39px) scale(0.975) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(0px,-13px) scale(0.991) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(0px,-2px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrZoomspin{   /* bay xoan oc RONG vua xoay vua phinh */
  0% {opacity:0.0;transform:translate(280px,-485px) scale(0.050) rotate(-420.0deg);animation-timing-function:linear}
  7.7% {transform:translate(294px,-475px) scale(0.052) rotate(-419.2deg);animation-timing-function:linear}
  15.4% {transform:translate(373px,-405px) scale(0.063) rotate(-414.3deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(494px,-199px) scale(0.089) rotate(-402.9deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(471px,176px) scale(0.132) rotate(-383.9deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(75px,454px) scale(0.193) rotate(-356.9deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-378px,151px) scale(0.272) rotate(-322.1deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-106px,-327px) scale(0.367) rotate(-280.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(274px,1px) scale(0.476) rotate(-231.5deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-101px,171px) scale(0.599) rotate(-177.4deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-40px,-116px) scale(0.731) rotate(-118.9deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(46px,24px) scale(0.869) rotate(-57.7deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-4px,5px) scale(0.977) rotate(-10.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrTornado{   /* loc chat tu duoi */
  0% {opacity:0.0;transform:translate(360px,560px) scale(0.400) rotate(-14.0deg);animation-timing-function:linear}
  7.7% {transform:translate(358px,571px) scale(0.402) rotate(-13.9deg);animation-timing-function:linear}
  15.4% {transform:translate(313px,625px) scale(0.414) rotate(-13.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(163px,675px) scale(0.432) rotate(-13.3deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-91px,658px) scale(0.455) rotate(-12.7deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-298px,435px) scale(0.498) rotate(-11.7deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(38px,272px) scale(0.545) rotate(-10.6deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(109px,432px) scale(0.620) rotate(-8.9deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-188px,256px) scale(0.685) rotate(-7.4deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(108px,151px) scale(0.752) rotate(-5.8deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-59px,158px) scale(0.842) rotate(-3.7deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-12px,37px) scale(0.909) rotate(-2.1deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(6px,10px) scale(0.987) rotate(-0.3deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrZigzag{   /* zic-zac (lam muot) */
  0% {opacity:0.0;transform:translate(0px,-480px) scale(0.600) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(4px,-479px) scale(0.601) rotate(0.2deg);animation-timing-function:linear}
  15.4% {transform:translate(27px,-472px) scale(0.606) rotate(1.2deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(79px,-456px) scale(0.620) rotate(3.4deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(157px,-419px) scale(0.651) rotate(6.5deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(89px,-351px) scale(0.708) rotate(3.3deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-38px,-307px) scale(0.744) rotate(-1.3deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-127px,-226px) scale(0.812) rotate(-3.6deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-10px,-164px) scale(0.863) rotate(-0.2deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(92px,-110px) scale(0.908) rotate(1.5deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(71px,-42px) scale(0.965) rotate(0.5deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(24px,-14px) scale(0.989) rotate(0.1deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(3px,-2px) scale(0.998) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrMagnet{   /* nam cham vuot roi snap */
  0% {opacity:0.0;transform:translate(420px,0px) scale(0.700) rotate(0.0deg);animation-timing-function:linear}
  7.7% {transform:translate(418px,0px) scale(0.701) rotate(0.0deg);animation-timing-function:linear}
  15.4% {transform:translate(408px,0px) scale(0.706) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(385px,0px) scale(0.719) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(347px,0px) scale(0.739) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(297px,0px) scale(0.767) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(240px,0px) scale(0.802) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(179px,0px) scale(0.842) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(122px,0px) scale(0.886) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(73px,0px) scale(0.929) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(35px,0px) scale(0.965) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(12px,0px) scale(0.988) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(2px,0px) scale(0.998) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrUnfold{   /* mo ra tu vach mong (scaleX 0->1) */
  0% {opacity:0;transform:translate(0px,0px) scale(0.040,0.500) rotate(0.0deg);animation-timing-function:linear}
  12% {transform:translate(0px,0px) scale(0.160,0.562) rotate(0.0deg);animation-timing-function:linear}
  25% {opacity:1;transform:translate(0px,0px) scale(0.280,0.625) rotate(0.0deg);animation-timing-function:linear}
  38% {opacity:1;transform:translate(0px,0px) scale(0.400,0.688) rotate(0.0deg);animation-timing-function:linear}
  50% {opacity:1;transform:translate(0px,0px) scale(0.520,0.750) rotate(0.0deg);animation-timing-function:linear}
  62% {opacity:1;transform:translate(0px,0px) scale(0.640,0.812) rotate(0.0deg);animation-timing-function:linear}
  75% {opacity:1;transform:translate(0px,0px) scale(0.760,0.875) rotate(0.0deg);animation-timing-function:linear}
  88% {opacity:1;transform:translate(0px,0px) scale(0.880,0.938) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrOrbit{   /* cung elip nghieng RONG */
  0% {opacity:0.0;transform:translate(0px,-400px) scale(0.460) rotate(-12.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-10px,-400px) scale(0.462) rotate(-12.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-73px,-397px) scale(0.472) rotate(-11.7deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-215px,-380px) scale(0.496) rotate(-11.2deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-435px,-316px) scale(0.537) rotate(-10.3deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-670px,-134px) scale(0.606) rotate(-8.8deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-586px,175px) scale(0.706) rotate(-6.5deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-251px,320px) scale(0.778) rotate(-4.9deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(99px,344px) scale(0.836) rotate(-3.6deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(396px,289px) scale(0.889) rotate(-2.5deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(598px,183px) scale(0.937) rotate(-1.4deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(685px,71px) scale(0.977) rotate(-0.5deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(700px,10px) scale(0.997) rotate(-0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrArcup{   /* voi nuoc len */
  0% {opacity:0.0;transform:translate(-300px,300px) scale(0.550) rotate(6.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-299px,298px) scale(0.551) rotate(6.0deg);animation-timing-function:linear}
  15.4% {transform:translate(-296px,285px) scale(0.557) rotate(5.9deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-287px,256px) scale(0.570) rotate(5.7deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-273px,209px) scale(0.591) rotate(5.5deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-253px,148px) scale(0.621) rotate(5.1deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-226px,78px) scale(0.661) rotate(4.5deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-191px,8px) scale(0.714) rotate(3.8deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(-138px,-42px) scale(0.793) rotate(2.8deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(-78px,-31px) scale(0.883) rotate(1.6deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(-38px,-4px) scale(0.943) rotate(0.8deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(-11px,8px) scale(0.984) rotate(0.2deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(-1px,3px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrCurl{   /* cuon RONG tu goc tren-trai */
  0% {opacity:0.0;transform:translate(-800px,0px) scale(0.460) rotate(-70.0deg);animation-timing-function:linear}
  7.7% {transform:translate(-798px,-7px) scale(0.461) rotate(-69.9deg);animation-timing-function:linear}
  15.4% {transform:translate(-786px,-47px) scale(0.467) rotate(-69.1deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-752px,-136px) scale(0.482) rotate(-67.2deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-673px,-267px) scale(0.507) rotate(-64.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-518px,-392px) scale(0.545) rotate(-59.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-289px,-407px) scale(0.596) rotate(-52.4deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-76px,-287px) scale(0.646) rotate(-45.9deg);animation-timing-function:linear}
  61.5% {opacity:1.0;transform:translate(79px,-112px) scale(0.696) rotate(-39.4deg);animation-timing-function:linear}
  69.2% {opacity:1.0;transform:translate(171px,67px) scale(0.756) rotate(-31.6deg);animation-timing-function:linear}
  76.9% {opacity:1.0;transform:translate(100px,97px) scale(0.877) rotate(-16.0deg);animation-timing-function:linear}
  84.6% {opacity:1.0;transform:translate(32px,31px) scale(0.935) rotate(-8.4deg);animation-timing-function:linear}
  92.3% {opacity:1.0;transform:translate(3px,3px) scale(0.980) rotate(-2.6deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
/* ===== 10 HIỆU ỨNG BIẾN MẤT MỚI (đợt 2, forward) ===== */
@keyframes ovExOutl{   /* bay sang trai */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(-2px,0px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(-18px,0px) scale(0.993) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-52px,0px) scale(0.983) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(-107px,0px) scale(0.967) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-181px,0px) scale(0.949) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-265px,0px) scale(0.928) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-355px,0px) scale(0.908) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(-439px,0px) scale(0.889) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(-512px,0px) scale(0.873) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(-568px,0px) scale(0.861) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(-602px,0px) scale(0.854) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(-617px,0px) scale(0.851) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(-620px,0px) scale(0.850) rotate(0.0deg)}
}
@keyframes ovExOutr{   /* bay sang phai */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(2px,0px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(18px,0px) scale(0.993) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(52px,0px) scale(0.983) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(107px,0px) scale(0.967) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(181px,0px) scale(0.949) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(265px,0px) scale(0.928) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(355px,0px) scale(0.908) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(439px,0px) scale(0.889) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(512px,0px) scale(0.873) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(568px,0px) scale(0.861) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(602px,0px) scale(0.854) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(617px,0px) scale(0.851) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(620px,0px) scale(0.850) rotate(0.0deg)}
}
@keyframes ovExVanup{   /* troi len */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(0px,-1px) scale(1.000) rotate(0.0deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(0px,-10px) scale(1.002) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(0px,-30px) scale(1.005) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(0px,-62px) scale(1.010) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(0px,-105px) scale(1.016) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(0px,-154px) scale(1.023) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(0px,-206px) scale(1.030) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(0px,-255px) scale(1.037) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(0px,-298px) scale(1.042) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(0px,-330px) scale(1.046) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(0px,-350px) scale(1.049) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(0px,-359px) scale(1.050) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,-360px) scale(1.050) rotate(0.0deg)}
}
@keyframes ovExSink{   /* chim xuong */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(0px,1px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(0px,9px) scale(0.995) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(0px,27px) scale(0.987) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(0px,55px) scale(0.977) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(0px,93px) scale(0.964) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(0px,137px) scale(0.951) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(0px,183px) scale(0.937) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(0px,227px) scale(0.925) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(0px,264px) scale(0.915) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(0px,293px) scale(0.907) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(0px,311px) scale(0.902) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(0px,319px) scale(0.900) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,320px) scale(0.900) rotate(0.0deg)}
}
@keyframes ovExSpinout{   /* bay xoan oc RA NGOAI vua xoay */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(4px,3px) scale(0.989) rotate(9.2deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(-17px,39px) scale(0.926) rotate(59.4deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-76px,-84px) scale(0.825) rotate(139.8deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(184px,-56px) scale(0.723) rotate(221.3deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(1px,270px) scale(0.629) rotate(296.8deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-340px,-33px) scale(0.544) rotate(364.6deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(-10px,-406px) scale(0.471) rotate(423.3deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(425px,-177px) scale(0.410) rotate(471.9deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(432px,257px) scale(0.363) rotate(509.6deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(197px,495px) scale(0.330) rotate(536.2deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(-7px,551px) scale(0.310) rotate(552.1deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(-101px,550px) scale(0.301) rotate(558.9deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(-116px,548px) scale(0.300) rotate(560.0deg)}
}
@keyframes ovExZoomout{   /* co ve 0 */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:none;animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(0px,0px) scale(0.972) rotate(0.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(0px,0px) scale(0.917) rotate(0.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(0px,0px) scale(0.830) rotate(0.0deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(0px,0px) scale(0.715) rotate(0.0deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(0px,0px) scale(0.580) rotate(0.0deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(0px,0px) scale(0.440) rotate(0.0deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(0px,0px) scale(0.305) rotate(0.0deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(0px,0px) scale(0.190) rotate(0.0deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(0px,0px) scale(0.103) rotate(0.0deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(0px,0px) scale(0.048) rotate(0.0deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(0px,0px) scale(0.024) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,0px) scale(0.020) rotate(0.0deg)}
}
@keyframes ovExStreak{   /* keo dai NGANG (scaleX) thanh vet roi mo */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  12% {opacity:1;transform:translate(-8px,0px) scale(1.625,0.950) rotate(0.0deg);animation-timing-function:linear}
  25% {opacity:1;transform:translate(-15px,0px) scale(2.250,0.900) rotate(0.0deg);animation-timing-function:linear}
  38% {opacity:1;transform:translate(-22px,0px) scale(2.875,0.850) rotate(0.0deg);animation-timing-function:linear}
  50% {opacity:0.91;transform:translate(-30px,0px) scale(3.500,0.800) rotate(0.0deg);animation-timing-function:linear}
  62% {opacity:0.68;transform:translate(-38px,0px) scale(4.125,0.750) rotate(0.0deg);animation-timing-function:linear}
  75% {opacity:0.45;transform:translate(-45px,0px) scale(4.750,0.700) rotate(0.0deg);animation-timing-function:linear}
  88% {opacity:0.23;transform:translate(-52px,0px) scale(5.375,0.650) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(-60px,0px) scale(6.000,0.600) rotate(0.0deg)}
}
@keyframes ovExFlicker{   /* chap chon hologram tat dan roi bien mat */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  15% {opacity:0.2;transform:translate(6px,-4px) scale(1.020) rotate(1.0deg);animation-timing-function:linear}
  28% {opacity:0.9;transform:translate(-4px,2px) scale(0.990) rotate(-1.0deg);animation-timing-function:linear}
  45% {opacity:0.15;transform:translate(8px,-8px) scale(1.030) rotate(2.0deg);animation-timing-function:linear}
  60% {opacity:0.7;transform:translate(-6px,4px) scale(0.970) rotate(-1.0deg);animation-timing-function:linear}
  78% {opacity:0.1;transform:translate(10px,-14px) scale(1.050) rotate(3.0deg);animation-timing-function:linear}
  100% {opacity:0;transform:translate(0px,-40px) scale(0.900) rotate(0.0deg)}
}
@keyframes ovExTornup{   /* hut xoay len */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(44px,1px) scale(0.976) rotate(2.9deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(-36px,-12px) scale(0.940) rotate(7.2deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(-119px,-143px) scale(0.883) rotate(14.0deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(161px,-215px) scale(0.828) rotate(20.6deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(-73px,-143px) scale(0.752) rotate(29.8deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(-240px,-423px) scale(0.687) rotate(37.5deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(227px,-502px) scale(0.644) rotate(42.7deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(210px,-300px) scale(0.583) rotate(50.1deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(-183px,-318px) scale(0.555) rotate(53.4deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(-451px,-443px) scale(0.532) rotate(56.2deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(-485px,-612px) scale(0.509) rotate(58.9deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(-431px,-674px) scale(0.501) rotate(59.9deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(-421px,-682px) scale(0.500) rotate(60.0deg)}
}
@keyframes ovExPeel{   /* cuon ve goc tren-phai */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  7.7% {opacity:1.0;transform:translate(1px,-1px) scale(0.996) rotate(-0.6deg);animation-timing-function:linear}
  15.4% {opacity:1.0;transform:translate(8px,-8px) scale(0.982) rotate(-3.0deg);animation-timing-function:linear}
  23.1% {opacity:1.0;transform:translate(24px,-24px) scale(0.957) rotate(-7.2deg);animation-timing-function:linear}
  30.8% {opacity:1.0;transform:translate(51px,-51px) scale(0.924) rotate(-12.7deg);animation-timing-function:linear}
  38.5% {opacity:1.0;transform:translate(86px,-86px) scale(0.885) rotate(-19.1deg);animation-timing-function:linear}
  46.2% {opacity:1.0;transform:translate(127px,-127px) scale(0.845) rotate(-25.8deg);animation-timing-function:linear}
  53.8% {opacity:1.0;transform:translate(170px,-170px) scale(0.806) rotate(-32.4deg);animation-timing-function:linear}
  61.5% {opacity:0.85;transform:translate(212px,-212px) scale(0.770) rotate(-38.3deg);animation-timing-function:linear}
  69.2% {opacity:0.68;transform:translate(247px,-247px) scale(0.741) rotate(-43.1deg);animation-timing-function:linear}
  76.9% {opacity:0.51;transform:translate(274px,-274px) scale(0.720) rotate(-46.7deg);animation-timing-function:linear}
  84.6% {opacity:0.34;transform:translate(291px,-291px) scale(0.707) rotate(-48.9deg);animation-timing-function:linear}
  92.3% {opacity:0.17;transform:translate(299px,-299px) scale(0.701) rotate(-49.8deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(300px,-300px) scale(0.700) rotate(-50.0deg)}
}

/* ORBIT ĐỒNG TÂM với CHẤM ĐỎ LỚN: chữ quay quanh tâm mark (var --dx/--dy) rồi đáp, xuất hiện tuần tự */
@keyframes ovTrOrbitdot{   /* VAO: bay vao NGHIENG -> tha xuong gia toc -> BAT len -> lac tim goc dap -> on dinh (SpaceX/iron-man) */
  0% {opacity:0;transform:translate(calc(1.433 * var(--dx) - 0.25 * var(--dy)),calc(0.25 * var(--dx) + 1.433 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.786);animation-timing-function:linear}
  4% {transform:translate(calc(1.4306 * var(--dx) - 0.2541 * var(--dy)),calc(0.2541 * var(--dx) + 1.4306 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.786);animation-timing-function:linear}
  8% {transform:translate(calc(1.4169 * var(--dx) - 0.2797 * var(--dy)),calc(0.2797 * var(--dx) + 1.4169 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.787);animation-timing-function:linear}
  12% {opacity:1;transform:translate(calc(1.3854 * var(--dx) - 0.3405 * var(--dy)),calc(0.3405 * var(--dx) + 1.3854 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.793);animation-timing-function:linear}
  16% {opacity:1;transform:translate(calc(1.3207 * var(--dx) - 0.4371 * var(--dy)),calc(0.4371 * var(--dx) + 1.3207 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.806);animation-timing-function:linear}
  20% {opacity:1;transform:translate(calc(1.1993 * var(--dx) - 0.5518 * var(--dy)),calc(0.5518 * var(--dx) + 1.1993 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.828);animation-timing-function:linear}
  24% {opacity:1;transform:translate(calc(1.0056 * var(--dx) - 0.6456 * var(--dy)),calc(0.6456 * var(--dx) + 1.0056 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.856);animation-timing-function:linear}
  28% {opacity:1;transform:translate(calc(0.7534 * var(--dx) - 0.6701 * var(--dy)),calc(0.6701 * var(--dx) + 0.7534 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.889);animation-timing-function:linear}
  32% {opacity:1;transform:translate(calc(0.4901 * var(--dx) - 0.598 * var(--dy)),calc(0.598 * var(--dx) + 0.4901 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.923);animation-timing-function:linear}
  36% {opacity:1;transform:translate(calc(0.2714 * var(--dx) - 0.4462 * var(--dy)),calc(0.4462 * var(--dx) + 0.2714 * var(--dy) - 260px)) rotate(-22.00deg) scale(0.956);animation-timing-function:linear}
  40% {opacity:1;transform:translate(calc(0.1267 * var(--dx) - 0.2675 * var(--dy)),calc(0.2675 * var(--dx) + 0.1267 * var(--dy) - 250.6402px)) rotate(-21.01deg) scale(0.983);animation-timing-function:linear}
  44% {opacity:1;transform:translate(calc(0.0494 * var(--dx) - 0.118 * var(--dy)),calc(0.118 * var(--dx) + 0.0494 * var(--dy) - 223.8362px)) rotate(-16.35deg) scale(1.002);animation-timing-function:linear}
  48% {opacity:1;transform:translate(calc(0.0147 * var(--dx) - 0.0298 * var(--dy)),calc(0.0298 * var(--dx) + 0.0147 * var(--dy) - 180.2643px)) rotate(-9.14deg) scale(1.011);animation-timing-function:linear}
  52% {opacity:1;transform:translate(calc(0.002 * var(--dx) - 0.0013 * var(--dy)),calc(0.0013 * var(--dx) + 0.002 * var(--dy) - 120.2721px)) rotate(-2.84deg) scale(1.011);animation-timing-function:linear}
  56% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 44.0975px)) rotate(-0.14deg) scale(1.004);animation-timing-function:linear}
  60% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 36.7674px)) rotate(-3.87deg) scale(1.004);animation-timing-function:linear}
  64% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 65.7348px)) rotate(-6.92deg) scale(1.007);animation-timing-function:linear}
  68% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 41.9439px)) rotate(-4.42deg) scale(1.004);animation-timing-function:linear}
  72% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy))) rotate(0.00deg) scale(1.000);animation-timing-function:linear}
  76% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) + 26.5542px)) rotate(2.80deg) scale(0.997);animation-timing-function:linear}
  80% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) + 26.3467px)) rotate(2.77deg) scale(0.997);animation-timing-function:linear}
  84% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) + 9.3295px)) rotate(0.98deg) scale(0.999);animation-timing-function:linear}
  88% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 7.4232px)) rotate(-0.78deg) scale(1.001);animation-timing-function:linear}
  92% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 13.2716px)) rotate(-1.40deg) scale(1.001);animation-timing-function:linear}
  96% {opacity:1;transform:translate(calc(0 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0 * var(--dy) - 8.4683px)) rotate(-0.89deg) scale(1.001);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovExOrbitdot{   /* RA: nhun roi nghieng bay len + mo */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  5.9% {opacity:1;transform:translate(calc(0.0015 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0.0015 * var(--dy) + 36.5918px)) rotate(0.00deg) scale(0.999);animation-timing-function:linear}
  11.8% {opacity:1;transform:translate(calc(0.0107 * var(--dx) + 0 * var(--dy)),calc(0 * var(--dx) + 0.0107 * var(--dy) + 29.5604px)) rotate(0.00deg) scale(0.994);animation-timing-function:linear}
  17.6% {opacity:1;transform:translate(calc(0.032 * var(--dx) + 0.0069 * var(--dy)),calc(-0.0069 * var(--dx) + 0.032 * var(--dy))) rotate(0.09deg) scale(0.983);animation-timing-function:linear}
  23.5% {opacity:1;transform:translate(calc(0.0683 * var(--dx) + 0.0506 * var(--dy)),calc(-0.0506 * var(--dx) + 0.0683 * var(--dy) - 2.2566px)) rotate(0.43deg) scale(0.965);animation-timing-function:linear}
  29.4% {opacity:1;transform:translate(calc(0.1268 * var(--dx) + 0.1472 * var(--dy)),calc(-0.1472 * var(--dx) + 0.1268 * var(--dy) - 11.3677px)) rotate(1.13deg) scale(0.940);animation-timing-function:linear}
  35.3% {opacity:1;transform:translate(calc(0.2236 * var(--dx) + 0.2878 * var(--dy)),calc(-0.2878 * var(--dx) + 0.2236 * var(--dy) - 29.9758px)) rotate(2.22deg) scale(0.911);animation-timing-function:linear}
  41.2% {opacity:0.98;transform:translate(calc(0.3755 * var(--dx) + 0.4411 * var(--dy)),calc(-0.4411 * var(--dx) + 0.3755 * var(--dy) - 58.5755px)) rotate(3.67deg) scale(0.878);animation-timing-function:linear}
  47.1% {opacity:0.88;transform:translate(calc(0.5835 * var(--dx) + 0.5627 * var(--dy)),calc(-0.5627 * var(--dx) + 0.5835 * var(--dy) - 95.9765px)) rotate(5.41deg) scale(0.844);animation-timing-function:linear}
  52.9% {opacity:0.78;transform:translate(calc(0.8233 * var(--dx) + 0.6145 * var(--dy)),calc(-0.6145 * var(--dx) + 0.8233 * var(--dy) - 139.7402px)) rotate(7.31deg) scale(0.812);animation-timing-function:linear}
  58.8% {opacity:0.69;transform:translate(calc(1.0532 * var(--dx) + 0.5845 * var(--dy)),calc(-0.5845 * var(--dx) + 1.0532 * var(--dy) - 186.616px)) rotate(9.27deg) scale(0.785);animation-timing-function:linear}
  64.7% {opacity:0.59;transform:translate(calc(1.237 * var(--dx) + 0.4919 * var(--dy)),calc(-0.4919 * var(--dx) + 1.237 * var(--dy) - 232.9778px)) rotate(11.14deg) scale(0.764);animation-timing-function:linear}
  70.6% {opacity:0.49;transform:translate(calc(1.3609 * var(--dx) + 0.3724 * var(--dy)),calc(-0.3724 * var(--dx) + 1.3609 * var(--dy) - 275.2607px)) rotate(12.80deg) scale(0.750);animation-timing-function:linear}
  76.5% {opacity:0.39;transform:translate(calc(1.4329 * var(--dx) + 0.2587 * var(--dy)),calc(-0.2587 * var(--dx) + 1.4329 * var(--dy) - 310.3976px)) rotate(14.14deg) scale(0.742);animation-timing-function:linear}
  82.4% {opacity:0.29;transform:translate(calc(1.4702 * var(--dx) + 0.1704 * var(--dy)),calc(-0.1704 * var(--dx) + 1.4702 * var(--dy) - 336.2552px)) rotate(15.12deg) scale(0.740);animation-timing-function:linear}
  88.2% {opacity:0.2;transform:translate(calc(1.4866 * var(--dx) + 0.1149 * var(--dy)),calc(-0.1149 * var(--dx) + 1.4866 * var(--dy) - 352.0711px)) rotate(15.71deg) scale(0.740);animation-timing-function:linear}
  94.1% {opacity:0.1;transform:translate(calc(1.4917 * var(--dx) + 0.0908 * var(--dy)),calc(-0.0908 * var(--dx) + 1.4917 * var(--dy) - 358.8899px)) rotate(15.96deg) scale(0.740);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(calc(1.4924 * var(--dx) + 0.0868 * var(--dy)),calc(-0.0868 * var(--dx) + 1.4924 * var(--dy) - 360px)) rotate(16.00deg) scale(0.740);animation-timing-function:linear}
}
/* ===== ĐỢT 3 SÁNG TẠO: 13 VÀO + 10 BIẾN MẤT mới ===== */
@keyframes ovTrBoomerang{   /* boomerang: tu phai, vot qua roi quay ve */
  0% {opacity:0.0;transform:translate(700px,0px) scale(0.700) rotate(0.0deg);animation-timing-function:linear}
  6.7% {transform:translate(698px,0px) scale(0.701) rotate(0.0deg);animation-timing-function:linear}
  13.3% {transform:translate(686px,-3px) scale(0.706) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(656px,-8px) scale(0.719) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(608px,-16px) scale(0.739) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(541px,-26px) scale(0.768) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(460px,-35px) scale(0.803) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(368px,-40px) scale(0.842) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(272px,-39px) scale(0.872) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(180px,-37px) scale(0.889) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(97px,-33px) scale(0.906) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(30px,-29px) scale(0.924) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-18px,-21px) scale(0.947) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-14px,-5px) scale(0.988) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-2px,-1px) scale(0.998) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrPinwheel{   /* chong chong: tu goc tren-trai xoay 1.5 vong */
  0% {opacity:0.0;transform:translate(-360px,-360px) scale(0.450) rotate(540.0deg);animation-timing-function:linear}
  6.7% {transform:translate(-359px,-359px) scale(0.451) rotate(538.6deg);animation-timing-function:linear}
  13.3% {transform:translate(-353px,-353px) scale(0.461) rotate(529.6deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(-339px,-339px) scale(0.482) rotate(508.7deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(-316px,-316px) scale(0.517) rotate(474.2deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-284px,-284px) scale(0.565) rotate(426.7deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-246px,-246px) scale(0.625) rotate(368.6deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-202px,-202px) scale(0.691) rotate(303.7deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-158px,-158px) scale(0.759) rotate(236.3deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-114px,-114px) scale(0.825) rotate(171.4deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(-76px,-76px) scale(0.885) rotate(113.3deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-44px,-44px) scale(0.933) rotate(65.8deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-21px,-21px) scale(0.968) rotate(31.3deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-7px,-7px) scale(0.989) rotate(10.4deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-1px,-1px) scale(0.999) rotate(1.4deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrMeteor{   /* sao bang: lao tu tren-phai cheo xuong nhanh */
  0% {opacity:0.0;transform:translate(560px,-480px) scale(0.500) rotate(-20.0deg);animation-timing-function:linear}
  6.7% {transform:translate(558px,-479px) scale(0.501) rotate(-20.0deg);animation-timing-function:linear}
  13.3% {transform:translate(549px,-471px) scale(0.506) rotate(-19.7deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(527px,-452px) scale(0.520) rotate(-19.2deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(491px,-421px) scale(0.542) rotate(-18.3deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(442px,-379px) scale(0.573) rotate(-17.1deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(381px,-327px) scale(0.613) rotate(-15.5deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(314px,-269px) scale(0.660) rotate(-13.6deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(244px,-209px) scale(0.713) rotate(-11.5deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(176px,-151px) scale(0.769) rotate(-9.3deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(116px,-100px) scale(0.825) rotate(-7.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(67px,-57px) scale(0.879) rotate(-4.9deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(31px,-27px) scale(0.927) rotate(-2.9deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(10px,-9px) scale(0.966) rotate(-1.4deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(1px,-1px) scale(0.992) rotate(-0.3deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrCatapult{   /* may ban da: phong tu duoi vong qua dinh roi dap */
  0% {opacity:0.0;transform:translate(-220px,400px) scale(0.550) rotate(0.0deg);animation-timing-function:linear}
  6.7% {transform:translate(-220px,398px) scale(0.551) rotate(0.0deg);animation-timing-function:linear}
  13.3% {transform:translate(-218px,384px) scale(0.555) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(-213px,351px) scale(0.564) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(-206px,297px) scale(0.579) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-195px,222px) scale(0.601) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-181px,131px) scale(0.630) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-164px,29px) scale(0.664) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-143px,-76px) scale(0.708) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-112px,-173px) scale(0.770) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(-53px,-171px) scale(0.892) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-26px,-101px) scale(0.946) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-12px,-48px) scale(0.976) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-4px,-16px) scale(0.992) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(0px,-2px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrWhirl{   /* loc xoay rat chat nhieu vong vao tam */
  0% {opacity:0.0;transform:translate(320px,0px) scale(0.300) rotate(-160.0deg);animation-timing-function:linear}
  6.7% {transform:translate(319px,9px) scale(0.301) rotate(-159.8deg);animation-timing-function:linear}
  13.3% {transform:translate(310px,66px) scale(0.307) rotate(-158.4deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(250px,184px) scale(0.321) rotate(-155.2deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(62px,293px) scale(0.345) rotate(-149.8deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-211px,190px) scale(0.379) rotate(-142.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-214px,-154px) scale(0.423) rotate(-131.8deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(156px,-181px) scale(0.478) rotate(-119.4deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(103px,183px) scale(0.541) rotate(-105.0deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-178px,-10px) scale(0.611) rotate(-89.0deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(102px,-101px) scale(0.686) rotate(-71.7deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-6px,107px) scale(0.765) rotate(-53.7deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-44px,-56px) scale(0.844) rotate(-35.5deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(36px,4px) scale(0.922) rotate(-17.9deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-3px,6px) scale(0.985) rotate(-3.5deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrBreeze{   /* con gio: tu trai luot vao du dua rat nhe */
  0% {opacity:0.0;transform:translate(-520px,0px) scale(0.780) rotate(0.0deg);animation-timing-function:linear}
  6.7% {transform:translate(-519px,1px) scale(0.781) rotate(0.1deg);animation-timing-function:linear}
  13.3% {transform:translate(-511px,6px) scale(0.784) rotate(0.6deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(-493px,18px) scale(0.791) rotate(1.7deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(-462px,35px) scale(0.805) rotate(3.1deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-414px,47px) scale(0.825) rotate(3.9deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-355px,37px) scale(0.850) rotate(2.8deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-295px,7px) scale(0.875) rotate(0.4deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-233px,-25px) scale(0.901) rotate(-1.4deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-168px,-38px) scale(0.929) rotate(-1.6deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(-109px,-26px) scale(0.954) rotate(-0.8deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-63px,-7px) scale(0.973) rotate(-0.1deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-30px,7px) scale(0.987) rotate(0.1deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-10px,15px) scale(0.996) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-1px,18px) scale(0.999) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrIrisin{   /* khep mong mat: no tu 0 + xoay nua vong */
  0% {opacity:0.0;transform:translate(0px,18px) scale(0.020) rotate(200.0deg);animation-timing-function:linear}
  6.7% {transform:translate(0px,18px) scale(0.023) rotate(199.5deg);animation-timing-function:linear}
  13.3% {transform:translate(2px,18px) scale(0.039) rotate(196.2deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(6px,17px) scale(0.077) rotate(188.4deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(12px,13px) scale(0.139) rotate(175.6deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(17px,4px) scale(0.226) rotate(158.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(16px,-7px) scale(0.331) rotate(136.5deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(7px,-17px) scale(0.449) rotate(112.5deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-7px,-17px) scale(0.571) rotate(87.5deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-16px,-7px) scale(0.689) rotate(63.5deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(-17px,4px) scale(0.794) rotate(42.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-12px,13px) scale(0.881) rotate(24.4deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-6px,17px) scale(0.943) rotate(11.6deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-2px,18px) scale(0.981) rotate(3.8deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(0px,18px) scale(0.997) rotate(0.5deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrDive{   /* bo nhao thang dung tu tren roi ghim */
  0% {opacity:0.0;transform:translate(130px,-580px) scale(0.550) rotate(-8.0deg);animation-timing-function:linear}
  6.7% {transform:translate(130px,-578px) scale(0.551) rotate(-8.0deg);animation-timing-function:linear}
  13.3% {transform:translate(129px,-568px) scale(0.555) rotate(-7.9deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(126px,-545px) scale(0.564) rotate(-7.7deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(121px,-507px) scale(0.581) rotate(-7.4deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(114px,-454px) scale(0.605) rotate(-7.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(105px,-389px) scale(0.635) rotate(-6.5deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(95px,-317px) scale(0.673) rotate(-5.8deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(82px,-242px) scale(0.716) rotate(-5.1deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(68px,-171px) scale(0.763) rotate(-4.2deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(54px,-108px) scale(0.815) rotate(-3.3deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(38px,-57px) scale(0.867) rotate(-2.4deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(23px,-22px) scale(0.920) rotate(-1.4deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(10px,-4px) scale(0.967) rotate(-0.6deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(1px,0px) scale(0.995) rotate(-0.1deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrCascade{   /* thac cheo tu tren-trai (delay tao bac thang) */
  0% {opacity:0.0;transform:translate(-300px,-380px) scale(0.620) rotate(0.0deg);animation-timing-function:linear}
  6.7% {transform:translate(-299px,-379px) scale(0.621) rotate(0.0deg);animation-timing-function:linear}
  13.3% {transform:translate(-294px,-373px) scale(0.626) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(-283px,-358px) scale(0.638) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(-263px,-334px) scale(0.659) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-237px,-300px) scale(0.688) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-205px,-259px) scale(0.724) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-168px,-213px) scale(0.765) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-131px,-166px) scale(0.809) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-95px,-120px) scale(0.854) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(-63px,-79px) scale(0.897) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(-36px,-46px) scale(0.935) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(-17px,-22px) scale(0.965) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-6px,-7px) scale(0.986) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-1px,-1px) scale(0.997) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrGyre{   /* xoay elip nghieng nguoc chieu vao */
  0% {opacity:0.0;transform:translate(322px,167px) scale(0.400) rotate(0.0deg);animation-timing-function:linear}
  6.7% {transform:translate(325px,164px) scale(0.401) rotate(0.0deg);animation-timing-function:linear}
  13.3% {transform:translate(345px,143px) scale(0.406) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(380px,86px) scale(0.419) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(383px,-22px) scale(0.444) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(285px,-136px) scale(0.476) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(110px,-195px) scale(0.509) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-97px,-179px) scale(0.546) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-253px,-45px) scale(0.600) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:1.0;transform:translate(-134px,103px) scale(0.666) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:1.0;transform:translate(49px,104px) scale(0.720) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:1.0;transform:translate(120px,-6px) scale(0.797) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:1.0;transform:translate(22px,-45px) scale(0.864) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:1.0;transform:translate(-27px,-11px) scale(0.935) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:1.0;transform:translate(-4px,1px) scale(0.988) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrSpringside{   /* lo xo tu phai: truot vao rung dan oan dinh */
  0% {opacity:0;transform:translate(660px,0) scale(0.820);animation-timing-function:linear}
  6% {transform:translate(515px,0) scale(0.831);animation-timing-function:linear}
  12% {transform:translate(333px,0) scale(0.842);animation-timing-function:linear}
  19% {opacity:1;transform:translate(152px,0) scale(0.854);animation-timing-function:linear}
  25% {opacity:1;transform:translate(0px,0) scale(0.865);animation-timing-function:linear}
  31% {opacity:1;transform:translate(-109px,0) scale(0.876);animation-timing-function:linear}
  38% {opacity:1;transform:translate(-170px,0) scale(0.887);animation-timing-function:linear}
  44% {opacity:1;transform:translate(-187px,0) scale(0.899);animation-timing-function:linear}
  50% {opacity:1;transform:translate(-171px,0) scale(0.910);animation-timing-function:linear}
  56% {opacity:1;transform:translate(-134px,0) scale(0.921);animation-timing-function:linear}
  62% {opacity:1;transform:translate(-86px,0) scale(0.932);animation-timing-function:linear}
  69% {opacity:1;transform:translate(-39px,0) scale(0.944);animation-timing-function:linear}
  75% {opacity:1;transform:translate(0px,0) scale(0.955);animation-timing-function:linear}
  81% {opacity:1;transform:translate(28px,0) scale(0.966);animation-timing-function:linear}
  88% {opacity:1;transform:translate(44px,0) scale(0.977);animation-timing-function:linear}
  94% {opacity:1;transform:translate(49px,0) scale(0.989);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrFlipin{   /* lat the: scaleX 0->1 co vot qua */
  0% {opacity:0;transform:scale(0.02,0.86) rotate(-6deg);animation-timing-function:linear}
  18% {opacity:1;transform:scale(0.35,0.92) rotate(-4deg);animation-timing-function:linear}
  45% {opacity:1;transform:scale(0.82,0.98) rotate(-1deg);animation-timing-function:linear}
  66% {opacity:1;transform:scale(1.12,1.01) rotate(1.5deg);animation-timing-function:linear}
  82% {opacity:1;transform:scale(0.95,1) rotate(-0.6deg);animation-timing-function:linear}
  100% {opacity:1;transform:none}
}
@keyframes ovTrQuantum{   /* nhay luong tu: chop-dich vai diem roi vao cho */
  0% {opacity:0;transform:translate(280px,-120px) scale(0.6)}
  12% {opacity:.85;transform:translate(280px,-120px) scale(0.6)}
  13% {opacity:0;transform:translate(-200px,90px) scale(0.7)}
  30% {opacity:.9;transform:translate(-200px,90px) scale(0.7)}
  31% {opacity:0;transform:translate(150px,60px) scale(0.82)}
  50% {opacity:.95;transform:translate(150px,60px) scale(0.82)}
  51% {opacity:0;transform:translate(-90px,-50px) scale(0.9)}
  70% {opacity:1;transform:translate(-90px,-50px) scale(0.9)}
  71% {opacity:0;transform:translate(40px,24px) scale(0.96)}
  86% {opacity:1;transform:translate(40px,24px) scale(0.96)}
  100% {opacity:1;transform:none}
}
@keyframes ovExRocketup{   /* phong len nhu ten lua (gia toc) roi mo */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(0px,-1px) scale(1.003) rotate(0.0deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(0px,-11px) scale(1.008) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(0px,-33px) scale(1.014) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(0px,-71px) scale(1.021) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(0px,-122px) scale(1.027) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(0px,-184px) scale(1.034) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:0.89;transform:translate(0px,-254px) scale(1.040) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:0.78;transform:translate(0px,-326px) scale(1.045) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:0.67;transform:translate(0px,-396px) scale(1.050) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:0.56;transform:translate(0px,-458px) scale(1.053) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:0.44;transform:translate(0px,-509px) scale(1.056) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:0.33;transform:translate(0px,-546px) scale(1.058) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:0.22;transform:translate(0px,-569px) scale(1.059) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:0.11;transform:translate(0px,-578px) scale(1.060) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,-580px) scale(1.060) rotate(0.0deg);animation-timing-function:linear}
}
@keyframes ovExShatterout{   /* no bay cheo ra + xoay */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(1px,0px) scale(0.999) rotate(0.9deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(5px,-4px) scale(0.994) rotate(5.6deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(17px,-15px) scale(0.984) rotate(15.5deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(38px,-34px) scale(0.969) rotate(30.6deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(68px,-61px) scale(0.950) rotate(50.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(106px,-95px) scale(0.928) rotate(72.4deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(150px,-133px) scale(0.904) rotate(96.4deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(196px,-174px) scale(0.880) rotate(120.4deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(240px,-214px) scale(0.857) rotate(142.9deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(281px,-250px) scale(0.837) rotate(162.6deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(314px,-279px) scale(0.822) rotate(178.4deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(338px,-300px) scale(0.810) rotate(189.8deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(353px,-314px) scale(0.803) rotate(196.6deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(359px,-319px) scale(0.800) rotate(199.5deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(360px,-320px) scale(0.800) rotate(200.0deg);animation-timing-function:linear}
}
@keyframes ovExCrumble{   /* vun roi xuong + lat nghieng (gravity) */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(1px,0px) scale(0.999) rotate(0.4deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(9px,1px) scale(0.996) rotate(3.1deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(26px,5px) scale(0.986) rotate(10.1deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(33px,25px) scale(0.967) rotate(24.5deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(3px,57px) scale(0.949) rotate(37.4deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-30px,100px) scale(0.931) rotate(50.4deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-30px,160px) scale(0.912) rotate(64.5deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-2px,218px) scale(0.896) rotate(76.1deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(25px,276px) scale(0.883) rotate(86.0deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(36px,331px) scale(0.871) rotate(94.7deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(32px,378px) scale(0.862) rotate(101.5deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(24px,411px) scale(0.855) rotate(106.1deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(18px,430px) scale(0.852) rotate(108.7deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(15px,439px) scale(0.850) rotate(109.8deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(15px,440px) scale(0.850) rotate(110.0deg);animation-timing-function:linear}
}
@keyframes ovExSpinfling{   /* xoay tit roi van ra goc */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(0px,0px) scale(0.999) rotate(1.6deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(2px,1px) scale(0.991) rotate(11.6deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(9px,7px) scale(0.973) rotate(34.7deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(25px,19px) scale(0.945) rotate(71.8deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(52px,39px) scale(0.907) rotate(121.3deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(90px,68px) scale(0.862) rotate(179.9deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(138px,104px) scale(0.813) rotate(243.4deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(192px,144px) scale(0.764) rotate(307.3deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(246px,184px) scale(0.717) rotate(367.4deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(297px,222px) scale(0.677) rotate(420.0deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(339px,254px) scale(0.644) rotate(462.4deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(371px,278px) scale(0.621) rotate(492.7deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(390px,293px) scale(0.607) rotate(511.0deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(399px,299px) scale(0.601) rotate(518.7deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(400px,300px) scale(0.600) rotate(520.0deg);animation-timing-function:linear}
}
@keyframes ovExRipple{   /* gon song no to ra roi mo */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:none;animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(0px,0px) scale(1.011) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(0px,0px) scale(1.032) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(0px,0px) scale(1.067) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(0px,0px) scale(1.115) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(0px,0px) scale(1.175) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(0px,0px) scale(1.241) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(0px,0px) scale(1.309) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(0px,0px) scale(1.375) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(0px,0px) scale(1.435) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(0px,0px) scale(1.483) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(0px,0px) scale(1.518) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(0px,0px) scale(1.539) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(0px,0px) scale(1.549) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,0px) scale(1.550) rotate(0.0deg);animation-timing-function:linear}
}
@keyframes ovExWhirlpool{   /* xoay nuoc no ra ngoai nhieu vong */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(3px,1px) scale(1.004) rotate(3.9deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(-3px,27px) scale(1.024) rotate(21.9deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(-66px,-21px) scale(1.050) rotate(44.9deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(48px,-106px) scale(1.074) rotate(67.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(149px,71px) scale(1.097) rotate(87.6deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-70px,201px) scale(1.118) rotate(106.6deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(-257px,-21px) scale(1.138) rotate(123.8deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(-98px,-283px) scale(1.154) rotate(138.8deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(202px,-268px) scale(1.168) rotate(151.6deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(363px,-48px) scale(1.180) rotate(161.9deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(346px,178px) scale(1.189) rotate(169.8deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(255px,316px) scale(1.195) rotate(175.3deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(175px,377px) scale(1.198) rotate(178.4deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(136px,397px) scale(1.200) rotate(179.8deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(130px,399px) scale(1.200) rotate(180.0deg);animation-timing-function:linear}
}
@keyframes ovExBlackhole{   /* hut vao 1 diem + xoay + co ve 0 */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(70px,2px) scale(0.998) rotate(0.6deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(68px,14px) scale(0.987) rotate(4.7deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(54px,40px) scale(0.962) rotate(14.2deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(12px,63px) scale(0.918) rotate(30.4deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(-45px,39px) scale(0.855) rotate(53.7deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(-42px,-33px) scale(0.773) rotate(84.1deg);animation-timing-function:linear}
  46.7% {opacity:1.0;transform:translate(33px,-33px) scale(0.674) rotate(121.0deg);animation-timing-function:linear}
  53.3% {opacity:1.0;transform:translate(16px,35px) scale(0.560) rotate(163.4deg);animation-timing-function:linear}
  60% {opacity:0.89;transform:translate(-29px,-2px) scale(0.436) rotate(209.4deg);animation-timing-function:linear}
  66.7% {opacity:0.74;transform:translate(12px,-17px) scale(0.311) rotate(255.7deg);animation-timing-function:linear}
  73.3% {opacity:0.59;transform:translate(7px,10px) scale(0.198) rotate(297.6deg);animation-timing-function:linear}
  80% {opacity:0.44;transform:translate(-4px,4px) scale(0.111) rotate(329.9deg);animation-timing-function:linear}
  86.7% {opacity:0.3;transform:translate(-2px,0px) scale(0.057) rotate(350.0deg);animation-timing-function:linear}
  93.3% {opacity:0.15;transform:translate(0px,0px) scale(0.034) rotate(358.6deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,0px) scale(0.030) rotate(360.0deg);animation-timing-function:linear}
}
@keyframes ovExDropout{   /* roi thang xuong tang toc */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  6.7% {opacity:1.0;transform:translate(0px,1px) scale(0.996) rotate(0.0deg);animation-timing-function:linear}
  13.3% {opacity:1.0;transform:translate(0px,10px) scale(0.988) rotate(0.0deg);animation-timing-function:linear}
  20% {opacity:1.0;transform:translate(0px,32px) scale(0.979) rotate(0.0deg);animation-timing-function:linear}
  26.7% {opacity:1.0;transform:translate(0px,68px) scale(0.971) rotate(0.0deg);animation-timing-function:linear}
  33.3% {opacity:1.0;transform:translate(0px,117px) scale(0.962) rotate(0.0deg);animation-timing-function:linear}
  40% {opacity:1.0;transform:translate(0px,178px) scale(0.954) rotate(0.0deg);animation-timing-function:linear}
  46.7% {opacity:0.97;transform:translate(0px,245px) scale(0.946) rotate(0.0deg);animation-timing-function:linear}
  53.3% {opacity:0.85;transform:translate(0px,315px) scale(0.939) rotate(0.0deg);animation-timing-function:linear}
  60% {opacity:0.73;transform:translate(0px,382px) scale(0.933) rotate(0.0deg);animation-timing-function:linear}
  66.7% {opacity:0.61;transform:translate(0px,442px) scale(0.928) rotate(0.0deg);animation-timing-function:linear}
  73.3% {opacity:0.48;transform:translate(0px,492px) scale(0.925) rotate(0.0deg);animation-timing-function:linear}
  80% {opacity:0.36;transform:translate(0px,528px) scale(0.922) rotate(0.0deg);animation-timing-function:linear}
  86.7% {opacity:0.24;transform:translate(0px,549px) scale(0.921) rotate(0.0deg);animation-timing-function:linear}
  93.3% {opacity:0.12;transform:translate(0px,559px) scale(0.920) rotate(0.0deg);animation-timing-function:linear}
  100% {opacity:0.0;transform:translate(0px,560px) scale(0.920) rotate(0.0deg);animation-timing-function:linear}
}
@keyframes ovExFoldup{   /* gap doc: scaleY -> 0 roi mo */
  0% {opacity:1;transform:none;animation-timing-function:linear}
  30% {opacity:1;transform:scale(1.04,0.74) translateY(4px);animation-timing-function:linear}
  62% {opacity:0.85;transform:scale(1.08,0.34) translateY(10px);animation-timing-function:linear}
  100% {opacity:0;transform:scale(1.12,0.04) translateY(16px)}
}
@keyframes ovExTeleportout{   /* dich chuyen tuc thoi: chop-dich roi bien mat */
  0% {opacity:1;transform:none}
  16% {opacity:1;transform:none}
  17% {opacity:0.2;transform:translate(120px,-40px) scale(1.05)}
  34% {opacity:0.9;transform:translate(120px,-40px) scale(1.05)}
  35% {opacity:0.12;transform:translate(-160px,30px) scale(1.1)}
  55% {opacity:0.7;transform:translate(-160px,30px) scale(1.1)}
  56% {opacity:0.08;transform:translate(220px,70px) scale(1.16)}
  100% {opacity:0;transform:translate(320px,120px) scale(1.2)}
}
/* THEME đồng nhất: mọi chữ cùng 1 quỹ đạo (delay tuần tự sẵn có) */
.holo-brand.traj-pixar.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrPixar;animation-duration:3.3s}
.holo-brand.traj-spiral.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrSpiral}
.holo-brand.traj-arc.is-round:not(.let-hidden):not(.let-sucking)     .holo-logo--rd .ovl{animation-name:ovTrArcTop}
.holo-brand.traj-loop.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrLoop}
.holo-brand.traj-circle.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrCircle}
.holo-brand.traj-ellipse.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrEllipse}
.holo-brand.traj-bounce.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrBounce;animation-timing-function:cubic-bezier(.3,0,.3,1)}
.holo-brand.traj-elastic.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrElastic}
.holo-brand.traj-sling.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrSling}
.holo-brand.traj-warp.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrWarp}
.holo-brand.traj-pendulum.is-round:not(.let-hidden):not(.let-sucking).holo-logo--rd .ovl{animation-name:ovTrPendulum}
.holo-brand.traj-figure8.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrFigure8;animation-duration:3s}
.holo-brand.traj-vortex.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrVortex;animation-duration:3s}
.holo-brand.traj-leaf.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrLeaf}
.holo-brand.traj-ribbon.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrRibbon}
.holo-brand.traj-swoop.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrSwoop}
.holo-brand.traj-bloom.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrBloom}
.holo-brand.traj-wave.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrWave}
.holo-brand.traj-drift.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrDrift}
.holo-brand.traj-helix.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrHelix}
.holo-brand.traj-cornertl.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrCornertl}
.holo-brand.traj-cornerbr.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrCornerbr}
.holo-brand.traj-slidel.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrSlidel}
.holo-brand.traj-slider.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrSlider}
.holo-brand.traj-rise.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrRise}
.holo-brand.traj-descend.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrDescend}
.holo-brand.traj-zoomspin.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrZoomspin}
.holo-brand.traj-tornado.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrTornado}
.holo-brand.traj-zigzag.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrZigzag}
.holo-brand.traj-magnet.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrMagnet}
.holo-brand.traj-unfold.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrUnfold}
.holo-brand.traj-orbit.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrOrbit}
.holo-brand.traj-arcup.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrArcup}
.holo-brand.traj-curl.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrCurl}
.holo-brand.traj-orbitdot.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrOrbitdot}
.holo-brand.traj-boomerang.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrBoomerang}
.holo-brand.traj-pinwheel.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrPinwheel}
.holo-brand.traj-meteor.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrMeteor}
.holo-brand.traj-catapult.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrCatapult}
.holo-brand.traj-whirl.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrWhirl}
.holo-brand.traj-breeze.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrBreeze}
.holo-brand.traj-irisin.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrIrisin}
.holo-brand.traj-dive.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrDive}
.holo-brand.traj-cascade.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrCascade}
.holo-brand.traj-gyre.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrGyre}
.holo-brand.traj-springside.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrSpringside}
.holo-brand.traj-flipin.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrFlipin}
.holo-brand.traj-quantum.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrQuantum}
/* THEME SCATTER: MỖI CHỮ một quỹ đạo KHÁC NHAU, hội tụ thành OVALPI */
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-o  {animation-name:ovTrCometL}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-v  {animation-name:ovTrArcBot}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-a  {animation-name:ovTrLoop}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-l  {animation-name:ovTrSpiral}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-p  {animation-name:ovTrArcTop}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-i  {animation-name:ovTrComet}
.holo-brand.traj-scatter.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl-dot{animation-name:ovTrZoom}
/* HÚT VÀO HỐ tuần tự NGƯỢC (chấm->O->V->A->L->P->I): JS thêm .let-sucking ở đầu vòng quay thứ 2.
   delay riêng (đè delay của ovEmerge) cho thứ tự ngược; longhand để không reset delay. */
.holo-brand.let-sucking.is-round .holo-logo--rd .ovl{
  animation-name:ovSuck;animation-duration:2.4s;
  animation-timing-function:cubic-bezier(.4,0,.45,1);animation-fill-mode:both
}
/* CÁC KIỂU THOÁT KHÁC (chữ biến mất): tái dùng keyframe quỹ đạo chạy NGƯỢC -> chữ bay RA theo
   đường tương ứng rồi mờ. Mặc định (không có .exit-*) = ovSuck ở trên = thoát của hiệu ứng #1. */
.holo-brand.exit-spiral.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrSpiral;animation-direction:reverse}
.holo-brand.exit-circle.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrCircle;animation-direction:reverse}
.holo-brand.exit-ellipse.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovTrEllipse;animation-direction:reverse}
.holo-brand.exit-comet.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrComet;animation-direction:reverse}
.holo-brand.exit-arc.let-sucking.is-round     .holo-logo--rd .ovl{animation-name:ovTrArcTop;animation-direction:reverse}
.holo-brand.exit-pixar.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrPixar;animation-duration:3.3s;animation-direction:reverse}
.holo-brand.exit-bounce.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrBounce;animation-direction:reverse}
.holo-brand.exit-elastic.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovTrElastic;animation-direction:reverse}
.holo-brand.exit-sling.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrSling;animation-direction:reverse}
.holo-brand.exit-warp.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrWarp;animation-direction:reverse}
.holo-brand.exit-pendulum.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovTrPendulum;animation-direction:reverse}
.holo-brand.exit-figure8.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovTrFigure8;animation-duration:3s;animation-direction:reverse}
.holo-brand.exit-vortex.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrVortex;animation-duration:3s;animation-direction:reverse}
.holo-brand.exit-leaf.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrLeaf;animation-direction:reverse}
.holo-brand.exit-ribbon.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrRibbon;animation-direction:reverse}
.holo-brand.exit-swoop.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrSwoop;animation-direction:reverse}
.holo-brand.exit-bloom.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrBloom;animation-direction:reverse}
.holo-brand.exit-wave.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrWave;animation-direction:reverse}
.holo-brand.exit-drift.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrDrift;animation-direction:reverse}
.holo-brand.exit-helix.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrHelix;animation-direction:reverse}
/* BIẾN MẤT CHUYÊN DỤNG (forward, KHÔNG reverse) — hiệu ứng riêng, khác lúc xuất hiện */
.holo-brand.exit-dissolve.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExDissolve;animation-timing-function:cubic-bezier(.3,0,.4,1)}
.holo-brand.exit-collapse.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExCollapse;animation-timing-function:cubic-bezier(.5,0,.75,1)}
.holo-brand.exit-warpout.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovExWarpout;animation-timing-function:cubic-bezier(.55,0,.95,.4)}
.holo-brand.exit-fall.let-sucking.is-round     .holo-logo--rd .ovl{animation-name:ovExFall}
.holo-brand.exit-swirl.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovExSwirl}
.holo-brand.exit-implode.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovExImplode;animation-timing-function:cubic-bezier(.45,0,.6,1)}
.holo-brand.exit-outl.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExOutl}
.holo-brand.exit-outr.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExOutr}
.holo-brand.exit-vanup.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExVanup}
.holo-brand.exit-sink.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExSink}
.holo-brand.exit-spinout.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExSpinout}
.holo-brand.exit-zoomout.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExZoomout}
.holo-brand.exit-streak.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExStreak}
.holo-brand.exit-flicker.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExFlicker}
.holo-brand.exit-tornup.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExTornup}
.holo-brand.exit-peel.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExPeel}
.holo-brand.exit-orbitdot.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExOrbitdot}
.holo-brand.exit-rocketup.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExRocketup}
.holo-brand.exit-shatterout.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExShatterout}
.holo-brand.exit-crumble.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExCrumble}
.holo-brand.exit-spinfling.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExSpinfling}
.holo-brand.exit-ripple.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExRipple}
.holo-brand.exit-whirlpool.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExWhirlpool}
.holo-brand.exit-blackhole.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExBlackhole}
.holo-brand.exit-dropout.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExDropout}
.holo-brand.exit-foldup.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExFoldup}
.holo-brand.exit-teleportout.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExTeleportout}
.holo-brand.exit-liftfade.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovExLiftFade}
@keyframes ovExLiftFade{   /* nâng lên + nghiêng nhẹ + co + mờ (kiểu "bay nhẹ lên rồi tan") */
  0%  {opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(0,-34px) scale(.66) rotate(-13deg)}
}
/* THOÁT scatter: mỗi chữ bay ra MỘT HƯỚNG khác nhau */
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-o  {animation-name:ovTrCometL;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-v  {animation-name:ovTrArcBot;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-a  {animation-name:ovTrLoop;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-l  {animation-name:ovTrSpiral;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-p  {animation-name:ovTrArcTop;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-i  {animation-name:ovTrComet;animation-direction:reverse}
.holo-brand.exit-scatter.let-sucking.is-round .holo-logo--rd .ovl-dot{animation-name:ovTrZoom;animation-direction:reverse}
/* VUÔNG: chữ hút vào hố như #1 (đã BỎ glitch) */
.holo-brand.let-sucking:not(.is-round) .holo-logo--sq .ovl{
  animation-name:ovSuck;animation-duration:2.4s;
  animation-timing-function:cubic-bezier(.4,0,.45,1);animation-fill-mode:both
}
/* bước delay HÚT 0.9s (đã ×1.5 chậm 50%): chuỗi bay-RA lấp đầy gần hết vòng quay 2
   (9000->18000ms) mà chữ cuối vẫn kịp mờ hẳn trước morph -> không trống, không cắt "pop".
   "i" pixar(3.3s) = 9000 + 5400 + 3300 = 17700ms < 18000 (mờ hẳn 17700, dư 300ms). */
.holo-brand.let-sucking .holo-logo .ovl-dot{animation-delay:0s}
.holo-brand.let-sucking .holo-logo .ovl-o  {animation-delay:.9s}
.holo-brand.let-sucking .holo-logo .ovl-v  {animation-delay:1.8s}
.holo-brand.let-sucking .holo-logo .ovl-a  {animation-delay:2.7s}
.holo-brand.let-sucking .holo-logo .ovl-l  {animation-delay:3.6s}
.holo-brand.let-sucking .holo-logo .ovl-p  {animation-delay:4.5s}
.holo-brand.let-sucking .holo-logo .ovl-i  {animation-delay:5.4s}
@keyframes ovSuck{
  0%  {opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  55% {opacity:.85}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.12) rotate(22deg)}
}
/* (đã BỎ glitch hologram ovGlitchIn/ovGlitchOut theo yêu cầu — khung vuông dùng ovEmerge/ovSuck) */
/* ẨN TĨNH: trong lúc khung đang morph-in, chữ nằm yên trong hố (không animation). */
.holo-brand.let-hidden .holo-logo .ovl{animation:none!important;opacity:0}
@media (prefers-reduced-motion:reduce){
  .holo-logo .ovl{animation:none!important;opacity:1;transform:none}
}

/* Vệ tinh xoay quanh chấm đỏ lớn: dùng SMIL <animateTransform> trong chính SVG (.ov-orbit)
   để chỉ định tâm xoay tường minh -> tròn đều, chuẩn cả Safari/iPad (CSS transform-box bị lệch trên iPad).
   Tạm dừng khi reduced-motion / tab ẩn: xử lý bằng JS (svg.pauseAnimations) trong holo.js. */

/* ====================================================================
   LÔ KIỂU CHỮ BAY MỚI (20×2D + 1×3D) — phỏng theo Animate.css
   (MIT License, © Daniel Eden, https://animate.style) + mẫu kinetic-typography,
   chỉnh khớp hệ "chui ra từ hố": 0%{opacity:0 + lệch} -> 100%{opacity:1; transform:none}.
   Bản RA = CHÍNH keyframe này chạy NGƯỢC (animation-direction:reverse) -> cân bằng vào=ra.
   Tránh filter:blur (re-raster gây chớp khi orbit xoay) -> giả motion-blur bằng scaleX.
   ==================================================================== */
@keyframes ovTrBackUp{0%{opacity:0;transform:translateY(440px) scale(.7)}80%{opacity:1;transform:translateY(-22px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes ovTrBackDown{0%{opacity:0;transform:translateY(-440px) scale(.7)}80%{opacity:1;transform:translateY(22px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes ovTrBackLeft{0%{opacity:0;transform:translateX(-460px) scale(.7)}80%{opacity:1;transform:translateX(24px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes ovTrBackRight{0%{opacity:0;transform:translateX(460px) scale(.7)}80%{opacity:1;transform:translateX(-24px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes ovTrLightL{0%{opacity:0;transform:translateX(-520px) skewX(-30deg)}60%{opacity:1;transform:translateX(0) skewX(20deg)}80%{transform:skewX(-6deg)}100%{opacity:1;transform:none}}
@keyframes ovTrLightR{0%{opacity:0;transform:translateX(520px) skewX(30deg)}60%{opacity:1;transform:translateX(0) skewX(-20deg)}80%{transform:skewX(6deg)}100%{opacity:1;transform:none}}
@keyframes ovTrRollin{0%{opacity:0;transform:translateX(-420px) rotate(-120deg)}100%{opacity:1;transform:none}}
@keyframes ovTrJackbox{0%{opacity:0;transform:scale(.1) rotate(30deg)}50%{opacity:1;transform:rotate(-10deg)}70%{transform:rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ovTrRotin{0%{opacity:0;transform:rotate(-200deg) scale(.5)}100%{opacity:1;transform:none}}
@keyframes ovTrSquash{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scaleX(1.35) scaleY(.7)}70%{transform:scaleX(.88) scaleY(1.12)}100%{opacity:1;transform:none}}
@keyframes ovTrWipe{0%{opacity:0;transform:scaleX(0)}60%{opacity:1;transform:scaleX(1.06)}100%{opacity:1;transform:none}}
@keyframes ovTrJitter{0%{opacity:0;transform:translate(0,0) scale(.85)}20%{opacity:1;transform:translate(-7px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-2px)}100%{opacity:1;transform:none}}
@keyframes ovTrJello{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:skewX(-12deg) skewY(-12deg)}55%{transform:skewX(8deg) skewY(8deg)}70%{transform:skewX(-4deg) skewY(-4deg)}100%{opacity:1;transform:none}}
@keyframes ovTrRubber{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scaleX(1.25) scaleY(.75)}60%{transform:scaleX(.78) scaleY(1.22)}80%{transform:scaleX(1.1) scaleY(.9)}100%{opacity:1;transform:none}}
@keyframes ovTrTada{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(.92) rotate(-6deg)}50%{transform:scale(1.1) rotate(6deg)}70%{transform:scale(1.05) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes ovTrSwingin{0%{opacity:0;transform:translateY(-60px) rotate(-32deg)}55%{opacity:1;transform:rotate(16deg)}75%{transform:rotate(-8deg)}90%{transform:rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ovTrZoomdrop{0%{opacity:0;transform:translateY(-560px) scale(.1)}100%{opacity:1;transform:none}}
@keyframes ovTrStreakin{0%{opacity:0;transform:translateX(-280px) scaleX(2.6)}60%{opacity:1;transform:translateX(0) scaleX(1.18)}100%{opacity:1;transform:none}}
@keyframes ovTrHinge{0%{opacity:0;transform:translate(-320px,-260px) rotate(-80deg)}60%{opacity:1;transform:rotate(12deg)}100%{opacity:1;transform:none}}
@keyframes ovTrSpin360{0%{opacity:0;transform:scale(.2) rotate(-360deg)}100%{opacity:1;transform:none}}
/* MAP VÀO (--rd) */
.holo-brand.traj-backup.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrBackUp}
.holo-brand.traj-backdown.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrBackDown}
.holo-brand.traj-backleft.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrBackLeft}
.holo-brand.traj-backright.is-round:not(.let-hidden):not(.let-sucking) .holo-logo--rd .ovl{animation-name:ovTrBackRight}
.holo-brand.traj-lightl.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrLightL}
.holo-brand.traj-lightr.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrLightR}
.holo-brand.traj-rollin.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrRollin}
.holo-brand.traj-jackbox.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrJackbox}
.holo-brand.traj-rotin.is-round:not(.let-hidden):not(.let-sucking)     .holo-logo--rd .ovl{animation-name:ovTrRotin}
.holo-brand.traj-squash.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrSquash}
.holo-brand.traj-wipe.is-round:not(.let-hidden):not(.let-sucking)      .holo-logo--rd .ovl{animation-name:ovTrWipe}
.holo-brand.traj-jitter.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrJitter}
.holo-brand.traj-jello.is-round:not(.let-hidden):not(.let-sucking)     .holo-logo--rd .ovl{animation-name:ovTrJello}
.holo-brand.traj-rubber.is-round:not(.let-hidden):not(.let-sucking)    .holo-logo--rd .ovl{animation-name:ovTrRubber}
.holo-brand.traj-tada.is-round:not(.let-hidden):not(.let-sucking)      .holo-logo--rd .ovl{animation-name:ovTrTada}
.holo-brand.traj-swingin.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrSwingin}
.holo-brand.traj-zoomdrop.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrZoomdrop}
.holo-brand.traj-streakin.is-round:not(.let-hidden):not(.let-sucking)  .holo-logo--rd .ovl{animation-name:ovTrStreakin}
.holo-brand.traj-hinge.is-round:not(.let-hidden):not(.let-sucking)     .holo-logo--rd .ovl{animation-name:ovTrHinge}
.holo-brand.traj-spin360.is-round:not(.let-hidden):not(.let-sucking)   .holo-logo--rd .ovl{animation-name:ovTrSpin360}
/* MAP RA (reverse) */
.holo-brand.exit-backup.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrBackUp;animation-direction:reverse}
.holo-brand.exit-backdown.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrBackDown;animation-direction:reverse}
.holo-brand.exit-backleft.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrBackLeft;animation-direction:reverse}
.holo-brand.exit-backright.let-sucking.is-round .holo-logo--rd .ovl{animation-name:ovTrBackRight;animation-direction:reverse}
.holo-brand.exit-lightl.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrLightL;animation-direction:reverse}
.holo-brand.exit-lightr.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrLightR;animation-direction:reverse}
.holo-brand.exit-rollin.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrRollin;animation-direction:reverse}
.holo-brand.exit-jackbox.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrJackbox;animation-direction:reverse}
.holo-brand.exit-rotin.let-sucking.is-round     .holo-logo--rd .ovl{animation-name:ovTrRotin;animation-direction:reverse}
.holo-brand.exit-squash.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrSquash;animation-direction:reverse}
.holo-brand.exit-wipe.let-sucking.is-round      .holo-logo--rd .ovl{animation-name:ovTrWipe;animation-direction:reverse}
.holo-brand.exit-jitter.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrJitter;animation-direction:reverse}
.holo-brand.exit-jello.let-sucking.is-round     .holo-logo--rd .ovl{animation-name:ovTrJello;animation-direction:reverse}
.holo-brand.exit-rubber.let-sucking.is-round    .holo-logo--rd .ovl{animation-name:ovTrRubber;animation-direction:reverse}
.holo-brand.exit-tada.let-sucking.is-round      .holo-logo--rd .ovl{animation-name:ovTrTada;animation-direction:reverse}
.holo-brand.exit-swingin.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrSwingin;animation-direction:reverse}
.holo-brand.exit-zoomdrop.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrZoomdrop;animation-direction:reverse}
.holo-brand.exit-streakin.let-sucking.is-round  .holo-logo--rd .ovl{animation-name:ovTrStreakin;animation-direction:reverse}
.holo-brand.exit-hinge.let-sucking.is-round     .holo-logo--rd .ovl{animation-name:ovTrHinge;animation-direction:reverse}
.holo-brand.exit-spin360.let-sucking.is-round   .holo-logo--rd .ovl{animation-name:ovTrSpin360;animation-direction:reverse}