/* ==========================================================
   motion.css – Hiệu ứng chuyển động dùng chung cho toàn website + trang quản trị
   (vào trang, cuộn tới, mở popup, menu, nút bấm, thẻ, bảng, thông báo).
   Người dùng bật "Giảm chuyển động" trong hệ điều hành → tắt hết.
   ========================================================== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }
html { scroll-behavior: smooth; }

/* ---------- Vào trang / rời trang ---------- */
body { animation: mxPageIn .45s var(--ease-out) both; }
body.mx-out { opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
@keyframes mxPageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Hiện dần khi cuộn tới (motion.js gắn class mx-rv / mx-on) ---------- */
.mx-rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--mx-d, 0ms); }
.mx-rv.mx-on { opacity: 1; transform: none; }

/* ---------- Trang quản trị: mỗi lần chuyển mục / vẽ lại trang ---------- */
#main > * { animation: mxViewIn .42s var(--ease-out) both; }
#main > *:nth-child(2) { animation-delay: .04s; } #main > *:nth-child(3) { animation-delay: .08s; }
@keyframes mxViewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Khối con trong trang quản trị xuất hiện so le */
#main .cl-stats > *, #main .sv-stats > *, #main .tc-stats > *, #main .um-stats > *, #main .dd-grid > *, #main .zl-stats > * { animation: mxPop .5s var(--ease-out) both; }
#main .cl-stats > *:nth-child(2), #main .sv-stats > *:nth-child(2), #main .tc-stats > *:nth-child(2), #main .um-stats > *:nth-child(2) { animation-delay: .06s; }
#main .cl-stats > *:nth-child(3), #main .sv-stats > *:nth-child(3), #main .tc-stats > *:nth-child(3), #main .um-stats > *:nth-child(3) { animation-delay: .12s; }
#main .cl-stats > *:nth-child(4), #main .sv-stats > *:nth-child(4), #main .tc-stats > *:nth-child(4), #main .um-stats > *:nth-child(4) { animation-delay: .18s; }
@keyframes mxPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Dòng bảng mới vẽ: hiện dần (motion.js đặt --mx-i để so le) */
tbody tr.mx-row { animation: mxRow .38s var(--ease-out) both; animation-delay: calc(var(--mx-i, 0) * 22ms); }
@keyframes mxRow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
tbody tr { transition: background-color .18s ease; }

/* ---------- Popup ---------- */
.modal-backdrop { animation: mxFade .22s ease both; }
.modal-backdrop > .modal, .modal-backdrop > form.modal { animation: mxModalIn .34s var(--ease-spring) both; }
.modal-backdrop.mx-closing { animation: mxFadeOut .2s ease both; pointer-events: none; }
.modal-backdrop.mx-closing > .modal { animation: mxModalOut .2s ease both; }
@keyframes mxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mxModalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mxModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---------- Menu thả xuống ---------- */
.tc-menu, .um-pop, .sv-rowpop, .adm-drop, .fn-pop, .tc-rmenu, .cl-pop { transform-origin: top right; animation: mxMenu .2s var(--ease-out) both; }
@keyframes mxMenu { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Thông báo nhỏ (toast) ---------- */
.toast { animation: mxToastIn .38s var(--ease-spring) both !important; }
.toast.mx-closing { animation: mxToastOut .25s ease both !important; }
@keyframes mxToastIn { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mxToastOut { to { opacity: 0; transform: translateX(28px); } }

/* ---------- Nút bấm: nổi nhẹ khi rê chuột, lún khi bấm, gợn sóng ---------- */
.btn, .aw-next, .aw-prev, .aw-sm, .hbtn, .cl-hbtn, .cl-chip, .bk-btn, .tc-btn-o, .tc-btn-warn, .tc-actbtn, .sv-act, .tc-fb, .um-go, .tkc-fab, .cl-dots {
  transition: transform .18s var(--ease-out), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease; }
.btn:not(:disabled):hover, .aw-next:not(:disabled):hover, .hbtn:hover, .cl-hbtn:hover, .tc-fb:hover { transform: translateY(-1px); }
.btn:not(:disabled):active, .aw-next:not(:disabled):active, .aw-prev:active, .aw-sm:active, .hbtn:active, .cl-hbtn:active, .cl-chip:active,
.bk-btn:active, .tc-btn-o:active, .tc-btn-warn:active, .tc-actbtn:active, .sv-act:active, .tc-fb:active, .um-go:active, .cl-dots:active { transform: scale(.96); transition-duration: .08s; }
.mx-ripple-host { position: relative; overflow: hidden; }
.mx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: mxRipple .55s ease-out forwards; }
@keyframes mxRipple { to { transform: scale(1); opacity: 0; } }

/* ---------- Thẻ: nổi lên khi rê chuột ---------- */
.course-card, .hcourse, .tp-card, .hteacher, .hstep, .tp-clsi, .tp-achi, .cl-stat, .sv-stat, .tc-stat, .um-stat, .tc-cls, .ks-item, .cd-card, .zl-tpl {
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .25s ease; }
.course-card:hover, .hcourse:hover, .tp-card:hover, .hstep:hover, .tp-clsi:hover, .tc-cls:hover, .ks-item:hover {
  transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(15, 34, 87, .35); }
.cl-stat:hover, .sv-stat:hover, .tc-stat:hover, .um-stat:hover, .tp-achi:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(15, 34, 87, .35); }
/* Ảnh bìa phóng nhẹ khi rê chuột */
.course-card .course-cover.has-img, .hcourse .hcover.img { transition: background-size .5s var(--ease-out), filter .3s ease; background-size: 100% !important; }
.course-card:hover .course-cover.has-img, .hcourse:hover .hcover.img { background-size: 106% !important; }
.tp-card .tp-cimg, .tp-photo .tp-img, .hteacher .ph { transition: transform .45s var(--ease-out); }
.tp-card:hover .tp-cimg, .hteacher:hover .ph { transform: scale(1.06); }

