/* Giao dien chuyen nghiep cho nguoi lon: Dora LMS (lms.php) + trang giao vien (giao-vien.php). Nap SAU teacher.css, ap khi <body class="pro">.
   Chi doi khung trang (nen, chu, nut, the, bang, menu, hop thoai). KHONG doi bien --orange / --teal / --red: phieu bai tap, de, flashcard, slide tro choi
   (phan in A4 / trinh chieu cho hoc sinh trong teacher.css: .paper, .slide-wrap, .sl) van dung mau + chu tuoi cua Dora. Bieu tuong menu: assets/pro.js (thay emoji bang SVG net manh). */
body.pro {
  --p: #0F766E; --p-d: #0B5F59; --p-l: #E7F4F2; --p-ring: rgba(15,118,110,.18);
  --pbg: #F5F7FA; --pink: #1F2A37; --pmuted: #5B6573; --pline: #E3E8EE; --phead: #F8FAFC;
  --pgood: #15803D; --pwarn: #B45309; --pbad: #B42318;
  --pr: 10px; --psh: 0 1px 2px rgba(16,24,40,.05);
  background: var(--pbg); color: var(--pink);
  font: 400 14.5px/1.5 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
}
body.pro :is(h1, h2, h3, .brand):not(:is(.paper, .fc-page, .slide-wrap, .sl) *) { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; }
body.pro :is(b, strong):not(:is(.paper, .fc-page, .slide-wrap, .sl) *) { font-weight: 600; }
body.pro :where(a:not(:is(.paper, .fc-page, .slide-wrap, .sl) *)) { color: var(--p-d); }   /* :where = do uu tien thap: nut, menu, chip giu mau rieng */
body.pro .muted { color: var(--pmuted); }

