@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
/* =====================================================================
   Vũ Trụ Powerpoint — giao diện "LỚP HỌC PASTEL"
   Tím chủ đạo + hồng, vàng, xanh bạc hà; nền tím nhạt, thẻ trắng bo tròn lớn, bóng mềm màu tím,
   nút gradient, tiêu đề font Nunito tròn trịa. Nạp SAU CÙNG trên mọi trang (cả trang quản trị).
   ===================================================================== */
:root{
  --ink:#1F2D24; --ink2:#2C3E33; --body:#4A5048; --muted:#7C7F72; --faint:#B0AE9C;
  --line:#ECE4D0; --line2:#F2ECDC; --bd:#ECE4D0; --bd2:#DED3B6;
  --soft:#F0F7F1; --soft2:#FAF8F0; --mist:#F6F3E8; --cream:#FFF8EC; --lilac:#E5F3E9;
  --purple:#2E9E5B; --purple-d:#1F7A45; --brand:#2E9E5B; --violet:#56B87A; --blue:#4F8BFF;
  --pink:#FF6FAE; --lime:#FFE27A; --yellow:#FFD25E; --orange:#FF9F43; --teal:#2EC4A6; --mint:#34C38F;
  --grad:linear-gradient(135deg,#3DAE69 0%,#23804A 100%);
  --grad2:linear-gradient(135deg,#56B87A 0%,#FF7EB6 100%);
  --grad-sun:linear-gradient(135deg,#FFD25E 0%,#FF9F43 100%);
  --hero:linear-gradient(135deg,#2E9E5B 0%,#3F8F5E 45%,#FF8CC0 100%);
  --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.86); --glass-bd:rgba(255,255,255,.8);
  --blur:saturate(160%) blur(18px);
  --sh1:0 2px 6px rgba(70,62,30,.05),0 8px 22px rgba(70,62,30,.07);
  --sh2:0 6px 14px rgba(70,62,30,.08),0 22px 48px rgba(70,62,30,.14);
  --sh3:0 30px 80px rgba(40,50,25,.25);
  --shp:0 10px 24px rgba(35,128,74,.32);
  --ring:0 0 0 4px rgba(46,158,91,.18);
  --ease:cubic-bezier(.2,.75,.2,1);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --head:'Nunito','Be Vietnam Pro',system-ui,sans-serif;
  --warn-bg:#FFECEF; --warn-tx:#C8102E; --warn-ic:#E5243B;
}
html{background:#FBF7EC}
body,body.admin{color:var(--ink);background:#FBF7EC;letter-spacing:-.003em}
/* nền tím nhạt có vài đốm màu mềm */
body:not(.admin)::before{display:block;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38vw 38vw at 6% 4%,rgba(46,158,91,.20),transparent 62%),radial-gradient(34vw 34vw at 96% 12%,rgba(255,126,182,.16),transparent 62%),radial-gradient(40vw 34vw at 70% 100%,rgba(255,210,94,.14),transparent 66%),#FBF7EC}
::selection{background:rgba(46,158,91,.22)}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
a{transition:color .2s var(--ease),opacity .2s var(--ease)}
h1,h2,h3,.head h2,.ph-t,.mb-t,.logo,.btn,.zone h3,.rmtitle,.plname{font-family:var(--head)}
h1,h2{letter-spacing:-.01em}

/* ---------- thanh thông báo + header ---------- */
.announce{background:var(--grad)!important;color:#fff}
.announce .tag:not(.lime){background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)}
.announce .tag.lime,.announce a.tag{background:#FFE27A!important;color:var(--ink)!important}
header.site{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line)!important;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header.site.scrolled{background:rgba(255,255,255,.9)!important;box-shadow:0 8px 30px rgba(70,62,30,.08)}
nav.main a{color:var(--body);font-weight:700;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease)}
nav.main a:hover{background:var(--lilac);color:var(--purple)}
nav.main a.on{background:var(--grad);color:#fff;box-shadow:var(--shp)}
nav.main a.on svg,nav.main a.on .nic{color:#fff}
.lang{background:var(--lilac);border:0}
.lang button.on{background:#fff;color:var(--purple);box-shadow:0 2px 6px rgba(70,62,30,.15)}
.menu-t{background:var(--lilac)!important}
.logo{font-weight:900;color:var(--ink)}
.logo .mark{background:var(--grad)!important;border-radius:14px!important;box-shadow:var(--shp)}

/* ---------- nút: gradient tím, bo tròn, nổi nhẹ ---------- */
.btn{border-radius:999px;font-weight:800;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)!important}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)!important}
.btn-primary,.hbtn{background:var(--grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--shp)!important}
.btn-primary:hover,.hbtn:hover{background:linear-gradient(135deg,#3DAE69,#28904F)!important;box-shadow:0 14px 30px rgba(35,128,74,.4)!important}
.btn-ink{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.btn-ink:hover{background:#3D3278!important;box-shadow:0 10px 24px rgba(42,35,80,.25)!important}
.btn-ghost,.btn-soft,.btn-white{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
.btn-ghost:hover,.btn-soft:hover,.btn-white:hover{border-color:var(--bd2)!important;color:var(--purple)!important;box-shadow:var(--sh1)}
.btn-danger{background:var(--warn-bg)!important;color:var(--warn-tx)!important;border:0!important}
.ibtn{border-radius:12px;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.ibtn:hover{background:var(--lilac);color:var(--purple)}
.ibtn:active{transform:scale(.92)}

/* ---------- ô nhập ---------- */
.inp,input.inp,select.inp,textarea.inp,.kin{background:#fff;border:1.5px solid var(--line)!important;border-radius:14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.inp:focus,.kin:focus{border-color:var(--purple)!important;box-shadow:var(--ring)!important;outline:0}
.bigsearch,.psearch{background:#fff!important;border:1.5px solid var(--line)!important;border-radius:22px!important;box-shadow:var(--sh1)!important;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.bigsearch:focus-within,.psearch:focus-within{border-color:var(--purple)!important;box-shadow:var(--sh2),var(--ring)!important}
.bigsearch button,.psearch button{background:var(--grad)!important;color:#fff!important;border-radius:16px!important}

/* ---------- thẻ & khung: trắng, bo lớn, bóng tím mềm, nổi khi rê chuột ---------- */
.tcard,.rcard,.plcard,.accard,.nfcard,.mcard,.aucard,.ecard,.gcard,.vcard,.mkcard,.fcard,.scard,.bcard,.pcard,.dcard{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:var(--sh1);background:#fff}
.panel{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:var(--sh1)}
.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.dcard,.vcard,.mkcard,.fcard,.scard,.mcard{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)!important}
.tcard:hover,.rcard:hover,.bcard:hover,.pcard:hover,.nfcard:hover,.ecard:hover,.gcard:hover,.dcard:hover,.vcard:hover,.mkcard:hover,.fcard:hover,.scard:hover,.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:var(--bd2)!important}
.rcard img,.tcard img,.mkcard img{transition:transform .6s var(--ease)}
.rcard:hover img,.mkcard:hover img{transform:scale(1.04)}
.tag,.ph-tag{background:var(--lilac)!important;color:var(--purple)!important;font-weight:800;border-radius:999px}

/* ---------- popup / hộp thoại ---------- */
.modal,.pikm,.rmodal .rmbg,.rmbg{background:rgba(42,35,80,.38)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal .box,.pikm-box,.rmbox{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh3)!important}
body:not(.admin) :is(.pikm-box,.rmbox){animation:popIn .45s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.toast{background:rgba(42,35,80,.94)!important;color:#fff!important;border:0!important;border-radius:18px!important;box-shadow:var(--sh2)!important}
.toast *{color:inherit!important}

/* ---------- chip / tab / bộ lọc ---------- */
.chip,.rchip,.rkwc,.ftab,.tabs button,.seg button,.pill,.rpills button,.kwck,.tgrp button,.ctabs button{border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip.on,.rpills button.on,.tabs button.on,.ftab.on,.ctabs button.on,.kwck.on,.pill.on{background:var(--grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--shp)}
.seg{background:var(--lilac)!important;border-radius:999px}
.seg button.on{background:#fff!important;color:var(--purple)!important;box-shadow:0 2px 6px rgba(70,62,30,.15)}
.rgrp .rchip{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
.rgrp .rchip:hover{border-color:var(--bd2)!important;color:var(--purple)!important}
.rgrp .rkwc:hover{border-color:var(--bd2)!important;color:var(--purple)!important}

/* ---------- chi tiết tài nguyên ---------- */
.rdl2.is-free,.rdl2.is-pro{background:var(--grad)!important;color:#fff!important;box-shadow:var(--shp)}
.rdl2.is-free:hover,.rdl2.is-pro:hover{box-shadow:0 14px 30px rgba(35,128,74,.4)}
.rdlic,.rdl2.is-pro .rdlic{background:rgba(255,255,255,.2)!important;color:#fff!important}
.rcopy.ok{background:var(--purple)!important;color:#fff!important;border-color:var(--purple)!important}

/* ---------- công tắc / ô tích ---------- */
.switch input:checked+span::before,.switch input:checked{background:var(--purple)!important;border-color:var(--purple)!important}
input[type=checkbox]:checked,input[type=radio]:checked{accent-color:var(--purple)}
.kwsug .on .ck,.kwck.on .ck{background:var(--purple)!important;border-color:var(--purple)!important}

/* ---------- cảnh báo / thông báo ---------- */
.savebar .dirty,.dirtyn,.auerr,.notice.warn,.medit-foot .dirtyn{background:var(--warn-bg)!important;color:var(--warn-tx)!important}
.notice.warn svg,.auerr svg{color:var(--warn-ic)!important}
.notice{background:var(--lilac)!important;color:var(--body)!important;border-radius:16px!important}
.notice svg{color:var(--purple)}

/* ---------- quản trị: cùng bộ màu với website ---------- */
body.admin{background:#FBF7EC}
.aside,.side,.anav{background:#fff!important;border-right:1px solid var(--line)!important}
.anav a.on,.aside a.on,.side a.on,.side .it.on,.side a.it.on,aside .it.on{background:var(--grad)!important;color:#fff!important;box-shadow:var(--shp)}
.side a.it,.side .it{border-radius:14px}
.side a.it:not(.on):hover,.side .it:not(.on):hover{background:var(--lilac);color:var(--purple)}
.sgh,.anav h4,.aside h4,.agrp>b{color:var(--faint)!important}
.sgh:hover{color:var(--purple)!important}
.side a.it.on svg,aside .it.on svg{color:#fff!important}
body.admin :is(.tcard,.rcard,.fcard,.pcard,.mcard):hover{transform:none}
body.admin .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1)}
body.admin .stat .v{font-family:var(--head);color:var(--purple)}
body.admin table.t thead th{background:var(--soft2);color:var(--muted)}
body.admin .ahead,body.admin .atop,body.admin .topbar{background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line)!important}
.side .logo{white-space:nowrap;font-size:19px}

/* ---------- chuyển động nhẹ khi hiện nội dung (chỉ lần đầu mở trang) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard,.accard){animation:rise .6s var(--ease) both}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(2){animation-delay:.04s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(3){animation-delay:.08s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(4){animation-delay:.12s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(n+5){animation-delay:.16s}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- điểm nhấn thương hiệu ---------- */
.slot.s1,.z-tools,.art .acts2 span.p,.dh-ph,.bpv.snd,.acav-t,.avatar{background:var(--grad)!important}

/* ---------- khối Khám phá Vũ Trụ Powerpoint: icon màu bo tròn ---------- */
.ecard{border-radius:var(--r-lg)!important;padding:24px!important}
.elogo{border-radius:20px!important;box-shadow:0 8px 18px rgba(70,62,30,.18);color:#fff;display:grid;place-items:center}
.elogo svg{color:#fff}
.ego{color:var(--purple)!important;font-weight:800}
footer{background:#fff;border-top:1px solid var(--line)}

/* ================= MUA LẺ FILE (tài nguyên "Bán lẻ") ================= */
.rfmt.rpaid{background:#FFE27A;color:#1F2D24;font-weight:900;display:inline-flex;align-items:center;gap:3px}
.rfmt.rpaid.own{background:#DFF7E6;color:#127A3A}
.rbad.paid{background:#FFE27A;color:#1F2D24;display:inline-flex;align-items:center;gap:5px}
.rdl2.is-paid{background:#FF6FAE!important;color:#fff!important}
.rdl2.is-paid:hover{background:#E0287D!important;box-shadow:0 10px 26px rgba(255,62,165,.3)}
.rdl2.is-paid.own{background:#16A34A!important}
.rdl2.is-paid.own:hover{background:#12873D!important;box-shadow:0 10px 26px rgba(22,163,74,.28)}
.rpaynote{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--mist,#F6F3EA);font-size:13.5px;line-height:1.5}
.rpaynote svg{flex:none;margin-top:2px}
.seg button.on.paid{background:#FFE27A;color:#1F2D24}
.accchip.paid{background:#FFE27A;color:#1F2D24;display:inline-flex;align-items:center;gap:4px;cursor:default}
.payfile{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px;border:1px solid var(--line);border-radius:14px}
.payfile img,.payfile>span{width:64px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:var(--mist,#F6F3EA);display:grid;place-items:center}
.payfile div{min-width:0;flex:1;display:grid;gap:3px}
.payfile b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payfile small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px}
.payfile em{font-style:normal;font-weight:900;font-size:16px;white-space:nowrap}
.payqr-x{display:grid;place-content:center;gap:6px;text-align:center;padding:16px;color:var(--muted);font-size:12.5px}
.payqr-x b{font-size:34px;letter-spacing:.08em;color:var(--ink,#1F2D24)}
.paywait.ok .btn{margin-left:auto}
.fblist{display:grid;gap:10px}
.fbrow{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff}
.fbrow.exp{background:var(--mist,#F6F3EA)}
.fbrow.exp .fbth{filter:grayscale(1);opacity:.6}
.fbth{width:88px;height:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--mist,#F6F3EA);display:grid;place-items:center}
.fbth img{width:100%;height:100%;object-fit:cover}
.fbinfo{flex:1;min-width:0;display:grid;gap:3px}
.fbinfo b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbinfo small{color:var(--muted);font-size:12.5px}
.fbexp{display:flex;align-items:center;gap:5px}
.fbrow:not(.exp) .fbexp{color:#127A3A}
.fbrow.exp .fbexp{color:#B0105F}
@media (max-width:600px){.fbrow{flex-wrap:wrap}.fbrow .btn{width:100%;justify-content:center}}
.fbsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:6px 0 20px}
.fbsteps>div{position:relative;display:grid;gap:8px;align-content:start;padding:22px 20px;border:1px solid var(--line);border-radius:22px;background:#fff}
.fbsteps .fbn{position:absolute;top:16px;right:18px;font-weight:900;font-size:13px;color:var(--muted)}
.fbsteps b{font-size:16px}
.fbsteps p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
/* tên "Vũ Trụ Powerpoint" dài hơn tên cũ: giữ 1 dòng ở cột trái trang quản trị */
.side .logo{white-space:nowrap;font-size:19px}

/* ================= GIAO DIỆN LỚP HỌC PASTEL — chi tiết từng khu ================= */
h1,h2,.hero-t,.mb-t,.ph-t,.head h2,.zone h3,.ecard b,.plcard h3,.logo{font-family:var(--head)!important}
h1,h2,.hero-t{font-weight:900!important;letter-spacing:-.015em!important}
nav.main a.on{background:var(--grad)!important;color:#fff!important;box-shadow:var(--shp)}
nav.main a.on .nic,nav.main a.on span[class*=ic]{background:rgba(255,255,255,.22)!important;color:#fff!important}
header .bigsearch button,header .hsearch button,.hsearch button,.hs-go{background:var(--grad)!important;color:#fff!important}

/* đầu trang chủ: gradient tím → hồng sáng, có bong bóng trang trí */
.hero{background:var(--hero)!important;color:#fff}
.hero-shade{background:linear-gradient(180deg,rgba(25,50,35,calc(var(--hdim) * .35)),rgba(25,50,35,calc(var(--hdim) * .15)) 60%,rgba(255,120,180,calc(var(--hdim) * .2)))!important}
.hero-grid{opacity:.5}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before{width:clamp(160px,18vw,300px);aspect-ratio:1;left:6%;top:14%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%,transparent 70%);animation:floaty 9s ease-in-out infinite}
.hero::after{width:clamp(110px,12vw,200px);aspect-ratio:1;right:7%;top:20%;background:radial-gradient(circle at 30% 30%,rgba(255,226,122,.9),rgba(255,180,90,.35) 60%,transparent 72%);animation:floaty 11s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hero-t{text-shadow:0 6px 30px rgba(30,60,40,.25)!important}
.hero-k{background:rgba(255,255,255,.22)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)!important}
.hero-s{color:rgba(255,255,255,.92)!important}
.hero-b1{background:#fff!important;color:var(--purple)!important;box-shadow:0 12px 28px rgba(30,60,40,.28)}
.hero-b2{background:rgba(255,255,255,.18)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)!important}
.hero-ci{border-radius:26px!important;box-shadow:0 18px 40px rgba(30,60,40,.3)!important}

/* thẻ 4 khu "Hôm nay thầy cô cần gì?" */
.zone{border-radius:var(--r-lg)!important;box-shadow:var(--sh1)}
.zone:hover{box-shadow:var(--sh2)}
.z-tools{background:var(--grad)!important}
.z-res{background:linear-gradient(135deg,#FFE9A3,#FFD25E)!important}
.z-font{background:#fff!important;border:1px solid var(--line)!important}
.z-meme{background:var(--grad2)!important}
.zic{border-radius:14px!important}
.z-res .zic,.z-font .zic{background:var(--grad)!important;color:#fff!important}
.zcta{border-radius:999px!important}
.z-res .zcta,.z-font .zcta{background:var(--ink)!important;color:#fff!important}

/* khối thư viện học liệu ở trang chủ */
.mb-l{background:linear-gradient(145deg,#23804A 0%,#3DAE69 55%,#B17CFF 100%)!important;box-shadow:0 24px 50px rgba(35,128,74,.28)}
.mb-k{color:#FFE27A!important}
.mb-r{grid-template-rows:repeat(2,1fr)!important}
.mb-tile{background:#fff!important;border:1px solid var(--line);box-shadow:var(--sh1)}
.mb-tile:hover{box-shadow:var(--sh2)}
.mb-btn{background:#fff!important;color:var(--purple)!important}
.mb-tab.on,.mb-tabs .on{background:#fff!important;color:var(--ink)!important}

/* nút tối còn lại → tím mực dịu */
.btn-dark,.dbtn,.hrow .more,.secbtn,.tsbtn{background:var(--grad)!important;color:#fff!important}
.block.cream,.cream{background:transparent!important}
.cta-band,.block.lime,.lime-band{background:linear-gradient(135deg,#FFE9A3,#FFD25E)!important}
.fan-btn,.crv-btn{background:var(--grad)!important;color:#fff!important;box-shadow:var(--shp)!important}
.zcta{box-shadow:0 6px 14px rgba(42,35,80,.12)}
.eco{grid-template-columns:repeat(3,1fr)!important}
@media (max-width:900px){.eco{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.eco{grid-template-columns:1fr!important}}
/* trạng thái đang chọn: tím gradient thay cho đen */
.pill.on,.cpill.on,.pager button.on,.hbi.on,.kwtg.on,.vcform .rpills button.on,.acnav a.on,.navg-b.on,header.site.hv2 nav.main.hrow2 a.on,header.site.hv2 .navg-b.on,.navchip.on,.navpick-g button.on,.bnm.on,#aSideTog.on,.tpact.on,.kseg button.on,.rquick.on,.rddb.on,.fnu.on,.fbtn.fbold.on,.ltab.on,.prtabs a.on{background:var(--grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:var(--shp)!important}
.ltab{border-radius:var(--r-lg)!important;border:1px solid var(--line)!important;box-shadow:var(--sh1)!important}
.ltab:hover{border-color:var(--bd2)!important}
.ltab.on .lic{background:rgba(255,255,255,.22)!important}
.tdots i.on{background:var(--purple)!important}
.seg button.on.pro{background:var(--grad)!important;color:#fff!important}
nav.main .navg-p a.on,header.site.hv2 .navg-p a.on{background:var(--lilac)!important;color:var(--purple)!important}
.pikdemo{background:rgba(42,35,80,.92)!important;border-radius:20px!important}
.kwsug,.kdrop,.navg-p,.rdd-p,.ddp{border-radius:18px!important;box-shadow:var(--sh2)!important;border:1px solid var(--line)!important}
.vl-go,.tsx-go,.bt.lt .bbtn,.hsearch button,.va-toc a.on,.tsx-chips input:checked+span,.vcform .rpills button.on{background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
.tsx-go{box-shadow:var(--shp)!important}
.vl-end{background:var(--hero)!important}
.vccard.hot,.vl-pk.hot,.vl-tool.big{background:var(--grad)!important;border-color:transparent!important;color:#fff}
.tsx-kick{background:var(--lilac)!important;color:var(--purple)!important}
.tcat.on,.vs-sgrp button.on,.vs-split button.on,.vs-prov button.on,.vs-try.on,.vs-sgrp button.on:hover{background:var(--grad)!important;border-color:transparent!important;color:#fff!important}
.vs-tabs button.on{color:var(--purple)!important;border-bottom-color:var(--purple)!important}
.vs-vc.on{border-color:var(--purple)!important;box-shadow:0 0 0 1px var(--purple) inset!important}
.tcat{border-radius:999px}

/* ---------- trang Công cụ: 2 tầng — đối tượng (giáo viên / thiết kế) rồi nhóm con ---------- */
#tcats{display:grid!important;gap:12px;overflow:visible!important}
.audrow{display:flex;gap:10px;flex-wrap:wrap}
.audb{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:900;font-size:16px;color:var(--ink);font-family:var(--head);box-shadow:var(--sh1);transition:all .2s var(--ease)}
.audb .d{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff}
.audb small{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;font-weight:700;color:var(--muted);background:var(--lilac);padding:2px 9px;border-radius:999px}
.audb:hover{border-color:var(--bd2);transform:translateY(-1px)}
.audb.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shp)}
.audb.on .d{background:rgba(255,255,255,.22)!important}
.audb.on small{background:rgba(255,255,255,.22);color:#fff}
.subrow{display:flex;gap:8px;flex-wrap:wrap}
.subrow .cpill{font-size:14px}
.audhead{display:flex;align-items:center;gap:10px;margin:34px 0 4px;font-family:var(--head);font-weight:900;font-size:24px;color:var(--ink)}
.audhead span{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--ac)}
.audhead:first-child{margin-top:6px}

/* ===== Trang chủ — Thư viện học liệu (bản dễ thương): linh vật loa + tab dạng thẻ sticker bên trái, phím âm thanh dạng kẹo dẻo bên phải ===== */
#memeBoard.mb2on{display:block}
.mb2{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.5fr);gap:clamp(18px,2.4vw,36px);padding:clamp(22px,3vw,40px);border-radius:36px;background:linear-gradient(140deg,#FFF6FB 0%,#F4EEFF 45%,#EAF7FF 100%);border:2px solid #fff;box-shadow:0 18px 50px rgba(46,158,91,.14),inset 0 0 0 1px #E8F3EA}
.mb2-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(46,158,91,.13) 1.6px,transparent 1.8px);background-size:22px 22px;mask-image:linear-gradient(120deg,#000,transparent 60%);-webkit-mask-image:linear-gradient(120deg,#000,transparent 60%);pointer-events:none}
.mb2-star{position:absolute;font-size:22px;color:#FFB3D1;animation:mb2Tw 3s ease-in-out infinite;pointer-events:none}.mb2-star.s1{right:4%;top:8%}.mb2-star.s2{left:44%;bottom:6%;color:#9FD3AE;font-size:18px;animation-delay:-1s}.mb2-star.s3{right:38%;top:4%;color:#FFD25E;font-size:16px;animation-delay:-2s}
@keyframes mb2Tw{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.3) rotate(20deg);opacity:.5}}
.mb2-side{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mb2-mascot{width:150px;height:auto;margin:-6px 0 -4px -10px;filter:drop-shadow(0 12px 18px rgba(46,158,91,.25))}
.mb2-mascot .mb2-body{animation:mb2Bob 2.6s ease-in-out infinite;transform-origin:110px 180px}.mb2-mascot .mb2-cone{animation:mb2Pulse 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mb2-mascot .mb2-note{animation:mb2Note 3.2s ease-in-out infinite}.mb2-mascot .n2{animation-delay:-1.1s}.mb2-mascot .n3{animation-delay:-2.2s}
@keyframes mb2Bob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-4px)}}@keyframes mb2Pulse{50%{transform:scale(1.35)}}
@keyframes mb2Note{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-18px);opacity:0}}
.mb2-k{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#D6337A;font-weight:900;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(255,111,174,.18)}
.mb2-t{font-family:var(--head);font-size:clamp(26px,2.7vw,38px);line-height:1.12;margin:2px 0 0;color:#1F2D24;font-weight:900}
.mb2-s{margin:0;color:#6A6E60;font-size:15px;line-height:1.6}
.mb2-tabs{display:grid;gap:10px;width:100%;margin-top:8px}
.mb2-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:2px solid transparent;border-radius:20px;padding:10px 12px;cursor:pointer;box-shadow:0 4px 0 #E2EED5,0 8px 18px rgba(46,158,91,.08);transition:transform .15s,box-shadow .15s,border-color .15s;font:inherit;color:#1F2D24}
.mb2-tab:hover{transform:translateY(-2px)}.mb2-tab.on{border-color:var(--tc);box-shadow:0 4px 0 var(--tc),0 10px 22px rgba(46,158,91,.14)}
.mb2-tab .e{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--tc) 28%,#fff);flex:none}
.mb2-tab .l{flex:1;min-width:0}.mb2-tab b{display:block;font-size:15.5px;font-weight:900}.mb2-tab small{display:block;color:#8D8B79;font-size:12.5px;font-weight:600}
.mb2-tab .n{font-size:12px;font-weight:900;color:#2E9E5B;background:#E9F5EC;border-radius:999px;padding:4px 10px;white-space:nowrap}
.mb2-main{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.mb2-stage{background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border-radius:28px;padding:clamp(14px,1.8vw,22px);border:2px dashed #D3E8D8;flex:1;display:flex;flex-direction:column;justify-content:center}
.mb2-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.mb2-pad{position:relative;aspect-ratio:1/1;border:0;border-radius:30px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 10px;font:inherit;color:#1F2D24;transform:rotate(var(--r));
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),color-mix(in srgb,var(--pc) 32%,#fff);
  box-shadow:0 8px 0 color-mix(in srgb,var(--pc) 60%,#fff),0 16px 26px color-mix(in srgb,var(--pc) 30%,transparent),inset 0 -6px 0 rgba(0,0,0,.04);transition:transform .15s var(--ease),box-shadow .15s}
.mb2-pad:hover{transform:rotate(0) translateY(-4px) scale(1.03)}
.mb2-pad:active,.mb2-pad.hit{transform:rotate(0) translateY(6px) scale(.97);box-shadow:0 2px 0 color-mix(in srgb,var(--pc) 60%,#fff),0 6px 12px color-mix(in srgb,var(--pc) 25%,transparent)}
.mb2-pad .emo{font-size:clamp(30px,3.2vw,44px);line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));transition:transform .2s}
.mb2-pad.play .emo,.mb2-pad.hit .emo{animation:mb2Wig .5s ease}
@keyframes mb2Wig{25%{transform:rotate(-14deg) scale(1.2)}75%{transform:rotate(12deg) scale(1.15)}}
.mb2-pad b{font-size:clamp(12px,1vw,14px);font-weight:900;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb2-pad kbd{position:absolute;top:10px;left:12px;font:800 11px/1 var(--head);color:#fff;background:color-mix(in srgb,var(--pc) 75%,#1F2D24);border-radius:8px;padding:4px 6px;border:0;box-shadow:none}
.mb2-pad .eq{position:absolute;right:12px;top:12px;display:flex;gap:2px;align-items:flex-end;height:14px;opacity:0;transition:opacity .2s}.mb2-pad .eq i{width:3px;border-radius:2px;background:color-mix(in srgb,var(--pc) 80%,#1F2D24);height:30%}
.mb2-pad.play .eq{opacity:1}.mb2-pad.play .eq i{animation:mb2Eq .7s ease-in-out infinite}.mb2-pad.play .eq i:nth-child(2){animation-delay:-.2s}.mb2-pad.play .eq i:nth-child(3){animation-delay:-.4s}.mb2-pad.play .eq i:nth-child(4){animation-delay:-.1s}.mb2-pad.play .eq i:nth-child(5){animation-delay:-.3s}
@keyframes mb2Eq{50%{height:100%}}
.mb2-stage .mb-grid{margin:0}.mb2-stage .mb-empty{color:#6A6E60}
.mb2-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mb2-foot .mb2-btn{background:linear-gradient(135deg,#3DAE69,#FF7EB6)!important;color:#fff!important;box-shadow:0 6px 0 #CFE6D6,0 12px 24px rgba(46,158,91,.25)!important;border-radius:999px}
.mb2-foot .mb-hint{color:#8D8B79}
@media(max-width:1000px){.mb2{grid-template-columns:1fr}.mb2-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.mb2-tab{flex-direction:column;text-align:center;gap:6px}.mb2-tab small{display:none}}
@media(max-width:620px){.mb2-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.mb2-mascot{width:110px}}
@media(prefers-reduced-motion:reduce){.mb2 *{animation:none!important}}