/* ---------- Ô nhập: viền sáng mềm khi chọn ---------- */
input, select, textarea { transition: border-color .18s ease, box-shadow .2s ease, background-color .2s ease; }

/* ---------- Menu trái trang quản trị: biểu tượng nhích nhẹ khi rê chuột ---------- */
#side [data-view] { transition: background-color .2s ease, color .2s ease; }
#side [data-view] svg { transition: transform .25s var(--ease-spring); }
#side [data-view]:hover svg { transform: translateX(2px) scale(1.08); }

/* ---------- Thanh chọn hàng loạt, nhãn trạng thái ---------- */
.bk-bar:not([hidden]) { animation: mxUp .3s var(--ease-spring) both; }
@keyframes mxUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.badge, .tc-st, .sv-st, .tc-pill { transition: background-color .2s ease, color .2s ease; }

/* ---------- Tab / nút chọn ---------- */
.cl-tabs button, .um-tabs button, .tc-tabs button, #zlTabs button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease; }


/* ================= site-fx: hiệu ứng nâng cao cho website (js/site-fx.js) ================= */
/* Thanh tiến trình đọc */
.sfx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 999; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #f2b53a, #d7261e 55%, #1f3c88); pointer-events: none; transition: transform .1s linear; }
/* Menu co lại khi cuộn */
.hhead, .site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.hhead .wrap, .site-header .container { transition: height .3s var(--ease-out); }
.hhead.sfx-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 34, 87, .45); background: rgba(255, 255, 255, .88); }
.hhead.sfx-scrolled .wrap { height: 56px; }
.site-header.sfx-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 34, 87, .45); }
.site-header.sfx-scrolled .container { height: 54px; }
.hhead .hlogo .mark, .site-header .logo-mark { transition: transform .3s var(--ease-out); }
.hhead.sfx-scrolled .hlogo .mark, .site-header.sfx-scrolled .logo-mark { transform: scale(.88); }
/* Nút lên đầu trang + vòng tiến độ */
.sfx-top { position: fixed; left: 18px; bottom: 20px; z-index: 90; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: #1f3c88; cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(15, 34, 87, .45); display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease-spring); }
.sfx-top.on { opacity: 1; transform: none; pointer-events: auto; }
.sfx-top:hover { transform: translateY(-3px); }
.sfx-top .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.sfx-top .ring circle { fill: none; stroke: #e2e8f2; stroke-width: 3; }
.sfx-top .ring .fg { stroke: #d7261e; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.sfx-top .ar { width: 18px; height: 18px; position: relative; }
/* Thẻ nghiêng 3D + vệt sáng */
.course-card.sfx-tilt, .hcourse.sfx-tilt { transition: transform .08s linear, box-shadow .3s ease; will-change: transform; }
.course-card, .hcourse { position: relative; }
.course-card::after, .hcourse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--sfx-x, 50%) var(--sfx-y, 50%), rgba(255, 255, 255, .28), transparent 42%); }
.course-card.sfx-tilt::after, .hcourse.sfx-tilt::after { opacity: 1; }