/* ---------- khung: menu ben, dau trang ---------- */
body.pro .nav { background: #fff; border-right: 1px solid var(--pline); padding: 16px 10px; gap: 2px; }
body.pro .brand { font-size: 19px; color: var(--pink); }
body.pro .brand img { width: 32px; height: 32px; border-radius: 8px; }
body.pro .brand small { font: 600 10.5px 'Be Vietnam Pro', sans-serif; color: var(--p); letter-spacing: .08em; }
body.pro .nav a.it { font-weight: 500; padding: 8px 10px; border-radius: 8px; color: #344054; font-size: 14px; }
body.pro .nav a.it:hover { background: var(--pbg); }
body.pro .nav a.it.on { background: var(--p-l); color: var(--p-d); font-weight: 600; }
body.pro .nav a.it .i { width: 20px; font-size: 16px; display: inline-grid; place-items: center; color: #667085; }
body.pro .nav a.it.on .i { color: var(--p); }
body.pro .nav .grp { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #98A2B3; padding: 12px 10px 4px; }
body.pro .pi { width: 18px; height: 18px; display: block; }
body.pro .quota { background: var(--pbg); border: 1px solid var(--pline); border-radius: 8px; }
body.pro .quota .bar i { background: var(--p); }
body.pro .me { color: var(--pmuted); }
body.pro .me .av { background: var(--p-l); }
body.pro .ws-sel { font-weight: 600 !important; }
body.pro .main { padding: 24px 32px 80px; }
body.pro .ph { margin-bottom: 16px; }
body.pro .ph h1 { font-size: 24px; }
body.pro .mtop .brand { font-size: 17px; }

/* ---------- thanh phan ---------- */
body.pro .card { border-radius: var(--pr); box-shadow: var(--psh); border: 1px solid var(--pline); padding: 16px 18px; }
body.pro .card h3 { font-size: 15px; }
body.pro h3:not(:is(.paper, .fc-page, .slide-wrap, .sl) *) { font-size: 16px; }
body.pro .btn { border-radius: 8px; font-weight: 600; padding: 9px 14px; background: var(--p); color: #fff; box-shadow: none; transition: background .12s; }
body.pro .btn:hover { background: var(--p-d); }
body.pro .btn:active { transform: none; box-shadow: none; }
body.pro .btn.or { background: var(--p); color: #fff; box-shadow: none; }   /* 1 mau chinh: nut cam cua app be -> nut chinh */
body.pro .btn.or:hover { background: var(--p-d); }
body.pro .btn.ghost { background: #fff; color: #344054; box-shadow: 0 0 0 1px #D0D5DD inset; }
body.pro .btn.ghost:hover { background: var(--pbg); box-shadow: 0 0 0 1px #98A2B3 inset; }
body.pro .btn.danger { background: #fff; color: var(--pbad); box-shadow: 0 0 0 1px #FDA29B inset; }
body.pro .btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
body.pro .chip:not(:is(.paper, .fc-page, .slide-wrap, .sl) *) { border-radius: 6px; border: 1px solid var(--pline); background: #fff; font-weight: 500; font-size: 12px; padding: 2px 8px; color: #344054; }
body.pro .chip.teal { background: #ECFDF3; border-color: #ABEFC6; color: var(--pgood); }
body.pro .chip.or { background: #FFFAEB; border-color: #FEDF89; color: var(--pwarn); }
body.pro .chip.red { background: #FEF3F2; border-color: #FECDCA; color: var(--pbad); }
body.pro label.f > span { font-weight: 500; font-size: 13px; color: #344054; }
body.pro :is(.in, select.in, textarea.in) { border: 1px solid #D0D5DD; border-radius: 8px; padding: 8px 11px; font-weight: 400; }
body.pro .in:focus { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-ring); }
body.pro .tg { font-weight: 500; }
body.pro .tg input:checked { background: var(--p); }
body.pro .seg button { border: 1px solid #D0D5DD; border-radius: 8px; font-weight: 500; }
body.pro .seg button.on { border-color: var(--p); background: var(--p-l); color: var(--p-d); }
body.pro .err { color: var(--pbad); font-weight: 500; }
body.pro .empty { color: var(--pmuted); }
body.pro .empty .big { font-size: 34px; opacity: .8; }

/* so lieu */
body.pro .stat { gap: 12px; }
body.pro .stat div { border-radius: var(--pr); border: 1px solid var(--pline); box-shadow: var(--psh); padding: 14px 16px; }
body.pro .stat b { font: 600 22px/1.2 'Be Vietnam Pro', sans-serif; }
body.pro .stat span { font-size: 12.5px; color: var(--pmuted); }

/* bang */
body.pro table.res { border-radius: var(--pr); box-shadow: var(--psh); border: 1px solid var(--pline); border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
body.pro table.res th { background: var(--phead); color: #475467; font-weight: 600; font-size: 12px; text-transform: none; position: sticky; top: 0; z-index: 1; }
body.pro table.res th, body.pro table.res td { padding: 8px 12px; border-bottom: 1px solid #EAECF0; }
body.pro table.res tr:last-child td { border-bottom: 0; }
body.pro table.res tbody tr:hover td { background: #FAFBFC; }
body.pro table.res tr.click:hover td { background: #F2F8F7; }

/* hop thoai, thong bao, thanh duoi dien thoai */
body.pro .modal { background: rgba(16,24,40,.45); }
body.pro .modal .box { border-radius: 12px; box-shadow: 0 20px 40px rgba(16,24,40,.18); }
body.pro .modal .box h2 { font-size: 19px; }
body.pro .toast { border-radius: 8px; font-weight: 500; background: #101828; }
@media (max-width: 860px) {
  body.pro .main { padding: 14px 14px 92px; }
  body.pro .tabs { border-top: 1px solid var(--pline); }
  body.pro .tabs a { font-weight: 500; color: #667085; font-size: 10.5px; }
  body.pro .tabs a .i { font-size: 18px; display: grid; place-items: center; height: 22px; }
  body.pro .tabs a.on { color: var(--p); }
  body.pro .stat b { font-size: 19px; }
}

/* dang nhap */
body.pro .login h1 { font-size: 30px; }
body.pro .pitch li { font-weight: 400; }
@media print { body.pro { background: #fff; } }