/* =========================================================
   Vũ Trụ Powerpoint — giao diện "Lớp học" (nạp SAU mono.css, chỉ đổi giao diện)
   Gam màu: xanh bảng phấn, xanh lá, giấy kem, vàng bút dạ quang, hồng giấy nhớ, gỗ bảng.
   ========================================================= */
: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:#FFF6E0; --lilac:#E5F3E9;
  --purple:#2E9E5B; --purple-d:#23804A; --brand:#2E9E5B; --violet:#56B87A; --blue:#4F8BFF;
  --pink:#FF6FAE; --lime:#FFE27A; --yellow:#FFD25E; --orange:#FF9F43; --teal:#2EC4A6; --mint:#34C38F;
  --board:#2F4F3E; --board2:#24402F; --chalk:#F7F3E3; --wood:#B9844E; --wood2:#9C6B3B; --paper:#FFFDF6; --hl:#FFE27A;
  --grad:linear-gradient(135deg,#3DAE69 0%,#23804A 100%);
  --grad2:linear-gradient(135deg,#FFD25E 0%,#FF9F43 100%);
  --hero:var(--board);
  --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,.12);
  --shp:0 8px 20px rgba(35,128,74,.28);
  --ring:0 0 0 4px rgba(46,158,91,.18);
  --hand:'Segoe Print','Comic Sans MS','Nunito',cursive;
}
html{background:#FBF7EC}
body,body.admin{background:#FBF7EC}
/* nền giấy kem: lưới ô li rất nhạt + vài vệt màu ấm */
body:not(.admin)::before{background:
  radial-gradient(36vw 32vw at 4% 2%,rgba(255,226,122,.22),transparent 62%),
  radial-gradient(30vw 30vw at 98% 10%,rgba(46,158,91,.10),transparent 62%),
  radial-gradient(36vw 30vw at 70% 100%,rgba(255,179,209,.16),transparent 66%),
  linear-gradient(rgba(46,158,91,.045) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(46,158,91,.045) 1px,transparent 1px) 0 0/28px 28px,#FBF7EC!important}
::selection{background:rgba(255,226,122,.7)}

/* ---------- thanh thông báo: bảng phấn ---------- */
.announce{background:var(--board)!important;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)!important;background-size:6px 6px!important;color:var(--chalk)!important;border-bottom:4px solid var(--wood)}
.announce .tag:not(.lime){background:transparent!important;border:1.5px dashed rgba(247,243,227,.55)!important;color:#FFE27A!important}
.announce .tag.lime,.announce a.tag{background:#FFE27A!important;color:#1F2D24!important}

/* ---------- header ---------- */
header.site{background:rgba(255,253,246,.88)!important;border-bottom:1.5px solid #EDE3C8!important}
header.site.scrolled{background:rgba(255,253,246,.95)!important;box-shadow:0 8px 24px rgba(70,62,30,.08)}
nav.main a:hover{background:#E5F3E9!important;color:#23804A!important}
nav.main a.on,nav.main a.active,nav.main a[aria-current="page"]{background:var(--grad)!important;color:#fff!important;box-shadow:0 4px 0 #1E6E40,0 8px 16px rgba(35,128,74,.25)!important}

/* ---------- nút: kiểu "kẹo" có gờ dưới ---------- */
.btn-primary,.hbtn{background:var(--grad)!important;box-shadow:0 4px 0 #1E6E40,0 10px 20px rgba(35,128,74,.22)!important}
.btn-primary:hover,.hbtn:hover{background:linear-gradient(135deg,#46B873,#28904F)!important;transform:translateY(-1px)}
.btn-primary:active,.hbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #1E6E40!important}
.btn-soft{background:#E9F5EC!important;color:#1F7A45!important}
.btn-soft:hover{background:#DDEFE2!important}

/* ---------- tiêu đề mục: gạch chân bút dạ quang vàng ---------- */
.head h2,.sv-h2,.ph-t,.rmtitle{position:relative}
.head h2,.ph-t,.hrow h2{text-decoration:underline;text-decoration-color:rgba(255,226,122,.95);text-decoration-thickness:.26em;text-underline-offset:-.06em;text-decoration-skip-ink:none}
.head .tag,.ph-k,.hx .tag{background:#FFF2A8!important;color:#6A4A00!important;border:0!important;box-shadow:2px 3px 0 rgba(0,0,0,.06);transform:rotate(-1.5deg);display:inline-block}

/* ---------- thẻ: giấy kem, viền ấm ---------- */
.tcard,.rcard,.plcard,.accard,.nfcard,.mcard,.aucard,.ecard,.gcard,.vcard,.mkcard,.fcard,.scard,.bcard,.pcard,.dcard,.panel,.card{background:var(--paper)!important;border-color:#EDE3C8!important}
.tcard:hover,.rcard:hover,.bcard:hover,.pcard:hover,.ecard:hover,.gcard:hover,.vcard:hover,.fcard:hover,.scard:hover{border-color:#CFE6D6!important}

/* ---------- đầu trang chủ: bảng phấn khung gỗ ---------- */
.hero{background:var(--board)!important;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)!important;background-size:6px 6px!important;color:var(--chalk)!important;border:14px solid var(--wood)!important;box-shadow:inset 0 0 70px rgba(0,0,0,.35),0 20px 50px rgba(60,40,10,.22)!important}
.hero.nomedia .hb{opacity:.35;filter:saturate(.6)}
.hero-shade{background:linear-gradient(180deg,rgba(20,40,28,calc(var(--hdim) * .4)),rgba(20,40,28,calc(var(--hdim) * .9)))!important}
.hero-t{color:var(--chalk)!important;text-shadow:0 0 1px rgba(255,255,255,.5),0 4px 24px rgba(0,0,0,.25)!important}
.hero-k{background:transparent!important;box-shadow:none!important;border:2px dashed rgba(247,243,227,.6)!important;color:#FFE27A!important}
.hero-s{color:rgba(247,243,227,.92)!important}
.hero-b1{background:#FFE27A!important;color:#1F2D24!important;box-shadow:0 5px 0 #D9B640,0 12px 24px rgba(0,0,0,.25)!important}
.hero-b2{background:transparent!important;color:var(--chalk)!important;box-shadow:inset 0 0 0 2px rgba(247,243,227,.6)!important}
.hero::before{background:radial-gradient(circle at 30% 30%,rgba(255,226,122,.35),transparent 70%)!important}
.hero::after{background:radial-gradient(circle at 30% 30%,rgba(255,179,209,.3),transparent 70%)!important}
.hero-ci{border:6px solid #fff!important;border-radius:10px!important;box-shadow:0 14px 30px rgba(0,0,0,.35)!important}
.hero-c:nth-child(odd) .hero-ci{transform:rotate(-1.5deg)}.hero-c:nth-child(even) .hero-ci{transform:rotate(1.5deg)}

/* ---------- 4 khu trang chủ: thẻ giấy có băng dính ---------- */
.zone{position:relative;overflow:visible!important}
.zone::before{content:"";position:absolute;top:-10px;left:50%;width:76px;height:22px;margin-left:-38px;background:rgba(255,226,122,.8);transform:rotate(-3deg);z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.zone:nth-child(2n)::before{background:rgba(255,179,209,.8);transform:rotate(3deg)}
.zone:nth-child(3n)::before{background:rgba(159,211,174,.85)}

/* ---------- thư viện học liệu (trang chủ) ---------- */
.mb2{background:var(--paper)!important;background-image:linear-gradient(90deg,transparent 52px,#F5B5B5 52px,#F5B5B5 54px,transparent 54px),repeating-linear-gradient(transparent 0,transparent 31px,#E3EAF4 31px,#E3EAF4 32px)!important;border:1px solid #EDE3C8!important;border-radius:18px!important;box-shadow:0 14px 34px rgba(70,62,30,.1)!important;padding-left:clamp(60px,6vw,80px)!important}
.mb2-dots{display:none}
.mb2-k{background:#FFF2A8!important;color:#6A4A00!important;transform:rotate(-1.5deg)}
.mb2-t{color:#1F3A2A!important}
.mb2-stage{background:rgba(255,253,246,.85)!important;border-color:#CFE6D6!important}
.mb2-tab{box-shadow:0 4px 0 #E8DFC4,0 8px 18px rgba(70,62,30,.06)!important}
.mb2-foot .mb2-btn{background:var(--grad)!important;box-shadow:0 5px 0 #1E6E40,0 12px 24px rgba(35,128,74,.22)!important}
.mb2-mascot rect[fill="#2E9E5B"],.mb2-mascot rect[fill="#56B87A"]{}

/* ---------- trang công cụ ---------- */
.audb.on,.audrow .on,.tp-tabs button.on,.kseg button.on,.subrow .on,.pill.on{background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
.tp-paper{background:var(--paper)!important}

/* ---------- chân trang: bảng phấn ---------- */
footer.site,.site-footer,footer{background:var(--board)!important;color:rgba(247,243,227,.86)!important;border-top:10px solid var(--wood)!important}
footer.site a,footer a{color:var(--chalk)!important}
footer.site h4,footer h4,footer .fh,footer b{color:#FFE27A!important}
footer .logo,footer .brand{color:var(--chalk)!important}

/* ---------- ô nhập ---------- */
input:focus,select:focus,textarea:focus{border-color:#2E9E5B!important;box-shadow:var(--ring)!important}

/* ---------- admin: thanh bên màu bảng phấn ---------- */
body.admin .side,body.admin aside.side,body.admin .aside{background:var(--board)!important;color:var(--chalk)!important}
body.admin .side a,body.admin aside a{color:rgba(247,243,227,.82)!important}
body.admin .side a.on,body.admin aside a.on,body.admin .side a.active{background:#FFE27A!important;color:#1F2D24!important}
body.admin .side a:hover,body.admin aside a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
body.admin .side .gt,body.admin aside .gt,body.admin .side h6{color:#FFE27A!important;opacity:.85}