/* Trang chủ: tiêu đề tự gõ */
.sfx-type { font-style: normal; color: var(--gold, #f2b53a); }
.sfx-caret { display: inline-block; margin-left: 2px; color: var(--gold, #f2b53a); font-weight: 300; animation: sfxCaret 1s steps(2) infinite; }
@keyframes sfxCaret { 50% { opacity: 0; } }
/* Chữ Hán bay nền */
.sfx-float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sfx-float span { position: absolute; font-family: var(--font-hanzi, serif); font-weight: 700; color: #fff; opacity: .07; animation: sfxDrift 12s ease-in-out infinite alternate; }
@keyframes sfxDrift { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(18px, -26px, 0) rotate(6deg); } }
/* Ô số liệu đầu trang: bỏ làm mờ nền (tránh thành mảng tối khi có chữ Hán bay phía sau) */
html body .hhero .hstats > div { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Ô viết chữ Hán */
.sfx-hanzi { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 -4px; padding: 8px 14px 8px 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease-out); }
.sfx-hanzi.on { opacity: 1; transform: none; }
.sfx-hanzi .pad { width: 92px; height: 92px; border-radius: 12px; position: relative;
  background: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 50% / 100% 50%, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 50% 0 / 50% 100%, rgba(255, 255, 255, .06); }
.sfx-hanzi .cap { display: grid; gap: 2px; color: #fff; }
.sfx-hanzi .cap b { font-family: var(--font-hanzi, serif); font-size: 1.6rem; color: var(--gold, #f2b53a); line-height: 1; }
.sfx-hanzi .cap span { font-size: .82rem; opacity: .85; }
/* Lộ trình HSK tự vẽ */
.hpath { position: relative; }
.hpath::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 4px; border-radius: 4px; z-index: 0;
  background: linear-gradient(90deg, #f2b53a, #d7261e, #1f3c88); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
.hpath.sfx-draw::before { transform: scaleX(1); }
.hpath .hstep { z-index: 1; }
.hpath.sfx-draw .hstep .lv { animation: sfxGlow .7s var(--ease-spring) both; }
.hpath.sfx-draw .hstep:nth-child(2) .lv { animation-delay: .3s; } .hpath.sfx-draw .hstep:nth-child(3) .lv { animation-delay: .6s; }
.hpath.sfx-draw .hstep:nth-child(4) .lv { animation-delay: .9s; } .hpath.sfx-draw .hstep:nth-child(5) .lv { animation-delay: 1.2s; } .hpath.sfx-draw .hstep:nth-child(6) .lv { animation-delay: 1.5s; }
@keyframes sfxGlow { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(242, 181, 58, .7); } 60% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(242, 181, 58, 0); } 100% { transform: scale(1); } }
@media (max-width: 900px) { .hpath::before { display: none; } }
/* Nút nhịp nhẹ */
.sfx-pulse { animation: sfxPulse 2.2s ease-in-out infinite; }
@keyframes sfxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 58, .55); } 50% { box-shadow: 0 0 0 12px rgba(242, 181, 58, 0); transform: scale(1.03); } }
/* Nhãn HOT / AI trên menu, lớp sắp đầy */
.hnav .hot { animation: sfxBadge 1.8s ease-in-out infinite; display: inline-block; }
@keyframes sfxBadge { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.08); } }
.ks-seat.few { animation: sfxBlink 1.4s ease-in-out infinite; }
@keyframes sfxBlink { 50% { opacity: .55; } }

/* Đồng hồ đếm ngược ưu đãi */
.sfx-promo { position: relative; z-index: 61; background: linear-gradient(90deg, #b3121b, #d7261e 45%, #e85d1f); color: #fff; animation: sfxDown .45s var(--ease-out) both; }
.sfx-promo.bye { animation: sfxUp .3s ease both; }
@keyframes sfxDown { from { transform: translateY(-100%); opacity: 0; } }
@keyframes sfxUp { to { transform: translateY(-100%); opacity: 0; } }
.sfx-promo .in { max-width: 1200px; margin: 0 auto; padding: 7px 44px 7px 16px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: .9rem; position: relative; }
.sfx-promo .tx { font-weight: 700; }
.sfx-promo .cd { display: inline-flex; align-items: center; gap: 6px; }
.sfx-promo .lb { opacity: .85; font-size: .8rem; margin-right: 2px; }
.sfx-promo .u { display: inline-grid; justify-items: center; line-height: 1; }
.sfx-promo .u b { min-width: 30px; padding: 4px 5px; border-radius: 6px; background: rgba(0, 0, 0, .28); font-variant-numeric: tabular-nums; text-align: center; font-size: .95rem; }
.sfx-promo .u b.flip { animation: sfxFlip .45s var(--ease-out); }
@keyframes sfxFlip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.sfx-promo .u small { font-size: .62rem; opacity: .85; margin-top: 2px; }
.sfx-promo .go { color: #ffe08a; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sfx-promo .go:hover { text-decoration: underline; }
.sfx-promo .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff; cursor: pointer; font-size: 1rem; }

/* Thông báo "vừa đăng ký" */
.sfx-proof { position: fixed; left: 18px; bottom: 132px; z-index: 92; display: flex; align-items: center; gap: 10px; max-width: 330px; padding: 10px 34px 10px 10px;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(15, 34, 87, .45); border: 1px solid #e2e8f2; font-size: .84rem; color: #16213a;
  opacity: 0; transform: translateX(-24px) scale(.96); transition: opacity .35s ease, transform .45s var(--ease-spring); }
.sfx-proof.on { opacity: 1; transform: none; }
.sfx-proof .av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #d7261e, #f2b53a); }
.sfx-proof b small { font-weight: 500; color: #64748b; }
.sfx-proof p { margin: 1px 0; line-height: 1.35; }
.sfx-proof a { color: #1f3c88; font-weight: 700; text-decoration: none; }
.sfx-proof .t { color: #94a3b8; font-size: .74rem; }
.sfx-proof .x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; cursor: pointer; }
@media (max-width: 560px) { .sfx-proof { left: 10px; right: 84px; bottom: 116px; max-width: none; } .sfx-top { left: 10px; bottom: 14px; width: 42px; height: 42px; } }

/* Hiệu ứng mùa lễ hội */
.sfx-season { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.sfx-season .p { position: absolute; top: -60px; display: block; width: calc(26px * var(--s)); height: calc(26px * var(--s)); font-style: normal; line-height: 1;
  font-size: calc(22px * var(--s)); animation: sfxFall linear infinite; opacity: .9; }
.sfx-season .p svg { width: 100%; height: 100%; display: block; }
.sfx-season.noel .p { width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(160, 190, 255, .9); opacity: .85; }
.sfx-season.trungthu .p { color: #ffd23f; text-shadow: 0 0 8px rgba(255, 190, 60, .8); }
@keyframes sfxFall { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(var(--dx), 110vh, 0) rotate(360deg); } }
.sfx-season .lan { position: absolute; top: 58px; width: 46px; transform-origin: top center; animation: sfxSway 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(215, 38, 30, .35)); }
.sfx-season .lan.l { left: 14px; } .sfx-season .lan.r { right: 14px; animation-delay: -1.8s; }
.sfx-season .lan svg { width: 100%; display: block; }
@keyframes sfxSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@media (max-width: 760px) { .sfx-season .lan { display: none; } }
@media (max-width: 560px) {
  .sfx-promo .in { gap: 6px 10px; padding: 6px 38px 6px 10px; font-size: .8rem; }
  .sfx-promo .lb { display: none; }
  .sfx-promo .u b { min-width: 24px; font-size: .82rem; padding: 3px 4px; }
}

/* Pháo giấy */
.sfx-confetti { position: fixed; left: 50%; top: 45%; width: 0; height: 0; z-index: 1000; pointer-events: none; }
.sfx-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; animation: sfxBurst 2.2s cubic-bezier(.15, .6, .35, 1) both; }
@keyframes sfxBurst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 420px)) rotate(var(--r)); opacity: 0; } }

