/* Cổng thông tin giáo viên: nền sáng, khung kính mờ */
*{box-sizing:border-box}[hidden]{display:none!important}
:root{--ink:#1e293b;--mut:#64748b;--acc:#0284c7;--glass:rgba(255,255,255,.62);--line:rgba(255,255,255,.75)}
body{margin:0;min-height:100vh;font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  background-color:#fdf2f8;background-image:radial-gradient(circle at 12% 18%,#fbcfe8 0,transparent 38%),radial-gradient(circle at 88% 12%,#bae6fd 0,transparent 40%),radial-gradient(circle at 70% 85%,#fde68a 0,transparent 38%),radial-gradient(circle at 20% 90%,#c7d2fe 0,transparent 40%),linear-gradient(160deg,#fff1f7,#f0f9ff);
  background-size:cover;background-position:center;background-attachment:fixed}
a{color:inherit;text-decoration:none}
.page{width:min(1320px,100% - 28px);margin:0 auto;padding:18px 0 30px}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 30px rgba(15,23,42,.08);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
body.has-bg .glass{background:rgba(255,255,255,.7)}

/* đầu trang */
.top{display:flex;align-items:center;gap:16px;padding:16px 24px}
.logo{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#fff;padding:4px;box-shadow:0 4px 12px rgba(15,23,42,.1);flex:none}
.ttl{min-width:0}.ttl h1{margin:0;font-size:1.5rem;font-weight:800;line-height:1.25}.ttl p{margin:2px 0 0;color:var(--mut);font-size:.95rem}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.clock{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.7);font-size:.85rem;font-weight:600;color:#334155;white-space:nowrap}.clock i{color:var(--acc)}
.adm{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:14px;background:#fff;font-weight:700;font-size:.88rem;color:#334155;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:.2s}
.adm:hover{color:var(--acc);transform:translateY(-1px)}.adm i{font-size:.8rem}

/* bố cục */
.main{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:18px;align-items:start}
.side{padding:18px;display:flex;flex-direction:column;gap:6px;position:sticky;top:18px}
.mi{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;font-weight:600;font-size:1.02rem;color:#1e293b;transition:.2s}
.mi i{width:22px;text-align:center;color:#1e293b;font-size:1.05rem}
.mi:hover{background:rgba(255,255,255,.6)}
.mi.on{background:#fff;color:var(--acc);box-shadow:0 4px 14px rgba(15,23,42,.08)}.mi.on i{color:var(--acc)}
.views{display:flex;flex-direction:column;gap:18px;min-width:0}
.view{display:flex;flex-direction:column;gap:18px}
.card{padding:22px 24px}
.card h2{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.2rem;font-weight:800}
.none{color:var(--mut);padding:10px 2px}

/* truy cập nhanh */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 12px;border-radius:20px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);text-align:center;transition:.2s}
.tile:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 26px rgba(15,23,42,.1)}
.tile i{font-size:2.3rem;margin-bottom:6px}.tile b{font-size:.95rem}.tile small{color:var(--mut);font-size:.8rem}

/* tin tức */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.nw{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);transition:.2s}
a.nw:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.12);background:#fff}
.nw-img{aspect-ratio:2/1;background:#eef2ff;overflow:hidden}
.nw-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}a.nw:hover .nw-img img{transform:scale(1.04)}
.nw-b{padding:16px 18px}.nw-b b{display:block;font-size:1.02rem;line-height:1.4}
.nw-b p{margin:8px 0;color:#475569;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-b small{display:flex;align-items:center;gap:6px;color:var(--acc);font-weight:600;font-size:.8rem}

/* tài liệu */
.tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{border:0;background:rgba(255,255,255,.7);padding:9px 15px;border-radius:999px;font:inherit;font-weight:600;font-size:.88rem;color:#334155;cursor:pointer;transition:.2s}
.filters button i{font-style:normal;margin-left:4px;padding:1px 7px;border-radius:99px;background:#e2e8f0;font-size:.75rem}
.filters button.on{background:var(--acc);color:#fff}.filters button.on i{background:rgba(255,255,255,.25)}
.search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border-radius:999px;padding:0 16px;min-width:240px}.search i{color:#94a3b8}
.search input{border:0;outline:0;background:transparent;font:inherit;padding:10px 0;width:100%}
.docs{display:flex;flex-direction:column;gap:10px}
.doc{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);transition:.2s}
.doc:hover{background:#fff;transform:translateX(4px);box-shadow:0 8px 20px rgba(15,23,42,.08)}
.doc>i{font-size:1.9rem;width:36px;text-align:center;flex:none}.doc>div{flex:1;min-width:0}
.doc b{display:block}.doc small{color:var(--mut);font-size:.8rem}.doc p{margin:4px 0 0;color:#475569;font-size:.88rem}
.go{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e0f2fe;color:var(--acc);flex:none}

/* màn hình nhỏ: menu thành hàng ngang cuộn được */
@media (max-width:900px){
  body{background-attachment:scroll}.main{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;overflow-x:auto;padding:10px;gap:6px;scrollbar-width:none}.side::-webkit-scrollbar{display:none}
  .mi{flex:none;padding:10px 14px;font-size:.92rem;white-space:nowrap}
  .clock{display:none}
}
@media (max-width:560px){
  .top{padding:12px 14px;gap:12px}.logo{width:44px;height:44px}.ttl h1{font-size:1.12rem}.ttl p{font-size:.8rem}.adm span{display:none}.adm{padding:10px 12px}
  .card{padding:18px 16px}.tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile{padding:16px 8px}.tile i{font-size:1.9rem}.search{min-width:0;width:100%}
}