/* =====================================================================
   Giao diện kiểu ỨNG DỤNG cho điện thoại (trang học sinh)
   - Thanh tab dưới cùng, thanh tiêu đề dính trên cùng có nút quay lại
   - Hộp thoại dạng "bottom sheet", vùng chạm lớn, hỗ trợ tai thỏ/home indicator (safe-area)
   - Trang "Của em", thẻ cài ứng dụng, trang Nghề nghiệp
   ===================================================================== */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* --- Thành phần dùng chung mọi kích thước --- */
.tabbar, .tb-back, .tb-title, .m-only { display: none; }
.topbar .brand .logo img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.topbar .brand .logo { overflow: hidden; padding: 0; background: #fff; }
#app > * { animation: pgIn .28s ease both; }
@keyframes pgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.backrow { margin: 4px 0 10px; }
.m-more { display: none; }

.page-head { color: #fff; margin: 6px 2px 14px; }
.page-head h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.page-head p { margin: 0; opacity: .92; }
.page .sec { margin-top: 18px; }

/* Trang "Của em" */
.mine-hero { display: flex; gap: 16px; align-items: center; color: #fff; padding: 18px 18px; margin-bottom: 14px; border-radius: 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mine-hero h1 { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.mine-hero p { margin: 2px 0 0; opacity: .9; font-size: .92rem; }
.mh-av { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 900; color: var(--g1); background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.mh-code { display: flex; gap: 6px; margin-top: 8px; }
.mh-code span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; color: #fff; border: 2px solid #fff; }
.lgroup { background: #fff; border-radius: 18px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 10px 28px -14px rgba(0,0,0,.35); }
.lrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink, #1a202c); text-decoration: none; min-height: 60px; }
.lrow + .lrow, .lgroup > .lrow ~ .lrow { border-top: 1px solid #eef2f7; }
.lrow:active { background: #f1f5f9; }
.lrow .lic { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #f1f5f9; font-size: 1.2rem; }
.lrow .lt { flex: 1; min-width: 0; }
.lrow .lt b { display: block; font-size: .98rem; }
.lrow .lt small { display: block; color: #64748b; font-size: .8rem; margin-top: 1px; }
.lrow .chev { color: #94a3b8; font-size: 1.5rem; line-height: 1; }
.lrow.hl .lic { background: #0068ff; color: #fff; }
.lrow.hl .lt b { color: #0058e0; }
.lrow.warn .lic { background: #fef3c7; }
.lrow.danger .lt b { color: #dc2626; }
.lrow.static .chev { display: none; }
.mcode { font-family: ui-monospace, Menlo, monospace; font-weight: 700; text-align: right; font-size: .9rem; color: #1e3a8a; }

/* Thẻ cài ứng dụng */
.install-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 12px 12px 12px; margin: 14px 0 0; box-shadow: 0 12px 30px -14px rgba(0,0,0,.4); }
.install-card img { width: 46px; height: 46px; border-radius: 12px; }
.install-card div { flex: 1; min-width: 0; }
.install-card b { display: block; font-size: .92rem; color: #0f172a; }
.install-card small { display: block; font-size: .76rem; color: #64748b; }
.install-card .ic-go { border: 0; background: var(--g1); color: #fff; font-weight: 800; border-radius: 999px; padding: 8px 16px; font-size: .88rem; }
.install-card .ic-x { border: 0; background: none; color: #94a3b8; font-size: 1rem; padding: 6px; }
.install-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.install-head img { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.install-head h2 { margin: 0; font-size: 1.15rem; }
.steps-ol { padding-left: 20px; line-height: 1.75; margin: 8px 0; }
.kbd { display: inline-block; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 6px; background: #f8fafc; }

/* =====================================================================
   ĐIỆN THOẠI
   ===================================================================== */
@media (max-width: 760px) {
  body.hs { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.hs.focus-mode { padding-bottom: env(safe-area-inset-bottom); }
  .m-only { display: flex; }
  input, select, textarea { font-size: 16px !important; } /* tránh iOS tự phóng to khi gõ */

  /* Dải thông báo mỏng + tránh tai thỏ khi mở như ứng dụng */
  .announce { font-size: .72rem; padding: calc(4px + env(safe-area-inset-top)) 0 4px; }

  /* Thanh tiêu đề dính */
  .topbar { position: sticky; top: calc(22px + env(safe-area-inset-top)); margin-top: calc(22px + env(safe-area-inset-top)); z-index: 55; padding: 8px 12px; min-height: 54px; gap: 8px; justify-content: flex-start;
    background: rgba(15, 40, 120, .35); background: color-mix(in srgb, var(--g1) 72%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); }
  .topbar .brand .logo { width: 34px; height: 34px; border-radius: 10px; }
  .topbar .brand b { font-size: .95rem; }
  .topbar .brand small { font-size: .62rem; max-width: 62vw; }
  .topbar .me { display: none; }
  .tb-back { display: none; border: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 1.7rem; line-height: 1; padding: 0 0 3px; flex: 0 0 38px; }
  .tb-title { color: #fff; font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not([data-page="home"]) .tb-back { display: grid; place-items: center; }
  body:not([data-page="home"]) .tb-title { display: block; }
  body:not([data-page="home"]) .topbar .brand { display: none; }
  .backrow { display: none; }

  /* Thanh tab dưới cùng */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid rgba(15,23,42,.08); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.25); }
  body.focus-mode .tabbar { display: none; }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #64748b; text-decoration: none; font-size: .68rem; font-weight: 600; border: 0; background: none; padding: 0; font-family: inherit; }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .tab.on { color: var(--g1); }
  .tab.on svg { fill: color-mix(in srgb, var(--g1) 16%, transparent); }
  .tab.on::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--g1); }
  .tab:active { transform: scale(.94); }
  .tab .dot { position: absolute; top: 9px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
  .tab.mid { color: #1e293b; }
  .tab.mid .mid-ic { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
  .tab.mid .mid-ic svg { width: 44px; height: 44px; stroke: none; fill: initial; }

  /* Trợ lý: mở toàn màn hình từ tab, ẩn nút nổi */
  .bot-root { right: 0; bottom: 0; }
  .bot-toggle, .bot-hint { display: none !important; }
  .bot-root.open { z-index: 90; }
  .bot-root.open .bot-win { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .bot-head { padding-top: 12px; }
  .zfab { display: none !important; }
  .zbar { position: static; margin: 8px 12px 0; border-radius: 14px; font-size: .84rem; }

  /* Hộp thoại dạng bottom sheet */
  .modal-back { z-index: 100; }
  .ccards:not(.all) .ccard.more { display: none; }
  .m-more { display: flex; width: 100%; justify-content: center; margin-top: 10px; }
  .modal-back { align-items: flex-end; padding: 0; overflow: hidden; animation: fadeIn .2s ease; }
  .modal { max-width: none !important; border-radius: 24px 24px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 26px 18px calc(20px + env(safe-area-inset-bottom)); animation: sheetUp .28s cubic-bezier(.2,.8,.2,1); position: relative; }
  .modal::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; border-radius: 3px; background: #cbd5e1; transform: translateX(-50%); }
  .modal .row .btn, .modal .row .zp-btn { flex: 1; justify-content: center; text-align: center; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Trang chủ gọn như ứng dụng */
  .hero { margin: 10px 12px 0; }
  .hero h1 { font-size: 1.65rem; }
  .hero p.sub { font-size: .95rem; }
  .hero .pill { font-size: .72rem; }
  .statrow { margin: 10px 12px 0; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
  .stat { border-radius: 14px; padding: 9px 4px !important; text-align: center; }
  .stat b { font-size: 1.1rem !important; }
  .stat span { font-size: .6rem; line-height: 1.25; display: block; }
  .hero .inner { padding: 20px 18px 20px; }
  .hero h1 { margin: 10px 0 8px; }
  .wrap { padding: 0 12px; }
  .sec { margin-top: 26px; }
  .sec-title h2 { font-size: 1.25rem; }
  .sec-title p { font-size: .88rem; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 22px; padding: 14px 8px; }
  .tile { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; gap: 6px; color: #fff !important; }
  .tile .ic { width: 54px; height: 54px; border-radius: 16px; font-size: 1.55rem; box-shadow: 0 8px 16px -6px rgba(0,0,0,.35); }
  .tile b { font-size: .7rem; line-height: 1.2; font-weight: 700; color: #fff; text-align: center; }
  .tile small, .tile .ribbon { display: none !important; }
  .tile.t1 .ic { background: linear-gradient(135deg, #f59e0b, #ef4444); }
  .tile.t2 .ic { background: linear-gradient(135deg, #6366f1, #0ea5e9); }
  .tile.t3 .ic { background: linear-gradient(135deg, #10b981, #0d9488); }
  .tile.t4 .ic { background: linear-gradient(135deg, #ec4899, #a855f7); }
  .tile.t5 .ic { background: linear-gradient(135deg, #f43f5e, #fb923c); }
  .tile.t6 .ic { background: linear-gradient(135deg, #0ea5e9, #22c55e); }
  .tile.t7 .ic { background: linear-gradient(135deg, #64748b, #334155); }
  .tile.t8 .ic { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
  .steps3 { gap: 10px; }
  .schools { gap: 10px; }
  .school { padding: 12px; }
  .page { padding: 0 12px; margin-top: 10px; }
  .panel { box-shadow: 0 10px 28px -16px rgba(0,0,0,.4); }
  .foot { padding: 20px 14px 18px; font-size: .74rem; }

  /* Khối Zalo trên trang chủ */
  .zpromo { margin: 16px 0 4px; padding: 22px 16px 20px; border-radius: 24px; gap: 18px; }
  .zpromo h2 { font-size: 1.45rem; }
  .zp-list li { font-size: .9rem; }
  .zp-btn { width: 100%; }
  .zp-actions { gap: 10px; }
  .zp-actions .zp-link { width: 100%; text-align: center; }
  .zp-screen { width: min(250px, 74vw); }
  .zcard { border-radius: 20px; padding: 18px 16px; }
  .zc-side { width: 100%; }
  .zc-side .zp-btn { width: 100%; }

  /* Nút bấm to, dễ chạm */
  .btn, .cta { min-height: 46px; }
  .btn.sm { min-height: 36px; }
}

@media (max-width: 380px) {
  .tab { font-size: .62rem; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile b { font-size: .64rem; }
  .tile .ic { width: 48px; height: 48px; }
}

/* Khi mở như ứng dụng đã cài (không có thanh địa chỉ) */
@media (display-mode: standalone) {
  .announce { display: none; }
  @media (max-width: 760px) {
    .topbar { top: 0; margin-top: 0; padding-top: calc(8px + env(safe-area-inset-top)); min-height: calc(54px + env(safe-area-inset-top)); }
  }
  .topbar { margin-top: 0; }
}

/* ===================== Tài khoản Zalo ===================== */
.zl { display: inline-block; background: #fff; color: #0068ff; font-weight: 900; border-radius: 6px; padding: 1px 6px; font-size: .78em; letter-spacing: .01em; line-height: 1.4; }
.zalo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; background: #0068ff; color: #fff; font-weight: 800; font-family: inherit; font-size: .95rem; padding: 10px 16px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(0,104,255,.8); white-space: nowrap; }
.zalo-btn:active { transform: scale(.97); }
.zalo-btn.big { width: 100%; padding: 14px 18px; font-size: 1.05rem; border-radius: 14px; }
.zalo-btn.big .zl { font-size: .85em; }
.glass-btn.zalo-btn-sm { background: #0068ff; border-color: #0068ff; display: inline-flex; gap: 6px; align-items: center; }
.tb-av { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; object-fit: cover; }
.login-hint { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #eef5ff; border: 1px solid #cfe1ff; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; color: #0f172a; }
.login-hint b { display: block; font-size: .95rem; }
.login-hint small { display: block; color: #475569; font-size: .8rem; }
.login-card { background: #fff; border-radius: 22px; padding: 22px 18px; text-align: center; margin-bottom: 14px; box-shadow: 0 14px 34px -16px rgba(0,0,0,.45); }
.login-card .lc-ic { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 20px; background: linear-gradient(135deg, #0068ff, #00a2ff); display: grid; place-items: center; font-size: 1.8rem; }
.login-card h2 { margin: 4px 0; }
.login-card p { color: #475569; margin: 0 0 14px; }
.lc-list { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; display: grid; gap: 6px; font-size: .9rem; color: #334155; }
.acc-strip { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); }
.acc-strip img, .acc-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 42px; }
.acc-av { display: grid; place-items: center; background: #0068ff; color: #fff; font-weight: 900; }
.acc-strip b { display: block; color: #0f172a; }
.acc-strip small { color: #64748b; font-size: .8rem; }
.acc-strip small .zl { background: #0068ff; color: #fff; }
.mh-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; flex: 0 0 64px; }

.zlogin .zl-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.zl-logo { flex: 0 0 52px; height: 52px; border-radius: 16px; background: #0068ff; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 1rem; }
.zlogin h2 { margin: 0; font-size: 1.2rem; }
.zl-steps { padding-left: 20px; line-height: 1.7; margin: 6px 0 10px; }
.rolepick h2 { text-align: center; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.role { border: 2px solid #e2e8f0; background: #fff; border-radius: 18px; padding: 18px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; text-align: center; }
.role span { font-size: 2.2rem; }
.role b { font-size: 1.05rem; }
.role small { color: #64748b; font-size: .8rem; }
.role:hover, .role:active { border-color: #0068ff; background: #f0f6ff; }
#phMore { margin-top: 10px; }

.parent-hero { background: #fff; border-radius: 22px; padding: 24px 18px; text-align: center; box-shadow: 0 14px 34px -16px rgba(0,0,0,.45); }
.parent-hero .ph-ic { font-size: 2.6rem; width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(135deg, #fde68a, #fbbf24); }
.parent-hero h1 { margin: 6px 0; font-size: 1.4rem; color: #0f172a; }
.parent-hero p { color: #475569; }
.ph-steps { text-align: left; padding-left: 20px; line-height: 1.8; color: #334155; margin: 16px 0 0; }
.kid-card { background: #fff; border-radius: 20px; padding: 16px; margin-bottom: 14px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.45); }
.kc-head { display: flex; gap: 12px; align-items: center; }
.kc-av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 1.2rem; }
.kc-head b { display: block; font-size: 1.05rem; }
.kc-head small { color: #64748b; }
.kc-body { margin-top: 12px; }
.kc-code { display: flex; gap: 10px; align-items: center; background: #f8fafc; border-radius: 14px; padding: 10px; }
.kc-code span { width: 34px; height: 34px; border-radius: 10px; color: #fff; font-weight: 900; display: inline-grid; place-items: center; border: 2px solid #fff; margin-right: -4px; }
.kc-code div { margin-left: 8px; }
.kc-code small { display: block; color: #64748b; font-size: .78rem; }
.kc-careers { display: grid; gap: 6px; }
.kc-careers div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f1f5f9; border-radius: 10px; font-size: .92rem; }
.kc-careers span { font-weight: 800; color: #1d4ed8; }
.kid-card h4 { margin: 12px 0 6px; }
@media (max-width: 760px) {
  .login-hint { flex-direction: column; align-items: stretch; text-align: left; }
  .login-hint .zalo-btn { width: 100%; padding: 12px; }
  .kid-card .row .btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
   CHUYỂN ĐỘNG – chuyên nghiệp, nhẹ nhàng (tắt khi người dùng chọn "giảm chuyển động")
   ===================================================================== */
html { scroll-behavior: smooth; }
:root { --ease-out: cubic-bezier(.2,.75,.25,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* Hiện dần khi cuộn tới */
.rv { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .65s var(--ease-out) var(--d, 0ms), transform .65s var(--ease-out) var(--d, 0ms); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
.tile.rv { transform: translateY(18px) scale(.9); }
.tile.rv.in { transform: none; transition-timing-function: var(--ease-spring), var(--ease-spring); }
.lrow.rv { transform: translateX(-14px); }
.lrow.rv.in { transform: none; }

/* Chuyển trang: View Transitions (Chrome, Edge, Safari 18+) – thanh trên/dưới đứng yên, nội dung trượt nhẹ */
.vt #app > * { animation: none; }
#app { view-transition-name: hn-main; }
.topbar { view-transition-name: hn-top; }
.tabbar { view-transition-name: hn-tabs; }
::view-transition-old(hn-main) { animation: vtOut .22s ease both; }
::view-transition-new(hn-main) { animation: vtIn .38s var(--ease-out) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.99); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

/* Hero: các dòng xuất hiện lần lượt */
.hero .inner > * { animation: heroIn .8s var(--ease-out) both; }
.hero .inner > :nth-child(1) { animation-delay: .05s; }
.hero .inner > :nth-child(2) { animation-delay: .15s; }
.hero .inner > :nth-child(3) { animation-delay: .27s; }
.hero .inner > :nth-child(4) { animation-delay: .4s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hero.banner .slides { animation: bannerIn 1.1s var(--ease-out) both; }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hero.banner .banner-cta { animation: heroIn .8s var(--ease-out) .35s both; }
.hero .art { animation: artIn 1.2s var(--ease-out) both, floaty 8s ease-in-out 1.2s infinite; }
@keyframes artIn { from { opacity: 0; transform: scale(.85) rotate(-8deg); } }

/* Nút, thẻ: phản hồi khi chạm / rê chuột */
.btn, .cta, .zalo-btn, .zp-btn, .glass-btn, .chip, .tchip, .role, .ic-go { transition: transform .18s var(--ease-out), box-shadow .25s ease, background-color .2s ease, filter .2s ease; }
.btn:active, .cta:active, .zalo-btn:active, .zp-btn:active, .glass-btn:active, .chip:active, .tchip:active, .role:active { transform: scale(.96); }
@media (hover: hover) {
  .btn:hover, .zalo-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
  .tile, .ccard, .school, .tcard, .kid-card, .lrow { transition: transform .25s var(--ease-out), box-shadow .25s ease, opacity .65s var(--ease-out) var(--d, 0ms); }
  .ccard:hover, .school:hover, .kid-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(0,0,0,.35); }
  .tile:hover .ic { animation: icWiggle .6s var(--ease-spring); }
}
@keyframes icWiggle { 30% { transform: rotate(-10deg) scale(1.12); } 60% { transform: rotate(6deg) scale(1.08); } }

/* Thanh tab: biểu tượng "nảy" khi được chọn */
.tab.on svg { animation: tabPop .45s var(--ease-spring); }
.tab.on::before { animation: tabBar .35s var(--ease-out); }
@keyframes tabPop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes tabBar { from { width: 0; opacity: 0; } }
.tab.mid .mid-ic { transition: transform .25s var(--ease-spring); }
.tab.mid:active .mid-ic { transform: scale(.9); }

/* Tiêu đề mục: gạch chân vẽ ra */
.sec-title h2 { position: relative; display: inline-block; }
.sec-title h2::after { content: ""; position: absolute; left: 50%; bottom: -6px; height: 3px; width: 0; border-radius: 3px; background: var(--gold); transform: translateX(-50%); transition: width .7s var(--ease-out) .25s; }
.sec-title.in h2::after, .sec-title:not(.rv) h2::after { width: 56px; }

/* Trắc nghiệm: câu đã trả lời đánh dấu, lựa chọn bật nhẹ */
.q { transition: background-color .4s ease, opacity .65s var(--ease-out), transform .65s var(--ease-out); border-radius: 12px; }
.q.answered .qt .n { color: var(--green, #2f855a); }
.q.answered .qt .n::after { content: " ✓"; }
.opt input:checked + span { animation: optPop .32s var(--ease-spring); }
@keyframes optPop { 0% { transform: scale(.92); } 70% { transform: scale(1.05); } 100% { transform: none; } }
.progress > div { transition: width .5s var(--ease-out); }

/* Kết quả: mã Holland "bật" ra, biểu đồ vẽ dần */
.mh-code span, .kc-code span { animation: codePop .55s var(--ease-spring) both; }
.mh-code span:nth-child(2), .kc-code span:nth-child(2) { animation-delay: .12s; }
.mh-code span:nth-child(3), .kc-code span:nth-child(3) { animation-delay: .24s; }
@keyframes codePop { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
.page .panel svg polygon[fill-opacity] { transform-box: fill-box; transform-origin: center; animation: radarIn 1s var(--ease-spring) .2s both; }
@keyframes radarIn { from { transform: scale(0); opacity: 0; } }
.page .panel svg rect[rx="3"]:nth-of-type(even) { transform-box: fill-box; transform-origin: left center; animation: barGrow .9s var(--ease-out) both; }
@keyframes barGrow { from { transform: scaleX(0); } }

/* Hộp thoại (máy tính): bật nhẹ; thông báo nhỏ trượt lên */
@media (min-width: 761px) {
  .modal-back { animation: fadeIn .2s ease; }
  .modal { animation: modalIn .32s var(--ease-spring); }
  @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
}
@keyframes fadeIn { from { opacity: 0; } }
.toast { animation: toastIn .35s var(--ease-spring); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.95); } }

/* Trợ lý: tin nhắn mới trượt vào */
.bmsg { animation: msgIn .35s var(--ease-out) both; }
.bmsg.me { animation-name: msgInMe; }
@keyframes msgIn { from { opacity: 0; transform: translateX(-10px) translateY(6px); } }
@keyframes msgInMe { from { opacity: 0; transform: translateX(10px) translateY(6px); } }

/* Thẻ Zalo & khối giới thiệu: viền sáng lướt qua */
.zcard:not(.ok):not(.warn):not(.lost) { position: relative; overflow: hidden; }
.zcard:not(.ok):not(.warn):not(.lost)::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: shimmer 4s 1.5s infinite; pointer-events: none; }

/* Khung chờ (skeleton) thay cho vòng xoay ở thẻ con của phụ huynh */
.kc-body:has(> .spinner:only-child) { height: 120px; border-radius: 14px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: skel 1.3s ease infinite; }
.kc-body:has(> .spinner:only-child) .spinner { display: none; }
@keyframes skel { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(hn-main), ::view-transition-new(hn-main) { animation: none; }
}