/* Trang thi thử */
.xp-opt.on { animation: sfxPick .35s var(--ease-spring); }
@keyframes sfxPick { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }
body.xp-hurry .xp-timer { animation: sfxShake .5s ease-in-out infinite, xpBlink 1s steps(2) infinite; background: #fee2e2; color: #b91c1c; }
@keyframes sfxShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
.xp-res-h { animation: mxPop .6s var(--ease-out) both; }
.xp-skills .bar i { transform-origin: left; animation: sfxBar 1.2s var(--ease-out) .3s both; }
@keyframes sfxBar { from { transform: scaleX(0); } }


/* ================= Nút loa: nhạc nền + âm thanh thao tác (js/sound.js) ================= */
.snd-btn { position: fixed; left: 18px; bottom: 76px; z-index: 91; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: #1f3c88; box-shadow: 0 10px 26px -10px rgba(15, 34, 87, .45); display: grid; place-items: center; animation: mxPop .5s var(--ease-spring) .6s both;
  transition: transform .2s var(--ease-out), background-color .2s, color .2s; }
.snd-btn:hover { transform: translateY(-2px); }
.snd-btn.open { background: #1f3c88; color: #fff; }
.snd-btn svg { width: 22px; height: 22px; }
.snd-btn.snd-adm { left: auto; right: 18px; bottom: 18px; width: 40px; height: 40px; }
.snd-btn.snd-adm svg { width: 18px; height: 18px; }
.snd-btn .eq { position: absolute; right: 7px; bottom: 9px; display: none; gap: 1.5px; align-items: flex-end; height: 10px; }
.snd-btn .eq.on { display: flex; }
.snd-btn .eq i { width: 2.5px; background: #d7261e; border-radius: 2px; animation: sndEq .9s ease-in-out infinite; }
.snd-btn .eq i:nth-child(2) { animation-delay: -.3s; } .snd-btn .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes sndEq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
.snd-panel { position: fixed; left: 18px; bottom: 132px; z-index: 93; width: 280px; padding: 14px; border-radius: 16px; background: #fff; color: #16213a;
  box-shadow: 0 24px 50px -18px rgba(15, 34, 87, .5); border: 1px solid #e2e8f2; display: grid; gap: 10px; transform-origin: bottom left; animation: mxMenu .22s var(--ease-out) both; }
.snd-panel[hidden] { display: none; }
.snd-btn.snd-adm + .snd-panel { left: auto; right: 18px; bottom: 66px; }
.snd-panel .h { font-size: .92rem; }
.snd-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: .88rem; font-weight: 600; margin: 0; }
.snd-panel .row > span { flex: 1; min-width: 0; }
.snd-panel .row small { display: block; font-weight: 400; color: #64748b; font-size: .74rem; margin-top: 1px; }
.snd-panel .row input { position: absolute; opacity: 0; pointer-events: none; }
.snd-panel .sw { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background-color .2s; }
.snd-panel .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease-spring); }
.snd-panel .row input:checked + .sw { background: #16a34a; }
.snd-panel .row input:checked + .sw::after { transform: translateX(18px); }
.snd-panel .vol { display: grid; gap: 4px; font-size: .8rem; color: #475569; margin: 0; }
.snd-panel .vol input { width: 100%; accent-color: #1f3c88; }
@media (max-width: 560px) { .snd-btn:not(.snd-adm) { left: 10px; bottom: 62px; width: 42px; height: 42px; } .snd-panel { left: 10px; bottom: 112px; width: calc(100vw - 100px); max-width: 300px; } }

/* ---------- Tắt hiệu ứng khi người dùng muốn giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mx-rv { opacity: 1; transform: none; }
}

/* Biểu tượng trong nút quản trị chưa đặt kích thước (độ ưu tiên thấp – quy tắc riêng vẫn thắng) */
:where(body.admin-app) :where(.btn, .bk-btn) > svg { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }