/* ============================================================
   Sơ đồ tư duy MOS Excel 2019 — THPT Trần Nguyên Hãn
   Hệ màu lấy từ mẫu slide của trường:
     #053596 xanh chủ đạo · #D42821 đỏ nhấn
     #EAF0FB nền thẻ · #1B2438 chữ đậm · #5B6472 chữ phụ
   ============================================================ */
:root{
  --xanh:#053596; --do:#D42821; --nen-the:#EAF0FB;
  --chu:#1B2438; --chu-phu:#5B6472; --vien:#D6DEEE;
  --nen:#F7F9FD; --trang:#fff;
  --bong:0 2px 10px rgba(5,53,150,.08);
  --bong-cao:0 8px 30px rgba(5,53,150,.16);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--nen); color:var(--chu);
  font:16px/1.55 Arial,"Segoe UI",Roboto,sans-serif;
}
h2{font-size:1.5rem; color:var(--xanh); margin:0 0 18px}
h3{font-size:1.15rem; color:var(--xanh); margin:22px 0 8px}
a{color:var(--xanh)}

/* ---------- thanh trên ---------- */
.thanh-tren{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:10px 20px; background:var(--xanh); color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nhan-dien{display:flex; align-items:center; gap:12px; min-width:0}
.logo{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--do); color:#fff; font-size:20px;
  display:grid; place-items:center;
}
.ten-truong{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.ten-truong strong{font-size:.95rem; letter-spacing:.4px}
.ten-truong span{font-size:.78rem; opacity:.85}

.cong-cu{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nut{
  border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff;
  padding:7px 13px; border-radius:7px; cursor:pointer;
  font:inherit; font-size:.85rem; white-space:nowrap;
}
.nut:hover{background:rgba(255,255,255,.15)}
.nut:active{transform:translateY(1px)}

/* ---------- ô tìm ---------- */
.o-tim{position:relative}
.o-tim input{
  width:270px; max-width:52vw; padding:8px 12px; font:inherit; font-size:.88rem;
  border:1px solid rgba(255,255,255,.45); border-radius:7px;
  background:rgba(255,255,255,.13); color:#fff;
}
.o-tim input::placeholder{color:rgba(255,255,255,.72)}
.o-tim input:focus{outline:2px solid #fff; background:rgba(255,255,255,.2)}
.ket-qua-tim{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:340px;
  overflow:auto; background:#fff; color:var(--chu); border-radius:9px;
  box-shadow:var(--bong-cao); padding:6px; z-index:50;
}
.ket-qua-tim button{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:8px 10px; border-radius:6px; cursor:pointer; font:inherit;
  font-size:.86rem; line-height:1.35;
}
.ket-qua-tim button:hover{background:var(--nen-the)}
.ket-qua-tim .ma{color:var(--do); font-weight:bold; font-size:.76rem}
.ket-qua-tim .khong{padding:10px; color:var(--chu-phu); font-size:.86rem}

/* Khung sơ đồ, thẻ node, chú dẫn, gợi ý: xem mindmap.css
   (bố cục radial thay cho sơ đồ cây ngang trước đây) */

/* ---------- thống kê ---------- */
.thong-ke{
  max-width:1440px; margin:0 auto 26px; padding:0 18px;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
}
.o-so{
  background:var(--trang); border:1px solid var(--vien); border-radius:12px;
  padding:16px 18px; box-shadow:var(--bong);
}
.o-so b{display:block; font-size:2rem; color:var(--xanh); line-height:1.15}
.o-so span{font-size:.82rem; color:var(--chu-phu)}

/* ---------- phần & thẻ domain ---------- */
.phan{max-width:1440px; margin:0 auto 40px; padding:0 18px}
.the-domain{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.the{
  background:var(--trang); border:1px solid var(--vien); border-radius:12px;
  padding:18px; box-shadow:var(--bong); border-top:5px solid var(--xanh);
  display:flex; flex-direction:column; gap:9px;
}
.the h4{margin:0; font-size:1.05rem; color:var(--chu)}
.the .ma-d{font-size:.75rem; font-weight:bold; letter-spacing:.6px}
.the .en{font-size:.78rem; color:var(--chu-phu); font-style:italic}
.the .so{font-size:.82rem; color:var(--chu-phu)}
.the ul{margin:4px 0 0; padding-left:18px; font-size:.85rem; color:var(--chu-phu)}
.the ul li{margin:3px 0}

/* ---------- ngăn chi tiết ---------- */
.ngan-chi-tiet{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,42vw); z-index:60;
  background:var(--trang); box-shadow:-8px 0 34px rgba(0,0,0,.22);
  overflow-y:auto; padding:24px 26px 56px;
  animation:truot .22s ease-out;
}
@keyframes truot{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.man-che{position:fixed; inset:0; background:rgba(12,22,45,.45); z-index:55}
.dong{
  position:sticky; top:0; float:right; margin:-8px -10px 0 0;
  width:36px; height:36px; border:0; border-radius:50%;
  background:var(--nen-the); color:var(--xanh); font-size:24px; line-height:1;
  cursor:pointer;
}
.dong:hover{background:var(--do); color:#fff}

.ct-nhan{
  display:inline-block; background:var(--do); color:#fff; font-weight:bold;
  font-size:.72rem; letter-spacing:.7px; padding:5px 11px; border-radius:20px;
}
.ct-ten{font-size:1.5rem; color:var(--xanh); margin:12px 0 4px; line-height:1.3}
.ct-nguon{font-size:.8rem; color:var(--chu-phu); margin:0 0 18px}
.ct-khoi{
  background:var(--nen-the); border-radius:10px; padding:14px 16px; margin:14px 0;
}
.ct-khoi.do{background:#FDECEA; border-left:4px solid var(--do)}
.ct-nho{
  font-family:"Consolas","Courier New",monospace; font-size:.95rem;
  color:var(--do); font-weight:bold; word-break:break-word;
}
.ct-ribbon{
  font-size:.9rem; color:var(--xanh); font-weight:bold; word-break:break-word;
}
.ngan-chi-tiet ol,.ngan-chi-tiet ul{padding-left:22px; margin:8px 0}
.ngan-chi-tiet li{margin:6px 0}
.ct-anh{
  width:100%; border:1px solid var(--vien); border-radius:8px; display:block;
  margin:6px 0 4px; background:#fff;
}
.ct-cap{font-size:.78rem; color:var(--chu-phu); margin:0 0 14px}
.ct-truoc-sau{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.ct-truoc-sau{grid-template-columns:1fr 1fr}}
.ct-the-ts{border:1px solid var(--vien); border-radius:10px; padding:10px; background:#fff}
.ct-the-ts h5{
  margin:0 0 8px; font-size:.75rem; letter-spacing:.7px; color:#fff;
  background:#6B7280; display:inline-block; padding:4px 12px; border-radius:20px;
}
.ct-the-ts.sau h5{background:var(--xanh)}
/* ---------- khối luyện tập trên Excel ---------- */
.ct-lam-bai{
  border:2px solid #1E7A46; border-radius:12px; padding:15px 17px;
  margin:18px 0; background:#F1FAF4;
}
.ct-lb-dau{display:flex; gap:12px; align-items:flex-start}
.ct-lb-icon{
  width:34px; height:34px; flex:none; border-radius:8px; background:#1E7A46;
  color:#fff; display:grid; place-items:center; font-size:17px;
}
.ct-lb-dau strong{display:block; color:#146036; font-size:1rem}
.ct-lb-dau small{display:block; color:#4A6B58; font-size:.8rem; margin-top:2px}
.ct-lb-nut{display:flex; gap:10px; flex-wrap:wrap; margin:13px 0 0}
.ct-lb-nut a{
  text-decoration:none; font-size:.87rem; font-weight:bold;
  padding:9px 16px; border-radius:8px; white-space:nowrap;
}
.lb-chinh{background:#1E7A46; color:#fff}
.lb-chinh:hover{background:#176037}
.lb-phu{background:#fff; color:#146036; border:1.5px solid #1E7A46}
.lb-phu:hover{background:#E3F3EA}
.ct-lb-nhac{
  margin:11px 0 0; font-size:.77rem; color:#4A6B58; line-height:1.5;
}

.ct-tag{
  display:inline-block; background:var(--nen-the); color:var(--xanh);
  border:1px solid #C9D8F2; font-size:.74rem; font-weight:bold;
  padding:3px 9px; border-radius:14px; margin:3px 4px 3px 0;
}

/* ---------- chân trang ---------- */
footer{
  background:var(--xanh); color:#fff; padding:26px 20px; font-size:.86rem;
  display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap;
}
footer .nguon{max-width:560px; opacity:.82; font-size:.8rem}

@media(max-width:720px){
  .thanh-tren{padding:10px 14px}
  .ten-truong span{display:none}
  .ngan-chi-tiet{padding:20px 18px 50px}
}