/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */
#sitemodal .modal-content {
    position: relative;
}

#sitemodal .modal-header .close {
    position: absolute;
    top: 5px;
    right: 15px;
    z-index: 999;
    font-size: 20px;
}

/* ====== CSS cho khối "Mẫu Giáo" - dán vào ô Custom CSS trong trang Quản trị NukeViet ====== */

.mg-wrap{ font-family:'Nunito',sans-serif; color:#2D3142; max-width:1000px; margin:0 auto; }
.mg-wrap *{ box-sizing:border-box; }

/* ---------- HERO ---------- */
.mg-hero{
  position:relative;
  background:linear-gradient(135deg,#3F8EFC 0%,#5FA8FF 55%,#7BC0FF 100%);
  color:#fff; padding:36px 28px 44px; border-radius:24px; text-align:center;
}
.mg-eyebrow{
  display:inline-block; font-weight:700; font-size:13px; letter-spacing:1px;
  text-transform:uppercase; background:rgba(255,255,255,0.22);
  padding:6px 16px; border-radius:999px; margin-bottom:12px;
}
.mg-hero h1{ font-weight:800; font-size:34px; margin:0 0 10px; line-height:1.2; }
.mg-hero p{ font-size:16px; margin:0; opacity:.95; }

/* ---------- GRID ---------- */
.mg-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px;
}
@media (max-width:640px){ .mg-grid{ grid-template-columns:1fr; } }

.mg-card{
  position:relative; background:#fff; border-radius:18px; padding:22px 20px;
  box-shadow:0 3px 12px rgba(45,49,66,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
  border-top:5px solid var(--mg-accent);
}
.mg-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 26px rgba(45,49,66,0.16);
}

.mg-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--mg-accent-soft); margin-bottom:12px;
  transition:transform .3s ease;
}
.mg-card:hover .mg-icon{ transform:scale(1.12) rotate(-6deg); }

.mg-card h3{ font-size:18px; font-weight:700; margin:0 0 8px; color:#242836; }
.mg-card p{ margin:0; font-size:14.5px; line-height:1.55; color:#565C6E; }

.mg-card--green{ --mg-accent:#4CAF50; --mg-accent-soft:#E7F7E9; }
.mg-card--orange{ --mg-accent:#FF9800; --mg-accent-soft:#FFF2E0; }
.mg-card--pink{ --mg-accent:#E91E63; --mg-accent-soft:#FDE8EE; }
.mg-card--blue{ --mg-accent:#2196F3; --mg-accent-soft:#E6F2FE; }